feat: Move canCustomConnect logic to static db field for AppConfig

packages/backend/src/apps/gmail/actions/index.js

@@ -1,3 +0,0 @@
-import sendEmail from './send-email/index.js';
-
-export default [sendEmail];

packages/backend/src/apps/gmail/actions/send-email/index.js

@@ -1,234 +0,0 @@
-import defineAction from '../../../../helpers/define-action.js';
-
-export default defineAction({
-  name: 'Send email',
-  key: 'sendEmail',
-  description: 'Send a new email message.',
-  arguments: [
-    {
-      label: 'TOs',
-      key: 'tos',
-      type: 'dynamic',
-      required: false,
-      description: '',
-      fields: [
-        {
-          label: 'To',
-          key: 'to',
-          type: 'string',
-          required: false,
-          variables: true,
-        },
-      ],
-    },
-    {
-      label: 'CCs',
-      key: 'ccs',
-      type: 'dynamic',
-      required: false,
-      description: '',
-      fields: [
-        {
-          label: 'CC',
-          key: 'cc',
-          type: 'string',
-          required: false,
-          variables: true,
-        },
-      ],
-    },
-    {
-      label: 'BCCs',
-      key: 'bccs',
-      type: 'dynamic',
-      required: false,
-      description: '',
-      fields: [
-        {
-          label: 'BCC',
-          key: 'bcc',
-          type: 'string',
-          required: false,
-          variables: true,
-        },
-      ],
-    },
-    {
-      label: 'From',
-      key: 'from',
-      type: 'dropdown',
-      required: false,
-      description:
-        'Select an email address or alias from your Gmail Account. Defaults to the primary email address.',
-      variables: true,
-      source: {
-        type: 'query',
-        name: 'getDynamicData',
-        arguments: [
-          {
-            name: 'key',
-            value: 'listEmails',
-          },
-        ],
-      },
-    },
-    {
-      label: 'From Name',
-      key: 'fromName',
-      type: 'string',
-      required: false,
-      description: '',
-      variables: true,
-    },
-    {
-      label: 'Reply To',
-      key: 'replyTo',
-      type: 'string',
-      required: false,
-      description: 'Specify a single reply address other than your own.',
-      variables: true,
-    },
-    {
-      label: 'Subject',
-      key: 'subject',
-      type: 'string',
-      required: true,
-      description: '',
-      variables: true,
-    },
-    {
-      label: 'Body Type',
-      key: 'bodyType',
-      type: 'dropdown',
-      required: false,
-      description: '',
-      variables: true,
-      options: [
-        {
-          label: 'plain',
-          value: 'plain',
-        },
-        {
-          label: 'html',
-          value: 'html',
-        },
-      ],
-    },
-    {
-      label: 'Body',
-      key: 'emailBody',
-      type: 'string',
-      required: true,
-      description: '',
-      variables: true,
-    },
-    {
-      label: 'Signature',
-      key: 'signature',
-      type: 'dropdown',
-      required: false,
-      description: '',
-      variables: true,
-      source: {
-        type: 'query',
-        name: 'getDynamicData',
-        arguments: [
-          {
-            name: 'key',
-            value: 'listSignatures',
-          },
-        ],
-      },
-    },
-    {
-      label: 'Label',
-      key: 'labelId',
-      type: 'dropdown',
-      required: false,
-      description: '',
-      variables: true,
-      source: {
-        type: 'query',
-        name: 'getDynamicData',
-        arguments: [
-          {
-            name: 'key',
-            value: 'listLabels',
-          },
-        ],
-      },
-    },
-  ],
-
-  async run($) {
-    const {
-      tos,
-      ccs,
-      bccs,
-      from,
-      fromName,
-      replyTo,
-      subject,
-      bodyType,
-      emailBody,
-      signature,
-      labelId,
-    } = $.step.parameters;
-    const userId = $.auth.data.userId;
-
-    const allTos = tos?.map((entry) => entry.to);
-    const allCcs = ccs?.map((entry) => entry.cc);
-    const allBccs = bccs?.map((entry) => entry.bcc);
-    const contentType =
-      bodyType === 'html'
-        ? 'text/html; charset="UTF-8"'
-        : 'text/plain; charset="UTF-8"';
-
-    const email =
-      'From: ' +
-      fromName +
-      ' <' +
-      from +
-      '>' +
-      '\r\n' +
-      'Reply-To: ' +
-      replyTo +
-      '\r\n' +
-      'To: ' +
-      allTos.join(',') +
-      '\r\n' +
-      'Cc: ' +
-      allCcs.join(',') +
-      '\r\n' +
-      'Bcc: ' +
-      allBccs.join(',') +
-      '\r\n' +
-      'Subject: ' +
-      subject +
-      '\r\n' +
-      'Content-Type: ' +
-      contentType +
-      '\r\n' +
-      '\r\n' +
-      emailBody +
-      '\r\n' +
-      '\r\n' +
-      signature;
-
-    const base64EncodedEmailBody = Buffer.from(email).toString('base64');
-
-    const body = {
-      labelIds: [labelId],
-      raw: base64EncodedEmailBody,
-    };
-
-    const { data } = await $.http.post(
-      `/gmail/v1/users/${userId}/messages/send`,
-      body
-    );
-
-    $.setActionItem({
-      raw: data,
-    });
-  },
-});

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

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 49.4 512 399.42">
-  <g fill="none" fill-rule="evenodd">
-    <g fill-rule="nonzero">
-      <path fill="#4285f4" d="M34.91 448.818h81.454V251L0 163.727V413.91c0 19.287 15.622 34.91 34.91 34.91z"/>
-      <path fill="#34a853" d="M395.636 448.818h81.455c19.287 0 34.909-15.622 34.909-34.909V163.727L395.636 251z"/>
-      <path fill="#fbbc04" d="M395.636 99.727V251L512 163.727v-46.545c0-43.142-49.25-67.782-83.782-41.891z"/>
-    </g>
-    <path fill="#ea4335" d="M116.364 251V99.727L256 204.455 395.636 99.727V251L256 355.727z"/>
-    <path fill="#c5221f" fill-rule="nonzero" d="M0 117.182v46.545L116.364 251V99.727L83.782 75.291C49.25 49.4 0 74.04 0 117.18z"/>
-  </g>
-</svg>

packages/backend/src/apps/gmail/auth/generate-auth-url.js

@@ -1,23 +0,0 @@
-import { URLSearchParams } from 'url';
-import authScope from '../common/auth-scope.js';
-
-export default async function generateAuthUrl($) {
-  const oauthRedirectUrlField = $.app.auth.fields.find(
-    (field) => field.key == 'oAuthRedirectUrl'
-  );
-  const redirectUri = oauthRedirectUrlField.value;
-  const searchParams = new URLSearchParams({
-    client_id: $.auth.data.clientId,
-    redirect_uri: redirectUri,
-    prompt: 'select_account',
-    scope: authScope.join(' '),
-    response_type: 'code',
-    access_type: 'offline',
-  });
-
-  const url = `https://accounts.google.com/o/oauth2/v2/auth?${searchParams.toString()}`;
-
-  await $.auth.set({
-    url,
-  });
-}

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

@@ -1,48 +0,0 @@
-import generateAuthUrl from './generate-auth-url.js';
-import verifyCredentials from './verify-credentials.js';
-import refreshToken from './refresh-token.js';
-import isStillVerified from './is-still-verified.js';
-
-export default {
-  fields: [
-    {
-      key: 'oAuthRedirectUrl',
-      label: 'OAuth Redirect URL',
-      type: 'string',
-      required: true,
-      readOnly: true,
-      value: '{WEB_APP_URL}/app/gmail/connections/add',
-      placeholder: null,
-      description:
-        'When asked to input a redirect URL in Google Cloud, enter the URL above.',
-      clickToCopy: true,
-    },
-    {
-      key: 'clientId',
-      label: 'Client ID',
-      type: 'string',
-      required: true,
-      readOnly: false,
-      value: null,
-      placeholder: null,
-      description: null,
-      clickToCopy: false,
-    },
-    {
-      key: 'clientSecret',
-      label: 'Client Secret',
-      type: 'string',
-      required: true,
-      readOnly: false,
-      value: null,
-      placeholder: null,
-      description: null,
-      clickToCopy: false,
-    },
-  ],
-
-  generateAuthUrl,
-  verifyCredentials,
-  isStillVerified,
-  refreshToken,
-};

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

@@ -1,8 +0,0 @@
-import getCurrentUser from '../common/get-current-user.js';
-
-const isStillVerified = async ($) => {
-  const currentUser = await getCurrentUser($);
-  return !!currentUser.resourceName;
-};
-
-export default isStillVerified;

packages/backend/src/apps/gmail/auth/refresh-token.js

@@ -1,26 +0,0 @@
-import { URLSearchParams } from 'node:url';
-
-import authScope from '../common/auth-scope.js';
-
-const refreshToken = async ($) => {
-  const params = new URLSearchParams({
-    client_id: $.auth.data.clientId,
-    client_secret: $.auth.data.clientSecret,
-    grant_type: 'refresh_token',
-    refresh_token: $.auth.data.refreshToken,
-  });
-
-  const { data } = await $.http.post(
-    'https://oauth2.googleapis.com/token',
-    params.toString()
-  );
-
-  await $.auth.set({
-    accessToken: data.access_token,
-    expiresIn: data.expires_in,
-    scope: authScope.join(' '),
-    tokenType: data.token_type,
-  });
-};
-
-export default refreshToken;

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

@@ -1,43 +0,0 @@
-import getCurrentUser from '../common/get-current-user.js';
-
-const verifyCredentials = async ($) => {
-  const oauthRedirectUrlField = $.app.auth.fields.find(
-    (field) => field.key == 'oAuthRedirectUrl'
-  );
-  const redirectUri = oauthRedirectUrlField.value;
-  const { data } = await $.http.post(`https://oauth2.googleapis.com/token`, {
-    client_id: $.auth.data.clientId,
-    client_secret: $.auth.data.clientSecret,
-    code: $.auth.data.code,
-    grant_type: 'authorization_code',
-    redirect_uri: redirectUri,
-  });
-
-  await $.auth.set({
-    accessToken: data.access_token,
-    tokenType: data.token_type,
-  });
-
-  const currentUser = await getCurrentUser($);
-
-  const { displayName } = currentUser.names.find(
-    (name) => name.metadata.primary
-  );
-  const { value: email } = currentUser.emailAddresses.find(
-    (emailAddress) => emailAddress.metadata.primary
-  );
-
-  await $.auth.set({
-    clientId: $.auth.data.clientId,
-    clientSecret: $.auth.data.clientSecret,
-    scope: $.auth.data.scope,
-    idToken: data.id_token,
-    expiresIn: data.expires_in,
-    refreshToken: data.refresh_token,
-    resourceName: currentUser.resourceName,
-    screenName: `${displayName} - ${email}`,
-    userId: email,
-  });
-};
-
-export default verifyCredentials;

packages/backend/src/apps/gmail/common/add-auth-header.js

@@ -1,9 +0,0 @@
-const addAuthHeader = ($, requestConfig) => {
-  if ($.auth.data?.accessToken) {
-    requestConfig.headers.Authorization = `${$.auth.data.tokenType} ${$.auth.data.accessToken}`;
-  }
-
-  return requestConfig;
-};
-
-export default addAuthHeader;

packages/backend/src/apps/gmail/common/auth-scope.js

@@ -1,8 +0,0 @@
-const authScope = [
-  'https://www.googleapis.com/auth/gmail.compose',
-  'https://www.googleapis.com/auth/gmail.modify',
-  'https://www.googleapis.com/auth/userinfo.email',
-  'https://www.googleapis.com/auth/userinfo.profile',
-];
-
-export default authScope;

packages/backend/src/apps/gmail/common/get-current-user.js

@@ -1,8 +0,0 @@
-const getCurrentUser = async ($) => {
-  const { data: currentUser } = await $.http.get(
-    'https://people.googleapis.com/v1/people/me?personFields=names,emailAddresses'
-  );
-  return currentUser;
-};
-
-export default getCurrentUser;

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

@@ -1,5 +0,0 @@
-import listEmails from './list-emails/index.js';
-import listLabels from './list-labels/index.js';
-import listSignatures from './list-signatures/index.js';
-
-export default [listEmails, listLabels, listSignatures];

packages/backend/src/apps/gmail/dynamic-data/list-emails/index.js

@@ -1,23 +0,0 @@
-import getCurrentUser from '../../common/get-current-user.js';
-
-export default {
-  name: 'List emails',
-  key: 'listEmails',
-
-  async run($) {
-    const emails = {
-      data: [],
-    };
-
-    const currentUser = await getCurrentUser($);
-
-    for (const emailAddress of currentUser.emailAddresses) {
-      emails.data.push({
-        value: emailAddress.value,
-        name: emailAddress.value,
-      });
-    }
-
-    return emails;
-  },
-};

packages/backend/src/apps/gmail/dynamic-data/list-labels/index.js

@@ -1,22 +0,0 @@
-export default {
-  name: 'List labels',
-  key: 'listLabels',
-
-  async run($) {
-    const labels = {
-      data: [],
-    };
-    const userId = $.auth.data.userId;
-
-    const { data } = await $.http.get(`/gmail/v1/users/${userId}/labels`);
-
-    for (const label of data.labels) {
-      labels.data.push({
-        value: label.id,
-        name: label.name,
-      });
-    }
-
-    return labels;
-  },
-};

packages/backend/src/apps/gmail/dynamic-data/list-signatures/index.js

@@ -1,24 +0,0 @@
-export default {
-  name: 'List signatures',
-  key: 'listSignatures',
-
-  async run($) {
-    const signatures = {
-      data: [],
-    };
-    const userId = $.auth.data.userId;
-
-    const { data } = await $.http.get(
-      `/gmail/v1/users/${userId}/settings/sendAs`
-    );
-
-    for (const sendAs of data.sendAs) {
-      signatures.data.push({
-        value: sendAs.signature,
-        name: sendAs.sendAsEmail,
-      });
-    }
-
-    return signatures;
-  },
-};

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

@@ -1,22 +0,0 @@
-import defineApp from '../../helpers/define-app.js';
-import addAuthHeader from './common/add-auth-header.js';
-import auth from './auth/index.js';
-import triggers from './triggers/index.js';
-import dynamicData from './dynamic-data/index.js';
-import actions from './actions/index.js';
-
-export default defineApp({
-  name: 'Gmail',
-  key: 'gmail',
-  baseUrl: 'https://mail.google.com',
-  apiBaseUrl: 'https://gmail.googleapis.com',
-  iconUrl: '{BASE_URL}/apps/gmail/assets/favicon.svg',
-  authDocUrl: 'https://automatisch.io/docs/apps/gmail/connection',
-  primaryColor: 'ea4335',
-  supportsConnections: true,
-  beforeRequest: [addAuthHeader],
-  auth,
-  triggers,
-  dynamicData,
-  actions,
-});

packages/backend/src/apps/gmail/triggers/index.js

@@ -1,3 +0,0 @@
-import newEmails from './new-emails/index.js';
-
-export default [newEmails];

packages/backend/src/apps/gmail/triggers/new-emails/index.js

@@ -1,68 +0,0 @@
-import defineTrigger from '../../../../helpers/define-trigger.js';
-
-export default defineTrigger({
-  name: 'New emails',
-  key: 'newEmails',
-  pollInterval: 15,
-  description:
-    'Triggers when a new email is received in the specified mailbox.',
-  arguments: [
-    {
-      label: 'Label',
-      key: 'labelId',
-      type: 'dropdown',
-      required: false,
-      description:
-        "If you don't choose a label, this Zap will trigger for all emails, including Drafts.",
-      variables: true,
-      source: {
-        type: 'query',
-        name: 'getDynamicData',
-        arguments: [
-          {
-            name: 'key',
-            value: 'listLabels',
-          },
-        ],
-      },
-    },
-  ],
-
-  async run($) {
-    const userId = $.auth.data.userId;
-    const labelId = $.step.parameters.labelId;
-
-    const params = {
-      maxResults: 500,
-      pageToken: undefined,
-    };
-
-    if (labelId) {
-      params.labelIds = labelId;
-    }
-
-    do {
-      const { data } = await $.http.get(`/gmail/v1/users/${userId}/messages`, {
-        params,
-      });
-      params.pageToken = data.nextPageToken;
-
-      if (!data?.messages?.length) {
-        return;
-      }
-
-      for (const message of data.messages) {
-        const { data: messageData } = await $.http.get(
-          `/gmail/v1/users/${userId}/messages/${message.id}`
-        );
-
-        $.pushTriggerItem({
-          raw: messageData,
-          meta: {
-            internalId: messageData.id,
-          },
-        });
-      }
-    } while (params.pageToken);
-  },
-});

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 || null;
+    const data = $.step.parameters.data;
     const url = $.step.parameters.url;
     const headers = $.step.parameters.headers;
 
@@ -108,17 +108,14 @@ export default defineAction({
       return result;
     }, {});
 
-    let expectedResponseContentType = headersObject.accept;
+    let contentType = headersObject['content-type'];
 
     // 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
@@ -131,7 +128,7 @@ export default defineAction({
       headers: headersObject,
     };
 
-    if (!isPossiblyTextBased(expectedResponseContentType)) {
+    if (!isPossiblyTextBased(contentType)) {
       requestData.responseType = 'arraybuffer';
     }
 
@@ -141,7 +138,7 @@ export default defineAction({
 
     let responseData = response.data;
 
-    if (!isPossiblyTextBased(expectedResponseContentType)) {
+    if (!isPossiblyTextBased(contentType)) {
       responseData = Buffer.from(responseData).toString('base64');
     }
 

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

@@ -64,17 +64,32 @@ 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.',
-      variables: true,
+      options: [
-      source: {
+        {
-        type: 'query',
+          label: 'Qualified (Pipeline)',
-        name: 'getDynamicData',
+          value: 1,
-        arguments: [
+        },
-          {
+        {
-            name: 'key',
+          label: 'Contact Made (Pipeline)',
-            value: 'listStages',
+          value: 2,
-          },
+        },
-        ],
+        {
-      },
+          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,25 +1,23 @@
 import listActivityTypes from './list-activity-types/index.js';
 import listCurrencies from './list-currencies/index.js';
 import listDeals from './list-deals/index.js';
-import listLeadLabels from './list-lead-labels/index.js';
 import listLeads from './list-leads/index.js';
-import listOrganizationLabelField from './list-organization-label-field/index.js';
+import listLeadLabels from './list-lead-labels/index.js';
 import listOrganizations from './list-organizations/index.js';
+import listOrganizationLabelField from './list-organization-label-field/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,
-  listLeadLabels,
   listLeads,
-  listOrganizationLabelField,
+  listLeadLabels,
   listOrganizations,
+  listOrganizationLabelField,
   listPersonLabelField,
   listPersons,
-  listStages,
   listUsers,
 ];

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

@@ -1,23 +0,0 @@
-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/controllers/api/v1/apps/get-config.ee.js

@@ -3,9 +3,6 @@ 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

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

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

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

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

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

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

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

@@ -1,210 +0,0 @@
-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,6 +6,10 @@ export async function up(knex) {
 
 export async function down(knex) {
   await knex.schema.table('app_auth_clients', (table) => {
-    table.uuid('app_config_id').references('id').inTable('app_configs');
+    table
+      .uuid('app_config_id')
+      .notNullable()
+      .references('id')
+      .inTable('app_configs');
   });
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+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,6 +1,8 @@
 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,6 +1,19 @@
 type Query {
-  placeholderQuery(name: String): Boolean
+  getApp(key: String!): App
+  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
@@ -550,6 +563,43 @@ 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,6 +40,9 @@ 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,21 +42,19 @@ describe('authentication rules', () => {
 
   const { queries, mutations } = getQueryAndMutationNames(authenticationRules);
 
-  if (queries.length) {
+  describe('for queries', () => {
-    describe('for queries', () => {
+    queries.forEach((query) => {
-      queries.forEach((query) => {
+      it(`should apply correct rule for query: ${query}`, () => {
-        it(`should apply correct rule for query: ${query}`, () => {
+        const ruleApplied = authenticationRules.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,10 +7,6 @@ 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',
@@ -31,26 +27,14 @@ 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 = axios.defaults;
+const config = {};
 const httpProxyUrl = process.env.http_proxy;
 const httpsProxyUrl = process.env.https_proxy;
 const supportsProxy = httpProxyUrl || httpsProxyUrl;

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

@@ -2,7 +2,6 @@ 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
@@ -19,17 +18,6 @@ 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);
@@ -49,7 +37,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,6 +1,7 @@
 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 {
@@ -59,6 +60,21 @@ 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,45 +15,56 @@ 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,24 +153,6 @@ 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').withSoftDeleted();
+    const user = await this.$relatedQuery('user');
     const allowedToRunFlows = await user.isAllowedToRunFlows();
     return allowedToRunFlows ? false : true;
   }

packages/backend/src/models/step.js

@@ -8,7 +8,6 @@ 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';
@@ -218,39 +217,6 @@ 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,7 +7,6 @@ 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';
@@ -156,13 +155,6 @@ 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
@@ -314,56 +306,6 @@ 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,7 +6,6 @@ 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';
@@ -22,13 +21,6 @@ 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,7 +3,6 @@ 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();
 
@@ -14,11 +13,4 @@ router.get(
   asyncHandler(getFlowsAction)
 );
 
-router.post(
-  '/:connectionId/test',
-  authenticateUser,
-  authorizeUser,
-  asyncHandler(createTestAction)
-);
-
 export default router;

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

@@ -5,7 +5,6 @@ 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();
 
@@ -30,11 +29,4 @@ 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,11 +1,9 @@
 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';
@@ -13,14 +11,6 @@ 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,22 +1,12 @@
 const appSerializer = (app) => {
-  let appData = {
+  return {
-    key: app.key,
     name: app.name,
+    key: app.key,
     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,8 +6,6 @@ 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,8 +27,6 @@ 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,8 +19,6 @@ 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

@@ -1,25 +0,0 @@
-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,8 +9,6 @@ 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,8 +10,6 @@ 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,8 +4,6 @@ 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,8 +7,6 @@ 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

@@ -1,55 +0,0 @@
-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,7 +1,6 @@
 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;
@@ -23,8 +22,8 @@ global.afterEach(async () => {
   await global.knex.rollback();
   Model.knex(knex);
 
-  vi.restoreAllMocks();
+  // jest.restoreAllMocks();
-  vi.clearAllMocks();
+  // jest.clearAllMocks();
 });
 
 global.afterAll(async () => {

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

@@ -141,16 +141,6 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/gitlab/connection' },
           ],
         },
-        {
-          text: 'Gmail',
-          collapsible: true,
-          collapsed: true,
-          items: [
-            { text: 'Triggers', link: '/apps/gmail/triggers' },
-            { text: 'Connection', link: '/apps/gmail/connection' },
-            { text: 'Actions', link: '/apps/gmail/actions' },
-          ],
-        },
         {
           text: 'Google Calendar',
           collapsible: true,

packages/docs/pages/apps/gmail/actions.md

@@ -1,12 +0,0 @@
----
-favicon: /favicons/gmail.svg
-items:
-  - name: Send email
-    desc: Send a new email message.
----
-
-<script setup>
-  import CustomListing from '../../components/CustomListing.vue'
-</script>
-
-<CustomListing />

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

@@ -1,28 +0,0 @@
-# Gmail
-
-:::info
-This page explains the steps you need to follow to set up the Gmail
-connection in Automatisch. If any of the steps are outdated, please let us know!
-:::
-
-1. Go to the [Google Cloud Console](https://console.cloud.google.com) to create a project.
-2. Click on the project drop-down menu at the top of the page, and click on the **New Project** button.
-3. Enter a name for your project and click on the **Create** button.
-4. Go to [API Library](https://console.cloud.google.com/apis/library) in Google Cloud console.
-5. Search for **People API** in the search bar and click on it.
-6. Click on the **Enable** button to enable the API.
-7. Repeat steps 5 and 6 for the **Gmail API**
-8. Go to [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent) in Google Cloud console.
-9. Select **External** here for starting your app in testing mode at first. Click on the **Create** button.
-10. Fill **App Name**, **User Support Email**, and **Developer Contact Information**. Click on the **Save and Continue** button.
-11. Skip adding or removing scopes and click on the **Save and Continue** button.
-12. Click on the **Add Users** button and add a test email because only test users can access the app while publishing status is set to "Testing".
-13. Click on the **Save and Continue** button and now you have configured the consent screen.
-14. Go to [Credentials](https://console.cloud.google.com/apis/credentials) in Google Cloud console.
-15. Click on the **Create Credentials** button and select the **OAuth client ID** option.
-16. Select the application type as **Web application** and fill the **Name** field.
-17. Copy **OAuth Redirect URL** from Automatisch to **Authorized redirect URIs** field, and click on the **Create** button.
-18. Copy the **Your Client ID** value from the following popup to the `Client ID` field on Automatisch.
-19. Copy the **Your Client Secret** value from the following popup to the `Client Secret` field on Automatisch.
-20. Click **Submit** button on Automatisch.
-21. Congrats! Start using your new Gmail connection within the flows.

packages/docs/pages/apps/gmail/triggers.md

@@ -1,12 +0,0 @@
----
-favicon: /favicons/gmail.svg
-items:
-  - name: New emails
-    desc: Triggers when a new email is received in the specified mailbox.
----
-
-<script setup>
-  import CustomListing from '../../components/CustomListing.vue'
-</script>
-
-<CustomListing />

packages/docs/pages/guide/available-apps.md

@@ -14,7 +14,6 @@ The following integrations are currently supported by Automatisch.
 - [Ghost](/apps/ghost/triggers)
 - [GitHub](/apps/github/triggers)
 - [GitLab](/apps/gitlab/triggers)
-- [Gmail](/apps/gmail/triggers)
 - [Google Calendar](/apps/google-calendar/triggers)
 - [Google Drive](/apps/google-drive/triggers)
 - [Google Forms](/apps/google-forms/triggers)

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

@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 49.4 512 399.42">
-  <g fill="none" fill-rule="evenodd">
-    <g fill-rule="nonzero">
-      <path fill="#4285f4" d="M34.91 448.818h81.454V251L0 163.727V413.91c0 19.287 15.622 34.91 34.91 34.91z"/>
-      <path fill="#34a853" d="M395.636 448.818h81.455c19.287 0 34.909-15.622 34.909-34.909V163.727L395.636 251z"/>
-      <path fill="#fbbc04" d="M395.636 99.727V251L512 163.727v-46.545c0-43.142-49.25-67.782-83.782-41.891z"/>
-    </g>
-    <path fill="#ea4335" d="M116.364 251V99.727L256 204.455 395.636 99.727V251L256 355.727z"/>
-    <path fill="#c5221f" fill-rule="nonzero" d="M0 117.182v46.545L116.364 251V99.727L83.782 75.291C49.25 49.4 0 74.04 0 117.18z"/>
-  </g>
-</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.removeToken();
+    authentication.updateToken('');
     await apolloClient.clearStore();
     onClose();
     navigate(URLS.LOGIN);

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

@@ -17,7 +17,6 @@ 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;
@@ -37,7 +36,6 @@ function AddAppConnection(props) {
     appAuthClientId,
     useShared: !!appAuthClientId,
   });
-  const queryClient = useQueryClient();
 
   React.useEffect(function relayProviderData() {
     if (window.opener) {
@@ -80,10 +78,6 @@ 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,18 +10,16 @@ import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useAdminAppAuthClients from 'hooks/useAdminAppAuthClients';
+import useAppAuthClients from 'hooks/useAppAuthClients.ee';
 import NoResultFound from 'components/NoResultFound';
 
 function AdminApplicationAuthClients(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { data: appAuthClients, isLoading } = useAdminAppAuthClients(appKey);
+  const { appAuthClients, loading } = useAppAuthClients({ 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)}
@@ -29,8 +27,7 @@ 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;
     }
@@ -39,7 +36,6 @@ function AdminApplicationAuthClients(props) {
     }
     return 0;
   });
-
   return (
     <div>
       {sortedAuthClients.map((client) => (

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

@@ -6,33 +6,29 @@ 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';
+import useAppAuthClients from 'hooks/useAppAuthClients.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 
 function AppAuthClientsDialog(props) {
   const { appKey, onClientClick, onClose } = props;
-  const { data: appAuthClients } = useAppAuthClients(appKey);
+  const { appAuthClients } = useAppAuthClients({ appKey, active: true });
-
   const formatMessage = useFormatMessage();
-
   React.useEffect(
     function autoAuthenticateSingleClient() {
-      if (appAuthClients?.data.length === 1) {
+      if (appAuthClients?.length === 1) {
-        onClientClick(appAuthClients.data[0].id);
+        onClientClick(appAuthClients[0].id);
       }
     },
-    [appAuthClients?.data],
+    [appAuthClients],
   );
-
+  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.data.map((appAuthClient) => (
+        {appAuthClients.map((appAuthClient) => (
           <ListItem disableGutters key={appAuthClient.id}>
             <ListItemButton onClick={() => onClientClick(appAuthClient.id)}>
               <ListItemText primary={appAuthClient.name} />

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

@@ -7,7 +7,6 @@ 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 {
@@ -19,24 +18,15 @@ function ContextMenu(props) {
     disableReconnection,
   } = props;
   const formatMessage = useFormatMessage();
-  const queryClient = useQueryClient();
-
   const createActionHandler = React.useCallback(
     (action) => {
-      return async function clickHandler(event) {
+      return function clickHandler(event) {
         onMenuItemClick(event, action);
-
-        if (['test', 'reconnect', 'delete'].includes(action.type)) {
-          await queryClient.invalidateQueries({
-            queryKey: ['apps', appKey, 'connections'],
-          });
-        }
         onClose();
       };
     },
-    [onMenuItemClick, onClose, queryClient],
+    [onMenuItemClick, onClose],
   );
-
   return (
     <Menu
       open={true}

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

@@ -1,24 +1,21 @@
-import * as React from 'react';
+import { useLazyQuery, useMutation } from '@apollo/client';
-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 { DateTime } from 'luxon';
-
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import { DateTime } from 'luxon';
+import * as React from 'react';
 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) => (
   <>
@@ -26,39 +23,36 @@ const countTranslation = (value) => (
     <br />
   </>
 );
-
 function AppConnectionRow(props) {
-  const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
-  const { id, key, formattedData, verified, createdAt, reconnectable } =
-    props.connection;
   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 {
+    id,
+    key,
+    formattedData,
+    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') {
@@ -74,7 +68,6 @@ function AppConnectionRow(props) {
             });
           },
         });
-
         enqueueSnackbar(formatMessage('connection.deletedMessage'), {
           variant: 'success',
           SnackbarProps: {
@@ -88,11 +81,9 @@ 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">
@@ -112,7 +103,7 @@ function AppConnectionRow(props) {
 
             <Box>
               <Stack direction="row" alignItems="center" spacing={1}>
-                {verificationVisible && isTestConnectionPending && (
+                {verificationVisible && testCalled && testLoading && (
                   <>
                     <CircularProgress size={16} />
                     <Typography variant="caption">
@@ -121,7 +112,8 @@ function AppConnectionRow(props) {
                   </>
                 )}
                 {verificationVisible &&
-                  !isTestConnectionPending &&
+                  testCalled &&
+                  !testLoading &&
                   verified && (
                     <>
                       <CheckCircleIcon fontSize="small" color="success" />
@@ -131,7 +123,8 @@ function AppConnectionRow(props) {
                     </>
                   )}
                 {verificationVisible &&
-                  !isTestConnectionPending &&
+                  testCalled &&
+                  !testLoading &&
                   !verified && (
                     <>
                       <ErrorIcon fontSize="small" color="error" />
@@ -150,13 +143,7 @@ function AppConnectionRow(props) {
                 sx={{ display: ['none', 'inline-block'] }}
               >
                 {formatMessage('connection.flowCount', {
-                  count: countTranslation(
+                  count: countTranslation(flowCount),
-                    isConnectionFlowsLoading ? (
-                      <Skeleton variant="text" width={15} />
-                    ) : (
-                      flowCount
-                    ),
-                  ),
                 })}
               </Typography>
             </Box>

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

@@ -1,19 +1,20 @@
 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 } = useAppConnections(appKey);
+  const { data } = useQuery(GET_APP_CONNECTIONS, {
-  const appConnections = data?.data || [];
+    variables: { key: appKey },
+  });
+  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} appKey={appKey} />
+        <AppFlowRow key={appFlow.id} flow={appFlow} />
       ))}
 
       {pageInfo && pageInfo.totalPages > 1 && (

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

@@ -2,7 +2,6 @@ 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() {
@@ -10,9 +9,7 @@ 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,4 +1,5 @@
 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';
@@ -11,6 +12,8 @@ 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 {
@@ -18,10 +21,6 @@ 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';
@@ -45,42 +44,40 @@ function ChooseConnectionSubstep(props) {
     onChange,
     application,
   } = props;
-  const { appKey } = step;
+  const { connection, 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 {
+  const { data, loading, refetch } = useQuery(GET_APP_CONNECTIONS, {
-    data,
+    variables: { key: appKey },
-    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 { mutate: testConnection, isPending: isTestConnectionPending } =
+  const [
-    useTestConnection({
+    testConnection,
-      connectionId: stepConnection?.id,
+    { loading: testResultLoading, refetch: retestConnection },
-    });
+  ] = useLazyQuery(TEST_CONNECTION, {
+    variables: {
+      id: connection?.id,
+    },
+  });
 
   React.useEffect(() => {
-    if (stepConnection?.id) {
+    if (connection?.id) {
       testConnection({
         variables: {
-          id: stepConnection.id,
+          id: connection.id,
         },
       });
     }
@@ -88,10 +85,11 @@ function ChooseConnectionSubstep(props) {
   }, []);
 
   const connectionOptions = React.useMemo(() => {
-    const appWithConnections = data?.data;
+    const appWithConnections = data?.getApp;
     const options =
-      appWithConnections?.map((connection) => optionGenerator(connection)) ||
+      appWithConnections?.connections?.map((connection) =>
-      [];
+        optionGenerator(connection),
+      ) || [];
 
     if (!appConfig?.data || appConfig?.data?.canCustomConnect) {
       options.push({
@@ -156,9 +154,8 @@ function ChooseConnectionSubstep(props) {
     },
     [onChange, refetch, step],
   );
-
   const handleChange = React.useCallback(
-    async (event, selectedOption) => {
+    (event, selectedOption) => {
       if (typeof selectedOption === 'object') {
         // TODO: try to simplify type casting below.
         const typedSelectedOption = selectedOption;
@@ -175,7 +172,7 @@ function ChooseConnectionSubstep(props) {
           return;
         }
 
-        if (connectionId !== stepConnection?.id) {
+        if (connectionId !== step.connection?.id) {
           onChange({
             step: {
               ...step,
@@ -184,23 +181,19 @@ function ChooseConnectionSubstep(props) {
               },
             },
           });
-
-          await queryClient.invalidateQueries({
-            queryKey: ['steps', step.id, 'connection'],
-          });
         }
       }
     },
-    [step, onChange, queryClient],
+    [step, onChange],
   );
 
   React.useEffect(() => {
-    if (stepConnection?.id) {
+    if (step.connection?.id) {
-      testConnection({
+      retestConnection({
-        id: stepConnection?.id,
+        id: step.connection.id,
       });
     }
-  }, [stepConnection?.id, testConnection]);
+  }, [step.connection?.id, retestConnection]);
 
   const onToggle = expanded ? onCollapse : onExpand;
 
@@ -210,7 +203,7 @@ function ChooseConnectionSubstep(props) {
         expanded={expanded}
         onClick={onToggle}
         title={name}
-        valid={isTestConnectionPending ? null : stepConnection?.verified}
+        valid={testResultLoading ? null : connection?.verified}
       />
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <ListItem
@@ -236,9 +229,9 @@ function ChooseConnectionSubstep(props) {
                 required
               />
             )}
-            value={getOption(connectionOptions, stepConnection?.id)}
+            value={getOption(connectionOptions, connection?.id)}
             onChange={handleChange}
-            loading={isAppConnectionsLoading}
+            loading={loading}
             data-test="choose-connection-autocomplete"
           />
 
@@ -248,8 +241,8 @@ function ChooseConnectionSubstep(props) {
             onClick={onSubmit}
             sx={{ mt: 2 }}
             disabled={
-              isTestConnectionPending ||
+              testResultLoading ||
-              !stepConnection?.verified ||
+              !connection?.verified ||
               editorContext.readOnly
             }
             data-test="flow-substep-continue-button"

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

@@ -61,38 +61,31 @@ 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) {
@@ -100,7 +93,6 @@ function ControlledCustomAutocomplete(props) {
       resetEditor(editor);
     }
   }, dependsOnValues);
-
   React.useEffect(
     function updateInitialValue() {
       const hasOptions = options.length;
@@ -118,19 +110,16 @@ 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') {
@@ -140,18 +129,15 @@ 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();
@@ -161,20 +147,17 @@ 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.removeToken();
+    authentication.updateToken('');
     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: ['admin', 'roles'] });
+      queryClient.invalidateQueries({ queryKey: ['roles'] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
         variant: 'success',

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

@@ -25,6 +25,7 @@ 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,24 +3,47 @@ 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 }] =
+  const [createStep, { loading: creationInProgress }] = useMutation(
-    useMutation(CREATE_STEP);
+    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(
-    async (step) => {
+    (step) => {
       const mutationInput = {
         id: step.id,
         key: step.key,
@@ -32,20 +55,13 @@ 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, queryClient],
+    [updateStep, flow.id],
   );
-
   const addStep = React.useCallback(
     async (previousStepId) => {
       const mutationInput = {
@@ -56,24 +72,20 @@ 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, queryClient],
+    [createStep, flow.id],
   );
-
   const openNextStep = React.useCallback((nextStep) => {
     return () => {
       setCurrentStepId(nextStep?.id);
     };
   }, []);
-
   return (
     <Box
       display="flex"
@@ -94,7 +106,6 @@ 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 } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -8,7 +8,6 @@ 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';
@@ -16,20 +15,17 @@ 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, isLoading: isFlowLoading } = useFlow(flowId);
+  const { data, loading } = useQuery(GET_FLOW, { variables: { id: flowId } });
-  const flow = data?.data;
+  const flow = data?.getFlow;
-  const queryClient = useQueryClient();
-
   const onFlowNameUpdate = React.useCallback(
     async (name) => {
       await updateFlow({
@@ -42,17 +38,14 @@ export default function EditorLayout() {
         optimisticResponse: {
           updateFlow: {
             __typename: 'Flow',
-            id: flowId,
+            id: flow?.id,
             name,
           },
         },
       });
-
-      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
-    [flowId, queryClient],
+    [flow?.id],
   );
-
   const onFlowStatusUpdate = React.useCallback(
     async (active) => {
       await updateFlowStatus({
@@ -65,17 +58,14 @@ export default function EditorLayout() {
         optimisticResponse: {
           updateFlowStatus: {
             __typename: 'Flow',
-            id: flowId,
+            id: flow?.id,
             active,
           },
         },
       });
-
-      await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
     },
-    [flowId, queryClient],
+    [flow?.id],
   );
-
   return (
     <>
       <TopBar
@@ -104,7 +94,7 @@ export default function EditorLayout() {
             </IconButton>
           </Tooltip>
 
-          {!isFlowLoading && (
+          {!loading && (
             <EditableTypography
               variant="body1"
               onConfirm={onFlowNameUpdate}
@@ -134,7 +124,7 @@ export default function EditorLayout() {
       <Stack direction="column" height="100%">
         <Container maxWidth="md">
           <EditorProvider value={{ readOnly: !!flow?.active }}>
-            {!flow && !isFlowLoading && 'not found'}
+            {!flow && !loading && 'not found'}
 
             {flow && <Editor flow={flow} />}
           </EditorProvider>

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

@@ -2,12 +2,9 @@ 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';
@@ -15,33 +12,25 @@ import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
 
 function ContextMenu(props) {
-  const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
+  const { flowId, onClose, anchorEl } = props;
-    props;
   const enqueueSnackbar = useEnqueueSnackbar();
-  const formatMessage = useFormatMessage();
-  const queryClient = useQueryClient();
-  const [duplicateFlow] = useMutation(DUPLICATE_FLOW);
   const [deleteFlow] = useMutation(DELETE_FLOW);
-
+  const [duplicateFlow] = useMutation(DUPLICATE_FLOW, {
+    refetchQueries: ['GetFlows'],
+  });
+  const formatMessage = useFormatMessage();
   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, queryClient, onDuplicateFlow]);
+  }, [flowId, onClose, duplicateFlow]);
-
   const onFlowDelete = React.useCallback(async () => {
     await deleteFlow({
       variables: { input: { id: flowId } },
@@ -55,18 +44,11 @@ function ContextMenu(props) {
         });
       },
     });
-
-    await queryClient.invalidateQueries({
-      queryKey: ['apps', appKey, 'flows'],
-    });
     enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
       variant: 'success',
     });
-
-    onDeleteFlow?.();
     onClose();
-  }, [flowId, onClose, deleteFlow, queryClient, onDeleteFlow]);
+  }, [flowId, onClose, deleteFlow]);
-
   return (
     <Menu
       open={true}
@@ -108,9 +90,6 @@ 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,5 +1,4 @@
 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';
@@ -7,7 +6,6 @@ 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';
@@ -37,7 +35,7 @@ function FlowRow(props) {
   const formatMessage = useFormatMessage();
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const { flow, onDuplicateFlow, onDeleteFlow, appKey } = props;
+  const { flow } = props;
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -114,9 +112,6 @@ function FlowRow(props) {
           flowId={flow.id}
           onClose={handleClose}
           anchorEl={anchorEl}
-          onDeleteFlow={onDeleteFlow}
-          onDuplicateFlow={onDuplicateFlow}
-          appKey={appKey}
         />
       )}
     </>
@@ -125,9 +120,6 @@ 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,5 +1,6 @@
 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';
@@ -23,7 +24,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 {
@@ -39,7 +40,6 @@ 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, flowId } = props;
+  const { collapsed, onChange, onContinue } = props;
   const editorContext = React.useContext(EditorContext);
   const contextButtonRef = React.useRef(null);
   const step = props.step;
@@ -126,16 +126,28 @@ function FlowStep(props) {
 
   const { data: apps } = useApps(useAppsOptions);
 
-  const { data: stepWithTestExecutions, refetch } = useStepWithTestExecutions(
+  const [
-    step.id,
+    getStepWithTestExecutions,
-  );
+    { data: stepWithTestExecutionsData, called: stepWithTestExecutionsCalled },
-  const stepWithTestExecutionsData = stepWithTestExecutions?.data;
+  ] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
+    fetchPolicy: 'network-only',
+  });
 
   React.useEffect(() => {
-    if (!collapsed && !isTrigger) {
+    if (!stepWithTestExecutionsCalled && !collapsed && !isTrigger) {
-      refetch(step.id);
+      getStepWithTestExecutions({
+        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);
 
@@ -262,7 +274,9 @@ function FlowStep(props) {
       <Collapse in={!collapsed} unmountOnExit>
         <Content>
           <List>
-            <StepExecutionsProvider value={stepWithTestExecutionsData}>
+            <StepExecutionsProvider
+              value={stepWithTestExecutionsData?.getStepWithTestExecutions}
+            >
               <Form
                 defaultValues={step}
                 onSubmit={handleSubmit}
@@ -314,7 +328,6 @@ function FlowStep(props) {
                               : false
                           }
                           step={step}
-                          flowId={flowId}
                         />
                       )}
 
@@ -350,7 +363,6 @@ function FlowStep(props) {
           deletable={!isTrigger}
           onClose={onContextMenuClose}
           anchorEl={anchorEl}
-          flowId={flowId}
         />
       )}
     </Wrapper>

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

@@ -1,29 +1,24 @@
 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, flowId } = props;
+  const { stepId, onClose, anchorEl, deletable } = 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, queryClient],
+    [stepId],
   );
-
   return (
     <Menu
       open={true}

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

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