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

2022-05-31 13:30:18 +01:00 · 2022-05-31 13:30:18 +01:00 · b5b1ae38e2
parent 2eb49d8396
commit b5b1ae38e2
5 changed files with 183 additions and 104 deletions
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemHeader.svelte
+++ b/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 =>
-      block.id ? step.id === block.id : step.stepId === block.stepId
-    )
-  $: isTrigger = block.type === "TRIGGER"
+  $: {
+    if (!testResult) {
+      testResult =
+        $automationStore.selectedAutomation?.testResults?.steps.filter(step =>
+          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}
-            negative={!testResult[0].outputs?.success}
+            positive={isTrigger || testResult.outputs?.success}
+            negative={!testResult.outputs?.success}
            ><Body size="XS"
-              >{testResult[0].outputs?.success || isTrigger
+              >{testResult.outputs?.success || isTrigger
                ? "Success"
                : "Error"}</Body
            ></StatusLight
--- a/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
+++ b/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>
--- a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
@ -1,11 +1,11 @@
 <script>
-  import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
-  import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
+  import { Icon, Divider } from "@budibase/bbui"
+  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">
-  {#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>
+<TestDisplay {automation} {testResults} />

 <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>
--- a/packages/builder/src/components/portal/overview/HistoryDetailsPanel.svelte
+++ b/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}
-        <FlowItemHeader block={step} />
-      {/each}
+      <TestDisplay testResults={history} width="100%" />
    </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%;
  }

--- a/packages/builder/src/components/portal/overview/HistoryTab.svelte
+++ b/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",
-            inputs: {},
-            outputs: {},
+            stepId: "SERVER_LOG",
+            inputs: {
+              text: "awdawdawd",
+            },
+            outputs: {
+              success: true,
+            },
          },
        ],
      },
@ -78,6 +94,7 @@
        steps: [
          {
            stepId: "ROW_SAVED",
+            inputs: {},
            outputs: {},
          },
          {