fix: Show correct 'no results' message on workspace filters (#2103)

site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx

@@ -23,7 +23,7 @@ describe("WorkspacesPage", () => {
     render(<WorkspacesPage />)
 
     // Then
-    await screen.findByText(Language.emptyMessage)
+    await screen.findByText(Language.emptyCreateWorkspaceMessage)
   })
 
   it("renders a filled workspaces page", async () => {

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)
         }}
       />
     </>

site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, Story } from "@storybook/react"
 import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
 import { MockWorkspace } from "../../testHelpers/entities"
+import { workspaceFilterQuery } from "../../util/workspace"
 import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"
 
 export default {
@@ -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",
 }

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -35,16 +35,16 @@ import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHea
 import { Stack } from "../../components/Stack/Stack"
 import { TableLoader } from "../../components/TableLoader/TableLoader"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
-import { getDisplayStatus } from "../../util/workspace"
+import { getDisplayStatus, workspaceFilterQuery } from "../../util/workspace"
 
 dayjs.extend(relativeTime)
 
 export const Language = {
-  createButton: "Create workspace",
-  emptyMessage: "Create your first workspace",
-  emptyDescription: "Start editing your source code and building your software",
-  filterName: "Filters",
   createWorkspaceButton: "Create workspace",
+  emptyCreateWorkspaceMessage: "Create your first workspace",
+  emptyCreateWorkspaceDescription: "Start editing your source code and building your software",
+  emptyResultsMessage: "No results matched your search",
+  filterName: "Filters",
   yourWorkspacesButton: "Your workspaces",
   allWorkspacesButton: "All workspaces",
   workspaceTooltipTitle: "What is workspace?",
@@ -93,6 +93,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
   const theme: Theme = useTheme()
 
   const form = useFormik<FilterFormValues>({
+    enableReinitialize: true,
     initialValues: {
       query: filter ?? "",
     },
@@ -200,19 +201,29 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
         <TableBody>
           {!workspaces && loading && <TableLoader />}
           {workspaces && workspaces.length === 0 && (
-            <TableRow>
-              <TableCell colSpan={999}>
-                <EmptyState
-                  message={Language.emptyMessage}
-                  description={Language.emptyDescription}
-                  cta={
-                    <Link underline="none" component={RouterLink} to="/workspaces/new">
-                      <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
-                    </Link>
-                  }
-                />
-              </TableCell>
-            </TableRow>
+            <>
+              {filter === workspaceFilterQuery.me || filter === workspaceFilterQuery.all ? (
+                <TableRow>
+                  <TableCell colSpan={999}>
+                    <EmptyState
+                      message={Language.emptyCreateWorkspaceMessage}
+                      description={Language.emptyCreateWorkspaceDescription}
+                      cta={
+                        <Link underline="none" component={RouterLink} to="/workspaces/new">
+                          <Button startIcon={<AddCircleOutline />}>{Language.createWorkspaceButton}</Button>
+                        </Link>
+                      }
+                    />
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={999}>
+                    <EmptyState message={Language.emptyResultsMessage} />
+                  </TableCell>
+                </TableRow>
+              )}
+            </>
           )}
           {workspaces &&
             workspaces.map((workspace) => {

site/src/util/workspace.ts

@@ -297,3 +297,8 @@ export const workspaceQueryToFilter = (query?: string): TypesGen.WorkspaceFilter
     return defaultFilter
   }
 }
+
+export const workspaceFilterQuery = {
+  me: "owner:me",
+  all: "",
+}

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: {