Update version to 0.13.1

fix(compute-parameters): use unparsed numbers

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

@@ -1,8 +1,26 @@
 const replace = ($) => {
   const input = $.step.parameters.input;
-
   const find = $.step.parameters.find;
   const replace = $.step.parameters.replace;
+  const useRegex = $.step.parameters.useRegex;
+
+  if (useRegex) {
+    const ignoreCase = $.step.parameters.ignoreCase;
+
+    const flags = [ignoreCase && 'i', 'g'].filter(Boolean).join('');
+
+    const timeoutId = setTimeout(() => {
+      $.execution.exit();
+    }, 100);
+
+    const regex = new RegExp(find, flags);
+
+    const replacedValue = input.replaceAll(regex, replace);
+
+    clearTimeout(timeoutId);
+
+    return replacedValue;
+  }
 
   return input.replaceAll(find, replace);
 };

packages/backend/src/apps/formatter/dynamic-fields/index.js

@@ -1,3 +1,4 @@
 import listTransformOptions from './list-transform-options/index.js';
+import listReplaceRegexOptions from './list-replace-regex-options/index.js';
 
-export default [listTransformOptions];
+export default [listTransformOptions, listReplaceRegexOptions];

packages/backend/src/apps/formatter/dynamic-fields/list-replace-regex-options/index.js

@@ -0,0 +1,23 @@
+export default {
+  name: 'List replace regex options',
+  key: 'listReplaceRegexOptions',
+
+  async run($) {
+    if (!$.step.parameters.useRegex) return [];
+
+    return [
+      {
+        label: 'Ignore case',
+        key: 'ignoreCase',
+        type: 'dropdown',
+        required: true,
+        description: 'Ignore case sensitivity.',
+        variables: true,
+        options: [
+          { label: 'Yes', value: true },
+          { label: 'No', value: false },
+        ],
+      },
+    ];
+  },
+};

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

@@ -23,6 +23,33 @@ const replace = [
     description: 'Text that will replace the found text.',
     variables: true,
   },
+  {
+    label: 'Use Regular Expression',
+    key: 'useRegex',
+    type: 'dropdown',
+    required: true,
+    description: 'Use regex to search values.',
+    variables: true,
+    value: false,
+    options: [
+      { label: 'Yes', value: true },
+      { label: 'No', value: false },
+    ],
+    additionalFields: {
+      type: 'query',
+      name: 'getDynamicFields',
+      arguments: [
+        {
+          name: 'key',
+          value: 'listReplaceRegexOptions',
+        },
+        {
+          name: 'parameters.useRegex',
+          value: '{parameters.useRegex}',
+        },
+      ],
+    },
+  },
 ];
 
 export default replace;

packages/backend/src/config/app.js

@@ -52,7 +52,7 @@ const appConfig = {
   isDev: appEnv === 'development',
   isTest: appEnv === 'test',
   isProd: appEnv === 'production',
-  version: '0.12.0',
+  version: '0.13.1',
   postgresDatabase: process.env.POSTGRES_DATABASE || 'automatisch_development',
   postgresSchema: process.env.POSTGRES_SCHEMA || 'public',
   postgresPort: parseInt(process.env.POSTGRES_PORT || '5432'),
@@ -100,6 +100,9 @@ const appConfig = {
   additionalDrawerLinkIcon: process.env.ADDITIONAL_DRAWER_LINK_ICON,
   additionalDrawerLinkText: process.env.ADDITIONAL_DRAWER_LINK_TEXT,
   disableSeedUser: process.env.DISABLE_SEED_USER === 'true',
+  httpProxy: process.env.http_proxy,
+  httpsProxy: process.env.https_proxy,
+  noProxy: process.env.no_proxy,
 };
 
 if (!appConfig.encryptionKey) {

packages/backend/src/controllers/api/v1/automatisch/info.js

@@ -1,13 +1,17 @@
 import appConfig from '../../../../config/app.js';
 import { hasValidLicense } from '../../../../helpers/license.ee.js';
 import { renderObject } from '../../../../helpers/renderer.js';
+import Config from '../../../../models/config.js';
 
 export default async (request, response) => {
+  const installationCompleted = await Config.isInstallationCompleted();
+
   const info = {
-    isCloud: appConfig.isCloud,
-    isMation: appConfig.isMation,
-    isEnterprise: await hasValidLicense(),
     docsUrl: appConfig.docsUrl,
+    installationCompleted,
+    isCloud: appConfig.isCloud,
+    isEnterprise: await hasValidLicense(),
+    isMation: appConfig.isMation,
   };
 
   renderObject(response, info);

packages/backend/src/controllers/api/v1/automatisch/info.test.js

@@ -1,12 +1,14 @@
 import { vi, expect, describe, it } from 'vitest';
 import request from 'supertest';
 import appConfig from '../../../../config/app.js';
+import Config from '../../../../models/config.js';
 import app from '../../../../app.js';
 import infoMock from '../../../../../test/mocks/rest/api/v1/automatisch/info.js';
 import * as license from '../../../../helpers/license.ee.js';
 
 describe('GET /api/v1/automatisch/info', () => {
   it('should return Automatisch info', async () => {
+    vi.spyOn(Config, 'isInstallationCompleted').mockResolvedValue(true);
     vi.spyOn(appConfig, 'isCloud', 'get').mockReturnValue(false);
     vi.spyOn(appConfig, 'isMation', 'get').mockReturnValue(false);
     vi.spyOn(license, 'hasValidLicense').mockResolvedValue(true);

packages/backend/src/controllers/api/v1/automatisch/version.test.js

@@ -10,7 +10,7 @@ describe('GET /api/v1/automatisch/version', () => {
 
     const expectedPayload = {
       data: {
-        version: '0.12.0',
+        version: '0.13.1',
       },
       meta: {
         count: 1,

packages/backend/src/helpers/axios-with-proxy.js

@@ -1,43 +1,102 @@
 import axios from 'axios';
 import { HttpsProxyAgent } from 'https-proxy-agent';
 import { HttpProxyAgent } from 'http-proxy-agent';
+import appConfig from '../config/app.js';
 
-const config = axios.defaults;
+export function createInstance(customConfig = {}, { requestInterceptor, responseErrorInterceptor } = {}) {
-const httpProxyUrl = process.env.http_proxy;
+  const config = {
-const httpsProxyUrl = process.env.https_proxy;
+    ...axios.defaults,
-const supportsProxy = httpProxyUrl || httpsProxyUrl;
+    ...customConfig
-const noProxyEnv = process.env.no_proxy;
+  };
-const noProxyHosts = noProxyEnv ? noProxyEnv.split(',').map(host => host.trim()) : [];
+  const httpProxyUrl = appConfig.httpProxy;
+  const httpsProxyUrl = appConfig.httpsProxy;
+  const supportsProxy = httpProxyUrl || httpsProxyUrl;
+  const noProxyEnv = appConfig.noProxy;
+  const noProxyHosts = noProxyEnv ? noProxyEnv.split(',').map(host => host.trim()) : [];
 
-if (supportsProxy) {
+  if (supportsProxy) {
-  if (httpProxyUrl) {
+    if (httpProxyUrl) {
-    config.httpAgent = new HttpProxyAgent(httpProxyUrl);
+      config.httpAgent = new HttpProxyAgent(httpProxyUrl);
+    }
+
+    if (httpsProxyUrl) {
+      config.httpsAgent = new HttpsProxyAgent(httpsProxyUrl);
+    }
+
+    config.proxy = false;
   }
 
-  if (httpsProxyUrl) {
+  const instance = axios.create(config);
-    config.httpsAgent = new HttpsProxyAgent(httpsProxyUrl);
+
+  function shouldSkipProxy(hostname) {
+    return noProxyHosts.some(noProxyHost => {
+      return hostname.endsWith(noProxyHost) || hostname === noProxyHost;
+    });
+  };
+
+  /**
+   * The interceptors are executed in the reverse order they are added.
+   */
+  instance.interceptors.request.use(
+    function skipProxyIfInNoProxy(requestConfig) {
+      const hostname = new URL(requestConfig.baseURL).hostname;
+
+      if (supportsProxy && shouldSkipProxy(hostname)) {
+        requestConfig.httpAgent = undefined;
+        requestConfig.httpsAgent = undefined;
+      }
+
+      return requestConfig;
+    },
+    (error) => Promise.reject(error)
+  );
+
+  // not always we have custom request interceptors
+  if (requestInterceptor) {
+    instance.interceptors.request.use(
+      async function customInterceptor(requestConfig) {
+        let newRequestConfig = requestConfig;
+
+        for (const interceptor of requestInterceptor) {
+          newRequestConfig = await interceptor(newRequestConfig);
+        }
+
+        return newRequestConfig;
+      }
+    );
   }
 
-  config.proxy = false;
+  instance.interceptors.request.use(
+    function removeBaseUrlForAbsoluteUrls(requestConfig) {
+      /**
+       * If the URL is an absolute URL, we remove its origin out of the URL
+       * and set it as baseURL. This lets us streamlines the requests made by Automatisch
+       * and requests made by app integrations.
+       */
+      try {
+        const url = new URL(requestConfig.url);
+        requestConfig.baseURL = url.origin;
+        requestConfig.url = url.pathname + url.search;
+
+        return requestConfig;
+      } catch (err) {
+        return requestConfig;
+      }
+    },
+    (error) => Promise.reject(error)
+  );
+
+  // not always we have custom response error interceptor
+  if (responseErrorInterceptor) {
+    instance.interceptors.response.use(
+      (response) => response,
+      responseErrorInterceptor
+    );
+  }
+
+  return instance;
 }
 
-const axiosWithProxyInstance = axios.create(config);
+const defaultInstance = createInstance();
 
-function shouldSkipProxy(hostname) {
+export default defaultInstance;
-  return noProxyHosts.some(noProxyHost => {
-    return hostname.endsWith(noProxyHost) || hostname === noProxyHost;
-  });
-};
-
-axiosWithProxyInstance.interceptors.request.use(function skipProxyIfInNoProxy(requestConfig) {
-  const hostname = new URL(requestConfig.url).hostname;
-
-  if (supportsProxy && shouldSkipProxy(hostname)) {
-    requestConfig.httpAgent = undefined;
-    requestConfig.httpsAgent = undefined;
-  }
-
-  return requestConfig;
-});
-
-export default axiosWithProxyInstance;

packages/backend/src/helpers/axios-with-proxy.test.js

@@ -0,0 +1,169 @@
+import { beforeEach, describe, it, expect, vi } from 'vitest';
+
+describe('Custom default axios with proxy', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  it('should have two interceptors by default', async () => {
+    const axios = (await import('./axios-with-proxy.js')).default;
+    const requestInterceptors = axios.interceptors.request.handlers;
+
+    expect(requestInterceptors.length).toBe(2);
+  });
+
+  it('should have default interceptors in a certain order', async () => {
+    const axios = (await import('./axios-with-proxy.js')).default;
+
+    const requestInterceptors = axios.interceptors.request.handlers;
+    const firstRequestInterceptor = requestInterceptors[0];
+    const secondRequestInterceptor = requestInterceptors[1];
+
+    expect(firstRequestInterceptor.fulfilled.name).toBe('skipProxyIfInNoProxy');
+    expect(secondRequestInterceptor.fulfilled.name).toBe('removeBaseUrlForAbsoluteUrls');
+  });
+
+  it('should throw with invalid url (consisting of path alone)', async () => {
+    const axios = (await import('./axios-with-proxy.js')).default;
+
+    await expect(() => axios('/just-a-path')).rejects.toThrowError('Invalid URL');
+  });
+
+  describe('with skipProxyIfInNoProxy interceptor', () => {
+    let appConfig, axios;
+    beforeEach(async() => {
+      appConfig = (await import('../config/app.js')).default;
+
+      vi.spyOn(appConfig, 'httpProxy', 'get').mockReturnValue('http://proxy.automatisch.io');
+      vi.spyOn(appConfig, 'httpsProxy', 'get').mockReturnValue('http://proxy.automatisch.io');
+      vi.spyOn(appConfig, 'noProxy', 'get').mockReturnValue('name.tld,automatisch.io');
+
+      axios = (await import('./axios-with-proxy.js')).default;
+    });
+
+    it('should skip proxy for hosts in no_proxy environment variable', async () => {
+      const skipProxyIfInNoProxy = axios.interceptors.request.handlers[0].fulfilled;
+
+      const mockRequestConfig = {
+        ...axios.defaults,
+        baseURL: 'https://automatisch.io'
+      };
+
+      const interceptedRequestConfig = skipProxyIfInNoProxy(mockRequestConfig);
+
+      expect(interceptedRequestConfig.httpAgent).toBeUndefined();
+      expect(interceptedRequestConfig.httpsAgent).toBeUndefined();
+      expect(interceptedRequestConfig.proxy).toBe(false);
+    });
+
+    it('should not skip proxy for hosts not in no_proxy environment variable', async () => {
+      const skipProxyIfInNoProxy = axios.interceptors.request.handlers[0].fulfilled;
+
+      const mockRequestConfig = {
+        ...axios.defaults,
+        // beware the intentional typo!
+        baseURL: 'https://automatish.io'
+      };
+
+      const interceptedRequestConfig = skipProxyIfInNoProxy(mockRequestConfig);
+
+      expect(interceptedRequestConfig.httpAgent).toBeDefined();
+      expect(interceptedRequestConfig.httpsAgent).toBeDefined();
+      expect(interceptedRequestConfig.proxy).toBe(false);
+    });
+  });
+
+  describe('with removeBaseUrlForAbsoluteUrls interceptor', () => {
+    let axios;
+    beforeEach(async() => {
+      axios = (await import('./axios-with-proxy.js')).default;
+    });
+
+    it('should trim the baseUrl from absolute urls', async () => {
+      const removeBaseUrlForAbsoluteUrls = axios.interceptors.request.handlers[1].fulfilled;
+
+      const mockRequestConfig = {
+        ...axios.defaults,
+        url: 'https://automatisch.io/path'
+      };
+
+      const interceptedRequestConfig = removeBaseUrlForAbsoluteUrls(mockRequestConfig);
+
+      expect(interceptedRequestConfig.baseURL).toBe('https://automatisch.io');
+      expect(interceptedRequestConfig.url).toBe('/path');
+    });
+
+    it('should not mutate separate baseURL and urls', async () => {
+      const removeBaseUrlForAbsoluteUrls = axios.interceptors.request.handlers[1].fulfilled;
+
+      const mockRequestConfig = {
+        ...axios.defaults,
+        baseURL: 'https://automatisch.io',
+        url: '/path?query=1'
+      };
+
+      const interceptedRequestConfig = removeBaseUrlForAbsoluteUrls(mockRequestConfig);
+
+      expect(interceptedRequestConfig.baseURL).toBe('https://automatisch.io');
+      expect(interceptedRequestConfig.url).toBe('/path?query=1');
+    });
+
+    it('should not strip querystring from url', async () => {
+      const removeBaseUrlForAbsoluteUrls = axios.interceptors.request.handlers[1].fulfilled;
+
+      const mockRequestConfig = {
+        ...axios.defaults,
+        url: 'https://automatisch.io/path?query=1'
+      };
+
+      const interceptedRequestConfig = removeBaseUrlForAbsoluteUrls(mockRequestConfig);
+
+      expect(interceptedRequestConfig.baseURL).toBe('https://automatisch.io');
+      expect(interceptedRequestConfig.url).toBe('/path?query=1');
+    });
+  });
+
+  describe('with extra requestInterceptors', () => {
+    it('should apply extra request interceptors in the middle', async () => {
+      const { createInstance } = await import('./axios-with-proxy.js');
+
+      const interceptor = (config) => {
+        config.test = true;
+        return config;
+      }
+
+      const instance = createInstance({}, {
+        requestInterceptor: [
+          interceptor
+        ]
+      });
+      const requestInterceptors = instance.interceptors.request.handlers;
+      const customInterceptor = requestInterceptors[1].fulfilled;
+
+      expect(requestInterceptors.length).toBe(3);
+      await expect(customInterceptor({})).resolves.toStrictEqual({ test: true });
+    });
+
+    it('should work with a custom interceptor setting a baseURL and a request to path', async () => {
+      const { createInstance } = await import('./axios-with-proxy.js');
+
+      const interceptor = (config) => {
+        config.baseURL = 'http://localhost';
+        return config;
+      }
+
+      const instance = createInstance({}, {
+        requestInterceptor: [
+          interceptor
+        ]
+      });
+
+      try {
+        await instance.get('/just-a-path');
+      } catch (error) {
+        expect(error.config.baseURL).toBe('http://localhost');
+        expect(error.config.url).toBe('/just-a-path');
+      }
+    })
+  });
+});

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

@@ -11,6 +11,7 @@ export default function computeParameters(parameters, executionSteps) {
       const computedValue = parts
         .map((part) => {
           const isVariable = part.match(variableRegExp);
+
           if (isVariable) {
             const stepIdAndKeyPath = part.replace(/{{step.|}}/g, '');
             const [stepId, ...keyPaths] = stepIdAndKeyPath.split('.');
@@ -20,17 +21,36 @@ export default function computeParameters(parameters, executionSteps) {
             });
             const data = executionStep?.dataOut;
             const dataValue = get(data, keyPath);
+
+            // Covers both arrays and objects
+            if (typeof dataValue === 'object') {
+              return JSON.stringify(dataValue);
+            }
+
             return dataValue;
           }
 
           return part;
-        })
+        }).join('');
-        .join('');
 
-      return {
+      // challenge the input to see if it is stringifies object or array
-        ...result,
+      try {
-        [key]: computedValue,
+        const parsedValue = JSON.parse(computedValue);
-      };
+
+        if (typeof parsedValue === 'number') {
+          throw new Error('Use original unparsed value.');
+        }
+
+        return {
+          ...result,
+          [key]: parsedValue,
+        };
+      } catch (error) {
+        return {
+          ...result,
+          [key]: computedValue,
+        };
+      }
     }
 
     if (Array.isArray(value)) {

packages/backend/src/helpers/http-client/index.js

@@ -1,68 +1,43 @@
-import { URL } from 'node:url';
 import HttpError from '../../errors/http.js';
-import axios from '../axios-with-proxy.js';
+import { createInstance } from '../axios-with-proxy.js';
-
-const removeBaseUrlForAbsoluteUrls = (requestConfig) => {
-  try {
-    const url = new URL(requestConfig.url);
-    requestConfig.baseURL = url.origin;
-    requestConfig.url = url.pathname + url.search;
-
-    return requestConfig;
-  } catch {
-    return requestConfig;
-  }
-};
 
 export default function createHttpClient({ $, baseURL, beforeRequest = [] }) {
-  const instance = axios.create({
+  async function interceptResponseError(error) {
-    baseURL,
+    const { config, response } = error;
-  });
+    // Do not destructure `status` from `error.response` because it might not exist
+    const status = response?.status;
 
-  instance.interceptors.request.use((requestConfig) => {
+    if (
-    const newRequestConfig = removeBaseUrlForAbsoluteUrls(requestConfig);
+      // TODO: provide a `shouldRefreshToken` function in the app
+      (status === 401 || status === 403) &&
+      $.app.auth &&
+      $.app.auth.refreshToken &&
+      !$.app.auth.isRefreshTokenRequested
+    ) {
+      $.app.auth.isRefreshTokenRequested = true;
+      await $.app.auth.refreshToken($);
 
-    const result = beforeRequest.reduce((newConfig, beforeRequestFunc) => {
+      // retry the previous request before the expired token error
-      return beforeRequestFunc($, newConfig);
+      const newResponse = await instance.request(config);
-    }, newRequestConfig);
+      $.app.auth.isRefreshTokenRequested = false;
 
-    /**
+      return newResponse;
-     * axios seems to want InternalAxiosRequestConfig returned not AxioRequestConfig
-     * anymore even though requests do require AxiosRequestConfig.
-     *
-     * Since both interfaces are very similar (InternalAxiosRequestConfig
-     * extends AxiosRequestConfig), we can utilize an assertion below
-     **/
-    return result;
-  });
-
-  instance.interceptors.response.use(
-    (response) => response,
-    async (error) => {
-      const { config, response } = error;
-      // Do not destructure `status` from `error.response` because it might not exist
-      const status = response?.status;
-
-      if (
-        // TODO: provide a `shouldRefreshToken` function in the app
-        (status === 401 || status === 403) &&
-        $.app.auth &&
-        $.app.auth.refreshToken &&
-        !$.app.auth.isRefreshTokenRequested
-      ) {
-        $.app.auth.isRefreshTokenRequested = true;
-        await $.app.auth.refreshToken($);
-
-        // retry the previous request before the expired token error
-        const newResponse = await instance.request(config);
-        $.app.auth.isRefreshTokenRequested = false;
-
-        return newResponse;
-      }
-
-      throw new HttpError(error);
     }
-  );
+
+    throw new HttpError(error);
+  };
+
+  const instance = createInstance(
+    {
+      baseURL,
+    },
+    {
+      requestInterceptor: beforeRequest.map((originalBeforeRequest) => {
+        return async (requestConfig) => await originalBeforeRequest($, requestConfig);
+      }),
+      responseErrorInterceptor: interceptResponseError,
+    }
+  )
 
   return instance;
 }

packages/backend/src/helpers/webhook-handler-sync.js

@@ -63,6 +63,8 @@ export default async (flowId, request, response) => {
     });
 
     if (testRun) {
+      response.status(204).end();
+
       // in case of testing, we do not process the whole process.
       continue;
     }
@@ -74,6 +76,12 @@ export default async (flowId, request, response) => {
         executionId,
       });
 
+      if (actionStep.appKey === 'filter' && !actionExecutionStep.dataOut) {
+        response.status(422).end();
+
+        break;
+      }
+
       if (actionStep.key === 'respondWith' && !response.headersSent) {
         const { headers, statusCode, body } = actionExecutionStep.dataOut;
 

packages/backend/test/mocks/rest/api/v1/automatisch/info.js

@@ -1,10 +1,11 @@
 const infoMock = () => {
   return {
     data: {
-      isCloud: false,
-      isMation: false,
-      isEnterprise: true,
       docsUrl: 'https://automatisch.io/docs',
+      installationCompleted: true,
+      isCloud: false,
+      isEnterprise: true,
+      isMation: false,
     },
     meta: {
       count: 1,

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

@@ -14,7 +14,7 @@ connection in Automatisch. If any of the steps are outdated, please let us know!
 7. Click on the **Select all** and then click on the **Create** button.
 8. Now, copy your **API key secret** and paste the key into the **API Key** field in Automatisch.
 9. Write any screen name to be displayed in Automatisch.
-10. You can find your project ID next to your project name. Paste the id into **Project ID** field in Automatsich.
+10. You can find your project ID next to your project name. Paste the id into **Project ID** field in Automatisch.
-11. If you are using self-hosted Appwrite project, you can paste the instace url into **Appwrite instance URL** field in Automatisch.
+11. If you are using self-hosted Appwrite project, you can paste the instance url into **Appwrite instance URL** field in Automatisch.
 12. Fill the host name field with the hostname of your instance URL. It's either `cloud.appwrite.io` or hostname of your instance URL.
 13. Start using Appwrite integration with Automatisch!

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

@@ -1,7 +1,7 @@
 ---
 favicon: /favicons/appwrite.svg
 items:
-  - name: New documets
+  - name: New documents
     desc: Triggers when a new document is created.
 ---
 

packages/web/public/index.html

@@ -8,11 +8,6 @@
       name="description"
       content="Build workflow automation without spending time and money. No code is required."
     />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

packages/web/public/manifest.json

@@ -1,9 +0,0 @@
-{
-  "short_name": "automatisch",
-  "name": "automatisch",
-  "description": "Build workflow automation without spending time and money. No code is required.",
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

packages/web/src/components/FlowSubstep/FilterConditions/index.jsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useFormContext, useWatch } from 'react-hook-form';
 import Stack from '@mui/material/Stack';
-import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
@@ -12,6 +11,7 @@ import AddIcon from '@mui/icons-material/Add';
 import useFormatMessage from 'hooks/useFormatMessage';
 import InputCreator from 'components/InputCreator';
 import { EditorContext } from 'contexts/Editor';
+import { Grid } from '@mui/material';
 
 const createGroupItem = () => ({
   key: '',
@@ -122,7 +122,7 @@ function FilterConditions(props) {
     <React.Fragment>
       <Stack sx={{ width: '100%' }} direction="column" spacing={2} mt={2}>
         {groups?.map((group, groupIndex) => (
-          <>
+          <React.Fragment key={groupIndex}>
             {groupIndex !== 0 && <Divider />}
 
             <Typography variant="subtitle2" gutterBottom>
@@ -133,19 +133,16 @@ function FilterConditions(props) {
             </Typography>
 
             {group?.and?.map((groupItem, groupItemIndex) => (
-              <Stack direction="row" spacing={2} key={`item-${groupItem.id}`}>
+              <Grid container key={`item-${groupItem.id}`}>
-                <Stack
+                <Grid
-                  direction={{ xs: 'column', sm: 'row' }}
+                  container
-                  spacing={{ xs: 2 }}
+                  spacing={2}
-                  sx={{ display: 'flex', flex: 1 }}
+                  item
+                  xs={12}
+                  sm={11}
+                  sx={{ order: { xs: 2, sm: 1 } }}
                 >
-                  <Box
+                  <Grid item xs={12} md={4}>
-                    sx={{
-                      display: 'flex',
-                      flex: '1 0 0px',
-                      maxWidth: ['100%', '33%'],
-                    }}
-                  >
                     <InputCreator
                       schema={createStringArgument({
                         key: `or.${groupIndex}.and.${groupItemIndex}.key`,
@@ -155,15 +152,8 @@ function FilterConditions(props) {
                       stepId={stepId}
                       disabled={editorContext.readOnly}
                     />
-                  </Box>
+                  </Grid>
-
+                  <Grid item xs={12} md={4}>
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      flex: '1 0 0px',
-                      maxWidth: ['100%', '33%'],
-                    }}
-                  >
                     <InputCreator
                       schema={createDropdownArgument({
                         key: `or.${groupIndex}.and.${groupItemIndex}.operator`,
@@ -174,15 +164,8 @@ function FilterConditions(props) {
                       stepId={stepId}
                       disabled={editorContext.readOnly}
                     />
-                  </Box>
+                  </Grid>
-
+                  <Grid item xs={12} md={4}>
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      flex: '1 0 0px',
-                      maxWidth: ['100%', '33%'],
-                    }}
-                  >
                     <InputCreator
                       schema={createStringArgument({
                         key: `or.${groupIndex}.and.${groupItemIndex}.value`,
@@ -192,18 +175,28 @@ function FilterConditions(props) {
                       stepId={stepId}
                       disabled={editorContext.readOnly}
                     />
-                  </Box>
+                  </Grid>
-                </Stack>
+                </Grid>
-
+                <Grid item xs={12} sm={1} sx={{ order: { xs: 1, sm: 2 } }}>
-                <IconButton
+                  <Stack justifyContent="center" alignItems="flex-end">
-                  size="small"
+                    <IconButton
-                  edge="start"
+                      size="small"
-                  onClick={() => removeGroupItem(groupIndex, groupItemIndex)}
+                      edge="start"
-                  sx={{ width: 61, height: 61 }}
+                      onClick={() =>
-                >
+                        removeGroupItem(groupIndex, groupItemIndex)
-                  <RemoveIcon />
+                      }
-                </IconButton>
+                      sx={{
-              </Stack>
+                        width: 40,
+                        height: 40,
+                        mb: { xs: 2, sm: 0 },
+                      }}
+                      disabled={groups.length === 1 && group.and.length === 1}
+                    >
+                      <RemoveIcon />
+                    </IconButton>
+                  </Stack>
+                </Grid>
+              </Grid>
             ))}
 
             <Stack spacing={1} direction="row">
@@ -227,7 +220,7 @@ function FilterConditions(props) {
                 </IconButton>
               )}
             </Stack>
-          </>
+          </React.Fragment>
         ))}
       </Stack>
     </React.Fragment>

packages/web/src/components/InstallationForm/index.jsx

@@ -44,7 +44,7 @@ function InstallationForm() {
 
   const handleOnRedirect = () => {
     queryClient.invalidateQueries({
-      queryKey: ['automatisch', 'config'],
+      queryKey: ['automatisch', 'info'],
     });
   };
 

packages/web/src/components/PowerInput/data.js

@@ -19,7 +19,13 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
     const value = joinBy('.', parentKey, index?.toString(), name);
 
     if (Array.isArray(sampleValue)) {
-      return sampleValue.flatMap((item, index) =>
+      const arrayItself = {
+        label,
+        value,
+        sampleValue: JSON.stringify(sampleValue),
+      };
+
+      const arrayItems =  sampleValue.flatMap((item, index) =>
         process({
           data: item,
           parentKey: value,
@@ -27,6 +33,9 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
           parentLabel: label,
         }),
       );
+
+      // TODO: remove spreading
+      return [arrayItself, ...arrayItems];
     }
 
     if (typeof sampleValue === 'object' && sampleValue !== null) {
@@ -36,6 +45,7 @@ const process = ({ data, parentKey, index, parentLabel = '' }) => {
         parentLabel: label,
       });
     }
+
     return [
       {
         label,

packages/web/src/routes.jsx

@@ -29,14 +29,16 @@ import adminSettingsRoutes from './adminSettingsRoutes';
 import Notifications from 'pages/Notifications';
 import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import useAuthentication from 'hooks/useAuthentication';
+import useAutomatischInfo from 'hooks/useAutomatischInfo';
 import Installation from 'pages/Installation';
 
 function Routes() {
-  const { data: configData, isSuccess } = useAutomatischConfig();
+  const { data: automatischInfo, isSuccess } = useAutomatischInfo();
+  const { data: configData } = useAutomatischConfig();
   const { isAuthenticated } = useAuthentication();
   const config = configData?.data;
 
-  const installed = isSuccess ? config?.['installation.completed'] === true : true;
+  const installed = isSuccess ? automatischInfo.data.installationCompleted : true;
   const navigate = useNavigate();
 
   useEffect(() => {