fix(ui): Apply url encode and decode to a ProcessURL. Fixes argoproj#9791 (argoproj#9912)

Author: AndrewChubatiuk

ui/src/app/shared/components/links.test.ts

@@ -11,6 +11,18 @@ describe('process URL', () => {
         expect(ProcessURL('https://logging?from=${status.startedAt}&to=${status.finishedAt}', object)).toBe('https://logging?from=2021-01-01T10:30:00Z&to=2021-01-01T10:30:00Z');
     });
 
+    test('url encoded string', () => {
+        const object = {
+            metadata: {
+                name: 'test'
+            },
+            status: {
+                startedAt: '2021-01-01T10:30:00Z'
+            }
+        };
+        expect(ProcessURL('https://logging/$%7Bmetadata.name%7D', object)).toBe('https://logging/test');
+    });
+
     test('epoch timestamp', () => {
         const object = {
             status: {

ui/src/app/shared/components/links.tsx

@@ -22,16 +22,20 @@ const addEpochTimestamp = (jsonObject: {metadata: ObjectMeta; workflow?: Workflo
 };
 
 export const ProcessURL = (url: string, jsonObject: any) => {
+    /* decode url string to apply templating */
+    const decodedUrl = decodeURI(url);
     addEpochTimestamp(jsonObject);
     /* replace ${} from input url with corresponding elements from object
     return null if element is not found*/
-    return url.replace(/\${[^}]*}/g, x => {
-        const res = x
-            .replace(/[${}]+/g, '')
-            .split('.')
-            .reduce((p: any, c: string) => (p && p[c]) || null, jsonObject);
-        return res;
-    });
+    return encodeURI(
+        decodedUrl.replace(/\${[^}]*}/g, x => {
+            const res = x
+                .replace(/[${}]+/g, '')
+                .split('.')
+                .reduce((p: any, c: string) => (p && p[c]) || null, jsonObject);
+            return res;
+        })
+    );
 };
 
 export const Links = ({scope, object, button}: {scope: string; object: {metadata: ObjectMeta; workflow?: Workflow; status?: any}; button?: boolean}) => {
@@ -47,7 +51,7 @@ export const Links = ({scope, object, button}: {scope: string; object: {metadata
     }, []);
 
     const formatUrl = (url: string) => {
-        return encodeURI(ProcessURL(decodeURI(url), object));
+        return ProcessURL(url, object);
     };
 
     const openLink = (url: string) => {