From d5d8b588f72fc8b91a7a5a7a16bcbe4cf82b1fe8 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent@astronomer.io>
Date: Thu, 25 Apr 2024 13:21:17 -0400
Subject: [PATCH] Add workaround for datetime-local input in firefox (#39261)

(cherry picked from commit 5638bc3f502e656b1b3c8b765ad1c84434017b41)
---
 .../js/cluster-activity/nav/FilterBar.tsx     |  9 +-
 .../static/js/components/DateTimeInput.tsx    | 84 +++++++++++++++++++
 airflow/www/static/js/dag/nav/FilterBar.tsx   |  6 +-
 3 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 airflow/www/static/js/components/DateTimeInput.tsx

diff --git a/airflow/www/static/js/cluster-activity/nav/FilterBar.tsx b/airflow/www/static/js/cluster-activity/nav/FilterBar.tsx
index b4f840cb5fc647..7e458ab5ab09a0 100644
--- a/airflow/www/static/js/cluster-activity/nav/FilterBar.tsx
+++ b/airflow/www/static/js/cluster-activity/nav/FilterBar.tsx
@@ -19,7 +19,7 @@
 
 /* global moment */
 
-import { Box, Button, Flex, Input, Text } from "@chakra-ui/react";
+import { Box, Button, Flex, Text } from "@chakra-ui/react";
 import React from "react";
 
 import { useTimezone } from "src/context/timezone";
@@ -29,6 +29,7 @@ import {
   getDuration,
 } from "src/datetime_utils";
 import useFilters from "src/cluster-activity/useFilters";
+import DateTimeInput from "src/components/DateTimeInput";
 
 const FilterBar = () => {
   const { filters, onStartDateChange, onEndDateChange, clearFilters } =
@@ -61,9 +62,8 @@ const FilterBar = () => {
           <Text fontSize="sm" as="b" position="absolute" mt="-14px" ml={1}>
             Start Date
           </Text>
-          <Input
+          <DateTimeInput
             {...inputStyles}
-            type="datetime-local"
             value={formattedStartDate || ""}
             onChange={(e) => onStartDateChange(e.target.value)}
           />
@@ -72,9 +72,8 @@ const FilterBar = () => {
           <Text fontSize="sm" as="b" position="absolute" mt="-14px" ml={1}>
             End Date
           </Text>
-          <Input
+          <DateTimeInput
             {...inputStyles}
-            type="datetime-local"
             value={formattedEndDate || ""}
             onChange={(e) => onEndDateChange(e.target.value)}
           />
diff --git a/airflow/www/static/js/components/DateTimeInput.tsx b/airflow/www/static/js/components/DateTimeInput.tsx
new file mode 100644
index 00000000000000..1d6b32ef1cffac
--- /dev/null
+++ b/airflow/www/static/js/components/DateTimeInput.tsx
@@ -0,0 +1,84 @@
+/*!
+ * 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.
+ */
+
+/* global moment */
+
+import React from "react";
+import { Flex, Input, InputProps } from "@chakra-ui/react";
+
+const DateTimeInput = (props: InputProps) => {
+  // Firefox and safari do not support datetime-local so we need to put a date and time input next to each other
+  const userAgent = navigator.userAgent.toLowerCase();
+  const unsupportedBrowser =
+    userAgent.includes("firefox") || userAgent.includes("safari");
+
+  if (!unsupportedBrowser) return <Input type="datetime-local" {...props} />;
+
+  const { value, onChange, ...rest } = props;
+  // @ts-ignore
+  let datetime = moment(value as string);
+  // @ts-ignore
+  datetime = datetime.isValid() ? datetime : moment();
+  // @ts-ignore
+  const date = moment(datetime).format("YYYY-MM-DD");
+  // @ts-ignore
+  const time = moment(datetime).format("HH:mm:ss");
+  return (
+    <Flex>
+      <Input
+        type="date"
+        value={date}
+        onChange={(e) => {
+          if (onChange)
+            onChange({
+              ...e,
+              target: {
+                ...e.target,
+                value: `${e.target.value}T${time}`,
+              },
+            });
+        }}
+        {...rest}
+        borderRightWidth={0}
+        borderRightRadius={0}
+        paddingInlineEnd={0}
+      />
+      <Input
+        type="time"
+        value={time}
+        onChange={(e) => {
+          if (onChange)
+            onChange({
+              ...e,
+              target: {
+                ...e.target,
+                value: `${date}T${e.target.value}`,
+              },
+            });
+        }}
+        {...rest}
+        borderLeftWidth={0}
+        borderLeftRadius={0}
+        paddingInlineStart={0}
+      />
+    </Flex>
+  );
+};
+
+export default DateTimeInput;
diff --git a/airflow/www/static/js/dag/nav/FilterBar.tsx b/airflow/www/static/js/dag/nav/FilterBar.tsx
index f03ea734b8197f..2a0b35689382c3 100644
--- a/airflow/www/static/js/dag/nav/FilterBar.tsx
+++ b/airflow/www/static/js/dag/nav/FilterBar.tsx
@@ -19,7 +19,7 @@
 
 /* global moment */
 
-import { Box, Button, Flex, Input, Select } from "@chakra-ui/react";
+import { Box, Button, Flex, Select } from "@chakra-ui/react";
 import MultiSelect from "src/components/MultiSelect";
 import React from "react";
 import type { DagRun, RunState, TaskState } from "src/types";
@@ -30,6 +30,7 @@ import { useChakraSelectProps } from "chakra-react-select";
 import { useTimezone } from "src/context/timezone";
 import { isoFormatWithoutTZ } from "src/datetime_utils";
 import useFilters from "src/dag/useFilters";
+import DateTimeInput from "src/components/DateTimeInput";
 
 declare const filtersOptions: {
   dagStates: RunState[];
@@ -124,9 +125,8 @@ const FilterBar = () => {
     <Flex backgroundColor="blackAlpha.200" p={4} justifyContent="space-between">
       <Flex ml={10}>
         <Box px={2}>
-          <Input
+          <DateTimeInput
             {...inputStyles}
-            type="datetime-local"
             value={formattedTime || ""}
             onChange={(e) => onBaseDateChange(e.target.value)}
             {...(isBaseDateDefault ? {} : filteredStyles)}