Use DateTimeFormat timeZoneName shortOffset

Node.js version used (14) does not seem to implement longOffset.
Use shortOffset instead, and massage the output to be the
same as longOffset.

Signed-off-by: Brendan Miller <6900229+bhmiller@users.noreply.github.com>

Author: bhmiller

python/ray/dashboard/client/src/common/timezone.ts

@@ -1,14 +1,29 @@
 const getCurrentUTCOffset = (timeZone: string) => {
   try {
     const date = new Date();
+    // Ideally this would be longOffset, but it's not supported in used version of node
     const formatter = new Intl.DateTimeFormat("en-US", {
       timeZone,
-      timeZoneName: "longOffset",
+      timeZoneName: "shortOffset",
     });
-    // Extract just the GMT offset part from the formatted string
+    // Extract the GMT offset part from the formatted string and ensure it has minutes
     const formatted = formatter.format(date);
-    const match = formatted.match(/GMT[+-]\d{2}:\d{2}/);
-    return match ? match[0] : "";
+    const match = formatted.match(/GMT[+-]\d{1,2}(?::\d{2})?/);
+    if (match) {
+      // Ensure the offset has minutes and hours are padded (e.g., convert GMT+5 to GMT+05:00)
+      const offset = match[0];
+      if (!offset.includes(":")) {
+        return offset.replace(
+          /([+-])(\d{1,2})$/,
+          (_, sign, hours) => `${sign}${hours.padStart(2, "0")}:00`,
+        );
+      }
+      return offset.replace(
+        /([+-])(\d{1,2}):/,
+        (_, sign, hours) => `${sign}${hours.padStart(2, "0")}:`,
+      );
+    }
+    return "";
   } catch (e) {
     console.warn(`Error getting UTC offset for ${timeZone}:`, e);
     return "";

python/ray/dashboard/client/src/components/SearchComponent.tsx

@@ -122,21 +122,11 @@ export const SearchTimezone = ({
   });
 
   const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  const browserOffset = (() => {
-    const formatter = new Intl.DateTimeFormat("en-US", {
-      timeZone: browserTimezone,
-      timeZoneName: "longOffset",
-    });
-    const formatted = formatter.format(new Date());
-    const match = formatted.match(/GMT[+-]\d{2}:?\d{2}/);
-    return match ? match[0] : "";
-  })();
-
-  if (browserOffset) {
+  const browserTz = timezones.find((t) => t.value === browserTimezone);
+  if (browserTz) {
     options.unshift({
       value: browserTimezone,
-      utc: browserOffset,
+      utc: browserTz.utc,
       group: "System",
       country: "Browser Time",
     });