From 44d0d6df73da62ca238b7937f4bc3ac8c6eafaee Mon Sep 17 00:00:00 2001 From: Garrett Date: Mon, 6 Jun 2022 20:40:59 +0000 Subject: [PATCH 1/7] fix: Show correct 'no results' message on workspace filters --- .../WorkspacesPage/WorkspacesPage.test.tsx | 2 +- .../WorkspacesPage/WorkspacesPageView.tsx | 46 ++++++++++++------- 2 files changed, 30 insertions(+), 18 deletions(-) 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/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 53fb77512c251..2fb986625933d 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -40,11 +40,11 @@ import { getDisplayStatus } 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?", @@ -200,19 +200,31 @@ export const WorkspacesPageView: FC = ({ loading, works {!workspaces && loading && } {workspaces && workspaces.length === 0 && ( - - - - - - } - /> - - + <> + {filter === "owner:me" || filter === "" ? ( + + + + + + } + /> + + + ) : ( + + + + + + )} + )} {workspaces && workspaces.map((workspace) => { From 719374ae973e3bc4c034a0fac8121fb5e4144431 Mon Sep 17 00:00:00 2001 From: Garrett Date: Mon, 6 Jun 2022 20:50:07 +0000 Subject: [PATCH 2/7] fmt --- site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 2fb986625933d..3503858eef2a5 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -218,9 +218,7 @@ export const WorkspacesPageView: FC = ({ loading, works ) : ( - + )} From f6068d91dcd2164f458c9b545f87e0e0528a5149 Mon Sep 17 00:00:00 2001 From: Garrett Date: Mon, 6 Jun 2022 22:50:37 +0000 Subject: [PATCH 3/7] Use consts in util --- site/src/pages/WorkspacesPage/WorkspacesPage.tsx | 1 + site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 4 ++-- site/src/util/workspace.ts | 5 +++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx index b3c47f173e46a..adfa544f53960 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx @@ -4,6 +4,7 @@ import { Helmet } from "react-helmet" import { pageTitle } from "../../util/page" import { workspacesMachine } from "../../xServices/workspaces/workspacesXService" import { WorkspacesPageView } from "./WorkspacesPageView" +import { workspaceFilterQuery } from "../../util/workspace" const WorkspacesPage: FC = () => { const [workspacesState, send] = useMachine(workspacesMachine) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 3503858eef2a5..5fcc3e7702f85 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -35,7 +35,7 @@ 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) @@ -201,7 +201,7 @@ export const WorkspacesPageView: FC = ({ loading, works {!workspaces && loading && } {workspaces && workspaces.length === 0 && ( <> - {filter === "owner:me" || filter === "" ? ( + {query === workspaceFilterQuery.me || query === workspaceFilterQuery.all ? ( Date: Mon, 6 Jun 2022 23:24:11 +0000 Subject: [PATCH 4/7] make fmt --- site/src/pages/WorkspacesPage/WorkspacesPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx index adfa544f53960..92eaadeed4b13 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx @@ -2,9 +2,9 @@ import { useMachine } from "@xstate/react" import { FC } from "react" import { Helmet } from "react-helmet" import { pageTitle } from "../../util/page" +import { workspaceFilterQuery } from "../../util/workspace" import { workspacesMachine } from "../../xServices/workspaces/workspacesXService" import { WorkspacesPageView } from "./WorkspacesPageView" -import { workspaceFilterQuery } from "../../util/workspace" const WorkspacesPage: FC = () => { const [workspacesState, send] = useMachine(workspacesMachine) From 4175a9a516d5368d909edadd9febd93384169401 Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 7 Jun 2022 16:21:45 +0000 Subject: [PATCH 5/7] fix merge --- site/src/pages/WorkspacesPage/WorkspacesPage.tsx | 1 - site/src/pages/WorkspacesPage/WorkspacesPageView.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx index 92eaadeed4b13..b3c47f173e46a 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx @@ -2,7 +2,6 @@ import { useMachine } from "@xstate/react" import { FC } from "react" import { Helmet } from "react-helmet" import { pageTitle } from "../../util/page" -import { workspaceFilterQuery } from "../../util/workspace" import { workspacesMachine } from "../../xServices/workspaces/workspacesXService" import { WorkspacesPageView } from "./WorkspacesPageView" diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx index 5fcc3e7702f85..355ebd05b170f 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -201,7 +201,7 @@ export const WorkspacesPageView: FC = ({ loading, works {!workspaces && loading && } {workspaces && workspaces.length === 0 && ( <> - {query === workspaceFilterQuery.me || query === workspaceFilterQuery.all ? ( + {filter === workspaceFilterQuery.me || filter === workspaceFilterQuery.all ? ( Date: Tue, 7 Jun 2022 18:35:21 +0000 Subject: [PATCH 6/7] feat: save workspace filter in url --- .../pages/WorkspacesPage/WorkspacesPage.tsx | 21 ++++++++++++++----- .../WorkspacesPageView.stories.tsx | 12 +++++++++-- .../WorkspacesPage/WorkspacesPageView.tsx | 1 + .../workspaces/workspacesXService.ts | 5 +---- 4 files changed, 28 insertions(+), 11 deletions(-) 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..0a0b9e37be3ea 100644 --- 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 index 355ebd05b170f..02d38604736a8 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx @@ -93,6 +93,7 @@ export const WorkspacesPageView: FC = ({ loading, works const theme: Theme = useTheme() const form = useFormik({ + enableReinitialize: true, initialValues: { query: filter ?? "", }, 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: { From 32f71c2f4236e8623a7e0e25181a21e9eca5e7f6 Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 7 Jun 2022 18:37:50 +0000 Subject: [PATCH 7/7] make fmt --- site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx index 0a0b9e37be3ea..1b62b533ae30b 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.stories.tsx @@ -1,8 +1,8 @@ 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" +import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView" export default { title: "pages/WorkspacesPageView",