Add flexible form fields to trigger form WIP

apache · Dec 29, 2024 · 83c450e · 83c450e
1 parent 71a5ad9
commit 83c450e
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 33 deletions.
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx
@@ -22,13 +22,13 @@ import { Switch } from "../ui";
 export const isFieldBool = (fieldType: string) => fieldType === "boolean";
 
 export const FlexibleFormFieldBool = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Switch
     colorPalette="blue"
     defaultChecked={param.value as boolean}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
   />
 );
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx
@@ -24,13 +24,13 @@ export const isFieldDate = (fieldType: string, fieldFormat: string | null) =>
   fieldType === "string" && fieldFormat === "date";
 
 export const FlexibleFormFieldDate = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder="yyyy-mm-dd"
     size="sm"
     type="date"

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx
@@ -26,13 +26,13 @@ export const isFieldDateTime = (
 ) => fieldType === "string" && fieldFormat === "date-time";
 
 export const FlexibleFormFieldDateTime = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder="yyyy-mm-ddThh:mm"
     size="sm"
     type="datetime-local"

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx
@@ -43,7 +43,7 @@ const labelLookup = (
 };
 
 export const FlexibleFormFieldDropdown = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => {
   const selectOptions = createListCollection({
@@ -59,8 +59,8 @@ export const FlexibleFormFieldDropdown = ({
     <Select.Root
       collection={selectOptions}
       defaultValue={[param.value as string]}
-      id={`element_${key}`}
-      name={`element_${key}`}
+      id={`element_${name}`}
+      name={`element_${name}`}
       size="sm"
     >
       <Select.Trigger>

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldString.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldString.tsx
@@ -21,13 +21,13 @@ import { Input } from "@chakra-ui/react";
 import type { FlexibleFormElementProps } from ".";
 
 export const FlexibleFormFieldString = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder={JSON.stringify(param.value)}
     size="sm"
   />

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx
@@ -24,13 +24,13 @@ export const isFieldTime = (fieldType: string, fieldFormat: string | null) =>
   fieldType === "string" && fieldFormat === "date";
 
 export const FlexibleFormFieldTime = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Input
     defaultValue={param.value as string}
-    id={`element_${key}`}
-    name={`element_${key}`}
+    id={`element_${name}`}
+    name={`element_${name}`}
     placeholder="hh:mm"
     size="sm"
     type="time"

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx
@@ -26,13 +26,13 @@ export const isHidden = (param: ParamSpec) => Boolean(param.schema.const);
 
 /** Render a "const" field where user can not change data as hidden */
 export const FlexibleFormHidden = ({
-  key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <VisuallyHidden asChild>
     <input
-      id={`element_${key}`}
-      name={`element_${key}`}
+      id={`element_${name}`}
+      name={`element_${name}`}
       type="hidden"
       value={param.value as string}
     />

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx
@@ -63,21 +63,22 @@ const inferType = (param: ParamSpec) => {
 
 export const FlexibleFormSelectElement = ({
   key,
+  name,
   param,
 }: FlexibleFormElementProps) => {
   // FUTURE: Add support for other types as described in AIP-68 via Plugins
   const fieldType = inferType(param);
 
   if (isFieldBool(fieldType)) {
-    return <FlexibleFormFieldBool key={key} param={param} />;
+    return <FlexibleFormFieldBool key={key} name={name} param={param} />;
   } else if (isFieldDateTime(fieldType, param.schema.format)) {
-    return <FlexibleFormFieldDateTime key={key} param={param} />;
+    return <FlexibleFormFieldDateTime key={key} name={name} param={param} />;
   } else if (isFieldDate(fieldType, param.schema.format)) {
-    return <FlexibleFormFieldDate key={key} param={param} />;
+    return <FlexibleFormFieldDate key={key} name={name} param={param} />;
   } else if (isFieldTime(fieldType, param.schema.format)) {
-    return <FlexibleFormFieldTime key={key} param={param} />;
+    return <FlexibleFormFieldTime key={key} name={name} param={param} />;
   } else if (isFieldDropdown(fieldType, param.schema.enum)) {
-    return <FlexibleFormFieldDropdown key={key} param={param} />;
+    return <FlexibleFormFieldDropdown key={key} name={name} param={param} />;
   } else {
     // TODO other elements like number, integer, select etc.
     // Missing:
@@ -88,23 +89,24 @@ export const FlexibleFormSelectElement = ({
     // - Number (Into or generic number input)
     // - Multiline Text
     // see airflow/www/templates/airflow/trigger.html for logic in Airflow 2
-    return <FlexibleFormFieldString key={key} param={param} />;
+    return <FlexibleFormFieldString key={key} name={name} param={param} />;
   }
 };
 
 /** Render a normal form row with a field that is auto-selected */
 export const FlexibleFormNormalRow = ({
   key,
+  name,
   param,
 }: FlexibleFormElementProps) => (
   <Field.Root orientation="horizontal" required={isRequired(param)}>
     <Stack css={{ "flex-basis": "30%" }}>
       <Field.Label css={{ "flex-basis": "0" }} fontSize="md">
-        {param.schema.title ?? key} <Field.RequiredIndicator />
+        {param.schema.title ?? name} <Field.RequiredIndicator />
       </Field.Label>
     </Stack>
     <Stack css={{ "flex-basis": "70%" }}>
-      <FlexibleFormSelectElement key={key} param={param} />
+      <FlexibleFormSelectElement key={key} name={name} param={param} />
       <Field.HelperText>
         {param.description ?? (
           <Markdown>{param.schema.description_md}</Markdown>

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx
@@ -21,9 +21,13 @@ import { FlexibleFormHidden, isHidden } from "./FlexibleFormHidden";
 import { FlexibleFormNormalRow } from "./FlexibleFormNormalRow";
 
 /** Generates a form row */
-export const FlexibleFormRow = ({ key, param }: FlexibleFormElementProps) =>
+export const FlexibleFormRow = ({
+  key,
+  name,
+  param,
+}: FlexibleFormElementProps) =>
   isHidden(param) ? (
-    <FlexibleFormHidden key={key} param={param} />
+    <FlexibleFormHidden key={key} name={name} param={param} />
   ) : (
-    <FlexibleFormNormalRow key={key} param={param} />
+    <FlexibleFormNormalRow key={key} name={name} param={param} />
   );
diff --git a/airflow/ui/src/components/FlexibleForm/index.tsx b/airflow/ui/src/components/FlexibleForm/index.tsx
@@ -28,14 +28,15 @@ type FlexibleFormProps = {
 
 export type FlexibleFormElementProps = {
   readonly key: string;
+  readonly name: string;
   readonly param: ParamSpec;
 };
 
 const FlexibleForm = ({ params }: FlexibleFormProps) => (
   // TODO: Support multiple sections - at the moment all is rendered flat
   <Stack separator={<StackSeparator />}>
     {Object.entries(params).map(([name, param]) => (
-      <FlexibleFormRow key={name} param={param} />
+      <FlexibleFormRow key={name} name={name} param={param} />
     ))}
   </Stack>
 );