From 0918d18d5eff072966f89038a84ed3309f155722 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 5 Jun 2019 18:36:14 +0200
Subject: [PATCH 01/13] fix autocompletion

---
 .../components/GroupAutocomplete.js           | 56 +++++++++++++++++
 .../components/UserAutocomplete.js            | 56 +++++++++++++++++
 .../containers/CreatePermissionForm.js        | 63 ++++---------------
 .../permissions/containers/Permissions.js     | 20 +++---
 4 files changed, 135 insertions(+), 60 deletions(-)
 create mode 100644 scm-ui/src/repos/permissions/components/GroupAutocomplete.js
 create mode 100644 scm-ui/src/repos/permissions/components/UserAutocomplete.js

diff --git a/scm-ui/src/repos/permissions/components/GroupAutocomplete.js b/scm-ui/src/repos/permissions/components/GroupAutocomplete.js
new file mode 100644
index 0000000000..a8789b45ab
--- /dev/null
+++ b/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);
diff --git a/scm-ui/src/repos/permissions/components/UserAutocomplete.js b/scm-ui/src/repos/permissions/components/UserAutocomplete.js
new file mode 100644
index 0000000000..f3defadf0c
--- /dev/null
+++ b/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);
diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index 112ecd1c20..b3264a9ad0 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/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,
-  userAutoCompleteLink: string,
+  groupAutocompleteLink: 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;
-    if (this.state.groupPermission) {
+    const group = this.state.groupPermission;
+    if (group) {
       return (
-        <Autocomplete
-          loadSuggestions={this.loadGroupAutocompletion}
-          valueSelected={this.groupOrUserSelected}
+        <GroupAutocomplete
+          groupAutocompleteLink={this.props.groupAutocompleteLink}
+          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
-        loadSuggestions={this.loadUserAutocompletion}
-        valueSelected={this.groupOrUserSelected}
+      <UserAutocomplete
+        userAutocompleteLink={this.props.userAutocompleteLink}
+        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,
diff --git a/scm-ui/src/repos/permissions/containers/Permissions.js b/scm-ui/src/repos/permissions/containers/Permissions.js
index 39bd9e37c1..ea467a56da 100644
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -60,8 +60,8 @@ type Props = {
   repositoryRolesLink: string,
   repositoryVerbsLink: string,
   permissionsLink: string,
-  groupAutoCompleteLink: string,
-  userAutoCompleteLink: string,
+  groupAutocompleteLink: string,
+  userAutocompleteLink: string,
 
   //dispatch functions
   fetchAvailablePermissionsIfNeeded: (
@@ -129,8 +129,8 @@ class Permissions extends React.Component<Props> {
       repoName,
       loadingCreatePermission,
       hasPermissionToCreate,
-      userAutoCompleteLink,
-      groupAutoCompleteLink
+      userAutocompleteLink,
+      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}
-        groupAutoCompleteLink={groupAutoCompleteLink}
+        userAutocompleteLink={userAutocompleteLink}
+        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 userAutoCompleteLink = getUserAutoCompleteLink(state);
+  const groupAutocompleteLink = getGroupAutoCompleteLink(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,
-    userAutoCompleteLink
+    groupAutocompleteLink,
+    userAutocompleteLink
   };
 };
 

From 2d51506a657d3e97d2c1cba9c512a91828918370 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 11 Jun 2019 17:16:01 +0200
Subject: [PATCH 02/13] simplify toggleAdvancedPermission

---
 .../containers/CreatePermissionForm.js        | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index b3264a9ad0..0113fae146 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -89,7 +89,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
     );
   };
 
-selectName = (value: SelectValue) => {
+  selectName = (value: SelectValue) => {
     this.setState({
       value,
       name: value.value.id,
@@ -113,15 +113,17 @@ selectName = (value: SelectValue) => {
       <AdvancedPermissionsDialog
         availableVerbs={availableVerbs}
         selectedVerbs={selectedVerbs}
-        onClose={this.closeAdvancedPermissionsDialog}
+        onClose={this.toggleAdvancedPermissionsDialog}
         onSubmit={this.submitAdvancedPermissionsDialog}
       />
     ) : null;
 
     return (
-      <div>
+      <>
         <hr />
-        <Subtitle subtitle={t("permission.add-permission.add-permission-heading")} />
+        <Subtitle
+          subtitle={t("permission.add-permission.add-permission-heading")}
+        />
         {advancedDialog}
         <form onSubmit={this.submit}>
           <div className="field is-grouped">
@@ -164,7 +166,7 @@ selectName = (value: SelectValue) => {
                   />
                   <Button
                     label={t("permission.advanced-button.label")}
-                    action={this.handleDetailedPermissionsPressed}
+                    action={this.toggleAdvancedPermissionsDialog}
                   />
                 </div>
               </div>
@@ -180,16 +182,14 @@ selectName = (value: SelectValue) => {
             </div>
           </div>
         </form>
-      </div>
+      </>
     );
   }
 
-  handleDetailedPermissionsPressed = () => {
-    this.setState({ showAdvancedDialog: true });
-  };
-
-  closeAdvancedPermissionsDialog = () => {
-    this.setState({ showAdvancedDialog: false });
+  toggleAdvancedPermissionsDialog = () => {
+    this.setState(prevState => ({
+      showAdvancedDialog: !prevState.showAdvancedDialog
+    }));
   };
 
   submitAdvancedPermissionsDialog = (newVerbs: string[]) => {

From a1945b3f895360f938488f984cf107e0b79466af Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 11 Jun 2019 18:12:49 +0200
Subject: [PATCH 03/13] add missing trans

---
 scm-ui/public/locales/de/repos.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/scm-ui/public/locales/de/repos.json b/scm-ui/public/locales/de/repos.json
index cf4f066120..4f85ce0fde 100644
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -11,7 +11,10 @@
   "validation": {
     "namespace-invalid": "Der Namespace des Repository ist ungültig",
     "name-invalid": "Der Name des Repository ist ungültig",
-    "contact-invalid": "Der Kontakt muss eine gültige E-Mail Adresse sein"
+    "contact-invalid": "Der Kontakt muss eine gültige E-Mail Adresse sein",
+    "branch": {
+      "nameInvalid": "Der Name des Branches ist ungültig"
+    }
   },
   "help": {
     "namespaceHelpText": "Der Namespace des Repository. Dieser wird Teil der URL des Repository sein.",

From 5fd9408b585037c44c9392b530bbafcfe872cc4b Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 09:27:26 +0200
Subject: [PATCH 04/13] fix element types

---
 .../ui-components/src/Autocomplete.js         | 28 ++++++++++++-------
 .../ui-components/src/GroupAutocomplete.js    |  2 +-
 .../ui-components/src/UserAutocomplete.js     |  2 +-
 .../src/UserGroupAutocomplete.js              | 18 ++++++++----
 scm-ui/public/locales/de/commons.json         |  8 +++---
 5 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/Autocomplete.js b/scm-ui-components/packages/ui-components/src/Autocomplete.js
index a96eaaaa3c..22107e75b6 100644
--- a/scm-ui-components/packages/ui-components/src/Autocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/Autocomplete.js
@@ -16,12 +16,9 @@ type Props = {
   creatable?: boolean
 };
 
-
 type State = {};
 
 class Autocomplete extends React.Component<Props, State> {
-
-
   static defaultProps = {
     placeholder: "Type here",
     loadingMessage: "Loading...",
@@ -33,7 +30,11 @@ class Autocomplete extends React.Component<Props, State> {
   };
 
   // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
-  isValidNewOption = (inputValue: string, selectValue: SelectValue, selectOptions: SelectValue[]) => {
+  isValidNewOption = (
+    inputValue: string,
+    selectValue: SelectValue,
+    selectOptions: SelectValue[]
+  ) => {
     const isNotDuplicated = !selectOptions
       .map(option => option.label)
       .includes(inputValue);
@@ -42,12 +43,21 @@ class Autocomplete extends React.Component<Props, State> {
   };
 
   render() {
-    const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions, creatable } = this.props;
+    const {
+      label,
+      helpText,
+      value,
+      placeholder,
+      loadingMessage,
+      noOptionsMessage,
+      loadSuggestions,
+      creatable
+    } = this.props;
     return (
       <div className="field">
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
-          {creatable?
+          {creatable ? (
             <AsyncCreatable
               cacheOptions
               loadOptions={loadSuggestions}
@@ -64,7 +74,7 @@ class Autocomplete extends React.Component<Props, State> {
                 });
               }}
             />
-          :
+          ) : (
             <Async
               cacheOptions
               loadOptions={loadSuggestions}
@@ -74,13 +84,11 @@ class Autocomplete extends React.Component<Props, State> {
               loadingMessage={() => loadingMessage}
               noOptionsMessage={() => noOptionsMessage}
             />
-
-          }
+          )}
         </div>
       </div>
     );
   }
 }
 
-
 export default Autocomplete;
diff --git a/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js b/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
index 319543e22d..2a9feeec14 100644
--- a/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
@@ -7,7 +7,7 @@ import UserGroupAutocomplete from "./UserGroupAutocomplete";
 type Props = {
   groupAutocompleteLink: string,
   valueSelected: SelectValue => void,
-  value: string,
+  value?: SelectValue,
 
   // Context props
   t: string => string
diff --git a/scm-ui-components/packages/ui-components/src/UserAutocomplete.js b/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
index fe7e449bfb..3f9873608c 100644
--- a/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
@@ -7,7 +7,7 @@ import UserGroupAutocomplete from "./UserGroupAutocomplete";
 type Props = {
   userAutocompleteLink: string,
   valueSelected: SelectValue => void,
-  value: string,
+  value?: SelectValue,
 
   // Context props
   t: string => string
diff --git a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
index fefb6dd643..a6469c831e 100644
--- a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
@@ -5,9 +5,12 @@ import Autocomplete from "./Autocomplete";
 
 type Props = {
   autocompleteLink: string,
+  label: string,
+  noOptionsMessage: string,
+  loadingMessage: string,
+  placeholder: string,
   valueSelected: SelectValue => void,
-  value: string,
-  label: string
+  value?: SelectValue
 };
 
 class UserGroupAutocomplete extends React.Component<Props> {
@@ -34,17 +37,20 @@ class UserGroupAutocomplete extends React.Component<Props> {
   };
 
   render() {
-    const { value, label } = this.props;
+    const { autocompleteLink, label, noOptionsMessage, loadingMessage, placeholder, value } = this.props;
     return (
       <Autocomplete
+        autocompleteLink={autocompleteLink}
+        label={label}
+        noOptionsMessage={noOptionsMessage}
+        loadingMessage={loadingMessage}
+        placeholder={placeholder}
         loadSuggestions={this.loadSuggestions}
         valueSelected={this.selectName}
         value={value}
         creatable={true}
-        label={label}
-        {...this.props}
       />
-    );
+    ); // {...this.props}
   }
 }
 
diff --git a/scm-ui/public/locales/de/commons.json b/scm-ui/public/locales/de/commons.json
index 0ce6ebb81f..012c990833 100644
--- a/scm-ui/public/locales/de/commons.json
+++ b/scm-ui/public/locales/de/commons.json
@@ -43,10 +43,10 @@
   "autocomplete": {
     "group": "Gruppe",
     "user": "Benutzer",
-    "no-group-options": "Kein Gruppenname als Vorschlag verfügbar",
-    "group-placeholder": "Gruppe eingeben",
-    "no-user-options": "Kein Benutzername als Vorschlag verfügbar",
-    "user-placeholder": "Benutzer eingeben",
+    "noGroupOptions": "Kein Gruppenname als Vorschlag verfügbar",
+    "groupPlaceholder": "Gruppe eingeben",
+    "noUserOptions": "Kein Benutzername als Vorschlag verfügbar",
+    "userPlaceholder": "Benutzer eingeben",
     "loading": "suche..."
   },
   "paginator": {

From 303e7f1e50239fd0968a329493a5163645c46308 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 09:47:13 +0200
Subject: [PATCH 05/13] fix autocompletion

---
 .../ui-components/src/Autocomplete.js         | 29 ++++---
 .../ui-components/src/GroupAutocomplete.js    | 37 ++++++++
 .../ui-components/src/UserAutocomplete.js     | 37 ++++++++
 .../src/UserGroupAutocomplete.js              | 57 ++++++++++++
 scm-ui/public/locales/de/commons.json         |  9 ++
 scm-ui/public/locales/de/repos.json           |  7 --
 scm-ui/public/locales/en/commons.json         |  9 ++
 scm-ui/public/locales/en/repos.json           |  7 --
 .../containers/CreatePermissionForm.js        | 87 ++++++-------------
 .../permissions/containers/Permissions.js     | 86 +++++++++---------
 10 files changed, 235 insertions(+), 130 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
 create mode 100644 scm-ui-components/packages/ui-components/src/UserAutocomplete.js
 create mode 100644 scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js

diff --git a/scm-ui-components/packages/ui-components/src/Autocomplete.js b/scm-ui-components/packages/ui-components/src/Autocomplete.js
index adf86e37b7..22107e75b6 100644
--- a/scm-ui-components/packages/ui-components/src/Autocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/Autocomplete.js
@@ -4,7 +4,6 @@ import { AsyncCreatable, Async } 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,
@@ -17,12 +16,9 @@ type Props = {
   creatable?: boolean
 };
 
-
 type State = {};
 
 class Autocomplete extends React.Component<Props, State> {
-
-
   static defaultProps = {
     placeholder: "Type here",
     loadingMessage: "Loading...",
@@ -34,7 +30,11 @@ class Autocomplete extends React.Component<Props, State> {
   };
 
   // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
-  isValidNewOption = (inputValue: string, selectValue: SelectValue, selectOptions: SelectValue[]) => {
+  isValidNewOption = (
+    inputValue: string,
+    selectValue: SelectValue,
+    selectOptions: SelectValue[]
+  ) => {
     const isNotDuplicated = !selectOptions
       .map(option => option.label)
       .includes(inputValue);
@@ -43,12 +43,21 @@ class Autocomplete extends React.Component<Props, State> {
   };
 
   render() {
-    const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions, creatable } = this.props;
+    const {
+      label,
+      helpText,
+      value,
+      placeholder,
+      loadingMessage,
+      noOptionsMessage,
+      loadSuggestions,
+      creatable
+    } = this.props;
     return (
       <div className="field">
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
-          {creatable?
+          {creatable ? (
             <AsyncCreatable
               cacheOptions
               loadOptions={loadSuggestions}
@@ -65,7 +74,7 @@ class Autocomplete extends React.Component<Props, State> {
                 });
               }}
             />
-          :
+          ) : (
             <Async
               cacheOptions
               loadOptions={loadSuggestions}
@@ -75,13 +84,11 @@ class Autocomplete extends React.Component<Props, State> {
               loadingMessage={() => loadingMessage}
               noOptionsMessage={() => noOptionsMessage}
             />
-
-          }
+          )}
         </div>
       </div>
     );
   }
 }
 
-
 export default Autocomplete;
diff --git a/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js b/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
new file mode 100644
index 0000000000..2a9feeec14
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
@@ -0,0 +1,37 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { SelectValue } from "@scm-manager/ui-types";
+import UserGroupAutocomplete from "./UserGroupAutocomplete";
+
+type Props = {
+  groupAutocompleteLink: string,
+  valueSelected: SelectValue => void,
+  value?: SelectValue,
+
+  // Context props
+  t: string => string
+};
+
+class GroupAutocomplete extends React.Component<Props> {
+  selectName = (selection: SelectValue) => {
+    this.props.valueSelected(selection);
+  };
+
+  render() {
+    const { groupAutocompleteLink, t, value } = this.props;
+    return (
+      <UserGroupAutocomplete
+        autocompleteLink={groupAutocompleteLink}
+        label={t("autocomplete.group")}
+        noOptionsMessage={t("autocomplete.noGroupOptions")}
+        loadingMessage={t("autocomplete.loading")}
+        placeholder={t("autocomplete.groupPlaceholder")}
+        valueSelected={this.selectName}
+        value={value}
+      />
+    );
+  }
+}
+
+export default translate("commons")(GroupAutocomplete);
diff --git a/scm-ui-components/packages/ui-components/src/UserAutocomplete.js b/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
new file mode 100644
index 0000000000..3f9873608c
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
@@ -0,0 +1,37 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type { SelectValue } from "@scm-manager/ui-types";
+import UserGroupAutocomplete from "./UserGroupAutocomplete";
+
+type Props = {
+  userAutocompleteLink: string,
+  valueSelected: SelectValue => void,
+  value?: SelectValue,
+
+  // Context props
+  t: string => string
+};
+
+class UserAutocomplete extends React.Component<Props> {
+  selectName = (selection: SelectValue) => {
+    this.props.valueSelected(selection);
+  };
+
+  render() {
+    const { userAutocompleteLink, t, value } = this.props;
+    return (
+      <UserGroupAutocomplete
+        autocompleteLink={userAutocompleteLink}
+        label={t("autocomplete.user")}
+        noOptionsMessage={t("autocomplete.noUserOptions")}
+        loadingMessage={t("autocomplete.loading")}
+        placeholder={t("autocomplete.userPlaceholder")}
+        valueSelected={this.selectName}
+        value={value}
+      />
+    );
+  }
+}
+
+export default translate("commons")(UserAutocomplete);
diff --git a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
new file mode 100644
index 0000000000..a6469c831e
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
@@ -0,0 +1,57 @@
+// @flow
+import React from "react";
+import type { SelectValue } from "@scm-manager/ui-types";
+import Autocomplete from "./Autocomplete";
+
+type Props = {
+  autocompleteLink: string,
+  label: string,
+  noOptionsMessage: string,
+  loadingMessage: string,
+  placeholder: string,
+  valueSelected: SelectValue => void,
+  value?: SelectValue
+};
+
+class UserGroupAutocomplete extends React.Component<Props> {
+  loadSuggestions = (inputValue: string) => {
+    const url = this.props.autocompleteLink;
+    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 { autocompleteLink, label, noOptionsMessage, loadingMessage, placeholder, value } = this.props;
+    return (
+      <Autocomplete
+        autocompleteLink={autocompleteLink}
+        label={label}
+        noOptionsMessage={noOptionsMessage}
+        loadingMessage={loadingMessage}
+        placeholder={placeholder}
+        loadSuggestions={this.loadSuggestions}
+        valueSelected={this.selectName}
+        value={value}
+        creatable={true}
+      />
+    ); // {...this.props}
+  }
+}
+
+export default UserGroupAutocomplete;
diff --git a/scm-ui/public/locales/de/commons.json b/scm-ui/public/locales/de/commons.json
index b9cc93b1ed..7c0e326507 100644
--- a/scm-ui/public/locales/de/commons.json
+++ b/scm-ui/public/locales/de/commons.json
@@ -40,6 +40,15 @@
     "config": "Einstellungen"
   },
   "filterEntries": "Einträge filtern",
+  "autocomplete": {
+    "group": "Gruppe",
+    "user": "Benutzer",
+    "noGroupOptions": "Kein Gruppenname als Vorschlag verfügbar",
+    "groupPlaceholder": "Gruppe eingeben",
+    "noUserOptions": "Kein Benutzername als Vorschlag verfügbar",
+    "userPlaceholder": "Benutzer eingeben",
+    "loading": "suche..."
+  },
   "paginator": {
     "next": "Weiter",
     "previous": "Zurück"
diff --git a/scm-ui/public/locales/de/repos.json b/scm-ui/public/locales/de/repos.json
index 4ba7a725e6..cf4f066120 100644
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -150,13 +150,6 @@
       "roleHelpText": "READ = read; WRITE = read und write; OWNER = read, write und auch die Möglichkeit Einstellungen und Berechtigungen zu verwalten. Wenn hier nichts angezeigt wird, den Erweitert-Button benutzen, um Details zu sehen.",
       "permissionsHelpText": "Hier können individuelle Berechtigungen unabhängig von vordefinierten Rollen vergeben werden."
     },
-    "autocomplete": {
-      "no-group-options": "Kein Gruppenname als Vorschlag verfügbar",
-      "group-placeholder": "Gruppe eingeben",
-      "no-user-options": "Kein Benutzername als Vorschlag verfügbar",
-      "user-placeholder": "Benutzer eingeben",
-      "loading": "suche..."
-    },
     "advanced": {
       "dialog": {
         "title": "Erweiterte Berechtigungen",
diff --git a/scm-ui/public/locales/en/commons.json b/scm-ui/public/locales/en/commons.json
index b5af3e9ef9..d360b557f2 100644
--- a/scm-ui/public/locales/en/commons.json
+++ b/scm-ui/public/locales/en/commons.json
@@ -40,6 +40,15 @@
     "config": "Configuration"
   },
   "filterEntries": "filter entries",
+  "autocomplete": {
+    "group": "Group",
+    "user": "User",
+    "noGroupOptions": "No group suggestion available",
+    "groupPlaceholder": "Enter group",
+    "noUserOptions": "No user suggestion available",
+    "userPlaceholder": "Enter user",
+    "loading": "Loading..."
+  },
   "paginator": {
     "next": "Next",
     "previous": "Previous"
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index 9a2e83f983..a312287a68 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -153,13 +153,6 @@
       "roleHelpText": "READ = read; WRITE = read and write; OWNER = read, write and also the ability to manage the properties and permissions. If nothing is selected here, use the 'Advanced' Button to see detailed permissions.",
       "permissionsHelpText": "Use this to specify your own set of permissions regardless of predefined roles."
     },
-    "autocomplete": {
-      "no-group-options": "No group suggestion available",
-      "group-placeholder": "Enter group",
-      "no-user-options": "No user suggestion available",
-      "user-placeholder": "Enter user",
-      "loading": "Loading..."
-    },
     "advanced": {
       "dialog": {
         "title": "Advanced Permissions",
diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index 112ecd1c20..51b43fc2ff 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -9,11 +9,12 @@ import type {
 } from "@scm-manager/ui-types";
 import {
   Subtitle,
-  Autocomplete,
   SubmitButton,
   Button,
   LabelWithHelpIcon,
-  Radio
+  Radio,
+  GroupAutocomplete,
+  UserAutocomplete
 } from "@scm-manager/ui-components";
 import * as validator from "../components/permissionValidation";
 import RoleSelector from "../components/RoleSelector";
@@ -26,8 +27,8 @@ type Props = {
   createPermission: (permission: PermissionCreateEntry) => void,
   loading: boolean,
   currentPermissions: PermissionCollection,
-  groupAutoCompleteLink: string,
-  userAutoCompleteLink: string,
+  groupAutocompleteLink: 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;
-    if (this.state.groupPermission) {
+    const group = this.state.groupPermission;
+    if (group) {
       return (
-        <Autocomplete
-          loadSuggestions={this.loadGroupAutocompletion}
-          valueSelected={this.groupOrUserSelected}
+        <GroupAutocomplete
+          groupAutocompleteLink={this.props.groupAutocompleteLink}
+          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
-        loadSuggestions={this.loadUserAutocompletion}
-        valueSelected={this.groupOrUserSelected}
+      <UserAutocomplete
+        userAutocompleteLink={this.props.userAutocompleteLink}
+        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,
@@ -150,15 +113,17 @@ class CreatePermissionForm extends React.Component<Props, State> {
       <AdvancedPermissionsDialog
         availableVerbs={availableVerbs}
         selectedVerbs={selectedVerbs}
-        onClose={this.closeAdvancedPermissionsDialog}
+        onClose={this.toggleAdvancedPermissionsDialog}
         onSubmit={this.submitAdvancedPermissionsDialog}
       />
     ) : null;
 
     return (
-      <div>
+      <>
         <hr />
-        <Subtitle subtitle={t("permission.add-permission.add-permission-heading")} />
+        <Subtitle
+          subtitle={t("permission.add-permission.add-permission-heading")}
+        />
         {advancedDialog}
         <form onSubmit={this.submit}>
           <div className="field is-grouped">
@@ -201,7 +166,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
                   />
                   <Button
                     label={t("permission.advanced-button.label")}
-                    action={this.handleDetailedPermissionsPressed}
+                    action={this.toggleAdvancedPermissionsDialog}
                   />
                 </div>
               </div>
@@ -217,16 +182,14 @@ class CreatePermissionForm extends React.Component<Props, State> {
             </div>
           </div>
         </form>
-      </div>
+      </>
     );
   }
 
-  handleDetailedPermissionsPressed = () => {
-    this.setState({ showAdvancedDialog: true });
-  };
-
-  closeAdvancedPermissionsDialog = () => {
-    this.setState({ showAdvancedDialog: false });
+  toggleAdvancedPermissionsDialog = () => {
+    this.setState(prevState => ({
+      showAdvancedDialog: !prevState.showAdvancedDialog
+    }));
   };
 
   submitAdvancedPermissionsDialog = (newVerbs: string[]) => {
diff --git a/scm-ui/src/repos/permissions/containers/Permissions.js b/scm-ui/src/repos/permissions/containers/Permissions.js
index 39bd9e37c1..7d44328305 100644
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -60,8 +60,8 @@ type Props = {
   repositoryRolesLink: string,
   repositoryVerbsLink: string,
   permissionsLink: string,
-  groupAutoCompleteLink: string,
-  userAutoCompleteLink: string,
+  groupAutocompleteLink: string,
+  userAutocompleteLink: string,
 
   //dispatch functions
   fetchAvailablePermissionsIfNeeded: (
@@ -129,8 +129,8 @@ class Permissions extends React.Component<Props> {
       repoName,
       loadingCreatePermission,
       hasPermissionToCreate,
-      userAutoCompleteLink,
-      groupAutoCompleteLink
+      userAutocompleteLink,
+      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}
-        groupAutoCompleteLink={groupAutoCompleteLink}
+        userAutocompleteLink={userAutocompleteLink}
+        groupAutocompleteLink={groupAutocompleteLink}
       />
     ) : null;
 
@@ -163,41 +163,41 @@ class Permissions extends React.Component<Props> {
         <Subtitle subtitle={t("permission.title")} />
         <table className="card-table table is-hoverable is-fullwidth">
           <thead>
-            <tr>
-              <th>
-                <LabelWithHelpIcon
-                  label={t("permission.name")}
-                  helpText={t("permission.help.nameHelpText")}
-                />
-              </th>
-              <th>
-                <LabelWithHelpIcon
-                  label={t("permission.role")}
-                  helpText={t("permission.help.roleHelpText")}
-                />
-              </th>
-              <th>
-                <LabelWithHelpIcon
-                  label={t("permission.permissions")}
-                  helpText={t("permission.help.permissionsHelpText")}
-                />
-              </th>
-              <th />
-            </tr>
+          <tr>
+            <th>
+              <LabelWithHelpIcon
+                label={t("permission.name")}
+                helpText={t("permission.help.nameHelpText")}
+              />
+            </th>
+            <th>
+              <LabelWithHelpIcon
+                label={t("permission.role")}
+                helpText={t("permission.help.roleHelpText")}
+              />
+            </th>
+            <th>
+              <LabelWithHelpIcon
+                label={t("permission.permissions")}
+                helpText={t("permission.help.permissionsHelpText")}
+              />
+            </th>
+            <th />
+          </tr>
           </thead>
           <tbody>
-            {permissions.map(permission => {
-              return (
-                <SinglePermission
-                  availableRepositoryRoles={availableRepositoryRoles}
-                  availableRepositoryVerbs={availableVerbs}
-                  key={permission.name + permission.groupPermission.toString()}
-                  namespace={namespace}
-                  repoName={repoName}
-                  permission={permission}
-                />
-              );
-            })}
+          {permissions.map(permission => {
+            return (
+              <SinglePermission
+                availableRepositoryRoles={availableRepositoryRoles}
+                availableRepositoryVerbs={availableVerbs}
+                key={permission.name + permission.groupPermission.toString()}
+                namespace={namespace}
+                repoName={repoName}
+                permission={permission}
+              />
+            );
+          })}
           </tbody>
         </table>
         {createPermissionForm}
@@ -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 userAutoCompleteLink = getUserAutoCompleteLink(state);
+  const groupAutocompleteLink = getGroupAutoCompleteLink(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,
-    userAutoCompleteLink
+    groupAutocompleteLink,
+    userAutocompleteLink
   };
 };
 

From dbcf130f4bde9daa034121607fd6bdf7a0522e89 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 09:51:55 +0200
Subject: [PATCH 06/13] simplify passed parms

---
 .../ui-components/src/UserGroupAutocomplete.js  | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
index a6469c831e..e0af92f205 100644
--- a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
@@ -5,12 +5,7 @@ import Autocomplete from "./Autocomplete";
 
 type Props = {
   autocompleteLink: string,
-  label: string,
-  noOptionsMessage: string,
-  loadingMessage: string,
-  placeholder: string,
-  valueSelected: SelectValue => void,
-  value?: SelectValue
+  valueSelected: SelectValue => void
 };
 
 class UserGroupAutocomplete extends React.Component<Props> {
@@ -37,20 +32,14 @@ class UserGroupAutocomplete extends React.Component<Props> {
   };
 
   render() {
-    const { autocompleteLink, label, noOptionsMessage, loadingMessage, placeholder, value } = this.props;
     return (
       <Autocomplete
-        autocompleteLink={autocompleteLink}
-        label={label}
-        noOptionsMessage={noOptionsMessage}
-        loadingMessage={loadingMessage}
-        placeholder={placeholder}
         loadSuggestions={this.loadSuggestions}
         valueSelected={this.selectName}
-        value={value}
         creatable={true}
+        {...this.props}
       />
-    ); // {...this.props}
+    );
   }
 }
 

From c1218e221889eff5e382743778cb6d2b34fd9ec1 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 09:52:08 +0200
Subject: [PATCH 07/13] fix export

---
 scm-ui-components/packages/ui-components/src/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scm-ui-components/packages/ui-components/src/index.js b/scm-ui-components/packages/ui-components/src/index.js
index 954b0b0955..b4f78c8cf0 100644
--- a/scm-ui-components/packages/ui-components/src/index.js
+++ b/scm-ui-components/packages/ui-components/src/index.js
@@ -25,6 +25,8 @@ export { default as Tooltip } from "./Tooltip";
 // TODO do we need this? getPageFromMatch is already exported by urls
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
+export { default as GroupAutocomplete} from "./GroupAutocomplete";
+export { default as UserAutocomplete} from "./UserAutocomplete";
 export { default as BranchSelector } from "./BranchSelector";
 export { default as MarkdownView } from "./MarkdownView";
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

From 037310c73fc5ba99aae16df8067d2297a0e2dfc5 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 09:55:52 +0200
Subject: [PATCH 08/13] add missing trans

---
 scm-ui/public/locales/de/repos.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/scm-ui/public/locales/de/repos.json b/scm-ui/public/locales/de/repos.json
index cf4f066120..4f85ce0fde 100644
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -11,7 +11,10 @@
   "validation": {
     "namespace-invalid": "Der Namespace des Repository ist ungültig",
     "name-invalid": "Der Name des Repository ist ungültig",
-    "contact-invalid": "Der Kontakt muss eine gültige E-Mail Adresse sein"
+    "contact-invalid": "Der Kontakt muss eine gültige E-Mail Adresse sein",
+    "branch": {
+      "nameInvalid": "Der Name des Branches ist ungültig"
+    }
   },
   "help": {
     "namespaceHelpText": "Der Namespace des Repository. Dieser wird Teil der URL des Repository sein.",

From 11b5f81e24fafa2384b356a9bd40f2d36f88585b Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 09:56:47 +0200
Subject: [PATCH 09/13] prettier

---
 .../permissions/containers/Permissions.js     | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/scm-ui/src/repos/permissions/containers/Permissions.js b/scm-ui/src/repos/permissions/containers/Permissions.js
index 7d44328305..ea467a56da 100644
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -163,41 +163,41 @@ class Permissions extends React.Component<Props> {
         <Subtitle subtitle={t("permission.title")} />
         <table className="card-table table is-hoverable is-fullwidth">
           <thead>
-          <tr>
-            <th>
-              <LabelWithHelpIcon
-                label={t("permission.name")}
-                helpText={t("permission.help.nameHelpText")}
-              />
-            </th>
-            <th>
-              <LabelWithHelpIcon
-                label={t("permission.role")}
-                helpText={t("permission.help.roleHelpText")}
-              />
-            </th>
-            <th>
-              <LabelWithHelpIcon
-                label={t("permission.permissions")}
-                helpText={t("permission.help.permissionsHelpText")}
-              />
-            </th>
-            <th />
-          </tr>
+            <tr>
+              <th>
+                <LabelWithHelpIcon
+                  label={t("permission.name")}
+                  helpText={t("permission.help.nameHelpText")}
+                />
+              </th>
+              <th>
+                <LabelWithHelpIcon
+                  label={t("permission.role")}
+                  helpText={t("permission.help.roleHelpText")}
+                />
+              </th>
+              <th>
+                <LabelWithHelpIcon
+                  label={t("permission.permissions")}
+                  helpText={t("permission.help.permissionsHelpText")}
+                />
+              </th>
+              <th />
+            </tr>
           </thead>
           <tbody>
-          {permissions.map(permission => {
-            return (
-              <SinglePermission
-                availableRepositoryRoles={availableRepositoryRoles}
-                availableRepositoryVerbs={availableVerbs}
-                key={permission.name + permission.groupPermission.toString()}
-                namespace={namespace}
-                repoName={repoName}
-                permission={permission}
-              />
-            );
-          })}
+            {permissions.map(permission => {
+              return (
+                <SinglePermission
+                  availableRepositoryRoles={availableRepositoryRoles}
+                  availableRepositoryVerbs={availableVerbs}
+                  key={permission.name + permission.groupPermission.toString()}
+                  namespace={namespace}
+                  repoName={repoName}
+                  permission={permission}
+                />
+              );
+            })}
           </tbody>
         </table>
         {createPermissionForm}

From 252034f30b818205bb7bb28e45d74affbfa0defb Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 12 Jun 2019 07:59:21 +0000
Subject: [PATCH 10/13] Close branch bugfix/autocomplete.


From ff354a5feeb2631b73115a7169bf51b1212638e7 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 18 Jun 2019 15:20:44 +0200
Subject: [PATCH 11/13] review changes

---
 .../ui-components/src/GroupAutocomplete.js    | 18 +++----------
 .../ui-components/src/UserAutocomplete.js     | 18 +++----------
 .../src/UserGroupAutocomplete.js              | 27 ++++++++-----------
 .../containers/CreatePermissionForm.js        |  4 +--
 4 files changed, 21 insertions(+), 46 deletions(-)

diff --git a/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js b/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
index 2a9feeec14..e39130f1d7 100644
--- a/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
@@ -1,34 +1,24 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import type { SelectValue } from "@scm-manager/ui-types";
+import type AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = {
-  groupAutocompleteLink: string,
-  valueSelected: SelectValue => void,
-  value?: SelectValue,
-
+type Props = AutocompleteProps & {
   // Context props
   t: string => string
 };
 
 class GroupAutocomplete extends React.Component<Props> {
-  selectName = (selection: SelectValue) => {
-    this.props.valueSelected(selection);
-  };
-
   render() {
-    const { groupAutocompleteLink, t, value } = this.props;
+    const { t } = this.props;
     return (
       <UserGroupAutocomplete
-        autocompleteLink={groupAutocompleteLink}
         label={t("autocomplete.group")}
         noOptionsMessage={t("autocomplete.noGroupOptions")}
         loadingMessage={t("autocomplete.loading")}
         placeholder={t("autocomplete.groupPlaceholder")}
-        valueSelected={this.selectName}
-        value={value}
+        {...this.props}
       />
     );
   }
diff --git a/scm-ui-components/packages/ui-components/src/UserAutocomplete.js b/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
index 3f9873608c..9ef7aaa7a7 100644
--- a/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
@@ -1,34 +1,24 @@
 // @flow
 import React from "react";
 import { translate } from "react-i18next";
-import type { SelectValue } from "@scm-manager/ui-types";
+import type AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = {
-  userAutocompleteLink: string,
-  valueSelected: SelectValue => void,
-  value?: SelectValue,
-
+type Props = AutocompleteProps & {
   // Context props
   t: string => string
 };
 
 class UserAutocomplete extends React.Component<Props> {
-  selectName = (selection: SelectValue) => {
-    this.props.valueSelected(selection);
-  };
-
   render() {
-    const { userAutocompleteLink, t, value } = this.props;
+    const { t } = this.props;
     return (
       <UserGroupAutocomplete
-        autocompleteLink={userAutocompleteLink}
         label={t("autocomplete.user")}
         noOptionsMessage={t("autocomplete.noUserOptions")}
         loadingMessage={t("autocomplete.loading")}
         placeholder={t("autocomplete.userPlaceholder")}
-        valueSelected={this.selectName}
-        value={value}
+        {...this.props}
       />
     );
   }
diff --git a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
index a6469c831e..0d6e3ec46e 100644
--- a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
@@ -3,17 +3,20 @@ import React from "react";
 import type { SelectValue } from "@scm-manager/ui-types";
 import Autocomplete from "./Autocomplete";
 
-type Props = {
+export type AutocompleteProps = {
   autocompleteLink: string,
-  label: string,
-  noOptionsMessage: string,
-  loadingMessage: string,
-  placeholder: string,
   valueSelected: SelectValue => void,
   value?: SelectValue
 };
 
-class UserGroupAutocomplete extends React.Component<Props> {
+type Props = AutocompleteProps & {
+  label: string,
+  noOptionsMessage: string,
+  loadingMessage: string,
+  placeholder: string
+};
+
+export default class UserGroupAutocomplete extends React.Component<Props> {
   loadSuggestions = (inputValue: string) => {
     const url = this.props.autocompleteLink;
     const link = url + "?q=";
@@ -37,21 +40,13 @@ class UserGroupAutocomplete extends React.Component<Props> {
   };
 
   render() {
-    const { autocompleteLink, label, noOptionsMessage, loadingMessage, placeholder, value } = this.props;
     return (
       <Autocomplete
-        autocompleteLink={autocompleteLink}
-        label={label}
-        noOptionsMessage={noOptionsMessage}
-        loadingMessage={loadingMessage}
-        placeholder={placeholder}
         loadSuggestions={this.loadSuggestions}
         valueSelected={this.selectName}
-        value={value}
         creatable={true}
+        {...this.props}
       />
-    ); // {...this.props}
+    );
   }
 }
-
-export default UserGroupAutocomplete;
diff --git a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
index 51b43fc2ff..efd92914d3 100644
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -74,7 +74,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
     if (group) {
       return (
         <GroupAutocomplete
-          groupAutocompleteLink={this.props.groupAutocompleteLink}
+          autocompleteLink={this.props.groupAutocompleteLink}
           valueSelected={this.selectName}
           value={this.state.value ? this.state.value : ""}
         />
@@ -82,7 +82,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
     }
     return (
       <UserAutocomplete
-        userAutocompleteLink={this.props.userAutocompleteLink}
+        autocompleteLink={this.props.userAutocompleteLink}
         valueSelected={this.selectName}
         value={this.state.value ? this.state.value : ""}
       />

From 23c8ff923efb961ddc4e244b28c66fb3d6be1261 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 2 Jul 2019 15:36:38 +0200
Subject: [PATCH 12/13] exported autocompletes

---
 scm-ui-components/packages/ui-components/src/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scm-ui-components/packages/ui-components/src/index.js b/scm-ui-components/packages/ui-components/src/index.js
index 954b0b0955..b4f78c8cf0 100644
--- a/scm-ui-components/packages/ui-components/src/index.js
+++ b/scm-ui-components/packages/ui-components/src/index.js
@@ -25,6 +25,8 @@ export { default as Tooltip } from "./Tooltip";
 // TODO do we need this? getPageFromMatch is already exported by urls
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
+export { default as GroupAutocomplete} from "./GroupAutocomplete";
+export { default as UserAutocomplete} from "./UserAutocomplete";
 export { default as BranchSelector } from "./BranchSelector";
 export { default as MarkdownView } from "./MarkdownView";
 export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

From 8a408c4600abca395bb7410b256ce99da987fe01 Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Wed, 3 Jul 2019 10:44:10 +0000
Subject: [PATCH 13/13] Close branch bugfix/autocomplete2