make: Add make targets for formatting and linting frontend code.

This adds linting and formatting of frontend code when running `make lint`, `make format`, or any of the variations.

I am adding this because I didn't know how to check the code and so I had to wait for CI to fail, which I found irritating.

In order to make this reasonable, I factored out `make` targets for building *frontend/node_modules*, so I could depend on them.

PR-URL: hasura/graphql-engine-mono#8463
GitOrigin-RevId: 71882ec90490efbf87d428d08eaec2ae849a0a36

Makefile

@@ -9,6 +9,7 @@ help:
 
 include ./scripts/make/build.mk
 include ./scripts/make/ci.mk
+include ./scripts/make/frontend.mk
 include ./scripts/make/ghcid.mk
 include ./scripts/make/legacy-tests.mk
 include ./scripts/make/lint.mk

scripts/make/build.mk

@@ -9,11 +9,6 @@ GENERATED_CABAL_FILES = $(foreach package_file,$(PACKAGE_YAML_FILES),$(wildcard
 build-all: $(GENERATED_CABAL_FILES)
 	cabal build all --enable-tests --enable-benchmarks
 
-.PHONY: build-console-assets
-## build-console-assets
-build-console-assets:
-	cd frontend && npm install && npm run server-build:ce
-
 .PHONY: build
 ## build: build non-pro graphql executable
 build: $(GENERATED_CABAL_FILES)

scripts/make/frontend.mk

@@ -0,0 +1,12 @@
+.PHONY: build-console-assets
+## build-console-assets
+build-console-assets: frontend/node_modules
+	cd frontend && npm run server-build:ce
+
+# Install node_modules if package-lock.json changes
+frontend/node_modules: frontend/package-lock.json
+	cd frontend && npm install && touch node_modules
+
+# Cleanly install node_modules if package.json changes
+frontend/package-lock.json: frontend/package.json
+	cd frontend && npm ci

scripts/make/lint.mk

@@ -83,17 +83,41 @@ check-format-nix:
 		echo "$(NIX_FMT) is not installed; skipping"; \
 	fi
 
+.PHONY: format-frontend
+## format-frontend: auto-format all frontend code
+format-frontend: frontend/node_modules
+	@echo 'running nx format:write'
+	cd frontend && npm run format:write:all
+
+.PHONY: format-frontend-changed
+## format-frontend-changed: auto-format all frontend code (changed files only)
+format-frontend-changed: frontend/node_modules
+	@echo 'running nx format:write'
+	cd frontend && npm run format:write
+
+.PHONY: check-format-frontend
+## check-format-frontend: check frontend code
+check-format-frontend: frontend/node_modules
+	@echo 'running nx format:check'
+	cd frontend && npx nx format:check
+
+.PHONY: check-format-frontend-changed
+## check-format-frontend-changed: check frontend code (changed files only)
+check-format-frontend-changed: frontend/node_modules
+	@echo 'running nx format:check'
+	cd frontend && npx nx format:check --base=origin/main
+
 .PHONY: format
-format: format-hs format-nix
+format: format-hs format-nix format-frontend
 
 .PHONY: format-changed
-format-changed: format-hs-changed format-nix
+format-changed: format-hs-changed format-nix format-frontend-changed
 
 .PHONY: check-format
-check-format: check-format-hs check-format-nix
+check-format: check-format-hs check-format-nix check-format-frontend
 
 .PHONY: check-format-changed
-check-format-changed: check-format-hs-changed check-format-nix
+check-format-changed: check-format-hs-changed check-format-nix check-format-frontend-changed
 
 .PHONY: lint-hs
 ## lint-hs: lint Haskell code using `hlint`
@@ -135,8 +159,22 @@ lint-shell-changed:
 		$(SHELLCHECK) $(CHANGED_SHELL_FILES); \
 	fi
 
+.PHONY: lint-frontend
+## lint-frontend: lint all frontend code
+lint-frontend: frontend/node_modules
+	@echo 'running nx lint'
+	cd frontend && npm run lint
+
+.PHONY: lint-frontend-changed
+## lint-frontend-changed: lint all frontend code
+lint-frontend-changed: frontend/node_modules
+	@echo 'running nx lint'
+	cd frontend && npx nx affected --target=lint --fix --parallel=3
+
 .PHONY: lint
-lint: lint-hs lint-shell check-format
+## lint: run all lint commands, and check formatting
+lint: lint-hs lint-shell lint-frontend check-format
 
 .PHONY: lint-changed
-lint-changed: lint-hs-changed lint-shell-changed check-format-changed
+## lint: run all lint commands, and check formatting (changed files only)
+lint-changed: lint-hs-changed lint-shell-changed lint-frontend-changed check-format-changed