Merge branch 'features/ML-folder' of https://github.com/strapi/strapi into ML-folder/bulk-move-select

packages/core/helper-plugin/lib/src/components/ReactSelect/utils/getSelectStyles.js

@@ -79,7 +79,15 @@ const getSelectStyles = (theme, error) => {
         backgroundColor = theme.colors.primary100;
       }
 
-      return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
+      return {
+        ...base,
+        lineHeight: theme.spaces[5],
+        backgroundColor,
+        borderRadius: theme.borderRadius,
+        '&:active': {
+          backgroundColor: theme.colors.primary100,
+        },
+      };
     },
     placeholder: base => ({ ...base, marginLeft: 0 }),
     singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),

packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js

@@ -80,6 +80,13 @@ export const BrowseStep = ({
   const assetCount = assets.length;
   const folderCount = folders.length;
 
+  const handleClickFolderCard = (...args) => {
+    // Search query will always fetch the same results
+    // we remove it here to allow navigating in a folder and see the result of this navigation
+    onChangeSearch('');
+    onChangeFolder(...args);
+  };
+
   return (
     <Stack spacing={4}>
       {onSelectAllAsset && (
@@ -181,7 +188,7 @@ export const BrowseStep = ({
                 <FolderCard
                   ariaLabel={folder.name}
                   id={`folder-${folder.id}`}
-                  onClick={() => onChangeFolder(folder.id)}
+                  onClick={() => handleClickFolderCard(folder.id)}
                   cardActions={
                     onEditFolder && (
                       <IconButton
@@ -196,7 +203,7 @@ export const BrowseStep = ({
                   }
                 >
                   <FolderCardBody>
-                    <FolderCardBodyAction onClick={() => onChangeFolder(folder.id)}>
+                    <FolderCardBodyAction onClick={() => handleClickFolderCard(folder.id)}>
                       <Flex as="h2" direction="column" alignItems="start" maxWidth="100%">
                         <TypographyMaxWidth fontWeight="semiBold" ellipsis>
                           {folder.name}

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

@@ -152,6 +152,30 @@ describe('useAssets', () => {
     );
   });
 
+  test('does not use folder filter in params if _q', async () => {
+    const { result, waitFor, waitForNextUpdate } = await setup({
+      query: { folder: 5, _q: 'something', filters: { $and: [{ something: 'true' }] } },
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    await waitForNextUpdate();
+
+    const expected = {
+      filters: {
+        $and: [
+          {
+            something: true,
+          },
+        ],
+      },
+      _q: 'something',
+    };
+
+    expect(axiosInstance.get).toBeCalledWith(
+      `/upload/files?${stringify(expected, { encode: false })}`
+    );
+  });
+
   test('it does not fetch, if skipWhen is set', async () => {
     const { result, waitFor } = await setup({ skipWhen: true });
 

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

@@ -104,6 +104,33 @@ describe('useFolders', () => {
     );
   });
 
+  test('does not use parent filter in params if _q', async () => {
+    const { result, waitFor, waitForNextUpdate } = await setup({
+      query: { folder: 5, _q: 'something', filters: { $and: [{ something: 'true' }] } },
+    });
+
+    await waitFor(() => result.current.isSuccess);
+    await waitForNextUpdate();
+
+    const expected = {
+      filters: {
+        $and: [
+          {
+            something: 'true',
+          },
+        ],
+      },
+      pagination: {
+        pageSize: -1,
+      },
+      _q: 'something',
+    };
+
+    expect(axiosInstance.get).toBeCalledWith(
+      `/upload/folders?${stringify(expected, { encode: false })}`
+    );
+  });
+
   test('fetches data from the right URL if a query param was set', async () => {
     const { result, waitFor, waitForNextUpdate } = await setup({ query: { folder: 1 } });
 

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

@@ -12,15 +12,24 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
   const dataRequestURL = getRequestUrl('files');
-  const { folder, ...paramsExceptFolder } = query;
+  const { folder, _q, ...paramsExceptFolderAndQ } = query;
-  const params = {
+
-    ...paramsExceptFolder,
+  let params;
+
+  if (_q) {
+    params = {
+      ...paramsExceptFolderAndQ,
+      _q,
+    };
+  } else {
+    params = {
+      ...paramsExceptFolderAndQ,
       filters: {
         $and: [
-        ...(query?.filters?.$and ?? []),
+          ...(paramsExceptFolderAndQ?.filters?.$and ?? []),
           {
             folder: {
-            id: query?.folder ?? {
+              id: folder ?? {
                 $null: true,
               },
             },
@@ -28,6 +37,7 @@ export const useAssets = ({ skipWhen = false, query = {} } = {}) => {
         ],
       },
     };
+  }
 
   const getAssets = async () => {
     try {

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

@@ -12,18 +12,30 @@ export const useFolders = ({ enabled = true, query = {} }) => {
   const toggleNotification = useNotification();
   const { notifyStatus } = useNotifyAT();
   const dataRequestURL = getRequestUrl('folders');
-  const { folder, ...paramsExceptFolder } = query;
+  const { folder, _q, ...paramsExceptFolderAndQ } = query;
-  const params = {
+
-    ...paramsExceptFolder,
+  let params;
+
+  if (_q) {
+    params = {
+      ...paramsExceptFolderAndQ,
+      pagination: {
+        pageSize: -1,
+      },
+      _q,
+    };
+  } else {
+    params = {
+      ...paramsExceptFolderAndQ,
       pagination: {
         pageSize: -1,
       },
       filters: {
         $and: [
-        ...(query?.filters?.$and ?? []),
+          ...(paramsExceptFolderAndQ?.filters?.$and ?? []),
           {
             parent: {
-            id: query?.folder ?? {
+              id: folder ?? {
                 $null: true,
               },
             },
@@ -31,6 +43,7 @@ export const useFolders = ({ enabled = true, query = {} }) => {
         ],
       },
     };
+  }
 
   const fetchFolders = async () => {
     try {

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -262,8 +262,12 @@ export const MediaLibrary = () => {
                     const isSelected = !!selectedFolders.find(
                       currentFolder => currentFolder.id === folder.id
                     );
+
+                    // Search query will always fetch the same results
+                    // we remove it here to allow navigating in a folder and see the result of this navigation
+                    const { _q, ...queryParamsWithoutQ } = query;
                     const url = `${pathname}?${stringify({
-                      ...query,
+                      ...queryParamsWithoutQ,
                       folder: folder.id,
                     })}`;