refactor(queues): abstract queue management

packages/backend/src/config/redis.js

@@ -13,7 +13,7 @@ if (appConfig.redisSentinelHost) {
     {
       host: appConfig.redisSentinelHost,
       port: appConfig.redisSentinelPort,
-    }
+    },
   ];
 
   redisConfig.sentinelUsername = appConfig.redisSentinelUsername;

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: 'read',
+      action: 'update',
       subject: 'Connection',
       roleId: currentUserRole.id,
       conditions: ['isCreator'],
     });
 
     await request(app)
-      .get('/api/v1/apps/invalid-connection-id/connections')
+      .get('/api/v1/connections/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)
-      .post(`/api/v1/steps/${notExistingStepUUID}/dynamic-data`)
+      .get(`/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)
-      .post(`/api/v1/steps/${step.id}/dynamic-data`)
+      .get(`/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)
-      .post(`/api/v1/steps/${notExistingStepUUID}/dynamic-fields`)
+      .get(`/api/v1/steps/${notExistingStepUUID}/dynamic-fields`)
       .set('Authorization', token)
       .expect(404);
   });
@@ -138,11 +138,10 @@ describe('POST /api/v1/steps/:stepId/dynamic-fields', () => {
       conditions: [],
     });
 
-    const step = await createStep();
-    await step.$query().patch({ appKey: null });
+    const step = await createStep({ appKey: null });
 
     await request(app)
-      .post(`/api/v1/steps/${step.id}/dynamic-fields`)
+      .get(`/api/v1/steps/${step.id}/dynamic-fields`)
       .set('Authorization', token)
       .expect(404);
   });

packages/backend/src/helpers/create-bull-board-handler.js

@@ -12,7 +12,7 @@ import appConfig from '../config/app.js';
 const serverAdapter = new ExpressAdapter();
 
 const queues = [
-  new BullMQAdapter(flowQueue),
+  new BullMQAdapter(flowQueue.queue),
   new BullMQAdapter(triggerQueue),
   new BullMQAdapter(actionQueue),
   new BullMQAdapter(emailQueue),

packages/backend/src/models/flow.js

@@ -386,10 +386,7 @@ class Flow extends Base {
           }
         );
       } else {
-        const repeatableJobs = await flowQueue.getRepeatableJobs();
-        const job = repeatableJobs.find((job) => job.id === this.id);
-
-        await flowQueue.removeRepeatableByKey(job.key);
+        await flowQueue.removeRepeatableJobById(this.id);
       }
     }
 

packages/backend/src/models/user.js

@@ -305,14 +305,8 @@ class User extends Base {
       active: true,
     });
 
-    const repeatableJobs = await flowQueue.getRepeatableJobs();
-
     for (const flow of flows) {
-      const job = repeatableJobs.find((job) => job.id === flow.id);
-
-      if (job) {
-        await flowQueue.removeRepeatableByKey(job.key);
-      }
+      await flowQueue.removeRepeatableJobById(flow.id);
     }
 
     const executionIds = (

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

@@ -996,9 +996,21 @@ 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();
 
-      vi.setSystemTime(DateTime.now().plus({ month: 1 }));
+      const futureDate = DateTime.fromObject(
+        { year: 2025, month: 1, day: 1 },
+        { zone: 'UTC+0' }
+      );
+
+      vi.setSystemTime(futureDate);
 
       const refetchedUser = await user.$query();
 
@@ -1106,9 +1118,7 @@ describe('User model', () => {
 
       const user = await createUser();
 
-      await expect(() => user.getPlanAndUsage()).rejects.toThrow(
-        'NotFoundError'
-      );
+      expect(() => user.getPlanAndUsage()).rejects.toThrow('NotFoundError');
     });
   });
 
@@ -1179,7 +1189,7 @@ describe('User model', () => {
     });
 
     it('should throw not found error when user role does not exist', async () => {
-      await expect(() =>
+      expect(() =>
         User.registerUser({
           fullName: 'Sample user',
           email: 'user@automatisch.io',
@@ -1247,8 +1257,6 @@ 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({
@@ -1256,14 +1264,10 @@ 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,6 +11,10 @@ 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/base.js

@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+
+class BaseQueue {
+  constructor(name) {
+    if (new.target === BaseQueue) {
+      throw new Error('Cannot instantiate abstract class BaseQueue directly.');
+    }
+
+    this.name = name;
+  }
+
+  // Abstract methods to be implemented by subclasses
+  async add(jobName, data, options) {
+    throw new Error('Method "add" must be implemented.');
+  }
+
+  async remove(jobId) {
+    throw new Error('Method "remove" must be implemented.');
+  }
+
+  async getRepeatableJobs() {
+    throw new Error('Method "getRepeatableJobs" must be implemented.');
+  }
+
+  async removeRepeatableJobByKey(jobKey) {
+    throw new Error('Method "removeRepeatableJobByKey" must be implemented.');
+  }
+}
+
+export default BaseQueue;

packages/backend/src/queues/bullmq.js

@@ -0,0 +1,154 @@
+import { Queue, Worker } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+import BaseQueue from './base.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+class BullMQQueue extends BaseQueue {
+  static queueOptions = {
+    connection: redisConfig,
+  };
+
+  constructor(name) {
+    super(name);
+
+    this.queue = new Queue(name, this.constructor.queueOptions);
+    this.workers = [];
+
+    this.setupErrorHandlers();
+    this.setupGracefulShutdown();
+  }
+
+  async add(jobName, data, options = {}) {
+    try {
+      const job = await this.queue.add(jobName, data, options);
+
+      return job;
+    } catch (error) {
+      logger.error(`Failed to add job to queue "${this.name}":`, error);
+
+      throw error;
+    }
+  }
+
+  async remove(jobId) {
+    try {
+      const job = await this.getJob(jobId);
+
+      if (job) {
+        await job.remove();
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      logger.error(`Failed to remove job from queue "${this.name}":`, error);
+
+      throw error;
+    }
+  }
+
+  async getJob(jobId) {
+    return await this.queue.getJob(jobId);
+  }
+
+  async getRepeatableJobById(jobId) {
+    const repeatableJobs = await this.getRepeatableJobs();
+    const job = repeatableJobs.find((job) => job.id === jobId);
+
+    return job;
+  }
+
+  async getRepeatableJobs() {
+    try {
+      return await this.queue.getRepeatableJobs();
+    } catch (error) {
+      logger.error(
+        `Failed to get repeatable jobs from queue "${this.name}":`,
+        error
+      );
+
+      throw error;
+    }
+  }
+
+  async removeRepeatableJobByKey(jobKey) {
+    try {
+      await this.queue.removeRepeatableByKey(jobKey);
+
+      return true;
+    } catch (error) {
+      logger.error(
+        `Failed to remove repeatable job from queue "${this.name}":`,
+        error
+      );
+
+      throw error;
+    }
+  }
+
+  async removeRepeatableJobById(jobId) {
+    const job = await this.getRepeatableJobById(jobId);
+
+    return await this.removeRepeatableJobByKey(job.key);
+  }
+
+  startWorker(processor, workerOptions = {}) {
+    const worker = new Worker(this.name, processor, {
+      ...this.queueOptions,
+      ...workerOptions,
+    });
+
+    worker.on('error', (error) => {
+      logger.error(`Worker error in queue "${this.name}":`, error);
+    });
+
+    this.workers.push(worker);
+
+    return worker;
+  }
+
+  setupErrorHandlers() {
+    this.queue.on('error', (error) => {
+      if (error.code === CONNECTION_REFUSED) {
+        logger.error(
+          'Make sure you have installed Redis and it is running.',
+          error
+        );
+
+        process.exit();
+      }
+
+      logger.error(`Queue error in "${this.name}":`, error);
+    });
+  }
+
+  setupGracefulShutdown() {
+    const shutdown = async () => {
+      logger.log(`Shutting down queue "${this.name}"...`);
+
+      try {
+        // Close all workers gracefully
+        for (const worker of this.workers) {
+          await worker.close();
+        }
+
+        await this.queue.close();
+
+        logger.log(`Queue "${this.name}" shut down successfully.`);
+
+        process.exit();
+      } catch (error) {
+        logger.error(`Error during shutdown of queue "${this.name}":`, error);
+
+        process.exit(1);
+      }
+    };
+
+    process.on('SIGTERM', shutdown);
+    process.on('SIGINT', shutdown);
+  }
+}
+
+export default BullMQQueue;

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

@@ -11,6 +11,10 @@ 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,6 +11,10 @@ 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

@@ -1,27 +1,5 @@
-import process from 'process';
-import { Queue } from 'bullmq';
-import redisConfig from '../config/redis.js';
-import logger from '../helpers/logger.js';
+import BullMQQueue from './bullmq.js';
 
-const CONNECTION_REFUSED = 'ECONNREFUSED';
-
-const redisConnection = {
-  connection: redisConfig,
-};
-
-const flowQueue = new Queue('flow', redisConnection);
-
-flowQueue.on('error', (error) => {
-  if (error.code === CONNECTION_REFUSED) {
-    logger.error(
-      'Make sure you have installed Redis and it is running.',
-      error
-    );
-
-    process.exit();
-  }
-
-  logger.error('Error happened in flow queue!', error);
-});
+const flowQueue = new BullMQQueue('flow');
 
 export default flowQueue;

packages/backend/src/queues/index.js

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

packages/backend/src/workers/action.js

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

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

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

packages/backend/src/workers/email.js

@@ -1,4 +1,5 @@
 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 +16,7 @@ const isAutomatischEmail = (email) => {
   return email.endsWith('@automatisch.io');
 };
 
-const emailWorker = new Worker(
+export const worker = new Worker(
   'email',
   async (job) => {
     const { email, subject, template, params } = job.data;
@@ -38,13 +39,13 @@ const emailWorker = new Worker(
   { connection: redisConfig }
 );
 
-emailWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - ${job.data.subject} email sent to ${job.data.email}!`
   );
 });
 
-emailWorker.on('failed', (job, err) => {
+worker.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}
@@ -59,4 +60,6 @@ emailWorker.on('failed', (job, err) => {
   });
 });
 
-export default emailWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/flow.js

@@ -1,4 +1,5 @@
 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 +13,7 @@ import {
   REMOVE_AFTER_7_DAYS_OR_50_JOBS,
 } from '../helpers/remove-job-configuration.js';
 
-const flowWorker = new Worker(
+export const worker = new Worker(
   'flow',
   async (job) => {
     const { flowId } = job.data;
@@ -63,11 +64,11 @@ const flowWorker = new Worker(
   { connection: redisConfig }
 );
 
-flowWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-flowWorker.on('failed', async (job, err) => {
+worker.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}
@@ -78,7 +79,7 @@ flowWorker.on('failed', async (job, err) => {
   const flow = await Flow.query().findById(job.data.flowId);
 
   if (!flow) {
-    await flowQueue.removeRepeatableByKey(job.repeatJobKey);
+    await flowQueue.removeRepeatableJobByKey(job.repeatJobKey);
 
     const flowNotFoundErrorMessage = `
       JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has been deleted from Redis because flow was not found!
@@ -94,4 +95,6 @@ flowWorker.on('failed', async (job, err) => {
   });
 });
 
-export default flowWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/index.js

@@ -1,21 +0,0 @@
-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,11 +1,12 @@
 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';
 
-const removeCancelledSubscriptionsWorker = new Worker(
+export const worker = new Worker(
   'remove-cancelled-subscriptions',
   async () => {
     await Subscription.query()
@@ -22,13 +23,13 @@ const removeCancelledSubscriptionsWorker = new Worker(
   { connection: redisConfig }
 );
 
-removeCancelledSubscriptionsWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(
     `JOB ID: ${job.id} - The cancelled subscriptions have been removed!`
   );
 });
 
-removeCancelledSubscriptionsWorker.on('failed', (job, err) => {
+worker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - ERROR: The cancelled subscriptions can not be removed! ${err.message}
     \n ${err.stack}
@@ -41,4 +42,6 @@ removeCancelledSubscriptionsWorker.on('failed', (job, err) => {
   });
 });
 
-export default removeCancelledSubscriptionsWorker;
+process.on('SIGTERM', async () => {
+  await worker.close();
+});

packages/backend/src/workers/trigger.js

@@ -1,4 +1,5 @@
 import { Worker } from 'bullmq';
+import process from 'node:process';
 
 import * as Sentry from '../helpers/sentry.ee.js';
 import redisConfig from '../config/redis.js';
@@ -11,7 +12,7 @@ import {
   REMOVE_AFTER_7_DAYS_OR_50_JOBS,
 } from '../helpers/remove-job-configuration.js';
 
-const triggerWorker = new Worker(
+export const worker = new Worker(
   'trigger',
   async (job) => {
     const { flowId, executionId, stepId, executionStep } = await processTrigger(
@@ -40,11 +41,11 @@ const triggerWorker = new Worker(
   { connection: redisConfig }
 );
 
-triggerWorker.on('completed', (job) => {
+worker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-triggerWorker.on('failed', (job, err) => {
+worker.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}
@@ -59,4 +60,6 @@ triggerWorker.on('failed', (job, err) => {
   });
 });
 
-export default triggerWorker;
+process.on('SIGTERM', async () => {
+  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');
 
@@ -6,18 +6,16 @@ export class AdminSetupPage extends BasePage {
   path = '/installation';
 
   /**
-   * @param {import('@playwright/test').Page} page
-   */
+  * @param {import('@playwright/test').Page} page
+  */
   constructor(page) {
     super(page);
 
     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.createAdminButton = this.page.getByTestId('installation-button');
+    this.repeatPasswordTextField = this.page.getByTestId('repeat-password-text-field');
+    this.createAdminButton = this.page.getByTestId('signUp-button');
     this.invalidFields = this.page.locator('p.Mui-error');
     this.successAlert = this.page.getByTestId('success-alert');
   }
@@ -48,7 +46,7 @@ export class AdminSetupPage extends BasePage {
     await this.repeatPasswordTextField.fill(testUser.wronglyRepeatedPassword);
   }
 
-  async submitAdminForm() {
+  async submitAdminForm()  {
     await this.createAdminButton.click();
   }
 
@@ -61,10 +59,7 @@ 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() {
@@ -74,7 +69,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/web/src/components/Form/index.jsx

@@ -46,12 +46,7 @@ function Form(props) {
 
   return (
     <FormProvider {...methods}>
-      <form
-        onSubmit={methods.handleSubmit((data, event) =>
-          onSubmit?.(data, event, methods.setError),
-        )}
-        {...formProps}
-      >
+      <form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>
         {render ? render(methods) : children}
       </form>
     </FormProvider>

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

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

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

@@ -3,52 +3,33 @@ 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 getValidationSchema = (formatMessage) => {
-  const getMandatoryInputMessage = (inputNameId) =>
-    formatMessage('signupForm.mandatoryInput', {
-      inputName: formatMessage(inputNameId),
-    });
+const validationSchema = yup.object().shape({
+  fullName: yup.string().trim().required('signupForm.mandatoryInput'),
+  email: yup
+    .string()
+    .trim()
+    .email('signupForm.validateEmail')
+    .required('signupForm.mandatoryInput'),
+  password: yup.string().required('signupForm.mandatoryInput'),
+  confirmPassword: yup
+    .string()
+    .required('signupForm.mandatoryInput')
+    .oneOf([yup.ref('password')], 'signupForm.passwordsMustMatch'),
+});
 
-  return yup.object().shape({
-    fullName: yup
-      .string()
-      .trim()
-      .required(getMandatoryInputMessage('signupForm.fullNameFieldLabel')),
-    email: yup
-      .string()
-      .trim()
-      .required(getMandatoryInputMessage('signupForm.emailFieldLabel'))
-      .email(formatMessage('signupForm.validateEmail')),
-    password: yup
-      .string()
-      .required(getMandatoryInputMessage('signupForm.passwordFieldLabel'))
-      .min(6, formatMessage('signupForm.passwordMinLength')),
-    confirmPassword: yup
-      .string()
-      .required(
-        getMandatoryInputMessage('signupForm.confirmPasswordFieldLabel'),
-      )
-      .oneOf(
-        [yup.ref('password')],
-        formatMessage('signupForm.passwordsMustMatch'),
-      ),
-  });
-};
-
-const defaultValues = {
+const initialValues = {
   fullName: '',
   email: '',
   password: '',
@@ -59,6 +40,7 @@ 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 } =
@@ -70,7 +52,7 @@ function SignUpForm() {
     }
   }, [authentication.isAuthenticated]);
 
-  const handleSubmit = async (values, e, setError) => {
+  const handleSubmit = async (values) => {
     try {
       const { fullName, email, password } = values;
       await registerUser({
@@ -85,28 +67,25 @@ function SignUpForm() {
       const { token } = data;
       authentication.updateToken(token);
     } catch (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 errors = error?.response?.data?.errors
+        ? Object.values(error.response.data.errors)
+        : [];
 
-      const generalError = getGeneralErrorMessage({
-        error,
-        fallbackMessage: formatMessage('signupForm.error'),
-      });
-
-      if (generalError) {
-        setError('root.general', {
-          type: 'requestError',
-          message: generalError,
+      if (errors.length) {
+        for (const [error] of errors) {
+          enqueueSnackbar(error, {
+            variant: 'error',
+            SnackbarProps: {
+              'data-test': 'snackbar-sign-up-error',
+            },
+          });
+        }
+      } else {
+        enqueueSnackbar(error?.message || formatMessage('signupForm.error'), {
+          variant: 'error',
+          SnackbarProps: {
+            'data-test': 'snackbar-sign-up-error',
+          },
         });
       }
     }
@@ -129,13 +108,11 @@ function SignUpForm() {
       </Typography>
 
       <Form
-        automaticValidation={false}
-        noValidate
-        defaultValues={defaultValues}
+        defaultValues={initialValues}
         onSubmit={handleSubmit}
-        resolver={yupResolver(getValidationSchema(formatMessage))}
+        resolver={yupResolver(validationSchema)}
         mode="onChange"
-        render={({ formState: { errors } }) => (
+        render={({ formState: { errors, touchedFields } }) => (
           <>
             <TextField
               label={formatMessage('signupForm.fullNameFieldLabel')}
@@ -144,9 +121,14 @@ function SignUpForm() {
               margin="dense"
               autoComplete="fullName"
               data-test="fullName-text-field"
-              error={!!errors?.fullName}
-              helperText={errors?.fullName?.message}
-              required
+              error={touchedFields.fullName && !!errors?.fullName}
+              helperText={
+                touchedFields.fullName && errors?.fullName?.message
+                  ? formatMessage(errors?.fullName?.message, {
+                      inputName: formatMessage('signupForm.fullNameFieldLabel'),
+                    })
+                  : ''
+              }
             />
 
             <TextField
@@ -156,9 +138,14 @@ function SignUpForm() {
               margin="dense"
               autoComplete="email"
               data-test="email-text-field"
-              error={!!errors?.email}
-              helperText={errors?.email?.message}
-              required
+              error={touchedFields.email && !!errors?.email}
+              helperText={
+                touchedFields.email && errors?.email?.message
+                  ? formatMessage(errors?.email?.message, {
+                      inputName: formatMessage('signupForm.emailFieldLabel'),
+                    })
+                  : ''
+              }
             />
 
             <TextField
@@ -167,9 +154,14 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={!!errors?.password}
-              helperText={errors?.password?.message}
-              required
+              error={touchedFields.password && !!errors?.password}
+              helperText={
+                touchedFields.password && errors?.password?.message
+                  ? formatMessage(errors?.password?.message, {
+                      inputName: formatMessage('signupForm.passwordFieldLabel'),
+                    })
+                  : ''
+              }
             />
 
             <TextField
@@ -178,21 +170,19 @@ function SignUpForm() {
               fullWidth
               margin="dense"
               type="password"
-              error={!!errors?.confirmPassword}
-              helperText={errors?.confirmPassword?.message}
-              required
+              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
+              helperText={
+                touchedFields.confirmPassword &&
+                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

@@ -1,18 +0,0 @@
-// 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,7 +138,6 @@
   "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.",
@@ -150,7 +149,6 @@
   "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",