Skip to content

refactor(site): make HelpTooltip easier to reuse and compose #11242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Dec 19, 2023
Merged

refactor(site): make HelpTooltip easier to reuse and compose #11242

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ce7394c
Refactor help tooltip
BrunoQuaresma Dec 15, 2023
94390a6
Fix size type
BrunoQuaresma Dec 18, 2023
77fec0e
Remove duplicated math round
BrunoQuaresma Dec 18, 2023
0d4e728
Fix agent outdated tooltip role
BrunoQuaresma Dec 18, 2023
11d56b1
Fix diff use cases
BrunoQuaresma Dec 18, 2023
06fc2ed
Fix a few use cases
BrunoQuaresma Dec 18, 2023
59fd96a
Merge branch 'bq/refactor-help-tooltip' of https://github.com/coder/c…
BrunoQuaresma Dec 18, 2023
682dd02
Merge branch 'main' of https://github.com/coder/coder into bq/refacto…
BrunoQuaresma Dec 19, 2023
89ec3df
Fix colors
BrunoQuaresma Dec 19, 2023
9ff6ad0
Make gylphi more accessible
BrunoQuaresma Dec 19, 2023
30432e6
Fix tooltip on template settings
BrunoQuaresma Dec 19, 2023
3f20de8
Fix workspace outdated tooltip spacing
BrunoQuaresma Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix a few use cases
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Dec 18, 2023
commit 06fc2ed76b6823a04f3bd9e77650d5045c04b854
7 changes: 6 additions & 1 deletion site/src/components/Popover/Popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
useId,
useRef,
useState,
HTMLAttributes,
} from "react";
// This is used as base for the main Popover component
// eslint-disable-next-line no-restricted-imports -- Read above
Expand Down Expand Up @@ -79,8 +80,11 @@ export const usePopover = () => {
return context;
};

export const PopoverTrigger = (props: { children: TriggerElement }) => {
export const PopoverTrigger = (
props: HTMLAttributes<HTMLElement> & { children: TriggerElement },
) => {
const popover = usePopover();
const { children, ...elementProps } = props;

const clickProps = {
onClick: () => {
Expand All @@ -98,6 +102,7 @@ export const PopoverTrigger = (props: { children: TriggerElement }) => {
};

return cloneElement(props.children, {
...elementProps,
...(popover.mode === "click" ? clickProps : hoverProps),
"aria-haspopup": true,
"aria-owns": popover.isOpen ? popover.id : undefined,
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Resources/AgentLatency.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import {
HelpTooltipText,
HelpTooltip,
HelpTooltipTitle,
HelpTooltipTrigger,
HelpTooltipContent,
} from "components/HelpTooltip/HelpTooltip";
import { Stack } from "components/Stack/Stack";
import { getLatencyColor } from "utils/latency";
import { PopoverTrigger } from "components/Popover/Popover";

const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
// Find the right latency to display
Expand Down Expand Up @@ -41,15 +41,15 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {

return (
<HelpTooltip>
<HelpTooltipTrigger>
<PopoverTrigger>
<span
role="presentation"
aria-label="latency"
css={{ cursor: "pointer", color: latency.color }}
>
{Math.round(latency.latency_ms)}ms
</span>
</HelpTooltipTrigger>
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Latency</HelpTooltipTitle>
<HelpTooltipText>
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Resources/AgentOutdatedTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ import {
HelpTooltipLinksGroup,
HelpTooltipText,
HelpTooltipTitle,
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import type { WorkspaceAgent } from "api/typesGenerated";
import { Stack } from "components/Stack/Stack";
import { agentVersionStatus } from "../../utils/workspace";
import { PopoverTrigger } from "components/Popover/Popover";

type AgentOutdatedTooltipProps = {
agent: WorkspaceAgent;
Expand Down Expand Up @@ -47,11 +47,11 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({

return (
<HelpTooltip>
<HelpTooltipTrigger>
<PopoverTrigger>
<span role="status" css={{ cursor: "pointer" }}>
{status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
</span>
</HelpTooltipTrigger>
</PopoverTrigger>
<HelpTooltipContent>
<Stack spacing={1}>
<div>
Expand Down
22 changes: 11 additions & 11 deletions site/src/components/Resources/AgentStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import {
HelpTooltipContent,
HelpTooltipText,
HelpTooltipTitle,
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import Link from "@mui/material/Link";
import { PopoverTrigger } from "components/Popover/Popover";

// If we think in the agent status and lifecycle into a single enum/state I’d
// say we would have: connecting, timeout, disconnected, connected:created,
Expand Down Expand Up @@ -46,9 +46,9 @@ const StartTimeoutLifecycle: React.FC<{
}> = ({ agent }) => {
return (
<HelpTooltip>
<HelpTooltipTrigger role="status">
<PopoverTrigger role="status" aria-label="Agent timeout">
<WarningRounded css={styles.timeoutWarning} />
</HelpTooltipTrigger>
</PopoverTrigger>

<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to start</HelpTooltipTitle>
Expand All @@ -73,9 +73,9 @@ const StartErrorLifecycle: React.FC<{
}> = ({ agent }) => {
return (
<HelpTooltip>
<HelpTooltipTrigger role="status" aria-label="Start error">
<PopoverTrigger role="status" aria-label="Start error">
<WarningRounded css={styles.errorWarning} />
</HelpTooltipTrigger>
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
<HelpTooltipText>
Expand Down Expand Up @@ -111,9 +111,9 @@ const ShutdownTimeoutLifecycle: React.FC<{
}> = ({ agent }) => {
return (
<HelpTooltip>
<HelpTooltipTrigger role="status" aria-label="Stop timeout">
<PopoverTrigger role="status" aria-label="Stop timeout">
<WarningRounded css={styles.timeoutWarning} />
</HelpTooltipTrigger>
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
<HelpTooltipText>
Expand All @@ -137,9 +137,9 @@ const ShutdownErrorLifecycle: React.FC<{
}> = ({ agent }) => {
return (
<HelpTooltip>
<HelpTooltipTrigger role="status" aria-label="Stop error">
<PopoverTrigger role="status" aria-label="Stop error">
<WarningRounded css={styles.errorWarning} />
</HelpTooltipTrigger>
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
<HelpTooltipText>
Expand Down Expand Up @@ -237,9 +237,9 @@ const TimeoutStatus: React.FC<{
}> = ({ agent }) => {
return (
<HelpTooltip>
<HelpTooltipTrigger role="status" aria-label="Timeout">
<PopoverTrigger role="status" aria-label="Timeout">
<WarningRounded css={styles.timeoutWarning} />
</HelpTooltipTrigger>
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>
<HelpTooltipText>
Expand Down
37 changes: 23 additions & 14 deletions site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ import * as Yup from "yup";
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
import {
HelpTooltip,
HelpTooltipContent,
HelpTooltipText,
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import { LazyIconField } from "components/IconField/LazyIconField";
import Link from "@mui/material/Link";
Expand Down Expand Up @@ -572,10 +574,13 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
</strong>

<HelpTooltip>
<HelpTooltipText>
If checked, users may be able to corrupt their
workspace.
</HelpTooltipText>
<HelpTooltipTrigger size="small" />
<HelpTooltipContent>
<HelpTooltipText>
If checked, users may be able to corrupt their
workspace.
</HelpTooltipText>
</HelpTooltipContent>
</HelpTooltip>
</Stack>
<span css={styles.optionHelperText}>
Expand Down Expand Up @@ -608,16 +613,20 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
<strong>Allow everyone to use the template</strong>

<HelpTooltip>
<HelpTooltipText>
If unchecked, only users with the &apos;template
admin&apos; and &apos;owner&apos; role can use this
template until the permissions are updated. Navigate to{" "}
<strong>
Templates &gt; Select a template &gt; Settings &gt;
Permissions
</strong>{" "}
to update permissions.
</HelpTooltipText>
<HelpTooltipTrigger size="small" />
<HelpTooltipContent>
<HelpTooltipText>
If unchecked, only users with the &apos;template
admin&apos; and &apos;owner&apos; role can use this
template until the permissions are updated. Navigate
to{" "}
<strong>
Templates &gt; Select a template &gt; Settings &gt;
Permissions
</strong>{" "}
to update permissions.
</HelpTooltipText>
</HelpTooltipContent>
</HelpTooltip>
</Stack>
<span css={styles.optionHelperText}>
Expand Down