Update builder side panel to use new copy for roles

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

@@ -20,73 +20,91 @@
   export let allowedRoles = null
   export let allowCreator = false
   export let fancySelect = false
+  export let labelPrefix = null
 
   const dispatch = createEventDispatcher()
   const RemoveID = "remove"
 
+  $: enrichLabel = label => (labelPrefix ? `${labelPrefix} ${label}` : label)
   $: options = getOptions(
     $roles,
     allowPublic,
     allowRemove,
     allowedRoles,
-    allowCreator
+    allowCreator,
+    enrichLabel
   )
+
   const getOptions = (
     roles,
     allowPublic,
     allowRemove,
     allowedRoles,
-    allowCreator
+    allowCreator,
+    enrichLabel
   ) => {
+    // Use roles whitelist if specified
     if (allowedRoles?.length) {
-      const filteredRoles = roles.filter(role =>
+      let options = roles
-        allowedRoles.includes(role._id)
+        .filter(role => allowedRoles.includes(role._id))
-      )
+        .map(role => ({
-      return [
+          name: enrichLabel(role.name),
-        ...filteredRoles,
+          _id: role._id,
-        ...(allowedRoles.includes(Constants.Roles.CREATOR)
+        }))
-          ? [{ _id: Constants.Roles.CREATOR, name: "Creator", enabled: false }]
+      if (allowedRoles.includes(Constants.Roles.CREATOR)) {
-          : []),
+        options.push({
-      ]
-    }
-    let newRoles = [...roles]
-
-    if (allowCreator) {
-      newRoles = [
-        {
           _id: Constants.Roles.CREATOR,
-          name: "Creator",
+          name: "Can edit",
-          tag:
+          enabled: false,
-            !$licensing.perAppBuildersEnabled &&
+        })
-            capitalise(Constants.PlanType.BUSINESS),
+      }
-        },
+      return options
-        ...newRoles,
-      ]
     }
+
+    // Allow all core roles
+    let options = roles.map(role => ({
+      name: enrichLabel(role.name),
+      _id: role._id,
+    }))
+
+    // Add creator if required
+    if (allowCreator) {
+      options.unshift({
+        _id: Constants.Roles.CREATOR,
+        name: "Can edit",
+        tag:
+          !$licensing.perAppBuildersEnabled &&
+          capitalise(Constants.PlanType.BUSINESS),
+      })
+    }
+
+    // Add remove option if required
     if (allowRemove) {
-      newRoles = [
+      options.push({
-        ...newRoles,
+        _id: RemoveID,
-        {
+        name: "Remove",
-          _id: RemoveID,
+      })
-          name: "Remove",
-        },
-      ]
     }
-    if (allowPublic) {
+
-      return newRoles
+    // Remove public if not allowed
+    if (!allowPublic) {
+      options = options.filter(role => role._id !== Constants.Roles.PUBLIC)
     }
-    return newRoles.filter(role => role._id !== Constants.Roles.PUBLIC)
+
+    return options
   }
 
   const getColor = role => {
-    if (allowRemove && role._id === RemoveID) {
+    // Creator and remove options have no colors
+    if (role._id === Constants.Roles.CREATOR || role._id === RemoveID) {
       return null
     }
     return RoleUtils.getRoleColour(role._id)
   }
 
   const getIcon = role => {
-    if (allowRemove && role._id === RemoveID) {
+    // Only remove option has an icon
+    if (role._id === RemoveID) {
       return "Close"
     }
     return null

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

@@ -471,10 +471,6 @@
     await users.removeAppBuilder(userId, prodAppId)
   }
 
-  const addGroupAppBuilder = async groupId => {
-    await groups.actions.addGroupAppBuilder(groupId, prodAppId)
-  }
-
   const removeGroupAppBuilder = async groupId => {
     await groups.actions.removeGroupAppBuilder(groupId, prodAppId)
   }
@@ -495,14 +491,12 @@
   }
 
   const getInviteRoleValue = invite => {
-    if (invite.info?.admin?.global && invite.info?.builder?.global) {
+    if (
-      return Constants.Roles.ADMIN
+      (invite.info?.admin?.global && invite.info?.builder?.global) ||
-    }
+      invite.info?.builder?.apps?.includes(prodAppId)
-
+    ) {
-    if (invite.info?.builder?.apps?.includes(prodAppId)) {
       return Constants.Roles.CREATOR
     }
-
     return invite.info.apps?.[prodAppId]
   }
 
@@ -512,7 +506,7 @@
       return `This user has been given ${role?.name} access from the ${user.group} group`
     }
     if (user.isAdminOrGlobalBuilder) {
-      return "This user's role grants admin access to all apps"
+      return "Account admins can edit all apps"
     }
     return null
   }
@@ -650,8 +644,9 @@
                       autoWidth
                       align="right"
                       allowedRoles={user.isAdminOrGlobalBuilder
-                        ? [Constants.Roles.ADMIN]
+                        ? [Constants.Roles.CREATOR]
                         : null}
+                      labelPrefix="Can use as"
                     />
                   </div>
                 </div>
@@ -695,19 +690,16 @@
                       allowRemove={group.role}
                       allowPublic={false}
                       quiet={true}
-                      allowCreator={true}
+                      allowCreator={group.role === Constants.Roles.CREATOR}
                       on:change={e => {
-                        if (e.detail === Constants.Roles.CREATOR) {
+                        onUpdateGroup(group, e.detail)
-                          addGroupAppBuilder(group._id)
-                        } else {
-                          onUpdateGroup(group, e.detail)
-                        }
                       }}
                       on:remove={() => {
                         onUpdateGroup(group)
                       }}
                       autoWidth
                       align="right"
+                      labelPrefix="Can use as"
                     />
                   </div>
                 </div>
@@ -753,6 +745,7 @@
                       allowedRoles={user.isAdminOrGlobalBuilder
                         ? [Constants.Roles.CREATOR]
                         : null}
+                      labelPrefix="Can use as"
                     />
                   </div>
                 </div>
@@ -898,7 +891,6 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-s);
-    width: 400px;
   }
 
   .auth-entity-meta {
@@ -927,7 +919,7 @@
   .auth-entity,
   .auth-entity-header {
     display: grid;
-    grid-template-columns: 1fr 110px;
+    grid-template-columns: 1fr 180px;
     align-items: center;
     gap: var(--spacing-xl);
   }
@@ -958,7 +950,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     position: absolute;
-    width: 400px;
+    width: 440px;
     right: 0;
     height: 100%;
     box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);