feat: implement linkify-it on workflow node attribute row

Signed-off-by: Adrien Delannoy <[email protected]>
argoproj · Oct 18, 2024 · 35aea63 · 35aea63
1 parent c9b1477
commit 35aea63
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/ui/package.json b/ui/package.json
@@ -24,6 +24,7 @@
         "cronstrue": "^2.50.0",
         "dagre": "^0.8.5",
         "history": "^4.10.1",
+        "linkify-it": "^5.0.0",
         "moment": "^2.30.1",
         "monaco-editor": "^0.45.0",
         "prop-types": "^15.8.1",
@@ -48,6 +49,7 @@
         "@types/dagre": "^0.7.52",
         "@types/history": "^4.6.2",
         "@types/jest": "^26.0.15",
+        "@types/linkify-it": "^5.0.0",
         "@types/prop-types": "^15.7.11",
         "@types/react": "^16.8.5",
         "@types/react-autocomplete": "^1.8.10",

diff --git a/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx b/ui/src/app/workflows/components/workflow-node-info/workflow-node-info.tsx
@@ -5,6 +5,7 @@ import {Tooltip} from 'argo-ui/src/components/tooltip/tooltip';
 import moment from 'moment';
 import * as React from 'react';
 import {useState} from 'react';
+import LinkifyIt from 'linkify-it';
 
 import * as models from '../../../../models';
 import {Artifact, NodeStatus, Workflow} from '../../../../models';
@@ -70,10 +71,40 @@ interface Props {
     onRetryNode?: () => void;
 }
 
+const linkify = new LinkifyIt();
+
+function linkifyText(text: string) {
+    const matches = linkify.match(text);
+    if (!matches) {
+        return text;
+    }
+
+    const parts = [];
+    let lastIndex = 0;
+
+    matches.forEach(match => {
+        if (match.index > lastIndex) {
+            parts.push(<span key={`text-${lastIndex}`}>{text.slice(lastIndex, match.index)}</span>);
+        }
+        parts.push(
+            <a key={`link-${match.index}-${match.text}`} href={match.url} target='_blank' rel='noopener noreferrer' className='underline'>
+                {match.text}
+            </a>
+        );
+        lastIndex = match.lastIndex;
+    });
+
+    if (lastIndex < text.length) {
+        parts.push(<span key={'text-end'}>{text.slice(lastIndex)}</span>);
+    }
+
+    return parts;
+}
+
 const AttributeRow = (attr: {title: string; value: any}) => (
     <React.Fragment key={attr.title}>
         <div>{attr.title}</div>
-        <div>{attr.value}</div>
+        <div>{linkifyText(attr.value)}</div>
     </React.Fragment>
 );
 const AttributeRows = (props: {attributes: {title: string; value: any}[]}) => (

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -2085,6 +2085,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/linkify-it@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
+  integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
+
 "@types/mdast@^3.0.0":
   version "3.0.15"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
@@ -6514,6 +6519,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkify-it@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
+  integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
+  dependencies:
+    uc.micro "^2.0.0"
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
@@ -9712,6 +9724,11 @@ typescript@^4.6.4, typescript@^4.9.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
+uc.micro@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
+  integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"