@strapi/upload 5.51.1 → 5.52.0

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

@@ -7,15 +7,17 @@ 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 { useUploadFileSilentlyMutation } from '../../../../services/api.mjs';
 import { useGetAssetQuery, useUpdateAssetMutation, useReplaceAssetMutation, useDeleteAssetMutation } from '../../../../services/assets.mjs';
 import { useGetAllFoldersQuery } from '../../../../services/folders.mjs';
-import { useGetSettingsQuery } 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';
 
@@ -146,22 +148,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 {
@@ -191,11 +184,24 @@ const StyledWarning = styled(WarningCircle)`
     fill: ${({ theme })=>theme.colors.warning500};
   }
 `;
-const DetailField = ({ name, label, required })=>{
+const DetailField = ({ name, label, required, disabled })=>{
     const { formatMessage } = useIntl();
     const field = useField(name);
     const isSubmitting = 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.useState(fieldValue);
+    React.useEffect(()=>{
+        setValue(fieldValue);
+    }, [
+        fieldValue
+    ]);
     const emptyTooltipLabel = formatMessage({
         id: getTranslationKey('asset-details.field.empty'),
         defaultMessage: '{label} is currently empty.'
@@ -211,7 +217,10 @@ const DetailField = ({ name, label, required })=>{
             }),
             /*#__PURE__*/ jsx(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__*/ jsx(Tooltip, {
                     label: emptyTooltipLabel,
                     children: /*#__PURE__*/ jsx(StyledWarning, {
@@ -220,12 +229,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 = useField('folder');
     const isSubmitting = useForm('LocationField', (state)=>state.isSubmitting);
     return /*#__PURE__*/ jsxs(Field.Root, {
@@ -241,7 +250,7 @@ const LocationField = ({ label, rootLabel, folders })=>{
                     const next = value === '' ? null : Number(value);
                     field.onChange('folder', next);
                 },
-                disabled: isSubmitting,
+                disabled: isSubmitting || disabled,
                 children: [
                     /*#__PURE__*/ jsx(SingleSelectOption, {
                         value: "",
@@ -398,15 +407,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 } = useGetSettingsQuery();
-    const aiEnabled = settings?.data?.aiMetadata ?? false;
+    const aiEnabled = useAIMetadataEnabled({
+        mime
+    });
     const handleTriggerClick = ()=>{
         setIsDialogOpen(true);
     };
@@ -514,7 +522,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, {
@@ -532,12 +540,15 @@ const AssetImageActions = ({ onCrop })=>{
                 disabled: isSubmitting || !onCrop,
                 children: /*#__PURE__*/ jsx(Crop, {})
             }),
-            /*#__PURE__*/ jsx(ReplaceAssetButton, {})
+            /*#__PURE__*/ jsx(ReplaceAssetButton, {
+                mime: mime
+            })
         ]
     });
 };
 const AssetDetails = ({ asset, closeDetails })=>{
     const { formatMessage, formatDate } = useIntl();
+    const { canCreate, canUpdate, canDownload, canCopyLink } = useMediaLibraryPermissions();
     const { data: folders = [] } = useGetAllFoldersQuery();
     const { toggleNotification } = useNotification();
     const [updateAsset] = useUpdateAssetMutation();
@@ -595,7 +606,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
@@ -619,10 +630,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.useCallback(async ()=>{
         const res = await deleteMutation(asset.id);
         if ('error' in res) {
             const error = res.error;
@@ -646,7 +662,15 @@ const AssetDetails = ({ asset, closeDetails })=>{
             })
         });
         closeDetails();
-    };
+    }, [
+        asset.id,
+        closeDetails,
+        deleteMutation,
+        folderName,
+        formatMessage,
+        notify,
+        toggleNotification
+    ]);
     const notifyCropError = ()=>{
         notify({
             type: 'danger',
@@ -712,10 +736,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
     ]);
@@ -746,12 +769,11 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                     asset: asset,
                                     onClose: ()=>setIsCropOpen(false),
                                     onApply: handleCropApply,
-                                    onSaveAsCopy: handleCropSaveAsCopy
+                                    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, {
@@ -768,8 +790,9 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                     children: [
                                         /*#__PURE__*/ jsx(AssetPreview, {
                                             asset: asset,
-                                            actions: isImage ? /*#__PURE__*/ jsx(AssetImageActions, {
-                                                onCrop: ()=>setIsCropOpen(true)
+                                            actions: isImage && canUpdate ? /*#__PURE__*/ jsx(AssetImageActions, {
+                                                onCrop: ()=>setIsCropOpen(true),
+                                                mime: asset.mime
                                             }) : null
                                         }),
                                         /*#__PURE__*/ jsxs(Flex, {
@@ -868,7 +891,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                         id: getTranslationKey('asset-details.fileName'),
                                                         defaultMessage: 'File name'
                                                     }),
-                                                    required: true
+                                                    required: true,
+                                                    disabled: !canUpdate
                                                 }),
                                                 /*#__PURE__*/ jsx(LocationField, {
                                                     label: formatMessage({
@@ -879,31 +903,30 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                                         id: getTranslationKey('plugin.home'),
                                                         defaultMessage: 'Home'
                                                     }),
-                                                    folders: folders
+                                                    folders: folders,
+                                                    disabled: !canUpdate
                                                 }),
-                                                isImage && /*#__PURE__*/ jsxs(Fragment, {
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(DetailField, {
-                                                            name: "caption",
-                                                            label: formatMessage({
-                                                                id: getTranslationKey('asset-details.caption'),
-                                                                defaultMessage: 'Caption'
-                                                            })
-                                                        }),
-                                                        /*#__PURE__*/ jsx(DetailField, {
-                                                            name: "alternativeText",
-                                                            label: formatMessage({
-                                                                id: getTranslationKey('asset-details.alternativeText'),
-                                                                defaultMessage: 'Alternative text'
-                                                            })
-                                                        })
-                                                    ]
+                                                /*#__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__*/ jsxs(Flex, {
+                                (canUpdate || canCopyLink || canDownload) && /*#__PURE__*/ jsxs(Flex, {
                                     justifyContent: "space-between",
                                     alignItems: "center",
                                     gap: 2,
@@ -916,16 +939,16 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                         /*#__PURE__*/ jsxs(Flex, {
                                             gap: 2,
                                             children: [
-                                                /*#__PURE__*/ jsx(DeleteAssetButton, {}),
-                                                /*#__PURE__*/ jsx(CopyLinkButton, {
+                                                canUpdate && /*#__PURE__*/ jsx(DeleteAssetButton, {}),
+                                                canCopyLink && /*#__PURE__*/ jsx(CopyLinkButton, {
                                                     asset: asset
                                                 }),
-                                                /*#__PURE__*/ jsx(DownloadAssetButton, {
+                                                canDownload && /*#__PURE__*/ jsx(DownloadAssetButton, {
                                                     asset: asset
                                                 })
                                             ]
                                         }),
-                                        /*#__PURE__*/ jsx(Button, {
+                                        canUpdate && /*#__PURE__*/ jsx(Button, {
                                             type: "submit",
                                             variant: "default",
                                             loading: isSubmitting,
@@ -1068,7 +1091,11 @@ const DrawerContent = ({ assetId, closeDetails })=>{
             /*#__PURE__*/ jsx(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__*/ jsx(DrawerContent, {
                     assetId: assetId,
@@ -1079,5 +1106,5 @@ const DrawerContent = ({ assetId, closeDetails })=>{
     });
 };
 
-export { AssetDetails, AssetDetailsDrawer, AssetOperationsContext, DrawerNotifyContext, useAssetDetailsParam };
+export { AssetDetails, AssetDetailsDrawer, AssetOperationsContext, DrawerNotifyContext, getBusyMessage, useAssetDetailsParam };
 //# sourceMappingURL=AssetDetailsDrawer.mjs.map