Update builder side panel to use new copy for roles
This commit is contained in:
parent
c67d415c05
commit
c4de70c77c
2 changed files with 67 additions and 57 deletions
|
@ -20,73 +20,91 @@
|
||||||
export let allowedRoles = null
|
export let allowedRoles = null
|
||||||
export let allowCreator = false
|
export let allowCreator = false
|
||||||
export let fancySelect = false
|
export let fancySelect = false
|
||||||
|
export let labelPrefix = null
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
const RemoveID = "remove"
|
const RemoveID = "remove"
|
||||||
|
|
||||||
|
$: enrichLabel = label => (labelPrefix ? `${labelPrefix} ${label}` : label)
|
||||||
$: options = getOptions(
|
$: options = getOptions(
|
||||||
$roles,
|
$roles,
|
||||||
allowPublic,
|
allowPublic,
|
||||||
allowRemove,
|
allowRemove,
|
||||||
allowedRoles,
|
allowedRoles,
|
||||||
allowCreator
|
allowCreator,
|
||||||
|
enrichLabel
|
||||||
)
|
)
|
||||||
|
|
||||||
const getOptions = (
|
const getOptions = (
|
||||||
roles,
|
roles,
|
||||||
allowPublic,
|
allowPublic,
|
||||||
allowRemove,
|
allowRemove,
|
||||||
allowedRoles,
|
allowedRoles,
|
||||||
allowCreator
|
allowCreator,
|
||||||
|
enrichLabel
|
||||||
) => {
|
) => {
|
||||||
|
// Use roles whitelist if specified
|
||||||
if (allowedRoles?.length) {
|
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,
|
_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) {
|
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 => {
|
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 null
|
||||||
}
|
}
|
||||||
return RoleUtils.getRoleColour(role._id)
|
return RoleUtils.getRoleColour(role._id)
|
||||||
}
|
}
|
||||||
|
|
||||||
const getIcon = role => {
|
const getIcon = role => {
|
||||||
if (allowRemove && role._id === RemoveID) {
|
// Only remove option has an icon
|
||||||
|
if (role._id === RemoveID) {
|
||||||
return "Close"
|
return "Close"
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
|
|
|
@ -471,10 +471,6 @@
|
||||||
await users.removeAppBuilder(userId, prodAppId)
|
await users.removeAppBuilder(userId, prodAppId)
|
||||||
}
|
}
|
||||||
|
|
||||||
const addGroupAppBuilder = async groupId => {
|
|
||||||
await groups.actions.addGroupAppBuilder(groupId, prodAppId)
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeGroupAppBuilder = async groupId => {
|
const removeGroupAppBuilder = async groupId => {
|
||||||
await groups.actions.removeGroupAppBuilder(groupId, prodAppId)
|
await groups.actions.removeGroupAppBuilder(groupId, prodAppId)
|
||||||
}
|
}
|
||||||
|
@ -495,14 +491,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const getInviteRoleValue = invite => {
|
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 Constants.Roles.CREATOR
|
||||||
}
|
}
|
||||||
|
|
||||||
return invite.info.apps?.[prodAppId]
|
return invite.info.apps?.[prodAppId]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -512,7 +506,7 @@
|
||||||
return `This user has been given ${role?.name} access from the ${user.group} group`
|
return `This user has been given ${role?.name} access from the ${user.group} group`
|
||||||
}
|
}
|
||||||
if (user.isAdminOrGlobalBuilder) {
|
if (user.isAdminOrGlobalBuilder) {
|
||||||
return "This user's role grants admin access to all apps"
|
return "Account admins can edit all apps"
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
@ -650,8 +644,9 @@
|
||||||
autoWidth
|
autoWidth
|
||||||
align="right"
|
align="right"
|
||||||
allowedRoles={user.isAdminOrGlobalBuilder
|
allowedRoles={user.isAdminOrGlobalBuilder
|
||||||
? [Constants.Roles.ADMIN]
|
? [Constants.Roles.CREATOR]
|
||||||
: null}
|
: null}
|
||||||
|
labelPrefix="Can use as"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -695,19 +690,16 @@
|
||||||
allowRemove={group.role}
|
allowRemove={group.role}
|
||||||
allowPublic={false}
|
allowPublic={false}
|
||||||
quiet={true}
|
quiet={true}
|
||||||
allowCreator={true}
|
allowCreator={group.role === Constants.Roles.CREATOR}
|
||||||
on:change={e => {
|
on:change={e => {
|
||||||
if (e.detail === Constants.Roles.CREATOR) {
|
onUpdateGroup(group, e.detail)
|
||||||
addGroupAppBuilder(group._id)
|
|
||||||
} else {
|
|
||||||
onUpdateGroup(group, e.detail)
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
on:remove={() => {
|
on:remove={() => {
|
||||||
onUpdateGroup(group)
|
onUpdateGroup(group)
|
||||||
}}
|
}}
|
||||||
autoWidth
|
autoWidth
|
||||||
align="right"
|
align="right"
|
||||||
|
labelPrefix="Can use as"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -753,6 +745,7 @@
|
||||||
allowedRoles={user.isAdminOrGlobalBuilder
|
allowedRoles={user.isAdminOrGlobalBuilder
|
||||||
? [Constants.Roles.CREATOR]
|
? [Constants.Roles.CREATOR]
|
||||||
: null}
|
: null}
|
||||||
|
labelPrefix="Can use as"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -898,7 +891,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-s);
|
gap: var(--spacing-s);
|
||||||
width: 400px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-entity-meta {
|
.auth-entity-meta {
|
||||||
|
@ -927,7 +919,7 @@
|
||||||
.auth-entity,
|
.auth-entity,
|
||||||
.auth-entity-header {
|
.auth-entity-header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 110px;
|
grid-template-columns: 1fr 180px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--spacing-xl);
|
gap: var(--spacing-xl);
|
||||||
}
|
}
|
||||||
|
@ -958,7 +950,7 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 400px;
|
width: 440px;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
|
Loading…
Reference in a new issue