From ee84e7403c150df90a8c8916c418c14befbc85d9 Mon Sep 17 00:00:00 2001 From: Josh <37798644+joshuaellis@users.noreply.github.com> Date: Thu, 7 Sep 2023 13:16:35 +0100 Subject: [PATCH] fix: relativeURLs fail with appendSearchParamsToUrl (#17967) Co-authored-by: ramiel --- .../components/AssetCard/ImageAssetCard.js | 5 +- .../src/utils/appendSearchParamsToUrl.js | 8 +- .../tests/appendSearchParamsToUrl.test.js | 108 ++++++++++++++---- 3 files changed, 96 insertions(+), 25 deletions(-) diff --git a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js index a390077e7c..cbdb78d2d2 100644 --- a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js +++ b/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 ( diff --git a/packages/core/upload/admin/src/utils/appendSearchParamsToUrl.js b/packages/core/upload/admin/src/utils/appendSearchParamsToUrl.js index c57b6827c8..8c66447171 100644 --- a/packages/core/upload/admin/src/utils/appendSearchParamsToUrl.js +++ b/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 urlParams = urlObj.searchParams; + const urlObj = new URL(url, window.strapi.backendURL); + Object.entries(params).forEach(([key, value]) => { if (value !== undefined) { - urlParams.append(key, value); + urlObj.searchParams.append(key, value); } }); diff --git a/packages/core/upload/admin/src/utils/tests/appendSearchParamsToUrl.test.js b/packages/core/upload/admin/src/utils/tests/appendSearchParamsToUrl.test.js index cbab676bab..0f63f0d1ef 100644 --- a/packages/core/upload/admin/src/utils/tests/appendSearchParamsToUrl.test.js +++ b/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(); }); - test('returns original string with no update time', () => { - expect(appendSearchParamsToUrl({ url: urlString, params: undefined })).toEqual(urlString); - expect(appendSearchParamsToUrl({ url: urlString, params: 'notAnObject' })).toEqual(urlString); - expect(appendSearchParamsToUrl({ url: urlString, params: { updatedAt: undefined } })).toEqual(urlString); + describe('absoluteURL', () => { + const url = 'https://example.com/'; + + test('returns original string with no update time', () => { + expect(appendSearchParamsToUrl({ url, params: undefined })).toMatchInlineSnapshot( + `"https://example.com/"` + ); + 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', () => { + expect( + appendSearchParamsToUrl({ url, params: { updatedAt: updateTime } }) + ).toMatchInlineSnapshot(`"https://example.com/?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://example.com/?query=test&updatedAt=2023-07-19T03%3A00%3A00.000Z"` + ); + }); + + test('appends multiple search params', () => { + expect( + appendSearchParamsToUrl({ url, params: { param1: 'example1', param2: 'example2' } }) + ).toMatchInlineSnapshot(`"https://example.com/?param1=example1¶m2=example2"`); + }); }); - test('appends update time to string with no search params', () => { - const expected = `${urlString}?updatedAt=${updateTime.replaceAll(':', '%3A')}`; + describe('relativeURL', () => { + let originalBackendURL; - expect(appendSearchParamsToUrl({ url: urlString, params: { updatedAt: updateTime } })).toEqual(expected); - }); + 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'; + }); - test('appends update time to string with search params', () => { - const urlWithQuery = `${urlString}?query=test`; - const expected = `${urlWithQuery}&updatedAt=${updateTime.replaceAll(':', '%3A')}`; + afterAll(() => { + if (originalBackendURL) { + window.strapi.backendURL = originalBackendURL; + } + }); - expect(appendSearchParamsToUrl({ url: urlWithQuery, params: { updatedAt: updateTime } })).toEqual(expected); - }); + const url = '/uploads/image.jpg'; - test('appends multiple search params', () => { - const param1 = 'example1'; - const param2 = 'example2'; - const expected = `${urlString}?param1=${param1}¶m2=${param2}`; + 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"`); + }); - expect(appendSearchParamsToUrl({ url: urlString, params: { param1, param2 } })).toEqual(expected); + 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¶m2=example2"` + ); + }); }); });