Add status menu to workspaces search

coder · BrunoQuaresma · May 15, 2024 · May 15, 2024 · May 15, 2024 · May 15, 2024
commit c89cf8cb0c455d2f821cde2a919ef0420905ef09
diff --git a/site/src/components/Search/SearchField.tsx b/site/src/components/Search/SearchField.tsx
@@ -65,7 +65,7 @@ export const SearchField: FC<SearchFieldProps> = (props) => {
         }}
         fullWidth
         placeholder="Search..."
-        css={{ fontSize: 14, height: "100%" }}
+        css={{ fontSize: 14, height: "100%", flex: 1 }}
         value={value}
         onChange={(e) => {
           onChange(e.currentTarget.value);

diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.stories.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.stories.tsx
@@ -29,3 +29,15 @@ export const SelectPresetFilter: Story = {
     await expect(input).toHaveValue("failed:true");
   },
 };
+
+export const SelectStatus: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: /Select status/i });
+    await userEvent.click(button);
+    const option = canvas.getByText("Running");
+    await userEvent.click(option);
+    const input = canvas.getByLabelText("Search workspace");
+    await expect(input).toHaveValue("status:failed");
+  },
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.tsx b/site/src/pages/WorkspacesPage/WorkspaceSearch/WorkspaceSearch.tsx
@@ -2,6 +2,7 @@ import type { FC } from "react";
 import { SearchField } from "components/Search/SearchField";
 import { Stack } from "components/Stack/Stack";
 import { PresetFiltersMenu } from "./PresetFiltersMenu";
+import { StatusMenu } from "./StatusMenu";
 
 type WorkspaceSearchProps = {
   query: string;
@@ -12,8 +13,19 @@ export const WorkspaceSearch: FC<WorkspaceSearchProps> = ({
   query,
   setQuery,
 }) => {
+  const status = findTagValue(query, "status");
+
   return (
-    <Stack alignItems="center" direction="row" spacing={1}>
+    <Stack
+      alignItems="center"
+      direction="row"
+      spacing={1}
+      css={{
+        "& > *": {
+          flexShrink: 0,
+        },
+      }}
+    >
       <PresetFiltersMenu onSelect={setQuery} />
 
       <SearchField
@@ -22,6 +34,40 @@ export const WorkspaceSearch: FC<WorkspaceSearchProps> = ({
         value={query}
         onChange={setQuery}
       />
+
+      <StatusMenu
+        placeholder="All statuses"
+        selected={status}
+        onSelect={(status) => {
+          setQuery(replaceOrAddTagValue(query, "status", status));
+        }}
+      />
     </Stack>
   );
 };
+
+function findTagValue(query: string, tag: string): string | undefined {
+  const blocks = query.split(" ");
+  const block = blocks.find((block) => block.startsWith(`${tag}:`));
+
+  if (!block) {
+    return;
+  }
+
+  return block.split(":")[1];
+}
+
+function replaceOrAddTagValue(
+  query: string,
+  tag: string,
+  value: string,
+): string {
+  const blocks = query.split(" ");
+  const block = blocks.find((block) => block.startsWith(`${tag}:`));
+
+  if (block) {
+    return query.replace(block, `${tag}:${value}`);
+  }
+
+  return `${query} ${tag}:${value}`;
+}