Merge pull request #11451 from strapi/cm/ml-sort

[v4] Add sort to ML compo in CM

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

@@ -8,11 +8,13 @@ import { AssetList } from '../../../AssetList';
 import getTrad from '../../../../utils/getTrad';
 import PaginationFooter from './PaginationFooter';
 import PageSize from './PageSize';
+import SortPicker from '../../../SortPicker';
 
 export const BrowseStep = ({
   assets,
   onChangePage,
   onChangePageSize,
+  onChangeSort,
   onEditAsset,
   onSelectAllAsset,
   onSelectAsset,
@@ -26,7 +28,7 @@ export const BrowseStep = ({
     <>
       <Stack size={4}>
         {onSelectAllAsset && (
-          <Flex>
+          <Stack horizontal size={2}>
             <Flex
               paddingLeft={2}
               paddingRight={2}
@@ -44,7 +46,8 @@ export const BrowseStep = ({
                 onChange={onSelectAllAsset}
               />
             </Flex>
-          </Flex>
+            <SortPicker onChangeSort={onChangeSort} />
+          </Stack>
         )}
 
         <AssetList
@@ -75,6 +78,7 @@ BrowseStep.propTypes = {
   assets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   onChangePage: PropTypes.func.isRequired,
   onChangePageSize: PropTypes.func.isRequired,
+  onChangeSort: PropTypes.func.isRequired,
   onEditAsset: PropTypes.func.isRequired,
   onSelectAsset: PropTypes.func.isRequired,
   onSelectAllAsset: PropTypes.func,

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

@@ -29,7 +29,10 @@ export const AssetDialog = ({
 }) => {
   const { formatMessage } = useIntl();
   const { canRead, canCreate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions();
-  const [{ rawQuery, queryObject }, { onChangePage, onChangePageSize }] = useModalQueryParams();
+  const [
+    { rawQuery, queryObject },
+    { onChangePage, onChangePageSize, onChangeSort },
+  ] = useModalQueryParams();
   const { data, isLoading, error } = useModalAssets({ skipWhen: !canRead, rawQuery });
 
   const [selectedAssets, { selectOne, selectAll, selectOnly }] = useSelectionState(
@@ -161,6 +164,7 @@ export const AssetDialog = ({
                 queryObject={queryObject}
                 onChangePage={onChangePage}
                 onChangePageSize={onChangePageSize}
+                onChangeSort={onChangeSort}
               />
             </ModalBody>
           </TabPanel>

packages/core/upload/admin/src/components/SortPicker/index.js

@@ -1,16 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
 import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { useQueryParams } from '@strapi/helper-plugin';
-import { getTrad } from '../../../utils';
+import { getTrad } from '../../utils';
 
-export const SortPicker = () => {
+const SortPicker = ({ onChangeSort }) => {
   const { formatMessage } = useIntl();
-  const [, setQuery] = useQueryParams();
-
-  const handleChange = value => {
-    setQuery({ sort: value });
-  };
 
   const filters = [
     { key: 'sort.created_at_desc', value: `createdAt:DESC` },
@@ -30,10 +25,16 @@ export const SortPicker = () => {
       })}
     >
       {filters.map(filter => (
-        <MenuItem key={filter.key} onClick={() => handleChange(filter.value)}>
+        <MenuItem key={filter.key} onClick={() => onChangeSort(filter.value)}>
           {formatMessage({ id: getTrad(filter.key) })}
         </MenuItem>
       ))}
     </SimpleMenu>
   );
 };
+
+SortPicker.propTypes = {
+  onChangeSort: PropTypes.func.isRequired,
+};
+
+export default SortPicker;

packages/core/upload/admin/src/hooks/useModalAssets/useModalQueryParams.js

@@ -17,9 +17,17 @@ const useModalQueryParams = () => {
     setQueryObject(prev => ({ ...prev, page }));
   };
 
+  const handleChangeSort = sort => {
+    setQueryObject(prev => ({ ...prev, sort }));
+  };
+
   return [
     { queryObject, rawQuery: stringify(queryObject, { encode: false }) },
-    { onChangePage: handeChangePage, onChangePageSize: handleChangePageSize },
+    {
+      onChangePage: handeChangePage,
+      onChangePageSize: handleChangePageSize,
+      onChangeSort: handleChangeSort,
+    },
   ];
 };
 

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

@@ -9,6 +9,7 @@ import {
   AnErrorOccurred,
   Search,
   useSelectionState,
+  useQueryParams,
 } from '@strapi/helper-plugin';
 import { Layout, HeaderLayout, ContentLayout, ActionLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -19,10 +20,10 @@ import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { UploadAssetDialog } from '../../components/UploadAssetDialog/UploadAssetDialog';
 import { EditAssetDialog } from '../../components/EditAssetDialog';
 import { AssetList } from '../../components/AssetList';
+import SortPicker from '../../components/SortPicker';
 import { useAssets } from '../../hooks/useAssets';
 import { getTrad } from '../../utils';
 import { Filters } from './components/Filters';
-import { SortPicker } from './components/SortPicker';
 import { PaginationFooter } from '../../components/PaginationFooter';
 import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';
 import { BulkDeleteButton } from './components/BulkDeleteButton';
@@ -42,12 +43,17 @@ export const MediaLibrary = () => {
     canDownload,
     isLoading: isLoadingPermissions,
   } = useMediaLibraryPermissions();
+  const [, setQuery] = useQueryParams();
 
   const { formatMessage } = useIntl();
   const { data, isLoading, error } = useAssets({
     skipWhen: !canRead,
   });
 
+  const handleChangeSort = value => {
+    setQuery({ sort: value });
+  };
+
   const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
   const [assetToEdit, setAssetToEdit] = useState(undefined);
   const [selected, { selectOne, selectAll }] = useSelectionState('id', []);
@@ -113,7 +119,7 @@ export const MediaLibrary = () => {
                   />
                 </BoxWithHeight>
               )}
-              {canRead && <SortPicker />}
+              {canRead && <SortPicker onChangeSort={handleChangeSort} />}
               {canRead && <Filters />}
             </>
           }