feat(Editor): implement dynamic fields

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

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import MuiTextField from '@mui/material/TextField';
+import CircularProgress from '@mui/material/CircularProgress';
 import type { IField, IFieldDropdownOption } from '@automatisch/types';
 
+import useDynamicFields from 'hooks/useDynamicFields';
 import useDynamicData from 'hooks/useDynamicData';
 import PowerInput from 'components/PowerInput';
 import TextField from 'components/TextField';
@@ -52,56 +54,111 @@ export default function InputCreator(
   } = schema;
 
   const { data, loading } = useDynamicData(stepId, schema);
+  const {
+    data: additionalFields,
+    loading: additionalFieldsLoading
+  } = useDynamicFields(stepId, schema);
   const computedName = namePrefix ? `${namePrefix}.${name}` : name;
 
   if (type === 'dropdown') {
     const preparedOptions = schema.options || optionGenerator(data);
 
     return (
-      <ControlledAutocomplete
-        name={computedName}
-        dependsOn={dependsOn}
-        fullWidth
-        disablePortal
-        disableClearable={required}
-        options={preparedOptions}
-        renderInput={(params) => <MuiTextField {...params} label={label} />}
-        defaultValue={value as string}
-        description={description}
-        loading={loading}
-        disabled={disabled}
-        showOptionValue={showOptionValue}
-      />
+      <React.Fragment>
+        <ControlledAutocomplete
+          name={computedName}
+          dependsOn={dependsOn}
+          fullWidth
+          disablePortal
+          disableClearable={required}
+          options={preparedOptions}
+          renderInput={(params) => <MuiTextField {...params} label={label} />}
+          defaultValue={value as string}
+          description={description}
+          loading={loading}
+          disabled={disabled}
+          showOptionValue={showOptionValue}
+        />
+
+        {(additionalFieldsLoading && !additionalFields?.length) && <div>
+          <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
+        </div>}
+
+        {additionalFields?.map((field) => (
+          <InputCreator
+            key={field.key}
+            schema={field}
+            namePrefix="parameters"
+            stepId={stepId}
+            disabled={disabled}
+            showOptionValue={true}
+          />
+        ))}
+      </React.Fragment>
     );
   }
 
   if (type === 'string') {
     if (variables) {
       return (
-        <PowerInput
-          label={label}
-          description={description}
-          name={computedName}
-          required={required}
-          disabled={disabled}
-        />
+        <React.Fragment>
+          <PowerInput
+            label={label}
+            description={description}
+            name={computedName}
+            required={required}
+            disabled={disabled}
+          />
+
+          {(additionalFieldsLoading && !additionalFields?.length) && <div>
+            <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
+          </div>}
+
+          {additionalFields?.map((field) => (
+            <InputCreator
+              key={field.key}
+              schema={field}
+              namePrefix="parameters"
+              stepId={stepId}
+              disabled={disabled}
+              showOptionValue={true}
+            />
+          ))}
+        </React.Fragment>
       );
     }
 
     return (
-      <TextField
-        defaultValue={value}
-        required={required}
-        placeholder=""
-        readOnly={readOnly || disabled}
-        onChange={onChange}
-        onBlur={onBlur}
-        name={computedName}
-        label={label}
-        fullWidth
-        helperText={description}
-        clickToCopy={clickToCopy}
-      />
+      <React.Fragment>
+        <TextField
+          defaultValue={value}
+          required={required}
+          placeholder=""
+          readOnly={readOnly || disabled}
+          onChange={onChange}
+          onBlur={onBlur}
+          name={computedName}
+          label={label}
+          fullWidth
+          helperText={description}
+          clickToCopy={clickToCopy}
+        />
+
+        {(additionalFieldsLoading && !additionalFields?.length) && <div>
+          <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
+        </div>}
+
+        {additionalFields?.map((field) => (
+          <InputCreator
+            key={field.key}
+            schema={field}
+            namePrefix="parameters"
+            stepId={stepId}
+            disabled={disabled}
+            showOptionValue={true}
+          />
+        ))}
+      </React.Fragment>
     );
   }