Implemented adding of not (yet) existing groups/users in autocomplete

scm-ui/src/containers/Autocomplete.js

@@ -1,54 +1,63 @@
 // @flow
 import React from "react";
-import AsyncSelect from "react-select/lib/Async";
 import { LabelWithHelpIcon } from "@scm-manager/ui-components";
+import { AsyncCreatable } from "react-select";
 
 export type AutocompleteObject = {
   id: string,
   displayName: string
 };
 
-type SelectValue = {
+export type SelectValue = {
   value: AutocompleteObject,
   label: string
 };
 
 type Props = {
   loadSuggestions: string => Promise<AutocompleteObject>,
-  valueSelected: AutocompleteObject => void,
+  valueSelected: SelectValue => void,
   label: string,
   helpText?: string,
-  value?: AutocompleteObject
+  value?: SelectValue
 };
 
 type State = {};
 
 class Autocomplete extends React.Component<Props, State> {
   handleInputChange = (newValue: SelectValue) => {
-    this.props.valueSelected(newValue.value);
+    this.props.valueSelected(newValue);
+  };
+
+  isValidNewOption = (inputValue, selectValue, selectOptions) => {
+    //TODO: types
+    const isNotDuplicated = !selectOptions
+      .map(option => option.label)
+      .includes(inputValue);
+    const isNotEmpty = inputValue !== "";
+    return isNotEmpty && isNotDuplicated;
   };
 
   render() {
     const { label, helpText, value } = this.props;
-    let selectValue = null;
-    if (value) {
-      selectValue = {
-        value,
-        label: value.displayName
-      };
-    }
     return (
       <div className="field">
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
-          <AsyncSelect
+          <AsyncCreatable
             cacheOptions
             loadOptions={this.props.loadSuggestions}
             onChange={this.handleInputChange}
-            value={selectValue}
+            value={value}
             placeholder="Start typing..." // TODO: i18n
             loadingMessage={() => <>Loading...</>} // TODO: i18n
             noOptionsMessage={() => <>No suggestion available</>} // TODO: i18n
+            isValidNewOption={this.isValidNewOption}
+            onCreateOption={value => {
+              this.handleInputChange({
+                label: value,
+                value: { id: value, displayName: value }
+              });
+            }}
           />
         </div>
       </div>

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

@@ -3,10 +3,13 @@ import React from "react";
 
 import { AddButton } from "@scm-manager/ui-components";
 import Autocomplete from "../../containers/Autocomplete";
-import type { AutocompleteObject } from "../../containers/Autocomplete";
+import type {
+  AutocompleteObject,
+  SelectValue
+} from "../../containers/Autocomplete";
 
 type Props = {
-  addEntry: string => void,
+  addEntry: SelectValue => void,
   disabled: boolean,
   buttonLabel: string,
   fieldLabel: string,
@@ -15,18 +18,18 @@ type Props = {
 };
 
 type State = {
-  entryToAdd?: AutocompleteObject
+  selectedValue?: SelectValue
 };
 
 class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    this.state = { entryToAdd: undefined };
+    this.state = { selectedValue: undefined };
   }
   render() {
     const { disabled, buttonLabel, fieldLabel, helpText } = this.props;
 
-    const { entryToAdd } = this.state;
+    const { selectedValue } = this.state;
     return (
       <div className="field">
         <Autocomplete
@@ -34,7 +37,7 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
           loadSuggestions={this.props.loadSuggestions}
           valueSelected={this.handleAddEntryChange}
           helpText={helpText}
-          value={entryToAdd}
+          value={selectedValue}
         />
 
         <AddButton
@@ -52,19 +55,20 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
   };
 
   appendEntry = () => {
-    const { entryToAdd } = this.state;
+    const { selectedValue } = this.state;
-    if (!entryToAdd) {
+    if (!selectedValue) {
       return;
     }
-    this.setState({ ...this.state, entryToAdd: undefined }, () =>
+    // $FlowFixMe null is needed to clear the selection; undefined does not work
-      this.props.addEntry(entryToAdd.id)
+    this.setState({ ...this.state, selectedValue: null }, () =>
+      this.props.addEntry(selectedValue)
     );
   };
 
-  handleAddEntryChange = (selection: AutocompleteObject) => {
+  handleAddEntryChange = (selection: SelectValue) => {
     this.setState({
       ...this.state,
-      entryToAdd: selection
+      selectedValue: selection
     });
   };
 }

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

@@ -7,6 +7,7 @@ import type { Group } from "@scm-manager/ui-types";
 import * as validator from "./groupValidation";
 import MemberNameTable from "./MemberNameTable";
 import AutocompleteAddEntryToTableField from "./AutocompleteAddEntryToTableField";
+import type { SelectValue } from "../../containers/Autocomplete";
 
 type Props = {
   t: string => string,
@@ -94,7 +95,7 @@ class GroupForm extends React.Component<Props, State> {
           helpText={t("group-form.help.descriptionHelpText")}
         />
         <MemberNameTable
-          members={this.state.group.members}
+          members={group.members}
           memberListChanged={this.memberListChanged}
         />
 
@@ -125,8 +126,8 @@ class GroupForm extends React.Component<Props, State> {
     });
   };
 
-  addMember = (membername: string) => {
+  addMember = (value: SelectValue) => {
-    if (this.isMember(membername)) {
+    if (this.isMember(value.value.id)) {
       return;
     }
 
@@ -134,7 +135,7 @@ class GroupForm extends React.Component<Props, State> {
       ...this.state,
       group: {
         ...this.state.group,
-        members: [...this.state.group.members, membername]
+        members: [...this.state.group.members, value.value.id]
       }
     });
   };

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

@@ -46,7 +46,7 @@ class EditGroup extends React.Component<Props> {
       .then(json => {
         return json.map(element => {
           return {
-            value: element,
+            value: element.id,
             label: `${element.displayName} (${element.id})`
           };
         });

scm-ui/src/repos/permissions/components/CreatePermissionForm.js

@@ -1,23 +1,31 @@
 // @flow
 import React from "react";
-import {translate} from "react-i18next";
+import { translate } from "react-i18next";
-import {Checkbox, InputField, SubmitButton} from "@scm-manager/ui-components";
+import { SubmitButton } from "@scm-manager/ui-components";
 import TypeSelector from "./TypeSelector";
-import type {PermissionCollection, PermissionCreateEntry} from "@scm-manager/ui-types";
+import type {
+  PermissionCollection,
+  PermissionCreateEntry
+} from "@scm-manager/ui-types";
 import * as validator from "./permissionValidation";
+import Autocomplete from "../../../containers/Autocomplete";
+import type { SelectValue } from "../../../containers/Autocomplete";
 
 type Props = {
   t: string => string,
   createPermission: (permission: PermissionCreateEntry) => void,
   loading: boolean,
-  currentPermissions: PermissionCollection
+  currentPermissions: PermissionCollection,
+  groupAutoCompleteLink: string,
+  userAutoCompleteLink: string
 };
 
 type State = {
   name: string,
   type: string,
   groupPermission: boolean,
-  valid: boolean
+  valid: boolean,
+  value?: SelectValue
 };
 
 class CreatePermissionForm extends React.Component<Props, State> {
@@ -28,12 +36,88 @@ class CreatePermissionForm extends React.Component<Props, State> {
       name: "",
       type: "READ",
       groupPermission: false,
-      valid: true
+      valid: true,
+      value: undefined
     };
   }
 
+  permissionScopeChanged = event => {
+    const groupPermission = event.target.value === "GROUP_PERMISSION";
+    this.setState({
+      groupPermission: groupPermission,
+      valid: validator.isPermissionValid(
+        this.state.name,
+        groupPermission,
+        this.props.currentPermissions
+      )
+    });
+    this.setState({ ...this.state, groupPermission });
+  };
+
+  loadUserAutocompletion = (inputValue: string) => {
+    const url = this.props.userAutoCompleteLink + "?q=";
+    return fetch(url + inputValue)
+      .then(response => response.json())
+      .then(json => {
+        return json.map(element => {
+          return {
+            value: element,
+            label: `${element.displayName} (${element.id})`
+          };
+        });
+      });
+  };
+
+  loadGroupAutocompletion = (inputValue: string) => {
+    const url = this.props.groupAutoCompleteLink + "?q=";
+    return fetch(url + inputValue)
+      .then(response => response.json())
+      .then(json => {
+        return json.map(element => {
+          return {
+            value: element,
+            label: `${element.displayName} (${element.id})`
+          };
+        });
+      });
+  };
+  renderAutocompletionField = () => {
+    if (this.state.groupPermission) {
+      return (
+        <Autocomplete
+          loadSuggestions={this.loadGroupAutocompletion}
+          valueSelected={this.groupOrUserSelected}
+          value={this.state.value}
+          label={"Group"}
+        />
+      );
+    }
+    return (
+      <Autocomplete
+        loadSuggestions={this.loadUserAutocompletion}
+        valueSelected={this.groupOrUserSelected}
+        value={this.state.value}
+        label={"User"}
+      />
+    );
+  };
+
+  groupOrUserSelected = (value: SelectValue) => {
+    console.log(value);
+    this.setState({
+      value,
+      name: value.value.id,
+      valid: validator.isPermissionValid(
+        value.value.id,
+        this.state.groupPermission,
+        this.props.currentPermissions
+      )
+    });
+  };
+
   render() {
     const { t, loading } = this.props;
+
     const { name, type, groupPermission } = this.state;
 
     return (
@@ -42,20 +126,30 @@ class CreatePermissionForm extends React.Component<Props, State> {
           {t("permission.add-permission.add-permission-heading")}
         </h2>
         <form onSubmit={this.submit}>
-          <InputField
+          <div className="control">
-            label={t("permission.name")}
+            <label className="radio">
-            value={name ? name : ""}
+              <input
-            onChange={this.handleNameChange}
+                type="radio"
-            validationError={!this.state.valid}
+                name="permission_scope"
-            errorMessage={t("permission.add-permission.name-input-invalid")}
+                checked={!this.state.groupPermission}
-            helpText={t("permission.help.nameHelpText")}
+                value="USER_PERMISSION"
-          />
+                onChange={this.permissionScopeChanged}
-          <Checkbox
+              />
-            label={t("permission.group-permission")}
+              User Permission
-            checked={groupPermission ? groupPermission : false}
+            </label>
-            onChange={this.handleGroupPermissionChange}
+            <label className="radio">
-            helpText={t("permission.help.groupPermissionHelpText")}
+              <input
-          />
+                type="radio"
+                name="permission_scope"
+                value="GROUP_PERMISSION"
+                checked={this.state.groupPermission}
+                onChange={this.permissionScopeChanged}
+              />
+              Group Permission
+            </label>
+          </div>
+          {this.renderAutocompletionField()}
+
           <TypeSelector
             label={t("permission.type")}
             helpText={t("permission.help.typeHelpText")}
@@ -96,27 +190,6 @@ class CreatePermissionForm extends React.Component<Props, State> {
       type: type
     });
   };
-
-  handleNameChange = (name: string) => {
-    this.setState({
-      name: name,
-      valid: validator.isPermissionValid(
-        name,
-        this.state.groupPermission,
-        this.props.currentPermissions
-      )
-    });
-  };
-  handleGroupPermissionChange = (groupPermission: boolean) => {
-    this.setState({
-      groupPermission: groupPermission,
-      valid: validator.isPermissionValid(
-        this.state.name,
-        groupPermission,
-        this.props.currentPermissions
-      )
-    });
-  };
 }
 
 export default translate("repos")(CreatePermissionForm);

scm-ui/src/repos/permissions/containers/Permissions.js

@@ -27,6 +27,10 @@ import SinglePermission from "./SinglePermission";
 import CreatePermissionForm from "../components/CreatePermissionForm";
 import type { History } from "history";
 import { getPermissionsLink } from "../../modules/repos";
+import {
+  getGroupAutoCompleteLink,
+  getUserAutoCompleteLink
+} from "../../../modules/indexResource";
 
 type Props = {
   namespace: string,
@@ -37,6 +41,8 @@ type Props = {
   hasPermissionToCreate: boolean,
   loadingCreatePermission: boolean,
   permissionsLink: string,
+  groupAutoCompleteLink: string,
+  userAutoCompleteLink: string,
 
   //dispatch functions
   fetchPermissions: (link: string, namespace: string, repoName: string) => void,
@@ -92,7 +98,9 @@ class Permissions extends React.Component<Props> {
       namespace,
       repoName,
       loadingCreatePermission,
-      hasPermissionToCreate
+      hasPermissionToCreate,
+      userAutoCompleteLink,
+      groupAutoCompleteLink
     } = this.props;
     if (error) {
       return (
@@ -113,6 +121,8 @@ class Permissions extends React.Component<Props> {
         createPermission={permission => this.createPermission(permission)}
         loading={loadingCreatePermission}
         currentPermissions={permissions}
+        userAutoCompleteLink={userAutoCompleteLink}
+        groupAutoCompleteLink={groupAutoCompleteLink}
       />
     ) : null;
 
@@ -165,6 +175,8 @@ const mapStateToProps = (state, ownProps) => {
   );
   const hasPermissionToCreate = hasCreatePermission(state, namespace, repoName);
   const permissionsLink = getPermissionsLink(state, namespace, repoName);
+  const groupAutoCompleteLink = getGroupAutoCompleteLink(state);
+  const userAutoCompleteLink = getUserAutoCompleteLink(state);
   return {
     namespace,
     repoName,
@@ -173,7 +185,9 @@ const mapStateToProps = (state, ownProps) => {
     permissions,
     hasPermissionToCreate,
     loadingCreatePermission,
-    permissionsLink
+    permissionsLink,
+    groupAutoCompleteLink,
+    userAutoCompleteLink
   };
 };
 
@@ -189,7 +203,9 @@ const mapDispatchToProps = dispatch => {
       repoName: string,
       callback?: () => void
     ) => {
-      dispatch(createPermission(link, permission, namespace, repoName, callback));
+      dispatch(
+        createPermission(link, permission, namespace, repoName, callback)
+      );
     },
     createPermissionReset: (namespace: string, repoName: string) => {
       dispatch(createPermissionReset(namespace, repoName));