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-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 { Link } from "react-router-dom";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useState } from "react";
+import { useTranslation } 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> {
-  renderPath() {
-    const { revision, path, baseUrl } = this.props;
+const Breadcrumb: FC<Props> = ({ repository, branch, defaultBranch, revision, path, baseUrl, sources, permalink }) => {
+  const location = useLocation();
+  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() {
-    const { repository, baseUrl, branch, defaultBranch, sources, revision, path, t } = this.props;
-
-    let homeUrl = baseUrl + "/";
-    if (revision) {
-      homeUrl += encodeURIComponent(revision) + "/";
-    }
-
-    return (
-      <>
-        <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>
+  return (
+    <>
+      <div className="is-flex">
+        <PermaLinkWrapper>
+          {copying ? (
+            <Icon name="spinner fa-spin" />
+          ) : (
+            <Tooltip message={t("breadcrumb.copyPermalink")}>
+              <Icon name="link" color="inherit" onClick={() => copySource()} />
+            </Tooltip>
           )}
-        </div>
-        <hr className="is-marginless" />
-      </>
-    );
-  }
-}
+        </PermaLinkWrapper>
+        <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>