From ea88880417aefeab1f2fa03ba75ac3d787285dd9 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 28 Jan 2020 22:39:16 +0000
Subject: [PATCH 1/8] merge

---
 .../builder/src/common/Icons/Events.svelte    |   8 +
 .../builder/src/common/Icons/Pencil.svelte    |  19 ++
 packages/builder/src/common/Icons/index.js    |   2 +
 .../src/userInterface/ComponentPanel.svelte   |  10 +-
 .../EventsEditor/EventEditorModal.svelte      |  49 +++++
 .../EventsEditor/EventSelector.svelte         | 110 +++++++++++
 .../EventsEditor/EventsEditor.svelte          | 149 +++++++++++++++
 .../EventsEditor/StateBindingControl.svelte   | 177 ++++++++++++++++++
 .../src/userInterface/EventsEditor/index.js   |   1 +
 packages/server/package.json                  |   2 +-
 10 files changed, 525 insertions(+), 2 deletions(-)
 create mode 100644 packages/builder/src/common/Icons/Events.svelte
 create mode 100644 packages/builder/src/common/Icons/Pencil.svelte
 create mode 100644 packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
 create mode 100644 packages/builder/src/userInterface/EventsEditor/EventSelector.svelte
 create mode 100644 packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
 create mode 100644 packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte
 create mode 100644 packages/builder/src/userInterface/EventsEditor/index.js

diff --git a/packages/builder/src/common/Icons/Events.svelte b/packages/builder/src/common/Icons/Events.svelte
new file mode 100644
index 0000000000..d3728b9901
--- /dev/null
+++ b/packages/builder/src/common/Icons/Events.svelte
@@ -0,0 +1,8 @@
+<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="M13 10h7l-9 13v-9H4l9-13z" />
+</svg>
diff --git a/packages/builder/src/common/Icons/Pencil.svelte b/packages/builder/src/common/Icons/Pencil.svelte
new file mode 100644
index 0000000000..266458a132
--- /dev/null
+++ b/packages/builder/src/common/Icons/Pencil.svelte
@@ -0,0 +1,19 @@
+<svg
+  on:click
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z" />
+  <path
+    d="M15.728 9.686l-1.414-1.414L5
+    17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414
+    1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1
+    1 0 0 1 0 1.414L7.243 21z" />
+</svg>
+
+<style>
+  svg:hover {
+    cursor: pointer;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/common/Icons/index.js b/packages/builder/src/common/Icons/index.js
index 2e2ffc2010..c00ebb3ce4 100644
--- a/packages/builder/src/common/Icons/index.js
+++ b/packages/builder/src/common/Icons/index.js
@@ -4,3 +4,5 @@ export { default as TerminalIcon } from './Terminal.svelte';
 export { default as InputIcon } from './Input.svelte';
 export { default as ImageIcon } from './Image.svelte';
 export { default as ArrowDownIcon } from './ArrowDown.svelte';
+export { default as EventsIcon } from './Events.svelte';
+export { default as PencilIcon } from './Pencil.svelte';
diff --git a/packages/builder/src/userInterface/ComponentPanel.svelte b/packages/builder/src/userInterface/ComponentPanel.svelte
index 5649820970..1fa8ce0642 100644
--- a/packages/builder/src/userInterface/ComponentPanel.svelte
+++ b/packages/builder/src/userInterface/ComponentPanel.svelte
@@ -2,9 +2,10 @@
     import PropsView from "./PropsView.svelte";
     import { store } from "../builderStore";
     import IconButton from "../common/IconButton.svelte";
-    import { LayoutIcon, PaintIcon, TerminalIcon } from '../common/Icons/';
+    import { LayoutIcon, PaintIcon, TerminalIcon, EventsIcon } from '../common/Icons/';
     import CodeEditor from './CodeEditor.svelte';
     import LayoutEditor from './LayoutEditor.svelte';
+    import EventsEditor from "./EventsEditor";
 
     let current_view = 'props';
 
@@ -36,6 +37,11 @@
             <TerminalIcon />
           </button>
         </li>
+        <li>
+          <button class:selected={current_view === 'events'} on:click={() => current_view = 'events'}>
+            <EventsIcon />
+          </button>
+        </li>
     </ul>
 
     {#if !componentInfo.component}
@@ -45,6 +51,8 @@
             <PropsView {componentInfo} {components} {onPropChanged} />
         {:else if current_view === 'layout'}
             <LayoutEditor {onStyleChanged} {componentInfo}/>
+        {:else if current_view === 'events'}
+            <EventsEditor {componentInfo} {components} {onPropChanged} />
         {:else}
             <CodeEditor />
         {/if}
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
new file mode 100644
index 0000000000..6cb72f6310
--- /dev/null
+++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
@@ -0,0 +1,49 @@
+<script>
+  import Modal from "../../common/Modal.svelte";
+  import EventSelector from "../EventSelector.svelte";
+
+  export let event;
+  export let open;
+  export let closeModal;
+
+  $: action = open && event ? "Edit" : "Create";
+
+</script>
+
+<Modal isOpen={open} onClosed={closeModal}>
+  <h2>{action} Event</h2>
+  <EventSelector 
+    onChanged={console.log}
+    onRemoved={console.log}
+    {event} 
+  />
+</Modal>
+
+<style>
+  h3 {
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 700;
+    color: #8997ab;
+    margin-bottom: 10px;
+  }
+
+  .root {
+    font-size: 10pt;
+    width: 100%;
+  }
+
+  .form-root {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .prop-container {
+    flex: 1 1 auto;
+    min-width: 250px;
+  }
+  
+  .edit-icon:hover {
+    cursor: pointer;
+  }
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/EventsEditor/EventSelector.svelte b/packages/builder/src/userInterface/EventsEditor/EventSelector.svelte
new file mode 100644
index 0000000000..332a2ed32b
--- /dev/null
+++ b/packages/builder/src/userInterface/EventsEditor/EventSelector.svelte
@@ -0,0 +1,110 @@
+<script>
+  import IconButton from "../../common/IconButton.svelte";
+  import StateBindingControl from "./StateBindingControl.svelte";
+  import { find, map, keys, reduce, keyBy } from "lodash/fp";
+  import { pipe, userWithFullAccess } from "../../common/core";
+  import {
+    EVENT_TYPE_MEMBER_NAME,
+    allHandlers
+  } from "../../common/eventHandlers";
+  import { store } from "../../builderStore";
+
+  export let event;
+  export let onChanged;
+  export let onRemoved;
+
+  let events;
+  let eventType;
+  let parameters = [];
+
+  store.subscribe(s => {
+    events = allHandlers(
+      { hierarchy: s.hierarchy },
+      userWithFullAccess({
+        hierarchy: s.hierarchy,
+        actions: keyBy("name")(s.actions)
+      })
+    );
+  });
+
+ // TODO: refactor
+  $: {
+    if (event) {
+      eventType = event[EVENT_TYPE_MEMBER_NAME];
+
+      parameters = pipe(
+        event.parameters,
+        [keys, map(key => ({ name: key, value: event.parameters[key] }))]
+      );
+    } else {
+      eventType = "";
+      parameters = [];
+    }
+  }
+
+ // TODO: refactor
+  const eventChanged = (type, parameters) => {
+    const paramsAsObject = reduce((obj, p) => {
+      obj[p.name] = p.value;
+      return obj;
+    }, {})(parameters);
+
+    const ev = {};
+    ev[EVENT_TYPE_MEMBER_NAME] = type;
+    ev.parameters = paramsAsObject;
+
+    onChanged(ev);
+  };
+
+ // TODO: refactor
+  const eventTypeChanged = ev => {
+    const eType = find(e => e.name === ev.target.value)(events);
+    const emptyParameters = map(p => ({ name: p, value: "" }))(
+      eType.parameters
+    );
+    eventChanged(eType.name, emptyParameters);
+  };
+
+  const onParameterChanged = index => val => {
+    const newparameters = [...parameters];
+    newparameters[index].value = val;
+    eventChanged(eventType, newparameters);
+  };
+</script>
+
+<style>
+  .type-selector-container {
+    display: flex;
+  }
+
+  .type-selector {
+    border-color: var(--primary50);
+    border-radius: 2px;
+    width: 50px;
+    flex: 1 0 auto;
+  }
+</style>
+
+<div class="type-selector-container">
+  <select
+    class="type-selector uk-select uk-form-small "
+    value={eventType}
+    on:change={eventTypeChanged}>
+    <option />
+    {#each events as ev}
+      <option value={ev.name}>{ev.name}</option>
+    {/each}
+  </select>
+
+  <IconButton icon="trash" size="12" on:click={onRemoved} />
+
+</div>
+
+{#if parameters}
+  {#each parameters as p, index}
+    <div>{p.name}</div>
+    <StateBindingControl
+      onChanged={onParameterChanged(index)}
+      value={p.value} />
+  {/each}
+{/if}
diff --git a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
new file mode 100644
index 0000000000..c1066322e8
--- /dev/null
+++ b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
@@ -0,0 +1,149 @@
+<script>
+  import {
+    keys,
+    map,
+    some,
+    includes,
+    cloneDeep,
+    isEqual,
+    sortBy,
+    filter,
+    difference
+  } from "lodash/fp";
+  import { pipe } from "../../common/core";
+  import Checkbox from "../../common/Checkbox.svelte";
+  import Textbox from "../../common/Textbox.svelte";
+  import Dropdown from "../../common/Dropdown.svelte";
+  import IconButton from "../../common/IconButton.svelte";
+  import Modal from "../../common/Modal.svelte";
+  import EventSelector from "./EventSelector.svelte";
+
+  import { PencilIcon } from "../../common/Icons";
+  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers";
+
+  export const EVENT_TYPE = "event";
+
+  export let componentInfo;
+  export let onPropChanged = () => {};
+  export let components;
+
+  let modalOpen = false;
+  let events = [];
+  let selectedEvent = null;
+  let newEventType = "onClick";
+
+  // TODO: only show events that have handlers
+  $: events =
+    componentInfo &&
+    Object.entries(componentInfo).filter(
+      ([name]) => findType(name) == EVENT_TYPE
+    );
+
+  $: action = selectedEvent ? "Edit" : "Create";
+
+  function findType(propName) {
+    if (!componentInfo._component) return;
+    return components.find(({ name }) => name === componentInfo._component)
+      .props[propName];
+  }
+
+  console.log(componentInfo, events, components);
+
+  const openModal = event => {
+    selectedEvent = event;
+    modalOpen = true;
+  };
+
+  const closeModal = () => {
+    selectedEvent = null;
+    modalOpen = false;
+  };
+
+  const addEventHandler = event => {
+    const newEventHandler = {
+      parameters: {},
+      [EVENT_TYPE_MEMBER_NAME]: ""
+    };
+    events = [...events, newEventHandler];
+    onPropChanged(newEventType, events);
+  };
+
+  const changeEventHandler = newEvent => {
+    console.log({ events, newEventType, newEvent });
+    onPropChanged(newEventType, events);
+  };
+
+  const removeEventHandler = index => () => {
+    events = filter(e => e !== events[index])(events);
+    onPropChanged(newEventType, []);
+  };
+
+  console.log(events);
+</script>
+
+<style>
+  h3 {
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 700;
+    color: #8997ab;
+    margin-bottom: 10px;
+  }
+
+  .root {
+    font-size: 10pt;
+    width: 100%;
+  }
+
+  .form-root {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .prop-container {
+    flex: 1 1 auto;
+    min-width: 250px;
+  }
+</style>
+
+<h3>Events</h3>
+
+<div class="root">
+
+  <form class="uk-form-stacked form-root">
+    {#each events as event, index}
+      <div class="prop-container">
+        {event[0]}
+        <PencilIcon on:click={() => openModal({ ...event, index })} />
+      </div>
+    {/each}
+  </form>
+  <button on:click={() => openModal()}>Create Event</button>
+</div>
+<Modal bind:isOpen={modalOpen} onClosed={closeModal}>
+  <h2>{action} Event</h2>
+  {#if selectedEvent}
+    {JSON.stringify(selectedEvent)}
+    <!-- <EventSelector
+      onChanged={onEventHandlerChanged(selectedEvent)}
+      onRemoved={removeHandler(selectedEvent && selectedEvent.index)}
+      event={selectedEvent} />
+    <div class="addelement-container" on:click={addHandler}>
+      <IconButton icon="plus" size="12" />
+    </div> -->
+  {:else}
+    <select bind:value={newEventType}>
+      {#each events as [name]}
+        <option value={name}>{name}</option>
+      {/each}
+    </select>
+    <EventSelector
+      onChanged={changeEventHandler}
+      onRemoved={removeEventHandler}
+      event={selectedEvent} />
+    <div class="addelement-container" on:click={addEventHandler}>
+      <IconButton icon="plus" size="12" />
+    </div>
+    <button>Save</button>
+  {/if}
+</Modal>
diff --git a/packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte b/packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte
new file mode 100644
index 0000000000..f8e6ca6da8
--- /dev/null
+++ b/packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte
@@ -0,0 +1,177 @@
+<script>
+import {
+    isString
+} from "lodash/fp";
+import IconButton from "../../common/IconButton.svelte";
+import {
+    isBinding, getBinding, setBinding
+} from "../../common/binding";
+
+export let value="";
+export let onChanged= () => {};
+export let type="";
+export let options=[];
+
+let isBound=false;
+let bindingPath="";
+let bindingFallbackValue="";
+let bindingSource="store";
+let isExpanded = false;
+let forceIsBound = false;
+let canOnlyBind = false;
+
+$: {
+    canOnlyBind = type === "state";
+    if(!forceIsBound && canOnlyBind)
+        forceIsBound = true;
+
+    isBound= forceIsBound || isBinding(value);
+
+    if(isBound) {
+        const binding = getBinding(value);
+        bindingPath= binding.path;
+        bindingFallbackValue= binding.fallback;
+        bindingSource = binding.source || "store";
+    } else {
+        bindingPath="";
+        bindingFallbackValue="";
+        bindingSource="store";
+    }
+}
+
+const clearBinding = () => {
+    forceIsBound = false;
+    onChanged("");
+}
+
+const bind = (path, fallback, source) => {
+    if(!path) {
+        clearBinding("");
+        return;
+    }
+    const binding = setBinding({path, fallback, source});
+    onChanged(binding);
+}
+
+const setBindingPath = ev => {
+    forceIsBound = canOnlyBind;
+    bind(ev.target.value, bindingFallbackValue, bindingSource)
+}
+
+const setBindingFallback = ev => {
+    bind(bindingPath, ev.target.value, bindingSource);
+}
+
+const setBindingSource = ev => {
+    bind(bindingPath, bindingFallbackValue, ev.target.value);
+}
+
+// const makeBinding = () => {
+//     forceIsBound=true;
+//     isExpanded=true;
+// }
+
+</script>
+
+{#if isBound}
+<div>
+    <div class="bound-header">
+        <div>{isExpanded ? "" : bindingPath}</div>
+        <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
+                    size="12"
+                    on:click={() => isExpanded=!isExpanded}/>
+        {#if !canOnlyBind}
+        <IconButton icon="trash"
+                    size="12"
+                    on:click={clearBinding}/>
+        {/if}
+    </div>
+    {#if isExpanded}
+    <div>
+        <div class="binding-prop-label">Binding Path</div>
+        <input class="uk-input uk-form-small"
+               value={bindingPath}
+               on:change={setBindingPath} >
+        <div class="binding-prop-label">Fallback Value</div>
+        <input class="uk-input uk-form-small"
+               value={bindingFallbackValue}
+               on:change={setBindingFallback} >
+        <div class="binding-prop-label">Binding Source</div>
+        <select class="uk-select uk-form-small"
+            value={bindingSource}
+            on:change={setBindingSource}>
+
+            <option>store</option>
+            <option>context</option>
+
+        </select>
+    </div>
+    {/if}
+
+</div>
+{:else}
+<div class="unbound-container">
+
+    {#if type === "bool"}
+
+    <div>
+        <IconButton icon={value == true ? "check-square" : "square"}
+                    size="19"
+                    on:click={() => onChanged(!value)} />
+    </div>
+
+    {:else if type === "options"}
+
+    <select class="uk-select uk-form-small"
+            value={value}
+            on:change={ev => onChanged(ev.target.value)}>
+        {#each options as option}
+        <option value={option}>{option}</option>
+        {/each}
+    </select>
+
+    {:else}
+
+    <input on:change={ev => onChanged(ev.target.value)}
+           bind:value={value}
+           style="flex: 1 0 auto;" />
+
+
+    {/if}
+
+</div>
+{/if}
+
+
+<style>
+    .unbound-container {
+        display:flex;
+    }
+
+    .bound-header {
+        display: flex;
+    }
+
+    .bound-header > div:nth-child(1) {
+        flex: 1 0 auto;
+        width: 30px;
+        color: var(--secondary50);
+        padding-left: 5px;
+    }
+
+    .binding-prop-label {
+        color: var(--secondary50);
+    }
+
+    input {
+        font-size: 12px;
+        font-weight: 700;
+        color: #163057;
+        opacity: 0.7;
+        padding: 5px 10px;
+        box-sizing: border-box;
+        border: 1px solid #DBDBDB;
+        border-radius: 2px;
+        outline: none;
+    }
+</style>
diff --git a/packages/builder/src/userInterface/EventsEditor/index.js b/packages/builder/src/userInterface/EventsEditor/index.js
new file mode 100644
index 0000000000..7782e7fccd
--- /dev/null
+++ b/packages/builder/src/userInterface/EventsEditor/index.js
@@ -0,0 +1 @@
+export { default } from "./EventsEditor.svelte";
\ No newline at end of file
diff --git a/packages/server/package.json b/packages/server/package.json
index 7f607b533d..6a86bb4d1f 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -8,7 +8,7 @@
     "build": "cd appPackages/_master && yarn && cd ../testApp && yarn && cd ../testApp2 && yarn",
     "initialise": "node ./initialise/initialiseBudibase init -d ./myapps -c contributors -u admin -p admin",
     "budi": "node ../cli/bin/budi",
-    "dev:builder": "nodemon index"
+    "dev:builder": "node index"
   },
   "keywords": [
     "budibase"

From a88db662bf084c4eee74e4ec0a9d7600ef81eda0 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jan 2020 21:04:48 +0000
Subject: [PATCH 2/8] basic architecture complete

---
 packages/builder/src/common/PlusButton.svelte |  23 ++
 .../EventsEditor/EventSelector.svelte         | 110 ----------
 .../EventsEditor/EventsEditor.svelte          | 197 ++++++++++++++----
 .../EventsEditor/HandlerSelector.svelte       | 112 ++++++++++
 .../src/userInterface/EventsEditor/index.js   |   6 +
 packages/server/app.js                        |   2 +-
 6 files changed, 294 insertions(+), 156 deletions(-)
 create mode 100644 packages/builder/src/common/PlusButton.svelte
 delete mode 100644 packages/builder/src/userInterface/EventsEditor/EventSelector.svelte
 create mode 100644 packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte

diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte
new file mode 100644
index 0000000000..b7ae19fcbf
--- /dev/null
+++ b/packages/builder/src/common/PlusButton.svelte
@@ -0,0 +1,23 @@
+<style>
+  button {
+    cursor: pointer;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    background: var(--background-button);
+
+    width: 1.8rem;
+    height: 1.8rem;
+    padding-bottom: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--button-text);
+  }
+</style>
+
+<button on:click>+</button>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventSelector.svelte b/packages/builder/src/userInterface/EventsEditor/EventSelector.svelte
deleted file mode 100644
index 332a2ed32b..0000000000
--- a/packages/builder/src/userInterface/EventsEditor/EventSelector.svelte
+++ /dev/null
@@ -1,110 +0,0 @@
-<script>
-  import IconButton from "../../common/IconButton.svelte";
-  import StateBindingControl from "./StateBindingControl.svelte";
-  import { find, map, keys, reduce, keyBy } from "lodash/fp";
-  import { pipe, userWithFullAccess } from "../../common/core";
-  import {
-    EVENT_TYPE_MEMBER_NAME,
-    allHandlers
-  } from "../../common/eventHandlers";
-  import { store } from "../../builderStore";
-
-  export let event;
-  export let onChanged;
-  export let onRemoved;
-
-  let events;
-  let eventType;
-  let parameters = [];
-
-  store.subscribe(s => {
-    events = allHandlers(
-      { hierarchy: s.hierarchy },
-      userWithFullAccess({
-        hierarchy: s.hierarchy,
-        actions: keyBy("name")(s.actions)
-      })
-    );
-  });
-
- // TODO: refactor
-  $: {
-    if (event) {
-      eventType = event[EVENT_TYPE_MEMBER_NAME];
-
-      parameters = pipe(
-        event.parameters,
-        [keys, map(key => ({ name: key, value: event.parameters[key] }))]
-      );
-    } else {
-      eventType = "";
-      parameters = [];
-    }
-  }
-
- // TODO: refactor
-  const eventChanged = (type, parameters) => {
-    const paramsAsObject = reduce((obj, p) => {
-      obj[p.name] = p.value;
-      return obj;
-    }, {})(parameters);
-
-    const ev = {};
-    ev[EVENT_TYPE_MEMBER_NAME] = type;
-    ev.parameters = paramsAsObject;
-
-    onChanged(ev);
-  };
-
- // TODO: refactor
-  const eventTypeChanged = ev => {
-    const eType = find(e => e.name === ev.target.value)(events);
-    const emptyParameters = map(p => ({ name: p, value: "" }))(
-      eType.parameters
-    );
-    eventChanged(eType.name, emptyParameters);
-  };
-
-  const onParameterChanged = index => val => {
-    const newparameters = [...parameters];
-    newparameters[index].value = val;
-    eventChanged(eventType, newparameters);
-  };
-</script>
-
-<style>
-  .type-selector-container {
-    display: flex;
-  }
-
-  .type-selector {
-    border-color: var(--primary50);
-    border-radius: 2px;
-    width: 50px;
-    flex: 1 0 auto;
-  }
-</style>
-
-<div class="type-selector-container">
-  <select
-    class="type-selector uk-select uk-form-small "
-    value={eventType}
-    on:change={eventTypeChanged}>
-    <option />
-    {#each events as ev}
-      <option value={ev.name}>{ev.name}</option>
-    {/each}
-  </select>
-
-  <IconButton icon="trash" size="12" on:click={onRemoved} />
-
-</div>
-
-{#if parameters}
-  {#each parameters as p, index}
-    <div>{p.name}</div>
-    <StateBindingControl
-      onChanged={onParameterChanged(index)}
-      value={p.value} />
-  {/each}
-{/if}
diff --git a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
index c1066322e8..fa21f2c56a 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
@@ -14,9 +14,10 @@
   import Checkbox from "../../common/Checkbox.svelte";
   import Textbox from "../../common/Textbox.svelte";
   import Dropdown from "../../common/Dropdown.svelte";
+  import PlusButton from "../../common/PlusButton.svelte";
   import IconButton from "../../common/IconButton.svelte";
   import Modal from "../../common/Modal.svelte";
-  import EventSelector from "./EventSelector.svelte";
+  import HandlerSelector from "./HandlerSelector.svelte";
 
   import { PencilIcon } from "../../common/Icons";
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers";
@@ -27,12 +28,28 @@
   export let onPropChanged = () => {};
   export let components;
 
+  // Structure
+  // {
+  //    [eventName]: [{eventHandler}, {eventHandler1}],
+  //    [eventName1]: [{eventHandler}, {eventHandler1}],
+  // }
+
   let modalOpen = false;
   let events = [];
-  let selectedEvent = null;
+  let selectedEvent = {};
   let newEventType = "onClick";
 
   // TODO: only show events that have handlers
+
+  // $: {
+  //   let componentEvents = {};
+  //   for (let propName in componentInfo) {
+  //     const isEventProp = findType(propName) === EVENT_TYPE;
+  //     if (isEventProp) componentEvents[propName] = componentInfo[propName];
+  //   }
+  //   events = componentEvents;
+  // }
+
   $: events =
     componentInfo &&
     Object.entries(componentInfo).filter(
@@ -47,7 +64,7 @@
       .props[propName];
   }
 
-  console.log(componentInfo, events, components);
+  console.log({ componentInfo, events, components });
 
   const openModal = event => {
     selectedEvent = event;
@@ -55,30 +72,47 @@
   };
 
   const closeModal = () => {
-    selectedEvent = null;
+    selectedEvent = {};
     modalOpen = false;
   };
 
-  const addEventHandler = event => {
+  const addEventHandler = eventType => {
     const newEventHandler = {
       parameters: {},
       [EVENT_TYPE_MEMBER_NAME]: ""
     };
-    events = [...events, newEventHandler];
-    onPropChanged(newEventType, events);
+    // TODO: improve - just pass the event from props
+    selectedEvent = {
+      ...selectedEvent,
+      handlers: [...(selectedEvent.handlers || []), newEventHandler]
+    };
+    // events = [...events, newEventHandler];
+    onPropChanged(newEventType, [...selectedEvent.handlers, newEventHandler]);
   };
 
-  const changeEventHandler = newEvent => {
-    console.log({ events, newEventType, newEvent });
-    onPropChanged(newEventType, events);
+  const changeEventHandler = (updatedHandler, index) => {
+    // TODO: Improve
+    const handlers = [...selectedEvent.handlers];
+    handlers[index] = updatedHandler;
+
+    console.log("CHANGED HANDLERS", handlers);
+
+    selectedEvent = {
+      ...selectedEvent,
+      handlers
+    };
+
+    onPropChanged(newEventType, handlers);
   };
 
-  const removeEventHandler = index => () => {
-    events = filter(e => e !== events[index])(events);
-    onPropChanged(newEventType, []);
+  // TODO: verify
+  const removeEventHandler = index => {
+    const handlers = [...selectedEvent.handlers];
+    handlers.splice(index, 1);
+    onPropChanged(newEventType, handlers);
   };
 
-  console.log(events);
+  console.log("DA HANDLERS", selectedEvent.handlers);
 </script>
 
 <style>
@@ -104,46 +138,119 @@
     flex: 1 1 auto;
     min-width: 250px;
   }
+
+  .heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .handler-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 10px;
+    border: 2px solid #fafafa;
+  }
+
+  .hierarchy-item {
+    cursor: pointer;
+    padding: 11px 7px;
+    margin: 5px 0;
+    border-radius: 5px;
+  }
+
+  .hierarchy-item:hover {
+    background: #fafafa;
+  }
+
+  .selected {
+    color: var(--button-text);
+    background: var(--background-button) !important;
+  }
+
+  .event-name {
+  }
+
+  .handler-identifier {
+    font-size: 1.5em;
+  }
+
+  h2 {
+    color: var(--primary100);
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  /* TODO: Should be it's own component */
+  input {
+    font-size: 12px;
+    font-weight: 700;
+    color: #163057;
+    opacity: 0.7;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    border: 1px solid #dbdbdb;
+    border-radius: 2px;
+    outline: none;
+  }
+
+  .event-action {
+    background: #fafafa;
+  }
 </style>
 
-<h3>Events</h3>
+<div class="heading">
+  <h3>Events</h3>
+  <PlusButton on:click={() => openModal({})} />
+</div>
 
 <div class="root">
 
   <form class="uk-form-stacked form-root">
-    {#each events as event, index}
-      <div class="prop-container">
-        {event[0]}
-        <PencilIcon on:click={() => openModal({ ...event, index })} />
-      </div>
+    {#each events as [name, handlers], index}
+      {#if handlers.length > 0}
+        <div
+          class="handler-container hierarchy-item"
+          on:click={() => openModal({ name, handlers, index })}>
+          <span class="event-name">{name}</span>
+          <span class="edit-text">EDIT</span>
+          <span class="handler-identifier">updateState</span>
+        </div>
+      {/if}
     {/each}
   </form>
-  <button on:click={() => openModal()}>Create Event</button>
 </div>
 <Modal bind:isOpen={modalOpen} onClosed={closeModal}>
-  <h2>{action} Event</h2>
-  {#if selectedEvent}
-    {JSON.stringify(selectedEvent)}
-    <!-- <EventSelector
-      onChanged={onEventHandlerChanged(selectedEvent)}
-      onRemoved={removeHandler(selectedEvent && selectedEvent.index)}
-      event={selectedEvent} />
-    <div class="addelement-container" on:click={addHandler}>
-      <IconButton icon="plus" size="12" />
-    </div> -->
-  {:else}
-    <select bind:value={newEventType}>
-      {#each events as [name]}
-        <option value={name}>{name}</option>
-      {/each}
-    </select>
-    <EventSelector
-      onChanged={changeEventHandler}
-      onRemoved={removeEventHandler}
-      event={selectedEvent} />
-    <div class="addelement-container" on:click={addEventHandler}>
-      <IconButton icon="plus" size="12" />
-    </div>
-    <button>Save</button>
+  <h2>Create a New Component Event</h2>
+  <span>Click here to learn more about component events</span>
+
+  <h4>Event Name</h4>
+  <input type="text" />
+
+  <h4>Event Type</h4>
+  <select
+    class="type-selector uk-select uk-form-small"
+    bind:value={newEventType}>
+    {#each events as [name]}
+      <option value={name}>{name}</option>
+    {/each}
+  </select>
+
+  <h4>Event Action(s)</h4>
+  {#if selectedEvent.handlers}
+    {#each selectedEvent.handlers as handler, index}
+      <HandlerSelector
+        {index}
+        onChanged={changeEventHandler}
+        onRemoved={removeEventHandler}
+        {handler} />
+      <hr />
+    {/each}
   {/if}
+  <div
+    class="addelement-container"
+    on:click={() => addEventHandler(newEventType)}>
+    <IconButton icon="plus" size="12" />
+    Add Handler
+  </div>
 </Modal>
diff --git a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
new file mode 100644
index 0000000000..dffcb06278
--- /dev/null
+++ b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
@@ -0,0 +1,112 @@
+<script>
+  import IconButton from "../../common/IconButton.svelte";
+  import StateBindingControl from "./StateBindingControl.svelte";
+  import { find, map, keys, reduce, keyBy } from "lodash/fp";
+  import { pipe, userWithFullAccess } from "../../common/core";
+  import {
+    EVENT_TYPE_MEMBER_NAME,
+    allHandlers
+  } from "../../common/eventHandlers";
+  import { store } from "../../builderStore";
+
+  export let handler;
+  export let onChanged;
+  export let onRemoved;
+  export let index;
+
+  let eventOptions;
+  let handlerType;
+  let parameters = [];
+
+  $: eventOptions = allHandlers(
+    { hierarchy: $store.hierarchy },
+    userWithFullAccess({
+      hierarchy: $store.hierarchy,
+      actions: keyBy("name")($store.actions)
+    })
+  );
+
+  // TODO: refactor
+  $: {
+    if (handler) {
+      handlerType = handler[EVENT_TYPE_MEMBER_NAME];
+      parameters = Object.entries(handler.parameters).map(([name, value]) => ({
+        name,
+        value
+      }));
+    } else {
+      handlerType = "";
+      parameters = [];
+    }
+  }
+
+  const handlerChanged = (type, params) => {
+    const handlerParams = {};
+    for (let param of params) {
+      handlerParams[param.name] = param.value;
+    }
+
+    const updatedHandler = {
+      [EVENT_TYPE_MEMBER_NAME]: type,
+      parameters: handlerParams
+    };
+
+    onChanged(updatedHandler, index);
+  };
+
+  const handlerTypeChanged = e => {
+    const handlerType = eventOptions.find(
+      handler => handler.name === e.target.value
+    );
+    // Set default params for handler
+    const defaultParams = handlerType.parameters.map(param => ({
+      name: param,
+      value: ""
+    }));
+    handlerChanged(handlerType.name, defaultParams);
+  };
+
+  const onParameterChanged = index => value => {
+    const newParams = [...parameters];
+    newParams[index].value = value;
+    handlerChanged(handlerType, newParams);
+  };
+</script>
+
+<style>
+  .type-selector-container {
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    background: #fafafa;
+    padding: 22px;
+    border: 1px solid var(--primary75);
+  }
+
+  .type-selector {
+    border-color: var(--primary50);
+    border-radius: 2px;
+    width: 50px;
+    flex: 1 0 auto;
+  }
+</style>
+
+<div class="type-selector-container">
+  Action
+  <select
+    class="type-selector uk-select uk-form-small "
+    value={handlerType}
+    on:change={handlerTypeChanged}>
+    <option />
+    {#each eventOptions as option}
+      <option value={option.name}>{option.name}</option>
+    {/each}
+  </select>
+  {#if parameters}
+    {#each parameters as param, index}
+      <div>{param.name}</div>
+      <StateBindingControl
+        onChanged={onParameterChanged(index)}
+        value={param.value} />
+    {/each}
+  {/if}
+</div>
diff --git a/packages/builder/src/userInterface/EventsEditor/index.js b/packages/builder/src/userInterface/EventsEditor/index.js
index 7782e7fccd..e010de3c69 100644
--- a/packages/builder/src/userInterface/EventsEditor/index.js
+++ b/packages/builder/src/userInterface/EventsEditor/index.js
@@ -1 +1,7 @@
+export const deleteElement = (array, index) => {
+  const arr = [...array];
+  array.splice(index, 1);
+  return arr;
+};
+
 export { default } from "./EventsEditor.svelte";
\ No newline at end of file
diff --git a/packages/server/app.js b/packages/server/app.js
index 5cfc2a432c..974c9a3593 100644
--- a/packages/server/app.js
+++ b/packages/server/app.js
@@ -14,7 +14,7 @@ module.exports = async (budibaseContext) => {
         app.context.master,
         config.latestPackagesFolder
     );
-    app.use(koaBody({ multipart : true }));
+    app.use(koaBody({ multipart: true }));
     app.use(router(config, app).routes());
     return app.listen(config.port);
 };

From eed1f1d30f3ffad68b60a4396c1a5f1b645f66d2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 29 Jan 2020 22:59:10 +0000
Subject: [PATCH 3/8] started implementing state management designs

---
 .../builder/src/common/Icons/Events.svelte    |   3 +-
 packages/builder/src/common/Select.svelte     |  54 +++++++++
 .../EventsEditor/EventEditorModal.svelte      | 104 +++++++++++++-----
 .../EventsEditor/EventsEditor.svelte          |  91 ++-------------
 .../EventsEditor/HandlerSelector.svelte       |  41 ++++---
 5 files changed, 165 insertions(+), 128 deletions(-)
 create mode 100644 packages/builder/src/common/Select.svelte

diff --git a/packages/builder/src/common/Icons/Events.svelte b/packages/builder/src/common/Icons/Events.svelte
index d3728b9901..b7d92481e3 100644
--- a/packages/builder/src/common/Icons/Events.svelte
+++ b/packages/builder/src/common/Icons/Events.svelte
@@ -4,5 +4,6 @@
   width="24"
   height="24">
   <path fill="none" d="M0 0h24v24H0z" />
-  <path d="M13 10h7l-9 13v-9H4l9-13z" />
+  <path
+    d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z" />
 </svg>
diff --git a/packages/builder/src/common/Select.svelte b/packages/builder/src/common/Select.svelte
new file mode 100644
index 0000000000..9053803ca7
--- /dev/null
+++ b/packages/builder/src/common/Select.svelte
@@ -0,0 +1,54 @@
+<script>
+  import getIcon from "./icon";
+  export let value;
+</script>
+
+<style>
+  .select-container {
+    padding-bottom: 10px;
+    font-size: 0.9rem;
+    color: var(--secondary50);
+    font-weight: bold;
+    position: relative;
+  }
+
+  select {
+    display: block;
+    font-size: 16px;
+    font-family: sans-serif;
+    font-weight: 700;
+    color: #444;
+    line-height: 1.3;
+    padding: 1em 2.6em 0.9em 1.4em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    border-radius: 0.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #fafafa;
+  }
+
+  .arrow {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    width: 30px;
+    height: 30px;
+    pointer-events: none;
+    color: var(--primary100);
+  }
+</style>
+
+<div class="select-container">
+  <select on:change {value}>
+    <slot />
+  </select>
+  <span class="arrow">
+    {@html getIcon('chevron-down', '24')}
+  </span>
+</div>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
index 6cb72f6310..3fa7ab44f9 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,49 +1,95 @@
 <script>
   import Modal from "../../common/Modal.svelte";
   import EventSelector from "../EventSelector.svelte";
+  import HandlerSelector from "./HandlerSelector.svelte";
+  import IconButton from "../../common/IconButton.svelte";
+  import Select from "../../common/Select.svelte";
 
   export let event;
+  export let events;
   export let open;
   export let closeModal;
+  export let changeEventHandler;
+  export let removeEventHandler;
+  export let addEventHandler;
 
-  $: action = open && event ? "Edit" : "Create";
-
+  let newEventType = "onClick";
 </script>
 
-<Modal isOpen={open} onClosed={closeModal}>
-  <h2>{action} Event</h2>
-  <EventSelector 
-    onChanged={console.log}
-    onRemoved={console.log}
-    {event} 
-  />
-</Modal>
-
 <style>
-  h3 {
-    text-transform: uppercase;
+  h2 {
+    color: var(--primary100);
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  h4 {
+    font-size: 0.7em;
+  }
+
+  /* TODO: Should be it's own component */
+  input {
     font-size: 12px;
     font-weight: 700;
-    color: #8997ab;
-    margin-bottom: 10px;
+    color: #163057;
+    opacity: 0.7;
+    padding: 5px 10px;
+    box-sizing: border-box;
+    border: 1px solid #dbdbdb;
+    border-radius: 2px;
+    outline: none;
   }
 
-  .root {
-    font-size: 10pt;
-    width: 100%;
+  .event-action {
+    background: #fafafa;
   }
 
-  .form-root {
+  .event-options {
     display: flex;
-    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
   }
+</style>
 
-  .prop-container {
-    flex: 1 1 auto;
-    min-width: 250px;
-  }
-  
-  .edit-icon:hover {
-    cursor: pointer;
-  }
-</style>
\ No newline at end of file
+<Modal bind:isOpen={open} onClosed={closeModal}>
+  {#if event}
+    <h2>{event.name}</h2>
+  {:else}
+    <h2>Create a New Component Event</h2>
+  {/if}
+  <span>Click here to learn more about component events</span>
+
+  <div class="event-options">
+    <div>
+      <h5>Event Name</h5>
+      <input type="text" />
+    </div>
+
+    <div>
+      <h5>Event Type</h5>
+      <Select bind:value={newEventType}>
+        {#each events as [name]}
+          <option value={name}>{name}</option>
+        {/each}
+      </Select>
+    </div>
+  </div>
+
+  <h5>Event Action(s)</h5>
+  {#if event.handlers}
+    {#each event.handlers as handler, index}
+      <HandlerSelector
+        {index}
+        onChanged={changeEventHandler}
+        onRemoved={() => removeEventHandler(index)}
+        {handler} />
+      <hr />
+    {/each}
+  {/if}
+  <div
+    class="addelement-container"
+    on:click={() => addEventHandler(newEventType)}>
+    <IconButton icon="plus" size="12" />
+    Add Handler
+  </div>
+</Modal>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
index fa21f2c56a..2947ca1b42 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
@@ -17,6 +17,7 @@
   import PlusButton from "../../common/PlusButton.svelte";
   import IconButton from "../../common/IconButton.svelte";
   import Modal from "../../common/Modal.svelte";
+  import EventEditorModal from "./EventEditorModal.svelte";
   import HandlerSelector from "./HandlerSelector.svelte";
 
   import { PencilIcon } from "../../common/Icons";
@@ -28,12 +29,6 @@
   export let onPropChanged = () => {};
   export let components;
 
-  // Structure
-  // {
-  //    [eventName]: [{eventHandler}, {eventHandler1}],
-  //    [eventName1]: [{eventHandler}, {eventHandler1}],
-  // }
-
   let modalOpen = false;
   let events = [];
   let selectedEvent = {};
@@ -41,15 +36,6 @@
 
   // TODO: only show events that have handlers
 
-  // $: {
-  //   let componentEvents = {};
-  //   for (let propName in componentInfo) {
-  //     const isEventProp = findType(propName) === EVENT_TYPE;
-  //     if (isEventProp) componentEvents[propName] = componentInfo[propName];
-  //   }
-  //   events = componentEvents;
-  // }
-
   $: events =
     componentInfo &&
     Object.entries(componentInfo).filter(
@@ -64,8 +50,6 @@
       .props[propName];
   }
 
-  console.log({ componentInfo, events, components });
-
   const openModal = event => {
     selectedEvent = event;
     modalOpen = true;
@@ -111,8 +95,6 @@
     handlers.splice(index, 1);
     onPropChanged(newEventType, handlers);
   };
-
-  console.log("DA HANDLERS", selectedEvent.handlers);
 </script>
 
 <style>
@@ -134,11 +116,6 @@
     flex-wrap: wrap;
   }
 
-  .prop-container {
-    flex: 1 1 auto;
-    min-width: 250px;
-  }
-
   .heading {
     display: flex;
     align-items: center;
@@ -175,28 +152,6 @@
     font-size: 1.5em;
   }
 
-  h2 {
-    color: var(--primary100);
-    font-size: 20px;
-    font-weight: bold;
-  }
-
-  /* TODO: Should be it's own component */
-  input {
-    font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.7;
-    padding: 5px 10px;
-    box-sizing: border-box;
-    border: 1px solid #dbdbdb;
-    border-radius: 2px;
-    outline: none;
-  }
-
-  .event-action {
-    background: #fafafa;
-  }
 </style>
 
 <div class="heading">
@@ -210,7 +165,7 @@
     {#each events as [name, handlers], index}
       {#if handlers.length > 0}
         <div
-          class="handler-container hierarchy-item"
+          class="handler-container hierarchy-item {selectedEvent.index === index ? 'selected' : ''}"
           on:click={() => openModal({ name, handlers, index })}>
           <span class="event-name">{name}</span>
           <span class="edit-text">EDIT</span>
@@ -220,37 +175,11 @@
     {/each}
   </form>
 </div>
-<Modal bind:isOpen={modalOpen} onClosed={closeModal}>
-  <h2>Create a New Component Event</h2>
-  <span>Click here to learn more about component events</span>
-
-  <h4>Event Name</h4>
-  <input type="text" />
-
-  <h4>Event Type</h4>
-  <select
-    class="type-selector uk-select uk-form-small"
-    bind:value={newEventType}>
-    {#each events as [name]}
-      <option value={name}>{name}</option>
-    {/each}
-  </select>
-
-  <h4>Event Action(s)</h4>
-  {#if selectedEvent.handlers}
-    {#each selectedEvent.handlers as handler, index}
-      <HandlerSelector
-        {index}
-        onChanged={changeEventHandler}
-        onRemoved={removeEventHandler}
-        {handler} />
-      <hr />
-    {/each}
-  {/if}
-  <div
-    class="addelement-container"
-    on:click={() => addEventHandler(newEventType)}>
-    <IconButton icon="plus" size="12" />
-    Add Handler
-  </div>
-</Modal>
+<EventEditorModal
+  open={modalOpen}
+  onClose={closeModal}
+  event={selectedEvent}
+  {events}
+  {addEventHandler}
+  {changeEventHandler}
+  {removeEventHandler} />
diff --git a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
index dffcb06278..9c30efb266 100644
--- a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
@@ -1,5 +1,6 @@
 <script>
   import IconButton from "../../common/IconButton.svelte";
+  import Select from "../../common/Select.svelte";
   import StateBindingControl from "./StateBindingControl.svelte";
   import { find, map, keys, reduce, keyBy } from "lodash/fp";
   import { pipe, userWithFullAccess } from "../../common/core";
@@ -76,7 +77,8 @@
 <style>
   .type-selector-container {
     display: grid;
-    grid-template-rows: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
     background: #fafafa;
     padding: 22px;
     border: 1px solid var(--primary75);
@@ -85,28 +87,33 @@
   .type-selector {
     border-color: var(--primary50);
     border-radius: 2px;
-    width: 50px;
     flex: 1 0 auto;
   }
+
+  .handler-option {
+    display: flex;
+    flex-direction: column;
+  }
 </style>
 
 <div class="type-selector-container">
-  Action
-  <select
-    class="type-selector uk-select uk-form-small "
-    value={handlerType}
-    on:change={handlerTypeChanged}>
-    <option />
-    {#each eventOptions as option}
-      <option value={option.name}>{option.name}</option>
-    {/each}
-  </select>
+  <div class="handler-option">
+    Action
+    <Select value={handlerType} on:change={handlerTypeChanged}>
+      <option />
+      {#each eventOptions as option}
+        <option value={option.name}>{option.name}</option>
+      {/each}
+    </Select>
+  </div>
   {#if parameters}
-    {#each parameters as param, index}
-      <div>{param.name}</div>
-      <StateBindingControl
-        onChanged={onParameterChanged(index)}
-        value={param.value} />
+    {#each parameters as param, idx}
+      <div class="handler-option">
+        <div>{param.name}</div>
+        <StateBindingControl
+          onChanged={onParameterChanged(idx)}
+          value={param.value} />
+      </div>
     {/each}
   {/if}
 </div>

From 977a6092307701e5455d835ba0353718eb9a488d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 30 Jan 2020 16:22:19 +0000
Subject: [PATCH 4/8] state management like designs

---
 .../builder/src/common/ActionButton.svelte    |  30 +++
 packages/builder/src/common/Input.svelte      |  27 +++
 packages/builder/src/common/Modal.svelte      |   1 +
 packages/builder/src/common/Select.svelte     |  11 +-
 .../src/userInterface/ComponentPanel.svelte   |   1 +
 .../userInterface/EventListSelector.svelte    |  88 ---------
 .../src/userInterface/EventSelector.svelte    | 105 -----------
 .../EventsEditor/EventEditorModal.svelte      | 127 ++++++++-----
 .../EventsEditor/EventsEditor.svelte          | 114 +++++------
 .../EventsEditor/HandlerSelector.svelte       |  80 +++++---
 .../EventsEditor/StateBindingControl.svelte   | 177 ------------------
 .../userInterface/StateBindingControl.svelte  |  11 +-
 12 files changed, 241 insertions(+), 531 deletions(-)
 create mode 100644 packages/builder/src/common/ActionButton.svelte
 create mode 100644 packages/builder/src/common/Input.svelte
 delete mode 100644 packages/builder/src/userInterface/EventListSelector.svelte
 delete mode 100644 packages/builder/src/userInterface/EventSelector.svelte
 delete mode 100644 packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte

diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte
new file mode 100644
index 0000000000..4a09d55943
--- /dev/null
+++ b/packages/builder/src/common/ActionButton.svelte
@@ -0,0 +1,30 @@
+<script>
+  export let disabled = false;
+</script>
+
+<style>
+  .action-button {
+    color: #0055ff;
+    background: rgb(54, 133, 249, 0.1);
+    font-size: 18px;
+    font-weight: bold;
+    border-radius: 5px;
+    border: none;
+    width: 167px;
+    height: 64px;
+  }
+
+  .action-button:hover {
+    cursor: pointer;
+  }
+
+  .action-button:disabled {
+    color:#163057;
+    cursor: default;
+    background: transparent;
+  }
+</style>
+
+<button on:click class="action-button" {disabled}>
+  <slot />
+</button>
diff --git a/packages/builder/src/common/Input.svelte b/packages/builder/src/common/Input.svelte
new file mode 100644
index 0000000000..04938b670a
--- /dev/null
+++ b/packages/builder/src/common/Input.svelte
@@ -0,0 +1,27 @@
+<script>
+  export let value = "";
+</script>
+
+<style>
+  input {
+    display: block;
+    font-size: 14px;
+    font-family: sans-serif;
+    font-weight: 500;
+    color: #163057;
+    line-height: 1.3;
+    padding: 1em 2.6em 0.9em 1.4em;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #fff;
+    border: 1px solid #ccc;
+    height: 50px;
+  }
+</style>
+
+<input type="text" on:change bind:value />
diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte
index 0f47d553a0..3e716f5c9a 100644
--- a/packages/builder/src/common/Modal.svelte
+++ b/packages/builder/src/common/Modal.svelte
@@ -36,6 +36,7 @@ $: {
 
 .uk-modal-dialog {
     border-radius: .3rem;
+    width: 60%;
 }
 
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/common/Select.svelte b/packages/builder/src/common/Select.svelte
index 9053803ca7..bebad32c38 100644
--- a/packages/builder/src/common/Select.svelte
+++ b/packages/builder/src/common/Select.svelte
@@ -14,21 +14,22 @@
 
   select {
     display: block;
-    font-size: 16px;
+    font-size: 14px;
     font-family: sans-serif;
-    font-weight: 700;
-    color: #444;
+    font-weight: 500;
+    color: #163057;
     line-height: 1.3;
     padding: 1em 2.6em 0.9em 1.4em;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
     margin: 0;
-    border-radius: 0.5em;
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
-    background-color: #fafafa;
+    background: #fff;
+    border: 1px solid #ccc;
+    height: 50px;
   }
 
   .arrow {
diff --git a/packages/builder/src/userInterface/ComponentPanel.svelte b/packages/builder/src/userInterface/ComponentPanel.svelte
index 1fa8ce0642..d4d982f2e2 100644
--- a/packages/builder/src/userInterface/ComponentPanel.svelte
+++ b/packages/builder/src/userInterface/ComponentPanel.svelte
@@ -18,6 +18,7 @@
 
     const onPropChanged = store.setComponentProp;
     const onStyleChanged = store.setComponentStyle;
+
 </script>
 
 <div class="root">
diff --git a/packages/builder/src/userInterface/EventListSelector.svelte b/packages/builder/src/userInterface/EventListSelector.svelte
deleted file mode 100644
index cfbe20345d..0000000000
--- a/packages/builder/src/userInterface/EventListSelector.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-<script>
-    import IconButton from "../common/IconButton.svelte";
-    import EventSelector from "./EventSelector.svelte";
-    import {
-        filter
-    } from "lodash/fp";
-    import {EVENT_TYPE_MEMBER_NAME} from "../common/eventHandlers";
-
-    export let parentProps;
-    export let propDef;
-    export let onValueChanged;
-
-    $:  events = parentProps[propDef.____name];
-
-    const addHandler = () => {
-        const newHandler = {parameters:{}};
-        newHandler[EVENT_TYPE_MEMBER_NAME] = "";
-        events = [...events, newHandler];
-        onValueChanged(events);
-    }
-
-    const onEventHandlerChanged = (oldEvent) => (newEvent) => {
-        const indexOfOldEvent = events.indexOf(oldEvent);
-        const newEvents = [...events];
-        newEvents.splice(
-            events.indexOf(oldEvent),
-            1,
-            newEvent);
-        events = newEvents;
-        onValueChanged(events);
-    }
-
-    const removeHandler = (index) => () => {
-        events = filter(e => e !== events[index])(events);
-        onValueChanged(events);
-    }
-
-</script>
-
-<div class="root">
-    <div class="control-container">
-        {#each events as ev, index}
-
-        <div class="handler-container">
-            <EventSelector onChanged={onEventHandlerChanged(ev)}
-                        onRemoved={removeHandler(index)}
-                        event={ev} />
-
-        </div>
-
-        <div class="separator"></div>
-        {/each}
-
-        <div class="addelement-container"
-             on:click={addHandler}>
-            <IconButton icon="plus"
-                            size="12"/>
-        </div>
-    </div>
-</div>
-
-
-<style>
-    .addelement-container {
-        cursor: pointer;
-        padding: 3px 0px;
-        text-align: center;
-    }
-
-    .addelement-container:hover {
-        background-color: var(--primary25);
-        margin-top: 5px;
-    }
-
-
-    .control-container {
-        padding-left: 3px;
-        background: var(--secondary10);
-    }
-
-    .separator {
-        width: 60%;
-        margin: 10px auto;
-        border-style:solid;
-        border-width: 1px 0 0 0;
-        border-color: var(--primary25);
-    }
-</style>
diff --git a/packages/builder/src/userInterface/EventSelector.svelte b/packages/builder/src/userInterface/EventSelector.svelte
deleted file mode 100644
index e109d8122d..0000000000
--- a/packages/builder/src/userInterface/EventSelector.svelte
+++ /dev/null
@@ -1,105 +0,0 @@
-<script>
-    import IconButton from "../common/IconButton.svelte";
-    import StateBindingControl from "./StateBindingControl.svelte";
-    import {
-        find, map, keys, reduce, keyBy
-    } from "lodash/fp";
-    import { pipe, userWithFullAccess } from "../common/core";
-    import { EVENT_TYPE_MEMBER_NAME, allHandlers } from "../common/eventHandlers";
-    import { store } from "../builderStore";
-
-    export let event;
-    export let onChanged;
-    export let onRemoved;
-
-    let eventType;
-    let parameters = [];
-
-
-    $: events = allHandlers(
-        {hierarchy: $store.hierarchy},
-        userWithFullAccess({
-            hierarchy: s.hierarchy,
-            actions: keyBy("name")($store.actions)
-        })
-    );
-
-    $: if(event) {
-            eventType = event[EVENT_TYPE_MEMBER_NAME];
-            parameters = pipe(event.parameters, [
-                keys,
-                map(k => ({name:k, value:event.parameters[k]}))
-            ]);
-        } else {
-            eventType = "";
-            parameters = [];
-        }
-
-    const eventChanged = (type, parameters) => {
-        const paramsAsObject = reduce(
-            (obj, p) => {
-                obj[p.name] = p.value;
-                return obj;
-            }
-            , {}
-        )(parameters)
-
-        const ev = {};
-        ev[EVENT_TYPE_MEMBER_NAME]=type;
-        ev.parameters = paramsAsObject;
-
-        onChanged(ev);
-    }
-
-    const eventTypeChanged = (ev) => {
-        const eType = find(e => e.name === ev.target.value)(events);
-        const emptyParameters = map(p => ({name:p, value:""}))(eType.parameters);
-        eventChanged(eType.name, emptyParameters);
-    }
-
-    const onParameterChanged = index => val => {
-        const newparameters = [...parameters];
-        newparameters[index].value = val;
-        eventChanged(eventType, newparameters);
-    }
-
-</script>
-
-<div class="type-selector-container">
-    <select class="type-selector uk-select uk-form-small " value={eventType} on:change={eventTypeChanged}>
-        <option></option>
-        {#each events as ev}
-        <option value={ev.name}>{ev.name}</option>
-        {/each}
-    </select>
-
-    <IconButton icon="trash"
-                size="12"
-                on:click={onRemoved}/>
-
-</div>
-
-{#if parameters}
-    {#each parameters as p, index}
-
-        <div>
-            {p.name}
-        </div>
-        <StateBindingControl  onChanged={onParameterChanged(index)}
-                            value={p.value} />
-
-    {/each}
-{/if}
-
-<style>
-    .type-selector-container {
-        display: flex;
-    }
-
-    .type-selector {
-        border-color: var(--primary50);
-        border-radius: 2px;
-        width: 50px;
-        flex: 1 0 auto;
-    }
-</style>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
index 3fa7ab44f9..74e3e956a2 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,19 +1,58 @@
 <script>
   import Modal from "../../common/Modal.svelte";
-  import EventSelector from "../EventSelector.svelte";
   import HandlerSelector from "./HandlerSelector.svelte";
   import IconButton from "../../common/IconButton.svelte";
+  import ActionButton from "../../common/ActionButton.svelte";
+  import PlusButton from "../../common/PlusButton.svelte";
   import Select from "../../common/Select.svelte";
+  import Input from "../../common/Input.svelte";
+
+  import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers";
 
   export let event;
+
   export let events;
   export let open;
-  export let closeModal;
-  export let changeEventHandler;
-  export let removeEventHandler;
-  export let addEventHandler;
+  export let onClose;
+  export let onPropChanged;
 
-  let newEventType = "onClick";
+  let eventType = "onClick";
+  let newEventHandler = { parameters: [] };
+  let eventData = event || { handlers: [] };
+
+  const changeEventHandler = (updatedHandler, index) => {
+    eventData.handlers[index] = updatedHandler;
+  };
+
+  const changeNewEventHandler = updatedHandler => {
+    newEventHandler = updatedHandler;
+  };
+
+  const deleteEventHandler = index => {
+    eventData.handlers.splice(index, 1);
+    eventData = eventData;
+  };
+
+  const createNewEventHandler = handler => {
+    const newHandler = handler || {
+      parameters: {},
+      [EVENT_TYPE_MEMBER_NAME]: ""
+    };
+    eventData.handlers.push(newHandler);
+    eventData = eventData;
+  };
+
+  const deleteEvent = () => {
+    onPropChanged(eventType, []);
+    eventData = { handlers: [] };
+    onClose();
+  };
+
+  const saveEventData = () => {
+    onPropChanged(eventType, eventData.handlers);
+    eventData = { handlers: [] };
+    onClose();
+  };
 </script>
 
 <style>
@@ -21,75 +60,63 @@
     color: var(--primary100);
     font-size: 20px;
     font-weight: bold;
+    margin-bottom: 0;
   }
 
-  h4 {
-    font-size: 0.7em;
-  }
-
-  /* TODO: Should be it's own component */
-  input {
-    font-size: 12px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.7;
-    padding: 5px 10px;
-    box-sizing: border-box;
-    border: 1px solid #dbdbdb;
-    border-radius: 2px;
-    outline: none;
-  }
-
-  .event-action {
-    background: #fafafa;
+  h5 {
+    color: rgba(22, 48, 87, 0.6);
+    font-size: 16px;
+    margin-bottom: 5px;
   }
 
   .event-options {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+  }
+
+  .actions {
     display: flex;
-    align-items: center;
     justify-content: space-between;
   }
 </style>
 
-<Modal bind:isOpen={open} onClosed={closeModal}>
-  {#if event}
-    <h2>{event.name}</h2>
-  {:else}
-    <h2>Create a New Component Event</h2>
-  {/if}
-  <span>Click here to learn more about component events</span>
+<Modal bind:isOpen={open} onClosed={onClose}>
+  <h2>{eventData.name || "Create a New Component Event"}</h2>
+  <p>Click here to learn more about component events</p>
 
   <div class="event-options">
-    <div>
-      <h5>Event Name</h5>
-      <input type="text" />
-    </div>
-
     <div>
       <h5>Event Type</h5>
-      <Select bind:value={newEventType}>
-        {#each events as [name]}
-          <option value={name}>{name}</option>
+      <Select bind:value={eventType}>
+        {#each events as event}
+          <option value={event.name}>{event.name}</option>
         {/each}
       </Select>
     </div>
   </div>
 
   <h5>Event Action(s)</h5>
-  {#if event.handlers}
-    {#each event.handlers as handler, index}
+  <HandlerSelector
+    newHandler
+    onChanged={changeNewEventHandler}
+    onCreate={() => { 
+      createNewEventHandler(newEventHandler)
+      newEventHandler = { parameters: [] };
+    }}
+    handler={newEventHandler} />
+  {#if eventData}
+    {#each eventData.handlers as handler, index}
       <HandlerSelector
         {index}
         onChanged={changeEventHandler}
-        onRemoved={() => removeEventHandler(index)}
+        onRemoved={() => deleteEventHandler(index)}
         {handler} />
-      <hr />
     {/each}
   {/if}
-  <div
-    class="addelement-container"
-    on:click={() => addEventHandler(newEventType)}>
-    <IconButton icon="plus" size="12" />
-    Add Handler
+
+  <div class="actions">
+    <ActionButton on:click={deleteEvent}>Delete</ActionButton>
+    <ActionButton disabled={eventData.handlers.length === 0} on:click={saveEventData}>Save</ActionButton>
   </div>
 </Modal>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
index 2947ca1b42..f351befc8d 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
@@ -31,18 +31,13 @@
 
   let modalOpen = false;
   let events = [];
-  let selectedEvent = {};
-  let newEventType = "onClick";
+  let selectedEvent = null;
 
-  // TODO: only show events that have handlers
-
-  $: events =
-    componentInfo &&
-    Object.entries(componentInfo).filter(
-      ([name]) => findType(name) == EVENT_TYPE
-    );
-
-  $: action = selectedEvent ? "Edit" : "Create";
+  $: { 
+    events = Object.keys(componentInfo)
+    .filter(key => componentInfo[key].length && findType(key) === EVENT_TYPE)
+    .map(key => ({ name: key, handlers: componentInfo[key] }));
+  }
 
   function findType(propName) {
     if (!componentInfo._component) return;
@@ -56,45 +51,9 @@
   };
 
   const closeModal = () => {
-    selectedEvent = {};
+    selectedEvent = null;
     modalOpen = false;
   };
-
-  const addEventHandler = eventType => {
-    const newEventHandler = {
-      parameters: {},
-      [EVENT_TYPE_MEMBER_NAME]: ""
-    };
-    // TODO: improve - just pass the event from props
-    selectedEvent = {
-      ...selectedEvent,
-      handlers: [...(selectedEvent.handlers || []), newEventHandler]
-    };
-    // events = [...events, newEventHandler];
-    onPropChanged(newEventType, [...selectedEvent.handlers, newEventHandler]);
-  };
-
-  const changeEventHandler = (updatedHandler, index) => {
-    // TODO: Improve
-    const handlers = [...selectedEvent.handlers];
-    handlers[index] = updatedHandler;
-
-    console.log("CHANGED HANDLERS", handlers);
-
-    selectedEvent = {
-      ...selectedEvent,
-      handlers
-    };
-
-    onPropChanged(newEventType, handlers);
-  };
-
-  // TODO: verify
-  const removeEventHandler = index => {
-    const handlers = [...selectedEvent.handlers];
-    handlers.splice(index, 1);
-    onPropChanged(newEventType, handlers);
-  };
 </script>
 
 <style>
@@ -125,8 +84,7 @@
   .handler-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    grid-gap: 10px;
-    border: 2px solid #fafafa;
+    border: 2px solid #f9f9f9;
   }
 
   .hierarchy-item {
@@ -134,52 +92,66 @@
     padding: 11px 7px;
     margin: 5px 0;
     border-radius: 5px;
+    font-size: 1.5em;
+    width: 100%;
   }
 
   .hierarchy-item:hover {
-    background: #fafafa;
+    background: #f9f9f9;
+  }
+
+  .event-name {
+    font-size: 12px;
+    color: rgba(35, 65, 105, 0.4);
+    grid-column: 1 / span 2;
+  }
+
+  .event-identifier {
+    margin-top: 5px;
+    font-weight: bold;
+    font-size: 16px;
+    color: rgba(22, 48, 87, 0.6)
+  }
+
+  .edit-text {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    align-self: end;
+    justify-self: end;
+    font-size: 10px;
+    color: rgba(35, 65, 105, 0.4);
   }
 
   .selected {
     color: var(--button-text);
     background: var(--background-button) !important;
   }
-
-  .event-name {
-  }
-
-  .handler-identifier {
-    font-size: 1.5em;
-  }
-
 </style>
 
 <div class="heading">
   <h3>Events</h3>
-  <PlusButton on:click={() => openModal({})} />
+  <PlusButton on:click={() => openModal()} />
 </div>
 
 <div class="root">
-
   <form class="uk-form-stacked form-root">
-    {#each events as [name, handlers], index}
-      {#if handlers.length > 0}
+    {#each events as event, index}
+      {#if event.handlers.length > 0}
         <div
-          class="handler-container hierarchy-item {selectedEvent.index === index ? 'selected' : ''}"
-          on:click={() => openModal({ name, handlers, index })}>
-          <span class="event-name">{name}</span>
+          class="handler-container hierarchy-item {selectedEvent && selectedEvent.index === index ? 'selected' : ''}"
+          on:click={() => openModal({ ...event, index })}>
+          <span class="event-name">{event.name}</span>
+          <span class="event-identifier">{event.name}</span>
           <span class="edit-text">EDIT</span>
-          <span class="handler-identifier">updateState</span>
         </div>
       {/if}
     {/each}
   </form>
 </div>
 <EventEditorModal
+  {onPropChanged}
+  events={events}
   open={modalOpen}
   onClose={closeModal}
   event={selectedEvent}
-  {events}
-  {addEventHandler}
-  {changeEventHandler}
-  {removeEventHandler} />
+  />
diff --git a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
index 9c30efb266..b84f371f73 100644
--- a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
@@ -1,7 +1,8 @@
 <script>
   import IconButton from "../../common/IconButton.svelte";
+  import PlusButton from "../../common/PlusButton.svelte";
   import Select from "../../common/Select.svelte";
-  import StateBindingControl from "./StateBindingControl.svelte";
+  import StateBindingControl from "../StateBindingControl.svelte";
   import { find, map, keys, reduce, keyBy } from "lodash/fp";
   import { pipe, userWithFullAccess } from "../../common/core";
   import {
@@ -11,9 +12,12 @@
   import { store } from "../../builderStore";
 
   export let handler;
+  export let onCreate;
   export let onChanged;
   export let onRemoved;
+
   export let index;
+  export let newHandler;
 
   let eventOptions;
   let handlerType;
@@ -76,44 +80,60 @@
 
 <style>
   .type-selector-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 10px;
-    background: #fafafa;
-    padding: 22px;
-    border: 1px solid var(--primary75);
-  }
-
-  .type-selector {
-    border-color: var(--primary50);
-    border-radius: 2px;
-    flex: 1 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(223, 223, 223, 0.5);
+    border: 1px solid #dfdfdf;
+    margin-bottom: 18px;
   }
 
   .handler-option {
     display: flex;
     flex-direction: column;
   }
+
+  .handler-option > div {
+    margin-bottom: 5px;
+  }
+
+  .new-handler {
+    background: #fff;
+  }
+
+  .handler-controls {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+    padding: 22px;
+  }
 </style>
 
-<div class="type-selector-container">
-  <div class="handler-option">
-    Action
-    <Select value={handlerType} on:change={handlerTypeChanged}>
-      <option />
-      {#each eventOptions as option}
-        <option value={option.name}>{option.name}</option>
+<div class="type-selector-container {newHandler && 'new-handler'}">
+  <div class="handler-controls">
+    <div class="handler-option">
+      Action
+      <Select value={handlerType} on:change={handlerTypeChanged}>
+        <option />
+        {#each eventOptions as option}
+          <option value={option.name}>{option.name}</option>
+        {/each}
+      </Select>
+    </div>
+    {#if parameters}
+      {#each parameters as param, idx}
+        <div class="handler-option">
+          <div>{param.name}</div>
+          <StateBindingControl
+            onChanged={onParameterChanged(idx)}
+            value={param.value} />
+        </div>
       {/each}
-    </Select>
+    {/if}
   </div>
-  {#if parameters}
-    {#each parameters as param, idx}
-      <div class="handler-option">
-        <div>{param.name}</div>
-        <StateBindingControl
-          onChanged={onParameterChanged(idx)}
-          value={param.value} />
-      </div>
-    {/each}
+  {#if newHandler}
+    <PlusButton on:click={onCreate} />
+  {:else}
+    <IconButton icon="x" on:click={onRemoved} />
   {/if}
 </div>
diff --git a/packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte b/packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte
deleted file mode 100644
index f8e6ca6da8..0000000000
--- a/packages/builder/src/userInterface/EventsEditor/StateBindingControl.svelte
+++ /dev/null
@@ -1,177 +0,0 @@
-<script>
-import {
-    isString
-} from "lodash/fp";
-import IconButton from "../../common/IconButton.svelte";
-import {
-    isBinding, getBinding, setBinding
-} from "../../common/binding";
-
-export let value="";
-export let onChanged= () => {};
-export let type="";
-export let options=[];
-
-let isBound=false;
-let bindingPath="";
-let bindingFallbackValue="";
-let bindingSource="store";
-let isExpanded = false;
-let forceIsBound = false;
-let canOnlyBind = false;
-
-$: {
-    canOnlyBind = type === "state";
-    if(!forceIsBound && canOnlyBind)
-        forceIsBound = true;
-
-    isBound= forceIsBound || isBinding(value);
-
-    if(isBound) {
-        const binding = getBinding(value);
-        bindingPath= binding.path;
-        bindingFallbackValue= binding.fallback;
-        bindingSource = binding.source || "store";
-    } else {
-        bindingPath="";
-        bindingFallbackValue="";
-        bindingSource="store";
-    }
-}
-
-const clearBinding = () => {
-    forceIsBound = false;
-    onChanged("");
-}
-
-const bind = (path, fallback, source) => {
-    if(!path) {
-        clearBinding("");
-        return;
-    }
-    const binding = setBinding({path, fallback, source});
-    onChanged(binding);
-}
-
-const setBindingPath = ev => {
-    forceIsBound = canOnlyBind;
-    bind(ev.target.value, bindingFallbackValue, bindingSource)
-}
-
-const setBindingFallback = ev => {
-    bind(bindingPath, ev.target.value, bindingSource);
-}
-
-const setBindingSource = ev => {
-    bind(bindingPath, bindingFallbackValue, ev.target.value);
-}
-
-// const makeBinding = () => {
-//     forceIsBound=true;
-//     isExpanded=true;
-// }
-
-</script>
-
-{#if isBound}
-<div>
-    <div class="bound-header">
-        <div>{isExpanded ? "" : bindingPath}</div>
-        <IconButton icon={isExpanded ? "chevron-up" : "chevron-down"}
-                    size="12"
-                    on:click={() => isExpanded=!isExpanded}/>
-        {#if !canOnlyBind}
-        <IconButton icon="trash"
-                    size="12"
-                    on:click={clearBinding}/>
-        {/if}
-    </div>
-    {#if isExpanded}
-    <div>
-        <div class="binding-prop-label">Binding Path</div>
-        <input class="uk-input uk-form-small"
-               value={bindingPath}
-               on:change={setBindingPath} >
-        <div class="binding-prop-label">Fallback Value</div>
-        <input class="uk-input uk-form-small"
-               value={bindingFallbackValue}
-               on:change={setBindingFallback} >
-        <div class="binding-prop-label">Binding Source</div>
-        <select class="uk-select uk-form-small"
-            value={bindingSource}
-            on:change={setBindingSource}>
-
-            <option>store</option>
-            <option>context</option>
-
-        </select>
-    </div>
-    {/if}
-
-</div>
-{:else}
-<div class="unbound-container">
-
-    {#if type === "bool"}
-
-    <div>
-        <IconButton icon={value == true ? "check-square" : "square"}
-                    size="19"
-                    on:click={() => onChanged(!value)} />
-    </div>
-
-    {:else if type === "options"}
-
-    <select class="uk-select uk-form-small"
-            value={value}
-            on:change={ev => onChanged(ev.target.value)}>
-        {#each options as option}
-        <option value={option}>{option}</option>
-        {/each}
-    </select>
-
-    {:else}
-
-    <input on:change={ev => onChanged(ev.target.value)}
-           bind:value={value}
-           style="flex: 1 0 auto;" />
-
-
-    {/if}
-
-</div>
-{/if}
-
-
-<style>
-    .unbound-container {
-        display:flex;
-    }
-
-    .bound-header {
-        display: flex;
-    }
-
-    .bound-header > div:nth-child(1) {
-        flex: 1 0 auto;
-        width: 30px;
-        color: var(--secondary50);
-        padding-left: 5px;
-    }
-
-    .binding-prop-label {
-        color: var(--secondary50);
-    }
-
-    input {
-        font-size: 12px;
-        font-weight: 700;
-        color: #163057;
-        opacity: 0.7;
-        padding: 5px 10px;
-        box-sizing: border-box;
-        border: 1px solid #DBDBDB;
-        border-radius: 2px;
-        outline: none;
-    }
-</style>
diff --git a/packages/builder/src/userInterface/StateBindingControl.svelte b/packages/builder/src/userInterface/StateBindingControl.svelte
index 32065a111e..2e5de88d6a 100644
--- a/packages/builder/src/userInterface/StateBindingControl.svelte
+++ b/packages/builder/src/userInterface/StateBindingControl.svelte
@@ -1,5 +1,6 @@
 <script>
     import IconButton from "../common/IconButton.svelte";
+    import Input from "../common/Input.svelte";
     import {
         isBinding, getBinding, setBinding
     } from "../common/binding";
@@ -81,13 +82,13 @@
         {#if isExpanded}
             <div>
                 <div class="binding-prop-label">Binding Path</div>
-                <input class="uk-input uk-form-small"
+                <Input
                     value={bindingPath}
-                    on:change={setBindingPath} >
+                    on:change={setBindingPath} />
                 <div class="binding-prop-label">Fallback Value</div>
-                <input class="uk-input uk-form-small"
+                <Input
                     value={bindingFallbackValue}
-                    on:change={setBindingFallback} >
+                    on:change={setBindingFallback} />
                 <div class="binding-prop-label">Binding Source</div>
                 <select class="uk-select uk-form-small"
                     value={bindingSource}
@@ -119,7 +120,7 @@
                 {/each}
             </select>
         {:else}
-            <input on:change={ev => onChanged(ev.target.value)}
+            <Input on:change={ev => onChanged(ev.target.value)}
                 bind:value={value}
                 style="flex: 1 0 auto;" />
         {/if}

From 7baa9d443d9db4051d862b2d4adb60c4b2606a69 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 30 Jan 2020 20:01:18 +0000
Subject: [PATCH 5/8] draft handler

---
 .../builder/src/common/ActionButton.svelte    |  9 +++-
 packages/builder/src/common/PlusButton.svelte |  4 +-
 .../EventsEditor/EventEditorModal.svelte      | 44 ++++++++++++++-----
 .../EventsEditor/EventsEditor.svelte          | 15 +++----
 .../EventsEditor/HandlerSelector.svelte       | 22 +++++++---
 .../userInterface/StateBindingControl.svelte  | 14 +++---
 6 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte
index 4a09d55943..092123b47c 100644
--- a/packages/builder/src/common/ActionButton.svelte
+++ b/packages/builder/src/common/ActionButton.svelte
@@ -1,4 +1,5 @@
 <script>
+  export let visible = true;
   export let disabled = false;
 </script>
 
@@ -19,12 +20,16 @@
   }
 
   .action-button:disabled {
-    color:#163057;
+    color: #163057;
     cursor: default;
     background: transparent;
   }
+
+  .hidden {
+    visibility: hidden;
+  }
 </style>
 
-<button on:click class="action-button" {disabled}>
+<button on:click class="action-button {!visible && 'hidden'}" {disabled}>
   <slot />
 </button>
diff --git a/packages/builder/src/common/PlusButton.svelte b/packages/builder/src/common/PlusButton.svelte
index b7ae19fcbf..7424ffa66e 100644
--- a/packages/builder/src/common/PlusButton.svelte
+++ b/packages/builder/src/common/PlusButton.svelte
@@ -4,7 +4,7 @@
     outline: none;
     border: none;
     border-radius: 5px;
-    background: var(--background-button);
+    background: rgba(249, 249, 249, 1);
 
     width: 1.8rem;
     height: 1.8rem;
@@ -16,7 +16,7 @@
 
     font-size: 1.2rem;
     font-weight: 700;
-    color: var(--button-text);
+    color: rgba(22, 48, 87, 1);
   }
 </style>
 
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
index 74e3e956a2..9e93be7a60 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
@@ -10,15 +10,20 @@
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers";
 
   export let event;
-
-  export let events;
+  export let eventOptions;
   export let open;
   export let onClose;
   export let onPropChanged;
 
   let eventType = "onClick";
   let newEventHandler = { parameters: [] };
-  let eventData = event || { handlers: [] };
+
+  $: eventData = event || { handlers: [] };
+
+  const resetModalState = () => {
+    newEventHandler = { parameters: [] };
+    eventData = { handlers: [] };
+  };
 
   const changeEventHandler = (updatedHandler, index) => {
     eventData.handlers[index] = updatedHandler;
@@ -44,13 +49,13 @@
 
   const deleteEvent = () => {
     onPropChanged(eventType, []);
-    eventData = { handlers: [] };
+    resetModalState();
     onClose();
   };
 
   const saveEventData = () => {
     onPropChanged(eventType, eventData.handlers);
-    eventData = { handlers: [] };
+    resetModalState();
     onClose();
   };
 </script>
@@ -79,18 +84,24 @@
     display: flex;
     justify-content: space-between;
   }
+
+  p {
+    color: rgba(22, 48, 87, 0.6);
+    font-size: 12px;
+    margin-top: 0;
+  }
 </style>
 
 <Modal bind:isOpen={open} onClosed={onClose}>
-  <h2>{eventData.name || "Create a New Component Event"}</h2>
+  <h2>{eventData.name || 'Create a New Component Event'}</h2>
   <p>Click here to learn more about component events</p>
 
   <div class="event-options">
     <div>
       <h5>Event Type</h5>
       <Select bind:value={eventType}>
-        {#each events as event}
-          <option value={event.name}>{event.name}</option>
+        {#each eventOptions as option}
+          <option value={option.name}>{option.name}</option>
         {/each}
       </Select>
     </div>
@@ -100,8 +111,8 @@
   <HandlerSelector
     newHandler
     onChanged={changeNewEventHandler}
-    onCreate={() => { 
-      createNewEventHandler(newEventHandler)
+    onCreate={() => {
+      createNewEventHandler(newEventHandler);
       newEventHandler = { parameters: [] };
     }}
     handler={newEventHandler} />
@@ -116,7 +127,16 @@
   {/if}
 
   <div class="actions">
-    <ActionButton on:click={deleteEvent}>Delete</ActionButton>
-    <ActionButton disabled={eventData.handlers.length === 0} on:click={saveEventData}>Save</ActionButton>
+    <ActionButton
+      disabled={eventData.handlers.length === 0}
+      visible={eventData.name}
+      on:click={deleteEvent}>
+      Delete
+    </ActionButton>
+    <ActionButton
+      disabled={eventData.handlers.length === 0}
+      on:click={saveEventData}>
+      Save
+    </ActionButton>
   </div>
 </Modal>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
index f351befc8d..01f235c016 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
@@ -35,7 +35,7 @@
 
   $: { 
     events = Object.keys(componentInfo)
-    .filter(key => componentInfo[key].length && findType(key) === EVENT_TYPE)
+    .filter(key => findType(key) === EVENT_TYPE)
     .map(key => ({ name: key, handlers: componentInfo[key] }));
   }
 
@@ -85,6 +85,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     border: 2px solid #f9f9f9;
+    height: 80px;
   }
 
   .hierarchy-item {
@@ -101,16 +102,11 @@
   }
 
   .event-name {
-    font-size: 12px;
-    color: rgba(35, 65, 105, 0.4);
-    grid-column: 1 / span 2;
-  }
-
-  .event-identifier {
     margin-top: 5px;
     font-weight: bold;
     font-size: 16px;
-    color: rgba(22, 48, 87, 0.6)
+    color: rgba(22, 48, 87, 0.6);
+    align-self: end;
   }
 
   .edit-text {
@@ -141,7 +137,6 @@
           class="handler-container hierarchy-item {selectedEvent && selectedEvent.index === index ? 'selected' : ''}"
           on:click={() => openModal({ ...event, index })}>
           <span class="event-name">{event.name}</span>
-          <span class="event-identifier">{event.name}</span>
           <span class="edit-text">EDIT</span>
         </div>
       {/if}
@@ -150,8 +145,8 @@
 </div>
 <EventEditorModal
   {onPropChanged}
-  events={events}
   open={modalOpen}
   onClose={closeModal}
+  eventOptions={events}
   event={selectedEvent}
   />
diff --git a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
index b84f371f73..d3ec42557e 100644
--- a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
@@ -107,12 +107,20 @@
     grid-gap: 10px;
     padding: 22px;
   }
+
+  .event-action-button {
+    margin-right: 20px;
+  }
+
+  span {
+    margin-bottom: 5px;
+  }
 </style>
 
 <div class="type-selector-container {newHandler && 'new-handler'}">
   <div class="handler-controls">
     <div class="handler-option">
-      Action
+      <span>Action</span>
       <Select value={handlerType} on:change={handlerTypeChanged}>
         <option />
         {#each eventOptions as option}
@@ -131,9 +139,11 @@
       {/each}
     {/if}
   </div>
-  {#if newHandler}
-    <PlusButton on:click={onCreate} />
-  {:else}
-    <IconButton icon="x" on:click={onRemoved} />
-  {/if}
+  <div class="event-action-button">
+    {#if newHandler}
+      <PlusButton on:click={onCreate} />
+    {:else}
+      <IconButton icon="x" on:click={onRemoved} />
+    {/if}
+  </div>
 </div>
diff --git a/packages/builder/src/userInterface/StateBindingControl.svelte b/packages/builder/src/userInterface/StateBindingControl.svelte
index 2e5de88d6a..76f81f2bc8 100644
--- a/packages/builder/src/userInterface/StateBindingControl.svelte
+++ b/packages/builder/src/userInterface/StateBindingControl.svelte
@@ -82,13 +82,13 @@
         {#if isExpanded}
             <div>
                 <div class="binding-prop-label">Binding Path</div>
-                <Input
+                <input class="uk-input uk-form-small"
                     value={bindingPath}
-                    on:change={setBindingPath} />
+                    on:change={setBindingPath} >
                 <div class="binding-prop-label">Fallback Value</div>
-                <Input
+                <input class="uk-input uk-form-small"
                     value={bindingFallbackValue}
-                    on:change={setBindingFallback} />
+                    on:change={setBindingFallback} >
                 <div class="binding-prop-label">Binding Source</div>
                 <select class="uk-select uk-form-small"
                     value={bindingSource}
@@ -120,9 +120,9 @@
                 {/each}
             </select>
         {:else}
-            <Input on:change={ev => onChanged(ev.target.value)}
-                bind:value={value}
-                style="flex: 1 0 auto;" />
+            <Input 
+                on:change={ev => onChanged(ev.target.value)}
+                bind:value={value} />
         {/if}
 
     </div>

From 5325e0d0a9ee975a00762c630d0ac7a5084c6880 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 30 Jan 2020 21:00:19 +0000
Subject: [PATCH 6/8] styling updates

---
 .../builder/src/common/ActionButton.svelte    |  2 +-
 packages/builder/src/common/Modal.svelte      |  1 +
 .../EventsEditor/EventEditorModal.svelte      | 20 +++++++++++-------
 .../EventsEditor/HandlerSelector.svelte       | 21 +++++++++----------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte
index 092123b47c..dd00966c49 100644
--- a/packages/builder/src/common/ActionButton.svelte
+++ b/packages/builder/src/common/ActionButton.svelte
@@ -20,7 +20,7 @@
   }
 
   .action-button:disabled {
-    color: #163057;
+    color: rgba(22, 48, 87, 0.2);
     cursor: default;
     background: transparent;
   }
diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte
index 3e716f5c9a..19db3b064e 100644
--- a/packages/builder/src/common/Modal.svelte
+++ b/packages/builder/src/common/Modal.svelte
@@ -37,6 +37,7 @@ $: {
 .uk-modal-dialog {
     border-radius: .3rem;
     width: 60%;
+    height: 80vh;
 }
 
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
index 9e93be7a60..5c288084e6 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
@@ -6,6 +6,7 @@
   import PlusButton from "../../common/PlusButton.svelte";
   import Select from "../../common/Select.svelte";
   import Input from "../../common/Input.svelte";
+  import getIcon from "../../common/icon";
 
   import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers";
 
@@ -70,8 +71,9 @@
 
   h5 {
     color: rgba(22, 48, 87, 0.6);
-    font-size: 16px;
+    font-size: 15px;
     margin-bottom: 5px;
+    margin-top: 20px;
   }
 
   .event-options {
@@ -80,12 +82,13 @@
     grid-gap: 10px;
   }
 
-  .actions {
+  .actions, header {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
-  p {
+  a {
     color: rgba(22, 48, 87, 0.6);
     font-size: 12px;
     margin-top: 0;
@@ -93,13 +96,16 @@
 </style>
 
 <Modal bind:isOpen={open} onClosed={onClose}>
-  <h2>{eventData.name || 'Create a New Component Event'}</h2>
-  <p>Click here to learn more about component events</p>
+  <h2>{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}</h2>
+  <a href="https://docs.budibase.com/" target="_blank" >Click here to learn more about component events</a>
 
   <div class="event-options">
     <div>
-      <h5>Event Type</h5>
-      <Select bind:value={eventType}>
+      <header>
+        <h5>Event Type</h5>
+        {@html getIcon('info')}
+      </header>
+      <Select :value={eventType}>
         {#each eventOptions as option}
           <option value={option.name}>{option.name}</option>
         {/each}
diff --git a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
index d3ec42557e..e22a992fe7 100644
--- a/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/HandlerSelector.svelte
@@ -31,7 +31,6 @@
     })
   );
 
-  // TODO: refactor
   $: {
     if (handler) {
       handlerType = handler[EVENT_TYPE_MEMBER_NAME];
@@ -40,6 +39,7 @@
         value
       }));
     } else {
+      // Empty Handler 
       handlerType = "";
       parameters = [];
     }
@@ -63,11 +63,11 @@
     const handlerType = eventOptions.find(
       handler => handler.name === e.target.value
     );
-    // Set default params for handler
     const defaultParams = handlerType.parameters.map(param => ({
       name: param,
       value: ""
     }));
+
     handlerChanged(handlerType.name, defaultParams);
   };
 
@@ -93,10 +93,6 @@
     flex-direction: column;
   }
 
-  .handler-option > div {
-    margin-bottom: 5px;
-  }
-
   .new-handler {
     background: #fff;
   }
@@ -113,6 +109,7 @@
   }
 
   span {
+    font-size: 12px;
     margin-bottom: 5px;
   }
 </style>
@@ -131,7 +128,7 @@
     {#if parameters}
       {#each parameters as param, idx}
         <div class="handler-option">
-          <div>{param.name}</div>
+          <span>{param.name}</span>
           <StateBindingControl
             onChanged={onParameterChanged(idx)}
             value={param.value} />
@@ -140,10 +137,12 @@
     {/if}
   </div>
   <div class="event-action-button">
-    {#if newHandler}
-      <PlusButton on:click={onCreate} />
-    {:else}
-      <IconButton icon="x" on:click={onRemoved} />
+    {#if parameters.length > 0}
+      {#if newHandler}
+        <PlusButton on:click={onCreate} />
+      {:else}
+        <IconButton icon="x" on:click={onRemoved} />
+      {/if}
     {/if}
   </div>
 </div>

From cd1714b1a08408f6721000c1fddee71cab1185f3 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 31 Jan 2020 09:45:02 +0000
Subject: [PATCH 7/8] final touches for design

---
 .../builder/src/common/ActionButton.svelte    | 28 ++++++--
 packages/builder/src/common/Modal.svelte      | 61 +++++++++---------
 .../EventsEditor/EventEditorModal.svelte      | 64 ++++++++++++-------
 .../EventsEditor/EventsEditor.svelte          |  6 +-
 4 files changed, 97 insertions(+), 62 deletions(-)

diff --git a/packages/builder/src/common/ActionButton.svelte b/packages/builder/src/common/ActionButton.svelte
index dd00966c49..fca74c09ff 100644
--- a/packages/builder/src/common/ActionButton.svelte
+++ b/packages/builder/src/common/ActionButton.svelte
@@ -1,12 +1,23 @@
 <script>
-  export let visible = true;
   export let disabled = false;
+  export let hidden = false;
+  export let primary = true;
+  export let alert = false;
+  export let warning = false;
 </script>
 
 <style>
-  .action-button {
+  .primary {
     color: #0055ff;
     background: rgb(54, 133, 249, 0.1);
+  }
+
+  .alert {
+    color: rgba(255, 0, 31, 1);
+    background: rgba(255, 0, 31, 0.1);;
+  }
+
+  .button {
     font-size: 18px;
     font-weight: bold;
     border-radius: 5px;
@@ -15,11 +26,11 @@
     height: 64px;
   }
 
-  .action-button:hover {
+  .button:hover {
     cursor: pointer;
   }
 
-  .action-button:disabled {
+  .button:disabled {
     color: rgba(22, 48, 87, 0.2);
     cursor: default;
     background: transparent;
@@ -30,6 +41,13 @@
   }
 </style>
 
-<button on:click class="action-button {!visible && 'hidden'}" {disabled}>
+<button
+  on:click
+  class="button"
+  class:hidden
+  class:primary
+  class:alert
+  class:warning
+  {disabled}>
   <slot />
 </button>
diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte
index 19db3b064e..5d695d0fc1 100644
--- a/packages/builder/src/common/Modal.svelte
+++ b/packages/builder/src/common/Modal.svelte
@@ -1,43 +1,44 @@
 <script>
-import UIkit from "uikit";
+  import UIkit from "uikit";
 
-export let isOpen = false;
-export let onClosed = () => {};
-export let id = "";
+  export let isOpen = false;
+  export let onClosed = () => {};
+  export let id = "";
 
-let ukModal;
-let listenerAdded = false;
+  let ukModal;
+  let listenerAdded = false;
 
-$: {
-    if(ukModal && !listenerAdded) {
-        listenerAdded = true;
-        ukModal.addEventListener("hidden", onClosed);
+  $: {
+    if (ukModal && !listenerAdded) {
+      listenerAdded = true;
+      ukModal.addEventListener("hidden", onClosed);
     }
 
-    if(ukModal) {
-        if(isOpen) {
-            UIkit.modal(ukModal).show();
-        } else {
-            UIkit.modal(ukModal).hide();
-        }
+    if (ukModal) {
+      if (isOpen) {
+        UIkit.modal(ukModal).show();
+      } else {
+        UIkit.modal(ukModal).hide();
+      }
     }
-}
-
+  }
 </script>
 
-<div bind:this={ukModal} uk-modal {id}>
-    <div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
-        <slot />
-    </div>
-</div>
-
-
 <style>
-
-.uk-modal-dialog {
-    border-radius: .3rem;
+  .uk-modal-dialog {
+    border-radius: 0.3rem;
     width: 60%;
     height: 80vh;
-}
+    display: flex;
+    flex-direction: column;
+  }
+</style>
 
-</style>
\ No newline at end of file
+<div bind:this={ukModal} uk-modal {id}>
+  <div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
+    {#if onClosed}
+      <button class="uk-modal-close-default" type="button" uk-close />
+    {/if}
+    <slot />
+  </div>
+</div>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
index 5c288084e6..290381c5dc 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventEditorModal.svelte
@@ -17,21 +17,22 @@
   export let onPropChanged;
 
   let eventType = "onClick";
-  let newEventHandler = { parameters: [] };
+  let draftEventHandler = { parameters: [] };
 
   $: eventData = event || { handlers: [] };
 
-  const resetModalState = () => {
-    newEventHandler = { parameters: [] };
+  const closeModal = () => {
+    onClose();
+    draftEventHandler = { parameters: [] };
     eventData = { handlers: [] };
   };
 
-  const changeEventHandler = (updatedHandler, index) => {
+  const updateEventHandler = (updatedHandler, index) => {
     eventData.handlers[index] = updatedHandler;
   };
 
-  const changeNewEventHandler = updatedHandler => {
-    newEventHandler = updatedHandler;
+  const updateDraftEventHandler = updatedHandler => {
+    draftEventHandler = updatedHandler;
   };
 
   const deleteEventHandler = index => {
@@ -50,14 +51,12 @@
 
   const deleteEvent = () => {
     onPropChanged(eventType, []);
-    resetModalState();
-    onClose();
+    closeModal();
   };
 
   const saveEventData = () => {
     onPropChanged(eventType, eventData.handlers);
-    resetModalState();
-    onClose();
+    closeModal();
   };
 </script>
 
@@ -72,8 +71,7 @@
   h5 {
     color: rgba(22, 48, 87, 0.6);
     font-size: 15px;
-    margin-bottom: 5px;
-    margin-top: 20px;
+    margin: 0;
   }
 
   .event-options {
@@ -82,12 +80,22 @@
     grid-gap: 10px;
   }
 
-  .actions, header {
+  .actions,
+  header {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
+  .actions {
+    margin-top: auto;
+  }
+
+  header {
+    margin-top: 30px;
+    margin-bottom: 10px;
+  }
+
   a {
     color: rgba(22, 48, 87, 0.6);
     font-size: 12px;
@@ -95,15 +103,19 @@
   }
 </style>
 
-<Modal bind:isOpen={open} onClosed={onClose}>
-  <h2>{eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}</h2>
-  <a href="https://docs.budibase.com/" target="_blank" >Click here to learn more about component events</a>
+<Modal bind:isOpen={open} onClosed={closeModal}>
+  <h2>
+    {eventData.name ? `${eventData.name} Event` : 'Create a New Component Event'}
+  </h2>
+  <a href="https://docs.budibase.com/" target="_blank">
+    Click here to learn more about component events
+  </a>
 
   <div class="event-options">
     <div>
       <header>
         <h5>Event Type</h5>
-        {@html getIcon('info')}
+        {@html getIcon('info', 20)}
       </header>
       <Select :value={eventType}>
         {#each eventOptions as option}
@@ -113,20 +125,23 @@
     </div>
   </div>
 
-  <h5>Event Action(s)</h5>
+  <header>
+    <h5>Event Action(s)</h5>
+    {@html getIcon('info', 20)}
+  </header>
   <HandlerSelector
     newHandler
-    onChanged={changeNewEventHandler}
+    onChanged={updateDraftEventHandler}
     onCreate={() => {
-      createNewEventHandler(newEventHandler);
-      newEventHandler = { parameters: [] };
+      createNewEventHandler(draftEventHandler);
+      draftEventHandler = { parameters: [] };
     }}
-    handler={newEventHandler} />
+    handler={draftEventHandler} />
   {#if eventData}
     {#each eventData.handlers as handler, index}
       <HandlerSelector
         {index}
-        onChanged={changeEventHandler}
+        onChanged={updateEventHandler}
         onRemoved={() => deleteEventHandler(index)}
         {handler} />
     {/each}
@@ -134,8 +149,9 @@
 
   <div class="actions">
     <ActionButton
+      alert
       disabled={eventData.handlers.length === 0}
-      visible={eventData.name}
+      hidden={!eventData.name}
       on:click={deleteEvent}>
       Delete
     </ActionButton>
diff --git a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
index 01f235c016..fa9907e077 100644
--- a/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte
@@ -75,7 +75,7 @@
     flex-wrap: wrap;
   }
 
-  .heading {
+  header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -124,10 +124,10 @@
   }
 </style>
 
-<div class="heading">
+<header>
   <h3>Events</h3>
   <PlusButton on:click={() => openModal()} />
-</div>
+</header>
 
 <div class="root">
   <form class="uk-form-stacked form-root">

From 912a6e4f1bbab3a07a48e53ad1c50ec01a176a82 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 31 Jan 2020 09:49:26 +0000
Subject: [PATCH 8/8] tidy up

---
 packages/builder/src/userInterface/EventsEditor/index.js | 6 ------
 packages/server/package.json                             | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/builder/src/userInterface/EventsEditor/index.js b/packages/builder/src/userInterface/EventsEditor/index.js
index e010de3c69..7782e7fccd 100644
--- a/packages/builder/src/userInterface/EventsEditor/index.js
+++ b/packages/builder/src/userInterface/EventsEditor/index.js
@@ -1,7 +1 @@
-export const deleteElement = (array, index) => {
-  const arr = [...array];
-  array.splice(index, 1);
-  return arr;
-};
-
 export { default } from "./EventsEditor.svelte";
\ No newline at end of file
diff --git a/packages/server/package.json b/packages/server/package.json
index 6a86bb4d1f..7f607b533d 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -8,7 +8,7 @@
     "build": "cd appPackages/_master && yarn && cd ../testApp && yarn && cd ../testApp2 && yarn",
     "initialise": "node ./initialise/initialiseBudibase init -d ./myapps -c contributors -u admin -p admin",
     "budi": "node ../cli/bin/budi",
-    "dev:builder": "node index"
+    "dev:builder": "nodemon index"
   },
   "keywords": [
     "budibase"