feat: introduce paths

fix: persist value in ControlledCustomAutocomplete when it depends on other fields

packages/backend/bin/database/utils.js

@@ -2,6 +2,7 @@ import appConfig from '../../src/config/app.js';
 import logger from '../../src/helpers/logger.js';
 import client from './client.js';
 import User from '../../src/models/user.js';
+import Config from '../../src/models/config.js';
 import Role from '../../src/models/role.js';
 import '../../src/config/orm.js';
 import process from 'process';
@@ -45,6 +46,8 @@ export async function createUser(
     if (userCount === 0) {
       const user = await User.query().insertAndFetch(userParams);
       logger.info(`User has been saved: ${user.email}`);
+
+      await Config.markInstallationCompleted();
     } else {
       logger.info('No need to seed a user.');
     }

packages/backend/src/apps/airtable/actions/create-record/index.js

@@ -0,0 +1,92 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Create record',
+  key: 'createRecord',
+  description: 'Creates a new record with fields that automatically populate.',
+  arguments: [
+    {
+      label: 'Base',
+      key: 'baseId',
+      type: 'dropdown',
+      required: true,
+      description: 'Base in which to create the record.',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listBases',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Table',
+      key: 'tableId',
+      type: 'dropdown',
+      required: true,
+      dependsOn: ['parameters.baseId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTables',
+          },
+          {
+            name: 'parameters.baseId',
+            value: '{parameters.baseId}',
+          },
+        ],
+      },
+      additionalFields: {
+        type: 'query',
+        name: 'getDynamicFields',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listFields',
+          },
+          {
+            name: 'parameters.baseId',
+            value: '{parameters.baseId}',
+          },
+          {
+            name: 'parameters.tableId',
+            value: '{parameters.tableId}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const { baseId, tableId, ...rest } = $.step.parameters;
+
+    const fields = Object.entries(rest).reduce((result, [key, value]) => {
+      if (Array.isArray(value)) {
+        result[key] = value.map((item) => item.value);
+      } else if (value !== '') {
+        result[key] = value;
+      }
+      return result;
+    }, {});
+
+    const body = {
+      typecast: true,
+      fields,
+    };
+
+    const { data } = await $.http.post(`/v0/${baseId}/${tableId}`, body);
+
+    $.setActionItem({
+      raw: data,
+    });
+  },
+});

packages/backend/src/apps/airtable/actions/find-record/index.js

@@ -0,0 +1,174 @@
+import defineAction from '../../../../helpers/define-action.js';
+import { URLSearchParams } from 'url';
+
+export default defineAction({
+  name: 'Find record',
+  key: 'findRecord',
+  description:
+    "Finds a record using simple field search or use Airtable's formula syntax to find a matching record.",
+  arguments: [
+    {
+      label: 'Base',
+      key: 'baseId',
+      type: 'dropdown',
+      required: true,
+      description: 'Base in which to create the record.',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listBases',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Table',
+      key: 'tableId',
+      type: 'dropdown',
+      required: true,
+      dependsOn: ['parameters.baseId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTables',
+          },
+          {
+            name: 'parameters.baseId',
+            value: '{parameters.baseId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Search by field',
+      key: 'tableField',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.baseId', 'parameters.tableId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTableFields',
+          },
+          {
+            name: 'parameters.baseId',
+            value: '{parameters.baseId}',
+          },
+          {
+            name: 'parameters.tableId',
+            value: '{parameters.tableId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Search Value',
+      key: 'searchValue',
+      type: 'string',
+      required: false,
+      variables: true,
+      description:
+        'The value of unique identifier for the record. For date values, please use the ISO format (e.g., "YYYY-MM-DD").',
+    },
+    {
+      label: 'Search for exact match?',
+      key: 'exactMatch',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      options: [
+        { label: 'Yes', value: 'true' },
+        { label: 'No', value: 'false' },
+      ],
+    },
+    {
+      label: 'Search Formula',
+      key: 'searchFormula',
+      type: 'string',
+      required: false,
+      variables: true,
+      description:
+        'Instead, you have the option to use an Airtable search formula for locating records according to sophisticated criteria and across various fields.',
+    },
+    {
+      label: 'Limit to View',
+      key: 'limitToView',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.baseId', 'parameters.tableId'],
+      description:
+        'You have the choice to restrict the search to a particular view ID if desired.',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTableViews',
+          },
+          {
+            name: 'parameters.baseId',
+            value: '{parameters.baseId}',
+          },
+          {
+            name: 'parameters.tableId',
+            value: '{parameters.tableId}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const {
+      baseId,
+      tableId,
+      tableField,
+      searchValue,
+      exactMatch,
+      searchFormula,
+      limitToView,
+    } = $.step.parameters;
+
+    let filterByFormula;
+
+    if (tableField && searchValue) {
+      filterByFormula =
+        exactMatch === 'true'
+          ? `{${tableField}} = '${searchValue}'`
+          : `LOWER({${tableField}}) = LOWER('${searchValue}')`;
+    } else {
+      filterByFormula = searchFormula;
+    }
+
+    const body = new URLSearchParams({
+      filterByFormula,
+      view: limitToView,
+    });
+
+    const { data } = await $.http.post(
+      `/v0/${baseId}/${tableId}/listRecords`,
+      body
+    );
+
+    $.setActionItem({
+      raw: data,
+    });
+  },
+});

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

@@ -0,0 +1,4 @@
+import createRecord from './create-record/index.js';
+import findRecord from './find-record/index.js';
+
+export default [createRecord, findRecord];

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="215px" viewBox="0 0 256 215" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M114.25873,2.70101695 L18.8604023,42.1756384 C13.5552723,44.3711638 13.6102328,51.9065311 18.9486282,54.0225085 L114.746142,92.0117514 C123.163769,95.3498757 132.537419,95.3498757 140.9536,92.0117514 L236.75256,54.0225085 C242.08951,51.9065311 242.145916,44.3711638 236.83934,42.1756384 L141.442459,2.70101695 C132.738459,-0.900338983 122.961284,-0.900338983 114.25873,2.70101695" fill="#FFBF00"></path>
+		<path d="M136.349071,112.756863 L136.349071,207.659101 C136.349071,212.173089 140.900664,215.263892 145.096461,213.600615 L251.844122,172.166219 C254.281184,171.200072 255.879376,168.845451 255.879376,166.224705 L255.879376,71.3224678 C255.879376,66.8084791 251.327783,63.7176768 247.131986,65.3809537 L140.384325,106.815349 C137.94871,107.781496 136.349071,110.136118 136.349071,112.756863" fill="#26B5F8"></path>
+		<path d="M111.422771,117.65355 L79.742409,132.949912 L76.5257763,134.504714 L9.65047684,166.548104 C5.4112904,168.593211 0.000578531073,165.503855 0.000578531073,160.794612 L0.000578531073,71.7210757 C0.000578531073,70.0173017 0.874160452,68.5463864 2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355" fill="#ED3049"></path>
+		<path d="M111.422771,117.65355 L79.742409,132.949912 L2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355" fill-opacity="0.25" fill="#000000"></path>
+	</g>
+</svg>

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

@@ -0,0 +1,38 @@
+import crypto from 'crypto';
+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 state = crypto.randomBytes(100).toString('base64url');
+  const codeVerifier = crypto.randomBytes(96).toString('base64url');
+  const codeChallenge = crypto
+    .createHash('sha256')
+    .update(codeVerifier)
+    .digest('base64')
+    .replace(/=/g, '')
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_');
+
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId,
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    scope: authScope.join(' '),
+    state,
+    code_challenge: codeChallenge,
+    code_challenge_method: 'S256',
+  });
+
+  const url = `https://airtable.com/oauth2/v1/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+    originalCodeChallenge: codeChallenge,
+    originalState: state,
+    codeVerifier,
+  });
+}

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

@@ -0,0 +1,48 @@
+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/airtable/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in Airtable, 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/airtable/auth/is-still-verified.js

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

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

@@ -0,0 +1,40 @@
+import { URLSearchParams } from 'node:url';
+
+import authScope from '../common/auth-scope.js';
+
+const refreshToken = async ($) => {
+  const params = new URLSearchParams({
+    client_id: $.auth.data.clientId,
+    grant_type: 'refresh_token',
+    refresh_token: $.auth.data.refreshToken,
+  });
+
+  const basicAuthToken = Buffer.from(
+    $.auth.data.clientId + ':' + $.auth.data.clientSecret
+  ).toString('base64');
+
+  const { data } = await $.http.post(
+    'https://airtable.com/oauth2/v1/token',
+    params.toString(),
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Authorization: `Basic ${basicAuthToken}`,
+      },
+      additionalProperties: {
+        skipAddingAuthHeader: true,
+      },
+    }
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    refreshToken: data.refresh_token,
+    expiresIn: data.expires_in,
+    refreshExpiresIn: data.refresh_expires_in,
+    scope: authScope.join(' '),
+    tokenType: data.token_type,
+  });
+};
+
+export default refreshToken;

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

@@ -0,0 +1,56 @@
+import getCurrentUser from '../common/get-current-user.js';
+
+const verifyCredentials = async ($) => {
+  if ($.auth.data.originalState !== $.auth.data.state) {
+    throw new Error("The 'state' parameter does not match.");
+  }
+  if ($.auth.data.originalCodeChallenge !== $.auth.data.code_challenge) {
+    throw new Error("The 'code challenge' parameter does not match.");
+  }
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+  const basicAuthToken = Buffer.from(
+    $.auth.data.clientId + ':' + $.auth.data.clientSecret
+  ).toString('base64');
+
+  const { data } = await $.http.post(
+    'https://airtable.com/oauth2/v1/token',
+    {
+      code: $.auth.data.code,
+      client_id: $.auth.data.clientId,
+      redirect_uri: redirectUri,
+      grant_type: 'authorization_code',
+      code_verifier: $.auth.data.codeVerifier,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        Authorization: `Basic ${basicAuthToken}`,
+      },
+      additionalProperties: {
+        skipAddingAuthHeader: true,
+      },
+    }
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    tokenType: data.token_type,
+  });
+
+  const currentUser = await getCurrentUser($);
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    scope: $.auth.data.scope,
+    expiresIn: data.expires_in,
+    refreshExpiresIn: data.refresh_expires_in,
+    refreshToken: data.refresh_token,
+    screenName: currentUser.email,
+  });
+};
+
+export default verifyCredentials;

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

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

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

@@ -0,0 +1,12 @@
+const authScope = [
+  'data.records:read',
+  'data.records:write',
+  'data.recordComments:read',
+  'data.recordComments:write',
+  'schema.bases:read',
+  'schema.bases:write',
+  'user.email:read',
+  'webhook:manage',
+];
+
+export default authScope;

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

@@ -0,0 +1,6 @@
+const getCurrentUser = async ($) => {
+  const { data: currentUser } = await $.http.get('/v0/meta/whoami');
+  return currentUser;
+};
+
+export default getCurrentUser;

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

@@ -0,0 +1,6 @@
+import listBases from './list-bases/index.js';
+import listTableFields from './list-table-fields/index.js';
+import listTableViews from './list-table-views/index.js';
+import listTables from './list-tables/index.js';
+
+export default [listBases, listTableFields, listTableViews, listTables];

packages/backend/src/apps/airtable/dynamic-data/list-bases/index.js

@@ -0,0 +1,28 @@
+export default {
+  name: 'List bases',
+  key: 'listBases',
+
+  async run($) {
+    const bases = {
+      data: [],
+    };
+
+    const params = {};
+
+    do {
+      const { data } = await $.http.get('/v0/meta/bases', { params });
+      params.offset = data.offset;
+
+      if (data?.bases) {
+        for (const base of data.bases) {
+          bases.data.push({
+            value: base.id,
+            name: base.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return bases;
+  },
+};

packages/backend/src/apps/airtable/dynamic-data/list-table-fields/index.js

@@ -0,0 +1,39 @@
+export default {
+  name: 'List table fields',
+  key: 'listTableFields',
+
+  async run($) {
+    const tableFields = {
+      data: [],
+    };
+    const { baseId, tableId } = $.step.parameters;
+
+    if (!baseId) {
+      return tableFields;
+    }
+
+    const params = {};
+
+    do {
+      const { data } = await $.http.get(`/v0/meta/bases/${baseId}/tables`, {
+        params,
+      });
+      params.offset = data.offset;
+
+      if (data?.tables) {
+        for (const table of data.tables) {
+          if (table.id === tableId) {
+            table.fields.forEach((field) => {
+              tableFields.data.push({
+                value: field.name,
+                name: field.name,
+              });
+            });
+          }
+        }
+      }
+    } while (params.offset);
+
+    return tableFields;
+  },
+};

packages/backend/src/apps/airtable/dynamic-data/list-table-views/index.js

@@ -0,0 +1,39 @@
+export default {
+  name: 'List table views',
+  key: 'listTableViews',
+
+  async run($) {
+    const tableViews = {
+      data: [],
+    };
+    const { baseId, tableId } = $.step.parameters;
+
+    if (!baseId) {
+      return tableViews;
+    }
+
+    const params = {};
+
+    do {
+      const { data } = await $.http.get(`/v0/meta/bases/${baseId}/tables`, {
+        params,
+      });
+      params.offset = data.offset;
+
+      if (data?.tables) {
+        for (const table of data.tables) {
+          if (table.id === tableId) {
+            table.views.forEach((view) => {
+              tableViews.data.push({
+                value: view.id,
+                name: view.name,
+              });
+            });
+          }
+        }
+      }
+    } while (params.offset);
+
+    return tableViews;
+  },
+};

packages/backend/src/apps/airtable/dynamic-data/list-tables/index.js

@@ -0,0 +1,35 @@
+export default {
+  name: 'List tables',
+  key: 'listTables',
+
+  async run($) {
+    const tables = {
+      data: [],
+    };
+    const baseId = $.step.parameters.baseId;
+
+    if (!baseId) {
+      return tables;
+    }
+
+    const params = {};
+
+    do {
+      const { data } = await $.http.get(`/v0/meta/bases/${baseId}/tables`, {
+        params,
+      });
+      params.offset = data.offset;
+
+      if (data?.tables) {
+        for (const table of data.tables) {
+          tables.data.push({
+            value: table.id,
+            name: table.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return tables;
+  },
+};

packages/backend/src/apps/airtable/dynamic-fields/index.js

@@ -0,0 +1,3 @@
+import listFields from './list-fields/index.js';
+
+export default [listFields];

packages/backend/src/apps/airtable/dynamic-fields/list-fields/index.js

@@ -0,0 +1,86 @@
+const hasValue = (value) => value !== null && value !== undefined;
+
+export default {
+  name: 'List fields',
+  key: 'listFields',
+
+  async run($) {
+    const options = [];
+    const { baseId, tableId } = $.step.parameters;
+
+    if (!hasValue(baseId) || !hasValue(tableId)) {
+      return;
+    }
+
+    const { data } = await $.http.get(`/v0/meta/bases/${baseId}/tables`);
+
+    const selectedTable = data.tables.find((table) => table.id === tableId);
+
+    if (!selectedTable) return;
+
+    selectedTable.fields.forEach((field) => {
+      if (field.type === 'singleSelect') {
+        options.push({
+          label: field.name,
+          key: field.name,
+          type: 'dropdown',
+          required: false,
+          variables: true,
+          options: field.options.choices.map((choice) => ({
+            label: choice.name,
+            value: choice.id,
+          })),
+        });
+      } else if (field.type === 'multipleSelects') {
+        options.push({
+          label: field.name,
+          key: field.name,
+          type: 'dynamic',
+          required: false,
+          variables: true,
+          fields: [
+            {
+              label: 'Value',
+              key: 'value',
+              type: 'dropdown',
+              required: false,
+              variables: true,
+              options: field.options.choices.map((choice) => ({
+                label: choice.name,
+                value: choice.id,
+              })),
+            },
+          ],
+        });
+      } else if (field.type === 'checkbox') {
+        options.push({
+          label: field.name,
+          key: field.name,
+          type: 'dropdown',
+          required: false,
+          variables: true,
+          options: [
+            {
+              label: 'Yes',
+              value: 'true',
+            },
+            {
+              label: 'No',
+              value: 'false',
+            },
+          ],
+        });
+      } else {
+        options.push({
+          label: field.name,
+          key: field.name,
+          type: 'string',
+          required: false,
+          variables: true,
+        });
+      }
+    });
+
+    return options;
+  },
+};

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

@@ -0,0 +1,22 @@
+import defineApp from '../../helpers/define-app.js';
+import addAuthHeader from './common/add-auth-header.js';
+import auth from './auth/index.js';
+import actions from './actions/index.js';
+import dynamicData from './dynamic-data/index.js';
+import dynamicFields from './dynamic-fields/index.js';
+
+export default defineApp({
+  name: 'Airtable',
+  key: 'airtable',
+  baseUrl: 'https://airtable.com',
+  apiBaseUrl: 'https://api.airtable.com',
+  iconUrl: '{BASE_URL}/apps/airtable/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/airtable/connection',
+  primaryColor: 'FFBF00',
+  supportsConnections: true,
+  beforeRequest: [addAuthHeader],
+  auth,
+  actions,
+  dynamicData,
+  dynamicFields,
+});

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="132" height="24" fill="none" viewBox="0 0 132 24"><path fill="#19191C" d="M38.557 19.495c2.16 0 3.25-1.113 3.725-1.87h.214c.094.805.664 1.562 1.779 1.562h2.111V16.82h-.545c-.38 0-.57-.213-.57-.545V6.776h-2.8v1.516h-.213c-.545-.758-1.684-1.824-3.772-1.824-3.321 0-5.789 2.748-5.789 6.514s2.515 6.513 5.86 6.513m.498-2.7c-1.969 0-3.51-1.445-3.51-3.79 0-2.297 1.494-3.86 3.487-3.86 1.898 0 3.487 1.397 3.487 3.86 0 2.108-1.352 3.79-3.463 3.79M48.04 24h2.799v-6.376h.213c.522.758 1.637 1.871 3.844 1.871 3.321 0 5.741-2.795 5.741-6.513 0-3.743-2.586-6.514-5.931-6.514-2.135 0-3.18 1.16-3.678 1.8h-.213V6.776h-2.776V24m6.263-7.134c-1.922 0-3.512-1.42-3.512-3.884 0-2.108 1.353-3.885 3.464-3.885 1.97 0 3.511 1.54 3.511 3.885 0 2.297-1.494 3.884-3.463 3.884M62.082 24h2.8v-6.376h.213c.522.758 1.637 1.871 3.843 1.871 3.321 0 5.51-2.795 5.51-6.513 0-3.743-2.355-6.514-5.7-6.514-2.135 0-3.179 1.16-3.677 1.8h-.214V6.776h-2.775zm6.263-7.134c-1.922 0-3.511-1.42-3.511-3.884 0-2.108 1.352-3.885 3.463-3.885 1.97 0 3.512 1.54 3.512 3.885 0 2.297-1.495 3.884-3.464 3.884m9.805 2.61h3.961l2.254-9.735h.143l2.253 9.735H90.7l3.153-12.412h-2.821l-2.254 9.759h-.214l-2.253-9.759h-3.725l-2.278 9.759h-.213l-2.23-9.759h-2.99l3.274 12.412m17.123 0h2.8V13.34c0-2.345 1.09-3.79 3.131-3.79h1.233V6.756h-.925c-1.59 0-2.8 1.09-3.274 2.132h-.19V7.064h-2.775zm21.057 0h2.183v-2.487h-2.159c-.854 0-1.21-.38-1.21-1.256V9.528h3.511V7.064h-3.511V3.582h-2.657v3.482h-2.325v2.464h2.159v6.229c0 2.63 1.589 3.719 4.009 3.719m9.693.019c2.586 0 4.864-1.279 5.67-3.86l-2.562-.616c-.451 1.373-1.755 2.084-3.131 2.084-2.041 0-3.393-1.326-3.417-3.41h9.419v-.782c0-3.695-2.301-6.443-6.097-6.443-3.346 0-6.216 2.63-6.216 6.537 0 3.79 2.538 6.49 6.334 6.49m-3.416-7.84c.166-1.492 1.518-2.747 3.298-2.747 1.708 0 3.108 1.066 3.25 2.747h-6.548"/><path fill="#19191C" fill-rule="evenodd" d="M108.916 19.476h-2.8V9.528h-2.182V7.064h4.982z" clip-rule="evenodd"/><path fill="#19191C" d="M107.309 5.342c1.02 0 1.779-.758 1.779-1.753 0-.971-.759-1.73-1.779-1.73-1.021 0-1.78.759-1.78 1.73 0 .995.759 1.753 1.78 1.753"/><path fill="#FD366E" d="M24.443 16.432v5.478H10.752c-3.989 0-7.472-2.203-9.335-5.478A11.041 11.041 0 0 1 0 11.695v-1.48a10.97 10.97 0 0 1 .381-2.247C1.661 3.368 5.82 0 10.751 0c4.934 0 9.092 3.37 10.371 7.967h-5.854c-.96-1.499-2.624-2.49-4.516-2.49s-3.555.991-4.516 2.49a5.47 5.47 0 0 0-.67 1.494 5.562 5.562 0 0 0-.202 1.494 5.5 5.5 0 0 0 1.69 3.983 5.32 5.32 0 0 0 3.698 1.494h13.69"/><path fill="#FD366E" d="M24.443 9.46v5.478h-9.994a5.5 5.5 0 0 0 1.691-3.983 5.56 5.56 0 0 0-.203-1.494h8.506"/></svg>

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

@@ -0,0 +1,65 @@
+import verifyCredentials from './verify-credentials.js';
+import isStillVerified from './is-still-verified.js';
+
+export default {
+  fields: [
+    {
+      key: 'screenName',
+      label: 'Screen Name',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description:
+        'Screen name of your connection to be used on Automatisch UI.',
+      clickToCopy: false,
+    },
+    {
+      key: 'projectId',
+      label: 'Project ID',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'Project ID of your Appwrite project.',
+      clickToCopy: false,
+    },
+    {
+      key: 'apiKey',
+      label: 'API Key',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'API key of your Appwrite project.',
+      clickToCopy: false,
+    },
+    {
+      key: 'instanceUrl',
+      label: 'Appwrite instance URL',
+      type: 'string',
+      required: false,
+      readOnly: false,
+      placeholder: '',
+      description: '',
+      clickToCopy: true,
+    },
+    {
+      key: 'host',
+      label: 'Host Name',
+      type: 'string',
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'Host name of your Appwrite project.',
+      clickToCopy: false,
+    },
+  ],
+
+  verifyCredentials,
+  isStillVerified,
+};

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

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

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

@@ -0,0 +1,5 @@
+const verifyCredentials = async ($) => {
+  await $.http.get('/v1/users');
+};
+
+export default verifyCredentials;

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

@@ -0,0 +1,16 @@
+const addAuthHeader = ($, requestConfig) => {
+  requestConfig.headers['Content-Type'] = 'application/json';
+
+  if ($.auth.data?.apiKey && $.auth.data?.projectId) {
+    requestConfig.headers['X-Appwrite-Project'] = $.auth.data.projectId;
+    requestConfig.headers['X-Appwrite-Key'] = $.auth.data.apiKey;
+  }
+
+  if ($.auth.data?.host) {
+    requestConfig.headers['Host'] = $.auth.data.host;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/appwrite/common/set-base-url.js

@@ -0,0 +1,13 @@
+const setBaseUrl = ($, requestConfig) => {
+  const instanceUrl = $.auth.data.instanceUrl;
+
+  if (instanceUrl) {
+    requestConfig.baseURL = instanceUrl;
+  } else if ($.app.apiBaseUrl) {
+    requestConfig.baseURL = $.app.apiBaseUrl;
+  }
+
+  return requestConfig;
+};
+
+export default setBaseUrl;

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

@@ -0,0 +1,4 @@
+import listCollections from './list-collections/index.js';
+import listDatabases from './list-databases/index.js';
+
+export default [listCollections, listDatabases];

packages/backend/src/apps/appwrite/dynamic-data/list-collections/index.js

@@ -0,0 +1,44 @@
+export default {
+  name: 'List collections',
+  key: 'listCollections',
+
+  async run($) {
+    const collections = {
+      data: [],
+    };
+    const databaseId = $.step.parameters.databaseId;
+
+    if (!databaseId) {
+      return collections;
+    }
+
+    const params = {
+      queries: [
+        JSON.stringify({
+          method: 'orderAsc',
+          attribute: 'name',
+        }),
+        JSON.stringify({
+          method: 'limit',
+          values: [100],
+        }),
+      ],
+    };
+
+    const { data } = await $.http.get(
+      `/v1/databases/${databaseId}/collections`,
+      { params }
+    );
+
+    if (data?.collections) {
+      for (const collection of data.collections) {
+        collections.data.push({
+          value: collection.$id,
+          name: collection.name,
+        });
+      }
+    }
+
+    return collections;
+  },
+};

packages/backend/src/apps/appwrite/dynamic-data/list-databases/index.js

@@ -0,0 +1,36 @@
+export default {
+  name: 'List databases',
+  key: 'listDatabases',
+
+  async run($) {
+    const databases = {
+      data: [],
+    };
+
+    const params = {
+      queries: [
+        JSON.stringify({
+          method: 'orderAsc',
+          attribute: 'name',
+        }),
+        JSON.stringify({
+          method: 'limit',
+          values: [100],
+        }),
+      ],
+    };
+
+    const { data } = await $.http.get('/v1/databases', { params });
+
+    if (data?.databases) {
+      for (const database of data.databases) {
+        databases.data.push({
+          value: database.$id,
+          name: database.name,
+        });
+      }
+    }
+
+    return databases;
+  },
+};

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

@@ -0,0 +1,21 @@
+import defineApp from '../../helpers/define-app.js';
+import addAuthHeader from './common/add-auth-header.js';
+import setBaseUrl from './common/set-base-url.js';
+import auth from './auth/index.js';
+import triggers from './triggers/index.js';
+import dynamicData from './dynamic-data/index.js';
+
+export default defineApp({
+  name: 'Appwrite',
+  key: 'appwrite',
+  baseUrl: 'https://appwrite.io',
+  apiBaseUrl: 'https://cloud.appwrite.io',
+  iconUrl: '{BASE_URL}/apps/appwrite/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/appwrite/connection',
+  primaryColor: 'FD366E',
+  supportsConnections: true,
+  beforeRequest: [setBaseUrl, addAuthHeader],
+  auth,
+  triggers,
+  dynamicData,
+});

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

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

packages/backend/src/apps/appwrite/triggers/new-documents/index.js

@@ -0,0 +1,104 @@
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New documents',
+  key: 'newDocuments',
+  pollInterval: 15,
+  description: 'Triggers when a new document is created.',
+  arguments: [
+    {
+      label: 'Database',
+      key: 'databaseId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listDatabases',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Collection',
+      key: 'collectionId',
+      type: 'dropdown',
+      required: true,
+      dependsOn: ['parameters.databaseId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listCollections',
+          },
+          {
+            name: 'parameters.databaseId',
+            value: '{parameters.databaseId}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const { databaseId, collectionId } = $.step.parameters;
+
+    const limit = 1;
+    let lastDocumentId = undefined;
+    let offset = 0;
+    let documentCount = 0;
+
+    do {
+      const params = {
+        queries: [
+          JSON.stringify({
+            method: 'orderDesc',
+            attribute: '$createdAt',
+          }),
+          JSON.stringify({
+            method: 'limit',
+            values: [limit],
+          }),
+          // An invalid cursor shouldn't be sent.
+          lastDocumentId &&
+            JSON.stringify({
+              method: 'cursorAfter',
+              values: [lastDocumentId],
+            }),
+        ].filter(Boolean),
+      };
+
+      const { data } = await $.http.get(
+        `/v1/databases/${databaseId}/collections/${collectionId}/documents`,
+        { params }
+      );
+
+      const documents = data?.documents;
+      documentCount = documents?.length;
+      offset = offset + limit;
+      lastDocumentId = documents[documentCount - 1]?.$id;
+
+      if (!documentCount) {
+        return;
+      }
+
+      for (const document of documents) {
+        $.pushTriggerItem({
+          raw: document,
+          meta: {
+            internalId: document.$id,
+          },
+        });
+      }
+    } while (documentCount === limit);
+  },
+});

packages/backend/src/apps/formatter/actions/date-time/transformers/format-date-time.js

@@ -5,11 +5,24 @@ const formatDateTime = ($) => {
 
   const fromFormat = $.step.parameters.fromFormat;
   const fromTimezone = $.step.parameters.fromTimezone;
+  let inputDateTime;
 
-  const inputDateTime = DateTime.fromFormat(input, fromFormat, {
-    zone: fromTimezone,
-    setZone: true,
-  });
+  if (fromFormat === 'X') {
+    inputDateTime = DateTime.fromSeconds(Number(input), fromFormat, {
+      zone: fromTimezone,
+      setZone: true,
+    });
+  } else if (fromFormat === 'x') {
+    inputDateTime = DateTime.fromMillis(Number(input), fromFormat, {
+      zone: fromTimezone,
+      setZone: true,
+    });
+  } else {
+    inputDateTime = DateTime.fromFormat(input, fromFormat, {
+      zone: fromTimezone,
+      setZone: true,
+    });
+  }
 
   const toFormat = $.step.parameters.toFormat;
   const toTimezone = $.step.parameters.toTimezone;

packages/backend/src/config/app.js

@@ -52,7 +52,7 @@ const appConfig = {
   isDev: appEnv === 'development',
   isTest: appEnv === 'test',
   isProd: appEnv === 'production',
-  version: '0.11.0',
+  version: '0.12.0',
   postgresDatabase: process.env.POSTGRES_DATABASE || 'automatisch_development',
   postgresSchema: process.env.POSTGRES_SCHEMA || 'public',
   postgresPort: parseInt(process.env.POSTGRES_PORT || '5432'),

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

@@ -1,11 +1,10 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import request from 'supertest';
 import app from '../../../../../app';
 import createAuthTokenByUserId from '../../../../../helpers/create-auth-token-by-user-id';
 import { createRole } from '../../../../../../test/factories/role';
 import { createUser } from '../../../../../../test/factories/user';
 import getUsersMock from '../../../../../../test/mocks/rest/api/v1/admin/users/get-users.js';
-import * as license from '../../../../../helpers/license.ee.js';
 
 describe('GET /api/v1/admin/users', () => {
   let currentUser, currentUserRole, anotherUser, anotherUserRole, token;
@@ -32,8 +31,6 @@ describe('GET /api/v1/admin/users', () => {
   });
 
   it('should return users data', async () => {
-    vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);
-
     const response = await request(app)
       .get('/api/v1/admin/users')
       .set('Authorization', token)

packages/backend/src/controllers/api/v1/automatisch/version.test.js

@@ -10,7 +10,7 @@ describe('GET /api/v1/automatisch/version', () => {
 
     const expectedPayload = {
       data: {
-        version: '0.11.0',
+        version: '0.12.0',
       },
       meta: {
         count: 1,

packages/backend/src/controllers/api/v1/installation/users/create-user.js

@@ -1,12 +1,9 @@
 import User from '../../../../../models/user.js';
-import Config from '../../../../../models/config.js';
 
 export default async (request, response) => {
   const { email, password, fullName } = request.body;
 
-  await User.createAdminUser({ email, password, fullName });
-
-  await Config.markInstallationCompleted();
+  await User.createAdmin({ email, password, fullName });
 
   response.status(204).end();
 };

packages/backend/src/controllers/api/v1/installation/users/create-user.test.js

@@ -4,6 +4,7 @@ import app from '../../../../../app.js';
 import Config from '../../../../../models/config.js';
 import User from '../../../../../models/user.js';
 import { createRole } from '../../../../../../test/factories/role';
+import { createUser } from '../../../../../../test/factories/user';
 import { createInstallationCompletedConfig } from '../../../../../../test/factories/config';
 
 describe('POST /api/v1/installation/users', () => {
@@ -17,7 +18,7 @@ describe('POST /api/v1/installation/users', () => {
   });
 
   describe('for incomplete installations', () => {
-    it('should respond with HTTP 204 with correct payload', async () => {
+    it('should respond with HTTP 204 with correct payload when no user', async () => {
       expect(await Config.isInstallationCompleted()).toBe(false);
 
       await request(app)
@@ -34,6 +35,27 @@ describe('POST /api/v1/installation/users', () => {
       expect(user.roleId).toBe(adminRole.id);
       expect(await Config.isInstallationCompleted()).toBe(true);
     });
+
+    it('should respond with HTTP 403 with correct payload when one user exists at least', async () => {
+      expect(await Config.isInstallationCompleted()).toBe(false);
+
+      await createUser();
+
+      const usersCountBefore = await User.query().resultSize();
+
+      await request(app)
+        .post('/api/v1/installation/users')
+        .send({
+          email: 'user@automatisch.io',
+          password: 'password',
+          fullName: 'Initial admin'
+        })
+        .expect(403);
+
+      const usersCountAfter = await User.query().resultSize();
+
+      expect(usersCountBefore).toEqual(usersCountAfter);
+    });
   });
 
   describe('for completed installations', () => {

packages/backend/src/db/migrations/20240509202750_make_value_column_text_in_datastore.js

@@ -0,0 +1,11 @@
+export async function up(knex) {
+  return knex.schema.alterTable('datastore', (table) => {
+    table.text('value').alter();
+  });
+}
+
+export async function down(knex) {
+  return knex.schema.alterTable('datastore', (table) => {
+    table.string('value').alter();
+  });
+}

packages/backend/src/helpers/allow-installation.js

@@ -0,0 +1,16 @@
+import Config from '../models/config.js';
+import User from '../models/user.js';
+
+export async function allowInstallation(request, response, next) {
+  if (await Config.isInstallationCompleted()) {
+    return response.status(403).end();
+  }
+
+  const hasAnyUsers = await User.query().resultSize() > 0;
+
+  if (hasAnyUsers) {
+    return response.status(403).end();
+  }
+
+  next();
+};

packages/backend/src/helpers/authorize-installation.js

@@ -1,9 +0,0 @@
-import Config from '../models/config.js';
-
-export async function authorizeInstallation(request, response, next) {
-  if (await Config.isInstallationCompleted()) {
-    return response.status(403).end();
-  } else {
-    next();
-  }
-};

packages/backend/src/models/user.js

@@ -10,6 +10,7 @@ import Base from './base.js';
 import App from './app.js';
 import AccessToken from './access-token.js';
 import Connection from './connection.js';
+import Config from './config.js';
 import Execution from './execution.js';
 import Flow from './flow.js';
 import Identity from './identity.ee.js';
@@ -373,7 +374,7 @@ class User extends Base {
     return apps;
   }
 
-  static async createAdminUser({ email, password, fullName }) {
+  static async createAdmin({ email, password, fullName }) {
     const adminRole = await Role.findAdmin();
 
     const adminUser = await this.query().insert({
@@ -383,6 +384,8 @@ class User extends Base {
       roleId: adminRole.id
     });
 
+    await Config.markInstallationCompleted();
+
     return adminUser;
   }
 

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

@@ -2,25 +2,17 @@ import { Router } from 'express';
 import asyncHandler from 'express-async-handler';
 import { authenticateUser } from '../../../../helpers/authentication.js';
 import { authorizeAdmin } from '../../../../helpers/authorization.js';
-import { checkIsEnterprise } from '../../../../helpers/check-is-enterprise.js';
 import getUsersAction from '../../../../controllers/api/v1/admin/users/get-users.ee.js';
 import getUserAction from '../../../../controllers/api/v1/admin/users/get-user.ee.js';
 
 const router = Router();
 
-router.get(
-  '/',
-  authenticateUser,
-  authorizeAdmin,
-  checkIsEnterprise,
-  asyncHandler(getUsersAction)
-);
+router.get('/', authenticateUser, authorizeAdmin, asyncHandler(getUsersAction));
 
 router.get(
   '/:userId',
   authenticateUser,
   authorizeAdmin,
-  checkIsEnterprise,
   asyncHandler(getUserAction)
 );
 

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

@@ -1,13 +1,13 @@
 import { Router } from 'express';
 import asyncHandler from 'express-async-handler';
-import { authorizeInstallation } from '../../../../helpers/authorize-installation.js';
+import { allowInstallation } from '../../../../helpers/allow-installation.js';
 import createUserAction from '../../../../controllers/api/v1/installation/users/create-user.js';
 
 const router = Router();
 
 router.post(
   '/',
-  authorizeInstallation,
+  allowInstallation,
   asyncHandler(createUserAction)
 );
 

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

@@ -26,12 +26,30 @@ export default defineConfig({
       },
       {
         text: 'Apps',
-        link: '/apps/carbone/connection',
+        link: '/apps/airtable/connection',
         activeMatch: '/apps/',
       },
     ],
     sidebar: {
       '/apps/': [
+        {
+          text: 'Airtable',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Actions', link: '/apps/airtable/actions' },
+            { text: 'Connection', link: '/apps/airtable/connection' },
+          ],
+        },
+        {
+          text: 'Appwrite',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Triggers', link: '/apps/appwrite/triggers' },
+            { text: 'Connection', link: '/apps/appwrite/connection' },
+          ],
+        },
         {
           text: 'Carbone',
           collapsible: true,

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

@@ -0,0 +1,14 @@
+---
+favicon: /favicons/airtable.svg
+items:
+  - name: Create record
+    desc: Creates a new record with fields that automatically populate.
+  - name: Find record
+    desc: Finds a record using simple field search or use Airtable's formula syntax to find a matching record.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

@@ -0,0 +1,19 @@
+# Airtable
+
+:::info
+This page explains the steps you need to follow to set up the Airtable
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Login to your [Airtable account](https://www.airtable.com/).
+2. Go to this [link](https://airtable.com/create/oauth) and click on the **Register new OAuth integration**.
+3. Fill the name field.
+4. Copy **OAuth Redirect URL** from Automatisch to **OAuth redirect URL** field.
+5. Click on the **Register integration** button.
+6. In **Developer Details** section, click on the **Generate client secret**.
+7. Check the checkboxes of **Scopes** section.
+8. Click on the **Save changes** button.
+9. Copy **Client ID** to **Client ID** field on Automatisch.
+10. Copy **Client secret** to **Client secret** field on Automatisch.
+11. Click **Submit** button on Automatisch.
+12. Congrats! Start using your new Airtable connection within the flows.

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

@@ -0,0 +1,20 @@
+# Appwrite
+
+:::info
+This page explains the steps you need to follow to set up the Appwrite
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Login to your Appwrite account: [https://appwrite.io/](https://appwrite.io/).
+2. Go to your project's **Settings**.
+3. In the Settings, click on the **View API Keys** button in **API credentials** section.
+4. Click on the **Create API Key** button.
+5. Fill the name field and select **Never** for the expiration date.
+6. Click on the **Next** button.
+7. Click on the **Select all** and then click on the **Create** button.
+8. Now, copy your **API key secret** and paste the key into the **API Key** field in Automatisch.
+9. Write any screen name to be displayed in Automatisch.
+10. You can find your project ID next to your project name. Paste the id into **Project ID** field in Automatsich.
+11. If you are using self-hosted Appwrite project, you can paste the instace url into **Appwrite instance URL** field in Automatisch.
+12. Fill the host name field with the hostname of your instance URL. It's either `cloud.appwrite.io` or hostname of your instance URL.
+13. Start using Appwrite integration with Automatisch!

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

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/appwrite.svg
+items:
+  - name: New documets
+    desc: Triggers when a new document is created.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

@@ -2,6 +2,8 @@
 
 The following integrations are currently supported by Automatisch.
 
+- [Airtable](/apps/airtable/actions)
+- [Appwrite](/apps/appwrite/triggers)
 - [Carbone](/apps/carbone/actions)
 - [Datastore](/apps/datastore/actions)
 - [DeepL](/apps/deepl/actions)

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="215px" viewBox="0 0 256 215" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M114.25873,2.70101695 L18.8604023,42.1756384 C13.5552723,44.3711638 13.6102328,51.9065311 18.9486282,54.0225085 L114.746142,92.0117514 C123.163769,95.3498757 132.537419,95.3498757 140.9536,92.0117514 L236.75256,54.0225085 C242.08951,51.9065311 242.145916,44.3711638 236.83934,42.1756384 L141.442459,2.70101695 C132.738459,-0.900338983 122.961284,-0.900338983 114.25873,2.70101695" fill="#FFBF00"></path>
+		<path d="M136.349071,112.756863 L136.349071,207.659101 C136.349071,212.173089 140.900664,215.263892 145.096461,213.600615 L251.844122,172.166219 C254.281184,171.200072 255.879376,168.845451 255.879376,166.224705 L255.879376,71.3224678 C255.879376,66.8084791 251.327783,63.7176768 247.131986,65.3809537 L140.384325,106.815349 C137.94871,107.781496 136.349071,110.136118 136.349071,112.756863" fill="#26B5F8"></path>
+		<path d="M111.422771,117.65355 L79.742409,132.949912 L76.5257763,134.504714 L9.65047684,166.548104 C5.4112904,168.593211 0.000578531073,165.503855 0.000578531073,160.794612 L0.000578531073,71.7210757 C0.000578531073,70.0173017 0.874160452,68.5463864 2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355" fill="#ED3049"></path>
+		<path d="M111.422771,117.65355 L79.742409,132.949912 L2.04568588,67.4384994 C2.53454463,66.9481944 3.08848814,66.5446689 3.66412655,66.2250305 C5.26231864,65.2661153 7.54173107,65.0101153 9.47981017,65.7766689 L110.890522,105.957098 C116.045234,108.002206 116.450206,115.225166 111.422771,117.65355" fill-opacity="0.25" fill="#000000"></path>
+	</g>
+</svg>

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="132" height="24" fill="none" viewBox="0 0 132 24"><path fill="#19191C" d="M38.557 19.495c2.16 0 3.25-1.113 3.725-1.87h.214c.094.805.664 1.562 1.779 1.562h2.111V16.82h-.545c-.38 0-.57-.213-.57-.545V6.776h-2.8v1.516h-.213c-.545-.758-1.684-1.824-3.772-1.824-3.321 0-5.789 2.748-5.789 6.514s2.515 6.513 5.86 6.513m.498-2.7c-1.969 0-3.51-1.445-3.51-3.79 0-2.297 1.494-3.86 3.487-3.86 1.898 0 3.487 1.397 3.487 3.86 0 2.108-1.352 3.79-3.463 3.79M48.04 24h2.799v-6.376h.213c.522.758 1.637 1.871 3.844 1.871 3.321 0 5.741-2.795 5.741-6.513 0-3.743-2.586-6.514-5.931-6.514-2.135 0-3.18 1.16-3.678 1.8h-.213V6.776h-2.776V24m6.263-7.134c-1.922 0-3.512-1.42-3.512-3.884 0-2.108 1.353-3.885 3.464-3.885 1.97 0 3.511 1.54 3.511 3.885 0 2.297-1.494 3.884-3.463 3.884M62.082 24h2.8v-6.376h.213c.522.758 1.637 1.871 3.843 1.871 3.321 0 5.51-2.795 5.51-6.513 0-3.743-2.355-6.514-5.7-6.514-2.135 0-3.179 1.16-3.677 1.8h-.214V6.776h-2.775zm6.263-7.134c-1.922 0-3.511-1.42-3.511-3.884 0-2.108 1.352-3.885 3.463-3.885 1.97 0 3.512 1.54 3.512 3.885 0 2.297-1.495 3.884-3.464 3.884m9.805 2.61h3.961l2.254-9.735h.143l2.253 9.735H90.7l3.153-12.412h-2.821l-2.254 9.759h-.214l-2.253-9.759h-3.725l-2.278 9.759h-.213l-2.23-9.759h-2.99l3.274 12.412m17.123 0h2.8V13.34c0-2.345 1.09-3.79 3.131-3.79h1.233V6.756h-.925c-1.59 0-2.8 1.09-3.274 2.132h-.19V7.064h-2.775zm21.057 0h2.183v-2.487h-2.159c-.854 0-1.21-.38-1.21-1.256V9.528h3.511V7.064h-3.511V3.582h-2.657v3.482h-2.325v2.464h2.159v6.229c0 2.63 1.589 3.719 4.009 3.719m9.693.019c2.586 0 4.864-1.279 5.67-3.86l-2.562-.616c-.451 1.373-1.755 2.084-3.131 2.084-2.041 0-3.393-1.326-3.417-3.41h9.419v-.782c0-3.695-2.301-6.443-6.097-6.443-3.346 0-6.216 2.63-6.216 6.537 0 3.79 2.538 6.49 6.334 6.49m-3.416-7.84c.166-1.492 1.518-2.747 3.298-2.747 1.708 0 3.108 1.066 3.25 2.747h-6.548"/><path fill="#19191C" fill-rule="evenodd" d="M108.916 19.476h-2.8V9.528h-2.182V7.064h4.982z" clip-rule="evenodd"/><path fill="#19191C" d="M107.309 5.342c1.02 0 1.779-.758 1.779-1.753 0-.971-.759-1.73-1.779-1.73-1.021 0-1.78.759-1.78 1.73 0 .995.759 1.753 1.78 1.753"/><path fill="#FD366E" d="M24.443 16.432v5.478H10.752c-3.989 0-7.472-2.203-9.335-5.478A11.041 11.041 0 0 1 0 11.695v-1.48a10.97 10.97 0 0 1 .381-2.247C1.661 3.368 5.82 0 10.751 0c4.934 0 9.092 3.37 10.371 7.967h-5.854c-.96-1.499-2.624-2.49-4.516-2.49s-3.555.991-4.516 2.49a5.47 5.47 0 0 0-.67 1.494 5.562 5.562 0 0 0-.202 1.494 5.5 5.5 0 0 0 1.69 3.983 5.32 5.32 0 0 0 3.698 1.494h13.69"/><path fill="#FD366E" d="M24.443 9.46v5.478h-9.994a5.5 5.5 0 0 0 1.691-3.983 5.56 5.56 0 0 0-.203-1.494h8.506"/></svg>

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

@@ -61,7 +61,7 @@ test.describe('Apps page', () => {
 
       await applicationsPage.page.getByTestId('app-list-item').first().click();
       await expect(applicationsPage.page).toHaveURL(
-        '/app/azure-openai/connections/add?shared=false'
+        '/app/airtable/connections/add?shared=false'
       );
       await expect(
         applicationsPage.page.getByTestId('add-app-connection-dialog')
@@ -75,14 +75,14 @@ test.describe('Apps page', () => {
     }) => {
       await applicationsPage.page.getByTestId('app-list-item').first().click();
       await expect(applicationsPage.page).toHaveURL(
-        '/app/azure-openai/connections/add?shared=false'
+        '/app/airtable/connections/add?shared=false'
       );
       await expect(
         applicationsPage.page.getByTestId('add-app-connection-dialog')
       ).toBeVisible();
       await applicationsPage.clickAway();
       await expect(applicationsPage.page).toHaveURL(
-        '/app/azure-openai/connections'
+        '/app/airtable/connections'
       );
       await expect(
         applicationsPage.page.getByTestId('add-app-connection-dialog')

packages/web/package.json

@@ -7,6 +7,7 @@
     "@apollo/client": "^3.6.9",
     "@casl/ability": "^6.5.0",
     "@casl/react": "^3.1.0",
+    "@dagrejs/dagre": "^1.1.2",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@hookform/resolvers": "^2.8.8",
@@ -32,6 +33,7 @@
     "react-router-dom": "^6.0.2",
     "react-scripts": "5.0.0",
     "react-window": "^1.8.9",
+    "reactflow": "^11.11.2",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
     "slate-react": "^0.94.2",

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

@@ -36,7 +36,7 @@ function AdminApplicationSettings(props) {
 
   const handleSubmit = async (values) => {
     try {
-      if (!appConfig.data) {
+      if (!appConfig?.data) {
         await createAppConfig({
           variables: {
             input: { key: props.appKey, ...values },
@@ -69,6 +69,7 @@ function AdminApplicationSettings(props) {
     }),
     [appConfig?.data],
   );
+
   return (
     <Form
       defaultValues={defaultValues}

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

@@ -8,6 +8,7 @@ import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
 import { useQueryClient } from '@tanstack/react-query';
+import Can from 'components/Can';
 
 function ContextMenu(props) {
   const {
@@ -44,34 +45,57 @@ function ContextMenu(props) {
       hideBackdrop={false}
       anchorEl={anchorEl}
     >
-      <MenuItem
-        component={Link}
-        to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connection.id)}
-        onClick={createActionHandler({ type: 'viewFlows' })}
-      >
-        {formatMessage('connection.viewFlows')}
-      </MenuItem>
-
-      <MenuItem onClick={createActionHandler({ type: 'test' })}>
-        {formatMessage('connection.testConnection')}
-      </MenuItem>
-
-      <MenuItem
-        component={Link}
-        disabled={disableReconnection}
-        to={URLS.APP_RECONNECT_CONNECTION(
-          appKey,
-          connection.id,
-          connection.appAuthClientId,
+      <Can I="read" a="Flow" passThrough>
+        {(allowed) => (
+          <MenuItem
+            component={Link}
+            to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connection.id)}
+            onClick={createActionHandler({ type: 'viewFlows' })}
+            disabled={!allowed}
+          >
+            {formatMessage('connection.viewFlows')}
+          </MenuItem>
         )}
-        onClick={createActionHandler({ type: 'reconnect' })}
-      >
-        {formatMessage('connection.reconnect')}
-      </MenuItem>
+      </Can>
 
-      <MenuItem onClick={createActionHandler({ type: 'delete' })}>
-        {formatMessage('connection.delete')}
-      </MenuItem>
+      <Can I="update" a="Connection" passThrough>
+        {(allowed) => (
+          <MenuItem
+            onClick={createActionHandler({ type: 'test' })}
+            disabled={!allowed}
+          >
+            {formatMessage('connection.testConnection')}
+          </MenuItem>
+        )}
+      </Can>
+
+      <Can I="create" a="Connection" passThrough>
+        {(allowed) => (
+          <MenuItem
+            component={Link}
+            disabled={!allowed || disableReconnection}
+            to={URLS.APP_RECONNECT_CONNECTION(
+              appKey,
+              connection.id,
+              connection.appAuthClientId,
+            )}
+            onClick={createActionHandler({ type: 'reconnect' })}
+          >
+            {formatMessage('connection.reconnect')}
+          </MenuItem>
+        )}
+      </Can>
+
+      <Can I="delete" a="Connection" passThrough>
+        {(allowed) => (
+          <MenuItem
+            onClick={createActionHandler({ type: 'delete' })}
+            disabled={!allowed}
+          >
+            {formatMessage('connection.delete')}
+          </MenuItem>
+        )}
+      </Can>
     </Menu>
   );
 }

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import AppConnectionRow from 'components/AppConnectionRow';
 import NoResultFound from 'components/NoResultFound';
+import Can from 'components/Can';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
 import useAppConnections from 'hooks/useAppConnections';
@@ -16,11 +17,15 @@ function AppConnections(props) {
 
   if (!hasConnections) {
     return (
-      <NoResultFound
-        to={URLS.APP_ADD_CONNECTION(appKey)}
-        text={formatMessage('app.noConnections')}
-        data-test="connections-no-results"
-      />
+      <Can I="create" a="Connection" passThrough>
+        {(allowed) => (
+          <NoResultFound
+            text={formatMessage('app.noConnections')}
+            data-test="connections-no-results"
+            {...(allowed && { to: URLS.APP_ADD_CONNECTION(appKey) })}
+          />
+        )}
+      </Can>
     );
   }
 

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

@@ -5,6 +5,7 @@ import PaginationItem from '@mui/material/PaginationItem';
 
 import * as URLS from 'config/urls';
 import AppFlowRow from 'components/FlowRow';
+import Can from 'components/Can';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useConnectionFlows from 'hooks/useConnectionFlows';
@@ -36,11 +37,20 @@ function AppFlows(props) {
 
   if (!hasFlows) {
     return (
-      <NoResultFound
-        to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(appKey, connectionId)}
-        text={formatMessage('app.noFlows')}
-        data-test="flows-no-results"
-      />
+      <Can I="create" a="Flow" passThrough>
+        {(allowed) => (
+          <NoResultFound
+            text={formatMessage('app.noFlows')}
+            data-test="flows-no-results"
+            {...(allowed && {
+              to: URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
+                appKey,
+                connectionId
+              ),
+            })}
+          />
+        )}
+      </Can>
     );
   }
 

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

@@ -165,6 +165,7 @@ function ChooseAppAndEventSubstep(props) {
             value={getOption(appOptions, step.appKey) || null}
             onChange={onAppChange}
             data-test="choose-app-autocomplete"
+            componentsProps={{ popper: { className: 'nowheel' } }}
           />
 
           {step.appKey && (
@@ -227,6 +228,7 @@ function ChooseAppAndEventSubstep(props) {
                 value={getOption(actionOrTriggerOptions, step.key) || null}
                 onChange={onEventChange}
                 data-test="choose-event-autocomplete"
+                componentsProps={{ popper: { className: 'nowheel' } }}
               />
             </Box>
           )}

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

@@ -240,6 +240,7 @@ function ChooseConnectionSubstep(props) {
             onChange={handleChange}
             loading={isAppConnectionsLoading}
             data-test="choose-connection-autocomplete"
+            componentsProps={{ popper: { className: 'nowheel' } }}
           />
 
           <Button

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

@@ -32,9 +32,11 @@ function ControlledAutocomplete(props) {
     ...autocompleteProps
   } = props;
   let dependsOnValues = [];
+
   if (dependsOn?.length) {
     dependsOnValues = watch(dependsOn);
   }
+
   React.useEffect(() => {
     const hasDependencies = dependsOnValues.length;
     const allDepsSatisfied = dependsOnValues.every(Boolean);
@@ -44,6 +46,7 @@ function ControlledAutocomplete(props) {
       resetField(name);
     }
   }, dependsOnValues);
+
   return (
     <Controller
       rules={{ required }}

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

@@ -47,6 +47,7 @@ const CustomOptions = (props) => {
           },
         },
       ]}
+      className="nowheel"
     >
       <Paper elevation={5} sx={{ width: '100%' }}>
         <Tabs

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

@@ -61,6 +61,7 @@ function ControlledCustomAutocomplete(props) {
   const [isSingleChoice, setSingleChoice] = React.useState(undefined);
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef(null);
+  const mountedRef = React.useRef(false);
 
   const renderElement = React.useCallback(
     (props) => <Element {...props} disabled={disabled} />,
@@ -94,10 +95,14 @@ function ControlledCustomAutocomplete(props) {
   }, []);
 
   React.useEffect(() => {
-    const hasDependencies = dependsOnValues.length;
-    if (hasDependencies) {
-      // Reset the field when a dependent has been updated
-      resetEditor(editor);
+    if (mountedRef.current) {
+      const hasDependencies = dependsOnValues.length;
+      if (hasDependencies) {
+        // Reset the field when a dependent has been updated
+        resetEditor(editor);
+      }
+    } else {
+      mountedRef.current = true;
     }
   }, dependsOnValues);
 

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

@@ -64,11 +64,19 @@ function DynamicField(props) {
           <Stack
             direction={{ xs: 'column', sm: 'row' }}
             spacing={{ xs: 2 }}
-            sx={{ display: 'flex', flex: 1 }}
+            sx={{
+              display: 'flex',
+              flex: 1,
+              minWidth: 0,
+            }}
           >
             {fields.map((fieldSchema, fieldSchemaIndex) => (
               <Box
-                sx={{ display: 'flex', flex: '1 0 0px' }}
+                sx={{
+                  display: 'flex',
+                  flex: '1 0 0px',
+                  minWidth: 0,
+                }}
                 key={`field-${field.__id}-${fieldSchemaIndex}`}
               >
                 <InputCreator

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

@@ -8,6 +8,7 @@ import Tooltip from '@mui/material/Tooltip';
 import IconButton from '@mui/material/IconButton';
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import Snackbar from '@mui/material/Snackbar';
+import { ReactFlowProvider } from 'reactflow';
 
 import { EditorProvider } from 'contexts/Editor';
 import EditableTypography from 'components/EditableTypography';
@@ -20,6 +21,9 @@ import * as URLS from 'config/urls';
 import { TopBar } from './style';
 import useFlow from 'hooks/useFlow';
 import { useQueryClient } from '@tanstack/react-query';
+import EditorNew from 'components/EditorNew/EditorNew';
+
+const useNewFlowEditor = process.env.REACT_APP_USE_NEW_FLOW_EDITOR === 'true';
 
 export default function EditorLayout() {
   const { flowId } = useParams();
@@ -131,15 +135,28 @@ export default function EditorLayout() {
           </Button>
         </Box>
       </TopBar>
-      <Stack direction="column" height="100%">
-        <Container maxWidth="md">
-          <EditorProvider value={{ readOnly: !!flow?.active }}>
-            {!flow && !isFlowLoading && 'not found'}
 
-            {flow && <Editor flow={flow} />}
-          </EditorProvider>
-        </Container>
-      </Stack>
+      {useNewFlowEditor ? (
+        <Stack direction="column" height="100%" flexGrow={1}>
+          <Stack direction="column" flexGrow={1}>
+            <EditorProvider value={{ readOnly: !!flow?.active }}>
+              <ReactFlowProvider>
+                {!flow && !isFlowLoading && 'not found'}
+                {flow && <EditorNew flow={flow} />}
+              </ReactFlowProvider>
+            </EditorProvider>
+          </Stack>
+        </Stack>
+      ) : (
+        <Stack direction="column" height="100%">
+          <Container maxWidth="md">
+            <EditorProvider value={{ readOnly: !!flow?.active }}>
+              {!flow && !isFlowLoading && 'not found'}
+              {flow && <Editor flow={flow} />}
+            </EditorProvider>
+          </Container>
+        </Stack>
+      )}
 
       <Snackbar
         data-test="flow-cannot-edit-info-snackbar"

packages/web/src/components/EditorNew/Edges/NodeEdge/NodeEdge.js

@@ -0,0 +1,69 @@
+import { EdgeLabelRenderer, getStraightPath, BaseEdge } from 'reactflow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+
+import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { EdgesContext } from '../../EditorNew';
+import { Tooltip } from '@mui/material';
+
+export default function NodeEdge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  source,
+  data: { laidOut },
+}) {
+  const { stepCreationInProgress, flowActive, onAddStep } =
+    useContext(EdgesContext);
+
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  const handleAddStep = () => {
+    onAddStep(source);
+  };
+
+  return (
+    <>
+      <BaseEdge path={edgePath} />
+      <EdgeLabelRenderer>
+        <Tooltip title="Add step">
+          <IconButton
+            onClick={handleAddStep}
+            color="primary"
+            sx={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: 'all',
+              backgroundColor: '#fafafa',
+              '&:hover': {
+                backgroundColor: '#f0f3fa',
+              },
+              // visibility: laidOut ? 'visible' : 'hidden',
+            }}
+            disabled={stepCreationInProgress || flowActive}
+          >
+            <AddIcon />
+          </IconButton>
+        </Tooltip>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+NodeEdge.propTypes = {
+  sourceX: PropTypes.number.isRequired,
+  sourceY: PropTypes.number.isRequired,
+  targetX: PropTypes.number.isRequired,
+  targetY: PropTypes.number.isRequired,
+  source: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    laidOut: PropTypes.bool,
+  }).isRequired,
+};

packages/web/src/components/EditorNew/Edges/NodeOrPathsEdge/NodeOrPathsEdge.jsx

@@ -0,0 +1,95 @@
+import { EdgeLabelRenderer, getStraightPath, BaseEdge } from 'reactflow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+import PropTypes from 'prop-types';
+import { useContext, useState } from 'react';
+import { EdgesContext } from '../../EditorNew';
+import { Tooltip } from '@mui/material';
+
+export default function NodeOrPathsEdge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  source,
+  data: { laidOut },
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const { stepCreationInProgress, flowActive, onAddStep, onAddPaths } =
+    useContext(EdgesContext);
+
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  const handleAddStep = () => {
+    onAddStep(source);
+    handleClose();
+  };
+
+  const handleAddPaths = () => {
+    onAddPaths(source);
+    handleClose();
+  };
+
+  return (
+    <>
+      <BaseEdge path={edgePath} />
+      <EdgeLabelRenderer>
+        <Tooltip title="Add step or paths">
+          <IconButton
+            onClick={handleClick}
+            color="primary"
+            sx={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: 'all',
+              backgroundColor: '#fafafa',
+              '&:hover': {
+                backgroundColor: '#f0f3fa',
+              },
+              // visibility: laidOut ? 'visible' : 'hidden',
+            }}
+            disabled={stepCreationInProgress || flowActive}
+          >
+            <AddIcon />
+          </IconButton>
+        </Tooltip>
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
+        >
+          <MenuItem onClick={handleAddStep}>Step</MenuItem>
+          <MenuItem onClick={handleAddPaths}>Paths</MenuItem>
+        </Menu>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+NodeOrPathsEdge.propTypes = {
+  sourceX: PropTypes.number.isRequired,
+  sourceY: PropTypes.number.isRequired,
+  targetX: PropTypes.number.isRequired,
+  targetY: PropTypes.number.isRequired,
+  source: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    laidOut: PropTypes.bool,
+  }).isRequired,
+};

packages/web/src/components/EditorNew/Edges/PathsEdge/PathsEdge.js

@@ -0,0 +1,69 @@
+import { EdgeLabelRenderer, getStraightPath, BaseEdge } from 'reactflow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+
+import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { EdgesContext } from '../../EditorNew';
+import { Tooltip } from '@mui/material';
+
+export default function PathsEdge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  source,
+  data: { laidOut },
+}) {
+  const { stepCreationInProgress, flowActive, onAddPath } =
+    useContext(EdgesContext);
+
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  const handleAddPath = () => {
+    onAddPath(source);
+  };
+
+  return (
+    <>
+      <BaseEdge path={edgePath} />
+      <EdgeLabelRenderer>
+        <Tooltip title="Add path">
+          <IconButton
+            onClick={handleAddPath}
+            color="primary"
+            sx={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: 'all',
+              backgroundColor: '#fafafa',
+              '&:hover': {
+                backgroundColor: '#f0f3fa',
+              },
+              // visibility: laidOut ? 'visible' : 'hidden',
+            }}
+            disabled={stepCreationInProgress || flowActive}
+          >
+            <AddIcon />
+          </IconButton>
+        </Tooltip>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+PathsEdge.propTypes = {
+  sourceX: PropTypes.number.isRequired,
+  sourceY: PropTypes.number.isRequired,
+  targetX: PropTypes.number.isRequired,
+  targetY: PropTypes.number.isRequired,
+  source: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    laidOut: PropTypes.bool,
+  }).isRequired,
+};

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -0,0 +1,184 @@
+import { useEffect, useCallback, createContext, useRef } from 'react';
+// import { useMutation } from '@apollo/client';
+// import { useQueryClient } from '@tanstack/react-query';
+import { FlowPropType } from 'propTypes/propTypes';
+import ReactFlow, { useNodesState, useEdgesState } from 'reactflow';
+import 'reactflow/dist/style.css';
+// import { UPDATE_STEP } from 'graphql/mutations/update-step';
+// import { CREATE_STEP } from 'graphql/mutations/create-step';
+
+import { useAutoLayout } from './useAutoLayout';
+import NodeOrPathsEdge from './Edges/NodeOrPathsEdge/NodeOrPathsEdge';
+import FlowStepNode from './Nodes/FlowStepNode/FlowStepNode';
+import InvisibleNode from './Nodes/InvisibleNode/InvisibleNode';
+import PathsNode from './Nodes/PathsNode/PathsNode';
+import { EditorWrapper } from './style';
+import { generateEdges, generateNodes, updatedCollapsedNodes } from './utils';
+import { EDGE_TYPES, NODE_TYPES } from './constants';
+import { useFlow } from './temp/useFlow';
+import PathNode from './Nodes/PathNode/PathNode';
+import PathsEdge from './Edges/PathsEdge/PathsEdge';
+import NodeEdge from './Edges/NodeEdge/NodeEdge';
+
+export const EdgesContext = createContext();
+export const NodesContext = createContext();
+
+const nodeTypes = {
+  [NODE_TYPES.FLOW_STEP]: FlowStepNode,
+  [NODE_TYPES.INVISIBLE]: InvisibleNode,
+  [NODE_TYPES.PATHS]: PathsNode,
+  [NODE_TYPES.PATH]: PathNode,
+};
+
+const edgeTypes = {
+  [EDGE_TYPES.ADD_NODE_OR_PATHS_EDGE]: NodeOrPathsEdge,
+  [EDGE_TYPES.ADD_PATH_EDGE]: PathsEdge,
+  [EDGE_TYPES.ADD_NODE_EDGE]: NodeEdge,
+};
+
+const EditorNew = () =>
+  // { flow }
+  {
+    const { flow, createStep, createPaths, createPath } = useFlow();
+    // const [updateStep] = useMutation(UPDATE_STEP);
+    // const queryClient = useQueryClient();
+    // const [createStep, { loading: stepCreationInProgress }] =
+    //   useMutation(CREATE_STEP);
+    const stepCreationInProgress = false;
+
+    const [nodes, setNodes, onNodesChange] = useNodesState(
+      generateNodes({ steps: flow.steps }),
+    );
+    const [edges, setEdges, onEdgesChange] = useEdgesState(
+      generateEdges({ steps: flow.steps }),
+    );
+
+    useAutoLayout();
+
+    const createdStepIdRef = useRef(null);
+
+    const openNextStep = useCallback(
+      (currentStepId) => {
+        setNodes((nodes) => {
+          const currentStepIndex = nodes.findIndex(
+            (node) => node.id === currentStepId,
+          );
+          if (currentStepIndex >= 0) {
+            const nextStep = nodes[currentStepIndex + 1];
+            return updatedCollapsedNodes(nodes, nextStep.id);
+          }
+          return nodes;
+        });
+      },
+      [setNodes],
+    );
+
+    const onStepClose = useCallback(() => {
+      setNodes((nodes) => updatedCollapsedNodes(nodes));
+    }, [setNodes]);
+
+    const onStepOpen = useCallback(
+      (stepId) => {
+        setNodes((nodes) => updatedCollapsedNodes(nodes, stepId));
+      },
+      [setNodes],
+    );
+
+    const onStepChange = useCallback(
+      async (step) => {
+        // const mutationInput = {
+        //   id: step.id,
+        //   key: step.key,
+        //   parameters: step.parameters,
+        //   connection: {
+        //     id: step.connection?.id,
+        //   },
+        //   flow: {
+        //     id: flow.id,
+        //   },
+        // };
+        // if (step.appKey) {
+        //   mutationInput.appKey = step.appKey;
+        // }
+        // const updated = await updateStep({
+        //   variables: { input: mutationInput },
+        // });
+        // await queryClient.invalidateQueries({
+        //   queryKey: ['steps', step.id, 'connection'],
+        // });
+        // await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
+      },
+      // [flow.id, updateStep, queryClient],
+    );
+
+    const onAddStep = async (previousStepId) => {
+      const createdStepId = createStep(flow, previousStepId);
+      createdStepIdRef.current = createdStepId;
+    };
+
+    console.log({ flow });
+
+    useEffect(() => {
+      // if (flow.steps.length + 1 !== nodes.length) {
+      setNodes((nodes) =>
+        generateNodes({
+          prevNodes: nodes,
+          steps: flow.steps,
+          createdStepId: createdStepIdRef.current,
+        }),
+      );
+
+      setEdges((edges) =>
+        generateEdges({ prevEdges: edges, steps: flow.steps }),
+      );
+
+      if (createdStepIdRef.current) {
+        createdStepIdRef.current = null;
+      }
+      // }
+    }, [flow.steps]);
+
+    return (
+      <NodesContext.Provider
+        value={{
+          openNextStep,
+          onStepOpen,
+          onStepClose,
+          onStepChange,
+          flowId: flow.id,
+          steps: flow.steps,
+        }}
+      >
+        <EdgesContext.Provider
+          value={{
+            stepCreationInProgress,
+            onAddStep,
+            onAddPaths: createPaths,
+            onAddPath: createPath,
+            flowActive: flow.active,
+          }}
+        >
+          <EditorWrapper direction="column">
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              nodeTypes={nodeTypes}
+              edgeTypes={edgeTypes}
+              fitView
+              maxZoom={1}
+              minZoom={0.001}
+              proOptions={{ hideAttribution: true }}
+            />
+          </EditorWrapper>
+        </EdgesContext.Provider>
+      </NodesContext.Provider>
+    );
+  };
+
+EditorNew.propTypes = {
+  flow: FlowPropType.isRequired,
+};
+
+export default EditorNew;

packages/web/src/components/EditorNew/Nodes/FlowStepNode/FlowStepNode.jsx

@@ -0,0 +1,69 @@
+import { Handle, Position } from 'reactflow';
+import PropTypes from 'prop-types';
+
+import FlowStep from 'components/FlowStep';
+
+import { NodeWrapper, NodeInnerWrapper } from './style.js';
+import { useContext } from 'react';
+import { NodesContext } from '../../EditorNew.jsx';
+import { findStepByStepId } from 'components/EditorNew/utils.js';
+
+function FlowStepNode({ data: { collapsed, laidOut }, id }) {
+  const { openNextStep, onStepOpen, onStepClose, onStepChange, flowId, steps } =
+    useContext(NodesContext);
+
+  const step = findStepByStepId({ steps }, id);
+
+  return (
+    // <NodeWrapper
+    //   sx={{
+    //     visibility: laidOut ? 'visible' : 'hidden',
+    //   }}
+    // >
+    <NodeInnerWrapper
+      sx={
+        {
+          // visibility: laidOut ? 'visible' : 'hidden',
+        }
+      }
+      id="flowStepId"
+      className="nodrag"
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        isConnectable={false}
+        style={{ visibility: 'hidden' }}
+      />
+      {step && (
+        <FlowStep
+          step={step}
+          collapsed={collapsed}
+          onOpen={() => onStepOpen(step.id)}
+          onClose={onStepClose}
+          onChange={onStepChange}
+          flowId={flowId}
+          onContinue={() => openNextStep(step.id)}
+          collapseAnimation={false}
+        />
+      )}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        isConnectable={false}
+        style={{ visibility: 'hidden' }}
+      />
+    </NodeInnerWrapper>
+    // </NodeWrapper>
+  );
+}
+
+FlowStepNode.propTypes = {
+  id: PropTypes.string,
+  data: PropTypes.shape({
+    collapsed: PropTypes.bool.isRequired,
+    laidOut: PropTypes.bool.isRequired,
+  }).isRequired,
+};
+
+export default FlowStepNode;

packages/web/src/components/EditorNew/Nodes/FlowStepNode/style.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const NodeWrapper = styled(Box)(({ theme }) => ({
+  width: '100vw',
+  display: 'flex',
+  justifyContent: 'center',
+  padding: theme.spacing(0, 2.5),
+}));
+
+export const NodeInnerWrapper = styled(Box)(({ theme }) => ({
+  width: 900,
+  flex: 1,
+}));

packages/web/src/components/EditorNew/Nodes/InvisibleNode/InvisibleNode.jsx

@@ -0,0 +1,19 @@
+import { Handle, Position } from 'reactflow';
+import { Box } from '@mui/material';
+
+// This node is used for adding an edge with add node button after the last flow step node
+function InvisibleNode() {
+  return (
+    <Box
+      maxWidth={900}
+      width="100vw"
+      className="nodrag"
+      sx={{ visibility: 'hidden' }}
+    >
+      <Handle type="target" position={Position.Top} isConnectable={false} />
+      Invisible node
+    </Box>
+  );
+}
+
+export default InvisibleNode;

packages/web/src/components/EditorNew/Nodes/PathNode/PathNode.jsx

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import { Handle, Position } from 'reactflow';
+import { Box, Stack, Typography } from '@mui/material';
+import { useRef, useState } from 'react';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+
+import IconButton from '@mui/material/IconButton';
+import { Wrapper } from './style';
+
+/* TODO 
+    - add delete
+    - add rename 
+    - add translations
+    - add collapsing?
+*/
+
+function PathNode({ data: { laidOut } }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const contextButtonRef = useRef(null);
+
+  const onContextMenuClose = (event) => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+
+  const onContextMenuClick = (event) => {
+    event.stopPropagation();
+    setAnchorEl(contextButtonRef.current);
+  };
+
+  const deletePath = () => {
+    setAnchorEl(null);
+    onContextMenuClose();
+  };
+
+  return (
+    <>
+      <Box
+        className="nodrag"
+        sx={
+          {
+            // visibility: laidOut ? 'visible' : 'hidden',
+          }
+        }
+      >
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+
+        <Wrapper>
+          <Stack
+            justifyContent="space-between"
+            alignItems="center"
+            direction="row"
+          >
+            <Typography sx={{ pr: 2 }}>Path</Typography>
+            <IconButton
+              color="primary"
+              onClick={onContextMenuClick}
+              ref={contextButtonRef}
+            >
+              <MoreHorizIcon />
+            </IconButton>
+          </Stack>
+        </Wrapper>
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+      </Box>
+      {anchorEl && (
+        <Menu
+          open={true}
+          onClose={onContextMenuClose}
+          hideBackdrop={false}
+          anchorEl={anchorEl}
+        >
+          <MenuItem onClick={deletePath}>Delete</MenuItem>
+        </Menu>
+      )}
+    </>
+  );
+}
+
+PathNode.propTypes = {
+  data: PropTypes.shape({
+    laidOut: PropTypes.bool,
+  }).isRequired,
+};
+
+export default PathNode;

packages/web/src/components/EditorNew/Nodes/PathNode/style.js

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+
+export const Wrapper = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  backgroundColor: '#0059f714',
+  borderRadius: 20,
+}));

packages/web/src/components/EditorNew/Nodes/PathsNode/PathsNode.jsx

@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+import { Handle, Position } from 'reactflow';
+import { Avatar, Box, Stack, Typography } from '@mui/material';
+import { useRef, useState } from 'react';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import CallSplitIcon from '@mui/icons-material/CallSplit';
+
+import IconButton from '@mui/material/IconButton';
+import { Wrapper } from './style';
+
+/* TODO 
+    - add delete
+    - add rename 
+    - add translations
+    - add collapsing?
+*/
+
+function PathsNode({ data: { laidOut } }) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const contextButtonRef = useRef(null);
+
+  const onContextMenuClose = (event) => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+
+  const onContextMenuClick = (event) => {
+    event.stopPropagation();
+    setAnchorEl(contextButtonRef.current);
+  };
+
+  const deletePaths = () => {
+    setAnchorEl(null);
+    onContextMenuClose();
+  };
+
+  return (
+    <>
+      <Box
+        width={900}
+        className="nodrag"
+        sx={
+          {
+            // visibility: laidOut ? 'visible' : 'hidden',
+          }
+        }
+      >
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+
+        <Wrapper>
+          <Stack justifyContent="space-between" direction="row">
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <Avatar
+                sx={{ display: 'flex', width: 50, height: 50 }}
+                variant="square"
+              >
+                <CallSplitIcon
+                  fontSize="large"
+                  sx={{ transform: 'rotate(180deg)' }}
+                />
+              </Avatar>
+              {/* TODO name from path data */}
+              <Typography>Paths</Typography>
+            </Stack>
+            <IconButton
+              color="primary"
+              onClick={onContextMenuClick}
+              ref={contextButtonRef}
+            >
+              <MoreHorizIcon />
+            </IconButton>
+          </Stack>
+        </Wrapper>
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+      </Box>
+      {anchorEl && (
+        <Menu
+          open={true}
+          onClose={onContextMenuClose}
+          hideBackdrop={false}
+          anchorEl={anchorEl}
+        >
+          <MenuItem onClick={deletePaths}>Delete</MenuItem>
+        </Menu>
+      )}
+    </>
+  );
+}
+
+PathsNode.propTypes = {
+  data: PropTypes.shape({
+    laidOut: PropTypes.bool,
+  }).isRequired,
+};
+
+export default PathsNode;

packages/web/src/components/EditorNew/Nodes/PathsNode/style.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+
+export const Wrapper = styled(Card)`
+  width: 100%;
+  padding: ${({ theme }) => theme.spacing(2)};
+`;

packages/web/src/components/EditorNew/constants.js

@@ -0,0 +1,14 @@
+export const INVISIBLE_NODE_ID = 'invisible-node';
+
+export const NODE_TYPES = {
+  FLOW_STEP: 'flowStep',
+  INVISIBLE: 'invisible',
+  PATHS: 'parallelPaths',
+  PATH: 'path',
+};
+
+export const EDGE_TYPES = {
+  ADD_NODE_OR_PATHS_EDGE: 'addNodeOrPathsEdge',
+  ADD_PATH_EDGE: 'addPathEdge',
+  ADD_NODE_EDGE: 'addNodeEdge',
+};

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

@@ -0,0 +1,13 @@
+import { Stack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const EditorWrapper = styled(Stack)(({ theme }) => ({
+  flexGrow: 1,
+  '& > div': {
+    flexGrow: 1,
+  },
+
+  // '& .react-flow__pane, & .react-flow__node': {
+  //   cursor: 'auto !important',
+  // },
+}));

packages/web/src/components/EditorNew/temp/useFlow.js

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { insertStep } from '../utils';
+
+const initFlow = {
+  id: '7c55e6ce-a84a-46e3-ba31-211ec7b5c2cb',
+  name: 'Name your flow',
+  active: false,
+  status: 'draft',
+  createdAt: 1718264916266,
+  updatedAt: 1718264916266,
+  steps: [
+    {
+      id: '82ce34ab-7aab-4e6c-9f62-db5104aa81c6',
+      type: 'trigger',
+      key: null,
+      appKey: null,
+      iconUrl: null,
+      webhookUrl: 'http://localhost:3000/null',
+      status: 'incomplete',
+      position: 1,
+      parameters: {},
+    },
+    {
+      id: '41c60527-eb4f-4f2d-93ec-2fd37e336909',
+      type: 'action',
+      key: null,
+      appKey: null,
+      iconUrl: null,
+      webhookUrl: 'http://localhost:3000/null',
+      status: 'incomplete',
+      position: 2,
+      parameters: {},
+    },
+  ],
+};
+
+const generateStep = () => {
+  return {
+    id: uuidv4(),
+    type: 'action',
+    key: null,
+    appKey: null,
+    parameters: {},
+    iconUrl: null,
+    webhookUrl: 'http://localhost:3000/null',
+    status: 'incomplete',
+    connection: null,
+    position: null,
+  };
+};
+
+const generatePath = (steps) => {
+  return {
+    id: uuidv4(),
+    type: 'path',
+    steps: steps?.length > 0 ? steps : [generateStep()],
+  };
+};
+
+export const generatePaths = (steps) => {
+  return {
+    id: uuidv4(),
+    type: 'parallelPaths',
+    steps: [generatePath(steps), generatePath()],
+  };
+};
+
+export const useFlow = () => {
+  const [flow, setFlow] = useState(initFlow);
+
+  const createStep = (flow, previousStepId) => {
+    const newStep = generateStep();
+    const newFlow = insertStep(flow, previousStepId, newStep);
+
+    setFlow(newFlow);
+    return newStep.id;
+  };
+
+  const createPaths = (previousStepId) => {
+    const newFlow = insertStep(flow, previousStepId, generatePaths());
+    setFlow(newFlow);
+  };
+
+  const createPath = (previousStepId) => {
+    const newFlow = insertStep(flow, previousStepId, generatePath());
+    setFlow(newFlow);
+  };
+
+  return {
+    flow,
+    createStep,
+    createPaths,
+    createPath,
+  };
+};

packages/web/src/components/EditorNew/useAutoLayout.js

@@ -0,0 +1,71 @@
+import { useCallback, useEffect } from 'react';
+import Dagre from '@dagrejs/dagre';
+import { usePrevious } from 'hooks/usePrevious';
+import { isEqual } from 'lodash';
+import { useNodesInitialized, useNodes, useReactFlow } from 'reactflow';
+
+const getLaidOutElements = (nodes, edges) => {
+  const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  graph.setGraph({
+    rankdir: 'TB',
+    marginy: 60,
+    ranksep: 64,
+  });
+  edges.forEach((edge) => graph.setEdge(edge.source, edge.target));
+  nodes.forEach((node) => graph.setNode(node.id, node));
+
+  Dagre.layout(graph);
+
+  return {
+    nodes: nodes.map((node) => {
+      const { x, y, width, height } = graph.node(node.id);
+      return {
+        ...node,
+        position: { x: x - width / 2, y: y - height / 2 },
+      };
+    }),
+    edges,
+  };
+};
+
+export const useAutoLayout = () => {
+  const nodes = useNodes();
+  const prevNodes = usePrevious(nodes);
+  const nodesInitialized = useNodesInitialized();
+  const { getEdges, setNodes, setEdges, fitView } = useReactFlow();
+
+  const onLayout = useCallback(
+    (nodes, edges) => {
+      const laidOutElements = getLaidOutElements(nodes, edges);
+
+      setNodes([
+        ...laidOutElements.nodes.map((node) => ({
+          ...node,
+          data: { ...node.data, laidOut: true },
+        })),
+      ]);
+      setEdges([
+        ...laidOutElements.edges.map((edge) => ({
+          ...edge,
+          data: { ...edge.data, laidOut: true },
+        })),
+      ]);
+    },
+    [setEdges, setNodes],
+  );
+
+  useEffect(() => {
+    const shouldAutoLayout =
+      nodesInitialized &&
+      !isEqual(
+        nodes.map(({ width, height }) => ({ width, height })),
+        prevNodes.map(({ width, height }) => ({ width, height })),
+      );
+
+    fitView();
+
+    if (shouldAutoLayout) {
+      onLayout(nodes, getEdges());
+    }
+  }, [nodes]);
+};

packages/web/src/components/EditorNew/useScrollBoundaries.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useViewport, useReactFlow } from 'reactflow';
+
+export const useScrollBoundaries = () => {
+  const { setViewport } = useReactFlow();
+  const { x, y, zoom } = useViewport();
+
+  useEffect(() => {
+    if (y > 0) {
+      setViewport({ x, y: 0, zoom });
+    }
+  }, [y]);
+};

packages/web/src/components/EditorNew/utils.js

@@ -0,0 +1,245 @@
+import cloneDeep from 'lodash/cloneDeep.js';
+import { EDGE_TYPES, INVISIBLE_NODE_ID, NODE_TYPES } from './constants';
+
+export const generateEdgeId = (sourceId, targetId) =>
+  `${sourceId}--${targetId}`;
+
+export const updatedCollapsedNodes = (nodes, openStepId) => {
+  return nodes.map((node) => {
+    if (node.type !== NODE_TYPES.FLOW_STEP) {
+      return node;
+    }
+
+    const collapsed = node.id !== openStepId;
+    return {
+      ...node,
+      zIndex: collapsed ? 0 : 1,
+      data: { ...node.data, collapsed },
+    };
+  });
+};
+
+export const generateNodes = ({ steps, prevNodes, createdStepId }) => {
+  const newNodes = steps.map((step, index) => {
+    const collapsed = index !== 0;
+
+    const prevNode = prevNodes?.find(({ id }) => id === step.id);
+
+    let newNode;
+    let childSteps = [];
+
+    switch (step.type) {
+      case 'trigger':
+      case 'action': {
+        if (prevNode) {
+          newNode = {
+            ...prevNode,
+            zIndex: createdStepId ? 0 : prevNode?.zIndex || 0,
+            data: {
+              ...prevNode.data,
+              collapsed: createdStepId
+                ? true
+                : prevNode?.data?.collapsed || true,
+            },
+          };
+        } else {
+          newNode = {
+            id: step.id,
+            type: NODE_TYPES.FLOW_STEP,
+            position: {
+              x: 0,
+              y: 0,
+            },
+            zIndex: collapsed ? 0 : 1,
+            data: {
+              collapsed,
+              laidOut: false,
+            },
+          };
+        }
+        break;
+      }
+      case 'parallelPaths': {
+        if (prevNode) {
+          newNode = prevNode;
+        } else {
+          newNode = {
+            id: step.id,
+            type: NODE_TYPES.PATHS,
+            position: {
+              x: 0,
+              y: 0,
+            },
+            data: {
+              laidOut: false,
+            },
+          };
+        }
+
+        break;
+      }
+      case 'path': {
+        if (prevNode) {
+          newNode = prevNode;
+        } else {
+          newNode = {
+            id: step.id,
+            type: NODE_TYPES.PATH,
+            position: {
+              x: 0,
+              y: 0,
+            },
+            data: {
+              laidOut: false,
+            },
+          };
+        }
+        break;
+      }
+      default:
+    }
+
+    if (step?.steps?.length > 0) {
+      childSteps = generateNodes({
+        steps: step.steps,
+        prevNodes,
+        createdStepId,
+      });
+    }
+
+    return [newNode, ...childSteps];
+  });
+
+  return newNodes.flat(Infinity);
+};
+
+export const generateEdges = ({ steps }) => {
+  const newEdges = steps.map((step, index) => {
+    switch (step.type) {
+      case 'parallelPaths': {
+        const edges = step.steps.map((childStep) => {
+          const sourceId = step.id;
+          const targetId = childStep.id;
+
+          const newEdge = {
+            id: generateEdgeId(sourceId, targetId),
+            source: sourceId,
+            target: targetId,
+            type: EDGE_TYPES.ADD_PATH_EDGE,
+            data: {
+              laidOut: false,
+            },
+          };
+
+          return newEdge;
+        });
+
+        const childEdges = generateEdges({ steps: step.steps });
+
+        return [...edges, ...childEdges];
+      }
+      case 'path': {
+        console.log({ step });
+
+        const sourceId = step.id;
+        const targetId = step.steps?.[0]?.id;
+
+        if (targetId) {
+          const newEdge = {
+            id: generateEdgeId(sourceId, targetId),
+            source: sourceId,
+            target: targetId,
+            type: EDGE_TYPES.ADD_NODE_EDGE,
+            data: {
+              laidOut: false,
+            },
+          };
+          const childEdges = generateEdges({ steps: step.steps });
+
+          return [newEdge, ...childEdges];
+        }
+        return null;
+      }
+      default: {
+        const sourceId = step.id;
+        const targetId = steps[index + 1]?.id;
+
+        if (targetId) {
+          return {
+            id: generateEdgeId(sourceId, targetId),
+            source: sourceId,
+            target: targetId,
+            type: EDGE_TYPES.ADD_NODE_OR_PATHS_EDGE,
+            data: {
+              laidOut: false,
+            },
+          };
+        }
+        return null;
+      }
+    }
+  });
+
+  return newEdges.flat(Infinity).filter((edge) => !!edge);
+};
+
+export const findStepByStepId = (obj, id) => {
+  if (Array.isArray(obj.steps)) {
+    for (const step of obj.steps) {
+      if (step.id === id) {
+        return step;
+      }
+      const result = findStepByStepId(step, id);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+};
+
+export function insertStep(parentObj, id, newStep) {
+  function recursiveFindAndInsert(parentObj, id, newStep) {
+    if (parentObj.steps && Array.isArray(parentObj.steps)) {
+      for (let index = 0; index < parentObj.steps.length; index++) {
+        const step = parentObj.steps[index];
+        if (step.id === id) {
+          if (newStep.type === NODE_TYPES.PATHS) {
+            const stepsAfter = parentObj.steps.slice(
+              index + 1,
+              parentObj.steps.length,
+            );
+            parentObj.steps.splice(index + 1);
+            newStep.steps[0].steps = stepsAfter;
+            parentObj.steps.splice(index + 1, 0, newStep);
+          } else if (step.type === NODE_TYPES.PATHS) {
+            step.steps.push(newStep);
+          } else if (step.type === NODE_TYPES.PATH) {
+            step.steps.unshift(newStep);
+          } else {
+            const originalSteps = step.steps || [];
+            step.steps = [];
+
+            const newStepObject = {
+              ...newStep,
+              steps: originalSteps,
+            };
+
+            parentObj.steps.splice(index + 1, 0, newStepObject);
+          }
+          return true;
+        }
+        const found = recursiveFindAndInsert(step, id, newStep);
+        if (found) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  // Clone the input object to avoid mutating the original
+  const newParentObj = cloneDeep(parentObj);
+  recursiveFindAndInsert(newParentObj, id, newStep);
+  return newParentObj;
+}

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

@@ -28,9 +28,12 @@ function ContextMenu(props) {
       variables: { input: { id: flowId } },
     });
 
-    await queryClient.invalidateQueries({
-      queryKey: ['apps', appKey, 'flows'],
-    });
+    if (appKey) {
+      await queryClient.invalidateQueries({
+        queryKey: ['apps', appKey, 'flows'],
+      });
+    }
+
     enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
       variant: 'success',
       SnackbarProps: {
@@ -56,9 +59,12 @@ function ContextMenu(props) {
       },
     });
 
-    await queryClient.invalidateQueries({
-      queryKey: ['apps', appKey, 'flows'],
-    });
+    if (appKey) {
+      await queryClient.invalidateQueries({
+        queryKey: ['apps', appKey, 'flows'],
+      });
+    }
+
     enqueueSnackbar(formatMessage('flow.successfullyDeleted'), {
       variant: 'success',
     });
@@ -110,7 +116,7 @@ ContextMenu.propTypes = {
   ]).isRequired,
   onDeleteFlow: PropTypes.func,
   onDuplicateFlow: PropTypes.func,
-  appKey: PropTypes.string.isRequired,
+  appKey: PropTypes.string,
 };
 
 export default ContextMenu;

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

@@ -38,20 +38,24 @@ function FlowRow(props) {
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const { flow, onDuplicateFlow, onDeleteFlow, appKey } = props;
+
   const handleClose = () => {
     setAnchorEl(null);
   };
+
   const onContextMenuClick = (event) => {
     event.preventDefault();
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
     setAnchorEl(contextButtonRef.current);
   };
+
   const createdAt = DateTime.fromMillis(parseInt(flow.createdAt, 10));
   const updatedAt = DateTime.fromMillis(parseInt(flow.updatedAt, 10));
   const isUpdated = updatedAt > createdAt;
   const relativeCreatedAt = createdAt.toRelative();
   const relativeUpdatedAt = updatedAt.toRelative();
+
   return (
     <>
       <Card sx={{ mb: 1 }} data-test="flow-row">
@@ -127,7 +131,7 @@ FlowRow.propTypes = {
   flow: FlowPropType.isRequired,
   onDeleteFlow: PropTypes.func,
   onDuplicateFlow: PropTypes.func,
-  appKey: PropTypes.string.isRequired,
+  appKey: PropTypes.string,
 };
 
 export default FlowRow;

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

@@ -105,7 +105,7 @@ function generateValidationSchema(substeps) {
 }
 
 function FlowStep(props) {
-  const { collapsed, onChange, onContinue, flowId } = props;
+  const { collapsed, onChange, onContinue, flowId, collapseAnimation } = props;
   const editorContext = React.useContext(EditorContext);
   const contextButtonRef = React.useRef(null);
   const step = props.step;
@@ -259,7 +259,11 @@ function FlowStep(props) {
         </Stack>
       </Header>
 
-      <Collapse in={!collapsed} unmountOnExit>
+      <Collapse
+        in={!collapsed}
+        unmountOnExit
+        {...(!collapseAnimation ? { timeout: 0 } : {})}
+      >
         <Content>
           <List>
             <StepExecutionsProvider value={stepWithTestExecutionsData}>
@@ -360,11 +364,15 @@ function FlowStep(props) {
 FlowStep.propTypes = {
   collapsed: PropTypes.bool,
   step: StepPropType.isRequired,
-  index: PropTypes.number,
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
   onChange: PropTypes.func.isRequired,
   onContinue: PropTypes.func,
+  collapseAnimation: PropTypes.bool,
+};
+
+FlowStep.defaultProps = {
+  collapseAnimation: true,
 };
 
 export default FlowStep;

packages/web/src/components/FlowSubstep/FilterConditions/index.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useFormContext, useWatch } from 'react-hook-form';
@@ -11,15 +12,18 @@ import AddIcon from '@mui/icons-material/Add';
 import useFormatMessage from 'hooks/useFormatMessage';
 import InputCreator from 'components/InputCreator';
 import { EditorContext } from 'contexts/Editor';
+
 const createGroupItem = () => ({
   key: '',
   operator: operators[0].value,
   value: '',
   id: uuidv4(),
 });
+
 const createGroup = () => ({
   and: [createGroupItem()],
 });
+
 const operators = [
   {
     label: 'Equal',
@@ -54,6 +58,7 @@ const operators = [
     value: 'not_contains',
   },
 ];
+
 const createStringArgument = (argumentOptions) => {
   return {
     ...argumentOptions,
@@ -62,6 +67,7 @@ const createStringArgument = (argumentOptions) => {
     variables: true,
   };
 };
+
 const createDropdownArgument = (argumentOptions) => {
   return {
     ...argumentOptions,
@@ -69,28 +75,35 @@ const createDropdownArgument = (argumentOptions) => {
     type: 'dropdown',
   };
 };
+
 function FilterConditions(props) {
   const { stepId } = props;
   const formatMessage = useFormatMessage();
   const { control, setValue, getValues } = useFormContext();
   const groups = useWatch({ control, name: 'parameters.or' });
   const editorContext = React.useContext(EditorContext);
+
   React.useEffect(function addInitialGroupWhenEmpty() {
     const groups = getValues('parameters.or');
+
     if (!groups) {
       setValue('parameters.or', [createGroup()]);
     }
   }, []);
+
   const appendGroup = React.useCallback(() => {
     const values = getValues('parameters.or');
     setValue('parameters.or', values.concat(createGroup()));
   }, []);
+
   const appendGroupItem = React.useCallback((index) => {
     const group = getValues(`parameters.or.${index}.and`);
     setValue(`parameters.or.${index}.and`, group.concat(createGroupItem()));
   }, []);
+
   const removeGroupItem = React.useCallback((groupIndex, groupItemIndex) => {
     const group = getValues(`parameters.or.${groupIndex}.and`);
+
     if (group.length === 1) {
       const groups = getValues('parameters.or');
       setValue(
@@ -104,6 +117,7 @@ function FilterConditions(props) {
       );
     }
   }, []);
+
   return (
     <React.Fragment>
       <Stack sx={{ width: '100%' }} direction="column" spacing={2} mt={2}>
@@ -219,4 +233,9 @@ function FilterConditions(props) {
     </React.Fragment>
   );
 }
+
+FilterConditions.propTypes = {
+  stepId: PropTypes.string.isRequired,
+};
+
 export default FilterConditions;

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useFormContext } from 'react-hook-form';
 import Collapse from '@mui/material/Collapse';
@@ -8,6 +9,8 @@ import { EditorContext } from 'contexts/Editor';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import InputCreator from 'components/InputCreator';
 import FilterConditions from './FilterConditions';
+import { StepPropType, SubstepPropType } from 'propTypes/propTypes';
+
 function FlowSubstep(props) {
   const {
     substep,
@@ -22,6 +25,7 @@ function FlowSubstep(props) {
   const formContext = useFormContext();
   const validationStatus = formContext.formState.isValid;
   const onToggle = expanded ? onCollapse : onExpand;
+
   return (
     <React.Fragment>
       <FlowSubstepTitle
@@ -73,4 +77,14 @@ function FlowSubstep(props) {
     </React.Fragment>
   );
 }
+
+FlowSubstep.propTypes = {
+  substep: SubstepPropType.isRequired,
+  expanded: PropTypes.bool,
+  onExpand: PropTypes.func.isRequired,
+  onCollapse: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  step: StepPropType.isRequired,
+};
+
 export default FlowSubstep;

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

@@ -1,15 +1,20 @@
+import PropTypes from 'prop-types';
 import * as React from 'react';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ErrorIcon from '@mui/icons-material/Error';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { ListItemButton, Typography } from './style';
+
 const validIcon = <CheckCircleIcon color="success" />;
+
 const errorIcon = <ErrorIcon color="error" />;
+
 function FlowSubstepTitle(props) {
   const { expanded = false, onClick = () => null, valid = null, title } = props;
   const hasValidation = valid !== null;
   const validationStatusIcon = valid ? validIcon : errorIcon;
+
   return (
     <ListItemButton onClick={onClick} selected={expanded} divider>
       <Typography variant="body2">
@@ -21,4 +26,12 @@ function FlowSubstepTitle(props) {
     </ListItemButton>
   );
 }
+
+FlowSubstepTitle.propTypes = {
+  expanded: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  valid: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+};
+
 export default FlowSubstepTitle;

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

@@ -7,9 +7,11 @@ import { FORGOT_PASSWORD } from 'graphql/mutations/forgot-password.ee';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
+
 export default function ForgotPasswordForm() {
   const formatMessage = useFormatMessage();
   const [forgotPassword, { data, loading }] = useMutation(FORGOT_PASSWORD);
+
   const handleSubmit = async (values) => {
     await forgotPassword({
       variables: {
@@ -17,6 +19,7 @@ export default function ForgotPasswordForm() {
       },
     });
   };
+
   return (
     <Paper sx={{ px: 2, py: 4 }}>
       <Typography

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

@@ -80,6 +80,7 @@ export default function InputCreator(props) {
             disabled={disabled}
             showOptionValue={showOptionValue}
             shouldUnregister={shouldUnregister}
+            componentsProps={{ popper: { className: 'nowheel' } }}
           />
         )}
 

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

@@ -17,6 +17,7 @@ import { StepExecutionsContext } from 'contexts/StepExecutions';
 import Popper from './Popper';
 import { processStepWithExecutions } from './data';
 import { ChildrenWrapper, FakeInput, InputLabelWrapper } from './style';
+
 const PowerInput = (props) => {
   const { control } = useFormContext();
   const {
@@ -31,33 +32,41 @@ const PowerInput = (props) => {
   } = props;
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef(null);
+
   const renderElement = React.useCallback(
     (props) => <Element {...props} />,
     [],
   );
+
   const [editor] = React.useState(() => customizeEditor(createEditor()));
+
   const [showVariableSuggestions, setShowVariableSuggestions] =
     React.useState(false);
+
   const disappearSuggestionsOnShift = (event) => {
     if (event.code === 'Tab') {
       setShowVariableSuggestions(false);
     }
   };
+
   const stepsWithVariables = React.useMemo(() => {
     return processStepWithExecutions(priorStepsWithExecutions);
   }, [priorStepsWithExecutions]);
+
   const handleBlur = React.useCallback(
     (value) => {
       onBlur?.(value);
     },
     [onBlur],
   );
+
   const handleVariableSuggestionClick = React.useCallback(
     (variable) => {
       insertVariable(editor, variable, stepsWithVariables);
     },
     [stepsWithVariables],
   );
+
   return (
     <Controller
       rules={{ required }}
@@ -127,6 +136,7 @@ const PowerInput = (props) => {
                 anchorEl={editorRef.current}
                 data={stepsWithVariables}
                 onSuggestionClick={handleVariableSuggestionClick}
+                className="nowheel"
               />
 
               <FormHelperText variant="outlined">{description}</FormHelperText>

packages/web/src/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+
+export const usePrevious = (value) => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};

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

@@ -30,6 +30,7 @@ import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import useApp from 'hooks/useApp';
+import Can from 'components/Can';
 
 const ReconnectConnection = (props) => {
   const { application, onClose } = props;
@@ -92,7 +93,7 @@ export default function Application() {
     }
 
     return options;
-  }, [appKey, appConfig?.data, currentUserAbility]);
+  }, [appKey, appConfig?.data, currentUserAbility, formatMessage]);
 
   if (loading) return null;
 
@@ -118,37 +119,46 @@ export default function Application() {
                 <Route
                   path={`${URLS.FLOWS}/*`}
                   element={
-                    <ConditionalIconButton
-                      type="submit"
-                      variant="contained"
-                      color="primary"
-                      size="large"
-                      component={Link}
-                      to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
-                        appKey,
-                        connectionId,
+                    <Can I="create" a="Flow" passThrough>
+                      {(allowed) => (
+                        <ConditionalIconButton
+                          type="submit"
+                          variant="contained"
+                          color="primary"
+                          size="large"
+                          component={Link}
+                          to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
+                            appKey,
+                            connectionId,
+                          )}
+                          fullWidth
+                          icon={<AddIcon />}
+                          disabled={!allowed}
+                        >
+                          {formatMessage('app.createFlow')}
+                        </ConditionalIconButton>
                       )}
-                      fullWidth
-                      icon={<AddIcon />}
-                      disabled={!currentUserAbility.can('create', 'Flow')}
-                    >
-                      {formatMessage('app.createFlow')}
-                    </ConditionalIconButton>
+                    </Can>
                   }
                 />
 
                 <Route
                   path={`${URLS.CONNECTIONS}/*`}
                   element={
-                    <SplitButton
-                      disabled={
-                        (appConfig?.data &&
-                          !appConfig?.data?.canConnect &&
-                          !appConfig?.data?.canCustomConnect) ||
-                        connectionOptions.every(({ disabled }) => disabled)
-                      }
-                      options={connectionOptions}
-                    />
+                    <Can I="create" a="Connection" passThrough>
+                      {(allowed) => (
+                        <SplitButton
+                          disabled={
+                            !allowed ||
+                            (appConfig?.data &&
+                              !appConfig?.data?.canConnect &&
+                              !appConfig?.data?.canCustomConnect) ||
+                            connectionOptions.every(({ disabled }) => disabled)
+                          }
+                          options={connectionOptions}
+                        />
+                      )}
+                    </Can>
                   }
                 />
               </Routes>
@@ -169,17 +179,20 @@ export default function Application() {
                     label={formatMessage('app.connections')}
                     to={URLS.APP_CONNECTIONS(appKey)}
                     value={URLS.APP_CONNECTIONS_PATTERN}
-                    disabled={!app.supportsConnections}
+                    disabled={
+                      !currentUserAbility.can('read', 'Connection') ||
+                      !app.supportsConnections
+                    }
                     component={Link}
                     data-test="connections-tab"
                   />
-
                   <Tab
                     label={formatMessage('app.flows')}
                     to={URLS.APP_FLOWS(appKey)}
                     value={URLS.APP_FLOWS_PATTERN}
                     component={Link}
                     data-test="flows-tab"
+                    disabled={!currentUserAbility.can('read', 'Flow')}
                   />
                 </Tabs>
               </Box>
@@ -187,14 +200,20 @@ export default function Application() {
               <Routes>
                 <Route
                   path={`${URLS.FLOWS}/*`}
-                  element={<AppFlows appKey={appKey} />}
+                  element={
+                    <Can I="read" a="Flow">
+                      <AppFlows appKey={appKey} />
+                    </Can>
+                  }
                 />
-
                 <Route
                   path={`${URLS.CONNECTIONS}/*`}
-                  element={<AppConnections appKey={appKey} />}
+                  element={
+                    <Can I="read" a="Connection">
+                      <AppConnections appKey={appKey} />
+                    </Can>
+                  }
                 />
-
                 <Route
                   path="/"
                   element={
@@ -218,17 +237,24 @@ export default function Application() {
         <Route
           path="/connections/add"
           element={
-            <AddAppConnection onClose={goToApplicationPage} application={app} />
+            <Can I="create" a="Connection">
+              <AddAppConnection
+                onClose={goToApplicationPage}
+                application={app}
+              />
+            </Can>
           }
         />
 
         <Route
           path="/connections/:connectionId/reconnect"
           element={
-            <ReconnectConnection
-              application={app}
-              onClose={goToApplicationPage}
-            />
+            <Can I="create" a="Connection">
+              <ReconnectConnection
+                application={app}
+                onClose={goToApplicationPage}
+              />
+            </Can>
           }
         />
       </Routes>

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

@@ -84,10 +84,14 @@ export default function Applications() {
         )}
 
         {!isLoading && !hasApps && (
-          <NoResultFound
-            text={formatMessage('apps.noConnections')}
-            to={URLS.NEW_APP_CONNECTION}
-          />
+          <Can I="create" a="Connection" passThrough>
+            {(allowed) => (
+              <NoResultFound
+                text={formatMessage('apps.noConnections')}
+                {...(allowed && { to: URLS.NEW_APP_CONNECTION })}
+              />
+            )}
+          </Can>
         )}
 
         {!isLoading &&

render.yaml

@@ -3,7 +3,7 @@ services:
     name: automatisch-main
     env: docker
     dockerfilePath: ./docker/Dockerfile
-    dockerContext: ./docker
+    dockerContext: .
     repo: https://github.com/automatisch/automatisch
     autoDeploy: false
     envVars:
@@ -47,7 +47,7 @@ services:
     name: automatisch-worker
     env: docker
     dockerfilePath: ./docker/Dockerfile
-    dockerContext: ./docker
+    dockerContext: .
     repo: https://github.com/automatisch/automatisch
     autoDeploy: false
     envVars:

yarn.lock

@@ -1455,6 +1455,18 @@
     enabled "2.0.x"
     kuler "^2.0.0"
 
+"@dagrejs/dagre@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@dagrejs/dagre/-/dagre-1.1.2.tgz#5ec339979447091f48d2144deed8c70dfadae374"
+  integrity sha512-F09dphqvHsbe/6C2t2unbmpr5q41BNPEfJCdn8Z7aEBpVSy/zFQ/b4SWsweQjWNsYMDvE2ffNUN8X0CeFsEGNw==
+  dependencies:
+    "@dagrejs/graphlib" "2.2.2"
+
+"@dagrejs/graphlib@2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@dagrejs/graphlib/-/graphlib-2.2.2.tgz#74154d5cb880a23b4fae71034a09b4b5aef06feb"
+  integrity sha512-CbyGpCDKsiTg/wuk79S7Muoj8mghDGAESWGxcSyhHX5jD35vYMBZochYVFzlHxynpE9unpu6O+4ZuhrLxASsOg==
+
 "@docsearch/css@3.2.1", "@docsearch/css@^3.2.1":
   version "3.2.1"
   resolved "https://registry.npmjs.org/@docsearch/css/-/css-3.2.1.tgz"
@@ -3333,6 +3345,72 @@
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz"
   integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
 
+"@reactflow/background@11.3.12":
+  version "11.3.12"
+  resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.3.12.tgz#9c9491cce4659bae13074fcdb48ac25664879d3f"
+  integrity sha512-jBuWVb43JQy5h4WOS7G0PU8voGTEJNA+qDmx8/jyBtrjbasTesLNfQvboTGjnQYYiJco6mw5vrtQItAJDNoIqw==
+  dependencies:
+    "@reactflow/core" "11.11.2"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
+"@reactflow/controls@11.2.12":
+  version "11.2.12"
+  resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.2.12.tgz#85e2aa5de17e2af28a5ecf6a75bb9c828a20640b"
+  integrity sha512-L9F3+avFRShoprdT+5oOijm5gVsz2rqWCXBzOAgD923L1XFGIspdiHLLf8IlPGsT+mfl0GxbptZhaEeEzl1e3g==
+  dependencies:
+    "@reactflow/core" "11.11.2"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
+"@reactflow/core@11.11.2":
+  version "11.11.2"
+  resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.11.2.tgz#c62f78297bda9d2e86a12228617ec3f91fbd4b22"
+  integrity sha512-+GfgyskweL1PsgRSguUwfrT2eDotlFgaKfDLm7x0brdzzPJY2qbCzVetaxedaiJmIli3817iYbILvE9qLKwbRA==
+  dependencies:
+    "@types/d3" "^7.4.0"
+    "@types/d3-drag" "^3.0.1"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/minimap@11.7.12":
+  version "11.7.12"
+  resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.7.12.tgz#6b2fc671ee17e37ccd3bc038ae8d2121d0ce6291"
+  integrity sha512-SRDU77c2PCF54PV/MQfkz7VOW46q7V1LZNOQlXAp7dkNyAOI6R+tb9qBUtUJOvILB+TCN6pRfD9fQ+2T99bW3Q==
+  dependencies:
+    "@reactflow/core" "11.11.2"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/node-resizer@2.2.12":
+  version "2.2.12"
+  resolved "https://registry.yarnpkg.com/@reactflow/node-resizer/-/node-resizer-2.2.12.tgz#df82a7dfba883afea6a01a9c8210008a1ddba01f"
+  integrity sha512-6LHJGuI1zHyRrZHw5gGlVLIWnvVxid9WIqw8FMFSg+oF2DuS3pAPwSoZwypy7W22/gDNl9eD1Dcl/OtFtDFQ+w==
+  dependencies:
+    "@reactflow/core" "11.11.2"
+    classcat "^5.0.4"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/node-toolbar@1.3.12":
+  version "1.3.12"
+  resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.3.12.tgz#89e7aa9d34b6213bb5e64c344d4e2e3cb7af3163"
+  integrity sha512-4kJRvNna/E3y2MZW9/80wTKwkhw4pLJiz3D5eQrD13XcmojSb1rArO9CiwyrI+rMvs5gn6NlCFB4iN1F+Q+lxQ==
+  dependencies:
+    "@reactflow/core" "11.11.2"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.0"
   resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz"
@@ -3823,6 +3901,216 @@
   dependencies:
     "@types/node" "*"
 
+"@types/d3-array@*":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
+  integrity sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==
+
+"@types/d3-axis@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.6.tgz#e760e5765b8188b1defa32bc8bb6062f81e4c795"
+  integrity sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-brush@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.6.tgz#c2f4362b045d472e1b186cdbec329ba52bdaee6c"
+  integrity sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-chord@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.6.tgz#1706ca40cf7ea59a0add8f4456efff8f8775793d"
+  integrity sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==
+
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-contour@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.6.tgz#9ada3fa9c4d00e3a5093fed0356c7ab929604231"
+  integrity sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/geojson" "*"
+
+"@types/d3-delaunay@*":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz#185c1a80cc807fdda2a3fe960f7c11c4a27952e1"
+  integrity sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==
+
+"@types/d3-dispatch@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz#096efdf55eb97480e3f5621ff9a8da552f0961e7"
+  integrity sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==
+
+"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
+  integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-dsv@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.7.tgz#0a351f996dc99b37f4fa58b492c2d1c04e3dac17"
+  integrity sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==
+
+"@types/d3-ease@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
+
+"@types/d3-fetch@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.7.tgz#c04a2b4f23181aa376f30af0283dbc7b3b569980"
+  integrity sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==
+  dependencies:
+    "@types/d3-dsv" "*"
+
+"@types/d3-force@*":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.9.tgz#dd96ccefba4386fe4ff36b8e4ee4e120c21fcf29"
+  integrity sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA==
+
+"@types/d3-format@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.4.tgz#b1e4465644ddb3fdf3a263febb240a6cd616de90"
+  integrity sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==
+
+"@types/d3-geo@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.1.0.tgz#b9e56a079449174f0a2c8684a9a4df3f60522440"
+  integrity sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/d3-hierarchy@*":
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz#6023fb3b2d463229f2d680f9ac4b47466f71f17b"
+  integrity sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==
+
+"@types/d3-interpolate@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
+  integrity sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==
+
+"@types/d3-polygon@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.2.tgz#dfae54a6d35d19e76ac9565bcb32a8e54693189c"
+  integrity sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==
+
+"@types/d3-quadtree@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz#d4740b0fe35b1c58b66e1488f4e7ed02952f570f"
+  integrity sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==
+
+"@types/d3-random@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.3.tgz#ed995c71ecb15e0cd31e22d9d5d23942e3300cfb"
+  integrity sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==
+
+"@types/d3-scale-chromatic@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz#fc0db9c10e789c351f4c42d96f31f2e4df8f5644"
+  integrity sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==
+
+"@types/d3-scale@*":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
+  integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-selection@*", "@types/d3-selection@^3.0.3":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.10.tgz#98cdcf986d0986de6912b5892e7c015a95ca27fe"
+  integrity sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==
+
+"@types/d3-shape@*":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
+  integrity sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time-format@*":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.3.tgz#d6bc1e6b6a7db69cccfbbdd4c34b70632d9e9db2"
+  integrity sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==
+
+"@types/d3-time@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
+  integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
+
+"@types/d3-timer@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
+
+"@types/d3-transition@*":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.8.tgz#677707f5eed5b24c66a1918cde05963021351a8f"
+  integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
+  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
+"@types/d3@^7.4.0":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.4.3.tgz#d4550a85d08f4978faf0a4c36b848c61eaac07e2"
+  integrity sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/d3-axis" "*"
+    "@types/d3-brush" "*"
+    "@types/d3-chord" "*"
+    "@types/d3-color" "*"
+    "@types/d3-contour" "*"
+    "@types/d3-delaunay" "*"
+    "@types/d3-dispatch" "*"
+    "@types/d3-drag" "*"
+    "@types/d3-dsv" "*"
+    "@types/d3-ease" "*"
+    "@types/d3-fetch" "*"
+    "@types/d3-force" "*"
+    "@types/d3-format" "*"
+    "@types/d3-geo" "*"
+    "@types/d3-hierarchy" "*"
+    "@types/d3-interpolate" "*"
+    "@types/d3-path" "*"
+    "@types/d3-polygon" "*"
+    "@types/d3-quadtree" "*"
+    "@types/d3-random" "*"
+    "@types/d3-scale" "*"
+    "@types/d3-scale-chromatic" "*"
+    "@types/d3-selection" "*"
+    "@types/d3-shape" "*"
+    "@types/d3-time" "*"
+    "@types/d3-time-format" "*"
+    "@types/d3-timer" "*"
+    "@types/d3-transition" "*"
+    "@types/d3-zoom" "*"
+
 "@types/debug@^4.1.7":
   version "4.1.8"
   resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz"
@@ -3913,6 +4201,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/geojson@*":
+  version "7946.0.14"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
+  integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.5"
   resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
@@ -6044,6 +6337,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classcat@^5.0.3, classcat@^5.0.4:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.5.tgz#8c209f359a93ac302404a10161b501eba9c09c77"
+  integrity sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==
+
 clean-css@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz"
@@ -6829,6 +7127,68 @@ csstype@^3.1.1:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+"d3-dispatch@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3", d3-drag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-ease@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-interpolate@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+"d3-timer@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
 damerau-levenshtein@^1.0.7:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -13809,6 +14169,18 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+reactflow@^11.11.2:
+  version "11.11.2"
+  resolved "https://registry.yarnpkg.com/reactflow/-/reactflow-11.11.2.tgz#4968866a9372e6004ad1e424a2141996f0ba769a"
+  integrity sha512-o1fT3stSdhzW+SedCGNSmEvZvULZygZIMLyW67NcWNZrgwx1wuJfzLg5fuQ0Nzf389wItumZX/zP3zdaPX7lEw==
+  dependencies:
+    "@reactflow/background" "11.3.12"
+    "@reactflow/controls" "11.2.12"
+    "@reactflow/core" "11.11.2"
+    "@reactflow/minimap" "11.7.12"
+    "@reactflow/node-resizer" "2.2.12"
+    "@reactflow/node-toolbar" "1.3.12"
+
 read-cmd-shim@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz"
@@ -15977,6 +16349,11 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -16948,3 +17325,10 @@ zen-observable@0.8.15:
   version "0.8.15"
   resolved "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
+
+zustand@^4.4.1:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.2.tgz#fddbe7cac1e71d45413b3682cdb47b48034c3848"
+  integrity sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==
+  dependencies:
+    use-sync-external-store "1.2.0"