Add data binding to workflow block setup

6 years ago · 3e3a978e74
3 changed files with 214 additions and 2 deletions
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@ -0,0 +1,51 @@
+<script>
+  import GenericBindingPopover from "./GenericBindingPopover.svelte"
+  import { Input, Icon } from "@budibase/bbui"
+
+  export let bindings = []
+  export let value
+  let anchor
+  let popover
+  let enrichedValue
+</script>
+
+<div class="container" bind:this={anchor}>
+  <Input {...$$props} bind:value />
+  <button on:click={popover.show}>
+    <Icon name="edit" />
+  </button>
+</div>
+<GenericBindingPopover
+  {anchor}
+  {bindings}
+  bind:value
+  bind:popover
+  align="right" />
+
+<style>
+  .container {
+    position: relative;
+  }
+
+  button {
+    position: absolute;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    height: 24px;
+    width: 24px;
+    background: var(--grey-4);
+    right: 7px;
+    bottom: 7px;
+  }
+  button:hover {
+    background: var(--grey-5);
+    cursor: pointer;
+  }
+  button :global(svg) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%) !important;
+  }
+</style>
--- a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
@ -0,0 +1,129 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import { TextArea, Label, Body, Button, Popover } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
+
+  export let value
+  export let bindings = []
+  export let anchor
+  export let align
+  export let popover
+
+  $: categories = Object.entries(groupBy("category", bindings))
+
+  function onClickBinding(binding) {
+    value += `{{ ${binding.path} }}`
+  }
+</script>
+
+<Popover {anchor} {align} bind:this={popover}>
+  <div class="container">
+    <div class="bindings">
+      <Label large>Available bindings</Label>
+      <div class="bindings__wrapper">
+        <div class="bindings__list">
+          {#each categories as [categoryName, bindings]}
+            <Label small>{categoryName}</Label>
+            {#each bindings as binding}
+              <div class="binding" on:click={() => onClickBinding(binding)}>
+                <span class="binding__label">{binding.label}</span>
+                <span class="binding__type">{binding.type}</span>
+                <br />
+                <div class="binding__description">{binding.description}</div>
+              </div>
+            {/each}
+          {/each}
+        </div>
+      </div>
+    </div>
+    <div class="editor">
+      <Label large>Data binding</Label>
+      <Body small>
+        Binding connects one piece of data to another and makes it dynamic.
+        Click the objects on the left to add them to the textbox.
+      </Body>
+      <TextArea thin bind:value placeholder="..." />
+      <div class="controls">
+        <a href="#">
+          <Body small color="light">Learn more about binding</Body>
+        </a>
+        <Button on:click={popover.hide} primary>Done</Button>
+      </div>
+    </div>
+  </div>
+</Popover>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    width: 800px;
+  }
+
+  .bindings {
+    border-right: 1px solid var(--grey-4);
+    flex: 0 0 240px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding-right: var(--spacing-l);
+  }
+  .bindings :global(label) {
+    margin: var(--spacing-m) 0;
+  }
+  .bindings :global(label:first-child) {
+    margin-top: 0;
+  }
+  .bindings__wrapper {
+    overflow-y: auto;
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .bindings__list {
+    position: absolute;
+    width: 100%;
+  }
+
+  .binding {
+    font-size: 12px;
+    padding: var(--spacing-s);
+    border-radius: var(--border-radius-m);
+  }
+  .binding:hover {
+    background-color: var(--grey-2);
+    cursor: pointer;
+  }
+  .binding__label {
+    font-weight: 500;
+    text-transform: capitalize;
+  }
+  .binding__description {
+    color: var(--grey-8);
+    margin-top: 2px;
+  }
+  .binding__type {
+    font-family: monospace;
+    background-color: var(--grey-2);
+    border-radius: var(--border-radius-m);
+    padding: 2px;
+    margin-left: 2px;
+    font-weight: 500;
+  }
+
+  .editor {
+    padding-left: var(--spacing-l);
+  }
+  .editor :global(textarea) {
+    min-height: 60px;
+  }
+
+  .controls {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+    margin-top: var(--spacing-m);
+  }
+</style>
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@ -2,9 +2,37 @@
  import ModelSelector from "./ParamInputs/ModelSelector.svelte"
  import RecordSelector from "./ParamInputs/RecordSelector.svelte"
  import { Input, TextArea, Select, Label } from "@budibase/bbui"
+  import { workflowStore } from "builderStore"
+  import BindableInput from "../../userInterface/BindableInput.svelte"

  export let block
  $: inputs = Object.entries(block.schema?.inputs?.properties || {})
+  $: availableBindings = getAvailableBindings(
+    block,
+    $workflowStore.selectedWorkflow?.workflow?.definition
+  )
+
+  function getAvailableBindings(block, workflow) {
+    if (!block || !workflow) {
+      return []
+    }
+    const allSteps = [workflow.trigger, ...workflow.steps]
+    const blockIdx = allSteps.findIndex(step => step.id === block.id)
+    let bindings = []
+    for (let idx = 0; idx < blockIdx; idx++) {
+      const outputs = Object.entries(allSteps[idx].schema?.outputs?.properties)
+      bindings = bindings.concat(
+        outputs.map(([name, value]) => ({
+          label: name,
+          type: value.type,
+          description: value.description,
+          category: idx === 0 ? "Trigger outputs" : `Step ${idx} outputs`,
+          path: idx === 0 ? `trigger.${name}` : `blocks.${idx}.${name}`,
+        }))
+      )
+    }
+    return bindings
+  }
 </script>

 <div class="container">
@ -12,7 +40,7 @@
  {#each inputs as [key, value]}
    <div class="bb-margin-xl block-field">
      <div class="field-label">{value.title}</div>
-      {#if value.type === 'string' && value.enum?.length}
+      {#if value.type === 'string' && value.enum}
        <Select bind:value={block.inputs[key]} thin secondary>
          <option value="">Choose an option</option>
          {#each value.enum as option}
@ -30,7 +58,11 @@
      {:else if value.customType === 'record'}
        <RecordSelector bind:value={block.inputs[key]} />
      {:else if value.type === 'string'}
-        <Input type="text" thin bind:value={block.inputs[key]} />
+        <BindableInput
+          type="text"
+          thin
+          bind:value={block.inputs[key]}
+          bindings={availableBindings} />
      {/if}
    </div>
  {/each}