diff --git a/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js b/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js
index 24c26dbd3c..e29fb21425 100644
--- a/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js
+++ b/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js
@@ -1,6 +1,6 @@
import * as yup from 'yup';
import { Formik } from 'formik';
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty';
import { useIntl } from 'react-intl';
@@ -25,6 +25,7 @@ import { useEditFolder } from '../../hooks/useEditFolder';
import { useBulkRemove } from '../../hooks/useBulkRemove';
import { ContextInfo } from '../ContextInfo';
import SelectTree from '../SelectTree';
+import RemoveFolderDialog from './RemoveFolderDialog';
const folderSchema = yup.object({
name: yup.string().required(),
@@ -38,6 +39,7 @@ const folderSchema = yup.object({
export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }) => {
const submitButtonRef = useRef(null);
+ const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const { formatMessage, formatDate } = useIntl();
const { editFolder, isLoading } = useEditFolder();
const { remove } = useBulkRemove();
@@ -94,177 +96,182 @@ export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }
}
};
- const handleClose = () => {
- onClose();
- };
-
- const handleDelete = async event => {
- event.preventDefault();
-
+ const handleDelete = async () => {
await remove([folder]);
+ setShowConfirmDialog(false);
onClose();
};
return (
-
-
-
- {formatMessage(
- isEditing
- ? {
- id: getTrad('modal.folder.edit.title'),
- defaultMessage: 'Edit folder',
- }
- : {
- id: getTrad('modal.folder.create.title'),
- defaultMessage: 'Add new folder',
- }
- )}
-
-
+ <>
+ onClose()} labelledBy="title">
+
+
+ {formatMessage(
+ isEditing
+ ? {
+ id: getTrad('modal.folder.edit.title'),
+ defaultMessage: 'Edit folder',
+ }
+ : {
+ id: getTrad('modal.folder.create.title'),
+ defaultMessage: 'Add new folder',
+ }
+ )}
+
+
-
-
- {({ values, errors, handleChange, setFieldValue }) => (
-
- )}
-
-
-
- handleClose()} variant="tertiary" name="cancel">
- {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}
-
- }
- endActions={
-
- {isEditing && canUpdate && (
-
+
+
+
+
)}
+
+
-
-
- }
- />
-
+ }
+ endActions={
+
+ {isEditing && canUpdate && (
+
+ )}
+
+
+
+ }
+ />
+
+ {showConfirmDialog && (
+ setShowConfirmDialog(false)} onConfirm={handleDelete} />
+ )}
+ >
);
};
diff --git a/packages/core/upload/admin/src/components/EditFolderDialog/RemoveFolderDialog.js b/packages/core/upload/admin/src/components/EditFolderDialog/RemoveFolderDialog.js
new file mode 100644
index 0000000000..2bd1108311
--- /dev/null
+++ b/packages/core/upload/admin/src/components/EditFolderDialog/RemoveFolderDialog.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ConfirmDialog } from '@strapi/helper-plugin';
+
+export const RemoveFolderDialog = ({ onClose, onConfirm }) => {
+ return (
+
+ );
+};
+
+RemoveFolderDialog.propTypes = {
+ onClose: PropTypes.func.isRequired,
+ onConfirm: PropTypes.func.isRequired,
+};
+
+export default RemoveFolderDialog;
diff --git a/packages/core/upload/admin/src/hooks/useBulkRemove.js b/packages/core/upload/admin/src/hooks/useBulkRemove.js
index 421faa31e2..2a0dd65c04 100644
--- a/packages/core/upload/admin/src/hooks/useBulkRemove.js
+++ b/packages/core/upload/admin/src/hooks/useBulkRemove.js
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from 'react-query';
import { useNotification } from '@strapi/helper-plugin';
import pluginId from '../pluginId';
-import { axiosInstance, getRequestUrl } from '../utils';
+import { axiosInstance, getRequestUrl, getTrad } from '../utils';
export const useBulkRemove = () => {
const toggleNotification = useNotification();
@@ -44,8 +44,8 @@ export const useBulkRemove = () => {
toggleNotification({
type: 'success',
message: {
- id: 'modal.remove.success-label',
- defaultMessage: 'The folder has been successfully removed.',
+ id: getTrad('modal.remove.success-label'),
+ defaultMessage: 'Changes successfully saved',
},
});
},
diff --git a/packages/core/upload/admin/src/translations/en.json b/packages/core/upload/admin/src/translations/en.json
index f453fa994c..69d3ff46d5 100644
--- a/packages/core/upload/admin/src/translations/en.json
+++ b/packages/core/upload/admin/src/translations/en.json
@@ -62,7 +62,7 @@
"modal.nav.computer": "From computer",
"modal.nav.selected": "selected",
"modal.nav.url": "From url",
- "modal.remove.success-label": "The asset has been successfully removed.",
+ "modal.remove.success-label": "Changes successfully saved.",
"modal.selected-list.sub-header-subtitle": "Drag & drop to reorder the assets in the field",
"modal.upload-list.footer.button": "Upload {number, plural, one {# asset} other {# assets}} to the library",
"modal.upload-list.sub-header-subtitle": "Manage the assets before adding them to the Media Library",