feat: upgrade from react v17 to v18 (#7265)

**Upgrade to React v18 for Unleash v6. Here's why I think it's a good time to do it:** - Command Bar project: We've begun work on the command bar project, and there's a fantastic library we want to use. However, it requires React v18 support. - Straightforward Upgrade: I took a look at the upgrade guide https://react.dev/blog/2022/03/08/react-18-upgrade-guide and it seems fairly straightforward. In fact, I was able to get React v18 running with minimal changes in just 10 minutes! - Dropping IE Support: React v18 no longer supports Internet Explorer (IE), which is no longer supported by Microsoft as of June 15, 2022. Upgrading to v18 in v6 would be a good way to align with this change. TS updates: * FC children has to be explicit: https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc * forcing version 18 types in resolutions: https://sentry.io/answers/type-is-not-assignable-to-type-reactnode/ Test updates: * fixing SWR issue that we have always had but it manifests more in new React (vercel/swr#2373) --------- Co-authored-by: kwasniew <[email protected]>
Unleash · Jun 11, 2024 · 3acb3ad · 3acb3ad
1 parent 5225452
commit 3acb3ad
Show file tree

Hide file tree

Showing 139 changed files with 1,500 additions and 2,104 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -45,8 +45,7 @@
     "@tanstack/react-table": "^8.10.7",
     "@testing-library/dom": "8.20.1",
     "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.5.2",
     "@types/css-mediaquery": "^0.1.4",
     "@types/debounce": "1.2.4",
@@ -57,12 +56,12 @@
     "@types/lodash.mapvalues": "^4.6.9",
     "@types/lodash.omit": "4.5.9",
     "@types/node": "^20.12.12",
-    "@types/react": "17.0.80",
-    "@types/react-dom": "17.0.25",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@types/react-linkify": "1.0.4",
     "@types/react-router-dom": "5.3.3",
     "@types/react-table": "7.7.20",
-    "@types/react-test-renderer": "17.0.9",
+    "@types/react-test-renderer": "18.0.7",
     "@types/react-timeago": "4.1.7",
     "@types/semver": "7.5.8",
     "@types/uuid": "^9.0.0",
@@ -97,11 +96,11 @@
     "pkginfo": "0.4.1",
     "plausible-tracker": "0.3.9",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-archer": "4.4.0",
     "react-chartjs-2": "4.3.1",
     "react-confetti": "^6.1.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
     "react-error-boundary": "3.1.4",
     "react-hooks-global-state": "2.1.0",
@@ -110,7 +109,7 @@
     "react-markdown": "^8.0.4",
     "react-router-dom": "6.16.0",
     "react-table": "7.8.0",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "react-timeago": "7.2.0",
     "sass": "1.77.4",
     "semver": "7.6.2",
@@ -134,9 +133,8 @@
     "@xmldom/xmldom": "^0.8.4",
     "json5": "^2.2.2",
     "vite": "5.2.12",
-    "@types/react": "17.0.80",
-    "@types/react-dom": "17.0.25",
-    "semver": "7.6.2"
+    "semver": "7.6.2",
+    "@types/react": "^18.0.0"
   },
   "jest": {
     "moduleNameMapper": {

diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
@@ -10,6 +10,7 @@ interface IApiTokenFormProps {
     handleCancel: () => void;
     mode: 'Create' | 'Edit';
     actions?: ReactNode;
+    children?: React.ReactNode;
 }
 
 const ApiTokenForm: React.FC<IApiTokenFormProps> = ({

diff --git a/...tend/src/component/admin/billing/BillingDashboard/BillingPlan/GridColLink/GridColLink.tsx b/...tend/src/component/admin/billing/BillingDashboard/BillingPlan/GridColLink/GridColLink.tsx
@@ -6,6 +6,8 @@ const StyledSpan = styled('span')(({ theme }) => ({
     marginLeft: theme.spacing(1),
 }));
 
-export const GridColLink: FC = ({ children }) => {
+export const GridColLink: FC<{ children?: React.ReactNode }> = ({
+    children,
+}) => {
     return <StyledSpan>({children})</StyledSpan>;
 };
diff --git a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
@@ -90,6 +90,7 @@ interface IGroupForm {
     handleCancel: () => void;
     errors: { [key: string]: string };
     mode: 'Create' | 'Edit';
+    children?: React.ReactNode;
 }
 
 export const GroupForm: FC<IGroupForm> = ({

diff --git a/frontend/src/component/admin/menu/CenteredNavLink.tsx b/frontend/src/component/admin/menu/CenteredNavLink.tsx
@@ -16,6 +16,9 @@ const StyledNavLink = styled(NavLink)(({ theme }) => ({
     },
 }));
 
-export const CenteredNavLink: FC<{ to: string }> = ({ to, children }) => {
+export const CenteredNavLink: FC<{
+    to: string;
+    children?: React.ReactNode;
+}> = ({ to, children }) => {
     return <StyledNavLink to={to}>{children}</StyledNavLink>;
 };
diff --git a/frontend/src/component/admin/users/UserForm/UserForm.tsx b/frontend/src/component/admin/users/UserForm/UserForm.tsx
@@ -60,6 +60,7 @@ interface IUserForm {
     errors: { [key: string]: string };
     clearErrors: () => void;
     mode?: string;
+    children?: React.ReactNode;
 }
 
 const UserForm: React.FC<IUserForm> = ({

diff --git a/frontend/src/component/application/ApplicationChart.tsx b/frontend/src/component/application/ApplicationChart.tsx
@@ -1,6 +1,7 @@
 import { Box, Divider, styled, Typography, useTheme } from '@mui/material';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useNavigate } from 'react-router-dom';
+import type React from 'react';
 import { type FC, useLayoutEffect, useRef, useState } from 'react';
 import type {
     ApplicationOverviewEnvironmentSchema,
@@ -139,7 +140,7 @@ const SuccessStatus = () => (
     </StyledStatus>
 );
 
-const WarningStatus: FC = ({ children }) => (
+const WarningStatus: FC<{ children?: React.ReactNode }> = ({ children }) => (
     <StyledStatus mode='warning'>
         <WarningAmberRounded
             sx={(theme) => ({

diff --git a/frontend/src/component/banners/Banner/Banner.test.tsx b/frontend/src/component/banners/Banner/Banner.test.tsx
@@ -18,7 +18,7 @@ test('should render correctly when using basic options', () => {
     expect(screen.getByTestId('WarningAmberIcon')).toBeInTheDocument();
 });
 
-test('should render correctly when using advanced options', () => {
+test('should render correctly when using advanced options', async () => {
     render(
         <Banner
             banner={{
@@ -42,7 +42,7 @@ test('should render correctly when using advanced options', () => {
     expect(link).toBeInTheDocument();
     link.click();
 
-    expect(screen.getByText('Dialog title')).toBeInTheDocument();
+    expect(await screen.findByText('Dialog title')).toBeInTheDocument();
     expect(screen.getByText('Dialog content')).toBeInTheDocument();
 });
 

diff --git a/frontend/src/component/changeRequest/ChangeRequest.test.tsx b/frontend/src/component/changeRequest/ChangeRequest.test.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { FC } from 'react';
 import { render, screen, within, fireEvent } from '@testing-library/react';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
@@ -218,11 +219,11 @@ const otherRequests = (feature: string) => {
     });
 };
 
-const UnleashUiSetup: FC<{ path: string; pathTemplate: string }> = ({
-    children,
-    path,
-    pathTemplate,
-}) => (
+const UnleashUiSetup: FC<{
+    path: string;
+    pathTemplate: string;
+    children?: React.ReactNode;
+}> = ({ children, path, pathTemplate }) => (
     <UIProviderContainer>
         <AccessProvider>
             <MemoryRouter initialEntries={[path]}>

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { VFC, FC, ReactNode } from 'react';
 import { Box, styled, Typography } from '@mui/material';
 import type {
@@ -25,14 +26,16 @@ export const ChangeItemWrapper = styled(Box)({
     alignItems: 'center',
 });
 
-const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: '150px auto',
-    gridAutoFlow: 'column',
-    alignItems: 'center',
-    flexGrow: 1,
-    gap: theme.spacing(1),
-}));
+const ChangeItemInfo: FC<{ children?: React.ReactNode }> = styled(Box)(
+    ({ theme }) => ({
+        display: 'grid',
+        gridTemplateColumns: '150px auto',
+        gridAutoFlow: 'column',
+        alignItems: 'center',
+        flexGrow: 1,
+        gap: theme.spacing(1),
+    }),
+);
 
 const SegmentContainer = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'conflict',

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { VFC, FC, ReactNode } from 'react';
 import { Box, styled, Tooltip, Typography } from '@mui/material';
 import BlockIcon from '@mui/icons-material/Block';
@@ -36,22 +37,28 @@ const ChangeItemCreateEditDeleteWrapper = styled(Box)(({ theme }) => ({
     width: '100%',
 }));
 
-const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({
-    display: 'grid',
-    gridTemplateColumns: '150px auto',
-    gridAutoFlow: 'column',
-    alignItems: 'center',
-    flexGrow: 1,
-    gap: theme.spacing(1),
-}));
+const ChangeItemInfo: FC<{ children?: React.ReactNode }> = styled(Box)(
+    ({ theme }) => ({
+        display: 'grid',
+        gridTemplateColumns: '150px auto',
+        gridAutoFlow: 'column',
+        alignItems: 'center',
+        flexGrow: 1,
+        gap: theme.spacing(1),
+    }),
+);
 
-const StyledBox: FC = styled(Box)(({ theme }) => ({
-    marginTop: theme.spacing(2),
-}));
+const StyledBox: FC<{ children?: React.ReactNode }> = styled(Box)(
+    ({ theme }) => ({
+        marginTop: theme.spacing(2),
+    }),
+);
 
-const StyledTypography: FC = styled(Typography)(({ theme }) => ({
-    margin: `${theme.spacing(1)} 0`,
-}));
+const StyledTypography: FC<{ children?: React.ReactNode }> = styled(Typography)(
+    ({ theme }) => ({
+        margin: `${theme.spacing(1)} 0`,
+    }),
+);
 
 const hasNameField = (payload: unknown): payload is { name: string } =>
     typeof payload === 'object' && payload !== null && 'name' in payload;

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { FC } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { Box, Card, Typography, Link } from '@mui/material';
@@ -8,6 +9,7 @@ interface IFeatureToggleChanges {
     projectId: string;
     conflict?: string;
     onNavigate?: () => void;
+    children?: React.ReactNode;
 }
 
 export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({

diff --git a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
@@ -2,6 +2,7 @@ import type {
     IChangeRequestDeleteSegment,
     IChangeRequestUpdateSegment,
 } from 'component/changeRequest/changeRequest.types';
+import type React from 'react';
 import type { FC } from 'react';
 import EventDiff from 'component/events/EventDiff/EventDiff';
 import omit from 'lodash.omit';
@@ -42,15 +43,18 @@ export const SegmentDiff: FC<{
 };
 interface IStrategyTooltipLinkProps {
     change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment;
+    children?: React.ReactNode;
 }
 
-const StyledContainer: FC = styled('div')(({ theme }) => ({
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gridTemplateColumns: 'auto 1fr',
-    gap: theme.spacing(1),
-    alignItems: 'center',
-}));
+const StyledContainer: FC<{ children?: React.ReactNode }> = styled('div')(
+    ({ theme }) => ({
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridTemplateColumns: 'auto 1fr',
+        gap: theme.spacing(1),
+        alignItems: 'center',
+    }),
+);
 
 const Truncated = styled('div')(() => ({
     ...textTruncated,

diff --git a/...end/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx b/...end/src/component/changeRequest/ChangeRequest/StrategyTooltipLink/StrategyTooltipLink.tsx
@@ -3,6 +3,7 @@ import type {
     IChangeRequestDeleteStrategy,
     IChangeRequestUpdateStrategy,
 } from 'component/changeRequest/changeRequest.types';
+import type React from 'react';
 import type { FC } from 'react';
 import {
     formatStrategyName,
@@ -55,15 +56,18 @@ interface IStrategyTooltipLinkProps {
         | IChangeRequestUpdateStrategy
         | IChangeRequestDeleteStrategy;
     previousTitle?: string;
+    children?: React.ReactNode;
 }
 
-const StyledContainer: FC = styled('div')(({ theme }) => ({
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gridTemplateColumns: 'auto 1fr',
-    gap: theme.spacing(1),
-    alignItems: 'center',
-}));
+const StyledContainer: FC<{ children?: React.ReactNode }> = styled('div')(
+    ({ theme }) => ({
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridTemplateColumns: 'auto 1fr',
+        gap: theme.spacing(1),
+        alignItems: 'center',
+    }),
+);
 
 const Truncated = styled('div')(() => ({
     ...textTruncated,

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ApplyButton/ApplyButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ApplyButton/ApplyButton.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { FC } from 'react';
 
 import CheckBox from '@mui/icons-material/Check';
@@ -12,6 +13,7 @@ export const ApplyButton: FC<{
     onSchedule: () => void;
     onApply: () => void;
     variant?: 'create' | 'update';
+    children?: React.ReactNode;
 }> = ({ disabled, onSchedule, onApply, variant = 'create', children }) => {
     const projectId = useRequiredPathParam('projectId');
     const id = useRequiredPathParam('id');

diff --git a/...c/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx b/...c/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/AddCommentField.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { FC } from 'react';
 import { Box, styled, TextField, Tooltip } from '@mui/material';
 import { StyledAvatar } from './StyledAvatar';
@@ -13,6 +14,7 @@ export const AddCommentField: FC<{
     user: IUser | undefined;
     commentText: string;
     onTypeComment: (text: string) => void;
+    children?: React.ReactNode;
 }> = ({ user, commentText, onTypeComment, children }) => (
     <>
         <AddCommentWrapper>

diff --git a/...ent/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewers.tsx b/...ent/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewers.tsx
@@ -1,4 +1,5 @@
 import { Box, Paper, styled, Typography } from '@mui/material';
+import type React from 'react';
 import type { FC, ReactNode } from 'react';
 import { ConditionallyRender } from '../../../common/ConditionallyRender/ConditionallyRender';
 import { ChangeRequestRejections } from './ChangeRequestRejections';
@@ -23,10 +24,10 @@ export const ChangeRequestReviewersHeader: FC<{
     );
 };
 
-export const ChangeRequestReviewersWrapper: FC<{ header: ReactNode }> = ({
-    header,
-    children,
-}) => {
+export const ChangeRequestReviewersWrapper: FC<{
+    header: ReactNode;
+    children?: React.ReactNode;
+}> = ({ header, children }) => {
     return (
         <Paper
             elevation={0}

diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ReviewButton/ReviewButton.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import { type FC, useContext } from 'react';
 
 import CheckBox from '@mui/icons-material/Check';
@@ -13,6 +14,7 @@ export const ReviewButton: FC<{
     disabled: boolean;
     onReject: () => void;
     onApprove: () => void;
+    children?: React.ReactNode;
 }> = ({ disabled, onReject, onApprove, children }) => {
     const { isAdmin } = useContext(AccessContext);
     const projectId = useRequiredPathParam('projectId');