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

.gitea/workflows/registry.yml

@@ -1,52 +0,0 @@
-name: release-tag
-on:
-  push:
-    branches:
-      - 'main'
-jobs:
-  release-image:
-    runs-on: ubuntu-latest
-    env:
-      DOCKER_ORG: groot
-      DOCKER_LATEST: latest
-      RUNNER_TOOL_CACHE: /toolcache
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-
-      - name: Set up Docker BuildX
-        uses: docker/setup-buildx-action@v2
-        with: # replace it with your local IP
-          config-inline: |
-            [registry."git.send.nrw"] 
-              http = true
-              insecure = true                        
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v2
-        with:
-          registry: git.send.nrw # replace it with your local IP
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-          
-      - name: Get Meta
-        id: meta
-        run: |
-          echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
-          echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT                          
-
-      - name: Build and push
-        uses: docker/build-push-action@v4
-        with:
-          context: ./docker
-          file: ./docker/Dockerfile.compose
-          entrypoint: ./docker/compose-entrypoint.sh
-          platforms: |
-            linux/amd64                                   
-          push: true
-          tags: | # replace it with your local IP and tags
-            git.send.nrw/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ steps.meta.outputs.REPO_VERSION }}
-            git.send.nrw/${{ env.DOCKER_ORG }}/${{ steps.meta.outputs.REPO_NAME }}:${{ env.DOCKER_LATEST }}

docker-compose.yml

@@ -1,7 +1,10 @@
 version: '3.9'
 services:
   main:
-    image: git.send.nrw/groot/automatisch:latest
+    build:
+      context: ./docker
+      dockerfile: Dockerfile.compose
+    entrypoint: /compose-entrypoint.sh
     ports:
       - '3000:3000'
     depends_on:
@@ -25,7 +28,10 @@ services:
     volumes:
       - automatisch_storage:/automatisch/storage
   worker:
-    image: git.send.nrw/groot/automatisch:latest
+    build:
+      context: ./docker
+      dockerfile: Dockerfile.compose
+    entrypoint: /compose-entrypoint.sh
     depends_on:
       - main
     environment:

packages/backend/src/queues/action.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const actionQueue = new Queue('action', redisConnection);
+
+actionQueue.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 action queue!', error);
+});
 
-const actionQueue = generateQueue('action');
 export default actionQueue;

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

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const deleteUserQueue = new Queue('delete-user', redisConnection);
+
+deleteUserQueue.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 delete user queue!', error);
+});
 
-const deleteUserQueue = generateQueue('delete-user');
 export default deleteUserQueue;

packages/backend/src/queues/email.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const emailQueue = new Queue('email', redisConnection);
+
+emailQueue.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 email queue!', error);
+});
 
-const emailQueue = generateQueue('email');
 export default emailQueue;

packages/backend/src/queues/flow.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.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 = generateQueue('flow');
 export default flowQueue;

packages/backend/src/queues/queue.js

@@ -1,44 +0,0 @@
-import process from 'process';
-import { Queue } from 'bullmq';
-import redisConfig from '../config/redis.js';
-import logger from '../helpers/logger.js';
-
-const CONNECTION_REFUSED = 'ECONNREFUSED';
-
-const redisConnection = {
-  connection: redisConfig,
-};
-
-export const generateQueue = (queueName, options) => {
-  const queue = new Queue(queueName, redisConnection);
-
-  queue.on('error', (error) => queueOnError(error, queueName));
-
-  if (options?.runDaily) addScheduler(queueName, queue);
-
-  return queue;
-};
-
-const queueOnError = (error, queueName) => {
-  if (error.code === CONNECTION_REFUSED) {
-    const errorMessage =
-      'Make sure you have installed Redis and it is running.';
-
-    logger.error(errorMessage, error);
-
-    process.exit();
-  }
-
-  logger.error(`Error happened in ${queueName} queue!`, error);
-};
-
-const addScheduler = (queueName, queue) => {
-  const everydayAtOneOclock = '0 1 * * *';
-
-  queue.add(queueName, null, {
-    jobId: queueName,
-    repeat: {
-      pattern: everydayAtOneOclock,
-    },
-  });
-};

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

@@ -1,8 +1,40 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
 
-const removeCancelledSubscriptionsQueue = generateQueue(
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const removeCancelledSubscriptionsQueue = new Queue(
   'remove-cancelled-subscriptions',
-  { runDaily: true }
+  redisConnection
 );
 
+removeCancelledSubscriptionsQueue.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 remove cancelled subscriptions queue!',
+    error
+  );
+});
+
+removeCancelledSubscriptionsQueue.add('remove-cancelled-subscriptions', null, {
+  jobId: 'remove-cancelled-subscriptions',
+  repeat: {
+    pattern: '0 1 * * *',
+  },
+});
+
 export default removeCancelledSubscriptionsQueue;

packages/backend/src/queues/trigger.js

@@ -1,4 +1,27 @@
-import { generateQueue } from './queue.js';
+import process from 'process';
+import { Queue } from 'bullmq';
+import redisConfig from '../config/redis.js';
+import logger from '../helpers/logger.js';
+
+const CONNECTION_REFUSED = 'ECONNREFUSED';
+
+const redisConnection = {
+  connection: redisConfig,
+};
+
+const triggerQueue = new Queue('trigger', redisConnection);
+
+triggerQueue.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 trigger queue!', error);
+});
 
-const triggerQueue = generateQueue('trigger');
 export default triggerQueue;

packages/e2e-tests/fixtures/admin/create-user-page.js

@@ -1,3 +1,5 @@
+const { expect } = require('@playwright/test');
+
 const { faker } = require('@faker-js/faker');
 const { AuthenticatedPage } = require('../authenticated-page');
 
@@ -11,11 +13,17 @@ export class AdminCreateUserPage extends AuthenticatedPage {
     super(page);
     this.fullNameInput = page.getByTestId('full-name-input');
     this.emailInput = page.getByTestId('email-input');
-    this.roleInput = page.getByTestId('role.id-autocomplete');
+    this.roleInput = page.getByTestId('roleId-autocomplete');
     this.createButton = page.getByTestId('create-button');
     this.pageTitle = page.getByTestId('create-user-title');
-    this.invitationEmailInfoAlert = page.getByTestId('invitation-email-info-alert');
+    this.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) {
@@ -28,4 +36,8 @@ export class AdminCreateUserPage extends AuthenticatedPage {
       email: faker.internet.email().toLowerCase(),
     };
   }
+
+  async expectCreateUserSuccessAlertToBeVisible() {
+    await expect(this.createUserSuccessAlert).toBeVisible();
+  }
 }

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

@@ -35,9 +35,8 @@ test.describe('Role management page', () => {
       await adminCreateRolePage.closeSnackbar();
     });
 
-    let roleRow = await test.step(
+    let roleRow =
-      'Make sure role data is correct',
+      await test.step('Make sure role data is correct', async () => {
-      async () => {
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Edit Test'
         );
@@ -48,8 +47,7 @@ test.describe('Role management page', () => {
         await expect(roleData.canEdit).toBe(true);
         await expect(roleData.canDelete).toBe(true);
         return roleRow;
-      }
+      });
-    );
 
     await test.step('Edit the role', async () => {
       await adminRolesPage.clickEditRole(roleRow);
@@ -67,9 +65,8 @@ test.describe('Role management page', () => {
       await adminEditRolePage.closeSnackbar();
     });
 
-    roleRow = await test.step(
+    roleRow =
-      'Make sure changes reflected on roles page',
+      await test.step('Make sure changes reflected on roles page', async () => {
-      async () => {
         await adminRolesPage.isMounted();
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Update Test'
@@ -81,8 +78,7 @@ test.describe('Role management page', () => {
         await expect(roleData.canEdit).toBe(true);
         await expect(roleData.canDelete).toBe(true);
         return roleRow;
-      }
+      });
-    );
 
     await test.step('Delete the role', async () => {
       await adminRolesPage.clickDeleteRole(roleRow);
@@ -184,49 +180,39 @@ test.describe('Role management page', () => {
       await expect(snackbar.variant).toBe('success');
       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 adminUsersPage.navigateTo();
       await adminUsersPage.usersLoader.waitFor({
@@ -301,24 +287,16 @@ test.describe('Role management page', () => {
         .getByRole('option', { name: 'Cannot Delete Role' })
         .click();
       await adminCreateUserPage.createButton.click();
-      await adminCreateUserPage.snackbar.waitFor({
-        state: 'attached',
-      });
       await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
         state: 'attached',
       });
-      const snackbar = await adminCreateUserPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-        'snackbar-create-user-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminCreateUserPage.closeSnackbar();
     });
     await test.step('Delete this user', async () => {
       await adminUsersPage.navigateTo();
       const row = await adminUsersPage.findUserPageWithEmail(
         'user-delete-role-test@automatisch.io'
       );
-      // await test.waitForTimeout(10000);
       const modal = await adminUsersPage.clickDeleteUser(row);
       await modal.deleteButton.click();
       await adminUsersPage.snackbar.waitFor({
@@ -385,17 +363,10 @@ test('Accessibility of role management page', async ({
       .getByRole('option', { name: 'Basic Test' })
       .click();
     await adminCreateUserPage.createButton.click();
-    await adminCreateUserPage.snackbar.waitFor({
-      state: 'attached',
-    });
     await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
       state: 'attached',
     });
-    const snackbar = await adminCreateUserPage.getSnackbarData(
+    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 () => {
@@ -409,42 +380,35 @@ test('Accessibility of role management page', async ({
     await page.getByTestId('logout-item').click();
 
     const acceptInvitationPage = new AcceptInvitation(page);
-
     await acceptInvitationPage.open(acceptInvitatonToken);
-
     await acceptInvitationPage.acceptInvitation('sample');
 
     const loginPage = new LoginPage(page);
-
-    // await loginPage.isMounted();
     await loginPage.login('basic-role-test@automatisch.io', 'sample');
     await expect(loginPage.loginButton).not.toBeVisible();
     await expect(page).toHaveURL('/flows');
   });
 
-  await test.step(
+  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 page.goto('/');

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

@@ -5,281 +5,221 @@ const { test, expect } = require('../../fixtures/index');
  * otherwise tests will fail since users are only *soft*-deleted
  */
 test.describe('User management page', () => {
-
   test.beforeEach(async ({ adminUsersPage }) => {
     await adminUsersPage.navigateTo();
     await adminUsersPage.closeSnackbar();
   });
 
-  test(
+  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
         notistack, see
         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);
-        }
-      );
-    }
-  );
 });

packages/e2e-tests/tests/flow-editor/create-flow.spec.js

@@ -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({
-          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
-          .getByTestId('unpublish-flow-from-snackbar')
+          .getByRole('option')
+          .filter({ hasText: 'Add new connection' })
           .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({
-          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');
+    });
+  });
+});

packages/e2e-tests/tests/my-profile/profile-updates.spec.js

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

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

@@ -1,10 +1,19 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import MuiContainer from '@mui/material/Container';
 
-export default function Container(props) {
+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,
+  ]),
 };

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

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

packages/web/src/helpers/errors.js

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

packages/web/src/locales/en.json

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

packages/web/src/pages/CreateRole/index.ee.jsx

@@ -1,10 +1,14 @@
 import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
 import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
 
 import Container from 'components/Container';
 import Form from 'components/Form';
@@ -15,10 +19,45 @@ import {
   getComputedPermissionsDefaultValues,
   getPermissions,
 } from 'helpers/computePermissions.ee';
+import { getGeneralErrorMessage } from 'helpers/errors';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminCreateRole from 'hooks/useAdminCreateRole';
 import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
 
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('roleForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    name: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('roleForm.name')),
+    description: yup.string().trim(),
+  });
+};
+
+const getPermissionsErrorMessage = (error) => {
+  const errors = error?.response?.data?.errors;
+
+  if (errors) {
+    const permissionsErrors = Object.keys(errors)
+      .filter((key) => key.startsWith('permissions'))
+      .reduce((obj, key) => {
+        obj[key] = errors[key];
+        return obj;
+      }, {});
+
+    if (Object.keys(permissionsErrors).length > 0) {
+      return JSON.stringify(permissionsErrors, null, 2);
+    }
+  }
+
+  return null;
+};
+
 export default function CreateRole() {
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
@@ -41,7 +80,7 @@ export default function CreateRole() {
     [permissionCatalogData],
   );
 
-  const handleRoleCreation = async (roleData) => {
+  const handleRoleCreation = async (roleData, e, setError) => {
     try {
       const permissions = getPermissions(roleData.computedPermissions);
 
@@ -60,14 +99,38 @@ export default function CreateRole() {
 
       navigate(URLS.ROLES);
     } catch (error) {
-      const errors = Object.values(error.response.data.errors);
+      const errors = error?.response?.data?.errors;
 
-      for (const [errorMessage] of errors) {
+      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 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>
     </Container>

packages/web/src/pages/CreateUser/index.jsx

@@ -3,9 +3,10 @@ import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Alert from '@mui/material/Alert';
 import MuiTextField from '@mui/material/TextField';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -16,50 +17,94 @@ import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
 import useAdminCreateUser from 'hooks/useAdminCreateUser';
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+import { getGeneralErrorMessage } from 'helpers/errors';
 
 function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
 
+const getValidationSchema = (formatMessage, canUpdateRole) => {
+  const getMandatoryFieldMessage = (fieldTranslationId) =>
+    formatMessage('userForm.mandatoryInput', {
+      inputName: formatMessage(fieldTranslationId),
+    });
+
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryFieldMessage('userForm.fullName')),
+    email: yup
+      .string()
+      .trim()
+      .email(formatMessage('userForm.validateEmail'))
+      .required(getMandatoryFieldMessage('userForm.email')),
+    ...(canUpdateRole
+      ? {
+          roleId: yup
+            .string()
+            .required(getMandatoryFieldMessage('userForm.role')),
+        }
+      : {}),
+  });
+};
+
+const defaultValues = {
+  fullName: '',
+  email: '',
+  roleId: '',
+};
+
 export default function CreateUser() {
   const formatMessage = useFormatMessage();
   const {
     mutateAsync: createUser,
     isPending: isCreateUserPending,
     data: createdUser,
+    isSuccess: createUserSuccess,
   } = useAdminCreateUser();
   const { data: rolesData, loading: isRolesLoading } = useRoles();
   const roles = rolesData?.data;
-  const enqueueSnackbar = useEnqueueSnackbar();
   const queryClient = useQueryClient();
+  const currentUserAbility = useCurrentUserAbility();
+  const canUpdateRole = currentUserAbility.can('update', 'Role');
 
-  const handleUserCreation = async (userData) => {
+  const handleUserCreation = async (userData, e, setError) => {
     try {
       await createUser({
         fullName: userData.fullName,
         email: userData.email,
-        roleId: userData.role?.id,
+        roleId: userData.roleId,
       });
 
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-
-      enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
-        variant: 'success',
-        persist: true,
-        SnackbarProps: {
-          'data-test': 'snackbar-create-user-success',
-        },
-      });
     } catch (error) {
-      enqueueSnackbar(formatMessage('createUser.error'), {
+      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 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
-                  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"
-                  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>
     </Container>