@strapi/upload 5.52.1 → 5.52.2

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

@@ -10,6 +10,7 @@ var styledComponents = require('styled-components');
 var enums = require('../../../../../enums.js');
 var Drawer = require('../../../../components/Drawer.js');
 var useAIMetadataEnabled = require('../../../../hooks/useAIMetadataEnabled.js');
+var useApiErrorMessage = require('../../../../hooks/useApiErrorMessage.js');
 var useMediaLibraryPermissions = require('../../../../hooks/useMediaLibraryPermissions.js');
 var useTracking = require('../../../../hooks/useTracking.js');
 var api = require('../../../../services/api.js');
@@ -20,6 +21,7 @@ var files = require('../../../../utils/files.js');
 var getAssetIcon = require('../../../../utils/getAssetIcon.js');
 var translations = require('../../../../utils/translations.js');
 var useFolderInfo = require('../../hooks/useFolderInfo.js');
+var useIsAssetDetailsOpen = require('../../hooks/useIsAssetDetailsOpen.js');
 var BusyOverlay = require('../BusyOverlay.js');
 var AssetCropEditor = require('./AssetCropEditor.js');
 var AssetPreview = require('./AssetPreview.js');
@@ -44,8 +46,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// Name of the parameter to look for in the URL to open the drawer
-const URL_PARAM = 'assetId';
 const DrawerNotifyContext = /*#__PURE__*/ React__namespace.createContext(null);
 const useDrawerNotify = ()=>{
     const ctx = React__namespace.useContext(DrawerNotifyContext);
@@ -63,12 +63,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] = strapiAdmin.useQueryParams();
-    const detailsId = query?.[URL_PARAM];
-    const assetId = detailsId ? parseInt(detailsId, 10) : null;
-    const hasValidId = assetId !== null && !Number.isNaN(assetId);
+    const assetId = useIsAssetDetailsOpen.parseAssetDetailsId(query?.[useIsAssetDetailsOpen.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
@@ -95,14 +94,14 @@ const useAssetOperation = ()=>{
     ]);
     const openDetails = React__namespace.useCallback((id)=>{
         setQuery({
-            [URL_PARAM]: String(id)
+            [useIsAssetDetailsOpen.ASSET_DETAILS_URL_PARAM]: String(id)
         }, 'push', true);
     }, [
         setQuery
     ]);
     const closeDetails = React__namespace.useCallback(()=>{
         setQuery({
-            [URL_PARAM]: undefined
+            [useIsAssetDetailsOpen.ASSET_DETAILS_URL_PARAM]: undefined
         }, 'remove', true);
     }, [
         setQuery
@@ -308,7 +307,6 @@ const LocationField = ({ label, rootLabel, folders, disabled })=>{
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Trigger, {
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                    withTooltip: false,
                     label: triggerLabel,
                     variant: "danger-light",
                     children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
@@ -386,7 +384,6 @@ const CopyLinkButton = ({ asset })=>{
         });
     };
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-        withTooltip: false,
         label: formatMessage({
             id: translations.getTranslationKey('asset-details.copy-link.trigger'),
             defaultMessage: 'Copy link'
@@ -419,7 +416,6 @@ const DownloadAssetButton = ({ asset })=>{
         }
     };
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-        withTooltip: false,
         label: formatMessage({
             id: translations.getTranslationKey('asset-details.download.trigger'),
             defaultMessage: 'Download'
@@ -463,6 +459,7 @@ const ReplaceAssetButton = ({ mime })=>{
                 children: /*#__PURE__*/ jsxRuntime.jsx("input", {
                     ref: fileInputRef,
                     type: "file",
+                    accept: mime ?? '',
                     multiple: false,
                     onChange: handleFileChange,
                     "aria-hidden": true,
@@ -470,7 +467,6 @@ const ReplaceAssetButton = ({ mime })=>{
                 })
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                withTooltip: false,
                 label: formatMessage({
                     id: translations.getTranslationKey('asset-details.replace.trigger'),
                     defaultMessage: 'Replace this file'
@@ -545,32 +541,27 @@ const ReplaceAssetButton = ({ mime })=>{
         ]
     });
 };
-const AssetImageActions = ({ onCrop, mime })=>{
+const AssetImageActions = ({ onCrop })=>{
     const { formatMessage } = reactIntl.useIntl();
     const isSubmitting = strapiAdmin.useForm('AssetImageActions', (state)=>state.isSubmitting);
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
         direction: "column",
         gap: 2,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
-                withTooltip: false,
-                label: formatMessage({
-                    id: translations.getTranslationKey('asset-details.crop.trigger'),
-                    defaultMessage: 'Crop'
-                }),
-                variant: "tertiary",
-                onClick: onCrop,
-                disabled: isSubmitting || !onCrop,
-                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+            label: formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.trigger'),
+                defaultMessage: 'Crop'
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {
-                mime: mime
-            })
-        ]
+            variant: "tertiary",
+            onClick: onCrop,
+            disabled: isSubmitting || !onCrop,
+            children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
+        })
     });
 };
 const AssetDetails = ({ asset, closeDetails })=>{
     const { formatMessage, formatDate } = reactIntl.useIntl();
+    const getErrorMessage = useApiErrorMessage.useApiErrorMessage();
     const { canCreate, canUpdate, canDownload, canCopyLink } = useMediaLibraryPermissions.useMediaLibraryPermissions();
     const { data: folders$1 = [] } = folders.useGetAllFoldersQuery();
     const { toggleNotification } = strapiAdmin.useNotification();
@@ -613,10 +604,10 @@ const AssetDetails = ({ asset, closeDetails })=>{
         if ('error' in res) {
             notify({
                 type: 'danger',
-                message: formatMessage({
+                message: getErrorMessage(res.error, formatMessage({
                     id: translations.getTranslationKey('asset-details.update.error'),
                     defaultMessage: 'Failed to update the file.'
-                })
+                }))
             });
             return;
         }
@@ -642,14 +633,12 @@ const AssetDetails = ({ asset, closeDetails })=>{
             file
         });
         if ('error' in res) {
-            const error = res.error;
-            const message = error?.data?.error?.message ?? error?.data?.message ?? formatMessage({
-                id: translations.getTranslationKey('asset-details.replace.error'),
-                defaultMessage: 'Failed to replace the file.'
-            });
             notify({
                 type: 'danger',
-                message
+                message: getErrorMessage(res.error, formatMessage({
+                    id: translations.getTranslationKey('asset-details.replace.error'),
+                    defaultMessage: 'Failed to replace the file.'
+                }))
             });
             return;
         }
@@ -666,6 +655,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
     }, [
         asset.id,
         formatMessage,
+        getErrorMessage,
         notify,
         replaceMutation,
         trackUsage
@@ -675,14 +665,12 @@ const AssetDetails = ({ asset, closeDetails })=>{
     const handleDelete = React__namespace.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: translations.getTranslationKey('asset-details.delete.error'),
-                defaultMessage: 'Failed to delete the asset.'
-            });
             notify({
                 type: 'danger',
-                message
+                message: getErrorMessage(res.error, formatMessage({
+                    id: translations.getTranslationKey('asset-details.delete.error'),
+                    defaultMessage: 'Failed to delete the asset.'
+                }))
             });
             return;
         }
@@ -702,16 +690,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: translations.getTranslationKey('asset-details.crop.error'),
                 defaultMessage: 'Failed to crop the file.'
-            })
+            }))
         });
     };
     // Apply: replace the original binary with the cropped file + focal point.
@@ -727,7 +716,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
             }
         });
         if ('error' in res) {
-            notifyCropError();
+            notifyCropError(res.error);
             return;
         }
         trackUsage('didCropFile', {
@@ -758,7 +747,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
             }
         });
         if ('error' in res) {
-            notifyCropError();
+            notifyCropError(res.error);
             return;
         }
         trackUsage('didCropFile', {
@@ -833,8 +822,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                         /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
                                             asset: asset,
                                             actions: isImage && canUpdate ? /*#__PURE__*/ jsxRuntime.jsx(AssetImageActions, {
-                                                onCrop: ()=>setIsCropOpen(true),
-                                                mime: asset.mime
+                                                onCrop: ()=>setIsCropOpen(true)
                                             }) : null
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -987,6 +975,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                 }),
                                                 canDownload && /*#__PURE__*/ jsxRuntime.jsx(DownloadAssetButton, {
                                                     asset: asset
+                                                }),
+                                                canUpdate && /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {
+                                                    mime: asset.mime
                                                 })
                                             ]
                                         }),