Add timezone selection to new UI (#43132)

Author: bbovenzi

airflow/ui/package.json

@@ -24,6 +24,7 @@
     "@tanstack/react-table": "^8.20.1",
     "axios": "^1.7.7",
     "chakra-react-select": "^4.9.2",
+    "dayjs": "^1.11.13",
     "framer-motion": "^11.3.29",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

airflow/ui/pnpm-lock.yaml

@@ -0,0 +1,64 @@
+/*!
+ * 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 { render, screen } from "@testing-library/react";
+import dayjs from "dayjs";
+import { describe, it, expect, vi } from "vitest";
+
+import { TimezoneContext } from "src/context/timezone";
+import { Wrapper } from "src/utils/Wrapper";
+
+import Time, { defaultFormat, defaultFormatWithTZ } from "./Time";
+
+describe("Test Time and TimezoneProvider", () => {
+  it("Displays a UTC time correctly", () => {
+    const now = new Date();
+
+    render(<Time datetime={now.toISOString()} />, {
+      wrapper: Wrapper,
+    });
+
+    const utcTime = screen.getByText(dayjs.utc(now).format(defaultFormat));
+
+    expect(utcTime).toBeDefined();
+    expect(utcTime.title).toBeFalsy();
+  });
+
+  it("Displays a set timezone, includes UTC date in title", () => {
+    const now = new Date();
+    const tz = "US/Samoa";
+
+    render(
+      <TimezoneContext.Provider
+        value={{ selectedTimezone: tz, setSelectedTimezone: vi.fn() }}
+      >
+        <Time datetime={now.toISOString()} />
+      </TimezoneContext.Provider>,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    const samoaTime = screen.getByText(dayjs(now).tz(tz).format(defaultFormat));
+
+    expect(samoaTime).toBeDefined();
+    expect(samoaTime.title).toEqual(
+      dayjs().tz("UTC").format(defaultFormatWithTZ),
+    );
+  });
+});

airflow/ui/src/components/Time.test.tsx

@@ -0,0 +1,61 @@
+/*!
+ * 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 dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import tz from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import { useTimezone } from "src/context/timezone";
+
+export const defaultFormat = "YYYY-MM-DD, HH:mm:ss";
+export const defaultFormatWithTZ = `${defaultFormat} z`;
+export const defaultTZFormat = "z (Z)";
+
+dayjs.extend(utc);
+dayjs.extend(tz);
+dayjs.extend(advancedFormat);
+
+type Props = {
+  readonly datetime?: string | null;
+  readonly format?: string;
+};
+
+const Time = ({ datetime, format = defaultFormat }: Props) => {
+  const { selectedTimezone } = useTimezone();
+  const time = dayjs(datetime);
+
+  if (datetime === null || datetime === undefined || !time.isValid()) {
+    return undefined;
+  }
+
+  const formattedTime = time.tz(selectedTimezone).format(format);
+  const utcTime = time.tz("UTC").format(defaultFormatWithTZ);
+
+  return (
+    <time
+      dateTime={datetime}
+      // show title if date is not UTC
+      title={selectedTimezone.toUpperCase() === "UTC" ? undefined : utcTime}
+    >
+      {formattedTime}
+    </time>
+  );
+};
+
+export default Time;

airflow/ui/src/components/Time.tsx

@@ -0,0 +1,59 @@
+/*!
+ * 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 {
+  createContext,
+  useState,
+  useMemo,
+  type PropsWithChildren,
+} from "react";
+
+export type TimezoneContextType = {
+  selectedTimezone: string;
+  setSelectedTimezone: (timezone: string) => void;
+};
+
+export const TimezoneContext = createContext<TimezoneContextType | undefined>(
+  undefined,
+);
+
+const TIMEZONE_KEY = "timezone";
+
+export const TimezoneProvider = ({ children }: PropsWithChildren) => {
+  const [selectedTimezone, setSelectedTimezone] = useState(() => {
+    const timezone = localStorage.getItem(TIMEZONE_KEY);
+
+    return timezone ?? "UTC";
+  });
+
+  const selectTimezone = (tz: string) => {
+    localStorage.setItem(TIMEZONE_KEY, tz);
+    setSelectedTimezone(tz);
+  };
+
+  const value = useMemo<TimezoneContextType>(
+    () => ({ selectedTimezone, setSelectedTimezone: selectTimezone }),
+    [selectedTimezone],
+  );
+
+  return (
+    <TimezoneContext.Provider value={value}>
+      {children}
+    </TimezoneContext.Provider>
+  );
+};

airflow/ui/src/context/timezone/TimezoneProvider.tsx

@@ -0,0 +1,21 @@
+/*!
+ * 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.
+ */
+
+export * from "./TimezoneProvider";
+export * from "./useTimezone";

airflow/ui/src/context/timezone/index.ts

@@ -0,0 +1,31 @@
+/*!
+ * 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 { useContext } from "react";
+
+import { TimezoneContext, type TimezoneContextType } from "./TimezoneProvider";
+
+export const useTimezone = (): TimezoneContextType => {
+  const context = useContext(TimezoneContext);
+
+  if (context === undefined) {
+    throw new Error("useTimezone must be used within a TimezoneProvider");
+  }
+
+  return context;
+};

airflow/ui/src/context/timezone/useTimezone.ts

@@ -0,0 +1,49 @@
+/*!
+ * 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 {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+} from "@chakra-ui/react";
+import React from "react";
+
+import TimezoneSelector from "./TimezoneSelector";
+
+type TimezoneModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const TimezoneModal: React.FC<TimezoneModalProps> = ({ isOpen, onClose }) => (
+  <Modal isOpen={isOpen} onClose={onClose} size="xl">
+    <ModalOverlay />
+    <ModalContent>
+      <ModalHeader>Select Timezone</ModalHeader>
+      <ModalCloseButton />
+      <ModalBody>
+        <TimezoneSelector />
+      </ModalBody>
+    </ModalContent>
+  </Modal>
+);
+
+export default TimezoneModal;