feat: add dag_run_conf to RunBackfillForm

guan404ming · bbovenzi · guan404ming · commit 14b04f26ceee · 2025-04-29T22:10:57.000+08:00
Co-authored-by: Brent Bovenzi &lt;4600967+bbovenzi@users.noreply.github.com&gt;
diff --git a/airflow-core/src/airflow/ui/src/components/ConfigForm.tsx b/airflow-core/src/airflow/ui/src/components/ConfigForm.tsx
@@ -0,0 +1,118 @@
+/*!
+ * 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 { Accordion, Box, Field } from "@chakra-ui/react";
+import { type Control, type FieldValues, type Path, Controller } from "react-hook-form";
+
+import type { ParamsSpec } from "src/queries/useDagParams";
+import { useParamStore } from "src/queries/useParamStore";
+
+import { FlexibleForm, flexibleFormDefaultSection } from "./FlexibleForm";
+import { JsonEditor } from "./JsonEditor";
+
+type ConfigFormProps<T extends FieldValues = FieldValues> = {
+  readonly children?: React.ReactNode;
+  readonly control: Control<T>;
+  readonly errors: {
+    conf?: string;
+    date?: unknown;
+  };
+  readonly initialParamsDict: { paramsDict: ParamsSpec };
+  readonly setErrors: React.Dispatch<
+    React.SetStateAction<{
+      conf?: string;
+      date?: unknown;
+    }>
+  >;
+};
+
+const ConfigForm = <T extends FieldValues = FieldValues>({
+  children,
+  control,
+  errors,
+  initialParamsDict,
+  setErrors,
+}: ConfigFormProps<T>) => {
+  const { conf, setConf } = useParamStore();
+
+  const validateAndPrettifyJson = (value: string) => {
+    try {
+      const parsedJson = JSON.parse(value) as JSON;
+
+      setErrors((prev) => ({ ...prev, conf: undefined }));
+
+      const formattedJson = JSON.stringify(parsedJson, undefined, 2);
+
+      if (formattedJson !== conf) {
+        setConf(formattedJson); // Update only if the value is different
+      }
+
+      return formattedJson;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error occurred.";
+
+      setErrors((prev) => ({
+        ...prev,
+        conf: `Invalid JSON format: ${errorMessage}`,
+      }));
+
+      return value;
+    }
+  };
+
+  return (
+    <Accordion.Root
+      collapsible
+      defaultValue={[flexibleFormDefaultSection]}
+      mb={4}
+      size="lg"
+      variant="enclosed"
+    >
+      <FlexibleForm
+        flexibleFormDefaultSection={flexibleFormDefaultSection}
+        initialParamsDict={initialParamsDict}
+      />
+      <Accordion.Item key="advancedOptions" value="advancedOptions">
+        <Accordion.ItemTrigger cursor="button">Advanced Options</Accordion.ItemTrigger>
+        <Accordion.ItemContent>
+          <Box p={4}>
+            {children}
+            <Controller
+              control={control}
+              name={"conf" as Path<T>}
+              render={({ field }) => (
+                <Field.Root invalid={Boolean(errors.conf)} mt={6}>
+                  <Field.Label fontSize="md">Configuration JSON</Field.Label>
+                  <JsonEditor
+                    {...field}
+                    onBlur={() => {
+                      field.onChange(validateAndPrettifyJson(field.value as string));
+                    }}
+                  />
+                  {Boolean(errors.conf) ? <Field.ErrorText>{errors.conf}</Field.ErrorText> : undefined}
+                </Field.Root>
+              )}
+            />
+          </Box>
+        </Accordion.ItemContent>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+};
+
+export default ConfigForm;
diff --git a/airflow-core/src/airflow/ui/src/components/DagActions/RunBackfillForm.tsx b/airflow-core/src/airflow/ui/src/components/DagActions/RunBackfillForm.tsx
@@ -25,11 +25,14 @@ import { Button } from "src/components/ui";
 import { reprocessBehaviors } from "src/constants/reprocessBehaviourParams";
 import { useCreateBackfill } from "src/queries/useCreateBackfill";
 import { useCreateBackfillDryRun } from "src/queries/useCreateBackfillDryRun";
+import { useDagParams } from "src/queries/useDagParams";
 import { useTogglePause } from "src/queries/useTogglePause";
 import { pluralize } from "src/utils";
 
+import ConfigForm from "../ConfigForm";
 import { DateTimeInput } from "../DateTimeInput";
 import { ErrorAlert } from "../ErrorAlert";
+import type { DagRunTriggerParams } from "../TriggerDag/TriggerDAGForm";
 import { Checkbox } from "../ui/Checkbox";
 import { RadioCardItem, RadioCardLabel, RadioCardRoot } from "../ui/RadioCard";
 
@@ -39,14 +42,16 @@ type RunBackfillFormProps = {
 };
 const today = new Date().toISOString().slice(0, 16);
 
+type BackfillFormProps = DagRunTriggerParams & Omit<BackfillPostBody, "dag_run_conf">;
+
 const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
   const [errors, setErrors] = useState<{ conf?: string; date?: unknown }>({});
   const [unpause, setUnpause] = useState(true);
-
-  const { control, handleSubmit, reset, watch } = useForm<BackfillPostBody>({
+  const initialParamsDict = useDagParams(dag.dag_id, true);
+  const { control, handleSubmit, reset, watch } = useForm<BackfillFormProps>({
     defaultValues: {
+      conf: "",
       dag_id: dag.dag_id,
-      dag_run_conf: {},
       from_date: "",
       max_active_runs: 1,
       reprocess_behavior: "none",
@@ -55,7 +60,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
     },
     mode: "onBlur",
   });
-  const values = useWatch<BackfillPostBody>({
+  const values = useWatch<BackfillFormProps>({
     control,
   });
 
@@ -88,7 +93,7 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
   const dataIntervalStart = watch("from_date");
   const dataIntervalEnd = watch("to_date");
 
-  const onSubmit = (fdata: BackfillPostBody) => {
+  const onSubmit = (fdata: BackfillFormProps) => {
     if (unpause && dag.is_paused) {
       togglePause({
         dagId: dag.dag_id,
@@ -98,11 +103,14 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
       });
     }
     createBackfill({
-      requestBody: fdata,
+      requestBody: {
+        ...fdata,
+        dag_run_conf: JSON.parse(fdata.conf) as Record<string, unknown>,
+      },
     });
   };
 
-  const onCancel = (fdata: BackfillPostBody) => {
+  const onCancel = (fdata: BackfillFormProps) => {
     reset(fdata);
     onClose();
   };
@@ -237,6 +245,13 @@ const RunBackfillForm = ({ dag, onClose }: RunBackfillFormProps) => {
             <Spacer />
           </>
         ) : undefined}
+
+        <ConfigForm
+          control={control}
+          errors={errors}
+          initialParamsDict={initialParamsDict}
+          setErrors={setErrors}
+        />
       </VStack>
       <Box as="footer" display="flex" justifyContent="flex-end" mt={4}>
         <HStack w="full">
diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx
