Kbdev 1524 signed license

.storybook/preview.tsx

@@ -10,7 +10,7 @@ import addonTest from '@storybook/addon-vitest';
 import { MswParameters } from 'msw-storybook-addon'
 import { PreviewAddon } from 'storybook/internal/csf';
 import { AppRoutes } from '../src/views/MainView';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { SnackbarProvider } from 'notistack';
 import { AuthContext, AuthContextState } from '../src/components/Auth';
 import { expect, waitFor } from 'storybook/test';
@@ -83,7 +83,7 @@ export async function hasFinishedLoading({ step, canvas }: Pick<Parameters<NonNu
     await waitFor(async () => {
       await expect(canvas.queryAllByRole('progressbar'), 'has no progress bars').toHaveLength(0);
       await expect(canvas.queryAllByText(/loading\.\.\./i), 'has no loading messages').toHaveLength(0);
-    }, { timeout: 10000 });
+    }, { timeout: 30000 });
   });
 }
 

config/jest/windowEnvMock.js

@@ -30,15 +30,23 @@ function replaceNonDeterministicValues(value) {
   // react useId
   fixed = fixed.replace(/"\_r\_[0-9a-z]+_/g, '"_r_XXXX_')
 
+  // aria-live description from ag-grid that doesn't always update the same
+  fixed = fixed.replace(/<div[^>]*aria-relevant="additions text"[^>\/]*(>[^/]*<\/div>|\/>)/g, '');
+  // other generated ag-grid ids
+  fixed = fixed.replace(/id="cell-[^-"]+-[^-"]+"/g, (matched) => matched.replaceAll(/\d+/g, 'XXXX'));
+  fixed = fixed.replace(/id="ag-\d+/g, 'id="ag-XXXX');
+
+  const flakyAgGridClasses = ['ag-row-not-inline-editing','ag-body-horizontal-content-no-gap', 'ag-scrollbar-scrolling', 'ag-invisible']
+
   fixed = fixed.replaceAll(/class="([^"]+)"/g, (_, classnames) => {
-    const classes = Array.from(new Set(classnames.trim().split(' '))).map((name) => name.replace(/css\-[0-9a-zA-Z]+/g, 'css-XXXX')).sort().join(' ');
+    const classes = Array.from(new Set(classnames.trim().split(' '))).map((name) => name.replace(/css\-[0-9a-zA-Z]+/g, 'css-XXXX')).filter((name) => !flakyAgGridClasses.includes(name)).sort().join(' ');
     return `class="${classes}"`;
   });
 
   fixed = fixed.replaceAll(/[ ]*style="([^"]+)"\n?/g, '');
 
   fixed = fixed.replaceAll(new RegExp(`"${today}"`, 'g'), '":today:"');
-  fixed = fixed.replace(/page last updated \d+ [a-z]+ ago/g, 'page last updated XXXX ago');
+  fixed = fixed.replace(/\d+ [a-z]+ ago/g, 'XXXX XXXX ago');
 
   // remove html comments
   fixed = fixed.replace(/<!--[ a-zA-Z0-9_-]+-->/g, '');

package.json

@@ -48,7 +48,7 @@
     "react-dom": "^19.2.4",
     "react-google-charts": "^3.0.15",
     "react-query": "npm:@tanstack/react-query@^5.96.1",
-    "react-router-dom": "^6.22.2",
+    "react-router": "^7.14.2",
     "slugify": "^1.4.0",
     "typescript": "5.1",
     "use-debounce": "^3.4.2",
@@ -104,14 +104,14 @@
     "build": "vite build",
     "build:ci": "vite build; vite build --mode staging; NODE_ENV=development vite build --mode development",
     "compress": "tar cvfz v${npm_package_version}.tar.gz dist",
-    "test": "TZ=UTC vitest",
+    "test": "REACT_APP_VERSION=1.0.0 TZ=UTC vitest",
     "test:ci": "npm run test --",
     "lint": "eslint src --config .eslintrc.json --quiet",
     "check-types": "tsc --noEmit --project ./tsconfig.check.json",
     "serve": "NODE_ENV=development serve dist/development -s",
     "commit": "git-cz",
-    "storybook": "TZ=UTC storybook dev -p 6006",
-    "build-storybook": "TZ=UTC storybook build"
+    "storybook": "REACT_APP_VERSION=1.0.0 TZ=UTC storybook dev -p 6006",
+    "build-storybook": "REACT_APP_VERSION=1.0.0 TZ=UTC storybook build"
   },
   "config": {
     "commitizen": {

src/App.tsx

@@ -1,7 +1,7 @@
 import { SnackbarProvider } from 'notistack';
 import React from 'react';
 import { QueryClientProvider } from 'react-query';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 
 import { AuthProvider } from '@/components/Auth';
 import api from '@/services/api';

src/components/Auth/index.tsx

@@ -8,7 +8,7 @@ import React, {
   createContext, ReactNode, useContext, useEffect, useLayoutEffect, useMemo,
 } from 'react';
 import { useMutation } from 'react-query';
-import { useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router';
 
 import api from '@/services/api';
 
@@ -154,18 +154,14 @@ const Centered = ({ children }: { children: ReactNode }) => (
 );
 
 interface AuthenticatedRouteProps {
-  component: React.ComponentType<any>;
-  componentProps?: any;
   admin?: boolean;
   signedLicenseRequired?: boolean;
 }
 
-const AuthenticatedRoute = (props: AuthenticatedRouteProps) => {
+const AuthenticatedLayout = (props: AuthenticatedRouteProps) => {
   const {
     admin = false,
     signedLicenseRequired = false,
-    component: Comp,
-    componentProps = {},
   } = props;
   const auth = useAuth();
   const navigate = useNavigate();
@@ -218,15 +214,13 @@ const AuthenticatedRoute = (props: AuthenticatedRouteProps) => {
       </Centered>
     );
   }
-  const cp = componentProps || {};
 
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  return <Comp {...cp} />;
+  return <Outlet />;
 };
 
 export {
   AuthContext,
-  AuthenticatedRoute,
+  AuthenticatedLayout,
   AuthProvider,
   useAuth,
 };

src/components/DetailChip/__snapshots__/index.stories.tsx.snap

@@ -383,6 +383,7 @@ exports[`WithGetLink snapshot 1`] = `
               bob (#19:0)
             </h4>
             <a
+              data-discover="true"
               href="/test"
               target="_blank"
             >

src/components/DetailChip/index.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { expect, fn, screen } from 'storybook/test';
 
 import preview from '#.storybook/preview';

src/components/DetailChip/index.tsx

@@ -15,7 +15,7 @@ import {
   Typography,
 } from '@mui/material';
 import React, { useCallback, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 interface DefaultPopupComponentProps<D extends object> {
   /** description of object. Defaults to title of card if title is not present */

src/components/DetailDrawer/__tests__/index.test.tsx

@@ -6,7 +6,7 @@ import {
   render,
 } from '@testing-library/react';
 import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import {
   afterEach, beforeEach, describe, expect, test, vi,
 } from 'vitest';

src/components/DetailDrawer/index.tsx

@@ -18,7 +18,7 @@ import {
   Typography,
 } from '@mui/material';
 import React, { ReactNode, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import { GeneralRecordType } from '@/components/types';
 import schema from '@/services/schema';

src/components/QueryResultsTable/index.tsx

@@ -8,7 +8,7 @@ import React, {
   useEffect,
 } from 'react';
 import { useQuery } from 'react-query';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 import useGrid from '@/components/hooks/useGrid';
 import api from '@/services/api';

src/components/RecordIdLink/index.tsx

@@ -2,7 +2,7 @@ import './index.scss';
 
 import { OpenInNew } from '@mui/icons-material';
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 interface RecordIdLinkProps {
   recordClass: string;

src/components/StatementForm/index.tsx

@@ -13,7 +13,7 @@ import React, {
   useCallback, useEffect, useMemo, useState,
 } from 'react';
 import { useMutation, useQuery } from 'react-query';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router';
 
 import ActionButton from '@/components/ActionButton';
 import { useAuth } from '@/components/Auth';

src/components/hooks/useGrid.tsx

@@ -3,6 +3,8 @@ import {
   useMemo, useRef, useState,
 } from 'react';
 
+const TESTING = process.env.NODE_ENV === 'test' || process.env.STORYBOOK === 'true';
+
 /**
  * hook for setting up and using ag-grids apis
  */
@@ -15,7 +17,9 @@ const useGrid = () => {
     onGridReady: () => {
       setDelayedRef(gridRef);
     },
-  }), []);
+    ensureDomOrder: TESTING,
+    suppressColumnVirtualisation: TESTING,
+  } satisfies React.ComponentProps<typeof AgGridReact> & { ref: unknown }), []);
 
   return {
     ref: delayedRef,

src/components/types/index.tsx

@@ -31,7 +31,7 @@ interface TGeneralRecordType {
   type: Partial<TGeneralRecordType> | string;
   deprecated: boolean;
   firstLoginAt: number;
-  signedLicenseAt: number;
+  signedLicenseAt: number | null;
   lastLoginAt: number;
   groups: string[] | Partial<TGeneralRecordType>[];
   loginCount: number;

src/components/util.tsx

@@ -1,5 +1,5 @@
 import * as qs from 'qs';
-import { NavigateFunction } from 'react-router-dom';
+import { NavigateFunction } from 'react-router';
 
 const CLASS_MODEL_PROP = '@class';
 

src/services/util.tsx

@@ -2,7 +2,7 @@
  * Handles miscellaneous tasks.
  */
 
-import { NavigateFunction } from 'react-router-dom';
+import { NavigateFunction } from 'react-router';
 
 import { GeneralRecordType } from '@/components/types';
 import config from '@/static/config';