fix autocompletion

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

@@ -0,0 +1,56 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Autocomplete } from "@scm-manager/ui-components";
+import type { SelectValue } from "@scm-manager/ui-types";
+
+type Props = {
+  groupAutocompleteLink: string,
+  valueSelected: SelectValue => void,
+  value: string,
+
+  // Context props
+  t: string => string
+};
+
+class GroupAutocomplete extends React.Component<Props> {
+  loadGroupSuggestions = (inputValue: string) => {
+    const url = this.props.groupAutocompleteLink;
+    const link = url + "?q=";
+    return fetch(link + inputValue)
+      .then(response => response.json())
+      .then(json => {
+        return json.map(element => {
+          const label = element.displayName
+            ? `${element.displayName} (${element.id})`
+            : element.id;
+          return {
+            value: element,
+            label
+          };
+        });
+      });
+  };
+
+  selectName = (selection: SelectValue) => {
+    this.props.valueSelected(selection);
+  };
+
+  render() {
+    const { t, value } = this.props;
+    return (
+      <Autocomplete
+        loadSuggestions={this.loadGroupSuggestions}
+        label={t("permission.group")}
+        noOptionsMessage={t("permission.autocomplete.no-group-options")}
+        loadingMessage={t("permission.autocomplete.loading")}
+        placeholder={t("permission.autocomplete.group-placeholder")}
+        valueSelected={this.selectName}
+        value={value}
+        creatable={true}
+      />
+    );
+  }
+}
+
+export default translate("repos")(GroupAutocomplete);

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

@@ -0,0 +1,56 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Autocomplete } from "@scm-manager/ui-components";
+import type { SelectValue } from "@scm-manager/ui-types";
+
+type Props = {
+  userAutocompleteLink: string,
+  valueSelected: SelectValue => void,
+  value: string,
+
+  // Context props
+  t: string => string
+};
+
+class UserAutocomplete extends React.Component<Props> {
+  loadUserSuggestions = (inputValue: string) => {
+    const url = this.props.userAutocompleteLink;
+    const link = url + "?q=";
+    return fetch(link + inputValue)
+      .then(response => response.json())
+      .then(json => {
+        return json.map(element => {
+          const label = element.displayName
+            ? `${element.displayName} (${element.id})`
+            : element.id;
+          return {
+            value: element,
+            label
+          };
+        });
+      });
+  };
+
+  selectName = (selection: SelectValue) => {
+    this.props.valueSelected(selection);
+  };
+
+  render() {
+    const { t, value } = this.props;
+    return (
+      <Autocomplete
+        loadSuggestions={this.loadUserSuggestions}
+        label={t("permission.user")}
+        noOptionsMessage={t("permission.autocomplete.no-user-options")}
+        loadingMessage={t("permission.autocomplete.loading")}
+        placeholder={t("permission.autocomplete.user-placeholder")}
+        valueSelected={this.selectName}
+        value={value}
+        creatable={true}
+      />
+    );
+  }
+}
+
+export default translate("repos")(UserAutocomplete);

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

@@ -9,7 +9,6 @@ import type {
 } from "@scm-manager/ui-types";
 import {
   Subtitle,
-  Autocomplete,
   SubmitButton,
   Button,
   LabelWithHelpIcon,
@@ -17,6 +16,8 @@ import {
 } from "@scm-manager/ui-components";
 import * as validator from "../components/permissionValidation";
 import RoleSelector from "../components/RoleSelector";
+import GroupAutocomplete from "../components/GroupAutocomplete";
+import UserAutocomplete from "../components/UserAutocomplete";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 import { findVerbsForRole } from "../modules/permissions";
 
@@ -26,8 +27,8 @@ type Props = {
   createPermission: (permission: PermissionCreateEntry) => void,
   loading: boolean,
   currentPermissions: PermissionCollection,
-  groupAutoCompleteLink: string,
+  groupAutocompleteLink: string,
-  userAutoCompleteLink: string,
+  userAutocompleteLink: string,
 
   // Context props
   t: string => string
@@ -68,65 +69,27 @@ class CreatePermissionForm extends React.Component<Props, State> {
     });
   };
 
-  loadUserAutocompletion = (inputValue: string) => {
-    return this.loadAutocompletion(this.props.userAutoCompleteLink, inputValue);
-  };
-
-  loadGroupAutocompletion = (inputValue: string) => {
-    return this.loadAutocompletion(
-      this.props.groupAutoCompleteLink,
-      inputValue
-    );
-  };
-
-  loadAutocompletion(url: string, inputValue: string) {
-    const link = url + "?q=";
-    return fetch(link + inputValue)
-      .then(response => response.json())
-      .then(json => {
-        return json.map(element => {
-          const label = element.displayName
-            ? `${element.displayName} (${element.id})`
-            : element.id;
-          return {
-            value: element,
-            label
-          };
-        });
-      });
-  }
-
   renderAutocompletionField = () => {
-    const { t } = this.props;
+    const group = this.state.groupPermission;
-    if (this.state.groupPermission) {
+    if (group) {
       return (
-        <Autocomplete
+        <GroupAutocomplete
-          loadSuggestions={this.loadGroupAutocompletion}
+          groupAutocompleteLink={this.props.groupAutocompleteLink}
-          valueSelected={this.groupOrUserSelected}
+          valueSelected={this.selectName}
           value={this.state.value ? this.state.value : ""}
-          label={t("permission.group")}
-          noOptionsMessage={t("permission.autocomplete.no-group-options")}
-          loadingMessage={t("permission.autocomplete.loading")}
-          placeholder={t("permission.autocomplete.group-placeholder")}
-          creatable={true}
         />
       );
     }
     return (
-      <Autocomplete
+      <UserAutocomplete
-        loadSuggestions={this.loadUserAutocompletion}
+        userAutocompleteLink={this.props.userAutocompleteLink}
-        valueSelected={this.groupOrUserSelected}
+        valueSelected={this.selectName}
         value={this.state.value ? this.state.value : ""}
-        label={t("permission.user")}
-        noOptionsMessage={t("permission.autocomplete.no-user-options")}
-        loadingMessage={t("permission.autocomplete.loading")}
-        placeholder={t("permission.autocomplete.user-placeholder")}
-        creatable={true}
       />
     );
   };
 
-  groupOrUserSelected = (value: SelectValue) => {
+selectName = (value: SelectValue) => {
     this.setState({
       value,
       name: value.value.id,

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

@@ -60,8 +60,8 @@ type Props = {
   repositoryRolesLink: string,
   repositoryVerbsLink: string,
   permissionsLink: string,
-  groupAutoCompleteLink: string,
+  groupAutocompleteLink: string,
-  userAutoCompleteLink: string,
+  userAutocompleteLink: string,
 
   //dispatch functions
   fetchAvailablePermissionsIfNeeded: (
@@ -129,8 +129,8 @@ class Permissions extends React.Component<Props> {
       repoName,
       loadingCreatePermission,
       hasPermissionToCreate,
-      userAutoCompleteLink,
+      userAutocompleteLink,
-      groupAutoCompleteLink
+      groupAutocompleteLink
     } = this.props;
     if (error) {
       return (
@@ -153,8 +153,8 @@ class Permissions extends React.Component<Props> {
         createPermission={permission => this.createPermission(permission)}
         loading={loadingCreatePermission}
         currentPermissions={permissions}
-        userAutoCompleteLink={userAutoCompleteLink}
+        userAutocompleteLink={userAutocompleteLink}
-        groupAutoCompleteLink={groupAutoCompleteLink}
+        groupAutocompleteLink={groupAutocompleteLink}
       />
     ) : null;
 
@@ -228,8 +228,8 @@ const mapStateToProps = (state, ownProps) => {
   const repositoryRolesLink = getRepositoryRolesLink(state);
   const repositoryVerbsLink = getRepositoryVerbsLink(state);
   const permissionsLink = getPermissionsLink(state, namespace, repoName);
-  const groupAutoCompleteLink = getGroupAutoCompleteLink(state);
+  const groupAutocompleteLink = getGroupAutoCompleteLink(state);
-  const userAutoCompleteLink = getUserAutoCompleteLink(state);
+  const userAutocompleteLink = getUserAutoCompleteLink(state);
   const availablePermissions = getAvailablePermissions(state);
   const availableRepositoryRoles = getAvailableRepositoryRoles(state);
   const availableVerbs = getAvailableRepositoryVerbs(state);
@@ -248,8 +248,8 @@ const mapStateToProps = (state, ownProps) => {
     hasPermissionToCreate,
     loadingCreatePermission,
     permissionsLink,
-    groupAutoCompleteLink,
+    groupAutocompleteLink,
-    userAutoCompleteLink
+    userAutocompleteLink
   };
 };