Refactoring / Flow types

scm-ui-components/packages/ui-components/src/ErrorNotification.js

@@ -18,7 +18,7 @@ class ErrorNotification extends React.Component<Props> {
         </Notification>
       );
     }
-    return "";
+    return null;
   }
 }
 

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<SelectionResult>,
+  loadSuggestions: string => Promise<AutocompleteObject>,
-  valueSelected: SelectionResult => void,
+  valueSelected: AutocompleteObject => void,
   label: string,
   helpText?: string,
-  value?: any
+  value?: AutocompleteObject
 };
 
 type State = {
-  value: SelectionResult
+  value: AutocompleteObject
 };
 
-class AsyncAutocomplete extends React.Component<Props, State> {
+class Autocomplete extends React.Component<Props, State> {
   handleInputChange = (newValue: SelectValue) => {
     this.setState({ value: newValue.value });
     this.props.valueSelected(newValue.value);
@@ -51,4 +51,4 @@ class AsyncAutocomplete extends React.Component<Props, State> {
   }
 }
 
-export default AsyncAutocomplete;
+export default Autocomplete;

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<AutocompleteObject>
 };
 
 type State = {
-  entryToAdd: any // TODO: type
+  entryToAdd: AutocompleteObject
 };
 
 class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
-  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<Props, State> {
 
     return (
       <div className="field">
-        <AsyncAutocomplete
+        <Autocomplete
           label={fieldLabel}
           loadSuggestions={this.props.loadSuggestions}
           valueSelected={this.handleAddEntryChange}
           helpText={helpText}
-          value={entryToAdd ? entryToAdd.id : ""}
+          value={entryToAdd}
         />
 
         <AddButton

scm-ui/src/groups/components/GroupForm.js

@@ -1,8 +1,8 @@
 //@flow
 import React from "react";
-import {translate} from "react-i18next";
+import { translate } from "react-i18next";
-import {InputField, SubmitButton, Textarea} from "@scm-manager/ui-components";
+import { InputField, SubmitButton, Textarea } from "@scm-manager/ui-components";
-import type {Group} from "@scm-manager/ui-types";
+import type { Group } from "@scm-manager/ui-types";
 
 import * as validator from "./groupValidation";
 import MemberNameTable from "./MemberNameTable";

scm-ui/src/groups/containers/AddGroup.js

@@ -13,7 +13,10 @@ import {
 } from "../modules/groups";
 import type { Group } from "@scm-manager/ui-types";
 import type { History } from "history";
-import { getGroupsLink } from "../../modules/indexResource";
+import {
+  getGroupsLink,
+  getUserAutoCompleteLink
+} from "../../modules/indexResource";
 
 type Props = {
   t: string => 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<Props, State> {
   componentDidMount() {
     this.props.resetForm();
   }
+
   render() {
     const { t, loading, error } = this.props;
     return (
@@ -43,12 +48,26 @@ class AddGroup extends React.Component<Props, State> {
           <GroupForm
             submitForm={group => this.createGroup(group)}
             loading={loading}
+            loadUserSuggestions={this.loadUserAutocompletion}
           />
         </div>
       </Page>
     );
   }
 
+  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
   };
 };
 

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 {
-import type {History} from "history";
+  getModifyGroupFailure,
-import {withRouter} from "react-router-dom";
+  isModifyGroupPending,
-import type {Group} from "@scm-manager/ui-types";
+  modifyGroup,
-import {ErrorNotification} from "@scm-manager/ui-components";
+  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<Props> {
   };
 
   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<Props> {
 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
   };
 };