Use preselected value with translation key for namespace filter / improve translations

scm-ui/ui-components/src/OverviewPageActions.tsx

@@ -36,7 +36,6 @@ type Props = {
   label?: string;
   testId?: string;
   searchPlaceholder?: string;
-  filterPlaceholder?: string;
 };
 
 const OverviewPageActions: FC<Props> = ({
@@ -47,8 +46,7 @@ const OverviewPageActions: FC<Props> = ({
   groupSelected,
   label,
   testId,
-  searchPlaceholder,
+  searchPlaceholder
-  filterPlaceholder
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -59,7 +57,6 @@ const OverviewPageActions: FC<Props> = ({
         options={groups}
         preselectedOption={currentGroup}
         optionSelected={groupSelected}
-        placeholder={filterPlaceholder}
       />
     </div>
   );

scm-ui/ui-components/src/forms/DropDown.tsx

@@ -32,7 +32,6 @@ type Props = {
   preselectedOption?: string;
   className?: string;
   disabled?: boolean;
-  placeholder?: string;
 };
 
 const FullWidthSelect = styled.select`
@@ -41,7 +40,7 @@ const FullWidthSelect = styled.select`
 
 class DropDown extends React.Component<Props> {
   render() {
-    const { options, optionValues, preselectedOption, className, disabled, placeholder } = this.props;
+    const { options, optionValues, preselectedOption, className, disabled } = this.props;
 
     if (preselectedOption && options.filter(o => o === preselectedOption).length === 0) {
       options.push(preselectedOption);
@@ -49,12 +48,7 @@ class DropDown extends React.Component<Props> {
 
     return (
       <div className={classNames(className, "select", disabled ? "disabled" : "")}>
-        <FullWidthSelect
+        <FullWidthSelect value={preselectedOption ? preselectedOption : ""} onChange={this.change} disabled={disabled}>
-          value={preselectedOption ? preselectedOption : ""}
-          onChange={this.change}
-          disabled={disabled}
-          placeholder={placeholder}
-        >
           {options.map((option, index) => {
             const value = optionValues && optionValues[index] ? optionValues[index] : option;
             return (

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -65,7 +65,7 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder }) => {
         <FixedHeightInput
           className="input"
           type="search"
-          placeholder={placeholder || t("overviewAction.filterEntries")}
+          placeholder={placeholder || t("filterEntries")}
           value={stateValue}
           onChange={event => setStateValue(event.target.value)}
         />

scm-ui/ui-webapp/public/locales/de/groups.json

@@ -25,6 +25,9 @@
       "setPermissionsNavLink": "Berechtigungen"
     }
   },
+  "overview": {
+    "searchGroup": "Gruppe suchen"
+  },
   "add-group": {
     "title": "Gruppe erstellen",
     "subtitle": "Erstellen einer neuen Gruppe"

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -44,7 +44,7 @@
     "noRepositories": "Keine Repositories gefunden.",
     "createButton": "Repository erstellen",
     "searchRepository": "Repository suchen",
-    "filterNamespace": "Namespace filtern"
+    "allNamespaces": "Alle Namespaces"
   },
   "create": {
     "title": "Repository erstellen",

scm-ui/ui-webapp/public/locales/de/users.json

@@ -30,6 +30,9 @@
     "noUsers": "Keine Benutzer gefunden.",
     "createButton": "Benutzer erstellen"
   },
+  "overview": {
+    "searchUser": "Benutzer suchen"
+  },
   "singleUser": {
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Benutzer Fehler",

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

@@ -25,6 +25,9 @@
       "setPermissionsNavLink": "Permissions"
     }
   },
+  "overview": {
+    "searchGroup": "Search group"
+  },
   "add-group": {
     "title": "Create Group",
     "subtitle": "Create a new group"

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

@@ -44,7 +44,7 @@
     "noRepositories": "No repositories found.",
     "createButton": "Create Repository",
     "searchRepository": "Search repository",
-    "filterNamespace": "Filter by namespace"
+    "allNamespaces": "All namespaces"
   },
   "create": {
     "title": "Create Repository",

scm-ui/ui-webapp/public/locales/en/users.json

@@ -44,6 +44,9 @@
       "setApiKeyNavLink": "API Keys"
     }
   },
+  "overview": {
+    "searchUser": "Search user"
+  },
   "createUser": {
     "title": "Create User",
     "subtitle": "Create a new user"

scm-ui/ui-webapp/src/groups/containers/Groups.tsx

@@ -92,7 +92,12 @@ class Groups extends React.Component<Props> {
         {this.renderGroupTable()}
         {this.renderCreateButton()}
         <PageActions>
-          <OverviewPageActions showCreateButton={canAddGroups} link="groups" label={t("create-group-button.label")} />
+          <OverviewPageActions
+            showCreateButton={canAddGroups}
+            link="groups"
+            label={t("create-group-button.label")}
+            searchPlaceholder={t("overview.searchGroup")}
+          />
         </PageActions>
       </Page>
     );

scm-ui/ui-webapp/src/repos/containers/Overview.tsx

@@ -101,8 +101,12 @@ class Overview extends React.Component<Props> {
     }
   };
 
+  getNamespaceFilterPlaceholder = () => {
+    return this.props.t("overview.allNamespaces");
+  };
+
   namespaceSelected = (newNamespace: string) => {
-    if (newNamespace === "") {
+    if (newNamespace === this.getNamespaceFilterPlaceholder()) {
       this.props.history.push("/repos/");
     } else {
       this.props.history.push(`/repos/${newNamespace}/`);
@@ -111,8 +115,10 @@ class Overview extends React.Component<Props> {
 
   render() {
     const { error, loading, showCreateButton, namespace, namespaces, t } = this.props;
-
+    const namespaceFilterPlaceholder = this.getNamespaceFilterPlaceholder();
-    const namespacesToRender = namespaces ? ["", ...namespaces._embedded.namespaces.map(n => n.namespace).sort()] : [];
+    const namespacesToRender = namespaces
+      ? [namespaceFilterPlaceholder, ...namespaces._embedded.namespaces.map(n => n.namespace).sort()]
+      : [];
 
     return (
       <Page title={t("overview.title")} subtitle={t("overview.subtitle")} loading={loading} error={error}>
@@ -127,7 +133,6 @@ class Overview extends React.Component<Props> {
             label={t("overview.createButton")}
             testId="repository-overview"
             searchPlaceholder={t("overview.searchRepository")}
-            filterPlaceholder={t("overview.filterNamespace")}
           />
         </PageActions>
       </Page>

scm-ui/ui-webapp/src/users/containers/Users.tsx

@@ -93,7 +93,12 @@ class Users extends React.Component<Props> {
         {this.renderUserTable()}
         {this.renderCreateButton()}
         <PageActions>
-          <OverviewPageActions showCreateButton={canAddUsers} link="users" label={t("users.createButton")} />
+          <OverviewPageActions
+            showCreateButton={canAddUsers}
+            link="users"
+            label={t("users.createButton")}
+            searchPlaceholder={t("overview.searchUser")}
+          />
         </PageActions>
       </Page>
     );