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 }) => ( -
- - {isEditing && ( - - + + {({ values, errors, handleChange, setFieldValue }) => ( + + + {isEditing && ( + + + + )} + + + - )} - - - + + + + {formatMessage({ + id: getTrad('form.input.label.folder-location'), + defaultMessage: 'Location', + })} + - - - - {formatMessage({ - id: getTrad('form.input.label.folder-location'), - defaultMessage: 'Location', - })} - + { + setFieldValue('parent', value); + }} + defaultValue={values.parent} + name="parent" + menuPortalTarget={document.querySelector('body')} + inputId="folder-parent" + disabled={formDisabled} + {...(errors.parent + ? { + 'aria-errormessage': 'folder-parent-error', + 'aria-invalid': true, + } + : {})} + /> - { - setFieldValue('parent', value); - }} - defaultValue={values.parent} - name="parent" - menuPortalTarget={document.querySelector('body')} - inputId="folder-parent" - disabled={formDisabled} - {...(errors.parent - ? { - 'aria-errormessage': 'folder-parent-error', - 'aria-invalid': true, - } - : {})} - /> + {errors.parent && ( + + {errors.parent} + + )} + + + - {errors.parent && ( - - {errors.parent} - - )} - - - - - - - -
- )} -
-
- - 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",