CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-18 18:35:37 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into fix/BUDI-7444

Browse source
This commit is contained in:
Michael Drury 2024-03-22 11:45:12 +00:00 committed by GitHub
parent f4f7ac42ec 6f0ab5e170
commit f5d085ec83
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 298 additions and 114 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.22.9",
"version": "2.22.11",
"npmClient": "yarn",
"packages": [
"packages/*",

4
packages/builder/src/components/deploy/AppActions.svelte
View file

@ -44,6 +44,7 @@
let appActionPopoverOpen = false
let appActionPopoverAnchor
let publishing = false
let lastOpened
$: filteredApps = $appsStore.apps.filter(app => app.devId === application)
$: selectedApp = filteredApps?.length ? filteredApps[0] : null
@ -57,7 +58,7 @@
$appStore.version &&
$appStore.upgradableVersion !== $appStore.version
$: canPublish = !publishing && loaded && $sortedScreens.length > 0
$: lastDeployed = getLastDeployedString($deploymentStore)
$: lastDeployed = getLastDeployedString($deploymentStore, lastOpened)
const initialiseApp = async () => {
const applicationPkg = await API.fetchAppPackage($appStore.devId)
@ -201,6 +202,7 @@
class="app-action-button publish app-action-popover"
on:click={() => {
if (!appActionPopoverOpen) {
lastOpened = new Date()
appActionPopover.show()
} else {
appActionPopover.hide()

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

@ -3,8 +3,6 @@
"name": "Blocks",
"icon": "Article",
"children": [
"gridblock",
"tableblock",
"cardsblock",
"repeaterblock",
"formblock",
@ -24,7 +22,7 @@
"children": [
"dataprovider",
"repeater",
"table",
"gridblock",
"spreadsheet",
"dynamicfilter",
"daterangepicker"

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

@ -19,7 +19,8 @@
import { goto } from "@roxi/routify"
import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
import formScreen from "templates/formScreen"
import rowListScreen from "templates/rowListScreen"
import gridListScreen from "templates/gridListScreen"
import gridDetailsScreen from "templates/gridDetailsScreen"
let mode
let pendingScreen
@ -127,7 +128,7 @@
screenAccessRole = Roles.BASIC
formType = null
if (mode === "table" || mode === "grid" || mode === "form") {
if (mode === "grid" || mode === "gridDetails" || mode === "form") {
datasourceModal.show()
} else if (mode === "blank") {
let templates = getTemplates($tables.list)
@ -153,7 +154,10 @@
// Handler for Datasource Screen Creation
const completeDatasourceScreenCreation = async () => {
templates = rowListScreen(selectedDatasources, mode)
templates =
mode === "grid"
? gridListScreen(selectedDatasources)
: gridDetailsScreen(selectedDatasources)
const screens = templates.map(template => {
let screenTemplate = template.create()

BIN
packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/images/tableDetails.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/images/tableInline.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

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

@ -2,8 +2,8 @@
import { Body } from "@budibase/bbui"
import CreationPage from "components/common/CreationPage.svelte"
import blankImage from "./images/blank.png"
import tableImage from "./images/table.png"
import gridImage from "./images/grid.png"
import tableInline from "./images/tableInline.png"
import tableDetails from "./images/tableDetails.png"
import formImage from "./images/form.png"
import CreateScreenModal from "./CreateScreenModal.svelte"
import { screenStore } from "stores/builder"
@ -38,23 +38,23 @@
</div>
</div>
<div class="card" on:click={() => createScreenModal.show("table")}>
<div class="card" on:click={() => createScreenModal.show("grid")}>
<div class="image">
<img alt="" src={tableImage} />
<img alt="" src={tableInline} />
</div>
<div class="text">
<Body size="S">Table</Body>
<Body size="XS">View, edit and delete rows on a table</Body>
<Body size="S">Table with inline editing</Body>
<Body size="XS">View, edit and delete rows inline</Body>
</div>
</div>
<div class="card" on:click={() => createScreenModal.show("grid")}>
<div class="card" on:click={() => createScreenModal.show("gridDetails")}>
<div class="image">
<img alt="" src={gridImage} />
<img alt="" src={tableDetails} />
</div>
<div class="text">
<Body size="S">Grid</Body>
<Body size="XS">View and manipulate rows on a grid</Body>
<Body size="S">Table with details panel</Body>
<Body size="XS">Manage your row details in a side panel</Body>
</div>
</div>
@ -113,6 +113,11 @@
width: 100%;
}
.card .image {
min-height: 130px;
min-width: 235px;
}
.text {
border: 1px solid var(--grey-4);
border-radius: 0 0 4px 4px;

158
packages/builder/src/templates/gridDetailsScreen.js Normal file
View file

@ -0,0 +1,158 @@
import sanitizeUrl from "helpers/sanitizeUrl"
import { Screen } from "./Screen"
import { Component } from "./Component"
import { generate } from "shortid"
import { makePropSafe as safe } from "@budibase/string-templates"
import { Utils } from "@budibase/frontend-core"
export default function (datasources) {
if (!Array.isArray(datasources)) {
return []
}
return datasources.map(datasource => {
return {
name: `${datasource.label} - List with panel`,
create: () => createScreen(datasource),
id: GRID_DETAILS_TEMPLATE,
resourceId: datasource.resourceId,
}
})
}
export const GRID_DETAILS_TEMPLATE = "GRID_DETAILS_TEMPLATE"
export const gridDetailsUrl = datasource => sanitizeUrl(`/${datasource.label}`)
const createScreen = datasource => {
/*
Create Row
*/
const createRowSidePanel = new Component(
"@budibase/standard-components/sidepanel"
).instanceName("New row side panel")
const buttonGroup = new Component("@budibase/standard-components/buttongroup")
const createButton = new Component("@budibase/standard-components/button")
createButton.customProps({
onClick: [
{
id: 0,
"##eventHandlerType": "Open Side Panel",
parameters: {
id: createRowSidePanel._json._id,
},
},
],
text: "Create row",
type: "cta",
})
buttonGroup.instanceName(`${datasource.label} - Create`).customProps({
hAlign: "right",
buttons: [createButton.json()],
})
const gridHeader = new Component("@budibase/standard-components/container")
.instanceName("Heading container")
.customProps({
direction: "row",
hAlign: "stretch",
})
const heading = new Component("@budibase/standard-components/heading")
.instanceName("Table heading")
.customProps({
text: datasource?.label,
})
gridHeader.addChild(heading)
gridHeader.addChild(buttonGroup)
const createFormBlock = new Component(
"@budibase/standard-components/formblock"
)
createFormBlock.instanceName("Create row form block").customProps({
dataSource: datasource,
labelPosition: "left",
buttonPosition: "top",
actionType: "Create",
title: "Create row",
buttons: Utils.buildFormBlockButtonConfig({
_id: createFormBlock._json._id,
showDeleteButton: false,
showSaveButton: true,
saveButtonLabel: "Save",
actionType: "Create",
dataSource: datasource,
}),
})
createRowSidePanel.addChild(createFormBlock)
/*
Edit Row
*/
const stateKey = `ID_${generate()}`
const detailsSidePanel = new Component(
"@budibase/standard-components/sidepanel"
).instanceName("Edit row side panel")
const editFormBlock = new Component("@budibase/standard-components/formblock")
editFormBlock.instanceName("Edit row form block").customProps({
dataSource: datasource,
labelPosition: "left",
buttonPosition: "top",
actionType: "Update",
title: "Edit",
rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
buttons: Utils.buildFormBlockButtonConfig({
_id: editFormBlock._json._id,
showDeleteButton: true,
showSaveButton: true,
saveButtonLabel: "Save",
deleteButtonLabel: "Delete",
actionType: "Update",
dataSource: datasource,
}),
})
detailsSidePanel.addChild(editFormBlock)
const gridBlock = new Component("@budibase/standard-components/gridblock")
gridBlock
.customProps({
table: datasource,
allowAddRows: false,
allowEditRows: false,
allowDeleteRows: false,
onRowClick: [
{
id: 0,
"##eventHandlerType": "Update State",
parameters: {
key: stateKey,
type: "set",
persist: false,
value: `{{ ${safe("eventContext")}.${safe("row")}._id }}`,
},
},
{
id: 1,
"##eventHandlerType": "Open Side Panel",
parameters: {
id: detailsSidePanel._json._id,
},
},
],
})
.instanceName(`${datasource.label} - Table`)
return new Screen()
.route(gridDetailsUrl(datasource))
.instanceName(`${datasource.label} - List and details`)
.addChild(gridHeader)
.addChild(gridBlock)
.addChild(createRowSidePanel)
.addChild(detailsSidePanel)
.json()
}

41
packages/builder/src/templates/gridListScreen.js Normal file
View file

@ -0,0 +1,41 @@
import sanitizeUrl from "helpers/sanitizeUrl"
import { Screen } from "./Screen"
import { Component } from "./Component"
export default function (datasources) {
if (!Array.isArray(datasources)) {
return []
}
return datasources.map(datasource => {
return {
name: `${datasource.label} - List`,
create: () => createScreen(datasource),
id: GRID_LIST_TEMPLATE,
resourceId: datasource.resourceId,
}
})
}
export const GRID_LIST_TEMPLATE = "GRID_LIST_TEMPLATE"
export const gridListUrl = datasource => sanitizeUrl(`/${datasource.label}`)
const createScreen = datasource => {
const heading = new Component("@budibase/standard-components/heading")
.instanceName("Table heading")
.customProps({
text: datasource?.label,
})
const gridBlock = new Component("@budibase/standard-components/gridblock")
.instanceName(`${datasource.label} - Table`)
.customProps({
table: datasource,
})
return new Screen()
.route(gridListUrl(datasource))
.instanceName(`${datasource.label} - List`)
.addChild(heading)
.addChild(gridBlock)
.json()
}

6
packages/builder/src/templates/index.js
View file

@ -1,9 +1,11 @@
import rowListScreen from "./rowListScreen"
import gridListScreen from "./gridListScreen"
import gridDetailsScreen from "./gridDetailsScreen"
import createFromScratchScreen from "./createFromScratchScreen"
import formScreen from "./formScreen"
const allTemplates = datasources => [
...rowListScreen(datasources),
...gridListScreen(datasources),
...gridDetailsScreen(datasources),
...formScreen(datasources),
]

63
packages/builder/src/templates/rowListScreen.js
View file

@ -1,63 +0,0 @@
import sanitizeUrl from "helpers/sanitizeUrl"
import { Screen } from "./Screen"
import { Component } from "./Component"
export default function (datasources, mode = "table") {
if (!Array.isArray(datasources)) {
return []
}
return datasources.map(datasource => {
return {
name: `${datasource.label} - List`,
create: () => createScreen(datasource, mode),
id: ROW_LIST_TEMPLATE,
resourceId: datasource.resourceId,
}
})
}
export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
export const rowListUrl = datasource => sanitizeUrl(`/${datasource.label}`)
const generateTableBlock = datasource => {
const tableBlock = new Component("@budibase/standard-components/tableblock")
tableBlock
.customProps({
title: datasource.label,
dataSource: datasource,
sortOrder: "Ascending",
size: "spectrum--medium",
paginate: true,
rowCount: 8,
clickBehaviour: "details",
showTitleButton: true,
titleButtonText: "Create row",
titleButtonClickBehaviour: "new",
sidePanelSaveLabel: "Save",
sidePanelDeleteLabel: "Delete",
})
.instanceName(`${datasource.label} - Table block`)
return tableBlock
}
const generateGridBlock = datasource => {
const gridBlock = new Component("@budibase/standard-components/gridblock")
gridBlock
.customProps({
table: datasource,
})
.instanceName(`${datasource.label} - Grid block`)
return gridBlock
}
const createScreen = (datasource, mode) => {
return new Screen()
.route(rowListUrl(datasource))
.instanceName(`${datasource.label} - List`)
.addChild(
mode === "table"
? generateTableBlock(datasource)
: generateGridBlock(datasource)
)
.json()
}

4
packages/client/manifest.json
View file

@ -4673,6 +4673,7 @@
}
},
"table": {
"deprecated": true,
"name": "Table",
"icon": "Table",
"illegalChildren": ["section"],
@ -5418,6 +5419,7 @@
]
},
"tableblock": {
"deprecated": true,
"block": true,
"name": "Table Block",
"icon": "Table",
@ -6595,7 +6597,7 @@
]
},
"gridblock": {
"name": "Grid Block",
"name": "Table",
"icon": "Table",
"styles": ["size"],
"size": {

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

@ -246,15 +246,18 @@
return
}
const cacheId = `${definition.name}${
definition?.deprecated === true ? "_deprecated" : ""
}`
// Get the settings definition for this component, and cache it
if (SettingsDefinitionCache[definition.name]) {
settingsDefinition = SettingsDefinitionCache[definition.name]
settingsDefinitionMap = SettingsDefinitionMapCache[definition.name]
if (SettingsDefinitionCache[cacheId]) {
settingsDefinition = SettingsDefinitionCache[cacheId]
settingsDefinitionMap = SettingsDefinitionMapCache[cacheId]
} else {
settingsDefinition = getSettingsDefinition(definition)
settingsDefinitionMap = getSettingsDefinitionMap(settingsDefinition)
SettingsDefinitionCache[definition.name] = settingsDefinition
SettingsDefinitionMapCache[definition.name] = settingsDefinitionMap
SettingsDefinitionCache[cacheId] = settingsDefinition
SettingsDefinitionMapCache[cacheId] = settingsDefinitionMap
}
// Parse the instance settings, and cache them

1
packages/client/src/components/app/blocks/index.js
View file

@ -1,4 +1,3 @@
export { default as tableblock } from "./TableBlock.svelte"
export { default as cardsblock } from "./CardsBlock.svelte"
export { default as repeaterblock } from "./RepeaterBlock.svelte"
export { default as formblock } from "./form/FormBlock.svelte"

0
packages/client/src/components/app/blocks/TableBlock.svelte → packages/client/src/components/app/deprecated/TableBlock.svelte
View file

0
packages/client/src/components/app/table/SlotRenderer.svelte → packages/client/src/components/app/deprecated/table/SlotRenderer.svelte
View file

2
packages/client/src/components/app/table/Table.svelte → packages/client/src/components/app/deprecated/table/Table.svelte
View file

@ -3,7 +3,7 @@
import { Table } from "@budibase/bbui"
import SlotRenderer from "./SlotRenderer.svelte"
import { canBeSortColumn } from "@budibase/shared-core"
import Provider from "../../context/Provider.svelte"
import Provider from "components/context/Provider.svelte"
export let dataProvider
export let columns

0
packages/client/src/components/app/table/index.js → packages/client/src/components/app/deprecated/table/index.js
View file

3
packages/client/src/components/app/index.js
View file

@ -40,11 +40,12 @@ export { default as sidepanel } from "./SidePanel.svelte"
export { default as gridblock } from "./GridBlock.svelte"
export * from "./charts"
export * from "./forms"
export * from "./table"
export * from "./blocks"
export * from "./dynamic-filter"
// Deprecated component left for compatibility in old apps
export * from "./deprecated/table"
export { default as tableblock } from "./deprecated/TableBlock.svelte"
export { default as navigation } from "./deprecated/Navigation.svelte"
export { default as cardhorizontal } from "./deprecated/CardHorizontal.svelte"
export { default as stackedlist } from "./deprecated/StackedList.svelte"

2
packages/server/src/jsRunner/bundles/index-helpers.ivm.bundle.js
View file

File diff suppressed because one or more lines are too long

5
packages/server/src/jsRunner/bundles/index-helpers.ts
View file

@ -1,6 +1,5 @@
const {
getJsHelperList,
} = require("../../../../string-templates/src/helpers/list.js")
// eslint-disable-next-line local-rules/no-budibase-imports
import { getJsHelperList } from "@budibase/string-templates/src/helpers/list"
export default {
...getJsHelperList(),

4
packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js
View file

@ -1,3 +1,3 @@
"use strict";var snippets=(()=>{var u=Object.create;var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var l=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),W=(i,e)=>{for(var p in e)n(i,p,{get:e[p],enumerable:!0})},f=(i,e,p,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!C.call(i,t)&&t!==p&&n(i,t,{get:()=>e[t],enumerable:!(r=a(e,t))||r.enumerable});return i};var d=(i,e,p)=>(p=i!=null?u(x(i)):{},f(e||!i||!i.__esModule?n(p,"default",{value:i,enumerable:!0}):p,i)),g=i=>f(n({},"__esModule",{value:!0}),i);var s=l((D,o)=>{o.exports.iifeWrapper=i=>`(function(){
"use strict";var snippets=(()=>{var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var u=(i,e)=>{for(var n in e)p(i,n,{get:e[n],enumerable:!0})},a=(i,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!c.call(i,t)&&t!==n&&p(i,t,{get:()=>e[t],enumerable:!(r=f(e,t))||r.enumerable});return i};var h=i=>a(p({},"__esModule",{value:!0}),i);var C={};u(C,{default:()=>x});var o=i=>`(function(){
${i}
})();`});var w={};W(w,{default:()=>v});var c=d(s()),v=new Proxy({},{get:function(i,e){return e in snippetCache||(snippetCache[e]=[eval][0]((0,c.iifeWrapper)(snippetDefinitions[e]))),snippetCache[e]}});return g(w);})();
})();`;var x=new Proxy({},{get:function(i,e){return e in snippetCache||(snippetCache[e]=[eval][0](o(snippetDefinitions[e]))),snippetCache[e]}});return h(C);})();

3
packages/server/tsconfig.build.json
View file

@ -18,7 +18,8 @@
"@budibase/backend-core/*": ["../backend-core/*"],
"@budibase/shared-core": ["../shared-core/src"],
"@budibase/pro": ["../pro/src"],
"@budibase/string-templates": ["../string-templates/src"]
"@budibase/string-templates": ["../string-templates/src"],
"@budibase/string-templates/*": ["../string-templates/*"]
},
"allowArbitraryExtensions": true
},

40
packages/string-templates/src/helpers/list.ts
View file

@ -1,17 +1,29 @@
import { date, duration } from "./date"
import {
math,
array,
number,
url,
string,
comparison,
object,
regex,
uuid,
// @ts-expect-error
} from "@budibase/handlebars-helpers"
/*
@budibase/handlebars-helpers is not treeshakeable, so we can't use the barrel files.
Otherwise, we have issues when generating the isolated-vm bundle because of the treeshaking
*/
/* eslint-disable local-rules/no-budibase-imports */
// @ts-expect-error
import math from "@budibase/handlebars-helpers/lib/math"
// @ts-expect-error
import array from "@budibase/handlebars-helpers/lib/array"
// @ts-expect-error
import number from "@budibase/handlebars-helpers/lib/number"
// @ts-expect-error
import url from "@budibase/handlebars-helpers/lib/url"
// @ts-expect-error
import string from "@budibase/handlebars-helpers/lib/string"
// @ts-expect-error
import comparison from "@budibase/handlebars-helpers/lib/comparison"
// @ts-expect-error
import object from "@budibase/handlebars-helpers/lib/object"
// @ts-expect-error
import regex from "@budibase/handlebars-helpers/lib/regex"
// @ts-expect-error
import uuid from "@budibase/handlebars-helpers/lib/uuid"
/* eslint-enable local-rules/no-budibase-imports */
// https://github.com/evanw/esbuild/issues/56
const externalCollections = {
@ -42,14 +54,14 @@ export function getJsHelperList() {
helpers = {}
for (let collection of Object.values(externalCollections)) {
for (let [key, func] of Object.entries<any>(collection())) {
for (let [key, func] of Object.entries<any>(collection)) {
// Handlebars injects the hbs options to the helpers by default. We are adding an empty {} as a last parameter to simulate it
helpers[key] = (...props: any) => func(...props, {})
}
}
helpers = {
...helpers,
addedHelpers,
...addedHelpers,
}
for (const toRemove of helpersToRemoveForJs) {

2
packages/string-templates/src/index.ts
View file

@ -94,7 +94,7 @@ export async function processObject<T extends Record<string, any>>(
for (const key of Object.keys(object || {})) {
if (object[key] != null) {
const val = object[key]
let parsedValue
let parsedValue = val
if (typeof val === "string") {
parsedValue = await processString(object[key], context, opts)
} else if (typeof val === "object") {

20
packages/string-templates/test/basic.spec.ts
View file

@ -104,6 +104,26 @@ describe("Test that the object processing works correctly", () => {
}
expect(error).toBeNull()
})
it("should be able to handle booleans", async () => {
const output = await processObject(
{
first: true,
second: "true",
third: "another string",
forth: "with {{ template }}",
},
{
template: "value",
}
)
expect(output).toEqual({
first: true,
second: "true",
third: "another string",
forth: "with value",
})
})
})
describe("check returning objects", () => {