CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-06 15:00:49 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' of github.com:Budibase/budibase into views-v2-frontend

Browse source
This commit is contained in:
Andrew Kingston 2023-08-24 12:07:23 +01:00
parent 4192618bdf 3dea081fdf
commit a22fc8d208
113 changed files with 1624 additions and 1277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
hosting/docker-compose.test.yaml
View file

@ -1,47 +0,0 @@
version: "3"
# optional ports are specified throughout for more advanced use cases.
services:
minio-service:
restart: on-failure
# Last version that supports the "fs" backend
image: minio/minio:RELEASE.2022-10-24T18-35-07Z
ports:
- "9000"
- "9001"
environment:
MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
command: server /data --console-address ":9001"
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
interval: 30s
timeout: 20s
retries: 3
couchdb-service:
# platform: linux/amd64
restart: on-failure
image: budibase/couchdb
environment:
- COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
- COUCHDB_USER=${COUCH_DB_USER}
ports:
- "5984"
- "4369"
- "9100"
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:5984/_up"]
interval: 30s
timeout: 20s
retries: 3
redis-service:
restart: on-failure
image: redis
command: redis-server --requirepass ${REDIS_PASSWORD}
ports:
- "6379"
healthcheck:
test: ["CMD", "redis-cli", "ping"]

0
hosting/dependencies/Dockerfile → hosting/tests/Dockerfile
View file

0
hosting/dependencies/README.md → hosting/tests/README.md
View file

0
hosting/dependencies/runner.sh → hosting/tests/runner.sh
View file

12
jestTestcontainersConfigGenerator.js
View file

@ -9,18 +9,8 @@ module.exports = () => {
},
wait: {
type: "ports",
timeout: 10000,
timeout: 20000,
}
}
}
}
// module.exports = () => {
// return {
// dockerCompose: {
// composeFilePath: "../../hosting",
// composeFile: "docker-compose.test.yaml",
// startupTimeout: 10000,
// },
// }
// }

2
lerna.json
View file

@ -1,5 +1,5 @@
{
"version": "2.9.30-alpha.9",
"version": "2.9.30-alpha.13",
"npmClient": "yarn",
"packages": [
"packages/*"

14
packages/backend-core/src/cache/user.ts vendored
View file

@ -4,6 +4,8 @@ import * as context from "../context"
import * as platform from "../platform"
import env from "../environment"
import * as accounts from "../accounts"
import { UserDB } from "../users"
import { sdk } from "@budibase/shared-core"
const EXPIRY_SECONDS = 3600
@ -60,6 +62,18 @@ export async function getUser(
// make sure the tenant ID is always correct/set
user.tenantId = tenantId
}
// if has groups, could have builder permissions granted by a group
if (user.userGroups && !sdk.users.isGlobalBuilder(user)) {
await context.doInTenant(tenantId, async () => {
const appIds = await UserDB.getGroupBuilderAppIds(user)
if (appIds.length) {
const existing = user.builder?.apps || []
user.builder = {
apps: [...new Set(existing.concat(appIds))],
}
}
})
}
return user
}

11
packages/backend-core/src/middleware/builderOnly.ts
View file

@ -5,11 +5,12 @@ import env from "../environment"
export default async (ctx: UserCtx, next: any) => {
const appId = getAppId()
const builderFn = env.isWorker()
? hasBuilderPermissions
: env.isApps()
? isBuilder
: undefined
const builderFn =
env.isWorker() || !appId
? hasBuilderPermissions
: env.isApps()
? isBuilder
: undefined
if (!builderFn) {
throw new Error("Service name unknown - middleware inactive.")
}

11
packages/backend-core/src/middleware/builderOrAdmin.ts
View file

@ -5,11 +5,12 @@ import env from "../environment"
export default async (ctx: UserCtx, next: any) => {
const appId = getAppId()
const builderFn = env.isWorker()
? hasBuilderPermissions
: env.isApps()
? isBuilder
: undefined
const builderFn =
env.isWorker() || !appId
? hasBuilderPermissions
: env.isApps()
? isBuilder
: undefined
if (!builderFn) {
throw new Error("Service name unknown - middleware inactive.")
}

18
packages/backend-core/src/users/db.ts
View file

@ -20,6 +20,8 @@ import {
SaveUserOpts,
User,
UserStatus,
UserGroup,
ContextUser,
} from "@budibase/types"
import {
getAccountHolderFromUserIds,
@ -32,8 +34,14 @@ import { hash } from "../utils"
type QuotaUpdateFn = (change: number, cb?: () => Promise<any>) => Promise<any>
type GroupUpdateFn = (groupId: string, userIds: string[]) => Promise<any>
type FeatureFn = () => Promise<Boolean>
type GroupGetFn = (ids: string[]) => Promise<UserGroup[]>
type GroupBuildersFn = (user: User) => Promise<string[]>
type QuotaFns = { addUsers: QuotaUpdateFn; removeUsers: QuotaUpdateFn }
type GroupFns = { addUsers: GroupUpdateFn }
type GroupFns = {
addUsers: GroupUpdateFn
getBulk: GroupGetFn
getGroupBuilderAppIds: GroupBuildersFn
}
type FeatureFns = { isSSOEnforced: FeatureFn; isAppBuildersEnabled: FeatureFn }
const bulkDeleteProcessing = async (dbUser: User) => {
@ -465,4 +473,12 @@ export class UserDB {
await cache.user.invalidateUser(userId)
await sessions.invalidateSessions(userId, { reason: "deletion" })
}
static async getGroups(groupIds: string[]) {
return await this.groups.getBulk(groupIds)
}
static async getGroupBuilderAppIds(user: User) {
return await this.groups.getGroupBuilderAppIds(user)
}
}

4
packages/backend-core/tests/core/utilities/mocks/licenses.ts
View file

@ -102,6 +102,10 @@ export const useAppBuilders = () => {
return useFeature(Feature.APP_BUILDERS)
}
export const useViewPermissions = () => {
return useFeature(Feature.VIEW_PERMISSIONS)
}
// QUOTAS
export const setAutomationLogsQuota = (value: number) => {

3
packages/bbui/src/Actions/position_dropdown.js
View file

@ -32,11 +32,10 @@ export default function positionDropdown(element, opts) {
left: null,
top: null,
}
// Determine vertical styles
if (align === "right-outside") {
styles.top = anchorBounds.top
} else if (window.innerHeight - anchorBounds.bottom < 100) {
} else if (window.innerHeight - anchorBounds.bottom < (maxHeight || 100)) {
styles.top = anchorBounds.top - elementBounds.height - offset
styles.maxHeight = maxHeight || 240
} else {

75
packages/bbui/src/ColorPicker/ColorPicker.svelte
View file

@ -1,8 +1,8 @@
<script>
import Popover from "../Popover/Popover.svelte"
import Layout from "../Layout/Layout.svelte"
import { createEventDispatcher } from "svelte"
import "@spectrum-css/popover/dist/index-vars.css"
import clickOutside from "../Actions/click_outside"
import { fly } from "svelte/transition"
import Icon from "../Icon/Icon.svelte"
import Input from "../Form/Input.svelte"
import { capitalise } from "../helpers"
@ -10,9 +10,11 @@
export let value
export let size = "M"
export let spectrumTheme
export let alignRight = false
export let offset
export let align
let open = false
let dropdown
let preview
$: customValue = getCustomValue(value)
$: checkColor = getCheckColor(value)
@ -82,7 +84,7 @@
const onChange = value => {
dispatch("change", value)
open = false
dropdown.hide()
}
const getCustomValue = value => {
@ -119,30 +121,25 @@
return "var(--spectrum-global-color-static-gray-900)"
}
const handleOutsideClick = event => {
if (open) {
event.stopPropagation()
open = false
}
}
</script>
<div class="container">
<div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
<div
class="fill {spectrumTheme || ''}"
style={value ? `background: ${value};` : ""}
class:placeholder={!value}
/>
</div>
{#if open}
<div
use:clickOutside={handleOutsideClick}
transition:fly|local={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
class:spectrum-Popover--align-right={alignRight}
>
<div
bind:this={preview}
class="preview size--{size || 'M'}"
on:click={() => {
dropdown.toggle()
}}
>
<div
class="fill {spectrumTheme || ''}"
style={value ? `background: ${value};` : ""}
class:placeholder={!value}
/>
</div>
<Popover bind:this={dropdown} anchor={preview} maxHeight={320} {offset} {align}>
<Layout paddingX="XL" paddingY="L">
<div class="container">
{#each categories as category}
<div class="category">
<div class="heading">{category.label}</div>
@ -187,8 +184,8 @@
</div>
</div>
</div>
{/if}
</div>
</Layout>
</Popover>
<style>
.container {
@ -248,20 +245,6 @@
width: 48px;
height: 48px;
}
.spectrum-Popover {
width: 210px;
z-index: 999;
top: 100%;
padding: var(--spacing-l) var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-xl);
}
.spectrum-Popover--align-right {
right: 0;
}
.colors {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
@ -297,7 +280,11 @@
.category--custom .heading {
margin-bottom: var(--spacing-xs);
}
.container {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.spectrum-wrapper {
background-color: transparent;
}

8
packages/bbui/src/Popover/Popover.svelte
View file

@ -35,6 +35,14 @@
open = false
}
export const toggle = () => {
if (!open) {
show()
} else {
hide()
}
}
const handleOutsideClick = e => {
if (open) {
// Stop propagation if the source is the anchor

10
packages/builder/src/builderStore/index.js
View file

@ -4,7 +4,7 @@ import { getTemporalStore } from "./store/temporal"
import { getThemeStore } from "./store/theme"
import { getUserStore } from "./store/users"
import { getDeploymentStore } from "./store/deployments"
import { derived } from "svelte/store"
import { derived, writable } from "svelte/store"
import { findComponent, findComponentPath } from "./componentUtils"
import { RoleUtils } from "@budibase/frontend-core"
import { createHistoryStore } from "builderStore/store/history"
@ -61,6 +61,12 @@ export const selectedLayout = derived(store, $store => {
export const selectedComponent = derived(
[store, selectedScreen],
([$store, $selectedScreen]) => {
if (
$selectedScreen &&
$store.selectedComponentId?.startsWith(`${$selectedScreen._id}-`)
) {
return $selectedScreen?.props
}
if (!$selectedScreen || !$store.selectedComponentId) {
return null
}
@ -141,3 +147,5 @@ export const userSelectedResourceMap = derived(userStore, $userStore => {
export const isOnlyUser = derived(userStore, $userStore => {
return $userStore.length < 2
})
export const screensHeight = writable("210px")

29
packages/builder/src/builderStore/store/frontend.js
View file

@ -225,7 +225,6 @@ export const getFrontendStore = () => {
// Select new screen
store.update(state => {
state.selectedScreenId = screen._id
state.selectedComponentId = screen.props?._id
return state
})
},
@ -769,9 +768,13 @@ export const getFrontendStore = () => {
else {
await store.actions.screens.patch(screen => {
// Find the selected component
let selectedComponentId = state.selectedComponentId
if (selectedComponentId.startsWith(`${screen._id}-`)) {
selectedComponentId = screen?.props._id
}
const currentComponent = findComponent(
screen.props,
state.selectedComponentId
selectedComponentId
)
if (!currentComponent) {
return false
@ -994,12 +997,20 @@ export const getFrontendStore = () => {
const componentId = state.selectedComponentId
const screen = get(selectedScreen)
const parent = findComponentParent(screen.props, componentId)
// Check we aren't right at the top of the tree
const index = parent?._children.findIndex(x => x._id === componentId)
if (!parent || componentId === screen.props._id) {
// Check for screen and navigation component edge cases
const screenComponentId = `${screen._id}-screen`
const navComponentId = `${screen._id}-navigation`
if (componentId === screenComponentId) {
return null
}
if (componentId === navComponentId) {
return screenComponentId
}
if (parent._id === screen.props._id && index === 0) {
return navComponentId
}
// If we have siblings above us, choose the sibling or a descendant
if (index > 0) {
@ -1021,12 +1032,20 @@ export const getFrontendStore = () => {
return parent._id
},
getNext: () => {
const state = get(store)
const component = get(selectedComponent)
const componentId = component?._id
const screen = get(selectedScreen)
const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex(x => x._id === componentId)
// Check for screen and navigation component edge cases
const screenComponentId = `${screen._id}-screen`
const navComponentId = `${screen._id}-navigation`
if (state.selectedComponentId === screenComponentId) {
return navComponentId
}
// If we have children, select first child
if (component._children?.length) {
return component._children[0]._id

4
packages/builder/src/components/commandPalette/CommandPalette.svelte
View file

@ -127,7 +127,9 @@
type: "Screen",
name: screen.routing.route,
icon: "WebPage",
action: () => $goto(`./design/${screen._id}/components`),
action: () => {
$goto(`./design/${screen._id}/${screen._id}-screen`)
},
})),
...($automationStore?.automations?.map(automation => ({
type: "Automation",

17
packages/builder/src/components/common/NavItem.svelte
View file

@ -21,6 +21,7 @@
export let id
export let showTooltip = false
export let selectedBy = null
export let compact = false
const scrollApi = getContext("scroll")
const dispatch = createEventDispatcher()
@ -80,8 +81,9 @@
{#if withArrow}
<div
class:opened
class:relative={indentLevel === 0}
class:absolute={indentLevel > 0}
class:relative={indentLevel === 0 && !compact}
class:absolute={indentLevel > 0 && !compact}
class:compact
class="icon arrow"
on:click={onIconClick}
>
@ -194,10 +196,21 @@
padding: 8px;
margin-left: -8px;
}
.compact {
position: absolute;
left: 6px;
padding: 8px;
margin-left: -8px;
}
.icon.arrow :global(svg) {
width: 12px;
height: 12px;
}
.icon.arrow.compact :global(svg) {
width: 9px;
height: 9px;
}
.icon.arrow.relative {
position: relative;
margin: 0 -6px 0 -4px;

9
packages/builder/src/components/design/Panel.svelte
View file

@ -1,5 +1,5 @@
<script>
import { Icon, Heading } from "@budibase/bbui"
import { Icon, Body } from "@budibase/bbui"
export let title
export let icon
@ -25,7 +25,7 @@
<Icon name={icon} />
{/if}
<div class="title">
<Heading size="XXS">{title || ""}</Heading>
<Body size="S">{title}</Body>
</div>
{#if showAddButton}
<div class="add-button" on:click={onClickAddButton}>
@ -78,15 +78,14 @@
align-items: center;
padding: 0 var(--spacing-l);
border-bottom: var(--border-light);
gap: var(--spacing-l);
gap: var(--spacing-m);
}
.title {
flex: 1 1 auto;
width: 0;
}
.title :global(h1) {
.title :global(p) {
overflow: hidden;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}

2
packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte
View file

@ -42,7 +42,6 @@
<ColorPicker
value={column.background}
on:change={e => (column.background = e.detail)}
alignRight
spectrumTheme={$store.theme}
/>
</Layout>
@ -51,7 +50,6 @@
<ColorPicker
value={column.color}
on:change={e => (column.color = e.detail)}
alignRight
spectrumTheme={$store.theme}
/>
</Layout>

5
packages/builder/src/helpers/urlStateSync.js
View file

@ -56,6 +56,11 @@ export const syncURLToState = options => {
// Navigate to a certain URL
const gotoUrl = (url, params) => {
// Clean URL
if (url?.endsWith("/index")) {
url = url.replace("/index", "")
}
// Allow custom URL handling
if (beforeNavigate) {
const res = beforeNavigate(url, params)
if (res?.url) {

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentInfoSection.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUIDrawer.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUISection.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ConditionalUISection.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/DesignSection.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/StyleSection.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/componentStyles.js
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksDrawer.svelte
View file

10
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/LinksEditor.svelte
View file

@ -1,6 +1,6 @@
<script>
import { Button, Drawer } from "@budibase/bbui"
import NavigationLinksDrawer from "./NavigationLinksDrawer.svelte"
import NavigationLinksDrawer from "./LinksDrawer.svelte"
import { cloneDeep } from "lodash/fp"
import { store } from "builderStore"
@ -20,12 +20,8 @@
}
</script>
<Button cta on:click={openDrawer}>Configure links</Button>
<Drawer
bind:this={drawer}
title={"Navigation Links"}
width="calc(100% - 334px)"
>
<Button cta on:click={openDrawer}>Configure Links</Button>
<Drawer bind:this={drawer} title={"Navigation Links"}>
<svelte:fragment slot="description">
Configure the links in your navigation bar.
</svelte:fragment>

225
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte Normal file
View file

@ -0,0 +1,225 @@
<script>
import LinksEditor from "./LinksEditor.svelte"
import { get } from "svelte/store"
import Panel from "components/design/Panel.svelte"
import {
Detail,
Toggle,
Body,
Icon,
ColorPicker,
Input,
Label,
ActionGroup,
ActionButton,
Checkbox,
notifications,
Select,
} from "@budibase/bbui"
import { selectedScreen, store } from "builderStore"
import { DefaultAppTheme } from "constants"
const updateShowNavigation = async e => {
await store.actions.screens.updateSetting(
get(selectedScreen),
"showNavigation",
e.detail
)
}
const update = async (key, value) => {
try {
let navigation = $store.navigation
navigation[key] = value
await store.actions.navigation.save(navigation)
} catch (error) {
notifications.error("Error updating navigation settings")
}
}
</script>
<Panel
title="Navigation"
icon={$selectedScreen.showNavigation ? "Visibility" : "VisibilityOff"}
borderLeft
wide
>
<div class="generalSection">
<div class="subheading">
<Detail>General</Detail>
</div>
<div class="toggle">
<Toggle
on:change={updateShowNavigation}
value={$selectedScreen.showNavigation}
/>
<Body size="S">Show nav on this screen</Body>
</div>
</div>
{#if $selectedScreen.showNavigation}
<div class="divider" />
<div class="customizeSection">
<div class="subheading">
<Detail>Customize</Detail>
</div>
<div class="info">
<Icon name="InfoOutline" size="S" />
<Body size="S">These settings apply to all screens</Body>
</div>
<div class="configureLinks">
<LinksEditor />
</div>
<div class="controls">
<div class="label">
<Label size="M">Position</Label>
</div>
<ActionGroup quiet>
<ActionButton
selected={$store.navigation.navigation === "Top"}
quiet={$store.navigation.navigation !== "Top"}
icon="PaddingTop"
on:click={() => update("navigation", "Top")}
/>
<ActionButton
selected={$store.navigation.navigation === "Left"}
quiet={$store.navigation.navigation !== "Left"}
icon="PaddingLeft"
on:click={() => update("navigation", "Left")}
/>
</ActionGroup>
{#if $store.navigation.navigation === "Top"}
<div class="label">
<Label size="M">Sticky header</Label>
</div>
<Checkbox
value={$store.navigation.sticky}
on:change={e => update("sticky", e.detail)}
/>
<div class="label">
<Label size="M">Width</Label>
</div>
<Select
options={["Max", "Large", "Medium", "Small"]}
plaveholder={null}
value={$store.navigation.navWidth}
on:change={e => update("navWidth", e.detail)}
/>
{/if}
<div class="label">
<Label size="M">Show logo</Label>
</div>
<Checkbox
value={!$store.navigation.hideLogo}
on:change={e => update("hideLogo", !e.detail)}
/>
{#if !$store.navigation.hideLogo}
<div class="label">
<Label size="M">Logo URL</Label>
</div>
<Input
value={$store.navigation.logoUrl}
on:change={e => update("logoUrl", e.detail)}
updateOnChange={false}
/>
{/if}
<div class="label">
<Label size="M">Show title</Label>
</div>
<Checkbox
value={!$store.navigation.hideTitle}
on:change={e => update("hideTitle", !e.detail)}
/>
{#if !$store.navigation.hideTitle}
<div class="label">
<Label size="M">Title</Label>
</div>
<Input
value={$store.navigation.title}
on:change={e => update("title", e.detail)}
updateOnChange={false}
/>
{/if}
<div class="label">
<Label>Background</Label>
</div>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.navigation.navBackground ||
DefaultAppTheme.navBackground}
on:change={e => update("navBackground", e.detail)}
/>
<div class="label">
<Label>Text</Label>
</div>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
on:change={e => update("navTextColor", e.detail)}
/>
</div>
</div>
{/if}
</Panel>
<style>
.generalSection {
padding: 13px 13px 25px;
}
.customizeSection {
padding: 13px 13px 25px;
}
.subheading {
margin-bottom: 10px;
}
.subheading :global(p) {
color: var(--grey-6);
}
.toggle {
display: flex;
align-items: center;
}
.divider {
border-top: 1px solid var(--grey-3);
}
.controls {
position: relative;
display: grid;
grid-template-columns: 90px 1fr;
align-items: start;
transition: background 130ms ease-out, border-color 130ms ease-out;
border-left: 4px solid transparent;
margin: 0 calc(-1 * var(--spacing-xl));
padding: 0 var(--spacing-xl) 0 calc(var(--spacing-xl) - 4px);
gap: 12px;
}
.label {
margin-top: 16px;
transform: translateY(-50%);
}
.info {
background-color: var(--background-alt);
padding: 12px;
display: flex;
border-radius: 4px;
gap: 4px;
margin-bottom: 16px;
}
.info :global(svg) {
margin-right: 5px;
color: var(--spectrum-global-color-gray-600);
}
.configureLinks :global(button) {
margin-bottom: 20px;
width: 100%;
}
</style>

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/AppThemeSelect.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ButtonRoundnessSelect.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ButtonRoundnessSelect.svelte
View file

68
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
View file

@ -1,12 +1,8 @@
<script>
import Panel from "components/design/Panel.svelte"
import { get } from "svelte/store"
import { Helpers } from "@budibase/bbui"
import {
Input,
Layout,
Button,
Toggle,
Checkbox,
Banner,
Select,
@ -16,7 +12,6 @@
import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
import { selectedScreen, store } from "builderStore"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { goto } from "@roxi/routify"
import ButtonActionEditor from "components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte"
import { getBindableProperties } from "builderStore/dataBinding"
@ -119,15 +114,6 @@
label: "On screen load",
control: ButtonActionEditor,
},
{
key: "showNavigation",
label: "Navigation",
control: Toggle,
props: {
text: "Show nav",
disabled: !!$selectedScreen.layoutId,
},
},
{
key: "width",
label: "Width",
@ -145,36 +131,24 @@
}
</script>
<Panel
title={$selectedScreen.routing.route}
icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
borderLeft
wide
>
<Layout gap="S" paddingX="L" paddingY="XL">
{#if $selectedScreen.layoutId}
<Banner
type="warning"
extraButtonText="Detach custom layout"
extraButtonAction={removeCustomLayout}
showCloseButton={false}
>
This screen uses a custom layout, which is deprecated
</Banner>
{/if}
{#each screenSettings as setting (setting.key)}
<PropertyControl
control={setting.control}
label={setting.label}
key={setting.key}
value={Helpers.deepGet($selectedScreen, setting.key)}
onChange={val => setScreenSetting(setting, val)}
props={{ ...setting.props, error: errors[setting.key] }}
{bindings}
/>
{/each}
<Button secondary on:click={() => $goto("../components")}>
View components
</Button>
</Layout>
</Panel>
{#if $selectedScreen.layoutId}
<Banner
type="warning"
extraButtonText="Detach custom layout"
extraButtonAction={removeCustomLayout}
showCloseButton={false}
>
This screen uses a custom layout, which is deprecated
</Banner>
{/if}
{#each screenSettings as setting (setting.key)}
<PropertyControl
control={setting.control}
label={setting.label}
key={setting.key}
value={Helpers.deepGet($selectedScreen, setting.key)}
onChange={val => setScreenSetting(setting, val)}
props={{ ...setting.props, error: errors[setting.key] }}
{bindings}
/>
{/each}

78
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte Normal file
View file

@ -0,0 +1,78 @@
<script>
import {
Layout,
Label,
ColorPicker,
notifications,
Icon,
Body,
} from "@budibase/bbui"
import { store } from "builderStore"
import { get } from "svelte/store"
import { DefaultAppTheme } from "constants"
import AppThemeSelect from "./AppThemeSelect.svelte"
import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
$: customTheme = $store.customTheme || {}
const update = async (property, value) => {
try {
store.actions.customTheme.save({
...get(store).customTheme,
[property]: value,
})
} catch (error) {
notifications.error("Error updating custom theme")
}
}
</script>
<div class="info">
<Icon name="InfoOutline" size="S" />
<Body size="S">These settings apply to all screens</Body>
</div>
<Layout noPadding gap="S">
<Layout noPadding gap="XS">
<AppThemeSelect />
</Layout>
<Layout noPadding gap="XS">
<Label>Button roundness</Label>
<ButtonRoundnessSelect
{customTheme}
on:change={e => update("buttonBorderRadius", e.detail)}
/>
</Layout>
<PropertyControl
label="Accent color"
control={ColorPicker}
value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
onChange={val => update("primaryColor", val)}
props={{
spectrumTheme: $store.theme,
}}
/>
<PropertyControl
label="Hover"
control={ColorPicker}
value={customTheme.primaryColorHover || DefaultAppTheme.primaryColorHover}
onChange={val => update("primaryColorHover", val)}
props={{
spectrumTheme: $store.theme,
}}
/>
</Layout>
<style>
.info {
background-color: var(--background-alt);
padding: 12px;
display: flex;
border-radius: 4px;
gap: 4px;
}
.info :global(svg) {
margin-right: 5px;
color: var(--spectrum-global-color-gray-600);
}
</style>

51
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte Normal file
View file

@ -0,0 +1,51 @@
<script>
import GeneralPanel from "./GeneralPanel.svelte"
import ThemePanel from "./ThemePanel.svelte"
import { selectedScreen } from "builderStore"
import Panel from "components/design/Panel.svelte"
import { capitalise } from "helpers"
import { ActionButton, Layout } from "@budibase/bbui"
let activeTab = "general"
const tabs = ["general", "theme"]
</script>
<Panel
title={$selectedScreen.routing.route}
icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
borderLeft
wide
>
<div slot="panel-header-content">
<div class="settings-tabs">
{#each tabs as tab}
<ActionButton
size="M"
quiet
selected={activeTab === tab}
on:click={() => {
activeTab = tab
}}
>
{capitalise(tab)}
</ActionButton>
{/each}
</div>
</div>
<Layout gap="S" paddingX="L" paddingY="XL">
{#if activeTab === "theme"}
<ThemePanel />
{:else}
<GeneralPanel />
{/if}
</Layout>
</Panel>
<style>
.settings-tabs {
display: flex;
gap: var(--spacing-s);
padding: 0 var(--spacing-l);
padding-bottom: var(--spacing-l);
}
</style>

52
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte Normal file
View file

@ -0,0 +1,52 @@
<script>
import { syncURLToState } from "helpers/urlStateSync"
import { store, selectedScreen } from "builderStore"
import * as routify from "@roxi/routify"
import { onDestroy } from "svelte"
import { findComponent } from "builderStore/componentUtils"
import ComponentSettingsPanel from "./_components/Component/ComponentSettingsPanel.svelte"
import NavigationPanel from "./_components/Navigation/index.svelte"
import ScreenSettingsPanel from "./_components/Screen/index.svelte"
$: componentId = $store.selectedComponentId
$: store.actions.websocket.selectResource(componentId)
$: params = routify.params
$: routeComponentId = $params.componentId
// Hide new component panel whenever component ID changes
const closeNewComponentPanel = url => {
if (url?.endsWith("/new")) {
url = url.replace("/new", "")
}
return { url }
}
const validate = id => {
if (id === `${$store.selectedScreenId}-screen`) return true
if (id === `${$store.selectedScreenId}-navigation`) return true
return !!findComponent($selectedScreen.props, id)
}
// Keep URL and state in sync for selected component ID
const stopSyncing = syncURLToState({
urlParam: "componentId",
stateKey: "selectedComponentId",
validate,
fallbackUrl: "../",
store,
routify,
beforeNavigate: closeNewComponentPanel,
})
onDestroy(stopSyncing)
</script>
{#if routeComponentId === `${$store.selectedScreenId}-screen`}
<ScreenSettingsPanel />
{:else if routeComponentId === `${$store.selectedScreenId}-navigation`}
<NavigationPanel />
{:else}
<ComponentSettingsPanel />
{/if}
<slot />

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/index.svelte Normal file
View file

@ -0,0 +1 @@
<!-- Required to make Routify happy -->

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
View file

@ -31,6 +31,10 @@
$: orderMap = createComponentOrderMap(componentList)
const getAllowedComponents = (allComponents, screen, component) => {
// Default to using the root screen container if no component specified
if (!component) {
component = screen.props
}
const path = findComponentPath(screen?.props, component?._id)
if (!path?.length) {
return []

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/index.svelte
View file

47
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View file

@ -1,32 +1,16 @@
<script>
import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
import AppPreview from "./AppPreview.svelte"
import { store, sortedScreens, screenHistoryStore } from "builderStore"
import { Select } from "@budibase/bbui"
import { RoleUtils } from "@budibase/frontend-core"
import { store, screenHistoryStore } from "builderStore"
import UndoRedoControl from "components/common/UndoRedoControl.svelte"
import { isActive } from "@roxi/routify"
</script>
<div class="app-panel">
<div class="header">
<div class="header-left">
<Select
placeholder={null}
options={$sortedScreens}
getOptionLabel={x => x.routing.route}
getOptionValue={x => x._id}
getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
value={$store.selectedScreenId}
on:change={e => store.actions.screens.select(e.detail)}
quiet
autoWidth
/>
<UndoRedoControl store={screenHistoryStore} />
</div>
<div class="header-right">
{#if $isActive("./screens") || $isActive("./components")}
<UndoRedoControl store={screenHistoryStore} />
{/if}
{#if $store.clientFeatures.devicePreview}
<DevicePreviewSelect />
{/if}
@ -47,37 +31,24 @@
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-m);
padding: var(--spacing-l) var(--spacing-xl);
padding: 9px var(--spacing-m);
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: var(--spacing-l);
margin: 0 2px;
z-index: 1;
margin-bottom: 9px;
}
.header-left :global(div) {
border-right: none;
}
.header-left,
.header-right {
margin-left: auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xl);
}
.header-left {
flex: 1 1 auto;
width: 0;
}
.header-left :global(> *) {
max-width: 100%;
}
.header-left :global(.spectrum-Picker) {
font-weight: 600;
color: var(--spectrum-global-color-gray-900);
}
.content {
flex: 1 1 auto;
}

57
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View file

@ -1,13 +1,7 @@
<script>
import { get } from "svelte/store"
import { onMount, onDestroy } from "svelte"
import {
store,
selectedComponent,
selectedScreen,
selectedLayout,
currentAsset,
} from "builderStore"
import { store, selectedScreen, currentAsset } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import {
ProgressCircle,
@ -20,12 +14,10 @@
import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
import { findComponent, findComponentPath } from "builderStore/componentUtils"
import { isActive, goto } from "@roxi/routify"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
let iframe
let layout
let screen
let selectedComponentId
let confirmDeleteDialog
let idToDelete
let loading = true
@ -39,36 +31,11 @@
BUDIBASE: "type",
}
const placeholderScreen = new Screen()
.name("Screen Placeholder")
.route("/")
.component("@budibase/standard-components/screenslot")
.instanceName("Content Placeholder")
.normalStyle({ flex: "1 1 auto" })
.json()
// Extract data to pass to the iframe
$: {
// If viewing legacy layouts, always show the custom layout
if ($isActive("./layouts")) {
screen = placeholderScreen
layout = $selectedLayout
} else {
screen = $selectedScreen
layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
}
}
$: screen = $selectedScreen
// Determine selected component ID
$: {
if ($isActive("./components")) {
selectedComponentId = $store.selectedComponentId
} else if ($isActive("./navigation")) {
selectedComponentId = "navigation"
} else {
selectedComponentId = null
}
}
$: selectedComponentId = $store.selectedComponentId
$: previewData = {
appId: $store.appId,
@ -98,9 +65,7 @@
$: refreshContent(json)
// Determine if the add component menu is active
$: isAddingComponent = $isActive(
`./components/${$selectedComponent?._id}/new`
)
$: isAddingComponent = $isActive(`./${selectedComponentId}/new`)
// Register handler to send custom to the preview
$: sendPreviewEvent = (name, payload) => {
@ -152,9 +117,6 @@
error = event.error || "An unknown error occurred"
} else if (type === "select-component" && data.id) {
$store.selectedComponentId = data.id
if (!$isActive("./components")) {
$goto("./components")
}
} else if (type === "update-prop") {
await store.actions.components.updateSetting(data.prop, data.value)
} else if (type === "update-styles") {
@ -194,10 +156,6 @@
store.actions.components.copy(source, true, false)
await store.actions.components.paste(destination, data.mode)
}
} else if (type === "click-nav") {
if (!$isActive("./navigation")) {
$goto("./navigation")
}
} else if (type === "request-add-component") {
toggleAddComponent()
} else if (type === "highlight-setting") {
@ -247,11 +205,10 @@
}
const toggleAddComponent = () => {
if (isAddingComponent) {
$goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
if ($isActive(`./:componentId/new`)) {
$goto(`./:componentId`)
} else {
const id = $selectedComponent?._id || $selectedScreen?.props?._id
$goto(`../${$selectedScreen._id}/components/${id}/new`)
$goto(`./:componentId/new`)
}
}

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentDropdownMenu.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
View file

20
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
View file

@ -5,7 +5,6 @@
import { goto, isActive } from "@roxi/routify"
import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { isBuilderInputFocused } from "helpers"
let confirmDeleteDialog
let confirmEjectDialog
@ -37,7 +36,7 @@
confirmEjectDialog.show()
},
["Ctrl+Enter"]: () => {
$goto("./new")
$goto(`./:componentId/new`)
},
["Delete"]: component => {
// Don't show confirmation for the screen itself
@ -54,8 +53,8 @@
store.actions.components.selectNext()
},
["Escape"]: () => {
if ($isActive("./new")) {
$goto("./")
if ($isActive(`./:componentId/new`)) {
$goto(`./${$store.selectedComponentId}`)
}
},
}
@ -85,10 +84,13 @@
const handler = keyHandlers[key]
if (!handler) {
return false
} else if (event) {
}
if (event && key !== "Escape") {
event.preventDefault()
event.stopPropagation()
}
return await handler(component)
} catch (error) {
notifications.error(error || "Error handling key press")
@ -101,7 +103,13 @@
return
}
// Ignore events when typing
if (isBuilderInputFocused(e)) {
const activeTag = document.activeElement?.tagName.toLowerCase()
const inCodeEditor =
document.activeElement?.classList?.contains("cm-content")
if (
(inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
e.key !== "Escape"
) {
return
}
// Key events are always for the selected component

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentScrollWrapper.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentScrollWrapper.svelte
View file

@ -9,14 +9,14 @@
if (!bounds) {
return
}
const sidebarWidth = 259
const sidebarWidth = 310
const navItemHeight = 32
const { scrollLeft, scrollTop, offsetHeight } = scrollRef
let scrollBounds = scrollRef.getBoundingClientRect()
let newOffsets = {}
// Calculate left offset
const offsetX = bounds.left + bounds.width + scrollLeft - 36
const offsetX = bounds.left + bounds.width + scrollLeft + 16
if (offsetX > sidebarWidth) {
newOffsets.left = offsetX - sidebarWidth
} else {
@ -64,6 +64,7 @@
</script>
<div
on:scroll
bind:this={scrollRef}
on:drop={onDrop}
ondragover="return false"
@ -74,7 +75,6 @@
<style>
div {
padding: var(--spacing-xl) 0;
flex: 1 1 auto;
overflow: auto;
height: 0;

3
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
View file

@ -107,6 +107,7 @@
id={`component-${component._id}`}
>
<NavItem
compact
scrollable
draggable
on:dragend={dndStore.actions.reset}
@ -117,7 +118,7 @@
text={getComponentText(component)}
icon={getComponentIcon(component)}
withArrow={componentHasChildren(component)}
indentLevel={level + 1}
indentLevel={level}
selected={$store.selectedComponentId === component._id}
{opened}
highlighted={isChildOfSelectedComponent(component)}

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/DNDPositionIndicator.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ScreenslotDropdownMenu.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ScreenslotDropdownMenu.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dndStore.js → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/dndStore.js
View file

163
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte Normal file
View file

@ -0,0 +1,163 @@
<script>
import { notifications, Icon, Body } from "@budibase/bbui"
import { isActive, goto } from "@roxi/routify"
import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import ComponentTree from "./ComponentTree.svelte"
import { dndStore } from "./dndStore.js"
import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
import { DropPosition } from "./dndStore"
import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
let scrolling = false
const toNewComponentRoute = () => {
if ($isActive(`./:componentId/new`)) {
$goto(`./:componentId`)
} else {
$goto(`./:componentId/new`)
}
}
const onDrop = async () => {
try {
await dndStore.actions.drop()
} catch (error) {
console.error(error)
notifications.error("Error saving component")
}
}
const handleScroll = e => {
scrolling = e.target.scrollTop !== 0
}
</script>
<div class="components">
<div class="header" class:scrolling>
<Body size="S">Components</Body>
<div on:click={toNewComponentRoute} class="addButton">
<Icon name="Add" />
</div>
</div>
<div class="list-panel">
<ComponentScrollWrapper on:scroll={handleScroll}>
<ul>
<li>
<NavItem
text="Screen"
indentLevel={0}
selected={$store.selectedComponentId ===
`${$store.selectedScreenId}-screen`}
opened
scrollable
icon="WebPage"
on:drop={onDrop}
on:click={() => {
$store.selectedComponentId = `${$store.selectedScreenId}-screen`
}}
id={`component-screen`}
selectedBy={$userSelectedResourceMap[
`${$store.selectedScreenId}-screen`
]}
>
<ScreenslotDropdownMenu component={$selectedScreen?.props} />
</NavItem>
<NavItem
text="Navigation"
indentLevel={0}
selected={$store.selectedComponentId ===
`${$store.selectedScreenId}-navigation`}
opened
scrollable
icon={$selectedScreen.showNavigation
? "Visibility"
: "VisibilityOff"}
on:drop={onDrop}
on:click={() => {
$store.selectedComponentId = `${$store.selectedScreenId}-navigation`
}}
id={`component-nav`}
selectedBy={$userSelectedResourceMap[
`${$store.selectedScreenId}-navigation`
]}
/>
<ComponentTree
level={0}
components={$selectedScreen?.props._children}
/>
<!-- Show drop indicators for the target and the parent -->
{#if $dndStore.dragging && $dndStore.valid}
<DNDPositionIndicator
component={$dndStore.target}
position={$dndStore.dropPosition}
/>
{#if $dndStore.dropPosition !== DropPosition.INSIDE}
<DNDPositionIndicator
component={$dndStore.targetParent}
position={DropPosition.INSIDE}
/>
{/if}
{/if}
</li>
</ul>
</ComponentScrollWrapper>
</div>
<ComponentKeyHandler />
</div>
<style>
.components {
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
}
.header {
height: 50px;
box-sizing: border-box;
padding: var(--spacing-l);
display: flex;
align-items: center;
border-bottom: 2px solid transparent;
transition: border-bottom 130ms ease-out;
}
.header.scrolling {
border-bottom: var(--border-light);
}
.components :global(.nav-item) {
padding-right: 8px !important;
}
.addButton {
margin-left: auto;
color: var(--grey-7);
cursor: pointer;
}
.addButton:hover {
color: var(--ink);
}
.list-panel {
display: flex;
flex-direction: column;
flex: 1;
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
position: relative;
}
ul,
li {
min-width: max-content;
}
</style>

21
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte Normal file
View file

@ -0,0 +1,21 @@
<script>
import ScreenList from "./ScreenList/index.svelte"
import ComponentList from "./ComponentList/index.svelte"
</script>
<div class="panel">
<ScreenList />
<ComponentList />
</div>
<style>
.panel {
width: 310px;
height: 100%;
border-right: var(--border-light);
display: flex;
flex-direction: column;
background: var(--background);
position: relative;
}
</style>

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/DropdownMenu.svelte
View file

@ -56,7 +56,7 @@
const deleteScreen = async () => {
try {
await store.actions.screens.delete(screen)
notifications.success("Deleted screen successfully.")
notifications.success("Deleted screen successfully")
} catch (err) {
notifications.error("Error deleting screen")
}

8
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/RoleIndicator.svelte
View file

@ -26,7 +26,7 @@
<StatusLight square {color} />
{#if showTooltip}
<div class="tooltip">
<Tooltip textWrapping text={tooltip} direction="left" />
<Tooltip textWrapping text={tooltip} direction="right" />
</div>
{/if}
</div>
@ -38,13 +38,11 @@
.tooltip {
z-index: 1;
position: absolute;
top: 50%;
left: calc(50% - 8px);
transform: translateX(-100%) translateY(-50%);
bottom: -5px;
left: 13px;
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 200px;
pointer-events: none;
}
.tooltip :global(.spectrum-Tooltip) {

304
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte Normal file
View file

@ -0,0 +1,304 @@
<script>
import { Icon, Layout, Body } from "@budibase/bbui"
import {
store,
sortedScreens,
userSelectedResourceMap,
screensHeight,
} from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import RoleIndicator from "./RoleIndicator.svelte"
import DropdownMenu from "./DropdownMenu.svelte"
import { onMount, tick } from "svelte"
import { goto } from "@roxi/routify"
let search = false
let resizing = false
let searchValue = ""
let searchInput
let container
let screensContainer
let scrolling = false
let previousHeight = null
let dragOffset
$: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
const openSearch = async () => {
search = true
await tick()
searchInput.focus()
screensContainer.scroll({ top: 0, behavior: "smooth" })
previousHeight = $screensHeight
$screensHeight = "calc(100% + 1px)"
}
const closeSearch = async () => {
if (previousHeight) {
// Restore previous height and wait for animation
$screensHeight = previousHeight
previousHeight = null
await sleep(300)
}
search = false
searchValue = ""
}
const getFilteredScreens = (screens, search) => {
return screens.filter(screen => {
return !search || screen.routing.route.includes(search)
})
}
const handleAddButton = () => {
if (search) {
closeSearch()
} else {
$goto("../new")
}
}
const onKeyDown = e => {
if (e.key === "Escape") {
closeSearch()
}
}
const handleScroll = e => {
scrolling = e.target.scrollTop !== 0
}
const startResizing = e => {
// Reset the height store to match the true height
$screensHeight = `${container.getBoundingClientRect().height}px`
// Store an offset to easily compute new height when moving the mouse
dragOffset = parseInt($screensHeight) - e.clientY
// Add event listeners
resizing = true
document.addEventListener("mousemove", resize)
document.addEventListener("mouseup", stopResizing)
}
const resize = e => {
// Prevent negative heights as this screws with layout
const newHeight = Math.max(0, e.clientY + dragOffset)
if (newHeight == null || isNaN(newHeight)) {
return
}
$screensHeight = `${newHeight}px`
}
const stopResizing = () => {
resizing = false
document.removeEventListener("mousemove", resize)
}
onMount(() => {
// Ensure we aren't stuck at 100% height from leaving while searching
if ($screensHeight == null || isNaN(parseInt($screensHeight))) {
$screensHeight = "210px"
}
})
</script>
<svelte:window on:keydown={onKeyDown} />
<div
class="screens"
class:search
class:resizing
style={`height:${$screensHeight};`}
bind:this={container}
>
<div class="header" class:scrolling>
<input
readonly={!search}
bind:value={searchValue}
bind:this={searchInput}
class="input"
placeholder="Search for screens"
/>
<div class="title" class:hide={search}>
<Body size="S">Screens</Body>
</div>
<div on:click={openSearch} class="searchButton" class:hide={search}>
<Icon size="S" name="Search" />
</div>
<div
on:click={handleAddButton}
class="addButton"
class:closeButton={search}
>
<Icon name="Add" />
</div>
</div>
<div on:scroll={handleScroll} bind:this={screensContainer} class="content">
{#if filteredScreens?.length}
{#each filteredScreens as screen (screen._id)}
<NavItem
icon={screen.routing.homeScreen ? "Home" : null}
indentLevel={0}
selected={$store.selectedScreenId === screen._id}
text={screen.routing.route}
on:click={() => store.actions.screens.select(screen._id)}
rightAlignIcon
showTooltip
selectedBy={$userSelectedResourceMap[screen._id]}
>
<DropdownMenu screenId={screen._id} />
<div slot="icon" class="icon">
<RoleIndicator roleId={screen.routing.roleId} />
</div>
</NavItem>
{/each}
{:else}
<Layout paddingY="none" paddingX="L">
<div class="no-results">
There aren't any screens matching that route
</div>
</Layout>
{/if}
</div>
<div
class="divider"
on:mousedown={startResizing}
on:dblclick={() => screensHeight.set("210px")}
/>
</div>
<style>
.screens {
display: flex;
flex-direction: column;
min-height: 147px;
max-height: calc(100% - 147px);
position: relative;
}
.screens.search {
transition: height 300ms ease-out;
max-height: none;
}
.screens.resizing {
user-select: none;
cursor: row-resize;
}
.header {
flex-shrink: 0;
position: relative;
height: 50px;
box-sizing: border-box;
padding: 0 var(--spacing-l);
display: flex;
align-items: center;
border-bottom: 2px solid transparent;
transition: border-bottom 130ms ease-out;
}
.header.scrolling {
border-bottom: var(--border-light);
}
.input {
font-family: var(--font-sans);
position: absolute;
color: var(--ink);
background-color: transparent;
border: none;
font-size: var(--spectrum-alias-font-size-default);
width: 260px;
box-sizing: border-box;
display: none;
}
.input:focus {
outline: none;
}
.input::placeholder {
color: var(--spectrum-global-color-gray-600);
}
.screens.search input {
display: block;
}
.title {
display: flex;
align-items: center;
height: 100%;
box-sizing: border-box;
flex: 1;
opacity: 1;
z-index: 1;
}
.content {
overflow: auto;
flex-grow: 1;
}
.screens.resizing .content {
pointer-events: none;
}
.screens :global(.nav-item) {
padding-right: 8px !important;
}
.searchButton {
color: var(--grey-7);
cursor: pointer;
margin-right: 10px;
opacity: 1;
}
.searchButton:hover {
color: var(--ink);
}
.hide {
opacity: 0;
pointer-events: none;
}
.addButton {
color: var(--grey-7);
cursor: pointer;
transition: transform 300ms ease-out;
}
.addButton:hover {
color: var(--ink);
}
.closeButton {
transform: rotate(45deg);
}
.icon {
margin-left: 4px;
margin-right: 4px;
}
.no-results {
color: var(--spectrum-global-color-gray-600);
}
.divider {
position: absolute;
bottom: 0;
transform: translateY(50%);
height: 16px;
width: 100%;
}
.divider:after {
content: "";
position: absolute;
background: var(--spectrum-global-color-gray-200);
height: 2px;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.divider:hover {
cursor: row-resize;
}
</style>

5
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_fallback.svelte
View file

@ -1,5 +0,0 @@
<script>
import { redirect } from "@roxi/routify"
$redirect("../screens")
</script>

76
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
View file

@ -1,14 +1,10 @@
<script>
import { IconSideNav, IconSideNavItem } from "@budibase/bbui"
import * as routify from "@roxi/routify"
import AppPanel from "./_components/AppPanel.svelte"
import * as routify from "@roxi/routify"
import { syncURLToState } from "helpers/urlStateSync"
import { store, selectedScreen } from "builderStore"
import { onDestroy } from "svelte"
const { isActive, goto } = routify
$: screenId = $store.selectedScreenId
$: store.actions.websocket.selectResource(screenId)
import LeftPanel from "./_components/LeftPanel.svelte"
// Keep URL and state in sync for selected screen ID
const stopSyncing = syncURLToState({
@ -23,51 +19,15 @@
onDestroy(stopSyncing)
</script>
<div class="design">
<div class="icon-nav">
<IconSideNav>
<IconSideNavItem
icon="WebPage"
tooltip="Screens"
active={$isActive("./screens")}
on:click={() => $goto("./screens")}
/>
<IconSideNavItem
icon="ViewList"
tooltip="Components"
active={$isActive("./components")}
on:click={() => $goto("./components")}
/>
<IconSideNavItem
icon="Brush"
tooltip="Theme"
active={$isActive("./theme")}
on:click={() => $goto("./theme")}
/>
<IconSideNavItem
icon="Link"
tooltip="Navigation"
active={$isActive("./navigation")}
on:click={() => $goto("./navigation")}
/>
{#if $store.layouts?.length}
<IconSideNavItem
icon="Experience"
tooltip="Layouts"
active={$isActive("./layouts")}
on:click={() => $goto("./layouts")}
/>
{/if}
</IconSideNav>
</div>
<div class="content">
{#if $selectedScreen}
<slot />
{#if $selectedScreen}
<div class="design">
<div class="content">
<LeftPanel />
<AppPanel />
{/if}
<slot />
</div>
</div>
</div>
{/if}
<style>
.design {
@ -78,10 +38,7 @@
align-items: stretch;
height: 0;
}
.icon-nav {
background: var(--background);
border-right: var(--border-light);
}
.content {
display: flex;
flex-direction: row;
@ -89,17 +46,4 @@
align-items: stretch;
flex: 1 1 auto;
}
/*
This is hacky, yes, but it's the only way to prevent routify from
remounting the iframe on route changes.
*/
.content :global(> *:last-child) {
order: 1;
}
.content :global(> *:first-child) {
order: 0;
}
.content :global(> *:nth-child(2)) {
order: 2;
}
</style>

90
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
View file

@ -1,90 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import ComponentTree from "./ComponentTree.svelte"
import { dndStore } from "./dndStore.js"
import { goto } from "@roxi/routify"
import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import ScreenslotDropdownMenu from "./ScreenslotDropdownMenu.svelte"
import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
import { DropPosition } from "./dndStore"
import { notifications, Button } from "@budibase/bbui"
import ComponentKeyHandler from "./ComponentKeyHandler.svelte"
import ComponentScrollWrapper from "./ComponentScrollWrapper.svelte"
const onDrop = async () => {
try {
await dndStore.actions.drop()
} catch (error) {
console.error(error)
notifications.error("Error saving component")
}
}
</script>
<Panel title="Components" showExpandIcon borderRight>
<div class="add-component">
<Button on:click={() => $goto("./new")} cta>Add component</Button>
</div>
<ComponentScrollWrapper>
<ul>
<li>
<NavItem
text="Screen"
indentLevel={0}
selected={$store.selectedComponentId === $selectedScreen?.props._id}
opened
scrollable
icon="WebPage"
on:drop={onDrop}
on:click={() => {
$store.selectedComponentId = $selectedScreen?.props._id
}}
id={`component-${$selectedScreen?.props._id}`}
selectedBy={$userSelectedResourceMap[$selectedScreen?.props._id]}
>
<ScreenslotDropdownMenu component={$selectedScreen?.props} />
</NavItem>
<ComponentTree
level={0}
components={$selectedScreen?.props._children}
/>
<!-- Show drop indicators for the target and the parent -->
{#if $dndStore.dragging && $dndStore.valid}
<DNDPositionIndicator
component={$dndStore.target}
position={$dndStore.dropPosition}
/>
{#if $dndStore.dropPosition !== DropPosition.INSIDE}
<DNDPositionIndicator
component={$dndStore.targetParent}
position={DropPosition.INSIDE}
/>
{/if}
{/if}
</li>
</ul>
</ComponentScrollWrapper>
</Panel>
<ComponentKeyHandler />
<style>
.add-component {
padding: var(--spacing-xl) var(--spacing-l);
padding-bottom: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
position: relative;
}
ul,
li {
min-width: max-content;
}
</style>

41
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
View file

@ -1,41 +0,0 @@
<script>
import { syncURLToState } from "helpers/urlStateSync"
import { store, selectedScreen } from "builderStore"
import * as routify from "@roxi/routify"
import { onDestroy } from "svelte"
import { findComponent } from "builderStore/componentUtils"
import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
$: componentId = $store.selectedComponentId
$: store.actions.websocket.selectResource(componentId)
const cleanUrl = url => {
// Strip trailing slashes
if (url?.endsWith("/index")) {
url = url.replace("/index", "")
}
// Hide new component panel whenever component ID changes
if (url?.endsWith("/new")) {
url = url.replace("/new", "")
}
return { url }
}
// Keep URL and state in sync for selected component ID
const stopSyncing = syncURLToState({
urlParam: "componentId",
stateKey: "selectedComponentId",
validate: id => !!findComponent($selectedScreen.props, id),
fallbackUrl: "../",
store,
routify,
beforeNavigate: cleanUrl,
})
onDestroy(stopSyncing)
</script>
<ComponentListPanel />
<ComponentSettingsPanel />
<slot />

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
View file

@ -1,4 +0,0 @@
<!--
Placeholder file so that routify works.
No unique content is needed in this index page.
-->

18
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/index.svelte
View file

@ -1,18 +0,0 @@
<script>
import { selectedScreen, selectedComponent } from "builderStore"
import { onMount } from "svelte"
import { redirect } from "@roxi/routify"
onMount(() => {
if ($selectedComponent) {
// Navigate to the selected component if one exists
$redirect(`./${$selectedComponent._id}`)
} else if ($selectedScreen) {
// Otherwise the screen slot if a screen exists
$redirect(`./${$selectedScreen.props._id}`)
} else {
// Otherwise go up so we can select a new valid screen
$redirect("../")
}
})
</script>

3
packages/builder/src/pages/builder/app/[application]/design/[screenId]/index.svelte
View file

@ -1,5 +1,6 @@
<script>
import { redirect } from "@roxi/routify"
import { store } from "builderStore"
$redirect("./screens")
$redirect(`./${$store.selectedScreenId}-screen`)
</script>

41
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutDropdownMenu.svelte
View file

@ -1,41 +0,0 @@
<script>
import { store } from "builderStore"
import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
export let layout
let confirmDeleteDialog
const deleteLayout = async () => {
try {
await store.actions.layouts.delete(layout)
notifications.success("Layout deleted successfully")
} catch (err) {
notifications.error(err?.message || "Error deleting layout")
}
}
</script>
<ActionMenu>
<div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={"Are you sure you wish to delete this layout?"}
okText="Delete layout"
onOk={deleteLayout}
/>
<style>
.icon {
display: grid;
place-items: center;
}
</style>

29
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
View file

@ -1,29 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import NavItem from "components/common/NavItem.svelte"
import { store } from "builderStore"
import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
</script>
<Panel title="Layouts" borderRight>
<div class="layouts">
{#each $store.layouts as layout (layout._id)}
<NavItem
icon="Experience"
indentLevel={0}
selected={$store.selectedLayoutId === layout._id}
text={layout.name}
on:click={() => store.actions.layouts.select(layout._id)}
>
<LayoutDropdownMenu {layout} />
</NavItem>
{/each}
</div>
</Panel>
<style>
.layouts {
margin-top: var(--spacing-xl);
overflow: hidden;
}
</style>

53
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
View file

@ -1,53 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import { store, selectedLayout } from "builderStore"
import { Layout, Body, Button, Banner, notifications } from "@budibase/bbui"
import { Component } from "builderStore/store/screenTemplates/utils/Component"
const copyLayout = () => {
// Build an outer container component to put layout contents inside
let container = new Component("@budibase/standard-components/container")
.instanceName($selectedLayout.name)
.customProps({
gap: "M",
direction: "column",
hAlign: "stretch",
vAlign: "top",
size: "shrink",
})
.json()
// Attach layout components
container._children = $selectedLayout.props._children
// Replace the screenslot component with a container. This is better than
// simply removing it as it still shows its position.
container = JSON.parse(
JSON.stringify(container).replace(
"@budibase/standard-components/screenslot",
"@budibase/standard-components/container"
)
)
// Copy new component structure
store.actions.components.copy(container)
notifications.success("Components copied successfully")
}
</script>
<Panel title={$selectedLayout?.name} icon="Experience" borderLeft wide>
<Layout paddingX="L" paddingY="XL" gap="S">
<Banner type="warning" showCloseButton={false}>
Custom layouts are being deprecated. They will be removed in a future
release.
</Banner>
<Body size="S">
You can save the content of this layout by pressing the button below.
</Body>
<Body size="S">
This will copy all components inside your layout, which you can then paste
into a screen.
</Body>
<Button cta on:click={copyLayout}>Copy components</Button>
</Layout>
</Panel>

20
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_layout.svelte
View file

@ -1,20 +0,0 @@
<script>
import { syncURLToState } from "helpers/urlStateSync"
import { store } from "builderStore"
import * as routify from "@roxi/routify"
import { onDestroy } from "svelte"
// Keep URL and state in sync for selected component ID
const stopSyncing = syncURLToState({
urlParam: "layoutId",
stateKey: "selectedLayoutId",
validate: id => $store.layouts?.some(layout => layout._id === id),
fallbackUrl: "../",
store,
routify,
})
onDestroy(stopSyncing)
</script>
<slot />

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/index.svelte
View file

@ -1,7 +0,0 @@
<script>
import LayoutListPanel from "./_components/LayoutListPanel.svelte"
import LayoutSettingsPanel from "./_components/LayoutSettingsPanel.svelte"
</script>
<LayoutListPanel />
<LayoutSettingsPanel />

12
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/_layout.svelte
View file

@ -1,12 +0,0 @@
<script>
import { store } from "builderStore"
import { redirect } from "@roxi/routify"
$: {
if (!$store.layouts?.length) {
$redirect("../")
}
}
</script>
<slot />

12
packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/index.svelte
View file

@ -1,12 +0,0 @@
<script>
import { store } from "builderStore"
import { onMount } from "svelte"
import { redirect } from "@roxi/routify"
onMount(() => {
if ($store.layouts?.length) {
$redirect(`./${$store.layouts[0]._id}`)
}
// The redirection when no layouts exist is handled by the routify layout
})
</script>

33
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
View file

@ -1,33 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import { Body, Layout, Banner } from "@budibase/bbui"
import { selectedScreen, store } from "builderStore"
import { get } from "svelte/store"
const removeCustomLayout = async () => {
return store.actions.screens.removeCustomLayout(get(selectedScreen))
}
</script>
<Panel borderLeft title="Navigation" icon="InfoOutline" wide>
<Layout paddingX="L" paddingY="XL" gap="S">
{#if $selectedScreen.layoutId}
<Banner
type="warning"
extraButtonText="Detach custom layout"
extraButtonAction={removeCustomLayout}
showCloseButton={false}
>
You can't preview your navigation settings using this screen as it uses
a custom layout, which is deprecated
</Banner>
{/if}
<Body size="S">
Your navigation is configured for all the screens within your app.
</Body>
<Body size="S">
You can hide and show your navigation for each screen in the screen
settings.
</Body>
</Layout>
</Panel>

110
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationSettingsPanel.svelte
View file

@ -1,110 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import {
Layout,
Label,
ActionGroup,
ActionButton,
Checkbox,
Select,
ColorPicker,
Input,
notifications,
} from "@budibase/bbui"
import NavigationLinksEditor from "./NavigationLinksEditor.svelte"
import { store } from "builderStore"
import { DefaultAppTheme } from "constants"
const update = async (key, value) => {
try {
let navigation = $store.navigation
navigation[key] = value
await store.actions.navigation.save(navigation)
} catch (error) {
notifications.error("Error updating navigation settings")
}
}
</script>
<Panel title="Navigation" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S">
<NavigationLinksEditor />
<Layout noPadding gap="XS">
<Label>Position</Label>
<ActionGroup quiet>
<ActionButton
selected={$store.navigation.navigation === "Top"}
quiet={$store.navigation.navigation !== "Top"}
icon="PaddingTop"
on:click={() => update("navigation", "Top")}
/>
<ActionButton
selected={$store.navigation.navigation === "Left"}
quiet={$store.navigation.navigation !== "Left"}
icon="PaddingLeft"
on:click={() => update("navigation", "Left")}
/>
</ActionGroup>
</Layout>
{#if $store.navigation.navigation === "Top"}
<Checkbox
text="Sticky header"
value={$store.navigation.sticky}
on:change={e => update("sticky", e.detail)}
/>
<Select
label="Width"
options={["Max", "Large", "Medium", "Small"]}
plaveholder={null}
value={$store.navigation.navWidth}
on:change={e => update("navWidth", e.detail)}
/>
{/if}
<Layout noPadding gap="XS">
<Checkbox
text="Logo"
value={!$store.navigation.hideLogo}
on:change={e => update("hideLogo", !e.detail)}
/>
{#if !$store.navigation.hideLogo}
<Input
value={$store.navigation.logoUrl}
on:change={e => update("logoUrl", e.detail)}
placeholder="Add logo URL"
updateOnChange={false}
/>
{/if}
</Layout>
<Layout noPadding gap="XS">
<Checkbox
text="Title"
value={!$store.navigation.hideTitle}
on:change={e => update("hideTitle", !e.detail)}
/>
{#if !$store.navigation.hideTitle}
<Input
value={$store.navigation.title}
on:change={e => update("title", e.detail)}
placeholder="Add title"
updateOnChange={false}
/>
{/if}
</Layout>
<Layout noPadding gap="XS">
<Label>Background color</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
on:change={e => update("navBackground", e.detail)}
/>
</Layout>
<Layout noPadding gap="XS">
<Label>Text color</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
on:change={e => update("navTextColor", e.detail)}
/>
</Layout>
</Layout>
</Panel>

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte
View file

@ -1,7 +0,0 @@
<script>
import NavigationSettingsPanel from "./_components/NavigationSettingsPanel.svelte"
import NavigationInfoPanel from "./_components/NavigationInfoPanel.svelte"
</script>
<NavigationSettingsPanel />
<NavigationInfoPanel />

75
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
View file

@ -1,75 +0,0 @@
<script>
import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
import Panel from "components/design/Panel.svelte"
import { goto } from "@roxi/routify"
import { roles } from "stores/backend"
import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import RoleIndicator from "./RoleIndicator.svelte"
import { RoleUtils } from "@budibase/frontend-core"
let searchString
let accessRole = "all"
$: filteredScreens = getFilteredScreens(
$sortedScreens,
searchString,
accessRole
)
const getFilteredScreens = (screens, search, role) => {
return screens.filter(screen => {
const searchMatch = !search || screen.routing.route.includes(search)
const roleMatch =
!role || role === "all" || screen.routing.roleId === role
return searchMatch && roleMatch
})
}
</script>
<Panel title="Screens" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S">
<Button on:click={() => $goto("../../new")} cta>Add screen</Button>
<Search
placeholder="Search"
value={searchString}
on:change={e => (searchString = e.detail)}
/>
<Select
bind:value={accessRole}
placeholder={null}
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColour={role => {
if (role?._id === "all") {
return null
}
return RoleUtils.getRoleColour(role._id)
}}
options={[{ name: "All screens", _id: "all" }, ...$roles]}
/>
</Layout>
{#each filteredScreens as screen (screen._id)}
<NavItem
icon={screen.routing.homeScreen ? "Home" : null}
indentLevel={0}
selected={$store.selectedScreenId === screen._id}
text={screen.routing.route}
on:click={() => store.actions.screens.select(screen._id)}
rightAlignIcon
showTooltip
selectedBy={$userSelectedResourceMap[screen._id]}
>
<ScreenDropdownMenu screenId={screen._id} />
<RoleIndicator slot="right" roleId={screen.routing.roleId} />
</NavItem>
{/each}
{#if !filteredScreens?.length}
<Layout paddingY="" paddingX="L">
<Body size="S">
There aren't any screens matching the current filters
</Body>
</Layout>
{/if}
</Panel>

12
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/index.svelte
View file

@ -1,12 +0,0 @@
<script>
import { selectedScreen } from "builderStore"
import ScreenListPanel from "./_components/ScreenListPanel.svelte"
import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
</script>
<ScreenListPanel />
{#if $selectedScreen}
{#key $selectedScreen._id}
<ScreenSettingsPanel />
{/key}
{/if}

12
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeInfoPanel.svelte
View file

@ -1,12 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import { Body, Layout } from "@budibase/bbui"
</script>
<Panel borderLeft title="Theme" icon="InfoOutline" wide>
<Layout paddingX="L" paddingY="XL">
<Body size="S">
Your theme is set across all the screens within your app.
</Body>
</Layout>
</Panel>

55
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeSettingsPanel.svelte
View file

@ -1,55 +0,0 @@
<script>
import Panel from "components/design/Panel.svelte"
import { Layout, Label, ColorPicker, notifications } from "@budibase/bbui"
import { store } from "builderStore"
import { get } from "svelte/store"
import { DefaultAppTheme } from "constants"
import AppThemeSelect from "./AppThemeSelect.svelte"
import ButtonRoundnessSelect from "./ButtonRoundnessSelect.svelte"
$: customTheme = $store.customTheme || {}
const update = async (property, value) => {
try {
store.actions.customTheme.save({
...get(store).customTheme,
[property]: value,
})
} catch (error) {
notifications.error("Error updating custom theme")
}
}
</script>
<Panel title="Theme" borderRight>
<Layout paddingX="L" paddingY="XL" gap="S">
<Layout noPadding gap="XS">
<Label>Theme</Label>
<AppThemeSelect />
</Layout>
<Layout noPadding gap="XS">
<Label>Button roundness</Label>
<ButtonRoundnessSelect
{customTheme}
on:change={e => update("buttonBorderRadius", e.detail)}
/>
</Layout>
<Layout noPadding gap="XS">
<Label>Accent color</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={customTheme.primaryColor || DefaultAppTheme.primaryColor}
on:change={e => update("primaryColor", e.detail)}
/>
</Layout>
<Layout noPadding gap="XS">
<Label>Accent color (hover)</Label>
<ColorPicker
spectrumTheme={$store.theme}
value={customTheme.primaryColorHover ||
DefaultAppTheme.primaryColorHover}
on:change={e => update("primaryColorHover", e.detail)}
/>
</Layout>
</Layout>
</Panel>

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/index.svelte
View file

@ -1,7 +0,0 @@
<script>
import ThemeSettingsPanel from "./_components/ThemeSettingsPanel.svelte"
import ThemeInfoPanel from "./_components/ThemeInfoPanel.svelte"
</script>
<ThemeSettingsPanel />
<ThemeInfoPanel />

15
packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte → packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
View file

@ -58,16 +58,17 @@
const response = await store.actions.screens.save(screen)
screenId = response._id
// Add link in layout for list screens
if (screen.props._instanceName.endsWith("List")) {
await store.actions.links.save(
screen.routing.route,
capitalise(screen.routing.route.split("/")[1])
)
}
// Add link in layout. We only ever actually create 1 screen now, even
// for autoscreens, so it's always safe to do this.
await store.actions.links.save(
screen.routing.route,
capitalise(screen.routing.route.split("/")[1])
)
}
// Go to new screen
$goto(`./${screenId}`)
store.actions.screens.select(screenId)
} catch (error) {
console.log(error)
notifications.error("Error creating screens")

0
packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte → packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/DatasourceModal.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte → packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/ScreenRoleModal.svelte
View file

0
packages/builder/src/pages/builder/app/[application]/design/blank.png → packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/blank.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

105
packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte Normal file
View file

@ -0,0 +1,105 @@
<script>
import { Body } from "@budibase/bbui"
import CreationPage from "components/common/CreationPage.svelte"
import blankImage from "./blank.png"
import tableImage from "./table.png"
import CreateScreenModal from "./CreateScreenModal.svelte"
import { store } from "builderStore"
export let onClose = null
let createScreenModal
$: hasScreens = $store.screens?.length
</script>
<div class="page">
<CreationPage
showClose={!!onClose}
{onClose}
heading={hasScreens ? "Create new screen" : "Create your first screen"}
>
<div class="subHeading">
<Body>Start from scratch or create screens from your data</Body>
</div>
<div class="cards">
<div class="card" on:click={() => createScreenModal.show("blank")}>
<div class="image">
<img alt="" src={blankImage} />
</div>
<div class="text">
<Body size="S">Blank screen</Body>
<Body size="XS">Add an empty blank screen</Body>
</div>
</div>
<div class="card" on:click={() => createScreenModal.show("table")}>
<div class="image">
<img alt="" src={tableImage} />
</div>
<div class="text">
<Body size="S">Table</Body>
<Body size="XS">View, edit and delete rows on a table</Body>
</div>
</div>
</div>
</CreationPage>
</div>
<CreateScreenModal bind:this={createScreenModal} />
<style>
.page {
padding: 28px 40px 40px 40px;
}
.subHeading :global(p) {
text-align: center;
margin-top: 12px;
margin-bottom: 36px;
color: var(--spectrum-global-color-gray-600);
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
.card {
max-width: 235px;
transition: filter 150ms;
}
.card:hover {
filter: brightness(1.1);
cursor: pointer;
}
.image {
border-radius: 4px 4px 0 0;
width: 100%;
max-height: 127px;
overflow: hidden;
}
.image img {
width: 100%;
}
.text {
border: 1px solid var(--grey-4);
border-radius: 0 0 4px 4px;
padding: 8px 16px 13px 16px;
}
.text :global(p:nth-child(1)) {
margin-bottom: 6px;
}
.text :global(p:nth-child(2)) {
color: var(--grey-6);
}
</style>

0
packages/builder/src/pages/builder/app/[application]/design/table.png → packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/table.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

113
packages/builder/src/pages/builder/app/[application]/design/new.svelte
View file

@ -1,104 +1,23 @@
<script>
import { Body } from "@budibase/bbui"
import CreationPage from "components/common/CreationPage.svelte"
import blankImage from "./blank.png"
import tableImage from "./table.png"
import CreateScreenModal from "./_components/CreateScreenModal.svelte"
import NewScreen from "./_components/NewScreen/index.svelte"
import { store } from "builderStore"
import { goto } from "@roxi/routify"
let createScreenModal
$: onClose = getOnClose($store)
$: hasScreens = $store.screens?.length
const getOnClose = ({ screens, selectedScreenId }) => {
if (!screens?.length) {
return null
}
if (selectedScreenId) {
return () => {
$goto(`./${selectedScreenId}`)
}
}
return () => {
$goto(`./${screens[0]._id}`)
}
}
</script>
<div class="page">
<CreationPage
showClose={$store.screens.length > 0}
onClose={() => $goto(`./${$store.screens[0]._id}`)}
heading={hasScreens ? "Create new screen" : "Create your first screen"}
>
<div class="subHeading">
<Body>Start from scratch or create screens from your data</Body>
</div>
<div class="cards">
<div class="card" on:click={() => createScreenModal.show("blank")}>
<div class="image">
<img alt="" src={blankImage} />
</div>
<div class="text">
<Body size="S">Blank screen</Body>
<Body size="XS">Add an empty blank screen</Body>
</div>
</div>
<div class="card" on:click={() => createScreenModal.show("table")}>
<div class="image">
<img alt="" src={tableImage} />
</div>
<div class="text">
<Body size="S">Table</Body>
<Body size="XS">View, edit and delete rows on a table</Body>
</div>
</div>
</div>
</CreationPage>
</div>
<CreateScreenModal bind:this={createScreenModal} />
<style>
.page {
padding: 28px 40px 40px 40px;
}
.subHeading :global(p) {
text-align: center;
margin-top: 12px;
margin-bottom: 36px;
color: var(--spectrum-global-color-gray-600);
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
.card {
max-width: 235px;
transition: filter 150ms;
}
.card:hover {
filter: brightness(1.1);
cursor: pointer;
}
.image {
border-radius: 4px 4px 0 0;
width: 100%;
max-height: 127px;
overflow: hidden;
}
.image img {
width: 100%;
}
.text {
border: 1px solid var(--grey-4);
border-radius: 0 0 4px 4px;
padding: 8px 16px 13px 16px;
}
.text :global(p:nth-child(1)) {
margin-bottom: 6px;
}
.text :global(p:nth-child(2)) {
color: var(--grey-6);
}
</style>
<NewScreen {onClose} />

12
packages/client/src/components/Component.svelte
View file

@ -33,7 +33,7 @@
export let instance = {}
export let isLayout = false
export let isScreen = false
export let isRoot = false
export let isBlock = false
// Get parent contexts
@ -104,7 +104,7 @@
// Extract component instance info
$: children = instance._children || []
$: id = instance._id
$: name = isScreen ? "Screen" : instance._instanceName
$: name = isRoot ? "Screen" : instance._instanceName
$: icon = definition?.icon
// Determine if the component is selected or is part of the critical path
@ -133,13 +133,13 @@
$: builderInteractive =
$builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
$: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
$: interactive = builderInteractive || devToolsInteractive
$: interactive = !isRoot && (builderInteractive || devToolsInteractive)
$: editing = editable && selected && $builderStore.editMode
$: draggable =
!inDragPath &&
interactive &&
!isLayout &&
!isScreen &&
!isRoot &&
definition?.draggable !== false
$: droppable = interactive
$: builderHidden =
@ -475,7 +475,7 @@
node.style.scrollMargin = "100px"
node.scrollIntoView({
behavior: "smooth",
block: "start",
block: "nearest",
inline: "start",
})
}
@ -538,7 +538,7 @@
<svelte:self instance={child} />
{/each}
{:else if emptyState}
{#if isScreen}
{#if isRoot}
<ScreenPlaceholder />
{:else}
<EmptyPlaceholder />

2
packages/client/src/components/Screen.svelte
View file

@ -44,7 +44,7 @@
{#if $routeStore.routerLoaded}
{#key screenDefinition?._id}
<Provider key="url" data={params}>
<Component isScreen instance={screenDefinition} />
<Component isRoot instance={screenDefinition} />
</Provider>
{/key}
{/if}

37
packages/client/src/components/app/Layout.svelte
View file

@ -72,19 +72,27 @@
$context.device.height
)
$: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open
$: screenId = $builderStore.inBuilder
? `${$builderStore.screen?._id}-screen`
: "screen"
$: navigationId = $builderStore.inBuilder
? `${$builderStore.screen?._id}-navigation`
: "navigation"
// Scroll navigation into view if selected
// Scroll navigation into view if selected.
// Memoize into a primitive to avoid spamming this whenever builder store
// changes.
$: selected =
$builderStore.inBuilder &&
$builderStore.selectedComponentId?.endsWith("-navigation")
$: {
if (
$builderStore.inBuilder &&
$builderStore.selectedComponentId === "navigation"
) {
if (selected) {
const node = document.getElementsByClassName("nav-wrapper")?.[0]
if (node) {
node.style.scrollMargin = "100px"
node.scrollIntoView({
behavior: "smooth",
block: "start",
block: "nearest",
inline: "start",
})
}
@ -146,26 +154,29 @@
</script>
<div
class="layout layout--{typeClass}"
class="component {screenId} layout layout--{typeClass}"
use:styleable={$component.styles}
class:desktop={!mobile}
class:mobile={!!mobile}
data-id={screenId}
data-name="Screen"
data-icon="WebPage"
>
<div class="layout-body">
<div class="{screenId}-dom screen-wrapper layout-body">
{#if typeClass !== "none"}
<div
class="interactive component navigation"
data-id="navigation"
class="interactive component {navigationId}"
data-id={navigationId}
data-name="Navigation"
data-icon="Link"
data-icon="Visibility"
>
<div
class="nav-wrapper"
class="nav-wrapper {navigationId}-dom"
class:sticky
class:hidden={$routeStore.queryParams?.peek}
class:clickable={$builderStore.inBuilder}
on:click={$builderStore.inBuilder
? builderStore.actions.clickNav
? builderStore.actions.selectComponent(navigationId)
: null}
style={navStyle}
>

6
packages/client/src/components/preview/SettingsBar.svelte
View file

@ -30,7 +30,7 @@
}
}
$: settings = getBarSettings(definition)
$: isScreen = id === $builderStore.screen?.props?._id
$: isRoot = id === $builderStore.screen?.props?._id
const getBarSettings = definition => {
let allSettings = []
@ -160,11 +160,11 @@
{:else if setting.type === "color"}
<SettingsColorPicker prop={setting.key} />
{/if}
{#if setting.barSeparator !== false && (settings.length != idx + 1 || !isScreen)}
{#if setting.barSeparator !== false && (settings.length != idx + 1 || !isRoot)}
<div class="divider" />
{/if}
{/each}
{#if !isScreen}
{#if !isRoot}
<SettingsButton
icon="Duplicate"
on:click={() => {

3
packages/client/src/stores/builder.js
View file

@ -80,9 +80,6 @@ const createBuilderStore = () => {
}
store.update(state => ({ ...state, editMode: enabled }))
},
clickNav: () => {
eventStore.actions.dispatchEvent("click-nav")
},
requestAddComponent: () => {
eventStore.actions.dispatchEvent("request-add-component")
},

2
packages/pro

@ -1 +1 @@
Subproject commit 06a28b18a409cc12e9e8a5b69a094adcc6babd5a
Subproject commit b7815e099bbd5e1410185c464dbd54f7287e732f

7
packages/server/src/api/controllers/application.ts
View file

@ -281,12 +281,7 @@ async function performAppCreate(ctx: UserCtx) {
title: name,
navWidth: "Large",
navBackground: "var(--spectrum-global-color-gray-100)",
links: [
{
url: "/home",
text: "Home",
},
],
links: [],
},
theme: "spectrum--light",
customTheme: {

9
packages/server/src/api/controllers/auth.ts
View file

@ -2,9 +2,9 @@ import { outputProcessing } from "../../utilities/rowProcessor"
import { InternalTables } from "../../db/utils"
import { getFullUser } from "../../utilities/users"
import { roles, context } from "@budibase/backend-core"
import { groups } from "@budibase/pro"
import { ContextUser, User, Row, UserCtx } from "@budibase/types"
import { ContextUser, Row, UserCtx } from "@budibase/types"
import sdk from "../../sdk"
import { processUser } from "../../utilities/global"
const PUBLIC_ROLE = roles.BUILTIN_ROLE_IDS.PUBLIC
@ -26,7 +26,7 @@ export async function fetchSelf(ctx: UserCtx) {
}
const appId = context.getAppId()
const user: ContextUser = await getFullUser(ctx, userId)
let user: ContextUser = await getFullUser(ctx, userId)
// this shouldn't be returned by the app self
delete user.roles
// forward the csrf token from the session
@ -36,8 +36,7 @@ export async function fetchSelf(ctx: UserCtx) {
const db = context.getAppDB()
// check for group permissions
if (!user.roleId || user.roleId === PUBLIC_ROLE) {
const groupRoleId = await groups.getGroupRoleId(user as User, appId)
user.roleId = groupRoleId || user.roleId
user = await processUser(user, { appId })
}
// remove the full roles structure
delete user.roles

27
packages/server/src/api/controllers/permission.ts
View file

@ -1,11 +1,12 @@
import { permissions, roles, context } from "@budibase/backend-core"
import { permissions, roles, context, HTTPError } from "@budibase/backend-core"
import { UserCtx, Database, Role, PermissionLevel } from "@budibase/types"
import { getRoleParams } from "../../db/utils"
import {
CURRENTLY_SUPPORTED_LEVELS,
getBasePermissions,
} from "../../utilities/security"
import { removeFromArray } from "../../utilities"
import { UserCtx, Database, Role } from "@budibase/types"
import sdk from "../../sdk"
const PermissionUpdateType = {
REMOVE: "remove",
@ -25,14 +26,25 @@ async function getAllDBRoles(db: Database) {
}
async function updatePermissionOnRole(
appId: string,
{
roleId,
resourceId,
level,
}: { roleId: string; resourceId: string; level: string },
}: { roleId: string; resourceId: string; level: PermissionLevel },
updateType: string
) {
const allowedAction = await sdk.permissions.resourceActionAllowed({
resourceId,
level,
})
if (!allowedAction.allowed) {
throw new HTTPError(
`You are not allowed to '${allowedAction.level}' the resource type '${allowedAction.resourceType}'`,
403
)
}
const db = context.getAppDB()
const remove = updateType === PermissionUpdateType.REMOVE
const isABuiltin = roles.isBuiltin(roleId)
@ -163,16 +175,11 @@ export async function getResourcePerms(ctx: UserCtx) {
}
export async function addPermission(ctx: UserCtx) {
ctx.body = await updatePermissionOnRole(
ctx.appId,
ctx.params,
PermissionUpdateType.ADD
)
ctx.body = await updatePermissionOnRole(ctx.params, PermissionUpdateType.ADD)
}
export async function removePermission(ctx: UserCtx) {
ctx.body = await updatePermissionOnRole(
ctx.appId,
ctx.params,
PermissionUpdateType.REMOVE
)

113
packages/server/src/api/routes/tests/permissions.spec.js → packages/server/src/api/routes/tests/permissions.spec.ts
View file

@ -1,5 +1,20 @@
const { roles } = require("@budibase/backend-core")
const setup = require("./utilities")
const mockedSdk = sdk.permissions as jest.Mocked<typeof sdk.permissions>
jest.mock("../../../sdk/app/permissions", () => ({
resourceActionAllowed: jest.fn(),
}))
import sdk from "../../../sdk"
import { roles } from "@budibase/backend-core"
import {
Document,
DocumentType,
PermissionLevel,
Row,
Table,
} from "@budibase/types"
import * as setup from "./utilities"
const { basicRow } = setup.structures
const { BUILTIN_ROLE_IDS } = roles
@ -9,29 +24,27 @@ const STD_ROLE_ID = BUILTIN_ROLE_IDS.PUBLIC
describe("/permission", () => {
let request = setup.getRequest()
let config = setup.getConfig()
let table
let perms
let row
let table: Table & { _id: string }
let perms: Document[]
let row: Row
afterAll(setup.afterAll)
beforeAll(async () => {
await config.init()
})
beforeEach(async () => {
table = await config.createTable()
row = await config.createRow()
perms = await config.addPermission(STD_ROLE_ID, table._id)
})
async function getTablePermissions() {
return request
.get(`/api/permission/${table._id}`)
.set(config.defaultHeaders())
.expect("Content-Type", /json/)
.expect(200)
}
beforeEach(async () => {
mockedSdk.resourceActionAllowed.mockResolvedValue({ allowed: true })
table = (await config.createTable()) as typeof table
row = await config.createRow()
perms = await config.api.permission.set({
roleId: STD_ROLE_ID,
resourceId: table._id,
level: PermissionLevel.READ,
})
})
describe("levels", () => {
it("should be able to get levels", async () => {
@ -65,8 +78,12 @@ describe("/permission", () => {
})
it("should get resource permissions with multiple roles", async () => {
perms = await config.addPermission(HIGHER_ROLE_ID, table._id, "write")
const res = await getTablePermissions()
perms = await config.api.permission.set({
roleId: HIGHER_ROLE_ID,
resourceId: table._id,
level: PermissionLevel.WRITE,
})
const res = await config.api.permission.get(table._id)
expect(res.body["read"]).toEqual(STD_ROLE_ID)
expect(res.body["write"]).toEqual(HIGHER_ROLE_ID)
const allRes = await request
@ -77,19 +94,59 @@ describe("/permission", () => {
expect(allRes.body[table._id]["write"]).toEqual(HIGHER_ROLE_ID)
expect(allRes.body[table._id]["read"]).toEqual(STD_ROLE_ID)
})
it("throw forbidden if the action is not allowed for the resource", async () => {
mockedSdk.resourceActionAllowed.mockResolvedValue({
allowed: false,
resourceType: DocumentType.DATASOURCE,
level: PermissionLevel.READ,
})
const response = await config.api.permission.set(
{
roleId: STD_ROLE_ID,
resourceId: table._id,
level: PermissionLevel.EXECUTE,
},
{ expectStatus: 403 }
)
expect(response.message).toEqual(
"You are not allowed to 'read' the resource type 'datasource'"
)
})
})
describe("remove", () => {
it("should be able to remove the permission", async () => {
const res = await request
.delete(`/api/permission/${STD_ROLE_ID}/${table._id}/read`)
.set(config.defaultHeaders())
.expect("Content-Type", /json/)
.expect(200)
const res = await config.api.permission.revoke({
roleId: STD_ROLE_ID,
resourceId: table._id,
level: PermissionLevel.READ,
})
expect(res.body[0]._id).toEqual(STD_ROLE_ID)
const permsRes = await getTablePermissions()
const permsRes = await config.api.permission.get(table._id)
expect(permsRes.body[STD_ROLE_ID]).toBeUndefined()
})
it("throw forbidden if the action is not allowed for the resource", async () => {
mockedSdk.resourceActionAllowed.mockResolvedValue({
allowed: false,
resourceType: DocumentType.DATASOURCE,
level: PermissionLevel.READ,
})
const response = await config.api.permission.revoke(
{
roleId: STD_ROLE_ID,
resourceId: table._id,
level: PermissionLevel.EXECUTE,
},
{ expectStatus: 403 }
)
expect(response.body.message).toEqual(
"You are not allowed to 'read' the resource type 'datasource'"
)
})
})
describe("check public user allowed", () => {
@ -124,7 +181,9 @@ describe("/permission", () => {
.expect("Content-Type", /json/)
.expect(200)
expect(Array.isArray(res.body)).toEqual(true)
const publicPerm = res.body.find(perm => perm._id === "public")
const publicPerm = res.body.find(
(perm: Document) => perm._id === "public"
)
expect(publicPerm).toBeDefined()
expect(publicPerm.permissions).toBeDefined()
expect(publicPerm.name).toBeDefined()

5
packages/server/src/api/routes/tests/role.spec.js
View file

@ -1,5 +1,6 @@
const { roles, events, permissions } = require("@budibase/backend-core")
const setup = require("./utilities")
const { PermissionLevel } = require("@budibase/types")
const { basicRole } = setup.structures
const { BUILTIN_ROLE_IDS } = roles
const { BuiltinPermissionID } = permissions
@ -16,7 +17,7 @@ describe("/roles", () => {
const createRole = async (role) => {
if (!role) {
role = basicRole()
role = basicRole()
}
return request
@ -98,7 +99,7 @@ describe("/roles", () => {
it("should be able to get the role with a permission added", async () => {
const table = await config.createTable()
await config.addPermission(BUILTIN_ROLE_IDS.POWER, table._id)
await config.api.permission.set({ roleId: BUILTIN_ROLE_IDS.POWER, resourceId: table._id, level: PermissionLevel.READ })
const res = await request
.get(`/api/roles`)
.set(config.defaultHeaders())

22
packages/server/src/integration-test/postgres.spec.ts
View file

@ -18,7 +18,7 @@ import {
import _ from "lodash"
import { generator } from "@budibase/backend-core/tests"
import { utils } from "@budibase/backend-core"
import { GenericContainer } from "testcontainers"
import { GenericContainer, Wait, StartedTestContainer } from "testcontainers"
const config = setup.getConfig()!
@ -37,22 +37,36 @@ describe("postgres integrations", () => {
let host: string
let port: number
const containers: StartedTestContainer[] = []
beforeAll(async () => {
const container = await new GenericContainer("postgres")
const containerPostgres = await new GenericContainer("postgres")
.withExposedPorts(5432)
.withEnv("POSTGRES_PASSWORD", "password")
.withWaitStrategy(
Wait.forLogMessage(
"PostgreSQL init process complete; ready for start up."
)
)
.start()
host = container.getContainerIpAddress()
port = container.getMappedPort(5432)
host = containerPostgres.getContainerIpAddress()
port = containerPostgres.getMappedPort(5432)
await config.init()
const apiKey = await config.generateApiKey()
containers.push(containerPostgres)
makeRequest = generateMakeRequest(apiKey, true)
})
afterAll(async () => {
for (let container of containers) {
await container.stop()
}
})
function pgDatasourceConfig() {
return {
datasource: {

37
packages/server/src/sdk/app/permissions/index.ts Normal file
View file

@ -0,0 +1,37 @@
import {
DocumentType,
PermissionLevel,
VirtualDocumentType,
} from "@budibase/types"
import { isViewID } from "../../../db/utils"
import { features } from "@budibase/pro"
type ResourceActionAllowedResult =
| { allowed: true }
| {
allowed: false
level: PermissionLevel
resourceType: DocumentType | VirtualDocumentType
}
export async function resourceActionAllowed({
resourceId,
level,
}: {
resourceId: string
level: PermissionLevel
}): Promise<ResourceActionAllowedResult> {
if (!isViewID(resourceId)) {
return { allowed: true }
}
if (await features.isViewPermissionEnabled()) {
return { allowed: true }
}
return {
allowed: false,
level,
resourceType: VirtualDocumentType.VIEW,
}
}

52
packages/server/src/sdk/app/permissions/tests/permissions.spec.ts Normal file
View file

@ -0,0 +1,52 @@
import TestConfiguration from "../../../../tests/utilities/TestConfiguration"
import { PermissionLevel } from "@budibase/types"
import { mocks, structures } from "@budibase/backend-core/tests"
import { resourceActionAllowed } from ".."
import { generateViewID } from "../../../../db/utils"
describe("permissions sdk", () => {
beforeEach(() => {
new TestConfiguration()
mocks.licenses.useCloudFree()
})
describe("resourceActionAllowed", () => {
it("non view resources actions are always allowed", async () => {
const resourceId = structures.users.user()._id!
const result = await resourceActionAllowed({
resourceId,
level: PermissionLevel.READ,
})
expect(result).toEqual({ allowed: true })
})
it("view resources actions allowed if the feature flag is enabled", async () => {
mocks.licenses.useViewPermissions()
const resourceId = generateViewID(structures.generator.guid())
const result = await resourceActionAllowed({
resourceId,
level: PermissionLevel.READ,
})
expect(result).toEqual({ allowed: true })
})
it("view resources actions allowed if the feature flag is disabled", async () => {
const resourceId = generateViewID(structures.generator.guid())
const result = await resourceActionAllowed({
resourceId,
level: PermissionLevel.READ,
})
expect(result).toEqual({
allowed: false,
level: "read",
resourceType: "view",
})
})
})
})

Some files were not shown because too many files have changed in this diff Show more