@strapi/upload 5.52.0 → 5.52.2

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

@@ -8,7 +8,9 @@ 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';
 import { useGetAssetQuery, useUpdateAssetMutation, useReplaceAssetMutation, useDeleteAssetMutation } from '../../../../services/assets.mjs';
 import { useGetAllFoldersQuery } from '../../../../services/folders.mjs';
@@ -17,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);
@@ -40,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,14 +72,14 @@ const useAssetOperation = ()=>{
     ]);
     const openDetails = React.useCallback((id)=>{
         setQuery({
-            [URL_PARAM]: String(id)
+            [ASSET_DETAILS_URL_PARAM]: String(id)
         }, 'push', true);
     }, [
         setQuery
     ]);
     const closeDetails = React.useCallback(()=>{
         setQuery({
-            [URL_PARAM]: undefined
+            [ASSET_DETAILS_URL_PARAM]: undefined
         }, 'remove', true);
     }, [
         setQuery
@@ -285,7 +285,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, {})
@@ -363,7 +362,6 @@ const CopyLinkButton = ({ asset })=>{
         });
     };
     return /*#__PURE__*/ jsx(IconButton, {
-        withTooltip: false,
         label: formatMessage({
             id: getTranslationKey('asset-details.copy-link.trigger'),
             defaultMessage: 'Copy link'
@@ -396,7 +394,6 @@ const DownloadAssetButton = ({ asset })=>{
         }
     };
     return /*#__PURE__*/ jsx(IconButton, {
-        withTooltip: false,
         label: formatMessage({
             id: getTranslationKey('asset-details.download.trigger'),
             defaultMessage: 'Download'
@@ -440,6 +437,7 @@ const ReplaceAssetButton = ({ mime })=>{
                 children: /*#__PURE__*/ jsx("input", {
                     ref: fileInputRef,
                     type: "file",
+                    accept: mime ?? '',
                     multiple: false,
                     onChange: handleFileChange,
                     "aria-hidden": true,
@@ -447,7 +445,6 @@ const ReplaceAssetButton = ({ mime })=>{
                 })
             }),
             /*#__PURE__*/ jsx(IconButton, {
-                withTooltip: false,
                 label: formatMessage({
                     id: getTranslationKey('asset-details.replace.trigger'),
                     defaultMessage: 'Replace this file'
@@ -522,36 +519,32 @@ 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();
     const [updateAsset] = useUpdateAssetMutation();
+    const { trackUsage } = useTracking();
     const [replaceMutation, { isLoading: isReplacing }] = useReplaceAssetMutation();
     const [deleteMutation, { isLoading: isDeleting }] = useDeleteAssetMutation();
     const [uploadCroppedCopy, { isLoading: isCropCopying }] = useUploadFileSilentlyMutation();
@@ -589,13 +582,19 @@ 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;
         }
+        trackUsage('didEditMediaLibraryElements', {
+            location: MEDIA_LIBRARY_LOCATION,
+            // Legacy sends the mime top-level type (image/video/audio/application…).
+            type: asset.mime?.split('/')[0],
+            changeLocation: values.folder !== initialValues.folder
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -612,17 +611,18 @@ const AssetDetails = ({ asset, closeDetails })=>{
             file
         });
         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;
         }
+        trackUsage('didReplaceMedia', {
+            location: MEDIA_LIBRARY_LOCATION
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -633,22 +633,22 @@ const AssetDetails = ({ asset, closeDetails })=>{
     }, [
         asset.id,
         formatMessage,
+        getErrorMessage,
         notify,
-        replaceMutation
+        replaceMutation,
+        trackUsage
     ]);
     // Owns the delete: on error notify in-drawer (drawer stays), on success fire
     // a persistent global notification then close the drawer.
     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;
         }
@@ -668,16 +668,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.
@@ -693,9 +694,13 @@ const AssetDetails = ({ asset, closeDetails })=>{
             }
         });
         if ('error' in res) {
-            notifyCropError();
+            notifyCropError(res.error);
             return;
         }
+        trackUsage('didCropFile', {
+            location: MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: false
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -720,9 +725,13 @@ const AssetDetails = ({ asset, closeDetails })=>{
             }
         });
         if ('error' in res) {
-            notifyCropError();
+            notifyCropError(res.error);
             return;
         }
+        trackUsage('didCropFile', {
+            location: MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: true
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -791,8 +800,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, {
@@ -945,6 +953,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                 }),
                                                 canDownload && /*#__PURE__*/ jsx(DownloadAssetButton, {
                                                     asset: asset
+                                                }),
+                                                canUpdate && /*#__PURE__*/ jsx(ReplaceAssetButton, {
+                                                    mime: asset.mime
                                                 })
                                             ]
                                         }),