coder · BrunoQuaresma · May 15, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -155,6 +155,7 @@
     "typesafe",
     "unconvert",
     "Untar",
+    "upsert",
     "Userspace",
     "VMID",
     "walkthrough",

diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -30,11 +30,10 @@ export const templateByName = (
   };
 };
 
-const getTemplatesQueryKey = (organizationId: string, deprecated?: boolean) => [
-  organizationId,
-  "templates",
-  deprecated,
-];
+export const getTemplatesQueryKey = (
+  organizationId: string,
+  deprecated?: boolean,
+) => [organizationId, "templates", deprecated];
 
 export const templates = (organizationId: string, deprecated?: boolean) => {
   return {

diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -124,7 +124,7 @@ export const authMethods = () => {
   };
 };
 
-const meKey = ["me"];
+export const meKey = ["me"];
 
 export const me = (metadata: MetadataState<User>) => {
   return cachedQuery({

diff --git a/site/src/components/Menu/MenuButton.tsx b/site/src/components/Menu/MenuButton.tsx
@@ -0,0 +1,9 @@
+import Button, { type ButtonProps } from "@mui/material/Button";
+import { forwardRef } from "react";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+
+export const MenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return <Button endIcon={<DropdownArrow />} ref={ref} {...props} />;
+  },
+);
diff --git a/site/src/components/Menu/MenuCheck.tsx b/site/src/components/Menu/MenuCheck.tsx
@@ -0,0 +1,17 @@
+import CheckOutlined from "@mui/icons-material/CheckOutlined";
+import type { FC } from "react";
+import { MenuIcon } from "./MenuIcon";
+
+export const MenuCheck: FC<{ isVisible: boolean }> = ({ isVisible }) => {
+  return (
+    <MenuIcon>
+      <CheckOutlined
+        role="presentation"
+        css={{
+          visibility: isVisible ? "visible" : "hidden",
+          marginLeft: "auto",
+        }}
+      />
+    </MenuIcon>
+  );
+};
diff --git a/site/src/components/Menu/MenuIcon.tsx b/site/src/components/Menu/MenuIcon.tsx
@@ -0,0 +1,22 @@
+import { css } from "@emotion/css";
+import {
+  type FC,
+  type PropsWithChildren,
+  type ReactElement,
+  cloneElement,
+} from "react";
+
+type MenuIconProps = {
+  size?: number;
+};
+
+export const MenuIcon: FC<PropsWithChildren<MenuIconProps>> = ({
+  children,
+  size = 14,
+}) => {
+  return cloneElement(children as ReactElement, {
+    className: css({
+      fontSize: size,
+    }),
+  });
+};
diff --git a/site/src/components/Menu/MenuNoResults.tsx b/site/src/components/Menu/MenuNoResults.tsx
@@ -0,0 +1,19 @@
+import { useTheme } from "@emotion/react";
+import type { FC } from "react";
+
+export const MenuNoResults: FC = () => {
+  const theme = useTheme();
+
+  return (
+    <div
+      css={{
+        padding: "8px 12px",
+        color: theme.palette.text.secondary,
+        fontSize: 14,
+        textAlign: "center",
+      }}
+    >
+      No results found
+    </div>
+  );
+};
diff --git a/site/src/components/Menu/MenuSearch.tsx b/site/src/components/Menu/MenuSearch.tsx
@@ -0,0 +1,43 @@
+import { css } from "@emotion/css";
+import { useTheme } from "@emotion/react";
+import type { FC } from "react";
+import {
+  SearchField,
+  type SearchFieldProps,
+} from "components/Search/SearchField";
+
+export const MenuSearch: FC<SearchFieldProps> = (props) => {
+  const theme = useTheme();
+
+  return (
+    <SearchField
+      {...props}
+      onKeyDown={(e) => {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+
+          const firstMenuItem = e.currentTarget
+            .closest<HTMLDivElement>(".MuiPaper-root")
+            ?.querySelector<HTMLElement>("[role=menuitem]");
+
+          if (firstMenuItem) {
+            firstMenuItem.focus();
+          }
+        }
+      }}
+      className={css({
+        position: "sticky",
+        top: 0,
+        backgroundColor: theme.palette.background.paper,
+        zIndex: 1,
+        "& fieldset": {
+          border: 0,
+          borderRadius: 0,
+          borderBottomStyle: "solid",
+          borderBottomWidth: `1px !important`,
+          borderColor: `${theme.palette.divider} !important`,
+        },
+      })}
+    />
+  );
+};
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 Record<string, unknown>>(
+    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 },
 ) => {
@@ -152,9 +165,9 @@ export const PopoverContent: FC<PopoverContentProps> = ({
         marginTop: hoverMode ? undefined : 8,
         pointerEvents: hoverMode ? "none" : undefined,
         "& .MuiPaper-root": {
-          minWidth: 320,
           fontSize: 14,
           pointerEvents: hoverMode ? "auto" : undefined,
+          borderRadius: 6,
         },
       }}
       {...horizontalProps(horizontal)}

diff --git a/site/src/components/Search/SearchField.stories.tsx b/site/src/components/Search/SearchField.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within, expect } from "@storybook/test";
+import { useState } from "react";
+import { SearchField } from "./SearchField";
+
+const searchLabel = "Search for something";
+
+const meta: Meta<typeof SearchField> = {
+  title: "components/SearchField",
+  component: SearchField,
+  args: {
+    id: "search",
+    label: searchLabel,
+  },
+  render: function SearchFieldWithState(args) {
+    const [value, setValue] = useState<string>(args.value);
+    return <SearchField {...args} value={value} onChange={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchField>;
+
+export const Empty: Story = {
+  args: {
+    value: "",
+  },
+};
+
+export const DefaultValue: Story = {
+  args: {
+    value: "owner:CoderUser",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    value: "number_of_users:7",
+    error: `"number_of_users" is not a valid query param`,
+  },
+};
+
+export const Focused: Story = {
+  args: {
+    value: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.click(input);
+    await expect(input).toHaveFocus();
+  },
+};
+
+export const Typing: Story = {
+  args: {
+    value: "",
+  },
+  play: async ({ canvasElement }) => {
+    const text = "owner:SomeSearchString";
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.type(input, text);
+    await expect(input).toHaveValue(text);
+  },
+};
+
+export const ClearInput: Story = {
+  args: {
+    value: "owner:CoderUser",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByLabelText(searchLabel);
+    await userEvent.click(canvas.getByRole("button", { name: "Clear filter" }));
+    await expect(input).toHaveValue("");
+  },
+};
diff --git a/site/src/components/Search/SearchField.tsx b/site/src/components/Search/SearchField.tsx
@@ -0,0 +1,83 @@
+import { useTheme } from "@emotion/react";
+import CloseOutlined from "@mui/icons-material/CloseOutlined";
+import SearchOutlined from "@mui/icons-material/SearchOutlined";
+import IconButton from "@mui/material/IconButton";
+import InputAdornment from "@mui/material/InputAdornment";
+import TextField, { type TextFieldProps } from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import { visuallyHidden } from "@mui/utils";
+import type { FC } from "react";
+
+export type SearchFieldProps = Omit<
+  TextFieldProps,
+  "onChange" | "id" | "label" | "value" | "error"
+> & {
+  id: string;
+  label: string;
+  value: string;
+  autoFocus?: boolean;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+export const SearchField: FC<SearchFieldProps> = (props) => {
+  const theme = useTheme();
+  const { value, label, id, error, onChange, autoFocus, ...textFieldProps } =
+    props;
+  const isEmpty = value.length === 0;
+
+  return (
+    <>
+      <label htmlFor={id} css={{ ...visuallyHidden }}>
+        {label}
+      </label>
+      <TextField
+        {...textFieldProps}
+        error={Boolean(error)}
+        helperText={error}
+        type="text"
+        InputProps={{
+          ...textFieldProps.InputProps,
+          autoFocus,
+          id,
+          size: "small",
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchOutlined
+                role="presentation"
+                css={{
+                  fontSize: 14,
+                  color: theme.palette.text.secondary,
+                }}
+              />
+            </InputAdornment>
+          ),
+          endAdornment: !isEmpty && (
+            <Tooltip title="Clear filter">
+              <IconButton
+                size="small"
+                onClick={() => {
+                  onChange("");
+                }}
+              >
+                <CloseOutlined
+                  css={{
+                    fontSize: 14,
+                    color: theme.palette.text.secondary,
+                  }}
+                />
+                <span css={{ ...visuallyHidden }}>Clear filter</span>
+              </IconButton>
+            </Tooltip>
+          ),
+        }}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+        placeholder={textFieldProps.placeholder ?? "Search..."}
+        fullWidth
+      />
+    </>
+  );
+};
diff --git a/site/src/components/TemplateAvatar/TemplateAvatar.tsx b/site/src/components/TemplateAvatar/TemplateAvatar.tsx
@@ -0,0 +1,17 @@
+import type { FC } from "react";
+import type { Template } from "api/typesGenerated";
+import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
+
+type TemplateAvatarProps = {
+  template: Template;
+  size: AvatarProps["size"];
+};
+
+export const TemplateAvatar: FC<TemplateAvatarProps> = ({ template, size }) => {
+  const hasIcon = template.icon && template.icon !== "";
+
+  if (hasIcon) {
+    return <Avatar size={size} src={template.icon} variant="square" fitImage />;
+  }
+  return <Avatar size={size}>{template.name}</Avatar>;
+};
diff --git a/site/src/pages/TemplatePage/TemplatePageHeader.tsx b/site/src/pages/TemplatePage/TemplatePageHeader.tsx
@@ -14,7 +14,6 @@ import type {
   Template,
   TemplateVersion,
 } from "api/typesGenerated";
-import { Avatar } from "components/Avatar/Avatar";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
 import { Margins } from "components/Margins/Margins";
@@ -33,6 +32,7 @@ import {
 } from "components/PageHeader/PageHeader";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import { TemplateAvatar } from "components/TemplateAvatar/TemplateAvatar";
 import { useDeletionDialogState } from "./useDeletionDialogState";
 
 type TemplateMenuProps = {
@@ -165,8 +165,6 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
   permissions,
   onDeleteTemplate,
 }) => {
-  const hasIcon = template.icon && template.icon !== "";
-
   return (
     <Margins>
       <PageHeader
@@ -195,11 +193,7 @@ export const TemplatePageHeader: FC<TemplatePageHeaderProps> = ({
         }
       >
         <Stack direction="row" spacing={3} alignItems="center">
-          {hasIcon ? (
-            <Avatar size="xl" src={template.icon} variant="square" fitImage />
-          ) : (
-            <Avatar size="xl">{template.name}</Avatar>
-          )}
+          <TemplateAvatar size="xl" template={template} />
 
           <div>
             <Stack direction="row" alignItems="center" spacing={1}>