Merge branch '1411-prompt-users-when-they-try-and-remove-another-user-from-a-group' into 'develop'

Resolve "Prompt users when they try and remove another user from a group."

Closes #1411

See merge request bramw/baserow!1146

web-frontend/modules/core/components/group/RemoveFromGroupModal.vue

@@ -0,0 +1,79 @@
+<template>
+  <Modal>
+    <h2 class="box__title">
+      {{ $t('removeFromGroupModal.title') }}
+    </h2>
+    <Error :error="error"></Error>
+    <div>
+      <p>
+        {{
+          $t('removeFromGroupModal.confirmation', {
+            name: member.name,
+            group_name: group.name,
+          })
+        }}
+      </p>
+      <div class="actions">
+        <div class="align-right">
+          <a
+            class="button button--large button--error button--overflow"
+            :class="{ 'button--loading': loading }"
+            :disabled="loading"
+            @click.prevent="remove()"
+          >
+            {{ $t('removeFromGroupModal.remove') }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import modal from '@baserow/modules/core/mixins/modal'
+import error from '@baserow/modules/core/mixins/error'
+import GroupService from '@baserow/modules/core/services/group'
+
+export default {
+  name: 'RemoveFromGroupModal',
+  mixins: [modal, error],
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    member: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    async remove() {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      try {
+        await GroupService(this.$client).deleteUser(this.member.id)
+        await this.$store.dispatch('group/forceDeleteGroupUser', {
+          groupId: this.group.id,
+          id: this.member.id,
+          values: { user_id: this.member.user_id },
+        })
+        this.$emit('remove-user', this.member.id)
+        this.hide()
+      } catch (error) {
+        this.loading = false
+        this.handleError(error)
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+}
+</script>

web-frontend/modules/core/components/settings/members/EditMemberContext.vue

@@ -14,19 +14,19 @@
             $hasPermission('group_user.delete', member, group.id)
           "
         >
-          <a
-            :class="{
-              'context__menu-item--loading': removeLoading,
-            }"
-            class="color-error"
-            @click.prevent="remove(member)"
-          >
+          <a class="color-error" @click.prevent="showRemoveModal">
             <i class="context__menu-icon fas fa-fw fa-trash"></i>
             {{ $t('membersSettings.membersTable.actions.remove') }}
           </a>
         </li>
       </ul>
     </template>
+    <RemoveFromGroupModal
+      ref="removeFromGroupModal"
+      :group="group"
+      :member="member"
+      @remove-user="$emit('remove-user', $event)"
+    ></RemoveFromGroupModal>
   </Context>
 </template>
 
@@ -34,11 +34,13 @@
 import { mapGetters } from 'vuex'
 
 import context from '@baserow/modules/core/mixins/context'
-import { notifyIf } from '@baserow/modules/core/utils/error'
-import GroupService from '@baserow/modules/core/services/group'
+import RemoveFromGroupModal from '@baserow/modules/core/components/group/RemoveFromGroupModal'
 
 export default {
   name: 'EditMemberContext',
+  components: {
+    RemoveFromGroupModal,
+  },
   mixins: [context],
   props: {
     group: {
@@ -50,43 +52,20 @@ export default {
       type: Object,
     },
   },
-  data() {
-    return {
-      removeLoading: false,
-    }
-  },
   computed: {
     ...mapGetters({
       userId: 'auth/getUserId',
     }),
   },
   methods: {
+    showRemoveModal() {
+      this.hide()
+      this.$refs.removeFromGroupModal.show()
+    },
     async copyEmail({ email }) {
       await navigator.clipboard.writeText(email)
       this.$refs.emailCopied.show()
     },
-    async remove(member) {
-      if (this.removeLoading) {
-        return
-      }
-
-      this.removeLoading = true
-
-      try {
-        await GroupService(this.$client).deleteUser(member.id)
-        await this.$store.dispatch('group/forceDeleteGroupUser', {
-          groupId: this.group.id,
-          id: member.id,
-          values: { user_id: member.user_id },
-        })
-        this.$emit('refresh')
-        this.hide()
-      } catch (error) {
-        notifyIf(error)
-      } finally {
-        this.removeLoading = false
-      }
-    },
   },
 }
 </script>

web-frontend/modules/core/components/settings/members/MembersTable.vue

@@ -25,12 +25,12 @@
           {{ $t('membersSettings.membersTable.inviteMember') }}
         </div>
       </template>
-      <template #menus>
+      <template #menus="slotProps">
         <EditMemberContext
           ref="editMemberContext"
           :group="group"
           :member="editMember"
-          @refresh="refresh"
+          @remove-user="slotProps.deleteRow"
         ></EditMemberContext>
         <EditRoleContext
           ref="editRoleContext"
@@ -169,9 +169,6 @@ export default {
       this.editRoleMember = row
       this.$refs.editRoleContext[action](target, 'bottom', 'left', 4)
     },
-    async refresh() {
-      await this.$refs.crudTable.fetch()
-    },
     async roleUpdate({ uid: permissionsNew, subject: member }) {
       const oldMember = clone(member)
       const newMember = clone(member)

web-frontend/modules/core/locales/en.json

@@ -474,5 +474,10 @@
     },
     "memberAssignmentModalFooter": {
         "invite": "Invite {count}"
+    },
+    "removeFromGroupModal": {
+        "title": "Confirm removal from group",
+        "confirmation": "Are you sure you want to remove {name} from {group_name}? This action cannot be undone.",
+        "remove": "Remove"
     }
-}
+}