yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-01 10:23:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: relativeURLs fail with appendSearchParamsToUrl (#17967)

Browse Source 
Co-authored-by: ramiel <ramielwan48@gmail.com>
This commit is contained in:
Josh 2023-09-07 13:16:35 +01:00 committed by Alexandre Bodin
parent 377efaba51
commit ee84e7403c
3 changed files with 96 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
View File

@ -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">

8
packages/core/upload/admin/src/utils/appendSearchParamsToUrl.js
View File

@ -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);
}
});

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

@ -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&param2=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}&param2=${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&param2=example2"`
);
});
});
});