Using the test panel in the automation history tab, same experience as that of the automation flow.

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

@@ -7,12 +7,18 @@
   export let blockComplete
   export let showTestStatus = false
   export let showParameters = {}
+  export let testResult
+  export let isTrigger
 
-  $: testResult =
+  $: {
-    $automationStore.selectedAutomation?.testResults?.steps.filter(step =>
+    if (!testResult) {
-      block.id ? step.id === block.id : step.stepId === block.stepId
+      testResult =
-    )
+        $automationStore.selectedAutomation?.testResults?.steps.filter(step =>
-  $: isTrigger = block.type === "TRIGGER"
+          block.id ? step.id === block.id : step.stepId === block.stepId
+        )[0]
+    }
+  }
+  $: isTrigger = isTrigger || block.type === "TRIGGER"
 
   async function onSelect(block) {
     await automationStore.update(state => {
@@ -60,13 +66,13 @@
       </div>
     </div>
     <div class="blockTitle">
-      {#if showTestStatus && testResult && testResult[0]}
+      {#if showTestStatus && testResult}
         <div style="float: right;">
           <StatusLight
-            positive={isTrigger || testResult[0].outputs?.success}
+            positive={isTrigger || testResult.outputs?.success}
-            negative={!testResult[0].outputs?.success}
+            negative={!testResult.outputs?.success}
             ><Body size="XS"
-              >{testResult[0].outputs?.success || isTrigger
+              >{testResult.outputs?.success || isTrigger
                 ? "Success"
                 : "Error"}</Body
             ></StatusLight

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

@@ -0,0 +1,133 @@
+<script>
+  import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
+  import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
+
+  export let automation
+  export let testResults
+  export let width = "400px"
+
+  let showParameters
+  let blocks
+
+  function prepTestResults(results) {
+    return results.steps.filter(x => x.stepId !== "LOOP" || [])
+  }
+
+  $: filteredResults = prepTestResults(testResults)
+
+  $: {
+    blocks = []
+    if (automation) {
+      if (automation.definition.trigger) {
+        blocks.push(automation.definition.trigger)
+      }
+      blocks = blocks
+        .concat(automation.definition.steps || [])
+        .filter(x => x.stepId !== "LOOP")
+    } else if (filteredResults) {
+      blocks = filteredResults || []
+      // make sure there is an ID for each block being displayed
+      let count = 0
+      for (let block of blocks) {
+        block.id = count++
+      }
+    }
+  }
+</script>
+
+<div class="container">
+  {#each blocks as block, idx}
+    <div class="block" style={width ? `width: ${width}` : ""}>
+      {#if block.stepId !== "LOOP"}
+        <FlowItemHeader
+          showTestStatus={true}
+          bind:showParameters
+          {block}
+          isTrigger={idx === 0}
+          testResult={filteredResults?.[idx]}
+        />
+        {#if showParameters && showParameters[block.id]}
+          <Divider noMargin />
+          {#if filteredResults?.[idx]?.outputs.iterations}
+            <div style="display: flex; padding: 10px 10px 0px 12px;">
+              <Icon name="Reuse" />
+              <div style="margin-left: 10px;">
+                <Label>
+                  This loop ran {filteredResults?.[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(
+                      filteredResults?.[idx]?.inputs,
+                      null,
+                      2
+                    )}
+                  />
+                </div></Tab
+              >
+              <Tab title="Output">
+                <div style="padding: 10px 10px 10px 10px;">
+                  <TextArea
+                    minHeight="100px"
+                    disabled
+                    value={JSON.stringify(
+                      filteredResults?.[idx]?.outputs,
+                      null,
+                      2
+                    )}
+                  />
+                </div>
+              </Tab>
+            </Tabs>
+          </div>
+        {/if}
+      {/if}
+    </div>
+    {#if blocks.length - 1 !== idx}
+      <div class="separator" />
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .container {
+    padding: 0 30px 0 30px;
+  }
+
+  .tabs {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    flex: 1 1 auto;
+  }
+
+  .block {
+    display: inline-block;
+    width: 400px;
+    font-size: 16px;
+    background-color: var(--background);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px 4px 4px 4px;
+  }
+
+  .separator {
+    width: 1px;
+    height: 40px;
+    border-left: 1px dashed var(--grey-4);
+    color: var(--grey-4);
+    /* center horizontally */
+    text-align: center;
+    margin-left: 50%;
+  }
+</style>

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

@@ -1,11 +1,11 @@
 <script>
-  import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
+  import { Icon, Divider } from "@budibase/bbui"
-  import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
+  import TestDisplay from "./TestDisplay.svelte"
   import { automationStore } from "builderStore"
 
   export let automation
+  export let testResults
 
-  let showParameters
   let blocks
 
   $: {
@@ -17,13 +17,15 @@
       blocks = blocks
         .concat(automation.definition.steps || [])
         .filter(x => x.stepId !== "LOOP")
+    } else if (testResults) {
+      blocks = testResults.steps || []
+    }
+  }
+  $: {
+    if (!testResults) {
+      testResults = $automationStore.selectedAutomation?.testResults
     }
   }
-
-  $: testResults =
-    $automationStore.selectedAutomation?.testResults?.steps.filter(
-      x => x.stepId !== "LOOP" || []
-    )
 </script>
 
 <div class="title">
@@ -44,59 +46,9 @@
 
 <Divider />
 
-<div class="container">
+<TestDisplay {automation} {testResults} />
-  {#each blocks as block, idx}
-    <div class="block">
-      {#if block.stepId !== "LOOP"}
-        <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)}
-                  />
-                </div></Tab
-              >
-              <Tab title="Output">
-                <div style="padding: 10px 10px 10px 10px;">
-                  <TextArea
-                    minHeight="100px"
-                    disabled
-                    value={JSON.stringify(testResults?.[idx]?.outputs, null, 2)}
-                  />
-                </div>
-              </Tab>
-            </Tabs>
-          </div>
-        {/if}
-      {/if}
-    </div>
-    {#if blocks.length - 1 !== idx}
-      <div class="separator" />
-    {/if}
-  {/each}
-</div>
 
 <style>
-  .container {
-    padding: 0px 30px 0px 30px;
-  }
   .title {
     display: flex;
     flex-direction: row;
@@ -106,15 +58,6 @@
     justify-content: space-between;
   }
 
-  .tabs {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-    position: relative;
-    flex: 1 1 auto;
-  }
-
   .title-text {
     display: flex;
     flex-direction: row;
@@ -124,23 +67,4 @@
   .title :global(h1) {
     flex: 1 1 auto;
   }
-
-  .block {
-    display: inline-block;
-    width: 400px;
-    font-size: 16px;
-    background-color: var(--background);
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px 4px 4px 4px;
-  }
-
-  .separator {
-    width: 1px;
-    height: 40px;
-    border-left: 1px dashed var(--grey-4);
-    color: var(--grey-4);
-    /* center horizontally */
-    text-align: center;
-    margin-left: 50%;
-  }
 </style>

packages/builder/src/components/portal/overview/HistoryDetailsPanel.svelte

@@ -2,7 +2,7 @@
   import { Layout, Icon, ActionButton } from "@budibase/bbui"
   import StatusRenderer from "components/portal/overview/StatusRenderer.svelte"
   import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import FlowItemHeader from "components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte"
+  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
 
   export let history
   export let close
@@ -32,9 +32,7 @@
       </div>
     </Layout>
     <div class="bottom">
-      {#each history.steps as step}
+      <TestDisplay testResults={history} width="100%" />
-        <FlowItemHeader block={step} />
-      {/each}
     </div>
   </div>
 {:else}
@@ -57,6 +55,7 @@
   .bottom {
     margin-top: var(--spacing-m);
     border-top: var(--border-light);
+    padding-top: var(--spacing-xl);
     height: 100%;
   }
 

packages/builder/src/components/portal/overview/HistoryTab.svelte

@@ -62,12 +62,28 @@
         steps: [
           {
             stepId: "ROW_SAVED",
-            outputs: {},
+            inputs: null,
+            outputs: {
+              id: "awd",
+              revision: "awd",
+              row: {
+                tableId: "ta_240cfde36405479fa814b8a2c46655b5",
+                name: "",
+                suppliers: [],
+                "supplier name": "",
+                _id: "awd",
+                _rev: "awd",
+              },
+            },
           },
           {
-            stepId: "SEND_EMAIL_SMTP",
+            stepId: "SERVER_LOG",
-            inputs: {},
+            inputs: {
-            outputs: {},
+              text: "awdawdawd",
+            },
+            outputs: {
+              success: true,
+            },
           },
         ],
       },
@@ -78,6 +94,7 @@
         steps: [
           {
             stepId: "ROW_SAVED",
+            inputs: {},
             outputs: {},
           },
           {