coder · BrunoQuaresma · Dec 30, 2024 · Dec 26, 2024 · Dec 26, 2024 · Dec 26, 2024
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -64,6 +64,14 @@ export const parameters = {
 				},
 				type: "tablet",
 			},
+			iphone12: {
+				name: "iPhone 12",
+				styles: {
+					height: "844px",
+					width: "390px",
+				},
+				type: "mobile",
+			},
 			terminal: {
 				name: "Terminal",
 				styles: {

diff --git a/site/src/components/Breadcrumb/Breadcrumb.tsx b/site/src/components/Breadcrumb/Breadcrumb.tsx
@@ -28,7 +28,7 @@ export const BreadcrumbList = forwardRef<
 	<ol
 		ref={ref}
 		className={cn(
-			"flex flex-wrap items-center text-sm pl-12 my-4 gap-1.5 break-words font-medium list-none sm:gap-2.5",
+			"flex flex-wrap items-center text-sm pl-6 my-4 gap-1.5 break-words font-medium list-none sm:gap-2.5",
 			className,
 		)}
 		{...props}

diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -4,7 +4,7 @@
  */
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
-import { type FC, forwardRef } from "react";
+import { forwardRef } from "react";
 import { cn } from "utils/cn";
 
 export const buttonVariants = cva(
@@ -13,7 +13,8 @@ export const buttonVariants = cva(
 	text-sm font-semibold font-medium  cursor-pointer
 	focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
 	disabled:pointer-events-none disabled:text-content-disabled
-	[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
+	[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+	px-3 py-2`,
 	{
 		variants: {
 			variant: {
@@ -25,10 +26,15 @@ export const buttonVariants = cva(
 					"border-none bg-transparent text-content-secondary hover:text-content-primary",
 				warning:
 					"border border-border-error text-content-primary bg-surface-error hover:bg-transparent",
+				ghost:
+					"text-content-primary bg-transparent border-0 hover:bg-surface-secondary",
 			},
+
 			size: {
-				default: "h-9 px-3 py-2",
-				sm: "h-8 px-2 text-xs",
+				lg: "h-10",
+				default: "h-9",
+				sm: "h-8 px-2 py-1.5 text-xs",
+				icon: "h-10 w-10",
 			},
 		},
 		defaultVariants: {
@@ -44,16 +50,15 @@ export interface ButtonProps
 	asChild?: boolean;
 }
 
-export const Button: FC<ButtonProps> = forwardRef<
-	HTMLButtonElement,
-	ButtonProps
->(({ className, variant, size, asChild = false, ...props }, ref) => {
-	const Comp = asChild ? Slot : "button";
-	return (
-		<Comp
-			className={cn(buttonVariants({ variant, size, className }))}
-			ref={ref}
-			{...props}
-		/>
-	);
-});
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx
@@ -7,10 +7,12 @@
  */
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import { Button } from "components/Button/Button";
+import { Check, ChevronDownIcon, ChevronRight, Circle } from "lucide-react";
 import {
 	type ComponentPropsWithoutRef,
 	type ElementRef,
+	type FC,
 	type HTMLAttributes,
 	forwardRef,
 } from "react";
@@ -196,7 +198,7 @@ export const DropdownMenuSeparator = forwardRef<
 >(({ className, ...props }, ref) => (
 	<DropdownMenuPrimitive.Separator
 		ref={ref}
-		className={cn(["-mx-1 my-1 h-px bg-border"], className)}
+		className={cn(["-mx-1 my-3 h-px bg-border"], className)}
 		{...props}
 	/>
 ));

diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
@@ -15,6 +15,8 @@ import {
 import { useQuery } from "react-query";
 import { type ProxyLatencyReport, useProxyLatency } from "./useProxyLatency";
 
+export type Proxies = readonly Region[] | readonly WorkspaceProxy[];
+export type ProxyLatencies = Record<string, ProxyLatencyReport>;
 export interface ProxyContextValue {
 	// proxy is **always** the workspace proxy that should be used.
 	// The 'proxy.selectedProxy' field is the proxy being used and comes from either:
@@ -43,15 +45,15 @@ export interface ProxyContextValue {
 	// WorkspaceProxy[] is returned if the user is an admin. WorkspaceProxy extends Region with
 	//  more information about the proxy and the status. More information includes the error message if
 	//  the proxy is unhealthy.
-	proxies?: readonly Region[] | readonly WorkspaceProxy[];
+	proxies?: Proxies;
 	// isFetched is true when the 'proxies' api call is complete.
 	isFetched: boolean;
 	isLoading: boolean;
 	error?: unknown;
 	// proxyLatencies is a map of proxy id to latency report. If the proxyLatencies[proxy.id] is undefined
 	// then the latency has not been fetched yet. Calculations happen async for each proxy in the list.
 	// Refer to the returned report for a given proxy for more information.
-	proxyLatencies: Record<string, ProxyLatencyReport>;
+	proxyLatencies: ProxyLatencies;
 	// refetchProxyLatencies will trigger refreshing of the proxy latencies. By default the latencies
 	// are loaded once.
 	refetchProxyLatencies: () => Date;

diff --git a/site/src/index.css b/site/src/index.css
@@ -70,4 +70,17 @@
 	* {
 		@apply border-border;
 	}
+
+	/*
+	By default, Radix adds a margin to the `body` element when a dropdown is displayed,
+	causing some shifting when the dropdown has a full-width size, as is the case with the mobile menu.
+	To prevent this, we need to apply the styles below.
+
+	There’s a related issue on GitHub: Radix UI Primitives Issue #3251
+	https://github.com/radix-ui/primitives/issues/3251
+	 */
+	html body[data-scroll-locked] {
+		--removed-body-scroll-bar-size: 0 !important;
+		margin-right: 0 !important;
+	}
 }
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
@@ -1,30 +1,28 @@
 import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Button } from "components/Button/Button";
 import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
 	usePopover,
 } from "components/deprecated/Popover/Popover";
+import { ChevronDownIcon } from "lucide-react";
 import { linkToAuditing } from "modules/navigation";
 import type { FC } from "react";
 import { NavLink } from "react-router-dom";
 
 interface DeploymentDropdownProps {
 	canViewDeployment: boolean;
 	canViewOrganizations: boolean;
-	canViewAllUsers: boolean;
 	canViewAuditLog: boolean;
 	canViewHealth: boolean;
 }
 
 export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 	canViewDeployment,
 	canViewOrganizations,
-	canViewAllUsers,
 	canViewAuditLog,
 	canViewHealth,
 }) => {
@@ -34,7 +32,6 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 		!canViewAuditLog &&
 		!canViewOrganizations &&
 		!canViewDeployment &&
-		!canViewAllUsers &&
 		!canViewHealth
 	) {
 		return null;
@@ -43,17 +40,9 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 	return (
 		<Popover>
 			<PopoverTrigger>
-				<Button
-					size="small"
-					endIcon={
-						<DropdownArrow
-							color={theme.experimental.l2.fill.solid}
-							close={false}
-							margin={false}
-						/>
-					}
-				>
+				<Button variant="outline" size="lg">
 					Admin settings
+					<ChevronDownIcon className="text-content-primary !size-icon-xs" />
 				</Button>
 			</PopoverTrigger>
 
@@ -70,7 +59,6 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 				<DeploymentDropdownContent
 					canViewDeployment={canViewDeployment}
 					canViewOrganizations={canViewOrganizations}
-					canViewAllUsers={canViewAllUsers}
 					canViewAuditLog={canViewAuditLog}
 					canViewHealth={canViewHealth}
 				/>

diff --git a/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx b/site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn, userEvent, within } from "@storybook/test";
+import { PointerEventsCheckLevel } from "@testing-library/user-event";
+import type { FC } from "react";
+import { chromaticWithTablet } from "testHelpers/chromatic";
+import {
+	MockPrimaryWorkspaceProxy,
+	MockProxyLatencies,
+	MockSupportLinks,
+	MockUser,
+	MockUser2,
+	MockWorkspaceProxies,
+} from "testHelpers/entities";
+import { MobileMenu } from "./MobileMenu";
+
+const meta: Meta<typeof MobileMenu> = {
+	title: "modules/dashboard/MobileMenu",
+	parameters: {
+		layout: "fullscreen",
+		viewport: {
+			defaultViewport: "iphone12",
+		},
+	},
+	component: MobileMenu,
+	args: {
+		proxyContextValue: {
+			proxy: {
+				preferredPathAppURL: "",
+				preferredWildcardHostname: "",
+				proxy: MockPrimaryWorkspaceProxy,
+			},
+			isLoading: false,
+			isFetched: true,
+			setProxy: fn(),
+			clearProxy: fn(),
+			refetchProxyLatencies: fn(),
+			proxyLatencies: MockProxyLatencies,
+			proxies: MockWorkspaceProxies,
+		},
+		user: MockUser,
+		supportLinks: MockSupportLinks,
+		docsHref: "https://coder.com/docs",
+		onSignOut: fn(),
+		isDefaultOpen: true,
+		canViewAuditLog: true,
+		canViewDeployment: true,
+		canViewHealth: true,
+		canViewOrganizations: true,
+	},
+	decorators: [withNavbarMock],
+};
+
+export default meta;
+type Story = StoryObj<typeof MobileMenu>;
+
+export const Closed: Story = {
+	args: {
+		isDefaultOpen: false,
+	},
+};
+
+export const Admin: Story = {
+	play: openAdminSettings,
+};
+
+export const Auditor: Story = {
+	args: {
+		user: MockUser2,
+		canViewAuditLog: true,
+		canViewDeployment: false,
+		canViewHealth: false,
+		canViewOrganizations: false,
+	},
+	play: openAdminSettings,
+};
+
+export const OrgAdmin: Story = {
+	args: {
+		user: MockUser2,
+		canViewAuditLog: true,
+		canViewDeployment: false,
+		canViewHealth: false,
+		canViewOrganizations: true,
+	},
+	play: openAdminSettings,
+};
+
+export const Member: Story = {
+	args: {
+		user: MockUser2,
+		canViewAuditLog: false,
+		canViewDeployment: false,
+		canViewHealth: false,
+		canViewOrganizations: false,
+	},
+};
+
+export const ProxySettings: Story = {
+	play: async ({ canvasElement }) => {
+		const user = setupUser();
+		const body = within(canvasElement.ownerDocument.body);
+		const menuItem = await body.findByRole("menuitem", {
+			name: /workspace proxy settings/i,
+		});
+		await user.click(menuItem);
+	},
+};
+
+export const UserSettings: Story = {
+	play: async ({ canvasElement }) => {
+		const user = setupUser();
+		const body = within(canvasElement.ownerDocument.body);
+		const menuItem = await body.findByRole("menuitem", {
+			name: /user settings/i,
+		});
+		await user.click(menuItem);
+	},
+};
+
+function withNavbarMock(Story: FC) {
+	return (
+		<div className="h-[72px] border-0 border-b border-solid px-6 flex items-center justify-end">
+			<Story />
+		</div>
+	);
+}
+
+function setupUser() {
+	// It seems the dropdown component is disabling pointer events, which is
+	// causing Testing Library to throw an error. As a workaround, we can
+	// disable the pointer events check.
+	return userEvent.setup({
+		pointerEventsCheck: PointerEventsCheckLevel.Never,
+	});
+}
+
+async function openAdminSettings({
+	canvasElement,
+}: { canvasElement: HTMLElement }) {
+	const user = setupUser();
+	const body = within(canvasElement.ownerDocument.body);
+	const menuItem = await body.findByRole("menuitem", {
+		name: /admin settings/i,
+	});
+	await user.click(menuItem);
+}