UI: Add data interval override option for manual DAG runs

airflow-core/src/airflow/ui/public/i18n/locales/en/components.json

@@ -114,6 +114,11 @@
   "toggleTableView": "Show table view",
   "triggerDag": {
     "button": "Trigger",
+    "dataInterval": "Data Interval",
+    "dataIntervalAuto": "Inferred from Logical Date and Timetable",
+    "dataIntervalManual": "Specify Manually",
+    "intervalEnd": "End",
+    "intervalStart": "Start",
     "loading": "Loading Dag information...",
     "loadingFailed": "Failed to load Dag information. Please try again.",
     "runIdHelp": "Optional - will be generated if not provided",

airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGAdvancedOptions.tsx

@@ -0,0 +1,84 @@
+/*!
+ * 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, Field, Stack } from "@chakra-ui/react";
+import { Controller, type Control } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import EditableMarkdown from "./EditableMarkdown";
+import type { DagRunTriggerParams } from "./TriggerDAGForm";
+
+type TriggerDAGAdvancedOptionsProps = {
+  readonly control: Control<DagRunTriggerParams>;
+};
+
+const TriggerDAGAdvancedOptions = ({ control }: TriggerDAGAdvancedOptionsProps) => {
+  const { t: translate } = useTranslation(["common", "components"]);
+  const { t: rootTranslate } = useTranslation();
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="dagRunId"
+        render={({ field }) => (
+          <Field.Root mt={6} orientation="horizontal">
+            <Stack>
+              <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
+                {translate("runId")}
+              </Field.Label>
+            </Stack>
+            <Stack css={{ flexBasis: "70%" }}>
+              <Input {...field} size="sm" />
+              <Field.HelperText>{translate("components:triggerDag.runIdHelp")}</Field.HelperText>
+            </Stack>
+          </Field.Root>
+        )}
+      />
+
+      <Controller
+        control={control}
+        name="partitionKey"
+        render={({ field }) => (
+          <Field.Root mt={6} orientation="horizontal">
+            <Stack>
+              <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
+                {rootTranslate("dagRun.partitionKey")}
+              </Field.Label>
+            </Stack>
+            <Stack css={{ flexBasis: "70%" }}>
+              <Input {...field} size="sm" />
+            </Stack>
+          </Field.Root>
+        )}
+      />
+      <Controller
+        control={control}
+        name="note"
+        render={({ field }) => (
+          <Field.Root mt={6}>
+            <Field.Label fontSize="md">{translate("note.dagRun")}</Field.Label>
+            <EditableMarkdown field={field} placeholder={translate("note.placeholder")} />
+          </Field.Root>
+        )}
+      />
+    </>
+  );
+};
+
+export default TriggerDAGAdvancedOptions;

airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Button, Box, Spacer, HStack, Input, Field, Stack } from "@chakra-ui/react";
+import { Button, Box, Spacer, HStack, Field, Stack, Text, VStack } from "@chakra-ui/react";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -33,27 +33,45 @@ import ConfigForm from "../ConfigForm";
 import { DateTimeInput } from "../DateTimeInput";
 import { ErrorAlert } from "../ErrorAlert";
 import { Checkbox } from "../ui/Checkbox";
-import EditableMarkdown from "./EditableMarkdown";
+import { RadioCardItem, RadioCardRoot } from "../ui/RadioCard";
+import TriggerDAGAdvancedOptions from "./TriggerDAGAdvancedOptions";
 
 type TriggerDAGFormProps = {
   readonly dagDisplayName: string;
   readonly dagId: string;
+  readonly hasSchedule: boolean;
   readonly isPaused: boolean;
   readonly onClose: () => void;
   readonly open: boolean;
 };
 
+type DataIntervalMode = "auto" | "manual";
+
 export type DagRunTriggerParams = {
   conf: string;
   dagRunId: string;
+  dataIntervalEnd: string;
+  dataIntervalMode: DataIntervalMode;
+  dataIntervalStart: string;
   logicalDate: string;
   note: string;
   partitionKey: string | undefined;
 };
 
-const TriggerDAGForm = ({ dagDisplayName, dagId, isPaused, onClose, open }: TriggerDAGFormProps) => {
+const dataIntervalModeOptions: Array<{ label: string; value: DataIntervalMode }> = [
+  { label: "components:triggerDag.dataIntervalAuto", value: "auto" },
+  { label: "components:triggerDag.dataIntervalManual", value: "manual" },
+];
+
+const TriggerDAGForm = ({
+  dagDisplayName,
+  dagId,
+  hasSchedule,
+  isPaused,
+  onClose,
+  open,
+}: TriggerDAGFormProps) => {
   const { t: translate } = useTranslation(["common", "components"]);
-  const { t: rootTranslate } = useTranslation();
   const [errors, setErrors] = useState<{ conf?: string; date?: unknown }>({});
   const [formError, setFormError] = useState(false);
   const initialParamsDict = useDagParams(dagId, open);
@@ -63,10 +81,13 @@ const TriggerDAGForm = ({ dagDisplayName, dagId, isPaused, onClose, open }: Trig
 
   const { mutate: togglePause } = useTogglePause({ dagId });
 
-  const { control, handleSubmit, reset } = useForm<DagRunTriggerParams>({
+  const { control, handleSubmit, reset, watch } = useForm<DagRunTriggerParams>({
     defaultValues: {
       conf,
       dagRunId: "",
+      dataIntervalEnd: "",
+      dataIntervalMode: "auto",
+      dataIntervalStart: "",
       // Default logical date to now, show it in the selected timezone
       logicalDate: dayjs().format(DEFAULT_DATETIME_FORMAT),
       note: "",
@@ -88,6 +109,14 @@ const TriggerDAGForm = ({ dagDisplayName, dagId, isPaused, onClose, open }: Trig
     setErrors((prev) => ({ ...prev, date: undefined }));
   };
 
+  const dataIntervalMode = watch("dataIntervalMode");
+  const dataIntervalStart = watch("dataIntervalStart");
+  const dataIntervalEnd = watch("dataIntervalEnd");
+  const noDataInterval = !Boolean(dataIntervalStart) || !Boolean(dataIntervalEnd);
+  const dataIntervalInvalid =
+    dataIntervalMode === "manual" &&
+    (noDataInterval || dayjs(dataIntervalStart).isAfter(dayjs(dataIntervalEnd)));
+
   const onSubmit = (data: DagRunTriggerParams) => {
     if (unpause && isPaused) {
       togglePause({
@@ -101,14 +130,9 @@ const TriggerDAGForm = ({ dagDisplayName, dagId, isPaused, onClose, open }: Trig
   };
 
   return (
-    <Box mt={8}>
-      <ConfigForm
-        control={control}
-        errors={errors}
-        initialParamsDict={initialParamsDict}
-        setErrors={setErrors}
-        setFormError={setFormError}
-      >
+    <>
+      <ErrorAlert error={errors.date ?? errorTrigger} />
+      <VStack alignItems="stretch" gap={2} pt={4}>
         <Controller
           control={control}
           name="logicalDate"
@@ -125,77 +149,104 @@ const TriggerDAGForm = ({ dagDisplayName, dagId, isPaused, onClose, open }: Trig
             </Field.Root>
           )}
         />
-
-        <Controller
-          control={control}
-          name="dagRunId"
-          render={({ field }) => (
-            <Field.Root mt={6} orientation="horizontal">
-              <Stack>
-                <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
-                  {translate("runId")}
-                </Field.Label>
-              </Stack>
-              <Stack css={{ flexBasis: "70%" }}>
-                <Input {...field} size="sm" />
-                <Field.HelperText>{translate("components:triggerDag.runIdHelp")}</Field.HelperText>
-              </Stack>
-            </Field.Root>
-          )}
-        />
-        <Controller
+        <Spacer />
+        {hasSchedule ? (
+          <Box>
+            <Text fontSize="md" fontWeight="semibold" mb={3}>
+              {translate("components:triggerDag.dataInterval")}
+            </Text>
+            <Controller
+              control={control}
+              name="dataIntervalMode"
+              render={({ field }) => (
+                <RadioCardRoot defaultValue={String(field.value)} onChange={field.onChange}>
+                  <HStack align="stretch">
+                    {dataIntervalModeOptions.map((mode) => (
+                      <RadioCardItem
+                        colorPalette="brand"
+                        indicatorPlacement="start"
+                        key={mode.value}
+                        label={translate(mode.label)}
+                        value={mode.value}
+                      />
+                    ))}
+                  </HStack>
+                </RadioCardRoot>
+              )}
+            />
+            <Spacer />
+            {dataIntervalMode === "manual" ? (
+              <HStack alignItems="flex-start" mt={3} w="full">
+                <Controller
+                  control={control}
+                  name="dataIntervalStart"
+                  render={({ field }) => (
+                    <Field.Root invalid={Boolean(errors.date) || dataIntervalInvalid} required>
+                      <Field.Label>{translate("components:triggerDag.intervalStart")}</Field.Label>
+                      <DateTimeInput {...field} onBlur={resetDateError} size="sm" />
+                    </Field.Root>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="dataIntervalEnd"
+                  render={({ field }) => (
+                    <Field.Root invalid={Boolean(errors.date) || dataIntervalInvalid} required>
+                      <Field.Label>{translate("components:triggerDag.intervalEnd")}</Field.Label>
+                      <DateTimeInput {...field} onBlur={resetDateError} size="sm" />
+                    </Field.Root>
+                  )}
+                />
+              </HStack>
+            ) : // eslint-disable-next-line unicorn/no-null
+            null}
+          </Box>
+        ) : // eslint-disable-next-line unicorn/no-null
+        null}
+        <Spacer />
+        {isPaused ? (
+          <>
+            <Checkbox
+              checked={unpause}
+              colorPalette="brand"
+              onChange={() => setUnpause(!unpause)}
+              wordBreak="break-all"
+            >
+              {translate("components:triggerDag.unpause", { dagDisplayName })}
+            </Checkbox>
+            <Spacer />
+          </>
+        ) : undefined}
+        <ConfigForm
           control={control}
-          name="partitionKey"
-          render={({ field }) => (
-            <Field.Root mt={6} orientation="horizontal">
-              <Stack>
-                <Field.Label fontSize="md" style={{ flexBasis: "30%" }}>
-                  {rootTranslate("dagRun.partitionKey")}
-                </Field.Label>
-              </Stack>
-              <Stack css={{ flexBasis: "70%" }}>
-                <Input {...field} size="sm" />
-              </Stack>
-            </Field.Root>
-          )}
-        />
-        <Controller
-          control={control}
-          name="note"
-          render={({ field }) => (
-            <Field.Root mt={6}>
-              <Field.Label fontSize="md">{translate("note.dagRun")}</Field.Label>
-              <EditableMarkdown field={field} placeholder={translate("note.placeholder")} />
-            </Field.Root>
-          )}
-        />
-      </ConfigForm>
-      {isPaused ? (
-        <Checkbox
-          checked={unpause}
-          colorPalette="brand"
-          onChange={() => setUnpause(!unpause)}
-          wordBreak="break-all"
+          errors={errors}
+          initialParamsDict={initialParamsDict}
+          setErrors={setErrors}
+          setFormError={setFormError}
         >
-          {translate("components:triggerDag.unpause", { dagDisplayName })}
-        </Checkbox>
-      ) : undefined}
-      <ErrorAlert error={errors.date ?? errorTrigger} />
+          <TriggerDAGAdvancedOptions control={control} />
+        </ConfigForm>
+      </VStack>
       <Box as="footer" display="flex" justifyContent="flex-end" mt={4}>
         <HStack w="full">
           <Spacer />
           <Button
             colorPalette="brand"
             disabled={
-              Boolean(errors.conf) || Boolean(errors.date) || formError || isPending || Boolean(errorTrigger)
+              Boolean(errors.conf) ||
+              Boolean(errors.date) ||
+              formError ||
+              isPending ||
+              Boolean(errorTrigger) ||
+              dataIntervalInvalid
             }
             onClick={() => void handleSubmit(onSubmit)()}
           >
             <FiPlay /> {translate("components:triggerDag.button")}
           </Button>
         </HStack>
       </Box>
-    </Box>
+    </>
   );
 };
 

airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGModal.tsx

@@ -125,6 +125,7 @@ const TriggerDAGModal: React.FC<TriggerDAGModalProps> = ({
                 <TriggerDAGForm
                   dagDisplayName={dagDisplayName}
                   dagId={dagId}
+                  hasSchedule={hasSchedule}
                   isPaused={isPaused}
                   onClose={onClose}
                   open={open}