Upgrade typescript and other dependencies (#13762)

* Bump zustand, licenses

* Bump TypeScript, Eslint, use type imports

* Switch to react-shallow-renderer from enzyme

* Update ts-loader

licenses.yaml

@@ -6537,6 +6537,16 @@ license_file_path: licenses/bin/upper-case.MIT
 
 ---
 
+name: "use-sync-external-store"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Facebook, Inc. and its affiliates.
+version: 1.2.0
+license_file_path: licenses/bin/use-sync-external-store.MIT
+
+---
+
 name: "value-equal"
 license_category: binary
 module: web-console
@@ -6572,6 +6582,6 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Paul Henschel
-version: 3.7.2
+version: 4.3.2
 license_file_path: licenses/bin/zustand.MIT
 # Web console modules end

licenses/bin/use-sync-external-store.MIT

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

web-console/.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
     },
   },
   rules: {
+    '@typescript-eslint/consistent-type-imports': ['warn', { prefer: 'type-imports' }],
     'header/header': [
       2,
       'block',

web-console/e2e-tests/auto-compaction.spec.ts

@@ -17,10 +17,10 @@
  */
 
 import path from 'path';
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { CompactionConfig } from './component/datasources/compaction';
-import { Datasource } from './component/datasources/datasource';
+import type { Datasource } from './component/datasources/datasource';
 import { DatasourcesOverview } from './component/datasources/overview';
 import { HashedPartitionsSpec } from './component/load-data/config/partition';
 import { saveScreenshotIfError } from './util/debug';

web-console/e2e-tests/cancel-query.spec.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { QueryOverview } from './component/query/overview';
 import { saveScreenshotIfError } from './util/debug';

web-console/e2e-tests/component/datasources/compaction.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { PartitionsSpec } from '../load-data/config/partition';
+import type { PartitionsSpec } from '../load-data/config/partition';
 
 /**
  * Datasource compaction configuration

web-console/e2e-tests/component/datasources/overview.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { clickButton, getLabeledInput, setLabeledInput } from '../../util/playwright';
 import { extractTable } from '../../util/table';

web-console/e2e-tests/component/ingestion/overview.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { extractTable } from '../../util/table';
 

web-console/e2e-tests/component/load-data/config/partition.ts

@@ -18,7 +18,7 @@
 
 /* eslint-disable max-classes-per-file */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import {
   getLabeledInput,

web-console/e2e-tests/component/load-data/data-connector/data-connector.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { clickButton } from '../../../util/playwright';
 

web-console/e2e-tests/component/load-data/data-connector/local-file.ts

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { setLabeledInput } from '../../../util/playwright';
 
-import { clickApplyButton, DataConnector } from './data-connector';
+import type { DataConnector } from './data-connector';
+import { clickApplyButton } from './data-connector';
 
 /**
  * Local file connector for data loader input data.

web-console/e2e-tests/component/load-data/data-connector/reindex.ts

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { setLabeledInput } from '../../../util/playwright';
 
-import { clickApplyButton, DataConnector } from './data-connector';
+import type { DataConnector } from './data-connector';
+import { clickApplyButton } from './data-connector';
 
 /**
  * Reindexing connector for data loader input data.

web-console/e2e-tests/component/load-data/data-loader.ts

@@ -16,15 +16,15 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { clickButton, setLabeledInput, setLabeledTextarea } from '../../util/playwright';
 
-import { ConfigureSchemaConfig } from './config/configure-schema';
+import type { ConfigureSchemaConfig } from './config/configure-schema';
-import { ConfigureTimestampConfig } from './config/configure-timestamp';
+import type { ConfigureTimestampConfig } from './config/configure-timestamp';
-import { PartitionConfig } from './config/partition';
+import type { PartitionConfig } from './config/partition';
-import { PublishConfig } from './config/publish';
+import type { PublishConfig } from './config/publish';
-import { DataConnector } from './data-connector/data-connector';
+import type { DataConnector } from './data-connector/data-connector';
 
 /**
  * Represents load data tab.

web-console/e2e-tests/component/query/overview.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { clickButton, clickText } from '../../util/playwright';
 import { extractTable } from '../../util/table';

web-console/e2e-tests/component/workbench/overview.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { clickButton } from '../../util/playwright';
 import { extractTable } from '../../util/table';

web-console/e2e-tests/multi-stage-query.spec.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { WorkbenchOverview } from './component/workbench/overview';
 import { saveScreenshotIfError } from './util/debug';

web-console/e2e-tests/reindexing.spec.ts

@@ -17,7 +17,7 @@
  */
 
 import path from 'path';
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { DatasourcesOverview } from './component/datasources/overview';
 import { IngestionOverview } from './component/ingestion/overview';

web-console/e2e-tests/tutorial-batch.spec.ts

@@ -17,7 +17,7 @@
  */
 
 import { T } from 'druid-query-toolkit';
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 import { DatasourcesOverview } from './component/datasources/overview';
 import { IngestionOverview } from './component/ingestion/overview';

web-console/e2e-tests/util/debug.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 export async function saveScreenshotIfError(
   filenamePrefix: string,

web-console/e2e-tests/util/table.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-chromium';
+import type * as playwright from 'playwright-chromium';
 
 /**
  * Extracts an HTML table into a text representation.

web-console/jest.unit.config.js

@@ -22,7 +22,6 @@ module.exports = Object.assign(common, {
   moduleNameMapper: {
     '\\.s?css$': 'identity-obj-proxy',
   },
-  snapshotSerializers: ['enzyme-to-json/serializer'],
   setupFilesAfterEnv: ['<rootDir>src/setup-tests.ts'],
   testMatch: ['**/src/**/?(*.)+(spec).(ts|tsx)'],
 });

web-console/package.json

@@ -101,10 +101,10 @@
     "react-table": "~6.10.3",
     "regenerator-runtime": "^0.13.7",
     "tslib": "^2.3.1",
-    "zustand": "^3.6.5"
+    "zustand": "^4.3.2"
   },
   "devDependencies": {
-    "@awesome-code-style/eslint-config": "^4.0.0",
+    "@awesome-code-style/eslint-config": "^4.1.0",
     "@awesome-code-style/prettier-config": "^4.0.0",
     "@awesome-code-style/stylelint-config": "^4.0.0",
     "@babel/core": "^7.14.3",
@@ -131,15 +131,13 @@
     "@types/react-splitter-layout": "^3.0.0",
     "@types/react-table": "6.8.5",
     "@types/uuid": "^7.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.11.0",
+    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@typescript-eslint/parser": "^5.51.0",
     "autoprefixer": "^10.2.6",
     "babel-loader": "^8.2.2",
     "browserslist": "^4.16.6",
     "codecov": "^3.8.2",
     "css-loader": "^5.2.1",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.4.3",
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-header": "^3.1.1",
@@ -160,15 +158,16 @@
     "postcss-loader": "^5.3.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.5.1",
+    "react-shallow-renderer": "^16.15.0",
     "replace": "^1.2.2",
     "sass-loader": "^11.1.0",
     "snarkdown": "^2.0.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.12.0",
     "ts-jest": "^27.1.3",
-    "ts-loader": "^8.1.0",
+    "ts-loader": "^9.4.2",
     "ts-node": "^10.9.1",
-    "typescript": "^4.5.5",
+    "typescript": "^4.9.5",
     "uuid": "^7.0.2",
     "webpack": "^5.33.2",
     "webpack-bundle-analyzer": "^4.4.1",

web-console/script/mkcomp

@@ -143,9 +143,10 @@ writeFile(
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { ${camelName} } from './${name}';
 
 describe('${camelName}', () => {
@@ -153,7 +154,7 @@ describe('${camelName}', () => {
     const ${snakeName} = shallow(
       <${camelName}/>
     );
-   
+
     expect(${snakeName}).toMatchSnapshot();
   });
 });

web-console/src/bootstrap/react-table-defaults.tsx

@@ -17,7 +17,8 @@
  */
 
 import React from 'react';
-import { Filter, ReactTableDefaults } from 'react-table';
+import type { Filter } from 'react-table';
+import { ReactTableDefaults } from 'react-table';
 
 import { Loader } from '../components';
 import {

web-console/src/components/action-cell/action-cell.tsx

@@ -21,7 +21,8 @@ import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';
 
-import { BasicAction, basicActionsToMenu } from '../../utils/basic-action';
+import type { BasicAction } from '../../utils/basic-action';
+import { basicActionsToMenu } from '../../utils/basic-action';
 import { ActionIcon } from '../action-icon/action-icon';
 
 import './action-cell.scss';

web-console/src/components/action-icon/action-icon.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { Icon, IconName } from '@blueprintjs/core';
+import type { IconName } from '@blueprintjs/core';
+import { Icon } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 

web-console/src/components/array-input/array-input.tsx

@@ -16,14 +16,16 @@
  * limitations under the License.
  */
 
-import { Button, Intent, Position, TextArea } from '@blueprintjs/core';
+import type { Intent } from '@blueprintjs/core';
+import { Button, Position, TextArea } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
 import { compact } from '../../utils';
-import { Suggestion, SuggestionMenu } from '../suggestion-menu/suggestion-menu';
+import type { Suggestion } from '../suggestion-menu/suggestion-menu';
+import { SuggestionMenu } from '../suggestion-menu/suggestion-menu';
 
 import './array-input.scss';
 

web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap

@@ -5,7 +5,6 @@ exports[`AutoForm matches snapshot 1`] = `
   className="auto-form"
 >
   <Memo(FormGroupWithInfo)
-    key="testNumber"
     label="Test number"
   >
     <Memo(NumericInputWithDefault)
@@ -18,7 +17,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testSizeBytes"
     label="Test size bytes"
   >
     <Blueprint4.NumericInput
@@ -40,7 +38,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testString"
     label="Test string"
   >
     <Memo(SuggestibleInput)
@@ -53,7 +50,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testStringWithDefault"
     label="Test string with default"
   >
     <Memo(SuggestibleInput)
@@ -66,7 +62,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testStringWithMultiline"
     label="Test string with multiline"
   >
     <Memo(SuggestibleInput)
@@ -79,7 +74,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testBoolean"
     label="Test boolean"
   >
     <Blueprint4.ButtonGroup>
@@ -100,7 +94,6 @@ exports[`AutoForm matches snapshot 1`] = `
     </Blueprint4.ButtonGroup>
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testBooleanWithDefault"
     label="Test boolean with default"
   >
     <Blueprint4.ButtonGroup>
@@ -121,7 +114,6 @@ exports[`AutoForm matches snapshot 1`] = `
     </Blueprint4.ButtonGroup>
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testStringArray"
     label="Test string array"
   >
     <Memo(ArrayInput)
@@ -132,7 +124,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testStringArrayWithDefault"
     label="Test string array with default"
   >
     <Memo(ArrayInput)
@@ -148,7 +139,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testJson"
     label="Test json"
   >
     <Memo(JsonInput)
@@ -157,7 +147,6 @@ exports[`AutoForm matches snapshot 1`] = `
     />
   </Memo(FormGroupWithInfo)>
   <Memo(FormGroupWithInfo)
-    key="testStringRequiredAndDefaultValue"
     label="Test string required and default value"
   >
     <Memo(SuggestibleInput)
@@ -170,9 +159,7 @@ exports[`AutoForm matches snapshot 1`] = `
       value=""
     />
   </Memo(FormGroupWithInfo)>
-  <Blueprint4.FormGroup
+  <Blueprint4.FormGroup>
-    key="more-or-less"
-  >
     <Blueprint4.Button
       fill={true}
       minimal={true}

web-console/src/components/auto-form/auto-form.spec.tsx

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
 import { COMPACTION_CONFIG_FIELDS } from '../../druid-models';
+import { shallow } from '../../utils/shallow-renderer';
 
 import { AutoForm } from './auto-form';
 

web-console/src/components/auto-form/auto-form.tsx

@@ -35,7 +35,7 @@ import { JsonInput } from '../json-input/json-input';
 import { NumericInputWithDefault } from '../numeric-input-with-default/numeric-input-with-default';
 import { PopoverText } from '../popover-text/popover-text';
 import { SuggestibleInput } from '../suggestible-input/suggestible-input';
-import { Suggestion } from '../suggestion-menu/suggestion-menu';
+import type { Suggestion } from '../suggestion-menu/suggestion-menu';
 
 import './auto-form.scss';
 

web-console/src/components/braced-text/braced-text.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { BracedText } from './braced-text';
 
 describe('BracedText', () => {

web-console/src/components/cell-filter-menu/cell-filter-menu.tsx

@@ -18,20 +18,12 @@
 
 import { Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import {
+import type { Column, SqlExpression, SqlQuery } from 'druid-query-toolkit';
-  C,
+import { C, L, SqlComparison, SqlLiteral, SqlRecord, trimString } from 'druid-query-toolkit';
-  Column,
-  L,
-  SqlComparison,
-  SqlExpression,
-  SqlLiteral,
-  SqlQuery,
-  SqlRecord,
-  trimString,
-} from 'druid-query-toolkit';
 import React from 'react';
 
-import { copyAndAlert, prettyPrintSql, QueryAction, stringifyValue } from '../../utils';
+import type { QueryAction } from '../../utils';
+import { copyAndAlert, prettyPrintSql, stringifyValue } from '../../utils';
 
 function sqlLiteralForColumnValue(column: Column, value: unknown): SqlLiteral | undefined {
   if (column.sqlType === 'TIMESTAMP') {

web-console/src/components/center-message/center-message.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import './center-message.scss';
 

web-console/src/components/date-range-selector/date-range-selector.tsx

@@ -17,7 +17,8 @@
  */
 
 import { Button, InputGroup, Popover, Position } from '@blueprintjs/core';
-import { DateRange, DateRangePicker } from '@blueprintjs/datetime';
+import type { DateRange } from '@blueprintjs/datetime';
+import { DateRangePicker } from '@blueprintjs/datetime';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 

web-console/src/components/external-link/external-link.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 export interface ExternalLinkProps {
   href: string;

web-console/src/components/fancy-tab-pane/fancy-tab-pane.tsx

@@ -34,9 +34,11 @@
  * limitations under the License.
  */
 
-import { Button, Icon, IconName, Intent } from '@blueprintjs/core';
+import type { IconName } from '@blueprintjs/core';
+import { Button, Icon, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import { filterMap } from '../../utils';
 

web-console/src/components/form-json-selector/form-json-selector.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { FormJsonSelector } from './form-json-selector';
 
 describe('FormJsonSelector', () => {

web-console/src/components/formatted-input/formatted-input.tsx

@@ -16,12 +16,13 @@
  * limitations under the License.
  */
 
-import { InputGroup, InputGroupProps2, Intent, TextArea } from '@blueprintjs/core';
+import type { InputGroupProps2 } from '@blueprintjs/core';
+import { InputGroup, Intent, TextArea } from '@blueprintjs/core';
 import { Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
-import { Formatter } from '../../utils';
+import type { Formatter } from '../../utils';
 
 import './formatted-input.scss';
 

web-console/src/components/header-bar/header-bar.spec.tsx

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
 import { Capabilities } from '../../helpers';
+import { shallow } from '../../utils/shallow-renderer';
 
 import { HeaderBar } from './header-bar';
 

web-console/src/components/highlight-text/highlight-text.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { HighlightText } from './highlight-text';
 
 describe('HighlightText', () => {

web-console/src/components/interval-input/interval-input.tsx

@@ -16,8 +16,10 @@
  * limitations under the License.
  */
 
-import { Button, InputGroup, Intent, Position } from '@blueprintjs/core';
+import type { Intent } from '@blueprintjs/core';
-import { DateRange, DateRangePicker, TimePrecision } from '@blueprintjs/datetime';
+import { Button, InputGroup, Position } from '@blueprintjs/core';
+import type { DateRange } from '@blueprintjs/datetime';
+import { DateRangePicker, TimePrecision } from '@blueprintjs/datetime';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import React from 'react';

web-console/src/components/json-collapse/json-collapse.spec.tsx

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import * as JSONBig from 'json-bigint-native';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { JsonCollapse } from './json-collapse';
 
 describe('JsonCollapse', () => {

web-console/src/components/json-input/json-input.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Ace } from 'ace-builds';
+import type { Ace } from 'ace-builds';
 import classNames from 'classnames';
 import Hjson from 'hjson';
 import * as JSONBig from 'json-bigint-native';

web-console/src/components/menu-checkbox/menu-checkbox.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { MenuItem, MenuItemProps } from '@blueprintjs/core';
+import type { MenuItemProps } from '@blueprintjs/core';
+import { MenuItem } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 

web-console/src/components/menu-tristate/menu-tristate.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { MenuItem, MenuItemProps } from '@blueprintjs/core';
+import type { MenuItemProps } from '@blueprintjs/core';
+import { MenuItem } from '@blueprintjs/core';
 import classNames from 'classnames';
 import React from 'react';
 

web-console/src/components/numeric-input-with-default/numeric-input-with-default.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { NumericInputWithDefault } from './numeric-input-with-default';
 
 describe('NumericInputWithDefault', () => {

web-console/src/components/numeric-input-with-default/numeric-input-with-default.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { HTMLInputProps, NumericInput, NumericInputProps } from '@blueprintjs/core';
+import type { HTMLInputProps, NumericInputProps } from '@blueprintjs/core';
+import { NumericInput } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
 export type NumericInputWithDefaultProps = HTMLInputProps & NumericInputProps;

web-console/src/components/query-error-pane/query-error-pane.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { QueryErrorPane } from './query-error-pane';
 
 describe('QueryErrorPane', () => {

web-console/src/components/query-error-pane/query-error-pane.tsx

@@ -18,7 +18,7 @@
 
 import React, { useState } from 'react';
 
-import { DruidError, RowColumn } from '../../utils';
+import type { DruidError, RowColumn } from '../../utils';
 import { HighlightText } from '../highlight-text/highlight-text';
 
 import './query-error-pane.scss';

web-console/src/components/record-table-pane/record-table-pane.tsx

@@ -20,19 +20,20 @@ import { Button, Icon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
-import { Column, QueryResult } from 'druid-query-toolkit';
+import type { Column, QueryResult } from 'druid-query-toolkit';
 import React, { useEffect, useState } from 'react';
+import type { RowRenderProps } from 'react-table';
 import ReactTable from 'react-table';
 
 import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog';
 import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
+import type { Pagination } from '../../utils';
 import {
   columnToIcon,
   columnToWidth,
   filterMap,
   formatNumber,
   getNumericColumnBraces,
-  Pagination,
 } from '../../utils';
 import { BracedText } from '../braced-text/braced-text';
 import { CellFilterMenu } from '../cell-filter-menu/cell-filter-menu';
@@ -149,7 +150,7 @@ export const RecordTablePane = React.memo(function RecordTablePane(props: Record
               },
               headerClassName: getHeaderClassName(h),
               accessor: String(i),
-              Cell(row) {
+              Cell(row: RowRenderProps) {
                 const value = row.value;
                 return (
                   <div>

web-console/src/components/refresh-button/refresh-button.tsx

@@ -19,8 +19,9 @@
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
-import { LocalStorageKeys } from '../../utils';
+import type { LocalStorageKeys } from '../../utils';
-import { DelayLabel, TimedButton } from '../timed-button/timed-button';
+import type { DelayLabel } from '../timed-button/timed-button';
+import { TimedButton } from '../timed-button/timed-button';
 
 const DELAYS: DelayLabel[] = [
   { label: '5 seconds', delay: 5000 },

web-console/src/components/rule-editor/rule-editor.tsx

@@ -31,7 +31,8 @@ import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
 import { durationSanitizer } from '../../utils';
-import { Rule, RuleUtil } from '../../utils/load-rule';
+import type { Rule } from '../../utils/load-rule';
+import { RuleUtil } from '../../utils/load-rule';
 import { SuggestibleInput } from '../suggestible-input/suggestible-input';
 
 import './rule-editor.scss';

web-console/src/components/segment-timeline/bar-group.tsx

@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
-import { AxisScale } from 'd3-axis';
+import type { AxisScale } from 'd3-axis';
 import React from 'react';
 
 import { BarUnit } from './bar-unit';
-import { BarUnitData, HoveredBarInfo } from './stacked-bar-chart';
+import type { BarUnitData, HoveredBarInfo } from './stacked-bar-chart';
 
 interface BarGroupProps {
   dataToRender: BarUnitData[];

web-console/src/components/segment-timeline/segment-timeline.tsx

@@ -16,19 +16,13 @@
  * limitations under the License.
  */
 
-import {
+import type { IResizeEntry } from '@blueprintjs/core';
-  FormGroup,
+import { FormGroup, HTMLSelect, Radio, RadioGroup, ResizeSensor } from '@blueprintjs/core';
-  HTMLSelect,
+import type { AxisScale } from 'd3-axis';
-  IResizeEntry,
-  Radio,
-  RadioGroup,
-  ResizeSensor,
-} from '@blueprintjs/core';
-import { AxisScale } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
 import React from 'react';
 
-import { Capabilities } from '../../helpers';
+import type { Capabilities } from '../../helpers';
 import { Api } from '../../singletons';
 import {
   ceilToUtcDay,
@@ -41,7 +35,8 @@ import {
 import { DateRangeSelector } from '../date-range-selector/date-range-selector';
 import { Loader } from '../loader/loader';
 
-import { BarUnitData, StackedBarChart } from './stacked-bar-chart';
+import type { BarUnitData } from './stacked-bar-chart';
+import { StackedBarChart } from './stacked-bar-chart';
 
 import './segment-timeline.scss';
 

web-console/src/components/segment-timeline/stacked-bar-chart.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { axisBottom, axisLeft, AxisScale } from 'd3-axis';
+import type { AxisScale } from 'd3-axis';
+import { axisBottom, axisLeft } from 'd3-axis';
 import React, { useState } from 'react';
 
 import { BarGroup } from './bar-group';

web-console/src/components/show-history/show-history.tsx

@@ -21,7 +21,8 @@ import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
 
 import { DiffDialog } from '../../dialogs';
-import { cleanSpec, IngestionSpec } from '../../druid-models';
+import type { IngestionSpec } from '../../druid-models';
+import { cleanSpec } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { Api } from '../../singletons';
 import { deepSet } from '../../utils';

web-console/src/components/suggestible-input/suggestible-input.tsx

@@ -23,8 +23,10 @@ import classNames from 'classnames';
 import React, { useRef } from 'react';
 
 import { JSON_STRING_FORMATTER } from '../../utils';
-import { FormattedInput, FormattedInputProps } from '../formatted-input/formatted-input';
+import type { FormattedInputProps } from '../formatted-input/formatted-input';
-import { Suggestion, SuggestionMenu } from '../suggestion-menu/suggestion-menu';
+import { FormattedInput } from '../formatted-input/formatted-input';
+import type { Suggestion } from '../suggestion-menu/suggestion-menu';
+import { SuggestionMenu } from '../suggestion-menu/suggestion-menu';
 
 export interface SuggestibleInputProps extends Omit<FormattedInputProps, 'formatter'> {
   onFinalize?: () => void;

web-console/src/components/table-clickable-cell/table-clickable-cell.tsx

@@ -16,9 +16,11 @@
  * limitations under the License.
  */
 
-import { Icon, IconName } from '@blueprintjs/core';
+import type { IconName } from '@blueprintjs/core';
+import { Icon } from '@blueprintjs/core';
 import classNames from 'classnames';
-import React, { MouseEventHandler, ReactNode } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
 
 import './table-clickable-cell.scss';
 

web-console/src/components/table-filterable-cell/table-filterable-cell.tsx

@@ -18,10 +18,12 @@
 
 import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
-import { Filter } from 'react-table';
+import React from 'react';
+import type { Filter } from 'react-table';
 
-import { addFilter, FilterMode, filterModeToIcon } from '../../react-table';
+import type { FilterMode } from '../../react-table';
+import { addFilter, filterModeToIcon } from '../../react-table';
 import { Deferred } from '../deferred/deferred';
 
 import './table-filterable-cell.scss';

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

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { TimedButton } from './timed-button';
 
 describe('TimedButton', () => {

web-console/src/components/timed-button/timed-button.tsx

@@ -16,14 +16,16 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, ButtonProps, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import type { ButtonProps } from '@blueprintjs/core';
+import { Button, ButtonGroup, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 
 import { useInterval } from '../../hooks';
-import { isInBackground, localStorageGet, LocalStorageKeys, localStorageSet } from '../../utils';
+import type { LocalStorageKeys } from '../../utils';
+import { isInBackground, localStorageGet, localStorageSet } from '../../utils';
 
 export interface DelayLabel {
   label: string;

web-console/src/components/view-control-bar/view-control-bar.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import './view-control-bar.scss';
 

web-console/src/components/warning-checklist/warning-checklist.tsx

@@ -17,7 +17,8 @@
  */
 
 import { Switch } from '@blueprintjs/core';
-import React, { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
 
 export interface WarningChecklistProps {
   checks: ReactNode[];

web-console/src/console-application.tsx

@@ -20,11 +20,13 @@ import { HotkeysProvider, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React from 'react';
-import { Redirect, RouteComponentProps } from 'react-router';
+import type { RouteComponentProps } from 'react-router';
+import { Redirect } from 'react-router';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
-import { HeaderActiveTab, HeaderBar, Loader } from './components';
+import type { HeaderActiveTab } from './components';
-import { DruidEngine, QueryWithContext } from './druid-models';
+import { HeaderBar, Loader } from './components';
+import type { DruidEngine, QueryWithContext } from './druid-models';
 import { Capabilities } from './helpers';
 import { AppToaster } from './singletons';
 import { localStorageGetJson, LocalStorageKeys, QueryManager } from './utils';

web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx

@@ -16,19 +16,12 @@
  * limitations under the License.
  */
 
-import {
+import type { IconName } from '@blueprintjs/core';
-  Button,
+import { Button, Classes, Dialog, FormGroup, Icon, Intent, ProgressBar } from '@blueprintjs/core';
-  Classes,
-  Dialog,
-  FormGroup,
-  Icon,
-  IconName,
-  Intent,
-  ProgressBar,
-} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
-import React, { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
 
 import { WarningChecklist } from '../../components';
 import { AppToaster } from '../../singletons';
@@ -132,7 +125,7 @@ export const AsyncActionDialog = React.memo(function AsyncActionDialog(
             <Button
               intent={intent}
               text={confirmButtonText}
-              onClick={handleConfirm}
+              onClick={() => void handleConfirm()}
               disabled={confirmButtonDisabled || needsMoreChecks}
             />
             <Button text={cancelButtonText || 'Cancel'} onClick={onClose} />

web-console/src/dialogs/compaction-dialog/compaction-dialog.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { CompactionDialog } from './compaction-dialog';
 
 describe('CompactionDialog', () => {

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

@@ -19,10 +19,11 @@
 import { Button, Callout, Classes, Code, Dialog, Intent } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
-import { AutoForm, FormJsonSelector, FormJsonTabs, JsonInput } from '../../components';
+import type { FormJsonTabs } from '../../components';
+import { AutoForm, FormJsonSelector, JsonInput } from '../../components';
+import type { CompactionConfig } from '../../druid-models';
 import {
   COMPACTION_CONFIG_FIELDS,
-  CompactionConfig,
   compactionConfigHasLegacyInputSegmentSizeBytesSet,
 } from '../../druid-models';
 import { deepDelete, formatBytesCompact } from '../../utils';
@@ -31,7 +32,7 @@ import './compaction-dialog.scss';
 
 export interface CompactionDialogProps {
   onClose: () => void;
-  onSave: (compactionConfig: CompactionConfig) => void;
+  onSave: (compactionConfig: CompactionConfig) => void | Promise<void>;
   onDelete: () => void;
   datasource: string;
   compactionConfig: CompactionConfig | undefined;
@@ -105,7 +106,7 @@ export const CompactionDialog = React.memo(function CompactionDialog(props: Comp
             text="Submit"
             intent={Intent.PRIMARY}
             disabled={disableSubmit}
-            onClick={() => onSave(currentConfig)}
+            onClick={() => void onSave(currentConfig)}
           />
         </div>
       </div>

web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { CoordinatorDynamicConfigDialog } from './coordinator-dynamic-config-dialog';
 
 describe('CoordinatorDynamicConfigDialog', () => {

web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx

@@ -20,15 +20,10 @@ import { Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
-import {
+import type { FormJsonTabs } from '../../components';
-  AutoForm,
+import { AutoForm, ExternalLink, FormJsonSelector, JsonInput, Loader } from '../../components';
-  ExternalLink,
+import type { CoordinatorDynamicConfig } from '../../druid-models';
-  FormJsonSelector,
+import { COORDINATOR_DYNAMIC_CONFIG_FIELDS } from '../../druid-models';
-  FormJsonTabs,
-  JsonInput,
-  Loader,
-} from '../../components';
-import { COORDINATOR_DYNAMIC_CONFIG_FIELDS, CoordinatorDynamicConfig } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
 import { Api, AppToaster } from '../../singletons';
@@ -102,7 +97,7 @@ export const CoordinatorDynamicConfigDialog = React.memo(function CoordinatorDyn
     <SnitchDialog
       className="coordinator-dynamic-config-dialog"
       saveDisabled={Boolean(jsonError)}
-      onSave={saveConfig}
+      onSave={comment => void saveConfig(comment)}
       onClose={onClose}
       title="Coordinator dynamic config"
       historyRecords={historyRecordsState.data}

web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.spec.tsx

@@ -16,12 +16,13 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
 import { QueryState } from '../../../utils';
+import { shallow } from '../../../utils/shallow-renderer';
 
-import { DatasourceColumnsTable, DatasourceColumnsTableRow } from './datasource-columns-table';
+import type { DatasourceColumnsTableRow } from './datasource-columns-table';
+import { DatasourceColumnsTable } from './datasource-columns-table';
 
 let columnsState: QueryState<DatasourceColumnsTableRow[]> = QueryState.INIT;
 jest.mock('../../../hooks', () => {

web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx

@@ -23,7 +23,8 @@ import ReactTable from 'react-table';
 import { Loader } from '../../../components';
 import { useQueryManager } from '../../../hooks';
 import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../react-table';
-import { ColumnMetadata, queryDruidSql } from '../../../utils';
+import type { ColumnMetadata } from '../../../utils';
+import { queryDruidSql } from '../../../utils';
 
 import './datasource-columns-table.scss';
 

web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { QueryResult, QueryRunner, T } from 'druid-query-toolkit';
+import type { QueryResult } from 'druid-query-toolkit';
+import { QueryRunner, T } from 'druid-query-toolkit';
 import React from 'react';
 
 import { Loader, RecordTablePane } from '../../../components';

web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx

@@ -19,8 +19,9 @@
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
-import { BasicAction } from '../../utils/basic-action';
+import type { BasicAction } from '../../utils/basic-action';
-import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
+import type { SideButtonMetaData } from '../table-action-dialog/table-action-dialog';
+import { TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
 import { DatasourceColumnsTable } from './datasource-columns-table/datasource-columns-table';
 import { DatasourcePreviewPane } from './datasource-preview-pane/datasource-preview-pane';

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

@@ -19,7 +19,8 @@
 import { Button, Classes, Dialog, HTMLSelect } from '@blueprintjs/core';
 import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
-import ReactDiffViewer, { ReactDiffViewerStylesOverride } from 'react-diff-viewer';
+import type { ReactDiffViewerStylesOverride } from 'react-diff-viewer';
+import ReactDiffViewer from 'react-diff-viewer';
 
 import './diff-dialog.scss';
 

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

@@ -168,7 +168,7 @@ export class DoctorDialog extends React.PureComponent<DoctorDialogProps, DoctorD
             text="Analyze Druid cluster"
             intent={Intent.PRIMARY}
             fill
-            onClick={() => this.doChecks()}
+            onClick={() => void this.doChecks()}
           />
         </div>
       );

web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx

@@ -21,7 +21,7 @@ import Hjson from 'hjson';
 import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
 
-import { QueryContext } from '../../druid-models';
+import type { QueryContext } from '../../druid-models';
 
 import './edit-context-dialog.scss';
 

web-console/src/dialogs/index-spec-dialog/index-spec-dialog.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { IndexSpecDialog } from './index-spec-dialog';
 
 describe('IndexSpecDialog', () => {

web-console/src/dialogs/index-spec-dialog/index-spec-dialog.tsx

@@ -19,8 +19,10 @@
 import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
-import { AutoForm, FormJsonSelector, FormJsonTabs, JsonInput } from '../../components';
+import type { FormJsonTabs } from '../../components';
-import { INDEX_SPEC_FIELDS, IndexSpec } from '../../druid-models';
+import { AutoForm, FormJsonSelector, JsonInput } from '../../components';
+import type { IndexSpec } from '../../druid-models';
+import { INDEX_SPEC_FIELDS } from '../../druid-models';
 
 import './index-spec-dialog.scss';
 

web-console/src/dialogs/lookup-edit-dialog/__snapshots__/lookup-edit-dialog.spec.tsx.snap

@@ -31,13 +31,11 @@ exports[`LookupEditDialog matches snapshot 1`] = `
         value="test"
       >
         <option
-          key="__default"
           value="__default"
         >
           __default
         </option>
         <option
-          key="alt-tier"
           value="alt-tier"
         >
           alt-tier

web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { LookupEditDialog } from './lookup-edit-dialog';
 
 describe('LookupEditDialog', () => {

web-console/src/dialogs/lookup-edit-dialog/lookup-edit-dialog.tsx

@@ -27,8 +27,10 @@ import {
 } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
-import { AutoForm, FormJsonSelector, FormJsonTabs, JsonInput } from '../../components';
+import type { FormJsonTabs } from '../../components';
-import { isLookupInvalid, LOOKUP_FIELDS, LookupSpec } from '../../druid-models';
+import { AutoForm, FormJsonSelector, JsonInput } from '../../components';
+import type { LookupSpec } from '../../druid-models';
+import { isLookupInvalid, LOOKUP_FIELDS } from '../../druid-models';
 
 import './lookup-edit-dialog.scss';
 

web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx

@@ -18,8 +18,9 @@
 
 import React, { useState } from 'react';
 
-import { BasicAction } from '../../utils/basic-action';
+import type { BasicAction } from '../../utils/basic-action';
-import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
+import type { SideButtonMetaData } from '../table-action-dialog/table-action-dialog';
+import { TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
 import { LookupValuesTable } from './lookup-values-table/lookup-values-table';
 

web-console/src/dialogs/overlord-dynamic-config-dialog/overload-dynamic-config-dialog.spec.tsx

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
+import { shallow } from '../../utils/shallow-renderer';
+
 import { OverlordDynamicConfigDialog } from './overlord-dynamic-config-dialog';
 
 describe('OverlordDynamicConfigDialog', () => {

web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx

@@ -21,7 +21,8 @@ import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
 import { AutoForm, ExternalLink, Loader } from '../../components';
-import { OVERLORD_DYNAMIC_CONFIG_FIELDS, OverlordDynamicConfig } from '../../druid-models';
+import type { OverlordDynamicConfig } from '../../druid-models';
+import { OVERLORD_DYNAMIC_CONFIG_FIELDS } from '../../druid-models';
 import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
 import { Api, AppToaster } from '../../singletons';

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

@@ -25,7 +25,8 @@ import { useQueryManager } from '../../hooks';
 import { getLink } from '../../links';
 import { Api } from '../../singletons';
 import { swapElements } from '../../utils';
-import { Rule, RuleUtil } from '../../utils/load-rule';
+import type { Rule } from '../../utils/load-rule';
+import { RuleUtil } from '../../utils/load-rule';
 import { SnitchDialog } from '..';
 
 import './retention-dialog.scss';
@@ -37,7 +38,7 @@ export interface RetentionDialogProps {
   tiers: string[];
   onEditDefaults: () => void;
   onCancel: () => void;
-  onSave: (datasource: string, newRules: Rule[], comment: string) => void;
+  onSave: (datasource: string, newRules: Rule[], comment: string) => void | Promise<void>;
 }
 
 export const RetentionDialog = React.memo(function RetentionDialog(props: RetentionDialogProps) {
@@ -58,7 +59,7 @@ export const RetentionDialog = React.memo(function RetentionDialog(props: Retent
 
   function saveHandler(comment: string) {
     const { datasource, onSave } = props;
-    onSave(datasource, currentRules, comment);
+    void onSave(datasource, currentRules, comment);
   }
 
   function addRule() {

web-console/src/dialogs/segments-table-action-dialog/segment-table-action-dialog.tsx

@@ -21,8 +21,9 @@ import React, { useState } from 'react';
 
 import { ShowJson } from '../../components';
 import { Api } from '../../singletons';
-import { BasicAction } from '../../utils/basic-action';
+import type { BasicAction } from '../../utils/basic-action';
-import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
+import type { SideButtonMetaData } from '../table-action-dialog/table-action-dialog';
+import { TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
 import { SegmentsPreviewPane } from './segments-preview-pane/segments-preview-pane';
 

web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.tsx

@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { QueryResult, QueryRunner } from 'druid-query-toolkit';
+import type { QueryResult } from 'druid-query-toolkit';
+import { QueryRunner } from 'druid-query-toolkit';
 import React from 'react';
 
 import { Loader, RecordTablePane } from '../../../components';

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

@@ -28,7 +28,7 @@ import './snitch-dialog.scss';
 export interface SnitchDialogProps {
   title: string;
   className?: string;
-  onSave: (comment: string) => void;
+  onSave: (comment: string) => void | Promise<void>;
   saveDisabled?: boolean;
   onReset?: () => void;
   onClose: () => void;
@@ -56,7 +56,7 @@ export class SnitchDialog extends React.PureComponent<SnitchDialogProps, SnitchD
     const { onSave, onClose } = this.props;
     const { comment } = this.state;
 
-    onSave(comment);
+    void onSave(comment);
     if (onClose) onClose();
   };
 

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

@@ -26,7 +26,7 @@ import { validJson } from '../../utils';
 import './spec-dialog.scss';
 
 export interface SpecDialogProps {
-  onSubmit: (spec: JSON) => void;
+  onSubmit: (spec: JSON) => void | Promise<void>;
   onClose: () => void;
   title: string;
   initSpec?: any;
@@ -40,7 +40,7 @@ export const SpecDialog = React.memo(function SpecDialog(props: SpecDialogProps)
 
   function postSpec(): void {
     if (!validJson(spec)) return;
-    onSubmit(JSON.parse(spec));
+    void onSubmit(JSON.parse(spec));
     onClose();
   }
 

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

@@ -18,7 +18,8 @@
 
 import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
 import React, { useState } from 'react';
-import ReactTable, { Filter } from 'react-table';
+import type { Filter } from 'react-table';
+import ReactTable from 'react-table';
 
 import { Loader, TableFilterableCell } from '../../components';
 import { useQueryManager } from '../../hooks';

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.spec.tsx

@@ -16,15 +16,15 @@
  * limitations under the License.
  */
 
-import { shallow } from 'enzyme';
 import React from 'react';
 
 import { QueryState } from '../../../utils';
+import { shallow } from '../../../utils/shallow-renderer';
 
+import type { SupervisorStatisticsTableRow } from './supervisor-statistics-table';
 import {
   normalizeSupervisorStatisticsResults,
   SupervisorStatisticsTable,
-  SupervisorStatisticsTableRow,
 } from './supervisor-statistics-table';
 
 let supervisorStatisticsState: QueryState<SupervisorStatisticsTableRow[]> = QueryState.INIT;

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx

@@ -18,7 +18,8 @@
 
 import { Button, ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
-import ReactTable, { CellInfo, Column } from 'react-table';
+import type { CellInfo, Column } from 'react-table';
+import ReactTable from 'react-table';
 
 import { Loader } from '../../../components/loader/loader';
 import { useQueryManager } from '../../../hooks';

web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx

@@ -23,8 +23,9 @@ import { ShowHistory } from '../../components/show-history/show-history';
 import { cleanSpec } from '../../druid-models';
 import { Api } from '../../singletons';
 import { deepGet } from '../../utils';
-import { BasicAction } from '../../utils/basic-action';
+import type { BasicAction } from '../../utils/basic-action';
-import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
+import type { SideButtonMetaData } from '../table-action-dialog/table-action-dialog';
+import { TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
 import { SupervisorStatisticsTable } from './supervisor-statistics-table/supervisor-statistics-table';
 

web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx

@@ -16,12 +16,15 @@
  * limitations under the License.
  */
 
-import { Button, Classes, Dialog, Icon, IconName, Intent } from '@blueprintjs/core';
+import type { IconName } from '@blueprintjs/core';
+import { Button, Classes, Dialog, Icon, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
-import { BasicAction, basicActionsToMenu } from '../../utils/basic-action';
+import type { BasicAction } from '../../utils/basic-action';
+import { basicActionsToMenu } from '../../utils/basic-action';
 
 import './table-action-dialog.scss';
 

web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx

@@ -21,8 +21,9 @@ import React, { useState } from 'react';
 import { ShowJson, ShowLog } from '../../components';
 import { Api } from '../../singletons';
 import { deepGet } from '../../utils';
-import { BasicAction } from '../../utils/basic-action';
+import type { BasicAction } from '../../utils/basic-action';
-import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
+import type { SideButtonMetaData } from '../table-action-dialog/table-action-dialog';
+import { TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
 interface TaskTableActionDialogProps {
   taskId: string;

web-console/src/druid-models/compaction-config/compaction-config.tsx

@@ -19,7 +19,7 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { Field } from '../../components';
+import type { Field } from '../../components';
 import { deepGet, deepSet, oneOf } from '../../utils';
 
 export interface CompactionConfig {

web-console/src/druid-models/compaction-status/compaction-status.spec.ts

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import { CompactionConfig } from '../compaction-config/compaction-config';
+import type { CompactionConfig } from '../compaction-config/compaction-config';
 
-import { CompactionStatus, formatCompactionInfo, zeroCompactionStatus } from './compaction-status';
+import type { CompactionStatus } from './compaction-status';
+import { formatCompactionInfo, zeroCompactionStatus } from './compaction-status';
 
 describe('compaction status', () => {
   const BASIC_CONFIG: CompactionConfig = {

web-console/src/druid-models/compaction-status/compaction-status.ts

@@ -17,10 +17,8 @@
  */
 
 import { formatBytesCompact, pluralIfNeeded } from '../../utils';
-import {
+import type { CompactionConfig } from '../compaction-config/compaction-config';
-  CompactionConfig,
+import { compactionConfigHasLegacyInputSegmentSizeBytesSet } from '../compaction-config/compaction-config';
-  compactionConfigHasLegacyInputSegmentSizeBytesSet,
-} from '../compaction-config/compaction-config';
 
 function capitalizeFirst(str: string): string {
   return str.slice(0, 1).toUpperCase() + str.slice(1).toLowerCase();

web-console/src/druid-models/coordinator-dynamic-config/coordinator-dynamic-config.tsx

@@ -19,7 +19,7 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { Field } from '../../components';
+import type { Field } from '../../components';
 
 export interface CoordinatorDynamicConfig {
   maxSegmentsToMove?: number;