1- import {
2- groupsByUserId ,
3- groupsByUserIdInOrganization ,
4- } from "api/queries/groups" ;
1+ import type { Interpolation , Theme } from "@emotion/react" ;
2+ import { getErrorMessage } from "api/errors" ;
3+ import { groupsByUserIdInOrganization } from "api/queries/groups" ;
54import {
65addOrganizationMember ,
76organizationMembers ,
@@ -11,9 +10,12 @@ import {
1110} from "api/queries/organizations" ;
1211import { organizationRoles } from "api/queries/roles" ;
1312import type { OrganizationMemberWithUserData , User } from "api/typesGenerated" ;
13+ import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog" ;
14+ import { displayError , displaySuccess } from "components/GlobalSnackbar/utils" ;
1415import { Loader } from "components/Loader/Loader" ;
16+ import { Stack } from "components/Stack/Stack" ;
1517import { useAuthenticated } from "contexts/auth/RequireAuth" ;
16- import type { FC } from "react" ;
18+ import { type FC , useState } from "react" ;
1719import { useMutation , useQuery , useQueryClient } from "react-query" ;
1820import { useParams } from "react-router-dom" ;
1921import { useOrganizationSettings } from "./ManagementSettingsLayout" ;
@@ -52,45 +54,97 @@ const OrganizationMembersPage: FC = () => {
5254const organization = organizations ?. find ( ( o ) => o . name === organizationName ) ;
5355const permissionsQuery = useQuery ( organizationPermissions ( organization ?. id ) ) ;
5456
57+ const [ memberToDelete , setMemberToDelete ] =
58+ useState < OrganizationMemberWithUserData > ( ) ;
59+
5560const permissions = permissionsQuery . data ;
5661if ( ! permissions ) {
5762return < Loader /> ;
5863}
5964
6065return (
61- < OrganizationMembersPageView
62- allAvailableRoles = { organizationRolesQuery . data }
63- canEditMembers = { permissions . editMembers }
64- error = {
65- membersQuery . error ??
66- addMemberMutation . error ??
67- removeMemberMutation . error ??
68- updateMemberRolesMutation . error
69- }
70- isAddingMember = { addMemberMutation . isLoading }
71- isUpdatingMemberRoles = { updateMemberRolesMutation . isLoading }
72- me = { me }
73- members = { members }
74- groupsByUserId = { groupsByUserIdQuery . data }
75- addMember = { async ( user :User ) => {
76- await addMemberMutation . mutateAsync ( user . id ) ;
77- void membersQuery . refetch ( ) ;
78- } }
79- removeMember = { async ( member :OrganizationMemberWithUserData ) => {
80- await removeMemberMutation . mutateAsync ( member . user_id ) ;
81- void membersQuery . refetch ( ) ;
82- } }
83- updateMemberRoles = { async (
84- member :OrganizationMemberWithUserData ,
85- newRoles :string [ ] ,
86- ) => {
87- await updateMemberRolesMutation . mutateAsync ( {
88- userId :member . user_id ,
89- roles :newRoles ,
90- } ) ;
91- } }
92- />
66+ < >
67+ < OrganizationMembersPageView
68+ allAvailableRoles = { organizationRolesQuery . data }
69+ canEditMembers = { permissions . editMembers }
70+ error = {
71+ membersQuery . error ??
72+ addMemberMutation . error ??
73+ removeMemberMutation . error ??
74+ updateMemberRolesMutation . error
75+ }
76+ isAddingMember = { addMemberMutation . isLoading }
77+ isUpdatingMemberRoles = { updateMemberRolesMutation . isLoading }
78+ me = { me }
79+ members = { members }
80+ groupsByUserId = { groupsByUserIdQuery . data }
81+ addMember = { async ( user :User ) => {
82+ await addMemberMutation . mutateAsync ( user . id ) ;
83+ void membersQuery . refetch ( ) ;
84+ } }
85+ removeMember = { setMemberToDelete }
86+ updateMemberRoles = { async (
87+ member :OrganizationMemberWithUserData ,
88+ newRoles :string [ ] ,
89+ ) => {
90+ await updateMemberRolesMutation . mutateAsync ( {
91+ userId :member . user_id ,
92+ roles :newRoles ,
93+ } ) ;
94+ } }
95+ />
96+
97+ < ConfirmDialog
98+ type = "delete"
99+ open = { memberToDelete !== undefined }
100+ onClose = { ( ) => setMemberToDelete ( undefined ) }
101+ title = "Remove member"
102+ confirmText = "Remove"
103+ onConfirm = { async ( ) => {
104+ try {
105+ if ( memberToDelete ) {
106+ await removeMemberMutation . mutateAsync ( memberToDelete ?. user_id ) ;
107+ }
108+ setMemberToDelete ( undefined ) ;
109+ await membersQuery . refetch ( ) ;
110+ displaySuccess ( "User removed from organization successfully!" ) ;
111+ } catch ( error ) {
112+ setMemberToDelete ( undefined ) ;
113+ displayError (
114+ getErrorMessage ( error , "Failed to remove user from organization" ) ,
115+ ) ;
116+ } finally {
117+ setMemberToDelete ( undefined ) ;
118+ }
119+ } }
120+ description = {
121+ < Stack >
122+ < p >
123+ Removing this member will:
124+ < ul >
125+ < li > Remove the member from all groups in this organization</ li >
126+ < li > Remove all user role assignments</ li >
127+ < li >
128+ Orphan all the member's workspaces associated with this
129+ organization
130+ </ li >
131+ </ ul >
132+ </ p >
133+
134+ < p css = { styles . test } >
135+ Are you sure you want to remove this member?
136+ </ p >
137+ </ Stack >
138+ }
139+ />
140+ </ >
93141) ;
94142} ;
95143
144+ const styles = {
145+ test :{
146+ paddingBottom :20 ,
147+ } ,
148+ } satisfies Record < string , Interpolation < Theme > > ;
149+
96150export default OrganizationMembersPage ;