Show test outputs and responses in modal

5 years ago · dfbf7e2ee4
7 changed files with 86 additions and 33 deletions
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -46,8 +46,10 @@
      <h1
        class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
        class:noDivider={!showDivider}
+        class:header-spacing={$$slots.header}
      >
        {title}
+        <slot name="header" />
      </h1>
      {#if showDivider}
        <Divider size="M" />
@ -120,4 +122,9 @@
  .close-icon :global(svg) {
    margin-right: 0;
  }
+
+  .header-spacing {
+    display: flex;
+    justify-content: space-between;
+  }
 </style>
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@ -82,7 +82,12 @@ const automationActions = store => ({
  },
  test: async ({ automation }, testData) => {
    const { _id } = automation
-    return await api.post(`/api/automations/${_id}/test`, testData)
+    const response = await api.post(`/api/automations/${_id}/test`, testData)
+    const json = await response.json()
+    store.update(state => {
+      state.testResults = json
+      return state
+    })
  },
  select: automation => {
    store.update(state => {
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@ -4,7 +4,6 @@
  import FlowItem from "./FlowItem.svelte"
  import TestDataModal from "./TestDataModal.svelte"

-  import Arrow from "./Arrow.svelte"
  import { flip } from "svelte/animate"
  import { fade, fly } from "svelte/transition"
  import {
@ -86,7 +85,9 @@
      >
        <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
        {#if idx !== blocks.length - 1}
-          <Arrow />
+          <div class="separator" />
+          <Icon name="AddCircle" size="S" />
+          <div class="separator" />
        {/if}
      </div>
    {/each}
@ -97,6 +98,14 @@
 </section>

 <style>
+  .separator {
+    width: 1px;
+    height: 25px;
+    border-left: 1px dashed var(--grey-4);
+    color: var(--grey-4);
+    /* center horizontally */
+    align-self: center;
+  }
  .canvas {
    margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
    overflow-y: auto;
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -26,6 +26,13 @@
  let resultsModal
  let setupToggled
  let blockComplete
+
+  $: testResult = $automationStore?.testResults
+    ? $automationStore.testResults.steps.filter(
+        step => step.stepId === block.stepId
+      )
+    : null
+  $: console.log(testResult)
  $: instanceId = $database._id

  $: isTrigger = block.type === "TRIGGER"
@ -95,11 +102,15 @@
          <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
        </div>
      </div>
-      <span on:click={() => resultsModal.show()}>
-        <StatusLight positive={true} negative={false}
-          ><Body size="XS">View response</Body></StatusLight
-        >
-      </span>
+      {#if !!testResult}
+        <span on:click={() => resultsModal.show()}>
+          <StatusLight
+            positive={testResult[0].outputs.success}
+            negative={!testResult[0].outputs.success}
+            ><Body size="XS">View response</Body></StatusLight
+          >
+        </span>
+      {/if}
    </div>
  </div>
  {#if !blockComplete}
@ -153,7 +164,7 @@
  {/if}

  <Modal bind:this={resultsModal} width="30%">
-    <ResultsModal />
+    <ResultsModal {testResult} />
  </Modal>

  <Modal bind:this={actionModal} width="30%">
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
@ -1,8 +1,10 @@
 <script>
-  import { ModalContent, Icon, Detail } from "@budibase/bbui"
+  import { ModalContent, Icon, Detail, Badge, TextArea } from "@budibase/bbui"

+  export let testResult
  let inputToggled
  let outputToggled
+  $: console.log(testResult)
 </script>

 <ModalContent
@ -11,37 +13,61 @@
  title="Test Automation"
  cancelText="Close"
 >
-  <div class="splitHeader">
-    <div
-      on:click={() => {
-        inputToggled = !inputToggled
-      }}
-      class="toggle"
-    >
+  <div slot="header">
+    <div style="float: right;">
+      <Badge red><Icon size="S" name="CheckmarkCircle" /></Badge>
+    </div>
+  </div>
+
+  <div
+    on:click={() => {
+      inputToggled = !inputToggled
+    }}
+    class="toggle splitHeader"
+  >
+    <div>
+      <div style="display: flex; align-items: center;">
+        <span style="padding-left: var(--spacing-s);">
+          <Detail size="S">Input</Detail>
+        </span>
+      </div>
+    </div>
+    <div>
      {#if inputToggled}
        <Icon size="M" name="ChevronDown" />
      {:else}
        <Icon size="M" name="ChevronRight" />
      {/if}
-      <Detail size="S">Input</Detail>
    </div>
  </div>
+  {#if inputToggled}
+    <TextArea disabled value={JSON.stringify(testResult[0].inputs, null, 2)} />
+  {/if}

-  <div class="splitHeader">
-    <div
-      on:click={() => {
-        outputToggled = !outputToggled
-      }}
-      class="toggle"
-    >
+  <div
+    on:click={() => {
+      outputToggled = !outputToggled
+    }}
+    class="toggle splitHeader"
+  >
+    <div>
+      <div style="display: flex; align-items: center;">
+        <span style="padding-left: var(--spacing-s);">
+          <Detail size="S">Output</Detail>
+        </span>
+      </div>
+    </div>
+    <div>
      {#if outputToggled}
        <Icon size="M" name="ChevronDown" />
      {:else}
        <Icon size="M" name="ChevronRight" />
      {/if}
-      <Detail size="S">Output</Detail>
    </div>
  </div>
+  {#if outputToggled}
+    <TextArea disabled value={JSON.stringify(testResult[0].outputs, null, 2)} />
+  {/if}
 </ModalContent>

 <style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@ -5,7 +5,6 @@
  import { cloneDeep } from "lodash/fp"

  let failedParse = null
-
  // clone the trigger so we're not mutating the reference
  let trigger = cloneDeep(
    $automationStore.selectedAutomation.automation.definition.trigger
@ -43,15 +42,12 @@

 <ModalContent
  title="Add test data"
-  confirmText="Save"
+  confirmText="Test"
  showConfirmButton={true}
  disabled={isError}
  onConfirm={() => {
    automationStore.actions.addTestDataToAutomation(testData)
-    automationStore.actions.trigger(
-      $automationStore.selectedAutomation,
-      testData
-    )
+    automationStore.actions.test($automationStore.selectedAutomation, testData)
  }}
  cancelText="Cancel"
 >
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -20,7 +20,6 @@
  export let webhookModal
  export let testData
  export let schemaProperties
-
  $: stepId = block.stepId
  $: bindings = getAvailableBindings(
    block || $automationStore.selectedBlock,