update side panel to enable selecting of creator role

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

@@ -1,6 +1,8 @@
 <script>
   import { Select } from "@budibase/bbui"
   import { roles } from "stores/backend"
+  import { licensing } from "stores/portal"
+
   import { Constants, RoleUtils } from "@budibase/frontend-core"
   import { createEventDispatcher } from "svelte"
 
@@ -15,17 +17,41 @@
   export let align
   export let footer = null
   export let allowedRoles = null
+  export let allowCreator = false
 
   const dispatch = createEventDispatcher()
   const RemoveID = "remove"
+  const CreatorID = "CREATOR"
 
-  $: options = getOptions($roles, allowPublic, allowRemove, allowedRoles)
-
-  const getOptions = (roles, allowPublic, allowRemove, allowedRoles) => {
+  $: options = getOptions(
+    $roles,
+    allowPublic,
+    allowRemove,
+    allowedRoles,
+    allowCreator
+  )
+  const getOptions = (
+    roles,
+    allowPublic,
+    allowRemove,
+    allowedRoles,
+    allowCreator
+  ) => {
     if (allowedRoles?.length) {
       return roles.filter(role => allowedRoles.includes(role._id))
     }
     let newRoles = [...roles]
+
+    if (allowCreator) {
+      newRoles = [
+        {
+          _id: CreatorID,
+          name: "Creator",
+          tag: $licensing.perAppBuildersEnabled && null,
+        },
+        ...newRoles,
+      ]
+    }
     if (allowRemove) {
       newRoles = [
         ...newRoles,
@@ -56,8 +82,11 @@
   }
 
   const onChange = e => {
+    console.log(e.detail)
     if (allowRemove && e.detail === RemoveID) {
       dispatch("remove")
+    } else if (e.detail === CreatorID) {
+      dispatch("addcreator")
     } else {
       dispatch("change", e.detail)
     }
@@ -77,6 +106,13 @@
   getOptionValue={role => role._id}
   getOptionColour={getColor}
   getOptionIcon={getIcon}
+  isOptionEnabled={option => {
+    if (option._id == CreatorID && !$licensing.perAppBuildersEnabled) {
+      return false
+    } else {
+      return true
+    }
+  }}
   {placeholder}
   {error}
 />

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

@@ -40,7 +40,6 @@
   let userLimitReachedModal
 
   let inviteFailureResponse = ""
-
   $: queryIsEmail = emailValidator(query) === true
   $: prodAppId = apps.getProdAppID($store.appId)
   $: promptInvite = showInvite(
@@ -108,10 +107,16 @@
     await usersFetch.refresh()
 
     filteredUsers = $usersFetch.rows.map(user => {
-      const isAdminOrBuilder = sdk.users.isAdminOrBuilder(user, prodAppId)
+      const isAdminOrGlobalBuilder = sdk.users.isAdminOrGlobalBuilder(
+        user,
+        prodAppId
+      )
+      const isAppBuilder = sdk.users.hasAppBuilderPermissions(user, prodAppId)
       let role = undefined
-      if (isAdminOrBuilder) {
+      if (isAdminOrGlobalBuilder) {
         role = Constants.Roles.ADMIN
+      } else if (isAppBuilder) {
+        role = Constants.Roles.CREATOR
       } else {
         const appRole = Object.keys(user.roles).find(x => x === prodAppId)
         if (appRole) {
@@ -122,7 +127,8 @@
       return {
         ...user,
         role,
-        isAdminOrBuilder,
+        isAdminOrGlobalBuilder,
+        isAppBuilder,
       }
     })
   }
@@ -160,6 +166,12 @@
       if (user.role === role) {
         return
       }
+      if (user.isAppBuilder) {
+        await removeAppBuilder(user._id, prodAppId)
+      }
+      if (role === Constants.Roles.CREATOR) {
+        await removeAppBuilder(user._id, prodAppId)
+      }
       await updateAppUser(user, role)
     } catch (error) {
       console.error(error)
@@ -373,6 +385,14 @@
     })
   }
 
+  const addAppBuilder = async userId => {
+    await users.addAppBuilder(userId, prodAppId)
+  }
+
+  const removeAppBuilder = async userId => {
+    await users.removeAppBuilder(userId, prodAppId)
+  }
+
   const initSidePanel = async sidePaneOpen => {
     if (sidePaneOpen === true) {
       await groups.actions.init()
@@ -388,22 +408,12 @@
     }
   }
 
-  const userTitle = user => {
-    if (sdk.users.isAdmin(user)) {
-      return "Admin"
-    } else if (sdk.users.isBuilder(user, prodAppId)) {
-      return "Developer"
-    } else {
-      return "App user"
-    }
-  }
-
   const getRoleFooter = user => {
     if (user.group) {
       const role = $roles.find(role => role._id === user.role)
       return `This user has been given ${role?.name} access from the ${user.group} group`
     }
-    if (user.isAdminOrBuilder) {
+    if (user.isAdminOrGlobalBuilder) {
       return "This user's role grants admin access to all apps"
     }
     return null
@@ -594,9 +604,6 @@
                   <div class="user-email" title={user.email}>
                     {user.email}
                   </div>
-                  <div class="auth-entity-meta">
-                    {userTitle(user)}
-                  </div>
                 </div>
                 <div class="auth-entity-access" class:muted={user.group}>
                   <RoleSelect
@@ -605,7 +612,11 @@
                     value={user.role}
                     allowRemove={user.role && !user.group}
                     allowPublic={false}
+                    allowCreator
                     quiet={true}
+                    on:addcreator={() => {
+                      addAppBuilder(user._id)
+                    }}
                     on:change={e => {
                       onUpdateUser(user, e.detail)
                     }}
@@ -614,7 +625,7 @@
                     }}
                     autoWidth
                     align="right"
-                    allowedRoles={user.isAdminOrBuilder
+                    allowedRoles={user.isAdminOrGlobalBuilder
                       ? [Constants.Roles.ADMIN]
                       : null}
                   />

packages/builder/src/stores/portal/licensing.js

@@ -125,6 +125,9 @@ export const createLicensingStore = () => {
       const syncAutomationsEnabled = license.features.includes(
         Constants.Features.SYNC_AUTOMATIONS
       )
+      const perAppBuildersEnabled = license.features.includes(
+        Constants.Features.APP_BUILDERS
+      )
       store.update(state => {
         return {
           ...state,
@@ -140,6 +143,7 @@ export const createLicensingStore = () => {
           auditLogsEnabled,
           enforceableSSO,
           syncAutomationsEnabled,
+          perAppBuildersEnabled,
         }
       })
     },

packages/builder/src/stores/portal/users.js

@@ -112,6 +112,14 @@ export function createUsersStore() {
     return await API.saveUser(user)
   }
 
+  async function addAppBuilder(userId, appId) {
+    return await API.addAppBuilder({ userId, appId })
+  }
+
+  async function removeAppBuilder(userId, appId) {
+    return await API.removeAppBuilder({ userId, appId })
+  }
+
   const getUserRole = user =>
     sdk.users.isAdmin(user)
       ? "admin"
@@ -139,6 +147,8 @@ export function createUsersStore() {
     getInvites,
     updateInvite,
     getUserCountByApp,
+    addAppBuilder,
+    removeAppBuilder,
     // any operation that adds or deletes users
     acceptInvite,
     create: refreshUsage(create),