fixed notification wording + confirmation delete dialog

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,20 +96,16 @@ 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 (
-    <ModalLayout onClose={handleClose} labelledBy="title">
+    <>
+      <ModalLayout onClose={() => onClose()} labelledBy="title">
         <ModalHeader>
           <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
             {formatMessage(
@@ -234,14 +232,19 @@ export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }
 
         <ModalFooter
           startActions={
-          <Button onClick={() => handleClose()} variant="tertiary" name="cancel">
+            <Button onClick={() => onClose()} variant="tertiary" name="cancel">
               {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}
             </Button>
           }
           endActions={
             <Stack horizontal spacing={2}>
               {isEditing && canUpdate && (
-              <Button type="button" variant="danger-light" onClick={handleDelete} name="delete">
+                <Button
+                  type="button"
+                  variant="danger-light"
+                  onClick={() => setShowConfirmDialog(true)}
+                  name="delete"
+                >
                   {formatMessage({
                     id: 'modal.folder.create.delete',
                     defaultMessage: 'Delete folder',
@@ -265,6 +268,10 @@ export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }
           }
         />
       </ModalLayout>
+      {showConfirmDialog && (
+        <RemoveFolderDialog onClose={() => setShowConfirmDialog(false)} onConfirm={handleDelete} />
+      )}
+    </>
   );
 };
 

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 (
+    <ConfirmDialog
+      isConfirmButtonLoading={false}
+      isOpen
+      onToggleDialog={onClose}
+      onConfirm={onConfirm}
+    />
+  );
+};
+
+RemoveFolderDialog.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
+
+export default RemoveFolderDialog;

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',
         },
       });
     },

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