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

Merge branch 'master' into feature/add-e2e-tests

Browse source
This commit is contained in:
kevmodrome 2020-06-11 16:41:14 +02:00
parent 5640f03fff 02469dec2f
commit 39093f3ce6
18 changed files with 330 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/builder/src/components/common/Inputs/InputGroup.svelte
View file

@ -10,18 +10,19 @@
export let onChange = () => {}
function handleChange(val, idx) {
value.splice(idx, 1, val !== "auto" ? val + suffix : val)
value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val)
value = value
let _value = value.map(v =>
!v.endsWith(suffix) && v !== "auto" ? v + suffix : v
suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
)
onChange(_value)
}
$: displayValues = value
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
: []
$: displayValues =
value && suffix
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
: value || []
</script>
<div class="input-container">

125
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View file

@ -21,14 +21,47 @@
return componentName || "element"
}
$: iframe &&
console.log(
iframe.contentDocument.head.insertAdjacentHTML(
"beforeend",
`<\style></style>`
)
)
const screenPlaceholder = {
name: "Screen Placeholder",
route: "*",
props: {
_component: "@budibase/standard-components/container",
type: "div",
_children: [
{
_component: "@budibase/standard-components/container",
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
_id: "__screenslot__text",
_code: "",
className: "",
onLoad: [],
type: "div",
_children: [
{
_component: "@budibase/standard-components/text",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_id: "__screenslot__text_2",
_code: "",
text: "content",
font: "",
color: "",
textAlign: "inline",
verticalAlign: "inline",
formattingTag: "none",
},
],
},
],
},
}
$: hasComponent = !!$store.currentPreviewItem
$: {
styles = ""
// Apply the CSS from the currently selected page and its screens
@ -52,49 +85,12 @@
$: frontendDefinition = {
appId: $store.appId,
libraries: $store.libraries,
page: $store.currentPreviewItem,
screens: screensExist
? $store.currentPreviewItem._screens
: [
{
name: "Screen Placeholder",
route: "*",
props: {
_component: "@budibase/standard-components/container",
type: "div",
_children: [
{
_component: "@budibase/standard-components/container",
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
_id: "__screenslot__text",
_code: "",
className: "",
onLoad: [],
type: "div",
_children: [
{
_component: "@budibase/standard-components/text",
_styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_id: "__screenslot__text_2",
_code: "",
text: "content",
font: "",
color: "",
textAlign: "inline",
verticalAlign: "inline",
formattingTag: "none",
},
],
},
],
},
},
],
page: $store.pages[$store.currentPageName],
screens: [
$store.currentFrontEndType === "page"
? screenPlaceholder
: $store.currentPreviewItem,
],
appRootPath: "",
}
@ -103,6 +99,27 @@
$: selectedComponentId = $store.currentComponentInfo
? $store.currentComponentInfo._id
: ""
const refreshContent = () => {
iframe.contentWindow.postMessage(
JSON.stringify({
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition,
})
)
}
$: if (iframe)
iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
once: true,
})
$: if (iframe && frontendDefinition) {
refreshContent()
}
</script>
<div class="component-container">
@ -111,13 +128,7 @@
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={iframeTemplate({
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition: JSON.stringify(frontendDefinition),
})} />
srcdoc={iframeTemplate} />
{/if}
</div>

64
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View file

@ -1,20 +1,6 @@
export default ({
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition,
}) => `<html>
export default `<html>
<head>
${stylesheetLinks}
<style>
${styles || ""}
.${selectedComponentType}-${selectedComponentId} {
border: 2px solid #0055ff;
}
body, html {
height: 100%!important;
font-family: Roboto !important;
@ -35,12 +21,50 @@ export default ({
}
</style>
<script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${frontendDefinition};
function receiveMessage(event) {
import('/_builder/budibase-client.esm.mjs')
.then(module => {
module.loadBudibase({ window, localStorage });
})
if (!event.data) return
const data = JSON.parse(event.data)
try {
if (styles) document.head.removeChild(styles)
} catch(_) { }
try {
if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
} catch(_) { }
selectedComponentStyle = document.createElement('style');
document.head.appendChild(selectedComponentStyle)
var selectedCss = '.' + data.selectedComponentType + '-' + data.selectedComponentId + '{ border: 2px solid #0055ff; }'
selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
styles = document.createElement('style')
document.head.appendChild(styles)
styles.appendChild(document.createTextNode(data.styles))
window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
if (clientModule) {
clientModule.loadBudibase({ window, localStorage })
}
}
let clientModule
let styles
let selectedComponentStyle
document.addEventListener("click", function(e) {
e.preventDefault()
e.stopPropagation()
return false;
}, true)
import('/_builder/budibase-client.esm.mjs')
.then(module => {
clientModule = module
window.addEventListener('message', receiveMessage)
window.dispatchEvent(new Event('bb-ready'))
})
</script>
</head>
<body>

33
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View file

@ -38,15 +38,30 @@
c => c._component === componentInstance._component
) || {}
$: panelDefinition = componentPropDefinition.properties
? componentPropDefinition.properties[selectedCategory.value]
: {}
let panelDefinition = {}
// SCREEN PROPS =============================================
$: screen_props =
$store.currentFrontEndType === "page"
? getProps($store.currentPreviewItem, ["name", "favicon"])
: getProps($store.currentPreviewItem, ["name", "description", "route"])
$: {
if (componentPropDefinition.properties) {
if (selectedCategory.value === "design") {
panelDefinition = componentPropDefinition.properties["design"]
} else {
let panelDef = componentPropDefinition.properties["settings"]
if (
$store.currentFrontEndType === "page" &&
$store.currentView !== "component"
) {
panelDefinition = [...page, ...panelDef]
} else if (
$store.currentFrontEndType === "screen" &&
$store.currentView !== "component"
) {
panelDefinition = [...screen, ...panelDef]
} else {
panelDefinition = panelDef
}
}
}
}
const onStyleChanged = store.setComponentStyle
const onPropChanged = store.setComponentProp
@ -106,12 +121,10 @@
height: 100%;
display: flex;
flex-direction: column;
/* Merge Check */
overflow-x: hidden;
overflow-y: hidden;
padding: 20px;
box-sizing: border-box;
/* Merge Check */
}
.title > div:nth-child(1) {

90
packages/builder/src/components/userInterface/propertyCategories.js
View file

@ -12,8 +12,9 @@ export const layout = [
label: "Display",
key: "display",
control: OptionSelect,
initialValue: "Flex",
initialValue: "",
options: [
{ label: "", value: "" },
{ label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" },
],
@ -39,6 +40,7 @@ export const layout = [
control: OptionSelect,
initialValue: "Flex Start",
options: [
{ label: "", value: "" },
{ label: "Flex Start", value: "flex-start" },
{ label: "Flex End", value: "flex-end" },
{ label: "Center", value: "center" },
@ -84,7 +86,6 @@ export const spacing = [
key: "margin",
control: InputGroup,
meta: spacingMeta,
suffix: "px",
defaultValue: ["0", "0", "0", "0"],
},
{
@ -92,7 +93,6 @@ export const spacing = [
key: "padding",
control: InputGroup,
meta: spacingMeta,
suffix: "px",
defaultValue: ["0", "0", "0", "0"],
},
]
@ -103,7 +103,6 @@ export const size = [
key: "width",
control: Input,
placeholder: "px",
suffix: "px",
width: "48px",
textAlign: "center",
},
@ -112,7 +111,6 @@ export const size = [
key: "height",
control: Input,
placeholder: "px",
suffix: "px",
width: "48px",
textAlign: "center",
},
@ -121,7 +119,6 @@ export const size = [
key: "min-width",
control: Input,
placeholder: "px",
suffix: "px",
width: "48px",
textAlign: "center",
},
@ -129,7 +126,6 @@ export const size = [
label: "Min H",
key: "min-height",
control: Input,
suffix: "px",
placeholder: "px",
width: "48px",
textAlign: "center",
@ -139,7 +135,6 @@ export const size = [
key: "max-width",
control: Input,
placeholder: "px",
suffix: "px",
width: "48px",
textAlign: "center",
},
@ -148,7 +143,6 @@ export const size = [
key: "max-height",
control: Input,
placeholder: "px",
suffix: "px",
width: "48px",
textAlign: "center",
},
@ -325,19 +319,31 @@ export const border = [
{
label: "Radius",
key: "border-radius",
control: Input,
width: "48px",
placeholder: "px",
textAlign: "center",
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "0" },
{ label: "small", value: "0.125rem" },
{ label: "Medium", value: "0.25rem;" },
{ label: "Large", value: "0.375rem" },
{ label: "Extra large", value: "0.5rem" },
{ label: "Full", value: "5678px" },
],
},
{
label: "Width",
key: "border-width",
control: Input,
width: "48px",
placeholder: "px",
textAlign: "center",
}, //custom
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "0" },
{ label: "Extra small", value: "0.5px" },
{ label: "Small", value: "1px" },
{ label: "Medium", value: "2px" },
{ label: "Large", value: "4px" },
{ label: "Extra large", value: "8px" },
],
},
{
label: "Color",
key: "border-color",
@ -347,6 +353,7 @@ export const border = [
label: "Style",
key: "border-style",
control: OptionSelect,
defaultValue: "None",
options: [
"none",
"hidden",
@ -373,17 +380,50 @@ export const effects = [
},
{
label: "Rotate",
key: "transform",
control: Input,
width: "48px",
textAlign: "center",
placeholder: "deg",
key: "transform-rotate",
control: OptionSelect,
defaultValue: "0",
options: [
"0",
"45deg",
"90deg",
"90deg",
"135deg",
"180deg",
"225deg",
"270deg",
"315dev",
],
}, //needs special control
{
label: "Shadow",
key: "box-shadow",
control: InputGroup,
meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }],
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "none" },
{ label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{
label: "Small",
value:
"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
},
{
label: "Medium",
value:
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
},
{
label: "Large",
value:
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
},
{
label: "Extra large",
value:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
},
],
},
]

11
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -187,6 +187,17 @@ export default {
],
},
},
{
_component: "@budibase/standard-components/image",
name: "Image",
description: "A basic component for displaying images",
icon: "ri-image-fill",
children: [],
properties: {
design: { ...all },
settings: [{ label: "URL", key: "url", control: Input }],
},
},
{
_component: "@budibase/standard-components/icon",
name: "Icon",

2
packages/builder/src/pages/[application]/_reset.svelte
View file

@ -62,7 +62,7 @@
<span
class:active={false}
class="topnavitemright"
on:click={() => (location = `/${application}`)}>
on:click={() => window.open(`/${application}`)}>
<PreviewIcon />
</span>
</div>

45
packages/server/src/api/controllers/application.js
View file

@ -11,7 +11,7 @@ const { exec } = require("child_process")
const sqrl = require("squirrelly")
exports.fetch = async function(ctx) {
const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
const db = new CouchDB(ClientDb.name(getClientId(ctx)))
const body = await db.query("client/by_type", {
include_docs: true,
key: ["app"],
@ -21,16 +21,30 @@ exports.fetch = async function(ctx) {
}
exports.fetchAppPackage = async function(ctx) {
const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
const clientId = await lookupClientId(ctx.params.applicationId)
const db = new CouchDB(ClientDb.name(clientId))
const application = await db.get(ctx.params.applicationId)
ctx.body = await getPackageForBuilder(ctx.config, application)
}
exports.create = async function(ctx) {
const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
const clientId =
(ctx.request.body && ctx.request.body.clientId) || env.CLIENT_ID
if (!clientId) {
ctx.throw(400, "ClientId not suplied")
}
const appId = newid()
// insert an appId -> clientId lookup
const masterDb = new CouchDB("clientAppLookup")
await masterDb.put({
_id: appId,
clientId,
})
const db = new CouchDB(ClientDb.name(clientId))
const newApplication = {
_id: newid(),
_id: appId,
type: "app",
instances: [],
userInstanceMap: {},
@ -47,11 +61,10 @@ exports.create = async function(ctx) {
const createInstCtx = {
params: {
clientId: env.CLIENT_ID,
applicationId: newApplication._id,
},
request: {
body: { name: `dev-${env.CLIENT_ID}` },
body: { name: `dev-${clientId}` },
},
}
await instanceController.create(createInstCtx)
@ -61,6 +74,7 @@ exports.create = async function(ctx) {
await runNpmInstall(newAppFolder)
}
ctx.status = 200
ctx.body = newApplication
ctx.message = `Application ${ctx.request.body.name} created successfully`
}
@ -79,7 +93,6 @@ const createEmptyAppPackage = async (ctx, app) => {
if (await exists(newAppFolder)) {
ctx.throw(400, "App folder already exists for this application")
return
}
await copy(templateFolder, newAppFolder)
@ -99,6 +112,24 @@ const createEmptyAppPackage = async (ctx, app) => {
return newAppFolder
}
const lookupClientId = async appId => {
const masterDb = new CouchDB("clientAppLookup")
const { clientId } = await masterDb.get(appId)
return clientId
}
const getClientId = ctx => {
const clientId =
(ctx.request.body && ctx.request.body.clientId) ||
(ctx.query && ctx.query.clientId) ||
env.CLIENT_ID
if (!clientId) {
ctx.throw(400, "ClientId not suplied")
}
return clientId
}
const updateJsonFile = async (filePath, app) => {
const json = await readFile(filePath, "utf8")
const newJson = sqrl.Render(json, app)

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

@ -2,7 +2,6 @@ const jwt = require("jsonwebtoken")
const CouchDB = require("../../db")
const ClientDb = require("../../db/clientDb")
const bcrypt = require("../../utilities/bcrypt")
const env = require("../../environment")
exports.authenticate = async ctx => {
const { username, password } = ctx.request.body
@ -10,8 +9,14 @@ exports.authenticate = async ctx => {
if (!username) ctx.throw(400, "Username Required.")
if (!password) ctx.throw(400, "Password Required")
const masterDb = new CouchDB("clientAppLookup")
const { clientId } = await masterDb.get(ctx.params.appId)
if (!clientId) {
ctx.throw(400, "ClientId not suplied")
}
// find the instance that the user is associated with
const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
const db = new CouchDB(ClientDb.name(clientId))
const appId = ctx.params.appId
const app = await db.get(appId)
const instanceId = app.userInstanceMap[username]

21
packages/server/src/api/controllers/client.js
View file

@ -6,13 +6,26 @@ exports.getClientId = async function(ctx) {
}
exports.create = async function(ctx) {
await create(env.CLIENT_ID)
const clientId = getClientId(ctx)
await create(clientId)
ctx.status = 200
ctx.message = `Client Database ${env.CLIENT_ID} successfully provisioned.`
ctx.message = `Client Database ${clientId} successfully provisioned.`
}
exports.destroy = async function(ctx) {
await destroy(env.CLIENT_ID)
const clientId = getClientId(ctx)
await destroy(clientId)
ctx.status = 200
ctx.message = `Client Database ${env.CLIENT_ID} successfully deleted.`
ctx.message = `Client Database ${clientId} successfully deleted.`
}
const getClientId = ctx => {
const clientId =
(ctx.query && ctx.query.clientId) ||
(ctx.body && ctx.body.clientId) ||
env.CLIENT_ID
if (!clientId) {
ctx.throw(400, "ClientId not suplied")
}
return clientId
}

5
packages/server/src/api/controllers/component.js
View file

@ -5,10 +5,11 @@ const {
budibaseTempDir,
budibaseAppsDir,
} = require("../../utilities/budibaseDir")
const env = require("../../environment")
exports.fetchAppComponentDefinitions = async function(ctx) {
const db = new CouchDB(ClientDb.name(env.CLIENT_ID))
const masterDb = new CouchDB("clientAppLookup")
const { clientId } = await masterDb.get(ctx.params.appId)
const db = new CouchDB(ClientDb.name(clientId))
const app = await db.get(ctx.params.appId)
const componentDefinitions = app.componentLibraries.reduce(

6
packages/server/src/api/controllers/instance.js
View file

@ -1,14 +1,16 @@
const CouchDB = require("../../db")
const client = require("../../db/clientDb")
const newid = require("../../db/newid")
const env = require("../../environment")
exports.create = async function(ctx) {
const instanceName = ctx.request.body.name
const appShortId = ctx.params.applicationId.substring(0, 7)
const instanceId = `inst_${appShortId}_${newid()}`
const { applicationId } = ctx.params
const clientId = env.CLIENT_ID
const masterDb = new CouchDB("clientAppLookup")
const { clientId } = await masterDb.get(applicationId)
const db = new CouchDB(instanceId)
await db.put({
_id: "_design/database",

6
packages/server/src/api/controllers/user.js
View file

@ -1,7 +1,6 @@
const CouchDB = require("../../db")
const clientDb = require("../../db/clientDb")
const bcrypt = require("../../utilities/bcrypt")
const env = require("../../environment")
const getUserId = userName => `user_${userName}`
const {
POWERUSER_LEVEL_ID,
@ -42,8 +41,11 @@ exports.create = async function(ctx) {
const response = await database.post(user)
const masterDb = new CouchDB("clientAppLookup")
const { clientId } = await masterDb.get(appId)
// the clientDB needs to store a map of users against the app
const db = new CouchDB(clientDb.name(env.CLIENT_ID))
const db = new CouchDB(clientDb.name(clientId))
const app = await db.get(appId)
app.userInstanceMap = {

33
packages/server/src/api/routes/tests/application.spec.js
View file

@ -5,6 +5,7 @@ const {
destroyClientDatabase,
builderEndpointShouldBlockNormalUsers,
supertest,
TEST_CLIENT_ID,
defaultHeaders,
} = require("./couchTestUtils")
@ -51,6 +52,7 @@ describe("/applications", () => {
body: { name: "My App" }
})
})
})
describe("fetch", () => {
@ -68,6 +70,37 @@ describe("/applications", () => {
expect(res.body.length).toBe(2)
})
it("lists only applications in requested client databse", async () => {
await createApplication(request, "app1")
await createClientDatabase("new_client")
const blah = await request
.post("/api/applications")
.send({ name: "app2", clientId: "new_client"})
.set(defaultHeaders)
.expect('Content-Type', /json/)
//.expect(200)
const client1Res = await request
.get(`/api/applications?clientId=${TEST_CLIENT_ID}`)
.set(defaultHeaders)
.expect('Content-Type', /json/)
.expect(200)
expect(client1Res.body.length).toBe(1)
expect(client1Res.body[0].name).toBe("app1")
const client2Res = await request
.get(`/api/applications?clientId=new_client`)
.set(defaultHeaders)
.expect('Content-Type', /json/)
.expect(200)
expect(client2Res.body.length).toBe(1)
expect(client2Res.body[0].name).toBe("app2")
})
it("should apply authorization to endpoint", async () => {
const otherApplication = await createApplication(request)
const instance = await createInstance(request, otherApplication._id)

3
packages/server/src/api/routes/tests/couchTestUtils.js
View file

@ -9,6 +9,7 @@ const {
const TEST_CLIENT_ID = "test-client-id"
exports.TEST_CLIENT_ID = TEST_CLIENT_ID
exports.supertest = async () => {
let request
let port = 4002
@ -59,7 +60,7 @@ exports.createView = async (request, instanceId, view) => {
return res.body
}
exports.createClientDatabase = async () => await create(TEST_CLIENT_ID)
exports.createClientDatabase = async id => await create(id || TEST_CLIENT_ID)
exports.createApplication = async (request, name = "test_application") => {
const res = await request

1
packages/standard-components/src/DataForm.svelte
View file

@ -87,7 +87,6 @@
.form-content {
margin-bottom: 20px;
}
.input {

4
packages/standard-components/src/DataTable.svelte
View file

@ -65,7 +65,7 @@
}
thead {
background: #393C44;
background: #393c44;
border: 1px solid #ccc;
height: 40px;
text-align: left;
@ -87,7 +87,7 @@
tbody tr {
border-bottom: 1px solid #ccc;
transition: 0.3s background-color;
color: #393C44;
color: #393c44;
font-size: 14px;
height: 40px;
}

2
packages/standard-components/src/Image.svelte
View file

@ -7,6 +7,8 @@
export let height
export let width
export let _bb
$: style = buildStyle({ height, width })
</script>