Move form elements into a common accorion

apache · Jan 11, 2025 · de1a47c · de1a47c
1 parent f34880c
commit de1a47c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 36 deletions.
diff --git a/airflow/ui/src/components/FlexibleForm/index.tsx b/airflow/ui/src/components/FlexibleForm/index.tsx
@@ -38,19 +38,26 @@ const FlexibleForm = ({ params }: FlexibleFormProps) => {
 
   return (
     <>
-      <Stack separator={<StackSeparator />}>
-        {Object.keys(params).length > 0 && (
-          <Alert
-            status="warning"
-            title="Population of changes in trigger form fields is not implemented yet. Please stay tuned for upcoming updates... and change the run conf in the 'Advanced Options' conf section below meanwhile."
-          />
-        )}
-        {Object.entries(params)
-          .filter(([, param]) => typeof param.schema.section !== "string")
-          .map(([name, param]) => (
-            <Row key={name} name={name} param={param} />
-          ))}
-      </Stack>
+      {Object.entries(params).some(([, param]) => typeof param.schema.section !== "string") ? (
+        <Accordion.Item key="params" value="params">
+          <Accordion.ItemTrigger cursor="button">Run Parameters</Accordion.ItemTrigger>
+          <Accordion.ItemContent>
+            <Stack separator={<StackSeparator />}>
+              {Object.keys(params).length > 0 && (
+                <Alert
+                  status="warning"
+                  title="Population of changes in trigger form fields is not implemented yet. Please stay tuned for upcoming updates... and change the run conf in the 'Advanced Options' conf section below meanwhile."
+                />
+              )}
+              {Object.entries(params)
+                .filter(([, param]) => typeof param.schema.section !== "string")
+                .map(([name, param]) => (
+                  <Row key={name} name={name} param={param} />
+                ))}
+            </Stack>
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      ) : undefined}
       {Object.entries(params)
         .filter(([, secParam]) => secParam.schema.section)
         .map(([, secParam]) => {
@@ -62,27 +69,18 @@ const FlexibleForm = ({ params }: FlexibleFormProps) => {
             processedSections.set(currentSection, true);
 
             return (
-              <Accordion.Root
-                collapsible
-                key={secParam.schema.section}
-                mb={4}
-                mt={4}
-                size="lg"
-                variant="enclosed"
-              >
-                <Accordion.Item value={secParam.schema.section ?? ""}>
-                  <Accordion.ItemTrigger cursor="button">{secParam.schema.section}</Accordion.ItemTrigger>
-                  <Accordion.ItemContent>
-                    <Stack separator={<StackSeparator />}>
-                      {Object.entries(params)
-                        .filter(([, param]) => param.schema.section === currentSection)
-                        .map(([name, param]) => (
-                          <Row key={name} name={name} param={param} />
-                        ))}
-                    </Stack>
-                  </Accordion.ItemContent>
-                </Accordion.Item>
-              </Accordion.Root>
+              <Accordion.Item key={secParam.schema.section ?? ""} value={secParam.schema.section ?? ""}>
+                <Accordion.ItemTrigger cursor="button">{secParam.schema.section}</Accordion.ItemTrigger>
+                <Accordion.ItemContent>
+                  <Stack separator={<StackSeparator />}>
+                    {Object.entries(params)
+                      .filter(([, param]) => param.schema.section === currentSection)
+                      .map(([name, param]) => (
+                        <Row key={name} name={name} param={param} />
+                      ))}
+                  </Stack>
+                </Accordion.ItemContent>
+              </Accordion.Item>
             );
           }
         })}

diff --git a/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
@@ -131,8 +131,8 @@ const TriggerDAGForm = ({ dagId, onClose, open }: TriggerDAGFormProps) => {
 
   return (
     <>
-      <FlexibleForm params={paramsDict} />
-      <Accordion.Root collapsible mb={4} mt={4} size="lg" variant="enclosed">
+      <Accordion.Root collapsible defaultValue={["params"]} mb={4} mt={4} size="lg" variant="enclosed">
+        <FlexibleForm params={paramsDict} />
         <Accordion.Item key="advancedOptions" value="advancedOptions">
           <Accordion.ItemTrigger cursor="button">Advanced Options</Accordion.ItemTrigger>
           <Accordion.ItemContent>