chore: temporarily enable e2e tests

- auth clients are always shared, cannot be disabled
- custom connections are enabled by default, can be disabled
- any existing connections can be reconnected regardless of its AppConfig or AppAuthClient states

.github/workflows/playwright.yml

@@ -4,12 +4,12 @@ on:
     branches:
       - main
   # TODO: Add pull request after optimizing the total excecution time of the test suite.
-  # pull_request:
+  pull_request:
-  #   paths:
+    paths:
-  #     - 'packages/backend/**'
+      - 'packages/backend/**'
-  #     - 'packages/e2e-tests/**'
+      - 'packages/e2e-tests/**'
-  #     - 'packages/web/**'
+      - 'packages/web/**'
-  #     - '!packages/backend/src/apps/**'
+      - '!packages/backend/src/apps/**'
   workflow_dispatch:
 
 env:

packages/backend/src/controllers/api/v1/admin/apps/create-config.ee.js

@@ -10,12 +10,11 @@ export default async (request, response) => {
 };
 
 const appConfigParams = (request) => {
-  const { customConnectionAllowed, shared, disabled } = request.body;
+  const { useOnlyPredefinedAuthClients, disabled } = request.body;
 
   return {
     key: request.params.appKey,
-    customConnectionAllowed,
+    useOnlyPredefinedAuthClients,
-    shared,
     disabled,
   };
 };

packages/backend/src/controllers/api/v1/admin/apps/create-config.ee.test.js

@@ -23,8 +23,7 @@ describe('POST /api/v1/admin/apps/:appKey/config', () => {
 
   it('should return created app config', async () => {
     const appConfig = {
-      customConnectionAllowed: true,
+      useOnlyPredefinedAuthClients: false,
-      shared: true,
       disabled: false,
     };
 
@@ -38,14 +37,14 @@ describe('POST /api/v1/admin/apps/:appKey/config', () => {
       ...appConfig,
       key: 'gitlab',
     });
+
     expect(response.body).toMatchObject(expectedPayload);
   });
 
   it('should return HTTP 422 for already existing app config', async () => {
     const appConfig = {
       key: 'gitlab',
-      customConnectionAllowed: true,
+      useOnlyPredefinedAuthClients: false,
-      shared: true,
       disabled: false,
     };
 

packages/backend/src/controllers/api/v1/admin/apps/update-config.ee.js

@@ -17,11 +17,10 @@ export default async (request, response) => {
 };
 
 const appConfigParams = (request) => {
-  const { customConnectionAllowed, shared, disabled } = request.body;
+  const { useOnlyPredefinedAuthClients, disabled } = request.body;
 
   return {
-    customConnectionAllowed,
+    useOnlyPredefinedAuthClients,
-    shared,
     disabled,
   };
 };

packages/backend/src/controllers/api/v1/admin/apps/update-config.ee.test.js

@@ -24,17 +24,15 @@ describe('PATCH /api/v1/admin/apps/:appKey/config', () => {
   it('should return updated app config', async () => {
     const appConfig = {
       key: 'gitlab',
-      customConnectionAllowed: true,
+      useOnlyPredefinedAuthClients: true,
-      shared: true,
       disabled: false,
     };
 
     await createAppConfig(appConfig);
 
     const newAppConfigValues = {
-      shared: false,
       disabled: true,
-      customConnectionAllowed: false,
+      useOnlyPredefinedAuthClients: false,
     };
 
     const response = await request(app)
@@ -53,9 +51,8 @@ describe('PATCH /api/v1/admin/apps/:appKey/config', () => {
 
   it('should return not found response for unexisting app config', async () => {
     const appConfig = {
-      shared: false,
       disabled: true,
-      customConnectionAllowed: false,
+      useOnlyPredefinedAuthClients: false,
     };
 
     await request(app)
@@ -68,8 +65,7 @@ describe('PATCH /api/v1/admin/apps/:appKey/config', () => {
   it('should return HTTP 422 for invalid app config data', async () => {
     const appConfig = {
       key: 'gitlab',
-      customConnectionAllowed: true,
+      useOnlyPredefinedAuthClients: true,
-      shared: true,
       disabled: false,
     };
 

packages/backend/src/controllers/api/v1/apps/create-connection.test.js

@@ -155,7 +155,7 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        customConnectionAllowed: true,
+        useOnlyPredefinedAuthClients: false,
       });
     });
 
@@ -218,7 +218,7 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        customConnectionAllowed: false,
+        useOnlyPredefinedAuthClients: true,
       });
     });
 
@@ -266,14 +266,14 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
     });
   });
 
-  describe('with auth clients enabled', async () => {
+  describe('with auth client enabled', async () => {
     let appAuthClient;
 
     beforeEach(async () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        shared: true,
+        useOnlyPredefinedAuthClients: false,
       });
 
       appAuthClient = await createAppAuthClient({
@@ -310,19 +310,6 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
       expect(response.body).toStrictEqual(expectedPayload);
     });
 
-    it('should return not authorized response for appAuthClientId and formattedData together', async () => {
-      const connectionData = {
-        appAuthClientId: appAuthClient.id,
-        formattedData: {},
-      };
-
-      await request(app)
-        .post('/api/v1/apps/gitlab/connections')
-        .set('Authorization', token)
-        .send(connectionData)
-        .expect(403);
-    });
-
     it('should return not found response for invalid app key', async () => {
       await request(app)
         .post('/api/v1/apps/invalid-app-key/connections')
@@ -349,18 +336,20 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
       });
     });
   });
-  describe('with auth clients disabled', async () => {
+
+  describe('with auth client disabled', async () => {
     let appAuthClient;
 
     beforeEach(async () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        shared: false,
+        useOnlyPredefinedAuthClients: false,
       });
 
       appAuthClient = await createAppAuthClient({
         appKey: 'gitlab',
+        active: false,
       });
     });
 
@@ -373,7 +362,7 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
         .post('/api/v1/apps/gitlab/connections')
         .set('Authorization', token)
         .send(connectionData)
-        .expect(403);
+        .expect(404);
     });
 
     it('should return not found response for invalid app key', async () => {

packages/backend/src/controllers/api/v1/apps/get-config.ee.test.js

@@ -17,8 +17,7 @@ describe('GET /api/v1/apps/:appKey/config', () => {
 
     appConfig = await createAppConfig({
       key: 'deepl',
-      customConnectionAllowed: true,
+      useOnlyPredefinedAuthClients: false,
-      shared: true,
       disabled: false,
     });
 

packages/backend/src/controllers/api/v1/connections/reset-connection.test.js

@@ -47,7 +47,6 @@ describe('POST /api/v1/connections/:connectionId/reset', () => {
 
     const expectedPayload = resetConnectionMock({
       ...refetchedCurrentUserConnection,
-      reconnectable: refetchedCurrentUserConnection.reconnectable,
       formattedData: {
         screenName: 'Connection name',
       },

packages/backend/src/controllers/api/v1/connections/update-connection.test.js

@@ -55,10 +55,9 @@ describe('PATCH /api/v1/connections/:connectionId', () => {
 
     const refetchedCurrentUserConnection = await currentUserConnection.$query();
 
-    const expectedPayload = updateConnectionMock({
+    const expectedPayload = updateConnectionMock(
-      ...refetchedCurrentUserConnection,
+      refetchedCurrentUserConnection
-      reconnectable: refetchedCurrentUserConnection.reconnectable,
+    );
-    });
 
     expect(response.body).toStrictEqual(expectedPayload);
   });

packages/backend/src/db/migrations/20241204103153_add_use_only_predefined_auth_clients_in_app_config.js

@@ -0,0 +1,11 @@
+export async function up(knex) {
+  return await knex.schema.alterTable('app_configs', (table) => {
+    table.boolean('use_only_predefined_auth_clients').defaultTo(false);
+  });
+}
+
+export async function down(knex) {
+  return await knex.schema.alterTable('app_configs', (table) => {
+    table.dropColumn('use_only_predefined_auth_clients');
+  });
+}

packages/backend/src/db/migrations/20241204103355_remove_obsolete_fields_in_app_config.js

@@ -0,0 +1,15 @@
+export async function up(knex) {
+  return await knex.schema.alterTable('app_configs', (table) => {
+    table.dropColumn('shared');
+    table.dropColumn('connection_allowed');
+    table.dropColumn('custom_connection_allowed');
+  });
+}
+
+export async function down(knex) {
+  return await knex.schema.alterTable('app_configs', (table) => {
+    table.boolean('shared').defaultTo(false);
+    table.boolean('connection_allowed').defaultTo(false);
+    table.boolean('custom_connection_allowed').defaultTo(false);
+  });
+}

packages/backend/src/models/__snapshots__/app-config.test.js.snap

@@ -3,17 +3,9 @@
 exports[`AppConfig model > jsonSchema should have correct validations 1`] = `
 {
   "properties": {
-    "connectionAllowed": {
-      "default": false,
-      "type": "boolean",
-    },
     "createdAt": {
       "type": "string",
     },
-    "customConnectionAllowed": {
-      "default": false,
-      "type": "boolean",
-    },
     "disabled": {
       "default": false,
       "type": "boolean",
@@ -25,13 +17,13 @@ exports[`AppConfig model > jsonSchema should have correct validations 1`] = `
     "key": {
       "type": "string",
     },
-    "shared": {
-      "default": false,
-      "type": "boolean",
-    },
     "updatedAt": {
       "type": "string",
     },
+    "useOnlyPredefinedAuthClients": {
+      "default": false,
+      "type": "boolean",
+    },
   },
   "required": [
     "key",

packages/backend/src/models/app-auth-client.js

@@ -60,39 +60,26 @@ class AppAuthClient extends Base {
     return this.authDefaults ? true : false;
   }
 
-  async triggerAppConfigUpdate() {
-    const appConfig = await this.$relatedQuery('appConfig');
-
-    // This is a workaround to update connection allowed column for AppConfig
-    await appConfig?.$query().patch({
-      key: appConfig.key,
-      shared: appConfig.shared,
-      disabled: appConfig.disabled,
-    });
-  }
-
   // TODO: Make another abstraction like beforeSave instead of using
   // beforeInsert and beforeUpdate separately for the same operation.
   async $beforeInsert(queryContext) {
     await super.$beforeInsert(queryContext);
+
     this.encryptData();
   }
 
   async $afterInsert(queryContext) {
     await super.$afterInsert(queryContext);
-
-    await this.triggerAppConfigUpdate();
   }
 
   async $beforeUpdate(opt, queryContext) {
     await super.$beforeUpdate(opt, queryContext);
+
     this.encryptData();
   }
 
   async $afterUpdate(opt, queryContext) {
     await super.$afterUpdate(opt, queryContext);
-
-    await this.triggerAppConfigUpdate();
   }
 
   async $afterFind() {

packages/backend/src/models/app-auth-client.test.js

@@ -7,7 +7,6 @@ import AppAuthClient from './app-auth-client.js';
 import Base from './base.js';
 import appConfig from '../config/app.js';
 import { createAppAuthClient } from '../../test/factories/app-auth-client.js';
-import { createAppConfig } from '../../test/factories/app-config.js';
 
 describe('AppAuthClient model', () => {
   it('tableName should return correct name', () => {
@@ -164,63 +163,6 @@ describe('AppAuthClient model', () => {
     });
   });
 
-  describe('triggerAppConfigUpdate', () => {
-    it('should trigger an update in related app config', async () => {
-      await createAppConfig({ key: 'gitlab' });
-
-      const appAuthClient = await createAppAuthClient({
-        appKey: 'gitlab',
-      });
-
-      const appConfigBeforeUpdateSpy = vi.spyOn(
-        AppConfig.prototype,
-        '$beforeUpdate'
-      );
-
-      await appAuthClient.triggerAppConfigUpdate();
-
-      expect(appConfigBeforeUpdateSpy).toHaveBeenCalledOnce();
-    });
-
-    it('should update related AppConfig after creating an instance', async () => {
-      const appConfig = await createAppConfig({
-        key: 'gitlab',
-        disabled: false,
-        shared: true,
-      });
-
-      await createAppAuthClient({
-        appKey: 'gitlab',
-        active: true,
-      });
-
-      const refetchedAppConfig = await appConfig.$query();
-
-      expect(refetchedAppConfig.connectionAllowed).toBe(true);
-    });
-
-    it('should update related AppConfig after updating an instance', async () => {
-      const appConfig = await createAppConfig({
-        key: 'gitlab',
-        disabled: false,
-        shared: true,
-      });
-
-      const appAuthClient = await createAppAuthClient({
-        appKey: 'gitlab',
-        active: false,
-      });
-
-      let refetchedAppConfig = await appConfig.$query();
-      expect(refetchedAppConfig.connectionAllowed).toBe(false);
-
-      await appAuthClient.$query().patchAndFetch({ active: true });
-
-      refetchedAppConfig = await appConfig.$query();
-      expect(refetchedAppConfig.connectionAllowed).toBe(true);
-    });
-  });
-
   it('$beforeInsert should call AppAuthClient.encryptData', async () => {
     const appAuthClientBeforeInsertSpy = vi.spyOn(
       AppAuthClient.prototype,
@@ -232,17 +174,6 @@ describe('AppAuthClient model', () => {
     expect(appAuthClientBeforeInsertSpy).toHaveBeenCalledOnce();
   });
 
-  it('$afterInsert should call AppAuthClient.triggerAppConfigUpdate', async () => {
-    const appAuthClientAfterInsertSpy = vi.spyOn(
-      AppAuthClient.prototype,
-      'triggerAppConfigUpdate'
-    );
-
-    await createAppAuthClient();
-
-    expect(appAuthClientAfterInsertSpy).toHaveBeenCalledOnce();
-  });
-
   it('$beforeUpdate should call AppAuthClient.encryptData', async () => {
     const appAuthClient = await createAppAuthClient();
 
@@ -256,19 +187,6 @@ describe('AppAuthClient model', () => {
     expect(appAuthClientBeforeUpdateSpy).toHaveBeenCalledOnce();
   });
 
-  it('$afterUpdate should call AppAuthClient.triggerAppConfigUpdate', async () => {
-    const appAuthClient = await createAppAuthClient();
-
-    const appAuthClientAfterUpdateSpy = vi.spyOn(
-      AppAuthClient.prototype,
-      'triggerAppConfigUpdate'
-    );
-
-    await appAuthClient.$query().patchAndFetch({ name: 'sample' });
-
-    expect(appAuthClientAfterUpdateSpy).toHaveBeenCalledOnce();
-  });
-
   it('$afterFind should call AppAuthClient.decryptData', async () => {
     const appAuthClient = await createAppAuthClient();
 

packages/backend/src/models/app-config.js

@@ -16,9 +16,7 @@ class AppConfig extends Base {
     properties: {
       id: { type: 'string', format: 'uuid' },
       key: { type: 'string' },
-      connectionAllowed: { type: 'boolean', default: false },
+      useOnlyPredefinedAuthClients: { type: 'boolean', default: false },
-      customConnectionAllowed: { type: 'boolean', default: false },
-      shared: { type: 'boolean', default: false },
       disabled: { type: 'boolean', default: false },
       createdAt: { type: 'string' },
       updatedAt: { type: 'string' },
@@ -41,39 +39,6 @@ class AppConfig extends Base {
 
     return await App.findOneByKey(this.key);
   }
-
-  async computeAndAssignConnectionAllowedProperty() {
-    this.connectionAllowed = await this.computeConnectionAllowedProperty();
-  }
-
-  async computeConnectionAllowedProperty() {
-    const appAuthClients = await this.$relatedQuery('appAuthClients');
-
-    const hasSomeActiveAppAuthClients =
-      appAuthClients?.some((appAuthClient) => appAuthClient.active) || false;
-
-    const conditions = [
-      hasSomeActiveAppAuthClients,
-      this.shared,
-      !this.disabled,
-    ];
-
-    const connectionAllowed = conditions.every(Boolean);
-
-    return connectionAllowed;
-  }
-
-  async $beforeInsert(queryContext) {
-    await super.$beforeInsert(queryContext);
-
-    await this.computeAndAssignConnectionAllowedProperty();
-  }
-
-  async $beforeUpdate(opt, queryContext) {
-    await super.$beforeUpdate(opt, queryContext);
-
-    await this.computeAndAssignConnectionAllowedProperty();
-  }
 }
 
 export default AppConfig;

packages/backend/src/models/app-config.test.js

@@ -1,11 +1,9 @@
-import { vi, describe, it, expect } from 'vitest';
+import { describe, it, expect } from 'vitest';
 
 import Base from './base.js';
 import AppConfig from './app-config.js';
 import App from './app.js';
 import AppAuthClient from './app-auth-client.js';
-import { createAppConfig } from '../../test/factories/app-config.js';
-import { createAppAuthClient } from '../../test/factories/app-auth-client.js';
 
 describe('AppConfig model', () => {
   it('tableName should return correct name', () => {
@@ -55,126 +53,4 @@ describe('AppConfig model', () => {
       expect(app).toStrictEqual(expectedApp);
     });
   });
-
-  describe('computeAndAssignConnectionAllowedProperty', () => {
-    it('should call computeConnectionAllowedProperty and assign the result', async () => {
-      const appConfig = await createAppConfig();
-
-      const computeConnectionAllowedPropertySpy = vi
-        .spyOn(appConfig, 'computeConnectionAllowedProperty')
-        .mockResolvedValue(true);
-
-      await appConfig.computeAndAssignConnectionAllowedProperty();
-
-      expect(computeConnectionAllowedPropertySpy).toHaveBeenCalled();
-      expect(appConfig.connectionAllowed).toBe(true);
-    });
-  });
-
-  describe('computeConnectionAllowedProperty', () => {
-    it('should return true when app is enabled, shared and allows custom connection with an active app auth client', async () => {
-      await createAppAuthClient({
-        appKey: 'deepl',
-        active: true,
-      });
-
-      await createAppAuthClient({
-        appKey: 'deepl',
-        active: false,
-      });
-
-      const appConfig = await createAppConfig({
-        disabled: false,
-        customConnectionAllowed: true,
-        shared: true,
-        key: 'deepl',
-      });
-
-      const connectionAllowed =
-        await appConfig.computeConnectionAllowedProperty();
-
-      expect(connectionAllowed).toBe(true);
-    });
-
-    it('should return false if there is no active app auth client', async () => {
-      await createAppAuthClient({
-        appKey: 'deepl',
-        active: false,
-      });
-
-      const appConfig = await createAppConfig({
-        disabled: false,
-        customConnectionAllowed: true,
-        shared: true,
-        key: 'deepl',
-      });
-
-      const connectionAllowed =
-        await appConfig.computeConnectionAllowedProperty();
-
-      expect(connectionAllowed).toBe(false);
-    });
-
-    it('should return false if there is no app auth clients', async () => {
-      const appConfig = await createAppConfig({
-        disabled: false,
-        customConnectionAllowed: true,
-        shared: true,
-        key: 'deepl',
-      });
-
-      const connectionAllowed =
-        await appConfig.computeConnectionAllowedProperty();
-
-      expect(connectionAllowed).toBe(false);
-    });
-
-    it('should return false when app is disabled', async () => {
-      const appConfig = await createAppConfig({
-        disabled: true,
-        customConnectionAllowed: true,
-      });
-
-      const connectionAllowed =
-        await appConfig.computeConnectionAllowedProperty();
-
-      expect(connectionAllowed).toBe(false);
-    });
-
-    it(`should return false when app doesn't allow custom connection`, async () => {
-      const appConfig = await createAppConfig({
-        disabled: false,
-        customConnectionAllowed: false,
-      });
-
-      const connectionAllowed =
-        await appConfig.computeConnectionAllowedProperty();
-
-      expect(connectionAllowed).toBe(false);
-    });
-  });
-
-  it('$beforeInsert should call computeAndAssignConnectionAllowedProperty', async () => {
-    const computeAndAssignConnectionAllowedPropertySpy = vi
-      .spyOn(AppConfig.prototype, 'computeAndAssignConnectionAllowedProperty')
-      .mockResolvedValue(true);
-
-    await createAppConfig();
-
-    expect(computeAndAssignConnectionAllowedPropertySpy).toHaveBeenCalledOnce();
-  });
-
-  it('$beforeUpdate should call computeAndAssignConnectionAllowedProperty', async () => {
-    const appConfig = await createAppConfig();
-
-    const computeAndAssignConnectionAllowedPropertySpy = vi
-      .spyOn(AppConfig.prototype, 'computeAndAssignConnectionAllowedProperty')
-      .mockResolvedValue(true);
-
-    await appConfig.$query().patch({
-      key: 'deepl',
-    });
-
-    expect(computeAndAssignConnectionAllowedPropertySpy).toHaveBeenCalledOnce();
-  });
 });

packages/backend/src/models/connection.js

@@ -33,10 +33,6 @@ class Connection extends Base {
     },
   };
 
-  static get virtualAttributes() {
-    return ['reconnectable'];
-  }
-
   static relationMappings = () => ({
     user: {
       relation: Base.BelongsToOneRelation,
@@ -83,18 +79,6 @@ class Connection extends Base {
     },
   });
 
-  get reconnectable() {
-    if (this.appAuthClientId) {
-      return this.appAuthClient.active;
-    }
-
-    if (this.appConfig) {
-      return !this.appConfig.disabled && this.appConfig.customConnectionAllowed;
-    }
-
-    return true;
-  }
-
   encryptData() {
     if (!this.eligibleForEncryption()) return;
 
@@ -144,19 +128,13 @@ class Connection extends Base {
         );
       }
 
-      if (!appConfig.customConnectionAllowed && this.formattedData) {
+      if (appConfig.useOnlyPredefinedAuthClients && this.formattedData) {
         throw new NotAuthorizedError(
           `New custom connections have been disabled for ${app.name}!`
         );
       }
 
-      if (!appConfig.shared && this.appAuthClientId) {
+      if (!this.formattedData) {
-        throw new NotAuthorizedError(
-          'The connection with the given app auth client is not allowed!'
-        );
-      }
-
-      if (appConfig.shared && !this.formattedData) {
         const authClient = await appConfig
           .$relatedQuery('appAuthClients')
           .findById(this.appAuthClientId)

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

@@ -23,14 +23,6 @@ describe('Connection model', () => {
     expect(Connection.jsonSchema).toMatchSnapshot();
   });
 
-  it('virtualAttributes should return correct attributes', () => {
-    const virtualAttributes = Connection.virtualAttributes;
-
-    const expectedAttributes = ['reconnectable'];
-
-    expect(virtualAttributes).toStrictEqual(expectedAttributes);
-  });
-
   describe('relationMappings', () => {
     it('should return correct associations', () => {
       const relationMappings = Connection.relationMappings();
@@ -92,78 +84,6 @@ describe('Connection model', () => {
     });
   });
 
-  describe('reconnectable', () => {
-    it('should return active status of app auth client when created via app auth client', async () => {
-      const appAuthClient = await createAppAuthClient({
-        active: true,
-        formattedAuthDefaults: {
-          clientId: 'sample-id',
-        },
-      });
-
-      const connection = await createConnection({
-        appAuthClientId: appAuthClient.id,
-        formattedData: {
-          token: 'sample-token',
-        },
-      });
-
-      const connectionWithAppAuthClient = await connection
-        .$query()
-        .withGraphFetched({
-          appAuthClient: true,
-        });
-
-      expect(connectionWithAppAuthClient.reconnectable).toBe(true);
-    });
-
-    it('should return true when app config is not disabled and allows custom connection', async () => {
-      const appConfig = await createAppConfig({
-        key: 'gitlab',
-        disabled: false,
-        customConnectionAllowed: true,
-      });
-
-      const connection = await createConnection({
-        key: appConfig.key,
-        formattedData: {
-          token: 'sample-token',
-        },
-      });
-
-      const connectionWithAppAuthClient = await connection
-        .$query()
-        .withGraphFetched({
-          appConfig: true,
-        });
-
-      expect(connectionWithAppAuthClient.reconnectable).toBe(true);
-    });
-
-    it('should return false when app config is disabled or does not allow custom connection', async () => {
-      const connection = await createConnection({
-        key: 'gitlab',
-        formattedData: {
-          token: 'sample-token',
-        },
-      });
-
-      await createAppConfig({
-        key: 'gitlab',
-        disabled: true,
-        customConnectionAllowed: false,
-      });
-
-      const connectionWithAppAuthClient = await connection
-        .$query()
-        .withGraphFetched({
-          appConfig: true,
-        });
-
-      expect(connectionWithAppAuthClient.reconnectable).toBe(false);
-    });
-  });
-
   describe('encryptData', () => {
     it('should return undefined if eligibleForEncryption is not true', async () => {
       vi.spyOn(Connection.prototype, 'eligibleForEncryption').mockReturnValue(
@@ -366,6 +286,7 @@ describe('Connection model', () => {
       );
     });
 
+    // TODO: update test case name
     it('should throw an error when app config does not allow custom connection with formatted data', async () => {
       vi.spyOn(Connection.prototype, 'getApp').mockResolvedValue({
         name: 'gitlab',
@@ -373,7 +294,7 @@ describe('Connection model', () => {
 
       vi.spyOn(Connection.prototype, 'getAppConfig').mockResolvedValue({
         disabled: false,
-        customConnectionAllowed: false,
+        useOnlyPredefinedAuthClients: true,
       });
 
       const connection = new Connection();
@@ -386,32 +307,10 @@ describe('Connection model', () => {
       );
     });
 
-    it('should throw an error when app config is not shared with app auth client', async () => {
-      vi.spyOn(Connection.prototype, 'getApp').mockResolvedValue({
-        name: 'gitlab',
-      });
-
-      vi.spyOn(Connection.prototype, 'getAppConfig').mockResolvedValue({
-        disabled: false,
-        shared: false,
-      });
-
-      const connection = new Connection();
-      connection.appAuthClientId = 'sample-id';
-
-      await expect(() =>
-        connection.checkEligibilityForCreation()
-      ).rejects.toThrow(
-        'The connection with the given app auth client is not allowed!'
-      );
-    });
-
     it('should apply app auth client auth defaults when creating with shared app auth client', async () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        customConnectionAllowed: true,
-        shared: true,
       });
 
       const appAuthClient = await createAppAuthClient({

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

@@ -376,7 +376,10 @@ describe('User model', () => {
       const anotherUserConnection = await createConnection();
 
       expect(
-        await userWithRoleAndPermissions.authorizedConnections
+        await userWithRoleAndPermissions.authorizedConnections.orderBy(
+          'created_at',
+          'asc'
+        )
       ).toStrictEqual([userConnection, anotherUserConnection]);
     });
 

packages/backend/src/serializers/app-config.js

@@ -1,10 +1,8 @@
 const appConfigSerializer = (appConfig) => {
   return {
     key: appConfig.key,
-    customConnectionAllowed: appConfig.customConnectionAllowed,
+    useOnlyPredefinedAuthClients: appConfig.useOnlyPredefinedAuthClients,
-    shared: appConfig.shared,
     disabled: appConfig.disabled,
-    connectionAllowed: appConfig.connectionAllowed,
     createdAt: appConfig.createdAt.getTime(),
     updatedAt: appConfig.updatedAt.getTime(),
   };

packages/backend/src/serializers/app-config.test.js

@@ -12,10 +12,8 @@ describe('appConfig serializer', () => {
   it('should return app config data', async () => {
     const expectedPayload = {
       key: appConfig.key,
-      customConnectionAllowed: appConfig.customConnectionAllowed,
+      useOnlyPredefinedAuthClients: appConfig.useOnlyPredefinedAuthClients,
-      shared: appConfig.shared,
       disabled: appConfig.disabled,
-      connectionAllowed: appConfig.connectionAllowed,
       createdAt: appConfig.createdAt.getTime(),
       updatedAt: appConfig.updatedAt.getTime(),
     };

packages/backend/src/serializers/auth.js

@@ -2,7 +2,9 @@ const authSerializer = (auth) => {
   return {
     fields: auth.fields,
     authenticationSteps: auth.authenticationSteps,
+    sharedAuthenticationSteps: auth.sharedAuthenticationSteps,
     reconnectionSteps: auth.reconnectionSteps,
+    sharedReconnectionSteps: auth.sharedReconnectionSteps,
   };
 };
 

packages/backend/src/serializers/auth.test.js

@@ -10,6 +10,8 @@ describe('authSerializer', () => {
       fields: auth.fields,
       authenticationSteps: auth.authenticationSteps,
       reconnectionSteps: auth.reconnectionSteps,
+      sharedAuthenticationSteps: auth.sharedAuthenticationSteps,
+      sharedReconnectionSteps: auth.sharedReconnectionSteps,
     };
 
     expect(authSerializer(auth)).toStrictEqual(expectedPayload);

packages/backend/src/serializers/connection.js

@@ -2,7 +2,6 @@ const connectionSerializer = (connection) => {
   return {
     id: connection.id,
     key: connection.key,
-    reconnectable: connection.reconnectable,
     appAuthClientId: connection.appAuthClientId,
     formattedData: {
       screenName: connection.formattedData.screenName,

packages/backend/src/serializers/connection.test.js

@@ -13,7 +13,6 @@ describe('connectionSerializer', () => {
     const expectedPayload = {
       id: connection.id,
       key: connection.key,
-      reconnectable: connection.reconnectable,
       appAuthClientId: connection.appAuthClientId,
       formattedData: {
         screenName: connection.formattedData.screenName,

packages/backend/test/mocks/rest/api/v1/admin/apps/create-config.js

@@ -2,8 +2,7 @@ const createAppConfigMock = (appConfig) => {
   return {
     data: {
       key: appConfig.key,
-      customConnectionAllowed: appConfig.customConnectionAllowed,
+      useOnlyPredefinedAuthClients: appConfig.useOnlyPredefinedAuthClients,
-      shared: appConfig.shared,
       disabled: appConfig.disabled,
     },
     meta: {

packages/backend/test/mocks/rest/api/v1/apps/create-connection.js

@@ -2,7 +2,6 @@ const createConnection = (connection) => {
   const connectionData = {
     id: connection.id,
     key: connection.key,
-    reconnectable: connection.reconnectable || true,
     appAuthClientId: connection.appAuthClientId,
     formattedData: connection.formattedData,
     verified: connection.verified || false,

packages/backend/test/mocks/rest/api/v1/apps/get-auth.js

@@ -4,6 +4,8 @@ const getAuthMock = (auth) => {
       fields: auth.fields,
       authenticationSteps: auth.authenticationSteps,
       reconnectionSteps: auth.reconnectionSteps,
+      sharedReconnectionSteps: auth.sharedReconnectionSteps,
+      sharedAuthenticationSteps: auth.sharedAuthenticationSteps,
     },
     meta: {
       count: 1,

packages/backend/test/mocks/rest/api/v1/apps/get-config.js

@@ -2,10 +2,8 @@ const getAppConfigMock = (appConfig) => {
   return {
     data: {
       key: appConfig.key,
-      customConnectionAllowed: appConfig.customConnectionAllowed,
+      useOnlyPredefinedAuthClients: appConfig.useOnlyPredefinedAuthClients,
-      shared: appConfig.shared,
       disabled: appConfig.disabled,
-      connectionAllowed: appConfig.connectionAllowed,
       createdAt: appConfig.createdAt.getTime(),
       updatedAt: appConfig.updatedAt.getTime(),
     },

packages/backend/test/mocks/rest/api/v1/apps/get-connections.js

@@ -3,7 +3,6 @@ const getConnectionsMock = (connections) => {
     data: connections.map((connection) => ({
       id: connection.id,
       key: connection.key,
-      reconnectable: connection.reconnectable,
       verified: connection.verified,
       appAuthClientId: connection.appAuthClientId,
       formattedData: {

packages/backend/test/mocks/rest/api/v1/connections/reset-connection.js

@@ -3,7 +3,6 @@ const resetConnectionMock = (connection) => {
     id: connection.id,
     key: connection.key,
     verified: connection.verified,
-    reconnectable: connection.reconnectable,
     appAuthClientId: connection.appAuthClientId,
     formattedData: {
       screenName: connection.formattedData.screenName,

packages/backend/test/mocks/rest/api/v1/connections/update-connection.js

@@ -3,7 +3,6 @@ const updateConnectionMock = (connection) => {
     id: connection.id,
     key: connection.key,
     verified: connection.verified,
-    reconnectable: connection.reconnectable,
     appAuthClientId: connection.appAuthClientId,
     formattedData: {
       screenName: connection.formattedData.screenName,

packages/backend/test/mocks/rest/api/v1/steps/get-connection.js

@@ -3,7 +3,6 @@ const getConnectionMock = async (connection) => {
     id: connection.id,
     key: connection.key,
     verified: connection.verified,
-    reconnectable: connection.reconnectable,
     appAuthClientId: connection.appAuthClientId,
     formattedData: {
       screenName: connection.formattedData.screenName,

packages/backend/vitest.config.js

@@ -16,10 +16,10 @@ export default defineConfig({
       include: ['**/src/models/**', '**/src/controllers/**'],
       thresholds: {
         autoUpdate: true,
-        statements: 93.41,
+        statements: 95.16,
-        branches: 93.46,
+        branches: 94.66,
-        functions: 95.95,
+        functions: 97.65,
-        lines: 93.41,
+        lines: 95.16,
       },
     },
   },

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

@@ -1,5 +1,3 @@
-const { expect } = require('@playwright/test');
-
 const { faker } = require('@faker-js/faker');
 const { AuthenticatedPage } = require('../authenticated-page');
 
@@ -13,17 +11,11 @@ export class AdminCreateUserPage extends AuthenticatedPage {
     super(page);
     this.fullNameInput = page.getByTestId('full-name-input');
     this.emailInput = page.getByTestId('email-input');
-    this.roleInput = page.getByTestId('roleId-autocomplete');
+    this.roleInput = page.getByTestId('role.id-autocomplete');
     this.createButton = page.getByTestId('create-button');
     this.pageTitle = page.getByTestId('create-user-title');
-    this.invitationEmailInfoAlert = page.getByTestId(
+    this.invitationEmailInfoAlert = page.getByTestId('invitation-email-info-alert');
-      'invitation-email-info-alert'
+    this.acceptInvitationLink = page.getByTestId('invitation-email-info-alert').getByRole('link');
-    );
-    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) {
@@ -36,8 +28,4 @@ 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,8 +35,9 @@ test.describe('Role management page', () => {
       await adminCreateRolePage.closeSnackbar();
     });
 
-    let roleRow =
+    let roleRow = await test.step(
-      await test.step('Make sure role data is correct', async () => {
+      'Make sure role data is correct',
+      async () => {
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Edit Test'
         );
@@ -47,7 +48,8 @@ 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);
@@ -65,8 +67,9 @@ test.describe('Role management page', () => {
       await adminEditRolePage.closeSnackbar();
     });
 
-    roleRow =
+    roleRow = await test.step(
-      await test.step('Make sure changes reflected on roles page', async () => {
+      'Make sure changes reflected on roles page',
+      async () => {
         await adminRolesPage.isMounted();
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Update Test'
@@ -78,7 +81,8 @@ 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);
@@ -180,39 +184,49 @@ test.describe('Role management page', () => {
       await expect(snackbar.variant).toBe('success');
       await adminCreateRolePage.closeSnackbar();
     });
-    await test.step('Create a new user with the "Delete Role" role', async () => {
+    await test.step(
-      await adminUsersPage.navigateTo();
+      'Create a new user with the "Delete Role" role',
-      await adminUsersPage.createUserButton.click();
+      async () => {
-      await adminCreateUserPage.fullNameInput.fill('User Role Test');
+        await adminUsersPage.navigateTo();
-      await adminCreateUserPage.emailInput.fill(
+        await adminUsersPage.createUserButton.click();
-        'user-role-test@automatisch.io'
+        await adminCreateUserPage.fullNameInput.fill('User Role Test');
-      );
+        await adminCreateUserPage.emailInput.fill(
-      await adminCreateUserPage.roleInput.click();
+          'user-role-test@automatisch.io'
-      await adminCreateUserPage.page
+        );
-        .getByRole('option', { name: 'Delete Role', exact: true })
+        await adminCreateUserPage.roleInput.click();
-        .click();
+        await adminCreateUserPage.page
-      await adminCreateUserPage.createButton.click();
+          .getByRole('option', { name: 'Delete Role', exact: true })
-      await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
+          .click();
-        state: 'attached',
+        await adminCreateUserPage.createButton.click();
-      });
+        await adminCreateUserPage.snackbar.waitFor({
-      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+          state: 'attached',
-    });
+        });
-
+        await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
-    await test.step('Try to delete "Delete Role" role when new user has it', async () => {
+          state: 'attached',
-      await adminRolesPage.navigateTo();
+        });
-      const row = await adminRolesPage.getRoleRowByName('Delete Role');
+        const snackbar = await adminUsersPage.getSnackbarData(
-      const modal = await adminRolesPage.clickDeleteRole(row);
+          'snackbar-create-user-success'
-      await modal.deleteButton.click();
+        );
-      await adminRolesPage.snackbar.waitFor({
+        await expect(snackbar.variant).toBe('success');
-        state: 'attached',
+        await adminUsersPage.closeSnackbar();
-      });
+      }
-      const snackbar = await adminRolesPage.getSnackbarData(
+    );
-        'snackbar-delete-role-error'
+    await test.step(
-      );
+      'Try to delete "Delete Role" role when new user has it',
-      await expect(snackbar.variant).toBe('error');
+      async () => {
-      await adminRolesPage.closeSnackbar();
+        await adminRolesPage.navigateTo();
-      await modal.close();
+        const row = await adminRolesPage.getRoleRowByName('Delete Role');
-    });
+        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({
@@ -287,16 +301,24 @@ 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',
       });
-      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+      const snackbar = await adminCreateUserPage.getSnackbarData(
+        '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({
@@ -363,10 +385,17 @@ 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',
     });
-    await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+    const snackbar = await adminCreateUserPage.getSnackbarData(
+      '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 () => {
@@ -380,35 +409,42 @@ test('Accessibility of role management page', async ({
     await page.getByTestId('logout-item').click();
 
     const acceptInvitationPage = new AcceptInvitation(page);
+
     await acceptInvitationPage.open(acceptInvitatonToken);
+
     await acceptInvitationPage.acceptInvitation('sample');
 
     const loginPage = new LoginPage(page);
+
+    // await loginPage.isMounted();
     await loginPage.login('basic-role-test@automatisch.io', 'sample');
     await expect(loginPage.loginButton).not.toBeVisible();
     await expect(page).toHaveURL('/flows');
   });
 
-  await test.step('Navigate to the admin settings page and make sure it is blank', async () => {
+  await test.step(
-    const pageUrl = new URL(page.url());
+    'Navigate to the admin settings page and make sure it is blank',
-    const url = `${pageUrl.origin}/admin-settings/users`;
+    async () => {
-    await page.goto(url);
+      const pageUrl = new URL(page.url());
-    await page.waitForTimeout(750);
+      const url = `${pageUrl.origin}/admin-settings/users`;
-    const isUnmounted = await page.evaluate(() => {
+      await page.goto(url);
-      // eslint-disable-next-line no-undef
+      await page.waitForTimeout(750);
-      const root = document.querySelector('#root');
+      const isUnmounted = await page.evaluate(() => {
+        // 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,221 +5,281 @@ const { test, expect } = require('../../fixtures/index');
  * otherwise tests will fail since users are only *soft*-deleted
  */
 test.describe('User management page', () => {
+
   test.beforeEach(async ({ adminUsersPage }) => {
     await adminUsersPage.navigateTo();
     await adminUsersPage.closeSnackbar();
   });
 
-  test('User creation and deletion process', async ({
+  test(
-    adminCreateUserPage,
+    'User creation and deletion process',
-    adminEditUserPage,
+    async ({ adminCreateUserPage, adminEditUserPage, adminUsersPage }) => {
-    adminUsersPage,
+      adminCreateUserPage.seed(9000);
-  }) => {
+      const user = adminCreateUserPage.generateUser();
-    adminCreateUserPage.seed(9000);
+      await adminUsersPage.usersLoader.waitFor({
-    const user = adminCreateUserPage.generateUser();
+        state: 'detached' /* Note: state: 'visible' introduces flakiness
-    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'
+          });
 
-      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+          const snackbar = await adminUsersPage.getSnackbarData(
-      await adminUsersPage.navigateTo();
+            'snackbar-create-user-success'
-    });
+          );
-    await test.step('Check the user exists with the expected properties', async () => {
+          await expect(snackbar.variant).toBe('success');
-      await adminUsersPage.findUserPageWithEmail(user.email);
+          await adminUsersPage.navigateTo();
-      const userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          await adminUsersPage.closeSnackbar();
-      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 expect(snackbar.variant).toBe('success');
+      await test.step(
-      await adminUsersPage.closeSnackbar();
+        'Check the user exists with the expected properties',
-
+        async () => {
-      await adminUsersPage.findUserPageWithEmail(user.email);
+          await adminUsersPage.findUserPageWithEmail(user.email);
-      userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          const userRow = await adminUsersPage.getUserRowByEmail(user.email);
-      const rowData = await adminUsersPage.getRowData(userRow);
+          const data = await adminUsersPage.getRowData(userRow);
-      await expect(rowData.fullName).toBe(newUserInfo.fullName);
+          await expect(data.email).toBe(user.email);
-    });
+          await expect(data.fullName).toBe(user.fullName);
-    await test.step('Delete user and check the page confirms this deletion', async () => {
+          await expect(data.role).toBe('Admin');
-      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 test.step(
-      await adminUsersPage.closeSnackbar();
+        'Edit user info and make sure the edit works correctly',
-      await expect(userRow).not.toBeVisible(false);
+        async () => {
-    });
+          await adminUsersPage.findUserPageWithEmail(user.email);
-  });
 
-  test('Creating a user which has been deleted', async ({
+          let userRow = await adminUsersPage.getUserRowByEmail(user.email);
-    adminCreateUserPage,
+          await adminUsersPage.clickEditUser(userRow);
-    adminUsersPage,
+          await adminEditUserPage.waitForLoad(user.fullName);
-  }) => {
+          const newUserInfo = adminEditUserPage.generateUser();
-    adminCreateUserPage.seed(9100);
+          await adminEditUserPage.fullNameInput.fill(newUserInfo.fullName);
-    const testUser = adminCreateUserPage.generateUser();
+          await adminEditUserPage.updateButton.click();
 
-    await test.step('Create the test user', async () => {
+          const snackbar = await adminUsersPage.getSnackbarData(
-      await adminUsersPage.navigateTo();
+            'snackbar-edit-user-success'
-      await adminUsersPage.createUserButton.click();
+          );
-      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await expect(snackbar.variant).toBe('success');
-      await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminUsersPage.closeSnackbar();
-      await adminCreateUserPage.roleInput.click();
-      await adminCreateUserPage.page
-        .getByRole('option', { name: 'Admin' })
-        .click();
-      await adminCreateUserPage.createButton.click();
-      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-    });
 
-    await test.step('Delete the created user', async () => {
+          await adminUsersPage.findUserPageWithEmail(user.email);
-      await adminUsersPage.navigateTo();
+          userRow = await adminUsersPage.getUserRowByEmail(user.email);
-      await adminUsersPage.findUserPageWithEmail(testUser.email);
+          const rowData = await adminUsersPage.getRowData(userRow);
-      const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
+          await expect(rowData.fullName).toBe(newUserInfo.fullName);
-      await adminUsersPage.clickDeleteUser(userRow);
+        }
-      const modal = adminUsersPage.deleteUserModal;
+      );
-      await modal.deleteButton.click();
+      await test.step(
-      const snackbar = await adminUsersPage.getSnackbarData(
+        'Delete user and check the page confirms this deletion',
-        'snackbar-delete-user-success'
+        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);
+        }
       );
-      await expect(snackbar).not.toBeNull();
-      await expect(snackbar.variant).toBe('success');
-      await adminUsersPage.closeSnackbar();
-      await expect(userRow).not.toBeVisible(false);
     });
 
-    await test.step('Create the user again', async () => {
+  test(
-      await adminUsersPage.createUserButton.click();
+    'Creating a user which has been deleted',
-      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+    async ({ adminCreateUserPage, adminUsersPage }) => {
-      await adminCreateUserPage.emailInput.fill(testUser.email);
+      adminCreateUserPage.seed(9100);
-      await adminCreateUserPage.roleInput.click();
+      const testUser = adminCreateUserPage.generateUser();
-      await adminCreateUserPage.page
-        .getByRole('option', { name: 'Admin' })
-        .click();
-      await adminCreateUserPage.createButton.click();
-      await expect(adminCreateUserPage.fieldError).toHaveCount(1);
-    });
-  });
 
-  test('Creating a user which already exists', async ({
+      await test.step(
-    adminCreateUserPage,
+        'Create the test user',
-    adminUsersPage,
+        async () => {
-    page,
+          await adminUsersPage.navigateTo();
-  }) => {
+          await adminUsersPage.createUserButton.click();
-    adminCreateUserPage.seed(9200);
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
-    const testUser = adminCreateUserPage.generateUser();
+          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 test.step('Create the test user', async () => {
+      await test.step(
-      await adminUsersPage.createUserButton.click();
+        'Delete the created user',
-      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+        async () => {
-      await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminUsersPage.navigateTo();
-      await adminCreateUserPage.roleInput.click();
+          await adminUsersPage.findUserPageWithEmail(testUser.email);
-      await adminCreateUserPage.page
+          const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
-        .getByRole('option', { name: 'Admin' })
+          await adminUsersPage.clickDeleteUser(userRow);
-        .click();
+          const modal = adminUsersPage.deleteUserModal;
-      await adminCreateUserPage.createButton.click();
+          await modal.deleteButton.click();
-      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+          const snackbar = await adminUsersPage.getSnackbarData(
-    });
+            '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('Create the user again', async () => {
+      await test.step(
-      await adminUsersPage.navigateTo();
+        'Create the user again',
-      await adminUsersPage.createUserButton.click();
+        async () => {
-      await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminUsersPage.createUserButton.click();
-      await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
-      const createUserPageUrl = page.url();
+          await adminCreateUserPage.emailInput.fill(testUser.email);
-      await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.roleInput.click();
-      await adminCreateUserPage.page
+          await adminCreateUserPage.page.getByRole(
-        .getByRole('option', { name: 'Admin' })
+            'option', { name: 'Admin' }
-        .click();
+          ).click();
-      await adminCreateUserPage.createButton.click();
+          await adminCreateUserPage.createButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
+          await expect(snackbar.variant).toBe('error');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+    }
+  );
 
-      await expect(page.url()).toBe(createUserPageUrl);
+  test(
-      await expect(adminCreateUserPage.fieldError).toHaveCount(1);
+    'Creating a user which already exists',
-    });
+    async ({ adminCreateUserPage, adminUsersPage, page }) => {
-  });
+      adminCreateUserPage.seed(9200);
+      const testUser = adminCreateUserPage.generateUser();
 
-  test('Editing a user to have the same email as another user should not be allowed', async ({
+      await test.step(
-    adminCreateUserPage,
+        'Create the test user',
-    adminEditUserPage,
+        async () => {
-    adminUsersPage,
+          await adminUsersPage.createUserButton.click();
-    page,
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
-  }) => {
+          await adminCreateUserPage.emailInput.fill(testUser.email);
-    adminCreateUserPage.seed(9300);
+          await adminCreateUserPage.roleInput.click();
-    const user1 = adminCreateUserPage.generateUser();
+          await adminCreateUserPage.page.getByRole(
-    const user2 = adminCreateUserPage.generateUser();
+            'option', { name: 'Admin' }
-    await test.step('Create the first user', async () => {
+          ).click();
-      await adminUsersPage.navigateTo();
+          await adminCreateUserPage.createButton.click();
-      await adminUsersPage.createUserButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
-      await adminCreateUserPage.fullNameInput.fill(user1.fullName);
+            'snackbar-create-user-success'
-      await adminCreateUserPage.emailInput.fill(user1.email);
+          );
-      await adminCreateUserPage.roleInput.click();
+          await expect(snackbar.variant).toBe('success');
-      await adminCreateUserPage.page
+          await adminUsersPage.closeSnackbar();
-        .getByRole('option', { name: 'Admin' })
+        }
-        .click();
+      );
-      await adminCreateUserPage.createButton.click();
-      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-    });
 
-    await test.step('Create the second user', async () => {
+      await test.step(
-      await adminUsersPage.navigateTo();
+        'Create the user again',
-      await adminUsersPage.createUserButton.click();
+        async () => {
-      await adminCreateUserPage.fullNameInput.fill(user2.fullName);
+          await adminUsersPage.navigateTo();
-      await adminCreateUserPage.emailInput.fill(user2.email);
+          await adminUsersPage.createUserButton.click();
-      await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
-      await adminCreateUserPage.page
+          await adminCreateUserPage.emailInput.fill(testUser.email);
-        .getByRole('option', { name: 'Admin' })
+          const createUserPageUrl = page.url();
-        .click();
+          await adminCreateUserPage.roleInput.click();
-      await adminCreateUserPage.createButton.click();
+          await adminCreateUserPage.page.getByRole(
-      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+            'option', { name: 'Admin' }
-    });
+          ).click();
+          await adminCreateUserPage.createButton.click();
 
-    await test.step('Try editing the second user to have the email of the first user', async () => {
+          await expect(page.url()).toBe(createUserPageUrl);
-      await adminUsersPage.navigateTo();
+          const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
-      await adminUsersPage.findUserPageWithEmail(user2.email);
+          await expect(snackbar.variant).toBe('error');
-      let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
+          await adminUsersPage.closeSnackbar();
-      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');
+  test(
-      await expect(snackbar.variant).toBe('error');
+    'Editing a user to have the same email as another user should not be allowed',
-      await adminUsersPage.closeSnackbar();
+    async ({
-      await expect(page.url()).toBe(editPageUrl);
+      adminCreateUserPage, adminEditUserPage, 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();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-create-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Create the second user',
+        async () => {
+          await adminUsersPage.navigateTo();
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(user2.fullName);
+          await adminCreateUserPage.emailInput.fill(user2.email);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-create-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Try editing the second user to have the email of the first user',
+        async () => {
+          await adminUsersPage.navigateTo();
+          await adminUsersPage.findUserPageWithEmail(user2.email);
+          let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
+          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,191 +7,198 @@ test('Ensure creating a new flow works', async ({ page }) => {
   );
 });
 
-test('Create a new flow with a Scheduler step then an Ntfy step', async ({
+test(
-  flowEditorPage,
+  'Create a new flow with a Scheduler step then an Ntfy step',
-  page,
+  async ({ flowEditorPage, page }) => {
-}) => {
+    await test.step('create flow', async () => {
-  await test.step('create flow', async () => {
+      await test.step('navigate to new flow page', async () => {
-    await test.step('navigate to new flow page', async () => {
+        await page.getByTestId('create-flow-button').click();
-      await page.getByTestId('create-flow-button').click();
+        await page.waitForURL(
-      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}/
-        /\/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('choose and event', async () => {
+      await test.step('has two steps by default', async () => {
-        await expect(flowEditorPage.eventAutocomplete).toBeVisible();
+        await expect(page.getByTestId('flow-step')).toHaveCount(2);
-        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('setup Scheduler trigger', async () => {
-      await test.step('choose "yes" in "trigger on weekends?"', async () => {
+      await test.step('choose app and event substep', async () => {
-        await expect(flowEditorPage.trigger).toBeVisible();
+        await test.step('choose application', async () => {
-        await flowEditorPage.trigger.click();
+          await flowEditorPage.appAutocomplete.click();
-        await page.getByRole('option', { name: 'Yes' }).click();
+          await page
-      });
+            .getByRole('option', { name: 'Scheduler' })
-
+            .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('show sample output', async () => {
-        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('choose and event', async () => {
-    await test.step('choose app and event substep', async () => {
+          await expect(flowEditorPage.eventAutocomplete).toBeVisible();
-      await test.step('choose application', async () => {
+          await flowEditorPage.eventAutocomplete.click();
-        await flowEditorPage.appAutocomplete.click();
+          await page
-        await page.getByRole('option', { name: 'Ntfy' }).click();
+            .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('choose an event', async () => {
+      await test.step('set up a trigger', async () => {
-        await expect(flowEditorPage.eventAutocomplete).toBeVisible();
+        await test.step('choose "yes" in "trigger on weekends?"', async () => {
-        await flowEditorPage.eventAutocomplete.click();
+          await expect(flowEditorPage.trigger).toBeVisible();
-        await page.getByRole('option', { name: 'Send message' }).click();
+          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('continue to next step', async () => {
+      await test.step('test trigger', async () => {
-        await flowEditorPage.continueButton.click();
+        await test.step('show sample output', async () => {
-      });
+          await expect(flowEditorPage.testOutput).not.toBeVisible();
-
+          await flowEditorPage.continueButton.click();
-      await test.step('collapses the substep', async () => {
+          await expect(flowEditorPage.testOutput).toBeVisible();
-        await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
+          await flowEditorPage.screenshot({
-        await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
+            path: 'Scheduler trigger test output.png',
+          });
+          await flowEditorPage.continueButton.click();
+        });
       });
     });
 
-    await test.step('choose connection substep', async () => {
+    await test.step('arrange Ntfy action', async () => {
-      await test.step('choose connection list item', async () => {
+      await test.step('choose app and event substep', async () => {
-        await flowEditorPage.connectionAutocomplete.click();
+        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.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',
+        });
+      });
+    
+      await test.step('unpublish from snackbar', async () => {
         await page
-          .getByRole('option')
+          .getByTestId('unpublish-flow-from-snackbar')
-          .filter({ hasText: 'Add new connection' })
           .click();
+        await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
       });
-
+    
-      await test.step('continue to next step', async () => {
+      await test.step('publish once again', async () => {
-        await page.getByTestId('create-connection-button').click();
+        await expect(flowEditorPage.publishFlowButton).toBeVisible();
+        await flowEditorPage.publishFlowButton.click();
+        await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
       });
-
+    
-      await test.step('collapses the substep', async () => {
+      await test.step('unpublish from layout top bar', async () => {
-        await flowEditorPage.continueButton.click();
+        await expect(flowEditorPage.unpublishFlowButton).toBeVisible();
-        await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
+        await flowEditorPage.unpublishFlowButton.click();
-      });
+        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: 'Ntfy action test output.png',
+          path: 'Unpublished flow.png',
         });
-        await flowEditorPage.continueButton.click();
       });
     });
-  });
+    
-
+    await test.step('in layout', async () => {
-  await test.step('publish and unpublish', async () => {
+      await test.step('can go back to flows page', async () => {
-    await test.step('publish flow', async () => {
+        await page.getByTestId('editor-go-back-button').click();
-      await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
+        await expect(page).toHaveURL('/flows');
-      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,7 +33,10 @@ publicTest.describe('My Profile', () => {
           .getByRole('option', { name: 'Admin' })
           .click();
         await adminCreateUserPage.createButton.click();
-        await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
+        const snackbar = await adminUsersPage.getSnackbarData(
+          'snackbar-create-user-success'
+        );
+        await expect(snackbar.variant).toBe('success');
       });
 
       await publicTest.step('copy invitation link', async () => {

packages/web/package.json

@@ -83,6 +83,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@simbathesailor/use-what-changed": "^2.0.0",
     "@tanstack/eslint-plugin-query": "^5.20.1",
     "@tanstack/react-query-devtools": "^5.24.1",
     "eslint-config-prettier": "^9.1.0",

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

@@ -18,6 +18,7 @@ import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
 import useAppAuth from 'hooks/useAppAuth';
 import { useQueryClient } from '@tanstack/react-query';
+import { useWhatChanged } from '@simbathesailor/use-what-changed';
 
 function AddAppConnection(props) {
   const { application, connectionId, onClose } = props;
@@ -64,7 +65,7 @@ function AddAppConnection(props) {
 
       asyncAuthenticate();
     },
-    [appAuthClientId, authenticate],
+    [appAuthClientId, authenticate, key, navigate],
   );
 
   const handleClientClick = (appAuthClientId) =>

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

@@ -34,10 +34,10 @@ function AdminApplicationCreateAuthClient(props) {
 
     if (!appConfigKey) {
       const { data: appConfigData } = await createAppConfig({
-        customConnectionAllowed: true,
+        useOnlyPredefinedAuthClients: false,
-        shared: false,
         disabled: false,
       });
+
       appConfigKey = appConfigData.key;
     }
 

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

@@ -46,9 +46,8 @@ function AdminApplicationSettings(props) {
 
   const defaultValues = useMemo(
     () => ({
-      customConnectionAllowed:
+      useOnlyPredefinedAuthClients:
-        appConfig?.data?.customConnectionAllowed || false,
+        appConfig?.data?.useOnlyPredefinedAuthClients || false,
-      shared: appConfig?.data?.shared || false,
       disabled: appConfig?.data?.disabled || false,
     }),
     [appConfig?.data],
@@ -62,21 +61,17 @@ function AdminApplicationSettings(props) {
         <Paper sx={{ p: 2, mt: 4 }}>
           <Stack spacing={2} direction="column">
             <Switch
-              name="customConnectionAllowed"
+              name="useOnlyPredefinedAuthClients"
-              label={formatMessage('adminAppsSettings.customConnectionAllowed')}
+              label={formatMessage(
-              FormControlLabelProps={{
+                'adminAppsSettings.useOnlyPredefinedAuthClients',
-                labelPlacement: 'start',
+              )}
-              }}
-            />
-            <Divider />
-            <Switch
-              name="shared"
-              label={formatMessage('adminAppsSettings.shared')}
               FormControlLabelProps={{
                 labelPlacement: 'start',
               }}
             />
+
             <Divider />
+
             <Switch
               name="disabled"
               label={formatMessage('adminAppsSettings.disabled')}
@@ -86,6 +81,7 @@ function AdminApplicationSettings(props) {
             />
             <Divider />
           </Stack>
+
           <Stack>
             <LoadingButton
               data-test="submit-button"

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

@@ -15,17 +15,7 @@ function AppAuthClientsDialog(props) {
 
   const formatMessage = useFormatMessage();
 
-  React.useEffect(
+  if (!appAuthClients?.data.length) return <React.Fragment />;
-    function autoAuthenticateSingleClient() {
-      if (appAuthClients?.data.length === 1) {
-        onClientClick(appAuthClients.data[0].id);
-      }
-    },
-    [appAuthClients?.data],
-  );
-
-  if (!appAuthClients?.data.length || appAuthClients?.data.length === 1)
-    return <React.Fragment />;
 
   return (
     <Dialog onClose={onClose} open={true}>

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

@@ -11,14 +11,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import Can from 'components/Can';
 
 function ContextMenu(props) {
-  const {
+  const { appKey, connection, onClose, onMenuItemClick, anchorEl } = props;
-    appKey,
-    connection,
-    onClose,
-    onMenuItemClick,
-    anchorEl,
-    disableReconnection,
-  } = props;
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
 
@@ -73,7 +66,7 @@ function ContextMenu(props) {
         {(allowed) => (
           <MenuItem
             component={Link}
-            disabled={!allowed || disableReconnection}
+            disabled={!allowed}
             to={URLS.APP_RECONNECT_CONNECTION(
               appKey,
               connection.id,
@@ -109,7 +102,6 @@ ContextMenu.propTypes = {
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]),
-  disableReconnection: PropTypes.bool.isRequired,
 };
 
 export default ContextMenu;

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

@@ -30,8 +30,7 @@ const countTranslation = (value) => (
 function AppConnectionRow(props) {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
-  const { id, key, formattedData, verified, createdAt, reconnectable } =
+  const { id, key, formattedData, verified, createdAt } = props.connection;
-    props.connection;
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -174,7 +173,6 @@ function AppConnectionRow(props) {
         <ConnectionContextMenu
           appKey={key}
           connection={props.connection}
-          disableReconnection={!reconnectable}
           onClose={handleClose}
           onMenuItemClick={onContextMenuAction}
           anchorEl={anchorEl}

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

@@ -95,7 +95,8 @@ function ChooseConnectionSubstep(props) {
 
     if (
       !appConfig?.data ||
-      (!appConfig.data?.disabled && appConfig.data?.customConnectionAllowed)
+      (!appConfig.data?.disabled === false &&
+        appConfig.data?.useOnlyPredefinedAuthClients === false)
     ) {
       options.push({
         label: formatMessage('chooseConnectionSubstep.addNewConnection'),
@@ -103,12 +104,10 @@ function ChooseConnectionSubstep(props) {
       });
     }
 
-    if (appConfig?.data?.connectionAllowed) {
+    options.push({
-      options.push({
+      label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
-        label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
+      value: ADD_SHARED_CONNECTION_VALUE,
-        value: ADD_SHARED_CONNECTION_VALUE,
+    });
-      });
-    }
 
     return options;
   }, [data, formatMessage, appConfig?.data]);

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

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

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

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

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

@@ -67,17 +67,12 @@ export default function SplitButton(props) {
           }}
           open={open}
           anchorEl={anchorRef.current}
+          placement="bottom-end"
           transition
           disablePortal
         >
-          {({ TransitionProps, placement }) => (
+          {({ TransitionProps }) => (
-            <Grow
+            <Grow {...TransitionProps}>
-              {...TransitionProps}
-              style={{
-                transformOrigin:
-                  placement === 'bottom' ? 'center top' : 'center bottom',
-              }}
-            >
               <Paper>
                 <ClickAwayListener onClickAway={handleClose}>
                   <MenuList autoFocusItem>

packages/web/src/helpers/errors.js

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

packages/web/src/hooks/useAuthenticateApp.ee.js

@@ -13,6 +13,7 @@ import useCreateConnectionAuthUrl from './useCreateConnectionAuthUrl';
 import useUpdateConnection from './useUpdateConnection';
 import useResetConnection from './useResetConnection';
 import useVerifyConnection from './useVerifyConnection';
+import { useWhatChanged } from '@simbathesailor/use-what-changed';
 
 function getSteps(auth, hasConnection, useShared) {
   if (hasConnection) {
@@ -37,11 +38,13 @@ export default function useAuthenticateApp(payload) {
   const { mutateAsync: createConnectionAuthUrl } = useCreateConnectionAuthUrl();
   const { mutateAsync: updateConnection } = useUpdateConnection();
   const { mutateAsync: resetConnection } = useResetConnection();
+  const { mutateAsync: verifyConnection } = useVerifyConnection();
   const [authenticationInProgress, setAuthenticationInProgress] =
     React.useState(false);
   const formatMessage = useFormatMessage();
-  const steps = getSteps(auth?.data, !!connectionId, useShared);
+  const steps = React.useMemo(() => {
-  const { mutateAsync: verifyConnection } = useVerifyConnection();
+    return getSteps(auth?.data, !!connectionId, useShared);
+  }, [auth, connectionId, useShared]);
 
   const authenticate = React.useMemo(() => {
     if (!steps?.length) return;
@@ -57,7 +60,6 @@ export default function useAuthenticateApp(payload) {
         fields,
       };
       let stepIndex = 0;
-
       while (stepIndex < steps?.length) {
         const step = steps[stepIndex];
         const variables = computeAuthStepVariables(step.arguments, response);
@@ -105,10 +107,10 @@ export default function useAuthenticateApp(payload) {
             response[step.name] = stepResponse;
           }
         } catch (err) {
-          console.log(err);
+          console.error(err);
           setAuthenticationInProgress(false);
 
-          queryClient.invalidateQueries({
+          await queryClient.invalidateQueries({
             queryKey: ['apps', appKey, 'connections'],
           });
 
@@ -126,13 +128,14 @@ export default function useAuthenticateApp(payload) {
 
       return response;
     };
+    // keep formatMessage out of it as it causes infinite loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     steps,
     appKey,
     appAuthClientId,
     connectionId,
     queryClient,
-    formatMessage,
     createConnection,
     createConnectionAuthUrl,
     updateConnection,
@@ -140,6 +143,24 @@ export default function useAuthenticateApp(payload) {
     verifyConnection,
   ]);
 
+  useWhatChanged(
+    [
+      steps,
+      appKey,
+      appAuthClientId,
+      connectionId,
+      queryClient,
+      createConnection,
+      createConnectionAuthUrl,
+      updateConnection,
+      resetConnection,
+      verifyConnection,
+    ],
+    'steps, appKey, appAuthClientId, connectionId, queryClient, createConnection, createConnectionAuthUrl, updateConnection, resetConnection, verifyConnection',
+    '',
+    'useAuthenticate',
+  );
+
   return {
     authenticate,
     inProgress: authenticationInProgress,

packages/web/src/hooks/useAutomatischInfo.js

@@ -9,7 +9,7 @@ export default function useAutomatischInfo() {
      **/
     staleTime: Infinity,
     queryKey: ['automatisch', 'info'],
-    queryFn: async (payload, signal) => {
+    queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/automatisch/info', { signal });
 
       return data;

packages/web/src/hooks/useCreateConnection.js

@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import api from 'helpers/api';
 
 export default function useCreateConnection(appKey) {
-  const query = useMutation({
+  const mutation = useMutation({
     mutationFn: async ({ appAuthClientId, formattedData }) => {
       const { data } = await api.post(`/v1/apps/${appKey}/connections`, {
         appAuthClientId,
@@ -14,5 +14,5 @@ export default function useCreateConnection(appKey) {
     },
   });
 
-  return query;
+  return mutation;
 }

packages/web/src/hooks/useLicense.js

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useLicense() {
+  const query = useQuery({
+    queryKey: ['automatisch', 'license'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/automatisch/license', { signal });
+
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/index.jsx

@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import { Settings } from 'luxon';
+import { setUseWhatChange } from '@simbathesailor/use-what-changed';
 
 import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
@@ -14,6 +15,8 @@ import reportWebVitals from './reportWebVitals';
 // Sets the default locale to English for all luxon DateTime instances created afterwards.
 Settings.defaultLocale = 'en';
 
+setUseWhatChange(process.env.NODE_ENV === 'development');
+
 const container = document.getElementById('root');
 const root = createRoot(container);
 

packages/web/src/locales/en.json

@@ -22,7 +22,7 @@
   "app.connectionCount": "{count} connections",
   "app.flowCount": "{count} flows",
   "app.addConnection": "Add connection",
-  "app.addCustomConnection": "Add custom connection",
+  "app.addConnectionWithAuthClient": "Add connection with auth client",
   "app.reconnectConnection": "Reconnect connection",
   "app.createFlow": "Create flow",
   "app.settings": "Settings",
@@ -225,8 +225,6 @@
   "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>",
@@ -251,11 +249,8 @@
   "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",
@@ -297,7 +292,7 @@
   "adminApps.connections": "Connections",
   "adminApps.authClients": "Auth clients",
   "adminApps.settings": "Settings",
-  "adminAppsSettings.customConnectionAllowed": "Allow custom connection",
+  "adminAppsSettings.useOnlyPredefinedAuthClients": "Use only predefined auth clients",
   "adminAppsSettings.shared": "Shared",
   "adminAppsSettings.disabled": "Disabled",
   "adminAppsSettings.save": "Save",

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

@@ -92,13 +92,6 @@ export default function AdminApplication() {
                     value={URLS.ADMIN_APP_AUTH_CLIENTS_PATTERN}
                     component={Link}
                   />
-                  <Tab
-                    label={formatMessage('adminApps.connections')}
-                    to={URLS.ADMIN_APP_CONNECTIONS(appKey)}
-                    value={URLS.ADMIN_APP_CONNECTIONS_PATTERN}
-                    disabled={!app.supportsConnections}
-                    component={Link}
-                  />
                 </Tabs>
               </Box>
 
@@ -111,10 +104,6 @@ export default function AdminApplication() {
                   path={`/auth-clients/*`}
                   element={<AdminApplicationAuthClients appKey={appKey} />}
                 />
-                <Route
-                  path={`/connections/*`}
-                  element={<div>App connections</div>}
-                />
                 <Route
                   path="/"
                   element={

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

@@ -6,7 +6,6 @@ import {
   Navigate,
   Routes,
   useParams,
-  useSearchParams,
   useMatch,
   useNavigate,
 } from 'react-router-dom';
@@ -31,6 +30,7 @@ import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import useApp from 'hooks/useApp';
+import useAppAuthClients from 'hooks/useAppAuthClients';
 import Can from 'components/Can';
 import { AppPropType } from 'propTypes/propTypes';
 
@@ -61,47 +61,53 @@ export default function Application() {
     end: false,
   });
   const flowsPathMatch = useMatch({ path: URLS.APP_FLOWS_PATTERN, end: false });
-  const [searchParams] = useSearchParams();
   const { appKey } = useParams();
   const navigate = useNavigate();
+  const { data: appAuthClients } = useAppAuthClients(appKey);
 
   const { data, loading } = useApp(appKey);
   const app = data?.data || {};
 
   const { data: appConfig } = useAppConfig(appKey);
-  const connectionId = searchParams.get('connectionId') || undefined;
 
   const currentUserAbility = useCurrentUserAbility();
 
   const goToApplicationPage = () => navigate('connections');
 
   const connectionOptions = React.useMemo(() => {
-    const shouldHaveCustomConnection =
+    const addCustomConnection = {
-      appConfig?.data?.connectionAllowed &&
+      label: formatMessage('app.addConnection'),
-      appConfig?.data?.customConnectionAllowed;
+      key: 'addConnection',
+      'data-test': 'add-connection-button',
+      to: URLS.APP_ADD_CONNECTION(appKey, false),
+      disabled: !currentUserAbility.can('create', 'Connection'),
+    };
 
-    const options = [
+    const addConnectionWithAuthClient = {
-      {
+      label: formatMessage('app.addConnectionWithAuthClient'),
-        label: formatMessage('app.addConnection'),
+      key: 'addConnectionWithAuthClient',
-        key: 'addConnection',
+      'data-test': 'add-custom-connection-button',
-        'data-test': 'add-connection-button',
+      to: URLS.APP_ADD_CONNECTION(appKey, true),
-        to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.data?.connectionAllowed),
+      disabled: !currentUserAbility.can('create', 'Connection'),
-        disabled: !currentUserAbility.can('create', 'Connection'),
+    };
-      },
-    ];
 
-    if (shouldHaveCustomConnection) {
+    // means there is no app config. defaulting to custom connections only
-      options.push({
+    if (!appConfig?.data) {
-        label: formatMessage('app.addCustomConnection'),
+      return [addCustomConnection];
-        key: 'addCustomConnection',
-        'data-test': 'add-custom-connection-button',
-        to: URLS.APP_ADD_CONNECTION(appKey),
-        disabled: !currentUserAbility.can('create', 'Connection'),
-      });
     }
 
-    return options;
+    // means there is no app auth client. so we don't show the `addConnectionWithAuthClient`
-  }, [appKey, appConfig?.data, currentUserAbility, formatMessage]);
+    if (appAuthClients?.data?.length === 0) {
+      return [addCustomConnection];
+    }
+
+    // means only auth clients are allowed for connection creation
+    if (appConfig?.data?.useOnlyPredefinedAuthClients === true) {
+      return [addConnectionWithAuthClient];
+    }
+
+    return [addCustomConnection, addConnectionWithAuthClient];
+  }, [appKey, appConfig, appAuthClients, currentUserAbility, formatMessage]);
 
   if (loading) return null;
 
@@ -154,12 +160,7 @@ export default function Application() {
                       {(allowed) => (
                         <SplitButton
                           disabled={
-                            !allowed ||
+                            !allowed || appConfig?.data?.disabled === true
-                            (appConfig?.data &&
-                              !appConfig?.data?.disabled &&
-                              !appConfig?.data?.connectionAllowed &&
-                              !appConfig?.data?.customConnectionAllowed) ||
-                            connectionOptions.every(({ disabled }) => disabled)
                           }
                           options={connectionOptions}
                         />

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

@@ -1,14 +1,10 @@
 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';
@@ -19,45 +15,10 @@ 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();
@@ -80,7 +41,7 @@ export default function CreateRole() {
     [permissionCatalogData],
   );
 
-  const handleRoleCreation = async (roleData, e, setError) => {
+  const handleRoleCreation = async (roleData) => {
     try {
       const permissions = getPermissions(roleData.computedPermissions);
 
@@ -99,38 +60,14 @@ export default function CreateRole() {
 
       navigate(URLS.ROLES);
     } catch (error) {
-      const errors = error?.response?.data?.errors;
+      const errors = Object.values(error.response.data.errors);
 
-      if (errors) {
+      for (const [errorMessage] of errors) {
-        const fieldNames = ['name', 'description'];
+        enqueueSnackbar(errorMessage, {
-        Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+          variant: 'error',
-          if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+          SnackbarProps: {
-            setError(fieldName, {
+            'data-test': 'snackbar-error',
-              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,
         });
       }
     }
@@ -146,67 +83,37 @@ export default function CreateRole() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form
+          <Form onSubmit={handleRoleCreation} defaultValues={defaultValues}>
-            onSubmit={handleRoleCreation}
+            <Stack direction="column" gap={2}>
-            defaultValues={defaultValues}
+              <TextField
-            noValidate
+                required={true}
-            resolver={yupResolver(
+                name="name"
-              getValidationSchema(formatMessage, defaultValues),
+                label={formatMessage('roleForm.name')}
-            )}
+                fullWidth
-            automaticValidation={false}
+                data-test="name-input"
-            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" />
 
-                {errors?.root?.permissions && (
+              <LoadingButton
-                  <Alert severity="error" data-test="create-role-error-alert">
+                type="submit"
-                    <AlertTitle>
+                variant="contained"
-                      {formatMessage('createRole.permissionsError')}
+                color="primary"
-                    </AlertTitle>
+                sx={{ boxShadow: 2 }}
-                    <pre>
+                loading={isCreateRolePending}
-                      <code>{errors?.root?.permissions?.message}</code>
+                data-test="create-button"
-                    </pre>
+              >
-                  </Alert>
+                {formatMessage('createRole.submit')}
-                )}
+              </LoadingButton>
-
+            </Stack>
-                {errors?.root?.general && (
+          </Form>
-                  <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,10 +3,9 @@ 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';
@@ -17,94 +16,50 @@ 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, e, setError) => {
+  const handleUserCreation = async (userData) => {
     try {
       await createUser({
         fullName: userData.fullName,
         email: userData.email,
-        roleId: userData.roleId,
+        roleId: userData.role?.id,
       });
 
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+
+      enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
+        variant: 'success',
+        persist: true,
+        SnackbarProps: {
+          'data-test': 'snackbar-create-user-success',
+        },
+      });
     } catch (error) {
-      const errors = error?.response?.data?.errors;
+      enqueueSnackbar(formatMessage('createUser.error'), {
-
+        variant: 'error',
-      if (errors) {
+        persist: true,
-        const fieldNames = Object.keys(defaultValues);
+        SnackbarProps: {
-        Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+          'data-test': 'snackbar-error',
-          if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+        },
-            setError(fieldName, {
-              type: 'fieldRequestError',
-              message: fieldErrors.join(', '),
-            });
-          }
-        });
-      }
-
-      const generalError = getGeneralErrorMessage({
-        error,
-        fallbackMessage: formatMessage('createUser.error'),
       });
 
-      if (generalError) {
+      throw new Error('Failed while creating!');
-        setError('root.general', {
-          type: 'requestError',
-          message: generalError,
-        });
-      }
     }
   };
 
@@ -118,111 +73,74 @@ export default function CreateUser() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          <Form
+          <Form onSubmit={handleUserCreation}>
-            noValidate
+            <Stack direction="column" gap={2}>
-            onSubmit={handleUserCreation}
+              <TextField
-            mode="onSubmit"
+                required={true}
-            defaultValues={defaultValues}
+                name="fullName"
-            resolver={yupResolver(
+                label={formatMessage('userForm.fullName')}
-              getValidationSchema(formatMessage, canUpdateRole),
+                data-test="full-name-input"
-            )}
+                fullWidth
-            automaticValidation={false}
+              />
-            render={({ formState: { errors } }) => (
+
-              <Stack direction="column" gap={2}>
+              <TextField
-                <TextField
+                required={true}
-                  required={true}
+                name="email"
-                  name="fullName"
+                label={formatMessage('userForm.email')}
-                  label={formatMessage('userForm.fullName')}
+                data-test="email-input"
-                  data-test="full-name-input"
+                fullWidth
+              />
+
+              <Can I="update" a="Role">
+                <ControlledAutocomplete
+                  name="role.id"
                   fullWidth
-                  error={!!errors?.fullName}
+                  disablePortal
-                  helperText={errors?.fullName?.message}
+                  disableClearable={true}
+                  options={generateRoleOptions(roles)}
+                  renderInput={(params) => (
+                    <MuiTextField
+                      {...params}
+                      required
+                      label={formatMessage('userForm.role')}
+                    />
+                  )}
+                  loading={isRolesLoading}
                 />
+              </Can>
 
-                <TextField
+              <LoadingButton
-                  required={true}
+                type="submit"
-                  name="email"
+                variant="contained"
-                  label={formatMessage('userForm.email')}
+                color="primary"
-                  data-test="email-input"
+                sx={{ boxShadow: 2 }}
-                  fullWidth
+                loading={isCreateUserPending}
-                  error={!!errors?.email}
+                data-test="create-button"
-                  helperText={errors?.email?.message}
+              >
-                />
+                {formatMessage('createUser.submit')}
+              </LoadingButton>
 
-                <Can I="update" a="Role">
+              {createdUser && (
-                  <ControlledAutocomplete
+                <Alert
-                    name="roleId"
+                  severity="info"
-                    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"
-                  sx={{ boxShadow: 2 }}
+                  data-test="invitation-email-info-alert"
-                  loading={isCreateUserPending}
-                  data-test="create-button"
                 >
-                  {formatMessage('createUser.submit')}
+                  {formatMessage('createUser.invitationEmailInfo', {
-                </LoadingButton>
+                    link: () => (
-              </Stack>
+                      <a
-            )}
+                        href={createdUser.data.acceptInvitationUrl}
-          />
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {createdUser.data.acceptInvitationUrl}
+                      </a>
+                    ),
+                  })}
+                </Alert>
+              )}
+            </Stack>
+          </Form>
         </Grid>
       </Grid>
     </Container>

packages/web/src/propTypes/propTypes.js

@@ -211,7 +211,6 @@ export const ConnectionPropType = PropTypes.shape({
   flowCount: PropTypes.number,
   appData: AppPropType,
   createdAt: PropTypes.number,
-  reconnectable: PropTypes.bool,
   appAuthClientId: PropTypes.string,
 });
 
@@ -459,8 +458,7 @@ export const SamlAuthProviderRolePropType = PropTypes.shape({
 export const AppConfigPropType = PropTypes.shape({
   id: PropTypes.string,
   key: PropTypes.string,
-  customConnectionAllowed: PropTypes.bool,
+  useOnlyPredefinedAuthClients: PropTypes.bool,
-  connectionAllowed: PropTypes.bool,
   shared: PropTypes.bool,
   disabled: PropTypes.bool,
 });

packages/web/yarn.lock

@@ -2126,6 +2126,11 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
   integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
 
+"@simbathesailor/use-what-changed@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@simbathesailor/use-what-changed/-/use-what-changed-2.0.0.tgz#7f82d78f92c8588b5fadd702065dde93bd781403"
+  integrity sha512-ulBNrPSvfho9UN6zS2fii3AsdEcp2fMaKeqUZZeCNPaZbB6aXyTUhpEN9atjMAbu/eyK3AY8L4SYJUG62Ekocw==
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
@@ -9784,7 +9789,16 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9888,7 +9902,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10952,7 +10973,16 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==