From 669cc39fa9e4841f7e8734db417b5f0af9a8dff5 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 24 Nov 2020 17:34:21 +0100
Subject: [PATCH] Add tooltip to shortlinks on repository overview

---
 .../src/repos/RepositoryEntry.tsx             | 52 ++++++++++++++++---
 .../src/repos/RepositoryEntryLink.tsx         | 16 +++++-
 scm-ui/ui-webapp/public/locales/de/repos.json |  7 +++
 scm-ui/ui-webapp/public/locales/en/repos.json |  7 +++
 4 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
index 5ad24bd763..d4ab43444e 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
@@ -27,10 +27,11 @@ import { CardColumn, DateFromNow } from "@scm-manager/ui-components";
 import RepositoryEntryLink from "./RepositoryEntryLink";
 import RepositoryAvatar from "./RepositoryAvatar";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { withTranslation, WithTranslation } from "react-i18next";
 
 type DateProp = Date | string;
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   // @VisibleForTesting
   // the baseDate is only to avoid failing snapshot tests
@@ -43,29 +44,67 @@ class RepositoryEntry extends React.Component<Props> {
   };
 
   renderBranchesLink = (repository: Repository, repositoryLink: string) => {
+    const { t } = this.props;
     if (repository._links["branches"]) {
-      return <RepositoryEntryLink icon="code-branch" to={repositoryLink + "/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/"} />;
+      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/"} />;
+      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"} />;
+      return (
+        <RepositoryEntryLink
+          icon="cog"
+          to={repositoryLink + "/settings/general"}
+          tooltip={t("repositoryRoot.tooltip.settings")}
+        />
+      );
     }
     return null;
   };
@@ -74,6 +113,7 @@ class RepositoryEntry extends React.Component<Props> {
     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} />
@@ -118,4 +158,4 @@ class RepositoryEntry extends React.Component<Props> {
   }
 }
 
-export default RepositoryEntry;
+export default withTranslation("repos")(RepositoryEntry);
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx b/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
index f52859c15e..a0adaba7a1 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
@@ -25,10 +25,12 @@ import React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import { Icon } from "@scm-manager/ui-components";
+import Tooltip from "../Tooltip";
 
 type Props = {
   to: string;
   icon: string;
+  tooltip?: string;
 };
 
 const PointerEventsLink = styled(Link)`
@@ -37,10 +39,20 @@ const PointerEventsLink = styled(Link)`
 
 class RepositoryEntryLink extends React.Component<Props> {
   render() {
-    const { to, icon } = this.props;
+    const { to, icon, tooltip } = this.props;
+
+    let content = <Icon className="fa-lg" name={icon} color="inherit" />;
+    if (tooltip) {
+      content = (
+        <Tooltip message={tooltip} location="top">
+          {content}
+        </Tooltip>
+      );
+    }
+
     return (
       <PointerEventsLink className="level-item" to={to}>
-        <Icon className="fa-lg" name={icon} color="inherit" />
+        {content}
       </PointerEventsLink>
     );
   }
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index 151c6844b5..6f658daeda 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -36,6 +36,13 @@
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell",
       "permissionsNavLink": "Berechtigungen"
+    },
+    "tooltip": {
+      "branches": "Branches",
+      "tags": "Tags",
+      "commits": "Commits",
+      "sources": "Sources",
+      "settings": "Einstellungen"
     }
   },
   "overview": {
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index 6bb4043c91..c126c3c7a1 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -36,6 +36,13 @@
       "settingsNavLink": "Settings",
       "generalNavLink": "General",
       "permissionsNavLink": "Permissions"
+    },
+    "tooltip": {
+      "branches": "Branches",
+      "tags": "Tags",
+      "commits": "Commits",
+      "sources": "Sources",
+      "settings": "Settings"
     }
   },
   "overview": {