Skip to content

Commit 75c9fdf

Browse files
aqandrewaqandrew
committed
refactor: replace PopoverTrigger with TooltipTrigger in
AgentOutdatedTooltip
1 parent e230f38 commit 75c9fdf

File tree

2 files changed

+48
-47
lines changed

2 files changed

+48
-47
lines changed

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
} from "@emotion/react";
77
import Link from "@mui/material/Link";
88
import { TooltipContentProps, TooltipProps } from "@radix-ui/react-tooltip";
9-
import { usePopover } from "components/deprecated/Popover/Popover";
109
import { Stack } from "components/Stack/Stack";
1110
import {
1211
Tooltip,
@@ -43,7 +42,7 @@ export const HelpTooltipContent: FC<TooltipContentProps> = ({
4342
align="start"
4443
{...props}
4544
className={cn(
46-
"w-[320px] p-5 bg-surface-secondary border-surface-quaternary",
45+
"w-[320px] p-5 bg-surface-secondary border-surface-quaternary text-sm",
4746
className,
4847
)}
4948
/>
@@ -153,19 +152,12 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
153152
onClick,
154153
ariaLabel,
155154
}) => {
156-
// TODO dismiss tooltip
157-
const popover = usePopover();
158-
159155
return (
160156
<button
161157
type="button"
162158
aria-label={ariaLabel ?? ""}
163159
css={styles.action}
164-
onClick={(event) => {
165-
event.stopPropagation();
166-
onClick();
167-
popover.setOpen(false);
168-
}}
160+
onClick={onClick}
169161
>
170162
<Icon css={styles.actionIcon} />
171163
{children}

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

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import {
1010
} from "components/HelpTooltip/HelpTooltip";
1111
import { Stack } from "components/Stack/Stack";
1212
import { RotateCcwIcon } from "lucide-react";
13-
import type { FC } from "react";
13+
import { useState, type FC } from "react";
1414
import { agentVersionStatus } from "../../utils/workspace";
15+
import { TooltipProvider, TooltipTrigger } from "components/Tooltip/Tooltip";
1516

1617
type AgentOutdatedTooltipProps = {
1718
agent: WorkspaceAgent;
@@ -26,6 +27,8 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
2627
status,
2728
onUpdate,
2829
}) => {
30+
const [isOpen, setIsOpen] = useState(false);
31+
2932
const title =
3033
status === agentVersionStatus.Outdated
3134
? "Agent Outdated"
@@ -37,44 +40,50 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
3740
const text = `${opener} This can happen after you update Coder with running workspaces. To fix this, you can stop and start the workspace.`;
3841

3942
return (
40-
<HelpTooltip>
41-
<PopoverTrigger>
42-
<span role="status" className="cursor-pointer">
43-
{status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
44-
</span>
45-
</PopoverTrigger>
46-
<HelpTooltipContent>
47-
<Stack spacing={1}>
48-
<div>
49-
<HelpTooltipTitle>{title}</HelpTooltipTitle>
50-
<HelpTooltipText>{text}</HelpTooltipText>
51-
</div>
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>
5256

53-
<Stack spacing={0.5}>
54-
<span className="font-semibold text-content-primary">
55-
Agent version
56-
</span>
57-
<span>{agent.version}</span>
58-
</Stack>
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>
5963

60-
<Stack spacing={0.5}>
61-
<span className="font-semibold text-content-primary">
62-
Server version
63-
</span>
64-
<span>{serverVersion}</span>
65-
</Stack>
64+
<Stack spacing={0.5}>
65+
<span className="font-semibold text-content-primary">
66+
Server version
67+
</span>
68+
<span>{serverVersion}</span>
69+
</Stack>
6670

67-
<HelpTooltipLinksGroup>
68-
<HelpTooltipAction
69-
icon={RotateCcwIcon}
70-
onClick={onUpdate}
71-
ariaLabel="Update workspace"
72-
>
73-
Update workspace
74-
</HelpTooltipAction>
75-
</HelpTooltipLinksGroup>
76-
</Stack>
77-
</HelpTooltipContent>
78-
</HelpTooltip>
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>
84+
</Stack>
85+
</HelpTooltipContent>
86+
</HelpTooltip>
87+
</TooltipProvider>
7988
);
8089
};

0 commit comments

Comments
 (0)