diff --git a/packages/builder/src/components/common/RoleSelect.svelte b/packages/builder/src/components/common/RoleSelect.svelte index 2df61926e1..1158107fd6 100644 --- a/packages/builder/src/components/common/RoleSelect.svelte +++ b/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 => - allowedRoles.includes(role._id) - ) - return [ - ...filteredRoles, - ...(allowedRoles.includes(Constants.Roles.CREATOR) - ? [{ _id: Constants.Roles.CREATOR, name: "Creator", enabled: false }] - : []), - ] - } - let newRoles = [...roles] - - if (allowCreator) { - newRoles = [ - { + let options = roles + .filter(role => allowedRoles.includes(role._id)) + .map(role => ({ + name: enrichLabel(role.name), + _id: role._id, + })) + if (allowedRoles.includes(Constants.Roles.CREATOR)) { + options.push({ _id: Constants.Roles.CREATOR, - name: "Creator", - tag: - !$licensing.perAppBuildersEnabled && - capitalise(Constants.PlanType.BUSINESS), - }, - ...newRoles, - ] + name: "Can edit", + enabled: false, + }) + } + return options } + + // 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 = [ - ...newRoles, - { - _id: RemoveID, - name: "Remove", - }, - ] + options.push({ + _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 diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index 6f3979e3ad..adb0c985dc 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/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) { - return Constants.Roles.ADMIN - } - - if (invite.info?.builder?.apps?.includes(prodAppId)) { + if ( + (invite.info?.admin?.global && invite.info?.builder?.global) || + 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" /> @@ -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) { - addGroupAppBuilder(group._id) - } else { - onUpdateGroup(group, e.detail) - } + onUpdateGroup(group, e.detail) }} on:remove={() => { onUpdateGroup(group) }} autoWidth align="right" + labelPrefix="Can use as" /> @@ -753,6 +745,7 @@ allowedRoles={user.isAdminOrGlobalBuilder ? [Constants.Roles.CREATOR] : null} + labelPrefix="Can use as" /> @@ -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);