update Automation button placement and test details button

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
     })

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte

@@ -40,12 +40,12 @@
 </script>
 
 <div class="canvas">
-  <div class="content">
+  <div style="float: left; padding-left: var(--spacing-xl);">
-    <div class="title">
-      <div class="subtitle">
     <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="iconPadding">
         <div class="icon">
           <Icon
             on:click={confirmDeleteDialog.show}
@@ -54,7 +54,6 @@
             name="DeleteOutline"
           />
         </div>
-          </div>
         <ActionButton
           on:click={() => {
             testDataModal.show()
@@ -62,44 +61,49 @@
           icon="MultipleCheck"
           size="M">Run test</ActionButton
         >
+        <div style="padding-left: var(--spacing-m);">
+          <ActionButton
+            disabled={!$automationStore.selectedAutomation?.testResults}
+            on:click={() => {
+              $automationStore.selectedAutomation.automation.showTestPanel = true
+            }}
+            size="M">Test Details</ActionButton
+          >
         </div>
       </div>
     </div>
+  </div>
+</div>
+<div class="content">
   {#each blocks as block, idx (block.id)}
     <div
       class="block"
       animate:flip={{ duration: 500 }}
-        in:fly|local={{ x: 500, duration: 1500 }}
+      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>
+</div>
-  <ConfirmDialog
+<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>
+</ConfirmDialog>
 
-  <Modal bind:this={testDataModal} width="30%">
+<Modal bind:this={testDataModal} width="30%">
   <TestDataModal />
-  </Modal>
+</Modal>
-</div>
 
 <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);

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">

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;

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte

@@ -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>

packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { Icon, Divider, Tabs, Tab, TextArea } from "@budibase/bbui"
+  import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
-  import FlowItemTitle from "./FlowChart/FlowItemTitle.svelte"
+  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)}
                   />

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
+    <div class="setup">
-      in:fly|local={{ x: 500, duration: 500 }}
-      out:fly|local={{ x: 500, duration: 500 }}
-      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;