From 0a8cb11514545a95478be3242b04178e707793c4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 23 May 2022 14:11:37 +0100
Subject: [PATCH] update Automation button placement and test details button

---
 .../builderStore/store/automation/index.js    |   2 -
 .../FlowChart/FlowChart.svelte                | 106 +++++++-------
 .../FlowChart/FlowItem.svelte                 |   4 +-
 ...ItemTitle.svelte => FlowItemHeader.svelte} |  10 +-
 .../FlowChart/ResultsModal.svelte             | 133 ------------------
 .../AutomationBuilder/TestPanel.svelte        |  21 ++-
 .../app/[application]/automate/_layout.svelte |  11 +-
 7 files changed, 75 insertions(+), 212 deletions(-)
 rename packages/builder/src/components/automation/AutomationBuilder/FlowChart/{FlowItemTitle.svelte => FlowItemHeader.svelte} (89%)
 delete mode 100644 packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte

diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js
index 84e6033439..5252d4b06a 100644
--- a/packages/builder/src/builderStore/store/automation/index.js
+++ b/packages/builder/src/builderStore/store/automation/index.js
@@ -105,9 +105,7 @@ const automationActions = store => ({
   },
   select: automation => {
     store.update(state => {
-      let testResults = state.selectedAutomation?.testResults
       state.selectedAutomation = new Automation(cloneDeep(automation))
-      state.selectedAutomation.testResults = testResults
       state.selectedBlock = null
       return state
     })
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 492778bed9..3e58b25ff6 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -40,66 +40,70 @@
 </script>
 
 <div class="canvas">
-  <div class="content">
-    <div class="title">
-      <div class="subtitle">
-        <Heading size="S">{automation.name}</Heading>
-        <div style="display:flex; align-items: center;">
-          <div class="iconPadding">
-            <div class="icon">
-              <Icon
-                on:click={confirmDeleteDialog.show}
-                hoverable
-                size="M"
-                name="DeleteOutline"
-              />
-            </div>
-          </div>
+  <div style="float: left; padding-left: var(--spacing-xl);">
+    <Heading size="S">{automation.name}</Heading>
+  </div>
+  <div style="float: right; padding-right: var(--spacing-xl);" class="title">
+    <div class="subtitle">
+      <div style="display:flex; align-items: center;">
+        <div class="icon">
+          <Icon
+            on:click={confirmDeleteDialog.show}
+            hoverable
+            size="M"
+            name="DeleteOutline"
+          />
+        </div>
+        <ActionButton
+          on:click={() => {
+            testDataModal.show()
+          }}
+          icon="MultipleCheck"
+          size="M">Run test</ActionButton
+        >
+        <div style="padding-left: var(--spacing-m);">
           <ActionButton
+            disabled={!$automationStore.selectedAutomation?.testResults}
             on:click={() => {
-              testDataModal.show()
+              $automationStore.selectedAutomation.automation.showTestPanel = true
             }}
-            icon="MultipleCheck"
-            size="M">Run test</ActionButton
+            size="M">Test Details</ActionButton
           >
         </div>
       </div>
     </div>
-    {#each blocks as block, idx (block.id)}
-      <div
-        class="block"
-        animate:flip={{ duration: 500 }}
-        in:fly|local={{ x: 500, duration: 1500 }}
-      >
-        {#if block.stepId !== "LOOP"}
-          <FlowItem {testDataModal} {block} />
-        {/if}
-      </div>
-    {/each}
   </div>
-  <ConfirmDialog
-    bind:this={confirmDeleteDialog}
-    okText="Delete Automation"
-    onOk={deleteAutomation}
-    title="Confirm Deletion"
-  >
-    Are you sure you wish to delete the automation
-    <i>{automation.name}?</i>
-    This action cannot be undone.
-  </ConfirmDialog>
-
-  <Modal bind:this={testDataModal} width="30%">
-    <TestDataModal />
-  </Modal>
 </div>
+<div class="content">
+  {#each blocks as block, idx (block.id)}
+    <div
+      class="block"
+      animate:flip={{ duration: 500 }}
+      in:fly|local={{ x: 500, duration: 500 }}
+      out:fly|local={{ x: 500, duration: 500 }}
+    >
+      {#if block.stepId !== "LOOP"}
+        <FlowItem {testDataModal} {block} />
+      {/if}
+    </div>
+  {/each}
+</div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  okText="Delete Automation"
+  onOk={deleteAutomation}
+  title="Confirm Deletion"
+>
+  Are you sure you wish to delete the automation
+  <i>{automation.name}?</i>
+  This action cannot be undone.
+</ConfirmDialog>
+
+<Modal bind:this={testDataModal} width="30%">
+  <TestDataModal />
+</Modal>
 
 <style>
-  .canvas {
-    margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
-    overflow-y: auto;
-    text-align: center;
-    height: 100%;
-  }
   /* Fix for firefox not respecting bottom padding in scrolling containers */
   .canvas > *:last-child {
     padding-bottom: 40px;
@@ -127,10 +131,6 @@
     justify-content: space-between;
     align-items: center;
   }
-  .iconPadding {
-    padding-top: var(--spacing-s);
-  }
-
   .icon {
     cursor: pointer;
     padding-right: var(--spacing-m);
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 3506444ca8..aa530ba748 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -1,5 +1,5 @@
 <script>
-  import FlowItemTitle from "./FlowItemTitle.svelte"
+  import FlowItemHeader from "./FlowItemHeader.svelte"
 
   import { automationStore } from "builderStore"
   import {
@@ -176,7 +176,7 @@
     {/if}
   {/if}
 
-  <FlowItemTitle bind:blockComplete {block} {testDataModal} />
+  <FlowItemHeader bind:blockComplete {block} {testDataModal} />
   {#if !blockComplete}
     <Divider noMargin />
     <div class="blockSection">
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
similarity index 89%
rename from packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte
rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
index 652055d2d8..edb0c3d9d2 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
@@ -1,14 +1,12 @@
 <script>
   import { automationStore } from "builderStore"
-  import { Icon, Body, Detail, StatusLight, Modal } from "@budibase/bbui"
+  import { Icon, Body, Detail, StatusLight } from "@budibase/bbui"
   import { externalActions } from "./ExternalActions"
-  import ResultsModal from "./ResultsModal.svelte"
 
   export let block
   export let blockComplete
   export let showTestStatus = false
   export let showParameters = {}
-  let resultsModal
 
   $: testResult =
     $automationStore.selectedAutomation?.testResults?.steps.filter(step =>
@@ -63,7 +61,7 @@
     </div>
     <div class="blockTitle">
       {#if showTestStatus && testResult && testResult[0]}
-        <div style="float: right;" on:click={() => resultsModal.show()}>
+        <div style="float: right;">
           <StatusLight
             positive={isTrigger || testResult[0].outputs?.success}
             negative={!testResult[0].outputs?.success}
@@ -87,10 +85,6 @@
   </div>
 </div>
 
-<Modal bind:this={resultsModal} width="30%">
-  <ResultsModal {isTrigger} {testResult} />
-</Modal>
-
 <style>
   .center-items {
     display: flex;
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
deleted file mode 100644
index 9662bc8ade..0000000000
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
+++ /dev/null
@@ -1,133 +0,0 @@
-<script>
-  import { ModalContent, Icon, Detail, TextArea, Label } from "@budibase/bbui"
-
-  export let testResult
-  export let isTrigger
-  let inputToggled
-  let outputToggled
-</script>
-
-<ModalContent
-  showCloseIcon={false}
-  showConfirmButton={false}
-  cancelText="Close"
->
-  <div slot="header" class="result-modal-header">
-    <span>Test Results</span>
-    <div>
-      {#if isTrigger || testResult[0].outputs.success}
-        <div class="iconSuccess">
-          <Icon size="S" name="CheckmarkCircle" />
-        </div>
-      {:else}
-        <div class="iconFailure">
-          <Icon size="S" name="CloseCircle" />
-        </div>
-      {/if}
-    </div>
-  </div>
-  <span>
-    {#if testResult[0].outputs.iterations}
-      <div style="display: flex;">
-        <Icon name="Reuse" />
-        <div style="margin-left: 10px;">
-          <Label>
-            This loop ran {testResult[0].outputs.iterations} times.</Label
-          >
-        </div>
-      </div>
-    {/if}
-  </span>
-  <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}
-    </div>
-  </div>
-  {#if inputToggled}
-    <div class="text-area-container">
-      <TextArea
-        disabled
-        value={JSON.stringify(testResult[0].inputs, null, 2)}
-      />
-    </div>
-  {/if}
-
-  <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}
-    </div>
-  </div>
-  {#if outputToggled}
-    <div class="text-area-container">
-      <TextArea
-        disabled
-        value={JSON.stringify(testResult[0].outputs, null, 2)}
-      />
-    </div>
-  {/if}
-</ModalContent>
-
-<style>
-  .result-modal-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .iconSuccess {
-    color: var(--spectrum-global-color-green-600);
-  }
-
-  .iconFailure {
-    color: var(--spectrum-global-color-red-600);
-  }
-
-  .splitHeader {
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .toggle {
-    display: flex;
-    align-items: center;
-  }
-
-  .text-area-container :global(textarea) {
-    height: 150px;
-  }
-</style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
index cc588c87a5..8c38d8a689 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { Icon, Divider, Tabs, Tab, TextArea } from "@budibase/bbui"
-  import FlowItemTitle from "./FlowChart/FlowItemTitle.svelte"
+  import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
+  import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
   import { automationStore } from "builderStore"
 
   export let automation
@@ -35,9 +35,6 @@
     <Icon
       on:click={async () => {
         $automationStore.selectedAutomation.automation.showTestPanel = false
-        await automationStore.actions.save(
-          $automationStore.selectedAutomation?.automation
-        )
       }}
       hoverable
       name="Close"
@@ -51,15 +48,26 @@
   {#each blocks as block, idx}
     <div class="block">
       {#if block.stepId !== "LOOP"}
-        <FlowItemTitle showTestStatus={true} bind:showParameters {block} />
+        <FlowItemHeader showTestStatus={true} bind:showParameters {block} />
         {#if showParameters && showParameters[block.id]}
           <Divider noMargin />
+          {#if testResults?.[idx]?.outputs.iterations}
+            <div style="display: flex; padding: 10px 10px 0px 12px;">
+              <Icon name="Reuse" />
+              <div style="margin-left: 10px;">
+                <Label>
+                  This loop ran {testResults?.[idx]?.outputs.iterations} times.</Label
+                >
+              </div>
+            </div>
+          {/if}
 
           <div class="tabs">
             <Tabs quiet noPadding selected="Input">
               <Tab title="Input">
                 <div style="padding: 10px 10px 10px 10px;">
                   <TextArea
+                    minHeight="80px"
                     disabled
                     value={JSON.stringify(testResults?.[idx]?.inputs, null, 2)}
                   />
@@ -68,6 +76,7 @@
               <Tab title="Output">
                 <div style="padding: 10px 10px 10px 10px;">
                   <TextArea
+                    minHeight="100px"
                     disabled
                     value={JSON.stringify(testResults?.[idx]?.outputs, null, 2)}
                   />
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
index bd239fcb0f..a713067bbe 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@@ -5,7 +5,6 @@
   import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
-  import { fly } from "svelte/transition"
 
   $: automation =
     $automationStore.selectedAutomation?.automation ||
@@ -47,11 +46,7 @@
   </div>
 
   {#if automation?.showTestPanel}
-    <div
-      in:fly|local={{ x: 500, duration: 500 }}
-      out:fly|local={{ x: 500, duration: 500 }}
-      class="setup"
-    >
+    <div class="setup">
       <TestPanel {automation} />
     </div>
   {/if}
@@ -87,13 +82,13 @@
 
   .content {
     position: relative;
-    padding: var(--spacing-l) 40px;
+    padding-top: var(--spacing-l);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
-    overflow: hidden;
+    overflow: auto;
   }
   .centered {
     top: 0;