@strapi/upload 5.51.2 → 5.52.1

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

@@ -9,16 +9,18 @@ var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var enums = require('../../../../../enums.js');
 var Drawer = require('../../../../components/Drawer.js');
+var useAIMetadataEnabled = require('../../../../hooks/useAIMetadataEnabled.js');
 var useMediaLibraryPermissions = require('../../../../hooks/useMediaLibraryPermissions.js');
+var useTracking = require('../../../../hooks/useTracking.js');
 var api = require('../../../../services/api.js');
 var assets = require('../../../../services/assets.js');
 var folders = require('../../../../services/folders.js');
-var settings = require('../../../../services/settings.js');
 var downloadFile = require('../../../../utils/downloadFile.js');
 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 BusyOverlay = require('../BusyOverlay.js');
 var AssetCropEditor = require('./AssetCropEditor.js');
 var AssetPreview = require('./AssetPreview.js');
 
@@ -169,22 +171,13 @@ const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxRuntime.jsxs(DetailItemC
   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 = styledComponents.styled(designSystem.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 {
@@ -437,15 +430,14 @@ const DownloadAssetButton = ({ asset })=>{
         children: /*#__PURE__*/ jsxRuntime.jsx(icons.Download, {})
     });
 };
-/* -------------------------------------------------------------------------------------------------
- * ReplaceAssetButton
- * -----------------------------------------------------------------------------------------------*/ const ReplaceAssetButton = ()=>{
+const ReplaceAssetButton = ({ mime })=>{
     const { formatMessage } = reactIntl.useIntl();
     const { replaceAsset, isReplacing } = useAssetOperation();
     const fileInputRef = React__namespace.useRef(null);
     const [isDialogOpen, setIsDialogOpen] = React__namespace.useState(false);
-    const { data: settings$1 } = settings.useGetUploadSettingsQuery();
-    const aiEnabled = settings$1?.data?.aiMetadata ?? false;
+    const aiEnabled = useAIMetadataEnabled.useAIMetadataEnabled({
+        mime
+    });
     const handleTriggerClick = ()=>{
         setIsDialogOpen(true);
     };
@@ -553,7 +545,7 @@ const DownloadAssetButton = ({ asset })=>{
         ]
     });
 };
-const AssetImageActions = ({ onCrop })=>{
+const AssetImageActions = ({ onCrop, mime })=>{
     const { formatMessage } = reactIntl.useIntl();
     const isSubmitting = strapiAdmin.useForm('AssetImageActions', (state)=>state.isSubmitting);
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -571,7 +563,9 @@ const AssetImageActions = ({ onCrop })=>{
                 disabled: isSubmitting || !onCrop,
                 children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {})
+            /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {
+                mime: mime
+            })
         ]
     });
 };
@@ -581,6 +575,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
     const { data: folders$1 = [] } = folders.useGetAllFoldersQuery();
     const { toggleNotification } = strapiAdmin.useNotification();
     const [updateAsset] = assets.useUpdateAssetMutation();
+    const { trackUsage } = useTracking.useTracking();
     const [replaceMutation, { isLoading: isReplacing }] = assets.useReplaceAssetMutation();
     const [deleteMutation, { isLoading: isDeleting }] = assets.useDeleteAssetMutation();
     const [uploadCroppedCopy, { isLoading: isCropCopying }] = api.useUploadFileSilentlyMutation();
@@ -625,6 +620,12 @@ const AssetDetails = ({ asset, closeDetails })=>{
             });
             return;
         }
+        trackUsage('didEditMediaLibraryElements', {
+            location: useTracking.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({
@@ -635,7 +636,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
     };
     const { title: folderName } = useFolderInfo.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__namespace.useCallback(async (file)=>{
         const res = await replaceMutation({
             id: asset.id,
             file
@@ -652,6 +653,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
             });
             return;
         }
+        trackUsage('didReplaceMedia', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -659,10 +663,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__namespace.useCallback(async ()=>{
         const res = await deleteMutation(asset.id);
         if ('error' in res) {
             const error = res.error;
@@ -686,7 +696,15 @@ const AssetDetails = ({ asset, closeDetails })=>{
             })
         });
         closeDetails();
-    };
+    }, [
+        asset.id,
+        closeDetails,
+        deleteMutation,
+        folderName,
+        formatMessage,
+        notify,
+        toggleNotification
+    ]);
     const notifyCropError = ()=>{
         notify({
             type: 'danger',
@@ -712,6 +730,10 @@ const AssetDetails = ({ asset, closeDetails })=>{
             notifyCropError();
             return;
         }
+        trackUsage('didCropFile', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: false
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -739,6 +761,10 @@ const AssetDetails = ({ asset, closeDetails })=>{
             notifyCropError();
             return;
         }
+        trackUsage('didCropFile', {
+            location: useTracking.MEDIA_LIBRARY_LOCATION,
+            duplicatedFile: true
+        });
         notify({
             type: 'success',
             message: formatMessage({
@@ -752,10 +778,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
     ]);
@@ -789,10 +814,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                     onSaveAsCopy: handleCropSaveAsCopy,
                                     canSaveAsCopy: canCreate
                                 }) : null,
-                                busyMessage ? /*#__PURE__*/ jsxRuntime.jsx(DrawerBusyOverlay, {
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
-                                        children: formatMessage(busyMessage)
-                                    })
+                                busyMessage ? /*#__PURE__*/ jsxRuntime.jsx(BusyOverlay.BusyOverlay, {
+                                    children: formatMessage(busyMessage)
                                 }) : null,
                                 drawerToast ? /*#__PURE__*/ jsxRuntime.jsx(DrawerToastSlot, {
                                     children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Alert, {
@@ -810,7 +833,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                         /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
                                             asset: asset,
                                             actions: isImage && canUpdate ? /*#__PURE__*/ jsxRuntime.jsx(AssetImageActions, {
-                                                onCrop: ()=>setIsCropOpen(true)
+                                                onCrop: ()=>setIsCropOpen(true),
+                                                mime: asset.mime
                                             }) : null
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -924,25 +948,21 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                     folders: folders$1,
                                                     disabled: !canUpdate
                                                 }),
-                                                isImage && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                                                    children: [
-                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
-                                                            name: "caption",
-                                                            label: formatMessage({
-                                                                id: translations.getTranslationKey('asset-details.caption'),
-                                                                defaultMessage: 'Caption'
-                                                            }),
-                                                            disabled: !canUpdate
-                                                        }),
-                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
-                                                            name: "alternativeText",
-                                                            label: formatMessage({
-                                                                id: translations.getTranslationKey('asset-details.alternativeText'),
-                                                                defaultMessage: 'Alternative text'
-                                                            }),
-                                                            disabled: !canUpdate
-                                                        })
-                                                    ]
+                                                /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
+                                                    name: "caption",
+                                                    label: formatMessage({
+                                                        id: translations.getTranslationKey('asset-details.caption'),
+                                                        defaultMessage: 'Caption'
+                                                    }),
+                                                    disabled: !canUpdate
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
+                                                    name: "alternativeText",
+                                                    label: formatMessage({
+                                                        id: translations.getTranslationKey('asset-details.alternativeText'),
+                                                        defaultMessage: 'Alternative text'
+                                                    }),
+                                                    disabled: !canUpdate
                                                 })
                                             ]
                                         })
@@ -1132,5 +1152,6 @@ exports.AssetDetails = AssetDetails;
 exports.AssetDetailsDrawer = AssetDetailsDrawer;
 exports.AssetOperationsContext = AssetOperationsContext;
 exports.DrawerNotifyContext = DrawerNotifyContext;
+exports.getBusyMessage = getBusyMessage;
 exports.useAssetDetailsParam = useAssetDetailsParam;
 //# sourceMappingURL=AssetDetailsDrawer.js.map