Add base structure for the new filter component

BrunoQuaresma · BrunoQuaresma · commit d7a4be03755b · 2024-05-15T14:09:19.000Z
diff --git a/site/src/components/NewFilter/NewFilter.stories.tsx b/site/src/components/NewFilter/NewFilter.stories.tsx
@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within, expect } from "@storybook/test";
+import { useState } from "react";
+import { NewFilter } from "./NewFilter";
+
+const meta: Meta<typeof NewFilter> = {
+  title: "components/NewFilter",
+  component: NewFilter,
+  render: function NewFilterWithState(args) {
+    const [value, setValue] = useState<string>(args.value);
+    return <NewFilter {...args} value={value} onChange={setValue} />;
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof NewFilter>;
+
+export const Empty: Story = {
+  args: {
+    value: "",
+  },
+};
+
+export const DefaultValue: Story = {
+  args: {
+    value: "owner:CoderUser",
+  },
+};
+
+export const Focused: Story = {
+  args: {
+    value: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("textbox"));
+    await expect(canvas.getByRole("textbox")).toHaveFocus();
+  },
+};
+
+export const Typing: Story = {
+  args: {
+    value: "",
+  },
+  play: async ({ canvasElement }) => {
+    const text = "owner:SomeSearchString";
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByRole("textbox"), text);
+    await expect(canvas.getByRole("textbox")).toHaveValue(text);
+  },
+};
+
+export const ClearInput: Story = {
+  args: {
+    value: "owner:CoderUser",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Clear filter" }));
+    await expect(canvas.getByRole("textbox")).toHaveValue("");
+  },
+};
diff --git a/site/src/components/NewFilter/NewFilter.tsx b/site/src/components/NewFilter/NewFilter.tsx
@@ -0,0 +1,81 @@
+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 InputBase from "@mui/material/InputBase";
+import Tooltip from "@mui/material/Tooltip";
+import { visuallyHidden } from "@mui/utils";
+import type { FC } from "react";
+
+const inputHeight = 36;
+const inputBorderRadius = 6;
+const inputSidePadding = 12;
+
+type NewFilterProps = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export const NewFilter: FC<NewFilterProps> = (props) => {
+  const theme = useTheme();
+  const { value, onChange } = props;
+  const isEmpty = value.length === 0;
+
+  return (
+    <div
+      css={{
+        borderRadius: inputBorderRadius,
+        border: `1px solid ${theme.palette.divider}`,
+        height: inputHeight,
+        padding: `0 ${inputSidePadding}px`,
+
+        "&:focus-within": {
+          outline: `2px solid ${theme.palette.primary.main}`,
+          outlineOffset: -1, // Overrides the border
+        },
+      }}
+    >
+      <InputBase
+        startAdornment={
+          <SearchOutlined
+            role="presentation"
+            css={{
+              width: 14,
+              height: 14,
+              color: theme.palette.text.secondary,
+              marginRight: inputSidePadding / 2,
+            }}
+          />
+        }
+        endAdornment={
+          !isEmpty && (
+            <Tooltip title="Clear filter">
+              <IconButton
+                size="small"
+                onClick={() => {
+                  onChange("");
+                }}
+              >
+                <CloseOutlined
+                  css={{
+                    width: 14,
+                    height: 14,
+                    color: theme.palette.text.secondary,
+                  }}
+                />
+                <span css={{ ...visuallyHidden }}>Clear filter</span>
+              </IconButton>
+            </Tooltip>
+          )
+        }
+        fullWidth
+        placeholder="Search..."
+        css={{ fontSize: 14, height: "100%" }}
+        value={value}
+        onChange={(e) => {
+          onChange(e.currentTarget.value);
+        }}
+      />
+    </div>
+  );
+};
diff --git a/site/src/pages/WorkspacesPage/filter/menus.ts b/site/src/pages/WorkspacesPage/filter/menus.ts
@@ -20,7 +20,11 @@ export const useTemplateFilterMenu = ({
     value,
     id: "template",
     getSelectedOption: async () => {
-      // Show all templates including deprecated
+      debugger;
+      if (!value) {
+        return null;
+      }
+
       const templates = await API.getTemplates(organizationId);
       const template = templates.find((template) => template.name === value);
       if (template) {
@@ -33,9 +37,11 @@ export const useTemplateFilterMenu = ({
           icon: template.icon,
         };
       }
+
       return null;
     },
     getOptions: async (query) => {
+      debugger;
       // Show all templates including deprecated
       const templates = await API.getTemplates(organizationId);
       const filteredTemplates = templates.filter(
