ui: integrate cluster-ui package into db-console

Initially db-console referenced to `cluster-ui` package as an external package that
is hosted in another repository and required to update version of this package
everytime new changes are made.

Now, when `cluster-ui` package is extracted from `cockroachdb/ui` repository and
moved in this repo (under `pkg/ui/cluster-ui`), it is possible to reference to
this package as a linked dependency and immediately observe all changes.

To do this following changes were made:
- db-console references to cluster-ui as a linked dependency and doesn't rely
on specific version
- `cluster-ui` package relies on local version of crdb-protobufjs-client package
instead of specific version
- Make commands related to db-console are extended to take into account nested
`cluster-ui` package. It runs tests, linting and watch commands for both packages.

One notable workaround has to mentioned... yarn installation for db-console
fails during first run because it cannot properly consume symlinked `cluster-ui`
dependency and only with second attempt it passes without issues (this is known
issue in yarn project).

Release note: none

Makefile

@@ -357,6 +357,13 @@ endif
 
 .SECONDARY: pkg/ui/yarn.installed
 pkg/ui/yarn.installed: pkg/ui/package.json pkg/ui/yarn.lock pkg/ui/yarn.protobufjs-cli.lock | bin/.submodules-initialized
+	$(NODE_RUN) -C pkg/ui/cluster-ui yarn install
+	$(NODE_RUN) -C pkg/ui/cluster-ui yarn build
+	# TODO (koorosh): run yarn installation twice as a workaround for an issue when Yarn doesn't hoist dependencies
+  # https://github.com/yarnpkg/yarn/issues/4563
+  # running this command several times should not increase running time drastically since yarn validates already installed
+  # dependencies and won't reinstall them
+	$(NODE_RUN) -C pkg/ui yarn install --offline || true # don't break on first failed attempt to install dependencies
 	$(NODE_RUN) -C pkg/ui yarn install --offline
 	# Prevent ProtobufJS from trying to install its own packages because a) the
 	# the feature is buggy, and b) it introduces an unnecessary dependency on NPM.
@@ -1365,6 +1372,7 @@ ui-lint: pkg/ui/yarn.installed $(UI_PROTOS_OSS) $(UI_PROTOS_CCL)
 	$(NODE_RUN) -C pkg/ui $(TSC)
 	$(NODE_RUN) -C pkg/ui yarn lint
 	@if $(NODE_RUN) -C pkg/ui yarn list | grep phantomjs; then echo ^ forbidden UI dependency >&2; exit 1; fi
+	$(NODE_RUN) -C pkg/ui/cluster-ui yarn --cwd pkg/ui/cluster-ui lint
 
 # DLLs are Webpack bundles, not Windows shared libraries. See "DLLs for speedy
 # builds" in the UI README for details.
@@ -1398,10 +1406,12 @@ pkg/ui/dist/%.ccl.dll.js pkg/ui/%.ccl.manifest.json: pkg/ui/webpack.%.js pkg/ui/
 .PHONY: ui-test
 ui-test: $(UI_CCL_DLLS) $(UI_CCL_MANIFESTS)
 	$(NODE_RUN) -C pkg/ui $(KARMA) start
+	$(NODE_RUN) -C pkg/ui/cluster-ui yarn ci
 
 .PHONY: ui-test-watch
 ui-test-watch: $(UI_CCL_DLLS) $(UI_CCL_MANIFESTS)
-	$(NODE_RUN) -C pkg/ui $(KARMA) start --no-single-run --auto-watch
+	$(NODE_RUN) -C pkg/ui $(KARMA) start --no-single-run --auto-watch & \
+	$(NODE_RUN) -C pkg/ui/cluster-ui yarn test
 
 .PHONY: ui-test-debug
 ui-test-debug: $(UI_DLLS) $(UI_MANIFESTS)
@@ -1432,7 +1442,13 @@ ui-watch-secure: export TARGET ?= https://localhost:8080/
 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
-	cd pkg/ui && $(WEBPACK_DASHBOARD) -- $(WEBPACK_DEV_SERVER) --config webpack.app.js --env.dist=ccl --port $(PORT) --mode "development" $(WEBPACK_DEV_SERVER_FLAGS)
+  # 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
+	yarn --cwd pkg/ui/cluster-ui build:watch & \
+	yarn --cwd pkg/ui webpack-dev-server --config webpack.app.js --env.dist=ccl --port $(PORT) --mode "development" $(WEBPACK_DEV_SERVER_FLAGS)
 
 .PHONY: ui-clean
 ui-clean: ## Remove build artifacts.
@@ -1443,7 +1459,7 @@ ui-clean: ## Remove build artifacts.
 .PHONY: ui-maintainer-clean
 ui-maintainer-clean: ## Like clean, but also remove installed dependencies
 ui-maintainer-clean: ui-clean
-	rm -rf pkg/ui/node_modules pkg/ui/yarn.installed
+	rm -rf pkg/ui/node_modules pkg/ui/yarn.installed pkg/ui/cluster-ui/node_modules
 
 .SECONDARY: pkg/sql/parser/gen/sql.go.tmp
 pkg/sql/parser/gen/sql.go.tmp: pkg/sql/parser/gen/sql-gen.y bin/.bootstrap

pkg/ui/cluster-ui/.yarnrc

@@ -1 +1,2 @@
 version-tag-prefix "@cockroachlabs/cluster-ui@"
+yarn-offline-mirror false

pkg/ui/cluster-ui/package.json

@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.12.13",
-    "@cockroachlabs/crdb-protobuf-client": "^0.0.12",
+    "@cockroachlabs/crdb-protobuf-client": "link:../src/js",
     "@cockroachlabs/icons": "0.3.0",
     "@cockroachlabs/ui-components": "0.2.19-alpha.2",
     "@popperjs/core": "^2.4.0",

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

@@ -103,7 +103,7 @@ module.exports = {
 
   plugins: [
     new WebpackBar({
-      name: "admin-ui",
+      name: "cluster-ui",
       color: "cyan",
       profile: true,
     }),