diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/DialogHeader.js b/packages/core/upload/admin/src/components/EditAssetDialog/DialogHeader.js
new file mode 100644
index 0000000000..9e729af26e
--- /dev/null
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/DialogHeader.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import { ModalHeader } from '@strapi/design-system/ModalLayout';
+
+export const DialogHeader = () => {
+ const { formatMessage } = useIntl();
+
+ return (
+
+
+ {formatMessage({ id: 'global.details', defaultMessage: 'Details' })}
+
+
+ );
+};
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/index.js
index 2748110780..bd31f761e9 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/index.js
@@ -8,14 +8,11 @@ import PropTypes from 'prop-types';
import React, { useRef, useState } from 'react';
import { useIntl } from 'react-intl';
import isEqual from 'lodash/isEqual';
-import {
- ModalLayout,
- ModalHeader,
- ModalBody,
- ModalFooter,
-} from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
+import styled from 'styled-components';
+import { ModalLayout, ModalBody, ModalFooter } from '@strapi/design-system/ModalLayout';
import { Stack } from '@strapi/design-system/Stack';
+import { Flex } from '@strapi/design-system/Flex';
+import { Loader } from '@strapi/design-system/Loader';
import { Grid, GridItem } from '@strapi/design-system/Grid';
import { Button } from '@strapi/design-system/Button';
import { FieldLabel } from '@strapi/design-system/Field';
@@ -25,15 +22,21 @@ import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
import { Formik } from 'formik';
import * as yup from 'yup';
+import { DialogHeader } from './DialogHeader';
import { PreviewBox } from './PreviewBox';
import { ContextInfo } from '../ContextInfo';
-import { FolderStructureDefinition, AssetDefinition } from '../../constants';
+import { AssetDefinition } from '../../constants';
import { getTrad, findRecursiveFolderByValue } from '../../utils';
import formatBytes from '../../utils/formatBytes';
import { useEditAsset } from '../../hooks/useEditAsset';
+import { useFolderStructure } from '../../hooks/useFolderStructure';
import { ReplaceMediaButton } from './ReplaceMediaButton';
import SelectTree from '../SelectTree';
+const LoadingBody = styled(Flex)`
+ min-height: calc(60vh + 80px);
+`;
+
const fileInfoSchema = yup.object({
name: yup.string().required(),
alternativeText: yup.string(),
@@ -47,7 +50,6 @@ export const EditAssetDialog = ({
canCopyLink,
canDownload,
trackedLocation,
- folderStructure,
}) => {
const { formatMessage, formatDate } = useIntl();
const submitButtonRef = useRef(null);
@@ -55,6 +57,10 @@ export const EditAssetDialog = ({
const [replacementFile, setReplacementFile] = useState();
const { editAsset, isLoading } = useEditAsset();
+ const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
+ enabled: true,
+ });
+
const handleSubmit = async values => {
if (asset.isLocal) {
const nextAsset = { ...asset, ...values };
@@ -96,7 +102,7 @@ export const EditAssetDialog = ({
};
const activeFolderId = asset?.folder?.id;
- const initialFormData = {
+ const initialFormData = !folderStructureIsLoading && {
name: asset.name,
alternativeText: asset.alternativeText ?? undefined,
caption: asset.caption ?? undefined,
@@ -116,6 +122,29 @@ export const EditAssetDialog = ({
}
};
+ if (folderStructureIsLoading) {
+ return (
+ handleClose()} labelledBy="title">
+
+
+
+ {formatMessage({
+ id: getTrad('list.asset.load'),
+ defaultMessage: 'How do you want to upload your assets?',
+ })}
+
+
+ handleClose()} variant="tertiary">
+ {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}
+
+ }
+ />
+
+ );
+ }
+
return (
{({ values, errors, handleChange, setFieldValue }) => (
handleClose(values)} labelledBy="title">
-
-
- {formatMessage({ id: 'global.details', defaultMessage: 'Details' })}
-
-
+
@@ -308,6 +333,5 @@ EditAssetDialog.propTypes = {
canCopyLink: PropTypes.bool.isRequired,
canDownload: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
- folderStructure: FolderStructureDefinition.isRequired,
trackedLocation: PropTypes.string,
};
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js b/packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js
index ef7d706686..c435b7826f 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/EditAssetDialog.test.js
@@ -9,6 +9,7 @@ import { EditAssetDialog } from '../index';
import en from '../../../translations/en.json';
import { downloadFile } from '../../../utils/downloadFile';
+jest.mock('../../../hooks/useFolderStructure');
jest.mock('../../../utils/downloadFile');
const messageForPlugin = Object.keys(en).reduce((acc, curr) => {
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js b/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
index 9d0db0c1ab..64a2a87737 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/index.test.js
@@ -15,6 +15,7 @@ import en from '../../../translations/en.json';
import { downloadFile } from '../../../utils/downloadFile';
jest.mock('../../../utils/downloadFile');
+jest.mock('../../../hooks/useFolderStructure');
const messageForPlugin = Object.keys(en).reduce((acc, curr) => {
acc[curr] = `upload.${en[curr]}`;