Skip to content

Commit 61de425

Browse files
AlyssaWangVanessa Fotsojhlee-mitredehallAlyssa Wang
authored
FI-3599: Upgrade React Router to v7 (#650)
* add share button * update header skeleton * add link buttons * add global state for view only mode * add elements to route * run npm audit fix * disable presets on view only * update react router * add view only option to tree navigation * add view only to group card text * add view only to config errors * fix double '/view' in url on copy * remove trailing spaces * disable inputs and add voiceover support for input types * handle run test edge cases * disable submit * move tree ids to custom tree item * force hash routing on selection panel action * revert react-router version * update package lock * update missing import * revert router link to mui link * FI-3694: Prevent Duplicate Presets at Boot and Improve Suite Link Shared Example Spec * FI-3637: Add fetch bundle resources to core * Initial commit * Type from Reference fix * Rubocop * FI-3653: Lock auth inputs if parent is locked * complete merge * update view icon for view only buttons * add test suite id if missing from url * FI-3556: Migrate MustSupport logic into core * change new session url target to start new session * update dependencies * prevent lint error in Page * convert router provider to browser router * revert router * fix selection button not disabling on empty options * move login inside router provider * refactor router logic * add hydrate fallback elements * delete consoles * update npm registry * regenerate package-lock * regenerate package-lock * resolve lint errors --------- Co-authored-by: Vanessa Fotso <vfotso@mitre.org> Co-authored-by: Jaehoon Lee <jaehoonlee@mitre.org> Co-authored-by: Dylan E Hall <dehall@mitre.org> Co-authored-by: Alyssa Wang <awang@farsight.internal>
1 parent 558872e commit 61de425

38 files changed

+3649
-6425
lines changed

‎client/src/components/App/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC, useEffect } from 'react';
2-
import { RouterProvider } from 'react-router-dom';
2+
import { RouterProvider } from 'react-router';
33
import { Theme } from '@mui/material/styles';
44
import { SnackbarProvider } from 'notistack';
55
import { makeStyles } from 'tss-react/mui';

‎client/src/components/App/Page.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, useEffect } from 'react';
2-
import { useLoaderData, useParams } from 'react-router-dom';
2+
import { useLoaderData, useParams } from 'react-router';
33
import { useAppStore } from '~/store/app';
44

55
export interface PageProps {
@@ -12,7 +12,9 @@ export interface PageProps {
1212
*/
1313
const Page: FC<PageProps> = ({ children, title }) => {
1414
const testSuites = useAppStore((state) => state.testSuites);
15-
const loadedChildren = useLoaderData() as JSX.Element;
15+
// Type assertion is necessary here because it will be read as any type
16+
17+
const loadedChildren: JSX.Element = useLoaderData();
1618
const params = useParams();
1719

1820
// Handle options-specific title population
@@ -29,6 +31,7 @@ const Page: FC<PageProps> = ({ children, title }) => {
2931
}, [title]);
3032

3133
return children || loadedChildren;
34+
// return children;
3235
};
3336

3437
export default Page;

‎client/src/components/App/Router.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { createBrowserRouter } from 'react-router-dom';
2+
import { createBrowserRouter } from 'react-router';
33
import Page from '~/components/App/Page';
44
import LandingPage from '~/components/LandingPage';
55
import SuiteOptionsPage from '~/components/SuiteOptionsPage';
@@ -10,26 +10,30 @@ import { basePath } from '~/api/infernoApiService';
1010
import { TestSuite } from '~/models/testSuiteModels';
1111

1212
export const router = (testSuites: TestSuite[]) => {
13-
const testSuitesExist = !!testSuites && testSuites.length > 0;
1413
return createBrowserRouter(
1514
[
1615
{
1716
path: '/',
18-
element: (
19-
<Page title={`Inferno Test Suites`}>
20-
{testSuitesExist ? <LandingPage testSuites={testSuites} /> : <LandingPageSkeleton />}
21-
</Page>
22-
),
17+
loader: () => {
18+
return !!testSuites && testSuites.length > 0 ? (
19+
<LandingPage testSuites={testSuites} />
20+
) : (
21+
<LandingPageSkeleton />
22+
);
23+
},
24+
element: <Page title={`Inferno Test Suites`} />,
25+
hydrateFallbackElement: <LandingPageSkeleton />,
2326
},
2427
{
2528
path: ':test_suite_id',
2629
element: <Page title="Options" />,
2730
loader: ({ params }) => {
28-
if (!testSuitesExist) return <SuiteOptionsPageSkeleton />;
31+
if (!testSuites || testSuites.length === 0) return <SuiteOptionsPageSkeleton />;
2932
const suiteId: string = params.test_suite_id || '';
3033
const suite = testSuites.find((suite) => suite.id === suiteId);
3134
return suite ? <SuiteOptionsPage testSuite={suite} /> : <SuiteOptionsPageSkeleton />;
3235
},
36+
hydrateFallbackElement: <SuiteOptionsPageSkeleton />,
3337
},
3438
{
3539
// Title for TestSessionWrapper is set in the component

‎client/src/components/App/__tests__/Page.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { RouterProvider, createMemoryRouter } from 'react-router-dom';
2+
import { RouterProvider, createMemoryRouter } from 'react-router';
33
import { render /* , waitFor */ } from '@testing-library/react';
44
import { testSuites } from '~/components/App/__mocked_data__/mockData';
55
import Page from '../Page';

‎client/src/components/Header/Header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { FC } from 'react';
22
import { AppBar, Avatar, Box, Button, IconButton, Toolbar, Typography } from '@mui/material';
3-
import { Link } from 'react-router-dom';
3+
import { Link } from 'react-router';
44
import { Menu, NoteAdd } from '@mui/icons-material';
55
import { basePath, getStaticPath } from '~/api/infernoApiService';
66
import { SuiteOptionChoice } from '~/models/testSuiteModels';
@@ -97,6 +97,7 @@ const Header: FC<HeaderProps> = ({
9797
className={classes.homeLink}
9898
>
9999
{suiteTitle}
100+
{viewOnly ? ' (View Only)' : ''}
100101
</Link>
101102
</Typography>
102103
{suiteVersion && (

‎client/src/components/Header/ShareSessionButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { Link, Share, Visibility } from '@mui/icons-material';
1313
import { useSnackbar } from 'notistack';
1414
import { useAppStore } from '~/store/app';
1515
import lightTheme from '~/styles/theme';
16-
import { useLocation } from 'react-router-dom';
16+
import { useLocation } from 'react-router';
1717

1818
const ShareSessionButton: FC<unknown> = () => {
1919
const { enqueueSnackbar } = useSnackbar();

‎client/src/components/Header/__tests__/Header.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { render, renderHook, screen } from '@testing-library/react';
33
import ThemeProvider from 'components/ThemeProvider';
44
import Header from '../Header';
55

6-
import { MemoryRouter } from 'react-router-dom';
6+
import { MemoryRouter } from 'react-router';
77
import { useAppStore } from '~/store/app';
88
import { beforeEach, expect, test } from 'vitest';
99

‎client/src/components/Header/__tests__/HeaderSmall.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
44
import ThemeProvider from 'components/ThemeProvider';
55
import Header from '../Header';
66

7-
import { MemoryRouter } from 'react-router-dom';
7+
import { MemoryRouter } from 'react-router';
88
import { useAppStore } from '~/store/app';
99
import { beforeEach, expect, test } from 'vitest';
1010

‎client/src/components/InputsModal/Auth/InputAuth.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ const InputAuth: FC<InputAuthProps> = ({ mode, input, index, inputsMap, setInput
155155
const combinedValues = { ...combinedStartingValues, ...accessValuesObject };
156156
stringifiedValues = JSON.stringify(combinedValues);
157157
}
158+
158159
inputsMap.set(input.name, stringifiedValues);
159160
setInputsMap(new Map(inputsMap));
160161
}

‎client/src/components/LandingPage/LandingPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC, useEffect } from 'react';
2-
import { useNavigate } from 'react-router-dom';
2+
import { useNavigate } from 'react-router';
33
import { Typography, Container, Box } from '@mui/material';
44
import { useSnackbar } from 'notistack';
55
import { TestSuite, TestSession } from '~/models/testSuiteModels';
@@ -43,12 +43,12 @@ const LandingPage: FC<LandingPageProps> = ({ testSuites }) => {
4343

4444
const startTestingClick = (suite?: TestSuite) => {
4545
if (suite && suite.suite_options && suite.suite_options.length > 0) {
46-
navigate(`${suite.id}`);
46+
void navigate(`${suite.id}`);
4747
} else if ((suite && suite?.id) || testSuiteChosen) {
4848
postTestSessions(suite?.id || testSuiteChosen, null, null)
4949
.then((testSession: TestSession | null) => {
5050
if (testSession && testSession.test_suite) {
51-
navigate(
51+
void navigate(
5252
`/${testSession.test_suite_id}/${testSession.id}#${testSession.test_suite_id}`,
5353
);
5454
}

0 commit comments

Comments
 (0)