refactor to use file control factory

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

@@ -29,13 +29,15 @@ import parser from "gitdiff-parser";
 import simpleDiff from "../__resources__/Diff.simple";
 import hunksDiff from "../__resources__/Diff.hunks";
 import binaryDiff from "../__resources__/Diff.binary";
-import { DiffEventContext, File } from "./DiffTypes";
+import {DiffEventContext, File, FileControlFactory} from "./DiffTypes";
 import Toast from "../toast/Toast";
 import { getPath } from "./diffs";
 import DiffButton from "./DiffButton";
 import styled from "styled-components";
 import { MemoryRouter } from "react-router-dom";
-import {one} from "../__resources__/changesets";
+import {one, two} from "../__resources__/changesets";
+import {Changeset} from "@scm-manager/ui-types";
+import JumpToFileButton from "./JumpToFileButton";
 
 const diffFiles = parser.parse(simpleDiff);
 
@@ -45,16 +47,50 @@ const Container = styled.div`
 
 const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
 
+const fileControlFactory: (changeset: Changeset) => FileControlFactory = (changeset) => (file) => {
+  const baseUrl = "/repo/hitchhiker/heartOfGold/code/changeset";
+  const sourceLink = {
+    url: `${baseUrl}/${changeset.id}/${file.newPath}/`,
+    label: "Jump to source"
+  };
+  const targetLink = changeset._embedded?.parents?.length === 1 && {
+    url: `${baseUrl}/${changeset._embedded.parents[0].id}/${file.oldPath}`,
+    label: "Jump to target"
+  };
+
+  const links = [];
+  switch (file.type) {
+    case "add":
+      links.push(sourceLink);
+      break;
+    case "delete":
+      if (targetLink) {
+        links.push(targetLink);
+      }
+      break;
+    default:
+      if (targetLink) {
+        links.push(sourceLink, targetLink);
+      } else {
+        links.push(sourceLink);
+      }
+  }
+
+  return links.map(({url, label}) => <JumpToFileButton
+    tooltip={label}
+    link={url}
+  />);
+};
+
 storiesOf("Diff", module)
   .addDecorator(RoutingDecorator)
   .addDecorator(storyFn => <Container>{storyFn()}</Container>)
-  .add("Default", () => <Diff diff={diffFiles} changeset={one} />)
+  .add("Default", () => <Diff diff={diffFiles} />)
-  .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} changeset={one} />)
+  .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} />)
-  .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} changeset={one} />)
+  .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} fileControlFactory={fileControlFactory(two)} />)
   .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."
@@ -67,14 +103,12 @@ 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>
@@ -94,7 +128,7 @@ storiesOf("Diff", module)
       return (
         <>
           {changeId && <Toast type="info" title={"Change " + changeId} />}
-          <Diff diff={diffFiles} changeset={one} onClick={onClick} />
+          <Diff diff={diffFiles} onClick={onClick} />
         </>
       );
     };
@@ -102,11 +136,11 @@ storiesOf("Diff", module)
   })
   .add("Hunks", () => {
     const hunkDiffFiles = parser.parse(hunksDiff);
-    return <Diff diff={hunkDiffFiles} changeset={one} />;
+    return <Diff diff={hunkDiffFiles} />;
   })
   .add("Binaries", () => {
     const binaryDiffFiles = parser.parse(binaryDiff);
-    return <Diff diff={binaryDiffFiles} changeset={one} />;
+    return <Diff diff={binaryDiffFiles} />;
   })
   .add("SyntaxHighlighting", () => {
     const filesWithLanguage = diffFiles.map((file: File) => {
@@ -118,22 +152,20 @@ storiesOf("Diff", module)
       }
       return file;
     });
-    return <Diff diff={filesWithLanguage} changeset={one} />;
+    return <Diff diff={filesWithLanguage} />;
   })
   .add("CollapsingWithFunction", () => (
-    <Diff diff={diffFiles} changeset={one} defaultCollapse={(oldPath, newPath) => oldPath.endsWith(".java")} />
+    <Diff diff={diffFiles} 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} changeset={one} />;
+    return <Diff diff={filesWithLanguage} />;
   })
   .add("WithLinkToFile", () => (
     <Diff
       diff={diffFiles}
-      changeset={one}
-      baseUrl="/repo/hitchhiker/heartOfGold/code/changeset"
     />
   ));

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

@@ -23,17 +23,15 @@
  */
 import React from "react";
 import DiffFile from "./DiffFile";
-import { DiffObjectProps, File } from "./DiffTypes";
+import {DiffObjectProps, File, FileControlFactory} from "./DiffTypes";
 import Notification from "../Notification";
-import { WithTranslation, withTranslation } from "react-i18next";
+import {WithTranslation, withTranslation} from "react-i18next";
-import {Changeset} from "@scm-manager/ui-types";
 
 type Props = WithTranslation &
   DiffObjectProps & {
   diff: File[];
-    changeset: Changeset;
+  fileControlFactory?: FileControlFactory;
-    baseUrl?: string;
+};
-  };
 
 class Diff extends React.Component<Props> {
   static defaultProps: Partial<Props> = {
@@ -41,7 +39,7 @@ class Diff extends React.Component<Props> {
   };
 
   render() {
-    const { diff, t, ...fileProps } = this.props;
+    const {diff, t, ...fileProps} = this.props;
     return (
       <>
         {diff.length === 0 ? (

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

@@ -22,34 +22,30 @@
  * SOFTWARE.
  */
 import React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
+import {withTranslation, WithTranslation} from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
-import { Decoration, getChangeKey, Hunk } from "react-diff-view";
+import {Decoration, getChangeKey, Hunk} from "react-diff-view";
-import { ButtonGroup } from "../buttons";
+import {ButtonGroup} from "../buttons";
 import Tag from "../Tag";
 import Icon from "../Icon";
-import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
+import {Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType} from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
-import { MenuContext } from "@scm-manager/ui-components";
+import {MenuContext} from "@scm-manager/ui-components";
-import DiffExpander, { ExpandableHunk } from "./DiffExpander";
+import DiffExpander, {ExpandableHunk} from "./DiffExpander";
 import HunkExpandLink from "./HunkExpandLink";
-import { Modal } from "../modals";
+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;
-    changeset: Changeset;
+};
-    baseUrl?: string;
-  };
 
 type Collapsible = {
   collapsed?: boolean;
@@ -119,7 +115,7 @@ class DiffFile extends React.Component<Props, State> {
   }
 
   defaultCollapse: () => boolean = () => {
-    const { defaultCollapse, file } = this.props;
+    const {defaultCollapse, file} = this.props;
     if (typeof defaultCollapse === "boolean") {
       return defaultCollapse;
     } else if (typeof defaultCollapse === "function") {
@@ -130,7 +126,7 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   toggleCollapse = () => {
-    const { file } = this.state;
+    const {file} = this.state;
     if (this.hasContent(file)) {
       this.setState(state => ({
         collapsed: !state.collapsed
@@ -161,7 +157,7 @@ class DiffFile extends React.Component<Props, State> {
             <HunkExpandLink
               icon={"fa-angle-double-up"}
               onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
-              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
+              text={this.props.t("diff.expandComplete", {count: expandableHunk.maxExpandHeadRange})}
             />
           </HunkExpandDivider>
         );
@@ -171,19 +167,19 @@ class DiffFile extends React.Component<Props, State> {
             <HunkExpandLink
               icon={"fa-angle-up"}
               onClick={this.expandHead(expandableHunk, 10)}
-              text={this.props.t("diff.expandByLines", { count: 10 })}
+              text={this.props.t("diff.expandByLines", {count: 10})}
             />{" "}
             <HunkExpandLink
               icon={"fa-angle-double-up"}
               onClick={this.expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
-              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
+              text={this.props.t("diff.expandComplete", {count: expandableHunk.maxExpandHeadRange})}
             />
           </HunkExpandDivider>
         );
       }
     }
     // hunk header must be defined
-    return <span />;
+    return <span/>;
   };
 
   createHunkFooter = (expandableHunk: ExpandableHunk) => {
@@ -194,7 +190,7 @@ class DiffFile extends React.Component<Props, State> {
             <HunkExpandLink
               icon={"fa-angle-double-down"}
               onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
-              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
+              text={this.props.t("diff.expandComplete", {count: expandableHunk.maxExpandBottomRange})}
             />
           </HunkExpandDivider>
         );
@@ -204,19 +200,19 @@ class DiffFile extends React.Component<Props, State> {
             <HunkExpandLink
               icon={"fa-angle-down"}
               onClick={this.expandBottom(expandableHunk, 10)}
-              text={this.props.t("diff.expandByLines", { count: 10 })}
+              text={this.props.t("diff.expandByLines", {count: 10})}
             />{" "}
             <HunkExpandLink
               icon={"fa-angle-double-down"}
               onClick={this.expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
-              text={this.props.t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
+              text={this.props.t("diff.expandComplete", {count: expandableHunk.maxExpandBottomRange})}
             />
           </HunkExpandDivider>
         );
       }
     }
     // hunk footer must be defined
-    return <span />;
+    return <span/>;
   };
 
   createLastHunkFooter = (expandableHunk: ExpandableHunk) => {
@@ -226,7 +222,7 @@ class DiffFile extends React.Component<Props, State> {
           <HunkExpandLink
             icon={"fa-angle-down"}
             onClick={this.expandBottom(expandableHunk, 10)}
-            text={this.props.t("diff.expandLastBottomByLines", { count: 10 })}
+            text={this.props.t("diff.expandLastBottomByLines", {count: 10})}
           />{" "}
           <HunkExpandLink
             icon={"fa-angle-double-down"}
@@ -237,7 +233,7 @@ class DiffFile extends React.Component<Props, State> {
       );
     }
     // hunk header must be defined
-    return <span />;
+    return <span/>;
   };
 
   expandHead = (expandableHunk: ExpandableHunk, count: number) => {
@@ -259,16 +255,16 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   diffExpanded = (newFile: File) => {
-    this.setState({ file: newFile, diffExpander: new DiffExpander(newFile) });
+    this.setState({file: newFile, diffExpander: new DiffExpander(newFile)});
   };
 
   diffExpansionFailed = (err: any) => {
-    this.setState({ expansionError: err });
+    this.setState({expansionError: err});
   };
 
   collectHunkAnnotations = (hunk: HunkType) => {
-    const { annotationFactory } = this.props;
+    const {annotationFactory} = this.props;
-    const { file } = this.state;
+    const {file} = this.state;
     if (annotationFactory) {
       return annotationFactory({
         hunk,
@@ -280,8 +276,8 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   handleClickEvent = (change: Change, hunk: HunkType) => {
-    const { onClick } = this.props;
+    const {onClick} = this.props;
-    const { file } = this.state;
+    const {file} = this.state;
     const context = {
       changeId: getChangeKey(change),
       change,
@@ -294,7 +290,7 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   createGutterEvents = (hunk: HunkType) => {
-    const { onClick } = this.props;
+    const {onClick} = this.props;
     if (onClick) {
       return {
         onClick: (event: ChangeEvent) => {
@@ -315,7 +311,7 @@ class DiffFile extends React.Component<Props, State> {
     } else if (i > 0) {
       items.push(
         <Decoration>
-          <HunkDivider />
+          <HunkDivider/>
         </Decoration>
       );
     }
@@ -358,7 +354,7 @@ class DiffFile extends React.Component<Props, State> {
     if (file.oldPath !== file.newPath && (file.type === "copy" || file.type === "rename")) {
       return (
         <>
-          {file.oldPath} <Icon name="arrow-right" color="inherit" /> {file.newPath}
+          {file.oldPath} <Icon name="arrow-right" color="inherit"/> {file.newPath}
         </>
       );
     } else if (file.type === "delete") {
@@ -377,7 +373,7 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   renderChangeTag = (file: File) => {
-    const { t } = this.props;
+    const {t} = this.props;
     if (!file.type) {
       return;
     }
@@ -389,14 +385,14 @@ class DiffFile extends React.Component<Props, State> {
     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} />;
+    return <ChangeTypeTag className={classNames("is-rounded", "has-text-weight-normal")} color={color} label={value}/>;
   };
 
   hasContent = (file: File) => file && !file.isBinary && file.hunks && file.hunks.length > 0;
 
   render() {
-    const { fileControlFactory, fileAnnotationFactory, changeset: { id: changesetId, _embedded: { parents } }, baseUrl, t } = this.props;
+    const {fileControlFactory, fileAnnotationFactory, t} = this.props;
-    const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state;
+    const {file, collapsed, sideBySide, diffExpander, expansionError} = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
@@ -417,37 +413,14 @@ class DiffFile extends React.Component<Props, State> {
         </div>
       );
     }
-    const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
+    const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit"/> : null;
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : 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 ? (
+      file.hunks && file.hunks.length > 0 && (
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
           <ButtonGroup>
             <MenuContext.Consumer>
-              {({ setCollapsed }) => (
+              {({setCollapsed}) => (
                 <DiffButton
                   icon={sideBySide ? "align-left" : "columns"}
                   tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
@@ -462,15 +435,6 @@ class DiffFile extends React.Component<Props, State> {
               )}
             </MenuContext.Consumer>
             {fileControls}
-            {jumpToSource}
-            {jumpToTarget}
-          </ButtonGroup>
-        </ButtonWrapper>
-      ) : (
-        <ButtonWrapper className={classNames("level-right", "is-flex")}>
-          <ButtonGroup>
-            {jumpToSource}
-            {jumpToTarget}
           </ButtonGroup>
         </ButtonWrapper>
       );
@@ -480,8 +444,8 @@ class DiffFile extends React.Component<Props, State> {
       errorModal = (
         <Modal
           title={t("diff.expansionFailed")}
-          closeFunction={() => this.setState({ expansionError: undefined })}
+          closeFunction={() => this.setState({expansionError: undefined})}
-          body={<ErrorNotification error={expansionError} />}
+          body={<ErrorNotification error={expansionError}/>}
           active={true}
         />
       );

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

@@ -22,25 +22,22 @@
  * SOFTWARE.
  */
 import React from "react";
-import { apiClient } from "../apiclient";
+import {apiClient} from "../apiclient";
 import ErrorNotification from "../ErrorNotification";
 // @ts-ignore
 import parser from "gitdiff-parser";
 
 import Loading from "../Loading";
 import Diff from "./Diff";
-import { DiffObjectProps, File } from "./DiffTypes";
+import {DiffObjectProps, File} from "./DiffTypes";
-import { NotFoundError } from "../errors";
+import {NotFoundError} from "../errors";
-import { Notification } from "../index";
+import {Notification} from "../index";
-import { withTranslation, WithTranslation } from "react-i18next";
+import {withTranslation, WithTranslation} from "react-i18next";
-import {Changeset} from "@scm-manager/ui-types";
 
 type Props = WithTranslation &
   DiffObjectProps & {
   url: string;
-    changeset: Changeset;
+};
-    baseUrl: string;
-  };
 
 type State = {
   diff?: File[];
@@ -71,8 +68,8 @@ class LoadingDiff extends React.Component<Props, State> {
   }
 
   fetchDiff = () => {
-    const { url } = this.props;
+    const {url} = this.props;
-    this.setState({ loading: true });
+    this.setState({loading: true});
     apiClient
       .get(url)
       .then(response => {
@@ -98,14 +95,14 @@ class LoadingDiff extends React.Component<Props, State> {
   };
 
   render() {
-    const { diff, loading, error } = this.state;
+    const {diff, loading, error} = this.state;
     if (error) {
       if (error instanceof NotFoundError) {
         return <Notification type="info">{this.props.t("changesets.noChangesets")}</Notification>;
       }
-      return <ErrorNotification error={error} />;
+      return <ErrorNotification error={error}/>;
     } else if (loading) {
-      return <Loading />;
+      return <Loading/>;
     } else if (!diff) {
       return null;
     } else {

scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx

@@ -22,15 +22,16 @@
  * SOFTWARE.
  */
 import React from "react";
-import { Changeset, Link, Collection } from "@scm-manager/ui-types";
+import {Changeset, Collection, Link} from "@scm-manager/ui-types";
 import LoadingDiff from "../LoadingDiff";
 import Notification from "../../Notification";
-import { WithTranslation, withTranslation } from "react-i18next";
+import {WithTranslation, withTranslation} from "react-i18next";
+import {FileControlFactory} from "../DiffTypes";
 
 type Props = WithTranslation & {
   changeset: Changeset;
-  baseUrl: string;
   defaultCollapse?: boolean;
+  fileControlFactory?: FileControlFactory;
 };
 
 export const isDiffSupported = (changeset: Collection) => {
@@ -48,12 +49,12 @@ export const createUrl = (changeset: Collection) => {
 
 class ChangesetDiff extends React.Component<Props> {
   render() {
-    const { changeset, baseUrl, defaultCollapse, t } = this.props;
+    const {changeset, fileControlFactory, defaultCollapse, t} = this.props;
     if (!isDiffSupported(changeset)) {
       return <Notification type="danger">{t("changeset.diffNotSupported")}</Notification>;
     } else {
       const url = createUrl(changeset);
-      return <LoadingDiff url={url} defaultCollapse={defaultCollapse} sideBySide={false} changeset={changeset} baseUrl={baseUrl} />;
+      return <LoadingDiff url={url} defaultCollapse={defaultCollapse} sideBySide={false} fileControlFactory={fileControlFactory}/>;
     }
   }
 }

scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx

@@ -35,6 +35,7 @@ import ChangesetAuthor from "./ChangesetAuthor";
 import ChangesetTags from "./ChangesetTags";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
 import ChangesetDescription from "./ChangesetDescription";
+import {FileControlFactory} from "../DiffTypes";
 
 type Props = WithTranslation & {
   repository: Repository;

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

@@ -45,11 +45,13 @@ export * from "./changesets";
 export { default as Diff } from "./Diff";
 export { default as DiffFile } from "./DiffFile";
 export { default as DiffButton } from "./DiffButton";
+export { FileControlFactory } from "./DiffTypes";
 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 RepositoryEntryLink } from "./RepositoryEntryLink";
+export { default as JumpToFileButton } from "./JumpToFileButton";
 
 export {
   File,

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -224,7 +224,7 @@
   },
   "diff": {
     "jumpToSource": "Zur Quelldatei springen",
-    "jumpToTarget": "Zur Zieldatei springen",
+    "jumpToTarget": "Zur vorherigen Version der Datei springen",
     "sideBySide": "Zur zweispaltigen Ansicht wechseln",
     "combined": "Zur kombinierten Ansicht wechseln",
     "noDiffFound": "Kein Diff zwischen den ausgewählten Branches gefunden.",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -231,7 +231,7 @@
       "copy": "copied"
     },
     "jumpToSource": "Jump to source file",
-    "jumpToTarget": "Jump to target file",
+    "jumpToTarget": "Jump to the previous version of the file",
     "sideBySide": "Switch to side-by-side view",
     "combined": "Switch to combined view",
     "noDiffFound": "No Diff between the selected branches found.",

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -43,11 +43,12 @@ import {
 } from "@scm-manager/ui-components";
 import ContributorTable from "./ContributorTable";
 import { Link as ReactLink } from "react-router-dom";
+import {FileControlFactory} from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   changeset: Changeset;
   repository: Repository;
-  baseUrl: string;
+  fileControlFactory?: FileControlFactory;
 };
 
 type State = {
@@ -131,6 +132,7 @@ const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
       </ContributorDetails>
     );
   }
+
   return (
     <>
       <ContributorLine onClick={e => setOpen(!open)}>
@@ -158,7 +160,7 @@ class ChangesetDetails extends React.Component<Props, State> {
   }
 
   render() {
-    const { changeset, repository, baseUrl, t } = this.props;
+    const { changeset, repository, fileControlFactory, t } = this.props;
     const { collapsed } = this.state;
 
     const description = changesets.parseDescription(changeset.description);
@@ -239,7 +241,7 @@ class ChangesetDetails extends React.Component<Props, State> {
               />
             }
           />
-          <ChangesetDiff changeset={changeset} baseUrl={baseUrl} defaultCollapse={collapsed} />
+          <ChangesetDiff changeset={changeset} fileControlFactory={fileControlFactory} defaultCollapse={collapsed} />
         </div>
       </>
     );

scm-ui/ui-webapp/src/repos/containers/ChangesetView.tsx

@@ -22,12 +22,12 @@
  * SOFTWARE.
  */
 import React from "react";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { compose } from "redux";
+import {compose} from "redux";
-import { withRouter } from "react-router-dom";
+import {withRouter} from "react-router-dom";
-import { WithTranslation, withTranslation } from "react-i18next";
+import {WithTranslation, withTranslation} from "react-i18next";
-import { Changeset, Repository } from "@scm-manager/ui-types";
+import {Changeset, Repository} from "@scm-manager/ui-types";
-import { ErrorPage, Loading } from "@scm-manager/ui-components";
+import {ErrorPage, Loading} from "@scm-manager/ui-components";
 import {
   fetchChangesetIfNeeded,
   getChangeset,
@@ -35,12 +35,13 @@ import {
   isFetchChangesetPending
 } from "../modules/changesets";
 import ChangesetDetails from "../components/changesets/ChangesetDetails";
+import {FileControlFactory} from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   id: string;
   changeset: Changeset;
   repository: Repository;
-  baseUrl: string;
+  fileControlFactoryFactory?: (changeset: Changeset) => FileControlFactory;
   loading: boolean;
   error: Error;
   fetchChangesetIfNeeded: (repository: Repository, id: string) => void;
@@ -49,27 +50,28 @@ type Props = WithTranslation & {
 
 class ChangesetView extends React.Component<Props> {
   componentDidMount() {
-    const { fetchChangesetIfNeeded, repository, id } = this.props;
+    const {fetchChangesetIfNeeded, repository, id} = this.props;
     fetchChangesetIfNeeded(repository, id);
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { fetchChangesetIfNeeded, repository, id } = this.props;
+    const {fetchChangesetIfNeeded, repository, id} = this.props;
     if (prevProps.id !== id) {
       fetchChangesetIfNeeded(repository, id);
     }
   }
 
   render() {
-    const { changeset, loading, error, t, repository, baseUrl } = this.props;
+    const {changeset, loading, error, t, repository, fileControlFactoryFactory} = this.props;
 
     if (error) {
-      return <ErrorPage title={t("changesets.errorTitle")} subtitle={t("changesets.errorSubtitle")} error={error} />;
+      return <ErrorPage title={t("changesets.errorTitle")} subtitle={t("changesets.errorSubtitle")} error={error}/>;
     }
 
-    if (!changeset || loading) return <Loading />;
+    if (!changeset || loading) return <Loading/>;
 
-    return <ChangesetDetails changeset={changeset} repository={repository} baseUrl={baseUrl} />;
+    return <ChangesetDetails changeset={changeset} repository={repository}
+                             fileControlFactory={fileControlFactoryFactory && fileControlFactoryFactory(changeset)}/>;
   }
 }
 

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -22,24 +22,24 @@
  * SOFTWARE.
  */
 import React from "react";
-import { connect } from "react-redux";
+import {connect} from "react-redux";
-import { Redirect, Route, Switch, RouteComponentProps } from "react-router-dom";
+import {Redirect, Route, RouteComponentProps, Switch} from "react-router-dom";
-import { WithTranslation, withTranslation } from "react-i18next";
+import {WithTranslation, withTranslation} from "react-i18next";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import {binder, ExtensionPoint} from "@scm-manager/ui-extensions";
-import { Repository } from "@scm-manager/ui-types";
+import {Changeset, Repository} from "@scm-manager/ui-types";
 import {
+  CustomQueryFlexWrappedColumns,
   ErrorPage,
   Loading,
   NavLink,
   Page,
-  CustomQueryFlexWrappedColumns,
   PrimaryContentColumn,
-  SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation,
+  SecondaryNavigationColumn,
-  StateMenuContextProvider
+  StateMenuContextProvider,
+  SubNavigation
 } from "@scm-manager/ui-components";
-import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
+import {fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending} from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
 import BranchesOverview from "../branches/containers/BranchesOverview";
@@ -49,10 +49,11 @@ import EditRepoNavLink from "../components/EditRepoNavLink";
 import BranchRoot from "../branches/containers/BranchRoot";
 import PermissionsNavLink from "../components/PermissionsNavLink";
 import RepositoryNavLink from "../components/RepositoryNavLink";
-import { getLinks, getRepositoriesLink } from "../../modules/indexResource";
+import {getLinks, getRepositoriesLink} from "../../modules/indexResource";
 import CodeOverview from "../codeSection/containers/CodeOverview";
 import ChangesetView from "./ChangesetView";
 import SourceExtensions from "../sources/containers/SourceExtensions";
+import {FileControlFactory, JumpToFileButton} from "@scm-manager/ui-components";
 
 type Props = RouteComponentProps &
   WithTranslation & {
@@ -66,16 +67,16 @@ type Props = RouteComponentProps &
 
   // dispatch functions
   fetchRepoByName: (link: string, namespace: string, name: string) => void;
-  };
+};
 
 class RepositoryRoot extends React.Component<Props> {
   componentDidMount() {
-    const { fetchRepoByName, namespace, name, repoLink } = this.props;
+    const {fetchRepoByName, namespace, name, repoLink} = this.props;
     fetchRepoByName(repoLink, namespace, name);
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { fetchRepoByName, namespace, name, repoLink } = this.props;
+    const {fetchRepoByName, namespace, name, repoLink} = this.props;
     if (namespace !== prevProps.namespace || name !== prevProps.name) {
       fetchRepoByName(repoLink, namespace, name);
     }
@@ -105,7 +106,7 @@ class RepositoryRoot extends React.Component<Props> {
   };
 
   getCodeLinkname = () => {
-    const { repository } = this.props;
+    const {repository} = this.props;
     if (repository?._links?.sources) {
       return "sources";
     }
@@ -116,8 +117,8 @@ class RepositoryRoot extends React.Component<Props> {
   };
 
   evaluateDestinationForCodeLink = () => {
-    const { repository } = this.props;
+    const {repository} = this.props;
-    let url = `${this.matchedUrl()}/code`;
+    const url = `${this.matchedUrl()}/code`;
     if (repository?._links?.sources) {
       return `${url}/sources/`;
     }
@@ -125,16 +126,16 @@ class RepositoryRoot extends React.Component<Props> {
   };
 
   render() {
-    const { loading, error, indexLinks, repository, t } = this.props;
+    const {loading, error, indexLinks, repository, t} = this.props;
 
     if (error) {
       return (
-        <ErrorPage title={t("repositoryRoot.errorTitle")} subtitle={t("repositoryRoot.errorSubtitle")} error={error} />
+        <ErrorPage title={t("repositoryRoot.errorTitle")} subtitle={t("repositoryRoot.errorSubtitle")} error={error}/>
       );
     }
 
     if (!repository || loading) {
-      return <Loading />;
+      return <Loading/>;
     }
 
     const url = this.matchedUrl();
@@ -153,66 +154,102 @@ class RepositoryRoot extends React.Component<Props> {
       redirectedUrl = url + "/info";
     }
 
+    const fileControlFactoryFactory: (changeset: Changeset) => FileControlFactory = (changeset) => (file) => {
+      const baseUrl = `${url}/code/sources`;
+      const sourceLink = {
+        url: `${baseUrl}/${changeset.id}/${file.newPath}/`,
+        label: t("diff.jumpToSource")
+      };
+      const targetLink = changeset._embedded?.parents?.length === 1 && {
+        url: `${baseUrl}/${changeset._embedded.parents[0].id}/${file.oldPath}`,
+        label: t("diff.jumpToTarget")
+      };
+
+      const links = [];
+      switch (file.type) {
+        case "add":
+          links.push(sourceLink);
+          break;
+        case "delete":
+          if (targetLink) {
+            links.push(targetLink);
+          }
+          break;
+        default:
+          if (targetLink) {
+            links.push(sourceLink, targetLink);
+          } else {
+            links.push(sourceLink);
+          }
+      }
+
+      return links.map(({url, label}) => <JumpToFileButton
+        tooltip={label}
+        link={url}
+      />);
+    };
+
     return (
       <StateMenuContextProvider>
         <Page
           title={repository.namespace + "/" + repository.name}
-          afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />}
+          afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{repository}}/>}
         >
           <CustomQueryFlexWrappedColumns>
             <PrimaryContentColumn>
               <Switch>
-                <Redirect exact from={this.props.match.url} to={redirectedUrl} />
+                <Redirect exact from={this.props.match.url} to={redirectedUrl}/>
 
                 {/* redirect pre 2.0.0-rc2 links */}
-                <Redirect from={`${url}/changeset/:id`} to={`${url}/code/changeset/:id`} />
+                <Redirect from={`${url}/changeset/:id`} to={`${url}/code/changeset/:id`}/>
-                <Redirect exact from={`${url}/sources`} to={`${url}/code/sources`} />
+                <Redirect exact from={`${url}/sources`} to={`${url}/code/sources`}/>
-                <Redirect from={`${url}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
+                <Redirect from={`${url}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`}/>
-                <Redirect exact from={`${url}/changesets`} to={`${url}/code/changesets`} />
+                <Redirect exact from={`${url}/changesets`} to={`${url}/code/changesets`}/>
-                <Redirect from={`${url}/branch/:branch/changesets`} to={`${url}/code/branch/:branch/changesets/`} />
+                <Redirect from={`${url}/branch/:branch/changesets`} to={`${url}/code/branch/:branch/changesets/`}/>
 
-                <Route path={`${url}/info`} exact component={() => <RepositoryDetails repository={repository} />} />
+                <Route path={`${url}/info`} exact component={() => <RepositoryDetails repository={repository}/>}/>
-                <Route path={`${url}/settings/general`} component={() => <EditRepo repository={repository} />} />
+                <Route path={`${url}/settings/general`} component={() => <EditRepo repository={repository}/>}/>
                 <Route
                   path={`${url}/settings/permissions`}
                   render={() => (
-                    <Permissions namespace={this.props.repository.namespace} repoName={this.props.repository.name} />
+                    <Permissions namespace={this.props.repository.namespace} repoName={this.props.repository.name}/>
                   )}
                 />
                 <Route
                   exact
                   path={`${url}/code/changeset/:id`}
-                  render={() => <ChangesetView repository={repository} baseUrl={`${url}/code/changeset`} />}
+                  render={() => <ChangesetView repository={repository}
+                                               fileControlFactoryFactory={fileControlFactoryFactory}/>}
                 />
                 <Route
                   path={`${url}/code/sourceext/:extension`}
                   exact={true}
-                  render={() => <SourceExtensions repository={repository} />}
+                  render={() => <SourceExtensions repository={repository}/>}
                 />
                 <Route
                   path={`${url}/code/sourceext/:extension/:revision/:path*`}
-                  render={() => <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />}
+                  render={() => <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`}/>}
                 />
                 <Route
                   path={`${url}/code`}
-                  render={() => <CodeOverview baseUrl={`${url}/code`} repository={repository} />}
+                  render={() => <CodeOverview baseUrl={`${url}/code`} repository={repository}/>}
                 />
                 <Route
                   path={`${url}/branch/:branch`}
-                  render={() => <BranchRoot repository={repository} baseUrl={`${url}/branch`} />}
+                  render={() => <BranchRoot repository={repository} baseUrl={`${url}/branch`}/>}
                 />
                 <Route
                   path={`${url}/branches`}
                   exact={true}
-                  render={() => <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />}
+                  render={() => <BranchesOverview repository={repository} baseUrl={`${url}/branch`}/>}
                 />
-                <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
+                <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository}/>}/>
-                <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
+                <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true}/>
               </Switch>
             </PrimaryContentColumn>
             <SecondaryNavigationColumn>
               <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
-                <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
+                <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true}/>
                 <NavLink
                   to={`${url}/info`}
                   icon="fas fa-info-circle"
@@ -239,15 +276,15 @@ class RepositoryRoot extends React.Component<Props> {
                   activeOnlyWhenExact={false}
                   title={t("repositoryRoot.menu.sourcesNavLink")}
                 />
-                <ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true} />
+                <ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true}/>
                 <SubNavigation
                   to={`${url}/settings/general`}
                   label={t("repositoryRoot.menu.settingsNavLink")}
                   title={t("repositoryRoot.menu.settingsNavLink")}
                 >
-                  <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
+                  <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`}/>
-                  <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
+                  <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository}/>
-                  <ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
+                  <ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true}/>
                 </SubNavigation>
               </SecondaryNavigation>
             </SecondaryNavigationColumn>
@@ -259,7 +296,7 @@ class RepositoryRoot extends React.Component<Props> {
 }
 
 const mapStateToProps = (state: any, ownProps: Props) => {
-  const { namespace, name } = ownProps.match.params;
+  const {namespace, name} = ownProps.match.params;
   const repository = getRepository(state, namespace, name);
   const loading = isFetchRepoPending(state, namespace, name);
   const error = getFetchRepoFailure(state, namespace, name);