From 313d868dd86e00e2f59bb52f60e9591af993ab25 Mon Sep 17 00:00:00 2001
From: Jens Scheffler <jens.scheffler@de.bosch.com>
Date: Sat, 4 Jan 2025 17:10:04 +0100
Subject: [PATCH] Review feedback, remove reloading warnings, move selector
 functions to separate TSX file

---
 .../FlexibleFormFieldAdvancedArray.tsx        |   4 -
 .../FlexibleForm/FlexibleFormFieldBool.tsx    |   2 -
 .../FlexibleForm/FlexibleFormFieldDate.tsx    |   5 -
 .../FlexibleFormFieldDateTime.tsx             |   5 -
 .../FlexibleFormFieldDropdown.tsx             |   6 -
 .../FlexibleFormFieldMultiSelect.tsx          |   5 -
 .../FlexibleFormFieldMultilineText.tsx        |   5 -
 .../FlexibleForm/FlexibleFormFieldNumber.tsx  |   6 -
 .../FlexibleForm/FlexibleFormFieldObject.tsx  |   2 -
 .../FlexibleFormFieldStringArray.tsx          |   6 -
 .../FlexibleForm/FlexibleFormFieldTime.tsx    |   5 -
 .../FlexibleForm/FlexibleFormHidden.tsx       |   4 -
 .../FlexibleForm/FlexibleFormNormalRow.tsx    |  63 +--------
 .../FlexibleForm/FlexibleFormRow.tsx          |   6 +-
 .../FlexibleFormSelectElement.tsx             | 120 ++++++++++++++++++
 .../ui/src/components/FlexibleForm/index.tsx  |   2 +-
 16 files changed, 127 insertions(+), 119 deletions(-)
 create mode 100644 airflow/ui/src/components/FlexibleForm/FlexibleFormSelectElement.tsx

diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldAdvancedArray.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldAdvancedArray.tsx
index 6c12c3d4dfa5e..3a1590d0559bc 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldAdvancedArray.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldAdvancedArray.tsx
@@ -21,13 +21,9 @@ import { githubLight, githubDark } from "@uiw/codemirror-themes-all";
 import CodeMirror from "@uiw/react-codemirror";
 
 import { useColorMode } from "src/context/colorMode";
-import type { ParamSchema } from "src/queries/useDagParams";
 
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldAdvancedArray = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "array" && fieldSchema.items?.type !== "string";
-
 export const FlexibleFormFieldAdvancedArray = ({ name, param }: FlexibleFormElementProps) => {
   const { colorMode } = useColorMode();
 
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx
index 98b11d6476e9f..9e61401150496 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx
@@ -19,8 +19,6 @@
 import type { FlexibleFormElementProps } from ".";
 import { Switch } from "../ui";
 
-export const isFieldBool = (fieldType: string) => fieldType === "boolean";
-
 export const FlexibleFormFieldBool = ({ name, param }: FlexibleFormElementProps) => (
   <Switch
     colorPalette="blue"
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx
index 21f8d3a5ad35e..4106d7941e140 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx
@@ -18,13 +18,8 @@
  */
 import { Input } from "@chakra-ui/react";
 
-import type { ParamSchema } from "src/queries/useDagParams";
-
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldDate = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "string" && fieldSchema.format === "date";
-
 export const FlexibleFormFieldDate = ({ name, param }: FlexibleFormElementProps) => (
   <Input
     defaultValue={typeof param.value === "string" ? param.value : undefined}
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx
index 01c5b324331c0..0dc917148dc79 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx
@@ -18,13 +18,8 @@
  */
 import { Input } from "@chakra-ui/react";
 
-import type { ParamSchema } from "src/queries/useDagParams";
-
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldDateTime = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "string" && fieldSchema.format === "date-time";
-
 export const FlexibleFormFieldDateTime = ({ name, param }: FlexibleFormElementProps) => (
   <Input
     defaultValue={typeof param.value === "string" ? param.value : undefined}
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx
index 0685785cdf14e..eb87a082919f2 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx
@@ -20,15 +20,9 @@ import { createListCollection } from "@chakra-ui/react/collection";
 import { useRef } from "react";
 
 import { Select } from "src/components/ui";
-import type { ParamSchema } from "src/queries/useDagParams";
 
 import type { FlexibleFormElementProps } from ".";
 
-const enumTypes = ["string", "number", "integer"];
-
-export const isFieldDropdown = (fieldType: string, fieldSchema: ParamSchema) =>
-  enumTypes.includes(fieldType) && Array.isArray(fieldSchema.enum);
-
 const labelLookup = (key: string, valuesDisplay: Record<string, string> | null): string => {
   if (valuesDisplay && typeof valuesDisplay === "object") {
     return valuesDisplay[key] ?? key;
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultiSelect.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultiSelect.tsx
index e5d9b634f6577..3d7fe6cf11c94 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultiSelect.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultiSelect.tsx
@@ -19,13 +19,8 @@
 import { Select as ReactSelect } from "chakra-react-select";
 import { useState } from "react";
 
-import type { ParamSchema } from "src/queries/useDagParams";
-
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldMultiSelect = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "array" && Array.isArray(fieldSchema.examples);
-
 const labelLookup = (key: string, valuesDisplay: Record<string, string> | null): string => {
   if (valuesDisplay && typeof valuesDisplay === "object") {
     return valuesDisplay[key] ?? key;
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultilineText.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultilineText.tsx
index 531498e95d53f..73cae3dbfaf0a 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultilineText.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldMultilineText.tsx
@@ -18,13 +18,8 @@
  */
 import { Textarea } from "@chakra-ui/react";
 
-import type { ParamSchema } from "src/queries/useDagParams";
-
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldMultilineText = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "string" && fieldSchema.format === "multiline";
-
 export const FlexibleFormFieldMultilineText = ({ name, param }: FlexibleFormElementProps) => (
   <Textarea
     defaultValue={typeof param.value === "string" ? param.value : String(param.value)}
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldNumber.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldNumber.tsx
index d695167842fd4..9856a237d90e9 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldNumber.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldNumber.tsx
@@ -19,12 +19,6 @@
 import type { FlexibleFormElementProps } from ".";
 import { NumberInputField, NumberInputRoot } from "../ui/NumberInput";
 
-export const isFieldNumber = (fieldType: string) => {
-  const numberTypes = ["integer", "number"];
-
-  return numberTypes.includes(fieldType);
-};
-
 export const FlexibleFormFieldNumber = ({ name, param }: FlexibleFormElementProps) => (
   <NumberInputRoot
     allowMouseWheel
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldObject.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldObject.tsx
index dc3a209c12621..0bd4468ab4ebc 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldObject.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldObject.tsx
@@ -24,8 +24,6 @@ import { useColorMode } from "src/context/colorMode";
 
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldObject = (fieldType: string) => fieldType === "object";
-
 export const FlexibleFormFieldObject = ({ name, param }: FlexibleFormElementProps) => {
   const { colorMode } = useColorMode();
 
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldStringArray.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldStringArray.tsx
index 9ac06bc5bbbdf..b7465bcc49576 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldStringArray.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldStringArray.tsx
@@ -18,14 +18,8 @@
  */
 import { Textarea } from "@chakra-ui/react";
 
-import type { ParamSchema } from "src/queries/useDagParams";
-
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldStringArray = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "array" &&
-  (!fieldSchema.items || fieldSchema.items.type === undefined || fieldSchema.items.type === "string");
-
 export const FlexibleFormFieldStringArray = ({ name, param }: FlexibleFormElementProps) => (
   <Textarea
     defaultValue={
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx
index 0a6cb163e53d7..6cab9f7098227 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx
@@ -18,13 +18,8 @@
  */
 import { Input } from "@chakra-ui/react";
 
-import type { ParamSchema } from "src/queries/useDagParams";
-
 import type { FlexibleFormElementProps } from ".";
 
-export const isFieldTime = (fieldType: string, fieldSchema: ParamSchema) =>
-  fieldType === "string" && fieldSchema.format === "date";
-
 export const FlexibleFormFieldTime = ({ name, param }: FlexibleFormElementProps) => (
   <Input
     defaultValue={typeof param.value === "string" ? param.value : undefined}
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx
index 2e00e76f77838..7bc735f6f25b4 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx
@@ -18,12 +18,8 @@
  */
 import { VisuallyHidden } from "@chakra-ui/react";
 
-import type { ParamSchema } from "src/queries/useDagParams";
-
 import type { FlexibleFormElementProps } from ".";
 
-export const isHidden = (fieldSchema: ParamSchema) => Boolean(fieldSchema.const);
-
 /** Render a "const" field where user can not change data as hidden */
 export const FlexibleFormHidden = ({ name, param }: FlexibleFormElementProps) => (
   <VisuallyHidden asChild>
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx
index 13993db465819..d55251849dd3e 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormNormalRow.tsx
@@ -23,18 +23,7 @@ import remarkGfm from "remark-gfm";
 import type { ParamSpec } from "src/queries/useDagParams";
 
 import type { FlexibleFormElementProps } from ".";
-import { FlexibleFormFieldAdvancedArray, isFieldAdvancedArray } from "./FlexibleFormFieldAdvancedArray";
-import { FlexibleFormFieldBool, isFieldBool } from "./FlexibleFormFieldBool";
-import { FlexibleFormFieldDate, isFieldDate } from "./FlexibleFormFieldDate";
-import { FlexibleFormFieldDateTime, isFieldDateTime } from "./FlexibleFormFieldDateTime";
-import { FlexibleFormFieldDropdown, isFieldDropdown } from "./FlexibleFormFieldDropdown";
-import { FlexibleFormFieldMultiSelect, isFieldMultiSelect } from "./FlexibleFormFieldMultiSelect";
-import { FlexibleFormFieldMultilineText, isFieldMultilineText } from "./FlexibleFormFieldMultilineText";
-import { FlexibleFormFieldNumber, isFieldNumber } from "./FlexibleFormFieldNumber";
-import { FlexibleFormFieldObject, isFieldObject } from "./FlexibleFormFieldObject";
-import { FlexibleFormFieldString } from "./FlexibleFormFieldString";
-import { FlexibleFormFieldStringArray, isFieldStringArray } from "./FlexibleFormFieldStringArray";
-import { FlexibleFormFieldTime, isFieldTime } from "./FlexibleFormFieldTime";
+import { FlexibleFormSelectElement } from "./FlexibleFormSelectElement";
 
 const isRequired = (param: ParamSpec) =>
   // The field is required if the schema type is defined.
@@ -42,56 +31,6 @@ const isRequired = (param: ParamSpec) =>
   // We assume that "null" is only defined if the type is an array.
   Boolean(param.schema.type) && (!Array.isArray(param.schema.type) || !param.schema.type.includes("null"));
 
-const inferType = (param: ParamSpec) => {
-  if (Boolean(param.schema.type)) {
-    // If there are multiple types, we assume that the first one is the correct one that is not "null".
-    // "null" is only used to signal the value is optional.
-    if (Array.isArray(param.schema.type)) {
-      return param.schema.type.find((type) => type !== "null") ?? "string";
-    }
-
-    return param.schema.type ?? "string";
-  }
-
-  // If the type is not defined, we infer it from the value.
-  if (Array.isArray(param.value)) {
-    return "array";
-  }
-
-  return typeof param.value;
-};
-
-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} name={name} param={param} />;
-  } else if (isFieldDateTime(fieldType, param.schema)) {
-    return <FlexibleFormFieldDateTime key={key} name={name} param={param} />;
-  } else if (isFieldDate(fieldType, param.schema)) {
-    return <FlexibleFormFieldDate key={key} name={name} param={param} />;
-  } else if (isFieldTime(fieldType, param.schema)) {
-    return <FlexibleFormFieldTime key={key} name={name} param={param} />;
-  } else if (isFieldDropdown(fieldType, param.schema)) {
-    return <FlexibleFormFieldDropdown key={key} name={name} param={param} />;
-  } else if (isFieldMultiSelect(fieldType, param.schema)) {
-    return <FlexibleFormFieldMultiSelect key={key} name={name} param={param} />;
-  } else if (isFieldStringArray(fieldType, param.schema)) {
-    return <FlexibleFormFieldStringArray key={key} name={name} param={param} />;
-  } else if (isFieldAdvancedArray(fieldType, param.schema)) {
-    return <FlexibleFormFieldAdvancedArray key={key} name={name} param={param} />;
-  } else if (isFieldObject(fieldType)) {
-    return <FlexibleFormFieldObject key={key} name={name} param={param} />;
-  } else if (isFieldNumber(fieldType)) {
-    return <FlexibleFormFieldNumber key={key} name={name} param={param} />;
-  } else if (isFieldMultilineText(fieldType, param.schema)) {
-    return <FlexibleFormFieldMultilineText key={key} name={name} param={param} />;
-  } else {
-    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)}>
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx
index 652f37910d99c..a2acb6ab0b3b8 100644
--- a/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormRow.tsx
@@ -16,10 +16,14 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import type { ParamSchema } from "src/queries/useDagParams";
+
 import type { FlexibleFormElementProps } from ".";
-import { FlexibleFormHidden, isHidden } from "./FlexibleFormHidden";
+import { FlexibleFormHidden } from "./FlexibleFormHidden";
 import { FlexibleFormNormalRow } from "./FlexibleFormNormalRow";
 
+const isHidden = (fieldSchema: ParamSchema) => Boolean(fieldSchema.const);
+
 /** Generates a form row */
 export const FlexibleFormRow = ({ key, name, param }: FlexibleFormElementProps) =>
   isHidden(param.schema) ? (
diff --git a/airflow/ui/src/components/FlexibleForm/FlexibleFormSelectElement.tsx b/airflow/ui/src/components/FlexibleForm/FlexibleFormSelectElement.tsx
new file mode 100644
index 0000000000000..1d8cbde1313c0
--- /dev/null
+++ b/airflow/ui/src/components/FlexibleForm/FlexibleFormSelectElement.tsx
@@ -0,0 +1,120 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { ParamSchema, ParamSpec } from "src/queries/useDagParams";
+
+import type { FlexibleFormElementProps } from ".";
+import { FlexibleFormFieldAdvancedArray } from "./FlexibleFormFieldAdvancedArray";
+import { FlexibleFormFieldBool } from "./FlexibleFormFieldBool";
+import { FlexibleFormFieldDate } from "./FlexibleFormFieldDate";
+import { FlexibleFormFieldDateTime } from "./FlexibleFormFieldDateTime";
+import { FlexibleFormFieldDropdown } from "./FlexibleFormFieldDropdown";
+import { FlexibleFormFieldMultiSelect } from "./FlexibleFormFieldMultiSelect";
+import { FlexibleFormFieldMultilineText } from "./FlexibleFormFieldMultilineText";
+import { FlexibleFormFieldNumber } from "./FlexibleFormFieldNumber";
+import { FlexibleFormFieldObject } from "./FlexibleFormFieldObject";
+import { FlexibleFormFieldString } from "./FlexibleFormFieldString";
+import { FlexibleFormFieldStringArray } from "./FlexibleFormFieldStringArray";
+import { FlexibleFormFieldTime } from "./FlexibleFormFieldTime";
+
+const inferType = (param: ParamSpec) => {
+  if (Boolean(param.schema.type)) {
+    // If there are multiple types, we assume that the first one is the correct one that is not "null".
+    // "null" is only used to signal the value is optional.
+    if (Array.isArray(param.schema.type)) {
+      return param.schema.type.find((type) => type !== "null") ?? "string";
+    }
+
+    return param.schema.type ?? "string";
+  }
+
+  // If the type is not defined, we infer it from the value.
+  if (Array.isArray(param.value)) {
+    return "array";
+  }
+
+  return typeof param.value;
+};
+
+const isFieldAdvancedArray = (fieldType: string, fieldSchema: ParamSchema) =>
+  fieldType === "array" && fieldSchema.items?.type !== "string";
+
+const isFieldBool = (fieldType: string) => fieldType === "boolean";
+
+const isFieldDate = (fieldType: string, fieldSchema: ParamSchema) =>
+  fieldType === "string" && fieldSchema.format === "date";
+
+const isFieldDateTime = (fieldType: string, fieldSchema: ParamSchema) =>
+  fieldType === "string" && fieldSchema.format === "date-time";
+
+const enumTypes = ["string", "number", "integer"];
+
+const isFieldDropdown = (fieldType: string, fieldSchema: ParamSchema) =>
+  enumTypes.includes(fieldType) && Array.isArray(fieldSchema.enum);
+
+const isFieldMultilineText = (fieldType: string, fieldSchema: ParamSchema) =>
+  fieldType === "string" && fieldSchema.format === "multiline";
+
+const isFieldMultiSelect = (fieldType: string, fieldSchema: ParamSchema) =>
+  fieldType === "array" && Array.isArray(fieldSchema.examples);
+
+const isFieldNumber = (fieldType: string) => {
+  const numberTypes = ["integer", "number"];
+
+  return numberTypes.includes(fieldType);
+};
+
+const isFieldObject = (fieldType: string) => fieldType === "object";
+
+const isFieldStringArray = (fieldType: string, fieldSchema: ParamSchema) =>
+  fieldType === "array" &&
+  (!fieldSchema.items || fieldSchema.items.type === undefined || fieldSchema.items.type === "string");
+
+const isFieldTime = (fieldType: string, fieldSchema: ParamSchema) =>
+  fieldType === "string" && fieldSchema.format === "date";
+
+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} name={name} param={param} />;
+  } else if (isFieldDateTime(fieldType, param.schema)) {
+    return <FlexibleFormFieldDateTime key={key} name={name} param={param} />;
+  } else if (isFieldDate(fieldType, param.schema)) {
+    return <FlexibleFormFieldDate key={key} name={name} param={param} />;
+  } else if (isFieldTime(fieldType, param.schema)) {
+    return <FlexibleFormFieldTime key={key} name={name} param={param} />;
+  } else if (isFieldDropdown(fieldType, param.schema)) {
+    return <FlexibleFormFieldDropdown key={key} name={name} param={param} />;
+  } else if (isFieldMultiSelect(fieldType, param.schema)) {
+    return <FlexibleFormFieldMultiSelect key={key} name={name} param={param} />;
+  } else if (isFieldStringArray(fieldType, param.schema)) {
+    return <FlexibleFormFieldStringArray key={key} name={name} param={param} />;
+  } else if (isFieldAdvancedArray(fieldType, param.schema)) {
+    return <FlexibleFormFieldAdvancedArray key={key} name={name} param={param} />;
+  } else if (isFieldObject(fieldType)) {
+    return <FlexibleFormFieldObject key={key} name={name} param={param} />;
+  } else if (isFieldNumber(fieldType)) {
+    return <FlexibleFormFieldNumber key={key} name={name} param={param} />;
+  } else if (isFieldMultilineText(fieldType, param.schema)) {
+    return <FlexibleFormFieldMultilineText key={key} name={name} param={param} />;
+  } else {
+    return <FlexibleFormFieldString key={key} name={name} param={param} />;
+  }
+};
diff --git a/airflow/ui/src/components/FlexibleForm/index.tsx b/airflow/ui/src/components/FlexibleForm/index.tsx
index f3eae7331f6f6..3384d338408a3 100644
--- a/airflow/ui/src/components/FlexibleForm/index.tsx
+++ b/airflow/ui/src/components/FlexibleForm/index.tsx
@@ -57,7 +57,7 @@ const FlexibleForm = ({ params }: FlexibleFormProps) => {
           const currentSection = secParam.schema.section;
 
           if (processedSections.has(currentSection)) {
-            return null;
+            return undefined;
           } else {
             processedSections.set(currentSection, true);