From 17855bf65a0e03660c735814ff61b8c14cbe8c2b Mon Sep 17 00:00:00 2001
From: Samir Talwar <samir.talwar@hasura.io>
Date: Thu, 23 Mar 2023 16:14:39 +0100
Subject: [PATCH] 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: https://github.com/hasura/graphql-engine-mono/pull/8463
GitOrigin-RevId: 71882ec90490efbf87d428d08eaec2ae849a0a36
---
 Makefile                 |  1 +
 scripts/make/build.mk    |  5 ----
 scripts/make/frontend.mk | 12 ++++++++++
 scripts/make/lint.mk     | 50 +++++++++++++++++++++++++++++++++++-----
 4 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 scripts/make/frontend.mk

diff --git a/Makefile b/Makefile
index 474fb6340bc..a2cc6cf0703 100644
--- a/Makefile
+++ b/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
diff --git a/scripts/make/build.mk b/scripts/make/build.mk
index bf35f089558..d5284a26b44 100644
--- a/scripts/make/build.mk
+++ b/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)
diff --git a/scripts/make/frontend.mk b/scripts/make/frontend.mk
new file mode 100644
index 00000000000..ce842b1be35
--- /dev/null
+++ b/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
diff --git a/scripts/make/lint.mk b/scripts/make/lint.mk
index f044235d233..5efc7d2f1fc 100644
--- a/scripts/make/lint.mk
+++ b/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