ui: use esbuild-loader in webpack configs

Transformations via Babel and JS minification via Terser took up a
significant amount of time during UI builds due to the single-threaded
nature of those tools. esbuild's multi-threaded behavior is
significantly faster, but means babel-plugin-import [1] must be applied
to committed files rather than applied at build-time for each build.
esbuild-loader is a webpack plugin that uses esbuild for TypeScript and
JavaScript transformation and minification in place of babel-loader and
TerserWebpackPlugin respectively, with very few changes additional
changes required but dramatic speed improvements. As measured on a
24-core Xeon machine with 32GB RAM via `./dev build`:

    Package       babel-loader + terser   esbuild-loader
    -------       ---------------------   --------------
    cluster-ui    71 s                    29s
    db-console    157 s                   30s

Since building cluster-ui is a strict prerequisite for building
db-console, this implies a time savings of roughly
(157 s + 71 s) - (30 s + 29 s) == 169 seconds per build. Use
esbuild-loader for UI bundling.

[1] https://github.com/umijs/babel-plugin-import

Release note: None

Makefile

@@ -355,6 +355,10 @@ $(GITHOOKSDIR)/%: githooks/%
 	@ln -s ../../$(basename $<) $(dir $@)
 endif
 
+ESLINT_PLUGIN_CRDB := pkg/ui/workspaces/eslint-plugin-crdb/dist/index.js
+.SECONDARY: $(ESLINT_PLUGIN_CRDB)
+$(ESLINT_PLUGIN_CRDB): $(shell find pkg/ui/workspaces/eslint-plugin-crdb/src -type f | grep -v '\.spec') pkg/ui/yarn.installed
+	$(NODE_RUN) -C pkg/ui/workspaces/eslint-plugin-crdb yarn build
 
 CLUSTER_UI_JS := pkg/ui/cluster-ui/dist/main.js
 
@@ -369,9 +373,6 @@ pkg/ui/yarn.installed: pkg/ui/package.json pkg/ui/yarn.lock | bin/.submodules-in
 	@# Also some linux distributions (that are used as development env) don't support some of
 	@# optional dependencies (i.e. cypress) so it is important to make these deps optional.
 	$(NODE_RUN) -C pkg/ui yarn install --ignore-optional --offline
-	@# We remove this broken dependency again in pkg/ui/workspaces/db-console/webpack.config.js.
-	@# See the comment there for details.
-	rm -rf pkg/ui/workspaces/db-console/node_modules/@types/node
 	touch $@
 
 vendor/modules.txt: | bin/.submodules-initialized
@@ -1356,67 +1357,36 @@ ui-topo: pkg/ui/yarn.installed
 	pkg/ui/workspaces/db-console/scripts/topo.js
 
 .PHONY: ui-lint
-ui-lint: pkg/ui/yarn.installed $(UI_PROTOS_OSS) $(UI_PROTOS_CCL)
+ui-lint: pkg/ui/yarn.installed $(ESLINT_PLUGIN_CRDB) $(UI_PROTOS_OSS) $(UI_PROTOS_CCL) $(CLUSTER_UI_JS)
 	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(STYLINT) -c .stylintrc styl
 	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(TSC)
 	$(NODE_RUN) -C pkg/ui/workspaces/db-console yarn lint
 	@if $(NODE_RUN) -C pkg/ui/workspaces/db-console yarn list | grep phantomjs; then echo ^ forbidden UI dependency >&2; exit 1; fi
 	$(NODE_RUN) -C pkg/ui/workspaces/cluster-ui yarn --cwd pkg/ui/workspaces/cluster-ui lint
 
-# DLLs are Webpack bundles, not Windows shared libraries. See "DLLs for speedy
-# builds" in the UI README for details.
-UI_CCL_DLLS := pkg/ui/workspaces/db-console/dist/protos.ccl.dll.js pkg/ui/workspaces/db-console/dist/vendor.oss.dll.js
-UI_CCL_MANIFESTS := pkg/ui/workspaces/db-console/protos.ccl.manifest.json pkg/ui/workspaces/db-console/vendor.oss.manifest.json
-UI_OSS_DLLS := $(subst .ccl,.oss,$(UI_CCL_DLLS))
-UI_OSS_MANIFESTS := $(subst .ccl,.oss,$(UI_CCL_MANIFESTS))
-
-# (Ab)use pattern rules to teach Make that this one Webpack command produces two
-# files. Normally, Make would run the recipe twice if dist/FOO.js and
-# FOO-manifest.js were both out-of-date. [0]
-#
-# TODO(irfansharif): Ideally we'd scope the dependency on $(UI_PROTOS*) to the
-# appropriate protos DLLs, but Make v3.81 has a bug that causes the dependency
-# to be ignored [1]. We're stuck with this workaround until Apple decides to
-# update the version of Make they ship with macOS or we require a newer version
-# of Make. Such a requirement would need to be strictly enforced, as the way
-# this fails is extremely subtle and doesn't present until the web UI is loaded
-# in the browser.
-#
-# [0]: https://stackoverflow.com/a/3077254/1122351
-# [1]: http://savannah.gnu.org/bugs/?19108
-.SECONDARY: $(UI_CCL_DLLS) $(UI_CCL_MANIFESTS) $(UI_OSS_DLLS) $(UI_OSS_MANIFESTS)
-
-pkg/ui/workspaces/db-console/dist/%.oss.dll.js pkg/ui/workspaces/db-console/%.oss.manifest.json: export NODE_OPTIONS=--max-old-space-size=5000
-pkg/ui/workspaces/db-console/dist/%.oss.dll.js pkg/ui/workspaces/db-console/%.oss.manifest.json: pkg/ui/workspaces/db-console/webpack.%.js pkg/ui/yarn.installed $(CLUSTER_UI_JS) $(UI_PROTOS_OSS)
-	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(WEBPACK) -p --config webpack.$*.js --env.dist=oss
-
-pkg/ui/workspaces/db-console/dist/%.ccl.dll.js pkg/ui/workspaces/db-console/%.ccl.manifest.json: export NODE_OPTIONS=--max-old-space-size=5000
-pkg/ui/workspaces/db-console/dist/%.ccl.dll.js pkg/ui/workspaces/db-console/%.ccl.manifest.json: pkg/ui/workspaces/db-console/webpack.%.js pkg/ui/yarn.installed $(CLUSTER_UI_JS) $(UI_PROTOS_CCL)
-	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(WEBPACK) -p --config webpack.$*.js --env.dist=ccl
-
 .PHONY: ui-test
-ui-test: $(UI_CCL_DLLS) $(UI_CCL_MANIFESTS)
+ui-test: $(UI_PROTOS_OSS) $(UI_PROTOS_CCL) $(CLUSTER_UI_JS)
 	$(info $(yellow)NOTE: consider using `./dev ui test` instead of `make ui-test`$(term-reset))
 	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(KARMA) start
 	$(NODE_RUN) -C pkg/ui/workspaces/cluster-ui yarn ci
 
 .PHONY: ui-test-watch
-ui-test-watch: $(UI_CCL_DLLS) $(UI_CCL_MANIFESTS)
+ui-test-watch: $(UI_PROTOS_OSS) $(UI_PROTOS_CCL) $(CLUSTER_UI_JS)
 	$(info $(yellow)NOTE: consider using `./dev ui test --watch` instead of `make ui-test-watch`$(term-reset))
 	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(KARMA) start --no-single-run --auto-watch & \
 	$(NODE_RUN) -C pkg/ui/workspaces/cluster-ui yarn test
 
 .PHONY: ui-test-debug
-ui-test-debug: $(UI_DLLS) $(UI_MANIFESTS)
+ui-test-debug: $(UI_PROTOS_OSS) $(UI_PROTOS_CCL) $(CLUSTER_UI_JS)
 	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(KARMA) start --browsers Chrome --no-single-run --debug --auto-watch
 
 .SECONDARY: pkg/ui/assets.ccl.installed pkg/ui/assets.oss.installed
-pkg/ui/assets.ccl.installed: $(UI_CCL_DLLS) $(UI_CCL_MANIFESTS) $(UI_JS_CCL) $(shell find pkg/ui/workspaces/db-console/ccl -type f)
-pkg/ui/assets.oss.installed: $(UI_OSS_DLLS) $(UI_OSS_MANIFESTS) $(UI_JS_OSS)
-pkg/ui/assets.%.installed: pkg/ui/workspaces/db-console/webpack.app.js $(shell find pkg/ui/workspaces/db-console/src pkg/ui/workspaces/db-console/styl -type f) | bin/.bootstrap
+pkg/ui/assets.ccl.installed: $(UI_PROTOS_CCL) $(shell find pkg/ui/workspaces/db-console/ccl -type f)
+pkg/ui/assets.oss.installed: $(UI_PROTOS_OSS)
+pkg/ui/assets.%.installed: pkg/ui/workspaces/db-console/webpack.config.js $(CLUSTER_UI_JS) $(shell find pkg/ui/workspaces/db-console/src pkg/ui/workspaces/db-console/styl -type f) | bin/.bootstrap
 	find pkg/ui/dist$*/assets -mindepth 1 -not -name .gitkeep -delete
 	export NODE_OPTIONS=--max-old-space-size=5000
-	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(WEBPACK) --config webpack.app.js --env.dist=$*
+	$(NODE_RUN) -C pkg/ui/workspaces/db-console $(WEBPACK) --config webpack.config.js --env.dist=$*
 	touch $@
 
 pkg/ui/yarn.opt.installed:
@@ -1430,23 +1400,22 @@ ui-watch-secure: export TARGET ?= https://localhost:8080/
 .PHONY: ui-watch
 ui-watch: export TARGET ?= http://localhost:8080
 ui-watch ui-watch-secure: PORT := 3000
-ui-watch ui-watch-secure: $(UI_CCL_DLLS) pkg/ui/yarn.opt.installed
+ui-watch ui-watch-secure: $(UI_PROTOS_OSS) $(UI_PROTOS_CCL) pkg/ui/yarn.opt.installed
   # TODO (koorosh): running two webpack dev servers doesn't provide best performance and polling changes.
   # it has to be considered to use something like `parallel-webpack` lib.
   #
   # `node-run.sh` wrapper is removed because this command is supposed to be run in dev environment (not in docker of CI)
   # so it is safe to run yarn commands directly to preserve formatting and colors for outputs
 	$(info $(yellow)NOTE: consider using `./dev ui watch [--secure]` instead of `make ui-watch[-secure]`$(term-reset))
 	yarn --cwd pkg/ui/workspaces/cluster-ui build:watch & \
-	yarn --cwd pkg/ui/workspaces/db-console webpack-dev-server --config webpack.app.js --env.dist=ccl --env.WEBPACK_SERVE --port $(PORT) --mode "development" $(WEBPACK_DEV_SERVER_FLAGS)
+	yarn --cwd pkg/ui/workspaces/db-console webpack-dev-server --config webpack.config.js --env.dist=ccl --env.WEBPACK_SERVE --port $(PORT) --mode "development" $(WEBPACK_DEV_SERVER_FLAGS)
 
 .PHONY: ui-clean
 ui-clean: ## Remove build artifacts.
 	$(info $(yellow)NOTE: consider using `./dev ui clean` instead of `make ui-clean`$(term-reset))
 	find pkg/ui/distccl/assets pkg/ui/distoss/assets -mindepth 1 -not -name .gitkeep -delete
 	rm -rf pkg/ui/assets.ccl.installed pkg/ui/assets.oss.installed
 	rm -f $(UI_PROTOS_CCL) $(UI_PROTOS_OSS)
-	rm -f pkg/ui/workspaces/db-console/*manifest.json
 	rm -rf pkg/ui/workspaces/cluster-ui/dist
 
 .PHONY: ui-maintainer-clean

WORKSPACE

@@ -4,7 +4,7 @@ workspace(
     name = "com_github_cockroachdb_cockroach",
     managed_directories = {
         "@yarn_vendor": ["pkg/ui/yarn-vendor"],
-        "@npm_eslint_rules": ["pkg/ui/workspaces/eslint-rules/node_modules"],
+        "@npm_eslint_plugin_crdb": ["pkg/ui/workspaces/eslint-plugin-crdb/node_modules"],
         "@npm_protos": ["pkg/ui/workspaces/db-console/src/js/node_modules"],
         "@npm_cluster_ui": ["pkg/ui/workspaces/cluster_ui/node_modules"],
         "@npm_db_console": ["pkg/ui/workspaces/db-console/node_modules"],
@@ -248,7 +248,7 @@ seed_yarn_cache(name = "yarn_cache")
 # packages have isolated dependencies and must be installed as isolated
 # Bazel repositories.
 yarn_install(
-    name = "npm_eslint_rules",
+    name = "npm_eslint_plugin_crdb",
     args = [
         "--offline",
         "--ignore-optional",
@@ -257,9 +257,9 @@ yarn_install(
       "//pkg/ui:.yarnrc",
       "@yarn_cache//:.seed",
     ],
-    package_json = "//pkg/ui/workspaces/eslint-rules:package.json",
+    package_json = "//pkg/ui/workspaces/eslint-plugin-crdb:package.json",
     strict_visibility = False,
-    yarn_lock = "//pkg/ui/workspaces/eslint-rules:yarn.lock",
+    yarn_lock = "//pkg/ui/workspaces/eslint-plugin-crdb:yarn.lock",
     symlink_node_modules = True,
 )
 

build/bazelutil/seed_yarn_cache.bzl

@@ -41,7 +41,7 @@ def _seed_yarn_cache_impl(rctx):
         fail("Unable to seed yarn cache: " + res.stderr)
 
     paths = {
-        "eslint_rules": "pkg/ui/workspaces/eslint_rules",
+        "eslint_plugin_crdb": "pkg/ui/workspaces/eslint_plugin_crdb",
         "protos": "pkg/ui/workspaces/db-console/src/js",
         "cluster_ui": "pkg/ui/workspaces/cluster-ui",
         "db_console": "pkg/ui/workspaces/db-console",

build/bazelutil/seed_yarn_cache.sh

@@ -14,8 +14,8 @@ yarn \
   --cwd $rootDir \
   --modules-folder $moduleDir \
   --offline \
-  --ignore-optional \
   --no-progress \
+  --ignore-scripts \
   --mutex network \
   install
 

build/variables.mk

@@ -45,6 +45,7 @@ define VALID_VARS
   DYN_LIB_DIR
   ERRORS_PATH
   ERRORS_PROTO
+  ESLINT_PLUGIN_CRDB
   EVENTLOG_PROTOS
   EXECGEN_TARGETS
   EXTRA_XCMAKE_FLAGS
@@ -103,7 +104,6 @@ define VALID_VARS
   MAKEFLAGS
   MAKE_TERMERR
   NCPUS
-  NODE_OPTIONS
   NODE_RUN
   OPTGEN_TARGETS
   PATH
@@ -139,12 +139,8 @@ define VALID_VARS
   TSC
   TYPE
   TZ
-  UI_CCL_DLLS
-  UI_CCL_MANIFESTS
   UI_JS_CCL
   UI_JS_OSS
-  UI_OSS_DLLS
-  UI_OSS_MANIFESTS
   UI_PROTOS_CCL
   UI_PROTOS_OSS
   UI_TS_CCL

pkg/cmd/dev/testdata/datadriven/ui

@@ -13,7 +13,7 @@ rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 cp -r sandbox/pkg/ui/workspaces/cluster-ui/dist crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 bazel info workspace --color=no
 bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/cluster-ui build:watch
-bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.app.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 3000
+bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 3000
 
 exec
 dev ui watch --oss
@@ -28,7 +28,7 @@ rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 cp -r sandbox/pkg/ui/workspaces/cluster-ui/dist crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 bazel info workspace --color=no
 bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/cluster-ui build:watch
-bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.app.js --mode development --env.WEBPACK_SERVE --env.dist=oss --env.target=http://localhost:8080 --port 3000
+bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.config.js --mode development --env.WEBPACK_SERVE --env.dist=oss --env.target=http://localhost:8080 --port 3000
 
 exec
 dev ui watch --secure
@@ -45,7 +45,7 @@ rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 cp -r sandbox/pkg/ui/workspaces/cluster-ui/dist crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 bazel info workspace --color=no
 bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/cluster-ui build:watch
-bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.app.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 3000 --https
+bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 3000 --https
 
 exec
 dev ui watch --db http://example.crdb.io:4848
@@ -62,7 +62,7 @@ rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 cp -r sandbox/pkg/ui/workspaces/cluster-ui/dist crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 bazel info workspace --color=no
 bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/cluster-ui build:watch
-bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.app.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://example.crdb.io:4848 --port 3000
+bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://example.crdb.io:4848 --port 3000
 
 exec
 dev ui watch --port 12345
@@ -79,7 +79,7 @@ rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 cp -r sandbox/pkg/ui/workspaces/cluster-ui/dist crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
 bazel info workspace --color=no
 bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/cluster-ui build:watch
-bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.app.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 12345
+bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console webpack-dev-server --config webpack.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 12345
 
 exec
 dev ui lint

pkg/cmd/dev/ui.go

@@ -177,7 +177,7 @@ Replaces 'make ui-watch'.`,
 				"--cwd",
 				dirs.dbConsole,
 				"webpack-dev-server",
-				"--config", "webpack.app.js",
+				"--config", "webpack.config.js",
 				"--mode", "development",
 				// Polyfill WEBPACK_SERVE for webpack v4; it's set in webpack v5 via
 				// `webpack serve`.

pkg/ui/README.md

@@ -225,10 +225,8 @@ contingent upon resolving the above TODO.
 
 [cockroachdb/yarn-vendored]: https://github.com/cockroachdb/yarn-vendored
 [dcodeIO/protobuf.js#716]: https://github.com/dcodeIO/protobuf.js#716
-[main app bundle]: ./webpack.app.js
+[main app bundle]: ./webpack.config.js
 [Git LFS]: https://git-lfs.github.com
 [offline mirror]: https://yarnpkg.com/blog/2016/11/24/offline-mirror/
-[protos DLL]: ./webpack.protos.js
-[vendor DLL]: ./webpack.vendor.js
 [.yarnrc]: ./yarnrc
 [yarn-vendor]: ./yarn-vendor

pkg/ui/not-yarn-workspace.sh

@@ -3,6 +3,7 @@ set -euo pipefail
 
 (
   set -x
+  yarn --cwd workspaces/eslint-plugin-crdb install
   yarn --cwd workspaces/db-console/src/js install
   yarn --cwd workspaces/cluster-ui install
   yarn --cwd workspaces/db-console install

pkg/ui/workspaces/cluster-ui/.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "root": true,
   "extends": "@cockroachlabs/eslint-config",
+  "plugins": ["@cockroachlabs/eslint-plugin-crdb"],
   "env": {
     "browser": true,
     "node": true
@@ -9,6 +10,7 @@
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-namespace": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "@cockroachlabs/crdb/require-antd-style-import": "error"
   }
 }

pkg/ui/workspaces/cluster-ui/BUILD.bazel

@@ -73,6 +73,7 @@ DEPENDENCIES = [
     "@npm_cluster_ui//d3-scale",
     "@npm_cluster_ui//enzyme",
     "@npm_cluster_ui//enzyme-adapter-react-16",
+    "@npm_cluster_ui//esbuild-loader",
     "@npm_cluster_ui//eslint",
     "@npm_cluster_ui//eslint-config-prettier",
     "@npm_cluster_ui//eslint-plugin-prettier",
@@ -216,6 +217,7 @@ eslint_test(
         ".prettierignore",
         "prettier.config.js",
         "src",
+        "//pkg/ui/workspaces/eslint-plugin-crdb",
         "@npm_cluster_ui//@cockroachlabs/eslint-config",
         "@npm_cluster_ui//@testing-library/react",
         "@npm_cluster_ui//@testing-library/user-event",

pkg/ui/workspaces/cluster-ui/package.json

@@ -44,6 +44,7 @@
     "@cockroachlabs/crdb-protobuf-client": "link:../db-console/src/js",
     "@cockroachlabs/design-tokens": "0.4.5",
     "@cockroachlabs/eslint-config": "^0.1.11",
+    "@cockroachlabs/eslint-plugin-crdb": "link:../eslint-plugin-crdb",
     "@cockroachlabs/icons": "0.3.0",
     "@cockroachlabs/ui-components": "0.2.20",
     "@popperjs/core": "^2.4.0",
@@ -93,6 +94,8 @@
     "d3-scale": "^3.2.3",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "esbuild": "0.14.43",
+    "esbuild-loader": "^2.19.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-prettier": "^3.1.2",
@@ -162,6 +165,7 @@
     "yargs-parser": "~13.1.2",
     "protobufjs": "6.8.6",
     "**/jest-environment-jsdom": "^27.5.1",
-    "aria-query": "file:../../yarn-vendor/aria-query-5.0.0-no-spaced-files.tgz"
+    "aria-query": "file:../../yarn-vendor/aria-query-5.0.0-no-spaced-files.tgz",
+    "esbuild": "0.14.43"
   }
 }

pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx

@@ -11,6 +11,7 @@
 import React from "react";
 import { Link, RouteComponentProps } from "react-router-dom";
 import { Tooltip } from "antd";
+import "antd/lib/tooltip/style";
 import classNames from "classnames/bind";
 import { Breadcrumbs } from "src/breadcrumbs";
 import { Dropdown, DropdownOption } from "src/dropdown";

pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx

@@ -10,9 +10,13 @@
 
 import React from "react";
 import { Col, Row, Tabs } from "antd";
+import "antd/lib/col/style";
+import "antd/lib/row/style";
+import "antd/lib/tabs/style";
 import { RouteComponentProps } from "react-router-dom";
 import classNames from "classnames/bind";
 import { Tooltip } from "antd";
+import "antd/lib/tooltip/style";
 import { Heading } from "@cockroachlabs/ui-components";
 
 import { Anchor } from "src/anchor";

pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx

@@ -11,6 +11,7 @@
 import React from "react";
 import { Link, RouteComponentProps } from "react-router-dom";
 import { Tooltip } from "antd";
+import "antd/lib/tooltip/style";
 import classNames from "classnames/bind";
 
 import { Anchor } from "src/anchor";

pkg/ui/workspaces/cluster-ui/src/dateRangeMenu/dateRangeMenu.tsx

@@ -10,6 +10,10 @@
 
 import React, { useState } from "react";
 import { Alert, DatePicker, Icon, TimePicker } from "antd";
+import "antd/lib/time-picker/style";
+import "antd/lib/icon/style";
+import "antd/lib/date-picker/style";
+import "antd/lib/alert/style";
 import moment, { Moment } from "moment";
 import classNames from "classnames/bind";
 import { Time as TimeIcon, ErrorCircleFilled } from "@cockroachlabs/icons";

pkg/ui/workspaces/cluster-ui/src/graphs/visualization/index.tsx

@@ -12,6 +12,7 @@ import React from "react";
 import classNames from "classnames/bind";
 import spinner from "src/assets/spinner.gif";
 import { Tooltip } from "antd";
+import "antd/lib/tooltip/style";
 
 import styles from "./visualizations.module.scss";
 const cx = classNames.bind(styles);

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx

@@ -19,6 +19,9 @@ import { BreadcrumbItem, Breadcrumbs } from "../breadcrumbs";
 import { Caution, Search as IndexIcon } from "@cockroachlabs/icons";
 import { SqlBox } from "src/sql";
 import { Col, Row, Tooltip } from "antd";
+import "antd/lib/col/style";
+import "antd/lib/row/style";
+import "antd/lib/tooltip/style";
 import { SummaryCard } from "../summaryCard";
 import moment, { Moment } from "moment";
 import { Heading } from "@cockroachlabs/ui-components";