EES-4287 update to react 18

dfe-analytical-services · Mar 12, 2024 · 02c867c · 02c867c
1 parent 24c1116
commit 02c867c
Show file tree

Hide file tree

Showing 30 changed files with 933 additions and 723 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/explore-education-statistics-admin/package.json b/src/explore-education-statistics-admin/package.json
@@ -11,11 +11,12 @@
     "@babel/preset-typescript": "^7.18.6",
     "@ckeditor/ckeditor5-react": "^6.1.0",
     "@ckeditor/ckeditor5-upload": "^40.1.0",
-    "@lukemorales/query-key-factory": "^1.3.2",
+    "@hello-pangea/dnd": "^16.5.0",
+    "@lukemorales/query-key-factory": "1.3.2",
     "@microsoft/signalr": "^7.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@svgr/webpack": "^6.5.1",
-    "@tanstack/react-query": "^4.32.0",
+    "@tanstack/react-query": "4.32.0",
     "axios": "^1.4.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-loader": "^8.3.0",
@@ -47,7 +48,7 @@
     "i": "^0.3.7",
     "identity-obj-proxy": "^3.0.0",
     "immer": "^10.0.2",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "marked": "^5.1.2",
     "mini-css-extract-plugin": "^2.7.5",
@@ -61,21 +62,19 @@
     "process": "^0.11.10",
     "qs": "^6.11.2",
     "querystring": "0.2.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "@hello-pangea/dnd": "^16.5.0",
     "react-dev-utils": "^12.0.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.43.9",
+    "react-hook-form": "7.43.9",
     "react-idle-timer": "^4.6.4",
-    "react-lazyload": "^3.2.0",
-    "react-leaflet": "^3.2.2",
-    "react-markdown": "^4.3.1",
+    "react-lazyload": "github:twobin/react-lazyload",
+    "react-leaflet": "^4.2.1",
+    "react-markdown": "^8.0.0",
     "react-refresh": "^0.14.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-test-renderer": "^17.0.2",
     "recharts": "^2.7.2",
     "resolve": "^1.22.2",
     "resolve-url-loader": "^5.0.0",
@@ -94,12 +93,12 @@
     "webpack-manifest-plugin": "^5.0.0",
     "whatwg-fetch": "^3.4.1",
     "workbox-webpack-plugin": "^7.0.0",
-    "yup": "^1.2.0"
+    "yup": "^1.3.3"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/react-hooks": "^3.7.0",
     "@testing-library/user-event": "^12.8.3",
     "@types/classnames": "^2.2.10",
@@ -110,10 +109,10 @@
     "@types/marked": "^5.0.1",
     "@types/node": "^16.18.31",
     "@types/qs": "^6.9.7",
-    "@types/react": "17.0.27",
-    "@types/react-dom": "17.0.9",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-helmet": "^6.1.0",
-    "@types/react-lazyload": "^3.0.0",
+    "@types/react-lazyload": "^3.2.3",
     "@types/react-router-dom": "^5.3.3",
     "@types/testing-library__dom": "^7.5.0",
     "@types/testing-library__jest-dom": "^5.14.6",
@@ -131,6 +130,7 @@
     "jest-resolve": "^29.6.1",
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.2.2",
+    "react-test-renderer": "^18.2.0",
     "stylelint": "^15.7.0",
     "stylelint-webpack-plugin": "^4.1.1"
   },

diff --git a/src/explore-education-statistics-admin/src/components/PageErrorBoundary.tsx b/src/explore-education-statistics-admin/src/components/PageErrorBoundary.tsx
@@ -4,19 +4,23 @@ import ServiceProblemsPage from '@admin/pages/errors/ServiceProblemsPage';
 import { ErrorControlContextProvider } from '@common/contexts/ErrorControlContext';
 import logger from '@common/services/logger';
 import { isAxiosError } from 'axios';
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
 interface State {
   errorCode?: number;
 }
 
+interface Props extends RouteComponentProps {
+  children: ReactNode;
+}
+
 /**
  * This component is responsible for rendering error pages of
  * specific types, or a fallback "Service problems" page
  * dependant on the type of error encountered.
  */
-class PageErrorBoundary extends Component<RouteComponentProps, State> {
+class PageErrorBoundary extends Component<Props, State> {
   public state: State = {};
 
   private unregisterCallback?: () => void;

diff --git a/src/explore-education-statistics-admin/src/contexts/__tests__/CommentsContext.test.tsx b/src/explore-education-statistics-admin/src/contexts/__tests__/CommentsContext.test.tsx
@@ -10,11 +10,13 @@ import {
   testCommentUser1,
 } from '@admin/components/comments/__data__/testComments';
 import { Comment } from '@admin/services/types/content';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
 
 describe('CommentsContext', () => {
-  type Props = OmitStrict<CommentsContextProviderProps, 'children'>;
+  interface Props extends OmitStrict<CommentsContextProviderProps, 'children'> {
+    children?: ReactNode;
+  }
 
   const wrapper: FC<Props> = ({ ...props }) => (
     <CommentsContextProvider {...props}>

diff --git a/src/explore-education-statistics-admin/src/contexts/__tests__/EditingContext.test.tsx b/src/explore-education-statistics-admin/src/contexts/__tests__/EditingContext.test.tsx
@@ -4,11 +4,13 @@ import {
   useEditingContext,
 } from '@admin/contexts/EditingContext';
 import { OmitStrict } from '@common/types';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
 
 describe('EditingContext', () => {
-  type Props = OmitStrict<EditingContextProviderProps, 'children'>;
+  interface Props extends OmitStrict<EditingContextProviderProps, 'children'> {
+    children?: ReactNode;
+  }
 
   const wrapper: FC<Props> = ({ ...props }) => (
     <EditingContextProvider {...props}>{props.children}</EditingContextProvider>

diff --git a/...plore-education-statistics-admin/src/contexts/__tests__/ReleaseContentHubContext.test.tsx b/...plore-education-statistics-admin/src/contexts/__tests__/ReleaseContentHubContext.test.tsx
@@ -5,11 +5,11 @@ import {
 import connectionMock from '@admin/services/hubs/utils/__mocks__/connectionMock';
 import { HubConnectionState } from '@microsoft/signalr';
 import { renderHook } from '@testing-library/react-hooks';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 jest.mock('@admin/services/hubs/utils/createConnection');
 
-const wrapper: FC = ({ children }) => (
+const wrapper: FC = ({ children }: { children?: ReactNode }) => (
   <ReleaseContentHubContextProvider releaseId="release-1">
     {children}
   </ReleaseContentHubContextProvider>

diff --git a/src/explore-education-statistics-admin/src/hooks/__tests__/useBlockLock.test.tsx b/src/explore-education-statistics-admin/src/hooks/__tests__/useBlockLock.test.tsx
@@ -4,7 +4,7 @@ import { GlobalPermissions } from '@admin/services/permissionService';
 import { UserDetails } from '@admin/services/types/user';
 import MockDate from '@common-test/mockDate';
 import { renderHook } from '@testing-library/react-hooks';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 describe('useBlockLock', () => {
   beforeEach(() => {
@@ -23,7 +23,11 @@ describe('useBlockLock', () => {
     displayName: 'Rob Rowe',
   };
 
-  const wrapper: FC = ({ children }) => (
+  interface Props {
+    children: ReactNode;
+  }
+
+  const wrapper: FC<Props> = ({ children }) => (
     <AuthContextTestProvider
       user={{
         id: 'user-1',

diff --git a/src/explore-education-statistics-admin/src/index.tsx b/src/explore-education-statistics-admin/src/index.tsx
@@ -2,14 +2,17 @@
 import './styles/_all.scss';
 import '@admin/polyfill';
 import configureAxios from '@admin/services/utils/configureAxios';
+import { createRoot } from 'react-dom/client';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 
 configureAxios();
 
 import('./App').then(({ default: App }) => {
-  ReactDOM.render(<App />, document.getElementById('root'));
+  const container = document.getElementById('root');
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const root = createRoot(container!);
+  root.render(<App />);
 });
 
 // If you want your app to work offline and load faster, you can change

diff --git a/...src/pages/methodology/edit-methodology/content/components/MethodologyAccordionSection.tsx b/...src/pages/methodology/edit-methodology/content/components/MethodologyAccordionSection.tsx
@@ -66,7 +66,7 @@ const MethodologyAccordionSection = ({
   ]);
 
   const updateBlockInAccordionSection = useCallback(
-    async (blockId, bodyContent) => {
+    async (blockId: string, bodyContent: string) => {
       await updateContentSectionBlock({
         methodologyId,
         sectionId,

diff --git a/...education-statistics-admin/src/pages/release/content/contexts/useReleaseContentActions.ts b/...education-statistics-admin/src/pages/release/content/contexts/useReleaseContentActions.ts
@@ -16,6 +16,7 @@ import { Dictionary } from '@admin/types';
 import { useCallback, useMemo } from 'react';
 import keyStatisticService, {
   KeyStatisticDataBlockUpdateRequest,
+  KeyStatisticTextSaveRequest,
   KeyStatisticTextUpdateRequest,
 } from '@admin/services/keyStatisticService';
 import { KeyStatistic } from '@common/services/publicationService';
@@ -437,7 +438,13 @@ export default function useReleaseContentActions() {
   );
 
   const addKeyStatisticDataBlock = useCallback(
-    async ({ releaseId, dataBlockId }) => {
+    async ({
+      releaseId,
+      dataBlockId,
+    }: {
+      releaseId: string;
+      dataBlockId: string;
+    }) => {
       const keyStatisticDataBlock =
         await keyStatisticService.createKeyStatisticDataBlock(releaseId, {
           dataBlockId,
@@ -451,7 +458,13 @@ export default function useReleaseContentActions() {
   );
 
   const addKeyStatisticText = useCallback(
-    async ({ releaseId, keyStatisticText }) => {
+    async ({
+      releaseId,
+      keyStatisticText,
+    }: {
+      releaseId: string;
+      keyStatisticText: KeyStatisticTextSaveRequest;
+    }) => {
       const createdKeyStatText =
         await keyStatisticService.createKeyStatisticText(
           releaseId,

diff --git a/src/explore-education-statistics-admin/src/pages/release/data/ReleaseDataFileReplacePage.tsx b/src/explore-education-statistics-admin/src/pages/release/data/ReleaseDataFileReplacePage.tsx
@@ -203,7 +203,7 @@ const ReleaseDataFileReplacePage = ({
             <section className="govuk-!-margin-bottom-8">
               <h2>Data file details</h2>
 
-              {replacementDataFileError && (
+              {!!replacementDataFileError && (
                 <WarningMessage>
                   There was a problem loading the replacement file details.
                 </WarningMessage>

diff --git a/...atistics-admin/src/pages/release/datablocks/components/chart/ChartLegendConfiguration.tsx b/...atistics-admin/src/pages/release/datablocks/components/chart/ChartLegendConfiguration.tsx
@@ -268,7 +268,7 @@ const ChartLegendConfiguration = ({
   ]);
 
   const handleChange = useCallback(
-    values => {
+    (values: LegendConfiguration) => {
       if (validationSchema.isValidSync(values)) {
         onChange(values);
       }

diff --git a/.../release/datablocks/components/chart/contexts/__tests__/ChartBuilderFormsContext.test.tsx b/.../release/datablocks/components/chart/contexts/__tests__/ChartBuilderFormsContext.test.tsx
@@ -7,10 +7,13 @@ import {
 import { lineChartBlockDefinition } from '@common/modules/charts/components/LineChartBlock';
 import { OmitStrict } from '@common/types';
 import { renderHook } from '@testing-library/react-hooks';
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 
 describe('useChartBuilderFormsContext', () => {
-  type Props = OmitStrict<ChartBuilderFormContextProviderProps, 'children'>;
+  interface Props
+    extends OmitStrict<ChartBuilderFormContextProviderProps, 'children'> {
+    children?: ReactNode;
+  }
 
   const wrapper: FC<Props> = ({ ...props }) => (
     <ChartBuilderFormsContextProvider {...props}>

diff --git a/src/explore-education-statistics-admin/src/services/keyStatisticService.ts b/src/explore-education-statistics-admin/src/services/keyStatisticService.ts
@@ -18,7 +18,7 @@ export interface KeyStatisticDataBlockUpdateRequest {
   guidanceText?: string;
 }
 
-interface KeyStatisticTextSaveRequest {
+export interface KeyStatisticTextSaveRequest {
   title: string;
   statistic: string;
   trend?: string;

diff --git a/src/explore-education-statistics-common/package.json b/src/explore-education-statistics-common/package.json
@@ -4,12 +4,12 @@
   "description": "",
   "dependencies": {
     "@hello-pangea/color-picker": "^3.2.2",
-    "@hookform/resolvers": "^3.1.1",
+    "@hello-pangea/dnd": "^16.5.0",
+    "@hookform/resolvers": "3.1.1",
     "@microsoft/applicationinsights-web": "^3.0.2",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dialog": "1.0.4",
-    "@reach/auto-id": "^0.18.0",
-    "@tanstack/react-query": "^4.32.0",
+    "@tanstack/react-query": "4.32.0",
     "axios": "^1.4.0",
     "babel-preset-react-app": "^9.1.2",
     "classnames": "^2.3.2",
@@ -26,35 +26,34 @@
     "iframe-resizer-react": "^1.0.4",
     "immer": "^10.0.2",
     "intersection-observer": "^0.11.0",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "memoizee": "^0.4.14",
     "nanoid": "^4.0.0",
     "next": "^12.3.4",
     "qs": "^6.11.2",
-    "react": "17.0.2",
-    "@hello-pangea/dnd": "^16.5.0",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-highlight-words": "^0.20.0",
-    "react-hook-form": "^7.43.9",
-    "react-lazyload": "^3.0.0",
-    "react-leaflet": "^3.2.2",
-    "react-markdown": "^4.3.1",
+    "react-hook-form": "7.43.9",
+    "react-lazyload":"github:twobin/react-lazyload",
+    "react-leaflet": "^4.2.1",
+    "react-markdown": "^8.0.0",
     "recharts": "^2.7.2",
     "regenerator-runtime": "0.13.9",
     "sanitize-html": "^2.11.0",
     "use-immer": "^0.9.0",
     "uuid": "^8.3.1",
     "xlsx": "^0.17.4",
-    "yup": "^1.2.0"
+    "yup": "^1.3.3"
   },
   "devDependencies": {
     "@swc/core": "^1.3.71",
     "@swc/jest": "^0.2.27",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/react": "^14.2.1",
     "@testing-library/react-hooks": "^3.7.0",
     "@testing-library/user-event": "^12.8.3",
     "@types/classnames": "^2.2.10",
@@ -65,11 +64,11 @@
     "@types/memoizee": "^0.4.4",
     "@types/node": "^16.18.31",
     "@types/qs": "^6.9.7",
-    "@types/react": "17.0.27",
-    "@types/react-dom": "17.0.9",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-helmet": "^6.1.0",
     "@types/react-highlight-words": "^0.16.4",
-    "@types/react-lazyload": "^3.0.0",
+    "@types/react-lazyload": "^3.2.3",
     "@types/react-modal": "^3.16.0",
     "@types/sanitize-html": "^2.9.0",
     "@types/testing-library__dom": "^7.5.0",
@@ -86,7 +85,7 @@
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.2.2",
     "open": "^8.4.1",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "stylelint": "^15.7.0",
     "typescript": "^5.1.6",
     "xhr-mock": "^2.5.1"

diff --git a/src/explore-education-statistics-common/src/components/Details.tsx b/src/explore-education-statistics-common/src/components/Details.tsx
@@ -51,7 +51,7 @@ const Details = ({
   preventToggle = false,
 }: DetailsProps) => {
   const [id] = useState(propId);
-  const ref = useRef<HTMLElement>(null);
+  const ref = useRef<HTMLDetailsElement>(null);
 
   const { onMounted } = useMounted(undefined, jsRequired);
   const [open, toggleOpen] = useToggle(defaultOpen);