Add namespace selector

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

@@ -22,24 +22,30 @@
  * SOFTWARE.
  */
 import React from "react";
-import { History } from "history";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 import classNames from "classnames";
-import { Button, urls } from "./index";
+import { Button, DropDown, urls } from "./index";
 import { FilterInput } from "./forms";
+import { Namespace } from "@scm-manager/ui-types";
 
 type Props = RouteComponentProps & {
   showCreateButton: boolean;
+  namespace: string;
+  namespaces: Namespace[];
   link: string;
+  namespaceSelected: (namespace: string) => void;
   label?: string;
   testId?: string;
 };
 
 class OverviewPageActions extends React.Component<Props> {
   render() {
-    const { history, location, link, testId } = this.props;
+    const { history, namespace, namespaces, location, link, testId } = this.props;
+    const sortedNamespaces = namespaces ? namespaces.map(n => n.namespace).sort() : [];
+    const namespaceOptions = ["", ...sortedNamespaces];
     return (
       <>
+        <DropDown options={namespaceOptions} preselectedOption={namespace} optionSelected={this.namespaceSelected} />
         <FilterInput
           value={urls.getQueryStringFromLocation(location)}
           filter={filter => {
@@ -52,6 +58,10 @@ class OverviewPageActions extends React.Component<Props> {
     );
   }
 
+  namespaceSelected = (newNamespace: string) => {
+    this.props.namespaceSelected(newNamespace);
+  };
+
   renderCreateButton() {
     const { showCreateButton, link, label } = this.props;
     if (showCreateButton) {

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

@@ -101,8 +101,16 @@ class Overview extends React.Component<Props> {
     }
   };
 
+  namespaceSelected = (newNamespace: string) => {
+    if (newNamespace === "") {
+      this.props.history.push("/repos/");
+    } else {
+      this.props.history.push(`/repos/${newNamespace}/`);
+    }
+  };
+
   render() {
-    const { error, loading, showCreateButton, namespace, t } = this.props;
+    const { error, loading, showCreateButton, namespace, namespaces, t } = this.props;
 
     const link = namespace ? `repos/${namespace}` : "repos";
 
@@ -112,6 +120,9 @@ class Overview extends React.Component<Props> {
         <PageActions>
           <OverviewPageActions
             showCreateButton={showCreateButton}
+            namespace={namespace}
+            namespaces={namespaces}
+            namespaceSelected={this.namespaceSelected}
             link={link}
             label={t("overview.createButton")}
             testId="repository-overview"