mgr/dashboard: Improve prettier scripts and documentation

Added prettier validation to the run-frontend-unittests script. This will make
sure we are always running prettier in our commits.

Added 2 new npm scripts:
- 'prettier', will run prettier formatter on all frontend files
- 'prettier:lint', will check all frontend files against prettier linter

Removed 'pretty-quick' and related scripts. Since we now have all files
prettified we can simply run prettier on them.

Remove 'tslint-eslint-rules' package and all related rules. Prettier can check
all the removed rules.

Updated HACKING.rst with some information about prettier.

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/HACKING.rst b/src/pybind/mgr/dashboard/HACKING.rst
index 9b81a366585a9505c28625af69e822b086883270..ad0fe3462465860284eedaa8ca1068fa17acef38 100644 (file)
--- a/src/pybind/mgr/dashboard/HACKING.rst
+++ b/src/pybind/mgr/dashboard/HACKING.rst
@@ -63,6 +63,18 @@ Run ``npm run build`` to build the project. The build artifacts will be
 stored in the ``dist/`` directory. Use the ``-prod`` flag for a
 production build. Navigate to ``https://localhost:8443``.
 
+Formating TS and SCSS files
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+We use `Prettier <https://prettier.io/>`_ to automatically format TS and SCSS
+files.
+To use this plugin you can either install it in your IDE, if supported, or use
+it via the cli.
+
+We added 2 npm scripts to help running prettier commands:
+- ``npm run prettier``, will run prettier formatter on all frontend files
+- ``npm run prettier:lint``, will check all frontend files against prettier linter
+
 Running Unit Tests
 ~~~~~~~~~~~~~~~~~~
 

diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json
index 5bf91fd393cbd4d27841f8ec7a8266dbe80c8f7f..53e8b1bd2043dcc9d7be9381eb6d8f6a415127d3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/package.json
+++ b/src/pybind/mgr/dashboard/frontend/package.json
@@ -10,7 +10,8 @@
     "test:ci": "jest --coverage",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "makePretty": "pretty-quick --staged"
+    "prettier": "prettier --write \"{src,e2e}/**/*.{ts,scss}\"",
+    "prettier:lint": "prettier --list-different \"{src,e2e}/**/*.{ts,scss}\""
   },
   "private": true,
   "jest": {
@@ -76,12 +77,10 @@
     "jest": "23.2.0",
     "jest-canvas-mock": "1.0.3",
     "jest-preset-angular": "5.2.3",
-    "prettier": "1.13.6",
-    "pretty-quick": "1.6.0",
+    "prettier": "1.13.7",
     "protractor": "5.3.2",
     "ts-node": "5.0.1",
     "tslint": "5.10.0",
-    "tslint-eslint-rules": "5.3.1",
     "typescript": "2.7.2"
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/tslint.json b/src/pybind/mgr/dashboard/frontend/tslint.json
index e42abe65cd1cee573e8ae626086a2bead7a92e8f..ce258f6491398d195d6f17799b003b9f2e13865a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/tslint.json
+++ b/src/pybind/mgr/dashboard/frontend/tslint.json
@@ -1,6 +1,5 @@
 {
   "rulesDirectory": ["node_modules/codelyzer"],
-  "extends": ["tslint-eslint-rules"],
   "rules": {
     "no-consecutive-blank-lines": true,
     "arrow-return-shorthand": true,
@@ -10,10 +9,7 @@
     "curly": true,
     "eofline": true,
     "forin": true,
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
+    "import-blacklist": [true, "rxjs/Rx"],
     "import-spacing": true,
     "indent": [true, "spaces"],
     "interface-over-type-literal": true,
@@ -91,32 +87,6 @@
     "directive-class-suffix": true,
     "no-forward-ref": true,
     "no-output-named-after-standard-event": true,
-    "ordered-imports": true,
-    "no-extra-semi": true,
-    "ter-no-irregular-whitespace": true,
-    "no-multi-spaces": true,
-    "brace-style": [
-      true,
-      "1tbs",
-      {
-        "allowSingleLine": false
-      }
-    ],
-    "ter-indent": [
-      true,
-      2,
-      {
-        "SwitchCase": 1,
-        "FunctionDeclaration": {
-          "body": 1,
-          "parameters": "first"
-        },
-        "FunctionExpression": {
-          "body": 1,
-          "parameters": "first"
-        }
-      }
-    ],
-    "space-in-parens": [true, "never"]
+    "ordered-imports": true
   }
 }

diff --git a/src/pybind/mgr/dashboard/run-frontend-unittests.sh b/src/pybind/mgr/dashboard/run-frontend-unittests.sh
index 974f672b7ac88c12f162eeb84d6fe7a85d411741..94f0a0f63ebe3a4275ee844a32d136d387f0436c 100755 (executable)
--- a/src/pybind/mgr/dashboard/run-frontend-unittests.sh
+++ b/src/pybind/mgr/dashboard/run-frontend-unittests.sh
@@ -1,24 +1,41 @@
 #!/usr/bin/env bash
 
-set -e
-
+failed=false
 cd $CEPH_ROOT/src/pybind/mgr/dashboard/frontend
+.  $CEPH_ROOT/build/src/pybind/mgr/dashboard/node-env/bin/activate
+
+# Build
+npm run build -- --prod --progress=false || failed=true
 
+# Unit Tests
 config='src/unit-test-configuration.ts'
 if [ -e $config ]; then
   mv $config ${config}_old
 fi
 cp ${config}.sample $config
 
-.  $CEPH_ROOT/build/src/pybind/mgr/dashboard/node-env/bin/activate
-
-npm run build -- --prod --progress=false
-npm run test:ci
-npm run lint
+npm run test:ci || failed=true
 
 rm $config
 if [ -e ${config}_old ]; then
   mv ${config}_old $config
 fi
 
+# Linting
+npm run lint --silent
+if [ $? -gt 0 ]; then
+  failed=true
+  echo -e "\nTry running 'npm run lint -- --fix' to fix some linting errors."
+fi
+
+npm run prettier:lint --silent
+if [ $? -gt 0 ]; then
+  failed=true
+  echo -e "\nTry running 'npm run prettier' to fix linting errors."
+fi
+
 deactivate
+
+if [ "$failed" = "true" ]; then
+  exit 1
+fi