Skip to content

Commit 26a920a

Browse files
presleyppresleyp
authored
chore: do less calculation on users page (coder#4801)
* Do less calculation on users page * Handle missing usernames
1 parent 29dc5f6 commit 26a920a

File tree

2 files changed

+106
-51
lines changed

2 files changed

+106
-51
lines changed

‎site/src/pages/UsersPage/UsersPage.tsx

Lines changed: 68 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useActor, useMachine } from "@xstate/react"
2+
import { User } from "api/typesGenerated"
23
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog"
34
import { getPaginationContext } from "components/PaginationWidget/utils"
45
import { usePermissions } from "hooks/usePermissions"
@@ -22,6 +23,9 @@ export const Language = {
2223
activateDialogMessagePrefix: "Do you want to activate the user",
2324
}
2425

26+
const getSelectedUser = (id: string, users?: User[]) =>
27+
users?.find((u) => u.id === id)
28+
2529
export const UsersPage: FC<{ children?: ReactNode }> = () => {
2630
const xServices = useContext(XServiceContext)
2731
const navigate = useNavigate()
@@ -40,18 +44,14 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
4044
const {
4145
users,
4246
getUsersError,
43-
userIdToDelete,
44-
userIdToSuspend,
45-
userIdToActivate,
47+
usernameToDelete,
48+
usernameToSuspend,
49+
usernameToActivate,
4650
userIdToResetPassword,
4751
newUserPassword,
4852
paginationRef,
4953
} = usersState.context
5054

51-
const userToBeSuspended = users?.find((u) => u.id === userIdToSuspend)
52-
const userToBeDeleted = users?.find((u) => u.id === userIdToDelete)
53-
const userToBeActivated = users?.find((u) => u.id === userIdToActivate)
54-
const userToResetPassword = users?.find((u) => u.id === userIdToResetPassword)
5555
const { updateUsers: canEditUsers } = usePermissions()
5656
const [rolesState, rolesSend] = useActor(xServices.siteRolesXService)
5757
const { roles } = rolesState.context
@@ -88,13 +88,25 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
8888
)
8989
}}
9090
onDeleteUser={(user) => {
91-
usersSend({ type: "DELETE_USER", userId: user.id })
91+
usersSend({
92+
type: "DELETE_USER",
93+
userId: user.id,
94+
username: user.username,
95+
})
9296
}}
9397
onSuspendUser={(user) => {
94-
usersSend({ type: "SUSPEND_USER", userId: user.id })
98+
usersSend({
99+
type: "SUSPEND_USER",
100+
userId: user.id,
101+
username: user.username,
102+
})
95103
}}
96104
onActivateUser={(user) => {
97-
usersSend({ type: "ACTIVATE_USER", userId: user.id })
105+
usersSend({
106+
type: "ACTIVATE_USER",
107+
userId: user.id,
108+
username: user.username,
109+
})
98110
}}
99111
onResetUserPassword={(user) => {
100112
usersSend({ type: "RESET_USER_PASSWORD", userId: user.id })
@@ -117,25 +129,29 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
117129
paginationRef={paginationRef}
118130
/>
119131

120-
{userToBeDeleted && (
121-
<DeleteDialog
122-
isOpen={usersState.matches("confirmUserDeletion")}
123-
confirmLoading={usersState.matches("deletingUser")}
124-
name={userToBeDeleted.username}
125-
entity="user"
126-
onConfirm={() => {
127-
usersSend("CONFIRM_USER_DELETE")
128-
}}
129-
onCancel={() => {
130-
usersSend("CANCEL_USER_DELETE")
131-
}}
132-
/>
133-
)}
132+
<DeleteDialog
133+
isOpen={
134+
usersState.matches("confirmUserDeletion") ||
135+
usersState.matches("deletingUser")
136+
}
137+
confirmLoading={usersState.matches("deletingUser")}
138+
name={usernameToDelete ?? ""}
139+
entity="user"
140+
onConfirm={() => {
141+
usersSend("CONFIRM_USER_DELETE")
142+
}}
143+
onCancel={() => {
144+
usersSend("CANCEL_USER_DELETE")
145+
}}
146+
/>
134147

135148
<ConfirmDialog
136149
type="delete"
137150
hideCancel={false}
138-
open={usersState.matches("confirmUserSuspension")}
151+
open={
152+
usersState.matches("confirmUserSuspension") ||
153+
usersState.matches("suspendingUser")
154+
}
139155
confirmLoading={usersState.matches("suspendingUser")}
140156
title={Language.suspendDialogTitle}
141157
confirmText={Language.suspendDialogAction}
@@ -147,16 +163,20 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
147163
}}
148164
description={
149165
<>
150-
{Language.suspendDialogMessagePrefix}{" "}
151-
<strong>{userToBeSuspended?.username}</strong>?
166+
{Language.suspendDialogMessagePrefix}
167+
{usernameToSuspend && " "}
168+
<strong>{usernameToSuspend ?? ""}</strong>?
152169
</>
153170
}
154171
/>
155172

156173
<ConfirmDialog
157174
type="success"
158175
hideCancel={false}
159-
open={usersState.matches("confirmUserActivation")}
176+
open={
177+
usersState.matches("confirmUserActivation") ||
178+
usersState.matches("activatingUser")
179+
}
160180
confirmLoading={usersState.matches("activatingUser")}
161181
title={Language.activateDialogTitle}
162182
confirmText={Language.activateDialogAction}
@@ -168,24 +188,30 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
168188
}}
169189
description={
170190
<>
171-
{Language.activateDialogMessagePrefix}{" "}
172-
<strong>{userToBeActivated?.username}</strong>?
191+
{Language.activateDialogMessagePrefix}
192+
{usernameToActivate && " "}
193+
<strong>{usernameToActivate ?? ""}</strong>?
173194
</>
174195
}
175196
/>
176197

177-
<ResetPasswordDialog
178-
loading={usersState.matches("resettingUserPassword")}
179-
user={userToResetPassword}
180-
newPassword={newUserPassword}
181-
open={usersState.matches("confirmUserPasswordReset")}
182-
onClose={() => {
183-
usersSend("CANCEL_USER_PASSWORD_RESET")
184-
}}
185-
onConfirm={() => {
186-
usersSend("CONFIRM_USER_PASSWORD_RESET")
187-
}}
188-
/>
198+
{userIdToResetPassword && (
199+
<ResetPasswordDialog
200+
open={
201+
usersState.matches("confirmUserPasswordReset") ||
202+
usersState.matches("resettingUserPassword")
203+
}
204+
loading={usersState.matches("resettingUserPassword")}
205+
user={getSelectedUser(userIdToResetPassword, users)}
206+
newPassword={newUserPassword}
207+
onClose={() => {
208+
usersSend("CANCEL_USER_PASSWORD_RESET")
209+
}}
210+
onConfirm={() => {
211+
usersSend("CONFIRM_USER_PASSWORD_RESET")
212+
}}
213+
/>
214+
)}
189215
</>
190216
)
191217
}

‎site/src/xServices/users/usersXService.ts

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,15 @@ export interface UsersContext {
3838
getUsersError?: Error | unknown
3939
// Suspend user
4040
userIdToSuspend?: TypesGen.User["id"]
41+
usernameToSuspend?: TypesGen.User["username"]
4142
suspendUserError?: Error | unknown
4243
// Delete user
4344
userIdToDelete?: TypesGen.User["id"]
45+
usernameToDelete?: TypesGen.User["username"]
4446
deleteUserError?: Error | unknown
4547
// Activate user
4648
userIdToActivate?: TypesGen.User["id"]
49+
usernameToActivate?: TypesGen.User["username"]
4750
activateUserError?: Error | unknown
4851
// Reset user password
4952
userIdToResetPassword?: TypesGen.User["id"]
@@ -59,15 +62,27 @@ export interface UsersContext {
5962
export type UsersEvent =
6063
| { type: "GET_USERS"; query?: string }
6164
// Suspend events
62-
| { type: "SUSPEND_USER"; userId: TypesGen.User["id"] }
65+
| {
66+
type: "SUSPEND_USER"
67+
userId: TypesGen.User["id"]
68+
username: TypesGen.User["username"]
69+
}
6370
| { type: "CONFIRM_USER_SUSPENSION" }
6471
| { type: "CANCEL_USER_SUSPENSION" }
6572
// Delete events
66-
| { type: "DELETE_USER"; userId: TypesGen.User["id"] }
73+
| {
74+
type: "DELETE_USER"
75+
userId: TypesGen.User["id"]
76+
username: TypesGen.User["username"]
77+
}
6778
| { type: "CONFIRM_USER_DELETE" }
6879
| { type: "CANCEL_USER_DELETE" }
6980
// Activate events
70-
| { type: "ACTIVATE_USER"; userId: TypesGen.User["id"] }
81+
| {
82+
type: "ACTIVATE_USER"
83+
userId: TypesGen.User["id"]
84+
username: TypesGen.User["username"]
85+
}
7186
| { type: "CONFIRM_USER_ACTIVATION" }
7287
| { type: "CANCEL_USER_ACTIVATION" }
7388
// Reset password events
@@ -152,18 +167,19 @@ export const usersMachine =
152167
tags: "loading",
153168
},
154169
idle: {
170+
entry: "clearSelectedUser",
155171
on: {
156172
SUSPEND_USER: {
157173
target: "confirmUserSuspension",
158-
actions: "assignUserIdToSuspend",
174+
actions: "assignUserToSuspend",
159175
},
160176
DELETE_USER: {
161177
target: "confirmUserDeletion",
162-
actions: "assignUserIdToDelete",
178+
actions: "assignUserToDelete",
163179
},
164180
ACTIVATE_USER: {
165181
target: "confirmUserActivation",
166-
actions: "assignUserIdToActivate",
182+
actions: "assignUserToActivate",
167183
},
168184
RESET_USER_PASSWORD: {
169185
target: "confirmUserPasswordReset",
@@ -391,6 +407,16 @@ export const usersMachine =
391407
},
392408

393409
actions: {
410+
clearSelectedUser: assign({
411+
userIdToSuspend: (_) => undefined,
412+
usernameToSuspend: (_) => undefined,
413+
userIdToDelete: (_) => undefined,
414+
usernameToDelete: (_) => undefined,
415+
userIdToActivate: (_) => undefined,
416+
usernameToActivate: (_) => undefined,
417+
userIdToResetPassword: (_) => undefined,
418+
userIdToUpdateRoles: (_) => undefined,
419+
}),
394420
assignUsers: assign({
395421
users: (_, event) => event.data,
396422
}),
@@ -400,14 +426,17 @@ export const usersMachine =
400426
assignGetUsersError: assign({
401427
getUsersError: (_, event) => event.data,
402428
}),
403-
assignUserIdToSuspend: assign({
429+
assignUserToSuspend: assign({
404430
userIdToSuspend: (_, event) => event.userId,
431+
usernameToSuspend: (_, event) => event.username,
405432
}),
406-
assignUserIdToDelete: assign({
433+
assignUserToDelete: assign({
407434
userIdToDelete: (_, event) => event.userId,
435+
usernameToDelete: (_, event) => event.username,
408436
}),
409-
assignUserIdToActivate: assign({
437+
assignUserToActivate: assign({
410438
userIdToActivate: (_, event) => event.userId,
439+
usernameToActivate: (_, event) => event.username,
411440
}),
412441
assignUserIdToResetPassword: assign({
413442
userIdToResetPassword: (_, event) => event.userId,

0 commit comments

Comments
 (0)