Improve repository overview

- Sort repositories alphanumerically case insensitive per namespace
- Make the namespaces collapsible and store the collapsed state in local storage

Committed-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>

scm-ui/ui-components/src/layout/GroupEntries.tsx

@@ -24,17 +24,25 @@
 import React, { FC, ReactNode } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { RepositoryGroup } from "@scm-manager/ui-types";
+import { useLocalStorage } from "@scm-manager/ui-api";
+import Icon from "../Icon";
 
 const Separator = styled.div`
   border-bottom: 1px solid rgb(219, 219, 219, 0.5);
 `;
 
 type Props = {
-  namespaceHeader: ReactNode;
+  group: RepositoryGroup;
   elements: ReactNode[];
 };
 
-const GroupEntries: FC<Props> = ({ namespaceHeader, elements }) => {
+const GroupEntries: FC<Props> = ({ group, elements }) => {
+  const [t] = useTranslation("namespaces");
+  const [collapsed, setCollapsed] = useLocalStorage<boolean | null>(`repoNamespace.${group.name}.collapsed`, null);
+
   const content = elements.map((entry, index) => (
     <React.Fragment key={index}>
       <div>{entry}</div>
@@ -42,12 +50,45 @@ const GroupEntries: FC<Props> = ({ namespaceHeader, elements }) => {
     </React.Fragment>
   ));
 
+  const settingsLink = group.namespace?._links?.permissions && (
+    <Link to={`/namespace/${group.name}/settings`} aria-label={t("repositoryOverview.settings.tooltip")}>
+      <Icon
+        color="inherit"
+        name="cog"
+        title={t("repositoryOverview.settings.tooltip")}
+        className="is-size-6 ml-2 has-text-link"
+      />
+    </Link>
+  );
+
   return (
     <>
-      <div className={classNames("is-flex", "is-align-items-center", "is-size-6", "has-text-weight-bold", "p-3")}>
-        {namespaceHeader}
+      <div
+        className={classNames(
+          "is-flex",
+          "is-align-items-center",
+          "is-justify-content-space-between",
+          "is-size-6",
+          "has-text-weight-bold",
+          "p-3",
+          "has-cursor-pointer"
+        )}
+        onClick={() => setCollapsed(!collapsed)}
+      >
+        <span>
+          <Link to={`/repos/${group.name}/`} className="has-text-inherit">
+            {group.name}
+          </Link>{" "}
+          {settingsLink}
+        </span>
+        <Icon
+          color="inherit"
+          name={collapsed ? "caret-left" : "caret-down"}
+          title={t("repositoryOverview.settings.tooltip")}
+          className="is-size-6 ml-2"
+        />
       </div>
-      <div className={classNames("box", "p-2")}>{content}</div>
+      {collapsed ? null : <div className={classNames("box", "p-2")}>{content}</div>}
       <div className="is-clearfix" />
     </>
   );