test: use alert selector on role and user delete error

refactor: Workers and queues and eliminate redundant process listeners

packages/backend/src/controllers/api/v1/apps/get-connections.test.js

@@ -87,14 +87,14 @@ describe('GET /api/v1/apps/:appKey/connections', () => {
 
   it('should return not found response for invalid connection UUID', async () => {
     await createPermission({
-      action: 'update',
+      action: 'read',
       subject: 'Connection',
       roleId: currentUserRole.id,
       conditions: ['isCreator'],
     });
 
     await request(app)
-      .get('/api/v1/connections/invalid-connection-id/connections')
+      .get('/api/v1/apps/invalid-connection-id/connections')
       .set('Authorization', token)
       .expect(404);
   });

packages/backend/src/controllers/api/v1/steps/create-dynamic-data.test.js

@@ -193,7 +193,7 @@ describe('POST /api/v1/steps/:stepId/dynamic-data', () => {
     const notExistingStepUUID = Crypto.randomUUID();
 
     await request(app)
-      .get(`/api/v1/steps/${notExistingStepUUID}/dynamic-data`)
+      .post(`/api/v1/steps/${notExistingStepUUID}/dynamic-data`)
       .set('Authorization', token)
       .expect(404);
   });
@@ -216,7 +216,7 @@ describe('POST /api/v1/steps/:stepId/dynamic-data', () => {
     const step = await createStep({ appKey: null });
 
     await request(app)
-      .get(`/api/v1/steps/${step.id}/dynamic-data`)
+      .post(`/api/v1/steps/${step.id}/dynamic-data`)
       .set('Authorization', token)
       .expect(404);
   });

packages/backend/src/controllers/api/v1/steps/create-dynamic-fields.test.js

@@ -118,7 +118,7 @@ describe('POST /api/v1/steps/:stepId/dynamic-fields', () => {
     const notExistingStepUUID = Crypto.randomUUID();
 
     await request(app)
-      .get(`/api/v1/steps/${notExistingStepUUID}/dynamic-fields`)
+      .post(`/api/v1/steps/${notExistingStepUUID}/dynamic-fields`)
       .set('Authorization', token)
       .expect(404);
   });
@@ -138,10 +138,11 @@ describe('POST /api/v1/steps/:stepId/dynamic-fields', () => {
       conditions: [],
     });
 
-    const step = await createStep({ appKey: null });
+    const step = await createStep();
+    await step.$query().patch({ appKey: null });
 
     await request(app)
-      .get(`/api/v1/steps/${step.id}/dynamic-fields`)
+      .post(`/api/v1/steps/${step.id}/dynamic-fields`)
       .set('Authorization', token)
       .expect(404);
   });

packages/backend/src/models/user.test.js

@@ -996,21 +996,9 @@ describe('User model', () => {
 
       const user = await createUser();
 
-      const presentDate = DateTime.fromObject(
-        { year: 2024, month: 11, day: 17, hour: 11, minute: 30 },
-        { zone: 'UTC+0' }
-      );
-
-      vi.setSystemTime(presentDate);
-
       await user.startTrialPeriod();
 
-      const futureDate = DateTime.fromObject(
+      vi.setSystemTime(DateTime.now().plus({ month: 1 }));
-        { year: 2025, month: 1, day: 1 },
-        { zone: 'UTC+0' }
-      );
-
-      vi.setSystemTime(futureDate);
 
       const refetchedUser = await user.$query();
 
@@ -1118,7 +1106,9 @@ describe('User model', () => {
 
       const user = await createUser();
 
-      expect(() => user.getPlanAndUsage()).rejects.toThrow('NotFoundError');
+      await expect(() => user.getPlanAndUsage()).rejects.toThrow(
+        'NotFoundError'
+      );
     });
   });
 
@@ -1189,7 +1179,7 @@ describe('User model', () => {
     });
 
     it('should throw not found error when user role does not exist', async () => {
-      expect(() =>
+      await expect(() =>
         User.registerUser({
           fullName: 'Sample user',
           email: 'user@automatisch.io',
@@ -1257,6 +1247,8 @@ describe('User model', () => {
 
   describe('createUsageData', () => {
     it('should create usage data if Automatisch is a cloud installation', async () => {
+      vi.useFakeTimers();
+
       vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(true);
 
       const user = await createUser({
@@ -1264,10 +1256,14 @@ describe('User model', () => {
         email: 'user@automatisch.io',
       });
 
+      vi.setSystemTime(DateTime.now().plus({ month: 1 }));
+
       const usageData = await user.createUsageData();
       const currentUsageData = await user.$relatedQuery('currentUsageData');
 
       expect(usageData).toStrictEqual(currentUsageData);
+
+      vi.useRealTimers();
     });
 
     it('should not create usage data if Automatisch is not a cloud installation', async () => {

packages/backend/src/queues/action.js

@@ -11,10 +11,6 @@ const redisConnection = {
 
 const actionQueue = new Queue('action', redisConnection);
 
-process.on('SIGTERM', async () => {
-  await actionQueue.close();
-});
-
 actionQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/delete-user.ee.js

@@ -11,10 +11,6 @@ const redisConnection = {
 
 const deleteUserQueue = new Queue('delete-user', redisConnection);
 
-process.on('SIGTERM', async () => {
-  await deleteUserQueue.close();
-});
-
 deleteUserQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/email.js

@@ -11,10 +11,6 @@ const redisConnection = {
 
 const emailQueue = new Queue('email', redisConnection);
 
-process.on('SIGTERM', async () => {
-  await emailQueue.close();
-});
-
 emailQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/flow.js

@@ -11,10 +11,6 @@ const redisConnection = {
 
 const flowQueue = new Queue('flow', redisConnection);
 
-process.on('SIGTERM', async () => {
-  await flowQueue.close();
-});
-
 flowQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/index.js

@@ -0,0 +1,21 @@
+import appConfig from '../config/app.js';
+import actionQueue from './action.js';
+import emailQueue from './email.js';
+import flowQueue from './flow.js';
+import triggerQueue from './trigger.js';
+import deleteUserQueue from './delete-user.ee.js';
+import removeCancelledSubscriptionsQueue from './remove-cancelled-subscriptions.ee.js';
+
+const queues = [
+  actionQueue,
+  emailQueue,
+  flowQueue,
+  triggerQueue,
+  deleteUserQueue,
+];
+
+if (appConfig.isCloud) {
+  queues.push(removeCancelledSubscriptionsQueue);
+}
+
+export default queues;

packages/backend/src/queues/remove-cancelled-subscriptions.ee.js

@@ -14,10 +14,6 @@ const removeCancelledSubscriptionsQueue = new Queue(
   redisConnection
 );
 
-process.on('SIGTERM', async () => {
-  await removeCancelledSubscriptionsQueue.close();
-});
-
 removeCancelledSubscriptionsQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/queues/trigger.js

@@ -11,10 +11,6 @@ const redisConnection = {
 
 const triggerQueue = new Queue('trigger', redisConnection);
 
-process.on('SIGTERM', async () => {
-  await triggerQueue.close();
-});
-
 triggerQueue.on('error', (error) => {
   if (error.code === CONNECTION_REFUSED) {
     logger.error(

packages/backend/src/worker.js

@@ -1,20 +1,22 @@
 import * as Sentry from './helpers/sentry.ee.js';
-import appConfig from './config/app.js';
+import process from 'node:process';
 
 Sentry.init();
 
 import './config/orm.js';
 import './helpers/check-worker-readiness.js';
-import './workers/flow.js';
+import queues from './queues/index.js';
-import './workers/trigger.js';
+import workers from './workers/index.js';
-import './workers/action.js';
-import './workers/email.js';
-import './workers/delete-user.ee.js';
 
-if (appConfig.isCloud) {
+process.on('SIGTERM', async () => {
-  import('./workers/remove-cancelled-subscriptions.ee.js');
+  for (const queue of queues) {
-  import('./queues/remove-cancelled-subscriptions.ee.js');
+    await queue.close();
-}
+  }
+
+  for (const worker of workers) {
+    await worker.close();
+  }
+});
 
 import telemetry from './helpers/telemetry/index.js';
 

packages/backend/src/workers/action.js

@@ -1,5 +1,4 @@
 import { Worker } from 'bullmq';
-import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -15,7 +14,7 @@ import delayAsMilliseconds from '../helpers/delay-as-milliseconds.js';
 
 const DEFAULT_DELAY_DURATION = 0;
 
-export const worker = new Worker(
+const actionWorker = new Worker(
   'action',
   async (job) => {
     const { stepId, flowId, executionId, computedParameters, executionStep } =
@@ -55,11 +54,11 @@ export const worker = new Worker(
   { connection: redisConfig }
 );
 
-worker.on('completed', (job) => {
+actionWorker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-worker.on('failed', (job, err) => {
+actionWorker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has failed to start with ${err.message}
     \n ${err.stack}
@@ -74,6 +73,4 @@ worker.on('failed', (job, err) => {
   });
 });
 
-process.on('SIGTERM', async () => {
+export default actionWorker;
-  await worker.close();
-});

packages/backend/src/workers/delete-user.ee.js

@@ -1,5 +1,4 @@
 import { Worker } from 'bullmq';
-import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -8,7 +7,7 @@ import appConfig from '../config/app.js';
 import User from '../models/user.js';
 import ExecutionStep from '../models/execution-step.js';
 
-export const worker = new Worker(
+const deleteUserWorker = new Worker(
   'delete-user',
   async (job) => {
     const { id } = job.data;
@@ -46,13 +45,13 @@ export const worker = new Worker(
   { connection: redisConfig }
 );
 
-worker.on('completed', (job) => {
+deleteUserWorker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - The user with the ID of '${job.data.id}' has been deleted!`
   );
 });
 
-worker.on('failed', (job, err) => {
+deleteUserWorker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - The user with the ID of '${job.data.id}' has failed to be deleted! ${err.message}
     \n ${err.stack}
@@ -67,6 +66,4 @@ worker.on('failed', (job, err) => {
   });
 });
 
-process.on('SIGTERM', async () => {
+export default deleteUserWorker;
-  await worker.close();
-});

packages/backend/src/workers/email.js

@@ -1,5 +1,4 @@
 import { Worker } from 'bullmq';
-import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -16,7 +15,7 @@ const isAutomatischEmail = (email) => {
   return email.endsWith('@automatisch.io');
 };
 
-export const worker = new Worker(
+const emailWorker = new Worker(
   'email',
   async (job) => {
     const { email, subject, template, params } = job.data;
@@ -39,13 +38,13 @@ export const worker = new Worker(
   { connection: redisConfig }
 );
 
-worker.on('completed', (job) => {
+emailWorker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - ${job.data.subject} email sent to ${job.data.email}!`
   );
 });
 
-worker.on('failed', (job, err) => {
+emailWorker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - ${job.data.subject} email to ${job.data.email} has failed to send with ${err.message}
     \n ${err.stack}
@@ -60,6 +59,4 @@ worker.on('failed', (job, err) => {
   });
 });
 
-process.on('SIGTERM', async () => {
+export default emailWorker;
-  await worker.close();
-});

packages/backend/src/workers/flow.js

@@ -1,5 +1,4 @@
 import { Worker } from 'bullmq';
-import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -13,7 +12,7 @@ import {
   REMOVE_AFTER_7_DAYS_OR_50_JOBS,
 } from '../helpers/remove-job-configuration.js';
 
-export const worker = new Worker(
+const flowWorker = new Worker(
   'flow',
   async (job) => {
     const { flowId } = job.data;
@@ -64,11 +63,11 @@ export const worker = new Worker(
   { connection: redisConfig }
 );
 
-worker.on('completed', (job) => {
+flowWorker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-worker.on('failed', async (job, err) => {
+flowWorker.on('failed', async (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has failed to start with ${err.message}
     \n ${err.stack}
@@ -95,6 +94,4 @@ worker.on('failed', async (job, err) => {
   });
 });
 
-process.on('SIGTERM', async () => {
+export default flowWorker;
-  await worker.close();
-});

packages/backend/src/workers/index.js

@@ -0,0 +1,21 @@
+import appConfig from '../config/app.js';
+import actionWorker from './action.js';
+import emailWorker from './email.js';
+import flowWorker from './flow.js';
+import triggerWorker from './trigger.js';
+import deleteUserWorker from './delete-user.ee.js';
+import removeCancelledSubscriptionsWorker from './remove-cancelled-subscriptions.ee.js';
+
+const workers = [
+  actionWorker,
+  emailWorker,
+  flowWorker,
+  triggerWorker,
+  deleteUserWorker,
+];
+
+if (appConfig.isCloud) {
+  workers.push(removeCancelledSubscriptionsWorker);
+}
+
+export default workers;

packages/backend/src/workers/remove-cancelled-subscriptions.ee.js

@@ -1,12 +1,11 @@
 import { Worker } from 'bullmq';
-import process from 'node:process';
 import { DateTime } from 'luxon';
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
 import logger from '../helpers/logger.js';
 import Subscription from '../models/subscription.ee.js';
 
-export const worker = new Worker(
+const removeCancelledSubscriptionsWorker = new Worker(
   'remove-cancelled-subscriptions',
   async () => {
     await Subscription.query()
@@ -23,13 +22,13 @@ export const worker = new Worker(
   { connection: redisConfig }
 );
 
-worker.on('completed', (job) => {
+removeCancelledSubscriptionsWorker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - The cancelled subscriptions have been removed!`
   );
 });
 
-worker.on('failed', (job, err) => {
+removeCancelledSubscriptionsWorker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - ERROR: The cancelled subscriptions can not be removed! ${err.message}
     \n ${err.stack}
@@ -42,6 +41,4 @@ worker.on('failed', (job, err) => {
   });
 });
 
-process.on('SIGTERM', async () => {
+export default removeCancelledSubscriptionsWorker;
-  await worker.close();
-});

packages/backend/src/workers/trigger.js

@@ -1,5 +1,4 @@
 import { Worker } from 'bullmq';
-import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -12,7 +11,7 @@ import {
   REMOVE_AFTER_7_DAYS_OR_50_JOBS,
 } from '../helpers/remove-job-configuration.js';
 
-export const worker = new Worker(
+const triggerWorker = new Worker(
   'trigger',
   async (job) => {
     const { flowId, executionId, stepId, executionStep } = await processTrigger(
@@ -41,11 +40,11 @@ export const worker = new Worker(
   { connection: redisConfig }
 );
 
-worker.on('completed', (job) => {
+triggerWorker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-worker.on('failed', (job, err) => {
+triggerWorker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has failed to start with ${err.message}
     \n ${err.stack}
@@ -60,6 +59,4 @@ worker.on('failed', (job, err) => {
   });
 });
 
-process.on('SIGTERM', async () => {
+export default triggerWorker;
-  await worker.close();
-});

packages/e2e-tests/fixtures/admin/delete-role-modal.js

@@ -9,6 +9,7 @@ export class DeleteRoleModal {
     this.modal = page.getByTestId('delete-role-modal');
     this.cancelButton = this.modal.getByTestId('confirmation-cancel-button');
     this.deleteButton = this.modal.getByTestId('confirmation-confirm-button');
+    this.deleteAlert = this.modal.getByTestId('confirmation-dialog-error-alert');
   }
 
   async close () {

packages/e2e-tests/tests/admin/manage-roles.spec.js

@@ -218,12 +218,7 @@ test.describe('Role management page', () => {
         const row = await adminRolesPage.getRoleRowByName('Delete Role');
         const modal = await adminRolesPage.clickDeleteRole(row);
         await modal.deleteButton.click();
-        await adminRolesPage.snackbar.waitFor({
+        await expect(modal.deleteAlert).toHaveCount(1);
-          state: 'attached',
-        });
-        const snackbar = await adminRolesPage.getSnackbarData('snackbar-delete-role-error');
-        await expect(snackbar.variant).toBe('error');
-        await adminRolesPage.closeSnackbar();
         await modal.close();
       }
     );
@@ -318,7 +313,6 @@ test.describe('Role management page', () => {
       const row = await adminUsersPage.findUserPageWithEmail(
         'user-delete-role-test@automatisch.io'
       );
-      // await test.waitForTimeout(10000);
       const modal = await adminUsersPage.clickDeleteUser(row);
       await modal.deleteButton.click();
       await adminUsersPage.snackbar.waitFor({
@@ -335,15 +329,7 @@ test.describe('Role management page', () => {
       const row = await adminRolesPage.getRoleRowByName('Cannot Delete Role');
       const modal = await adminRolesPage.clickDeleteRole(row);
       await modal.deleteButton.click();
-      await adminRolesPage.snackbar.waitFor({
+      await expect(modal.deleteAlert).toHaveCount(1);
-        state: 'attached',
-      });
-      /*
-        * TODO: await snackbar - make assertions based on product
-        * decisions
-        const snackbar = await adminRolesPage.getSnackbarData();
-        await expect(snackbar.variant).toBe('...');
-        */
       await adminRolesPage.closeSnackbar();
     });
   });

packages/web/src/components/ConfirmationDialog/index.jsx

@@ -6,6 +6,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import Alert from '@mui/material/Alert';
 
 function ConfirmationDialog(props) {
   const {
@@ -16,6 +17,7 @@ function ConfirmationDialog(props) {
     cancelButtonChildren,
     confirmButtonChildren,
     open = true,
+    errorMessage,
   } = props;
   const dataTest = props['data-test'];
   return (
@@ -44,6 +46,11 @@ function ConfirmationDialog(props) {
           </Button>
         )}
       </DialogActions>
+      {errorMessage && (
+        <Alert data-test="confirmation-dialog-error-alert" severity="error">
+          {errorMessage}
+        </Alert>
+      )}
     </Dialog>
   );
 }
@@ -57,6 +64,7 @@ ConfirmationDialog.propTypes = {
   confirmButtonChildren: PropTypes.node.isRequired,
   open: PropTypes.bool,
   'data-test': PropTypes.string,
+  errorMessage: PropTypes.string,
 };
 
 export default ConfirmationDialog;

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

@@ -4,6 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 
+import { getGeneralErrorMessage, getFieldErrorMessage } from 'helpers/errors';
 import Can from 'components/Can';
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -15,7 +16,21 @@ function DeleteRoleButton(props) {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
 
-  const { mutateAsync: deleteRole } = useAdminDeleteRole(roleId);
+  const {
+    mutateAsync: deleteRole,
+    error: deleteRoleError,
+    reset: resetDeleteRole,
+  } = useAdminDeleteRole(roleId);
+
+  const roleErrorMessage = getFieldErrorMessage({
+    fieldName: 'role',
+    error: deleteRoleError,
+  });
+
+  const generalErrorMessage = getGeneralErrorMessage({
+    error: deleteRoleError,
+    fallbackMessage: formatMessage('deleteRoleButton.generalError'),
+  });
 
   const handleConfirm = React.useCallback(async () => {
     try {
@@ -28,24 +43,14 @@ function DeleteRoleButton(props) {
           'data-test': 'snackbar-delete-role-success',
         },
       });
-    } catch (error) {
+    } catch {}
-      const errors = Object.values(
-        error.response.data.errors || [['Failed while deleting!']],
-      );
-
-      for (const [error] of errors) {
-        enqueueSnackbar(error, {
-          variant: 'error',
-          SnackbarProps: {
-            'data-test': 'snackbar-delete-role-error',
-          },
-        });
-      }
-
-      throw new Error('Failed while deleting!');
-    }
   }, [deleteRole, enqueueSnackbar, formatMessage]);
 
+  const handleClose = () => {
+    setShowConfirmation(false);
+    resetDeleteRole();
+  };
+
   return (
     <>
       <Can I="delete" a="Role" passThrough>
@@ -65,11 +70,12 @@ function DeleteRoleButton(props) {
         open={showConfirmation}
         title={formatMessage('deleteRoleButton.title')}
         description={formatMessage('deleteRoleButton.description')}
-        onClose={() => setShowConfirmation(false)}
+        onClose={handleClose}
         onConfirm={handleConfirm}
         cancelButtonChildren={formatMessage('deleteRoleButton.cancel')}
         confirmButtonChildren={formatMessage('deleteRoleButton.confirm')}
         data-test="delete-role-modal"
+        errorMessage={roleErrorMessage || generalErrorMessage}
       />
     </>
   );

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) {
+    } catch {}
-      enqueueSnackbar(
-        error?.message || formatMessage('deleteUserButton.deleteError'),
-        {
-          variant: 'error',
-        },
-      );
-    }
   }, [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}
       />
     </>
   );

packages/web/src/helpers/errors.js

@@ -0,0 +1,29 @@
+// Helpers to extract errors received from the API
+
+export const getGeneralErrorMessage = ({ error, fallbackMessage }) => {
+  if (!error) {
+    return;
+  }
+
+  const errors = error?.response?.data?.errors;
+  const generalError = errors?.general;
+
+  if (generalError && Array.isArray(generalError)) {
+    return generalError.join(' ');
+  }
+
+  if (!errors) {
+    return error?.message || fallbackMessage;
+  }
+};
+
+export const getFieldErrorMessage = ({ fieldName, error }) => {
+  const errors = error?.response?.data?.errors;
+  const fieldErrors = errors?.[fieldName];
+
+  if (fieldErrors && Array.isArray(fieldErrors)) {
+    return fieldErrors.join(', ');
+  }
+
+  return '';
+};

packages/web/src/locales/en.json

@@ -245,6 +245,7 @@
   "deleteRoleButton.cancel": "Cancel",
   "deleteRoleButton.confirm": "Delete",
   "deleteRoleButton.successfullyDeleted": "The role has been deleted.",
+  "deleteRoleButton.generalError": "Failed while deleting!",
   "editRolePage.title": "Edit role",
   "createRolePage.title": "Create role",
   "roleForm.name": "Name",