diff --git a/lerna.json b/lerna.json index cc0b07a99e..256258d6b1 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "0.3.8", + "version": "0.4.2", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 1a5270e33b..e92034c120 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -115,7 +115,7 @@ Cypress.Commands.add("createUser", (email, password, role) => { // Create User cy.contains("Users").click() - cy.contains("Create New Row").click() + cy.contains("Create New User").click() cy.get(".modal").within(() => { cy.get("input") diff --git a/packages/builder/package.json b/packages/builder/package.json index 542c35205e..9754c9173b 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/builder", - "version": "0.3.8", + "version": "0.4.2", "license": "AGPL-3.0", "private": true, "scripts": { @@ -63,8 +63,8 @@ } }, "dependencies": { - "@budibase/bbui": "^1.52.2", - "@budibase/client": "^0.3.8", + "@budibase/bbui": "^1.52.4", + "@budibase/client": "^0.4.2", "@budibase/colorpicker": "^1.0.1", "@budibase/svelte-ag-grid": "^0.0.16", "@fortawesome/fontawesome-free": "^5.14.0", diff --git a/packages/builder/src/analytics.js b/packages/builder/src/analytics.js index a7166f00f6..f59d71ac30 100644 --- a/packages/builder/src/analytics.js +++ b/packages/builder/src/analytics.js @@ -39,19 +39,22 @@ function identify(id) { async function identifyByApiKey(apiKey) { if (!analyticsEnabled) return true - const response = await fetch( - `https://03gaine137.execute-api.eu-west-1.amazonaws.com/prod/account/id?api_key=${apiKey.trim()}` - ) + try { + const response = await fetch( + `https://03gaine137.execute-api.eu-west-1.amazonaws.com/prod/account/id?api_key=${apiKey.trim()}` + ) + if (response.status === 200) { + const id = await response.json() - if (response.status === 200) { - const id = await response.json() + await api.put("/api/keys/userId", { value: id }) + identify(id) + return true + } - await api.put("/api/keys/userId", { value: id }) - identify(id) - return true + return false + } catch (error) { + console.log(error) } - - return false } function captureException(err) { diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js index 8b6666f3ab..ca2864aeaf 100644 --- a/packages/builder/src/builderStore/index.js +++ b/packages/builder/src/builderStore/index.js @@ -4,9 +4,9 @@ import { getAutomationStore } from "./store/automation" import { getHostingStore } from "./store/hosting" import { getThemeStore } from "./store/theme" -import { derived } from "svelte/store" +import { derived, writable } from "svelte/store" import analytics from "analytics" -import { LAYOUT_NAMES } from "../constants" +import { FrontendTypes, LAYOUT_NAMES } from "../constants" import { makePropsSafe } from "components/userInterface/assetParsing/createProps" export const store = getFrontendStore() @@ -16,18 +16,12 @@ export const themeStore = getThemeStore() export const hostingStore = getHostingStore() 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 - + const type = $store.currentFrontEndType + if (type === FrontendTypes.SCREEN) { + return $store.screens.find(screen => screen._id === $store.selectedScreenId) + } else if (type === FrontendTypes.LAYOUT) { + return $store.layouts.find(layout => layout._id === $store.selectedLayoutId) + } return null }) @@ -62,8 +56,14 @@ export const selectedComponent = derived( } ) -export const currentAssetName = derived(store, () => { - return currentAsset.name +export const currentAssetId = derived(store, $store => { + return $store.currentFrontEndType === FrontendTypes.SCREEN + ? $store.selectedScreenId + : $store.selectedLayoutId +}) + +export const currentAssetName = derived(currentAsset, $currentAsset => { + return $currentAsset?.name }) // leave this as before for consistency @@ -77,6 +77,8 @@ export const mainLayout = derived(store, $store => { ) }) +export const selectedAccessRole = writable("BASIC") + export const initialise = async () => { try { await analytics.activate() diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 3cdabf1ed5..5592488590 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -6,6 +6,7 @@ const INITIAL_BACKEND_UI_STATE = { tables: [], views: [], users: [], + roles: [], selectedDatabase: {}, selectedTable: {}, draftTable: {}, @@ -177,6 +178,26 @@ export const getBackendUiStore = () => { return state }), }, + roles: { + fetch: async () => { + const response = await api.get("/api/roles") + const roles = await response.json() + store.update(state => { + state.roles = roles + return state + }) + }, + delete: async role => { + const response = await api.delete(`/api/roles/${role._id}/${role._rev}`) + await store.actions.roles.fetch() + return response + }, + save: async role => { + const response = await api.post("/api/roles", role) + await store.actions.roles.fetch() + return response + }, + }, } return store diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index dc168ac97c..a195489aa1 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -3,7 +3,6 @@ import { cloneDeep } from "lodash/fp" import { createProps, getBuiltin, - makePropsSafe, } from "components/userInterface/assetParsing/createProps" import { allScreens, @@ -12,6 +11,7 @@ import { currentAsset, mainLayout, selectedComponent, + selectedAccessRole, } from "builderStore" import { fetchComponentLibDefinitions } from "../loadComponentLibraries" import api from "../api" @@ -33,7 +33,8 @@ const INITIAL_FRONTEND_STATE = { screens: [], components: [], currentFrontEndType: "none", - currentAssetId: "", + selectedScreenId: "", + selectedLayoutId: "", selectedComponentId: "", errors: [], hasAppPackage: false, @@ -85,25 +86,31 @@ export const getFrontendStore = () => { }, }, screens: { - select: async screenId => { + select: screenId => { store.update(state => { - const screen = get(allScreens).find(screen => screen._id === screenId) + let screens = get(allScreens) + let screen = + screens.find(screen => screen._id === screenId) || screens[0] if (!screen) return state + // Update role to the screen's role setting so that it will always + // be visible + selectedAccessRole.set(screen.routing.roleId) + state.currentFrontEndType = FrontendTypes.SCREEN - state.currentAssetId = screenId + state.selectedScreenId = screen._id state.currentView = "detail" state.selectedComponentId = screen.props?._id - return state }) }, create: async screen => { screen = await store.actions.screens.save(screen) store.update(state => { - state.currentAssetId = screen._id + state.selectedScreenId = screen._id state.selectedComponentId = screen.props._id state.currentFrontEndType = FrontendTypes.SCREEN + selectedAccessRole.set(screen.routing.roleId) return state }) return screen @@ -112,6 +119,7 @@ export const getFrontendStore = () => { const creatingNewScreen = screen._id === undefined const response = await api.post(`/api/screens`, screen) screen = await response.json() + await store.actions.routing.fetch() store.update(state => { const foundScreen = state.screens.findIndex( @@ -121,17 +129,13 @@ export const getFrontendStore = () => { state.screens.splice(foundScreen, 1) } state.screens.push(screen) - - if (creatingNewScreen) { - const safeProps = makePropsSafe( - state.components[screen.props._component], - screen.props - ) - state.selectedComponentId = safeProps._id - screen.props = safeProps - } return state }) + + if (creatingNewScreen) { + store.actions.screens.select(screen._id) + } + return screen }, delete: async screens => { @@ -148,8 +152,8 @@ export const getFrontendStore = () => { `/api/screens/${screenToDelete._id}/${screenToDelete._rev}` ) ) - if (screenToDelete._id === state.currentAssetId) { - state.currentAssetId = "" + if (screenToDelete._id === state.selectedScreenId) { + state.selectedScreenId = null } } return state @@ -172,39 +176,42 @@ export const getFrontendStore = () => { layouts: { select: layoutId => { store.update(state => { - const layout = store.actions.layouts.find(layoutId) + const layout = + store.actions.layouts.find(layoutId) || get(store).layouts[0] + if (!layout) return state.currentFrontEndType = FrontendTypes.LAYOUT state.currentView = "detail" - - state.currentAssetId = layout._id + state.selectedLayoutId = layout._id state.selectedComponentId = layout.props?._id - return state }) }, save: async layout => { const layoutToSave = cloneDeep(layout) - + const creatingNewLayout = layoutToSave._id === undefined const response = await api.post(`/api/layouts`, layoutToSave) - - const json = await response.json() + const savedLayout = await response.json() store.update(state => { const layoutIdx = state.layouts.findIndex( - stateLayout => stateLayout._id === json._id + stateLayout => stateLayout._id === savedLayout._id ) - if (layoutIdx >= 0) { // update existing layout - state.layouts.splice(layoutIdx, 1, json) + state.layouts.splice(layoutIdx, 1, savedLayout) } else { // save new layout - state.layouts.push(json) + state.layouts.push(savedLayout) } - - state.currentAssetId = json._id return state }) + + // Select layout if creating a new one + if (creatingNewLayout) { + store.actions.layouts.select(savedLayout._id) + } + + return savedLayout }, find: layoutId => { if (!layoutId) { @@ -217,16 +224,17 @@ export const getFrontendStore = () => { 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.layouts = state.layouts.filter( layout => layout._id !== layoutToDelete._id ) + if (layoutToDelete._id === state.selectedLayoutId) { + state.selectedLayoutId = get(mainLayout)._id + } return state }) }, @@ -455,7 +463,6 @@ export const getFrontendStore = () => { // Save layout nav._children = [...nav._children, newLink] - state.currentAssetId = layout._id promises.push(store.actions.layouts.save(layout)) } return state diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 5ff7925c5f..436a3b4dee 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -44,6 +44,7 @@ {#if schema && Object.keys(schema).length > 0} diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index e43a4f7408..1e6c53bd11 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -82,7 +82,7 @@ if (!allowEditing) { return false } - return !(isUsersTable && ["email", "roleId"].indexOf(key) !== -1) + return !(isUsersTable && ["email", "roleId"].includes(key)) } Object.entries(schema || {}).forEach(([key, value]) => { diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte index dfd8e6f4ac..19975ac1a1 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte @@ -3,6 +3,7 @@ import CreateEditRow from "../modals/CreateEditRow.svelte" export let modalContentComponent = CreateEditRow + export let title = "Create New Row" let modal @@ -10,7 +11,7 @@
diff --git a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte index c6f6cbbcdf..a45f376a3e 100644 --- a/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte +++ b/packages/builder/src/components/backend/DataTable/cells/RoleCell.svelte @@ -1,42 +1,10 @@ - - -
{roleName}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte index 050c7ce200..1bff069b95 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRow.svelte @@ -45,3 +45,9 @@ {/each} + + diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte index bde6514f8f..aac515e74b 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditUser.svelte @@ -1,18 +1,14 @@ - {#if rolesLoaded} - - {/if} + {#each customSchemaKeys as [key, meta]} {/each} diff --git a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte index 627112d87c..3b97f6d61b 100644 --- a/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/EditRoles.svelte @@ -4,27 +4,26 @@ import api from "builderStore/api" import { notifier } from "builderStore/store/notifications" import ErrorsBox from "components/common/ErrorsBox.svelte" + import { backendUiStore } from "builderStore" - let roles = [] let permissions = [] let selectedRole = {} let errors = [] $: selectedRoleId = selectedRole._id - $: otherRoles = roles.filter(role => role._id !== selectedRoleId) + $: otherRoles = $backendUiStore.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 fetchPermissions = async () => { const permissionsResponse = await api.get("/api/permissions") permissions = await permissionsResponse.json() } - // Changes the seleced role + // Changes the selected role const changeRole = event => { const id = event?.target?.value - const role = roles.find(role => role._id === id) + const role = $backendUiStore.roles.find(role => role._id === id) if (role) { selectedRole = { ...role, @@ -61,7 +60,7 @@ } // Save/create the role - const response = await api.post("/api/roles", selectedRole) + const response = await backendUiStore.actions.roles.save(selectedRole) if (response.status === 200) { notifier.success("Role saved successfully.") } else { @@ -72,11 +71,8 @@ // Deletes the selected role const deleteRole = async () => { - const response = await api.delete( - `/api/roles/${selectedRole._id}/${selectedRole._rev}` - ) + const response = await backendUiStore.actions.roles.delete(selectedRole) if (response.status === 200) { - await fetchRoles() changeRole() notifier.success("Role deleted successfully.") } else { @@ -84,7 +80,7 @@ } } - onMount(fetchRoles) + onMount(fetchPermissions) - {#each roles as role} + {#each $backendUiStore.roles as role} {/each} diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte index d328df4b40..810d7960f5 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte @@ -82,7 +82,7 @@ files = fileArray validateCSV() }) - reader.readAsBinaryString(fileArray[0]) + reader.readAsText(fileArray[0]) } async function omitColumn(columnName) { diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index 5b1ede4394..8eca07b1b0 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -61,7 +61,7 @@ } .nav-item:hover, .nav-item.selected { - border-radius: var(--border-radius-m); + border-radius: var(--border-radius-s); } .content { diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte index 04d4672d50..809917f27d 100644 --- a/packages/builder/src/components/settings/tabs/General.svelte +++ b/packages/builder/src/components/settings/tabs/General.svelte @@ -4,7 +4,7 @@ import api from "builderStore/api" async function updateApplication(data) { - const response = await api.put(`/api/${$store.appId}`, data) + const response = await api.put(`/api/applications/${$store.appId}`, data) const app = await response.json() store.update(state => { state = { diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index ccb0153e45..0c0fa6156f 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -84,6 +84,7 @@ overflow: hidden; margin: auto; height: 100%; + background-color: white; } .component-container iframe { border: 0; diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte index 485af84e74..320a81f00d 100644 --- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte +++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ComponentTree.svelte @@ -1,6 +1,6 @@
- {#each paths as path} - + {#each paths as path, idx} + 0} {path} route={routes[path]} /> {/each} + + {#if !paths.length} +
+ There aren't any screens configured with this access role. +
+ {/if}
+ + diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 260eff72c6..60f40be6e2 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -1,6 +1,11 @@ diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index 23d2e6cf1a..698476dcd8 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -1,13 +1,19 @@ -{#if $store.currentAssetId === layout._id && layout.props?._children} +{#if $store.selectedLayoutId === layout._id && layout.props?._children} import { goto } from "@sveltech/routify" - import api from "builderStore/api" import { notifier } from "builderStore/store/notifications" - import { store, backendUiStore, allScreens } from "builderStore" + import { store } 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}`) + const layout = await store.actions.layouts.save({ name }) + $goto(`./${layout._id}`) notifier.success(`Layout ${name} created successfully`) } catch (err) { notifier.danger(`Error creating layout ${name}.`) diff --git a/packages/builder/src/components/userInterface/NewScreenModal.svelte b/packages/builder/src/components/userInterface/NewScreenModal.svelte index 05a18adb7f..db9181b1bd 100644 --- a/packages/builder/src/components/userInterface/NewScreenModal.svelte +++ b/packages/builder/src/components/userInterface/NewScreenModal.svelte @@ -1,17 +1,11 @@ + + diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index f90e071b08..eee50d8cf6 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -4,6 +4,7 @@ import { FrontendTypes } from "constants" import PropertyControl from "./PropertyControl.svelte" import LayoutSelect from "./LayoutSelect.svelte" + import RoleSelect from "./RoleSelect.svelte" import Input from "./PropertyPanelControls/Input.svelte" import { excludeProps } from "./propertyCategories.js" import { store, allScreens, currentAsset } from "builderStore" @@ -36,8 +37,8 @@ const screenDefinition = [ { key: "description", label: "Description", control: Input }, { key: "routing.route", label: "Route", control: Input }, + { key: "routing.roleId", label: "Access", control: RoleSelect }, { key: "layoutId", label: "Layout", control: LayoutSelect }, - { key: "routing.roleId", label: "Role", control: Input }, ] const layoutDefinition = [{ key: "title", label: "Title", control: Input }] diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte index a6f7e86454..74367c794d 100644 --- a/packages/builder/src/pages/[application]/_reset.svelte +++ b/packages/builder/src/pages/[application]/_reset.svelte @@ -20,6 +20,7 @@ backendUiStore.actions.reset() await store.actions.initialise(pkg) await automationStore.actions.fetch() + await backendUiStore.actions.roles.fetch() return pkg } else { throw new Error(pkg) @@ -217,5 +218,6 @@ position: absolute; bottom: var(--spacing-m); left: var(--spacing-m); + z-index: 1; } diff --git a/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte index ff1a94222f..eb266293d9 100644 --- a/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte +++ b/packages/builder/src/pages/[application]/design/[assetType]/[asset]/_layout.svelte @@ -26,11 +26,12 @@ // 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 + const assetChildren = + assetList.find( + asset => + asset._id === $params.asset || + asset._id === decodeURIComponent($params.asset) + )?.props._children ?? [] findComponent(componentIds, assetChildren) } // } diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte index f95760ec53..b797a18dc4 100644 --- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte @@ -1,11 +1,10 @@ diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock index 7f650a83bc..f2f7363669 100644 --- a/packages/builder/yarn.lock +++ b/packages/builder/yarn.lock @@ -842,10 +842,10 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@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== +"@budibase/bbui@^1.52.4": + version "1.52.4" + resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.4.tgz#ae3c17e1f49f14e65831703958bcddc6e64afd24" + integrity sha512-/wiv5dSyvXLgy2/zGEslnCsjwE8qqng1D8k5ScSOPEyMab8tzzd1XxfZAN9rp84zIMgAXeH6s5a4j4riR+jVkg== dependencies: markdown-it "^12.0.2" quill "^1.3.7" diff --git a/packages/client/package.json b/packages/client/package.json index 2670d029c5..bf24a6e86c 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -1,6 +1,6 @@ { "name": "@budibase/client", - "version": "0.3.8", + "version": "0.4.2", "license": "MPL-2.0", "main": "dist/budibase-client.js", "module": "dist/budibase-client.js", @@ -15,7 +15,7 @@ "svelte-spa-router": "^3.0.5" }, "devDependencies": { - "@budibase/standard-components": "^0.3.8", + "@budibase/standard-components": "^0.4.2", "@rollup/plugin-commonjs": "^16.0.0", "@rollup/plugin-node-resolve": "^10.0.0", "fs-extra": "^8.1.0", @@ -23,8 +23,8 @@ "rollup": "^2.33.2", "rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-globals": "^1.4.0", - "rollup-plugin-svelte": "^6.1.1", "rollup-plugin-node-resolve": "^5.2.0", + "rollup-plugin-svelte": "^6.1.1", "rollup-plugin-terser": "^4.0.4", "svelte": "^3.30.0", "svelte-jester": "^1.0.6" diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte index 75061ac327..a7a972a435 100644 --- a/packages/client/src/components/ClientApp.svelte +++ b/packages/client/src/components/ClientApp.svelte @@ -3,7 +3,7 @@ import { setContext, onMount } from "svelte" import Component from "./Component.svelte" import SDK from "../sdk" - import { createDataStore, routeStore, screenStore } from "../store" + import { createDataStore, initialise, screenStore } from "../store" // Provide contexts setContext("sdk", SDK) @@ -14,13 +14,11 @@ // Load app config onMount(async () => { - await routeStore.actions.fetchRoutes() - await screenStore.actions.fetchScreens() + await initialise() loaded = true }) {#if loaded && $screenStore.activeLayout} - {/if} diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte index 5684b189eb..3c2d71c422 100644 --- a/packages/client/src/components/Router.svelte +++ b/packages/client/src/components/Router.svelte @@ -7,7 +7,15 @@ const { styleable } = getContext("sdk") const component = getContext("component") - $: routerConfig = getRouterConfig($routeStore.routes) + // Only wrap this as an array to take advantage of svelte keying, + // to ensure the svelte-spa-router is fully remounted when route config + // changes + $: configs = [ + { + routes: getRouterConfig($routeStore.routes), + id: $routeStore.routeSessionId, + }, + ] const getRouterConfig = routes => { let config = {} @@ -25,11 +33,11 @@ } -{#if routerConfig} +{#each configs as config (config.id)}
- +
-{/if} +{/each}