Compare commits

...

9 Commits

Author SHA1 Message Date
Jakub P.
53d95366e9 test: use new alert in create role and create user tests 2024-12-12 10:56:14 +00:00
kasia.oczkowska
7a8dc68592 feat: introduce inline error messages for create user and create role forms 2024-12-12 10:56:14 +00:00
Ömer Faruk Aydın
978ceaadb6 Merge pull request #2238 from automatisch/workers-refactoring
refactor: Workers and queues and eliminate redundant process listeners
2024-12-11 14:57:51 +03:00
Faruk AYDIN
770b07179f refactor: Workers and queues and eliminate redundant process listeners 2024-12-11 12:53:24 +01:00
Ömer Faruk Aydın
6d15167ad9 Merge pull request #2243 from automatisch/fix-tests
Fix failing API endpoint tests
2024-12-11 14:52:34 +03:00
Faruk AYDIN
39cba6bc74 test: Fix tests for create dynamic data and fields endpoints 2024-12-11 12:45:50 +01:00
Faruk AYDIN
9558e66abf test: Fix tests for get apps connection 2024-12-11 12:27:15 +01:00
Ömer Faruk Aydın
ff7908955e Merge pull request #2239 from automatisch/fix-flaky-user-tests
test(user): use relative future dates
2024-12-11 14:06:33 +03:00
Ali BARIN
26b095b835 test(user): use relative future dates 2024-12-05 11:46:38 +00:00
30 changed files with 861 additions and 744 deletions

View File

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

View File

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

View File

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

View File

@@ -996,21 +996,9 @@ describe('User model', () => {
const user = await createUser(); 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(); 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(); const refetchedUser = await user.$query();
@@ -1118,7 +1106,9 @@ describe('User model', () => {
const user = await createUser(); 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 () => { it('should throw not found error when user role does not exist', async () => {
expect(() => await expect(() =>
User.registerUser({ User.registerUser({
fullName: 'Sample user', fullName: 'Sample user',
email: 'user@automatisch.io', email: 'user@automatisch.io',
@@ -1257,6 +1247,8 @@ describe('User model', () => {
describe('createUsageData', () => { describe('createUsageData', () => {
it('should create usage data if Automatisch is a cloud installation', async () => { it('should create usage data if Automatisch is a cloud installation', async () => {
vi.useFakeTimers();
vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(true); vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(true);
const user = await createUser({ const user = await createUser({
@@ -1264,10 +1256,14 @@ describe('User model', () => {
email: 'user@automatisch.io', email: 'user@automatisch.io',
}); });
vi.setSystemTime(DateTime.now().plus({ month: 1 }));
const usageData = await user.createUsageData(); const usageData = await user.createUsageData();
const currentUsageData = await user.$relatedQuery('currentUsageData'); const currentUsageData = await user.$relatedQuery('currentUsageData');
expect(usageData).toStrictEqual(currentUsageData); expect(usageData).toStrictEqual(currentUsageData);
vi.useRealTimers();
}); });
it('should not create usage data if Automatisch is not a cloud installation', async () => { it('should not create usage data if Automatisch is not a cloud installation', async () => {

View File

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

View File

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

View File

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

View File

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

View File

@@ -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;

View File

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

View File

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

View File

@@ -1,20 +1,22 @@
import * as Sentry from './helpers/sentry.ee.js'; import * as Sentry from './helpers/sentry.ee.js';
import appConfig from './config/app.js'; import process from 'node:process';
Sentry.init(); Sentry.init();
import './config/orm.js'; import './config/orm.js';
import './helpers/check-worker-readiness.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'; import telemetry from './helpers/telemetry/index.js';

View File

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

View File

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

View File

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

View File

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

View File

@@ -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;

View File

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

View File

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

View File

@@ -1,3 +1,5 @@
const { expect } = require('@playwright/test');
const { faker } = require('@faker-js/faker'); const { faker } = require('@faker-js/faker');
const { AuthenticatedPage } = require('../authenticated-page'); const { AuthenticatedPage } = require('../authenticated-page');
@@ -11,11 +13,17 @@ export class AdminCreateUserPage extends AuthenticatedPage {
super(page); super(page);
this.fullNameInput = page.getByTestId('full-name-input'); this.fullNameInput = page.getByTestId('full-name-input');
this.emailInput = page.getByTestId('email-input'); this.emailInput = page.getByTestId('email-input');
this.roleInput = page.getByTestId('role.id-autocomplete'); this.roleInput = page.getByTestId('roleId-autocomplete');
this.createButton = page.getByTestId('create-button'); this.createButton = page.getByTestId('create-button');
this.pageTitle = page.getByTestId('create-user-title'); this.pageTitle = page.getByTestId('create-user-title');
this.invitationEmailInfoAlert = page.getByTestId('invitation-email-info-alert'); this.invitationEmailInfoAlert = page.getByTestId(
this.acceptInvitationLink = page.getByTestId('invitation-email-info-alert').getByRole('link'); 'invitation-email-info-alert'
);
this.acceptInvitationLink = page
.getByTestId('invitation-email-info-alert')
.getByRole('link');
this.createUserSuccessAlert = page.getByTestId('create-user-success-alert');
this.fieldError = page.locator('p[id$="-helper-text"]');
} }
seed(seed) { seed(seed) {
@@ -28,4 +36,8 @@ export class AdminCreateUserPage extends AuthenticatedPage {
email: faker.internet.email().toLowerCase(), email: faker.internet.email().toLowerCase(),
}; };
} }
async expectCreateUserSuccessAlertToBeVisible() {
await expect(this.createUserSuccessAlert).toBeVisible();
}
} }

View File

@@ -35,9 +35,8 @@ test.describe('Role management page', () => {
await adminCreateRolePage.closeSnackbar(); await adminCreateRolePage.closeSnackbar();
}); });
let roleRow = await test.step( let roleRow =
'Make sure role data is correct', await test.step('Make sure role data is correct', async () => {
async () => {
const roleRow = await adminRolesPage.getRoleRowByName( const roleRow = await adminRolesPage.getRoleRowByName(
'Create Edit Test' 'Create Edit Test'
); );
@@ -48,8 +47,7 @@ test.describe('Role management page', () => {
await expect(roleData.canEdit).toBe(true); await expect(roleData.canEdit).toBe(true);
await expect(roleData.canDelete).toBe(true); await expect(roleData.canDelete).toBe(true);
return roleRow; return roleRow;
} });
);
await test.step('Edit the role', async () => { await test.step('Edit the role', async () => {
await adminRolesPage.clickEditRole(roleRow); await adminRolesPage.clickEditRole(roleRow);
@@ -67,9 +65,8 @@ test.describe('Role management page', () => {
await adminEditRolePage.closeSnackbar(); await adminEditRolePage.closeSnackbar();
}); });
roleRow = await test.step( roleRow =
'Make sure changes reflected on roles page', await test.step('Make sure changes reflected on roles page', async () => {
async () => {
await adminRolesPage.isMounted(); await adminRolesPage.isMounted();
const roleRow = await adminRolesPage.getRoleRowByName( const roleRow = await adminRolesPage.getRoleRowByName(
'Create Update Test' 'Create Update Test'
@@ -81,8 +78,7 @@ test.describe('Role management page', () => {
await expect(roleData.canEdit).toBe(true); await expect(roleData.canEdit).toBe(true);
await expect(roleData.canDelete).toBe(true); await expect(roleData.canDelete).toBe(true);
return roleRow; return roleRow;
} });
);
await test.step('Delete the role', async () => { await test.step('Delete the role', async () => {
await adminRolesPage.clickDeleteRole(roleRow); await adminRolesPage.clickDeleteRole(roleRow);
@@ -184,49 +180,39 @@ test.describe('Role management page', () => {
await expect(snackbar.variant).toBe('success'); await expect(snackbar.variant).toBe('success');
await adminCreateRolePage.closeSnackbar(); await adminCreateRolePage.closeSnackbar();
}); });
await test.step( await test.step('Create a new user with the "Delete Role" role', async () => {
'Create a new user with the "Delete Role" role', await adminUsersPage.navigateTo();
async () => { await adminUsersPage.createUserButton.click();
await adminUsersPage.navigateTo(); await adminCreateUserPage.fullNameInput.fill('User Role Test');
await adminUsersPage.createUserButton.click(); await adminCreateUserPage.emailInput.fill(
await adminCreateUserPage.fullNameInput.fill('User Role Test'); 'user-role-test@automatisch.io'
await adminCreateUserPage.emailInput.fill( );
'user-role-test@automatisch.io' await adminCreateUserPage.roleInput.click();
); await adminCreateUserPage.page
await adminCreateUserPage.roleInput.click(); .getByRole('option', { name: 'Delete Role', exact: true })
await adminCreateUserPage.page .click();
.getByRole('option', { name: 'Delete Role', exact: true }) await adminCreateUserPage.createButton.click();
.click(); await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
await adminCreateUserPage.createButton.click(); state: 'attached',
await adminCreateUserPage.snackbar.waitFor({ });
state: 'attached', await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
}); });
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached', await test.step('Try to delete "Delete Role" role when new user has it', async () => {
}); await adminRolesPage.navigateTo();
const snackbar = await adminUsersPage.getSnackbarData( const row = await adminRolesPage.getRoleRowByName('Delete Role');
'snackbar-create-user-success' const modal = await adminRolesPage.clickDeleteRole(row);
); await modal.deleteButton.click();
await expect(snackbar.variant).toBe('success'); await adminRolesPage.snackbar.waitFor({
await adminUsersPage.closeSnackbar(); state: 'attached',
} });
); const snackbar = await adminRolesPage.getSnackbarData(
await test.step( 'snackbar-delete-role-error'
'Try to delete "Delete Role" role when new user has it', );
async () => { await expect(snackbar.variant).toBe('error');
await adminRolesPage.navigateTo(); await adminRolesPage.closeSnackbar();
const row = await adminRolesPage.getRoleRowByName('Delete Role'); await modal.close();
const modal = await adminRolesPage.clickDeleteRole(row); });
await modal.deleteButton.click();
await adminRolesPage.snackbar.waitFor({
state: 'attached',
});
const snackbar = await adminRolesPage.getSnackbarData('snackbar-delete-role-error');
await expect(snackbar.variant).toBe('error');
await adminRolesPage.closeSnackbar();
await modal.close();
}
);
await test.step('Change the role the user has', async () => { await test.step('Change the role the user has', async () => {
await adminUsersPage.navigateTo(); await adminUsersPage.navigateTo();
await adminUsersPage.usersLoader.waitFor({ await adminUsersPage.usersLoader.waitFor({
@@ -301,24 +287,16 @@ test.describe('Role management page', () => {
.getByRole('option', { name: 'Cannot Delete Role' }) .getByRole('option', { name: 'Cannot Delete Role' })
.click(); .click();
await adminCreateUserPage.createButton.click(); await adminCreateUserPage.createButton.click();
await adminCreateUserPage.snackbar.waitFor({
state: 'attached',
});
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({ await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached', state: 'attached',
}); });
const snackbar = await adminCreateUserPage.getSnackbarData( await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminCreateUserPage.closeSnackbar();
}); });
await test.step('Delete this user', async () => { await test.step('Delete this user', async () => {
await adminUsersPage.navigateTo(); await adminUsersPage.navigateTo();
const row = await adminUsersPage.findUserPageWithEmail( const row = await adminUsersPage.findUserPageWithEmail(
'user-delete-role-test@automatisch.io' 'user-delete-role-test@automatisch.io'
); );
// await test.waitForTimeout(10000);
const modal = await adminUsersPage.clickDeleteUser(row); const modal = await adminUsersPage.clickDeleteUser(row);
await modal.deleteButton.click(); await modal.deleteButton.click();
await adminUsersPage.snackbar.waitFor({ await adminUsersPage.snackbar.waitFor({
@@ -385,17 +363,10 @@ test('Accessibility of role management page', async ({
.getByRole('option', { name: 'Basic Test' }) .getByRole('option', { name: 'Basic Test' })
.click(); .click();
await adminCreateUserPage.createButton.click(); await adminCreateUserPage.createButton.click();
await adminCreateUserPage.snackbar.waitFor({
state: 'attached',
});
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({ await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached', state: 'attached',
}); });
const snackbar = await adminCreateUserPage.getSnackbarData( await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminCreateUserPage.closeSnackbar();
}); });
await test.step('Logout and login to the basic role user', async () => { await test.step('Logout and login to the basic role user', async () => {
@@ -409,42 +380,35 @@ test('Accessibility of role management page', async ({
await page.getByTestId('logout-item').click(); await page.getByTestId('logout-item').click();
const acceptInvitationPage = new AcceptInvitation(page); const acceptInvitationPage = new AcceptInvitation(page);
await acceptInvitationPage.open(acceptInvitatonToken); await acceptInvitationPage.open(acceptInvitatonToken);
await acceptInvitationPage.acceptInvitation('sample'); await acceptInvitationPage.acceptInvitation('sample');
const loginPage = new LoginPage(page); const loginPage = new LoginPage(page);
// await loginPage.isMounted();
await loginPage.login('basic-role-test@automatisch.io', 'sample'); await loginPage.login('basic-role-test@automatisch.io', 'sample');
await expect(loginPage.loginButton).not.toBeVisible(); await expect(loginPage.loginButton).not.toBeVisible();
await expect(page).toHaveURL('/flows'); await expect(page).toHaveURL('/flows');
}); });
await test.step( await test.step('Navigate to the admin settings page and make sure it is blank', async () => {
'Navigate to the admin settings page and make sure it is blank', const pageUrl = new URL(page.url());
async () => { const url = `${pageUrl.origin}/admin-settings/users`;
const pageUrl = new URL(page.url()); await page.goto(url);
const url = `${pageUrl.origin}/admin-settings/users`; await page.waitForTimeout(750);
await page.goto(url); const isUnmounted = await page.evaluate(() => {
await page.waitForTimeout(750); // eslint-disable-next-line no-undef
const isUnmounted = await page.evaluate(() => { const root = document.querySelector('#root');
// eslint-disable-next-line no-undef
const root = document.querySelector('#root');
if (root) { if (root) {
// We have react query devtools only in dev env. // We have react query devtools only in dev env.
// In production, there is nothing in root. // In production, there is nothing in root.
// That's why `<= 1`. // That's why `<= 1`.
return root.children.length <= 1; return root.children.length <= 1;
} }
return false; return false;
}); });
await expect(isUnmounted).toBe(true); await expect(isUnmounted).toBe(true);
} });
);
await test.step('Log back into the admin account', async () => { await test.step('Log back into the admin account', async () => {
await page.goto('/'); await page.goto('/');

View File

@@ -5,281 +5,221 @@ const { test, expect } = require('../../fixtures/index');
* otherwise tests will fail since users are only *soft*-deleted * otherwise tests will fail since users are only *soft*-deleted
*/ */
test.describe('User management page', () => { test.describe('User management page', () => {
test.beforeEach(async ({ adminUsersPage }) => { test.beforeEach(async ({ adminUsersPage }) => {
await adminUsersPage.navigateTo(); await adminUsersPage.navigateTo();
await adminUsersPage.closeSnackbar(); await adminUsersPage.closeSnackbar();
}); });
test( test('User creation and deletion process', async ({
'User creation and deletion process', adminCreateUserPage,
async ({ adminCreateUserPage, adminEditUserPage, adminUsersPage }) => { adminEditUserPage,
adminCreateUserPage.seed(9000); adminUsersPage,
const user = adminCreateUserPage.generateUser(); }) => {
await adminUsersPage.usersLoader.waitFor({ adminCreateUserPage.seed(9000);
state: 'detached' /* Note: state: 'visible' introduces flakiness const user = adminCreateUserPage.generateUser();
await adminUsersPage.usersLoader.waitFor({
state: 'detached' /* Note: state: 'visible' introduces flakiness
because visibility: hidden is used as part of the state transition in because visibility: hidden is used as part of the state transition in
notistack, see notistack, see
https://github.com/iamhosseindhv/notistack/blob/122f47057eb7ce5a1abfe923316cf8475303e99a/src/transitions/Collapse/Collapse.tsx#L110 https://github.com/iamhosseindhv/notistack/blob/122f47057eb7ce5a1abfe923316cf8475303e99a/src/transitions/Collapse/Collapse.tsx#L110
*/ */,
});
await test.step('Create a user', async () => {
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(user.fullName);
await adminCreateUserPage.emailInput.fill(user.email);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page
.getByRole('option', { name: 'Admin' })
.click();
await adminCreateUserPage.createButton.click();
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached',
}); });
await test.step(
'Create a user',
async () => {
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(user.fullName);
await adminCreateUserPage.emailInput.fill(user.email);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
).click();
await adminCreateUserPage.createButton.click();
await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
state: 'attached'
});
const snackbar = await adminUsersPage.getSnackbarData( await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
'snackbar-create-user-success' await adminUsersPage.navigateTo();
); });
await expect(snackbar.variant).toBe('success'); await test.step('Check the user exists with the expected properties', async () => {
await adminUsersPage.navigateTo(); await adminUsersPage.findUserPageWithEmail(user.email);
await adminUsersPage.closeSnackbar(); const userRow = await adminUsersPage.getUserRowByEmail(user.email);
} const data = await adminUsersPage.getRowData(userRow);
await expect(data.email).toBe(user.email);
await expect(data.fullName).toBe(user.fullName);
await expect(data.role).toBe('Admin');
});
await test.step('Edit user info and make sure the edit works correctly', async () => {
await adminUsersPage.findUserPageWithEmail(user.email);
let userRow = await adminUsersPage.getUserRowByEmail(user.email);
await adminUsersPage.clickEditUser(userRow);
await adminEditUserPage.waitForLoad(user.fullName);
const newUserInfo = adminEditUserPage.generateUser();
await adminEditUserPage.fullNameInput.fill(newUserInfo.fullName);
await adminEditUserPage.updateButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-edit-user-success'
); );
await test.step( await expect(snackbar.variant).toBe('success');
'Check the user exists with the expected properties', await adminUsersPage.closeSnackbar();
async () => {
await adminUsersPage.findUserPageWithEmail(user.email); await adminUsersPage.findUserPageWithEmail(user.email);
const userRow = await adminUsersPage.getUserRowByEmail(user.email); userRow = await adminUsersPage.getUserRowByEmail(user.email);
const data = await adminUsersPage.getRowData(userRow); const rowData = await adminUsersPage.getRowData(userRow);
await expect(data.email).toBe(user.email); await expect(rowData.fullName).toBe(newUserInfo.fullName);
await expect(data.fullName).toBe(user.fullName); });
await expect(data.role).toBe('Admin'); await test.step('Delete user and check the page confirms this deletion', async () => {
} await adminUsersPage.findUserPageWithEmail(user.email);
const userRow = await adminUsersPage.getUserRowByEmail(user.email);
await adminUsersPage.clickDeleteUser(userRow);
const modal = adminUsersPage.deleteUserModal;
await modal.deleteButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-delete-user-success'
); );
await test.step( await expect(snackbar.variant).toBe('success');
'Edit user info and make sure the edit works correctly', await adminUsersPage.closeSnackbar();
async () => { await expect(userRow).not.toBeVisible(false);
await adminUsersPage.findUserPageWithEmail(user.email); });
});
let userRow = await adminUsersPage.getUserRowByEmail(user.email); test('Creating a user which has been deleted', async ({
await adminUsersPage.clickEditUser(userRow); adminCreateUserPage,
await adminEditUserPage.waitForLoad(user.fullName); adminUsersPage,
const newUserInfo = adminEditUserPage.generateUser(); }) => {
await adminEditUserPage.fullNameInput.fill(newUserInfo.fullName); adminCreateUserPage.seed(9100);
await adminEditUserPage.updateButton.click(); const testUser = adminCreateUserPage.generateUser();
const snackbar = await adminUsersPage.getSnackbarData( await test.step('Create the test user', async () => {
'snackbar-edit-user-success' await adminUsersPage.navigateTo();
); await adminUsersPage.createUserButton.click();
await expect(snackbar.variant).toBe('success'); await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminUsersPage.closeSnackbar(); await adminCreateUserPage.emailInput.fill(testUser.email);
await adminCreateUserPage.roleInput.click();
await adminUsersPage.findUserPageWithEmail(user.email); await adminCreateUserPage.page
userRow = await adminUsersPage.getUserRowByEmail(user.email); .getByRole('option', { name: 'Admin' })
const rowData = await adminUsersPage.getRowData(userRow); .click();
await expect(rowData.fullName).toBe(newUserInfo.fullName); await adminCreateUserPage.createButton.click();
} await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
);
await test.step(
'Delete user and check the page confirms this deletion',
async () => {
await adminUsersPage.findUserPageWithEmail(user.email);
const userRow = await adminUsersPage.getUserRowByEmail(user.email);
await adminUsersPage.clickDeleteUser(userRow);
const modal = adminUsersPage.deleteUserModal;
await modal.deleteButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-delete-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminUsersPage.closeSnackbar();
await expect(userRow).not.toBeVisible(false);
}
);
}); });
test( await test.step('Delete the created user', async () => {
'Creating a user which has been deleted', await adminUsersPage.navigateTo();
async ({ adminCreateUserPage, adminUsersPage }) => { await adminUsersPage.findUserPageWithEmail(testUser.email);
adminCreateUserPage.seed(9100); const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
const testUser = adminCreateUserPage.generateUser(); await adminUsersPage.clickDeleteUser(userRow);
const modal = adminUsersPage.deleteUserModal;
await test.step( await modal.deleteButton.click();
'Create the test user', const snackbar = await adminUsersPage.getSnackbarData(
async () => { 'snackbar-delete-user-success'
await adminUsersPage.navigateTo();
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminCreateUserPage.emailInput.fill(testUser.email);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
).click();
await adminCreateUserPage.createButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminUsersPage.closeSnackbar();
}
); );
await expect(snackbar).not.toBeNull();
await expect(snackbar.variant).toBe('success');
await adminUsersPage.closeSnackbar();
await expect(userRow).not.toBeVisible(false);
});
await test.step( await test.step('Create the user again', async () => {
'Delete the created user', await adminUsersPage.createUserButton.click();
async () => { await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminUsersPage.navigateTo(); await adminCreateUserPage.emailInput.fill(testUser.email);
await adminUsersPage.findUserPageWithEmail(testUser.email); await adminCreateUserPage.roleInput.click();
const userRow = await adminUsersPage.getUserRowByEmail(testUser.email); await adminCreateUserPage.page
await adminUsersPage.clickDeleteUser(userRow); .getByRole('option', { name: 'Admin' })
const modal = adminUsersPage.deleteUserModal; .click();
await modal.deleteButton.click(); await adminCreateUserPage.createButton.click();
const snackbar = await adminUsersPage.getSnackbarData( await expect(adminCreateUserPage.fieldError).toHaveCount(1);
'snackbar-delete-user-success' });
); });
await expect(snackbar).not.toBeNull();
await expect(snackbar.variant).toBe('success');
await adminUsersPage.closeSnackbar();
await expect(userRow).not.toBeVisible(false);
}
);
await test.step( test('Creating a user which already exists', async ({
'Create the user again', adminCreateUserPage,
async () => { adminUsersPage,
await adminUsersPage.createUserButton.click(); page,
await adminCreateUserPage.fullNameInput.fill(testUser.fullName); }) => {
await adminCreateUserPage.emailInput.fill(testUser.email); adminCreateUserPage.seed(9200);
await adminCreateUserPage.roleInput.click(); const testUser = adminCreateUserPage.generateUser();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
).click();
await adminCreateUserPage.createButton.click();
const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
await expect(snackbar.variant).toBe('error');
await adminUsersPage.closeSnackbar();
}
);
}
);
test( await test.step('Create the test user', async () => {
'Creating a user which already exists', await adminUsersPage.createUserButton.click();
async ({ adminCreateUserPage, adminUsersPage, page }) => { await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
adminCreateUserPage.seed(9200); await adminCreateUserPage.emailInput.fill(testUser.email);
const testUser = adminCreateUserPage.generateUser(); await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page
.getByRole('option', { name: 'Admin' })
.click();
await adminCreateUserPage.createButton.click();
await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
});
await test.step( await test.step('Create the user again', async () => {
'Create the test user', await adminUsersPage.navigateTo();
async () => { await adminUsersPage.createUserButton.click();
await adminUsersPage.createUserButton.click(); await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminCreateUserPage.fullNameInput.fill(testUser.fullName); await adminCreateUserPage.emailInput.fill(testUser.email);
await adminCreateUserPage.emailInput.fill(testUser.email); const createUserPageUrl = page.url();
await adminCreateUserPage.roleInput.click(); await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole( await adminCreateUserPage.page
'option', { name: 'Admin' } .getByRole('option', { name: 'Admin' })
).click(); .click();
await adminCreateUserPage.createButton.click(); await adminCreateUserPage.createButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminUsersPage.closeSnackbar();
}
);
await test.step( await expect(page.url()).toBe(createUserPageUrl);
'Create the user again', await expect(adminCreateUserPage.fieldError).toHaveCount(1);
async () => { });
await adminUsersPage.navigateTo(); });
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
await adminCreateUserPage.emailInput.fill(testUser.email);
const createUserPageUrl = page.url();
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
).click();
await adminCreateUserPage.createButton.click();
await expect(page.url()).toBe(createUserPageUrl); test('Editing a user to have the same email as another user should not be allowed', async ({
const snackbar = await adminUsersPage.getSnackbarData('snackbar-error'); adminCreateUserPage,
await expect(snackbar.variant).toBe('error'); adminEditUserPage,
await adminUsersPage.closeSnackbar(); adminUsersPage,
} page,
); }) => {
} adminCreateUserPage.seed(9300);
); const user1 = adminCreateUserPage.generateUser();
const user2 = adminCreateUserPage.generateUser();
await test.step('Create the first user', async () => {
await adminUsersPage.navigateTo();
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(user1.fullName);
await adminCreateUserPage.emailInput.fill(user1.email);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page
.getByRole('option', { name: 'Admin' })
.click();
await adminCreateUserPage.createButton.click();
await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
});
test( await test.step('Create the second user', async () => {
'Editing a user to have the same email as another user should not be allowed', await adminUsersPage.navigateTo();
async ({ await adminUsersPage.createUserButton.click();
adminCreateUserPage, adminEditUserPage, adminUsersPage, page await adminCreateUserPage.fullNameInput.fill(user2.fullName);
}) => { await adminCreateUserPage.emailInput.fill(user2.email);
adminCreateUserPage.seed(9300); await adminCreateUserPage.roleInput.click();
const user1 = adminCreateUserPage.generateUser(); await adminCreateUserPage.page
const user2 = adminCreateUserPage.generateUser(); .getByRole('option', { name: 'Admin' })
await test.step( .click();
'Create the first user', await adminCreateUserPage.createButton.click();
async () => { await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
await adminUsersPage.navigateTo(); });
await adminUsersPage.createUserButton.click();
await adminCreateUserPage.fullNameInput.fill(user1.fullName);
await adminCreateUserPage.emailInput.fill(user1.email);
await adminCreateUserPage.roleInput.click();
await adminCreateUserPage.page.getByRole(
'option', { name: 'Admin' }
).click();
await adminCreateUserPage.createButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminUsersPage.closeSnackbar();
}
);
await test.step( await test.step('Try editing the second user to have the email of the first user', async () => {
'Create the second user', await adminUsersPage.navigateTo();
async () => { await adminUsersPage.findUserPageWithEmail(user2.email);
await adminUsersPage.navigateTo(); let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
await adminUsersPage.createUserButton.click(); await adminUsersPage.clickEditUser(userRow);
await adminCreateUserPage.fullNameInput.fill(user2.fullName); await adminEditUserPage.waitForLoad(user2.fullName);
await adminCreateUserPage.emailInput.fill(user2.email); await adminEditUserPage.emailInput.fill(user1.email);
await adminCreateUserPage.roleInput.click(); const editPageUrl = page.url();
await adminCreateUserPage.page.getByRole( await adminEditUserPage.updateButton.click();
'option', { name: 'Admin' }
).click();
await adminCreateUserPage.createButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
await adminUsersPage.closeSnackbar();
}
);
await test.step( const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
'Try editing the second user to have the email of the first user', await expect(snackbar.variant).toBe('error');
async () => { await adminUsersPage.closeSnackbar();
await adminUsersPage.navigateTo(); await expect(page.url()).toBe(editPageUrl);
await adminUsersPage.findUserPageWithEmail(user2.email); });
let userRow = await adminUsersPage.getUserRowByEmail(user2.email); });
await adminUsersPage.clickEditUser(userRow);
await adminEditUserPage.waitForLoad(user2.fullName);
await adminEditUserPage.emailInput.fill(user1.email);
const editPageUrl = page.url();
await adminEditUserPage.updateButton.click();
const snackbar = await adminUsersPage.getSnackbarData(
'snackbar-error'
);
await expect(snackbar.variant).toBe('error');
await adminUsersPage.closeSnackbar();
await expect(page.url()).toBe(editPageUrl);
}
);
}
);
}); });

View File

@@ -7,198 +7,191 @@ test('Ensure creating a new flow works', async ({ page }) => {
); );
}); });
test( test('Create a new flow with a Scheduler step then an Ntfy step', async ({
'Create a new flow with a Scheduler step then an Ntfy step', flowEditorPage,
async ({ flowEditorPage, page }) => { page,
await test.step('create flow', async () => { }) => {
await test.step('navigate to new flow page', async () => { await test.step('create flow', async () => {
await page.getByTestId('create-flow-button').click(); await test.step('navigate to new flow page', async () => {
await page.waitForURL( await page.getByTestId('create-flow-button').click();
/\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/ await page.waitForURL(
); /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
);
});
await test.step('has two steps by default', async () => {
await expect(page.getByTestId('flow-step')).toHaveCount(2);
});
});
await test.step('setup Scheduler trigger', async () => {
await test.step('choose app and event substep', async () => {
await test.step('choose application', async () => {
await flowEditorPage.appAutocomplete.click();
await page.getByRole('option', { name: 'Scheduler' }).click();
}); });
await test.step('has two steps by default', async () => { await test.step('choose and event', async () => {
await expect(page.getByTestId('flow-step')).toHaveCount(2); await expect(flowEditorPage.eventAutocomplete).toBeVisible();
await flowEditorPage.eventAutocomplete.click();
await page.getByRole('option', { name: 'Every hour' }).click();
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
}); });
}); });
await test.step('setup Scheduler trigger', async () => { await test.step('set up a trigger', async () => {
await test.step('choose app and event substep', async () => { await test.step('choose "yes" in "trigger on weekends?"', async () => {
await test.step('choose application', async () => { await expect(flowEditorPage.trigger).toBeVisible();
await flowEditorPage.appAutocomplete.click(); await flowEditorPage.trigger.click();
await page await page.getByRole('option', { name: 'Yes' }).click();
.getByRole('option', { name: 'Scheduler' })
.click();
});
await test.step('choose and event', async () => {
await expect(flowEditorPage.eventAutocomplete).toBeVisible();
await flowEditorPage.eventAutocomplete.click();
await page
.getByRole('option', { name: 'Every hour' })
.click();
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
});
}); });
await test.step('set up a trigger', async () => { await test.step('continue to next step', async () => {
await test.step('choose "yes" in "trigger on weekends?"', async () => { await flowEditorPage.continueButton.click();
await expect(flowEditorPage.trigger).toBeVisible();
await flowEditorPage.trigger.click();
await page.getByRole('option', { name: 'Yes' }).click();
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.trigger).not.toBeVisible();
});
}); });
await test.step('test trigger', async () => { await test.step('collapses the substep', async () => {
await test.step('show sample output', async () => { await expect(flowEditorPage.trigger).not.toBeVisible();
await expect(flowEditorPage.testOutput).not.toBeVisible();
await flowEditorPage.continueButton.click();
await expect(flowEditorPage.testOutput).toBeVisible();
await flowEditorPage.screenshot({
path: 'Scheduler trigger test output.png',
});
await flowEditorPage.continueButton.click();
});
}); });
}); });
await test.step('arrange Ntfy action', async () => { await test.step('test trigger', async () => {
await test.step('choose app and event substep', async () => { await test.step('show sample output', async () => {
await test.step('choose application', async () => { await expect(flowEditorPage.testOutput).not.toBeVisible();
await flowEditorPage.appAutocomplete.click(); await flowEditorPage.continueButton.click();
await page.getByRole('option', { name: 'Ntfy' }).click(); await expect(flowEditorPage.testOutput).toBeVisible();
});
await test.step('choose an event', async () => {
await expect(flowEditorPage.eventAutocomplete).toBeVisible();
await flowEditorPage.eventAutocomplete.click();
await page
.getByRole('option', { name: 'Send message' })
.click();
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
});
});
await test.step('choose connection substep', async () => {
await test.step('choose connection list item', async () => {
await flowEditorPage.connectionAutocomplete.click();
await page.getByRole('option').first().click();
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
});
});
await test.step('set up action substep', async () => {
await test.step('fill topic and message body', async () => {
await page
.getByTestId('parameters.topic-power-input')
.locator('[contenteditable]')
.fill('Topic');
await page
.getByTestId('parameters.message-power-input')
.locator('[contenteditable]')
.fill('Message body');
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
});
});
await test.step('test trigger substep', async () => {
await test.step('show sample output', async () => {
await expect(flowEditorPage.testOutput).not.toBeVisible();
await page
.getByTestId('flow-substep-continue-button')
.first()
.click();
await expect(flowEditorPage.testOutput).toBeVisible();
await flowEditorPage.screenshot({
path: 'Ntfy action test output.png',
});
await flowEditorPage.continueButton.click();
});
});
});
await test.step('publish and unpublish', async () => {
await test.step('publish flow', async () => {
await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
await expect(flowEditorPage.publishFlowButton).toBeVisible();
await flowEditorPage.publishFlowButton.click();
await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
});
await test.step('shows read-only sticky snackbar', async () => {
await expect(flowEditorPage.infoSnackbar).toBeVisible();
await flowEditorPage.screenshot({ await flowEditorPage.screenshot({
path: 'Published flow.png', path: 'Scheduler trigger test output.png',
}); });
await flowEditorPage.continueButton.click();
}); });
});
await test.step('unpublish from snackbar', async () => { });
await test.step('arrange Ntfy action', async () => {
await test.step('choose app and event substep', async () => {
await test.step('choose application', async () => {
await flowEditorPage.appAutocomplete.click();
await page.getByRole('option', { name: 'Ntfy' }).click();
});
await test.step('choose an event', async () => {
await expect(flowEditorPage.eventAutocomplete).toBeVisible();
await flowEditorPage.eventAutocomplete.click();
await page.getByRole('option', { name: 'Send message' }).click();
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
});
});
await test.step('choose connection substep', async () => {
await test.step('choose connection list item', async () => {
await flowEditorPage.connectionAutocomplete.click();
await page await page
.getByTestId('unpublish-flow-from-snackbar') .getByRole('option')
.filter({ hasText: 'Add new connection' })
.click(); .click();
await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
}); });
await test.step('publish once again', async () => { await test.step('continue to next step', async () => {
await expect(flowEditorPage.publishFlowButton).toBeVisible(); await page.getByTestId('create-connection-button').click();
await flowEditorPage.publishFlowButton.click();
await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
}); });
await test.step('unpublish from layout top bar', async () => { await test.step('collapses the substep', async () => {
await expect(flowEditorPage.unpublishFlowButton).toBeVisible(); await flowEditorPage.continueButton.click();
await flowEditorPage.unpublishFlowButton.click(); await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible(); });
});
await test.step('set up action substep', async () => {
await test.step('fill topic and message body', async () => {
await page
.getByTestId('parameters.topic-power-input')
.locator('[contenteditable]')
.fill('Topic');
await page
.getByTestId('parameters.message-power-input')
.locator('[contenteditable]')
.fill('Message body');
});
await test.step('continue to next step', async () => {
await flowEditorPage.continueButton.click();
});
await test.step('collapses the substep', async () => {
await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
});
});
await test.step('test trigger substep', async () => {
await test.step('show sample output', async () => {
await expect(flowEditorPage.testOutput).not.toBeVisible();
await page.getByTestId('flow-substep-continue-button').first().click();
await expect(flowEditorPage.testOutput).toBeVisible();
await flowEditorPage.screenshot({ await flowEditorPage.screenshot({
path: 'Unpublished flow.png', path: 'Ntfy action test output.png',
}); });
await flowEditorPage.continueButton.click();
}); });
}); });
});
await test.step('in layout', async () => {
await test.step('can go back to flows page', async () => { await test.step('publish and unpublish', async () => {
await page.getByTestId('editor-go-back-button').click(); await test.step('publish flow', async () => {
await expect(page).toHaveURL('/flows'); await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
await expect(flowEditorPage.publishFlowButton).toBeVisible();
await flowEditorPage.publishFlowButton.click();
await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
});
await test.step('shows read-only sticky snackbar', async () => {
await expect(flowEditorPage.infoSnackbar).toBeVisible();
await flowEditorPage.screenshot({
path: 'Published flow.png',
}); });
}); });
}
); await test.step('unpublish from snackbar', async () => {
await page.getByTestId('unpublish-flow-from-snackbar').click();
await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
});
await test.step('publish once again', async () => {
await expect(flowEditorPage.publishFlowButton).toBeVisible();
await flowEditorPage.publishFlowButton.click();
await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
});
await test.step('unpublish from layout top bar', async () => {
await expect(flowEditorPage.unpublishFlowButton).toBeVisible();
await flowEditorPage.unpublishFlowButton.click();
await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
await flowEditorPage.screenshot({
path: 'Unpublished flow.png',
});
});
});
await test.step('in layout', async () => {
await test.step('can go back to flows page', async () => {
await page.getByTestId('editor-go-back-button').click();
await expect(page).toHaveURL('/flows');
});
});
});

View File

@@ -33,10 +33,7 @@ publicTest.describe('My Profile', () => {
.getByRole('option', { name: 'Admin' }) .getByRole('option', { name: 'Admin' })
.click(); .click();
await adminCreateUserPage.createButton.click(); await adminCreateUserPage.createButton.click();
const snackbar = await adminUsersPage.getSnackbarData( await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
'snackbar-create-user-success'
);
await expect(snackbar.variant).toBe('success');
}); });
await publicTest.step('copy invitation link', async () => { await publicTest.step('copy invitation link', async () => {

View File

@@ -1,10 +1,19 @@
import * as React from 'react'; import * as React from 'react';
import PropTypes from 'prop-types';
import MuiContainer from '@mui/material/Container'; import MuiContainer from '@mui/material/Container';
export default function Container(props) { export default function Container({ maxWidth = 'lg', ...props }) {
return <MuiContainer {...props} />; return <MuiContainer maxWidth={maxWidth} {...props} />;
} }
Container.defaultProps = { Container.propTypes = {
maxWidth: 'lg', maxWidth: PropTypes.oneOf([
'xs',
'sm',
'md',
'lg',
'xl',
false,
PropTypes.string,
]),
}; };

View File

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

View File

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

View File

@@ -225,6 +225,8 @@
"userForm.email": "Email", "userForm.email": "Email",
"userForm.role": "Role", "userForm.role": "Role",
"userForm.password": "Password", "userForm.password": "Password",
"userForm.mandatoryInput": "{inputName} is required.",
"userForm.validateEmail": "Email must be valid.",
"createUser.submit": "Create", "createUser.submit": "Create",
"createUser.successfullyCreated": "The user has been created.", "createUser.successfullyCreated": "The user has been created.",
"createUser.invitationEmailInfo": "Invitation email will be sent if SMTP credentials are valid. Otherwise, you can share the invitation link manually: <link></link>", "createUser.invitationEmailInfo": "Invitation email will be sent if SMTP credentials are valid. Otherwise, you can share the invitation link manually: <link></link>",
@@ -249,8 +251,11 @@
"createRolePage.title": "Create role", "createRolePage.title": "Create role",
"roleForm.name": "Name", "roleForm.name": "Name",
"roleForm.description": "Description", "roleForm.description": "Description",
"roleForm.mandatoryInput": "{inputName} is required.",
"createRole.submit": "Create", "createRole.submit": "Create",
"createRole.successfullyCreated": "The role has been created.", "createRole.successfullyCreated": "The role has been created.",
"createRole.generalError": "Error while creating the role.",
"createRole.permissionsError": "Permissions are invalid.",
"editRole.submit": "Update", "editRole.submit": "Update",
"editRole.successfullyUpdated": "The role has been updated.", "editRole.successfullyUpdated": "The role has been updated.",
"roleList.name": "Name", "roleList.name": "Name",

View File

@@ -1,10 +1,14 @@
import LoadingButton from '@mui/lab/LoadingButton'; import LoadingButton from '@mui/lab/LoadingButton';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
import PermissionCatalogField from 'components/PermissionCatalogField/index.ee'; import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar'; import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import * as React from 'react'; import * as React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import Container from 'components/Container'; import Container from 'components/Container';
import Form from 'components/Form'; import Form from 'components/Form';
@@ -15,10 +19,45 @@ import {
getComputedPermissionsDefaultValues, getComputedPermissionsDefaultValues,
getPermissions, getPermissions,
} from 'helpers/computePermissions.ee'; } from 'helpers/computePermissions.ee';
import { getGeneralErrorMessage } from 'helpers/errors';
import useFormatMessage from 'hooks/useFormatMessage'; import useFormatMessage from 'hooks/useFormatMessage';
import useAdminCreateRole from 'hooks/useAdminCreateRole'; import useAdminCreateRole from 'hooks/useAdminCreateRole';
import usePermissionCatalog from 'hooks/usePermissionCatalog.ee'; import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
const getValidationSchema = (formatMessage) => {
const getMandatoryFieldMessage = (fieldTranslationId) =>
formatMessage('roleForm.mandatoryInput', {
inputName: formatMessage(fieldTranslationId),
});
return yup.object().shape({
name: yup
.string()
.trim()
.required(getMandatoryFieldMessage('roleForm.name')),
description: yup.string().trim(),
});
};
const getPermissionsErrorMessage = (error) => {
const errors = error?.response?.data?.errors;
if (errors) {
const permissionsErrors = Object.keys(errors)
.filter((key) => key.startsWith('permissions'))
.reduce((obj, key) => {
obj[key] = errors[key];
return obj;
}, {});
if (Object.keys(permissionsErrors).length > 0) {
return JSON.stringify(permissionsErrors, null, 2);
}
}
return null;
};
export default function CreateRole() { export default function CreateRole() {
const navigate = useNavigate(); const navigate = useNavigate();
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
@@ -41,7 +80,7 @@ export default function CreateRole() {
[permissionCatalogData], [permissionCatalogData],
); );
const handleRoleCreation = async (roleData) => { const handleRoleCreation = async (roleData, e, setError) => {
try { try {
const permissions = getPermissions(roleData.computedPermissions); const permissions = getPermissions(roleData.computedPermissions);
@@ -60,14 +99,38 @@ export default function CreateRole() {
navigate(URLS.ROLES); navigate(URLS.ROLES);
} catch (error) { } catch (error) {
const errors = Object.values(error.response.data.errors); const errors = error?.response?.data?.errors;
for (const [errorMessage] of errors) { if (errors) {
enqueueSnackbar(errorMessage, { const fieldNames = ['name', 'description'];
variant: 'error', Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
SnackbarProps: { if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
'data-test': 'snackbar-error', setError(fieldName, {
}, type: 'fieldRequestError',
message: fieldErrors.join(', '),
});
}
});
}
const permissionError = getPermissionsErrorMessage(error);
if (permissionError) {
setError('root.permissions', {
type: 'fieldRequestError',
message: permissionError,
});
}
const generalError = getGeneralErrorMessage({
error,
fallbackMessage: formatMessage('createRole.generalError'),
});
if (generalError) {
setError('root.general', {
type: 'requestError',
message: generalError,
}); });
} }
} }
@@ -83,37 +146,67 @@ export default function CreateRole() {
</Grid> </Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}> <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleRoleCreation} defaultValues={defaultValues}> <Form
<Stack direction="column" gap={2}> onSubmit={handleRoleCreation}
<TextField defaultValues={defaultValues}
required={true} noValidate
name="name" resolver={yupResolver(
label={formatMessage('roleForm.name')} getValidationSchema(formatMessage, defaultValues),
fullWidth )}
data-test="name-input" automaticValidation={false}
/> render={({ formState: { errors } }) => (
<Stack direction="column" gap={2}>
<TextField
required={true}
name="name"
label={formatMessage('roleForm.name')}
fullWidth
data-test="name-input"
error={!!errors?.name}
helperText={errors?.name?.message}
/>
<TextField <TextField
name="description" name="description"
label={formatMessage('roleForm.description')} label={formatMessage('roleForm.description')}
fullWidth fullWidth
data-test="description-input" data-test="description-input"
/> error={!!errors?.description}
helperText={errors?.description?.message}
/>
<PermissionCatalogField name="computedPermissions" /> <PermissionCatalogField name="computedPermissions" />
<LoadingButton {errors?.root?.permissions && (
type="submit" <Alert severity="error" data-test="create-role-error-alert">
variant="contained" <AlertTitle>
color="primary" {formatMessage('createRole.permissionsError')}
sx={{ boxShadow: 2 }} </AlertTitle>
loading={isCreateRolePending} <pre>
data-test="create-button" <code>{errors?.root?.permissions?.message}</code>
> </pre>
{formatMessage('createRole.submit')} </Alert>
</LoadingButton> )}
</Stack>
</Form> {errors?.root?.general && (
<Alert severity="error" data-test="create-role-error-alert">
{errors?.root?.general?.message}
</Alert>
)}
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={isCreateRolePending}
data-test="create-button"
>
{formatMessage('createRole.submit')}
</LoadingButton>
</Stack>
)}
/>
</Grid> </Grid>
</Grid> </Grid>
</Container> </Container>

View File

@@ -3,9 +3,10 @@ import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import Alert from '@mui/material/Alert'; import Alert from '@mui/material/Alert';
import MuiTextField from '@mui/material/TextField'; import MuiTextField from '@mui/material/TextField';
import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
import * as React from 'react'; import * as React from 'react';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import Can from 'components/Can'; import Can from 'components/Can';
import Container from 'components/Container'; import Container from 'components/Container';
@@ -16,50 +17,94 @@ import TextField from 'components/TextField';
import useFormatMessage from 'hooks/useFormatMessage'; import useFormatMessage from 'hooks/useFormatMessage';
import useRoles from 'hooks/useRoles.ee'; import useRoles from 'hooks/useRoles.ee';
import useAdminCreateUser from 'hooks/useAdminCreateUser'; import useAdminCreateUser from 'hooks/useAdminCreateUser';
import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
import { getGeneralErrorMessage } from 'helpers/errors';
function generateRoleOptions(roles) { function generateRoleOptions(roles) {
return roles?.map(({ name: label, id: value }) => ({ label, value })); return roles?.map(({ name: label, id: value }) => ({ label, value }));
} }
const getValidationSchema = (formatMessage, canUpdateRole) => {
const getMandatoryFieldMessage = (fieldTranslationId) =>
formatMessage('userForm.mandatoryInput', {
inputName: formatMessage(fieldTranslationId),
});
return yup.object().shape({
fullName: yup
.string()
.trim()
.required(getMandatoryFieldMessage('userForm.fullName')),
email: yup
.string()
.trim()
.email(formatMessage('userForm.validateEmail'))
.required(getMandatoryFieldMessage('userForm.email')),
...(canUpdateRole
? {
roleId: yup
.string()
.required(getMandatoryFieldMessage('userForm.role')),
}
: {}),
});
};
const defaultValues = {
fullName: '',
email: '',
roleId: '',
};
export default function CreateUser() { export default function CreateUser() {
const formatMessage = useFormatMessage(); const formatMessage = useFormatMessage();
const { const {
mutateAsync: createUser, mutateAsync: createUser,
isPending: isCreateUserPending, isPending: isCreateUserPending,
data: createdUser, data: createdUser,
isSuccess: createUserSuccess,
} = useAdminCreateUser(); } = useAdminCreateUser();
const { data: rolesData, loading: isRolesLoading } = useRoles(); const { data: rolesData, loading: isRolesLoading } = useRoles();
const roles = rolesData?.data; const roles = rolesData?.data;
const enqueueSnackbar = useEnqueueSnackbar();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const currentUserAbility = useCurrentUserAbility();
const canUpdateRole = currentUserAbility.can('update', 'Role');
const handleUserCreation = async (userData) => { const handleUserCreation = async (userData, e, setError) => {
try { try {
await createUser({ await createUser({
fullName: userData.fullName, fullName: userData.fullName,
email: userData.email, email: userData.email,
roleId: userData.role?.id, roleId: userData.roleId,
}); });
queryClient.invalidateQueries({ queryKey: ['admin', 'users'] }); queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
variant: 'success',
persist: true,
SnackbarProps: {
'data-test': 'snackbar-create-user-success',
},
});
} catch (error) { } catch (error) {
enqueueSnackbar(formatMessage('createUser.error'), { const errors = error?.response?.data?.errors;
variant: 'error',
persist: true, if (errors) {
SnackbarProps: { const fieldNames = Object.keys(defaultValues);
'data-test': 'snackbar-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('createUser.error'),
}); });
throw new Error('Failed while creating!'); if (generalError) {
setError('root.general', {
type: 'requestError',
message: generalError,
});
}
} }
}; };
@@ -73,74 +118,111 @@ export default function CreateUser() {
</Grid> </Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}> <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleUserCreation}> <Form
<Stack direction="column" gap={2}> noValidate
<TextField onSubmit={handleUserCreation}
required={true} mode="onSubmit"
name="fullName" defaultValues={defaultValues}
label={formatMessage('userForm.fullName')} resolver={yupResolver(
data-test="full-name-input" getValidationSchema(formatMessage, canUpdateRole),
fullWidth )}
/> automaticValidation={false}
render={({ formState: { errors } }) => (
<TextField <Stack direction="column" gap={2}>
required={true} <TextField
name="email" required={true}
label={formatMessage('userForm.email')} name="fullName"
data-test="email-input" label={formatMessage('userForm.fullName')}
fullWidth data-test="full-name-input"
/>
<Can I="update" a="Role">
<ControlledAutocomplete
name="role.id"
fullWidth fullWidth
disablePortal error={!!errors?.fullName}
disableClearable={true} helperText={errors?.fullName?.message}
options={generateRoleOptions(roles)}
renderInput={(params) => (
<MuiTextField
{...params}
required
label={formatMessage('userForm.role')}
/>
)}
loading={isRolesLoading}
/> />
</Can>
<LoadingButton <TextField
type="submit" required={true}
variant="contained" name="email"
color="primary" label={formatMessage('userForm.email')}
sx={{ boxShadow: 2 }} data-test="email-input"
loading={isCreateUserPending} fullWidth
data-test="create-button" error={!!errors?.email}
> helperText={errors?.email?.message}
{formatMessage('createUser.submit')} />
</LoadingButton>
{createdUser && ( <Can I="update" a="Role">
<Alert <ControlledAutocomplete
severity="info" name="roleId"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => (
<MuiTextField
{...params}
required
label={formatMessage('userForm.role')}
error={!!errors?.roleId}
helperText={errors?.roleId?.message}
/>
)}
loading={isRolesLoading}
showHelperText={false}
/>
</Can>
{errors?.root?.general && (
<Alert data-test="create-user-error-alert" severity="error">
{errors?.root?.general?.message}
</Alert>
)}
{createUserSuccess && (
<Alert
severity="success"
data-test="create-user-success-alert"
>
{formatMessage('createUser.successfullyCreated')}
</Alert>
)}
{createdUser && (
<Alert
severity="info"
color="primary"
data-test="invitation-email-info-alert"
sx={{
a: {
wordBreak: 'break-all',
},
}}
>
{formatMessage('createUser.invitationEmailInfo', {
link: () => (
<a
href={createdUser.data.acceptInvitationUrl}
target="_blank"
rel="noreferrer"
>
{createdUser.data.acceptInvitationUrl}
</a>
),
})}
</Alert>
)}
<LoadingButton
type="submit"
variant="contained"
color="primary" color="primary"
data-test="invitation-email-info-alert" sx={{ boxShadow: 2 }}
loading={isCreateUserPending}
data-test="create-button"
> >
{formatMessage('createUser.invitationEmailInfo', { {formatMessage('createUser.submit')}
link: () => ( </LoadingButton>
<a </Stack>
href={createdUser.data.acceptInvitationUrl} )}
target="_blank" />
rel="noreferrer"
>
{createdUser.data.acceptInvitationUrl}
</a>
),
})}
</Alert>
)}
</Stack>
</Form>
</Grid> </Grid>
</Grid> </Grid>
</Container> </Container>