Sep 24, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025
diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
 import { Avatar } from "components/Avatar/Avatar";
 import { useState } from "react";
 import { action } from "storybook/actions";
 import { expect, userEvent, within } from "storybook/test";
 import { expect,screen,userEvent, within } from "storybook/test";
 import {
 SelectFilter,
 type SelectFilterOption,
 const canvas = within(canvasElement);
 const button = canvas.getByRole("button");
 await userEvent.click(button);
 const option =canvas.getByText("Option 25");
 const option =screen.getByText("Option 25");
 await userEvent.click(option);
 await expect(button).toHaveTextContent("Option 25");
 },
 const canvas = within(canvasElement);
 const button = canvas.getByRole("button");
 await userEvent.click(button);
 const menu =canvasElement.querySelector<HTMLElement>("[role=menu]")!;
 const menu =screen.getByRole("menu");
 const option = within(menu).getByText("Option 26");
 await userEvent.click(option);
 await expect(button).toHaveTextContent("All options");
 const canvas = within(canvasElement);
 const button = canvas.getByRole("button");
 await userEvent.click(button);
 const search =canvas.getByLabelText("Search options");
 const search =screen.getByLabelText("Search options");
 await userEvent.type(search, "option-2");
 },
 };
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
 SelectMenuTrigger,
 } from "components/SelectMenu/SelectMenu";
 import { type FC, type ReactNode, useState } from "react";
 import { cn } from "utils/cn";

 const BASE_WIDTH = 200;
 const POPOVER_WIDTH = 320;

 export type SelectFilterOption = {
 startIcon?: ReactNode;
 </SelectMenuButton>
 </SelectMenuTrigger>
 <SelectMenuContent
 horizontal="right"
 css={{
 "& .MuiPaper-root": {
 //When including selectFilterSearch, we aim for the width to be as
 // wide as possible.
 width: selectFilterSearch ? "100%" : undefined,
 maxWidth: POPOVER_WIDTH,
 minWidth: width,
 },
 align="end"
 className={cn([
 // When including selectFilterSearch, we aim for the width to be as
 //wide as possible.
 selectFilterSearch && "w-full",
 "max-w-[320px]",
 ])}
 style={{
 minWidth: width,
 }}
 >
 {selectFilterSearch}
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import { visuallyHidden } from "@mui/utils";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
 import {
 Popover,
 PopoverContent,
 PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
 } from "components/Popover/Popover";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, lazy, Suspense, useState } from "react";


 <Global
 styles={css`
          em-emoji-picker {
            --rgb-background: ${theme.palette.background.paper};
            --rgb-input: ${theme.palette.primary.main};
            --rgb-color: ${theme.palette.text.primary};

            // Hack to prevent the right side from being cut off
            width: 350px;
          }
        `}
 em-emoji-picker {
 --rgb-background: ${theme.palette.background.paper};
 --rgb-input: ${theme.palette.primary.main};
 --rgb-color: ${theme.palette.text.primary};
 }
 `}
 />
 <Popover open={open} onOpenChange={setOpen}>
 <PopoverTrigger>
 <PopoverTrigger asChild>
 <Button variant="outline" size="lg" className="flex-shrink-0">
 Emoji
 <ChevronDownIcon />
 </Button>
 </PopoverTrigger>
 <PopoverContent id="emoji"horizontal="right">
 <PopoverContent id="emoji"side="bottom" align="end" className="w-min">
 <Suspense fallback={<Loader />}>
 <EmojiPicker
 onEmojiSelect={(emoji) => {
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
 } from "react";
 import { cn } from "utils/cn";

 export type PopoverContentProps = PopoverPrimitive.PopoverContentProps;

 export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;

 export const Popover = PopoverPrimitive.Root;

 export const PopoverTrigger = PopoverPrimitive.Trigger;

 export const PopoverClose = PopoverPrimitive.PopoverClose;

 export const PopoverContent = forwardRef<
 ElementRef<typeof PopoverPrimitive.Content>,
 ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 ref={ref}
 align={align}
 sideOffset={sideOffset}
 collisionPadding={16}
 className={cn(
 `z-50 w-72 rounded-md border border-solid bg-surface-primary
 text-content-primary shadow-md outline-none
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
 import {
 Popover,
 PopoverContent,
 type PopoverContentProps,
 PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
 type PopoverTriggerProps,
 } from "components/Popover/Popover";
 import {
 SearchField,
 type SearchFieldProps,

 export const SelectMenu = Popover;

 export const SelectMenuTrigger = PopoverTrigger;
 export const SelectMenuTrigger: FC<PopoverTriggerProps> = (props) => {
 return <PopoverTrigger asChild {...props} />;
 };

 export const SelectMenuContent = PopoverContent;
 export const SelectMenuContent: FC<PopoverContentProps> = (props) => {
 return (
 <PopoverContent
 {...props}
 className={cn(
 "w-auto bg-surface-secondary border-surface-quaternary overflow-y-auto text-sm",
 props.className,
 )}
 />
 );
 };

 type SelectMenuButtonProps = ButtonProps & {
 startIcon?: React.ReactNode;
diff --git a/site/src/hooks/useClassName.ts b/site/src/hooks/useClassName.ts
 import { type Theme, useTheme } from "@emotion/react";
 import { type DependencyList, useMemo } from "react";

 exporttype ClassName = (cssFn: typeof css, theme: Theme) => string;
 type ClassName = (cssFn: typeof css, theme: Theme) => string;

 /**
 * @deprecated This hook was used as an escape hatch to generate class names
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { css, type Interpolation, type Theme } from "@emotion/react";
 import MenuItem from "@mui/material/MenuItem";
 import { Button } from "components/Button/Button";
 import {
 Popover,
 PopoverClose,
 PopoverContent,
 PopoverTrigger,
 usePopover,
 } from "components/deprecated/Popover/Popover";
 } from "components/Popover/Popover";
 import { ChevronDownIcon } from "lucide-react";
 import { linkToAuditing } from "modules/navigation";
 import type { FC } from "react";
 canViewConnectionLog,
 canViewHealth,
 }) => {
 const theme = useTheme();

 if (
 !canViewAuditLog &&
 !canViewConnectionLog &&

 return (
 <Popover>
 <PopoverTrigger>
 <PopoverTrigger asChild>
 <Button variant="outline" size="lg">
 Admin settings
 <ChevronDownIcon className="text-content-primary !size-icon-xs" />
 </Button>
 </PopoverTrigger>

 <PopoverContent
 horizontal="right"
 css={{
 ".MuiPaper-root": {
 minWidth: "auto",
 width: 180,
 boxShadow: theme.shadows[6],
 },
 }}
 align="end"
 className="bg-surface-secondary border-surface-quaternary w-[180px] min-w-auto"
 >
 <DeploymentDropdownContent
 canViewDeployment={canViewDeployment}
 canViewHealth,
 canViewConnectionLog,
 }) => {
 const popover = usePopover();

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

 return (
 <nav>
 {canViewDeployment && (
 <MenuItem
 component={NavLink}
 to="/deployment"
 css={styles.menuItem}
 onClick={onPopoverClose}
 >
 Deployment
 </MenuItem>
 <PopoverClose asChild>
 <MenuItem component={NavLink} to="/deployment" css={styles.menuItem}>
 Deployment
 </MenuItem>
 </PopoverClose>
 )}
 {canViewOrganizations && (
 <MenuItem
 component={NavLink}
 to="/organizations"
 css={styles.menuItem}
 onClick={onPopoverClose}
 >
 Organizations
 </MenuItem>
 <PopoverClose asChild>
 <MenuItem
 component={NavLink}
 to="/organizations"
 css={styles.menuItem}
 >
 Organizations
 </MenuItem>
 </PopoverClose>
 )}
 {canViewAuditLog && (
 <MenuItem
 component={NavLink}
 to={linkToAuditing}
 css={styles.menuItem}
 onClick={onPopoverClose}
 >
 Audit Logs
 </MenuItem>
 <PopoverClose asChild>
 <MenuItem
 component={NavLink}
 to={linkToAuditing}
 css={styles.menuItem}
 >
 Audit Logs
 </MenuItem>
 </PopoverClose>
 )}
 {canViewConnectionLog && (
 <MenuItem
 component={NavLink}
 to="/connectionlog"
 css={styles.menuItem}
 onClick={onPopoverClose}
 >
 Connection Logs
 </MenuItem>
 <PopoverClose asChild>
 <MenuItem
 component={NavLink}
 to="/connectionlog"
 css={styles.menuItem}
 >
 Connection Logs
 </MenuItem>
 </PopoverClose>
 )}
 {canViewHealth && (
 <MenuItem
 component={NavLink}
 to="/health"
 css={styles.menuItem}
 onClick={onPopoverClose}
 >
 Healthcheck
 </MenuItem>
 <PopoverClose asChild>
 <MenuItem component={NavLink} to="/health" css={styles.menuItem}>
 Healthcheck
 </MenuItem>
 </PopoverClose>
 )}
 </nav>
 );
 };

 const styles = {
 menuItem: (theme) => css`
 text-decoration: none;
 color: inherit;
 gap: 8px;
 padding: 8px 20px;
 font-size: 14px;
 text-decoration: none;
 color: inherit;
 gap: 8px;
 padding: 8px 20px;
 font-size: 14px;

 &:hover {
 background-color: ${theme.palette.action.hover};
 transition: background-color 0.3s ease;
 }
 `,
 &:hover {
 background-color: ${theme.palette.action.hover};
 transition: background-color 0.3s ease;
 }
 `,
 menuItemIcon: (theme) => ({
 color: theme.palette.text.secondary,
 width: 20,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
		import { Avatar } from "components/Avatar/Avatar";
		import { useState } from "react";
		import { action } from "storybook/actions";
		import { expect, userEvent, within } from "storybook/test";
		import { expect,screen,userEvent, within } from "storybook/test";
		import {
		SelectFilter,
		type SelectFilterOption,
Expand DownExpand Up		@@ -88,7 +88,7 @@ export const SelectingOption: Story = {
		const canvas = within(canvasElement);
		const button = canvas.getByRole("button");
		await userEvent.click(button);
		const option =canvas.getByText("Option 25");
		const option =screen.getByText("Option 25");
		await userEvent.click(option);
		await expect(button).toHaveTextContent("Option 25");
		},
Expand All		@@ -102,7 +102,7 @@ export const UnselectingOption: Story = {
		const canvas = within(canvasElement);
		const button = canvas.getByRole("button");
		await userEvent.click(button);
		const menu =canvasElement.querySelector<HTMLElement>("[role=menu]")!;
Copy link Member aslilacSep 11, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. muuuuch better aqandrew reacted with laugh emoji
		const menu =screen.getByRole("menu");
		const option = within(menu).getByText("Option 26");
		await userEvent.click(option);
		await expect(button).toHaveTextContent("All options");
Expand DownExpand Up		@@ -140,7 +140,7 @@ export const SearchingOption: Story = {
		const canvas = within(canvasElement);
		const button = canvas.getByRole("button");
		await userEvent.click(button);
		const search =canvas.getByLabelText("Search options");
		const search =screen.getByLabelText("Search options");
		await userEvent.type(search, "option-2");
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,9 +10,9 @@ import {
		SelectMenuTrigger,
		} from "components/SelectMenu/SelectMenu";
		import { type FC, type ReactNode, useState } from "react";
		import { cn } from "utils/cn";

		const BASE_WIDTH = 200;
		const POPOVER_WIDTH = 320;

		export type SelectFilterOption = {
		startIcon?: ReactNode;
Expand DownExpand Up		@@ -60,15 +60,15 @@ export const SelectFilter: FC<SelectFilterProps> = ({
		</SelectMenuButton>
		</SelectMenuTrigger>
		<SelectMenuContent
		horizontal="right"
		css={{
		"& .MuiPaper-root": {
		//When including selectFilterSearch, we aim for the width to be as
		// wide as possible.
		width: selectFilterSearch ? "100%" : undefined,
		maxWidth: POPOVER_WIDTH,
		minWidth: width,
		},
		align="end"
		className={cn([
		// When including selectFilterSearch, we aim for the width to be as
		//wide as possible.
		selectFilterSearch && "w-full",
		"max-w-[320px]",
		])}
		style={{
		minWidth: width,
		}}
		>
		{selectFilterSearch}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,13 +3,13 @@ import InputAdornment from "@mui/material/InputAdornment";
		import TextField, { type TextFieldProps } from "@mui/material/TextField";
		import { visuallyHidden } from "@mui/utils";
		import { Button } from "components/Button/Button";
		import { ExternalImage } from "components/ExternalImage/ExternalImage";
		import { Loader } from "components/Loader/Loader";
		import {
		Popover,
		PopoverContent,
		PopoverTrigger,
		} from "components/deprecated/Popover/Popover";
		import { ExternalImage } from "components/ExternalImage/ExternalImage";
		import { Loader } from "components/Loader/Loader";
		} from "components/Popover/Popover";
		import { ChevronDownIcon } from "lucide-react";
		import { type FC, lazy, Suspense, useState } from "react";

Expand DownExpand Up		@@ -80,24 +80,21 @@ export const IconField: FC<IconFieldProps> = ({

		<Global
		styles={css`
		em-emoji-picker {
		--rgb-background: ${theme.palette.background.paper};
		--rgb-input: ${theme.palette.primary.main};
		--rgb-color: ${theme.palette.text.primary};

		// Hack to prevent the right side from being cut off
		width: 350px;
		}
		`}
		em-emoji-picker {
		--rgb-background: ${theme.palette.background.paper};
		--rgb-input: ${theme.palette.primary.main};
		--rgb-color: ${theme.palette.text.primary};
		}
		`}
		/>
		<Popover open={open} onOpenChange={setOpen}>
		<PopoverTrigger>
		<PopoverTrigger asChild>
		<Button variant="outline" size="lg" className="flex-shrink-0">
		Emoji
		<ChevronDownIcon />
		</Button>
		</PopoverTrigger>
		<PopoverContent id="emoji"horizontal="right">
		<PopoverContent id="emoji"side="bottom" align="end" className="w-min">
		<Suspense fallback={<Loader />}>
		<EmojiPicker
		onEmojiSelect={(emoji) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,10 +10,16 @@ import {
		} from "react";
		import { cn } from "utils/cn";

		export type PopoverContentProps = PopoverPrimitive.PopoverContentProps;

		export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;

		export const Popover = PopoverPrimitive.Root;

		export const PopoverTrigger = PopoverPrimitive.Trigger;

		export const PopoverClose = PopoverPrimitive.PopoverClose;

		export const PopoverContent = forwardRef<
		ElementRef<typeof PopoverPrimitive.Content>,
		ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
Expand All		@@ -23,6 +29,7 @@ export const PopoverContent = forwardRef<
		ref={ref}
		align={align}
		sideOffset={sideOffset}
		collisionPadding={16}
		className={cn(
		`z-50 w-72 rounded-md border border-solid bg-surface-primary
		text-content-primary shadow-md outline-none
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,8 +4,10 @@ import { Button, type ButtonProps } from "components/Button/Button";
		import {
		Popover,
		PopoverContent,
		type PopoverContentProps,
		PopoverTrigger,
		} from "components/deprecated/Popover/Popover";
		type PopoverTriggerProps,
		} from "components/Popover/Popover";
		import {
		SearchField,
		type SearchFieldProps,
Expand All		@@ -24,9 +26,21 @@ import { cn } from "utils/cn";

		export const SelectMenu = Popover;

		export const SelectMenuTrigger = PopoverTrigger;
		export const SelectMenuTrigger: FC<PopoverTriggerProps> = (props) => {
		return <PopoverTrigger asChild {...props} />;
		};

		export const SelectMenuContent = PopoverContent;
		export const SelectMenuContent: FC<PopoverContentProps> = (props) => {
		return (
		<PopoverContent
		{...props}
		className={cn(
		"w-auto bg-surface-secondary border-surface-quaternary overflow-y-auto text-sm",
		props.className,
		)}
		/>
		);
		};

		type SelectMenuButtonProps = ButtonProps & {
		startIcon?: React.ReactNode;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,7 +2,7 @@ import { css } from "@emotion/css";
		import { type Theme, useTheme } from "@emotion/react";
		import { type DependencyList, useMemo } from "react";

		exporttype ClassName = (cssFn: typeof css, theme: Theme) => string;
		type ClassName = (cssFn: typeof css, theme: Theme) => string;
Copy link Member aslilacSep 11, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. this means we're getting closer!! excited to see this old hack gone aqandrew and Parkreiner reacted with heart emoji

		/**
		* @deprecated This hook was used as an escape hatch to generate class names
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,12 +1,12 @@
		import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
		import { css, type Interpolation, type Theme } from "@emotion/react";
		import MenuItem from "@mui/material/MenuItem";
		import { Button } from "components/Button/Button";
		import {
		Popover,
		PopoverClose,
		PopoverContent,
		PopoverTrigger,
		usePopover,
		} from "components/deprecated/Popover/Popover";
		} from "components/Popover/Popover";
		import { ChevronDownIcon } from "lucide-react";
		import { linkToAuditing } from "modules/navigation";
		import type { FC } from "react";
Expand All		@@ -27,8 +27,6 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
		canViewConnectionLog,
		canViewHealth,
		}) => {
		const theme = useTheme();

		if (
		!canViewAuditLog &&
		!canViewConnectionLog &&
Expand All		@@ -41,22 +39,16 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({

		return (
		<Popover>
		<PopoverTrigger>
		<PopoverTrigger asChild>
		<Button variant="outline" size="lg">
		Admin settings
		<ChevronDownIcon className="text-content-primary !size-icon-xs" />
		</Button>
		</PopoverTrigger>

		<PopoverContent
		horizontal="right"
		css={{
		".MuiPaper-root": {
		minWidth: "auto",
		width: 180,
		boxShadow: theme.shadows[6],
		},
		}}
		align="end"
		className="bg-surface-secondary border-surface-quaternary w-[180px] min-w-auto"
		>
		<DeploymentDropdownContent
		canViewDeployment={canViewDeployment}
Expand All		@@ -77,79 +69,72 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
		canViewHealth,
		canViewConnectionLog,
		}) => {
		const popover = usePopover();

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

		return (
		<nav>
		{canViewDeployment && (
		<MenuItem
		component={NavLink}
		to="/deployment"
		css={styles.menuItem}
		onClick={onPopoverClose}
		>
		Deployment
		</MenuItem>
		<PopoverClose asChild>
		<MenuItem component={NavLink} to="/deployment" css={styles.menuItem}>
		Deployment
		</MenuItem>
		</PopoverClose>
		)}
		{canViewOrganizations && (
		<MenuItem
		component={NavLink}
		to="/organizations"
		css={styles.menuItem}
		onClick={onPopoverClose}
		>
		Organizations
		</MenuItem>
		<PopoverClose asChild>
		<MenuItem
		component={NavLink}
		to="/organizations"
		css={styles.menuItem}
		>
		Organizations
		</MenuItem>
		</PopoverClose>
		)}
		{canViewAuditLog && (
		<MenuItem
		component={NavLink}
		to={linkToAuditing}
		css={styles.menuItem}
		onClick={onPopoverClose}
		>
		Audit Logs
		</MenuItem>
		<PopoverClose asChild>
		<MenuItem
		component={NavLink}
		to={linkToAuditing}
		css={styles.menuItem}
		>
		Audit Logs
		</MenuItem>
		</PopoverClose>
		)}
		{canViewConnectionLog && (
		<MenuItem
		component={NavLink}
		to="/connectionlog"
		css={styles.menuItem}
		onClick={onPopoverClose}
		>
		Connection Logs
		</MenuItem>
		<PopoverClose asChild>
		<MenuItem
		component={NavLink}
		to="/connectionlog"
		css={styles.menuItem}
		>
		Connection Logs
		</MenuItem>
		</PopoverClose>
		)}
		{canViewHealth && (
		<MenuItem
		component={NavLink}
		to="/health"
		css={styles.menuItem}
		onClick={onPopoverClose}
		>
		Healthcheck
		</MenuItem>
		<PopoverClose asChild>
		<MenuItem component={NavLink} to="/health" css={styles.menuItem}>
		Healthcheck
		</MenuItem>
		</PopoverClose>
		)}
		</nav>
		);
		};

		const styles = {
		menuItem: (theme) => css`
		text-decoration: none;
		color: inherit;
		gap: 8px;
		padding: 8px 20px;
		font-size: 14px;
		text-decoration: none;
		color: inherit;
		gap: 8px;
		padding: 8px 20px;
		font-size: 14px;

		&:hover {
		background-color: ${theme.palette.action.hover};
		transition: background-color 0.3s ease;
		}
		`,
		&:hover {
		background-color: ${theme.palette.action.hover};
		transition: background-color 0.3s ease;
		}
		`,
		menuItemIcon: (theme) => ({
		color: theme.palette.text.secondary,
		width: 20,
Expand Down