diff --git a/scm-ui-components/packages/ui-components/src/ErrorNotification.js b/scm-ui-components/packages/ui-components/src/ErrorNotification.js index 9ef3b58653..5600d81799 100644 --- a/scm-ui-components/packages/ui-components/src/ErrorNotification.js +++ b/scm-ui-components/packages/ui-components/src/ErrorNotification.js @@ -18,7 +18,7 @@ class ErrorNotification extends React.Component { ); } - return ""; + return null; } } diff --git a/scm-ui/src/containers/AsyncAutocomplete.js b/scm-ui/src/containers/Autocomplete.js similarity index 70% rename from scm-ui/src/containers/AsyncAutocomplete.js rename to scm-ui/src/containers/Autocomplete.js index 17701fbb9d..a1677be287 100644 --- a/scm-ui/src/containers/AsyncAutocomplete.js +++ b/scm-ui/src/containers/Autocomplete.js @@ -1,31 +1,31 @@ // @flow import React from "react"; import AsyncSelect from "react-select/lib/Async"; -import {LabelWithHelpIcon} from "@scm-manager/ui-components"; +import { LabelWithHelpIcon } from "@scm-manager/ui-components"; -type SelectionResult = { +export type AutocompleteObject = { id: string, displayName: string }; type SelectValue = { - value: SelectionResult, + value: AutocompleteObject, label: string }; type Props = { - loadSuggestions: string => Promise, - valueSelected: SelectionResult => void, + loadSuggestions: string => Promise, + valueSelected: AutocompleteObject => void, label: string, helpText?: string, - value?: any + value?: AutocompleteObject }; type State = { - value: SelectionResult + value: AutocompleteObject }; -class AsyncAutocomplete extends React.Component { +class Autocomplete extends React.Component { handleInputChange = (newValue: SelectValue) => { this.setState({ value: newValue.value }); this.props.valueSelected(newValue.value); @@ -51,4 +51,4 @@ class AsyncAutocomplete extends React.Component { } } -export default AsyncAutocomplete; +export default Autocomplete; diff --git a/scm-ui/src/groups/components/AutocompleteAddEntryToTableField.js b/scm-ui/src/groups/components/AutocompleteAddEntryToTableField.js index 37cf11e32c..7e794fbad5 100644 --- a/scm-ui/src/groups/components/AutocompleteAddEntryToTableField.js +++ b/scm-ui/src/groups/components/AutocompleteAddEntryToTableField.js @@ -2,7 +2,8 @@ import React from "react"; import { AddButton } from "@scm-manager/ui-components"; -import AsyncAutocomplete from "../../containers/AsyncAutocomplete"; +import Autocomplete from "../../containers/Autocomplete"; +import type { AutocompleteObject } from "../../containers/Autocomplete"; type Props = { addEntry: string => void, @@ -10,21 +11,14 @@ type Props = { buttonLabel: string, fieldLabel: string, helpText?: string, - loadSuggestions: string => any //TODO: type + loadSuggestions: string => Promise }; type State = { - entryToAdd: any // TODO: type + entryToAdd: AutocompleteObject }; class AutocompleteAddEntryToTableField extends React.Component { - constructor(props: Props) { - super(props); - this.state = { - entryToAdd: undefined - }; - } - render() { const { disabled, buttonLabel, fieldLabel, helpText } = this.props; @@ -32,12 +26,12 @@ class AutocompleteAddEntryToTableField extends React.Component { return (
- string, @@ -22,7 +25,8 @@ type Props = { loading?: boolean, error?: Error, resetForm: () => void, - createLink: string + createLink: string, + autocompleteLink: string }; type State = {}; @@ -31,6 +35,7 @@ class AddGroup extends React.Component { componentDidMount() { this.props.resetForm(); } + render() { const { t, loading, error } = this.props; return ( @@ -43,12 +48,26 @@ class AddGroup extends React.Component { this.createGroup(group)} loading={loading} + loadUserSuggestions={this.loadUserAutocompletion} />
); } + loadUserAutocompletion = (inputValue: string) => { + const url = this.props.autocompleteLink + "?q="; + return fetch(url + inputValue) + .then(response => response.json()) + .then(json => { + return json.map(element => { + return { + value: element, + label: `${element.displayName} (${element.id})` + }; + }); + }); + }; groupCreated = () => { this.props.history.push("/groups"); }; @@ -71,10 +90,12 @@ const mapStateToProps = state => { const loading = isCreateGroupPending(state); const error = getCreateGroupFailure(state); const createLink = getGroupsLink(state); + const autocompleteLink = getUserAutoCompleteLink(state); return { createLink, loading, - error + error, + autocompleteLink }; }; diff --git a/scm-ui/src/groups/containers/EditGroup.js b/scm-ui/src/groups/containers/EditGroup.js index 70702138be..223ea1eef6 100644 --- a/scm-ui/src/groups/containers/EditGroup.js +++ b/scm-ui/src/groups/containers/EditGroup.js @@ -1,18 +1,25 @@ //@flow import React from "react"; -import {connect} from "react-redux"; +import { connect } from "react-redux"; import GroupForm from "../components/GroupForm"; -import {getModifyGroupFailure, isModifyGroupPending, modifyGroup, modifyGroupReset} from "../modules/groups"; -import type {History} from "history"; -import {withRouter} from "react-router-dom"; -import type {Group} from "@scm-manager/ui-types"; -import {ErrorNotification} from "@scm-manager/ui-components"; +import { + getModifyGroupFailure, + isModifyGroupPending, + modifyGroup, + modifyGroupReset +} from "../modules/groups"; +import type { History } from "history"; +import { withRouter } from "react-router-dom"; +import type { Group } from "@scm-manager/ui-types"; +import { ErrorNotification } from "@scm-manager/ui-components"; +import { getUserAutoCompleteLink } from "../../modules/indexResource"; type Props = { group: Group, modifyGroup: (group: Group, callback?: () => void) => void, modifyGroupReset: Group => void, fetchGroup: (name: string) => void, + autocompleteLink: string, history: History, loading?: boolean, error: Error @@ -33,7 +40,7 @@ class EditGroup extends React.Component { }; loadUserAutocompletion = (inputValue: string) => { - const url = "http://localhost:8081/scm/api/v2/autocomplete/users?q="; + const url = this.props.autocompleteLink + "?q="; return fetch(url + inputValue) .then(response => response.json()) .then(json => { @@ -67,9 +74,11 @@ class EditGroup extends React.Component { const mapStateToProps = (state, ownProps) => { const loading = isModifyGroupPending(state, ownProps.group.name); const error = getModifyGroupFailure(state, ownProps.group.name); + const autocompleteLink = getUserAutoCompleteLink(state); return { loading, - error + error, + autocompleteLink }; };