This is an automated email from the ASF dual-hosted git repository. kaxilnaik pushed a commit to branch v3-0-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 543a9a01238ab53d09ce377dda173bb69d4dd81c Author: Brent Bovenzi <[email protected]> AuthorDate: Fri Apr 25 08:45:39 2025 -0400 Fix timezone setting for logical date input on Trigger Run form (#49662) (cherry picked from commit 6e43633707a5b83a70fa705c320352d6aeaa51bd) --- .../ui/src/components/TriggerDag/TriggerDAGForm.tsx | 16 +++++++++++++--- .../airflow/ui/src/layouts/Nav/UserSettingsButton.tsx | 7 +++++-- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx index c0f420dcf9d..f73b8d5398d 100644 --- a/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx +++ b/airflow-core/src/airflow/ui/src/components/TriggerDag/TriggerDAGForm.tsx @@ -18,10 +18,13 @@ */ import { Input, Button, Box, Spacer, HStack, Field, Stack } from "@chakra-ui/react"; import dayjs from "dayjs"; +import tz from "dayjs/plugin/timezone"; +import utc from "dayjs/plugin/utc"; import { useEffect, useState } from "react"; import { useForm, Controller } from "react-hook-form"; import { FiPlay } from "react-icons/fi"; +import { useTimezone } from "src/context/timezone"; import { useDagParams } from "src/queries/useDagParams"; import { useParamStore } from "src/queries/useParamStore"; import { useTogglePause } from "src/queries/useTogglePause"; @@ -34,6 +37,9 @@ import { Accordion } from "../ui"; import { Checkbox } from "../ui/Checkbox"; import EditableMarkdown from "./EditableMarkdown"; +dayjs.extend(utc); +dayjs.extend(tz); + type TriggerDAGFormProps = { readonly dagId: string; readonly isPaused: boolean; @@ -51,6 +57,7 @@ export type DagRunTriggerParams = { const TriggerDAGForm = ({ dagId, isPaused, onClose, open }: TriggerDAGFormProps) => { const [errors, setErrors] = useState<{ conf?: string; date?: unknown }>({}); const initialParamsDict = useDagParams(dagId, open); + const { selectedTimezone } = useTimezone(); const { error: errorTrigger, isPending, triggerDagRun } = useTrigger({ dagId, onSuccessConfirm: onClose }); const { conf, setConf } = useParamStore(); const [unpause, setUnpause] = useState(true); @@ -61,8 +68,8 @@ const TriggerDAGForm = ({ dagId, isPaused, onClose, open }: TriggerDAGFormProps) defaultValues: { conf, dagRunId: "", - // Default logical date to now - logicalDate: dayjs().format("YYYY-MM-DDTHH:mm:ss.SSS"), + // Default logical date to now, show it in the selected timezone + logicalDate: dayjs().tz(selectedTimezone).format("YYYY-MM-DDTHH:mm:ss.SSS"), note: "", }, }); @@ -83,7 +90,10 @@ const TriggerDAGForm = ({ dagId, isPaused, onClose, open }: TriggerDAGFormProps) }, }); } - triggerDagRun(data); + triggerDagRun({ + ...data, + logicalDate: dayjs(data.logicalDate).tz(selectedTimezone, true).toISOString(), + }); }; const validateAndPrettifyJson = (value: string) => { diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx index 2d79d43629c..91184f29511 100644 --- a/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx +++ b/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx @@ -20,6 +20,7 @@ import { useDisclosure } from "@chakra-ui/react"; import dayjs from "dayjs"; import timezone from "dayjs/plugin/timezone"; import utc from "dayjs/plugin/utc"; +import { useState } from "react"; import { FiClock, FiGrid, FiLogOut, FiMoon, FiSun, FiUser } from "react-icons/fi"; import { MdOutlineAccountTree } from "react-icons/md"; import { useLocalStorage } from "usehooks-ts"; @@ -42,8 +43,10 @@ export const UserSettingsButton = () => { const { selectedTimezone } = useTimezone(); const [dagView, setDagView] = useLocalStorage<"graph" | "grid">("default_dag_view", "grid"); + const [time, setTime] = useState(dayjs()); + return ( - <Menu.Root positioning={{ placement: "right" }}> + <Menu.Root onOpenChange={() => setTime(dayjs())} positioning={{ placement: "right" }}> <Menu.Trigger asChild> <NavButton icon={<FiUser size="1.75rem" />} title="User" /> </Menu.Trigger> @@ -79,7 +82,7 @@ export const UserSettingsButton = () => { </Menu.Item> <Menu.Item onClick={onOpenTimezone} value="timezone"> <FiClock size="1.25rem" style={{ marginRight: "8px" }} /> - {dayjs().tz(selectedTimezone).format("HH:mm z (Z)")} + {dayjs(time).tz(selectedTimezone).format("HH:mm z (Z)")} </Menu.Item> <Menu.Item onClick={onOpenLogout} value="logout"> <FiLogOut size="1.25rem" style={{ marginRight: "8px" }} />
