From 87f3d78148de427f9527cbf03bd4a90f3a19b001 Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Mon, 10 Aug 2020 11:50:56 +0200
Subject: [PATCH] adjust displayed links depending on type of change

---
 .../ui-components/src/repos/Diff.stories.tsx  | 24 +++++-----
 scm-ui/ui-components/src/repos/Diff.tsx       |  3 +-
 scm-ui/ui-components/src/repos/DiffFile.tsx   | 44 ++++++++++++++-----
 .../src/repos/JumpToFileButton.tsx            |  5 +--
 .../ui-components/src/repos/LoadingDiff.tsx   |  3 +-
 .../src/repos/changesets/ChangesetDiff.tsx    |  2 +-
 scm-ui/ui-webapp/public/locales/de/repos.json |  3 +-
 scm-ui/ui-webapp/public/locales/en/repos.json |  3 +-
 8 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/scm-ui/ui-components/src/repos/Diff.stories.tsx b/scm-ui/ui-components/src/repos/Diff.stories.tsx
index e221d5ccd8..1f347872ad 100644
--- a/scm-ui/ui-components/src/repos/Diff.stories.tsx
+++ b/scm-ui/ui-components/src/repos/Diff.stories.tsx
@@ -35,6 +35,7 @@ import { getPath } from "./diffs";
 import DiffButton from "./DiffButton";
 import styled from "styled-components";
 import { MemoryRouter } from "react-router-dom";
+import {one} from "../__resources__/changesets";
 
 const diffFiles = parser.parse(simpleDiff);
 
@@ -47,12 +48,13 @@ const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntrie
 storiesOf("Diff", module)
   .addDecorator(RoutingDecorator)
   .addDecorator(storyFn => <Container>{storyFn()}</Container>)
-  .add("Default", () => <Diff diff={diffFiles} />)
-  .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} />)
-  .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} />)
+  .add("Default", () => <Diff diff={diffFiles} changeset={one} />)
+  .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} changeset={one} />)
+  .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} changeset={one} />)
   .add("File Controls", () => (
     <Diff
       diff={diffFiles}
+      changeset={one}
       fileControlFactory={() => (
         <DiffButton
           tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
@@ -65,12 +67,14 @@ storiesOf("Diff", module)
   .add("File Annotation", () => (
     <Diff
       diff={diffFiles}
+      changeset={one}
       fileAnnotationFactory={file => [<p key={file.newPath}>Custom File annotation for {file.newPath}</p>]}
     />
   ))
   .add("Line Annotation", () => (
     <Diff
       diff={diffFiles}
+      changeset={one}
       annotationFactory={ctx => {
         return {
           N2: <p key="N2">Line Annotation</p>
@@ -90,7 +94,7 @@ storiesOf("Diff", module)
       return (
         <>
           {changeId && <Toast type="info" title={"Change " + changeId} />}
-          <Diff diff={diffFiles} onClick={onClick} />
+          <Diff diff={diffFiles} changeset={one} onClick={onClick} />
         </>
       );
     };
@@ -98,11 +102,11 @@ storiesOf("Diff", module)
   })
   .add("Hunks", () => {
     const hunkDiffFiles = parser.parse(hunksDiff);
-    return <Diff diff={hunkDiffFiles} />;
+    return <Diff diff={hunkDiffFiles} changeset={one} />;
   })
   .add("Binaries", () => {
     const binaryDiffFiles = parser.parse(binaryDiff);
-    return <Diff diff={binaryDiffFiles} />;
+    return <Diff diff={binaryDiffFiles} changeset={one} />;
   })
   .add("SyntaxHighlighting", () => {
     const filesWithLanguage = diffFiles.map((file: File) => {
@@ -114,22 +118,22 @@ storiesOf("Diff", module)
       }
       return file;
     });
-    return <Diff diff={filesWithLanguage} />;
+    return <Diff diff={filesWithLanguage} changeset={one} />;
   })
   .add("CollapsingWithFunction", () => (
-    <Diff diff={diffFiles} defaultCollapse={(oldPath, newPath) => oldPath.endsWith(".java")} />
+    <Diff diff={diffFiles} changeset={one} defaultCollapse={(oldPath, newPath) => oldPath.endsWith(".java")} />
   ))
   .add("Expandable", () => {
     const filesWithLanguage = diffFiles.map((file: File) => {
       file._links = { lines: { href: "http://example.com/" } };
       return file;
     });
-    return <Diff diff={filesWithLanguage} />;
+    return <Diff diff={filesWithLanguage} changeset={one} />;
   })
   .add("WithLinkToFile", () => (
     <Diff
       diff={diffFiles}
-      changesetId="0b92307029a2a171e3b467a1502f392c733e3e8f"
+      changeset={one}
       baseUrl="/repo/hitchhiker/heartOfGold/code/changeset"
     />
   ));
diff --git a/scm-ui/ui-components/src/repos/Diff.tsx b/scm-ui/ui-components/src/repos/Diff.tsx
index f666174476..8978c61d72 100644
--- a/scm-ui/ui-components/src/repos/Diff.tsx
+++ b/scm-ui/ui-components/src/repos/Diff.tsx
@@ -26,11 +26,12 @@ import DiffFile from "./DiffFile";
 import { DiffObjectProps, File } from "./DiffTypes";
 import Notification from "../Notification";
 import { WithTranslation, withTranslation } from "react-i18next";
+import {Changeset} from "@scm-manager/ui-types";
 
 type Props = WithTranslation &
   DiffObjectProps & {
     diff: File[];
-    changesetId?: string;
+    changeset: Changeset;
     baseUrl?: string;
   };
 
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index acf3bff822..dc5070ddd3 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -40,13 +40,14 @@ import { Modal } from "../modals";
 import ErrorNotification from "../ErrorNotification";
 import HunkExpandDivider from "./HunkExpandDivider";
 import JumpToFileButton from "./JumpToFileButton";
+import {Changeset} from "@scm-manager/ui-types";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
 type Props = DiffObjectProps &
   WithTranslation & {
     file: File;
-    changesetId?: string;
+    changeset: Changeset;
     baseUrl?: string;
   };
 
@@ -394,7 +395,7 @@ class DiffFile extends React.Component<Props, State> {
   hasContent = (file: File) => file && !file.isBinary && file.hunks && file.hunks.length > 0;
 
   render() {
-    const { fileControlFactory, fileAnnotationFactory, changesetId, baseUrl, t } = this.props;
+    const { fileControlFactory, fileAnnotationFactory, changeset: { id: changesetId, _embedded: { parents } }, baseUrl, t } = this.props;
     const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
@@ -418,14 +419,29 @@ class DiffFile extends React.Component<Props, State> {
     }
     const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
-    const jumpToFile =
-      changesetId && baseUrl ? (
-        <JumpToFileButton
-          link={`${baseUrl.substr(0, baseUrl.lastIndexOf("/"))}/sources/${changesetId}/${
-            file.type !== "delete" ? file.newPath : file.oldPath.substr(0, file.oldPath.lastIndexOf("/"))
-          }/`}
-        />
-      ) : null;
+    let jumpToSource = null;
+    let jumpToTarget = null;
+    if (changesetId && baseUrl) {
+      const jumpToSourceButton = <JumpToFileButton
+        tooltip={this.props.t("diff.jumpToSource")}
+        link={`${baseUrl.substr(0, baseUrl.lastIndexOf("/"))}/sources/${changesetId}/${file.newPath}/`}
+      />;
+      const jumpToTargetButton = parents?.length === 1 && <JumpToFileButton
+        tooltip={this.props.t("diff.jumpToTarget")}
+        link={`${baseUrl.substr(0, baseUrl.lastIndexOf("/"))}/sources/${parents[0].id}/${file.oldPath}/`}
+      />;
+      switch (file.type) {
+        case "add":
+          jumpToSource = jumpToSourceButton;
+          break;
+        case "delete":
+          jumpToTarget = jumpToTargetButton;
+          break;
+        default:
+          jumpToSource = jumpToSourceButton;
+          jumpToTarget = jumpToTargetButton;
+      }
+    }
     const sideBySideToggle =
       file.hunks && file.hunks.length > 0 ? (
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
@@ -446,12 +462,16 @@ class DiffFile extends React.Component<Props, State> {
               )}
             </MenuContext.Consumer>
             {fileControls}
-            {jumpToFile}
+            {jumpToSource}
+            {jumpToTarget}
           </ButtonGroup>
         </ButtonWrapper>
       ) : (
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
-          <ButtonGroup>{jumpToFile}</ButtonGroup>
+          <ButtonGroup>
+            {jumpToSource}
+            {jumpToTarget}
+          </ButtonGroup>
         </ButtonWrapper>
       );
 
diff --git a/scm-ui/ui-components/src/repos/JumpToFileButton.tsx b/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
index 6acd91a7a3..59052af3df 100644
--- a/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
+++ b/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
@@ -38,11 +38,10 @@ const Button = styled(Link)`
 
 type Props = {
   link: string;
+  tooltip: string;
 };
 
-const JumpToFileButton: FC<Props> = ({ link }) => {
-  const [t] = useTranslation("repos");
-  const tooltip = t("diff.jumpToFile");
+const JumpToFileButton: FC<Props> = ({ link, tooltip }) => {
   return (
     <Tooltip message={tooltip} location="top">
       <Button aria-label={tooltip} className="button" to={link}>
diff --git a/scm-ui/ui-components/src/repos/LoadingDiff.tsx b/scm-ui/ui-components/src/repos/LoadingDiff.tsx
index 57c6ea71db..5086977ff4 100644
--- a/scm-ui/ui-components/src/repos/LoadingDiff.tsx
+++ b/scm-ui/ui-components/src/repos/LoadingDiff.tsx
@@ -33,11 +33,12 @@ import { DiffObjectProps, File } from "./DiffTypes";
 import { NotFoundError } from "../errors";
 import { Notification } from "../index";
 import { withTranslation, WithTranslation } from "react-i18next";
+import {Changeset} from "@scm-manager/ui-types";
 
 type Props = WithTranslation &
   DiffObjectProps & {
     url: string;
-    changesetId?: string;
+    changeset: Changeset;
     baseUrl: string;
   };
 
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
index 917b34061c..ccbbc521ae 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
@@ -53,7 +53,7 @@ class ChangesetDiff extends React.Component<Props> {
       return <Notification type="danger">{t("changeset.diffNotSupported")}</Notification>;
     } else {
       const url = createUrl(changeset);
-      return <LoadingDiff url={url} defaultCollapse={defaultCollapse} sideBySide={false} changesetId={changeset.id} baseUrl={baseUrl} />;
+      return <LoadingDiff url={url} defaultCollapse={defaultCollapse} sideBySide={false} changeset={changeset} baseUrl={baseUrl} />;
     }
   }
 }
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index e5bb731596..078ec13c65 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -223,7 +223,8 @@
     }
   },
   "diff": {
-    "jumpToFile": "Zur Datei springen",
+    "jumpToSource": "Zur Quelldatei springen",
+    "jumpToTarget": "Zur Zieldatei springen",
     "sideBySide": "Zur zweispaltigen Ansicht wechseln",
     "combined": "Zur kombinierten Ansicht wechseln",
     "noDiffFound": "Kein Diff zwischen den ausgewählten Branches gefunden.",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index 857264d07b..121c82e806 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -230,7 +230,8 @@
       "rename": "renamed",
       "copy": "copied"
     },
-    "jumpToFile": "Jump to file",
+    "jumpToSource": "Jump to source file",
+    "jumpToTarget": "Jump to target file",
     "sideBySide": "Switch to side-by-side view",
     "combined": "Switch to combined view",
     "noDiffFound": "No Diff between the selected branches found.",