feat(twitch): add new live streams trigger

test: Implement graphQL getFlow query tests

.eslintrc.js

@@ -7,4 +7,12 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'prettier',
   ],
+  overrides: [
+    {
+      files: ['**/*.test.ts', '**/test/**/*.ts'],
+      rules: {
+        '@typescript-eslint/ban-ts-comment': ['off'],
+      },
+    },
+  ],
 };

packages/backend/jest.config.js

@@ -4,4 +4,6 @@ module.exports = {
   testEnvironment: 'node',
   setupFilesAfterEnv: ['./test/setup/global-hooks.ts'],
   globalTeardown: './test/setup/global-teardown.ts',
+  collectCoverage: true,
+  collectCoverageFrom: ['src/graphql/queries/*.ts'],
 };

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

@@ -1,7 +1,8 @@
 import { TBeforeRequest } from '@automatisch/types';
 
 const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
-  if (requestConfig.additionalProperties?.skipAddingAuthHeader) return requestConfig;
+  if (requestConfig.additionalProperties?.skipAddingAuthHeader)
+    return requestConfig;
 
   if ($.auth.data?.accessToken) {
     const authorizationHeader = `Bearer ${$.auth.data.accessToken}`;

packages/backend/src/apps/trello/actions/create-card/index.ts

@@ -0,0 +1,189 @@
+import { IJSONArray, IJSONObject } from '@automatisch/types';
+import defineAction from '../../../../helpers/define-action';
+
+export default defineAction({
+  name: 'Create card',
+  key: 'createCard',
+  description: 'Creates a new card within a specified board and list.',
+  arguments: [
+    {
+      label: 'Board',
+      key: 'boardId',
+      type: 'dropdown' as const,
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listBoards',
+          },
+        ],
+      },
+    },
+    {
+      label: 'List',
+      key: 'listId',
+      type: 'dropdown' as const,
+      required: true,
+      dependsOn: ['parameters.boardId'],
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listBoardLists',
+          },
+          {
+            name: 'parameters.boardId',
+            value: '{parameters.boardId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Name',
+      key: 'name',
+      type: 'string' as const,
+      required: true,
+      variables: true,
+      description: '',
+    },
+    {
+      label: 'Description',
+      key: 'description',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+      description: '',
+    },
+
+    {
+      label: 'Label',
+      key: 'label',
+      type: 'dropdown' as const,
+      required: false,
+      dependsOn: ['parameters.boardId'],
+      description: 'Select a color tag to attach to the card.',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listBoardLabels',
+          },
+          {
+            name: 'parameters.boardId',
+            value: '{parameters.boardId}',
+          },
+        ],
+      },
+    },
+    {
+      label: 'Card Position',
+      key: 'cardPosition',
+      type: 'dropdown' as const,
+      required: false,
+      description: '',
+      variables: true,
+      options: [
+        {
+          label: 'top',
+          value: 'top',
+        },
+        {
+          label: 'bottom',
+          value: 'bottom',
+        },
+      ],
+    },
+    {
+      label: 'Members',
+      key: 'memberIds',
+      type: 'dynamic' as const,
+      required: false,
+      description: '',
+      fields: [
+        {
+          label: 'Member',
+          key: 'memberId',
+          type: 'dropdown' as const,
+          required: false,
+          dependsOn: ['parameters.boardId'],
+          description: '',
+          variables: true,
+          source: {
+            type: 'query',
+            name: 'getDynamicData',
+            arguments: [
+              {
+                name: 'key',
+                value: 'listMembers',
+              },
+              {
+                name: 'parameters.boardId',
+                value: '{parameters.boardId}',
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      label: 'Due Date',
+      key: 'dueDate',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+      description: 'Format: mm-dd-yyyy HH:mm:ss or yyyy-MM-dd HH:mm:ss.',
+    },
+    {
+      label: 'URL Attachment',
+      key: 'urlSource',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+      description: 'A URL to attach to the card.',
+    },
+  ],
+
+  async run($) {
+    const {
+      listId,
+      name,
+      description,
+      cardPosition,
+      dueDate,
+      label,
+      urlSource,
+    } = $.step.parameters;
+
+    const memberIds = $.step.parameters.memberIds as IJSONArray;
+    const idMembers = memberIds.map(
+      (memberId: IJSONObject) => memberId.memberId
+    );
+
+    const fields = {
+      name,
+      desc: description,
+      idList: listId,
+      pos: cardPosition,
+      due: dueDate,
+      idMembers: idMembers.join(','),
+      idLabels: label,
+      urlSource,
+    };
+
+    const response = await $.http.post('/1/cards', fields);
+
+    $.setActionItem({ raw: response.data });
+  },
+});

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

@@ -0,0 +1,3 @@
+import createCard from './create-card';
+
+export default [createCard];

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

@@ -5,6 +5,8 @@ const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
     requestConfig.headers.Authorization = `OAuth oauth_consumer_key="${$.auth.data.apiKey}", oauth_token="${$.auth.data.token}"`;
   }
 
+  requestConfig.headers.Accept = 'application/json';
+
   return requestConfig;
 };
 

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

@@ -0,0 +1,6 @@
+import listBoardLabels from './list-board-labels';
+import listBoardLists from './list-board-lists';
+import listBoards from './list-boards';
+import listMembers from './listMembers';
+
+export default [listBoardLabels, listBoardLists, listBoards, listMembers];

packages/backend/src/apps/trello/dynamic-data/list-board-labels/index.ts

@@ -0,0 +1,39 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+export default {
+  name: 'List board labels',
+  key: 'listBoardLabels',
+
+  async run($: IGlobalVariable) {
+    const boardLabels: {
+      data: IJSONObject[];
+    } = {
+      data: [],
+    };
+
+    const boardId = $.step.parameters.boardId;
+
+    if (!boardId) {
+      return boardLabels;
+    }
+
+    const params = {
+      fields: 'color',
+    };
+
+    const { data } = await $.http.get(`/1/boards/${boardId}/labels`, {
+      params,
+    });
+
+    if (data?.length) {
+      for (const boardLabel of data) {
+        boardLabels.data.push({
+          value: boardLabel.id,
+          name: boardLabel.color,
+        });
+      }
+    }
+
+    return boardLabels;
+  },
+};

packages/backend/src/apps/trello/dynamic-data/list-board-lists/index.ts

@@ -0,0 +1,33 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+export default {
+  name: 'List board lists',
+  key: 'listBoardLists',
+
+  async run($: IGlobalVariable) {
+    const boards: {
+      data: IJSONObject[];
+    } = {
+      data: [],
+    };
+
+    const boardId = $.step.parameters.boardId;
+
+    if (!boardId) {
+      return boards;
+    }
+
+    const { data } = await $.http.get(`/1/boards/${boardId}/lists`);
+
+    if (data?.length) {
+      for (const list of data) {
+        boards.data.push({
+          value: list.id,
+          name: list.name,
+        });
+      }
+    }
+
+    return boards;
+  },
+};

packages/backend/src/apps/trello/dynamic-data/list-boards/index.ts

@@ -0,0 +1,27 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+export default {
+  name: 'List boards',
+  key: 'listBoards',
+
+  async run($: IGlobalVariable) {
+    const boards: {
+      data: IJSONObject[];
+    } = {
+      data: [],
+    };
+
+    const { data } = await $.http.get(`/1/members/me/boards`);
+
+    if (data?.length) {
+      for (const board of data) {
+        boards.data.push({
+          value: board.id,
+          name: board.name,
+        });
+      }
+    }
+
+    return boards;
+  },
+};

packages/backend/src/apps/trello/dynamic-data/listMembers/index.ts

@@ -0,0 +1,33 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+export default {
+  name: 'List members',
+  key: 'listMembers',
+
+  async run($: IGlobalVariable) {
+    const members: {
+      data: IJSONObject[];
+    } = {
+      data: [],
+    };
+
+    const boardId = $.step.parameters.boardId;
+
+    if (!boardId) {
+      return members;
+    }
+
+    const { data } = await $.http.get(`/1/boards/${boardId}/members`);
+
+    if (data?.length) {
+      for (const member of data) {
+        members.data.push({
+          value: member.id,
+          name: member.fullName,
+        });
+      }
+    }
+
+    return members;
+  },
+};

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

@@ -1,6 +1,8 @@
 import defineApp from '../../helpers/define-app';
 import addAuthHeader from './common/add-auth-header';
 import auth from './auth';
+import actions from './actions';
+import dynamicData from './dynamic-data';
 
 export default defineApp({
   name: 'Trello',
@@ -13,4 +15,6 @@ export default defineApp({
   primaryColor: '0079bf',
   beforeRequest: [addAuthHeader],
   auth,
+  actions,
+  dynamicData,
 });

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" overflow="visible" width="40" height="40" version="1.1" viewBox="0 0 40 40" x="0px" y="0px" class="ScSvg-sc-mx5axi-2 iAAiAK"><g fill="#5C16C5"><polygon points="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animate dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate><animate dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate></polygon><polygon points="26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25" class="ScFace-sc-mx5axi-4 fDFkyX" fill="#FFFFFF"><animateTransform dur="150ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></polygon><g class="ScEyes-sc-mx5axi-5 fAMMxB" fill="#5C16C5"><path d="M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animateTransform dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></path></g></g></svg>

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

@@ -0,0 +1,22 @@
+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({
+    client_id: $.auth.data.clientId as string,
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    scope: authScope.join(' '),
+  });
+
+  const url = `https://id.twitch.tv/oauth2/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+  });
+}

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

@@ -0,0 +1,50 @@
+import generateAuthUrl from './generate-auth-url';
+import verifyCredentials from './verify-credentials';
+import refreshToken from './refresh-token';
+import isStillVerified from './is-still-verified';
+import verifyWebhook from './verify-webhook';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string' as const,
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/twitch/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in Twitch, enter the URL above.',
+      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,
+  refreshToken,
+  verifyWebhook,
+};

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

@@ -0,0 +1,8 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const isStillVerified = async ($: IGlobalVariable) => {
+  const { data } = await $.http.get('https://id.twitch.tv/oauth2/validate');
+  return !!data.login;
+};
+
+export default isStillVerified;

packages/backend/src/apps/twitch/auth/refresh-token.ts

@@ -0,0 +1,27 @@
+import { URLSearchParams } from 'node:url';
+import { IGlobalVariable } from '@automatisch/types';
+import authScope from '../common/auth-scope';
+
+const refreshToken = async ($: IGlobalVariable) => {
+  const params = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    client_secret: $.auth.data.clientSecret as string,
+    grant_type: 'refresh_token',
+    refresh_token: $.auth.data.refreshToken as string,
+  });
+
+  const { data } = await $.http.post(
+    'https://id.twitch.tv/oauth2/token',
+    params.toString()
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    refreshToken: data.refresh_token,
+    expiresIn: data.expires_in,
+    scope: authScope.join(' '),
+    tokenType: data.token_type,
+  });
+};
+
+export default refreshToken;

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

@@ -0,0 +1,63 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const headers = {
+    'Content-Type': 'application/x-www-form-urlencoded',
+  };
+  const userParams = {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    code: $.auth.data.code,
+    grant_type: 'authorization_code',
+    redirect_uri: redirectUri,
+  };
+
+  const { data } = await $.http.post(
+    `https://id.twitch.tv/oauth2/token`,
+    null,
+    { headers, params: userParams }
+  );
+
+  await $.auth.set({
+    userAccessToken: data.access_token,
+  });
+
+  const currentUser = await getCurrentUser($);
+
+  const screenName = [currentUser.display_name, currentUser.email]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    scope: $.auth.data.scope,
+    userExpiresIn: data.expires_in,
+    userRefreshToken: data.refresh_token,
+    screenName,
+  });
+
+  const appParams = {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    grant_type: 'client_credentials',
+  };
+
+  const response = await $.http.post(
+    `https://id.twitch.tv/oauth2/token`,
+    null,
+    { headers, params: appParams }
+  );
+
+  await $.auth.set({
+    appAccessToken: response.data.access_token,
+    appExpiresIn: response.data.expires_in,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/twitch/auth/verify-webhook.ts

@@ -0,0 +1,35 @@
+import crypto from 'crypto';
+import { IGlobalVariable } from '@automatisch/types';
+import appConfig from '../../../config/app';
+
+const verifyWebhook = async ($: IGlobalVariable) => {
+  const signature = $.request.headers[
+    'twitch-eventsub-message-signature'
+  ] as string;
+  const twitchMessageId = $.request.headers[
+    'twitch-eventsub-message-id'
+  ] as string;
+  const twitchMessageTimestamp = $.request.headers[
+    'twitch-eventsub-message-timestamp'
+  ] as string;
+  const rawBody = $.request.rawBody.toString();
+  const hmacMessage = twitchMessageId + twitchMessageTimestamp + rawBody;
+  const hash = crypto
+    .createHmac('sha256', appConfig.webhookSecretKey)
+    .update(hmacMessage)
+    .digest('hex');
+  const hmac = `sha256=${hash}`;
+
+  const isValid = verifySignature(signature, hmac);
+
+  return isValid;
+};
+
+const verifySignature = function (receivedSignature: string, payload: string) {
+  return crypto.timingSafeEqual(
+    Buffer.from(payload),
+    Buffer.from(receivedSignature)
+  );
+};
+
+export default verifyWebhook;

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

@@ -0,0 +1,20 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  const clientId = $.auth.data.clientId as string;
+  let token;
+  if (requestConfig.additionalProperties?.appAccessToken) {
+    token = $.auth.data.appAccessToken;
+  } else {
+    token = $.auth.data.userAccessToken;
+  }
+
+  if (token && clientId) {
+    requestConfig.headers.Authorization = `Bearer ${token}`;
+    requestConfig.headers['Client-Id'] = clientId;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

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

@@ -0,0 +1,3 @@
+const authScope: string[] = ['user:read:email', 'user:read:follows'];
+
+export default authScope;

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

@@ -0,0 +1,8 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const getCurrentUser = async ($: IGlobalVariable) => {
+  const { data: currentUser } = await $.http.get('/helix/users');
+  return currentUser.data[0];
+};
+
+export default getCurrentUser;

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

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

packages/backend/src/apps/twitch/dynamic-data/list-broadcasters/index.ts

@@ -0,0 +1,33 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+import getCurrentUser from '../../common/get-current-user';
+
+export default {
+  name: 'List broadcasters',
+  key: 'listBroadcasters',
+
+  async run($: IGlobalVariable) {
+    const Broadcasters: {
+      data: IJSONObject[];
+    } = {
+      data: [],
+    };
+    const currentUser = await getCurrentUser($);
+
+    const params = {
+      user_id: currentUser.id,
+    };
+
+    const { data } = await $.http.get('/helix/channels/followed', { params });
+
+    if (data.data?.length) {
+      for (const broadcaster of data.data) {
+        Broadcasters.data.push({
+          value: broadcaster.broadcaster_id,
+          name: broadcaster.broadcaster_name,
+        });
+      }
+    }
+
+    return Broadcasters;
+  },
+};

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

@@ -0,0 +1,20 @@
+import defineApp from '../../helpers/define-app';
+import addAuthHeader from './common/add-auth-header';
+import auth from './auth';
+import triggers from './triggers';
+import dynamicData from './dynamic-data';
+
+export default defineApp({
+  name: 'Twitch',
+  key: 'twitch',
+  baseUrl: 'https://www.twitch.tv',
+  apiBaseUrl: 'https://api.twitch.tv',
+  iconUrl: '{BASE_URL}/apps/twitch/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/twitch/connection',
+  primaryColor: '5C16C5',
+  supportsConnections: true,
+  beforeRequest: [addAuthHeader],
+  auth,
+  triggers,
+  dynamicData,
+});

packages/backend/src/apps/twitch/triggers/index.ts

@@ -0,0 +1,3 @@
+import newLiveStreams from './new-live-streams';
+
+export default [newLiveStreams];

packages/backend/src/apps/twitch/triggers/new-live-streams/index.ts

@@ -0,0 +1,108 @@
+import Crypto from 'crypto';
+import isEmpty from 'lodash/isEmpty';
+import defineTrigger from '../../../../helpers/define-trigger';
+import appConfig from '../../../../config/app';
+
+type Response = {
+  data: {
+    data: [
+      {
+        id: string;
+      }
+    ];
+  };
+};
+
+export default defineTrigger({
+  name: 'New live streams',
+  key: 'newLiveStreams',
+  type: 'webhook',
+  description:
+    'Triggers when a new live stream starts, regardless of the specific game or language it involves. To include a streamer you are not currently following, input the username of the streamer you want to add.',
+  arguments: [
+    {
+      label: 'Broadcaster',
+      key: 'broadcasterId',
+      type: 'dropdown' as const,
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listBroadcasters',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: Crypto.randomUUID(),
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const lastExecutionStep = await $.getLastExecutionStep();
+
+    if (!isEmpty(lastExecutionStep?.dataOut)) {
+      $.pushTriggerItem({
+        raw: lastExecutionStep.dataOut,
+        meta: {
+          internalId: '',
+        },
+      });
+    }
+  },
+
+  async registerHook($) {
+    const broadcasterId = $.step.parameters.broadcasterId as string;
+
+    const payload = {
+      type: 'stream.online',
+      version: '1',
+      condition: {
+        broadcaster_user_id: broadcasterId,
+      },
+      transport: {
+        method: 'webhook',
+        callback: $.webhookUrl,
+        secret: appConfig.webhookSecretKey,
+      },
+    };
+
+    const response: Response = await $.http.post(
+      '/helix/eventsub/subscriptions',
+      payload,
+      {
+        additionalProperties: {
+          appAccessToken: true,
+        },
+      }
+    );
+
+    await $.flow.setRemoteWebhookId(response.data.data[0].id);
+  },
+
+  async unregisterHook($) {
+    const params = {
+      id: $.flow.remoteWebhookId,
+    };
+
+    await $.http.delete('/helix/eventsub/subscriptions', {
+      params,
+      additionalProperties: {
+        appAccessToken: true,
+      },
+    });
+  },
+});

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="363" height="259" fill="#03363d"><path d="M173.82 40.5v112.86H80.34L173.82 40.5zm0-40.5a46.74 46.74 0 1 1-93.48 0h93.48zm15.4 153.37a46.74 46.74 0 0 1 93.48 0h-93.48zm0-40.5V0h93.5l-93.5 112.86zm52.28 137.06a18.22 18.22 0 0 0 12.95-5l6.42 6.93c-4.24 4.36-10.12 7.6-19.26 7.6-15.67 0-25.8-10.4-25.8-24.46a24 24 0 0 1 24.37-24.47c15.56 0 24.38 11.84 23.6 28.26H227c1.3 6.82 6.1 11.17 14.47 11.17m11.2-19c-1-6.37-4.8-11.06-12.4-11.06-7.07 0-12 4-13.27 11.06h25.68zM0 249.4l28.3-28.76H.67v-9.02h40.76v9.2l-28.3 28.75h28.7v9.03H0v-9.2zm73.6.52a18.22 18.22 0 0 0 12.95-5l6.42 6.93c-4.24 4.36-10.12 7.6-19.26 7.6-15.67 0-25.8-10.4-25.8-24.46a24 24 0 0 1 24.37-24.47c15.56 0 24.38 11.84 23.6 28.26H59.12c1.3 6.82 6.1 11.17 14.47 11.17m11.2-19c-1-6.37-4.8-11.06-12.4-11.06-7.07 0-12 4-13.27 11.06H84.8zm72.23 4.03c0-15 11.23-24.44 23.6-24.44a20.34 20.34 0 0 1 15.67 7.05v-27.72h10v68.6h-10V252a20.1 20.1 0 0 1-15.76 7.42c-12 0-23.5-9.5-23.5-24.43m39.82-.1a14.92 14.92 0 1 0-14.91 15.32c8.6 0 14.9-6.86 14.9-15.32m73.48 13.6l9.06-4.7a13.44 13.44 0 0 0 12.08 6.86c5.66 0 8.6-2.9 8.6-6.2 0-3.76-5.47-4.6-11.42-5.83-8-1.7-16.33-4.33-16.33-14 0-7.43 7.07-14.3 18.2-14.2 8.77 0 15.3 3.48 19 9.1l-8.4 4.6a12.19 12.19 0 0 0-10.57-5.36c-5.38 0-8.12 2.63-8.12 5.64 0 3.38 4.34 4.32 11.14 5.83 7.74 1.7 16.5 4.23 16.5 14 0 6.48-5.66 15.22-19.06 15.13-9.8 0-16.7-3.95-20.67-10.9m66.9-10.87l-7.93 8.65v12.2h-10v-68.6h10v44.93l21.23-23.3h12.18l-18.4 20.1 18.88 26.88h-11.32l-14.63-20.86zM126.8 210.53c-11.9 0-21.85 7.7-21.85 20.5v27.45h10.2V232.3c0-7.7 4.43-12.32 12-12.32s11.33 4.6 11.33 12.32v26.18h10.14v-27.45c0-12.78-10-20.5-21.85-20.5"/></svg>

packages/backend/src/apps/zendesk/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({
+    response_type: 'code',
+    redirect_uri: redirectUri,
+    client_id: $.auth.data.clientId as string,
+    scope: authScope.join(' '),
+  });
+
+  await $.auth.set({
+    url: `${
+      $.auth.data.instanceUrl
+    }/oauth/authorizations/new?${searchParams.toString()}`,
+  });
+}

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

@@ -0,0 +1,55 @@
+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/zendesk/connections/add',
+      placeholder: null,
+      description: '',
+      clickToCopy: true,
+    },
+    {
+      key: 'instanceUrl',
+      label: 'Zendesk Subdomain Url',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: 'https://{{subdomain}}.zendesk.com',
+      clickToCopy: false,
+    },
+    {
+      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/zendesk/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) => {
+  await getCurrentUser($);
+  return true;
+};
+
+export default isStillVerified;

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

@@ -0,0 +1,56 @@
+import { IGlobalVariable, IJSONValue, IField } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+import scopes from '../common/auth-scope';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  await getAccessToken($);
+
+  const user = await getCurrentUser($);
+  const subdomain = extractSubdomain($.auth.data.instanceUrl);
+  const name = user.name as string;
+  const screenName = [name, subdomain].filter(Boolean).join(' @ ');
+
+  await $.auth.set({
+    screenName,
+    apiToken: $.auth.data.apiToken,
+    instanceUrl: $.auth.data.instanceUrl,
+    email: $.auth.data.email,
+  });
+};
+
+const getAccessToken = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+
+  const response = await $.http.post(`/oauth/tokens`, {
+    redirect_uri: redirectUri,
+    code: $.auth.data.code,
+    grant_type: 'authorization_code',
+    scope: scopes.join(' '),
+    client_id: $.auth.data.clientId as string,
+    client_secret: $.auth.data.clientSecret as string,
+  });
+
+  const data = response.data;
+
+  $.auth.data.accessToken = data.access_token;
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    accessToken: data.access_token,
+    tokenType: data.token_type,
+  });
+};
+
+function extractSubdomain(url: IJSONValue) {
+  const match = (url as string).match(/https:\/\/(.*?)\.zendesk\.com/);
+  if (match && match[1]) {
+    return match[1];
+  }
+  return null;
+}
+
+export default verifyCredentials;

packages/backend/src/apps/zendesk/common/add-auth-headers.ts

@@ -0,0 +1,17 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  const { instanceUrl, tokenType, accessToken } = $.auth.data;
+
+  if (instanceUrl) {
+    requestConfig.baseURL = instanceUrl as string;
+  }
+
+  if (tokenType && accessToken) {
+    requestConfig.headers.Authorization = `${tokenType} ${$.auth.data.accessToken}`;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

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

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

packages/backend/src/apps/zendesk/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('/api/v2/users/me');
+  const currentUser = response.data.user;
+
+  return currentUser;
+};
+
+export default getCurrentUser;

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

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

packages/backend/src/db/migrations/20231025101146_add_flow_id_index_in_executions.ts

@@ -0,0 +1,13 @@
+import { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.schema.table('executions', (table) => {
+    table.index('flow_id');
+  });
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.table('executions', (table) => {
+    table.dropIndex('flow_id');
+  });
+}

packages/backend/src/db/migrations/20231025101923_add_updated_at_index_in_executions.ts

@@ -0,0 +1,13 @@
+import { Knex } from 'knex';
+
+export async function up(knex: Knex): Promise<void> {
+  await knex.schema.table('executions', (table) => {
+    table.index('updated_at');
+  });
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.table('executions', (table) => {
+    table.dropIndex('updated_at');
+  });
+}

packages/backend/src/graphql/mutations/delete-flow.ts

@@ -1,6 +1,8 @@
 import Context from '../../types/express/context';
 import Execution from '../../models/execution';
 import ExecutionStep from '../../models/execution-step';
+import globalVariable from '../../helpers/global-variable';
+import logger from '../../helpers/logger';
 
 type Params = {
   input: {
@@ -22,6 +24,25 @@ const deleteFlow = async (
     })
     .throwIfNotFound();
 
+  const triggerStep = await flow.getTriggerStep();
+  const trigger = await triggerStep?.getTriggerCommand();
+
+  if (trigger?.type === 'webhook' && trigger.unregisterHook) {
+    const $ = await globalVariable({
+      flow,
+      connection: await triggerStep.$relatedQuery('connection'),
+      app: await triggerStep.getApp(),
+      step: triggerStep,
+    });
+
+    try {
+      await trigger.unregisterHook($);
+    } catch (error) {
+      // suppress error as the remote resource might have been already deleted
+      logger.debug(`Failed to unregister webhook for flow ${flow.id}: ${error.message}`);
+    }
+  }
+
   const executionIds = (
     await flow.$relatedQuery('executions').select('executions.id')
   ).map((execution: Execution) => execution.id);

packages/backend/src/graphql/mutations/duplicate-flow.ts

@@ -81,6 +81,10 @@ const duplicateFlow = async (
         parameters: updateStepVariables(step.parameters, newStepIds),
       });
 
+    if (duplicatedStep.isTrigger) {
+      await duplicatedStep.updateWebhookUrl();
+    }
+
     newStepIds[step.id] = duplicatedStep.id;
   }
 

packages/backend/src/graphql/queries/get-automatisch-info.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import request from 'supertest';
 import app from '../../app';
 import * as license from '../../helpers/license.ee';
@@ -22,7 +23,7 @@ describe('graphQL getAutomatischInfo query', () => {
     beforeEach(async () => {
       jest.spyOn(license, 'getLicense').mockResolvedValue(false);
 
-      jest.replaceProperty(appConfig, 'isCloud', false)
+      jest.replaceProperty(appConfig, 'isCloud', false);
     });
 
     it('should return empty license data', async () => {
@@ -36,9 +37,9 @@ describe('graphQL getAutomatischInfo query', () => {
           getAutomatischInfo: {
             isCloud: false,
             license: {
-              id: null as string,
+              id: null,
-              name: null as string,
+              name: null,
-              expireAt: null as string,
+              expireAt: null,
               verified: false,
             },
           },
@@ -63,7 +64,7 @@ describe('graphQL getAutomatischInfo query', () => {
 
     describe('and with cloud flag enabled', () => {
       beforeEach(async () => {
-        jest.replaceProperty(appConfig, 'isCloud', true)
+        jest.replaceProperty(appConfig, 'isCloud', true);
       });
 
       it('should return all license data', async () => {
@@ -92,7 +93,7 @@ describe('graphQL getAutomatischInfo query', () => {
 
     describe('and with cloud flag disabled', () => {
       beforeEach(async () => {
-        jest.replaceProperty(appConfig, 'isCloud', false)
+        jest.replaceProperty(appConfig, 'isCloud', false);
       });
 
       it('should return all license data', async () => {

packages/backend/src/graphql/queries/get-current-user.test.ts

@@ -1,9 +1,9 @@
-import request, { Test } from 'supertest';
+// @ts-nocheck
+import request from 'supertest';
 import app from '../../app';
 import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
 import { createRole } from '../../../test/factories/role';
 import { createUser } from '../../../test/factories/user';
-import { IRole, IUser } from '@automatisch/types';
 
 describe('graphQL getCurrentUser query', () => {
   describe('with unauthenticated user', () => {
@@ -31,7 +31,7 @@ describe('graphQL getCurrentUser query', () => {
   });
 
   describe('with authenticated user', () => {
-    let role: IRole, currentUser: IUser, token: string, requestObject: Test;
+    let role, currentUser, token, requestObject;
 
     beforeEach(async () => {
       role = await createRole({
@@ -70,12 +70,12 @@ describe('graphQL getCurrentUser query', () => {
       const expectedResponsePayload = {
         data: {
           getCurrentUser: {
-            createdAt: (currentUser.createdAt as Date).getTime().toString(),
+            createdAt: currentUser.createdAt.getTime().toString(),
             email: currentUser.email,
             fullName: currentUser.fullName,
             id: currentUser.id,
             role: { id: role.id, name: role.name },
-            updatedAt: (currentUser.updatedAt as Date).getTime().toString(),
+            updatedAt: currentUser.updatedAt.getTime().toString(),
           },
         },
       };

packages/backend/src/graphql/queries/get-executions.test.ts

@@ -0,0 +1,489 @@
+// @ts-nocheck
+import request from 'supertest';
+import app from '../../app';
+import appConfig from '../../config/app';
+import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
+import { createRole } from '../../../test/factories/role';
+import { createPermission } from '../../../test/factories/permission';
+import { createUser } from '../../../test/factories/user';
+import { createFlow } from '../../../test/factories/flow';
+import { createStep } from '../../../test/factories/step';
+import { createExecution } from '../../../test/factories/execution';
+import { createExecutionStep } from '../../../test/factories/execution-step';
+
+describe('graphQL getExecutions query', () => {
+  const query = `
+    query {
+      getExecutions(limit: 10, offset: 0) {
+        pageInfo {
+          currentPage
+          totalPages
+        }
+        edges {
+          node {
+            id
+            testRun
+            createdAt
+            updatedAt
+            status
+            flow {
+              id
+              name
+              active
+              steps {
+                iconUrl
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+
+  const invalidToken = 'invalid-token';
+
+  describe('with unauthenticated user', () => {
+    it('should throw not authorized error', async () => {
+      const response = await request(app)
+        .post('/graphql')
+        .set('Authorization', invalidToken)
+        .send({ query })
+        .expect(200);
+
+      expect(response.body.errors).toBeDefined();
+      expect(response.body.errors[0].message).toEqual('Not Authorised!');
+    });
+  });
+
+  describe('with authenticated user', () => {
+    describe('and without permissions', () => {
+      it('should throw not authorized error', async () => {
+        const userWithoutPermissions = await createUser();
+        const token = createAuthTokenByUserId(userWithoutPermissions.id);
+
+        const response = await request(app)
+          .post('/graphql')
+          .set('Authorization', token)
+          .send({ query })
+          .expect(200);
+
+        expect(response.body.errors).toBeDefined();
+        expect(response.body.errors[0].message).toEqual('Not authorized!');
+      });
+    });
+
+    describe('and with correct permission', () => {
+      let role,
+        currentUser,
+        anotherUser,
+        token,
+        flowOne,
+        stepOneForFlowOne,
+        stepTwoForFlowOne,
+        executionOne,
+        flowTwo,
+        stepOneForFlowTwo,
+        stepTwoForFlowTwo,
+        executionTwo,
+        flowThree,
+        stepOneForFlowThree,
+        stepTwoForFlowThree,
+        executionThree,
+        expectedResponseForExecutionOne,
+        expectedResponseForExecutionTwo,
+        expectedResponseForExecutionThree;
+
+      beforeEach(async () => {
+        role = await createRole({
+          key: 'sample',
+          name: 'sample',
+        });
+
+        currentUser = await createUser({
+          roleId: role.id,
+          fullName: 'Current User',
+        });
+
+        anotherUser = await createUser();
+
+        token = createAuthTokenByUserId(currentUser.id);
+
+        flowOne = await createFlow({
+          userId: currentUser.id,
+        });
+
+        stepOneForFlowOne = await createStep({
+          flowId: flowOne.id,
+        });
+
+        stepTwoForFlowOne = await createStep({
+          flowId: flowOne.id,
+        });
+
+        executionOne = await createExecution({
+          flowId: flowOne.id,
+        });
+
+        await createExecutionStep({
+          executionId: executionOne.id,
+          stepId: stepOneForFlowOne.id,
+          status: 'success',
+        });
+
+        await createExecutionStep({
+          executionId: executionOne.id,
+          stepId: stepTwoForFlowOne.id,
+          status: 'success',
+        });
+
+        flowTwo = await createFlow({
+          userId: currentUser.id,
+        });
+
+        stepOneForFlowTwo = await createStep({
+          flowId: flowTwo.id,
+        });
+
+        stepTwoForFlowTwo = await createStep({
+          flowId: flowTwo.id,
+        });
+
+        executionTwo = await createExecution({
+          flowId: flowTwo.id,
+        });
+
+        await createExecutionStep({
+          executionId: executionTwo.id,
+          stepId: stepOneForFlowTwo.id,
+          status: 'success',
+        });
+
+        await createExecutionStep({
+          executionId: executionTwo.id,
+          stepId: stepTwoForFlowTwo.id,
+          status: 'failure',
+        });
+
+        flowThree = await createFlow({
+          userId: anotherUser.id,
+        });
+
+        stepOneForFlowThree = await createStep({
+          flowId: flowThree.id,
+        });
+
+        stepTwoForFlowThree = await createStep({
+          flowId: flowThree.id,
+        });
+
+        executionThree = await createExecution({
+          flowId: flowThree.id,
+        });
+
+        await createExecutionStep({
+          executionId: executionThree.id,
+          stepId: stepOneForFlowThree.id,
+          status: 'success',
+        });
+
+        await createExecutionStep({
+          executionId: executionThree.id,
+          stepId: stepTwoForFlowThree.id,
+          status: 'failure',
+        });
+
+        expectedResponseForExecutionOne = {
+          node: {
+            createdAt: executionOne.createdAt.getTime().toString(),
+            flow: {
+              active: flowOne.active,
+              id: flowOne.id,
+              name: flowOne.name,
+              steps: [
+                {
+                  iconUrl: `${appConfig.baseUrl}/apps/${stepOneForFlowOne.appKey}/assets/favicon.svg`,
+                },
+                {
+                  iconUrl: `${appConfig.baseUrl}/apps/${stepTwoForFlowOne.appKey}/assets/favicon.svg`,
+                },
+              ],
+            },
+            id: executionOne.id,
+            status: 'success',
+            testRun: executionOne.testRun,
+            updatedAt: executionOne.updatedAt.getTime().toString(),
+          },
+        };
+
+        expectedResponseForExecutionTwo = {
+          node: {
+            createdAt: executionTwo.createdAt.getTime().toString(),
+            flow: {
+              active: flowTwo.active,
+              id: flowTwo.id,
+              name: flowTwo.name,
+              steps: [
+                {
+                  iconUrl: `${appConfig.baseUrl}/apps/${stepTwoForFlowTwo.appKey}/assets/favicon.svg`,
+                },
+                {
+                  iconUrl: `${appConfig.baseUrl}/apps/${stepTwoForFlowTwo.appKey}/assets/favicon.svg`,
+                },
+              ],
+            },
+            id: executionTwo.id,
+            status: 'failure',
+            testRun: executionTwo.testRun,
+            updatedAt: executionTwo.updatedAt.getTime().toString(),
+          },
+        };
+
+        expectedResponseForExecutionThree = {
+          node: {
+            createdAt: executionThree.createdAt.getTime().toString(),
+            flow: {
+              active: flowThree.active,
+              id: flowThree.id,
+              name: flowThree.name,
+              steps: [
+                {
+                  iconUrl: `${appConfig.baseUrl}/apps/${stepOneForFlowThree.appKey}/assets/favicon.svg`,
+                },
+                {
+                  iconUrl: `${appConfig.baseUrl}/apps/${stepTwoForFlowThree.appKey}/assets/favicon.svg`,
+                },
+              ],
+            },
+            id: executionThree.id,
+            status: 'failure',
+            testRun: executionThree.testRun,
+            updatedAt: executionThree.updatedAt.getTime().toString(),
+          },
+        };
+      });
+
+      describe('and with isCreator condition', () => {
+        beforeEach(async () => {
+          await createPermission({
+            action: 'read',
+            subject: 'Execution',
+            roleId: role.id,
+            conditions: ['isCreator'],
+          });
+        });
+
+        it('should return executions data of the current user', async () => {
+          const response = await request(app)
+            .post('/graphql')
+            .set('Authorization', token)
+            .send({ query })
+            .expect(200);
+
+          const expectedResponsePayload = {
+            data: {
+              getExecutions: {
+                edges: [
+                  expectedResponseForExecutionTwo,
+                  expectedResponseForExecutionOne,
+                ],
+                pageInfo: { currentPage: 1, totalPages: 1 },
+              },
+            },
+          };
+
+          expect(response.body).toEqual(expectedResponsePayload);
+        });
+      });
+
+      describe('and without isCreator condition', () => {
+        beforeEach(async () => {
+          await createPermission({
+            action: 'read',
+            subject: 'Execution',
+            roleId: role.id,
+            conditions: [],
+          });
+        });
+
+        it('should return executions data of all users', async () => {
+          const response = await request(app)
+            .post('/graphql')
+            .set('Authorization', token)
+            .send({ query })
+            .expect(200);
+
+          const expectedResponsePayload = {
+            data: {
+              getExecutions: {
+                edges: [
+                  expectedResponseForExecutionThree,
+                  expectedResponseForExecutionTwo,
+                  expectedResponseForExecutionOne,
+                ],
+                pageInfo: { currentPage: 1, totalPages: 1 },
+              },
+            },
+          };
+
+          expect(response.body).toEqual(expectedResponsePayload);
+        });
+      });
+
+      describe('and with filters', () => {
+        beforeEach(async () => {
+          await createPermission({
+            action: 'read',
+            subject: 'Execution',
+            roleId: role.id,
+            conditions: [],
+          });
+        });
+
+        it('should return executions data for the specified flow', async () => {
+          const query = `
+            query {
+              getExecutions(limit: 10, offset: 0, filters: { flowId: "${flowOne.id}" }) {
+                pageInfo {
+                  currentPage
+                  totalPages
+                }
+                edges {
+                  node {
+                    id
+                    testRun
+                    createdAt
+                    updatedAt
+                    status
+                    flow {
+                      id
+                      name
+                      active
+                      steps {
+                        iconUrl
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          `;
+
+          const response = await request(app)
+            .post('/graphql')
+            .set('Authorization', token)
+            .send({ query })
+            .expect(200);
+
+          const expectedResponsePayload = {
+            data: {
+              getExecutions: {
+                edges: [expectedResponseForExecutionOne],
+                pageInfo: { currentPage: 1, totalPages: 1 },
+              },
+            },
+          };
+
+          expect(response.body).toEqual(expectedResponsePayload);
+        });
+
+        it('should return only executions data with success status', async () => {
+          const query = `
+            query {
+              getExecutions(limit: 10, offset: 0, filters: { status: "success" }) {
+                pageInfo {
+                  currentPage
+                  totalPages
+                }
+                edges {
+                  node {
+                    id
+                    testRun
+                    createdAt
+                    updatedAt
+                    status
+                    flow {
+                      id
+                      name
+                      active
+                      steps {
+                        iconUrl
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          `;
+
+          const response = await request(app)
+            .post('/graphql')
+            .set('Authorization', token)
+            .send({ query })
+            .expect(200);
+
+          const expectedResponsePayload = {
+            data: {
+              getExecutions: {
+                edges: [expectedResponseForExecutionOne],
+                pageInfo: { currentPage: 1, totalPages: 1 },
+              },
+            },
+          };
+
+          expect(response.body).toEqual(expectedResponsePayload);
+        });
+
+        it('should return only executions data within date range', async () => {
+          const createdAtFrom = executionOne.createdAt.getTime().toString();
+
+          const createdAtTo = executionOne.createdAt.getTime().toString();
+
+          const query = `
+            query {
+              getExecutions(limit: 10, offset: 0, filters: { createdAt: { from: "${createdAtFrom}", to: "${createdAtTo}" }}) {
+                pageInfo {
+                  currentPage
+                  totalPages
+                }
+                edges {
+                  node {
+                    id
+                    testRun
+                    createdAt
+                    updatedAt
+                    status
+                    flow {
+                      id
+                      name
+                      active
+                      steps {
+                        iconUrl
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          `;
+
+          const response = await request(app)
+            .post('/graphql')
+            .set('Authorization', token)
+            .send({ query })
+            .expect(200);
+
+          const expectedResponsePayload = {
+            data: {
+              getExecutions: {
+                edges: [expectedResponseForExecutionOne],
+                pageInfo: { currentPage: 1, totalPages: 1 },
+              },
+            },
+          };
+
+          expect(response.body).toEqual(expectedResponsePayload);
+        });
+      });
+    });
+  });
+});

packages/backend/src/graphql/queries/get-executions.ts

@@ -1,11 +1,22 @@
 import { raw } from 'objection';
+import { DateTime } from 'luxon';
 import Context from '../../types/express/context';
 import Execution from '../../models/execution';
 import paginate from '../../helpers/pagination';
 
+type Filters = {
+  flowId?: string;
+  status?: string;
+  createdAt?: {
+    from?: string;
+    to?: string;
+  };
+}
+
 type Params = {
   limit: number;
   offset: number;
+  filters?: Filters;
 };
 
 const getExecutions = async (
@@ -15,6 +26,8 @@ const getExecutions = async (
 ) => {
   const conditions = context.currentUser.can('read', 'Execution');
 
+  const filters = params.filters;
+
   const userExecutions = context.currentUser.$relatedQuery('executions');
   const allExecutions = Execution.query();
   const executionBaseQuery = conditions.isCreator ? userExecutions : allExecutions;
@@ -32,16 +45,49 @@ const getExecutions = async (
     .clone()
     .joinRelated('executionSteps as execution_steps')
     .select('executions.*', raw(selectStatusStatement))
+    .groupBy('executions.id')
+    .orderBy('created_at', 'desc');
+
+  const computedExecutions = Execution
+    .query()
+    .with('executions', executions)
     .withSoftDeleted()
     .withGraphFetched({
       flow: {
         steps: true,
       },
-    })
+    });
-    .groupBy('executions.id')
-    .orderBy('updated_at', 'desc');
 
-  return paginate(executions, params.limit, params.offset);
+  if (filters?.flowId) {
+    computedExecutions.where('executions.flow_id', filters.flowId);
+  }
+
+  if (filters?.status) {
+    computedExecutions.where('executions.status', filters.status);
+  }
+
+  if (filters?.createdAt) {
+    const createdAtFilter = filters.createdAt;
+    if (createdAtFilter.from) {
+      const isoFromDateTime = DateTime
+        .fromMillis(
+          parseInt(createdAtFilter.from, 10)
+        )
+        .toISO();
+      computedExecutions.where('executions.created_at', '>=', isoFromDateTime);
+    }
+
+    if (createdAtFilter.to) {
+      const isoToDateTime = DateTime
+        .fromMillis(
+          parseInt(createdAtFilter.to, 10)
+        )
+        .toISO();
+      computedExecutions.where('executions.created_at', '<=', isoToDateTime);
+    }
+  }
+
+  return paginate(computedExecutions, params.limit, params.offset);
 };
 
 export default getExecutions;

packages/backend/src/graphql/queries/get-flow.test.ts

@@ -0,0 +1,262 @@
+// @ts-nocheck
+import request from 'supertest';
+import app from '../../app';
+import appConfig from '../../config/app';
+import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
+import { createRole } from '../../../test/factories/role';
+import { createPermission } from '../../../test/factories/permission';
+import { createUser } from '../../../test/factories/user';
+import { createFlow } from '../../../test/factories/flow';
+import { createStep } from '../../../test/factories/step';
+import { createConnection } from '../../../test/factories/connection';
+
+describe('graphQL getFlow query', () => {
+  const query = (flowId) => {
+    return `
+      query {
+        getFlow(id: "${flowId}") {
+          id
+          name
+          active
+          status
+          steps {
+            id
+            type
+            key
+            appKey
+            iconUrl
+            webhookUrl
+            status
+            position
+            connection {
+              id
+              verified
+              createdAt
+            }
+            parameters
+          }
+        }
+      }
+    `;
+  };
+
+  describe('with unauthenticated user', () => {
+    it('should throw not authorized error', async () => {
+      const invalidToken = 'invalid-token';
+      const flow = await createFlow();
+
+      const response = await request(app)
+        .post('/graphql')
+        .set('Authorization', invalidToken)
+        .send({ query: query(flow.id) })
+        .expect(200);
+
+      expect(response.body.errors).toBeDefined();
+      expect(response.body.errors[0].message).toEqual('Not Authorised!');
+    });
+  });
+
+  describe('with authenticated user', () => {
+    describe('and without permissions', () => {
+      it('should throw not authorized error', async () => {
+        const userWithoutPermissions = await createUser();
+        const token = createAuthTokenByUserId(userWithoutPermissions.id);
+        const flow = await createFlow();
+
+        const response = await request(app)
+          .post('/graphql')
+          .set('Authorization', token)
+          .send({ query: query(flow.id) })
+          .expect(200);
+
+        expect(response.body.errors).toBeDefined();
+        expect(response.body.errors[0].message).toEqual('Not authorized!');
+      });
+    });
+
+    describe('and with correct permission', () => {
+      let currentUser, currentUserRole, currentUserFlow;
+
+      beforeEach(async () => {
+        currentUserRole = await createRole();
+        currentUser = await createUser({ roleId: currentUserRole.id });
+        currentUserFlow = await createFlow({ userId: currentUser.id });
+      });
+
+      describe('and with isCreator condition', () => {
+        it('should return executions data of the current user', async () => {
+          await createPermission({
+            action: 'read',
+            subject: 'Flow',
+            roleId: currentUserRole.id,
+            conditions: ['isCreator'],
+          });
+
+          const triggerStep = await createStep({
+            flowId: currentUserFlow.id,
+            type: 'trigger',
+            key: 'catchRawWebhook',
+            webhookPath: `/webhooks/flows/${currentUserFlow.id}`,
+          });
+
+          const actionConnection = await createConnection({
+            userId: currentUser.id,
+            formattedData: {
+              screenName: 'Test',
+              authenticationKey: 'test key',
+            },
+          });
+
+          const actionStep = await createStep({
+            flowId: currentUserFlow.id,
+            type: 'action',
+            connectionId: actionConnection.id,
+            key: 'translateText',
+          });
+
+          const token = createAuthTokenByUserId(currentUser.id);
+
+          const response = await request(app)
+            .post('/graphql')
+            .set('Authorization', token)
+            .send({ query: query(currentUserFlow.id) })
+            .expect(200);
+
+          const expectedResponsePayload = {
+            data: {
+              getFlow: {
+                active: currentUserFlow.active,
+                id: currentUserFlow.id,
+                name: currentUserFlow.name,
+                status: 'draft',
+                steps: [
+                  {
+                    appKey: triggerStep.appKey,
+                    connection: null,
+                    iconUrl: `${appConfig.baseUrl}/apps/${triggerStep.appKey}/assets/favicon.svg`,
+                    id: triggerStep.id,
+                    key: 'catchRawWebhook',
+                    parameters: {},
+                    position: 1,
+                    status: triggerStep.status,
+                    type: 'trigger',
+                    webhookUrl: `${appConfig.baseUrl}/webhooks/flows/${currentUserFlow.id}`,
+                  },
+                  {
+                    appKey: actionStep.appKey,
+                    connection: {
+                      createdAt: actionConnection.createdAt
+                        .getTime()
+                        .toString(),
+                      id: actionConnection.id,
+                      verified: actionConnection.verified,
+                    },
+                    iconUrl: `${appConfig.baseUrl}/apps/${actionStep.appKey}/assets/favicon.svg`,
+                    id: actionStep.id,
+                    key: 'translateText',
+                    parameters: {},
+                    position: 1,
+                    status: actionStep.status,
+                    type: 'action',
+                    webhookUrl: 'http://localhost:3000/null',
+                  },
+                ],
+              },
+            },
+          };
+
+          expect(response.body).toEqual(expectedResponsePayload);
+        });
+      });
+
+      describe('and without isCreator condition', () => {
+        it('should return executions data of all users', async () => {
+          await createPermission({
+            action: 'read',
+            subject: 'Flow',
+            roleId: currentUserRole.id,
+            conditions: [],
+          });
+
+          const anotherUser = await createUser();
+          const anotherUserFlow = await createFlow({ userId: anotherUser.id });
+
+          const triggerStep = await createStep({
+            flowId: anotherUserFlow.id,
+            type: 'trigger',
+            key: 'catchRawWebhook',
+            webhookPath: `/webhooks/flows/${anotherUserFlow.id}`,
+          });
+
+          const actionConnection = await createConnection({
+            userId: anotherUser.id,
+            formattedData: {
+              screenName: 'Test',
+              authenticationKey: 'test key',
+            },
+          });
+
+          const actionStep = await createStep({
+            flowId: anotherUserFlow.id,
+            type: 'action',
+            connectionId: actionConnection.id,
+            key: 'translateText',
+          });
+
+          const token = createAuthTokenByUserId(currentUser.id);
+
+          const response = await request(app)
+            .post('/graphql')
+            .set('Authorization', token)
+            .send({ query: query(anotherUserFlow.id) })
+            .expect(200);
+
+          const expectedResponsePayload = {
+            data: {
+              getFlow: {
+                active: anotherUserFlow.active,
+                id: anotherUserFlow.id,
+                name: anotherUserFlow.name,
+                status: 'draft',
+                steps: [
+                  {
+                    appKey: triggerStep.appKey,
+                    connection: null,
+                    iconUrl: `${appConfig.baseUrl}/apps/${triggerStep.appKey}/assets/favicon.svg`,
+                    id: triggerStep.id,
+                    key: 'catchRawWebhook',
+                    parameters: {},
+                    position: 1,
+                    status: triggerStep.status,
+                    type: 'trigger',
+                    webhookUrl: `${appConfig.baseUrl}/webhooks/flows/${anotherUserFlow.id}`,
+                  },
+                  {
+                    appKey: actionStep.appKey,
+                    connection: {
+                      createdAt: actionConnection.createdAt
+                        .getTime()
+                        .toString(),
+                      id: actionConnection.id,
+                      verified: actionConnection.verified,
+                    },
+                    iconUrl: `${appConfig.baseUrl}/apps/${actionStep.appKey}/assets/favicon.svg`,
+                    id: actionStep.id,
+                    key: 'translateText',
+                    parameters: {},
+                    position: 1,
+                    status: actionStep.status,
+                    type: 'action',
+                    webhookUrl: 'http://localhost:3000/null',
+                  },
+                ],
+              },
+            },
+          };
+
+          expect(response.body).toEqual(expectedResponsePayload);
+        });
+      });
+    });
+  });
+});

packages/backend/src/graphql/queries/get-role.ee.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import request from 'supertest';
 import app from '../../app';
 import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
@@ -5,21 +6,20 @@ import Crypto from 'crypto';
 import { createRole } from '../../../test/factories/role';
 import { createPermission } from '../../../test/factories/permission';
 import { createUser } from '../../../test/factories/user';
-import { IRole, IUser, IPermission } from '@automatisch/types';
 import * as license from '../../helpers/license.ee';
 
 describe('graphQL getRole query', () => {
-  let validRole: IRole,
+  let validRole,
-    invalidRoleId: string,
+    invalidRoleId,
-    queryWithValidRole: string,
+    queryWithValidRole,
-    queryWithInvalidRole: string,
+    queryWithInvalidRole,
-    userWithPermissions: IUser,
+    userWithPermissions,
-    userWithoutPermissions: IUser,
+    userWithoutPermissions,
-    tokenWithPermissions: string,
+    tokenWithPermissions,
-    tokenWithoutPermissions: string,
+    tokenWithoutPermissions,
-    invalidToken: string,
+    invalidToken,
-    permissionOne: IPermission,
+    permissionOne,
-    permissionTwo: IPermission;
+    permissionTwo;
 
   beforeEach(async () => {
     validRole = await createRole();

packages/backend/src/graphql/queries/get-roles.ee.test.ts

@@ -1,22 +1,22 @@
+// @ts-nocheck
 import request from 'supertest';
 import app from '../../app';
 import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
 import { createRole } from '../../../test/factories/role';
 import { createPermission } from '../../../test/factories/permission';
 import { createUser } from '../../../test/factories/user';
-import { IRole, IUser } from '@automatisch/types';
 import * as license from '../../helpers/license.ee';
 
 describe('graphQL getRoles query', () => {
-  let currentUserRole: IRole,
+  let currentUserRole,
-    roleOne: IRole,
+    roleOne,
-    roleSecond: IRole,
+    roleSecond,
-    query: string,
+    query,
-    userWithPermissions: IUser,
+    userWithPermissions,
-    userWithoutPermissions: IUser,
+    userWithoutPermissions,
-    tokenWithPermissions: string,
+    tokenWithPermissions,
-    tokenWithoutPermissions: string,
+    tokenWithoutPermissions,
-    invalidToken: string;
+    invalidToken;
 
   beforeEach(async () => {
     currentUserRole = await createRole({ name: 'Current user role' });

packages/backend/src/graphql/queries/get-trial-status.ee.test.ts

@@ -1,6 +1,6 @@
+// @ts-nocheck
 import request from 'supertest';
 import app from '../../app';
-import { IUser } from '@automatisch/types';
 import User from '../../models/user';
 import { createUser } from '../../../test/factories/user';
 import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
@@ -32,7 +32,7 @@ describe('graphQL getTrialStatus query', () => {
   });
 
   describe('with authenticated user', () => {
-    let user: IUser, userToken: string;
+    let user, userToken;
 
     beforeEach(async () => {
       const trialExpiryDate = DateTime.now().plus({ days: 30 }).toISODate();
@@ -54,7 +54,7 @@ describe('graphQL getTrialStatus query', () => {
           .expect(200);
 
         const expectedResponsePayload = {
-          data: { getTrialStatus: null as string },
+          data: { getTrialStatus: null },
         };
 
         expect(response.body).toEqual(expectedResponsePayload);
@@ -82,7 +82,7 @@ describe('graphQL getTrialStatus query', () => {
             .expect(200);
 
           const expectedResponsePayload = {
-            data: { getTrialStatus: null as string },
+            data: { getTrialStatus: null },
           };
 
           expect(response.body).toEqual(expectedResponsePayload);

packages/backend/src/graphql/queries/get-user.test.ts

@@ -1,11 +1,11 @@
-import request, { Test } from 'supertest';
+// @ts-nocheck
+import request from 'supertest';
 import app from '../../app';
 import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
 import Crypto from 'crypto';
 import { createRole } from '../../../test/factories/role';
 import { createPermission } from '../../../test/factories/permission';
 import { createUser } from '../../../test/factories/user';
-import { IRole, IUser } from '@automatisch/types';
 
 describe('graphQL getUser query', () => {
   describe('with unauthenticated user', () => {
@@ -61,11 +61,7 @@ describe('graphQL getUser query', () => {
     });
 
     describe('and correct permissions', () => {
-      let role: IRole,
+      let role, currentUser, anotherUser, token, requestObject;
-        currentUser: IUser,
-        anotherUser: IUser,
-        token: string,
-        requestObject: Test;
 
       beforeEach(async () => {
         role = await createRole({
@@ -116,12 +112,12 @@ describe('graphQL getUser query', () => {
         const expectedResponsePayload = {
           data: {
             getUser: {
-              createdAt: (anotherUser.createdAt as Date).getTime().toString(),
+              createdAt: anotherUser.createdAt.getTime().toString(),
               email: anotherUser.email,
               fullName: anotherUser.fullName,
               id: anotherUser.id,
               role: { id: role.id, name: role.name },
-              updatedAt: (anotherUser.updatedAt as Date).getTime().toString(),
+              updatedAt: anotherUser.updatedAt.getTime().toString(),
             },
           },
         };

packages/backend/src/graphql/queries/get-users.test.ts

@@ -1,10 +1,10 @@
-import request, { Test } from 'supertest';
+// @ts-nocheck
+import request from 'supertest';
 import app from '../../app';
 import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
 import { createRole } from '../../../test/factories/role';
 import { createPermission } from '../../../test/factories/permission';
 import { createUser } from '../../../test/factories/user';
-import { IRole, IUser } from '@automatisch/types';
 
 describe('graphQL getUsers query', () => {
   const query = `
@@ -61,11 +61,7 @@ describe('graphQL getUsers query', () => {
     });
 
     describe('and with correct permissions', () => {
-      let role: IRole,
+      let role, currentUser, anotherUser, token, requestObject;
-        currentUser: IUser,
-        anotherUser: IUser,
-        token: string,
-        requestObject: Test;
 
       beforeEach(async () => {
         role = await createRole({

packages/backend/src/graphql/queries/healthcheck.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import request from 'supertest';
 import app from '../../app';
 import appConfig from '../../config/app';

packages/backend/src/graphql/schema.graphql

@@ -20,7 +20,11 @@ type Query {
   ): FlowConnection
   getStepWithTestExecutions(stepId: String!): [Step]
   getExecution(executionId: String!): Execution
-  getExecutions(limit: Int!, offset: Int!): ExecutionConnection
+  getExecutions(
+    limit: Int!
+    offset: Int!
+    filters: ExecutionFiltersInput
+  ): ExecutionConnection
   getExecutionSteps(
     executionId: String!
     limit: Int!
@@ -795,6 +799,17 @@ type Notification {
   description: String
 }
 
+input ExecutionCreatedAtFilterInput {
+  from: String
+  to: String
+}
+
+input ExecutionFiltersInput {
+  flowId: String
+  createdAt: ExecutionCreatedAtFilterInput
+  status: String
+}
+
 schema {
   query: Query
   mutation: Mutation

packages/backend/test/factories/connection.ts

@@ -10,6 +10,8 @@ export const createConnection = async (params: Partial<Connection> = {}) => {
     authenticationKey: 'test key',
   };
 
+  delete params.formattedData;
+
   params.data = AES.encrypt(
     JSON.stringify(formattedData),
     appConfig.encryptionKey

packages/backend/test/factories/execution.ts

@@ -4,6 +4,8 @@ import { createFlow } from './flow';
 export const createExecution = async (params: Partial<Execution> = {}) => {
   params.flowId = params?.flowId || (await createFlow()).id;
   params.testRun = params?.testRun || false;
+  params.createdAt = params?.createdAt || new Date().toISOString();
+  params.updatedAt = params?.updatedAt || new Date().toISOString();
 
   const [execution] = await global.knex
     .table('executions')

packages/backend/test/factories/flow.ts

@@ -4,6 +4,8 @@ import { createUser } from './user';
 export const createFlow = async (params: Partial<Flow> = {}) => {
   params.userId = params?.userId || (await createUser()).id;
   params.name = params?.name || 'Name your flow!';
+  params.createdAt = params?.createdAt || new Date().toISOString();
+  params.updatedAt = params?.updatedAt || new Date().toISOString();
 
   const [flow] = await global.knex.table('flows').insert(params).returning('*');
 

packages/backend/test/factories/permission.ts

@@ -1,24 +1,15 @@
-import { IPermission } from '@automatisch/types';
+import Permission from '../../src/models/permission';
 import { createRole } from './role';
 
-type PermissionParams = {
+export const createPermission = async (params: Partial<Permission> = {}) => {
-  roleId?: string;
+  params.roleId = params?.roleId || (await createRole()).id;
-  action?: string;
+  params.action = params?.action || 'read';
-  subject?: string;
+  params.subject = params?.subject || 'User';
-};
+  params.conditions = params?.conditions || ['isCreator'];
-
-export const createPermission = async (
-  params: PermissionParams = {}
-): Promise<IPermission> => {
-  const permissionData = {
-    roleId: params?.roleId || (await createRole()).id,
-    action: params?.action || 'read',
-    subject: params?.subject || 'User',
-  };
 
   const [permission] = await global.knex
     .table('permissions')
-    .insert(permissionData)
+    .insert(params)
     .returning('*');
 
   return permission;

packages/backend/test/factories/step.ts

@@ -13,7 +13,9 @@ export const createStep = async (params: Partial<Step> = {}) => {
     .first();
 
   params.position = params?.position || (lastStep?.position || 0) + 1;
-  params.status = params?.status || 'incomplete';
+  params.status = params?.status || 'completed';
+  params.appKey =
+    params?.appKey || (params.type === 'action' ? 'deepl' : 'webhook');
 
   const [step] = await global.knex.table('steps').insert(params).returning('*');
 

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

@@ -377,7 +377,10 @@ export default defineConfig({
           text: 'Trello',
           collapsible: true,
           collapsed: true,
-          items: [{ text: 'Connection', link: '/apps/trello/connection' }],
+          items: [
+            { text: 'Actions', link: '/apps/trello/actions' },
+            { text: 'Connection', link: '/apps/trello/connection' },
+          ],
         },
         {
           text: 'Twilio',
@@ -389,6 +392,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/twilio/connection' },
           ],
         },
+        {
+          text: 'Twitch',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/twitch/connection' }],
+        },
         {
           text: 'Twitter',
           collapsible: true,
@@ -435,6 +444,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/youtube/connection' },
           ],
         },
+        {
+          text: 'Zendesk',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/zendesk/connection' }],
+        },
       ],
       '/': [
         {

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

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/trello.svg
+items:
+  - name: Create card
+    desc: Creates a new card within a specified board and list.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

@@ -0,0 +1,19 @@
+# Twitch
+
+:::info
+This page explains the steps you need to follow to set up the Twitch
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [developer console](https://dev.twitch.tv/console) to register an app.
+2. Select on the **Applications** tab and click on the **Register Your Application**.
+3. Enter a name for your app.
+4. Copy **OAuth Redirect URL** from Automatisch to **OAuth Redirect URLs** field.
+5. Select a **Category** and click on the **Create** button.
+6. Go back to **Applications** tab and choose your app under **Developer Applications**.
+7. Click the **Manage**.
+8. Copy the **Your Client ID** value from the following popup to the `Client ID` field on Automatisch.
+9. Click on the **New Secret** and generate your client secret key.
+10. Copy the **Your Client Secret** value from the following popup to the `Client Secret` field on Automatisch.
+11. Click **Submit** button on Automatisch.
+12. Congrats! Start using your new Twitch connection within the flows.

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

@@ -0,0 +1,21 @@
+# Zendesk
+
+:::info
+This page explains the steps you need to follow to set up the Zendesk
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Fill `Zendesk Subdomain URL` with your dashboard URL, for example: `https://yourcompany.zendesk.com`.
+2. Go to your Zendesk dashboard.
+3. Click on **Zendesk Products** at the top right corner and click **Admin Center** from the dropdown.
+4. Enter **App and integrations** section.
+5. Click on **Zendesk API** from the sidebar.
+6. Click on **OAuth Clients** tab.
+7. Click on **Add OAuth Client** button.
+8. Enter necessary information in the form.
+9. Copy **OAuth Redirect URL** from Automatisch to **Redirect URLs** field in the form.
+10. Enter your preferred client ID value in **Unique Identifier** field.
+11. Save the form to complete creating the OAuth client.
+12. Copy the `Unique identifier` value from the page to the `Client ID` field on Automatisch.
+13. Copy the `Secret` value from the page to the `Client Secret` field on Automatisch.
+14. Now, you can start using the Zendesk connection with Automatisch.

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

@@ -39,6 +39,7 @@ The following integrations are currently supported by Automatisch.
 - [Stripe](/apps/stripe/triggers)
 - [Telegram](/apps/telegram-bot/actions)
 - [Todoist](/apps/todoist/triggers)
+- [Trello](/apps/trello/actions)
 - [Twilio](/apps/twilio/triggers)
 - [Twitter](/apps/twitter/triggers)
 - [Typeform](/apps/typeform/triggers)

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" overflow="visible" width="40" height="40" version="1.1" viewBox="0 0 40 40" x="0px" y="0px" class="ScSvg-sc-mx5axi-2 iAAiAK"><g fill="#5C16C5"><polygon points="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animate dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate><animate dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate></polygon><polygon points="26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25" class="ScFace-sc-mx5axi-4 fDFkyX" fill="#FFFFFF"><animateTransform dur="150ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></polygon><g class="ScEyes-sc-mx5axi-5 fAMMxB" fill="#5C16C5"><path d="M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animateTransform dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></path></g></g></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="363" height="259" fill="#03363d"><path d="M173.82 40.5v112.86H80.34L173.82 40.5zm0-40.5a46.74 46.74 0 1 1-93.48 0h93.48zm15.4 153.37a46.74 46.74 0 0 1 93.48 0h-93.48zm0-40.5V0h93.5l-93.5 112.86zm52.28 137.06a18.22 18.22 0 0 0 12.95-5l6.42 6.93c-4.24 4.36-10.12 7.6-19.26 7.6-15.67 0-25.8-10.4-25.8-24.46a24 24 0 0 1 24.37-24.47c15.56 0 24.38 11.84 23.6 28.26H227c1.3 6.82 6.1 11.17 14.47 11.17m11.2-19c-1-6.37-4.8-11.06-12.4-11.06-7.07 0-12 4-13.27 11.06h25.68zM0 249.4l28.3-28.76H.67v-9.02h40.76v9.2l-28.3 28.75h28.7v9.03H0v-9.2zm73.6.52a18.22 18.22 0 0 0 12.95-5l6.42 6.93c-4.24 4.36-10.12 7.6-19.26 7.6-15.67 0-25.8-10.4-25.8-24.46a24 24 0 0 1 24.37-24.47c15.56 0 24.38 11.84 23.6 28.26H59.12c1.3 6.82 6.1 11.17 14.47 11.17m11.2-19c-1-6.37-4.8-11.06-12.4-11.06-7.07 0-12 4-13.27 11.06H84.8zm72.23 4.03c0-15 11.23-24.44 23.6-24.44a20.34 20.34 0 0 1 15.67 7.05v-27.72h10v68.6h-10V252a20.1 20.1 0 0 1-15.76 7.42c-12 0-23.5-9.5-23.5-24.43m39.82-.1a14.92 14.92 0 1 0-14.91 15.32c8.6 0 14.9-6.86 14.9-15.32m73.48 13.6l9.06-4.7a13.44 13.44 0 0 0 12.08 6.86c5.66 0 8.6-2.9 8.6-6.2 0-3.76-5.47-4.6-11.42-5.83-8-1.7-16.33-4.33-16.33-14 0-7.43 7.07-14.3 18.2-14.2 8.77 0 15.3 3.48 19 9.1l-8.4 4.6a12.19 12.19 0 0 0-10.57-5.36c-5.38 0-8.12 2.63-8.12 5.64 0 3.38 4.34 4.32 11.14 5.83 7.74 1.7 16.5 4.23 16.5 14 0 6.48-5.66 15.22-19.06 15.13-9.8 0-16.7-3.95-20.67-10.9m66.9-10.87l-7.93 8.65v12.2h-10v-68.6h10v44.93l21.23-23.3h12.18l-18.4 20.1 18.88 26.88h-11.32l-14.63-20.86zM126.8 210.53c-11.9 0-21.85 7.7-21.85 20.5v27.45h10.2V232.3c0-7.7 4.43-12.32 12-12.32s11.33 4.6 11.33 12.32v26.18h10.14v-27.45c0-12.78-10-20.5-21.85-20.5"/></svg>

packages/e2e-tests/fixtures/admin/create-user-page.js

@@ -0,0 +1,30 @@
+const { faker } = require('@faker-js/faker');
+const { AuthenticatedPage } = require('../authenticated-page');
+
+export class AdminCreateUserPage extends AuthenticatedPage {
+  screenshot = '/admin/create-user';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.fullNameInput = page.getByTestId('full-name-input');
+    this.emailInput = page.getByTestId('email-input');
+    this.passwordInput = page.getByTestId('password-input');
+    this.roleInput = page.getByTestId('role.id-autocomplete');
+    this.createButton = page.getByTestId('create-button');
+  }
+
+  seed (seed) {
+    faker.seed(seed || 0);
+  }
+
+  generateUser () {
+    return {
+      fullName: faker.person.fullName(),
+      email: faker.internet.email().toLowerCase(),
+      password: faker.internet.password()
+    }
+  }
+}

packages/e2e-tests/fixtures/admin/delete-user-modal.js

@@ -0,0 +1,19 @@
+export class DeleteUserModal {
+  screenshotPath = '/admin/delete-modal';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    this.page = page;
+    this.modal = page.getByTestId('delete-user-modal');
+    this.cancelButton = this.modal.getByTestId('confirmation-cancel-button');
+    this.deleteButton = this.modal.getByTestId('confirmation-confirm-button');
+  }
+
+  async close () {
+    await this.page.click('body', {
+      position: { x: 10, y: 10 }
+    })
+  }
+}

packages/e2e-tests/fixtures/admin/edit-user-page.js

@@ -0,0 +1,25 @@
+const { faker } = require('@faker-js/faker');
+const { AuthenticatedPage } = require('../authenticated-page');
+
+faker.seed(9002);
+
+export class AdminEditUserPage extends AuthenticatedPage {
+  screenshot = '/admin/edit-user';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.fullNameInput = page.getByTestId('full-name-input');
+    this.emailInput = page.getByTestId('email-input');
+    this.updateButton = page.getByTestId('update-button');
+  }
+
+  generateUser () {
+    return {
+      fullName: faker.person.fullName(),
+      email: faker.internet.email(),
+    }
+  }
+}

packages/e2e-tests/fixtures/admin/index.js

@@ -0,0 +1,15 @@
+const { AdminCreateUserPage } = require('./create-user-page');
+const { AdminEditUserPage } = require('./edit-user-page');
+const { AdminUsersPage } = require('./users-page');
+
+export const adminFixtures = {
+  adminUsersPage: async ({ page }, use) => {
+    await use(new AdminUsersPage(page));
+  },
+  adminCreateUserPage: async ({ page }, use) => {
+    await use(new AdminCreateUserPage(page));
+  },
+  adminEditUserPage: async ({page}, use) => {
+    await use(new AdminEditUserPage(page));
+  }
+}

packages/e2e-tests/fixtures/admin/users-page.js

@@ -0,0 +1,115 @@
+const { faker } = require('@faker-js/faker');
+const { AuthenticatedPage } = require('../authenticated-page');
+const { DeleteUserModal } = require('./delete-user-modal');
+
+faker.seed(9001);
+
+export class AdminUsersPage extends AuthenticatedPage {
+  screenshotPath = '/admin';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.createUserButton = page.getByTestId('create-user');
+    this.userRow = page.getByTestId('user-row');
+    this.deleteUserModal = new DeleteUserModal(page);
+    this.firstPageButton = page.getByTestId('first-page-button');
+    this.previousPageButton = page.getByTestId('previous-page-button');
+    this.nextPageButton = page.getByTestId('next-page-button');
+    this.lastPageButton = page.getByTestId('last-page-button');
+    this.usersLoader = page.getByTestId('users-list-loader');
+  }
+
+  async navigateTo () {
+    await this.profileMenuButton.click();
+    await this.adminMenuItem.click();
+  }
+
+  /**
+   * @param {string} email
+   */
+  async getUserRowByEmail (email) {
+    return this.userRow.filter({
+      has: this.page.getByTestId('user-email').filter({
+        hasText: email
+      })
+    });
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async getRowData (row) {
+    return {
+      fullName: await row.getByTestId('user-full-name').textContent(),
+      email: await row.getByTestId('user-email').textContent(),
+      role: await row.getByTestId('user-role').textContent()
+    }
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async clickEditUser (row) {
+    await row.getByTestId('user-edit').click();
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async clickDeleteUser (row) {
+    await row.getByTestId('delete-button').click();
+    return this.deleteUserModal;
+  }
+
+  /**
+   * @param {string} email 
+   */
+  async findUserPageWithEmail (email) {
+    // start at the first page
+    const firstPageDisabled = await this.firstPageButton.isDisabled();
+    if (!firstPageDisabled) {
+      await this.firstPageButton.click();
+    }
+
+    while (true) {
+      const rowLocator = await this.getUserRowByEmail(email);
+      if ((await rowLocator.count()) === 1) {
+        return rowLocator;
+      }
+      if (await this.nextPageButton.isDisabled()) {
+        return null;
+      } else {
+        await this.nextPageButton.click();
+      }
+    }
+  }
+
+  async getTotalRows () {
+    return await this.page.evaluate(() => {
+      const node = document.querySelector('[data-total-count]');
+      if (node) {
+        const count = Number(node.dataset.totalCount);
+        if (!isNaN(count)) {
+          return count;
+        }
+      }
+      return 0;
+    });
+  }
+
+  async getRowsPerPage () {
+    return await this.page.evaluate(() => {
+      const node = document.querySelector('[data-rows-per-page]');
+      if (node) {
+        const count = Number(node.dataset.rowsPerPage);
+        if (!isNaN(count)) {
+          return count;
+        }
+      }
+      return 0;
+    });
+  }
+}

packages/e2e-tests/fixtures/base-page.js

@@ -1,5 +1,11 @@
 const path = require('node:path');
 
+/**
+ * @typedef {(
+ *   'default' | 'success' | 'warning' | 'error' | 'info'
+ * )} SnackbarVariant - Snackbar variant types in notistack/v3, see https://notistack.com/api-reference
+ */
+
 export class BasePage {
   screenshotPath = '/';
 
@@ -8,7 +14,53 @@ export class BasePage {
    */
   constructor(page) {
     this.page = page;
-    this.snackbar = this.page.locator('#notistack-snackbar');
+    this.snackbar = page.locator('*[data-test^="snackbar"]');
+  }
+
+  /**
+   * Finds the latest snackbar message and extracts relevant data
+   * @param {string | undefined} testId 
+   * @returns {(
+   *  null | {
+   *    variant: SnackbarVariant,
+   *    text: string,
+   *    dataset: { [key: string]: string }
+   *  }
+   * )} 
+   */
+  async getSnackbarData (testId) {
+    if (!testId) {
+      testId = 'snackbar';
+    }
+    const snack = this.page.getByTestId(testId);
+    return {
+      variant: await snack.getAttribute('data-snackbar-variant'),
+      text: await snack.evaluate(node => node.innerText),
+      dataset: await snack.evaluate(node => {
+        function getChildren (n) {
+          return [n].concat(
+            ...Array.from(n.children).map(c => getChildren(c))
+          );
+        }
+        const datasets = getChildren(node).map(
+          n => Object.assign({}, n.dataset)
+        );
+        return Object.assign({}, ...datasets);
+      })
+    };
+  }
+
+  /**
+   * Closes all snackbars, should be replaced later
+   */
+  async closeSnackbar () {
+    const snackbars = await this.snackbar.all();
+    for (const snackbar of snackbars) {
+      await snackbar.click();
+    }
+    for (const snackbar of snackbars) {
+      await snackbar.waitFor({ state: 'detached' });
+    }
   }
 
   async clickAway() {

packages/e2e-tests/fixtures/index.js

@@ -5,6 +5,7 @@ const { ExecutionsPage } = require('./executions-page');
 const { FlowEditorPage } = require('./flow-editor-page');
 const { UserInterfacePage } = require('./user-interface-page');
 const { LoginPage } = require('./login-page');
+const { adminFixtures } = require('./admin');
 
 exports.test = test.extend({
   page: async ({ page }, use) => {
@@ -31,6 +32,7 @@ exports.test = test.extend({
   userInterfacePage: async ({ page }, use) => {
     await use(new UserInterfacePage(page));
   },
+  ...adminFixtures
 });
 
 exports.publicTest = test.extend({

packages/e2e-tests/package.json

@@ -24,10 +24,17 @@
     "url": "https://github.com/automatisch/automatisch/issues"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.2.0",
     "@playwright/test": "^1.36.2"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
     "dotenv": "^16.3.1",
-    "micro": "^10.0.1"
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "micro": "^10.0.1",
+    "prettier": "^2.5.1"
   }
 }

packages/e2e-tests/tests/admin/manage-users.spec.js

@@ -0,0 +1,287 @@
+const { test, expect } = require('../../fixtures/index');
+
+/**
+ * NOTE: Make sure to delete all users generated between test runs,
+ * otherwise tests will fail since users are only *soft*-deleted
+ */
+test.describe('User management page', () => {
+
+  test.beforeEach(async ({ adminUsersPage }) => {
+    await adminUsersPage.navigateTo();
+    await adminUsersPage.closeSnackbar();
+  });
+
+  test(
+    'User creation and deletion process',
+    async ({ adminCreateUserPage, adminEditUserPage, adminUsersPage }) => {
+      adminCreateUserPage.seed(9000);
+      const user = adminCreateUserPage.generateUser();
+      await adminUsersPage.usersLoader.waitFor({
+        state: 'detached' /* Note: state: 'visible' introduces flakiness
+        because visibility: hidden is used as part of the state transition in
+        notistack, see
+        https://github.com/iamhosseindhv/notistack/blob/122f47057eb7ce5a1abfe923316cf8475303e99a/src/transitions/Collapse/Collapse.tsx#L110
+        */
+      });
+      await test.step(
+        'Create a user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(user.fullName);
+          await adminCreateUserPage.emailInput.fill(user.email);
+          await adminCreateUserPage.passwordInput.fill(user.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-create-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+      await test.step(
+        'Check the user exists with the expected properties',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          const userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          const data = await adminUsersPage.getRowData(userRow);
+          await expect(data.email).toBe(user.email);
+          await expect(data.fullName).toBe(user.fullName);
+          await expect(data.role).toBe('Admin');
+        }
+      );
+      await test.step(
+        'Edit user info and make sure the edit works correctly',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          
+          let userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          await adminUsersPage.clickEditUser(userRow);
+          const newUserInfo = adminEditUserPage.generateUser();
+          await adminEditUserPage.fullNameInput.fill(newUserInfo.fullName);
+          await adminEditUserPage.updateButton.click();
+
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-edit-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          const rowData = await adminUsersPage.getRowData(userRow);
+          await expect(rowData.fullName).toBe(newUserInfo.fullName);
+        }
+      );
+      await test.step(
+        'Delete user and check the page confirms this deletion',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          const userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          await adminUsersPage.clickDeleteUser(userRow);
+          const modal = adminUsersPage.deleteUserModal;
+          await modal.deleteButton.click();
+        
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-delete-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+          await expect(userRow).not.toBeVisible(false);
+        }
+      );
+  });
+
+  test(
+    'Creating a user which has been deleted',
+    async ({ adminCreateUserPage, adminUsersPage }) => {
+      adminCreateUserPage.seed(9100);
+      const testUser = adminCreateUserPage.generateUser();
+
+      await test.step(
+        'Create the test user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-create-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Delete the created user',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(testUser.email);
+          const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
+          await adminUsersPage.clickDeleteUser(userRow);
+          const modal = adminUsersPage.deleteUserModal;
+          await modal.deleteButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-delete-user-success'
+          );
+          await expect(snackbar).not.toBeNull();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+          await expect(userRow).not.toBeVisible(false);
+        }
+      );
+
+      await test.step(
+        'Create the user again',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          /*
+            TODO: assert snackbar behavior after deciding what should
+            happen here, i.e. if this should create a new user, stay the
+            same, un-delete the user, or something else
+          */
+          // await adminUsersPage.getSnackbarData('snackbar-error');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+    }
+  );
+
+  test(
+    'Creating a user which already exists',
+    async ({ adminCreateUserPage, adminUsersPage, page }) => {
+      adminCreateUserPage.seed(9200);
+      const testUser = adminCreateUserPage.generateUser();
+
+      await test.step(
+        'Create the test user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-create-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Create the user again',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          const createUserPageUrl = page.url();
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          
+          await expect(page.url()).toBe(createUserPageUrl);
+          const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
+          await expect(snackbar.variant).toBe('error');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+    }
+  );
+
+  test(
+    'Editing a user to have the same email as another user should not be allowed',
+    async ({
+      adminCreateUserPage, adminEditUserPage, adminUsersPage, page
+    }) => {
+      adminCreateUserPage.seed(9300);
+      const user1 = adminCreateUserPage.generateUser();
+      const user2 = adminCreateUserPage.generateUser();
+      await test.step(
+        'Create the first user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(user1.fullName);
+          await adminCreateUserPage.emailInput.fill(user1.email);
+          await adminCreateUserPage.passwordInput.fill(user1.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-create-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Create the second user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(user2.fullName);
+          await adminCreateUserPage.emailInput.fill(user2.email);
+          await adminCreateUserPage.passwordInput.fill(user2.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-create-user-success'
+          );
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Try editing the second user to have the email of the first user',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user2.email);
+          let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
+          await adminUsersPage.clickEditUser(userRow);
+          
+          await adminEditUserPage.emailInput.fill(user1.email);
+          const editPageUrl = page.url();
+          await adminEditUserPage.updateButton.click();
+
+          const snackbar = await adminUsersPage.getSnackbarData(
+            'snackbar-error'
+          );
+          await expect(snackbar.variant).toBe('error');
+          await adminUsersPage.closeSnackbar();
+          await expect(page.url()).toBe(editPageUrl);
+        }
+      );
+    }
+  );
+});

packages/types/index.d.ts

@@ -51,8 +51,8 @@ export interface IExecution {
   testRun: boolean;
   status: 'success' | 'failure';
   executionSteps: IExecutionStep[];
-  updatedAt: string;
+  updatedAt: string | Date;
-  createdAt: string;
+  createdAt: string | Date;
 }
 
 export interface IStep {
@@ -83,8 +83,8 @@ export interface IFlow {
   active: boolean;
   status: 'paused' | 'published' | 'draft';
   steps: IStep[];
-  createdAt: string;
+  createdAt: string | Date;
-  updatedAt: string;
+  updatedAt: string | Date;
   remoteWebhookId: string;
   lastInternalId: () => Promise<string>;
 }

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

@@ -6,13 +6,13 @@ import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { useMutation } from '@apollo/client';
-import { useSnackbar } from 'notistack';
 
 import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config';
 import { UPDATE_APP_CONFIG } from 'graphql/mutations/update-app-config';
 
 import Form from 'components/Form';
 import { Switch } from './style';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 
 type AdminApplicationSettingsProps = {
   appKey: string;
@@ -36,7 +36,7 @@ function AdminApplicationSettings(
   );
 
   const formatMessage = useFormatMessage();
-  const { enqueueSnackbar } = useSnackbar();
+  const enqueueSnackbar = useEnqueueSnackbar();
 
   const handleSubmit = async (values: any) => {
     try {
@@ -55,6 +55,9 @@ function AdminApplicationSettings(
       }
       enqueueSnackbar(formatMessage('adminAppsSettings.successfullySaved'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-save-admin-apps-settings-success'
+        }
       });
     } catch (error) {
       throw new Error('Failed while saving!');

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

@@ -15,7 +15,12 @@ const ApolloProvider = (props: ApolloProviderProps): React.ReactElement => {
 
   const onError = React.useCallback(
     (message) => {
-      enqueueSnackbar(message, { variant: 'error' });
+      enqueueSnackbar(message, {
+        variant: 'error',
+        SnackbarProps: {
+          'data-test': 'snackbar-error'
+        }
+      });
     },
     [enqueueSnackbar]
   );

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

@@ -82,6 +82,9 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
 
         enqueueSnackbar(formatMessage('connection.deletedMessage'), {
           variant: 'success',
+          SnackbarProps: {
+            'data-test': 'snackbar-delete-connection-success'
+          }
         });
       } else if (action.type === 'test') {
         setVerificationVisible(true);

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

@@ -14,6 +14,7 @@ type ConfirmationDialogProps = {
   cancelButtonChildren: React.ReactNode;
   confirmButtionChildren: React.ReactNode;
   open?: boolean;
+  'data-test'?: string;
 }
 
 export default function ConfirmationDialog(props: ConfirmationDialogProps) {
@@ -26,9 +27,9 @@ export default function ConfirmationDialog(props: ConfirmationDialogProps) {
     confirmButtionChildren,
     open = true,
   } = props;
-
+  const dataTest = props['data-test'];
   return (
-    <Dialog open={open} onClose={onClose}>
+    <Dialog open={open} onClose={onClose} data-test={dataTest}>
       {title && (
         <DialogTitle>
           {title}
@@ -44,11 +45,16 @@ export default function ConfirmationDialog(props: ConfirmationDialogProps) {
 
       <DialogActions>
         {(cancelButtonChildren && onClose) && (
-          <Button onClick={onClose}>{cancelButtonChildren}</Button>
+          <Button
+            onClick={onClose}
+            data-test="confirmation-cancel-button">{cancelButtonChildren}</Button>
         )}
 
         {(confirmButtionChildren && onConfirm) && (
-          <Button onClick={onConfirm} color="error">
+          <Button
+            onClick={onConfirm}
+            color="error"
+            data-test="confirmation-confirm-button">
             {confirmButtionChildren}
           </Button>
         )}

packages/web/src/components/DeleteRoleButton/index.ee.tsx

@@ -31,6 +31,9 @@ export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-delete-role-success'
+        }
       });
     } catch (error) {
       throw new Error('Failed while deleting!');

packages/web/src/components/DeleteUserButton/index.ee.tsx

@@ -29,6 +29,9 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-delete-user-success'
+        }
       });
     } catch (error) {
       throw new Error('Failed while deleting!');
@@ -37,7 +40,7 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
 
   return (
     <>
-      <IconButton onClick={() => setShowConfirmation(true)} size="small">
+      <IconButton data-test="delete-button" onClick={() => setShowConfirmation(true)} size="small">
         <DeleteIcon />
       </IconButton>
 
@@ -49,6 +52,7 @@ export default function DeleteUserButton(props: DeleteUserButtonProps) {
         onConfirm={handleConfirm}
         cancelButtonChildren={formatMessage('deleteUserButton.cancel')}
         confirmButtionChildren={formatMessage('deleteUserButton.confirm')}
+        data-test="delete-user-modal"
       />
     </>
   );

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

@@ -39,11 +39,15 @@ function ExecutionId(props: Pick<IExecution, 'id'>) {
 }
 
 function ExecutionDate(props: Pick<IExecution, 'createdAt'>) {
-  const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10));
+  const createdAt = DateTime.fromMillis(
+    parseInt(props.createdAt as string, 10)
+  );
   const relativeCreatedAt = createdAt.toRelative();
 
   return (
-    <Tooltip title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}>
+    <Tooltip
+      title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+    >
       <Typography variant="body1" gutterBottom>
         {relativeCreatedAt}
       </Typography>

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

@@ -23,8 +23,10 @@ export default function ExecutionRow(
   const { execution } = props;
   const { flow } = execution;
 
-  const updatedAt = DateTime.fromMillis(parseInt(execution.updatedAt, 10));
+  const createdAt = DateTime.fromMillis(
-  const relativeUpdatedAt = updatedAt.toRelative();
+    parseInt(execution.createdAt as string, 10)
+  );
+  const relativeCreatedAt = createdAt.toRelative();
 
   return (
     <Link to={URLS.EXECUTION(execution.id)} data-test="execution-row">
@@ -41,8 +43,8 @@ export default function ExecutionRow(
               </Typography>
 
               <Typography variant="caption" noWrap>
-                {formatMessage('execution.updatedAt', {
+                {formatMessage('execution.createdAt', {
-                  datetime: relativeUpdatedAt,
+                  datetime: relativeCreatedAt,
                 })}
               </Typography>
             </Title>

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

@@ -36,6 +36,9 @@ export default function ContextMenu(
 
     enqueueSnackbar(formatMessage('flow.successfullyDuplicated'), {
       variant: 'success',
+      SnackbarProps: {
+        'data-test': 'snackbar-duplicate-flow-success'
+      }
     });
 
     onClose();

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

@@ -65,8 +65,8 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
     setAnchorEl(contextButtonRef.current);
   };
 
-  const createdAt = DateTime.fromMillis(parseInt(flow.createdAt, 10));
+  const createdAt = DateTime.fromMillis(parseInt(flow.createdAt as string, 10));
-  const updatedAt = DateTime.fromMillis(parseInt(flow.updatedAt, 10));
+  const updatedAt = DateTime.fromMillis(parseInt(flow.updatedAt as string, 10));
   const isUpdated = updatedAt > createdAt;
   const relativeCreatedAt = createdAt.toRelative();
   const relativeUpdatedAt = updatedAt.toRelative();

packages/web/src/components/ResetPasswordForm/index.ee.tsx

@@ -43,6 +43,9 @@ export default function ResetPasswordForm() {
 
     enqueueSnackbar(formatMessage('resetPasswordForm.passwordUpdated'), {
       variant: 'success',
+      SnackbarProps: {
+        'data-test': 'snackbar-reset-password-success'
+      }
     });
 
     navigate(URLS.LOGIN);

packages/web/src/components/UserList/TablePaginationActions/index.tsx

@@ -52,6 +52,7 @@ export default function TablePaginationActions(
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
         aria-label="first page"
+        data-test="first-page-button"
       >
         {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
       </IconButton>
@@ -59,6 +60,7 @@ export default function TablePaginationActions(
         onClick={handleBackButtonClick}
         disabled={page === 0}
         aria-label="previous page"
+        data-test="previous-page-button"
       >
         {theme.direction === 'rtl' ? (
           <KeyboardArrowRight />
@@ -70,6 +72,7 @@ export default function TablePaginationActions(
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="next page"
+        data-test="next-page-button"
       >
         {theme.direction === 'rtl' ? (
           <KeyboardArrowLeft />
@@ -81,6 +84,7 @@ export default function TablePaginationActions(
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="last page"
+        data-test="last-page-button"
       >
         {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
       </IconButton>

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

@@ -83,23 +83,34 @@ export default function UserList(): React.ReactElement {
             </TableRow>
           </TableHead>
           <TableBody>
-            {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
+            {loading && <ListLoader
+              data-test="users-list-loader"
+              rowsNumber={3}
+              columnsNumber={2} />}
             {!loading &&
               users.map((user) => (
                 <TableRow
                   key={user.id}
                   sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  data-test="user-row"
                 >
                   <TableCell scope="row">
-                    <Typography variant="subtitle2">{user.fullName}</Typography>
+                    <Typography
+                      variant="subtitle2"
+                      data-test="user-full-name">{user.fullName}</Typography>
                   </TableCell>
 
                   <TableCell>
-                    <Typography variant="subtitle2">{user.email}</Typography>
+                    <Typography
+                      variant="subtitle2"
+                      data-test="user-email">{user.email}</Typography>
                   </TableCell>
 
                   <TableCell>
-                    <Typography variant="subtitle2">
+                    <Typography
+                      variant="subtitle2"
+                      data-test="user-role"
+                    >
                       {user.role.name}
                     </Typography>
                   </TableCell>
@@ -110,11 +121,14 @@ export default function UserList(): React.ReactElement {
                         size="small"
                         component={Link}
                         to={URLS.USER(user.id)}
+                        data-test="user-edit"
                       >
                         <EditIcon />
                       </IconButton>
 
-                      <DeleteUserButton userId={user.id} />
+                      <DeleteUserButton
+                        data-test="user-delete"
+                        userId={user.id} />
                     </Stack>
                   </TableCell>
                 </TableRow>
@@ -124,6 +138,8 @@ export default function UserList(): React.ReactElement {
             <TableFooter>
               <TableRow>
                 <TablePagination
+                  data-total-count={totalCount}
+                  data-rows-per-page={rowsPerPage}
                   rowsPerPageOptions={[10, 25, 50, 100]}
                   page={page}
                   count={totalCount}

packages/web/src/hooks/useEnqueueSnackbar.ts

@@ -20,7 +20,11 @@ export default function useEnqueueSnackbar() {
         ...(options || {}) as Record<string, unknown>,
         SnackbarProps: {
           onClick: () => closeSnackbar(key),
-          ...(options.SnackbarProps || {}) as Record<string, unknown>
+          ...({
+            'data-test': 'snackbar', // keep above options.snackbarProps
+            'data-snackbar-variant': `${options.variant}` || 'default',
+          }) as Record<string, string>,
+          ...(options.SnackbarProps || {}) as Record<string, unknown>,
         }
       }
     );

packages/web/src/index.tsx

@@ -12,6 +12,7 @@ import LiveChat from 'components/LiveChat/index.ee';
 import routes from 'routes';
 import reportWebVitals from './reportWebVitals';
 
+
 ReactDOM.render(
   <Router>
     <SnackbarProvider>

packages/web/src/locales/en.json

@@ -89,7 +89,7 @@
   "executions.title": "Executions",
   "executions.noExecutions": "There is no execution data point to show.",
   "execution.id": "Execution ID: {id}",
-  "execution.updatedAt": "updated {datetime}",
+  "execution.createdAt": "created {datetime}",
   "execution.test": "Test run",
   "execution.statusSuccess": "Success",
   "execution.statusFailure": "Failure",

packages/web/src/pages/Authentication/RoleMappings.tsx

@@ -64,6 +64,9 @@ function RoleMappings({ provider, providerLoading }: RoleMappingsProps) {
         });
         enqueueSnackbar(formatMessage('roleMappingsForm.successfullySaved'), {
           variant: 'success',
+          SnackbarProps: {
+            'data-test': 'snackbar-update-role-mappings-success'
+          }
         });
       }
     } catch (error) {

packages/web/src/pages/Authentication/SamlConfiguration.tsx

@@ -93,6 +93,9 @@ function SamlConfiguration({
 
       enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-save-saml-provider-success'
+        }
       });
     } catch (error) {
       throw new Error('Failed while saving!');

packages/web/src/pages/CreateRole/index.ee.tsx

@@ -43,6 +43,9 @@ export default function CreateRole(): React.ReactElement {
 
       enqueueSnackbar(formatMessage('createRole.successfullyCreated'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-create-role-success'
+        }
       });
 
       navigate(URLS.ROLES);

packages/web/src/pages/CreateUser/index.tsx

@@ -47,6 +47,10 @@ export default function CreateUser(): React.ReactElement {
 
       enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
         variant: 'success',
+        persist: true,
+        SnackbarProps: {
+          'data-test': 'snackbar-create-user-success',
+        }
       });
 
       navigate(URLS.USERS);
@@ -69,6 +73,7 @@ export default function CreateUser(): React.ReactElement {
                 required={true}
                 name="fullName"
                 label={formatMessage('userForm.fullName')}
+                data-test="full-name-input"
                 fullWidth
               />
 
@@ -76,6 +81,7 @@ export default function CreateUser(): React.ReactElement {
                 required={true}
                 name="email"
                 label={formatMessage('userForm.email')}
+                data-test="email-input"
                 fullWidth
               />
 
@@ -84,6 +90,7 @@ export default function CreateUser(): React.ReactElement {
                 name="password"
                 label={formatMessage('userForm.password')}
                 type="password"
+                data-test="password-input"
                 fullWidth
               />
 
@@ -110,6 +117,7 @@ export default function CreateUser(): React.ReactElement {
                 color="primary"
                 sx={{ boxShadow: 2 }}
                 loading={loading}
+                data-test="create-button"
               >
                 {formatMessage('createUser.submit')}
               </LoadingButton>

packages/web/src/pages/EditRole/index.ee.tsx

@@ -53,6 +53,9 @@ export default function EditRole(): React.ReactElement {
 
       enqueueSnackbar(formatMessage('editRole.successfullyUpdated'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-edit-role-success'
+        }
       });
 
       navigate(URLS.ROLES);

packages/web/src/pages/EditUser/index.tsx

@@ -55,6 +55,10 @@ export default function EditUser(): React.ReactElement {
 
       enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-edit-user-success',
+          persist: true
+        }
       });
 
       navigate(URLS.USERS);
@@ -87,6 +91,7 @@ export default function EditUser(): React.ReactElement {
                   required={true}
                   name="fullName"
                   label={formatMessage('userForm.fullName')}
+                  data-test="full-name-input"
                   fullWidth
                 />
 
@@ -94,6 +99,7 @@ export default function EditUser(): React.ReactElement {
                   required={true}
                   name="email"
                   label={formatMessage('userForm.email')}
+                  data-test="email-input"
                   fullWidth
                 />
 
@@ -120,6 +126,7 @@ export default function EditUser(): React.ReactElement {
                   color="primary"
                   sx={{ boxShadow: 2 }}
                   loading={loading}
+                  data-test="update-button"
                 >
                   {formatMessage('editUser.submit')}
                 </LoadingButton>

packages/web/src/pages/ProfileSettings/index.tsx

@@ -78,6 +78,9 @@ function ProfileSettings() {
 
     enqueueSnackbar(formatMessage('profileSettings.updatedProfile'), {
       variant: 'success',
+      SnackbarProps: {
+        'data-test': 'snackbar-update-profile-settings-success'
+      }
     });
   };
 

packages/web/src/pages/UserInterface/index.tsx

@@ -128,6 +128,9 @@ export default function UserInterface(): React.ReactElement {
 
       enqueueSnackbar(formatMessage('userInterfacePage.successfullyUpdated'), {
         variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-update-user-interface-success'
+        }
       });
     } catch (error) {
       throw new Error('Failed while updating!');