Add filter behind an experiment

coder · BrunoQuaresma · May 30, 2023 · May 19, 2023 · May 23, 2023 · May 23, 2023
commit 97286312cf0e19cf66dd0f793cb583796af4d1f2
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -12,6 +12,7 @@ import {
   useStatusAutocomplete,
 } from "./filter/autocompletes"
 import { useSearchParams } from "react-router-dom"
+import { useDashboard } from "components/Dashboard/DashboardProvider"
 
 const WorkspacesPage: FC = () => {
   const orgId = useOrganizationId()
@@ -47,6 +48,7 @@ const WorkspacesPage: FC = () => {
     filter.values.status,
     (option) => filter.update({ ...filter.values, status: option?.value }),
   )
+  const dashboard = useDashboard()
 
   return (
     <>
@@ -55,6 +57,7 @@ const WorkspacesPage: FC = () => {
       </Helmet>
 
       <WorkspacesPageView
+        useNewFilter={dashboard.experiments.includes("workspace_filter")}
         workspaces={data?.workspaces}
         error={error}
         count={data?.count}

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -19,6 +19,8 @@ import { ImpendingDeletionBanner, Count } from "components/WorkspaceDeletion"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { Filter } from "./filter/filter"
 import { hasError, isApiValidationError } from "api/errors"
+import { workspaceFilterQuery } from "utils/filters"
+import { SearchBarWithFilter } from "components/SearchBarWithFilter/SearchBarWithFilter"
 
 export const Language = {
   pageTitle: "Workspaces",
@@ -29,10 +31,24 @@ export const Language = {
   template: "Template",
 }
 
+const presetFilters = [
+  { query: workspaceFilterQuery.me, name: Language.yourWorkspacesButton },
+  { query: workspaceFilterQuery.all, name: Language.allWorkspacesButton },
+  {
+    query: workspaceFilterQuery.running,
+    name: Language.runningWorkspacesButton,
+  },
+  {
+    query: workspaceFilterQuery.failed,
+    name: "Failed workspaces",
+  },
+]
+
 export interface WorkspacesPageViewProps {
   error: unknown
   workspaces?: Workspace[]
   count?: number
+  useNewFilter?: boolean
   page: number
   limit: number
   filterProps: ComponentProps<typeof Filter>
@@ -45,12 +61,13 @@ export const WorkspacesPageView: FC<
 > = ({
   workspaces,
   error,
-  page,
   limit,
   count,
   filterProps,
   onPageChange,
   onUpdateWorkspace,
+  useNewFilter,
+  page,
 }) => {
   const { saveLocal, getLocal } = useLocalStorage()
 
@@ -115,7 +132,16 @@ export const WorkspacesPageView: FC<
           count={Count.Multiple}
         />
 
-        <Filter error={error} {...filterProps} />
+        {useNewFilter ? (
+          <Filter error={error} {...filterProps} />
+        ) : (
+          <SearchBarWithFilter
+            filter={filterProps.filter.query}
+            onFilter={filterProps.filter.debounceUpdate}
+            presetFilters={presetFilters}
+            error={error}
+          />
+        )}
       </Stack>
       <WorkspacesTable
         workspaces={workspaces}

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -1083,7 +1083,7 @@
   resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.0.1.tgz#46b6a2e92faf16fa9b7f9471f137fa2e3d1e8ac3"
   integrity sha512-ALhLD96BOL5w+a4NI5NpmfqfF1aVjjj2qJE0dLst/OhjBfVmpteWNgn/h8LZy9ulU6AnbeS+13KnPFzDjCvRRw==
 
-"@emotion/babel-plugin@^11.10.8":
+"@emotion/babel-plugin@^11.10.8", "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
   integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==
@@ -1121,7 +1121,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@^1.2.0":
+"@emotion/is-prop-valid@^1.2.0", "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
@@ -1185,7 +1185,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
   integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
-"@emotion/use-insertion-effect-with-fallbacks@^1.0.0":
+"@emotion/use-insertion-effect-with-fallbacks@^1.0.0", "@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963"
   integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==