From f597be12bdb71f367ab5dc3e1cf6033f74c6ffbc Mon Sep 17 00:00:00 2001
From: dakotadux <ddux@gitlab.com>
Date: Tue, 5 Aug 2025 21:11:00 -0600
Subject: [PATCH] Add observability url helpers functions

Create a new file with url helper functions for observability iframe.
These functions are used to build the iframe url and extract the target
path from the iframe url.
---
 .../observability/utils/url_helpers.js        | 23 ++++++++++
 .../observability/utils/url_helpers_spec.js   | 42 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 app/assets/javascripts/observability/utils/url_helpers.js
 create mode 100644 spec/frontend/observability/utils/url_helpers_spec.js

diff --git a/app/assets/javascripts/observability/utils/url_helpers.js b/app/assets/javascripts/observability/utils/url_helpers.js
new file mode 100644
index 00000000000000..27c55d062af975
--- /dev/null
+++ b/app/assets/javascripts/observability/utils/url_helpers.js
@@ -0,0 +1,23 @@
+export const buildIframeUrl = (path, baseUrl) => {
+  if (!baseUrl) {
+    return null;
+  }
+  try {
+    const urlWithPath = new URL(path, baseUrl);
+    return urlWithPath.toString();
+  } catch (error) {
+    return baseUrl;
+  }
+};
+
+export const extractTargetPath = (path, baseUrl) => {
+  if (!path) {
+    return null;
+  }
+  try {
+    const url = new URL(path, baseUrl);
+    return url.pathname;
+  } catch (error) {
+    return path;
+  }
+};
diff --git a/spec/frontend/observability/utils/url_helpers_spec.js b/spec/frontend/observability/utils/url_helpers_spec.js
new file mode 100644
index 00000000000000..e2a86076165c33
--- /dev/null
+++ b/spec/frontend/observability/utils/url_helpers_spec.js
@@ -0,0 +1,42 @@
+import { buildIframeUrl, extractTargetPath } from '~/observability/utils/url_helpers';
+
+describe('URL Helper Utilities', () => {
+  describe('buildIframeUrl', () => {
+    it.each`
+      description                                   | path                            | baseUrl                       | expected
+      ${'combines relative paths with base URL'}    | ${'/dashboards'}                | ${'https://example.com'}      | ${'https://example.com/dashboards'}
+      ${'combines relative paths with base URL'}    | ${'/dashboards/123/metrics'}    | ${'https://example.com'}      | ${'https://example.com/dashboards/123/metrics'}
+      ${'preserves query parameters'}               | ${'/dashboards?tab=metrics'}    | ${'https://example.com'}      | ${'https://example.com/dashboards?tab=metrics'}
+      ${'preserves fragments'}                      | ${'/dashboards#overview'}       | ${'https://example.com'}      | ${'https://example.com/dashboards#overview'}
+      ${'handles absolute URLs by using directly'}  | ${'https://other.com/absolute'} | ${'https://example.com'}      | ${'https://other.com/absolute'}
+      ${'handles base URLs with existing paths'}    | ${'/dashboards'}                | ${'https://example.com/base'} | ${'https://example.com/dashboards'}
+      ${'handles base URLs with ports'}             | ${'/dashboards'}                | ${'https://example.com:8080'} | ${'https://example.com:8080/dashboards'}
+      ${'handles root paths'}                       | ${'/'}                          | ${'https://example.com'}      | ${'https://example.com/'}
+      ${'returns base URL when construction fails'} | ${'invalid-path'}               | ${'invalid-base-url'}         | ${'invalid-base-url'}
+    `('$description: $path + $baseUrl = $expected', ({ path, baseUrl, expected }) => {
+      expect(buildIframeUrl(path, baseUrl)).toBe(expected);
+    });
+
+    it('returns null when baseUrl is empty', () => {
+      expect(buildIframeUrl('/dashboards', '')).toBeNull();
+    });
+  });
+
+  describe('extractTargetPath', () => {
+    it.each`
+      description                                        | path                            | baseUrl                  | expected
+      ${'extracts pathname from combined URL'}           | ${'/dashboards/123/metrics'}    | ${'https://example.com'} | ${'/dashboards/123/metrics'}
+      ${'extracts pathname from root'}                   | ${'/'}                          | ${'https://example.com'} | ${'/'}
+      ${'ignores query parameters'}                      | ${'/dashboards?tab=metrics'}    | ${'https://example.com'} | ${'/dashboards'}
+      ${'ignores fragments'}                             | ${'/dashboards#overview'}       | ${'https://example.com'} | ${'/dashboards'}
+      ${'extracts pathname from absolute URLs'}          | ${'https://other.com/absolute'} | ${'https://example.com'} | ${'/absolute'}
+      ${'returns original path when construction fails'} | ${'invalid-path'}               | ${'invalid-base-url'}    | ${'invalid-path'}
+    `('$description: $path + $baseUrl = $expected', ({ path, baseUrl, expected }) => {
+      expect(extractTargetPath(path, baseUrl)).toBe(expected);
+    });
+
+    it('returns null when path is empty', () => {
+      expect(extractTargetPath('', 'https://example.com')).toBeNull();
+    });
+  });
+});
-- 
GitLab