@strapi/upload 5.51.1 → 5.51.2

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

@@ -1,48 +1,76 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { usePersistentState, Layouts, useElementOnScreen } from '@strapi/admin/strapi-admin';
 import { Box, VisuallyHidden, Flex, SimpleMenu, MenuItem, Loader, Typography } from '@strapi/design-system';
 import { List, GridFour, Folder, Files, Link, ChevronDown } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
+import { useAIAvailability } from '../../../hooks/useAiAvailability.mjs';
+import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
 import { useUploadFilesMutation, useUploadFromUrlsMutation } from '../../services/api.mjs';
 import { useGetFolderQuery, useGetFoldersQuery } from '../../services/folders.mjs';
+import { useGetUploadSettingsQuery } from '../../services/settings.mjs';
 import { getTranslationKey } from '../../utils/translations.mjs';
 import { useAssetDetailsParam, AssetDetailsDrawer } from './components/AssetDetails/AssetDetailsDrawer.mjs';
 import { AssetsGrid } from './components/AssetsGrid.mjs';
+import { AssetsSearchInput } from './components/AssetsSearchInput.mjs';
 import { AssetsTable } from './components/AssetsTable.mjs';
 import { BulkActionsBar } from './components/BulkActionsBar.mjs';
 import { CreateFolderDialog } from './components/CreateFolderDialog.mjs';
 import { AssetsDndProvider } from './components/Dnd/AssetsDndProvider.mjs';
 import { DropZoneWithOverlay, DropFilesMessage } from './components/DropZone/UploadDropZone.mjs';
 import { UploadDropZoneProvider } from './components/DropZone/UploadDropZoneContext.mjs';
-import { EmptyState } from './components/EmptyState.mjs';
+import { FilteredEmptyState, EmptyState } from './components/EmptyState.mjs';
+import { FilterBadges } from './components/FilterBadges.mjs';
+import { FilterMenu } from './components/FilterMenu.mjs';
 import { FolderTree } from './components/FolderTree/FolderTree.mjs';
 import { ImportFromUrlDialog } from './components/ImportFromUrlDialog.mjs';
 import { SortMenu } from './components/SortMenu.mjs';
 import { localStorageKeys, viewOptions } from './constants.mjs';
+import { useAssetSearch } from './hooks/useAssetSearch.mjs';
 import { AssetSelectionProvider, useAssetSelection } from './hooks/useAssetSelection.mjs';
 import { useFolderInfo } from './hooks/useFolderInfo.mjs';
 import { useFolderNavigation } from './hooks/useFolderNavigation.mjs';
 import { useInfiniteAssets } from './hooks/useInfiniteAssets.mjs';
+import { useListFilters } from './hooks/useListFilters.mjs';
 import { useListSort } from './hooks/useListSort.mjs';
+import { buildAssetFilters } from './utils/buildAssetFilters.mjs';
 import { getListQueryKey } from './utils/listQueryKey.mjs';
 import { mergeMixedList } from './utils/mergeMixedList.mjs';
 
 const INTERSECTION_OPTIONS = {
     threshold: 0.1
 };
-const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition, onAssetItemClick, onAddAssets })=>{
+const ITEM_COUNT_MESSAGE = {
+    id: getTranslationKey('header.content.item-count'),
+    defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+};
+const SEARCH_RESULTS_COUNT_MESSAGES = {
+    both: {
+        id: getTranslationKey('header.search-results.count'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}}'
+    },
+    folders: {
+        id: getTranslationKey('header.search-results.count.folders'),
+        defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}}'
+    },
+    assets: {
+        id: 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 } = useIntl();
-    const { assets, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error } = useInfiniteAssets({
-        folder: folderId,
-        sort: assetsSort
-    });
-    const { data: folders = [], isLoading: isLoadingFolders } = useGetFoldersQuery({
-        parentId: folderId,
-        sort: foldersSort
-    });
     const isGridView = view === viewOptions.GRID;
     const isLoading = isLoadingAssets || isLoadingFolders;
     // "Folders: Mixed with files" — interleave the complete folder list into the
@@ -95,8 +123,15 @@ const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition,
         });
     }
     if (folders.length === 0 && assets.length === 0) {
-        return /*#__PURE__*/ jsx(EmptyState, {
-            onAddAssets: onAddAssets
+        // 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__*/ jsx(FilteredEmptyState, {
+            onClearFilters: onClearFilters
+        }) : /*#__PURE__*/ jsx(EmptyState, {
+            onAddAssets: onAddAssets,
+            canAddAssets: canAddAssets,
+            searchQuery: searchQuery,
+            onClearSearch: onClearSearch
         });
     }
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -126,6 +161,9 @@ const AssetsView = ({ view, folderId, assetsSort, foldersSort, foldersPosition,
                         defaultMessage: 'Loading more assets...'
                     })
                 })
+            }),
+            /*#__PURE__*/ jsx(BulkActionsBar, {
+                assets: assets
             })
         ]
     });
@@ -197,6 +235,7 @@ const HeaderWrapper = styled(Box)`
 const AssetsPage = ()=>{
     const { formatMessage } = useIntl();
     const { openDetails } = useAssetDetailsParam();
+    const { canCreate, canUpdate } = useMediaLibraryPermissions();
     const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation();
     // Deleted or missing folders (404) need a fetch — handled here, not in
     // `useFolderNavigation` (which only strips malformed ?folder= values).
@@ -214,16 +253,65 @@ const AssetsPage = ()=>{
         navigateToRoot
     ]);
     const { title, itemCount } = useFolderInfo(currentFolderId);
-    const itemCountLabel = formatMessage({
-        id: getTranslationKey('header.content.item-count'),
-        defaultMessage: '{count, plural, =1 {# item} other {# items}}'
+    const { searchQuery, isSearching, clearSearch } = useAssetSearch();
+    const listSort = useListSort();
+    const listFilters = useListFilters();
+    // Resolve relative presets against "now" only when the filters change —
+    // keeps the query args (and RTK cache keys) stable between renders.
+    const builtFilters = useMemo(()=>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({
+        // 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 } = 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 = 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: getTranslationKey('header.search-results'),
+        defaultMessage: 'Search results for "{query}"'
+    }, {
+        query: searchQuery
+    });
+    const numberFolders = folders.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] = useState(false);
     // View state
     const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
@@ -236,6 +324,13 @@ const AssetsPage = ()=>{
     // Upload handlers
     const [uploadFiles] = useUploadFilesMutation();
     const [uploadFromUrls] = 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 } = useGetUploadSettingsQuery();
+    const concurrency = settings?.data?.concurrentUploadRequests ?? 1;
+    // Drives the post-upload AI metadata phase shown per row in the progress dialog.
+    const { isEnabled: isAiMetadataEnabled } = useAIAvailability();
     const uploadFilesToFolder = async (files, folderId)=>{
         if (files.length === 0) return;
         const formData = new FormData();
@@ -253,9 +348,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
         }
     };
@@ -270,33 +367,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();
     // The view is deliberately absent: table and grid render the same list, so
     // toggling views keeps the selection.
     const 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__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(UploadDropZoneProvider, {
                 onDrop: handleDrop,
+                disabled: !canCreate,
                 children: /*#__PURE__*/ jsx(AssetSelectionProvider, {
+                    disabled: !canUpdate,
                     children: /*#__PURE__*/ jsxs(AssetsDndProvider, {
                         children: [
                             /*#__PURE__*/ jsx(ClearSelectionOnChange, {
@@ -309,6 +411,7 @@ const AssetsPage = ()=>{
                                     background: "neutral0",
                                     sideNav: /*#__PURE__*/ jsx(FolderTree, {
                                         currentFolderId: currentFolderId,
+                                        showActiveFolder: !isSearching,
                                         onSelectFolder: navigateToFolderId
                                     }),
                                     children: [
@@ -323,7 +426,7 @@ const AssetsPage = ()=>{
                                         /*#__PURE__*/ jsx(HeaderWrapper, {
                                             children: /*#__PURE__*/ jsx(Layouts.Header, {
                                                 title: pageHeaderTitle,
-                                                primaryAction: /*#__PURE__*/ jsxs(SimpleMenu, {
+                                                primaryAction: canCreate && /*#__PURE__*/ jsxs(SimpleMenu, {
                                                     popoverPlacement: "bottom-end",
                                                     variant: "default",
                                                     endIcon: /*#__PURE__*/ jsx(ChevronDown, {}),
@@ -358,65 +461,77 @@ const AssetsPage = ()=>{
                                                         })
                                                     ]
                                                 }),
-                                                subtitle: /*#__PURE__*/ jsxs(Flex, {
-                                                    justifyContent: "space-between",
-                                                    alignItems: "center",
-                                                    gap: 4,
-                                                    width: "100%",
+                                                subtitle: /*#__PURE__*/ jsxs(Fragment, {
                                                     children: [
-                                                        /*#__PURE__*/ jsx(Flex, {
-                                                            gap: 4,
-                                                            alignItems: "center",
-                                                            children: "TODO: Filters and search"
-                                                        }),
                                                         /*#__PURE__*/ jsxs(Flex, {
+                                                            justifyContent: "space-between",
+                                                            alignItems: "center",
                                                             gap: 4,
-                                                            alignItems: "stretch",
+                                                            width: "100%",
                                                             children: [
-                                                                /*#__PURE__*/ jsx(SortMenu, {
-                                                                    sort: listSort,
-                                                                    showFoldersGroup: !isGridView
+                                                                /*#__PURE__*/ jsxs(Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
+                                                                    children: [
+                                                                        /*#__PURE__*/ jsx(FilterMenu, {
+                                                                            listFilters: listFilters
+                                                                        }),
+                                                                        /*#__PURE__*/ jsx(AssetsSearchInput, {})
+                                                                    ]
                                                                 }),
-                                                                /*#__PURE__*/ jsxs(StyledToggleGroup, {
-                                                                    type: "single",
-                                                                    value: isGridView ? 'grid' : 'table',
-                                                                    onValueChange: (value)=>value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE),
-                                                                    "aria-label": formatMessage({
-                                                                        id: getTranslationKey('view.switch.label'),
-                                                                        defaultMessage: 'View options'
-                                                                    }),
+                                                                /*#__PURE__*/ jsxs(Flex, {
+                                                                    gap: 4,
+                                                                    alignItems: "center",
                                                                     children: [
-                                                                        /*#__PURE__*/ jsxs(StyledToggleItem, {
-                                                                            value: "table",
-                                                                            "aria-label": formatMessage({
-                                                                                id: getTranslationKey('view.table'),
-                                                                                defaultMessage: 'Table view'
-                                                                            }),
-                                                                            children: [
-                                                                                /*#__PURE__*/ jsx(List, {}),
-                                                                                formatMessage({
-                                                                                    id: getTranslationKey('view.table'),
-                                                                                    defaultMessage: 'Table view'
-                                                                                })
-                                                                            ]
+                                                                        /*#__PURE__*/ jsx(SortMenu, {
+                                                                            sort: listSort,
+                                                                            showFoldersGroup: !isGridView
                                                                         }),
-                                                                        /*#__PURE__*/ jsxs(StyledToggleItem, {
-                                                                            value: "grid",
+                                                                        /*#__PURE__*/ jsxs(StyledToggleGroup, {
+                                                                            type: "single",
+                                                                            value: isGridView ? 'grid' : 'table',
+                                                                            onValueChange: (value)=>value && setView(value === 'grid' ? viewOptions.GRID : viewOptions.TABLE),
                                                                             "aria-label": formatMessage({
-                                                                                id: getTranslationKey('view.grid'),
-                                                                                defaultMessage: 'Grid view'
+                                                                                id: getTranslationKey('view.switch.label'),
+                                                                                defaultMessage: 'View options'
                                                                             }),
                                                                             children: [
-                                                                                /*#__PURE__*/ jsx(GridFour, {}),
-                                                                                formatMessage({
-                                                                                    id: getTranslationKey('view.grid'),
-                                                                                    defaultMessage: 'Grid view'
+                                                                                /*#__PURE__*/ jsxs(StyledToggleItem, {
+                                                                                    value: "table",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: getTranslationKey('view.table'),
+                                                                                        defaultMessage: 'Table view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsx(List, {}),
+                                                                                        formatMessage({
+                                                                                            id: getTranslationKey('view.table'),
+                                                                                            defaultMessage: 'Table view'
+                                                                                        })
+                                                                                    ]
+                                                                                }),
+                                                                                /*#__PURE__*/ jsxs(StyledToggleItem, {
+                                                                                    value: "grid",
+                                                                                    "aria-label": formatMessage({
+                                                                                        id: getTranslationKey('view.grid'),
+                                                                                        defaultMessage: 'Grid view'
+                                                                                    }),
+                                                                                    children: [
+                                                                                        /*#__PURE__*/ jsx(GridFour, {}),
+                                                                                        formatMessage({
+                                                                                            id: getTranslationKey('view.grid'),
+                                                                                            defaultMessage: 'Grid view'
+                                                                                        })
+                                                                                    ]
                                                                                 })
                                                                             ]
                                                                         })
                                                                     ]
                                                                 })
                                                             ]
+                                                        }),
+                                                        /*#__PURE__*/ jsx(FilterBadges, {
+                                                            listFilters: listFilters
                                                         })
                                                     ]
                                                 })
@@ -431,20 +546,30 @@ const AssetsPage = ()=>{
                                                     }),
                                                     /*#__PURE__*/ jsx(AssetsView, {
                                                         view: view,
-                                                        folderId: currentFolderId,
+                                                        folders: folders,
+                                                        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__*/ jsx(BulkActionsBar, {})
+                            })
                         ]
                     })
                 })