MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add new detail popover and update manage access button to use it

This commit is contained in:
Andrew Kingston 2024-08-21 07:46:15 +01:00
parent d8fd021e37
commit f54d1985b4
No known key found for this signature in database
5 changed files with 103 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/bbui/src/Popover/Popover.svelte
View File

@ -143,6 +143,9 @@
border-color: var(--spectrum-global-color-gray-300); border-color: var(--spectrum-global-color-gray-300);
overflow: auto; overflow: auto;
transition: opacity 260ms ease-out; transition: opacity 260ms ease-out;
filter: none;
-webkit-filter: none;
box-shadow: 0 1px 4px var(--drop-shadow);
} }
.blockPointerEvents { .blockPointerEvents {
pointer-events: none; pointer-events: none;

25
packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
View File

@ -2,22 +2,25 @@
import { ActionButton, Modal } from "@budibase/bbui" import { ActionButton, Modal } from "@budibase/bbui"
import { permissions } from "stores/builder" import { permissions } from "stores/builder"
import ManageAccessModal from "../modals/ManageAccessModal.svelte" import ManageAccessModal from "../modals/ManageAccessModal.svelte"
import DetailPopover from "components/common/DetailPopover.svelte"
export let resourceId export let resourceId
export let disabled = false
let modal
let resourcePermissions let resourcePermissions
async function openModal() { $: fetchPermissions(resourceId)
resourcePermissions = await permissions.forResourceDetailed(resourceId)
modal.show() const fetchPermissions = async id => {
console.log("getting perms for", id)
resourcePermissions = await permissions.forResourceDetailed(id)
} }
</script> </script>
<ActionButton icon="LockClosed" quiet on:click={openModal} {disabled}> <DetailPopover title="Manage access">
Access <svelte:fragment slot="anchor" let:open>
</ActionButton> <ActionButton icon="LockClosed" selected={open} quiet>Access</ActionButton>
<Modal bind:this={modal}> </svelte:fragment>
<ManageAccessModal {resourceId} permissions={resourcePermissions} /> {#if resourcePermissions}
</Modal> <ManageAccessModal {resourceId} permissions={resourcePermissions} />
{/if}
</DetailPopover>

82
packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
View File

@ -1,19 +1,8 @@
<script> <script>
import { PermissionSource } from "@budibase/types" import { PermissionSource } from "@budibase/types"
import { roles, permissions as permissionsStore } from "stores/builder" import { roles, permissions as permissionsStore } from "stores/builder"
import { import { Label, Input, Select, notifications, Body } from "@budibase/bbui"
Label,
Input,
Select,
notifications,
Body,
ModalContent,
Tags,
Tag,
Icon,
} from "@budibase/bbui"
import { capitalise } from "helpers" import { capitalise } from "helpers"
import { getFormattedPlanName } from "helpers/planTitle"
import { get } from "svelte/store" import { get } from "svelte/store"
export let resourceId export let resourceId
@ -69,8 +58,6 @@
{} {}
) )
$: requiresPlanToModify = permissions.requiresPlanToModify
let dependantsInfoMessage let dependantsInfoMessage
async function loadDependantInfo() { async function loadDependantInfo() {
const dependantsInfo = await permissionsStore.getDependantsInfo(resourceId) const dependantsInfo = await permissionsStore.getDependantsInfo(resourceId)
@ -94,48 +81,33 @@
loadDependantInfo() loadDependantInfo()
</script> </script>
<ModalContent showCancelButton={false} confirmText="Done"> <Body size="S">Specify the minimum access level role for this data.</Body>
<span slot="header"> <div class="row">
Manage Access <Label extraSmall grey>Level</Label>
{#if requiresPlanToModify} <Label extraSmall grey>Role</Label>
<span class="lock-tag"> {#each Object.keys(computedPermissions) as level}
<Tags> <Input value={capitalise(level)} disabled />
<Tag icon="LockClosed" <Select
>{getFormattedPlanName(requiresPlanToModify)}</Tag placeholder={false}
> value={computedPermissions[level].selectedValue}
</Tags> on:change={e => changePermission(level, e.detail)}
</span> options={computedPermissions[level].options}
{/if} getOptionLabel={x => x.name}
</span> getOptionValue={x => x._id}
<Body size="S">Specify the minimum access level role for this data.</Body> />
<div class="row"> {/each}
<Label extraSmall grey>Level</Label> </div>
<Label extraSmall grey>Role</Label>
{#each Object.keys(computedPermissions) as level}
<Input value={capitalise(level)} disabled />
<Select
disabled={requiresPlanToModify}
placeholder={false}
value={computedPermissions[level].selectedValue}
on:change={e => changePermission(level, e.detail)}
options={computedPermissions[level].options}
getOptionLabel={x => x.name}
getOptionValue={x => x._id}
/>
{/each}
</div>
{#if dependantsInfoMessage} {#if dependantsInfoMessage}
<div class="inheriting-resources"> <div class="inheriting-resources">
<Icon name="Alert" /> <Icon name="Alert" />
<Body size="S"> <Body size="S">
<i> <i>
{dependantsInfoMessage} {dependantsInfoMessage}
</i> </i>
</Body> </Body>
</div> </div>
{/if} {/if}
</ModalContent>
<style> <style>
.row { .row {

59
packages/builder/src/components/common/DetailPopover.svelte Normal file
View File

@ -0,0 +1,59 @@
<script>
import { Popover, Icon } from "@budibase/bbui"
export let title
export let align = "left"
let popover
let anchor
let open
export const show = () => popover?.show()
export const hide = () => popover?.hide()
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="anchor" bind:this={anchor} on:click={show}>
<slot name="anchor" {open} />
</div>
<Popover bind:this={popover} bind:open {anchor} {align} minWidth={300}>
<div class="detail-popover">
<div class="detail-popover__header">
<div class="detail-popover__title">
{title}
</div>
<Icon name="Close" />
</div>
<div class="detail-popover__body">
<slot />
</div>
</div>
</Popover>
<style>
.detail-popover {
--padding: 12px;
background-color: var(--spectrum-alias-background-color-primary);
}
.detail-popover__header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--spectrum-global-color-gray-300);
padding: var(--padding);
}
.detail-popover__title {
font-size: 16px;
font-weight: 600;
}
.detail-popover__body {
padding: var(--padding);
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--padding);
}
</style>

1
packages/frontend-core/src/components/grid/stores/datasource.js
View File

@ -152,7 +152,6 @@ export const createActions = context => {
return return
} }
schemaMutations.update($schemaMutations => { schemaMutations.update($schemaMutations => {
console.log($schemaMutations)
return { return {
...$schemaMutations, ...$schemaMutations,
[field]: { [field]: {