allow renaming of layouts

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

@@ -238,15 +238,21 @@ export const getFrontendStore = () => {
         if (!json.ok) throw new Error("Error updating layout")
 
         store.update(state => {
-          const layoutToUpdate = state.layouts.find(
+          layoutToSave._rev = json.rev
-            stateLayout => stateLayout._id === layout._id
+          layoutToSave._id = json.id
+
+          const layoutIdx = state.layouts.findIndex(
+            stateLayout => stateLayout._id === layoutToSave._id
           )
-          if (layoutToUpdate) {
+
-            layoutToUpdate._rev = json.rev
+          if (layoutIdx >= 0) {
+            // update existing layout
+            state.layouts.splice(layoutIdx, 1, layoutToSave)
           } else {
-            // TODO: when a new layout is created
+            // save new layout
-            state.layouts.push({})
+            state.layouts.push(layoutToSave)
           }
+
           return state
         })
       },

packages/builder/src/components/userInterface/ComponentNavigationTree/LayoutDropdownMenu.svelte

@@ -3,16 +3,17 @@
   import { store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { DropdownMenu, Modal, ModalContent } from "@budibase/bbui"
+  import { DropdownMenu, Modal, ModalContent, Input } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
+  import { cloneDeep } from "lodash/fp"
 
-  export let layoutId
+  export let layout
 
   let confirmDeleteDialog
+  let editLayoutNameModal
   let dropdown
   let anchor
-
+  let name = layout.name
-  $: layout = $store.layouts.find(layout => layout._id === layoutId)
 
   const deleteLayout = async () => {
     try {
@@ -22,6 +23,17 @@
       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>
@@ -34,6 +46,10 @@
         icon="ri-delete-bin-line"
         title="Delete"
         on:click={() => confirmDeleteDialog.show()} />
+      <DropdownItem
+        icon="ri-pencil-line"
+        title="Edit"
+        on:click={() => editLayoutNameModal.show()} />
     </DropdownContainer>
   </DropdownMenu>
 </div>
@@ -44,6 +60,16 @@
   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;

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

@@ -30,7 +30,7 @@
   selected={$store.currentComponentInfo?._id === layout.props._id}
   opened={$store.currentAssetId === layout._id}
   on:click={selectLayout}>
-  <LayoutDropdownMenu layoutId={layout._id} />
+  <LayoutDropdownMenu {layout} />
 </NavItem>
 
 {#if $store.currentAssetId === layout._id && layout.props._children}