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

Merge branch 'feature/security-update' of github.com:Budibase/budibase into feature/self-hosting

This commit is contained in:
mike12345567 2020-12-08 13:45:53 +00:00
parent ffad7bb3d0 48e40cde99
commit 2ad44fe60a
141 changed files with 3452 additions and 1681 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/cypress/integration/createUser.spec.js
View File

@ -9,7 +9,7 @@ context('Create a User', () => {
// https://on.cypress.io/interacting-with-elements
it('should create a user', () => {
cy.createUser("bbuser", "test", "ADMIN")
cy.createUser("bbuser@test.com", "test", "ADMIN")
// // Check to make sure user was created!
cy.contains("bbuser").should('be.visible')

8
packages/builder/cypress/support/commands.js
View File

@ -44,9 +44,9 @@ Cypress.Commands.add("createApp", name => {
cy.contains("Next").click()
cy.get("input[name=username]")
cy.get("input[name=email]")
.click()
.type("test")
.type("test@test.com")
cy.get("input[name=password]")
.click()
.type("test")
@ -111,7 +111,7 @@ Cypress.Commands.add("addRow", values => {
})
})
Cypress.Commands.add("createUser", (username, password, role) => {
Cypress.Commands.add("createUser", (email, password, role) => {
// Create User
cy.contains("Users").click()
@ -123,7 +123,7 @@ Cypress.Commands.add("createUser", (username, password, role) => {
.type(password)
cy.get("input")
.eq(1)
.type(username)
.type(email)
cy.get("select")
.first()
.select(role)

3
packages/builder/package.json
View File

@ -63,7 +63,7 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.50.2",
"@budibase/bbui": "^1.52.2",
"@budibase/client": "^0.3.8",
"@budibase/colorpicker": "^1.0.1",
"@budibase/svelte-ag-grid": "^0.0.16",
@ -107,6 +107,7 @@
"rollup-plugin-alias": "^1.5.2",
"rollup-plugin-copy": "^3.0.0",
"rollup-plugin-css-only": "^2.1.0",
"rollup-plugin-html": "^0.2.1",
"rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-globals": "^1.4.0",

6
packages/builder/rollup.config.js
View File

@ -11,6 +11,7 @@ import copy from "rollup-plugin-copy"
import css from "rollup-plugin-css-only"
import replace from "rollup-plugin-replace"
import json from "@rollup/plugin-json"
import html from "rollup-plugin-html"
import path from "path"
@ -75,10 +76,6 @@ export default {
{ src: "src/index.html", dest: outputpath },
{ src: "src/favicon.png", dest: outputpath },
{ src: "assets", dest: outputpath },
{
src: "node_modules/@budibase/client/dist/budibase-client.esm.mjs",
dest: outputpath,
},
{
src: "node_modules/@budibase/bbui/dist/bbui.css",
dest: outputpath,
@ -147,5 +144,6 @@ export default {
// instead of npm run dev), minify
production && terser(),
json(),
html(),
],
}

14
packages/builder/src/builderStore/getNewComponentName.js
View File

@ -2,6 +2,8 @@ import { walkProps } from "./storeUtils"
import { get_capitalised_name } from "../helpers"
import { get } from "svelte/store"
import { allScreens } from "builderStore"
import { FrontendTypes } from "../constants"
import { currentAsset } from "."
export default function(component, state) {
const capitalised = get_capitalised_name(
@ -19,14 +21,16 @@ export default function(component, state) {
})
}
// check page first
findMatches(state.pages[state.currentPageName].props)
// check layouts first
for (let layout of state.layouts) {
findMatches(layout.props)
}
// if viewing screen, check current screen for duplicate
if (state.currentFrontEndType === "screen") {
findMatches(state.currentPreviewItem.props)
if (state.currentFrontEndType === FrontendTypes.SCREEN) {
findMatches(get(currentAsset).props)
} else {
// viewing master page - need to find against all screens
// viewing a layout - need to find against all screens
for (let screen of get(allScreens)) {
findMatches(screen.props)
}

81
packages/builder/src/builderStore/index.js
View File

@ -4,37 +4,74 @@ import { getAutomationStore } from "./store/automation/"
import { getThemeStore } from "./store/theme"
import { derived } from "svelte/store"
import analytics from "analytics"
import { LAYOUT_NAMES } from "../constants"
import { makePropsSafe } from "components/userInterface/assetParsing/createProps"
export const store = getFrontendStore()
export const backendUiStore = getBackendUiStore()
export const automationStore = getAutomationStore()
export const themeStore = getThemeStore()
export const currentAsset = derived(store, $store => {
const layout = $store.layouts
? $store.layouts.find(layout => layout._id === $store.currentAssetId)
: null
if (layout) return layout
const screen = $store.screens
? $store.screens.find(screen => screen._id === $store.currentAssetId)
: null
if (screen) return screen
return null
})
export const selectedComponent = derived(
[store, currentAsset],
([$store, $currentAsset]) => {
if (!$currentAsset || !$store.selectedComponentId) return null
function traverse(node, callback) {
if (node._id === $store.selectedComponentId) return callback(node)
if (node._children) {
node._children.forEach(child => traverse(child, callback))
}
if (node.props) {
traverse(node.props, callback)
}
}
let component
traverse($currentAsset, found => {
const componentIdentifier = found._component ?? found.props._component
const componentDef = componentIdentifier.startsWith("##")
? found
: $store.components[componentIdentifier]
component = makePropsSafe(componentDef, found)
})
return component
}
)
export const currentAssetName = derived(store, () => {
return currentAsset.name
})
// leave this as before for consistency
export const allScreens = derived(store, $store => {
let screens = []
if ($store.pages == null) {
return screens
}
for (let page of Object.values($store.pages)) {
screens = screens.concat(page._screens)
}
return screens
return $store.screens
})
export const currentScreens = derived(store, $store => {
const currentScreens = $store.pages[$store.currentPageName]?._screens
if (currentScreens == null) {
return []
}
return Array.isArray(currentScreens)
? currentScreens
: Object.values(currentScreens)
})
export const selectedPage = derived(store, $store => {
if (!$store.pages) return null
return $store.pages[$store.currentPageName || "main"]
export const mainLayout = derived(store, $store => {
return $store.layouts?.find(
layout => layout.props?._id === LAYOUT_NAMES.MASTER.PRIVATE
)
})
export const initialise = async () => {

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

@ -4,34 +4,36 @@ import {
createProps,
getBuiltin,
makePropsSafe,
} from "components/userInterface/pagesParsing/createProps"
import { allScreens, backendUiStore, selectedPage } from "builderStore"
import { generate_screen_css } from "../generate_css"
} from "components/userInterface/assetParsing/createProps"
import {
allScreens,
backendUiStore,
currentAsset,
mainLayout,
selectedComponent,
} from "builderStore"
import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
import api from "../api"
import { DEFAULT_PAGES_OBJECT } from "../../constants"
import { FrontendTypes } from "../../constants"
import getNewComponentName from "../getNewComponentName"
import analytics from "analytics"
import {
findChildComponentType,
generateNewIdsForComponent,
getComponentDefinition,
getParent,
findParent,
} from "../storeUtils"
const INITIAL_FRONTEND_STATE = {
apps: [],
name: "",
description: "",
pages: DEFAULT_PAGES_OBJECT,
mainUi: {},
unauthenticatedUi: {},
layouts: [],
screens: [],
components: [],
currentPreviewItem: null,
currentComponentInfo: null,
currentFrontEndType: "none",
currentPageName: "",
currentComponentProps: null,
currentAssetId: "",
selectedComponentId: "",
errors: [],
hasAppPackage: false,
libraries: null,
@ -43,52 +45,13 @@ export const getFrontendStore = () => {
const store = writable({ ...INITIAL_FRONTEND_STATE })
store.actions = {
// TODO: REFACTOR
initialise: async pkg => {
const { layouts, screens, application } = pkg
store.update(state => {
state.appId = pkg.application._id
state.appId = application._id
return state
})
const screens = await api.get("/api/screens").then(r => r.json())
const mainScreens = screens.filter(screen =>
screen._id.includes(pkg.pages.main._id)
),
unauthScreens = screens.filter(screen =>
screen._id.includes(pkg.pages.unauthenticated._id)
)
pkg.pages = {
main: {
...pkg.pages.main,
_screens: mainScreens,
},
unauthenticated: {
...pkg.pages.unauthenticated,
_screens: unauthScreens,
},
}
// if the app has just been created
// we need to build the CSS and save
if (pkg.justCreated) {
for (let pageName of ["main", "unauthenticated"]) {
const page = pkg.pages[pageName]
store.actions.screens.regenerateCss(page)
for (let screen of page._screens) {
store.actions.screens.regenerateCss(screen)
}
await api.post(`/api/pages/${page._id}`, {
page: {
componentLibraries: pkg.application.componentLibraries,
...page,
},
screens: page._screens,
})
}
}
pkg.justCreated = false
const components = await fetchComponentLibDefinitions(pkg.application._id)
@ -99,7 +62,8 @@ export const getFrontendStore = () => {
name: pkg.application.name,
description: pkg.application.description,
appId: pkg.application._id,
pages: pkg.pages,
layouts,
screens,
hasAppPackage: true,
builtins: [getBuiltin("##builtin/screenslot")],
appInstance: pkg.application.instance,
@ -107,20 +71,6 @@ export const getFrontendStore = () => {
await backendUiStore.actions.database.select(pkg.application.instance)
},
selectPageOrScreen: type => {
store.update(state => {
state.currentFrontEndType = type
const page = get(selectedPage)
const pageOrScreen = type === "page" ? page : page._screens[0]
state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null
state.currentPreviewItem = pageOrScreen
state.currentView = "detail"
return state
})
},
routing: {
fetch: async () => {
const response = await api.get("/api/routing")
@ -133,167 +83,166 @@ export const getFrontendStore = () => {
},
},
screens: {
select: screenId => {
select: async screenId => {
let promise
store.update(state => {
const screen = get(allScreens).find(screen => screen._id === screenId)
state.currentPreviewItem = screen
state.currentFrontEndType = "screen"
state.currentFrontEndType = FrontendTypes.SCREEN
state.currentAssetId = screenId
state.currentView = "detail"
store.actions.screens.regenerateCssForCurrentScreen()
const safeProps = makePropsSafe(
state.components[screen.props._component],
screen.props
)
screen.props = safeProps
state.currentComponentInfo = safeProps
promise = store.actions.screens.regenerateCss(screen)
state.selectedComponentId = screen.props._id
return state
})
await promise
},
create: async screen => {
let savePromise
screen = await store.actions.screens.save(screen)
store.update(state => {
state.currentPreviewItem = screen
state.currentComponentInfo = screen.props
state.currentFrontEndType = "screen"
if (state.currentPreviewItem) {
store.actions.screens.regenerateCss(state.currentPreviewItem)
}
savePromise = store.actions.screens.save(screen)
state.currentAssetId = screen._id
state.selectedComponentId = screen.props._id
state.currentFrontEndType = FrontendTypes.SCREEN
return state
})
await savePromise
return screen
},
save: async screen => {
const page = get(selectedPage)
const currentPageScreens = page._screens
const creatingNewScreen = screen._id === undefined
const response = await api.post(`/api/screens`, screen)
screen = await response.json()
let savePromise
const response = await api.post(`/api/screens/${page._id}`, screen)
const json = await response.json()
screen._rev = json.rev
screen._id = json.id
const foundScreen = page._screens.findIndex(el => el._id === screen._id)
if (foundScreen !== -1) {
page._screens.splice(foundScreen, 1)
}
page._screens.push(screen)
// TODO: should carry out all server updates to screen in a single call
store.update(state => {
page._screens = currentPageScreens
const foundScreen = state.screens.findIndex(
el => el._id === screen._id
)
if (foundScreen !== -1) {
state.screens.splice(foundScreen, 1)
}
state.screens.push(screen)
if (creatingNewScreen) {
state.currentPreviewItem = screen
const safeProps = makePropsSafe(
state.components[screen.props._component],
screen.props
)
state.currentComponentInfo = safeProps
state.selectedComponentId = safeProps._id
screen.props = safeProps
}
savePromise = store.actions.pages.save()
return state
})
if (savePromise) await savePromise
return screen
},
regenerateCss: screen => {
screen._css = generate_screen_css([screen.props])
regenerateCss: async asset => {
const response = await api.post("/api/css/generate", asset)
asset._css = (await response.json())?.css
},
regenerateCssForCurrentScreen: () => {
const { currentPreviewItem } = get(store)
if (currentPreviewItem) {
store.actions.screens.regenerateCss(currentPreviewItem)
regenerateCssForCurrentScreen: async () => {
const asset = get(currentAsset)
if (asset) {
await store.actions.screens.regenerateCss(asset)
}
},
delete: async screens => {
let deletePromise
const screensToDelete = Array.isArray(screens) ? screens : [screens]
const screenDeletePromises = []
store.update(state => {
const currentPage = get(selectedPage)
for (let screenToDelete of screensToDelete) {
// Remove screen from current page as well
// TODO: Should be done server side
currentPage._screens = currentPage._screens.filter(
scr => scr._id !== screenToDelete._id
state.screens = state.screens.filter(
screen => screen._id !== screenToDelete._id
)
deletePromise = api.delete(
`/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
screenDeletePromises.push(
api.delete(
`/api/screens/${screenToDelete._id}/${screenToDelete._rev}`
)
)
}
return state
})
await deletePromise
await Promise.all(screenDeletePromises)
},
},
preview: {
saveSelected: async () => {
const state = get(store)
if (state.currentFrontEndType !== "page") {
await store.actions.screens.save(state.currentPreviewItem)
const selectedAsset = get(currentAsset)
if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
await store.actions.screens.save(selectedAsset)
} else {
await store.actions.layouts.save(selectedAsset)
}
await store.actions.pages.save()
},
},
pages: {
select: pageName => {
layouts: {
select: async layoutId => {
store.update(state => {
const currentPage = state.pages[pageName]
const layout = store.actions.layouts.find(layoutId)
state.currentFrontEndType = "page"
state.currentFrontEndType = FrontendTypes.LAYOUT
state.currentView = "detail"
state.currentPageName = pageName
// This is the root of many problems.
// Uncaught (in promise) TypeError: Cannot read property '_component' of undefined
// it appears that the currentPage sometimes has _props instead of props
// why
const safeProps = makePropsSafe(
state.components[currentPage.props._component],
currentPage.props
)
state.currentComponentInfo = safeProps
currentPage.props = safeProps
state.currentPreviewItem = state.pages[pageName]
store.actions.screens.regenerateCssForCurrentScreen()
for (let screen of get(allScreens)) {
screen._css = generate_screen_css([screen.props])
}
state.currentAssetId = layout._id
state.selectedComponentId = layout.props._id
return state
})
},
save: async page => {
const storeContents = get(store)
const pageName = storeContents.currentPageName || "main"
const pageToSave = page || storeContents.pages[pageName]
let cssPromises = []
cssPromises.push(store.actions.screens.regenerateCssForCurrentScreen())
// TODO: revisit. This sends down a very weird payload
const response = await api.post(`/api/pages/${pageToSave._id}`, {
page: {
componentLibraries: storeContents.pages.componentLibraries,
...pageToSave,
},
screens: pageToSave._screens,
})
for (let screen of get(allScreens)) {
cssPromises.push(store.actions.screens.regenerateCss(screen))
}
await Promise.all(cssPromises)
},
save: async layout => {
const layoutToSave = cloneDeep(layout)
delete layoutToSave._css
const response = await api.post(`/api/layouts`, layoutToSave)
const json = await response.json()
if (!json.ok) throw new Error("Error updating page")
store.update(state => {
const layoutIdx = state.layouts.findIndex(
stateLayout => stateLayout._id === json._id
)
if (layoutIdx >= 0) {
// update existing layout
state.layouts.splice(layoutIdx, 1, json)
} else {
// save new layout
state.layouts.push(json)
}
state.currentAssetId = json._id
state.selectedComponentId = json.props._id
return state
})
},
find: layoutId => {
if (!layoutId) {
return get(mainLayout)
}
const storeContents = get(store)
return storeContents.layouts.find(layout => layout._id === layoutId)
},
delete: async layoutToDelete => {
const response = await api.delete(
`/api/layouts/${layoutToDelete._id}/${layoutToDelete._rev}`
)
if (response.status !== 200) {
const json = await response.json()
throw new Error(json.message)
}
store.update(state => {
state.pages[pageName]._rev = json.rev
state.layouts = state.layouts.filter(
layout => layout._id !== layoutToDelete._id
)
return state
})
},
@ -301,17 +250,19 @@ export const getFrontendStore = () => {
components: {
select: component => {
store.update(state => {
const componentDef = component._component.startsWith("##")
? component
: state.components[component._component]
state.currentComponentInfo = makePropsSafe(componentDef, component)
state.selectedComponentId = component._id
state.currentView = "component"
return state
})
},
create: (componentToAdd, presetProps) => {
const selectedAsset = get(currentAsset)
store.update(state => {
function findSlot(component_array) {
if (!component_array) {
return false
}
for (let component of component_array) {
if (component._component === "##builtin/screenslot") {
return true
@ -324,7 +275,7 @@ export const getFrontendStore = () => {
if (
componentToAdd.startsWith("##") &&
findSlot(state.pages[state.currentPageName].props._children)
findSlot(selectedAsset?.props._children)
) {
return state
}
@ -340,29 +291,34 @@ export const getFrontendStore = () => {
_instanceName: instanceName,
})
const currentComponent =
state.components[state.currentComponentInfo._component]
const selected = get(selectedComponent)
const targetParent = currentComponent.children
? state.currentComponentInfo
: getParent(
state.currentPreviewItem.props,
state.currentComponentInfo
)
const currentComponentDefinition =
state.components[selected._component]
// Don't continue if there's no parent
if (!targetParent) {
return state
const allowsChildren = currentComponentDefinition.children
// Determine where to put the new component.
let targetParent
if (allowsChildren) {
// Child of the selected component
targetParent = selected
} else {
// Sibling of selected component
targetParent = findParent(selectedAsset.props, selected)
}
targetParent._children = targetParent._children.concat(
newComponent.props
)
// Don't continue if there's no parent
if (!targetParent) return state
// Push the new component
targetParent._children.push(newComponent.props)
store.actions.preview.saveSelected()
state.currentView = "component"
state.currentComponentInfo = newComponent.props
state.selectedComponentId = newComponent.props._id
analytics.captureEvent("Added Component", {
name: newComponent.props._component,
})
@ -370,14 +326,12 @@ export const getFrontendStore = () => {
})
},
copy: (component, cut = false) => {
const selectedAsset = get(currentAsset)
store.update(state => {
state.componentToPaste = cloneDeep(component)
state.componentToPaste.isCut = cut
if (cut) {
const parent = getParent(
state.currentPreviewItem.props,
component._id
)
const parent = findParent(selectedAsset.props, component._id)
parent._children = parent._children.filter(
child => child._id !== component._id
)
@ -387,7 +341,9 @@ export const getFrontendStore = () => {
return state
})
},
paste: (targetComponent, mode) => {
paste: async (targetComponent, mode) => {
const selectedAsset = get(currentAsset)
let promises = []
store.update(state => {
if (!state.componentToPaste) return state
@ -406,54 +362,56 @@ export const getFrontendStore = () => {
return state
}
const parent = getParent(
state.currentPreviewItem.props,
targetComponent
)
const parent = findParent(selectedAsset.props, targetComponent)
const targetIndex = parent._children.indexOf(targetComponent)
const index = mode === "above" ? targetIndex : targetIndex + 1
parent._children.splice(index, 0, cloneDeep(componentToPaste))
store.actions.screens.regenerateCssForCurrentScreen()
store.actions.preview.saveSelected()
promises.push(store.actions.screens.regenerateCssForCurrentScreen())
promises.push(store.actions.preview.saveSelected())
store.actions.components.select(componentToPaste)
return state
})
await Promise.all(promises)
},
updateStyle: (type, name, value) => {
store.update(state => {
if (!state.currentComponentInfo._styles) {
state.currentComponentInfo._styles = {}
}
state.currentComponentInfo._styles[type][name] = value
updateStyle: async (type, name, value) => {
let promises = []
const selected = get(selectedComponent)
store.actions.screens.regenerateCssForCurrentScreen()
store.update(state => {
if (!selected._styles) {
selected._styles = {}
}
selected._styles[type][name] = value
promises.push(store.actions.screens.regenerateCssForCurrentScreen())
// save without messing with the store
store.actions.preview.saveSelected()
promises.push(store.actions.preview.saveSelected())
return state
})
await Promise.all(promises)
},
updateProp: (name, value) => {
store.update(state => {
let current_component = state.currentComponentInfo
let current_component = get(selectedComponent)
current_component[name] = value
state.currentComponentInfo = current_component
state.selectedComponentId = current_component._id
store.actions.preview.saveSelected()
return state
})
},
findRoute: component => {
// Gets all the components to needed to construct a path.
const tempStore = get(store)
const selectedAsset = get(currentAsset)
let pathComponents = []
let parent = component
let root = false
while (!root) {
parent = getParent(tempStore.currentPreviewItem.props, parent)
parent = findParent(selectedAsset.props, parent)
if (!parent) {
root = true
} else {
@ -461,7 +419,7 @@ export const getFrontendStore = () => {
}
}
// Remove root entry since it's the screen or page layout.
// Remove root entry since it's the screen or layout.
// Reverse array since we need the correct order of the IDs
const reversedComponents = pathComponents.reverse().slice(1)
@ -476,11 +434,12 @@ export const getFrontendStore = () => {
},
links: {
save: async (url, title) => {
let savePromise
let promises = []
const layout = get(mainLayout)
store.update(state => {
// Try to extract a nav component from the master screen
// Try to extract a nav component from the master layout
const nav = findChildComponentType(
state.pages.main,
layout,
"@budibase/standard-components/navigation"
)
if (nav) {
@ -513,18 +472,18 @@ export const getFrontendStore = () => {
}).props
}
// Save page and regenerate all CSS because otherwise weird things happen
// Save layout and regenerate all CSS because otherwise weird things happen
nav._children = [...nav._children, newLink]
state.currentPageName = "main"
store.actions.screens.regenerateCss(state.pages.main)
for (let screen of state.pages.main._screens) {
store.actions.screens.regenerateCss(screen)
state.currentAssetId = layout._id
promises.push(store.actions.screens.regenerateCss(layout))
for (let screen of get(allScreens)) {
promises.push(store.actions.screens.regenerateCss(screen))
}
savePromise = store.actions.pages.save()
promises.push(store.actions.layouts.save(layout))
}
return state
})
await savePromise
await Promise.all(promises)
},
},
},

1
packages/builder/src/builderStore/store/screenTemplates/utils/Component.js
View File

@ -14,7 +14,6 @@ export class Component extends BaseStructure {
active: {},
selected: {},
},
_code: "",
type: "",
_instanceName: "",
_children: [],

3
packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js
View File

@ -4,6 +4,7 @@ export class Screen extends BaseStructure {
constructor() {
super(true)
this._json = {
layoutId: "layout_private_master",
props: {
_id: "",
_component: "",
@ -18,7 +19,7 @@ export class Screen extends BaseStructure {
},
routing: {
route: "",
roleId: "",
roleId: "BASIC",
},
name: "screen-id",
}

18
packages/builder/src/builderStore/storeUtils.js
View File

@ -1,15 +1,21 @@
import { getBuiltin } from "components/userInterface/pagesParsing/createProps"
import { getBuiltin } from "components/userInterface/assetParsing/createProps"
import { uuid } from "./uuid"
import getNewComponentName from "./getNewComponentName"
export const getParent = (rootProps, child) => {
/**
* Find the parent component of the passed in child.
* @param {Object} rootProps - props to search for the parent in
* @param {String|Object} child - id of the child or the child itself to find the parent of
*/
export const findParent = (rootProps, child) => {
let parent
walkProps(rootProps, (p, breakWalk) => {
walkProps(rootProps, (props, breakWalk) => {
if (
p._children &&
(p._children.includes(child) || p._children.some(c => c._id === child))
props._children &&
(props._children.includes(child) ||
props._children.some(c => c._id === child))
) {
parent = p
parent = props
breakWalk()
}
})

2
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -62,6 +62,8 @@
</Select>
{:else if value.customType === 'password'}
<Input type="password" extraThin bind:value={block.inputs[key]} />
{:else if value.customType === 'email'}
<Input type="email" extraThin bind:value={block.inputs[key]} />
{:else if value.customType === 'table'}
<TableSelector bind:value={block.inputs[key]} />
{:else if value.customType === 'row'}

19
packages/builder/src/components/backend/DataTable/DataTable.svelte
View File

@ -4,12 +4,17 @@
import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
import CreateViewButton from "./buttons/CreateViewButton.svelte"
import ExportButton from "./buttons/ExportButton.svelte"
import EditRolesButton from "./buttons/EditRolesButton.svelte"
import * as api from "./api"
import Table from "./Table.svelte"
import { TableNames } from "constants"
import CreateEditUser from "./modals/CreateEditUser.svelte"
import CreateEditRow from "./modals/CreateEditRow.svelte"
let data = []
let loading = false
$: isUsersTable = $backendUiStore.selectedTable?._id === TableNames.USERS
$: title = $backendUiStore.selectedTable.name
$: schema = $backendUiStore.selectedTable.schema
$: tableView = {
@ -29,11 +34,21 @@
}
</script>
<Table {title} {schema} {data} allowEditing={true} {loading}>
<Table
{title}
{schema}
tableId={$backendUiStore.selectedTable?._id}
{data}
allowEditing={true}
{loading}>
<CreateColumnButton />
{#if schema && Object.keys(schema).length > 0}
<CreateRowButton />
<CreateRowButton
modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
<CreateViewButton />
<ExportButton view={tableView} />
{/if}
{#if isUsersTable}
<EditRolesButton />
{/if}
</Table>

22
packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
View File

@ -1,19 +1,22 @@
<script>
import { Input, Select, Label, DatePicker, Toggle } from "@budibase/bbui"
import { backendUiStore } from "builderStore"
import { TableNames } from "constants"
import {
Input,
Select,
Label,
DatePicker,
Toggle,
RichText,
} from "@budibase/bbui"
import Dropzone from "components/common/Dropzone.svelte"
import { capitalise } from "../../../helpers"
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
export let meta
export let creating
export let value = meta.type === "boolean" ? false : ""
export let readonly
$: type = meta.type
$: label = capitalise(meta.name)
$: editingUser =
!creating && $backendUiStore.selectedTable?._id === TableNames.USERS
</script>
{#if type === 'options'}
@ -34,6 +37,11 @@
<Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
{:else if type === 'link'}
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
{:else if type === 'longform'}
<div>
<Label extraSmall grey>{label}</Label>
<RichText bind:value />
</div>
{:else}
<Input
thin
@ -41,5 +49,5 @@
data-cy="{meta.name}-input"
{type}
bind:value
disabled={editingUser} />
disabled={readonly} />
{/if}

21
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -7,10 +7,15 @@
import { notifier } from "builderStore/store/notifications"
import Spinner from "components/common/Spinner.svelte"
import DeleteRowsButton from "./buttons/DeleteRowsButton.svelte"
import { getRenderer, editRowRenderer } from "./cells/cellRenderers"
import {
getRenderer,
editRowRenderer,
userRowRenderer,
} from "./cells/cellRenderers"
import TableLoadingOverlay from "./TableLoadingOverlay"
import TableHeader from "./TableHeader"
import "@budibase/svelte-ag-grid/dist/index.css"
import { TableNames } from "constants"
export let schema = {}
export let data = []
@ -42,6 +47,14 @@
animateRows: true,
}
$: isUsersTable = tableId === TableNames.USERS
$: {
if (isUsersTable) {
schema.email.displayFieldName = "Email"
schema.roleId.displayFieldName = "Role"
}
}
$: {
let result = []
if (allowEditing) {
@ -57,12 +70,12 @@
suppressMenu: true,
minWidth: 114,
width: 114,
cellRenderer: editRowRenderer,
cellRenderer: isUsersTable ? userRowRenderer : editRowRenderer,
},
]
}
Object.keys(schema || {}).forEach((key, idx) => {
Object.entries(schema || {}).forEach(([key, value]) => {
result.push({
headerCheckboxSelection: false,
headerComponent: TableHeader,
@ -70,7 +83,7 @@
field: schema[key],
editable: allowEditing,
},
headerName: key,
headerName: value.displayFieldName || key,
field: key,
sortable: true,
cellRenderer: getRenderer(schema[key], true),

6
packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
View File

@ -1,6 +1,8 @@
<script>
import { TextButton as Button, Icon, Modal } from "@budibase/bbui"
import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
import CreateEditRow from "../modals/CreateEditRow.svelte"
export let modalContentComponent = CreateEditRow
let modal
</script>
@ -12,5 +14,5 @@
</Button>
</div>
<Modal bind:this={modal}>
<CreateEditRowModal />
<svelte:component this={modalContentComponent} />
</Modal>

23
packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte Normal file
View File

@ -0,0 +1,23 @@
<script>
import { TextButton as Button, Modal } from "@budibase/bbui"
import EditRolesModal from "../modals/EditRoles.svelte"
let modal
</script>
<div>
<Button text small on:click={modal.show}>
<i class="ri-lock-line" />
Edit Roles
</Button>
</div>
<Modal bind:this={modal}>
<EditRolesModal />
</Modal>
<style>
i {
margin-right: var(--spacing-xs);
font-size: var(--font-size-s);
}
</style>

18
packages/builder/src/components/backend/DataTable/cells/cellRenderers.js
View File

@ -1,5 +1,6 @@
import AttachmentList from "./AttachmentCell.svelte"
import EditRow from "../modals/EditRow.svelte"
import CreateEditUser from "../modals/CreateEditUser.svelte"
import DeleteRow from "../modals/DeleteRow.svelte"
import RelationshipDisplay from "./RelationshipCell.svelte"
@ -45,6 +46,23 @@ export function editRowRenderer(params) {
return container
}
export function userRowRenderer(params) {
const container = document.createElement("div")
container.style.height = "100%"
container.style.display = "flex"
container.style.alignItems = "center"
new EditRow({
target: container,
props: {
row: params.data,
modalContentComponent: CreateEditUser,
},
})
return container
}
/* eslint-disable no-unused-vars */
function attachmentRenderer(options, constraints, editable) {
return params => {

9
packages/builder/src/components/backend/DataTable/modals/CreateEditRowModal.svelte → packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte
View File

@ -1,6 +1,5 @@
<script>
import { backendUiStore } from "builderStore"
import { TableNames } from "constants"
import { notifier } from "builderStore/store/notifications"
import RowFieldControl from "../RowFieldControl.svelte"
import * as api from "../api"
@ -40,15 +39,9 @@
confirmText={creating ? 'Create Row' : 'Save Row'}
onConfirm={saveRow}>
<ErrorsBox {errors} />
{#if creating && table._id === TableNames.USERS}
<RowFieldControl
{creating}
meta={{ name: 'password', type: 'password' }}
bind:value={row.password} />
{/if}
{#each tableSchema as [key, meta]}
<div>
<RowFieldControl {meta} bind:value={row[key]} {creating} />
<RowFieldControl {meta} bind:value={row[key]} />
</div>
{/each}
</ModalContent>

101
packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte Normal file
View File

@ -0,0 +1,101 @@
<script>
import { onMount } from "svelte"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import RowFieldControl from "../RowFieldControl.svelte"
import * as backendApi from "../api"
import builderApi from "builderStore/api"
import { ModalContent, Select } from "@budibase/bbui"
import ErrorsBox from "components/common/ErrorsBox.svelte"
export let row = {}
let errors = []
let roles = []
let rolesLoaded = false
$: creating = row?._id == null
$: table = row.tableId
? $backendUiStore.tables.find(table => table._id === row?.tableId)
: $backendUiStore.selectedTable
$: tableSchema = getUserSchema(table)
$: customSchemaKeys = getCustomSchemaKeys(tableSchema)
const getUserSchema = table => {
let schema = table?.schema ?? {}
if (schema.username) {
schema.username.name = "Username"
}
return schema
}
const getCustomSchemaKeys = schema => {
let customSchema = { ...schema }
delete customSchema["email"]
delete customSchema["roleId"]
return Object.entries(customSchema)
}
const saveRow = async () => {
const rowResponse = await backendApi.saveRow(
{ ...row, tableId: table._id },
table._id
)
if (rowResponse.errors) {
if (Array.isArray(rowResponse.errors)) {
errors = rowResponse.errors.map(error => ({ message: error }))
} else {
errors = Object.entries(rowResponse.errors)
.map(([key, error]) => ({ dataPath: key, message: error }))
.flat()
}
return false
}
notifier.success("User saved successfully.")
backendUiStore.actions.rows.save(rowResponse)
}
const fetchRoles = async () => {
const rolesResponse = await builderApi.get("/api/roles")
roles = await rolesResponse.json()
rolesLoaded = true
}
onMount(fetchRoles)
</script>
<ModalContent
title={creating ? 'Create User' : 'Edit User'}
confirmText={creating ? 'Create User' : 'Save User'}
onConfirm={saveRow}>
<ErrorsBox {errors} />
<RowFieldControl
meta={{ ...tableSchema.email, name: 'Email' }}
bind:value={row.email}
readonly={!creating} />
{#if creating}
<RowFieldControl
meta={{ name: 'password', type: 'password' }}
bind:value={row.password} />
{/if}
<!-- Defer rendering this select until roles load, otherwise the initial
selection is always undefined -->
{#if rolesLoaded}
<Select
thin
secondary
label="Role"
data-cy="roleId-select"
bind:value={row.roleId}>
<option value="">Choose an option</option>
{#each roles as role}
<option value={role._id}>{role.name}</option>
{/each}
</Select>
{/if}
{#each customSchemaKeys as [key, meta]}
<RowFieldControl {meta} bind:value={row[key]} {creating} />
{/each}
</ModalContent>

136
packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte Normal file
View File

@ -0,0 +1,136 @@
<script>
import { ModalContent, Select, Input, Button } from "@budibase/bbui"
import { onMount } from "svelte"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import ErrorsBox from "components/common/ErrorsBox.svelte"
let roles = []
let permissions = []
let selectedRole = {}
let errors = []
$: selectedRoleId = selectedRole._id
$: otherRoles = roles.filter(role => role._id !== selectedRoleId)
$: isCreating = selectedRoleId == null || selectedRoleId === ""
// Loads available roles and permissions from the server
const fetchRoles = async () => {
const rolesResponse = await api.get("/api/roles")
roles = await rolesResponse.json()
const permissionsResponse = await api.get("/api/permissions")
permissions = await permissionsResponse.json()
}
// Changes the seleced role
const changeRole = event => {
const id = event?.target?.value
const role = roles.find(role => role._id === id)
if (role) {
selectedRole = {
...role,
inherits: role.inherits ?? "",
permissionId: role.permissionId ?? "",
}
} else {
selectedRole = { _id: "", inherits: "", permissionId: "" }
}
errors = []
}
// Saves or creates the selected role
const saveRole = async () => {
errors = []
// Clean up empty strings
const keys = ["_id", "inherits", "permissionId"]
keys.forEach(key => {
if (selectedRole[key] === "") {
delete selectedRole[key]
}
})
// Validation
if (!selectedRole.name || selectedRole.name.trim() === "") {
errors.push({ message: "Please enter a role name" })
}
if (!selectedRole.permissionId) {
errors.push({ message: "Please choose permissions" })
}
if (errors.length) {
return false
}
// Save/create the role
const response = await api.post("/api/roles", selectedRole)
if (response.status === 200) {
notifier.success("Role saved successfully.")
} else {
notifier.danger("Error saving role.")
return false
}
}
// Deletes the selected role
const deleteRole = async () => {
const response = await api.delete(
`/api/roles/${selectedRole._id}/${selectedRole._rev}`
)
if (response.status === 200) {
await fetchRoles()
changeRole()
notifier.success("Role deleted successfully.")
} else {
notifier.danger("Error deleting role.")
}
}
onMount(fetchRoles)
</script>
<ModalContent
title="Edit Roles"
confirmText={isCreating ? 'Create' : 'Save'}
onConfirm={saveRole}>
{#if errors.length}
<ErrorsBox {errors} />
{/if}
<Select
thin
secondary
label="Role"
value={selectedRoleId}
on:change={changeRole}>
<option value="">Create new role</option>
{#each roles as role}
<option value={role._id}>{role.name}</option>
{/each}
</Select>
{#if selectedRole}
<Input label="Name" bind:value={selectedRole.name} thin />
<Select
thin
secondary
label="Inherits Role"
bind:value={selectedRole.inherits}>
<option value="">None</option>
{#each otherRoles as role}
<option value={role._id}>{role.name}</option>
{/each}
</Select>
<Select
thin
secondary
label="Permissions"
bind:value={selectedRole.permissionId}>
<option value="">Choose permissions</option>
{#each permissions as permission}
<option value={permission._id}>{permission.name}</option>
{/each}
</Select>
{/if}
<div slot="footer">
{#if !isCreating}
<Button red on:click={deleteRole}>Delete</Button>
{/if}
</div>
</ModalContent>

5
packages/builder/src/components/backend/DataTable/modals/EditRow.svelte
View File

@ -1,8 +1,9 @@
<script>
import { Modal, Button } from "@budibase/bbui"
import CreateEditRowModal from "../modals/CreateEditRowModal.svelte"
import CreateEditRow from "../modals/CreateEditRow.svelte"
export let row
export let modalContentComponent = CreateEditRow
let modal
@ -14,5 +15,5 @@
<Button data-cy="edit-row" secondary small on:click={showModal}>Edit</Button>
<Modal bind:this={modal}>
<CreateEditRowModal {row} />
<svelte:component this={modalContentComponent} {row} />
</Modal>

3
packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
View File

@ -51,14 +51,13 @@
const screens = screenTemplates($store, [table])
.filter(template => defaultScreens.includes(template.id))
.map(template => template.create())
store.actions.pages.select("main")
for (let screen of screens) {
// Record the table that created this screen so we can link it later
screen.autoTableId = table._id
await store.actions.screens.create(screen)
}
// Create autolink to newly created list page
// Create autolink to newly created list screen
const listScreen = screens.find(screen =>
screen.props._instanceName.endsWith("List")
)

6
packages/builder/src/components/common/ErrorsBox.svelte
View File

@ -5,9 +5,9 @@
</script>
{#if hasErrors}
<div class="container bb__alert bb__alert--danger">
<div class="container">
{#each errors as error}
<div class="error">{error.dataPath} {error.message}</div>
<div class="error">{error.dataPath || ''} {error.message}</div>
{/each}
</div>
{/if}
@ -17,6 +17,8 @@
border-radius: var(--border-radius-m);
margin: 0;
padding: var(--spacing-m);
background-color: rgba(241, 165, 165, 0.2);
color: var(--red);
}
.error {

10
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -52,7 +52,9 @@
applicationName: string().required("Your application must have a name."),
},
{
username: string().required("Your application needs a first user."),
email: string()
.email()
.required("Your application needs a first user."),
password: string().required(
"Please enter a password for your first user."
),
@ -151,17 +153,15 @@
const pkg = await applicationPkg.json()
if (applicationPkg.ok) {
backendUiStore.actions.reset()
pkg.justCreated = true
await store.actions.initialise(pkg)
automationStore.actions.fetch()
await automationStore.actions.fetch()
} else {
throw new Error(pkg)
}
// Create user
const user = {
name: $createAppStore.values.username,
username: $createAppStore.values.username,
email: $createAppStore.values.email,
password: $createAppStore.values.password,
roleId: $createAppStore.values.roleId,
}

14
packages/builder/src/components/start/Steps/User.svelte
View File

@ -2,18 +2,18 @@
import { Input, Select } from "@budibase/bbui"
export let validationErrors
let blurred = { username: false, password: false }
let blurred = { email: false, password: false }
</script>
<h2>Create your first User</h2>
<div class="container">
<Input
on:input={() => (blurred.username = true)}
label="Username"
name="username"
placeholder="Username"
type="name"
error={blurred.username && validationErrors.username} />
on:input={() => (blurred.email = true)}
label="Email"
name="email"
placeholder="Email"
type="email"
error={blurred.email && validationErrors.email} />
<Input
on:input={() => (blurred.password = true)}
label="Password"

40
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -1,10 +1,13 @@
<script>
import { onMount } from "svelte"
import { store } from "builderStore"
import { store, currentAsset } from "builderStore"
import iframeTemplate from "./iframeTemplate"
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
import { FrontendTypes } from "../../../constants"
let iframe
let layout
let screen
// Create screen slot placeholder for use when a page is selected rather
// than a screen
@ -16,12 +19,21 @@
.json()
// Extract data to pass to the iframe
$: page = $store.pages[$store.currentPageName]
$: screen =
$store.currentFrontEndType === "page"
? screenPlaceholder
: $store.currentPreviewItem
$: selectedComponentId = $store.currentComponentInfo?._id ?? ""
$: {
if ($store.currentFrontEndType === FrontendTypes.LAYOUT) {
layout = $currentAsset
screen = screenPlaceholder
} else {
screen = $currentAsset
layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
}
}
$: selectedComponentId = $store.selectedComponentId ?? ""
$: previewData = {
layout,
screen,
selectedComponentId,
}
// Saving pages and screens to the DB causes them to have _revs.
// These revisions change every time a save happens and causes
@ -29,7 +41,7 @@
// definition hasn't changed.
// By deleting all _rev properties we can avoid this and increase
// performance.
$: json = JSON.stringify({ page, screen, selectedComponentId })
$: json = JSON.stringify(previewData)
$: strippedJson = json.replaceAll(/"_rev":\s*"[^"]+"/g, `"_rev":""`)
// Update the iframe with the builder info to render the correct preview
@ -57,13 +69,11 @@
</script>
<div class="component-container">
{#if $store.currentPreviewItem}
<iframe
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={iframeTemplate} />
{/if}
<iframe
style="height: 100%; width: 100%"
title="componentPreview"
bind:this={iframe}
srcdoc={iframeTemplate} />
</div>
<style>

52
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html Normal file
View File

@ -0,0 +1,52 @@
<html>
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<style>
body, html {
height: 100% !important;
font-family: Inter, sans-serif !important;
margin: 0 !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
</style>
<script src='/assets/budibase-client.js'></script>
<script>
function receiveMessage(event) {
if (!event.data) {
return
}
// Extract data from message
const { selectedComponentId, layout, screen } = JSON.parse(event.data)
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true
window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
// Initialise app
if (window.loadBudibase) {
loadBudibase()
}
}
// Ignore clicks
["click", "mousedown"].forEach(type => {
document.addEventListener(type, function(e) {
e.preventDefault()
e.stopPropagation()
return false
}, true)
})
window.addEventListener("message", receiveMessage)
window.dispatchEvent(new Event("bb-ready"))
</script>
</head>
<body>
</body>
</html>

56
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -1,55 +1 @@
export default `<html>
<head>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
<style>
body, html {
height: 100% !important;
font-family: Inter !important;
margin: 0px !important;
}
*, *:before, *:after {
box-sizing: border-box;
}
</style>
<script src='/assets/budibase-client.js'></script>
<script>
function receiveMessage(event) {
if (!event.data) {
return
}
// Extract data from message
const { selectedComponentId, page, screen } = JSON.parse(event.data)
// Set some flags so the app knows we're in the builder
window["##BUDIBASE_IN_BUILDER##"] = true
window["##BUDIBASE_PREVIEW_PAGE##"] = page
window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
// Initialise app
if (window.loadBudibase) {
loadBudibase()
}
}
let selectedComponentStyle
// Ignore clicks
["click", "mousedown"].forEach(type => {
document.addEventListener(type, function(e) {
e.preventDefault()
e.stopPropagation()
return false
}, true)
})
window.addEventListener("message", receiveMessage)
window.dispatchEvent(new Event("bb-ready"))
</script>
</head>
<body>
</body>
</html>`
export { default } from "./iframeTemplate.html"

22
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View File

@ -1,10 +1,11 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { get } from "svelte/store"
import { store, currentAsset } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp"
import { getParent } from "builderStore/storeUtils"
import { findParent } from "builderStore/storeUtils"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -28,12 +29,13 @@
const selectComponent = component => {
store.actions.components.select(component)
const path = store.actions.components.findRoute(component)
$goto(`./:page/:screen/${path}`)
$goto(`./${$store.currentFrontEndType}/${path}`)
}
const moveUpComponent = () => {
store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component)
const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
@ -43,7 +45,7 @@
newChildren.splice(currentIndex - 1, 0, component)
parent._children = newChildren
}
state.currentComponentInfo = component
state.selectedComponentId = component._id
store.actions.preview.saveSelected()
return state
@ -52,7 +54,8 @@
const moveDownComponent = () => {
store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component)
const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
@ -62,7 +65,7 @@
newChildren.splice(currentIndex + 1, 0, component)
parent._children = newChildren
}
state.currentComponentInfo = component
state.selectedComponentId = component._id
store.actions.preview.saveSelected()
return state
@ -76,10 +79,11 @@
const deleteComponent = () => {
store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component)
const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) {
parent._children = parent._children.filter(c => c !== component)
parent._children = parent._children.filter(child => child !== component)
selectComponent(parent)
}

7
packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte
View File

@ -1,6 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { store, currentAsset } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils"
import { DropEffect, DropPosition } from "./dragDropStore"
import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
@ -10,7 +10,6 @@
export let currentComponent
export let onSelect = () => {}
export let level = 0
export let dragDropStore
const isScreenslot = name => name === "##builtin/screenslot"
@ -23,7 +22,7 @@
const path = store.actions.components.findRoute(component)
// Go to correct URL
$goto(`./:page/:screen/${path}`)
$goto(`./${$store.currentAssetId}/${path}`)
}
const dragstart = component => e => {
@ -73,7 +72,7 @@
text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
withArrow
indentLevel={level + 3}
selected={currentComponent === component}>
selected={$store.selectedComponentId === component._id}>
<ComponentDropdownMenu {component} />
</NavItem>

77
packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte Normal file
View File

@ -0,0 +1,77 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownMenu, Modal, ModalContent, Input } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import { cloneDeep } from "lodash/fp"
export let layout
let confirmDeleteDialog
let editLayoutNameModal
let dropdown
let anchor
let name = layout.name
const deleteLayout = async () => {
try {
await store.actions.layouts.delete(layout)
notifier.success(`Layout ${layout.name} deleted successfully.`)
} catch (err) {
notifier.danger(`Error deleting layout: ${err.message}`)
}
}
const saveLayout = async () => {
try {
const layoutToSave = cloneDeep(layout)
layoutToSave.name = name
await store.actions.layouts.save(layoutToSave)
notifier.success(`Layout saved successfully.`)
} catch (err) {
notifier.danger(`Error saving layout: ${err.message}`)
}
}
</script>
<div bind:this={anchor} on:click|stopPropagation>
<div class="icon" on:click={() => dropdown.show()}>
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<DropdownContainer>
<DropdownItem
icon="ri-pencil-line"
title="Edit"
on:click={() => editLayoutNameModal.show()} />
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={() => confirmDeleteDialog.show()} />
</DropdownContainer>
</DropdownMenu>
</div>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={'Are you sure you wish to delete this layout?'}
okText="Delete Layout"
onOk={deleteLayout} />
<Modal bind:this={editLayoutNameModal}>
<ModalContent
title="Edit Layout Name"
confirmText="Save"
onConfirm={saveLayout}
disabled={!name}>
<Input thin type="text" label="Name" bind:value={name} />
</ModalContent>
</Modal>
<style>
.icon i {
font-size: 16px;
}
</style>

29
packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
View File

@ -1,25 +1,32 @@
<script>
import { writable } from "svelte/store"
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { store, selectedComponent, currentAsset } from "builderStore"
import instantiateStore from "./dragDropStore"
import ComponentsTree from "./ComponentTree.svelte"
import ComponentTree from "./ComponentTree.svelte"
import NavItem from "components/common/NavItem.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
const ROUTE_NAME_MAP = {
"/": {
BASIC: "Home",
PUBLIC: "Login",
},
}
const dragDropStore = instantiateStore()
export let route
export let path
export let indent
$: selectedScreen = $store.currentPreviewItem
$: selectedScreen = $currentAsset
const changeScreen = screenId => {
// select the route
store.actions.screens.select(screenId)
$goto(`./:page/${screenId}`)
$goto(`./${screenId}`)
}
</script>
@ -30,21 +37,21 @@
withArrow={route.subpaths} />
{#each Object.entries(route.subpaths) as [url, subpath]}
{#each Object.values(subpath.screens) as screenId}
{#each Object.entries(subpath.screens) as [role, screenId]}
<NavItem
icon="ri-artboard-2-line"
indentLevel={indent || 1}
selected={$store.currentPreviewItem._id === screenId}
opened={$store.currentPreviewItem._id === screenId}
text={url === '/' ? 'Home' : url}
selected={$store.currentAssetId === screenId}
opened={$store.currentAssetId === screenId}
text={ROUTE_NAME_MAP[url]?.[role] || url}
withArrow={route.subpaths}
on:click={() => changeScreen(screenId)}>
<ScreenDropdownMenu screen={screenId} />
<ScreenDropdownMenu {screenId} />
</NavItem>
{#if selectedScreen?._id === screenId}
<ComponentsTree
<ComponentTree
components={selectedScreen.props._children}
currentComponent={$store.currentComponentInfo}
currentComponent={$selectedComponent}
{dragDropStore} />
{/if}
{/each}

18
packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
View File

@ -3,28 +3,20 @@
import { store, allScreens } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let screen
export let screenId
let confirmDeleteDialog
let dropdown
let anchor
$: screen = $allScreens.find(screen => screen._id === screenId)
const deleteScreen = () => {
const screenToDelete = $allScreens.find(scr => scr._id === screen)
store.actions.screens.delete(screenToDelete)
store.actions.screens.delete(screen)
store.actions.routing.fetch()
// update the page if required
store.update(state => {
if (state.currentPreviewItem._id === screen) {
store.actions.pages.select($store.currentPageName)
notifier.success(`Screen ${screenToDelete.name} deleted successfully.`)
$goto(`./:page/page-layout`)
}
return state
})
}
</script>

2
packages/builder/src/components/userInterface/ComponentNavigationTree/dragDropStore.js
View File

@ -48,7 +48,7 @@ export default function() {
if (mousePosition > 0.4 && mousePosition < 0.8) {
state.dropPosition = DropPosition.INSIDE
}
return
return state
}
// bottom half

2
packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
View File

@ -5,7 +5,7 @@
</script>
<div class="root">
{#each Object.keys($store.routes) as path}
{#each Object.keys($store.routes || {}) as path}
<PathTree {path} route={$store.routes[path]} />
{/each}
</div>

39
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -1,5 +1,7 @@
<script>
import { store } from "builderStore"
import { get } from "svelte/store"
import { store, selectedComponent, currentAsset } from "builderStore"
import { FrontendTypes } from "constants"
import panelStructure from "./temporaryPanelStructure.js"
import CategoryTab from "./CategoryTab.svelte"
import DesignView from "./DesignView.svelte"
@ -14,12 +16,12 @@
$: componentInstance =
$store.currentView !== "component"
? { ...$store.currentPreviewItem, ...$store.currentComponentInfo }
: $store.currentComponentInfo
? { ...$currentAsset, ...$selectedComponent }
: $selectedComponent
$: componentDefinition = $store.components[componentInstance._component]
$: componentPropDefinition =
flattenedPanel.find(
//use for getting controls for each component property
// use for getting controls for each component property
c => c._component === componentInstance._component
) || {}
@ -31,7 +33,7 @@
$: isComponentOrScreen =
$store.currentView === "component" ||
$store.currentFrontEndType === "screen"
$store.currentFrontEndType === FrontendTypes.SCREEN
$: isNotScreenslot = componentInstance._component !== "##builtin/screenslot"
$: displayName =
@ -58,16 +60,20 @@
return components
}
function setPageOrScreenProp(name, value) {
function setAssetProps(name, value) {
const selectedAsset = get(currentAsset)
store.update(state => {
if (name === "_instanceName" && state.currentFrontEndType === "screen") {
state.currentPreviewItem.props[name] = value
if (
name === "_instanceName" &&
state.currentFrontEndType === FrontendTypes.SCREEN
) {
selectedAsset.props._instanceName = value
} else {
state.currentPreviewItem[name] = value
selectedAsset[name] = value
}
store.actions.preview.saveSelected()
return state
})
store.actions.preview.saveSelected()
}
function getProps(obj, keys) {
@ -94,21 +100,12 @@
{panelDefinition}
displayNameField={displayName}
onChange={store.actions.components.updateProp}
onScreenPropChange={setPageOrScreenProp}
screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
onScreenPropChange={setAssetProps}
assetInstance={$store.currentView !== 'component' && $currentAsset} />
{/if}
</div>
<style>
.title > div:nth-child(1) {
grid-column-start: name;
color: var(--ink);
}
.title > div:nth-child(2) {
grid-column-start: actions;
}
.component-props-container {
flex: 1 1 auto;
min-height: 0;

10
packages/builder/src/components/userInterface/ComponentSelectionList.svelte
View File

@ -1,6 +1,6 @@
<script>
import { goto } from "@sveltech/routify"
import { store } from "builderStore"
import { goto, url } from "@sveltech/routify"
import { store, currentAssetName, selectedComponent } from "builderStore"
import components from "./temporaryPanelStructure.js"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -26,8 +26,8 @@
const onComponentChosen = component => {
store.actions.components.create(component._component, component.presetProps)
const path = store.actions.components.findRoute($store.currentComponentInfo)
$goto(`./:page/:screen/${path}`)
const path = store.actions.components.findRoute($selectedComponent)
$goto(`./${$store.currentAssetId}/${path}`)
close()
}
</script>
@ -52,7 +52,7 @@
align="left">
<DropdownContainer>
{#each categories[selectedIndex].children as item}
{#if !item.showOnPages || item.showOnPages.includes($store.currentPageName)}
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
<DropdownItem
icon={item.icon}
title={item.name}

3
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
View File

@ -1,5 +1,6 @@
<script>
import { store, allScreens } from "builderStore"
import { FrontendTypes } from "constants"
import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "./ComponentSelectionList.svelte"
@ -18,7 +19,7 @@
</script>
<div class="root">
{#if $store.currentFrontEndType === 'page' || $allScreens.length}
{#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
<div class="switcher">
<button
class:selected={selected === COMPONENT_SELECTION_TAB}

6
packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
View File

@ -1,15 +1,15 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte"
export let parameters
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
export let parameters
@ -8,9 +8,9 @@
let idFields
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
View File

@ -1,7 +1,7 @@
<script>
// accepts an array of field names, and outputs an object of { FieldName: value }
import { DataList, Label, TextButton, Spacer, Select } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import { CloseCircleIcon, AddIcon } from "components/common/Icons"
import {
@ -32,9 +32,9 @@
}))
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte"
import {
@ -16,9 +16,9 @@
let schemaFields
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

6
packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte"
import {
@ -11,9 +11,9 @@
export let parameters
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

81
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View File

@ -1,16 +1,33 @@
<script>
import { onMount } from "svelte"
import { store, currentScreens } from "builderStore"
import api from "builderStore/api"
import { goto, params, url } from "@sveltech/routify"
import { store, currentAsset, selectedComponent } from "builderStore"
import { FrontendTypes } from "constants"
import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
import PageLayout from "components/userInterface/PageLayout.svelte"
import PagesList from "components/userInterface/PagesList.svelte"
import Layout from "components/userInterface/Layout.svelte"
import NewScreenModal from "components/userInterface/NewScreenModal.svelte"
import { Modal } from "@budibase/bbui"
import NewLayoutModal from "components/userInterface/NewLayoutModal.svelte"
import { Modal, Switcher } from "@budibase/bbui"
const tabs = [
{
title: "Screens",
key: "screen",
},
{
title: "Layouts",
key: "layout",
},
]
let modal
let routes = {}
let tab = $params.assetType
function navigate({ detail }) {
if (!detail) return
$goto(`../${detail.heading.key}`)
}
onMount(() => {
store.actions.routing.fetch()
@ -18,32 +35,48 @@
</script>
<div class="title">
<h1>Screens</h1>
<i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
<Switcher headings={tabs} bind:value={tab} on:change={navigate}>
{#if tab === FrontendTypes.SCREEN}
<i
on:click={modal.show}
data-cy="new-screen"
class="ri-add-circle-fill" />
{#if $currentAsset}
<div class="nav-items-container">
<ComponentNavigationTree />
</div>
{/if}
<Modal bind:this={modal}>
<NewScreenModal />
</Modal>
{:else if tab === FrontendTypes.LAYOUT}
<i
on:click={modal.show}
data-cy="new-layout"
class="ri-add-circle-fill" />
{#each $store.layouts as layout (layout._id)}
<Layout {layout} />
{/each}
<Modal bind:this={modal}>
<NewLayoutModal />
</Modal>
{/if}
</Switcher>
</div>
<PagesList />
<div class="nav-items-container">
<PageLayout layout={$store.pages[$store.currentPageName]} />
<ComponentNavigationTree />
</div>
<Modal bind:this={modal}>
<NewScreenModal />
</Modal>
<style>
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.title h1 {
font-size: var(--font-size-m);
font-weight: 500;
margin: 0;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
position: relative;
}
.title i {
font-size: 20px;
position: absolute;
top: 0;
right: 0;
}
.title i:hover {
cursor: pointer;

41
packages/builder/src/components/userInterface/Layout.svelte Normal file
View File

@ -0,0 +1,41 @@
<script>
import { goto } from "@sveltech/routify"
import { FrontendTypes } from "constants"
import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
import LayoutDropdownMenu from "./ComponentNavigationTree/LayoutDropdownMenu.svelte"
import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
import NavItem from "components/common/NavItem.svelte"
import { last } from "lodash/fp"
import { store, currentAsset, selectedComponent } from "builderStore"
import { writable } from "svelte/store"
export let layout
let confirmDeleteDialog
let componentToDelete = ""
const dragDropStore = initDragDropStore()
const selectLayout = () => {
store.actions.layouts.select(layout._id)
$goto(`./${layout._id}`)
}
</script>
<NavItem
border={false}
icon="ri-layout-3-line"
text={layout.name}
withArrow
selected={$store.currentAssetId === layout._id}
opened={$store.currentAssetId === layout._id}
on:click={selectLayout}>
<LayoutDropdownMenu {layout} />
</NavItem>
{#if $store.currentAssetId === layout._id && layout.props?._children}
<ComponentTree
components={layout.props._children}
currentComponent={$selectedComponent}
{dragDropStore} />
{/if}

13
packages/builder/src/components/userInterface/LayoutSelect.svelte Normal file
View File

@ -0,0 +1,13 @@
<script>
import { store, currentAsset } from "builderStore"
import { Select } from "@budibase/bbui"
export let value
</script>
<Select bind:value extraThin secondary on:change>
<option value="">Choose an option</option>
{#each $store.layouts as layout}
<option value={layout._id}>{layout.name}</option>
{/each}
</Select>

25
packages/builder/src/components/userInterface/PagesList.svelte → packages/builder/src/components/userInterface/LayoutsList.svelte
View File

@ -2,12 +2,7 @@
import { params, goto } from "@sveltech/routify"
import { store } from "builderStore"
const getPage = (state, name) => {
const props = state.pages[name]
return { name, props }
}
const pages = [
const layouts = [
{
title: "Private",
id: "main",
@ -18,18 +13,22 @@
},
]
if (!$store.currentPageName)
store.actions.pages.select($params.page ? $params.page : "main")
if (!$store.currentAssetId) {
// refactor so the right layout is chosen
store.actions.layouts.select($params.layout)
}
const changePage = id => {
store.actions.pages.select(id)
$goto(`./${id}/page-layout`)
const changeLayout = id => {
store.actions.layouts.select(id)
$goto(`./${id}/layout`)
}
</script>
<div class="root">
{#each pages as { title, id }}
<button class:active={id === $params.page} on:click={() => changePage(id)}>
{#each layouts as { title, id }}
<button
class:active={id === $params.layout}
on:click={() => changeLayout(id)}>
{title}
</button>
{/each}

26
packages/builder/src/components/userInterface/NewLayoutModal.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import { goto } from "@sveltech/routify"
import api from "builderStore/api"
import { notifier } from "builderStore/store/notifications"
import { store, backendUiStore, allScreens } from "builderStore"
import { Input, ModalContent } from "@budibase/bbui"
import analytics from "analytics"
const CONTAINER = "@budibase/standard-components/container"
let name = ""
async function save() {
try {
await store.actions.layouts.save({ name })
$goto(`./${$store.currentAssetId}`)
notifier.success(`Layout ${name} created successfully`)
} catch (err) {
notifier.danger(`Error creating layout ${name}.`)
}
}
</script>
<ModalContent title="Create Layout" confirmText="Create" onConfirm={save}>
<Input thin label="Name" bind:value={name} />
</ModalContent>

4
packages/builder/src/components/userInterface/NewScreenModal.svelte
View File

@ -72,7 +72,7 @@
// TODO: need to fix this up correctly
draftScreen.routing = { route, roleId: "ADMIN" }
await store.actions.screens.create(draftScreen)
const createdScreen = await store.actions.screens.create(draftScreen)
if (createLink) {
await store.actions.components.links.save(route, name)
}
@ -85,7 +85,7 @@
})
}
$goto(`./:page/${name}`)
$goto(`./screen/${createdScreen._id}`)
}
const routeNameExists = route => {

44
packages/builder/src/components/userInterface/PageLayout.svelte
View File

@ -1,44 +0,0 @@
<script>
import { goto } from "@sveltech/routify"
import ComponentTree from "./ComponentNavigationTree/ComponentTree.svelte"
import NavItem from "components/common/NavItem.svelte"
import { last } from "lodash/fp"
import { store } from "builderStore"
import { writable } from "svelte/store"
export let layout
let confirmDeleteDialog
let componentToDelete = ""
const dragDropStore = writable({})
const lastPartOfName = c =>
c && last(c.name ? c.name.split("/") : c._component.split("/"))
$: _layout = {
component: layout,
title: lastPartOfName(layout),
}
const setCurrentScreenToLayout = () => {
store.actions.selectPageOrScreen("page")
$goto("./:page/page-layout")
}
</script>
<NavItem
border={false}
icon="ri-layout-3-line"
text="Master Screen"
withArrow
selected={$store.currentComponentInfo?._id === _layout.component.props._id}
opened={$store.currentPreviewItem?.name === _layout.title}
on:click={setCurrentScreenToLayout} />
{#if $store.currentPreviewItem?.name === _layout.title && _layout.component.props._children}
<ComponentTree
components={_layout.component.props._children}
currentComponent={$store.currentComponentInfo}
{dragDropStore} />
{/if}

3
packages/builder/src/components/userInterface/PagesComponents.svelte
View File

@ -1,3 +0,0 @@
<script>
import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
</script>

6
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -1,7 +1,7 @@
<script>
import { Icon } from "@budibase/bbui"
import Input from "./PropertyPanelControls/Input.svelte"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
import {
readableToRuntimeBinding,
@ -35,9 +35,9 @@
function getBindableProperties() {
// Get all bindableProperties
bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})
}

6
packages/builder/src/components/userInterface/ScreenSelect.svelte
View File

@ -1,7 +1,7 @@
<script>
import { DataList } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { store, allScreens, backendUiStore } from "builderStore"
import { store, allScreens, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties"
const dispatch = createEventDispatcher()
@ -27,9 +27,9 @@
]
const bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

41
packages/builder/src/components/userInterface/SettingsView.svelte
View File

@ -1,10 +1,11 @@
<script>
import { isEmpty } from "lodash/fp"
import { FrontendTypes } from "constants"
import PropertyControl from "./PropertyControl.svelte"
import LayoutSelect from "./LayoutSelect.svelte"
import Input from "./PropertyPanelControls/Input.svelte"
import { goto } from "@sveltech/routify"
import { excludeProps } from "./propertyCategories.js"
import { store, allScreens } from "builderStore"
import { store, allScreens, currentAsset } from "builderStore"
import { walkProps } from "builderStore/storeUtils"
export let panelDefinition = []
@ -13,13 +14,13 @@
export let onChange = () => {}
export let onScreenPropChange = () => {}
export let displayNameField = false
export let screenOrPageInstance
export let assetInstance
let pageScreenProps = ["title", "favicon", "description", "route"]
let assetProps = ["title", "description", "route", "layoutId"]
let duplicateName = false
const propExistsOnComponentDef = prop =>
pageScreenProps.includes(prop) || prop in componentDefinition.props
assetProps.includes(prop) || prop in componentDefinition.props
function handleChange(key, data) {
data.target ? onChange(key, data.target.value) : onChange(key, data)
@ -28,12 +29,10 @@
const screenDefinition = [
{ key: "description", label: "Description", control: Input },
{ key: "route", label: "Route", control: Input },
{ key: "layoutId", label: "Layout", control: LayoutSelect },
]
const pageDefinition = [
{ key: "title", label: "Title", control: Input },
{ key: "favicon", label: "Favicon", control: Input },
]
const layoutDefinition = [{ key: "title", label: "Title", control: Input }]
const canRenderControl = (key, dependsOn) => {
let test = !isEmpty(componentInstance[dependsOn])
@ -44,8 +43,8 @@
)
}
$: isPage = screenOrPageInstance && screenOrPageInstance.favicon
$: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
$: isLayout = assetInstance && assetInstance.favicon
$: assetDefinition = isLayout ? layoutDefinition : screenDefinition
const isDuplicateName = name => {
let duplicate = false
@ -58,15 +57,15 @@
}
})
}
// check page first
lookForDuplicate($store.pages[$store.currentPageName].props)
if (duplicate) return true
// check against layouts
for (let layout of $store.layouts) {
lookForDuplicate(layout.props)
}
// if viewing screen, check current screen for duplicate
if ($store.currentFrontEndType === "screen") {
lookForDuplicate($store.currentPreviewItem.props)
if ($store.currentFrontEndType === FrontendTypes.SCREEN) {
lookForDuplicate($currentAsset.props)
} else {
// viewing master page - need to dedupe against all screens
// need to dedupe against all screens
for (let screen of $allScreens) {
lookForDuplicate(screen.props)
}
@ -86,14 +85,14 @@
</script>
<div class="settings-view-container">
{#if screenOrPageInstance}
{#each screenOrPageDefinition as def}
{#if assetInstance}
{#each assetDefinition as def}
<PropertyControl
bindable={false}
control={def.control}
label={def.label}
key={def.key}
value={screenOrPageInstance[def.key]}
value={assetInstance[def.key]}
onChange={onScreenPropChange}
props={{ ...excludeProps(def, ['control', 'label']) }} />
{/each}

6
packages/builder/src/components/userInterface/TableViewSelect.svelte
View File

@ -1,7 +1,7 @@
<script>
import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { store, backendUiStore } from "builderStore"
import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
const dispatch = createEventDispatcher()
@ -32,9 +32,9 @@
}, [])
$: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id,
componentInstanceId: $store.selectedComponentId,
components: $store.components,
screen: $store.currentPreviewItem,
screen: $currentAsset,
tables: $backendUiStore.tables,
})

4
packages/builder/src/components/userInterface/pagesParsing/createProps.js → packages/builder/src/components/userInterface/assetParsing/createProps.js
View File

@ -25,7 +25,6 @@ export const createProps = (componentDefinition, derivedFromProps) => {
_id: uuid(),
_component: componentDefinition._component,
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
_code: "",
}
const errors = []
@ -96,6 +95,3 @@ const parsePropDef = propDef => {
return cloneDeep(propDef.default)
}
export const arrayElementComponentName = (parentComponentName, arrayPropName) =>
`${parentComponentName}:${arrayPropName}`

0
packages/builder/src/components/userInterface/pagesParsing/getRootComponent.js → packages/builder/src/components/userInterface/assetParsing/getRootComponent.js
View File

0
packages/builder/src/components/userInterface/pagesParsing/searchComponents.js → packages/builder/src/components/userInterface/assetParsing/searchComponents.js
View File

0
packages/builder/src/components/userInterface/pagesParsing/splitRootComponentName.js → packages/builder/src/components/userInterface/assetParsing/splitRootComponentName.js
View File

0
packages/builder/src/components/userInterface/pagesParsing/types.js → packages/builder/src/components/userInterface/assetParsing/types.js
View File

60
packages/builder/src/components/userInterface/pagesParsing/renameScreen.js
View File

@ -1,60 +0,0 @@
import { isPlainObject, isArray, cloneDeep } from "lodash/fp"
import { getExactComponent } from "./searchComponents"
export const rename = (pages, screens, oldname, newname) => {
pages = cloneDeep(pages)
screens = cloneDeep(screens)
const changedScreens = []
const existingWithNewName = getExactComponent(screens, newname, true)
if (existingWithNewName)
return {
components: screens,
pages,
error: "Component by that name already exists",
}
const traverseProps = props => {
let hasEdited = false
if (props._component && props._component === oldname) {
props._component = newname
hasEdited = true
}
for (let propName in props) {
const prop = props[propName]
if (isPlainObject(prop) && prop._component) {
hasEdited = traverseProps(prop) || hasEdited
}
if (isArray(prop)) {
for (let element of prop) {
hasEdited = traverseProps(element) || hasEdited
}
}
}
return hasEdited
}
for (let screen of screens) {
let hasEdited = false
if (screen.props.instanceName === oldname) {
screen.props.instanceName = newname
hasEdited = true
}
hasEdited = traverseProps(screen.props) || hasEdited
if (hasEdited && screen.props.instanceName !== newname)
changedScreens.push(screen.props.instanceName)
}
for (let pageName in pages) {
const page = pages[pageName]
if (page.appBody === oldname) {
page.appBody = newname
}
}
return { screens, pages, changedScreens }
}

34
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -427,6 +427,36 @@ export default {
],
},
},
{
_component: "@budibase/standard-components/cardstat",
name: "Stat",
description: "A card component for displaying numbers.",
icon: "ri-dual-sim-2-line",
children: [],
properties: {
design: { ...all },
settings: [
{
label: "Title",
key: "title",
control: Input,
placeholder: "Total Revenue",
},
{
label: "Value",
key: "value",
control: Input,
placeholder: "$1,981,983",
},
{
label: "Label",
key: "label",
control: Input,
placeholder: "Stripe",
},
],
},
},
],
},
{
@ -1167,7 +1197,7 @@ export default {
_component: "##builtin/screenslot",
name: "Screen Slot",
description:
"This component is a placeholder for the rendering of a screen within a page.",
"This component is a placeholder for the rendering of a screen within a layout.",
icon: "ri-crop-2-line",
properties: { design: { ...all } },
commonProps: {},
@ -1192,7 +1222,7 @@ export default {
"A component that automatically generates a login screen for your app.",
icon: "ri-login-box-line",
children: [],
showOnPages: ["unauthenticated"],
showOnAsset: ["login-screen"],
properties: {
design: { ...all },
settings: [

10
packages/builder/src/constants/backend/index.js
View File

@ -9,6 +9,16 @@ export const FIELDS = {
presence: false,
},
},
LONGFORM: {
name: "Long Form Text",
icon: "ri-file-text-line",
type: "longform",
constraints: {
type: "string",
length: {},
presence: false,
},
},
OPTIONS: {
name: "Options",
icon: "ri-list-check-2",

33
packages/builder/src/constants/index.js
View File

@ -2,22 +2,19 @@ export const TableNames = {
USERS: "ta_users",
}
// fields on the user table that cannot be edited
export const UNEDITABLE_USER_FIELDS = ["username", "password", "roleId"]
export const DEFAULT_PAGES_OBJECT = {
main: {
props: {
_component: "@budibase/standard-components/container",
},
_screens: {},
},
unauthenticated: {
props: {
_component: "@budibase/standard-components/container",
},
_screens: {},
},
componentLibraries: [],
stylesheets: [],
export const FrontendTypes = {
PAGE: "page",
SCREEN: "screen",
LAYOUT: "layout",
NONE: "none",
}
// fields on the user table that cannot be edited
export const UNEDITABLE_USER_FIELDS = ["email", "password", "roleId"]
export const LAYOUT_NAMES = {
MASTER: {
PRIVATE: "layout_private_master",
PUBLIC: "layout_private_master",
},
}

4
packages/builder/src/pages/[application]/automate/[automation]/_layout.svelte
View File

@ -1,4 +1,6 @@
<script>
import { store } from "builderStore"
import { params } from "@sveltech/routify"
store.actions.pages.select($params.page)
store.actions.layouts.select($params.layout)
</script>

2
packages/builder/src/pages/[application]/data/_layout.svelte
View File

@ -2,7 +2,7 @@
import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
</script>
<!-- routify:options index=1 -->
<!-- routify:options index=0 -->
<div class="root">
<div class="nav">
<TableNavigator />

0
packages/builder/src/pages/[application]/design/[page]/[screen]/_fallback.svelte → packages/builder/src/pages/[application]/design/[assetType]/[asset]/_fallback.svelte
View File

63
packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte Normal file
View File

@ -0,0 +1,63 @@
<script>
import { params, leftover, goto } from "@sveltech/routify"
import { FrontendTypes } from "constants"
import { store, allScreens } from "builderStore"
// Get any leftover params not caught by Routifys params store.
const componentIds = $leftover.split("/").filter(id => id !== "")
const currentAssetId = decodeURI($params.asset)
let assetList
let actions
// Determine screens or layouts based on the URL
if ($params.assetType === FrontendTypes.SCREEN) {
assetList = $allScreens
actions = store.actions.screens
} else {
assetList = $store.layouts
actions = store.actions.layouts
}
// select the screen or layout in the UI
actions.select(currentAssetId)
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
// Get the correct screen children.
const assetChildren = assetList.find(
asset =>
asset._id === $params.asset ||
asset._id === decodeURIComponent($params.asset)
).props._children
findComponent(componentIds, assetChildren)
}
// }
// Find Component with ID and continue
function findComponent(ids, children) {
// Setup stuff
let componentToSelect
let currentChildren = children
// Loop through each ID
ids.forEach(id => {
// Find ID
const component = currentChildren.find(child => child._id === id)
// If it does not exist, ignore (use last valid route)
if (!component) return
componentToSelect = component
// Update childrens array to selected components children
currentChildren = componentToSelect._children
})
// Select Component!
if (componentToSelect) store.actions.components.select(componentToSelect)
}
</script>
<slot />

7
packages/builder/src/pages/[application]/design/_layout.svelte → packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
View File

@ -1,6 +1,7 @@
<script>
import { store, backendUiStore } from "builderStore"
import { onMount } from "svelte"
import { FrontendTypes } from "constants"
import CurrentItemPreview from "components/userInterface/AppPreview"
import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
@ -26,8 +27,6 @@
const settings = () => {
settingsView.show()
}
const lastPartOfName = c => (c ? last(c.split("/")) : "")
</script>
<!-- routify:options index=1 -->
@ -37,7 +36,7 @@
</div>
<div class="preview-pane">
{#if $store.currentPageName && $store.currentPageName.length > 0}
{#if $store.currentAssetId && $store.currentAssetId.length > 0}
<ComponentSelectionList />
<div class="preview-content">
<CurrentItemPreview />
@ -45,7 +44,7 @@
{/if}
</div>
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
{#if $store.currentFrontEndType === FrontendTypes.SCREEN || $store.currentFrontEndType === FrontendTypes.LAYOUT}
<div class="components-pane">
<ComponentPropertiesPanel />
</div>

17
packages/builder/src/pages/[application]/design/[assetType]/index.svelte Normal file
View File

@ -0,0 +1,17 @@
<script>
import { store, allScreens } from "builderStore"
import { FrontendTypes } from "constants"
import { goto, params } from "@sveltech/routify"
// Go to first layout
if ($params.assetType === FrontendTypes.LAYOUT) {
$goto(`../${$store.layouts[0]?._id}`)
}
// Go to first screen
if ($params.assetType === FrontendTypes.SCREEN) {
$goto(`../${$allScreens[0]?._id}`)
}
</script>
<!-- routify:options index=false -->

69
packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
View File

@ -1,69 +0,0 @@
<script>
import { onMount } from "svelte"
import { params, leftover, goto } from "@sveltech/routify"
import { store, allScreens } from "builderStore"
// Get any leftover params not caught by Routifys params store.
const componentIds = $leftover.split("/").filter(id => id !== "")
// It's a screen, set it to that screen
if ($params.screen !== "page-layout") {
const currentScreenName = decodeURI($params.screen)
const validScreen =
$allScreens.findIndex(screen => screen._id === currentScreenName) !== -1
if (!validScreen) {
// Go to main layout if URL set to invalid screen
store.actions.pages.select("main")
$goto("../../main")
} else {
// Otherwise proceed to set screen
store.actions.screens.select(currentScreenName)
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
// Get the correct screen children.
const screenChildren = $store.pages[$params.page]._screens.find(
screen =>
screen._id === $params.screen ||
screen._id === decodeURIComponent($params.screen)
).props._children
findComponent(componentIds, screenChildren)
}
}
} else {
// It's a page, so set the screentype to page.
store.actions.selectPageOrScreen("page")
// There are leftover stuff, like IDs, so navigate the components and find the ID and select it.
if ($leftover) {
findComponent(componentIds, $store.pages[$params.page].props._children)
}
}
// Find Component with ID and continue
function findComponent(ids, children) {
// Setup stuff
let componentToSelect
let currentChildren = children
// Loop through each ID
ids.forEach(id => {
// Find ID
const component = currentChildren.find(child => child._id === id)
// If it does not exist, ignore (use last valid route)
if (!component) return
componentToSelect = component
// Update childrens array to selected components children
currentChildren = componentToSelect._children
})
// Select Component!
if (componentToSelect) store.actions.components.select(componentToSelect)
}
</script>
<slot />

8
packages/builder/src/pages/[application]/design/[page]/_layout.svelte
View File

@ -1,8 +0,0 @@
<script>
import { params } from "@sveltech/routify"
import { store } from "builderStore"
store.actions.pages.select($params.page)
</script>
<slot />

4
packages/builder/src/pages/[application]/design/[page]/index.svelte
View File

@ -1,4 +0,0 @@
<script>
import { goto } from "@sveltech/routify"
$goto("../page-layout")
</script>

6
packages/builder/src/pages/[application]/design/index.svelte
View File

@ -1,6 +1,8 @@
<script>
import { goto } from "@sveltech/routify"
$goto("../main")
import { FrontendTypes } from "constants"
$goto(`../${FrontendTypes.SCREEN}`)
</script>
<!-- routify:options index=false -->
<!-- routify:options index=1 -->

4
packages/builder/tests/createProps.spec.js
View File

@ -1,4 +1,4 @@
import { createProps } from "../src/components/userInterface/pagesParsing/createProps"
import { createProps } from "../src/components/userInterface/assetParsing/createProps"
import { keys, some } from "lodash/fp"
import { stripStandardProps } from "./testData"
@ -158,8 +158,6 @@ describe("createDefaultProps", () => {
const comp = getcomponent()
comp.props.fieldName = { type: "string", default: 1 }
const { props } = createProps(comp)
expect(props._code).toBeDefined()
expect(props._styles).toBeDefined()
expect(props._code).toBeDefined()
})
})

51
packages/builder/tests/generate_css.spec.js
View File

@ -1,51 +0,0 @@
import {
generate_css,
generate_screen_css,
} from "../src/builderStore/generate_css.js"
describe("generate_css", () => {
test("Check how array styles are output", () => {
expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;")
})
test("Check handling of an array with empty string values", () => {
expect(generate_css({ padding: ["", "", "", ""] })).toBe("")
})
test("Check handling of an empty array", () => {
expect(generate_css({ margin: [] })).toBe("")
})
test("Check handling of valid font property", () => {
expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;")
})
})
describe("generate_screen_css", () => {
const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } }
test("Test generation of normal css styles", () => {
expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}")
})
const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } }
test("Test generation of hover css styles", () => {
expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}")
})
const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } }
test("Test generation of selection css styles", () => {
expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}")
})
const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } }
test.only("Testing handling of empty component styles", () => {
expect(generate_screen_css([emptyComponent])).toBe("")
})
})

2
packages/builder/tests/searchComponentsProps.spec.js
View File

@ -2,7 +2,7 @@ import {
searchAllComponents,
getExactComponent,
getAncestorProps,
} from "../src/components/userInterface/pagesParsing/searchComponents"
} from "../src/components/userInterface/assetParsing/searchComponents"
import { componentsAndScreens } from "./testData"

1
packages/builder/tests/testData.js
View File

@ -106,7 +106,6 @@ export const componentsAndScreens = () => ({
})
export const stripStandardProps = props => {
delete props._code
delete props._id
delete props._styles
}

239
packages/builder/yarn.lock
View File

@ -842,15 +842,17 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@budibase/bbui@^1.50.2":
version "1.50.2"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.50.2.tgz#a6b45518ed963717bcd912c028dc48fc92c7e15c"
integrity sha512-uuyKwlQ11io9yrPi2uoHgRG6SbO4B7jsKxfVoEvLqYGNsFH0Gi/iZdC+JEvBsWO0tu1ZnkxRD3qqSasW+4q0Og==
"@budibase/bbui@^1.52.2":
version "1.52.2"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.2.tgz#a0774880fb755eb81c762bc355550af7f4562b09"
integrity sha512-PxiN5xvr+Z/RpypMDYh3lNhCUnejH1moMoWW7PiuCiho5VXGauR+M8T49p5eTKoFSqRMC7BUdFJJ9ye/cnQxNA==
dependencies:
markdown-it "^12.0.2"
quill "^1.3.7"
sirv-cli "^0.4.6"
svelte-flatpickr "^2.4.0"
svelte-portal "^1.0.0"
turndown "^7.0.0"
"@budibase/client@^0.3.8":
version "0.3.8"
@ -1620,6 +1622,11 @@ argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"
argparse@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
aria-query@^4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@ -1720,7 +1727,7 @@ atob@^2.1.2:
resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
available-typed-arrays@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
@ -2061,6 +2068,14 @@ callsites@^3.0.0:
resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
camel-case@3.0.x:
version "3.0.0"
resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
dependencies:
no-case "^2.2.0"
upper-case "^1.1.1"
camelcase@^5.0.0, camelcase@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@ -2148,14 +2163,6 @@ chokidar@^3.3.0:
optionalDependencies:
fsevents "~2.1.2"
chrome-remote-interface@^0.27.1:
version "0.27.2"
resolved "https://registry.yarnpkg.com/chrome-remote-interface/-/chrome-remote-interface-0.27.2.tgz#e5605605f092b7ef8575d95304e004039c9d0ab9"
integrity sha512-pVLljQ29SAx8KIv5tSa9sIf8GrEsAZdPJoeWOmY3/nrIzFmE+EryNNHvDkddGod0cmAFTv+GmPG0uvzxi2NWsA==
dependencies:
commander "2.11.x"
ws "^6.1.0"
ci-info@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@ -2179,6 +2186,13 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
clean-css@4.2.x:
version "4.2.3"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
dependencies:
source-map "~0.6.0"
cli-cursor@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
@ -2294,16 +2308,21 @@ commander@2, commander@^2.20.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
commander@2.11.x:
version "2.11.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
integrity sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==
commander@2.17.x:
version "2.17.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
commander@^5.0.0, commander@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
commander@~2.19.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
common-tags@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@ -2486,14 +2505,6 @@ cssstyle@^2.2.0:
dependencies:
cssom "~0.3.6"
cypress-log-to-output@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/cypress-log-to-output/-/cypress-log-to-output-1.1.2.tgz#b9635a907ed06961cd53cc1bff8d6f55a981a773"
integrity sha512-C1+ECMc/XXc4HqAEHdlw0X2wFhcoZZ/4qXHZkOAU/rRXMQXnbiO7JJtpLCKrLfOXlxB+jFwDAIdlPxPMfV3cFw==
dependencies:
chalk "^2.4.2"
chrome-remote-interface "^0.27.1"
cypress-terminal-report@^1.4.1:
version "1.4.2"
resolved "https://registry.yarnpkg.com/cypress-terminal-report/-/cypress-terminal-report-1.4.2.tgz#4eeaf2c6a063b42271ec686aff4ab0d6f7b252a6"
@ -2887,19 +2898,20 @@ deep-equal@^1.0.1:
regexp.prototype.flags "^1.2.0"
deep-equal@^2.0.1:
version "2.0.4"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.4.tgz#6b0b407a074666033169df3acaf128e1c6f3eab6"
integrity sha512-BUfaXrVoCfgkOQY/b09QdO9L3XNoF2XH0A3aY9IQwQL/ZjLOe8FQgCNVl1wiolhsFo8kFdO9zdPViCPbmaJA5w==
version "2.0.5"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
dependencies:
es-abstract "^1.18.0-next.1"
es-get-iterator "^1.1.0"
call-bind "^1.0.0"
es-get-iterator "^1.1.1"
get-intrinsic "^1.0.1"
is-arguments "^1.0.4"
is-date-object "^1.0.2"
is-regex "^1.1.1"
isarray "^2.0.5"
object-is "^1.1.3"
object-is "^1.1.4"
object-keys "^1.1.1"
object.assign "^4.1.1"
object.assign "^4.1.2"
regexp.prototype.flags "^1.3.0"
side-channel "^1.0.3"
which-boxed-primitive "^1.0.1"
@ -3015,6 +3027,11 @@ domexception@^2.0.1:
dependencies:
webidl-conversions "^5.0.0"
domino@^2.1.6:
version "2.1.6"
resolved "https://registry.yarnpkg.com/domino/-/domino-2.1.6.tgz#fe4ace4310526e5e7b9d12c7de01b7f485a57ffe"
integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
dotenv@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
@ -3073,6 +3090,11 @@ end-of-stream@^1.1.0:
dependencies:
once "^1.4.0"
entities@~2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
errno@^0.1.1, errno@~0.1.1:
version "0.1.7"
resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@ -3087,7 +3109,7 @@ error-ex@^1.3.1:
dependencies:
is-arrayish "^0.2.1"
es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
version "1.17.7"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
@ -3122,7 +3144,7 @@ es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
string.prototype.trimend "^1.0.1"
string.prototype.trimstart "^1.0.1"
es-get-iterator@^1.1.0:
es-get-iterator@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
@ -3189,6 +3211,11 @@ estraverse@^4.2.0:
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
estree-walker@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
estree-walker@^0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
@ -3801,6 +3828,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
inherits "^2.0.3"
minimalistic-assert "^1.0.1"
he@1.2.x:
version "1.2.0"
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -3834,6 +3866,19 @@ html-escaper@^2.0.0:
resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
html-minifier@^3.0.2:
version "3.5.21"
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
dependencies:
camel-case "3.0.x"
clean-css "4.2.x"
commander "2.17.x"
he "1.2.x"
param-case "2.1.x"
relateurl "0.2.x"
uglify-js "3.4.x"
http-signature@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@ -3975,9 +4020,11 @@ is-binary-path@~2.1.0:
binary-extensions "^2.0.0"
is-boolean-object@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
dependencies:
call-bind "^1.0.0"
is-buffer@^1.1.5:
version "1.1.6"
@ -4207,12 +4254,13 @@ is-symbol@^1.0.2:
has-symbols "^1.0.1"
is-typed-array@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
version "1.1.4"
resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
dependencies:
available-typed-arrays "^1.0.0"
es-abstract "^1.17.4"
available-typed-arrays "^1.0.2"
call-bind "^1.0.0"
es-abstract "^1.18.0-next.1"
foreach "^2.0.5"
has-symbols "^1.0.1"
@ -5014,6 +5062,13 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
linkify-it@^3.0.1:
version "3.0.2"
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.2.tgz#f55eeb8bc1d3ae754049e124ab3bb56d97797fb8"
integrity sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==
dependencies:
uc.micro "^1.0.1"
listr-silent-renderer@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
@ -5158,6 +5213,11 @@ loose-envify@^1.0.0:
dependencies:
js-tokens "^3.0.0 || ^4.0.0"
lower-case@^1.1.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
ltgt@^2.1.2:
version "2.2.1"
resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
@ -5214,6 +5274,17 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
markdown-it@^12.0.2:
version "12.0.2"
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.0.2.tgz#4401beae8df8aa2221fc6565a7188e60a06ef0ed"
integrity sha512-4Lkvjbv2kK+moL9TbeV+6/NHx+1Q+R/NIdUlFlkqkkzUcTod4uiyTJRiBidKR9qXSdkNFkgv+AELY8KN9vSgVA==
dependencies:
argparse "^2.0.1"
entities "~2.0.0"
linkify-it "^3.0.1"
mdurl "^1.0.1"
uc.micro "^1.0.5"
md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@ -5223,6 +5294,11 @@ md5.js@^1.3.4:
inherits "^2.0.1"
safe-buffer "^5.1.2"
mdurl@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
merge-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -5315,7 +5391,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
minimatch@^3.0.4:
minimatch@^3.0.2, minimatch@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@ -5409,6 +5485,13 @@ nice-try@^1.0.4:
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
no-case@^2.2.0:
version "2.3.2"
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
dependencies:
lower-case "^1.1.1"
node-fetch@^2.6.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@ -5523,7 +5606,7 @@ object-is@^1.0.1:
define-properties "^1.1.3"
es-abstract "^1.18.0-next.1"
object-is@^1.1.3:
object-is@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
@ -5557,7 +5640,7 @@ object-visit@^1.0.0:
dependencies:
isobject "^3.0.0"
object.assign@^4.1.0, object.assign@^4.1.1:
object.assign@^4.1.0, object.assign@^4.1.1, object.assign@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@ -5681,6 +5764,13 @@ p-try@^2.0.0:
resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
param-case@2.1.x:
version "2.1.1"
resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
dependencies:
no-case "^2.2.0"
parchment@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
@ -6167,6 +6257,11 @@ regjsparser@^0.6.4:
dependencies:
jsesc "~0.5.0"
relateurl@0.2.x:
version "0.2.7"
resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
remixicon@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
@ -6360,6 +6455,14 @@ rollup-plugin-css-only@^2.1.0:
"@rollup/pluginutils" "^3.0.0"
fs-extra "^9.0.0"
rollup-plugin-html@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/rollup-plugin-html/-/rollup-plugin-html-0.2.1.tgz#a1862eca87ae54b677689d0d4133911e8226463d"
integrity sha1-oYYuyoeuVLZ3aJ0NQTORHoImRj0=
dependencies:
html-minifier "^3.0.2"
rollup-pluginutils "^1.5.0"
rollup-plugin-livereload@^1.0.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/rollup-plugin-livereload/-/rollup-plugin-livereload-1.3.0.tgz#8da90df13df6502b9d982997d6ac871092f15fdd"
@ -6428,6 +6531,14 @@ rollup-plugin-url@^2.2.2:
mkdirp "^0.5.1"
rollup-pluginutils "^2.8.2"
rollup-pluginutils@^1.5.0:
version "1.5.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
integrity sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=
dependencies:
estree-walker "^0.2.1"
minimatch "^3.0.2"
rollup-pluginutils@^2.3.1, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
version "2.8.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
@ -6727,7 +6838,7 @@ source-map@^0.5.0, source-map@^0.5.6:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@ -7186,6 +7297,13 @@ tunnel-agent@^0.6.0:
dependencies:
safe-buffer "^5.0.1"
turndown@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.0.0.tgz#19b2a6a2d1d700387a1e07665414e4af4fec5225"
integrity sha512-G1FfxfR0mUNMeGjszLYl3kxtopC4O9DRRiMlMDDVHvU1jaBkGFg4qxIyjIk2aiKLHyDyZvZyu4qBO2guuYBy3Q==
dependencies:
domino "^2.1.6"
tweetnacl@^0.14.3, tweetnacl@~0.14.0:
version "0.14.5"
resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
@ -7208,6 +7326,19 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
uc.micro@^1.0.1, uc.micro@^1.0.5:
version "1.0.6"
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
uglify-js@3.4.x:
version "3.4.10"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
dependencies:
commander "~2.19.0"
source-map "~0.6.1"
unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@ -7269,6 +7400,11 @@ untildify@^4.0.0:
resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
upper-case@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
uri-js@^4.2.2:
version "4.4.0"
resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
@ -7461,12 +7597,13 @@ which-module@^2.0.0:
integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
which-typed-array@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
version "1.1.4"
resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
dependencies:
available-typed-arrays "^1.0.2"
es-abstract "^1.17.5"
call-bind "^1.0.0"
es-abstract "^1.18.0-next.1"
foreach "^2.0.5"
function-bind "^1.1.1"
has-symbols "^1.0.1"
@ -7529,7 +7666,7 @@ ws@^5.2.0:
dependencies:
async-limiter "~1.0.0"
ws@^6.1.0, ws@^6.2.1:
ws@^6.2.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==

2
packages/client/package.json
View File

@ -3,7 +3,7 @@
"version": "0.3.8",
"license": "MPL-2.0",
"main": "dist/budibase-client.js",
"module": "dist/budibase-client.esm.mjs",
"module": "dist/budibase-client.js",
"scripts": {
"build": "rollup -c",
"dev:builder": "rollup -cw"

8
packages/client/src/api/auth.js
View File

@ -3,15 +3,15 @@ import API from "./api"
/**
* Performs a log in request.
*/
export const logIn = async ({ username, password }) => {
if (!username) {
return API.error("Please enter your username")
export const logIn = async ({ email, password }) => {
if (!email) {
return API.error("Please enter your email")
}
if (!password) {
return API.error("Please enter your password")
}
return await API.post({
url: "/api/authenticate",
body: { username, password },
body: { email, password },
})
}

5
packages/client/src/components/ClientApp.svelte
View File

@ -20,6 +20,7 @@
})
</script>
{#if loaded}
<Component definition={$screenStore.page.props} />
{#if loaded && $screenStore.activeLayout}
<!-- // TODO: need to get the active screen as well -->
<Component definition={$screenStore.activeLayout.props} />
{/if}

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

@ -10,7 +10,7 @@
// Get the screen definition for the current route
$: screenDefinition = $screenStore.activeScreen?.props
// Redirect to home page if no matching route
// Redirect to home layout if no matching route
$: screenDefinition == null && routeStore.actions.navigate("/")
// Make a screen array so we can use keying to properly re-render each screen

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

@ -7,7 +7,7 @@ const loadBudibase = () => {
// Update builder store with any builder flags
builderStore.set({
inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
page: window["##BUDIBASE_PREVIEW_PAGE##"],
layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
previewId: window["##BUDIBASE_PREVIEW_ID##"],

4
packages/client/src/store/auth.js
View File

@ -5,8 +5,8 @@ import { writable } from "svelte/store"
const createAuthStore = () => {
const store = writable("")
const logIn = async ({ username, password }) => {
const user = await API.logIn({ username, password })
const logIn = async ({ email, password }) => {
const user = await API.logIn({ email, password })
if (!user.error) {
store.set(user.token)
location.reload()

2
packages/client/src/store/builder.js
View File

@ -3,7 +3,7 @@ import { writable } from "svelte/store"
const createBuilderStore = () => {
const initialState = {
inBuilder: false,
page: null,
layout: null,
screen: null,
selectedComponentId: null,
previewId: null,

2
packages/client/src/store/routes.js
View File

@ -34,7 +34,7 @@ const createRouteStore = () => {
}
const setActiveRoute = route => {
store.update(state => {
state.activeRoute = route
state.activeRoute = state.routes.find(x => x.path === route)
return state
})
}

23
packages/client/src/store/screens.js
View File

@ -7,30 +7,35 @@ import { getAppId } from "../utils/getAppId"
const createScreenStore = () => {
const config = writable({
screens: [],
page: {},
layouts: [],
})
const store = derived(
[config, routeStore, builderStore],
([$config, $routeStore, $builderStore]) => {
let page
let activeLayout
let activeScreen
if ($builderStore.inBuilder) {
// Use builder defined definitions if inside the builder preview
page = $builderStore.page
activeLayout = $builderStore.layout
activeScreen = $builderStore.screen
} else {
// Otherwise find the correct screen by matching the current route
page = $config.page
const { screens } = $config
const { screens, layouts } = $config
activeLayout = layouts[0]
if (screens.length === 1) {
activeScreen = screens[0]
} else {
} else if ($routeStore.activeRoute) {
activeScreen = screens.find(
screen => screen.routing.route === $routeStore.activeRoute
screen => screen._id === $routeStore.activeRoute.screenId
)
}
if (activeScreen) {
activeLayout = layouts.find(
layout => layout._id === activeScreen.layoutId
)
}
}
return { page, activeScreen }
return { activeLayout, activeScreen }
}
)
@ -38,7 +43,7 @@ const createScreenStore = () => {
const appDefinition = await API.fetchAppDefinition(getAppId())
config.set({
screens: appDefinition.screens,
page: appDefinition.page,
layouts: appDefinition.layouts,
})
}

131
packages/server/src/api/controllers/application.js
View File

@ -1,5 +1,5 @@
const CouchDB = require("../../db")
const compileStaticAssetsForPage = require("../../utilities/builder/compileStaticAssetsForPage")
const compileStaticAssets = require("../../utilities/builder/compileStaticAssets")
const env = require("../../environment")
const { existsSync } = require("fs-extra")
const { budibaseAppsDir } = require("../../utilities/budibaseDir")
@ -14,34 +14,54 @@ const {
generateAppID,
DocumentTypes,
SEPARATOR,
getPageParams,
getLayoutParams,
getScreenParams,
generatePageID,
generateScreenID,
} = require("../../db/utils")
const { BUILTIN_ROLE_IDS } = require("../../utilities/security/roles")
const {
BUILTIN_ROLE_IDS,
AccessController,
} = require("../../utilities/security/roles")
const {
downloadExtractComponentLibraries,
} = require("../../utilities/createAppPackage")
const { MAIN, UNAUTHENTICATED, PageTypes } = require("../../constants/pages")
const { HOME_SCREEN } = require("../../constants/screens")
const { BASE_LAYOUTS } = require("../../constants/layouts")
const {
createHomeScreen,
createLoginScreen,
} = require("../../constants/screens")
const { cloneDeep } = require("lodash/fp")
const { recurseMustache } = require("../../utilities/mustache")
const { generateAssetCss } = require("../../utilities/builder/generateCss")
const { USERS_TABLE_SCHEMA } = require("../../constants")
const APP_PREFIX = DocumentTypes.APP + SEPARATOR
// utility function, need to do away with this
async function getMainAndUnauthPage(db) {
let pages = await db.allDocs(
getPageParams(null, {
include_docs: true,
})
)
pages = pages.rows.map(row => row.doc)
async function getLayouts(db) {
return (
await db.allDocs(
getLayoutParams(null, {
include_docs: true,
})
)
).rows.map(row => row.doc)
}
const mainPage = pages.find(page => page.name === PageTypes.MAIN)
const unauthPage = pages.find(page => page.name === PageTypes.UNAUTHENTICATED)
return { mainPage, unauthPage }
async function getScreens(db) {
return (
await db.allDocs(
getScreenParams(null, {
include_docs: true,
})
)
).rows.map(row => row.doc)
}
function getUserRoleId(ctx) {
return !ctx.user.role || !ctx.user.role._id
? BUILTIN_ROLE_IDS.PUBLIC
: ctx.user.role._id
}
async function createInstance(template) {
@ -92,25 +112,16 @@ exports.fetch = async function(ctx) {
exports.fetchAppDefinition = async function(ctx) {
const db = new CouchDB(ctx.params.appId)
// TODO: need to get rid of pages here, they shouldn't be needed anymore
const { mainPage, unauthPage } = await getMainAndUnauthPage(db)
const userRoleId =
!ctx.user.role || !ctx.user.role._id
? BUILTIN_ROLE_IDS.PUBLIC
: ctx.user.role._id
const correctPage =
userRoleId === BUILTIN_ROLE_IDS.PUBLIC ? unauthPage : mainPage
const screens = (
await db.allDocs(
getScreenParams(correctPage._id, {
include_docs: true,
})
)
).rows.map(row => row.doc)
// TODO: need to handle access control here, limit screens to user role
const layouts = await getLayouts(db)
const userRoleId = getUserRoleId(ctx)
const accessController = new AccessController(ctx.params.appId)
const screens = await accessController.checkScreensAccess(
await getScreens(db),
userRoleId
)
ctx.body = {
page: correctPage,
screens: screens,
layouts,
screens,
libraries: ["@budibase/standard-components"],
}
}
@ -118,16 +129,19 @@ exports.fetchAppDefinition = async function(ctx) {
exports.fetchAppPackage = async function(ctx) {
const db = new CouchDB(ctx.params.appId)
const application = await db.get(ctx.params.appId)
const [layouts, screens] = await Promise.all([getLayouts(db), getScreens(db)])
const { mainPage, unauthPage } = await getMainAndUnauthPage(db)
for (let layout of layouts) {
layout._css = generateAssetCss([layout.props])
}
for (let screen of screens) {
screen._css = generateAssetCss([screen.props])
}
ctx.body = {
application,
pages: {
main: mainPage,
unauthenticated: unauthPage,
},
screens,
layouts,
}
await setBuilderToken(ctx, ctx.params.appId, application.version)
}
@ -200,27 +214,26 @@ const createEmptyAppPackage = async (ctx, app) => {
fs.mkdirpSync(newAppFolder)
const mainPage = cloneDeep(MAIN)
mainPage._id = generatePageID()
mainPage.title = app.name
let screensAndLayouts = []
for (let layout of BASE_LAYOUTS) {
const cloned = cloneDeep(layout)
cloned.title = app.name
screensAndLayouts.push(recurseMustache(cloned, app))
}
const unauthPage = cloneDeep(UNAUTHENTICATED)
unauthPage._id = generatePageID()
unauthPage.title = app.name
unauthPage.props._children[0].title = `Log in to ${app.name}`
const homeScreen = createHomeScreen(app)
homeScreen._id = generateScreenID()
screensAndLayouts.push(homeScreen)
const homeScreen = cloneDeep(HOME_SCREEN)
homeScreen._id = generateScreenID(mainPage._id)
await db.bulkDocs([mainPage, unauthPage, homeScreen])
await compileStaticAssetsForPage(app._id, "main", {
page: mainPage,
screens: [homeScreen],
})
await compileStaticAssetsForPage(app._id, "unauthenticated", {
page: unauthPage,
screens: [],
})
const loginScreen = createLoginScreen(app)
loginScreen._id = generateScreenID()
screensAndLayouts.push(loginScreen)
await db.bulkDocs(screensAndLayouts)
// at the end add CSS to all the structures
for (let asset of screensAndLayouts) {
asset._css = generateAssetCss([asset.props])
}
await compileStaticAssets(app._id, screensAndLayouts)
return newAppFolder
}

10
packages/server/src/api/controllers/auth.js
View File

@ -10,21 +10,21 @@ exports.authenticate = async ctx => {
const appId = ctx.appId
if (!appId) ctx.throw(400, "No appId")
const { username, password } = ctx.request.body
const { email, password } = ctx.request.body
if (!username) ctx.throw(400, "Username Required.")
if (!email) ctx.throw(400, "Email Required.")
if (!password) ctx.throw(400, "Password Required.")
// Check the user exists in the instance DB by username
// Check the user exists in the instance DB by email
const db = new CouchDB(appId)
const app = await db.get(appId)
let dbUser
try {
dbUser = await db.get(generateUserID(username))
dbUser = await db.get(generateUserID(email))
} catch (_) {
// do not want to throw a 404 - as this could be
// used to determine valid usernames
// used to determine valid emails
ctx.throw(401, "Invalid Credentials")
}

37
packages/server/src/api/controllers/deploy/utils.js
View File

@ -5,6 +5,8 @@ const { join } = require("../../../utilities/centralPath")
const { budibaseAppsDir } = require("../../../utilities/budibaseDir")
const PouchDB = require("../../../db")
const EXCLUDED_DIRECTORIES = ["css"]
const CONTENT_TYPE_MAP = {
html: "text/html",
css: "text/css",
@ -37,25 +39,28 @@ exports.prepareUpload = async function({ s3Key, metadata, client, file }) {
exports.deployToObjectStore = async function(appId, objectClient, metadata) {
const appAssetsPath = join(budibaseAppsDir(), appId, "public")
const appPages = fs.readdirSync(appAssetsPath)
let uploads = []
for (let page of appPages) {
// Upload HTML, CSS and JS for each page of the web app
walkDir(join(appAssetsPath, page), function(filePath) {
const appAssetUpload = exports.prepareUpload({
file: {
path: filePath,
name: [...filePath.split("/")].pop(),
},
s3Key: filePath.replace(appAssetsPath, `assets/${appId}`),
client: objectClient,
metadata,
})
uploads.push(appAssetUpload)
// Upload HTML, CSS and JS for each page of the web app
walkDir(appAssetsPath, function(filePath) {
const filePathParts = filePath.split("/")
const publicIndex = filePathParts.indexOf("public")
const directory = filePathParts[publicIndex + 1]
// don't include these top level directories
if (EXCLUDED_DIRECTORIES.indexOf(directory) !== -1) {
return
}
const appAssetUpload = exports.prepareUpload({
file: {
path: filePath,
name: filePathParts.pop(),
},
s3Key: filePath.replace(appAssetsPath, `assets/${appId}`),
client: objectClient,
metadata,
})
}
uploads.push(appAssetUpload)
})
// Upload file attachments
const db = new PouchDB(appId)

43
packages/server/src/api/controllers/layout.js Normal file
View File

@ -0,0 +1,43 @@
const { EMPTY_LAYOUT } = require("../../constants/layouts")
const CouchDB = require("../../db")
const { generateLayoutID, getScreenParams } = require("../../db/utils")
exports.save = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
let layout = ctx.request.body
if (!layout.props) {
layout = {
...layout,
...EMPTY_LAYOUT,
}
}
layout._id = layout._id || generateLayoutID()
const response = await db.put(layout)
layout._rev = response.rev
ctx.body = layout
ctx.status = 200
}
exports.destroy = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
const layoutId = ctx.params.layoutId,
layoutRev = ctx.params.layoutRev
const layoutsUsedByScreens = (
await db.allDocs(
getScreenParams(null, {
include_docs: true,
})
)
).rows.map(element => element.doc.layoutId)
if (layoutsUsedByScreens.includes(layoutId)) {
ctx.throw(400, "Cannot delete a base layout")
}
await db.remove(layoutId, layoutRev)
ctx.message = "Layout deleted successfully"
ctx.status = 200
}

19
packages/server/src/api/controllers/page.js
View File

@ -1,19 +0,0 @@
const CouchDB = require("../../db/client")
const { generatePageID } = require("../../db/utils")
const compileStaticAssetsForPage = require("../../utilities/builder/compileStaticAssetsForPage")
exports.save = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
const appPackage = ctx.request.body
const page = await db.get(ctx.params.pageId)
await compileStaticAssetsForPage(ctx.user.appId, page.name, ctx.request.body)
// remove special doc props which couch will complain about
delete appPackage.page._css
delete appPackage.page._screens
appPackage.page._id = appPackage.page._id || generatePageID()
ctx.body = await db.put(appPackage.page)
ctx.status = 200
}

59
packages/server/src/api/controllers/role.js
View File

@ -4,7 +4,40 @@ const {
Role,
getRole,
} = require("../../utilities/security/roles")
const { generateRoleID, getRoleParams } = require("../../db/utils")
const {
generateRoleID,
getRoleParams,
getUserParams,
ViewNames,
} = require("../../db/utils")
const UpdateRolesOptions = {
CREATED: "created",
REMOVED: "removed",
}
async function updateRolesOnUserTable(db, roleId, updateOption) {
const table = await db.get(ViewNames.USERS)
const schema = table.schema
const remove = updateOption === UpdateRolesOptions.REMOVED
let updated = false
for (let prop of Object.keys(schema)) {
if (prop === "roleId") {
updated = true
const constraints = schema[prop].constraints
const indexOf = constraints.inclusion.indexOf(roleId)
if (remove && indexOf !== -1) {
constraints.inclusion.splice(indexOf, 1)
} else if (!remove && indexOf === -1) {
constraints.inclusion.push(roleId)
}
break
}
}
if (updated) {
await db.put(table)
}
}
exports.fetch = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
@ -42,6 +75,7 @@ exports.save = async function(ctx) {
role._rev = ctx.request.body._rev
}
const result = await db.put(role)
await updateRolesOnUserTable(db, _id, UpdateRolesOptions.CREATED)
role._rev = result.rev
ctx.body = role
ctx.message = `Role '${role.name}' created successfully.`
@ -49,7 +83,26 @@ exports.save = async function(ctx) {
exports.destroy = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
await db.remove(ctx.params.roleId, ctx.params.rev)
ctx.message = `Role ${ctx.params.id} deleted successfully`
const roleId = ctx.params.roleId
// first check no users actively attached to role
const users = (
await db.allDocs(
getUserParams(null, {
include_docs: true,
})
)
).rows.map(row => row.doc)
const usersWithRole = users.filter(user => user.roleId === roleId)
if (usersWithRole.length !== 0) {
ctx.throw("Cannot delete role when it is in use.")
}
await db.remove(roleId, ctx.params.rev)
await updateRolesOnUserTable(
db,
ctx.params.roleId,
UpdateRolesOptions.REMOVED
)
ctx.message = `Role ${ctx.params.roleId} deleted successfully`
ctx.status = 200
}

5
packages/server/src/api/controllers/row.js
View File

@ -359,6 +359,11 @@ const TYPE_TRANSFORM_MAP = {
[null]: "",
[undefined]: undefined,
},
longform: {
"": "",
[null]: "",
[undefined]: undefined,
},
number: {
"": null,
[null]: null,

35
packages/server/src/api/controllers/screen.js
View File

@ -1,6 +1,8 @@
const CouchDB = require("../../db")
const { getScreenParams, generateScreenID } = require("../../db/utils")
const { AccessController } = require("../../utilities/security/roles")
const { generateAssetCss } = require("../../utilities/builder/generateCss")
const compileStaticAssets = require("../../utilities/builder/compileStaticAssets")
exports.fetch = async ctx => {
const appId = ctx.user.appId
@ -20,40 +22,31 @@ exports.fetch = async ctx => {
)
}
exports.find = async ctx => {
const appId = ctx.user.appId
const db = new CouchDB(appId)
const screens = await db.allDocs(
getScreenParams(ctx.params.pageId, {
include_docs: true,
})
)
ctx.body = await new AccessController(appId).checkScreensAccess(
screens,
ctx.user.role._id
)
}
exports.save = async ctx => {
const appId = ctx.user.appId
const db = new CouchDB(appId)
const screen = ctx.request.body
let screen = ctx.request.body
if (!screen._id) {
screen._id = generateScreenID(ctx.params.pageId)
screen._id = generateScreenID()
}
delete screen._css
const response = await db.put(screen)
// update CSS so client doesn't need to make a call directly after
screen._css = generateAssetCss([screen.props])
await compileStaticAssets(appId, screen)
ctx.message = `Screen ${screen.name} saved.`
ctx.body = response
ctx.body = {
...screen,
_id: response.id,
_rev: response.rev,
}
}
exports.destroy = async ctx => {
const db = new CouchDB(ctx.user.appId)
await db.remove(ctx.params.screenId, ctx.params.revId)
await db.remove(ctx.params.screenId, ctx.params.screenRev)
ctx.message = "Screen deleted successfully"
ctx.status = 200
}

24
packages/server/src/api/controllers/static/index.js
View File

@ -15,12 +15,20 @@ const {
const CouchDB = require("../../../db")
const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
const fileProcessor = require("../../../utilities/fileProcessor")
const { AuthTypes } = require("../../../constants")
const env = require("../../../environment")
const { generateAssetCss } = require("../../../utilities/builder/generateCss")
const compileStaticAssets = require("../../../utilities/builder/compileStaticAssets")
// this was the version before we started versioning the component library
const COMP_LIB_BASE_APP_VERSION = "0.2.5"
exports.generateCss = async function(ctx) {
const structure = ctx.request.body
structure._css = generateAssetCss([structure.props])
await compileStaticAssets(ctx.appId, structure)
ctx.body = { css: structure._css }
}
exports.serveBuilder = async function(ctx) {
let builderPath = resolve(__dirname, "../../../../builder")
if (ctx.file === "index.html") {
@ -142,15 +150,11 @@ exports.performLocalFileProcessing = async function(ctx) {
exports.serveApp = async function(ctx) {
const App = require("./templates/BudibaseApp.svelte").default
const db = new CouchDB(ctx.params.appId)
const appInfo = await db.get(ctx.params.appId)
const { head, html, css } = App.render({
title: appInfo.name,
pageName:
ctx.auth.authenticated === AuthTypes.APP ? "main" : "unauthenticated",
production: env.CLOUD,
appId: ctx.params.appId,
})
@ -185,15 +189,7 @@ exports.serveAttachment = async function(ctx) {
exports.serveAppAsset = async function(ctx) {
// default to homedir
const mainOrAuth =
ctx.auth.authenticated === AuthTypes.APP ? "main" : "unauthenticated"
const appPath = resolve(
budibaseAppsDir(),
ctx.user.appId,
"public",
mainOrAuth
)
const appPath = resolve(budibaseAppsDir(), ctx.user.appId, "public")
await send(ctx, ctx.file, { root: ctx.devPath || appPath })
}

5
packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
View File

@ -3,14 +3,13 @@
export let favicon = ""
export let appId
export let pageName = ""
export let production
export const PRODUCTION_ASSETS_URL = `https://${appId}.app.budi.live`
function publicPath(path) {
if (production) {
return `${PRODUCTION_ASSETS_URL}/assets/${appId}/${pageName}/${path}`
return `${PRODUCTION_ASSETS_URL}/assets/${appId}/${path}`
}
return `/assets/${path}`
@ -49,8 +48,6 @@
</svelte:head>
<body id="app">
<script src={publicPath('clientFrontendDefinition.js')}>
</script>
<script src={publicPath('budibase-client.js')}>
</script>
<script>

27
packages/server/src/api/controllers/user.js
View File

@ -6,7 +6,7 @@ const { getRole } = require("../../utilities/security/roles")
exports.fetch = async function(ctx) {
const database = new CouchDB(ctx.user.appId)
const data = await database.allDocs(
getUserParams("", {
getUserParams(null, {
include_docs: true,
})
)
@ -15,10 +15,10 @@ exports.fetch = async function(ctx) {
exports.create = async function(ctx) {
const db = new CouchDB(ctx.user.appId)
const { username, password, name, roleId } = ctx.request.body
const { email, password, roleId } = ctx.request.body
if (!username || !password) {
ctx.throw(400, "Username and Password Required.")
if (!email || !password) {
ctx.throw(400, "email and Password Required.")
}
const role = await getRole(ctx.user.appId, roleId)
@ -26,10 +26,9 @@ exports.create = async function(ctx) {
if (!role) ctx.throw(400, "Invalid Role")
const user = {
_id: generateUserID(username),
username,
_id: generateUserID(email),
email,
password: await bcrypt.hash(password),
name: name || username,
type: "user",
roleId,
tableId: ViewNames.USERS,
@ -42,8 +41,7 @@ exports.create = async function(ctx) {
ctx.userId = response._id
ctx.body = {
_rev: response.rev,
username,
name,
email,
}
} catch (err) {
if (err.status === 409) {
@ -64,23 +62,22 @@ exports.update = async function(ctx) {
user._rev = response.rev
ctx.status = 200
ctx.message = `User ${ctx.request.body.username} updated successfully.`
ctx.message = `User ${ctx.request.body.email} updated successfully.`
ctx.body = response
}
exports.destroy = async function(ctx) {
const database = new CouchDB(ctx.user.appId)
await database.destroy(generateUserID(ctx.params.username))
ctx.message = `User ${ctx.params.username} deleted.`
await database.destroy(generateUserID(ctx.params.email))
ctx.message = `User ${ctx.params.email} deleted.`
ctx.status = 200
}
exports.find = async function(ctx) {
const database = new CouchDB(ctx.user.appId)
const user = await database.get(generateUserID(ctx.params.username))
const user = await database.get(generateUserID(ctx.params.email))
ctx.body = {
username: user.username,
name: user.name,
email: user.email,
_rev: user._rev,
}
}

4
packages/server/src/api/routes/index.js
View File

@ -1,5 +1,5 @@
const authRoutes = require("./auth")
const pageRoutes = require("./pages")
const layoutRoutes = require("./layout")
const screenRoutes = require("./screen")
const userRoutes = require("./user")
const applicationRoutes = require("./application")
@ -20,7 +20,7 @@ const permissionRoutes = require("./permission")
exports.mainRoutes = [
deployRoutes,
pageRoutes,
layoutRoutes,
screenRoutes,
userRoutes,
applicationRoutes,

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