Option to create a permanent link to a source file

Adds a new button next to the breadcrumbs in the source view that allows users to create a permanent link to the active path (file or folder).

scm-ui/ui-webapp/src/repos/sources/ReplaceBranchWithRevision.ts

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+/**
+ * Takes a given path to a source file and replaces the branch with a concrete revision.
+ * This allows for the resulting url to act as a permalink.
+ */
+export default function replaceBranchWithRevision(path: string, revision: string) {
+  const pathParts = path.split("/");
+  pathParts[6] = revision; // The branch is at the 7th position in the url
+  return pathParts.join("/");
+}

scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx

@@ -25,6 +25,7 @@ import React, { FC, useEffect, useState } from "react";
 import { apiClient, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { File, Link } from "@scm-manager/ui-types";
 import { useLocation } from "react-router-dom";
+import replaceBranchWithRevision from "../../ReplaceBranchWithRevision";
 
 type Props = {
   file: File;
@@ -67,12 +68,6 @@ const SourcecodeViewer: FC<Props> = ({ file, language }) => {
   return <SyntaxHighlighter language={getLanguage(language)} value={content} permalink={permalink} />;
 };
 
-export function replaceBranchWithRevision(path: string, revision: string) {
-  const pathParts = path.split("/");
-  pathParts[6] = revision; // The branch is at the 7th position in the url
-  return pathParts.join("/");
-}
-
 export function getLanguage(language: string) {
   return language.toLowerCase();
 }

scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx

@@ -33,6 +33,7 @@ import { compose } from "redux";
 import Content from "./Content";
 import { fetchSources, getSources, isDirectory } from "../modules/sources";
 import CodeActionBar from "../../codeSection/components/CodeActionBar";
+import replaceBranchWithRevision from "../ReplaceBranchWithRevision";
 
 type Props = WithTranslation &
   RouteComponentProps & {
@@ -45,6 +46,7 @@ type Props = WithTranslation &
     path: string;
     currentFileIsDirectory: boolean;
     sources: File;
+    fileRevision: string;
     selectedBranch: string;
 
     // dispatch props
@@ -56,7 +58,7 @@ class Sources extends React.Component<Props> {
     const { repository, branches, selectedBranch, baseUrl, revision, path, fetchSources } = this.props;
     fetchSources(repository, this.decodeRevision(revision), path);
     if (branches?.length > 0 && !selectedBranch) {
-      const defaultBranch = branches?.filter(b => b.defaultBranch === true)[0];
+      const defaultBranch = branches?.filter((b) => b.defaultBranch === true)[0];
       this.props.history.replace(`${baseUrl}/sources/${encodeURIComponent(defaultBranch.name)}/`);
     }
   }
@@ -90,7 +92,7 @@ class Sources extends React.Component<Props> {
 
   evaluateSwitchViewLink = () => {
     const { baseUrl, selectedBranch, branches } = this.props;
-    if (branches && selectedBranch && branches?.filter(b => b.name === selectedBranch).length !== 0) {
+    if (branches && selectedBranch && branches?.filter((b) => b.name === selectedBranch).length !== 0) {
       return `${baseUrl}/branch/${encodeURIComponent(selectedBranch)}/changesets/`;
     }
     return `${baseUrl}/changesets/`;
@@ -148,7 +150,18 @@ class Sources extends React.Component<Props> {
   }
 
   renderBreadcrumb = () => {
-    const { revision, selectedBranch, path, baseUrl, branches, sources, repository } = this.props;
+    const {
+      revision,
+      selectedBranch,
+      path,
+      baseUrl,
+      branches,
+      sources,
+      repository,
+      location,
+      fileRevision
+    } = this.props;
+    const permalink = fileRevision ? replaceBranchWithRevision(location.pathname, fileRevision) : null;
 
     return (
       <Breadcrumb
@@ -156,9 +169,10 @@ class Sources extends React.Component<Props> {
         revision={revision}
         path={path}
         baseUrl={baseUrl + "/sources"}
-        branch={branches?.filter(b => b.name === selectedBranch)[0]}
-        defaultBranch={branches?.filter(b => b.defaultBranch === true)[0]}
+        branch={branches?.filter((b) => b.name === selectedBranch)[0]}
+        defaultBranch={branches?.filter((b) => b.defaultBranch === true)[0]}
         sources={sources}
+        permalink={permalink}
       />
     );
   };
@@ -174,6 +188,8 @@ const mapStateToProps = (state: any, ownProps: Props) => {
     ? isDirectory(state, repository, decodedRevision, path)
     : isDirectory(state, repository, revision, path);
   const sources = getSources(state, repository, decodedRevision, path);
+  const file = getSources(state, repository, revision, path);
+  const fileRevision = file?.revision;
 
   return {
     repository,
@@ -182,7 +198,8 @@ const mapStateToProps = (state: any, ownProps: Props) => {
     loading,
     error,
     currentFileIsDirectory,
-    sources
+    sources,
+    fileRevision
   };
 };