Upgrade to react 18 and chakra 2

airflow/www/package.json

@@ -30,9 +30,11 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.17.12",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/jest-dom": "^5.16.0",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.0.0",
     "babel": "^6.23.0",
@@ -76,9 +78,9 @@
     "webpack-manifest-plugin": "^2.2.0"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.3",
-    "@emotion/cache": "^11.4.0",
-    "@emotion/react": "^11.4.1",
+    "@chakra-ui/react": "^2.2.0",
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11",
     "axios": "^0.26.0",
     "bootstrap-3-typeahead": "^4.0.2",
@@ -91,14 +93,14 @@
     "datatables.net": "^1.11.4",
     "datatables.net-bs": "^1.11.4",
     "eonasdan-bootstrap-datetimepicker": "^4.17.47",
-    "framer-motion": "^4",
+    "framer-motion": "4.1.17",
     "jquery": ">=3.5.0",
     "jshint": "^2.13.4",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.34",
     "nvd3": "^1.8.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-icons": "^4.3.1",
     "react-query": "^3.34.16",
     "react-router-dom": "^6.3.0",

airflow/www/static/js/grid/components/TaskName.jsx

@@ -40,7 +40,7 @@ const TaskName = ({
     <Text
       display="inline"
       ml={level * 4 + 4}
-      isTruncated
+      noOfLines={1}
     >
       {label}
       {isMapped && (

airflow/www/static/js/grid/dagRuns/index.jsx

@@ -57,7 +57,6 @@ const DagRuns = () => {
   return (
     <Tr
       borderBottomWidth={3}
-      borderBottomColor="gray.200"
       position="relative"
     >
       <Td

airflow/www/static/js/grid/details/content/Dag.jsx

@@ -99,7 +99,7 @@ const Dag = () => {
         <Tbody>
           {durations.length > 0 && (
           <>
-            <Tr borderBottomWidth={2} borderBottomColor="gray.300" borderBottomStyle="solid">
+            <Tr borderBottomWidth={2} borderBottomColor="gray.300">
               <Td><Heading size="sm">DAG Runs Summary</Heading></Td>
               <Td />
             </Tr>
@@ -142,7 +142,7 @@ const Dag = () => {
             </Tr>
           </>
           )}
-          <Tr borderBottomWidth={2} borderBottomColor="gray.300" borderBottomStyle="solid">
+          <Tr borderBottomWidth={2} borderBottomColor="gray.300">
             <Td>
               <Heading size="sm">DAG Summary</Heading>
             </Td>

airflow/www/static/js/grid/index.jsx

@@ -20,14 +20,15 @@
 /* global document */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { ChakraProvider, extendTheme } from '@chakra-ui/react';
+import { ChakraProvider } from '@chakra-ui/react';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { QueryClient, QueryClientProvider } from 'react-query';
 
 import Main from './Main';
+import theme from './theme';
 import { ContainerRefProvider } from './context/containerRef';
 import { TimezoneProvider } from './context/timezone';
 import { AutoRefreshProvider } from './context/autorefresh';
@@ -60,16 +61,6 @@ const queryClient = new QueryClient({
   },
 });
 
-const theme = extendTheme({
-  components: {
-    Tooltip: {
-      baseStyle: {
-        fontSize: 'md',
-      },
-    },
-  },
-});
-
 function App() {
   return (
     <React.StrictMode>
@@ -92,4 +83,5 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, mainElement);
+const reactRoot = createRoot(mainElement);
+reactRoot.render(<App />);

airflow/www/static/js/grid/theme.ts

@@ -0,0 +1,39 @@
+/*!
+ * 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 { extendTheme } from '@chakra-ui/react';
+
+const theme = extendTheme({
+  styles: {
+    global: {
+      '*, *::before, &::after': {
+        borderColor: 'gray.200',
+      },
+    },
+  },
+  components: {
+    Tooltip: {
+      baseStyle: {
+        fontSize: 'md',
+      },
+    },
+  },
+});
+
+export default theme;

airflow/www/static/js/grid/types/framer-motion.d.ts

@@ -0,0 +1,28 @@
+/*!
+ * 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.
+ */
+
+/* Temporary override of framer-motion types until we can upgrade to 6.x */
+
+import * as React from 'react';
+
+declare module 'framer-motion' {
+  export interface AnimatePresenceProps {
+    children?: React.ReactNode
+  }
+}