Apr 14, 2022 · Apr 11, 2022 · Apr 11, 2022 · Apr 11, 2022 · Apr 11, 2022 · Apr 11, 2022
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
 import { TemplatesPage } from "./pages/templates"
 import { TemplatePage } from "./pages/templates/[organization]/[template]"
 import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create"
 import { UsersPage } from "./pages/users"
 import { UsersPage } from "./pages/UsersPage/UsersPage"
 import { WorkspacePage } from "./pages/workspaces/[workspace]"

 export const AppRouter: React.FC = () => (
diff --git a/site/src/api/index.ts b/site/src/api/index.ts
 import axios, { AxiosRequestHeaders } from "axios"
 import { mutate } from "swr"
 import { MockPager, MockUser, MockUser2 } from "../test_helpers"
 import * as Types from "./types"

 const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
  return response.data
 }

 export const getUsers = async (): Promise<Types.PagedUsers> => {
  // const response = await axios.get<Types.UserResponse[]>("/api/v2/users")
  // return response.data
  return Promise.resolve({
    page: [MockUser, MockUser2],
    pager: MockPager,
  })
 }

 export const getBuildInfo = async (): Promise<Types.BuildInfoResponse> => {
  const response = await axios.get("/api/v2/buildinfo")
  return response.data
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
  readonly os: string
 }

 export interface Pager {
  total: number
 }

 export interface PagedUsers {
  page: UserResponse[]
  pager: Pager
 }

 export interface WorkspaceAutostartRequest {
  schedule: string
 }
diff --git a/site/src/components/ErrorSummary/ErrorSummary.stories.tsx b/site/src/components/ErrorSummary/ErrorSummary.stories.tsx
 import{ComponentMeta,Story}from"@storybook/react"
 importReactfrom"react"
 import{ErrorSummary,ErrorSummaryProps}from"."

 exportdefault{
 title:"components/ErrorSummary",
 component:ErrorSummary,
 }asComponentMeta<typeofErrorSummary>

 constTemplate:Story<ErrorSummaryProps>=(args)=><ErrorSummary{...args}/>

 exportconstWithError=Template.bind({})
 WithError.args={
 error:newError("Something went wrong!"),
 }

 exportconstWithUndefined=Template.bind({})
diff --git a/site/src/components/ErrorSummary/index.tsx b/site/src/components/ErrorSummary/index.tsx
 import React from "react"

 const Language = {
  unknownErrorMessage: "Unknown error",
 }

 export interface ErrorSummaryProps {
  error: Error |undefined
  error: Error |unknown
 }

 export const ErrorSummary: React.FC<ErrorSummaryProps> = ({ error }) => {
  // TODO: More interesting error page

  if (typeof error === "undefined") {
    return <div>{"Unknown error"}</div>
  if (!(error instanceof Error)) {
    return <div>{Language.unknownErrorMessage}</div>
  } else {
    return <div>{error.toString()}</div>
  }

  return <div>{error.toString()}</div>
 }
diff --git a/site/src/components/UsersTable/UsersTable.stories.tsx b/site/src/components/UsersTable/UsersTable.stories.tsx
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
 import { MockUser, MockUser2 } from "../../test_helpers"
 import { UsersTable, UsersTableProps } from "./UsersTable"

 export default {
  title: "Components/UsersTable",
  component: UsersTable,
 } as ComponentMeta<typeof UsersTable>

 const Template: Story<UsersTableProps> = (args) => <UsersTable {...args} />

 export const Example = Template.bind({})
 Example.args = {
  users: [MockUser, MockUser2],
 }

 export const Empty = Template.bind({})
 Empty.args = {
  users: [],
 }
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
 import React from "react"
 import { UserResponse } from "../../api/types"
 import { Column, Table } from "../../components/Table"
 import { EmptyState } from "../EmptyState"
 import { UserCell } from "../Table/Cells/UserCell"

 const Language = {
  pageTitle: "Users",
  usersTitle: "All users",
  emptyMessage: "No users found",
  usernameLabel: "User",
 }

 const emptyState = <EmptyState message={Language.emptyMessage} />

 const columns: Column<UserResponse>[] = [
  {
    key: "username",
    name: Language.usernameLabel,
    renderer: (field, data) => {
      return <UserCell Avatar={{ username: data.username }} primaryText={data.username} caption={data.email} />
    },
  },
 ]

 export interface UsersTableProps {
  users: UserResponse[]
 }

 export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {
  return <Table columns={columns} data={users} title={Language.usersTitle} emptyState={emptyState} />
 }
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
 import { screen } from "@testing-library/react"
 import React from "react"
 import { MockPager, render } from "../../test_helpers"
 import { UsersPage } from "./UsersPage"
 import { Language } from "./UsersPageView"

 describe("Users Page", () => {
  it("has a header with the total number of users", async () => {
    render(<UsersPage />)
    const total = await screen.findByText(/\d+ total/)
    expect(total.innerHTML).toEqual(Language.pageSubtitle(MockPager))
  })
  it("shows users", async () => {
    render(<UsersPage />)
    const users = await screen.findAllByText(/.*@coder.com/)
    expect(users.length).toEqual(2)
  })
 })
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { ErrorSummary } from "../../components/ErrorSummary"
 import { XServiceContext } from "../../xServices/StateContext"
 import { UsersPageView } from "./UsersPageView"

 export const UsersPage: React.FC = () => {
  const xServices = useContext(XServiceContext)
  const [usersState] = useActor(xServices.usersXService)
  const { users, pager, getUsersError } = usersState.context

  if (usersState.matches("error")) {
    return <ErrorSummary error={getUsersError} />
  } else {
    return <UsersPageView users={users} pager={pager} />
  }
 }
diff --git a/site/src/pages/UsersPage/UsersPageView.stories.tsx b/site/src/pages/UsersPage/UsersPageView.stories.tsx
 import { ComponentMeta, Story } from "@storybook/react"
 import React from "react"
 import { MockPager, MockUser, MockUser2 } from "../../test_helpers"
 import { UsersPageView, UsersPageViewProps } from "./UsersPageView"

 export default {
  title: "pages/UsersPageView",
  component: UsersPageView,
 } as ComponentMeta<typeof UsersPageView>

 const Template: Story<UsersPageViewProps> = (args) => <UsersPageView {...args} />

 export const Ready = Template.bind({})
 Ready.args = {
  users: [MockUser, MockUser2],
  pager: MockPager,
 }
 export const Empty = Template.bind({})
 Empty.args = {
  users: [],
 }
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
 import { makeStyles } from "@material-ui/core/styles"
 import React from "react"
 import { Pager, UserResponse } from "../../api/types"
 import { Header } from "../../components/Header"
 import { UsersTable } from "../../components/UsersTable/UsersTable"

 export const Language = {
  pageTitle: "Users",
  pageSubtitle: (pager: Pager | undefined): string => (pager ? `${pager.total} total` : ""),
 }

 export interface UsersPageViewProps {
  users: UserResponse[]
  pager?: Pager
 }

 export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager }) => {
  const styles = useStyles()
  return (
    <div className={styles.flexColumn}>
      <Header title={Language.pageTitle} subTitle={Language.pageSubtitle(pager)} />
      <UsersTable users={users} />
    </div>
  )
 }

 const useStyles = makeStyles(() => ({
  flexColumn: {
    display: "flex",
    flexDirection: "column",
  },
 }))
diff --git a/site/src/pages/login.test.tsx b/site/src/pages/login.test.tsx
    const password = screen.getByLabelText(Language.passwordLabel)
    await userEvent.type(email, "test@coder.com")
    await userEvent.type(password, "password")

    // Click sign-in
    const signInButton = await screen.findByText(Language.signIn)
    act(() => signInButton.click())
diff --git a/site/src/pages/users.tsx b/site/src/pages/users.tsx
diff --git a/site/src/test_helpers/entities.ts b/site/src/test_helpers/entities.ts
 import {
  BuildInfoResponse,
  Organization,
  Pager,
  Provisioner,
  Template,
  UserAgent,
  created_at: "",
 }

 export const MockUser2: UserResponse = {
  id: "test-user-2",
  username: "TestUser2",
  email: "test2@coder.com",
  created_at: "",
 }

 export const MockPager: Pager = {
  total: 2,
 }

 export const MockOrganization: Organization = {
  id: "test-org",
  name: "Test Organization",
diff --git a/site/src/test_helpers/handlers.ts b/site/src/test_helpers/handlers.ts
  }),

  // users
  rest.get("/api/v2/users", async (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ page: [M.MockUser, M.MockUser2], pager: M.MockPager }))
  }),
  rest.post("/api/v2/users/me/workspaces", async (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(M.MockWorkspace))
  }),
diff --git a/site/src/xServices/StateContext.tsx b/site/src/xServices/StateContext.tsx
 import { ActorRefFrom } from "xstate"
 import { authMachine } from "./auth/authXService"
 import { buildInfoMachine } from "./buildInfo/buildInfoXService"
 import { usersMachine } from "./users/usersXService"

 interface XServiceContextType {
  buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
  authXService: ActorRefFrom<typeof authMachine>
  buildInfoXService: ActorRefFrom<typeof buildInfoMachine>
  usersXService: ActorRefFrom<typeof usersMachine>
 }

 /**
  return (
    <XServiceContext.Provider
      value={{
        buildInfoXService: useInterpret(buildInfoMachine),
        authXService: useInterpret(authMachine),
        buildInfoXService: useInterpret(buildInfoMachine),
        usersXService: useInterpret(usersMachine),
      }}
    >
      {children}
diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
 import { assign, createMachine } from "xstate"
 import * as API from "../../api"
 import * as Types from "../../api/types"

 export interface UsersContext {
  users: Types.UserResponse[]
  pager?: Types.Pager
  getUsersError?: Error | unknown
 }

 export type UsersEvent = { type: "GET_USERS" }

 export const usersMachine = createMachine(
  {
    tsTypes: {} as import("./usersXService.typegen").Typegen0,
    schema: {
      context: {} as UsersContext,
      events: {} as UsersEvent,
      services: {} as {
        getUsers: {
          data: Types.PagedUsers
        }
      },
    },
    id: "usersState",
    context: {
      users: [],
    },
    initial: "gettingUsers",
    states: {
      gettingUsers: {
        invoke: {
          src: "getUsers",
          id: "getUsers",
          onDone: [
            {
              target: "#usersState.ready",
              actions: ["assignUsers", "clearGetUsersError"],
            },
          ],
          onError: [
            {
              actions: "assignGetUsersError",
              target: "#usersState.error",
            },
          ],
        },
        tags: "loading",
      },
      ready: {
        on: {
          GET_USERS: "gettingUsers",
        },
      },
      error: {
        on: {
          GET_USERS: "gettingUsers",
        },
      },
    },
  },
  {
    services: {
      getUsers: API.getUsers,
    },
    actions: {
      assignUsers: assign({
        users: (_, event) => event.data.page,
        pager: (_, event) => event.data.pager,
      }),
      assignGetUsersError: assign({
        getUsersError: (_, event) => event.data,
      }),
      clearGetUsersError: assign((context: UsersContext) => ({
        ...context,
        getUsersError: undefined,
      })),
    },
  },
 )
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,7 +16,7 @@ import { SettingsPage } from "./pages/settings"
		import { TemplatesPage } from "./pages/templates"
		import { TemplatePage } from "./pages/templates/[organization]/[template]"
		import { CreateWorkspacePage } from "./pages/templates/[organization]/[template]/create"
		import { UsersPage } from "./pages/users"
		import { UsersPage } from "./pages/UsersPage/UsersPage"
		import { WorkspacePage } from "./pages/workspaces/[workspace]"

		export const AppRouter: React.FC = () => (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import axios, { AxiosRequestHeaders } from "axios"
		import { mutate } from "swr"
		import { MockPager, MockUser, MockUser2 } from "../test_helpers"
		import * as Types from "./types"

		const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
Expand DownExpand Up		@@ -69,6 +70,15 @@ export const getApiKey = async (): Promise<Types.APIKeyResponse> => {
		return response.data
		}

		export const getUsers = async (): Promise<Types.PagedUsers> => {
		// const response = await axios.get<Types.UserResponse[]>("/api/v2/users")
		// return response.data
		return Promise.resolve({
		page: [MockUser, MockUser2],
		pager: MockPager,
		})
		}
presleyp marked this conversation as resolved. Show resolvedHide resolved

		export const getBuildInfo = async (): Promise<Types.BuildInfoResponse> => {
		const response = await axios.get("/api/v2/buildinfo")
		return response.data
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,6 +79,15 @@ export interface UserAgent {
		readonly os: string
		}

		export interface Pager {
		total: number
		}

		export interface PagedUsers {
		page: UserResponse[]
		pager: Pager
		}

		export interface WorkspaceAutostartRequest {
		schedule: string
		}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,17 @@
		import{ComponentMeta,Story}from"@storybook/react"
		importReactfrom"react"
		import{ErrorSummary,ErrorSummaryProps}from"."

		exportdefault{
		title:"components/ErrorSummary",
		component:ErrorSummary,
		}asComponentMeta<typeofErrorSummary>

		constTemplate:Story<ErrorSummaryProps>=(args)=><ErrorSummary{...args}/>

		exportconstWithError=Template.bind({})
		WithError.args={
		error:newError("Something went wrong!"),
		}

		exportconstWithUndefined=Template.bind({})
greyscaled marked this conversation as resolved. Show resolvedHide resolved
Original file line number	Diff line number	Diff line change
		@@ -1,15 +1,19 @@
		import React from "react"

		const Language = {
		unknownErrorMessage: "Unknown error",
		}

		export interface ErrorSummaryProps {
		error: Error \|undefined
		error: Error \|unknown
		}

		export const ErrorSummary: React.FC<ErrorSummaryProps> = ({ error }) => {
		// TODO: More interesting error page

		if (typeof error === "undefined") {
		return <div>{"Unknown error"}</div>
		if (!(error instanceof Error)) {
presleyp marked this conversation as resolved. Show resolvedHide resolved
		return <div>{Language.unknownErrorMessage}</div>
		} else {
		return <div>{error.toString()}</div>
		}

		return <div>{error.toString()}</div>
		}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,21 @@
		import { ComponentMeta, Story } from "@storybook/react"
		import React from "react"
		import { MockUser, MockUser2 } from "../../test_helpers"
		import { UsersTable, UsersTableProps } from "./UsersTable"

		export default {
		title: "Components/UsersTable",
		component: UsersTable,
		} as ComponentMeta<typeof UsersTable>

		const Template: Story<UsersTableProps> = (args) => <UsersTable {...args} />

		export const Example = Template.bind({})
		Example.args = {
		users: [MockUser, MockUser2],
		}
presleyp marked this conversation as resolved. Show resolvedHide resolved

		export const Empty = Template.bind({})
		Empty.args = {
		users: [],
		}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,32 @@
		import React from "react"
		import { UserResponse } from "../../api/types"
		import { Column, Table } from "../../components/Table"
		import { EmptyState } from "../EmptyState"
		import { UserCell } from "../Table/Cells/UserCell"

		const Language = {
		pageTitle: "Users",
		usersTitle: "All users",
		emptyMessage: "No users found",
		usernameLabel: "User",
		}

		const emptyState = <EmptyState message={Language.emptyMessage} />

		const columns: Column<UserResponse>[] = [
		{
		key: "username",
		name: Language.usernameLabel,
		renderer: (field, data) => {
		return <UserCell Avatar={{ username: data.username }} primaryText={data.username} caption={data.email} />
		},
		},
		]

		export interface UsersTableProps {
		users: UserResponse[]
		}

		export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {
		return <Table columns={columns} data={users} title={Language.usersTitle} emptyState={emptyState} />
		}
presleyp marked this conversation as resolved. Show resolvedHide resolved
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,18 @@
		import { screen } from "@testing-library/react"
		import React from "react"
		import { MockPager, render } from "../../test_helpers"
		import { UsersPage } from "./UsersPage"
		import { Language } from "./UsersPageView"

		describe("Users Page", () => {
		it("has a header with the total number of users", async () => {
		render(<UsersPage />)
		const total = await screen.findByText(/\d+ total/)
		expect(total.innerHTML).toEqual(Language.pageSubtitle(MockPager))
		})
		it("shows users", async () => {
		render(<UsersPage />)
		const users = await screen.findAllByText(/.*@coder.com/)
		expect(users.length).toEqual(2)
presleyp marked this conversation as resolved. Show resolvedHide resolved
		})
		})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,17 @@
		import { useActor } from "@xstate/react"
		import React, { useContext } from "react"
		import { ErrorSummary } from "../../components/ErrorSummary"
		import { XServiceContext } from "../../xServices/StateContext"
		import { UsersPageView } from "./UsersPageView"

		export const UsersPage: React.FC = () => {
presleyp marked this conversation as resolved. Show resolvedHide resolved
		const xServices = useContext(XServiceContext)
		const [usersState] = useActor(xServices.usersXService)
		const { users, pager, getUsersError } = usersState.context

		if (usersState.matches("error")) {
		return <ErrorSummary error={getUsersError} />
		} else {
		return <UsersPageView users={users} pager={pager} />
		}
		}
presleyp marked this conversation as resolved. Show resolvedHide resolved
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,32 @@
		import { makeStyles } from "@material-ui/core/styles"
		import React from "react"
		import { Pager, UserResponse } from "../../api/types"
		import { Header } from "../../components/Header"
		import { UsersTable } from "../../components/UsersTable/UsersTable"

		export const Language = {
		pageTitle: "Users",
		pageSubtitle: (pager: Pager \| undefined): string => (pager ? `${pager.total} total` : ""),
		}

		export interface UsersPageViewProps {
		users: UserResponse[]
		pager?: Pager
		}

		export const UsersPageView: React.FC<UsersPageViewProps> = ({ users, pager }) => {
		const styles = useStyles()
		return (
		<div className={styles.flexColumn}>
		<Header title={Language.pageTitle} subTitle={Language.pageSubtitle(pager)} />
		<UsersTable users={users} />
		</div>
		)
		}

		const useStyles = makeStyles(() => ({
		flexColumn: {
		display: "flex",
		flexDirection: "column",
		},
		}))