Skip to content

Commit fca9343

Browse files
aqandrewaqandrew
authored
refactor: replace MUI tooltip in WorkspaceTimings (#21107)
for #19974 Continuing the train of thought from #20849 (comment): it's probably better to do away with a custom tooltip component that's only used in `ResourcesChart`/`ScriptsChart`/`StagesChart` and only slightly differs from our base tooltip
1 parent 8f15caa commit fca9343

File tree

4 files changed

+92
-175
lines changed

4 files changed

+92
-175
lines changed

‎site/src/modules/workspaces/WorkspaceTiming/Chart/Tooltip.tsx‎

Lines changed: 0 additions & 81 deletions
This file was deleted.

‎site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { type Theme, useTheme } from "@emotion/react";
2+
import {
3+
Tooltip,
4+
TooltipContent,
5+
TooltipTrigger,
6+
} from "components/Tooltip/Tooltip";
7+
import { ExternalLinkIcon } from "lucide-react";
28
import { type FC, useState } from "react";
9+
import { Link } from "react-router";
310
import { Bar } from "./Chart/Bar";
411
import {
512
Chart,
@@ -10,7 +17,6 @@ import {
1017
ChartSearch,
1118
ChartToolbar,
1219
} from "./Chart/Chart";
13-
import { Tooltip, TooltipLink, TooltipTitle } from "./Chart/Tooltip";
1420
import {
1521
calcDuration,
1622
calcOffset,
@@ -116,23 +122,31 @@ export const ResourcesChart: FC<ResourcesChartProps> = ({
116122
key={t.name}
117123
yAxisLabelId={encodeURIComponent(t.name)}
118124
>
119-
<Tooltip
120-
title={
121-
<>
122-
<TooltipTitle>{label}</TooltipTitle>
123-
{/* Stage boundaries should not have these links */}
124-
{!stageBoundary && (
125-
<TooltipLink to="">view template</TooltipLink>
126-
)}
127-
</>
128-
}
129-
>
130-
<Bar
131-
value={duration}
132-
offset={calcOffset(t.range, generalTiming)}
133-
scale={scale}
134-
colors={legend.colors}
135-
/>
125+
<Tooltip>
126+
<TooltipTrigger asChild>
127+
<Bar
128+
value={duration}
129+
offset={calcOffset(t.range, generalTiming)}
130+
scale={scale}
131+
colors={legend.colors}
132+
/>
133+
</TooltipTrigger>
134+
<TooltipContent
135+
side="bottom"
136+
className="flex flex-col gap-1.5 border-surface-quaternary"
137+
>
138+
<p className="m-0 text-content-primary">{label}</p>
139+
{/* Stage boundaries should not have these links */}
140+
{!stageBoundary && (
141+
<Link
142+
to=""
143+
className="flex items-center gap-1 no-underline text-xs text-inherit hover:text-content-primary"
144+
>
145+
<ExternalLinkIcon className="size-icon-xs" />
146+
view template
147+
</Link>
148+
)}
149+
</TooltipContent>
136150
</Tooltip>
137151
{formatTime(duration)}
138152
</XAxisRow>

‎site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
import { type Theme, useTheme } from "@emotion/react";
2+
import {
3+
Tooltip,
4+
TooltipContent,
5+
TooltipTrigger,
6+
} from "components/Tooltip/Tooltip";
27
import { type FC, useState } from "react";
38
import { Bar } from "./Chart/Bar";
49
import {
@@ -10,7 +15,6 @@ import {
1015
ChartSearch,
1116
ChartToolbar,
1217
} from "./Chart/Chart";
13-
import { Tooltip, TooltipTitle } from "./Chart/Tooltip";
1418
import {
1519
calcDuration,
1620
calcOffset,
@@ -103,19 +107,21 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
103107
key={t.name}
104108
yAxisLabelId={encodeURIComponent(t.name)}
105109
>
106-
<Tooltip
107-
title={
108-
<TooltipTitle>
109-
Script exited with <strong>code {t.exitCode}</strong>
110-
</TooltipTitle>
111-
}
112-
>
113-
<Bar
114-
value={duration}
115-
offset={calcOffset(t.range, generalTiming)}
116-
scale={scale}
117-
colors={legendsByStatus[t.status].colors}
118-
/>
110+
<Tooltip>
111+
<TooltipTrigger asChild>
112+
<Bar
113+
value={duration}
114+
offset={calcOffset(t.range, generalTiming)}
115+
scale={scale}
116+
colors={legendsByStatus[t.status].colors}
117+
/>
118+
</TooltipTrigger>
119+
<TooltipContent
120+
side="bottom"
121+
className="border-surface-quaternary text-content-primary"
122+
>
123+
Script exited with <strong>code {t.exitCode}</strong>
124+
</TooltipContent>
119125
</Tooltip>
120126

121127
{formatTime(duration)}

‎site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx‎

Lines changed: 40 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import type { Interpolation, Theme } from "@emotion/react";
22
import type { TimingStage } from "api/typesGenerated";
3+
import {
4+
Tooltip,
5+
TooltipContent,
6+
TooltipTrigger,
7+
} from "components/Tooltip/Tooltip";
38
import { CircleAlertIcon, InfoIcon } from "lucide-react";
49
import type { FC } from "react";
510
import { Bar, ClickableBar } from "./Chart/Bar";
611
import { Blocks } from "./Chart/Blocks";
712
import { Chart, ChartContent } from "./Chart/Chart";
8-
import {
9-
Tooltip,
10-
type TooltipProps,
11-
TooltipShortDescription,
12-
TooltipTitle,
13-
} from "./Chart/Tooltip";
1413
import {
1514
calcDuration,
1615
calcOffset,
@@ -45,7 +44,10 @@ export type Stage = {
4544
/**
4645
* The tooltip is used to provide additional information about the stage.
4746
*/
48-
tooltip: Omit<TooltipProps, "children">;
47+
tooltip: {
48+
heading: string;
49+
description: string;
50+
};
4951
};
5052

5153
type StageTiming = {
@@ -105,11 +107,22 @@ export const StagesChart: FC<StagesChartProps> = ({
105107
>
106108
<span css={styles.stageLabel}>
107109
{stage.label}
108-
<Tooltip {...stage.tooltip}>
109-
<InfoIcon
110-
className="size-icon-xs"
111-
css={styles.info}
112-
/>
110+
<Tooltip>
111+
<TooltipTrigger asChild>
112+
<InfoIcon
113+
className="size-icon-xs"
114+
css={styles.info}
115+
/>
116+
</TooltipTrigger>
117+
<TooltipContent
118+
side="bottom"
119+
className="flex flex-col gap-1.5 max-w-xs border-surface-quaternary"
120+
>
121+
<p className="m-0 text-content-primary">
122+
{stage.tooltip.heading}
123+
</p>
124+
<p className="m-0">{stage.tooltip.description}</p>
125+
</TooltipContent>
113126
</Tooltip>
114127
</span>
115128
</YAxisLabel>
@@ -219,61 +232,38 @@ export const provisioningStages: Stage[] = [
219232
label: "init",
220233
section: "provisioning",
221234
tooltip: {
222-
title: (
223-
<>
224-
<TooltipTitle>Terraform initialization</TooltipTitle>
225-
<TooltipShortDescription>
226-
Download providers & modules.
227-
</TooltipShortDescription>
228-
</>
229-
),
235+
heading: "Terraform initialization",
236+
description: "Download providers & modules.",
230237
},
231238
},
232239
{
233240
name: "plan",
234241
label: "plan",
235242
section: "provisioning",
236243
tooltip: {
237-
title: (
238-
<>
239-
<TooltipTitle>Terraform plan</TooltipTitle>
240-
<TooltipShortDescription>
241-
Compare state of desired vs actual resources and compute changes to
242-
be made.
243-
</TooltipShortDescription>
244-
</>
245-
),
244+
heading: "Terraform plan",
245+
description:
246+
"Compare state of desired vs actual resources and compute changes to be made.",
246247
},
247248
},
248249
{
249250
name: "graph",
250251
label: "graph",
251252
section: "provisioning",
252253
tooltip: {
253-
title: (
254-
<>
255-
<TooltipTitle>Terraform graph</TooltipTitle>
256-
<TooltipShortDescription>
257-
List all resources in plan, used to update coderd database.
258-
</TooltipShortDescription>
259-
</>
260-
),
254+
heading: "Terraform graph",
255+
description:
256+
"List all resources in plan, used to update coderd database.",
261257
},
262258
},
263259
{
264260
name: "apply",
265261
label: "apply",
266262
section: "provisioning",
267263
tooltip: {
268-
title: (
269-
<>
270-
<TooltipTitle>Terraform apply</TooltipTitle>
271-
<TooltipShortDescription>
272-
Execute Terraform plan to create/modify/delete resources into
273-
desired states.
274-
</TooltipShortDescription>
275-
</>
276-
),
264+
heading: "Terraform apply",
265+
description:
266+
"Execute Terraform plan to create/modify/delete resources into desired states.",
277267
},
278268
},
279269
];
@@ -285,29 +275,17 @@ export const agentStages = (section: string): Stage[] => {
285275
label: "connect",
286276
section,
287277
tooltip: {
288-
title: (
289-
<>
290-
<TooltipTitle>Connect</TooltipTitle>
291-
<TooltipShortDescription>
292-
Establish an RPC connection with the control plane.
293-
</TooltipShortDescription>
294-
</>
295-
),
278+
heading: "Connect",
279+
description: "Establish an RPC connection with the control plane.",
296280
},
297281
},
298282
{
299283
name: "start",
300284
label: "run startup scripts",
301285
section,
302286
tooltip: {
303-
title: (
304-
<>
305-
<TooltipTitle>Run startup scripts</TooltipTitle>
306-
<TooltipShortDescription>
307-
Execute each agent startup script.
308-
</TooltipShortDescription>
309-
</>
310-
),
287+
heading: "Run startup scripts",
288+
description: "Execute each agent startup script.",
311289
},
312290
},
313291
];

0 commit comments

Comments
 (0)