@strapi/upload 5.46.1 → 5.47.1

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

@@ -1,13 +1,14 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useQueryParams, getDisplayName } from '@strapi/admin/strapi-admin';
-import { VisuallyHidden, Flex, Loader, Alert, Typography, Box, Field, TextInput } from '@strapi/design-system';
+import { useQueryParams, useNotification, Form, Blocker, getDisplayName, useField, useForm } from '@strapi/admin/strapi-admin';
+import { VisuallyHidden, Flex, Loader, Alert, Typography, Box, Button, Field, TextInput, Tooltip, SingleSelect, SingleSelectOption } from '@strapi/design-system';
 import { FileError, ArrowLineRight, WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
-import { DRAWER_CLOSE_ANIMATION_MS, Drawer } from '../../../../components/Drawer.mjs';
+import { Drawer } from '../../../../components/Drawer.mjs';
 import { AssetType } from '../../../../enums.mjs';
-import { useGetAssetQuery } from '../../../../services/assets.mjs';
+import { useGetAssetQuery, useUpdateAssetMutation } from '../../../../services/assets.mjs';
+import { useGetAllFoldersQuery } from '../../../../services/folders.mjs';
 import { formatBytes, getFileExtension } from '../../../../utils/files.mjs';
 import { getAssetIcon } from '../../../../utils/getAssetIcon.mjs';
 import { getTranslationKey } from '../../../../utils/translations.mjs';
@@ -22,51 +23,49 @@ const URL_PARAM = 'assetId';
     const detailsId = query?.[URL_PARAM];
     const assetId = detailsId ? parseInt(detailsId, 10) : null;
     const hasValidId = assetId !== null && !Number.isNaN(assetId);
-    const [isClosing, setIsClosing] = React.useState(false);
+    // 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
+    // when the close animation actually ends (see onCloseAnimationEnd), so the
+    // close duration lives entirely in CSS — no JS timer.
+    const [isMounted, setIsMounted] = React.useState(hasValidId);
     const displayAssetId = React.useRef(null);
-    const isVisible = hasValidId && !isClosing;
     React.useEffect(()=>{
         if (hasValidId) {
             displayAssetId.current = assetId;
+            setIsMounted(true);
         }
     }, [
         hasValidId,
         assetId
     ]);
+    const onCloseAnimationEnd = React.useCallback((event)=>{
+        // Ignore animations bubbling up from descendants, and the slide-in.
+        if (event.target === event.currentTarget && !hasValidId) {
+            setIsMounted(false);
+        }
+    }, [
+        hasValidId
+    ]);
     const openDetails = React.useCallback((id)=>{
-        setIsClosing(false);
         setQuery({
             [URL_PARAM]: String(id)
-        });
+        }, 'push', true);
     }, [
         setQuery
     ]);
     const closeDetails = React.useCallback(()=>{
-        if (!hasValidId) return;
-        setIsClosing(true);
-    }, [
-        hasValidId
-    ]);
-    React.useEffect(()=>{
-        if (!isClosing) return;
-        const timer = window.setTimeout(()=>{
-            setQuery({
-                [URL_PARAM]: undefined
-            }, 'remove');
-            setIsClosing(false);
-            displayAssetId.current = null;
-        }, DRAWER_CLOSE_ANIMATION_MS);
-        return ()=>window.clearTimeout(timer);
+        setQuery({
+            [URL_PARAM]: undefined
+        }, 'remove', true);
     }, [
-        isClosing,
         setQuery
     ]);
-    const shouldRenderDrawer = hasValidId || isClosing;
-    const drawerAssetId = isClosing ? displayAssetId.current ?? assetId : assetId;
     return {
-        assetId: drawerAssetId,
-        isVisible,
-        shouldRenderDrawer,
+        assetId: hasValidId ? assetId : displayAssetId.current,
+        isVisible: hasValidId,
+        shouldRenderDrawer: isMounted,
+        onCloseAnimationEnd,
         openDetails,
         closeDetails
     };
@@ -104,7 +103,18 @@ const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxs(DetailItemContainer, {
     fill: ${({ theme })=>theme.colors.warning500};
   }
 `;
-const DetailField = ({ name, label, value, required })=>/*#__PURE__*/ jsxs(Field.Root, {
+const DetailField = ({ name, label, required })=>{
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const isSubmitting = useForm('DetailField', (state)=>state.isSubmitting);
+    const value = field.value ?? '';
+    const emptyTooltipLabel = formatMessage({
+        id: getTranslationKey('asset-details.field.empty'),
+        defaultMessage: '{label} is currently empty.'
+    }, {
+        label
+    });
+    return /*#__PURE__*/ jsxs(Field.Root, {
         name: name,
         required: required,
         children: [
@@ -112,138 +122,254 @@ const DetailField = ({ name, label, value, required })=>/*#__PURE__*/ jsxs(Field
                 children: label
             }),
             /*#__PURE__*/ jsx(TextInput, {
-                value: value ?? '',
-                // TODO: handle onChange
-                onChange: ()=>{},
-                endAction: !value ? /*#__PURE__*/ jsx(StyledWarning, {}) : undefined,
-                type: "text"
+                value: value,
+                onChange: (event)=>field.onChange(name, event.target.value),
+                endAction: !value ? /*#__PURE__*/ jsx(Tooltip, {
+                    label: emptyTooltipLabel,
+                    children: /*#__PURE__*/ jsx(StyledWarning, {
+                        "aria-label": emptyTooltipLabel,
+                        role: "img"
+                    })
+                }) : undefined,
+                type: "text",
+                disabled: isSubmitting
             })
         ]
     });
-const AssetDetails = ({ asset })=>{
-    const { formatMessage, formatDate } = useIntl();
-    const isImage = asset.mime?.includes(AssetType.Image);
-    return /*#__PURE__*/ jsxs(Flex, {
-        direction: "column",
-        alignItems: "stretch",
-        gap: 4,
-        paddingTop: 4,
-        paddingBottom: 4,
-        paddingLeft: 5,
-        paddingRight: 5,
+};
+const LocationField = ({ label, rootLabel, folders })=>{
+    const field = useField('folder');
+    const isSubmitting = useForm('LocationField', (state)=>state.isSubmitting);
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        name: "folder",
+        required: true,
         children: [
-            /*#__PURE__*/ jsx(Typography, {
-                variant: "beta",
-                fontWeight: "semiBold",
-                tag: "h3",
-                children: formatMessage({
-                    id: getTranslationKey('asset-details.fileInfo'),
-                    defaultMessage: 'File info'
-                })
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
             }),
-            /*#__PURE__*/ jsxs(Flex, {
-                wrap: "wrap",
-                gap: 4,
-                background: "neutral100",
-                paddingTop: 4,
-                paddingBottom: 4,
-                paddingLeft: 6,
-                paddingRight: 6,
-                alignItems: "flex-start",
+            /*#__PURE__*/ jsxs(SingleSelect, {
+                value: field.value == null ? '' : String(field.value),
+                onChange: (value)=>{
+                    const next = value === '' ? null : Number(value);
+                    field.onChange('folder', next);
+                },
+                disabled: isSubmitting,
                 children: [
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.creationDate'),
-                            defaultMessage: 'Creation date'
-                        }),
-                        value: asset.createdAt ? formatDate(new Date(asset.createdAt), {
-                            dateStyle: 'long',
-                            timeStyle: 'short'
-                        }) : null
-                    }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.lastUpdated'),
-                            defaultMessage: 'Last updated'
-                        }),
-                        value: asset.updatedAt ? formatDate(new Date(asset.updatedAt), {
-                            dateStyle: 'long',
-                            timeStyle: 'short'
-                        }) : null
-                    }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.createdBy'),
-                            defaultMessage: 'Created by'
-                        }),
-                        value: asset.createdBy ? getDisplayName({
-                            firstname: asset.createdBy.firstname ?? undefined,
-                            lastname: asset.createdBy.lastname ?? undefined,
-                            username: asset.createdBy.username ?? undefined,
-                            email: asset.createdBy.email ?? undefined
-                        }) ?? '-' : null
+                    /*#__PURE__*/ jsx(SingleSelectOption, {
+                        value: "",
+                        children: rootLabel
                     }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.size'),
-                            defaultMessage: 'Size'
-                        }),
-                        value: asset.size ? formatBytes(asset.size, 1) : null
-                    }),
-                    isImage && (asset.width != null || asset.height != null) && /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.dimensions'),
-                            defaultMessage: 'Dimensions'
-                        }),
-                        value: asset.width != null && asset.height != null ? `${asset.width} × ${asset.height}` : null
-                    }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.extension'),
-                            defaultMessage: 'Extension'
-                        }),
-                        value: getFileExtension(asset.ext)
-                    }),
-                    /*#__PURE__*/ jsx(DetailItem, {
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.assetId'),
-                            defaultMessage: 'Asset ID'
-                        }),
-                        value: String(asset.id)
-                    })
+                    folders.map((folder)=>/*#__PURE__*/ jsx(SingleSelectOption, {
+                            value: String(folder.id),
+                            children: folder.name
+                        }, folder.id))
                 ]
-            }),
-            /*#__PURE__*/ jsx(DetailField, {
-                name: "fileName",
-                label: formatMessage({
-                    id: getTranslationKey('asset-details.fileName'),
-                    defaultMessage: 'File name'
-                }),
-                value: asset.name,
-                required: true
-            }),
-            isImage && /*#__PURE__*/ jsxs(Fragment, {
+            })
+        ]
+    });
+};
+const AssetDetails = ({ asset })=>{
+    const { formatMessage, formatDate } = useIntl();
+    const { toggleNotification } = useNotification();
+    const { data: folders = [] } = useGetAllFoldersQuery();
+    const [updateAsset] = useUpdateAssetMutation();
+    const isImage = asset.mime?.includes(AssetType.Image);
+    const initialValues = {
+        name: asset.name ?? '',
+        caption: asset.caption ?? '',
+        alternativeText: asset.alternativeText ?? '',
+        folder: typeof asset.folder === 'object' && asset.folder !== null ? asset.folder.id ?? null : asset.folder ?? null
+    };
+    const handleSubmit = async (values)=>{
+        const res = await updateAsset({
+            id: asset.id,
+            fileInfo: {
+                name: values.name,
+                caption: values.caption,
+                alternativeText: values.alternativeText,
+                folder: values.folder
+            }
+        });
+        if ('error' in res) {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: getTranslationKey('asset-details.update.error'),
+                    defaultMessage: 'Failed to update the file.'
+                })
+            });
+            return;
+        }
+        toggleNotification({
+            type: 'success',
+            message: formatMessage({
+                id: getTranslationKey('asset-details.update.success'),
+                defaultMessage: 'File updated'
+            })
+        });
+    };
+    return(// `key={asset.id}` resets the form when the drawer switches to a different
+    // asset so cached values from the previous asset don't bleed in.
+    /*#__PURE__*/ jsx(Form, {
+        method: "POST",
+        initialValues: initialValues,
+        onSubmit: handleSubmit,
+        children: ({ modified, isSubmitting, values, resetForm })=>{
+            const nameIsEmpty = (values.name ?? '').trim() === '';
+            return /*#__PURE__*/ jsxs(Fragment, {
                 children: [
-                    /*#__PURE__*/ jsx(DetailField, {
-                        name: "caption",
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.caption'),
-                            defaultMessage: 'Caption'
-                        }),
-                        value: asset.caption
+                    /*#__PURE__*/ jsx(Blocker, {
+                        onProceed: resetForm
                     }),
-                    /*#__PURE__*/ jsx(DetailField, {
-                        name: "alternativeText",
-                        label: formatMessage({
-                            id: getTranslationKey('asset-details.alternativeText'),
-                            defaultMessage: 'Alternative text'
-                        }),
-                        value: asset.alternativeText
+                    /*#__PURE__*/ jsxs(Flex, {
+                        direction: "column",
+                        alignItems: "stretch",
+                        gap: 4,
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                        paddingLeft: 5,
+                        paddingRight: 5,
+                        children: [
+                            /*#__PURE__*/ jsx(Typography, {
+                                variant: "beta",
+                                fontWeight: "semiBold",
+                                tag: "h3",
+                                children: formatMessage({
+                                    id: getTranslationKey('asset-details.fileInfo'),
+                                    defaultMessage: 'File info'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(Flex, {
+                                wrap: "wrap",
+                                gap: 4,
+                                background: "neutral100",
+                                paddingTop: 4,
+                                paddingBottom: 4,
+                                paddingLeft: 6,
+                                paddingRight: 6,
+                                alignItems: "flex-start",
+                                children: [
+                                    /*#__PURE__*/ jsx(DetailItem, {
+                                        label: formatMessage({
+                                            id: getTranslationKey('asset-details.creationDate'),
+                                            defaultMessage: 'Creation date'
+                                        }),
+                                        value: asset.createdAt ? formatDate(new Date(asset.createdAt), {
+                                            dateStyle: 'long',
+                                            timeStyle: 'short'
+                                        }) : null
+                                    }),
+                                    /*#__PURE__*/ jsx(DetailItem, {
+                                        label: formatMessage({
+                                            id: getTranslationKey('asset-details.lastUpdated'),
+                                            defaultMessage: 'Last updated'
+                                        }),
+                                        value: asset.updatedAt ? formatDate(new Date(asset.updatedAt), {
+                                            dateStyle: 'long',
+                                            timeStyle: 'short'
+                                        }) : null
+                                    }),
+                                    /*#__PURE__*/ jsx(DetailItem, {
+                                        label: formatMessage({
+                                            id: getTranslationKey('asset-details.createdBy'),
+                                            defaultMessage: 'Created by'
+                                        }),
+                                        value: asset.createdBy ? getDisplayName({
+                                            firstname: asset.createdBy.firstname ?? undefined,
+                                            lastname: asset.createdBy.lastname ?? undefined,
+                                            username: asset.createdBy.username ?? undefined,
+                                            email: asset.createdBy.email ?? undefined
+                                        }) ?? '-' : null
+                                    }),
+                                    /*#__PURE__*/ jsx(DetailItem, {
+                                        label: formatMessage({
+                                            id: getTranslationKey('asset-details.size'),
+                                            defaultMessage: 'Size'
+                                        }),
+                                        value: asset.size ? formatBytes(asset.size, 1) : null
+                                    }),
+                                    isImage && (asset.width != null || asset.height != null) && /*#__PURE__*/ jsx(DetailItem, {
+                                        label: formatMessage({
+                                            id: getTranslationKey('asset-details.dimensions'),
+                                            defaultMessage: 'Dimensions'
+                                        }),
+                                        value: asset.width != null && asset.height != null ? `${asset.width} × ${asset.height}` : null
+                                    }),
+                                    /*#__PURE__*/ jsx(DetailItem, {
+                                        label: formatMessage({
+                                            id: getTranslationKey('asset-details.extension'),
+                                            defaultMessage: 'Extension'
+                                        }),
+                                        value: getFileExtension(asset.ext)
+                                    }),
+                                    /*#__PURE__*/ jsx(DetailItem, {
+                                        label: formatMessage({
+                                            id: getTranslationKey('asset-details.assetId'),
+                                            defaultMessage: 'Asset ID'
+                                        }),
+                                        value: String(asset.id)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(DetailField, {
+                                name: "name",
+                                label: formatMessage({
+                                    id: getTranslationKey('asset-details.fileName'),
+                                    defaultMessage: 'File name'
+                                }),
+                                required: true
+                            }),
+                            /*#__PURE__*/ jsx(LocationField, {
+                                label: formatMessage({
+                                    id: getTranslationKey('asset-details.location'),
+                                    defaultMessage: 'Location'
+                                }),
+                                rootLabel: formatMessage({
+                                    id: getTranslationKey('plugin.home'),
+                                    defaultMessage: 'Home'
+                                }),
+                                folders: folders
+                            }),
+                            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(Flex, {
+                                justifyContent: "flex-end",
+                                gap: 2,
+                                paddingTop: 2,
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    type: "submit",
+                                    variant: "default",
+                                    loading: isSubmitting,
+                                    // File name is required; block submit when it's empty or whitespace so the API can't 400 on a blank value.
+                                    disabled: !modified || isSubmitting || nameIsEmpty,
+                                    children: formatMessage({
+                                        id: getTranslationKey('asset-details.save'),
+                                        defaultMessage: 'Save changes'
+                                    })
+                                })
+                            })
+                        ]
                     })
                 ]
-            })
-        ]
-    });
+            });
+        }
+    }, asset.id));
 };
 const DrawerHeader = ({ asset, closeDetails })=>{
     const DocIcon = asset ? getAssetIcon(asset.mime, asset.ext) : FileError;
@@ -341,7 +467,7 @@ const DrawerContent = ({ assetId, closeDetails })=>{
  * AssetDetailsDrawer
  * -----------------------------------------------------------------------------------------------*/ const AssetDetailsDrawer = ()=>{
     const { formatMessage } = useIntl();
-    const { assetId, isVisible, shouldRenderDrawer, closeDetails } = useAssetDetailsParam();
+    const { assetId, isVisible, shouldRenderDrawer, onCloseAnimationEnd, closeDetails } = useAssetDetailsParam();
     if (!shouldRenderDrawer || assetId === null) {
         return null;
     }
@@ -371,6 +497,7 @@ const DrawerContent = ({ assetId, closeDetails })=>{
                 animationDirection: "left",
                 width: "41.6rem",
                 height: "100vh",
+                onAnimationEnd: onCloseAnimationEnd,
                 children: /*#__PURE__*/ jsx(DrawerContent, {
                     assetId: assetId,
                     closeDetails: closeDetails
@@ -380,5 +507,5 @@ const DrawerContent = ({ assetId, closeDetails })=>{
     });
 };
 
-export { AssetDetailsDrawer, useAssetDetailsParam };
+export { AssetDetails, AssetDetailsDrawer, useAssetDetailsParam };
 //# sourceMappingURL=AssetDetailsDrawer.mjs.map