Start adding table

presleyp · presleyp · commit b45ddaf913e5 · 2022-04-12T02:57:46.000Z
diff --git a/site/src/api/types.ts b/site/src/api/types.ts
@@ -15,6 +15,7 @@ export interface UserResponse {
   readonly username: string
   readonly email: string
   readonly created_at: string
+  siteRole?: "Admin" | "Member"
 }
 
 /**
diff --git a/site/src/components/UsersTable/UsersTable.stories.tsx b/site/src/components/UsersTable/UsersTable.stories.tsx
@@ -0,0 +1,19 @@
+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
+  ]
+}
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -0,0 +1,48 @@
+import React from "react"
+import { Pager, UserResponse } from "../../api/types"
+import { Column, Table } from "../../components/Table"
+import { EmptyState } from "../EmptyState"
+import { UserCell } from "../Table/Cells/UserCell"
+
+const Language = {
+  usersTitle: "All users",
+  emptyMessage: "No users found",
+  usernameLabel: "User",
+  siteRoleLabel: "Site Role"
+}
+
+const emptyState = (
+  <EmptyState
+    message={Language.emptyMessage}
+  />
+)
+
+const columns: Column<UserResponse>[] = [
+  {
+    key: "email",
+    name: Language.usernameLabel,
+    renderer: (field, data) => {
+      return <UserCell Avatar={{ username: data.email }} primaryText={data.email} />
+    },
+  },
+  {
+    key: "siteRole",
+    name: Language.siteRoleLabel
+  }
+]
+
+export interface UsersTableProps {
+  users: UserResponse[]
+  pager?: Pager
+}
+
+export const UsersTable: React.FC<UsersTableProps> = ({ users, pager }) => {
+  return (
+    <Table
+      columns={columns}
+      data={users}
+      title={Language.usersTitle}
+      emptyState={emptyState}
+    />
+  )
+}
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -4,22 +4,14 @@ import { ErrorSummary } from "../../components/ErrorSummary"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 import { XServiceContext } from "../../xServices/StateContext"
 
-export type Role = "Admin" | "Member"
-
-export interface User {
-  username: string
-  email: string
-  siteRole: Role
-}
-
 export const UsersPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [usersState] = useActor(xServices.usersXService)
-  const { users, getUsersError } = usersState.context
+  const { users, pager, getUsersError } = usersState.context
 
   if (usersState.matches("error")) {
     return <ErrorSummary error={getUsersError} />
   } else {
-    return <UsersTable users={users} />
+    return <UsersTable users={users} pager={pager} />
   }
 }
diff --git a/site/src/test_helpers/entities.ts b/site/src/test_helpers/entities.ts
@@ -24,13 +24,15 @@ export const MockUser: UserResponse = {
   username: "TestUser",
   email: "test@coder.com",
   created_at: "",
+  siteRole: "Admin"
 }
 
 export const MockUser2: UserResponse = {
   id: "test-user-2",
   username: "TestUser2",
   email: "test2@coder.com",
   created_at: "",
+  siteRole: "Member"
 }
 
 export const MockPager: Pager = {

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ export interface UserResponse {`
`15`	`15`	`readonly username: string`
`16`	`16`	`readonly email: string`
`17`	`17`	`readonly created_at: string`
	`18`	`+ siteRole?: "Admin" \| "Member"`
`18`	`19`	`}`
`19`	`20`
`20`	`21`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,15 @@ export const MockUser: UserResponse = {`
`24`	`24`	`username: "TestUser",`
`25`	`25`	`email: "[email protected]",`
`26`	`26`	`created_at: "",`
	`27`	`+ siteRole: "Admin"`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`export const MockUser2: UserResponse = {`
`30`	`31`	`id: "test-user-2",`
`31`	`32`	`username: "TestUser2",`
`32`	`33`	`email: "[email protected]",`
`33`	`34`	`created_at: "",`
	`35`	`+ siteRole: "Member"`
`34`	`36`	`}`
`35`	`37`
`36`	`38`	`export const MockPager: Pager = {`