merge with feature/autocomplete

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

@@ -0,0 +1,73 @@
+// @flow
+import React from "react";
+import { AsyncCreatable } from "react-select";
+import type { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
+import LabelWithHelpIcon from "./forms/LabelWithHelpIcon";
+
+
+type Props = {
+  loadSuggestions: string => Promise<AutocompleteObject>,
+  valueSelected: SelectValue => void,
+  label: string,
+  helpText?: string,
+  value?: SelectValue,
+  placeholder: string,
+  loadingMessage: string,
+  noOptionsMessage: string
+};
+
+
+type State = {};
+
+class Autocomplete extends React.Component<Props, State> {
+
+
+  static defaultProps = {
+    placeholder: "Type here",
+    loadingMessage: "Loading...",
+    noOptionsMessage: "No suggestion available"
+  };
+
+  handleInputChange = (newValue: SelectValue) => {
+    this.props.valueSelected(newValue);
+  };
+
+  // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
+  isValidNewOption = (inputValue: string, selectValue: SelectValue, selectOptions: SelectValue[]) => {
+    const isNotDuplicated = !selectOptions
+      .map(option => option.label)
+      .includes(inputValue);
+    const isNotEmpty = inputValue !== "";
+    return isNotEmpty && isNotDuplicated;
+  };
+
+  render() {
+    const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions } = this.props;
+    return (
+      <div className="field">
+        <LabelWithHelpIcon label={label} helpText={helpText} />
+        <div className="control">
+          <AsyncCreatable
+            cacheOptions
+            loadOptions={loadSuggestions}
+            onChange={this.handleInputChange}
+            value={value}
+            placeholder={placeholder}
+            loadingMessage={() => loadingMessage}
+            noOptionsMessage={() => noOptionsMessage}
+            isValidNewOption={this.isValidNewOption}
+            onCreateOption={value => {
+              this.handleInputChange({
+                label: value,
+                value: { id: value, displayName: value }
+              });
+            }}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+
+export default Autocomplete;

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-components/packages/ui-components/src/Paginator.test.js

@@ -1,12 +1,11 @@
 // @flow
 import React from "react";
-import {mount, shallow} from "enzyme";
+import { mount, shallow } from "enzyme";
 import "./tests/enzyme";
 import "./tests/i18n";
 import ReactRouterEnzymeContext from "react-router-enzyme-context";
 import Paginator from "./Paginator";
 
-// TODO: Fix tests
 xdescribe("paginator rendering tests", () => {
 
   const options = new ReactRouterEnzymeContext();

scm-ui-components/packages/ui-components/src/forms/AutocompleteAddEntryToTableField.js

@@ -0,0 +1,88 @@
+//@flow
+import React from "react";
+
+import type { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
+import Autocomplete from "../Autocomplete";
+import AddButton from "../buttons/AddButton";
+
+type Props = {
+  addEntry: SelectValue => void,
+  disabled: boolean,
+  buttonLabel: string,
+  fieldLabel: string,
+  helpText?: string,
+  loadSuggestions: string => Promise<AutocompleteObject>,
+  placeholder?: string,
+  loadingMessage?: string,
+  noOptionsMessage?: string
+};
+
+type State = {
+  selectedValue?: SelectValue
+};
+
+class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { selectedValue: undefined };
+  }
+  render() {
+    const {
+      disabled,
+      buttonLabel,
+      fieldLabel,
+      helpText,
+      loadSuggestions,
+      placeholder,
+      loadingMessage,
+      noOptionsMessage
+    } = this.props;
+
+    const { selectedValue } = this.state;
+    return (
+      <div className="field">
+        <Autocomplete
+          label={fieldLabel}
+          loadSuggestions={loadSuggestions}
+          valueSelected={this.handleAddEntryChange}
+          helpText={helpText}
+          value={selectedValue}
+          placeholder={placeholder}
+          loadingMessage={loadingMessage}
+          noOptionsMessage={noOptionsMessage}
+        />
+
+        <AddButton
+          label={buttonLabel}
+          action={this.addButtonClicked}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+
+  addButtonClicked = (event: Event) => {
+    event.preventDefault();
+    this.appendEntry();
+  };
+
+  appendEntry = () => {
+    const { selectedValue } = this.state;
+    if (!selectedValue) {
+      return;
+    }
+    // $FlowFixMe null is needed to clear the selection; undefined does not work
+    this.setState({ ...this.state, selectedValue: null }, () =>
+      this.props.addEntry(selectedValue)
+    );
+  };
+
+  handleAddEntryChange = (selection: SelectValue) => {
+    this.setState({
+      ...this.state,
+      selectedValue: selection
+    });
+  };
+}
+
+export default AutocompleteAddEntryToTableField;

scm-ui-components/packages/ui-components/src/forms/LabelWithHelpIcon.js

@@ -1,6 +1,6 @@
 //@flow
 import React from "react";
-import Help from '../Help';
+import Help from "../Help.js";
 
 type Props = {
   label?: string,

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -1,6 +1,7 @@
 // @create-index
 
 export { default as AddEntryToTableField } from "./AddEntryToTableField.js";
+export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEntryToTableField.js";
 export { default as Checkbox } from "./Checkbox.js";
 export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";

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

@@ -23,6 +23,7 @@ export { default as Help } from "./Help";
 export { default as HelpIcon } from "./HelpIcon";
 export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
+export { default as Autocomplete} from "./Autocomplete";
 
 export { apiClient, NOT_FOUND_ERROR_MESSAGE, UNAUTHORIZED_ERROR_MESSAGE } from "./apiclient.js";