Skip to content

Commit

Permalink
dev: add ./dev generate js subcommand
Browse files Browse the repository at this point in the history 
Interactive development of UI features requires a few prerequisites to
be built to satisfy editor requirements. Specifically, cluster-ui
depends on the typings produced from building
@cockroachlabs/crdb-protobuf-client, db-console depends on the typings
produced from building both the protobuf client and cluster-ui, and
eslint editor plugins require @cockroachlabs/eslint-plugin-crdb to be
compiled and the compiled output to be in the Bazel workspace. Add a
./dev generate js target that compiles the minimum set of dependencies
to bootstrap a development environment.

fixes #84738

Release note: None
  • Loading branch information
@sjbarag
sjbarag committed Jul 21, 2022
1 parent 077ba49 commit dc5fb3e
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 6 deletions.
40 changes: 40 additions & 0 deletions pkg/cmd/dev/generate.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ func makeGenerateCmd(runE func(cmd *cobra.Command, args []string) error) *cobra.
dev generate docs # generates documentation
dev generate diagrams # generates syntax diagrams
dev generate bnf # generates syntax bnf files
dev generate js # generates JS protobuf client and seeds local tooling
dev generate go # generates go code (execgen, stringer, protobufs, etc.), plus everything 'cgo' generates
dev generate go_nocgo # generates go code (execgen, stringer, protobufs, etc.)
dev generate protobuf # *.pb.go files (subset of 'dev generate go')
Expand Down Expand Up @@ -69,6 +70,7 @@ func (d *dev) generate(cmd *cobra.Command, targets []string) error {
"cgo": d.generateCgo,
"docs": d.generateDocs,
"execgen": d.generateExecgen,
"js": d.generateJs,
"go": d.generateGo,
"go_nocgo": d.generateGoNoCgo,
"protobuf": d.generateProtobuf,
Expand Down Expand Up @@ -323,3 +325,41 @@ import "C"

return nil
}

func (d *dev) generateJs(cmd *cobra.Command) error {
ctx := cmd.Context()

args := []string{
"build",
"//pkg/ui/workspaces/eslint-plugin-crdb:eslint-plugin-crdb",
"//pkg/ui/workspaces/db-console/src/js:crdb-protobuf-client",
"//pkg/ui/workspaces/cluster-ui:ts_project",
}
logCommand("bazel", args...)
if err := d.exec.CommandContextInheritingStdStreams(ctx, "bazel", args...); err != nil {
return fmt.Errorf("building JS development prerequisites: %w", err)
}

bazelBin, err := d.getBazelBin(ctx)
if err != nil {
return err
}
workspace, err := d.getWorkspace(ctx)
if err != nil {
return err
}

eslintPluginDist := "./pkg/ui/workspaces/eslint-plugin-crdb/dist"
// Delete eslint-plugin output tree that was previously copied out of the
// sandbox.
if err := d.os.RemoveAll(filepath.Join(workspace, eslintPluginDist)); err != nil {
return err
}

// Copy the eslint-plugin output tree back out of the sandbox, since eslint
// plugins in editors default to only searching in ./node_modules for plugins.
return d.os.CopyAll(
filepath.Join(bazelBin, eslintPluginDist),
filepath.Join(workspace, eslintPluginDist),
)
}
28 changes: 28 additions & 0 deletions pkg/cmd/dev/testdata/datadriven/ui
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,12 @@ cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.js crdb-checkout/pkg/ui/wo
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.js crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.js
cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
cp -r sandbox/pkg/ui/workspaces/eslint-plugin-crdb/dist crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
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
rm -rf crdb-checkout/pkg/ui/workspaces/db-console/dist
cp -r sandbox/pkg/ui/workspaces/db-console/dist crdb-checkout/pkg/ui/workspaces/db-console/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.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 3000
Expand All @@ -24,8 +28,12 @@ bazel info bazel-bin --color=no
bazel info workspace --color=no
cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.js crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.js
cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
cp -r sandbox/pkg/ui/workspaces/eslint-plugin-crdb/dist crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
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
rm -rf crdb-checkout/pkg/ui/workspaces/db-console/dist
cp -r sandbox/pkg/ui/workspaces/db-console/dist crdb-checkout/pkg/ui/workspaces/db-console/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.config.js --mode development --env.WEBPACK_SERVE --env.dist=oss --env.target=http://localhost:8080 --port 3000
Expand All @@ -41,8 +49,12 @@ cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.js crdb-checkout/pkg/ui/wo
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.js crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.js
cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
cp -r sandbox/pkg/ui/workspaces/eslint-plugin-crdb/dist crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
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
rm -rf crdb-checkout/pkg/ui/workspaces/db-console/dist
cp -r sandbox/pkg/ui/workspaces/db-console/dist crdb-checkout/pkg/ui/workspaces/db-console/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.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 3000 --https
Expand All @@ -58,8 +70,12 @@ cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.js crdb-checkout/pkg/ui/wo
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.js crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.js
cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
cp -r sandbox/pkg/ui/workspaces/eslint-plugin-crdb/dist crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
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
rm -rf crdb-checkout/pkg/ui/workspaces/db-console/dist
cp -r sandbox/pkg/ui/workspaces/db-console/dist crdb-checkout/pkg/ui/workspaces/db-console/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.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://example.crdb.io:4848 --port 3000
Expand All @@ -75,8 +91,12 @@ cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.js crdb-checkout/pkg/ui/wo
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.js crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.js
cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
cp -r sandbox/pkg/ui/workspaces/eslint-plugin-crdb/dist crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
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
rm -rf crdb-checkout/pkg/ui/workspaces/db-console/dist
cp -r sandbox/pkg/ui/workspaces/db-console/dist crdb-checkout/pkg/ui/workspaces/db-console/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.config.js --mode development --env.WEBPACK_SERVE --env.dist=ccl --env.target=http://localhost:8080 --port 12345
Expand Down Expand Up @@ -111,8 +131,12 @@ cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.js crdb-checkout/pkg/ui/wo
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.js crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.js
cp sandbox/pkg/ui/workspaces/db-console/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/src/js/protos.d.ts
cp sandbox/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts crdb-checkout/pkg/ui/workspaces/db-console/ccl/src/js/protos.d.ts
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
cp -r sandbox/pkg/ui/workspaces/eslint-plugin-crdb/dist crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist
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
rm -rf crdb-checkout/pkg/ui/workspaces/db-console/dist
cp -r sandbox/pkg/ui/workspaces/db-console/dist crdb-checkout/pkg/ui/workspaces/db-console/dist
bazel info workspace --color=no
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
Expand All @@ -125,7 +149,9 @@ 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/db-console/dist
rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/dist

exec
dev ui clean --all
Expand All @@ -136,7 +162,9 @@ 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/db-console/dist
rm -rf crdb-checkout/pkg/ui/workspaces/cluster-ui/dist
rm -rf crdb-checkout/pkg/ui/workspaces/eslint-plugin-crdb/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/db-console/src/js/node_modules
Expand Down
44 changes: 38 additions & 6 deletions pkg/cmd/dev/ui.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ Replaces 'make ui-watch'.`,
return err
}

if err := arrangeFilesForWatchers(d /* ossOnly */, isOss); err != nil {
if err := copyBuildOutputToWorkspace(d /* ossOnly */, isOss); err != nil {
log.Fatalf("failed to arrange files for watchers: %v", err)
return err
}
Expand Down Expand Up @@ -323,22 +323,23 @@ func makeUICleanCmd(d *dev) *cobra.Command {
return cleanCmd
}

// arrangeFilesForWatchers moves files from Bazel's build output directory
// copyBuildOutputToWorkspace 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.
// watchers and developer tooling can successfully operate outside of the Bazel
// sandbox.
//
// Unfortunately, Bazel's reliance on symlinks conflicts with Jest's refusal to
// traverse symlinks during `--watch` mode. Ibazel is unable to keep `jest`
// running between changes, since Jest won't find changes. But having ibazel
// kill Jest when a file changes defeat the purpose of Jest's watch mode, and
// makes devs pay the cost of node + jest startup times after every file change.
// Similar issues apply to webpack's watch-mode, as compiled output doesn't
// exist outside of the Bazel sandbox. As a workaround, arrangeFilesForWatchers
// exist outside of the Bazel sandbox. As a workaround, copyBuildOutputToWorkspace
// copies files out of the Bazel sandbox and allows Jest or webpack (in watch
// mode) to be executed from directly within a pkg/ui/workspaces/... directory.
//
// See https://github.com/bazelbuild/rules_nodejs/issues/2028
func arrangeFilesForWatchers(d *dev, ossOnly bool) error {
func copyBuildOutputToWorkspace(d *dev, ossOnly bool) error {
bazelBin, err := d.getBazelBin(d.cli.Context())
if err != nil {
return err
Expand Down Expand Up @@ -376,6 +377,21 @@ func arrangeFilesForWatchers(d *dev, ossOnly bool) error {
}
}

// Delete eslint-plugin output tree that was previously copied out of the sandbox
err = d.os.RemoveAll(filepath.Join(dstDirs.eslintPlugin, "dist"))
if err != nil {
return err
}

// Copy the eslint-plugin output tree back out of the sandbox
err = d.os.CopyAll(
filepath.Join(bazelBin, "pkg", "ui", "workspaces", "eslint-plugin-crdb", "dist"),
filepath.Join(dstDirs.eslintPlugin, "dist"),
)
if err != nil {
return err
}

// Delete cluster-ui output tree that was previously copied out of the sandbox
err = d.os.RemoveAll(filepath.Join(dstDirs.clusterUI, "dist"))
if err != nil {
Expand All @@ -391,6 +407,22 @@ func arrangeFilesForWatchers(d *dev, ossOnly bool) error {
return err
}

// Delete db-console output tree that was previously copied out of the sandbox
err = d.os.RemoveAll(filepath.Join(dstDirs.dbConsole, "dist"))
if err != nil {
return err
}

// Copy the db-console output tree back out of the sandbox
err = d.os.CopyAll(
filepath.Join(bazelBin, "pkg", "ui", "workspaces", "db-console", "dist"),
filepath.Join(dstDirs.dbConsole, "dist"),
)

if err != nil {
return err
}

return nil
}

Expand Down Expand Up @@ -438,7 +470,7 @@ Replaces 'make ui-test' and 'make ui-test-watch'.`,
return err
}

err = arrangeFilesForWatchers(d /* ossOnly */, false)
err = copyBuildOutputToWorkspace(d /* ossOnly */, false)
if err != nil {
// nolint:errwrap
return fmt.Errorf("unable to arrange files properly for watch-mode testing: %+v", err)
Expand Down

0 comments on commit dc5fb3e

Please sign in to comment.