Merge pull request #1594 from automatisch/AUT-666

feat(clickup): add clickup integration

packages/backend/src/apps/clickup/actions/create-folder/index.js

@@ -0,0 +1,72 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Create folder',
+  key: 'createFolder',
+  description: 'Creates a new folder.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Space',
+      key: 'spaceId',
+      type: 'dropdown',
+      required: true,
+      dependsOn: ['parameters.workspaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSpaces',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Folder Name',
+      key: 'folderName',
+      type: 'string',
+      required: true,
+      description: '',
+      variables: true,
+    },
+  ],
+
+  async run($) {
+    const { spaceId, folderName } = $.step.parameters;
+
+    const body = {
+      name: folderName,
+    };
+
+    const { data } = await $.http.post(`/v2/space/${spaceId}/folder`, body);
+
+    $.setActionItem({
+      raw: data,
+    });
+  },
+});

packages/backend/src/apps/clickup/actions/create-list/index.js

@@ -0,0 +1,135 @@
+import defineAction from '../../../../helpers/define-action.js';
+
+export default defineAction({
+  name: 'Create list',
+  key: 'createList',
+  description: 'Creates a new list.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Space',
+      key: 'spaceId',
+      type: 'dropdown',
+      required: true,
+      dependsOn: ['parameters.workspaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSpaces',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Folder',
+      key: 'folderId',
+      type: 'dropdown',
+      required: true,
+      dependsOn: ['parameters.spaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listFolders',
+          },
+          {
+            name: 'parameters.spaceId',
+            value: '{parameters.spaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'List Name',
+      key: 'listName',
+      type: 'string',
+      required: true,
+      description: '',
+      variables: true,
+    },
+    {
+      label: 'List Info',
+      key: 'listInfo',
+      type: 'string',
+      required: false,
+      description: '',
+      variables: true,
+    },
+    {
+      label: 'Priority',
+      key: 'priority',
+      type: 'dropdown',
+      required: false,
+      description: '',
+      variables: true,
+      options: [
+        { label: 'Urgent', value: 1 },
+        { label: 'High', value: 2 },
+        { label: 'Normal', value: 3 },
+        { label: 'Low', value: 4 },
+      ],
+    },
+    {
+      label: 'Due Date',
+      key: 'dueDate',
+      type: 'string',
+      required: false,
+      description: 'format: integer <int64>',
+      variables: true,
+    },
+  ],
+
+  async run($) {
+    const { folderId, listName, listInfo, priority, dueDate } =
+      $.step.parameters;
+
+    const body = {
+      name: listName,
+      content: listInfo,
+    };
+
+    if (priority) {
+      body.priority = priority;
+    }
+
+    if (dueDate) {
+      body.due_date = dueDate;
+    }
+
+    const { data } = await $.http.post(`/v2/folder/${folderId}/list`, body);
+
+    $.setActionItem({
+      raw: data,
+    });
+  },
+});

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

@@ -0,0 +1,4 @@
+import createFolder from './create-folder/index.js';
+import createList from './create-list/index.js';
+
+export default [createFolder, createList];

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

@@ -0,0 +1,27 @@
+<svg width="185" height="185" viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="30" y="20" width="125" height="125" rx="62.5" fill="white"/>
+<rect x="30" y="20" width="125" height="125" rx="62.5" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8789 105.714L69.3974 95.3593C76.5762 104.732 84.1998 109.051 92.6948 109.051C101.143 109.051 108.557 104.781 115.414 95.4832L129.119 105.59C119.232 118.996 106.932 126.079 92.6948 126.079C78.5049 126.079 66.0907 119.046 55.8789 105.714Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.6491 60.7078L68.5883 81.4406L57.4727 68.5407L92.6969 38.1885L127.647 68.5644L116.477 81.417L92.6491 60.7078Z" fill="url(#paint1_linear)"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="185" height="185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="10"/>
+<feGaussianBlur stdDeviation="15"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.117647 0 0 0 0 0.211765 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="55.8789" y1="116.251" x2="129.119" y2="116.251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8930FD"/>
+<stop offset="1" stop-color="#49CCF9"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="57.4727" y1="67.6025" x2="127.647" y2="67.6025" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF02F0"/>
+<stop offset="1" stop-color="#FFC800"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,21 @@
+import { URLSearchParams } from 'url';
+
+export default async function generateAuthUrl($) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value;
+  const state = Math.random().toString();
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId,
+    redirect_uri: redirectUri,
+    state,
+  });
+
+  const url = `https://app.clickup.com/api?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+    originalState: state,
+  });
+}

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

@@ -0,0 +1,46 @@
+import generateAuthUrl from './generate-auth-url.js';
+import verifyCredentials from './verify-credentials.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/clickup/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in ClickUp, 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,
+};

packages/backend/src/apps/clickup/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/clickup/auth/verify-credentials.js

@@ -0,0 +1,31 @@
+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.`);
+  }
+
+  const { data } = await $.http.post('/v2/oauth/token', {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    code: $.auth.data.code,
+  });
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    tokenType: data.token_type,
+  });
+
+  const currentUser = await getCurrentUser($);
+  const screenName = [currentUser.username, currentUser.email]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    screenName,
+  });
+};
+
+export default verifyCredentials;

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

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

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

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

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

@@ -0,0 +1,7 @@
+import listFolders from './list-folders/index.js';
+import listLists from './list-lists/index.js';
+import listSpaces from './list-spaces/index.js';
+import listTasks from './list-tasks/index.js';
+import listWorkspaces from './list-workspaces/index.js';
+
+export default [listFolders, listLists, listSpaces, listTasks, listWorkspaces];

packages/backend/src/apps/clickup/dynamic-data/list-folders/index.js

@@ -0,0 +1,28 @@
+export default {
+  name: 'List folders',
+  key: 'listFolders',
+
+  async run($) {
+    const folders = {
+      data: [],
+    };
+    const spaceId = $.step.parameters.spaceId;
+
+    if (!spaceId) {
+      return folders;
+    }
+
+    const { data } = await $.http.get(`/v2/space/${spaceId}/folder`);
+
+    if (data.folders) {
+      for (const folder of data.folders) {
+        folders.data.push({
+          value: folder.id,
+          name: folder.name,
+        });
+      }
+    }
+
+    return folders;
+  },
+};

packages/backend/src/apps/clickup/dynamic-data/list-lists/index.js

@@ -0,0 +1,28 @@
+export default {
+  name: 'List lists',
+  key: 'listLists',
+
+  async run($) {
+    const lists = {
+      data: [],
+    };
+    const folderId = $.step.parameters.folderId;
+
+    if (!folderId) {
+      return lists;
+    }
+
+    const { data } = await $.http.get(`/v2/folder/${folderId}/list`);
+
+    if (data.lists) {
+      for (const list of data.lists) {
+        lists.data.push({
+          value: list.id,
+          name: list.name,
+        });
+      }
+    }
+
+    return lists;
+  },
+};

packages/backend/src/apps/clickup/dynamic-data/list-spaces/index.js

@@ -0,0 +1,28 @@
+export default {
+  name: 'List spaces',
+  key: 'listSpaces',
+
+  async run($) {
+    const spaces = {
+      data: [],
+    };
+    const workspaceId = $.step.parameters.workspaceId;
+
+    if (!workspaceId) {
+      return spaces;
+    }
+
+    const { data } = await $.http.get(`/v2/team/${workspaceId}/space`);
+
+    if (data.spaces) {
+      for (const space of data.spaces) {
+        spaces.data.push({
+          value: space.id,
+          name: space.name,
+        });
+      }
+    }
+
+    return spaces;
+  },
+};

packages/backend/src/apps/clickup/dynamic-data/list-tasks/index.js

@@ -0,0 +1,41 @@
+export default {
+  name: 'List tasks',
+  key: 'listTasks',
+
+  async run($) {
+    const tasks = {
+      data: [],
+    };
+    const listId = $.step.parameters.listId;
+    let next = false;
+
+    if (!listId) {
+      return tasks;
+    }
+
+    const params = {
+      order_by: 'created',
+      reverse: true,
+    };
+
+    do {
+      const { data } = await $.http.get(`/v2/list/${listId}/task`, { params });
+      if (data.last_page) {
+        next = false;
+      } else {
+        next = true;
+      }
+
+      if (data.tasks) {
+        for (const task of data.tasks) {
+          tasks.data.push({
+            value: task.id,
+            name: task.name,
+          });
+        }
+      }
+    } while (next);
+
+    return tasks;
+  },
+};

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

@@ -0,0 +1,23 @@
+export default {
+  name: 'List workspaces',
+  key: 'listWorkspaces',
+
+  async run($) {
+    const workspaces = {
+      data: [],
+    };
+
+    const { data } = await $.http.get('/v2/team');
+
+    if (data.teams) {
+      for (const workspace of data.teams) {
+        workspaces.data.push({
+          value: workspace.id,
+          name: workspace.name,
+        });
+      }
+    }
+
+    return workspaces;
+  },
+};

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

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

@@ -0,0 +1,6 @@
+import newFolders from './new-folders/index.js';
+import newLists from './new-lists/index.js';
+import newTasks from './new-tasks/index.js';
+import updatedTask from './updated-task/index.js';
+
+export default [newFolders, newLists, newTasks, updatedTask];

packages/backend/src/apps/clickup/triggers/new-folders/index.js

@@ -0,0 +1,105 @@
+import Crypto from 'crypto';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New folders',
+  key: 'newFolder',
+  type: 'webhook',
+  description: 'Triggers when a new folder is created.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Space',
+      key: 'spaceId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.workspaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSpaces',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: $.request.body.folder_id,
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const sampleEventData = {
+      event: 'folderCreated',
+      folder_id: '90180382912',
+      webhook_id: Crypto.randomUUID(),
+    };
+
+    const dataItem = {
+      raw: sampleEventData,
+      meta: {
+        internalId: '',
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async registerHook($) {
+    const { workspaceId, spaceId } = $.step.parameters;
+
+    const payload = {
+      name: $.flow.id,
+      endpoint: $.webhookUrl,
+      events: ['folderCreated'],
+    };
+
+    if (spaceId) {
+      payload.space_id = spaceId;
+    }
+
+    const { data } = await $.http.post(
+      `/v2/team/${workspaceId}/webhook`,
+      payload
+    );
+
+    await $.flow.setRemoteWebhookId(data.id);
+  },
+
+  async unregisterHook($) {
+    await $.http.delete(`/v2/webhook/${$.flow.remoteWebhookId}`);
+  },
+});

packages/backend/src/apps/clickup/triggers/new-lists/index.js

@@ -0,0 +1,129 @@
+import Crypto from 'crypto';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New lists',
+  key: 'newLists',
+  type: 'webhook',
+  description: 'Triggers when a new list is created.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Space',
+      key: 'spaceId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.workspaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSpaces',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Folder',
+      key: 'folderId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.spaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listFolders',
+          },
+          {
+            name: 'parameters.spaceId',
+            value: '{parameters.spaceId}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: $.request.body.list_id,
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const sampleEventData = {
+      event: 'listCreated',
+      list_id: '901800588812',
+      webhook_id: Crypto.randomUUID(),
+    };
+
+    const dataItem = {
+      raw: sampleEventData,
+      meta: {
+        internalId: sampleEventData.webhook_id,
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async registerHook($) {
+    const { workspaceId, spaceId, folderId } = $.step.parameters;
+
+    const payload = {
+      name: $.flow.id,
+      endpoint: $.webhookUrl,
+      events: ['listCreated'],
+      space_id: spaceId,
+    };
+
+    if (folderId) {
+      payload.folder_id = folderId;
+    }
+
+    const { data } = await $.http.post(
+      `/v2/team/${workspaceId}/webhook`,
+      payload
+    );
+
+    await $.flow.setRemoteWebhookId(data.id);
+  },
+
+  async unregisterHook($) {
+    await $.http.delete(`/v2/webhook/${$.flow.remoteWebhookId}`);
+  },
+});

packages/backend/src/apps/clickup/triggers/new-tasks/index.js

@@ -0,0 +1,186 @@
+import Crypto from 'crypto';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'New tasks',
+  key: 'newTasks',
+  type: 'webhook',
+  description: 'Triggers when a new task is created.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Space',
+      key: 'spaceId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.workspaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSpaces',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Folder',
+      key: 'folderId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.spaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listFolders',
+          },
+          {
+            name: 'parameters.spaceId',
+            value: '{parameters.spaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'List',
+      key: 'listId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.folderId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listLists',
+          },
+          {
+            name: 'parameters.folderId',
+            value: '{parameters.folderId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Task',
+      key: 'taskId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.listId'],
+      description:
+        'Choose an optional task to determine when this flow should be activated. In this scenario, only subtasks will initiate this flow.',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTasks',
+          },
+          {
+            name: 'parameters.listId',
+            value: '{parameters.listId}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: $.request.body.task_id,
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const sampleEventData = {
+      event: 'taskCreated',
+      task_id: '86enn7pg7',
+      webhook_id: Crypto.randomUUID(),
+      history_items: [],
+    };
+
+    const dataItem = {
+      raw: sampleEventData,
+      meta: {
+        internalId: sampleEventData.webhook_id,
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async registerHook($) {
+    const { workspaceId, spaceId, folderId, listId, taskId } =
+      $.step.parameters;
+
+    const payload = {
+      name: $.flow.id,
+      endpoint: $.webhookUrl,
+      events: ['taskCreated'],
+      space_id: spaceId,
+    };
+
+    if (folderId) {
+      payload.folder_id = folderId;
+    }
+
+    if (listId) {
+      payload.list_id = listId;
+    }
+
+    if (taskId) {
+      payload.task_id = taskId;
+    }
+
+    const { data } = await $.http.post(
+      `/v2/team/${workspaceId}/webhook`,
+      payload
+    );
+
+    await $.flow.setRemoteWebhookId(data.id);
+  },
+
+  async unregisterHook($) {
+    await $.http.delete(`/v2/webhook/${$.flow.remoteWebhookId}`);
+  },
+});

packages/backend/src/apps/clickup/triggers/updated-task/index.js

@@ -0,0 +1,172 @@
+import Crypto from 'crypto';
+import defineTrigger from '../../../../helpers/define-trigger.js';
+
+export default defineTrigger({
+  name: 'Updated task',
+  key: 'updatedTask',
+  type: 'webhook',
+  description: 'Triggers when a task is updated.',
+  arguments: [
+    {
+      label: 'Workspace',
+      key: 'workspaceId',
+      type: 'dropdown',
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listWorkspaces',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Space',
+      key: 'spaceId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.workspaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listSpaces',
+          },
+          {
+            name: 'parameters.workspaceId',
+            value: '{parameters.workspaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Folder',
+      key: 'folderId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.spaceId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listFolders',
+          },
+          {
+            name: 'parameters.spaceId',
+            value: '{parameters.spaceId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'List',
+      key: 'listId',
+      type: 'dropdown',
+      required: false,
+      dependsOn: ['parameters.folderId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listLists',
+          },
+          {
+            name: 'parameters.folderId',
+            value: '{parameters.folderId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'What Changed?',
+      key: 'whatChanged',
+      type: 'dropdown',
+      required: false,
+      variables: true,
+      options: [
+        { label: 'Status', value: 'taskStatusUpdated' },
+        { label: 'Assignee Added', value: 'taskAssigneeUpdated' },
+        { label: 'Priority', value: 'taskPriorityUpdated' },
+        { label: 'Tag Added', value: 'taskTagUpdated' },
+      ],
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: Crypto.randomUUID(),
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const sampleEventData = {
+      event: 'taskUpdated',
+      task_id: '86enn7pg7',
+      webhook_id: Crypto.randomUUID(),
+      history_items: [],
+    };
+
+    const dataItem = {
+      raw: sampleEventData,
+      meta: {
+        internalId: sampleEventData.webhook_id,
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async registerHook($) {
+    const { workspaceId, spaceId, folderId, listId, whatChanged } =
+      $.step.parameters;
+
+    const payload = {
+      name: $.flow.id,
+      endpoint: $.webhookUrl,
+      space_id: spaceId,
+    };
+
+    payload.events = [whatChanged || 'taskUpdated'];
+
+    if (folderId) {
+      payload.folder_id = folderId;
+    }
+
+    if (listId) {
+      payload.list_id = listId;
+    }
+
+    const { data } = await $.http.post(
+      `/v2/team/${workspaceId}/webhook`,
+      payload
+    );
+
+    await $.flow.setRemoteWebhookId(data.id);
+  },
+
+  async unregisterHook($) {
+    await $.http.delete(`/v2/webhook/${$.flow.remoteWebhookId}`);
+  },
+});

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

@@ -77,6 +77,16 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/datastore/connection' },
           ],
         },
+        {
+          text: 'ClickUp',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Actions', link: '/apps/clickup/actions' },
+            { text: 'Triggers', link: '/apps/clickup/triggers' },
+            { text: 'Connection', link: '/apps/clickup/connection' },
+          ],
+        },
         {
           text: 'DeepL',
           collapsible: true,

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

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

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

@@ -0,0 +1,17 @@
+# ClickUp
+
+:::info
+This page explains the steps you need to follow to set up the ClickUp
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Login to your ClickUp account: [https://app.clickup.com/login](https://app.clickup.com/login).
+2. Go to **Settings** page.
+3. Click on the **ClickUp API** tab on the left.
+4. Click on the **Create an App** button.
+5. Fill the name field.
+6. Copy **OAuth Redirect URL** from Automatisch to **Redirect URL(s)** field.
+7. Copy **Client ID** to **Client ID** field on Automatisch.
+8. Copy **Client Secret** to **Client Secret** field on Automatisch.
+9. Click **Submit** button on Automatisch.
+10. Congrats! Start using your new ClickUp connection within the flows.

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

@@ -0,0 +1,18 @@
+---
+favicon: /favicons/clickup.svg
+items:
+  - name: New folders
+    desc: Triggers when a new folder is created.
+  - name: New lists
+    desc: Triggers when a new list is created.
+  - name: New tasks
+    desc: Triggers when a new task is created.
+  - name: Updated task
+    desc: Triggers when a task is updated.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

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

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

@@ -0,0 +1,27 @@
+<svg width="185" height="185" viewBox="0 0 185 185" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="30" y="20" width="125" height="125" rx="62.5" fill="white"/>
+<rect x="30" y="20" width="125" height="125" rx="62.5" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8789 105.714L69.3974 95.3593C76.5762 104.732 84.1998 109.051 92.6948 109.051C101.143 109.051 108.557 104.781 115.414 95.4832L129.119 105.59C119.232 118.996 106.932 126.079 92.6948 126.079C78.5049 126.079 66.0907 119.046 55.8789 105.714Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.6491 60.7078L68.5883 81.4406L57.4727 68.5407L92.6969 38.1885L127.647 68.5644L116.477 81.417L92.6491 60.7078Z" fill="url(#paint1_linear)"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="185" height="185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="10"/>
+<feGaussianBlur stdDeviation="15"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.117647 0 0 0 0 0.211765 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="55.8789" y1="116.251" x2="129.119" y2="116.251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8930FD"/>
+<stop offset="1" stop-color="#49CCF9"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="57.4727" y1="67.6025" x2="127.647" y2="67.6025" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF02F0"/>
+<stop offset="1" stop-color="#FFC800"/>
+</linearGradient>
+</defs>
+</svg>