Improve Delete Modals (#4744)

* Fix Delete Modals

* Add Delete Presentation modal

* esf

app/assets/locales/en.json

@@ -24,6 +24,7 @@
   "return_home": "Return Home",
   "created_at": "Created at",
   "no_result_search_input": "Could not find any results for \"{{ searchInput }}\"",
+  "action_permanent": "This action cannot be undone.",
   "homepage": {
     "welcome_bbb": "Welcome to BigBlueButton.",
     "bigbluebutton_description": "BigBlueButton is an open source web conferencing system for online classes. The platform maximizes time for applied learning by enabling students to collaborate and receive feedback in real-time.",
@@ -153,7 +154,8 @@
       "access_code_required": "Please enter the access code",
       "wrong_access_code": "Wrong Access Code",
       "generate_viewers_access_code": "Generate access code for viewers",
-      "generate_mods_access_code": "Generate access code for moderators"
+      "generate_mods_access_code": "Generate access code for moderators",
+      "are_you_sure_delete_room": "Are you sure you want to delete this room?"
     }
   },
   "recording": {
@@ -173,6 +175,7 @@
     "copy_recording_urls": "Copy Recording Url(s)",
     "recordings_list_empty": "You don't have any recordings yet!",
     "recordings_list_empty_description": "Recordings will appear here after you start a meeting and record it.",
+    "delete_recording": "Delete Recording",
     "are_you_sure_delete_recording": "Are you sure you want to delete this recording?",
     "search_not_found": "No Recordings found"
   },

app/javascript/components/admin/roles/forms/DeleteRoleForm.jsx

@@ -5,6 +5,7 @@ import {
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Form from '../../../shared_components/forms/Form';
 import Spinner from '../../../shared_components/utilities/Spinner';
 import useDeleteRole from '../../../../hooks/mutations/admin/roles/useDeleteRole';
@@ -16,7 +17,14 @@ export default function DeleteRoleForm({ role, handleClose }) {
 
   return (
     <>
-      <p className="text-center">{ t('admin.roles.are_you_sure_delete_role') }</p>
+      <Stack direction="horizontal" className="mb-3">
+        <ExclamationTriangleIcon className="text-danger hi-xl" />
+        <Stack direction="vertical" className="ps-3">
+          <h3> { t('admin.roles.delete_role') } </h3>
+          <p className="mb-0"> { t('admin.roles.are_you_sure_delete_role') } </p>
+          <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+        </Stack>
+      </Stack>
       <Form methods={methods} onSubmit={deleteRoleAPI.mutate}>
         <Stack direction="horizontal" gap={1} className="float-end">
           <Button variant="neutral" onClick={handleClose}>

app/javascript/components/admin/roles/forms/EditRoleForm.jsx

@@ -41,7 +41,6 @@ export default function EditRoleForm({ role }) {
       <div>
         <Modal
           modalButton={<Button variant="delete" className="float-end my-4"> { t('admin.roles.delete_role') } </Button>}
-          title={t('admin.roles.delete_role')}
           body={<DeleteRoleForm role={role} />}
         />
       </div>

app/javascript/components/admin/server_rooms/ServerRoomRow.jsx

@@ -84,7 +84,6 @@ export default function ServerRoomRow({ room }) {
             </Dropdown.Item>
             <Modal
               modalButton={<Dropdown.Item><TrashIcon className="hi-s me-2" />{ t('delete') }</Dropdown.Item>}
-              title={t('admin.server_rooms.delete_server_rooms')}
               body={<DeleteRoomForm mutation={mutationWrapper} />}
             />
           </Dropdown.Menu>

app/javascript/components/recordings/RecordingRow.jsx

@@ -111,7 +111,6 @@ export default function RecordingRow({
                 </Dropdown.Item>
                 <Modal
                   modalButton={<Dropdown.Item><TrashIcon className="hi-s me-2" />{ t('delete') }</Dropdown.Item>}
-                  title={t('are_you_sure')}
                   body={(
                     <DeleteRecordingForm
                       mutation={useDeleteAPI}
@@ -133,7 +132,6 @@ export default function RecordingRow({
               </Button>
               <Modal
                 modalButton={<Dropdown.Item className="btn btn-icon"><TrashIcon className="hi-s me-2" /></Dropdown.Item>}
-                title={t('are_you_sure')}
                 body={(
                   <DeleteRecordingForm
                     mutation={useDeleteAPI}

app/javascript/components/recordings/forms/DeleteRecordingForm.jsx

@@ -5,6 +5,7 @@ import {
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Form from '../../shared_components/forms/Form';
 import Spinner from '../../shared_components/utilities/Spinner';
 
@@ -15,7 +16,14 @@ export default function DeleteRecordingForm({ mutation: useDeleteAPI, recordId,
 
   return (
     <>
-      <p className="text-center"> { t('recording.are_you_sure_delete_recording') }</p>
+      <Stack direction="horizontal" className="mb-3">
+        <ExclamationTriangleIcon className="text-danger hi-xl" />
+        <Stack direction="vertical" className="ps-3">
+          <h3> { t('recording.delete_recording') } </h3>
+          <p className="mb-0"> { t('recording.are_you_sure_delete_recording') }</p>
+          <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+        </Stack>
+      </Stack>
       <Form methods={methods} onSubmit={deleteAPI.mutate}>
         <Stack direction="horizontal" gap={1} className="float-end">
           <Button variant="neutral" onClick={handleClose}>

app/javascript/components/rooms/room/forms/DeleteRoomForm.jsx

@@ -5,6 +5,7 @@ import {
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Form from '../../../shared_components/forms/Form';
 import Spinner from '../../../shared_components/utilities/Spinner';
 
@@ -15,7 +16,14 @@ export default function DeleteRoomForm({ mutation: useDeleteRoomAPI, handleClose
 
   return (
     <>
-      <p className="text-center"> Are you sure you want to delete this room?</p>
+      <Stack direction="horizontal" className="mb-3">
+        <ExclamationTriangleIcon className="text-danger hi-xl" />
+        <Stack direction="vertical" className="ps-3">
+          <h3> { t('room.delete_room') } </h3>
+          <p className="mb-0"> { t('room.settings.are_you_sure_delete_room') } </p>
+          <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+        </Stack>
+      </Stack>
       <Form methods={methods} onSubmit={deleteRoomAPI.mutate}>
         <Stack direction="horizontal" gap={1} className="float-end">
           <Button variant="neutral" onClick={handleClose}>

app/javascript/components/rooms/room/presentation/Presentation.jsx

@@ -78,7 +78,6 @@ export default function Presentation() {
             <Col>
               <Modal
                 modalButton={<TrashIcon className="cursor-pointer hi-s" />}
-                title={t('are_you_sure')}
                 body={<DeletePresentationForm />}
               />
             </Col>

app/javascript/components/rooms/room/presentation/forms/DeletePresentationForm.jsx

@@ -6,6 +6,7 @@ import {
 import { useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Form from '../../../../shared_components/forms/Form';
 import Spinner from '../../../../shared_components/utilities/Spinner';
 import useDeletePresentation from '../../../../../hooks/mutations/rooms/useDeletePresentation';
@@ -17,7 +18,14 @@ export default function DeletePresentationForm({ handleClose }) {
   const deletePresentation = useDeletePresentation(friendlyId);
   return (
     <>
-      <p className="text-center"> { t('room.presentation.are_you_sure_delete_presentation') }</p>
+      <Stack direction="horizontal" className="mb-3">
+        <ExclamationTriangleIcon className="text-danger hi-xl" />
+        <Stack direction="vertical" className="ps-3">
+          <h3> { t('recording.delete_recording') } </h3>
+          <p className="mb-0"> { t('room.presentation.are_you_sure_delete_presentation') } </p>
+          <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+        </Stack>
+      </Stack>
       <Form methods={methods} onSubmit={deletePresentation.mutate}>
         <Stack direction="horizontal" gap={1} className="float-end">
           <Button variant="neutral" onClick={handleClose}>

app/javascript/components/rooms/room/room_settings/RoomSettings.jsx

@@ -104,7 +104,6 @@ export default function RoomSettings() {
                     >{t('room.delete_room')}
                     </Button>
                   )}
-                  title={t('room.delete_room')}
                   body={<DeleteRoomForm mutation={deleteMutationWrapper} />}
                 />
                 )}

app/javascript/components/shared_components/modals/Modal.jsx

@@ -17,7 +17,7 @@ export default function Modal({
     <>
       {ModalButton}
       <BootstrapModal show={show} onHide={handleClose} centered size={size} id={id} contentClassName="border-0 shadow-sm">
-        <BootstrapModal.Header className="d-block mx-auto border-0 pb-0">
+        <BootstrapModal.Header className="border-0 pb-0">
           <BootstrapModal.Title>{title}</BootstrapModal.Title>
         </BootstrapModal.Header>
         <BootstrapModal.Body>{Body}</BootstrapModal.Body>
@@ -27,7 +27,7 @@ export default function Modal({
 }
 
 Modal.propTypes = {
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   modalButton: PropTypes.element.isRequired,
   body: PropTypes.node.isRequired,
   size: PropTypes.string,
@@ -37,4 +37,5 @@ Modal.propTypes = {
 Modal.defaultProps = {
   id: '',
   size: '',
+  title: '',
 };

app/javascript/components/users/user/DeleteAccount.jsx

@@ -15,7 +15,6 @@ export default function DeleteAccount() {
       </p>
       <Modal
         modalButton={<Button variant="delete">{ t('user.account.delete_account_confirmation') }</Button>}
-        title={t('are_you_sure')}
         body={<DeleteUserForm />}
       />
     </div>

app/javascript/components/users/user/forms/DeleteUserForm.jsx

@@ -5,6 +5,7 @@ import {
 } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Form from '../../../shared_components/forms/Form';
 import useDeleteUser from '../../../../hooks/mutations/users/useDeleteUser';
 import { useAuth } from '../../../../contexts/auth/AuthProvider';
@@ -18,7 +19,14 @@ export default function DeleteUserForm({ handleClose }) {
 
   return (
     <>
-      <p className="text-center"> { t('user.account.are_you_sure_delete_account') }</p>
+      <Stack direction="horizontal" className="mb-3">
+        <ExclamationTriangleIcon className="text-danger hi-xl" />
+        <Stack direction="vertical" className="ps-3">
+          <h3> { t('user.account.delete_account') } </h3>
+          <p className="mb-0"> { t('user.account.are_you_sure_delete_account') } </p>
+          <p className="mt-0"><strong> { t('action_permanent') } </strong></p>
+        </Stack>
+      </Stack>
       <Form methods={methods} onSubmit={deleteUserAPI.mutate}>
         <Stack direction="horizontal" gap={1} className="float-end">
           <Button variant="neutral" onClick={handleClose}> { t('close') } </Button>