feat: introduce inline error messages when deleting role or user

packages/web/src/components/DeleteUserButton/index.ee.jsx

@@ -3,6 +3,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import { useQueryClient } from '@tanstack/react-query';
 
+import { getGeneralErrorMessage } from 'helpers/errors';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import ConfirmationDialog from 'components/ConfirmationDialog';
@@ -12,12 +13,21 @@ import useAdminUserDelete from 'hooks/useAdminUserDelete';
 function DeleteUserButton(props) {
   const { userId } = props;
   const [showConfirmation, setShowConfirmation] = React.useState(false);
-  const { mutateAsync: deleteUser } = useAdminUserDelete(userId);
+  const {
+    mutateAsync: deleteUser,
+    error: deleteUserError,
+    reset: resetDeleteUser,
+  } = useAdminUserDelete(userId);
 
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
   const queryClient = useQueryClient();
 
+  const generalErrorMessage = getGeneralErrorMessage({
+    error: deleteUserError,
+    fallbackMessage: formatMessage('deleteUserButton.deleteError'),
+  });
+
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteUser();
@@ -29,16 +39,14 @@ function DeleteUserButton(props) {
           'data-test': 'snackbar-delete-user-success',
         },
       });
-    } catch (error) {
-      enqueueSnackbar(
-        error?.message || formatMessage('deleteUserButton.deleteError'),
-        {
-          variant: 'error',
-        },
-      );
-    }
+    } catch {}
   }, [deleteUser]);
 
+  const handleClose = () => {
+    setShowConfirmation(false);
+    resetDeleteUser();
+  };
+
   return (
     <>
       <IconButton
@@ -53,11 +61,12 @@ function DeleteUserButton(props) {
         open={showConfirmation}
         title={formatMessage('deleteUserButton.title')}
         description={formatMessage('deleteUserButton.description')}
-        onClose={() => setShowConfirmation(false)}
+        onClose={handleClose}
         onConfirm={handleConfirm}
         cancelButtonChildren={formatMessage('deleteUserButton.cancel')}
         confirmButtonChildren={formatMessage('deleteUserButton.confirm')}
         data-test="delete-user-modal"
+        errorMessage={generalErrorMessage}
       />
     </>
   );