test: use updated selector for create admin button in installation form

refactor: Workers and queues and eliminate redundant process listeners

.github/workflows/playwright.yml

@@ -114,7 +114,6 @@ jobs:
       - name: Run Playwright tests
         working-directory: ./packages/e2e-tests
         env:
-          PORT: 3000
           LOGIN_EMAIL: user@automatisch.io
           LOGIN_PASSWORD: sample
           BASE_URL: http://localhost:3000

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,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 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';
 
 telemetry.setServiceType('worker');

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-setup-page.js

@@ -1,4 +1,4 @@
-import { BasePage } from "./base-page";
+import { BasePage } from './base-page';
 const { faker } = require('@faker-js/faker');
 const { expect } = require('@playwright/test');
 
@@ -14,8 +14,10 @@ export class AdminSetupPage extends BasePage {
     this.fullNameTextField = this.page.getByTestId('fullName-text-field');
     this.emailTextField = this.page.getByTestId('email-text-field');
     this.passwordTextField = this.page.getByTestId('password-text-field');
-    this.repeatPasswordTextField = this.page.getByTestId('repeat-password-text-field');
+    this.repeatPasswordTextField = this.page.getByTestId(
-    this.createAdminButton = this.page.getByTestId('signUp-button');
+      'repeat-password-text-field'
+    );
+    this.createAdminButton = this.page.getByTestId('installation-button');
     this.invalidFields = this.page.locator('p.Mui-error');
     this.successAlert = this.page.getByTestId('success-alert');
   }
@@ -59,7 +61,10 @@ export class AdminSetupPage extends BasePage {
   }
 
   async expectSuccessMessageToContainLoginLink() {
-    await expect(await this.successAlert.locator('a')).toHaveAttribute('href', '/login');
+    await expect(await this.successAlert.locator('a')).toHaveAttribute(
+      'href',
+      '/login'
+    );
   }
 
   generateUser() {
@@ -69,7 +74,7 @@ export class AdminSetupPage extends BasePage {
       fullName: faker.person.fullName(),
       email: faker.internet.email(),
       password: faker.internet.password(),
-      wronglyRepeatedPassword: faker.internet.password()
+      wronglyRepeatedPassword: faker.internet.password(),
     };
   }
-};
+}

packages/e2e-tests/fixtures/execution-details-page.js

@@ -1,21 +0,0 @@
-const { AuthenticatedPage } = require('./authenticated-page');
-const { expect } = require('@playwright/test');
-
-export class ExecutionDetailsPage extends AuthenticatedPage {
-  constructor(page) {
-    super(page);
-
-    this.executionCreatedAt = page.getByTestId('execution-created-at');
-    this.executionId = page.getByTestId('execution-id');
-    this.executionName = page.getByTestId('execution-name');
-    this.executionStep = page.getByTestId('execution-step');
-  }
-
-  async verifyExecutionData(flowId) {
-    await expect(this.executionCreatedAt).toContainText(/\d+ seconds? ago/);
-    await expect(this.executionId).toHaveText(
-      /Execution ID: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
-    );
-    await expect(this.executionName).toHaveText(flowId);
-  }
-}

packages/e2e-tests/fixtures/execution-step-details.js

@@ -1,93 +0,0 @@
-const { ExecutionDetailsPage } = require('./execution-details-page');
-const { expect } = require('@playwright/test');
-
-export class ExecutionStepDetails extends ExecutionDetailsPage {
-  constructor(page, executionStep) {
-    super(page);
-
-    this.executionStep = executionStep;
-    this.stepType = executionStep.getByTestId('step-type');
-    this.stepPositionAndName = executionStep.getByTestId(
-      'step-position-and-name'
-    );
-    this.executionStepId = executionStep.getByTestId('execution-step-id');
-    this.executionStepExecutedAt = executionStep.getByTestId(
-      'execution-step-executed-at'
-    );
-    this.dataInTab = executionStep.getByTestId('data-in-tab');
-    this.dataInPanel = executionStep.getByTestId('data-in-panel');
-    this.dataOutTab = executionStep.getByTestId('data-out-tab');
-    this.dataOutPanel = executionStep.getByTestId('data-out-panel');
-  }
-
-  async expectDataInTabToBeSelectedByDefault() {
-    await expect(this.dataInTab).toHaveClass(/Mui-selected/);
-  }
-
-  async expectDataInToContainText(searchText, desiredText) {
-    await expect(this.dataInPanel).toContainText(desiredText);
-    await this.dataInPanel.locator('#search-input').fill(searchText);
-    await expect(this.dataInPanel).toContainText(desiredText);
-  }
-
-  async expectDataOutToContainText(searchText, desiredText) {
-    await expect(this.dataOutPanel).toContainText(desiredText);
-    await this.dataOutPanel.locator('#search-input').fill(searchText);
-    await expect(this.dataOutPanel).toContainText(desiredText);
-  }
-
-  async verifyTriggerExecutionStep({
-    stepPositionAndName,
-    stepDataInKey,
-    stepDataInValue,
-    stepDataOutKey,
-    stepDataOutValue,
-  }) {
-    await expect(this.stepType).toHaveText('Trigger');
-    await this.verifyExecutionStep({
-      stepPositionAndName,
-      stepDataInKey,
-      stepDataInValue,
-      stepDataOutKey,
-      stepDataOutValue,
-    });
-  }
-
-  async verifyActionExecutionStep({
-    stepPositionAndName,
-    stepDataInKey,
-    stepDataInValue,
-    stepDataOutKey,
-    stepDataOutValue,
-  }) {
-    await expect(this.stepType).toHaveText('Action');
-    await this.verifyExecutionStep({
-      stepPositionAndName,
-      stepDataInKey,
-      stepDataInValue,
-      stepDataOutKey,
-      stepDataOutValue,
-    });
-  }
-
-  async verifyExecutionStep({
-    stepPositionAndName,
-    stepDataInKey,
-    stepDataInValue,
-    stepDataOutKey,
-    stepDataOutValue,
-  }) {
-    await expect(this.stepPositionAndName).toHaveText(stepPositionAndName);
-    await expect(this.executionStepId).toHaveText(
-      /ID: [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
-    );
-    await expect(this.executionStepExecutedAt).toContainText(
-      /executed \d+ seconds? ago/
-    );
-    await this.expectDataInTabToBeSelectedByDefault();
-    await this.expectDataInToContainText(stepDataInKey, stepDataInValue);
-    await this.dataOutTab.click();
-    await expect(this.dataOutPanel).toContainText(stepDataOutValue);
-    await this.expectDataOutToContainText(stepDataOutKey, stepDataOutValue);
-  }
-}

packages/e2e-tests/fixtures/executions-page.js

@@ -2,11 +2,4 @@ const { AuthenticatedPage } = require('./authenticated-page');
 
 export class ExecutionsPage extends AuthenticatedPage {
   screenshotPath = '/executions';
-
-  constructor(page) {
-    super(page);
-
-    this.executionRow = this.page.getByTestId('execution-row');
-    this.executionsPageLoader = this.page.getByTestId('executions-loader');
-  }
 }

packages/e2e-tests/fixtures/index.js

@@ -2,7 +2,6 @@ const { test, expect } = require('@playwright/test');
 const { ApplicationsPage } = require('./applications-page');
 const { ConnectionsPage } = require('./connections-page');
 const { ExecutionsPage } = require('./executions-page');
-const { ExecutionDetailsPage } = require('./execution-details-page');
 const { FlowEditorPage } = require('./flow-editor-page');
 const { UserInterfacePage } = require('./user-interface-page');
 const { LoginPage } = require('./login-page');
@@ -30,9 +29,6 @@ exports.test = test.extend({
   executionsPage: async ({ page }, use) => {
     await use(new ExecutionsPage(page));
   },
-  executionDetailsPage: async ({ page }, use) => {
-    await use(new ExecutionDetailsPage(page));
-  },
   flowEditorPage: async ({ page }, use) => {
     await use(new FlowEditorPage(page));
   },

packages/e2e-tests/helpers/auth-api-helper.js

@@ -1,15 +0,0 @@
-const { expect } = require('../fixtures/index');
-
-export const getToken = async (apiRequest) => {
-  const tokenResponse = await apiRequest.post(
-    `http://localhost:${process.env.PORT}/api/v1/access-tokens`,
-    {
-      data: {
-        email: process.env.LOGIN_EMAIL,
-        password: process.env.LOGIN_PASSWORD,
-      },
-    }
-  );
-  await expect(tokenResponse.status()).toBe(200);
-  return await tokenResponse.json();
-};

packages/e2e-tests/helpers/flow-api-helper.js

@@ -1,108 +0,0 @@
-const { expect } = require('../fixtures/index');
-
-export const createFlow = async (request, token) => {
-  const response = await request.post(
-    `http://localhost:${process.env.PORT}/api/v1/flows`,
-    { headers: { Authorization: token } }
-  );
-  await expect(response.status()).toBe(201);
-  return await response.json();
-};
-
-export const getFlow = async (request, token, flowId) => {
-  const response = await request.get(
-    `http://localhost:${process.env.PORT}/api/v1/flows/${flowId}`,
-    { headers: { Authorization: token } }
-  );
-  await expect(response.status()).toBe(200);
-  return await response.json();
-};
-
-export const updateFlowName = async (request, token, flowId) => {
-  const updateFlowNameResponse = await request.patch(
-    `http://localhost:${process.env.PORT}/api/v1/flows/${flowId}`,
-    {
-      headers: { Authorization: token },
-      data: { name: flowId },
-    }
-  );
-  await expect(updateFlowNameResponse.status()).toBe(200);
-};
-
-export const updateFlowStep = async (request, token, stepId, requestBody) => {
-  const updateTriggerStepResponse = await request.patch(
-    `http://localhost:${process.env.PORT}/api/v1/steps/${stepId}`,
-    {
-      headers: { Authorization: token },
-      data: requestBody,
-    }
-  );
-  await expect(updateTriggerStepResponse.status()).toBe(200);
-  return await updateTriggerStepResponse.json();
-};
-
-export const testStep = async (request, token, stepId) => {
-  const testTriggerStepResponse = await request.post(
-    `http://localhost:${process.env.PORT}/api/v1/steps/${stepId}/test`,
-    {
-      headers: { Authorization: token },
-    }
-  );
-  await expect(testTriggerStepResponse.status()).toBe(200);
-};
-
-export const publishFlow = async (request, token, flowId) => {
-  const publishFlowResponse = await request.patch(
-    `http://localhost:${process.env.PORT}/api/v1/flows/${flowId}/status`,
-    {
-      headers: { Authorization: token },
-      data: { active: true },
-    }
-  );
-  await expect(publishFlowResponse.status()).toBe(200);
-  return publishFlowResponse.json();
-};
-
-export const triggerFlow = async (request, url) => {
-  const triggerFlowResponse = await request.get(url);
-  await expect(triggerFlowResponse.status()).toBe(204);
-};
-
-export const addWebhookFlow = async (request, token) => {
-  let flow = await createFlow(request, token);
-  const flowId = flow.data.id;
-  await updateFlowName(request, token, flowId);
-  flow = await getFlow(request, token, flowId);
-  const flowSteps = flow.data.steps;
-
-  const triggerStepId = flowSteps.find((step) => step.type === 'trigger').id;
-  const actionStepId = flowSteps.find((step) => step.type === 'action').id;
-
-  const triggerStep = await updateFlowStep(request, token, triggerStepId, {
-    appKey: 'webhook',
-    key: 'catchRawWebhook',
-    parameters: {
-      workSynchronously: false,
-    },
-  });
-  await request.get(triggerStep.data.webhookUrl);
-  await testStep(request, token, triggerStepId);
-
-  await updateFlowStep(request, token, actionStepId, {
-    appKey: 'webhook',
-    key: 'respondWith',
-    parameters: {
-      statusCode: '200',
-      body: 'ok',
-      headers: [
-        {
-          key: '',
-          value: '',
-        },
-      ],
-    },
-  });
-  await testStep(request, token, actionStepId);
-
-  return flowId;
-};

packages/e2e-tests/tests/admin-setup/admin.setup.js

@@ -2,14 +2,11 @@ const { publicTest: setup, expect } = require('../../fixtures/index');
 
 setup.describe.serial('Admin setup page', () => {
   // eslint-disable-next-line no-unused-vars
-  setup(
+  setup('should not be able to login if admin is not created', async ({ page, adminSetupPage, loginPage }) => {
-    'should not be able to login if admin is not created',
-    async ({ page, adminSetupPage }) => {
     await expect(async () => {
       await expect(await page.url()).toContain(adminSetupPage.path);
     }).toPass();
-    }
+  });
-  );
 
   setup('should validate the inputs', async ({ adminSetupPage }) => {
     await adminSetupPage.open();

packages/e2e-tests/tests/executions/display-execution.spec.js

@@ -1,138 +1,37 @@
-const { request } = require('@playwright/test');
 const { test, expect } = require('../../fixtures/index');
-const {
-  triggerFlow,
-  publishFlow,
-  addWebhookFlow,
-} = require('../../helpers/flow-api-helper');
-const {
-  ExecutionStepDetails,
-} = require('../../fixtures/execution-step-details');
-const { getToken } = require('../../helpers/auth-api-helper');
-
-test.describe('Executions page', () => {
-  let flowId;
-
-  test.beforeAll(async () => {
-    const apiRequest = await request.newContext();
-    const tokenJsonResponse = await getToken(apiRequest);
-
-    flowId = await addWebhookFlow(apiRequest, tokenJsonResponse.data.token);
-
-    const { data } = await publishFlow(
-      apiRequest,
-      tokenJsonResponse.data.token,
-      flowId
-    );
-
-    const triggerStepWebhookUrl = data.steps.find(
-      (step) => step.type === 'trigger'
-    ).webhookUrl;
-
-    await triggerFlow(apiRequest, triggerStepWebhookUrl);
-  });
 
+// no execution data exists in an empty account
+test.describe.skip('Executions page', () => {
   test.beforeEach(async ({ page }) => {
     await page.getByTestId('executions-page-drawer-link').click();
+    await page.getByTestId('execution-row').first().click();
+
+    await expect(page).toHaveURL(/\/executions\//);
   });
 
-  test('show correct step data for trigger and actions on test and non-test execution', async ({
+  test('displays data in by default', async ({ page, executionsPage }) => {
-    page,
+    await expect(page.getByTestId('execution-step').last()).toBeVisible();
-    executionsPage,
+    await expect(page.getByTestId('execution-step')).toHaveCount(2);
-    executionDetailsPage,
-  }) => {
-    await executionsPage.executionsPageLoader.waitFor({
-      state: 'detached',
-    });
-    const flowExecutions = await executionsPage.executionRow.filter({
-      hasText: flowId,
-    });
-    await test.step('show only trigger step on test execution', async () => {
-      await expect(flowExecutions.last()).toContainText('Test run');
-      await flowExecutions.last().click();
 
-      await executionDetailsPage.verifyExecutionData(flowId);
+    await executionsPage.screenshot({
-      await expect(executionDetailsPage.executionStep).toHaveCount(1);
+      path: 'Execution - data in.png',
-
-      const executionStepDetails = new ExecutionStepDetails(
-        page,
-        executionDetailsPage.executionStep.last()
-      );
-      await executionStepDetails.verifyTriggerExecutionStep({
-        stepPositionAndName: '1. Webhook',
-        stepDataInKey: 'workSynchronously',
-        stepDataInValue: 'workSynchronously',
-        stepDataOutKey: 'host',
-        stepDataOutValue: 'localhost',
-      });
-
-      await page.goBack();
-    });
-
-    await test.step('show trigger and action step on action test execution', async () => {
-      await expect(flowExecutions.nth(1)).toContainText('Test run');
-      await flowExecutions.nth(1).click();
-
-      await expect(executionDetailsPage.executionStep).toHaveCount(2);
-      await executionDetailsPage.verifyExecutionData(flowId);
-
-      const firstExecutionStepDetails = new ExecutionStepDetails(
-        page,
-        executionDetailsPage.executionStep.first()
-      );
-      await firstExecutionStepDetails.verifyTriggerExecutionStep({
-        stepPositionAndName: '1. Webhook',
-        stepDataInKey: 'workSynchronously',
-        stepDataInValue: 'workSynchronously',
-        stepDataOutKey: 'host',
-        stepDataOutValue: 'localhost',
-      });
-
-      const lastExecutionStepDetails = new ExecutionStepDetails(
-        page,
-        executionDetailsPage.executionStep.last()
-      );
-      await lastExecutionStepDetails.verifyActionExecutionStep({
-        stepPositionAndName: '2. Webhook',
-        stepDataInKey: 'body',
-        stepDataInValue: 'body:"ok"',
-        stepDataOutKey: 'body',
-        stepDataOutValue: 'body:"ok"',
-      });
-
-      await page.goBack();
-    });
-
-    await test.step('show trigger and action step on flow execution', async () => {
-      await expect(flowExecutions.first()).not.toContainText('Test run');
-      await flowExecutions.first().click();
-
-      await expect(executionDetailsPage.executionStep).toHaveCount(2);
-      await executionDetailsPage.verifyExecutionData(flowId);
-
-      const firstExecutionStepDetails = new ExecutionStepDetails(
-        page,
-        executionDetailsPage.executionStep.first()
-      );
-      await firstExecutionStepDetails.verifyTriggerExecutionStep({
-        stepPositionAndName: '1. Webhook',
-        stepDataInKey: 'workSynchronously',
-        stepDataInValue: 'workSynchronously',
-        stepDataOutKey: 'host',
-        stepDataOutValue: 'localhost',
-      });
-
-      const lastExecutionStepDetails = new ExecutionStepDetails(
-        page,
-        executionDetailsPage.executionStep.last()
-      );
-      await lastExecutionStepDetails.verifyActionExecutionStep({
-        stepPositionAndName: '2. Webhook',
-        stepDataInKey: 'body',
-        stepDataInValue: 'body:"ok"',
-        stepDataOutKey: 'body',
-        stepDataOutValue: 'body:"ok"',
     });
   });
+
+  test('displays data out', async ({ page, executionsPage }) => {
+    const executionStepCount = await page.getByTestId('execution-step').count();
+    for (let i = 0; i < executionStepCount; i++) {
+      await page.getByTestId('data-out-tab').nth(i).click();
+      await expect(page.getByTestId('data-out-panel').nth(i)).toBeVisible();
+
+      await executionsPage.screenshot({
+        path: `Execution - data out - ${i}.png`,
+        animations: 'disabled',
+      });
+    }
+  });
+
+  test('does not display error', async ({ page }) => {
+    await expect(page.getByTestId('error-tab')).toBeHidden();
   });
 });

packages/e2e-tests/tests/executions/list-executions.spec.js

@@ -1,54 +1,17 @@
-const { request } = require('@playwright/test');
 const { test, expect } = require('../../fixtures/index');
-const {
-  triggerFlow,
-  publishFlow,
-  addWebhookFlow,
-} = require('../../helpers/flow-api-helper');
-const { getToken } = require('../../helpers/auth-api-helper');
 
 test.describe('Executions page', () => {
-  let flowId;
-
-  test.beforeAll(async () => {
-    const apiRequest = await request.newContext();
-    const tokenJsonResponse = await getToken(apiRequest);
-
-    flowId = await addWebhookFlow(apiRequest, tokenJsonResponse.data.token);
-
-    const { data } = await publishFlow(
-      apiRequest,
-      tokenJsonResponse.data.token,
-      flowId
-    );
-
-    const triggerStepWebhookUrl = data.steps.find(
-      (step) => step.type === 'trigger'
-    ).webhookUrl;
-
-    await triggerFlow(apiRequest, triggerStepWebhookUrl);
-  });
-
   test.beforeEach(async ({ page }) => {
     await page.getByTestId('executions-page-drawer-link').click();
   });
 
-  test('should be able to see normal and test executions', async ({
+  // no executions exist in an empty account
-    executionsPage,
+  test.skip('displays executions', async ({ page, executionsPage }) => {
-  }) => {
+    await page.getByTestId('executions-loader').waitFor({
-    await executionsPage.executionsPageLoader.waitFor({
       state: 'detached',
     });
-    const flowExecutions = await executionsPage.executionRow.filter({
+    await expect(page.getByTestId('execution-row').first()).toBeVisible();
-      hasText: flowId,
-    });
 
-    await expect(flowExecutions).toHaveCount(4);
+    await executionsPage.screenshot({ path: 'Executions.png' });
-    await expect(flowExecutions.first()).toContainText('Success');
-    await expect(flowExecutions.first()).not.toContainText('Test run');
-    for (let testFlow = 1; testFlow < 4; testFlow++) {
-      await expect(flowExecutions.nth(testFlow)).toContainText('Test run');
-      await expect(flowExecutions.nth(testFlow)).toContainText('Success');
-    }
   });
 });

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

@@ -10,7 +10,7 @@ import { ExecutionPropType } from 'propTypes/propTypes';
 
 function ExecutionName(props) {
   return (
-    <Typography data-test="execution-name" variant="h3" gutterBottom>
+    <Typography variant="h3" gutterBottom>
       {props.name}
     </Typography>
   );
@@ -29,7 +29,7 @@ function ExecutionId(props) {
   );
   return (
     <Box sx={{ display: 'flex' }}>
-      <Typography data-test="execution-id" variant="body2">
+      <Typography variant="body2">
         {formatMessage('execution.id', { id })}
       </Typography>
     </Box>
@@ -47,7 +47,7 @@ function ExecutionDate(props) {
     <Tooltip
       title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
     >
-      <Typography data-test="execution-created-at" variant="body1" gutterBottom>
+      <Typography variant="body1" gutterBottom>
         {relativeCreatedAt}
       </Typography>
     </Tooltip>

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

@@ -36,11 +36,7 @@ function ExecutionStepId(props) {
 
   return (
     <Box sx={{ display: 'flex' }} gridArea="id">
-      <Typography
+      <Typography variant="caption" fontWeight="bold">
-        data-test="execution-step-id"
-        variant="caption"
-        fontWeight="bold"
-      >
         {formatMessage('executionStep.id', { id })}
       </Typography>
     </Box>
@@ -60,11 +56,7 @@ function ExecutionStepDate(props) {
     <Tooltip
       title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
     >
-      <Typography
+      <Typography variant="caption" gutterBottom>
-        data-test="execution-step-executed-at"
-        variant="caption"
-        gutterBottom
-      >
         {formatMessage('executionStep.executedAt', {
           datetime: relativeCreatedAt,
         })}
@@ -127,12 +119,12 @@ function ExecutionStep(props) {
             <ExecutionStepId id={executionStep.step.id} />
 
             <Box flex="1" gridArea="step">
-              <Typography data-test="step-type" variant="caption">
+              <Typography variant="caption">
                 {isTrigger && formatMessage('flowStep.triggerType')}
                 {isAction && formatMessage('flowStep.actionType')}
               </Typography>
 
-              <Typography data-test="step-position-and-name" variant="body2">
+              <Typography variant="body2">
                 {step.position}. {app?.name}
               </Typography>
             </Box>
@@ -160,7 +152,7 @@ function ExecutionStep(props) {
           </Tabs>
         </Box>
 
-        <TabPanel value={activeTabIndex} index={0} data-test="data-in-panel">
+        <TabPanel value={activeTabIndex} index={0}>
           <SearchableJSONViewer data={executionStep.dataIn} />
         </TabPanel>
 

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>

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

@@ -2,35 +2,55 @@ import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { Alert } from '@mui/material';
+import Alert from '@mui/material/Alert';
 import LoadingButton from '@mui/lab/LoadingButton';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { enqueueSnackbar } from 'notistack';
 import { useQueryClient } from '@tanstack/react-query';
 import Link from '@mui/material/Link';
 
+import { getGeneralErrorMessage } from 'helpers/errors';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useInstallation from 'hooks/useInstallation';
 import * as URLS from 'config/urls';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 
-const validationSchema = yup.object().shape({
+const getValidationSchema = (formatMessage) => {
-  fullName: yup.string().trim().required('installationForm.mandatoryInput'),
+  const getMandatoryInputMessage = (inputNameId) =>
+    formatMessage('installationForm.mandatoryInput', {
+      inputName: formatMessage(inputNameId),
+    });
+
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(
+        getMandatoryInputMessage('installationForm.fullNameFieldLabel'),
+      ),
     email: yup
       .string()
       .trim()
-    .email('installationForm.validateEmail')
+      .required(getMandatoryInputMessage('installationForm.emailFieldLabel'))
-    .required('installationForm.mandatoryInput'),
+      .email(formatMessage('installationForm.validateEmail')),
-  password: yup.string().required('installationForm.mandatoryInput'),
+    password: yup
+      .string()
+      .required(getMandatoryInputMessage('installationForm.passwordFieldLabel'))
+      .min(6, formatMessage('installationForm.passwordMinLength')),
     confirmPassword: yup
       .string()
-    .required('installationForm.mandatoryInput')
+      .required(
-    .oneOf([yup.ref('password')], 'installationForm.passwordsMustMatch'),
+        getMandatoryInputMessage('installationForm.confirmPasswordFieldLabel'),
+      )
+      .oneOf(
+        [yup.ref('password')],
+        formatMessage('installationForm.passwordsMustMatch'),
+      ),
   });
+};
 
-const initialValues = {
+const defaultValues = {
   fullName: '',
   email: '',
   password: '',
@@ -39,7 +59,7 @@ const initialValues = {
 
 function InstallationForm() {
   const formatMessage = useFormatMessage();
-  const install = useInstallation();
+  const { mutateAsync: install, isSuccess, isPending } = useInstallation();
   const queryClient = useQueryClient();
 
   const handleOnRedirect = () => {
@@ -48,21 +68,38 @@ function InstallationForm() {
     });
   };
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async ({ fullName, email, password }, e, setError) => {
-    const { fullName, email, password } = values;
     try {
-      await install.mutateAsync({
+      await install({
         fullName,
         email,
         password,
       });
     } catch (error) {
-      enqueueSnackbar(
+      const errors = error?.response?.data?.errors;
-        error?.message || formatMessage('installationForm.error'),
+      if (errors) {
-        {
+        const fieldNames = Object.keys(defaultValues);
-          variant: 'error',
+        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('installationForm.error'),
+      });
+
+      if (generalError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: generalError,
+        });
+      }
     }
   };
 
@@ -82,11 +119,13 @@ function InstallationForm() {
         {formatMessage('installationForm.title')}
       </Typography>
       <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
         onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
         mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
           <>
             <TextField
               label={formatMessage('installationForm.fullNameFieldLabel')}
@@ -95,19 +134,12 @@ function InstallationForm() {
               margin="dense"
               autoComplete="fullName"
               data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
+              error={!!errors?.fullName}
-              helperText={
+              helperText={errors?.fullName?.message}
-                touchedFields.fullName && errors?.fullName?.message
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage(
-                        'installationForm.fullNameFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage('installationForm.emailFieldLabel')}
               name="email"
@@ -115,19 +147,12 @@ function InstallationForm() {
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
+              error={!!errors?.email}
-              helperText={
+              helperText={errors?.email?.message}
-                touchedFields.email && errors?.email?.message
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage(
-                        'installationForm.emailFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage('installationForm.passwordFieldLabel')}
               name="password"
@@ -135,19 +160,12 @@ function InstallationForm() {
               margin="dense"
               type="password"
               data-test="password-text-field"
-              error={touchedFields.password && !!errors?.password}
+              error={!!errors?.password}
-              helperText={
+              helperText={errors?.password?.message}
-                touchedFields.password && errors?.password?.message
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage(
-                        'installationForm.passwordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
+
             <TextField
               label={formatMessage(
                 'installationForm.confirmPasswordFieldLabel',
@@ -157,38 +175,24 @@ function InstallationForm() {
               margin="dense"
               type="password"
               data-test="repeat-password-text-field"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
+              error={!!errors?.confirmPassword}
-              helperText={
+              helperText={errors?.confirmPassword?.message}
-                touchedFields.confirmPassword &&
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'installationForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
               required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
             />
 
-            <LoadingButton
+            {errors?.root?.general && (
-              type="submit"
+              <Alert data-test="error-alert" severity="error" sx={{ mt: 2 }}>
-              variant="contained"
+                {errors.root.general.message}
-              color="primary"
+              </Alert>
-              sx={{ boxShadow: 2, mt: 3 }}
-              loading={install.isPending}
-              disabled={install.isSuccess}
-              fullWidth
-              data-test="signUp-button"
-            >
-              {formatMessage('installationForm.submit')}
-            </LoadingButton>
-          </>
             )}
-      />
+
-      {install.isSuccess && (
+            {isSuccess && (
-        <Alert data-test="success-alert" severity="success" sx={{ mt: 3 }}>
+              <Alert
+                data-test="success-alert"
+                severity="success"
+                sx={{ mt: 2 }}
+              >
                 {formatMessage('installationForm.success', {
                   link: (str) => (
                     <Link
@@ -203,6 +207,21 @@ function InstallationForm() {
                 })}
               </Alert>
             )}
+            <LoadingButton
+              type="submit"
+              variant="contained"
+              color="primary"
+              sx={{ boxShadow: 2, mt: 2 }}
+              loading={isPending}
+              disabled={isSuccess}
+              fullWidth
+              data-test="installation-button"
+            >
+              {formatMessage('installationForm.submit')}
+            </LoadingButton>
+          </>
+        )}
+      />
     </Paper>
   );
 }

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

@@ -3,33 +3,52 @@ import { useNavigate } from 'react-router-dom';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
+import Alert from '@mui/material/Alert';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 
+import { getGeneralErrorMessage } from 'helpers/errors';
 import useAuthentication from 'hooks/useAuthentication';
 import * as URLS from 'config/urls';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import useRegisterUser from 'hooks/useRegisterUser';
 
-const validationSchema = yup.object().shape({
+const getValidationSchema = (formatMessage) => {
-  fullName: yup.string().trim().required('signupForm.mandatoryInput'),
+  const getMandatoryInputMessage = (inputNameId) =>
+    formatMessage('signupForm.mandatoryInput', {
+      inputName: formatMessage(inputNameId),
+    });
+
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('signupForm.fullNameFieldLabel')),
     email: yup
       .string()
       .trim()
-    .email('signupForm.validateEmail')
+      .required(getMandatoryInputMessage('signupForm.emailFieldLabel'))
-    .required('signupForm.mandatoryInput'),
+      .email(formatMessage('signupForm.validateEmail')),
-  password: yup.string().required('signupForm.mandatoryInput'),
+    password: yup
+      .string()
+      .required(getMandatoryInputMessage('signupForm.passwordFieldLabel'))
+      .min(6, formatMessage('signupForm.passwordMinLength')),
     confirmPassword: yup
       .string()
-    .required('signupForm.mandatoryInput')
+      .required(
-    .oneOf([yup.ref('password')], 'signupForm.passwordsMustMatch'),
+        getMandatoryInputMessage('signupForm.confirmPasswordFieldLabel'),
+      )
+      .oneOf(
+        [yup.ref('password')],
+        formatMessage('signupForm.passwordsMustMatch'),
+      ),
   });
+};
 
-const initialValues = {
+const defaultValues = {
   fullName: '',
   email: '',
   password: '',
@@ -40,7 +59,6 @@ function SignUpForm() {
   const navigate = useNavigate();
   const authentication = useAuthentication();
   const formatMessage = useFormatMessage();
-  const enqueueSnackbar = useEnqueueSnackbar();
   const { mutateAsync: registerUser, isPending: isRegisterUserPending } =
     useRegisterUser();
   const { mutateAsync: createAccessToken, isPending: loginLoading } =
@@ -52,7 +70,7 @@ function SignUpForm() {
     }
   }, [authentication.isAuthenticated]);
 
-  const handleSubmit = async (values) => {
+  const handleSubmit = async (values, e, setError) => {
     try {
       const { fullName, email, password } = values;
       await registerUser({
@@ -67,25 +85,28 @@ function SignUpForm() {
       const { token } = data;
       authentication.updateToken(token);
     } catch (error) {
-      const errors = error?.response?.data?.errors
+      const errors = error?.response?.data?.errors;
-        ? Object.values(error.response.data.errors)
+      if (errors) {
-        : [];
+        const fieldNames = Object.keys(defaultValues);
-
+        Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
-      if (errors.length) {
+          if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
-        for (const [error] of errors) {
+            setError(fieldName, {
-          enqueueSnackbar(error, {
+              type: 'fieldRequestError',
-            variant: 'error',
+              message: fieldErrors.join(', '),
-            SnackbarProps: {
-              'data-test': 'snackbar-sign-up-error',
-            },
             });
           }
-      } else {
+        });
-        enqueueSnackbar(error?.message || formatMessage('signupForm.error'), {
+      }
-          variant: 'error',
+
-          SnackbarProps: {
+      const generalError = getGeneralErrorMessage({
-            'data-test': 'snackbar-sign-up-error',
+        error,
-          },
+        fallbackMessage: formatMessage('signupForm.error'),
+      });
+
+      if (generalError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: generalError,
         });
       }
     }
@@ -108,11 +129,13 @@ function SignUpForm() {
       </Typography>
 
       <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
         onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
         mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
           <>
             <TextField
               label={formatMessage('signupForm.fullNameFieldLabel')}
@@ -121,14 +144,9 @@ function SignUpForm() {
               margin="dense"
               autoComplete="fullName"
               data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
+              error={!!errors?.fullName}
-              helperText={
+              helperText={errors?.fullName?.message}
-                touchedFields.fullName && errors?.fullName?.message
+              required
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage('signupForm.fullNameFieldLabel'),
-                    })
-                  : ''
-              }
             />
 
             <TextField
@@ -138,14 +156,9 @@ function SignUpForm() {
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
+              error={!!errors?.email}
-              helperText={
+              helperText={errors?.email?.message}
-                touchedFields.email && errors?.email?.message
+              required
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage('signupForm.emailFieldLabel'),
-                    })
-                  : ''
-              }
             />
 
             <TextField
@@ -154,14 +167,9 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={touchedFields.password && !!errors?.password}
+              error={!!errors?.password}
-              helperText={
+              helperText={errors?.password?.message}
-                touchedFields.password && errors?.password?.message
+              required
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage('signupForm.passwordFieldLabel'),
-                    })
-                  : ''
-              }
             />
 
             <TextField
@@ -170,19 +178,21 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
+              error={!!errors?.confirmPassword}
-              helperText={
+              helperText={errors?.confirmPassword?.message}
-                touchedFields.confirmPassword &&
+              required
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'signupForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
             />
 
+            {errors?.root?.general && (
+              <Alert
+                data-test="alert-sign-up-error"
+                severity="error"
+                sx={{ mt: 2 }}
+              >
+                {errors.root.general.message}
+              </Alert>
+            )}
+
             <LoadingButton
               type="submit"
               variant="contained"

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;
+  }
+};

packages/web/src/locales/en.json

@@ -138,6 +138,7 @@
   "installationForm.submit": "Create admin",
   "installationForm.validateEmail": "Email must be valid.",
   "installationForm.passwordsMustMatch": "Passwords must match.",
+  "installationForm.passwordMinLength": "Password must be at least 6 characters long.",
   "installationForm.mandatoryInput": "{inputName} is required.",
   "installationForm.success": "The admin account has been created, and thus, the installation has been completed. You can now log in <link>here</link>.",
   "installationForm.error": "Something went wrong. Please try again.",
@@ -149,6 +150,7 @@
   "signupForm.submit": "Sign up",
   "signupForm.validateEmail": "Email must be valid.",
   "signupForm.passwordsMustMatch": "Passwords must match.",
+  "signupForm.passwordMinLength": "Password must be at least 6 characters long.",
   "signupForm.mandatoryInput": "{inputName} is required.",
   "signupForm.error": "Something went wrong. Please try again.",
   "loginForm.title": "Login",