feat: UI can allow relative URL links (#13479)

Added the ability for users to supply relative links within the UI for the links feature so that buttons and links do not have to have the absolute URL baked into each link. This will allow for easily adding buttons for different filters on the workflow list page for example. Signed-off-by: Doug Goldstein <[email protected]>
argoproj · Oct 31, 2024 · a02db48 · a02db48
1 parent 3df05eb
commit a02db48
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 1 deletion.
diff --git a/config/config.go b/config/config.go
@@ -159,6 +159,11 @@ func (c *Config) Sanitize(allowedProtocol []string) error {
 		if err != nil {
 			return err
 		}
+		// If the scheme is empty then we're allowing relative links for
+		// the UI.
+		if u.Scheme == "" {
+			continue
+		}
 		err = c.ValidateProtocol(u.Scheme, allowedProtocol)
 		if err != nil {
 			return err

diff --git a/config/config_test.go b/config/config_test.go
@@ -22,6 +22,8 @@ func TestSanitize(t *testing.T) {
 		{Config{Links: []*wfv1.Link{{URL: "javascript:foo"}}}, "protocol javascript is not allowed"},
 		{Config{Links: []*wfv1.Link{{URL: "javASCRipt: //foo"}}}, "protocol javascript is not allowed"},
 		{Config{Links: []*wfv1.Link{{URL: "http://foo.bar/?foo=<script>abc</script>bar"}}}, ""},
+		{Config{Links: []*wfv1.Link{{URL: "/my-namespace"}}}, ""},
+		{Config{Links: []*wfv1.Link{{URL: "?namespace=argo-events&phase=Failed&phase=Error&limit=50"}}}, ""},
 	}
 	for _, tt := range tests {
 		err := tt.c.Sanitize([]string{"http", "https"})

diff --git a/docs/links.md b/docs/links.md
@@ -36,3 +36,7 @@ For example, one may find it useful to define a custom label in the workflow and
 
 We can also access workflow fields in a pod link. For example, `${workflow.metadata.name}` returns
 the name of the workflow instead of the name of the pod. If the field doesn't exist on the workflow then the value will be an empty string.
+
+> v3.6 and after
+
+Links can be relative when configured and the UI will prefix them with the base UI URL.
diff --git a/ui/src/shared/services/info-service.ts b/ui/src/shared/services/info-service.ts
@@ -1,4 +1,5 @@
 import {GetUserInfoResponse, Info, Version} from '../models';
+import {uiUrl} from '../base';
 import requests from './requests';
 
 let info: Promise<Info>; // we cache this globally rather than in localStorage so it is request once per page refresh
@@ -8,7 +9,23 @@ export const InfoService = {
         if (info) {
             return info;
         }
-        info = requests.get(`api/v1/info`).then(res => res.body as Info);
+        info = requests.get(`api/v1/info`).then(res => {
+            const info = res.body as Info;
+            info.links = info.links.map(link => {
+                // relative UI links don't have a protocol so we're going
+                // to prefix it with the UI base URL
+                try {
+                    new URL(link.url);
+                    return link;
+                } catch {
+                    return {
+                        ...link,
+                        url: uiUrl(link.url)
+                    };
+                }
+            });
+            return info;
+        });
         return info;
     },