web/satellite: fix team member delete UX

This change fixes an issue where deleting a single member from the team
table will show the multiple select snackbar and the deletion dialog at
the same time.

Change-Id: I2d5f40b74a22b67c60759d973b73952f328d4d1e

web/satellite/src/components/TeamTableComponent.vue

@@ -96,7 +96,7 @@
 
     <remove-project-member-dialog
         v-model="isRemoveMembersDialogShown"
-        :emails="selectedMembers"
+        :emails="membersToDelete"
         @deleted="onPostDelete"
     />
 
@@ -200,6 +200,7 @@ const search = ref<string>('');
 const searchTimer = ref<NodeJS.Timeout>();
 const sortBy = ref([{ key: 'date', order: 'asc' }]);
 const selectedMembers = ref<string[]>([]);
+const memberToDelete = ref<string>();
 
 const headers = ref([
     {
@@ -255,6 +256,14 @@ const projectMembers = computed((): RenderedItem[] => {
     });
 });
 
+/**
+ * Returns the members to be deleted to the delete dialog.
+ */
+const membersToDelete = computed<string[]>(() => {
+    if (memberToDelete.value) return [memberToDelete.value];
+    return selectedMembers.value;
+});
+
 /**
  * Handles update table rows limit event.
  */
@@ -280,11 +289,12 @@ async function onPostDelete(): Promise<void> {
 
     search.value = '';
     selectedMembers.value = [];
+    memberToDelete.value = '';
     await onUpdatePage(FIRST_PAGE);
 }
 
 function onSingleDelete(email: string): void {
-    selectedMembers.value = [email];
+    memberToDelete.value = email;
     isRemoveMembersDialogShown.value = true;
 }
 
@@ -380,6 +390,10 @@ function showDeleteDialog(): void {
     isRemoveMembersDialogShown.value = true;
 }
 
+watch(isRemoveMembersDialogShown, (value) => {
+    if (!value) memberToDelete.value = '';
+});
+
 /**
  * Handles update table search.
  */