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 3 commits
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";

Check failure on line 4 in site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx

View workflow job for this annotation

GitHub Actions / lint 

TypeScript will only remove the inline type specifiers which will leave behind a side effect import at runtime. Convert this to a top-level type qualifier to properly remove the entire import

Check failure on line 4 in site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx

View workflow job for this annotation

GitHub Actions / lint 

TypeScript will only remove the inline type specifiers which will leave behind a side effect import at runtime. Convert this to a top-level type qualifier to properly remove the entire import
import { NavLink } from "react-router-dom";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import {

Check failure on line 7 in site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx

View workflow job for this annotation

GitHub Actions / lint 

There should be no empty line between import groups

Check failure on line 7 in site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx

View workflow job for this annotation

GitHub Actions / lint 

There should be no empty line between import groups
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 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";

Check failure on line 16 in site/src/modules/dashboard/Navbar/NavbarView.tsx

View workflow job for this annotation

GitHub Actions / fmt 

'DropdownArrow' is defined but never used. Allowed unused vars must match /^_/u

Check failure on line 16 in site/src/modules/dashboard/Navbar/NavbarView.tsx

View workflow job for this annotation

GitHub Actions / lint 

'DropdownArrow' is defined but never used. Allowed unused vars must match /^_/u

Check failure on line 16 in site/src/modules/dashboard/Navbar/NavbarView.tsx

View workflow job for this annotation

GitHub Actions / lint 

'DropdownArrow' is defined but never used. Allowed unused vars must match /^_/u
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 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";

Check failure on line 25 in site/src/modules/dashboard/Navbar/NavbarView.tsx

View workflow job for this annotation

GitHub Actions / lint 

`./DeploymentDropdown` import should occur before import of `./UserDropdown/UserDropdown`

Check failure on line 25 in site/src/modules/dashboard/Navbar/NavbarView.tsx

View workflow job for this annotation

GitHub Actions / lint 

`./DeploymentDropdown` import should occur before import of `./UserDropdown/UserDropdown`

export interface NavbarViewProps {
logo_url?: string;
Expand All @@ -44,25 +42,14 @@
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 @@
<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 @@
)}
</div>
</div>
<NavItems
canViewAuditLog={canViewAuditLog}
canViewDeployment={canViewDeployment}
canViewAllUsers={canViewAllUsers}
canViewHealth={canViewHealth}
/>
<NavItems />
</div>
</Drawer>

Expand All @@ -174,18 +136,20 @@
)}
</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 @@ -268,3 +213,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,8 +13,8 @@
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";

Check failure on line 17 in site/src/pages/UsersPage/UsersLayout.tsx

View workflow job for this annotation

GitHub Actions / lint 

`modules/dashboard/useFeatureVisibility` import should occur before import of `modules/navigation`

Check failure on line 17 in site/src/pages/UsersPage/UsersLayout.tsx

View workflow job for this annotation

GitHub Actions / lint 

`modules/dashboard/useFeatureVisibility` import should occur before import of `modules/navigation`

export const UsersLayout: FC = () => {
const { permissions } = useAuthenticated();
Expand Down
Loading