[Feature] Add eslint and Prettier to ray dashboard (#3975)

* style: add / update next js eslint to latest

Signed-off-by: Cheyu Wu <[email protected]>

* style: add prettier for tsx and js

Signed-off-by: Cheyu Wu <[email protected]>

* chore: extend the name in  .pre-commit-config.yaml

Co-authored-by: Nary Yeh <[email protected]>
Signed-off-by: Cheyu Wu <[email protected]>

* chore: mv yarn lock check to CI and keep only lint in pre-commit

Signed-off-by: Cheyu Wu <[email protected]>

* fix: pipeline err

Signed-off-by: Cheyu Wu <[email protected]>

---------

Signed-off-by: Cheyu Wu <[email protected]>
Signed-off-by: Cheyu Wu <[email protected]>
Co-authored-by: Nary Yeh <[email protected]>

Author: CheyuWu

.github/workflows/test-job.yaml

@@ -17,6 +17,16 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-python@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: yarn
+          cache-dependency-path: dashboard/yarn.lock
+      - name: Check Yarn lock consistency
+        run: |
+          cd dashboard
+          yarn install --immutable
+          yarn dedupe --check
       - uses: pre-commit/[email protected]
 
   build_apiserver:

.pre-commit-config.yaml

@@ -65,6 +65,14 @@ repos:
         pass_filenames: false
         additional_dependencies:
           - github.com/yannh/kubeconform/cmd/[email protected]
+      - id: eslint
+        name: ESLint TypeScript/JavaScript check
+        entry: ./scripts/dashboard-lint.sh
+        language: node
+        require_serial: true
+        pass_filenames: true
+        files: .*\.(js|jsx|ts|tsx|cjs|mjs)$
+
 
   - repo: https://github.com/igorshubovych/markdownlint-cli
     rev: v0.44.0

dashboard/.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+coverage
+.next
+*.json

dashboard/.prettierrc

@@ -0,0 +1 @@
+{}

dashboard/eslint.config.mjs

@@ -0,0 +1,24 @@
+import { defineConfig } from "eslint/config";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig([
+  {
+    extends: compat.extends("next/core-web-vitals", "next/typescript"),
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+    },
+  },
+]);

dashboard/next.config.mjs

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "standalone",
+  output: "standalone",
 };
 
 export default nextConfig;

dashboard/package.json

@@ -1,12 +1,13 @@
 {
   "name": "ray-frontend",
   "version": "0.1.0",
-  "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint --max-warnings 0 && prettier . --check && tsc --noEmit",
+    "fix": "next lint --fix --max-warnings 0 && prettier . --write && tsc --noEmit"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -21,13 +22,15 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
+    "@eslint/js": "^9.33.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint": "^9.33.0",
+    "eslint-config-next": "^15.4.6",
     "postcss": "^8",
+    "prettier": "3.6.2",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   },

dashboard/postcss.config.js renamed to dashboard/postcss.config.cjs

@@ -1,8 +1,11 @@
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 
 export async function GET() {
   const config = {
-    apiUrl: process.env.NEXT_PUBLIC_API_URL || process.env.API_URL || "http://localhost:31888/apis/v1",
+    apiUrl:
+      process.env.NEXT_PUBLIC_API_URL ||
+      process.env.API_URL ||
+      "http://localhost:31888/apis/v1",
   };
 
   return NextResponse.json(config);

dashboard/src/app/api/config/route.ts

@@ -10,12 +10,12 @@ import { useEffect } from "react";
 import { useFirstVisit } from "@/components/FirstVisitContext";
 
 export default function ClustersPage() {
-  const { firstVisit, setFirstVisit} = useFirstVisit();
+  const { firstVisit, setFirstVisit } = useFirstVisit();
   useEffect(() => {
     if (firstVisit) {
       setFirstVisit(false);
     }
-  }, [])
+  }, [firstVisit, setFirstVisit]);
   return (
     <>
       <Box