Skip to content

Commit a25dd55

Browse files
BrunoQuaresmaBrunoQuaresma
committed
refactor: Display member role when user has no role
1 parent b85de3e commit a25dd55

File tree

2 files changed

+79
-48
lines changed

2 files changed

+79
-48
lines changed

‎site/src/components/RoleSelect/RoleSelect.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const RoleSelect: FC<RoleSelectProps> = ({ roles, selectedRoles, loading,
4141

4242
return (
4343
<MenuItem key={r.name} value={r.name} disabled={loading}>
44-
<Checkbox color="primary" checked={isChecked} /> {r.display_name}
44+
<Checkbox size="small" color="primary" checked={isChecked} /> {r.display_name}
4545
</MenuItem>
4646
)
4747
})}

‎site/src/components/UsersTable/UsersTable.tsx

Lines changed: 78 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import Box from "@material-ui/core/Box"
2+
import { makeStyles } from "@material-ui/core/styles"
23
import Table from "@material-ui/core/Table"
34
import TableBody from "@material-ui/core/TableBody"
45
import TableCell from "@material-ui/core/TableCell"
56
import TableHead from "@material-ui/core/TableHead"
67
import TableRow from "@material-ui/core/TableRow"
78
import { FC } from "react"
89
import * as TypesGen from "../../api/typesGenerated"
10+
import { combineClasses } from "../../util/combineClasses"
911
import { AvatarData } from "../AvatarData/AvatarData"
1012
import { EmptyState } from "../EmptyState/EmptyState"
1113
import { RoleSelect } from "../RoleSelect/RoleSelect"
@@ -45,6 +47,8 @@ export const UsersTable: FC<UsersTableProps> = ({
4547
canEditUsers,
4648
isLoading,
4749
}) => {
50+
const styles = useStyles()
51+
4852
return (
4953
<Table>
5054
<TableHead>
@@ -60,55 +64,73 @@ export const UsersTable: FC<UsersTableProps> = ({
6064
{isLoading && <TableLoader />}
6165
{!isLoading &&
6266
users &&
63-
users.map((u) => (
64-
<TableRow key={u.id}>
65-
<TableCell>
66-
<AvatarData title={u.username} subtitle={u.email} />
67-
</TableCell>
68-
<TableCell>{u.status}</TableCell>
69-
<TableCell>
70-
{canEditUsers ? (
71-
<RoleSelect
72-
roles={roles ?? []}
73-
selectedRoles={u.roles}
74-
loading={isUpdatingUserRoles}
75-
onChange={(roles) => onUpdateUserRoles(u, roles)}
76-
/>
77-
) : (
78-
<>{u.roles.map((r) => r.display_name).join(", ")}</>
79-
)}
80-
</TableCell>
81-
{canEditUsers && (
67+
users.map((user) => {
68+
// When the user has no role, it is because they are a member
69+
const fallbackRoles: TypesGen.Role[] = [
70+
{
71+
name: "member",
72+
display_name: "Member",
73+
},
74+
]
75+
const userRoles = user.roles.length === 0 ? fallbackRoles : user.roles
76+
77+
return (
78+
<TableRow key={user.id}>
79+
<TableCell>
80+
<AvatarData title={user.username} subtitle={user.email} />
81+
</TableCell>
82+
<TableCell
83+
className={combineClasses([
84+
styles.status,
85+
user.status === "suspended" ? styles.suspended : undefined,
86+
])}
87+
>
88+
{user.status}
89+
</TableCell>
8290
<TableCell>
83-
<TableRowMenu
84-
data={u}
85-
menuItems={
86-
// Return either suspend or activate depending on status
87-
(u.status === "active"
88-
? [
89-
{
90-
label: Language.suspendMenuItem,
91-
onClick: onSuspendUser,
92-
},
93-
]
94-
: [
95-
// TODO: Uncomment this and add activate user functionality.
96-
// {
97-
// label: Language.activateMenuItem,
98-
// // eslint-disable-next-line @typescript-eslint/no-empty-function
99-
// onClick: function () {},
100-
// },
101-
]
102-
).concat({
103-
label: Language.resetPasswordMenuItem,
104-
onClick: onResetUserPassword,
105-
})
106-
}
107-
/>
91+
{canEditUsers ? (
92+
<RoleSelect
93+
roles={roles ?? []}
94+
selectedRoles={userRoles}
95+
loading={isUpdatingUserRoles}
96+
onChange={(roles) => onUpdateUserRoles(user, roles)}
97+
/>
98+
) : (
99+
<>{userRoles.map((role) => role.display_name).join(", ")}</>
100+
)}
108101
</TableCell>
109-
)}
110-
</TableRow>
111-
))}
102+
{canEditUsers && (
103+
<TableCell>
104+
<TableRowMenu
105+
data={user}
106+
menuItems={
107+
// Return either suspend or activate depending on status
108+
(user.status === "active"
109+
? [
110+
{
111+
label: Language.suspendMenuItem,
112+
onClick: onSuspendUser,
113+
},
114+
]
115+
: [
116+
// TODO: Uncomment this and add activate user functionality.
117+
// {
118+
// label: Language.activateMenuItem,
119+
// // eslint-disable-next-line @typescript-eslint/no-empty-function
120+
// onClick: function () {},
121+
// },
122+
]
123+
).concat({
124+
label: Language.resetPasswordMenuItem,
125+
onClick: onResetUserPassword,
126+
})
127+
}
128+
/>
129+
</TableCell>
130+
)}
131+
</TableRow>
132+
)
133+
})}
112134

113135
{users && users.length === 0 && (
114136
<TableRow>
@@ -123,3 +145,12 @@ export const UsersTable: FC<UsersTableProps> = ({
123145
</Table>
124146
)
125147
}
148+
149+
const useStyles = makeStyles((theme) => ({
150+
status: {
151+
textTransform: "capitalize",
152+
},
153+
suspended: {
154+
color: theme.palette.text.secondary,
155+
},
156+
}))

0 commit comments

Comments
 (0)