Skip to content

refactor: Improve the load state for the list pages #1428

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
May 13, 2022
Merged

refactor: Improve the load state for the list pages #1428

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4cef295
Improve loading for Users
BrunoQuaresma May 12, 2022
c0824d5
Refactor templates table
BrunoQuaresma May 12, 2022
e1e6d9d
Add total label
BrunoQuaresma May 12, 2022
40afc47
Improve empty state
BrunoQuaresma May 13, 2022
c76d68c
Refactor template page to use MUI table
BrunoQuaresma May 13, 2022
6b37868
Add templates table
BrunoQuaresma May 13, 2022
b3bdc36
Add workspaces table
BrunoQuaresma May 13, 2022
8524f1f
Add loading states on storybook
BrunoQuaresma May 13, 2022
036d18f
Merge branch 'main' of github.com:coder/coder into bq/refactor-full-p…
BrunoQuaresma May 13, 2022
f52bb68
Fix EmptyState tests
BrunoQuaresma May 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Improve loading for Users
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed May 12, 2022
commit 4cef2953cdb559a8c66fa29cff204ab6bc7826e0
3 changes: 2 additions & 1 deletion site/src/components/Loader/FullScreenLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import CircularProgress from "@material-ui/core/CircularProgress"
import { makeStyles } from "@material-ui/core/styles"
import React from "react"

export const useStyles = makeStyles(() => ({
export const useStyles = makeStyles((theme) => ({
root: {
position: "absolute",
top: "0",
Expand All @@ -12,6 +12,7 @@ export const useStyles = makeStyles(() => ({
display: "flex",
justifyContent: "center",
alignItems: "center",
background: theme.palette.background.default,
},
}))

Expand Down
24 changes: 24 additions & 0 deletions site/src/components/TableLoader/TableLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import CircularProgress from "@material-ui/core/CircularProgress"
import { makeStyles } from "@material-ui/core/styles"
import TableCell from "@material-ui/core/TableCell"
import TableRow from "@material-ui/core/TableRow"
import React from "react"

export const TableLoader: React.FC = () => {
const styles = useStyles()

return (
<TableRow>
<TableCell colSpan={999} className={styles.cell}>
<CircularProgress size={30} />
</TableCell>
</TableRow>
)
}

const useStyles = makeStyles((theme) => ({
cell: {
textAlign: "center",
height: theme.spacing(20),
},
}))
74 changes: 40 additions & 34 deletions site/src/components/UsersTable/UsersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as TypesGen from "../../api/typesGenerated"
import { EmptyState } from "../EmptyState/EmptyState"
import { RoleSelect } from "../RoleSelect/RoleSelect"
import { TableHeaderRow } from "../TableHeaders/TableHeaders"
import { TableLoader } from "../TableLoader/TableLoader"
import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
import { TableTitle } from "../TableTitle/TableTitle"
import { UserCell } from "../UserCell/UserCell"
Expand All @@ -24,12 +25,12 @@ export const Language = {
}

export interface UsersTableProps {
users: TypesGen.User[]
users?: TypesGen.User[]
roles?: TypesGen.Role[]
isUpdatingUserRoles?: boolean
onSuspendUser: (user: TypesGen.User) => void
onResetUserPassword: (user: TypesGen.User) => void
onUpdateUserRoles: (user: TypesGen.User, roles: TypesGen.Role["name"][]) => void
roles: TypesGen.Role[]
isUpdatingUserRoles?: boolean
}

export const UsersTable: React.FC<UsersTableProps> = ({
Expand All @@ -40,6 +41,8 @@ export const UsersTable: React.FC<UsersTableProps> = ({
onUpdateUserRoles,
isUpdatingUserRoles,
}) => {
const isLoading = !users || !roles

return (
<Table>
<TableHead>
Expand All @@ -52,38 +55,41 @@ export const UsersTable: React.FC<UsersTableProps> = ({
</TableHeaderRow>
</TableHead>
<TableBody>
{users.map((u) => (
<TableRow key={u.id}>
<TableCell>
<UserCell Avatar={{ username: u.username }} primaryText={u.username} caption={u.email} />{" "}
</TableCell>
<TableCell>
<RoleSelect
roles={roles}
selectedRoles={u.roles}
loading={isUpdatingUserRoles}
onChange={(roles) => onUpdateUserRoles(u, roles)}
/>
</TableCell>
<TableCell>
<TableRowMenu
data={u}
menuItems={[
{
label: Language.suspendMenuItem,
onClick: onSuspendUser,
},
{
label: Language.resetPasswordMenuItem,
onClick: onResetUserPassword,
},
]}
/>
</TableCell>
</TableRow>
))}
{isLoading && <TableLoader />}
{users &&
roles &&
users.map((u) => (
<TableRow key={u.id}>
<TableCell>
<UserCell Avatar={{ username: u.username }} primaryText={u.username} caption={u.email} />{" "}
</TableCell>
<TableCell>
<RoleSelect
roles={roles}
selectedRoles={u.roles}
loading={isUpdatingUserRoles}
onChange={(roles) => onUpdateUserRoles(u, roles)}
/>
</TableCell>
<TableCell>
<TableRowMenu
data={u}
menuItems={[
{
label: Language.suspendMenuItem,
onClick: onSuspendUser,
},
{
label: Language.resetPasswordMenuItem,
onClick: onResetUserPassword,
},
]}
/>
</TableCell>
</TableRow>
))}

{users.length === 0 && (
{users && users.length === 0 && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe next time we're in here, we can break this file apart a bit.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure thing.

<TableRow>
<TableCell colSpan={999}>
<Box p={4}>
Expand Down
119 changes: 57 additions & 62 deletions site/src/pages/UsersPage/UsersPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useActor } from "@xstate/react"
import React, { useContext, useEffect } from "react"
import { useNavigate } from "react-router"
import { ConfirmDialog } from "../../components/ConfirmDialog/ConfirmDialog"
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
import { ResetPasswordDialog } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
import { XServiceContext } from "../../xServices/StateContext"
import { UsersPageView } from "./UsersPageView"
Expand Down Expand Up @@ -46,67 +45,63 @@ export const UsersPage: React.FC = () => {
usersSend("GET_USERS")
}, [usersSend])

if (!users || !roles) {
return <FullScreenLoader />
} else {
return (
<>
<UsersPageView
roles={roles}
users={users}
openUserCreationDialog={() => {
navigate("/users/create")
}}
onSuspendUser={(user) => {
usersSend({ type: "SUSPEND_USER", userId: user.id })
}}
onResetUserPassword={(user) => {
usersSend({ type: "RESET_USER_PASSWORD", userId: user.id })
}}
onUpdateUserRoles={(user, roles) => {
usersSend({
type: "UPDATE_USER_ROLES",
userId: user.id,
roles,
})
}}
error={getUsersError}
isUpdatingUserRoles={usersState.matches("updatingUserRoles")}
/>
return (
<>
<UsersPageView
roles={roles}
users={users}
openUserCreationDialog={() => {
navigate("/users/create")
}}
onSuspendUser={(user) => {
usersSend({ type: "SUSPEND_USER", userId: user.id })
}}
onResetUserPassword={(user) => {
usersSend({ type: "RESET_USER_PASSWORD", userId: user.id })
}}
onUpdateUserRoles={(user, roles) => {
usersSend({
type: "UPDATE_USER_ROLES",
userId: user.id,
roles,
})
}}
error={getUsersError}
isUpdatingUserRoles={usersState.matches("updatingUserRoles")}
/>

<ConfirmDialog
type="delete"
hideCancel={false}
open={usersState.matches("confirmUserSuspension")}
confirmLoading={usersState.matches("suspendingUser")}
title={Language.suspendDialogTitle}
confirmText={Language.suspendDialogAction}
onConfirm={() => {
usersSend("CONFIRM_USER_SUSPENSION")
}}
onClose={() => {
usersSend("CANCEL_USER_SUSPENSION")
}}
description={
<>
{Language.suspendDialogMessagePrefix} <strong>{userToBeSuspended?.username}</strong>?
</>
}
/>
<ConfirmDialog
type="delete"
hideCancel={false}
open={usersState.matches("confirmUserSuspension")}
confirmLoading={usersState.matches("suspendingUser")}
title={Language.suspendDialogTitle}
confirmText={Language.suspendDialogAction}
onConfirm={() => {
usersSend("CONFIRM_USER_SUSPENSION")
}}
onClose={() => {
usersSend("CANCEL_USER_SUSPENSION")
}}
description={
<>
{Language.suspendDialogMessagePrefix} <strong>{userToBeSuspended?.username}</strong>?
</>
}
/>

<ResetPasswordDialog
loading={usersState.matches("resettingUserPassword")}
user={userToResetPassword}
newPassword={newUserPassword}
open={usersState.matches("confirmUserPasswordReset")}
onClose={() => {
usersSend("CANCEL_USER_PASSWORD_RESET")
}}
onConfirm={() => {
usersSend("CONFIRM_USER_PASSWORD_RESET")
}}
/>
</>
)
}
<ResetPasswordDialog
loading={usersState.matches("resettingUserPassword")}
user={userToResetPassword}
newPassword={newUserPassword}
open={usersState.matches("confirmUserPasswordReset")}
onClose={() => {
usersSend("CANCEL_USER_PASSWORD_RESET")
}}
onConfirm={() => {
usersSend("CONFIRM_USER_PASSWORD_RESET")
}}
/>
</>
)
}
10 changes: 5 additions & 5 deletions site/src/pages/UsersPage/UsersPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export const Language = {
}

export interface UsersPageViewProps {
users: TypesGen.User[]
users?: TypesGen.User[]
roles?: TypesGen.Role[]
error?: unknown
isUpdatingUserRoles?: boolean
openUserCreationDialog: () => void
onSuspendUser: (user: TypesGen.User) => void
onResetUserPassword: (user: TypesGen.User) => void
onUpdateUserRoles: (user: TypesGen.User, roles: TypesGen.Role["name"][]) => void
roles: TypesGen.Role[]
error?: unknown
isUpdatingUserRoles?: boolean
}

export const UsersPageView: React.FC<UsersPageViewProps> = ({
Expand All @@ -41,10 +41,10 @@ export const UsersPageView: React.FC<UsersPageViewProps> = ({
) : (
<UsersTable
users={users}
roles={roles}
onSuspendUser={onSuspendUser}
onResetUserPassword={onResetUserPassword}
onUpdateUserRoles={onUpdateUserRoles}
roles={roles}
isUpdatingUserRoles={isUpdatingUserRoles}
/>
)}
Expand Down
3 changes: 0 additions & 3 deletions site/src/xServices/users/usersXService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,6 @@ export const usersMachine = createMachine(
},
id: "usersState",
initial: "idle",
context: {
users: [],
},
states: {
idle: {
on: {
Expand Down