if a metadata value looks like a url then display as a link (#1137)

* if a metadata value looks like a url then display as a link w/ burnettk

* avoid Link for external urls

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* lint

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
Co-authored-by: Kevin Burnett <18027+burnettk@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

spiffworkflow-frontend/src/helpers.tsx

@@ -292,3 +292,11 @@ export const parseTaskShowUrl = (url: string) => {
     /^\/tasks\/(\d+)\/([0-9a-z]{8}-([0-9a-z]{4}-){3}[0-9a-z]{12})$/
   );
 };
+
+// https://stackoverflow.com/a/15855457/6090676
+export const isURL = (str: string) => {
+  const urlRegex =
+    // eslint-disable-next-line max-len
+    /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
+  return urlRegex.test(str);
+};

spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx

@@ -54,6 +54,7 @@ import {
   MULTI_INSTANCE_TASK_TYPES,
   LOOP_TASK_TYPES,
   titleizeString,
+  isURL,
 } from '../helpers';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
 import { useUriListForPermissions } from '../hooks/UriListForPermissions';
@@ -443,6 +444,17 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
     });
   };
 
+  const formatMetadataValue = (value: string) => {
+    if (isURL(value)) {
+      return (
+        <a href={value} target="_blank" rel="noopener noreferrer">
+          {value}
+        </a>
+      );
+    }
+    return value;
+  };
+
   const getInfoTag = () => {
     if (!processInstance) {
       return null;
@@ -548,7 +560,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {
                 <dt title={processInstanceMetadata.key}>
                   {truncateString(processInstanceMetadata.key, 50)}:
                 </dt>
-                <dd>{processInstanceMetadata.value}</dd>
+                <dd>{formatMetadataValue(processInstanceMetadata.value)}</dd>
               </dl>
             )
           )}