Update version to 0.13.0

fix: introduce fix for overflowing inputs with long parameters names

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.0',
   postgresDatabase: process.env.POSTGRES_DATABASE || 'automatisch_development',
   postgresSchema: process.env.POSTGRES_SCHEMA || 'public',
   postgresPort: parseInt(process.env.POSTGRES_PORT || '5432'),

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.0',
       },
       meta: {
         count: 1,

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,18 +21,33 @@ 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('');
 
+      // challenge the input to see if it is stringifies object or array
+      try {
+        const parsedValue = JSON.parse(computedValue);
+
+        return {
+          ...result,
+          [key]: parsedValue,
+        };
+      } catch (error) {
         return {
           ...result,
           [key]: computedValue,
         };
       }
+    }
 
     if (Array.isArray(value)) {
       return {

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}
-                  <Box
+                  sm={11}
-                    sx={{
+                  sx={{ order: { xs: 2, sm: 1 } }}
-                      display: 'flex',
-                      flex: '1 0 0px',
-                      maxWidth: ['100%', '33%'],
-                    }}
                 >
+                  <Grid item xs={12} md={4}>
                     <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 } }}>
+                  <Stack justifyContent="center" alignItems="flex-end">
                     <IconButton
                       size="small"
                       edge="start"
-                  onClick={() => removeGroupItem(groupIndex, groupItemIndex)}
+                      onClick={() =>
-                  sx={{ width: 61, height: 61 }}
+                        removeGroupItem(groupIndex, groupItemIndex)
+                      }
+                      sx={{
+                        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/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,