Web console: Remove support for IE11 and other older browsers (#11357)

* Use common browserlist and update to drop IE11

* Change TypeScript target to ES2016

* Update browserslist for "supports es6" support

* Show a warning if accessed from an unsupported browser

* Inline browser-update styles; detect SyntaxErrors too

* Better wording

* Upgrade to the latest Blueprint

* Refactor RunButton to be FC, use useHotkeys

* Remove dead license

* Update snapshots

* Address feedback

* Wording

Co-authored-by: Vadim Ogievetsky <vadimon@gmail.com>

Co-authored-by: Vadim Ogievetsky <vadimon@gmail.com>

licenses.yaml

@@ -4909,7 +4909,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 3.33.0
+version: 3.45.0
 
 ---
 
@@ -4918,7 +4918,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 3.19.2
+version: 3.23.4
 
 ---
 
@@ -4927,7 +4927,17 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Palantir Technologies
-version: 3.22.0
+version: 3.26.1
+
+---
+
+name: "@hypnosphi/create-react-context"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: James Kyle
+version: 0.3.1
+license_file_path: licenses/bin/@hypnosphi-create-react-context.MIT
 
 ---
 
@@ -4991,16 +5001,6 @@ license_file_path: licenses/bin/core-js.MIT
 
 ---
 
-name: "create-react-context"
-license_category: binary
-module: web-console
-license_name: MIT License
-copyright: James Kyle
-version: 0.3.0
-license_file_path: licenses/bin/create-react-context.MIT
-
----
-
 name: "d3-array"
 license_category: binary
 module: web-console
@@ -5135,7 +5135,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Andrea Giammarchi
-version: 2.1.5
+version: 2.1.6
 license_file_path: licenses/bin/dom4.MIT
 
 ---
@@ -5483,7 +5483,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Giampaolo Bellavite
-version: 7.4.8
+version: 7.4.9
 license_file_path: licenses/bin/react-day-picker.MIT
 
 ---
@@ -5523,7 +5523,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Travis Arnold
-version: 1.3.7
+version: 1.3.11
 license_file_path: licenses/bin/react-popper.MIT
 
 ---

web-console/babel.config.js

@@ -19,19 +19,7 @@
 module.exports = function (api) {
   api.cache(false);
 
-  const presets = [
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'entry',
-        corejs: 3,
-        forceAllTransforms: true,
-        targets: {
-          ie: '11',
-        },
-      },
-    ],
-  ];
+  const presets = [['@babel/preset-env', { useBuiltIns: 'entry', corejs: 3 }]];
   const plugins = [];
 
   return {

web-console/package.json

@@ -58,10 +58,17 @@
     "node": "14.16.1",
     "npm": "6.14.12"
   },
+  "browserslist": [
+    "> 1% and supports es6",
+    "last 3 versions and supports es6",
+    "Firefox ESR",
+    "not dead",
+    "not ie 11"
+  ],
   "dependencies": {
-    "@blueprintjs/core": "^3.33.0",
-    "@blueprintjs/datetime": "^3.19.2",
-    "@blueprintjs/icons": "^3.22.0",
+    "@blueprintjs/core": "^3.45.0",
+    "@blueprintjs/datetime": "^3.23.4",
+    "@blueprintjs/icons": "^3.26.1",
     "axios": "^0.21.1",
     "brace": "^0.11.1",
     "classnames": "^2.2.6",
@@ -95,8 +102,8 @@
     "@awesome-code-style/eslint-config": "^3.0.0",
     "@awesome-code-style/prettier-config": "^3.0.0",
     "@awesome-code-style/stylelint-config": "^3.0.0",
-    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.4",
     "@testing-library/react": "^8.0.9",
     "@types/classnames": "^2.2.9",
     "@types/d3-array": "^2.0.0",
@@ -120,8 +127,9 @@
     "@types/react-table": "6.8.5",
     "@types/uuid": "^7.0.2",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "autoprefixer": "^9.8.6",
+    "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
+    "browserslist": "^4.16.6",
     "codecov": "^3.6.1",
     "css-loader": "^5.2.1",
     "enzyme": "^3.10.0",
@@ -142,8 +150,8 @@
     "license-checker": "^25.0.1",
     "node-sass": "^5.0.0",
     "playwright-chromium": "^1.10.0",
-    "postcss": "^8.2.10",
-    "postcss-loader": "^5.2.0",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^5.3.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",
     "sass-loader": "^11.0.1",

web-console/src/components/timed-button/__snapshots__/timed-button.spec.tsx.snap

@@ -37,7 +37,6 @@ exports[`TimedButton matches snapshot 1`] = `
     minimal={false}
     modifiers={Object {}}
     openOnTargetFocus={true}
-    position="auto"
     targetTagName="span"
     transitionDuration={300}
     usePortal={true}

web-console/src/console-application.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Intent } from '@blueprintjs/core';
+import { HotkeysProvider, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React from 'react';
@@ -279,6 +279,7 @@ export class ConsoleApplication extends React.PureComponent<
     }
 
     return (
+      <HotkeysProvider>
         <HashRouter hashType="noslash">
           <div className="console-application">
             <Switch>
@@ -296,6 +297,7 @@ export class ConsoleApplication extends React.PureComponent<
             </Switch>
           </div>
         </HashRouter>
+      </HotkeysProvider>
     );
   }
 }

web-console/src/views/ingestion-view/__snapshots__/ingestion-view.spec.tsx.snap

@@ -597,6 +597,7 @@ exports[`tasks view matches snapshot 1`] = `
     icon="error"
     intent="primary"
     isOpen={false}
+    loading={false}
     onConfirm={[Function]}
   >
     <p />

web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`QueryView matches snapshot 1`] = `
       <div
         className="query-control-bar"
       >
-        <HotkeysTarget(RunButton)
+        <Memo(RunButton)
           loading={true}
           onEditContext={[Function]}
           onExplain={[Function]}
@@ -49,6 +49,7 @@ exports[`QueryView matches snapshot 1`] = `
           content="Automatically wrap the query with a limit to protect against queries with very large result sets."
           hoverCloseDelay={0}
           hoverOpenDelay={800}
+          minimal={false}
           transitionDuration={100}
         >
           <Blueprint3.Switch
@@ -112,7 +113,7 @@ exports[`QueryView matches snapshot with query 1`] = `
       <div
         className="query-control-bar"
       >
-        <HotkeysTarget(RunButton)
+        <Memo(RunButton)
           loading={true}
           onEditContext={[Function]}
           onExplain={[Function]}
@@ -127,6 +128,7 @@ exports[`QueryView matches snapshot with query 1`] = `
           content="Automatically wrap the query with a limit to protect against queries with very large result sets."
           hoverCloseDelay={0}
           hoverOpenDelay={800}
+          minimal={false}
           transitionDuration={100}
         >
           <Blueprint3.Switch

web-console/src/views/query-view/run-button/run-button.tsx

@@ -19,15 +19,13 @@
 import {
   Button,
   ButtonGroup,
-  Hotkey,
-  Hotkeys,
-  HotkeysTarget,
   Intent,
   Menu,
   MenuDivider,
   MenuItem,
   Popover,
   Position,
+  useHotkeys,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
@@ -59,29 +57,7 @@ export interface RunButtonProps {
   onPrettier: () => void;
 }
 
-@HotkeysTarget
-export class RunButton extends React.PureComponent<RunButtonProps> {
-  public renderHotkeys() {
-    return (
-      <Hotkeys>
-        <Hotkey
-          allowInInput
-          global
-          combo="ctrl + enter"
-          label="run on click"
-          onKeyDown={this.handleRun}
-        />
-      </Hotkeys>
-    );
-  }
-
-  private readonly handleRun = () => {
-    const { onRun } = this.props;
-    if (!onRun) return;
-    onRun();
-  };
-
-  renderExtraMenu() {
+const RunButtonExtraMenu = (props: RunButtonProps) => {
   const {
     runeMode,
     onExplain,
@@ -90,7 +66,7 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
     onEditContext,
     onHistory,
     onPrettier,
-    } = this.props;
+  } = props;
 
   const useCache = getUseCache(queryContext);
   const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
@@ -148,10 +124,29 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
       />
     </Menu>
   );
-  }
+};
 
-  render(): JSX.Element {
-    const { runeMode, onRun, loading } = this.props;
+export const RunButton = React.memo(function RunButton(props: RunButtonProps) {
+  const { runeMode, onRun, loading } = props;
+
+  const handleRun = React.useCallback(() => {
+    if (!onRun) return;
+    onRun();
+  }, [onRun]);
+
+  const hotkeys = React.useMemo(() => {
+    return [
+      {
+        allowInInput: true,
+        global: true,
+        combo: 'ctrl + enter',
+        label: 'Runs the current query',
+        onKeyDown: handleRun,
+      },
+    ];
+  }, [handleRun]);
+
+  useHotkeys(hotkeys);
 
   return (
     <ButtonGroup className="run-button">
@@ -160,7 +155,7 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
           className={runeMode ? 'rune-button' : undefined}
           disabled={loading}
           icon={IconNames.CARET_RIGHT}
-            onClick={this.handleRun}
+          onClick={handleRun}
           text="Run"
           intent={Intent.PRIMARY}
         />
@@ -172,7 +167,7 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
           disabled
         />
       )}
-        <Popover position={Position.BOTTOM_LEFT} content={this.renderExtraMenu()}>
+      <Popover position={Position.BOTTOM_LEFT} content={<RunButtonExtraMenu {...props} />}>
         <Button
           className={runeMode ? 'rune-button' : undefined}
           icon={IconNames.MORE}
@@ -181,5 +176,4 @@ export class RunButton extends React.PureComponent<RunButtonProps> {
       </Popover>
     </ButtonGroup>
   );
-  }
-}
+});

web-console/tsconfig.json

@@ -19,7 +19,7 @@
     "rootDirs": ["lib", "src"],
     "skipLibCheck": true,
     "strict": true,
-    "target": "es5",
+    "target": "es2016"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "e2e-tests/**/*.ts"]
 }

web-console/unified-console.html

@@ -27,9 +27,49 @@
     <title>Apache Druid</title>
     <meta name="description" content="Apache Druid console" />
     <link rel="shortcut icon" href="favicon.png" />
+    <style>
+      body {
+        background: #24283b;
+      }
+      #browser-update {
+        background-color: #d9822b;
+        border-radius: 3px;
+        color: #ffffff;
+        font-family: sans-serif;
+        font-size: 13px;
+        line-height: 1.2;
+        padding: 13px;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        text-align: center;
+        z-index: 11;
+      }
+      #browser-update a {
+        color: white;
+        font-weight: bold;
+      }
+    </style>
   </head>
   <body class="bp3-dark mouse-mode">
     <div class="app-container"></div>
+    <div id="browser-update" style="display: none">
+      You are using an unsupported browser. The console will not work properly.
+      <a href="https://browser-update.org/update.html">Update to a supported browser.</a>
+    </div>
+    <script>
+      function showUpdate() {
+        document.getElementById('browser-update').style.display = 'block';
+      }
+      if (!('Proxy' in window)) showUpdate();
+      window.onerror = function (message, source, lineno, colno, error) {
+        if (error instanceof SyntaxError || message === 'Syntax error') {
+          showUpdate();
+        }
+        return false;
+      };
+    </script>
     <script src="console-config.js"></script>
     <script src="public/web-console-0.22.0.js"></script>
   </body>

web-console/webpack.config.js

@@ -119,7 +119,6 @@ module.exports = env => {
                   plugins: {
                     'postcss-preset-env': {
                       autoprefixer: { grid: 'no-autoplace' },
-                      browsers: ['> 1%', 'last 3 versions', 'Firefox ESR', 'Opera 12.1', 'ie 11'],
                     },
                   },
                 },