Bumped vite, eslint, typescript, prettier and related plugins versions to latest (#623)

* Bumped vite, eslint, typescript, prettier and related plugins

* Fixed unused arg

* Fixed prettier warnings

frontend/.eslintrc.cjs

@@ -1,44 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: ["enpitech", "plugin:@typescript-eslint/recommended"],
-  globals: {
-    heap: "writable",
-    DD_RUM: "writable",
-  },
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [".eslintrc.{js,cjs}"],
-      parserOptions: {
-        sourceType: "script",
-      },
-    },
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  plugins: ["@typescript-eslint", "react"],
-  rules: {
-    // please don't make an error occur here we use console.error
-    "no-console": ["error", { allow: ["error"] }],
-    "no-alert": "error",
-    "no-debugger": "error",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { vars: "all", args: "after-used", ignoreRestSiblings: true },
-    ],
-    "react/react-in-jsx-scope": "off", // Vite does not require you to import React into each component file
-    "linebreak-style": ["error", "unix"],
-    quotes: ["error", "double"],
-    semi: ["error", "always"],
-    "@typescript-eslint/no-explicit-any": "warn",
-  },
-};

frontend/eslint.config.cjs

@@ -0,0 +1,85 @@
+const {
+    defineConfig,
+} = require("eslint/config");
+
+const globals = require("globals");
+const tsParser = require("@typescript-eslint/parser");
+const typescriptEslint = require("@typescript-eslint/eslint-plugin");
+const react = require("eslint-plugin-react");
+const js = require("@eslint/js");
+
+const {
+    FlatCompat,
+} = require("@eslint/eslintrc");
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+module.exports = defineConfig([{
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            heap: "writable",
+            DD_RUM: "writable",
+        },
+
+        parser: tsParser,
+        ecmaVersion: "latest",
+        sourceType: "module",
+        parserOptions: {
+            ecmaVersion: "latest",
+            sourceType: "module",
+            ecmaFeatures: { jsx: true },
+            project: "./tsconfig.json",
+        },
+    },
+
+    extends: compat.extends("enpitech", "plugin:@typescript-eslint/recommended"),
+
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+        react,
+    },
+
+    settings: {
+        react: {
+            version: "detect"
+        },
+    },
+
+    rules: {
+        "no-console": ["error", {
+            allow: ["error"],
+        }],
+
+        "no-alert": "error",
+        "no-debugger": "error",
+        "@typescript-eslint/ban-ts-comment": "off",
+
+        "@typescript-eslint/no-unused-vars": ["error", {
+            vars: "all",
+            args: "after-used",
+            ignoreRestSiblings: true,
+        }],
+
+        "react/react-in-jsx-scope": "off",
+        "linebreak-style": ["error", "unix"],
+        quotes: ["error", "double"],
+        semi: ["error", "always"],
+        "@typescript-eslint/no-explicit-any": "warn",
+    },
+}, {
+    languageOptions: {
+        globals: {
+            ...globals.node,
+        },
+
+        sourceType: "script",
+        parserOptions: {},
+    },
+
+    files: ["**/.eslintrc.{js,cjs}"],
+}]);

frontend/package.json

@@ -10,7 +10,6 @@
     "@types/marked": "^5.0.0",
     "compare-versions": "^6.0.0-rc.2",
     "diff2html": "^3.4.46",
-    "eslint-config-enpitech": "^1.0.9",
     "flowbite": "^1.6.6",
     "flowbite-react": "^0.4.9",
     "highlight.js": "^11.8.0",
@@ -26,11 +25,12 @@
     "react-router-dom": "^6.9.0",
     "react-select": "^5.7.4",
     "swagger-ui-react": "^5.1.1",
-    "uuid": "^9.0.1",
+    "uuid": "^9.0.1"
-    "vite-plugin-static-copy": "^2.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.39.1",
     "@storybook/addon-actions": "^7.0.24",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^7.0.24",
@@ -45,24 +45,27 @@
     "@types/react-dom": "^18.0.10",
     "@types/swagger-ui-react": "^4.18.0",
     "@types/uuid": "^9.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.47.0",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@typescript-eslint/parser": "^8.47.0",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^5.1.1",
     "autoprefixer": "^10.4.14",
     "cypress": "^13.3.0",
-    "eslint": "^8.46.0",
+    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-enpitech": "^1.0.17",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^10.0.8",
+    "globals": "^16.5.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.24",
-    "prettier": "2.8.4",
+    "prettier": "^3.6.2",
     "react-icons": "^4.8.0",
     "storybook": "9.1.13",
     "tailwindcss": "^3.3.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.9.3",
-    "vite": "^7.1.11",
+    "vite": "^7.2.4",
-    "vite-plugin-html-config": "^1.0.11"
+    "vite-plugin-html-config": "^2.0.2",
+    "vite-plugin-static-copy": "^3.1.4"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

frontend/src/API/apiService.ts

@@ -143,7 +143,7 @@ class ApiService {
   }: {
     queryKey: [
       string,
-      { namespace: string; chart: { name: string }; version: number }
+      { namespace: string; chart: { name: string }; version: number },
     ];
   }) => {
     const [, params] = queryKey;

frontend/src/components/Badge.stories.tsx

@@ -14,7 +14,7 @@
  * @see https://storybook.js.org/docs/react/writing-stories/introduction
  */
 
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import Badge from "./Badge";
 
 // We set the metadata for the story.

frontend/src/components/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import Button from "./Button";
 
 const meta = {

frontend/src/components/ClustersList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import ClustersList from "./ClustersList";
 
 const meta = {

frontend/src/components/InstalledPackages/HealthStatus.tsx

@@ -11,10 +11,9 @@ const HealthStatus = ({ statusData }: Props) => {
     return item.status?.conditions
       ?.filter((cond) => cond.type === HD_RESOURCE_CONDITION_TYPE)
       .map((cond) => {
-        const stableKey =
+        const stableKey = item.metadata?.uid
-          item.metadata?.uid
+          ? `${item.metadata.uid}-${item.metadata.namespace ?? "default"}`
-            ? `${item.metadata.uid}-${item.metadata.namespace ?? "default"}`
+          : `${item.kind}-${item.metadata?.namespace ?? "default"}-${item.metadata?.name}`;
-            : `${item.kind}-${item.metadata?.namespace ?? "default"}-${item.metadata?.name}`;
 
         return (
           <Tooltip
@@ -26,20 +25,20 @@ const HealthStatus = ({ statusData }: Props) => {
                 cond.status === "Healthy"
                   ? "bg-success"
                   : cond.status === "Progressing"
-                  ? "bg-warning"
+                    ? "bg-warning"
-                  : "bg-danger"
+                    : "bg-danger"
               } w-2.5 h-2.5 rounded-sm`}
             ></span>
           </Tooltip>
         );
       });
   });
-  
+
   if (statuses.length === 0) {
     return <div>No health statuses available</div>;
   }
-  
+
   return <div className="flex flex-wrap gap-1">{statuses}</div>;
 };
 
-export default HealthStatus;
+export default HealthStatus;

frontend/src/components/InstalledPackages/InstalledPackageCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import InstalledPackageCard from "./InstalledPackageCard";
 
 const meta = {

frontend/src/components/InstalledPackages/InstalledPackagesHeader.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import InstalledPackagesHeader from "./InstalledPackagesHeader";
 
 const meta = {

frontend/src/components/InstalledPackages/InstalledPackagesList.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import InstalledPackagesList from "./InstalledPackagesList";
 
 const meta = {

frontend/src/components/SelectMenu.stories.tsx

@@ -6,7 +6,7 @@
  * The default story renders the component with the default props.
  */
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { action } from "@storybook/addon-actions";
 import SelectMenu, { SelectMenuItem } from "./SelectMenu";
 

frontend/src/components/ShutDownButton.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-vite";
 import ShutDownButton from "./ShutDownButton";
 
 const meta = {

frontend/src/components/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import Tabs from "./Tabs";
 
 const meta = {

frontend/src/components/TabsBar.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import TabsBar from "./TabsBar";
 
 const meta = {

frontend/src/components/TextInput.stories.tsx

@@ -4,7 +4,7 @@
  * the first story simply renders the component with the default props.
  */
 
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import TextInput from "./TextInput";
 
 const meta = {

frontend/src/components/Troubleshoot.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react-vite";
 import { Troubleshoot } from "./Troubleshoot";
 
 const meta = {

frontend/src/components/common/Button/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 
 import { Button } from "./Button";
 

frontend/src/components/common/DropDown.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import { action } from "@storybook/addon-actions";
 import DropDown from "./DropDown";
 import { BsSlack, BsGithub } from "react-icons/bs";

frontend/src/components/common/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 
 import { Header } from "./Header";
 

frontend/src/components/common/Page/Page.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { within, userEvent } from "@storybook/testing-library";
 import { Page } from "./Page";
 

frontend/src/components/common/StatusLabel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import StatusLabel, { DeploymentStatus } from "./StatusLabel";
 
 const meta = {

frontend/src/components/modal/AddRepositoryModal.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-vite";
 import AddRepositoryModal from "./AddRepositoryModal";
 
 const meta = {

frontend/src/components/modal/ErrorModal.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import ErrorModal from "./ErrorModal";
 
 const meta = {

frontend/src/components/modal/Modal.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import { StoryObj, StoryFn, Meta } from "@storybook/react";
+import { StoryObj, StoryFn, Meta } from "@storybook/react-vite";
 import Modal, { ModalAction, ModalButtonStyle } from "./Modal";
 
 const meta = {

frontend/src/components/repository/ChartViewer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react";
+import { Meta } from "@storybook/react-vite";
 import ChartViewer from "./ChartViewer";
 
 //👇 This default export determines where your story goes in the story list

frontend/src/components/repository/RepositoriesList.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-vite";
 import RepositoriesList from "./RepositoriesList";
 
 const meta = {
@@ -17,7 +17,6 @@ const Template: StoryFn<typeof RepositoriesList> = () => (
   <RepositoriesList
     selectedRepository={undefined}
     // in this case we allow Unexpected empty method
-    //eslint-disable-next-line @typescript-eslint/no-empty-function
     onRepositoryChanged={() => {}}
     repositories={[]}
   />

frontend/src/components/repository/RepositoryViewer.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-vite";
 import RepositoryViewer from "./RepositoryViewer";
 
 const meta = {

frontend/src/context/ErrorModalContext.tsx

@@ -12,6 +12,5 @@ export const ErrorModalContext = createContext<{
 }>({
   shouldShowErrorModal: undefined,
   // in this case we allow Unexpected empty method
-  //eslint-disable-next-line @typescript-eslint/no-empty-function
+  setShowErrorModal: () => {},
-  setShowErrorModal: (toggle?: ErrorAlert) => {},
 });

frontend/src/data/types.ts

@@ -66,7 +66,7 @@ export type ReleaseHealthStatus = {
         lastProbeTime: string;
         lastTransitionTime?: string;
         reason: string;
-      }
+      },
     ];
   };
 };