From b71dbdb7836e3d9e07b52fd162a2ac568e53a2d0 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Tue, 21 May 2024 15:46:16 +0200
Subject: [PATCH] :children_crossing: Add variables button in forged select
 input by default

Closes #1525
---
 .../forge/components/ForgeSelectInput.tsx     | 24 ++++++++++++++-----
 .../components/zodLayouts/ZodFieldLayout.tsx  |  1 +
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/builder/src/features/forge/components/ForgeSelectInput.tsx b/apps/builder/src/features/forge/components/ForgeSelectInput.tsx
index d0b94aa15..ab1e384ab 100644
--- a/apps/builder/src/features/forge/components/ForgeSelectInput.tsx
+++ b/apps/builder/src/features/forge/components/ForgeSelectInput.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 import { Select } from '@/components/inputs/Select'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
@@ -29,6 +30,7 @@ type Props = {
   direction?: 'row' | 'column'
   isRequired?: boolean
   width?: 'full'
+  withVariableButton?: boolean
   onChange: (value: string | undefined) => void
 }
 export const ForgeSelectInput = ({
@@ -43,6 +45,7 @@ export const ForgeSelectInput = ({
   isRequired,
   direction = 'column',
   width,
+  withVariableButton = false,
   onChange,
 }: Props) => {
   const { workspace } = useWorkspace()
@@ -99,12 +102,21 @@ export const ForgeSelectInput = ({
           )}
         </FormLabel>
       )}
-      <Select
-        items={data?.items}
-        selectedItem={defaultValue}
-        onSelect={onChange}
-        placeholder={placeholder}
-      />
+      <HStack spacing="0">
+        <Select
+          items={data?.items}
+          selectedItem={defaultValue}
+          onSelect={onChange}
+          placeholder={placeholder}
+        />
+        {withVariableButton ? (
+          <VariablesButton
+            onSelectVariable={(variable) => {
+              onChange(`{{${variable.name}}}`)
+            }}
+          />
+        ) : null}
+      </HStack>
       {helperText && <FormHelperText mt="0">{helperText}</FormHelperText>}
     </FormControl>
   )
diff --git a/apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx b/apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx
index 1d1fcdc49..68a3d8721 100644
--- a/apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx
+++ b/apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx
@@ -204,6 +204,7 @@ export const ZodFieldLayout = ({
             moreInfoTooltip={layout?.moreInfoTooltip}
             onChange={onDataChange}
             width={width}
+            withVariableButton={layout.withVariableButton ?? true}
           />
         )
       }