[ci] fix: add ESLint v9 flat config to resolve missing config error

.github/workflows/eslint-gh.yml

@@ -9,7 +9,15 @@ jobs:
     name: runner / eslint
     runs-on: ubuntu-24.04
     steps:
-    - uses: actions/checkout@v6
-    - name: Run eslint
-      run: cd site && npm install && NODE_ENV=test npx eslint .
+    - uses: actions/checkout@v4
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+        cache: 'npm'
+        cache-dependency-path: site/package-lock.json
+    - name: Install dependencies
+      run: cd site && npm install
+    - name: Run ESLint
+      run: cd site && NODE_ENV=test npm run checklint
 

site/eslint.config.mjs

@@ -0,0 +1,131 @@
+import js from "@eslint/js";
+import reactPlugin from "eslint-plugin-react";
+import babelParser from "@babel/eslint-parser";
+
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx}"],
+    ignores: [
+      "node_modules/**",
+      "**/*.test.js",
+      "src/utils/**",
+      ".cache/**",
+      ".github/**",
+      "assets/**",
+      "public/**",
+      ".babelrc",
+      ".env.development",
+      "CNAME",
+      "CODE_OF_CONDUCT.md",
+      "CODEOWNERS",
+      "font-preload-cache.json",
+      "LICENSE",
+      "Makefile",
+      "README.md",
+      "package.json",
+      "package-lock.json",
+    ],
+    plugins: {
+      react: reactPlugin,
+    },
+    languageOptions: {
+      parser: babelParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: 2018,
+        sourceType: "module",
+        requireConfigFile: false,
+        babelOptions: {
+          presets: ["babel-preset-gatsby"],
+        },
+      },
+      globals: {
+        window: "readonly",
+        document: "readonly",
+        navigator: "readonly",
+        console: "readonly",
+        process: "readonly",
+        module: "writable",
+        require: "readonly",
+        exports: "writable",
+        __dirname: "readonly",
+        __filename: "readonly",
+        define: "readonly",
+        setTimeout: "readonly",
+        setInterval: "readonly",
+        clearTimeout: "readonly",
+        clearInterval: "readonly",
+      },
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...reactPlugin.configs.recommended.rules,
+      "array-bracket-spacing": ["error", "never"],
+      "comma-style": ["error"],
+      "arrow-spacing": [
+        "error",
+        {
+          after: true,
+          before: true,
+        },
+      ],
+      "block-scoped-var": "error",
+      "block-spacing": "error",
+      "brace-style": ["error", "1tbs"],
+      "jsx-quotes": ["error", "prefer-double"],
+      "keyword-spacing": "error",
+      "key-spacing": [
+        "error",
+        {
+          beforeColon: false,
+          afterColon: true,
+        },
+      ],
+      "no-unused-vars": [
+        "warn",
+        {
+          varsIgnorePattern: "React",
+        },
+      ],
+      "no-trailing-spaces": "error",
+      "object-curly-spacing": ["error", "always"],
+      "react/display-name": 0,
+      "react/prop-types": 0,
+      "react/no-unescaped-entities": [0],
+      "react/jsx-no-duplicate-props": [0],
+      indent: [
+        "error",
+        2,
+        {
+          FunctionExpression: { parameters: "first" },
+          FunctionDeclaration: { parameters: "first" },
+          MemberExpression: 1,
+          SwitchCase: 1,
+          outerIIFEBody: 0,
+          VariableDeclarator: { var: 2, let: 2, const: 3 },
+          ignoredNodes: ["TemplateLiteral"],
+        },
+      ],
+      "linebreak-style": ["error", "unix"],
+      quotes: ["error", "double"],
+      semi: ["error", "always"],
+      strict: 0,
+      "valid-typeof": 0,
+      "space-unary-ops": [
+        1,
+        {
+          words: true,
+          nonwords: false,
+        },
+      ],
+      "space-infix-ops": ["error"],
+    },
+  },
+];

site/package.json

@@ -15,15 +15,17 @@
     "clean": "gatsby clean",
     "lint": "eslint --fix .",
     "checklint": "eslint .",
-    "pretest": "eslint --ignore-path .gitignore ."
+    "pretest": "eslint ."
   },
   "dependencies": {
+    "@eslint/js": "^9.0.0",
     "@mui/icons-material": "^5.15.14",
     "@sistent/sistent": "^0.15.12",
     "@svgdotjs/svg.draw.js": "^3.0.2",
     "@svgdotjs/svg.js": "^3.2.4",
     "babel-plugin-styled-components": "^2.1.4",
-    "eslint": "^7.32.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react": "^7.37.5",
     "gatsby": "^5.15.0",
     "gatsby-plugin-manifest": "^5.15.0",
     "gatsby-plugin-styled-components": "^6.14.0",

site/src/components/Navigation/index.js

@@ -9,7 +9,7 @@ import CloudIcon from "./CloudIcon";
 import KanvasIcon from "./KanvasIcon";
 import LogoutIcon from "./LogoutIcon";
 
-function Navigation({ theme, toggleTheme, showSignUpButton }) {
+function Navigation({ theme, toggleTheme }) {
   const [userData, setUserData] = useState(null);
   const [openNav, setOpenNav] = useState(false);
   const Logo = theme === "light" ? mesheryLogo : mesheryLogoLight;

site/src/components/Toggle.js

@@ -5,7 +5,7 @@ const toggleStyle = {
   cursor: "pointer",
 };
 
-export const Toggle = ({ theme, toggleTheme, height, width }) => {
+export const Toggle = ({ theme, toggleTheme }) => {
   return (
     <div className="themeToggle" onClick={toggleTheme} style={toggleStyle}>
       {theme === "dark" ? (