Eslint v8.* to v9.* flat-configuration update with depending packages (#2561)

Src/WitsmlExplorer.Frontend/components/ContentViews/table/ContentTable.tsx

@@ -1,16 +1,16 @@
 import { TableBody, TableHead } from "@mui/material";
 import {
   ColumnSizingState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
   Header,
   Row,
   RowData,
   RowSelectionState,
   SortDirection,
   Table,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";

Src/WitsmlExplorer.Frontend/components/ContextMenus/UseClipboardComponentReferences.ts

@@ -15,6 +15,7 @@ const useClipboardComponentReferences: () => ComponentReferences | null =
             parseStringToComponentReferences(clipboardText);
           setReferences(componentReferences);
         } catch (e) {
+          console.error(e);
           //Not a valid object on the clipboard? That is fine, we won't use it.
         }
       };
@@ -40,7 +41,7 @@ export function parseStringToComponentReferences(
   try {
     jsonObject = JSON.parse(input);
   } catch (error) {
-    throw new Error("Invalid input given.");
+    throw new Error("Invalid input given.", error);
   }
   verifyRequiredProperties(jsonObject);
   return jsonObject;

Src/WitsmlExplorer.Frontend/components/ContextMenus/UseClipboardReferences.ts

@@ -13,6 +13,7 @@ export const useClipboardReferences = (
       const objectReferences = parseStringToReferences(clipboardText);
       setReferences(objectReferences);
     } catch (e) {
+      console.error(e);
       //Not a valid object on the clipboard? That is fine, we won't use it.
     }
   };
@@ -46,7 +47,7 @@ export function parseStringToReferences(input: string): ObjectReferences {
   try {
     jsonObject = JSON.parse(input);
   } catch (error) {
-    throw new Error("Invalid input given.");
+    throw new Error("Invalid input given.", error);
   }
   verifyRequiredProperties(jsonObject);
   return jsonObject;

Src/WitsmlExplorer.Frontend/components/DateFormatter.ts

@@ -40,9 +40,11 @@ function formatDateString(
     const offset = getOffsetFromTimeZone(timeZone);
     return formatInTimeZone(parsed, offset, dateTimeFormat);
   } catch (e) {
+    console.error(e);
     return "Invalid date";
   }
 }
+
 export default formatDateString;
 
 export function getOffsetFromTimeZone(timeZone: TimeZone): string {

Src/WitsmlExplorer.Frontend/components/Modals/MissingDataAgentModal.tsx

@@ -68,6 +68,7 @@ const MissingDataAgentModal = (
         : [];
       return checks.map((check) => ({ ...check, id: uuid() }));
     } catch (error) {
+      console.error(error);
       return [];
     }
   };

Src/WitsmlExplorer.Frontend/components/Modals/ObjectPickerModal.tsx

@@ -109,6 +109,7 @@ const ObjectPickerModal = ({
         setFetchError(`The target ${objectType} was not found`);
       }
     } catch (e) {
+      console.error(e);
       setFetchError("Failed to fetch");
     } finally {
       setIsLoading(false);

Src/WitsmlExplorer.Frontend/components/Modals/ReportModal.tsx

@@ -27,7 +27,7 @@ import styled from "styled-components";
 import { Colors } from "styles/Colors";
 import ConfirmModal from "./ConfirmModal";
 
-export interface ReportModal {
+export interface ReportModalI {
   report?: BaseReport;
   jobId?: string;
 }
@@ -44,7 +44,7 @@ export interface ReportModal {
  *
  * @returns {React.ReactElement} The rendered ReportModal component.
  */
-export const ReportModal = (props: ReportModal): React.ReactElement => {
+export const ReportModal = (props: ReportModalI): React.ReactElement => {
   const { jobId, report: reportProp } = props;
   const {
     dispatchOperation,

Src/WitsmlExplorer.Frontend/components/RefreshHandler.tsx

@@ -55,7 +55,8 @@ const RefreshHandler = (): React.ReactElement => {
             }
           } catch (error) {
             console.error(
-              `Unable to perform refresh action for action: ${refreshAction.refreshType} and entity: ${refreshAction.entityType}`
+              `Unable to perform refresh action for action: ${refreshAction.refreshType} and entity: ${refreshAction.entityType}`,
+              error
             );
           }
         }

Src/WitsmlExplorer.Frontend/components/Sidebar/SearchFilter.tsx

@@ -10,6 +10,7 @@ import { useConnectedServer } from "contexts/connectedServerContext";
 import {
   FilterContext,
   FilterType,
+  FilterTypes,
   getFilterTypeInformation,
   isObjectFilterType,
   isWellboreFilterType
@@ -23,7 +24,7 @@ import styled, { CSSProp } from "styled-components";
 import { Colors } from "styles/Colors";
 import Icons from "styles/Icons";
 
-const searchOptions = Object.values(FilterType);
+const searchOptions = Object.values(FilterTypes);
 
 const SearchFilter = (): React.ReactElement => {
   const { dispatchOperation } = useOperationState();
@@ -219,9 +220,11 @@ const SearchIconLayout = styled.div`
 
 const SearchBarContainer = styled.div`
   width: 85%;
+
   .small-padding-left {
     padding-left: 4px;
   }
+
   .small-padding-right {
     padding-right: 4px;
   }

Src/WitsmlExplorer.Frontend/contexts/filter.tsx

@@ -113,7 +113,7 @@ export type FilterType =
   | WellboreFilterType
   | WellPropertyFilterType
   | ObjectFilterType;
-export const FilterType = {
+export const FilterTypes = {
   ...WellFilterType,
   ...WellboreFilterType,
   ...WellPropertyFilterType,

Src/WitsmlExplorer.Frontend/contexts/queryContext.tsx

@@ -1,14 +1,14 @@
 import {
+  getQueryTemplateWithPreset,
   QueryTemplatePreset,
   ReturnElements,
-  StoreFunction,
-  getQueryTemplateWithPreset
+  StoreFunction
 } from "components/ContentViews/QueryViewUtils";
 import { useLocalStorageState } from "hooks/useLocalStorageState";
 import React, { Dispatch, useEffect } from "react";
 import {
-  STORAGE_QUERYVIEW_DATA,
-  getLocalStorageItem
+  getLocalStorageItem,
+  STORAGE_QUERYVIEW_DATA
 } from "tools/localStorageHelpers";
 import { v4 as uuid } from "uuid";
 
@@ -20,20 +20,21 @@ export interface QueryElement {
   optionsIn: string;
   tabId: string;
 }
+
 export interface QueryState {
   queries: QueryElement[];
   tabIndex: number;
 }
 
 export type DispatchQuery = Dispatch<QueryAction>;
 
-interface QueryContext {
+interface QueryContextI {
   queryState: QueryState;
   dispatchQuery: DispatchQuery;
 }
 
-export const QueryContext = React.createContext<QueryContext>(
-  {} as QueryContext
+export const QueryContext = React.createContext<QueryContextI>(
+  {} as QueryContextI
 );
 
 const getDefaultQueryElement = (): QueryElement => ({

Src/WitsmlExplorer.Frontend/eslint.config.js

@@ -0,0 +1,70 @@
+import eslint from "@eslint/js";
+import tsEslint from "typescript-eslint";
+import globals from "globals";
+import tsEslintParser from "@typescript-eslint/parser";
+import tsEslintPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import vitestPlugin from "eslint-plugin-vitest";
+import jestPlugin from "eslint-plugin-jest";
+
+export default tsEslint.config(
+  eslint.configs.recommended,
+  ...tsEslint.configs.recommended,
+  {
+    settings: {
+      react: {
+        version: "detect"
+      }
+    },
+
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parser: tsEslintParser,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+        React: "readonly",
+        HeadersInit: "readonly",
+        RequestInit: "readonly",
+        NodeJS: "readonly",
+        JSX: "readonly",
+        vi: "readonly"
+      }
+    },
+    files: ["**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx"],
+    plugins: {
+      "@typescript-eslint": tsEslintPlugin,
+      "react": reactPlugin,
+      "vitest": vitestPlugin,
+      "jest": jestPlugin
+    },
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/explicit-member-accessibility": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-unused-vars": ["error"],
+      "@typescript-eslint/no-unused-expressions": "off",
+      "no-unused-vars": "off", //we want to ignore this and handle unused vars by @typescript-eslint plugin rule
+      "no-console": ["error", { allow: ["warn", "error"] }],
+      "react/prop-types": 1,
+      "no-empty-pattern": "off"
+    }
+  },
+  // standalone global ignores config due to default behaviour of minimal matching strategy
+  {
+    ignores: [
+      "**/*.config.js",
+      "**/*.config.ts",
+      "node_modules",
+      "bin",
+      ".idea",
+      "dist",
+      "out"
+    ]
+  }
+);

Src/WitsmlExplorer.Frontend/package.json

@@ -6,22 +6,19 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test:watch": "vitest watch",
+    "eslint": "eslint . --cache",
+    "eslint:fix": "eslint . --cache --fix"
   },
   "lint-staged": {
     "**/*.{js,ts,tsx}": [
       "eslint --fix",
       "prettier -w"
     ]
   },
-  "eslintIgnore": [
-    "node_modules/",
-    "dist/",
-    "out/"
-  ],
   "dependencies": {
     "@azure/msal-browser": "^2.28.3",
     "@azure/msal-react": "^1.4.7",
@@ -61,6 +58,8 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.11.1",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.4.3",
@@ -73,16 +72,19 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.26",
     "@types/uuidv4": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-jest": "^28.2.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-vitest": "^0.5.4",
+    "globals": "^15.9.0",
     "jsdom": "^24.0.0",
     "lint-staged": "^13.0.3",
     "typescript": "^5.4.3",
+    "typescript-eslint": "^8.8.0",
     "vite": "^5.2.8",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"

Src/WitsmlExplorer.Frontend/services/apiClient.tsx

@@ -1,6 +1,5 @@
 import { Server } from "models/server";
 import { getAccessToken, msalEnabled } from "msal/MsalAuthProvider";
-
 import AuthorizationService, {
   AuthorizationStatus
 } from "services/authorizationService";
@@ -249,6 +248,7 @@ export async function getBaseUrl(): Promise<URL> {
       baseUrl = new URL(`${protocol}://${host}${port}`);
     }
   } catch (e) {
+    console.error(e);
     baseUrl = new URL("http://localhost");
   }
   return baseUrl;