@strapi/upload 5.12.1 → 5.12.2

package/dist/admin/chunks/App-h5xGw9X8.mjs

@@ -1,972 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import { ConfirmDialog, useNotification, useFetchClient, useTracking, useQueryParams, Layouts, Page, SearchInput, Pagination } from '@strapi/admin/strapi-admin';
-import { useIntl } from 'react-intl';
-import { useLocation, NavLink, useNavigate, Link as Link$1, Routes, Route } from 'react-router-dom';
-import { g as getTrad, a as getFolderURL, u as useFolderCard, b as useBulkRemove, p as pluginId, c as useFolderStructure, S as SelectTree, n as normalizeAPIError, E as EmptyAssets, F as FilterPopover, d as displayedFilters, e as FilterList, B as Breadcrumbs, f as useMediaLibraryPermissions, h as usePersistentState, i as useAssets, j as useFolders, k as containsAssetFilter, l as useFolder, m as useSelectionState, o as SortPicker, v as viewOptions, T as TableList, q as FolderGridList, r as FolderCard, s as FolderCardBody, t as FolderCardBodyAction, A as AssetGridList, U as UploadAssetDialog, w as EditFolderDialog, x as EditAssetDialog, y as localStorageKeys, z as useConfig } from './index-BUqiOq3Y.mjs';
-import 'byte-size';
-import 'date-fns';
-import { stringify } from 'qs';
-import { Box, Checkbox, Dialog, Button, Modal, Flex, Loader, Grid, Field, Typography, Popover, Link, IconButton, VisuallyHidden, Divider } from '@strapi/design-system';
-import { Trash, Folder, Plus, Filter, ArrowLeft, Cog, List, GridFour, Pencil } from '@strapi/icons';
-import { styled } from 'styled-components';
-import { Formik, Form } from 'formik';
-import isEmpty from 'lodash/isEmpty';
-import { useQueryClient, useMutation } from 'react-query';
-import { EmptyPermissions } from '@strapi/icons/symbols';
-import 'yup';
-import 'lodash/isEqual';
-import 'react-select';
-import 'cropperjs';
-import '@mux/mux-player-react';
-import 'cropperjs/dist/cropper.css';
-import 'react-dnd';
-import 'date-fns/parseISO';
-
-const getBreadcrumbDataML = (folder, { pathname, query })=>{
-    const data = [
-        {
-            id: null,
-            label: {
-                id: getTrad('plugin.name'),
-                defaultMessage: 'Media Library'
-            },
-            href: folder ? getFolderURL(pathname, query || {}) : undefined
-        }
-    ];
-    if (folder?.parent && typeof folder?.parent !== 'number' && folder?.parent?.parent) {
-        data.push([]);
-    }
-    if (folder?.parent && typeof folder.parent !== 'number') {
-        data.push({
-            id: folder.parent.id,
-            label: folder.parent.name,
-            href: getFolderURL(pathname, query || {}, {
-                folder: folder.parent.id?.toString(),
-                folderPath: folder.parent.path
-            })
-        });
-    }
-    if (folder) {
-        data.push({
-            id: folder.id,
-            label: folder.name
-        });
-    }
-    return data;
-};
-
-const FolderCardCheckbox = (props)=>{
-    const { id } = useFolderCard();
-    return /*#__PURE__*/ jsx(Box, {
-        position: "relative",
-        zIndex: 2,
-        children: /*#__PURE__*/ jsx(Checkbox, {
-            "aria-labelledby": `${id}-title`,
-            ...props
-        })
-    });
-};
-
-const BulkDeleteButton = ({ selected, onSuccess })=>{
-    const { formatMessage } = useIntl();
-    const { remove } = useBulkRemove();
-    const handleConfirmRemove = async ()=>{
-        await remove(selected);
-        onSuccess();
-    };
-    return /*#__PURE__*/ jsxs(Dialog.Root, {
-        children: [
-            /*#__PURE__*/ jsx(Dialog.Trigger, {
-                children: /*#__PURE__*/ jsx(Button, {
-                    variant: "danger-light",
-                    size: "S",
-                    startIcon: /*#__PURE__*/ jsx(Trash, {}),
-                    children: formatMessage({
-                        id: 'global.delete',
-                        defaultMessage: 'Delete'
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(ConfirmDialog, {
-                onConfirm: handleConfirmRemove
-            })
-        ]
-    });
-};
-
-const useBulkMove = ()=>{
-    const { formatMessage } = useIntl();
-    const { toggleNotification } = useNotification();
-    const queryClient = useQueryClient();
-    const { post } = useFetchClient();
-    const bulkMoveQuery = ({ destinationFolderId, filesAndFolders })=>{
-        const payload = filesAndFolders.reduce((acc, selected)=>{
-            const { id, type } = selected;
-            const key = type === 'asset' ? 'fileIds' : 'folderIds';
-            if (!acc[key]) {
-                acc[key] = [];
-            }
-            acc[key].push(id);
-            return acc;
-        }, {});
-        return post('/upload/actions/bulk-move', {
-            ...payload,
-            destinationFolderId
-        });
-    };
-    const mutation = useMutation(bulkMoveQuery, {
-        onSuccess (res) {
-            const { data: { data } } = res;
-            if (data?.files?.length > 0) {
-                queryClient.refetchQueries([
-                    pluginId,
-                    'assets'
-                ], {
-                    active: true
-                });
-                queryClient.refetchQueries([
-                    pluginId,
-                    'asset-count'
-                ], {
-                    active: true
-                });
-            }
-            // folders need to be re-fetched in any case, because assets might have been
-            // moved into a sub-folder and therefore the count needs to be updated
-            queryClient.refetchQueries([
-                pluginId,
-                'folders'
-            ], {
-                active: true
-            });
-            toggleNotification({
-                type: 'success',
-                message: formatMessage({
-                    id: getTrad('modal.move.success-label'),
-                    defaultMessage: 'Elements have been moved successfully.'
-                })
-            });
-        }
-    });
-    const move = (destinationFolderId, filesAndFolders)=>mutation.mutateAsync({
-            destinationFolderId,
-            filesAndFolders
-        });
-    return {
-        ...mutation,
-        move
-    };
-};
-
-const BulkMoveDialog = ({ onClose, selected = [], currentFolder })=>{
-    const { formatMessage } = useIntl();
-    const { data: folderStructure, isLoading } = useFolderStructure();
-    const { move } = useBulkMove();
-    if (!folderStructure) {
-        return null;
-    }
-    const handleSubmit = async (values, { setErrors })=>{
-        try {
-            if (typeof values.destination !== 'string') {
-                const destinationValue = values.destination.value;
-                await move(destinationValue, selected);
-                onClose();
-            }
-        } catch (error) {
-            const normalizedError = normalizeAPIError(error);
-            if (normalizedError && 'errors' in normalizedError) {
-                const formikErrors = normalizedError.errors?.reduce((acc, error)=>{
-                    acc[error.values?.path?.length || 'destination'] = error.defaultMessage;
-                    return acc;
-                }, {});
-                if (!isEmpty(formikErrors)) {
-                    setErrors(formikErrors);
-                }
-            }
-        }
-    };
-    if (isLoading) {
-        return /*#__PURE__*/ jsx(Modal.Content, {
-            children: /*#__PURE__*/ jsx(Modal.Body, {
-                children: /*#__PURE__*/ jsx(Flex, {
-                    justifyContent: "center",
-                    paddingTop: 4,
-                    paddingBottom: 4,
-                    children: /*#__PURE__*/ jsx(Loader, {
-                        children: formatMessage({
-                            id: getTrad('content.isLoading'),
-                            defaultMessage: 'Content is loading.'
-                        })
-                    })
-                })
-            })
-        });
-    }
-    const initialFormData = {
-        destination: {
-            value: currentFolder?.id || '',
-            label: currentFolder?.name || folderStructure[0].label
-        }
-    };
-    return /*#__PURE__*/ jsx(Modal.Content, {
-        children: /*#__PURE__*/ jsx(Formik, {
-            validateOnChange: false,
-            onSubmit: handleSubmit,
-            initialValues: initialFormData,
-            children: ({ values, errors, setFieldValue })=>/*#__PURE__*/ jsxs(Form, {
-                    noValidate: true,
-                    children: [
-                        /*#__PURE__*/ jsx(Modal.Header, {
-                            children: /*#__PURE__*/ jsx(Modal.Title, {
-                                children: formatMessage({
-                                    id: getTrad('modal.folder.move.title'),
-                                    defaultMessage: 'Move elements to'
-                                })
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(Modal.Body, {
-                            children: /*#__PURE__*/ jsx(Grid.Root, {
-                                gap: 4,
-                                children: /*#__PURE__*/ jsx(Grid.Item, {
-                                    xs: 12,
-                                    col: 12,
-                                    direction: "column",
-                                    alignItems: "stretch",
-                                    children: /*#__PURE__*/ jsxs(Field.Root, {
-                                        id: "folder-destination",
-                                        children: [
-                                            /*#__PURE__*/ jsx(Field.Label, {
-                                                children: formatMessage({
-                                                    id: getTrad('form.input.label.folder-location'),
-                                                    defaultMessage: 'Location'
-                                                })
-                                            }),
-                                            /*#__PURE__*/ jsx(SelectTree, {
-                                                options: folderStructure,
-                                                onChange: (value)=>{
-                                                    setFieldValue('destination', value);
-                                                },
-                                                defaultValue: typeof values.destination !== 'string' ? values.destination : undefined,
-                                                name: "destination",
-                                                menuPortalTarget: document.querySelector('body'),
-                                                inputId: "folder-destination",
-                                                error: errors?.destination,
-                                                ariaErrorMessage: "destination-error"
-                                            }),
-                                            errors.destination && /*#__PURE__*/ jsx(Typography, {
-                                                variant: "pi",
-                                                tag: "p",
-                                                textColor: "danger600",
-                                                children: errors.destination
-                                            })
-                                        ]
-                                    })
-                                })
-                            })
-                        }),
-                        /*#__PURE__*/ jsxs(Modal.Footer, {
-                            children: [
-                                /*#__PURE__*/ jsx(Modal.Close, {
-                                    children: /*#__PURE__*/ jsx(Button, {
-                                        variant: "tertiary",
-                                        name: "cancel",
-                                        children: formatMessage({
-                                            id: 'cancel',
-                                            defaultMessage: 'Cancel'
-                                        })
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Button, {
-                                    type: "submit",
-                                    loading: isLoading,
-                                    children: formatMessage({
-                                        id: 'modal.folder.move.submit',
-                                        defaultMessage: 'Move'
-                                    })
-                                })
-                            ]
-                        })
-                    ]
-                })
-        })
-    });
-};
-
-const BulkMoveButton = ({ selected = [], onSuccess, currentFolder })=>{
-    const { formatMessage } = useIntl();
-    const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
-    const handleConfirmMove = ()=>{
-        setShowConfirmDialog(false);
-        onSuccess();
-    };
-    return /*#__PURE__*/ jsxs(Modal.Root, {
-        open: showConfirmDialog,
-        onOpenChange: setShowConfirmDialog,
-        children: [
-            /*#__PURE__*/ jsx(Modal.Trigger, {
-                children: /*#__PURE__*/ jsx(Button, {
-                    variant: "secondary",
-                    size: "S",
-                    startIcon: /*#__PURE__*/ jsx(Folder, {}),
-                    children: formatMessage({
-                        id: 'global.move',
-                        defaultMessage: 'Move'
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(BulkMoveDialog, {
-                currentFolder: currentFolder,
-                onClose: handleConfirmMove,
-                selected: selected
-            })
-        ]
-    });
-};
-
-const BulkActions = ({ selected = [], onSuccess, currentFolder })=>{
-    const { formatMessage } = useIntl();
-    const numberAssets = selected?.reduce(function(_this, val) {
-        return val?.type === 'folder' && 'files' in val && val?.files && 'count' in val.files ? _this + val?.files?.count : _this + 1;
-    }, 0);
-    return /*#__PURE__*/ jsxs(Flex, {
-        gap: 2,
-        paddingBottom: 5,
-        children: [
-            /*#__PURE__*/ jsx(Typography, {
-                variant: "epsilon",
-                textColor: "neutral600",
-                children: formatMessage({
-                    id: getTrad('list.assets.selected'),
-                    defaultMessage: '{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}} selected'
-                }, {
-                    numberFolders: selected?.filter(({ type })=>type === 'folder').length,
-                    numberAssets
-                })
-            }),
-            /*#__PURE__*/ jsx(BulkDeleteButton, {
-                selected: selected,
-                onSuccess: onSuccess
-            }),
-            /*#__PURE__*/ jsx(BulkMoveButton, {
-                currentFolder: currentFolder,
-                selected: selected,
-                onSuccess: onSuccess
-            })
-        ]
-    });
-};
-
-const getContentIntlMessage = ({ isFiltering, canCreate, canRead })=>{
-    if (isFiltering) {
-        return {
-            id: 'list.assets-empty.title-withSearch',
-            defaultMessage: 'There are no elements with the applied filters'
-        };
-    }
-    if (canRead) {
-        if (canCreate) {
-            return {
-                id: 'list.assets.empty-upload',
-                defaultMessage: 'Upload your first assets...'
-            };
-        }
-        return {
-            id: 'list.assets.empty',
-            defaultMessage: 'Media Library is empty'
-        };
-    }
-    return {
-        id: 'header.actions.no-permissions',
-        defaultMessage: 'No permissions to view'
-    };
-};
-const EmptyOrNoPermissions = ({ canCreate, isFiltering, canRead, onActionClick })=>{
-    const { formatMessage } = useIntl();
-    const content = getContentIntlMessage({
-        isFiltering,
-        canCreate,
-        canRead
-    });
-    return /*#__PURE__*/ jsx(EmptyAssets, {
-        icon: !canRead ? EmptyPermissions : undefined,
-        action: canCreate && !isFiltering && /*#__PURE__*/ jsx(Button, {
-            variant: "secondary",
-            startIcon: /*#__PURE__*/ jsx(Plus, {}),
-            onClick: onActionClick,
-            children: formatMessage({
-                id: getTrad('header.actions.add-assets'),
-                defaultMessage: 'Add new assets'
-            })
-        }),
-        content: formatMessage({
-            ...content,
-            id: getTrad(content.id)
-        })
-    });
-};
-
-const Filters = ()=>{
-    const [open, setOpen] = React.useState(false);
-    const { formatMessage } = useIntl();
-    const { trackUsage } = useTracking();
-    const [{ query }, setQuery] = useQueryParams();
-    const filters = query?.filters?.$and || [];
-    const handleRemoveFilter = (nextFilters)=>{
-        setQuery({
-            filters: {
-                $and: nextFilters
-            },
-            page: 1
-        });
-    };
-    const handleSubmit = (filters)=>{
-        trackUsage('didFilterMediaLibraryElements', {
-            location: 'content-manager',
-            filter: Object.keys(filters[filters.length - 1])[0]
-        });
-        setQuery({
-            filters: {
-                $and: filters
-            },
-            page: 1
-        });
-    };
-    return /*#__PURE__*/ jsxs(Popover.Root, {
-        open: open,
-        onOpenChange: setOpen,
-        children: [
-            /*#__PURE__*/ jsx(Popover.Trigger, {
-                children: /*#__PURE__*/ jsx(Button, {
-                    variant: "tertiary",
-                    startIcon: /*#__PURE__*/ jsx(Filter, {}),
-                    size: "S",
-                    children: formatMessage({
-                        id: 'app.utils.filters',
-                        defaultMessage: 'Filters'
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsx(FilterPopover, {
-                displayedFilters: displayedFilters,
-                filters: filters,
-                onSubmit: handleSubmit,
-                onToggle: setOpen
-            }),
-            /*#__PURE__*/ jsx(FilterList, {
-                appliedFilters: filters,
-                filtersSchema: displayedFilters,
-                onRemoveFilter: handleRemoveFilter
-            })
-        ]
-    });
-};
-
-const Header = ({ breadcrumbs = null, canCreate, folder = null, onToggleEditFolderDialog, onToggleUploadAssetDialog })=>{
-    const { formatMessage } = useIntl();
-    const { pathname } = useLocation();
-    const [{ query }] = useQueryParams();
-    const backQuery = {
-        ...query,
-        folder: folder?.parent && typeof folder.parent !== 'number' && folder.parent.id ? folder.parent.id : undefined,
-        folderPath: folder?.parent && typeof folder.parent !== 'number' && folder.parent.path ? folder.parent.path : undefined
-    };
-    return /*#__PURE__*/ jsx(Layouts.Header, {
-        title: formatMessage({
-            id: getTrad('plugin.name'),
-            defaultMessage: `Media Library`
-        }),
-        subtitle: breadcrumbs && typeof breadcrumbs !== 'boolean' && folder && /*#__PURE__*/ jsx(Breadcrumbs, {
-            label: formatMessage({
-                id: getTrad('header.breadcrumbs.nav.label'),
-                defaultMessage: 'Folders navigation'
-            }),
-            breadcrumbs: breadcrumbs,
-            currentFolderId: folder?.id
-        }),
-        navigationAction: folder && /*#__PURE__*/ jsx(Link, {
-            tag: NavLink,
-            startIcon: /*#__PURE__*/ jsx(ArrowLeft, {}),
-            to: `${pathname}?${stringify(backQuery, {
-                encode: false
-            })}`,
-            children: formatMessage({
-                id: getTrad('header.actions.folder-level-up'),
-                defaultMessage: 'Back'
-            })
-        }),
-        primaryAction: canCreate && /*#__PURE__*/ jsxs(Flex, {
-            gap: 2,
-            children: [
-                /*#__PURE__*/ jsx(Button, {
-                    startIcon: /*#__PURE__*/ jsx(Plus, {}),
-                    variant: "secondary",
-                    onClick: onToggleEditFolderDialog,
-                    children: formatMessage({
-                        id: getTrad('header.actions.add-folder'),
-                        defaultMessage: 'Add new folder'
-                    })
-                }),
-                /*#__PURE__*/ jsx(Button, {
-                    startIcon: /*#__PURE__*/ jsx(Plus, {}),
-                    onClick: onToggleUploadAssetDialog,
-                    children: formatMessage({
-                        id: getTrad('header.actions.add-assets'),
-                        defaultMessage: 'Add new assets'
-                    })
-                })
-            ]
-        })
-    });
-};
-
-// TODO: find a better naming convention for the file that was an index file before
-const BoxWithHeight = styled(Box)`
-  height: 3.2rem;
-  display: flex;
-  align-items: center;
-`;
-const TypographyMaxWidth = styled(Typography)`
-  max-width: 100%;
-`;
-const ActionContainer = styled(Box)`
-  svg {
-    path {
-      fill: ${({ theme })=>theme.colors.neutral500};
-    }
-  }
-`;
-const MediaLibrary = ()=>{
-    const navigate = useNavigate();
-    const { canRead, canCreate, canUpdate, canCopyLink, canDownload, canConfigureView, isLoading: permissionsLoading } = useMediaLibraryPermissions();
-    const currentFolderToEditRef = React.useRef();
-    const { formatMessage } = useIntl();
-    const { pathname } = useLocation();
-    const { trackUsage } = useTracking();
-    const [{ query }, setQuery] = useQueryParams();
-    const isFiltering = Boolean(query._q || query.filters);
-    const [view, setView] = usePersistentState(localStorageKeys.view, viewOptions.GRID);
-    const isGridView = view === viewOptions.GRID;
-    const { data: assetsData, isLoading: assetsLoading, error: assetsError } = useAssets({
-        skipWhen: !canRead,
-        query
-    });
-    const { data: foldersData, isLoading: foldersLoading, error: foldersError } = useFolders({
-        enabled: canRead && assetsData?.pagination?.page === 1 && !containsAssetFilter(query),
-        query
-    });
-    const { data: currentFolder, isLoading: isCurrentFolderLoading, error: currentFolderError } = useFolder(query?.folder, {
-        enabled: canRead && !!query?.folder
-    });
-    // Folder was not found: redirect to the media library root
-    if (currentFolderError?.name === 'NotFoundError') {
-        navigate(pathname);
-    }
-    const folders = foldersData?.map((folder)=>({
-            ...folder,
-            type: 'folder',
-            folderURL: getFolderURL(pathname, query, {
-                folder: folder.id.toString(),
-                folderPath: folder.path
-            }),
-            isSelectable: canUpdate
-        })) ?? [];
-    const folderCount = folders?.length || 0;
-    const assets = assetsData?.results?.map((asset)=>({
-            ...asset,
-            type: 'asset',
-            isSelectable: canUpdate
-        })) || [];
-    const assetCount = assets?.length ?? 0;
-    const totalAssetCount = assetsData?.pagination?.total;
-    const isLoading = isCurrentFolderLoading || foldersLoading || permissionsLoading || assetsLoading;
-    const [showUploadAssetDialog, setShowUploadAssetDialog] = React.useState(false);
-    const [showEditFolderDialog, setShowEditFolderDialog] = React.useState(false);
-    const [assetToEdit, setAssetToEdit] = React.useState(undefined);
-    const [folderToEdit, setFolderToEdit] = React.useState(undefined);
-    const [selected, { selectOne, selectAll }] = useSelectionState([
-        'type',
-        'id'
-    ], []);
-    const indeterminateBulkSelect = selected?.length > 0 && selected?.length !== assetCount + folderCount;
-    const toggleUploadAssetDialog = ()=>setShowUploadAssetDialog((prev)=>!prev);
-    const toggleEditFolderDialog = ({ created = false } = {})=>{
-        // folders are only displayed on the first page, therefore
-        // we have to navigate the user to that page, in case a folder
-        // was created successfully in order for them to see it
-        if (created && query?.page !== '1') {
-            setQuery({
-                ...query,
-                page: 1
-            });
-        }
-        setShowEditFolderDialog((prev)=>!prev);
-    };
-    const handleBulkSelect = (checked, elements)=>{
-        if (checked) {
-            trackUsage('didSelectAllMediaLibraryElements');
-        }
-        selectAll(elements);
-    };
-    const handleChangeSort = (value)=>{
-        trackUsage('didSortMediaLibraryElements', {
-            location: 'upload',
-            sort: value
-        });
-        setQuery({
-            sort: value
-        });
-    };
-    const handleEditFolder = (folder)=>{
-        setFolderToEdit(folder);
-        setShowEditFolderDialog(true);
-    };
-    const handleEditFolderClose = (payload)=>{
-        setFolderToEdit(null);
-        toggleEditFolderDialog(payload);
-        if (currentFolderToEditRef.current) {
-            currentFolderToEditRef.current.focus();
-        }
-    };
-    const handleAssetDeleted = (numberOfAssets)=>{
-        if (numberOfAssets === assetCount && assetsData?.pagination?.page === assetsData?.pagination?.pageCount && assetsData?.pagination?.page && assetsData.pagination.page > 1) {
-            setQuery({
-                ...query,
-                page: assetsData.pagination.page - 1
-            });
-        }
-    };
-    const handleBulkActionSuccess = ()=>{
-        selectAll();
-        handleAssetDeleted(selected.length);
-    };
-    if (isLoading) {
-        return /*#__PURE__*/ jsx(Page.Loading, {});
-    }
-    if (assetsError || foldersError) {
-        return /*#__PURE__*/ jsx(Page.Error, {});
-    }
-    return /*#__PURE__*/ jsxs(Layouts.Root, {
-        children: [
-            /*#__PURE__*/ jsxs(Page.Main, {
-                children: [
-                    /*#__PURE__*/ jsx(Header, {
-                        breadcrumbs: !isCurrentFolderLoading ? getBreadcrumbDataML(currentFolder, {
-                            pathname,
-                            query
-                        }) : null,
-                        canCreate: canCreate,
-                        onToggleEditFolderDialog: toggleEditFolderDialog,
-                        onToggleUploadAssetDialog: toggleUploadAssetDialog,
-                        folder: currentFolder
-                    }),
-                    /*#__PURE__*/ jsx(Layouts.Action, {
-                        startActions: /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                canUpdate && isGridView && (assetCount > 0 || folderCount > 0) && /*#__PURE__*/ jsx(BoxWithHeight, {
-                                    paddingLeft: 2,
-                                    paddingRight: 2,
-                                    background: "neutral0",
-                                    hasRadius: true,
-                                    borderColor: "neutral200",
-                                    children: /*#__PURE__*/ jsx(Checkbox, {
-                                        "aria-label": formatMessage({
-                                            id: getTrad('bulk.select.label'),
-                                            defaultMessage: 'Select all folders & assets'
-                                        }),
-                                        checked: indeterminateBulkSelect ? 'indeterminate' : (assetCount > 0 || folderCount > 0) && selected.length === assetCount + folderCount,
-                                        onCheckedChange: (e)=>handleBulkSelect(e, [
-                                                ...assets,
-                                                ...folders
-                                            ])
-                                    })
-                                }),
-                                canRead && isGridView && /*#__PURE__*/ jsx(SortPicker, {
-                                    value: query?.sort,
-                                    onChangeSort: handleChangeSort
-                                }),
-                                canRead && /*#__PURE__*/ jsx(Filters, {})
-                            ]
-                        }),
-                        endActions: /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                canConfigureView ? /*#__PURE__*/ jsx(ActionContainer, {
-                                    paddingTop: 1,
-                                    paddingBottom: 1,
-                                    children: /*#__PURE__*/ jsx(IconButton, {
-                                        tag: Link$1,
-                                        to: {
-                                            pathname: `${pathname}/configuration`,
-                                            search: stringify(query, {
-                                                encode: false
-                                            })
-                                        },
-                                        label: formatMessage({
-                                            id: 'app.links.configure-view',
-                                            defaultMessage: 'Configure the view'
-                                        }),
-                                        children: /*#__PURE__*/ jsx(Cog, {})
-                                    })
-                                }) : null,
-                                /*#__PURE__*/ jsx(ActionContainer, {
-                                    paddingTop: 1,
-                                    paddingBottom: 1,
-                                    children: /*#__PURE__*/ jsx(IconButton, {
-                                        label: isGridView ? formatMessage({
-                                            id: getTrad('view-switch.list'),
-                                            defaultMessage: 'List View'
-                                        }) : formatMessage({
-                                            id: getTrad('view-switch.grid'),
-                                            defaultMessage: 'Grid View'
-                                        }),
-                                        onClick: ()=>setView(isGridView ? viewOptions.LIST : viewOptions.GRID),
-                                        children: isGridView ? /*#__PURE__*/ jsx(List, {}) : /*#__PURE__*/ jsx(GridFour, {})
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(SearchInput, {
-                                    label: formatMessage({
-                                        id: getTrad('search.label'),
-                                        defaultMessage: 'Search for an asset'
-                                    }),
-                                    trackedEvent: "didSearchMediaLibraryElements",
-                                    trackedEventDetails: {
-                                        location: 'upload'
-                                    }
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs(Layouts.Content, {
-                        children: [
-                            selected.length > 0 && /*#__PURE__*/ jsx(BulkActions, {
-                                currentFolder: currentFolder,
-                                selected: selected,
-                                onSuccess: handleBulkActionSuccess
-                            }),
-                            folderCount === 0 && assetCount === 0 && /*#__PURE__*/ jsx(EmptyOrNoPermissions, {
-                                canCreate: canCreate,
-                                canRead: canRead,
-                                isFiltering: isFiltering,
-                                onActionClick: toggleUploadAssetDialog
-                            }),
-                            canRead && !isGridView && (assetCount > 0 || folderCount > 0) && /*#__PURE__*/ jsx(TableList, {
-                                assetCount: assetCount,
-                                folderCount: folderCount,
-                                indeterminate: indeterminateBulkSelect,
-                                onChangeSort: handleChangeSort,
-                                onChangeFolder: (folderID, folderPath)=>navigate(getFolderURL(pathname, query, {
-                                        folder: folderID.toString(),
-                                        folderPath
-                                    })),
-                                onEditAsset: setAssetToEdit,
-                                onEditFolder: handleEditFolder,
-                                onSelectOne: selectOne,
-                                onSelectAll: handleBulkSelect,
-                                rows: [
-                                    ...folders,
-                                    ...assets
-                                ],
-                                selected: selected,
-                                shouldDisableBulkSelect: !canUpdate,
-                                sortQuery: query?.sort ?? ''
-                            }),
-                            canRead && isGridView && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    folderCount > 0 && /*#__PURE__*/ jsx(FolderGridList, {
-                                        title: (isFiltering && assetCount > 0 || !isFiltering) && formatMessage({
-                                            id: getTrad('list.folders.title'),
-                                            defaultMessage: 'Folders ({count})'
-                                        }, {
-                                            count: folderCount
-                                        }) || '',
-                                        children: folders.map((folder)=>{
-                                            const selectedFolders = selected.filter(({ type })=>type === 'folder');
-                                            const isSelected = !!selectedFolders.find((currentFolder)=>currentFolder.id === folder.id);
-                                            const url = getFolderURL(pathname, query, {
-                                                folder: folder?.id.toString(),
-                                                folderPath: folder?.path
-                                            });
-                                            return /*#__PURE__*/ jsx(Grid.Item, {
-                                                col: 3,
-                                                direction: "column",
-                                                alignItems: "stretch",
-                                                children: /*#__PURE__*/ jsx(FolderCard, {
-                                                    ref: folderToEdit && folder.id === folderToEdit.id ? currentFolderToEditRef : undefined,
-                                                    ariaLabel: folder.name,
-                                                    id: `folder-${folder.id}`,
-                                                    to: url,
-                                                    startAction: folder.isSelectable ? /*#__PURE__*/ jsx(FolderCardCheckbox, {
-                                                        "data-testid": `folder-checkbox-${folder.id}`,
-                                                        checked: isSelected,
-                                                        onCheckedChange: ()=>selectOne(folder)
-                                                    }) : null,
-                                                    cardActions: /*#__PURE__*/ jsx(IconButton, {
-                                                        label: formatMessage({
-                                                            id: getTrad('list.folder.edit'),
-                                                            defaultMessage: 'Edit folder'
-                                                        }),
-                                                        onClick: ()=>handleEditFolder(folder),
-                                                        children: /*#__PURE__*/ jsx(Pencil, {})
-                                                    }),
-                                                    children: /*#__PURE__*/ jsx(FolderCardBody, {
-                                                        children: /*#__PURE__*/ jsx(FolderCardBodyAction, {
-                                                            to: url,
-                                                            children: /*#__PURE__*/ jsxs(Flex, {
-                                                                tag: "h2",
-                                                                direction: "column",
-                                                                alignItems: "start",
-                                                                maxWidth: "100%",
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxs(TypographyMaxWidth, {
-                                                                        fontWeight: "semiBold",
-                                                                        textColor: "neutral800",
-                                                                        ellipsis: true,
-                                                                        children: [
-                                                                            folder.name,
-                                                                            /*#__PURE__*/ jsx(VisuallyHidden, {
-                                                                                children: ":"
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    /*#__PURE__*/ jsx(TypographyMaxWidth, {
-                                                                        tag: "span",
-                                                                        textColor: "neutral600",
-                                                                        variant: "pi",
-                                                                        ellipsis: true,
-                                                                        children: formatMessage({
-                                                                            id: getTrad('list.folder.subtitle'),
-                                                                            defaultMessage: '{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}'
-                                                                        }, {
-                                                                            folderCount: folder.children?.count,
-                                                                            filesCount: folder.files?.count
-                                                                        })
-                                                                    })
-                                                                ]
-                                                            })
-                                                        })
-                                                    })
-                                                })
-                                            }, `folder-${folder.id}`);
-                                        })
-                                    }),
-                                    assetCount > 0 && folderCount > 0 && /*#__PURE__*/ jsx(Box, {
-                                        paddingTop: 6,
-                                        paddingBottom: 4,
-                                        children: /*#__PURE__*/ jsx(Divider, {})
-                                    }),
-                                    assetCount > 0 && /*#__PURE__*/ jsx(AssetGridList, {
-                                        assets: assets,
-                                        onEditAsset: setAssetToEdit,
-                                        onSelectAsset: selectOne,
-                                        selectedAssets: selected.filter(({ type })=>type === 'asset'),
-                                        title: (!isFiltering || isFiltering && folderCount > 0) && assetsData?.pagination?.page === 1 && formatMessage({
-                                            id: getTrad('list.assets.title'),
-                                            defaultMessage: 'Assets ({count})'
-                                        }, {
-                                            count: totalAssetCount
-                                        }) || ''
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs(Pagination.Root, {
-                                ...assetsData?.pagination,
-                                children: [
-                                    /*#__PURE__*/ jsx(Pagination.PageSize, {}),
-                                    /*#__PURE__*/ jsx(Pagination.Links, {})
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            }),
-            showUploadAssetDialog && /*#__PURE__*/ jsx(UploadAssetDialog, {
-                open: showUploadAssetDialog,
-                onClose: toggleUploadAssetDialog,
-                trackedLocation: "upload",
-                folderId: query?.folder
-            }),
-            showEditFolderDialog && /*#__PURE__*/ jsx(EditFolderDialog, {
-                open: showEditFolderDialog,
-                onClose: ()=>handleEditFolderClose(),
-                folder: folderToEdit,
-                parentFolderId: query?.folder,
-                location: "upload"
-            }),
-            assetToEdit && /*#__PURE__*/ jsx(EditAssetDialog, {
-                onClose: (editedAsset)=>{
-                    // The asset has been deleted
-                    if (editedAsset === null) {
-                        handleAssetDeleted(1);
-                    }
-                    setAssetToEdit(undefined);
-                },
-                open: !!assetToEdit,
-                asset: assetToEdit,
-                canUpdate: canUpdate,
-                canCopyLink: canCopyLink,
-                canDownload: canDownload,
-                trackedLocation: "upload"
-            })
-        ]
-    });
-};
-
-// TODO: find a better naming convention for the file that was an index file before
-const ConfigureTheView = /*#__PURE__*/ React.lazy(async ()=>import('./ConfigureTheView-CO72K73d.mjs').then((mod)=>({
-            default: mod.ConfigureTheView
-        })));
-const Upload = ()=>{
-    const { config: { isLoading, isError, data: config } } = useConfig();
-    const [{ rawQuery }, setQuery] = useQueryParams();
-    const { formatMessage } = useIntl();
-    const title = formatMessage({
-        id: getTrad('plugin.name'),
-        defaultMessage: 'Media Library'
-    });
-    React.useEffect(()=>{
-        if (isLoading || isError || rawQuery) {
-            return;
-        }
-        setQuery({
-            sort: config.sort,
-            page: 1,
-            pageSize: config.pageSize
-        });
-    }, [
-        isLoading,
-        isError,
-        config,
-        rawQuery,
-        setQuery
-    ]);
-    if (isLoading) {
-        return /*#__PURE__*/ jsx(Page.Loading, {});
-    }
-    return /*#__PURE__*/ jsxs(Page.Main, {
-        children: [
-            /*#__PURE__*/ jsx(Page.Title, {
-                children: title
-            }),
-            rawQuery ? /*#__PURE__*/ jsx(React.Suspense, {
-                fallback: /*#__PURE__*/ jsx(Page.Loading, {}),
-                children: /*#__PURE__*/ jsxs(Routes, {
-                    children: [
-                        /*#__PURE__*/ jsx(Route, {
-                            index: true,
-                            element: /*#__PURE__*/ jsx(MediaLibrary, {})
-                        }),
-                        /*#__PURE__*/ jsx(Route, {
-                            path: "configuration",
-                            element: /*#__PURE__*/ jsx(ConfigureTheView, {
-                                config: config
-                            })
-                        })
-                    ]
-                })
-            }) : null
-        ]
-    });
-};
-
-export { Upload };
-//# sourceMappingURL=App-h5xGw9X8.mjs.map