coder · presleyp · Apr 8, 2022 · Apr 5, 2022 · Apr 5, 2022 · Apr 6, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -7,13 +7,16 @@ import { NotFoundPage } from "./pages/404"
 import { CliAuthenticationPage } from "./pages/cli-auth"
 import { HealthzPage } from "./pages/healthz"
 import { SignInPage } from "./pages/login"
+import { OrganizationsPage } from "./pages/orgs"
 import { PreferencesAccountPage } from "./pages/preferences/account"
 import { PreferencesLinkedAccountsPage } from "./pages/preferences/linked-accounts"
 import { PreferencesSecurityPage } from "./pages/preferences/security"
 import { PreferencesSSHKeysPage } from "./pages/preferences/ssh-keys"
+import { SettingsPage } from "./pages/settings"
 import { TemplatesPage } from "./pages/templates"
 import { TemplatePage } from "./pages/templates/[organization]/[template]"
 import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create"
+import { UsersPage } from "./pages/users"
 import { WorkspacePage } from "./pages/workspaces/[workspace]"
 
 export const AppRouter: React.FC = () => (
@@ -72,6 +75,31 @@ export const AppRouter: React.FC = () => (
         />
       </Route>
 
+      <Route
+        path="users"
+        element={
+          <AuthAndNav>
+            <UsersPage />
+          </AuthAndNav>
+        }
+      />
+      <Route
+        path="orgs"
+        element={
+          <AuthAndNav>
+            <OrganizationsPage />
+          </AuthAndNav>
+        }
+      />
+      <Route
+        path="settings"
+        element={
+          <AuthAndNav>
+            <SettingsPage />
+          </AuthAndNav>
+        }
+      />
+
       <Route path="preferences" element={<PreferencesLayout />}>
         <Route path="account" element={<PreferencesAccountPage />} />
         <Route path="security" element={<PreferencesSecurityPage />} />

diff --git a/site/src/components/AdminDropdown/AdminDropdown.stories.tsx b/site/src/components/AdminDropdown/AdminDropdown.stories.tsx
@@ -0,0 +1,17 @@
+import Box from "@material-ui/core/Box"
+import { Story } from "@storybook/react"
+import React from "react"
+import { AdminDropdown } from "./AdminDropdown"
+
+export default {
+  title: "components/AdminDropdown",
+  component: AdminDropdown,
+}
+
+const Template: Story = () => (
+  <Box style={{ backgroundColor: "#000", width: 100 }}>
+    <AdminDropdown />
+  </Box>
+)
+
+export const Example = Template.bind({})
diff --git a/site/src/components/AdminDropdown/AdminDropdown.test.tsx b/site/src/components/AdminDropdown/AdminDropdown.test.tsx
@@ -0,0 +1,48 @@
+import { screen } from "@testing-library/react"
+import React from "react"
+import { history, render } from "../../test_helpers"
+import { AdminDropdown, Language } from "./AdminDropdown"
+
+const renderAndClick = async () => {
+  render(<AdminDropdown />)
+  const trigger = await screen.findByText(Language.menuTitle)
+  trigger.click()
+}
+
+describe("AdminDropdown", () => {
+  describe("when the trigger is clicked", () => {
+    it("opens the menu", async () => {
+      await renderAndClick()
+      expect(screen.getByText(Language.usersLabel)).toBeDefined()
+      expect(screen.getByText(Language.orgsLabel)).toBeDefined()
+      expect(screen.getByText(Language.settingsLabel)).toBeDefined()
+    })
+  })
+
+  it("links to the users page", async () => {
+    await renderAndClick()
+
+    const usersLink = screen.getByText(Language.usersLabel).closest("a")
+    usersLink?.click()
+
+    expect(history.location.pathname).toEqual("/users")
+  })
+
+  it("links to the orgs page", async () => {
+    await renderAndClick()
+
+    const usersLink = screen.getByText(Language.orgsLabel).closest("a")
+    usersLink?.click()
+
+    expect(history.location.pathname).toEqual("/orgs")
+  })
+
+  it("links to the settings page", async () => {
+    await renderAndClick()
+
+    const usersLink = screen.getByText(Language.settingsLabel).closest("a")
+    usersLink?.click()
+
+    expect(history.location.pathname).toEqual("/settings")
+  })
+})
diff --git a/site/src/components/AdminDropdown/AdminDropdown.tsx b/site/src/components/AdminDropdown/AdminDropdown.tsx
@@ -0,0 +1,155 @@
+import ListItem from "@material-ui/core/ListItem"
+import ListItemText from "@material-ui/core/ListItemText"
+import { fade, makeStyles, Theme } from "@material-ui/core/styles"
+import AdminIcon from "@material-ui/icons/SettingsOutlined"
+import React, { useState } from "react"
+import { navHeight } from "../../theme/constants"
+import { BorderedMenu } from "../BorderedMenu/BorderedMenu"
+import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow"
+import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
+import { BuildingIcon } from "../Icons/BuildingIcon"
+import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon"
+
+export const Language = {
+  menuTitle: "Admin",
+  usersLabel: "Users",
+  usersDescription: "Manage users, roles, and permissions.",
+  orgsLabel: "Organizations",
+  orgsDescription: "Manage organizations.",
+  settingsLabel: "Settings",
+  settingsDescription: "Configure authentication and more.",
+}
+
+const entries = [
+  {
+    label: Language.usersLabel,
+    description: Language.usersDescription,
+    path: "/users",
+    Icon: UsersOutlinedIcon,
+  },
+  {
+    label: Language.orgsLabel,
+    description: Language.orgsDescription,
+    path: "/orgs",
+    Icon: BuildingIcon,
+  },
+  {
+    label: Language.settingsLabel,
+    description: Language.settingsDescription,
+    path: "/settings",
+    Icon: AdminIcon,
+  },
+]
+
+export const AdminDropdown: React.FC = () => {
+  const styles = useStyles()
+  const [anchorEl, setAnchorEl] = useState<HTMLElement>()
+  const onClose = () => setAnchorEl(undefined)
+  const onOpenAdminMenu = (ev: React.MouseEvent<HTMLDivElement>) => setAnchorEl(ev.currentTarget)
+
+  return (
+    <>
+      <div className={styles.link}>
+        <ListItem selected={Boolean(anchorEl)} button onClick={onOpenAdminMenu}>
+          <ListItemText className="no-brace" color="primary" primary={Language.menuTitle} />
+          {anchorEl ? <CloseDropdown /> : <OpenDropdown />}
+        </ListItem>
+      </div>
+
+      <BorderedMenu
+        anchorEl={anchorEl}
+        getContentAnchorEl={null}
+        open={!!anchorEl}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+        marginThreshold={0}
+        variant="admin-dropdown"
+        onClose={onClose}
+      >
+        {entries.map((entry) => (
+          <BorderedMenuRow
+            description={entry.description}
+            Icon={entry.Icon}
+            key={entry.label}
+            path={entry.path}
+            title={entry.label}
+            variant="narrow"
+            onClick={() => {
+              onClose()
+            }}
+          />
+        ))}
+      </BorderedMenu>
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+  link: {
+    "&:focus": {
+      outline: "none",
+
+      "& .MuiListItem-button": {
+        background: fade(theme.palette.primary.light, 0.1),
+      },
+    },
+
+    "& .MuiListItemText-root": {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    "& .feature-stage-chip": {
+      position: "absolute",
+      bottom: theme.spacing(1),
+
+      "& .MuiChip-labelSmall": {
+        fontSize: "10px",
+      },
+    },
+    whiteSpace: "nowrap",
+    "& .MuiListItem-button": {
+      height: navHeight,
+      color: "#A7A7A7",
+      padding: `0 ${theme.spacing(3)}px`,
+
+      "&.Mui-selected": {
+        background: "transparent",
+        "& .MuiListItemText-root": {
+          color: theme.palette.primary.contrastText,
+
+          "&:not(.no-brace) .MuiTypography-root": {
+            position: "relative",
+
+            "&::before": {
+              content: `"{"`,
+              left: -14,
+              position: "absolute",
+            },
+            "&::after": {
+              content: `"}"`,
+              position: "absolute",
+              right: -14,
+            },
+          },
+        },
+      },
+
+      "&.Mui-focusVisible, &:hover": {
+        background: "#333",
+      },
+
+      "& .MuiListItemText-primary": {
+        fontFamily: theme.typography.fontFamily,
+        fontSize: 16,
+        fontWeight: 500,
+      },
+    },
+  },
+}))
diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx
@@ -0,0 +1,30 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow"
+import { BuildingIcon } from "../Icons/BuildingIcon"
+import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon"
+import { BorderedMenu, BorderedMenuProps } from "./BorderedMenu"
+
+export default {
+  title: "components/BorderedMenu",
+  component: BorderedMenu,
+}
+
+const Template: Story<BorderedMenuProps> = (args: BorderedMenuProps) => (
+  <BorderedMenu {...args}>
+    <BorderedMenuRow title="Item 1" description="Here's a description" Icon={BuildingIcon} />
+    <BorderedMenuRow active title="Item 2" description="This BorderedMenuRow is active" Icon={UsersOutlinedIcon} />
+  </BorderedMenu>
+)
+
+export const AdminVariant = Template.bind({})
+AdminVariant.args = {
+  variant: "admin-dropdown",
+  open: true,
+}
+
+export const UserVariant = Template.bind({})
+UserVariant.args = {
+  variant: "user-dropdown",
+  open: true,
+}
diff --git a/site/src/components/Navbar/BorderedMenu.tsx → .../components/BorderedMenu/BorderedMenu.tsx b/site/src/components/Navbar/BorderedMenu.tsx → .../components/BorderedMenu/BorderedMenu.tsx
@@ -2,9 +2,9 @@ import Popover, { PopoverProps } from "@material-ui/core/Popover"
 import { fade, makeStyles } from "@material-ui/core/styles"
 import React from "react"
 
-type BorderedMenuVariant = "manage-dropdown" | "user-dropdown"
+type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
 
-type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
+export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
   variant?: BorderedMenuVariant
 }
 
@@ -20,7 +20,14 @@ export const BorderedMenu: React.FC<BorderedMenuProps> = ({ children, variant, .
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    paddingBottom: theme.spacing(1),
+    "&[data-variant='admin-dropdown'] $paperRoot": {
+      padding: `${theme.spacing(3)}px 0`,
+    },
+
+    "&[data-variant='user-dropdown'] $paperRoot": {
+      paddingBottom: theme.spacing(1),
+      width: 292,
+    },
   },
   paperRoot: {
     width: "292px",