Feature/mirror (#1683)

Add mirror command and extension points.

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Konstantin Schaper <konstantin.schaper@cloudogu.com>

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

@@ -396,10 +396,17 @@ class DiffFile extends React.Component<Props, State> {
     if (key === value) {
       value = file.type;
     }
-    const color =
-      value === "added" ? "success is-outlined" : value === "deleted" ? "danger is-outlined" : "info is-outlined";
 
-    return <ChangeTypeTag className={classNames("is-rounded", "has-text-weight-normal")} color={color} label={value} />;
+    const color = value === "added" ? "success" : value === "deleted" ? "danger" : "info";
+    return (
+      <ChangeTypeTag
+        className={classNames("has-text-weight-normal")}
+        rounded={true}
+        outlined={true}
+        color={color}
+        label={value}
+      />
+    );
   };
 
   hasContent = (file: FileDiff) => file && !file.isBinary && file.hunks && file.hunks.length > 0;

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

@@ -33,6 +33,8 @@ 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";
 
 const baseDate = "2020-03-26T12:13:42+02:00";
 
@@ -48,6 +50,14 @@ const bindAvatar = (binder: Binder, avatar: string) => {
   });
 };
 
+const bindFlag = (binder: Binder, color: Color, label: string) => {
+  binder.bind("repository.card.flags", () => (
+    <RepositoryFlag title={label} color={color}>
+      {label}
+    </RepositoryFlag>
+  ));
+};
+
 const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
   binder.bind("repository.card.beforeTitle", () => {
     return extension;
@@ -76,6 +86,17 @@ const QuickLink = (
 
 const archivedRepository = { ...repository, archived: true };
 const exportingRepository = { ...repository, exporting: true };
+const healthCheckFailedRepository = {
+  ...repository,
+  healthCheckFailures: [
+    {
+      id: "4211",
+      summary: "Something failed",
+      description: "Something realy bad happend",
+      url: "https://something-realy-bad.happend"
+    }
+  ]
+};
 const archivedExportingRepository = { ...repository, archived: true, exporting: true };
 
 storiesOf("RepositoryEntry", module)
@@ -109,6 +130,18 @@ storiesOf("RepositoryEntry", module)
     bindAvatar(binder, Git);
     return withBinder(binder, exportingRepository);
   })
+  .add("HealthCheck Failure", () => {
+    const binder = new Binder("title");
+    bindAvatar(binder, Git);
+    return withBinder(binder, healthCheckFailedRepository);
+  })
+  .add("RepositoryFlag EP", () => {
+    const binder = new Binder("title");
+    bindAvatar(binder, Git);
+    bindFlag(binder, "success", "awesome");
+    bindFlag(binder, "warning", "ouhhh...");
+    return withBinder(binder, healthCheckFailedRepository);
+  })
   .add("MultiRepositoryTags", () => {
     const binder = new Binder("title");
     bindAvatar(binder, Git);

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

@@ -30,6 +30,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { withTranslation, WithTranslation } from "react-i18next";
 import styled from "styled-components";
 import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
+import RepositoryFlag from "./RepositoryFlag";
 
 type DateProp = Date | string;
 
@@ -44,37 +45,23 @@ type State = {
   showHealthCheck: boolean;
 };
 
-const RepositoryTag = styled.span`
-  margin-left: 0.2rem;
-  background-color: #9a9a9a;
-  padding: 0.25rem;
-  border-radius: 5px;
-  color: white;
-  overflow: visible;
-  pointer-events: all;
-  font-weight: bold;
-  font-size: 0.7rem;
-`;
-const RepositoryWarnTag = styled.span`
-  margin-left: 0.2rem;
-  background-color: #f14668;
-  padding: 0.25rem;
-  border-radius: 5px;
-  color: white;
-  overflow: visible;
-  pointer-events: all;
-  font-weight: bold;
-  font-size: 0.7rem;
-  cursor: help;
+const Title = styled.span`
+  display: flex;
+  align-items: center;
+
+  & > * {
+    margin-right: 0.25rem;
+  }
 `;
 
 class RepositoryEntry extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      showHealthCheck: false
+      showHealthCheck: false,
     };
   }
+
   createLink = (repository: Repository) => {
     return `/repo/${repository.namespace}/${repository.name}`;
   };
@@ -170,31 +157,33 @@ class RepositoryEntry extends React.Component<Props, State> {
     const { repository, t } = this.props;
     const repositoryFlags = [];
     if (repository.archived) {
-      repositoryFlags.push(<RepositoryTag title={t("archive.tooltip")}>{t("repository.archived")}</RepositoryTag>);
+      repositoryFlags.push(<RepositoryFlag title={t("archive.tooltip")}>{t("repository.archived")}</RepositoryFlag>);
     }
 
     if (repository.exporting) {
-      repositoryFlags.push(<RepositoryTag title={t("exporting.tooltip")}>{t("repository.exporting")}</RepositoryTag>);
+      repositoryFlags.push(<RepositoryFlag title={t("exporting.tooltip")}>{t("repository.exporting")}</RepositoryFlag>);
     }
 
     if (repository.healthCheckFailures && repository.healthCheckFailures.length > 0) {
       repositoryFlags.push(
-        <RepositoryWarnTag
+        <RepositoryFlag
+          color="danger"
           title={t("healthCheckFailure.tooltip")}
           onClick={() => {
             this.setState({ showHealthCheck: true });
           }}
         >
           {t("repository.healthCheckFailure")}
-        </RepositoryWarnTag>
+        </RepositoryFlag>
       );
     }
 
     return (
-      <>
+      <Title>
         <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} />
-        <strong>{repository.name}</strong> {repositoryFlags.map(flag => flag)}
-      </>
+        <strong>{repository.name}</strong> {repositoryFlags}
+        <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
+      </Title>
     );
   };
 

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

@@ -0,0 +1,42 @@
+/*
+ * 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 } from "react";
+import Tag from "../Tag";
+import { Color, Size } from "../styleConstants";
+
+type Props = {
+  color?: Color;
+  title?: string;
+  onClick?: () => void;
+  size?: Size;
+};
+
+const RepositoryFlag: FC<Props> = ({ children, size = "small", ...props }) => (
+  <Tag size={size} {...props}>
+    {children}
+  </Tag>
+);
+
+export default RepositoryFlag;

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

@@ -29,10 +29,11 @@ import {
   AnnotationFactory,
   AnnotationFactoryContext,
   DiffEventHandler,
-  DiffEventContext
+  DiffEventContext,
 } from "./DiffTypes";
 
 import { FileDiff as File, FileChangeType, Hunk, Change, ChangeType } from "@scm-manager/ui-types";
+
 export { diffs };
 
 export * from "./annotate";
@@ -46,6 +47,7 @@ export { default as LoadingDiff } from "./LoadingDiff";
 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";
@@ -61,5 +63,5 @@ export {
   AnnotationFactory,
   AnnotationFactoryContext,
   DiffEventHandler,
-  DiffEventContext
+  DiffEventContext,
 };