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>

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 ContentRightContainer = styled.div`
+  height: calc(80px - 1.5rem);
+  margin-right: 1rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const DateWrapper = styled.small`
+  padding-bottom: 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;
+  }
+`;
+
+const Name = styled.strong`
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: visible;
+  white-space: nowrap;
+`;
+
+const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
+  const [t] = useTranslation("repos");
+  const [openCloneModal, setOpenCloneModal] = useState(false);
+
+  const createContentRight = () => (
+    <ContentRightContainer>
+      <Modal
+        size="L"
+        active={openCloneModal}
+        title={t("overview.clone")}
+        body={
+          <ExtensionPoint
+            name="repos.repository-details.information"
+            renderAll={true}
+            props={{
+              repository,
+            }}
+          />
+        }
+        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 (
+    <>
+      <GroupEntry
+        avatar={<RepositoryAvatar repository={repository} size={48} />}
+        name={name}
+        description={repository.description}
+        contentRight={actions}
+        link={repositoryLink}
+      />
+    </>
+  );
 };
 
-const Title = styled.span`
-  display: flex;
-  align-items: center;
-`;
-
-const RepositoryFlagContainer = styled.div`
-  /*pointer-events: all;*/
-
-  .tag {
-    margin-left: 0.25rem;
-  }
-`;
-
-class RepositoryEntry extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      showHealthCheck: false,
-    };
-  }
-
-  createLink = (repository: Repository) => {
-    return `/repo/${repository.namespace}/${repository.name}`;
-  };
-
-  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 });
-          }}
-        >
-          {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}
-      />
-    );
-
-    return (
-      <>
-        {modal}
-        <CardColumn
-          avatar={<RepositoryAvatar repository={repository} />}
-          title={title}
-          description={repository.description}
-          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,