@@ -8,7 +8,6 @@ import TableContainer from "@mui/material/TableContainer";
8
8
import TableHead from "@mui/material/TableHead" ;
9
9
import TableRow from "@mui/material/TableRow" ;
10
10
import { getErrorMessage } from "api/errors" ;
11
- import type { GroupsByUserId } from "api/queries/groups" ;
12
11
import type {
13
12
Group ,
14
13
Organization ,
@@ -18,7 +17,6 @@ import type {
18
17
} from "api/typesGenerated" ;
19
18
import { ErrorAlert } from "components/Alert/ErrorAlert" ;
20
19
import { AvatarData } from "components/AvatarData/AvatarData" ;
21
- import { Breadcrumbs , Crumb } from "components/Breadcrumbs/Breadcrumbs" ;
22
20
import { displayError , displaySuccess } from "components/GlobalSnackbar/utils" ;
23
21
import {
24
22
MoreMenu ,
@@ -30,9 +28,11 @@ import {
30
28
import { Stack } from "components/Stack/Stack" ;
31
29
import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete" ;
32
30
import { UserAvatar } from "components/UserAvatar/UserAvatar" ;
31
+ import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell" ;
33
32
import { type FC , useState } from "react" ;
34
33
import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip" ;
35
34
import { UserRoleCell } from "./UserTable/UserRoleCell" ;
35
+ import { Breadcrumbs , Crumb } from "components/Breadcrumbs/Breadcrumbs" ;
36
36
37
37
interface OrganizationMembersPageViewProps {
38
38
allAvailableRoles : readonly SlimRole [ ] | undefined ;
@@ -43,7 +43,6 @@ interface OrganizationMembersPageViewProps {
43
43
organization : Organization ;
44
44
me : User ;
45
45
members : Array < OrganizationMemberTableEntry > | undefined ;
46
- groupsByUserId : GroupsByUserId | undefined ;
47
46
addMember : ( user : User ) => Promise < void > ;
48
47
removeMember : ( member : OrganizationMemberWithUserData ) => void ;
49
48
updateMemberRoles : (
@@ -72,7 +71,7 @@ export const OrganizationMembersPageView: FC<
72
71
updateMemberRoles,
73
72
} ) => {
74
73
return (
75
- < Stack >
74
+ < div >
76
75
< Breadcrumbs >
77
76
< Crumb > Organizations</ Crumb >
78
77
< Crumb href = { `/organizations/${ organization } ` } >
@@ -82,98 +81,94 @@ export const OrganizationMembersPageView: FC<
82
81
Members
83
82
</ Crumb >
84
83
</ Breadcrumbs >
84
+ < Stack >
85
+ { Boolean ( error ) && < ErrorAlert error = { error } /> }
85
86
86
- { Boolean ( error ) && < ErrorAlert error = { error } /> }
87
-
88
- { canEditMembers && (
89
- < AddOrganizationMember
90
- isLoading = { isAddingMember }
91
- onSubmit = { addMember }
92
- />
93
- ) }
87
+ { canEditMembers && (
88
+ < AddOrganizationMember
89
+ isLoading = { isAddingMember }
90
+ onSubmit = { addMember }
91
+ />
92
+ ) }
94
93
95
- < TableContainer >
96
- < Table >
97
- < TableHead >
98
- < TableRow >
99
- < TableCell width = "50%" > User</ TableCell >
100
- < TableCell width = "49%" >
101
- < Stack direction = "row" spacing = { 1 } alignItems = "center" >
102
- < span > Roles</ span >
103
- < TableColumnHelpTooltip variant = "roles" />
104
- </ Stack >
105
- </ TableCell >
106
- < TableCell width = "1%" > </ TableCell >
107
- </ TableRow >
108
- </ TableHead >
109
- < TableBody >
110
- { members ?. map ( ( member ) => (
111
- < TableRow key = { member . user_id } >
112
- < TableCell >
113
- < AvatarData
114
- avatar = {
115
- < UserAvatar
116
- username = { member . username }
117
- avatarURL = { member . avatar_url }
118
- />
119
- }
120
- title = { member . name || member . username }
121
- subtitle = { member . email }
122
- />
94
+ < TableContainer >
95
+ < Table >
96
+ < TableHead >
97
+ < TableRow >
98
+ < TableCell width = "33%" > User</ TableCell >
99
+ < TableCell width = "33%" >
100
+ < Stack direction = "row" spacing = { 1 } alignItems = "center" >
101
+ < span > Roles</ span >
102
+ < TableColumnHelpTooltip variant = "roles" />
103
+ </ Stack >
123
104
</ TableCell >
124
- < UserRoleCell
125
- inheritedRoles = { member . global_roles }
126
- roles = { member . roles }
127
- allAvailableRoles = { allAvailableRoles }
128
- oidcRoleSyncEnabled = { false }
129
- isLoading = { isUpdatingMemberRoles }
130
- canEditUsers = { canEditMembers }
131
- onEditRoles = { async ( roles ) => {
132
- try {
133
- await updateMemberRoles ( member , roles ) ;
134
- displaySuccess ( "Roles updated successfully." ) ;
135
- } catch ( error ) {
136
- displayError (
137
- getErrorMessage ( error , "Failed to update roles." ) ,
138
- ) ;
139
- }
140
- } }
141
- />
142
- < TableCell >
143
- { member . user_id !== me . id && canEditMembers && (
144
- < MoreMenu >
145
- < MoreMenuTrigger >
146
- < ThreeDotsButton />
147
- </ MoreMenuTrigger >
148
- < MoreMenuContent >
149
- < MoreMenuItem
150
- danger
151
- onClick = { async ( ) => {
152
- try {
153
- await removeMember ( member ) ;
154
- displaySuccess ( "Member removed successfully." ) ;
155
- } catch ( error ) {
156
- displayError (
157
- getErrorMessage (
158
- error ,
159
- "Failed to remove member." ,
160
- ) ,
161
- ) ;
162
- }
163
- } }
164
- >
165
- Remove
166
- </ MoreMenuItem >
167
- </ MoreMenuContent >
168
- </ MoreMenu >
169
- ) }
105
+ < TableCell width = "33%" >
106
+ < Stack direction = "row" spacing = { 1 } alignItems = "center" >
107
+ < span > Groups</ span >
108
+ < TableColumnHelpTooltip variant = "groups" />
109
+ </ Stack >
170
110
</ TableCell >
111
+ < TableCell width = "1%" />
171
112
</ TableRow >
172
- ) ) }
173
- </ TableBody >
174
- </ Table >
175
- </ TableContainer >
176
- </ Stack >
113
+ </ TableHead >
114
+ < TableBody >
115
+ { members ?. map ( ( member ) => (
116
+ < TableRow key = { member . user_id } >
117
+ < TableCell >
118
+ < AvatarData
119
+ avatar = {
120
+ < UserAvatar
121
+ username = { member . username }
122
+ avatarURL = { member . avatar_url }
123
+ />
124
+ }
125
+ title = { member . name || member . username }
126
+ subtitle = { member . email }
127
+ />
128
+ </ TableCell >
129
+ < UserRoleCell
130
+ inheritedRoles = { member . global_roles }
131
+ roles = { member . roles }
132
+ allAvailableRoles = { allAvailableRoles }
133
+ oidcRoleSyncEnabled = { false }
134
+ isLoading = { isUpdatingMemberRoles }
135
+ canEditUsers = { canEditMembers }
136
+ onEditRoles = { async ( roles ) => {
137
+ try {
138
+ await updateMemberRoles ( member , roles ) ;
139
+ displaySuccess ( "Roles updated successfully." ) ;
140
+ } catch ( error ) {
141
+ displayError (
142
+ getErrorMessage ( error , "Failed to update roles." ) ,
143
+ ) ;
144
+ }
145
+ } }
146
+ />
147
+ < UserGroupsCell userGroups = { member . groups } />
148
+ < TableCell >
149
+ { member . user_id !== me . id && canEditMembers && (
150
+ < MoreMenu >
151
+ < MoreMenuTrigger >
152
+ < ThreeDotsButton />
153
+ </ MoreMenuTrigger >
154
+ < MoreMenuContent >
155
+ < MoreMenuItem
156
+ danger
157
+ onClick = { ( ) => removeMember ( member ) }
158
+ >
159
+ Remove
160
+ </ MoreMenuItem >
161
+ </ MoreMenuContent >
162
+ </ MoreMenu >
163
+ ) }
164
+ </ TableCell >
165
+ </ TableRow >
166
+ ) ) }
167
+ </ TableBody >
168
+ </ Table >
169
+ </ TableContainer >
170
+ </ Stack >
171
+ </ div >
177
172
) ;
178
173
} ;
179
174
0 commit comments