test: use new alert in create role and create user tests

feat: introduce inline error messages for create user and create role forms
Merge pull request #2238 from automatisch/workers-refactoring
2024-12-12 10:56:14 +00:00 · 2024-12-12 10:56:14 +00:00 · 2024-12-11 14:57:51 +03:00 · 2024-12-11 12:53:24 +01:00 · 2024-12-11 14:52:34 +03:00 · 2024-12-11 12:45:50 +01:00
30 changed files with 861 additions and 744 deletions
--- a/packages/backend/src/controllers/api/v1/apps/get-connections.test.js
+++ b/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);
  });
--- a/packages/backend/src/controllers/api/v1/steps/create-dynamic-data.test.js
+++ b/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);
  });
--- a/packages/backend/src/controllers/api/v1/steps/create-dynamic-fields.test.js
+++ b/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);
  });
--- a/packages/backend/src/models/user.test.js
+++ b/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(
-        { year: 2025, month: 1, day: 1 },
-        { zone: 'UTC+0' }
-      );
-
-      vi.setSystemTime(futureDate);
+      vi.setSystemTime(DateTime.now().plus({ month: 1 }));

      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 () => {
--- a/packages/backend/src/queues/action.js
+++ b/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(
--- a/packages/backend/src/queues/delete-user.ee.js
+++ b/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(
--- a/packages/backend/src/queues/email.js
+++ b/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(
--- a/packages/backend/src/queues/flow.js
+++ b/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(
--- a/packages/backend/src/queues/index.js
+++ b/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;
--- a/packages/backend/src/queues/remove-cancelled-subscriptions.ee.js
+++ b/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(
--- a/packages/backend/src/queues/trigger.js
+++ b/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(
--- a/packages/backend/src/worker.js
+++ b/packages/backend/src/worker.js
@@ -1,21 +1,23 @@
 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 './workers/trigger.js';
-import './workers/action.js';
-import './workers/email.js';
-import './workers/delete-user.ee.js';
+import queues from './queues/index.js';
+import workers from './workers/index.js';

-if (appConfig.isCloud) {
-  import('./workers/remove-cancelled-subscriptions.ee.js');
-  import('./queues/remove-cancelled-subscriptions.ee.js');
+process.on('SIGTERM', async () => {
+  for (const queue of queues) {
+    await queue.close();
  }

+  for (const worker of workers) {
+    await worker.close();
+  }
+});
+
 import telemetry from './helpers/telemetry/index.js';

 telemetry.setServiceType('worker');
--- a/packages/backend/src/workers/action.js
+++ b/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 () => {
-  await worker.close();
-});
+export default actionWorker;
--- a/packages/backend/src/workers/delete-user.ee.js
+++ b/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 () => {
-  await worker.close();
-});
+export default deleteUserWorker;
--- a/packages/backend/src/workers/email.js
+++ b/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 () => {
-  await worker.close();
-});
+export default emailWorker;
--- a/packages/backend/src/workers/flow.js
+++ b/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 () => {
-  await worker.close();
-});
+export default flowWorker;
--- a/packages/backend/src/workers/index.js
+++ b/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;
--- a/packages/backend/src/workers/remove-cancelled-subscriptions.ee.js
+++ b/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 () => {
-  await worker.close();
-});
+export default removeCancelledSubscriptionsWorker;
--- a/packages/backend/src/workers/trigger.js
+++ b/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 () => {
-  await worker.close();
-});
+export default triggerWorker;
--- a/packages/e2e-tests/fixtures/admin/create-user-page.js
+++ b/packages/e2e-tests/fixtures/admin/create-user-page.js
@@ -1,3 +1,5 @@
+const { expect } = require('@playwright/test');
+
 const { faker } = require('@faker-js/faker');
 const { AuthenticatedPage } = require('../authenticated-page');

@@ -11,11 +13,17 @@ export class AdminCreateUserPage extends AuthenticatedPage {
    super(page);
    this.fullNameInput = page.getByTestId('full-name-input');
    this.emailInput = page.getByTestId('email-input');
-    this.roleInput = page.getByTestId('role.id-autocomplete');
+    this.roleInput = page.getByTestId('roleId-autocomplete');
    this.createButton = page.getByTestId('create-button');
    this.pageTitle = page.getByTestId('create-user-title');
-    this.invitationEmailInfoAlert = page.getByTestId('invitation-email-info-alert');
-    this.acceptInvitationLink = page.getByTestId('invitation-email-info-alert').getByRole('link');
+    this.invitationEmailInfoAlert = page.getByTestId(
+      'invitation-email-info-alert'
+    );
+    this.acceptInvitationLink = page
+      .getByTestId('invitation-email-info-alert')
+      .getByRole('link');
+    this.createUserSuccessAlert = page.getByTestId('create-user-success-alert');
+    this.fieldError = page.locator('p[id$="-helper-text"]');
  }

  seed(seed) {
@@ -28,4 +36,8 @@ export class AdminCreateUserPage extends AuthenticatedPage {
      email: faker.internet.email().toLowerCase(),
    };
  }
+
+  async expectCreateUserSuccessAlertToBeVisible() {
+    await expect(this.createUserSuccessAlert).toBeVisible();
+  }
 }
--- a/packages/e2e-tests/tests/admin/manage-roles.spec.js
+++ b/packages/e2e-tests/tests/admin/manage-roles.spec.js
@@ -35,9 +35,8 @@ test.describe('Role management page', () => {
      await adminCreateRolePage.closeSnackbar();
    });

-    let roleRow = await test.step(
-      'Make sure role data is correct',
-      async () => {
+    let roleRow =
+      await test.step('Make sure role data is correct', async () => {
        const roleRow = await adminRolesPage.getRoleRowByName(
          'Create Edit Test'
        );
@@ -48,8 +47,7 @@ test.describe('Role management page', () => {
        await expect(roleData.canEdit).toBe(true);
        await expect(roleData.canDelete).toBe(true);
        return roleRow;
-      }
-    );
+      });

    await test.step('Edit the role', async () => {
      await adminRolesPage.clickEditRole(roleRow);
@@ -67,9 +65,8 @@ test.describe('Role management page', () => {
      await adminEditRolePage.closeSnackbar();
    });

-    roleRow = await test.step(
-      'Make sure changes reflected on roles page',
-      async () => {
+    roleRow =
+      await test.step('Make sure changes reflected on roles page', async () => {
        await adminRolesPage.isMounted();
        const roleRow = await adminRolesPage.getRoleRowByName(
          'Create Update Test'
@@ -81,8 +78,7 @@ test.describe('Role management page', () => {
        await expect(roleData.canEdit).toBe(true);
        await expect(roleData.canDelete).toBe(true);
        return roleRow;
-      }
-    );
+      });

    await test.step('Delete the role', async () => {
      await adminRolesPage.clickDeleteRole(roleRow);
@@ -184,9 +180,7 @@ test.describe('Role management page', () => {
      await expect(snackbar.variant).toBe('success');
      await adminCreateRolePage.closeSnackbar();
    });
-    await test.step(
-      'Create a new user with the "Delete Role" role',
-      async () => {
+    await test.step('Create a new user with the "Delete Role" role', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill('User Role Test');
@@ -198,22 +192,13 @@ test.describe('Role management page', () => {
        .getByRole('option', { name: 'Delete Role', exact: true })
        .click();
      await adminCreateUserPage.createButton.click();
-        await adminCreateUserPage.snackbar.waitFor({
-          state: 'attached',
-        });
      await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
        state: 'attached',
      });
-        const snackbar = await adminUsersPage.getSnackbarData(
-          'snackbar-create-user-success'
-        );
-        await expect(snackbar.variant).toBe('success');
-        await adminUsersPage.closeSnackbar();
-      }
-    );
-    await test.step(
-      'Try to delete "Delete Role" role when new user has it',
-      async () => {
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+    });
+
+    await test.step('Try to delete "Delete Role" role when new user has it', async () => {
      await adminRolesPage.navigateTo();
      const row = await adminRolesPage.getRoleRowByName('Delete Role');
      const modal = await adminRolesPage.clickDeleteRole(row);
@@ -221,12 +206,13 @@ test.describe('Role management page', () => {
      await adminRolesPage.snackbar.waitFor({
        state: 'attached',
      });
-        const snackbar = await adminRolesPage.getSnackbarData('snackbar-delete-role-error');
+      const snackbar = await adminRolesPage.getSnackbarData(
+        'snackbar-delete-role-error'
+      );
      await expect(snackbar.variant).toBe('error');
      await adminRolesPage.closeSnackbar();
      await modal.close();
-      }
-    );
+    });
    await test.step('Change the role the user has', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.usersLoader.waitFor({
@@ -301,24 +287,16 @@ test.describe('Role management page', () => {
        .getByRole('option', { name: 'Cannot Delete Role' })
        .click();
      await adminCreateUserPage.createButton.click();
-      await adminCreateUserPage.snackbar.waitFor({
-        state: 'attached',
-      });
      await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
        state: 'attached',
      });
-      const snackbar = await adminCreateUserPage.getSnackbarData(
-        'snackbar-create-user-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminCreateUserPage.closeSnackbar();
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
    });
    await test.step('Delete this user', async () => {
      await adminUsersPage.navigateTo();
      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({
@@ -385,17 +363,10 @@ test('Accessibility of role management page', async ({
      .getByRole('option', { name: 'Basic Test' })
      .click();
    await adminCreateUserPage.createButton.click();
-    await adminCreateUserPage.snackbar.waitFor({
-      state: 'attached',
-    });
    await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
      state: 'attached',
    });
-    const snackbar = await adminCreateUserPage.getSnackbarData(
-      'snackbar-create-user-success'
-    );
-    await expect(snackbar.variant).toBe('success');
-    await adminCreateUserPage.closeSnackbar();
+    await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
  });

  await test.step('Logout and login to the basic role user', async () => {
@@ -409,22 +380,16 @@ test('Accessibility of role management page', async ({
    await page.getByTestId('logout-item').click();

    const acceptInvitationPage = new AcceptInvitation(page);
-
    await acceptInvitationPage.open(acceptInvitatonToken);
-
    await acceptInvitationPage.acceptInvitation('sample');

    const loginPage = new LoginPage(page);
-
-    // await loginPage.isMounted();
    await loginPage.login('basic-role-test@automatisch.io', 'sample');
    await expect(loginPage.loginButton).not.toBeVisible();
    await expect(page).toHaveURL('/flows');
  });

-  await test.step(
-    'Navigate to the admin settings page and make sure it is blank',
-    async () => {
+  await test.step('Navigate to the admin settings page and make sure it is blank', async () => {
    const pageUrl = new URL(page.url());
    const url = `${pageUrl.origin}/admin-settings/users`;
    await page.goto(url);
@@ -443,8 +408,7 @@ test('Accessibility of role management page', async ({
      return false;
    });
    await expect(isUnmounted).toBe(true);
-    }
-  );
+  });

  await test.step('Log back into the admin account', async () => {
    await page.goto('/');
--- a/packages/e2e-tests/tests/admin/manage-users.spec.js
+++ b/packages/e2e-tests/tests/admin/manage-users.spec.js
@@ -5,15 +5,16 @@ const { test, expect } = require('../../fixtures/index');
 * otherwise tests will fail since users are only *soft*-deleted
 */
 test.describe('User management page', () => {
-
  test.beforeEach(async ({ adminUsersPage }) => {
    await adminUsersPage.navigateTo();
    await adminUsersPage.closeSnackbar();
  });

-  test(
-    'User creation and deletion process',
-    async ({ adminCreateUserPage, adminEditUserPage, adminUsersPage }) => {
+  test('User creation and deletion process', async ({
+    adminCreateUserPage,
+    adminEditUserPage,
+    adminUsersPage,
+  }) => {
    adminCreateUserPage.seed(9000);
    const user = adminCreateUserPage.generateUser();
    await adminUsersPage.usersLoader.waitFor({
@@ -21,45 +22,33 @@ test.describe('User management page', () => {
        because visibility: hidden is used as part of the state transition in
        notistack, see
        https://github.com/iamhosseindhv/notistack/blob/122f47057eb7ce5a1abfe923316cf8475303e99a/src/transitions/Collapse/Collapse.tsx#L110
-        */
+        */,
    });
-      await test.step(
-        'Create a user',
-        async () => {
+    await test.step('Create a user', async () => {
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill(user.fullName);
      await adminCreateUserPage.emailInput.fill(user.email);
      await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
-            'option', { name: 'Admin' }
-          ).click();
+      await adminCreateUserPage.page
+        .getByRole('option', { name: 'Admin' })
+        .click();
      await adminCreateUserPage.createButton.click();
      await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
-            state: 'attached'
+        state: 'attached',
      });

-          const snackbar = await adminUsersPage.getSnackbarData(
-            'snackbar-create-user-success'
-          );
-          await expect(snackbar.variant).toBe('success');
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
      await adminUsersPage.navigateTo();
-          await adminUsersPage.closeSnackbar();
-        }
-      );
-      await test.step(
-        'Check the user exists with the expected properties',
-        async () => {
+    });
+    await test.step('Check the user exists with the expected properties', async () => {
      await adminUsersPage.findUserPageWithEmail(user.email);
      const userRow = await adminUsersPage.getUserRowByEmail(user.email);
      const data = await adminUsersPage.getRowData(userRow);
      await expect(data.email).toBe(user.email);
      await expect(data.fullName).toBe(user.fullName);
      await expect(data.role).toBe('Admin');
-        }
-      );
-      await test.step(
-        'Edit user info and make sure the edit works correctly',
-        async () => {
+    });
+    await test.step('Edit user info and make sure the edit works correctly', async () => {
      await adminUsersPage.findUserPageWithEmail(user.email);

      let userRow = await adminUsersPage.getUserRowByEmail(user.email);
@@ -79,11 +68,8 @@ test.describe('User management page', () => {
      userRow = await adminUsersPage.getUserRowByEmail(user.email);
      const rowData = await adminUsersPage.getRowData(userRow);
      await expect(rowData.fullName).toBe(newUserInfo.fullName);
-        }
-      );
-      await test.step(
-        'Delete user and check the page confirms this deletion',
-        async () => {
+    });
+    await test.step('Delete user and check the page confirms this deletion', async () => {
      await adminUsersPage.findUserPageWithEmail(user.email);
      const userRow = await adminUsersPage.getUserRowByEmail(user.email);
      await adminUsersPage.clickDeleteUser(userRow);
@@ -96,39 +82,30 @@ test.describe('User management page', () => {
      await expect(snackbar.variant).toBe('success');
      await adminUsersPage.closeSnackbar();
      await expect(userRow).not.toBeVisible(false);
-        }
-      );
+    });
  });

-  test(
-    'Creating a user which has been deleted',
-    async ({ adminCreateUserPage, adminUsersPage }) => {
+  test('Creating a user which has been deleted', async ({
+    adminCreateUserPage,
+    adminUsersPage,
+  }) => {
    adminCreateUserPage.seed(9100);
    const testUser = adminCreateUserPage.generateUser();

-      await test.step(
-        'Create the test user',
-        async () => {
+    await test.step('Create the test user', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
      await adminCreateUserPage.emailInput.fill(testUser.email);
      await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
-            'option', { name: 'Admin' }
-          ).click();
+      await adminCreateUserPage.page
+        .getByRole('option', { name: 'Admin' })
+        .click();
      await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
-            'snackbar-create-user-success'
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+    });

-      await test.step(
-        'Delete the created user',
-        async () => {
+    await test.step('Delete the created user', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.findUserPageWithEmail(testUser.email);
      const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
@@ -142,127 +119,94 @@ test.describe('User management page', () => {
      await expect(snackbar.variant).toBe('success');
      await adminUsersPage.closeSnackbar();
      await expect(userRow).not.toBeVisible(false);
-        }
-      );
+    });

-      await test.step(
-        'Create the user again',
-        async () => {
+    await test.step('Create the user again', async () => {
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
      await adminCreateUserPage.emailInput.fill(testUser.email);
      await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
-            'option', { name: 'Admin' }
-          ).click();
+      await adminCreateUserPage.page
+        .getByRole('option', { name: 'Admin' })
+        .click();
      await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
-          await expect(snackbar.variant).toBe('error');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
-    }
-  );
+      await expect(adminCreateUserPage.fieldError).toHaveCount(1);
+    });
+  });

-  test(
-    'Creating a user which already exists',
-    async ({ adminCreateUserPage, adminUsersPage, page }) => {
+  test('Creating a user which already exists', async ({
+    adminCreateUserPage,
+    adminUsersPage,
+    page,
+  }) => {
    adminCreateUserPage.seed(9200);
    const testUser = adminCreateUserPage.generateUser();

-      await test.step(
-        'Create the test user',
-        async () => {
+    await test.step('Create the test user', async () => {
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
      await adminCreateUserPage.emailInput.fill(testUser.email);
      await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
-            'option', { name: 'Admin' }
-          ).click();
+      await adminCreateUserPage.page
+        .getByRole('option', { name: 'Admin' })
+        .click();
      await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
-            'snackbar-create-user-success'
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+    });

-      await test.step(
-        'Create the user again',
-        async () => {
+    await test.step('Create the user again', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
      await adminCreateUserPage.emailInput.fill(testUser.email);
      const createUserPageUrl = page.url();
      await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
-            'option', { name: 'Admin' }
-          ).click();
+      await adminCreateUserPage.page
+        .getByRole('option', { name: 'Admin' })
+        .click();
      await adminCreateUserPage.createButton.click();

      await expect(page.url()).toBe(createUserPageUrl);
-          const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
-          await expect(snackbar.variant).toBe('error');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
-    }
-  );
+      await expect(adminCreateUserPage.fieldError).toHaveCount(1);
+    });
+  });

-  test(
-    'Editing a user to have the same email as another user should not be allowed',
-    async ({
-      adminCreateUserPage, adminEditUserPage, adminUsersPage, page
+  test('Editing a user to have the same email as another user should not be allowed', async ({
+    adminCreateUserPage,
+    adminEditUserPage,
+    adminUsersPage,
+    page,
  }) => {
    adminCreateUserPage.seed(9300);
    const user1 = adminCreateUserPage.generateUser();
    const user2 = adminCreateUserPage.generateUser();
-      await test.step(
-        'Create the first user',
-        async () => {
+    await test.step('Create the first user', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill(user1.fullName);
      await adminCreateUserPage.emailInput.fill(user1.email);
      await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
-            'option', { name: 'Admin' }
-          ).click();
+      await adminCreateUserPage.page
+        .getByRole('option', { name: 'Admin' })
+        .click();
      await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
-            'snackbar-create-user-success'
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+    });

-      await test.step(
-        'Create the second user',
-        async () => {
+    await test.step('Create the second user', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.createUserButton.click();
      await adminCreateUserPage.fullNameInput.fill(user2.fullName);
      await adminCreateUserPage.emailInput.fill(user2.email);
      await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
-            'option', { name: 'Admin' }
-          ).click();
+      await adminCreateUserPage.page
+        .getByRole('option', { name: 'Admin' })
+        .click();
      await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
-            'snackbar-create-user-success'
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+    });

-      await test.step(
-        'Try editing the second user to have the email of the first user',
-        async () => {
+    await test.step('Try editing the second user to have the email of the first user', async () => {
      await adminUsersPage.navigateTo();
      await adminUsersPage.findUserPageWithEmail(user2.email);
      let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
@@ -272,14 +216,10 @@ test.describe('User management page', () => {
      const editPageUrl = page.url();
      await adminEditUserPage.updateButton.click();

-          const snackbar = await adminUsersPage.getSnackbarData(
-            'snackbar-error'
-          );
+      const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
      await expect(snackbar.variant).toBe('error');
      await adminUsersPage.closeSnackbar();
      await expect(page.url()).toBe(editPageUrl);
-        }
-      );
-    }
-  );
+    });
+  });
 });
--- a/packages/e2e-tests/tests/flow-editor/create-flow.spec.js
+++ b/packages/e2e-tests/tests/flow-editor/create-flow.spec.js
@@ -7,9 +7,10 @@ test('Ensure creating a new flow works', async ({ page }) => {
  );
 });

-test(
-  'Create a new flow with a Scheduler step then an Ntfy step',
-  async ({ flowEditorPage, page }) => {
+test('Create a new flow with a Scheduler step then an Ntfy step', async ({
+  flowEditorPage,
+  page,
+}) => {
  await test.step('create flow', async () => {
    await test.step('navigate to new flow page', async () => {
      await page.getByTestId('create-flow-button').click();
@@ -27,17 +28,13 @@ test(
    await test.step('choose app and event substep', async () => {
      await test.step('choose application', async () => {
        await flowEditorPage.appAutocomplete.click();
-          await page
-            .getByRole('option', { name: 'Scheduler' })
-            .click();
+        await page.getByRole('option', { name: 'Scheduler' }).click();
      });

      await test.step('choose and event', async () => {
        await expect(flowEditorPage.eventAutocomplete).toBeVisible();
        await flowEditorPage.eventAutocomplete.click();
-          await page
-            .getByRole('option', { name: 'Every hour' })
-            .click();
+        await page.getByRole('option', { name: 'Every hour' }).click();
      });

      await test.step('continue to next step', async () => {
@@ -89,9 +86,7 @@ test(
      await test.step('choose an event', async () => {
        await expect(flowEditorPage.eventAutocomplete).toBeVisible();
        await flowEditorPage.eventAutocomplete.click();
-          await page
-            .getByRole('option', { name: 'Send message' })
-            .click();
+        await page.getByRole('option', { name: 'Send message' }).click();
      });

      await test.step('continue to next step', async () => {
@@ -107,14 +102,18 @@ test(
    await test.step('choose connection substep', async () => {
      await test.step('choose connection list item', async () => {
        await flowEditorPage.connectionAutocomplete.click();
-          await page.getByRole('option').first().click();
+        await page
+          .getByRole('option')
+          .filter({ hasText: 'Add new connection' })
+          .click();
      });

      await test.step('continue to next step', async () => {
-          await flowEditorPage.continueButton.click();
+        await page.getByTestId('create-connection-button').click();
      });

      await test.step('collapses the substep', async () => {
+        await flowEditorPage.continueButton.click();
        await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
      });
    });
@@ -143,10 +142,7 @@ test(
    await test.step('test trigger substep', async () => {
      await test.step('show sample output', async () => {
        await expect(flowEditorPage.testOutput).not.toBeVisible();
-          await page
-            .getByTestId('flow-substep-continue-button')
-            .first()
-            .click();
+        await page.getByTestId('flow-substep-continue-button').first().click();
        await expect(flowEditorPage.testOutput).toBeVisible();
        await flowEditorPage.screenshot({
          path: 'Ntfy action test output.png',
@@ -172,9 +168,7 @@ test(
    });

    await test.step('unpublish from snackbar', async () => {
-        await page
-          .getByTestId('unpublish-flow-from-snackbar')
-          .click();
+      await page.getByTestId('unpublish-flow-from-snackbar').click();
      await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
    });

@@ -200,5 +194,4 @@ test(
      await expect(page).toHaveURL('/flows');
    });
  });
-  }
-);
+});
--- a/packages/e2e-tests/tests/my-profile/profile-updates.spec.js
+++ b/packages/e2e-tests/tests/my-profile/profile-updates.spec.js
@@ -33,10 +33,7 @@ publicTest.describe('My Profile', () => {
          .getByRole('option', { name: 'Admin' })
          .click();
        await adminCreateUserPage.createButton.click();
-        const snackbar = await adminUsersPage.getSnackbarData(
-          'snackbar-create-user-success'
-        );
-        await expect(snackbar.variant).toBe('success');
+        await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
      });

      await publicTest.step('copy invitation link', async () => {
--- a/packages/web/src/components/Container/index.jsx
+++ b/packages/web/src/components/Container/index.jsx
@@ -1,10 +1,19 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import MuiContainer from '@mui/material/Container';

-export default function Container(props) {
-  return <MuiContainer {...props} />;
+export default function Container({ maxWidth = 'lg', ...props }) {
+  return <MuiContainer maxWidth={maxWidth} {...props} />;
 }

-Container.defaultProps = {
-  maxWidth: 'lg',
+Container.propTypes = {
+  maxWidth: PropTypes.oneOf([
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+    false,
+    PropTypes.string,
+  ]),
 };
--- a/packages/web/src/components/Form/index.jsx
+++ b/packages/web/src/components/Form/index.jsx
@@ -46,7 +46,12 @@ function Form(props) {

  return (
    <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>
+      <form
+        onSubmit={methods.handleSubmit((data, event) =>
+          onSubmit?.(data, event, methods.setError),
+        )}
+        {...formProps}
+      >
        {render ? render(methods) : children}
      </form>
    </FormProvider>
--- a/packages/web/src/helpers/errors.js
+++ b/packages/web/src/helpers/errors.js
@@ -0,0 +1,18 @@
+// 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;
+  }
+};
--- a/packages/web/src/locales/en.json
+++ b/packages/web/src/locales/en.json
@@ -225,6 +225,8 @@
  "userForm.email": "Email",
  "userForm.role": "Role",
  "userForm.password": "Password",
+  "userForm.mandatoryInput": "{inputName} is required.",
+  "userForm.validateEmail": "Email must be valid.",
  "createUser.submit": "Create",
  "createUser.successfullyCreated": "The user has been created.",
  "createUser.invitationEmailInfo": "Invitation email will be sent if SMTP credentials are valid. Otherwise, you can share the invitation link manually: <link></link>",
@@ -249,8 +251,11 @@
  "createRolePage.title": "Create role",
  "roleForm.name": "Name",
  "roleForm.description": "Description",
+  "roleForm.mandatoryInput": "{inputName} is required.",
  "createRole.submit": "Create",
  "createRole.successfullyCreated": "The role has been created.",
+  "createRole.generalError": "Error while creating the role.",
+  "createRole.permissionsError": "Permissions are invalid.",
  "editRole.submit": "Update",
  "editRole.successfullyUpdated": "The role has been updated.",
  "roleList.name": "Name",
--- a/packages/web/src/pages/CreateRole/index.ee.jsx
+++ b/packages/web/src/pages/CreateRole/index.ee.jsx
@@ -1,10 +1,14 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';

 import Container from 'components/Container';
 import Form from 'components/Form';
@@ -15,10 +19,45 @@ import {
  getComputedPermissionsDefaultValues,
  getPermissions,
 } from 'helpers/computePermissions.ee';
+import { getGeneralErrorMessage } from 'helpers/errors';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminCreateRole from 'hooks/useAdminCreateRole';
 import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';

+const getValidationSchema = (formatMessage) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('roleForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    name: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('roleForm.name')),
+    description: yup.string().trim(),
+  });
+};
+
+const getPermissionsErrorMessage = (error) => {
+  const errors = error?.response?.data?.errors;
+
+  if (errors) {
+    const permissionsErrors = Object.keys(errors)
+      .filter((key) => key.startsWith('permissions'))
+      .reduce((obj, key) => {
+        obj[key] = errors[key];
+        return obj;
+      }, {});
+
+    if (Object.keys(permissionsErrors).length > 0) {
+      return JSON.stringify(permissionsErrors, null, 2);
+    }
+  }
+
+  return null;
+};
+
 export default function CreateRole() {
  const navigate = useNavigate();
  const formatMessage = useFormatMessage();
@@ -41,7 +80,7 @@ export default function CreateRole() {
    [permissionCatalogData],
  );

-  const handleRoleCreation = async (roleData) => {
+  const handleRoleCreation = async (roleData, e, setError) => {
    try {
      const permissions = getPermissions(roleData.computedPermissions);

@@ -60,14 +99,38 @@ export default function CreateRole() {

      navigate(URLS.ROLES);
    } catch (error) {
-      const errors = Object.values(error.response.data.errors);
+      const errors = error?.response?.data?.errors;

-      for (const [errorMessage] of errors) {
-        enqueueSnackbar(errorMessage, {
-          variant: 'error',
-          SnackbarProps: {
-            'data-test': 'snackbar-error',
-          },
+      if (errors) {
+        const fieldNames = ['name', 'description'];
+        Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+          if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+            setError(fieldName, {
+              type: 'fieldRequestError',
+              message: fieldErrors.join(', '),
+            });
+          }
+        });
+      }
+
+      const permissionError = getPermissionsErrorMessage(error);
+
+      if (permissionError) {
+        setError('root.permissions', {
+          type: 'fieldRequestError',
+          message: permissionError,
+        });
+      }
+
+      const generalError = getGeneralErrorMessage({
+        error,
+        fallbackMessage: formatMessage('createRole.generalError'),
+      });
+
+      if (generalError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: generalError,
        });
      }
    }
@@ -83,7 +146,15 @@ export default function CreateRole() {
        </Grid>

        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form onSubmit={handleRoleCreation} defaultValues={defaultValues}>
+          <Form
+            onSubmit={handleRoleCreation}
+            defaultValues={defaultValues}
+            noValidate
+            resolver={yupResolver(
+              getValidationSchema(formatMessage, defaultValues),
+            )}
+            automaticValidation={false}
+            render={({ formState: { errors } }) => (
              <Stack direction="column" gap={2}>
                <TextField
                  required={true}
@@ -91,6 +162,8 @@ export default function CreateRole() {
                  label={formatMessage('roleForm.name')}
                  fullWidth
                  data-test="name-input"
+                  error={!!errors?.name}
+                  helperText={errors?.name?.message}
                />

                <TextField
@@ -98,10 +171,29 @@ export default function CreateRole() {
                  label={formatMessage('roleForm.description')}
                  fullWidth
                  data-test="description-input"
+                  error={!!errors?.description}
+                  helperText={errors?.description?.message}
                />

                <PermissionCatalogField name="computedPermissions" />

+                {errors?.root?.permissions && (
+                  <Alert severity="error" data-test="create-role-error-alert">
+                    <AlertTitle>
+                      {formatMessage('createRole.permissionsError')}
+                    </AlertTitle>
+                    <pre>
+                      <code>{errors?.root?.permissions?.message}</code>
+                    </pre>
+                  </Alert>
+                )}
+
+                {errors?.root?.general && (
+                  <Alert severity="error" data-test="create-role-error-alert">
+                    {errors?.root?.general?.message}
+                  </Alert>
+                )}
+
                <LoadingButton
                  type="submit"
                  variant="contained"
@@ -113,7 +205,8 @@ export default function CreateRole() {
                  {formatMessage('createRole.submit')}
                </LoadingButton>
              </Stack>
-          </Form>
+            )}
+          />
        </Grid>
      </Grid>
    </Container>
--- a/packages/web/src/pages/CreateUser/index.jsx
+++ b/packages/web/src/pages/CreateUser/index.jsx
@@ -3,9 +3,10 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Alert from '@mui/material/Alert';
 import MuiTextField from '@mui/material/TextField';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';

 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -16,50 +17,94 @@ import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
 import useAdminCreateUser from 'hooks/useAdminCreateUser';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+import { getGeneralErrorMessage } from 'helpers/errors';

 function generateRoleOptions(roles) {
  return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }

+const getValidationSchema = (formatMessage, canUpdateRole) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('userForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('userForm.fullName')),
+    email: yup
+      .string()
+      .trim()
+      .email(formatMessage('userForm.validateEmail'))
+      .required(getMandatoryFieldMessage('userForm.email')),
+    ...(canUpdateRole
+      ? {
+          roleId: yup
+            .string()
+            .required(getMandatoryFieldMessage('userForm.role')),
+        }
+      : {}),
+  });
+};
+
+const defaultValues = {
+  fullName: '',
+  email: '',
+  roleId: '',
+};
+
 export default function CreateUser() {
  const formatMessage = useFormatMessage();
  const {
    mutateAsync: createUser,
    isPending: isCreateUserPending,
    data: createdUser,
+    isSuccess: createUserSuccess,
  } = useAdminCreateUser();
  const { data: rolesData, loading: isRolesLoading } = useRoles();
  const roles = rolesData?.data;
-  const enqueueSnackbar = useEnqueueSnackbar();
  const queryClient = useQueryClient();
+  const currentUserAbility = useCurrentUserAbility();
+  const canUpdateRole = currentUserAbility.can('update', 'Role');

-  const handleUserCreation = async (userData) => {
+  const handleUserCreation = async (userData, e, setError) => {
    try {
      await createUser({
        fullName: userData.fullName,
        email: userData.email,
-        roleId: userData.role?.id,
+        roleId: userData.roleId,
      });

      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-
-      enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
-        variant: 'success',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-create-user-success',
-        },
-      });
    } catch (error) {
-      enqueueSnackbar(formatMessage('createUser.error'), {
-        variant: 'error',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-error',
-        },
+      const errors = error?.response?.data?.errors;
+
+      if (errors) {
+        const fieldNames = Object.keys(defaultValues);
+        Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+          if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+            setError(fieldName, {
+              type: 'fieldRequestError',
+              message: fieldErrors.join(', '),
+            });
+          }
+        });
+      }
+
+      const generalError = getGeneralErrorMessage({
+        error,
+        fallbackMessage: formatMessage('createUser.error'),
      });

-      throw new Error('Failed while creating!');
+      if (generalError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: generalError,
+        });
+      }
    }
  };

@@ -73,7 +118,16 @@ export default function CreateUser() {
        </Grid>

        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form onSubmit={handleUserCreation}>
+          <Form
+            noValidate
+            onSubmit={handleUserCreation}
+            mode="onSubmit"
+            defaultValues={defaultValues}
+            resolver={yupResolver(
+              getValidationSchema(formatMessage, canUpdateRole),
+            )}
+            automaticValidation={false}
+            render={({ formState: { errors } }) => (
              <Stack direction="column" gap={2}>
                <TextField
                  required={true}
@@ -81,6 +135,8 @@ export default function CreateUser() {
                  label={formatMessage('userForm.fullName')}
                  data-test="full-name-input"
                  fullWidth
+                  error={!!errors?.fullName}
+                  helperText={errors?.fullName?.message}
                />

                <TextField
@@ -89,11 +145,13 @@ export default function CreateUser() {
                  label={formatMessage('userForm.email')}
                  data-test="email-input"
                  fullWidth
+                  error={!!errors?.email}
+                  helperText={errors?.email?.message}
                />

                <Can I="update" a="Role">
                  <ControlledAutocomplete
-                  name="role.id"
+                    name="roleId"
                    fullWidth
                    disablePortal
                    disableClearable={true}
@@ -103,28 +161,40 @@ export default function CreateUser() {
                        {...params}
                        required
                        label={formatMessage('userForm.role')}
+                        error={!!errors?.roleId}
+                        helperText={errors?.roleId?.message}
                      />
                    )}
                    loading={isRolesLoading}
+                    showHelperText={false}
                  />
                </Can>

-              <LoadingButton
-                type="submit"
-                variant="contained"
-                color="primary"
-                sx={{ boxShadow: 2 }}
-                loading={isCreateUserPending}
-                data-test="create-button"
+                {errors?.root?.general && (
+                  <Alert data-test="create-user-error-alert" severity="error">
+                    {errors?.root?.general?.message}
+                  </Alert>
+                )}
+
+                {createUserSuccess && (
+                  <Alert
+                    severity="success"
+                    data-test="create-user-success-alert"
                  >
-                {formatMessage('createUser.submit')}
-              </LoadingButton>
+                    {formatMessage('createUser.successfullyCreated')}
+                  </Alert>
+                )}

                {createdUser && (
                  <Alert
                    severity="info"
                    color="primary"
                    data-test="invitation-email-info-alert"
+                    sx={{
+                      a: {
+                        wordBreak: 'break-all',
+                      },
+                    }}
                  >
                    {formatMessage('createUser.invitationEmailInfo', {
                      link: () => (
@@ -139,8 +209,20 @@ export default function CreateUser() {
                    })}
                  </Alert>
                )}
+
+                <LoadingButton
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  sx={{ boxShadow: 2 }}
+                  loading={isCreateUserPending}
+                  data-test="create-button"
+                >
+                  {formatMessage('createUser.submit')}
+                </LoadingButton>
              </Stack>
-          </Form>
+            )}
+          />
        </Grid>
      </Grid>
    </Container>
Author	SHA1	Message	Date
Jakub P.	53d95366e9	test: use new alert in create role and create user tests	2024-12-12 10:56:14 +00:00
kasia.oczkowska	7a8dc68592	feat: introduce inline error messages for create user and create role forms	2024-12-12 10:56:14 +00:00
Ömer Faruk Aydın	978ceaadb6	Merge pull request #2238 from automatisch/workers-refactoring refactor: Workers and queues and eliminate redundant process listeners	2024-12-11 14:57:51 +03:00
Faruk AYDIN	770b07179f	refactor: Workers and queues and eliminate redundant process listeners	2024-12-11 12:53:24 +01:00
Ömer Faruk Aydın	6d15167ad9	Merge pull request #2243 from automatisch/fix-tests Fix failing API endpoint tests	2024-12-11 14:52:34 +03:00
Faruk AYDIN	39cba6bc74	test: Fix tests for create dynamic data and fields endpoints	2024-12-11 12:45:50 +01:00
Faruk AYDIN	9558e66abf	test: Fix tests for get apps connection	2024-12-11 12:27:15 +01:00
Ömer Faruk Aydın	ff7908955e	Merge pull request #2239 from automatisch/fix-flaky-user-tests test(user): use relative future dates	2024-12-11 14:06:33 +03:00
Ali BARIN	26b095b835	test(user): use relative future dates	2024-12-05 11:46:38 +00:00