Merge pull request #275 from mjashanks/component-nav-update

Component nav copy/cut/paste

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

@@ -1,4 +1,4 @@
-import { cloneDeep, values } from "lodash/fp"
+import { values } from "lodash/fp"
 import { backendUiStore } from "builderStore"
 import * as backendStoreActions from "./backend"
 import { writable, get } from "svelte/store"
@@ -16,6 +16,14 @@ import { buildCodeForScreens } from "../buildCodeForScreens"
 import { generate_screen_css } from "../generate_css"
 import { insertCodeMetadata } from "../insertCodeMetadata"
 import { uuid } from "../uuid"
+import {
+  selectComponent as _selectComponent,
+  getParent,
+  walkProps,
+  savePage as _savePage,
+  saveCurrentPreviewItem as _saveCurrentPreviewItem,
+  saveScreenApi as _saveScreenApi,
+} from "../storeUtils"
 
 export const getStore = () => {
   const initial = {
@@ -57,10 +65,6 @@ export const getStore = () => {
   store.setComponentStyle = setComponentStyle(store)
   store.setComponentCode = setComponentCode(store)
   store.setScreenType = setScreenType(store)
-  store.deleteComponent = deleteComponent(store)
-  store.moveUpComponent = moveUpComponent(store)
-  store.moveDownComponent = moveDownComponent(store)
-  store.copyComponent = copyComponent(store)
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
@@ -69,6 +73,9 @@ export const getStore = () => {
 
 export default getStore
 
+export const getComponentDefinition = (state, name) =>
+  name.startsWith("##") ? getBuiltin(name) : state.components[name]
+
 const setPackage = (store, initial) => async pkg => {
   const [main_screens, unauth_screens] = await Promise.all([
     api
@@ -140,12 +147,6 @@ const _saveScreen = async (store, s, screen) => {
   return s
 }
 
-const _saveScreenApi = (screen, s) => {
-  api
-    .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
-    .then(() => _savePage(s))
-}
-
 const createScreen = store => (screenName, route, layoutComponentName) => {
   store.update(state => {
     const rootComponent = state.components[layoutComponentName]
@@ -277,15 +278,6 @@ const removeStylesheet = store => stylesheet => {
   })
 }
 
-const _savePage = async s => {
-  const page = s.pages[s.currentPageName]
-  await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
-    page: { componentLibraries: s.pages.componentLibraries, ...page },
-    uiFunctions: s.currentPageFunctions,
-    screens: page._screens,
-  })
-}
-
 const setCurrentPage = store => pageName => {
   store.update(state => {
     const current_screens = state.pages[pageName]._screens
@@ -317,8 +309,6 @@ const setCurrentPage = store => pageName => {
   })
 }
 
-// const getComponentDefinition = (components, name) => components.find(c => c.name === name)
-
 /**
  * @param  {string} componentToAdd - name of the component to add to the application
  * @param  {string} presetName - name of the component preset if defined
@@ -344,9 +334,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       return state
     }
 
-    const component = componentToAdd.startsWith("##")
+    const component = getComponentDefinition(state, componentToAdd)
-      ? getBuiltin(componentToAdd)
-      : state.components[componentToAdd]
 
     const presetProps = presetName ? component.presets[presetName] : {}
 
@@ -400,12 +388,7 @@ const addTemplatedComponent = store => props => {
 
 const selectComponent = store => component => {
   store.update(state => {
-    const componentDef = component._component.startsWith("##")
+    return _selectComponent(state, component)
-      ? component
-      : state.components[component._component]
-    state.currentComponentInfo = makePropsSafe(componentDef, component)
-    state.currentView = "component"
-    return state
   })
 }
 
@@ -472,75 +455,6 @@ const setScreenType = store => type => {
   })
 }
 
-const deleteComponent = store => componentName => {
-  store.update(state => {
-    const parent = getParent(state.currentPreviewItem.props, componentName)
-
-    if (parent) {
-      parent._children = parent._children.filter(
-        component => component !== componentName
-      )
-    }
-
-    _saveCurrentPreviewItem(state)
-
-    return state
-  })
-}
-
-const moveUpComponent = store => component => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === 0) return s
-
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex - 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    _saveCurrentPreviewItem(s)
-
-    return s
-  })
-}
-
-const moveDownComponent = store => component => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-
-    if (parent) {
-      const currentIndex = parent._children.indexOf(component)
-      if (currentIndex === parent._children.length - 1) return s
-
-      const newChildren = parent._children.filter(c => c !== component)
-      newChildren.splice(currentIndex + 1, 0, component)
-      parent._children = newChildren
-    }
-    s.currentComponentInfo = component
-    _saveCurrentPreviewItem(s)
-
-    return s
-  })
-}
-
-const copyComponent = store => component => {
-  store.update(s => {
-    const parent = getParent(s.currentPreviewItem.props, component)
-    const copiedComponent = cloneDeep(component)
-    walkProps(copiedComponent, p => {
-      p._id = uuid()
-    })
-    parent._children = [...parent._children, copiedComponent]
-    s.curren
-    _saveCurrentPreviewItem(s)
-    s.currentComponentInfo = copiedComponent
-    return s
-  })
-}
-
 const getPathToComponent = store => component => {
   // Gets all the components to needed to construct a path.
   const tempStore = get(store)
@@ -572,39 +486,9 @@ const getPathToComponent = store => component => {
   return path
 }
 
-const getParent = (rootProps, child) => {
-  let parent
-  walkProps(rootProps, (p, breakWalk) => {
-    if (p._children && p._children.includes(child)) {
-      parent = p
-      breakWalk()
-    }
-  })
-  return parent
-}
-
-const walkProps = (props, action, cancelToken = null) => {
-  cancelToken = cancelToken || { cancelled: false }
-  action(props, () => {
-    cancelToken.cancelled = true
-  })
-
-  if (props._children) {
-    for (let child of props._children) {
-      if (cancelToken.cancelled) return
-      walkProps(child, action, cancelToken)
-    }
-  }
-}
-
 const setMetadataProp = store => (name, prop) => {
   store.update(s => {
     s.currentPreviewItem[name] = prop
     return s
   })
 }
-
-const _saveCurrentPreviewItem = s =>
-  s.currentFrontEndType === "page"
-    ? _savePage(s)
-    : _saveScreenApi(s.currentPreviewItem, s)

packages/builder/src/builderStore/storeUtils.js

@@ -0,0 +1,59 @@
+import { makePropsSafe } from "components/userInterface/pagesParsing/createProps"
+import api from "./api"
+
+export const selectComponent = (state, component) => {
+  const componentDef = component._component.startsWith("##")
+    ? component
+    : state.components[component._component]
+  state.currentComponentInfo = makePropsSafe(componentDef, component)
+  state.currentView = "component"
+  return state
+}
+
+export const getParent = (rootProps, child) => {
+  let parent
+  walkProps(rootProps, (p, breakWalk) => {
+    if (
+      p._children &&
+      (p._children.includes(child) || p._children.some(c => c._id === child))
+    ) {
+      parent = p
+      breakWalk()
+    }
+  })
+  return parent
+}
+
+export const saveCurrentPreviewItem = s =>
+  s.currentFrontEndType === "page"
+    ? savePage(s)
+    : saveScreenApi(s.currentPreviewItem, s)
+
+export const savePage = async s => {
+  const page = s.pages[s.currentPageName]
+  await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
+    page: { componentLibraries: s.pages.componentLibraries, ...page },
+    uiFunctions: s.currentPageFunctions,
+    screens: page._screens,
+  })
+}
+
+export const saveScreenApi = (screen, s) => {
+  api
+    .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
+    .then(() => savePage(s))
+}
+
+export const walkProps = (props, action, cancelToken = null) => {
+  cancelToken = cancelToken || { cancelled: false }
+  action(props, () => {
+    cancelToken.cancelled = true
+  })
+
+  if (props._children) {
+    for (let child of props._children) {
+      if (cancelToken.cancelled) return
+      walkProps(child, action, cancelToken)
+    }
+  }
+}

packages/builder/src/components/common/Icons/More.svelte

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6
+    12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21
+    12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5
+    1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z" />
+</svg>

packages/builder/src/components/common/Icons/index.js

@@ -31,3 +31,4 @@ export { default as EmailIcon } from "./Email.svelte"
 export { default as TwitterIcon } from "./Twitter.svelte"
 export { default as InfoIcon } from "./Info.svelte"
 export { default as CloseIcon } from "./Close.svelte"
+export { default as MoreIcon } from "./More.svelte"

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte

@@ -13,16 +13,20 @@
 
   const FIELD_TYPES = ["string", "number", "boolean"]
 
-  export let field = { type: "string", constraints: { type: "string", presence: false } }
+  export let field = {
+    type: "string",
+    constraints: { type: "string", presence: false },
+  }
   export let schema
   export let goBack
 
   let errors = []
   let draftField = cloneDeep(field)
-  
+
   let type = field.type
   let constraints = field.constraints
-  let required = field.constraints.presence && !field.constraints.presence.allowEmpty
+  let required =
+    field.constraints.presence && !field.constraints.presence.allowEmpty
 
   const save = () => {
     constraints.presence = required ? { allowEmpty: false } : false
@@ -31,15 +35,19 @@
     schema[field.name] = draftField
     goBack()
   }
-  
+
-  $: constraints = 
+  $: constraints =
-      type === "string" ? { type: "string", length: {}, presence: false }
+    type === "string"
-      : type === "number" ? { type: "number", presence: false, numericality: {} }
+      ? { type: "string", length: {}, presence: false }
-      : type === "boolean" ? { type: "boolean", presence: false }
+      : type === "number"
-      : type === "datetime" ? { type: "date", datetime: {}, presence: false }
+      ? { type: "number", presence: false, numericality: {} }
-      : type.startsWith('array') ? { type: "array", presence: false }
+      : type === "boolean"
+      ? { type: "boolean", presence: false }
+      : type === "datetime"
+      ? { type: "date", datetime: {}, presence: false }
+      : type.startsWith("array")
+      ? { type: "array", presence: false }
       : { type: "string", presence: false }
-      
 </script>
 
 <div class="root">
@@ -48,24 +56,26 @@
 
   <form on:submit|preventDefault class="uk-form-stacked">
     <Textbox label="Name" bind:text={field.name} />
-    <Dropdown
+    <Dropdown label="Type" bind:selected={type} options={FIELD_TYPES} />
-      label="Type"
+
-      bind:selected={type}
-      options={FIELD_TYPES} />
-    
     <Checkbox label="Required" bind:checked={required} />
-    
 
     {#if type === 'string'}
       <NumberBox label="Max Length" bind:value={constraints.length.maximum} />
       <ValuesList label="Categories" bind:values={constraints.inclusion} />
     {:else if type === 'datetime'}
       <!-- TODO: revisit and fix with JSON schema -->
-      <DatePicker label="Min Value" bind:value={constraints.datetime.earliest} />
+      <DatePicker
+        label="Min Value"
+        bind:value={constraints.datetime.earliest} />
       <DatePicker label="Max Value" bind:value={constraints.datetime.latest} />
     {:else if type === 'number'}
-      <NumberBox label="Min Value" bind:value={constraints.numericality.greaterThanOrEqualTo} />
+      <NumberBox
-      <NumberBox label="Max Value" bind:value={constraints.numericality.lessThanOrEqualTo} />
+        label="Min Value"
+        bind:value={constraints.numericality.greaterThanOrEqualTo} />
+      <NumberBox
+        label="Max Value"
+        bind:value={constraints.numericality.lessThanOrEqualTo} />
     {/if}
   </form>
 </div>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte

@@ -23,22 +23,22 @@
   function closed() {
     onClosed()
   }
-  
+
   const isSelect = meta =>
-    meta.type === "string" 
+    meta.type === "string" &&
-    && meta.constraints 
+    meta.constraints &&
-    && meta.constraints.inclusion 
+    meta.constraints.inclusion &&
-    && meta.constraints.inclusion.length > 0
+    meta.constraints.inclusion.length > 0
-    
+
   function determineInputType(meta) {
     if (meta.type === "datetime") return "date"
     if (meta.type === "number") return "number"
     if (meta.type === "boolean") return "checkbox"
     if (isSelect(meta)) return "select"
-        
+
     return "text"
   }
-  
+
   function determineOptions(meta) {
     return isSelect(meta) ? meta.constraints.inclusion : []
   }
@@ -54,8 +54,8 @@
     )
     if (recordResponse.errors) {
       errors = Object.keys(recordResponse.errors)
-                .map(k => ({dataPath: k,  message: recordResponse.errors[k]}))
+        .map(k => ({ dataPath: k, message: recordResponse.errors[k] }))
-                .flat()
+        .flat()
       return
     }
 

packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte

@@ -4,15 +4,15 @@
   export let label
   export let errors = []
   export let options = []
-  
+
   let checked = type === "checkbox" ? value : false
-  
+
   const determineClassName = type => {
     if (type === "checkbox") return "uk-checkbox"
     if (type === "select") return "uk-select"
     return "uk-input"
   }
-    
+
   const handleInput = event => {
     if (event.target.type === "checkbox") {
       value = event.target.checked
@@ -30,22 +30,22 @@
 
 <label>{label}</label>
 
-{#if type === "select"}
+{#if type === 'select'}
-<select 
+  <select
-  class={determineClassName(type)}
+    class={determineClassName(type)}
-  bind:value={value}
+    bind:value
-  class:uk-form-danger={errors.length > 0} >
+    class:uk-form-danger={errors.length > 0}>
-  {#each options as opt}
+    {#each options as opt}
-    <option value={opt}>{ opt }</option>
+      <option value={opt}>{opt}</option>
-  {/each}
+    {/each}
-</select>
+  </select>
 {:else}
-<input
+  <input
-  class={determineClassName(type)}
+    class={determineClassName(type)}
-  class:uk-form-danger={errors.length > 0}
+    class:uk-form-danger={errors.length > 0}
-  {checked}
+    {checked}
-  {type}
+    {type}
-  {value}
+    {value}
-  on:input={handleInput}
+    on:input={handleInput}
-  on:change={handleInput} />
+    on:change={handleInput} />
 {/if}

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

@@ -0,0 +1,232 @@
+<script>
+  import { MoreIcon } from "components/common/Icons"
+  import { store } from "builderStore"
+  import { getComponentDefinition } from "builderStore/store"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import { last, cloneDeep } from "lodash/fp"
+  import UIkit from "uikit"
+  import {
+    selectComponent,
+    getParent,
+    walkProps,
+    saveCurrentPreviewItem,
+  } from "builderStore/storeUtils"
+  import { uuid } from "builderStore/uuid"
+
+  export let component
+
+  let confirmDeleteDialog
+  let dropdownEl
+
+  $: dropdown = UIkit.dropdown(dropdownEl, {
+    mode: "click",
+    offset: 0,
+    pos: "bottom-right",
+    "delay-hide": 0,
+    animation: false,
+  })
+  $: dropdown && UIkit.util.on(dropdown, "shown", () => (hidden = false))
+  $: noChildrenAllowed =
+    !component ||
+    getComponentDefinition($store, component._component).children === false
+  $: noPaste =
+    !$store.componentToPaste || $store.componentToPaste._id === component._id
+
+  const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
+
+  const hideDropdown = () => {
+    dropdown.hide()
+  }
+
+  const moveUpComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === 0) return s
+
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex - 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const moveDownComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+
+      if (parent) {
+        const currentIndex = parent._children.indexOf(component)
+        if (currentIndex === parent._children.length - 1) return s
+
+        const newChildren = parent._children.filter(c => c !== component)
+        newChildren.splice(currentIndex + 1, 0, component)
+        parent._children = newChildren
+      }
+      s.currentComponentInfo = component
+      saveCurrentPreviewItem(s)
+
+      return s
+    })
+  }
+
+  const copyComponent = () => {
+    store.update(s => {
+      const parent = getParent(s.currentPreviewItem.props, component)
+      const copiedComponent = cloneDeep(component)
+      walkProps(copiedComponent, p => {
+        p._id = uuid()
+      })
+      parent._children = [...parent._children, copiedComponent]
+      saveCurrentPreviewItem(s)
+      s.currentComponentInfo = copiedComponent
+      return s
+    })
+  }
+
+  const deleteComponent = () => {
+    store.update(state => {
+      const parent = getParent(state.currentPreviewItem.props, component)
+
+      if (parent) {
+        parent._children = parent._children.filter(c => c !== component)
+      }
+
+      saveCurrentPreviewItem(state)
+
+      return state
+    })
+  }
+
+  const generateNewIdsForComponent = c =>
+    walkProps(c, p => {
+      p._id = uuid()
+    })
+
+  const storeComponentForCopy = (cut = false) => {
+    store.update(s => {
+      const copiedComponent = cloneDeep(component)
+      s.componentToPaste = copiedComponent
+      if (cut) {
+        const parent = getParent(s.currentPreviewItem.props, component._id)
+        parent._children = parent._children.filter(c => c._id !== component._id)
+        selectComponent(s, parent)
+      }
+
+      return s
+    })
+  }
+
+  const pasteComponent = mode => {
+    store.update(s => {
+      if (!s.componentToPaste) return s
+
+      const componentToPaste = cloneDeep(s.componentToPaste)
+      generateNewIdsForComponent(componentToPaste)
+      delete componentToPaste._cutId
+
+      if (mode === "inside") {
+        component._children.push(componentToPaste)
+        return s
+      }
+
+      const parent = getParent(s.currentPreviewItem.props, component)
+
+      const targetIndex = parent._children.indexOf(component)
+      const index = mode === "above" ? targetIndex : targetIndex + 1
+      parent._children.splice(index, 0, cloneDeep(componentToPaste))
+
+      saveCurrentPreviewItem(s)
+      selectComponent(s, componentToPaste)
+
+      return s
+    })
+  }
+</script>
+
+<div class="root" on:click|stopPropagation={() => {}}>
+  <button>
+    <MoreIcon />
+  </button>
+  <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
+    <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
+    <li on:click={moveUpComponent}>Move up</li>
+    <li on:click={moveDownComponent}>Move down</li>
+    <li on:click={copyComponent}>Duplicate</li>
+    <li on:click={() => storeComponentForCopy(true)}>Cut</li>
+    <li on:click={() => storeComponentForCopy(false)}>Copy</li>
+    <hr />
+    <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
+      Paste above
+    </li>
+    <li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
+      Paste below
+    </li>
+    <li
+      class:disabled={noPaste || noChildrenAllowed}
+      on:click={() => pasteComponent('inside')}>
+      Paste inside
+    </li>
+  </ul>
+</div>
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Delete"
+  body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
+  okText="Delete Component"
+  onOk={deleteComponent} />
+
+<style>
+  .root {
+    overflow: hidden;
+    z-index: 9;
+  }
+
+  .root button {
+    border-style: none;
+    border-radius: 2px;
+    padding: 5px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--button-text);
+    outline: none;
+  }
+
+  .menu {
+    z-index: 100000;
+    overflow: visible;
+    padding: 10px 0;
+  }
+
+  .menu li {
+    border-style: none;
+    background-color: transparent;
+    list-style-type: none;
+    padding: 4px 5px 4px 15px;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .menu li:not(.disabled) {
+    cursor: pointer;
+    color: var(--ink);
+  }
+
+  .menu li:not(.disabled):hover {
+    color: var(--button-text);
+    background-color: var(--grey-light);
+  }
+
+  .disabled {
+    color: var(--grey-dark);
+    cursor: default;
+  }
+</style>

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

@@ -35,11 +35,6 @@
     sortBy("title"),
   ])
 
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   const changeScreen = screen => {
     store.setCurrentScreen(screen.title)
     $goto(`./:page/${screen.title}`)
@@ -69,23 +64,12 @@
     {#if $store.currentPreviewItem.name === screen.title && screen.component.props._children}
       <ComponentsHierarchyChildren
         components={screen.component.props._children}
-        currentComponent={$store.currentComponentInfo}
+        currentComponent={$store.currentComponentInfo} />
-        onDeleteComponent={confirmDeleteComponent}
-        onMoveUpComponent={store.moveUpComponent}
-        onMoveDownComponent={store.moveDownComponent}
-        onCopyComponent={store.copyComponent} />
     {/if}
   {/each}
 
 </div>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component?`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <style>
   .root {
     font-weight: 400;

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

@@ -3,6 +3,7 @@
   import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "components/common/core"
+  import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import {
     XCircleIcon,
     ChevronUpIcon,
@@ -14,23 +15,12 @@
   export let currentComponent
   export let onSelect = () => {}
   export let level = 0
-  export let onDeleteComponent
-  export let onMoveUpComponent
-  export let onMoveDownComponent
-  export let onCopyComponent
 
   const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
   const get_name = s => (!s ? "" : last(s.split("/")))
 
   const get_capitalised_name = name => pipe(name, [get_name, capitalise])
 
-  const moveDownComponent = component => {
-    const c = component
-    return () => {
-      return onMoveDownComponent(c)
-    }
-  }
-
   const selectComponent = component => {
     // Set current component
     store.selectComponent(component)
@@ -51,30 +41,9 @@
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
-        <div class="reorder-buttons">
+        <div class="actions">
-          {#if index > 0}
+          <ComponentDropdownMenu {component} />
-            <button
-              class:solo={index === components.length - 1}
-              on:click|stopPropagation={() => onMoveUpComponent(component)}>
-              <ChevronUpIcon />
-            </button>
-          {/if}
-          {#if index < components.length - 1}
-            <button
-              class:solo={index === 0}
-              on:click|stopPropagation={moveDownComponent(component)}>
-              <ChevronDownIcon />
-            </button>
-          {/if}
         </div>
-        <button
-          class="copy"
-          on:click|stopPropagation={() => onCopyComponent(component)}>
-          <CopyIcon />
-        </button>
-        <button on:click|stopPropagation={() => onDeleteComponent(component)}>
-          <XCircleIcon />
-        </button>
       </div>
 
       {#if component._children}
@@ -82,11 +51,7 @@
           components={component._children}
           {currentComponent}
           {onSelect}
-          level={level + 1}
+          level={level + 1} />
-          {onDeleteComponent}
-          {onMoveUpComponent}
-          {onMoveDownComponent}
-          {onCopyComponent} />
       {/if}
     </li>
   {/each}
@@ -111,7 +76,7 @@
     font-size: 13px;
   }
 
-  .item button {
+  .actions {
     display: none;
     height: 20px;
     width: 28px;
@@ -120,37 +85,14 @@
     border-style: none;
     background: rgba(0, 0, 0, 0);
     cursor: pointer;
-  }
+    position: relative;
-
-  .item button.copy {
-    width: 26px;
   }
 
   .item:hover {
     background: #fafafa;
     cursor: pointer;
   }
-  .item:hover button {
+  .item:hover .actions {
     display: block;
   }
-
-  .item:hover button:hover {
-    color: var(--button-text);
-  }
-
-  .reorder-buttons {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .reorder-buttons > button {
-    flex: 1 1 auto;
-    width: 30px;
-    height: 15px;
-  }
-
-  .reorder-buttons > button.solo {
-    padding-top: 2px;
-  }
 </style>

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

@@ -45,5 +45,4 @@
   .newscreen:hover {
     background: var(--grey-light);
   }
-
 </style>

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

@@ -34,11 +34,6 @@
     title: lastPartOfName(layout),
   }
 
-  const confirmDeleteComponent = async component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   const setCurrentScreenToLayout = () => {
     store.setScreenType("page")
     $goto("./:page/page-layout")
@@ -63,21 +58,10 @@
     <ComponentsHierarchyChildren
       thisComponent={_layout.component.props}
       components={_layout.component.props._children}
-      currentComponent={$store.currentComponentInfo}
+      currentComponent={$store.currentComponentInfo} />
-      onDeleteComponent={confirmDeleteComponent}
-      onMoveUpComponent={store.moveUpComponent}
-      onMoveDownComponent={store.moveDownComponent}
-      onCopyComponent={store.copyComponent} />
   {/if}
 </div>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component?`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <style>
   .pagelayoutSection {
     margin: 20px 0px 0px 0px;

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

@@ -27,11 +27,6 @@
     settingsView.show()
   }
 
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
 </script>
 
@@ -86,13 +81,6 @@
 <NewScreen bind:this={newScreenPicker} />
 <SettingsView bind:this={settingsView} />
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <style>
   button {
     cursor: pointer;

packages/builder/src/pages/[application]/frontend/_layout.svelte

@@ -34,11 +34,6 @@
     settingsView.show()
   }
 
-  const confirmDeleteComponent = component => {
-    componentToDelete = component
-    confirmDeleteDialog.show()
-  }
-
   let leftNavSwitcher
 
   const lastPartOfName = c => (c ? last(c.split("/")) : "")
@@ -73,13 +68,6 @@
 
 </div>
 
-<ConfirmDialog
-  bind:this={confirmDeleteDialog}
-  title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
-  okText="Delete Component"
-  onOk={() => store.deleteComponent(componentToDelete)} />
-
 <slot />
 
 <style>
@@ -97,6 +85,7 @@
     padding: 0;
     display: flex;
     flex-direction: column;
+    z-index: 5;
   }
 
   .preview-pane {