feat(Editor): implement dynamic fields

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

@@ -27,7 +27,7 @@ function ControlledAutocomplete(
     required = false,
     name,
     defaultValue,
-    shouldUnregister,
+    shouldUnregister = true,
     onBlur,
     onChange,
     description,

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>
     );
   }
 

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

@@ -81,7 +81,7 @@ const PowerInput = (props: PowerInputProps) => {
       name={name}
       control={control}
       defaultValue={defaultValue}
-      shouldUnregister={false}
+      shouldUnregister={true}
       render={({
         field: {
           value,

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

@@ -38,9 +38,10 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
     required,
     name,
     defaultValue,
-    shouldUnregister,
-    clickToCopy,
-    readOnly,
+    shouldUnregister = true,
+    clickToCopy = false,
+    readOnly = false,
+    disabled = false,
     onBlur,
     onChange,
     ...textFieldProps
@@ -64,6 +65,7 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
         <MuiTextField
           {...textFieldProps}
           {...field}
+          disabled={disabled}
           onChange={(...args) => {
             controllerOnChange(...args);
             onChange?.(...args);
@@ -85,10 +87,3 @@ export default function TextField(props: TextFieldProps): React.ReactElement {
     />
   );
 }
-
-TextField.defaultProps = {
-  readOnly: false,
-  disabled: false,
-  clickToCopy: false,
-  shouldUnregister: false,
-};