@strapi/upload 5.51.1 → 5.51.2

package/dist/admin/future/pages/Assets/AssetsPage.js

@@ -8,11 +8,15 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
+var useAiAvailability = require('../../../hooks/useAiAvailability.js');
+var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
 var api = require('../../services/api.js');
 var folders = require('../../services/folders.js');
+var settings = require('../../services/settings.js');
 var translations = require('../../utils/translations.js');
 var AssetDetailsDrawer = require('./components/AssetDetails/AssetDetailsDrawer.js');
 var AssetsGrid = require('./components/AssetsGrid.js');
+var AssetsSearchInput = require('./components/AssetsSearchInput.js');
 var AssetsTable = require('./components/AssetsTable.js');
 var BulkActionsBar = require('./components/BulkActionsBar.js');
 var CreateFolderDialog = require('./components/CreateFolderDialog.js');
@@ -20,15 +24,20 @@ var AssetsDndProvider = require('./components/Dnd/AssetsDndProvider.js');
 var UploadDropZone = require('./components/DropZone/UploadDropZone.js');
 var UploadDropZoneContext = require('./components/DropZone/UploadDropZoneContext.js');
 var EmptyState = require('./components/EmptyState.js');
+var FilterBadges = require('./components/FilterBadges.js');
+var FilterMenu = require('./components/FilterMenu.js');
 var FolderTree = require('./components/FolderTree/FolderTree.js');
 var ImportFromUrlDialog = require('./components/ImportFromUrlDialog.js');
 var SortMenu = require('./components/SortMenu.js');
 var constants = require('./constants.js');
+var useAssetSearch = require('./hooks/useAssetSearch.js');
 var useAssetSelection = require('./hooks/useAssetSelection.js');
 var useFolderInfo = require('./hooks/useFolderInfo.js');
 var useFolderNavigation = require('./hooks/useFolderNavigation.js');
 var useInfiniteAssets = require('./hooks/useInfiniteAssets.js');
+var useListFilters = require('./hooks/useListFilters.js');
 var useListSort = require('./hooks/useListSort.js');
+var buildAssetFilters = require('./utils/buildAssetFilters.js');
 var listQueryKey = require('./utils/listQueryKey.js');
 var mergeMixedList = require('./utils/mergeMixedList.js');
 
@@ -55,30 +64,49 @@ var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 const INTERSECTION_OPTIONS = {
     threshold: 0.1
 };
-const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition, onAssetItemClick, onAddAssets })=>{
+const ITEM_COUNT_MESSAGE = {
+    id: translations.getTranslationKey('header.content.item-count'),
+    defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+};
+const SEARCH_RESULTS_COUNT_MESSAGES = {
+    both: {
+        id: translations.getTranslationKey('header.search-results.count'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}}'
+    },
+    folders: {
+        id: translations.getTranslationKey('header.search-results.count.folders'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}}'
+    },
+    assets: {
+        id: translations.getTranslationKey('header.search-results.count.assets'),
+        defaultMessage: '{numberAssets, plural, =0 {0 assets} one {1 asset} other {# assets}}'
+    }
+};
+const getSearchResultsCountMessage = (numberFolders, numberAssets)=>{
+    if (numberFolders === 0) {
+        return SEARCH_RESULTS_COUNT_MESSAGES.assets;
+    }
+    if (numberAssets === 0) {
+        return SEARCH_RESULTS_COUNT_MESSAGES.folders;
+    }
+    return SEARCH_RESULTS_COUNT_MESSAGES.both;
+};
+const AssetsView = ({ view, folders, isLoadingFolders, assets, isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error, searchQuery, assetsSort, foldersPosition, hasActiveFilters, onClearFilters, onAssetItemClick, onAddAssets, canAddAssets, onClearSearch })=>{
     const { formatMessage } = reactIntl.useIntl();
-    const { assets, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets.useInfiniteAssets({
-        folder: folderId,
-        sort: assetsSort
-    });
-    const { data: folders$1 = [], isLoading: isLoadingFolders } = folders.useGetFoldersQuery({
-        parentId: folderId,
-        sort: foldersSort
-    });
     const isGridView = view === constants.viewOptions.GRID;
     const isLoading = isLoadingAssets || isLoadingFolders;
     // "Folders: Mixed with files" — interleave the complete folder list into the
     // loaded asset stream client-side, following the active sort. Table view
     // only: the grid always keeps folders in their own band on top.
     const mixedItems = React.useMemo(()=>foldersPosition === 'mixed' && !isGridView ? mergeMixedList.mergeMixedList({
-            folders: folders$1,
+            folders,
             assets,
             sort: assetsSort,
             hasNextPage
         }) : null, [
         foldersPosition,
         isGridView,
-        folders$1,
+        folders,
         assets,
         assetsSort,
         hasNextPage
@@ -116,20 +144,27 @@ const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition,
             })
         });
     }
-    if (folders$1.length === 0 && assets.length === 0) {
-        return /*#__PURE__*/ jsxRuntime.jsx(EmptyState.EmptyState, {
-            onAddAssets: onAddAssets
+    if (folders.length === 0 && assets.length === 0) {
+        // While searching, the search empty state wins (it names the query); a
+        // filter-only dead end gets the filtered variant with its Clear action.
+        return hasActiveFilters && !searchQuery ? /*#__PURE__*/ jsxRuntime.jsx(EmptyState.FilteredEmptyState, {
+            onClearFilters: onClearFilters
+        }) : /*#__PURE__*/ jsxRuntime.jsx(EmptyState.EmptyState, {
+            onAddAssets: onAddAssets,
+            canAddAssets: canAddAssets,
+            searchQuery: searchQuery,
+            onClearSearch: onClearSearch
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             isGridView ? /*#__PURE__*/ jsxRuntime.jsx(AssetsGrid.AssetsGrid, {
-                folders: folders$1,
+                folders: folders,
                 assets: assets,
                 onAssetItemClick: onAssetItemClick
             }) : /*#__PURE__*/ jsxRuntime.jsx(AssetsTable.AssetsTable, {
                 assets: assets,
-                folders: folders$1,
+                folders: folders,
                 mixedItems: mixedItems,
                 onAssetItemClick: onAssetItemClick
             }),
@@ -148,6 +183,9 @@ const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition,
                         defaultMessage: 'Loading more assets...'
                     })
                 })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(BulkActionsBar.BulkActionsBar, {
+                assets: assets
             })
         ]
     });
@@ -219,6 +257,7 @@ const HeaderWrapper = styledComponents.styled(designSystem.Box)`
 const AssetsPage = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { openDetails } = AssetDetailsDrawer.useAssetDetailsParam();
+    const { canCreate, canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
     const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation.useFolderNavigation();
     // Deleted or missing folders (404) need a fetch — handled here, not in
     // `useFolderNavigation` (which only strips malformed ?folder= values).
@@ -236,16 +275,65 @@ const AssetsPage = ()=>{
         navigateToRoot
     ]);
     const { title, itemCount } = useFolderInfo.useFolderInfo(currentFolderId);
-    const itemCountLabel = formatMessage({
-        id: translations.getTranslationKey('header.content.item-count'),
-        defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+    const { searchQuery, isSearching, clearSearch } = useAssetSearch.useAssetSearch();
+    const listSort = useListSort.useListSort();
+    const listFilters = useListFilters.useListFilters();
+    // Resolve relative presets against "now" only when the filters change —
+    // keeps the query args (and RTK cache keys) stable between renders.
+    const builtFilters = React.useMemo(()=>buildAssetFilters.buildAssetFilters(listFilters.filters, new Date()), // eslint-disable-next-line react-hooks/exhaustive-deps -- serialized is the value identity of filters
+    [
+        listFilters.serialized
+    ]);
+    const { assets, pagination, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error: assetsError } = useInfiniteAssets.useInfiniteAssets({
+        // The real folder is passed even while searching: the service drops the folder
+        // filter when `search` is set, so results are still global. List filters
+        // compose with both modes.
+        folder: currentFolderId,
+        search: searchQuery || undefined,
+        sort: listSort.assetsSort,
+        filters: builtFilters.fileClauses,
+        filtersKey: listFilters.serialized,
+        enabled: builtFilters.showFiles
+    });
+    const { data: fetchedFolders = [], isLoading: isLoadingFolders } = folders.useGetFoldersQuery({
+        parentId: currentFolderId,
+        search: searchQuery || undefined,
+        sort: listSort.foldersSort,
+        filters: builtFilters.folderClauses
     }, {
+        skip: !builtFilters.showFolders
+    });
+    // A type badge can exclude folders structurally (e.g. "Type is Picture").
+    const folders$1 = React.useMemo(()=>builtFilters.showFolders ? fetchedFolders : [], [
+        builtFilters.showFolders,
+        fetchedFolders
+    ]);
+    const itemCountLabel = formatMessage(ITEM_COUNT_MESSAGE, {
         count: itemCount
     });
-    const pageHeaderTitle = title ? `${title} (${itemCountLabel})` : formatMessage({
-        id: 'app.loading',
-        defaultMessage: 'Loading...'
+    const searchResultsTitle = formatMessage({
+        id: translations.getTranslationKey('header.search-results'),
+        defaultMessage: 'Search results for "{query}"'
+    }, {
+        query: searchQuery
+    });
+    const numberFolders = folders$1.length;
+    const numberAssets = pagination?.total ?? 0;
+    const searchResultsCountLabel = formatMessage(getSearchResultsCountMessage(numberFolders, numberAssets), {
+        numberFolders,
+        numberAssets
     });
+    let pageHeaderTitle;
+    if (isSearching) {
+        pageHeaderTitle = `${searchResultsTitle} (${searchResultsCountLabel})`;
+    } else if (title) {
+        pageHeaderTitle = `${title} (${itemCountLabel})`;
+    } else {
+        pageHeaderTitle = formatMessage({
+            id: 'app.loading',
+            defaultMessage: 'Loading...'
+        });
+    }
     const [isCreateFolderDialogOpen, setIsCreateFolderDialogOpen] = React.useState(false);
     // View state
     const [view, setView] = strapiAdmin.usePersistentState(constants.localStorageKeys.view, constants.viewOptions.GRID);
@@ -258,6 +346,13 @@ const AssetsPage = ()=>{
     // Upload handlers
     const [uploadFiles] = api.useUploadFilesMutation();
     const [uploadFromUrls] = api.useUploadFromUrlsMutation();
+    // `concurrentUploadRequests` echoes the app config. Missing settings (still
+    // loading, no permission) fall back to sequential — never faster than the
+    // server asked for.
+    const { data: settings$1 } = settings.useGetUploadSettingsQuery();
+    const concurrency = settings$1?.data?.concurrentUploadRequests ?? 1;
+    // Drives the post-upload AI metadata phase shown per row in the progress dialog.
+    const { isEnabled: isAiMetadataEnabled } = useAiAvailability.useAIAvailability();
     const uploadFilesToFolder = async (files, folderId)=>{
         if (files.length === 0) return;
         const formData = new FormData();
@@ -275,9 +370,11 @@ const AssetsPage = ()=>{
         try {
             await uploadFiles({
                 formData,
-                totalFiles: files.length
+                totalFiles: files.length,
+                concurrency,
+                generateAiMetadata: Boolean(isAiMetadataEnabled)
             }).unwrap();
-        } catch (error) {
+        } catch  {
         // Error is already dispatched to store from the API queryFn
         }
     };
@@ -292,33 +389,38 @@ const AssetsPage = ()=>{
         e.target.value = '';
     };
     const handleDrop = async (files)=>{
+        // Defence in depth: the provider is `disabled` without `assets.create`
+        // (so onDrop won't fire), but guard here too in case it's ever wired live.
+        if (!canCreate) return;
         await uploadFilesToFolder(files, currentFolderId);
     };
     const handleUrlUpload = async (urls)=>{
         try {
             await uploadFromUrls({
                 urls,
-                folderId: currentFolderId
+                folderId: currentFolderId,
+                generateAiMetadata: Boolean(isAiMetadataEnabled)
             }).unwrap();
-        } catch (error) {
+        } catch  {
         // Error is already dispatched to store from the API queryFn
         }
     };
-    const listSort = useListSort.useListSort();
     // The view is deliberately absent: table and grid render the same list, so
     // toggling views keeps the selection.
     const listQueryKey$1 = listQueryKey.getListQueryKey({
         folderId: currentFolderId,
-        search: '',
+        search: searchQuery,
         // Folder position changes the render order too — selection must reset.
         sort: `${listSort.assetsSort};folders=${listSort.foldersPosition}`,
-        filter: null
+        filter: listFilters.serialized || null
     });
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(UploadDropZoneContext.UploadDropZoneProvider, {
                 onDrop: handleDrop,
+                disabled: !canCreate,
                 children: /*#__PURE__*/ jsxRuntime.jsx(useAssetSelection.AssetSelectionProvider, {
+                    disabled: !canUpdate,
                     children: /*#__PURE__*/ jsxRuntime.jsxs(AssetsDndProvider.AssetsDndProvider, {
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(ClearSelectionOnChange, {
@@ -331,6 +433,7 @@ const AssetsPage = ()=>{
                                     background: "neutral0",
                                     sideNav: /*#__PURE__*/ jsxRuntime.jsx(FolderTree.FolderTree, {
                                         currentFolderId: currentFolderId,
+                                        showActiveFolder: !isSearching,
                                         onSelectFolder: navigateToFolderId
                                     }),
                                     children: [
@@ -345,7 +448,7 @@ const AssetsPage = ()=>{
                                         /*#__PURE__*/ jsxRuntime.jsx(HeaderWrapper, {
                                             children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Header, {
                                                 title: pageHeaderTitle,
-                                                primaryAction: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SimpleMenu, {
+                                                primaryAction: canCreate && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.SimpleMenu, {
                                                     popoverPlacement: "bottom-end",
                                                     variant: "default",
                                                     endIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.ChevronDown, {}),
@@ -380,65 +483,77 @@ const AssetsPage = ()=>{
                                                         })
                                                     ]
                                                 }),
-                                                subtitle: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                                                    justifyContent: "space-between",
-                                                    alignItems: "center",
-                                                    gap: 4,
-                                                    width: "100%",
+                                                subtitle: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                                                     children: [
-                                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                                            gap: 4,
-                                                            alignItems: "center",
-                                                            children: "TODO: Filters and search"
-                                                        }),
                                                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                            justifyContent: "space-between",
+                                                            alignItems: "center",
                                                             gap: 4,
-                                                            alignItems: "stretch",
+                                                            width: "100%",
                                                             children: [
-                                                                /*#__PURE__*/ jsxRuntime.jsx(SortMenu.SortMenu, {
-                                                                    sort: listSort,
-                                                                    showFoldersGroup: !isGridView
+                                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(FilterMenu.FilterMenu, {
+                                                                            listFilters: listFilters
+                                                                        }),
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(AssetsSearchInput.AssetsSearchInput, {})
+                                                                    ]
                                                                 }),
-                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleGroup, {
-                                                                    type: "single",
-                                                                    value: isGridView ? 'grid' : 'table',
-                                                                    onValueChange: (value)=>value && setView(value === 'grid' ? constants.viewOptions.GRID : constants.viewOptions.TABLE),
-                                                                    "aria-label": formatMessage({
-                                                                        id: translations.getTranslationKey('view.switch.label'),
-                                                                        defaultMessage: 'View options'
-                                                                    }),
+                                                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
                                                                     children: [
-                                                                        /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
-                                                                            value: "table",
-                                                                            "aria-label": formatMessage({
-                                                                                id: translations.getTranslationKey('view.table'),
-                                                                                defaultMessage: 'Table view'
-                                                                            }),
-                                                                            children: [
-                                                                                /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
-                                                                                formatMessage({
-                                                                                    id: translations.getTranslationKey('view.table'),
-                                                                                    defaultMessage: 'Table view'
-                                                                                })
-                                                                            ]
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(SortMenu.SortMenu, {
+                                                                            sort: listSort,
+                                                                            showFoldersGroup: !isGridView
                                                                         }),
-                                                                        /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
-                                                                            value: "grid",
+                                                                        /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleGroup, {
+                                                                            type: "single",
+                                                                            value: isGridView ? 'grid' : 'table',
+                                                                            onValueChange: (value)=>value && setView(value === 'grid' ? constants.viewOptions.GRID : constants.viewOptions.TABLE),
                                                                             "aria-label": formatMessage({
-                                                                                id: translations.getTranslationKey('view.grid'),
-                                                                                defaultMessage: 'Grid view'
+                                                                                id: translations.getTranslationKey('view.switch.label'),
+                                                                                defaultMessage: 'View options'
                                                                             }),
                                                                             children: [
-                                                                                /*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {}),
-                                                                                formatMessage({
-                                                                                    id: translations.getTranslationKey('view.grid'),
-                                                                                    defaultMessage: 'Grid view'
+                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
+                                                                                    value: "table",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: translations.getTranslationKey('view.table'),
+                                                                                        defaultMessage: 'Table view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
+                                                                                        formatMessage({
+                                                                                            id: translations.getTranslationKey('view.table'),
+                                                                                            defaultMessage: 'Table view'
+                                                                                        })
+                                                                                    ]
+                                                                                }),
+                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
+                                                                                    value: "grid",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: translations.getTranslationKey('view.grid'),
+                                                                                        defaultMessage: 'Grid view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {}),
+                                                                                        formatMessage({
+                                                                                            id: translations.getTranslationKey('view.grid'),
+                                                                                            defaultMessage: 'Grid view'
+                                                                                        })
+                                                                                    ]
                                                                                 })
                                                                             ]
                                                                         })
                                                                     ]
                                                                 })
                                                             ]
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(FilterBadges.FilterBadges, {
+                                                            listFilters: listFilters
                                                         })
                                                     ]
                                                 })
@@ -453,20 +568,30 @@ const AssetsPage = ()=>{
                                                     }),
                                                     /*#__PURE__*/ jsxRuntime.jsx(AssetsView, {
                                                         view: view,
-                                                        folderId: currentFolderId,
+                                                        folders: folders$1,
+                                                        isLoadingFolders: isLoadingFolders,
+                                                        assets: assets,
+                                                        isLoadingAssets: isLoadingAssets,
+                                                        isFetchingMore: isFetchingMore,
+                                                        hasNextPage: hasNextPage,
+                                                        fetchNextPage: fetchNextPage,
+                                                        error: assetsError,
+                                                        searchQuery: searchQuery,
                                                         assetsSort: listSort.assetsSort,
-                                                        foldersSort: listSort.foldersSort,
                                                         foldersPosition: listSort.foldersPosition,
+                                                        hasActiveFilters: listFilters.filters.length > 0,
+                                                        onClearFilters: listFilters.clearFilters,
                                                         onAssetItemClick: openDetails,
-                                                        onAddAssets: handleFileSelect
+                                                        onAddAssets: handleFileSelect,
+                                                        canAddAssets: canCreate,
+                                                        onClearSearch: clearSearch
                                                     })
                                                 ]
                                             })
                                         })
                                     ]
                                 })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(BulkActionsBar.BulkActionsBar, {})
+                            })
                         ]
                     })
                 })