Redesign repository overview (#1740)

Change repository overview layout to use single rows instead cards. Also remove quick links and add clone action to repository entry. The default repository link now leads to the sources view.

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>

docs/de/user/repo/index.md

@@ -12,21 +12,12 @@ Der Bereich Repository umfasst alles auf Basis von Repositories in Namespaces. D
 <!--- AppendLinkContentEnd -->
 
 ### Übersicht
-Auf der Übersichtsseite der Repositories werden die einzelnen Repositories nach Namespaces gegliedert aufgelistet. Jedes Repository wird durch eine Kachel dargestellt. Durch einen Klick auf diese Kachel öffnet sich die Readme Seite des jeweiligen Repositories. 
+Auf der Übersichtsseite der Repositories werden die einzelnen Repositories nach Namespaces gegliedert aufgelistet.
 
 ![Repository Übersicht](assets/repository-overview.png)
 
 Mithilfe der Auswahlbox oben auf der Seite kann die Anzeige der Repositories auf einen Namespace eingeschränkt werden. Alternativ kann die Überschrift eines Namespace angeklickt werden, um nur Repositories aus diesem Namespace anzuzeigen. Über die Suchleiste neben der Auswahlbox können die Repositories frei gefiltert werden. Die Suche filtert dabei nach dem Namespace, dem Namen und der Beschreibung der Repositories.
 
-Ein bestimmter Tab des Repositories wie Branches, Changesets oder Sources kann über die blauen Icons geöffnet werden. 
-
-Icon             |  Beschreibung
----|---
-![Repository Branches](assets/repository-overview-branches.png)  |  Öffnet die Branches-Übersicht für das Repository
-![Repository Changesets](assets/repository-overview-changesets.png) | Öffnet die Changesets-Übersicht für das Repository
-![Repository Sources](assets/repository-overview-sources.png) | Öffnet die Sources-Übersicht für das Repository
-![Repository Einstellungen](assets/repository-overview-settings.png) | Öffnet die Einstellungen für das Repository
-
 Zusätzlich können über das Icon rechts neben den Überschriften für die Namespaces weitere Einstellungen auf Namespace-Ebene vorgenommen werden.
 
 ### Repository erstellen

docs/en/user/repo/index.md

@@ -10,21 +10,12 @@ The Repository area includes everything based on repositories in namespaces. Thi
 * [Settings](settings/)
 
 ### Overview
-The repository overview screen shows all repositories sorted by namespaces. Each repository is shown as a tile. After clicking on the tile the readme screen of the repository is shown.
+The repository overview screen shows all repositories sorted by namespaces.
 
 ![Repository Overview](assets/repository-overview.png)
 
 Using the select box at the top of the page you can restrict the repositories shown for one namespace. Alternatively you can click on one namespace heading to show only repositories of this namespace. The search bar aside the select box can be used to arbitrarily filter the repositories by namespace, name and description.
 
-The different tabs like branches, changesets or sources of the repository can be accessed through the blue icons.
-
-Icon             |  Description
----|---
-![Repository Branches](assets/repository-overview-branches.png)  |  Opens the branches overview for the repository
-![Repository Changesets](assets/repository-overview-changesets.png) | Opens the changeset overview for the repository
-![Repository Sources](assets/repository-overview-sources.png) | Opens the sources overview for the repository
-![Repository Settings](assets/repository-overview-settings.png) | Opens the settings for the repository
-
 Clicking the icon on the right-hand side of each namespace caption, you can change additional settings for this namespace. 
 
 ### Create a Repository

gradle/changelog/redesign_repo_overview.yaml

@@ -0,0 +1,2 @@
+- type: Changed
+  description: Redesign repository overview ([#1740](https://github.com/scm-manager/scm-manager/pull/1740))

gradle/changelog/remove_repo_shortlinks.yaml

@@ -0,0 +1,2 @@
+- type: changed
+  description: Remove repository shortlinks ([#1720](https://github.com/scm-manager/scm-manager/pull/1720))

scm-plugins/scm-git-plugin/src/main/js/CloneInformation.tsx

@@ -21,10 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useEffect, useState } from "react";
+import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, Repository } from "@scm-manager/ui-types";
-import { apiClient } from "@scm-manager/ui-components";
+import { Repository } from "@scm-manager/ui-types";
+import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+import { useChangesets, useDefaultBranch } from "@scm-manager/ui-api";
 
 type Props = {
   url: string;
@@ -33,32 +34,28 @@ type Props = {
 
 const CloneInformation: FC<Props> = ({ url, repository }) => {
   const [t] = useTranslation("plugins");
-  const [defaultBranch, setDefaultBranch] = useState<string>("main");
-  const [emptyRepository, setEmptyRepository] = useState<boolean>();
+  const {
+    data: changesets,
+    error: changesetsError,
+    isLoading: changesetsLoading,
+  } = useChangesets(repository, { limit: 1 });
+  const {
+    data: defaultBranchData,
+    isLoading: defaultBranchLoading,
+    error: defaultBranchError,
+  } = useDefaultBranch(repository);
 
-  useEffect(() => {
-    if (repository) {
-      apiClient
-        .get((repository._links.changesets as Link).href + "?limit=1")
-        .then(r => r.json())
-        .then(result => {
-          const empty = result._embedded.changesets.length === 0;
-          setEmptyRepository(empty);
-        });
+  if (changesetsLoading || defaultBranchLoading) {
+    return <Loading />;
   }
-  }, [repository]);
 
-  useEffect(() => {
-    if (repository) {
-      apiClient
-        .get((repository._links.defaultBranch as Link).href)
-        .then(r => r.json())
-        .then(r => r.defaultBranch && setDefaultBranch(r.defaultBranch));
-    }
-  }, [repository]);
+  const error = changesetsError || defaultBranchError;
+  const branch = defaultBranchData?.defaultBranch;
+  const emptyRepository = changesets?._embedded.changesets.length === 0;
 
   return (
-    <div>
+    <div className="content">
+      <ErrorNotification error={error} />
       <h4>{t("scm-git-plugin.information.clone")}</h4>
       <pre>
         <code>
@@ -68,7 +65,7 @@ const CloneInformation: FC<Props> = ({ url, repository }) => {
           {emptyRepository && (
             <>
               <br />
-              git checkout -b {defaultBranch}
+              git checkout -b {branch}
             </>
           )}
         </code>
@@ -82,7 +79,7 @@ const CloneInformation: FC<Props> = ({ url, repository }) => {
               <br />
               cd {repository.name}
               <br />
-              git checkout -b {defaultBranch}
+              git checkout -b {branch}
               <br />
               echo "# {repository.name}
               " &gt; README.md
@@ -93,7 +90,7 @@ const CloneInformation: FC<Props> = ({ url, repository }) => {
               <br />
               git remote add origin {url}
               <br />
-              git push -u origin {defaultBranch}
+              git push -u origin {branch}
               <br />
             </code>
           </pre>

scm-plugins/scm-hg-plugin/src/main/js/ProtocolInformation.tsx

@@ -21,10 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useEffect, useState } from "react";
+import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
-import { Link, Repository } from "@scm-manager/ui-types";
-import { apiClient, repositories } from "@scm-manager/ui-components";
+import { Repository } from "@scm-manager/ui-types";
+import { ErrorNotification, Loading, repositories } from "@scm-manager/ui-components";
+import { useChangesets } from "@scm-manager/ui-api";
 
 type Props = {
   repository: Repository;
@@ -32,27 +33,22 @@ type Props = {
 
 const ProtocolInformation: FC<Props> = ({ repository }) => {
   const [t] = useTranslation("plugins");
-  const [emptyRepository, setEmptyRepository] = useState<boolean>();
-
+  const { data, error, isLoading } = useChangesets(repository, { limit: 1 });
   const href = repositories.getProtocolLinkByType(repository, "http");
 
-  useEffect(() => {
-    if (repository) {
-      apiClient
-        .get((repository._links.changesets as Link).href)
-        .then(r => r.json())
-        .then(result => {
-          const empty = result._embedded.changesets.length === 0;
-          setEmptyRepository(empty);
-        });
-    }
-  }, [repository]);
-
   if (!href) {
     return null;
   }
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  const emptyRepository = data?._embedded.changesets.length === 0;
+
   return (
     <div>
+      <ErrorNotification error={error} />
       <h4>{t("scm-hg-plugin.information.clone")}</h4>
       <pre>
         <code>hg clone {href}</code>

scm-ui/ui-api/src/branches.ts

@@ -33,7 +33,7 @@ export const useBranches = (repository: Repository): ApiResult<BranchCollection>
   const link = requiredLink(repository, "branches");
   return useQuery<BranchCollection, Error>(
     repoQueryKey(repository, "branches"),
-    () => apiClient.get(link).then(response => response.json())
+    () => apiClient.get(link).then((response) => response.json())
     // we do not populate the cache for a single branch,
     // because we have no pagination for branches and if we have a lot of them
     // the population slows us down
@@ -43,7 +43,7 @@ export const useBranches = (repository: Repository): ApiResult<BranchCollection>
 export const useBranch = (repository: Repository, name: string): ApiResult<Branch> => {
   const link = requiredLink(repository, "branches");
   return useQuery<Branch, Error>(branchQueryKey(repository, name), () =>
-    apiClient.get(concat(link, name)).then(response => response.json())
+    apiClient.get(concat(link, name)).then((response) => response.json())
   );
 };
 
@@ -51,14 +51,14 @@ const createBranch = (link: string) => {
   return (branch: BranchCreation) => {
     return apiClient
       .post(link, branch, "application/vnd.scmm-branchRequest+json;v=2")
-      .then(response => {
+      .then((response) => {
         const location = response.headers.get("Location");
         if (!location) {
           throw new Error("Server does not return required Location header");
         }
         return apiClient.get(location);
       })
-      .then(response => response.json());
+      .then((response) => response.json());
   };
 };
 
@@ -66,23 +66,23 @@ export const useCreateBranch = (repository: Repository) => {
   const queryClient = useQueryClient();
   const link = requiredLink(repository, "branches");
   const { mutate, isLoading, error, data } = useMutation<Branch, Error, BranchCreation>(createBranch(link), {
-    onSuccess: async branch => {
+    onSuccess: async (branch) => {
       queryClient.setQueryData(branchQueryKey(repository, branch), branch);
       await queryClient.invalidateQueries(repoQueryKey(repository, "branches"));
-    }
+    },
   });
   return {
     create: (branch: BranchCreation) => mutate(branch),
     isLoading,
     error,
-    branch: data
+    branch: data,
   };
 };
 
 export const useDeleteBranch = (repository: Repository) => {
   const queryClient = useQueryClient();
   const { mutate, isLoading, error, data } = useMutation<unknown, Error, Branch>(
-    branch => {
+    (branch) => {
       const deleteUrl = (branch._links.delete as Link).href;
       return apiClient.delete(deleteUrl);
     },
@@ -90,13 +90,22 @@ export const useDeleteBranch = (repository: Repository) => {
       onSuccess: async (_, branch) => {
         queryClient.removeQueries(branchQueryKey(repository, branch));
         await queryClient.invalidateQueries(repoQueryKey(repository, "branches"));
-      }
+      },
     }
   );
   return {
     remove: (branch: Branch) => mutate(branch),
     isLoading,
     error,
-    isDeleted: !!data
+    isDeleted: !!data,
   };
 };
+
+type DefaultBranch = { defaultBranch: string };
+
+export const useDefaultBranch = (repository: Repository): ApiResult<DefaultBranch> => {
+  const link = requiredLink(repository, "defaultBranch");
+  return useQuery<DefaultBranch, Error>(branchQueryKey(repository, "__default-branch"), () =>
+    apiClient.get(link).then((response) => response.json())
+  );
+};

scm-ui/ui-api/src/changesets.ts

@@ -32,6 +32,7 @@ import { concat } from "./urls";
 type UseChangesetsRequest = {
   branch?: Branch;
   page?: string | number;
+  limit?: number;
 };
 
 export const changesetQueryKey = (repository: NamespaceAndName, id: string) => {
@@ -53,23 +54,29 @@ export const useChangesets = (
     link = requiredLink(repository, "changesets");
   }
 
-  if (request?.page) {
+  if (request?.page || request?.limit) {
+    if (request?.page && request?.limit) {
+      link = `${link}?page=${request.page}&limit=${request.limit}`;
+    } else if (request.page) {
       link = `${link}?page=${request.page}`;
+    } else if (request.limit) {
+      link = `${link}?limit=${request.limit}`;
+    }
   }
 
   const key = branchQueryKey(repository, branch, "changesets", request?.page || 0);
-  return useQuery<ChangesetCollection, Error>(key, () => apiClient.get(link).then(response => response.json()), {
-    onSuccess: changesetCollection => {
-      changesetCollection._embedded.changesets.forEach(changeset => {
+  return useQuery<ChangesetCollection, Error>(key, () => apiClient.get(link).then((response) => response.json()), {
+    onSuccess: (changesetCollection) => {
+      changesetCollection._embedded.changesets.forEach((changeset) => {
         queryClient.setQueryData(changesetQueryKey(repository, changeset.id), changeset);
       });
-    }
+    },
   });
 };
 
 export const useChangeset = (repository: Repository, id: string): ApiResult<Changeset> => {
   const changesetsLink = requiredLink(repository, "changesets");
   return useQuery<Changeset, Error>(changesetQueryKey(repository, id), () =>
-    apiClient.get(concat(changesetsLink, id)).then(response => response.json())
+    apiClient.get(concat(changesetsLink, id)).then((response) => response.json())
   );
 };

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

@@ -25,7 +25,7 @@ import React, { FC } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Branch } from "@scm-manager/ui-types";
-import DropDown from "./forms/DropDown";
+import { Select } from "./forms";
 
 type Props = {
   branches: Branch[];
@@ -58,12 +58,12 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
         <div className="field-body">
           <NoBottomMarginField className={classNames("field", "is-narrow")}>
             <MinWidthControl className="control">
-              <DropDown
+              <Select
                 className="is-fullwidth"
-                options={branches.map(b => b.name)}
-                optionSelected={branch => onSelectBranch(branches.filter(b => b.name === branch)[0])}
+                options={branches.map((b) => ({ label: b.name, value: b.name }))}
+                onChange={(branch) => onSelectBranch(branches.filter((b) => b.name === branch)[0])}
                 disabled={!!disabled}
-                preselectedOption={selectedBranch}
+                value={selectedBranch}
               />
             </MinWidthControl>
           </NoBottomMarginField>

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

@@ -24,8 +24,8 @@
 import React, { FC, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import classNames from "classnames";
-import { Button, DropDown, urls } from "./index";
-import { FilterInput } from "./forms";
+import { Button, urls } from "./index";
+import { FilterInput, Select } from "./forms";
 
 type Props = {
   showCreateButton: boolean;
@@ -52,7 +52,7 @@ const OverviewPageActions: FC<Props> = ({
   groupSelected,
   label,
   testId,
-  searchPlaceholder
+  searchPlaceholder,
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -61,11 +61,11 @@ const OverviewPageActions: FC<Props> = ({
 
   const groupSelector = groups && (
     <div className={"column is-flex"}>
-      <DropDown
+      <Select
         className={"is-fullwidth"}
-        options={groups}
-        preselectedOption={currentGroup}
-        optionSelected={groupSelected}
+        options={groups.map((g) => ({ value: g, label: g }))}
+        value={currentGroup}
+        onChange={groupSelected}
       />
     </div>
   );

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

@@ -26,14 +26,16 @@ import React, { ReactNode } from "react";
 type Props = {
   message: string;
   className?: string;
-  location: string;
+  location: TooltipLocation;
   multiline?: boolean;
   children: ReactNode;
 };
 
+export type TooltipLocation = "bottom" | "right" | "top" | "left";
+
 class Tooltip extends React.Component<Props> {
   static defaultProps = {
-    location: "right"
+    location: "right",
   };
 
   render() {

scm-ui/ui-components/src/forms/Select.tsx

@@ -44,6 +44,7 @@ type BaseProps = {
   testId?: string;
   defaultValue?: string;
   readOnly?: boolean;
+  className?: string;
 };
 
 const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
@@ -56,6 +57,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   disabled,
   testId,
   readOnly,
+  className,
   ...props
 }) => {
   const field = useInnerRef(props.innerRef);
@@ -100,7 +102,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   return (
     <fieldset className="field" disabled={readOnly}>
       <LabelWithHelpIcon label={label} helpText={helpText} />
-      <div className={classNames("control select", loadingClass)}>
+      <div className={classNames("control select", loadingClass, className)}>
         <select
           name={name}
           ref={field}

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

@@ -0,0 +1,67 @@
+/*
+ * 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 React, { FC, ReactNode } from "react";
+import styled from "styled-components";
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+  font-size: 1rem;
+  font-weight: bold;
+`;
+
+const Separator = styled.div`
+  border-bottom: 1px solid rgb(219, 219, 219, 0.5);
+  margin: 0 1rem;
+`;
+
+const Box = styled.div`
+  padding: 0.5rem;
+`;
+
+type Props = {
+  namespaceHeader: ReactNode;
+  elements: ReactNode[];
+};
+
+const GroupEntries: FC<Props> = ({ namespaceHeader, elements }) => {
+  const content = elements.map((entry, index) => (
+    <React.Fragment key={index}>
+      <div>{entry}</div>
+      {index + 1 !== elements.length ? <Separator /> : null}
+    </React.Fragment>
+  ));
+
+  return (
+    <>
+      <TitleWrapper>{namespaceHeader}</TitleWrapper>
+      <Box className="box">{content}</Box>
+      <div className="is-clearfix" />
+    </>
+  );
+};
+
+export default GroupEntries;

scm-ui/ui-components/src/layout/GroupEntry.stories.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 styled from "styled-components";
+import Icon from "../Icon";
+import { storiesOf } from "@storybook/react";
+import { MemoryRouter } from "react-router-dom";
+import React from "react";
+import GroupEntry from "./GroupEntry";
+import { Button, ButtonGroup } from "../buttons";
+import copyToClipboard from "../CopyToClipboard";
+
+const Wrapper = styled.div`
+  margin: 2rem;
+`;
+
+const link = "/foo/bar";
+const icon = <Icon name="icons fa-2x fa-fw" />;
+const name = <strong className="is-marginless">main content</strong>;
+const description = <small>more text</small>;
+const longName = (
+  <strong className="is-marginless">
+    Very-important-repository-with-a-particular-long-but-easily-rememberable-name-which-also-is-written-in-kebab-case
+  </strong>
+);
+const contentRight = (
+  <ButtonGroup>
+    <Button
+      icon={"download"}
+      title={"Copy clone command to clipboard"}
+      action={() => copyToClipboard("git clone {url}")}
+    />
+  </ButtonGroup>
+);
+
+storiesOf("GroupEntry", module)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+  .add("Default", () => (
+    <GroupEntry link={link} avatar={icon} name={name} description={description} contentRight={contentRight} />
+  ))
+  .add("With long texts", () => (
+    <GroupEntry
+      link={link}
+      avatar={icon}
+      name={longName}
+      description={
+        <small>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+          dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+          clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+          consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+          takimata sanctus est Lorem ipsum dolor sit amet.
+        </small>
+      }
+      contentRight={contentRight}
+    />
+  ));

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

@@ -0,0 +1,126 @@
+/*
+ * 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 React, { FC, ReactNode } from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+const StyledGroupEntry = styled.div`
+  max-height: calc(90px - 1.5rem);
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
+  align-items: center;
+  pointer-events: all;
+`;
+
+const OverlayLink = styled(Link)`
+  width: 100%;
+  position: absolute;
+  height: calc(90px - 1.5rem);
+  pointer-events: all;
+  border-radius: 4px;
+  :hover {
+    background-color: rgb(51, 178, 232, 0.1);
+    cursor: pointer;
+  }
+`;
+
+const Avatar = styled.div`
+  padding-right: 1rem;
+  .predefined-avatar {
+    height: 48px;
+    width: 48px;
+    font-size: 1.75rem;
+  }
+`;
+
+const Name = styled.div`
+  padding: 0 0.25rem;
+`;
+
+const Description = styled.p`
+  padding: 0 0.25rem;
+  height: 1.5rem;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: visible;
+  white-space: nowrap;
+  word-break: break-all;
+`;
+
+const ContentLeft = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+`;
+
+const ContentRight = styled.div`
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  pointer-events: all;
+  padding-left: 2rem;
+  margin-bottom: -10px;
+`;
+
+const NameDescriptionWrapper = styled.div`
+  overflow: hidden;
+  flex: 1 1 auto;
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+type Props = {
+  title?: string;
+  avatar: string | ReactNode;
+  name: string | ReactNode;
+  description?: string | ReactNode;
+  contentRight?: ReactNode;
+  link: string;
+};
+
+const GroupEntry: FC<Props> = ({ link, avatar, title, name, description, contentRight }) => {
+  return (
+    <Wrapper>
+      <OverlayLink to={link} />
+      <StyledGroupEntry title={title}>
+        <ContentLeft>
+          <Avatar>{avatar}</Avatar>
+          <NameDescriptionWrapper>
+            <Name>{name}</Name>
+            <Description>{description}</Description>
+          </NameDescriptionWrapper>
+        </ContentLeft>
+        <ContentRight className="is-hidden-touch">{contentRight}</ContentRight>
+      </StyledGroupEntry>
+    </Wrapper>
+  );
+};
+
+export default GroupEntry;

scm-ui/ui-components/src/modals/Modal.tsx

@@ -21,11 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import * as React from "react";
-import { FC } from "react";
+import React, { FC } from "react";
 import classNames from "classnames";
 import usePortalRootElement from "../usePortalRootElement";
 import ReactDOM from "react-dom";
+import styled from "styled-components";
+
+type ModalSize = "S" | "M" | "L";
+
+const modalSizes: { [key in ModalSize]: number } = { S: 33, M: 50, L: 66 };
 
 type Props = {
   title: string;
@@ -36,8 +40,13 @@ type Props = {
   className?: string;
   headColor?: string;
   headTextColor?: string;
+  size?: ModalSize;
 };
 
+const SizedModal = styled.div<{ size?: ModalSize }>`
+  width: ${(props) => (props.size ? `${modalSizes[props.size]}%` : "640px")};
+`;
+
 export const Modal: FC<Props> = ({
   title,
   closeFunction,
@@ -46,7 +55,8 @@ export const Modal: FC<Props> = ({
   active,
   className,
   headColor = "light",
-  headTextColor = "black"
+  headTextColor = "black",
+  size,
 }) => {
   const portalRootElement = usePortalRootElement("modalsRoot");
 
@@ -64,14 +74,14 @@ export const Modal: FC<Props> = ({
   const modalElement = (
     <div className={classNames("modal", className, isActive)}>
       <div className="modal-background" onClick={closeFunction} />
-      <div className="modal-card">
+      <SizedModal className="modal-card" size={size}>
         <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
           <p className={`modal-card-title is-marginless has-text-${headTextColor}`}>{title}</p>
           <button className="delete" aria-label="close" onClick={closeFunction} />
         </header>
         <section className="modal-card-body">{body}</section>
         {showFooter}
-      </div>
+      </SizedModal>
     </div>
   );
 

scm-ui/ui-components/src/repos/RepositoryAvatar.tsx

@@ -27,7 +27,7 @@ import { Repository } from "@scm-manager/ui-types";
 import { Image } from "@scm-manager/ui-components";
 import styled from "styled-components";
 
-const Avatar = styled.p`
+const Avatar = styled.div`
   border-radius: 5px;
 `;
 

scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx

@@ -31,7 +31,6 @@ import RepositoryEntry from "./RepositoryEntry";
 import { Binder, BinderContext } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
 import Image from "../Image";
-import Icon from "../Icon";
 import { MemoryRouter } from "react-router-dom";
 import { Color } from "../styleConstants";
 import RepositoryFlag from "./RepositoryFlag";
@@ -42,7 +41,7 @@ const Spacing = styled.div`
   margin: 2rem;
 `;
 
-const Container: FC = ({ children }) => <Spacing className="box box-link-shadow">{children}</Spacing>;
+const Container: FC = ({ children }) => <Spacing>{children}</Spacing>;
 
 const bindAvatar = (binder: Binder, avatar: string) => {
   binder.bind("repos.repository-avatar", () => {
@@ -52,7 +51,7 @@ const bindAvatar = (binder: Binder, avatar: string) => {
 
 const bindFlag = (binder: Binder, color: Color, label: string) => {
   binder.bind("repository.card.flags", () => (
-    <RepositoryFlag title={label} color={color}>
+    <RepositoryFlag title={label} color={color} tooltipLocation="right">
       {label}
     </RepositoryFlag>
   ));
@@ -64,12 +63,6 @@ const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
   });
 };
 
-const bindQuickLink = (binder: Binder, extension: ReactNode) => {
-  binder.bind("repository.card.quickLink", () => {
-    return extension;
-  });
-};
-
 const withBinder = (binder: Binder, repo: Repository) => {
   return (
     <BinderContext.Provider value={binder}>
@@ -78,14 +71,14 @@ const withBinder = (binder: Binder, repo: Repository) => {
   );
 };
 
-const QuickLink = (
-  <a className="level-item">
-    <Icon className="fa-lg" name="fas fa-code-branch fa-rotate-180 fa-fw" color="inherit" />
-  </a>
-);
-
 const archivedRepository = { ...repository, archived: true };
 const exportingRepository = { ...repository, exporting: true };
+const longTextRepository = {
+  ...repository,
+  name: "veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-loooooooooooooooooooooooooooooooooooooooooooooooooooong-repooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame",
+  description:
+    "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+};
 const healthCheckFailedRepository = {
   ...repository,
   healthCheckFailures: [
@@ -93,11 +86,17 @@ const healthCheckFailedRepository = {
       id: "4211",
       summary: "Something failed",
       description: "Something realy bad happend",
-      url: "https://something-realy-bad.happend"
-    }
-  ]
+      url: "https://something-realy-bad.happend",
+    },
+  ],
+};
+const archivedExportingRepository = {
+  ...repository,
+  archived: true,
+  exporting: true,
+  description:
+    "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
 };
-const archivedExportingRepository = { ...repository, archived: true, exporting: true };
 
 storiesOf("RepositoryEntry", module)
   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -115,11 +114,6 @@ storiesOf("RepositoryEntry", module)
     bindBeforeTitle(binder, <i className="far fa-star" />);
     return withBinder(binder, repository);
   })
-  .add("Quick Link EP", () => {
-    const binder = new Binder("title");
-    bindQuickLink(binder, QuickLink);
-    return withBinder(binder, repository);
-  })
   .add("Archived", () => {
     const binder = new Binder("title");
     bindAvatar(binder, Git);
@@ -146,4 +140,7 @@ storiesOf("RepositoryEntry", module)
     const binder = new Binder("title");
     bindAvatar(binder, Git);
     return withBinder(binder, archivedExportingRepository);
+  })
+  .add("With long texts", () => {
+    return <RepositoryEntry repository={longTextRepository} baseDate={baseDate} />;
   });

scm-ui/ui-components/src/repos/RepositoryEntry.tsx

@@ -21,207 +21,116 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
 import { Repository } from "@scm-manager/ui-types";
-import { CardColumn, DateFromNow } from "@scm-manager/ui-components";
-import RepositoryEntryLink from "./RepositoryEntryLink";
+import { DateFromNow, Modal } from "@scm-manager/ui-components";
 import RepositoryAvatar from "./RepositoryAvatar";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { withTranslation, WithTranslation } from "react-i18next";
+import GroupEntry from "../layout/GroupEntry";
+import RepositoryFlags from "./RepositoryFlags";
 import styled from "styled-components";
-import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
-import RepositoryFlag from "./RepositoryFlag";
+import Icon from "../Icon";
+import { useTranslation } from "react-i18next";
 
 type DateProp = Date | string;
 
-type Props = WithTranslation & {
+type Props = {
   repository: Repository;
   // @VisibleForTesting
   // the baseDate is only to avoid failing snapshot tests
   baseDate?: DateProp;
 };
 
-type State = {
-  showHealthCheck: boolean;
-};
-
-const Title = styled.span`
+const ContentRightContainer = styled.div`
+  height: calc(80px - 1.5rem);
+  margin-right: 1rem;
+  position: relative;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
 `;
 
-const RepositoryFlagContainer = styled.div`
-  /*pointer-events: all;*/
+const DateWrapper = styled.small`
+  padding-bottom: 0.25rem;
+`;
 
-  .tag {
-    margin-left: 0.25rem;
+const QuickActionbar = styled.span`
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+`;
+
+const QuickAction = styled(Icon)`
+  font-size: 1.25rem;
+
+  :hover {
+    color: #363636 !important;
   }
 `;
 
-class RepositoryEntry extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      showHealthCheck: false,
-    };
-  }
+const Name = styled.strong`
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: visible;
+  white-space: nowrap;
+`;
 
-  createLink = (repository: Repository) => {
-    return `/repo/${repository.namespace}/${repository.name}`;
-  };
+const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
+  const [t] = useTranslation("repos");
+  const [openCloneModal, setOpenCloneModal] = useState(false);
 
-  renderBranchesLink = (repository: Repository, repositoryLink: string) => {
-    const { t } = this.props;
-    if (repository._links["branches"]) {
-      return (
-        <RepositoryEntryLink
-          icon="code-branch"
-          to={repositoryLink + "/branches/"}
-          tooltip={t("repositoryRoot.tooltip.branches")}
-        />
-      );
-    }
-    return null;
-  };
-
-  renderTagsLink = (repository: Repository, repositoryLink: string) => {
-    const { t } = this.props;
-    if (repository._links["tags"]) {
-      return (
-        <RepositoryEntryLink icon="tags" to={repositoryLink + "/tags/"} tooltip={t("repositoryRoot.tooltip.tags")} />
-      );
-    }
-    return null;
-  };
-
-  renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
-    const { t } = this.props;
-    if (repository._links["changesets"]) {
-      return (
-        <RepositoryEntryLink
-          icon="exchange-alt"
-          to={repositoryLink + "/code/changesets/"}
-          tooltip={t("repositoryRoot.tooltip.commits")}
-        />
-      );
-    }
-    return null;
-  };
-
-  renderSourcesLink = (repository: Repository, repositoryLink: string) => {
-    const { t } = this.props;
-    if (repository._links["sources"]) {
-      return (
-        <RepositoryEntryLink
-          icon="code"
-          to={repositoryLink + "/code/sources/"}
-          tooltip={t("repositoryRoot.tooltip.sources")}
-        />
-      );
-    }
-    return null;
-  };
-
-  renderModifyLink = (repository: Repository, repositoryLink: string) => {
-    const { t } = this.props;
-    if (repository._links["update"]) {
-      return (
-        <RepositoryEntryLink
-          icon="cog"
-          to={repositoryLink + "/settings/general"}
-          tooltip={t("repositoryRoot.tooltip.settings")}
-        />
-      );
-    }
-    return null;
-  };
-
-  createFooterLeft = (repository: Repository, repositoryLink: string) => {
-    return (
-      <>
-        {this.renderBranchesLink(repository, repositoryLink)}
-        {this.renderTagsLink(repository, repositoryLink)}
-        {this.renderChangesetsLink(repository, repositoryLink)}
-        {this.renderSourcesLink(repository, repositoryLink)}
-        <ExtensionPoint name={"repository.card.quickLink"} props={{ repository, repositoryLink }} renderAll={true} />
-        {this.renderModifyLink(repository, repositoryLink)}
-      </>
-    );
-  };
-
-  createFooterRight = (repository: Repository, baseDate?: DateProp) => {
-    return (
-      <small className="level-item">
-        <DateFromNow baseDate={baseDate} date={repository.lastModified || repository.creationDate} />
-      </small>
-    );
-  };
-
-  createTitle = () => {
-    const { repository, t } = this.props;
-    const repositoryFlags = [];
-    if (repository.archived) {
-      repositoryFlags.push(<RepositoryFlag title={t("archive.tooltip")}>{t("repository.archived")}</RepositoryFlag>);
-    }
-
-    if (repository.exporting) {
-      repositoryFlags.push(<RepositoryFlag title={t("exporting.tooltip")}>{t("repository.exporting")}</RepositoryFlag>);
-    }
-
-    if (repository.healthCheckFailures && repository.healthCheckFailures.length > 0) {
-      repositoryFlags.push(
-        <RepositoryFlag
-          color="danger"
-          title={t("healthCheckFailure.tooltip")}
-          onClick={() => {
-            this.setState({ showHealthCheck: true });
+  const createContentRight = () => (
+    <ContentRightContainer>
+      <Modal
+        size="L"
+        active={openCloneModal}
+        title={t("overview.clone")}
+        body={
+          <ExtensionPoint
+            name="repos.repository-details.information"
+            renderAll={true}
+            props={{
+              repository,
             }}
-        >
-          {t("repository.healthCheckFailure")}
-        </RepositoryFlag>
-      );
-    }
-
-    return (
-      <Title>
-        <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} />
-        <strong>{repository.name}</strong>{" "}
-        <RepositoryFlagContainer>
-          {repositoryFlags}
-          <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
-        </RepositoryFlagContainer>
-      </Title>
-    );
-  };
-
-  render() {
-    const { repository, baseDate } = this.props;
-    const repositoryLink = this.createLink(repository);
-    const footerLeft = this.createFooterLeft(repository, repositoryLink);
-    const footerRight = this.createFooterRight(repository, baseDate);
-    const title = this.createTitle();
-    const modal = (
-      <HealthCheckFailureDetail
-        closeFunction={() => this.setState({ showHealthCheck: false })}
-        active={this.state.showHealthCheck}
-        failures={repository.healthCheckFailures}
           />
+        }
+        closeFunction={() => setOpenCloneModal(false)}
+      />
+      <QuickActionbar>
+        <QuickAction
+          name="download"
+          color="info"
+          className="has-cursor-pointer"
+          onClick={() => setOpenCloneModal(true)}
+          title={t("overview.clone")}
+        />
+      </QuickActionbar>
+      <DateWrapper>
+        <DateFromNow baseDate={baseDate} date={repository.lastModified || repository.creationDate} />
+      </DateWrapper>
+    </ContentRightContainer>
+  );
+
+  const repositoryLink = `/repo/${repository.namespace}/${repository.name}/`;
+  const actions = createContentRight();
+  const name = (
+    <div className="is-flex">
+      <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} />
+      <Name>{repository.name}</Name> <RepositoryFlags repository={repository} className="is-hidden-mobile" />
+    </div>
   );
 
   return (
     <>
-        {modal}
-        <CardColumn
-          avatar={<RepositoryAvatar repository={repository} />}
-          title={title}
+      <GroupEntry
+        avatar={<RepositoryAvatar repository={repository} size={48} />}
+        name={name}
         description={repository.description}
+        contentRight={actions}
         link={repositoryLink}
-          footerLeft={footerLeft}
-          footerRight={footerRight}
       />
     </>
   );
-  }
-}
+};
 
-export default withTranslation("repos")(RepositoryEntry);
+export default RepositoryEntry;

scm-ui/ui-components/src/repos/RepositoryFlag.tsx

@@ -24,7 +24,7 @@
 
 import React, { FC } from "react";
 import { Color, Size } from "../styleConstants";
-import Tooltip from "../Tooltip";
+import Tooltip, {TooltipLocation} from "../Tooltip";
 import Tag from "../Tag";
 
 type Props = {
@@ -32,10 +32,11 @@ type Props = {
   title: string;
   onClick?: () => void;
   size?: Size;
+  tooltipLocation: TooltipLocation;
 };
 
-const RepositoryFlag: FC<Props> = ({ children, title, size = "small", ...props }) => (
-  <Tooltip location="bottom" message={title}>
+const RepositoryFlag: FC<Props> = ({ children, title, size = "small", tooltipLocation = "bottom", ...props }) => (
+  <Tooltip location={tooltipLocation} message={title}>
     <Tag size={size} {...props}>
       {children}
     </Tag>

scm-ui/ui-components/src/repos/RepositoryFlags.tsx

@@ -0,0 +1,104 @@
+/*
+ * 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 React, { FC, useState } from "react";
+import RepositoryFlag from "./RepositoryFlag";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { Repository } from "@scm-manager/ui-types";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
+import { TooltipLocation } from "../Tooltip";
+
+type Props = {
+  repository: Repository;
+  className?: string;
+  tooltipLocation?: TooltipLocation;
+};
+
+const Wrapper = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
+const RepositoryFlagContainer = styled.div`
+  .tag {
+    margin-left: 0.25rem;
+  }
+`;
+
+const RepositoryFlags: FC<Props> = ({ repository, className, tooltipLocation = "right" }) => {
+  const [t] = useTranslation("repos");
+  const [showHealthCheck, setShowHealthCheck] = useState(false);
+
+  const repositoryFlags = [];
+  if (repository.archived) {
+    repositoryFlags.push(
+      <RepositoryFlag key="archived" title={t("archive.tooltip")} tooltipLocation={tooltipLocation}>
+        {t("repository.archived")}
+      </RepositoryFlag>
+    );
+  }
+
+  if (repository.exporting) {
+    repositoryFlags.push(
+      <RepositoryFlag key="exporting" title={t("exporting.tooltip")} tooltipLocation={tooltipLocation}>
+        {t("repository.exporting")}
+      </RepositoryFlag>
+    );
+  }
+
+  if (repository.healthCheckFailures && repository.healthCheckFailures.length > 0) {
+    repositoryFlags.push(
+      <RepositoryFlag
+        key="healthcheck"
+        color="danger"
+        title={t("healthCheckFailure.tooltip")}
+        onClick={() => setShowHealthCheck(true)}
+        tooltipLocation={tooltipLocation}
+      >
+        {t("repository.healthCheckFailure")}
+      </RepositoryFlag>
+    );
+  }
+  const modal = (
+    <HealthCheckFailureDetail
+      closeFunction={() => setShowHealthCheck(false)}
+      active={showHealthCheck}
+      failures={repository.healthCheckFailures}
+    />
+  );
+
+  return (
+    <Wrapper>
+      {modal}
+      <RepositoryFlagContainer>
+        {repositoryFlags}
+        <ExtensionPoint name="repository.flags" props={{ repository, tooltipLocation }} renderAll={true} />
+      </RepositoryFlagContainer>
+    </Wrapper>
+  );
+};
+
+export default RepositoryFlags;

scm-ui/ui-components/src/repos/index.ts

@@ -48,10 +48,10 @@ export { DefaultCollapsed, DefaultCollapsedFunction } from "./defaultCollapsed";
 export { default as RepositoryAvatar } from "./RepositoryAvatar";
 export { default as RepositoryEntry } from "./RepositoryEntry";
 export { default as RepositoryFlag } from "./RepositoryFlag";
-export { default as RepositoryEntryLink } from "./RepositoryEntryLink";
 export { default as JumpToFileButton } from "./JumpToFileButton";
 export { default as CommitAuthor } from "./CommitAuthor";
 export { default as HealthCheckFailureDetail } from "./HealthCheckFailureDetail";
+export { default as RepositoryFlags } from "./RepositoryFlags";
 
 export {
   File,

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -60,7 +60,8 @@
     "invalidNamespace": "Keine Repositories gefunden. Möglicherweise existiert der ausgewählte Namespace nicht.",
     "createButton": "Repository hinzufügen",
     "filterRepositories": "Repositories filtern",
-    "allNamespaces": "Alle Namespaces"
+    "allNamespaces": "Alle Namespaces",
+    "clone": "Clone/Checkout"
   },
   "create": {
     "title": "Repository hinzufügen",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -60,7 +60,8 @@
     "invalidNamespace": "No repositories found. It's likely that the selected namespace does not exist.",
     "createButton": "Add Repository",
     "filterRepositories": "Filter repositories",
-    "allNamespaces": "All namespaces"
+    "allNamespaces": "All namespaces",
+    "clone": "Clone/Checkout"
   },
   "create": {
     "title": "Add Repository",

scm-ui/ui-webapp/src/repos/components/RepositoryInformationForm.tsx

@@ -58,7 +58,7 @@ const RepositoryInformationForm: FC<Props> = ({ repository, onChange, disabled,
       />
       <Textarea
         label={t("repository.description")}
-        onChange={description => onChange({ ...repository, description })}
+        onChange={(description) => onChange({ ...repository, description })}
         value={repository ? repository.description : ""}
         helpText={t("help.descriptionHelpText")}
         disabled={disabled}

scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx

@@ -21,27 +21,23 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
 import { Link } from "react-router-dom";
-import { CardColumnGroup, Icon, RepositoryEntry } from "@scm-manager/ui-components";
+import { Icon, RepositoryEntry } from "@scm-manager/ui-components";
 import { RepositoryGroup } from "@scm-manager/ui-types";
-import { WithTranslation, withTranslation } from "react-i18next";
-import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+import GroupEntries from "../../../../../ui-components/src/layout/GroupEntries";
 
-type Props = WithTranslation & {
+type Props = {
   group: RepositoryGroup;
 };
 
-const SizedIcon = styled(Icon)`
-  font-size: 1.33rem;
-`;
+const RepositoryGroupEntry: FC<Props> = ({ group }) => {
+  const [t] = useTranslation("namespaces");
 
-class RepositoryGroupEntry extends React.Component<Props> {
-  render() {
-    const { group, t } = this.props;
   const settingsLink = group.namespace?._links?.permissions && (
     <Link to={`/namespace/${group.name}/settings`}>
-        <SizedIcon color={"is-link"} name={"cog"} title={t("repositoryOverview.settings.tooltip")} />
+      <Icon color="is-link" name="cog" title={t("repositoryOverview.settings.tooltip")} className={"is-size-6 ml-2"} />
     </Link>
   );
   const namespaceHeader = (
@@ -55,8 +51,7 @@ class RepositoryGroupEntry extends React.Component<Props> {
   const entries = group.repositories.map((repository, index) => {
     return <RepositoryEntry repository={repository} key={index} />;
   });
-    return <CardColumnGroup name={namespaceHeader} elements={entries} />;
-  }
-}
+  return <GroupEntries namespaceHeader={namespaceHeader} elements={entries} />;
+};
 
-export default withTranslation("namespaces")(RepositoryGroupEntry);
+export default RepositoryGroupEntry;

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

@@ -32,7 +32,7 @@ const CreateRepository: FC<CreatorComponentProps> = ({ repositoryTypes, namespac
   const { isLoading, error, repository, create } = useCreateRepository();
 
   if (repository) {
-    return <Redirect to={`/repo/${repository.namespace}/${repository.name}`} />;
+    return <Redirect to={`/repo/${repository.namespace}/${repository.name}/info`} />;
   }
 
   return (

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

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React, { useState } from "react";
-import { Link as RouteLink, Redirect, Route, Switch, useRouteMatch } from "react-router-dom";
+import { Link as RouteLink, match, Redirect, Route, Switch, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Changeset, Link } from "@scm-manager/ui-types";
@@ -36,12 +36,11 @@ import {
   NavLink,
   Page,
   PrimaryContentColumn,
-  RepositoryFlag,
+  RepositoryFlags,
   SecondaryNavigation,
   SecondaryNavigationColumn,
   StateMenuContextProvider,
   SubNavigation,
-  Tooltip,
   urls,
 } from "@scm-manager/ui-components";
 import RepositoryDetails from "../components/RepositoryDetails";
@@ -120,7 +119,7 @@ const RepositoryRoot = () => {
   if (redirectUrlFactory) {
     redirectedUrl = url + redirectUrlFactory(props);
   } else {
-    redirectedUrl = url + "/info";
+    redirectedUrl = url + "/code/sources/";
   }
 
   const fileControlFactoryFactory: (changeset: Changeset) => FileControlFactory = (changeset) => (file) => {
@@ -158,23 +157,6 @@ const RepositoryRoot = () => {
     return links ? links.map(({ url, label }) => <JumpToFileButton tooltip={label} link={url} />) : null;
   };
 
-  const repositoryFlags = [];
-  if (repository.archived) {
-    repositoryFlags.push(<RepositoryFlag title={t("archive.tooltip")}>{t("repository.archived")}</RepositoryFlag>);
-  }
-
-  if (repository.exporting) {
-    repositoryFlags.push(<RepositoryFlag title={t("exporting.tooltip")}>{t("repository.exporting")}</RepositoryFlag>);
-  }
-
-  if (repository.healthCheckFailures && repository.healthCheckFailures.length > 0) {
-    repositoryFlags.push(
-      <RepositoryFlag color="danger" title={t("healthCheckFailure.tooltip")} onClick={() => setShowHealthCheck(true)}>
-        {t("repository.healthCheckFailure")}
-      </RepositoryFlag>
-    );
-  }
-
   const titleComponent = (
     <>
       <RouteLink to={`/repos/${repository.namespace}/`} className={"has-text-dark"}>
@@ -236,13 +218,12 @@ const RepositoryRoot = () => {
         title={titleComponent}
         documentTitle={`${repository.namespace}/${repository.name}`}
         afterTitle={
-          <>
+          <div className="is-flex">
             <ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />
             <TagGroup>
-              {repositoryFlags}
-              <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
+              <RepositoryFlags repository={repository} tooltipLocation="bottom" />
             </TagGroup>
-          </>
+          </div>
         }
       >
         {modal}
@@ -286,10 +267,7 @@ const RepositoryRoot = () => {
               <Route path={`${url}/code`}>
                 <CodeOverview baseUrl={`${url}/code`} repository={repository} />
               </Route>
-              <Route
-                path={`${url}/branch/:branch`}
-                render={() => <BranchRoot repository={repository} baseUrl={`${url}/branch`} />}
-              />
+              <Route path={`${url}/branch/:branch`} render={() => <BranchRoot repository={repository} />} />
               <Route
                 path={`${url}/branches`}
                 exact={true}

scm-ui/ui-webapp/src/repos/sources/containers/SourceExtensions.tsx

@@ -34,7 +34,7 @@ const extensionPointName = "repos.sources.extensions";
 
 type Props = {
   repository: Repository;
-  baseUrl: string;
+  baseUrl?: string;
 };
 
 type Params = {