From a2a66b7194f3cb7079489922d185cc3701e0bbe5 Mon Sep 17 00:00:00 2001
From: Keita Nonaka <keita.nonaka@hpe.com>
Date: Mon, 3 Oct 2022 10:50:15 -0700
Subject: [PATCH] chore: lint-staged for web (#5155)

* chore: staged-lint

* chore: new commands

* chore: new commands with `realpath`

* chore: create shell script for pre-commit

* fix: pop first element
---
 .pre-commit-config.yaml      | 15 ++++++---------
 pre-commit/README.md         |  5 +++++
 pre-commit/web_lint_check.sh | 14 ++++++++++++++
 webui/react/Makefile         | 14 ++++++++++++--
 webui/react/package.json     |  7 +++++--
 5 files changed, 42 insertions(+), 13 deletions(-)
 create mode 100644 pre-commit/README.md
 create mode 100644 pre-commit/web_lint_check.sh

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index d66a4aa829c..a04d27206f2 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -3,22 +3,19 @@ repos:
     hooks:
       - id: web-js-lint-check
         name: Web JS Lint Check
-        entry: bash -c 'make -j$(nproc) -C webui/react check-eslint check-prettier-js'
+        entry: sh ./pre-commit/web_lint_check.sh js
         language: system
-        files: 'webui/react/src/'
+        files: '^webui/react/src/'
         types_or: [javascript, jsx, ts, tsx]
-        pass_filenames: false
       - id: web-css-lint-check
         name: Web CSS Lint Check
-        entry: bash -c 'make -j$(nproc) -C webui/react check-prettier-css check-stylelint'
+        entry: sh ./pre-commit/web_lint_check.sh css
         language: system
-        files: 'webui/react/src/'
+        files: '^webui/react/src/'
         types_or: [css, less, scss]
-        pass_filenames: false
       - id: web-misc-lint-check
         name: Web Misc Lint Check
-        entry: bash -c 'make -j$(nproc) -C webui/react check-prettier-misc check-package-lock'
+        entry: sh ./pre-commit/web_lint_check.sh misc
         language: system
-        files: 'webui/react/src/'
+        files: '^webui/react/'
         types_or: [markdown, json]
-        pass_filenames: false
diff --git a/pre-commit/README.md b/pre-commit/README.md
new file mode 100644
index 00000000000..e04f2bf7aff
--- /dev/null
+++ b/pre-commit/README.md
@@ -0,0 +1,5 @@
+# Pre-Commit
+
+This is a folder to store scripts for [Pre-Commit](https://pre-commit.com/)
+
+Config file for `Pre-Commit` is located at [.pre-commit-config.yaml](../.pre-commit-config.yaml)
diff --git a/pre-commit/web_lint_check.sh b/pre-commit/web_lint_check.sh
new file mode 100644
index 00000000000..6437e5f646e
--- /dev/null
+++ b/pre-commit/web_lint_check.sh
@@ -0,0 +1,14 @@
+#!/bin/sh
+
+D=webui/react
+target=$1
+shift
+files=$(realpath --relative-to="$D" "${@}" | tr "\n" " ")
+
+case $target in
+  js    )  make -j$(nproc) -C "$D" prettier PRE_ARGS="-- -c $files" eslint ES_ARGS="$files"    ;;
+  css   )  make -j$(nproc) -C "$D" prettier PRE_ARGS="-- -c $files" stylelint ST_ARGS="$files" ;;
+  misc  )  make -j$(nproc) -C "$D" prettier PRE_ARGS="-- -c $files" check-package-lock         ;;
+  *     )  echo "unknonwn target '$target'"; exit 1 ;;
+
+esac
diff --git a/webui/react/Makefile b/webui/react/Makefile
index 825681318b8..f47b321f104 100644
--- a/webui/react/Makefile
+++ b/webui/react/Makefile
@@ -40,12 +40,22 @@ live: check-requirements start
 start:
 	npm start
 
+.PHONY: prettier-check
+prettier:
+	npm run prettier $(PRE_ARGS)
+.PHONY: stylelint
+stylelint:
+	npm run stylelint $(ST_ARGS)
+.PHONY: eslint
+eslint:
+	npm run eslint $(ES_ARGS)
+
 .PHONY: check-eslint
 check-eslint:
-	npm run eslint
+	npm run lint:eslint
 .PHONY: check-stylelint
 check-stylelint:
-	npm run stylelint
+	npm run lint:style
 check-prettier-js:
 	npm run format-check:js > /dev/null
 check-prettier-css:
diff --git a/webui/react/package.json b/webui/react/package.json
index f72d03a14ba..8ed8002df40 100644
--- a/webui/react/package.json
+++ b/webui/react/package.json
@@ -11,8 +11,11 @@
     "postshrinkwrap": "npx npm-force-resolutions && npm install --ignore-scripts",
     "start": "craco start",
     "build": "craco build",
-    "eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
-    "stylelint": "stylelint --config .stylelintrc.js \"src/**/*.{css,less,scss}\"",
+    "prettier": "prettier",
+    "eslint": "eslint",
+    "stylelint": "stylelint --config .stylelintrc.js",
+    "lint:eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint:style": "stylelint --config .stylelintrc.js \"src/**/*.{css,less,scss}\"",
     "lint": "npm run eslint && npm run stylelint && npm run format-check",
     "format": "npm run format:js && npm run format:css && npm run format:misc",
     "format:js": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",