Skip to content

feat(site): add deployment menu to navbar #13401

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.

Sign up for GitHub

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 7 commits into from
Jun 3, 2024
Merged

feat(site): add deployment menu to navbar #13401

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7c5a750
feat(site): add deployment menu to navbar
aslilac May 29, 2024
aa11ae9
Merge branch 'main' into deployment-menu
aslilac Jun 3, 2024
c29e76c
Merge branch 'main' into deployment-menu
aslilac Jun 3, 2024
b081a12
💇‍♀️
aslilac Jun 3, 2024
9104fce
🧹
aslilac Jun 3, 2024
c3d8207
fix tests
aslilac Jun 3, 2024
b28025a
same thing but different
aslilac Jun 3, 2024
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
137 changes: 137 additions & 0 deletions site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import { type FC } from "react";
import { NavLink } from "react-router-dom";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import {
Popover,
PopoverContent,
PopoverTrigger,
usePopover,
} from "components/Popover/Popover";

import { USERS_LINK } from "modules/navigation";

interface DeploymentDropdownProps {
canViewAuditLog: boolean;
canViewDeployment: boolean;
canViewAllUsers: boolean;
canViewHealth: boolean;
}

export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
canViewAuditLog,
canViewDeployment,
canViewAllUsers,
canViewHealth,
}) => {
const theme = useTheme();

if (
!canViewAuditLog &&
!canViewDeployment &&
!canViewAllUsers &&
!canViewHealth
) {
return null;
}

return (
<Popover>
<PopoverTrigger>
<Button>
Deployment
<DropdownArrow
color={theme.experimental.l2.fill.solid}
close={false}
/>
</Button>
</PopoverTrigger>

<PopoverContent
horizontal="right"
css={{
".MuiPaper-root": {
minWidth: "auto",
width: 180,
boxShadow: theme.shadows[6],
},
}}
>
<DeploymentDropdownContent
canViewAuditLog={canViewAuditLog}
canViewDeployment={canViewDeployment}
canViewAllUsers={canViewAllUsers}
canViewHealth={canViewHealth}
/>
</PopoverContent>
</Popover>
);
};

const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
canViewAuditLog,
canViewDeployment,
canViewAllUsers,
canViewHealth,
}) => {
const popover = usePopover();

const onPopoverClose = () => popover.setIsOpen(false);

return (
<nav>
{canViewDeployment && (
<NavLink css={styles.link} to="/deployment/general">
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
Settings
</MenuItem>
</NavLink>
)}
{canViewAllUsers && (
<NavLink css={styles.link} to={USERS_LINK}>
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
Users
</MenuItem>
</NavLink>
)}
{canViewAuditLog && (
<NavLink css={styles.link} to="/audit">
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
Auditing
</MenuItem>
</NavLink>
)}
{canViewHealth && (
<NavLink css={styles.link} to="/health">
<MenuItem css={styles.menuItem} onClick={onPopoverClose}>
Healthcheck
</MenuItem>
</NavLink>
)}
</nav>
);
};

const styles = {
link: {
textDecoration: "none",
color: "inherit",
},
menuItem: (theme) => css`
gap: 20px;
padding: 8px 20px;
font-size: 14px;

&:hover {
background-color: ${theme.palette.action.hover};
transition: background-color 0.3s ease;
}
`,
menuItemIcon: (theme) => ({
color: theme.palette.text.secondary,
width: 20,
height: 20,
}),
} satisfies Record<string, Interpolation<Theme>>;
66 changes: 15 additions & 51 deletions site/src/modules/dashboard/Navbar/NavbarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import Skeleton from "@mui/material/Skeleton";
import { visuallyHidden } from "@mui/utils";
import { type FC, type ReactNode, useRef, useState } from "react";
import { type FC, useRef, useState } from "react";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import type * as TypesGen from "api/typesGenerated";
import { Abbr } from "components/Abbr/Abbr";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { ExternalImage } from "components/ExternalImage/ExternalImage";
import { displayError } from "components/GlobalSnackbar/utils";
import { CoderIcon } from "components/Icons/CoderIcon";
Expand All @@ -21,10 +22,7 @@ import { useAuthenticated } from "contexts/auth/RequireAuth";
import type { ProxyContextValue } from "contexts/ProxyContext";
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
import { UserDropdown } from "./UserDropdown/UserDropdown";

export const USERS_LINK = `/users?filter=${encodeURIComponent(
"status:active",
)}`;
import { DeploymentDropdown } from "./DeploymentDropdown";

export interface NavbarViewProps {
logo_url?: string;
Expand All @@ -44,25 +42,14 @@ export const Language = {
templates: "Templates",
users: "Users",
audit: "Audit",
deployment: "Deployment",
deployment: "Settings",
};

interface NavItemsProps {
children?: ReactNode;
className?: string;
canViewAuditLog: boolean;
canViewDeployment: boolean;
canViewAllUsers: boolean;
canViewHealth: boolean;
}

const NavItems: FC<NavItemsProps> = ({
className,
canViewAuditLog,
canViewDeployment,
canViewAllUsers,
canViewHealth,
}) => {
const NavItems: FC<NavItemsProps> = ({ className }) => {
const location = useLocation();
const theme = useTheme();

Expand All @@ -83,26 +70,6 @@ const NavItems: FC<NavItemsProps> = ({
<NavLink css={styles.link} to="/templates">
{Language.templates}
</NavLink>
{canViewAllUsers && (
<NavLink css={styles.link} to={USERS_LINK}>
{Language.users}
</NavLink>
)}
{canViewAuditLog && (
<NavLink css={styles.link} to="/audit">
{Language.audit}
</NavLink>
)}
{canViewDeployment && (
<NavLink css={styles.link} to="/deployment/general">
{Language.deployment}
</NavLink>
)}
{canViewHealth && (
<NavLink css={styles.link} to="/health">
Health
</NavLink>
)}
</nav>
);
};
Expand Down Expand Up @@ -157,12 +124,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
)}
</div>
</div>
<NavItems
canViewAuditLog={canViewAuditLog}
canViewDeployment={canViewDeployment}
canViewAllUsers={canViewAllUsers}
canViewHealth={canViewHealth}
/>
<NavItems />
</div>
</Drawer>

Expand All @@ -174,18 +136,20 @@ export const NavbarView: FC<NavbarViewProps> = ({
)}
</NavLink>

<NavItems
css={styles.desktopNavItems}
canViewAuditLog={canViewAuditLog}
canViewDeployment={canViewDeployment}
canViewAllUsers={canViewAllUsers}
canViewHealth={canViewHealth}
/>
<NavItems css={styles.desktopNavItems} />

<div css={styles.navMenus}>
{proxyContextValue && (
<ProxyMenu proxyContextValue={proxyContextValue} />
)}

<DeploymentDropdown
canViewAuditLog={canViewAuditLog}
canViewDeployment={canViewDeployment}
canViewAllUsers={canViewAllUsers}
canViewHealth={canViewHealth}
/>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we can pass the root permissions to the component instead of creating derived values for each option.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eh, I don't mind this. the root permissions names are a lot less clear imo, so having the Navbar "controller" abstract them with better names is nice.


{user && (
<UserDropdown
user={user}
Expand Down
110 changes: 55 additions & 55 deletions site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,61 +27,6 @@ export const Language = {
copyrightText: `\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`,
};

const styles = {
info: (theme) => [
theme.typography.body2 as CSSObject,
{
padding: 20,
},
],
userName: {
fontWeight: 600,
},
userEmail: (theme) => ({
color: theme.palette.text.secondary,
width: "100%",
textOverflow: "ellipsis",
overflow: "hidden",
}),
link: {
textDecoration: "none",
color: "inherit",
},
menuItem: (theme) => css`
gap: 20px;
padding: 8px 20px;

&:hover {
background-color: ${theme.palette.action.hover};
transition: background-color 0.3s ease;
}
`,
menuItemIcon: (theme) => ({
color: theme.palette.text.secondary,
width: 20,
height: 20,
}),
menuItemText: {
fontSize: 14,
},
footerText: (theme) => css`
font-size: 12px;
text-decoration: none;
color: ${theme.palette.text.secondary};
display: flex;
align-items: center;
gap: 4px;

& svg {
width: 12px;
height: 12px;
}
`,
buildInfo: (theme) => ({
color: theme.palette.text.primary,
}),
} satisfies Record<string, Interpolation<Theme>>;

export interface UserDropdownContentProps {
user: TypesGen.User;
organizations?: TypesGen.Organization[];
Expand Down Expand Up @@ -269,3 +214,58 @@ const includeBuildInfo = (
)}`,
);
};

const styles = {
info: (theme) => [
theme.typography.body2 as CSSObject,
{
padding: 20,
},
],
userName: {
fontWeight: 600,
},
userEmail: (theme) => ({
color: theme.palette.text.secondary,
width: "100%",
textOverflow: "ellipsis",
overflow: "hidden",
}),
link: {
textDecoration: "none",
color: "inherit",
},
menuItem: (theme) => css`
gap: 20px;
padding: 8px 20px;

&:hover {
background-color: ${theme.palette.action.hover};
transition: background-color 0.3s ease;
}
`,
menuItemIcon: (theme) => ({
color: theme.palette.text.secondary,
width: 20,
height: 20,
}),
menuItemText: {
fontSize: 14,
},
footerText: (theme) => css`
font-size: 12px;
text-decoration: none;
color: ${theme.palette.text.secondary};
display: flex;
align-items: center;
gap: 4px;

& svg {
width: 12px;
height: 12px;
}
`,
buildInfo: (theme) => ({
color: theme.palette.text.primary,
}),
} satisfies Record<string, Interpolation<Theme>>;
7 changes: 7 additions & 0 deletions site/src/modules/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* @fileoverview TODO: centralize navigation code here! URL constants, URL formatting, all of it
*/

export const USERS_LINK = `/users?filter=${encodeURIComponent(
"status:active",
)}`;
2 changes: 1 addition & 1 deletion site/src/pages/UsersPage/UsersLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Margins } from "components/Margins/Margins";
import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
import { TAB_PADDING_Y, TabLink, Tabs, TabsList } from "components/Tabs/Tabs";
import { useAuthenticated } from "contexts/auth/RequireAuth";
import { USERS_LINK } from "modules/dashboard/Navbar/NavbarView";
import { USERS_LINK } from "modules/navigation";
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";

export const UsersLayout: FC = () => {
Expand Down