Finish user menu

coder · BrunoQuaresma · May 15, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
commit c38cd7bd4acae52d5498bd8f8f024cd95ac124b5
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
@@ -81,6 +81,19 @@ export const usePopover = () => {
   return context;
 };
 
+export const withPopover =
+  <TProps extends object>(
+    Component: FC<TProps>,
+    popoverProps?: Omit<PopoverProps, "children">,
+  ): FC<TProps> =>
+  (props: TProps) => {
+    return (
+      <Popover {...popoverProps}>
+        <Component {...props} />
+      </Popover>
+    );
+  };
+
 export const PopoverTrigger = (
   props: HTMLAttributes<HTMLElement> & { children: TriggerElement },
 ) => {

diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.stories.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { useState } from "react";
+import { UserMenu } from "./UserMenu";
+
+const meta: Meta<typeof UserMenu> = {
+  title: "pages/WorkspacesPage/UserMenu",
+  component: UserMenu,
+  args: {
+    placeholder: "All users",
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["users", {}],
+        data: {
+          users: [
+            { id: "1", name: "Alice", username: "alice", avatar_url: "" },
+            { id: "2", name: "Bob", username: "bob", avatar_url: "" },
+            { id: "3", name: "Charlie", username: "charlie", avatar_url: "" },
+          ],
+        },
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UserMenu>;
+
+export const Close: Story = {};
+
+export const Open: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+  },
+};
+
+export const Default: Story = {
+  args: {
+    selected: "2",
+  },
+};
+
+export const SelectOption: Story = {
+  render: function UserMenuWithState(args) {
+    const [selected, setSelected] = useState<string | undefined>(undefined);
+    return <UserMenu {...args} selected={selected} onSelect={setSelected} />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select user/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("Charlie");
+    await userEvent.click(option);
+  },
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/UserMenu.tsx
@@ -1,16 +1,20 @@
-import { type Theme, useTheme } from "@emotion/react";
 import CheckOutlined from "@mui/icons-material/CheckOutlined";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import MenuList from "@mui/material/MenuList";
 import type { FC, ReactNode } from "react";
+import { useQuery } from "react-query";
+import { users } from "api/queries/users";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Loader } from "components/Loader/Loader";
 import {
-  Popover,
   PopoverContent,
   PopoverTrigger,
+  usePopover,
+  withPopover,
 } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
 
 type Option = {
   label: string;
@@ -48,46 +52,54 @@ type UserMenuProps = {
   onSelect: (value: string) => void;
 };
 
-export const UserMenu: FC<UserMenuProps> = (props) => {
+export const UserMenu = withPopover<UserMenuProps>((props) => {
+  const popover = usePopover();
   const { placeholder, selected, onSelect } = props;
-  const selectedOption = options.find((option) => option.value === selected);
+  const userOptionsQuery = useQuery({
+    ...users({}),
+    enabled: selected !== undefined || popover.isOpen,
+  });
+  const options = userOptionsQuery.data?.users.map((u) => ({
+    label: u.name ?? u.username,
+    value: u.id,
+    addon: <UserAvatar size="xs" username={u.username} src={u.avatar_url} />,
+  }));
+  const selectedOption = options?.find((option) => option.value === selected);
 
   return (
-    <Popover>
-      {({ setIsOpen }) => {
-        return (
-          <>
-            <PopoverTrigger>
-              <Button
-                aria-label="Select status"
-                endIcon={<DropdownArrow />}
-                startIcon={selectedOption?.addon}
+    <>
+      <PopoverTrigger>
+        <Button
+          aria-label="Select user"
+          endIcon={<DropdownArrow />}
+          startIcon={<span>{selectedOption?.addon}</span>}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        {options ? (
+          <MenuList dense>
+            {options.map((option) => (
+              <MenuItem
+                selected={option.value === selected}
+                key={option.value}
+                onClick={() => {
+                  popover.setIsOpen(false);
+                  onSelect(option.value);
+                }}
               >
-                {selectedOption ? selectedOption.label : placeholder}
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent>
-              <MenuList dense>
-                {options.map((option) => (
-                  <MenuItem
-                    selected={option.value === selected}
-                    key={option.value}
-                    onClick={() => {
-                      setIsOpen(false);
-                      onSelect(option.value);
-                    }}
-                  >
-                    <SelectLabel
-                      option={option}
-                      selected={option.value === selected}
-                    />
-                  </MenuItem>
-                ))}
-              </MenuList>
-            </PopoverContent>
-          </>
-        );
-      }}
-    </Popover>
+                <SelectLabel
+                  option={option}
+                  selected={option.value === selected}
+                />
+              </MenuItem>
+            ))}
+          </MenuList>
+        ) : (
+          <Loader />
+        )}
+      </PopoverContent>
+    </>
   );
-};
+});