chore: add tooltip for Groups column header

Parkreiner · Parkreiner · commit c2aea9b8e8e1 · 2023-10-17T22:15:49.000Z
diff --git a/site/build/tsconfig.tsbuildinfo b/site/build/tsconfig.tsbuildinfo
diff --git a/site/src/pages/UsersPage/UsersTable/GroupsHelpTooltip.tsx b/site/src/pages/UsersPage/UsersTable/GroupsHelpTooltip.tsx
@@ -0,0 +1,31 @@
+import {
+  HelpTooltip,
+  HelpTooltipLink,
+  HelpTooltipLinksGroup,
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "components/HelpTooltip/HelpTooltip";
+import { docs } from "utils/docs";
+
+export const Language = {
+  title: "What is a group?",
+  link: "User Groups",
+  text:
+    "Groups can be used with template RBAC to give groups of users access " +
+    "to specific templates. View our docs on how to use groups.",
+};
+
+export function GroupsHelpTooltip() {
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
+      <HelpTooltipText>{Language.text}</HelpTooltipText>
+
+      <HelpTooltipLinksGroup>
+        <HelpTooltipLink href={docs("/admin/groups")}>
+          {Language.link}
+        </HelpTooltipLink>
+      </HelpTooltipLinksGroup>
+    </HelpTooltip>
+  );
+}
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTable.tsx b/site/src/pages/UsersPage/UsersTable/UsersTable.tsx
@@ -11,6 +11,7 @@ import TableRow from "@mui/material/TableRow";
 import { Stack } from "components/Stack/Stack";
 import { UserRoleHelpTooltip } from "./UserRoleHelpTooltip";
 import { UsersTableBody } from "./UsersTableBody";
+import { GroupsHelpTooltip } from "./GroupsHelpTooltip";
 
 export const Language = {
   usernameLabel: "User",
@@ -79,7 +80,13 @@ export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
               </Stack>
             </TableCell>
 
-            <TableCell width="14%">{Language.groupsLabel}</TableCell>
+            <TableCell width="14%">
+              <Stack direction="row" spacing={1} alignItems="center">
+                <span>{Language.groupsLabel}</span>
+                <GroupsHelpTooltip />
+              </Stack>
+            </TableCell>
+
             <TableCell width="14%">{Language.loginTypeLabel}</TableCell>
             <TableCell width="14%">{Language.statusLabel}</TableCell>
 
