Add UsersPageView

coder · presleyp · Apr 14, 2022 · Apr 11, 2022 · Apr 11, 2022 · Apr 11, 2022
commit ca729e90a6dbd9cbe7edb471d7fa119b8647cee9
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -1,17 +1,14 @@
-import { makeStyles } from "@material-ui/styles"
 import React from "react"
-import { Pager, UserResponse } from "../../api/types"
+import { UserResponse } from "../../api/types"
 import { Column, Table } from "../../components/Table"
 import { EmptyState } from "../EmptyState"
-import { Header } from "../Header"
 import { UserCell } from "../Table/Cells/UserCell"
 
 const Language = {
   pageTitle: "Users",
   usersTitle: "All users",
   emptyMessage: "No users found",
   usernameLabel: "User",
-  siteRoleLabel: "Site Role"
 }
 
 const emptyState = (
@@ -28,38 +25,19 @@ const columns: Column<UserResponse>[] = [
       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 }) => {
-  const styles = useStyles()
+export const UsersTable: React.FC<UsersTableProps> = ({ users }) => {
   return (
-    <div className={styles.flexColumn}>
-      <Header
-        title={Language.pageTitle}
-        subTitle={`${pager?.total} total`}
-      />
-      <Table
-        columns={columns}
-        data={users}
-        title={Language.usersTitle}
-        emptyState={emptyState}
-      />
-    </div>
+    <Table
+      columns={columns}
+      data={users}
+      title={Language.usersTitle}
+      emptyState={emptyState}
+    />
   )
 }
-
-const useStyles = makeStyles(() => ({
-  flexColumn: {
-    display: "flex",
-    flexDirection: "column"
-  }
-}))
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -3,6 +3,7 @@ import React, { useContext } from "react"
 import { ErrorSummary } from "../../components/ErrorSummary"
 import { UsersTable } from "../../components/UsersTable/UsersTable"
 import { XServiceContext } from "../../xServices/StateContext"
+import { UsersPageView } from "./UsersPageView"
 
 export const UsersPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
@@ -12,6 +13,6 @@ export const UsersPage: React.FC = () => {
   if (usersState.matches("error")) {
     return <ErrorSummary error={getUsersError} />
   } else {
-    return <UsersTable users={users} pager={pager} />
+    return <UsersPageView users={users} pager={pager} />
   }
 }
diff --git a/site/src/pages/UsersPage/UsersPageView.stories.tsx b/site/src/pages/UsersPage/UsersPageView.stories.tsx
@@ -0,0 +1,30 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { 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: {
+    total: 2,
+    after: "123",
+    before: "456",
+    limit: 10
+  }
+}
+export const Loading = Template.bind({})
+Loading.args = {
+  users: [
+  ]
+}
diff --git a/site/src/pages/UsersPage/UsersPageView.tsx b/site/src/pages/UsersPage/UsersPageView.tsx
@@ -0,0 +1,34 @@
+import { makeStyles } from "@material-ui/styles"
+import React from "react"
+import { UserResponse, Pager } from "../../api/types"
+import { Header } from "../../components/Header"
+import { UsersTable } from "../../components/UsersTable/UsersTable"
+
+const Language = {
+  pageTitle: "Users",
+}
+
+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={pager ? `${pager.total} total`: ''}
+      />
+      <UsersTable users={users} />
+    </div>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  flexColumn: {
+    display: "flex",
+    flexDirection: "column"
+  }
+}))