From dfbf7e2ee4c7b4a29bf599595757d76955806249 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Tue, 14 Sep 2021 14:39:45 +0100
Subject: [PATCH] Show test outputs and responses in modal

---
 packages/bbui/src/Modal/ModalContent.svelte   |  7 +++
 .../builderStore/store/automation/index.js    |  7 ++-
 .../FlowChart/FlowChart.svelte                | 13 +++-
 .../FlowChart/FlowItem.svelte                 | 23 +++++--
 .../FlowChart/ResultsModal.svelte             | 60 +++++++++++++------
 .../FlowChart/TestDataModal.svelte            |  8 +--
 .../SetupPanel/AutomationBlockSetup.svelte    |  1 -
 7 files changed, 86 insertions(+), 33 deletions(-)

diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte
index bba72e6093..678a813a61 100644
--- 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>
diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 36198821de..156dbfba11 100644
--- 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 => {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index b87f1009b7..e41ef5a634 100644
--- 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;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index d12a3c3299..bfba0764fb 100644
--- 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%">
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
index cbfd5ad432..6d567098d4 100644
--- 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>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index 7227438516..11cc7d49a9 100644
--- 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"
 >
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 853a0ef2c7..5082a8f74c 100644
--- 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,