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/accessibilityConfig.ts

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import useLocalStorage from "./useLocalStorage";
+import { useLocalStorage } from "@scm-manager/ui-api";
 import { useCallback, useState } from "react";
 
 const LOCAL_STORAGE_KEY = "scm.accessibility";

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);
 }

scm-ui/ui-webapp/src/useLocalStorage.ts

@@ -1,45 +0,0 @@
-/*
- * MIT License
- *
- * Copyright (c) 2020-present Cloudogu GmbH and Contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import { useEffect, useState } from "react";
-
-export default function useLocalStorage<T>(
-  key: string,
-  initialValue: T
-): [value: T, setValue: (value: T | ((previousConfig: T) => T)) => void] {
-  const [value, setValue] = useState<T>(() => {
-    try {
-      const item = localStorage.getItem(key);
-      return item ? JSON.parse(item) : initialValue;
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-      return initialValue;
-    }
-  });
-
-  useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [key, value]);
-
-  return [value, setValue];
-}