Show test outputs and responses in modal
This commit is contained in:
Peter Clement
parent
e65462858f
commit
b72999c027
7 changed files with 86 additions and 33 deletions
|
|
@ -46,8 +46,10 @@
|
|||
<h1
|
||||
class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
|
||||
class:noDivider={!showDivider}
|
||||
class:header-spacing={$$slots.header}
|
||||
>
|
||||
{title}
|
||||
<slot name="header" />
|
||||
</h1>
|
||||
{#if showDivider}
|
||||
<Divider size="M" />
|
||||
|
|
@ -120,4 +122,9 @@
|
|||
.close-icon :global(svg) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.header-spacing {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,12 @@ const automationActions = store => ({
|
|||
},
|
||||
test: async ({ automation }, testData) => {
|
||||
const { _id } = automation
|
||||
return await api.post(`/api/automations/${_id}/test`, testData)
|
||||
const response = await api.post(`/api/automations/${_id}/test`, testData)
|
||||
const json = await response.json()
|
||||
store.update(state => {
|
||||
state.testResults = json
|
||||
return state
|
||||
})
|
||||
},
|
||||
select: automation => {
|
||||
store.update(state => {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
import FlowItem from "./FlowItem.svelte"
|
||||
import TestDataModal from "./TestDataModal.svelte"
|
||||
|
||||
import Arrow from "./Arrow.svelte"
|
||||
import { flip } from "svelte/animate"
|
||||
import { fade, fly } from "svelte/transition"
|
||||
import {
|
||||
|
|
@ -86,7 +85,9 @@
|
|||
>
|
||||
<FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
|
||||
{#if idx !== blocks.length - 1}
|
||||
<Arrow />
|
||||
<div class="separator" />
|
||||
<Icon name="AddCircle" size="S" />
|
||||
<div class="separator" />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -97,6 +98,14 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
.separator {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
border-left: 1px dashed var(--grey-4);
|
||||
color: var(--grey-4);
|
||||
/* center horizontally */
|
||||
align-self: center;
|
||||
}
|
||||
.canvas {
|
||||
margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,13 @@
|
|||
let resultsModal
|
||||
let setupToggled
|
||||
let blockComplete
|
||||
|
||||
$: testResult = $automationStore?.testResults
|
||||
? $automationStore.testResults.steps.filter(
|
||||
step => step.stepId === block.stepId
|
||||
)
|
||||
: null
|
||||
$: console.log(testResult)
|
||||
$: instanceId = $database._id
|
||||
|
||||
$: isTrigger = block.type === "TRIGGER"
|
||||
|
|
@ -95,11 +102,15 @@
|
|||
<Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
|
||||
</div>
|
||||
</div>
|
||||
<span on:click={() => resultsModal.show()}>
|
||||
<StatusLight positive={true} negative={false}
|
||||
><Body size="XS">View response</Body></StatusLight
|
||||
>
|
||||
</span>
|
||||
{#if !!testResult}
|
||||
<span on:click={() => resultsModal.show()}>
|
||||
<StatusLight
|
||||
positive={testResult[0].outputs.success}
|
||||
negative={!testResult[0].outputs.success}
|
||||
><Body size="XS">View response</Body></StatusLight
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if !blockComplete}
|
||||
|
|
@ -153,7 +164,7 @@
|
|||
{/if}
|
||||
|
||||
<Modal bind:this={resultsModal} width="30%">
|
||||
<ResultsModal />
|
||||
<ResultsModal {testResult} />
|
||||
</Modal>
|
||||
|
||||
<Modal bind:this={actionModal} width="30%">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<script>
|
||||
import { ModalContent, Icon, Detail } from "@budibase/bbui"
|
||||
import { ModalContent, Icon, Detail, Badge, TextArea } from "@budibase/bbui"
|
||||
|
||||
export let testResult
|
||||
let inputToggled
|
||||
let outputToggled
|
||||
$: console.log(testResult)
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
|
|
@ -11,37 +13,61 @@
|
|||
title="Test Automation"
|
||||
cancelText="Close"
|
||||
>
|
||||
<div class="splitHeader">
|
||||
<div
|
||||
on:click={() => {
|
||||
inputToggled = !inputToggled
|
||||
}}
|
||||
class="toggle"
|
||||
>
|
||||
<div slot="header">
|
||||
<div style="float: right;">
|
||||
<Badge red><Icon size="S" name="CheckmarkCircle" /></Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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}
|
||||
<Detail size="S">Input</Detail>
|
||||
</div>
|
||||
</div>
|
||||
{#if inputToggled}
|
||||
<TextArea disabled value={JSON.stringify(testResult[0].inputs, null, 2)} />
|
||||
{/if}
|
||||
|
||||
<div class="splitHeader">
|
||||
<div
|
||||
on:click={() => {
|
||||
outputToggled = !outputToggled
|
||||
}}
|
||||
class="toggle"
|
||||
>
|
||||
<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}
|
||||
<Detail size="S">Output</Detail>
|
||||
</div>
|
||||
</div>
|
||||
{#if outputToggled}
|
||||
<TextArea disabled value={JSON.stringify(testResult[0].outputs, null, 2)} />
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
import { cloneDeep } from "lodash/fp"
|
||||
|
||||
let failedParse = null
|
||||
|
||||
// clone the trigger so we're not mutating the reference
|
||||
let trigger = cloneDeep(
|
||||
$automationStore.selectedAutomation.automation.definition.trigger
|
||||
|
|
@ -43,15 +42,12 @@
|
|||
|
||||
<ModalContent
|
||||
title="Add test data"
|
||||
confirmText="Save"
|
||||
confirmText="Test"
|
||||
showConfirmButton={true}
|
||||
disabled={isError}
|
||||
onConfirm={() => {
|
||||
automationStore.actions.addTestDataToAutomation(testData)
|
||||
automationStore.actions.trigger(
|
||||
$automationStore.selectedAutomation,
|
||||
testData
|
||||
)
|
||||
automationStore.actions.test($automationStore.selectedAutomation, testData)
|
||||
}}
|
||||
cancelText="Cancel"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
export let webhookModal
|
||||
export let testData
|
||||
export let schemaProperties
|
||||
|
||||
$: stepId = block.stepId
|
||||
$: bindings = getAvailableBindings(
|
||||
block || $automationStore.selectedBlock,
|
||||
|
|
|
|||
Loading…
Reference in a new issue