Merge pull request #10469 from Budibase/feature/portal-pending-users-section

Pending user invites displayed in the user page.

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -22,6 +22,7 @@
   export let rowCount
   export let disableSorting = false
   export let customPlaceholder = false
+  export let allowClickRows
 
   const dispatch = createEventDispatcher()
 
@@ -110,6 +111,7 @@
         {disableSorting}
         {customPlaceholder}
         showAutoColumns={!hideAutocolumns}
+        {allowClickRows}
         on:clickrelationship={e => selectRelationship(e.detail)}
         on:sort
       >

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -555,7 +555,7 @@
 
         {#if filteredUsers?.length}
           <div class="auth-entity-section">
-            <div class="auth-entity-header ">
+            <div class="auth-entity-header">
               <div class="auth-entity-title">Users</div>
               <div class="auth-entity-access-title">Access</div>
             </div>
@@ -696,7 +696,7 @@
     max-width: calc(100vw - 40px);
     background: var(--background);
     border-left: var(--border-light);
-    z-index: 3;
+    z-index: 999;
     display: flex;
     flex-direction: column;
     overflow-y: auto;

packages/builder/src/pages/builder/portal/users/users/index.svelte

@@ -88,6 +88,16 @@
     },
   }
 
+  const getPendingSchema = tblSchema => {
+    if (!tblSchema) {
+      return {}
+    }
+    let pendingSchema = JSON.parse(JSON.stringify(tblSchema))
+    pendingSchema.email.displayName = "Pending Invites"
+    return pendingSchema
+  }
+
+  $: pendingSchema = getPendingSchema(schema)
   $: userData = []
   $: inviteUsersResponse = { successful: [], unsuccessful: [] }
   $: {
@@ -110,6 +120,24 @@
       }
     })
   }
+  let invitesLoaded = false
+  let pendingInvites = []
+  let parsedInvites = []
+
+  const invitesToSchema = invites => {
+    return invites.map(invite => {
+      const { admin, builder, userGroups, apps } = invite.info
+
+      return {
+        email: invite.email,
+        builder,
+        admin,
+        userGroups: userGroups,
+        apps: apps ? [...new Set(Object.keys(apps))] : undefined,
+      }
+    })
+  }
+  $: parsedInvites = invitesToSchema(pendingInvites)
 
   const updateFetch = email => {
     fetch.update({
@@ -144,6 +172,7 @@
     }))
     try {
       inviteUsersResponse = await users.invite(payload)
+      pendingInvites = await users.getInvites()
       inviteConfirmationModal.show()
     } catch (error) {
       notifications.error("Error inviting user")
@@ -232,6 +261,9 @@
     try {
       await groups.actions.init()
       groupsLoaded = true
+
+      pendingInvites = await users.getInvites()
+      invitesLoaded = true
     } catch (error) {
       notifications.error("Error fetching user group data")
     }
@@ -324,6 +356,15 @@
       goToNextPage={fetch.nextPage}
     />
   </div>
+  <Table
+    schema={pendingSchema}
+    data={parsedInvites}
+    allowEditColumns={false}
+    allowEditRows={false}
+    {customRenderers}
+    loading={!invitesLoaded}
+    allowClickRows={false}
+  />
 </Layout>
 
 <Modal bind:this={createUserModal}>