fix layout bugs, some tidy up

packages/builder/src/builderStore/store/frontend.js

@@ -92,12 +92,7 @@ export const getFrontendStore = () => {
           state.currentView = "detail"
 
           promise = store.actions.screens.regenerateCss(screen)
-          const safeProps = makePropsSafe(
+          state.selectedComponentId = screen.props._id
-            state.components[screen.props._component],
-            screen.props
-          )
-          screen.props = safeProps
-          state.selectedComponentId = safeProps._id
           return state
         })
         await promise
@@ -105,8 +100,8 @@ export const getFrontendStore = () => {
       create: async screen => {
         screen = await store.actions.screens.save(screen)
         store.update(state => {
-          state.selectedComponentId = screen._id
+          state.currentAssetId = screen._id
-          state.selectedAssetId = screen._id
+          state.selectedComponentId = screen.props._id
           state.currentFrontEndType = FrontendTypes.SCREEN
           return state
         })
@@ -169,9 +164,10 @@ export const getFrontendStore = () => {
       },
     },
     preview: {
-      saveSelected: async asset => {
+      saveSelected: async () => {
         const state = get(store)
-        const selectedAsset = asset || get(currentAsset)
+        const selectedAsset = get(currentAsset)
+
         if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
           await store.actions.screens.save(selectedAsset)
         } else {
@@ -188,7 +184,7 @@ export const getFrontendStore = () => {
           state.currentView = "detail"
 
           state.currentAssetId = layout._id
-          state.selectedComponentId = layout._id
+          state.selectedComponentId = layout.props._id
 
           return state
         })
@@ -208,25 +204,21 @@ export const getFrontendStore = () => {
 
         const json = await response.json()
 
-        if (!json.ok) throw new Error("Error updating layout")
-
         store.update(state => {
-          layoutToSave._rev = json.rev
-          layoutToSave._id = json.id
-
           const layoutIdx = state.layouts.findIndex(
-            stateLayout => stateLayout._id === layoutToSave._id
+            stateLayout => stateLayout._id === json._id
           )
 
           if (layoutIdx >= 0) {
             // update existing layout
-            state.layouts.splice(layoutIdx, 1, layoutToSave)
+            state.layouts.splice(layoutIdx, 1, json)
           } else {
             // save new layout
-            state.layouts.push(layoutToSave)
+            state.layouts.push(json)
           }
 
-          state.selectedComponentId = layoutToSave._id
+          state.currentAssetId = json._id
+          state.selectedComponentId = json.props._id
           return state
         })
       },

packages/builder/src/builderStore/store/screenTemplates/utils/Component.js

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

packages/builder/src/components/backend/DataTable/RowFieldControl.svelte

@@ -1,5 +1,12 @@
 <script>
-  import { Input, Select, Label, DatePicker, Toggle, RichText } from "@budibase/bbui"
+  import {
+    Input,
+    Select,
+    Label,
+    DatePicker,
+    Toggle,
+    RichText,
+  } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { TableNames } from "constants"
   import Dropzone from "components/common/Dropzone.svelte"

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -54,7 +54,7 @@
         on:click={modal.show}
         data-cy="new-layout"
         class="ri-add-circle-fill" />
-      {#each $store.layouts as layout}
+      {#each $store.layouts as layout (layout._id)}
         <Layout {layout} />
       {/each}
       <Modal bind:this={modal}>

packages/builder/src/components/userInterface/Layout.svelte

@@ -18,7 +18,7 @@
 
   const selectLayout = () => {
     store.actions.layouts.select(layout._id)
-    $goto(`./layout/${layout._id}`)
+    $goto(`./${layout._id}`)
   }
 </script>
 
@@ -27,7 +27,7 @@
   icon="ri-layout-3-line"
   text={layout.name}
   withArrow
-  selected={$selectedComponent._id === layout.props?._id}
+  selected={$store.currentAssetId === layout._id}
   opened={$store.currentAssetId === layout._id}
   on:click={selectLayout}>
   <LayoutDropdownMenu {layout} />

packages/builder/src/components/userInterface/NewLayoutModal.svelte

@@ -1,6 +1,7 @@
 <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"
@@ -9,10 +10,14 @@
 
   let name = ""
 
-  function save() {
+  async function save() {
-    store.actions.layouts.save({
+    try {
-      name,
+      await store.actions.layouts.save({ name })
-    })
+      $goto(`./${$store.currentAssetId}`)
+      notifier.success(`Layout ${name} created successfully`)
+    } catch (err) {
+      notifier.danger(`Error creating layout ${name}.`)
+    }
   }
 </script>
 

packages/builder/src/components/userInterface/assetParsing/createProps.js

@@ -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}`

packages/builder/tests/createProps.spec.js

@@ -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()
   })
 })

packages/builder/tests/testData.js

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

packages/server/src/api/controllers/layout.js

@@ -14,7 +14,10 @@ exports.save = async function(ctx) {
   }
 
   layout._id = layout._id || generateLayoutID()
-  ctx.body = await db.put(layout)
+  const response = await db.put(layout)
+  layout._rev = response.rev
+
+  ctx.body = layout
   ctx.status = 200
 }
 

packages/server/src/constants/layouts.js

@@ -21,7 +21,6 @@ const EMPTY_LAYOUT = {
           active: {},
           selected: {},
         },
-        _code: "",
         _children: [],
       },
     ],
@@ -32,7 +31,6 @@ const EMPTY_LAYOUT = {
       normal: {},
       selected: {},
     },
-    _code: "",
     className: "",
     onLoad: [],
   },
@@ -47,7 +45,7 @@ const BASE_LAYOUTS = [
     stylesheets: [],
     name: "Top Navigation Layout",
     props: {
-      _id: BASE_LAYOUT_PROP_IDS.PRIVATE,
+      _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
       _component: "@budibase/standard-components/container",
       _children: [
         {
@@ -67,7 +65,6 @@ const BASE_LAYOUTS = [
             active: {},
             selected: {},
           },
-          _code: "",
           className: "",
           onLoad: [],
           type: "div",
@@ -91,7 +88,6 @@ const BASE_LAYOUTS = [
                 active: {},
                 selected: {},
               },
-              _code: "",
               logoUrl:
                 "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
               title: "",
@@ -119,7 +115,6 @@ const BASE_LAYOUTS = [
                     active: {},
                     selected: {},
                   },
-                  _code: "",
                   url: "/",
                   openInNewTab: false,
                   text: "Home",
@@ -155,7 +150,6 @@ const BASE_LAYOUTS = [
             active: {},
             selected: {},
           },
-          _code: "",
           _children: [],
         },
       ],
@@ -176,7 +170,6 @@ const BASE_LAYOUTS = [
         },
         selected: {},
       },
-      _code: "",
       className: "",
       onLoad: [],
     },
@@ -189,7 +182,7 @@ const BASE_LAYOUTS = [
     stylesheets: [],
     name: "Empty Layout",
     props: {
-      _id: BASE_LAYOUT_PROP_IDS.PUBLIC,
+      _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
       _component: "@budibase/standard-components/container",
       _children: [
         {
@@ -212,7 +205,6 @@ const BASE_LAYOUTS = [
             active: {},
             selected: {},
           },
-          _code: "",
           _children: [],
         },
       ],
@@ -233,7 +225,6 @@ const BASE_LAYOUTS = [
         },
         selected: {},
       },
-      _code: "",
       className: "",
       onLoad: [],
     },

packages/server/src/constants/screens.js

@@ -20,7 +20,6 @@ exports.createHomeScreen = () => ({
       active: {},
       selected: {},
     },
-    _code: "",
     type: "div",
     _children: [
       {
@@ -34,7 +33,6 @@ exports.createHomeScreen = () => ({
           active: {},
           selected: {},
         },
-        _code: "",
         text: "Welcome to your Budibase App 👋",
         type: "h2",
         _instanceName: "Heading",
@@ -58,7 +56,6 @@ exports.createHomeScreen = () => ({
           active: {},
           selected: {},
         },
-        _code: "",
         type: "div",
         _instanceName: "Video Container",
         _children: [
@@ -83,7 +80,6 @@ exports.createHomeScreen = () => ({
               active: {},
               selected: {},
             },
-            _code: "",
             embed:
               '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
             _instanceName: "Rick Astley Video",
@@ -121,7 +117,6 @@ exports.createLoginScreen = app => ({
       active: {},
       selected: {},
     },
-    _code: "",
     type: "div",
     _children: [
       {
@@ -143,7 +138,6 @@ exports.createLoginScreen = app => ({
           active: {},
           selected: {},
         },
-        _code: "",
         logo:
           "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
         title: `Log in to ${app.name}`,

packages/standard-components/src/Form.svelte

@@ -1,6 +1,13 @@
 <script>
   import { getContext } from "svelte"
-  import { Label, DatePicker, Input, Select, Toggle, RichText } from "@budibase/bbui"
+  import {
+    Label,
+    DatePicker,
+    Input,
+    Select,
+    Toggle,
+    RichText,
+  } from "@budibase/bbui"
   import Dropzone from "./attachments/Dropzone.svelte"
   import LinkedRowSelector from "./LinkedRowSelector.svelte"
   import { capitalise } from "./helpers"