Upgrades the React dependency to v18 (#14380)

* Use react 18

* Remove deprecated usage of Toaster

* Make AppToaster lazy

* Update testing-library, snapshots

* Licenses

* Document lazy-init, add license header

licenses.yaml

@@ -5433,7 +5433,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Microsoft Corporation.
-version: 16.14.35
+version: 18.2.8
 license_file_path: licenses/bin/@types-react.MIT
 
 ---
@@ -5453,7 +5453,7 @@ license_category: binary
 module: web-console
 license_name: BSD-3-Clause License
 copyright: Ajax.org B.V.
-version: 1.4.13
+version: 1.4.14
 license_file_path: licenses/bin/ace-builds.BSD3
 
 ---
@@ -6091,7 +6091,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Jordan Harband
-version: 1.0.4
+version: 1.1.1
 license_file_path: licenses/bin/is-arguments.MIT
 
 ---
@@ -6121,7 +6121,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Jordan Harband
-version: 1.0.1
+version: 1.0.5
 license_file_path: licenses/bin/is-date-object.MIT
 
 ---
@@ -6266,16 +6266,6 @@ license_file_path: licenses/bin/memoize-one.MIT
 
 ---
 
-name: "mini-create-react-context"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: StringEpsilon
-version: 0.3.2
-license_file_path: licenses/bin/mini-create-react-context.MIT
-
----
-
 name: "no-case"
 license_category: binary
 module: web-console
@@ -6321,7 +6311,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Jordan Harband
-version: 1.0.1
+version: 1.1.5
 license_file_path: licenses/bin/object-is.MIT
 
 ---
@@ -6450,7 +6440,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: James Hrisho
-version: 9.5.0
+version: 10.1.0
 license_file_path: licenses/bin/react-ace.MIT
 
 ---
@@ -6480,7 +6470,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Facebook, Inc. and its affiliates.
-version: 16.14.0
+version: 18.2.0
 license_file_path: licenses/bin/react-dom.MIT
 
 ---
@@ -6490,7 +6480,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Chris Bolin
-version: 3.2.0
+version: 3.2.2
 license_file_path: licenses/bin/react-fast-compare.MIT
 
 ---
@@ -6519,8 +6509,8 @@ name: "react-router-dom"
 license_category: binary
 module: web-console
 license_name: MIT License
-copyright: React Training
+copyright: Remix Software
-version: 5.1.2
+version: 5.3.4
 license_file_path: licenses/bin/react-router-dom.MIT
 
 ---
@@ -6529,8 +6519,8 @@ name: "react-router"
 license_category: binary
 module: web-console
 license_name: MIT License
-copyright: React Training
+copyright: Remix Software
-version: 5.1.2
+version: 5.3.4
 license_file_path: licenses/bin/react-router.MIT
 
 ---
@@ -6570,7 +6560,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Facebook, Inc. and its affiliates.
-version: 16.14.0
+version: 18.2.0
 license_file_path: licenses/bin/react.MIT
 
 ---
@@ -6590,7 +6580,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Jordan Harband
-version: 1.4.3
+version: 1.5.0
 license_file_path: licenses/bin/regexp.prototype.flags.MIT
 
 ---
@@ -6640,7 +6630,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Facebook, Inc. and its affiliates.
-version: 0.19.1
+version: 0.23.0
 license_file_path: licenses/bin/scheduler.MIT
 
 ---

licenses/bin/react-router-dom.MIT

@@ -1,6 +1,7 @@
 MIT License
 
-Copyright (c) React Training 2016-2018
+Copyright (c) React Training 2015-2019
+Copyright (c) Remix Software 2020-2022
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

licenses/bin/react-router.MIT

@@ -1,6 +1,7 @@
 MIT License
 
-Copyright (c) React Training 2016-2018
+Copyright (c) React Training 2015-2019
+Copyright (c) Remix Software 2020-2022
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

web-console/.npmrc

@@ -0,0 +1,16 @@
+; 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.
+legacy-peer-deps=true

web-console/package.json

@@ -64,10 +64,11 @@
   ],
   "dependencies": {
     "@blueprintjs/core": "^4.20.1",
+    "@blueprintjs/datetime": "^4.4.36",
     "@blueprintjs/datetime2": "^0.9.35",
     "@blueprintjs/icons": "^4.16.0",
     "@blueprintjs/popover2": "^1.14.9",
-    "ace-builds": "^1.4.13",
+    "ace-builds": "~1.4.14",
     "axios": "^0.26.1",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
@@ -88,12 +89,12 @@
     "memoize-one": "^5.1.1",
     "numeral": "^2.0.6",
     "path-parse": "^1.0.7",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
-    "react-ace": "^9.5.0",
+    "react-ace": "^10.1.0",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.2.0",
-    "react-router": "^5.1.2",
+    "react-router": "^5.3.4",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.3.4",
     "react-splitter-layout": "^4.0.0",
     "react-table": "~6.10.3",
     "regenerator-runtime": "^0.13.7",
@@ -106,7 +107,7 @@
     "@awesome-code-style/stylelint-config": "^4.0.0",
     "@babel/core": "^7.14.3",
     "@babel/preset-env": "^7.14.4",
-    "@testing-library/react": "^8.0.9",
+    "@testing-library/react": "^14.0.0",
     "@types/classnames": "^2.2.9",
     "@types/d3-array": "^2.12.3",
     "@types/d3-axis": "^2.1.3",
@@ -122,10 +123,10 @@
     "@types/memoize-one": "^4.1.1",
     "@types/node": "^12.11.7",
     "@types/numeral": "^0.0.26",
-    "@types/react": "^16.14.5",
+    "@types/react": "^18.2.8",
-    "@types/react-dom": "^16.9.12",
+    "@types/react-dom": "^18.2.4",
-    "@types/react-router-dom": "^5.1.0",
+    "@types/react-router-dom": "^5.3.3",
-    "@types/react-splitter-layout": "^3.0.0",
+    "@types/react-splitter-layout": "^3.0.2",
     "@types/react-table": "6.8.5",
     "@types/uuid": "^7.0.2",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
@@ -170,5 +171,8 @@
     "webpack-bundle-analyzer": "^4.4.1",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"
+  },
+  "overrides": {
+    "@types/react": "$@types/react"
   }
 }

web-console/src/dialogs/snitch-dialog/snitch-dialog.tsx

@@ -27,6 +27,7 @@ import './snitch-dialog.scss';
 
 export interface SnitchDialogProps {
   title: string;
+  children?: React.ReactNode;
   className?: string;
   onSave: (comment: string) => void | Promise<void>;
   saveDisabled?: boolean;

web-console/src/entry.ts

@@ -22,7 +22,7 @@ import './bootstrap/ace';
 
 import { QueryRunner } from 'druid-query-toolkit';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { bootstrapJsonParse } from './bootstrap/json-parser';
 import { bootstrapReactTable } from './bootstrap/react-table-defaults';
@@ -99,12 +99,13 @@ QueryRunner.defaultQueryExecutor = (payload, isSql, cancelToken) => {
   return Api.instance.post(`/druid/v2${isSql ? '/sql' : ''}`, payload, { cancelToken });
 };
 
-ReactDOM.render(
+const root = createRoot(container);
+
+root.render(
   React.createElement(ConsoleApplication, {
     defaultQueryContext: consoleConfig.defaultQueryContext,
     mandatoryQueryContext: consoleConfig.mandatoryQueryContext,
   }),
-  container,
 );
 
 // ---------------------------------

web-console/src/singletons/toaster.ts

@@ -16,9 +16,22 @@
  * limitations under the License.
  */
 
-import { Position, Toaster } from '@blueprintjs/core';
+import type { ToasterInstance } from '@blueprintjs/core';
+import { OverlayToaster, Position } from '@blueprintjs/core';
 
-export const AppToaster = Toaster.create({
+let toaster: ToasterInstance | undefined;
-  className: 'recipe-toaster',
+
-  position: Position.TOP,
+export const AppToaster: { show: ToasterInstance['show'] } = {
-});
+  show: (...args) => {
+    if (!toaster) {
+      // Using lazy initialization avoids the following deprecation notice for "ReactDOM.render",
+      // both on initial load and in every unit test:
+      //
+      // Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until
+      // you switch to the new API, your app will behave as if it's running React 17.
+      // Learn more: https://reactjs.org/link/switch-to-createroot
+      toaster = OverlayToaster.create({ className: 'recipe-toaster', position: Position.TOP });
+    }
+    return toaster.show(...args);
+  },
+};

web-console/src/views/load-data-view/filter-table/__snapshots__/filter-table.spec.tsx.snap

@@ -36,7 +36,6 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -65,7 +64,6 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -94,7 +92,6 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -123,7 +120,6 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -152,7 +148,6 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -181,7 +176,6 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -210,7 +204,6 @@ exports[`FilterTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>

web-console/src/views/load-data-view/parse-data-table/__snapshots__/parse-data-table.spec.tsx.snap

@@ -46,7 +46,6 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -75,7 +74,6 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -104,7 +102,6 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -133,7 +130,6 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -162,7 +158,6 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -191,7 +186,6 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -220,7 +214,6 @@ exports[`ParseDataTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>

web-console/src/views/load-data-view/parse-time-table/__snapshots__/parse-time-table.spec.tsx.snap

@@ -62,7 +62,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -91,7 +90,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -120,7 +118,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -149,7 +146,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -178,7 +174,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -207,7 +202,6 @@ exports[`ParseTimeTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>

web-console/src/views/load-data-view/transform-table/__snapshots__/transform-table.spec.tsx.snap

@@ -36,7 +36,6 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -65,7 +64,6 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -94,7 +92,6 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -123,7 +120,6 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -152,7 +148,6 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -181,7 +176,6 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>
@@ -210,7 +204,6 @@ exports[`TransformTable matches snapshot 1`] = `
               <div
                 class="column-detail"
               >
-                
                  
               </div>
             </div>