Add test data sidebar and componentize part of the flow item for this purpose

2022-05-09 16:50:43 +01:00 · 2022-05-09 16:50:43 +01:00 · f58118b52d
parent eeda40f829
commit f58118b52d
5 changed files with 282 additions and 71 deletions
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@ -1,30 +1,27 @@
 <script>
+  import FlowItemTitle from "./FlowItemTitle.svelte"
+
  import { automationStore } from "builderStore"
  import {
    Icon,
    Divider,
    Layout,
-    Body,
    Detail,
    Modal,
    Button,
-    StatusLight,
    Select,
    ActionButton,
    notifications,
  } from "@budibase/bbui"
  import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  import ResultsModal from "./ResultsModal.svelte"
  import ActionModal from "./ActionModal.svelte"
-  import { externalActions } from "./ExternalActions"

  export let block
  export let testDataModal
  let selected
  let webhookModal
  let actionModal
-  let resultsModal
  let blockComplete
  let showLooping = false

@ -32,9 +29,6 @@
  $: showBindingPicker =
    block.stepId === "CREATE_ROW" || block.stepId === "UPDATE_ROW"

-  $: testResult = $automationStore.selectedAutomation.testResults?.steps.filter(
-    step => (block.id ? step.id === block.id : step.stepId === block.stepId)
-  )
  $: isTrigger = block.type === "TRIGGER"

  $: selected = $automationStore.selectedBlock?.id === block.id
@ -182,63 +176,7 @@
    {/if}
  {/if}

-  <div class="blockSection">
-    <div
-      on:click={() => {
-        blockComplete = !blockComplete
-      }}
-      class="splitHeader"
-    >
-      <div class="center-items">
-        {#if externalActions[block.stepId]}
-          <img
-            alt={externalActions[block.stepId].name}
-            width="28px"
-            height="28px"
-            src={externalActions[block.stepId].icon}
-          />
-        {:else}
-          <svg
-            width="28px"
-            height="28px"
-            class="spectrum-Icon"
-            style="color:grey;"
-            focusable="false"
-          >
-            <use xlink:href="#spectrum-icon-18-{block.icon}" />
-          </svg>
-        {/if}
-        <div class="iconAlign">
-          {#if isTrigger}
-            <Body size="XS">When this happens:</Body>
-          {:else}
-            <Body size="XS">Do this:</Body>
-          {/if}
-
-          <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
-        </div>
-      </div>
-      <div class="blockTitle">
-        {#if testResult && testResult[0]}
-          <div style="float: right;" on:click={() => resultsModal.show()}>
-            <StatusLight
-              positive={isTrigger || testResult[0].outputs?.success}
-              negative={!testResult[0].outputs?.success}
-              ><Body size="XS">View response</Body></StatusLight
-            >
-          </div>
-        {/if}
-        <div
-          style="margin-left: 10px;"
-          on:click={() => {
-            onSelect(block)
-          }}
-        >
-          <Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} />
-        </div>
-      </div>
-    </div>
-  </div>
+  <FlowItemTitle bind:blockComplete {block} {testDataModal} />
  {#if !blockComplete}
    <Divider noMargin />
    <div class="blockSection">
@ -283,10 +221,6 @@
    </div>
  {/if}

-  <Modal bind:this={resultsModal} width="30%">
-    <ResultsModal {isTrigger} {testResult} />
-  </Modal>
-
  <Modal bind:this={actionModal} width="30%">
    <ActionModal {blockIdx} bind:blockComplete />
  </Modal>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemTitle.svelte
@ -0,0 +1,117 @@
+<script>
+  import { automationStore } from "builderStore"
+  import { Icon, Body, Detail, StatusLight, Modal } 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 =>
+      block.id ? step.id === block.id : step.stepId === block.stepId
+    )
+  $: isTrigger = block.type === "TRIGGER"
+
+  async function onSelect(block) {
+    await automationStore.update(state => {
+      state.selectedBlock = block
+      return state
+    })
+  }
+</script>
+
+<div class="blockSection">
+  <div
+    on:click={() => {
+      blockComplete = !blockComplete
+      showParameters = { complete: !showParameters?.complete, id: block.id }
+    }}
+    class="splitHeader"
+  >
+    <div class="center-items">
+      {#if externalActions[block.stepId]}
+        <img
+          alt={externalActions[block.stepId].name}
+          width="28px"
+          height="28px"
+          src={externalActions[block.stepId].icon}
+        />
+      {:else}
+        <svg
+          width="28px"
+          height="28px"
+          class="spectrum-Icon"
+          style="color:grey;"
+          focusable="false"
+        >
+          <use xlink:href="#spectrum-icon-18-{block.icon}" />
+        </svg>
+      {/if}
+      <div class="iconAlign">
+        {#if isTrigger}
+          <Body size="XS">When this happens:</Body>
+        {:else}
+          <Body size="XS">Do this:</Body>
+        {/if}
+
+        <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
+      </div>
+    </div>
+    <div class="blockTitle">
+      {#if showTestStatus && testResult && testResult[0]}
+        <div style="float: right;" on:click={() => resultsModal.show()}>
+          <StatusLight
+            positive={isTrigger || testResult[0].outputs?.success}
+            negative={!testResult[0].outputs?.success}
+            ><Body size="XS"
+              >{testResult[0].outputs?.success || isTrigger
+                ? "Success"
+                : "Error"}</Body
+            ></StatusLight
+          >
+        </div>
+      {/if}
+      <div
+        style="margin-left: 10px;"
+        on:click={() => {
+          onSelect(block)
+        }}
+      >
+        <Icon name={blockComplete ? "ChevronDown" : "ChevronUp"} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<Modal bind:this={resultsModal} width="30%">
+  <ResultsModal {isTrigger} {testResult} />
+</Modal>
+
+<style>
+  .center-items {
+    display: flex;
+    align-items: center;
+  }
+  .splitHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .iconAlign {
+    padding: 0 0 0 var(--spacing-m);
+    display: inline-block;
+  }
+
+  .blockSection {
+    padding: var(--spacing-xl);
+  }
+
+  .blockTitle {
+    display: flex;
+    align-items: center;
+  }
+</style>
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@ -51,6 +51,7 @@
        $automationStore.selectedAutomation?.automation,
        testData
      )
+      $automationStore.selectedAutomation.automation.showTestPanel = true
    } catch (error) {
      notifications.error("Error testing notification")
    }
--- a/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestPanel.svelte
@ -0,0 +1,137 @@
+<script>
+  import { Icon, Divider, Tabs, Tab, TextArea } from "@budibase/bbui"
+  import FlowItemTitle from "./FlowChart/FlowItemTitle.svelte"
+  import { automationStore } from "builderStore"
+
+  export let automation
+
+  let showParameters
+  let blocks
+
+  $: {
+    blocks = []
+    if (automation) {
+      if (automation.definition.trigger) {
+        blocks.push(automation.definition.trigger)
+      }
+      blocks = blocks
+        .concat(automation.definition.steps || [])
+        .filter(x => x.stepId !== "LOOP")
+    }
+  }
+
+  $: testResults =
+    $automationStore.selectedAutomation?.testResults?.steps.filter(
+      x => x.stepId !== "LOOP" || []
+    )
+</script>
+
+<div class="title">
+  <div class="title-text">
+    <Icon name="MultipleCheck" />
+    <div style="padding-left: var(--spacing-l)">Test Details</div>
+  </div>
+  <div style="padding-right: var(--spacing-xl)">
+    <Icon
+      on:click={async () => {
+        $automationStore.selectedAutomation.automation.showTestPanel = false
+        await automationStore.actions.save(
+          $automationStore.selectedAutomation?.automation
+        )
+      }}
+      hoverable
+      name="Close"
+    />
+  </div>
+</div>
+
+<Divider />
+
+<div class="container">
+  {#each blocks as block, idx}
+    <div class="block">
+      {#if block.stepId !== "LOOP"}
+        <FlowItemTitle showTestStatus={true} bind:showParameters {block} />
+        {#if showParameters?.complete && block?.id === showParameters?.id}
+          <Divider noMargin />
+
+          <div class="tabs">
+            <Tabs quiet noPadding selected="Input">
+              <Tab title="Input">
+                <div style="padding: 10px 10px 10px 10px;">
+                  <TextArea
+                    disabled
+                    value={JSON.stringify(testResults?.[idx]?.inputs, null, 2)}
+                  />
+                </div></Tab
+              >
+              <Tab title="Output">
+                <div style="padding: 10px 10px 10px 10px;">
+                  <TextArea
+                    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;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding-left: var(--spacing-xl);
+    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;
+    align-items: center;
+  }
+
+  .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/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@ -4,7 +4,11 @@
  import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
  import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
  import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
-  $: automation = $automationStore.automations[0]
+  import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
+  $: automation =
+    $automationStore.selectedAutomation?.automation ||
+    $automationStore.automations[0]
+
  let modal
  let webhookModal
 </script>
@ -39,6 +43,10 @@
      </div>
    {/if}
  </div>
+
+  {#if automation.showTestPanel}
+    <div class="setup"><TestPanel {automation} /></div>
+  {/if}
  <Modal bind:this={modal}>
    <CreateAutomationModal {webhookModal} />
  </Modal>
@ -52,7 +60,8 @@
    flex: 1 1 auto;
    height: 0;
    display: grid;
-    grid-template-columns: 260px minmax(510px, 1fr);
+    grid-auto-flow: column dense;
+    grid-template-columns: 260px minmax(510px, 1fr) fit-content(500px);
  }

  .nav {
@ -92,4 +101,17 @@
  .main {
    width: 300px;
  }
+
+  .setup {
+    padding-top: var(--spectrum-global-dimension-size-200);
+    border-left: var(--border-light);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-l);
+    background-color: var(--background);
+    grid-column: 3;
+    overflow: auto;
+  }
 </style>