Skip to content

Commit 6833e6b

Browse files
aslilacaslilac
committed
🧹
1 parent d6717f3 commit 6833e6b

15 files changed

+137
-93
lines changed

‎site/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
"@storybook/addon-essentials": "7.5.2",
105105
"@storybook/addon-links": "7.5.2",
106106
"@storybook/addon-mdx-gfm": "7.5.2",
107-
"@storybook/addon-themes": "^7.6.4",
107+
"@storybook/addon-themes": "7.6.4",
108108
"@storybook/react": "7.5.2",
109109
"@storybook/react-vite": "7.5.2",
110110
"@swc/core": "1.3.38",

‎site/pnpm-lock.yaml

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/components/Dashboard/Navbar/NavbarView.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import type { Meta, StoryObj } from "@storybook/react";
2+
import { chromatic } from "testHelpers/chromatic";
23
import { MockUser, MockUser2 } from "testHelpers/entities";
34
import { NavbarView } from "./NavbarView";
45

56
const meta: Meta<typeof NavbarView> = {
67
title: "components/NavbarView",
8+
parameters: { chromatic },
79
component: NavbarView,
810
args: {
911
user: MockUser,

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,7 @@ const styles = {
456456
},
457457
link: (theme) => css`
458458
align-items: center;
459-
color: ${theme.colors.gray[6]};
459+
color: ${theme.palette.text.secondary};
460460
display: flex;
461461
flex: 1;
462462
font-size: 16px;
@@ -470,7 +470,7 @@ const styles = {
470470
}
471471
472472
&:hover {
473-
background-color: ${theme.palette.action.hover};
473+
background-color: ${theme.experimental.l2.hover.background};
474474
}
475475
476476
${theme.breakpoints.up("md")} {

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

Lines changed: 10 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -426,28 +426,14 @@ export const AgentRow: FC<AgentRowProps> = ({
426426
</AutoSizer>
427427
</Collapse>
428428

429-
<div css={styles.logsPanelButtons}>
430-
{showLogs ? (
431-
<button
432-
css={[styles.logsPanelButton, styles.toggleLogsButton]}
433-
onClick={() => {
434-
setShowLogs((v) => !v);
435-
}}
436-
>
437-
<DropdownArrow close />
438-
Hide logs
439-
</button>
440-
) : (
441-
<button
442-
css={[styles.logsPanelButton, styles.toggleLogsButton]}
443-
onClick={() => {
444-
setShowLogs((v) => !v);
445-
}}
446-
>
447-
<DropdownArrow />
448-
Show logs
449-
</button>
450-
)}
429+
<div css={{ display: "flex" }}>
430+
<button
431+
css={styles.logsPanelButton}
432+
onClick={() => setShowLogs((v) => !v)}
433+
>
434+
<DropdownArrow close={showLogs} />
435+
{showLogs ? "Hide" : "Show"} logs
436+
</button>
451437
</div>
452438
</div>
453439
)}
@@ -673,10 +659,6 @@ const styles = {
673659
borderTop: `1px solid ${theme.palette.divider}`,
674660
}),
675661

676-
logsPanelButtons: {
677-
display: "flex",
678-
},
679-
680662
logsPanelButton: (theme) => ({
681663
textAlign: "left",
682664
background: "transparent",
@@ -689,21 +671,18 @@ const styles = {
689671
alignItems: "center",
690672
gap: 8,
691673
whiteSpace: "nowrap",
674+
width: "100%",
692675

693676
"&:hover": {
694677
color: theme.palette.text.primary,
695-
backgroundColor: theme.colors.gray[14],
678+
backgroundColor: theme.experimental.l2.hover.background,
696679
},
697680

698681
"& svg": {
699682
color: "inherit",
700683
},
701684
}),
702685

703-
toggleLogsButton: {
704-
width: "100%",
705-
},
706-
707686
buttonSkeleton: {
708687
borderRadius: 4,
709688
},

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

Lines changed: 11 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,31 @@
1-
import { PortForwardPopoverView } from "./PortForwardButton";
1+
import { PortForwardButton } from "./PortForwardButton";
22
import type { Meta, StoryObj } from "@storybook/react";
33
import {
44
MockListeningPortsResponse,
55
MockWorkspaceAgent,
66
} from "testHelpers/entities";
77

8-
const meta: Meta<typeof PortForwardPopoverView> = {
9-
title: "components/PortForwardPopoverView",
10-
component: PortForwardPopoverView,
11-
decorators: [
12-
(Story) => (
13-
<div
14-
css={(theme) => ({
15-
width: 304,
16-
border: `1px solid ${theme.palette.divider}`,
17-
borderRadius: 8,
18-
backgroundColor: theme.palette.background.paper,
19-
})}
20-
>
21-
<Story />
22-
</div>
23-
),
24-
],
8+
const meta: Meta<typeof PortForwardButton> = {
9+
title: "components/PortForwardButton",
10+
component: PortForwardButton,
2511
args: {
2612
agent: MockWorkspaceAgent,
2713
},
2814
};
2915

3016
export default meta;
31-
type Story = StoryObj<typeof PortForwardPopoverView>;
17+
type Story = StoryObj<typeof PortForwardButton>;
3218

33-
export const WithPorts: Story = {
19+
export const Example: Story = {
3420
args: {
35-
ports: MockListeningPortsResponse.ports,
21+
storybook: {
22+
portsQueryData: MockListeningPortsResponse,
23+
},
3624
},
3725
};
3826

39-
export const Empty: Story = {
27+
export const Loading: Story = {
4028
args: {
41-
ports: [],
29+
storybook: {},
4230
},
4331
};

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

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { getAgentListeningPorts } from "api/api";
1010
import type {
1111
WorkspaceAgent,
1212
WorkspaceAgentListeningPort,
13+
WorkspaceAgentListeningPortsResponse,
1314
} from "api/typesGenerated";
1415
import { portForwardURL } from "utils/portForward";
1516
import { type ClassName, useClassName } from "hooks/useClassName";
@@ -32,34 +33,43 @@ export interface PortForwardButtonProps {
3233
username: string;
3334
workspaceName: string;
3435
agent: WorkspaceAgent;
36+
37+
/**
38+
* Only for use in Storybook
39+
*/
40+
storybook?: {
41+
portsQueryData?: WorkspaceAgentListeningPortsResponse;
42+
};
3543
}
3644

3745
export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
38-
const { agent } = props;
46+
const { agent, storybook } = props;
3947

4048
const paper = useClassName(classNames.paper, []);
4149

4250
const portsQuery = useQuery({
4351
queryKey: ["portForward", agent.id],
4452
queryFn: () => getAgentListeningPorts(agent.id),
45-
enabled: agent.status === "connected",
53+
enabled: !storybook && agent.status === "connected",
4654
refetchInterval: 5_000,
4755
});
4856

57+
const data = storybook ? storybook.portsQueryData : portsQuery.data;
58+
4959
return (
5060
<Popover>
5161
<PopoverTrigger>
52-
<AgentButton disabled={!portsQuery.data}>
62+
<AgentButton disabled={!data}>
5363
{DisplayAppNameMap["port_forwarding_helper"]}
54-
{portsQuery.data ? (
55-
<div css={styles.portCount}>{portsQuery.data.ports.length}</div>
64+
{data ? (
65+
<div css={styles.portCount}>{data.ports.length}</div>
5666
) : (
5767
<CircularProgress size={10} css={{ marginLeft: 8 }} />
5868
)}
5969
</AgentButton>
6070
</PopoverTrigger>
6171
<PopoverContent horizontal="right" classes={{ paper }}>
62-
<PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />
72+
<PortForwardPopoverView {...props} ports={data?.ports} />
6373
</PopoverContent>
6474
</Popover>
6575
);
@@ -204,7 +214,7 @@ const styles = {
204214
display: "flex",
205215
alignItems: "center",
206216
justifyContent: "center",
207-
backgroundColor: theme.colors.gray[11],
217+
backgroundColor: theme.experimental.l2.background,
208218
marginLeft: 8,
209219
}),
210220

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { PortForwardPopoverView } from "./PortForwardButton";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import {
4+
MockListeningPortsResponse,
5+
MockWorkspaceAgent,
6+
} from "testHelpers/entities";
7+
8+
const meta: Meta<typeof PortForwardPopoverView> = {
9+
title: "components/PortForwardPopoverView",
10+
component: PortForwardPopoverView,
11+
decorators: [
12+
(Story) => (
13+
<div
14+
css={(theme) => ({
15+
width: 304,
16+
border: `1px solid ${theme.palette.divider}`,
17+
borderRadius: 8,
18+
backgroundColor: theme.palette.background.paper,
19+
})}
20+
>
21+
<Story />
22+
</div>
23+
),
24+
],
25+
args: {
26+
agent: MockWorkspaceAgent,
27+
},
28+
};
29+
30+
export default meta;
31+
type Story = StoryObj<typeof PortForwardPopoverView>;
32+
33+
export const WithPorts: Story = {
34+
args: {
35+
ports: MockListeningPortsResponse.ports,
36+
},
37+
};
38+
39+
export const Empty: Story = {
40+
args: {
41+
ports: [],
42+
},
43+
};

‎site/src/components/WorkspaceBuildLogs/Logs.tsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { type FC, type ReactNode, useMemo } from "react";
55
import AnsiToHTML from "ansi-to-html";
66
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
77

8+
const convert = new AnsiToHTML();
9+
810
export interface Line {
911
time: string;
1012
output: string;
@@ -16,9 +18,10 @@ export interface LogsProps {
1618
lines: Line[];
1719
hideTimestamps?: boolean;
1820
className?: string;
21+
children?: ReactNode;
1922
}
2023

21-
export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
24+
export const Logs: FC<LogsProps> = ({
2225
hideTimestamps,
2326
lines,
2427
className = "",
@@ -50,16 +53,23 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
5053

5154
export const logLineHeight = 20;
5255

53-
const convert = new AnsiToHTML();
54-
55-
export const LogLine: FC<{
56+
interface LogLineProps {
5657
line: Line;
5758
hideTimestamp?: boolean;
5859
number?: number;
5960
style?: React.CSSProperties;
6061
sourceIcon?: ReactNode;
6162
maxNumber?: number;
62-
}> = ({ line, hideTimestamp, number, maxNumber, sourceIcon, style }) => {
63+
}
64+
65+
export const LogLine: FC<LogLineProps> = ({
66+
line,
67+
hideTimestamp,
68+
number,
69+
maxNumber,
70+
sourceIcon,
71+
style,
72+
}) => {
6373
const output = useMemo(() => {
6474
return convert.toHtml(line.output.split(/\r/g).pop() as string);
6575
}, [line.output]);
@@ -120,15 +130,15 @@ const styles = {
120130
padding: "0 32px",
121131

122132
"&.error": {
123-
backgroundColor: theme.palette.error.dark,
133+
backgroundColor: theme.experimental.roles.error.background,
124134
},
125135

126136
"&.debug": {
127-
backgroundColor: theme.palette.background.paper,
137+
backgroundColor: theme.experimental.roles.info.background,
128138
},
129139

130140
"&.warn": {
131-
backgroundColor: theme.palette.warning.dark,
141+
backgroundColor: theme.experimental.roles.warning.background,
132142
},
133143
}),
134144
space: {

‎site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { Meta, StoryObj } from "@storybook/react";
2-
import { WorkspaceBuildLogs } from "./WorkspaceBuildLogs";
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { chromatic } from "testHelpers/chromatic";
33
import { MockWorkspaceBuildLogs } from "testHelpers/entities";
4+
import { WorkspaceBuildLogs } from "./WorkspaceBuildLogs";
45

56
const meta: Meta<typeof WorkspaceBuildLogs> = {
67
title: "components/WorkspaceBuildLogs",
8+
parameters: { chromatic },
79
component: WorkspaceBuildLogs,
810
};
911

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Meta, StoryObj } from "@storybook/react";
2+
import { chromatic } from "testHelpers/chromatic";
23
import {
34
mockApiError,
45
MockTemplate,
@@ -11,6 +12,7 @@ import { CreateWorkspacePageView } from "./CreateWorkspacePageView";
1112

1213
const meta: Meta<typeof CreateWorkspacePageView> = {
1314
title: "pages/CreateWorkspacePage",
15+
parameters: { chromatic },
1416
component: CreateWorkspacePageView,
1517
args: {
1618
defaultName: "",

0 commit comments

Comments
 (0)