Skip to content

feat(site): Add Admin Dropdown menu #885

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
Apr 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions site/src/AppRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
Expand Down Expand Up @@ -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 />} />
Expand Down
17 changes: 17 additions & 0 deletions site/src/components/AdminDropdown/AdminDropdown.stories.tsx
Original file line number Diff line number Diff line change
@@ -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({})
48 changes: 48 additions & 0 deletions site/src/components/AdminDropdown/AdminDropdown.test.tsx
Original file line number Diff line number Diff line change
@@ -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")
})
})
155 changes: 155 additions & 0 deletions site/src/components/AdminDropdown/AdminDropdown.tsx
Original file line number Diff line number Diff line change
@@ -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,
},
},
},
}))
30 changes: 30 additions & 0 deletions site/src/components/BorderedMenu/BorderedMenu.stories.tsx
Original file line number Diff line number Diff line change
@@ -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,
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

Expand All @@ -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",
Expand Down
Loading