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

Merge branch 'new-design-ui' of github.com:Budibase/budibase into new-design-ui

Browse source
This commit is contained in:
Martin McKeaveney 2022-06-13 21:01:08 +01:00
parent 46247346d6 6f00c62d48
commit b077903991
41 changed files with 328 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lerna.json
View file

@ -1,5 +1,5 @@
{
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"npmClient": "yarn",
"packages": [
"packages/*"

2
packages/backend-core/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@budibase/backend-core",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"description": "Budibase backend core libraries used in server and worker",
"main": "src/index.js",
"author": "Budibase",

4
packages/bbui/package.json
View file

@ -1,7 +1,7 @@
{
"name": "@budibase/bbui",
"description": "A UI solution used in the different Budibase projects.",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"license": "MPL-2.0",
"svelte": "src/index.js",
"module": "dist/bbui.es.js",
@ -38,7 +38,7 @@
],
"dependencies": {
"@adobe/spectrum-css-workflow-icons": "^1.2.1",
"@budibase/string-templates": "^1.0.192-alpha.5",
"@budibase/string-templates": "^1.0.192-alpha.6",
"@spectrum-css/actionbutton": "^1.0.1",
"@spectrum-css/actiongroup": "^1.0.1",
"@spectrum-css/avatar": "^3.0.2",

3
packages/bbui/src/ActionButton/ActionButton.svelte
View file

@ -83,4 +83,7 @@
:global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
margin-left: 0;
}
.is-selected {
background: var(--spectrum-global-color-gray-300);
}
</style>

1
packages/bbui/src/IconSideNav/IconSideNavItem.svelte
View file

@ -41,7 +41,6 @@
.active :global(svg) {
color: white;
}
.icon-side-nav-item:hover,
.active {
background: var(--spectrum-global-color-gray-300);
}

31
packages/builder/cypress/integration/createAutomation.spec.js
View file

@ -1,4 +1,5 @@
import filterTests from "../support/filterTests"
const interact = require('../support/interact')
filterTests(['smoke', 'all'], () => {
context("Create a automation", () => {
@ -11,51 +12,51 @@ filterTests(['smoke', 'all'], () => {
cy.createTestTableWithData()
cy.wait(2000)
cy.contains("Automate").click()
cy.get(".add-button .spectrum-Icon").click()
cy.get(".modal-inner-wrapper").within(() => {
cy.get(interact.ADD_BUTTON_SPECTRUM).click()
cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
cy.get("input").type("Add Row")
cy.contains("Row Created").click({ force: true })
cy.wait(500)
cy.get(".spectrum-Button--cta").click()
cy.get(interact.SPECTRUM_BUTTON_CTA).click()
})
// Setup trigger
cy.get(".spectrum-Picker-label").click()
cy.get(interact.SPECTRUM_PICKER_LABEL).click()
cy.wait(500)
cy.contains("dog").click()
cy.wait(2000)
// Create action
cy.get('[aria-label="AddCircle"]').eq(1).click()
cy.get(".modal-inner-wrapper").within(() => {
cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
cy.wait(1000)
cy.contains("Create Row").trigger('mouseover').click().click()
cy.get(".spectrum-Button--cta").click()
cy.get(interact.SPECTRUM_BUTTON_CTA).click()
})
cy.get(".spectrum-Picker-label").eq(1).click()
cy.get(interact.SPECTRUM_PICKER_LABEL).eq(1).click()
cy.contains("dog").click()
cy.get(".spectrum-Textfield-input")
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
.first()
.type("{{ trigger.row.name }}", { parseSpecialCharSequences: false })
cy.get(".spectrum-Textfield-input")
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
.eq(1)
.type("11")
cy.contains("Finish and test automation").click()
cy.get(".modal-inner-wrapper").within(() => {
cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
cy.wait(1000)
cy.get(".spectrum-Picker-label").click()
cy.get(interact.SPECTRUM_PICKER_LABEL).click()
cy.contains("dog").click()
cy.wait(1000)
cy.get(".spectrum-Textfield-input")
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
.first()
.type("automationGoodboy")
cy.get(".spectrum-Textfield-input")
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
.eq(1)
.type("11")
cy.get(".spectrum-Textfield-input")
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
.eq(2)
.type("123456")
cy.get(".spectrum-Textfield-input")
cy.get(interact.SPECTRUM_TEXTFIELD_INPUT)
.eq(3)
.type("123456")
cy.contains("Test").click()

55
packages/builder/cypress/integration/createTable.spec.js
View file

@ -1,4 +1,5 @@
import filterTests from "../support/filterTests"
const interact = require('../support/interact')
filterTests(["smoke", "all"], () => {
context("Create a Table", () => {
@ -11,7 +12,7 @@ filterTests(["smoke", "all"], () => {
cy.createTable("dog")
cy.wait(1000)
// Check if Table exists
cy.get(".table-title h1").should("have.text", "dog")
cy.get(interact.TABLE_TITLE_H1).should("have.text", "dog")
})
it("adds a new column to the table", () => {
@ -25,13 +26,13 @@ filterTests(["smoke", "all"], () => {
})
it("updates a column on the table", () => {
cy.get(".title").click()
cy.get(".spectrum-Table-editIcon > use").click()
cy.get(".modal-inner-wrapper").within(() => {
cy.get(interact.TABLE_TITLE).click()
cy.get(interact.SPECTRUM_TABLE_EDIT).click()
cy.get(interact.MODAL_INNER_WRAPPER).within(() => {
cy.get("input").eq(0).type("updated", { force: true })
// Unset table display column
cy.get(".spectrum-Switch-input").eq(1).click()
cy.get(interact.SPECTRUM_SWITCH_INPUT).eq(1).click()
cy.contains("Save Column").click()
})
cy.contains("nameupdated ").should("contain", "nameupdated")
@ -40,16 +41,16 @@ filterTests(["smoke", "all"], () => {
it("edits a row", () => {
cy.contains("button", "Edit").click({ force: true })
cy.wait(1000)
cy.get(".spectrum-Modal input").clear()
cy.get(".spectrum-Modal input").type("Updated")
cy.get(interact.SPECTRUM_MODAL_INPUT).clear()
cy.get(interact.SPECTRUM_MODAL_INPUT).type("Updated")
cy.contains("Save").click()
cy.contains("Updated").should("have.text", "Updated")
})
it("deletes a row", () => {
cy.get(".spectrum-Checkbox-input").check({ force: true })
cy.get(interact.SPECTRUM_CHECKBOX_INPUT).check({ force: true })
cy.contains("Delete 1 row(s)").click()
cy.get(".spectrum-Modal").contains("Delete").click()
cy.get(interact.SPECTRUM_MODAL).contains("Delete").click()
cy.contains("RoverUpdated").should("not.exist")
})
@ -63,50 +64,50 @@ filterTests(["smoke", "all"], () => {
}
cy.reload()
cy.wait(2000)
cy.get(".spectrum-Pagination").within(() => {
cy.get(".spectrum-ActionButton").eq(1).click()
cy.get(interact.SPECTRUM_PAGINATION).within(() => {
cy.get(interact.SPECTRUM_ACTION_BUTTON).eq(1).click()
})
cy.get(".spectrum-Pagination").within(() => {
cy.get(".spectrum-Body--secondary").contains("Page 2")
cy.get(interact.SPECTRUM_PAGINATION).within(() => {
cy.get(interact.SPECTRUM_BODY_SECOND).contains("Page 2")
})
})
xit("Deletes rows and checks pagination", () => {
// Delete rows, removing second page from table
cy.get(".spectrum-Checkbox-input").check({ force: true })
cy.get(".popovers").within(() => {
cy.get(".spectrum-Button").click({ force: true })
cy.get(interact.SPECTRUM_CHECKBOX_INPUT).check({ force: true })
cy.get(interact.POPOVERS).within(() => {
cy.get(interact.SPECTRUM_BUTTON).click({ force: true })
})
cy.get(".spectrum-Dialog-grid").contains("Delete").click({ force: true })
cy.get(interact.SPECTRUM_DIALOG_GRID).contains("Delete").click({ force: true })
cy.wait(1000)
// Confirm table only has one page
cy.get(".spectrum-Pagination").within(() => {
cy.get(".spectrum-ActionButton").eq(1).should("not.be.enabled")
cy.get(interact.SPECTRUM_PAGINATION).within(() => {
cy.get(interact.SPECTRUM_ACTION_BUTTON).eq(1).should("not.be.enabled")
})
})
}
it("deletes a column", () => {
const columnName = "nameupdated"
cy.get(".title").click()
cy.get(".spectrum-Table-editIcon > use").click()
cy.get(interact.TABLE_TITLE).click()
cy.get(interact.SPECTRUM_TABLE_EDIT).click()
cy.contains("Delete").click()
cy.get('[data-cy="delete-column-confirm"]').type(columnName)
cy.get(interact.DELETE_COLUMN_CONFIRM).type(columnName)
cy.contains("Delete Column").click()
cy.contains("nameupdated").should("not.exist")
})
it("deletes a table", () => {
cy.get(".nav-item")
cy.get(interact.NAV_ITEM)
.contains("dog")
.parents(".nav-item")
.parents(interact.NAV_ITEM)
.first()
.within(() => {
cy.get(".actions .spectrum-Icon").click({ force: true })
cy.get(interact.ACTION_SPECTRUM_ICON).click({ force: true })
})
cy.get(".spectrum-Menu > :nth-child(2)").click()
cy.get('[data-cy="delete-table-confirm"]').type("dog")
cy.get(interact.SPECTRUM_MENU_CHILD2).click()
cy.get(interact.DELETE_TABLE_CONFIRM).type("dog")
cy.contains("Delete Table").click()
cy.contains("dog").should("not.exist")
})

75
packages/builder/cypress/integration/createUserAndRoles.spec.js
View file

@ -1,4 +1,5 @@
import filterTests from "../support/filterTests"
const interact = require('../support/interact')
filterTests(["smoke", "all"], () => {
context("Create a User and Assign Roles", () => {
@ -12,7 +13,7 @@ filterTests(["smoke", "all"], () => {
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.wait(1000)
cy.createUser("bbuser@test.com")
cy.get(".spectrum-Table").should("contain", "bbuser")
cy.get(interact.SPECTRUM_TABLE).should("contain", "bbuser")
})
it("should confirm there is No Access for a New User", () => {
@ -20,9 +21,9 @@ filterTests(["smoke", "all"], () => {
cy.contains("bbuser").click()
cy.wait(500)
// Get No Access table - Confirm it has apps in it
cy.get(".spectrum-Table").eq(1).should("not.contain", "No rows found")
cy.get(interact.SPECTRUM_TABLE).eq(1).should("not.contain", "No rows found")
// Get Configure Roles table - Confirm it has no apps
cy.get(".spectrum-Table").eq(0).contains("No rows found")
cy.get(interact.SPECTRUM_TABLE).eq(0).contains("No rows found")
})
if (Cypress.env("TEST_ENV")) {
@ -40,7 +41,7 @@ filterTests(["smoke", "all"], () => {
} else {
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.wait(500)
cy.get(`[data-cy="create-app-btn"]`).click({ force: true })
cy.get(interact.CREATE_APP_BUTTON).click({ force: true })
cy.createAppFromScratch(name)
}
}
@ -49,35 +50,35 @@ filterTests(["smoke", "all"], () => {
// Navigate back to the user
cy.visit(`${Cypress.config().baseUrl}/builder`)
cy.wait(500)
cy.get(".spectrum-SideNav").contains("Users").click()
cy.get(interact.SPECTRUM_SIDENAV).contains("Users").click()
cy.wait(500)
cy.get(".spectrum-Table").contains("bbuser").click()
cy.get(interact.SPECTRUM_TABLE).contains("bbuser").click()
cy.wait(1000)
for (let i = 0; i < 3; i++) {
cy.get(".spectrum-Table", { timeout: 3000})
cy.get(interact.SPECTRUM_TABLE, { timeout: 3000})
.eq(1)
.find(".spectrum-Table-row")
.find(interact.SPECTRUM_TABLE_ROW)
.eq(0)
.find(".spectrum-Table-cell")
.find(interact.SPECTRUM_TABLE_CELL)
.eq(0)
.click()
cy.wait(500)
cy.get(".spectrum-Dialog-grid")
cy.get(interact.SPECTRUM_DIALOG_GRID)
.contains("Choose an option")
.click()
.then(() => {
cy.wait(1000)
if (i == 0) {
cy.get(".spectrum-Menu").contains("Admin").click({ force: true })
cy.get(interact.SPECTRUM_MENU).contains("Admin").click({ force: true })
}
else if (i == 1) {
cy.get(".spectrum-Menu").contains("Power").click({ force: true })
cy.get(interact.SPECTRUM_MENU).contains("Power").click({ force: true })
}
else if (i == 2) {
cy.get(".spectrum-Menu").contains("Basic").click({ force: true })
cy.get(interact.SPECTRUM_MENU).contains("Basic").click({ force: true })
}
cy.wait(1000)
cy.get(".spectrum-Button")
cy.get(interact.SPECTRUM_BUTTON)
.contains("Update role")
.click({ force: true })
})
@ -85,7 +86,7 @@ filterTests(["smoke", "all"], () => {
}
// Confirm roles exist within Configure roles table
cy.wait(2000)
cy.get(".spectrum-Table")
cy.get(interact.SPECTRUM_TABLE)
.eq(0)
.within(assginedRoles => {
expect(assginedRoles).to.contain("Admin")
@ -96,60 +97,60 @@ filterTests(["smoke", "all"], () => {
it("should unassign role types", () => {
// Set each app within Configure roles table to 'No Access'
cy.get(".spectrum-Table")
cy.get(interact.SPECTRUM_TABLE)
.eq(0)
.find(".spectrum-Table-row")
.find(interact.SPECTRUM_TABLE_ROW)
.its("length")
.then(len => {
for (let i = 0; i < len; i++) {
cy.get(".spectrum-Table")
cy.get(interact.SPECTRUM_TABLE)
.eq(0)
.find(".spectrum-Table-row")
.find(interact.SPECTRUM_TABLE_ROW)
.eq(0)
.find(".spectrum-Table-cell")
.find(interact.SPECTRUM_TABLE_CELL)
.eq(0)
.click()
.then(() => {
cy.get(".spectrum-Picker").eq(1).click({ force: true })
cy.get(interact.SPECTRUM_PICKER).eq(1).click({ force: true })
cy.wait(500)
cy.get(".spectrum-Popover").contains("No Access").click()
cy.get(interact.SPECTRUM_POPOVER).contains("No Access").click()
})
cy.get(".spectrum-Button")
cy.get(interact.SPECTRUM_BUTTON)
.contains("Update role")
.click({ force: true })
cy.wait(1000)
}
})
// Confirm Configure roles table no longer has any apps in it
cy.get(".spectrum-Table").eq(0).contains("No rows found")
cy.get(interact.SPECTRUM_TABLE).eq(0).contains("No rows found")
})
}
it("should enable Developer access", () => {
// Enable Developer access
cy.get(".field")
cy.get(interact.FIELD)
.eq(4)
.within(() => {
cy.get(".spectrum-Switch-input").click({ force: true })
cy.get(interact.SPECTRUM_SWITCH_INPUT).click({ force: true })
})
// No Access table should now be empty
cy.get(".container")
cy.get(interact.CONTAINER)
.contains("No Access")
.parent()
.within(() => {
cy.get(".spectrum-Table").contains("No rows found")
cy.get(interact.SPECTRUM_TABLE).contains("No rows found")
})
// Each app within Configure roles should have Admin access
cy.get(".spectrum-Table")
cy.get(interact.SPECTRUM_TABLE)
.eq(0)
.find(".spectrum-Table-row")
.find(interact.SPECTRUM_TABLE_ROW)
.its("length")
.then(len => {
for (let i = 0; i < len; i++) {
cy.get(".spectrum-Table")
cy.get(interact.SPECTRUM_TABLE)
.eq(0)
.find(".spectrum-Table-row")
.find(interact.SPECTRUM_TABLE_ROW)
.eq(i)
.contains("Admin")
cy.wait(500)
@ -169,26 +170,26 @@ filterTests(["smoke", "all"], () => {
.contains("Configure roles")
.parent()
.within(() => {
cy.get(".spectrum-Table").contains("No rows found")
cy.get(interact.SPECTRUM_TABLE).contains("No rows found")
})
})
it("should delete a user", () => {
// Click Delete user button
cy.get(".spectrum-Button")
cy.get(interact.SPECTRUM_BUTTON)
.contains("Delete user")
.click({ force: true })
.then(() => {
// Confirm deletion within modal
cy.wait(500)
cy.get(".spectrum-Dialog-grid").within(() => {
cy.get(".spectrum-Button")
cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
cy.get(interact.SPECTRUM_BUTTON)
.contains("Delete user")
.click({ force: true })
cy.wait(4000)
})
})
cy.get(".spectrum-Table").should("not.have.text", "bbuser")
cy.get(interact.SPECTRUM_TABLE).should("not.have.text", "bbuser")
})
})
})

42
packages/builder/cypress/support/interact.js
View file

@ -62,3 +62,45 @@ export const GLOBESTRIKE = "svg[aria-label=GlobeStrike]"
export const GLOBE = "svg[aria-label=Globe]"
export const UNPUBLISH_MODAL = "[data-cy=unpublish-modal]"
export const CONFIRM_WRAP_BUTTON = ".confirm-wrap button"
//changeAppiconAndColour
export const APP_ROW_ACTION = ".app-row-actions-icon"
export const SPECTRUM_MENU = ".spectrum-Menu"
export const ICON_ITEM = ".icon-item"
export const FILL = ".fill"
export const COLOURSS = ".colors"
export const AREA_LABEL = "[aria-label]"
export const TITLE = ".title"
export const GRID = ".grid"
export const COLOUR = ".color"
//createAutomation
export const ADD_BUTTON_SPECTRUM = ".add-button .spectrum-Icon"
export const MODAL_INNER_WRAPPER = ".modal-inner-wrapper"
export const SPECTRUM_BUTTON_CTA = ".spectrum-Button--cta"
export const SPECTRUM_TEXTFIELD_INPUT = ".spectrum-Textfield-input"
//createTable
export const TABLE_TITLE_H1 = ".table-title h1"
export const TABLE_TITLE = ".title"
export const SPECTRUM_TABLE_EDIT = ".spectrum-Table-editIcon > use"
export const SPECTRUM_SWITCH_INPUT = ".spectrum-Switch-input"
export const SPECTRUM_CHECKBOX_INPUT = ".spectrum-Checkbox-input"
export const SPECTRUM_PAGINATION = ".spectrum-Pagination"
export const SPECTRUM_ACTION_BUTTON = ".spectrum-ActionButton"
export const SPECTRUM_BODY_SECOND = ".spectrum-Body--secondary"
export const POPOVERS = ".popovers"
export const SPECTRUM_DIALOG_GRID = ".spectrum-Dialog-grid"
export const DELETE_COLUMN_CONFIRM = '[data-cy="delete-column-confirm"]'
export const NAV_ITEM = ".nav-item"
export const ACTION_SPECTRUM_ICON = ".actions .spectrum-Icon"
export const SPECTRUM_MENU_CHILD2 = ".spectrum-Menu > :nth-child(2)"
export const DELETE_TABLE_CONFIRM = '[data-cy="delete-table-confirm"]'
//createUSerAndRoles
export const SPECTRUM_TABLE = ".spectrum-Table"
export const SPECTRUM_SIDENAV = ".spectrum-SideNav"
export const SPECTRUM_TABLE_ROW = ".spectrum-Table-row"
export const SPECTRUM_TABLE_CELL = ".spectrum-Table-cell"
export const FIELD = ".field"
export const CONTAINER = ".container"

10
packages/builder/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@budibase/builder",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"license": "GPL-3.0",
"private": true,
"scripts": {
@ -69,10 +69,10 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.0.192-alpha.5",
"@budibase/client": "^1.0.192-alpha.5",
"@budibase/frontend-core": "^1.0.192-alpha.5",
"@budibase/string-templates": "^1.0.192-alpha.5",
"@budibase/bbui": "^1.0.192-alpha.6",
"@budibase/client": "^1.0.192-alpha.6",
"@budibase/frontend-core": "^1.0.192-alpha.6",
"@budibase/string-templates": "^1.0.192-alpha.6",
"@sentry/browser": "5.19.1",
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/vars": "^3.0.1",

3
packages/builder/src/components/design/settings/controls/BarButtonList.svelte
View file

@ -10,8 +10,9 @@
{#each options as option}
<ActionButton
icon={option.barIcon}
quiet={option.value !== value}
quiet
on:click={() => onChange(option.value)}
selected={option.value === value}
/>
{/each}
</ActionGroup>

3
packages/builder/src/components/design/settings/controls/RoleSelect.svelte
View file

@ -5,15 +5,16 @@
export let value
export let error
export let placeholder = null
</script>
<Select
bind:value
on:change
options={$roles}
placeholder={null}
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColour={role => RoleUtils.getRoleColour(role._id)}
{placeholder}
{error}
/>

2
packages/builder/src/pages/builder/app/[application]/beta/_layout.svelte
View file

@ -2,7 +2,7 @@
import { Layout } from "@budibase/bbui"
</script>
<!-- routify:options index=5 -->
<!-- routify:options index=4 -->
<Layout gap="S" justifyItems="center">
<slot />
</Layout>

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

@ -18,7 +18,7 @@
}
</script>
<!-- routify:options index=2 -->
<!-- routify:options index=1 -->
<div class="root">
<div class="nav">
<Tabs {selected} on:select={selectFirstDatasource}>

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

@ -12,7 +12,7 @@
urlParam: "screenId",
stateKey: "selectedScreenId",
validate: id => $store.screens.some(screen => screen._id === id),
fallbackUrl: "../../",
fallbackUrl: "../../design",
store,
routify,
})

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

@ -43,7 +43,8 @@
extraButtonText="View details"
extraButtonAction={() => {}}
>
Custom layouts are being deprecated. They will be removed on [date].
Custom layouts are being deprecated. They will be removed in a future
release.
</Banner>
<Body size="S">
You can save the content of this layout by pressing the button below.

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

@ -11,6 +11,7 @@
import { dndzone } from "svelte-dnd-action"
import { generate } from "shortid"
import { store } from "builderStore"
import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
export let links = []
@ -75,6 +76,7 @@
placeholder="URL"
options={urlOptions}
/>
<RoleSelect bind:value={link.roleId} placeholder="Minimum role" />
<Icon
name="Close"
hoverable
@ -95,7 +97,7 @@
<style>
.container {
width: 100%;
max-width: 600px;
max-width: 800px;
margin: 0 auto;
}
.links {

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

@ -1,5 +1,4 @@
<script>
import { goto } from "@roxi/routify"
import { store } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import {
@ -66,7 +65,6 @@
const deleteScreen = async () => {
try {
await store.actions.screens.delete(screen)
$goto("../")
notifications.success("Deleted screen successfully.")
} catch (err) {
notifications.error("Error deleting screen")

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

@ -45,6 +45,12 @@
placeholder={null}
getOptionLabel={role => role.name}
getOptionValue={role => role._id}
getOptionColour={role => {
if (role?._id === "all") {
return null
}
return RoleUtils.getRoleColour(role._id)
}}
options={[{ name: "All screens", _id: "all" }, ...$roles]}
/>
</Layout>

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

@ -0,0 +1,2 @@
<!-- routify:options index=2 -->
<slot />

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

@ -1,4 +1,4 @@
<script>
import { redirect } from "@roxi/routify"
$redirect("./design")
$redirect("./data")
</script>

2
packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
View file

@ -1,2 +0,0 @@
<!-- routify:options index=4 -->
<slot />

6
packages/builder/src/pages/builder/app/[application]/settings/index.svelte
View file

@ -1,6 +0,0 @@
Settings
<!-- {#if $admin.cloud && $auth.user.account}
<UpgradeModal />
{/if}
<VersionModal /> -->

2
packages/cli/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@budibase/cli",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"description": "Budibase CLI, for developers, self hosting and migrations.",
"main": "src/index.js",
"bin": {

8
packages/client/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@budibase/client",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"license": "MPL-2.0",
"module": "dist/budibase-client.js",
"main": "dist/budibase-client.js",
@ -19,9 +19,9 @@
"dev:builder": "rollup -cw"
},
"dependencies": {
"@budibase/bbui": "^1.0.192-alpha.5",
"@budibase/frontend-core": "^1.0.192-alpha.5",
"@budibase/string-templates": "^1.0.192-alpha.5",
"@budibase/bbui": "^1.0.192-alpha.6",
"@budibase/frontend-core": "^1.0.192-alpha.6",
"@budibase/string-templates": "^1.0.192-alpha.6",
"@spectrum-css/button": "^3.0.3",
"@spectrum-css/card": "^3.0.3",
"@spectrum-css/divider": "^1.0.3",

12
packages/client/src/api/api.js
View file

@ -23,9 +23,9 @@ export const API = createAPIClient({
}
// Add role header
const role = get(devToolsStore).role
if (role) {
headers["x-budibase-role"] = role
const devToolsState = get(devToolsStore)
if (devToolsState.enabled && devToolsState.role) {
headers["x-budibase-role"] = devToolsState.role
}
},
@ -34,7 +34,11 @@ export const API = createAPIClient({
// Or we could check error.status and redirect to login on a 403 etc.
onError: error => {
const { status, method, url, message, handled } = error || {}
const ignoreErrorUrls = ["bbtel", "/api/global/self"]
const ignoreErrorUrls = [
"bbtel",
"/api/global/self",
"/api/tables/ta_users",
]
// Log any errors that we haven't manually handled
if (!handled) {

131
packages/client/src/components/ClientApp.svelte
View file

@ -42,10 +42,7 @@
let permissionError = false
// Determine if we should show devtools or not
$: isDevPreview =
$appStore.isDevApp &&
!$builderStore.inBuilder &&
!$routeStore.queryParams?.peek
$: showDevTools = $devToolsStore.enabled && !$routeStore.queryParams?.peek
// Handle no matching route
$: {
@ -59,6 +56,7 @@
$screenStore.screens,
$devToolsStore.role
)
permissionError = false
routeStore.actions.navigate(route)
} else {
// No screens likely means the user has no permissions to view this app
@ -120,41 +118,57 @@
dir="ltr"
class="spectrum spectrum--medium {$themeStore.theme}"
>
{#if permissionError}
<div class="error">
<Layout justifyItems="center" gap="S">
{@html ErrorSVG}
<Heading size="L">You don't have permission to use this app</Heading>
<Body size="S">Ask your administrator to grant you access</Body>
</Layout>
</div>
{:else if $screenStore.activeLayout}
<DeviceBindingsProvider>
<UserBindingsProvider>
<DeviceBindingsProvider>
<StateBindingsProvider>
<RowSelectionProvider>
<!-- Settings bar can be rendered outside of device preview -->
<!-- Key block needs to be outside the if statement or it breaks -->
{#key $builderStore.selectedComponentId}
{#if $builderStore.inBuilder}
<SettingsBar />
<StateBindingsProvider>
<RowSelectionProvider>
<!-- Settings bar can be rendered outside of device preview -->
<!-- Key block needs to be outside the if statement or it breaks -->
{#key $builderStore.selectedComponentId}
{#if $builderStore.inBuilder}
<SettingsBar />
{/if}
{/key}
<!-- Clip boundary for selection indicators -->
<div
id="clip-root"
class:preview={$builderStore.inBuilder}
class:tablet-preview={$builderStore.previewDevice === "tablet"}
class:mobile-preview={$builderStore.previewDevice === "mobile"}
>
<!-- Actual app -->
<div id="app-root">
{#if showDevTools}
<DevToolsHeader />
{/if}
{/key}
<!-- Clip boundary for selection indicators -->
<div
id="clip-root"
class:preview={$builderStore.inBuilder}
class:tablet-preview={$builderStore.previewDevice === "tablet"}
class:mobile-preview={$builderStore.previewDevice === "mobile"}
>
<!-- Actual app -->
<div id="app-root">
{#if isDevPreview}
<DevToolsHeader />
{/if}
<div id="app-body">
<div id="app-body">
{#if permissionError}
<div class="error">
<Layout justifyItems="center" gap="S">
{@html ErrorSVG}
<Heading size="L">
You don't have permission to use this app
</Heading>
<Body size="S">
Ask your administrator to grant you access
</Body>
</Layout>
</div>
{:else if !$screenStore.activeLayout}
<div class="error">
<Layout justifyItems="center" gap="S">
{@html ErrorSVG}
<Heading size="L">
Something went wrong rendering your app
</Heading>
<Body size="S">
Get in touch with support if this issue persists
</Body>
</Layout>
</div>
{:else}
<CustomThemeWrapper>
{#key $screenStore.activeLayout._id}
<Component
@ -178,29 +192,29 @@
<ConfirmationDisplay />
<PeekScreenDisplay />
</CustomThemeWrapper>
{/if}
{#if isDevPreview}
<DevTools />
{/if}
</div>
{#if showDevTools}
<DevTools />
{/if}
</div>
<!-- Preview and dev tools utilities -->
{#if $appStore.isDevApp}
<SelectionIndicator />
{/if}
{#if $builderStore.inBuilder || $devToolsStore.allowSelection}
<HoverIndicator />
{/if}
{#if $builderStore.inBuilder}
<DNDHandler />
{/if}
</div>
</RowSelectionProvider>
</StateBindingsProvider>
</DeviceBindingsProvider>
<!-- Preview and dev tools utilities -->
{#if $appStore.isDevApp}
<SelectionIndicator />
{/if}
{#if $builderStore.inBuilder || $devToolsStore.allowSelection}
<HoverIndicator />
{/if}
{#if $builderStore.inBuilder}
<DNDHandler />
{/if}
</div>
</RowSelectionProvider>
</StateBindingsProvider>
</UserBindingsProvider>
{/if}
</DeviceBindingsProvider>
</div>
<KeyboardManager />
{/if}
@ -249,7 +263,6 @@
}
.error {
position: absolute;
width: 100%;
height: 100%;
display: grid;
@ -258,23 +271,19 @@
text-align: center;
padding: 20px;
}
.error :global(svg) {
fill: var(--spectrum-global-color-gray-500);
width: 80px;
height: 80px;
}
.error :global(h1),
.error :global(p) {
color: var(--spectrum-global-color-gray-800);
}
.error :global(p) {
font-style: italic;
margin-top: -0.5em;
}
.error :global(h1) {
font-weight: 400;
}
@ -284,12 +293,10 @@
#clip-root.preview {
padding: 2px;
}
#clip-root.tablet-preview {
width: calc(1024px + 6px);
height: calc(768px + 6px);
}
#clip-root.mobile-preview {
width: calc(390px + 6px);
height: calc(844px + 6px);

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

@ -2,10 +2,12 @@
import { getContext, setContext } from "svelte"
import { writable } from "svelte/store"
import { Heading, Icon } from "@budibase/bbui"
import { FieldTypes } from "../../constants"
import { FieldTypes } from "constants"
import active from "svelte-spa-router/active"
import { RoleUtils } from "@budibase/frontend-core"
const { routeStore, styleable, linkable, builderStore } = getContext("sdk")
const sdk = getContext("sdk")
const { routeStore, styleable, linkable, builderStore, currentRole } = sdk
const component = getContext("component")
const context = getContext("context")
@ -50,7 +52,7 @@
})
setContext("layout", store)
$: validLinks = links?.filter(link => link.text && link.url) || []
$: validLinks = getValidLinks(links, $currentRole)
$: typeClass = NavigationClasses[navigation] || NavigationClasses.None
$: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large
$: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large
@ -79,6 +81,17 @@
}
}
const getValidLinks = (allLinks, role) => {
// Strip links missing required info
let validLinks = (allLinks || []).filter(link => link.text && link.url)
// Filter to only links allowed by the current role
const priority = RoleUtils.getRolePriority(role)
return validLinks.filter(link => {
return !link.roleId || RoleUtils.getRolePriority(link.roleId) <= priority
})
}
const isInternal = url => {
return url.startsWith("/")
}

4
packages/client/src/components/context/DeviceBindingsProvider.svelte
View file

@ -21,11 +21,11 @@
}
onMount(() => {
resizeObserver.observe(document.getElementById("app-root"))
resizeObserver.observe(document.getElementById("spectrum-root"))
})
onDestroy(() => {
resizeObserver.unobserve(document.getElementById("app-root"))
resizeObserver.unobserve(document.getElementById("spectrum-root"))
})
</script>

8
packages/client/src/components/context/UserBindingsProvider.svelte
View file

@ -1,6 +1,6 @@
<script>
import Provider from "./Provider.svelte"
import { authStore, devToolsStore } from "stores"
import { authStore, currentRole } from "stores"
import { ActionTypes } from "constants"
import { Constants } from "@budibase/frontend-core"
@ -17,10 +17,6 @@
]
</script>
<Provider
key="user"
data={{ ...$authStore, roleId: $devToolsStore.role || $authStore?.roleId }}
{actions}
>
<Provider key="user" data={{ ...$authStore, roleId: $currentRole }} {actions}>
<slot />
</Provider>

10
packages/client/src/index.js
View file

@ -1,6 +1,7 @@
import ClientApp from "./components/ClientApp.svelte"
import { builderStore, appStore } from "./stores"
import { builderStore, appStore, devToolsStore } from "./stores"
import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
import { get } from "svelte/store"
// Initialise spectrum icons
loadSpectrumIcons()
@ -23,7 +24,12 @@ const loadBudibase = () => {
// Set app ID - this window flag is set by both the preview and the real
// server rendered app HTML
appStore.actions.setAppID(window["##BUDIBASE_APP_ID##"])
appStore.actions.setAppId(window["##BUDIBASE_APP_ID##"])
// Enable dev tools or not. We need to be using a dev app and not inside
// the builder preview to enable them.
const enableDevTools = !get(builderStore).inBuilder && get(appStore).isDevApp
devToolsStore.actions.setEnabled(enableDevTools)
// Create app if one hasn't been created yet
if (!app) {

2
packages/client/src/sdk.js
View file

@ -8,6 +8,7 @@ import {
uploadStore,
rowSelectionStore,
componentStore,
currentRole,
} from "stores"
import { styleable } from "utils/styleable"
import { linkable } from "utils/linkable"
@ -26,6 +27,7 @@ export default {
builderStore,
uploadStore,
componentStore,
currentRole,
styleable,
linkable,
getAction,

15
packages/client/src/stores/app.js
View file

@ -1,5 +1,5 @@
import { API } from "api"
import { get, writable } from "svelte/store"
import { get, writable, derived } from "svelte/store"
const initialState = {
appId: null,
@ -9,6 +9,12 @@ const initialState = {
const createAppStore = () => {
const store = writable(initialState)
const derivedStore = derived(store, $store => {
return {
...$store,
isDevApp: $store.appId?.startsWith("app_dev"),
}
})
// Fetches the app definition including screens, layouts and theme
const fetchAppDefinition = async () => {
@ -22,7 +28,6 @@ const createAppStore = () => {
...initialState,
...appDefinition,
appId: appDefinition?.application?.appId,
isDevApp: appId.startsWith("app_dev"),
})
} catch (error) {
store.set(initialState)
@ -30,7 +35,7 @@ const createAppStore = () => {
}
// Sets the initial app ID
const setAppID = id => {
const setAppId = id => {
store.update(state => {
if (state) {
state.appId = id
@ -42,8 +47,8 @@ const createAppStore = () => {
}
return {
subscribe: store.subscribe,
actions: { setAppID, fetchAppDefinition },
subscribe: derivedStore.subscribe,
actions: { setAppId, fetchAppDefinition },
}
}

20
packages/client/src/stores/devTools.js
View file

@ -1,23 +1,29 @@
import { get } from "svelte/store"
import { createLocalStorageStore } from "@budibase/frontend-core"
import { appStore } from "./app"
import { initialise } from "./initialise"
import { authStore } from "./auth"
import { API } from "../api"
const initialState = {
enabled: false,
visible: false,
allowSelection: false,
role: null,
}
const createDevToolStore = () => {
const localStorageKey = `${get(appStore).appId}.devTools`
const store = createLocalStorageStore(localStorageKey, initialState)
const store = createLocalStorageStore("bb-devtools", initialState)
const setEnabled = enabled => {
store.update(state => ({
...state,
enabled,
}))
}
const setVisible = visible => {
store.update(state => ({
...state,
visible: visible,
visible,
}))
}
@ -33,14 +39,14 @@ const createDevToolStore = () => {
...state,
role: role === "self" ? null : role,
}))
// location.reload()
API.invalidateCache()
await authStore.actions.fetchUser()
await initialise()
}
return {
subscribe: store.subscribe,
actions: { setVisible, setAllowSelection, changeRole },
actions: { setEnabled, setVisible, setAllowSelection, changeRole },
}
}

13
packages/client/src/stores/index.js
View file

@ -1,3 +1,7 @@
import { derived } from "svelte/store"
import { devToolsStore } from "./devTools.js"
import { authStore } from "./auth.js"
export { authStore } from "./auth"
export { appStore } from "./app"
export { notificationStore } from "./notification"
@ -13,8 +17,17 @@ export { devToolsStore } from "./devTools"
export { componentStore } from "./components"
export { uploadStore } from "./uploads.js"
export { rowSelectionStore } from "./rowSelection.js"
// Context stores are layered and duplicated, so it is not a singleton
export { createContextStore } from "./context"
// Initialises an app by loading screens and routes
export { initialise } from "./initialise"
// Derive the current role of the logged-in user
export const currentRole = derived(
[devToolsStore, authStore],
([$devToolsStore, $authStore]) => {
return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
}
)

4
packages/frontend-core/package.json
View file

@ -1,12 +1,12 @@
{
"name": "@budibase/frontend-core",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"description": "Budibase frontend core libraries used in builder and client",
"author": "Budibase",
"license": "MPL-2.0",
"svelte": "src/index.js",
"dependencies": {
"@budibase/bbui": "^1.0.192-alpha.5",
"@budibase/bbui": "^1.0.192-alpha.6",
"lodash": "^4.17.21",
"svelte": "^3.46.2"
}

8
packages/frontend-core/src/api/index.js
View file

@ -57,6 +57,7 @@ export const createAPIClient = config => {
...defaultAPIClientConfig,
...config,
}
let cache = {}
// Generates an error object from an API response
const makeErrorFromResponse = async (response, method) => {
@ -139,6 +140,7 @@ export const createAPIClient = config => {
credentials: "same-origin",
})
} catch (error) {
delete cache[url]
throw makeError("Failed to send request", { url, method })
}
@ -151,9 +153,11 @@ export const createAPIClient = config => {
return await response.json()
}
} catch (error) {
delete cache[url]
return null
}
} else {
delete cache[url]
throw await makeErrorFromResponse(response, method)
}
}
@ -161,7 +165,6 @@ export const createAPIClient = config => {
// Performs an API call to the server and caches the response.
// Future invocation for this URL will return the cached result instead of
// hitting the server again.
let cache = {}
const makeCachedApiCall = async params => {
const identifier = params.url
if (!identifier) {
@ -206,6 +209,9 @@ export const createAPIClient = config => {
error: message => {
throw makeError(message)
},
invalidateCache: () => {
cache = {}
},
}
// Attach all endpoints

10
packages/server/package.json
View file

@ -1,7 +1,7 @@
{
"name": "@budibase/server",
"email": "hi@budibase.com",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"description": "Budibase Web Server",
"main": "src/index.ts",
"repository": {
@ -70,10 +70,10 @@
"license": "GPL-3.0",
"dependencies": {
"@apidevtools/swagger-parser": "^10.0.3",
"@budibase/backend-core": "^1.0.192-alpha.5",
"@budibase/client": "^1.0.192-alpha.5",
"@budibase/pro": "1.0.192-alpha.5",
"@budibase/string-templates": "^1.0.192-alpha.5",
"@budibase/backend-core": "^1.0.192-alpha.6",
"@budibase/client": "^1.0.192-alpha.6",
"@budibase/pro": "1.0.192-alpha.6",
"@budibase/string-templates": "^1.0.192-alpha.6",
"@bull-board/api": "^3.7.0",
"@bull-board/koa": "^3.7.0",
"@elastic/elasticsearch": "7.10.0",

4
packages/server/src/middleware/currentapp.js
View file

@ -74,6 +74,10 @@ module.exports = async (ctx, next) => {
try {
await getRole(roleHeader)
roleId = roleHeader
// Delete admin and builder flags so that the specified role is honoured
delete ctx.user.builder
delete ctx.user.admin
} catch (error) {
// Swallow error and do nothing
}

2
packages/string-templates/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@budibase/string-templates",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"description": "Handlebars wrapper for Budibase templating.",
"main": "src/index.cjs",
"module": "dist/bundle.mjs",

8
packages/worker/package.json
View file

@ -1,7 +1,7 @@
{
"name": "@budibase/worker",
"email": "hi@budibase.com",
"version": "1.0.192-alpha.5",
"version": "1.0.192-alpha.6",
"description": "Budibase background service",
"main": "src/index.ts",
"repository": {
@ -32,9 +32,9 @@
"author": "Budibase",
"license": "GPL-3.0",
"dependencies": {
"@budibase/backend-core": "^1.0.192-alpha.5",
"@budibase/pro": "1.0.192-alpha.5",
"@budibase/string-templates": "^1.0.192-alpha.5",
"@budibase/backend-core": "^1.0.192-alpha.6",
"@budibase/pro": "1.0.192-alpha.6",
"@budibase/string-templates": "^1.0.192-alpha.6",
"@koa/router": "^8.0.0",
"@sentry/node": "6.17.7",
"@techpass/passport-openidconnect": "^0.3.0",