coder · BrunoQuaresma · Jul 2, 2024 · Jun 25, 2024 · Jun 26, 2024 · Jun 26, 2024
diff --git a/site/src/components/Filter/OptionItem.stories.tsx b/site/src/components/Filter/OptionItem.stories.tsx
diff --git a/site/src/components/Filter/SelectFilter.stories.tsx b/site/src/components/Filter/SelectFilter.stories.tsx
@@ -0,0 +1,146 @@
+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,
+  SelectFilterSearch,
+  type SelectFilterOption,
+} from "./SelectFilter";
+
+const options: SelectFilterOption[] = Array.from({ length: 50 }, (_, i) => ({
+  startIcon: <UserAvatar username={`username ${i + 1}`} 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: () => {},
+};
+
+export const Open: Story = {};
+
+export const Selected: Story = {
+  args: {
+    selectedOption: options[25],
+  },
+};
+
+export const WithSearch: Story = {
+  args: {
+    selectedOption: options[25],
+    selectFilterSearch: (
+      <SelectFilterSearch
+        value=""
+        onChange={action("onSearch")}
+        placeholder="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 = {
+  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}
+        selectedOption={selectedOption}
+        onSelect={setSelectedOption}
+        options={visibleOptions}
+        selectFilterSearch={
+          <SelectFilterSearch
+            value={search}
+            onChange={setSearch}
+            placeholder="Search options..."
+            inputProps={{ "aria-label": "Search options" }}
+          />
+        }
+      />
+    );
+  },
+  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/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
@@ -0,0 +1,116 @@
+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";
+
+const BASE_WIDTH = 200;
+const POPOVER_WIDTH = 320;
+
+export type SelectFilterOption = {
+  startIcon?: ReactNode;
+  label: string;
+  value: string;
+};
+
+export type SelectFilterProps = {
+  options: SelectFilterOption[] | undefined;
+  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;
+  onSelect: (option: SelectFilterOption | undefined) => void;
+  // SelectFilterSearch element
+  selectFilterSearch?: ReactNode;
+};
+
+export const SelectFilter: FC<SelectFilterProps> = ({
+  label,
+  options,
+  selectedOption,
+  onSelect,
+  placeholder,
+  emptyText,
+  selectFilterSearch,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <SelectMenu open={open} onOpenChange={setOpen}>
+      <SelectMenuTrigger>
+        <SelectMenuButton
+          startIcon={selectedOption?.startIcon}
+          css={{ width: BASE_WIDTH }}
+          aria-label={label}
+        >
+          {selectedOption?.label ?? placeholder}
+        </SelectMenuButton>
+      </SelectMenuTrigger>
+      <SelectMenuContent
+        horizontal="right"
+        css={{
+          "& .MuiPaper-root": {
+            // When including selectFilterSearch, we aim for the width to be as
+            // wide as possible.
+            width: selectFilterSearch ? "100%" : undefined,
+            maxWidth: POPOVER_WIDTH,
+            minWidth: BASE_WIDTH,
+          },
+        }}
+      >
+        {selectFilterSearch}
+        {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>
+  );
+};
+
+export const SelectFilterSearch = SelectMenuSearch;