Skip to content

Commit f8d8de5

Browse files
ParkreinerParkreiner
committed
refactor: consolidate tooltip components
1 parent 534cf82 commit f8d8de5

File tree

4 files changed

+61
-66
lines changed

4 files changed

+61
-66
lines changed

‎site/src/pages/UsersPage/UsersTable/GroupsHelpTooltip.tsx

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

‎site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { FC } from "react";
2+
import {
3+
HelpTooltip,
4+
HelpTooltipLink,
5+
HelpTooltipLinksGroup,
6+
HelpTooltipText,
7+
HelpTooltipTitle,
8+
} from "components/HelpTooltip/HelpTooltip";
9+
import { docs } from "utils/docs";
10+
11+
type ColumnHeader = "roles" | "groups";
12+
13+
type TooltipData = {
14+
title: string;
15+
text: string;
16+
links: readonly { text: string; href: string }[];
17+
};
18+
19+
export const Language = {
20+
roles: {
21+
title: "What is a role?",
22+
text:
23+
"Coder role-based access control (RBAC) provides fine-grained access management. " +
24+
"View our docs on how to use the available roles.",
25+
links: [{ text: "User Roles", href: docs("/admin/users#roles") }],
26+
},
27+
28+
groups: {
29+
title: "What is a group?",
30+
text:
31+
"Groups can be used with template RBAC to give groups of users access " +
32+
"to specific templates. View our docs on how to use groups.",
33+
links: [{ text: "User Groups", href: docs("/admin/groups") }],
34+
},
35+
} as const satisfies Record<ColumnHeader, TooltipData>;
36+
37+
type Props = {
38+
variant: ColumnHeader;
39+
};
40+
41+
export const TableColumnHelpTooltip: FC<Props> = ({ variant }) => {
42+
const variantLang = Language[variant];
43+
44+
return (
45+
<HelpTooltip size="small">
46+
<HelpTooltipTitle>{variantLang.title}</HelpTooltipTitle>
47+
<HelpTooltipText>{variantLang.text}</HelpTooltipText>
48+
49+
<HelpTooltipLinksGroup>
50+
{variantLang.links.map((link) => (
51+
<HelpTooltipLink key={link.text} href={link.href}>
52+
{link.text}
53+
</HelpTooltipLink>
54+
))}
55+
</HelpTooltipLinksGroup>
56+
</HelpTooltip>
57+
);
58+
};

‎site/src/pages/UsersPage/UsersTable/UserRoleHelpTooltip.tsx

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

‎site/src/pages/UsersPage/UsersTable/UsersTable.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ import TableContainer from "@mui/material/TableContainer";
99
import TableHead from "@mui/material/TableHead";
1010
import TableRow from "@mui/material/TableRow";
1111
import { Stack } from "components/Stack/Stack";
12-
import { UserRoleHelpTooltip } from "./UserRoleHelpTooltip";
12+
import { TableColumnHelpTooltip } from "./TableColumnHelpTooltip";
1313
import { UsersTableBody } from "./UsersTableBody";
14-
import { GroupsHelpTooltip } from "./GroupsHelpTooltip";
1514

1615
export const Language = {
1716
usernameLabel: "User",
@@ -76,14 +75,14 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
7675
<TableCell width="29%">
7776
<Stack direction="row" spacing={1} alignItems="center">
7877
<span>{Language.rolesLabel}</span>
79-
<UserRoleHelpTooltip />
78+
<TableColumnHelpTooltip variant="roles" />
8079
</Stack>
8180
</TableCell>
8281

8382
<TableCell width="14%">
8483
<Stack direction="row" spacing={1} alignItems="center">
8584
<span>{Language.groupsLabel}</span>
86-
<GroupsHelpTooltip />
85+
<TableColumnHelpTooltip variant="groups" />
8786
</Stack>
8887
</TableCell>
8988

0 commit comments

Comments
 (0)