Skip to content

Commit 2ee6acb

Browse files
ammarioKira-Pilot
ammario
and
Kira-Pilot
authored
Upgrade frontend to React 18 (#3353)
Co-authored-by: Kira Pilot <kira.pilot23@gmail.com>
1 parent 6fde537 commit 2ee6acb

File tree

121 files changed

+2491
-2319
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+2491
-2319
lines changed

‎site/package.json

+10-9
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,17 @@
3939
"cron-parser": "4.5.0",
4040
"cronstrue": "2.11.0",
4141
"dayjs": "1.11.4",
42-
"formik": "2.2.9",
42+
"formik": "^2.2.9",
4343
"front-matter": "4.0.2",
4444
"history": "5.3.0",
4545
"just-debounce-it": "3.0.1",
46-
"react": "17.0.2",
47-
"react-dom": "17.0.2",
48-
"react-helmet": "6.1.0",
46+
"react": "^18.2.0",
47+
"react-dom": "18.2.0",
48+
"react-helmet-async": "1.3.0",
4949
"react-markdown": "8.0.3",
5050
"react-router-dom": "6.3.0",
5151
"sourcemapped-stacktrace": "1.1.11",
52+
"swr": "1.3.0",
5253
"tzdata": "1.0.30",
5354
"uuid": "8.3.2",
5455
"xstate": "4.32.1",
@@ -70,13 +71,13 @@
7071
"@storybook/addon-links": "6.5.9",
7172
"@storybook/react": "6.4.22",
7273
"@testing-library/jest-dom": "5.16.4",
73-
"@testing-library/react": "12.1.5",
74-
"@testing-library/user-event": "14.3.0",
74+
"@testing-library/react": "^13.3.0",
75+
"@testing-library/user-event": "^14.4.3",
7576
"@types/express": "4.17.13",
7677
"@types/jest": "27.4.1",
7778
"@types/node": "14.18.22",
78-
"@types/react": "17.0.44",
79-
"@types/react-dom": "17.0.16",
79+
"@types/react": "18.0.15",
80+
"@types/react-dom": "18.0.6",
8081
"@types/react-helmet": "6.1.5",
8182
"@types/superagent": "4.1.15",
8283
"@types/uuid": "8.3.4",
@@ -105,7 +106,7 @@
105106
"jest-runner-eslint": "1.0.0",
106107
"jest-websocket-mock": "2.3.0",
107108
"mini-css-extract-plugin": "2.6.1",
108-
"msw": "0.42.0",
109+
"msw": "^0.44.2",
109110
"prettier": "2.7.1",
110111
"prettier-plugin-organize-imports": "3.0.0",
111112
"react-hot-loader": "4.13.0",

‎site/src/AppRouter.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
3535
export const AppRouter: FC = () => {
3636
const xServices = useContext(XServiceContext)
3737
const permissions = useSelector(xServices.authXService, selectPermissions)
38-
3938
return (
4039
<Suspense fallback={<></>}>
4140
<Routes>

‎site/src/Main.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { inspect } from "@xstate/inspect"
2-
import ReactDOM from "react-dom"
2+
import { createRoot } from "react-dom/client"
33
import { Interpreter } from "xstate"
44
import { App } from "./app"
55

@@ -25,7 +25,11 @@ const main = () => {
2525
██████▀▄█ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀▀ ▀▀▀▀ ▀
2626
`)
2727
const element = document.getElementById("root")
28-
ReactDOM.render(<App />, element)
28+
if (element === null) {
29+
throw new Error("root element is null")
30+
}
31+
const root = createRoot(element)
32+
root.render(<App />)
2933
}
3034

3135
main()

‎site/src/__mocks__/react-markdown.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { FC } from "react"
1+
import { FC, PropsWithChildren } from "react"
22

3-
const ReactMarkdown: FC = ({ children }) => {
3+
const ReactMarkdown: FC<PropsWithChildren<unknown>> = ({ children }) => {
44
return <div data-testid="markdown">{children}</div>
55
}
66

‎site/src/app.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import CssBaseline from "@material-ui/core/CssBaseline"
22
import ThemeProvider from "@material-ui/styles/ThemeProvider"
33
import { FC } from "react"
4+
import { HelmetProvider } from "react-helmet-async"
45
import { BrowserRouter as Router } from "react-router-dom"
56
import { AppRouter } from "./AppRouter"
67
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary"
@@ -12,15 +13,17 @@ import { XServiceProvider } from "./xServices/StateContext"
1213
export const App: FC = () => {
1314
return (
1415
<Router>
15-
<ThemeProvider theme={dark}>
16-
<CssBaseline />
17-
<ErrorBoundary>
18-
<XServiceProvider>
19-
<AppRouter />
20-
<GlobalSnackbar />
21-
</XServiceProvider>
22-
</ErrorBoundary>
23-
</ThemeProvider>
16+
<HelmetProvider>
17+
<ThemeProvider theme={dark}>
18+
<CssBaseline />
19+
<ErrorBoundary>
20+
<XServiceProvider>
21+
<AppRouter />
22+
<GlobalSnackbar />
23+
</XServiceProvider>
24+
</ErrorBoundary>
25+
</ThemeProvider>
26+
</HelmetProvider>
2427
</Router>
2528
)
2629
}

‎site/src/components/AppLink/AppLink.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
22
import Link from "@material-ui/core/Link"
33
import { makeStyles } from "@material-ui/core/styles"
44
import ComputerIcon from "@material-ui/icons/Computer"
5-
import { FC } from "react"
5+
import { FC, PropsWithChildren } from "react"
66
import * as TypesGen from "../../api/typesGenerated"
77
import { generateRandomString } from "../../util/random"
88

@@ -17,7 +17,12 @@ export interface AppLinkProps {
1717
appIcon?: TypesGen.WorkspaceApp["icon"]
1818
}
1919

20-
export const AppLink: FC<AppLinkProps> = ({ userName, workspaceName, appName, appIcon }) => {
20+
export const AppLink: FC<PropsWithChildren<AppLinkProps>> = ({
21+
userName,
22+
workspaceName,
23+
appName,
24+
appIcon,
25+
}) => {
2126
const styles = useStyles()
2227
const href = `/@${userName}/${workspaceName}/apps/${appName}`
2328

‎site/src/components/AvatarData/AvatarData.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Avatar from "@material-ui/core/Avatar"
22
import Link from "@material-ui/core/Link"
33
import { makeStyles } from "@material-ui/core/styles"
4-
import { FC } from "react"
4+
import { FC, PropsWithChildren } from "react"
55
import { Link as RouterLink } from "react-router-dom"
66
import { firstLetter } from "../../util/firstLetter"
77
import {
@@ -18,7 +18,7 @@ export interface AvatarDataProps {
1818
avatar?: React.ReactNode
1919
}
2020

21-
export const AvatarData: FC<AvatarDataProps> = ({
21+
export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
2222
title,
2323
subtitle,
2424
link,

‎site/src/components/BorderedMenu/BorderedMenu.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import Popover, { PopoverProps } from "@material-ui/core/Popover"
22
import { fade, makeStyles } from "@material-ui/core/styles"
3-
import { FC } from "react"
3+
import { FC, PropsWithChildren } from "react"
44

55
type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
66

77
export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
88
variant?: BorderedMenuVariant
99
}
1010

11-
export const BorderedMenu: FC<BorderedMenuProps> = ({ children, variant, ...rest }) => {
11+
export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
12+
children,
13+
variant,
14+
...rest
15+
}) => {
1216
const styles = useStyles()
1317

1418
return (

‎site/src/components/BorderedMenuRow/BorderedMenuRow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ interface BorderedMenuRowProps {
2626
onClick?: () => void
2727
}
2828

29-
export const BorderedMenuRow: FC<BorderedMenuRowProps> = ({
29+
export const BorderedMenuRow: FC<React.PropsWithChildren<BorderedMenuRowProps>> = ({
3030
active,
3131
description,
3232
Icon,

‎site/src/components/BuildsTable/BuildsTable.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,10 @@ export interface BuildsTableProps {
3030
className?: string
3131
}
3232

33-
export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
33+
export const BuildsTable: FC<React.PropsWithChildren<BuildsTableProps>> = ({
34+
builds,
35+
className,
36+
}) => {
3437
const { username, workspace: workspaceName } = useParams()
3538
const isLoading = !builds
3639
const theme: Theme = useTheme()

‎site/src/components/CliAuthToken/CliAuthToken.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export interface CliAuthTokenProps {
88
sessionToken: string
99
}
1010

11-
export const CliAuthToken: FC<CliAuthTokenProps> = ({ sessionToken }) => {
11+
export const CliAuthToken: FC<React.PropsWithChildren<CliAuthTokenProps>> = ({ sessionToken }) => {
1212
const styles = useStyles()
1313
return (
1414
<Paper className={styles.container}>

‎site/src/components/CodeBlock/CodeBlock.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ export interface CodeBlockProps {
99
className?: string
1010
}
1111

12-
export const CodeBlock: FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
12+
export const CodeBlock: FC<React.PropsWithChildren<CodeBlockProps>> = ({
13+
lines,
14+
ctas,
15+
className = "",
16+
}) => {
1317
const styles = useStyles()
1418

1519
return (

‎site/src/components/CodeExample/CodeExample.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface CodeExampleProps {
1414
/**
1515
* Component to show single-line code examples, with a copy button
1616
*/
17-
export const CodeExample: FC<CodeExampleProps> = ({
17+
export const CodeExample: FC<React.PropsWithChildren<CodeExampleProps>> = ({
1818
code,
1919
className,
2020
buttonClassName,

‎site/src/components/ConfirmDialog/ConfirmDialog.test.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { fireEvent, render } from "@testing-library/react"
22
import { FC } from "react"
3-
import { act } from "react-dom/test-utils"
43
import { WrapperComponent } from "../../testHelpers/renderHelpers"
54
import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
65

76
namespace Helpers {
8-
export const Component: FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
7+
export const Component: FC<React.PropsWithChildren<ConfirmDialogProps>> = (
8+
props: ConfirmDialogProps,
9+
) => {
910
return (
1011
<WrapperComponent>
1112
<ConfirmDialog {...props} />
@@ -116,9 +117,7 @@ describe("ConfirmDialog", () => {
116117

117118
// When
118119
const { getByText } = render(<Helpers.Component {...props} />)
119-
act(() => {
120-
fireEvent.click(getByText("CANCEL"))
121-
})
120+
fireEvent.click(getByText("CANCEL"))
122121

123122
// Then
124123
expect(onCloseMock).toBeCalledTimes(1)
@@ -140,9 +139,7 @@ describe("ConfirmDialog", () => {
140139

141140
// When
142141
const { getByText } = render(<Helpers.Component {...props} />)
143-
act(() => {
144-
fireEvent.click(getByText("CONFIRM"))
145-
})
142+
fireEvent.click(getByText("CONFIRM"))
146143

147144
// Then
148145
expect(onCloseMock).toBeCalledTimes(0)

‎site/src/components/ConfirmDialog/ConfirmDialog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => ({
7878
* Quick-use version of the Dialog component with slightly alternative styles,
7979
* great to use for dialogs that don't have any interaction beyond yes / no.
8080
*/
81-
export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
81+
export const ConfirmDialog: React.FC<React.PropsWithChildren<ConfirmDialogProps>> = ({
8282
cancelText,
8383
confirmLoading,
8484
confirmText,

‎site/src/components/CopyButton/CopyButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const Language = {
2222
/**
2323
* Copy button used inside the CodeBlock component internally
2424
*/
25-
export const CopyButton: React.FC<CopyButtonProps> = ({
25+
export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
2626
text,
2727
ctaCopy,
2828
wrapperClassName = "",

‎site/src/components/CreateUserForm/CreateUserForm.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const validationSchema = Yup.object({
3535
username: nameValidator(Language.usernameLabel),
3636
})
3737

38-
export const CreateUserForm: FC<CreateUserFormProps> = ({
38+
export const CreateUserForm: FC<React.PropsWithChildren<CreateUserFormProps>> = ({
3939
onSubmit,
4040
onCancel,
4141
formErrors,

‎site/src/components/DeleteWorkspaceDialog/DeleteWorkspaceDialog.tsx

+3-5
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ export interface DeleteWorkspaceDialogProps {
1212
handleCancel: () => void
1313
}
1414

15-
export const DeleteWorkspaceDialog: React.FC<DeleteWorkspaceDialogProps> = ({
16-
isOpen,
17-
handleCancel,
18-
handleConfirm,
19-
}) => (
15+
export const DeleteWorkspaceDialog: React.FC<
16+
React.PropsWithChildren<DeleteWorkspaceDialogProps>
17+
> = ({ isOpen, handleCancel, handleConfirm }) => (
2018
<ConfirmDialog
2119
type="delete"
2220
hideCancel={false}

‎site/src/components/EmptyState/EmptyState.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export interface EmptyStateProps {
2323
* EmptyState's props extend the [Material UI Box component](https://material-ui.com/components/box/)
2424
* that you can directly pass props through to to customize the shape and layout of it.
2525
*/
26-
export const EmptyState: FC<EmptyStateProps> = (props) => {
26+
export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (props) => {
2727
const { message, description, cta, descriptionClassName, className, ...boxProps } = props
2828
const styles = useStyles()
2929

‎site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export interface EnterpriseSnackbarProps extends MuiSnackbarProps {
2525
*
2626
* See original component's Material UI documentation here: https://material-ui.com/components/snackbars/
2727
*/
28-
export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
28+
export const EnterpriseSnackbar: FC<React.PropsWithChildren<EnterpriseSnackbarProps>> = ({
2929
onClose,
3030
variant = "info",
3131
ContentProps = {},

‎site/src/components/ErrorBoundary/ErrorBoundary.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Component, ReactNode } from "react"
1+
import React, { Component, ReactNode } from "react"
22
import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"
33

4-
type ErrorBoundaryProps = Record<string, unknown>
4+
type ErrorBoundaryProps = React.PropsWithChildren<unknown>
55

66
interface ErrorBoundaryState {
77
error: Error | null

‎site/src/components/ErrorSummary/ErrorSummary.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export interface ErrorSummaryProps {
2323
defaultMessage?: string
2424
}
2525

26-
export const ErrorSummary: FC<ErrorSummaryProps> = ({
26+
export const ErrorSummary: FC<React.PropsWithChildren<ErrorSummaryProps>> = ({
2727
error,
2828
retry,
2929
dismissible,

‎site/src/components/Footer/Footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface FooterProps {
1818
buildInfo?: TypesGen.BuildInfoResponse
1919
}
2020

21-
export const Footer: React.FC<FooterProps> = ({ buildInfo }) => {
21+
export const Footer: React.FC<React.PropsWithChildren<FooterProps>> = ({ buildInfo }) => {
2222
const styles = useFooterStyles()
2323

2424
const githubUrl = `https://github.com/coder/coder/issues/new?labels=needs+grooming&body=${encodeURIComponent(`Version: [\`${buildInfo?.version}\`](${buildInfo?.external_url})

‎site/src/components/FormCloseButton/FormCloseButton.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ export interface FormCloseButtonProps {
88
onClose: () => void
99
}
1010

11-
export const FormCloseButton: React.FC<FormCloseButtonProps> = ({ onClose }) => {
11+
export const FormCloseButton: React.FC<React.PropsWithChildren<FormCloseButtonProps>> = ({
12+
onClose,
13+
}) => {
1214
const styles = useStyles()
1315

1416
useEffect(() => {

‎site/src/components/FormFooter/FormFooter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
2828
},
2929
}))
3030

31-
export const FormFooter: FC<FormFooterProps> = ({
31+
export const FormFooter: FC<React.PropsWithChildren<FormFooterProps>> = ({
3232
onCancel,
3333
isLoading,
3434
submitLabel = Language.defaultSubmitLabel,

‎site/src/components/FormSection/FormSection.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,11 @@ export const useStyles = makeStyles((theme) => ({
3939
},
4040
}))
4141

42-
export const FormSection: FC<FormSectionProps> = ({ title, description, children }) => {
42+
export const FormSection: FC<React.PropsWithChildren<FormSectionProps>> = ({
43+
title,
44+
description,
45+
children,
46+
}) => {
4347
const styles = useStyles()
4448

4549
return (

0 commit comments

Comments
 (0)