chore: fix dependabot alerts

package.json

@@ -3,26 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@adobe/css-tools": "^4.4.0",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.89",
-    "@mui/material": "^5.16.7",
-    "@mui/styles": "^5.16.7",
-    "@mui/x-date-pickers": "^6.20.2",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^12.1.2",
+    "@adobe/css-tools": "^4.4.1",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/lab": "^6.0.0-beta.18",
+    "@mui/material": "^6.1.10",
+    "@mui/styles": "^6.1.10",
+    "@mui/x-date-pickers": "^7.23.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.7.7",
+    "@types/react": "^18.3.1",
+    "axios": "^1.7.8",
     "downshift": "^6.1.12",
     "export-from-json": "^1.7.4",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
-    "markdown-to-jsx": "^7.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.27.0",
+    "markdown-to-jsx": "^7.6.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.2",
     "react-sticky-el": "^2.1.1",
     "web-vitals": "^2.1.3",
     "xlsx": "^0.18.5"

src/App.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router';
 
 import { isAuthenticated, isApiKeyEnabled } from 'utilities/authUtilities';
 import { AuthWrapper } from 'utilities/AuthWrapper';

src/__tests__/Explore/Explore.test.js

@@ -3,15 +3,15 @@ import userEvent from '@testing-library/user-event';
 import { api } from 'api';
 import Explore from 'components/Explore/Explore';
 import React from 'react';
-import { createSearchParams, MemoryRouter } from 'react-router-dom';
+import { createSearchParams, MemoryRouter } from 'react-router';
 import filterConstants from 'utilities/filterConstants.js';
 import { sortByCriteria } from 'utilities/sortCriteria.js';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 // router mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/Explore/ExplorePage.test.js

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import ExplorePage from 'pages/ExplorePage';
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router';
 
 jest.mock(
   'components/Explore/Explore',

src/__tests__/Header/UserAccountMenu.test.js

@@ -4,8 +4,8 @@ import React from 'react';
 
 const mockIsApiKeyEnabled = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => {}
 }));
 

src/__tests__/HomePage/Home.test.js

@@ -2,14 +2,14 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { api } from 'api';
 import Home from 'components/Home/Home';
 import React from 'react';
-import { createSearchParams } from 'react-router-dom';
+import { createSearchParams } from 'react-router';
 import { sortByCriteria } from 'utilities/sortCriteria';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/HomePage/HomePage.test.js

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import HomePage from 'pages/HomePage';
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router';
 
 jest.mock(
   'components/Home/Home',

src/__tests__/LoginPage/LoginPage.test.js

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import LoginPage from 'pages/LoginPage';
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 it('renders the signin presentation component and signin components if auth enabled', () => {

src/__tests__/LoginPage/SignIn.test.js

@@ -12,8 +12,8 @@ const mockMgmtResponse = {
 
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/RepoPage/Repo.test.js

@@ -2,7 +2,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import RepoDetails from 'components/Repo/RepoDetails';
 import React from 'react';
 import { api } from 'api';
-import { createSearchParams } from 'react-router-dom';
+import { createSearchParams } from 'react-router';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 import userEvent from '@testing-library/user-event';
 
@@ -22,8 +22,8 @@ const mockUseLocationValue = {
 
 const mockUseNavigate = jest.fn();
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useParams: () => {
     return { name: 'test' };
   },

src/__tests__/RepoPage/RepoPage.test.js

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import RepoPage from 'pages/RepoPage';
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useLocation: () => ({
     pathname: 'localhost:3000/image/test',
     state: { lastDate: '' }

src/__tests__/RepoPage/Tags.test.js

@@ -13,8 +13,8 @@ const TagsThemeWrapper = () => {
 };
 
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/Shared/PreviewCard.test.js

@@ -5,8 +5,8 @@ import PreviewCard from 'components/Shared/PreviewCard';
 
 // usenavigate mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/Shared/RepoCard.test.js

@@ -2,13 +2,13 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import RepoCard from 'components/Shared/RepoCard';
-import { createSearchParams } from 'react-router-dom';
+import { createSearchParams } from 'react-router';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 // usenavigate mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/Shared/SearchSuggestion.test.js

@@ -2,13 +2,13 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { api } from 'api';
 import SearchSuggestion from 'components/Header/SearchSuggestion';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import React from 'react';
 
 // router mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/TagPage/DependsOn.test.js

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { api } from 'api';
 import DependsOn from 'components/Tag/Tabs/DependsOn';
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 const mockDependenciesList = {
@@ -65,8 +65,8 @@ const RouterDependsWrapper = () => {
 
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/TagPage/IsDependentOn.test.js

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { api } from 'api';
 import IsDependentOn from 'components/Tag/Tabs/IsDependentOn';
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
 
 const mockDependentsList = {
@@ -65,8 +65,8 @@ const RouterDependsWrapper = () => {
 
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/TagPage/ReferredBy.test.js

@@ -40,8 +40,8 @@ const mockReferrersList = [
 
 // useNavigate mock
 const mockedUsedNavigate = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useNavigate: () => mockedUsedNavigate
 }));
 

src/__tests__/TagPage/TagDetails.test.js

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { api } from 'api';
 import TagDetails from 'components/Tag/TagDetails';
 import MockThemeProvider from '__mocks__/MockThemeProvider';
-import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router';
 
 const TagDetailsThemeWrapper = () => {
   return (
@@ -855,8 +855,8 @@ Object.assign(navigator, {
   }
 });
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
   useParams: () => {
     return { name: 'test', tag: '1.0.1' };
   },

src/__tests__/TagPage/TagPage.test.js

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import TagPage from 'pages/TagPage';
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router';
 
 afterEach(() => {
   // restore the spy created with spyOn

src/__tests__/TagPage/VulnerabilitiesDetails.test.js

@@ -4,7 +4,7 @@ import MockThemeProvider from '__mocks__/MockThemeProvider';
 import { api } from 'api';
 import VulnerabilitiesDetails from 'components/Tag/Tabs/VulnerabilitiesDetails';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 
 jest.mock('xlsx');
 
@@ -822,7 +822,7 @@ describe('Vulnerabilties page', () => {
     expect(exportAsCSVBtn).toBeInTheDocument();
     global.URL.createObjectURL = jest.fn();
     await fireEvent.click(exportAsCSVBtn);
-    expect(await screen.findByTestId('export-csv-menuItem')).not.toBeInTheDocument();
+    await waitFor(() => expect(screen.findByTestId('export-csv-menuItem')).not.toBeInTheDocument());
     fireEvent.click(downloadBtn[0]);
     const exportAsExcelBtn = screen.getByText(/xlsx/i);
     expect(exportAsExcelBtn).toBeInTheDocument();
@@ -858,7 +858,7 @@ describe('Vulnerabilties page', () => {
     await waitFor(() => expect(screen.getAllByText('Fixed in')).toHaveLength(20));
     const collapseListBtn = await screen.findAllByTestId('ViewHeadlineIcon');
     fireEvent.click(collapseListBtn[0]);
-    expect(await screen.findByText('Fixed in')).not.toBeVisible();
+    await waitFor (() => expect(screen.findByText('Fixed in')).not.toBeVisible());
   });
 
   it('should handle fixed CVE query errors', async () => {

src/components/Explore/Explore.jsx

@@ -15,7 +15,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import { api, endpoints } from '../../api';
 import { host } from '../../host';
 import { mapToRepo } from 'utilities/objectModels.js';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import FilterCard from '../Shared/FilterCard.jsx';
 import { isEmpty, isNil } from 'lodash';
 import filterConstants from 'utilities/filterConstants.js';

src/components/Header/ExploreHeader.jsx

@@ -1,5 +1,5 @@
 // react global
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router';
 
 // components
 import { Typography, Breadcrumbs } from '@mui/material';

src/components/Header/Header.jsx

@@ -1,6 +1,6 @@
 // react global
 import React, { useState, useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 
 import { isAuthenticated, isAuthenticationEnabled, logoutUser } from '../../utilities/authUtilities';
 

src/components/Header/SearchSuggestion.jsx

@@ -6,7 +6,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { api, endpoints } from 'api';
 import { host } from 'host';
 import { mapToImage, mapToRepo } from 'utilities/objectModels';
-import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom';
+import { createSearchParams, useNavigate, useSearchParams } from 'react-router';
 import { debounce, isEmpty } from 'lodash';
 import { useCombobox } from 'downshift';
 import { HEADER_SEARCH_PAGE_SIZE } from 'utilities/paginationConstants';

src/components/Header/UserAccountMenu.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { Menu, MenuItem, IconButton, Avatar, Divider } from '@mui/material';
 
 import { getLoggedInUser, logoutUser, isApiKeyEnabled } from '../../utilities/authUtilities';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 function UserAccountMenu() {
   const [anchorEl, setAnchorEl] = useState(null);

src/components/Home/Home.jsx

@@ -6,7 +6,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import RepoCard from '../Shared/RepoCard';
 import { mapToRepo } from 'utilities/objectModels';
 import Loading from '../Shared/Loading';
-import { useNavigate, createSearchParams } from 'react-router-dom';
+import { useNavigate, createSearchParams } from 'react-router';
 import { sortByCriteria } from 'utilities/sortCriteria';
 import {
   HOME_POPULAR_PAGE_SIZE,

src/components/Login/SignIn.jsx

@@ -1,6 +1,6 @@
 // react global
 import React, { useEffect, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 // utility
 import { api, endpoints } from '../../api';