diff --git a/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js b/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js index cad1d2fb68..5f8a183f07 100644 --- a/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js +++ b/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js @@ -24,7 +24,7 @@ import SelectTree from '../SelectTree'; import { useFolderStructure } from '../../hooks/useFolderStructure'; import { FolderDefinition, AssetDefinition } from '../../constants'; -export const BulkMoveDialog = ({ onClose, selected }) => { +export const BulkMoveDialog = ({ onClose, selected, currentFolder }) => { const { formatMessage } = useIntl(); const { data: folderStructure, isLoading } = useFolderStructure(); const { move } = useBulkMove(); @@ -73,7 +73,10 @@ export const BulkMoveDialog = ({ onClose, selected }) => { } const initialFormData = { - destination: folderStructure[0], + destination: { + value: currentFolder?.id || '', + label: currentFolder?.name || folderStructure[0].label, + }, }; return ( @@ -148,9 +151,12 @@ export const BulkMoveDialog = ({ onClose, selected }) => { ); }; -BulkMoveDialog.defaultProps = {}; +BulkMoveDialog.defaultProps = { + currentFolder: undefined, +}; BulkMoveDialog.propTypes = { - selected: PropTypes.arrayOf(FolderDefinition, AssetDefinition).isRequired, onClose: PropTypes.func.isRequired, + currentFolder: FolderDefinition, + selected: PropTypes.arrayOf(FolderDefinition, AssetDefinition).isRequired, }; diff --git a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/BulkMoveDialog.test.js b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/BulkMoveDialog.test.js index 3770fa4237..ad01a655f9 100644 --- a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/BulkMoveDialog.test.js +++ b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/BulkMoveDialog.test.js @@ -8,6 +8,7 @@ import { QueryClientProvider, QueryClient } from 'react-query'; import { BulkMoveDialog } from '..'; jest.mock('../../../hooks/useFolderStructure'); +jest.mock('../../../hooks/useBulkMove'); const client = new QueryClient({ defaultOptions: { @@ -31,7 +32,7 @@ function ComponentFixture(props) { ); } -function setup(props = { onClose: jest.fn() }) { +function setup(props = { onClose: jest.fn(), selected: [] }) { return render(, { container: document.getElementById('app') }); } @@ -41,10 +42,7 @@ describe('BulkMoveDialog', () => { }); test('renders and matches the snapshot', () => { - setup({ - selected: [], - onClose: jest.fn(), - }); + setup(); expect(document.body).toMatchSnapshot(); }); }); diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index e567fad65d..d96dcdcac2 100644 --- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js +++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js @@ -199,7 +199,9 @@ export const MediaLibrary = () => { /> - {selected.length > 0 && } + {selected.length > 0 && ( + + )} {isLoading && } diff --git a/packages/core/upload/admin/src/pages/App/components/BulkActions.js b/packages/core/upload/admin/src/pages/App/components/BulkActions.js index db7872278e..b543f319d5 100644 --- a/packages/core/upload/admin/src/pages/App/components/BulkActions.js +++ b/packages/core/upload/admin/src/pages/App/components/BulkActions.js @@ -9,7 +9,7 @@ import getTrad from '../../../utils/getTrad'; import { BulkDeleteButton } from './BulkDeleteButton'; import { BulkMoveButton } from './BulkMoveButton'; -export const BulkActions = ({ selected, onSuccess }) => { +export const BulkActions = ({ selected, onSuccess, currentFolder }) => { const { formatMessage } = useIntl(); return ( @@ -29,12 +29,17 @@ export const BulkActions = ({ selected, onSuccess }) => { - + ); }; -BulkActions.propTypes = { - selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition).isRequired, - onSuccess: PropTypes.func.isRequired, +BulkActions.defaultProps = { + currentFolder: undefined, +}; + +BulkActions.propTypes = { + onSuccess: PropTypes.func.isRequired, + currentFolder: FolderDefinition, + selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition).isRequired, }; diff --git a/packages/core/upload/admin/src/pages/App/components/BulkMoveButton.js b/packages/core/upload/admin/src/pages/App/components/BulkMoveButton.js index d96f80c8d4..b6271c01af 100644 --- a/packages/core/upload/admin/src/pages/App/components/BulkMoveButton.js +++ b/packages/core/upload/admin/src/pages/App/components/BulkMoveButton.js @@ -7,7 +7,7 @@ import Folder from '@strapi/icons/Folder'; import { BulkMoveDialog } from '../../../components/BulkMoveDialog'; import { AssetDefinition, FolderDefinition } from '../../../constants'; -export const BulkMoveButton = ({ selected, onSuccess }) => { +export const BulkMoveButton = ({ selected, onSuccess, currentFolder }) => { const { formatMessage } = useIntl(); const [showConfirmDialog, setShowConfirmDialog] = useState(false); @@ -27,12 +27,23 @@ export const BulkMoveButton = ({ selected, onSuccess }) => { {formatMessage({ id: 'global.move', defaultMessage: 'Move' })} - {showConfirmDialog && } + {showConfirmDialog && ( + + )} ); }; -BulkMoveButton.propTypes = { - selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition).isRequired, - onSuccess: PropTypes.func.isRequired, +BulkMoveButton.defaultProps = { + currentFolder: undefined, +}; + +BulkMoveButton.propTypes = { + onSuccess: PropTypes.func.isRequired, + currentFolder: FolderDefinition, + selected: PropTypes.arrayOf(AssetDefinition, FolderDefinition).isRequired, }; diff --git a/packages/core/upload/admin/src/pages/App/tests/BulkMoveButton.test.js b/packages/core/upload/admin/src/pages/App/tests/BulkMoveButton.test.js index b1b7183df0..0079e745b3 100644 --- a/packages/core/upload/admin/src/pages/App/tests/BulkMoveButton.test.js +++ b/packages/core/upload/admin/src/pages/App/tests/BulkMoveButton.test.js @@ -12,6 +12,20 @@ import { useBulkMove } from '../../../hooks/useBulkMove'; jest.mock('../../../hooks/useBulkMove'); jest.mock('../../../hooks/useFolderStructure'); +const FIXTURE_SELECTION = [ + { + type: 'asset', + createdAt: '2022-06-21T07:04:49.813Z', + updatedAt: '2022-06-21T07:04:49.813Z', + pathId: 1, + path: '/1', + files: { count: 0 }, + id: 1, + children: { count: 0 }, + name: 'test', + }, +]; + const setup = ( props = { selected: [], @@ -52,8 +66,6 @@ describe('BulkMoveButton', () => { }); test('opens destination dialog before the API call', async () => { - const FIXTURE_SELECTION = [{ type: 'asset', id: 1 }]; - const onSuccessSpy = jest.fn(); const { getByText } = setup({ onSuccess: onSuccessSpy, @@ -81,12 +93,41 @@ describe('BulkMoveButton', () => { fireEvent.click(submit); }); - await waitFor(() => expect(moveSpy).toBeCalledWith(null, FIXTURE_SELECTION)); + await waitFor(() => expect(moveSpy).toBeCalledWith('', FIXTURE_SELECTION)); await waitFor(() => expect(onSuccessSpy).toBeCalled()); }); + test('set default form values', () => { + const { getByText } = setup({ onClose: jest.fn(), selected: [], onSuccess: jest.fn() }); + + fireEvent.click(getByText('Move')); + + expect(screen.getByText('Media Library')).toBeInTheDocument(); + }); + + test('set default form values with currentFolder', () => { + const FIXTURE_PARENT_FOLDER = { + id: 2, + name: 'default folder name', + updatedAt: '2022-06-21T15:35:36.932Z', + createdAt: '2022-06-21T07:04:49.813Z', + parent: null, + path: '/2', + pathId: 2, + }; + const { getByText } = setup({ + currentFolder: FIXTURE_PARENT_FOLDER, + onClose: jest.fn(), + selected: [], + onSuccess: jest.fn(), + }); + + fireEvent.click(getByText('Move')); + + expect(screen.getByText(FIXTURE_PARENT_FOLDER.name)).toBeInTheDocument(); + }); + test('keeps destination dialog open if the API call errored', async () => { - const FIXTURE_SELECTION = [{ type: 'asset', id: 1 }]; const FIXTURE_ERROR_MESSAGE = 'Failed to move folder'; const onSuccessSpy = jest.fn(); @@ -133,7 +174,7 @@ describe('BulkMoveButton', () => { fireEvent.click(submit); }); - await waitFor(() => expect(moveSpy).toBeCalledWith(null, FIXTURE_SELECTION)); + await waitFor(() => expect(moveSpy).toBeCalledWith('', FIXTURE_SELECTION)); await waitFor(() => expect(onSuccessSpy).not.toBeCalled()); expect(getByText('Move elements to')).toBeInTheDocument(); diff --git a/packages/core/upload/admin/src/translations/en.json b/packages/core/upload/admin/src/translations/en.json index bd9304e8aa..de4f06322c 100644 --- a/packages/core/upload/admin/src/translations/en.json +++ b/packages/core/upload/admin/src/translations/en.json @@ -67,6 +67,7 @@ "modal.header.pending-assets": "Pending assets", "modal.header.select-files": "Selected files", "modal.header.go-back": "Go back", + "modal.folder.move.title": "Move elements to", "modal.nav.browse": "browse", "modal.nav.computer": "From computer", "modal.nav.selected": "selected",