Skip to content

Commit a24c3b4

Browse files
aslilacaslilac
authored
chore: cleanup inline prop type definitions (coder#11317)
1 parent cf17fab commit a24c3b4

File tree

28 files changed

+304
-219
lines changed

28 files changed

+304
-219
lines changed

‎site/src/components/Dashboard/LicenseBanner/LicenseBanner.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
import { type FC } from "react";
12
import { useDashboard } from "components/Dashboard/DashboardProvider";
23
import { LicenseBannerView } from "./LicenseBannerView";
34

4-
export const LicenseBanner: React.FC = () => {
5+
export const LicenseBanner: FC = () => {
56
const { entitlements } = useDashboard();
67
const { errors, warnings } = entitlements;
78

8-
if (errors.length > 0 || warnings.length > 0) {
9-
return <LicenseBannerView errors={errors} warnings={warnings} />;
10-
} else {
9+
if (errors.length === 0 && warnings.length === 0) {
1110
return null;
1211
}
12+
13+
return <LicenseBannerView errors={errors} warnings={warnings} />;
1314
};

‎site/src/components/Dashboard/ServiceBanner/ServiceBanner.tsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
1+
import { type FC } from "react";
12
import { useDashboard } from "components/Dashboard/DashboardProvider";
23
import { ServiceBannerView } from "./ServiceBannerView";
34

4-
export const ServiceBanner: React.FC = () => {
5+
export const ServiceBanner: FC = () => {
56
const { appearance } = useDashboard();
67
const { message, background_color, enabled } =
78
appearance.config.service_banner;
89

9-
if (!enabled) {
10+
if (!enabled || message === undefined || background_color === undefined) {
1011
return null;
1112
}
1213

13-
if (message !== undefined && background_color !== undefined) {
14-
return (
15-
<ServiceBannerView
16-
message={message}
17-
backgroundColor={background_color}
18-
isPreview={appearance.isPreview}
19-
/>
20-
);
21-
} else {
22-
return null;
23-
}
14+
return (
15+
<ServiceBannerView
16+
message={message}
17+
backgroundColor={background_color}
18+
isPreview={appearance.isPreview}
19+
/>
20+
);
2421
};

‎site/src/components/DeploySettingsLayout/Header.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import Button from "@mui/material/Button";
22
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
3-
import type { FC } from "react";
3+
import type { FC, ReactNode } from "react";
44
import { useTheme } from "@emotion/react";
55
import { Stack } from "components/Stack/Stack";
66

7-
export const Header: FC<{
8-
title: string | JSX.Element;
9-
description?: string | JSX.Element;
7+
interface HeaderProps {
8+
title: ReactNode;
9+
description?: ReactNode;
1010
secondary?: boolean;
1111
docsHref?: string;
12-
}> = ({ title, description, docsHref, secondary }) => {
12+
}
13+
14+
export const Header: FC<HeaderProps> = ({
15+
title,
16+
description,
17+
docsHref,
18+
secondary,
19+
}) => {
1320
const theme = useTheme();
1421

1522
return (

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
2-
import { type ReactNode } from "react";
2+
import { type FC, type ReactNode } from "react";
33
import { ConfirmDialogType } from "./types";
44
import { type Interpolation, type Theme } from "@emotion/react";
55
import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
@@ -30,7 +30,7 @@ const typeToColor = (type: ConfirmDialogType): LoadingButtonProps["color"] => {
3030
/**
3131
* Quickly handles most modals actions, some combination of a cancel and confirm button
3232
*/
33-
export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
33+
export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
3434
cancelText = "Cancel",
3535
confirmText = "Confirm",
3636
confirmLoading = false,
@@ -159,13 +159,7 @@ const styles = {
159159
export type DialogProps = MuiDialogProps;
160160

161161
/**
162-
* Wrapper around Material UI's Dialog component. Conveniently exports all of
163-
* Dialog's components in one import, so for example `<DialogContent />` becomes
164-
* `<Dialog.Content />` etc. Also contains some custom Dialog components listed below.
165-
*
166-
* See original component's Material UI documentation here: https://material-ui.com/components/dialogs/
162+
* Re-export of MUI's Dialog component, for convenience.
163+
* @link See original documentation here: https://mui.com/material-ui/react-dialog/
167164
*/
168-
export const Dialog: React.FC<DialogProps> = (props) => {
169-
// Wrapped so we can add custom attributes below
170-
return <MuiDialog {...props} />;
171-
};
165+
export { MuiDialog as Dialog };

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

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { type Interpolation, type Theme } from "@emotion/react";
22
import Tooltip from "@mui/material/Tooltip";
3-
import { WorkspaceAgent } from "api/typesGenerated";
4-
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
53
import WarningRounded from "@mui/icons-material/WarningRounded";
4+
import Link from "@mui/material/Link";
5+
import { type FC } from "react";
6+
import type { WorkspaceAgent } from "api/typesGenerated";
7+
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
68
import {
79
HelpTooltip,
810
HelpTooltipContent,
911
HelpTooltipText,
1012
HelpTooltipTitle,
1113
} from "components/HelpTooltip/HelpTooltip";
12-
import Link from "@mui/material/Link";
1314
import { PopoverTrigger } from "components/Popover/Popover";
1415

1516
// If we think in the agent status and lifecycle into a single enum/state I’d
@@ -18,7 +19,7 @@ import { PopoverTrigger } from "components/Popover/Popover";
1819
// connected:ready, connected:shutting_down, connected:shutdown_timeout,
1920
// connected:shutdown_error, connected:off.
2021

21-
const ReadyLifecycle = () => {
22+
const ReadyLifecycle: FC = () => {
2223
return (
2324
<div
2425
role="status"
@@ -29,7 +30,7 @@ const ReadyLifecycle = () => {
2930
);
3031
};
3132

32-
const StartingLifecycle: React.FC = () => {
33+
const StartingLifecycle: FC = () => {
3334
return (
3435
<Tooltip title="Starting...">
3536
<div
@@ -41,9 +42,11 @@ const StartingLifecycle: React.FC = () => {
4142
);
4243
};
4344

44-
const StartTimeoutLifecycle: React.FC<{
45+
interface AgentStatusProps {
4546
agent: WorkspaceAgent;
46-
}> = ({ agent }) => {
47+
}
48+
49+
const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
4750
return (
4851
<HelpTooltip>
4952
<PopoverTrigger role="status" aria-label="Agent timeout">
@@ -68,9 +71,7 @@ const StartTimeoutLifecycle: React.FC<{
6871
);
6972
};
7073

71-
const StartErrorLifecycle: React.FC<{
72-
agent: WorkspaceAgent;
73-
}> = ({ agent }) => {
74+
const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
7475
return (
7576
<HelpTooltip>
7677
<PopoverTrigger role="status" aria-label="Start error">
@@ -94,7 +95,7 @@ const StartErrorLifecycle: React.FC<{
9495
);
9596
};
9697

97-
const ShuttingDownLifecycle: React.FC = () => {
98+
const ShuttingDownLifecycle: FC = () => {
9899
return (
99100
<Tooltip title="Stopping...">
100101
<div
@@ -106,9 +107,7 @@ const ShuttingDownLifecycle: React.FC = () => {
106107
);
107108
};
108109

109-
const ShutdownTimeoutLifecycle: React.FC<{
110-
agent: WorkspaceAgent;
111-
}> = ({ agent }) => {
110+
const ShutdownTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
112111
return (
113112
<HelpTooltip>
114113
<PopoverTrigger role="status" aria-label="Stop timeout">
@@ -132,9 +131,7 @@ const ShutdownTimeoutLifecycle: React.FC<{
132131
);
133132
};
134133

135-
const ShutdownErrorLifecycle: React.FC<{
136-
agent: WorkspaceAgent;
137-
}> = ({ agent }) => {
134+
const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
138135
return (
139136
<HelpTooltip>
140137
<PopoverTrigger role="status" aria-label="Stop error">
@@ -158,7 +155,7 @@ const ShutdownErrorLifecycle: React.FC<{
158155
);
159156
};
160157

161-
const OffLifecycle: React.FC = () => {
158+
const OffLifecycle: FC = () => {
162159
return (
163160
<Tooltip title="Stopped">
164161
<div
@@ -170,9 +167,7 @@ const OffLifecycle: React.FC = () => {
170167
);
171168
};
172169

173-
const ConnectedStatus: React.FC<{
174-
agent: WorkspaceAgent;
175-
}> = ({ agent }) => {
170+
const ConnectedStatus: FC<AgentStatusProps> = ({ agent }) => {
176171
// This is to support legacy agents that do not support
177172
// reporting the lifecycle_state field.
178173
if (agent.scripts.length === 0) {
@@ -208,7 +203,7 @@ const ConnectedStatus: React.FC<{
208203
);
209204
};
210205

211-
const DisconnectedStatus: React.FC = () => {
206+
const DisconnectedStatus: FC = () => {
212207
return (
213208
<Tooltip title="Disconnected">
214209
<div
@@ -220,7 +215,7 @@ const DisconnectedStatus: React.FC = () => {
220215
);
221216
};
222217

223-
const ConnectingStatus: React.FC = () => {
218+
const ConnectingStatus: FC = () => {
224219
return (
225220
<Tooltip title="Connecting...">
226221
<div
@@ -232,9 +227,7 @@ const ConnectingStatus: React.FC = () => {
232227
);
233228
};
234229

235-
const TimeoutStatus: React.FC<{
236-
agent: WorkspaceAgent;
237-
}> = ({ agent }) => {
230+
const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
238231
return (
239232
<HelpTooltip>
240233
<PopoverTrigger role="status" aria-label="Timeout">
@@ -258,9 +251,7 @@ const TimeoutStatus: React.FC<{
258251
);
259252
};
260253

261-
export const AgentStatus: React.FC<{
262-
agent: WorkspaceAgent;
263-
}> = ({ agent }) => {
254+
export const AgentStatus: FC<AgentStatusProps> = ({ agent }) => {
264255
return (
265256
<ChooseOne>
266257
<Cond condition={agent.status === "connected"}>

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,19 @@ import type { WorkspaceAgent } from "api/typesGenerated";
33
import { agentVersionStatus, getDisplayVersionStatus } from "utils/workspace";
44
import { AgentOutdatedTooltip } from "./AgentOutdatedTooltip";
55

6-
export const AgentVersion: FC<{
6+
interface AgentVersionProps {
77
agent: WorkspaceAgent;
88
serverVersion: string;
99
serverAPIVersion: string;
1010
onUpdate: () => void;
11-
}> = ({ agent, serverVersion, serverAPIVersion, onUpdate }) => {
11+
}
12+
13+
export const AgentVersion: FC<AgentVersionProps> = ({
14+
agent,
15+
serverVersion,
16+
serverAPIVersion,
17+
onUpdate,
18+
}) => {
1219
const { status } = getDisplayVersionStatus(
1320
agent.version,
1421
serverVersion,

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { WorkspaceApp } from "api/typesGenerated";
2-
import { FC } from "react";
31
import ComputerIcon from "@mui/icons-material/Computer";
2+
import { type FC } from "react";
3+
import type { WorkspaceApp } from "api/typesGenerated";
44

5-
export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
5+
interface BaseIconProps {
6+
app: WorkspaceApp;
7+
}
8+
9+
export const BaseIcon: FC<BaseIconProps> = ({ app }) => {
610
return app.icon ? (
711
<img
812
alt={`${app.display_name} Icon`}
913
src={app.icon}
10-
style={{
11-
pointerEvents: "none",
12-
}}
14+
style={{ pointerEvents: "none" }}
1315
/>
1416
) : (
1517
<ComputerIcon />

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

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@ import Tooltip from "@mui/material/Tooltip";
33
import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
44
import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
55
import { type FC, useState } from "react";
6-
import { css } from "@emotion/react";
6+
import { css, type Interpolation, type Theme } from "@emotion/react";
77
import { CopyableValue } from "components/CopyableValue/CopyableValue";
88

99
const Language = {
1010
showLabel: "Show value",
1111
hideLabel: "Hide value",
1212
};
1313

14-
export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
14+
interface SensitiveValueProps {
15+
value: string;
16+
}
17+
18+
export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
1519
const [shouldDisplay, setShouldDisplay] = useState(false);
1620
const displayValue = shouldDisplay ? value : "••••••••";
1721
const buttonLabel = shouldDisplay ? Language.hideLabel : Language.showLabel;
@@ -29,28 +33,12 @@ export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
2933
gap: 4,
3034
}}
3135
>
32-
<CopyableValue
33-
value={value}
34-
css={{
35-
// 22px is the button width
36-
width: "calc(100% - 22px)",
37-
overflow: "hidden",
38-
whiteSpace: "nowrap",
39-
textOverflow: "ellipsis",
40-
}}
41-
>
36+
<CopyableValue value={value} css={styles.value}>
4237
{displayValue}
4338
</CopyableValue>
4439
<Tooltip title={buttonLabel}>
4540
<IconButton
46-
css={css`
47-
color: inherit;
48-
49-
& .MuiSvgIcon-root {
50-
width: 16px;
51-
height: 16px;
52-
}
53-
`}
41+
css={styles.button}
5442
onClick={() => {
5543
setShouldDisplay((value) => !value);
5644
}}
@@ -63,3 +51,22 @@ export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
6351
</div>
6452
);
6553
};
54+
55+
const styles = {
56+
value: {
57+
// 22px is the button width
58+
width: "calc(100% - 22px)",
59+
overflow: "hidden",
60+
whiteSpace: "nowrap",
61+
textOverflow: "ellipsis",
62+
},
63+
64+
button: css`
65+
color: inherit;
66+
67+
& .MuiSvgIcon-root {
68+
width: 16px;
69+
height: 16px;
70+
}
71+
`,
72+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/RichParameterInput/RichParameterInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
160160
);
161161
};
162162

163-
const RichParameterField: React.FC<RichParameterInputProps> = ({
163+
const RichParameterField: FC<RichParameterInputProps> = ({
164164
disabled,
165165
onChange,
166166
parameter,

0 commit comments

Comments
 (0)