From b79927e17df414c2b1dcc2c89284e9d8fbe1cbc9 Mon Sep 17 00:00:00 2001
From: Samuel Couillard <43917914+scouillard@users.noreply.github.com>
Date: Mon, 6 Feb 2023 09:38:16 -0500
Subject: [PATCH] Fix Admin DeleteUser modal (#4757)
---
.../components/admin/manage_users/ManageUserRow.jsx | 1 -
.../admin/manage_users/forms/DeleteUserForm.jsx | 13 +++++++++----
2 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/app/javascript/components/admin/manage_users/ManageUserRow.jsx b/app/javascript/components/admin/manage_users/ManageUserRow.jsx
index 3772c090..fe3b15f6 100644
--- a/app/javascript/components/admin/manage_users/ManageUserRow.jsx
+++ b/app/javascript/components/admin/manage_users/ManageUserRow.jsx
@@ -58,7 +58,6 @@ export default function ManageUserRow({ user }) {
</Dropdown.Item>
<Modal
modalButton={<Dropdown.Item><TrashIcon className="hi-s me-2" />{ t('delete') }</Dropdown.Item>}
- title={t('admin.manage_users.delete_user')}
body={<DeleteUserForm user={user} />}
/>
</Dropdown.Menu>
diff --git a/app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx b/app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx
index 5a58ee0d..02b3f58d 100644
--- a/app/javascript/components/admin/manage_users/forms/DeleteUserForm.jsx
+++ b/app/javascript/components/admin/manage_users/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/admin/manage_users/useDeleteUser';
@@ -17,10 +18,14 @@ export default function DeleteUserForm({ user, handleClose }) {
return (
<>
- <p className="text-center"> { t('admin.manage_users.are_you_sure_delete_account', { user }) }
- <br />
- { t('admin.manage_users.delete_account_warning') }
- </p>
+ <Stack direction="horizontal" className="mb-3">
+ <ExclamationTriangleIcon className="text-danger hi-xl" />
+ <Stack direction="vertical" className="ps-3">
+ <h3> {t('admin.manage_users.delete_user')} </h3>
+ <p className="mb-0">{ t('admin.manage_users.are_you_sure_delete_account', { user }) }</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}>
--
GitLab