feat(engine): 🚸 Improve input variable behaviour (for loops)

apps/builder/components/settings/GeneralSettingsForm.tsx

@@ -41,6 +41,12 @@ export const GeneralSettingsForm = ({
       isNewResultOnRefreshEnabled,
     })
 
+  const handleInputPrefillChange = (isInputPrefillEnabled: boolean) =>
+    onGeneralSettingsChange({
+      ...generalSettings,
+      isInputPrefillEnabled,
+    })
+
   return (
     <Stack spacing={6}>
       <UpgradeModal isOpen={isOpen} onClose={onClose} />
@@ -59,6 +65,13 @@ export const GeneralSettingsForm = ({
           onChange={handleSwitchChange}
         />
       </Flex>
+      <SwitchWithLabel
+        id="prefill"
+        label="Prefill input"
+        initialValue={generalSettings.isInputPrefillEnabled ?? true}
+        onCheckChange={handleInputPrefillChange}
+        moreInfoContent="Inputs are automatically pre-filled whenever its saving variable has a value"
+      />
       <SwitchWithLabel
         id="new-result"
         label="Create new session on page refresh"

apps/builder/components/shared/SwitchWithLabel.tsx

@@ -1,10 +1,19 @@
-import { FormLabel, HStack, Switch, SwitchProps } from '@chakra-ui/react'
+import {
+  chakra,
+  FormLabel,
+  HStack,
+  Switch,
+  SwitchProps,
+  Tooltip,
+} from '@chakra-ui/react'
+import { HelpCircleIcon } from 'assets/icons'
 import React, { useState } from 'react'
 
 type SwitchWithLabelProps = {
   id: string
   label: string
   initialValue: boolean
+  moreInfoContent?: string
   onCheckChange: (isChecked: boolean) => void
 } & SwitchProps
 
@@ -12,6 +21,7 @@ export const SwitchWithLabel = ({
   id,
   label,
   initialValue,
+  moreInfoContent,
   onCheckChange,
   ...props
 }: SwitchWithLabelProps) => {
@@ -23,9 +33,18 @@ export const SwitchWithLabel = ({
   }
   return (
     <HStack justifyContent="space-between">
-      <FormLabel htmlFor={id} mb="0">
-        {label}
-      </FormLabel>
+      <HStack>
+        <FormLabel htmlFor={id} mb="0" mr="0">
+          {label}
+        </FormLabel>
+        {moreInfoContent && (
+          <Tooltip label={moreInfoContent}>
+            <chakra.span cursor="pointer">
+              <HelpCircleIcon />
+            </chakra.span>
+          </Tooltip>
+        )}
+      </HStack>
       <Switch
         isChecked={isChecked}
         onChange={handleChange}