feat: add sftp integration

fix: expose missing createdAt and updatedAt fields from flow

packages/backend/package.json

@@ -67,6 +67,7 @@
     "pluralize": "^8.0.0",
     "raw-body": "^2.5.2",
     "showdown": "^2.1.0",
+    "ssh2-sftp-client": "^10.0.3",
     "winston": "^3.7.1",
     "xmlrpc": "^1.3.2"
   },
@@ -95,6 +96,7 @@
     "url": "https://github.com/automatisch/automatisch/issues"
   },
   "devDependencies": {
+    "node-gyp": "^10.1.0",
     "nodemon": "^2.0.13",
     "supertest": "^6.3.3",
     "vitest": "^1.1.3"

packages/backend/src/apps/http-request/actions/custom-request/index.js

@@ -90,7 +90,7 @@ export default defineAction({
 
   async run($) {
     const method = $.step.parameters.method;
-    const data = $.step.parameters.data;
+    const data = $.step.parameters.data || null;
     const url = $.step.parameters.url;
     const headers = $.step.parameters.headers;
 
@@ -108,14 +108,17 @@ export default defineAction({
       return result;
     }, {});
 
-    let contentType = headersObject['content-type'];
+    let expectedResponseContentType = headersObject.accept;
 
     // in case HEAD request is not supported by the URL
     try {
       const metadataResponse = await $.http.head(url, {
         headers: headersObject,
       });
-      contentType = metadataResponse.headers['content-type'];
+
+      if (!expectedResponseContentType) {
+        expectedResponseContentType = metadataResponse.headers['content-type'];
+      }
 
       throwIfFileSizeExceedsLimit(metadataResponse.headers['content-length']);
       // eslint-disable-next-line no-empty
@@ -128,7 +131,7 @@ export default defineAction({
       headers: headersObject,
     };
 
-    if (!isPossiblyTextBased(contentType)) {
+    if (!isPossiblyTextBased(expectedResponseContentType)) {
       requestData.responseType = 'arraybuffer';
     }
 
@@ -138,7 +141,7 @@ export default defineAction({
 
     let responseData = response.data;
 
-    if (!isPossiblyTextBased(contentType)) {
+    if (!isPossiblyTextBased(expectedResponseContentType)) {
       responseData = Buffer.from(responseData).toString('base64');
     }
 

packages/backend/src/apps/pipedrive/actions/create-deal/index.js

@@ -64,32 +64,17 @@ export default defineAction({
       value: '1',
       description:
         'The ID of the stage this deal will be added to. If omitted, the deal will be placed in the first stage of the default pipeline.',
-      options: [
+      variables: true,
-        {
+      source: {
-          label: 'Qualified (Pipeline)',
+        type: 'query',
-          value: 1,
+        name: 'getDynamicData',
-        },
+        arguments: [
-        {
+          {
-          label: 'Contact Made (Pipeline)',
+            name: 'key',
-          value: 2,
+            value: 'listStages',
-        },
+          },
-        {
+        ],
-          label: 'Prospect Qualified (Pipeline)',
+      },
-          value: 3,
-        },
-        {
-          label: 'Needs Defined (Pipeline)',
-          value: 4,
-        },
-        {
-          label: 'Proposal Made (Pipeline)',
-          value: 5,
-        },
-        {
-          label: 'Negotiations Started (Pipeline)',
-          value: 6,
-        },
-      ],
     },
     {
       label: 'Owner',

packages/backend/src/apps/pipedrive/dynamic-data/index.js

@@ -1,23 +1,25 @@
 import listActivityTypes from './list-activity-types/index.js';
 import listCurrencies from './list-currencies/index.js';
 import listDeals from './list-deals/index.js';
-import listLeads from './list-leads/index.js';
 import listLeadLabels from './list-lead-labels/index.js';
-import listOrganizations from './list-organizations/index.js';
+import listLeads from './list-leads/index.js';
 import listOrganizationLabelField from './list-organization-label-field/index.js';
+import listOrganizations from './list-organizations/index.js';
 import listPersonLabelField from './list-person-label-field/index.js';
 import listPersons from './list-persons/index.js';
+import listStages from './list-stages/index.js';
 import listUsers from './list-users/index.js';
 
 export default [
   listActivityTypes,
   listCurrencies,
   listDeals,
-  listLeads,
   listLeadLabels,
-  listOrganizations,
+  listLeads,
   listOrganizationLabelField,
+  listOrganizations,
   listPersonLabelField,
   listPersons,
+  listStages,
   listUsers,
 ];

packages/backend/src/apps/pipedrive/dynamic-data/list-stages/index.js

@@ -0,0 +1,23 @@
+export default {
+  name: 'List stages',
+  key: 'listStages',
+
+  async run($) {
+    const stages = {
+      data: [],
+    };
+
+    const { data } = await $.http.get('/api/v1/stages');
+
+    if (data.data?.length) {
+      for (const stage of data.data) {
+        stages.data.push({
+          value: stage.id,
+          name: stage.name,
+        });
+      }
+    }
+
+    return stages;
+  },
+};

packages/backend/src/apps/sftp/assets/favicon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 103.95"><title>sftp</title><path d="M21.56,47.27l6.21-.39a4.56,4.56,0,0,0,.82,2.29,3.45,3.45,0,0,0,2.88,1.28,3.16,3.16,0,0,0,2.15-.65,2,2,0,0,0,.76-1.52,2,2,0,0,0-.71-1.48,8.45,8.45,0,0,0-3.34-1.22A14.06,14.06,0,0,1,24.21,43a5.14,5.14,0,0,1-1.85-4.07,5.44,5.44,0,0,1,.95-3.07,6.19,6.19,0,0,1,2.84-2.28,13.26,13.26,0,0,1,5.19-.83,10.58,10.58,0,0,1,6.18,1.51,6.53,6.53,0,0,1,2.53,4.8l-6.14.37a3.38,3.38,0,0,0-1-2.1,3.34,3.34,0,0,0-2.17-.65,2.63,2.63,0,0,0-1.72.48,1.49,1.49,0,0,0-.58,1.18,1.19,1.19,0,0,0,.47.9,5.23,5.23,0,0,0,2.18.78,27.38,27.38,0,0,1,6.13,1.87,6.38,6.38,0,0,1,2.7,2.35,5.94,5.94,0,0,1,.84,3.13,6.73,6.73,0,0,1-1.12,3.75,7.1,7.1,0,0,1-3.15,2.6,12.64,12.64,0,0,1-5.08.89c-3.6,0-6.09-.7-7.47-2.08a8.18,8.18,0,0,1-2.35-5.27ZM9.07,15.63h3.09V8.2A1.87,1.87,0,0,1,14,6.33h3.32V1.87A1.88,1.88,0,0,1,19.23,0H49.57a1.87,1.87,0,0,1,1.87,1.87V6.33h59.5a1.87,1.87,0,0,1,1.87,1.87v7.43h3.41a1.87,1.87,0,0,1,1.87,1.87,1.75,1.75,0,0,1,0,.4L111.51,66a7.12,7.12,0,0,1-2,4.07,5.62,5.62,0,0,1-4,1.69H69.25v5.57h.17A2.67,2.67,0,0,1,72.08,80v4.81h13a2.67,2.67,0,0,1,2.54,1.87h27.84a7,7,0,0,1,6.85,4.48,8.05,8.05,0,0,1,.57,3,8.14,8.14,0,0,1-.57,3,7,7,0,0,1-6.85,4.47H87.73A2.67,2.67,0,0,1,85.08,104H39.92a2.67,2.67,0,0,1-2.65-2.37H7.42A7,7,0,0,1,.57,97.11a8.14,8.14,0,0,1-.57-3,8.05,8.05,0,0,1,.57-3,7,7,0,0,1,6.85-4.48h30a2.67,2.67,0,0,1,2.54-1.87H50.68V80a2.67,2.67,0,0,1,2.66-2.66h1V71.75H18A5.69,5.69,0,0,1,13.89,70,6.84,6.84,0,0,1,12,65.92L6.92,17.69a1.83,1.83,0,0,1,.37-1.33,1.86,1.86,0,0,1,1.29-.71,4,4,0,0,1,.49,0ZM57.86,77.32h7.86v-5.5H57.86v5.5ZM87.74,90.19v7.86h27.72A3.63,3.63,0,0,0,119,95.8a4.68,4.68,0,0,0,.31-1.68,4.63,4.63,0,0,0-.31-1.67,3.63,3.63,0,0,0-3.58-2.26ZM37.26,98.05V90.19H7.42a3.63,3.63,0,0,0-3.58,2.26,4.63,4.63,0,0,0-.31,1.67,4.73,4.73,0,0,0,.31,1.68,3.63,3.63,0,0,0,3.58,2.25ZM10.85,19.37l4.84,46.17a3.14,3.14,0,0,0,.83,1.86A2.07,2.07,0,0,0,18,68h87.54a2,2,0,0,0,1.41-.6,3.28,3.28,0,0,0,.88-1.92l6.28-46.12Zm5.05-9.3v5.55l93.17-.79V10.07H49.57A1.87,1.87,0,0,1,47.69,8.2V3.74H21.1V8.2a1.87,1.87,0,0,1-1.87,1.87Zm28.3,23H60.35v4.54H50.76v3.7H59v4.28H50.76v8.62H44.2V33.12Zm18.35,0H82.42v5.22H75.75V54.26H69.22V38.34H62.55V33.12Zm22.93,0H96.35a7.48,7.48,0,0,1,5.32,1.68,6.36,6.36,0,0,1,1.77,4.82,6.55,6.55,0,0,1-1.93,5q-1.94,1.82-5.89,1.81H92v7.82H85.48V33.12Zm6.56,9h1.61a4.14,4.14,0,0,0,2.67-.66,2.13,2.13,0,0,0,.77-1.68,2.37,2.37,0,0,0-.67-1.69,3.49,3.49,0,0,0-2.51-.69H92v4.72Z"/></svg>

packages/backend/src/apps/sftp/auth/index.js

@@ -0,0 +1,69 @@
+import verifyCredentials from './verify-credentials.js';
+import isStillVerified from './is-still-verified.js';
+
+export default {
+  fields: [
+    {
+      key: 'screenName',
+      label: 'Screen Name',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description:
+        'Screen name of your connection to be used on Automatisch UI.',
+      clickToCopy: false,
+    },
+    {
+      key: 'host',
+      label: 'Host',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'The host information Automatisch will connect to.',
+      docUrl: 'https://automatisch.io/docs/ftp#host',
+      clickToCopy: false,
+    },
+    {
+      key: 'username',
+      label: 'Username',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'Your SFTP login credentials.',
+      docUrl: 'https://automatisch.io/docs/sftp#username',
+      clickToCopy: false,
+    },
+    {
+      key: 'password',
+      label: 'Password',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      docUrl: 'https://automatisch.io/docs/sftp#password',
+      clickToCopy: false,
+    },
+    {
+      key: 'port',
+      label: 'Port',
+      type: 'string',
+      required: false,
+      readOnly: false,
+      value: '21',
+      placeholder: null,
+      description: null,
+      docUrl: 'https://automatisch.io/docs/sftp#port',
+      clickToCopy: false,
+    },
+  ],
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/sftp/auth/is-still-verified.js

@@ -0,0 +1,8 @@
+import verifyCredentials from './verify-credentials.js';
+
+const isStillVerified = async ($) => {
+  await verifyCredentials($);
+  return true;
+};
+
+export default isStillVerified;

packages/backend/src/apps/sftp/auth/verify-credentials.js

@@ -0,0 +1,23 @@
+import Client from 'ssh2-sftp-client';
+
+const verifyCredentials = async ($) => {
+  const sftpClient = new Client();
+
+  try {
+    await sftpClient.connect({
+      host: $.auth.data.host,
+      port: $.auth.data.port,
+      username: $.auth.data.username,
+      password: $.auth.data.password,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+
+  await sftpClient.end();
+  await $.auth.set({
+    screenName: $.auth.data.screenName,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/sftp/index.js

@@ -0,0 +1,14 @@
+import defineApp from '../../helpers/define-app.js';
+import auth from './auth/index.js';
+
+export default defineApp({
+  name: 'SFTP',
+  key: 'sftp',
+  iconUrl: '{BASE_URL}/apps/sftp/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/sftp/connection',
+  supportsConnections: true,
+  baseUrl: '',
+  apiBaseUrl: '',
+  primaryColor: '000000',
+  auth,
+});

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

@@ -3,6 +3,9 @@ import AppConfig from '../../../../models/app-config.js';
 
 export default async (request, response) => {
   const appConfig = await AppConfig.query()
+    .withGraphFetched({
+      appAuthClients: true,
+    })
     .findOne({
       key: request.params.appKey,
     })

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

@@ -0,0 +1,24 @@
+import { renderObject } from '../../../../helpers/renderer.js';
+import App from '../../../../models/app.js';
+
+export default async (request, response) => {
+  const app = await App.findOneByKey(request.params.appKey);
+
+  const connections = await request.currentUser.authorizedConnections
+    .clone()
+    .select('connections.*')
+    .withGraphFetched({
+      appConfig: true,
+      appAuthClient: true,
+    })
+    .fullOuterJoinRelated('steps')
+    .where({
+      'connections.key': app.key,
+      'connections.draft': false,
+    })
+    .countDistinct('steps.flow_id as flowCount')
+    .groupBy('connections.id')
+    .orderBy('created_at', 'desc');
+
+  renderObject(response, connections);
+};

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

@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import app from '../../../../app.js';
+import createAuthTokenByUserId from '../../../../helpers/create-auth-token-by-user-id.js';
+import { createUser } from '../../../../../test/factories/user.js';
+import { createConnection } from '../../../../../test/factories/connection.js';
+import { createPermission } from '../../../../../test/factories/permission.js';
+import getConnectionsMock from '../../../../../test/mocks/rest/api/v1/apps/get-connections.js';
+
+describe('GET /api/v1/apps/:appKey/connections', () => {
+  let currentUser, currentUserRole, token;
+
+  beforeEach(async () => {
+    currentUser = await createUser();
+    currentUserRole = await currentUser.$relatedQuery('role');
+
+    token = createAuthTokenByUserId(currentUser.id);
+  });
+
+  it('should return the connections data of specified app for current user', async () => {
+    const currentUserConnectionOne = await createConnection({
+      userId: currentUser.id,
+      key: 'deepl',
+      draft: false,
+    });
+
+    const currentUserConnectionTwo = await createConnection({
+      userId: currentUser.id,
+      key: 'deepl',
+      draft: false,
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    const response = await request(app)
+      .get('/api/v1/apps/deepl/connections')
+      .set('Authorization', token)
+      .expect(200);
+
+    const expectedPayload = await getConnectionsMock([
+      currentUserConnectionTwo,
+      currentUserConnectionOne,
+    ]);
+
+    expect(response.body).toEqual(expectedPayload);
+  });
+
+  it('should return the connections data of specified app for another user', async () => {
+    const anotherUser = await createUser();
+
+    const anotherUserConnectionOne = await createConnection({
+      userId: anotherUser.id,
+      key: 'deepl',
+      draft: false,
+    });
+
+    const anotherUserConnectionTwo = await createConnection({
+      userId: anotherUser.id,
+      key: 'deepl',
+      draft: false,
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    const response = await request(app)
+      .get('/api/v1/apps/deepl/connections')
+      .set('Authorization', token)
+      .expect(200);
+
+    const expectedPayload = await getConnectionsMock([
+      anotherUserConnectionTwo,
+      anotherUserConnectionOne,
+    ]);
+
+    expect(response.body).toEqual(expectedPayload);
+  });
+
+  it('should return not found response for invalid connection UUID', async () => {
+    await createPermission({
+      action: 'update',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await request(app)
+      .get('/api/v1/connections/invalid-connection-id/connections')
+      .set('Authorization', token)
+      .expect(404);
+  });
+});

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

@@ -0,0 +1,14 @@
+import { renderObject } from '../../../../helpers/renderer.js';
+
+export default async (request, response) => {
+  let connection = await request.currentUser.authorizedConnections
+    .clone()
+    .findOne({
+      id: request.params.connectionId,
+    })
+    .throwIfNotFound();
+
+  connection = await connection.testAndUpdateConnection();
+
+  renderObject(response, connection);
+};

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

@@ -0,0 +1,123 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import Crypto from 'crypto';
+import app from '../../../../app.js';
+import createAuthTokenByUserId from '../../../../helpers/create-auth-token-by-user-id.js';
+import { createUser } from '../../../../../test/factories/user.js';
+import { createConnection } from '../../../../../test/factories/connection.js';
+import { createPermission } from '../../../../../test/factories/permission.js';
+
+describe('POST /api/v1/connections/:connectionId/test', () => {
+  let currentUser, currentUserRole, token;
+
+  beforeEach(async () => {
+    currentUser = await createUser();
+    currentUserRole = await currentUser.$relatedQuery('role');
+
+    token = createAuthTokenByUserId(currentUser.id);
+  });
+
+  it('should update the connection as not verified for current user', async () => {
+    const currentUserConnection = await createConnection({
+      userId: currentUser.id,
+      key: 'deepl',
+      verified: true,
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await createPermission({
+      action: 'update',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    const response = await request(app)
+      .post(`/api/v1/connections/${currentUserConnection.id}/test`)
+      .set('Authorization', token)
+      .expect(200);
+
+    expect(response.body.data.verified).toEqual(false);
+  });
+
+  it('should update the connection as not verified for another user', async () => {
+    const anotherUser = await createUser();
+
+    const anotherUserConnection = await createConnection({
+      userId: anotherUser.id,
+      key: 'deepl',
+      verified: true,
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    await createPermission({
+      action: 'update',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    const response = await request(app)
+      .post(`/api/v1/connections/${anotherUserConnection.id}/test`)
+      .set('Authorization', token)
+      .expect(200);
+
+    expect(response.body.data.verified).toEqual(false);
+  });
+
+  it('should return not found response for not existing connection UUID', async () => {
+    const notExistingConnectionUUID = Crypto.randomUUID();
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await createPermission({
+      action: 'update',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await request(app)
+      .post(`/api/v1/connections/${notExistingConnectionUUID}/test`)
+      .set('Authorization', token)
+      .expect(404);
+  });
+
+  it('should return bad request response for invalid UUID', async () => {
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await createPermission({
+      action: 'update',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await request(app)
+      .post('/api/v1/connections/invalidConnectionUUID/test')
+      .set('Authorization', token)
+      .expect(400);
+  });
+});

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

@@ -0,0 +1,18 @@
+import { renderObject } from '../../../../helpers/renderer.js';
+
+export default async (request, response) => {
+  const step = await request.currentUser.authorizedSteps
+    .clone()
+    .where('steps.id', request.params.stepId)
+    .whereNotNull('steps.app_key')
+    .whereNotNull('steps.connection_id')
+    .first()
+    .throwIfNotFound();
+
+  const dynamicData = await step.createDynamicData(
+    request.body.dynamicDataKey,
+    request.body.parameters
+  );
+
+  renderObject(response, dynamicData);
+};

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

@@ -0,0 +1,244 @@
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import Crypto from 'crypto';
+import app from '../../../../app.js';
+import createAuthTokenByUserId from '../../../../helpers/create-auth-token-by-user-id';
+import { createUser } from '../../../../../test/factories/user';
+import { createConnection } from '../../../../../test/factories/connection';
+import { createFlow } from '../../../../../test/factories/flow';
+import { createStep } from '../../../../../test/factories/step';
+import { createPermission } from '../../../../../test/factories/permission';
+import listRepos from '../../../../apps/github/dynamic-data/list-repos/index.js';
+import HttpError from '../../../../errors/http.js';
+
+describe('POST /api/v1/steps/:stepId/dynamic-data', () => {
+  let currentUser, currentUserRole, token;
+
+  beforeEach(async () => {
+    currentUser = await createUser();
+    currentUserRole = await currentUser.$relatedQuery('role');
+
+    token = createAuthTokenByUserId(currentUser.id);
+  });
+
+  describe('should return dynamically created data', () => {
+    let repositories;
+
+    beforeEach(async () => {
+      repositories = [
+        {
+          value: 'automatisch/automatisch',
+          name: 'automatisch/automatisch',
+        },
+        {
+          value: 'automatisch/sample',
+          name: 'automatisch/sample',
+        },
+      ];
+
+      vi.spyOn(listRepos, 'run').mockImplementation(async () => {
+        return {
+          data: repositories,
+        };
+      });
+    });
+
+    it('of the current users step', async () => {
+      const currentUserFlow = await createFlow({ userId: currentUser.id });
+      const connection = await createConnection({ userId: currentUser.id });
+
+      const actionStep = await createStep({
+        flowId: currentUserFlow.id,
+        connectionId: connection.id,
+        type: 'action',
+        appKey: 'github',
+        key: 'createIssue',
+      });
+
+      await createPermission({
+        action: 'read',
+        subject: 'Flow',
+        roleId: currentUserRole.id,
+        conditions: ['isCreator'],
+      });
+
+      await createPermission({
+        action: 'update',
+        subject: 'Flow',
+        roleId: currentUserRole.id,
+        conditions: ['isCreator'],
+      });
+
+      const response = await request(app)
+        .post(`/api/v1/steps/${actionStep.id}/dynamic-data`)
+        .set('Authorization', token)
+        .send({
+          dynamicDataKey: 'listRepos',
+          parameters: {},
+        })
+        .expect(200);
+
+      expect(response.body.data).toEqual(repositories);
+    });
+
+    it('of the another users step', async () => {
+      const anotherUser = await createUser();
+      const anotherUserFlow = await createFlow({ userId: anotherUser.id });
+      const connection = await createConnection({ userId: anotherUser.id });
+
+      const actionStep = await createStep({
+        flowId: anotherUserFlow.id,
+        connectionId: connection.id,
+        type: 'action',
+        appKey: 'github',
+        key: 'createIssue',
+      });
+
+      await createPermission({
+        action: 'read',
+        subject: 'Flow',
+        roleId: currentUserRole.id,
+        conditions: [],
+      });
+
+      await createPermission({
+        action: 'update',
+        subject: 'Flow',
+        roleId: currentUserRole.id,
+        conditions: [],
+      });
+
+      const response = await request(app)
+        .post(`/api/v1/steps/${actionStep.id}/dynamic-data`)
+        .set('Authorization', token)
+        .send({
+          dynamicDataKey: 'listRepos',
+          parameters: {},
+        })
+        .expect(200);
+
+      expect(response.body.data).toEqual(repositories);
+    });
+  });
+
+  describe('should return error for dynamically created data', () => {
+    let errors;
+
+    beforeEach(async () => {
+      errors = {
+        message: 'Not Found',
+        documentation_url:
+          'https://docs.github.com/rest/users/users#get-a-user',
+      };
+
+      vi.spyOn(listRepos, 'run').mockImplementation(async () => {
+        throw new HttpError({ message: errors });
+      });
+    });
+
+    it('of the current users step', async () => {
+      const currentUserFlow = await createFlow({ userId: currentUser.id });
+      const connection = await createConnection({ userId: currentUser.id });
+
+      const actionStep = await createStep({
+        flowId: currentUserFlow.id,
+        connectionId: connection.id,
+        type: 'action',
+        appKey: 'github',
+        key: 'createIssue',
+      });
+
+      await createPermission({
+        action: 'read',
+        subject: 'Flow',
+        roleId: currentUserRole.id,
+        conditions: ['isCreator'],
+      });
+
+      await createPermission({
+        action: 'update',
+        subject: 'Flow',
+        roleId: currentUserRole.id,
+        conditions: ['isCreator'],
+      });
+
+      const response = await request(app)
+        .post(`/api/v1/steps/${actionStep.id}/dynamic-data`)
+        .set('Authorization', token)
+        .send({
+          dynamicDataKey: 'listRepos',
+          parameters: {},
+        })
+        .expect(200);
+
+      expect(response.body.errors).toEqual(errors);
+    });
+  });
+
+  it('should return not found response for not existing step UUID', async () => {
+    await createPermission({
+      action: 'update',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    const notExistingStepUUID = Crypto.randomUUID();
+
+    await request(app)
+      .get(`/api/v1/steps/${notExistingStepUUID}/dynamic-data`)
+      .set('Authorization', token)
+      .expect(404);
+  });
+
+  it('should return not found response for existing step UUID without app key', async () => {
+    await createPermission({
+      action: 'update',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    const step = await createStep({ appKey: null });
+
+    await request(app)
+      .get(`/api/v1/steps/${step.id}/dynamic-data`)
+      .set('Authorization', token)
+      .expect(404);
+  });
+
+  it('should return bad request response for invalid UUID', async () => {
+    await createPermission({
+      action: 'update',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    await request(app)
+      .post('/api/v1/steps/invalidStepUUID/dynamic-fields')
+      .set('Authorization', token)
+      .expect(400);
+  });
+});

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

@@ -0,0 +1,7 @@
+import { renderObject } from '../../../../helpers/renderer.js';
+
+export default async (request, response) => {
+  const apps = await request.currentUser.getApps(request.query.name);
+
+  renderObject(response, apps, { serializer: 'App' });
+};

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

@@ -0,0 +1,210 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import request from 'supertest';
+import app from '../../../../app.js';
+import createAuthTokenByUserId from '../../../../helpers/create-auth-token-by-user-id';
+import { createRole } from '../../../../../test/factories/role';
+import { createUser } from '../../../../../test/factories/user';
+import { createPermission } from '../../../../../test/factories/permission.js';
+import { createFlow } from '../../../../../test/factories/flow.js';
+import { createStep } from '../../../../../test/factories/step.js';
+import { createConnection } from '../../../../../test/factories/connection.js';
+import getAppsMock from '../../../../../test/mocks/rest/api/v1/users/get-apps.js';
+
+describe('GET /api/v1/users/:userId/apps', () => {
+  let currentUser, currentUserRole, token;
+
+  beforeEach(async () => {
+    currentUserRole = await createRole();
+    currentUser = await createUser({ roleId: currentUserRole.id });
+
+    token = createAuthTokenByUserId(currentUser.id);
+  });
+
+  it('should return all apps of the current user', async () => {
+    await createPermission({
+      action: 'read',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    const flowOne = await createFlow({ userId: currentUser.id });
+
+    await createStep({
+      flowId: flowOne.id,
+      appKey: 'webhook',
+    });
+
+    const flowOneActionStepConnection = await createConnection({
+      userId: currentUser.id,
+      key: 'deepl',
+      draft: false,
+    });
+
+    await createStep({
+      connectionId: flowOneActionStepConnection.id,
+      flowId: flowOne.id,
+      appKey: 'deepl',
+    });
+
+    const flowTwo = await createFlow({ userId: currentUser.id });
+
+    const flowTwoTriggerStepConnection = await createConnection({
+      userId: currentUser.id,
+      key: 'github',
+      draft: false,
+    });
+
+    await createStep({
+      connectionId: flowTwoTriggerStepConnection.id,
+      flowId: flowTwo.id,
+      appKey: 'github',
+    });
+
+    await createStep({
+      flowId: flowTwo.id,
+      appKey: 'slack',
+    });
+
+    const response = await request(app)
+      .get(`/api/v1/users/${currentUser.id}/apps`)
+      .set('Authorization', token)
+      .expect(200);
+
+    const expectedPayload = getAppsMock();
+    expect(response.body).toEqual(expectedPayload);
+  });
+
+  it('should return all apps of the another user', async () => {
+    const anotherUser = await createUser();
+
+    await createPermission({
+      action: 'read',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: [],
+    });
+
+    const flowOne = await createFlow({ userId: anotherUser.id });
+
+    await createStep({
+      flowId: flowOne.id,
+      appKey: 'webhook',
+    });
+
+    const flowOneActionStepConnection = await createConnection({
+      userId: anotherUser.id,
+      key: 'deepl',
+      draft: false,
+    });
+
+    await createStep({
+      connectionId: flowOneActionStepConnection.id,
+      flowId: flowOne.id,
+      appKey: 'deepl',
+    });
+
+    const flowTwo = await createFlow({ userId: anotherUser.id });
+
+    const flowTwoTriggerStepConnection = await createConnection({
+      userId: anotherUser.id,
+      key: 'github',
+      draft: false,
+    });
+
+    await createStep({
+      connectionId: flowTwoTriggerStepConnection.id,
+      flowId: flowTwo.id,
+      appKey: 'github',
+    });
+
+    await createStep({
+      flowId: flowTwo.id,
+      appKey: 'slack',
+    });
+
+    const response = await request(app)
+      .get(`/api/v1/users/${currentUser.id}/apps`)
+      .set('Authorization', token)
+      .expect(200);
+
+    const expectedPayload = getAppsMock();
+    expect(response.body).toEqual(expectedPayload);
+  });
+
+  it('should return specified app of the current user', async () => {
+    await createPermission({
+      action: 'read',
+      subject: 'Flow',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    await createPermission({
+      action: 'read',
+      subject: 'Connection',
+      roleId: currentUserRole.id,
+      conditions: ['isCreator'],
+    });
+
+    const flowOne = await createFlow({ userId: currentUser.id });
+
+    await createStep({
+      flowId: flowOne.id,
+      appKey: 'webhook',
+    });
+
+    const flowOneActionStepConnection = await createConnection({
+      userId: currentUser.id,
+      key: 'deepl',
+      draft: false,
+    });
+
+    await createStep({
+      connectionId: flowOneActionStepConnection.id,
+      flowId: flowOne.id,
+      appKey: 'deepl',
+    });
+
+    const flowTwo = await createFlow({ userId: currentUser.id });
+
+    const flowTwoTriggerStepConnection = await createConnection({
+      userId: currentUser.id,
+      key: 'github',
+      draft: false,
+    });
+
+    await createStep({
+      connectionId: flowTwoTriggerStepConnection.id,
+      flowId: flowTwo.id,
+      appKey: 'github',
+    });
+
+    await createStep({
+      flowId: flowTwo.id,
+      appKey: 'slack',
+    });
+
+    const response = await request(app)
+      .get(`/api/v1/users/${currentUser.id}/apps?name=deepl`)
+      .set('Authorization', token)
+      .expect(200);
+
+    expect(response.body.data.length).toEqual(1);
+    expect(response.body.data[0].key).toEqual('deepl');
+  });
+});

packages/backend/src/db/migrations/20240326195748_remove_app_config_id_from_app_auth_clients.js

@@ -6,10 +6,6 @@ export async function up(knex) {
 
 export async function down(knex) {
   await knex.schema.table('app_auth_clients', (table) => {
-    table
+    table.uuid('app_config_id').references('id').inTable('app_configs');
-      .uuid('app_config_id')
-      .notNullable()
-      .references('id')
-      .inTable('app_configs');
   });
 }

packages/backend/src/db/migrations/20240327205509_add_can_connect_column_to_app_configs.js

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

packages/backend/src/db/migrations/20240327211151_add_can_custom_connect_column_to_app_configs.js

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

packages/backend/src/graphql/queries/get-app-auth-client.ee.js

@@ -1,24 +0,0 @@
-import AppAuthClient from '../../models/app-auth-client.js';
-
-const getAppAuthClient = async (_parent, params, context) => {
-  let canSeeAllClients = false;
-  try {
-    context.currentUser.can('read', 'App');
-
-    canSeeAllClients = true;
-  } catch {
-    // void
-  }
-
-  const appAuthClient = AppAuthClient.query()
-    .findById(params.id)
-    .throwIfNotFound();
-
-  if (!canSeeAllClients) {
-    appAuthClient.where({ active: true });
-  }
-
-  return await appAuthClient;
-};
-
-export default getAppAuthClient;

packages/backend/src/graphql/queries/get-app-auth-clients.ee.js

@@ -1,33 +0,0 @@
-import AppConfig from '../../models/app-config.js';
-
-const getAppAuthClients = async (_parent, params, context) => {
-  let canSeeAllClients = false;
-  try {
-    context.currentUser.can('read', 'App');
-
-    canSeeAllClients = true;
-  } catch {
-    // void
-  }
-
-  const appConfig = await AppConfig.query()
-    .findOne({
-      key: params.appKey,
-    })
-    .throwIfNotFound();
-
-  const appAuthClients = appConfig
-    .$relatedQuery('appAuthClients')
-    .where({ active: params.active })
-    .skipUndefined();
-
-  if (!canSeeAllClients) {
-    appAuthClients.where({
-      active: true,
-    });
-  }
-
-  return await appAuthClients;
-};
-
-export default getAppAuthClients;

packages/backend/src/graphql/queries/get-app.js

@@ -1,41 +0,0 @@
-import App from '../../models/app.js';
-import Connection from '../../models/connection.js';
-
-const getApp = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('read', 'Connection');
-
-  const userConnections = context.currentUser.$relatedQuery('connections');
-  const allConnections = Connection.query();
-  const connectionBaseQuery = conditions.isCreator
-    ? userConnections
-    : allConnections;
-
-  const app = await App.findOneByKey(params.key);
-
-  if (context.currentUser) {
-    const connections = await connectionBaseQuery
-      .clone()
-      .select('connections.*')
-      .withGraphFetched({
-        appConfig: true,
-        appAuthClient: true,
-      })
-      .fullOuterJoinRelated('steps')
-      .where({
-        'connections.key': params.key,
-        'connections.draft': false,
-      })
-      .countDistinct('steps.flow_id as flowCount')
-      .groupBy('connections.id')
-      .orderBy('created_at', 'desc');
-
-    return {
-      ...app,
-      connections,
-    };
-  }
-
-  return app;
-};
-
-export default getApp;

packages/backend/src/graphql/queries/get-billing-and-usage.ee.js

@@ -1,101 +0,0 @@
-import { DateTime } from 'luxon';
-import Billing from '../../helpers/billing/index.ee.js';
-import ExecutionStep from '../../models/execution-step.js';
-
-const getBillingAndUsage = async (_parent, _params, context) => {
-  const persistedSubscription = await context.currentUser.$relatedQuery(
-    'currentSubscription'
-  );
-
-  const subscription = persistedSubscription
-    ? paidSubscription(persistedSubscription)
-    : freeTrialSubscription();
-
-  return {
-    subscription,
-    usage: {
-      task: executionStepCount(context),
-    },
-  };
-};
-
-const paidSubscription = (subscription) => {
-  const currentPlan = Billing.paddlePlans.find(
-    (plan) => plan.productId === subscription.paddlePlanId
-  );
-
-  return {
-    status: subscription.status,
-    monthlyQuota: {
-      title: currentPlan.limit,
-      action: {
-        type: 'link',
-        text: 'Cancel plan',
-        src: subscription.cancelUrl,
-      },
-    },
-    nextBillAmount: {
-      title: subscription.nextBillAmount
-        ? '€' + subscription.nextBillAmount
-        : '---',
-      action: {
-        type: 'link',
-        text: 'Update payment method',
-        src: subscription.updateUrl,
-      },
-    },
-    nextBillDate: {
-      title: subscription.nextBillDate ? subscription.nextBillDate : '---',
-      action: {
-        type: 'text',
-        text: '(monthly payment)',
-      },
-    },
-  };
-};
-
-const freeTrialSubscription = () => {
-  return {
-    status: null,
-    monthlyQuota: {
-      title: 'Free Trial',
-      action: {
-        type: 'link',
-        text: 'Upgrade plan',
-        src: '/settings/billing/upgrade',
-      },
-    },
-    nextBillAmount: {
-      title: '---',
-      action: null,
-    },
-    nextBillDate: {
-      title: '---',
-      action: null,
-    },
-  };
-};
-
-const executionIds = async (context) => {
-  return (
-    await context.currentUser
-      .$relatedQuery('executions')
-      .select('executions.id')
-  ).map((execution) => execution.id);
-};
-
-const executionStepCount = async (context) => {
-  const executionStepCount = await ExecutionStep.query()
-    .whereIn('execution_id', await executionIds(context))
-    .andWhere(
-      'created_at',
-      '>=',
-      DateTime.now().minus({ days: 30 }).toISODate()
-    )
-    .count()
-    .first();
-
-  return executionStepCount.count;
-};
-
-export default getBillingAndUsage;

packages/backend/src/graphql/queries/get-connected-apps.js

@@ -1,67 +0,0 @@
-import App from '../../models/app.js';
-import Flow from '../../models/flow.js';
-import Connection from '../../models/connection.js';
-
-const getConnectedApps = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('read', 'Connection');
-
-  const userConnections = context.currentUser.$relatedQuery('connections');
-  const allConnections = Connection.query();
-  const connectionBaseQuery = conditions.isCreator
-    ? userConnections
-    : allConnections;
-
-  const userFlows = context.currentUser.$relatedQuery('flows');
-  const allFlows = Flow.query();
-  const flowBaseQuery = conditions.isCreator ? userFlows : allFlows;
-
-  let apps = await App.findAll(params.name);
-
-  const connections = await connectionBaseQuery
-    .clone()
-    .select('connections.key')
-    .where({ draft: false })
-    .count('connections.id as count')
-    .groupBy('connections.key');
-
-  const flows = await flowBaseQuery
-    .clone()
-    .withGraphJoined('steps')
-    .orderBy('created_at', 'desc');
-
-  const duplicatedUsedApps = flows
-    .map((flow) => flow.steps.map((step) => step.appKey))
-    .flat()
-    .filter(Boolean);
-
-  const connectionKeys = connections.map((connection) => connection.key);
-  const usedApps = [...new Set([...duplicatedUsedApps, ...connectionKeys])];
-
-  apps = apps
-    .filter((app) => {
-      return usedApps.includes(app.key);
-    })
-    .map((app) => {
-      const connection = connections.find(
-        (connection) => connection.key === app.key
-      );
-
-      app.connectionCount = connection?.count || 0;
-      app.flowCount = 0;
-
-      flows.forEach((flow) => {
-        const usedFlow = flow.steps.find((step) => step.appKey === app.key);
-
-        if (usedFlow) {
-          app.flowCount += 1;
-        }
-      });
-
-      return app;
-    })
-    .sort((appA, appB) => appA.name.localeCompare(appB.name));
-
-  return apps;
-};
-
-export default getConnectedApps;

packages/backend/src/graphql/queries/get-dynamic-data.js

@@ -1,65 +0,0 @@
-import App from '../../models/app.js';
-import Step from '../../models/step.js';
-import ExecutionStep from '../../models/execution-step.js';
-import globalVariable from '../../helpers/global-variable.js';
-import computeParameters from '../../helpers/compute-parameters.js';
-
-const getDynamicData = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('update', 'Flow');
-  const userSteps = context.currentUser.$relatedQuery('steps');
-  const allSteps = Step.query();
-  const stepBaseQuery = conditions.isCreator ? userSteps : allSteps;
-
-  const step = await stepBaseQuery
-    .clone()
-    .withGraphFetched({
-      connection: true,
-      flow: true,
-    })
-    .findById(params.stepId);
-
-  if (!step) return null;
-
-  const connection = step.connection;
-
-  if (!connection || !step.appKey) return null;
-
-  const flow = step.flow;
-  const app = await App.findOneByKey(step.appKey);
-  const $ = await globalVariable({ connection, app, flow, step });
-
-  const command = app.dynamicData.find((data) => data.key === params.key);
-
-  // apply run-time parameters that're not persisted yet
-  for (const parameterKey in params.parameters) {
-    const parameterValue = params.parameters[parameterKey];
-    $.step.parameters[parameterKey] = parameterValue;
-  }
-
-  const lastExecution = await flow.$relatedQuery('lastExecution');
-  const lastExecutionId = lastExecution?.id;
-
-  const priorExecutionSteps = lastExecutionId
-    ? await ExecutionStep.query().where({
-        execution_id: lastExecutionId,
-      })
-    : [];
-
-  // compute variables in parameters
-  const computedParameters = computeParameters(
-    $.step.parameters,
-    priorExecutionSteps
-  );
-
-  $.step.parameters = computedParameters;
-
-  const fetchedData = await command.run($);
-
-  if (fetchedData.error) {
-    throw new Error(JSON.stringify(fetchedData.error));
-  }
-
-  return fetchedData.data;
-};
-
-export default getDynamicData;

packages/backend/src/graphql/queries/get-flow.js

@@ -1,19 +0,0 @@
-import Flow from '../../models/flow.js';
-
-const getFlow = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('read', 'Flow');
-  const userFlows = context.currentUser.$relatedQuery('flows');
-  const allFlows = Flow.query();
-  const baseQuery = conditions.isCreator ? userFlows : allFlows;
-
-  const flow = await baseQuery
-    .clone()
-    .withGraphJoined('[steps.[connection]]')
-    .orderBy('steps.position', 'asc')
-    .findOne({ 'flows.id': params.id })
-    .throwIfNotFound();
-
-  return flow;
-};
-
-export default getFlow;

packages/backend/src/graphql/queries/get-flow.test.js

@@ -1,240 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import request from 'supertest';
-import app from '../../app';
-import appConfig from '../../config/app';
-import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
-import { createRole } from '../../../test/factories/role';
-import { createPermission } from '../../../test/factories/permission';
-import { createUser } from '../../../test/factories/user';
-import { createFlow } from '../../../test/factories/flow';
-import { createStep } from '../../../test/factories/step';
-import { createConnection } from '../../../test/factories/connection';
-
-describe('graphQL getFlow query', () => {
-  const query = (flowId) => {
-    return `
-      query {
-        getFlow(id: "${flowId}") {
-          id
-          name
-          active
-          status
-          steps {
-            id
-            type
-            key
-            appKey
-            iconUrl
-            webhookUrl
-            status
-            position
-            connection {
-              id
-              verified
-              createdAt
-            }
-            parameters
-          }
-        }
-      }
-    `;
-  };
-
-  describe('and without permissions', () => {
-    it('should throw not authorized error', async () => {
-      const userWithoutPermissions = await createUser();
-      const token = createAuthTokenByUserId(userWithoutPermissions.id);
-      const flow = await createFlow();
-
-      const response = await request(app)
-        .post('/graphql')
-        .set('Authorization', token)
-        .send({ query: query(flow.id) })
-        .expect(200);
-
-      expect(response.body.errors).toBeDefined();
-      expect(response.body.errors[0].message).toEqual('Not authorized!');
-    });
-  });
-
-  describe('and with correct permission', () => {
-    let currentUser, currentUserRole, currentUserFlow;
-
-    beforeEach(async () => {
-      currentUserRole = await createRole();
-      currentUser = await createUser({ roleId: currentUserRole.id });
-      currentUserFlow = await createFlow({ userId: currentUser.id });
-    });
-
-    describe('and with isCreator condition', () => {
-      it('should return executions data of the current user', async () => {
-        await createPermission({
-          action: 'read',
-          subject: 'Flow',
-          roleId: currentUserRole.id,
-          conditions: ['isCreator'],
-        });
-
-        const triggerStep = await createStep({
-          flowId: currentUserFlow.id,
-          type: 'trigger',
-          key: 'catchRawWebhook',
-          webhookPath: `/webhooks/flows/${currentUserFlow.id}`,
-        });
-
-        const actionConnection = await createConnection({
-          userId: currentUser.id,
-          formattedData: {
-            screenName: 'Test',
-            authenticationKey: 'test key',
-          },
-        });
-
-        const actionStep = await createStep({
-          flowId: currentUserFlow.id,
-          type: 'action',
-          connectionId: actionConnection.id,
-          key: 'translateText',
-        });
-
-        const token = createAuthTokenByUserId(currentUser.id);
-
-        const response = await request(app)
-          .post('/graphql')
-          .set('Authorization', token)
-          .send({ query: query(currentUserFlow.id) })
-          .expect(200);
-
-        const expectedResponsePayload = {
-          data: {
-            getFlow: {
-              active: currentUserFlow.active,
-              id: currentUserFlow.id,
-              name: currentUserFlow.name,
-              status: 'draft',
-              steps: [
-                {
-                  appKey: triggerStep.appKey,
-                  connection: null,
-                  iconUrl: `${appConfig.baseUrl}/apps/${triggerStep.appKey}/assets/favicon.svg`,
-                  id: triggerStep.id,
-                  key: 'catchRawWebhook',
-                  parameters: {},
-                  position: 1,
-                  status: triggerStep.status,
-                  type: 'trigger',
-                  webhookUrl: `${appConfig.baseUrl}/webhooks/flows/${currentUserFlow.id}`,
-                },
-                {
-                  appKey: actionStep.appKey,
-                  connection: {
-                    createdAt: actionConnection.createdAt.getTime().toString(),
-                    id: actionConnection.id,
-                    verified: actionConnection.verified,
-                  },
-                  iconUrl: `${appConfig.baseUrl}/apps/${actionStep.appKey}/assets/favicon.svg`,
-                  id: actionStep.id,
-                  key: 'translateText',
-                  parameters: {},
-                  position: 2,
-                  status: actionStep.status,
-                  type: 'action',
-                  webhookUrl: 'http://localhost:3000/null',
-                },
-              ],
-            },
-          },
-        };
-
-        expect(response.body).toEqual(expectedResponsePayload);
-      });
-    });
-
-    describe('and without isCreator condition', () => {
-      it('should return executions data of all users', async () => {
-        await createPermission({
-          action: 'read',
-          subject: 'Flow',
-          roleId: currentUserRole.id,
-          conditions: [],
-        });
-
-        const anotherUser = await createUser();
-        const anotherUserFlow = await createFlow({ userId: anotherUser.id });
-
-        const triggerStep = await createStep({
-          flowId: anotherUserFlow.id,
-          type: 'trigger',
-          key: 'catchRawWebhook',
-          webhookPath: `/webhooks/flows/${anotherUserFlow.id}`,
-        });
-
-        const actionConnection = await createConnection({
-          userId: anotherUser.id,
-          formattedData: {
-            screenName: 'Test',
-            authenticationKey: 'test key',
-          },
-        });
-
-        const actionStep = await createStep({
-          flowId: anotherUserFlow.id,
-          type: 'action',
-          connectionId: actionConnection.id,
-          key: 'translateText',
-        });
-
-        const token = createAuthTokenByUserId(currentUser.id);
-
-        const response = await request(app)
-          .post('/graphql')
-          .set('Authorization', token)
-          .send({ query: query(anotherUserFlow.id) })
-          .expect(200);
-
-        const expectedResponsePayload = {
-          data: {
-            getFlow: {
-              active: anotherUserFlow.active,
-              id: anotherUserFlow.id,
-              name: anotherUserFlow.name,
-              status: 'draft',
-              steps: [
-                {
-                  appKey: triggerStep.appKey,
-                  connection: null,
-                  iconUrl: `${appConfig.baseUrl}/apps/${triggerStep.appKey}/assets/favicon.svg`,
-                  id: triggerStep.id,
-                  key: 'catchRawWebhook',
-                  parameters: {},
-                  position: 1,
-                  status: triggerStep.status,
-                  type: 'trigger',
-                  webhookUrl: `${appConfig.baseUrl}/webhooks/flows/${anotherUserFlow.id}`,
-                },
-                {
-                  appKey: actionStep.appKey,
-                  connection: {
-                    createdAt: actionConnection.createdAt.getTime().toString(),
-                    id: actionConnection.id,
-                    verified: actionConnection.verified,
-                  },
-                  iconUrl: `${appConfig.baseUrl}/apps/${actionStep.appKey}/assets/favicon.svg`,
-                  id: actionStep.id,
-                  key: 'translateText',
-                  parameters: {},
-                  position: 2,
-                  status: actionStep.status,
-                  type: 'action',
-                  webhookUrl: 'http://localhost:3000/null',
-                },
-              ],
-            },
-          },
-        };
-
-        expect(response.body).toEqual(expectedResponsePayload);
-      });
-    });
-  });
-});

packages/backend/src/graphql/queries/get-step-with-test-executions.js

@@ -1,34 +0,0 @@
-import { ref } from 'objection';
-import ExecutionStep from '../../models/execution-step.js';
-import Step from '../../models/step.js';
-
-const getStepWithTestExecutions = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('update', 'Flow');
-  const userSteps = context.currentUser.$relatedQuery('steps');
-  const allSteps = Step.query();
-  const stepBaseQuery = conditions.isCreator ? userSteps : allSteps;
-
-  const step = await stepBaseQuery
-    .clone()
-    .findOne({ 'steps.id': params.stepId })
-    .throwIfNotFound();
-
-  const previousStepsWithCurrentStep = await stepBaseQuery
-    .clone()
-    .withGraphJoined('executionSteps')
-    .where('flow_id', '=', step.flowId)
-    .andWhere('position', '<', step.position)
-    .andWhere(
-      'executionSteps.created_at',
-      '=',
-      ExecutionStep.query()
-        .max('created_at')
-        .where('step_id', '=', ref('steps.id'))
-        .andWhere('status', 'success')
-    )
-    .orderBy('steps.position', 'asc');
-
-  return previousStepsWithCurrentStep;
-};
-
-export default getStepWithTestExecutions;

packages/backend/src/graphql/queries/test-connection.js

@@ -1,38 +0,0 @@
-import App from '../../models/app.js';
-import Connection from '../../models/connection.js';
-import globalVariable from '../../helpers/global-variable.js';
-
-const testConnection = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('update', 'Connection');
-  const userConnections = context.currentUser.$relatedQuery('connections');
-  const allConnections = Connection.query();
-  const connectionBaseQuery = conditions.isCreator
-    ? userConnections
-    : allConnections;
-
-  let connection = await connectionBaseQuery
-    .clone()
-    .findOne({
-      id: params.id,
-    })
-    .throwIfNotFound();
-
-  const app = await App.findOneByKey(connection.key, false);
-  const $ = await globalVariable({ connection, app });
-
-  let isStillVerified;
-  try {
-    isStillVerified = !!(await app.auth.isStillVerified($));
-  } catch {
-    isStillVerified = false;
-  }
-
-  connection = await connection.$query().patchAndFetch({
-    formattedData: connection.formattedData,
-    verified: isStillVerified,
-  });
-
-  return connection;
-};
-
-export default testConnection;

packages/backend/src/graphql/query-resolvers.js

@@ -1,23 +0,0 @@
-import getApp from './queries/get-app.js';
-import getAppAuthClient from './queries/get-app-auth-client.ee.js';
-import getAppAuthClients from './queries/get-app-auth-clients.ee.js';
-import getBillingAndUsage from './queries/get-billing-and-usage.ee.js';
-import getConnectedApps from './queries/get-connected-apps.js';
-import getDynamicData from './queries/get-dynamic-data.js';
-import getFlow from './queries/get-flow.js';
-import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
-import testConnection from './queries/test-connection.js';
-
-const queryResolvers = {
-  getApp,
-  getAppAuthClient,
-  getAppAuthClients,
-  getBillingAndUsage,
-  getConnectedApps,
-  getDynamicData,
-  getFlow,
-  getStepWithTestExecutions,
-  testConnection,
-};
-
-export default queryResolvers;

packages/backend/src/graphql/resolvers.js

@@ -1,8 +1,6 @@
 import mutationResolvers from './mutation-resolvers.js';
-import queryResolvers from './query-resolvers.js';
 
 const resolvers = {
-  Query: queryResolvers,
   Mutation: mutationResolvers,
 };
 

packages/backend/src/graphql/schema.graphql

@@ -1,19 +1,6 @@
 type Query {
-  getApp(key: String!): App
+  placeholderQuery(name: String): Boolean
-  getAppAuthClient(id: String!): AppAuthClient
-  getAppAuthClients(appKey: String!, active: Boolean): [AppAuthClient]
-  getConnectedApps(name: String): [App]
-  testConnection(id: String!): Connection
-  getFlow(id: String!): Flow
-  getStepWithTestExecutions(stepId: String!): [Step]
-  getDynamicData(
-    stepId: String!
-    key: String!
-    parameters: JSONObject
-  ): JSONObject
-  getBillingAndUsage: GetBillingAndUsage
 }
-
 type Mutation {
   createAppConfig(input: CreateAppConfigInput): AppConfig
   createAppAuthClient(input: CreateAppAuthClientInput): AppAuthClient
@@ -563,43 +550,6 @@ type License {
   verified: Boolean
 }
 
-type GetBillingAndUsage {
-  subscription: Subscription
-  usage: Usage
-}
-
-type MonthlyQuota {
-  title: String
-  action: BillingCardAction
-}
-
-type NextBillAmount {
-  title: String
-  action: BillingCardAction
-}
-
-type NextBillDate {
-  title: String
-  action: BillingCardAction
-}
-
-type BillingCardAction {
-  type: String
-  text: String
-  src: String
-}
-
-type Subscription {
-  status: String
-  monthlyQuota: MonthlyQuota
-  nextBillAmount: NextBillAmount
-  nextBillDate: NextBillDate
-}
-
-type Usage {
-  task: Int
-}
-
 type Permission {
   id: String
   action: String

packages/backend/src/helpers/authentication.js

@@ -40,9 +40,6 @@ export const authenticateUser = async (request, response, next) => {
 const isAuthenticatedRule = rule()(isAuthenticated);
 
 export const authenticationRules = {
-  Query: {
-    '*': isAuthenticatedRule,
-  },
   Mutation: {
     '*': isAuthenticatedRule,
     forgotPassword: allow,

packages/backend/src/helpers/authentication.test.js

@@ -42,19 +42,21 @@ describe('authentication rules', () => {
 
   const { queries, mutations } = getQueryAndMutationNames(authenticationRules);
 
-  describe('for queries', () => {
+  if (queries.length) {
-    queries.forEach((query) => {
+    describe('for queries', () => {
-      it(`should apply correct rule for query: ${query}`, () => {
+      queries.forEach((query) => {
-        const ruleApplied = authenticationRules.Query[query];
+        it(`should apply correct rule for query: ${query}`, () => {
+          const ruleApplied = authenticationRules.Query[query];
 
-        if (query === '*') {
+          if (query === '*') {
-          expect(ruleApplied.func).toBe(isAuthenticated);
+            expect(ruleApplied.func).toBe(isAuthenticated);
-        } else {
+          } else {
-          expect(ruleApplied).toEqual(allow);
+            expect(ruleApplied).toEqual(allow);
-        }
+          }
+        });
       });
     });
-  });
+  }
 
   describe('for mutations', () => {
     mutations.forEach((mutation) => {

packages/backend/src/helpers/authorization.js

@@ -7,6 +7,10 @@ const authorizationList = {
     action: 'read',
     subject: 'User',
   },
+  'GET /api/v1/users/:userId/apps': {
+    action: 'read',
+    subject: 'Connection',
+  },
   'GET /api/v1/flows/:flowId': {
     action: 'read',
     subject: 'Flow',
@@ -27,14 +31,26 @@ const authorizationList = {
     action: 'update',
     subject: 'Flow',
   },
+  'POST /api/v1/steps/:stepId/dynamic-data': {
+    action: 'update',
+    subject: 'Flow',
+  },
   'GET /api/v1/connections/:connectionId/flows': {
     action: 'read',
     subject: 'Flow',
   },
+  'POST /api/v1/connections/:connectionId/test': {
+    action: 'update',
+    subject: 'Connection',
+  },
   'GET /api/v1/apps/:appKey/flows': {
     action: 'read',
     subject: 'Flow',
   },
+  'GET /api/v1/apps/:appKey/connections': {
+    action: 'read',
+    subject: 'Connection',
+  },
   'GET /api/v1/executions/:executionId': {
     action: 'read',
     subject: 'Execution',

packages/backend/src/helpers/axios-with-proxy.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import { HttpsProxyAgent } from 'https-proxy-agent';
 import { HttpProxyAgent } from 'http-proxy-agent';
 
-const config = {};
+const config = axios.defaults;
 const httpProxyUrl = process.env.http_proxy;
 const httpsProxyUrl = process.env.https_proxy;
 const supportsProxy = httpProxyUrl || httpsProxyUrl;

packages/backend/src/helpers/error-handler.js

@@ -2,6 +2,7 @@ import logger from './logger.js';
 import objection from 'objection';
 import * as Sentry from './sentry.ee.js';
 const { NotFoundError, DataError } = objection;
+import HttpError from '../errors/http.js';
 
 // Do not remove `next` argument as the function signature will not fit for an error handler middleware
 // eslint-disable-next-line no-unused-vars
@@ -18,6 +19,17 @@ const errorHandler = (error, request, response, next) => {
     response.status(400).end();
   }
 
+  if (error instanceof HttpError) {
+    const httpErrorPayload = {
+      errors: JSON.parse(error.message),
+      meta: {
+        type: 'HttpError',
+      },
+    };
+
+    response.status(200).json(httpErrorPayload);
+  }
+
   const statusCode = error.statusCode || 500;
 
   logger.error(request.method + ' ' + request.url + ' ' + statusCode);
@@ -37,7 +49,7 @@ const errorHandler = (error, request, response, next) => {
 
 const notFoundAppError = (error) => {
   return (
-    error.message.includes('An application with the') ||
+    error.message.includes('An application with the') &&
     error.message.includes("key couldn't be found.")
   );
 };

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

@@ -1,7 +1,6 @@
 import AES from 'crypto-js/aes.js';
 import enc from 'crypto-js/enc-utf8.js';
 import appConfig from '../config/app.js';
-import AppConfig from './app-config.js';
 import Base from './base.js';
 
 class AppAuthClient extends Base {
@@ -60,21 +59,6 @@ class AppAuthClient extends Base {
     this.encryptData();
   }
 
-  async assignCanConnectForAppConfig() {
-    const appConfig = await AppConfig.query().findOne({ key: this.appKey });
-    await appConfig?.$query()?.patch({});
-  }
-
-  async $afterInsert(queryContext) {
-    await super.$afterInsert(queryContext);
-    await this.assignCanConnectForAppConfig();
-  }
-
-  async $afterUpdate(opt, queryContext) {
-    await super.$afterUpdate(opt, queryContext);
-    await this.assignCanConnectForAppConfig();
-  }
-
   async $afterFind() {
     this.decryptData();
   }

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

@@ -15,56 +15,45 @@ class AppConfig extends Base {
       allowCustomConnection: { type: 'boolean', default: false },
       shared: { type: 'boolean', default: false },
       disabled: { type: 'boolean', default: false },
-      canConnect: { type: 'boolean', default: false },
-      canCustomConnect: { type: 'boolean', default: false },
     },
   };
 
+  static relationMappings = () => ({
+    appAuthClients: {
+      relation: Base.HasManyRelation,
+      modelClass: AppAuthClient,
+      join: {
+        from: 'app_configs.key',
+        to: 'app_auth_clients.app_key',
+      },
+    },
+  });
+
+  static get virtualAttributes() {
+    return ['canConnect', 'canCustomConnect'];
+  }
+
+  get canCustomConnect() {
+    return !this.disabled && this.allowCustomConnection;
+  }
+
+  get canConnect() {
+    const hasSomeActiveAppAuthClients = !!this.appAuthClients?.some(
+      (appAuthClient) => appAuthClient.active
+    );
+    const shared = this.shared;
+    const active = this.disabled === false;
+
+    const conditions = [hasSomeActiveAppAuthClients, shared, active];
+
+    return conditions.every(Boolean);
+  }
+
   async getApp() {
     if (!this.key) return null;
 
     return await App.findOneByKey(this.key);
   }
-
-  async hasActiveAppAuthClients() {
-    const appAuthClients = await AppAuthClient.query().where({
-      appKey: this.key,
-    });
-
-    const hasSomeActiveAppAuthClients = !!appAuthClients?.some(
-      (appAuthClient) => appAuthClient.active
-    );
-
-    return hasSomeActiveAppAuthClients;
-  }
-
-  async assignCanConnect() {
-    const shared = this.shared;
-    const active = this.disabled === false;
-    const hasSomeActiveAppAuthClients = await this.hasActiveAppAuthClients();
-
-    const conditions = [hasSomeActiveAppAuthClients, shared, active];
-    const canConnect = conditions.every(Boolean);
-
-    this.canConnect = canConnect;
-  }
-
-  async assignCanCustomConnect() {
-    const canCustomConnect = !this.disabled && this.allowCustomConnection;
-    this.canCustomConnect = canCustomConnect;
-  }
-
-  async $beforeInsert(queryContext) {
-    await super.$beforeInsert(queryContext);
-    await this.assignCanConnect();
-    await this.assignCanCustomConnect();
-  }
-
-  async $beforeUpdate(opt, queryContext) {
-    await super.$beforeUpdate(opt, queryContext);
-    await this.assignCanConnect();
-    await this.assignCanCustomConnect();
-  }
 }
 
 export default AppConfig;

packages/backend/src/models/connection.js

@@ -153,6 +153,24 @@ class Connection extends Base {
     return await App.findOneByKey(this.key);
   }
 
+  async testAndUpdateConnection() {
+    const app = await this.getApp();
+    const $ = await globalVariable({ connection: this, app });
+
+    let isStillVerified;
+
+    try {
+      isStillVerified = !!(await app.auth.isStillVerified($));
+    } catch {
+      isStillVerified = false;
+    }
+
+    return await this.$query().patchAndFetch({
+      formattedData: this.formattedData,
+      verified: isStillVerified,
+    });
+  }
+
   async verifyWebhook(request) {
     if (!this.key) return true;
 

packages/backend/src/models/flow.js

@@ -160,7 +160,7 @@ class Flow extends Base {
   }
 
   async isPaused() {
-    const user = await this.$relatedQuery('user');
+    const user = await this.$relatedQuery('user').withSoftDeleted();
     const allowedToRunFlows = await user.isAllowedToRunFlows();
     return allowedToRunFlows ? false : true;
   }

packages/backend/src/models/step.js

@@ -8,6 +8,7 @@ import ExecutionStep from './execution-step.js';
 import Telemetry from '../helpers/telemetry/index.js';
 import appConfig from '../config/app.js';
 import globalVariable from '../helpers/global-variable.js';
+import computeParameters from '../helpers/compute-parameters.js';
 
 class Step extends Base {
   static tableName = 'steps';
@@ -217,6 +218,39 @@ class Step extends Base {
     return dynamicFields;
   }
 
+  async createDynamicData(dynamicDataKey, parameters) {
+    const connection = await this.$relatedQuery('connection');
+    const flow = await this.$relatedQuery('flow');
+    const app = await this.getApp();
+    const $ = await globalVariable({ connection, app, flow, step: this });
+
+    const command = app.dynamicData.find((data) => data.key === dynamicDataKey);
+
+    for (const parameterKey in parameters) {
+      const parameterValue = parameters[parameterKey];
+      $.step.parameters[parameterKey] = parameterValue;
+    }
+
+    const lastExecution = await flow.$relatedQuery('lastExecution');
+    const lastExecutionId = lastExecution?.id;
+
+    const priorExecutionSteps = lastExecutionId
+      ? await ExecutionStep.query().where({
+          execution_id: lastExecutionId,
+        })
+      : [];
+
+    const computedParameters = computeParameters(
+      $.step.parameters,
+      priorExecutionSteps
+    );
+
+    $.step.parameters = computedParameters;
+    const dynamicData = (await command.run($)).data;
+
+    return dynamicData;
+  }
+
   async updateWebhookUrl() {
     if (this.isAction) return this;
 

packages/backend/src/models/user.js

@@ -7,6 +7,7 @@ import { hasValidLicense } from '../helpers/license.ee.js';
 import userAbility from '../helpers/user-ability.js';
 import createAuthTokenByUserId from '../helpers/create-auth-token-by-user-id.js';
 import Base from './base.js';
+import App from './app.js';
 import Connection from './connection.js';
 import Execution from './execution.js';
 import Flow from './flow.js';
@@ -155,6 +156,13 @@ class User extends Base {
     return conditions.isCreator ? this.$relatedQuery('steps') : Step.query();
   }
 
+  get authorizedConnections() {
+    const conditions = this.can('read', 'Connection');
+    return conditions.isCreator
+      ? this.$relatedQuery('connections')
+      : Connection.query();
+  }
+
   get authorizedExecutions() {
     const conditions = this.can('read', 'Execution');
     return conditions.isCreator
@@ -306,6 +314,56 @@ class User extends Base {
     return invoices;
   }
 
+  async getApps(name) {
+    const connections = await this.authorizedConnections
+      .clone()
+      .select('connections.key')
+      .where({ draft: false })
+      .count('connections.id as count')
+      .groupBy('connections.key');
+
+    const flows = await this.authorizedFlows
+      .clone()
+      .withGraphJoined('steps')
+      .orderBy('created_at', 'desc');
+
+    const duplicatedUsedApps = flows
+      .map((flow) => flow.steps.map((step) => step.appKey))
+      .flat()
+      .filter(Boolean);
+
+    const connectionKeys = connections.map((connection) => connection.key);
+    const usedApps = [...new Set([...duplicatedUsedApps, ...connectionKeys])];
+
+    let apps = await App.findAll(name);
+
+    apps = apps
+      .filter((app) => {
+        return usedApps.includes(app.key);
+      })
+      .map((app) => {
+        const connection = connections.find(
+          (connection) => connection.key === app.key
+        );
+
+        app.connectionCount = connection?.count || 0;
+        app.flowCount = 0;
+
+        flows.forEach((flow) => {
+          const usedFlow = flow.steps.find((step) => step.appKey === app.key);
+
+          if (usedFlow) {
+            app.flowCount += 1;
+          }
+        });
+
+        return app;
+      })
+      .sort((appA, appB) => appA.name.localeCompare(appB.name));
+
+    return apps;
+  }
+
   async $beforeInsert(queryContext) {
     await super.$beforeInsert(queryContext);
 

packages/backend/src/routes/api/v1/apps.js

@@ -6,6 +6,7 @@ import { checkIsEnterprise } from '../../../helpers/check-is-enterprise.js';
 import getAppAction from '../../../controllers/api/v1/apps/get-app.js';
 import getAppsAction from '../../../controllers/api/v1/apps/get-apps.js';
 import getAuthAction from '../../../controllers/api/v1/apps/get-auth.js';
+import getConnectionsAction from '../../../controllers/api/v1/apps/get-connections.js';
 import getConfigAction from '../../../controllers/api/v1/apps/get-config.ee.js';
 import getAuthClientsAction from '../../../controllers/api/v1/apps/get-auth-clients.ee.js';
 import getAuthClientAction from '../../../controllers/api/v1/apps/get-auth-client.ee.js';
@@ -21,6 +22,13 @@ router.get('/', authenticateUser, asyncHandler(getAppsAction));
 router.get('/:appKey', authenticateUser, asyncHandler(getAppAction));
 router.get('/:appKey/auth', authenticateUser, asyncHandler(getAuthAction));
 
+router.get(
+  '/:appKey/connections',
+  authenticateUser,
+  authorizeUser,
+  asyncHandler(getConnectionsAction)
+);
+
 router.get(
   '/:appKey/config',
   authenticateUser,

packages/backend/src/routes/api/v1/connections.js

@@ -3,6 +3,7 @@ import asyncHandler from 'express-async-handler';
 import { authenticateUser } from '../../../helpers/authentication.js';
 import { authorizeUser } from '../../../helpers/authorization.js';
 import getFlowsAction from '../../../controllers/api/v1/connections/get-flows.js';
+import createTestAction from '../../../controllers/api/v1/connections/create-test.js';
 
 const router = Router();
 
@@ -13,4 +14,11 @@ router.get(
   asyncHandler(getFlowsAction)
 );
 
+router.post(
+  '/:connectionId/test',
+  authenticateUser,
+  authorizeUser,
+  asyncHandler(createTestAction)
+);
+
 export default router;

packages/backend/src/routes/api/v1/steps.js

@@ -5,6 +5,7 @@ import { authorizeUser } from '../../../helpers/authorization.js';
 import getConnectionAction from '../../../controllers/api/v1/steps/get-connection.js';
 import getPreviousStepsAction from '../../../controllers/api/v1/steps/get-previous-steps.js';
 import createDynamicFieldsAction from '../../../controllers/api/v1/steps/create-dynamic-fields.js';
+import createDynamicDataAction from '../../../controllers/api/v1/steps/create-dynamic-data.js';
 
 const router = Router();
 
@@ -29,4 +30,11 @@ router.post(
   asyncHandler(createDynamicFieldsAction)
 );
 
+router.post(
+  '/:stepId/dynamic-data',
+  authenticateUser,
+  authorizeUser,
+  asyncHandler(createDynamicDataAction)
+);
+
 export default router;

packages/backend/src/routes/api/v1/users.js

@@ -1,9 +1,11 @@
 import { Router } from 'express';
 import asyncHandler from 'express-async-handler';
 import { authenticateUser } from '../../../helpers/authentication.js';
+import { authorizeUser } from '../../../helpers/authorization.js';
 import checkIsCloud from '../../../helpers/check-is-cloud.js';
 import getCurrentUserAction from '../../../controllers/api/v1/users/get-current-user.js';
 import getUserTrialAction from '../../../controllers/api/v1/users/get-user-trial.ee.js';
+import getAppsAction from '../../../controllers/api/v1/users/get-apps.js';
 import getInvoicesAction from '../../../controllers/api/v1/users/get-invoices.ee.js';
 import getSubscriptionAction from '../../../controllers/api/v1/users/get-subscription.ee.js';
 import getPlanAndUsageAction from '../../../controllers/api/v1/users/get-plan-and-usage.ee.js';
@@ -11,6 +13,14 @@ import getPlanAndUsageAction from '../../../controllers/api/v1/users/get-plan-an
 const router = Router();
 
 router.get('/me', authenticateUser, asyncHandler(getCurrentUserAction));
+
+router.get(
+  '/:userId/apps',
+  authenticateUser,
+  authorizeUser,
+  asyncHandler(getAppsAction)
+);
+
 router.get(
   '/invoices',
   authenticateUser,

packages/backend/src/serializers/app.js

@@ -1,12 +1,22 @@
 const appSerializer = (app) => {
-  return {
+  let appData = {
-    name: app.name,
     key: app.key,
+    name: app.name,
     iconUrl: app.iconUrl,
+    primaryColor: app.primaryColor,
     authDocUrl: app.authDocUrl,
     supportsConnections: app.supportsConnections,
-    primaryColor: app.primaryColor,
   };
+
+  if (app.connectionCount) {
+    appData.connectionCount = app.connectionCount;
+  }
+
+  if (app.flowCount) {
+    appData.flowCount = app.flowCount;
+  }
+
+  return appData;
 };
 
 export default appSerializer;

packages/backend/src/serializers/flow.js

@@ -6,6 +6,8 @@ const flowSerializer = (flow) => {
     name: flow.name,
     active: flow.active,
     status: flow.status,
+    createdAt: flow.createdAt.getTime(),
+    updatedAt: flow.updatedAt.getTime(),
   };
 
   if (flow.steps?.length > 0) {

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

@@ -27,6 +27,8 @@ describe('flowSerializer', () => {
       name: flow.name,
       active: flow.active,
       status: flow.status,
+      createdAt: flow.createdAt.getTime(),
+      updatedAt: flow.updatedAt.getTime(),
     };
 
     expect(flowSerializer(flow)).toEqual(expectedPayload);

packages/backend/test/factories/step.js

@@ -19,6 +19,8 @@ export const createStep = async (params = {}) => {
   params.appKey =
     params?.appKey || (params.type === 'action' ? 'deepl' : 'webhook');
 
+  params.parameters = params?.parameters || {};
+
   const step = await Step.query().insertAndFetch(params);
 
   return step;

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

@@ -0,0 +1,25 @@
+const getConnectionsMock = (connections) => {
+  return {
+    data: connections.map((connection) => ({
+      id: connection.id,
+      key: connection.key,
+      reconnectable: connection.reconnectable,
+      verified: connection.verified,
+      appAuthClientId: connection.appAuthClientId,
+      formattedData: {
+        screenName: connection.formattedData.screenName,
+      },
+      createdAt: connection.createdAt.getTime(),
+      updatedAt: connection.updatedAt.getTime(),
+    })),
+    meta: {
+      count: connections.length,
+      currentPage: null,
+      isArray: true,
+      totalPages: null,
+      type: 'Connection',
+    },
+  };
+};
+
+export default getConnectionsMock;

packages/backend/test/mocks/rest/api/v1/executions/get-execution.js

@@ -9,6 +9,8 @@ const getExecutionMock = async (execution, flow, steps) => {
       name: flow.name,
       active: flow.active,
       status: flow.active ? 'published' : 'draft',
+      createdAt: flow.createdAt.getTime(),
+      updatedAt: flow.updatedAt.getTime(),
       steps: steps.map((step) => ({
         id: step.id,
         type: step.type,

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

@@ -10,6 +10,8 @@ const getExecutionsMock = async (executions, flow, steps) => {
       name: flow.name,
       active: flow.active,
       status: flow.active ? 'published' : 'draft',
+      createdAt: flow.createdAt.getTime(),
+      updatedAt: flow.updatedAt.getTime(),
       steps: steps.map((step) => ({
         id: step.id,
         type: step.type,

packages/backend/test/mocks/rest/api/v1/flows/get-flow.js

@@ -4,6 +4,8 @@ const getFlowMock = async (flow, steps) => {
     id: flow.id,
     name: flow.name,
     status: flow.active ? 'published' : 'draft',
+    createdAt: flow.createdAt.getTime(),
+    updatedAt: flow.updatedAt.getTime(),
     steps: steps.map((step) => ({
       appKey: step.appKey,
       iconUrl: step.iconUrl,

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

@@ -7,6 +7,8 @@ const getFlowsMock = async (flows, steps) => {
       id: flow.id,
       name: flow.name,
       status: flow.active ? 'published' : 'draft',
+      createdAt: flow.createdAt.getTime(),
+      updatedAt: flow.updatedAt.getTime(),
       steps: flowSteps.map((step) => ({
         appKey: step.appKey,
         iconUrl: step.iconUrl,

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

@@ -0,0 +1,55 @@
+const getAppsMock = () => {
+  const appsData = [
+    {
+      authDocUrl: 'https://automatisch.io/docs/apps/deepl/connection',
+      connectionCount: 1,
+      flowCount: 1,
+      iconUrl: 'http://localhost:3000/apps/deepl/assets/favicon.svg',
+      key: 'deepl',
+      name: 'DeepL',
+      primaryColor: '0d2d45',
+      supportsConnections: true,
+    },
+    {
+      authDocUrl: 'https://automatisch.io/docs/apps/github/connection',
+      connectionCount: 1,
+      flowCount: 1,
+      iconUrl: 'http://localhost:3000/apps/github/assets/favicon.svg',
+      key: 'github',
+      name: 'GitHub',
+      primaryColor: '000000',
+      supportsConnections: true,
+    },
+    {
+      authDocUrl: 'https://automatisch.io/docs/apps/slack/connection',
+      flowCount: 1,
+      iconUrl: 'http://localhost:3000/apps/slack/assets/favicon.svg',
+      key: 'slack',
+      name: 'Slack',
+      primaryColor: '4a154b',
+      supportsConnections: true,
+    },
+    {
+      authDocUrl: 'https://automatisch.io/docs/apps/webhook/connection',
+      flowCount: 1,
+      iconUrl: 'http://localhost:3000/apps/webhook/assets/favicon.svg',
+      key: 'webhook',
+      name: 'Webhook',
+      primaryColor: '0059F7',
+      supportsConnections: false,
+    },
+  ];
+
+  return {
+    data: appsData,
+    meta: {
+      count: appsData.length,
+      currentPage: null,
+      isArray: true,
+      totalPages: null,
+      type: 'Object',
+    },
+  };
+};
+
+export default getAppsMock;

packages/backend/test/setup/global-hooks.js

@@ -1,6 +1,7 @@
 import { Model } from 'objection';
 import { client as knex } from '../../src/config/database.js';
 import logger from '../../src/helpers/logger.js';
+import { vi } from 'vitest';
 
 global.beforeAll(async () => {
   global.knex = null;
@@ -22,8 +23,8 @@ global.afterEach(async () => {
   await global.knex.rollback();
   Model.knex(knex);
 
-  // jest.restoreAllMocks();
+  vi.restoreAllMocks();
-  // jest.clearAllMocks();
+  vi.clearAllMocks();
 });
 
 global.afterAll(async () => {

packages/docs/pages/.vitepress/config.js

@@ -345,6 +345,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/scheduler/connection' },
           ],
         },
+        {
+          text: 'SFTP',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/sftp/connection' }],
+        },
         {
           text: 'SignalWire',
           collapsible: true,

packages/docs/pages/apps/sftp/connection.md

@@ -0,0 +1,15 @@
+# SFTP
+
+:::info
+This page explains the steps you need to follow to set up the SFTP connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+SSH File Transfer Protocol (also known as Secure File Transfer Protocol or SFTP) is a network protocol that provides file access, file transfer, and file management over any reliable data stream. You need to provide the following information from Automatisch by using SFTP connection.
+
+1.  Write any screen name to be displayed in Automatisch.
+2.  Fill host address field with the SFTP host address.
+3.  Fill username field with the SFTP username.
+4.  Fill password field with the SFTP password.
+5.  Fill port field with the SFTP port. Default is 21.
+6.  Click **Submit** button on Automatisch.
+7.  Now, you can start using the SFTP connection with Automatisch.

packages/docs/pages/public/favicons/sftp.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 103.95"><title>sftp</title><path d="M21.56,47.27l6.21-.39a4.56,4.56,0,0,0,.82,2.29,3.45,3.45,0,0,0,2.88,1.28,3.16,3.16,0,0,0,2.15-.65,2,2,0,0,0,.76-1.52,2,2,0,0,0-.71-1.48,8.45,8.45,0,0,0-3.34-1.22A14.06,14.06,0,0,1,24.21,43a5.14,5.14,0,0,1-1.85-4.07,5.44,5.44,0,0,1,.95-3.07,6.19,6.19,0,0,1,2.84-2.28,13.26,13.26,0,0,1,5.19-.83,10.58,10.58,0,0,1,6.18,1.51,6.53,6.53,0,0,1,2.53,4.8l-6.14.37a3.38,3.38,0,0,0-1-2.1,3.34,3.34,0,0,0-2.17-.65,2.63,2.63,0,0,0-1.72.48,1.49,1.49,0,0,0-.58,1.18,1.19,1.19,0,0,0,.47.9,5.23,5.23,0,0,0,2.18.78,27.38,27.38,0,0,1,6.13,1.87,6.38,6.38,0,0,1,2.7,2.35,5.94,5.94,0,0,1,.84,3.13,6.73,6.73,0,0,1-1.12,3.75,7.1,7.1,0,0,1-3.15,2.6,12.64,12.64,0,0,1-5.08.89c-3.6,0-6.09-.7-7.47-2.08a8.18,8.18,0,0,1-2.35-5.27ZM9.07,15.63h3.09V8.2A1.87,1.87,0,0,1,14,6.33h3.32V1.87A1.88,1.88,0,0,1,19.23,0H49.57a1.87,1.87,0,0,1,1.87,1.87V6.33h59.5a1.87,1.87,0,0,1,1.87,1.87v7.43h3.41a1.87,1.87,0,0,1,1.87,1.87,1.75,1.75,0,0,1,0,.4L111.51,66a7.12,7.12,0,0,1-2,4.07,5.62,5.62,0,0,1-4,1.69H69.25v5.57h.17A2.67,2.67,0,0,1,72.08,80v4.81h13a2.67,2.67,0,0,1,2.54,1.87h27.84a7,7,0,0,1,6.85,4.48,8.05,8.05,0,0,1,.57,3,8.14,8.14,0,0,1-.57,3,7,7,0,0,1-6.85,4.47H87.73A2.67,2.67,0,0,1,85.08,104H39.92a2.67,2.67,0,0,1-2.65-2.37H7.42A7,7,0,0,1,.57,97.11a8.14,8.14,0,0,1-.57-3,8.05,8.05,0,0,1,.57-3,7,7,0,0,1,6.85-4.48h30a2.67,2.67,0,0,1,2.54-1.87H50.68V80a2.67,2.67,0,0,1,2.66-2.66h1V71.75H18A5.69,5.69,0,0,1,13.89,70,6.84,6.84,0,0,1,12,65.92L6.92,17.69a1.83,1.83,0,0,1,.37-1.33,1.86,1.86,0,0,1,1.29-.71,4,4,0,0,1,.49,0ZM57.86,77.32h7.86v-5.5H57.86v5.5ZM87.74,90.19v7.86h27.72A3.63,3.63,0,0,0,119,95.8a4.68,4.68,0,0,0,.31-1.68,4.63,4.63,0,0,0-.31-1.67,3.63,3.63,0,0,0-3.58-2.26ZM37.26,98.05V90.19H7.42a3.63,3.63,0,0,0-3.58,2.26,4.63,4.63,0,0,0-.31,1.67,4.73,4.73,0,0,0,.31,1.68,3.63,3.63,0,0,0,3.58,2.25ZM10.85,19.37l4.84,46.17a3.14,3.14,0,0,0,.83,1.86A2.07,2.07,0,0,0,18,68h87.54a2,2,0,0,0,1.41-.6,3.28,3.28,0,0,0,.88-1.92l6.28-46.12Zm5.05-9.3v5.55l93.17-.79V10.07H49.57A1.87,1.87,0,0,1,47.69,8.2V3.74H21.1V8.2a1.87,1.87,0,0,1-1.87,1.87Zm28.3,23H60.35v4.54H50.76v3.7H59v4.28H50.76v8.62H44.2V33.12Zm18.35,0H82.42v5.22H75.75V54.26H69.22V38.34H62.55V33.12Zm22.93,0H96.35a7.48,7.48,0,0,1,5.32,1.68,6.36,6.36,0,0,1,1.77,4.82,6.55,6.55,0,0,1-1.93,5q-1.94,1.82-5.89,1.81H92v7.82H85.48V33.12Zm6.56,9h1.61a4.14,4.14,0,0,0,2.67-.66,2.13,2.13,0,0,0,.77-1.68,2.37,2.37,0,0,0-.67-1.69,3.49,3.49,0,0,0-2.51-.69H92v4.72Z"/></svg>

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

@@ -15,7 +15,7 @@ function AccountDropdownMenu(props) {
   const navigate = useNavigate();
   const { open, onClose, anchorEl, id } = props;
   const logout = async () => {
-    authentication.updateToken('');
+    authentication.removeToken();
     await apolloClient.clearStore();
     onClose();
     navigate(URLS.LOGIN);

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

@@ -17,6 +17,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
 import useAppAuth from 'hooks/useAppAuth';
+import { useQueryClient } from '@tanstack/react-query';
 
 function AddAppConnection(props) {
   const { application, connectionId, onClose } = props;
@@ -36,6 +37,7 @@ function AddAppConnection(props) {
     appAuthClientId,
     useShared: !!appAuthClientId,
   });
+  const queryClient = useQueryClient();
 
   React.useEffect(function relayProviderData() {
     if (window.opener) {
@@ -78,6 +80,10 @@ function AddAppConnection(props) {
         const response = await authenticate({
           fields: data,
         });
+
+        await queryClient.invalidateQueries({
+          queryKey: ['apps', key, 'connections'],
+        });
         onClose(response);
       } catch (err) {
         const error = err;

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

@@ -10,16 +10,18 @@ import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useAppAuthClients from 'hooks/useAppAuthClients.ee';
+import useAdminAppAuthClients from 'hooks/useAdminAppAuthClients';
 import NoResultFound from 'components/NoResultFound';
 
 function AdminApplicationAuthClients(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { appAuthClients, loading } = useAppAuthClients({ appKey });
+  const { data: appAuthClients, isLoading } = useAdminAppAuthClients(appKey);
-  if (loading)
+
+  if (isLoading)
     return <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />;
-  if (!appAuthClients?.length) {
+
+  if (!appAuthClients?.data.length) {
     return (
       <NoResultFound
         to={URLS.ADMIN_APP_AUTH_CLIENTS_CREATE(appKey)}
@@ -27,7 +29,8 @@ function AdminApplicationAuthClients(props) {
       />
     );
   }
-  const sortedAuthClients = appAuthClients.slice().sort((a, b) => {
+
+  const sortedAuthClients = appAuthClients.data.slice().sort((a, b) => {
     if (a.id < b.id) {
       return -1;
     }
@@ -36,6 +39,7 @@ function AdminApplicationAuthClients(props) {
     }
     return 0;
   });
+
   return (
     <div>
       {sortedAuthClients.map((client) => (

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

@@ -6,29 +6,33 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import * as React from 'react';
-import useAppAuthClients from 'hooks/useAppAuthClients.ee';
+import useAppAuthClients from 'hooks/useAppAuthClients';
 import useFormatMessage from 'hooks/useFormatMessage';
 
 function AppAuthClientsDialog(props) {
   const { appKey, onClientClick, onClose } = props;
-  const { appAuthClients } = useAppAuthClients({ appKey, active: true });
+  const { data: appAuthClients } = useAppAuthClients(appKey);
+
   const formatMessage = useFormatMessage();
+
   React.useEffect(
     function autoAuthenticateSingleClient() {
-      if (appAuthClients?.length === 1) {
+      if (appAuthClients?.data.length === 1) {
-        onClientClick(appAuthClients[0].id);
+        onClientClick(appAuthClients.data[0].id);
       }
     },
-    [appAuthClients],
+    [appAuthClients?.data],
   );
-  if (!appAuthClients?.length || appAuthClients?.length === 1)
+
+  if (!appAuthClients?.data.length || appAuthClients?.data.length === 1)
     return <React.Fragment />;
+
   return (
     <Dialog onClose={onClose} open={true}>
       <DialogTitle>{formatMessage('appAuthClientsDialog.title')}</DialogTitle>
 
       <List sx={{ pt: 0 }}>
-        {appAuthClients.map((appAuthClient) => (
+        {appAuthClients.data.map((appAuthClient) => (
           <ListItem disableGutters key={appAuthClient.id}>
             <ListItemButton onClick={() => onClientClick(appAuthClient.id)}>
               <ListItemText primary={appAuthClient.name} />

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

@@ -7,6 +7,7 @@ import MenuItem from '@mui/material/MenuItem';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
+import { useQueryClient } from '@tanstack/react-query';
 
 function ContextMenu(props) {
   const {
@@ -18,15 +19,24 @@ function ContextMenu(props) {
     disableReconnection,
   } = props;
   const formatMessage = useFormatMessage();
+  const queryClient = useQueryClient();
+
   const createActionHandler = React.useCallback(
     (action) => {
-      return function clickHandler(event) {
+      return async function clickHandler(event) {
         onMenuItemClick(event, action);
+
+        if (['test', 'reconnect', 'delete'].includes(action.type)) {
+          await queryClient.invalidateQueries({
+            queryKey: ['apps', appKey, 'connections'],
+          });
+        }
         onClose();
       };
     },
-    [onMenuItemClick, onClose],
+    [onMenuItemClick, onClose, queryClient],
   );
+
   return (
     <Menu
       open={true}

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

@@ -1,21 +1,24 @@
-import { useLazyQuery, useMutation } from '@apollo/client';
+import * as React from 'react';
+import { useMutation } from '@apollo/client';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
+import Skeleton from '@mui/material/Skeleton';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import CircularProgress from '@mui/material/CircularProgress';
 import Stack from '@mui/material/Stack';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import { DateTime } from 'luxon';
-import * as React from 'react';
+
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
-import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
 import { CardContent, Typography } from './style';
+import useConnectionFlows from 'hooks/useConnectionFlows';
+import useTestConnection from 'hooks/useTestConnection';
 
 const countTranslation = (value) => (
   <>
@@ -23,36 +26,39 @@ const countTranslation = (value) => (
     <br />
   </>
 );
+
 function AppConnectionRow(props) {
-  const enqueueSnackbar = useEnqueueSnackbar();
-  const [verificationVisible, setVerificationVisible] = React.useState(false);
-  const [testConnection, { called: testCalled, loading: testLoading }] =
-    useLazyQuery(TEST_CONNECTION, {
-      fetchPolicy: 'network-only',
-      onCompleted: () => {
-        setTimeout(() => setVerificationVisible(false), 3000);
-      },
-      onError: () => {
-        setTimeout(() => setVerificationVisible(false), 3000);
-      },
-    });
-  const [deleteConnection] = useMutation(DELETE_CONNECTION);
   const formatMessage = useFormatMessage();
-  const {
+  const enqueueSnackbar = useEnqueueSnackbar();
-    id,
+  const { id, key, formattedData, verified, createdAt, reconnectable } =
-    key,
+    props.connection;
-    formattedData,
+  const [verificationVisible, setVerificationVisible] = React.useState(false);
-    verified,
-    createdAt,
-    flowCount,
-    reconnectable,
-  } = props.connection;
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const [deleteConnection] = useMutation(DELETE_CONNECTION);
+
+  const { mutate: testConnection, isPending: isTestConnectionPending } =
+    useTestConnection(
+      { connectionId: id },
+      {
+        onSettled: () => {
+          setTimeout(() => setVerificationVisible(false), 3000);
+        },
+      },
+    );
+
   const handleClose = () => {
     setAnchorEl(null);
   };
+
+  const { data, isLoading: isConnectionFlowsLoading } = useConnectionFlows({
+    connectionId: id,
+  });
+  const flowCount = data?.meta?.count;
+
   const onContextMenuClick = () => setAnchorEl(contextButtonRef.current);
+
   const onContextMenuAction = React.useCallback(
     async (event, action) => {
       if (action.type === 'delete') {
@@ -68,6 +74,7 @@ function AppConnectionRow(props) {
             });
           },
         });
+
         enqueueSnackbar(formatMessage('connection.deletedMessage'), {
           variant: 'success',
           SnackbarProps: {
@@ -81,9 +88,11 @@ function AppConnectionRow(props) {
     },
     [deleteConnection, id, testConnection, formatMessage, enqueueSnackbar],
   );
+
   const relativeCreatedAt = DateTime.fromMillis(
     parseInt(createdAt, 10),
   ).toRelative();
+
   return (
     <>
       <Card sx={{ my: 2 }} data-test="app-connection-row">
@@ -103,7 +112,7 @@ function AppConnectionRow(props) {
 
             <Box>
               <Stack direction="row" alignItems="center" spacing={1}>
-                {verificationVisible && testCalled && testLoading && (
+                {verificationVisible && isTestConnectionPending && (
                   <>
                     <CircularProgress size={16} />
                     <Typography variant="caption">
@@ -112,8 +121,7 @@ function AppConnectionRow(props) {
                   </>
                 )}
                 {verificationVisible &&
-                  testCalled &&
+                  !isTestConnectionPending &&
-                  !testLoading &&
                   verified && (
                     <>
                       <CheckCircleIcon fontSize="small" color="success" />
@@ -123,8 +131,7 @@ function AppConnectionRow(props) {
                     </>
                   )}
                 {verificationVisible &&
-                  testCalled &&
+                  !isTestConnectionPending &&
-                  !testLoading &&
                   !verified && (
                     <>
                       <ErrorIcon fontSize="small" color="error" />
@@ -143,7 +150,13 @@ function AppConnectionRow(props) {
                 sx={{ display: ['none', 'inline-block'] }}
               >
                 {formatMessage('connection.flowCount', {
-                  count: countTranslation(flowCount),
+                  count: countTranslation(
+                    isConnectionFlowsLoading ? (
+                      <Skeleton variant="text" width={15} />
+                    ) : (
+                      flowCount
+                    ),
+                  ),
                 })}
               </Typography>
             </Box>

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

@@ -1,20 +1,19 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useQuery } from '@apollo/client';
+
-import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
 import AppConnectionRow from 'components/AppConnectionRow';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
+import useAppConnections from 'hooks/useAppConnections';
 
 function AppConnections(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { data } = useQuery(GET_APP_CONNECTIONS, {
+  const { data } = useAppConnections(appKey);
-    variables: { key: appKey },
+  const appConnections = data?.data || [];
-  });
-  const appConnections = data?.getApp?.connections || [];
   const hasConnections = appConnections?.length;
+
   if (!hasConnections) {
     return (
       <NoResultFound

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

@@ -47,7 +47,7 @@ function AppFlows(props) {
   return (
     <>
       {flows?.map((appFlow) => (
-        <AppFlowRow key={appFlow.id} flow={appFlow} />
+        <AppFlowRow key={appFlow.id} flow={appFlow} appKey={appKey} />
       ))}
 
       {pageInfo && pageInfo.totalPages > 1 && (

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
+
 import useFormatMessage from 'hooks/useFormatMessage';
 
 export default function CheckoutCompletedAlert() {
@@ -9,7 +10,9 @@ export default function CheckoutCompletedAlert() {
   const location = useLocation();
   const state = location.state;
   const checkoutCompleted = state?.checkoutCompleted;
+
   if (!checkoutCompleted) return <React.Fragment />;
+
   return (
     <Alert
       severity="success"

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

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useLazyQuery, useQuery } from '@apollo/client';
 import Autocomplete from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
@@ -12,8 +11,6 @@ import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import { EditorContext } from 'contexts/Editor';
-import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
-import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import {
@@ -21,6 +18,10 @@ import {
   StepPropType,
   SubstepPropType,
 } from 'propTypes/propTypes';
+import useStepConnection from 'hooks/useStepConnection';
+import { useQueryClient } from '@tanstack/react-query';
+import useAppConnections from 'hooks/useAppConnections';
+import useTestConnection from 'hooks/useTestConnection';
 
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -44,40 +45,42 @@ function ChooseConnectionSubstep(props) {
     onChange,
     application,
   } = props;
-  const { connection, appKey } = step;
+  const { appKey } = step;
   const formatMessage = useFormatMessage();
   const editorContext = React.useContext(EditorContext);
   const [showAddConnectionDialog, setShowAddConnectionDialog] =
     React.useState(false);
   const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] =
     React.useState(false);
+  const queryClient = useQueryClient();
 
   const { authenticate } = useAuthenticateApp({
     appKey: application.key,
     useShared: true,
   });
 
-  const { data, loading, refetch } = useQuery(GET_APP_CONNECTIONS, {
+  const {
-    variables: { key: appKey },
+    data,
-  });
+    isLoading: isAppConnectionsLoading,
+    refetch,
+  } = useAppConnections(appKey);
 
   const { data: appConfig } = useAppConfig(application.key);
 
+  const { data: stepConnectionData } = useStepConnection(step.id);
+  const stepConnection = stepConnectionData?.data;
+
   // TODO: show detailed error when connection test/verification fails
-  const [
+  const { mutate: testConnection, isPending: isTestConnectionPending } =
-    testConnection,
+    useTestConnection({
-    { loading: testResultLoading, refetch: retestConnection },
+      connectionId: stepConnection?.id,
-  ] = useLazyQuery(TEST_CONNECTION, {
+    });
-    variables: {
-      id: connection?.id,
-    },
-  });
 
   React.useEffect(() => {
-    if (connection?.id) {
+    if (stepConnection?.id) {
       testConnection({
         variables: {
-          id: connection.id,
+          id: stepConnection.id,
         },
       });
     }
@@ -85,11 +88,10 @@ function ChooseConnectionSubstep(props) {
   }, []);
 
   const connectionOptions = React.useMemo(() => {
-    const appWithConnections = data?.getApp;
+    const appWithConnections = data?.data;
     const options =
-      appWithConnections?.connections?.map((connection) =>
+      appWithConnections?.map((connection) => optionGenerator(connection)) ||
-        optionGenerator(connection),
+      [];
-      ) || [];
 
     if (!appConfig?.data || appConfig?.data?.canCustomConnect) {
       options.push({
@@ -154,8 +156,9 @@ function ChooseConnectionSubstep(props) {
     },
     [onChange, refetch, step],
   );
+
   const handleChange = React.useCallback(
-    (event, selectedOption) => {
+    async (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
         // TODO: try to simplify type casting below.
         const typedSelectedOption = selectedOption;
@@ -172,7 +175,7 @@ function ChooseConnectionSubstep(props) {
           return;
         }
 
-        if (connectionId !== step.connection?.id) {
+        if (connectionId !== stepConnection?.id) {
           onChange({
             step: {
               ...step,
@@ -181,19 +184,23 @@ function ChooseConnectionSubstep(props) {
               },
             },
           });
+
+          await queryClient.invalidateQueries({
+            queryKey: ['steps', step.id, 'connection'],
+          });
         }
       }
     },
-    [step, onChange],
+    [step, onChange, queryClient],
   );
 
   React.useEffect(() => {
-    if (step.connection?.id) {
+    if (stepConnection?.id) {
-      retestConnection({
+      testConnection({
-        id: step.connection.id,
+        id: stepConnection?.id,
       });
     }
-  }, [step.connection?.id, retestConnection]);
+  }, [stepConnection?.id, testConnection]);
 
   const onToggle = expanded ? onCollapse : onExpand;
 
@@ -203,7 +210,7 @@ function ChooseConnectionSubstep(props) {
         expanded={expanded}
         onClick={onToggle}
         title={name}
-        valid={testResultLoading ? null : connection?.verified}
+        valid={isTestConnectionPending ? null : stepConnection?.verified}
       />
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <ListItem
@@ -229,9 +236,9 @@ function ChooseConnectionSubstep(props) {
                 required
               />
             )}
-            value={getOption(connectionOptions, connection?.id)}
+            value={getOption(connectionOptions, stepConnection?.id)}
             onChange={handleChange}
-            loading={loading}
+            loading={isAppConnectionsLoading}
             data-test="choose-connection-autocomplete"
           />
 
@@ -241,8 +248,8 @@ function ChooseConnectionSubstep(props) {
             onClick={onSubmit}
             sx={{ mt: 2 }}
             disabled={
-              testResultLoading ||
+              isTestConnectionPending ||
-              !connection?.verified ||
+              !stepConnection?.verified ||
               editorContext.readOnly
             }
             data-test="flow-substep-continue-button"

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

@@ -61,31 +61,38 @@ function ControlledCustomAutocomplete(props) {
   const [isSingleChoice, setSingleChoice] = React.useState(undefined);
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef(null);
+
   const renderElement = React.useCallback(
     (props) => <Element {...props} disabled={disabled} />,
     [disabled],
   );
+
   const [editor] = React.useState(() => customizeEditor(createEditor()));
+
   const [showVariableSuggestions, setShowVariableSuggestions] =
     React.useState(false);
   let dependsOnValues = [];
   if (dependsOn?.length) {
     dependsOnValues = watch(dependsOn);
   }
+
   React.useEffect(() => {
     const ref = ReactEditor.toDOMNode(editor, editor);
     resizeObserver.observe(ref);
     return () => resizeObserver.unobserve(ref);
   }, []);
+
   const promoteValue = () => {
     const serializedValue = serialize(editor.children);
     controllerOnChange(serializedValue);
   };
+
   const resizeObserver = React.useMemo(function syncCustomOptionsPosition() {
     return new ResizeObserver(() => {
       forceUpdate();
     });
   }, []);
+
   React.useEffect(() => {
     const hasDependencies = dependsOnValues.length;
     if (hasDependencies) {
@@ -93,6 +100,7 @@ function ControlledCustomAutocomplete(props) {
       resetEditor(editor);
     }
   }, dependsOnValues);
+
   React.useEffect(
     function updateInitialValue() {
       const hasOptions = options.length;
@@ -110,16 +118,19 @@ function ControlledCustomAutocomplete(props) {
     },
     [isInitialValueSet, options, loading],
   );
+
   React.useEffect(() => {
     if (!showVariableSuggestions && value !== serialize(editor.children)) {
       promoteValue();
     }
   }, [showVariableSuggestions]);
+
   const hideSuggestionsOnShift = (event) => {
     if (event.code === 'Tab') {
       setShowVariableSuggestions(false);
     }
   };
+
   const handleKeyDown = (event) => {
     hideSuggestionsOnShift(event);
     if (event.code === 'Tab') {
@@ -129,15 +140,18 @@ function ControlledCustomAutocomplete(props) {
       event.preventDefault();
     }
   };
+
   const stepsWithVariables = React.useMemo(() => {
     return processStepWithExecutions(priorStepsWithExecutions);
   }, [priorStepsWithExecutions]);
+
   const handleVariableSuggestionClick = React.useCallback(
     (variable) => {
       insertVariable(editor, variable, stepsWithVariables);
     },
     [stepsWithVariables],
   );
+
   const handleOptionClick = React.useCallback(
     (event, option) => {
       event.stopPropagation();
@@ -147,17 +161,20 @@ function ControlledCustomAutocomplete(props) {
     },
     [stepsWithVariables],
   );
+
   const handleClearButtonClick = (event) => {
     event.stopPropagation();
     resetEditor(editor);
     promoteValue();
     setSingleChoice(undefined);
   };
+
   const reset = (tabIndex) => {
     const isOptions = tabIndex === 0;
     setSingleChoice(isOptions);
     resetEditor(editor, { focus: true });
   };
+
   return (
     <Slate
       editor={editor}

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

@@ -22,7 +22,7 @@ function DeleteAccountDialog(props) {
 
   const handleConfirm = React.useCallback(async () => {
     await deleteCurrentUser();
-    authentication.updateToken('');
+    authentication.removeToken();
     await apolloClient.clearStore();
     navigate(URLS.LOGIN);
   }, [deleteCurrentUser, currentUser]);

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

@@ -25,7 +25,7 @@ function DeleteRoleButton(props) {
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteRole();
-      queryClient.invalidateQueries({ queryKey: ['roles'] });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'roles'] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
         variant: 'success',

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

@@ -25,7 +25,6 @@ function DeleteUserButton(props) {
     try {
       await deleteUser();
       queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
-      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
         variant: 'success',

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

@@ -3,47 +3,24 @@ import { useMutation } from '@apollo/client';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
-import { GET_FLOW } from 'graphql/queries/get-flow';
+
 import { CREATE_STEP } from 'graphql/mutations/create-step';
 import { UPDATE_STEP } from 'graphql/mutations/update-step';
 import FlowStep from 'components/FlowStep';
 import { FlowPropType } from 'propTypes/propTypes';
-
+import { useQueryClient } from '@tanstack/react-query';
-function updateHandlerFactory(flowId, previousStepId) {
-  return function createStepUpdateHandler(cache, mutationResult) {
-    const { data } = mutationResult;
-    const { createStep: createdStep } = data;
-    const { getFlow: flow } = cache.readQuery({
-      query: GET_FLOW,
-      variables: { id: flowId },
-    });
-    const steps = flow.steps.reduce((steps, currentStep) => {
-      if (currentStep.id === previousStepId) {
-        return [...steps, currentStep, createdStep];
-      }
-      return [...steps, currentStep];
-    }, []);
-    cache.writeQuery({
-      query: GET_FLOW,
-      variables: { id: flowId },
-      data: { getFlow: { ...flow, steps } },
-    });
-  };
-}
 
 function Editor(props) {
   const [updateStep] = useMutation(UPDATE_STEP);
-  const [createStep, { loading: creationInProgress }] = useMutation(
+  const [createStep, { loading: creationInProgress }] =
-    CREATE_STEP,
+    useMutation(CREATE_STEP);
-    {
-      refetchQueries: ['GetFlow'],
-    },
-  );
   const { flow } = props;
   const [triggerStep] = flow.steps;
   const [currentStepId, setCurrentStepId] = React.useState(triggerStep.id);
+  const queryClient = useQueryClient();
+
   const onStepChange = React.useCallback(
-    (step) => {
+    async (step) => {
       const mutationInput = {
         id: step.id,
         key: step.key,
@@ -55,13 +32,20 @@ function Editor(props) {
           id: flow.id,
         },
       };
+
       if (step.appKey) {
         mutationInput.appKey = step.appKey;
       }
-      updateStep({ variables: { input: mutationInput } });
+
+      await updateStep({ variables: { input: mutationInput } });
+      await queryClient.invalidateQueries({
+        queryKey: ['steps', step.id, 'connection'],
+      });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
-    [updateStep, flow.id],
+    [updateStep, flow.id, queryClient],
   );
+
   const addStep = React.useCallback(
     async (previousStepId) => {
       const mutationInput = {
@@ -72,20 +56,24 @@ function Editor(props) {
           id: flow.id,
         },
       };
+
       const createdStep = await createStep({
         variables: { input: mutationInput },
-        update: updateHandlerFactory(flow.id, previousStepId),
       });
+
       const createdStepId = createdStep.data.createStep.id;
       setCurrentStepId(createdStepId);
+      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
-    [createStep, flow.id],
+    [createStep, flow.id, queryClient],
   );
+
   const openNextStep = React.useCallback((nextStep) => {
     return () => {
       setCurrentStepId(nextStep?.id);
     };
   }, []);
+
   return (
     <Box
       display="flex"
@@ -106,6 +94,7 @@ function Editor(props) {
             onOpen={() => setCurrentStepId(step.id)}
             onClose={() => setCurrentStepId(null)}
             onChange={onStepChange}
+            flowId={flow.id}
             onContinue={openNextStep(steps[index + 1])}
           />
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link, useParams } from 'react-router-dom';
-import { useMutation, useQuery } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -8,6 +8,7 @@ import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import Snackbar from '@mui/material/Snackbar';
+
 import { EditorProvider } from 'contexts/Editor';
 import EditableTypography from 'components/EditableTypography';
 import Container from 'components/Container';
@@ -15,17 +16,20 @@ import Editor from 'components/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
 import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
-import { GET_FLOW } from 'graphql/queries/get-flow';
 import * as URLS from 'config/urls';
 import { TopBar } from './style';
+import useFlow from 'hooks/useFlow';
+import { useQueryClient } from '@tanstack/react-query';
 
 export default function EditorLayout() {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
   const [updateFlow] = useMutation(UPDATE_FLOW);
   const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS);
-  const { data, loading } = useQuery(GET_FLOW, { variables: { id: flowId } });
+  const { data, isLoading: isFlowLoading } = useFlow(flowId);
-  const flow = data?.getFlow;
+  const flow = data?.data;
+  const queryClient = useQueryClient();
+
   const onFlowNameUpdate = React.useCallback(
     async (name) => {
       await updateFlow({
@@ -38,14 +42,17 @@ export default function EditorLayout() {
         optimisticResponse: {
           updateFlow: {
             __typename: 'Flow',
-            id: flow?.id,
+            id: flowId,
             name,
           },
         },
       });
+
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
-    [flow?.id],
+    [flowId, queryClient],
   );
+
   const onFlowStatusUpdate = React.useCallback(
     async (active) => {
       await updateFlowStatus({
@@ -58,14 +65,17 @@ export default function EditorLayout() {
         optimisticResponse: {
           updateFlowStatus: {
             __typename: 'Flow',
-            id: flow?.id,
+            id: flowId,
             active,
           },
         },
       });
+
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
-    [flow?.id],
+    [flowId, queryClient],
   );
+
   return (
     <>
       <TopBar
@@ -94,7 +104,7 @@ export default function EditorLayout() {
             </IconButton>
           </Tooltip>
 
-          {!loading && (
+          {!isFlowLoading && (
             <EditableTypography
               variant="body1"
               onConfirm={onFlowNameUpdate}
@@ -124,7 +134,7 @@ export default function EditorLayout() {
       <Stack direction="column" height="100%">
         <Container maxWidth="md">
           <EditorProvider value={{ readOnly: !!flow?.active }}>
-            {!flow && !loading && 'not found'}
+            {!flow && !isFlowLoading && 'not found'}
 
             {flow && <Editor flow={flow} />}
           </EditorProvider>

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

@@ -2,9 +2,12 @@ import PropTypes from 'prop-types';
 import { useMutation } from '@apollo/client';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { useQueryClient } from '@tanstack/react-query';
+
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+
 import Can from 'components/Can';
 import * as URLS from 'config/urls';
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
@@ -12,25 +15,33 @@ import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
 
 function ContextMenu(props) {
-  const { flowId, onClose, anchorEl } = props;
+  const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
+    props;
   const enqueueSnackbar = useEnqueueSnackbar();
-  const [deleteFlow] = useMutation(DELETE_FLOW);
-  const [duplicateFlow] = useMutation(DUPLICATE_FLOW, {
-    refetchQueries: ['GetFlows'],
-  });
   const formatMessage = useFormatMessage();
+  const queryClient = useQueryClient();
+  const [duplicateFlow] = useMutation(DUPLICATE_FLOW);
+  const [deleteFlow] = useMutation(DELETE_FLOW);
+
   const onFlowDuplicate = React.useCallback(async () => {
     await duplicateFlow({
       variables: { input: { id: flowId } },
     });
+
+    await queryClient.invalidateQueries({
+      queryKey: ['apps', appKey, 'flows'],
+    });
     enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
       variant: 'success',
       SnackbarProps: {
         'data-test': 'snackbar-duplicate-flow-success',
       },
     });
+
+    onDuplicateFlow?.();
     onClose();
-  }, [flowId, onClose, duplicateFlow]);
+  }, [flowId, onClose, duplicateFlow, queryClient, onDuplicateFlow]);
+
   const onFlowDelete = React.useCallback(async () => {
     await deleteFlow({
       variables: { input: { id: flowId } },
@@ -44,11 +55,18 @@ function ContextMenu(props) {
         });
       },
     });
+
+    await queryClient.invalidateQueries({
+      queryKey: ['apps', appKey, 'flows'],
+    });
     enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
       variant: 'success',
     });
+
+    onDeleteFlow?.();
     onClose();
-  }, [flowId, onClose, deleteFlow]);
+  }, [flowId, onClose, deleteFlow, queryClient, onDeleteFlow]);
+
   return (
     <Menu
       open={true}
@@ -90,6 +108,9 @@ ContextMenu.propTypes = {
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]).isRequired,
+  onDeleteFlow: PropTypes.func,
+  onDuplicateFlow: PropTypes.func,
+  appKey: PropTypes.string.isRequired,
 };
 
 export default ContextMenu;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Card from '@mui/material/Card';
 import IconButton from '@mui/material/IconButton';
@@ -6,6 +7,7 @@ import CardActionArea from '@mui/material/CardActionArea';
 import Chip from '@mui/material/Chip';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { DateTime } from 'luxon';
+
 import FlowAppIcons from 'components/FlowAppIcons';
 import FlowContextMenu from 'components/FlowContextMenu';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -35,7 +37,7 @@ function FlowRow(props) {
   const formatMessage = useFormatMessage();
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const { flow } = props;
+  const { flow, onDuplicateFlow, onDeleteFlow, appKey } = props;
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -112,6 +114,9 @@ function FlowRow(props) {
           flowId={flow.id}
           onClose={handleClose}
           anchorEl={anchorEl}
+          onDeleteFlow={onDeleteFlow}
+          onDuplicateFlow={onDuplicateFlow}
+          appKey={appKey}
         />
       )}
     </>
@@ -120,6 +125,9 @@ function FlowRow(props) {
 
 FlowRow.propTypes = {
   flow: FlowPropType.isRequired,
+  onDeleteFlow: PropTypes.func,
+  onDuplicateFlow: PropTypes.func,
+  appKey: PropTypes.string.isRequired,
 };
 
 export default FlowRow;

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

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useLazyQuery } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -24,7 +23,7 @@ import ChooseConnectionSubstep from 'components/ChooseConnectionSubstep';
 import Form from 'components/Form';
 import FlowStepContextMenu from 'components/FlowStepContextMenu';
 import AppIcon from 'components/AppIcon';
-import { GET_STEP_WITH_TEST_EXECUTIONS } from 'graphql/queries/get-step-with-test-executions';
+
 import useFormatMessage from 'hooks/useFormatMessage';
 import useApps from 'hooks/useApps';
 import {
@@ -40,6 +39,7 @@ import useTriggers from 'hooks/useTriggers';
 import useActions from 'hooks/useActions';
 import useTriggerSubsteps from 'hooks/useTriggerSubsteps';
 import useActionSubsteps from 'hooks/useActionSubsteps';
+import useStepWithTestExecutions from 'hooks/useStepWithTestExecutions';
 
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
@@ -105,7 +105,7 @@ function generateValidationSchema(substeps) {
 }
 
 function FlowStep(props) {
-  const { collapsed, onChange, onContinue } = props;
+  const { collapsed, onChange, onContinue, flowId } = props;
   const editorContext = React.useContext(EditorContext);
   const contextButtonRef = React.useRef(null);
   const step = props.step;
@@ -126,28 +126,16 @@ function FlowStep(props) {
 
   const { data: apps } = useApps(useAppsOptions);
 
-  const [
+  const { data: stepWithTestExecutions, refetch } = useStepWithTestExecutions(
-    getStepWithTestExecutions,
+    step.id,
-    { data: stepWithTestExecutionsData, called: stepWithTestExecutionsCalled },
+  );
-  ] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
+  const stepWithTestExecutionsData = stepWithTestExecutions?.data;
-    fetchPolicy: 'network-only',
-  });
 
   React.useEffect(() => {
-    if (!stepWithTestExecutionsCalled && !collapsed && !isTrigger) {
+    if (!collapsed && !isTrigger) {
-      getStepWithTestExecutions({
+      refetch(step.id);
-        variables: {
-          stepId: step.id,
-        },
-      });
     }
-  }, [
+  }, [collapsed, refetch, step.id, isTrigger]);
-    collapsed,
-    stepWithTestExecutionsCalled,
-    getStepWithTestExecutions,
-    step.id,
-    isTrigger,
-  ]);
 
   const app = apps?.data?.find((currentApp) => currentApp.key === step.appKey);
 
@@ -274,9 +262,7 @@ function FlowStep(props) {
       <Collapse in={!collapsed} unmountOnExit>
         <Content>
           <List>
-            <StepExecutionsProvider
+            <StepExecutionsProvider value={stepWithTestExecutionsData}>
-              value={stepWithTestExecutionsData?.getStepWithTestExecutions}
-            >
               <Form
                 defaultValues={step}
                 onSubmit={handleSubmit}
@@ -328,6 +314,7 @@ function FlowStep(props) {
                               : false
                           }
                           step={step}
+                          flowId={flowId}
                         />
                       )}
 
@@ -363,6 +350,7 @@ function FlowStep(props) {
           deletable={!isTrigger}
           onClose={onContextMenuClose}
           anchorEl={anchorEl}
+          flowId={flowId}
         />
       )}
     </Wrapper>

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

@@ -1,24 +1,29 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useMutation } from '@apollo/client';
+
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+
 import { DELETE_STEP } from 'graphql/mutations/delete-step';
 import useFormatMessage from 'hooks/useFormatMessage';
+import { useQueryClient } from '@tanstack/react-query';
 
 function FlowStepContextMenu(props) {
-  const { stepId, onClose, anchorEl, deletable } = props;
+  const { stepId, onClose, anchorEl, deletable, flowId } = props;
-  const [deleteStep] = useMutation(DELETE_STEP, {
-    refetchQueries: ['GetFlow', 'GetStepWithTestExecutions'],
-  });
   const formatMessage = useFormatMessage();
+  const queryClient = useQueryClient();
+  const [deleteStep] = useMutation(DELETE_STEP);
+
   const deleteActionHandler = React.useCallback(
     async (event) => {
       event.stopPropagation();
       await deleteStep({ variables: { input: { id: stepId } } });
+      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
-    [stepId],
+    [stepId, queryClient],
   );
+
   return (
     <Menu
       open={true}

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

@@ -178,6 +178,7 @@ export default function InputCreator(props) {
           helperText={description}
           clickToCopy={schema.clickToCopy}
           shouldUnregister={shouldUnregister}
+          disabled={disabled}
         />
 
         {isDynamicFieldsLoading && !additionalFields?.length && (

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

@@ -12,17 +12,20 @@ import { LOGIN } from 'graphql/mutations/login';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
+
 function LoginForm() {
   const isCloud = useCloud();
   const navigate = useNavigate();
   const formatMessage = useFormatMessage();
   const authentication = useAuthentication();
   const [login, { loading }] = useMutation(LOGIN);
+
   React.useEffect(() => {
     if (authentication.isAuthenticated) {
       navigate(URLS.DASHBOARD);
     }
   }, [authentication.isAuthenticated]);
+
   const handleSubmit = async (values) => {
     const { data } = await login({
       variables: {
@@ -32,6 +35,7 @@ function LoginForm() {
     const { token } = data.login;
     authentication.updateToken(token);
   };
+
   return (
     <Paper sx={{ px: 2, py: 4 }}>
       <Typography
@@ -107,4 +111,5 @@ function LoginForm() {
     </Paper>
   );
 }
+
 export default LoginForm;

packages/web/src/components/PowerInput/style.js

@@ -1,17 +1,20 @@
 import MuiTabs from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
+
 export const ChildrenWrapper = styled('div')`
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   hyphens: auto;
 `;
+
 export const InputLabelWrapper = styled('div')`
   position: absolute;
   left: ${({ theme }) => theme.spacing(1.75)};
   inset: 0;
   left: -6px;
 `;
+
 export const FakeInput = styled('div', {
   shouldForwardProp: (prop) => prop !== 'disabled',
 })`
@@ -31,27 +34,31 @@ export const FakeInput = styled('div', {
     border-color: ${theme.palette.action.disabled};
   `}
 
-  &:hover {
+  ${({ disabled, theme }) =>
-    border-color: ${({ theme }) => theme.palette.text.primary};
+    !disabled &&
-  }
+    `
-
+    &:hover {
-  &:focus-within,
+      border-color: ${theme.palette.text.primary};
-  &:focus {
-    &:before {
-      border-color: ${({ theme }) => theme.palette.primary.main};
-      border-radius: ${({ theme }) => theme.spacing(0.5)};
-      border-style: solid;
-      border-width: 2px;
-      bottom: -2px;
-      content: '';
-      display: block;
-      left: -2px;
-      position: absolute;
-      right: -2px;
-      top: -2px;
     }
-  }
+    &:focus-within,
+    &:focus {
+      &:before {
+        border-color: ${theme.palette.primary.main};
+        border-radius: ${theme.spacing(0.5)};
+        border-style: solid;
+        border-width: 2px;
+        bottom: -2px;
+        content: '';
+        display: block;
+        left: -2px;
+        position: absolute;
+        right: -2px;
+        top: -2px;
+      }
+    }
+  `}
 `;
+
 export const Tabs = styled(MuiTabs)`
   border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 `;

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

@@ -4,12 +4,12 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import api from 'helpers/api.js';
-import useAuthentication from 'hooks/useAuthentication.js';
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 1000,
+      retryOnMount: false,
       refetchOnWindowFocus: false,
       // provides a convenient default while it should be overridden for other HTTP methods
       queryFn: async ({ queryKey, signal }) => {
@@ -25,27 +25,9 @@ const queryClient = new QueryClient({
 });
 
 export default function AutomatischQueryClientProvider({ children }) {
-  const { token, initialize } = useAuthentication();
-
-  React.useEffect(
-    function updateTokenInHttpClient() {
-      if (!initialize) return;
-
-      if (token) {
-        api.defaults.headers.Authorization = token;
-      } else {
-        delete api.defaults.headers.Authorization;
-      }
-
-      initialize();
-    },
-    [initialize, token],
-  );
-
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-
       <ReactQueryDevtools />
     </QueryClientProvider>
   );

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
@@ -9,21 +10,26 @@ import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
+
 export default function SplitButton(props) {
   const { options, disabled, defaultActionIndex = 0 } = props;
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
+
   const multiOptions = options.length > 1;
   const selectedOption = options[defaultActionIndex];
+
   const handleToggle = () => {
     setOpen((prevOpen) => !prevOpen);
   };
+
   const handleClose = (event) => {
     if (anchorRef.current && anchorRef.current.contains(event.target)) {
       return;
     }
     setOpen(false);
   };
+
   return (
     <React.Fragment>
       <ButtonGroup
@@ -42,6 +48,7 @@ export default function SplitButton(props) {
             borderRadius: 0,
             borderRight: '1px solid #bdbdbd',
           }}
+          disabled={selectedOption.disabled}
         >
           {selectedOption.label}
         </Button>
@@ -80,6 +87,7 @@ export default function SplitButton(props) {
                         selected={index === defaultActionIndex}
                         component={Link}
                         to={option.to}
+                        disabled={option.disabled}
                       >
                         {option.label}
                       </MenuItem>
@@ -94,3 +102,17 @@ export default function SplitButton(props) {
     </React.Fragment>
   );
 }
+
+SplitButton.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      key: PropTypes.string.isRequired,
+      'data-test': PropTypes.string.isRequired,
+      to: PropTypes.string.isRequired,
+      disabled: PropTypes.bool.isRequired,
+    }).isRequired,
+  ).isRequired,
+  disabled: PropTypes.bool,
+  defaultActionIndex: PropTypes.number,
+};

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

@@ -3,11 +3,21 @@ import Alert from '@mui/material/Alert';
 import Typography from '@mui/material/Typography';
 
 import useSubscription from 'hooks/useSubscription.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+import { DateTime } from 'luxon';
+import useUserTrial from 'hooks/useUserTrial.ee';
 
 export default function SubscriptionCancelledAlert() {
+  const formatMessage = useFormatMessage();
   const subscription = useSubscription();
+  const trial = useUserTrial();
 
-  if (!subscription) return <React.Fragment />;
+  if (subscription?.data?.status === 'active' || trial.hasTrial)
+    return <React.Fragment />;
+
+  const cancellationEffectiveDateObject = DateTime.fromISO(
+    subscription?.data?.cancellationEffectiveDate,
+  );
 
   return (
     <Alert
@@ -18,7 +28,9 @@ export default function SubscriptionCancelledAlert() {
       }}
     >
       <Typography variant="subtitle2" sx={{ lineHeight: 1.5 }}>
-        {subscription.message}
+        {formatMessage('subscriptionCancelledAlert.text', {
+          date: cancellationEffectiveDateObject.toFormat('DDD'),
+        })}
       </Typography>
     </Alert>
   );

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

@@ -6,12 +6,15 @@ import ListItem from '@mui/material/ListItem';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import LoadingButton from '@mui/lab/LoadingButton';
+
 import { EditorContext } from 'contexts/Editor';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { EXECUTE_FLOW } from 'graphql/mutations/execute-flow';
 import JSONViewer from 'components/JSONViewer';
 import WebhookUrlInfo from 'components/WebhookUrlInfo';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
+import { useQueryClient } from '@tanstack/react-query';
+
 function serializeErrors(graphQLErrors) {
   return graphQLErrors?.map((error) => {
     try {
@@ -28,6 +31,7 @@ function serializeErrors(graphQLErrors) {
     }
   });
 }
+
 function TestSubstep(props) {
   const {
     substep,
@@ -38,13 +42,13 @@ function TestSubstep(props) {
     onContinue,
     step,
     showWebhookUrl = false,
+    flowId,
   } = props;
   const formatMessage = useFormatMessage();
   const editorContext = React.useContext(EditorContext);
   const [executeFlow, { data, error, loading, called, reset }] = useMutation(
     EXECUTE_FLOW,
     {
-      refetchQueries: ['GetStepWithTestExecutions'],
       context: { autoSnackbar: false },
     },
   );
@@ -52,6 +56,8 @@ function TestSubstep(props) {
   const isCompleted = !error && called && !loading;
   const hasNoOutput = !response && isCompleted;
   const { name } = substep;
+  const queryClient = useQueryClient();
+
   React.useEffect(
     function resetTestDataOnSubstepToggle() {
       if (!expanded) {
@@ -60,20 +66,28 @@ function TestSubstep(props) {
     },
     [expanded, reset],
   );
-  const handleSubmit = React.useCallback(() => {
+
+  const handleSubmit = React.useCallback(async () => {
     if (isCompleted) {
       onContinue?.();
       return;
     }
-    executeFlow({
+
+    await executeFlow({
       variables: {
         input: {
           stepId: step.id,
         },
       },
     });
-  }, [onSubmit, onContinue, isCompleted, step.id]);
+
+    await queryClient.invalidateQueries({
+      queryKey: ['flows', flowId],
+    });
+  }, [onSubmit, onContinue, isCompleted, queryClient, flowId]);
+
   const onToggle = expanded ? onCollapse : onExpand;
+
   return (
     <React.Fragment>
       <FlowSubstepTitle expanded={expanded} onClick={onToggle} title={name} />

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

@@ -8,7 +8,7 @@ import useUserTrial from 'hooks/useUserTrial.ee';
 export default function TrialStatusBadge() {
   const data = useUserTrial();
 
-  if (!data) return <React.Fragment />;
+  if (!data.hasTrial) return <React.Fragment />;
 
   const { message, status } = data;
 

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

@@ -10,15 +10,23 @@ import CardContent from '@mui/material/CardContent';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
+
 import TrialOverAlert from 'components/TrialOverAlert/index.ee';
 import SubscriptionCancelledAlert from 'components/SubscriptionCancelledAlert/index.ee';
 import CheckoutCompletedAlert from 'components/CheckoutCompletedAlert/index.ee';
 import * as URLS from 'config/urls';
-import useBillingAndUsageData from 'hooks/useBillingAndUsageData.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import usePlanAndUsage from 'hooks/usePlanAndUsage';
+import useSubscription from 'hooks/useSubscription.ee';
+import useUserTrial from 'hooks/useUserTrial.ee';
+import { useQueryClient } from '@tanstack/react-query';
+import useCurrentUser from 'hooks/useCurrentUser';
+
 const capitalize = (str) => str[0].toUpperCase() + str.slice(1, str.length);
+
 function BillingCard(props) {
-  const { name, title = '', action } = props;
+  const { name, title = '', action, text } = props;
+
   return (
     <Card
       sx={{
@@ -40,42 +48,94 @@ function BillingCard(props) {
       </CardContent>
 
       <CardActions>
-        <Action action={action} />
+        <Action action={action} text={text} />
       </CardActions>
     </Card>
   );
 }
+
 function Action(props) {
-  const { action } = props;
+  const { action, text } = props;
+
   if (!action) return <React.Fragment />;
-  const { text, type } = action;
+
-  if (type === 'link') {
+  if (action.startsWith('http')) {
-    if (action.src.startsWith('http')) {
-      return (
-        <Button size="small" href={action.src} target="_blank">
-          {text}
-        </Button>
-      );
-    } else {
-      return (
-        <Button size="small" component={Link} to={action.src}>
-          {text}
-        </Button>
-      );
-    }
-  }
-  if (type === 'text') {
     return (
-      <Typography variant="subtitle2" pb={1}>
+      <Button size="small" href={action} target="_blank">
         {text}
-      </Typography>
+      </Button>
+    );
+  } else if (action.startsWith('/')) {
+    return (
+      <Button size="small" component={Link} to={action}>
+        {text}
+      </Button>
     );
   }
-  return <React.Fragment />;
+
+  return (
+    <Typography variant="subtitle2" pb={1}>
+      {text}
+    </Typography>
+  );
 }
+
 export default function UsageDataInformation() {
   const formatMessage = useFormatMessage();
-  const billingAndUsageData = useBillingAndUsageData();
+  const queryClient = useQueryClient();
+  const { data: currentUser } = useCurrentUser();
+  const currentUserId = currentUser?.data?.id;
+  const { data } = usePlanAndUsage(currentUserId);
+  const planAndUsage = data?.data;
+  const trial = useUserTrial();
+  const subscriptionData = useSubscription();
+  const subscription = subscriptionData?.data;
+  let billingInfo;
+
+  React.useEffect(() => {
+    queryClient.invalidateQueries({
+      queryKey: ['users', currentUserId, 'planAndUsage'],
+    });
+  }, [subscription, queryClient, currentUserId]);
+
+  if (trial.hasTrial) {
+    billingInfo = {
+      monthlyQuota: {
+        title: formatMessage('usageDataInformation.freeTrial'),
+        action: URLS.SETTINGS_PLAN_UPGRADE,
+        text: 'Upgrade plan',
+      },
+      nextBillAmount: {
+        title: '---',
+        action: null,
+        text: null,
+      },
+      nextBillDate: {
+        title: '---',
+        action: null,
+        text: null,
+      },
+    };
+  } else {
+    billingInfo = {
+      monthlyQuota: {
+        title: planAndUsage?.plan?.limit,
+        action: subscription?.cancelUrl,
+        text: formatMessage('usageDataInformation.cancelPlan'),
+      },
+      nextBillAmount: {
+        title: `€${subscription?.nextBillAmount}`,
+        action: subscription?.updateUrl,
+        text: formatMessage('usageDataInformation.updatePaymentMethod'),
+      },
+      nextBillDate: {
+        title: subscription?.nextBillDate,
+        action: formatMessage('usageDataInformation.monthlyPayment'),
+        text: formatMessage('usageDataInformation.monthlyPayment'),
+      },
+    };
+  }
+
   return (
     <React.Fragment>
       <Stack sx={{ width: '100%', mb: 2 }} spacing={2}>
@@ -92,11 +152,8 @@ export default function UsageDataInformation() {
               {formatMessage('usageDataInformation.subscriptionPlan')}
             </Typography>
 
-            {billingAndUsageData?.subscription?.status && (
+            {subscription?.status && (
-              <Chip
+              <Chip label={capitalize(subscription?.status)} color="success" />
-                label={capitalize(billingAndUsageData?.subscription?.status)}
-                color="success"
-              />
             )}
           </Box>
 
@@ -113,26 +170,27 @@ export default function UsageDataInformation() {
             <Grid item xs={12} md={4}>
               <BillingCard
                 name={formatMessage('usageDataInformation.monthlyQuota')}
-                title={billingAndUsageData?.subscription?.monthlyQuota.title}
+                title={billingInfo.monthlyQuota.title}
-                action={billingAndUsageData?.subscription?.monthlyQuota.action}
+                action={billingInfo.monthlyQuota.action}
+                text={billingInfo.monthlyQuota.text}
               />
             </Grid>
 
             <Grid item xs={12} md={4}>
               <BillingCard
                 name={formatMessage('usageDataInformation.nextBillAmount')}
-                title={billingAndUsageData?.subscription?.nextBillAmount.title}
+                title={billingInfo.nextBillAmount.title}
-                action={
+                action={billingInfo.nextBillAmount.action}
-                  billingAndUsageData?.subscription?.nextBillAmount.action
+                text={billingInfo.nextBillAmount.text}
-                }
               />
             </Grid>
 
             <Grid item xs={12} md={4}>
               <BillingCard
                 name={formatMessage('usageDataInformation.nextBillDate')}
-                title={billingAndUsageData?.subscription?.nextBillDate.title}
+                title={billingInfo.nextBillDate.title}
-                action={billingAndUsageData?.subscription?.nextBillDate.action}
+                action={billingInfo.nextBillDate.action}
+                text={billingInfo.nextBillDate.text}
               />
             </Grid>
           </Grid>
@@ -171,7 +229,7 @@ export default function UsageDataInformation() {
                 variant="subtitle2"
                 sx={{ color: 'text.secondary', mt: 2, fontWeight: 500 }}
               >
-                {billingAndUsageData?.usage.task}
+                {planAndUsage?.usage.task}
               </Typography>
             </Box>
 
@@ -179,7 +237,7 @@ export default function UsageDataInformation() {
           </Box>
 
           {/* free plan has `null` status so that we can show the upgrade button */}
-          {billingAndUsageData?.subscription?.status === null && (
+          {subscription?.status === undefined && (
             <Button
               component={Link}
               to={URLS.SETTINGS_PLAN_UPGRADE}

packages/web/src/config/urls.js

@@ -17,13 +17,13 @@ export const APP_ADD_CONNECTION = (appKey, shared = false) =>
   `/app/${appKey}/connections/add?shared=${shared}`;
 export const APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID = (
   appKey,
-  appAuthClientId
+  appAuthClientId,
 ) => `/app/${appKey}/connections/add?appAuthClientId=${appAuthClientId}`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (
   appKey,
   connectionId,
-  appAuthClientId
+  appAuthClientId,
 ) => {
   const path = `/app/${appKey}/connections/${connectionId}/reconnect`;
   if (appAuthClientId) {

packages/web/src/contexts/Authentication.jsx

@@ -1,31 +1,34 @@
 import * as React from 'react';
-import { getItem, setItem } from 'helpers/storage';
+import { getItem, removeItem, setItem } from 'helpers/storage';
+import api from 'helpers/api.js';
 
 export const AuthenticationContext = React.createContext({
   token: null,
-  updateToken: () => void 0,
+  updateToken: () => {},
+  removeToken: () => {},
   isAuthenticated: false,
-  initialize: () => void 0,
 });
 
 export const AuthenticationProvider = (props) => {
   const { children } = props;
-  const [isInitialized, setInitialized] = React.useState(false);
   const [token, setToken] = React.useState(() => getItem('token'));
 
   const value = React.useMemo(() => {
     return {
       token,
       updateToken: (newToken) => {
+        api.defaults.headers.Authorization = newToken;
         setToken(newToken);
         setItem('token', newToken);
       },
-      isAuthenticated: Boolean(token) && isInitialized,
+      removeToken: () => {
-      initialize: () => {
+        delete api.defaults.headers.Authorization;
-        setInitialized(true);
+        setToken(null);
+        removeItem('token');
       },
+      isAuthenticated: Boolean(token),
     };
-  }, [token, isInitialized]);
+  }, [token]);
 
   return (
     <AuthenticationContext.Provider value={value}>

packages/web/src/contexts/Paddle.ee.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import * as URLS from 'config/urls';
 import useCloud from 'hooks/useCloud';
 import usePaddleInfo from 'hooks/usePaddleInfo.ee';
-import apolloClient from 'graphql/client';
+import { useQueryClient } from '@tanstack/react-query';
 
 export const PaddleContext = React.createContext({
   loaded: false,
@@ -17,6 +17,7 @@ export const PaddleProvider = (props) => {
   const { data } = usePaddleInfo();
   const sandbox = data?.data?.sandbox;
   const vendorId = data?.data?.vendorId;
+  const queryClient = useQueryClient();
 
   const [loaded, setLoaded] = React.useState(false);
 
@@ -29,8 +30,12 @@ export const PaddleProvider = (props) => {
         if (completed) {
           // Paddle has side effects in the background,
           // so we need to refetch the relevant queries
-          await apolloClient.refetchQueries({
+          await queryClient.refetchQueries({
-            include: ['GetTrialStatus', 'GetBillingAndUsage'],
+            queryKey: ['users', 'me', 'trial'],
+          });
+
+          await queryClient.refetchQueries({
+            queryKey: ['users', 'me', 'subscription'],
           });
 
           navigate(URLS.SETTINGS_BILLING_AND_USAGE, {
@@ -39,7 +44,7 @@ export const PaddleProvider = (props) => {
         }
       }
     },
-    [navigate],
+    [navigate, queryClient],
   );
 
   const value = React.useMemo(() => {

packages/web/src/graphql/queries/get-app-auth-client.ee.js

@@ -1,11 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APP_AUTH_CLIENT = gql`
-  query GetAppAuthClient($id: String!) {
-    getAppAuthClient(id: $id) {
-      id
-      appConfigId
-      name
-      active
-    }
-  }
-`;

packages/web/src/graphql/queries/get-app-auth-clients.ee.js

@@ -1,11 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APP_AUTH_CLIENTS = gql`
-  query GetAppAuthClients($appKey: String!, $active: Boolean) {
-    getAppAuthClients(appKey: $appKey, active: $active) {
-      id
-      appConfigId
-      name
-      active
-    }
-  }
-`;

packages/web/src/graphql/queries/get-app-connections.js

@@ -1,20 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APP_CONNECTIONS = gql`
-  query GetAppConnections($key: String!) {
-    getApp(key: $key) {
-      key
-      connections {
-        id
-        key
-        reconnectable
-        appAuthClientId
-        verified
-        flowCount
-        formattedData {
-          screenName
-        }
-        createdAt
-      }
-    }
-  }
-`;

packages/web/src/graphql/queries/get-billing-and-usage.ee.js

@@ -1,37 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_BILLING_AND_USAGE = gql`
-  query GetBillingAndUsage {
-    getBillingAndUsage {
-      subscription {
-        status
-        monthlyQuota {
-          title
-          action {
-            type
-            text
-            src
-          }
-        }
-        nextBillDate {
-          title
-          action {
-            type
-            text
-            src
-          }
-        }
-        nextBillAmount {
-          title
-          action {
-            type
-            text
-            src
-          }
-        }
-      }
-      usage {
-        task
-      }
-    }
-  }
-`;