feat(trello): add trello integration (#1380)

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" role="presentation" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5ZM5 6C5 5.44772 5.44772 5 6 5H10C10.5523 5 11 5.44772 11 6V16C11 16.5523 10.5523 17 10 17H6C5.44772 17 5 16.5523 5 16V6ZM14 5C13.4477 5 13 5.44772 13 6V12C13 12.5523 13.4477 13 14 13H18C18.5523 13 19 12.5523 19 12V6C19 5.44772 18.5523 5 18 5H14Z" fill="#0079bf"></path></svg>

packages/backend/src/apps/trello/auth/generate-auth-url.ts

@@ -0,0 +1,23 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import { URLSearchParams } from 'url';
+import authScope from '../common/auth-scope';
+
+export default async function generateAuthUrl($: IGlobalVariable) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const searchParams = new URLSearchParams({
+    return_url: redirectUri,
+    scope: authScope.join(','),
+    expiration: 'never',
+    key: $.auth.data.apiKey as string,
+    response_type: 'token',
+  });
+
+  const url = `https://trello.com/1/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+  });
+}

packages/backend/src/apps/trello/auth/index.ts

@@ -0,0 +1,34 @@
+import generateAuthUrl from './generate-auth-url';
+import verifyCredentials from './verify-credentials';
+import isStillVerified from './is-still-verified';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string' as const,
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/trello/connections/add',
+      placeholder: null,
+      description: '',
+      clickToCopy: true,
+    },
+    {
+      key: 'apiKey',
+      label: 'API Key',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'API Key for your Trello account',
+      clickToCopy: false,
+    },
+  ],
+
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/trello/auth/is-still-verified.ts

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

packages/backend/src/apps/trello/auth/verify-credentials.ts

@@ -0,0 +1,15 @@
+import { IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  const currentUser = await getCurrentUser($);
+  const screenName = [currentUser.username, currentUser.email]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    screenName,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/trello/common/add-auth-header.ts

@@ -0,0 +1,11 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  if ($.auth.data?.token) {
+    requestConfig.headers.Authorization = `OAuth oauth_consumer_key="${$.auth.data.apiKey}", oauth_token="${$.auth.data.token}"`;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/trello/common/auth-scope.ts

@@ -0,0 +1,3 @@
+const authScope: string[] = ['read', 'write', 'account'];
+
+export default authScope;

packages/backend/src/apps/trello/common/get-current-user.ts

@@ -0,0 +1,10 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+const getCurrentUser = async ($: IGlobalVariable): Promise<IJSONObject> => {
+  const response = await $.http.get('/1/members/me/');
+  const currentUser = response.data;
+
+  return currentUser;
+};
+
+export default getCurrentUser;

packages/backend/src/apps/trello/index.ts

@@ -0,0 +1,16 @@
+import defineApp from '../../helpers/define-app';
+import addAuthHeader from './common/add-auth-header';
+import auth from './auth';
+
+export default defineApp({
+  name: 'Trello',
+  key: 'trello',
+  baseUrl: 'https://trello.com/',
+  apiBaseUrl: 'https://api.trello.com',
+  iconUrl: '{BASE_URL}/apps/trello/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/trello/connection',
+  supportsConnections: true,
+  primaryColor: '0079bf',
+  beforeRequest: [addAuthHeader],
+  auth,
+});

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

@@ -373,6 +373,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/todoist/connection' },
           ],
         },
+        {
+          text: 'Trello',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/trello/connection' }],
+        },
         {
           text: 'Twilio',
           collapsible: true,

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

@@ -0,0 +1,16 @@
+# Trello
+
+:::info
+This page explains the steps you need to follow to set up the Trello
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [link](https://trello.com/power-ups/admin) in order to create a Trello Power-Up.
+2. Click on the **New** button.
+3. Fill the form fields and click the **Create** button.
+4. Click on the **Generate a new API key** button.
+5. A popup will open. Click the **Generate a new API key** button again.
+6. Copy **OAuth Redirect URL** from Automatisch and paste it in **Allowed origins** and click on the **Add** button.
+7. Copy the **API key** value to the **API key** field on Automatisch.
+8. Click **Submit** button on Automatisch.
+9. Congrats! Start using your new Trello connection within the flows.

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" role="presentation" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5ZM5 6C5 5.44772 5.44772 5 6 5H10C10.5523 5 11 5.44772 11 6V16C11 16.5523 10.5523 17 10 17H6C5.44772 17 5 16.5523 5 16V6ZM14 5C13.4477 5 13 5.44772 13 6V12C13 12.5523 13.4477 13 14 13H18C18.5523 13 19 12.5523 19 12V6C19 5.44772 18.5523 5 18 5H14Z" fill="#0079bf"></path></svg>

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

@@ -47,7 +47,7 @@ export default function AddAppConnection(
     if (window.opener) {
       window.opener.postMessage({
         source: 'automatisch',
-        payload: window.location.search,
+        payload: { search: window.location.search, hash: window.location.hash },
       });
       window.close();
     }

packages/web/src/helpers/authenticationSteps.ts

@@ -25,9 +25,16 @@ const processMutation = async (
 };
 
 const parseUrlSearchParams = (event: any) => {
-  const searchParams = new URLSearchParams(event.data.payload);
+  const searchParams = new URLSearchParams(event.data.payload.search);
+  const hashParams = new URLSearchParams(event.data.payload.hash.substring(1));
 
-  return getObjectOfEntries(searchParams.entries());
+  const searchParamsObject = getObjectOfEntries(searchParams.entries());
+  const hashParamsObject = getObjectOfEntries(hashParams.entries());
+
+  return {
+    ...hashParamsObject,
+    ...searchParamsObject,
+  };
 };
 
 function getObjectOfEntries(iterator: any) {