feat(mattermost): add auth and send message to channel action

* feat: mattermost integration

* post review adjustments

packages/backend/src/apps/mattermost/actions/index.ts

@@ -0,0 +1,3 @@
+import sendMessageToChannel from './send-a-message-to-channel';
+
+export default [sendMessageToChannel];

packages/backend/src/apps/mattermost/actions/send-a-message-to-channel/index.ts

@@ -0,0 +1,42 @@
+import defineAction from '../../../../helpers/define-action';
+import postMessage from './post-message';
+
+export default defineAction({
+  name: 'Send a message to channel',
+  key: 'sendMessageToChannel',
+  description: 'Sends a message to a channel you specify.',
+  arguments: [
+    {
+      label: 'Channel',
+      key: 'channel',
+      type: 'dropdown' as const,
+      required: true,
+      description: 'Pick a channel to send the message to.',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listChannels',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Message text',
+      key: 'message',
+      type: 'string' as const,
+      required: true,
+      description: 'The content of your new message.',
+      variables: true,
+    },
+  ],
+
+  async run($) {
+    const message = await postMessage($);
+
+    return message;
+  },
+});

packages/backend/src/apps/mattermost/actions/send-a-message-to-channel/post-message.ts

@@ -0,0 +1,27 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+type TData = {
+  channel_id: string;
+  message: string;
+};
+
+const postMessage = async ($: IGlobalVariable) => {
+  const { parameters } = $.step;
+  const channel_id = parameters.channel as string;
+  const message = parameters.message as string;
+
+  const data: TData = {
+    channel_id,
+    message,
+  };
+
+  const response = await $.http.post('/api/v4/posts', data);
+
+  const actionData = {
+    raw: response?.data,
+  };
+
+  $.setActionItem(actionData);
+};
+
+export default postMessage;

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

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M6.79123171,86.9648684 C25.2351716,32.4823178 76.783459,-1.43234143 131.421839,0.0464773399 L131.421839,0.0464773399 L113.909757,20.739032 C81.4957329,26.5997669 53.5072568,48.7337413 42.5072761,81.2287969 C26.140539,129.576353 53.572705,182.545803 103.779303,199.543648 C153.985902,216.538377 207.952658,191.12264 224.319395,142.7782 C235.283535,110.390667 226.589826,75.9306053 204.563374,51.5978814 L204.563374,51.5978814 L203.21701,24.4290666 C247.371203,56.4768925 267.622761,114.633895 249.208429,169.029181 C226.546194,235.970273 153.909545,271.865521 86.9684532,249.204844 C20.0273609,226.542609 -15.8694453,153.905961 6.79123171,86.9648684 Z M165.185344,11.9237762 C165.839826,11.6401671 166.594039,11.5793938 167.321762,11.8256038 C168.035459,12.0671391 168.585536,12.5580009 168.936152,13.1595015 L168.936152,13.1595015 L169.007833,13.2763734 L169.071723,13.4103864 C169.240019,13.7313945 169.383381,14.0991514 169.450388,14.5510559 C169.582343,15.4417519 169.641535,17.5358595 169.665634,19.6808502 L169.671365,20.2662434 C169.677102,20.9486534 169.679633,21.6256073 169.680171,22.2599793 L169.680173,22.7924325 C169.678741,24.5267431 169.663874,25.8268542 169.663874,25.8268542 L169.663874,25.8268542 L170.167202,44.7600977 L170.910507,66.6151379 L171.837691,104.59538 C171.837691,104.59538 171.83785,104.602367 171.838064,104.616156 L171.838772,104.677745 C171.838883,104.691349 171.838983,104.706608 171.839058,104.723498 L171.839105,104.844231 C171.832023,107.013302 171.387173,122.892918 160.122454,133.928662 C148.009853,145.795053 133.131285,144.708923 123.451177,141.433394 C113.771069,138.154749 101.293828,129.979951 98.8800345,113.195592 C96.8283098,98.9302108 104.41287,86.9390787 106.734401,83.6627102 L106.889339,83.4459953 C107.205256,83.0081712 107.389865,82.7777388 107.389865,82.7777388 L107.389865,82.7777388 L131.197445,53.1717559 L145.064682,36.2627333 L156.965355,21.5275276 C156.965355,21.5275276 158.715313,19.1834331 160.51647,16.874806 L160.876881,16.4142586 C161.477025,15.6498178 162.070275,14.9069442 162.593713,14.2737698 L162.898895,13.907734 C163.342593,13.3805415 163.71955,12.9564826 163.983901,12.6998055 C164.292443,12.4006135 164.608776,12.205827 164.918876,12.0546727 L164.918876,12.0546727 L165.146386,11.9393591 Z" fill="#0058CC"></path>
+    </g>
+</svg>

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

@@ -0,0 +1,18 @@
+import { IGlobalVariable } from '@automatisch/types';
+import { URL, URLSearchParams } from 'url';
+import getBaseUrl from '../common/get-base-url';
+
+export default async function generateAuthUrl($: IGlobalVariable) {
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    redirect_uri: $.auth.data.oAuthRedirectUrl as string,
+    response_type: 'code',
+  });
+
+  const baseUrl = getBaseUrl($);
+  const path = `/oauth/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url: new URL(path, baseUrl).toString(),
+  });
+}

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

@@ -0,0 +1,57 @@
+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/mattermost/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input an OAuth callback or redirect URL in Mattermost OAuth, enter the URL above.',
+      clickToCopy: true,
+    },
+    {
+      key: 'instanceUrl',
+      label: 'Mattermost instance URL',
+      type: 'string' as const,
+      required: false,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: 'Your Mattermost instance URL',
+      clickToCopy: true,
+    },
+    {
+      key: 'clientId',
+      label: 'Client id',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+    {
+      key: 'clientSecret',
+      label: 'Client secret',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+  ],
+
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+};

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

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

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

@@ -0,0 +1,44 @@
+import { IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const params = {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    code: $.auth.data.code,
+    grant_type: 'authorization_code',
+    redirect_uri: redirectUri,
+  };
+  const headers = {
+    'Content-Type': 'application/x-www-form-urlencoded', // This is not documented yet required
+  };
+  const response = await $.http.post('/oauth/access_token', null, {
+    params,
+    headers,
+  });
+
+  const {
+    data: { access_token, refresh_token, scope, token_type },
+  } = response;
+
+  $.auth.data.accessToken = response.data.access_token;
+
+  const currentUser = await getCurrentUser($);
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    accessToken: access_token,
+    refreshToken: refresh_token,
+    scope: scope,
+    tokenType: token_type,
+    userId: currentUser.id,
+    screenName: currentUser.username,
+  });
+};
+
+export default verifyCredentials;

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

@@ -0,0 +1,12 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  if ($.auth.data?.accessToken) {
+    requestConfig.headers = requestConfig.headers || {};
+    requestConfig.headers.Authorization = `Bearer ${$.auth.data.accessToken}`;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/mattermost/common/add-x-requested-with-header.ts

@@ -0,0 +1,11 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addXRequestedWithHeader: TBeforeRequest = ($, requestConfig) => {
+  // This is not documented yet required
+  // ref. https://forum.mattermost.com/t/solved-invalid-or-expired-session-please-login-again/6772
+  requestConfig.headers = requestConfig.headers || {};
+  requestConfig.headers['X-Requested-With'] = `XMLHttpRequest`;
+  return requestConfig;
+};
+
+export default addXRequestedWithHeader;

packages/backend/src/apps/mattermost/common/get-base-url.ts

@@ -0,0 +1,7 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const getBaseUrl = ($: IGlobalVariable): string => {
+  return $.auth.data.instanceUrl as string;
+};
+
+export default getBaseUrl;

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

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

packages/backend/src/apps/mattermost/common/set-base-url.ts

@@ -0,0 +1,9 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const setBaseUrl: TBeforeRequest = ($, requestConfig) => {
+  requestConfig.baseURL = $.auth.data.instanceUrl as string;
+
+  return requestConfig;
+};
+
+export default setBaseUrl;

packages/backend/src/apps/mattermost/dynamic-data/index.ts

@@ -0,0 +1,3 @@
+import listChannels from './list-channels';
+
+export default [listChannels];

packages/backend/src/apps/mattermost/dynamic-data/list-channels/index.ts

@@ -0,0 +1,36 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+type TChannel = {
+  id: string;
+  display_name: string;
+};
+
+type TResponse = {
+  data: TChannel[];
+};
+
+export default {
+  name: 'List channels',
+  key: 'listChannels',
+
+  async run($: IGlobalVariable) {
+    const channels: {
+      data: IJSONObject[];
+      error: IJSONObject | null;
+    } = {
+      data: [],
+      error: null,
+    };
+
+    const response: TResponse = await $.http.get('/api/v4/users/me/channels'); // this endpoint will return only channels user joined, there is no endpoint to list all channels available for user
+
+    for (const channel of response.data) {
+      channels.data.push({
+        value: channel.id as string,
+        name: (channel.display_name as string) || (channel.id as string), // it's possible for channel to not have any name thus falling back to using id
+      });
+    }
+
+    return channels;
+  },
+};

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

@@ -0,0 +1,22 @@
+import defineApp from '../../helpers/define-app';
+import addAuthHeader from './common/add-auth-header';
+import addXRequestedWithHeader from './common/add-x-requested-with-header';
+import setBaseUrl from './common/set-base-url';
+import auth from './auth';
+import actions from './actions';
+import dynamicData from './dynamic-data';
+
+export default defineApp({
+  name: 'Mattermost',
+  key: 'mattermost',
+  iconUrl: '{BASE_URL}/apps/mattermost/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/slack/connection',
+  baseUrl: 'https://mattermost.com',
+  apiBaseUrl: '', // there is no cloud version of this app, user always need to provide address of own instance when creating connection
+  primaryColor: '4a154b',
+  supportsConnections: true,
+  beforeRequest: [setBaseUrl, addXRequestedWithHeader, addAuthHeader],
+  auth,
+  actions,
+  dynamicData,
+});

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

@@ -142,6 +142,15 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/http-request/connection' },
           ],
         },
+        {
+          text: 'Mattermost',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Triggers', link: '/apps/mattermost/actions' },
+            { text: 'Connection', link: '/apps/notion/connection' },
+          ],
+        },
         {
           text: 'Notion',
           collapsible: true,

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

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/mattermost.svg
+items:
+  - name: Send a message to channel
+    desc: Sends a message to a channel you specify.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

@@ -0,0 +1,19 @@
+# Mattermost
+
+:::info
+This page explains the steps you need to follow to set up the Mattermost
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the `<WORKSPACE_NAME>/integrations/oauth2-apps/add` page of your Mattermost server to register a **new OAuth application**.
+   - You can find details about registering new Mattermost oAuth application at https://docs.mattermost.com/integrations/cloud-oauth-2-0-applications.html#register-your-application-in-mattermost.
+2. Fill in the **Display Name** field.
+3. Fill in the **Description** field.
+4. Fill in the **Homepage** field.
+5. Copy **OAuth Redirect URL** from Automatisch to the **Callback URLs** field on Mattermost page.
+6. Click on the **Save** button at the end of the form on Mattermost page.
+7. Copy the **Client ID** value from the following page to the `Client ID` field on Automatisch.
+8. Copy the **Client Secret** value from the same page to the `Client Secret` field on Automatisch.
+9. Click **Done** button on MAttermost page.
+10. Click **Submit** button on Automatisch.
+11. Congrats! Start using your new Mattermost connection within the flows.

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

@@ -18,6 +18,7 @@ Following integrations are currently supported by Automatisch.
 - [Google Forms](/apps/google-forms/triggers)
 - [Google Sheets](/apps/google-sheets/triggers)
 - [HTTP Request](/apps/http-request/actions)
+- [Mattermost](/apps/mattermost/actions)
 - [Notion](/apps/notion/triggers)
 - [Ntfy](/apps/ntfy/actions)
 - [Odoo](/apps/odoo/actions)