Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2ee6acb

Browse files
Upgrade frontend to React 18 (#3353)
Co-authored-by: Kira Pilot <kira.pilot23@gmail.com>
1 parent6fde537 commit2ee6acb

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

Lines changed: 10 additions & 9 deletions
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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ const AuditPage = lazy(() => import("./pages/AuditPage/AuditPage"))
3535
exportconstAppRouter:FC=()=>{
3636
constxServices=useContext(XServiceContext)
3737
constpermissions=useSelector(xServices.authXService,selectPermissions)
38-
3938
return(
4039
<Suspensefallback={<></>}>
4140
<Routes>

‎site/src/Main.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import{inspect}from"@xstate/inspect"
2-
importReactDOMfrom"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
constelement=document.getElementById("root")
28-
ReactDOM.render(<App/>,element)
28+
if(element===null){
29+
thrownewError("root element is null")
30+
}
31+
constroot=createRoot(element)
32+
root.render(<App/>)
2933
}
3034

3135
main()

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

Lines changed: 2 additions & 2 deletions
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-
constReactMarkdown:FC=({ children})=>{
3+
constReactMarkdown:FC<PropsWithChildren<unknown>>=({ children})=>{
44
return<divdata-testid="markdown">{children}</div>
55
}
66

‎site/src/app.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
importCssBaselinefrom"@material-ui/core/CssBaseline"
22
importThemeProviderfrom"@material-ui/styles/ThemeProvider"
33
import{FC}from"react"
4+
import{HelmetProvider}from"react-helmet-async"
45
import{BrowserRouterasRouter}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
exportconstApp:FC=()=>{
1314
return(
1415
<Router>
15-
<ThemeProvidertheme={dark}>
16-
<CssBaseline/>
17-
<ErrorBoundary>
18-
<XServiceProvider>
19-
<AppRouter/>
20-
<GlobalSnackbar/>
21-
</XServiceProvider>
22-
</ErrorBoundary>
23-
</ThemeProvider>
16+
<HelmetProvider>
17+
<ThemeProvidertheme={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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"
22
importLinkfrom"@material-ui/core/Link"
33
import{makeStyles}from"@material-ui/core/styles"
44
importComputerIconfrom"@material-ui/icons/Computer"
5-
import{FC}from"react"
5+
import{FC,PropsWithChildren}from"react"
66
import*asTypesGenfrom"../../api/typesGenerated"
77
import{generateRandomString}from"../../util/random"
88

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

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

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
importAvatarfrom"@material-ui/core/Avatar"
22
importLinkfrom"@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{LinkasRouterLink}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-
exportconstAvatarData:FC<AvatarDataProps>=({
21+
exportconstAvatarData:FC<PropsWithChildren<AvatarDataProps>>=({
2222
title,
2323
subtitle,
2424
link,

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
importPopover,{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
typeBorderedMenuVariant="admin-dropdown"|"user-dropdown"
66

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

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

1418
return(

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

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

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

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

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

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

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

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

11-
exportconstCliAuthToken:FC<CliAuthTokenProps>=({ sessionToken})=>{
11+
exportconstCliAuthToken:FC<React.PropsWithChildren<CliAuthTokenProps>>=({ sessionToken})=>{
1212
conststyles=useStyles()
1313
return(
1414
<PaperclassName={styles.container}>

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

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

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

1519
return(

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

Lines changed: 1 addition & 1 deletion
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-
exportconstCodeExample:FC<CodeExampleProps>=({
17+
exportconstCodeExample:FC<React.PropsWithChildren<CodeExampleProps>>=({
1818
code,
1919
className,
2020
buttonClassName,

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

Lines changed: 5 additions & 8 deletions
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
namespaceHelpers{
8-
exportconstComponent:FC<ConfirmDialogProps>=(props:ConfirmDialogProps)=>{
7+
exportconstComponent: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

Lines changed: 1 addition & 1 deletion
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-
exportconstConfirmDialog:React.FC<ConfirmDialogProps>=({
81+
exportconstConfirmDialog:React.FC<React.PropsWithChildren<ConfirmDialogProps>>=({
8282
cancelText,
8383
confirmLoading,
8484
confirmText,

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

Lines changed: 1 addition & 1 deletion
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-
exportconstCopyButton:React.FC<CopyButtonProps>=({
25+
exportconstCopyButton:React.FC<React.PropsWithChildren<CopyButtonProps>>=({
2626
text,
2727
ctaCopy,
2828
wrapperClassName="",

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

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

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

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

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

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

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

Lines changed: 1 addition & 1 deletion
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-
exportconstEmptyState:FC<EmptyStateProps>=(props)=>{
26+
exportconstEmptyState:FC<React.PropsWithChildren<EmptyStateProps>>=(props)=>{
2727
const{ message, description, cta, descriptionClassName, className, ...boxProps}=props
2828
conststyles=useStyles()
2929

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

Lines changed: 1 addition & 1 deletion
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-
exportconstEnterpriseSnackbar:FC<EnterpriseSnackbarProps>=({
28+
exportconstEnterpriseSnackbar:FC<React.PropsWithChildren<EnterpriseSnackbarProps>>=({
2929
onClose,
3030
variant="info",
3131
ContentProps={},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import{Component,ReactNode}from"react"
1+
importReact,{Component,ReactNode}from"react"
22
import{RuntimeErrorState}from"../RuntimeErrorState/RuntimeErrorState"
33

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

66
interfaceErrorBoundaryState{
77
error:Error|null

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

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

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

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

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

21-
exportconstFooter:React.FC<FooterProps>=({ buildInfo})=>{
21+
exportconstFooter:React.FC<React.PropsWithChildren<FooterProps>>=({ buildInfo})=>{
2222
conststyles=useFooterStyles()
2323

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

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

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

11-
exportconstFormCloseButton:React.FC<FormCloseButtonProps>=({ onClose})=>{
11+
exportconstFormCloseButton:React.FC<React.PropsWithChildren<FormCloseButtonProps>>=({
12+
onClose,
13+
})=>{
1214
conststyles=useStyles()
1315

1416
useEffect(()=>{

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

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

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

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

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

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

4549
return(

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp