@strapi/upload 5.51.2 → 5.52.1

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

@@ -7,16 +7,18 @@ 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 { 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';
-import { useGetUploadSettingsQuery } from '../../../../services/settings.mjs';
 import { downloadFile } from '../../../../utils/downloadFile.mjs';
 import { formatBytes, getFileExtension, prefixFileUrlWithBackendUrl } from '../../../../utils/files.mjs';
 import { getAssetIcon } from '../../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../../utils/translations.mjs';
 import { useFolderInfo } from '../../hooks/useFolderInfo.mjs';
+import { BusyOverlay } from '../BusyOverlay.mjs';
 import { AssetCropEditor } from './AssetCropEditor.mjs';
 import { AssetPreview } from './AssetPreview.mjs';
 
@@ -147,22 +149,13 @@ const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxs(DetailItemContainer, {
   z-index: 10;
   width: calc(100% - ${({ theme })=>theme.spaces[2]});
 `;
-/**
- * Full-form overlay rendered during long-running drawer-scoped mutations
- * (e.g. replacing the binary). Sits above the toast slot (z-index 10) and
- * the in-drawer Alert so the user can't interact with the form mid-flight.
- */ const DrawerBusyOverlay = styled(Flex)`
-  position: absolute;
-  inset: 0;
-  z-index: 20;
-  align-items: center;
-  justify-content: center;
-  background: ${({ theme })=>theme.colors.neutral0};
-  opacity: 0.7;
-`;
 /**
  * Map the drawer-scoped mutation flags to a single i18n message for the busy
  * overlay loader. Returns `null` when nothing is in flight.
+ *
+ * Exported for the unit test: the branch order only matters when two flags are
+ * true at once, which the UI makes hard to stage through the rendered drawer
+ * (each trigger disables itself while its own mutation runs).
  */ const getBusyMessage = (state)=>{
     if (state.isDeleting) {
         return {
@@ -415,15 +408,14 @@ const DownloadAssetButton = ({ asset })=>{
         children: /*#__PURE__*/ jsx(Download, {})
     });
 };
-/* -------------------------------------------------------------------------------------------------
- * ReplaceAssetButton
- * -----------------------------------------------------------------------------------------------*/ const ReplaceAssetButton = ()=>{
+const ReplaceAssetButton = ({ mime })=>{
     const { formatMessage } = useIntl();
     const { replaceAsset, isReplacing } = useAssetOperation();
     const fileInputRef = React.useRef(null);
     const [isDialogOpen, setIsDialogOpen] = React.useState(false);
-    const { data: settings } = useGetUploadSettingsQuery();
-    const aiEnabled = settings?.data?.aiMetadata ?? false;
+    const aiEnabled = useAIMetadataEnabled({
+        mime
+    });
     const handleTriggerClick = ()=>{
         setIsDialogOpen(true);
     };
@@ -531,7 +523,7 @@ const DownloadAssetButton = ({ asset })=>{
         ]
     });
 };
-const AssetImageActions = ({ onCrop })=>{
+const AssetImageActions = ({ onCrop, mime })=>{
     const { formatMessage } = useIntl();
     const isSubmitting = useForm('AssetImageActions', (state)=>state.isSubmitting);
     return /*#__PURE__*/ jsxs(Flex, {
@@ -549,7 +541,9 @@ const AssetImageActions = ({ onCrop })=>{
                 disabled: isSubmitting || !onCrop,
                 children: /*#__PURE__*/ jsx(Crop, {})
             }),
-            /*#__PURE__*/ jsx(ReplaceAssetButton, {})
+            /*#__PURE__*/ jsx(ReplaceAssetButton, {
+                mime: mime
+            })
         ]
     });
 };
@@ -559,6 +553,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
     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();
@@ -603,6 +598,12 @@ const AssetDetails = ({ asset, closeDetails })=>{
             });
             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({
@@ -613,7 +614,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
     };
     const { title: folderName } = useFolderInfo(typeof asset.folder === 'object' && asset.folder !== null ? asset.folder.id ?? null : asset.folder ?? null);
     // Owns the replace upload so isReplacing can drive the busy overlay.
-    const handleReplace = async (file)=>{
+    const handleReplace = React.useCallback(async (file)=>{
         const res = await replaceMutation({
             id: asset.id,
             file
@@ -630,6 +631,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
             });
             return;
         }
+        trackUsage('didReplaceMedia', {
+            location: MEDIA_LIBRARY_LOCATION
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -637,10 +641,16 @@ const AssetDetails = ({ asset, closeDetails })=>{
                 defaultMessage: 'File replaced.'
             })
         });
-    };
+    }, [
+        asset.id,
+        formatMessage,
+        notify,
+        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 = async ()=>{
+    const handleDelete = React.useCallback(async ()=>{
         const res = await deleteMutation(asset.id);
         if ('error' in res) {
             const error = res.error;
@@ -664,7 +674,15 @@ const AssetDetails = ({ asset, closeDetails })=>{
             })
         });
         closeDetails();
-    };
+    }, [
+        asset.id,
+        closeDetails,
+        deleteMutation,
+        folderName,
+        formatMessage,
+        notify,
+        toggleNotification
+    ]);
     const notifyCropError = ()=>{
         notify({
             type: 'danger',
@@ -690,6 +708,10 @@ const AssetDetails = ({ asset, closeDetails })=>{
             notifyCropError();
             return;
         }
+        trackUsage('didCropFile', {
+            location: MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: false
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -717,6 +739,10 @@ const AssetDetails = ({ asset, closeDetails })=>{
             notifyCropError();
             return;
         }
+        trackUsage('didCropFile', {
+            location: MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: true
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -730,10 +756,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
             deleteAsset: handleDelete,
             isReplacing,
             isDeleting
-        }), // handleReplace / handleDelete close over asset+mutations and don't need a
-    // stable identity here; the consumers re-render with the new context value.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
+        }), [
+        handleReplace,
+        handleDelete,
         isReplacing,
         isDeleting
     ]);
@@ -767,10 +792,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                     onSaveAsCopy: handleCropSaveAsCopy,
                                     canSaveAsCopy: canCreate
                                 }) : null,
-                                busyMessage ? /*#__PURE__*/ jsx(DrawerBusyOverlay, {
-                                    children: /*#__PURE__*/ jsx(Loader, {
-                                        children: formatMessage(busyMessage)
-                                    })
+                                busyMessage ? /*#__PURE__*/ jsx(BusyOverlay, {
+                                    children: formatMessage(busyMessage)
                                 }) : null,
                                 drawerToast ? /*#__PURE__*/ jsx(DrawerToastSlot, {
                                     children: /*#__PURE__*/ jsx(Alert, {
@@ -788,7 +811,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                         /*#__PURE__*/ jsx(AssetPreview, {
                                             asset: asset,
                                             actions: isImage && canUpdate ? /*#__PURE__*/ jsx(AssetImageActions, {
-                                                onCrop: ()=>setIsCropOpen(true)
+                                                onCrop: ()=>setIsCropOpen(true),
+                                                mime: asset.mime
                                             }) : null
                                         }),
                                         /*#__PURE__*/ jsxs(Flex, {
@@ -902,25 +926,21 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                     folders: folders,
                                                     disabled: !canUpdate
                                                 }),
-                                                isImage && /*#__PURE__*/ jsxs(Fragment, {
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(DetailField, {
-                                                            name: "caption",
-                                                            label: formatMessage({
-                                                                id: getTranslationKey('asset-details.caption'),
-                                                                defaultMessage: 'Caption'
-                                                            }),
-                                                            disabled: !canUpdate
-                                                        }),
-                                                        /*#__PURE__*/ jsx(DetailField, {
-                                                            name: "alternativeText",
-                                                            label: formatMessage({
-                                                                id: getTranslationKey('asset-details.alternativeText'),
-                                                                defaultMessage: 'Alternative text'
-                                                            }),
-                                                            disabled: !canUpdate
-                                                        })
-                                                    ]
+                                                /*#__PURE__*/ jsx(DetailField, {
+                                                    name: "caption",
+                                                    label: formatMessage({
+                                                        id: getTranslationKey('asset-details.caption'),
+                                                        defaultMessage: 'Caption'
+                                                    }),
+                                                    disabled: !canUpdate
+                                                }),
+                                                /*#__PURE__*/ jsx(DetailField, {
+                                                    name: "alternativeText",
+                                                    label: formatMessage({
+                                                        id: getTranslationKey('asset-details.alternativeText'),
+                                                        defaultMessage: 'Alternative text'
+                                                    }),
+                                                    disabled: !canUpdate
                                                 })
                                             ]
                                         })
@@ -1106,5 +1126,5 @@ const DrawerContent = ({ assetId, closeDetails })=>{
     });
 };
 
-export { AssetDetails, AssetDetailsDrawer, AssetOperationsContext, DrawerNotifyContext, useAssetDetailsParam };
+export { AssetDetails, AssetDetailsDrawer, AssetOperationsContext, DrawerNotifyContext, getBusyMessage, useAssetDetailsParam };
 //# sourceMappingURL=AssetDetailsDrawer.mjs.map