chore: add users link to nav bar (#1797)

Kira-Pilot · web-flow · commit b4c41d3904c5 · 2022-05-26T15:25:13.000-04:00
* chore: add users link to nav bar resolves #1746 * fix test names
diff --git a/site/src/components/NavbarView/NavbarView.test.tsx b/site/src/components/NavbarView/NavbarView.test.tsx
@@ -2,7 +2,7 @@ import { screen } from "@testing-library/react"
 import React from "react"
 import { MockUser } from "../../testHelpers/entities"
 import { render } from "../../testHelpers/renderHelpers"
-import { NavbarView } from "./NavbarView"
+import { Language as navLanguage, NavbarView } from "./NavbarView"
 
 describe("NavbarView", () => {
   const noop = () => {
@@ -16,6 +16,24 @@ describe("NavbarView", () => {
     await screen.findAllByText("Coder", { exact: false })
   })
 
+  it("workspaces nav link has the correct href", async () => {
+    render(<NavbarView user={MockUser} onSignOut={noop} displayAdminDropdown />)
+    const workspacesLink = await screen.findByText(navLanguage.workspaces)
+    expect((workspacesLink as HTMLAnchorElement).href).toContain("/workspaces")
+  })
+
+  it("templates nav link has the correct href", async () => {
+    render(<NavbarView user={MockUser} onSignOut={noop} displayAdminDropdown />)
+    const templatesLink = await screen.findByText(navLanguage.templates)
+    expect((templatesLink as HTMLAnchorElement).href).toContain("/templates")
+  })
+
+  it("users nav link has the correct href", async () => {
+    render(<NavbarView user={MockUser} onSignOut={noop} displayAdminDropdown />)
+    const userLink = await screen.findByText(navLanguage.users)
+    expect((userLink as HTMLAnchorElement).href).toContain("/users")
+  })
+
   it("renders profile picture for user", async () => {
     // Given
     const mockUser = {
diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -15,6 +15,12 @@ export interface NavbarViewProps {
   displayAdminDropdown: boolean
 }
 
+export const Language = {
+  workspaces: "Workspaces",
+  templates: "Templates",
+  users: "Users",
+}
+
 export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut, displayAdminDropdown }) => {
   const styles = useStyles()
   return (
@@ -27,12 +33,17 @@ export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut, display
         </ListItem>
         <ListItem button className={styles.item}>
           <NavLink className={styles.link} to="/workspaces">
-            Workspaces
+            {Language.workspaces}
           </NavLink>
         </ListItem>
         <ListItem button className={styles.item}>
           <NavLink className={styles.link} to="/templates">
-            Templates
+            {Language.templates}
+          </NavLink>
+        </ListItem>
+        <ListItem button className={styles.item}>
+          <NavLink className={styles.link} to="/users">
+            {Language.users}
           </NavLink>
         </ListItem>
       </List>
