test: add tests for executions

.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:
-    paths:
-      - 'packages/backend/**'
-      - 'packages/e2e-tests/**'
-      - 'packages/web/**'
-      - '!packages/backend/src/apps/**'
+  # pull_request:
+  #   paths:
+  #     - 'packages/backend/**'
+  #     - 'packages/e2e-tests/**'
+  #     - 'packages/web/**'
+  #     - '!packages/backend/src/apps/**'
   workflow_dispatch:
 
 env:
@@ -114,6 +114,7 @@ jobs:
       - name: Run Playwright tests
         working-directory: ./packages/e2e-tests
         env:
+          PORT: 3000
           LOGIN_EMAIL: user@automatisch.io
           LOGIN_PASSWORD: sample
           BASE_URL: http://localhost:3000

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

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

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

@@ -23,7 +23,8 @@ describe('POST /api/v1/admin/apps/:appKey/config', () => {
 
   it('should return created app config', async () => {
     const appConfig = {
-      useOnlyPredefinedAuthClients: false,
+      customConnectionAllowed: true,
+      shared: true,
       disabled: false,
     };
 
@@ -37,14 +38,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',
-      useOnlyPredefinedAuthClients: false,
+      customConnectionAllowed: true,
+      shared: true,
       disabled: false,
     };
 

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

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

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

@@ -24,15 +24,17 @@ describe('PATCH /api/v1/admin/apps/:appKey/config', () => {
   it('should return updated app config', async () => {
     const appConfig = {
       key: 'gitlab',
-      useOnlyPredefinedAuthClients: true,
+      customConnectionAllowed: true,
+      shared: true,
       disabled: false,
     };
 
     await createAppConfig(appConfig);
 
     const newAppConfigValues = {
+      shared: false,
       disabled: true,
-      useOnlyPredefinedAuthClients: false,
+      customConnectionAllowed: false,
     };
 
     const response = await request(app)
@@ -51,8 +53,9 @@ 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,
-      useOnlyPredefinedAuthClients: false,
+      customConnectionAllowed: false,
     };
 
     await request(app)
@@ -65,7 +68,8 @@ describe('PATCH /api/v1/admin/apps/:appKey/config', () => {
   it('should return HTTP 422 for invalid app config data', async () => {
     const appConfig = {
       key: 'gitlab',
-      useOnlyPredefinedAuthClients: true,
+      customConnectionAllowed: 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,
-        useOnlyPredefinedAuthClients: false,
+        customConnectionAllowed: true,
       });
     });
 
@@ -218,7 +218,7 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        useOnlyPredefinedAuthClients: true,
+        customConnectionAllowed: false,
       });
     });
 
@@ -266,14 +266,14 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
     });
   });
 
-  describe('with auth client enabled', async () => {
+  describe('with auth clients enabled', async () => {
     let appAuthClient;
 
     beforeEach(async () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        useOnlyPredefinedAuthClients: false,
+        shared: true,
       });
 
       appAuthClient = await createAppAuthClient({
@@ -310,6 +310,19 @@ 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')
@@ -336,20 +349,18 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
       });
     });
   });
-
-  describe('with auth client disabled', async () => {
+  describe('with auth clients disabled', async () => {
     let appAuthClient;
 
     beforeEach(async () => {
       await createAppConfig({
         key: 'gitlab',
         disabled: false,
-        useOnlyPredefinedAuthClients: false,
+        shared: false,
       });
 
       appAuthClient = await createAppAuthClient({
         appKey: 'gitlab',
-        active: false,
       });
     });
 
@@ -362,7 +373,7 @@ describe('POST /api/v1/apps/:appKey/connections', () => {
         .post('/api/v1/apps/gitlab/connections')
         .set('Authorization', token)
         .send(connectionData)
-        .expect(404);
+        .expect(403);
     });
 
     it('should return not found response for invalid app key', async () => {

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

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

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

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

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

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

packages/backend/src/controllers/api/v1/steps/create-dynamic-data.test.js

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

packages/backend/src/controllers/api/v1/steps/create-dynamic-fields.test.js

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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,9 +3,17 @@
 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",
@@ -17,13 +25,13 @@ exports[`AppConfig model > jsonSchema should have correct validations 1`] = `
     "key": {
       "type": "string",
     },
-    "updatedAt": {
-      "type": "string",
-    },
-    "useOnlyPredefinedAuthClients": {
+    "shared": {
       "default": false,
       "type": "boolean",
     },
+    "updatedAt": {
+      "type": "string",
+    },
   },
   "required": [
     "key",

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

@@ -60,26 +60,39 @@ 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,6 +7,7 @@ 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', () => {
@@ -163,6 +164,63 @@ 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,
@@ -174,6 +232,17 @@ 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();
 
@@ -187,6 +256,19 @@ 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,7 +16,9 @@ class AppConfig extends Base {
     properties: {
       id: { type: 'string', format: 'uuid' },
       key: { type: 'string' },
-      useOnlyPredefinedAuthClients: { type: 'boolean', default: false },
+      connectionAllowed: { 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' },
@@ -39,6 +41,39 @@ 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,9 +1,11 @@
-import { describe, it, expect } from 'vitest';
+import { vi, 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', () => {
@@ -53,4 +55,126 @@ 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,6 +33,10 @@ class Connection extends Base {
     },
   };
 
+  static get virtualAttributes() {
+    return ['reconnectable'];
+  }
+
   static relationMappings = () => ({
     user: {
       relation: Base.BelongsToOneRelation,
@@ -79,6 +83,18 @@ 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;
 
@@ -128,13 +144,19 @@ class Connection extends Base {
         );
       }
 
-      if (appConfig.useOnlyPredefinedAuthClients && this.formattedData) {
+      if (!appConfig.customConnectionAllowed && this.formattedData) {
         throw new NotAuthorizedError(
           `New custom connections have been disabled for ${app.name}!`
         );
       }
 
-      if (!this.formattedData) {
+      if (!appConfig.shared && this.appAuthClientId) {
+        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,6 +23,14 @@ 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();
@@ -84,6 +92,78 @@ 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(
@@ -286,7 +366,6 @@ 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',
@@ -294,7 +373,7 @@ describe('Connection model', () => {
 
       vi.spyOn(Connection.prototype, 'getAppConfig').mockResolvedValue({
         disabled: false,
-        useOnlyPredefinedAuthClients: true,
+        customConnectionAllowed: false,
       });
 
       const connection = new Connection();
@@ -307,10 +386,32 @@ 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,10 +376,7 @@ describe('User model', () => {
       const anotherUserConnection = await createConnection();
 
       expect(
-        await userWithRoleAndPermissions.authorizedConnections.orderBy(
-          'created_at',
-          'asc'
-        )
+        await userWithRoleAndPermissions.authorizedConnections
       ).toStrictEqual([userConnection, anotherUserConnection]);
     });
 
@@ -999,9 +996,21 @@ describe('User model', () => {
 
       const user = await createUser();
 
+      const presentDate = DateTime.fromObject(
+        { year: 2024, month: 11, day: 17, hour: 11, minute: 30 },
+        { zone: 'UTC+0' }
+      );
+
+      vi.setSystemTime(presentDate);
+
       await user.startTrialPeriod();
 
-      vi.setSystemTime(DateTime.now().plus({ month: 1 }));
+      const futureDate = DateTime.fromObject(
+        { year: 2025, month: 1, day: 1 },
+        { zone: 'UTC+0' }
+      );
+
+      vi.setSystemTime(futureDate);
 
       const refetchedUser = await user.$query();
 
@@ -1109,9 +1118,7 @@ describe('User model', () => {
 
       const user = await createUser();
 
-      await expect(() => user.getPlanAndUsage()).rejects.toThrow(
-        'NotFoundError'
-      );
+      expect(() => user.getPlanAndUsage()).rejects.toThrow('NotFoundError');
     });
   });
 
@@ -1182,7 +1189,7 @@ describe('User model', () => {
     });
 
     it('should throw not found error when user role does not exist', async () => {
-      await expect(() =>
+      expect(() =>
         User.registerUser({
           fullName: 'Sample user',
           email: 'user@automatisch.io',
@@ -1250,8 +1257,6 @@ describe('User model', () => {
 
   describe('createUsageData', () => {
     it('should create usage data if Automatisch is a cloud installation', async () => {
-      vi.useFakeTimers();
-
       vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(true);
 
       const user = await createUser({
@@ -1259,14 +1264,10 @@ describe('User model', () => {
         email: 'user@automatisch.io',
       });
 
-      vi.setSystemTime(DateTime.now().plus({ month: 1 }));
-
       const usageData = await user.createUsageData();
       const currentUsageData = await user.$relatedQuery('currentUsageData');
 
       expect(usageData).toStrictEqual(currentUsageData);
-
-      vi.useRealTimers();
     });
 
     it('should not create usage data if Automatisch is not a cloud installation', async () => {

packages/backend/src/queues/action.js

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

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

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

packages/backend/src/queues/email.js

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

packages/backend/src/queues/flow.js

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

packages/backend/src/queues/index.js

@@ -1,21 +0,0 @@
-import appConfig from '../config/app.js';
-import actionQueue from './action.js';
-import emailQueue from './email.js';
-import flowQueue from './flow.js';
-import triggerQueue from './trigger.js';
-import deleteUserQueue from './delete-user.ee.js';
-import removeCancelledSubscriptionsQueue from './remove-cancelled-subscriptions.ee.js';
-
-const queues = [
-  actionQueue,
-  emailQueue,
-  flowQueue,
-  triggerQueue,
-  deleteUserQueue,
-];
-
-if (appConfig.isCloud) {
-  queues.push(removeCancelledSubscriptionsQueue);
-}
-
-export default queues;

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

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

packages/backend/src/queues/trigger.js

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

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

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

packages/backend/src/serializers/auth.js

@@ -2,9 +2,7 @@ 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,8 +10,6 @@ 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,6 +2,7 @@ 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,6 +13,7 @@ describe('connectionSerializer', () => {
     const expectedPayload = {
       id: connection.id,
       key: connection.key,
+      reconnectable: connection.reconnectable,
       appAuthClientId: connection.appAuthClientId,
       formattedData: {
         screenName: connection.formattedData.screenName,

packages/backend/src/worker.js

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

packages/backend/src/workers/action.js

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

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

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

packages/backend/src/workers/email.js

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

packages/backend/src/workers/flow.js

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

packages/backend/src/workers/index.js

@@ -1,21 +0,0 @@
-import appConfig from '../config/app.js';
-import actionWorker from './action.js';
-import emailWorker from './email.js';
-import flowWorker from './flow.js';
-import triggerWorker from './trigger.js';
-import deleteUserWorker from './delete-user.ee.js';
-import removeCancelledSubscriptionsWorker from './remove-cancelled-subscriptions.ee.js';
-
-const workers = [
-  actionWorker,
-  emailWorker,
-  flowWorker,
-  triggerWorker,
-  deleteUserWorker,
-];
-
-if (appConfig.isCloud) {
-  workers.push(removeCancelledSubscriptionsWorker);
-}
-
-export default workers;

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

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

packages/backend/src/workers/trigger.js

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

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

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

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

@@ -2,6 +2,7 @@ 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,8 +4,6 @@ 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,8 +2,10 @@ const getAppConfigMock = (appConfig) => {
   return {
     data: {
       key: appConfig.key,
-      useOnlyPredefinedAuthClients: appConfig.useOnlyPredefinedAuthClients,
+      customConnectionAllowed: appConfig.customConnectionAllowed,
+      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,6 +3,7 @@ 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,6 +3,7 @@ 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,6 +3,7 @@ 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,6 +3,7 @@ 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: 95.16,
-        branches: 94.66,
-        functions: 97.65,
-        lines: 95.16,
+        statements: 93.41,
+        branches: 93.46,
+        functions: 95.95,
+        lines: 93.41,
       },
     },
   },

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

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

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

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

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

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

packages/e2e-tests/fixtures/index.js

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

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

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

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

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

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

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

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

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

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

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

packages/web/package.json

@@ -83,7 +83,6 @@
     "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,7 +18,6 @@ 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;
@@ -65,7 +64,7 @@ function AddAppConnection(props) {
 
       asyncAuthenticate();
     },
-    [appAuthClientId, authenticate, key, navigate],
+    [appAuthClientId, authenticate],
   );
 
   const handleClientClick = (appAuthClientId) =>

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

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

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

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

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

@@ -15,7 +15,17 @@ function AppAuthClientsDialog(props) {
 
   const formatMessage = useFormatMessage();
 
-  if (!appAuthClients?.data.length) return <React.Fragment />;
+  React.useEffect(
+    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,7 +11,14 @@ import { useQueryClient } from '@tanstack/react-query';
 import Can from 'components/Can';
 
 function ContextMenu(props) {
-  const { appKey, connection, onClose, onMenuItemClick, anchorEl } = props;
+  const {
+    appKey,
+    connection,
+    onClose,
+    onMenuItemClick,
+    anchorEl,
+    disableReconnection,
+  } = props;
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
 
@@ -66,7 +73,7 @@ function ContextMenu(props) {
         {(allowed) => (
           <MenuItem
             component={Link}
-            disabled={!allowed}
+            disabled={!allowed || disableReconnection}
             to={URLS.APP_RECONNECT_CONNECTION(
               appKey,
               connection.id,
@@ -102,6 +109,7 @@ 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,7 +30,8 @@ const countTranslation = (value) => (
 function AppConnectionRow(props) {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
-  const { id, key, formattedData, verified, createdAt } = props.connection;
+  const { id, key, formattedData, verified, createdAt, reconnectable } =
+    props.connection;
   const [verificationVisible, setVerificationVisible] = React.useState(false);
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -173,6 +174,7 @@ 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,8 +95,7 @@ function ChooseConnectionSubstep(props) {
 
     if (
       !appConfig?.data ||
-      (!appConfig.data?.disabled === false &&
-        appConfig.data?.useOnlyPredefinedAuthClients === false)
+      (!appConfig.data?.disabled && appConfig.data?.customConnectionAllowed)
     ) {
       options.push({
         label: formatMessage('chooseConnectionSubstep.addNewConnection'),
@@ -104,10 +103,12 @@ function ChooseConnectionSubstep(props) {
       });
     }
 
-    options.push({
-      label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
-      value: ADD_SHARED_CONNECTION_VALUE,
-    });
+    if (appConfig?.data?.connectionAllowed) {
+      options.push({
+        label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
+        value: ADD_SHARED_CONNECTION_VALUE,
+      });
+    }
 
     return options;
   }, [data, formatMessage, appConfig?.data]);

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

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

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

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

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

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

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

@@ -13,7 +13,6 @@ 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) {
@@ -38,13 +37,11 @@ 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 = React.useMemo(() => {
-    return getSteps(auth?.data, !!connectionId, useShared);
-  }, [auth, connectionId, useShared]);
+  const steps = getSteps(auth?.data, !!connectionId, useShared);
+  const { mutateAsync: verifyConnection } = useVerifyConnection();
 
   const authenticate = React.useMemo(() => {
     if (!steps?.length) return;
@@ -60,6 +57,7 @@ export default function useAuthenticateApp(payload) {
         fields,
       };
       let stepIndex = 0;
+
       while (stepIndex < steps?.length) {
         const step = steps[stepIndex];
         const variables = computeAuthStepVariables(step.arguments, response);
@@ -107,10 +105,10 @@ export default function useAuthenticateApp(payload) {
             response[step.name] = stepResponse;
           }
         } catch (err) {
-          console.error(err);
+          console.log(err);
           setAuthenticationInProgress(false);
 
-          await queryClient.invalidateQueries({
+          queryClient.invalidateQueries({
             queryKey: ['apps', appKey, 'connections'],
           });
 
@@ -128,14 +126,13 @@ 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,
@@ -143,24 +140,6 @@ 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 ({ signal }) => {
+    queryFn: async (payload, 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 mutation = useMutation({
+  const query = 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 mutation;
+  return query;
 }

packages/web/src/hooks/useLicense.js

@@ -1,15 +0,0 @@
-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,6 +1,5 @@
 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';
@@ -15,8 +14,6 @@ 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.addConnectionWithAuthClient": "Add connection with auth client",
+  "app.addCustomConnection": "Add custom connection",
   "app.reconnectConnection": "Reconnect connection",
   "app.createFlow": "Create flow",
   "app.settings": "Settings",
@@ -292,7 +292,7 @@
   "adminApps.connections": "Connections",
   "adminApps.authClients": "Auth clients",
   "adminApps.settings": "Settings",
-  "adminAppsSettings.useOnlyPredefinedAuthClients": "Use only predefined auth clients",
+  "adminAppsSettings.customConnectionAllowed": "Allow custom connection",
   "adminAppsSettings.shared": "Shared",
   "adminAppsSettings.disabled": "Disabled",
   "adminAppsSettings.save": "Save",

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

@@ -92,6 +92,13 @@ 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>
 
@@ -104,6 +111,10 @@ 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,6 +6,7 @@ import {
   Navigate,
   Routes,
   useParams,
+  useSearchParams,
   useMatch,
   useNavigate,
 } from 'react-router-dom';
@@ -30,7 +31,6 @@ 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,53 +61,47 @@ 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 addCustomConnection = {
-      label: formatMessage('app.addConnection'),
-      key: 'addConnection',
-      'data-test': 'add-connection-button',
-      to: URLS.APP_ADD_CONNECTION(appKey, false),
-      disabled: !currentUserAbility.can('create', 'Connection'),
-    };
+    const shouldHaveCustomConnection =
+      appConfig?.data?.connectionAllowed &&
+      appConfig?.data?.customConnectionAllowed;
 
-    const addConnectionWithAuthClient = {
-      label: formatMessage('app.addConnectionWithAuthClient'),
-      key: 'addConnectionWithAuthClient',
-      'data-test': 'add-custom-connection-button',
-      to: URLS.APP_ADD_CONNECTION(appKey, true),
-      disabled: !currentUserAbility.can('create', 'Connection'),
-    };
+    const options = [
+      {
+        label: formatMessage('app.addConnection'),
+        key: 'addConnection',
+        'data-test': 'add-connection-button',
+        to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.data?.connectionAllowed),
+        disabled: !currentUserAbility.can('create', 'Connection'),
+      },
+    ];
 
-    // means there is no app config. defaulting to custom connections only
-    if (!appConfig?.data) {
-      return [addCustomConnection];
+    if (shouldHaveCustomConnection) {
+      options.push({
+        label: formatMessage('app.addCustomConnection'),
+        key: 'addCustomConnection',
+        'data-test': 'add-custom-connection-button',
+        to: URLS.APP_ADD_CONNECTION(appKey),
+        disabled: !currentUserAbility.can('create', 'Connection'),
+      });
     }
 
-    // means there is no app auth client. so we don't show the `addConnectionWithAuthClient`
-    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]);
+    return options;
+  }, [appKey, appConfig?.data, currentUserAbility, formatMessage]);
 
   if (loading) return null;
 
@@ -160,7 +154,12 @@ export default function Application() {
                       {(allowed) => (
                         <SplitButton
                           disabled={
-                            !allowed || appConfig?.data?.disabled === true
+                            !allowed ||
+                            (appConfig?.data &&
+                              !appConfig?.data?.disabled &&
+                              !appConfig?.data?.connectionAllowed &&
+                              !appConfig?.data?.customConnectionAllowed) ||
+                            connectionOptions.every(({ disabled }) => disabled)
                           }
                           options={connectionOptions}
                         />

packages/web/src/propTypes/propTypes.js

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

packages/web/yarn.lock

@@ -2126,11 +2126,6 @@
   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"
@@ -9789,16 +9784,7 @@ 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":
-  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:
+"string-width-cjs@npm:string-width@^4.2.0", 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==
@@ -9902,14 +9888,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"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:
+"strip-ansi-cjs@npm:strip-ansi@^6.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==
@@ -10973,16 +10952,7 @@ 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":
-  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:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.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==