test: rewrite flow editor tests with playwright

.devcontainer/boot.sh

@@ -29,6 +29,7 @@ rm -rf .env
 echo "
 PORT=$WEB_PORT
 REACT_APP_GRAPHQL_URL=http://localhost:$BACKEND_PORT/graphql
+REACT_APP_NOTIFICATIONS_URL=https://notifications.automatisch.io
 " >> .env
 cd $CURRENT_DIR
 

.github/workflows/playwright.yml

@@ -1,87 +1,25 @@
-name: Automatisch UI Tests
+name: Automatisch UI Test
 on:
-  push:
   schedule:
     - cron: '0 12 * * *'
-  workflow_dispatch:
-
-env:
-  ENCRYPTION_KEY: sample_encryption_key
-  WEBHOOK_SECRET_KEY: sample_webhook_secret_key
-  APP_SECRET_KEY: sample_app_secret_key
-  POSTGRES_HOST: localhost
-  POSTGRES_DATABASE: automatisch
-  POSTGRES_PORT: 5432
-  POSTGRES_USERNAME: automatisch_user
-  POSTGRES_PASSWORD: automatisch_password
-  REDIS_HOST: localhost
-  APP_ENV: production
-  LICENSE_KEY: ${{ secrets.E2E_LICENSE_KEY }}
-
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
-    services:
-      postgres:
-        image: postgres:14.5-alpine
-        env:
-          POSTGRES_DB: automatisch
-          POSTGRES_USER: automatisch_user
-          POSTGRES_PASSWORD: automatisch_password
-        options: >-
-          --health-cmd "pg_isready -U automatisch_user -d automatisch"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-        ports:
-          - 5432:5432
-      redis:
-        image: redis:7.0.4-alpine
-        options: >-
-          --health-cmd "redis-cli ping"
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-        ports:
-          - 6379:6379
-
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
           node-version: 18
       - name: Install dependencies
-        run: yarn && yarn lerna bootstrap
+        run: yarn
       - name: Install Playwright Browsers
         run: yarn playwright install --with-deps
-      - name: Build Automatisch
-        run: yarn lerna run --scope=@*/{web,backend,cli} build
-        env:
-          # Keep this until we clean up warnings in build processes
-          CI: false
-      - name: Migrate database
-        working-directory: ./packages/backend
-        run: yarn db:migrate --migrations-directory ./dist/src/db/migrations
-      - name: Seed user
-        working-directory: ./packages/backend
-        run: yarn db:seed:user &
-      - name: Run Automatisch
-        run: yarn start &
-        working-directory: ./packages/backend
-      - name: Run Automatisch worker
-        run: node dist/src/worker.js &
-        working-directory: ./packages/backend
       - name: Run Playwright tests
-        working-directory: ./packages/e2e-tests
-        env:
-          LOGIN_EMAIL: ${{ secrets.LOGIN_EMAIL }}
-          LOGIN_PASSWORD: ${{ secrets.LOGIN_PASSWORD }}
-          BASE_URL: ${{ vars.E2E_BASE_URL }}
-        run: yarn test
+        run: yarn playwright test
       - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report
-          path: ./packages/e2e-tests/test-results/**/*
+          path: playwright-report/
           retention-days: 30

.vscode/settings.json

@@ -1,7 +1,4 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

docker/Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /automatisch
 
 RUN \
   apk --no-cache add --virtual build-dependencies python3 build-base && \
-  yarn global add @automatisch/cli@0.9.3 --network-timeout 1000000 && \
+  yarn global add @automatisch/cli@0.8.0 --network-timeout 1000000 && \
   rm -rf /usr/local/share/.cache/ && \
   apk del build-dependencies
 

docker/Dockerfile.compose

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1
-FROM automatischio/automatisch:0.9.3
+FROM automatischio/automatisch:0.8.0
 WORKDIR /automatisch
 
 RUN apk add --no-cache openssl dos2unix

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.9.3",
+  "version": "0.8.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

packages/backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automatisch/backend",
-  "version": "0.9.3",
+  "version": "0.8.0",
   "license": "See LICENSE file",
   "description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
   "scripts": {
@@ -22,7 +22,7 @@
     "prebuild": "rm -rf ./dist"
   },
   "dependencies": {
-    "@automatisch/web": "^0.9.3",
+    "@automatisch/web": "^0.8.0",
     "@bull-board/express": "^3.10.1",
     "@casl/ability": "^6.5.0",
     "@graphql-tools/graphql-file-loader": "^7.3.4",
@@ -110,7 +110,7 @@
     "url": "https://github.com/automatisch/automatisch/issues"
   },
   "devDependencies": {
-    "@automatisch/types": "^0.9.3",
+    "@automatisch/types": "^0.8.0",
     "@types/bcrypt": "^5.0.0",
     "@types/bull": "^3.15.8",
     "@types/cors": "^2.8.12",

packages/backend/src/apps/formatter/actions/text/index.ts

@@ -4,7 +4,6 @@ import htmlToMarkdown from './transformers/html-to-markdown';
 import markdownToHtml from './transformers/markdown-to-html';
 import useDefaultValue from './transformers/use-default-value';
 import extractEmailAddress from './transformers/extract-email-address';
-import extractNumber from './transformers/extract-number';
 
 const transformers = {
   capitalize,
@@ -12,7 +11,6 @@ const transformers = {
   markdownToHtml,
   useDefaultValue,
   extractEmailAddress,
-  extractNumber,
 };
 
 export default defineAction({
@@ -34,7 +32,6 @@ export default defineAction({
         { label: 'Convert Markdown to HTML', value: 'markdownToHtml' },
         { label: 'Use Default Value', value: 'useDefaultValue' },
         { label: 'Extract Email Address', value: 'extractEmailAddress' },
-        { label: 'Extract Number', value: 'extractNumber' },
       ],
       additionalFields: {
         type: 'query',

packages/backend/src/apps/formatter/actions/text/transformers/extract-number.ts

@@ -1,26 +0,0 @@
-import { IGlobalVariable } from '@automatisch/types';
-
-const extractNumber = ($: IGlobalVariable) => {
-  const input = $.step.parameters.input as string;
-
-  //  Example numbers that's supported:
-  //  123
-  //  -123
-  //  123456
-  //  -123456
-  //  121,234
-  //  -121,234
-  //  121.234
-  //  -121.234
-  //  1,234,567.89
-  //  -1,234,567.89
-  //  1.234.567,89
-  //  -1.234.567,89
-
-  const numberRegexp = /-?((\d{1,3})+\.?,?)+/g;
-
-  const numbers = input.match(numberRegexp);
-  return numbers ? numbers[0] : '';
-};
-
-export default extractNumber;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/index.ts

@@ -4,7 +4,6 @@ import htmlToMarkdown from './options/html-to-markdown';
 import markdownToHtml from './options/markdown-to-html';
 import useDefaultValue from './options/use-default-value';
 import extractEmailAddress from './options/extract-email-address';
-import extractNumber from './options/extract-number';
 
 const options: IJSONObject = {
   capitalize,
@@ -12,7 +11,6 @@ const options: IJSONObject = {
   markdownToHtml,
   useDefaultValue,
   extractEmailAddress,
-  extractNumber,
 };
 
 export default {

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/options/extract-number.ts

@@ -1,12 +0,0 @@
-const extractNumber = [
-  {
-    label: 'Input',
-    key: 'input',
-    type: 'string' as const,
-    required: true,
-    description: 'Text that will be searched for a number.',
-    variables: true,
-  },
-];
-
-export default extractNumber;

packages/backend/src/apps/rss/triggers/new-items-in-feed/new-items-in-feed.ts

@@ -4,13 +4,9 @@ import bcrypt from 'bcrypt';
 
 const getInternalId = async (item: IJSONObject): Promise<string> => {
   if (item.guid) {
-    return typeof item.guid === 'object'
-      ? (item.guid as IJSONObject)['#text'].toString()
-      : item.guid.toString();
+    return item.guid.toString();
   } else if (item.id) {
-    return typeof item.id === 'object'
-      ? (item.id as IJSONObject)['#text'].toString()
-      : item.id.toString();
+    return item.id.toString();
   }
 
   return await hashItem(JSON.stringify(item));

packages/backend/src/db/migrations/20230816173027_make_role_id_not_nullable_in_users.ts

@@ -1,25 +0,0 @@
-import { Knex } from 'knex';
-
-export async function up(knex: Knex): Promise<void> {
-  const role = await knex('roles')
-    .select('id')
-    .whereIn('key', ['user', 'admin'])
-    .orderBy('key', 'desc')
-    .limit(1)
-    .first();
-
-  if (role) {
-    // backfill nulls
-    await knex('users').whereNull('role_id').update({ role_id: role.id });
-  }
-
-  return await knex.schema.alterTable('users', (table) => {
-    table.uuid('role_id').notNullable().alter();
-  });
-}
-
-export async function down(knex: Knex): Promise<void> {
-  return await knex.schema.alterTable('users', (table) => {
-    table.uuid('role_id').nullable().alter();
-  });
-}

packages/backend/src/db/migrations/20230824105813_soft_delete_soft_deleted_user_associations.ts

@@ -1,35 +0,0 @@
-import { Knex } from 'knex';
-
-export async function up(knex: Knex): Promise<void> {
-  const users = await knex('users').whereNotNull('deleted_at');
-  const userIds = users.map((user) => user.id);
-
-  const flows = await knex('flows').whereIn('user_id', userIds);
-  const flowIds = flows.map((flow) => flow.id);
-  const executions = await knex('executions').whereIn('flow_id', flowIds);
-  const executionIds = executions.map((execution) => execution.id);
-
-  await knex('execution_steps').whereIn('execution_id', executionIds).update({
-    deleted_at: knex.fn.now(),
-  });
-
-  await knex('executions').whereIn('id', executionIds).update({
-    deleted_at: knex.fn.now(),
-  });
-
-  await knex('steps').whereIn('flow_id', flowIds).update({
-    deleted_at: knex.fn.now(),
-  });
-
-  await knex('flows').whereIn('id', flowIds).update({
-    deleted_at: knex.fn.now(),
-  });
-
-  await knex('connections').whereIn('user_id', userIds).update({
-    deleted_at: knex.fn.now(),
-  });
-}
-
-export async function down(): Promise<void> {
-  // void
-}

packages/backend/src/db/migrations/20230828134734_convert_permission_conditions_to_array.ts

@@ -1,11 +0,0 @@
-import { Knex } from 'knex';
-
-export async function up(knex: Knex): Promise<void> {
-  await knex('permissions')
-    .where(knex.raw('conditions::text'), '=', knex.raw("'{}'::text"))
-    .update('conditions', JSON.stringify([]));
-}
-
-export async function down(): Promise<void> {
-  // void
-}

packages/backend/src/graphql/mutations/delete-current-user.ee.ts

@@ -1,59 +1,17 @@
 import { Duration } from 'luxon';
 import Context from '../../types/express/context';
 import deleteUserQueue from '../../queues/delete-user.ee';
-import flowQueue from '../../queues/flow';
-import Flow from '../../models/flow';
-import Execution from '../../models/execution';
-import ExecutionStep from '../../models/execution-step';
-import appConfig from '../../config/app';
 
-const deleteCurrentUser = async (
-  _parent: unknown,
-  params: never,
-  context: Context
-) => {
+const deleteCurrentUser = async (_parent: unknown, params: never, context: Context) => {
   const id = context.currentUser.id;
 
-  const flows = await context.currentUser.$relatedQuery('flows').where({
-    active: true,
-  });
-
-  const repeatableJobs = await flowQueue.getRepeatableJobs();
-
-  for (const flow of flows) {
-    const job = repeatableJobs.find((job) => job.id === flow.id);
-
-    if (job) {
-      await flowQueue.removeRepeatableByKey(job.key);
-    }
-  }
-
-  const executionIds = (
-    await context.currentUser
-      .$relatedQuery('executions')
-      .select('executions.id')
-  ).map((execution: Execution) => execution.id);
-  const flowIds = flows.map((flow) => flow.id);
-
-  await ExecutionStep.query().delete().whereIn('execution_id', executionIds);
-  await context.currentUser.$relatedQuery('executions').delete();
-  await context.currentUser.$relatedQuery('steps').delete();
-  await Flow.query().whereIn('id', flowIds).delete();
-  await context.currentUser.$relatedQuery('connections').delete();
-  await context.currentUser.$relatedQuery('identities').delete();
-
-  if (appConfig.isCloud) {
-    await context.currentUser.$relatedQuery('subscriptions').delete();
-    await context.currentUser.$relatedQuery('usageData').delete();
-  }
-
   await context.currentUser.$query().delete();
 
   const jobName = `Delete user - ${id}`;
   const jobPayload = { id };
   const millisecondsFor30Days = Duration.fromObject({ days: 30 }).toMillis();
   const jobOptions = {
-    delay: millisecondsFor30Days,
+    delay: millisecondsFor30Days
   };
 
   await deleteUserQueue.add(jobName, jobPayload, jobOptions);

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

@@ -1,6 +1,5 @@
 import Context from '../../types/express/context';
 import testRun from '../../services/test-run';
-import Step from '../../models/step';
 
 type Params = {
   input: {
@@ -13,16 +12,12 @@ const executeFlow = async (
   params: Params,
   context: Context
 ) => {
-  const conditions = context.currentUser.can('update', 'Flow');
-  const isCreator = conditions.isCreator;
-  const allSteps = Step.query();
-  const userSteps = context.currentUser.$relatedQuery('steps');
-  const baseQuery = isCreator ? userSteps : allSteps;
+  context.currentUser.can('update', 'Flow');
 
   const { stepId } = params.input;
 
-  const untilStep = await baseQuery
-    .clone()
+  const untilStep = await context.currentUser
+    .$relatedQuery('steps')
     .findById(stepId)
     .throwIfNotFound();
 

packages/backend/src/graphql/mutations/update-config.ee.ts

@@ -8,11 +8,7 @@ type Params = {
   };
 };
 
-const updateConfig = async (
-  _parent: unknown,
-  params: Params,
-  context: Context
-) => {
+const updateConfig = async (_parent: unknown, params: Params, context: Context) => {
   context.currentUser.can('update', 'Config');
 
   const config = params.input;
@@ -22,26 +18,22 @@ const updateConfig = async (
   for (const key of configKeys) {
     const newValue = config[key];
 
-    if (newValue) {
-      const entryUpdate = Config.query()
-        .insert({
-          key,
-          value: {
-            data: newValue,
-          },
-        })
-        .onConflict('key')
-        .merge({
-          value: {
-            data: newValue,
-          },
-        });
+    const entryUpdate = Config
+      .query()
+      .insert({
+        key,
+        value: {
+          data: newValue
+        }
+      })
+      .onConflict('key')
+      .merge({
+        value: {
+          data: newValue
+        }
+      });
 
-      updates.push(entryUpdate);
-    } else {
-      const entryUpdate = Config.query().findOne({ key }).delete();
-      updates.push(entryUpdate);
-    }
+    updates.push(entryUpdate);
   }
 
   await Promise.all(updates);

packages/backend/src/graphql/mutations/update-flow-status.ts

@@ -1,4 +1,3 @@
-import Flow from '../../models/flow';
 import Context from '../../types/express/context';
 import flowQueue from '../../queues/flow';
 import { REMOVE_AFTER_30_DAYS_OR_150_JOBS, REMOVE_AFTER_7_DAYS_OR_50_JOBS } from '../../helpers/remove-job-configuration';
@@ -19,14 +18,10 @@ const updateFlowStatus = async (
   params: Params,
   context: Context
 ) => {
-  const conditions = context.currentUser.can('publish', 'Flow');
-  const isCreator = conditions.isCreator;
-  const allFlows = Flow.query();
-  const userFlows = context.currentUser.$relatedQuery('flows');
-  const baseQuery = isCreator ? userFlows : allFlows;
+  context.currentUser.can('publish', 'Flow');
 
-  let flow = await baseQuery
-    .clone()
+  let flow = await context.currentUser
+    .$relatedQuery('flows')
     .findOne({
       id: params.input.id,
     })

packages/backend/src/graphql/mutations/update-step.ts

@@ -1,7 +1,6 @@
 import { IJSONObject } from '@automatisch/types';
 import App from '../../models/app';
 import Step from '../../models/step';
-import Connection from '../../models/connection';
 import Context from '../../types/express/context';
 
 type Params = {
@@ -24,14 +23,12 @@ const updateStep = async (
   params: Params,
   context: Context
 ) => {
-  const { isCreator } = context.currentUser.can('update', 'Flow');
-  const userSteps = context.currentUser.$relatedQuery('steps');
-  const allSteps = Step.query();
-  const baseQuery = isCreator ? userSteps : allSteps;
+  context.currentUser.can('update', 'Flow');
 
   const { input } = params;
 
-  let step = await baseQuery
+  let step = await context.currentUser
+    .$relatedQuery('steps')
     .findOne({
       'steps.id': input.id,
       flow_id: input.flow.id,
@@ -39,24 +36,11 @@ const updateStep = async (
     .throwIfNotFound();
 
   if (input.connection.id) {
-    let canSeeAllConnections = false;
-    try {
-      const conditions = context.currentUser.can('read', 'Connection');
+    const hasConnection = await context.currentUser
+      .$relatedQuery('connections')
+      .findById(input.connection?.id);
 
-      canSeeAllConnections = !conditions.isCreator;
-    } catch {
-      // void
-    }
-
-    const userConnections = context.currentUser.$relatedQuery('connections');
-    const allConnections = Connection.query();
-    const baseConnectionsQuery = canSeeAllConnections ? allConnections : userConnections;
-
-    const connection = await baseConnectionsQuery
-      .clone()
-      .findById(input.connection?.id)
-
-    if (!connection) {
+    if (!hasConnection) {
       throw new Error('The connection does not exist!');
     }
   }

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

@@ -1,15 +0,0 @@
-import axios from '../../helpers/axios-with-proxy';
-
-const NOTIFICATIONS_URL = 'https://notifications.automatisch.io/notifications.json';
-
-const getNotifications = async () => {
-  try {
-    const { data: notifications = [] } = await axios.get(NOTIFICATIONS_URL);
-
-    return notifications;
-  } catch (err) {
-    return [];
-  }
-};
-
-export default getNotifications;

packages/backend/src/graphql/queries/get-saml-auth-provider-role-mappings.ee.ts

@@ -1,23 +0,0 @@
-import Context from '../../types/express/context';
-import SamlAuthProvider from '../../models/saml-auth-provider.ee';
-
-type Params = {
-  id: string;
-}
-
-const getSamlAuthProviderRoleMappings = async (_parent: unknown, params: Params, context: Context) => {
-  context.currentUser.can('read', 'SamlAuthProvider');
-
-  const samlAuthProvider = await SamlAuthProvider
-    .query()
-    .findById(params.id)
-    .throwIfNotFound();
-
-  const roleMappings = await samlAuthProvider
-    .$relatedQuery('samlAuthProvidersRoleMappings')
-    .orderBy('remote_role_name', 'asc')
-
-  return roleMappings;
-};
-
-export default getSamlAuthProviderRoleMappings;

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

@@ -10,14 +10,15 @@ type Params = {
 const getUsers = async (_parent: unknown, params: Params, context: Context) => {
   context.currentUser.can('read', 'User');
 
-  const usersQuery = User.query()
+  const usersQuery = User
+    .query()
     .leftJoinRelated({
-      role: true,
+      role: true
     })
     .withGraphFetched({
-      role: true,
+      role: true
     })
-    .orderBy('full_name', 'asc');
+    .orderBy('full_name', 'desc');
 
   return paginate(usersQuery, params.limit, params.offset);
 };

packages/backend/src/graphql/query-resolvers.ts

@@ -16,13 +16,11 @@ import getExecutions from './queries/get-executions';
 import getFlow from './queries/get-flow';
 import getFlows from './queries/get-flows';
 import getInvoices from './queries/get-invoices.ee';
-import getNotifications from './queries/get-notifications';
 import getPaddleInfo from './queries/get-paddle-info.ee';
 import getPaymentPlans from './queries/get-payment-plans.ee';
 import getPermissionCatalog from './queries/get-permission-catalog.ee';
 import getRole from './queries/get-role.ee';
 import getRoles from './queries/get-roles.ee';
-import getSamlAuthProviderRoleMappings from './queries/get-saml-auth-provider-role-mappings.ee';
 import getSamlAuthProvider from './queries/get-saml-auth-provider.ee';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions';
 import getSubscriptionStatus from './queries/get-subscription-status.ee';
@@ -52,14 +50,12 @@ const queryResolvers = {
   getFlow,
   getFlows,
   getInvoices,
-  getNotifications,
   getPaddleInfo,
   getPaymentPlans,
   getPermissionCatalog,
   getRole,
   getRoles,
   getSamlAuthProvider,
-  getSamlAuthProviderRoleMappings,
   getStepWithTestExecutions,
   getSubscriptionStatus,
   getTrialStatus,

packages/backend/src/graphql/schema.graphql

@@ -46,9 +46,7 @@ type Query {
   getPermissionCatalog: PermissionCatalog
   getRole(id: String!): Role
   getRoles: [Role]
-  getNotifications: [Notification]
   getSamlAuthProvider: SamlAuthProvider
-  getSamlAuthProviderRoleMappings(id: String!): [SamlAuthProvidersRoleMapping]
   getSubscriptionStatus: GetSubscriptionStatus
   getTrialStatus: GetTrialStatus
   getUser(id: String!): User
@@ -331,7 +329,6 @@ type SamlAuthProvider {
   emailAttributeName: String
   roleAttributeName: String
   active: Boolean
-  defaultRoleId: String
 }
 
 type SamlAuthProvidersRoleMapping {
@@ -344,7 +341,6 @@ type SamlAuthProvidersRoleMapping {
 type UserConnection {
   edges: [UserEdge]
   pageInfo: PageInfo
-  totalCount: Int
 }
 
 type UserEdge {
@@ -721,7 +717,6 @@ type ListSamlAuthProvider {
   id: String
   name: String
   issuer: String
-  loginUrl: String
 }
 
 type Permission {
@@ -788,13 +783,6 @@ input UpdateAppAuthClientInput {
   active: Boolean
 }
 
-type Notification {
-  name: String
-  createdAt: String
-  documentationUrl: String
-  description: String
-}
-
 schema {
   query: Query
   mutation: Mutation

packages/backend/src/helpers/authentication.ts

@@ -1,7 +1,7 @@
-import { allow, rule, shield } from 'graphql-shield';
+import { rule, shield, allow } from 'graphql-shield';
 import jwt from 'jsonwebtoken';
-import appConfig from '../config/app';
 import User from '../models/user';
+import appConfig from '../config/app';
 
 const isAuthenticated = rule()(async (_parent, _args, req) => {
   const token = req.headers['authorization'];
@@ -34,16 +34,15 @@ const authentication = shield(
     Query: {
       '*': isAuthenticated,
       getAutomatischInfo: allow,
-      getConfig: allow,
-      getNotifications: allow,
-      healthcheck: allow,
       listSamlAuthProviders: allow,
+      healthcheck: allow,
+      getConfig: allow,
     },
     Mutation: {
       '*': isAuthenticated,
+      registerUser: allow,
       forgotPassword: allow,
       login: allow,
-      registerUser: allow,
       resetPassword: allow,
     },
   },

packages/backend/src/helpers/compute-parameters.ts

@@ -2,7 +2,8 @@ import Step from '../models/step';
 import ExecutionStep from '../models/execution-step';
 import get from 'lodash.get';
 
-const variableRegExp = /({{step\.[\da-zA-Z-]+(?:\.[^.}{]+)+}})/g;
+// INFO: don't remove space in allowed character group!
+const variableRegExp = /({{step\.[\da-zA-Z-]+(?:\.[\da-zA-Z-_ :]+)+}})/g;
 
 export default function computeParameters(
   parameters: Step['parameters'],

packages/backend/src/helpers/find-or-create-user-by-saml-identity.ee.ts

@@ -48,7 +48,7 @@ const findOrCreateUserBySamlIdentity = async (
           .join(' '),
         email: mappedUser.email as string,
         roleId:
-          samlAuthProviderRoleMapping?.roleId || samlAuthProvider.defaultRoleId,
+          samlAuthProviderRoleMapping.roleId || samlAuthProvider.defaultRoleId,
         identities: [
           {
             remoteId: mappedUser.id as string,

packages/backend/src/helpers/license.ee.ts

@@ -1,6 +1,7 @@
-import memoryCache from 'memory-cache';
+// TODO: replace with axios-with-proxy
+import axios from 'axios';
 import appConfig from '../config/app';
-import axios from './axios-with-proxy';
+import memoryCache from 'memory-cache';
 
 const CACHE_DURATION = 1000 * 60 * 60 * 24; // 24 hours in milliseconds
 

packages/backend/src/helpers/pagination.ts

@@ -21,7 +21,6 @@ const paginate = async (
       currentPage: Math.ceil(offset / limit + 1),
       totalPages: Math.ceil(count / limit),
     },
-    totalCount: count,
     edges: records.map((record: Base) => ({
       node: record,
     })),

packages/backend/src/models/saml-auth-provider.ee.ts

@@ -75,14 +75,6 @@ class SamlAuthProvider extends Base {
     },
   });
 
-  static get virtualAttributes() {
-    return ['loginUrl'];
-  }
-
-  get loginUrl() {
-    return new URL(`/login/saml/${this.issuer}`, appConfig.baseUrl).toString();
-  }
-
   get config(): SamlConfig {
     const callbackUrl = new URL(
       `/login/saml/${this.issuer}/callback`,

packages/backend/src/workers/delete-user.ee.ts

@@ -3,7 +3,6 @@ import { Worker } from 'bullmq';
 import * as Sentry from '../helpers/sentry.ee';
 import redisConfig from '../config/redis';
 import logger from '../helpers/logger';
-import appConfig from '../config/app';
 import User from '../models/user';
 import Execution from '../models/execution';
 import ExecutionStep from '../models/execution-step';
@@ -13,34 +12,21 @@ export const worker = new Worker(
   async (job) => {
     const { id } = job.data;
 
-    const user = await User.query()
-      .withSoftDeleted()
-      .findById(id)
-      .throwIfNotFound();
+    const user = await User.query().findById(id).throwIfNotFound();
 
     const executionIds = (
-      await user
-        .$relatedQuery('executions')
-        .withSoftDeleted()
-        .select('executions.id')
+      await user.$relatedQuery('executions').select('executions.id')
     ).map((execution: Execution) => execution.id);
 
     await ExecutionStep.query()
-      .withSoftDeleted()
-      .whereIn('execution_id', executionIds)
-      .hardDelete();
-    await user.$relatedQuery('executions').withSoftDeleted().hardDelete();
-    await user.$relatedQuery('steps').withSoftDeleted().hardDelete();
-    await user.$relatedQuery('flows').withSoftDeleted().hardDelete();
-    await user.$relatedQuery('connections').withSoftDeleted().hardDelete();
-    await user.$relatedQuery('identities').withSoftDeleted().hardDelete();
+      .hardDelete()
+      .whereIn('execution_id', executionIds);
+    await user.$relatedQuery('executions').hardDelete();
+    await user.$relatedQuery('steps').hardDelete();
+    await user.$relatedQuery('flows').hardDelete();
+    await user.$relatedQuery('connections').hardDelete();
 
-    if (appConfig.isCloud) {
-      await user.$relatedQuery('subscriptions').withSoftDeleted().hardDelete();
-      await user.$relatedQuery('usageData').withSoftDeleted().hardDelete();
-    }
-
-    await user.$query().withSoftDeleted().hardDelete();
+    await user.$query().hardDelete();
   },
   { connection: redisConfig }
 );

packages/backend/src/workers/flow.ts

@@ -3,7 +3,6 @@ import { Worker } from 'bullmq';
 import * as Sentry from '../helpers/sentry.ee';
 import redisConfig from '../config/redis';
 import logger from '../helpers/logger';
-import flowQueue from '../queues/flow';
 import triggerQueue from '../queues/trigger';
 import { processFlow } from '../services/flow';
 import Flow from '../models/flow';
@@ -67,7 +66,7 @@ worker.on('completed', (job) => {
   logger.info(`JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has started!`);
 });
 
-worker.on('failed', async (job, err) => {
+worker.on('failed', (job, err) => {
   const errorMessage = `
     JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has failed to start with ${err.message}
     \n ${err.stack}
@@ -75,18 +74,6 @@ worker.on('failed', async (job, err) => {
 
   logger.error(errorMessage);
 
-  const flow = await Flow.query().findById(job.data.flowId);
-
-  if (!flow) {
-    await flowQueue.removeRepeatableByKey(job.repeatJobKey);
-
-    const flowNotFoundErrorMessage = `
-      JOB ID: ${job.id} - FLOW ID: ${job.data.flowId} has been deleted from Redis because flow was not found!
-    `;
-
-    logger.error(flowNotFoundErrorMessage);
-  }
-
   Sentry.captureException(err, {
     extra: {
       jobId: job.id,

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automatisch/cli",
-  "version": "0.9.3",
+  "version": "0.8.0",
   "license": "See LICENSE file",
   "description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
   "contributors": [
@@ -33,7 +33,7 @@
     "version": "oclif readme && git add README.md"
   },
   "dependencies": {
-    "@automatisch/backend": "^0.9.3",
+    "@automatisch/backend": "^0.8.0",
     "@oclif/core": "^1",
     "@oclif/plugin-help": "^5",
     "@oclif/plugin-plugins": "^2.0.1",

packages/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automatisch/docs",
-  "version": "0.9.3",
+  "version": "0.8.0",
   "license": "See LICENSE file",
   "description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
   "private": true,

packages/e2e-tests/cypress.config.js

@@ -0,0 +1,17 @@
+const { defineConfig } = require('cypress');
+
+const TO_BE_PROVIDED = 'HAS_TO_BE_PROVIDED_IN_cypress.env.json';
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3001',
+    env: {
+      login_email: 'user@automatisch.io',
+      login_password: 'sample',
+      deepl_auth_key: TO_BE_PROVIDED,
+    },
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+    viewportWidth: 1280,
+    viewportHeight: 768,
+  },
+});

packages/e2e-tests/cypress/e2e/apps/list-apps.js

@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+
+describe('Apps page', () => {
+  before(() => {
+    cy.login();
+
+    cy.og('apps-page-drawer-link').click();
+  });
+
+  after(() => {
+    cy.logout();
+  });
+
+  it('displays applications', () => {
+    cy.og('apps-loader').should('not.exist');
+    cy.og('app-row').should('have.length.least', 1);
+
+    cy.ss('Applications');
+  });
+
+  context('can add connection', () => {
+    before(() => {
+      cy
+        .og('add-connection-button')
+        .click({ force: true });
+    });
+
+    it('lists applications', () => {
+      cy.og('app-list-item').should('have.length.above', 1);
+    });
+
+    it('searches an application', () => {
+      cy.og('search-for-app-text-field').type('DeepL');
+      cy.og('app-list-item').should('have.length', 1);
+    });
+
+    it('goes to app page to create a connection', () => {
+      cy.og('app-list-item').first().click();
+
+      cy.location('pathname').should('equal', '/app/deepl/connections/add');
+
+      cy.og('add-app-connection-dialog').should('be.visible');
+    });
+
+    it('closes the dialog on backdrop click', () => {
+      cy.clickOutside();
+
+      cy.location('pathname').should('equal', '/app/deepl/connections');
+      cy.og('add-app-connection-dialog').should('not.exist');
+    });
+  });
+});

packages/e2e-tests/cypress/e2e/connections/create-connection.js

@@ -0,0 +1,48 @@
+/// <reference types="cypress" />
+
+describe('Connections page', () => {
+  before(() => {
+    cy.login();
+
+    cy.og('apps-page-drawer-link').click();
+
+    cy.visit('/app/deepl/connections');
+  });
+
+  after(() => {
+    cy.logout();
+  });
+
+  it('shows connections if any', () => {
+    cy.og('apps-loader').should('not.exist');
+
+    cy.ss('DeepL connections before creating a connection');
+  });
+
+  context('can add connection', () => {
+    it('has a button to open add connection dialog', () => {
+      cy.scrollTo('top', { ensureScrollable: false });
+
+      cy
+        .og('add-connection-button')
+        .should('be.visible');
+    });
+
+    it('add connection button takes user to add connection page', () => {
+      cy.og('add-connection-button').click();
+
+      cy.location('pathname').should('equal', '/app/deepl/connections/add');
+    });
+
+    it('shows add connection dialog to create a new connection', () => {
+      cy.get('input[name="screenName"]').type('e2e-test connection!');
+      cy.get('input[name="authenticationKey"]').type(Cypress.env('deepl_auth_key'));
+
+      cy.og('create-connection-button').click();
+
+      cy.og('create-connection-button').should('not.exist');
+
+      cy.ss('DeepL connections after creating a connection');
+    });
+  });
+});

packages/e2e-tests/cypress/e2e/executions/display-execution.js

@@ -0,0 +1,32 @@
+/// <reference types="cypress" />
+
+describe('Execution page', () => {
+  before(() => {
+    cy.login();
+
+    cy.og('executions-page-drawer-link').click();
+    cy.og('execution-row').first().click({ force: true });
+
+    cy.location('pathname').should('match', /^\/executions\//);
+  });
+
+  after(() => {
+    cy.logout();
+  });
+
+  it('displays data in by default', () => {
+    cy.og('execution-step').should('have.length', 2);
+
+    cy.ss('Execution - data in');
+  });
+
+  it('displays data out', () => {
+    cy.og('data-out-tab').click({ multiple: true });
+
+    cy.ss('Execution - data out');
+  });
+
+  it('does not display error', () => {
+    cy.og('error-tab').should('not.exist');
+  });
+});

packages/e2e-tests/cypress/e2e/executions/list-executions.js

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+
+describe('Executions page', () => {
+  before(() => {
+    cy.login();
+
+    cy.og('executions-page-drawer-link').click();
+  });
+
+  after(() => {
+    cy.logout();
+  });
+
+  it('displays executions', () => {
+    cy.og('executions-loader').should('not.exist');
+    cy.og('execution-row').should('exist');
+
+    cy.ss('Executions');
+  });
+});

packages/e2e-tests/cypress/e2e/flow-editor/create-flow.js

@@ -0,0 +1,217 @@
+/// <reference types="cypress" />
+
+describe('Flow editor page', () => {
+  before(() => {
+    cy.login();
+  });
+
+  after(() => {
+    cy.logout();
+  });
+
+  it('create flow', () => {
+    cy.og('create-flow-button').click({ force: true });
+  });
+
+  it('has two steps by default', () => {
+    cy.og('flow-step').should('have.length', 2);
+  });
+
+  context('edit flow', () => {
+    context('arrange Scheduler trigger', () => {
+      context('choose app and event substep', () => {
+        it('choose application', () => {
+          cy.og('choose-app-autocomplete').click();
+
+          cy.get('li[role="option"]:contains("Scheduler")').click();
+        });
+
+        it('choose an event', () => {
+          cy.og('choose-event-autocomplete').should('be.visible').click();
+
+          cy.get('li[role="option"]:contains("Every hour")').click();
+        });
+
+        it('continue to next step', () => {
+          cy.og('flow-substep-continue-button').click();
+        });
+
+        it('collapses the substep', () => {
+          cy.og('choose-app-autocomplete').should('not.be.visible');
+          cy.og('choose-event-autocomplete').should('not.be.visible');
+        });
+      });
+
+      context('set up a trigger', () => {
+        it('choose "yes" in "trigger on weekends?"', () => {
+          cy.og('parameters.triggersOnWeekend-autocomplete')
+            .should('be.visible')
+            .click();
+
+          cy.get('li[role="option"]:contains("Yes")').click();
+        });
+
+        it('continue to next step', () => {
+          cy.og('flow-substep-continue-button').click();
+        });
+
+        it('collapses the substep', () => {
+          cy.og('parameters.triggersOnWeekend-autocomplete').should(
+            'not.exist'
+          );
+        });
+      });
+
+      context('test trigger', () => {
+        it('show sample output', () => {
+          cy.og('flow-test-substep-output').should('not.exist');
+
+          cy.og('flow-substep-continue-button').click();
+
+          cy.og('flow-test-substep-output').should('be.visible');
+
+          cy.ss('Scheduler trigger test output');
+
+          cy.og('flow-substep-continue-button').click();
+        });
+      });
+    });
+
+    context('arrange DeepL action', () => {
+      context('choose app and event substep', () => {
+        it('choose application', () => {
+          cy.og('choose-app-autocomplete').click();
+
+          cy.get('li[role="option"]:contains("DeepL")').click();
+        });
+
+        it('choose an event', () => {
+          cy.og('choose-event-autocomplete').should('be.visible').click();
+
+          cy.get(
+            'li[role="option"]:contains("Translate Text")'
+          ).click();
+        });
+
+        it('continue to next step', () => {
+          cy.og('flow-substep-continue-button').click();
+        });
+
+        it('collapses the substep', () => {
+          cy.og('choose-app-autocomplete').should('not.be.visible');
+          cy.og('choose-event-autocomplete').should('not.be.visible');
+        });
+      });
+
+      context('choose connection', () => {
+        it('choose connection', () => {
+          cy.og('choose-connection-autocomplete').click();
+
+          cy.get('li[role="option"]').first().click();
+        });
+
+        it('continue to next step', () => {
+          cy.og('flow-substep-continue-button').click();
+        });
+
+        it('collapses the substep', () => {
+          cy.og('choose-connection-autocomplete').should('not.be.visible');
+        });
+      });
+
+      context('set up action', () => {
+        it('arrange text', () => {
+          cy.og('power-input', ' [contenteditable]')
+            .click()
+            .type(
+              `Hello from e2e tests! Here is the first suggested variable's value; `
+            );
+
+          cy.og('power-input-suggestion-group')
+            .first()
+            .og('power-input-suggestion-item')
+            .first()
+            .click();
+
+          cy.clickOutside();
+
+          cy.ss('DeepL action text');
+        });
+
+        it('set target language', () => {
+          cy.og('parameters.targetLanguage-autocomplete').click();
+
+          cy.get(
+            'li[role="option"]:contains("Turkish")'
+          ).first().click();
+        });
+
+        it('continue to next step', () => {
+          cy.og('flow-substep-continue-button').click();
+        });
+
+        it('collapses the substep', () => {
+          cy.og('power-input', ' [contenteditable]').should('not.exist');
+        });
+      });
+
+      context('test trigger', () => {
+        it('show sample output', () => {
+          cy.og('flow-test-substep-output').should('not.exist');
+
+          cy.og('flow-substep-continue-button').click();
+
+          cy.og('flow-test-substep-output').should('be.visible');
+
+          cy.ss('DeepL action test output');
+
+          cy.og('flow-substep-continue-button').click();
+        });
+      });
+    });
+  });
+
+  context('publish and unpublish', () => {
+    it('publish flow', () => {
+      cy.og('unpublish-flow-button').should('not.exist');
+
+      cy.og('publish-flow-button').should('be.visible').click();
+
+      cy.og('publish-flow-button').should('not.exist');
+    });
+
+    it('shows read-only sticky snackbar', () => {
+      cy.og('flow-cannot-edit-info-snackbar').should('be.visible');
+
+      cy.ss('Published flow');
+    });
+
+    it('unpublish from snackbar', () => {
+      cy.og('unpublish-flow-from-snackbar').click();
+
+      cy.og('flow-cannot-edit-info-snackbar').should('not.exist');
+    });
+
+    it('publish once again', () => {
+      cy.og('publish-flow-button').should('be.visible').click();
+
+      cy.og('publish-flow-button').should('not.exist');
+    });
+
+    it('unpublish from layout top bar', () => {
+      cy.og('unpublish-flow-button').should('be.visible').click();
+
+      cy.og('unpublish-flow-button').should('not.exist');
+
+      cy.ss('Unpublished flow');
+    });
+  });
+
+  context('in layout', () => {
+    it('can go back to flows page', () => {
+      cy.og('editor-go-back-button').click();
+
+      cy.location('pathname').should('equal', '/flows');
+    });
+  });
+});

packages/e2e-tests/cypress/support/commands.js

@@ -0,0 +1,44 @@
+Cypress.Commands.add(
+  'og',
+  { prevSubject: 'optional' },
+  (subject, selector, suffix = '') => {
+    if (subject) {
+      return cy.wrap(subject).get(`[data-test="${selector}"]${suffix}`);
+    }
+
+    return cy.get(`[data-test="${selector}"]${suffix}`);
+  }
+);
+
+Cypress.Commands.add('login', () => {
+  cy.visit('/login');
+
+  cy.og('email-text-field').type(Cypress.env('login_email'));
+  cy.og('password-text-field').type(Cypress.env('login_password'));
+
+  cy.intercept('/graphql').as('graphqlCalls');
+  cy.intercept('https://notifications.automatisch.io/notifications.json').as(
+    'notificationsCall'
+  );
+  cy.og('login-button').click();
+
+  cy.wait(['@graphqlCalls', '@notificationsCall']);
+});
+
+Cypress.Commands.add('logout', () => {
+  cy.og('profile-menu-button').click();
+
+  cy.og('logout-item').click();
+});
+
+Cypress.Commands.add('ss', (name, opts = {}) => {
+  return cy.screenshot(name, {
+    overwrite: true,
+    capture: 'viewport',
+    ...opts,
+  });
+});
+
+Cypress.Commands.add('clickOutside', () => {
+  return cy.get('body').click(0, 0);
+});

packages/e2e-tests/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

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

@@ -1,16 +1,12 @@
 const path = require('node:path');
-const { AuthenticatedPage } = require('./authenticated-page');
+const { BasePage } = require('./base-page');
 
-export class ApplicationsPage extends AuthenticatedPage {
-  screenshotPath = '/applications';
+export class ApplicationsPage extends BasePage {
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
 
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
-  constructor(page) {
-    super(page);
+    const computedPath = path.join('applications', plainPath);
 
-    this.drawerLink = this.page.getByTestId('apps-page-drawer-link');
-    this.addConnectionButton = this.page.getByTestId('add-connection-button');
+    return await super.screenshot({ path: computedPath, ...restOptions });
   }
 }

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

@@ -1,21 +0,0 @@
-const path = require('node:path');
-const { expect } = require('@playwright/test');
-const { BasePage } = require('./base-page');
-const { LoginPage } = require('./login-page');
-
-export class AuthenticatedPage extends BasePage {
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
-  constructor(page) {
-    super(page);
-
-    this.profileMenuButton = this.page.getByTestId('profile-menu-button');
-    this.adminMenuItem = this.page.getByRole('menuitem', { name: 'Admin' });
-    this.userInterfaceDrawerItem = this.page.getByTestId('user-interface-drawer-link');
-    this.appBar = this.page.getByTestId('app-bar');
-    this.goToDashboardButton = this.page.getByTestId('go-back-drawer-link');
-    this.typographyLogo = this.page.getByTestId('typography-logo');
-    this.customLogo = this.page.getByTestId('custom-logo');
-  }
-}

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

@@ -1,14 +1,11 @@
 const path = require('node:path');
 
 export class BasePage {
-  screenshotPath = '/';
-
   /**
    * @param {import('@playwright/test').Page} page
    */
   constructor(page) {
     this.page = page;
-    this.snackbar = this.page.locator('#notistack-snackbar');
   }
 
   async clickAway() {
@@ -18,12 +15,20 @@ export class BasePage {
   async screenshot(options = {}) {
     const { path: plainPath, ...restOptions } = options;
 
-    const computedPath = path.join(
-      'output/screenshots',
-      this.screenshotPath,
-      plainPath
-    );
+    const computedPath = path.join('output/screenshots', plainPath);
 
     return await this.page.screenshot({ path: computedPath, ...restOptions });
   }
+
+  async login() {
+    await this.page.goto('/login');
+    await this.page
+      .getByTestId('email-text-field')
+      .fill(process.env.LOGIN_EMAIL);
+    await this.page
+      .getByTestId('password-text-field')
+      .fill(process.env.LOGIN_PASSWORD);
+
+    await this.page.getByTestId('login-button').click();
+  }
 }

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

@@ -1,8 +1,14 @@
 const path = require('node:path');
-const { AuthenticatedPage } = require('./authenticated-page');
+const { BasePage } = require('./base-page');
 
-export class ConnectionsPage extends AuthenticatedPage {
-  screenshotPath = '/connections';
+export class ConnectionsPage extends BasePage {
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('connections', plainPath);
+
+    return await super.screenshot({ path: computedPath, ...restOptions });
+  }
 
   async clickAddConnectionButton() {
     await this.page.getByTestId('add-connection-button').click();

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

@@ -1,6 +1,12 @@
 const path = require('node:path');
-const { AuthenticatedPage } = require('./authenticated-page');
+const { BasePage } = require('./base-page');
 
-export class ExecutionsPage extends AuthenticatedPage {
-  screenshotPath = '/executions';
+export class ExecutionsPage extends BasePage {
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('executions', plainPath);
+
+    return await super.screenshot({ path: computedPath, ...restOptions });
+  }
 }

packages/e2e-tests/fixtures/flow-editor-page.js

@@ -1,15 +1,9 @@
 const path = require('node:path');
-const { AuthenticatedPage } = require('./authenticated-page');
+const { BasePage } = require('./base-page');
 
-export class FlowEditorPage extends AuthenticatedPage {
-  screenshotPath = '/flow-editor';
-
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
+export class FlowEditorPage extends BasePage {
   constructor(page) {
     super(page);
-
     this.appAutocomplete = this.page.getByTestId('choose-app-autocomplete');
     this.eventAutocomplete = this.page.getByTestId('choose-event-autocomplete');
     this.continueButton = this.page.getByTestId('flow-substep-continue-button');
@@ -21,6 +15,13 @@ export class FlowEditorPage extends AuthenticatedPage {
     this.publishFlowButton = this.page.getByTestId('publish-flow-button');
     this.infoSnackbar = this.page.getByTestId('flow-cannot-edit-info-snackbar');
     this.trigger = this.page.getByLabel('Trigger on weekends?');
-    this.stepCircularLoader = this.page.getByTestId('step-circular-loader');
+  }
+
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('flow-editor', plainPath);
+
+    return await super.screenshot({ path: computedPath, ...restOptions });
   }
 }

packages/e2e-tests/fixtures/index.js

@@ -1,21 +1,10 @@
-const { test, expect } = require('@playwright/test');
+const base = require('@playwright/test');
 const { ApplicationsPage } = require('./applications-page');
 const { ConnectionsPage } = require('./connections-page');
 const { ExecutionsPage } = require('./executions-page');
 const { FlowEditorPage } = require('./flow-editor-page');
-const { UserInterfacePage } = require('./user-interface-page');
-const { LoginPage } = require('./login-page');
 
-exports.test = test.extend({
-  page: async ({ page }, use) => {
-    const loginPage = new LoginPage(page);
-    await loginPage.login();
-
-    await expect(loginPage.loginButton).not.toBeVisible();
-    await expect(page).toHaveURL('/flows');
-
-    await use(page);
-  },
+exports.test = base.test.extend({
   applicationsPage: async ({ page }, use) => {
     await use(new ApplicationsPage(page));
   },
@@ -28,30 +17,5 @@ exports.test = test.extend({
   flowEditorPage: async ({ page }, use) => {
     await use(new FlowEditorPage(page));
   },
-  userInterfacePage: async ({ page }, use) => {
-    await use(new UserInterfacePage(page));
-  },
 });
-
-exports.publicTest = test.extend({
-  page: async ({ page }, use) => {
-    await use(page);
-  },
-  loginPage: async ({ page }, use) => {
-    const loginPage = new LoginPage(page);
-
-    await loginPage.open();
-
-    await use(loginPage);
-  },
-});
-
-expect.extend({
-  toBeClickableLink: async (locator) => {
-    await expect(locator).not.toHaveAttribute('aria-disabled', 'true');
-
-    return { pass: true };
-  },
-});
-
-exports.expect = expect;
+exports.expect = base.expect;

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

@@ -1,34 +0,0 @@
-const path = require('node:path');
-const { expect } = require('@playwright/test');
-const { BasePage } = require('./base-page');
-
-export class LoginPage extends BasePage {
-  path = '/login';
-
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
-  constructor(page) {
-    super(page);
-
-    this.page = page;
-    this.emailTextField = this.page.getByTestId('email-text-field');
-    this.passwordTextField = this.page.getByTestId('password-text-field');
-    this.loginButton = this.page.getByTestId('login-button');
-  }
-
-  async open() {
-    return await this.page.goto(this.path);
-  }
-
-  async login(
-    email = process.env.LOGIN_EMAIL,
-    password = process.env.LOGIN_PASSWORD
-  ) {
-    await this.page.goto(this.path);
-    await this.emailTextField.fill(email);
-    await this.passwordTextField.fill(password);
-
-    await this.loginButton.click();
-  }
-}

packages/e2e-tests/fixtures/user-interface-page.js

@@ -1,53 +0,0 @@
-const path = require('node:path');
-const { AuthenticatedPage } = require('./authenticated-page');
-
-export class UserInterfacePage extends AuthenticatedPage {
-  screenshotPath = '/user-interface';
-
-  /**
-   * @param {import('@playwright/test').Page} page
-   */
-  constructor(page) {
-    super(page);
-
-    this.flowRowCardActionArea = this.page
-      .getByTestId('flow-row')
-      .first()
-      .getByTestId('card-action-area');
-    this.updateButton = this.page.getByTestId('update-button');
-    this.primaryMainColorInput = this.page
-      .getByTestId('primary-main-color-input')
-      .getByTestId('color-text-field');
-    this.primaryDarkColorInput = this.page
-      .getByTestId('primary-dark-color-input')
-      .getByTestId('color-text-field');
-    this.primaryLightColorInput = this.page
-      .getByTestId('primary-light-color-input')
-      .getByTestId('color-text-field');
-    this.logoSvgCodeInput = this.page.getByTestId('logo-svg-data-text-field');
-    this.primaryMainColorButton = this.page
-      .getByTestId('primary-main-color-input')
-      .getByTestId('color-button');
-    this.primaryDarkColorButton = this.page
-      .getByTestId('primary-dark-color-input')
-      .getByTestId('color-button');
-    this.primaryLightColorButton = this.page
-      .getByTestId('primary-light-color-input')
-      .getByTestId('color-button');
-  }
-
-  hexToRgb(hexColor) {
-    hexColor = hexColor.replace('#', '');
-    const r = parseInt(hexColor.substring(0, 2), 16);
-    const g = parseInt(hexColor.substring(2, 4), 16);
-    const b = parseInt(hexColor.substring(4, 6), 16);
-
-    return `rgb(${r}, ${g}, ${b})`;
-  }
-
-  encodeSVG(svgCode) {
-    const encoded = encodeURIComponent(svgCode);
-
-    return `data:image/svg+xml;utf8,${encoded}`;
-  }
-}

packages/e2e-tests/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@automatisch/e2e-tests",
-  "version": "0.9.3",
+  "version": "0.8.0",
   "license": "See LICENSE file",
   "private": true,
   "description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
   "scripts": {
-    "test": "playwright test",
-    "test:fast": "yarn test -j 90% --quiet --reporter null --ignore-snapshots -x"
+    "open": "cypress open",
+    "playwright": "playwright test"
   },
   "contributors": [
     {
@@ -23,7 +23,8 @@
     "url": "https://github.com/automatisch/automatisch/issues"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.2"
+    "@playwright/test": "^1.36.2",
+    "cypress": "^10.9.0"
   },
   "dependencies": {
     "dotenv": "^16.3.1"

packages/e2e-tests/playwright.config.js

@@ -16,18 +16,18 @@ module.exports = defineConfig({
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  retries: 0,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
-  /* Timeout threshold for each test */
-  timeout: 30000,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI ? 'github' : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.BASE_URL
-      || 'http://localhost:3001',
+    baseURL: process.env.CI
+      ? 'https://sandbox.automatisch.io'
+      : 'http://localhost:3001',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
@@ -35,11 +35,6 @@ module.exports = defineConfig({
     viewport: { width: 1280, height: 720 },
   },
 
-  expect: {
-    /* Timeout threshold for each assertion */
-    timeout: 10000,
-  },
-
   /* Configure projects for major browsers */
   projects: [
     {

packages/e2e-tests/tests/apps/list-apps.spec.js

@@ -2,16 +2,16 @@
 const { test, expect } = require('../../fixtures/index');
 
 test.describe('Apps page', () => {
-  test.beforeEach(async ({ applicationsPage }) => {
-    await applicationsPage.drawerLink.click();
+  test.beforeEach(async ({ page, applicationsPage }) => {
+    await applicationsPage.login();
+    await page.getByTestId('apps-page-drawer-link').click();
   });
 
-  // no connected application exists in an empty account
-  test.skip('displays no applications', async ({ applicationsPage }) => {
-    await applicationsPage.page.getByTestId('apps-loader').waitFor({
+  test('displays applications', async ({ page, applicationsPage }) => {
+    await page.getByTestId('apps-loader').waitFor({
       state: 'detached',
     });
-    await expect(applicationsPage.page.getByTestId('app-row')).not.toHaveCount(0);
+    await expect(page.getByTestId('app-row')).not.toHaveCount(0);
 
     await applicationsPage.screenshot({
       path: 'Applications.png',
@@ -19,56 +19,49 @@ test.describe('Apps page', () => {
   });
 
   test.describe('can add connection', () => {
-    test.beforeEach(async ({ applicationsPage }) => {
-      await expect(applicationsPage.addConnectionButton).toBeClickableLink();
-      await applicationsPage.addConnectionButton.click();
-      await applicationsPage
-        .page
+    test.beforeEach(async ({ page }) => {
+      await expect(page.getByTestId('add-connection-button')).toBeVisible();
+      await page.getByTestId('add-connection-button').click();
+      await page
         .getByTestId('search-for-app-loader')
         .waitFor({ state: 'detached' });
     });
 
-    test('lists applications', async ({ applicationsPage }) => {
-      const appListItemCount = await applicationsPage.page.getByTestId('app-list-item').count();
+    test('lists applications', async ({ page, applicationsPage }) => {
+      const appListItemCount = await page.getByTestId('app-list-item').count();
       expect(appListItemCount).toBeGreaterThan(10);
 
       await applicationsPage.clickAway();
     });
 
-    test('searches an application', async ({ applicationsPage }) => {
-      await applicationsPage.page.getByTestId('search-for-app-text-field').fill('DeepL');
-      await applicationsPage
-        .page
-        .getByTestId('search-for-app-loader')
-        .waitFor({ state: 'detached' });
-
-      await expect(applicationsPage.page.getByTestId('app-list-item')).toHaveCount(1);
+    test('searches an application', async ({ page, applicationsPage }) => {
+      await page.getByTestId('search-for-app-text-field').fill('DeepL');
+      await expect(page.getByTestId('app-list-item')).toHaveCount(1);
 
       await applicationsPage.clickAway();
     });
 
     test('goes to app page to create a connection', async ({
+      page,
       applicationsPage,
     }) => {
-      // loading app, app config, app auth clients take time
-      test.setTimeout(60000);
-
-      await applicationsPage.page.getByTestId('app-list-item').first().click();
-      await expect(applicationsPage.page).toHaveURL('/app/deepl/connections/add?shared=false');
-      await expect(applicationsPage.page.getByTestId('add-app-connection-dialog')).toBeVisible();
+      await page.getByTestId('app-list-item').first().click();
+      await expect(page).toHaveURL('/app/deepl/connections/add');
+      await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
 
       await applicationsPage.clickAway();
     });
 
     test('closes the dialog on backdrop click', async ({
+      page,
       applicationsPage,
     }) => {
-      await applicationsPage.page.getByTestId('app-list-item').first().click();
-      await expect(applicationsPage.page).toHaveURL('/app/deepl/connections/add?shared=false');
-      await expect(applicationsPage.page.getByTestId('add-app-connection-dialog')).toBeVisible();
+      await page.getByTestId('app-list-item').first().click();
+      await expect(page).toHaveURL('/app/deepl/connections/add');
+      await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
       await applicationsPage.clickAway();
-      await expect(applicationsPage.page).toHaveURL('/app/deepl/connections');
-      await expect(applicationsPage.page.getByTestId('add-app-connection-dialog')).toBeHidden();
+      await expect(page).toHaveURL('/app/deepl/connections');
+      await expect(page.getByTestId('add-app-connection-dialog')).toBeHidden();
     });
   });
 });

packages/e2e-tests/tests/authentication/login.spec.js

@@ -1,22 +0,0 @@
-// @ts-check
-const { publicTest, test, expect } = require('../../fixtures/index');
-
-publicTest.describe('Login page', () => {
-  publicTest('shows login form', async ({ loginPage }) => {
-    await loginPage.emailTextField.waitFor({ state: 'attached' });
-    await loginPage.passwordTextField.waitFor({ state: 'attached' });
-    await loginPage.loginButton.waitFor({ state: 'attached' });
-  });
-
-  publicTest('lets user login', async ({ loginPage }) => {
-    await loginPage.login();
-
-    await expect(loginPage.page).toHaveURL('/flows');
-  });
-
-  publicTest(`doesn't let un-existing user login`, async ({ loginPage }) => {
-    await loginPage.login('nonexisting@automatisch.io', 'sample');
-
-    await expect(loginPage.page).toHaveURL('/login');
-  });
-});

packages/e2e-tests/tests/connections/create-connection.spec.js

@@ -3,6 +3,7 @@ const { test, expect } = require('../../fixtures/index');
 
 test.describe('Connections page', () => {
   test.beforeEach(async ({ page, connectionsPage }) => {
+    await connectionsPage.login();
     await page.getByTestId('apps-page-drawer-link').click();
     await page.goto('/app/ntfy/connections');
   });
@@ -19,7 +20,7 @@ test.describe('Connections page', () => {
 
   test.describe('can add connection', () => {
     test('has a button to open add connection dialog', async ({ page }) => {
-      await expect(page.getByTestId('add-connection-button')).toBeClickableLink();
+      await expect(page.getByTestId('add-connection-button')).toBeVisible();
     });
 
     test('add connection button takes user to add connection page', async ({
@@ -27,7 +28,7 @@ test.describe('Connections page', () => {
       connectionsPage,
     }) => {
       await connectionsPage.clickAddConnectionButton();
-      await expect(page).toHaveURL('/app/ntfy/connections/add?shared=false');
+      await expect(page).toHaveURL('/app/ntfy/connections/add');
     });
 
     test('shows add connection dialog to create a new connection', async ({
@@ -35,7 +36,7 @@ test.describe('Connections page', () => {
       connectionsPage,
     }) => {
       await connectionsPage.clickAddConnectionButton();
-      await expect(page).toHaveURL('/app/ntfy/connections/add?shared=false');
+      await expect(page).toHaveURL('/app/ntfy/connections/add');
       await page.getByTestId('create-connection-button').click();
       await expect(
         page.getByTestId('create-connection-button')

packages/e2e-tests/tests/executions/display-execution.spec.js

@@ -1,9 +1,10 @@
 // @ts-check
 const { test, expect } = require('../../fixtures/index');
 
-// no execution data exists in an empty account
-test.describe.skip('Executions page', () => {
+test.describe('Executions page', () => {
   test.beforeEach(async ({ page, executionsPage }) => {
+    await executionsPage.login();
+
     await page.getByTestId('executions-page-drawer-link').click();
     await page.getByTestId('execution-row').first().click();
 

packages/e2e-tests/tests/executions/list-executions.spec.js

@@ -3,11 +3,12 @@ const { test, expect } = require('../../fixtures/index');
 
 test.describe('Executions page', () => {
   test.beforeEach(async ({ page, executionsPage }) => {
+    await executionsPage.login();
+
     await page.getByTestId('executions-page-drawer-link').click();
   });
 
-  // no executions exist in an empty account
-  test.skip('displays executions', async ({ page, executionsPage }) => {
+  test('displays executions', async ({ page, executionsPage }) => {
     await page.getByTestId('executions-loader').waitFor({
       state: 'detached',
     });

packages/e2e-tests/tests/flow-editor/create-flow.spec.js

@@ -1,206 +1,205 @@
 // @ts-check
+const { FlowEditorPage } = require('../../fixtures/flow-editor-page');
 const { test, expect } = require('../../fixtures/index');
 
-test('Ensure creating a new flow works', async ({ page }) => {
-  await page.getByTestId('create-flow-button').click();
-  await expect(page).toHaveURL(/\/editor\/create/);
-  await expect(page).toHaveURL(
+test.describe.configure({ mode: 'serial' });
+
+let page;
+let flowEditorPage;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+  flowEditorPage = new FlowEditorPage(page);
+});
+
+test('create flow', async ({}) => {
+  await flowEditorPage.login();
+
+  await flowEditorPage.page.getByTestId('create-flow-button').click();
+  await expect(flowEditorPage.page).toHaveURL(/\/editor\/create/);
+  await expect(flowEditorPage.page).toHaveURL(
     /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
   );
-})
+});
 
-test(
-  'Create a new flow with a Scheduler step then an Ntfy step',
-  async ({ flowEditorPage, page }) => {
-    await test.step('create flow', async () => {
-      await test.step('navigate to new flow page', async () => {
-        await page.getByTestId('create-flow-button').click();
-        await page.waitForURL(
-          /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
-        );
-      });
-      
-      await test.step('has two steps by default', async () => {
-        await expect(page.getByTestId('flow-step')).toHaveCount(2);
-      });
+test('has two steps by default', async ({}) => {
+  await expect(flowEditorPage.page.getByTestId('flow-step')).toHaveCount(2);
+});
+
+test.describe('arrange Scheduler trigger', () => {
+  test.describe('choose app and event substep', () => {
+    test('choose application', async ({}) => {
+      await flowEditorPage.appAutocomplete.click();
+      await flowEditorPage.page
+        .getByRole('option', { name: 'Scheduler' })
+        .click();
     });
 
-    await test.step('setup Scheduler trigger', async () => {
-      await test.step('choose app and event substep', async () => {
-        await test.step('choose application', async () => {
-          await flowEditorPage.appAutocomplete.click();
-          await page
-            .getByRole('option', { name: 'Scheduler' })
-            .click();
-        });
-
-        await test.step('choose and event', async () => {
-          await expect(flowEditorPage.eventAutocomplete).toBeVisible();
-          await flowEditorPage.eventAutocomplete.click();
-          await page
-            .getByRole('option', { name: 'Every hour' })
-            .click();
-        });
-
-        await test.step('continue to next step', async () => {
-          await flowEditorPage.continueButton.click();
-        });
-
-        await test.step('collapses the substep', async () => {
-          await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
-          await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
-        });
-      });
-
-      await test.step('set up a trigger', async () => {
-        await test.step('choose "yes" in "trigger on weekends?"', async () => {
-          await expect(flowEditorPage.trigger).toBeVisible();
-          await flowEditorPage.trigger.click();
-          await page.getByRole('option', { name: 'Yes' }).click();
-        });
-    
-        await test.step('continue to next step', async () => {
-          await flowEditorPage.continueButton.click();
-        });
-    
-        await test.step('collapses the substep', async () => {
-          await expect(flowEditorPage.trigger).not.toBeVisible();
-        });
-      });
-
-      await test.step('test trigger', async () => {
-        await test.step('show sample output', async () => {
-          await expect(flowEditorPage.testOuput).not.toBeVisible();
-          await flowEditorPage.continueButton.click();
-          await expect(flowEditorPage.testOuput).toBeVisible();
-          await flowEditorPage.screenshot({
-            path: 'Scheduler trigger test output.png',
-          });
-          await flowEditorPage.continueButton.click();
-        });
-      });
+    test('choose an event', async ({}) => {
+      await expect(flowEditorPage.eventAutocomplete).toBeVisible();
+      await flowEditorPage.eventAutocomplete.click();
+      await flowEditorPage.page
+        .getByRole('option', { name: 'Every hour' })
+        .click();
     });
 
-    await test.step('arrange Ntfy action', async () => {
-      await test.step('choose app and event substep', async () => {
-        await test.step('choose application', async () => {
-          await flowEditorPage.appAutocomplete.click();
-          await page.getByRole('option', { name: 'Ntfy' }).click();
-        });
-    
-        await test.step('choose an event', async () => {
-          await expect(flowEditorPage.eventAutocomplete).toBeVisible();
-          await flowEditorPage.eventAutocomplete.click();
-          await page
-            .getByRole('option', { name: 'Send message' })
-            .click();
-        });
-    
-        await test.step('continue to next step', async () => {
-          await flowEditorPage.continueButton.click();
-        });
-    
-        await test.step('collapses the substep', async () => {
-          await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
-          await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
-        });
-      });
-    
-      await test.step('choose connection substep', async () => {
-        await test.step('choose connection list item', async () => {
-          await flowEditorPage.connectionAutocomplete.click();
-          await page.getByRole('option').first().click();
-        });
-    
-        await test.step('continue to next step', async () => {
-          await flowEditorPage.continueButton.click();
-        });
-    
-        await test.step('collapses the substep', async () => {
-          await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
-        });
-      });
-    
-      await test.step('set up action substep', async () => {
-        await test.step('fill topic and message body', async () => {
-          await page
-            .getByTestId('parameters.topic-power-input')
-            .locator('[contenteditable]')
-            .fill('Topic');
-          await page
-            .getByTestId('parameters.message-power-input')
-            .locator('[contenteditable]')
-            .fill('Message body');
-        });
-    
-        await test.step('continue to next step', async () => {
-          await flowEditorPage.continueButton.click();
-        });
-    
-        await test.step('collapses the substep', async () => {
-          await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
-        });
-      });
-    
-      await test.step('test trigger substep', async () => {
-        await test.step('show sample output', async () => {
-          await expect(flowEditorPage.testOuput).not.toBeVisible();
-          await page
-            .getByTestId('flow-substep-continue-button')
-            .first()
-            .click();
-          await expect(flowEditorPage.testOuput).toBeVisible();
-          await flowEditorPage.screenshot({
-            path: 'Ntfy action test output.png',
-          });
-          await flowEditorPage.continueButton.click();
-        });
-      });
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
     });
 
-    await test.step('publish and unpublish', async () => {
-      await test.step('publish flow', async () => {
-        await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
-        await expect(flowEditorPage.publishFlowButton).toBeVisible();
-        await flowEditorPage.publishFlowButton.click();
-        await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
-      });
-    
-      await test.step('shows read-only sticky snackbar', async () => {
-        await expect(flowEditorPage.infoSnackbar).toBeVisible();
-        await flowEditorPage.screenshot({
-          path: 'Published flow.png',
-        });
-      });
-    
-      await test.step('unpublish from snackbar', async () => {
-        await page
-          .getByTestId('unpublish-flow-from-snackbar')
-          .click();
-        await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
-      });
-    
-      await test.step('publish once again', async () => {
-        await expect(flowEditorPage.publishFlowButton).toBeVisible();
-        await flowEditorPage.publishFlowButton.click();
-        await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
-      });
-    
-      await test.step('unpublish from layout top bar', async () => {
-        await expect(flowEditorPage.unpublishFlowButton).toBeVisible();
-        await flowEditorPage.unpublishFlowButton.click();
-        await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
-        await flowEditorPage.screenshot({
-          path: 'Unpublished flow.png',
-        });
-      });
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
+      await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
     });
-    
-    await test.step('in layout', async () => {
-      await test.step('can go back to flows page', async () => {
-        await page.getByTestId('editor-go-back-button').click();
-        await expect(page).toHaveURL('/flows');
-      });
+  });
+
+  test.describe('set up a trigger', () => {
+    test('choose "yes" in "trigger on weekends?"', async ({}) => {
+      await expect(flowEditorPage.trigger).toBeVisible();
+      await flowEditorPage.trigger.click();
+      await flowEditorPage.page.getByRole('option', { name: 'Yes' }).click();
     });
-  }
-);
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.trigger).not.toBeVisible();
+    });
+  });
+
+  test.describe('test trigger', () => {
+    test('show sample output', async ({}) => {
+      await expect(flowEditorPage.testOuput).not.toBeVisible();
+      await flowEditorPage.continueButton.click();
+      await expect(flowEditorPage.testOuput).toBeVisible();
+      await flowEditorPage.screenshot({
+        path: 'Scheduler trigger test output.png',
+      });
+      await flowEditorPage.continueButton.click();
+    });
+  });
+});
+
+test.describe('arrange Ntfy action', () => {
+  test.describe('choose app and event substep', () => {
+    test('choose application', async ({}) => {
+      await flowEditorPage.appAutocomplete.click();
+      await flowEditorPage.page.getByRole('option', { name: 'Ntfy' }).click();
+    });
+
+    test('choose an event', async ({}) => {
+      await expect(flowEditorPage.eventAutocomplete).toBeVisible();
+      await flowEditorPage.eventAutocomplete.click();
+      await flowEditorPage.page
+        .getByRole('option', { name: 'Send message' })
+        .click();
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
+      await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
+    });
+  });
+
+  test.describe('choose connection', () => {
+    test('choose connection list item', async ({}) => {
+      await flowEditorPage.connectionAutocomplete.click();
+      await flowEditorPage.page.getByRole('listitem').first().click();
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
+    });
+  });
+
+  test.describe('set up action', () => {
+    test('fill topic and message body', async ({}) => {
+      await flowEditorPage.page
+        .getByTestId('parameters.topic-power-input')
+        .locator('[contenteditable]')
+        .fill('Topic');
+      await flowEditorPage.page
+        .getByTestId('parameters.message-power-input')
+        .locator('[contenteditable]')
+        .fill('Message body');
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
+    });
+  });
+
+  test.describe('test trigger', () => {
+    test('show sample output', async ({}) => {
+      await expect(flowEditorPage.testOuput).not.toBeVisible();
+      await flowEditorPage.page
+        .getByTestId('flow-substep-continue-button')
+        .first()
+        .click();
+      await expect(flowEditorPage.testOuput).toBeVisible();
+      await flowEditorPage.screenshot({
+        path: 'Ntfy action test output.png',
+      });
+      await flowEditorPage.continueButton.click();
+    });
+  });
+});
+
+test.describe('publish and unpublish', () => {
+  test('publish flow', async ({}) => {
+    await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
+    await expect(flowEditorPage.publishFlowButton).toBeVisible();
+    await flowEditorPage.publishFlowButton.click();
+    await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
+  });
+
+  test('shows read-only sticky snackbar', async ({}) => {
+    await expect(flowEditorPage.infoSnackbar).toBeVisible();
+    await flowEditorPage.screenshot({
+      path: 'Published flow.png',
+    });
+  });
+
+  test('unpublish from snackbar', async ({}) => {
+    await flowEditorPage.page
+      .getByTestId('unpublish-flow-from-snackbar')
+      .click();
+    await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
+  });
+
+  test('publish once again', async ({}) => {
+    await expect(flowEditorPage.publishFlowButton).toBeVisible();
+    await flowEditorPage.publishFlowButton.click();
+    await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
+  });
+
+  test('unpublish from layout top bar', async ({}) => {
+    await expect(flowEditorPage.unpublishFlowButton).toBeVisible();
+    await flowEditorPage.unpublishFlowButton.click();
+    await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
+    await flowEditorPage.screenshot({
+      path: 'Unpublished flow.png',
+    });
+  });
+});
+
+test.describe('in layout', () => {
+  test('can go back to flows page', async ({}) => {
+    await flowEditorPage.page.getByTestId('editor-go-back-button').click();
+    await expect(flowEditorPage.page).toHaveURL('/flows');
+  });
+});

packages/e2e-tests/tests/user-interface/user-interface-configuration.spec.js

@@ -1,176 +0,0 @@
-// @ts-check
-const { test, expect } = require('../../fixtures/index');
-
-test.describe.skip('User interface page', () => {
-  test.beforeEach(async ({ userInterfacePage }) => {
-    await userInterfacePage.profileMenuButton.click();
-    await userInterfacePage.adminMenuItem.click();
-    await expect(userInterfacePage.page).toHaveURL(/\/admin-settings\/users/);
-    await userInterfacePage.userInterfaceDrawerItem.click();
-    await expect(userInterfacePage.page).toHaveURL(
-      /\/admin-settings\/user-interface/
-    );
-    await userInterfacePage.page.waitForURL(/\/admin-settings\/user-interface/);
-  });
-
-  test.describe('checks if the shown values are used', async () => {
-    test('checks primary main color', async ({ userInterfacePage }) => {
-      await userInterfacePage.primaryMainColorInput.waitFor({
-        state: 'attached',
-      });
-      const initialPrimaryMainColor =
-        await userInterfacePage.primaryMainColorInput.inputValue();
-      const initialRgbColor = userInterfacePage.hexToRgb(
-        initialPrimaryMainColor
-      );
-      await expect(userInterfacePage.updateButton).toHaveCSS(
-        'background-color',
-        initialRgbColor
-      );
-    });
-
-    test('checks primary dark color', async ({ userInterfacePage }) => {
-      await userInterfacePage.primaryDarkColorInput.waitFor({
-        state: 'attached',
-      });
-      const initialPrimaryDarkColor =
-        await userInterfacePage.primaryDarkColorInput.inputValue();
-      const initialRgbColor = userInterfacePage.hexToRgb(
-        initialPrimaryDarkColor
-      );
-      await expect(userInterfacePage.appBar).toHaveCSS(
-        'background-color',
-        initialRgbColor
-      );
-    });
-
-    test('checks custom logo', async ({ userInterfacePage }) => {
-      const initialLogoSvgCode =
-        await userInterfacePage.logoSvgCodeInput.inputValue();
-      const logoSrcAttribute = await userInterfacePage.customLogo.getAttribute(
-        'src'
-      );
-      const svgCode = userInterfacePage.encodeSVG(initialLogoSvgCode);
-      expect(logoSrcAttribute).toMatch(svgCode);
-    });
-  });
-
-  test.describe(
-    'fill fields and check if the inputs reflect them properly',
-    async () => {
-      test('fill primary main color and check the color input', async ({
-        userInterfacePage,
-      }) => {
-        await userInterfacePage.primaryMainColorInput.fill('#FF5733');
-        const rgbColor = userInterfacePage.hexToRgb('#FF5733');
-        const button = await userInterfacePage.primaryMainColorButton;
-        const styleAttribute = await button.getAttribute('style');
-        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
-      });
-
-      test('fill primary dark color and check the color input', async ({
-        userInterfacePage,
-      }) => {
-        await userInterfacePage.primaryDarkColorInput.fill('#12F63F');
-        const rgbColor = userInterfacePage.hexToRgb('#12F63F');
-        const button = await userInterfacePage.primaryDarkColorButton;
-        const styleAttribute = await button.getAttribute('style');
-        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
-      });
-
-      test('fill primary light color and check the color input', async ({
-        userInterfacePage,
-      }) => {
-        await userInterfacePage.primaryLightColorInput.fill('#1D0BF5');
-        const rgbColor = userInterfacePage.hexToRgb('#1D0BF5');
-        const button = await userInterfacePage.primaryLightColorButton;
-        const styleAttribute = await button.getAttribute('style');
-        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
-      });
-    }
-  );
-
-  test.describe(
-    'update form based on input values and check if the inputs still reflect them',
-    async () => {
-      test('update primary main color and check color input', async ({
-        userInterfacePage,
-      }) => {
-        await userInterfacePage.primaryMainColorInput.fill('#00adef');
-        await userInterfacePage.updateButton.click();
-        const rgbColor = userInterfacePage.hexToRgb('#00adef');
-        const button = await userInterfacePage.primaryMainColorButton;
-        const styleAttribute = await button.getAttribute('style');
-        expect(styleAttribute).toBe(`background-color: ${rgbColor};`);
-      });
-
-      test('update primary dark color and check color input', async ({
-        userInterfacePage,
-      }) => {
-        await userInterfacePage.primaryDarkColorInput.fill('#222222');
-        await userInterfacePage.updateButton.click();
-        const rgbColor = userInterfacePage.hexToRgb('#222222');
-        const button = await userInterfacePage.primaryDarkColorButton;
-        const styleAttribute = await button.getAttribute('style');
-        expect(styleAttribute).toBe(`background-color: ${rgbColor};`);
-      });
-
-      test('update primary light color and check color input', async ({
-        userInterfacePage,
-      }) => {
-        await userInterfacePage.primaryLightColorInput.fill('#f90707');
-        await userInterfacePage.updateButton.click();
-        const rgbColor = userInterfacePage.hexToRgb('#f90707');
-        const button = await userInterfacePage.primaryLightColorButton;
-        const styleAttribute = await button.getAttribute('style');
-        expect(styleAttribute).toBe(`background-color: ${rgbColor};`);
-      });
-    }
-  );
-
-  test.describe('update form based on input values', async () => {
-    test('fill primary main color', async ({ userInterfacePage }) => {
-      await userInterfacePage.primaryMainColorInput.fill('#00adef');
-      await userInterfacePage.updateButton.click();
-      await userInterfacePage.snackbar.waitFor({ state: 'visible' });
-      await userInterfacePage.screenshot({
-        path: 'updated primary main color.png',
-      });
-    });
-
-    test('fill primary dark color', async ({ userInterfacePage }) => {
-      await userInterfacePage.primaryDarkColorInput.fill('#222222');
-      await userInterfacePage.updateButton.click();
-      await userInterfacePage.snackbar.waitFor({ state: 'visible' });
-      await userInterfacePage.screenshot({
-        path: 'updated primary dark color.png',
-      });
-    });
-
-    test('fill primary light color', async ({ userInterfacePage }) => {
-      await userInterfacePage.primaryLightColorInput.fill('#f90707');
-      await userInterfacePage.updateButton.click();
-      await userInterfacePage.goToDashboardButton.click();
-      await expect(userInterfacePage.page).toHaveURL('/flows');
-      const span = await userInterfacePage.flowRowCardActionArea;
-      await span.waitFor({ state: 'visible' });
-      await span.hover();
-      await userInterfacePage.screenshot({
-        path: 'updated primary light color.png',
-      });
-    });
-
-    test('fill logo svg code', async ({ userInterfacePage }) => {
-      await userInterfacePage.logoSvgCodeInput
-        .fill(`<svg width="25" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
-      <rect width="100%" height="100%" fill="white" />
-      <text x="10" y="40" font-family="Arial" font-size="40" fill="black">A</text>
-    </svg>`);
-      await userInterfacePage.updateButton.click();
-      await userInterfacePage.snackbar.waitFor({ state: 'visible' });
-      await userInterfacePage.screenshot({
-        path: 'updated svg code.png',
-      });
-    });
-  });
-});

packages/types/index.d.ts

@@ -119,8 +119,8 @@ export interface IPermission {
 
 export interface IPermissionCatalog {
   actions: { label: string; key: string; subjects: string[] }[];
-  subjects: { label: string; key: string }[];
-  conditions: { label: string; key: string }[];
+  subjects: { label: string; key: string; }[];
+  conditions: { label: string; key: string; }[];
 }
 
 export interface IFieldDropdown {
@@ -418,7 +418,7 @@ type TSamlAuthProvider = {
   id: string;
   name: string;
   certificate: string;
-  signatureAlgorithm: 'sha1' | 'sha256' | 'sha512';
+  signatureAlgorithm: "sha1" | "sha256" | "sha512";
   issuer: string;
   entryPoint: string;
   firstnameAttributeName: string;
@@ -426,9 +426,7 @@ type TSamlAuthProvider = {
   emailAttributeName: string;
   roleAttributeName: string;
   defaultRoleId: string;
-  active: boolean;
-  loginUrl: string;
-};
+}
 
 type AppConfig = {
   id: string;
@@ -438,7 +436,7 @@ type AppConfig = {
   canCustomConnect: boolean;
   shared: boolean;
   disabled: boolean;
-};
+}
 
 type AppAuthClient = {
   id: string;
@@ -446,13 +444,6 @@ type AppAuthClient = {
   appConfigId: string;
   authDefaults: string;
   formattedAuthDefaults: IJSONObject;
-};
-
-type Notification = {
-  name: string;
-  createdAt: string;
-  documentationUrl: string;
-  description: string;
 }
 
 declare module 'axios' {

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automatisch/types",
-  "version": "0.9.3",
+  "version": "0.8.0",
   "license": "See LICENSE file",
   "description": "Type definitions for automatisch",
   "homepage": "https://github.com/automatisch/automatisch",

packages/web/.env-example

@@ -1,4 +1,6 @@
 PORT=3001
+REACT_APP_API_URL=http://localhost:3000
 REACT_APP_GRAPHQL_URL=http://localhost:3000/graphql
 # HTTPS=true
 REACT_APP_BASE_URL=http://localhost:3001
+REACT_APP_NOTIFICATIONS_URL=https://notifications.automatisch.io

packages/web/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@automatisch/web",
-  "version": "0.9.3",
+  "version": "0.8.0",
   "license": "See LICENSE file",
   "description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
   "dependencies": {
     "@apollo/client": "^3.6.9",
-    "@automatisch/types": "^0.9.3",
+    "@automatisch/types": "^0.8.0",
     "@casl/ability": "^6.5.0",
     "@casl/react": "^3.1.0",
     "@emotion/react": "^11.4.1",
@@ -30,7 +30,6 @@
     "graphql": "^15.6.0",
     "lodash": "^4.17.21",
     "luxon": "^2.3.1",
-    "mui-color-input": "^2.0.0",
     "notistack": "^2.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/web/src/adminSettingsRoutes.tsx

@@ -6,8 +6,6 @@ import CreateUser from 'pages/CreateUser';
 import Roles from 'pages/Roles/index.ee';
 import CreateRole from 'pages/CreateRole/index.ee';
 import EditRole from 'pages/EditRole/index.ee';
-import Authentication from 'pages/Authentication';
-import UserInterface from 'pages/UserInterface';
 
 import * as URLS from 'config/urls';
 import Can from 'components/Can';
@@ -81,32 +79,6 @@ export default (
       }
     />
 
-    <Route
-      path={URLS.USER_INTERFACE}
-      element={
-        <Can I="update" a="Config">
-          <AdminSettingsLayout>
-            <UserInterface />
-          </AdminSettingsLayout>
-        </Can>
-      }
-    />
-
-    <Route
-      path={URLS.AUTHENTICATION}
-      element={
-        <Can I="read" a="SamlAuthProvider">
-          <Can I="update" a="SamlAuthProvider">
-            <Can I="create" a="SamlAuthProvider">
-              <AdminSettingsLayout>
-                <Authentication />
-              </AdminSettingsLayout>
-            </Can>
-          </Can>
-        </Can>
-      }
-    />
-
     <Route
       path={URLS.ADMIN_SETTINGS}
       element={<Navigate to={URLS.USERS} replace />}

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

@@ -1,8 +1,6 @@
 import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
 import GroupIcon from '@mui/icons-material/Group';
 import GroupsIcon from '@mui/icons-material/Groups';
-import LockIcon from '@mui/icons-material/LockPerson';
-import BrushIcon from '@mui/icons-material/Brush';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import { useTheme } from '@mui/material/styles';
@@ -20,56 +18,25 @@ type SettingsLayoutProps = {
 };
 
 type DrawerLink = {
-  Icon: SvgIconComponent;
-  primary: string;
-  to: string;
-};
+  Icon: SvgIconComponent,
+  primary: string,
+  to: string,
+}
 
-function createDrawerLinks({
-  canReadRole,
-  canReadUser,
-  canUpdateConfig,
-  canManageSamlAuthProvider,
-}: {
-  canReadRole: boolean;
-  canReadUser: boolean;
-  canUpdateConfig: boolean;
-  canManageSamlAuthProvider: boolean;
-}) {
+function createDrawerLinks({ canReadRole, canReadUser }: { canReadRole: boolean; canReadUser: boolean;  }) {
   const items = [
-    canReadUser
-      ? {
-          Icon: GroupIcon,
-          primary: 'adminSettingsDrawer.users',
-          to: URLS.USERS,
-          dataTest: 'users-drawer-link',
-        }
-      : null,
-    canReadRole
-      ? {
-          Icon: GroupsIcon,
-          primary: 'adminSettingsDrawer.roles',
-          to: URLS.ROLES,
-          dataTest: 'roles-drawer-link',
-        }
-      : null,
-    canUpdateConfig
-      ? {
-          Icon: BrushIcon,
-          primary: 'adminSettingsDrawer.userInterface',
-          to: URLS.USER_INTERFACE,
-          dataTest: 'user-interface-drawer-link',
-        }
-      : null,
-    canManageSamlAuthProvider
-      ? {
-          Icon: LockIcon,
-          primary: 'adminSettingsDrawer.authentication',
-          to: URLS.AUTHENTICATION,
-          dataTest: 'authentication-drawer-link',
-        }
-      : null,
-  ].filter(Boolean) as DrawerLink[];
+      canReadUser ? {
+        Icon: GroupIcon,
+        primary: 'adminSettingsDrawer.users',
+        to: URLS.USERS,
+      } : null,
+      canReadRole ? {
+        Icon: GroupsIcon,
+        primary: 'adminSettingsDrawer.roles',
+        to: URLS.ROLES,
+      } : null
+    ]
+    .filter(Boolean) as DrawerLink[];
 
   return items;
 }
@@ -79,7 +46,6 @@ const drawerBottomLinks = [
     Icon: ArrowBackIosNewIcon,
     primary: 'adminSettingsDrawer.goBack',
     to: '/',
-    dataTest: 'go-back-drawer-link',
   },
 ];
 
@@ -96,11 +62,6 @@ export default function SettingsLayout({
   const drawerLinks = createDrawerLinks({
     canReadUser: currentUserAbility.can('read', 'User'),
     canReadRole: currentUserAbility.can('read', 'Role'),
-    canUpdateConfig: currentUserAbility.can('update', 'Config'),
-    canManageSamlAuthProvider:
-      currentUserAbility.can('read', 'SamlAuthProvider') &&
-      currentUserAbility.can('update', 'SamlAuthProvider') &&
-      currentUserAbility.can('create', 'SamlAuthProvider'),
   });
 
   return (

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

@@ -46,7 +46,7 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
   };
 
   return (
-    <MuiAppBar data-test="app-bar">
+    <MuiAppBar>
       <Container maxWidth={maxWidth} disableGutters>
         <Toolbar>
           <IconButton

packages/web/src/components/ColorInput/ColorButton/index.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { Button } from './style';
-
-const BG_IMAGE_FALLBACK =
-  'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%) /*! @noflip */';
-
-export type ColorButtonProps = Omit<ButtonProps, 'children'> & {
-  bgColor: string;
-  isBgColorValid: boolean;
-  disablePopover: boolean;
-};
-
-export type ColorButtonElement = (props: ColorButtonProps) => JSX.Element;
-
-const ColorButton = (props: ColorButtonProps) => {
-  const {
-    bgColor,
-    className,
-    disablePopover,
-    isBgColorValid,
-    ...restButtonProps
-  } = props;
-
-  return (
-    <Button
-      data-test="color-button"
-      disableTouchRipple
-      style={{
-        backgroundColor: isBgColorValid ? bgColor : undefined,
-        backgroundImage: isBgColorValid ? undefined : BG_IMAGE_FALLBACK,
-        cursor: disablePopover ? 'default' : undefined,
-      }}
-      className={`MuiColorInput-Button ${className || ''}`}
-      {...restButtonProps}
-    />
-  );
-};
-
-export default ColorButton;

packages/web/src/components/ColorInput/ColorButton/style.tsx

@@ -1,15 +0,0 @@
-import MuiButton from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
-
-export const Button = styled(MuiButton)(() => ({
-  backgroundSize: '8px 8px',
-  backgroundPosition: '0 0, 4px 0, 4px -4px, 0px 4px',
-  transition: 'none',
-  boxShadow: '0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)',
-  border: 0,
-  borderRadius: 4,
-  width: '24px',
-  aspectRatio: '1 / 1',
-  height: '24px',
-  minWidth: 0,
-})) as typeof MuiButton;

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

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-import { MuiColorInput, MuiColorInputProps } from 'mui-color-input';
-import ColorButton from './ColorButton';
-
-type ColorInputProps = {
-  shouldUnregister?: boolean;
-  name: string;
-  'data-test'?: string;
-} & Partial<MuiColorInputProps>;
-
-export default function ColorInput(props: ColorInputProps): React.ReactElement {
-  const { control } = useFormContext();
-  const {
-    required,
-    name,
-    shouldUnregister = false,
-    disabled = false,
-    ...textFieldProps
-  } = props;
-
-  return (
-    <Controller
-      rules={{ required }}
-      name={name}
-      control={control}
-      shouldUnregister={shouldUnregister}
-      render={({ field }) => (
-        <MuiColorInput
-          Adornment={ColorButton}
-          format="hex"
-          {...textFieldProps}
-          {...field}
-          disabled={disabled}
-          inputProps={{
-            'data-test': 'color-text-field',
-          }}
-        />
-      )}
-    />
-  );
-}

packages/web/src/components/ControlledCustomAutocomplete/CustomOptions.tsx

@@ -20,7 +20,7 @@ interface CustomOptionsProps {
   onTabChange: (tabIndex: 0 | 1) => void;
   label?: string;
   initialTabIndex?: 0 | 1;
-}
+};
 
 const CustomOptions = (props: CustomOptionsProps) => {
   const {
@@ -34,23 +34,17 @@ const CustomOptions = (props: CustomOptionsProps) => {
     label,
     initialTabIndex,
   } = props;
+  const [activeTabIndex, setActiveTabIndex] = React.useState<number | undefined>(undefined);
 
-  const [activeTabIndex, setActiveTabIndex] = React.useState<
-    number | undefined
-  >(undefined);
+  React.useEffect(function applyInitialActiveTabIndex() {
+    setActiveTabIndex((currentActiveTabIndex) => {
+      if (currentActiveTabIndex === undefined) {
+        return initialTabIndex;
+      }
 
-  React.useEffect(
-    function applyInitialActiveTabIndex() {
-      setActiveTabIndex((currentActiveTabIndex) => {
-        if (currentActiveTabIndex === undefined) {
-          return initialTabIndex;
-        }
-
-        return currentActiveTabIndex;
-      });
-    },
-    [initialTabIndex]
-  );
+      return currentActiveTabIndex;
+    });
+  }, [initialTabIndex]);
 
   return (
     <Popper
@@ -81,15 +75,22 @@ const CustomOptions = (props: CustomOptionsProps) => {
         </Tabs>
 
         <TabPanel value={activeTabIndex ?? 0} index={0}>
-          <Options data={options} onOptionClick={onOptionClick} />
+          <Options
+            data={options}
+            onOptionClick={onOptionClick}
+          />
         </TabPanel>
 
         <TabPanel value={activeTabIndex ?? 0} index={1}>
-          <Suggestions data={data} onSuggestionClick={onSuggestionClick} />
+          <Suggestions
+            data={data}
+            onSuggestionClick={onSuggestionClick}
+          />
         </TabPanel>
       </Paper>
     </Popper>
   );
 };
 
+
 export default CustomOptions;

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

@@ -1,17 +1,15 @@
 import * as React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
-import { IconButton } from '@mui/material';
 import FormHelperText from '@mui/material/FormHelperText';
 import { AutocompleteProps } from '@mui/material/Autocomplete';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ClearIcon from '@mui/icons-material/Clear';
 import type { IFieldDropdownOption } from '@automatisch/types';
-import { ActionButtonsWrapper } from './style';
+import { FakeDropdownButton } from './style';
 
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import InputLabel from '@mui/material/InputLabel';
 import { createEditor } from 'slate';
-import { Editable, ReactEditor } from 'slate-react';
+import { Editable, ReactEditor,} from 'slate-react';
 
 import Slate from 'components/Slate';
 import Element from 'components/Slate/Element';
@@ -25,11 +23,7 @@ import {
   overrideEditorValue,
   focusEditor,
 } from 'components/Slate/utils';
-import {
-  FakeInput,
-  InputLabelWrapper,
-  ChildrenWrapper,
-} from 'components/PowerInput/style';
+import { FakeInput, InputLabelWrapper, ChildrenWrapper, } from 'components/PowerInput/style';
 import { VariableElement } from 'components/Slate/types';
 import CustomOptions from './CustomOptions';
 import { processStepWithExecutions } from 'components/PowerInput/data';
@@ -81,11 +75,9 @@ function ControlledCustomAutocomplete(
     onChange: controllerOnChange,
     onBlur: controllerOnBlur,
   } = field;
-  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
   const [isInitialValueSet, setInitialValue] = React.useState(false);
-  const [isSingleChoice, setSingleChoice] = React.useState<boolean | undefined>(
-    undefined
-  );
+  const [isSingleChoice, setSingleChoice] = React.useState<boolean | undefined>(undefined);
   const priorStepsWithExecutions = React.useContext(StepExecutionsContext);
   const editorRef = React.useRef<HTMLDivElement | null>(null);
   const renderElement = React.useCallback(
@@ -112,12 +104,12 @@ function ControlledCustomAutocomplete(
   const promoteValue = () => {
     const serializedValue = serialize(editor.children);
     controllerOnChange(serializedValue);
-  };
+  }
 
   const resizeObserver = React.useMemo(function syncCustomOptionsPosition() {
     return new ResizeObserver(() => {
       forceUpdate();
-    });
+    })
   }, []);
 
   React.useEffect(() => {
@@ -129,37 +121,24 @@ function ControlledCustomAutocomplete(
     }
   }, dependsOnValues);
 
-  React.useEffect(
-    function updateInitialValue() {
-      const hasOptions = options.length;
-      const isOptionsLoaded = loading === false;
-      if (!isInitialValueSet && hasOptions && isOptionsLoaded) {
-        setInitialValue(true);
+  React.useEffect(function updateInitialValue() {
+    const hasOptions = options.length;
+    const isOptionsLoaded = loading === false;
+    if (!isInitialValueSet && hasOptions && isOptionsLoaded) {
+      setInitialValue(true);
 
-        const option: IFieldDropdownOption | undefined = options.find(
-          (option) => option.value === value
-        );
+      const option: IFieldDropdownOption | undefined = options.find((option) => option.value === value);
 
-        if (option) {
-          overrideEditorValue(editor, { option, focus: false });
-          setSingleChoice(true);
-        } else if (value) {
-          setSingleChoice(false);
-        }
+      if (option) {
+        overrideEditorValue(editor, { option, focus: false });
+        setSingleChoice(true);
+      } else if (value) {
+        setSingleChoice(false);
       }
-    },
-    [isInitialValueSet, options, loading]
-  );
-
-  React.useEffect(() => {
-    if (!showVariableSuggestions && value !== serialize(editor.children)) {
-      promoteValue();
     }
-  }, [showVariableSuggestions]);
+  }, [isInitialValueSet, options, loading]);
 
-  const hideSuggestionsOnShift = (
-    event: React.KeyboardEvent<HTMLInputElement>
-  ) => {
+  const hideSuggestionsOnShift = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.code === 'Tab') {
       setShowVariableSuggestions(false);
     }
@@ -191,26 +170,21 @@ function ControlledCustomAutocomplete(
     (event: React.MouseEvent, option: IFieldDropdownOption) => {
       event.stopPropagation();
       overrideEditorValue(editor, { option, focus: false });
+
       setShowVariableSuggestions(false);
-      setSingleChoice(true);
+
+      promoteValue();
     },
     [stepsWithVariables]
   );
 
-  const handleClearButtonClick = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    resetEditor(editor);
-    promoteValue();
-    setSingleChoice(undefined);
-  };
-
   const reset = (tabIndex: 0 | 1) => {
     const isOptions = tabIndex === 0;
 
     setSingleChoice(isOptions);
 
     resetEditor(editor, { focus: true });
-  };
+  }
 
   return (
     <Slate
@@ -219,7 +193,11 @@ function ControlledCustomAutocomplete(
     >
       <ClickAwayListener
         mouseEvent="onMouseDown"
-        onClickAway={() => setShowVariableSuggestions(false)}
+        onClickAway={() => {
+          promoteValue();
+
+          setShowVariableSuggestions(false);
+        }}
       >
         {/* ref-able single child for ClickAwayListener */}
         <ChildrenWrapper style={{ width: '100%' }} data-test="power-input">
@@ -254,27 +232,14 @@ function ControlledCustomAutocomplete(
               }}
             />
 
-            <ActionButtonsWrapper direction="row" mr={1.5}>
-              {isSingleChoice && serialize(editor.children) && (
-                <IconButton
-                  disabled={disabled}
-                  edge="end"
-                  size="small"
-                  tabIndex={-1}
-                  onClick={handleClearButtonClick}
-                >
-                  <ClearIcon />
-                </IconButton>
-              )}
-              <IconButton
-                disabled={disabled}
-                edge="end"
-                size="small"
-                tabIndex={-1}
-              >
-                <ArrowDropDownIcon />
-              </IconButton>
-            </ActionButtonsWrapper>
+            <FakeDropdownButton
+              disabled={disabled}
+              edge="end"
+              size="small"
+              tabIndex={-1}
+            >
+              <ArrowDropDownIcon />
+            </FakeDropdownButton>
           </FakeInput>
           {/* ghost placer for the variables popover */}
           <div
@@ -282,16 +247,14 @@ function ControlledCustomAutocomplete(
             style={{
               position: 'absolute',
               right: 16,
-              left: 16,
+              left: 16
             }}
           />
 
           <CustomOptions
             label={label}
             open={showVariableSuggestions}
-            initialTabIndex={
-              isSingleChoice === undefined ? undefined : isSingleChoice ? 0 : 1
-            }
+            initialTabIndex={isSingleChoice === undefined ? undefined : (isSingleChoice ? 0 : 1)}
             anchorEl={editorRef.current}
             data={stepsWithVariables}
             options={options}

packages/web/src/components/ControlledCustomAutocomplete/style.ts

@@ -1,10 +1,10 @@
 import { styled } from '@mui/material/styles';
-import Stack from '@mui/material/Stack';
+import MuiIconButton from '@mui/material/IconButton';
 import MuiTabs from '@mui/material/Tabs';
 
-export const ActionButtonsWrapper = styled(Stack)`
+export const FakeDropdownButton = styled(MuiIconButton)`
   position: absolute;
-  right: 0;
+  right: ${({ theme }) => theme.spacing(1)};
   top: 50%;
   transform: translateY(-50%);
 `;

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

@@ -1,5 +1,4 @@
 import useConfig from 'hooks/useConfig';
-import { LogoImage } from './style.ee';
 
 const CustomLogo = () => {
   const { config, loading } = useConfig(['logo.svgData']);
@@ -9,10 +8,7 @@ const CustomLogo = () => {
   const logoSvgData = config['logo.svgData'] as string;
 
   return (
-    <LogoImage
-      data-test="custom-logo"
-      src={`data:image/svg+xml;utf8,${encodeURIComponent(logoSvgData)}`}
-    />
+    <img src={`data:image/svg+xml;utf8,${encodeURIComponent(logoSvgData)}`} />
   );
 };
 

packages/web/src/components/CustomLogo/style.ee.ts

@@ -1,8 +0,0 @@
-import styled from '@emotion/styled';
-
-export const LogoImage = styled('img')(() => ({
-  maxWidth: 200,
-  maxHeight: 50,
-  width: '100%',
-  height: 'auto',
-}));

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

@@ -68,22 +68,19 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
       </div>
 
       <List sx={{ py: 0, mt: 3 }}>
-        {bottomLinks.map(
-          ({ Icon, badgeContent, primary, to, dataTest }, index) => (
-            <ListItemLink
-              key={`${to}-${index}`}
-              icon={
-                <Badge badgeContent={badgeContent} color="secondary" max={99}>
-                  <Icon htmlColor={theme.palette.primary.main} />
-                </Badge>
-              }
-              primary={formatMessage(primary)}
-              to={to}
-              onClick={closeOnClick}
-              data-test={dataTest}
-            />
-          )
-        )}
+        {bottomLinks.map(({ Icon, badgeContent, primary, to }, index) => (
+          <ListItemLink
+            key={`${to}-${index}`}
+            icon={
+              <Badge badgeContent={badgeContent} color="secondary" max={99}>
+                <Icon htmlColor={theme.palette.primary.main} />
+              </Badge>
+            }
+            primary={formatMessage(primary)}
+            to={to}
+            onClick={closeOnClick}
+          />
+        ))}
       </List>
     </BaseDrawer>
   );

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

@@ -6,8 +6,6 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import type { IExecution } from '@automatisch/types';
 
-import useFormatMessage from 'hooks/useFormatMessage';
-
 type ExecutionHeaderProps = {
   execution: IExecution;
 };
@@ -21,18 +19,13 @@ function ExecutionName(props: Pick<IExecution['flow'], 'name'>) {
 }
 
 function ExecutionId(props: Pick<IExecution, 'id'>) {
-  const formatMessage = useFormatMessage();
-
-  const id = (
-    <Typography variant="body1" component="span">
-      {props.id}
-    </Typography>
-  );
-
   return (
     <Box sx={{ display: 'flex' }}>
       <Typography variant="body2">
-        {formatMessage('execution.id', { id })}
+        Execution ID:{' '}
+        <Typography variant="body1" component="span">
+          {props.id}
+        </Typography>
       </Typography>
     </Box>
   );

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

@@ -21,7 +21,6 @@ import {
   AppIconStatusIconWrapper,
   Content,
   Header,
-  Metadata,
   Wrapper,
 } from './style';
 
@@ -32,24 +31,6 @@ type ExecutionStepProps = {
   executionStep: IExecutionStep;
 };
 
-function ExecutionStepId(props: Pick<IExecutionStep, 'id'>) {
-  const formatMessage = useFormatMessage();
-
-  const id = (
-    <Typography variant="caption" component="span">
-      {props.id}
-    </Typography>
-  );
-
-  return (
-    <Box sx={{ display: 'flex' }} gridArea="id">
-      <Typography variant="caption" fontWeight="bold">
-        {formatMessage('executionStep.id', { id })}
-      </Typography>
-    </Box>
-  );
-}
-
 function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
   const formatMessage = useFormatMessage();
   const createdAt = DateTime.fromMillis(parseInt(props.createdAt, 10));
@@ -95,37 +76,30 @@ export default function ExecutionStep(
   return (
     <Wrapper elevation={1} data-test="execution-step">
       <Header>
-        <Stack direction="row" gap={3}>
+        <Stack direction="row" gap={2}>
           <AppIconWrapper>
-            <AppIconStatusIconWrapper>
-              <AppIcon url={app?.iconUrl} name={app?.name} />
+            <AppIcon url={app?.iconUrl} name={app?.name} />
 
+            <AppIconStatusIconWrapper>
               {validationStatusIcon}
             </AppIconStatusIconWrapper>
           </AppIconWrapper>
 
-          <Metadata flex="1">
-            <ExecutionStepId id={executionStep.step.id} />
+          <Box flex="1">
+            <Typography variant="caption">
+              {isTrigger
+                ? formatMessage('flowStep.triggerType')
+                : formatMessage('flowStep.actionType')}
+            </Typography>
 
-            <Box flex="1" gridArea="step">
-              <Typography variant="caption">
-                {isTrigger && formatMessage('flowStep.triggerType')}
-                {isAction && formatMessage('flowStep.actionType')}
-              </Typography>
+            <Typography variant="body2">
+              {step.position}. {app?.name}
+            </Typography>
+          </Box>
 
-              <Typography variant="body2">
-                {step.position}. {app?.name}
-              </Typography>
-            </Box>
-
-            <Box
-              display="flex"
-              justifyContent={["left", "right"]}
-              gridArea="date"
-            >
-              <ExecutionStepDate createdAt={executionStep.createdAt} />
-            </Box>
-          </Metadata>
+          <Box alignSelf="flex-end">
+            <ExecutionStepDate createdAt={executionStep.createdAt} />
+          </Box>
         </Stack>
       </Header>
 

packages/web/src/components/ExecutionStep/style.ts

@@ -1,22 +1,18 @@
 import { styled, alpha } from '@mui/material/styles';
 import Card from '@mui/material/Card';
-import Box from '@mui/material/Box';
 
 export const AppIconWrapper = styled('div')`
-  display: flex;
-  align-items: center;
+  position: relative;
 `;
 
-
 export const AppIconStatusIconWrapper = styled('span')`
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translate(50%, -50%);
   display: inline-flex;
-  position: relative;
 
   svg {
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translate(50%, -50%);
     // to make it distinguishable over an app icon
     background: white;
     border-radius: 100%;
@@ -35,7 +31,7 @@ type HeaderProps = {
 
 export const Header = styled('div', {
   shouldForwardProp: (prop) => prop !== 'collapsed',
-}) <HeaderProps>`
+})<HeaderProps>`
   padding: ${({ theme }) => theme.spacing(2)};
   cursor: ${({ collapsed }) => (collapsed ? 'pointer' : 'unset')};
 `;
@@ -46,20 +42,3 @@ export const Content = styled('div')`
   border-right: none;
   padding: ${({ theme }) => theme.spacing(2, 0)};
 `;
-
-export const Metadata = styled(Box)`
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto;
-  grid-template-areas:
-    "step id"
-    "step date";
-
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-    "id"
-    "step"
-    "date";
-  }
-` as typeof Box;

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

@@ -18,7 +18,7 @@ type FlowRowProps = {
   flow: IFlow;
 };
 
-function getFlowStatusTranslationKey(status: IFlow['status']): string {
+function getFlowStatusTranslationKey(status: IFlow["status"]): string {
   if (status === 'published') {
     return 'flow.published';
   } else if (status === 'paused') {
@@ -28,16 +28,7 @@ function getFlowStatusTranslationKey(status: IFlow['status']): string {
   return 'flow.draft';
 }
 
-function getFlowStatusColor(
-  status: IFlow['status']
-):
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'info'
-  | 'success'
-  | 'warning' {
+function getFlowStatusColor(status: IFlow["status"]): 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' {
   if (status === 'published') {
     return 'success';
   } else if (status === 'paused') {
@@ -73,12 +64,8 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
 
   return (
     <>
-      <Card sx={{ mb: 1 }} data-test="flow-row">
-        <CardActionArea
-          component={Link}
-          to={URLS.FLOW(flow.id)}
-          data-test="card-action-area"
-        >
+      <Card sx={{ mb: 1 }}>
+        <CardActionArea component={Link} to={URLS.FLOW(flow.id)}>
           <CardContent>
             <Apps direction="row" gap={1} sx={{ gridArea: 'apps' }}>
               <FlowAppIcons steps={flow.steps} />
@@ -111,7 +98,9 @@ export default function FlowRow(props: FlowRowProps): React.ReactElement {
                 size="small"
                 color={getFlowStatusColor(flow?.status)}
                 variant={flow?.active ? 'filled' : 'outlined'}
-                label={formatMessage(getFlowStatusTranslationKey(flow?.status))}
+                label={formatMessage(
+                  getFlowStatusTranslationKey(flow?.status)
+                )}
               />
 
               <IconButton

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

@@ -71,18 +71,17 @@ function generateValidationSchema(substeps: ISubstep[]) {
           substepArgumentValidations[key] = yup.mixed();
         }
 
-        if (
-          typeof substepArgumentValidations[key] === 'object' &&
-          (arg.type === 'string' || arg.type === 'dropdown')
-        ) {
+        if (typeof substepArgumentValidations[key] === 'object' && (arg.type === 'string' || arg.type === 'dropdown')) {
           // if the field is required, add the required validation
           if (required) {
-            substepArgumentValidations[key] = substepArgumentValidations[key]
+            substepArgumentValidations[key] = substepArgumentValidations[
+              key
+            ]
               .required(`${key} is required.`)
               .test(
                 'empty-check',
                 `${key} must be not empty`,
-                (value: any) => !isEmpty(value)
+                (value: any) => !isEmpty(value),
               );
           }
 
@@ -167,9 +166,7 @@ export default function FlowStep(
 
   const actionsOrTriggers: Array<ITrigger | IAction> =
     (isTrigger ? app?.triggers : app?.actions) || [];
-  const actionOrTrigger = actionsOrTriggers?.find(
-    ({ key }) => key === step.key
-  );
+  const actionOrTrigger = actionsOrTriggers?.find(({ key }) => key === step.key);
   const substeps = actionOrTrigger?.substeps || [];
 
   const handleChange = React.useCallback(({ step }: { step: IStep }) => {
@@ -190,12 +187,7 @@ export default function FlowStep(
   );
 
   if (!apps) {
-    return (
-      <CircularProgress
-        data-test="step-circular-loader"
-        sx={{ display: 'block', my: 2 }}
-      />
-    );
+    return <CircularProgress sx={{ display: 'block', my: 2 }} />;
   }
 
   const onContextMenuClose = (event: React.SyntheticEvent) => {
@@ -287,8 +279,7 @@ export default function FlowStep(
                   step={step}
                 />
 
-                {actionOrTrigger &&
-                  substeps?.length > 0 &&
+                {actionOrTrigger && substeps?.length > 0 &&
                   substeps.map((substep: ISubstep, index: number) => (
                     <React.Fragment key={`${substep?.name}-${index}`}>
                       {substep.key === 'chooseConnection' && app && (
@@ -313,11 +304,7 @@ export default function FlowStep(
                           onSubmit={expandNextStep}
                           onChange={handleChange}
                           onContinue={onContinue}
-                          showWebhookUrl={
-                            'showWebhookUrl' in actionOrTrigger
-                              ? actionOrTrigger.showWebhookUrl
-                              : false
-                          }
+                          showWebhookUrl={'showWebhookUrl' in actionOrTrigger ? actionOrTrigger.showWebhookUrl : false}
                           step={step}
                         />
                       )}

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

@@ -9,12 +9,12 @@ const Logo = () => {
   const { config, loading } = useConfig(['logo.svgData']);
 
   const logoSvgData = config?.['logo.svgData'] as string;
-  if (loading && !logoSvgData) return <React.Fragment />;
+  if (loading && !logoSvgData) return (<React.Fragment />);
 
   if (logoSvgData) return <CustomLogo />;
 
   return (
-    <Typography variant="h6" component="h1" data-test="typography-logo" noWrap>
+    <Typography variant="h6" component="h1" noWrap>
       <FormattedMessage id="brandText" />
     </Typography>
   );

packages/web/src/components/Slate/Element.tsx

@@ -9,4 +9,4 @@ export default function Element(props: any) {
     default:
       return <p {...attributes}>{children}</p>;
   }
-}
+};

packages/web/src/components/Slate/utils.ts

@@ -3,13 +3,7 @@ import { withHistory } from 'slate-history';
 import { ReactEditor, withReact } from 'slate-react';
 import { IFieldDropdownOption } from '@automatisch/types';
 
-import type {
-  CustomEditor,
-  CustomElement,
-  CustomText,
-  ParagraphElement,
-  VariableElement,
-} from './types';
+import type { CustomEditor, CustomElement, CustomText, ParagraphElement, VariableElement } from './types';
 
 type StepWithVariables = {
   id: string;
@@ -19,7 +13,7 @@ type StepWithVariables = {
     sampleValue: string;
     value: string;
   }[];
-};
+}
 
 type StepsWithVariables = StepWithVariables[];
 
@@ -32,7 +26,10 @@ function isCustomText(value: any): value is CustomText {
   return false;
 }
 
-function getStepPosition(id: string, stepsWithVariables: StepsWithVariables) {
+function getStepPosition(
+  id: string,
+  stepsWithVariables: StepsWithVariables
+) {
   const stepIndex = stepsWithVariables.findIndex((stepWithVariables) => {
     return stepWithVariables.id === id;
   });
@@ -51,36 +48,29 @@ function getVariableStepId(variable: string) {
   return stepId;
 }
 
-function getVariableSampleValue(
-  variable: string,
-  stepsWithVariables: StepsWithVariables
-) {
+function getVariableSampleValue(variable: string, stepsWithVariables: StepsWithVariables) {
   const variableStepId = getVariableStepId(variable);
-  const stepWithVariables = stepsWithVariables.find(
-    ({ id }: { id: string }) => id === variableStepId
-  );
+  const stepWithVariables = stepsWithVariables.find(({ id }: { id: string }) => id === variableStepId);
 
   if (!stepWithVariables) return null;
 
   const variableName = getVariableName(variable);
-  const variableData = stepWithVariables.output.find(
-    ({ value }) => variableName === value
-  );
+  const variableData = stepWithVariables.output.find(({ value }) => variableName === value);
 
   if (!variableData) return null;
 
   return variableData.sampleValue;
 }
 
-function getVariableDetails(
-  variable: string,
-  stepsWithVariables: StepsWithVariables
-) {
+function getVariableDetails(variable: string, stepsWithVariables: StepsWithVariables) {
   const variableName = getVariableName(variable);
   const stepId = getVariableStepId(variableName);
   const stepPosition = getStepPosition(stepId, stepsWithVariables);
   const sampleValue = getVariableSampleValue(variable, stepsWithVariables);
-  const label = variableName.replace(`step.${stepId}.`, `step${stepPosition}.`);
+  const label = variableName.replace(
+    `step.${stepId}.`,
+    `step${stepPosition}.`
+  );
 
   return {
     sampleValue,
@@ -124,10 +114,7 @@ export const deserialize = (
         type: 'paragraph',
         children: nodes.map((node) => {
           if (node.match(variableRegExp)) {
-            const variableDetails = getVariableDetails(
-              node,
-              stepsWithVariables
-            );
+            const variableDetails = getVariableDetails(node, stepsWithVariables);
 
             return {
               type: 'variable',
@@ -212,10 +199,7 @@ export const insertVariable = (
   variableData: Record<string, unknown>,
   stepsWithVariables: StepsWithVariables
 ) => {
-  const variableDetails = getVariableDetails(
-    `{{${variableData.value}}}`,
-    stepsWithVariables
-  );
+  const variableDetails = getVariableDetails(`{{${variableData.value}}}`, stepsWithVariables);
 
   const variable: VariableElement = {
     type: 'variable',
@@ -233,18 +217,15 @@ export const insertVariable = (
 export const focusEditor = (editor: CustomEditor) => {
   ReactEditor.focus(editor);
   editor.move();
-};
+}
 
-export const resetEditor = (
-  editor: CustomEditor,
-  options?: { focus: boolean }
-) => {
+export const resetEditor = (editor: CustomEditor, options?: { focus: boolean }) => {
   const focus = options?.focus || false;
 
   editor.removeNodes({
     at: {
       anchor: editor.start([]),
-      focus: editor.end([]),
+      focus: editor.end([])
     },
   });
 
@@ -254,12 +235,9 @@ export const resetEditor = (
   if (focus) {
     focusEditor(editor);
   }
-};
+}
 
-export const overrideEditorValue = (
-  editor: CustomEditor,
-  options: { option: IFieldDropdownOption; focus: boolean }
-) => {
+export const overrideEditorValue = (editor: CustomEditor, options: { option: IFieldDropdownOption, focus: boolean }) => {
   const { option, focus } = options;
 
   const variable: ParagraphElement = {
@@ -267,8 +245,8 @@ export const overrideEditorValue = (
     children: [
       {
         value: option.value as string,
-        text: option.label as string,
-      },
+        text: option.label as string
+      }
     ],
   };
 
@@ -276,7 +254,7 @@ export const overrideEditorValue = (
     editor.removeNodes({
       at: {
         anchor: editor.start([]),
-        focus: editor.end([]),
+        focus: editor.end([])
       },
     });
 
@@ -292,9 +270,9 @@ export const createTextNode = (text: string): ParagraphElement => ({
   type: 'paragraph',
   children: [
     {
-      text,
-    },
-  ],
+      text
+    }
+  ]
 });
 
 export const customizeEditor = (editor: CustomEditor): CustomEditor => {

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

@@ -24,11 +24,11 @@ function SsoProviders() {
             <Button
               key={provider.id}
               component="a"
-              href={provider.loginUrl}
+              href={URLS.SSO_LOGIN(provider.issuer)}
               variant="outlined"
             >
               {formatMessage('ssoProviders.loginWithProvider', {
-                providerName: provider.name,
+                providerName: provider.name
               })}
             </Button>
           ))}

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

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-import FormControlLabel, {
-  FormControlLabelProps,
-} from '@mui/material/FormControlLabel';
-import MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';
-
-type SwitchProps = {
-  name: string;
-  label: string;
-  shouldUnregister?: boolean;
-  FormControlLabelProps?: Partial<FormControlLabelProps>;
-} & MuiSwitchProps;
-
-export default function Switch(props: SwitchProps): React.ReactElement {
-  const { control } = useFormContext();
-  const inputRef = React.useRef<HTMLInputElement | null>(null);
-  const {
-    required,
-    name,
-    defaultChecked = false,
-    shouldUnregister = false,
-    disabled = false,
-    onBlur,
-    onChange,
-    label,
-    FormControlLabelProps,
-    ...switchProps
-  } = props;
-
-  return (
-    <Controller
-      rules={{ required }}
-      name={name}
-      defaultValue={defaultChecked}
-      control={control}
-      shouldUnregister={shouldUnregister}
-      render={({
-        field: {
-          ref,
-          onChange: controllerOnChange,
-          onBlur: controllerOnBlur,
-          value,
-          ...field
-        },
-      }) => (
-        <FormControlLabel
-          {...FormControlLabelProps}
-          control={
-            <MuiSwitch
-              {...switchProps}
-              {...field}
-              checked={value}
-              disabled={disabled}
-              onChange={(...args) => {
-                controllerOnChange(...args);
-                onChange?.(...args);
-              }}
-              onBlur={(...args) => {
-                controllerOnBlur();
-                onBlur?.(...args);
-              }}
-              inputRef={(element) => {
-                inputRef.current = element;
-                ref(element);
-              }}
-            />
-          }
-          label={label}
-        />
-      )}
-    />
-  );
-}

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

@@ -67,7 +67,6 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
         <MuiTextField
           {...textFieldProps}
           {...field}
-          required={required}
           disabled={disabled}
           onChange={(...args) => {
             controllerOnChange(...args);

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

@@ -1,89 +0,0 @@
-import { useTheme } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
-import FirstPageIcon from '@mui/icons-material/FirstPage';
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
-import LastPageIcon from '@mui/icons-material/LastPage';
-import Box from '@mui/material/Box';
-
-interface TablePaginationActionsProps {
-  count: number;
-  page: number;
-  rowsPerPage: number;
-  onPageChange: (
-    event: React.MouseEvent<HTMLButtonElement>,
-    newPage: number
-  ) => void;
-}
-
-export default function TablePaginationActions(
-  props: TablePaginationActionsProps
-) {
-  const theme = useTheme();
-  const { count, page, rowsPerPage, onPageChange } = props;
-
-  const handleFirstPageButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    onPageChange(event, 0);
-  };
-
-  const handleBackButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    onPageChange(event, page - 1);
-  };
-
-  const handleNextButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    onPageChange(event, page + 1);
-  };
-
-  const handleLastPageButtonClick = (
-    event: React.MouseEvent<HTMLButtonElement>
-  ) => {
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-  };
-
-  return (
-    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
-      <IconButton
-        onClick={handleFirstPageButtonClick}
-        disabled={page === 0}
-        aria-label="first page"
-      >
-        {theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
-      </IconButton>
-      <IconButton
-        onClick={handleBackButtonClick}
-        disabled={page === 0}
-        aria-label="previous page"
-      >
-        {theme.direction === 'rtl' ? (
-          <KeyboardArrowRight />
-        ) : (
-          <KeyboardArrowLeft />
-        )}
-      </IconButton>
-      <IconButton
-        onClick={handleNextButtonClick}
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-        aria-label="next page"
-      >
-        {theme.direction === 'rtl' ? (
-          <KeyboardArrowLeft />
-        ) : (
-          <KeyboardArrowRight />
-        )}
-      </IconButton>
-      <IconButton
-        onClick={handleLastPageButtonClick}
-        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-        aria-label="last page"
-      >
-        {theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
-      </IconButton>
-    </Box>
-  );
-}

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

@@ -11,132 +11,89 @@ import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import EditIcon from '@mui/icons-material/Edit';
-import TableFooter from '@mui/material/TableFooter';
 
 import DeleteUserButton from 'components/DeleteUserButton/index.ee';
 import ListLoader from 'components/ListLoader';
 import useUsers from 'hooks/useUsers';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
-import TablePaginationActions from './TablePaginationActions';
-import { TablePagination } from './style';
 
 export default function UserList(): React.ReactElement {
   const formatMessage = useFormatMessage();
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(10);
-  const {
-    users,
-    pageInfo,
-    totalCount,
-    loading,
-  } = useUsers(page, rowsPerPage);
-
-  const handleChangePage = (
-    event: React.MouseEvent<HTMLButtonElement> | null,
-    newPage: number
-  ) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setRowsPerPage(+event.target.value);
-    setPage(0);
-  };
+  const { users, loading } = useUsers();
 
   return (
-    <>
-      <TableContainer component={Paper}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell component="th">
-                <Typography
-                  variant="subtitle1"
-                  sx={{ color: 'text.secondary', fontWeight: 700 }}
-                >
-                  {formatMessage('userList.fullName')}
-                </Typography>
-              </TableCell>
+    <TableContainer component={Paper}>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('userList.fullName')}
+              </Typography>
+            </TableCell>
 
-              <TableCell component="th">
-                <Typography
-                  variant="subtitle1"
-                  sx={{ color: 'text.secondary', fontWeight: 700 }}
-                >
-                  {formatMessage('userList.email')}
-                </Typography>
-              </TableCell>
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('userList.email')}
+              </Typography>
+            </TableCell>
 
-              <TableCell component="th">
-                <Typography
-                  variant="subtitle1"
-                  sx={{ color: 'text.secondary', fontWeight: 700 }}
-                >
-                  {formatMessage('userList.role')}
-                </Typography>
-              </TableCell>
+            <TableCell component="th">
+              <Typography
+                variant="subtitle1"
+                sx={{ color: 'text.secondary', fontWeight: 700 }}
+              >
+                {formatMessage('userList.role')}
+              </Typography>
+            </TableCell>
 
-              <TableCell component="th" />
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
-            {!loading &&
-              users.map((user) => (
-                <TableRow
-                  key={user.id}
-                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                >
-                  <TableCell scope="row">
-                    <Typography variant="subtitle2">{user.fullName}</Typography>
-                  </TableCell>
+            <TableCell component="th" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {loading && <ListLoader rowsNumber={3} columnsNumber={2} />}
+          {!loading &&
+            users.map((user) => (
+              <TableRow
+                key={user.id}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell scope="row">
+                  <Typography variant="subtitle2">{user.fullName}</Typography>
+                </TableCell>
 
-                  <TableCell>
-                    <Typography variant="subtitle2">{user.email}</Typography>
-                  </TableCell>
+                <TableCell>
+                  <Typography variant="subtitle2">{user.email}</Typography>
+                </TableCell>
 
-                  <TableCell>
-                    <Typography variant="subtitle2">
-                      {user.role.name}
-                    </Typography>
-                  </TableCell>
+                <TableCell>
+                  <Typography variant="subtitle2">{user.role.name}</Typography>
+                </TableCell>
 
-                  <TableCell>
-                    <Stack direction="row" gap={1} justifyContent="right">
-                      <IconButton
-                        size="small"
-                        component={Link}
-                        to={URLS.USER(user.id)}
-                      >
-                        <EditIcon />
-                      </IconButton>
+                <TableCell>
+                  <Stack direction="row" gap={1} justifyContent="right">
+                    <IconButton
+                      size="small"
+                      component={Link}
+                      to={URLS.USER(user.id)}
+                    >
+                      <EditIcon />
+                    </IconButton>
 
-                      <DeleteUserButton userId={user.id} />
-                    </Stack>
-                  </TableCell>
-                </TableRow>
-              ))}
-          </TableBody>
-          {totalCount && (
-            <TableFooter>
-              <TableRow>
-                <TablePagination
-                  rowsPerPageOptions={[10, 25, 50, 100]}
-                  page={page}
-                  count={totalCount}
-                  onPageChange={handleChangePage}
-                  rowsPerPage={rowsPerPage}
-                  onRowsPerPageChange={handleChangeRowsPerPage}
-                  ActionsComponent={TablePaginationActions}
-                />
+                    <DeleteUserButton userId={user.id} />
+                  </Stack>
+                </TableCell>
               </TableRow>
-            </TableFooter>
-          )}
-        </Table>
-      </TableContainer>
-    </>
+            ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }

packages/web/src/components/UserList/style.ts

@@ -1,12 +0,0 @@
-import { styled } from '@mui/material/styles';
-import MuiTablePagination, {
-  tablePaginationClasses,
-} from '@mui/material/TablePagination';
-
-export const TablePagination = styled(MuiTablePagination)(() => ({
-  [`& .${tablePaginationClasses.selectLabel}, & .${tablePaginationClasses.displayedRows}`]:
-    {
-      fontWeight: 400,
-      fontSize: 14,
-    },
-}));

packages/web/src/config/app.ts

@@ -1,16 +1,26 @@
 type Config = {
   [key: string]: string;
   baseUrl: string;
+  apiUrl: string;
   graphqlUrl: string;
+  notificationsUrl: string;
   chatwootBaseUrl: string;
   supportEmailAddress: string;
 };
 
 const config: Config = {
   baseUrl: process.env.REACT_APP_BASE_URL as string,
+  apiUrl: process.env.REACT_APP_API_URL as string,
   graphqlUrl: process.env.REACT_APP_GRAPHQL_URL as string,
+  notificationsUrl: process.env.REACT_APP_NOTIFICATIONS_URL as string,
   chatwootBaseUrl: 'https://app.chatwoot.com',
-  supportEmailAddress: 'support@automatisch.io',
+  supportEmailAddress: 'support@automatisch.io'
 };
 
+if (!config.apiUrl && !config.graphqlUrl) {
+  config.apiUrl = '/';
+} else if (!config.apiUrl) {
+  config.apiUrl = (new URL(config.graphqlUrl)).origin;
+}
+
 export default config;

packages/web/src/config/urls.ts

@@ -1,10 +1,14 @@
+import appConfig from './app';
+
 export const CONNECTIONS = '/connections';
 export const EXECUTIONS = '/executions';
 export const EXECUTION_PATTERN = '/executions/:executionId';
-export const EXECUTION = (executionId: string) => `/executions/${executionId}`;
+export const EXECUTION = (executionId: string) =>
+  `/executions/${executionId}`;
 
 export const LOGIN = '/login';
 export const LOGIN_CALLBACK = `${LOGIN}/callback`;
+export const SSO_LOGIN = (issuer: string) => `${appConfig.apiUrl}/login/saml/${issuer}`;
 export const SIGNUP = '/sign-up';
 export const FORGOT_PASSWORD = '/forgot-password';
 export const RESET_PASSWORD = '/reset-password';
@@ -13,19 +17,18 @@ export const APPS = '/apps';
 export const NEW_APP_CONNECTION = '/apps/new';
 export const APP = (appKey: string) => `/app/${appKey}`;
 export const APP_PATTERN = '/app/:appKey';
-export const APP_CONNECTIONS = (appKey: string) => `/app/${appKey}/connections`;
+export const APP_CONNECTIONS = (appKey: string) =>
+  `/app/${appKey}/connections`;
 export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
 export const APP_ADD_CONNECTION = (appKey: string, shared = false) =>
   `/app/${appKey}/connections/add?shared=${shared}`;
-export const APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID = (
-  appKey: string,
-  appAuthClientId: string
-) => `/app/${appKey}/connections/add?appAuthClientId=${appAuthClientId}`;
+export const APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID = (appKey: string, appAuthClientId: string) =>
+  `/app/${appKey}/connections/add?appAuthClientId=${appAuthClientId}`;
 export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
 export const APP_RECONNECT_CONNECTION = (
   appKey: string,
   connectionId: string,
-  appAuthClientId?: string
+  appAuthClientId?: string,
 ) => {
   const path = `/app/${appKey}/connections/${connectionId}/reconnect`;
 
@@ -93,8 +96,6 @@ export const ROLES = `${ADMIN_SETTINGS}/roles`;
 export const ROLE = (roleId: string) => `${ROLES}/${roleId}`;
 export const ROLE_PATTERN = `${ROLES}/:roleId`;
 export const CREATE_ROLE = `${ROLES}/create`;
-export const USER_INTERFACE = `${ADMIN_SETTINGS}/user-interface`;
-export const AUTHENTICATION = `${ADMIN_SETTINGS}/authentication`;
 
 export const DASHBOARD = FLOWS;
 

packages/web/src/graphql/mutations/upsert-saml-auth-provider.ts

@@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const UPSERT_SAML_AUTH_PROVIDER = gql`
-  mutation UpsertSamlAuthProvider($input: UpsertSamlAuthProviderInput) {
-    upsertSamlAuthProvider(input: $input) {
-      id
-    }
-  }
-`;

packages/web/src/graphql/queries/get-notifications.ts

@@ -1,12 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_NOTIFICATIONS = gql`
-  query GetNotifications {
-    getNotifications {
-      name
-      createdAt
-      documentationUrl
-      description
-    }
-  }
-`;

packages/web/src/graphql/queries/get-saml-auth-provider.ts

@@ -1,19 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GET_SAML_AUTH_PROVIDER = gql`
-  query GetSamlAuthProvider {
-    getSamlAuthProvider {
-      name
-      certificate
-      signatureAlgorithm
-      issuer
-      entryPoint
-      firstnameAttributeName
-      surnameAttributeName
-      emailAttributeName
-      roleAttributeName
-      active
-      defaultRoleId
-    }
-  }
-`;

packages/web/src/graphql/queries/get-users.ts

@@ -13,7 +13,6 @@ export const GET_USERS = gql`
         currentPage
         totalPages
       }
-      totalCount
       edges {
         node {
           id

packages/web/src/graphql/queries/list-saml-auth-providers.ee.ts

@@ -5,7 +5,6 @@ export const LIST_SAML_AUTH_PROVIDERS = gql`
     listSamlAuthProviders {
       id
       name
-      loginUrl
       issuer
     }
   }

packages/web/src/helpers/nestObject.ts

@@ -1,18 +0,0 @@
-import { IJSONObject } from '@automatisch/types';
-import set from 'lodash/set';
-
-export default function nestObject<T = IJSONObject>(
-  config: IJSONObject | undefined
-): Partial<T> {
-  if (!config) return {};
-  const result = {};
-
-  for (const key in config) {
-    if (Object.prototype.hasOwnProperty.call(config, key)) {
-      const value = config[key];
-      set(result, key, value);
-    }
-  }
-
-  return result;
-}

packages/web/src/hooks/useNotifications.ts

@@ -1,20 +1,26 @@
-import { useQuery } from '@apollo/client';
-import type { Notification } from '@automatisch/types';
+import * as React from 'react';
+import appConfig from 'config/app';
 
-import { GET_NOTIFICATIONS } from 'graphql/queries/get-notifications';
-
-type UseNotificationsReturn = {
-  notifications: Notification[];
-  loading: boolean;
+interface INotification {
+  name: string;
+  createdAt: string;
+  documentationUrl: string;
+  description: string;
 }
 
-export default function useNotifications(): UseNotificationsReturn {
-  const { data, loading } = useQuery(GET_NOTIFICATIONS);
+export default function useNotifications(): INotification[] {
+  const [notifications, setNotifications] = React.useState<INotification[]>([]);
 
-  const notifications = data?.getNotifications || [];
+  React.useEffect(() => {
+    fetch(`${appConfig.notificationsUrl}/notifications.json`)
+      .then((response) => response.json())
+      .then((notifications) => {
+        if (Array.isArray(notifications) && notifications.length) {
+          setNotifications(notifications);
+        }
+      })
+      .catch(console.error);
+  }, []);
 
-  return {
-    loading,
-    notifications,
-  };
+  return notifications;
 }