test: use updated selector for create admin button in installation form

feat: introduce inline error messages for InstallationForm and SignUpForm
2024-12-12 10:50:58 +00:00 · 2024-12-12 10:50:58 +00:00
58 changed files with 821 additions and 406 deletions
--- a/.github/workflows/playwright.yml
+++ b/.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:
--- a/packages/backend/src/controllers/api/v1/admin/apps/create-config.ee.js
+++ b/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,
  };
 };
--- a/packages/backend/src/controllers/api/v1/admin/apps/create-config.ee.test.js
+++ b/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,
    };

--- a/packages/backend/src/controllers/api/v1/admin/apps/update-config.ee.js
+++ b/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,
  };
 };
--- a/packages/backend/src/controllers/api/v1/admin/apps/update-config.ee.test.js
+++ b/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,
    };

--- a/packages/backend/src/controllers/api/v1/apps/create-connection.test.js
+++ b/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 () => {
--- a/packages/backend/src/controllers/api/v1/apps/get-config.ee.test.js
+++ b/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,
    });

--- a/packages/backend/src/controllers/api/v1/connections/reset-connection.test.js
+++ b/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',
      },
--- a/packages/backend/src/controllers/api/v1/connections/update-connection.test.js
+++ b/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);
  });
--- a/packages/backend/src/db/migrations/20241204103153_add_use_only_predefined_auth_clients_in_app_config.js
+++ b/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');
-  });
-}
--- a/packages/backend/src/db/migrations/20241204103355_remove_obsolete_fields_in_app_config.js
+++ b/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);
-  });
-}
--- a/packages/backend/src/models/snapshots/app-config.test.js.snap
+++ b/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",
--- a/packages/backend/src/models/app-auth-client.js
+++ b/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() {
--- a/packages/backend/src/models/app-auth-client.test.js
+++ b/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();

--- a/packages/backend/src/models/app-config.js
+++ b/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;
--- a/packages/backend/src/models/app-config.test.js
+++ b/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();
+  });
 });
--- a/packages/backend/src/models/connection.js
+++ b/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)
--- a/packages/backend/src/models/connection.test.js
+++ b/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({
--- a/packages/backend/src/models/user.test.js
+++ b/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]);
    });

--- a/packages/backend/src/serializers/app-config.js
+++ b/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(),
  };
--- a/packages/backend/src/serializers/app-config.test.js
+++ b/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(),
    };
--- a/packages/backend/src/serializers/auth.js
+++ b/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,
  };
 };

--- a/packages/backend/src/serializers/auth.test.js
+++ b/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);
--- a/packages/backend/src/serializers/connection.js
+++ b/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,
--- a/packages/backend/src/serializers/connection.test.js
+++ b/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,
--- a/packages/backend/test/mocks/rest/api/v1/admin/apps/create-config.js
+++ b/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: {
--- a/packages/backend/test/mocks/rest/api/v1/apps/create-connection.js
+++ b/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,
--- a/packages/backend/test/mocks/rest/api/v1/apps/get-auth.js
+++ b/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,
--- a/packages/backend/test/mocks/rest/api/v1/apps/get-config.js
+++ b/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(),
    },
--- a/packages/backend/test/mocks/rest/api/v1/apps/get-connections.js
+++ b/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: {
--- a/packages/backend/test/mocks/rest/api/v1/connections/reset-connection.js
+++ b/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,
--- a/packages/backend/test/mocks/rest/api/v1/connections/update-connection.js
+++ b/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,
--- a/packages/backend/test/mocks/rest/api/v1/steps/get-connection.js
+++ b/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,
--- a/packages/backend/vitest.config.js
+++ b/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,
      },
    },
  },
--- a/packages/e2e-tests/fixtures/admin-setup-page.js
+++ b/packages/e2e-tests/fixtures/admin-setup-page.js
@@ -1,4 +1,4 @@
-import { BasePage } from "./base-page";
+import { BasePage } from './base-page';
 const { faker } = require('@faker-js/faker');
 const { expect } = require('@playwright/test');

@@ -6,16 +6,18 @@ export class AdminSetupPage extends BasePage {
  path = '/installation';

  /**
-  * @param {import('@playwright/test').Page} page
-  */
+   * @param {import('@playwright/test').Page} page
+   */
  constructor(page) {
    super(page);

    this.fullNameTextField = this.page.getByTestId('fullName-text-field');
    this.emailTextField = this.page.getByTestId('email-text-field');
    this.passwordTextField = this.page.getByTestId('password-text-field');
-    this.repeatPasswordTextField = this.page.getByTestId('repeat-password-text-field');
-    this.createAdminButton = this.page.getByTestId('signUp-button');
+    this.repeatPasswordTextField = this.page.getByTestId(
+      'repeat-password-text-field'
+    );
+    this.createAdminButton = this.page.getByTestId('installation-button');
    this.invalidFields = this.page.locator('p.Mui-error');
    this.successAlert = this.page.getByTestId('success-alert');
  }
@@ -46,7 +48,7 @@ export class AdminSetupPage extends BasePage {
    await this.repeatPasswordTextField.fill(testUser.wronglyRepeatedPassword);
  }

-  async submitAdminForm()  {
+  async submitAdminForm() {
    await this.createAdminButton.click();
  }

@@ -59,7 +61,10 @@ export class AdminSetupPage extends BasePage {
  }

  async expectSuccessMessageToContainLoginLink() {
-    await expect(await this.successAlert.locator('a')).toHaveAttribute('href', '/login');
+    await expect(await this.successAlert.locator('a')).toHaveAttribute(
+      'href',
+      '/login'
+    );
  }

  generateUser() {
@@ -69,7 +74,7 @@ export class AdminSetupPage extends BasePage {
      fullName: faker.person.fullName(),
      email: faker.internet.email(),
      password: faker.internet.password(),
-      wronglyRepeatedPassword: faker.internet.password()
+      wronglyRepeatedPassword: faker.internet.password(),
    };
  }
-};
+}
--- a/packages/web/package.json
+++ b/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",
--- a/packages/web/src/components/AddAppConnection/index.jsx
+++ b/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) =>
--- a/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx
+++ b/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;
    }

--- a/packages/web/src/components/AdminApplicationSettings/index.jsx
+++ b/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"
--- a/packages/web/src/components/AppAuthClientsDialog/index.ee.jsx
+++ b/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}>
--- a/packages/web/src/components/AppConnectionContextMenu/index.jsx
+++ b/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;
--- a/packages/web/src/components/AppConnectionRow/index.jsx
+++ b/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}
--- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx
+++ b/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]);
--- a/packages/web/src/components/Form/index.jsx
+++ b/packages/web/src/components/Form/index.jsx
@@ -46,7 +46,12 @@ function Form(props) {

  return (
    <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onSubmit)} {...formProps}>
+      <form
+        onSubmit={methods.handleSubmit((data, event) =>
+          onSubmit?.(data, event, methods.setError),
+        )}
+        {...formProps}
+      >
        {render ? render(methods) : children}
      </form>
    </FormProvider>
--- a/packages/web/src/components/InstallationForm/index.jsx
+++ b/packages/web/src/components/InstallationForm/index.jsx
@@ -2,35 +2,55 @@ import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { Alert } from '@mui/material';
+import Alert from '@mui/material/Alert';
 import LoadingButton from '@mui/lab/LoadingButton';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { enqueueSnackbar } from 'notistack';
 import { useQueryClient } from '@tanstack/react-query';
 import Link from '@mui/material/Link';

+import { getGeneralErrorMessage } from 'helpers/errors';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useInstallation from 'hooks/useInstallation';
 import * as URLS from 'config/urls';
 import Form from 'components/Form';
 import TextField from 'components/TextField';

-const validationSchema = yup.object().shape({
-  fullName: yup.string().trim().required('installationForm.mandatoryInput'),
-  email: yup
-    .string()
-    .trim()
-    .email('installationForm.validateEmail')
-    .required('installationForm.mandatoryInput'),
-  password: yup.string().required('installationForm.mandatoryInput'),
-  confirmPassword: yup
-    .string()
-    .required('installationForm.mandatoryInput')
-    .oneOf([yup.ref('password')], 'installationForm.passwordsMustMatch'),
-});
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryInputMessage = (inputNameId) =>
+    formatMessage('installationForm.mandatoryInput', {
+      inputName: formatMessage(inputNameId),
+    });

-const initialValues = {
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(
+        getMandatoryInputMessage('installationForm.fullNameFieldLabel'),
+      ),
+    email: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('installationForm.emailFieldLabel'))
+      .email(formatMessage('installationForm.validateEmail')),
+    password: yup
+      .string()
+      .required(getMandatoryInputMessage('installationForm.passwordFieldLabel'))
+      .min(6, formatMessage('installationForm.passwordMinLength')),
+    confirmPassword: yup
+      .string()
+      .required(
+        getMandatoryInputMessage('installationForm.confirmPasswordFieldLabel'),
+      )
+      .oneOf(
+        [yup.ref('password')],
+        formatMessage('installationForm.passwordsMustMatch'),
+      ),
+  });
+};
+
+const defaultValues = {
  fullName: '',
  email: '',
  password: '',
@@ -39,7 +59,7 @@ const initialValues = {

 function InstallationForm() {
  const formatMessage = useFormatMessage();
-  const install = useInstallation();
+  const { mutateAsync: install, isSuccess, isPending } = useInstallation();
  const queryClient = useQueryClient();

  const handleOnRedirect = () => {
@@ -48,21 +68,38 @@ function InstallationForm() {
    });
  };

-  const handleSubmit = async (values) => {
-    const { fullName, email, password } = values;
+  const handleSubmit = async ({ fullName, email, password }, e, setError) => {
    try {
-      await install.mutateAsync({
+      await install({
        fullName,
        email,
        password,
      });
    } catch (error) {
-      enqueueSnackbar(
-        error?.message || formatMessage('installationForm.error'),
-        {
-          variant: 'error',
-        },
-      );
+      const errors = error?.response?.data?.errors;
+      if (errors) {
+        const fieldNames = Object.keys(defaultValues);
+        Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+          if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+            setError(fieldName, {
+              type: 'fieldRequestError',
+              message: fieldErrors.join(', '),
+            });
+          }
+        });
+      }
+
+      const generalError = getGeneralErrorMessage({
+        error,
+        fallbackMessage: formatMessage('installationForm.error'),
+      });
+
+      if (generalError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: generalError,
+        });
+      }
    }
  };

@@ -82,11 +119,13 @@ function InstallationForm() {
        {formatMessage('installationForm.title')}
      </Typography>
      <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
        onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
        mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
          <>
            <TextField
              label={formatMessage('installationForm.fullNameFieldLabel')}
@@ -95,19 +134,12 @@ function InstallationForm() {
              margin="dense"
              autoComplete="fullName"
              data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
-              helperText={
-                touchedFields.fullName && errors?.fullName?.message
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage(
-                        'installationForm.fullNameFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.fullName}
+              helperText={errors?.fullName?.message}
              required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
            />
+
            <TextField
              label={formatMessage('installationForm.emailFieldLabel')}
              name="email"
@@ -115,19 +147,12 @@ function InstallationForm() {
              margin="dense"
              autoComplete="email"
              data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
-              helperText={
-                touchedFields.email && errors?.email?.message
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage(
-                        'installationForm.emailFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.email}
+              helperText={errors?.email?.message}
              required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
            />
+
            <TextField
              label={formatMessage('installationForm.passwordFieldLabel')}
              name="password"
@@ -135,19 +160,12 @@ function InstallationForm() {
              margin="dense"
              type="password"
              data-test="password-text-field"
-              error={touchedFields.password && !!errors?.password}
-              helperText={
-                touchedFields.password && errors?.password?.message
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage(
-                        'installationForm.passwordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.password}
+              helperText={errors?.password?.message}
              required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
            />
+
            <TextField
              label={formatMessage(
                'installationForm.confirmPasswordFieldLabel',
@@ -157,52 +175,53 @@ function InstallationForm() {
              margin="dense"
              type="password"
              data-test="repeat-password-text-field"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
-              helperText={
-                touchedFields.confirmPassword &&
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'installationForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.confirmPassword}
+              helperText={errors?.confirmPassword?.message}
              required
-              readOnly={install.isSuccess}
+              readOnly={isSuccess}
            />

+            {errors?.root?.general && (
+              <Alert data-test="error-alert" severity="error" sx={{ mt: 2 }}>
+                {errors.root.general.message}
+              </Alert>
+            )}
+
+            {isSuccess && (
+              <Alert
+                data-test="success-alert"
+                severity="success"
+                sx={{ mt: 2 }}
+              >
+                {formatMessage('installationForm.success', {
+                  link: (str) => (
+                    <Link
+                      component={RouterLink}
+                      to={URLS.LOGIN}
+                      onClick={handleOnRedirect}
+                      replace
+                    >
+                      {str}
+                    </Link>
+                  ),
+                })}
+              </Alert>
+            )}
            <LoadingButton
              type="submit"
              variant="contained"
              color="primary"
-              sx={{ boxShadow: 2, mt: 3 }}
-              loading={install.isPending}
-              disabled={install.isSuccess}
+              sx={{ boxShadow: 2, mt: 2 }}
+              loading={isPending}
+              disabled={isSuccess}
              fullWidth
-              data-test="signUp-button"
+              data-test="installation-button"
            >
              {formatMessage('installationForm.submit')}
            </LoadingButton>
          </>
        )}
      />
-      {install.isSuccess && (
-        <Alert data-test="success-alert" severity="success" sx={{ mt: 3 }}>
-          {formatMessage('installationForm.success', {
-            link: (str) => (
-              <Link
-                component={RouterLink}
-                to={URLS.LOGIN}
-                onClick={handleOnRedirect}
-                replace
-              >
-                {str}
-              </Link>
-            ),
-          })}
-        </Alert>
-      )}
    </Paper>
  );
 }
--- a/packages/web/src/components/SignUpForm/index.ee.jsx
+++ b/packages/web/src/components/SignUpForm/index.ee.jsx
@@ -3,33 +3,52 @@ import { useNavigate } from 'react-router-dom';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import LoadingButton from '@mui/lab/LoadingButton';
+import Alert from '@mui/material/Alert';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';

+import { getGeneralErrorMessage } from 'helpers/errors';
 import useAuthentication from 'hooks/useAuthentication';
 import * as URLS from 'config/urls';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCreateAccessToken from 'hooks/useCreateAccessToken';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import useRegisterUser from 'hooks/useRegisterUser';

-const validationSchema = yup.object().shape({
-  fullName: yup.string().trim().required('signupForm.mandatoryInput'),
-  email: yup
-    .string()
-    .trim()
-    .email('signupForm.validateEmail')
-    .required('signupForm.mandatoryInput'),
-  password: yup.string().required('signupForm.mandatoryInput'),
-  confirmPassword: yup
-    .string()
-    .required('signupForm.mandatoryInput')
-    .oneOf([yup.ref('password')], 'signupForm.passwordsMustMatch'),
-});
+const getValidationSchema = (formatMessage) => {
+  const getMandatoryInputMessage = (inputNameId) =>
+    formatMessage('signupForm.mandatoryInput', {
+      inputName: formatMessage(inputNameId),
+    });

-const initialValues = {
+  return yup.object().shape({
+    fullName: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('signupForm.fullNameFieldLabel')),
+    email: yup
+      .string()
+      .trim()
+      .required(getMandatoryInputMessage('signupForm.emailFieldLabel'))
+      .email(formatMessage('signupForm.validateEmail')),
+    password: yup
+      .string()
+      .required(getMandatoryInputMessage('signupForm.passwordFieldLabel'))
+      .min(6, formatMessage('signupForm.passwordMinLength')),
+    confirmPassword: yup
+      .string()
+      .required(
+        getMandatoryInputMessage('signupForm.confirmPasswordFieldLabel'),
+      )
+      .oneOf(
+        [yup.ref('password')],
+        formatMessage('signupForm.passwordsMustMatch'),
+      ),
+  });
+};
+
+const defaultValues = {
  fullName: '',
  email: '',
  password: '',
@@ -40,7 +59,6 @@ function SignUpForm() {
  const navigate = useNavigate();
  const authentication = useAuthentication();
  const formatMessage = useFormatMessage();
-  const enqueueSnackbar = useEnqueueSnackbar();
  const { mutateAsync: registerUser, isPending: isRegisterUserPending } =
    useRegisterUser();
  const { mutateAsync: createAccessToken, isPending: loginLoading } =
@@ -52,7 +70,7 @@ function SignUpForm() {
    }
  }, [authentication.isAuthenticated]);

-  const handleSubmit = async (values) => {
+  const handleSubmit = async (values, e, setError) => {
    try {
      const { fullName, email, password } = values;
      await registerUser({
@@ -67,25 +85,28 @@ function SignUpForm() {
      const { token } = data;
      authentication.updateToken(token);
    } catch (error) {
-      const errors = error?.response?.data?.errors
-        ? Object.values(error.response.data.errors)
-        : [];
+      const errors = error?.response?.data?.errors;
+      if (errors) {
+        const fieldNames = Object.keys(defaultValues);
+        Object.entries(errors).forEach(([fieldName, fieldErrors]) => {
+          if (fieldNames.includes(fieldName) && Array.isArray(fieldErrors)) {
+            setError(fieldName, {
+              type: 'fieldRequestError',
+              message: fieldErrors.join(', '),
+            });
+          }
+        });
+      }

-      if (errors.length) {
-        for (const [error] of errors) {
-          enqueueSnackbar(error, {
-            variant: 'error',
-            SnackbarProps: {
-              'data-test': 'snackbar-sign-up-error',
-            },
-          });
-        }
-      } else {
-        enqueueSnackbar(error?.message || formatMessage('signupForm.error'), {
-          variant: 'error',
-          SnackbarProps: {
-            'data-test': 'snackbar-sign-up-error',
-          },
+      const generalError = getGeneralErrorMessage({
+        error,
+        fallbackMessage: formatMessage('signupForm.error'),
+      });
+
+      if (generalError) {
+        setError('root.general', {
+          type: 'requestError',
+          message: generalError,
        });
      }
    }
@@ -108,11 +129,13 @@ function SignUpForm() {
      </Typography>

      <Form
-        defaultValues={initialValues}
+        automaticValidation={false}
+        noValidate
+        defaultValues={defaultValues}
        onSubmit={handleSubmit}
-        resolver={yupResolver(validationSchema)}
+        resolver={yupResolver(getValidationSchema(formatMessage))}
        mode="onChange"
-        render={({ formState: { errors, touchedFields } }) => (
+        render={({ formState: { errors } }) => (
          <>
            <TextField
              label={formatMessage('signupForm.fullNameFieldLabel')}
@@ -121,14 +144,9 @@ function SignUpForm() {
              margin="dense"
              autoComplete="fullName"
              data-test="fullName-text-field"
-              error={touchedFields.fullName && !!errors?.fullName}
-              helperText={
-                touchedFields.fullName && errors?.fullName?.message
-                  ? formatMessage(errors?.fullName?.message, {
-                      inputName: formatMessage('signupForm.fullNameFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.fullName}
+              helperText={errors?.fullName?.message}
+              required
            />

            <TextField
@@ -138,14 +156,9 @@ function SignUpForm() {
              margin="dense"
              autoComplete="email"
              data-test="email-text-field"
-              error={touchedFields.email && !!errors?.email}
-              helperText={
-                touchedFields.email && errors?.email?.message
-                  ? formatMessage(errors?.email?.message, {
-                      inputName: formatMessage('signupForm.emailFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.email}
+              helperText={errors?.email?.message}
+              required
            />

            <TextField
@@ -154,14 +167,9 @@ function SignUpForm() {
              fullWidth
              margin="dense"
              type="password"
-              error={touchedFields.password && !!errors?.password}
-              helperText={
-                touchedFields.password && errors?.password?.message
-                  ? formatMessage(errors?.password?.message, {
-                      inputName: formatMessage('signupForm.passwordFieldLabel'),
-                    })
-                  : ''
-              }
+              error={!!errors?.password}
+              helperText={errors?.password?.message}
+              required
            />

            <TextField
@@ -170,19 +178,21 @@ function SignUpForm() {
              fullWidth
              margin="dense"
              type="password"
-              error={touchedFields.confirmPassword && !!errors?.confirmPassword}
-              helperText={
-                touchedFields.confirmPassword &&
-                errors?.confirmPassword?.message
-                  ? formatMessage(errors?.confirmPassword?.message, {
-                      inputName: formatMessage(
-                        'signupForm.confirmPasswordFieldLabel',
-                      ),
-                    })
-                  : ''
-              }
+              error={!!errors?.confirmPassword}
+              helperText={errors?.confirmPassword?.message}
+              required
            />

+            {errors?.root?.general && (
+              <Alert
+                data-test="alert-sign-up-error"
+                severity="error"
+                sx={{ mt: 2 }}
+              >
+                {errors.root.general.message}
+              </Alert>
+            )}
+
            <LoadingButton
              type="submit"
              variant="contained"
--- a/packages/web/src/components/SplitButton/index.jsx
+++ b/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>
--- a/packages/web/src/helpers/errors.js
+++ b/packages/web/src/helpers/errors.js
@@ -0,0 +1,18 @@
+// Helpers to extract errors received from the API
+
+export const getGeneralErrorMessage = ({ error, fallbackMessage }) => {
+  if (!error) {
+    return;
+  }
+
+  const errors = error?.response?.data?.errors;
+  const generalError = errors?.general;
+
+  if (generalError && Array.isArray(generalError)) {
+    return generalError.join(' ');
+  }
+
+  if (!errors) {
+    return error?.message || fallbackMessage;
+  }
+};
--- a/packages/web/src/hooks/useAuthenticateApp.ee.js
+++ b/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,
--- a/packages/web/src/hooks/useAutomatischInfo.js
+++ b/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;
--- a/packages/web/src/hooks/useCreateConnection.js
+++ b/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;
 }
--- a/packages/web/src/hooks/useLicense.js
+++ b/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;
-}
--- a/packages/web/src/index.jsx
+++ b/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);

--- a/packages/web/src/locales/en.json
+++ b/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",
@@ -138,6 +138,7 @@
  "installationForm.submit": "Create admin",
  "installationForm.validateEmail": "Email must be valid.",
  "installationForm.passwordsMustMatch": "Passwords must match.",
+  "installationForm.passwordMinLength": "Password must be at least 6 characters long.",
  "installationForm.mandatoryInput": "{inputName} is required.",
  "installationForm.success": "The admin account has been created, and thus, the installation has been completed. You can now log in <link>here</link>.",
  "installationForm.error": "Something went wrong. Please try again.",
@@ -149,6 +150,7 @@
  "signupForm.submit": "Sign up",
  "signupForm.validateEmail": "Email must be valid.",
  "signupForm.passwordsMustMatch": "Passwords must match.",
+  "signupForm.passwordMinLength": "Password must be at least 6 characters long.",
  "signupForm.mandatoryInput": "{inputName} is required.",
  "signupForm.error": "Something went wrong. Please try again.",
  "loginForm.title": "Login",
@@ -292,7 +294,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",
--- a/packages/web/src/pages/AdminApplication/index.jsx
+++ b/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={
--- a/packages/web/src/pages/Application/index.jsx
+++ b/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}
                        />
--- a/packages/web/src/propTypes/propTypes.js
+++ b/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,
 });
--- a/packages/web/yarn.lock
+++ b/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==
Author	SHA1	Message	Date
Jakub P.	3de18ab46f	test: use updated selector for create admin button in installation form	2024-12-12 10:50:58 +00:00
kasia.oczkowska	54f509ee38	feat: introduce inline error messages for InstallationForm and SignUpForm	2024-12-12 10:50:58 +00:00