Ensure roles always have new metadta and update access popover

This commit is contained in:
Andrew Kingston 2024-09-11 16:30:17 +01:00
parent e47d25cb48
commit 7e6f1407fe
No known key found for this signature in database
4 changed files with 48 additions and 40 deletions

View File

@ -1,5 +1,6 @@
<script> <script>
import Icon from "../Icon/Icon.svelte" import Icon from "../Icon/Icon.svelte"
import StatusLight from "../StatusLight/StatusLight.svelte"
export let icon = null export let icon = null
export let iconColor = null export let iconColor = null
@ -19,7 +20,9 @@
class:selected class:selected
> >
<div class="left"> <div class="left">
{#if icon} {#if icon === "StatusLight"}
<StatusLight square size="L" color={iconColor} />
{:else if icon}
<Icon name={icon} color={iconColor} /> <Icon name={icon} color={iconColor} />
{/if} {/if}
<div class="list-item__text"> <div class="list-item__text">

View File

@ -30,12 +30,21 @@
$: roleMismatch = checkRoleMismatch(permissions) $: roleMismatch = checkRoleMismatch(permissions)
$: selectedRole = roleMismatch ? null : permissions?.[0]?.value $: selectedRole = roleMismatch ? null : permissions?.[0]?.value
$: readableRole = selectedRole $: readableRole = selectedRole
? $roles.find(x => x._id === selectedRole)?.name ? $roles.find(x => x._id === selectedRole)?.displayName
: null : null
$: buttonLabel = readableRole ? `Access: ${readableRole}` : "Access" $: buttonLabel = readableRole ? `Access: ${readableRole}` : "Access"
$: customRoles = $roles.filter(x => !builtins.includes(x._id))
$: highlight = roleMismatch || selectedRole === Roles.PUBLIC $: highlight = roleMismatch || selectedRole === Roles.PUBLIC
$: builtInRoles = builtins.map(roleId => $roles.find(x => x._id === roleId))
$: customRoles = $roles
.filter(x => !builtins.includes(x._id))
.slice()
.toSorted((a, b) => {
const aName = a.displayName || a.name
const bName = b.displayName || b.name
return aName < bName ? -1 : 1
})
const fetchPermissions = async id => { const fetchPermissions = async id => {
const res = await permissionsStore.forResourceDetailed(id) const res = await permissionsStore.forResourceDetailed(id)
permissions = Object.entries(res?.permissions || {}).map(([perm, info]) => { permissions = Object.entries(res?.permissions || {}).map(([perm, info]) => {
@ -149,39 +158,25 @@
{/if} {/if}
<List> <List>
<ListItem {#each builtInRoles as role}
title="App admin"
subtitle="Only app admins can access this data"
hoverable
selected={selectedRole === Roles.ADMIN}
on:click={() => changePermission(Roles.ADMIN)}
/>
<ListItem
title="App power user"
subtitle="Only app power users can access this data"
hoverable
selected={selectedRole === Roles.POWER}
on:click={() => changePermission(Roles.POWER)}
/>
<ListItem
title="App user"
subtitle="Only logged in users can access this data"
hoverable
selected={selectedRole === Roles.BASIC}
on:click={() => changePermission(Roles.BASIC)}
/>
<ListItem
title="Public user"
subtitle="Users are not required to log in to access this data"
hoverable
selected={selectedRole === Roles.PUBLIC}
on:click={() => changePermission(Roles.PUBLIC)}
/>
{#each customRoles as role}
<ListItem <ListItem
title={role.name} title={role.displayName}
subtitle={role.description}
hoverable hoverable
selected={selectedRole === role._id} selected={selectedRole === role._id}
icon="StatusLight"
iconColor={role.color}
on:click={() => changePermission(role._id)}
/>
{/each}
{#each customRoles as role}
<ListItem
title={role.displayName}
subtitle={role.description}
hoverable
selected={selectedRole === role._id}
icon="StatusLight"
iconColor={role.color}
on:click={() => changePermission(role._id)} on:click={() => changePermission(role._id)}
/> />
{/each} {/each}

View File

@ -14,9 +14,9 @@ export const roleToNode = role => ({
type: "role", type: "role",
position: { x: 0, y: 0 }, position: { x: 0, y: 0 },
data: { data: {
displayName: role.displayName || role.name, displayName: role.displayName,
description: role.description || "Custom role", description: role.description,
color: role.color || "var(--spectrum-global-color-static-magenta-400)", color: role.color,
custom: !role._id.match(/[A-Z]+/), custom: !role._id.match(/[A-Z]+/),
}, },
}) })

View File

@ -1,12 +1,22 @@
import { writable } from "svelte/store" import { derived, writable } from "svelte/store"
import { API } from "api" import { API } from "api"
import { RoleUtils } from "@budibase/frontend-core" import { RoleUtils } from "@budibase/frontend-core"
export function createRolesStore() { export function createRolesStore() {
const { subscribe, update, set } = writable([]) const store = writable([])
const enriched = derived(store, $store => {
return $store.map(role => ({
...role,
// Ensure we have new metadata for all roles
displayName: role.displayName || role.name,
color: role.color || "var(--spectrum-global-color-magenta-400)",
description: role.description || "Custom role",
}))
})
function setRoles(roles) { function setRoles(roles) {
set( store.set(
roles.sort((a, b) => { roles.sort((a, b) => {
const priorityA = RoleUtils.getRolePriority(a._id) const priorityA = RoleUtils.getRolePriority(a._id)
const priorityB = RoleUtils.getRolePriority(b._id) const priorityB = RoleUtils.getRolePriority(b._id)
@ -45,7 +55,7 @@ export function createRolesStore() {
} }
return { return {
subscribe, subscribe: enriched.subscribe,
...actions, ...actions,
} }
} }