Upgrade frontend dependencies (#3970)

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>

web/eslint.config.js

@@ -3,8 +3,8 @@
 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";
+import tseslint from 'typescript-eslint';
 
 const config = [
   js.configs.recommended,
@@ -20,6 +20,7 @@ const config = [
     },
     ignores: ['analytics.ts', 'jsonschema.ts'],
     rules: {
+      '@typescript-eslint/no-require-imports': 'error',
       'simple-import-sort/imports': 'error',
       'simple-import-sort/exports': 'error',
     },

web/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "dependencies": {
     "@analytics/google-analytics-v3": "^0.6.1",
-    "analytics": "^0.8.13",
+    "analytics": "^0.8.14",
     "apexcharts": "3.49.0",
     "bootstrap": "^5.3.3",
     "classnames": "^2.5.1",
@@ -25,27 +25,27 @@
     "react-diff-view": "3.0.2",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.0",
-    "react-image-crop": "^11.0.5",
+    "react-image-crop": "^11.0.6",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.24.0",
+    "react-router-dom": "^6.26.0",
     "react-syntax-highlighter": "^15.5.0",
     "regexify-string": "^1.0.17",
     "rehype-github-alerts": "^3.0.0",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.2",
     "remark-strip-html": "^1.0.2",
     "remark-unlink": "^4.0.1",
-    "semver": "^7.6.0",
+    "semver": "^7.6.3",
     "tinycolor2": "^1.6.0",
     "ua-parser-js": "^1.0.38",
     "unified": "^10.1.2",
     "yaml": "^2.4.5"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@eslint/js": "^9.5.0",
-    "@testing-library/dom": "^10.2.0",
-    "@testing-library/jest-dom": "^6.4.6",
+    "@eslint/js": "^9.8.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/react-hooks": "^8.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -54,27 +54,27 @@
     "@types/jest": "^29.5.12",
     "@types/json-schema": "^7.0.14",
     "@types/json-schema-merge-allof": "^0.6.5",
-    "@types/lodash": "^4.17.5",
-    "@types/node": "^20.14.8",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^22.1.0",
     "@types/react": "^18.3.3",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/semver": "^7.5.8",
-    "eslint": "^9.5.0",
+    "eslint": "^9.8.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
-    "globals": "^15.6.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.9.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-mock": "^29.7.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react-scripts": "^5.0.1",
-    "sass": "^1.77.6",
+    "sass": "^1.77.8",
     "shx": "^0.3.4",
-    "typescript": "^5.5.2",
-    "typescript-eslint": "^7.13.1"
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.0.1"
   },
   "proxy": "http://localhost:8000",
   "scripts": {
@@ -88,6 +88,7 @@
     "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}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "isready": "yarn format && yarn lint && yarn test --watchAll=false --passWithNoTests --verbose && yarn build"
   },
   "browser": {

web/src/api/index.test.tsx

@@ -37,7 +37,7 @@ enableFetchMocks();
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const getData = (fixtureId: string): any => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any
   return require(`./__fixtures__/index/${fixtureId}.json`) as any;
 };
 

web/src/jsonschema.ts

@@ -42,6 +42,7 @@ export interface JSONSchema4Object {
 
 // Workaround for infinite type recursion
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface JSONSchema4Array extends Array<JSONSchema4Type> {}
 
 /**
@@ -278,6 +279,7 @@ export interface JSONSchema6Object {
 
 // Workaround for infinite type recursion
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface JSONSchema6Array extends Array<JSONSchema6Type> {}
 
 /**
@@ -611,6 +613,7 @@ export interface JSONSchema7Object {
 
 // Workaround for infinite type recursion
 // https://github.com/Microsoft/TypeScript/issues/3496#issuecomment-128553540
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface JSONSchema7Array extends Array<JSONSchema7Type> {}
 
 /**

web/src/layout/common/ContentDefaultModal.test.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { ContentDefaultModalKind } from '../../types';
 import ContentDefaultModal from './ContentDefaultModal';
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const isVisibleItemInContainer = require('../../utils/isVisibleItemInContainer');
 
 jest.mock('../../utils/isVisibleItemInContainer', () => jest.fn());

web/src/layout/common/OrganizationInfo.test.tsx

@@ -23,7 +23,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 const getMockOrganization = (fixtureId: string): Organization => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/OrganizationInfo/${fixtureId}.json`) as Organization;
 };
 

web/src/layout/common/PackageCard.test.tsx

@@ -9,7 +9,7 @@ import PackageCard from './PackageCard';
 jest.mock('../../utils/calculateDiffInYears');
 
 const getMockPackage = (fixtureId: string): Package => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/PackageCard/${fixtureId}.json`) as Package;
 };
 

web/src/layout/common/SearchBar.test.tsx

@@ -17,7 +17,7 @@ jest.mock('react-router-dom', () => ({
 }));
 
 const getMockSearch = (fixtureId: string): SearchResults => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/SearchBar/${fixtureId}.json`) as SearchResults;
 };
 

web/src/layout/common/SearchPackages.test.tsx

@@ -10,7 +10,7 @@ jest.mock('../../api');
 jest.mock('../../utils/alertDispatcher');
 
 const getMockSearch = (fixtureId: string): SearchResults => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/SearchPackages/${fixtureId}.json`) as SearchResults;
 };
 

web/src/layout/common/SearchRepositories.test.tsx

@@ -10,6 +10,7 @@ jest.mock('../../api');
 jest.mock('../../utils/alertDispatcher');
 
 const getMockSearch = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/SearchRepositories/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/UserContext.test.tsx

@@ -9,6 +9,7 @@ import UserContext from './UserContext';
 jest.mock('../../api');
 
 const getMockOrgs = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/UserContext/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/members/index.test.tsx

@@ -16,6 +16,7 @@ jest.mock('../../../utils/authorizer', () => ({
 }));
 
 const getMembers = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/organizations/index.test.tsx

@@ -10,6 +10,7 @@ import OrganizationsSection from './index';
 jest.mock('../../../api');
 
 const getMockOrganizations = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/repositories/ClaimOwnershipModal.test.tsx

@@ -62,10 +62,12 @@ const mockWithSelectedOrgCtx = {
 };
 
 const getMockOrganizations = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/ClaimOwnershipModal/${fixtureId}org.json`);
 };
 
 const getMockRepositories = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/ClaimOwnershipModal/${fixtureId}repo.json`);
 };
 

web/src/layout/controlPanel/repositories/TransferModal.test.tsx

@@ -69,6 +69,7 @@ const mockWithSelectedOrgCtx = {
 };
 
 const getMockOrganizations = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/TransferModal/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/repositories/index.test.tsx

@@ -11,6 +11,7 @@ jest.mock('../../../api');
 jest.mock('../../../utils/minutesToNearestInterval', () => () => 3);
 
 const getMockRepository = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/settings/orgSettings/authorization/index.test.tsx

@@ -24,7 +24,7 @@ jest.mock('../../../../../utils/authorizer', () => ({
 }));
 
 const getMockAuthz = (fixtureId: string): OrganizationPolicy => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`) as OrganizationPolicy;
 };
 

web/src/layout/controlPanel/settings/orgSettings/profile/UpdateOrg.test.tsx

@@ -5,7 +5,7 @@ import UpdateOrg from './UpdateOrg';
 jest.mock('../../../../../api');
 
 const getMockOrganization = (fixtureId: string): Organization => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/UpdateOrg/${fixtureId}.json`) as Organization;
 };
 

web/src/layout/controlPanel/settings/orgSettings/profile/index.test.tsx

@@ -9,7 +9,7 @@ import ProfileOrgSection from './index';
 jest.mock('../../../../../api');
 
 const getMockOrganization = (fixtureId: string): Organization => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`) as Organization;
 };
 

web/src/layout/controlPanel/settings/userSettings/apiKeys/index.test.tsx

@@ -13,6 +13,7 @@ jest.mock('moment', () => ({
 }));
 
 const getMockAPIKeys = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/settings/userSettings/profile/index.test.tsx

@@ -9,7 +9,7 @@ import UserSettings from './index';
 jest.mock('../../../../../api');
 
 const getMockProfile = (fixtureId: string): Profile => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`) as Profile;
 };
 

web/src/layout/controlPanel/settings/userSettings/subscriptions/packages/Modal.test.tsx

@@ -12,12 +12,12 @@ const mockOnSuccess = jest.fn();
 const mockOnClose = jest.fn();
 
 const getMockSubscriptions = (fixtureId: string): Package[] => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/Modal/${fixtureId}.json`) as Package[];
 };
 
 const getMockSearch = (fixtureId: string): SearchResults => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/Modal/${fixtureId}s.json`) as SearchResults;
 };
 

web/src/layout/controlPanel/settings/userSettings/subscriptions/packages/PackageCard.test.tsx

@@ -6,7 +6,7 @@ import { Package } from '../../../../../../types';
 import PackageCard from './PackageCard';
 
 const getMockPackage = (fixtureId: string): Package => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/PackageCard/${fixtureId}.json`) as Package;
 };
 

web/src/layout/controlPanel/settings/userSettings/subscriptions/packages/index.test.tsx

@@ -11,6 +11,7 @@ jest.mock('../../../../../../api');
 jest.mock('../../../../../../utils/alertDispatcher');
 
 const getMockSubscriptions = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/settings/userSettings/subscriptions/repositories/Modal.test.tsx

@@ -34,10 +34,12 @@ const mockOptOutList: OptOutItem[] = [
 ];
 
 const getMockOrgs = () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require('./__fixtures__/Modal/orgs.json');
 };
 
 const getMockRepos = (repoName?: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/Modal/${repoName || 'user'}.json`);
 };
 

web/src/layout/controlPanel/settings/userSettings/subscriptions/repositories/index.test.tsx

@@ -16,6 +16,7 @@ const scrollIntoViewMock = jest.fn();
 window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 
 const getMockOptOut = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`);
 };
 

web/src/layout/controlPanel/settings/webhooks/Card.test.tsx

@@ -12,7 +12,7 @@ jest.mock('../../../../api');
 jest.mock('../../../../utils/alertDispatcher');
 
 const getmockWebhook = (fixtureId: string): Webhook => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/Card/${fixtureId}.json`) as Webhook;
 };
 

web/src/layout/controlPanel/settings/webhooks/Form.test.tsx

@@ -12,12 +12,12 @@ jest.mock('../../../../api');
 jest.mock('../../../common/Alert', () => (props: any) => <div>{props.message}</div>);
 
 const getMockWebhook = (fixtureId: string): Webhook => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/Form/${fixtureId}.json`) as Webhook;
 };
 
 const getMockSearch = (fixtureId: string): SearchResults => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/Form/${fixtureId}s.json`) as SearchResults;
 };
 

web/src/layout/controlPanel/settings/webhooks/LastNotificationsModal.test.tsx

@@ -6,7 +6,7 @@ import LastNotificationsModal from './LastNotificationsModal';
 jest.mock('../../../../api');
 
 const getMockNotifications = (fixtureId: string): WebhookNotification[] => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/LastNotificationsModal/${fixtureId}.json`) as WebhookNotification[];
 };
 

web/src/layout/controlPanel/settings/webhooks/index.test.tsx

@@ -10,6 +10,7 @@ import WebhooksSection from './index';
 jest.mock('../../../../api');
 
 const getMockWebhooks = (fixtureId: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/index/${fixtureId}.json`);
 };
 

web/src/layout/home/RandomPackages.test.tsx

@@ -8,7 +8,7 @@ import RandomPackages from './RandomPackages';
 jest.mock('../../api');
 
 const getMockRandomPackages = (fixtureId: string): Package[] => {
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(`./__fixtures__/RandomPackages/${fixtureId}.json`) as Package[];
 };