Upgrade to webpack 5

airflow/www/.eslintrc

@@ -1,6 +1,12 @@
 {
   "extends": ["airbnb", "airbnb/hooks"],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "babelOptions": {
+      "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+      "plugins": ["@babel/plugin-transform-runtime"]
+    }
+  },
   "plugins": [ "html", "react" ],
   "rules": {
     "no-param-reassign": 1,
@@ -23,6 +29,12 @@
         "optionalDependencies": false,
         "peerDependencies": false
       }
+    ],
+    "react/function-component-definition": [
+      0,
+      {
+        "namedComponents": "function-declaration"
+      }
     ]
   },
   "settings": {

airflow/www/package.json

@@ -2,9 +2,9 @@
   "description": "Apache Airflow is a platform to programmatically author, schedule and monitor workflows.",
   "scripts": {
     "test": "jest",
-    "dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map --mode development",
-    "prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress",
-    "build": "NODE_ENV=production webpack --colors --progress",
+    "dev": "NODE_ENV=development webpack --watch --progress --devtool eval-cheap-source-map --mode development",
+    "prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --mode production --progress",
+    "build": "NODE_ENV=production webpack --progress --mode production",
     "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && tsc --noEmit",
     "lint:fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx . && tsc --noEmit"
   },
@@ -26,6 +26,8 @@
     "flask"
   ],
   "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/eslint-parser": "^7.18.2",
     "@babel/plugin-transform-runtime": "^7.16.0",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
@@ -37,45 +39,40 @@
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.0.0",
-    "babel": "^6.23.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.1.0",
-    "babel-plugin-css-modules-transform": "^1.6.1",
-    "babel-polyfill": "^6.26.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^3.4.2",
-    "eslint": "^7.2.0",
-    "eslint-config-airbnb": "18.2.1",
+    "css-loader": "5.2.7",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eslint": "^8.6.0",
+    "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-html": "^6.0.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-standard": "^4.0.1",
     "file-loader": "^6.0.0",
     "imports-loader": "^1.1.0",
     "jest": "^27.3.1",
-    "mini-css-extract-plugin": "1.6.0",
+    "mini-css-extract-plugin": "^1.6.2",
     "moment": "^2.29.3",
     "moment-locales-webpack-plugin": "^1.2.0",
     "nock": "^13.2.4",
-    "optimize-css-assets-webpack-plugin": "6.0.0",
     "style-loader": "^1.2.1",
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "<5.0.0",
     "typescript": "^4.6.3",
     "url-loader": "4.1.0",
-    "webpack": "4.44.2",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.0.0",
     "webpack-license-plugin": "^4.2.1",
-    "webpack-manifest-plugin": "^2.2.0"
+    "webpack-manifest-plugin": "^4.0.0"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.2.0",
@@ -102,23 +99,10 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-icons": "^4.3.1",
-    "react-query": "^3.34.16",
+    "react-query": "^3.39.1",
     "react-router-dom": "^6.3.0",
-    "react-table": "^7.7.0",
-    "redoc": "^2.0.0-rc.63",
+    "react-table": "^7.8.0",
+    "redoc": "^2.0.0-rc.72",
     "url-search-params-polyfill": "^8.1.0"
-  },
-  "resolutions": {
-    "lodash": "^4.17.21",
-    "css-what": ">=5.0.1",
-    "trim-newlines": ">=3.0.1",
-    "y18n": ">=5.0.5",
-    "postcss": ">=8.2.10",
-    "glob-parent": ">=5.1.2",
-    "ssri": ">= 8.0.1",
-    "jquery": ">=3.5.0",
-    "browserslist": ">=4.16.5",
-    "tar": ">=6.1.9",
-    "node-fetch": ">=2.6.7"
   }
 }

airflow/www/static/js/dags.js

@@ -113,14 +113,16 @@ $.each($('[id^=toggle]'), function toggleId() {
 
 $('.typeahead').typeahead({
   source(query, callback) {
-    return $.ajax(autocompleteUrl,
+    return $.ajax(
+      autocompleteUrl,
       {
         data: {
           query: encodeURIComponent(query),
           status: statusFilter,
         },
         success: callback,
-      });
+      },
+    );
   },
   autoSelect: false,
   afterSelect(value) {

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

@@ -56,15 +56,15 @@ const Grid = ({ isPanelOpen = false, onPanelToggle, hoveredTaskState }) => {
     setOpenGroupIds(groupIds);
   };
 
-  const scrollOnResize = new ResizeObserver(() => {
-    const runsContainer = scrollRef.current;
-    // Set scroll to top right if it is scrollable
-    if (runsContainer && runsContainer.scrollWidth > runsContainer.clientWidth) {
-      runsContainer.scrollBy(tableRef.current.offsetWidth, 0);
-    }
-  });
-
   useEffect(() => {
+    const scrollOnResize = new ResizeObserver(() => {
+      const runsContainer = scrollRef.current;
+      // Set scroll to top right if it is scrollable
+      if (runsContainer && runsContainer.scrollWidth > runsContainer.clientWidth) {
+        runsContainer.scrollBy(tableRef.current.offsetWidth, 0);
+      }
+    });
+
     if (tableRef && tableRef.current) {
       const table = tableRef.current;
 
@@ -74,7 +74,7 @@ const Grid = ({ isPanelOpen = false, onPanelToggle, hoveredTaskState }) => {
       };
     }
     return () => {};
-  }, [tableRef, scrollOnResize]);
+  }, [tableRef]);
 
   return (
     <Box

airflow/www/static/js/grid/LegendRow.test.jsx

@@ -41,7 +41,8 @@ describe('Test LegendRow', () => {
     { state: 'success', expectedSetValue: 'success' },
     { state: 'failed', expectedSetValue: 'failed' },
     { state: 'no_status', expectedSetValue: null },
-  ])('Hovering $state badge should trigger setHoverdTaskState function with $expectedSetValue',
+  ])(
+    'Hovering $state badge should trigger setHoverdTaskState function with $expectedSetValue',
     async ({ state, expectedSetValue }) => {
       const setHoveredTaskState = jest.fn();
       const { getByText } = render(
@@ -52,5 +53,6 @@ describe('Test LegendRow', () => {
       expect(setHoveredTaskState).toHaveBeenCalledWith(expectedSetValue);
       fireEvent.mouseLeave(successElement);
       expect(setHoveredTaskState).toHaveBeenLastCalledWith();
-    });
+    },
+  );
 });

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

@@ -79,6 +79,7 @@ const Table = ({
         hooks.visibleColumns.push((cols) => [
           {
             id: 'selection',
+            // eslint-disable-next-line react/no-unstable-nested-components
             Cell: ({ row }) => (
               <div>
                 <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />

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

@@ -27,25 +27,19 @@ import { ChakraWrapper } from '../utils/testUtils';
 
 describe('Test TaskName', () => {
   test('Displays a normal task name', () => {
-    const { getByText } = render(
-      <TaskName label="test" />, { wrapper: ChakraWrapper },
-    );
+    const { getByText } = render(<TaskName label="test" />, { wrapper: ChakraWrapper });
 
     expect(getByText('test')).toBeDefined();
   });
 
   test('Displays a mapped task name', () => {
-    const { getByText } = render(
-      <TaskName level={0} label="test" isMapped />, { wrapper: ChakraWrapper },
-    );
+    const { getByText } = render(<TaskName level={0} label="test" isMapped />, { wrapper: ChakraWrapper });
 
     expect(getByText('test [ ]')).toBeDefined();
   });
 
   test('Displays a group task name', () => {
-    const { getByText, getByTestId } = render(
-      <TaskName level={0} label="test" isGroup />, { wrapper: ChakraWrapper },
-    );
+    const { getByText, getByTestId } = render(<TaskName level={0} label="test" isGroup />, { wrapper: ChakraWrapper });
 
     expect(getByText('test')).toBeDefined();
     expect(getByTestId('closed-group')).toBeDefined();

airflow/www/static/js/grid/components/Tooltip.tsx

@@ -41,7 +41,7 @@ export interface TooltipProps
    * The React component to use as the
    * trigger for the tooltip
    */
-  children: React.ReactNode
+  children: React.ReactElement
   /**
    * The label of the tooltip
    */
@@ -128,7 +128,7 @@ const Tooltip = forwardRef<TooltipProps, 'div'>((props, ref) => {
    * Let's simply return the children
    */
   if (!label) {
-    return <>{children}</>;
+    return children;
   }
 
   return (

airflow/www/static/js/grid/context/autorefresh.jsx

@@ -19,7 +19,9 @@
 
 /* global localStorage, document */
 
-import React, { useContext, useState, useEffect } from 'react';
+import React, {
+  useMemo, useContext, useState, useEffect, useCallback,
+} from 'react';
 import { getMetaValue } from '../../utils';
 
 const autoRefreshKey = 'disabledAutoRefresh';
@@ -36,22 +38,32 @@ export const AutoRefreshProvider = ({ children }) => {
 
   const [isRefreshOn, setRefresh] = useState(initialState);
 
-  const onToggle = () => setRefresh(!isRefreshOn);
+  const onToggle = useCallback(
+    () => setRefresh(!isRefreshOn),
+    [isRefreshOn],
+  );
   const stopRefresh = () => setRefresh(false);
-  const startRefresh = () => isRefreshAllowed && setRefresh(true);
 
-  const toggleRefresh = (updateStorage = false) => {
-    if (updateStorage) {
-      if (isRefreshOn) {
-        localStorage.setItem(autoRefreshKey, 'true');
-      } else {
-        localStorage.removeItem(autoRefreshKey);
+  const startRefresh = useCallback(
+    () => isRefreshAllowed && setRefresh(true),
+    [isRefreshAllowed, setRefresh],
+  );
+
+  const toggleRefresh = useCallback(
+    (updateStorage = false) => {
+      if (updateStorage) {
+        if (isRefreshOn) {
+          localStorage.setItem(autoRefreshKey, 'true');
+        } else {
+          localStorage.removeItem(autoRefreshKey);
+        }
+        onToggle();
+      } else if (isRefreshAllowed) {
+        onToggle();
       }
-      onToggle();
-    } else if (isRefreshAllowed) {
-      onToggle();
-    }
-  };
+    },
+    [isRefreshAllowed, isRefreshOn, onToggle],
+  );
 
   useEffect(() => {
     const handleChange = (e) => {
@@ -67,12 +79,12 @@ export const AutoRefreshProvider = ({ children }) => {
     };
   });
 
+  const value = useMemo(() => ({
+    isRefreshOn, toggleRefresh, stopRefresh, startRefresh, isPaused,
+  }), [isPaused, isRefreshOn, startRefresh, toggleRefresh]);
+
   return (
-    <AutoRefreshContext.Provider
-      value={{
-        isRefreshOn, toggleRefresh, stopRefresh, startRefresh, isPaused,
-      }}
-    >
+    <AutoRefreshContext.Provider value={value}>
       {children}
     </AutoRefreshContext.Provider>
   );