diff --git a/site/src/api/index.ts b/site/src/api/index.ts index aff8d5235c4be..fd773394f683b 100644 --- a/site/src/api/index.ts +++ b/site/src/api/index.ts @@ -1,6 +1,5 @@ import axios, { AxiosRequestHeaders } from "axios" import { mutate } from "swr" -import { MockPager, MockUser, MockUser2 } from "../testHelpers/entities" import * as Types from "./types" import * as TypesGen from "./typesGenerated" @@ -76,13 +75,9 @@ export const getApiKey = async (): Promise => { return response.data } -export const getUsers = async (): Promise => { - // const response = await axios.get("/api/v2/users") - // return response.data - return Promise.resolve({ - page: [MockUser, MockUser2], - pager: MockPager, - }) +export const getUsers = async (): Promise => { + const response = await axios.get("/api/v2/users?offset=0&limit=1000") + return response.data } export const createUser = async (user: Types.CreateUserRequest): Promise => { diff --git a/site/src/api/types.ts b/site/src/api/types.ts index 24467756cb8c9..a431b756f4917 100644 --- a/site/src/api/types.ts +++ b/site/src/api/types.ts @@ -88,15 +88,6 @@ export interface UserAgent { 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/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx index 9ae8898b46527..ff2c898f72dec 100644 --- a/site/src/pages/UsersPage/UsersPage.test.tsx +++ b/site/src/pages/UsersPage/UsersPage.test.tsx @@ -1,15 +1,9 @@ import { screen } from "@testing-library/react" import React from "react" -import { MockPager, render } from "../../testHelpers" +import { render } from "../../testHelpers" import { UsersPage } from "./UsersPage" -import { Language } from "./UsersPageView" describe("Users Page", () => { - it("has a header with the total number of users", async () => { - render() - const total = await screen.findByText(/\d+ total/) - expect(total.innerHTML).toEqual(Language.pageSubtitle(MockPager)) - }) it("shows users", async () => { render() const users = await screen.findAllByText(/.*@coder.com/) diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx index b54422d5bfa1e..f6c4df2cf2827 100644 --- a/site/src/pages/UsersPage/UsersPage.tsx +++ b/site/src/pages/UsersPage/UsersPage.tsx @@ -2,13 +2,14 @@ import { useActor } from "@xstate/react" import React, { useContext, useEffect } from "react" import { useNavigate } from "react-router" import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary" +import { FullScreenLoader } from "../../components/Loader/FullScreenLoader" import { XServiceContext } from "../../xServices/StateContext" import { UsersPageView } from "./UsersPageView" export const UsersPage: React.FC = () => { const xServices = useContext(XServiceContext) const [usersState, usersSend] = useActor(xServices.usersXService) - const { users, pager, getUsersError } = usersState.context + const { users, getUsersError } = usersState.context const navigate = useNavigate() /** @@ -20,11 +21,14 @@ export const UsersPage: React.FC = () => { if (usersState.matches("error")) { return + } + + if (!users) { + return } else { return ( { navigate("/users/create") }} diff --git a/site/src/pages/UsersPage/UsersPageView.stories.tsx b/site/src/pages/UsersPage/UsersPageView.stories.tsx index 6ec283ec6282b..fceaef07ce420 100644 --- a/site/src/pages/UsersPage/UsersPageView.stories.tsx +++ b/site/src/pages/UsersPage/UsersPageView.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, Story } from "@storybook/react" import React from "react" -import { MockPager, MockUser, MockUser2 } from "../../testHelpers" +import { MockUser, MockUser2 } from "../../testHelpers" import { UsersPageView, UsersPageViewProps } from "./UsersPageView" export default { @@ -13,7 +13,6 @@ const Template: Story = (args) => (pager ? `${pager.total} total` : ""), newUserButton: "New User", } export interface UsersPageViewProps { users: UserResponse[] - pager?: Pager openUserCreationDialog: () => void } -export const UsersPageView: React.FC = ({ users, pager, openUserCreationDialog }) => { +export const UsersPageView: React.FC = ({ users, openUserCreationDialog }) => { const styles = useStyles() return (
-
- +
+ + +
) } diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts index 3163ed24c094f..dca9b8d1fe674 100644 --- a/site/src/testHelpers/entities.ts +++ b/site/src/testHelpers/entities.ts @@ -1,7 +1,6 @@ import { BuildInfoResponse, Organization, - Pager, Provisioner, Template, UserAgent, @@ -38,10 +37,6 @@ export const MockUser2: UserResponse = { organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"], } -export const MockPager: Pager = { - total: 2, -} - export const MockOrganization: Organization = { id: "test-org", name: "Test Organization", diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts index a6b53714b9283..8774267a55057 100644 --- a/site/src/testHelpers/handlers.ts +++ b/site/src/testHelpers/handlers.ts @@ -22,7 +22,7 @@ export const handlers = [ // 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 })) + return res(ctx.status(200), ctx.json([M.MockUser, M.MockUser2])) }), rest.post("/api/v2/users", async (req, res, ctx) => { return res(ctx.status(200), ctx.json(M.MockUser)) diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts index a2763ff76c670..c870effb29c13 100644 --- a/site/src/xServices/users/usersXService.ts +++ b/site/src/xServices/users/usersXService.ts @@ -10,8 +10,7 @@ export const Language = { } export interface UsersContext { - users: Types.UserResponse[] - pager?: Types.Pager + users?: TypesGen.User[] getUsersError?: Error | unknown createUserError?: Error | unknown createUserFormErrors?: FieldErrors @@ -27,7 +26,7 @@ export const usersMachine = createMachine( events: {} as UsersEvent, services: {} as { getUsers: { - data: Types.PagedUsers + data: TypesGen.User[] } createUser: { data: TypesGen.User @@ -104,8 +103,7 @@ export const usersMachine = createMachine( }, actions: { assignUsers: assign({ - users: (_, event) => event.data.page, - pager: (_, event) => event.data.pager, + users: (_, event) => event.data, }), assignGetUsersError: assign({ getUsersError: (_, event) => event.data,