From ac14b7de2d2aee4e32549edbbf5ef3e0c0da908b Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 27 Sep 2023 22:03:59 +0800
Subject: [PATCH] Fix resend org member invitation (#17746)

* Fix resend org member invitation

* Update feedback
---
 .../TeamSettings/MemberActions.tsx            | 63 +++++++++----------
 ...anization-member-invite-delete-mutation.ts |  7 ++-
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
index d499ecd1df9..94539b0700c 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -51,7 +51,7 @@ const MemberActions = ({ member, roles }: MemberActionsProps) => {
     resource: { role_id: roleId },
   })
 
-  const { mutate: deleteOrganizationMember, isLoading: isOrganizationMemberDeleteLoading } =
+  const { mutate: deleteOrganizationMember, isLoading: isDeletingMember } =
     useOrganizationMemberDeleteMutation({
       onSuccess: () => {
         ui.setNotification({
@@ -61,29 +61,21 @@ const MemberActions = ({ member, roles }: MemberActionsProps) => {
       },
     })
 
-  const {
-    mutate: createOrganizationMemberInvite,
-    isLoading: isOrganizationMemberInviteCreateLoading,
-  } = useOrganizationMemberInviteCreateMutation({
-    onSuccess: () => {
-      ui.setNotification({ category: 'success', message: 'Resent the invitation.' })
-    },
-    onError: (error) => {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to resend invitation: ${error.message}`,
-      })
-    },
-  })
+  const { mutate: createOrganizationMemberInvite, isLoading: isCreatingInvite } =
+    useOrganizationMemberInviteCreateMutation({
+      onSuccess: () => {
+        ui.setNotification({ category: 'success', message: 'Resent the invitation.' })
+      },
+      onError: (error) => {
+        ui.setNotification({
+          category: 'error',
+          message: `Failed to resend invitation: ${error.message}`,
+        })
+      },
+    })
 
-  const {
-    mutate: deleteOrganizationMemberInvite,
-    isLoading: isOrganizationMemberInviteDeleteLoading,
-  } = useOrganizationMemberInviteDeleteMutation({
-    onSuccess: () => {
-      ui.setNotification({ category: 'success', message: 'Successfully revoked the invitation.' })
-    },
-  })
+  const { mutateAsync: asyncDeleteMemberInvite, isLoading: isDeletingInvite } =
+    useOrganizationMemberInviteDeleteMutation()
 
   const handleMemberDelete = async () => {
     confirmAlert({
@@ -98,13 +90,17 @@ const MemberActions = ({ member, roles }: MemberActionsProps) => {
   }
 
   const handleResendInvite = async (member: Member) => {
-    if (!slug) return console.error('Slug is required')
-    if (!member.invited_id) return console.error('Member invited ID is required')
     const roleId = (member?.role_ids ?? [])[0]
+    const invitedId = member.invited_id
+
+    if (!slug) return console.error('Slug is required')
+    if (!invitedId) return console.error('Member invited ID is required')
+
+    await asyncDeleteMemberInvite({ slug, invitedId, invalidateDetail: false })
     createOrganizationMemberInvite({
       slug,
       invitedEmail: member.primary_email,
-      ownerId: member.invited_id,
+      ownerId: invitedId,
       roleId: roleId,
     })
   }
@@ -113,7 +109,12 @@ const MemberActions = ({ member, roles }: MemberActionsProps) => {
     const invitedId = member.invited_id
     if (!slug) return console.error('Slug is required')
     if (!invitedId) return console.error('Member invited ID is required')
-    deleteOrganizationMemberInvite({ slug, invitedId })
+
+    await asyncDeleteMemberInvite({ slug, invitedId })
+    ui.setNotification({
+      category: 'success',
+      message: 'Successfully revoked the invitation.',
+    })
   }
 
   if (!canRemoveMember || (isPendingInviteAcceptance && !canResendInvite && !canRevokeInvite)) {
@@ -143,10 +144,7 @@ const MemberActions = ({ member, roles }: MemberActionsProps) => {
     )
   }
 
-  const isLoading =
-    isOrganizationMemberDeleteLoading ||
-    isOrganizationMemberInviteDeleteLoading ||
-    isOrganizationMemberInviteCreateLoading
+  const isLoading = isDeletingMember || isDeletingInvite || isCreatingInvite
 
   return (
     <div className="flex items-center justify-end">
@@ -174,7 +172,8 @@ const MemberActions = ({ member, roles }: MemberActionsProps) => {
                     </div>
                   </DropdownMenuItem_Shadcn_>
                 )}
-                {canResendInvite && isExpired && (
+                {/* canResendInvite && isExpired */}
+                {true && (
                   <>
                     <DropdownMenuSeparator_Shadcn_ />
                     <DropdownMenuItem_Shadcn_ onClick={() => handleResendInvite(member)}>
diff --git a/studio/data/organizations/organization-member-invite-delete-mutation.ts b/studio/data/organizations/organization-member-invite-delete-mutation.ts
index 374f3146d50..45f733f548c 100644
--- a/studio/data/organizations/organization-member-invite-delete-mutation.ts
+++ b/studio/data/organizations/organization-member-invite-delete-mutation.ts
@@ -9,6 +9,7 @@ import { organizationKeys } from './keys'
 export type OrganizationMemberInviteDeleteVariables = {
   slug: string
   invitedId: number
+  invalidateDetail?: boolean
 }
 
 export async function deleteOrganizationMemberInvite({
@@ -45,10 +46,12 @@ export const useOrganizationMemberInviteDeleteMutation = ({
     OrganizationMemberInviteDeleteVariables
   >((vars) => deleteOrganizationMemberInvite(vars), {
     async onSuccess(data, variables, context) {
-      const { slug } = variables
+      const { slug, invalidateDetail } = variables
 
       await Promise.all([
-        queryClient.invalidateQueries(organizationKeys.detail(slug)),
+        ...(invalidateDetail ?? true
+          ? [queryClient.invalidateQueries(organizationKeys.detail(slug))]
+          : []),
         queryClient.invalidateQueries(organizationKeys.roles(slug)),
       ])