From 4ed6a40cde1d9f35d4cbbafe787c17af0a0c0ebb Mon Sep 17 00:00:00 2001
From: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
Date: Thu, 11 Nov 2021 14:50:11 +0100
Subject: [PATCH] Add contact icon to repository overview (#1855)

Show repository contact on repository overview with "mail to" action if contact is set. Click on this icon to send a mail to the contact.
---
 gradle/changelog/repo_overview_contact.yaml   |   2 +
 .../src/__snapshots__/storyshots.test.ts.snap | 171 +++++++++++++++---
 .../src/repos/RepositoryEntry.tsx             |  38 +++-
 scm-ui/ui-webapp/public/locales/de/repos.json |   3 +-
 scm-ui/ui-webapp/public/locales/en/repos.json |   3 +-
 5 files changed, 185 insertions(+), 32 deletions(-)
 create mode 100644 gradle/changelog/repo_overview_contact.yaml

diff --git a/gradle/changelog/repo_overview_contact.yaml b/gradle/changelog/repo_overview_contact.yaml
new file mode 100644
index 0000000000..e7da31e004
--- /dev/null
+++ b/gradle/changelog/repo_overview_contact.yaml
@@ -0,0 +1,2 @@
+- type: added
+  description: Add contact icon to repository overview ([#1855](https://github.com/scm-manager/scm-manager/pull/1855))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 9a7baae1ad..d940101f3e 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -73639,7 +73639,7 @@ exports[`Storyshots Repositories/RepositoryEntry Archived 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -73678,11 +73678,24 @@ exports[`Storyshots Repositories/RepositoryEntry Archived 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -73746,7 +73759,7 @@ exports[`Storyshots Repositories/RepositoryEntry Avatar EP 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -73774,11 +73787,24 @@ exports[`Storyshots Repositories/RepositoryEntry Avatar EP 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -73845,7 +73871,7 @@ exports[`Storyshots Repositories/RepositoryEntry Before Title EP 1`] = `
                 className="far fa-star"
               />
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -73873,11 +73899,24 @@ exports[`Storyshots Repositories/RepositoryEntry Before Title EP 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -73941,7 +73980,7 @@ exports[`Storyshots Repositories/RepositoryEntry Default 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -73969,11 +74008,24 @@ exports[`Storyshots Repositories/RepositoryEntry Default 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -74037,7 +74089,7 @@ exports[`Storyshots Repositories/RepositoryEntry Exporting 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -74076,11 +74128,24 @@ exports[`Storyshots Repositories/RepositoryEntry Exporting 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -74144,7 +74209,7 @@ exports[`Storyshots Repositories/RepositoryEntry HealthCheck Failure 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -74184,11 +74249,24 @@ exports[`Storyshots Repositories/RepositoryEntry HealthCheck Failure 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -74252,7 +74330,7 @@ exports[`Storyshots Repositories/RepositoryEntry MultiRepositoryTags 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -74301,11 +74379,24 @@ exports[`Storyshots Repositories/RepositoryEntry MultiRepositoryTags 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -74369,7 +74460,7 @@ exports[`Storyshots Repositories/RepositoryEntry RepositoryFlag EP 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 heartOfGold
               </strong>
@@ -74409,11 +74500,24 @@ exports[`Storyshots Repositories/RepositoryEntry RepositoryFlag EP 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
@@ -74477,7 +74581,7 @@ exports[`Storyshots Repositories/RepositoryEntry With long texts 1`] = `
               className="is-flex"
             >
               <strong
-                className="RepositoryEntry__Name-sc-6jys82-2 gIldrI"
+                className="RepositoryEntry__Name-sc-6jys82-4 flPsOa"
               >
                 veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-loooooooooooooooooooooooooooooooooooooooooooooooooooong-repooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame
               </strong>
@@ -74505,11 +74609,24 @@ exports[`Storyshots Repositories/RepositoryEntry With long texts 1`] = `
           className="RepositoryEntry__ContentRightContainer-sc-6jys82-0 wkQgn is-flex is-flex-direction-column is-justify-content-space-between is-relative mr-4"
         >
           <span
-            className="is-flex is-justify-content-flex-end is-align-items-flex-end"
+            className="is-flex is-justify-content-flex-end is-align-items-center"
           >
+            <a
+              className="RepositoryEntry__ContactActionWrapper-sc-6jys82-3 kIKRYU is-size-5"
+              href="mailto:heart-of-gold@hitchhiker.com"
+              tabIndex={1}
+              target="_blank"
+              title="overview.contact"
+            >
+              <i
+                className="fas fa-fw fa-envelope has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable"
+                onKeyPress={[Function]}
+                tabIndex={-1}
+              />
+            </a>
             <i
               aria-label="overview.clone"
-              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 khGtCz is-clickable is-size-5"
+              className="fas fa-fw fa-download has-text-info RepositoryEntry__QuickAction-sc-6jys82-1 jDQqzI is-clickable is-size-5"
               onClick={[Function]}
               onKeyPress={[Function]}
               tabIndex={-1}
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
index fbc96ca6cb..dc00271a9c 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
@@ -25,13 +25,14 @@ import React, { FC, useState } from "react";
 import { Repository } from "@scm-manager/ui-types";
 import { DateFromNow, Modal } from "@scm-manager/ui-components";
 import RepositoryAvatar from "./RepositoryAvatar";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import GroupEntry from "../layout/GroupEntry";
 import RepositoryFlags from "./RepositoryFlags";
 import styled from "styled-components";
 import Icon from "../Icon";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
+import { EXTENSION_POINT } from "../avatar/Avatar";
 
 type DateProp = Date | string;
 
@@ -47,11 +48,22 @@ const ContentRightContainer = styled.div`
 `;
 
 const QuickAction = styled(Icon)`
+  margin-top: 0.2rem;
   :hover {
     color: #363636 !important;
   }
 `;
 
+const ContactAvatar = styled.img`
+  max-width: 20px;
+`;
+
+const ContactActionWrapper = styled.a`
+  height: 20px;
+  width: 20px;
+  padding-right: 2rem;
+`;
+
 const Name = styled.strong`
   text-overflow: ellipsis;
   overflow-x: hidden;
@@ -63,6 +75,15 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
   const [t] = useTranslation("repos");
   const [openCloneModal, setOpenCloneModal] = useState(false);
 
+  const avatarFactory = binder.getExtension(EXTENSION_POINT);
+
+  const renderContactIcon = () => {
+    if (avatarFactory) {
+      return <ContactAvatar src={avatarFactory({ mail: repository.contact })} alt={repository.contact} />;
+    }
+    return <QuickAction className={classNames("is-clickable")} name="envelope" color="info" />;
+  };
+
   const createContentRight = () => (
     <ContentRightContainer
       className={classNames(
@@ -83,14 +104,25 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
               name="repos.repository-details.information"
               renderAll={true}
               props={{
-                repository,
+                repository
               }}
             />
           }
           closeFunction={() => setOpenCloneModal(false)}
         />
       )}
-      <span className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-flex-end")}>
+      <span className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
+        {repository.contact ? (
+          <ContactActionWrapper
+            href={`mailto:${repository.contact}`}
+            target="_blank"
+            className={"is-size-5"}
+            title={t("overview.contact", { contact: repository.contact })}
+            tabIndex={1}
+          >
+            {renderContactIcon()}
+          </ContactActionWrapper>
+        ) : null}
         <QuickAction
           className={classNames("is-clickable", "is-size-5")}
           name="download"
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index e6dd3a61a0..5309d837c0 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -61,7 +61,8 @@
     "createButton": "Repository hinzufügen",
     "filterRepositories": "Repositories filtern",
     "allNamespaces": "Alle Namespaces",
-    "clone": "Clone/Checkout"
+    "clone": "Clone/Checkout",
+    "contact": "E-Mail senden an {{contact}}"
   },
   "create": {
     "title": "Repository hinzufügen",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index 6bda878620..f31fe89ab0 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -61,7 +61,8 @@
     "createButton": "Add Repository",
     "filterRepositories": "Filter repositories",
     "allNamespaces": "All namespaces",
-    "clone": "Clone/Checkout"
+    "clone": "Clone/Checkout",
+    "contact": "Send mail to {{contact}}"
   },
   "create": {
     "title": "Add Repository",