From d222f7231a9f7a9cc5c396dc619d991093e62e61 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 25 Jun 2024 19:29:11 +0000
Subject: [PATCH 01/15] Replace search by menu search

---
 site/src/components/Menu/MenuSearch.tsx       | 23 +++++++++
 .../pages/WorkspacesPage/WorkspacesButton.tsx |  9 ++--
 .../WorkspacesPage/WorkspacesSearchBox.tsx    | 50 -------------------
 3 files changed, 27 insertions(+), 55 deletions(-)
 create mode 100644 site/src/components/Menu/MenuSearch.tsx
 delete mode 100644 site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx

diff --git a/site/src/components/Menu/MenuSearch.tsx b/site/src/components/Menu/MenuSearch.tsx
new file mode 100644
index 0000000000000..32f8cab9f4a8f
--- /dev/null
+++ b/site/src/components/Menu/MenuSearch.tsx
@@ -0,0 +1,23 @@
+import type { FC } from "react";
+import {
+  SearchField,
+  type SearchFieldProps,
+} from "components/SearchField/SearchField";
+
+export const MenuSearch: FC<SearchFieldProps> = (props) => {
+  return (
+    <SearchField
+      fullWidth
+      css={(theme) => ({
+        "& fieldset": {
+          border: 0,
+          borderRadius: 0,
+          // MUI has so many nested selectors that it's easier to just
+          // override the border directly using the `!important` hack
+          borderBottom: `1px solid ${theme.palette.divider} !important`,
+        },
+      })}
+      {...props}
+    />
+  );
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index aef8f7518331a..95df46d32316f 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -11,6 +11,7 @@ import {
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Loader } from "components/Loader/Loader";
+import { MenuSearch } from "components/Menu/MenuSearch";
 import { OverflowY } from "components/OverflowY/OverflowY";
 import {
   Popover,
@@ -18,7 +19,6 @@ import {
   PopoverTrigger,
 } from "components/Popover/Popover";
 import { SearchEmpty, searchStyles } from "components/Search/Search";
-import { SearchBox } from "./WorkspacesSearchBox";
 
 const ICON_SIZE = 18;
 
@@ -67,12 +67,11 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
           ".MuiPaper-root": searchStyles.content,
         }}
       >
-        <SearchBox
+        <MenuSearch
           value={searchTerm}
-          onValueChange={(newValue) => setSearchTerm(newValue)}
+          onChange={setSearchTerm}
           placeholder="Type/select a workspace template"
-          label="Template select for workspace"
-          css={{ flexShrink: 0, columnGap: 12 }}
+          aria-label="Template select for workspace"
         />
 
         <OverflowY
diff --git a/site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx b/site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx
deleted file mode 100644
index d92d27c6ee238..0000000000000
--- a/site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @file Defines a controlled searchbox component for processing form state.
- *
- * Not defined as a top-level component just yet, because it's not clear how
- * reusable this is outside of workspace dropdowns.
- */
-import {
-  type FC,
-  type KeyboardEvent,
-  type InputHTMLAttributes,
-  type Ref,
-  useId,
-} from "react";
-import { Search, SearchInput } from "components/Search/Search";
-
-interface SearchBoxProps extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  value: string;
-  onKeyDown?: (event: KeyboardEvent) => void;
-  onValueChange: (newValue: string) => void;
-  $$ref?: Ref<HTMLInputElement>;
-}
-
-export const SearchBox: FC<SearchBoxProps> = ({
-  onValueChange,
-  onKeyDown,
-  label = "Search",
-  placeholder = "Search...",
-  $$ref,
-  ...attrs
-}) => {
-  const hookId = useId();
-  const inputId = `${hookId}-${SearchBox.name}-input`;
-
-  return (
-    <Search>
-      <SearchInput
-        label={label}
-        $$ref={$$ref}
-        id={inputId}
-        autoFocus
-        tabIndex={0}
-        placeholder={placeholder}
-        {...attrs}
-        onKeyDown={onKeyDown}
-        onChange={(e) => onValueChange(e.target.value)}
-      />
-    </Search>
-  );
-};

From 050f2c9fb9d9d84aa3a04811d515672c6ed039ea Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 26 Jun 2024 16:06:07 +0000
Subject: [PATCH 02/15] Add select menu component

---
 site/src/components/Avatar/Avatar.tsx         |   9 +-
 .../components/SearchField/SearchField.tsx    |   2 +-
 .../SelectMenu/SelectMenu.stories.tsx         |  66 ++++++++++
 site/src/components/SelectMenu/SelectMenu.tsx | 118 ++++++++++++++++++
 4 files changed, 191 insertions(+), 4 deletions(-)
 create mode 100644 site/src/components/SelectMenu/SelectMenu.stories.tsx
 create mode 100644 site/src/components/SelectMenu/SelectMenu.tsx

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index 5c4e46f6d863d..ad9f1e6d7f4bb 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -18,20 +18,23 @@ const sizeStyles = {
   xs: {
     width: 16,
     height: 16,
-    fontSize: 8,
+    // Should never be overrided
+    fontSize: "8px !important",
     fontWeight: 700,
   },
   sm: {
     width: 24,
     height: 24,
-    fontSize: 12,
+    // Should never be overrided
+    fontSize: "12px !important",
     fontWeight: 600,
   },
   md: {},
   xl: {
     width: 48,
     height: 48,
-    fontSize: 24,
+    // Should never be overrided
+    fontSize: "24px !important",
   },
 } satisfies Record<string, Interpolation<Theme>>;
 
diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
index 9e81b74e972ac..2f2c65001df22 100644
--- a/site/src/components/SearchField/SearchField.tsx
+++ b/site/src/components/SearchField/SearchField.tsx
@@ -29,7 +29,7 @@ export const SearchField: FC<SearchFieldProps> = ({
           <InputAdornment position="start">
             <SearchIcon
               css={{
-                fontSize: 14,
+                fontSize: 16,
                 color: theme.palette.text.secondary,
               }}
             />
diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx
new file mode 100644
index 0000000000000..26a3c4c434b52
--- /dev/null
+++ b/site/src/components/SelectMenu/SelectMenu.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import { withDesktopViewport } from "testHelpers/storybook";
+import {
+  SelectMenu,
+  SelectMenuButton,
+  SelectMenuContent,
+  SelectMenuIcon,
+  SelectMenuItem,
+  SelectMenuList,
+  SelectMenuSearch,
+  SelectMenuTrigger,
+} from "./SelectMenu";
+
+const meta: Meta<typeof SelectMenu> = {
+  title: "components/SelectMenu",
+  component: SelectMenu,
+  render: function SelectMenuRender() {
+    const opts = options(50);
+    const selectedOpt = opts[20];
+
+    return (
+      <SelectMenu>
+        <SelectMenuTrigger>
+          <SelectMenuButton
+            startIcon={<UserAvatar size="xs" username={selectedOpt} />}
+          >
+            {selectedOpt}
+          </SelectMenuButton>
+        </SelectMenuTrigger>
+        <SelectMenuContent>
+          <SelectMenuSearch onChange={() => {}} />
+          <SelectMenuList>
+            {opts.map((o) => (
+              <SelectMenuItem key={o} selected={o === selectedOpt}>
+                <SelectMenuIcon>
+                  <UserAvatar size="xs" username={o} />
+                </SelectMenuIcon>
+                {o}
+              </SelectMenuItem>
+            ))}
+          </SelectMenuList>
+        </SelectMenuContent>
+      </SelectMenu>
+    );
+  },
+  decorators: [withDesktopViewport],
+};
+
+function options(n: number): string[] {
+  return Array.from({ length: n }, (_, i) => `Item ${i + 1}`);
+}
+
+export default meta;
+type Story = StoryObj<typeof SelectMenu>;
+
+export const Closed: Story = {};
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+  },
+};
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
new file mode 100644
index 0000000000000..6e9f44b14dc27
--- /dev/null
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -0,0 +1,118 @@
+import CheckOutlined from "@mui/icons-material/CheckOutlined";
+import Button, { type ButtonProps } from "@mui/material/Button";
+import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
+import MenuList, { type MenuListProps } from "@mui/material/MenuList";
+import {
+  type FC,
+  forwardRef,
+  Children,
+  isValidElement,
+  type HTMLProps,
+} from "react";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "components/Popover/Popover";
+import {
+  SearchField,
+  type SearchFieldProps,
+} from "components/SearchField/SearchField";
+
+const SIDE_PADDING = 16;
+
+export const SelectMenu = Popover;
+
+export const SelectMenuTrigger = PopoverTrigger;
+
+export const SelectMenuContent = PopoverContent;
+
+export const SelectMenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return (
+      <Button
+        css={{
+          "& .MuiButton-startIcon": {
+            marginLeft: 0,
+            marginRight: SIDE_PADDING,
+          },
+        }}
+        endIcon={<DropdownArrow />}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
+  return (
+    <SearchField
+      fullWidth
+      size="medium"
+      css={(theme) => ({
+        "& fieldset": {
+          border: 0,
+          borderRadius: 0,
+          borderBottom: `1px solid ${theme.palette.divider} !important`,
+        },
+        "& .MuiInputBase-root": {
+          padding: `12px ${SIDE_PADDING}px`,
+        },
+        "& .MuiInputAdornment-positionStart": {
+          marginRight: SIDE_PADDING,
+        },
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SelectMenuList: FC<MenuListProps> = (props) => {
+  const items = Children.toArray(props.children);
+  type ItemType = (typeof items)[number];
+  const selectedAsFirst = (a: ItemType, b: ItemType) => {
+    if (
+      !isValidElement<MenuItemProps>(a) ||
+      !isValidElement<MenuItemProps>(b)
+    ) {
+      throw new Error(
+        "SelectMenuList children must be SelectMenuItem components",
+      );
+    }
+    return a.props.selected ? -1 : 0;
+  };
+  items.sort(selectedAsFirst);
+  return (
+    <MenuList css={{ maxHeight: 480 }} {...props}>
+      {items}
+    </MenuList>
+  );
+};
+
+export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = (props) => {
+  return <div css={{ marginRight: 16 }} {...props} />;
+};
+
+export const SelectMenuItem: FC<MenuItemProps> = (props) => {
+  return (
+    <MenuItem
+      css={{
+        fontSize: 14,
+        gap: 0,
+        lineHeight: 1,
+        padding: `12px ${SIDE_PADDING}px`,
+      }}
+      {...props}
+    >
+      {props.children}
+      {props.selected && (
+        <CheckOutlined
+          // TODO: Don't set the menu icon font size on default theme
+          css={{ marginLeft: "auto", fontSize: "inherit !important" }}
+        />
+      )}
+    </MenuItem>
+  );
+};

From d4c183b2f94745639c89aa98dcce89ccfbb05486 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 26 Jun 2024 17:12:27 +0000
Subject: [PATCH 03/15] Add select filter menu

---
 .../SelectFilter/SelectFilter.stories.tsx     | 136 ++++++++++++++++++
 .../components/SelectFilter/SelectFilter.tsx  | 104 ++++++++++++++
 site/src/components/SelectMenu/SelectMenu.tsx |   4 +
 3 files changed, 244 insertions(+)
 create mode 100644 site/src/components/SelectFilter/SelectFilter.stories.tsx
 create mode 100644 site/src/components/SelectFilter/SelectFilter.tsx

diff --git a/site/src/components/SelectFilter/SelectFilter.stories.tsx b/site/src/components/SelectFilter/SelectFilter.stories.tsx
new file mode 100644
index 0000000000000..6d8fd5ed0e873
--- /dev/null
+++ b/site/src/components/SelectFilter/SelectFilter.stories.tsx
@@ -0,0 +1,136 @@
+import { action } from "@storybook/addon-actions";
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within, expect } from "@storybook/test";
+import { useState } from "react";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import { withDesktopViewport } from "testHelpers/storybook";
+import { SelectFilter, type SelectFilterOption } from "./SelectFilter";
+
+const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
+  startIcon: <UserAvatar username={`username ${i}`} size="xs" />,
+  label: `Option ${i + 1}`,
+  value: `option-${i + 1}`,
+}));
+
+const meta: Meta<typeof SelectFilter> = {
+  title: "components/SelectFilter",
+  component: SelectFilter,
+  args: {
+    options,
+    placeholder: "All options",
+  },
+  decorators: [withDesktopViewport],
+  render: function SelectFilterWithState(args) {
+    const [selectedOption, setSelectedOption] = useState<
+      SelectFilterOption | undefined
+    >(args.selectedOption);
+    return (
+      <SelectFilter
+        {...args}
+        selectedOption={selectedOption}
+        onSelect={setSelectedOption}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectFilter>;
+
+export const Closed: Story = {
+  play: undefined,
+};
+
+export const Open: Story = {};
+
+export const Selected: Story = {
+  args: {
+    selectedOption: options[25],
+  },
+};
+
+export const WithSearch: Story = {
+  args: {
+    selectedOption: options[25],
+    search: "",
+    onSearchChange: action("onSearch"),
+    searchPlaceholder: "Search options...",
+  },
+};
+
+export const LoadingOptions: Story = {
+  args: {
+    options: undefined,
+  },
+};
+
+export const NoOptionsFound: Story = {
+  args: {
+    options: [],
+  },
+};
+
+export const SelectingOption: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+    const option = canvas.getByText("Option 25");
+    await userEvent.click(option);
+    await expect(button).toHaveTextContent("Option 25");
+  },
+};
+
+export const UnselectingOption: Story = {
+  args: {
+    selectedOption: options[25],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+    const menu = canvasElement.querySelector<HTMLElement>("[role=menu]")!;
+    const option = within(menu).getByText("Option 26");
+    await userEvent.click(option);
+    await expect(button).toHaveTextContent("All options");
+  },
+};
+
+export const SearchingOption: Story = {
+  args: {
+    searchPlaceholder: "Search options...",
+    searchAriaLabel: "Search options",
+  },
+  render: function SelectFilterWithSearch(args) {
+    const [selectedOption, setSelectedOption] = useState<
+      SelectFilterOption | undefined
+    >(args.selectedOption);
+    const [search, setSearch] = useState("");
+    const visibleOptions = options.filter((option) =>
+      option.value.includes(search),
+    );
+
+    return (
+      <SelectFilter
+        {...args}
+        search={search}
+        onSearchChange={setSearch}
+        selectedOption={selectedOption}
+        onSelect={setSelectedOption}
+        options={visibleOptions}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+    const search = canvas.getByLabelText("Search options");
+    await userEvent.type(search, "option-2");
+  },
+};
diff --git a/site/src/components/SelectFilter/SelectFilter.tsx b/site/src/components/SelectFilter/SelectFilter.tsx
new file mode 100644
index 0000000000000..2014509164d53
--- /dev/null
+++ b/site/src/components/SelectFilter/SelectFilter.tsx
@@ -0,0 +1,104 @@
+import { useState, type FC, type ReactNode } from "react";
+import { Loader } from "components/Loader/Loader";
+import {
+  SelectMenu,
+  SelectMenuTrigger,
+  SelectMenuButton,
+  SelectMenuContent,
+  SelectMenuSearch,
+  SelectMenuList,
+  SelectMenuItem,
+  SelectMenuIcon,
+} from "components/SelectMenu/SelectMenu";
+
+export type SelectFilterOption = {
+  startIcon?: ReactNode;
+  label: ReactNode;
+  value: string;
+};
+
+export type SelectFilterProps = {
+  options: SelectFilterOption[];
+  onSelect: (option: SelectFilterOption | undefined) => void;
+  selectedOption?: SelectFilterOption;
+  placeholder: string;
+  emptyText?: string;
+  // Search props
+  search?: string;
+  onSearchChange?: (search: string) => void;
+  searchPlaceholder?: string;
+  searchAriaLabel?: string;
+};
+
+export const SelectFilter: FC<SelectFilterProps> = ({
+  options,
+  selectedOption,
+  onSelect,
+  onSearchChange,
+  placeholder,
+  searchAriaLabel,
+  searchPlaceholder,
+  emptyText,
+  search,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <SelectMenu open={open} onOpenChange={setOpen}>
+      <SelectMenuTrigger>
+        <SelectMenuButton startIcon={selectedOption?.startIcon}>
+          {selectedOption?.label ?? placeholder}
+        </SelectMenuButton>
+      </SelectMenuTrigger>
+      <SelectMenuContent>
+        {onSearchChange && (
+          <SelectMenuSearch
+            value={search}
+            onChange={onSearchChange}
+            placeholder={searchPlaceholder}
+            inputProps={{ "aria-label": searchAriaLabel }}
+          />
+        )}
+        {options ? (
+          options.length > 0 ? (
+            <SelectMenuList>
+              {options.map((o) => {
+                const isSelected = o.value === selectedOption?.value;
+                return (
+                  <SelectMenuItem
+                    key={o.value}
+                    selected={isSelected}
+                    onClick={() => {
+                      setOpen(false);
+                      onSelect(isSelected ? undefined : o);
+                    }}
+                  >
+                    {o.startIcon && (
+                      <SelectMenuIcon>{o.startIcon}</SelectMenuIcon>
+                    )}
+                    {o.label}
+                  </SelectMenuItem>
+                );
+              })}
+            </SelectMenuList>
+          ) : (
+            <div
+              css={(theme) => ({
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: 32,
+                color: theme.palette.text.secondary,
+                lineHeight: 1,
+              })}
+            >
+              {emptyText ?? "No options found"}
+            </div>
+          )
+        ) : (
+          <Loader size={16} />
+        )}
+      </SelectMenuContent>
+    </SelectMenu>
+  );
+};
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index 6e9f44b14dc27..f68e829fdb4c6 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -52,6 +52,10 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
       fullWidth
       size="medium"
       css={(theme) => ({
+        "& input": {
+          fontSize: 14,
+        },
+
         "& fieldset": {
           border: 0,
           borderRadius: 0,

From 0706238e57b58e224d7cbc50b05cec67d1ecc0be Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 26 Jun 2024 20:29:43 +0000
Subject: [PATCH 04/15] Replace filter menu by SelectFilter

---
 .../components/Filter/OptionItem.stories.tsx  |  39 ---
 site/src/components/Filter/UserFilter.tsx     |  64 ++--
 site/src/components/Filter/filter.tsx         | 278 +-----------------
 site/src/components/Filter/menu.ts            |  21 +-
 site/src/components/Filter/options.ts         |   4 -
 .../components/SelectFilter/SelectFilter.tsx  |   4 +-
 site/src/components/SelectMenu/SelectMenu.tsx |   1 +
 .../StatusIndicator/StatusIndicator.tsx       |  22 ++
 .../TemplateAvatar/TemplateAvatar.tsx         |  18 ++
 site/src/pages/AuditPage/AuditFilter.tsx      |  45 +--
 site/src/pages/UsersPage/UsersFilter.tsx      |  84 ++----
 .../pages/WorkspacesPage/filter/filter.tsx    | 124 +-------
 .../filter/{menus.ts => menus.tsx}            |  43 ++-
 .../pages/WorkspacesPage/filter/options.ts    |  10 -
 14 files changed, 163 insertions(+), 594 deletions(-)
 delete mode 100644 site/src/components/Filter/OptionItem.stories.tsx
 delete mode 100644 site/src/components/Filter/options.ts
 create mode 100644 site/src/components/StatusIndicator/StatusIndicator.tsx
 create mode 100644 site/src/components/TemplateAvatar/TemplateAvatar.tsx
 rename site/src/pages/WorkspacesPage/filter/{menus.ts => menus.tsx} (64%)
 delete mode 100644 site/src/pages/WorkspacesPage/filter/options.ts

diff --git a/site/src/components/Filter/OptionItem.stories.tsx b/site/src/components/Filter/OptionItem.stories.tsx
deleted file mode 100644
index d8b223d7b90ed..0000000000000
--- a/site/src/components/Filter/OptionItem.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { OptionItem } from "./filter";
-
-const meta: Meta<typeof OptionItem> = {
-  title: "components/Filter/OptionItem",
-  component: OptionItem,
-  decorators: [
-    (Story) => {
-      return (
-        <div style={{ width: "300px" }}>
-          <Story />
-        </div>
-      );
-    },
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof OptionItem>;
-
-export const Selected: Story = {
-  args: {
-    option: {
-      label: "Success option",
-      value: "success",
-    },
-    isSelected: true,
-  },
-};
-
-export const NotSelected: Story = {
-  args: {
-    option: {
-      label: "Success option",
-      value: "success",
-    },
-    isSelected: false,
-  },
-};
diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
index a42dbf07d791c..b6fe349ea7cba 100644
--- a/site/src/components/Filter/UserFilter.tsx
+++ b/site/src/components/Filter/UserFilter.tsx
@@ -1,26 +1,22 @@
 import type { FC } from "react";
 import { API } from "api/api";
+import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
-import { UserAvatar } from "../UserAvatar/UserAvatar";
-import { FilterSearchMenu, OptionItem } from "./filter";
+import { FilterMenu } from "./filter";
 import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
-import type { BaseOption } from "./options";
-
-export type UserOption = BaseOption & {
-  avatarUrl?: string;
-};
 
 export const useUserFilterMenu = ({
   value,
   onChange,
   enabled,
 }: Pick<
-  UseFilterMenuOptions<UserOption>,
+  UseFilterMenuOptions<SelectFilterOption>,
   "value" | "onChange" | "enabled"
 >) => {
   const { user: me } = useAuthenticated();
 
-  const addMeAsFirstOption = (options: UserOption[]) => {
+  const addMeAsFirstOption = (options: SelectFilterOption[]) => {
     options = options.filter((option) => option.value !== me.username);
     return [
       { label: me.username, value: me.username, avatarUrl: me.avatar_url },
@@ -55,10 +51,16 @@ export const useUserFilterMenu = ({
     },
     getOptions: async (query) => {
       const usersRes = await API.getUsers({ q: query, limit: 25 });
-      let options: UserOption[] = usersRes.users.map((user) => ({
+      let options: SelectFilterOption[] = usersRes.users.map((user) => ({
         label: user.username,
         value: user.username,
-        avatarUrl: user.avatar_url,
+        startIcon: (
+          <UserAvatar
+            username={user.username}
+            avatarURL={user.avatar_url}
+            size="xs"
+          />
+        ),
       }));
       options = addMeAsFirstOption(options);
       return options;
@@ -74,39 +76,13 @@ interface UserMenuProps {
 
 export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
   return (
-    <FilterSearchMenu
-      id="users-menu"
-      menu={menu}
-      label={
-        menu.selectedOption ? (
-          <UserOptionItem option={menu.selectedOption} />
-        ) : (
-          "All users"
-        )
-      }
-    >
-      {(itemProps) => <UserOptionItem {...itemProps} />}
-    </FilterSearchMenu>
-  );
-};
-
-interface UserOptionItemProps {
-  option: UserOption;
-  isSelected?: boolean;
-}
-
-const UserOptionItem: FC<UserOptionItemProps> = ({ option, isSelected }) => {
-  return (
-    <OptionItem
-      option={option}
-      isSelected={isSelected}
-      left={
-        <UserAvatar
-          username={option.label}
-          avatarURL={option.avatarUrl}
-          css={{ width: 16, height: 16, fontSize: 8 }}
-        />
-      }
+    <FilterMenu
+      options={menu.searchOptions}
+      onSelect={menu.selectOption}
+      placeholder="All users"
+      selectedOption={menu.selectedOption ?? undefined}
+      search={menu.query}
+      onSearchChange={menu.setQuery}
     />
   );
 };
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
index 29fb34ee4c251..c8446eec55639 100644
--- a/site/src/components/Filter/filter.tsx
+++ b/site/src/components/Filter/filter.tsx
@@ -1,21 +1,12 @@
 import { useTheme } from "@emotion/react";
-import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
-import Button, { type ButtonProps } from "@mui/material/Button";
+import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
-import Menu, { type MenuProps } from "@mui/material/Menu";
+import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import MenuList from "@mui/material/MenuList";
 import Skeleton, { type SkeletonProps } from "@mui/material/Skeleton";
-import {
-  type FC,
-  type ReactNode,
-  forwardRef,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
 import type { useSearchParams } from "react-router-dom";
 import {
   getValidationErrorMessage,
@@ -23,17 +14,12 @@ import {
   isApiValidationError,
 } from "api/errors";
 import { InputGroup } from "components/InputGroup/InputGroup";
-import { Loader } from "components/Loader/Loader";
-import {
-  Search,
-  SearchEmpty,
-  SearchInput,
-  searchStyles,
-} from "components/Search/Search";
 import { SearchField } from "components/SearchField/SearchField";
+import {
+  SelectFilter,
+  type SelectFilterProps,
+} from "components/SelectFilter/SelectFilter";
 import { useDebouncedFunction } from "hooks/debounce";
-import type { useFilterMenu } from "./menu";
-import type { BaseOption } from "./options";
 
 export type PresetFilter = {
   name: string;
@@ -340,252 +326,6 @@ const PresetMenu: FC<PresetMenuProps> = ({
   );
 };
 
-interface FilterMenuProps<TOption extends BaseOption> {
-  menu: ReturnType<typeof useFilterMenu<TOption>>;
-  label: ReactNode;
-  id: string;
-  children: (values: { option: TOption; isSelected: boolean }) => ReactNode;
-}
-
-export const FilterMenu = <TOption extends BaseOption>(
-  props: FilterMenuProps<TOption>,
-) => {
-  const { id, menu, label, children } = props;
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const handleClose = () => {
-    setIsMenuOpen(false);
-  };
-
-  return (
-    <div>
-      <MenuButton
-        ref={buttonRef}
-        onClick={() => setIsMenuOpen(true)}
-        css={{ minWidth: 200 }}
-      >
-        {label}
-      </MenuButton>
-      <Menu
-        id={id}
-        anchorEl={buttonRef.current}
-        open={isMenuOpen}
-        onClose={handleClose}
-        css={{ "& .MuiPaper-root": { minWidth: 200 } }}
-        // Disabled this so when we clear the filter and do some sorting in the
-        // search items it does not look strange. Github removes exit transitions
-        // on their filters as well.
-        transitionDuration={{
-          enter: 250,
-          exit: 0,
-        }}
-      >
-        {menu.searchOptions?.map((option) => (
-          <MenuItem
-            key={option.label}
-            selected={option.value === menu.selectedOption?.value}
-            onClick={() => {
-              menu.selectOption(option);
-              handleClose();
-            }}
-          >
-            {children({
-              option,
-              isSelected: option.value === menu.selectedOption?.value,
-            })}
-          </MenuItem>
-        ))}
-      </Menu>
-    </div>
-  );
-};
-
-interface FilterSearchMenuProps<TOption extends BaseOption> {
-  menu: ReturnType<typeof useFilterMenu<TOption>>;
-  label: ReactNode;
-  id: string;
-  children: (values: { option: TOption; isSelected: boolean }) => ReactNode;
-}
-
-export const FilterSearchMenu = <TOption extends BaseOption>({
-  id,
-  menu,
-  label,
-  children,
-}: FilterSearchMenuProps<TOption>) => {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const handleClose = () => {
-    setIsMenuOpen(false);
-  };
-
-  return (
-    <div>
-      <MenuButton
-        ref={buttonRef}
-        onClick={() => setIsMenuOpen(true)}
-        css={{ minWidth: 200 }}
-      >
-        {label}
-      </MenuButton>
-      <SearchMenu
-        id={id}
-        anchorEl={buttonRef.current}
-        open={isMenuOpen}
-        onClose={handleClose}
-        options={menu.searchOptions}
-        query={menu.query}
-        onQueryChange={menu.setQuery}
-        renderOption={(option) => (
-          <MenuItem
-            key={option.value}
-            selected={option.value === menu.selectedOption?.value}
-            onClick={() => {
-              menu.selectOption(option);
-              handleClose();
-            }}
-          >
-            {children({
-              option,
-              isSelected: option.value === menu.selectedOption?.value,
-            })}
-          </MenuItem>
-        )}
-      />
-    </div>
-  );
-};
-
-type OptionItemProps = {
-  option: BaseOption;
-  left?: ReactNode;
-  isSelected?: boolean;
+export const FilterMenu: FC<SelectFilterProps> = (props) => {
+  return <SelectFilter {...props} />;
 };
-
-export const OptionItem: FC<OptionItemProps> = ({
-  option,
-  left,
-  isSelected,
-}) => {
-  return (
-    <div
-      css={{
-        display: "flex",
-        alignItems: "center",
-        gap: 16,
-        fontSize: 14,
-        overflow: "hidden",
-        width: "100%",
-      }}
-    >
-      {left}
-      <span css={{ overflow: "hidden", textOverflow: "ellipsis" }}>
-        {option.label}
-      </span>
-      {isSelected && (
-        <CheckOutlined css={{ width: 16, height: 16, marginLeft: "auto" }} />
-      )}
-    </div>
-  );
-};
-
-const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const { children, ...attrs } = props;
-
-  return (
-    <Button
-      ref={ref}
-      endIcon={<KeyboardArrowDown />}
-      css={{
-        borderRadius: "6px",
-        justifyContent: "space-between",
-        lineHeight: "120%",
-      }}
-      {...attrs}
-    >
-      {children}
-    </Button>
-  );
-});
-
-interface SearchMenuProps<TOption extends BaseOption>
-  extends Pick<MenuProps, "anchorEl" | "open" | "onClose" | "id"> {
-  options?: TOption[];
-  renderOption: (option: TOption) => ReactNode;
-  query: string;
-  onQueryChange: (query: string) => void;
-}
-
-function SearchMenu<TOption extends BaseOption>({
-  options,
-  renderOption,
-  query,
-  onQueryChange,
-  ...menuProps
-}: SearchMenuProps<TOption>) {
-  const menuListRef = useRef<HTMLUListElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <Menu
-      {...menuProps}
-      onClose={(event, reason) => {
-        menuProps.onClose && menuProps.onClose(event, reason);
-        onQueryChange("");
-      }}
-      css={{
-        "& .MuiPaper-root": searchStyles.content,
-      }}
-      // Disabled this so when we clear the filter and do some sorting in the
-      // search items it does not look strange. Github removes exit transitions
-      // on their filters as well.
-      transitionDuration={{
-        enter: 250,
-        exit: 0,
-      }}
-      onKeyDown={(e) => {
-        e.stopPropagation();
-        if (e.key === "ArrowDown" && menuListRef.current) {
-          const firstItem = menuListRef.current.firstChild as HTMLElement;
-          firstItem.focus();
-        }
-      }}
-    >
-      <Search component="li">
-        <SearchInput
-          autoFocus
-          value={query}
-          $$ref={searchInputRef}
-          onChange={(e) => {
-            onQueryChange(e.target.value);
-          }}
-        />
-      </Search>
-
-      <li css={{ maxHeight: 480, overflowY: "auto" }}>
-        <MenuList
-          ref={menuListRef}
-          onKeyDown={(e) => {
-            if (e.shiftKey && e.code === "Tab") {
-              e.preventDefault();
-              e.stopPropagation();
-              searchInputRef.current?.focus();
-            }
-          }}
-        >
-          {options ? (
-            options.length > 0 ? (
-              options.map(renderOption)
-            ) : (
-              <SearchEmpty />
-            )
-          ) : (
-            <Loader size={14} />
-          )}
-        </MenuList>
-      </li>
-    </Menu>
-  );
-}
diff --git a/site/src/components/Filter/menu.ts b/site/src/components/Filter/menu.ts
index 21cfec33ad3cc..d011ada4f0d3e 100644
--- a/site/src/components/Filter/menu.ts
+++ b/site/src/components/Filter/menu.ts
@@ -1,8 +1,8 @@
 import { useMemo, useRef, useState } from "react";
 import { useQuery } from "react-query";
-import type { BaseOption } from "./options";
+import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
 
-export type UseFilterMenuOptions<TOption extends BaseOption> = {
+export type UseFilterMenuOptions<TOption extends SelectFilterOption> = {
   id: string;
   value: string | undefined;
   // Using null because of react-query
@@ -13,7 +13,9 @@ export type UseFilterMenuOptions<TOption extends BaseOption> = {
   enabled?: boolean;
 };
 
-export const useFilterMenu = <TOption extends BaseOption = BaseOption>({
+export const useFilterMenu = <
+  TOption extends SelectFilterOption = SelectFilterOption,
+>({
   id,
   value,
   getSelectedOption,
@@ -78,16 +80,13 @@ export const useFilterMenu = <TOption extends BaseOption = BaseOption>({
     selectedOption,
   ]);
 
-  const selectOption = (option: TOption) => {
-    let newSelectedOptionValue: TOption | undefined = option;
-    selectedOptionsCacheRef.current[option.value] = option;
-    setQuery("");
-
-    if (option.value === selectedOption?.value) {
-      newSelectedOptionValue = undefined;
+  const selectOption = (option: TOption | undefined) => {
+    if (option) {
+      selectedOptionsCacheRef.current[option.value] = option;
     }
 
-    onChange(newSelectedOptionValue);
+    setQuery("");
+    onChange(option);
   };
 
   return {
diff --git a/site/src/components/Filter/options.ts b/site/src/components/Filter/options.ts
deleted file mode 100644
index 08b71deb88a3a..0000000000000
--- a/site/src/components/Filter/options.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type BaseOption = {
-  label: string;
-  value: string;
-};
diff --git a/site/src/components/SelectFilter/SelectFilter.tsx b/site/src/components/SelectFilter/SelectFilter.tsx
index 2014509164d53..64171650f8db3 100644
--- a/site/src/components/SelectFilter/SelectFilter.tsx
+++ b/site/src/components/SelectFilter/SelectFilter.tsx
@@ -13,12 +13,12 @@ import {
 
 export type SelectFilterOption = {
   startIcon?: ReactNode;
-  label: ReactNode;
+  label: string;
   value: string;
 };
 
 export type SelectFilterProps = {
-  options: SelectFilterOption[];
+  options: SelectFilterOption[] | undefined;
   onSelect: (option: SelectFilterOption | undefined) => void;
   selectedOption?: SelectFilterOption;
   placeholder: string;
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index f68e829fdb4c6..9dd3c3b4b9c84 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -33,6 +33,7 @@ export const SelectMenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Button
         css={{
+          flexShrink: 0,
           "& .MuiButton-startIcon": {
             marginLeft: 0,
             marginRight: SIDE_PADDING,
diff --git a/site/src/components/StatusIndicator/StatusIndicator.tsx b/site/src/components/StatusIndicator/StatusIndicator.tsx
new file mode 100644
index 0000000000000..572ecb017e945
--- /dev/null
+++ b/site/src/components/StatusIndicator/StatusIndicator.tsx
@@ -0,0 +1,22 @@
+import { useTheme } from "@emotion/react";
+import type { FC } from "react";
+import type { ThemeRole } from "theme/roles";
+
+interface StatusIndicatorProps {
+  color: ThemeRole;
+}
+
+export const StatusIndicator: FC<StatusIndicatorProps> = ({ color }) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      css={{
+        height: 8,
+        width: 8,
+        borderRadius: 4,
+        backgroundColor: theme.roles[color].fill.solid,
+      }}
+    />
+  );
+};
diff --git a/site/src/components/TemplateAvatar/TemplateAvatar.tsx b/site/src/components/TemplateAvatar/TemplateAvatar.tsx
new file mode 100644
index 0000000000000..49aa7fbb02e10
--- /dev/null
+++ b/site/src/components/TemplateAvatar/TemplateAvatar.tsx
@@ -0,0 +1,18 @@
+import type { FC } from "react";
+import type { Template } from "api/typesGenerated";
+import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
+
+interface TemplateAvatarProps extends AvatarProps {
+  template: Template;
+}
+
+export const TemplateAvatar: FC<TemplateAvatarProps> = ({
+  template,
+  ...avatarProps
+}) => {
+  return template.icon ? (
+    <Avatar src={template.icon} variant="square" fitImage {...avatarProps} />
+  ) : (
+    <Avatar {...avatarProps}>{template.display_name || template.name}</Avatar>
+  );
+};
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
index e02100e11e448..41b1eecb9baca 100644
--- a/site/src/pages/AuditPage/AuditFilter.tsx
+++ b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -5,7 +5,6 @@ import {
   Filter,
   FilterMenu,
   MenuSkeleton,
-  OptionItem,
   SearchFieldSkeleton,
   type useFilter,
 } from "components/Filter/filter";
@@ -13,8 +12,8 @@ import {
   useFilterMenu,
   type UseFilterMenuOptions,
 } from "components/Filter/menu";
-import type { BaseOption } from "components/Filter/options";
 import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
+import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
 import { docs } from "utils/docs";
 
 const PRESET_FILTERS = [
@@ -74,8 +73,8 @@ export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
 export const useActionFilterMenu = ({
   value,
   onChange,
-}: Pick<UseFilterMenuOptions<BaseOption>, "value" | "onChange">) => {
-  const actionOptions: BaseOption[] = AuditActions.map((action) => ({
+}: Pick<UseFilterMenuOptions<SelectFilterOption>, "value" | "onChange">) => {
+  const actionOptions: SelectFilterOption[] = AuditActions.map((action) => ({
     value: action,
     label: capitalize(action),
   }));
@@ -94,26 +93,19 @@ export type ActionFilterMenu = ReturnType<typeof useActionFilterMenu>;
 const ActionMenu = (menu: ActionFilterMenu) => {
   return (
     <FilterMenu
-      id="action-menu"
-      menu={menu}
-      label={
-        menu.selectedOption ? (
-          <OptionItem option={menu.selectedOption} />
-        ) : (
-          "All actions"
-        )
-      }
-    >
-      {(itemProps) => <OptionItem {...itemProps} />}
-    </FilterMenu>
+      options={menu.searchOptions}
+      onSelect={menu.selectOption}
+      placeholder="All actions"
+      selectedOption={menu.selectedOption ?? undefined}
+    />
   );
 };
 
 export const useResourceTypeFilterMenu = ({
   value,
   onChange,
-}: Pick<UseFilterMenuOptions<BaseOption>, "value" | "onChange">) => {
-  const actionOptions: BaseOption[] = ResourceTypes.map((type) => {
+}: Pick<UseFilterMenuOptions<SelectFilterOption>, "value" | "onChange">) => {
+  const actionOptions: SelectFilterOption[] = ResourceTypes.map((type) => {
     let label = capitalize(type);
 
     if (type === "api_key") {
@@ -154,17 +146,10 @@ export type ResourceTypeFilterMenu = ReturnType<
 const ResourceTypeMenu = (menu: ResourceTypeFilterMenu) => {
   return (
     <FilterMenu
-      id="resource-type-menu"
-      menu={menu}
-      label={
-        menu.selectedOption ? (
-          <OptionItem option={menu.selectedOption} />
-        ) : (
-          "All resource types"
-        )
-      }
-    >
-      {(itemProps) => <OptionItem {...itemProps} />}
-    </FilterMenu>
+      options={menu.searchOptions}
+      onSelect={menu.selectOption}
+      placeholder="All resource types"
+      selectedOption={menu.selectedOption ?? undefined}
+    />
   );
 };
diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
index 45af4103685b5..d8a933d2378a2 100644
--- a/site/src/pages/UsersPage/UsersFilter.tsx
+++ b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -1,10 +1,8 @@
-import { useTheme } from "@emotion/react";
 import type { FC } from "react";
 import {
   Filter,
   FilterMenu,
   MenuSkeleton,
-  OptionItem,
   SearchFieldSkeleton,
   type useFilter,
 } from "components/Filter/filter";
@@ -12,8 +10,8 @@ import {
   type UseFilterMenuOptions,
   useFilterMenu,
 } from "components/Filter/menu";
-import type { BaseOption } from "components/Filter/options";
-import type { ThemeRole } from "theme/roles";
+import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
 import { docs } from "utils/docs";
 
 const userFilterQuery = {
@@ -21,18 +19,26 @@ const userFilterQuery = {
   all: "",
 };
 
-type StatusOption = BaseOption & {
-  color: ThemeRole;
-};
-
 export const useStatusFilterMenu = ({
   value,
   onChange,
-}: Pick<UseFilterMenuOptions<StatusOption>, "value" | "onChange">) => {
-  const statusOptions: StatusOption[] = [
-    { value: "active", label: "Active", color: "success" },
-    { value: "dormant", label: "Dormant", color: "notice" },
-    { value: "suspended", label: "Suspended", color: "warning" },
+}: Pick<UseFilterMenuOptions<SelectFilterOption>, "value" | "onChange">) => {
+  const statusOptions: SelectFilterOption[] = [
+    {
+      value: "active",
+      label: "Active",
+      startIcon: <StatusIndicator color="success" />,
+    },
+    {
+      value: "dormant",
+      label: "Dormant",
+      startIcon: <StatusIndicator color="notice" />,
+    },
+    {
+      value: "suspended",
+      label: "Suspended",
+      startIcon: <StatusIndicator color="warning" />,
+    },
   ];
   return useFilterMenu({
     onChange,
@@ -83,54 +89,10 @@ export const UsersFilter: FC<UsersFilterProps> = ({ filter, error, menus }) => {
 const StatusMenu = (menu: StatusFilterMenu) => {
   return (
     <FilterMenu
-      id="status-menu"
-      menu={menu}
-      label={
-        menu.selectedOption ? (
-          <StatusOptionItem option={menu.selectedOption} />
-        ) : (
-          "All statuses"
-        )
-      }
-    >
-      {(itemProps) => <StatusOptionItem {...itemProps} />}
-    </FilterMenu>
-  );
-};
-
-interface StatusOptionItemProps {
-  option: StatusOption;
-  isSelected?: boolean;
-}
-
-const StatusOptionItem: FC<StatusOptionItemProps> = ({
-  option,
-  isSelected,
-}) => {
-  return (
-    <OptionItem
-      option={option}
-      left={<StatusIndicator option={option} />}
-      isSelected={isSelected}
-    />
-  );
-};
-
-interface StatusIndicatorProps {
-  option: StatusOption;
-}
-
-const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
-  const theme = useTheme();
-
-  return (
-    <div
-      css={{
-        height: 8,
-        width: 8,
-        borderRadius: 4,
-        backgroundColor: theme.roles[option.color].fill.solid,
-      }}
+      placeholder="All statuses"
+      options={menu.searchOptions}
+      onSelect={menu.selectOption}
+      selectedOption={menu.selectedOption ?? undefined}
     />
   );
 };
diff --git a/site/src/pages/WorkspacesPage/filter/filter.tsx b/site/src/pages/WorkspacesPage/filter/filter.tsx
index 74b534d5d5d6b..da1066714ae26 100644
--- a/site/src/pages/WorkspacesPage/filter/filter.tsx
+++ b/site/src/pages/WorkspacesPage/filter/filter.tsx
@@ -1,20 +1,19 @@
-import { useTheme } from "@emotion/react";
 import type { FC } from "react";
-import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
 import {
   Filter,
-  FilterMenu,
-  FilterSearchMenu,
   MenuSkeleton,
-  OptionItem,
   SearchFieldSkeleton,
   type useFilter,
 } from "components/Filter/filter";
 import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { docs } from "utils/docs";
-import type { TemplateFilterMenu, StatusFilterMenu } from "./menus";
-import type { TemplateOption, StatusOption } from "./options";
+import {
+  TemplateMenu,
+  StatusMenu,
+  type TemplateFilterMenu,
+  type StatusFilterMenu,
+} from "./menus";
 
 export const workspaceFilterQuery = {
   me: "owner:me",
@@ -109,114 +108,3 @@ export const WorkspacesFilter: FC<WorkspaceFilterProps> = ({
     />
   );
 };
-
-const TemplateMenu = (menu: TemplateFilterMenu) => {
-  return (
-    <FilterSearchMenu
-      id="templates-menu"
-      menu={menu}
-      label={
-        menu.selectedOption ? (
-          <TemplateOptionItem option={menu.selectedOption} />
-        ) : (
-          "All templates"
-        )
-      }
-    >
-      {(itemProps) => <TemplateOptionItem {...itemProps} />}
-    </FilterSearchMenu>
-  );
-};
-
-interface TemplateOptionItemProps {
-  option: TemplateOption;
-  isSelected?: boolean;
-}
-
-const TemplateOptionItem: FC<TemplateOptionItemProps> = ({
-  option,
-  isSelected,
-}) => {
-  return (
-    <OptionItem
-      option={option}
-      isSelected={isSelected}
-      left={
-        <TemplateAvatar
-          templateName={option.label}
-          icon={option.icon}
-          css={{ width: 14, height: 14, fontSize: 8 }}
-        />
-      }
-    />
-  );
-};
-
-interface TemplateAvatarProps extends AvatarProps {
-  templateName: string;
-  icon?: string;
-}
-
-const TemplateAvatar: FC<TemplateAvatarProps> = ({
-  templateName,
-  icon,
-  ...avatarProps
-}) => {
-  return icon ? (
-    <Avatar src={icon} variant="square" fitImage {...avatarProps} />
-  ) : (
-    <Avatar {...avatarProps}>{templateName}</Avatar>
-  );
-};
-
-const StatusMenu = (menu: StatusFilterMenu) => {
-  return (
-    <FilterMenu
-      id="status-menu"
-      menu={menu}
-      label={
-        menu.selectedOption ? (
-          <StatusOptionItem option={menu.selectedOption} />
-        ) : (
-          "All statuses"
-        )
-      }
-    >
-      {(itemProps) => <StatusOptionItem {...itemProps} />}
-    </FilterMenu>
-  );
-};
-
-interface StatusOptionItem {
-  option: StatusOption;
-  isSelected?: boolean;
-}
-
-const StatusOptionItem: FC<StatusOptionItem> = ({ option, isSelected }) => {
-  return (
-    <OptionItem
-      option={option}
-      left={<StatusIndicator option={option} />}
-      isSelected={isSelected}
-    />
-  );
-};
-
-interface StatusIndicatorProps {
-  option: StatusOption;
-}
-
-const StatusIndicator: FC<StatusIndicatorProps> = ({ option }) => {
-  const theme = useTheme();
-
-  return (
-    <div
-      css={{
-        height: 8,
-        width: 8,
-        borderRadius: 4,
-        backgroundColor: theme.roles[option.color].fill.solid,
-      }}
-    />
-  );
-};
diff --git a/site/src/pages/WorkspacesPage/filter/menus.ts b/site/src/pages/WorkspacesPage/filter/menus.tsx
similarity index 64%
rename from site/src/pages/WorkspacesPage/filter/menus.ts
rename to site/src/pages/WorkspacesPage/filter/menus.tsx
index f8b6755f50e82..25ba6a90861a2 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.ts
+++ b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -1,18 +1,21 @@
 import { API } from "api/api";
 import type { WorkspaceStatus } from "api/typesGenerated";
+import { FilterMenu } from "components/Filter/filter";
 import {
   useFilterMenu,
   type UseFilterMenuOptions,
 } from "components/Filter/menu";
+import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
+import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
-import type { StatusOption, TemplateOption } from "./options";
 
 export const useTemplateFilterMenu = ({
   value,
   onChange,
   organizationId,
 }: { organizationId: string } & Pick<
-  UseFilterMenuOptions<TemplateOption>,
+  UseFilterMenuOptions<SelectFilterOption>,
   "value" | "onChange"
 >) => {
   return useFilterMenu({
@@ -30,7 +33,7 @@ export const useTemplateFilterMenu = ({
               ? template.display_name
               : template.name,
           value: template.name,
-          icon: template.icon,
+          startIcon: <TemplateAvatar size="xs" template={template} />,
         };
       }
       return null;
@@ -55,10 +58,27 @@ export const useTemplateFilterMenu = ({
 
 export type TemplateFilterMenu = ReturnType<typeof useTemplateFilterMenu>;
 
+export const TemplateMenu = (menu: TemplateFilterMenu) => {
+  return (
+    <FilterMenu
+      placeholder="All templates"
+      options={menu.searchOptions}
+      onSelect={menu.selectOption}
+      searchAriaLabel="Search template"
+      searchPlaceholder="Search template..."
+      selectedOption={menu.selectedOption ?? undefined}
+      search={menu.query}
+      onSearchChange={menu.setQuery}
+    />
+  );
+};
+
+/** Status Filter Menu */
+
 export const useStatusFilterMenu = ({
   value,
   onChange,
-}: Pick<UseFilterMenuOptions<StatusOption>, "value" | "onChange">) => {
+}: Pick<UseFilterMenuOptions<SelectFilterOption>, "value" | "onChange">) => {
   const statusesToFilter: WorkspaceStatus[] = [
     "running",
     "stopped",
@@ -70,8 +90,8 @@ export const useStatusFilterMenu = ({
     return {
       label: display.text,
       value: status,
-      color: display.type ?? "warning",
-    } as StatusOption;
+      startIcon: <StatusIndicator color={display.type ?? "warning"} />,
+    };
   });
   return useFilterMenu({
     onChange,
@@ -84,3 +104,14 @@ export const useStatusFilterMenu = ({
 };
 
 export type StatusFilterMenu = ReturnType<typeof useStatusFilterMenu>;
+
+export const StatusMenu = (menu: StatusFilterMenu) => {
+  return (
+    <FilterMenu
+      placeholder="All statuses"
+      options={menu.searchOptions}
+      selectedOption={menu.selectedOption ?? undefined}
+      onSelect={menu.selectOption}
+    />
+  );
+};
diff --git a/site/src/pages/WorkspacesPage/filter/options.ts b/site/src/pages/WorkspacesPage/filter/options.ts
deleted file mode 100644
index 329e5b48612c4..0000000000000
--- a/site/src/pages/WorkspacesPage/filter/options.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { BaseOption } from "components/Filter/options";
-import type { ThemeRole } from "theme/roles";
-
-export type StatusOption = BaseOption & {
-  color: ThemeRole;
-};
-
-export type TemplateOption = BaseOption & {
-  icon?: string;
-};

From 60aa0169be962f4c1612a19e2da01fe2bc972a11 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 26 Jun 2024 20:41:09 +0000
Subject: [PATCH 05/15] Fix search icons

---
 site/src/components/Filter/UserFilter.tsx     | 28 +++++++++++++++++--
 .../src/pages/WorkspacesPage/filter/menus.tsx |  2 +-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
index b6fe349ea7cba..a943cc81ef0db 100644
--- a/site/src/components/Filter/UserFilter.tsx
+++ b/site/src/components/Filter/UserFilter.tsx
@@ -19,7 +19,17 @@ export const useUserFilterMenu = ({
   const addMeAsFirstOption = (options: SelectFilterOption[]) => {
     options = options.filter((option) => option.value !== me.username);
     return [
-      { label: me.username, value: me.username, avatarUrl: me.avatar_url },
+      {
+        label: me.username,
+        value: me.username,
+        startIcon: (
+          <UserAvatar
+            username={me.username}
+            avatarURL={me.avatar_url}
+            size="xs"
+          />
+        ),
+      },
       ...options,
     ];
   };
@@ -34,7 +44,13 @@ export const useUserFilterMenu = ({
         return {
           label: me.username,
           value: me.username,
-          avatarUrl: me.avatar_url,
+          startIcon: (
+            <UserAvatar
+              username={me.username}
+              avatarURL={me.avatar_url}
+              size="xs"
+            />
+          ),
         };
       }
 
@@ -44,7 +60,13 @@ export const useUserFilterMenu = ({
         return {
           label: firstUser.username,
           value: firstUser.username,
-          avatarUrl: firstUser.avatar_url,
+          startIcon: (
+            <UserAvatar
+              username={firstUser.username}
+              avatarURL={firstUser.avatar_url}
+              size="xs"
+            />
+          ),
         };
       }
       return null;
diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
index 25ba6a90861a2..3ece64c7c6bba 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.tsx
+++ b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -50,7 +50,7 @@ export const useTemplateFilterMenu = ({
         label:
           template.display_name !== "" ? template.display_name : template.name,
         value: template.name,
-        icon: template.icon,
+        startIcon: <TemplateAvatar size="xs" template={template} />,
       }));
     },
   });

From 08b0a82a3248b3c67bece7cd3e0b7b88a95c41d4 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 27 Jun 2024 13:23:26 +0000
Subject: [PATCH 06/15] Fix filter buttons size

---
 .../SelectFilter.stories.tsx                  |  0
 .../{SelectFilter => Filter}/SelectFilter.tsx | 16 +++++++--
 site/src/components/Filter/UserFilter.tsx     |  2 +-
 site/src/components/Filter/filter.tsx         |  6 ++--
 site/src/components/Filter/menu.ts            |  2 +-
 .../SelectMenu/SelectMenu.stories.tsx         | 34 +++++++++++++++++++
 site/src/components/SelectMenu/SelectMenu.tsx | 19 ++++++++++-
 site/src/pages/AuditPage/AuditFilter.tsx      |  2 +-
 site/src/pages/UsersPage/UsersFilter.tsx      |  2 +-
 .../src/pages/WorkspacesPage/filter/menus.tsx |  2 +-
 10 files changed, 74 insertions(+), 11 deletions(-)
 rename site/src/components/{SelectFilter => Filter}/SelectFilter.stories.tsx (100%)
 rename site/src/components/{SelectFilter => Filter}/SelectFilter.tsx (89%)

diff --git a/site/src/components/SelectFilter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
similarity index 100%
rename from site/src/components/SelectFilter/SelectFilter.stories.tsx
rename to site/src/components/Filter/SelectFilter.stories.tsx
diff --git a/site/src/components/SelectFilter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
similarity index 89%
rename from site/src/components/SelectFilter/SelectFilter.tsx
rename to site/src/components/Filter/SelectFilter.tsx
index 64171650f8db3..b0f5ac2097ba8 100644
--- a/site/src/components/SelectFilter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -11,6 +11,8 @@ import {
   SelectMenuIcon,
 } from "components/SelectMenu/SelectMenu";
 
+const BASE_WIDTH = 200;
+
 export type SelectFilterOption = {
   startIcon?: ReactNode;
   label: string;
@@ -46,11 +48,21 @@ export const SelectFilter: FC<SelectFilterProps> = ({
   return (
     <SelectMenu open={open} onOpenChange={setOpen}>
       <SelectMenuTrigger>
-        <SelectMenuButton startIcon={selectedOption?.startIcon}>
+        <SelectMenuButton
+          startIcon={selectedOption?.startIcon}
+          css={{ width: BASE_WIDTH }}
+        >
           {selectedOption?.label ?? placeholder}
         </SelectMenuButton>
       </SelectMenuTrigger>
-      <SelectMenuContent>
+      <SelectMenuContent
+        horizontal="right"
+        css={{
+          "& .MuiPaper-root": {
+            minWidth: BASE_WIDTH,
+          },
+        }}
+      >
         {onSearchChange && (
           <SelectMenuSearch
             value={search}
diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
index a943cc81ef0db..d4f3dc5b5725e 100644
--- a/site/src/components/Filter/UserFilter.tsx
+++ b/site/src/components/Filter/UserFilter.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { API } from "api/api";
-import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import type { SelectFilterOption } from "components/Filter/SelectFilter";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
 import { FilterMenu } from "./filter";
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
index c8446eec55639..b8ab5e23da241 100644
--- a/site/src/components/Filter/filter.tsx
+++ b/site/src/components/Filter/filter.tsx
@@ -13,12 +13,12 @@ import {
   hasError,
   isApiValidationError,
 } from "api/errors";
-import { InputGroup } from "components/InputGroup/InputGroup";
-import { SearchField } from "components/SearchField/SearchField";
 import {
   SelectFilter,
   type SelectFilterProps,
-} from "components/SelectFilter/SelectFilter";
+} from "components/Filter/SelectFilter";
+import { InputGroup } from "components/InputGroup/InputGroup";
+import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
 
 export type PresetFilter = {
diff --git a/site/src/components/Filter/menu.ts b/site/src/components/Filter/menu.ts
index d011ada4f0d3e..3075fb6075fa6 100644
--- a/site/src/components/Filter/menu.ts
+++ b/site/src/components/Filter/menu.ts
@@ -1,6 +1,6 @@
 import { useMemo, useRef, useState } from "react";
 import { useQuery } from "react-query";
-import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import type { SelectFilterOption } from "components/Filter/SelectFilter";
 
 export type UseFilterMenuOptions<TOption extends SelectFilterOption> = {
   id: string;
diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx
index 26a3c4c434b52..3edcbc764d551 100644
--- a/site/src/components/SelectMenu/SelectMenu.stories.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.stories.tsx
@@ -64,3 +64,37 @@ export const Open: Story = {
     await userEvent.click(button);
   },
 };
+
+export const LongButtonText: Story = {
+  render: function SelectMenuRender() {
+    const longOption = "Very long text that should be truncated";
+    const opts = [...options(50), longOption];
+    const selectedOpt = longOption;
+
+    return (
+      <SelectMenu>
+        <SelectMenuTrigger>
+          <SelectMenuButton
+            css={{ width: 200 }}
+            startIcon={<UserAvatar size="xs" username={selectedOpt} />}
+          >
+            {selectedOpt}
+          </SelectMenuButton>
+        </SelectMenuTrigger>
+        <SelectMenuContent>
+          <SelectMenuSearch onChange={() => {}} />
+          <SelectMenuList>
+            {opts.map((o) => (
+              <SelectMenuItem key={o} selected={o === selectedOpt}>
+                <SelectMenuIcon>
+                  <UserAvatar size="xs" username={o} />
+                </SelectMenuIcon>
+                {o}
+              </SelectMenuItem>
+            ))}
+          </SelectMenuList>
+        </SelectMenuContent>
+      </SelectMenu>
+    );
+  },
+};
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index 9dd3c3b4b9c84..707ab381e9451 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -33,16 +33,33 @@ export const SelectMenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Button
         css={{
+          // Icon and text should be aligned to the left
+          justifyContent: "flex-start",
           flexShrink: 0,
           "& .MuiButton-startIcon": {
             marginLeft: 0,
             marginRight: SIDE_PADDING,
           },
+          // Dropdown arrow should be at the end of the button
+          "& .MuiButton-endIcon": {
+            marginLeft: "auto",
+          },
         }}
         endIcon={<DropdownArrow />}
         ref={ref}
         {...props}
-      />
+      >
+        <span
+          // Make sure long text does not break the button layout
+          css={{
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {props.children}
+        </span>
+      </Button>
     );
   },
 );
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
index 41b1eecb9baca..0ffd5a204b311 100644
--- a/site/src/pages/AuditPage/AuditFilter.tsx
+++ b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -13,7 +13,7 @@ import {
   type UseFilterMenuOptions,
 } from "components/Filter/menu";
 import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
-import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import type { SelectFilterOption } from "components/Filter/SelectFilter";
 import { docs } from "utils/docs";
 
 const PRESET_FILTERS = [
diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
index d8a933d2378a2..b9f9490d16b7b 100644
--- a/site/src/pages/UsersPage/UsersFilter.tsx
+++ b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -10,7 +10,7 @@ import {
   type UseFilterMenuOptions,
   useFilterMenu,
 } from "components/Filter/menu";
-import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import type { SelectFilterOption } from "components/Filter/SelectFilter";
 import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
 import { docs } from "utils/docs";
 
diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
index 3ece64c7c6bba..3c97c3559c6ef 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.tsx
+++ b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -5,7 +5,7 @@ import {
   useFilterMenu,
   type UseFilterMenuOptions,
 } from "components/Filter/menu";
-import type { SelectFilterOption } from "components/SelectFilter/SelectFilter";
+import type { SelectFilterOption } from "components/Filter/SelectFilter";
 import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
 import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar";
 import { getDisplayWorkspaceStatus } from "utils/workspace";

From c7e15ec024068368f3c2fe265739a21b064f201b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 27 Jun 2024 13:31:09 +0000
Subject: [PATCH 07/15] Improve accessibility and searching

---
 .../Filter/SelectFilter.stories.tsx           |  2 +-
 site/src/components/Filter/SelectFilter.tsx   | 21 +++++++++++++------
 site/src/components/Filter/UserFilter.tsx     |  6 +++++-
 site/src/pages/AuditPage/AuditFilter.tsx      |  8 ++++---
 site/src/pages/UsersPage/UsersFilter.tsx      |  1 +
 .../src/pages/WorkspacesPage/filter/menus.tsx |  7 +++++--
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
index 6d8fd5ed0e873..e755a1efe04be 100644
--- a/site/src/components/Filter/SelectFilter.stories.tsx
+++ b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -104,7 +104,7 @@ export const UnselectingOption: Story = {
 export const SearchingOption: Story = {
   args: {
     searchPlaceholder: "Search options...",
-    searchAriaLabel: "Search options",
+    searchLabel: "Search options",
   },
   render: function SelectFilterWithSearch(args) {
     const [selectedOption, setSelectedOption] = useState<
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index b0f5ac2097ba8..9abf96632e250 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -1,3 +1,4 @@
+import visuallyHidden from "@mui/utils/visuallyHidden";
 import { useState, type FC, type ReactNode } from "react";
 import { Loader } from "components/Loader/Loader";
 import {
@@ -21,24 +22,31 @@ export type SelectFilterOption = {
 
 export type SelectFilterProps = {
   options: SelectFilterOption[] | undefined;
-  onSelect: (option: SelectFilterOption | undefined) => void;
   selectedOption?: SelectFilterOption;
+  // Used to add a accessibility label to the select
+  label: string;
+  // Used when there is no option selected
   placeholder: string;
+  // Used to customize the empty state message
   emptyText?: string;
-  // Search props
+  onSelect: (option: SelectFilterOption | undefined) => void;
+  // Value of the search input
   search?: string;
-  onSearchChange?: (search: string) => void;
+  // Used to customize the search input placeholder
   searchPlaceholder?: string;
-  searchAriaLabel?: string;
+  // Used to add a accessibility label to the search input
+  searchLabel?: string;
+  onSearchChange?: (search: string) => void;
 };
 
 export const SelectFilter: FC<SelectFilterProps> = ({
+  label,
   options,
   selectedOption,
   onSelect,
   onSearchChange,
   placeholder,
-  searchAriaLabel,
+  searchLabel,
   searchPlaceholder,
   emptyText,
   search,
@@ -53,6 +61,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
           css={{ width: BASE_WIDTH }}
         >
           {selectedOption?.label ?? placeholder}
+          <span css={{ ...visuallyHidden }}>{label}</span>
         </SelectMenuButton>
       </SelectMenuTrigger>
       <SelectMenuContent
@@ -68,7 +77,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
             value={search}
             onChange={onSearchChange}
             placeholder={searchPlaceholder}
-            inputProps={{ "aria-label": searchAriaLabel }}
+            inputProps={{ "aria-label": searchLabel }}
           />
         )}
         {options ? (
diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
index d4f3dc5b5725e..467d33db1a6fe 100644
--- a/site/src/components/Filter/UserFilter.tsx
+++ b/site/src/components/Filter/UserFilter.tsx
@@ -99,9 +99,13 @@ interface UserMenuProps {
 export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
   return (
     <FilterMenu
+      label="Select user"
+      placeholder="All users"
+      emptyText="No users found"
+      searchLabel="Search user"
+      searchPlaceholder="Search user..."
       options={menu.searchOptions}
       onSelect={menu.selectOption}
-      placeholder="All users"
       selectedOption={menu.selectedOption ?? undefined}
       search={menu.query}
       onSearchChange={menu.setQuery}
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
index 0ffd5a204b311..c5288cde87eb7 100644
--- a/site/src/pages/AuditPage/AuditFilter.tsx
+++ b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -12,8 +12,8 @@ import {
   useFilterMenu,
   type UseFilterMenuOptions,
 } from "components/Filter/menu";
-import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
 import type { SelectFilterOption } from "components/Filter/SelectFilter";
+import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
 import { docs } from "utils/docs";
 
 const PRESET_FILTERS = [
@@ -93,9 +93,10 @@ export type ActionFilterMenu = ReturnType<typeof useActionFilterMenu>;
 const ActionMenu = (menu: ActionFilterMenu) => {
   return (
     <FilterMenu
+      label="Select an action"
+      placeholder="All actions"
       options={menu.searchOptions}
       onSelect={menu.selectOption}
-      placeholder="All actions"
       selectedOption={menu.selectedOption ?? undefined}
     />
   );
@@ -146,9 +147,10 @@ export type ResourceTypeFilterMenu = ReturnType<
 const ResourceTypeMenu = (menu: ResourceTypeFilterMenu) => {
   return (
     <FilterMenu
+      label="Select a resource type"
+      placeholder="All resource types"
       options={menu.searchOptions}
       onSelect={menu.selectOption}
-      placeholder="All resource types"
       selectedOption={menu.selectedOption ?? undefined}
     />
   );
diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
index b9f9490d16b7b..d02473749f155 100644
--- a/site/src/pages/UsersPage/UsersFilter.tsx
+++ b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -89,6 +89,7 @@ export const UsersFilter: FC<UsersFilterProps> = ({ filter, error, menus }) => {
 const StatusMenu = (menu: StatusFilterMenu) => {
   return (
     <FilterMenu
+      label="Select a status"
       placeholder="All statuses"
       options={menu.searchOptions}
       onSelect={menu.selectOption}
diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
index 3c97c3559c6ef..c897811ee07eb 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.tsx
+++ b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -61,11 +61,13 @@ export type TemplateFilterMenu = ReturnType<typeof useTemplateFilterMenu>;
 export const TemplateMenu = (menu: TemplateFilterMenu) => {
   return (
     <FilterMenu
+      label="Select a template"
+      emptyText="No templates found"
       placeholder="All templates"
+      searchLabel="Search template"
+      searchPlaceholder="Search template..."
       options={menu.searchOptions}
       onSelect={menu.selectOption}
-      searchAriaLabel="Search template"
-      searchPlaceholder="Search template..."
       selectedOption={menu.selectedOption ?? undefined}
       search={menu.query}
       onSearchChange={menu.setQuery}
@@ -109,6 +111,7 @@ export const StatusMenu = (menu: StatusFilterMenu) => {
   return (
     <FilterMenu
       placeholder="All statuses"
+      label="Select a status"
       options={menu.searchOptions}
       selectedOption={menu.selectedOption ?? undefined}
       onSelect={menu.selectOption}

From 2e5880f12894ff7cd1a26b3fdcb23e3e3bcb159d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 27 Jun 2024 13:55:46 +0000
Subject: [PATCH 08/15] Fix width of popover and move search to has its own
 component

---
 .../Filter/SelectFilter.stories.tsx           | 30 ++++++++++++-------
 site/src/components/Filter/SelectFilter.tsx   | 28 +++++++----------
 site/src/components/Filter/UserFilter.tsx     | 21 ++++++++-----
 site/src/components/Filter/filter.tsx         |  8 -----
 site/src/pages/AuditPage/AuditFilter.tsx      | 10 ++++---
 site/src/pages/UsersPage/UsersFilter.tsx      |  8 +++--
 .../src/pages/WorkspacesPage/filter/menus.tsx | 23 +++++++++-----
 7 files changed, 70 insertions(+), 58 deletions(-)

diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
index e755a1efe04be..617de0eb8ea81 100644
--- a/site/src/components/Filter/SelectFilter.stories.tsx
+++ b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -4,7 +4,11 @@ import { userEvent, within, expect } from "@storybook/test";
 import { useState } from "react";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { withDesktopViewport } from "testHelpers/storybook";
-import { SelectFilter, type SelectFilterOption } from "./SelectFilter";
+import {
+  SelectFilter,
+  SelectFilterSearch,
+  type SelectFilterOption,
+} from "./SelectFilter";
 
 const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
   startIcon: <UserAvatar username={`username ${i}`} size="xs" />,
@@ -57,9 +61,13 @@ export const Selected: Story = {
 export const WithSearch: Story = {
   args: {
     selectedOption: options[25],
-    search: "",
-    onSearchChange: action("onSearch"),
-    searchPlaceholder: "Search options...",
+    search: (
+      <SelectFilterSearch
+        value=""
+        onChange={action("onSearch")}
+        placeholder="Search options..."
+      />
+    ),
   },
 };
 
@@ -102,10 +110,6 @@ export const UnselectingOption: Story = {
 };
 
 export const SearchingOption: Story = {
-  args: {
-    searchPlaceholder: "Search options...",
-    searchLabel: "Search options",
-  },
   render: function SelectFilterWithSearch(args) {
     const [selectedOption, setSelectedOption] = useState<
       SelectFilterOption | undefined
@@ -118,11 +122,17 @@ export const SearchingOption: Story = {
     return (
       <SelectFilter
         {...args}
-        search={search}
-        onSearchChange={setSearch}
         selectedOption={selectedOption}
         onSelect={setSelectedOption}
         options={visibleOptions}
+        search={
+          <SelectFilterSearch
+            value={search}
+            onChange={setSearch}
+            placeholder="Search options..."
+            inputProps={{ "aria-label": "Search options" }}
+          />
+        }
       />
     );
   },
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index 9abf96632e250..61f99b5af8810 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -13,6 +13,7 @@ import {
 } from "components/SelectMenu/SelectMenu";
 
 const BASE_WIDTH = 200;
+const POPOVER_WIDTH = 320;
 
 export type SelectFilterOption = {
   startIcon?: ReactNode;
@@ -30,13 +31,8 @@ export type SelectFilterProps = {
   // Used to customize the empty state message
   emptyText?: string;
   onSelect: (option: SelectFilterOption | undefined) => void;
-  // Value of the search input
-  search?: string;
-  // Used to customize the search input placeholder
-  searchPlaceholder?: string;
-  // Used to add a accessibility label to the search input
-  searchLabel?: string;
-  onSearchChange?: (search: string) => void;
+  // SelectFilterSearch element
+  search?: ReactNode;
 };
 
 export const SelectFilter: FC<SelectFilterProps> = ({
@@ -44,10 +40,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
   options,
   selectedOption,
   onSelect,
-  onSearchChange,
   placeholder,
-  searchLabel,
-  searchPlaceholder,
   emptyText,
   search,
 }) => {
@@ -68,18 +61,15 @@ export const SelectFilter: FC<SelectFilterProps> = ({
         horizontal="right"
         css={{
           "& .MuiPaper-root": {
+            // When including search, we aim for the width to be as wide as
+            // possible.
+            width: search ? "100%" : undefined,
+            maxWidth: POPOVER_WIDTH,
             minWidth: BASE_WIDTH,
           },
         }}
       >
-        {onSearchChange && (
-          <SelectMenuSearch
-            value={search}
-            onChange={onSearchChange}
-            placeholder={searchPlaceholder}
-            inputProps={{ "aria-label": searchLabel }}
-          />
-        )}
+        {search}
         {options ? (
           options.length > 0 ? (
             <SelectMenuList>
@@ -123,3 +113,5 @@ export const SelectFilter: FC<SelectFilterProps> = ({
     </SelectMenu>
   );
 };
+
+export const SelectFilterSearch = SelectMenuSearch;
diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
index 467d33db1a6fe..6677a83062bcd 100644
--- a/site/src/components/Filter/UserFilter.tsx
+++ b/site/src/components/Filter/UserFilter.tsx
@@ -1,9 +1,12 @@
 import type { FC } from "react";
 import { API } from "api/api";
-import type { SelectFilterOption } from "components/Filter/SelectFilter";
+import {
+  SelectFilter,
+  SelectFilterSearch,
+  type SelectFilterOption,
+} from "components/Filter/SelectFilter";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
-import { FilterMenu } from "./filter";
 import { type UseFilterMenuOptions, useFilterMenu } from "./menu";
 
 export const useUserFilterMenu = ({
@@ -98,17 +101,21 @@ interface UserMenuProps {
 
 export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
   return (
-    <FilterMenu
+    <SelectFilter
       label="Select user"
       placeholder="All users"
       emptyText="No users found"
-      searchLabel="Search user"
-      searchPlaceholder="Search user..."
       options={menu.searchOptions}
       onSelect={menu.selectOption}
       selectedOption={menu.selectedOption ?? undefined}
-      search={menu.query}
-      onSearchChange={menu.setQuery}
+      search={
+        <SelectFilterSearch
+          inputProps={{ "aria-label": "Search user" }}
+          placeholder="Search user..."
+          value={menu.query}
+          onChange={menu.setQuery}
+        />
+      }
     />
   );
 };
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
index b8ab5e23da241..b26ce444a805f 100644
--- a/site/src/components/Filter/filter.tsx
+++ b/site/src/components/Filter/filter.tsx
@@ -13,10 +13,6 @@ import {
   hasError,
   isApiValidationError,
 } from "api/errors";
-import {
-  SelectFilter,
-  type SelectFilterProps,
-} from "components/Filter/SelectFilter";
 import { InputGroup } from "components/InputGroup/InputGroup";
 import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
@@ -325,7 +321,3 @@ const PresetMenu: FC<PresetMenuProps> = ({
     </>
   );
 };
-
-export const FilterMenu: FC<SelectFilterProps> = (props) => {
-  return <SelectFilter {...props} />;
-};
diff --git a/site/src/pages/AuditPage/AuditFilter.tsx b/site/src/pages/AuditPage/AuditFilter.tsx
index c5288cde87eb7..0127637a4b69d 100644
--- a/site/src/pages/AuditPage/AuditFilter.tsx
+++ b/site/src/pages/AuditPage/AuditFilter.tsx
@@ -3,7 +3,6 @@ import type { FC } from "react";
 import { AuditActions, ResourceTypes } from "api/typesGenerated";
 import {
   Filter,
-  FilterMenu,
   MenuSkeleton,
   SearchFieldSkeleton,
   type useFilter,
@@ -12,7 +11,10 @@ import {
   useFilterMenu,
   type UseFilterMenuOptions,
 } from "components/Filter/menu";
-import type { SelectFilterOption } from "components/Filter/SelectFilter";
+import {
+  SelectFilter,
+  type SelectFilterOption,
+} from "components/Filter/SelectFilter";
 import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
 import { docs } from "utils/docs";
 
@@ -92,7 +94,7 @@ export type ActionFilterMenu = ReturnType<typeof useActionFilterMenu>;
 
 const ActionMenu = (menu: ActionFilterMenu) => {
   return (
-    <FilterMenu
+    <SelectFilter
       label="Select an action"
       placeholder="All actions"
       options={menu.searchOptions}
@@ -146,7 +148,7 @@ export type ResourceTypeFilterMenu = ReturnType<
 
 const ResourceTypeMenu = (menu: ResourceTypeFilterMenu) => {
   return (
-    <FilterMenu
+    <SelectFilter
       label="Select a resource type"
       placeholder="All resource types"
       options={menu.searchOptions}
diff --git a/site/src/pages/UsersPage/UsersFilter.tsx b/site/src/pages/UsersPage/UsersFilter.tsx
index d02473749f155..fdfc2144f5b59 100644
--- a/site/src/pages/UsersPage/UsersFilter.tsx
+++ b/site/src/pages/UsersPage/UsersFilter.tsx
@@ -1,7 +1,6 @@
 import type { FC } from "react";
 import {
   Filter,
-  FilterMenu,
   MenuSkeleton,
   SearchFieldSkeleton,
   type useFilter,
@@ -10,7 +9,10 @@ import {
   type UseFilterMenuOptions,
   useFilterMenu,
 } from "components/Filter/menu";
-import type { SelectFilterOption } from "components/Filter/SelectFilter";
+import {
+  SelectFilter,
+  type SelectFilterOption,
+} from "components/Filter/SelectFilter";
 import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
 import { docs } from "utils/docs";
 
@@ -88,7 +90,7 @@ export const UsersFilter: FC<UsersFilterProps> = ({ filter, error, menus }) => {
 
 const StatusMenu = (menu: StatusFilterMenu) => {
   return (
-    <FilterMenu
+    <SelectFilter
       label="Select a status"
       placeholder="All statuses"
       options={menu.searchOptions}
diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
index c897811ee07eb..91e4e20163429 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.tsx
+++ b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -1,11 +1,14 @@
 import { API } from "api/api";
 import type { WorkspaceStatus } from "api/typesGenerated";
-import { FilterMenu } from "components/Filter/filter";
 import {
   useFilterMenu,
   type UseFilterMenuOptions,
 } from "components/Filter/menu";
-import type { SelectFilterOption } from "components/Filter/SelectFilter";
+import {
+  SelectFilter,
+  SelectFilterSearch,
+  type SelectFilterOption,
+} from "components/Filter/SelectFilter";
 import { StatusIndicator } from "components/StatusIndicator/StatusIndicator";
 import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar";
 import { getDisplayWorkspaceStatus } from "utils/workspace";
@@ -60,17 +63,21 @@ export type TemplateFilterMenu = ReturnType<typeof useTemplateFilterMenu>;
 
 export const TemplateMenu = (menu: TemplateFilterMenu) => {
   return (
-    <FilterMenu
+    <SelectFilter
       label="Select a template"
       emptyText="No templates found"
       placeholder="All templates"
-      searchLabel="Search template"
-      searchPlaceholder="Search template..."
       options={menu.searchOptions}
       onSelect={menu.selectOption}
       selectedOption={menu.selectedOption ?? undefined}
-      search={menu.query}
-      onSearchChange={menu.setQuery}
+      search={
+        <SelectFilterSearch
+          inputProps={{ "aria-label": "Search template" }}
+          placeholder="Search template..."
+          value={menu.query}
+          onChange={menu.setQuery}
+        />
+      }
     />
   );
 };
@@ -109,7 +116,7 @@ export type StatusFilterMenu = ReturnType<typeof useStatusFilterMenu>;
 
 export const StatusMenu = (menu: StatusFilterMenu) => {
   return (
-    <FilterMenu
+    <SelectFilter
       placeholder="All statuses"
       label="Select a status"
       options={menu.searchOptions}

From 3fae8d4cb6d95cec2635fa34b163c87be4bb7b45 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 28 Jun 2024 10:44:10 -0300
Subject: [PATCH 09/15] Update site/src/components/Filter/UserFilter.tsx

Co-authored-by: Michael Smith <throwawayclover@gmail.com>
---
 site/src/components/Filter/UserFilter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
index 6677a83062bcd..5b2af028d6520 100644
--- a/site/src/components/Filter/UserFilter.tsx
+++ b/site/src/components/Filter/UserFilter.tsx
@@ -76,7 +76,7 @@ export const useUserFilterMenu = ({
     },
     getOptions: async (query) => {
       const usersRes = await API.getUsers({ q: query, limit: 25 });
-      let options: SelectFilterOption[] = usersRes.users.map((user) => ({
+      let options = usersRes.users.map<SelectFilterOption>((user) => ({
         label: user.username,
         value: user.username,
         startIcon: (

From 06ae934adb8f581fce56ab01cad7f2ef7ea0bd06 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 28 Jun 2024 18:13:55 +0000
Subject: [PATCH 10/15] Remove important style

---
 site/src/components/Avatar/Avatar.tsx         | 6 ++----
 site/src/components/SelectMenu/SelectMenu.tsx | 5 +++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index ad9f1e6d7f4bb..b27d1a64798cc 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -18,15 +18,13 @@ const sizeStyles = {
   xs: {
     width: 16,
     height: 16,
-    // Should never be overrided
-    fontSize: "8px !important",
+    fontSize: 8,
     fontWeight: 700,
   },
   sm: {
     width: 24,
     height: 24,
-    // Should never be overrided
-    fontSize: "12px !important",
+    fontSize: 12,
     fontWeight: 600,
   },
   md: {},
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index 707ab381e9451..039966a44a9fc 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -48,6 +48,11 @@ export const SelectMenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
         endIcon={<DropdownArrow />}
         ref={ref}
         {...props}
+        // MUI applies a style that affects the sizes of start icons.
+        // .MuiButton-startIcon > *:nth-of-type(1) { font-size: 20px }. To
+        // prevent this from breaking the inner components of startIcon, we wrap
+        // it in a div.
+        startIcon={props.startIcon && <div>{props.startIcon}</div>}
       >
         <span
           // Make sure long text does not break the button layout

From 0d83bc8772ad743c577fdd84d38c76d1608786f5 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 28 Jun 2024 18:45:33 +0000
Subject: [PATCH 11/15] Apply review comments

---
 site/src/components/Avatar/Avatar.tsx         |  3 +-
 site/src/components/Filter/SelectFilter.tsx   | 17 ++++----
 .../SelectMenu/SelectMenu.stories.tsx         | 32 +++++++++++++++
 site/src/components/SelectMenu/SelectMenu.tsx | 39 ++++++++++++-------
 4 files changed, 65 insertions(+), 26 deletions(-)

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
index b27d1a64798cc..5c4e46f6d863d 100644
--- a/site/src/components/Avatar/Avatar.tsx
+++ b/site/src/components/Avatar/Avatar.tsx
@@ -31,8 +31,7 @@ const sizeStyles = {
   xl: {
     width: 48,
     height: 48,
-    // Should never be overrided
-    fontSize: "24px !important",
+    fontSize: 24,
   },
 } satisfies Record<string, Interpolation<Theme>>;
 
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index 61f99b5af8810..7521affc7efb6 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -1,4 +1,3 @@
-import visuallyHidden from "@mui/utils/visuallyHidden";
 import { useState, type FC, type ReactNode } from "react";
 import { Loader } from "components/Loader/Loader";
 import {
@@ -32,7 +31,7 @@ export type SelectFilterProps = {
   emptyText?: string;
   onSelect: (option: SelectFilterOption | undefined) => void;
   // SelectFilterSearch element
-  search?: ReactNode;
+  selectFilterSearch?: ReactNode;
 };
 
 export const SelectFilter: FC<SelectFilterProps> = ({
@@ -42,7 +41,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
   onSelect,
   placeholder,
   emptyText,
-  search,
+  selectFilterSearch,
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -52,24 +51,24 @@ export const SelectFilter: FC<SelectFilterProps> = ({
         <SelectMenuButton
           startIcon={selectedOption?.startIcon}
           css={{ width: BASE_WIDTH }}
+          aria-label={label}
         >
           {selectedOption?.label ?? placeholder}
-          <span css={{ ...visuallyHidden }}>{label}</span>
         </SelectMenuButton>
       </SelectMenuTrigger>
       <SelectMenuContent
         horizontal="right"
         css={{
           "& .MuiPaper-root": {
-            // When including search, we aim for the width to be as wide as
-            // possible.
-            width: search ? "100%" : undefined,
+            // When including selectFilterSearch, we aim for the width to be as
+            // wide as possible.
+            width: selectFilterSearch ? "100%" : undefined,
             maxWidth: POPOVER_WIDTH,
             minWidth: BASE_WIDTH,
           },
         }}
       >
-        {search}
+        {selectFilterSearch}
         {options ? (
           options.length > 0 ? (
             <SelectMenuList>
@@ -103,7 +102,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
                 lineHeight: 1,
               })}
             >
-              {emptyText ?? "No options found"}
+              {emptyText || "No options found"}
             </div>
           )
         ) : (
diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx
index 3edcbc764d551..f47244504bb49 100644
--- a/site/src/components/SelectMenu/SelectMenu.stories.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.stories.tsx
@@ -98,3 +98,35 @@ export const LongButtonText: Story = {
     );
   },
 };
+
+export const NoSelectedOption: Story = {
+  render: function SelectMenuRender() {
+    const opts = options(50);
+
+    return (
+      <SelectMenu>
+        <SelectMenuTrigger>
+          <SelectMenuButton css={{ width: 200 }}>All users</SelectMenuButton>
+        </SelectMenuTrigger>
+        <SelectMenuContent>
+          <SelectMenuSearch onChange={() => {}} />
+          <SelectMenuList>
+            {opts.map((o) => (
+              <SelectMenuItem key={o}>
+                <SelectMenuIcon>
+                  <UserAvatar size="xs" username={o} />
+                </SelectMenuIcon>
+                {o}
+              </SelectMenuItem>
+            ))}
+          </SelectMenuList>
+        </SelectMenuContent>
+      </SelectMenu>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+  },
+};
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index 039966a44a9fc..06c176c192b10 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -8,6 +8,8 @@ import {
   Children,
   isValidElement,
   type HTMLProps,
+  type ReactElement,
+  useMemo,
 } from "react";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import {
@@ -75,14 +77,13 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
       fullWidth
       size="medium"
       css={(theme) => ({
+        borderBottom: `1px solid ${theme.palette.divider}`,
         "& input": {
           fontSize: 14,
         },
-
         "& fieldset": {
           border: 0,
           borderRadius: 0,
-          borderBottom: `1px solid ${theme.palette.divider} !important`,
         },
         "& .MuiInputBase-root": {
           padding: `12px ${SIDE_PADDING}px`,
@@ -97,20 +98,16 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
 };
 
 export const SelectMenuList: FC<MenuListProps> = (props) => {
-  const items = Children.toArray(props.children);
-  type ItemType = (typeof items)[number];
-  const selectedAsFirst = (a: ItemType, b: ItemType) => {
-    if (
-      !isValidElement<MenuItemProps>(a) ||
-      !isValidElement<MenuItemProps>(b)
-    ) {
-      throw new Error(
-        "SelectMenuList children must be SelectMenuItem components",
-      );
+  const items = useMemo(() => {
+    let children = Children.toArray(props.children);
+    if (!children.every(isValidElement)) {
+      throw new Error("SelectMenuList only accepts MenuItem children");
     }
-    return a.props.selected ? -1 : 0;
-  };
-  items.sort(selectedAsFirst);
+    children = moveSelectedElementToFirst(
+      children as ReactElement<MenuItemProps>[],
+    );
+    return children;
+  }, [props.children]);
   return (
     <MenuList css={{ maxHeight: 480 }} {...props}>
       {items}
@@ -118,6 +115,18 @@ export const SelectMenuList: FC<MenuListProps> = (props) => {
   );
 };
 
+function moveSelectedElementToFirst(items: ReactElement<MenuItemProps>[]) {
+  const selectedElement = items.find((i) => i.props.selected);
+  if (!selectedElement) {
+    return items;
+  }
+  const selectedElementIndex = items.indexOf(selectedElement);
+  const newItems = items.slice();
+  newItems.splice(selectedElementIndex, 1);
+  newItems.unshift(selectedElement);
+  return newItems;
+}
+
 export const SelectMenuIcon: FC<HTMLProps<HTMLDivElement>> = (props) => {
   return <div css={{ marginRight: 16 }} {...props} />;
 };

From 928209cf96f7147615765dbb7e4340bea9901df5 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 28 Jun 2024 18:48:01 +0000
Subject: [PATCH 12/15] Add auto focus to search

---
 site/src/components/SelectMenu/SelectMenu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index 06c176c192b10..39837720d0023 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -93,6 +93,7 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
         },
       })}
       {...props}
+      inputProps={{ autoFocus: true, ...props.inputProps }}
     />
   );
 };

From d344d9c21b6818ef99a3aea633abbbaa872dc6c2 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 1 Jul 2024 13:26:53 +0000
Subject: [PATCH 13/15] Fix types

---
 site/src/components/Filter/SelectFilter.stories.tsx | 4 ++--
 site/src/components/Filter/UserFilter.tsx           | 2 +-
 site/src/pages/WorkspacesPage/filter/menus.tsx      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
index 617de0eb8ea81..167983e691482 100644
--- a/site/src/components/Filter/SelectFilter.stories.tsx
+++ b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -61,7 +61,7 @@ export const Selected: Story = {
 export const WithSearch: Story = {
   args: {
     selectedOption: options[25],
-    search: (
+    selectFilterSearch: (
       <SelectFilterSearch
         value=""
         onChange={action("onSearch")}
@@ -125,7 +125,7 @@ export const SearchingOption: Story = {
         selectedOption={selectedOption}
         onSelect={setSelectedOption}
         options={visibleOptions}
-        search={
+        selectFilterSearch={
           <SelectFilterSearch
             value={search}
             onChange={setSearch}
diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
index 5b2af028d6520..2a69717cb8eaa 100644
--- a/site/src/components/Filter/UserFilter.tsx
+++ b/site/src/components/Filter/UserFilter.tsx
@@ -108,7 +108,7 @@ export const UserMenu: FC<UserMenuProps> = ({ menu }) => {
       options={menu.searchOptions}
       onSelect={menu.selectOption}
       selectedOption={menu.selectedOption ?? undefined}
-      search={
+      selectFilterSearch={
         <SelectFilterSearch
           inputProps={{ "aria-label": "Search user" }}
           placeholder="Search user..."
diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
index 91e4e20163429..699b31f6c0f81 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.tsx
+++ b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -70,7 +70,7 @@ export const TemplateMenu = (menu: TemplateFilterMenu) => {
       options={menu.searchOptions}
       onSelect={menu.selectOption}
       selectedOption={menu.selectedOption ?? undefined}
-      search={
+      selectFilterSearch={
         <SelectFilterSearch
           inputProps={{ "aria-label": "Search template" }}
           placeholder="Search template..."

From ebcbaa5125016db9976ea05661e271bc54b7fdbc Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 2 Jul 2024 16:00:09 +0000
Subject: [PATCH 14/15] Apply PR suggestions

---
 site/src/components/Filter/SelectFilter.stories.tsx   | 2 +-
 site/src/components/SelectMenu/SelectMenu.stories.tsx | 3 ++-
 site/src/pages/WorkspacesPage/filter/menus.tsx        | 5 +----
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
index 167983e691482..d545625a23974 100644
--- a/site/src/components/Filter/SelectFilter.stories.tsx
+++ b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -11,7 +11,7 @@ import {
 } from "./SelectFilter";
 
 const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
-  startIcon: <UserAvatar username={`username ${i}`} size="xs" />,
+  startIcon: <UserAvatar username={`username ${i + 1}`} size="xs" />,
   label: `Option ${i + 1}`,
   value: `option-${i + 1}`,
 }));
diff --git a/site/src/components/SelectMenu/SelectMenu.stories.tsx b/site/src/components/SelectMenu/SelectMenu.stories.tsx
index f47244504bb49..86b33ae817969 100644
--- a/site/src/components/SelectMenu/SelectMenu.stories.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.stories.tsx
@@ -1,3 +1,4 @@
+import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
@@ -109,7 +110,7 @@ export const NoSelectedOption: Story = {
           <SelectMenuButton css={{ width: 200 }}>All users</SelectMenuButton>
         </SelectMenuTrigger>
         <SelectMenuContent>
-          <SelectMenuSearch onChange={() => {}} />
+          <SelectMenuSearch onChange={action("search")} />
           <SelectMenuList>
             {opts.map((o) => (
               <SelectMenuItem key={o}>
diff --git a/site/src/pages/WorkspacesPage/filter/menus.tsx b/site/src/pages/WorkspacesPage/filter/menus.tsx
index 699b31f6c0f81..0316f158e87c9 100644
--- a/site/src/pages/WorkspacesPage/filter/menus.tsx
+++ b/site/src/pages/WorkspacesPage/filter/menus.tsx
@@ -31,10 +31,7 @@ export const useTemplateFilterMenu = ({
       const template = templates.find((template) => template.name === value);
       if (template) {
         return {
-          label:
-            template.display_name !== ""
-              ? template.display_name
-              : template.name,
+          label: template.display_name || template.name,
           value: template.name,
           startIcon: <TemplateAvatar size="xs" template={template} />,
         };

From 50a6ce478d2bf925a340ee6fc6f1110155796081 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 2 Jul 2024 16:02:47 +0000
Subject: [PATCH 15/15] Fix closed story

---
 site/src/components/Filter/SelectFilter.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
index d545625a23974..21d2afe288146 100644
--- a/site/src/components/Filter/SelectFilter.stories.tsx
+++ b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -47,7 +47,7 @@ export default meta;
 type Story = StoryObj<typeof SelectFilter>;
 
 export const Closed: Story = {
-  play: undefined,
+  play: () => {},
 };
 
 export const Open: Story = {};

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/13688.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/13688.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/13688.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/13688.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>