@strapi/upload 5.12.0 → 5.12.2

package/dist/admin/components/EditAssetDialog/EditAssetContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditAssetContent.js","sources":["../../../../admin/src/components/EditAssetDialog/EditAssetContent.tsx"],"sourcesContent":["/**\n *\n * EditAssetDialog\n *\n */\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport {\n  Button,\n  Field,\n  Flex,\n  Grid,\n  Loader,\n  Modal,\n  TextInput,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport isEqual from 'lodash/isEqual';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\nimport * as yup from 'yup';\n\nimport { useEditAsset } from '../../hooks/useEditAsset';\nimport { useFolderStructure } from '../../hooks/useFolderStructure';\nimport { findRecursiveFolderByValue, getTrad, getFileExtension, formatBytes } from '../../utils';\nimport { ContextInfo } from '../ContextInfo/ContextInfo';\nimport { SelectTree } from '../SelectTree/SelectTree';\n\nimport { DialogHeader } from './DialogHeader';\nimport { PreviewBox } from './PreviewBox/PreviewBox';\nimport { ReplaceMediaButton } from './ReplaceMediaButton';\n\nimport type { File as FileDefinition, RawFile } from '../../../../shared/contracts/files';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60vh + 8rem)`};\n`;\n\nconst fileInfoSchema = yup.object({\n  name: yup.string().required(),\n  alternativeText: yup.string(),\n  caption: yup.string(),\n  folder: yup.number(),\n});\n\nexport interface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface EditAssetContentProps {\n  asset?: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  onClose: (arg?: Asset | null | boolean) => void;\n}\n\ninterface FormInitialData {\n  name?: string;\n  alternativeText?: string;\n  caption?: string;\n  parent?: {\n    value?: number;\n    label: string;\n  };\n}\n\nexport const EditAssetContent = ({\n  onClose,\n  asset,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  trackedLocation,\n}: EditAssetContentProps) => {\n  const { formatMessage, formatDate } = useIntl();\n  const { trackUsage } = useTracking();\n  const submitButtonRef = React.useRef<HTMLButtonElement>(null);\n  const [isCropping, setIsCropping] = React.useState(false);\n  const [replacementFile, setReplacementFile] = React.useState<File | undefined>();\n  const { editAsset, isLoading } = useEditAsset();\n\n  const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({\n    enabled: true,\n  });\n\n  const handleSubmit = async (values: FormInitialData) => {\n    const nextAsset = { ...asset, ...values, folder: values.parent?.value } as Asset;\n\n    if (asset?.isLocal) {\n      onClose(nextAsset);\n    } else {\n      const editedAsset = (await editAsset(nextAsset, replacementFile!)) as Asset;\n\n      const assetType = asset?.mime?.split('/')[0];\n      // if the folder parent was the root of Media Library, its id is null\n      // we know it changed location if the new parent value exists\n      const didChangeLocation = asset?.folder?.id\n        ? asset.folder.id !== values.parent?.value\n        : asset?.folder === null && !!values.parent?.value;\n\n      trackUsage('didEditMediaLibraryElements', {\n        location: trackedLocation,\n        type: assetType,\n        changeLocation: didChangeLocation,\n      });\n\n      onClose(editedAsset);\n    }\n  };\n\n  const handleStartCropping = () => {\n    setIsCropping(true);\n  };\n\n  const handleCancelCropping = () => {\n    setIsCropping(false);\n  };\n\n  const handleFinishCropping = () => {\n    setIsCropping(false);\n    onClose();\n  };\n\n  const formDisabled = !canUpdate || isCropping;\n\n  const handleConfirmClose = () => {\n    // eslint-disable-next-line no-alert\n    const confirm = window.confirm(\n      formatMessage({\n        id: 'window.confirm.close-modal.file',\n        defaultMessage: 'Are you sure? Your changes will be lost.',\n      })\n    );\n\n    if (confirm) {\n      onClose();\n    }\n  };\n\n  const activeFolderId = asset?.folder?.id;\n  const initialFormData = !folderStructureIsLoading && {\n    name: asset?.name,\n    alternativeText: asset?.alternativeText ?? undefined,\n    caption: asset?.caption ?? undefined,\n    parent: {\n      value: activeFolderId ?? undefined,\n      label:\n        findRecursiveFolderByValue(folderStructure!, activeFolderId!)?.label ??\n        folderStructure![0].label,\n    },\n  };\n\n  const handleClose = (values?: { [key: string]: unknown }) => {\n    if (!isEqual(initialFormData, values)) {\n      handleConfirmClose();\n    } else {\n      onClose();\n    }\n  };\n\n  if (folderStructureIsLoading) {\n    return (\n      <>\n        <DialogHeader />\n        <LoadingBody minHeight=\"60vh\" justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <Modal.Footer>\n          <Button onClick={() => handleClose()} variant=\"tertiary\">\n            {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}\n          </Button>\n        </Modal.Footer>\n      </>\n    );\n  }\n\n  return (\n    <Formik\n      validationSchema={fileInfoSchema}\n      validateOnChange={false}\n      onSubmit={handleSubmit}\n      initialValues={initialFormData}\n    >\n      {({ values, errors, handleChange, setFieldValue }) => (\n        <>\n          <DialogHeader />\n          <Modal.Body>\n            <Grid.Root gap={4}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <PreviewBox\n                  asset={asset!}\n                  canUpdate={canUpdate}\n                  canCopyLink={canCopyLink}\n                  canDownload={canDownload}\n                  onDelete={onClose}\n                  onCropFinish={handleFinishCropping}\n                  onCropStart={handleStartCropping}\n                  onCropCancel={handleCancelCropping}\n                  replacementFile={replacementFile}\n                  trackedLocation={trackedLocation}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Form noValidate>\n                  <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n                    <ContextInfo\n                      blocks={[\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.size'),\n                            defaultMessage: 'Size',\n                          }),\n                          value: formatBytes(asset?.size ? asset.size : 0),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.dimensions'),\n                            defaultMessage: 'Dimensions',\n                          }),\n                          value:\n                            asset?.height && asset.width ? `${asset.width}✕${asset.height}` : null,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.date'),\n                            defaultMessage: 'Date',\n                          }),\n                          value: formatDate(new Date(asset?.createdAt ? asset.createdAt : '')),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.extension'),\n                            defaultMessage: 'Extension',\n                          }),\n                          value: getFileExtension(asset?.ext)!,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.id'),\n                            defaultMessage: 'Asset ID',\n                          }),\n                          value: asset?.id ? asset.id : null,\n                        },\n                      ]}\n                    />\n                    <Field.Root name=\"name\" error={errors.name}>\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-name'),\n                          defaultMessage: 'File name',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.name}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                      />\n                      <Field.Error />\n                    </Field.Root>\n\n                    <Field.Root\n                      name=\"alternativeText\"\n                      hint={formatMessage({\n                        id: getTrad('form.input.description.file-alt'),\n                        defaultMessage: 'This text will be displayed if the asset can’t be shown.',\n                      })}\n                      error={errors.alternativeText}\n                    >\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-alt'),\n                          defaultMessage: 'Alternative text',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.alternativeText}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                      />\n                      <Field.Hint />\n                      <Field.Error />\n                    </Field.Root>\n\n                    <Field.Root name=\"caption\" error={errors.caption}>\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-caption'),\n                          defaultMessage: 'Caption',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.caption}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                      />\n                    </Field.Root>\n\n                    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n                      <Field.Root name=\"parent\" id=\"asset-folder\">\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-location'),\n                            defaultMessage: 'Location',\n                          })}\n                        </Field.Label>\n\n                        <SelectTree\n                          name=\"parent\"\n                          defaultValue={values.parent}\n                          options={folderStructure!}\n                          onChange={(value) => {\n                            setFieldValue('parent', value);\n                          }}\n                          menuPortalTarget={document.querySelector('body')}\n                          inputId=\"asset-folder\"\n                          isDisabled={formDisabled}\n                          error={errors?.parent}\n                          ariaErrorMessage=\"folder-parent-error\"\n                        />\n                      </Field.Root>\n                    </Flex>\n                  </Flex>\n\n                  <VisuallyHidden>\n                    <button\n                      type=\"submit\"\n                      tabIndex={-1}\n                      ref={submitButtonRef}\n                      disabled={formDisabled}\n                    >\n                      {formatMessage({ id: 'submit', defaultMessage: 'Submit' })}\n                    </button>\n                  </VisuallyHidden>\n                </Form>\n              </Grid.Item>\n            </Grid.Root>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button onClick={() => handleClose({ ...values })} variant=\"tertiary\">\n              {formatMessage({ id: 'global.cancel', defaultMessage: 'Cancel' })}\n            </Button>\n            <Flex gap={2}>\n              <ReplaceMediaButton\n                onSelectMedia={setReplacementFile}\n                acceptedMime={asset?.mime ?? ''}\n                disabled={formDisabled}\n                trackedLocation={trackedLocation}\n              />\n\n              <Button\n                onClick={() => submitButtonRef.current?.click()}\n                loading={isLoading}\n                disabled={formDisabled}\n              >\n                {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n              </Button>\n            </Flex>\n          </Modal.Footer>\n        </>\n      )}\n    </Formik>\n  );\n};\n\ninterface EditAssetDialogProps {\n  asset: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  open: boolean;\n  onClose: (arg?: Asset | null | boolean) => void;\n}\n\nexport const EditAssetDialog = ({\n  open,\n  onClose,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  ...restProps\n}: EditAssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <EditAssetContent\n          onClose={onClose}\n          canUpdate={canUpdate}\n          canCopyLink={canCopyLink}\n          canDownload={canDownload}\n          {...restProps}\n        />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["LoadingBody","styled","Flex","fileInfoSchema","yup","object","name","string","required","alternativeText","caption","folder","number","EditAssetContent","onClose","asset","canUpdate","canCopyLink","canDownload","trackedLocation","formatMessage","formatDate","useIntl","trackUsage","useTracking","submitButtonRef","React","useRef","isCropping","setIsCropping","useState","replacementFile","setReplacementFile","editAsset","isLoading","useEditAsset","data","folderStructure","folderStructureIsLoading","useFolderStructure","enabled","handleSubmit","values","nextAsset","parent","value","isLocal","editedAsset","assetType","mime","split","didChangeLocation","id","location","type","changeLocation","handleStartCropping","handleCancelCropping","handleFinishCropping","formDisabled","handleConfirmClose","confirm","window","defaultMessage","activeFolderId","initialFormData","undefined","label","findRecursiveFolderByValue","handleClose","isEqual","_jsxs","_Fragment","_jsx","DialogHeader","minHeight","justifyContent","paddingTop","paddingBottom","Loader","getTrad","Modal","Footer","Button","onClick","variant","Formik","validationSchema","validateOnChange","onSubmit","initialValues","errors","handleChange","setFieldValue","Body","Grid","Root","gap","Item","xs","col","direction","alignItems","PreviewBox","onDelete","onCropFinish","onCropStart","onCropCancel","Form","noValidate","ContextInfo","blocks","formatBytes","size","height","width","Date","createdAt","getFileExtension","ext","Field","error","Label","TextInput","onChange","disabled","Error","hint","Hint","SelectTree","defaultValue","options","menuPortalTarget","document","querySelector","inputId","isDisabled","ariaErrorMessage","VisuallyHidden","button","tabIndex","ref","ReplaceMediaButton","onSelectMedia","acceptedMime","current","click","loading","EditAssetDialog","open","restProps","onOpenChange","Content"],"mappings":"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"}

package/dist/admin/components/EditAssetDialog/EditAssetContent.mjs

@@ -0,0 +1,380 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useTracking } from '@strapi/admin/strapi-admin';
+import { Flex, Modal, Loader, Button, Grid, Field, TextInput, VisuallyHidden } from '@strapi/design-system';
+import { Formik, Form } from 'formik';
+import isEqual from 'lodash/isEqual';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import * as yup from 'yup';
+import { useEditAsset } from '../../hooks/useEditAsset.mjs';
+import { useFolderStructure } from '../../hooks/useFolderStructure.mjs';
+import { findRecursiveFolderByValue } from '../../utils/findRecursiveFolderByValue.mjs';
+import { formatBytes } from '../../utils/formatBytes.mjs';
+import 'date-fns';
+import { getTrad } from '../../utils/getTrad.mjs';
+import 'qs';
+import { getFileExtension } from '../../utils/getFileExtension.mjs';
+import '../../constants.mjs';
+import '../../utils/urlYupSchema.mjs';
+import { ContextInfo } from '../ContextInfo/ContextInfo.mjs';
+import { SelectTree } from '../SelectTree/SelectTree.mjs';
+import { DialogHeader } from './DialogHeader.mjs';
+import { PreviewBox } from './PreviewBox/PreviewBox.mjs';
+import { ReplaceMediaButton } from './ReplaceMediaButton.mjs';
+
+const LoadingBody = styled(Flex)`
+  /* 80px are coming from the Tabs component that is not included in the ModalBody */
+  min-height: ${()=>`calc(60vh + 8rem)`};
+`;
+const fileInfoSchema = yup.object({
+    name: yup.string().required(),
+    alternativeText: yup.string(),
+    caption: yup.string(),
+    folder: yup.number()
+});
+const EditAssetContent = ({ onClose, asset, canUpdate = false, canCopyLink = false, canDownload = false, trackedLocation })=>{
+    const { formatMessage, formatDate } = useIntl();
+    const { trackUsage } = useTracking();
+    const submitButtonRef = React.useRef(null);
+    const [isCropping, setIsCropping] = React.useState(false);
+    const [replacementFile, setReplacementFile] = React.useState();
+    const { editAsset, isLoading } = useEditAsset();
+    const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
+        enabled: true
+    });
+    const handleSubmit = async (values)=>{
+        const nextAsset = {
+            ...asset,
+            ...values,
+            folder: values.parent?.value
+        };
+        if (asset?.isLocal) {
+            onClose(nextAsset);
+        } else {
+            const editedAsset = await editAsset(nextAsset, replacementFile);
+            const assetType = asset?.mime?.split('/')[0];
+            // if the folder parent was the root of Media Library, its id is null
+            // we know it changed location if the new parent value exists
+            const didChangeLocation = asset?.folder?.id ? asset.folder.id !== values.parent?.value : asset?.folder === null && !!values.parent?.value;
+            trackUsage('didEditMediaLibraryElements', {
+                location: trackedLocation,
+                type: assetType,
+                changeLocation: didChangeLocation
+            });
+            onClose(editedAsset);
+        }
+    };
+    const handleStartCropping = ()=>{
+        setIsCropping(true);
+    };
+    const handleCancelCropping = ()=>{
+        setIsCropping(false);
+    };
+    const handleFinishCropping = ()=>{
+        setIsCropping(false);
+        onClose();
+    };
+    const formDisabled = !canUpdate || isCropping;
+    const handleConfirmClose = ()=>{
+        // eslint-disable-next-line no-alert
+        const confirm = window.confirm(formatMessage({
+            id: 'window.confirm.close-modal.file',
+            defaultMessage: 'Are you sure? Your changes will be lost.'
+        }));
+        if (confirm) {
+            onClose();
+        }
+    };
+    const activeFolderId = asset?.folder?.id;
+    const initialFormData = !folderStructureIsLoading && {
+        name: asset?.name,
+        alternativeText: asset?.alternativeText ?? undefined,
+        caption: asset?.caption ?? undefined,
+        parent: {
+            value: activeFolderId ?? undefined,
+            label: findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ?? folderStructure[0].label
+        }
+    };
+    const handleClose = (values)=>{
+        if (!isEqual(initialFormData, values)) {
+            handleConfirmClose();
+        } else {
+            onClose();
+        }
+    };
+    if (folderStructureIsLoading) {
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(DialogHeader, {}),
+                /*#__PURE__*/ jsx(LoadingBody, {
+                    minHeight: "60vh",
+                    justifyContent: "center",
+                    paddingTop: 4,
+                    paddingBottom: 4,
+                    children: /*#__PURE__*/ jsx(Loader, {
+                        children: formatMessage({
+                            id: getTrad('content.isLoading'),
+                            defaultMessage: 'Content is loading.'
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx(Modal.Footer, {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        onClick: ()=>handleClose(),
+                        variant: "tertiary",
+                        children: formatMessage({
+                            id: 'cancel',
+                            defaultMessage: 'Cancel'
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsx(Formik, {
+        validationSchema: fileInfoSchema,
+        validateOnChange: false,
+        onSubmit: handleSubmit,
+        initialValues: initialFormData,
+        children: ({ values, errors, handleChange, setFieldValue })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(DialogHeader, {}),
+                    /*#__PURE__*/ jsx(Modal.Body, {
+                        children: /*#__PURE__*/ jsxs(Grid.Root, {
+                            gap: 4,
+                            children: [
+                                /*#__PURE__*/ jsx(Grid.Item, {
+                                    xs: 12,
+                                    col: 6,
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    children: /*#__PURE__*/ jsx(PreviewBox, {
+                                        asset: asset,
+                                        canUpdate: canUpdate,
+                                        canCopyLink: canCopyLink,
+                                        canDownload: canDownload,
+                                        onDelete: onClose,
+                                        onCropFinish: handleFinishCropping,
+                                        onCropStart: handleStartCropping,
+                                        onCropCancel: handleCancelCropping,
+                                        replacementFile: replacementFile,
+                                        trackedLocation: trackedLocation
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Grid.Item, {
+                                    xs: 12,
+                                    col: 6,
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    children: /*#__PURE__*/ jsxs(Form, {
+                                        noValidate: true,
+                                        children: [
+                                            /*#__PURE__*/ jsxs(Flex, {
+                                                direction: "column",
+                                                alignItems: "stretch",
+                                                gap: 3,
+                                                children: [
+                                                    /*#__PURE__*/ jsx(ContextInfo, {
+                                                        blocks: [
+                                                            {
+                                                                label: formatMessage({
+                                                                    id: getTrad('modal.file-details.size'),
+                                                                    defaultMessage: 'Size'
+                                                                }),
+                                                                value: formatBytes(asset?.size ? asset.size : 0)
+                                                            },
+                                                            {
+                                                                label: formatMessage({
+                                                                    id: getTrad('modal.file-details.dimensions'),
+                                                                    defaultMessage: 'Dimensions'
+                                                                }),
+                                                                value: asset?.height && asset.width ? `${asset.width}✕${asset.height}` : null
+                                                            },
+                                                            {
+                                                                label: formatMessage({
+                                                                    id: getTrad('modal.file-details.date'),
+                                                                    defaultMessage: 'Date'
+                                                                }),
+                                                                value: formatDate(new Date(asset?.createdAt ? asset.createdAt : ''))
+                                                            },
+                                                            {
+                                                                label: formatMessage({
+                                                                    id: getTrad('modal.file-details.extension'),
+                                                                    defaultMessage: 'Extension'
+                                                                }),
+                                                                value: getFileExtension(asset?.ext)
+                                                            },
+                                                            {
+                                                                label: formatMessage({
+                                                                    id: getTrad('modal.file-details.id'),
+                                                                    defaultMessage: 'Asset ID'
+                                                                }),
+                                                                value: asset?.id ? asset.id : null
+                                                            }
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxs(Field.Root, {
+                                                        name: "name",
+                                                        error: errors.name,
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Field.Label, {
+                                                                children: formatMessage({
+                                                                    id: getTrad('form.input.label.file-name'),
+                                                                    defaultMessage: 'File name'
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ jsx(TextInput, {
+                                                                value: values.name,
+                                                                onChange: handleChange,
+                                                                disabled: formDisabled
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Field.Error, {})
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxs(Field.Root, {
+                                                        name: "alternativeText",
+                                                        hint: formatMessage({
+                                                            id: getTrad('form.input.description.file-alt'),
+                                                            defaultMessage: 'This text will be displayed if the asset can’t be shown.'
+                                                        }),
+                                                        error: errors.alternativeText,
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Field.Label, {
+                                                                children: formatMessage({
+                                                                    id: getTrad('form.input.label.file-alt'),
+                                                                    defaultMessage: 'Alternative text'
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ jsx(TextInput, {
+                                                                value: values.alternativeText,
+                                                                onChange: handleChange,
+                                                                disabled: formDisabled
+                                                            }),
+                                                            /*#__PURE__*/ jsx(Field.Hint, {}),
+                                                            /*#__PURE__*/ jsx(Field.Error, {})
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxs(Field.Root, {
+                                                        name: "caption",
+                                                        error: errors.caption,
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(Field.Label, {
+                                                                children: formatMessage({
+                                                                    id: getTrad('form.input.label.file-caption'),
+                                                                    defaultMessage: 'Caption'
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ jsx(TextInput, {
+                                                                value: values.caption,
+                                                                onChange: handleChange,
+                                                                disabled: formDisabled
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Flex, {
+                                                        direction: "column",
+                                                        alignItems: "stretch",
+                                                        gap: 1,
+                                                        children: /*#__PURE__*/ jsxs(Field.Root, {
+                                                            name: "parent",
+                                                            id: "asset-folder",
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(Field.Label, {
+                                                                    children: formatMessage({
+                                                                        id: getTrad('form.input.label.file-location'),
+                                                                        defaultMessage: 'Location'
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ jsx(SelectTree, {
+                                                                    name: "parent",
+                                                                    defaultValue: values.parent,
+                                                                    options: folderStructure,
+                                                                    onChange: (value)=>{
+                                                                        setFieldValue('parent', value);
+                                                                    },
+                                                                    menuPortalTarget: document.querySelector('body'),
+                                                                    inputId: "asset-folder",
+                                                                    isDisabled: formDisabled,
+                                                                    error: errors?.parent,
+                                                                    ariaErrorMessage: "folder-parent-error"
+                                                                })
+                                                            ]
+                                                        })
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsx(VisuallyHidden, {
+                                                children: /*#__PURE__*/ jsx("button", {
+                                                    type: "submit",
+                                                    tabIndex: -1,
+                                                    ref: submitButtonRef,
+                                                    disabled: formDisabled,
+                                                    children: formatMessage({
+                                                        id: 'submit',
+                                                        defaultMessage: 'Submit'
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Modal.Footer, {
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                onClick: ()=>handleClose({
+                                        ...values
+                                    }),
+                                variant: "tertiary",
+                                children: formatMessage({
+                                    id: 'global.cancel',
+                                    defaultMessage: 'Cancel'
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(Flex, {
+                                gap: 2,
+                                children: [
+                                    /*#__PURE__*/ jsx(ReplaceMediaButton, {
+                                        onSelectMedia: setReplacementFile,
+                                        acceptedMime: asset?.mime ?? '',
+                                        disabled: formDisabled,
+                                        trackedLocation: trackedLocation
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        onClick: ()=>submitButtonRef.current?.click(),
+                                        loading: isLoading,
+                                        disabled: formDisabled,
+                                        children: formatMessage({
+                                            id: 'global.finish',
+                                            defaultMessage: 'Finish'
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+    });
+};
+const EditAssetDialog = ({ open, onClose, canUpdate = false, canCopyLink = false, canDownload = false, ...restProps })=>{
+    return /*#__PURE__*/ jsx(Modal.Root, {
+        open: open,
+        onOpenChange: onClose,
+        children: /*#__PURE__*/ jsx(Modal.Content, {
+            children: /*#__PURE__*/ jsx(EditAssetContent, {
+                onClose: onClose,
+                canUpdate: canUpdate,
+                canCopyLink: canCopyLink,
+                canDownload: canDownload,
+                ...restProps
+            })
+        })
+    });
+};
+
+export { EditAssetContent, EditAssetDialog };
+//# sourceMappingURL=EditAssetContent.mjs.map

package/dist/admin/components/EditAssetDialog/EditAssetContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditAssetContent.mjs","sources":["../../../../admin/src/components/EditAssetDialog/EditAssetContent.tsx"],"sourcesContent":["/**\n *\n * EditAssetDialog\n *\n */\nimport * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport {\n  Button,\n  Field,\n  Flex,\n  Grid,\n  Loader,\n  Modal,\n  TextInput,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport isEqual from 'lodash/isEqual';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\nimport * as yup from 'yup';\n\nimport { useEditAsset } from '../../hooks/useEditAsset';\nimport { useFolderStructure } from '../../hooks/useFolderStructure';\nimport { findRecursiveFolderByValue, getTrad, getFileExtension, formatBytes } from '../../utils';\nimport { ContextInfo } from '../ContextInfo/ContextInfo';\nimport { SelectTree } from '../SelectTree/SelectTree';\n\nimport { DialogHeader } from './DialogHeader';\nimport { PreviewBox } from './PreviewBox/PreviewBox';\nimport { ReplaceMediaButton } from './ReplaceMediaButton';\n\nimport type { File as FileDefinition, RawFile } from '../../../../shared/contracts/files';\n\nconst LoadingBody = styled(Flex)`\n  /* 80px are coming from the Tabs component that is not included in the ModalBody */\n  min-height: ${() => `calc(60vh + 8rem)`};\n`;\n\nconst fileInfoSchema = yup.object({\n  name: yup.string().required(),\n  alternativeText: yup.string(),\n  caption: yup.string(),\n  folder: yup.number(),\n});\n\nexport interface Asset extends Omit<FileDefinition, 'folder'> {\n  isLocal?: boolean;\n  rawFile?: RawFile;\n  folder?: FileDefinition['folder'] & { id: number };\n}\n\ninterface EditAssetContentProps {\n  asset?: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  onClose: (arg?: Asset | null | boolean) => void;\n}\n\ninterface FormInitialData {\n  name?: string;\n  alternativeText?: string;\n  caption?: string;\n  parent?: {\n    value?: number;\n    label: string;\n  };\n}\n\nexport const EditAssetContent = ({\n  onClose,\n  asset,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  trackedLocation,\n}: EditAssetContentProps) => {\n  const { formatMessage, formatDate } = useIntl();\n  const { trackUsage } = useTracking();\n  const submitButtonRef = React.useRef<HTMLButtonElement>(null);\n  const [isCropping, setIsCropping] = React.useState(false);\n  const [replacementFile, setReplacementFile] = React.useState<File | undefined>();\n  const { editAsset, isLoading } = useEditAsset();\n\n  const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({\n    enabled: true,\n  });\n\n  const handleSubmit = async (values: FormInitialData) => {\n    const nextAsset = { ...asset, ...values, folder: values.parent?.value } as Asset;\n\n    if (asset?.isLocal) {\n      onClose(nextAsset);\n    } else {\n      const editedAsset = (await editAsset(nextAsset, replacementFile!)) as Asset;\n\n      const assetType = asset?.mime?.split('/')[0];\n      // if the folder parent was the root of Media Library, its id is null\n      // we know it changed location if the new parent value exists\n      const didChangeLocation = asset?.folder?.id\n        ? asset.folder.id !== values.parent?.value\n        : asset?.folder === null && !!values.parent?.value;\n\n      trackUsage('didEditMediaLibraryElements', {\n        location: trackedLocation,\n        type: assetType,\n        changeLocation: didChangeLocation,\n      });\n\n      onClose(editedAsset);\n    }\n  };\n\n  const handleStartCropping = () => {\n    setIsCropping(true);\n  };\n\n  const handleCancelCropping = () => {\n    setIsCropping(false);\n  };\n\n  const handleFinishCropping = () => {\n    setIsCropping(false);\n    onClose();\n  };\n\n  const formDisabled = !canUpdate || isCropping;\n\n  const handleConfirmClose = () => {\n    // eslint-disable-next-line no-alert\n    const confirm = window.confirm(\n      formatMessage({\n        id: 'window.confirm.close-modal.file',\n        defaultMessage: 'Are you sure? Your changes will be lost.',\n      })\n    );\n\n    if (confirm) {\n      onClose();\n    }\n  };\n\n  const activeFolderId = asset?.folder?.id;\n  const initialFormData = !folderStructureIsLoading && {\n    name: asset?.name,\n    alternativeText: asset?.alternativeText ?? undefined,\n    caption: asset?.caption ?? undefined,\n    parent: {\n      value: activeFolderId ?? undefined,\n      label:\n        findRecursiveFolderByValue(folderStructure!, activeFolderId!)?.label ??\n        folderStructure![0].label,\n    },\n  };\n\n  const handleClose = (values?: { [key: string]: unknown }) => {\n    if (!isEqual(initialFormData, values)) {\n      handleConfirmClose();\n    } else {\n      onClose();\n    }\n  };\n\n  if (folderStructureIsLoading) {\n    return (\n      <>\n        <DialogHeader />\n        <LoadingBody minHeight=\"60vh\" justifyContent=\"center\" paddingTop={4} paddingBottom={4}>\n          <Loader>\n            {formatMessage({\n              id: getTrad('content.isLoading'),\n              defaultMessage: 'Content is loading.',\n            })}\n          </Loader>\n        </LoadingBody>\n        <Modal.Footer>\n          <Button onClick={() => handleClose()} variant=\"tertiary\">\n            {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}\n          </Button>\n        </Modal.Footer>\n      </>\n    );\n  }\n\n  return (\n    <Formik\n      validationSchema={fileInfoSchema}\n      validateOnChange={false}\n      onSubmit={handleSubmit}\n      initialValues={initialFormData}\n    >\n      {({ values, errors, handleChange, setFieldValue }) => (\n        <>\n          <DialogHeader />\n          <Modal.Body>\n            <Grid.Root gap={4}>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <PreviewBox\n                  asset={asset!}\n                  canUpdate={canUpdate}\n                  canCopyLink={canCopyLink}\n                  canDownload={canDownload}\n                  onDelete={onClose}\n                  onCropFinish={handleFinishCropping}\n                  onCropStart={handleStartCropping}\n                  onCropCancel={handleCancelCropping}\n                  replacementFile={replacementFile}\n                  trackedLocation={trackedLocation}\n                />\n              </Grid.Item>\n              <Grid.Item xs={12} col={6} direction=\"column\" alignItems=\"stretch\">\n                <Form noValidate>\n                  <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n                    <ContextInfo\n                      blocks={[\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.size'),\n                            defaultMessage: 'Size',\n                          }),\n                          value: formatBytes(asset?.size ? asset.size : 0),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.dimensions'),\n                            defaultMessage: 'Dimensions',\n                          }),\n                          value:\n                            asset?.height && asset.width ? `${asset.width}✕${asset.height}` : null,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.date'),\n                            defaultMessage: 'Date',\n                          }),\n                          value: formatDate(new Date(asset?.createdAt ? asset.createdAt : '')),\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.extension'),\n                            defaultMessage: 'Extension',\n                          }),\n                          value: getFileExtension(asset?.ext)!,\n                        },\n\n                        {\n                          label: formatMessage({\n                            id: getTrad('modal.file-details.id'),\n                            defaultMessage: 'Asset ID',\n                          }),\n                          value: asset?.id ? asset.id : null,\n                        },\n                      ]}\n                    />\n                    <Field.Root name=\"name\" error={errors.name}>\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-name'),\n                          defaultMessage: 'File name',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.name}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                      />\n                      <Field.Error />\n                    </Field.Root>\n\n                    <Field.Root\n                      name=\"alternativeText\"\n                      hint={formatMessage({\n                        id: getTrad('form.input.description.file-alt'),\n                        defaultMessage: 'This text will be displayed if the asset can’t be shown.',\n                      })}\n                      error={errors.alternativeText}\n                    >\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-alt'),\n                          defaultMessage: 'Alternative text',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.alternativeText}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                      />\n                      <Field.Hint />\n                      <Field.Error />\n                    </Field.Root>\n\n                    <Field.Root name=\"caption\" error={errors.caption}>\n                      <Field.Label>\n                        {formatMessage({\n                          id: getTrad('form.input.label.file-caption'),\n                          defaultMessage: 'Caption',\n                        })}\n                      </Field.Label>\n                      <TextInput\n                        value={values.caption}\n                        onChange={handleChange}\n                        disabled={formDisabled}\n                      />\n                    </Field.Root>\n\n                    <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n                      <Field.Root name=\"parent\" id=\"asset-folder\">\n                        <Field.Label>\n                          {formatMessage({\n                            id: getTrad('form.input.label.file-location'),\n                            defaultMessage: 'Location',\n                          })}\n                        </Field.Label>\n\n                        <SelectTree\n                          name=\"parent\"\n                          defaultValue={values.parent}\n                          options={folderStructure!}\n                          onChange={(value) => {\n                            setFieldValue('parent', value);\n                          }}\n                          menuPortalTarget={document.querySelector('body')}\n                          inputId=\"asset-folder\"\n                          isDisabled={formDisabled}\n                          error={errors?.parent}\n                          ariaErrorMessage=\"folder-parent-error\"\n                        />\n                      </Field.Root>\n                    </Flex>\n                  </Flex>\n\n                  <VisuallyHidden>\n                    <button\n                      type=\"submit\"\n                      tabIndex={-1}\n                      ref={submitButtonRef}\n                      disabled={formDisabled}\n                    >\n                      {formatMessage({ id: 'submit', defaultMessage: 'Submit' })}\n                    </button>\n                  </VisuallyHidden>\n                </Form>\n              </Grid.Item>\n            </Grid.Root>\n          </Modal.Body>\n          <Modal.Footer>\n            <Button onClick={() => handleClose({ ...values })} variant=\"tertiary\">\n              {formatMessage({ id: 'global.cancel', defaultMessage: 'Cancel' })}\n            </Button>\n            <Flex gap={2}>\n              <ReplaceMediaButton\n                onSelectMedia={setReplacementFile}\n                acceptedMime={asset?.mime ?? ''}\n                disabled={formDisabled}\n                trackedLocation={trackedLocation}\n              />\n\n              <Button\n                onClick={() => submitButtonRef.current?.click()}\n                loading={isLoading}\n                disabled={formDisabled}\n              >\n                {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n              </Button>\n            </Flex>\n          </Modal.Footer>\n        </>\n      )}\n    </Formik>\n  );\n};\n\ninterface EditAssetDialogProps {\n  asset: Asset;\n  canUpdate?: boolean;\n  canCopyLink?: boolean;\n  canDownload?: boolean;\n  trackedLocation?: string;\n  open: boolean;\n  onClose: (arg?: Asset | null | boolean) => void;\n}\n\nexport const EditAssetDialog = ({\n  open,\n  onClose,\n  canUpdate = false,\n  canCopyLink = false,\n  canDownload = false,\n  ...restProps\n}: EditAssetDialogProps) => {\n  return (\n    <Modal.Root open={open} onOpenChange={onClose}>\n      <Modal.Content>\n        <EditAssetContent\n          onClose={onClose}\n          canUpdate={canUpdate}\n          canCopyLink={canCopyLink}\n          canDownload={canDownload}\n          {...restProps}\n        />\n      </Modal.Content>\n    </Modal.Root>\n  );\n};\n"],"names":["LoadingBody","styled","Flex","fileInfoSchema","yup","object","name","string","required","alternativeText","caption","folder","number","EditAssetContent","onClose","asset","canUpdate","canCopyLink","canDownload","trackedLocation","formatMessage","formatDate","useIntl","trackUsage","useTracking","submitButtonRef","React","useRef","isCropping","setIsCropping","useState","replacementFile","setReplacementFile","editAsset","isLoading","useEditAsset","data","folderStructure","folderStructureIsLoading","useFolderStructure","enabled","handleSubmit","values","nextAsset","parent","value","isLocal","editedAsset","assetType","mime","split","didChangeLocation","id","location","type","changeLocation","handleStartCropping","handleCancelCropping","handleFinishCropping","formDisabled","handleConfirmClose","confirm","window","defaultMessage","activeFolderId","initialFormData","undefined","label","findRecursiveFolderByValue","handleClose","isEqual","_jsxs","_Fragment","_jsx","DialogHeader","minHeight","justifyContent","paddingTop","paddingBottom","Loader","getTrad","Modal","Footer","Button","onClick","variant","Formik","validationSchema","validateOnChange","onSubmit","initialValues","errors","handleChange","setFieldValue","Body","Grid","Root","gap","Item","xs","col","direction","alignItems","PreviewBox","onDelete","onCropFinish","onCropStart","onCropCancel","Form","noValidate","ContextInfo","blocks","formatBytes","size","height","width","Date","createdAt","getFileExtension","ext","Field","error","Label","TextInput","onChange","disabled","Error","hint","Hint","SelectTree","defaultValue","options","menuPortalTarget","document","querySelector","inputId","isDisabled","ariaErrorMessage","VisuallyHidden","button","tabIndex","ref","ReplaceMediaButton","onSelectMedia","acceptedMime","current","click","loading","EditAssetDialog","open","restProps","onOpenChange","Content"],"mappings":"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"}

package/dist/admin/components/EditAssetDialog/PreviewBox/AssetPreview.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var MuxPlayer = require('@mux/mux-player-react');
+var designSystem = require('@strapi/design-system');
+var icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var constants = require('../../../constants.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const CardAsset = styledComponents.styled(designSystem.Flex)`
+  min-height: 26.4rem;
+  border-radius: ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius} 0 0;
+  background: linear-gradient(
+    180deg,
+    ${({ theme })=>theme.colors.neutral0} 0%,
+    ${({ theme })=>theme.colors.neutral100} 121.48%
+  );
+`;
+const AssetPreview = /*#__PURE__*/ React__namespace.forwardRef(({ mime, url, name, ...props }, ref)=>{
+    const theme = styledComponents.useTheme();
+    const { formatMessage } = reactIntl.useIntl();
+    if (mime.includes(constants.AssetType.Image)) {
+        return /*#__PURE__*/ jsxRuntime.jsx("img", {
+            ref: ref,
+            src: url,
+            alt: name,
+            ...props
+        });
+    }
+    if (mime.includes(constants.AssetType.Video)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(MuxPlayer, {
+            src: url,
+            accentColor: theme.colors.primary500
+        });
+    }
+    if (mime.includes(constants.AssetType.Audio)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            margin: "5",
+            children: /*#__PURE__*/ jsxRuntime.jsx("audio", {
+                controls: true,
+                src: url,
+                ref: ref,
+                ...props,
+                children: name
+            })
+        });
+    }
+    if (mime.includes('pdf')) {
+        return /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
+            width: "100%",
+            justifyContent: "center",
+            ...props,
+            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                gap: 2,
+                direction: "column",
+                alignItems: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(icons.FilePdf, {
+                        "aria-label": name,
+                        fill: "neutral500",
+                        width: 24,
+                        height: 24
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral500",
+                        variant: "pi",
+                        children: formatMessage({
+                            id: 'noPreview',
+                            defaultMessage: 'No preview available'
+                        })
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
+        width: "100%",
+        justifyContent: "center",
+        ...props,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            gap: 2,
+            direction: "column",
+            alignItems: "center",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(icons.File, {
+                    "aria-label": name,
+                    fill: "neutral500",
+                    width: 24,
+                    height: 24
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    textColor: "neutral500",
+                    variant: "pi",
+                    children: formatMessage({
+                        id: 'noPreview',
+                        defaultMessage: 'No preview available'
+                    })
+                })
+            ]
+        })
+    });
+});
+AssetPreview.displayName = 'AssetPreview';
+
+exports.AssetPreview = AssetPreview;
+//# sourceMappingURL=AssetPreview.js.map