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 f95319e)

Author: choo121600

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}>

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>