Jun 7, 2022 · Jun 6, 2022 · Jun 6, 2022 · Jun 6, 2022 · Jun 6, 2022 · Jun 7, 2022
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
    render(<WorkspacesPage />)

    // 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
 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 (
    <>
        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
 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 {
  ],
 }

 export constEmpty = Template.bind({})
 Empty.args = {
 export constOwnerHasNoWorkspaces = 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
 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?",
  const theme: Theme = useTheme()

  const form = useFormik<FilterFormValues>({
    enableReinitialize: true,
    initialValues: {
      query: filter ?? "",
    },
        <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) => {
diff --git a/site/src/util/workspace.ts b/site/src/util/workspace.ts
    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
      },
    },
    id: "workspaceState",
    context: {
      filter: "owner:me",
    },
    initial: "gettingWorkspaces",
    initial: "ready",
    states: {
      ready: {
        on: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 () => {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 (
		<>
Expand All		@@ -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)
		}}
		/>
		</>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 {
Expand DownExpand Up		@@ -48,7 +49,14 @@ AllStates.args = {
		],
		}

		export constEmpty = Template.bind({})
		Empty.args = {
		export constOwnerHasNoWorkspaces = Template.bind({})
		OwnerHasNoWorkspaces.args = {
		workspaces: [],
		filter: workspaceFilterQuery.me,
		}

		export const NoResults = Template.bind({})
		NoResults.args = {
		workspaces: [],
		filter: "searchtearmwithnoresults",
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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?",
Expand DownExpand Up		@@ -93,6 +93,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
		const theme: Theme = useTheme()

		const form = useFormik<FilterFormValues>({
		enableReinitialize: true,
		initialValues: {
		query: filter ?? "",
		},
Expand DownExpand Up		@@ -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) => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -297,3 +297,8 @@ export const workspaceQueryToFilter = (query?: string): TypesGen.WorkspaceFilter
		return defaultFilter
		}
		}

		export const workspaceFilterQuery = {
		me: "owner:me",
		all: "",
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -24,10 +24,7 @@ export const workspacesMachine = createMachine(
		},
		},
		id: "workspaceState",
		context: {
		filter: "owner:me",
		},
		initial: "gettingWorkspaces",
		initial: "ready",
		states: {
		ready: {
		on: {
Expand Down