diff --git a/spiffworkflow-frontend/src/helpers.tsx b/spiffworkflow-frontend/src/helpers.tsx index c0be3a2dc..783cdfbb4 100644 --- a/spiffworkflow-frontend/src/helpers.tsx +++ b/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); +}; diff --git a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx b/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx index 1fd150638..1f4a6eda7 100644 --- a/spiffworkflow-frontend/src/routes/ProcessInstanceShow.tsx +++ b/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 ( + + {value} + + ); + } + return value; + }; + const getInfoTag = () => { if (!processInstance) { return null; @@ -548,7 +560,7 @@ export default function ProcessInstanceShow({ variant }: OwnProps) {