fix: relativeURLs fail with appendSearchParamsToUrl (#17967)

Co-authored-by: ramiel <ramielwan48@gmail.com>

packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js

@@ -10,7 +10,10 @@ import { AssetCardBase } from './AssetCardBase';
 export const ImageAssetCard = ({ height, width, thumbnail, size, alt, ...props }) => {
   // Prevents the browser from caching the URL for all sizes and allow react-query to make a smooth update
   // instead of a full refresh
-  const urlWithCacheBusting = appendSearchParamsToUrl({ url: thumbnail, params: { updatedAt: props.updatedAt } });
+  const urlWithCacheBusting = appendSearchParamsToUrl({
+    url: thumbnail,
+    params: { updatedAt: props.updatedAt },
+  });
 
   return (
     <AssetCardBase {...props} subtitle={height && width && ` - ${width}✕${height}`} variant="Image">

packages/core/upload/admin/src/utils/appendSearchParamsToUrl.js

@@ -6,15 +6,15 @@
  * @returns {String} A string representing the URL with the search params appended
  */
 const appendSearchParamsToUrl = ({ url, params }) => {
-  if (url === undefined || params === undefined || typeof params !== 'object' || Object.entries(params).length === 0) {
+  if (url === undefined || typeof params !== 'object') {
     return url;
   }
 
-  const urlObj = new URL(url);
+  const urlObj = new URL(url, window.strapi.backendURL);
-  const urlParams = urlObj.searchParams;
+
   Object.entries(params).forEach(([key, value]) => {
     if (value !== undefined) {
-      urlParams.append(key, value);
+      urlObj.searchParams.append(key, value);
     }
   });
 

packages/core/upload/admin/src/utils/tests/appendSearchParamsToUrl.test.js

@@ -1,38 +1,106 @@
 import { appendSearchParamsToUrl } from '..';
 
 describe('appendSearchParamsToUrl', () => {
-  const urlString = 'https://example.com/';
   const updateTime = '2023-07-19T03:00:00.000Z';
 
   test('returns undefined for undefined url string', () => {
     expect(appendSearchParamsToUrl({})).toBeUndefined();
-    expect(appendSearchParamsToUrl({ url: undefined, params: { updatedAt: updateTime }})).toBeUndefined();
+    expect(
+      appendSearchParamsToUrl({ url: undefined, params: { updatedAt: updateTime } })
+    ).toBeUndefined();
   });
 
+  describe('absoluteURL', () => {
+    const url = 'https://example.com/';
+
     test('returns original string with no update time', () => {
-    expect(appendSearchParamsToUrl({ url: urlString, params: undefined })).toEqual(urlString);
+      expect(appendSearchParamsToUrl({ url, params: undefined })).toMatchInlineSnapshot(
-    expect(appendSearchParamsToUrl({ url: urlString, params: 'notAnObject' })).toEqual(urlString);
+        `"https://example.com/"`
-    expect(appendSearchParamsToUrl({ url: urlString, params: { updatedAt: undefined } })).toEqual(urlString);
+      );
+      expect(appendSearchParamsToUrl({ url, params: 'notAnObject' })).toMatchInlineSnapshot(
+        `"https://example.com/"`
+      );
+      expect(
+        appendSearchParamsToUrl({ url, params: { updatedAt: undefined } })
+      ).toMatchInlineSnapshot(`"https://example.com/"`);
     });
 
     test('appends update time to string with no search params', () => {
-    const expected = `${urlString}?updatedAt=${updateTime.replaceAll(':', '%3A')}`;
+      expect(
-
+        appendSearchParamsToUrl({ url, params: { updatedAt: updateTime } })
-    expect(appendSearchParamsToUrl({ url: urlString, params: { updatedAt: updateTime } })).toEqual(expected);
+      ).toMatchInlineSnapshot(`"https://example.com/?updatedAt=2023-07-19T03%3A00%3A00.000Z"`);
     });
 
     test('appends update time to string with search params', () => {
-    const urlWithQuery = `${urlString}?query=test`;
+      expect(
-    const expected = `${urlWithQuery}&updatedAt=${updateTime.replaceAll(':', '%3A')}`;
+        appendSearchParamsToUrl({ url: `${url}?query=test`, params: { updatedAt: updateTime } })
-
+      ).toMatchInlineSnapshot(
-    expect(appendSearchParamsToUrl({ url: urlWithQuery, params: { updatedAt: updateTime } })).toEqual(expected);
+        `"https://example.com/?query=test&updatedAt=2023-07-19T03%3A00%3A00.000Z"`
+      );
     });
 
     test('appends multiple search params', () => {
-    const param1 = 'example1';
+      expect(
-    const param2 = 'example2';
+        appendSearchParamsToUrl({ url, params: { param1: 'example1', param2: 'example2' } })
-    const expected = `${urlString}?param1=${param1}&param2=${param2}`;
+      ).toMatchInlineSnapshot(`"https://example.com/?param1=example1&param2=example2"`);
+    });
+  });
 
-    expect(appendSearchParamsToUrl({ url: urlString, params: { param1, param2 } })).toEqual(expected);
+  describe('relativeURL', () => {
+    let originalBackendURL;
+
+    beforeAll(() => {
+      /**
+       * internally, we append whatever URL you pass to appendSearchParamsToUrl
+       * with the backendURL from the strapi window object, here we overwrite it
+       * just so it's clear what the expected output is.
+       */
+      originalBackendURL = window.strapi.backendURL;
+      window.strapi.backendURL = 'https://appending-search-params.com';
+    });
+
+    afterAll(() => {
+      if (originalBackendURL) {
+        window.strapi.backendURL = originalBackendURL;
+      }
+    });
+
+    const url = '/uploads/image.jpg';
+
+    test('returns original string with no update time', () => {
+      expect(appendSearchParamsToUrl({ url, params: undefined })).toMatchInlineSnapshot(
+        `"/uploads/image.jpg"`
+      );
+      expect(appendSearchParamsToUrl({ url, params: 'notAnObject' })).toMatchInlineSnapshot(
+        `"/uploads/image.jpg"`
+      );
+      expect(
+        appendSearchParamsToUrl({ url, params: { updatedAt: undefined } })
+      ).toMatchInlineSnapshot(`"https://appending-search-params.com/uploads/image.jpg"`);
+    });
+
+    test('appends update time to string with no search params', () => {
+      expect(
+        appendSearchParamsToUrl({ url, params: { updatedAt: updateTime } })
+      ).toMatchInlineSnapshot(
+        `"https://appending-search-params.com/uploads/image.jpg?updatedAt=2023-07-19T03%3A00%3A00.000Z"`
+      );
+    });
+
+    test('appends update time to string with search params', () => {
+      expect(
+        appendSearchParamsToUrl({ url: `${url}?query=test`, params: { updatedAt: updateTime } })
+      ).toMatchInlineSnapshot(
+        `"https://appending-search-params.com/uploads/image.jpg?query=test&updatedAt=2023-07-19T03%3A00%3A00.000Z"`
+      );
+    });
+
+    test('appends multiple search params', () => {
+      expect(
+        appendSearchParamsToUrl({ url, params: { param1: 'example1', param2: 'example2' } })
+      ).toMatchInlineSnapshot(
+        `"https://appending-search-params.com/uploads/image.jpg?param1=example1&param2=example2"`
+      );
+    });
   });
 });