adding workflow blocks, parameter parsing, templating

packages/builder/package.json

@@ -47,9 +47,11 @@
     "lodash": "^4.17.13",
     "logrocket": "^1.0.6",
     "lunr": "^2.3.5",
+    "mustache": "^4.0.1",
     "safe-buffer": "^5.1.2",
     "shortid": "^2.2.8",
     "string_decoder": "^1.2.0",
+    "svelte-grid": "^1.10.8",
     "svelte-simple-modal": "^0.3.0",
     "uikit": "^3.1.7"
   },

packages/builder/src/builderStore/api.js

@@ -25,5 +25,5 @@ export default {
   get,
   patch,
   delete: del,
-  put
+  put,
 }

packages/builder/src/builderStore/index.js

@@ -1,6 +1,6 @@
 import { getStore } from "./store"
 import { getBackendUiStore } from "./store/backend"
-import { getWorkflowStore } from "./store/workflow"
+import { getWorkflowStore } from "./store/workflow/"
 import LogRocket from "logrocket"
 
 export const store = getStore()

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

@@ -1,55 +0,0 @@
-import { writable } from "svelte/store"
-import api from "../api"
-
-const workflowActions = store => ({
-  fetch: async instanceId => {
-    const WORKFLOWS_URL = `/api/${instanceId}/workflows`;
-    const workflowResponse = await api.get(WORKFLOWS_URL);
-    const json = await workflowResponse.json();
-    store.update(state => {
-      state.workflows = json
-      return state
-    })
-  },
-  create: async ({ instanceId, name }) => {
-    const workflow = { name }
-    const CREATE_WORKFLOW_URL = `/api/${instanceId}/workflows`;
-    const response = await api.post(CREATE_WORKFLOW_URL, workflow)
-    const json = await response.json();
-    store.update(state => {
-      state.workflows = state.workflows.concat(json.workflow)
-      state.selectedWorkflowId = json.workflow._id
-      return state
-    })
-  },
-  update: async ({ instanceId, workflow }) => {
-    const UPDATE_WORKFLOW_URL = `/api/${instanceId}/workflows`;
-    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
-    const json = await response.json();
-    store.update(state => {
-      const existingIdx = state.workflows.findIndex(existing => existing._id === workflow._id);
-      state.workflows.splice(existingIdx, 1, json.workflow);
-      state.workflows = state.workflows
-      return state
-    })
-  },
-  select: workflow => {
-    store.update(state => {
-      state.selectedWorkflowId = workflow._id
-      state.selectedWorkflowBlock = null
-      return state;
-    })
-  }
-});
-
-export const getWorkflowStore = () => {
-  const INITIAL_WORKFLOW_STATE = {
-    workflows: []
-  }
-
-  const store = writable(INITIAL_WORKFLOW_STATE)
-
-  store.actions = workflowActions(store);
-
-  return store
-}

packages/builder/src/builderStore/store/workflow/Workflow.js

@@ -0,0 +1,79 @@
+import mustache from "mustache"
+// TODO: tidy up import
+import blockDefinitions from "../../../pages/[application]/workflow/WorkflowPanel/blockDefinitions"
+
+/**
+ * Class responsible for the traversing of the workflow definition.
+ * Workflow definitions are stored in linked lists.
+ */
+export default class Workflow {
+  constructor(workflow) {
+    this.workflow = workflow
+  }
+
+  addBlock(block) {
+    let node = this.workflow.definition
+    while (node.next) node = node.next
+    node.next = block
+  }
+
+  updateBlock(updatedBlock, id) {
+    let block = this.workflow.definition
+
+    while (block.id !== id) block = block.next
+    if (!block) throw new Error("Block not found.")
+
+    block = updatedBlock
+  }
+
+  deleteBlock(id) {
+    let previous = null
+    let block = this.workflow.definition
+
+    // iterate through the blocks
+    while (block.id !== id) {
+      previous = block
+      block = block.next
+    }
+
+    // delete the block found
+    previous.next = block.next || {}
+  }
+
+  createUiTree() {
+    if (!this.workflow.definition.next) return []
+    return Workflow.buildUiTree(this.workflow.definition.next)
+  }
+
+  static buildUiTree(block, tree = []) {
+    if (!block) return tree
+
+    // The client side display definition for the block
+    const definition = blockDefinitions[block.type][block.actionId]
+    if (!definition) {
+      throw new Error(
+        `No block definition exists for the chosen block. Check there's an entry in the block definitions for ${block.actionId}`
+      )
+    }
+
+    if (!definition.params) {
+      throw new Error(
+        `Blocks should always have parameters. Ensure that the block definition is correct for ${block.actionId}`
+      )
+    }
+
+    const tagline = definition.tagline || ""
+    const args = block.args || {}
+
+    tree.push({
+      id: block.id,
+      type: block.type,
+      params: block.params,
+      args,
+      heading: block.actionId,
+      body: mustache.render(tagline, args),
+    })
+
+    return this.buildUiTree(block.next, tree)
+  }
+}

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

@@ -0,0 +1,102 @@
+import { writable } from "svelte/store"
+import api from "../../api"
+import Workflow from "./Workflow"
+
+const workflowActions = store => ({
+  fetch: async instanceId => {
+    const WORKFLOWS_URL = `/api/${instanceId}/workflows`
+    const workflowResponse = await api.get(WORKFLOWS_URL)
+    const json = await workflowResponse.json()
+    store.update(state => {
+      state.workflows = json
+      return state
+    })
+  },
+  create: async ({ instanceId, name }) => {
+    const workflow = { name, definition: {} }
+    const CREATE_WORKFLOW_URL = `/api/${instanceId}/workflows`
+    const response = await api.post(CREATE_WORKFLOW_URL, workflow)
+    const json = await response.json()
+    store.update(state => {
+      state.workflows = state.workflows.concat(json.workflow)
+      state.currentWorkflow = new Workflow(json.workflow)
+      return state
+    })
+  },
+  save: async ({ instanceId, workflow }) => {
+    const UPDATE_WORKFLOW_URL = `/api/${instanceId}/workflows`
+    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
+    const json = await response.json()
+    store.update(state => {
+      const existingIdx = state.workflows.findIndex(
+        existing => existing._id === workflow._id
+      )
+      state.workflows.splice(existingIdx, 1, json.workflow)
+      state.workflows = state.workflows
+      state.currentWorkflow = new Workflow(json.workflow)
+      return state
+    })
+  },
+  update: async ({ instanceId, workflow }) => {
+    const UPDATE_WORKFLOW_URL = `/api/${instanceId}/workflows`
+    const response = await api.put(UPDATE_WORKFLOW_URL, workflow)
+    const json = await response.json()
+    store.update(state => {
+      const existingIdx = state.workflows.findIndex(
+        existing => existing._id === workflow._id
+      )
+      state.workflows.splice(existingIdx, 1, json.workflow)
+      state.workflows = state.workflows
+      return state
+    })
+  },
+  delete: async ({ instanceId, workflow }) => {
+    const { _id, _rev } = workflow
+    const DELETE_WORKFLOW_URL = `/api/${instanceId}/workflows/${_id}/${_rev}`
+    await api.delete(DELETE_WORKFLOW_URL)
+
+    store.update(state => {
+      const existingIdx = state.workflows.findIndex(
+        existing => existing._id === _id
+      )
+      state.workflows.splice(existingIdx, 1)
+      state.workflows = state.workflows
+      state.currentWorkflow = null
+      return state
+    })
+  },
+  select: workflow => {
+    store.update(state => {
+      // TODO: better naming
+      state.currentWorkflow = new Workflow(workflow)
+      state.selectedWorkflowBlock = null
+      return state
+    })
+  },
+  addBlockToWorkflow: block => {
+    store.update(state => {
+      state.currentWorkflow.addBlock(block)
+      state.selectedWorkflowBlock = block
+      return state
+    })
+  },
+  deleteWorkflowBlock: block => {
+    store.update(state => {
+      state.currentWorkflow.deleteBlock(block._id)
+      state.selectedWorkflowBlock = null
+      return state
+    })
+  },
+})
+
+export const getWorkflowStore = () => {
+  const INITIAL_WORKFLOW_STATE = {
+    workflows: [],
+  }
+
+  const store = writable(INITIAL_WORKFLOW_STATE)
+
+  store.actions = workflowActions(store)
+
+  return store
+}

packages/builder/src/builderStore/store/workflow/tests/Workflow.js

@@ -0,0 +1 @@
+describe("Workflow Data Object", () => {})

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

@@ -34,7 +34,7 @@
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Access Level</label>
       <select class="uk-select" bind:value={accessLevelId}>
-        <option value=""></option>
+        <option value="" />
         <option value="POWER_USER">Power User</option>
         <option value="ADMIN">Admin</option>
       </select>

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

@@ -25,7 +25,7 @@
   let categories = [
     { value: "design", name: "Design" },
     { value: "settings", name: "Settings" },
-    { value: "events", name: "Events" }
+    { value: "events", name: "Events" },
   ]
   let selectedCategory = categories[0]
 

packages/builder/src/global.css

@@ -78,6 +78,7 @@
     --primary: #0055ff;
     --secondary: #f1f4fc;
     --color: #393c44;
+    --light-grey: #fbfbfb;
     --dark-grey: #808192;
     --medium-grey: #e8e8ef;
     --background: rgb(251, 251, 251);

packages/builder/src/pages/[application]/workflow/SetupPanel/DeleteWorkflowModal.svelte

@@ -0,0 +1,87 @@
+<script>
+  import { store, backendUiStore, workflowStore } from "builderStore"
+  import api from "builderStore/api"
+  import ActionButton from "components/common/ActionButton.svelte"
+
+  export let onClosed
+
+  let name
+
+  $: valid = !!name
+  $: instanceId = $backendUiStore.selectedDatabase._id
+
+  async function deleteWorkflow() {
+    await workflowStore.actions.delete({
+      instanceId,
+      workflow: $workflowStore.currentWorkflow.workflow,
+    })
+    onClosed()
+  }
+</script>
+
+<header>
+  <i class="ri-stackshare-line" />
+  Delete Workflow
+</header>
+<div>
+  <p>
+    Are you sure you want to delete this workflow? This action can't be undone.
+  </p>
+</div>
+<footer>
+  <a href="https://docs.budibase.com">
+    <i class="ri-information-line" />
+    Learn about workflows
+  </a>
+  <ActionButton on:click={onClosed}>Cancel</ActionButton>
+  <ActionButton alert on:click={deleteWorkflow}>Delete</ActionButton>
+</footer>
+
+<style>
+  header {
+    font-size: 24px;
+    color: var(--font);
+    font-weight: bold;
+    padding: 30px;
+  }
+
+  header i {
+    margin-right: 10px;
+    font-size: 20px;
+    background: var(--secondary);
+    color: var(--dark-grey);
+    padding: 8px;
+  }
+
+  div {
+    padding: 0 30px 30px 30px;
+  }
+
+  label {
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  footer {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 5px;
+    grid-auto-columns: 3fr 1fr 1fr;
+    padding: 20px;
+    background: #fafafa;
+    border-radius: 0.5rem;
+  }
+
+  footer a {
+    color: var(--primary);
+    font-size: 14px;
+    vertical-align: middle;
+    display: flex;
+    align-items: center;
+  }
+
+  footer i {
+    font-size: 20px;
+    margin-right: 10px;
+  }
+</style>

packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte

@@ -1,20 +1,27 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, getContext } from "svelte"
   import { backendUiStore, workflowStore } from "builderStore"
   import api from "builderStore/api"
-  import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte";
+  import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
+  import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
 
-  $: workflow = $workflowStore.workflows.find(
+  const { open, close } = getContext("simple-modal")
-    wf => wf._id === $workflowStore.selectedWorkflowId
+
-  )
+  $: workflow = $workflowStore.currentWorkflow
   $: workflowBlock = $workflowStore.selectedWorkflowBlock
 
   function deleteWorkflow() {
-    workflowStore.actions.deleteWorkflow(workflow)
+    open(
+      DeleteWorkflowModal,
+      {
+        onClosed: close,
+      },
+      { styleContent: { padding: "0" } }
+    )
   }
 
   function deleteWorkflowBlock() {
-    // TODO: implement
+    // TODO: implement, need to put IDs against workflow blocks
     workflowStore.actions.deleteWorkflowBlock(workflowBlock)
   }
 </script>
@@ -26,10 +33,12 @@
   <div class="panel-body">
     {#if workflowBlock}
       <WorkflowBlockSetup {workflowBlock} />
-      <button class="delete-workflow-button hoverable" on:click={deleteWorkflowBlock}>
+      <button
-        Delete {workflowBlock.type} 
+        class="delete-workflow-button hoverable"
+        on:click={deleteWorkflowBlock}>
+        Delete Block
       </button>
-    {:else if $workflowStore.selectedWorkflowId}
+    {:else if $workflowStore.currentWorkflow}
       <label class="uk-form-label">Workflow: {workflow.name}</label>
       <div class="uk-margin">
         <label class="uk-form-label">Name</label>
@@ -44,7 +53,9 @@
         <label class="uk-form-label">User Access</label>
         Some User Access Stuff Here
       </div>
-      <button class="delete-workflow-button hoverable" on:click={deleteWorkflow}>
+      <button
+        class="delete-workflow-button hoverable"
+        on:click={deleteWorkflow}>
         Delete Workflow
       </button>
     {/if}

packages/builder/src/pages/[application]/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -1,17 +1,62 @@
 <script>
+  import { backendUiStore } from "builderStore"
+
   export let workflowBlock
-  $: workflowArgs = Object.keys(workflowBlock.args)
+
+  let params
+
+  $: workflowParams = workflowBlock.params
+    ? Object.entries(workflowBlock.params)
+    : []
+  // $: workflowArgs = workflowBlock.args ? Object.keys(workflowBlock.args) : []
 </script>
 
-<label class="uk-form-label">{workflowBlock.heading}: {workflowBlock.heading}</label>
+<label class="uk-form-label">
-{#each workflowArgs as workflowArg}
+  {workflowBlock.type}: {workflowBlock.heading}
-  <div class="uk-margin">
+</label>
-    <label class="uk-form-label">Name</label>
+{#each workflowParams as [parameter, type]}
+  <div class="uk-margin block-field">
+    <label class="uk-form-label">{parameter}</label>
     <div class="uk-form-controls">
+      {#if type === 'number'}
+        <input
+          type="number"
+          class="budibase__input"
+          bind:value={workflowBlock.args[parameter]} />
+      {:else if type === 'model'}
+        <select
+          class="budibase__input"
+          bind:value={workflowBlock.args[parameter]}>
+          {#each $backendUiStore.models as model}
+            <option value={model._id}>{model.name}</option>
+          {/each}
+        </select>
+      {:else if type === 'component'}
+        <!-- <select>
+          {#each $store.components as question}
+            <option value={question}>{question.text}</option>
+          {/each}
+        </select> -->
+      {:else if type === 'string'}
         <input
           type="text"
           class="budibase__input"
-        bind:value={workflowBlock.args[workflowArg]} />
+          bind:value={workflowBlock.args[parameter]} />
+      {/if}
     </div>
   </div>
 {/each}
+
+<style>
+  .block-field {
+    border-radius: 3px;
+    background: var(--light-grey);
+    padding: 20px;
+  }
+
+  label {
+    text-transform: capitalize;
+    font-size: 14px;
+    font-weight: 500;
+  }
+</style>

packages/builder/src/pages/[application]/workflow/SetupPanel/index.js

@@ -1 +1 @@
-export { default as SetupPanel } from "./SetupPanel.svelte";
+export { default as SetupPanel } from "./SetupPanel.svelte"

packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte

@@ -9,29 +9,13 @@
   let uiTree
   let instanceId = $backendUiStore.selectedDatabase._id
 
-  $: workflow = $workflowStore.workflows.find(
+  $: workflow = $workflowStore.currentWorkflow
-    wf => wf._id === $workflowStore.selectedWorkflowId
-  )
 
-  // Build a renderable UI Tree for the flowchart generator
+  $: if (workflow) uiTree = workflow ? workflow.createUiTree() : []
-  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);
+    workflowStore.actions.deleteWorkflowBlock(block)
   }
 
   function onSelect(block) {
@@ -43,9 +27,45 @@
 </script>
 
 <section>
-  <Flowchart 
+  <Flowchart blocks={uiTree} {onSelect} on:delete={onDelete} />
-    blocks={uiTree} 
+  <footer>
-    onSelect={onSelect} 
+    <button class="stop-button hoverable">
-    on:delete={onDelete}
+      <i class="ri-stop-fill" />
-  />
+    </button>
+    <button class="play-button hoverable">
+      <i class="ri-play-fill" />
+    </button>
+  </footer>
 </section>
+
+<style>
+  footer {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  footer > button {
+    border-radius: 100%;
+    color: var(--white);
+    width: 76px;
+    height: 76px;
+    border: none;
+    background: #adaec4;
+    font-size: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 24px;
+  }
+
+  .play-button:hover {
+    background: var(--primary);
+  }
+
+  .stop-button:hover {
+    background: var(--coral);
+  }
+</style>

packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowChart.svelte

@@ -7,9 +7,9 @@
 
 <section class="canvas">
   {#each blocks as block, idx}
-    <FlowItem onSelect={onSelect} {block} />
+    <FlowItem {onSelect} {block} />
     {#if idx !== blocks.length - 1}
-      <i class="ri-arrow-down-line"></i>
+      <i class="ri-arrow-down-line" />
     {/if}
   {/each}
 </section>

packages/builder/src/pages/[application]/workflow/WorkflowBuilder/svelte-flows/FlowItem.svelte

@@ -3,19 +3,22 @@
   export let block
 
   function selectBlock() {
-    onSelect(block);
+    onSelect(block)
   }
+
+  console.log(block)
 </script>
 
-<div class="hoverable" on:click={selectBlock}>
+<div class={`${block.type} hoverable`} on:click={selectBlock}>
   <header>{block.heading}</header>
   <hr />
-  <p>{block.body}</p>
+  <p>
+    {@html block.body}
+  </p>
 </div>
 
 <style>
   div {
-    border: 1px solid black;
     width: 320px;
     padding: 20px;
     margin-bottom: 60px;
@@ -27,6 +30,21 @@
     color: var(--white);
   }
 
+  .ACTION {
+    background-color: var(--white);
+    color: var(--font);
+  }
+
+  .TRIGGER {
+    background-color: var(--font);
+    color: var(--white);
+  }
+
+  .LOGIC {
+    background-color: var(--secondary);
+    color: var(--font);
+  }
+
   div:hover {
     transform: scale(1.05);
   }

packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/BlockList.svelte

@@ -1,19 +1,19 @@
 <script>
   import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
-  import { WorkflowList } from "../";
+  import { WorkflowList } from "../"
-  import WorkflowBlock from "./WorkflowBlock.svelte";
+  import WorkflowBlock from "./WorkflowBlock.svelte"
   import api from "builderStore/api"
   import blockDefinitions from "../blockDefinitions"
 
   const SUB_TABS = [
     {
       name: "Triggers",
-      key: "TRIGGERS",
+      key: "TRIGGER",
     },
     {
       name: "Actions",
-      key: "ACTIONS",
+      key: "ACTION",
     },
     {
       name: "Logic",
@@ -21,14 +21,10 @@
     },
   ]
 
-  let selectedTab = "TRIGGERS"
+  let selectedTab = "TRIGGER"
   let definitions = []
 
-  $: definitions = Object.values(blockDefinitions[selectedTab])
+  $: definitions = Object.entries(blockDefinitions[selectedTab])
-
-  function myAction(node) {
-    console.log("ACTION FIRED", node);
-  }
 </script>
 
 <section>
@@ -43,8 +39,8 @@
     {/each}
   </div>
   <div id="blocklist">
-    {#each definitions as blockDefinition}
+    {#each definitions as [actionId, blockDefinition]}
-      <WorkflowBlock {blockDefinition} blockType={selectedTab} />
+      <WorkflowBlock {blockDefinition} {actionId} blockType={selectedTab} />
     {/each}
   </div>
 </section>

packages/builder/src/pages/[application]/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte

@@ -1,12 +1,18 @@
 <script>
-  import { workflowStore } from "builderStore";
+  import { workflowStore } from "builderStore"
 
   export let blockType
   export let blockDefinition
+  export let actionId
 
   function addBlockToWorkflow() {
     // TODO: store the block type in the DB as well
-    workflowStore.actions.addBlockToWorkflow({ blockDefinition, blockType });
+    workflowStore.actions.addBlockToWorkflow({
+      ...blockDefinition,
+      args: {},
+      actionId,
+      type: blockType,
+    })
   }
 </script>
 

packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte

@@ -7,6 +7,9 @@
 
   const { open, close } = getContext("simple-modal")
 
+  $: currentWorkflowId =
+    $workflowStore.currentWorkflow && $workflowStore.currentWorkflow._id
+
   function newWorkflow() {
     open(
       CreateWorkflowModal,
@@ -20,6 +23,14 @@
   onMount(() => {
     workflowStore.actions.fetch($backendUiStore.selectedDatabase._id)
   })
+
+  function saveWorkflow() {
+    // TODO: Clean up args
+    workflowStore.actions.save({
+      instanceId: $backendUiStore.selectedDatabase._id,
+      workflow: $workflowStore.currentWorkflow.workflow,
+    })
+  }
 </script>
 
 <section>
@@ -30,13 +41,18 @@
     {#each $workflowStore.workflows as workflow}
       <li
         class="workflow-item"
-        class:selected={workflow._id === $workflowStore.selectedWorkflowId}
+        class:selected={workflow._id === currentWorkflowId}
         on:click={() => workflowStore.actions.select(workflow)}>
         <i class="ri-stackshare-line" class:live={workflow.live} />
         {workflow.name}
       </li>
     {/each}
   </ul>
+  {#if $workflowStore.currentWorkflow}
+    <button class="new-workflow-button hoverable" on:click={saveWorkflow}>
+      Save Workflow
+    </button>
+  {/if}
 </section>
 
 <style>

packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte

@@ -28,7 +28,7 @@
       on:click={() => (selectedTab = 'WORKFLOWS')}>
       Workflows
     </span>
-    {#if $workflowStore.selectedWorkflowId}
+    {#if $workflowStore.currentWorkflow}
       <span
         class="hoverable"
         class:selected={selectedTab === 'ADD'}
@@ -58,4 +58,14 @@
     color: var(--dark-grey);
   }
 
+  .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>

packages/builder/src/pages/[application]/workflow/WorkflowPanel/blockDefinitions.js

@@ -1,89 +1,126 @@
-const ACTIONS = {
+const ACTION = {
   SET_STATE: {
     name: "Update UI State",
+    tagline: "Update <b>{{path}}</b> to <b>{{value}}</b>",
     icon: "",
     description: "Update your User Interface with some data.",
-    type: "CLIENT",
+    environment: "CLIENT",
+    params: {
+      path: "string",
+      value: "string",
+    },
   },
   NAVIGATE: {
     name: "Navigate",
     icon: "ri-navigation-line",
     description: "Navigate to another page.",
-    type: "CLIENT"
+    environment: "CLIENT",
+    params: {
+      url: "string",
+    },
   },
   SAVE_RECORD: {
     name: "Save Record",
     icon: "ri-save-3-fill",
     description: "Save a record to your database.",
-    type: "SERVER",
+    environment: "SERVER",
+    params: {
+      model: "string",
+    },
   },
   DELETE_RECORD: {
     description: "Delete a record from your database.",
     icon: "ri-delete-bin-line",
     name: "Delete Record",
-    type: "SERVER",
+    environment: "SERVER",
+    params: {
+      record: "string",
+    },
   },
   FIND_RECORD: {
     description: "Delete a record from your database.",
     icon: "ri-delete-bin-line",
     name: "Find Record",
-    type: "SERVER",
+    environment: "SERVER",
+    params: {
+      record: "string",
+    },
   },
   CREATE_USER: {
     description: "Create a new user.",
     icon: "ri-user-add-fill",
     name: "Create User",
-    type: "SERVER",
+    environment: "SERVER",
+    params: {
+      name: "string",
+      password: "password",
+      accessLevel: "accessLevel",
+    },
   },
   SEND_EMAIL: {
     description: "Send an email.",
+    tagline: "Send email to {{to}}",
     icon: "ri-mail-open-fill",
     name: "Send Email",
-    type: "SERVER",
+    environment: "SERVER",
-  }
+    params: {
-};
+      to: "string",
+      from: "string",
+      subject: "string",
+      text: "string",
+    },
+  },
+}
 
-const TRIGGERS = {
+const TRIGGER = {
   SAVE_RECORD: {
     name: "Record Saved",
     icon: "ri-delete-bin-line",
+    tagline: "Record is added to {{model}}",
     description: "Save a record to your database.",
-    type: "SERVER",
+    environment: "SERVER",
+    params: {
+      model: "model",
+    },
   },
   CLICK: {
     name: "Click",
     icon: "ri-cursor-line",
-    description: "Trigger when you click on an element in the UI."
+    description: "Trigger when you click on an element in the UI.",
   },
   LOAD: {
     name: "Load",
     icon: "ri-loader-line",
-    description: "Trigger an element has finished loading."
+    description: "Trigger an element has finished loading.",
   },
   INPUT: {
     name: "Input",
     icon: "ri-text",
-    description: "Trigger when you type into an input box."
+    description: "Trigger when you environment into an input box.",
   },
-};
+}
 
 const LOGIC = {
   FILTER: {
     name: "Filter",
+    tagline: "{{key}} {{condition}} {{value}}",
     icon: "ri-git-branch-line",
     description: "Filter any workflows which do not meet certain conditions.",
-    type: "CLIENT"
+    environment: "CLIENT",
+    params: {
+      if: "string",
+    },
   },
   DELAY: {
     name: "Delay",
     icon: "ri-git-branch-line",
     description: "Delay the workflow until an amount of time has passed.",
-    type: "CLIENT"
+    environment: "CLIENT",
   },
 }
 
 export default {
-  ACTIONS,
+  ACTION,
-  TRIGGERS,
+  TRIGGER,
-  LOGIC
+  LOGIC,
 }

packages/builder/src/pages/[application]/workflow/WorkflowPanel/index.js

@@ -1,3 +1,3 @@
-export { default as WorkflowPanel } from "./WorkflowPanel.svelte";
+export { default as WorkflowPanel } from "./WorkflowPanel.svelte"
-export { default as BlockList } from "./BlockList/BlockList.svelte";
+export { default as BlockList } from "./BlockList/BlockList.svelte"
-export { default as WorkflowList } from "./WorkflowList/WorkflowList.svelte";
+export { default as WorkflowList } from "./WorkflowList/WorkflowList.svelte"

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

@@ -24,6 +24,7 @@
 
   .nav {
     padding: 20px;
+    height: 100%;
   }
 
   .root {

packages/builder/src/pages/[application]/workflow/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import WorkflowBuilder from "./WorkflowBuilder/WorkflowBuilder.svelte";
+  import WorkflowBuilder from "./WorkflowBuilder/WorkflowBuilder.svelte"
 </script>
 
 <WorkflowBuilder />

packages/client/src/api/index.js

@@ -2,8 +2,7 @@ import { loadRecord } from "./loadRecord"
 import { listRecords } from "./listRecords"
 import { authenticate } from "./authenticate"
 import { saveRecord } from "./saveRecord"
-import { triggerWorkflow } from "./workflow";
+import { triggerWorkflow } from "./workflow"
-
 
 export const createApi = ({ rootPath = "", setState, getState }) => {
   const apiCall = method => async ({ url, body }) => {
@@ -16,7 +15,6 @@ export const createApi = ({ rootPath = "", setState, getState }) => {
       credentials: "same-origin",
     })
 
-    
     switch (response.status) {
       case 200:
         return response.json()
@@ -66,6 +64,6 @@ export const createApi = ({ rootPath = "", setState, getState }) => {
     listRecords: listRecords(apiOpts),
     authenticate: authenticate(apiOpts),
     saveRecord: saveRecord(apiOpts),
-    triggerWorkflow: triggerWorkflow(apiOpts)
+    triggerWorkflow: triggerWorkflow(apiOpts),
   }
 }

packages/client/src/api/workflow/index.js

@@ -1,15 +1,13 @@
-import Orchestrator, { clientStrategy } from "./orchestrator";
+import Orchestrator, { clientStrategy } from "./orchestrator"
-
 
 export const triggerWorkflow = api => ({ workflow }) => {
   const workflowOrchestrator = new Orchestrator(
     api,
     "inst_60dd510_700f7dc06735403e81d5af91072d7241"
-  );
+  )
   workflowOrchestrator.strategy = clientStrategy
 
-  workflowOrchestrator.execute(workflow);
+  workflowOrchestrator.execute(workflow)
 
   // hit the API and get the workflow data back
-
 }

packages/client/src/api/workflow/orchestrator.js

@@ -1,4 +1,4 @@
-import get from "lodash/fp/get";
+import get from "lodash/fp/get"
 
 /**
  * The workflow orhestrator is a class responsible for executing workflows.
@@ -18,13 +18,13 @@ export default class Orchestrator {
   }
 
   async execute(workflowId) {
-    const EXECUTE_WORKFLOW_URL = `/api/${this.instanceId}/workflows/${workflowId}`;
+    const EXECUTE_WORKFLOW_URL = `/api/${this.instanceId}/workflows/${workflowId}`
     const workflow = await this.api.get({ url: EXECUTE_WORKFLOW_URL })
     this._strategy.run({
       workflow: workflow.definition,
       api: this.api,
-      instanceId: this.instanceId
+      instanceId: this.instanceId,
-    });
+    })
   }
 }
 
@@ -32,76 +32,76 @@ export default class Orchestrator {
 export const clientStrategy = {
   context: {},
   bindContextArgs: function(args, api) {
-    const mappedArgs = { ...args };
+    const mappedArgs = { ...args }
 
     console.log("original args", args)
 
     // bind the workflow action args to the workflow context, if required
     for (let arg in args) {
-      const argValue = args[arg];
+      const argValue = args[arg]
       // Means that it's bound to state or workflow context
       if (argValue.startsWith("$")) {
         // if value is bound to workflow context.
         if (argValue.startsWith("$context")) {
-          const path = argValue.replace("$context.", "");
+          const path = argValue.replace("$context.", "")
           // pass in the value from context
-          mappedArgs[arg] = get(path, this.context);  
+          mappedArgs[arg] = get(path, this.context)
         }
 
         // if the value is bound to state
         if (argValue.startsWith("$state")) {
-          const path = argValue.replace("$state.", "");
+          const path = argValue.replace("$state.", "")
           // pass in the value from state
           // TODO: not working
-          mappedArgs[arg] = api.getState(path);  
+          mappedArgs[arg] = api.getState(path)
         }
       }
     }
 
-    console.log(mappedArgs);
+    console.log(mappedArgs)
 
-    return Object.values(mappedArgs);
+    return Object.values(mappedArgs)
   },
   run: async function({ workflow, api, instanceId }) {
-    const block = workflow.next;
+    const block = workflow.next
 
-    console.log("Executing workflow block", block);
+    console.log("Executing workflow block", block)
 
-    if (!block) return;
+    if (!block) return
 
     // This code gets run in the browser
-    if (block.type === "CLIENT") {
+    if (block.environment === "CLIENT") {
       if (block.actionId === "SET_STATE") {
         // get props from the workflow context if required
         api.setState(...this.bindContextArgs(block.args))
         // update the context with the data
         this.context = {
           ...this.context,
-            SET_STATE: block.args
+          SET_STATE: block.args,
+        }
       }
     }
-    };
 
     // this workflow block gets executed on the server
-    if (block.type === "SERVER") {
+    if (block.environment === "SERVER") {
       const EXECUTE_WORKFLOW_URL = `/api/${instanceId}/workflows/action`
       const response = await api.post({
         url: EXECUTE_WORKFLOW_URL,
         body: {
           action: block.actionId,
-          args: this.bindContextArgs(block.args, api)
+          args: this.bindContextArgs(block.args, api),
-        } 
+        },
-      });
+      })
 
       this.context = {
         ...this.context,
-        [block.actionId]: response 
+        [block.actionId]: response,
       }
     }
 
     console.log("workflowContext", this.context)
 
     // TODO: clean this up, don't pass all those args
-    this.run({ workflow: workflow.next, instanceId, api });
+    this.run({ workflow: workflow.next, instanceId, api })
-  }
+  },
 }

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

@@ -5,7 +5,7 @@ const newid = require("../../db/newid")
 const ajv = new Ajv()
 
 exports.save = async function(ctx) {
-  console.log("THIS INSTANCE", ctx.params.instanceId);
+  console.log("THIS INSTANCE", ctx.params.instanceId)
   const db = new CouchDB(ctx.params.instanceId)
   const record = ctx.request.body
   record.modelId = ctx.params.modelId

packages/server/src/api/controllers/workflow/actions/CUSTOM_JS.js

@@ -1,9 +1,9 @@
-export default async function () {
+export default async function() {
-  const response = await fetch("www.google.com");
+  const response = await fetch("www.google.com")
-  console.log(response);
+  console.log(response)
-  console.log("CUSTOM ACTION");
+  console.log("CUSTOM ACTION")
   return {
     message: "CUSTOM_WORKFLOW_SCRIPT",
-    response
+    response,
   }
 }

packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js

@@ -1,20 +1,20 @@
-const recordController = require("../../record");
+const recordController = require("../../record")
 
 module.exports = async function saveRecord(args) {
-  console.log("SAVING this record", args.record);
+  console.log("SAVING this record", args.record)
 
   const ctx = {
     params: {
       instanceId: "inst_60dd510_700f7dc06735403e81d5af91072d7241",
     },
     request: {
-      body: args.record
+      body: args.record,
-    }
+    },
   }
 
-  await recordController.save(ctx);
+  await recordController.save(ctx)
 
   return {
-    record: ctx.body
+    record: ctx.body,
   }
 }

packages/server/src/api/controllers/workflow/actions/SEND_EMAIL.js

@@ -1,27 +1,25 @@
-const sgMail = require('@sendgrid/mail');
+const sgMail = require("@sendgrid/mail")
 
-sgMail.setApiKey(process.env.SENDGRID_API_KEY);
+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 
+    text: args.text,
-  };
+  }
 
   try {
-    await sgMail.send(msg);
+    await sgMail.send(msg)
     return {
       success: true,
-      err
+      err,
     }
   } catch (err) {
     return {
       success: false,
-      err
+      err,
     }
   }
-
 }

packages/server/src/api/controllers/workflow/index.js

@@ -28,7 +28,6 @@ exports.create = async function(ctx) {
   //   return
   // }
 
-
   workflow.type = "workflow"
   const response = await db.post(workflow)
   workflow._rev = response.rev
@@ -39,14 +38,14 @@ exports.create = async function(ctx) {
     workflow: {
       ...workflow,
       _rev: response.rev,
-      _id: response.id
+      _id: response.id,
+    },
   }
-  };
 }
 
 exports.update = async function(ctx) {
   const db = new CouchDB(ctx.params.instanceId)
-  const workflow = ctx.request.body;
+  const workflow = ctx.request.body
 
   const response = await db.put(workflow)
   workflow._rev = response.rev
@@ -57,7 +56,7 @@ exports.update = async function(ctx) {
     workflow: {
       ...workflow,
       _rev: response.rev,
-      _id: response.id
+      _id: response.id,
     },
   }
 }
@@ -77,15 +76,15 @@ exports.find = async function(ctx) {
 }
 
 exports.executeAction = async function(ctx) {
-  const workflowAction = require(`./actions/${ctx.request.body.action}`);
+  const workflowAction = require(`./actions/${ctx.request.body.action}`)
-  const response = await workflowAction(ctx.request.body.args);
+  const response = await workflowAction(ctx.request.body.args)
-  ctx.body = response; 
+  ctx.body = response
 }
 
 exports.fetchActionScript = async function(ctx) {
-  const workflowAction = require(`./actions/${ctx.action}`);
+  const workflowAction = require(`./actions/${ctx.action}`)
-  console.log(workflowAction);
+  console.log(workflowAction)
-  ctx.body = workflowAction; 
+  ctx.body = workflowAction
 }
 
 exports.destroy = async function(ctx) {

packages/server/src/app.js

@@ -4,7 +4,7 @@ const logger = require("koa-pino-logger")
 const http = require("http")
 const api = require("./api")
 const env = require("./environment")
-const eventPublisher = require("./events");
+const eventPublisher = require("./events")
 
 const app = new Koa()
 
@@ -20,7 +20,7 @@ app.use(
   })
 )
 
-app.context.publisher = eventPublisher;
+app.context.publisher = eventPublisher
 
 // api routes
 app.use(api.routes())

packages/server/src/events/index.js

@@ -1,3 +1,3 @@
-const EventEmitter = require("events").EventEmitter;
+const EventEmitter = require("events").EventEmitter
 
-module.exports = new EventEmitter();
+module.exports = new EventEmitter()

packages/server/src/schemas/index.js

@@ -2,16 +2,16 @@ const WORKFLOW_SCHEMA = {
   properties: {
     type: "workflow",
     pageId: {
-      type: "string"
+      type: "string",
     },
     screenId: {
-      type: "string"
+      type: "string",
     },
     live: {
-      type: "boolean"
+      type: "boolean",
     },
     uiTree: {
-      type: "object"
+      type: "object",
     },
     definition: {
       type: "object",
@@ -20,19 +20,20 @@ const WORKFLOW_SCHEMA = {
         next: {
           type: "object",
           properties: {
+            environment: { environment: "string" },
             type: { type: "string" },
             actionId: { type: "string" },
             args: { type: "object" },
             conditions: { type: "array" },
             errorHandling: { type: "object" },
-            next: { type: "object" }
+            next: { type: "object" },
-          }
           },
-      }
+        },
-    }
+      },
-  }
+    },
-};
+  },
+}
 
 module.exports = {
-  WORKFLOW_SCHEMA
+  WORKFLOW_SCHEMA,
-};
+}

packages/server/yarn.lock

@@ -194,20 +194,6 @@
     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"
@@ -863,11 +849,6 @@ 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"
@@ -940,13 +921,6 @@ 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"
@@ -1669,26 +1643,6 @@ 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"
@@ -2047,7 +2001,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.4, es-abstract@^1.17.5:
+es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, 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==
@@ -2064,19 +2018,6 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.4, es-abstrac
     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"
@@ -3069,21 +3010,11 @@ 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"
@@ -3091,11 +3022,6 @@ 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"
@@ -3132,7 +3058,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   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==
@@ -3207,21 +3133,11 @@ 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"
@@ -3258,21 +3174,11 @@ 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"
@@ -3289,31 +3195,11 @@ 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"
@@ -3339,11 +3225,6 @@ 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"
@@ -4751,14 +4632,6 @@ 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"
@@ -5480,19 +5353,6 @@ 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"
@@ -5821,14 +5681,6 @@ 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"
@@ -6237,11 +6089,6 @@ 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"
@@ -6722,44 +6569,11 @@ 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"