Skip to content

Commit 00b70ea

Browse files
aqandrewaqandrew
committed
refactor: extract TooltipProvder to definition of HelpTooltip
1 parent 4438af8 commit 00b70ea

File tree

16 files changed

+282
-319
lines changed

16 files changed

+282
-319
lines changed

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Tooltip,
1212
TooltipContent,
1313
type TooltipContentProps,
14+
TooltipProvider,
1415
TooltipTrigger,
1516
} from "components/Tooltip/Tooltip";
1617
import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
@@ -30,7 +31,11 @@ type Size = "small" | "medium";
3031
export const HelpTooltipIcon = CircleHelpIcon;
3132

3233
export const HelpTooltip: FC<TooltipProps> = (props) => {
33-
return <Tooltip delayDuration={0} {...props} />;
34+
return (
35+
<TooltipProvider>
36+
<Tooltip delayDuration={0} {...props} />
37+
</TooltipProvider>
38+
);
3439
};
3540

3641
export const HelpTooltipContent: FC<TooltipContentProps> = ({

‎site/src/modules/resources/AgentLatency.tsx

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
HelpTooltipTitle,
88
} from "components/HelpTooltip/HelpTooltip";
99
import { Stack } from "components/Stack/Stack";
10-
import { TooltipProvider, TooltipTrigger } from "components/Tooltip/Tooltip";
10+
import { TooltipTrigger } from "components/Tooltip/Tooltip";
1111
import type { FC } from "react";
1212
import { getLatencyColor } from "utils/latency";
1313

@@ -43,45 +43,43 @@ export const AgentLatency: FC<AgentLatencyProps> = ({ agent }) => {
4343
}
4444

4545
return (
46-
<TooltipProvider>
47-
<HelpTooltip>
48-
<TooltipTrigger asChild>
49-
<span
50-
role="presentation"
51-
aria-label="latency"
52-
css={{ cursor: "pointer", color: latency.color }}
53-
>
54-
{Math.round(latency.latency_ms)}ms
55-
</span>
56-
</TooltipTrigger>
57-
<HelpTooltipContent>
58-
<HelpTooltipTitle>Latency</HelpTooltipTitle>
59-
<HelpTooltipText>
60-
This is the latency overhead on non peer to peer connections. The
61-
first row is the preferred relay.
62-
</HelpTooltipText>
63-
<Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
64-
{Object.entries(agent.latency)
65-
.sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
66-
.map(([regionName, region]) => (
67-
<Stack
68-
direction="row"
69-
key={regionName}
70-
spacing={0.5}
71-
justifyContent="space-between"
72-
css={
73-
region.preferred && {
74-
color: theme.palette.text.primary,
75-
}
46+
<HelpTooltip>
47+
<TooltipTrigger asChild>
48+
<span
49+
role="presentation"
50+
aria-label="latency"
51+
css={{ cursor: "pointer", color: latency.color }}
52+
>
53+
{Math.round(latency.latency_ms)}ms
54+
</span>
55+
</TooltipTrigger>
56+
<HelpTooltipContent>
57+
<HelpTooltipTitle>Latency</HelpTooltipTitle>
58+
<HelpTooltipText>
59+
This is the latency overhead on non peer to peer connections. The
60+
first row is the preferred relay.
61+
</HelpTooltipText>
62+
<Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
63+
{Object.entries(agent.latency)
64+
.sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
65+
.map(([regionName, region]) => (
66+
<Stack
67+
direction="row"
68+
key={regionName}
69+
spacing={0.5}
70+
justifyContent="space-between"
71+
css={
72+
region.preferred && {
73+
color: theme.palette.text.primary,
7674
}
77-
>
78-
<strong>{regionName}</strong>
79-
{Math.round(region.latency_ms)}ms
80-
</Stack>
81-
))}
82-
</Stack>
83-
</HelpTooltipContent>
84-
</HelpTooltip>
85-
</TooltipProvider>
75+
}
76+
>
77+
<strong>{regionName}</strong>
78+
{Math.round(region.latency_ms)}ms
79+
</Stack>
80+
))}
81+
</Stack>
82+
</HelpTooltipContent>
83+
</HelpTooltip>
8684
);
8785
};

‎site/src/modules/resources/AgentOutdatedTooltip.tsx

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { Stack } from "components/Stack/Stack";
1212
import { RotateCcwIcon } from "lucide-react";
1313
import { useState, type FC } from "react";
1414
import { agentVersionStatus } from "../../utils/workspace";
15-
import { TooltipProvider, TooltipTrigger } from "components/Tooltip/Tooltip";
15+
import { TooltipTrigger } from "components/Tooltip/Tooltip";
1616

1717
type AgentOutdatedTooltipProps = {
1818
agent: WorkspaceAgent;
@@ -40,50 +40,48 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
4040
const text = `${opener} This can happen after you update Coder with running workspaces. To fix this, you can stop and start the workspace.`;
4141

4242
return (
43-
<TooltipProvider>
44-
<HelpTooltip open={isOpen} onOpenChange={setIsOpen}>
45-
<TooltipTrigger asChild>
46-
<span role="status" className="cursor-pointer">
47-
{status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
48-
</span>
49-
</TooltipTrigger>
50-
<HelpTooltipContent>
51-
<Stack spacing={1}>
52-
<div>
53-
<HelpTooltipTitle>{title}</HelpTooltipTitle>
54-
<HelpTooltipText>{text}</HelpTooltipText>
55-
</div>
43+
<HelpTooltip open={isOpen} onOpenChange={setIsOpen}>
44+
<TooltipTrigger asChild>
45+
<span role="status" className="cursor-pointer">
46+
{status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
47+
</span>
48+
</TooltipTrigger>
49+
<HelpTooltipContent>
50+
<Stack spacing={1}>
51+
<div>
52+
<HelpTooltipTitle>{title}</HelpTooltipTitle>
53+
<HelpTooltipText>{text}</HelpTooltipText>
54+
</div>
5655

57-
<Stack spacing={0.5}>
58-
<span className="font-semibold text-content-primary">
59-
Agent version
60-
</span>
61-
<span>{agent.version}</span>
62-
</Stack>
63-
64-
<Stack spacing={0.5}>
65-
<span className="font-semibold text-content-primary">
66-
Server version
67-
</span>
68-
<span>{serverVersion}</span>
69-
</Stack>
56+
<Stack spacing={0.5}>
57+
<span className="font-semibold text-content-primary">
58+
Agent version
59+
</span>
60+
<span>{agent.version}</span>
61+
</Stack>
7062

71-
<HelpTooltipLinksGroup>
72-
<HelpTooltipAction
73-
icon={RotateCcwIcon}
74-
onClick={() => {
75-
onUpdate();
76-
// TODO can we move this tooltip-closing logic to the definition of HelpTooltipAction?
77-
setIsOpen(false);
78-
}}
79-
ariaLabel="Update workspace"
80-
>
81-
Update workspace
82-
</HelpTooltipAction>
83-
</HelpTooltipLinksGroup>
63+
<Stack spacing={0.5}>
64+
<span className="font-semibold text-content-primary">
65+
Server version
66+
</span>
67+
<span>{serverVersion}</span>
8468
</Stack>
85-
</HelpTooltipContent>
86-
</HelpTooltip>
87-
</TooltipProvider>
69+
70+
<HelpTooltipLinksGroup>
71+
<HelpTooltipAction
72+
icon={RotateCcwIcon}
73+
onClick={() => {
74+
onUpdate();
75+
// TODO can we move this tooltip-closing logic to the definition of HelpTooltipAction?
76+
setIsOpen(false);
77+
}}
78+
ariaLabel="Update workspace"
79+
>
80+
Update workspace
81+
</HelpTooltipAction>
82+
</HelpTooltipLinksGroup>
83+
</Stack>
84+
</HelpTooltipContent>
85+
</HelpTooltip>
8886
);
8987
};

‎site/src/modules/resources/AgentStatus.tsx

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -266,22 +266,20 @@ const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
266266

267267
export const AgentStatus: FC<AgentStatusProps> = ({ agent }) => {
268268
return (
269-
<TooltipProvider>
270-
<ChooseOne>
271-
<Cond condition={agent.status === "connected"}>
272-
<ConnectedStatus agent={agent} />
273-
</Cond>
274-
<Cond condition={agent.status === "disconnected"}>
275-
<DisconnectedStatus />
276-
</Cond>
277-
<Cond condition={agent.status === "timeout"}>
278-
<TimeoutStatus agent={agent} />
279-
</Cond>
280-
<Cond>
281-
<ConnectingStatus />
282-
</Cond>
283-
</ChooseOne>
284-
</TooltipProvider>
269+
<ChooseOne>
270+
<Cond condition={agent.status === "connected"}>
271+
<ConnectedStatus agent={agent} />
272+
</Cond>
273+
<Cond condition={agent.status === "disconnected"}>
274+
<DisconnectedStatus />
275+
</Cond>
276+
<Cond condition={agent.status === "timeout"}>
277+
<TimeoutStatus agent={agent} />
278+
</Cond>
279+
<Cond>
280+
<ConnectingStatus />
281+
</Cond>
282+
</ChooseOne>
285283
);
286284
};
287285

‎site/src/modules/resources/SubAgentOutdatedTooltip.tsx

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
HelpTooltipTrigger,
1313
} from "components/HelpTooltip/HelpTooltip";
1414
import { Stack } from "components/Stack/Stack";
15-
import { TooltipProvider } from "components/Tooltip/Tooltip";
1615
import { RotateCcwIcon } from "lucide-react";
1716
import type { FC } from "react";
1817

@@ -39,32 +38,30 @@ export const SubAgentOutdatedTooltip: FC<SubAgentOutdatedTooltipProps> = ({
3938
const text = `${opener} This can happen if you modify your devcontainer.json file after the Dev Container has been created. To fix this, you can rebuild the Dev Container.`;
4039

4140
return (
42-
<TooltipProvider>
43-
<HelpTooltip>
44-
<HelpTooltipTrigger>
45-
<span role="status" className="cursor-pointer">
46-
Outdated
47-
</span>
48-
</HelpTooltipTrigger>
49-
<HelpTooltipContent>
50-
<Stack spacing={1}>
51-
<div>
52-
<HelpTooltipTitle>{title}</HelpTooltipTitle>
53-
<HelpTooltipText>{text}</HelpTooltipText>
54-
</div>
41+
<HelpTooltip>
42+
<HelpTooltipTrigger>
43+
<span role="status" className="cursor-pointer">
44+
Outdated
45+
</span>
46+
</HelpTooltipTrigger>
47+
<HelpTooltipContent>
48+
<Stack spacing={1}>
49+
<div>
50+
<HelpTooltipTitle>{title}</HelpTooltipTitle>
51+
<HelpTooltipText>{text}</HelpTooltipText>
52+
</div>
5553

56-
<HelpTooltipLinksGroup>
57-
<HelpTooltipAction
58-
icon={RotateCcwIcon}
59-
onClick={onUpdate}
60-
ariaLabel="Rebuild Dev Container"
61-
>
62-
Rebuild Dev Container
63-
</HelpTooltipAction>
64-
</HelpTooltipLinksGroup>
65-
</Stack>
66-
</HelpTooltipContent>
67-
</HelpTooltip>
68-
</TooltipProvider>
54+
<HelpTooltipLinksGroup>
55+
<HelpTooltipAction
56+
icon={RotateCcwIcon}
57+
onClick={onUpdate}
58+
ariaLabel="Rebuild Dev Container"
59+
>
60+
Rebuild Dev Container
61+
</HelpTooltipAction>
62+
</HelpTooltipLinksGroup>
63+
</Stack>
64+
</HelpTooltipContent>
65+
</HelpTooltip>
6966
);
7067
};

‎site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
useWorkspaceUpdate,
2323
WorkspaceUpdateDialogs,
2424
} from "../WorkspaceUpdateDialogs";
25-
import { TooltipProvider } from "components/Tooltip/Tooltip";
2625

2726
interface TooltipProps {
2827
workspace: Workspace;
@@ -32,15 +31,13 @@ export const WorkspaceOutdatedTooltip: FC<TooltipProps> = (props) => {
3231
const [isOpen, setIsOpen] = useState(false);
3332

3433
return (
35-
<TooltipProvider>
36-
<HelpTooltip open={isOpen} onOpenChange={setIsOpen}>
37-
<HelpTooltipTrigger size="small" hoverEffect={false}>
38-
<InfoIcon css={styles.icon} />
39-
<span className="sr-only">Outdated info</span>
40-
</HelpTooltipTrigger>
41-
<WorkspaceOutdatedTooltipContent isOpen={isOpen} {...props} />
42-
</HelpTooltip>
43-
</TooltipProvider>
34+
<HelpTooltip open={isOpen} onOpenChange={setIsOpen}>
35+
<HelpTooltipTrigger size="small" hoverEffect={false}>
36+
<InfoIcon css={styles.icon} />
37+
<span className="sr-only">Outdated info</span>
38+
</HelpTooltipTrigger>
39+
<WorkspaceOutdatedTooltipContent isOpen={isOpen} {...props} />
40+
</HelpTooltip>
4441
);
4542
};
4643

‎site/src/pages/AuditPage/AuditHelpTooltip.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
HelpTooltipTitle,
88
HelpTooltipTrigger,
99
} from "components/HelpTooltip/HelpTooltip";
10-
import { TooltipProvider } from "components/Tooltip/Tooltip";
1110
import type { FC } from "react";
1211
import { docs } from "utils/docs";
1312

@@ -19,20 +18,18 @@ const Language = {
1918

2019
export const AuditHelpTooltip: FC = () => {
2120
return (
22-
<TooltipProvider>
23-
<HelpTooltip>
24-
<HelpTooltipTrigger />
21+
<HelpTooltip>
22+
<HelpTooltipTrigger />
2523

26-
<HelpTooltipContent>
27-
<HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
28-
<HelpTooltipText>{Language.body}</HelpTooltipText>
29-
<HelpTooltipLinksGroup>
30-
<HelpTooltipLink href={docs("/admin/security/audit-logs")}>
31-
{Language.docs}
32-
</HelpTooltipLink>
33-
</HelpTooltipLinksGroup>
34-
</HelpTooltipContent>
35-
</HelpTooltip>
36-
</TooltipProvider>
24+
<HelpTooltipContent>
25+
<HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
26+
<HelpTooltipText>{Language.body}</HelpTooltipText>
27+
<HelpTooltipLinksGroup>
28+
<HelpTooltipLink href={docs("/admin/security/audit-logs")}>
29+
{Language.docs}
30+
</HelpTooltipLink>
31+
</HelpTooltipLinksGroup>
32+
</HelpTooltipContent>
33+
</HelpTooltip>
3734
);
3835
};

0 commit comments

Comments
 (0)