frontend: Migrate from tslint to eslint in KWA (#2042)

* frontend: Remove TSLint

Remove TSLint since it's deprecated.

Signed-off-by: Elena Zioga <[email protected]>

* frontend: Introduce ESLint

Introduce ESLint by using the following Angular command [1]:

ng add @angular-eslint/schematics

[1] https://github.com/angular-eslint/angular-eslint#quick-start-with-angular-v12-and-later

Signed-off-by: Elena Zioga <[email protected]>

* frontend: Fix linting errors

Fix linting errors.

Signed-off-by: Elena Zioga <[email protected]>

* gh-actions: Add GH action to run a lint check

Introduce a Github action to run a lint check.

Signed-off-by: Elena Zioga <[email protected]>

Signed-off-by: Elena Zioga <[email protected]>

Author: elenzio9

.github/workflows/test-node.yaml

@@ -1,15 +1,17 @@
 name: Frontend Test
 
 on:
-  - pull_request
+  pull_request:
+    paths:
+      - pkg/new-ui/v1beta1/frontend/**
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
   test:
-    name: Test
+    name: Code format and lint
     runs-on: ubuntu-latest
 
     steps:
@@ -21,11 +23,16 @@ jobs:
         with:
           node-version: 12.18.1
 
-      - name: Run Node test
+      - name: Format katib code
         run: |
           npm install prettier --prefix ./pkg/new-ui/v1beta1/frontend
           make prettier-check
 
+      - name: Lint katib code
+        run: |
+          cd pkg/new-ui/v1beta1/frontend
+          npm run lint-check
+
   frontend-unit-tests:
     name: Frontend Unit Tests
     runs-on: ubuntu-latest

pkg/new-ui/v1beta1/frontend/.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

pkg/new-ui/v1beta1/frontend/angular.json

@@ -32,7 +32,10 @@
                 "output": "assets/monaco-editor"
               }
             ],
-            "styles": ["src/styles.scss", "src/assets/css/d3.parcoords.css"],
+            "styles": [
+              "src/styles.scss",
+              "src/assets/css/d3.parcoords.css"
+            ],
             "scripts": [],
             "vendorChunk": true,
             "extractLicenses": false,
@@ -96,23 +99,17 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": [],
             "preserveSymlinks": true
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -124,9 +121,21 @@
               "devServerTarget": "frontend:serve:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
-  "defaultProject": "frontend"
+  "defaultProject": "frontend",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
 }