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",