Add role footer for admins and developers, remove wasted API calls

packages/bbui/src/Form/Core/Picker.svelte

@@ -34,6 +34,7 @@
   export let fetchTerm = null
   export let customPopoverHeight
   export let align = "left"
+  export let footer = null
 
   const dispatch = createEventDispatcher()
 
@@ -210,6 +211,12 @@
         {/each}
       {/if}
     </ul>
+
+    {#if footer}
+      <div class="footer">
+        {footer}
+      </div>
+    {/if}
   </div>
 </Popover>
 
@@ -286,4 +293,11 @@
   .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
+
+  .footer {
+    padding: 4px 12px 12px 12px;
+    font-style: italic;
+    max-width: 160px;
+    font-size: 12px;
+  }
 </style>

packages/bbui/src/Form/Core/Select.svelte

@@ -19,6 +19,7 @@
   export let autocomplete = false
   export let sort = false
   export let align
+  export let footer = null
 
   const dispatch = createEventDispatcher()
 
@@ -68,6 +69,7 @@
   {options}
   {autoWidth}
   {align}
+  {footer}
   {getOptionLabel}
   {getOptionValue}
   {getOptionIcon}

packages/bbui/src/Form/Select.svelte

@@ -23,6 +23,7 @@
   export let autocomplete = false
   export let customPopoverHeight
   export let align
+  export let footer = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -50,6 +51,7 @@
     {autoWidth}
     {sort}
     {align}
+    {footer}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}

packages/builder/src/components/common/RoleSelect.svelte

@@ -13,16 +13,24 @@
   export let allowRemove = false
   export let disabled = false
   export let align
+  export let footer = null
+  export let allowedRoles = null
 
   const dispatch = createEventDispatcher()
   const RemoveID = "remove"
 
-  $: options = getOptions($roles, allowPublic, allowRemove)
+  $: options = getOptions($roles, allowPublic, allowRemove, allowedRoles)
 
-  const getOptions = (roles, allowPublic) => {
+  const getOptions = (roles, allowPublic, allowRemove, allowedRoles) => {
+    if (allowedRoles?.length) {
+      console.log(allowedRoles)
+      console.log(roles)
+      return roles.filter(role => allowedRoles.includes(role._id))
+    }
+    let newRoles = [...roles]
     if (allowRemove) {
-      roles = [
+      newRoles = [
-        ...roles,
+        ...newRoles,
         {
           _id: RemoveID,
           name: "Remove",
@@ -30,9 +38,9 @@
       ]
     }
     if (allowPublic) {
-      return roles
+      return newRoles
     }
-    return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
+    return newRoles.filter(role => role._id !== Constants.Roles.PUBLIC)
   }
 
   const getColor = role => {
@@ -63,6 +71,7 @@
   {quiet}
   {disabled}
   {align}
+  {footer}
   bind:value
   on:change={onChange}
   {options}

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

@@ -84,7 +84,7 @@
       const isBuilderOrAdmin = user.admin?.global || user.builder?.global
       let role = undefined
       if (isBuilderOrAdmin) {
-        role = "ADMIN"
+        role = Constants.Roles.ADMIN
       } else {
         const appRole = Object.keys(user.roles).find(x => x === prodAppId)
         if (appRole) {
@@ -134,6 +134,9 @@
       return
     }
     try {
+      if (user.role === role) {
+        return
+      }
       await updateAppUser(user, role)
     } catch (error) {
       console.error(error)
@@ -369,9 +372,12 @@
     }
   }
 
-  const roleNote = user => {
+  const getRoleFooter = user => {
-    if (user.group) {
+    if (!user.role && user.group) {
-      return "Part of a group"
+      return "This user has been given access via their group"
+    }
+    if (user.isBuilderOrAdmin) {
+      return "This user's role grants admin access to all apps"
     }
     return null
   }
@@ -557,7 +563,7 @@
                 </div>
                 <div class="auth-entity-access" class:muted={user.group}>
                   <RoleSelect
-                    note={roleNote(user)}
+                    footer={getRoleFooter(user)}
                     placeholder={false}
                     value={user.role}
                     allowRemove={user.role && !user.group}
@@ -569,9 +575,11 @@
                     on:remove={() => {
                       onUpdateUser(user)
                     }}
-                    disabled={user.isBuilderOrAdmin}
                     autoWidth
                     align="right"
+                    allowedRoles={user.isBuilderOrAdmin
+                      ? [Constants.Roles.ADMIN]
+                      : null}
                   />
                 </div>
               </div>