feat: update custom view url format

apps/client/src/pages/view/components/custom/CustomViewExperiment.tsx

@@ -20,6 +20,12 @@ import { environment } from '../../../../environments';
 import { SearchModel } from '../../../../services/search';
 import { validAuth$ } from '../../../../services/session';
 
+import {
+  addTimeStampForRefresh,
+  buildUrl,
+  urlToString,
+} from './CustomViewUtils';
+
 export interface CustomViewExperimentProps {
   customMode: PostMessageCustomModeType | null;
   url: string | null;
@@ -54,7 +60,7 @@ export const CustomViewExperiment: LegacyFunctionComponent<
   const auth = useObservableState(validAuth$, null);
 
   const securityUrl = useMemo(() => {
-    return url ? addTimeStampForRefresh(buildUrl(url)) : null;
+    return url ? urlToString(addTimeStampForRefresh(buildUrl(url))) : null;
   }, [url]);
 
   useEffect(() => {
@@ -163,13 +169,3 @@ export const CustomViewExperiment: LegacyFunctionComponent<
     </div>
   );
 };
-
-const buildUrl = (value: string) => {
-  // TODO only allow same origin, same org name and contents from web-engines.
-  // TODO bypass the rule if enable develop mode
-  return value;
-};
-
-const addTimeStampForRefresh = (value: string) => {
-  return `${value}?iframe-refresh=${new Date().getTime()}`;
-};

apps/client/src/pages/view/components/custom/CustomViewUtils.test.ts

@@ -0,0 +1,71 @@
+import {
+  buildUrl,
+  addTimeStampForRefresh,
+  urlToString,
+} from './CustomViewUtils';
+
+describe('CustomViewUtils', () => {
+  describe('buildUrl', () => {
+    it('should return a URL object with the provided value', () => {
+      const value = 'https://example.com';
+      const url = buildUrl(value);
+      expect(url instanceof URL).toBe(true);
+      expect(url.toString()).toBe('https://example.com/');
+    });
+
+    it('should return a URL object with the provided value', () => {
+      const value = '/web-engines/pactl_trucking/admin/#/crossBorderRecycle';
+      const url = buildUrl(value);
+      expect(url instanceof URL).toBe(true);
+      expect(url.toString()).toBe(
+        'http://localhost/web-engines/pactl_trucking/admin/#/crossBorderRecycle',
+      );
+    });
+  });
+
+  describe('addTimeStampForRefresh', () => {
+    it('should return a new URL object with a timestamp query parameter', () => {
+      const value = new URL('https://example.com');
+      const refreshedUrl = addTimeStampForRefresh(value);
+      expect(refreshedUrl instanceof URL).toBe(true);
+      expect(refreshedUrl.href).toMatch(
+        /https:\/\/example.com\/\?iframe-refresh=\d+/,
+      );
+    });
+
+    it('should return a new URL object with a timestamp query parameter', () => {
+      const value = new URL(
+        'https://example.com/skp-simple-landing?d=%2Fprojects',
+      );
+      const refreshedUrl = addTimeStampForRefresh(value);
+      expect(refreshedUrl instanceof URL).toBe(true);
+      expect(refreshedUrl.href).toMatch(
+        /https:\/\/example.com\/skp-simple-landing\?d=%2Fprojects&iframe-refresh=\d+/,
+      );
+    });
+
+    it('should return a new URL object with a timestamp query parameter', () => {
+      const value = new URL(
+        'https://example.com/skp-simple-landing?d=%2Fprojects#test',
+      );
+      const refreshedUrl = addTimeStampForRefresh(value);
+      expect(refreshedUrl instanceof URL).toBe(true);
+      expect(refreshedUrl.href).toMatch(
+        /https:\/\/example.com\/skp-simple-landing\?d=%2Fprojects&iframe-refresh=\d+#test/,
+      );
+    });
+  });
+
+  describe('urlToString', () => {
+    it('should return the string representation of the provided URL', () => {
+      const value = new URL(
+        'https://example.com/skp-simple-landing?d=%2Fprojects#test',
+      );
+      const urlStr = urlToString(value);
+      expect(typeof urlStr).toBe('string');
+      expect(urlStr).toBe(
+        'https://example.com/skp-simple-landing?d=%2Fprojects#test',
+      );
+    });
+  });
+});

apps/client/src/pages/view/components/custom/CustomViewUtils.ts

@@ -0,0 +1,20 @@
+export const buildUrl = (value: string): URL => {
+  // TODO only allow same origin, same org name and contents from web-engines.
+  // TODO bypass the rule if enable develop mode
+  try {
+    return new URL(value);
+  } catch (error) {
+    const current = new URL(window.location.href);
+    const next = new URL(`${current.protocol}//${current.host}${value}`);
+    return next;
+  }
+};
+
+export const addTimeStampForRefresh = (value: URL): URL => {
+  value.searchParams.append('iframe-refresh', new Date().getTime().toString());
+  return value;
+};
+
+export const urlToString = (value: URL): string => {
+  return value.toString();
+};