@strapi/upload 5.51.1 → 5.52.0

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

@@ -9,15 +9,17 @@ 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 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');
 
@@ -168,22 +170,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 {
@@ -213,11 +206,24 @@ const StyledWarning = styledComponents.styled(icons.WarningCircle)`
     fill: ${({ theme })=>theme.colors.warning500};
   }
 `;
-const DetailField = ({ name, label, required })=>{
+const DetailField = ({ name, label, required, disabled })=>{
     const { formatMessage } = reactIntl.useIntl();
     const field = strapiAdmin.useField(name);
     const isSubmitting = strapiAdmin.useForm('DetailField', (state)=>state.isSubmitting);
-    const value = field.value ?? '';
+    // The form context (use-context-selector) echoes changes back
+    // asynchronously — driving the input straight from `field.value` makes
+    // React rewrite the DOM value after the keystroke, which throws the cursor
+    // to the end of the field. The input is therefore controlled by local state
+    // (synchronous, cursor-safe) and the form follows; the effect below only
+    // matters for EXTERNAL value changes (discard/reset), where a cursor jump
+    // is fine because the user isn't typing.
+    const fieldValue = field.value ?? '';
+    const [value, setValue] = React__namespace.useState(fieldValue);
+    React__namespace.useEffect(()=>{
+        setValue(fieldValue);
+    }, [
+        fieldValue
+    ]);
     const emptyTooltipLabel = formatMessage({
         id: translations.getTranslationKey('asset-details.field.empty'),
         defaultMessage: '{label} is currently empty.'
@@ -233,7 +239,10 @@ const DetailField = ({ name, label, required })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
                 value: value,
-                onChange: (event)=>field.onChange(name, event.target.value),
+                onChange: (event)=>{
+                    setValue(event.target.value);
+                    field.onChange(name, event.target.value);
+                },
                 endAction: !value ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
                     label: emptyTooltipLabel,
                     children: /*#__PURE__*/ jsxRuntime.jsx(StyledWarning, {
@@ -242,12 +251,12 @@ const DetailField = ({ name, label, required })=>{
                     })
                 }) : undefined,
                 type: "text",
-                disabled: isSubmitting
+                disabled: isSubmitting || disabled
             })
         ]
     });
 };
-const LocationField = ({ label, rootLabel, folders })=>{
+const LocationField = ({ label, rootLabel, folders, disabled })=>{
     const field = strapiAdmin.useField('folder');
     const isSubmitting = strapiAdmin.useForm('LocationField', (state)=>state.isSubmitting);
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
@@ -263,7 +272,7 @@ const LocationField = ({ label, rootLabel, folders })=>{
                     const next = value === '' ? null : Number(value);
                     field.onChange('folder', next);
                 },
-                disabled: isSubmitting,
+                disabled: isSubmitting || disabled,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
                         value: "",
@@ -420,15 +429,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.useGetSettingsQuery();
-    const aiEnabled = settings$1?.data?.aiMetadata ?? false;
+    const aiEnabled = useAIMetadataEnabled.useAIMetadataEnabled({
+        mime
+    });
     const handleTriggerClick = ()=>{
         setIsDialogOpen(true);
     };
@@ -536,7 +544,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, {
@@ -554,12 +562,15 @@ const AssetImageActions = ({ onCrop })=>{
                 disabled: isSubmitting || !onCrop,
                 children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {})
+            /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {
+                mime: mime
+            })
         ]
     });
 };
 const AssetDetails = ({ asset, closeDetails })=>{
     const { formatMessage, formatDate } = reactIntl.useIntl();
+    const { canCreate, canUpdate, canDownload, canCopyLink } = useMediaLibraryPermissions.useMediaLibraryPermissions();
     const { data: folders$1 = [] } = folders.useGetAllFoldersQuery();
     const { toggleNotification } = strapiAdmin.useNotification();
     const [updateAsset] = assets.useUpdateAssetMutation();
@@ -617,7 +628,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
@@ -641,10 +652,15 @@ const AssetDetails = ({ asset, closeDetails })=>{
                 defaultMessage: 'File replaced.'
             })
         });
-    };
+    }, [
+        asset.id,
+        formatMessage,
+        notify,
+        replaceMutation
+    ]);
     // 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;
@@ -668,7 +684,15 @@ const AssetDetails = ({ asset, closeDetails })=>{
             })
         });
         closeDetails();
-    };
+    }, [
+        asset.id,
+        closeDetails,
+        deleteMutation,
+        folderName,
+        formatMessage,
+        notify,
+        toggleNotification
+    ]);
     const notifyCropError = ()=>{
         notify({
             type: 'danger',
@@ -734,10 +758,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
     ]);
@@ -768,12 +791,11 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                     asset: asset,
                                     onClose: ()=>setIsCropOpen(false),
                                     onApply: handleCropApply,
-                                    onSaveAsCopy: handleCropSaveAsCopy
+                                    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, {
@@ -790,8 +812,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                     children: [
                                         /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
                                             asset: asset,
-                                            actions: isImage ? /*#__PURE__*/ jsxRuntime.jsx(AssetImageActions, {
-                                                onCrop: ()=>setIsCropOpen(true)
+                                            actions: isImage && canUpdate ? /*#__PURE__*/ jsxRuntime.jsx(AssetImageActions, {
+                                                onCrop: ()=>setIsCropOpen(true),
+                                                mime: asset.mime
                                             }) : null
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
@@ -890,7 +913,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                         id: translations.getTranslationKey('asset-details.fileName'),
                                                         defaultMessage: 'File name'
                                                     }),
-                                                    required: true
+                                                    required: true,
+                                                    disabled: !canUpdate
                                                 }),
                                                 /*#__PURE__*/ jsxRuntime.jsx(LocationField, {
                                                     label: formatMessage({
@@ -901,31 +925,30 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                         id: translations.getTranslationKey('plugin.home'),
                                                         defaultMessage: 'Home'
                                                     }),
-                                                    folders: folders$1
+                                                    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'
-                                                            })
-                                                        }),
-                                                        /*#__PURE__*/ jsxRuntime.jsx(DetailField, {
-                                                            name: "alternativeText",
-                                                            label: formatMessage({
-                                                                id: translations.getTranslationKey('asset-details.alternativeText'),
-                                                                defaultMessage: 'Alternative text'
-                                                            })
-                                                        })
-                                                    ]
+                                                /*#__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.jsxs(designSystem.Flex, {
+                                (canUpdate || canCopyLink || canDownload) && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                                     justifyContent: "space-between",
                                     alignItems: "center",
                                     gap: 2,
@@ -938,16 +961,16 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                                             gap: 2,
                                             children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx(DeleteAssetButton, {}),
-                                                /*#__PURE__*/ jsxRuntime.jsx(CopyLinkButton, {
+                                                canUpdate && /*#__PURE__*/ jsxRuntime.jsx(DeleteAssetButton, {}),
+                                                canCopyLink && /*#__PURE__*/ jsxRuntime.jsx(CopyLinkButton, {
                                                     asset: asset
                                                 }),
-                                                /*#__PURE__*/ jsxRuntime.jsx(DownloadAssetButton, {
+                                                canDownload && /*#__PURE__*/ jsxRuntime.jsx(DownloadAssetButton, {
                                                     asset: asset
                                                 })
                                             ]
                                         }),
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                                        canUpdate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
                                             type: "submit",
                                             variant: "default",
                                             loading: isSubmitting,
@@ -1090,7 +1113,11 @@ const DrawerContent = ({ assetId, closeDetails })=>{
             /*#__PURE__*/ jsxRuntime.jsx(Drawer.Drawer.Body, {
                 animationDirection: "left",
                 width: "41.6rem",
-                height: "100vh",
+                // dvh, not vh: the drawer is anchored to the bottom, so with 100vh on
+                // mobile (where the URL bar shrinks the visual viewport below 100vh)
+                // the top of the drawer — header, title, close button — is pushed
+                // off-screen. dvh tracks the actual visible height.
+                height: "100dvh",
                 onAnimationEnd: onCloseAnimationEnd,
                 children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContent, {
                     assetId: assetId,
@@ -1105,5 +1132,6 @@ exports.AssetDetails = AssetDetails;
 exports.AssetDetailsDrawer = AssetDetailsDrawer;
 exports.AssetOperationsContext = AssetOperationsContext;
 exports.DrawerNotifyContext = DrawerNotifyContext;
+exports.getBusyMessage = getBusyMessage;
 exports.useAssetDetailsParam = useAssetDetailsParam;
 //# sourceMappingURL=AssetDetailsDrawer.js.map