Update user deletion UI

4 years ago · 1eb4aae050
4 changed files with 90 additions and 5 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte
@ -0,0 +1,73 @@
+<script>
+  import { Body, ModalContent, Table } from "@budibase/bbui"
+  import { onMount } from "svelte"
+
+  export let userData
+  export let deleteUsersResponse
+
+  let successCount
+  let failureCount
+  let title
+  let unsuccessfulUsers
+  let message
+
+  const setTitle = () => {
+    if (successCount) {
+      title = `${successCount} users deleted`
+    } else {
+      title = "Oops!"
+    }
+  }
+
+  const setMessage = () => {
+    if (successCount) {
+      message = "However there was a problem deleting some users."
+    } else {
+      message = "There was a problem deleting some users."
+    }
+  }
+
+  const setUsers = () => {
+    unsuccessfulUsers = deleteUsersResponse.unsuccessful.map(user => {
+      return {
+        email: user.email,
+        reason: user.reason,
+      }
+    })
+  }
+
+  onMount(() => {
+    successCount = deleteUsersResponse.successful.length
+    failureCount = deleteUsersResponse.unsuccessful.length
+    setTitle()
+    setMessage()
+    setUsers()
+  })
+
+  const schema = {
+    email: {},
+    reason: {},
+  }
+</script>
+
+<ModalContent
+  size="M"
+  title={title}
+  confirmText="Close"
+  showCloseIcon={false}
+  showCancelButton={false}
+>
+  <Body size="XS">
+    {message}
+  </Body>
+  <Table
+    schema={schema}
+    data={unsuccessfulUsers}
+    allowEditColumns={false}
+    allowEditRows={false}
+    allowSelectRows={false}
+  />
+</ModalContent>
+
+<style>
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/PasswordModal.svelte
@ -96,7 +96,7 @@
 </script>

 <ModalContent
-  size="S"
+  size="M"
  {title}
  confirmText="Done"
  showCancelButton={false}
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -23,6 +23,7 @@
  import { goto } from "@roxi/routify"
  import OnboardingTypeModal from "./_components/OnboardingTypeModal.svelte"
  import PasswordModal from "./_components/PasswordModal.svelte"
+  import DeletionFailureModal from "./_components/DeletionFailureModal.svelte"
  import ImportUsersModal from "./_components/ImportUsersModal.svelte"
  import { createPaginationStore } from "helpers/pagination"
  import { get } from "svelte/store"
@ -33,7 +34,8 @@
    inviteConfirmationModal,
    onboardingTypeModal,
    passwordModal,
-    importUsersModal
+    importUsersModal,
+    deletionFailureModal
  let pageInfo = createPaginationStore()
  let prevEmail = undefined,
    searchEmail = undefined
@ -56,6 +58,7 @@
  }
  $: userData = []
  $: createUsersResponse = { successful: [], unsuccessful: [] }
+  $: deleteUsersResponse = { successful: [], unsuccessful: [] }
  $: page = $pageInfo.page
  $: fetchUsers(page, searchEmail)
  $: {
@ -180,8 +183,13 @@
        notifications.error("You cannot delete yourself")
        return
      }
-      await users.bulkDelete(ids)
-      notifications.success(`Successfully deleted ${selectedRows.length} rows`)
+      deleteUsersResponse = await users.bulkDelete(ids)
+      if (deleteUsersResponse.unsuccessful?.length) {
+        deletionFailureModal.show()
+      } else {
+        notifications.success(`Successfully deleted ${selectedRows.length} users`)
+      }
+
      selectedRows = []
      await fetchUsers(page, searchEmail)
    } catch (error) {
@ -291,6 +299,10 @@
  <PasswordModal {createUsersResponse} userData={userData.users} />
 </Modal>

+<Modal bind:this={deletionFailureModal}>
+  <DeletionFailureModal {deleteUsersResponse} />
+</Modal>
+
 <Modal bind:this={importUsersModal}>
  <ImportUsersModal {createUsersFromCsv} />
 </Modal>
--- a/packages/builder/src/stores/portal/users.js
+++ b/packages/builder/src/stores/portal/users.js
@ -83,7 +83,7 @@ export function createUsersStore() {
  }

  async function bulkDelete(userIds) {
-    await API.deleteUsers(userIds)
+    return API.deleteUsers(userIds)
  }

  async function save(user) {