ui: Add Jest as test runner to DB Console

Makefile

@@ -1433,7 +1433,7 @@ ui-lint: pkg/ui/yarn.installed $(ESLINT_PLUGIN_CRDB) $(UI_PROTOS_OSS) $(UI_PROTO
 .PHONY: ui-test
 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/db-console yarn test
 	$(NODE_RUN) -C pkg/ui/workspaces/cluster-ui yarn ci
 
 .PHONY: ui-test-watch

build/teamcity/cockroach/ci/tests/ui_test_impl.sh

@@ -3,4 +3,4 @@
 set -xeuo pipefail
 
 bazel build //pkg/cmd/bazci --config=ci
-$(bazel info bazel-bin --config=ci)/pkg/cmd/bazci/bazci_/bazci test --config=ci //pkg/ui/workspaces/db-console:karma //pkg/ui/workspaces/cluster-ui:jest
+$(bazel info bazel-bin --config=ci)/pkg/cmd/bazci/bazci_/bazci test --config=ci //pkg/ui/workspaces/db-console:jest //pkg/ui/workspaces/cluster-ui:jest

pkg/cmd/dev/testdata/datadriven/ui

@@ -94,12 +94,12 @@ bazel test //pkg/ui:lint --test_output all
 exec
 dev ui test
 ----
-bazel test //pkg/ui/workspaces/db-console:karma //pkg/ui/workspaces/cluster-ui:jest --test_output errors
+bazel test //pkg/ui/workspaces/db-console:jest //pkg/ui/workspaces/cluster-ui:jest --test_output errors
 
 exec
 dev ui test --verbose
 ----
-bazel test //pkg/ui/workspaces/db-console:karma //pkg/ui/workspaces/cluster-ui:jest --test_output all
+bazel test //pkg/ui/workspaces/db-console:jest //pkg/ui/workspaces/cluster-ui:jest --test_output all
 
 exec
 dev ui test test --watch
@@ -114,7 +114,7 @@ cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts crdb-checkout/pkg
 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/db-console karma:watch
+bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console
 bazel run @yarn//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/cluster-ui jest --watch
 
 exec

pkg/cmd/dev/ui.go

@@ -451,7 +451,6 @@ Replaces 'make ui-test' and 'make ui-test-watch'.`,
 					"--silent",
 					"--cwd",
 					dirs.dbConsole,
-					"karma:watch",
 				)
 
 				env := append(os.Environ(), "BAZEL_TARGET=fake")
@@ -490,7 +489,7 @@ Replaces 'make ui-test' and 'make ui-test-watch'.`,
 				)
 				args := append([]string{
 					"test",
-					"//pkg/ui/workspaces/db-console:karma",
+					"//pkg/ui/workspaces/db-console:jest",
 					"//pkg/ui/workspaces/cluster-ui:jest",
 				}, testOutputArg...)
 

pkg/ui/workspaces/cluster-ui/jest.config.js

@@ -11,7 +11,6 @@
 const path = require("path");
 const isBazel = !!process.env.BAZEL_TARGET;
 
-
 const bazelOnlySettings = {
   haste: {
     // Platforms that include a POSIX-compatible `find` binary default to using it for test file
@@ -27,8 +26,6 @@ const bazelOnlySettings = {
 };
 
 module.exports = {
-  haste: isBazel ? {
-  } : undefined,
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   moduleNameMapper: {
     "\\.(jpg|ico|jpeg|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",

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

@@ -45,7 +45,7 @@
     "@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/icons": "0.5.2",
     "@cockroachlabs/ui-components": "0.2.20",
     "@popperjs/core": "^2.4.0",
     "@reduxjs/toolkit": "^1.5.0",

pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobTable.spec.tsx

@@ -11,7 +11,6 @@ import React from "react";
 import { assert } from "chai";
 import { shallow } from "enzyme";
 import { earliestRetainedTime } from "./jobsPage.fixture";
-
 import { JobTable, JobTableProps } from "./jobTable";
 
 describe("<JobTable>", () => {

pkg/ui/workspaces/cluster-ui/src/jobs/jobsPage/jobTable.tsx

@@ -11,10 +11,9 @@ import { cockroach, google } from "@cockroachlabs/crdb-protobuf-client";
 import { Tooltip } from "@cockroachlabs/ui-components";
 import { isEqual, map } from "lodash";
 import React from "react";
+import { Nodes, MagnifyingGlass } from "@cockroachlabs/icons";
 import { Anchor } from "src/anchor";
 import { JobsResponse } from "src/api/jobsApi";
-import emptyTableResultsIcon from "src/assets/emptyState/empty-table-results.svg";
-import magnifyingGlassIcon from "src/assets/emptyState/magnifying-glass.svg";
 import { EmptyTable } from "src/empty";
 import { Pagination, ResultsPerPageLabel } from "src/pagination";
 import { ColumnDescriptor, SortSetting, SortedTable } from "src/sortedtable";
@@ -282,7 +281,7 @@ export class JobTable extends React.Component<JobTableProps, JobTableState> {
       return (
         <EmptyTable
           title="No jobs match your search"
-          icon={magnifyingGlassIcon}
+          icon={<MagnifyingGlass />}
           footer={
             <Anchor href={jobTable} target="_blank">
               Learn more about jobs
@@ -294,7 +293,7 @@ export class JobTable extends React.Component<JobTableProps, JobTableState> {
       return (
         <EmptyTable
           title="No jobs to show"
-          icon={emptyTableResultsIcon}
+          icon={<Nodes />}
           message="The jobs page provides details about backup/restore jobs, schema changes, user-created table statistics, automatic table statistics jobs and changefeeds."
           footer={
             <Anchor href={jobTable} target="_blank">

pkg/ui/workspaces/cluster-ui/src/sortedtable/tableSpinner/tableSpinner.tsx

@@ -9,10 +9,7 @@
 // licenses/APL.txt.
 
 import React from "react";
-import { Spinner } from "@cockroachlabs/icons";
-import { Spin, Icon } from "antd";
-import "antd/lib/spin/style";
-import "antd/lib/icon/style";
+import { Spinner } from "@cockroachlabs/ui-components";
 import classNames from "classnames/bind";
 import styles from "./tableSpinner.module.scss";
 
@@ -29,10 +26,7 @@ export const TableSpinner = ({ loadingLabel }: TableSpinnerProps) => {
 
   return (
     <div className={tableSpinnerClass}>
-      <Spin
-        className={spinClass}
-        indicator={<Icon component={Spinner} spin />}
-      />
+      <Spinner className={spinClass} />
       {loadingLabel && (
         <span className={loadingLabelClass}>{loadingLabel}</span>
       )}

pkg/ui/workspaces/cluster-ui/webpack.config.js

@@ -191,6 +191,7 @@ module.exports = (env, argv) => {
         amd: "react-dom",
         root: "ReactDom",
       },
+      "react-router": "react-router",
       "react-router-dom": "react-router-dom",
       "react-redux": "react-redux",
       "redux-saga": "redux-saga",

pkg/ui/workspaces/cluster-ui/yarn.lock

@@ -1598,10 +1598,10 @@
   version "0.0.0"
   uid ""
 
-"@cockroachlabs/icons@0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@cockroachlabs/icons/-/icons-0.3.0.tgz#160573074396f266e92fcbe5e520c5ba1d8750f9"
-  integrity sha512-GJxhlXy8Z3/PYFb9C3iM1dvU9wajGoaA/+VCj0an2ipfbkI2fhToq+h0b33vu7JuZ3dS4QMRjfVE4uhlyIUH2Q==
+"@cockroachlabs/icons@0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@cockroachlabs/icons/-/icons-0.5.2.tgz#ddf87eba8e173f7ee6c787e178f460a0a1872b80"
+  integrity sha512-+2JJegu+MPb4S2l7LJwPnbkmZuBlPdMBJNr4vqLdcEePcLAgOpEfGMlF1HV1Mb8YbDEFWUT9E0gZ/PRjjMalog==
 
 "@cockroachlabs/icons@^0.4.3":
   version "0.4.3"

pkg/ui/workspaces/db-console/BUILD.bazel

@@ -1,9 +1,9 @@
 load("@npm_db_console//webpack-cli:index.bzl", webpack = "webpack_cli")
-load("@npm_db_console//karma:index.bzl", "karma_test")
 load("@npm_db_console//stylint:index.bzl", "stylint_test")
 load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_test")
 load("@npm_db_console//eslint:index.bzl", "eslint_test")
 load("@npm_db_console//typescript:index.bzl", "tsc_test")
+load("@npm_db_console//jest:index.bzl", "jest_test")
 
 # TODO (koorosh): keeping the list of deps up to date is a candidate to be
 # autogenerated in scope of `dev generate bazel`.
@@ -16,6 +16,8 @@ DEV_DEPENDENCIES = [
     "@npm_db_console//@babel/core",
     "@npm_db_console//@babel/preset-env",
     "@npm_db_console//@babel/preset-react",
+    "@npm_db_console//@babel/runtime",
+    "@npm_db_console//@babel/plugin-transform-runtime",
     "@npm_db_console//@cockroachlabs/eslint-config",
     "@npm_db_console//@storybook/react",
     "@npm_db_console//@testing-library/react",
@@ -82,13 +84,6 @@ DEV_DEPENDENCIES = [
     "@npm_db_console//html-webpack-template",
     "@npm_db_console//http-proxy-middleware",
     "@npm_db_console//jsdoc",
-    "@npm_db_console//karma-chai",
-    "@npm_db_console//karma-chrome-launcher",
-    "@npm_db_console//karma-mocha",
-    "@npm_db_console//karma-mocha-reporter",
-    "@npm_db_console//karma-sinon",
-    "@npm_db_console//karma-sourcemap-loader",
-    "@npm_db_console//karma-webpack",
     "@npm_db_console//less-loader",
     "@npm_db_console//minimist",
     "@npm_db_console//mocha",
@@ -162,7 +157,7 @@ DEPENDENCIES = [
 ] + DEV_DEPENDENCIES
 
 WEBPACK_DATA_COMMON = [
-    ".babelrc",
+    "babel.config.js",
     ".eslintrc.json",
     ".stylintrc",
     "assets",
@@ -327,48 +322,42 @@ CCL_NOT_PROTO_CLIENT = glob(
     exclude = ["protos.*"],
 )
 
-KARMA_DEPS = [
-    ":node_modules",
-    ".babelrc",
+JEST_DEPS = DEPENDENCIES + [
     ".eslintrc.json",
-    ".stylintrc",
-    "assets",
-    "favicon.ico",
-    "fonts",
-    "styl",
+    "babel.config.js",
+    "package.json",
+    "jest.config.js",
     "tsconfig.json",
-    "webpack.config.js",
-    "karma.conf.js",
-    "tests-loader.js",
-    "//pkg/ui/workspaces/cluster-ui:cluster-ui",
+    "tsconfig.linting.json",
+    "@npm_db_console//@babel/plugin-proposal-class-properties",
+    "@npm_db_console//@babel/plugin-proposal-object-rest-spread",
+    "@npm_db_console//@babel/plugin-transform-modules-commonjs",
+    "@npm_db_console//@reduxjs/toolkit",
+    "@npm_db_console//identity-obj-proxy",
+    "@npm_db_console//ts-jest",
+    "@npm_db_console//jest-enzyme",
+    "@npm_db_console//jest-canvas-mock",
     "//pkg/ui/workspaces/db-console/src/js:crdb-protobuf-client",
     "//pkg/ui/workspaces/db-console/ccl/src/js:crdb-protobuf-client-ccl",
-] + SRC_NOT_PROTO_CLIENT + CCL_NOT_PROTO_CLIENT + DEPENDENCIES
-
-karma_test(
-    name = "karma",
-    data = KARMA_DEPS,
-    templated_args = [
-        "start",
-        "$(execpath karma.conf.js)",
-    ],
-    visibility = ["//visibility:public"],
-)
+    "//pkg/ui/workspaces/cluster-ui:cluster-ui",
+    # A copy of protobufjs from the protobuf client's dependencies is required
+    # to avoid "cannot find module protobufjs/minimal" errors when Babel
+    # attempts to transpile the protobuf client during testing.
+    "@npm_protos//protobufjs",
+] + glob([
+    "src/**",
+    "ccl/**",
+])
 
-karma_test(
-    name = "karma-watch",
-    data = KARMA_DEPS,
-    tags = [
-        # Reduce test startup times under ibazel by letting the karma process run between file changes
-        "ibazel_notify_changes",
-    ],
+jest_test(
+    name = "jest",
+    size = "enormous",
+    data = JEST_DEPS,
     templated_args = [
-        "start",
-        "$(execpath karma.conf.js)",
-        # Reduce test startup times under ibazel by using the default karma watchers
-        "--auto-watch",
-        # Don't close the karma server after tests complete
-        "--no-single-run",
+        "--node_options=--max-old-space-size=8192",
+        "-w 25%",
+        "--ci",
+        "--config",
+        "$(rootpath jest.config.js)",
     ],
-    visibility = ["//visibility:public"],
 )

pkg/ui/workspaces/db-console/babel.config.js

@@ -0,0 +1,49 @@
+// Copyright 2022 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+/* globals module */
+
+const presets = [
+  [
+    "@babel/env",
+    {
+      modules: "commonjs",
+    },
+  ],
+  "@babel/react",
+];
+
+const plugins = [
+  "@babel/proposal-class-properties",
+  "@babel/proposal-object-rest-spread",
+  // @babel/plugin-transform-runtime is required to support dynamic loading of cluster-ui package
+  "@babel/plugin-transform-runtime",
+  ["import", { libraryName: "antd", style: true }],
+];
+
+const env = {
+  test: {
+    plugins: ["@babel/plugin-transform-modules-commonjs"],
+  },
+};
+
+/*
+  For dependencies that expect the value of `this` to be equivelant to
+  the global `window` object (d3 specifically), we need Babel to process
+  these dependencies as "script" rather than "module". Modules are run in
+  "strict mode" where the value of a global `this` will be undefined where
+  as in non-strict mode a global this will be equal to global window.
+
+  Source type "unambiguous" will treat any file containing `import` or
+  `export` as a module and any file without as a script (non-strict mode).
+  See https://babeljs.io/docs/en/options#sourcetype for more details
+*/
+const sourceType = "unambiguous";
+
+module.exports = { presets, plugins, env, sourceType };

pkg/ui/workspaces/db-console/ccl/src/views/clusterviz/containers/map/index.spec.tsx

@@ -12,7 +12,6 @@ import { shallow } from "enzyme";
 import { createMemoryHistory, History } from "history";
 import { match as Match } from "react-router-dom";
 
-import "src/enzymeInit";
 import { ClusterVisualization } from "./index";
 import { Breadcrumbs } from "./breadcrumbs";