Skip to content

Commit 8f46bee

Browse files
aslilacaslilac
authored
chore: remove most usage of PropsWithChildren (#11859)
1 parent c2b6e20 commit 8f46bee

File tree

30 files changed

+156
-142
lines changed

30 files changed

+156
-142
lines changed

‎site/src/components/Conditionals/ChooseOne.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { Children, PropsWithChildren } from "react";
1+
import {
2+
Children,
3+
type FC,
4+
type PropsWithChildren,
5+
type ReactNode,
6+
} from "react";
27

38
export interface CondProps {
49
condition?: boolean;
10+
children?: ReactNode;
511
}
612

713
/**
@@ -11,9 +17,7 @@ export interface CondProps {
1117
* @param condition boolean expression indicating whether the child should be rendered, or undefined
1218
* @returns child. Note that Cond alone does not enforce the condition; it should be used inside ChooseOne.
1319
*/
14-
export const Cond = ({
15-
children,
16-
}: PropsWithChildren<CondProps>): JSX.Element => {
20+
export const Cond: FC<CondProps> = ({ children }) => {
1721
return <>{children}</>;
1822
};
1923

@@ -24,9 +28,7 @@ export const Cond = ({
2428
* @returns one of its children, or null if there are no children
2529
* @throws an error if its last child has a condition prop, or any non-final children do not have a condition prop
2630
*/
27-
export const ChooseOne = ({
28-
children,
29-
}: PropsWithChildren): JSX.Element | null => {
31+
export const ChooseOne: FC<PropsWithChildren> = ({ children }) => {
3032
const childArray = Children.toArray(children) as JSX.Element[];
3133
if (childArray.length === 0) {
3234
return null;

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import DialogActions from "@mui/material/DialogActions";
22
import { type Interpolation, type Theme } from "@emotion/react";
3-
import { type FC, type PropsWithChildren, type ReactNode } from "react";
3+
import { type FC, type ReactNode } from "react";
44
import {
55
Dialog,
66
DialogActionButtons,
7-
DialogActionButtonsProps,
7+
type DialogActionButtonsProps,
88
} from "../Dialog";
99
import type { ConfirmDialogType } from "../types";
1010

@@ -98,7 +98,7 @@ const styles = {
9898
* Quick-use version of the Dialog component with slightly alternative styles,
9999
* great to use for dialogs that don't have any interaction beyond yes / no.
100100
*/
101-
export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
101+
export const ConfirmDialog: FC<ConfirmDialogProps> = ({
102102
cancelText,
103103
confirmLoading,
104104
confirmText,

‎site/src/components/Expander/Expander.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { type Interpolation, type Theme } from "@emotion/react";
22
import Collapse from "@mui/material/Collapse";
33
import Link from "@mui/material/Link";
4+
import { type FC, type ReactNode } from "react";
45
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
5-
import { type FC, type PropsWithChildren } from "react";
66

77
export interface ExpanderProps {
88
expanded: boolean;
99
setExpanded: (val: boolean) => void;
10+
children?: ReactNode;
1011
}
1112

12-
export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
13+
export const Expander: FC<ExpanderProps> = ({
1314
expanded,
1415
setExpanded,
1516
children,

‎site/src/components/Form/Form.tsx

+16-14
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
type HTMLProps,
66
type PropsWithChildren,
77
useContext,
8+
ReactNode,
89
} from "react";
910
import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges";
1011
import { Stack } from "components/Stack/Stack";
@@ -67,19 +68,20 @@ export const VerticalForm: FC<HTMLProps<HTMLFormElement>> = ({
6768
);
6869
};
6970

70-
export const FormSection: FC<
71-
PropsWithChildren & {
72-
title: string | JSX.Element;
73-
description: string | JSX.Element;
74-
classes?: {
75-
root?: string;
76-
sectionInfo?: string;
77-
infoTitle?: string;
78-
};
79-
alpha?: boolean;
80-
deprecated?: boolean;
81-
}
82-
> = ({
71+
interface FormSectionProps {
72+
children?: ReactNode;
73+
title: ReactNode;
74+
description: ReactNode;
75+
classes?: {
76+
root?: string;
77+
sectionInfo?: string;
78+
infoTitle?: string;
79+
};
80+
alpha?: boolean;
81+
deprecated?: boolean;
82+
}
83+
84+
export const FormSection: FC<FormSectionProps> = ({
8385
children,
8486
title,
8587
description,
@@ -166,7 +168,7 @@ const styles = {
166168
},
167169
} satisfies Record<string, Interpolation<Theme>>;
168170

169-
export const FormFooter = (props: Exclude<FormFooterProps, "styles">) => (
171+
export const FormFooter: FC<Exclude<FormFooterProps, "styles">> = (props) => (
170172
<BaseFormFooter {...props} styles={footerStyles} />
171173
);
172174

‎site/src/components/FullPageForm/FullPageForm.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import {
99
export interface FullPageFormProps {
1010
title: string;
1111
detail?: ReactNode;
12+
children?: ReactNode;
1213
}
1314

14-
export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
15+
export const FullPageForm: FC<FullPageFormProps> = ({
1516
title,
1617
detail,
1718
children,

‎site/src/components/FullPageForm/FullPageHorizontalForm.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1+
import Button from "@mui/material/Button";
2+
import { type FC, type ReactNode } from "react";
13
import { Margins } from "components/Margins/Margins";
2-
import { FC, ReactNode } from "react";
34
import {
45
PageHeader,
56
PageHeaderTitle,
67
PageHeaderSubtitle,
78
} from "components/PageHeader/PageHeader";
8-
import Button from "@mui/material/Button";
99

1010
export interface FullPageHorizontalFormProps {
1111
title: string;
1212
detail?: ReactNode;
1313
onCancel?: () => void;
14+
children?: ReactNode;
1415
}
1516

16-
export const FullPageHorizontalForm: FC<
17-
React.PropsWithChildren<FullPageHorizontalFormProps>
18-
> = ({ title, detail, onCancel, children }) => {
17+
export const FullPageHorizontalForm: FC<FullPageHorizontalFormProps> = ({
18+
title,
19+
detail,
20+
onCancel,
21+
children,
22+
}) => {
1923
return (
2024
<Margins size="medium">
2125
<PageHeader

‎site/src/components/HelpTooltip/HelpTooltip.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ import {
77
type HTMLAttributes,
88
type ReactNode,
99
forwardRef,
10-
ComponentProps,
1110
} from "react";
1211
import { Stack } from "components/Stack/Stack";
1312
import { type CSSObject } from "@emotion/css";
1413
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
1514
import {
1615
Popover,
16+
type PopoverProps,
1717
PopoverContent,
18+
type PopoverContentProps,
1819
PopoverTrigger,
1920
usePopover,
2021
} from "components/Popover/Popover";
@@ -25,13 +26,11 @@ type Size = "small" | "medium";
2526

2627
export const HelpTooltipIcon = HelpIcon;
2728

28-
export const HelpTooltip: FC<ComponentProps<typeof Popover>> = (props) => {
29+
export const HelpTooltip: FC<PopoverProps> = (props) => {
2930
return <Popover mode="hover" {...props} />;
3031
};
3132

32-
export const HelpTooltipContent = (
33-
props: ComponentProps<typeof PopoverContent>,
34-
) => {
33+
export const HelpTooltipContent: FC<PopoverContentProps> = (props) => {
3534
const theme = useTheme();
3635

3736
return (
@@ -125,10 +124,12 @@ export const HelpTooltipText: FC<HTMLAttributes<HTMLParagraphElement>> = ({
125124
);
126125
};
127126

128-
export const HelpTooltipLink: FC<PropsWithChildren<{ href: string }>> = ({
129-
children,
130-
href,
131-
}) => {
127+
interface HelpTooltipLink {
128+
children?: ReactNode;
129+
href: string;
130+
}
131+
132+
export const HelpTooltipLink: FC<HelpTooltipLink> = ({ children, href }) => {
132133
return (
133134
<Link href={href} target="_blank" rel="noreferrer" css={styles.link}>
134135
<OpenInNewIcon css={styles.linkIcon} />

‎site/src/components/PageHeader/FullWidthPageHeader.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { type CSSObject, useTheme } from "@emotion/react";
2-
import { type FC, type PropsWithChildren } from "react";
2+
import { type FC, type PropsWithChildren, type ReactNode } from "react";
33

4-
export const FullWidthPageHeader: FC<
5-
PropsWithChildren & { sticky?: boolean }
6-
> = ({ children, sticky = true }) => {
4+
interface FullWidthPageHeaderProps {
5+
children?: ReactNode;
6+
sticky?: boolean;
7+
}
8+
9+
export const FullWidthPageHeader: FC<FullWidthPageHeaderProps> = ({
10+
children,
11+
sticky = true,
12+
}) => {
713
const theme = useTheme();
814
return (
915
<header

‎site/src/components/PageHeader/PageHeader.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { Stack } from "../Stack/Stack";
44
export interface PageHeaderProps {
55
actions?: ReactNode;
66
className?: string;
7+
children?: ReactNode;
78
}
89

9-
export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
10+
export const PageHeader: FC<PageHeaderProps> = ({
1011
children,
1112
actions,
1213
className,
@@ -48,9 +49,7 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
4849
);
4950
};
5051

51-
export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
52-
children,
53-
}) => {
52+
export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
5453
return (
5554
<h1
5655
css={{
@@ -67,9 +66,15 @@ export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
6766
);
6867
};
6968

70-
export const PageHeaderSubtitle: FC<
71-
PropsWithChildren<{ condensed?: boolean }>
72-
> = ({ children, condensed }) => {
69+
interface PageHeaderSubtitleProps {
70+
children?: ReactNode;
71+
condensed?: boolean;
72+
}
73+
74+
export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
75+
children,
76+
condensed,
77+
}) => {
7378
return (
7479
<h2
7580
css={(theme) => ({

‎site/src/components/PaginationWidget/PageButtons.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { type FC, type PropsWithChildren } from "react";
21
import Button from "@mui/material/Button";
32
import { useTheme } from "@emotion/react";
3+
import { type FC, type ReactNode } from "react";
44

55
type NumberedPageButtonProps = {
66
pageNumber: number;
@@ -31,9 +31,10 @@ export const NumberedPageButton: FC<NumberedPageButtonProps> = ({
3131
);
3232
};
3333

34-
type PlaceholderPageButtonProps = PropsWithChildren<{
34+
type PlaceholderPageButtonProps = {
3535
pagesOmitted: number;
36-
}>;
36+
children?: ReactNode;
37+
};
3738

3839
export const PlaceholderPageButton: FC<PlaceholderPageButtonProps> = ({
3940
pagesOmitted,
@@ -50,14 +51,14 @@ export const PlaceholderPageButton: FC<PlaceholderPageButtonProps> = ({
5051
);
5152
};
5253

53-
type BasePageButtonProps = PropsWithChildren<{
54+
type BasePageButtonProps = {
55+
children?: ReactNode;
56+
onClick?: () => void;
5457
name: string;
5558
"aria-label": string;
56-
57-
onClick?: () => void;
5859
highlighted?: boolean;
5960
disabled?: boolean;
60-
}>;
61+
};
6162

6263
const BasePageButton: FC<BasePageButtonProps> = ({
6364
children,

‎site/src/components/Popover/Popover.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const PopoverContext = createContext<PopoverContextValue | undefined>(
4040
undefined,
4141
);
4242

43-
interface PopoverProps {
43+
export interface PopoverProps {
4444
children: ReactNode | ((popover: PopoverContextValue) => ReactNode); // Allows inline usage
4545
mode?: TriggerMode;
4646
isDefaultOpen?: boolean;
@@ -112,7 +112,7 @@ export const PopoverTrigger = (
112112

113113
type Horizontal = "left" | "right";
114114

115-
type PopoverContentProps = Omit<
115+
export type PopoverContentProps = Omit<
116116
MuiPopoverProps,
117117
"open" | "onClose" | "anchorEl"
118118
> & {

‎site/src/components/Resources/ResourceCard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export interface ResourceCardProps {
7676
agentRow: (agent: WorkspaceAgent) => JSX.Element;
7777
}
7878

79-
const p = ({ children }: PropsWithChildren) => {
79+
const p: FC<PropsWithChildren> = ({ children }) => {
8080
const childrens = Children.toArray(children);
8181
if (childrens.every((child) => typeof child === "string")) {
8282
return <CopyableValue value={childrens.join("")}>{children}</CopyableValue>;

‎site/src/components/Resources/Resources.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { type Interpolation, type Theme } from "@emotion/react";
21
import Button from "@mui/material/Button";
2+
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
33
import { type FC, useState } from "react";
44
import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
55
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
66
import { Stack } from "../Stack/Stack";
77
import { ResourceCard } from "./ResourceCard";
8-
import { useTheme } from "@mui/material/styles";
98

109
const countAgents = (resource: WorkspaceResource) => {
1110
return resource.agents ? resource.agents.length : 0;
@@ -16,10 +15,7 @@ interface ResourcesProps {
1615
agentRow: (agent: WorkspaceAgent, numberOfAgents: number) => JSX.Element;
1716
}
1817

19-
export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
20-
resources,
21-
agentRow,
22-
}) => {
18+
export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
2319
const theme = useTheme();
2420
const [shouldDisplayHideResources, setShouldDisplayHideResources] =
2521
useState(false);

‎site/src/components/Resources/SSHButton/SSHButton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type Interpolation, type Theme } from "@emotion/react";
2-
import { type FC, type PropsWithChildren } from "react";
2+
import { type FC } from "react";
33
import {
44
HelpTooltipLink,
55
HelpTooltipLinksGroup,
@@ -24,7 +24,7 @@ export interface SSHButtonProps {
2424
sshPrefix?: string;
2525
}
2626

27-
export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
27+
export const SSHButton: FC<SSHButtonProps> = ({
2828
workspaceName,
2929
agentName,
3030
isDefaultOpen = false,

0 commit comments

Comments
 (0)