feat(asana): add create task action

feat: introduce feature flag for new flow editor

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

@@ -16,14 +16,14 @@ export default {
       clickToCopy: false,
     },
     {
-      key: 'instanceUrl',
-      label: 'Instance URL',
+      key: 'projectId',
+      label: 'Project ID',
       type: 'string',
       required: true,
       readOnly: false,
       value: null,
       placeholder: null,
-      description: null,
+      description: 'Project ID of your Appwrite project.',
       clickToCopy: false,
     },
     {
@@ -34,7 +34,28 @@ export default {
       readOnly: false,
       value: null,
       placeholder: null,
-      description: 'Changedetection API key of your account.',
+      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,
     },
   ],

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

@@ -1,7 +1,10 @@
 const setBaseUrl = ($, requestConfig) => {
   const instanceUrl = $.auth.data.instanceUrl;
+
   if (instanceUrl) {
-    requestConfig.baseURL = `${instanceUrl}/api`;
+    requestConfig.baseURL = instanceUrl;
+  } else if ($.app.apiBaseUrl) {
+    requestConfig.baseURL = $.app.apiBaseUrl;
   }
 
   return requestConfig;

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/asana/actions/create-task/index.js

@@ -0,0 +1,312 @@
+import defineAction from '../../../../helpers/define-action.js';
+import omitBy from 'lodash/omitBy.js';
+import isEmpty from 'lodash/isEmpty.js';
+
+export default defineAction({
+  name: 'Create task',
+  key: 'createTask',
+  description: 'Creates a new task.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Project',
+      key: 'projectId',
+      type: 'dropdown',
+      required: false,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listProjects',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Section',
+      key: 'sectionId',
+      type: 'dropdown',
+      required: false,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSections',
+          },
+          {
+            name: 'parameters.projectId',
+            value: '{parameters.projectId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Due date type',
+      key: 'dueDateType',
+      type: 'dropdown',
+      required: false,
+      description: "If not filled in, 'Date & time' will be assumed.",
+      options: [
+        {
+          label: 'Date & time',
+          value: 'at',
+        },
+        {
+          label: 'Date only',
+          value: 'on',
+        },
+      ],
+    },
+    {
+      label: 'Due date (date & time)',
+      key: 'dueDate',
+      type: 'string',
+      required: false,
+      description:
+        'Example due at: 2019-09-15T02:06:58.147Z, example due on: 2019-09-15',
+      variables: true,
+    },
+    {
+      label: 'Name',
+      key: 'name',
+      type: 'string',
+      required: false,
+      description: '',
+      variables: true,
+    },
+    {
+      label: 'Description',
+      key: 'description',
+      type: 'string',
+      required: false,
+      description: 'You can format the description using html.',
+      variables: true,
+    },
+    {
+      label: 'Is the description rich text?',
+      key: 'richText',
+      type: 'dropdown',
+      required: false,
+      description: '',
+      variables: true,
+      options: [
+        {
+          label: 'No',
+          value: 'false',
+        },
+        {
+          label: 'Yes',
+          value: 'true',
+        },
+      ],
+    },
+    {
+      label: 'Mark Task as complete?',
+      key: 'taskCompleted',
+      type: 'dropdown',
+      required: false,
+      description: '',
+      variables: true,
+      options: [
+        {
+          label: 'No',
+          value: 'false',
+        },
+        {
+          label: 'Yes',
+          value: 'true',
+        },
+      ],
+    },
+    {
+      label: 'Mark Task as liked?',
+      key: 'taskLiked',
+      type: 'dropdown',
+      required: false,
+      description: '',
+      variables: true,
+      options: [
+        {
+          label: 'No',
+          value: 'false',
+        },
+        {
+          label: 'Yes',
+          value: 'true',
+        },
+      ],
+    },
+    {
+      label: 'Assignee',
+      key: 'assigneeId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.workspaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listUsers',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Followers',
+      key: 'followerIds',
+      type: 'dynamic',
+      required: false,
+      description: '',
+      fields: [
+        {
+          label: 'Follower',
+          key: 'followerId',
+          type: 'dropdown',
+          required: false,
+          dependsOn: ['parameters.workspaceId'],
+          description: '',
+          variables: true,
+          source: {
+            type: 'query',
+            name: 'getDynamicData',
+            arguments: [
+              {
+                name: 'key',
+                value: 'listUsers',
+              },
+              {
+                name: 'parameters.workspaceId',
+                value: '{parameters.workspaceId}',
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      label: 'Tags',
+      key: 'tagIds',
+      type: 'dynamic',
+      required: false,
+      description: '',
+      fields: [
+        {
+          label: 'Tag',
+          key: 'tagId',
+          type: 'dropdown',
+          required: false,
+          dependsOn: ['parameters.workspaceId'],
+          description: '',
+          variables: true,
+          source: {
+            type: 'query',
+            name: 'getDynamicData',
+            arguments: [
+              {
+                name: 'key',
+                value: 'listTags',
+              },
+              {
+                name: 'parameters.workspaceId',
+                value: '{parameters.workspaceId}',
+              },
+            ],
+          },
+        },
+      ],
+    },
+  ],
+
+  async run($) {
+    const {
+      workspaceId,
+      projectId,
+      sectionId,
+      dueDateType,
+      dueDate,
+      name,
+      description,
+      richText,
+      taskCompleted,
+      taskLiked,
+      assigneeId,
+      followerIds,
+      tagIds,
+    } = $.step.parameters;
+
+    const allFollowers = followerIds
+      .map((followerId) => followerId.followerId)
+      .filter(Boolean);
+
+    const allTags = tagIds.map((tagId) => tagId.tagId).filter(Boolean);
+
+    const data = {
+      name,
+      completed: taskCompleted,
+      liked: taskLiked,
+      assignee: assigneeId,
+      assignee_section: sectionId,
+      followers: allFollowers,
+      projects: projectId,
+      tags: allTags,
+      workspace: workspaceId,
+    };
+
+    if (richText === 'true') {
+      data.html_notes = description;
+    } else {
+      data.notes = description;
+    }
+
+    if (dueDateType === 'on') {
+      data.due_on = dueDate;
+    } else {
+      data.due_at = dueDate;
+    }
+
+    const filteredData = omitBy(data, isEmpty);
+
+    const response = await $.http.post('/1.0/tasks', { data: filteredData });
+
+    $.setActionItem({
+      raw: response.data,
+    });
+  },
+});

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

@@ -0,0 +1,3 @@
+import createTask from './create-task/index.js';
+
+export default [createTask];

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

@@ -0,0 +1,8 @@
+<svg width="555" height="110" viewBox="0 0 555 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M541.011 83.513C541.347 87.339 544.407 92.209 549.709 92.209H552.811C554.014 92.209 555 91.2232 555 90.0197V21.7948H554.986C554.923 20.6454 553.974 19.7248 552.811 19.7248H543.199C542.036 19.7248 541.087 20.6454 541.023 21.7948H541.011V27.3385C535.122 20.0789 525.836 17.0657 516.525 17.0657C495.359 17.0657 478.202 34.2365 478.202 55.419C478.202 76.6027 495.359 93.7741 516.525 93.7741V93.7759C525.836 93.7759 535.983 90.1606 541.01 83.5042L541.011 83.513V83.513ZM516.562 80.3509C503.101 80.3509 492.188 69.1896 492.188 55.4192C492.188 41.6511 503.101 30.4892 516.562 30.4892C530.022 30.4892 540.934 41.6511 540.934 55.4192C540.934 69.1896 530.022 80.3509 516.562 80.3509V80.3509Z" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M466.05 85.8589L466.045 50.5554H466.046C466.046 30.655 453.501 17.2299 433.497 17.2299C423.947 17.2299 416.119 22.7561 413.355 27.5032C412.757 23.7913 410.788 19.8896 404.681 19.8896H401.569C400.365 19.8896 399.382 20.876 399.382 22.0795V83.6835C399.382 83.6853 399.382 83.69 399.382 83.6929V90.3102H399.394C399.457 91.4579 400.408 92.3796 401.57 92.3796H411.182C411.33 92.3796 411.474 92.3621 411.613 92.3347C411.677 92.3225 411.736 92.2975 411.798 92.28C411.869 92.2579 411.944 92.241 412.012 92.213C412.097 92.1775 412.175 92.1298 412.255 92.0855C412.294 92.0617 412.334 92.0448 412.372 92.0197C412.468 91.958 412.556 91.8835 412.641 91.8072C412.655 91.7932 412.672 91.7839 412.686 91.7711C412.781 91.6785 412.868 91.5766 412.946 91.4707C412.946 91.4689 412.946 91.4689 412.946 91.4689C413.187 91.1382 413.333 90.7399 413.357 90.3102H413.369V50.0081C413.369 39.3201 422.028 30.655 432.709 30.655C443.389 30.655 452.047 39.3201 452.047 50.0081L452.056 83.6952L452.058 83.6835C452.058 83.7132 452.063 83.7441 452.063 83.7761V90.3102H452.076C452.139 91.4579 453.089 92.3796 454.251 92.3796H463.864C464.012 92.3796 464.156 92.3621 464.295 92.3347C464.352 92.3243 464.404 92.3015 464.46 92.2858C464.538 92.2631 464.619 92.2433 464.695 92.213C464.773 92.1804 464.845 92.135 464.92 92.0931C464.965 92.0675 465.013 92.0489 465.056 92.0197C465.145 91.9615 465.226 91.8911 465.306 91.8212C465.326 91.8026 465.349 91.7886 465.368 91.7694C465.459 91.6814 465.54 91.5865 465.615 91.487C465.62 91.4794 465.626 91.4736 465.632 91.466C465.868 91.1382 466.013 90.7428 466.038 90.3161C466.038 90.3131 466.039 90.3102 466.039 90.3102H466.052V85.86L466.05 85.8589" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M365.94 83.5127C366.276 87.3387 369.336 92.2088 374.638 92.2088H377.74C378.943 92.2088 379.927 91.223 379.927 90.0195V21.7945H379.915C379.852 20.6452 378.901 19.7246 377.74 19.7246H368.128C366.965 19.7246 366.016 20.6452 365.951 21.7945H365.94V27.3382C360.05 20.0786 350.764 17.0654 341.453 17.0654C320.288 17.0654 303.131 34.2362 303.131 55.4188C303.131 76.6025 320.288 93.7739 341.453 93.7739V93.7756C350.764 93.7756 360.912 90.1604 365.939 83.504L365.94 83.5127V83.5127ZM341.49 80.3506C328.03 80.3506 317.117 69.1893 317.117 55.4189C317.117 41.6509 328.03 30.489 341.49 30.489C354.952 30.489 365.862 41.6509 365.862 55.4189C365.862 69.1893 354.952 80.3506 341.49 80.3506V80.3506Z" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M246.284 73.7415C252.702 78.1905 259.706 80.3513 266.437 80.3513C272.85 80.3513 279.479 77.0242 279.479 71.2337C279.479 63.5024 265.033 62.2995 255.957 59.2124C246.88 56.1252 239.061 49.7437 239.061 39.4092C239.061 23.5956 253.14 17.0645 266.281 17.0645C274.607 17.0645 283.198 19.8121 288.767 23.7482C290.686 25.2027 289.517 26.8726 289.517 26.8726L284.201 34.4716C283.603 35.3276 282.559 36.067 281.059 35.1407C279.559 34.2149 274.298 30.4884 266.281 30.4884C258.263 30.4884 253.434 34.1939 253.434 38.7868C253.434 44.2943 259.711 46.0266 267.063 47.9038C279.875 51.36 293.852 55.5144 293.852 71.2337C293.852 85.1665 280.829 93.777 266.437 93.777C255.53 93.777 246.244 90.6654 238.456 84.9459C236.834 83.3208 237.967 81.8121 237.967 81.8121L243.257 74.2515C244.334 72.8378 245.691 73.331 246.284 73.7415" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.331 83.5127C209.668 87.3387 212.728 92.2088 218.03 92.2088H221.132C222.334 92.2088 223.32 91.223 223.32 90.0195V21.7945H223.307C223.244 20.6452 222.294 19.7246 221.132 19.7246H211.519C210.357 19.7246 209.408 20.6452 209.343 21.7945H209.331V27.3382C203.442 20.0786 194.156 17.0654 184.845 17.0654C163.68 17.0654 146.522 34.2362 146.522 55.4188C146.522 76.6025 163.68 93.7739 184.845 93.7739V93.7756C194.156 93.7756 204.304 90.1604 209.33 83.504L209.331 83.5127V83.5127ZM184.883 80.3506C171.422 80.3506 160.509 69.1893 160.509 55.4189C160.509 41.6509 171.422 30.489 184.883 30.489C198.343 30.489 209.255 41.6509 209.255 55.4189C209.255 69.1893 198.343 80.3506 184.883 80.3506V80.3506Z" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.794 58.0274C78.5507 58.0274 67.0041 69.5741 67.0041 83.8185C67.0041 98.0618 78.5507 109.608 92.794 109.608C107.037 109.608 118.584 98.0618 118.584 83.8185C118.584 69.5741 107.037 58.0274 92.794 58.0274V58.0274ZM25.7899 58.0298C11.5466 58.0298 0 69.5741 0 83.8186C0 98.0618 11.5466 109.608 25.7899 109.608C40.0338 109.608 51.581 98.0618 51.581 83.8186C51.581 69.5741 40.0338 58.0298 25.7899 58.0298V58.0298ZM85.0815 25.7894C85.0815 40.0338 73.5354 51.5816 59.2921 51.5816C45.0483 51.5816 33.5022 40.0338 33.5022 25.7894C33.5022 11.5478 45.0483 0 59.2921 0C73.5354 0 85.0815 11.5478 85.0815 25.7894V25.7894Z" fill="#FF584A"/>
+</svg>

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

@@ -0,0 +1,25 @@
+import { URLSearchParams } from 'url';
+import crypto from 'crypto';
+
+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 searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId,
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    //scope: authScope.join(' '),
+    state,
+  });
+
+  const url = `https://app.asana.com/-/oauth_authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+    originalState: state,
+  });
+}

packages/backend/src/apps/asana/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/asana/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in Asana, 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/asana/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.data.email;
+};
+
+export default isStillVerified;

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

@@ -0,0 +1,37 @@
+import { URLSearchParams } from 'node:url';
+
+const refreshToken = async ($) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+
+  const params = new URLSearchParams({
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    redirect_uri: redirectUri,
+    grant_type: 'refresh_token',
+    refresh_token: $.auth.data.refreshToken,
+  });
+
+  const { data } = await $.http.post(
+    'https://app.asana.com/-/oauth_token',
+    params.toString(),
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      additionalProperties: {
+        skipAddingAuthHeader: true,
+      },
+    }
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    expiresIn: data.expires_in,
+    tokenType: data.token_type,
+  });
+};
+
+export default refreshToken;

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

@@ -0,0 +1,39 @@
+const verifyCredentials = async ($) => {
+  if ($.auth.data.originalState !== $.auth.data.state) {
+    throw new Error("The 'state' parameter does not match.");
+  }
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+  const { data } = await $.http.post(
+    'https://app.asana.com/-/oauth_token',
+    {
+      client_id: $.auth.data.clientId,
+      client_secret: $.auth.data.clientSecret,
+      code: $.auth.data.code,
+      grant_type: 'authorization_code',
+      redirect_uri: redirectUri,
+    },
+    {
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+    }
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    tokenType: data.token_type,
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    scope: $.auth.data.scope,
+    id: data.data.id,
+    gid: data.data.gid,
+    expiresIn: data.expires_in,
+    refreshToken: data.refresh_token,
+    screenName: `${data.data.name} - ${data.data.email}`,
+  });
+};
+
+export default verifyCredentials;

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

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

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

@@ -0,0 +1,8 @@
+const getCurrentUser = async ($) => {
+  const { data: currentUser } = await $.http.get(
+    `/1.0/users/${$.auth.data.gid}`
+  );
+  return currentUser;
+};
+
+export default getCurrentUser;

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

@@ -0,0 +1,15 @@
+import listProjects from './list-projects/index.js';
+import listSections from './list-sections/index.js';
+import listTags from './list-tags/index.js';
+import listTeams from './list-teams/index.js';
+import listUsers from './list-users/index.js';
+import listWorkspaces from './list-workspaces/index.js';
+
+export default [
+  listProjects,
+  listSections,
+  listTags,
+  listTeams,
+  listUsers,
+  listWorkspaces,
+];

packages/backend/src/apps/asana/dynamic-data/list-projects/index.js

@@ -0,0 +1,42 @@
+export default {
+  name: 'List projects',
+  key: 'listProjects',
+
+  async run($) {
+    const projects = {
+      data: [],
+    };
+    const workspaceId = $.step.parameters.workspaceId;
+
+    if (!workspaceId) {
+      return projects;
+    }
+
+    const params = {
+      limit: 100,
+      offset: undefined,
+      workspace: workspaceId,
+    };
+
+    do {
+      const {
+        data: { data, next_page },
+      } = await $.http.get('/1.0/projects', {
+        params,
+      });
+
+      params.offset = next_page?.offset;
+
+      if (data) {
+        for (const project of data) {
+          projects.data.push({
+            value: project.gid,
+            name: project.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return projects;
+  },
+};

packages/backend/src/apps/asana/dynamic-data/list-sections/index.js

@@ -0,0 +1,41 @@
+export default {
+  name: 'List sections',
+  key: 'listSections',
+
+  async run($) {
+    const sections = {
+      data: [],
+    };
+    const projectId = $.step.parameters.projectId;
+
+    if (!projectId) {
+      return sections;
+    }
+
+    const params = {
+      limit: 100,
+      offset: undefined,
+    };
+
+    do {
+      const {
+        data: { data, next_page },
+      } = await $.http.get(`/1.0/projects/${projectId}/sections`, {
+        params,
+      });
+
+      params.offset = next_page?.offset;
+
+      if (data) {
+        for (const section of data) {
+          sections.data.push({
+            value: section.gid,
+            name: section.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return sections;
+  },
+};

packages/backend/src/apps/asana/dynamic-data/list-tags/index.js

@@ -0,0 +1,42 @@
+export default {
+  name: 'List tags',
+  key: 'listTags',
+
+  async run($) {
+    const tags = {
+      data: [],
+    };
+    const workspaceId = $.step.parameters.workspaceId;
+
+    if (!workspaceId) {
+      return workspaceId;
+    }
+
+    const params = {
+      limit: 100,
+      offset: undefined,
+      workspace: workspaceId,
+    };
+
+    do {
+      const {
+        data: { data, next_page },
+      } = await $.http.get('/1.0/tags', {
+        params,
+      });
+
+      params.offset = next_page?.offset;
+
+      if (data) {
+        for (const tag of data) {
+          tags.data.push({
+            value: tag.gid,
+            name: tag.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return tags;
+  },
+};

packages/backend/src/apps/asana/dynamic-data/list-teams/index.js

@@ -0,0 +1,42 @@
+export default {
+  name: 'List teams',
+  key: 'listTeams',
+
+  async run($) {
+    const teams = {
+      data: [],
+    };
+    const workspaceId = $.step.parameters.workspaceId;
+
+    if (!workspaceId) {
+      return workspaceId;
+    }
+
+    const params = {
+      limit: 100,
+      offset: undefined,
+      workspace: workspaceId,
+    };
+
+    do {
+      const {
+        data: { data, next_page },
+      } = await $.http.get('/1.0/teams', {
+        params,
+      });
+
+      params.offset = next_page?.offset;
+
+      if (data) {
+        for (const team of data) {
+          teams.data.push({
+            value: team.gid,
+            name: team.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return teams;
+  },
+};

packages/backend/src/apps/asana/dynamic-data/list-users/index.js

@@ -0,0 +1,42 @@
+export default {
+  name: 'List users',
+  key: 'listUsers',
+
+  async run($) {
+    const users = {
+      data: [],
+    };
+    const workspaceId = $.step.parameters.workspaceId;
+
+    if (!workspaceId) {
+      return workspaceId;
+    }
+
+    const params = {
+      limit: 100,
+      offset: undefined,
+      workspace: workspaceId,
+    };
+
+    do {
+      const {
+        data: { data, next_page },
+      } = await $.http.get('/1.0/users', {
+        params,
+      });
+
+      params.offset = next_page?.offset;
+
+      if (data) {
+        for (const user of data) {
+          users.data.push({
+            value: user.gid,
+            name: user.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return users;
+  },
+};

packages/backend/src/apps/asana/dynamic-data/list-workspaces/index.js

@@ -0,0 +1,34 @@
+export default {
+  name: 'List workspaces',
+  key: 'listWorkspaces',
+
+  async run($) {
+    const workspaces = {
+      data: [],
+    };
+
+    const params = {
+      limit: 100,
+      offset: undefined,
+    };
+
+    do {
+      const {
+        data: { data, next_page },
+      } = await $.http.get('/1.0/workspaces', { params });
+
+      params.offset = next_page?.offset;
+
+      if (data) {
+        for (const workspace of data) {
+          workspaces.data.push({
+            value: workspace.gid,
+            name: workspace.name,
+          });
+        }
+      }
+    } while (params.offset);
+
+    return workspaces;
+  },
+};

packages/backend/src/apps/asana/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 dynamicData from './dynamic-data/index.js';
+import triggers from './triggers/index.js';
+import actions from './actions/index.js';
+
+export default defineApp({
+  name: 'Asana',
+  key: 'asana',
+  baseUrl: 'https://asana.com',
+  apiBaseUrl: 'https://app.asana.com/api',
+  iconUrl: '{BASE_URL}/apps/asana/assets/favicon.svg',
+  authDocUrl: '{DOCS_URL}/apps/asana/connection',
+  primaryColor: '690031',
+  supportsConnections: true,
+  beforeRequest: [addAuthHeader],
+  auth,
+  dynamicData,
+  triggers,
+  actions,
+});

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

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

packages/backend/src/apps/asana/triggers/new-projects/index.js

@@ -0,0 +1,59 @@
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New projects',
+  key: 'newProjects',
+  pollInterval: 15,
+  description: 'Triggers when a new project is created.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const workspaceId = $.step.parameters.workspaceId;
+
+    const params = {
+      limit: 100,
+      offset: undefined,
+      workspace: workspaceId,
+    };
+
+    do {
+      const {
+        data: { data, next_page },
+      } = await $.http.get('/1.0/projects', {
+        params,
+      });
+
+      params.offset = next_page?.offset;
+
+      if (data) {
+        for (const project of data) {
+          $.pushTriggerItem({
+            raw: project,
+            meta: {
+              internalId: project.gid,
+            },
+          });
+        }
+      }
+    } while (params.offset);
+  },
+});

packages/backend/src/apps/changedetection/actions/create-watch/index.js

@@ -1,29 +0,0 @@
-import defineAction from '../../../../helpers/define-action.js';
-
-export default defineAction({
-  name: 'Create a watch',
-  key: 'createWatch',
-  description: 'Creates a new change detection watch for a specific website.',
-  arguments: [
-    {
-      label: 'URL',
-      key: 'url',
-      type: 'string',
-      required: true,
-      variables: true,
-      description: 'Url you want to monitor',
-    },
-  ],
-
-  async run($) {
-    const url = $.step.parameters.url;
-
-    const body = {
-      url,
-    };
-
-    const response = await $.http.post('/v1/watch', body);
-
-    $.setActionItem({ raw: response.data });
-  },
-});

packages/backend/src/apps/changedetection/actions/delete-watch/index.js

@@ -1,29 +0,0 @@
-import defineAction from '../../../../helpers/define-action.js';
-
-export default defineAction({
-  name: 'Delete a watch',
-  key: 'deleteWatch',
-  description: 'Deletes a change detection watch.',
-  arguments: [
-    {
-      label: 'Watch ID',
-      key: 'watchId',
-      type: 'string',
-      required: true,
-      variables: true,
-      description: 'Watch id you want to delete',
-    },
-  ],
-
-  async run($) {
-    const watchId = $.step.parameters.watchId;
-
-    await $.http.delete(`/v1/watch/${watchId}`);
-
-    $.setActionItem({
-      raw: {
-        result: 'successful',
-      },
-    });
-  },
-});

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

@@ -1,4 +0,0 @@
-import createWatch from './create-watch/index.js';
-import deleteWatch from './delete-watch/index.js';
-
-export default [createWatch, deleteWatch];

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

@@ -1,10 +0,0 @@
-const verifyCredentials = async ($) => {
-  await $.http.get('/v1/systeminfo');
-
-  await $.auth.set({
-    screenName: $.auth.data.screenName,
-    apiKey: $.auth.data.apiKey,
-  });
-};
-
-export default verifyCredentials;

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

@@ -1,9 +0,0 @@
-const addAuthHeader = ($, requestConfig) => {
-  if ($.auth.data?.apiKey) {
-    requestConfig.headers['x-api-key'] = $.auth.data.apiKey;
-  }
-
-  return requestConfig;
-};
-
-export default addAuthHeader;

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

@@ -1,19 +0,0 @@
-import defineApp from '../../helpers/define-app.js';
-import addAuthHeader from './common/add-auth-header.js';
-import auth from './auth/index.js';
-import setBaseUrl from './common/set-base-url.js';
-import actions from './actions/index.js';
-
-export default defineApp({
-  name: 'Changedetection',
-  key: 'changedetection',
-  iconUrl: '{BASE_URL}/apps/changedetection/assets/favicon.svg',
-  authDocUrl: '{DOCS_URL}/apps/changedetection/connection',
-  supportsConnections: true,
-  baseUrl: 'https://changedetection.io',
-  apiBaseUrl: '',
-  primaryColor: '3056d3',
-  beforeRequest: [setBaseUrl, addAuthHeader],
-  auth,
-  actions,
-});

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/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/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/docs/pages/.vitepress/config.js

@@ -26,12 +26,40 @@ 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: 'Asana',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Triggers', link: '/apps/asana/triggers' },
+            { text: 'Actions', link: '/apps/asana/actions' },
+            { text: 'Connection', link: '/apps/asana/connection' },
+          ],
+        },
         {
           text: 'Carbone',
           collapsible: true,
@@ -41,14 +69,6 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/carbone/connection' },
           ],
         },
-        {
-          text: 'Changedetection',
-          collapsible: true,
-          collapsed: true,
-          items: [
-            { text: 'Connection', link: '/apps/changedetection/connection' },
-          ],
-        },
         {
           text: 'Datastore',
           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/apps/asana/actions.md

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/asana.svg
+items:
+  - name: Create task
+    desc: Creates a new task.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

@@ -0,0 +1,17 @@
+# Asana
+
+:::info
+This page explains the steps you need to follow to set up the Asana
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [Asana developer console](https://app.asana.com/0/my-apps) to create a project.
+2. Click on the **Create new app** in **My Apps**, and click on the **New Project** button.
+3. Fill the form for your project and click on the **Create app** button.
+4. Go to **Manage distrubition** and select **Any workspace** option in **Choose a distribution method** and save it.
+5. Go to **OAuth** tab from left panel and click on the **+Add redirect URL** button.
+6. Copy **OAuth Redirect URL** from Automatisch to the redirect url field, and click on the **Add** button.
+7. Copy the **Your Client ID** value on the same page to the `Client ID` field on Automatisch.
+8. Copy the **Your Client secret** value on the same page to the `Client Secret` field on Automatisch.
+9. Click **Submit** button on Automatisch.
+10. Congrats! Start using your new Asana connection within the flows.

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

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

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

@@ -1,14 +0,0 @@
----
-favicon: /favicons/changedetection.svg
-items:
-  - name: Create a watch
-    desc: Creates a new change detection watch for a specific website.
-  - name: Delete a watch
-    desc: Deletes a change detection watch.
----
-
-<script setup>
-  import CustomListing from '../../components/CustomListing.vue'
-</script>
-
-<CustomListing />

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

@@ -1,14 +0,0 @@
-# Changedetection
-
-:::info
-This page explains the steps you need to follow to set up the Changedetection
-connection in Automatisch. If any of the steps are outdated, please let us know!
-:::
-
-1. Go to your Changedetection admin panel.
-2. Click on the **Settings** button.
-3. Click on the **API** tab.
-4. Copy **API key** from the page to the `API Key` field on Automatisch.
-5. Add your Instance URL in the **Instance URL** field on Automatisch.
-6. Write any screen name to be displayed in Automatisch.
-7. Now, you can start using the Changedetection connection with Automatisch.

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

@@ -2,8 +2,10 @@
 
 The following integrations are currently supported by Automatisch.
 
+- [Airtable](/apps/airtable/actions)
+- [Appwrite](/apps/appwrite/triggers)
+- [Asana](/apps/asana/triggers)
 - [Carbone](/apps/carbone/actions)
-- [Changedetection](/apps/changedetection/actions)
 - [Datastore](/apps/datastore/actions)
 - [DeepL](/apps/deepl/actions)
 - [Delay](/apps/delay/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/docs/pages/public/favicons/asana.svg

@@ -0,0 +1,8 @@
+<svg width="555" height="110" viewBox="0 0 555 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M541.011 83.513C541.347 87.339 544.407 92.209 549.709 92.209H552.811C554.014 92.209 555 91.2232 555 90.0197V21.7948H554.986C554.923 20.6454 553.974 19.7248 552.811 19.7248H543.199C542.036 19.7248 541.087 20.6454 541.023 21.7948H541.011V27.3385C535.122 20.0789 525.836 17.0657 516.525 17.0657C495.359 17.0657 478.202 34.2365 478.202 55.419C478.202 76.6027 495.359 93.7741 516.525 93.7741V93.7759C525.836 93.7759 535.983 90.1606 541.01 83.5042L541.011 83.513V83.513ZM516.562 80.3509C503.101 80.3509 492.188 69.1896 492.188 55.4192C492.188 41.6511 503.101 30.4892 516.562 30.4892C530.022 30.4892 540.934 41.6511 540.934 55.4192C540.934 69.1896 530.022 80.3509 516.562 80.3509V80.3509Z" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M466.05 85.8589L466.045 50.5554H466.046C466.046 30.655 453.501 17.2299 433.497 17.2299C423.947 17.2299 416.119 22.7561 413.355 27.5032C412.757 23.7913 410.788 19.8896 404.681 19.8896H401.569C400.365 19.8896 399.382 20.876 399.382 22.0795V83.6835C399.382 83.6853 399.382 83.69 399.382 83.6929V90.3102H399.394C399.457 91.4579 400.408 92.3796 401.57 92.3796H411.182C411.33 92.3796 411.474 92.3621 411.613 92.3347C411.677 92.3225 411.736 92.2975 411.798 92.28C411.869 92.2579 411.944 92.241 412.012 92.213C412.097 92.1775 412.175 92.1298 412.255 92.0855C412.294 92.0617 412.334 92.0448 412.372 92.0197C412.468 91.958 412.556 91.8835 412.641 91.8072C412.655 91.7932 412.672 91.7839 412.686 91.7711C412.781 91.6785 412.868 91.5766 412.946 91.4707C412.946 91.4689 412.946 91.4689 412.946 91.4689C413.187 91.1382 413.333 90.7399 413.357 90.3102H413.369V50.0081C413.369 39.3201 422.028 30.655 432.709 30.655C443.389 30.655 452.047 39.3201 452.047 50.0081L452.056 83.6952L452.058 83.6835C452.058 83.7132 452.063 83.7441 452.063 83.7761V90.3102H452.076C452.139 91.4579 453.089 92.3796 454.251 92.3796H463.864C464.012 92.3796 464.156 92.3621 464.295 92.3347C464.352 92.3243 464.404 92.3015 464.46 92.2858C464.538 92.2631 464.619 92.2433 464.695 92.213C464.773 92.1804 464.845 92.135 464.92 92.0931C464.965 92.0675 465.013 92.0489 465.056 92.0197C465.145 91.9615 465.226 91.8911 465.306 91.8212C465.326 91.8026 465.349 91.7886 465.368 91.7694C465.459 91.6814 465.54 91.5865 465.615 91.487C465.62 91.4794 465.626 91.4736 465.632 91.466C465.868 91.1382 466.013 90.7428 466.038 90.3161C466.038 90.3131 466.039 90.3102 466.039 90.3102H466.052V85.86L466.05 85.8589" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M365.94 83.5127C366.276 87.3387 369.336 92.2088 374.638 92.2088H377.74C378.943 92.2088 379.927 91.223 379.927 90.0195V21.7945H379.915C379.852 20.6452 378.901 19.7246 377.74 19.7246H368.128C366.965 19.7246 366.016 20.6452 365.951 21.7945H365.94V27.3382C360.05 20.0786 350.764 17.0654 341.453 17.0654C320.288 17.0654 303.131 34.2362 303.131 55.4188C303.131 76.6025 320.288 93.7739 341.453 93.7739V93.7756C350.764 93.7756 360.912 90.1604 365.939 83.504L365.94 83.5127V83.5127ZM341.49 80.3506C328.03 80.3506 317.117 69.1893 317.117 55.4189C317.117 41.6509 328.03 30.489 341.49 30.489C354.952 30.489 365.862 41.6509 365.862 55.4189C365.862 69.1893 354.952 80.3506 341.49 80.3506V80.3506Z" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M246.284 73.7415C252.702 78.1905 259.706 80.3513 266.437 80.3513C272.85 80.3513 279.479 77.0242 279.479 71.2337C279.479 63.5024 265.033 62.2995 255.957 59.2124C246.88 56.1252 239.061 49.7437 239.061 39.4092C239.061 23.5956 253.14 17.0645 266.281 17.0645C274.607 17.0645 283.198 19.8121 288.767 23.7482C290.686 25.2027 289.517 26.8726 289.517 26.8726L284.201 34.4716C283.603 35.3276 282.559 36.067 281.059 35.1407C279.559 34.2149 274.298 30.4884 266.281 30.4884C258.263 30.4884 253.434 34.1939 253.434 38.7868C253.434 44.2943 259.711 46.0266 267.063 47.9038C279.875 51.36 293.852 55.5144 293.852 71.2337C293.852 85.1665 280.829 93.777 266.437 93.777C255.53 93.777 246.244 90.6654 238.456 84.9459C236.834 83.3208 237.967 81.8121 237.967 81.8121L243.257 74.2515C244.334 72.8378 245.691 73.331 246.284 73.7415" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M209.331 83.5127C209.668 87.3387 212.728 92.2088 218.03 92.2088H221.132C222.334 92.2088 223.32 91.223 223.32 90.0195V21.7945H223.307C223.244 20.6452 222.294 19.7246 221.132 19.7246H211.519C210.357 19.7246 209.408 20.6452 209.343 21.7945H209.331V27.3382C203.442 20.0786 194.156 17.0654 184.845 17.0654C163.68 17.0654 146.522 34.2362 146.522 55.4188C146.522 76.6025 163.68 93.7739 184.845 93.7739V93.7756C194.156 93.7756 204.304 90.1604 209.33 83.504L209.331 83.5127V83.5127ZM184.883 80.3506C171.422 80.3506 160.509 69.1893 160.509 55.4189C160.509 41.6509 171.422 30.489 184.883 30.489C198.343 30.489 209.255 41.6509 209.255 55.4189C209.255 69.1893 198.343 80.3506 184.883 80.3506V80.3506Z" fill="#690031"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.794 58.0274C78.5507 58.0274 67.0041 69.5741 67.0041 83.8185C67.0041 98.0618 78.5507 109.608 92.794 109.608C107.037 109.608 118.584 98.0618 118.584 83.8185C118.584 69.5741 107.037 58.0274 92.794 58.0274V58.0274ZM25.7899 58.0298C11.5466 58.0298 0 69.5741 0 83.8186C0 98.0618 11.5466 109.608 25.7899 109.608C40.0338 109.608 51.581 98.0618 51.581 83.8186C51.581 69.5741 40.0338 58.0298 25.7899 58.0298V58.0298ZM85.0815 25.7894C85.0815 40.0338 73.5354 51.5816 59.2921 51.5816C45.0483 51.5816 33.5022 40.0338 33.5022 25.7894C33.5022 11.5478 45.0483 0 59.2921 0C73.5354 0 85.0815 11.5478 85.0815 25.7894V25.7894Z" fill="#FF584A"/>
+</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/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/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/Edge/Edge.jsx

@@ -0,0 +1,79 @@
+import { EdgeLabelRenderer, getStraightPath } from 'reactflow';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import { useMutation } from '@apollo/client';
+import { CREATE_STEP } from 'graphql/mutations/create-step';
+import { useQueryClient } from '@tanstack/react-query';
+import PropTypes from 'prop-types';
+
+export default function Edge({
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  source,
+  data: { flowId, setCurrentStepId, flowActive, layouted },
+}) {
+  const [createStep, { loading: creationInProgress }] =
+    useMutation(CREATE_STEP);
+  const queryClient = useQueryClient();
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  const addStep = async (previousStepId) => {
+    const mutationInput = {
+      previousStep: {
+        id: previousStepId,
+      },
+      flow: {
+        id: flowId,
+      },
+    };
+
+    const createdStep = await createStep({
+      variables: { input: mutationInput },
+    });
+
+    const createdStepId = createdStep.data.createStep.id;
+    setCurrentStepId(createdStepId);
+    await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
+  };
+
+  return (
+    <>
+      <EdgeLabelRenderer>
+        <IconButton
+          onClick={() => addStep(source)}
+          color="primary"
+          sx={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            pointerEvents: 'all',
+            visibility: layouted ? 'visible' : 'hidden',
+          }}
+          disabled={creationInProgress || flowActive}
+        >
+          <AddIcon />
+        </IconButton>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+Edge.propTypes = {
+  sourceX: PropTypes.number.isRequired,
+  sourceY: PropTypes.number.isRequired,
+  targetX: PropTypes.number.isRequired,
+  targetY: PropTypes.number.isRequired,
+  source: PropTypes.string.isRequired,
+  data: PropTypes.shape({
+    flowId: PropTypes.string.isRequired,
+    setCurrentStepId: PropTypes.func.isRequired,
+    flowActive: PropTypes.bool.isRequired,
+    layouted: PropTypes.bool,
+  }).isRequired,
+};

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

@@ -0,0 +1,258 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useMutation } from '@apollo/client';
+import { useQueryClient } from '@tanstack/react-query';
+import { FlowPropType } from 'propTypes/propTypes';
+import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'reactflow';
+import 'reactflow/dist/style.css';
+import { Stack } from '@mui/material';
+import { UPDATE_STEP } from 'graphql/mutations/update-step';
+
+import { useAutoLayout } from './useAutoLayout';
+import { useScrollBoundries } from './useScrollBoundries';
+import FlowStepNode from './FlowStepNode/FlowStepNode';
+import Edge from './Edge/Edge';
+import InvisibleNode from './InvisibleNode/InvisibleNode';
+import { EditorWrapper } from './style';
+
+const nodeTypes = { flowStep: FlowStepNode, invisible: InvisibleNode };
+
+const edgeTypes = {
+  addNodeEdge: Edge,
+};
+
+const INVISIBLE_NODE_ID = 'invisible-node';
+
+const generateEdgeId = (sourceId, targetId) => `${sourceId}-${targetId}`;
+
+const EditorNew = ({ flow }) => {
+  const [triggerStep] = flow.steps;
+  const [currentStepId, setCurrentStepId] = useState(triggerStep.id);
+
+  const [updateStep] = useMutation(UPDATE_STEP);
+  const queryClient = useQueryClient();
+
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  useAutoLayout();
+  useScrollBoundries();
+
+  const onConnect = useCallback(
+    (params) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges],
+  );
+
+  const openNextStep = useCallback(
+    (nextStep) => () => {
+      setCurrentStepId(nextStep?.id);
+    },
+    [],
+  );
+
+  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;
+      }
+
+      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 generateEdges = useCallback((flow, prevEdges) => {
+    const newEdges =
+      flow.steps
+        .map((step, i) => {
+          const sourceId = step.id;
+          const targetId = flow.steps[i + 1]?.id;
+          const edge = prevEdges?.find(
+            (edge) => edge.id === generateEdgeId(sourceId, targetId),
+          );
+          if (targetId) {
+            return {
+              id: generateEdgeId(sourceId, targetId),
+              source: sourceId,
+              target: targetId,
+              type: 'addNodeEdge',
+              data: {
+                flowId: flow.id,
+                flowActive: flow.active,
+                setCurrentStepId,
+                layouted: !!edge,
+              },
+            };
+          }
+        })
+        .filter((edge) => !!edge) || [];
+
+    const lastStep = flow.steps[flow.steps.length - 1];
+
+    return lastStep
+      ? [
+          ...newEdges,
+          {
+            id: generateEdgeId(lastStep.id, INVISIBLE_NODE_ID),
+            source: lastStep.id,
+            target: INVISIBLE_NODE_ID,
+            type: 'addNodeEdge',
+            data: {
+              flowId: flow.id,
+              flowActive: flow.active,
+              setCurrentStepId,
+              layouted: false,
+            },
+          },
+        ]
+      : newEdges;
+  }, []);
+
+  const generateNodes = useCallback(
+    (flow, prevNodes) => {
+      const newNodes = flow.steps.map((step, index) => {
+        const node = prevNodes?.find(({ id }) => id === step.id);
+        const collapsed = currentStepId !== step.id;
+        return {
+          id: step.id,
+          type: 'flowStep',
+          position: {
+            x: node ? node.position.x : 0,
+            y: node ? node.position.y : 0,
+          },
+          zIndex: collapsed ? 0 : 1,
+          data: {
+            step,
+            index: index,
+            flowId: flow.id,
+            collapsed,
+            openNextStep: openNextStep(flow.steps[index + 1]),
+            onOpen: () => setCurrentStepId(step.id),
+            onClose: () => setCurrentStepId(null),
+            onChange: onStepChange,
+            layouted: !!node,
+          },
+        };
+      });
+
+      const prevInvisibleNode = nodes.find((node) => node.type === 'invisible');
+
+      return [
+        ...newNodes,
+        {
+          id: INVISIBLE_NODE_ID,
+          type: 'invisible',
+          position: {
+            x: prevInvisibleNode ? prevInvisibleNode.position.x : 0,
+            y: prevInvisibleNode ? prevInvisibleNode.position.y : 0,
+          },
+        },
+      ];
+    },
+    [currentStepId, nodes, onStepChange, openNextStep],
+  );
+
+  const updateNodesData = useCallback(
+    (steps) => {
+      setNodes((nodes) =>
+        nodes.map((node) => {
+          const step = steps.find((step) => step.id === node.id);
+          if (step) {
+            return { ...node, data: { ...node.data, step: { ...step } } };
+          }
+          return node;
+        }),
+      );
+    },
+    [setNodes],
+  );
+
+  const updateEdgesData = useCallback(
+    (flow) => {
+      setEdges((edges) =>
+        edges.map((edge) => {
+          return {
+            ...edge,
+            data: { ...edge.data, flowId: flow.id, flowActive: flow.active },
+          };
+        }),
+      );
+    },
+    [setEdges],
+  );
+
+  useEffect(() => {
+    setNodes(
+      nodes.map((node) => {
+        if (node.type === 'flowStep') {
+          const collapsed = currentStepId !== node.data.step.id;
+          return {
+            ...node,
+            zIndex: collapsed ? 0 : 1,
+            data: {
+              ...node.data,
+              collapsed,
+            },
+          };
+        }
+        return node;
+      }),
+    );
+  }, [currentStepId]);
+
+  useEffect(() => {
+    if (flow.steps.length + 1 !== nodes.length) {
+      const newNodes = generateNodes(flow, nodes);
+      const newEdges = generateEdges(flow, edges);
+
+      setNodes(newNodes);
+      setEdges(newEdges);
+    } else {
+      updateNodesData(flow.steps);
+      updateEdgesData(flow);
+    }
+  }, [flow]);
+
+  return (
+    <EditorWrapper direction="column">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        panOnScroll
+        panOnScrollMode="vertical"
+        panOnDrag={false}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+        panActivationKeyCode={null}
+      />
+    </EditorWrapper>
+  );
+};
+
+EditorNew.propTypes = {
+  flow: FlowPropType.isRequired,
+};
+
+export default EditorNew;

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

@@ -0,0 +1,72 @@
+import { Handle, Position } from 'reactflow';
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+
+import FlowStep from 'components/FlowStep';
+import { StepPropType } from 'propTypes/propTypes';
+
+import { NodeWrapper, NodeInnerWrapper } from './style.js';
+
+function FlowStepNode({
+  data: {
+    step,
+    index,
+    flowId,
+    collapsed,
+    openNextStep,
+    onOpen,
+    onClose,
+    onChange,
+    layouted,
+  },
+}) {
+  return (
+    <NodeWrapper
+      className="nodrag"
+      sx={{
+        visibility: layouted ? 'visible' : 'hidden',
+      }}
+    >
+      <NodeInnerWrapper>
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+        <FlowStep
+          step={step}
+          index={index + 1}
+          collapsed={collapsed}
+          onOpen={onOpen}
+          onClose={onClose}
+          onChange={onChange}
+          flowId={flowId}
+          onContinue={openNextStep}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+      </NodeInnerWrapper>
+    </NodeWrapper>
+  );
+}
+
+FlowStepNode.propTypes = {
+  data: PropTypes.shape({
+    step: StepPropType.isRequired,
+    index: PropTypes.number.isRequired,
+    flowId: PropTypes.string.isRequired,
+    collapsed: PropTypes.bool.isRequired,
+    openNextStep: PropTypes.func.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    layouted: PropTypes.bool.isRequired,
+  }).isRequired,
+};
+
+export default FlowStepNode;

packages/web/src/components/EditorNew/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 }) => ({
+  maxWidth: 900,
+  flex: 1,
+}));

packages/web/src/components/EditorNew/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/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/useAutoLayout.js

@@ -0,0 +1,69 @@
+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 getLayoutedElements = (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 } = useReactFlow();
+
+  const onLayout = useCallback(
+    (nodes, edges) => {
+      const layoutedElements = getLayoutedElements(nodes, edges);
+
+      setNodes([
+        ...layoutedElements.nodes.map((node) => ({
+          ...node,
+          data: { ...node.data, layouted: true },
+        })),
+      ]);
+      setEdges([
+        ...layoutedElements.edges.map((edge) => ({
+          ...edge,
+          data: { ...edge.data, layouted: true },
+        })),
+      ]);
+    },
+    [setEdges, setNodes],
+  );
+
+  useEffect(() => {
+    const shouldAutoLayout =
+      nodesInitialized &&
+      !isEqual(
+        nodes.map(({ width, height }) => ({ width, height })),
+        prevNodes.map(({ width, height }) => ({ width, height })),
+      );
+
+    if (shouldAutoLayout) {
+      onLayout(nodes, getEdges());
+    }
+  }, [nodes]);
+};

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

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

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/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;