Skip to content

Commit 2104d9e

Browse files
aslilacaslilac
committed
🧹
1 parent ea2748d commit 2104d9e

File tree

9 files changed

+62
-44
lines changed

9 files changed

+62
-44
lines changed

‎site/src/components/ActiveUserChart/ActiveUserChart.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Box from "@mui/material/Box";
21
import { Theme } from "@mui/material/styles";
32
import useTheme from "@mui/styles/useTheme";
43
import {
@@ -42,7 +41,7 @@ ChartJS.register(
4241
const USER_LIMIT_DISPLAY_THRESHOLD = 60;
4342

4443
export interface ActiveUserChartProps {
45-
data: { date: string; amount: number }[];
44+
data: Array<{ date: string; amount: number }>;
4645
interval: "day" | "week";
4746
userLimit: number | undefined;
4847
}
@@ -137,7 +136,7 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
137136
);
138137
};
139138

140-
export const ActiveUsersTitle = () => {
139+
export const ActiveUsersTitle: FC = () => {
141140
return (
142141
<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
143142
Active Users

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// This is the only place MuiAvatar can be used
22
// eslint-disable-next-line no-restricted-imports -- Read above
3-
import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
4-
import { FC, useId } from "react";
3+
import MuiAvatar, {
4+
type AvatarProps as MuiAvatarProps,
5+
} from "@mui/material/Avatar";
6+
import { type FC, useId } from "react";
57
import { css, type Interpolation, type Theme } from "@emotion/react";
6-
import { Box } from "@mui/system";
78
import { visuallyHidden } from "@mui/utils";
89

910
export type AvatarProps = MuiAvatarProps & {
@@ -78,6 +79,8 @@ export const AvatarIcon: FC<AvatarIconProps> = ({ src, alt }) => {
7879
const hookId = useId();
7980
const avatarId = `${hookId}-avatar`;
8081

82+
// We use a `visuallyHidden` element instead of setting `alt` to avoid
83+
// splatting the text out on the screen if the image fails to load.
8184
return (
8285
<>
8386
<img

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -249,9 +249,9 @@ export const NavbarView: FC<NavbarViewProps> = ({
249249
css={{
250250
display: "flex",
251251
marginLeft: "auto",
252-
gap: 2,
252+
gap: 16,
253253
alignItems: "center",
254-
paddingRight: 2,
254+
paddingRight: 16,
255255
}}
256256
>
257257
{proxyContextValue && (

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export const OptionConfig = (props: OptionConfigProps) => {
142142
: theme.palette.background.paperLight,
143143
display: "inline-flex",
144144
alignItems: "center",
145-
borderRadius: 0.25,
145+
borderRadius: 2,
146146
padding: "0 8px",
147147
border: `1px solid ${borderColor}`,
148148
}}
@@ -171,7 +171,7 @@ export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
171171
backgroundColor: source ? "rgba(0, 0, 0, 0.7)" : theme.palette.divider,
172172
lineHeight: 1,
173173
padding: "2px 4px",
174-
borderRadius: 0.25,
174+
borderRadius: 2,
175175
}}
176176
>
177177
{children}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ const OptionsTable: FC<OptionsTableProps> = ({ options, additionalValues }) => {
6363
<OptionDescription>{option.description}</OptionDescription>
6464
<div
6565
css={{
66-
marginTop: 3,
66+
marginTop: 24,
6767
display: "flex",
6868
flexWrap: "wrap",
69-
gap: 1,
69+
gap: 8,
7070
}}
7171
>
7272
{option.flag && (

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

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
2-
ReactElement,
3-
ReactNode,
2+
type FC,
3+
type ReactElement,
4+
type ReactNode,
45
cloneElement,
56
createContext,
67
useContext,
@@ -38,28 +39,32 @@ const PopoverContext = createContext<PopoverContextValue | undefined>(
3839
undefined,
3940
);
4041

41-
export const Popover = (props: {
42+
interface PopoverProps {
4243
children: ReactNode | ((popover: PopoverContextValue) => ReactNode); // Allows inline usage
4344
mode?: TriggerMode;
4445
isDefaultOpen?: boolean;
46+
}
47+
48+
export const Popover: FC<PopoverProps> = ({
49+
children,
50+
mode,
51+
isDefaultOpen,
4552
}) => {
4653
const hookId = useId();
47-
const [isOpen, setIsOpen] = useState(props.isDefaultOpen ?? false);
54+
const [isOpen, setIsOpen] = useState(isDefaultOpen ?? false);
4855
const triggerRef = useRef<HTMLElement>(null);
4956

5057
const value: PopoverContextValue = {
5158
isOpen,
5259
setIsOpen,
5360
triggerRef,
5461
id: `${hookId}-popover`,
55-
mode: props.mode ?? "click",
62+
mode: mode ?? "click",
5663
};
5764

5865
return (
5966
<PopoverContext.Provider value={value}>
60-
{typeof props.children === "function"
61-
? props.children(value)
62-
: props.children}
67+
{typeof children === "function" ? children(value) : children}
6368
</PopoverContext.Provider>
6469
);
6570
};
@@ -102,14 +107,19 @@ export const PopoverTrigger = (props: { children: TriggerElement }) => {
102107

103108
type Horizontal = "left" | "right";
104109

105-
export const PopoverContent = (
106-
props: Omit<MuiPopoverProps, "open" | "onClose" | "anchorEl"> & {
107-
horizontal?: Horizontal;
108-
},
109-
) => {
110+
type PopoverContentProps = Omit<
111+
MuiPopoverProps,
112+
"open" | "onClose" | "anchorEl"
113+
> & {
114+
horizontal?: Horizontal;
115+
};
116+
117+
export const PopoverContent: FC<PopoverContentProps> = ({
118+
horizontal = "left",
119+
...popoverProps
120+
}) => {
110121
const popover = usePopover();
111122
const [isReady, setIsReady] = useState(false);
112-
const horizontal = props.horizontal ?? "left";
113123
const hoverMode = popover.mode === "hover";
114124

115125
// This is a hack to make sure the popover is not rendered until the trigger
@@ -143,7 +153,7 @@ export const PopoverContent = (
143153
}}
144154
{...horizontalProps(horizontal)}
145155
{...modeProps(popover)}
146-
{...props}
156+
{...popoverProps}
147157
id={popover.id}
148158
open={popover.isOpen}
149159
onClose={() => popover.setIsOpen(false)}

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import Button, { type ButtonProps } from "@mui/material/Button";
22
import { useTheme } from "@emotion/react";
33
import { type FC, forwardRef } from "react";
44

5-
export const PrimaryAgentButton: FC<ButtonProps> = ({
6-
className,
7-
...attrs
8-
}) => {
5+
export const PrimaryAgentButton: FC<ButtonProps> = ({ children, ...attrs }) => {
96
const theme = useTheme();
107

118
return (
@@ -24,14 +21,20 @@ export const PrimaryAgentButton: FC<ButtonProps> = ({
2421
},
2522
}}
2623
{...attrs}
27-
/>
24+
>
25+
{children}
26+
</Button>
2827
);
2928
};
3029

3130
// eslint-disable-next-line react/display-name -- Name is inferred from variable name
3231
export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
3332
(props, ref) => {
34-
const { className, ...attrs } = props;
35-
return <Button ref={ref} className={className} {...attrs} />;
33+
const { children, ...attrs } = props;
34+
return (
35+
<Button ref={ref} {...attrs}>
36+
{children}
37+
</Button>
38+
);
3639
},
3740
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const meta: Meta<typeof PortForwardPopoverView> = {
1515
css={(theme) => ({
1616
width: 304,
1717
border: `1px solid ${theme.palette.divider}`,
18-
borderRadius: 1,
18+
borderRadius: 8,
1919
backgroundColor: theme.palette.background.paper,
2020
})}
2121
>

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,13 @@ export interface PortForwardButtonProps {
3434
}
3535

3636
export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
37+
const { agent } = props;
38+
3739
const theme = useTheme();
3840
const portsQuery = useQuery({
39-
queryKey: ["portForward", props.agent.id],
40-
queryFn: () => getAgentListeningPorts(props.agent.id),
41-
enabled: props.agent.status === "connected",
41+
queryKey: ["portForward", agent.id],
42+
queryFn: () => getAgentListeningPorts(agent.id),
43+
enabled: agent.status === "connected",
4244
refetchInterval: 5_000,
4345
});
4446

@@ -115,15 +117,16 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
115117
: "The forwarded ports are exclusively accessible to you."}
116118
</HelpTooltipText>
117119
<div css={{ marginTop: 12 }}>
118-
{ports?.map((p) => {
120+
{ports?.map((port) => {
119121
const url = portForwardURL(
120122
host,
121-
p.port,
123+
port.port,
122124
agent.name,
123125
workspaceName,
124126
username,
125127
);
126-
const label = p.process_name !== "" ? p.process_name : p.port;
128+
const label =
129+
port.process_name !== "" ? port.process_name : port.port;
127130
return (
128131
<Link
129132
underline="none"
@@ -137,7 +140,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
137140
paddingBottom: 4,
138141
fontWeight: 500,
139142
}}
140-
key={p.port}
143+
key={port.port}
141144
href={url}
142145
target="_blank"
143146
rel="noreferrer"
@@ -146,13 +149,13 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
146149
{label}
147150
<span
148151
css={{
149-
ml: "auto",
152+
marginLeft: "auto",
150153
color: theme.palette.text.secondary,
151154
fontSize: 13,
152155
fontWeight: 400,
153156
}}
154157
>
155-
{p.port}
158+
{port.port}
156159
</span>
157160
</Link>
158161
);

0 commit comments

Comments
 (0)