dev: add ui clean subcommand, update Makefile to point to dev

Add `ui clean` and `ui clean --all`; the former does approximately the
same as `make ui-clean`, the latter does approximately the same as
`make ui-maintainer-clean`.

Release note: None

Makefile

@@ -1390,11 +1390,13 @@ pkg/ui/workspaces/db-console/dist/%.ccl.dll.js pkg/ui/workspaces/db-console/%.cc
 
 .PHONY: ui-test
 ui-test: $(UI_CCL_DLLS) $(UI_CCL_MANIFESTS)
+	$(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)
+	$(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
 
@@ -1430,11 +1432,13 @@ ui-watch ui-watch-secure: $(UI_CCL_DLLS) pkg/ui/yarn.opt.installed
   #
   # `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)
 
 .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 -rf pkg/ui/dist_vendor/*
@@ -1445,6 +1449,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
+	$(info $(yellow)NOTE: consider using `./dev ui clean --all` instead of `make ui-maintainer-clean`$(term-reset))
 	rm -rf pkg/ui/node_modules pkg/ui/workspaces/db-console/node_modules pkg/ui/yarn.installed pkg/ui/workspaces/cluster-ui/node_modules
 
 pkg/roachprod/vm/aws/embedded.go: bin/.bootstrap pkg/roachprod/vm/aws/config.json pkg/roachprod/vm/aws/old.json bin/terraformgen

dev

@@ -3,7 +3,7 @@
 set -euo pipefail
 
 # Bump this counter to force rebuilding `dev` on all machines.
-DEV_VERSION=25
+DEV_VERSION=26
 
 THIS_DIR=$(cd "$(dirname "$0")" && pwd)
 BINARY_DIR=$THIS_DIR/bin/dev-versions

pkg/cmd/dev/testdata/datadriven/ui

@@ -73,3 +73,27 @@ cp -r sandbox/pkg/ui/workspaces/cluster-ui/dist crdb-checkout/pkg/ui/workspaces/
 bazel info workspace --color=no
 bazel run @nodejs//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/db-console karma:watch
 bazel run @nodejs//:yarn -- --silent --cwd crdb-checkout/pkg/ui/workspaces/cluster-ui jest --watch
+
+exec
+dev ui clean
+----
+bazel info workspace --color=no
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.js
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.js
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts
+rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
+
+exec
+dev ui clean --all
+----
+bazel info workspace --color=no
+bazel info workspace --color=no
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.js
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.js
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts
+rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
+rm -rf crdb-checkout/pkg/ui/node_modules
+rm -rf crdb-checkout/pkg/ui/workspaces/db-console/node_modules
+rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/node_modules

pkg/cmd/dev/ui.go

@@ -35,9 +35,10 @@ func makeUICmd(d *dev) *cobra.Command {
 		Long:  "Builds UI & runs UI-related commands to ease development flows",
 	}
 
-	uiCmd.AddCommand(makeUIWatchCmd(d))
+	uiCmd.AddCommand(makeUICleanCmd(d))
 	uiCmd.AddCommand(makeUILintCmd(d))
 	uiCmd.AddCommand(makeUITestCmd(d))
+	uiCmd.AddCommand(makeUIWatchCmd(d))
 
 	return uiCmd
 }
@@ -248,6 +249,58 @@ Replaces 'make ui-lint'.`,
 	return lintCmd
 }
 
+func makeUICleanCmd(d *dev) *cobra.Command {
+	const (
+		allFlag = "all"
+	)
+
+	cleanCmd := &cobra.Command{
+		Use:   "clean [--all]",
+		Short: "clean artifacts produced by `dev ui`",
+		Long:  "Clean the workspace of artifacts produced by `dev ui`. Pass the --all option to also delete all installed dependencies.",
+		Args:  cobra.MaximumNArgs(0),
+		RunE: func(cmd *cobra.Command, commandLine []string) error {
+			all := mustGetFlagBool(cmd, allFlag)
+			uiDirs, err := getUIDirs(d)
+			if err != nil {
+				return err
+			}
+			pathsToDelete := []string{
+				filepath.Join(uiDirs.dbConsole, "src", "js", "protos.js"),
+				filepath.Join(uiDirs.dbConsole, "src", "js", "protos.d.ts"),
+				filepath.Join(uiDirs.dbConsole, "ccl", "src", "js", "protos.js"),
+				filepath.Join(uiDirs.dbConsole, "ccl", "src", "js", "protos.d.ts"),
+				filepath.Join(uiDirs.clusterUI, "dist"),
+			}
+			if all {
+				workspace, err := d.getWorkspace(d.cli.Context())
+				if err != nil {
+					return err
+				}
+
+				pathsToDelete = append(
+					pathsToDelete,
+					filepath.Join(workspace, "pkg", "ui", "node_modules"),
+					filepath.Join(uiDirs.dbConsole, "node_modules"),
+					filepath.Join(uiDirs.clusterUI, "node_modules"),
+				)
+			}
+
+			for _, toDelete := range pathsToDelete {
+				err := d.os.RemoveAll(toDelete)
+				if err != nil {
+					return err
+				}
+			}
+			return nil
+		},
+	}
+
+	cleanCmd.Flags().Bool(allFlag, false, "additionally clean installed dependencies")
+
+	return cleanCmd
+}
+
 // arrangeFilesForTestWatchers moves files from Bazel's build output directory
 // into the locations they'd be found during a non-Bazel build, so that test
 // watchers can successfully operate outside of the Bazel sandbox.