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).

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 ### Added
+- Option to create a permanent link to a source file ([#1489](https://github.com/scm-manager/scm-manager/pull/1489))
 - add markdown codeblock renderer extension point ([#1492](https://github.com/scm-manager/scm-manager/pull/1492))
 
 ## [2.12.0] - 2020-12-17

docs/de/user/repo/code.md

@@ -12,6 +12,11 @@ Es gibt unter dem Aktionsbalken eine Breadcrumbs Navigation, die den Pfad der an
 
 ![Repository-Code-Sources](assets/repository-code-sourcesView.png)
 
+#### Verlinkungen
+
+Über den Button auf der linken Seite der Breadcrumbs Navigation kann ein permanenter Link 
+zum aktuellen Pfad in die Zwischenablage kopiert werden.
+
 ### Changesets
 Die Übersicht der Changesets/Commits zeigt die Änderungshistorie je Branch an. Jeder Listeneintrag stellt einen Commit dar. 
 

docs/en/user/repo/code.md

@@ -12,6 +12,11 @@ Below the action bar is a breadcrumb navigation that shows the path of the files
 
 ![Repository-Code-Sources](assets/repository-code-sourcesView.png)
 
+#### Permalink
+
+By clicking the Button on the left-hand side of the breadcrumbs navigation, a permalink to the active path is
+automatically copied to the user's clipboard.
+
 ### Changesets
 The changesets/commits overview shows the change history of the branch. Each entry represents a commit. 
 

scm-ui/ui-components/src/Breadcrumb.stories.tsx

@@ -53,5 +53,6 @@ storiesOf("BreadCrumb", module)
       baseUrl={baseUrl}
       sources={sources}
       revision={"1"}
+      permalink={"/" + path}
     />
   ));

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -21,16 +21,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useState } from "react";
-import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useHistory, useLocation, Link } from "react-router-dom";
 import classNames from "classnames";
 import styled from "styled-components";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import Icon from "./Icon";
+import Tooltip from "./Tooltip";
+import copyToClipboard from "./CopyToClipboard";
+import { withContextPath } from "./urls";
 
-type Props = WithTranslation & {
+type Props = {
   repository: Repository;
   branch: Branch;
   defaultBranch: Branch;
@@ -38,10 +41,33 @@ type Props = WithTranslation & {
   path: string;
   baseUrl: string;
   sources: File;
+  permalink: string | null;
 };
 
-const FlexStartNav = styled.nav`
+const PermaLinkWrapper = styled.div`
+  margin: 1.2rem 0 0 1.5rem;
+  width: 16px;
+  height: 16px;
+  font-size: 13px;
+
+  i {
+    color: #dbdbdb;
+    opacity: 0.75;
+  }
+  &:hover i {
+    color: #b5b5b5;
+    opacity: 1;
+  }
+`;
+
+const BreadcrumbNav = styled.nav`
   flex: 1;
+  margin: 1rem 0.5rem !important;
+
+  li:last-child:after {
+    color: #b5b5b5;
+    content: "\\0002f";
+  }
 `;
 
 const HomeIcon = styled(Icon)`
@@ -66,10 +92,13 @@ const ActionBar = styled.div`
   }
 `;
 
-class Breadcrumb extends React.Component<Props> {
+const Breadcrumb: FC<Props> = ({ repository, branch, defaultBranch, revision, path, baseUrl, sources, permalink }) => {
-  renderPath() {
+  const location = useLocation();
-    const { revision, path, baseUrl } = this.props;
+  const history = useHistory();
+  const [copying, setCopying] = useState(false);
+  const [t] = useTranslation("commons");
 
+  const pathSection = () => {
     if (path) {
       const paths = path.split("/");
       return paths.map((pathFragment, index) => {
@@ -91,50 +120,63 @@ class Breadcrumb extends React.Component<Props> {
       });
     }
     return null;
+  };
+
+  const copySource = () => {
+    history.push(location.pathname);
+    setCopying(true);
+    copyToClipboard(
+      window.location.protocol + "//" + window.location.host + withContextPath(permalink || location.pathname)
+    ).finally(() => setCopying(false));
+  };
+
+  let homeUrl = baseUrl + "/";
+  if (revision) {
+    homeUrl += encodeURIComponent(revision) + "/";
   }
 
-  render() {
+  return (
-    const { repository, baseUrl, branch, defaultBranch, sources, revision, path, t } = this.props;
+    <>
-
+      <div className="is-flex">
-    let homeUrl = baseUrl + "/";
+        <PermaLinkWrapper>
-    if (revision) {
+          {copying ? (
-      homeUrl += encodeURIComponent(revision) + "/";
+            <Icon name="spinner fa-spin" />
-    }
+          ) : (
-
+            <Tooltip message={t("breadcrumb.copyPermalink")}>
-    return (
+              <Icon name="link" color="inherit" onClick={() => copySource()} />
-      <>
+            </Tooltip>
-        <div className="is-flex">
-          <FlexStartNav className={classNames("breadcrumb", "sources-breadcrumb")} aria-label="breadcrumbs">
-            <ul>
-              <li>
-                <Link to={homeUrl}>
-                  <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
-                </Link>
-              </li>
-              {this.renderPath()}
-            </ul>
-          </FlexStartNav>
-          {binder.hasExtension("repos.sources.actionbar") && (
-            <ActionBar>
-              <ExtensionPoint
-                name="repos.sources.actionbar"
-                props={{
-                  baseUrl,
-                  revision,
-                  branch: branch ? branch : defaultBranch,
-                  path,
-                  sources,
-                  repository
-                }}
-                renderAll={true}
-              />
-            </ActionBar>
           )}
-        </div>
+        </PermaLinkWrapper>
-        <hr className="is-marginless" />
+        <BreadcrumbNav className={classNames("breadcrumb", "sources-breadcrumb")} aria-label="breadcrumbs">
-      </>
+          <ul>
-    );
+            <li>
-  }
+              <Link to={homeUrl}>
-}
+                <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
+              </Link>
+            </li>
+            {pathSection()}
+          </ul>
+        </BreadcrumbNav>
+        {binder.hasExtension("repos.sources.actionbar") && (
+          <ActionBar>
+            <ExtensionPoint
+              name="repos.sources.actionbar"
+              props={{
+                baseUrl,
+                revision,
+                branch: branch ? branch : defaultBranch,
+                path,
+                sources,
+                repository,
+              }}
+              renderAll={true}
+            />
+          </ActionBar>
+        )}
+      </div>
+      <hr className="is-marginless" />
+    </>
+  );
+};
 
-export default withTranslation("commons")(Breadcrumb);
+export default Breadcrumb;

scm-ui/ui-components/src/SyntaxHighlighterRenderer.tsx

@@ -119,7 +119,7 @@ const SyntaxHighlighterRenderer: FC<Props> = ({
             {showLineNumbers && (
               <>
                 {copying ? (
-                  <Icon name="spinner" />
+                  <Icon name="spinner fa-spin" />
                 ) : (
                   <Tooltip message={t("sources.content.copyPermalink")}>
                     <Icon name="link" onClick={() => lineNumberClick(lineNumber)} />

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -1674,9 +1674,22 @@ exports[`Storyshots BreadCrumb Default 1`] = `
   <div
     className="is-flex"
   >
+    <div
+      className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 grYLJW"
+    >
+      <span
+        className="tooltip has-tooltip-right"
+        data-tooltip="breadcrumb.copyPermalink"
+      >
+        <i
+          className="fas fa-link has-text-inherit"
+          onClick={[Function]}
+        />
+      </span>
+    </div>
     <nav
       aria-label="breadcrumbs"
-      className="Breadcrumb__FlexStartNav-zvtb4t-0 fJPNqk breadcrumb sources-breadcrumb"
+      className="Breadcrumb__BreadcrumbNav-zvtb4t-1 kNVxHJ breadcrumb sources-breadcrumb"
     >
       <ul>
         <li>
@@ -1685,7 +1698,7 @@ exports[`Storyshots BreadCrumb Default 1`] = `
             onClick={[Function]}
           >
             <i
-              className="fas fa-fw fa-home has-text-inherit Breadcrumb__HomeIcon-zvtb4t-1 gddCRF"
+              className="fas fa-fw fa-home has-text-inherit Breadcrumb__HomeIcon-zvtb4t-2 hBZQpS"
               title="breadcrumb.home"
             />
           </a>

scm-ui/ui-styles/src/scm.scss

@@ -649,16 +649,6 @@ form .field:not(.is-grouped) {
   }
 }
 
-// sources breadcrumb
-.sources-breadcrumb {
-  margin: 1rem 1.25rem !important;
-
-  li:last-child:after {
-    color: #b5b5b5;
-    content: "\0002f";
-  }
-}
-
 // pagination
 .pagination-next,
 .pagination-link,

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

@@ -24,7 +24,8 @@
     }
   },
   "breadcrumb": {
-    "home": "Hauptseite"
+    "home": "Hauptseite",
+    "copyPermalink": "Link in Zwischenablage kopieren"
   },
   "errorNotification": {
     "prefix": "Fehler",

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

@@ -25,7 +25,8 @@
     }
   },
   "breadcrumb": {
-    "home": "Main page"
+    "home": "Main page",
+    "copyPermalink": "Copy Permalink to Clipboard"
   },
   "errorNotification": {
     "prefix": "Error",

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]}
+        branch={branches?.filter((b) => b.name === selectedBranch)[0]}
-        defaultBranch={branches?.filter(b => b.defaultBranch === true)[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
   };
 };