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-webapp/src/repos/components/list/RepositoryGroupEntry.tsx

@@ -22,35 +22,18 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import { Link } from "react-router-dom";
-import { Icon, RepositoryEntry, GroupEntries } from "@scm-manager/ui-components";
+import { GroupEntries, RepositoryEntry } from "@scm-manager/ui-components";
 import { RepositoryGroup } from "@scm-manager/ui-types";
-import { useTranslation } from "react-i18next";
 
 type Props = {
   group: RepositoryGroup;
 };
 
 const RepositoryGroupEntry: FC<Props> = ({ group }) => {
-  const [t] = useTranslation("namespaces");
-
-  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" />
-    </Link>
-  );
-  const namespaceHeader = (
-    <>
-      <Link to={`/repos/${group.name}/`} className="has-text-inherit">
-        {group.name}
-      </Link>{" "}
-      {settingsLink}
-    </>
-  );
   const entries = group.repositories.map((repository, index) => {
     return <RepositoryEntry repository={repository} key={index} />;
   });
-  return <GroupEntries namespaceHeader={namespaceHeader} elements={entries} />;
+  return <GroupEntries group={group} elements={entries} />;
 };
 
 export default RepositoryGroupEntry;

scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.test.ts

@@ -26,75 +26,75 @@ import groupByNamespace from "./groupByNamespace";
 
 const base = {
   type: "git",
-  _links: {}
+  _links: {},
 };
 
 const slartiBlueprintsFjords = {
   ...base,
   namespace: "slarti",
-  name: "fjords-blueprints"
+  name: "fjords-blueprints",
 };
 
 const slartiFjords = {
   ...base,
   namespace: "slarti",
-  name: "fjords"
+  name: "fjords",
 };
 
 const hitchhikerRestand = {
   ...base,
   namespace: "hitchhiker",
-  name: "restand"
+  name: "restand",
 };
 const hitchhikerPuzzle42 = {
   ...base,
   namespace: "hitchhiker",
-  name: "puzzle42"
+  name: "puzzle42",
 };
 
 const hitchhikerHeartOfGold = {
   ...base,
   namespace: "hitchhiker",
-  name: "heartOfGold"
+  name: "heartOfGold",
 };
 
 const zaphodMarvinFirmware = {
   ...base,
   namespace: "zaphod",
-  name: "marvin-firmware"
+  name: "marvin-firmware",
 };
 
 it("should group the repositories by their namespace", () => {
   const repositories = [
     zaphodMarvinFirmware,
-    slartiBlueprintsFjords,
-    hitchhikerRestand,
     slartiFjords,
+    slartiBlueprintsFjords,
     hitchhikerHeartOfGold,
-    hitchhikerPuzzle42
+    hitchhikerPuzzle42,
+    hitchhikerRestand,
   ];
   const namespaces = {
     _embedded: {
-      namespaces: [{ namespace: "hitchhiker" }, { namespace: "slarti" }, { namespace: "zaphod" }]
-    }
+      namespaces: [{ namespace: "hitchhiker" }, { namespace: "slarti" }, { namespace: "zaphod" }],
+    },
   };
 
   const expected = [
     {
       name: "hitchhiker",
       namespace: { namespace: "hitchhiker" },
-      repositories: [hitchhikerHeartOfGold, hitchhikerPuzzle42, hitchhikerRestand]
+      repositories: [hitchhikerHeartOfGold, hitchhikerPuzzle42, hitchhikerRestand],
     },
     {
       name: "slarti",
       namespace: { namespace: "slarti" },
-      repositories: [slartiFjords, slartiBlueprintsFjords]
+      repositories: [slartiFjords, slartiBlueprintsFjords],
     },
     {
       name: "zaphod",
       namespace: { namespace: "zaphod" },
-      repositories: [zaphodMarvinFirmware]
-    }
+      repositories: [zaphodMarvinFirmware],
+    },
   ];
 
   expect(groupByNamespace(repositories, namespaces)).toEqual(expected);

scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.ts

@@ -38,7 +38,7 @@ export default function groupByNamespace(
       group = {
         name: groupName,
         namespace: namespace,
-        repositories: []
+        repositories: [],
       };
       groups[groupName] = group;
     }
@@ -47,8 +47,6 @@ export default function groupByNamespace(
 
   const groupArray = [];
   for (const groupName in groups) {
-    const group = groups[groupName];
-    group.repositories.sort(sortByName);
     groupArray.push(groups[groupName]);
   }
   groupArray.sort(sortByName);
@@ -65,5 +63,5 @@ function sortByName(a, b) {
 }
 
 function findNamespace(namespaces: NamespaceCollection, namespaceToFind: string) {
-  return namespaces._embedded.namespaces.find(namespace => namespace.namespace === namespaceToFind);
+  return namespaces._embedded.namespaces.find((namespace) => namespace.namespace === namespaceToFind);
 }