Add extension point for changeset short links.

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

@@ -24,36 +24,29 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import SplitAndReplace from "./SplitAndReplace";
-import { Icon } from "@scm-manager/ui-components/src";
+import { Icon } from "@scm-manager/ui-components";
 
 storiesOf("SplitAndReplace", module).add("Simple replacement", () => {
   const replacements = [
     {
       textToReplace: "'",
-      replacement: <Icon name={"quote-left"}/>,
+      replacement: <Icon name={"quote-left"} />,
       replaceAll: true
     },
     {
       textToReplace: "`",
-      replacement: <Icon name={"quote-right"}/>,
-      replaceAll: true
-    },
-    {
-      replacement: <div>&nbsp;</div>,
-      textToReplace: " ",
+      replacement: <Icon name={"quote-right"} />,
       replaceAll: true
     }
   ];
   return (
     <>
-    <div className={"container"}><SplitAndReplace
-      text={"'So this is it,` said Arthur, 'We are going to die.`"}
-      replacements={replacements}
-    /></div>
-    <div className={"container"}><SplitAndReplace
-      text={"'Yes,` said Ford, 'except... no! Wait a minute!`"}
-      replacements={replacements}
-    /></div>
-      </>
+      <div className={"container"}>
+        <SplitAndReplace text={"'So this is it,` said Arthur, 'We are going to die.`"} replacements={replacements} />
+      </div>
+      <div className={"container"}>
+        <SplitAndReplace text={"'Yes,` said Ford, 'except... no! Wait a minute!`"} replacements={replacements} />
+      </div>
+    </>
   );
 });

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

@@ -35,14 +35,20 @@ type Props = {
   replacements: Replacement[];
 };
 
-type PartToReplace = {
-  start: number;
-  length: number;
-  replacement: ReactNode;
+const textWrapper = (s: string) => {
+  const first = s.startsWith(" ") ? <>&nbsp;</> : "";
+  const last = s.endsWith(" ") ? <>&nbsp;</> : "";
+  return (
+    <div>
+      {first}
+      {s}
+      {last}
+    </div>
+  );
 };
 
 const SplitAndReplace: FC<Props> = ({ text, replacements }) => {
-  const parts = textSplitAndReplace<ReactNode>(text, replacements, s => <div>{s}</div>);
+  const parts = textSplitAndReplace<ReactNode>(text, replacements, textWrapper);
   if (parts.length === 0) {
     return <>{parts[0]}</>;
   }

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

@@ -35,11 +35,15 @@ type Props = {
 const ChangesetDescription: FC<Props> = ({ changeset, value }) => {
   const binder = useBinder();
 
-  const replacements: Replacement[][] = binder.getExtensions("changeset.description.tokens", {
-    changeset,
-    value
-  });
-  return <SplitAndReplace text={value} replacements={replacements.flatMap(r => r)} />;
+  const replacements: ((changeset: Changeset, value: string) => Replacement[])[] = binder.getExtensions(
+    "changeset.description.tokens",
+    {
+      changeset,
+      value
+    }
+  );
+
+  return <SplitAndReplace text={value} replacements={replacements.flatMap(r => r(changeset, value))} />;
 };
 
 export default ChangesetDescription;

scm-ui/ui-components/src/repos/changesets/Changesets.stories.tsx

@@ -54,7 +54,10 @@ const withAvatarFactory = (factory: (person: Person) => string, changeset: Chang
   );
 };
 
-const withReplacements = (replacements: Replacement[][], changeset: Changeset) => {
+const withReplacements = (
+  replacements: ((changeset: Changeset, value: string) => Replacement[])[],
+  changeset: Changeset
+) => {
   const binder = new Binder("changeset stories");
   replacements.forEach(replacement => binder.bind("changeset.description.tokens", replacement));
   return (
@@ -72,7 +75,7 @@ storiesOf("Changesets", module)
   .add("With Committer and Co-Author", () => <ChangesetRow repository={repository} changeset={one} />)
   .add("With multiple Co-Authors", () => <ChangesetRow repository={repository} changeset={four} />)
   .add("With avatar", () => {
-    return withAvatarFactory(person => hitchhiker, three);
+    return withAvatarFactory(() => hitchhiker, three);
   })
   .add("Commiter and Co-Authors with avatar", () => {
     return withAvatarFactory(robohash, one);
@@ -85,8 +88,8 @@ storiesOf("Changesets", module)
     const mail = <a href={"mailto:hog@example.com"}>Arthur</a>;
     return withReplacements(
       [
-        [{ textToReplace: "HOG-42", replacement: link }],
-        [{ textToReplace: "arthur@guide.galaxy", replacement: mail }]
+        () => [{ textToReplace: "HOG-42", replacement: link }],
+        () => [{ textToReplace: "arthur@guide.galaxy", replacement: mail }]
       ],
       five
     );

scm-ui/ui-webapp/src/index.tsx

@@ -34,6 +34,10 @@ import createReduxStore from "./createReduxStore";
 import { BrowserRouter as Router } from "react-router-dom";
 
 import { urls } from "@scm-manager/ui-components";
+import { binder } from "@scm-manager/ui-extensions";
+import ChangesetShortLink from "./repos/components/changesets/ChangesetShortLink";
+
+binder.bind("changeset.description.tokens", ChangesetShortLink);
 
 const store = createReduxStore();
 

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

@@ -0,0 +1,49 @@
+/*
+ * 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.
+ */
+
+import React from "react";
+import { Link } from "react-router-dom";
+import { Changeset } from "@scm-manager/ui-types";
+import { Replacement } from "@scm-manager/ui-components";
+
+const ChangesetShortLink: (changeset: Changeset, value: string) => Replacement[] = (changeset, value) => {
+  const matches = value.match(/(\w+)\/(\w+)@([a-f0-9]+)/g);
+  if (!matches) {
+    return [];
+  }
+  return matches.map(value => {
+    const groups = value.match(/(\w+)\/(\w+)@([a-f0-9]+)/);
+    const namespace = groups[1];
+    const name = groups[2];
+    const revision = groups[3];
+    const link = `/repo/${namespace}/${name}/changeset/${revision}`;
+    const replacement: Replacement = {
+      textToReplace: value,
+      replacement: <Link to={link}>{value}</Link>
+    };
+    return replacement;
+  });
+};
+
+export default ChangesetShortLink;