feat: save workspace filter in url

coder · f0ssel · Jun 7, 2022 · Jun 6, 2022 · Jun 6, 2022 · Jun 6, 2022
commit 562ea922ea10de20db40e2fa09fdd9201abdf6e5
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -1,12 +1,25 @@
 import { useMachine } from "@xstate/react"
-import { FC } from "react"
+import { FC, useEffect } from "react"
 import { Helmet } from "react-helmet"
+import { useSearchParams } from "react-router-dom"
 import { pageTitle } from "../../util/page"
+import { workspaceFilterQuery } from "../../util/workspace"
 import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
 import { WorkspacesPageView } from "./WorkspacesPageView"
 
 const WorkspacesPage: FC = () => {
   const [workspacesState, send] = useMachine(workspacesMachine)
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  useEffect(() => {
+    const filter = searchParams.get("filter")
+    const query = filter ? filter : workspaceFilterQuery.me
+
+    send({
+      type: "SET_FILTER",
+      query,
+    })
+  }, [searchParams, send])
 
   return (
     <>
@@ -19,10 +32,8 @@ const WorkspacesPage: FC = () => {
         loading={workspacesState.hasTag("loading")}
         workspaces={workspacesState.context.workspaces}
         onFilter={(query) => {
-          send({
-            type: "SET_FILTER",
-            query,
-          })
+          searchParams.set("filter", query)
+          setSearchParams(searchParams)
         }}
       />
     </>

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx
@@ -2,6 +2,7 @@ import { ComponentMeta, Story } from "@storybook/react"
 import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
 import { MockWorkspace } from "../../testHelpers/entities"
 import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"
+import { workspaceFilterQuery } from "../../util/workspace"
 
 export default {
   title: "pages/WorkspacesPageView",
@@ -48,7 +49,14 @@ AllStates.args = {
   ],
 }
 
-export const Empty = Template.bind({})
-Empty.args = {
+export const OwnerHasNoWorkspaces = Template.bind({})
+OwnerHasNoWorkspaces.args = {
   workspaces: [],
+  filter: workspaceFilterQuery.me,
+}
+
+export const NoResults = Template.bind({})
+NoResults.args = {
+  workspaces: [],
+  filter: "searchtearmwithnoresults",
 }
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -93,6 +93,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
   const theme: Theme = useTheme()
 
   const form = useFormik<FilterFormValues>({
+    enableReinitialize: true,
     initialValues: {
       query: filter ?? "",
     },

diff --git a/site/src/xServices/workspaces/workspacesXService.ts b/site/src/xServices/workspaces/workspacesXService.ts
@@ -24,10 +24,7 @@ export const workspacesMachine = createMachine(
       },
     },
     id: "workspaceState",
-    context: {
-      filter: "owner:me",
-    },
-    initial: "gettingWorkspaces",
+    initial: "ready",
     states: {
       ready: {
         on: {