From da4aa7a66b4ff829d2f4041b686ddaab1f5c9645 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Mon, 19 May 2025 11:48:49 -0400
Subject: [PATCH 1/2] Fix dropdowns in accordion and error text colors

---
 .../ui/src/components/FlexibleForm/FlexibleForm.tsx       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx
index ff1bd23a19897..a322cccd1667f 100644
--- a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx
+++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx
@@ -103,11 +103,13 @@ export const FlexibleForm = ({
           processedSections.set(currentSection, true);
 
           return (
-            <Accordion.Item key={currentSection} value={currentSection}>
+            <Accordion.Item key={currentSection} overflow="visible" value={currentSection}>
               <Accordion.ItemTrigger cursor="button">
-                <Text color={sectionError.get(currentSection) ? "red" : undefined}>{currentSection}</Text>
+                <Text color={sectionError.get(currentSection) ? "fg.error" : undefined}>
+                  {currentSection}
+                </Text>
                 {sectionError.get(currentSection) ? (
-                  <Icon color="red" margin="-1">
+                  <Icon color="fg.error" margin="-1">
                     <MdError />
                   </Icon>
                 ) : undefined}

From f1020e09be50278266855cd62c8714cc3a3992cf Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Tue, 20 May 2025 11:57:31 -0400
Subject: [PATCH 2/2] Fix dropdown overflow and var names

---
 .../components/FlexibleForm/FlexibleForm.tsx  | 30 ++++++++++++-------
 .../airflow/ui/src/queries/useParamStore.ts   |  4 +--
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx
index a322cccd1667f..4fea751e59960 100644
--- a/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx
+++ b/airflow-core/src/airflow/ui/src/components/FlexibleForm/FlexibleForm.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Icon, Stack, StackSeparator, Text } from "@chakra-ui/react";
+import { Icon, Stack, StackSeparator, Text } from "@chakra-ui/react";
 import { useCallback, useEffect, useState } from "react";
 import { MdError } from "react-icons/md";
 
@@ -39,7 +39,7 @@ export const FlexibleForm = ({
   initialParamsDict,
   setError,
 }: FlexibleFormProps) => {
-  const { paramsDict: params, setinitialParamDict, setParamsDict } = useParamStore();
+  const { paramsDict: params, setInitialParamDict, setParamsDict } = useParamStore();
   const processedSections = new Map();
   const [sectionError, setSectionError] = useState<Map<string, boolean>>(new Map());
 
@@ -62,17 +62,17 @@ export const FlexibleForm = ({
       const paramsCopy = structuredClone(initialParamsDict.paramsDict);
 
       setParamsDict(paramsCopy);
-      setinitialParamDict(initialParamsDict.paramsDict);
+      setInitialParamDict(initialParamsDict.paramsDict);
     }
-  }, [initialParamsDict, params, setParamsDict, setinitialParamDict]);
+  }, [initialParamsDict, params, setParamsDict, setInitialParamDict]);
 
   useEffect(
     () => () => {
       // Clear paramsDict and initialParamDict when the component is unmounted or modal closes
       setParamsDict({});
-      setinitialParamDict({});
+      setInitialParamDict({});
     },
-    [setParamsDict, setinitialParamDict],
+    [setParamsDict, setInitialParamDict],
   );
 
   useEffect(() => {
@@ -103,7 +103,16 @@ export const FlexibleForm = ({
           processedSections.set(currentSection, true);
 
           return (
-            <Accordion.Item key={currentSection} overflow="visible" value={currentSection}>
+            <Accordion.Item
+              // We need to make the item content overflow visible for dropdowns to work, but directly applying the style does not work
+              css={{
+                "& > :nth-child(2)": {
+                  overflow: "visible",
+                },
+              }}
+              key={currentSection}
+              value={currentSection}
+            >
               <Accordion.ItemTrigger cursor="button">
                 <Text color={sectionError.get(currentSection) ? "fg.error" : undefined}>
                   {currentSection}
@@ -114,8 +123,9 @@ export const FlexibleForm = ({
                   </Icon>
                 ) : undefined}
               </Accordion.ItemTrigger>
-              <Accordion.ItemContent paddingTop={0}>
-                <Box p={5}>
+
+              <Accordion.ItemContent pt={0}>
+                <Accordion.ItemBody>
                   <Stack separator={<StackSeparator />}>
                     {Object.entries(params)
                       .filter(
@@ -127,7 +137,7 @@ export const FlexibleForm = ({
                         <Row key={name} name={name} onUpdate={onUpdate} />
                       ))}
                   </Stack>
-                </Box>
+                </Accordion.ItemBody>
               </Accordion.ItemContent>
             </Accordion.Item>
           );
diff --git a/airflow-core/src/airflow/ui/src/queries/useParamStore.ts b/airflow-core/src/airflow/ui/src/queries/useParamStore.ts
index a68cba2d59459..749bf2b34f4cf 100644
--- a/airflow-core/src/airflow/ui/src/queries/useParamStore.ts
+++ b/airflow-core/src/airflow/ui/src/queries/useParamStore.ts
@@ -47,7 +47,7 @@ type FormStore = {
   initialParamDict: ParamsSpec;
   paramsDict: ParamsSpec;
   setConf: (confString: string) => void;
-  setinitialParamDict: (newParamsDict: ParamsSpec) => void;
+  setInitialParamDict: (newParamsDict: ParamsSpec) => void;
   setParamsDict: (newParamsDict: ParamsSpec) => void;
 };
 
@@ -83,7 +83,7 @@ export const useParamStore = create<FormStore>((set) => ({
       return { conf: confString, paramsDict: updatedParamsDict };
     }),
 
-  setinitialParamDict: (newParamsDict: ParamsSpec) => set(() => ({ initialParamDict: newParamsDict })),
+  setInitialParamDict: (newParamsDict: ParamsSpec) => set(() => ({ initialParamDict: newParamsDict })),
 
   setParamsDict: (newParamsDict: ParamsSpec) =>
     set((state) => {