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

Merge remote-tracking branch 'origin/master' into feat/automation-ux

This commit is contained in:
Peter Clement 2024-01-11 10:23:22 +00:00
parent 8d4010cc54 36e8070650
commit ec88e14b75
20 changed files with 181 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lerna.json
View File

@ -1,5 +1,5 @@
{
"version": "2.14.4",
"version": "2.14.5",
"npmClient": "yarn",
"packages": [
"packages/*",

16
packages/builder/src/builderStore/store/frontend.js
View File

@ -85,7 +85,6 @@ const INITIAL_FRONTEND_STATE = {
selectedScreenId: null,
selectedComponentId: null,
selectedLayoutId: null,
hoverComponentId: null,
// Client state
selectedComponentInstance: null,
@ -93,6 +92,9 @@ const INITIAL_FRONTEND_STATE = {
// Onboarding
onboarding: false,
tourNodes: null,
// UI state
hoveredComponentId: null,
}
export const getFrontendStore = () => {
@ -1413,6 +1415,18 @@ export const getFrontendStore = () => {
return state
})
},
hover: (componentId, notifyClient = true) => {
if (componentId === get(store).hoveredComponentId) {
return
}
store.update(state => {
state.hoveredComponentId = componentId
return state
})
if (notifyClient) {
store.actions.preview.sendEvent("hover-component", componentId)
}
},
},
links: {
save: async (url, title) => {

25
packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
View File

@ -6,7 +6,7 @@
import { Helpers } from "@budibase/bbui"
import { derived, writable } from "svelte/store"
import { Utils } from "@budibase/frontend-core"
import { cloneDeep } from "lodash"
import { cloneDeep, isEqual } from "lodash"
export let componentInstance
export let componentBindings
@ -21,21 +21,32 @@
const currentStep = derived(multiStepStore, state => state.currentStep)
const componentType = "@budibase/standard-components/multistepformblockstep"
let cachedValue
let cachedInstance = {}
$: if (!isEqual(cachedValue, value)) {
cachedValue = value
}
$: if (!isEqual(componentInstance, cachedInstance)) {
cachedInstance = componentInstance
}
setContext("multi-step-form-block", multiStepStore)
$: stepCount = value?.length || 0
$: stepCount = cachedValue?.length || 0
$: updateStore(stepCount)
$: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
$: dataSource = getDatasourceForProvider($currentAsset, cachedInstance)
$: emitCurrentStep($currentStep)
$: stepLabel = getStepLabel($multiStepStore)
$: stepDef = getDefinition(stepLabel)
$: stepSettings = value?.[$currentStep] || {}
$: stepSettings = cachedValue?.[$currentStep] || {}
$: defaults = Utils.buildMultiStepFormBlockDefaultProps({
_id: componentInstance._id,
_id: cachedInstance._id,
stepCount: $multiStepStore.stepCount,
currentStep: $multiStepStore.currentStep,
actionType: componentInstance.actionType,
dataSource: componentInstance.dataSource,
actionType: cachedInstance.actionType,
dataSource: cachedInstance.dataSource,
})
$: stepInstance = {
_id: Helpers.uuid(),

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
View File

@ -108,6 +108,8 @@
{componentInstance}
{componentDefinition}
{bindings}
iconTooltip={componentName}
componentTitle={title}
/>
{/if}
{#if section == "conditions"}

32
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
View File

@ -5,6 +5,9 @@
Drawer,
Button,
notifications,
AbsTooltip,
Icon,
Body,
} from "@budibase/bbui"
import { selectedScreen, store } from "builderStore"
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
@ -15,6 +18,9 @@
} from "builderStore/dataBinding"
export let componentInstance
export let componentDefinition
export let iconTooltip
export let componentTitle
let tempValue
let drawer
@ -24,6 +30,8 @@
$store.selectedComponentId
)
$: icon = componentDefinition?.icon
const openDrawer = () => {
tempValue = runtimeToReadableBinding(
bindings,
@ -54,7 +62,19 @@
{#key componentInstance?._id}
<Drawer bind:this={drawer} title="Custom CSS">
<svelte:fragment slot="description">
Custom CSS overrides all other component styles.
<div class="header">
Your CSS will overwrite styles for:
{#if icon}
<AbsTooltip type="info" text={iconTooltip}>
<Icon
color={`var(--spectrum-global-color-gray-600)`}
size="S"
name={icon}
/>
</AbsTooltip>
<Body size="S"><b>{componentTitle || ""}</b></Body>
{/if}
</div>
</svelte:fragment>
<Button cta slot="buttons" on:click={save}>Save</Button>
<svelte:component
@ -68,3 +88,13 @@
/>
</Drawer>
{/key}
<style>
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-m);
}
</style>

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

@ -36,14 +36,12 @@
// Determine selected component ID
$: selectedComponentId = $store.selectedComponentId
$: hoverComponentId = $store.hoverComponentId
$: previewData = {
appId: $store.appId,
layout,
screen,
selectedComponentId,
hoverComponentId,
theme: $store.theme,
customTheme: $store.customTheme,
previewDevice: $store.previewDevice,
@ -119,8 +117,8 @@
error = event.error || "An unknown error occurred"
} else if (type === "select-component" && data.id) {
$store.selectedComponentId = data.id
} else if (type === "hover-component" && data.id) {
$store.hoverComponentId = data.id
} else if (type === "hover-component") {
store.actions.components.hover(data.id, false)
} else if (type === "update-prop") {
await store.actions.components.updateSetting(data.prop, data.value)
} else if (type === "update-styles") {

3
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte
View File

@ -7,6 +7,7 @@
$: definition = store.actions.components.getDefinition(component?._component)
$: noPaste = !$store.componentToPaste
$: isBlock = definition?.block === true
$: canEject = !(definition?.ejectable === false)
const keyboardEvent = (key, ctrlKey = false) => {
document.dispatchEvent(
@ -32,7 +33,7 @@
>
Delete
</MenuItem>
{#if isBlock}
{#if isBlock && canEject}
<MenuItem
icon="Export"
keyBind="Ctrl+E"

11
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte
View File

@ -32,8 +32,15 @@
await store.actions.components.paste(component, "below")
},
["Ctrl+e"]: component => {
componentToEject = component
confirmEjectDialog.show()
const definition = store.actions.components.getDefinition(
component._component
)
const isBlock = definition?.block === true
const canEject = !(definition?.ejectable === false)
if (isBlock && canEject) {
componentToEject = component
confirmEjectDialog.show()
}
},
["Ctrl+Enter"]: () => {
$goto(`./:componentId/new`)

17
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte
View File

@ -90,16 +90,7 @@
return findComponentPath($selectedComponent, component._id)?.length > 0
}
const handleMouseover = componentId => {
if ($store.hoverComponentId !== componentId) {
$store.hoverComponentId = componentId
}
}
const handleMouseout = componentId => {
if ($store.hoverComponentId === componentId) {
$store.hoverComponentId = null
}
}
const hover = store.actions.components.hover
</script>
<ul>
@ -120,9 +111,9 @@
on:dragover={dragover(component, index)}
on:iconClick={() => toggleNodeOpen(component._id)}
on:drop={onDrop}
hovering={$store.hoverComponentId === component._id}
on:mouseenter={() => handleMouseover(component._id)}
on:mouseleave={() => handleMouseout(component._id)}
hovering={$store.hoveredComponentId === component._id}
on:mouseenter={() => hover(component._id)}
on:mouseleave={() => hover(null)}
text={getComponentText(component)}
icon={getComponentIcon(component)}
iconTooltip={getComponentName(component)}

55
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte
View File

@ -12,6 +12,9 @@
let scrolling = false
$: screenComponentId = `${$store.selectedScreenId}-screen`
$: navComponentId = `${$store.selectedScreenId}-navigation`
const toNewComponentRoute = () => {
if ($isActive(`./:componentId/new`)) {
$goto(`./:componentId`)
@ -33,16 +36,7 @@
scrolling = e.target.scrollTop !== 0
}
const handleMouseover = componentId => {
if ($store.hoverComponentId !== componentId) {
$store.hoverComponentId = componentId
}
}
const handleMouseout = componentId => {
if ($store.hoverComponentId === componentId) {
$store.hoverComponentId = null
}
}
const hover = store.actions.components.hover
</script>
<div class="components">
@ -65,46 +59,31 @@
scrollable
icon="WebPage"
on:drop={onDrop}
on:click={() => {
$store.selectedComponentId = `${$store.selectedScreenId}-screen`
}}
hovering={$store.hoverComponentId ===
`${$store.selectedScreenId}-screen`}
on:mouseenter={() =>
handleMouseover(`${$store.selectedScreenId}-screen`)}
on:mouseleave={() =>
handleMouseout(`${$store.selectedScreenId}-screen`)}
id={`component-screen`}
selectedBy={$userSelectedResourceMap[
`${$store.selectedScreenId}-screen`
]}
on:click={() => ($store.selectedComponentId = screenComponentId)}
hovering={$store.hoveredComponentId === screenComponentId}
on:mouseenter={() => hover(screenComponentId)}
on:mouseleave={() => hover(null)}
id="component-screen"
selectedBy={$userSelectedResourceMap[screenComponentId]}
>
<ScreenslotDropdownMenu component={$selectedScreen?.props} />
</NavItem>
<NavItem
text="Navigation"
indentLevel={0}
selected={$store.selectedComponentId ===
`${$store.selectedScreenId}-navigation`}
selected={$store.selectedComponentId === navComponentId}
opened
scrollable
icon={$selectedScreen.showNavigation
? "Visibility"
: "VisibilityOff"}
on:drop={onDrop}
on:click={() => {
$store.selectedComponentId = `${$store.selectedScreenId}-navigation`
}}
hovering={$store.hoverComponentId ===
`${$store.selectedScreenId}-navigation`}
on:mouseenter={() =>
handleMouseover(`${$store.selectedScreenId}-navigation`)}
on:mouseleave={() =>
handleMouseout(`${$store.selectedScreenId}-navigation`)}
id={`component-nav`}
selectedBy={$userSelectedResourceMap[
`${$store.selectedScreenId}-navigation`
]}
on:click={() => ($store.selectedComponentId = navComponentId)}
hovering={$store.hoveredComponentId === navComponentId}
on:mouseenter={() => hover(navComponentId)}
on:mouseleave={() => hover(null)}
id="component-nav"
selectedBy={$userSelectedResourceMap[navComponentId]}
/>
<ComponentTree
level={0}

8
packages/client/src/components/preview/HoverIndicator.svelte
View File

@ -1,9 +1,9 @@
<script>
import { onMount, onDestroy } from "svelte"
import IndicatorSet from "./IndicatorSet.svelte"
import { builderStore, dndIsDragging } from "stores"
import { builderStore, dndIsDragging, hoverStore } from "stores"
$: componentId = $builderStore.hoverComponentId
$: componentId = $hoverStore.hoveredComponentId
$: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
const onMouseOver = e => {
@ -23,12 +23,12 @@
}
if (newId !== componentId) {
builderStore.actions.hoverComponent(newId)
hoverStore.actions.hoverComponent(newId)
}
}
const onMouseLeave = () => {
builderStore.actions.hoverComponent(null)
hoverStore.actions.hoverComponent(null)
}
onMount(() => {

4
packages/client/src/index.js
View File

@ -8,6 +8,7 @@ import {
environmentStore,
dndStore,
eventStore,
hoverStore,
} from "./stores"
import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
import { get } from "svelte/store"
@ -33,7 +34,6 @@ const loadBudibase = async () => {
layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
hoverComponentId: window["##BUDIBASE_HOVER_COMPONENT_ID##"],
previewId: window["##BUDIBASE_PREVIEW_ID##"],
theme: window["##BUDIBASE_PREVIEW_THEME##"],
customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
@ -84,6 +84,8 @@ const loadBudibase = async () => {
} else {
dndStore.actions.reset()
}
} else if (type === "hover-component") {
hoverStore.actions.hoverComponent(data)
} else if (type === "builder-meta") {
builderStore.actions.setMetadata(data)
}

11
packages/client/src/stores/builder.js
View File

@ -8,7 +8,6 @@ const createBuilderStore = () => {
inBuilder: false,
screen: null,
selectedComponentId: null,
hoverComponentId: null,
editMode: false,
previewId: null,
theme: null,
@ -25,16 +24,6 @@ const createBuilderStore = () => {
}
const store = writable(initialState)
const actions = {
hoverComponent: id => {
if (id === get(store).hoverComponentId) {
return
}
store.update(state => ({
...state,
hoverComponentId: id,
}))
eventStore.actions.dispatchEvent("hover-component", { id })
},
selectComponent: id => {
if (id === get(store).selectedComponentId) {
return

25
packages/client/src/stores/hover.js Normal file
View File

@ -0,0 +1,25 @@
import { get, writable } from "svelte/store"
import { eventStore } from "./events.js"
const createHoverStore = () => {
const store = writable({
hoveredComponentId: null,
})
const hoverComponent = id => {
if (id === get(store).hoveredComponentId) {
return
}
store.set({ hoveredComponentId: id })
eventStore.actions.dispatchEvent("hover-component", { id })
}
return {
...store,
actions: {
hoverComponent,
},
}
}
export const hoverStore = createHoverStore()

1
packages/client/src/stores/index.js
View File

@ -27,6 +27,7 @@ export {
dndIsDragging,
} from "./dnd"
export { sidePanelStore } from "./sidePanel"
export { hoverStore } from "./hover"
// Context stores are layered and duplicated, so it is not a singleton
export { createContextStore } from "./context"

2
packages/pro

@ -1 +1 @@
Subproject commit b1c10c2daf808d103724c324256cbff67f33fb46
Subproject commit 8c466d6ef2a0c09b843ef63276793ab5af2e96f7

2
packages/server/src/api/controllers/static/templates/preview.hbs
View File

@ -63,7 +63,6 @@
// Extract data from message
const {
selectedComponentId,
hoverComponentId,
layout,
screen,
appId,
@ -82,7 +81,6 @@
window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_HOVER_COMPONENT_ID##"] = hoverComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
window["##BUDIBASE_PREVIEW_THEME##"] = theme
window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme

13
packages/server/src/integrations/postgres.ts
View File

@ -149,8 +149,6 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
private index: number = 1
private open: boolean
COLUMNS_SQL!: string
PRIMARY_KEYS_SQL = () => `
SELECT pg_namespace.nspname table_schema
, pg_class.relname table_name
@ -171,6 +169,11 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace;
`
COLUMNS_SQL = () => `
select * from information_schema.columns where table_schema = ANY(current_schemas(false))
AND pg_table_is_visible(to_regclass(format('%I.%I', table_schema, table_name)));
`
constructor(config: PostgresConfig) {
super(SqlClient.POSTGRES)
this.config = config
@ -224,8 +227,6 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
.split(",")
.map(item => `"${item.trim()}"`)
await this.client.query(`SET search_path TO ${search_path.join(",")};`)
this.COLUMNS_SQL = `select * from information_schema.columns where table_schema = ANY(current_schemas(false))
AND pg_table_is_visible(to_regclass(table_schema || '.' || table_name));`
this.open = true
}
@ -312,7 +313,7 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
try {
const columnsResponse: { rows: PostgresColumn[] } =
await this.client.query(this.COLUMNS_SQL)
await this.client.query(this.COLUMNS_SQL())
const tables: { [key: string]: Table } = {}
@ -382,7 +383,7 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
try {
await this.openConnection()
const columnsResponse: { rows: PostgresColumn[] } =
await this.client.query(this.COLUMNS_SQL)
await this.client.query(this.COLUMNS_SQL())
const names = columnsResponse.rows.map(row => row.table_name)
return [...new Set(names)]
} finally {

72
packages/server/src/jsRunner.ts
View File

@ -12,51 +12,49 @@ export function init() {
const perRequestLimit = env.JS_PER_REQUEST_TIME_LIMIT_MS
let track: TrackerFn = f => f()
if (perRequestLimit) {
tracer.trace<any>("runJS.setupTracker", {}, span => {
const bbCtx = context.getCurrentContext()
if (bbCtx) {
if (!bbCtx.jsExecutionTracker) {
span?.addTags({
createdExecutionTracker: true,
})
bbCtx.jsExecutionTracker =
timers.ExecutionTimeTracker.withLimit(perRequestLimit)
}
const bbCtx = tracer.trace("runJS.getCurrentContext", {}, span =>
context.getCurrentContext()
)
if (bbCtx) {
if (!bbCtx.jsExecutionTracker) {
span?.addTags({
js: {
limitMS: bbCtx.jsExecutionTracker.limitMs,
elapsedMS: bbCtx.jsExecutionTracker.elapsedMS,
},
createdExecutionTracker: true,
})
// We call checkLimit() here to prevent paying the cost of creating
// a new VM context below when we don't need to.
bbCtx.jsExecutionTracker.checkLimit()
track = bbCtx.jsExecutionTracker.track.bind(
bbCtx.jsExecutionTracker
bbCtx.jsExecutionTracker = tracer.trace(
"runJS.createExecutionTimeTracker",
{},
span => timers.ExecutionTimeTracker.withLimit(perRequestLimit)
)
}
})
span?.addTags({
js: {
limitMS: bbCtx.jsExecutionTracker.limitMs,
elapsedMS: bbCtx.jsExecutionTracker.elapsedMS,
},
})
// We call checkLimit() here to prevent paying the cost of creating
// a new VM context below when we don't need to.
tracer.trace("runJS.checkLimitAndBind", {}, span => {
bbCtx.jsExecutionTracker!.checkLimit()
track = bbCtx.jsExecutionTracker!.track.bind(
bbCtx.jsExecutionTracker
)
})
}
}
ctx = tracer.trace("runJS.ctxClone", {}, span => {
return {
...ctx,
alert: undefined,
setInterval: undefined,
setTimeout: undefined,
}
})
tracer.trace("runJS.vm.createContext", {}, span => {
vm.createContext(ctx)
})
ctx = {
...ctx,
alert: undefined,
setInterval: undefined,
setTimeout: undefined,
}
vm.createContext(ctx)
return track(() =>
tracer.trace("runJS.vm.runInNewContext", {}, span =>
vm.runInNewContext(js, ctx, {
timeout: env.JS_PER_EXECUTION_TIME_LIMIT_MS,
})
)
vm.runInNewContext(js, ctx, {
timeout: env.JS_PER_EXECUTION_TIME_LIMIT_MS,
})
)
})
})

8
qa-core/src/account-api/tests/licensing/license.manage.spec.ts
View File

@ -39,10 +39,10 @@ describe("license management", () => {
let premiumPriceId = null
let businessPriceId = ""
for (const plan of planBody) {
if (plan.type === PlanType.PREMIUM) {
if (plan.type === PlanType.PREMIUM_PLUS) {
premiumPriceId = plan.prices[0].priceId
}
if (plan.type === PlanType.BUSINESS) {
if (plan.type === PlanType.ENTERPRISE_BASIC) {
businessPriceId = plan.prices[0].priceId
}
}
@ -97,7 +97,7 @@ describe("license management", () => {
await config.loginAsAccount(createAccountRequest)
await config.api.stripe.linkStripeCustomer(account.accountId, customer.id)
const [_, selfBodyPremium] = await config.api.accounts.self()
expect(selfBodyPremium.license.plan.type).toBe(PlanType.PREMIUM)
expect(selfBodyPremium.license.plan.type).toBe(PlanType.PREMIUM_PLUS)
// Create portal session - Check URL
const [portalRes, portalSessionBody] =
@ -109,7 +109,7 @@ describe("license management", () => {
// License updated to Business
const [selfRes, selfBodyBusiness] = await config.api.accounts.self()
expect(selfBodyBusiness.license.plan.type).toBe(PlanType.BUSINESS)
expect(selfBodyBusiness.license.plan.type).toBe(PlanType.ENTERPRISE_BASIC)
})
})
})