Merge pull request #14463 from strapi/fix/search-encoding

Fix search query encoding

packages/core/admin/admin/src/content-manager/pages/ListView/utils/buildQueryString.js

@@ -1,4 +1,5 @@
 import { stringify } from 'qs';
+import set from 'lodash/set';
 import createPluginsFilter from './createPluginsFilter';
 
 /**
@@ -12,12 +13,23 @@ const buildQueryString = (queryParams = {}) => {
    * Extracting pluginOptions from the query since we don't want them to be part
    * of the url
    */
-  const { plugins: _, ...otherQueryParams } = {
+  const {
+    plugins: _,
+    _q: query,
+    ...otherQueryParams
+  } = {
     ...queryParams,
     ...createPluginsFilter(queryParams.plugins),
   };
 
-  return `?${stringify(otherQueryParams, { encode: false })}`;
+  if (query) {
+    set(otherQueryParams, `_q`, encodeURIComponent(query));
+  }
+
+  return `${stringify(otherQueryParams, {
+    encode: false,
+    addQueryPrefix: true,
+  })}`;
 };
 
 export default buildQueryString;

packages/core/admin/admin/src/content-manager/pages/ListView/utils/tests/buildQueryString.test.js

@@ -58,4 +58,18 @@ describe('buildQueryString', () => {
       '?page=1&pageSize=10&sort=name:ASC&filters[0][name]=hello world&locale=en'
     );
   });
+
+  it('creates a valid query string with a search query', () => {
+    const _q = `test&query`;
+    const queryParams = {
+      page: '1',
+      pageSize: '10',
+      sort: 'name:ASC',
+      _q,
+    };
+
+    const queryString = buildQueryString(queryParams);
+
+    expect(queryString).toBe(`?page=1&pageSize=10&sort=name:ASC&_q=${encodeURIComponent(_q)}`);
+  });
 });

packages/core/helper-plugin/lib/src/components/SearchURLQuery/index.js

@@ -40,7 +40,7 @@ const SearchURLQuery = ({ label, placeholder, trackedEvent, trackedEventDetails
       if (trackedEvent) {
         trackUsage(trackedEvent, trackedEventDetails);
       }
-      setQuery({ _q: value, page: 1 });
+      setQuery({ _q: encodeURIComponent(value), page: 1 });
     } else {
       handleToggle();
       setQuery({ _q: '' }, 'remove');

packages/core/upload/admin/src/hooks/tests/useAssets.test.js

@@ -97,7 +97,7 @@ describe('useAssets', () => {
     };
 
     expect(axiosInstance.get).toBeCalledWith(
-      `/upload/files?${stringify(expected, { encode: false })}`
+      `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
 
@@ -120,7 +120,7 @@ describe('useAssets', () => {
     };
 
     expect(axiosInstance.get).toBeCalledWith(
-      `/upload/files?${stringify(expected, { encode: false })}`
+      `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
 
@@ -148,7 +148,7 @@ describe('useAssets', () => {
     };
 
     expect(axiosInstance.get).toBeCalledWith(
-      `/upload/files?${stringify(expected, { encode: false })}`
+      `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
 
@@ -172,7 +172,32 @@ describe('useAssets', () => {
     };
 
     expect(axiosInstance.get).toBeCalledWith(
-      `/upload/files?${stringify(expected, { encode: false })}`
+      `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
+    );
+  });
+
+  test('correctly encodes the search query _q', async () => {
+    const _q = 'something&else';
+    const { result, waitFor, waitForNextUpdate } = await setup({
+      query: { folder: 5, _q, filters: { $and: [{ something: 'true' }] } },
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    await waitForNextUpdate();
+
+    const expected = {
+      filters: {
+        $and: [
+          {
+            something: true,
+          },
+        ],
+      },
+      _q: encodeURIComponent(_q),
+    };
+
+    expect(axiosInstance.get).toBeCalledWith(
+      `/upload/files${stringify(expected, { encode: false, addQueryPrefix: true })}`
     );
   });
 

packages/core/upload/admin/src/hooks/useAssets.js

@@ -19,7 +19,7 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
   if (_q) {
     params = {
       ...paramsExceptFolderAndQ,
-      _q,
+      _q: encodeURIComponent(_q),
     };
   } else {
     params = {
@@ -42,7 +42,10 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
   const getAssets = async () => {
     try {
       const { data } = await axiosInstance.get(
-        `${dataRequestURL}?${stringify(params, { encode: false })}`
+        `${dataRequestURL}${stringify(params, {
+          encode: false,
+          addQueryPrefix: true,
+        })}`
       );
 
       notifyStatus(