From 6532903b42d1039a3b45b47b9e0f40be8f7aee7c Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 31 May 2022 16:28:28 +0200 Subject: [PATCH] fixed folderStructure needed in EditAssetDialog --- .../EditAssetDialog/DialogHeader.js | 16 ++++++ .../src/components/EditAssetDialog/index.js | 56 +++++++++++++------ .../tests/EditAssetDialog.test.js | 1 + .../EditAssetDialog/tests/index.test.js | 1 + 4 files changed, 58 insertions(+), 16 deletions(-) create mode 100644 packages/core/upload/admin/src/components/EditAssetDialog/DialogHeader.js 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]}`;