user screen update

packages/builder/src/pages/builder/portal/manage/users/[userId].svelte

@@ -27,11 +27,9 @@
   import { users, auth, groups, apps } from "stores/portal"
   import { roles } from "stores/backend"
   import { Constants } from "@budibase/frontend-core"
-
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
-
   export let userId
   let deleteUserModal
   let resetPasswordModal
@@ -40,9 +38,7 @@
   let popover
   let selectedGroups = []
   let allAppList = []
-  $: console.log($apps)
+  let toggleDisabled = false
-  $: console.log($userFetch.data)
-
   $: allAppList = $apps
     .filter(x => {
       if ($userFetch.data?.roles) {
@@ -52,15 +48,18 @@
       }
     })
     .map(app => {
-      let roles = Object.keys($userFetch.data.roles).filter(id => {
+      let roles = Object.fromEntries(
-        return id === app.appId
+        Object.entries($userFetch.data.roles).filter(
-      })
+          ([key]) => key === app.appId
+        )
+      )
       return {
-        ...app,
+        name: app.name,
+        devId: app.devId,
+        icon: app.icon,
         roles,
       }
     })
-  $: console.log(allAppList)
   // Used for searching through groups in the add group popover
   $: filteredGroups = $groups.filter(
     group =>
@@ -74,6 +73,12 @@
     })
   })
 
+  $: globalRole = $userFetch?.data?.admin?.global
+    ? "admin"
+    : $userFetch?.data?.builder?.global
+    ? "developer"
+    : "appUser"
+
   const userFetch = fetchData(`/api/global/users/${userId}`)
   async function deleteUser() {
     try {
@@ -88,10 +93,10 @@
   function getHighestRole(roles) {
     let highestRole
     let highestRoleNumber = 0
-    roles.forEach(role => {
+    Object.keys(roles).forEach(role => {
-      let roleNumber = RoleUtils.getRolePriority(role._id)
+      let roleNumber = RoleUtils.getRolePriority(roles[role])
       if (roleNumber > highestRoleNumber) {
-        highestRole = role
+        highestRole = roles[role]
       }
     })
     return highestRole
@@ -121,8 +126,14 @@
     }
   }
 
-  async function updateUserRole() {
+  async function updateUserRole({ detail }) {
-    return
+    if (detail === "developer") {
+      toggleFlags({ admin: { global: false }, builder: { global: true } })
+    } else if (detail === "admin") {
+      toggleFlags({ admin: { global: true }, builder: { global: false } })
+    } else if (detail === "appUser") {
+      toggleFlags({ admin: { global: false }, builder: { global: false } })
+    }
   }
 
   async function addGroup(groupId) {
@@ -142,21 +153,14 @@
     await groups.actions.save(group)
   }
 
-  function addAll() {}
+  async function toggleFlags(detail) {
-
-  /*
-  async function toggleFlag(flagName, detail) {
-    toggleDisabled = true
     try {
-      await users.save({ ...$userFetch?.data, [flagName]: { global: detail } })
+      await users.save({ ...$userFetch?.data, ...detail })
       await userFetch.refresh()
     } catch (error) {
       notifications.error("Error updating user")
     }
-    toggleDisabled = false
   }
-
-  
   async function toggleBuilderAccess({ detail }) {
     return toggleFlag("builder", detail)
   }
@@ -169,7 +173,8 @@
     selectedApp = detail
     editRolesModal.show()
   }
-*/
+
+  function addAll() {}
   onMount(async () => {
     try {
       await groups.actions.init()
@@ -240,7 +245,11 @@
       {#if userId !== $auth.user._id}
         <div class="field">
           <Label size="L">Role</Label>
-          <Select options={Constants.BbRoles} on:blur={updateUserRole} />
+          <Select
+            value={globalRole}
+            options={Constants.BbRoles}
+            on:change={updateUserRole}
+          />
         </div>
       {/if}
     </div>
@@ -304,16 +313,20 @@
     <List>
       {#if allAppList.length}
         {#each allAppList as app}
-          <div on:click={$goto(`../../overview/${app.devId}`)}>
+          <div class="pointer" on:click={$goto(`../../overview/${app.devId}`)}>
             <ListItem
               title={app.name}
               iconBackground={app?.icon?.color || ""}
               icon={app?.icon?.name || "Apps"}
             >
               <div class="title ">
-                <StatusLight />
+                <StatusLight
+                  color={RoleUtils.getRoleColour(getHighestRole(app.roles))}
+                />
                 <div style="margin-left: var(--spacing-s);">
-                  <Body size="XS">d</Body>
+                  <Body size="XS"
+                    >{Constants.Roles[getHighestRole(app.roles)]}</Body
+                  >
                 </div>
               </div>
             </ListItem>
@@ -348,6 +361,9 @@
 </Modal>
 
 <style>
+  .pointer {
+    cursor: pointer;
+  }
   .fields {
     display: grid;
     grid-gap: var(--spacing-m);

packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte

@@ -1,21 +1,14 @@
 <script>
   import { Icon } from "@budibase/bbui"
   export let value
+  $: console.log(value)
 </script>
 
 <div class="align">
   <div class="spacing">
-    <Icon name="Apps" />
+    <Icon name="WebPage" />
   </div>
-  {#if value?.apps?.length === 0}
+  {parseInt(value?.length) || 0}
-    <div>
-      <div>No groups</div>
-    </div>
-  {:else if value?.apps?.length === 1}
-    {value?.groups[0]?.name}
-  {:else}
-    {parseInt(value?.apps?.length) || 0}
-  {/if}
 </div>
 
 <style>

packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte

@@ -5,16 +5,18 @@
 
 <div class="align">
   <div class="spacing">
-    <Icon name="User" />
+    <Icon name="UserGroup" />
   </div>
   {#if value.length === 0}
-    <div>0</div>
+    <div class="opacity">0</div>
   {:else if value.length === 1}
     <div class="opacity">
       <Body size="S">{value[0].name}</Body>
     </div>
   {:else}
+    <div class="opacity">
       {parseInt(value.length) || 0} groups
+    </div>
   {/if}
 </div>
 
@@ -25,7 +27,7 @@
   }
 
   .opacity {
-    opacity: 0.7;
+    opacity: 0.8;
   }
 
   .spacing {

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

@@ -25,7 +25,6 @@
   import PasswordModal from "./_components/PasswordModal.svelte"
   import ImportUsersModal from "./_components/ImportUsersModal.svelte"
   import analytics, { Events } from "analytics"
-  import TriggerAutomation from "../../../../../components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/TriggerAutomation.svelte"
 
   const schema = {
     name: {},
@@ -35,10 +34,10 @@
       sortable: false,
     },
     userGroups: { sortable: false, displayName: "User groups" },
-    apps: {},
+    apps: { width: "120px" },
     settings: {
       sortable: false,
-      width: "50px",
+      width: "60px",
       displayName: "",
       align: "Right",
     },
@@ -81,11 +80,13 @@
 
   $: enrichedUsers = $users.map(user => {
     let userGroups = []
+    let userApps = []
     $groups.forEach(group => {
       if (group.users) {
         group.users?.forEach(y => {
           if (y._id === user._id) {
             userGroups.push(group)
+            userApps = group.apps
           }
         })
       }
@@ -94,6 +95,7 @@
       ...user,
       name: user.firstName ? user.firstName + " " + user.lastName : "",
       userGroups,
+      apps: [...new Set(Object.keys(user.roles))],
     }
   })
 

packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte

@@ -22,7 +22,7 @@
   let appUsers = []
 
   $: appUsers = $users.filter(x => {
-    return Object.keys(x.roles).some(y => {
+    return Object.keys(x.roles).find(y => {
       return extractAppId(y) === extractAppId(app.appId)
     })
   })
@@ -54,7 +54,7 @@
 
         let newUser = {
           ...matchedUser,
-          roles: { [app.appId]: data.role },
+          roles: { [app.appId]: data.role, ...matchedUser.roles },
         }
 
         await users.save(newUser)