support permalinks to lines in source code view (#1472)

This features adjusts the syntax checker to render a little link icon next to a hovered line. When clicked,
a permanent link to this line is created and copied to the user's clipboard. When visiting the link,
the focused row is highlighted.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

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

@@ -24,6 +24,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";
 
 type Props = {
   file: File;
@@ -35,6 +36,7 @@ const SourcecodeViewer: FC<Props> = ({ file, language }) => {
   const [error, setError] = useState<Error | undefined>(undefined);
   const [loading, setLoading] = useState(true);
   const [currentFileRevision, setCurrentFileRevision] = useState("");
+  const location = useLocation();
 
   useEffect(() => {
     if (file.revision !== currentFileRevision) {
@@ -60,9 +62,17 @@ const SourcecodeViewer: FC<Props> = ({ file, language }) => {
     return null;
   }
 
-  return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
+  const permalink = replaceBranchWithRevision(location.pathname, currentFileRevision);
+
+  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();
 }