Further i18nified Autocomplete

scm-ui/public/locales/en/groups.json

@@ -39,7 +39,13 @@
     "label": "Add member",
     "error": "Invalid member name"
   },
-  "group-form": {
+  "add-member-autocomplete": {
+    "placeholder": "Enter member",
+    "loading": "Loading...",
+    "no-options": "No suggestion available"
+    },
+
+"group-form": {
     "submit": "Submit",
     "name-error": "Group name is invalid",
     "description-error": "Description is invalid",

scm-ui/public/locales/en/repos.json

@@ -77,6 +77,8 @@
     "label": "Branches"
   },
   "permission": {
+      "user": "User",
+      "group": "Group",
       "error-title": "Error",
       "error-subtitle": "Unknown permissions error",
       "name": "User or Group",
@@ -105,6 +107,13 @@
         "groupPermissionHelpText": "States if a permission is a group permission.",
         "nameHelpText": "Manage permissions for a specific user or group",
         "typeHelpText": "READ = read; WRITE = read and write; OWNER = read, write and also the ability to manage the properties and permissions"
+      },
+      "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..."
       }
   },
   "help": {

scm-ui/src/containers/Autocomplete.js

@@ -34,7 +34,7 @@ class Autocomplete extends React.Component<Props, State> {
     placeholder: "Type here",
     loadingMessage: "Loading...",
     noOptionsMessage: "No suggestion available"
-  }
+  };
 
   handleInputChange = (newValue: SelectValue) => {
     this.props.valueSelected(newValue);

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

@@ -14,7 +14,10 @@ type Props = {
   buttonLabel: string,
   fieldLabel: string,
   helpText?: string,
-  loadSuggestions: string => Promise<AutocompleteObject>
+  loadSuggestions: string => Promise<AutocompleteObject>,
+  placeholder?: string,
+  loadingMessage?: string,
+  noOptionsMessage?: string
 };
 
 type State = {
@@ -27,7 +30,7 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
     this.state = { selectedValue: undefined };
   }
   render() {
-    const { disabled, buttonLabel, fieldLabel, helpText, loadSuggestions } = this.props;
+    const { disabled, buttonLabel, fieldLabel, helpText, loadSuggestions, placeholder, loadingMessage, noOptionsMessage } = this.props;
 
     const { selectedValue } = this.state;
     return (
@@ -38,6 +41,9 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
           valueSelected={this.handleAddEntryChange}
           helpText={helpText}
           value={selectedValue}
+          placeholder={placeholder}
+          loadingMessage={loadingMessage}
+          noOptionsMessage={noOptionsMessage}
         />
 
         <AddButton

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

@@ -106,6 +106,9 @@ class GroupForm extends React.Component<Props, State> {
           fieldLabel={t("add-member-textfield.label")}
           errorMessage={t("add-member-textfield.error")}
           loadSuggestions={this.props.loadUserSuggestions}
+          placeholder={t("add-member-autocomplete.placeholder")}
+          loadingMessage={t("add-member-autocomplete.loading")}
+          noOptionsMessage={t("add-member-autocomplete.no-options")}
         />
         <SubmitButton
           disabled={!this.isValid()}

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

@@ -82,13 +82,17 @@ class CreatePermissionForm extends React.Component<Props, State> {
       });
   };
   renderAutocompletionField = () => {
+    const { t } = this.props;
     if (this.state.groupPermission) {
       return (
         <Autocomplete
           loadSuggestions={this.loadGroupAutocompletion}
           valueSelected={this.groupOrUserSelected}
           value={this.state.value}
-          label={"Group"}
+          label={t("permission.group")}
+          noOptionsMessage={t("permission.autocomplete.no-group-options")}
+          loadingMessage={t("permission.autocomplete.loading")}
+          placeholder={t("permission.autocomplete.group-placeholder")}
         />
       );
     }
@@ -97,7 +101,10 @@ class CreatePermissionForm extends React.Component<Props, State> {
         loadSuggestions={this.loadUserAutocompletion}
         valueSelected={this.groupOrUserSelected}
         value={this.state.value}
-        label={"User"}
+        label={t("permission.user")}
+        noOptionsMessage={t("permission.autocomplete.no-user-options")}
+        loadingMessage={t("permission.autocomplete.loading")}
+        placeholder={t("permission.autocomplete.user-placeholder")}
       />
     );
   };