feat: Add template-admin + user-admin role for managing templates + users (#3490)

Co-authored-by: Mathias Fredriksson <mafredri@gmail.com>

site/src/components/Tooltips/UserRoleHelpTooltip.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react"
+import {
+  HelpTooltip,
+  HelpTooltipLink,
+  HelpTooltipLinksGroup,
+  HelpTooltipText,
+  HelpTooltipTitle,
+} from "./HelpTooltip"
+
+export const Language = {
+  title: "What is a role?",
+  text:
+    "Coder role-based access control (RBAC) provides fine-grained access management. " +
+    "View our docs on how to use the available roles.",
+  link: "User Roles",
+}
+
+export const UserRoleHelpTooltip: FC = () => {
+  return (
+    <HelpTooltip size="small">
+      <HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
+      <HelpTooltipText>{Language.text}</HelpTooltipText>
+      <HelpTooltipLinksGroup>
+        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/users">
+          {Language.link}
+        </HelpTooltipLink>
+      </HelpTooltipLinksGroup>
+    </HelpTooltip>
+  )
+}

site/src/components/Tooltips/index.ts

@@ -2,4 +2,5 @@ export { AgentHelpTooltip } from "./AgentHelpTooltip"
 export { AuditHelpTooltip } from "./AuditHelpTooltip"
 export { OutdatedHelpTooltip } from "./OutdatedHelpTooltip"
 export { ResourcesHelpTooltip } from "./ResourcesHelpTooltip"
+export { UserRoleHelpTooltip } from "./UserRoleHelpTooltip"
 export { WorkspaceHelpTooltip } from "./WorkspaceHelpTooltip"

site/src/components/UsersTable/UsersTable.test.tsx

@@ -0,0 +1,24 @@
+import { fireEvent, screen } from "@testing-library/react"
+import { Language as TooltipLanguage } from "components/Tooltips/HelpTooltip/HelpTooltip"
+import { Language as UserRoleLanguage } from "components/Tooltips/UserRoleHelpTooltip"
+import { render } from "testHelpers/renderHelpers"
+import { UsersTable } from "./UsersTable"
+
+describe("AuditPage", () => {
+  it("renders a page with a title and subtitle", async () => {
+    // When
+    render(
+      <UsersTable
+        onSuspendUser={() => jest.fn()}
+        onActivateUser={() => jest.fn()}
+        onResetUserPassword={() => jest.fn()}
+        onUpdateUserRoles={() => jest.fn()}
+      />,
+    )
+
+    // Then
+    const tooltipIcon = await screen.findByRole("button", { name: TooltipLanguage.ariaLabel })
+    fireEvent.mouseOver(tooltipIcon)
+    expect(await screen.findByText(UserRoleLanguage.title)).toBeInTheDocument()
+  })
+})

site/src/components/UsersTable/UsersTable.tsx

@@ -6,6 +6,8 @@ import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
+import { Stack } from "../Stack/Stack"
+import { UserRoleHelpTooltip } from "../Tooltips"
 import { UsersTableBody } from "./UsersTableBody"
 
 export const Language = {
@@ -44,7 +46,12 @@ export const UsersTable: FC<UsersTableProps> = ({
           <TableRow>
             <TableCell>{Language.usernameLabel}</TableCell>
             <TableCell>{Language.statusLabel}</TableCell>
-            <TableCell>{Language.rolesLabel}</TableCell>
+            <TableCell>
+              <Stack direction="row" spacing={1} alignItems="center">
+                <span>{Language.rolesLabel}</span>
+                <UserRoleHelpTooltip />
+              </Stack>
+            </TableCell>
             {/* 1% is a trick to make the table cell width fit the content */}
             {canEditUsers && <TableCell width="1%" />}
           </TableRow>