Fix: Fix for canceling invites from server settings (#4689)

packages/frontend-2/components/settings/server/PendingInvitations.vue

@@ -62,6 +62,7 @@
       v-if="inviteToModify"
       v-model:open="showDeleteInvitationDialog"
       :email="inviteToModify?.email"
+      @on-cancel-invite="cancelInvite"
     />
 
     <InfiniteLoading
@@ -76,14 +77,17 @@
 </template>
 
 <script setup lang="ts">
-import { useMutation } from '@vue/apollo-composable'
+import { useMutation, useApolloClient } from '@vue/apollo-composable'
 import {
   MagnifyingGlassIcon,
   XMarkIcon,
   EllipsisHorizontalIcon
 } from '@heroicons/vue/24/outline'
 import type { ItemType, InviteItem } from '~~/lib/server-management/helpers/types'
-import { adminResendInviteMutation } from '~~/lib/server-management/graphql/mutations'
+import {
+  adminResendInviteMutation,
+  adminDeleteInviteMutation
+} from '~~/lib/server-management/graphql/mutations'
 import { isInvite } from '~~/lib/server-management/helpers/utils'
 import { useGlobalToast, ToastNotificationType } from '~~/lib/common/composables/toast'
 import {
@@ -99,11 +103,12 @@ import type { Nullable } from '@speckle/shared'
 
 const { triggerNotification } = useGlobalToast()
 const { mutate: resendInvitationMutation } = useMutation(adminResendInviteMutation)
+const { mutate: deleteInvitationMutation } = useMutation(adminDeleteInviteMutation)
 const { on, bind, value: search } = useDebouncedTextInput()
+const apollo = useApolloClient().client
 
 const inviteToModify = ref<InviteItem | null>(null)
 const showDeleteInvitationDialog = ref(false)
-const successfullyResentInvites = ref<string[]>([])
 const showInviteDialog = ref(false)
 const showActionsMenu = ref<Record<string, boolean>>({})
 
@@ -168,17 +173,43 @@ const resendInvitation = async (item: InviteItem) => {
   )
 
   if (result?.data?.inviteResend) {
-    successfullyResentInvites.value.push(inviteId)
     triggerNotification({
       type: ToastNotificationType.Success,
-      title: 'Invitation resent',
-      description: 'The invitation has been successfully resent'
+      title: `Invite for ${inviteToModify.value?.email} resent`
     })
   } else {
     const errorMessage = getFirstErrorMessage(result?.errors)
     triggerNotification({
       type: ToastNotificationType.Danger,
-      title: 'Failed to resend invitation',
+      title: `Failed to resend invite to ${inviteToModify.value?.email}`,
+      description: errorMessage
+    })
+  }
+}
+
+const cancelInvite = async () => {
+  const inviteId = inviteToModify.value?.id
+  if (!inviteId) return
+
+  const result = await deleteInvitationMutation({ inviteId }).catch(
+    convertThrowIntoFetchResult
+  )
+
+  if (result?.data?.inviteDelete) {
+    triggerNotification({
+      type: ToastNotificationType.Success,
+      title: `Invite for ${inviteToModify.value?.email} canceled`
+    })
+
+    const cacheId = getCacheId('ServerInvite', inviteId)
+    apollo.cache.evict({
+      id: cacheId
+    })
+  } else {
+    const errorMessage = getFirstErrorMessage(result?.errors)
+    triggerNotification({
+      type: ToastNotificationType.Danger,
+      title: 'Failed to cancel invite',
       description: errorMessage
     })
   }