From 7777dd46eaacb1a5336539ce19fc250c4ad59c19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Thu, 17 Sep 2020 08:21:31 +0200 Subject: [PATCH] Add settings icon to namespace group header --- scm-ui/ui-components/src/CardColumnGroup.tsx | 2 +- scm-ui/ui-types/src/Repositories.ts | 1 + .../components/list/RepositoryGroupEntry.tsx | 17 ++++++++++++++++- .../repos/components/list/RepositoryList.tsx | 7 ++++--- .../components/list/groupByNamespace.test.ts | 10 +++++++++- .../repos/components/list/groupByNamespace.ts | 13 +++++++++++-- .../ui-webapp/src/repos/containers/Overview.tsx | 4 ++-- 7 files changed, 44 insertions(+), 10 deletions(-) diff --git a/scm-ui/ui-components/src/CardColumnGroup.tsx b/scm-ui/ui-components/src/CardColumnGroup.tsx index c5c07055f2..d9a769a98c 100644 --- a/scm-ui/ui-components/src/CardColumnGroup.tsx +++ b/scm-ui/ui-components/src/CardColumnGroup.tsx @@ -27,7 +27,7 @@ import classNames from "classnames"; import styled from "styled-components"; type Props = { - name: string; + name: ReactNode; url?: string; elements: ReactNode[]; }; diff --git a/scm-ui/ui-types/src/Repositories.ts b/scm-ui/ui-types/src/Repositories.ts index 8a7a4fee97..b585bffb65 100644 --- a/scm-ui/ui-types/src/Repositories.ts +++ b/scm-ui/ui-types/src/Repositories.ts @@ -58,5 +58,6 @@ export type NamespaceCollection = { export type RepositoryGroup = { name: string; + namespace: Namespace; repositories: Repository[]; }; diff --git a/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx b/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx index 146b007cfc..cdf13dde44 100644 --- a/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx +++ b/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx @@ -22,8 +22,10 @@ * SOFTWARE. */ import React from "react"; +import { Link } from "react-router-dom"; import { CardColumnGroup, RepositoryEntry } from "@scm-manager/ui-components"; import { RepositoryGroup } from "@scm-manager/ui-types"; +import { Icon } from "@scm-manager/ui-components"; type Props = { group: RepositoryGroup; @@ -32,10 +34,23 @@ type Props = { class RepositoryGroupEntry extends React.Component { render() { const { group } = this.props; + const settingsLink = group.namespace?._links?.permissions && ( + + + + ); + const namespaceHeader = ( + <> + + {group.name} + {" "} + {settingsLink} + + ); const entries = group.repositories.map((repository, index) => { return ; }); - return ; + return ; } } diff --git a/scm-ui/ui-webapp/src/repos/components/list/RepositoryList.tsx b/scm-ui/ui-webapp/src/repos/components/list/RepositoryList.tsx index 2c76c48e45..fc9e539ab2 100644 --- a/scm-ui/ui-webapp/src/repos/components/list/RepositoryList.tsx +++ b/scm-ui/ui-webapp/src/repos/components/list/RepositoryList.tsx @@ -23,20 +23,21 @@ */ import React from "react"; -import { Repository } from "@scm-manager/ui-types"; +import { NamespaceCollection, Repository } from "@scm-manager/ui-types"; import groupByNamespace from "./groupByNamespace"; import RepositoryGroupEntry from "./RepositoryGroupEntry"; type Props = { repositories: Repository[]; + namespaces: NamespaceCollection; }; class RepositoryList extends React.Component { render() { - const { repositories } = this.props; + const { repositories, namespaces } = this.props; - const groups = groupByNamespace(repositories); + const groups = groupByNamespace(repositories, namespaces); return (
{groups.map(group => { diff --git a/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.test.ts b/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.test.ts index e895053f88..4a917d15e4 100644 --- a/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.test.ts +++ b/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.test.ts @@ -73,21 +73,29 @@ it("should group the repositories by their namespace", () => { hitchhikerHeartOfGold, hitchhikerPuzzle42 ]; + const namespaces = { + _embedded: { + namespaces: [{ namespace: "hitchhiker" }, { namespace: "slarti" }, { namespace: "zaphod" }] + } + }; const expected = [ { name: "hitchhiker", + namespace: { namespace: "hitchhiker" }, repositories: [hitchhikerHeartOfGold, hitchhikerPuzzle42, hitchhikerRestand] }, { name: "slarti", + namespace: { namespace: "slarti" }, repositories: [slartiFjords, slartiBlueprintsFjords] }, { name: "zaphod", + namespace: { namespace: "zaphod" }, repositories: [zaphodMarvinFirmware] } ]; - expect(groupByNamespace(repositories)).toEqual(expected); + expect(groupByNamespace(repositories, namespaces)).toEqual(expected); }); diff --git a/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.ts b/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.ts index 6e4cd90177..7887690b37 100644 --- a/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.ts +++ b/scm-ui/ui-webapp/src/repos/components/list/groupByNamespace.ts @@ -22,17 +22,22 @@ * SOFTWARE. */ -import { Repository, RepositoryGroup } from "@scm-manager/ui-types"; +import { NamespaceCollection, Repository, RepositoryGroup } from "@scm-manager/ui-types"; -export default function groupByNamespace(repositories: Repository[]): RepositoryGroup[] { +export default function groupByNamespace( + repositories: Repository[], + namespaces: NamespaceCollection +): RepositoryGroup[] { const groups = {}; for (const repository of repositories) { const groupName = repository.namespace; let group = groups[groupName]; if (!group) { + const namespace = findNamespace(namespaces, groupName); group = { name: groupName, + namespace: namespace, repositories: [] }; groups[groupName] = group; @@ -58,3 +63,7 @@ function sortByName(a, b) { } return 0; } + +function findNamespace(namespaces: NamespaceCollection, namespaceToFind: string) { + return namespaces._embedded.namespaces.filter(namespace => namespace.namespace === namespaceToFind)[0]; +} diff --git a/scm-ui/ui-webapp/src/repos/containers/Overview.tsx b/scm-ui/ui-webapp/src/repos/containers/Overview.tsx index 28343e57fe..0dae2f03d9 100644 --- a/scm-ui/ui-webapp/src/repos/containers/Overview.tsx +++ b/scm-ui/ui-webapp/src/repos/containers/Overview.tsx @@ -133,12 +133,12 @@ class Overview extends React.Component { } renderRepositoryList() { - const { collection, page, location, t } = this.props; + const { collection, page, location, namespaces, t } = this.props; if (collection._embedded && collection._embedded.repositories.length > 0) { return ( <> - + );