Upgrade frontend dependencies (#196)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/eslint.config.js

@@ -0,0 +1,38 @@
+// eslint.config.js
+
+import js from '@eslint/js';
+import reactHooks from 'eslint-plugin-react-hooks';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import tseslint from 'typescript-eslint';
+import globals from "globals";
+
+const config = [
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    linterOptions: {
+      reportUnusedDisableDirectives: 'error',
+    },
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      'react-hooks': reactHooks,
+      'simple-import-sort': simpleImportSort,
+    },
+    rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+    },
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+];
+
+export default config;

web/package.json

@@ -3,52 +3,58 @@
   "version": "0.0.1",
   "description": "CLOWarden",
   "license": "Apache-2.0",
+  "type": "module",
   "dependencies": {
     "classnames": "^2.5.1",
-    "clo-ui": "https://github.com/cncf/clo-ui.git#0.2.3",
+    "clo-ui": "https://github.com/cncf/clo-ui.git#v0.2.4",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
-    "react-router-dom": "^6.22.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.0",
+    "react-router-dom": "^6.23.1",
     "source-map-explorer": "^2.5.3"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@eslint/js": "^9.2.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^20.11.20",
-    "@types/react": "^18.2.62",
-    "@types/react-dom": "^18.2.19",
+    "@types/lodash": "^4.17.1",
+    "@types/node": "^20.12.10",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "eslint": "^9.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "postcss": "^8.4.35",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "globals": "^15.2.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "react-scripts": "5.0.1",
-    "sass": "^1.71.1",
+    "sass": "^1.77.1",
     "shx": "^0.3.4",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.8.0"
   },
   "resolutions": {
-    "react-scripts/**/core-js-pure": "3.36.0"
+    "react-scripts/**/core-js-pure": "3.37.0"
   },
   "scripts": {
     "copy:static": "shx rm -rf src/static && shx mkdir src/static && shx cp -r public/static/* src",
     "copy:root-index": "cp build/audit/root_index.html build/index.html && shx rm build/audit/root_index.html",
     "copy:images": "shx mkdir -p build/media && cp -r build/audit/media/*.png build/media",
     "copy:manifest": "mv build/audit/manifest.json build",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "yarn copy:static && DANGEROUSLY_DISABLE_HOST_CHECK=true react-scripts start",
-    "build": "yarn copy:static && BUILD_PATH=./build/audit PUBLIC_URL=/audit INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=0 react-scripts build && shx cp -r build/audit/static/* build/audit && shx rm -rf build/audit/static && yarn copy:root-index && yarn copy:images && yarn copy:manifest",
+    "start": "yarn copy:static && DANGEROUSLY_DISABLE_HOST_CHECK=true DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "yarn copy:static && INLINE_RUNTIME_CHUNK=false IMAGE_INLINE_SIZE_LIMIT=0 DISABLE_ESLINT_PLUGIN=true react-scripts build && shx cp -r build/static/* build && shx rm -rf build/static",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix",
+    "lint": "eslint src --max-warnings 0",
+    "lint:fix": "eslint src --max-warnings 0 --fix",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },

web/src/api/index.ts

@@ -10,7 +10,7 @@ interface FetchOptions {
   headers?: {
     [key: string]: string;
   };
-  body?: any;
+  body?: string;
 }
 
 interface APIFetchProps {
@@ -25,9 +25,11 @@ class API_CLASS {
     pagination: 'Pagination-Total-Count',
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private getHeadersValue(res: any, params?: string[]): any {
     if (!isUndefined(params) && params.length > 0) {
-      let headers: any = {};
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const headers: any = {};
       params.forEach((param: string) => {
         if (res.headers.has(param)) {
           headers[param] = res.headers.get(param);
@@ -38,8 +40,10 @@ class API_CLASS {
     return null;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private async processFetchOptions(opts?: FetchOptions): Promise<FetchOptions | any> {
-    let options: FetchOptions | any = opts || {};
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options: FetchOptions | any = opts || {};
     if (opts && ['DELETE', 'POST', 'PUT'].includes(opts.method)) {
       return {
         ...options,
@@ -51,13 +55,14 @@ class API_CLASS {
     return options;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private async handleErrors(res: any) {
     if (!res.ok) {
       let error: Error;
       switch (res.status) {
         default:
           try {
-            let text = await res.json();
+            const text = await res.json();
             error = {
               kind: ErrorKind.Other,
               message: text.message !== '' ? text.message : undefined,
@@ -73,31 +78,35 @@ class API_CLASS {
     return res;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private async handleContent(res: any, headers?: string[]) {
-    let response = res;
+    const response = res;
+    let content;
+    let tmpHeaders;
 
     switch (response.headers.get('Content-Type')) {
       case 'text/plain; charset=utf-8':
       case 'csv':
-        const text = await response.text();
-        return text;
+        content = await response.text();
+        return content;
       case 'application/json':
-        let json = await response.json();
-        const tmpHeaders = this.getHeadersValue(res, headers);
+        content = await response.json();
+        tmpHeaders = this.getHeadersValue(res, headers);
         if (!isNull(tmpHeaders)) {
-          if (isArray(json)) {
-            json = { items: json };
+          if (isArray(content)) {
+            content = { items: content };
           }
-          json = { ...json, ...tmpHeaders };
+          content = { ...content, ...tmpHeaders };
         }
-        return json;
+        return content;
       default:
         return response;
     }
   }
 
   private async apiFetch(props: APIFetchProps) {
-    let options: FetchOptions | any = await this.processFetchOptions(props.opts);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const options: FetchOptions | any = await this.processFetchOptions(props.opts);
 
     return fetch(props.url, options)
       .then(this.handleErrors)

web/src/context/AppContextProvider.tsx

@@ -23,6 +23,7 @@ type Action =
   | { type: 'updateSort'; by: SortBy; direction: SortDirection };
 export const AppContext = createContext<{
   ctx: AppState;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dispatch: Dispatch<any>;
 }>({
   ctx: initialState,
@@ -50,9 +51,10 @@ export function updateActiveStyleSheet(current: string) {
 
 export function appReducer(state: AppState, action: Action) {
   let prefs;
+  let effective;
   switch (action.type) {
     case 'updateTheme':
-      const effective = action.theme === 'automatic' ? detectActiveThemeMode() : action.theme;
+      effective = action.theme === 'automatic' ? detectActiveThemeMode() : action.theme;
       prefs = {
         ...state.prefs,
         theme: {
@@ -119,7 +121,7 @@ function AppContextProvider(props: Props) {
         : activeProfilePrefs.theme.configured || activeProfilePrefs.theme.effective; // Use effective theme if configured is undefined
     updateActiveStyleSheet(theme);
     setActiveInitialTheme(theme);
-  }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, []);
 
   useSystemThemeMode(ctx.prefs.theme.configured === 'automatic', dispatch);
 

web/src/layout/audit/filters/SelectedFilters.tsx

@@ -26,7 +26,7 @@ const SelectedFilters = (props: Props) => {
   };
 
   const getTimeRangeName = (timeRange: string): string | null => {
-    let selectedTimeRange = DATE_RANGE.find((d: Option) => d.value === timeRange);
+    const selectedTimeRange = DATE_RANGE.find((d: Option) => d.value === timeRange);
     if (selectedTimeRange) {
       return selectedTimeRange.label;
     }

web/src/layout/audit/index.tsx

@@ -23,7 +23,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import API from '../../api';
 import { AppContext, updateSort } from '../../context/AppContextProvider';
 import { PAGINATION_LIMIT, SORT_OPTIONS } from '../../data';
-import { Change, ChangeKind, SearchFiltersURL, SortBy, SortDirection } from '../../types';
+import { Change, ChangeKind, SearchFiltersURL, SortBy, SortDirection, SortOption } from '../../types';
 import buildSearchParams from '../../utils/buildSearchParams';
 import prepareQueryString from '../../utils/prepareQueryString';
 import styles from './Audit.module.css';
@@ -107,7 +107,7 @@ const Audit = () => {
     setSelectedOrg(org);
   };
 
-  const updateCurrentPage = (searchChanges: any) => {
+  const updateCurrentPage = (searchChanges: object) => {
     navigate({
       pathname: '/audit/',
       search: prepareQueryString({
@@ -195,7 +195,7 @@ const Audit = () => {
     if (selectedOrg) {
       searchProjects();
     }
-  }, [searchParams, selectedOrg, sort.by, sort.direction]); /* eslint-disable-line react-hooks/exhaustive-deps */
+  }, [searchParams, selectedOrg, sort.by, sort.direction]);
 
   useEffect(() => {
     if (!isUndefined(point) && !['xl', 'xxl'].includes(point)) {
@@ -231,7 +231,6 @@ const Audit = () => {
     }
 
     getOrganizations();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -314,7 +313,7 @@ const Audit = () => {
                     <span className="ps-1"> changes </span>
                   </div>
                   <SortOptions
-                    options={SORT_OPTIONS as any[]}
+                    options={SORT_OPTIONS as SortOption[]}
                     by={sort.by}
                     direction={sort.direction}
                     width={180}

web/src/types.ts

@@ -96,6 +96,7 @@ export interface Change {
   service: string;
   kind: string;
   extra: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [key: string]: any;
   };
   applied_at: number;

web/src/utils/buildSearchParams.ts

@@ -15,7 +15,7 @@ const WHITELISTED_FILTER_KEYS = [
 ];
 
 const buildSearchParams = (p: URLSearchParams): SearchFiltersURL => {
-  let filters: F = {};
+  const filters: F = {};
 
   p.forEach((value, key) => {
     if (WHITELISTED_FILTER_KEYS.includes(key as FilterKind)) {

web/src/utils/calculateTimeRange.ts

@@ -6,8 +6,8 @@ export interface TimeRangeData {
 }
 
 const calculateTimeRange = (timeRange: string): TimeRangeData => {
-  let amount = timeRange.substring(0, timeRange.length - 1);
-  let unit = timeRange.slice(-1);
+  const amount = timeRange.substring(0, timeRange.length - 1);
+  const unit = timeRange.slice(-1);
 
   return {
     from: moment()

web/src/utils/localStoragePreferences.ts

@@ -87,7 +87,7 @@ export class LocalStoragePreferences {
   }
 
   public setPrefs(prefs: Prefs) {
-    let preferences = { ...this.savedPreferences, guest: prefs };
+    const preferences = { ...this.savedPreferences, guest: prefs };
     this.savedPreferences = preferences;
 
     try {
@@ -98,7 +98,7 @@ export class LocalStoragePreferences {
   }
 
   public getPrefs(): Prefs {
-    let prefs: Prefs = {
+    const prefs: Prefs = {
       ...DEFAULT_PREFS,
       ...this.savedPreferences.guest,
     };