Skip to content

Commit 22e0ae4

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Merge branch 'main' of https://github.com/coder/coder into bq/refactor-new-ws-header
2 parents 7d875b8 + a1341ee commit 22e0ae4

File tree

32 files changed

+344
-242
lines changed

32 files changed

+344
-242
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/Pill/Pill.stories.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import { Pill } from "./Pill";
1+
import { Pill, PillSpinner } from "./Pill";
22
import type { Meta, StoryObj } from "@storybook/react";
33
import InfoOutlined from "@mui/icons-material/InfoOutlined";
44

55
const meta: Meta<typeof Pill> = {
66
title: "components/Pill",
77
component: Pill,
8+
args: {
9+
children: "Default",
10+
},
811
};
912

1013
export default meta;
1114
type Story = StoryObj<typeof Pill>;
1215

13-
export const Default: Story = {
14-
args: {
15-
children: "Default",
16-
},
17-
};
16+
export const Default: Story = {};
1817

1918
export const Danger: Story = {
2019
args: {
@@ -72,3 +71,12 @@ export const WithIcon: Story = {
7271
icon: <InfoOutlined />,
7372
},
7473
};
74+
75+
export const WithSpinner: Story = {
76+
args: {
77+
icon: <PillSpinner />,
78+
},
79+
parameters: {
80+
chromatic: { delay: 700 },
81+
},
82+
};

‎site/src/components/Pill/Pill.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import {
77
} from "react";
88
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
99
import type { ThemeRole } from "theme/experimental";
10+
import CircularProgress, {
11+
CircularProgressProps,
12+
} from "@mui/material/CircularProgress";
1013

1114
export type PillType = ThemeRole | keyof typeof themeOverrides;
1215

@@ -81,3 +84,19 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
8184
);
8285
},
8386
);
87+
88+
export const PillSpinner = (props: CircularProgressProps) => {
89+
return (
90+
<CircularProgress
91+
size={PILL_ICON_SIZE}
92+
css={(theme) => ({
93+
color: theme.experimental.l1.text,
94+
// It is necessary to align it with the MUI Icons internal padding
95+
"& svg": {
96+
transform: "scale(.75)",
97+
},
98+
})}
99+
{...props}
100+
/>
101+
);
102+
};

‎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 />

0 commit comments

Comments
 (0)