workflow UI, orhestrator for executing workflows

2020-05-27 21:51:32 +01:00 · 2020-05-27 21:51:32 +01:00 · 08d0b9cb94
parent e3271bf765
commit 08d0b9cb94
32 changed files with 677 additions and 177 deletions
--- a/packages/builder/src/builderStore/store/workflow.js
+++ b/packages/builder/src/builderStore/store/workflow.js
@ -36,9 +36,10 @@ const workflowActions = store => ({
  select: workflow => {
    store.update(state => {
      state.selectedWorkflowId = workflow._id
+      state.selectedWorkflowBlock = null
      return state;
    })
-  } 
+  }
 });

 export const getWorkflowStore = () => {
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@ -25,7 +25,7 @@
  let categories = [
    { value: "design", name: "Design" },
    { value: "settings", name: "Settings" },
-    { value: "actions", name: "Actions" },
+    { value: "events", name: "Events" }
  ]
  let selectedCategory = categories[0]

@ -93,6 +93,8 @@
        {componentDefinition}
        {panelDefinition}
        onChange={onPropChanged} />
+    {:else if selectedCategory.value === 'events'}
+      <EventsEditor component={componentInstance} />
    {/if}

  </div>
--- a/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
@ -25,16 +25,14 @@
  export const EVENT_TYPE = "event"

  export let component
-  export let components

  let modalOpen = false
  let events = []
  let selectedEvent = null

  $: {
-    const componentDefinition = components[component._component]
-    events = Object.keys(componentDefinition.props)
-      .filter(propName => componentDefinition.props[propName] === EVENT_TYPE)
+    events = Object.keys(component)
+      .filter(propName => ["onChange", "onClick", "onLoad"].includes(propName))
      .map(propName => ({
        name: propName,
        handlers: component[propName] || [],
--- a/packages/builder/src/index.html
+++ b/packages/builder/src/index.html
@ -10,18 +10,15 @@

 	<link rel='icon' type='image/png' href='/_builder/favicon.png'>
 	<link rel='stylesheet' href='/_builder/global.css'>
-	<link rel='stylesheet' href='/_builder/flowy.css'>
 	<link rel='stylesheet' href='/_builder/codemirror.css'>
 	<link rel='stylesheet' href='/_builder/budibase.css'>
 	<link rel='stylesheet' href='/_builder/monokai.css'>
 	<link rel='stylesheet' href='/_builder/bundle.css'>
 	<link rel='stylesheet' href='/_builder/fonts.css'>
 	<link rel='stylesheet' href="/_builder/uikit.min.css">
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css"> 
 </head>

 <body id="app">
-	<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>
 	<script src='/_builder/bundle.js'></script>
 </body>
 </html>
--- a/packages/builder/src/main.js
+++ b/packages/builder/src/main.js
@ -1,5 +1,4 @@
 import "./global.css"
-import "./flowy.css";
 import "./fonts.css"
 import "./budibase.css"
 import "/assets/roboto-v20-latin-ext_latin-300"
--- a/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js
+++ b/packages/builder/src/pages/[application]/workflow/BlockPanel/index.js
@ -1 +0,0 @@
-export { default as BlockPanel } from "./BlockPanel.svelte";
--- a/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte
@ -0,0 +1,88 @@
+<script>
+  import { onMount } from "svelte"
+  import { backendUiStore, workflowStore } from "builderStore"
+  import api from "builderStore/api"
+  import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte";
+
+  $: workflow = $workflowStore.workflows.find(
+    wf => wf._id === $workflowStore.selectedWorkflowId
+  )
+  $: workflowBlock = $workflowStore.selectedWorkflowBlock
+
+  function deleteWorkflow() {
+    workflowStore.actions.deleteWorkflow(workflow)
+  }
+  
+  function deleteWorkflowBlock() {
+    // TODO: implement
+    workflowStore.actions.deleteWorkflowBlock(workflowBlock)
+  }
+</script>
+
+<section>
+  <header>
+    <span>Setup</span>
+  </header>
+  <div class="panel-body">
+    {#if workflowBlock}
+      <WorkflowBlockSetup {workflowBlock} />
+      <button class="delete-workflow-button hoverable" on:click={deleteWorkflowBlock}>
+        Delete {workflowBlock.type} 
+      </button>
+    {:else if $workflowStore.selectedWorkflowId}
+      <label class="uk-form-label">Workflow: {workflow.name}</label>
+      <div class="uk-margin">
+        <label class="uk-form-label">Name</label>
+        <div class="uk-form-controls">
+          <input
+            type="text"
+            class="budibase__input"
+            bind:value={workflow.name} />
+        </div>
+      </div>
+      <div class="uk-margin">
+        <label class="uk-form-label">User Access</label>
+        Some User Access Stuff Here
+      </div>
+      <button class="delete-workflow-button hoverable" on:click={deleteWorkflow}>
+        Delete Workflow
+      </button>
+    {/if}
+  </div>
+</section>
+
+<style>
+  section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  header {
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  span:not(.selected) {
+    color: var(--dark-grey);
+  }
+
+  label {
+    font-weight: 500;
+    font-size: 14px;
+    color: var(--font);
+  }
+
+  .delete-workflow-button {
+    font-family: Roboto;
+    width: 100%;
+    border: solid 1px #f2f2f2;
+    border-radius: 2px;
+    background: var(--white);
+    height: 32px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+</style>
--- a/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte
@ -0,0 +1,17 @@
+<script>
+  export let workflowBlock
+  $: workflowArgs = Object.keys(workflowBlock.args)
+</script>
+
+<label class="uk-form-label">{workflowBlock.heading}: {workflowBlock.heading}</label>
+{#each workflowArgs as workflowArg}
+  <div class="uk-margin">
+    <label class="uk-form-label">Name</label>
+    <div class="uk-form-controls">
+      <input
+        type="text"
+        class="budibase__input"
+        bind:value={workflowBlock.args[workflowArg]} />
+    </div>
+  </div>
+{/each}
--- a/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js
+++ b/packages/builder/src/pages/[application]/workflow/SetupPanel/index.js
@ -0,0 +1 @@
+export { default as SetupPanel } from "./SetupPanel.svelte";
--- a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte
@ -0,0 +1,51 @@
+<script>
+  import { onMount } from "svelte"
+  import { workflowStore, backendUiStore } from "builderStore"
+  import Flowchart from "./svelte-flows/Flowchart.svelte"
+  import api from "builderStore/api"
+
+  let canvas
+  let workflow
+  let uiTree
+  let instanceId = $backendUiStore.selectedDatabase._id
+
+  $: workflow = $workflowStore.workflows.find(
+    wf => wf._id === $workflowStore.selectedWorkflowId
+  )
+
+  // Build a renderable UI Tree for the flowchart generator
+  function buildUiTree(block, tree = []) {
+    if (!block) return tree
+
+    tree.push({
+      type: block.type, 
+      heading: block.actionId,
+      args: block.args,
+      body: JSON.stringify(block.args),
+    })
+
+    return buildUiTree(block.next, tree)
+  }
+
+  $: if (workflow) uiTree = workflow.definition ? buildUiTree(workflow.definition.next) : []
+
+  function onDelete(block) {
+    // TODO finish
+    workflowStore.actions.deleteWorkflowBlock(block);
+  }
+
+  function onSelect(block) {
+    workflowStore.update(state => {
+      state.selectedWorkflowBlock = block
+      return state
+    })
+  }
+</script>
+
+<section>
+  <Flowchart 
+    blocks={uiTree} 
+    onSelect={onSelect} 
+    on:delete={onDelete}
+  />
+</section>
--- a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte
@ -0,0 +1,23 @@
+<script>
+  import FlowItem from "./FlowItem.svelte"
+
+  export let blocks = []
+  export let onSelect
+</script>
+
+<section class="canvas">
+  {#each blocks as block, idx}
+    <FlowItem onSelect={onSelect} {block} />
+    {#if idx !== blocks.length - 1}
+      <i class="ri-arrow-down-line"></i>
+    {/if}
+  {/each}
+</section>
+
+<style>
+  .canvas {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  }
+</style>
--- a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte
@ -0,0 +1,33 @@
+<script>
+  export let onSelect
+  export let block
+
+  function selectBlock() {
+    onSelect(block);
+  }
+</script>
+
+<div class="hoverable" on:click={selectBlock}>
+  <header>{block.heading}</header>
+  <hr />
+  <p>{block.body}</p>
+</div>
+
+<style>
+  div {
+    border: 1px solid black;
+    width: 320px;
+    padding: 20px;
+    margin-bottom: 60px;
+    border-radius: 5px;
+    transition: 0.3s all;
+    box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
+    background-color: var(--font);
+    font-size: 16px;
+    color: var(--white);
+  }
+
+  div:hover {
+    transform: scale(1.05);
+  }
+</style>
--- a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/api.js
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/api.js
--- a/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/index.js
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/index.js
--- a/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowList/index.js
@ -1 +0,0 @@
-export { default as WorkflowList } from "./WorkflowList.svelte";
--- a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte
@ -1,8 +1,10 @@
 <script>
  import { onMount } from "svelte"
  import { backendUiStore } from "builderStore"
+  import { WorkflowList } from "../";
+  import WorkflowBlock from "./WorkflowBlock.svelte";
  import api from "builderStore/api"
-  import blockDefinitions from "./blockDefinitions"
+  import blockDefinitions from "../blockDefinitions"

  const SUB_TABS = [
    {
@ -14,8 +16,8 @@
      key: "ACTIONS",
    },
    {
-      name: "Utilities",
-      key: "UTILITIES",
+      name: "Logic",
+      key: "LOGIC",
    },
  ]

@ -23,13 +25,13 @@
  let definitions = []

  $: definitions = Object.values(blockDefinitions[selectedTab])
+
+  function myAction(node) {
+    console.log("ACTION FIRED", node);
+  }
 </script>

 <section>
-  <header>
-    <span>Blocks</span>
-    <span>Props</span>
-  </header>
  <div class="subtabs">
    {#each SUB_TABS as tab}
      <span
@ -42,38 +44,12 @@
  </div>
  <div id="blocklist">
    {#each definitions as blockDefinition}
-      <div 
-        class="blockelem create-flowy noselect"
-        data-name={blockDefinition.name}
-      >
-        <input
-          type="hidden"
-          name="blockelemtype"
-          class="blockelemtype"
-          value="1" />
-        <div class="blockin">
-          <div class="blockico">
-            <i class={blockDefinition.icon} />
-          </div>
-          <div class="blocktext">
-            <p class="blocktitle">{blockDefinition.name}</p>
-            <p class="blockdesc">{blockDefinition.description}</p>
-          </div>
-        </div>
-      </div>
+      <WorkflowBlock {blockDefinition} blockType={selectedTab} />
    {/each}
  </div>
 </section>

 <style>
-  header {
-    font-size: 20px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
  .subtabs {
    margin-top: 27px;
    display: grid;
--- a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
@ -0,0 +1,51 @@
+<script>
+  import { workflowStore } from "builderStore";
+
+  export let blockType
+  export let blockDefinition
+
+  function addBlockToWorkflow() {
+    // TODO: store the block type in the DB as well
+    workflowStore.actions.addBlockToWorkflow({ blockDefinition, blockType });
+  }
+</script>
+
+<div class="workflow-block hoverable" on:click={addBlockToWorkflow}>
+  <div>
+    <i class={blockDefinition.icon} />
+  </div>
+  <div class="workflow-text">
+    <h4>{blockDefinition.name}</h4>
+    <p>{blockDefinition.description}</p>
+  </div>
+</div>
+
+<style>
+  .workflow-block {
+    display: flex;
+    padding: 20px;
+    align-items: center;
+  }
+
+  .workflow-text {
+    margin-left: 10px;
+  }
+
+  i {
+    background: var(--secondary);
+    color: var(--dark-grey);
+    padding: 10px;
+  }
+
+  h4 {
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 5px;
+  }
+
+  p {
+    font-size: 12px;
+    color: var(--dark-grey);
+    margin: 0;
+  }
+</style>
--- a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
@ -16,7 +16,6 @@
      name,
      instanceId,
    })
-    flowy.deleteBlocks();
    onClosed()
  }
 </script>
--- a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
@ -23,17 +23,16 @@
 </script>

 <section>
-  <header>
-    Workflows
-    <i on:click={newWorkflow} class="ri-add-circle-fill" />
-  </header>
+  <button class="new-workflow-button hoverable" on:click={newWorkflow}>
+    Create New Workflow
+  </button>
  <ul>
    {#each $workflowStore.workflows as workflow}
      <li
        class="workflow-item"
        class:selected={workflow._id === $workflowStore.selectedWorkflowId}
        on:click={() => workflowStore.actions.select(workflow)}>
-        <i class="ri-stackshare-line" />
+        <i class="ri-stackshare-line" class:live={workflow.live} />
        {workflow.name}
      </li>
    {/each}
@ -41,16 +40,8 @@
 </section>

 <style>
-  header {
-    font-size: 20px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
  i {
-    color: var(--dark-grey);
+    color: #adaec4;
  }

  i:hover {
@ -62,6 +53,10 @@
    padding: 0;
  }

+  .live {
+    color: var(--primary);
+  }
+
  li {
    font-size: 14px;
  }
@ -72,6 +67,7 @@
    align-items: center;
    border-radius: 3px;
    height: 40px;
+    font-weight: 500;
  }

  .workflow-item i {
@ -87,4 +83,15 @@
  .workflow-item.selected {
    background: var(--secondary);
  }
+
+  .new-workflow-button {
+    font-family: Roboto;
+    width: 100%;
+    border: solid 1px #f2f2f2;
+    border-radius: 2px;
+    background: var(--white);
+    height: 32px;
+    font-size: 12px;
+    font-weight: 500;
+  }
 </style>
--- a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte
@ -0,0 +1,61 @@
+<script>
+  import { onMount } from "svelte"
+  import { backendUiStore, workflowStore } from "builderStore"
+  import { WorkflowList, BlockList } from "./"
+  import api from "builderStore/api"
+  import blockDefinitions from "./blockDefinitions"
+
+  const WORKFLOW_TABS = [
+    {
+      name: "Workflows",
+      key: "WORKFLOWS",
+    },
+    {
+      name: "Add",
+      key: "ADD",
+    },
+  ]
+
+  let selectedTab = "WORKFLOWS"
+  let definitions = []
+</script>
+
+<section>
+  <header>
+    <span
+      class="hoverable"
+      class:selected={selectedTab === 'WORKFLOWS'}
+      on:click={() => (selectedTab = 'WORKFLOWS')}>
+      Workflows
+    </span>
+    {#if $workflowStore.selectedWorkflowId}
+      <span
+        class="hoverable"
+        class:selected={selectedTab === 'ADD'}
+        on:click={() => (selectedTab = 'ADD')}>
+        Add
+      </span>
+    {/if}
+  </header>
+  {#if selectedTab === 'WORKFLOWS'}
+    <WorkflowList />
+  {:else if selectedTab === 'ADD'}
+    <BlockList />
+  {/if}
+</section>
+
+<style>
+  header {
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  span:not(.selected) {
+    color: var(--dark-grey);
+  }
+
+</style>
--- a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js
@ -1,6 +1,6 @@
 const ACTIONS = {
  SET_STATE: {
-    name: "Update UI",
+    name: "Update UI State",
    icon: "",
    description: "Update your User Interface with some data.",
    type: "CLIENT",
@ -22,6 +22,24 @@ const ACTIONS = {
    icon: "ri-delete-bin-line",
    name: "Delete Record",
    type: "SERVER",
+  },
+  FIND_RECORD: {
+    description: "Delete a record from your database.",
+    icon: "ri-delete-bin-line",
+    name: "Find Record",
+    type: "SERVER",
+  },
+  CREATE_USER: {
+    description: "Create a new user.",
+    icon: "ri-user-add-fill",
+    name: "Create User",
+    type: "SERVER",
+  },
+  SEND_EMAIL: {
+    description: "Send an email.",
+    icon: "ri-mail-open-fill",
+    name: "Send Email",
+    type: "SERVER",
  }
 };

@ -49,11 +67,17 @@ const TRIGGERS = {
  },
 };

-const UTILITIES = {
-  IFELSE: {
-    name: "If/Else",
+const LOGIC = {
+  FILTER: {
+    name: "Filter",
    icon: "ri-git-branch-line",
-    description: "Perform different actions based on a condition",
+    description: "Filter any workflows which do not meet certain conditions.",
+    type: "CLIENT"
+  },
+  DELAY: {
+    name: "Delay",
+    icon: "ri-git-branch-line",
+    description: "Delay the workflow until an amount of time has passed.",
    type: "CLIENT"
  },
 }
@ -61,5 +85,5 @@ const UTILITIES = {
 export default {
  ACTIONS,
  TRIGGERS,
-  UTILITIES
+  LOGIC
 }
--- a/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js
+++ b/packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js
@ -0,0 +1,3 @@
+export { default as WorkflowPanel } from "./WorkflowPanel.svelte";
+export { default as BlockList } from "./BlockList/BlockList.svelte";
+export { default as WorkflowList } from "./WorkflowList/WorkflowList.svelte";
--- a/packages/builder/src/pages/[application]/workflow/_layout.svelte
+++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte
@ -1,20 +1,18 @@
 <script>
  import { workflowStore } from "builderStore"
-  import { WorkflowList } from "./WorkflowList"
-  import { BlockPanel } from "./BlockPanel"
+  import { WorkflowPanel } from "./WorkflowPanel"
+  import { SetupPanel } from "./SetupPanel"
 </script>

 <div class="root">
  <div class="nav">
-    <WorkflowList />
+    <WorkflowPanel />
  </div>
  <div class="content">
    <slot />
  </div>
  <div class="nav">
-    {#if $workflowStore.selectedWorkflowId}
-      <BlockPanel />
-    {/if}
+    <SetupPanel />
  </div>
 </div>

--- a/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte
+++ b/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte
@ -1,49 +0,0 @@
-<script>
-  import { onMount } from "svelte"
-  import { workflowStore, backendUiStore } from "builderStore";
-  import api from "builderStore/api";
-
-  let canvas
-  let workflow
-  let instanceId = $backendUiStore.selectedDatabase._id; 
-
-  $: workflow = $workflowStore.workflows.find(wf => wf._id === $workflowStore.selectedWorkflowId)
-
-  // $: if (workflow && workflow.uiTree) flowy.import(workflow.uiTree);
-
-  onMount(() => {
-    flowy(canvas, onGrab, onRelease, onSnap);
-  });
-
-  function onGrab(block) {
-    console.log(block);
-  }
-
-  function onSnap(block, first, parent){
-    workflow.uiTree = flowy.output();
-    workflowStore.actions.update({ instanceId, workflow })
-    return true;
-  }
-
-  function onRelease() {
-  }
-
-  // function onGrab(block) {
-  //   // When the user grabs a block
-  // }
-  // function onRelease() {
-  //   // When the user releases a block
-  //   console.log(flowy.output())
-  // }
-  // function onSnap(block, first, parent) {
-  //   console.log(flowy.output())
-  //   console.log(block, first, parent)
-  //   // When a block snaps with another one
-  // }
-  // function onRearrange(block, parent) {
-  //   console.log(block, parent)
-  //   // When a block is rearranged
-  // }
-</script>
-
-<section bind:this={canvas} class="canvas" />
--- a/packages/builder/src/pages/[application]/workflow/index.svelte
+++ b/packages/builder/src/pages/[application]/workflow/index.svelte
@ -1,5 +1,5 @@
 <script> 
-  import WorkflowBuilder from "./flowy/WorkflowBuilder.svelte";
+  import WorkflowBuilder from "./WorkflowBuilder/WorkflowBuilder.svelte";
 </script>

 <WorkflowBuilder />
--- a/packages/builder/src/pages/[application]/workflow/orchestrator/index.js
+++ b/packages/builder/src/pages/[application]/workflow/orchestrator/index.js
@ -1,38 +0,0 @@
-import api from "builderStore/api";
-
-class Orchestrator {
-  set strategy(strategy) {
-    this._stategy = strategy
-  }
-
-  execute(workflow) {
-    this._strategy.execute(workflow);
-  }
-}
-
-const ClientStrategy = {
-  execute: function(workflow) {
-    const block = workflow.next;
-    const EXECUTE_WORKFLOW_URL = `api/${workflow.instanceId}/workflows/${workflow._id}`;
-
-    switch (block.type) {
-      case "CLIENT":
-        // fetch the workflow code from the server, then execute it here in the client 
-          // catch any errors
-          // check against the conditions in the workflow
-          // if everything is fine, recurse
-          this.execute(workflow.next);
-        break;
-      case "SERVER":
-        // hit the server endpoint and wait for the response
-          // catch any errors
-          // check against the conditions in the workflow
-          // if everything is fine, recurse
-        await api.post()
-        break;
-      default:
-        break;
-    }
-
-  }
-}
--- a/packages/client/src/api/workflow/index.js
+++ b/packages/client/src/api/workflow/index.js
@ -2,7 +2,6 @@ import Orchestrator, { clientStrategy } from "./orchestrator";


 export const triggerWorkflow = api => ({ workflow }) => {
-  console.log(workflow);
  const workflowOrchestrator = new Orchestrator(
    api,
    "inst_60dd510_700f7dc06735403e81d5af91072d7241"
--- a/packages/client/src/api/workflow/orchestrator.js
+++ b/packages/client/src/api/workflow/orchestrator.js
@ -31,7 +31,7 @@ export default class Orchestrator {
 // Execute a workflow from a running budibase app
 export const clientStrategy = {
  context: {},
-  bindContextArgs: function(args) {
+  bindContextArgs: function(args, api) {
    const mappedArgs = { ...args };

    console.log("original args", args)
@ -50,12 +50,16 @@ export const clientStrategy = {

        // if the value is bound to state
        if (argValue.startsWith("$state")) {
-          const path = argValue.match("$context.", "");
-          // pass in the value from context
-          mappedArgs[arg] = get(path, this.context);  
+          const path = argValue.replace("$state.", "");
+          // pass in the value from state
+          // TODO: not working
+          mappedArgs[arg] = api.getState(path);  
        }
      }
    }
+
+    console.log(mappedArgs);
+
    return Object.values(mappedArgs);
  },
  run: async function({ workflow, api, instanceId }) {
@ -85,7 +89,7 @@ export const clientStrategy = {
        url: EXECUTE_WORKFLOW_URL, 
        body: {
          action: block.actionId,
-          args: block.args
+          args: this.bindContextArgs(block.args, api)
        } 
      });

--- a/packages/server/package.json
+++ b/packages/server/package.json
@ -44,6 +44,7 @@
    "@budibase/client": "^0.0.32",
    "@budibase/core": "^0.0.32",
    "@koa/router": "^8.0.0",
+    "@sendgrid/mail": "^7.1.1",
    "ajv": "^6.12.2",
    "bcryptjs": "^2.4.3",
    "dotenv": "^8.2.0",
--- a/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js
+++ b/packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js
@ -0,0 +1,27 @@
+const sgMail = require('@sendgrid/mail');
+
+sgMail.setApiKey(process.env.SENDGRID_API_KEY);
+
+module.exports = async function sendEmail(args) {
+
+  const msg = {
+    to: args.to,
+    from: args.from,
+    subject: args.subject,
+    text: args.text 
+  };
+
+  try {
+    await sgMail.send(msg);
+    return {
+      success: true,
+      err
+    }
+  } catch (err) {
+    return {
+      success: false,
+      err
+    }
+  }
+
+}
--- a/packages/server/src/api/controllers/workflow/index.js
+++ b/packages/server/src/api/controllers/workflow/index.js
@ -65,7 +65,7 @@ exports.update = async function(ctx) {
 exports.fetch = async function(ctx) {
  const db = new CouchDB(ctx.params.instanceId)
  const response = await db.query(`database/by_type`, {
-    type: "workflow",
+    key: ["workflow"],
    include_docs: true,
  })
  ctx.body = response.rows.map(row => row.doc)
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@ -194,6 +194,20 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

+"@budibase/client@^0.0.32":
+  version "0.0.32"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.0.32.tgz#76d9f147563a0bf939eae7f32ce75b2a527ba496"
+  integrity sha512-jmCCLn0CUoQbL6h623S5IqK6+GYLqX3WzUTZInSb1SCBOM3pI0eLP5HwTR6s7r42SfD0v9jTWRdyTnHiElNj8A==
+  dependencies:
+    "@nx-js/compiler-util" "^2.0.0"
+    bcryptjs "^2.4.3"
+    deep-equal "^2.0.1"
+    lodash "^4.17.15"
+    lunr "^2.3.5"
+    regexparam "^1.3.0"
+    shortid "^2.2.8"
+    svelte "^3.9.2"
+
 "@budibase/core@^0.0.32":
  version "0.0.32"
  resolved "https://registry.yarnpkg.com/@budibase/core/-/core-0.0.32.tgz#c5d9ab869c5e9596a1ac337aaf041e795b1cc7fa"
@ -409,6 +423,30 @@
  resolved "https://registry.yarnpkg.com/@nx-js/compiler-util/-/compiler-util-2.0.0.tgz#c74c12165fa2f017a292bb79af007e8fce0af297"
  integrity sha512-AxSQbwj9zqt8DYPZ6LwZdytqnwfiOEdcFdq4l8sdjkZmU2clTht7RDLCI8xvkp7KqgcNaOGlTeCM55TULWruyQ==

+"@sendgrid/client@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@sendgrid/client/-/client-7.1.1.tgz#09a25e58ac7e5321d66807e7110ff0fb61bb534f"
+  integrity sha512-V2BmOO81wHNmbTDwTJ07Olb9dWrj1G19xK4crwds68b9R0w05aOWDddZTvpn9mZnHwIJYqcZcBJuhdHDejuSHg==
+  dependencies:
+    "@sendgrid/helpers" "^7.0.1"
+    axios "^0.19.2"
+
+"@sendgrid/helpers@^7.0.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/@sendgrid/helpers/-/helpers-7.0.1.tgz#b97debc793ed3f9f56102e12c2a6d2bbbf0ffb78"
+  integrity sha512-i/zsissq1upgdywtuJKysaplJJZC24GdtEKiJC1IRlXvBHzIjH4eU+rqUFO8h+hGji3UMURGgMFuLUXTUYvZ9w==
+  dependencies:
+    chalk "^2.0.1"
+    deepmerge "^4.2.2"
+
+"@sendgrid/mail@^7.1.1":
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/@sendgrid/mail/-/mail-7.1.1.tgz#26191594722d5961de1b61cd9c48fa9a69fd197b"
+  integrity sha512-VXdJ9J6vBNMw+wMIGFRvms6EmV6pvoRHMWoLJGweHlsZDnvmK3rWUnnNaS3OdDQ3A8B5bMv2WKsEnHsMZ6iDUg==
+  dependencies:
+    "@sendgrid/client" "^7.1.1"
+    "@sendgrid/helpers" "^7.0.1"
+
 "@sindresorhus/is@^0.14.0":
  version "0.14.0"
  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@ -825,6 +863,11 @@ array-equal@^1.0.0:
  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=

+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-unique@^0.3.2:
  version "0.3.2"
  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@ -897,6 +940,13 @@ atomic-sleep@^1.0.0:
  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
  integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==

+available-typed-arrays@^1.0.0, available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@ -907,6 +957,13 @@ aws4@^1.8.0:
  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
  integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==

+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 babel-jest@^24.9.0:
  version "24.9.0"
  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
@ -1567,6 +1624,13 @@ dateformat@^3.0.3:
  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==

+debug@=3.1.0, debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -1588,13 +1652,6 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
  dependencies:
    ms "^2.1.1"

-debug@~3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
-  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
-  dependencies:
-    ms "2.0.0"
-
 decamelize@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@ -1612,6 +1669,26 @@ decompress-response@^3.3.0:
  dependencies:
    mimic-response "^1.0.0"

+deep-equal@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.3.tgz#cad1c15277ad78a5c01c49c2dee0f54de8a6a7b0"
+  integrity sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==
+  dependencies:
+    es-abstract "^1.17.5"
+    es-get-iterator "^1.1.0"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.0.5"
+    isarray "^2.0.5"
+    object-is "^1.1.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@ -1627,6 +1704,11 @@ deep-is@~0.1.3:
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=

+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 defer-to-connect@^1.0.1:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
@ -1965,7 +2047,7 @@ error-inject@^1.0.0:
  resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
  integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=

-es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstract@^1.17.5:
  version "1.17.5"
  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
  integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
@ -1982,6 +2064,19 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
    string.prototype.trimleft "^2.1.1"
    string.prototype.trimright "^2.1.1"

+es-get-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.0.tgz#bb98ad9d6d63b31aacdc8f89d5d0ee57bcb5b4c8"
+  integrity sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==
+  dependencies:
+    es-abstract "^1.17.4"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@ -2444,6 +2539,13 @@ flatted@^2.0.0:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==

+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 for-in@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@ -2967,11 +3069,21 @@ is-accessor-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

+is-arguments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
+
 is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=

+is-bigint@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.0.tgz#73da8c33208d00f130e9b5e15d23eac9215601c4"
+  integrity sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==
+
 is-binary-path@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@ -2979,6 +3091,11 @@ is-binary-path@~2.1.0:
  dependencies:
    binary-extensions "^2.0.0"

+is-boolean-object@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.1.tgz#10edc0900dd127697a92f6f9807c7617d68ac48e"
+  integrity sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==
+
 is-buffer@^1.1.5:
  version "1.1.6"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@ -3015,7 +3132,7 @@ is-data-descriptor@^1.0.0:
  dependencies:
    kind-of "^6.0.0"

-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
  integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@ -3090,11 +3207,21 @@ is-installed-globally@^0.3.1:
    global-dirs "^2.0.1"
    is-path-inside "^3.0.1"

+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-npm@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
  integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==

+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@ -3131,11 +3258,21 @@ is-regex@^1.0.5:
  dependencies:
    has "^1.0.3"

+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=

+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@ -3152,11 +3289,31 @@ is-type-of@^1.0.0:
    is-class-hotfix "~0.0.6"
    isstream "~0.1.2"

+is-typed-array@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.3.tgz#a4ff5a5e672e1a55f99c7f54e59597af5c1df04d"
+  integrity sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==
+  dependencies:
+    available-typed-arrays "^1.0.0"
+    es-abstract "^1.17.4"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=

+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@ -3182,6 +3339,11 @@ isarray@1.0.0, isarray@~1.0.0:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.6:
  version "4.0.6"
  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@ -4589,6 +4751,14 @@ object-inspect@^1.7.0:
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==

+object-is@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@ -5310,6 +5480,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@ -5638,6 +5821,14 @@ shortid@^2.2.8:
  dependencies:
    nanoid "^2.1.0"

+side-channel@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    object-inspect "^1.7.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -6046,6 +6237,11 @@ supports-color@^7.1.0:
  dependencies:
    has-flag "^4.0.0"

+svelte@^3.9.2:
+  version "3.22.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.22.3.tgz#6af3bdcfea44c2fadbf17a32c479f49bdf1aba4b"
+  integrity sha512-DumSy5eWPFPlMUGf3+eHyFSkt5yLqyAmMdCuXOE4qc5GtFyLxwTAGKZmgKmW2jmbpTTeFQ/fSQfDBQbl9Eo7yw==
+
 symbol-tree@^3.2.2:
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@ -6526,11 +6722,44 @@ whatwg-url@^7.0.0:
    tr46 "^1.0.1"
    webidl-conversions "^4.0.2"

+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=

+which-typed-array@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.2.tgz#e5f98e56bda93e3dac196b01d47c1156679c00b2"
+  integrity sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    es-abstract "^1.17.5"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
				`@ -1 +0,0 @@`
				`export { default as BlockPanel } from "./BlockPanel.svelte";`
				`@ -0,0 +1 @@`
				`export { default as SetupPanel } from "./SetupPanel.svelte";`
				`@ -1 +0,0 @@`
				`export { default as WorkflowList } from "./WorkflowList.svelte";`