feat(formatter): Implement find array item by property transformer

feat: Introduce backend test suite with ava

.github/workflows/ci.yml

@@ -1,5 +1,11 @@
 name: Automatisch CI
-on: [push]
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
 jobs:
   linter:
     runs-on: ubuntu-latest

.github/workflows/playwright.yml

@@ -1,8 +1,9 @@
 name: Automatisch UI Tests
 on:
   push:
-  schedule:
-    - cron: '0 12 * * *'
+    branches:
+      - main
+  pull_request:
   workflow_dispatch:
 
 env:
@@ -75,9 +76,9 @@ jobs:
       - 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 }}
+          LOGIN_EMAIL: user@automatisch.io
+          LOGIN_PASSWORD: sample
+          BASE_URL: http://localhost:3000
         run: yarn test
       - uses: actions/upload-artifact@v3
         if: always()

.node-version

@@ -0,0 +1 @@
+16.15.0

.nvmrc

@@ -0,0 +1 @@
+16.15.0

packages/backend/.env-example.test

@@ -0,0 +1,16 @@
+APP_ENV=test
+HOST=localhost
+PROTOCOL=http
+PORT=3000
+LOG_LEVEL=debug
+WEBHOOK_SECRET_KEY=secret
+POSTGRES_DATABASE=automatisch_test
+POSTGRES_PORT=5432
+POSTGRES_HOST=localhost
+POSTGRES_USERNAME=automatisch_test_user
+POSTGRES_PASSWORD=
+POSTGRES_ENABLE_SSL=false
+ENCRYPTION_KEY=secret
+APP_SECRET_KEY=secret
+REDIS_PORT=6379
+REDIS_HOST=127.0.0.1

packages/backend/ava.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  require: ['ts-node/register', './src/config/app.ts'],
+  files: ['**/*.test.ts'],
+  extensions: ['ts'],
+};

packages/backend/package.json

@@ -9,7 +9,8 @@
     "build": "tsc && yarn copy-statics",
     "build:watch": "nodemon --watch 'src/**/*.ts' --watch 'bin/**/*.ts' --exec yarn build --ext ts",
     "start": "node dist/src/server.js",
-    "test": "ava",
+    "pretest": "APP_ENV=test ts-node ./test/setup/prepare-test-env.ts",
+    "test": "APP_ENV=test ava",
     "lint": "eslint . --ignore-path ../../.eslintignore",
     "db:create": "ts-node ./bin/database/create.ts",
     "db:seed:user": "ts-node ./bin/database/seed-user.ts",
@@ -31,9 +32,11 @@
     "@rudderstack/rudder-sdk-node": "^1.1.2",
     "@sentry/node": "^7.42.0",
     "@sentry/tracing": "^7.42.0",
+    "@types/accounting": "^0.4.2",
     "@types/luxon": "^2.3.1",
     "@types/passport": "^1.0.12",
     "@types/xmlrpc": "^1.3.7",
+    "accounting": "^0.4.1",
     "ajv-formats": "^2.1.1",
     "axios": "0.24.0",
     "bcrypt": "^5.0.1",
@@ -69,6 +72,7 @@
     "passport": "^0.6.0",
     "pg": "^8.7.1",
     "php-serialize": "^4.0.2",
+    "pluralize": "^8.0.0",
     "showdown": "^2.1.0",
     "stripe": "^11.13.0",
     "winston": "^3.7.1",
@@ -126,24 +130,14 @@
     "@types/nodemailer": "^6.4.4",
     "@types/pg": "^8.6.1",
     "@types/pino": "^7.0.5",
+    "@types/pluralize": "^0.0.30",
     "@types/showdown": "^2.0.1",
-    "ava": "^3.15.0",
+    "ava": "^5.3.1",
     "nodemon": "^2.0.13",
     "sinon": "^11.1.2",
     "ts-node": "^10.2.1",
     "ts-node-dev": "^1.1.8"
   },
-  "ava": {
-    "files": [
-      "test/**/*"
-    ],
-    "extensions": [
-      "ts"
-    ],
-    "require": [
-      "ts-node/register"
-    ]
-  },
   "publishConfig": {
     "access": "public"
   }

packages/backend/src/apps/formatter/actions/date-time/index.ts

@@ -0,0 +1,49 @@
+import defineAction from '../../../../helpers/define-action';
+
+import formatDateTime from './transformers/format-date-time';
+
+const transformers = {
+  formatDateTime,
+};
+
+export default defineAction({
+  name: 'Date / Time',
+  key: 'date-time',
+  description: 'Perform date and time related transformations on your data.',
+  arguments: [
+    {
+      label: 'Transform',
+      key: 'transform',
+      type: 'dropdown' as const,
+      required: true,
+      variables: true,
+      options: [{ label: 'Format Date / Time', value: 'formatDateTime' }],
+      additionalFields: {
+        type: 'query',
+        name: 'getDynamicFields',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTransformOptions',
+          },
+          {
+            name: 'parameters.transform',
+            value: '{parameters.transform}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const transformerName = $.step.parameters
+      .transform as keyof typeof transformers;
+    const output = transformers[transformerName]($);
+
+    $.setActionItem({
+      raw: {
+        output,
+      },
+    });
+  },
+});

packages/backend/src/apps/formatter/actions/date-time/transformers/format-date-time.ts

@@ -0,0 +1,23 @@
+import { IGlobalVariable } from '@automatisch/types';
+import { DateTime } from 'luxon';
+
+const formatDateTime = ($: IGlobalVariable) => {
+  const input = $.step.parameters.input as string;
+
+  const fromFormat = $.step.parameters.fromFormat as string;
+  const fromTimezone = $.step.parameters.fromTimezone as string;
+
+  const inputDateTime = DateTime.fromFormat(input, fromFormat, {
+    zone: fromTimezone,
+    setZone: true,
+  });
+
+  const toFormat = $.step.parameters.toFormat as string;
+  const toTimezone = $.step.parameters.toTimezone as string;
+
+  const outputDateTime = inputDateTime.setZone(toTimezone).toFormat(toFormat);
+
+  return outputDateTime;
+};
+
+export default formatDateTime;

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

@@ -1,3 +1,6 @@
 import text from './text';
+import numbers from './numbers';
+import dateTime from './date-time';
+import utilities from './utilities';
 
-export default [text];
+export default [text, numbers, dateTime, utilities];

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

@@ -0,0 +1,58 @@
+import defineAction from '../../../../helpers/define-action';
+
+import performMathOperation from './transformers/perform-math-operation';
+import randomNumber from './transformers/random-number';
+import formatNumber from './transformers/format-number';
+
+const transformers = {
+  performMathOperation,
+  randomNumber,
+  formatNumber,
+};
+
+export default defineAction({
+  name: 'Numbers',
+  key: 'numbers',
+  description:
+    'Transform numbers to perform math operations, generate random numbers, format numbers, and much more.',
+  arguments: [
+    {
+      label: 'Transform',
+      key: 'transform',
+      type: 'dropdown' as const,
+      required: true,
+      variables: true,
+      options: [
+        { label: 'Perform Math Operation', value: 'performMathOperation' },
+        { label: 'Random Number', value: 'randomNumber' },
+        { label: 'Format Number', value: 'formatNumber' },
+      ],
+      additionalFields: {
+        type: 'query',
+        name: 'getDynamicFields',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTransformOptions',
+          },
+          {
+            name: 'parameters.transform',
+            value: '{parameters.transform}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const transformerName = $.step.parameters
+      .transform as keyof typeof transformers;
+    const output = transformers[transformerName]($);
+
+    $.setActionItem({
+      raw: {
+        output,
+      },
+    });
+  },
+});

packages/backend/src/apps/formatter/actions/numbers/transformers/format-number.ts

@@ -0,0 +1,28 @@
+import { IGlobalVariable } from '@automatisch/types';
+import accounting from 'accounting';
+
+const formatNumber = ($: IGlobalVariable) => {
+  const input = $.step.parameters.input as string;
+  const inputDecimalMark = $.step.parameters.inputDecimalMark as string;
+  const toFormat = $.step.parameters.toFormat as string;
+
+  const normalizedNumber = accounting.unformat(input, inputDecimalMark);
+  const decimalPart = normalizedNumber.toString().split('.')[1];
+  const precision = decimalPart ? decimalPart.length : 0;
+
+  if (toFormat === '0') {
+    // Comma for grouping & period for decimal
+    return accounting.formatNumber(normalizedNumber, precision, ',', '.');
+  } else if (toFormat === '1') {
+    // Period for grouping & comma for decimal
+    return accounting.formatNumber(normalizedNumber, precision, '.', ',');
+  } else if (toFormat === '2') {
+    // Space for grouping & period for decimal
+    return accounting.formatNumber(normalizedNumber, precision, ' ', '.');
+  } else if (toFormat === '3') {
+    // Space for grouping & comma for decimal
+    return accounting.formatNumber(normalizedNumber, precision, ' ', ',');
+  }
+};
+
+export default formatNumber;

packages/backend/src/apps/formatter/actions/numbers/transformers/perform-math-operation.ts

@@ -0,0 +1,23 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+import { add, divide, multiply, subtract } from 'lodash';
+
+const mathOperation = ($: IGlobalVariable) => {
+  const mathOperation = $.step.parameters.mathOperation as string;
+  const values = ($.step.parameters.values as IJSONObject[]).map((value) =>
+    Number(value.input)
+  ) as number[];
+
+  if (mathOperation === 'add') {
+    return values.reduce((acc, curr) => add(acc, curr), 0);
+  } else if (mathOperation === 'divide') {
+    return values.reduce((acc, curr) => divide(acc, curr));
+  } else if (mathOperation === 'makeNegative') {
+    return values.map((value) => -value);
+  } else if (mathOperation === 'multiply') {
+    return values.reduce((acc, curr) => multiply(acc, curr), 1);
+  } else if (mathOperation === 'subtract') {
+    return values.reduce((acc, curr) => subtract(acc, curr));
+  }
+};
+
+export default mathOperation;

packages/backend/src/apps/formatter/actions/numbers/transformers/random-number.ts

@@ -0,0 +1,15 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const randomNumber = ($: IGlobalVariable) => {
+  const lowerRange = Number($.step.parameters.lowerRange);
+  const upperRange = Number($.step.parameters.upperRange);
+  const decimalPoints = Number($.step.parameters.decimalPoints) || 0;
+
+  return Number(
+    (Math.random() * (upperRange - lowerRange) + lowerRange).toFixed(
+      decimalPoints
+    )
+  );
+};
+
+export default randomNumber;

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

@@ -1,18 +1,27 @@
 import defineAction from '../../../../helpers/define-action';
+
 import capitalize from './transformers/capitalize';
-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';
+import htmlToMarkdown from './transformers/html-to-markdown';
+import lowercase from './transformers/lowercase';
+import markdownToHtml from './transformers/markdown-to-html';
+import pluralize from './transformers/pluralize';
+import replace from './transformers/replace';
+import trimWhitespace from './transformers/trim-whitespace';
+import useDefaultValue from './transformers/use-default-value';
 
 const transformers = {
   capitalize,
-  htmlToMarkdown,
-  markdownToHtml,
-  useDefaultValue,
   extractEmailAddress,
   extractNumber,
+  htmlToMarkdown,
+  lowercase,
+  markdownToHtml,
+  pluralize,
+  replace,
+  trimWhitespace,
+  useDefaultValue,
 };
 
 export default defineAction({
@@ -26,15 +35,18 @@ export default defineAction({
       key: 'transform',
       type: 'dropdown' as const,
       required: true,
-      description: 'Pick a channel to send the message to.',
       variables: true,
       options: [
         { label: 'Capitalize', value: 'capitalize' },
         { label: 'Convert HTML to Markdown', value: 'htmlToMarkdown' },
         { label: 'Convert Markdown to HTML', value: 'markdownToHtml' },
-        { label: 'Use Default Value', value: 'useDefaultValue' },
         { label: 'Extract Email Address', value: 'extractEmailAddress' },
         { label: 'Extract Number', value: 'extractNumber' },
+        { label: 'Lowercase', value: 'lowercase' },
+        { label: 'Pluralize', value: 'pluralize' },
+        { label: 'Replace', value: 'replace' },
+        { label: 'Trim Whitespace', value: 'trimWhitespace' },
+        { label: 'Use Default Value', value: 'useDefaultValue' },
       ],
       additionalFields: {
         type: 'query',

packages/backend/src/apps/formatter/actions/text/transformers/lowercase.ts

@@ -0,0 +1,8 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const lowercase = ($: IGlobalVariable) => {
+  const input = $.step.parameters.input as string;
+  return input.toLowerCase();
+};
+
+export default lowercase;

packages/backend/src/apps/formatter/actions/text/transformers/pluralize.ts

@@ -0,0 +1,9 @@
+import { IGlobalVariable } from '@automatisch/types';
+import pluralizeLibrary from 'pluralize';
+
+const pluralize = ($: IGlobalVariable) => {
+  const input = $.step.parameters.input as string;
+  return pluralizeLibrary(input);
+};
+
+export default pluralize;

packages/backend/src/apps/formatter/actions/text/transformers/replace.ts

@@ -0,0 +1,12 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const replace = ($: IGlobalVariable) => {
+  const input = $.step.parameters.input as string;
+
+  const find = $.step.parameters.find as string;
+  const replace = $.step.parameters.replace as string;
+
+  return input.replaceAll(find, replace);
+};
+
+export default replace;

packages/backend/src/apps/formatter/actions/text/transformers/trim-whitespace.ts

@@ -0,0 +1,8 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const trimWhitespace = ($: IGlobalVariable) => {
+  const input = $.step.parameters.input as string;
+  return input.trim();
+};
+
+export default trimWhitespace;

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

@@ -0,0 +1,54 @@
+import defineAction from '../../../../helpers/define-action';
+
+import findArrayItemByProperty from './transformers/find-array-item-by-property';
+
+const transformers = {
+  findArrayItemByProperty,
+};
+
+export default defineAction({
+  name: 'Utilities',
+  key: 'utilities',
+  description: 'Specific utilities to help you transform your data.',
+  arguments: [
+    {
+      label: 'Transform',
+      key: 'transform',
+      type: 'dropdown' as const,
+      required: true,
+      variables: true,
+      options: [
+        {
+          label: 'Find Array Item By Property',
+          value: 'findArrayItemByProperty',
+        },
+      ],
+      additionalFields: {
+        type: 'query',
+        name: 'getDynamicFields',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listTransformOptions',
+          },
+          {
+            name: 'parameters.transform',
+            value: '{parameters.transform}',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const transformerName = $.step.parameters
+      .transform as keyof typeof transformers;
+    const output = transformers[transformerName]($);
+
+    $.setActionItem({
+      raw: {
+        output,
+      },
+    });
+  },
+});

packages/backend/src/apps/formatter/actions/utilities/transformers/find-array-item-by-property.ts

@@ -0,0 +1,13 @@
+import { IGlobalVariable } from '@automatisch/types';
+import { find } from 'lodash';
+
+const findArrayItemByProperty = ($: IGlobalVariable) => {
+  const value = JSON.parse($.step.parameters.value as string);
+  const propertyName = $.step.parameters.propertyName as string;
+  const propertyValue = $.step.parameters.propertyValue as string;
+
+  const foundItem = find(value, { [propertyName]: propertyValue });
+  return foundItem;
+};
+
+export default findArrayItemByProperty;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/date-time/format-date-time.ts

@@ -0,0 +1,51 @@
+import formatOptions from './options/format';
+import timezoneOptions from './options/timezone';
+
+const formatDateTime = [
+  {
+    label: 'Input',
+    key: 'input',
+    type: 'string' as const,
+    required: true,
+    description: 'The datetime you want to format.',
+    variables: true,
+  },
+  {
+    label: 'From Format',
+    key: 'fromFormat',
+    type: 'dropdown' as const,
+    required: true,
+    description: 'The format of the input.',
+    variables: true,
+    options: formatOptions,
+  },
+  {
+    label: 'From Timezone',
+    key: 'fromTimezone',
+    type: 'dropdown' as const,
+    required: true,
+    description: 'The timezone of the input.',
+    variables: true,
+    options: timezoneOptions,
+  },
+  {
+    label: 'To Format',
+    key: 'toFormat',
+    type: 'dropdown' as const,
+    required: true,
+    description: 'The format of the output.',
+    variables: true,
+    options: formatOptions,
+  },
+  {
+    label: 'To Timezone',
+    key: 'toTimezone',
+    type: 'dropdown' as const,
+    required: true,
+    description: 'The timezone of the output.',
+    variables: true,
+    options: timezoneOptions,
+  },
+];
+
+export default formatDateTime;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/date-time/options/format.ts

@@ -0,0 +1,64 @@
+const formatOptions = [
+  {
+    label: 'ccc MMM dd HH:mm:ssZZZ yyyy (Wed Aug 23 12:25:36-0000 2023)',
+    value: 'ccc MMM dd HH:mm:ssZZZ yyyy',
+  },
+  {
+    label: 'MMMM dd yyyy HH:mm:ss (August 23 2023 12:25:36)',
+    value: 'MMMM dd yyyy HH:mm:ss',
+  },
+  {
+    label: 'MMMM dd yyyy (August 23 2023)',
+    value: 'MMMM dd yyyy',
+  },
+  {
+    label: 'MMM dd yyyy (Aug 23 2023)',
+    value: 'MMM dd yyyy',
+  },
+  {
+    label: 'yyyy-MM-dd HH:mm:ss ZZZ (2023-08-23 12:25:36 -0000)',
+    value: 'yyyy-MM-dd HH:mm:ss ZZZ',
+  },
+  {
+    label: 'yyyy-MM-dd (2023-08-23)',
+    value: 'yyyy-MM-dd',
+  },
+  {
+    label: 'MM-dd-yyyy (08-23-2023)',
+    value: 'MM-dd-yyyy',
+  },
+  {
+    label: 'MM/dd/yyyy (08/23/2023)',
+    value: 'MM/dd/yyyy',
+  },
+  {
+    label: 'MM/dd/yy (08/23/23)',
+    value: 'MM/dd/yy',
+  },
+  {
+    label: 'dd-MM-yyyy (23-08-2023)',
+    value: 'dd-MM-yyyy',
+  },
+  {
+    label: 'dd/MM/yyyy (23/08/2023)',
+    value: 'dd/MM/yyyy',
+  },
+  {
+    label: 'dd/MM/yy (23/08/23)',
+    value: 'dd/MM/yy',
+  },
+  {
+    label: 'MM-yyyy (08-2023)',
+    value: 'MM-yyyy',
+  },
+  {
+    label: 'Unix timestamp in seconds (1694008283)',
+    value: 'X',
+  },
+  {
+    label: 'Unix timestamp in milliseconds (1694008306315)',
+    value: 'x',
+  },
+];
+
+export default formatOptions;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/date-time/options/timezone.ts

@@ -0,0 +1,449 @@
+// The list from Intl.supportedValuesOf('timeZone') which is used by Luxon.
+
+const timezoneOptions = [
+  { label: 'Africa/Abidjan', value: 'Africa/Abidjan' },
+  { label: 'Africa/Accra', value: 'Africa/Accra' },
+  { label: 'Africa/Addis_Ababa', value: 'Africa/Addis_Ababa' },
+  { label: 'Africa/Algiers', value: 'Africa/Algiers' },
+  { label: 'Africa/Asmera', value: 'Africa/Asmera' },
+  { label: 'Africa/Bamako', value: 'Africa/Bamako' },
+  { label: 'Africa/Bangui', value: 'Africa/Bangui' },
+  { label: 'Africa/Banjul', value: 'Africa/Banjul' },
+  { label: 'Africa/Bissau', value: 'Africa/Bissau' },
+  { label: 'Africa/Blantyre', value: 'Africa/Blantyre' },
+  { label: 'Africa/Brazzaville', value: 'Africa/Brazzaville' },
+  { label: 'Africa/Bujumbura', value: 'Africa/Bujumbura' },
+  { label: 'Africa/Cairo', value: 'Africa/Cairo' },
+  { label: 'Africa/Casablanca', value: 'Africa/Casablanca' },
+  { label: 'Africa/Ceuta', value: 'Africa/Ceuta' },
+  { label: 'Africa/Conakry', value: 'Africa/Conakry' },
+  { label: 'Africa/Dakar', value: 'Africa/Dakar' },
+  { label: 'Africa/Dar_es_Salaam', value: 'Africa/Dar_es_Salaam' },
+  { label: 'Africa/Djibouti', value: 'Africa/Djibouti' },
+  { label: 'Africa/Douala', value: 'Africa/Douala' },
+  { label: 'Africa/El_Aaiun', value: 'Africa/El_Aaiun' },
+  { label: 'Africa/Freetown', value: 'Africa/Freetown' },
+  { label: 'Africa/Gaborone', value: 'Africa/Gaborone' },
+  { label: 'Africa/Harare', value: 'Africa/Harare' },
+  { label: 'Africa/Johannesburg', value: 'Africa/Johannesburg' },
+  { label: 'Africa/Juba', value: 'Africa/Juba' },
+  { label: 'Africa/Kampala', value: 'Africa/Kampala' },
+  { label: 'Africa/Khartoum', value: 'Africa/Khartoum' },
+  { label: 'Africa/Kigali', value: 'Africa/Kigali' },
+  { label: 'Africa/Kinshasa', value: 'Africa/Kinshasa' },
+  { label: 'Africa/Lagos', value: 'Africa/Lagos' },
+  { label: 'Africa/Libreville', value: 'Africa/Libreville' },
+  { label: 'Africa/Lome', value: 'Africa/Lome' },
+  { label: 'Africa/Luanda', value: 'Africa/Luanda' },
+  { label: 'Africa/Lubumbashi', value: 'Africa/Lubumbashi' },
+  { label: 'Africa/Lusaka', value: 'Africa/Lusaka' },
+  { label: 'Africa/Malabo', value: 'Africa/Malabo' },
+  { label: 'Africa/Maputo', value: 'Africa/Maputo' },
+  { label: 'Africa/Maseru', value: 'Africa/Maseru' },
+  { label: 'Africa/Mbabane', value: 'Africa/Mbabane' },
+  { label: 'Africa/Mogadishu', value: 'Africa/Mogadishu' },
+  { label: 'Africa/Monrovia', value: 'Africa/Monrovia' },
+  { label: 'Africa/Nairobi', value: 'Africa/Nairobi' },
+  { label: 'Africa/Ndjamena', value: 'Africa/Ndjamena' },
+  { label: 'Africa/Niamey', value: 'Africa/Niamey' },
+  { label: 'Africa/Nouakchott', value: 'Africa/Nouakchott' },
+  { label: 'Africa/Ouagadougou', value: 'Africa/Ouagadougou' },
+  { label: 'Africa/Porto-Novo', value: 'Africa/Porto-Novo' },
+  { label: 'Africa/Sao_Tome', value: 'Africa/Sao_Tome' },
+  { label: 'Africa/Tripoli', value: 'Africa/Tripoli' },
+  { label: 'Africa/Tunis', value: 'Africa/Tunis' },
+  { label: 'Africa/Windhoek', value: 'Africa/Windhoek' },
+  { label: 'America/Adak', value: 'America/Adak' },
+  { label: 'America/Anchorage', value: 'America/Anchorage' },
+  { label: 'America/Anguilla', value: 'America/Anguilla' },
+  { label: 'America/Antigua', value: 'America/Antigua' },
+  { label: 'America/Araguaina', value: 'America/Araguaina' },
+  { label: 'America/Argentina/La_Rioja', value: 'America/Argentina/La_Rioja' },
+  {
+    label: 'America/Argentina/Rio_Gallegos',
+    value: 'America/Argentina/Rio_Gallegos',
+  },
+  { label: 'America/Argentina/Salta', value: 'America/Argentina/Salta' },
+  { label: 'America/Argentina/San_Juan', value: 'America/Argentina/San_Juan' },
+  { label: 'America/Argentina/San_Luis', value: 'America/Argentina/San_Luis' },
+  { label: 'America/Argentina/Tucuman', value: 'America/Argentina/Tucuman' },
+  { label: 'America/Argentina/Ushuaia', value: 'America/Argentina/Ushuaia' },
+  { label: 'America/Aruba', value: 'America/Aruba' },
+  { label: 'America/Asuncion', value: 'America/Asuncion' },
+  { label: 'America/Bahia', value: 'America/Bahia' },
+  { label: 'America/Bahia_Banderas', value: 'America/Bahia_Banderas' },
+  { label: 'America/Barbados', value: 'America/Barbados' },
+  { label: 'America/Belem', value: 'America/Belem' },
+  { label: 'America/Belize', value: 'America/Belize' },
+  { label: 'America/Blanc-Sablon', value: 'America/Blanc-Sablon' },
+  { label: 'America/Boa_Vista', value: 'America/Boa_Vista' },
+  { label: 'America/Bogota', value: 'America/Bogota' },
+  { label: 'America/Boise', value: 'America/Boise' },
+  { label: 'America/Buenos_Aires', value: 'America/Buenos_Aires' },
+  { label: 'America/Cambridge_Bay', value: 'America/Cambridge_Bay' },
+  { label: 'America/Campo_Grande', value: 'America/Campo_Grande' },
+  { label: 'America/Cancun', value: 'America/Cancun' },
+  { label: 'America/Caracas', value: 'America/Caracas' },
+  { label: 'America/Catamarca', value: 'America/Catamarca' },
+  { label: 'America/Cayenne', value: 'America/Cayenne' },
+  { label: 'America/Cayman', value: 'America/Cayman' },
+  { label: 'America/Chicago', value: 'America/Chicago' },
+  { label: 'America/Chihuahua', value: 'America/Chihuahua' },
+  { label: 'America/Ciudad_Juarez', value: 'America/Ciudad_Juarez' },
+  { label: 'America/Coral_Harbour', value: 'America/Coral_Harbour' },
+  { label: 'America/Cordoba', value: 'America/Cordoba' },
+  { label: 'America/Costa_Rica', value: 'America/Costa_Rica' },
+  { label: 'America/Creston', value: 'America/Creston' },
+  { label: 'America/Cuiaba', value: 'America/Cuiaba' },
+  { label: 'America/Curacao', value: 'America/Curacao' },
+  { label: 'America/Danmarkshavn', value: 'America/Danmarkshavn' },
+  { label: 'America/Dawson', value: 'America/Dawson' },
+  { label: 'America/Dawson_Creek', value: 'America/Dawson_Creek' },
+  { label: 'America/Denver', value: 'America/Denver' },
+  { label: 'America/Detroit', value: 'America/Detroit' },
+  { label: 'America/Dominica', value: 'America/Dominica' },
+  { label: 'America/Edmonton', value: 'America/Edmonton' },
+  { label: 'America/Eirunepe', value: 'America/Eirunepe' },
+  { label: 'America/El_Salvador', value: 'America/El_Salvador' },
+  { label: 'America/Fort_Nelson', value: 'America/Fort_Nelson' },
+  { label: 'America/Fortaleza', value: 'America/Fortaleza' },
+  { label: 'America/Glace_Bay', value: 'America/Glace_Bay' },
+  { label: 'America/Godthab', value: 'America/Godthab' },
+  { label: 'America/Goose_Bay', value: 'America/Goose_Bay' },
+  { label: 'America/Grand_Turk', value: 'America/Grand_Turk' },
+  { label: 'America/Grenada', value: 'America/Grenada' },
+  { label: 'America/Guadeloupe', value: 'America/Guadeloupe' },
+  { label: 'America/Guatemala', value: 'America/Guatemala' },
+  { label: 'America/Guayaquil', value: 'America/Guayaquil' },
+  { label: 'America/Guyana', value: 'America/Guyana' },
+  { label: 'America/Halifax', value: 'America/Halifax' },
+  { label: 'America/Havana', value: 'America/Havana' },
+  { label: 'America/Hermosillo', value: 'America/Hermosillo' },
+  { label: 'America/Indiana/Knox', value: 'America/Indiana/Knox' },
+  { label: 'America/Indiana/Marengo', value: 'America/Indiana/Marengo' },
+  { label: 'America/Indiana/Petersburg', value: 'America/Indiana/Petersburg' },
+  { label: 'America/Indiana/Tell_City', value: 'America/Indiana/Tell_City' },
+  { label: 'America/Indiana/Vevay', value: 'America/Indiana/Vevay' },
+  { label: 'America/Indiana/Vincennes', value: 'America/Indiana/Vincennes' },
+  { label: 'America/Indiana/Winamac', value: 'America/Indiana/Winamac' },
+  { label: 'America/Indianapolis', value: 'America/Indianapolis' },
+  { label: 'America/Inuvik', value: 'America/Inuvik' },
+  { label: 'America/Iqaluit', value: 'America/Iqaluit' },
+  { label: 'America/Jamaica', value: 'America/Jamaica' },
+  { label: 'America/Jujuy', value: 'America/Jujuy' },
+  { label: 'America/Juneau', value: 'America/Juneau' },
+  {
+    label: 'America/Kentucky/Monticello',
+    value: 'America/Kentucky/Monticello',
+  },
+  { label: 'America/Kralendijk', value: 'America/Kralendijk' },
+  { label: 'America/La_Paz', value: 'America/La_Paz' },
+  { label: 'America/Lima', value: 'America/Lima' },
+  { label: 'America/Los_Angeles', value: 'America/Los_Angeles' },
+  { label: 'America/Louisville', value: 'America/Louisville' },
+  { label: 'America/Lower_Princes', value: 'America/Lower_Princes' },
+  { label: 'America/Maceio', value: 'America/Maceio' },
+  { label: 'America/Managua', value: 'America/Managua' },
+  { label: 'America/Manaus', value: 'America/Manaus' },
+  { label: 'America/Marigot', value: 'America/Marigot' },
+  { label: 'America/Martinique', value: 'America/Martinique' },
+  { label: 'America/Matamoros', value: 'America/Matamoros' },
+  { label: 'America/Mazatlan', value: 'America/Mazatlan' },
+  { label: 'America/Mendoza', value: 'America/Mendoza' },
+  { label: 'America/Menominee', value: 'America/Menominee' },
+  { label: 'America/Merida', value: 'America/Merida' },
+  { label: 'America/Metlakatla', value: 'America/Metlakatla' },
+  { label: 'America/Mexico_City', value: 'America/Mexico_City' },
+  { label: 'America/Miquelon', value: 'America/Miquelon' },
+  { label: 'America/Moncton', value: 'America/Moncton' },
+  { label: 'America/Monterrey', value: 'America/Monterrey' },
+  { label: 'America/Montevideo', value: 'America/Montevideo' },
+  { label: 'America/Montserrat', value: 'America/Montserrat' },
+  { label: 'America/Nassau', value: 'America/Nassau' },
+  { label: 'America/New_York', value: 'America/New_York' },
+  { label: 'America/Nipigon', value: 'America/Nipigon' },
+  { label: 'America/Nome', value: 'America/Nome' },
+  { label: 'America/Noronha', value: 'America/Noronha' },
+  {
+    label: 'America/North_Dakota/Beulah',
+    value: 'America/North_Dakota/Beulah',
+  },
+  {
+    label: 'America/North_Dakota/Center',
+    value: 'America/North_Dakota/Center',
+  },
+  {
+    label: 'America/North_Dakota/New_Salem',
+    value: 'America/North_Dakota/New_Salem',
+  },
+  { label: 'America/Ojinaga', value: 'America/Ojinaga' },
+  { label: 'America/Panama', value: 'America/Panama' },
+  { label: 'America/Pangnirtung', value: 'America/Pangnirtung' },
+  { label: 'America/Paramaribo', value: 'America/Paramaribo' },
+  { label: 'America/Phoenix', value: 'America/Phoenix' },
+  { label: 'America/Port-au-Prince', value: 'America/Port-au-Prince' },
+  { label: 'America/Port_of_Spain', value: 'America/Port_of_Spain' },
+  { label: 'America/Porto_Velho', value: 'America/Porto_Velho' },
+  { label: 'America/Puerto_Rico', value: 'America/Puerto_Rico' },
+  { label: 'America/Punta_Arenas', value: 'America/Punta_Arenas' },
+  { label: 'America/Rainy_River', value: 'America/Rainy_River' },
+  { label: 'America/Rankin_Inlet', value: 'America/Rankin_Inlet' },
+  { label: 'America/Recife', value: 'America/Recife' },
+  { label: 'America/Regina', value: 'America/Regina' },
+  { label: 'America/Resolute', value: 'America/Resolute' },
+  { label: 'America/Rio_Branco', value: 'America/Rio_Branco' },
+  { label: 'America/Santa_Isabel', value: 'America/Santa_Isabel' },
+  { label: 'America/Santarem', value: 'America/Santarem' },
+  { label: 'America/Santiago', value: 'America/Santiago' },
+  { label: 'America/Santo_Domingo', value: 'America/Santo_Domingo' },
+  { label: 'America/Sao_Paulo', value: 'America/Sao_Paulo' },
+  { label: 'America/Scoresbysund', value: 'America/Scoresbysund' },
+  { label: 'America/Sitka', value: 'America/Sitka' },
+  { label: 'America/St_Barthelemy', value: 'America/St_Barthelemy' },
+  { label: 'America/St_Johns', value: 'America/St_Johns' },
+  { label: 'America/St_Kitts', value: 'America/St_Kitts' },
+  { label: 'America/St_Lucia', value: 'America/St_Lucia' },
+  { label: 'America/St_Thomas', value: 'America/St_Thomas' },
+  { label: 'America/St_Vincent', value: 'America/St_Vincent' },
+  { label: 'America/Swift_Current', value: 'America/Swift_Current' },
+  { label: 'America/Tegucigalpa', value: 'America/Tegucigalpa' },
+  { label: 'America/Thule', value: 'America/Thule' },
+  { label: 'America/Thunder_Bay', value: 'America/Thunder_Bay' },
+  { label: 'America/Tijuana', value: 'America/Tijuana' },
+  { label: 'America/Toronto', value: 'America/Toronto' },
+  { label: 'America/Tortola', value: 'America/Tortola' },
+  { label: 'America/Vancouver', value: 'America/Vancouver' },
+  { label: 'America/Whitehorse', value: 'America/Whitehorse' },
+  { label: 'America/Winnipeg', value: 'America/Winnipeg' },
+  { label: 'America/Yakutat', value: 'America/Yakutat' },
+  { label: 'America/Yellowknife', value: 'America/Yellowknife' },
+  { label: 'Antarctica/Casey', value: 'Antarctica/Casey' },
+  { label: 'Antarctica/Davis', value: 'Antarctica/Davis' },
+  { label: 'Antarctica/DumontDUrville', value: 'Antarctica/DumontDUrville' },
+  { label: 'Antarctica/Macquarie', value: 'Antarctica/Macquarie' },
+  { label: 'Antarctica/Mawson', value: 'Antarctica/Mawson' },
+  { label: 'Antarctica/McMurdo', value: 'Antarctica/McMurdo' },
+  { label: 'Antarctica/Palmer', value: 'Antarctica/Palmer' },
+  { label: 'Antarctica/Rothera', value: 'Antarctica/Rothera' },
+  { label: 'Antarctica/Syowa', value: 'Antarctica/Syowa' },
+  { label: 'Antarctica/Troll', value: 'Antarctica/Troll' },
+  { label: 'Antarctica/Vostok', value: 'Antarctica/Vostok' },
+  { label: 'Arctic/Longyearbyen', value: 'Arctic/Longyearbyen' },
+  { label: 'Asia/Aden', value: 'Asia/Aden' },
+  { label: 'Asia/Almaty', value: 'Asia/Almaty' },
+  { label: 'Asia/Amman', value: 'Asia/Amman' },
+  { label: 'Asia/Anadyr', value: 'Asia/Anadyr' },
+  { label: 'Asia/Aqtau', value: 'Asia/Aqtau' },
+  { label: 'Asia/Aqtobe', value: 'Asia/Aqtobe' },
+  { label: 'Asia/Ashgabat', value: 'Asia/Ashgabat' },
+  { label: 'Asia/Atyrau', value: 'Asia/Atyrau' },
+  { label: 'Asia/Baghdad', value: 'Asia/Baghdad' },
+  { label: 'Asia/Bahrain', value: 'Asia/Bahrain' },
+  { label: 'Asia/Baku', value: 'Asia/Baku' },
+  { label: 'Asia/Bangkok', value: 'Asia/Bangkok' },
+  { label: 'Asia/Barnaul', value: 'Asia/Barnaul' },
+  { label: 'Asia/Beirut', value: 'Asia/Beirut' },
+  { label: 'Asia/Bishkek', value: 'Asia/Bishkek' },
+  { label: 'Asia/Brunei', value: 'Asia/Brunei' },
+  { label: 'Asia/Calcutta', value: 'Asia/Calcutta' },
+  { label: 'Asia/Chita', value: 'Asia/Chita' },
+  { label: 'Asia/Choibalsan', value: 'Asia/Choibalsan' },
+  { label: 'Asia/Colombo', value: 'Asia/Colombo' },
+  { label: 'Asia/Damascus', value: 'Asia/Damascus' },
+  { label: 'Asia/Dhaka', value: 'Asia/Dhaka' },
+  { label: 'Asia/Dili', value: 'Asia/Dili' },
+  { label: 'Asia/Dubai', value: 'Asia/Dubai' },
+  { label: 'Asia/Dushanbe', value: 'Asia/Dushanbe' },
+  { label: 'Asia/Famagusta', value: 'Asia/Famagusta' },
+  { label: 'Asia/Gaza', value: 'Asia/Gaza' },
+  { label: 'Asia/Hebron', value: 'Asia/Hebron' },
+  { label: 'Asia/Hong_Kong', value: 'Asia/Hong_Kong' },
+  { label: 'Asia/Hovd', value: 'Asia/Hovd' },
+  { label: 'Asia/Irkutsk', value: 'Asia/Irkutsk' },
+  { label: 'Asia/Jakarta', value: 'Asia/Jakarta' },
+  { label: 'Asia/Jayapura', value: 'Asia/Jayapura' },
+  { label: 'Asia/Jerusalem', value: 'Asia/Jerusalem' },
+  { label: 'Asia/Kabul', value: 'Asia/Kabul' },
+  { label: 'Asia/Kamchatka', value: 'Asia/Kamchatka' },
+  { label: 'Asia/Karachi', value: 'Asia/Karachi' },
+  { label: 'Asia/Katmandu', value: 'Asia/Katmandu' },
+  { label: 'Asia/Khandyga', value: 'Asia/Khandyga' },
+  { label: 'Asia/Krasnoyarsk', value: 'Asia/Krasnoyarsk' },
+  { label: 'Asia/Kuala_Lumpur', value: 'Asia/Kuala_Lumpur' },
+  { label: 'Asia/Kuching', value: 'Asia/Kuching' },
+  { label: 'Asia/Kuwait', value: 'Asia/Kuwait' },
+  { label: 'Asia/Macau', value: 'Asia/Macau' },
+  { label: 'Asia/Magadan', value: 'Asia/Magadan' },
+  { label: 'Asia/Makassar', value: 'Asia/Makassar' },
+  { label: 'Asia/Manila', value: 'Asia/Manila' },
+  { label: 'Asia/Muscat', value: 'Asia/Muscat' },
+  { label: 'Asia/Nicosia', value: 'Asia/Nicosia' },
+  { label: 'Asia/Novokuznetsk', value: 'Asia/Novokuznetsk' },
+  { label: 'Asia/Novosibirsk', value: 'Asia/Novosibirsk' },
+  { label: 'Asia/Omsk', value: 'Asia/Omsk' },
+  { label: 'Asia/Oral', value: 'Asia/Oral' },
+  { label: 'Asia/Phnom_Penh', value: 'Asia/Phnom_Penh' },
+  { label: 'Asia/Pontianak', value: 'Asia/Pontianak' },
+  { label: 'Asia/Pyongyang', value: 'Asia/Pyongyang' },
+  { label: 'Asia/Qatar', value: 'Asia/Qatar' },
+  { label: 'Asia/Qostanay', value: 'Asia/Qostanay' },
+  { label: 'Asia/Qyzylorda', value: 'Asia/Qyzylorda' },
+  { label: 'Asia/Rangoon', value: 'Asia/Rangoon' },
+  { label: 'Asia/Riyadh', value: 'Asia/Riyadh' },
+  { label: 'Asia/Saigon', value: 'Asia/Saigon' },
+  { label: 'Asia/Sakhalin', value: 'Asia/Sakhalin' },
+  { label: 'Asia/Samarkand', value: 'Asia/Samarkand' },
+  { label: 'Asia/Seoul', value: 'Asia/Seoul' },
+  { label: 'Asia/Shanghai', value: 'Asia/Shanghai' },
+  { label: 'Asia/Singapore', value: 'Asia/Singapore' },
+  { label: 'Asia/Srednekolymsk', value: 'Asia/Srednekolymsk' },
+  { label: 'Asia/Taipei', value: 'Asia/Taipei' },
+  { label: 'Asia/Tashkent', value: 'Asia/Tashkent' },
+  { label: 'Asia/Tbilisi', value: 'Asia/Tbilisi' },
+  { label: 'Asia/Tehran', value: 'Asia/Tehran' },
+  { label: 'Asia/Thimphu', value: 'Asia/Thimphu' },
+  { label: 'Asia/Tokyo', value: 'Asia/Tokyo' },
+  { label: 'Asia/Tomsk', value: 'Asia/Tomsk' },
+  { label: 'Asia/Ulaanbaatar', value: 'Asia/Ulaanbaatar' },
+  { label: 'Asia/Urumqi', value: 'Asia/Urumqi' },
+  { label: 'Asia/Ust-Nera', value: 'Asia/Ust-Nera' },
+  { label: 'Asia/Vientiane', value: 'Asia/Vientiane' },
+  { label: 'Asia/Vladivostok', value: 'Asia/Vladivostok' },
+  { label: 'Asia/Yakutsk', value: 'Asia/Yakutsk' },
+  { label: 'Asia/Yekaterinburg', value: 'Asia/Yekaterinburg' },
+  { label: 'Asia/Yerevan', value: 'Asia/Yerevan' },
+  { label: 'Atlantic/Azores', value: 'Atlantic/Azores' },
+  { label: 'Atlantic/Bermuda', value: 'Atlantic/Bermuda' },
+  { label: 'Atlantic/Canary', value: 'Atlantic/Canary' },
+  { label: 'Atlantic/Cape_Verde', value: 'Atlantic/Cape_Verde' },
+  { label: 'Atlantic/Faeroe', value: 'Atlantic/Faeroe' },
+  { label: 'Atlantic/Madeira', value: 'Atlantic/Madeira' },
+  { label: 'Atlantic/Reykjavik', value: 'Atlantic/Reykjavik' },
+  { label: 'Atlantic/South_Georgia', value: 'Atlantic/South_Georgia' },
+  { label: 'Atlantic/St_Helena', value: 'Atlantic/St_Helena' },
+  { label: 'Atlantic/Stanley', value: 'Atlantic/Stanley' },
+  { label: 'Australia/Adelaide', value: 'Australia/Adelaide' },
+  { label: 'Australia/Brisbane', value: 'Australia/Brisbane' },
+  { label: 'Australia/Broken_Hill', value: 'Australia/Broken_Hill' },
+  { label: 'Australia/Currie', value: 'Australia/Currie' },
+  { label: 'Australia/Darwin', value: 'Australia/Darwin' },
+  { label: 'Australia/Eucla', value: 'Australia/Eucla' },
+  { label: 'Australia/Hobart', value: 'Australia/Hobart' },
+  { label: 'Australia/Lindeman', value: 'Australia/Lindeman' },
+  { label: 'Australia/Lord_Howe', value: 'Australia/Lord_Howe' },
+  { label: 'Australia/Melbourne', value: 'Australia/Melbourne' },
+  { label: 'Australia/Perth', value: 'Australia/Perth' },
+  { label: 'Australia/Sydney', value: 'Australia/Sydney' },
+  { label: 'Europe/Amsterdam', value: 'Europe/Amsterdam' },
+  { label: 'Europe/Andorra', value: 'Europe/Andorra' },
+  { label: 'Europe/Astrakhan', value: 'Europe/Astrakhan' },
+  { label: 'Europe/Athens', value: 'Europe/Athens' },
+  { label: 'Europe/Belgrade', value: 'Europe/Belgrade' },
+  { label: 'Europe/Berlin', value: 'Europe/Berlin' },
+  { label: 'Europe/Bratislava', value: 'Europe/Bratislava' },
+  { label: 'Europe/Brussels', value: 'Europe/Brussels' },
+  { label: 'Europe/Bucharest', value: 'Europe/Bucharest' },
+  { label: 'Europe/Budapest', value: 'Europe/Budapest' },
+  { label: 'Europe/Busingen', value: 'Europe/Busingen' },
+  { label: 'Europe/Chisinau', value: 'Europe/Chisinau' },
+  { label: 'Europe/Copenhagen', value: 'Europe/Copenhagen' },
+  { label: 'Europe/Dublin', value: 'Europe/Dublin' },
+  { label: 'Europe/Gibraltar', value: 'Europe/Gibraltar' },
+  { label: 'Europe/Guernsey', value: 'Europe/Guernsey' },
+  { label: 'Europe/Helsinki', value: 'Europe/Helsinki' },
+  { label: 'Europe/Isle_of_Man', value: 'Europe/Isle_of_Man' },
+  { label: 'Europe/Istanbul', value: 'Europe/Istanbul' },
+  { label: 'Europe/Jersey', value: 'Europe/Jersey' },
+  { label: 'Europe/Kaliningrad', value: 'Europe/Kaliningrad' },
+  { label: 'Europe/Kiev', value: 'Europe/Kiev' },
+  { label: 'Europe/Kirov', value: 'Europe/Kirov' },
+  { label: 'Europe/Lisbon', value: 'Europe/Lisbon' },
+  { label: 'Europe/Ljubljana', value: 'Europe/Ljubljana' },
+  { label: 'Europe/London', value: 'Europe/London' },
+  { label: 'Europe/Luxembourg', value: 'Europe/Luxembourg' },
+  { label: 'Europe/Madrid', value: 'Europe/Madrid' },
+  { label: 'Europe/Malta', value: 'Europe/Malta' },
+  { label: 'Europe/Mariehamn', value: 'Europe/Mariehamn' },
+  { label: 'Europe/Minsk', value: 'Europe/Minsk' },
+  { label: 'Europe/Monaco', value: 'Europe/Monaco' },
+  { label: 'Europe/Moscow', value: 'Europe/Moscow' },
+  { label: 'Europe/Oslo', value: 'Europe/Oslo' },
+  { label: 'Europe/Paris', value: 'Europe/Paris' },
+  { label: 'Europe/Podgorica', value: 'Europe/Podgorica' },
+  { label: 'Europe/Prague', value: 'Europe/Prague' },
+  { label: 'Europe/Riga', value: 'Europe/Riga' },
+  { label: 'Europe/Rome', value: 'Europe/Rome' },
+  { label: 'Europe/Samara', value: 'Europe/Samara' },
+  { label: 'Europe/San_Marino', value: 'Europe/San_Marino' },
+  { label: 'Europe/Sarajevo', value: 'Europe/Sarajevo' },
+  { label: 'Europe/Saratov', value: 'Europe/Saratov' },
+  { label: 'Europe/Simferopol', value: 'Europe/Simferopol' },
+  { label: 'Europe/Skopje', value: 'Europe/Skopje' },
+  { label: 'Europe/Sofia', value: 'Europe/Sofia' },
+  { label: 'Europe/Stockholm', value: 'Europe/Stockholm' },
+  { label: 'Europe/Tallinn', value: 'Europe/Tallinn' },
+  { label: 'Europe/Tirane', value: 'Europe/Tirane' },
+  { label: 'Europe/Ulyanovsk', value: 'Europe/Ulyanovsk' },
+  { label: 'Europe/Uzhgorod', value: 'Europe/Uzhgorod' },
+  { label: 'Europe/Vaduz', value: 'Europe/Vaduz' },
+  { label: 'Europe/Vatican', value: 'Europe/Vatican' },
+  { label: 'Europe/Vienna', value: 'Europe/Vienna' },
+  { label: 'Europe/Vilnius', value: 'Europe/Vilnius' },
+  { label: 'Europe/Volgograd', value: 'Europe/Volgograd' },
+  { label: 'Europe/Warsaw', value: 'Europe/Warsaw' },
+  { label: 'Europe/Zagreb', value: 'Europe/Zagreb' },
+  { label: 'Europe/Zaporozhye', value: 'Europe/Zaporozhye' },
+  { label: 'Europe/Zurich', value: 'Europe/Zurich' },
+  { label: 'Indian/Antananarivo', value: 'Indian/Antananarivo' },
+  { label: 'Indian/Chagos', value: 'Indian/Chagos' },
+  { label: 'Indian/Christmas', value: 'Indian/Christmas' },
+  { label: 'Indian/Cocos', value: 'Indian/Cocos' },
+  { label: 'Indian/Comoro', value: 'Indian/Comoro' },
+  { label: 'Indian/Kerguelen', value: 'Indian/Kerguelen' },
+  { label: 'Indian/Mahe', value: 'Indian/Mahe' },
+  { label: 'Indian/Maldives', value: 'Indian/Maldives' },
+  { label: 'Indian/Mauritius', value: 'Indian/Mauritius' },
+  { label: 'Indian/Mayotte', value: 'Indian/Mayotte' },
+  { label: 'Indian/Reunion', value: 'Indian/Reunion' },
+  { label: 'Pacific/Apia', value: 'Pacific/Apia' },
+  { label: 'Pacific/Auckland', value: 'Pacific/Auckland' },
+  { label: 'Pacific/Bougainville', value: 'Pacific/Bougainville' },
+  { label: 'Pacific/Chatham', value: 'Pacific/Chatham' },
+  { label: 'Pacific/Easter', value: 'Pacific/Easter' },
+  { label: 'Pacific/Efate', value: 'Pacific/Efate' },
+  { label: 'Pacific/Enderbury', value: 'Pacific/Enderbury' },
+  { label: 'Pacific/Fakaofo', value: 'Pacific/Fakaofo' },
+  { label: 'Pacific/Fiji', value: 'Pacific/Fiji' },
+  { label: 'Pacific/Funafuti', value: 'Pacific/Funafuti' },
+  { label: 'Pacific/Galapagos', value: 'Pacific/Galapagos' },
+  { label: 'Pacific/Gambier', value: 'Pacific/Gambier' },
+  { label: 'Pacific/Guadalcanal', value: 'Pacific/Guadalcanal' },
+  { label: 'Pacific/Guam', value: 'Pacific/Guam' },
+  { label: 'Pacific/Honolulu', value: 'Pacific/Honolulu' },
+  { label: 'Pacific/Johnston', value: 'Pacific/Johnston' },
+  { label: 'Pacific/Kiritimati', value: 'Pacific/Kiritimati' },
+  { label: 'Pacific/Kosrae', value: 'Pacific/Kosrae' },
+  { label: 'Pacific/Kwajalein', value: 'Pacific/Kwajalein' },
+  { label: 'Pacific/Majuro', value: 'Pacific/Majuro' },
+  { label: 'Pacific/Marquesas', value: 'Pacific/Marquesas' },
+  { label: 'Pacific/Midway', value: 'Pacific/Midway' },
+  { label: 'Pacific/Nauru', value: 'Pacific/Nauru' },
+  { label: 'Pacific/Niue', value: 'Pacific/Niue' },
+  { label: 'Pacific/Norfolk', value: 'Pacific/Norfolk' },
+  { label: 'Pacific/Noumea', value: 'Pacific/Noumea' },
+  { label: 'Pacific/Pago_Pago', value: 'Pacific/Pago_Pago' },
+  { label: 'Pacific/Palau', value: 'Pacific/Palau' },
+  { label: 'Pacific/Pitcairn', value: 'Pacific/Pitcairn' },
+  { label: 'Pacific/Ponape', value: 'Pacific/Ponape' },
+  { label: 'Pacific/Port_Moresby', value: 'Pacific/Port_Moresby' },
+  { label: 'Pacific/Rarotonga', value: 'Pacific/Rarotonga' },
+  { label: 'Pacific/Saipan', value: 'Pacific/Saipan' },
+  { label: 'Pacific/Tahiti', value: 'Pacific/Tahiti' },
+  { label: 'Pacific/Tarawa', value: 'Pacific/Tarawa' },
+  { label: 'Pacific/Tongatapu', value: 'Pacific/Tongatapu' },
+  { label: 'Pacific/Truk', value: 'Pacific/Truk' },
+  { label: 'Pacific/Wake', value: 'Pacific/Wake' },
+  { label: 'Pacific/Wallis', value: 'Pacific/Wallis' },
+];
+
+export default timezoneOptions;

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

@@ -1,18 +1,36 @@
 import { IGlobalVariable, IJSONObject } from '@automatisch/types';
-import capitalize from './options/capitalize';
-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';
+import capitalize from './text/capitalize';
+import extractEmailAddress from './text/extract-email-address';
+import extractNumber from './text/extract-number';
+import findArrayItemByProperty from './utilities/find-array-item-by-property';
+import formatDateTime from './date-time/format-date-time';
+import formatNumber from './numbers/format-number';
+import htmlToMarkdown from './text/html-to-markdown';
+import lowercase from './text/lowercase';
+import markdownToHtml from './text/markdown-to-html';
+import performMathOperation from './numbers/perform-math-operation';
+import pluralize from './text/pluralize';
+import randomNumber from './numbers/random-number';
+import replace from './text/replace';
+import trimWhitespace from './text/trim-whitespace';
+import useDefaultValue from './text/use-default-value';
 
 const options: IJSONObject = {
   capitalize,
-  htmlToMarkdown,
-  markdownToHtml,
-  useDefaultValue,
   extractEmailAddress,
   extractNumber,
+  findArrayItemByProperty,
+  formatDateTime,
+  formatNumber,
+  htmlToMarkdown,
+  lowercase,
+  markdownToHtml,
+  performMathOperation,
+  pluralize,
+  randomNumber,
+  replace,
+  trimWhitespace,
+  useDefaultValue,
 };
 
 export default {

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

@@ -0,0 +1,38 @@
+const formatNumber = [
+  {
+    label: 'Input',
+    key: 'input',
+    type: 'string' as const,
+    required: true,
+    description: 'The number you want to format.',
+    variables: true,
+  },
+  {
+    label: 'Input Decimal Mark',
+    key: 'inputDecimalMark',
+    type: 'dropdown' as const,
+    required: true,
+    description: 'The decimal mark of the input number.',
+    variables: true,
+    options: [
+      { label: 'Comma', value: ',' },
+      { label: 'Period', value: '.' },
+    ],
+  },
+  {
+    label: 'To Format',
+    key: 'toFormat',
+    type: 'dropdown' as const,
+    required: true,
+    description: 'The format you want to convert the number to.',
+    variables: true,
+    options: [
+      { label: 'Comma for grouping & period for decimal', value: '0' },
+      { label: 'Period for grouping & comma for decimal', value: '1' },
+      { label: 'Space for grouping & period for decimal', value: '2' },
+      { label: 'Space for grouping & comma for decimal', value: '3' },
+    ],
+  },
+];
+
+export default formatNumber;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/numbers/perform-math-operation.ts

@@ -0,0 +1,36 @@
+const performMathOperation = [
+  {
+    label: 'Math Operation',
+    key: 'mathOperation',
+    type: 'dropdown' as const,
+    required: true,
+    description: 'The math operation to perform.',
+    variables: true,
+    options: [
+      { label: 'Add', value: 'add' },
+      { label: 'Divide', value: 'divide' },
+      { label: 'Make Negative', value: 'makeNegative' },
+      { label: 'Multiply', value: 'multiply' },
+      { label: 'Subtract', value: 'subtract' },
+    ],
+  },
+  {
+    label: 'Values',
+    key: 'values',
+    type: 'dynamic' as const,
+    required: false,
+    description: 'Add or remove numbers as needed.',
+    fields: [
+      {
+        label: 'Input',
+        key: 'input',
+        type: 'string' as const,
+        required: true,
+        description: 'The number to perform the math operation on.',
+        variables: true,
+      },
+    ],
+  },
+];
+
+export default performMathOperation;

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

@@ -0,0 +1,29 @@
+const randomNumber = [
+  {
+    label: 'Lower range',
+    key: 'lowerRange',
+    type: 'string' as const,
+    required: true,
+    description: 'The lowest number to generate.',
+    variables: true,
+  },
+  {
+    label: 'Upper range',
+    key: 'upperRange',
+    type: 'string' as const,
+    required: true,
+    description: 'The highest number to generate.',
+    variables: true,
+  },
+  {
+    label: 'Decimal points',
+    key: 'decimalPoints',
+    type: 'string' as const,
+    required: false,
+    description:
+      'The number of digits after the decimal point. It can be an integer between 0 and 15.',
+    variables: true,
+  },
+];
+
+export default randomNumber;

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

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

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

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

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

@@ -0,0 +1,28 @@
+const replace = [
+  {
+    label: 'Input',
+    key: 'input',
+    type: 'string' as const,
+    required: true,
+    description: 'Text that you want to search for and replace values.',
+    variables: true,
+  },
+  {
+    label: 'Find',
+    key: 'find',
+    type: 'string' as const,
+    required: true,
+    description: 'Text that will be searched for.',
+    variables: true,
+  },
+  {
+    label: 'Replace',
+    key: 'replace',
+    type: 'string' as const,
+    required: false,
+    description: 'Text that will replace the found text.',
+    variables: true,
+  },
+];
+
+export default replace;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/text/trim-whitespace.ts

@@ -0,0 +1,12 @@
+const trimWhitespace = [
+  {
+    label: 'Input',
+    key: 'input',
+    type: 'string' as const,
+    required: true,
+    description: 'Text you want to remove leading and trailing spaces.',
+    variables: true,
+  },
+];
+
+export default trimWhitespace;

packages/backend/src/apps/formatter/dynamic-fields/list-transform-options/utilities/find-array-item-by-property.ts

@@ -0,0 +1,28 @@
+const findArrayItemByProperty = [
+  {
+    label: 'Value',
+    key: 'value',
+    type: 'string' as const,
+    required: true,
+    description: 'Array of objects that will be searched.',
+    variables: true,
+  },
+  {
+    label: 'Property Name',
+    key: 'propertyName',
+    type: 'string' as const,
+    required: true,
+    description: 'Property name that will be searched.',
+    variables: true,
+  },
+  {
+    label: 'Property Value',
+    key: 'propertyValue',
+    type: 'string' as const,
+    required: true,
+    description: 'Property value that will be matched.',
+    variables: true,
+  },
+];
+
+export default findArrayItemByProperty;

packages/backend/src/apps/hubspot/actions/create-contact/index.ts

@@ -0,0 +1,83 @@
+import defineAction from '../../../../helpers/define-action';
+
+export default defineAction({
+  name: 'Create contact',
+  key: 'createContact',
+  description: `Create contact on user's account.`,
+  arguments: [
+    {
+      label: 'Company name',
+      key: 'company',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+    {
+      label: 'Email',
+      key: 'email',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+    {
+      label: 'First name',
+      key: 'firstName',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+    {
+      label: 'Last name',
+      key: 'lastName',
+      type: 'string' as const,
+      required: false,
+      description: 'Last name',
+      variables: true,
+    },
+    {
+      label: 'Phone',
+      key: 'phone',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+    {
+      label: 'Website URL',
+      key: 'website',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+    {
+      label: 'Owner ID',
+      key: 'hubspotOwnerId',
+      type: 'string' as const,
+      required: false,
+      variables: true,
+    },
+  ],
+
+  async run($) {
+    const company = $.step.parameters.company as string;
+    const email = $.step.parameters.email as string;
+    const firstName = $.step.parameters.firstName as string;
+    const lastName = $.step.parameters.lastName as string;
+    const phone = $.step.parameters.phone as string;
+    const website = $.step.parameters.website as string;
+    const hubspotOwnerId = $.step.parameters.hubspotOwnerId as string;
+
+    const response = await $.http.post(`crm/v3/objects/contacts`, {
+      properties: {
+        company,
+        email,
+        firstname: firstName,
+        lastname: lastName,
+        phone,
+        website,
+        hubspot_owner_id: hubspotOwnerId,
+      },
+    });
+
+    $.setActionItem({ raw: response.data });
+  },
+});

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

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

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="27px" height="28px" viewBox="0 0 27 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#f95c35">
+            <path d="M19.614233,20.1771162 C17.5228041,20.1771162 15.8274241,18.4993457 15.8274241,16.4299995 C15.8274241,14.3602937 17.5228041,12.6825232 19.614233,12.6825232 C21.7056619,12.6825232 23.4010418,14.3602937 23.4010418,16.4299995 C23.4010418,18.4993457 21.7056619,20.1771162 19.614233,20.1771162 M20.7478775,9.21551429 L20.7478775,5.88190722 C21.6271788,5.47091457 22.243053,4.59067833 22.243053,3.56912967 L22.243053,3.49218091 C22.243053,2.08229273 21.0774338,0.928780545 19.6527478,0.928780545 L19.5753548,0.928780545 C18.1506688,0.928780545 16.9850496,2.08229273 16.9850496,3.49218091 L16.9850496,3.56912967 C16.9850496,4.59067833 17.6009238,5.47127414 18.4802251,5.88226679 L18.4802251,9.21551429 C17.1710836,9.4157968 15.9749432,9.95012321 14.9884545,10.7365107 L5.73944086,3.61659339 C5.80048326,3.3846684 5.84335828,3.14591151 5.84372163,2.89492912 C5.84517502,1.29842223 4.53930368,0.00215931486 2.92531356,1.87311107e-06 C1.31205014,-0.00179599501 0.00181863138,1.29087118 1.8932965e-06,2.88773765 C-0.00181484479,4.48460412 1.30405649,5.78086703 2.91804661,5.7826649 C3.44381061,5.78338405 3.93069642,5.63559929 4.35726652,5.39540411 L13.4551275,12.3995387 C12.6815604,13.5552084 12.2281026,14.9395668 12.2281026,16.4299995 C12.2281026,17.9901894 12.7262522,19.433518 13.5677653,20.6204705 L10.8012365,23.3586237 C10.5825013,23.2935408 10.3557723,23.2482346 10.1152362,23.2482346 C8.78938076,23.2482346 7.71423516,24.3118533 7.71423516,25.6239375 C7.71423516,26.9363812 8.78938076,28 10.1152362,28 C11.441455,28 12.5162373,26.9363812 12.5162373,25.6239375 C12.5162373,25.3866189 12.4704555,25.1618854 12.4046896,24.9454221 L15.1414238,22.2371135 C16.3837093,23.1752411 17.9308435,23.7390526 19.614233,23.7390526 C23.6935367,23.7390526 27,20.466573 27,16.4299995 C27,12.7756527 24.2872467,9.7566726 20.7478775,9.21551429"></path>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,20 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import { URLSearchParams } from 'url';
+import scopes from '../common/scopes';
+
+export default async function generateAuthUrl($: IGlobalVariable) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const callbackUrl = oauthRedirectUrlField.value as string;
+
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    redirect_uri: callbackUrl,
+    scope: scopes.join(' '),
+  });
+
+  const url = `https://app.hubspot.com/oauth/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({ url });
+}

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

@@ -0,0 +1,48 @@
+import generateAuthUrl from './generate-auth-url';
+import verifyCredentials from './verify-credentials';
+import isStillVerified from './is-still-verified';
+import refreshToken from './refresh-token';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string' as const,
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/hubspot/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input an OAuth callback or redirect URL in HubSpot OAuth, enter the URL above.',
+      clickToCopy: true,
+    },
+    {
+      key: 'clientId',
+      label: 'Client ID',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+    {
+      key: 'clientSecret',
+      label: 'Client Secret',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+  ],
+
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+  refreshToken,
+};

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

@@ -0,0 +1,10 @@
+import { IGlobalVariable } from '@automatisch/types';
+import getAccessTokenInfo from '../common/get-access-token-info';
+
+const isStillVerified = async ($: IGlobalVariable) => {
+  await getAccessTokenInfo($);
+
+  return true;
+};
+
+export default isStillVerified;

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

@@ -0,0 +1,28 @@
+import { IGlobalVariable, IField } from '@automatisch/types';
+import { URLSearchParams } from 'url';
+
+const refreshToken = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+
+  const callbackUrl = oauthRedirectUrlField.value as string;
+
+  const params = new URLSearchParams({
+    grant_type: 'refresh_token',
+    client_id: $.auth.data.clientId as string,
+    client_secret: $.auth.data.clientSecret as string,
+    redirect_uri: callbackUrl,
+    refresh_token: $.auth.data.refreshToken as string,
+  });
+
+  const { data } = await $.http.post('/oauth/v1/token', params.toString());
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    expiresIn: data.expires_in,
+    refreshToken: data.refresh_token,
+  });
+};
+
+export default refreshToken;

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

@@ -0,0 +1,52 @@
+import { IGlobalVariable, IField } from '@automatisch/types';
+import { URLSearchParams } from 'url';
+import getAccessTokenInfo from '../common/get-access-token-info';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const callbackUrl = oauthRedirectUrlField.value as string;
+  const params = new URLSearchParams({
+    grant_type: 'authorization_code',
+    client_id: $.auth.data.clientId as string,
+    client_secret: $.auth.data.clientSecret as string,
+    redirect_uri: callbackUrl,
+    code: $.auth.data.code as string,
+  });
+
+  const { data: verifiedCredentials } = await $.http.post(
+    '/oauth/v1/token',
+    params.toString()
+  );
+
+  const {
+    access_token: accessToken,
+    refresh_token: refreshToken,
+    expires_in: expiresIn,
+  } = verifiedCredentials;
+
+  await $.auth.set({
+    accessToken,
+    refreshToken,
+    expiresIn,
+  });
+
+  const accessTokenInfo = await getAccessTokenInfo($);
+
+  await $.auth.set({
+    screenName: accessTokenInfo.user,
+    hubDomain: accessTokenInfo.hub_domain,
+    scopes: accessTokenInfo.scopes,
+    scopeToScopeGroupPks: accessTokenInfo.scope_to_scope_group_pks,
+    trialScopes: accessTokenInfo.trial_scopes,
+    trialScopeToScoreGroupPks: accessTokenInfo.trial_scope_to_scope_group_pks,
+    hubId: accessTokenInfo.hub_id,
+    appId: accessTokenInfo.app_id,
+    userId: accessTokenInfo.user_id,
+    expiresIn: accessTokenInfo.expires_in,
+    tokenType: accessTokenInfo.token_type,
+  });
+};
+
+export default verifyCredentials;

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

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

packages/backend/src/apps/hubspot/common/get-access-token-info.ts

@@ -0,0 +1,11 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+const getAccessTokenInfo = async ($: IGlobalVariable): Promise<IJSONObject> => {
+  const response = await $.http.get(
+    `/oauth/v1/access-tokens/${$.auth.data.accessToken}`
+  );
+
+  return response.data;
+};
+
+export default getAccessTokenInfo;

packages/backend/src/apps/hubspot/common/scopes.ts

@@ -0,0 +1,3 @@
+const scopes = ['crm.objects.contacts.read', 'crm.objects.contacts.write'];
+
+export default scopes;

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

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

packages/backend/src/apps/wordpress/dynamic-data/list-statuses/index.ts

@@ -3,7 +3,7 @@ import { IGlobalVariable, IJSONObject } from '@automatisch/types';
 type Status = {
   slug: string;
   name: string;
-}
+};
 type Statuses = Record<string, Status>;
 
 export default {
@@ -29,7 +29,7 @@ export default {
       statuses.data.push({
         value: status.slug,
         name: status.name,
-      })
+      });
     }
 
     return statuses;

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

@@ -1,3 +1,5 @@
+import newComment from './new-comment';
+import newPage from './new-page';
 import newPost from './new-post';
 
-export default [newPost];
+export default [newComment, newPage, newPost];

packages/backend/src/apps/wordpress/triggers/new-comment/index.ts

@@ -0,0 +1,58 @@
+import defineTrigger from '../../../../helpers/define-trigger';
+
+export default defineTrigger({
+  name: 'New comment',
+  key: 'newComment',
+  description: 'Triggers when a new comment is created.',
+  arguments: [
+    {
+      label: 'Status',
+      key: 'status',
+      type: 'dropdown' as const,
+      required: true,
+      variables: true,
+      options: [
+        { label: 'Approve', value: 'approve' },
+        { label: 'Unapprove', value: 'hold' },
+        { label: 'Spam', value: 'spam' },
+        { label: 'Trash', value: 'trash' },
+      ],
+    },
+  ],
+
+  async run($) {
+    const params = {
+      per_page: 100,
+      page: 1,
+      order: 'desc',
+      orderby: 'date',
+      status: $.step.parameters.status || '',
+    };
+
+    let totalPages = 1;
+    do {
+      const { data, headers } = await $.http.get(
+        '?rest_route=/wp/v2/comments',
+        {
+          params,
+        }
+      );
+
+      params.page = params.page + 1;
+      totalPages = Number(headers['x-wp-totalpages']);
+
+      if (data.length) {
+        for (const page of data) {
+          const dataItem = {
+            raw: page,
+            meta: {
+              internalId: page.id.toString(),
+            },
+          };
+
+          $.pushTriggerItem(dataItem);
+        }
+      }
+    } while (params.page <= totalPages);
+  },
+});

packages/backend/src/apps/wordpress/triggers/new-page/index.ts

@@ -0,0 +1,59 @@
+import defineTrigger from '../../../../helpers/define-trigger';
+
+export default defineTrigger({
+  name: 'New page',
+  key: 'newPage',
+  description: 'Triggers when a new page is created.',
+  arguments: [
+    {
+      label: 'Status',
+      key: 'status',
+      type: 'dropdown' as const,
+      required: true,
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listStatuses',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const params = {
+      per_page: 100,
+      page: 1,
+      order: 'desc',
+      orderby: 'date',
+      status: $.step.parameters.status || '',
+    };
+
+    let totalPages = 1;
+    do {
+      const { data, headers } = await $.http.get('?rest_route=/wp/v2/pages', {
+        params,
+      });
+
+      params.page = params.page + 1;
+      totalPages = Number(headers['x-wp-totalpages']);
+
+      if (data.length) {
+        for (const page of data) {
+          const dataItem = {
+            raw: page,
+            meta: {
+              internalId: page.id.toString(),
+            },
+          };
+
+          $.pushTriggerItem(dataItem);
+        }
+      }
+    } while (params.page <= totalPages);
+  },
+});

packages/backend/src/config/app.ts

@@ -1,6 +1,12 @@
 import { URL } from 'node:url';
 import * as dotenv from 'dotenv';
-dotenv.config();
+import path from 'path';
+
+if (process.env.APP_ENV === 'test') {
+  dotenv.config({ path: path.resolve(__dirname, '../../.env.test') });
+} else {
+  dotenv.config();
+}
 
 type AppConfig = {
   host: string;

packages/backend/src/graphql/mutations/upsert-saml-auth-providers-role-mappings.ee.ts

@@ -1,6 +1,7 @@
 import SamlAuthProvider from '../../models/saml-auth-provider.ee';
 import SamlAuthProvidersRoleMapping from '../../models/saml-auth-providers-role-mapping.ee';
 import Context from '../../types/express/context';
+import isEmpty from 'lodash/isEmpty';
 
 type Params = {
   input: {
@@ -31,7 +32,7 @@ const upsertSamlAuthProvidersRoleMappings = async (
     .$relatedQuery('samlAuthProvidersRoleMappings')
     .delete();
 
-  if (!params.input.samlAuthProvidersRoleMappings) {
+  if (isEmpty(params.input.samlAuthProvidersRoleMappings)) {
     return [];
   }
 

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

@@ -0,0 +1,8 @@
+import test from 'ava';
+
+const fn = () => 'foo';
+
+test('getUser graphQL query', (t) => {
+  // TODO: Write a test for getUser graphQL query
+  t.is(fn(), 'foo');
+});

packages/backend/test/sample.ts

@@ -1,7 +0,0 @@
-import test from 'ava';
-
-const fn = () => 'foo';
-
-test('fn() returns foo', (t) => {
-  t.is(fn(), 'foo');
-});

packages/backend/test/setup/check-env-file.ts

@@ -0,0 +1,10 @@
+import path from 'path';
+import fs from 'fs';
+
+const testEnvFile = path.resolve(__dirname, '../../.env.test');
+
+if (!fs.existsSync(testEnvFile)) {
+  throw new Error(
+    'Test environment file (.env.test) not found! You can copy .env-example.test to .env.test and fill it with your own values.'
+  );
+}

packages/backend/test/setup/create-database.ts

@@ -0,0 +1,11 @@
+import { createDatabaseAndUser } from '../../bin/database/utils';
+import logger from '../../src/helpers/logger';
+
+createDatabaseAndUser()
+  .then(() => {
+    process.exit(0);
+  })
+  .catch((error) => {
+    logger.error(error);
+    process.exit(1);
+  });

packages/backend/test/setup/prepare-test-env.ts

@@ -0,0 +1,2 @@
+import './check-env-file';
+import './create-database';

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

@@ -151,6 +151,15 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/http-request/connection' },
           ],
         },
+        {
+          text: 'HubSpot',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Actions', link: '/apps/hubspot/actions' },
+            { text: 'Connection', link: '/apps/hubspot/connection' },
+          ],
+        },
         {
           text: 'Mattermost',
           collapsible: true,

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

@@ -3,6 +3,10 @@ favicon: /favicons/formatter.svg
 items:
   - name: Text
     desc: Transform text data to capitalize, extract emails, apply default value, and much more.
+  - name: Numbers
+    desc: Transform numbers to perform math operations, generate random numbers, format numbers, and much more.
+  - name: Date / Time
+    desc: Perform date and time related transformations on your data.
 ---
 
 <script setup>

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

@@ -7,5 +7,20 @@ Formatter is a built-in app shipped with Automatisch, and it doesn't need to tal
 - Capitalize
 - Convert HTML to Markdown
 - Convert Markdown to HTML
-- Use Default Value
 - Extract Email Address
+- Extract Number
+- Lowercase
+- Pluralize
+- Replace
+- Trim Whitespace
+- Use Default Value
+
+## Numbers
+
+- Perform Math Operation
+- Random Number
+- Format Number
+
+## Date / Time
+
+- Format Date / Time

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

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/hubspot.svg
+items:
+  - name: Create a contact
+    desc: Create a contact on user's account.
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

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

@@ -0,0 +1,22 @@
+# HubSpot
+
+:::info
+This page explains the steps you need to follow to set up the Hubspot connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [HubSpot Developer page](https://developers.hubspot.com/).
+2. Login into your developer account.
+3. Click on the **Manage apps** button.
+4. Click on the **Create app** button.
+5. Fill the **Public app name** field with the name of your API app.
+6. Go to the **Auth** tab.
+7. Fill the **Redirect URL(s)** field with the OAuth Redirect URL from the Automatisch connection creation page.
+8. Go to the **Scopes** tab.
+9. Select the scopes you want to use with Automatisch.
+10. Click on the **Create App** button.
+11. Go back to the **Auth** tab.
+12. Copy the **Client ID** and **Client Secret** values.
+13. Paste the **Client ID** value into Automatisch as **Client ID**, respectively.
+14. Paste the **Client Secret** value into Automatisch as **Client Secret**, respectively.
+15. Click the **Submit** button on Automatisch.
+16. Now, you can start using the HubSpot connection with Automatisch.

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

@@ -1,6 +1,10 @@
 ---
 favicon: /favicons/wordpress.svg
 items:
+  - name: New comment
+    desc: Triggers when a new comment is created.
+  - name: New page
+    desc: Triggers when a new page is created.
   - name: New post
     desc: Triggers when a new post is created.
 ---

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

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

packages/docs/pages/guide/installation.md

@@ -29,6 +29,20 @@ docker compose up
 
 ✌️ That's it; you have Automatisch running. Let's check it out by browsing [http://localhost:3000](https://localhost:3000)
 
+### Upgrade with Docker Compose
+
+If you want to upgrade the Automatisch version with docker compose, first you need to pull the main branch of Automatisch repository.
+
+```bash
+git pull origin main
+```
+
+Then you can run the following command to rebuild the containers with the new images.
+
+```bash
+docker compose up --force-recreate --build
+```
+
 ## Docker
 
 Automatisch comes with two services which are `main` and `worker`. They both use the same image and need to have the same environment variables except for the `WORKER` environment variable which is set to `true` for the worker service.

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="27px" height="28px" viewBox="0 0 27 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill="#f95c35">
+            <path d="M19.614233,20.1771162 C17.5228041,20.1771162 15.8274241,18.4993457 15.8274241,16.4299995 C15.8274241,14.3602937 17.5228041,12.6825232 19.614233,12.6825232 C21.7056619,12.6825232 23.4010418,14.3602937 23.4010418,16.4299995 C23.4010418,18.4993457 21.7056619,20.1771162 19.614233,20.1771162 M20.7478775,9.21551429 L20.7478775,5.88190722 C21.6271788,5.47091457 22.243053,4.59067833 22.243053,3.56912967 L22.243053,3.49218091 C22.243053,2.08229273 21.0774338,0.928780545 19.6527478,0.928780545 L19.5753548,0.928780545 C18.1506688,0.928780545 16.9850496,2.08229273 16.9850496,3.49218091 L16.9850496,3.56912967 C16.9850496,4.59067833 17.6009238,5.47127414 18.4802251,5.88226679 L18.4802251,9.21551429 C17.1710836,9.4157968 15.9749432,9.95012321 14.9884545,10.7365107 L5.73944086,3.61659339 C5.80048326,3.3846684 5.84335828,3.14591151 5.84372163,2.89492912 C5.84517502,1.29842223 4.53930368,0.00215931486 2.92531356,1.87311107e-06 C1.31205014,-0.00179599501 0.00181863138,1.29087118 1.8932965e-06,2.88773765 C-0.00181484479,4.48460412 1.30405649,5.78086703 2.91804661,5.7826649 C3.44381061,5.78338405 3.93069642,5.63559929 4.35726652,5.39540411 L13.4551275,12.3995387 C12.6815604,13.5552084 12.2281026,14.9395668 12.2281026,16.4299995 C12.2281026,17.9901894 12.7262522,19.433518 13.5677653,20.6204705 L10.8012365,23.3586237 C10.5825013,23.2935408 10.3557723,23.2482346 10.1152362,23.2482346 C8.78938076,23.2482346 7.71423516,24.3118533 7.71423516,25.6239375 C7.71423516,26.9363812 8.78938076,28 10.1152362,28 C11.441455,28 12.5162373,26.9363812 12.5162373,25.6239375 C12.5162373,25.3866189 12.4704555,25.1618854 12.4046896,24.9454221 L15.1414238,22.2371135 C16.3837093,23.1752411 17.9308435,23.7390526 19.614233,23.7390526 C23.6935367,23.7390526 27,20.466573 27,16.4299995 C27,12.7756527 24.2872467,9.7566726 20.7478775,9.21551429"></path>
+        </g>
+    </g>
+</svg>

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

@@ -1,7 +1,7 @@
 // @ts-check
 const { test, expect } = require('../../fixtures/index');
 
-test.describe.skip('User interface page', () => {
+test.describe('User interface page', () => {
   test.beforeEach(async ({ userInterfacePage }) => {
     await userInterfacePage.profileMenuButton.click();
     await userInterfacePage.adminMenuItem.click();
@@ -43,16 +43,6 @@ test.describe.skip('User interface page', () => {
         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(
@@ -90,44 +80,6 @@ test.describe.skip('User interface page', () => {
     }
   );
 
-  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');
@@ -147,14 +99,15 @@ test.describe.skip('User interface page', () => {
       });
     });
 
-    test('fill primary light color', async ({ userInterfacePage }) => {
+    test.skip('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.flowRowCardActionArea.waitFor({
+        state: 'visible',
+      });
+      await userInterfacePage.flowRowCardActionArea.hover();
       await userInterfacePage.screenshot({
         path: 'updated primary light color.png',
       });
@@ -173,4 +126,45 @@ test.describe.skip('User interface page', () => {
       });
     });
   });
+
+  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();
+        await userInterfacePage.snackbar.waitFor({ state: 'visible' });
+        const rgbColor = userInterfacePage.hexToRgb('#00adef');
+        const button = await userInterfacePage.primaryMainColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
+      });
+
+      test('update primary dark color and check color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryDarkColorInput.fill('#222222');
+        await userInterfacePage.updateButton.click();
+        await userInterfacePage.snackbar.waitFor({ state: 'visible' });
+        const rgbColor = userInterfacePage.hexToRgb('#222222');
+        const button = await userInterfacePage.primaryDarkColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
+      });
+
+      test('update primary light color and check color input', async ({
+        userInterfacePage,
+      }) => {
+        await userInterfacePage.primaryLightColorInput.fill('#f90707');
+        await userInterfacePage.updateButton.click();
+        await userInterfacePage.snackbar.waitFor({ state: 'visible' });
+        const rgbColor = userInterfacePage.hexToRgb('#f90707');
+        const button = await userInterfacePage.primaryLightColorButton;
+        const styleAttribute = await button.getAttribute('style');
+        expect(styleAttribute).toEqual(`background-color: ${rgbColor};`);
+      });
+    }
+  );
 });

packages/types/index.d.ts

@@ -430,6 +430,13 @@ type TSamlAuthProvider = {
   loginUrl: string;
 };
 
+type TSamlAuthProviderRole = {
+  id: string;
+  samlAuthProviderId: string;
+  roleId: string;
+  remoteRoleName: string;
+};
+
 type AppConfig = {
   id: string;
   key: string;
@@ -453,7 +460,7 @@ type Notification = {
   createdAt: string;
   documentationUrl: string;
   description: string;
-}
+};
 
 declare module 'axios' {
   interface AxiosResponse {

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

@@ -4,9 +4,12 @@ import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
 
 type ControlledCheckboxProps = {
   name: string;
-} & CheckboxProps;
+  defaultValue?: boolean;
+} & Omit<CheckboxProps, 'defaultValue'>;
 
-export default function ControlledCheckbox(props: ControlledCheckboxProps): React.ReactElement {
+export default function ControlledCheckbox(
+  props: ControlledCheckboxProps
+): React.ReactElement {
   const { control } = useFormContext();
   const {
     required,
@@ -34,24 +37,25 @@ export default function ControlledCheckbox(props: ControlledCheckboxProps): Reac
           ...field
         },
       }) => {
-       return (
-        <Checkbox
-          {...checkboxProps}
-          {...field}
-          checked={!!value}
-          name={name}
-          disabled={disabled}
-          onChange={(...args) => {
-            controllerOnChange(...args);
-            onChange?.(...args);
-          }}
-          onBlur={(...args) => {
-            controllerOnBlur();
-            onBlur?.(...args);
-          }}
-          inputRef={ref}
-        />
-      )}}
+        return (
+          <Checkbox
+            {...checkboxProps}
+            {...field}
+            checked={!!value}
+            name={name}
+            disabled={disabled}
+            onChange={(...args) => {
+              controllerOnChange(...args);
+              onChange?.(...args);
+            }}
+            onBlur={(...args) => {
+              controllerOnBlur();
+              onBlur?.(...args);
+            }}
+            inputRef={ref}
+          />
+        );
+      }}
     />
   );
 }

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import useConfig from 'hooks/useConfig';
+
+type MetadataProviderProps = {
+  children: React.ReactNode;
+};
+
+const MetadataProvider = ({
+  children,
+}: MetadataProviderProps): React.ReactElement => {
+  const { config } = useConfig();
+
+  React.useEffect(() => {
+    document.title = (config?.title as string) || 'Automatisch';
+  }, [config?.title]);
+
+  return <>{children}</>;
+};
+
+export default MetadataProvider;

packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.tsx

@@ -22,17 +22,21 @@ type PermissionSettingsProps = {
   onClose: () => void;
   fieldPrefix: string;
   subject: string;
+  open?: boolean;
+  defaultChecked?: boolean;
   actions: IPermissionCatalog['actions'];
   conditions: IPermissionCatalog['conditions'];
-}
+};
 
 export default function PermissionSettings(props: PermissionSettingsProps) {
   const {
     onClose,
+    open = false,
     fieldPrefix,
     subject,
     actions,
     conditions,
+    defaultChecked,
   } = props;
 
   const formatMessage = useFormatMessage();
@@ -47,7 +51,7 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
     }
 
     onClose();
-  }
+  };
 
   const apply = () => {
     for (const action of actions) {
@@ -59,13 +63,11 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
     }
 
     onClose();
-  }
+  };
 
   return (
-    <Dialog open onClose={cancel}>
-      <DialogTitle>
-        {formatMessage('permissionSettings.title')}
-      </DialogTitle>
+    <Dialog open onClose={cancel} sx={{ display: open ? 'block' : 'none' }}>
+      <DialogTitle>{formatMessage('permissionSettings.title')}</DialogTitle>
 
       <DialogContent>
         <TableContainer component={Paper}>
@@ -74,14 +76,14 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
               <TableRow>
                 <TableCell component="th" />
 
-                {actions.map(action => (
+                {actions.map((action) => (
                   <TableCell component="th" key={action.key}>
                     <Typography
                       variant="subtitle1"
                       align="center"
                       sx={{
                         color: 'text.secondary',
-                        fontWeight: 700
+                        fontWeight: 700,
                       }}
                     >
                       {action.label}
@@ -97,9 +99,7 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
                   sx={{ '&:last-child td': { border: 0 } }}
                 >
                   <TableCell scope="row">
-                    <Typography
-                      variant="subtitle2"
-                    >
+                    <Typography variant="subtitle2">
                       {condition.label}
                     </Typography>
                   </TableCell>
@@ -109,13 +109,16 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
                       key={`${action.key}.${condition.key}`}
                       align="center"
                     >
-                      <Typography
-                        variant="subtitle2"
-                      >
+                      <Typography variant="subtitle2">
                         {action.subjects.includes(subject) && (
                           <ControlledCheckbox
                             name={`${fieldPrefix}.${action.key}.conditions.${condition.key}`}
-                            disabled={getValues(`${fieldPrefix}.${action.key}.value`) !== true}
+                            defaultValue={defaultChecked}
+                            disabled={
+                              getValues(
+                                `${fieldPrefix}.${action.key}.value`
+                              ) !== true
+                            }
                           />
                         )}
 
@@ -131,12 +134,14 @@ export default function PermissionSettings(props: PermissionSettingsProps) {
       </DialogContent>
 
       <DialogActions>
-        <Button onClick={cancel}>{formatMessage('permissionSettings.cancel')}</Button>
+        <Button onClick={cancel}>
+          {formatMessage('permissionSettings.cancel')}
+        </Button>
 
         <Button onClick={apply} color="error">
           {formatMessage('permissionSettings.apply')}
         </Button>
       </DialogActions>
     </Dialog>
-  )
-}
+  );
+}

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

@@ -19,11 +19,13 @@ import PermissionCatalogFieldLoader from './PermissionCatalogFieldLoader';
 type PermissionCatalogFieldProps = {
   name?: string;
   disabled?: boolean;
+  defaultChecked?: boolean;
 };
 
 const PermissionCatalogField = ({
   name = 'permissions',
   disabled = false,
+  defaultChecked = false,
 }: PermissionCatalogFieldProps) => {
   const { permissionCatalog, loading } = usePermissionCatalog();
   const [dialogName, setDialogName] = React.useState<string>();
@@ -91,15 +93,15 @@ const PermissionCatalogField = ({
                     <SettingsIcon />
                   </IconButton>
 
-                  {dialogName === subject.key && (
-                    <PermissionSettings
-                      onClose={() => setDialogName('')}
-                      fieldPrefix={`${name}.${subject.key}`}
-                      subject={subject.key}
-                      actions={permissionCatalog.actions}
-                      conditions={permissionCatalog.conditions}
-                    />
-                  )}
+                  <PermissionSettings
+                    open={dialogName === subject.key}
+                    onClose={() => setDialogName('')}
+                    fieldPrefix={`${name}.${subject.key}`}
+                    subject={subject.key}
+                    actions={permissionCatalog.actions}
+                    conditions={permissionCatalog.conditions}
+                    defaultChecked={defaultChecked}
+                  />
                 </Stack>
               </TableCell>
             </TableRow>

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

@@ -4,7 +4,6 @@ import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
 
-import * as URLS from 'config/urls';
 import useSamlAuthProviders from 'hooks/useSamlAuthProviders.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 

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

@@ -1,5 +1,6 @@
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider as BaseThemeProvider } from '@mui/material/styles';
+import clone from 'lodash/clone';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import * as React from 'react';
@@ -13,16 +14,19 @@ type ThemeProviderProps = {
 };
 
 const customizeTheme = (defaultTheme: typeof theme, config: IJSONObject) => {
+  // `clone` is needed so that the new theme reference triggers re-render
+  const shallowDefaultTheme = clone(defaultTheme);
+
   for (const key in config) {
     const value = config[key];
     const exists = get(defaultTheme, key);
 
     if (exists) {
-      set(defaultTheme, key, value);
+      set(shallowDefaultTheme, key, value);
     }
   }
 
-  return defaultTheme;
+  return shallowDefaultTheme;
 };
 
 const ThemeProvider = ({

packages/web/src/graphql/mutations/upsert-saml-auth-providers-role-mappings.ts

@@ -0,0 +1,14 @@
+import { gql } from '@apollo/client';
+
+export const UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS = gql`
+  mutation UpsertSamlAuthProvidersRoleMappings(
+    $input: UpsertSamlAuthProvidersRoleMappingsInput
+  ) {
+    upsertSamlAuthProvidersRoleMappings(input: $input) {
+      id
+      samlAuthProviderId
+      roleId
+      remoteRoleName
+    }
+  }
+`;

packages/web/src/graphql/queries/get-dynamic-fields.ts

@@ -13,10 +13,58 @@ export const GET_DYNAMIC_FIELDS = gql`
       required
       description
       variables
+      dependsOn
+      value
       options {
         label
         value
       }
+      source {
+        type
+        name
+        arguments {
+          name
+          value
+        }
+      }
+      additionalFields {
+        type
+        name
+        arguments {
+          name
+          value
+        }
+      }
+      fields {
+        label
+        key
+        type
+        required
+        description
+        variables
+        value
+        dependsOn
+        options {
+          label
+          value
+        }
+        source {
+          type
+          name
+          arguments {
+            name
+            value
+          }
+        }
+        additionalFields {
+          type
+          name
+          arguments {
+            name
+            value
+          }
+        }
+      }
     }
   }
 `;

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

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client';
+
+export const GET_SAML_AUTH_PROVIDER_ROLE_MAPPINGS = gql`
+  query GetSamlAuthProviderRoleMappings($id: String!) {
+    getSamlAuthProviderRoleMappings(id: $id) {
+      id
+      samlAuthProviderId
+      roleId
+      remoteRoleName
+    }
+  }
+`;

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

@@ -3,6 +3,7 @@ import { gql } from '@apollo/client';
 export const GET_SAML_AUTH_PROVIDER = gql`
   query GetSamlAuthProvider {
     getSamlAuthProvider {
+      id
       name
       certificate
       signatureAlgorithm

packages/web/src/hooks/useSamlAuthProvider.ts

@@ -1,20 +1,22 @@
-import { useQuery } from '@apollo/client';
+import { QueryResult, useQuery } from '@apollo/client';
 
 import { TSamlAuthProvider } from '@automatisch/types';
 import { GET_SAML_AUTH_PROVIDER } from 'graphql/queries/get-saml-auth-provider';
 
 type UseSamlAuthProviderReturn = {
-  provider: TSamlAuthProvider;
+  provider?: TSamlAuthProvider;
   loading: boolean;
+  refetch: QueryResult<TSamlAuthProvider | undefined>['refetch'];
 };
 
 export default function useSamlAuthProvider(): UseSamlAuthProviderReturn {
-  const { data, loading } = useQuery(GET_SAML_AUTH_PROVIDER, {
+  const { data, loading, refetch } = useQuery(GET_SAML_AUTH_PROVIDER, {
     context: { autoSnackbar: false },
   });
 
   return {
     provider: data?.getSamlAuthProvider,
     loading,
+    refetch,
   };
 }

packages/web/src/hooks/useSamlAuthProviderRoleMappings.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useLazyQuery } from '@apollo/client';
+import { TSamlAuthProviderRole } from '@automatisch/types';
+
+import { GET_SAML_AUTH_PROVIDER_ROLE_MAPPINGS } from 'graphql/queries/get-saml-auth-provider-role-mappings';
+
+type QueryResponse = {
+  getSamlAuthProviderRoleMappings: TSamlAuthProviderRole[];
+};
+
+export default function useSamlAuthProviderRoleMappings(providerId?: string) {
+  const [getSamlAuthProviderRoleMappings, { data, loading }] =
+    useLazyQuery<QueryResponse>(GET_SAML_AUTH_PROVIDER_ROLE_MAPPINGS);
+
+  React.useEffect(() => {
+    if (providerId) {
+      getSamlAuthProviderRoleMappings({
+        variables: {
+          id: providerId,
+        },
+      });
+    }
+  }, [providerId]);
+
+  return {
+    roleMappings: data?.getSamlAuthProviderRoleMappings || [],
+    loading,
+  };
+}

packages/web/src/index.tsx

@@ -4,6 +4,7 @@ import ThemeProvider from 'components/ThemeProvider';
 import IntlProvider from 'components/IntlProvider';
 import ApolloProvider from 'components/ApolloProvider';
 import SnackbarProvider from 'components/SnackbarProvider';
+import MetadataProvider from 'components/MetadataProvider';
 import { AuthenticationProvider } from 'contexts/Authentication';
 import { AutomatischInfoProvider } from 'contexts/AutomatischInfo';
 import Router from 'components/Router';
@@ -19,9 +20,11 @@ ReactDOM.render(
           <AutomatischInfoProvider>
             <IntlProvider>
               <ThemeProvider>
-                {routes}
+                <MetadataProvider>
+                  {routes}
 
-                <LiveChat />
+                  <LiveChat />
+                </MetadataProvider>
               </ThemeProvider>
             </IntlProvider>
           </AutomatischInfoProvider>

packages/web/src/locales/en.json

@@ -220,10 +220,11 @@
   "appAuthClientsDialog.title": "Choose your authentication client",
   "userInterfacePage.title": "User Interface",
   "userInterfacePage.successfullyUpdated": "User interface has been updated.",
-  "userInterfacePage.mainColor": "Primary main color",
-  "userInterfacePage.darkColor": "Primary dark color",
-  "userInterfacePage.lightColor": "Primary light color",
-  "userInterfacePage.svgData": "Logo SVG code",
+  "userInterfacePage.titleFieldLabel": "Title",
+  "userInterfacePage.primaryMainColorFieldLabel": "Primary main color",
+  "userInterfacePage.primaryDarkColorFieldLabel": "Primary dark color",
+  "userInterfacePage.primaryLightColorFieldLabel": "Primary light color",
+  "userInterfacePage.svgDataFieldLabel": "Logo SVG code",
   "userInterfacePage.submit": "Update",
   "authenticationPage.title": "Single Sign-On with SAML",
   "authenticationForm.active": "Active",
@@ -238,5 +239,12 @@
   "authenticationForm.roleAttributeName": "Role attribute name",
   "authenticationForm.defaultRole": "Default role",
   "authenticationForm.successfullySaved": "The provider has been saved.",
-  "authenticationForm.save": "Save"
+  "authenticationForm.save": "Save",
+  "roleMappingsForm.title": "Role mappings",
+  "roleMappingsForm.remoteRoleName": "Remote role name",
+  "roleMappingsForm.role": "Role",
+  "roleMappingsForm.appendRoleMapping": "Append",
+  "roleMappingsForm.save": "Save",
+  "roleMappingsForm.notFound": "No role mappings have found.",
+  "roleMappingsForm.successfullySaved": "Role mappings have been saved."
 }

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

@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+import Stack from '@mui/material/Stack';
+import { TSamlAuthProvider, TSamlAuthProviderRole } from '@automatisch/types';
+import Typography from '@mui/material/Typography';
+import LoadingButton from '@mui/lab/LoadingButton';
+import Divider from '@mui/material/Divider';
+import { useMutation } from '@apollo/client';
+import { useSnackbar } from 'notistack';
+
+import { UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS } from 'graphql/mutations/upsert-saml-auth-providers-role-mappings';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useSamlAuthProviderRoleMappings from 'hooks/useSamlAuthProviderRoleMappings';
+import Form from 'components/Form';
+
+import RoleMappingsFieldArray from './RoleMappingsFieldsArray';
+
+type RoleMappingsProps = {
+  provider?: TSamlAuthProvider;
+  providerLoading: boolean;
+};
+
+function generateFormRoleMappings(roleMappings: TSamlAuthProviderRole[]) {
+  if (roleMappings.length === 0) {
+    return [{ roleId: '', remoteRoleName: '' }];
+  }
+
+  return roleMappings.map(({ roleId, remoteRoleName }) => ({
+    roleId,
+    remoteRoleName,
+  }));
+}
+
+function RoleMappings({ provider, providerLoading }: RoleMappingsProps) {
+  const formatMessage = useFormatMessage();
+  const { enqueueSnackbar } = useSnackbar();
+  const { roleMappings, loading: roleMappingsLoading } =
+    useSamlAuthProviderRoleMappings(provider?.id);
+  const [
+    upsertSamlAuthProvidersRoleMappings,
+    { loading: upsertRoleMappingsLoading },
+  ] = useMutation(UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS);
+
+  const handleRoleMappingsUpdate = async (values: any) => {
+    try {
+      if (provider?.id) {
+        await upsertSamlAuthProvidersRoleMappings({
+          variables: {
+            input: {
+              samlAuthProviderId: provider.id,
+              samlAuthProvidersRoleMappings: values.roleMappings.map(
+                ({
+                  roleId,
+                  remoteRoleName,
+                }: {
+                  roleId: string;
+                  remoteRoleName: string;
+                }) => ({
+                  roleId,
+                  remoteRoleName,
+                })
+              ),
+            },
+          },
+        });
+        enqueueSnackbar(formatMessage('roleMappingsForm.successfullySaved'), {
+          variant: 'success',
+        });
+      }
+    } catch (error) {
+      throw new Error('Failed while saving!');
+    }
+  };
+
+  const defaultValues = useMemo(
+    () => ({
+      roleMappings: generateFormRoleMappings(roleMappings),
+    }),
+    [roleMappings]
+  );
+
+  if (providerLoading || !provider?.id || roleMappingsLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      <Divider sx={{ pt: 2 }} />
+      <Typography variant="h3">
+        {formatMessage('roleMappingsForm.title')}
+      </Typography>
+      <Form defaultValues={defaultValues} onSubmit={handleRoleMappingsUpdate}>
+        <Stack direction="column" spacing={2}>
+          <RoleMappingsFieldArray />
+          <LoadingButton
+            type="submit"
+            variant="contained"
+            color="primary"
+            sx={{ boxShadow: 2 }}
+            loading={upsertRoleMappingsLoading}
+          >
+            {formatMessage('roleMappingsForm.save')}
+          </LoadingButton>
+        </Stack>
+      </Form>
+    </>
+  );
+}
+
+export default RoleMappings;

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

@@ -0,0 +1,93 @@
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { IRole } from '@automatisch/types';
+import MuiTextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import DeleteIcon from '@mui/icons-material/Delete';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+
+import useRoles from 'hooks/useRoles.ee';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import TextField from 'components/TextField';
+import { Divider, Typography } from '@mui/material';
+
+function generateRoleOptions(roles: IRole[]) {
+  return roles?.map(({ name: label, id: value }) => ({ label, value }));
+}
+
+function RoleMappingsFieldArray() {
+  const formatMessage = useFormatMessage();
+  const { control } = useFormContext();
+  const { roles, loading: rolesLoading } = useRoles();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'roleMappings',
+  });
+
+  const handleAppendMapping = () => append({ roleId: '', remoteRoleName: '' });
+  const handleRemoveMapping = (index: number) => () => remove(index);
+  return (
+    <>
+      {fields.length === 0 && (
+        <Typography>{formatMessage('roleMappingsForm.notFound')}</Typography>
+      )}
+      {fields.map((field, index) => (
+        <div key={field.id}>
+          <Stack
+            direction="row"
+            spacing={2}
+            alignItems="flex-start"
+            pb={1.5}
+            pt={0.5}
+          >
+            <Stack
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              alignItems="stretch"
+              sx={{ flex: 1 }}
+            >
+              <TextField
+                name={`roleMappings.${index}.remoteRoleName`}
+                label={formatMessage('roleMappingsForm.remoteRoleName')}
+                fullWidth
+                required
+              />
+              <ControlledAutocomplete
+                name={`roleMappings.${index}.roleId`}
+                fullWidth
+                disablePortal
+                disableClearable
+                options={generateRoleOptions(roles)}
+                renderInput={(params) => (
+                  <MuiTextField
+                    {...params}
+                    label={formatMessage('roleMappingsForm.role')}
+                  />
+                )}
+                loading={rolesLoading}
+                required
+              />
+            </Stack>
+            <IconButton
+              aria-label="delete"
+              color="primary"
+              size="large"
+              sx={{ alignSelf: 'flex-start' }}
+              onClick={handleRemoveMapping(index)}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Stack>
+          {index < fields.length - 1 && <Divider />}
+        </div>
+      ))}
+      <Button fullWidth onClick={handleAppendMapping}>
+        {formatMessage('roleMappingsForm.appendRoleMapping')}
+      </Button>
+    </>
+  );
+}
+
+export default RoleMappingsFieldArray;

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

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import MuiTextField from '@mui/material/TextField';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { IRole } from '@automatisch/types';
+import { useSnackbar } from 'notistack';
+import { TSamlAuthProvider } from '@automatisch/types';
+import { QueryResult, useMutation } from '@apollo/client';
+
+import Form from 'components/Form';
+import TextField from 'components/TextField';
+import ControlledAutocomplete from 'components/ControlledAutocomplete';
+import Switch from 'components/Switch';
+
+import { UPSERT_SAML_AUTH_PROVIDER } from 'graphql/mutations/upsert-saml-auth-provider';
+import useFormatMessage from 'hooks/useFormatMessage';
+import useRoles from 'hooks/useRoles.ee';
+
+type SamlConfigurationProps = {
+  provider?: TSamlAuthProvider;
+  providerLoading: boolean;
+  refetchProvider: QueryResult<TSamlAuthProvider | undefined>['refetch'];
+};
+
+const defaultValues = {
+  active: false,
+  name: '',
+  certificate: '',
+  signatureAlgorithm: 'sha1',
+  issuer: '',
+  entryPoint: '',
+  firstnameAttributeName: '',
+  surnameAttributeName: '',
+  emailAttributeName: '',
+  roleAttributeName: '',
+  defaultRoleId: '',
+};
+
+function generateRoleOptions(roles: IRole[]) {
+  return roles?.map(({ name: label, id: value }) => ({ label, value }));
+}
+
+function SamlConfiguration({
+  provider,
+  providerLoading,
+  refetchProvider,
+}: SamlConfigurationProps) {
+  const formatMessage = useFormatMessage();
+  const { roles, loading: rolesLoading } = useRoles();
+  const { enqueueSnackbar } = useSnackbar();
+  const [upsertSamlAuthProvider, { loading }] = useMutation(
+    UPSERT_SAML_AUTH_PROVIDER
+  );
+
+  const handleProviderUpdate = async (
+    providerDataToUpdate: Partial<TSamlAuthProvider>
+  ) => {
+    try {
+      const {
+        name,
+        certificate,
+        signatureAlgorithm,
+        issuer,
+        entryPoint,
+        firstnameAttributeName,
+        surnameAttributeName,
+        emailAttributeName,
+        roleAttributeName,
+        active,
+        defaultRoleId,
+      } = providerDataToUpdate;
+
+      await upsertSamlAuthProvider({
+        variables: {
+          input: {
+            name,
+            certificate,
+            signatureAlgorithm,
+            issuer,
+            entryPoint,
+            firstnameAttributeName,
+            surnameAttributeName,
+            emailAttributeName,
+            roleAttributeName,
+            active,
+            defaultRoleId,
+          },
+        },
+      });
+
+      if (!provider?.id) {
+        await refetchProvider();
+      }
+
+      enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
+        variant: 'success',
+      });
+    } catch (error) {
+      throw new Error('Failed while saving!');
+    }
+  };
+
+  if (providerLoading) {
+    return null;
+  }
+
+  return (
+    <Form
+      defaultValues={provider || defaultValues}
+      onSubmit={handleProviderUpdate}
+    >
+      <Stack direction="column" gap={2}>
+        <Switch
+          name="active"
+          label={formatMessage('authenticationForm.active')}
+        />
+        <TextField
+          required={true}
+          name="name"
+          label={formatMessage('authenticationForm.name')}
+          fullWidth
+        />
+        <TextField
+          required={true}
+          name="certificate"
+          label={formatMessage('authenticationForm.certificate')}
+          fullWidth
+          multiline
+        />
+        <ControlledAutocomplete
+          name="signatureAlgorithm"
+          fullWidth
+          disablePortal
+          disableClearable={true}
+          options={[
+            { label: 'SHA1', value: 'sha1' },
+            { label: 'SHA256', value: 'sha256' },
+            { label: 'SHA512', value: 'sha512' },
+          ]}
+          renderInput={(params) => (
+            <MuiTextField
+              {...params}
+              label={formatMessage('authenticationForm.signatureAlgorithm')}
+            />
+          )}
+        />
+        <TextField
+          required={true}
+          name="issuer"
+          label={formatMessage('authenticationForm.issuer')}
+          fullWidth
+        />
+        <TextField
+          required={true}
+          name="entryPoint"
+          label={formatMessage('authenticationForm.entryPoint')}
+          fullWidth
+        />
+        <TextField
+          required={true}
+          name="firstnameAttributeName"
+          label={formatMessage('authenticationForm.firstnameAttributeName')}
+          fullWidth
+        />
+        <TextField
+          required={true}
+          name="surnameAttributeName"
+          label={formatMessage('authenticationForm.surnameAttributeName')}
+          fullWidth
+        />
+        <TextField
+          required={true}
+          name="emailAttributeName"
+          label={formatMessage('authenticationForm.emailAttributeName')}
+          fullWidth
+        />
+        <TextField
+          required={true}
+          name="roleAttributeName"
+          label={formatMessage('authenticationForm.roleAttributeName')}
+          fullWidth
+        />
+        <ControlledAutocomplete
+          name="defaultRoleId"
+          fullWidth
+          disablePortal
+          disableClearable={true}
+          options={generateRoleOptions(roles)}
+          renderInput={(params) => (
+            <MuiTextField
+              {...params}
+              label={formatMessage('authenticationForm.defaultRole')}
+            />
+          )}
+          loading={rolesLoading}
+        />
+        <LoadingButton
+          type="submit"
+          variant="contained"
+          color="primary"
+          sx={{ boxShadow: 2 }}
+          loading={loading}
+        >
+          {formatMessage('authenticationForm.save')}
+        </LoadingButton>
+      </Stack>
+    </Form>
+  );
+}
+
+export default SamlConfiguration;

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

@@ -1,95 +1,22 @@
-import * as React from 'react';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
-import MuiTextField from '@mui/material/TextField';
-import LoadingButton from '@mui/lab/LoadingButton';
-import { IRole } from '@automatisch/types';
-import { useSnackbar } from 'notistack';
-import { TSamlAuthProvider } from '@automatisch/types';
-import { useMutation } from '@apollo/client';
 
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
-import Form from 'components/Form';
-import TextField from 'components/TextField';
-import ControlledAutocomplete from 'components/ControlledAutocomplete';
-import Switch from 'components/Switch';
 
-import { UPSERT_SAML_AUTH_PROVIDER } from 'graphql/mutations/upsert-saml-auth-provider';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useRoles from 'hooks/useRoles.ee';
 import useSamlAuthProvider from 'hooks/useSamlAuthProvider';
 
-const defaultValues = {
-  active: false,
-  name: '',
-  certificate: '',
-  signatureAlgorithm: 'sha1',
-  issuer: '',
-  entryPoint: '',
-  firstnameAttributeName: '',
-  surnameAttributeName: '',
-  emailAttributeName: '',
-  roleAttributeName: '',
-  defaultRoleId: '',
-};
-
-function generateRoleOptions(roles: IRole[]) {
-  return roles?.map(({ name: label, id: value }) => ({ label, value }));
-}
+import SamlConfiguration from './SamlConfiguration';
+import RoleMappings from './RoleMappings';
 
 function AuthenticationPage() {
   const formatMessage = useFormatMessage();
-  const { roles, loading: rolesLoading } = useRoles();
-  const { provider, loading: providerLoading } = useSamlAuthProvider();
-  const { enqueueSnackbar } = useSnackbar();
-  const [upsertSamlAuthProvider, { loading }] = useMutation(
-    UPSERT_SAML_AUTH_PROVIDER
-  );
-
-  const handleProviderUpdate = async (
-    providerDataToUpdate: Partial<TSamlAuthProvider>
-  ) => {
-    try {
-      const {
-        name,
-        certificate,
-        signatureAlgorithm,
-        issuer,
-        entryPoint,
-        firstnameAttributeName,
-        surnameAttributeName,
-        emailAttributeName,
-        roleAttributeName,
-        active,
-        defaultRoleId,
-      } = providerDataToUpdate;
-
-      await upsertSamlAuthProvider({
-        variables: {
-          input: {
-            name,
-            certificate,
-            signatureAlgorithm,
-            issuer,
-            entryPoint,
-            firstnameAttributeName,
-            surnameAttributeName,
-            emailAttributeName,
-            roleAttributeName,
-            active,
-            defaultRoleId,
-          },
-        },
-      });
-
-      enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
-        variant: 'success',
-      });
-    } catch (error) {
-      throw new Error('Failed while saving!');
-    }
-  };
+  const {
+    provider,
+    loading: providerLoading,
+    refetch: refetchProvider,
+  } = useSamlAuthProvider();
 
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
@@ -98,114 +25,17 @@ function AuthenticationPage() {
           <PageTitle>{formatMessage('authenticationPage.title')}</PageTitle>
         </Grid>
         <Grid item xs={12} sx={{ pt: 5, pb: 5 }}>
-          {!providerLoading && (
-            <Form
-              defaultValues={provider || defaultValues}
-              onSubmit={handleProviderUpdate}
-            >
-              <Stack direction="column" gap={2}>
-                <Switch
-                  name="active"
-                  label={formatMessage('authenticationForm.active')}
-                />
-                <TextField
-                  required={true}
-                  name="name"
-                  label={formatMessage('authenticationForm.name')}
-                  fullWidth
-                />
-                <TextField
-                  required={true}
-                  name="certificate"
-                  label={formatMessage('authenticationForm.certificate')}
-                  fullWidth
-                  multiline
-                />
-                <ControlledAutocomplete
-                  name="signatureAlgorithm"
-                  fullWidth
-                  disablePortal
-                  disableClearable={true}
-                  options={[
-                    { label: 'SHA1', value: 'sha1' },
-                    { label: 'SHA256', value: 'sha256' },
-                    { label: 'SHA512', value: 'sha512' },
-                  ]}
-                  renderInput={(params) => (
-                    <MuiTextField
-                      {...params}
-                      label={formatMessage(
-                        'authenticationForm.signatureAlgorithm'
-                      )}
-                    />
-                  )}
-                />
-                <TextField
-                  required={true}
-                  name="issuer"
-                  label={formatMessage('authenticationForm.issuer')}
-                  fullWidth
-                />
-                <TextField
-                  required={true}
-                  name="entryPoint"
-                  label={formatMessage('authenticationForm.entryPoint')}
-                  fullWidth
-                />
-                <TextField
-                  required={true}
-                  name="firstnameAttributeName"
-                  label={formatMessage(
-                    'authenticationForm.firstnameAttributeName'
-                  )}
-                  fullWidth
-                />
-                <TextField
-                  required={true}
-                  name="surnameAttributeName"
-                  label={formatMessage(
-                    'authenticationForm.surnameAttributeName'
-                  )}
-                  fullWidth
-                />
-                <TextField
-                  required={true}
-                  name="emailAttributeName"
-                  label={formatMessage('authenticationForm.emailAttributeName')}
-                  fullWidth
-                />
-                <TextField
-                  required={true}
-                  name="roleAttributeName"
-                  label={formatMessage('authenticationForm.roleAttributeName')}
-                  fullWidth
-                />
-                <ControlledAutocomplete
-                  name="defaultRoleId"
-                  fullWidth
-                  disablePortal
-                  disableClearable={true}
-                  options={generateRoleOptions(roles)}
-                  renderInput={(params) => (
-                    <MuiTextField
-                      {...params}
-                      label={formatMessage('authenticationForm.defaultRole')}
-                    />
-                  )}
-                  loading={rolesLoading}
-                />
-                <LoadingButton
-                  type="submit"
-                  variant="contained"
-                  color="primary"
-                  sx={{ boxShadow: 2 }}
-                  loading={loading}
-                >
-                  {formatMessage('authenticationForm.save')}
-                </LoadingButton>
-              </Stack>
-            </Form>
-          )}
+          <Stack spacing={5}>
+            <SamlConfiguration
+              provider={provider}
+              providerLoading={providerLoading}
+              refetchProvider={refetchProvider}
+            />
+            <RoleMappings
+              provider={provider}
+              providerLoading={providerLoading}
+            />
+          </Stack>
         </Grid>
       </Grid>
     </Container>

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

@@ -74,7 +74,10 @@ export default function CreateRole(): React.ReactElement {
                 fullWidth
               />
 
-              <PermissionCatalogField name="computedPermissions" />
+              <PermissionCatalogField
+                name="computedPermissions"
+                defaultChecked={true}
+              />
 
               <LoadingButton
                 type="submit"

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

@@ -2,9 +2,12 @@ import * as React from 'react';
 import { useMutation } from '@apollo/client';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import Skeleton from '@mui/material/Skeleton';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { useSnackbar } from 'notistack';
+import merge from 'lodash/merge';
 
+import { GET_CONFIG } from 'graphql/queries/get-config.ee';
 import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
 import useConfig from 'hooks/useConfig';
 import PageTitle from 'components/PageTitle';
@@ -14,7 +17,11 @@ import TextField from 'components/TextField';
 import useFormatMessage from 'hooks/useFormatMessage';
 import ColorInput from 'components/ColorInput';
 import nestObject from 'helpers/nestObject';
-import { Skeleton } from '@mui/material';
+import {
+  primaryMainColor,
+  primaryDarkColor,
+  primaryLightColor,
+} from 'styles/theme';
 
 type UserInterface = {
   palette: {
@@ -24,34 +31,98 @@ type UserInterface = {
       main: string;
     };
   };
+  title: string;
   logo: {
     svgData: string;
   };
 };
 
+const getPrimaryMainColor = (color?: string) => color || primaryMainColor;
+const getPrimaryDarkColor = (color?: string) => color || primaryDarkColor;
+const getPrimaryLightColor = (color?: string) => color || primaryLightColor;
+
+const defaultValues = {
+  title: 'Automatisch',
+  'palette.primary.main': primaryMainColor,
+  'palette.primary.dark': primaryDarkColor,
+  'palette.primary.light': primaryLightColor,
+};
+
 export default function UserInterface(): React.ReactElement {
   const formatMessage = useFormatMessage();
-  const [updateConfig, { loading }] = useMutation(UPDATE_CONFIG, {
-    refetchQueries: ['GetConfig'],
-  });
+  const [updateConfig, { loading }] = useMutation(UPDATE_CONFIG);
   const { config, loading: configLoading } = useConfig([
+    'title',
     'palette.primary.main',
     'palette.primary.light',
     'palette.primary.dark',
     'logo.svgData',
   ]);
   const { enqueueSnackbar } = useSnackbar();
+  const configWithDefaults = merge(
+    {},
+    defaultValues,
+    nestObject<UserInterface>(config)
+  );
 
   const handleUserInterfaceUpdate = async (uiData: Partial<UserInterface>) => {
     try {
+      const input = {
+        title: uiData?.title,
+        'palette.primary.main': getPrimaryMainColor(
+          uiData?.palette?.primary.main
+        ),
+        'palette.primary.dark': getPrimaryDarkColor(
+          uiData?.palette?.primary.dark
+        ),
+        'palette.primary.light': getPrimaryLightColor(
+          uiData?.palette?.primary.light
+        ),
+        'logo.svgData': uiData?.logo?.svgData,
+      };
+
       await updateConfig({
         variables: {
-          input: {
-            'palette.primary.main': uiData?.palette?.primary.main,
-            'palette.primary.dark': uiData?.palette?.primary.dark,
-            'palette.primary.light': uiData?.palette?.primary.light,
-            'logo.svgData': uiData?.logo?.svgData,
-          },
+          input,
+        },
+        optimisticResponse: {
+          updateConfig: input,
+        },
+        update: async function (cache, { data: { updateConfig } }) {
+          const newConfigWithDefaults = merge({}, defaultValues, updateConfig);
+
+          cache.writeQuery({
+            query: GET_CONFIG,
+            data: {
+              getConfig: newConfigWithDefaults,
+            },
+          });
+
+          cache.writeQuery({
+            query: GET_CONFIG,
+            data: {
+              getConfig: newConfigWithDefaults,
+            },
+            variables: {
+              keys: ['logo.svgData'],
+            },
+          });
+
+          cache.writeQuery({
+            query: GET_CONFIG,
+            data: {
+              getConfig: newConfigWithDefaults,
+            },
+            variables: {
+              keys: [
+                'title',
+                'palette.primary.main',
+                'palette.primary.light',
+                'palette.primary.dark',
+                'logo.svgData',
+              ],
+            },
+          });
         },
       });
 
@@ -83,33 +154,45 @@ export default function UserInterface(): React.ReactElement {
           {!configLoading && (
             <Form
               onSubmit={handleUserInterfaceUpdate}
-              defaultValues={nestObject<UserInterface>(config)}
+              defaultValues={configWithDefaults}
             >
               <Stack direction="column" gap={2}>
+                <TextField
+                  name="title"
+                  label={formatMessage('userInterfacePage.titleFieldLabel')}
+                  fullWidth
+                />
+
                 <ColorInput
                   name="palette.primary.main"
-                  label={formatMessage('userInterfacePage.mainColor')}
+                  label={formatMessage(
+                    'userInterfacePage.primaryMainColorFieldLabel'
+                  )}
                   fullWidth
                   data-test="primary-main-color-input"
                 />
 
                 <ColorInput
                   name="palette.primary.dark"
-                  label={formatMessage('userInterfacePage.darkColor')}
+                  label={formatMessage(
+                    'userInterfacePage.primaryDarkColorFieldLabel'
+                  )}
                   fullWidth
                   data-test="primary-dark-color-input"
                 />
 
                 <ColorInput
                   name="palette.primary.light"
-                  label={formatMessage('userInterfacePage.lightColor')}
+                  label={formatMessage(
+                    'userInterfacePage.primaryLightColorFieldLabel'
+                  )}
                   fullWidth
                   data-test="primary-light-color-input"
                 />
 
                 <TextField
                   name="logo.svgData"
-                  label={formatMessage('userInterfacePage.svgData')}
+                  label={formatMessage('userInterfacePage.svgDataFieldLabel')}
                   multiline
                   fullWidth
                   data-test="logo-svg-data-text-field"

packages/web/src/styles/theme.ts

@@ -2,13 +2,16 @@ import { createTheme, alpha } from '@mui/material/styles';
 import { cardActionAreaClasses } from '@mui/material/CardActionArea';
 
 const referenceTheme = createTheme();
+export const primaryMainColor = '#0059F7';
+export const primaryLightColor = '#4286FF';
+export const primaryDarkColor = '#001F52';
 
 const extendedTheme = createTheme({
   palette: {
     primary: {
-      main: '#0059F7',
-      light: '#4286FF',
-      dark: '#001F52',
+      main: primaryMainColor,
+      light: primaryLightColor,
+      dark: primaryDarkColor,
       contrastText: '#fff',
     },
     divider: 'rgba(194, 194, 194, .2)',