@strapi/upload 5.52.1 → 5.52.3

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.mjs

@@ -1,13 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useQueryParams, useNotification, Form, Blocker, getDisplayName, useForm, useField, useClipboard } from '@strapi/admin/strapi-admin';
-import { VisuallyHidden, Flex, Loader, Alert, Typography, Box, Button, IconButton, Field, TextInput, Tooltip, SingleSelect, SingleSelectOption, Dialog } from '@strapi/design-system';
+import { useQueryParams, withEncodedUserParams, useNotification, Form, Blocker, getDisplayName, useForm, useField, useClipboard } from '@strapi/admin/strapi-admin';
+import { VisuallyHidden, Flex, Loader, Alert, Box, Typography, Button, IconButton, Field, TextInput, Tooltip, SingleSelect, SingleSelectOption, Dialog } from '@strapi/design-system';
 import { FileError, ArrowLineRight, Crop, Trash, WarningCircle, Link, Download, ArrowsCounterClockwise } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { ASSET_TYPES } from '../../../../../enums.mjs';
 import { Drawer } from '../../../../components/Drawer.mjs';
 import { useAIMetadataEnabled } from '../../../../hooks/useAIMetadataEnabled.mjs';
+import { useApiErrorMessage } from '../../../../hooks/useApiErrorMessage.mjs';
 import { useMediaLibraryPermissions } from '../../../../hooks/useMediaLibraryPermissions.mjs';
 import { useTracking, MEDIA_LIBRARY_LOCATION } from '../../../../hooks/useTracking.mjs';
 import { useUploadFileSilentlyMutation } from '../../../../services/api.mjs';
@@ -18,12 +19,11 @@ import { formatBytes, getFileExtension, prefixFileUrlWithBackendUrl } from '../.
 import { getAssetIcon } from '../../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../../utils/translations.mjs';
 import { useFolderInfo } from '../../hooks/useFolderInfo.mjs';
+import { parseAssetDetailsId, ASSET_DETAILS_URL_PARAM } from '../../hooks/useIsAssetDetailsOpen.mjs';
 import { BusyOverlay } from '../BusyOverlay.mjs';
 import { AssetCropEditor } from './AssetCropEditor.mjs';
 import { AssetPreview } from './AssetPreview.mjs';
 
-// Name of the parameter to look for in the URL to open the drawer
-const URL_PARAM = 'assetId';
 const DrawerNotifyContext = /*#__PURE__*/ React.createContext(null);
 const useDrawerNotify = ()=>{
     const ctx = React.useContext(DrawerNotifyContext);
@@ -41,12 +41,11 @@ const useAssetOperation = ()=>{
     return ctx;
 };
 /* -------------------------------------------------------------------------------------------------
- * useAssetDetailsParam - sync drawer visibility with URL ?{URL_PARAM}={id}
+ * useAssetDetailsParam - sync drawer visibility with URL ?{ASSET_DETAILS_URL_PARAM}={id}
  * -----------------------------------------------------------------------------------------------*/ const useAssetDetailsParam = ()=>{
     const [{ query }, setQuery] = useQueryParams();
-    const detailsId = query?.[URL_PARAM];
-    const assetId = detailsId ? parseInt(detailsId, 10) : null;
-    const hasValidId = assetId !== null && !Number.isNaN(assetId);
+    const assetId = parseAssetDetailsId(query?.[ASSET_DETAILS_URL_PARAM]);
+    const hasValidId = assetId !== null;
     // Closing is driven by removing the URL param (a navigation), so navigation
     // guards like <Blocker> can intercept it. `isMounted` keeps the drawer in the
     // tree through the slide-out: it stays true once opened and only flips false
@@ -72,17 +71,19 @@ const useAssetOperation = ()=>{
         hasValidId
     ]);
     const openDetails = React.useCallback((id)=>{
-        setQuery({
-            [URL_PARAM]: String(id)
-        }, 'push', true);
+        setQuery(withEncodedUserParams(query, {
+            [ASSET_DETAILS_URL_PARAM]: String(id)
+        }), 'push', true);
     }, [
+        query,
         setQuery
     ]);
     const closeDetails = React.useCallback(()=>{
-        setQuery({
-            [URL_PARAM]: undefined
-        }, 'remove', true);
+        setQuery(withEncodedUserParams(query, {
+            [ASSET_DETAILS_URL_PARAM]: undefined
+        }), 'push', true);
     }, [
+        query,
         setQuery
     ]);
     return {
@@ -286,7 +287,6 @@ const LocationField = ({ label, rootLabel, folders, disabled })=>{
         children: [
             /*#__PURE__*/ jsx(Dialog.Trigger, {
                 children: /*#__PURE__*/ jsx(IconButton, {
-                    withTooltip: false,
                     label: triggerLabel,
                     variant: "danger-light",
                     children: /*#__PURE__*/ jsx(Trash, {})
@@ -364,7 +364,6 @@ const CopyLinkButton = ({ asset })=>{
         });
     };
     return /*#__PURE__*/ jsx(IconButton, {
-        withTooltip: false,
         label: formatMessage({
             id: getTranslationKey('asset-details.copy-link.trigger'),
             defaultMessage: 'Copy link'
@@ -397,7 +396,6 @@ const DownloadAssetButton = ({ asset })=>{
         }
     };
     return /*#__PURE__*/ jsx(IconButton, {
-        withTooltip: false,
         label: formatMessage({
             id: getTranslationKey('asset-details.download.trigger'),
             defaultMessage: 'Download'
@@ -441,6 +439,7 @@ const ReplaceAssetButton = ({ mime })=>{
                 children: /*#__PURE__*/ jsx("input", {
                     ref: fileInputRef,
                     type: "file",
+                    accept: mime ?? '',
                     multiple: false,
                     onChange: handleFileChange,
                     "aria-hidden": true,
@@ -448,7 +447,6 @@ const ReplaceAssetButton = ({ mime })=>{
                 })
             }),
             /*#__PURE__*/ jsx(IconButton, {
-                withTooltip: false,
                 label: formatMessage({
                     id: getTranslationKey('asset-details.replace.trigger'),
                     defaultMessage: 'Replace this file'
@@ -523,32 +521,27 @@ const ReplaceAssetButton = ({ mime })=>{
         ]
     });
 };
-const AssetImageActions = ({ onCrop, mime })=>{
+const AssetImageActions = ({ onCrop })=>{
     const { formatMessage } = useIntl();
     const isSubmitting = useForm('AssetImageActions', (state)=>state.isSubmitting);
-    return /*#__PURE__*/ jsxs(Flex, {
+    return /*#__PURE__*/ jsx(Flex, {
         direction: "column",
         gap: 2,
-        children: [
-            /*#__PURE__*/ jsx(IconButton, {
-                withTooltip: false,
-                label: formatMessage({
-                    id: getTranslationKey('asset-details.crop.trigger'),
-                    defaultMessage: 'Crop'
-                }),
-                variant: "tertiary",
-                onClick: onCrop,
-                disabled: isSubmitting || !onCrop,
-                children: /*#__PURE__*/ jsx(Crop, {})
+        children: /*#__PURE__*/ jsx(IconButton, {
+            label: formatMessage({
+                id: getTranslationKey('asset-details.crop.trigger'),
+                defaultMessage: 'Crop'
             }),
-            /*#__PURE__*/ jsx(ReplaceAssetButton, {
-                mime: mime
-            })
-        ]
+            variant: "tertiary",
+            onClick: onCrop,
+            disabled: isSubmitting || !onCrop,
+            children: /*#__PURE__*/ jsx(Crop, {})
+        })
     });
 };
 const AssetDetails = ({ asset, closeDetails })=>{
     const { formatMessage, formatDate } = useIntl();
+    const getErrorMessage = useApiErrorMessage();
     const { canCreate, canUpdate, canDownload, canCopyLink } = useMediaLibraryPermissions();
     const { data: folders = [] } = useGetAllFoldersQuery();
     const { toggleNotification } = useNotification();
@@ -591,10 +584,10 @@ const AssetDetails = ({ asset, closeDetails })=>{
         if ('error' in res) {
             notify({
                 type: 'danger',
-                message: formatMessage({
+                message: getErrorMessage(res.error, formatMessage({
                     id: getTranslationKey('asset-details.update.error'),
                     defaultMessage: 'Failed to update the file.'
-                })
+                }))
             });
             return;
         }
@@ -617,17 +610,18 @@ const AssetDetails = ({ asset, closeDetails })=>{
     const handleReplace = React.useCallback(async (file)=>{
         const res = await replaceMutation({
             id: asset.id,
-            file
+            file,
+            fileInfo: {
+                name: asset.name
+            }
         });
         if ('error' in res) {
-            const error = res.error;
-            const message = error?.data?.error?.message ?? error?.data?.message ?? formatMessage({
-                id: getTranslationKey('asset-details.replace.error'),
-                defaultMessage: 'Failed to replace the file.'
-            });
             notify({
                 type: 'danger',
-                message
+                message: getErrorMessage(res.error, formatMessage({
+                    id: getTranslationKey('asset-details.replace.error'),
+                    defaultMessage: 'Failed to replace the file.'
+                }))
             });
             return;
         }
@@ -643,7 +637,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
         });
     }, [
         asset.id,
+        asset.name,
         formatMessage,
+        getErrorMessage,
         notify,
         replaceMutation,
         trackUsage
@@ -653,14 +649,12 @@ const AssetDetails = ({ asset, closeDetails })=>{
     const handleDelete = React.useCallback(async ()=>{
         const res = await deleteMutation(asset.id);
         if ('error' in res) {
-            const error = res.error;
-            const message = error?.data?.error?.message ?? error?.data?.message ?? formatMessage({
-                id: getTranslationKey('asset-details.delete.error'),
-                defaultMessage: 'Failed to delete the asset.'
-            });
             notify({
                 type: 'danger',
-                message
+                message: getErrorMessage(res.error, formatMessage({
+                    id: getTranslationKey('asset-details.delete.error'),
+                    defaultMessage: 'Failed to delete the asset.'
+                }))
             });
             return;
         }
@@ -680,16 +674,17 @@ const AssetDetails = ({ asset, closeDetails })=>{
         deleteMutation,
         folderName,
         formatMessage,
+        getErrorMessage,
         notify,
         toggleNotification
     ]);
-    const notifyCropError = ()=>{
+    const notifyCropError = (error)=>{
         notify({
             type: 'danger',
-            message: formatMessage({
+            message: getErrorMessage(error, formatMessage({
                 id: getTranslationKey('asset-details.crop.error'),
                 defaultMessage: 'Failed to crop the file.'
-            })
+            }))
         });
     };
     // Apply: replace the original binary with the cropped file + focal point.
@@ -705,7 +700,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
             }
         });
         if ('error' in res) {
-            notifyCropError();
+            notifyCropError(res.error);
             return;
         }
         trackUsage('didCropFile', {
@@ -736,7 +731,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
             }
         });
         if ('error' in res) {
-            notifyCropError();
+            notifyCropError(res.error);
             return;
         }
         trackUsage('didCropFile', {
@@ -811,8 +806,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                         /*#__PURE__*/ jsx(AssetPreview, {
                                             asset: asset,
                                             actions: isImage && canUpdate ? /*#__PURE__*/ jsx(AssetImageActions, {
-                                                onCrop: ()=>setIsCropOpen(true),
-                                                mime: asset.mime
+                                                onCrop: ()=>setIsCropOpen(true)
                                             }) : null
                                         }),
                                         /*#__PURE__*/ jsxs(Flex, {
@@ -965,6 +959,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                 }),
                                                 canDownload && /*#__PURE__*/ jsx(DownloadAssetButton, {
                                                     asset: asset
+                                                }),
+                                                canUpdate && /*#__PURE__*/ jsx(ReplaceAssetButton, {
+                                                    mime: asset.mime
                                                 })
                                             ]
                                         }),
@@ -989,6 +986,18 @@ const AssetDetails = ({ asset, closeDetails })=>{
         })
     }));
 };
+/* -------------------------------------------------------------------------------------------------
+ * DrawerHeader
+ * -----------------------------------------------------------------------------------------------*/ /**
+ * The icon's size lives in SVG attributes, which flex is free to override, so a
+ * long asset name would squash it. Matches the grid and table rows, where the
+ * file-type icon is shrink-proof and the name is what truncates.
+ */ const HeaderIcon = styled(Flex)`
+  flex-shrink: 0;
+`;
+const HeaderTitle = styled(Typography)`
+  min-width: 0;
+`;
 const DrawerHeader = ({ asset, closeDetails })=>{
     const DocIcon = asset ? getAssetIcon(asset.mime, asset.ext) : FileError;
     return /*#__PURE__*/ jsxs(Flex, {
@@ -1001,13 +1010,15 @@ const DrawerHeader = ({ asset, closeDetails })=>{
         borderStyle: "solid",
         borderWidth: "0 0 1px 0",
         children: [
-            /*#__PURE__*/ jsx(DocIcon, {
-                width: 20,
-                height: 20
+            /*#__PURE__*/ jsx(HeaderIcon, {
+                children: /*#__PURE__*/ jsx(DocIcon, {
+                    width: 20,
+                    height: 20
+                })
             }),
             /*#__PURE__*/ jsx(Drawer.Title, {
                 asChild: true,
-                children: /*#__PURE__*/ jsx(Typography, {
+                children: /*#__PURE__*/ jsx(HeaderTitle, {
                     variant: "omega",
                     fontWeight: "semiBold",
                     overflow: "hidden",