Skip to content

Commit 7258d6a

Browse files
f0sself0ssel
authored
fix: Show correct 'no results' message on workspace filters (coder#2103)
1 parent 27acb98 commit 7258d6a

File tree

6 files changed

+62
-30
lines changed

6 files changed

+62
-30
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe("WorkspacesPage", () => {
2323
render(<WorkspacesPage />)
2424

2525
// Then
26-
await screen.findByText(Language.emptyMessage)
26+
await screen.findByText(Language.emptyCreateWorkspaceMessage)
2727
})
2828

2929
it("renders a filled workspaces page", async () => {

‎site/src/pages/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
import { useMachine } from "@xstate/react"
2-
import { FC } from "react"
2+
import { FC, useEffect } from "react"
33
import { Helmet } from "react-helmet"
4+
import { useSearchParams } from "react-router-dom"
45
import { pageTitle } from "../../util/page"
6+
import { workspaceFilterQuery } from "../../util/workspace"
57
import { workspacesMachine } from "../../xServices/workspaces/workspacesXService"
68
import { WorkspacesPageView } from "./WorkspacesPageView"
79

810
const WorkspacesPage: FC = () => {
911
const [workspacesState, send] = useMachine(workspacesMachine)
12+
const [searchParams, setSearchParams] = useSearchParams()
13+
14+
useEffect(() => {
15+
const filter = searchParams.get("filter")
16+
const query = filter ? filter : workspaceFilterQuery.me
17+
18+
send({
19+
type: "SET_FILTER",
20+
query,
21+
})
22+
}, [searchParams, send])
1023

1124
return (
1225
<>
@@ -19,10 +32,8 @@ const WorkspacesPage: FC = () => {
1932
loading={workspacesState.hasTag("loading")}
2033
workspaces={workspacesState.context.workspaces}
2134
onFilter={(query) => {
22-
send({
23-
type: "SET_FILTER",
24-
query,
25-
})
35+
searchParams.set("filter", query)
36+
setSearchParams(searchParams)
2637
}}
2738
/>
2839
</>

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ComponentMeta, Story } from "@storybook/react"
22
import { ProvisionerJobStatus, Workspace, WorkspaceTransition } from "../../api/typesGenerated"
33
import { MockWorkspace } from "../../testHelpers/entities"
4+
import { workspaceFilterQuery } from "../../util/workspace"
45
import { WorkspacesPageView, WorkspacesPageViewProps } from "./WorkspacesPageView"
56

67
export default {
@@ -48,7 +49,14 @@ AllStates.args = {
4849
],
4950
}
5051

51-
export const Empty = Template.bind({})
52-
Empty.args = {
52+
export const OwnerHasNoWorkspaces = Template.bind({})
53+
OwnerHasNoWorkspaces.args = {
5354
workspaces: [],
55+
filter: workspaceFilterQuery.me,
56+
}
57+
58+
export const NoResults = Template.bind({})
59+
NoResults.args = {
60+
workspaces: [],
61+
filter: "searchtearmwithnoresults",
5462
}

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

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,16 @@ import { PageHeader, PageHeaderTitle } from "../../components/PageHeader/PageHea
3535
import { Stack } from "../../components/Stack/Stack"
3636
import { TableLoader } from "../../components/TableLoader/TableLoader"
3737
import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
38-
import { getDisplayStatus } from "../../util/workspace"
38+
import { getDisplayStatus, workspaceFilterQuery } from "../../util/workspace"
3939

4040
dayjs.extend(relativeTime)
4141

4242
export const Language = {
43-
createButton: "Create workspace",
44-
emptyMessage: "Create your first workspace",
45-
emptyDescription: "Start editing your source code and building your software",
46-
filterName: "Filters",
4743
createWorkspaceButton: "Create workspace",
44+
emptyCreateWorkspaceMessage: "Create your first workspace",
45+
emptyCreateWorkspaceDescription: "Start editing your source code and building your software",
46+
emptyResultsMessage: "No results matched your search",
47+
filterName: "Filters",
4848
yourWorkspacesButton: "Your workspaces",
4949
allWorkspacesButton: "All workspaces",
5050
workspaceTooltipTitle: "What is workspace?",
@@ -93,6 +93,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
9393
const theme: Theme = useTheme()
9494

9595
const form = useFormik<FilterFormValues>({
96+
enableReinitialize: true,
9697
initialValues: {
9798
query: filter ?? "",
9899
},
@@ -200,19 +201,29 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
200201
<TableBody>
201202
{!workspaces && loading && <TableLoader />}
202203
{workspaces && workspaces.length === 0 && (
203-
<TableRow>
204-
<TableCell colSpan={999}>
205-
<EmptyState
206-
message={Language.emptyMessage}
207-
description={Language.emptyDescription}
208-
cta={
209-
<Link underline="none" component={RouterLink} to="/workspaces/new">
210-
<Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
211-
</Link>
212-
}
213-
/>
214-
</TableCell>
215-
</TableRow>
204+
<>
205+
{filter === workspaceFilterQuery.me || filter === workspaceFilterQuery.all ? (
206+
<TableRow>
207+
<TableCell colSpan={999}>
208+
<EmptyState
209+
message={Language.emptyCreateWorkspaceMessage}
210+
description={Language.emptyCreateWorkspaceDescription}
211+
cta={
212+
<Link underline="none" component={RouterLink} to="/workspaces/new">
213+
<Button startIcon={<AddCircleOutline />}>{Language.createWorkspaceButton}</Button>
214+
</Link>
215+
}
216+
/>
217+
</TableCell>
218+
</TableRow>
219+
) : (
220+
<TableRow>
221+
<TableCell colSpan={999}>
222+
<EmptyState message={Language.emptyResultsMessage} />
223+
</TableCell>
224+
</TableRow>
225+
)}
226+
</>
216227
)}
217228
{workspaces &&
218229
workspaces.map((workspace) => {

‎site/src/util/workspace.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,3 +297,8 @@ export const workspaceQueryToFilter = (query?: string): TypesGen.WorkspaceFilter
297297
return defaultFilter
298298
}
299299
}
300+
301+
export const workspaceFilterQuery = {
302+
me: "owner:me",
303+
all: "",
304+
}

‎site/src/xServices/workspaces/workspacesXService.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@ export const workspacesMachine = createMachine(
2424
},
2525
},
2626
id: "workspaceState",
27-
context: {
28-
filter: "owner:me",
29-
},
30-
initial: "gettingWorkspaces",
27+
initial: "ready",
3128
states: {
3229
ready: {
3330
on: {

0 commit comments

Comments
 (0)