Jul 2, 2024 · Jun 25, 2024 · Jun 26, 2024 · Jun 26, 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
 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
 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;
Original file line number	Diff line number	Diff line change
		@@ -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");
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -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;