Add flexible form fields to trigger form WIP

airflow/ui/src/components/FlexibleForm/FlexibleFormFieldBool.tsx

@@ -0,0 +1,34 @@
+/*!
+ * 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 { FlexibleFormElementProps } from ".";
+import { Switch } from "../ui";
+
+export const isFieldBool = (fieldType: string) => fieldType === "boolean";
+
+export const FlexibleFormFieldBool = ({
+  key,
+  param,
+}: FlexibleFormElementProps) => (
+  <Switch
+    colorPalette="blue"
+    defaultChecked={param.value as boolean}
+    id={`element_${key}`}
+    name={`element_${key}`}
+  />
+);

airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDate.tsx

@@ -0,0 +1,38 @@
+/*!
+ * 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 { Input } from "@chakra-ui/react";
+
+import type { FlexibleFormElementProps } from ".";
+
+export const isFieldDate = (fieldType: string, fieldFormat: string | null) =>
+  fieldType === "string" && fieldFormat === "date";
+
+export const FlexibleFormFieldDate = ({
+  key,
+  param,
+}: FlexibleFormElementProps) => (
+  <Input
+    defaultValue={param.value as string}
+    id={`element_${key}`}
+    name={`element_${key}`}
+    placeholder="yyyy-mm-dd"
+    size="sm"
+    type="date"
+  />
+);

airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDateTime.tsx

@@ -0,0 +1,40 @@
+/*!
+ * 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 { Input } from "@chakra-ui/react";
+
+import type { FlexibleFormElementProps } from ".";
+
+export const isFieldDateTime = (
+  fieldType: string,
+  fieldFormat: string | null,
+) => fieldType === "string" && fieldFormat === "date-time";
+
+export const FlexibleFormFieldDateTime = ({
+  key,
+  param,
+}: FlexibleFormElementProps) => (
+  <Input
+    defaultValue={param.value as string}
+    id={`element_${key}`}
+    name={`element_${key}`}
+    placeholder="yyyy-mm-ddThh:mm"
+    size="sm"
+    type="datetime-local"
+  />
+);

airflow/ui/src/components/FlexibleForm/FlexibleFormFieldDropdown.tsx

@@ -0,0 +1,78 @@
+/*!
+ * 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 { createListCollection } from "@chakra-ui/react/collection";
+
+import { Select } from "src/components/ui";
+
+import type { FlexibleFormElementProps } from ".";
+
+export const isFieldDropdown = (
+  fieldType: string,
+  fieldEnum: Array<string> | null,
+) => {
+  const enumTypes = ["string", "number", "integer"];
+
+  return enumTypes.includes(fieldType) && Array.isArray(fieldEnum);
+};
+
+const labelLookup = (
+  key: string,
+  valuesDisplay: Record<string, string> | null,
+): string => {
+  if (valuesDisplay && typeof valuesDisplay === "object") {
+    return valuesDisplay[key] ?? key;
+  }
+
+  return key;
+};
+
+export const FlexibleFormFieldDropdown = ({
+  key,
+  param,
+}: FlexibleFormElementProps) => {
+  const selectOptions = createListCollection({
+    items:
+      param.schema.enum?.map((value) => ({
+        label: labelLookup(value, param.schema.values_display),
+        value,
+      })) ?? [],
+  });
+
+  // TODO - somehow the dropdown is not working, does not give options :-(
+  return (
+    <Select.Root
+      collection={selectOptions}
+      defaultValue={[param.value as string]}
+      id={`element_${key}`}
+      name={`element_${key}`}
+      size="sm"
+    >
+      <Select.Trigger>
+        <Select.ValueText placeholder="Select Value" />
+      </Select.Trigger>
+      <Select.Content>
+        {selectOptions.items.map((option) => (
+          <Select.Item item={option} key={option.value}>
+            {option.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+};

airflow/ui/src/components/FlexibleForm/FlexibleFormFieldString.tsx

@@ -0,0 +1,37 @@
+/*!
+ * 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 { Input } from "@chakra-ui/react";
+
+import type { FlexibleFormElementProps } from ".";
+
+export const FlexibleFormFieldString = ({
+  key,
+  param,
+}: FlexibleFormElementProps) => (
+  <Input
+    defaultValue={param.value as string}
+    id={`element_${key}`}
+    name={`element_${key}`}
+    placeholder={JSON.stringify(param.value)}
+    size="sm"
+  />
+  // TODO: Add features missing from the current implementation
+  // - Maximum Length / Minimum Length
+  // - Examples as proposal
+);

airflow/ui/src/components/FlexibleForm/FlexibleFormFieldTime.tsx

@@ -0,0 +1,38 @@
+/*!
+ * 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 { Input } from "@chakra-ui/react";
+
+import type { FlexibleFormElementProps } from ".";
+
+export const isFieldTime = (fieldType: string, fieldFormat: string | null) =>
+  fieldType === "string" && fieldFormat === "date";
+
+export const FlexibleFormFieldTime = ({
+  key,
+  param,
+}: FlexibleFormElementProps) => (
+  <Input
+    defaultValue={param.value as string}
+    id={`element_${key}`}
+    name={`element_${key}`}
+    placeholder="hh:mm"
+    size="sm"
+    type="time"
+  />
+);

airflow/ui/src/components/FlexibleForm/FlexibleFormHidden.tsx

@@ -0,0 +1,40 @@
+/*!
+ * 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 { VisuallyHidden } from "@chakra-ui/react";
+
+import type { ParamSpec } from "src/queries/useDagParams";
+
+import type { FlexibleFormElementProps } from ".";
+
+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,
+  param,
+}: FlexibleFormElementProps) => (
+  <VisuallyHidden asChild>
+    <input
+      id={`element_${key}`}
+      name={`element_${key}`}
+      type="hidden"
+      value={param.value as string}
+    />
+  </VisuallyHidden>
+);