(airflow) branch v3-0-test updated: feat: Add real-time clock updates to timezone selector (#52414)

[kaxilnaik]

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


The following commit(s) were added to refs/heads/v3-0-test by this push:
     new e535e774832 feat: Add real-time clock updates to timezone selector 
(#52414)
e535e774832 is described below

commit e535e7748327b74489f4c51dbb496aea9a31f6ee
Author: Yeonguk Choo <choo121...@gmail.com>
AuthorDate: Mon Jun 30 22:59:04 2025 +0900

    feat: Add real-time clock updates to timezone selector (#52414)
    
    * feat: Add real-time clock updates to timezone selector
    
    * Add real-time clock update to user setting button Nav
    
    (cherry picked from commit f95319ef6792a5559bb8d82ab6f7f1cb9b67188a)
---
 .../src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx  | 15 +++++++++++++--
 .../airflow/ui/src/layouts/Nav/UserSettingsButton.tsx    | 16 ++++++++++++++--
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx 
b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
index 20dd09af396..d7cc615b874 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/TimezoneSelector.tsx
@@ -21,7 +21,7 @@ import { Select, type SingleValue } from 
"chakra-react-select";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import { useTimezone } from "src/context/timezone";
 import type { Option as TimezoneOption } from "src/utils/option";
@@ -31,6 +31,7 @@ dayjs.extend(timezone);
 
 const TimezoneSelector: React.FC = () => {
   const { selectedTimezone, setSelectedTimezone } = useTimezone();
+  const [currentTime, setCurrentTime] = useState<string>("");
   const timezones = useMemo<Array<string>>(() => {
     const tzList = Intl.supportedValuesOf("timeZone");
     const guessedTz = dayjs.tz.guess();
@@ -54,7 +55,17 @@ const TimezoneSelector: React.FC = () => {
     }
   };
 
-  const currentTime = dayjs().tz(selectedTimezone).format("YYYY-MM-DD 
HH:mm:ss");
+  useEffect(() => {
+    const updateTime = () => {
+      setCurrentTime(dayjs().tz(selectedTimezone).format("YYYY-MM-DD 
HH:mm:ss"));
+    };
+
+    updateTime();
+
+    const interval = setInterval(updateTime, 1000);
+
+    return () => clearInterval(interval);
+  }, [selectedTimezone]);
 
   return (
     <VStack align="stretch" gap={6}>
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 91184f29511..fc035a2b669 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Nav/UserSettingsButton.tsx
@@ -20,7 +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 { useEffect, 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";
@@ -45,8 +45,20 @@ export const UserSettingsButton = () => {
 
   const [time, setTime] = useState(dayjs());
 
+  useEffect(() => {
+    const updateTime = () => {
+      setTime(dayjs());
+    };
+
+    updateTime();
+
+    const interval = setInterval(updateTime, 1000);
+
+    return () => clearInterval(interval);
+  }, [selectedTimezone]);
+
   return (
-    <Menu.Root onOpenChange={() => setTime(dayjs())} positioning={{ placement: 
"right" }}>
+    <Menu.Root positioning={{ placement: "right" }}>
       <Menu.Trigger asChild>
         <NavButton icon={<FiUser size="1.75rem" />} title="User" />
       </Menu.Trigger>