diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx index 462ce080add5d..2486d500c6527 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx @@ -23,7 +23,7 @@ describe("WorkspacesPage", () => { render() // Then - await screen.findByText(Language.emptyMessage) + await screen.findByText(Language.emptyCreateWorkspaceMessage) }) it("renders a filled workspaces page", async () => { diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx index b3c47f173e46a..d8fd2f329d84f 100644 --- 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 index 880698a8a0c8a..1b62b533ae30b 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx +++ b/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", } diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 53fb77512c251..02d38604736a8 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/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 = ({ loading, works const theme: Theme = useTheme() const form = useFormik({ + enableReinitialize: true, initialValues: { query: filter ?? "", }, @@ -200,19 +201,29 @@ export const WorkspacesPageView: FC = ({ loading, works {!workspaces && loading && } {workspaces && workspaces.length === 0 && ( - - - - }>{Language.createButton} - - } - /> - - + <> + {filter === workspaceFilterQuery.me || filter === workspaceFilterQuery.all ? ( + + + + }>{Language.createWorkspaceButton} + + } + /> + + + ) : ( + + + + + + )} + > )} {workspaces && workspaces.map((workspace) => { diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts index 95f85295a0a81..1c60e40ae9074 100644 --- a/site/src/util/workspace.ts +++ b/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: "", +} diff --git a/site/src/xServices/workspaces/workspacesXService.ts b/site/src/xServices/workspaces/workspacesXService.ts index d4367b7ad95a3..842d1108d2b67 100644 --- 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: { pFad - Phonifier reborn Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved. Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages. Alternative Proxies:Alternative ProxypFad ProxypFad v3 ProxypFad v4 Proxy
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy