MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Show test outputs and responses in modal

This commit is contained in:
Peter Clement 2021-09-14 14:39:45 +01:00
parent 1d25aba78c
commit dfbf7e2ee4
7 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/bbui/src/Modal/ModalContent.svelte
View File

@ -46,8 +46,10 @@
<h1 <h1
class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader" class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
class:noDivider={!showDivider} class:noDivider={!showDivider}
class:header-spacing={$$slots.header}
> >
{title} {title}
<slot name="header" />
</h1> </h1>
{#if showDivider} {#if showDivider}
<Divider size="M" /> <Divider size="M" />
@ -120,4 +122,9 @@
.close-icon :global(svg) { .close-icon :global(svg) {
margin-right: 0; margin-right: 0;
} }
.header-spacing {
display: flex;
justify-content: space-between;
}
</style> </style>

7
packages/builder/src/builderStore/store/automation/index.js
View File

@ -82,7 +82,12 @@ const automationActions = store => ({
}, },
test: async ({ automation }, testData) => { test: async ({ automation }, testData) => {
const { _id } = automation 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 => { select: automation => {
store.update(state => { store.update(state => {

13
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
View File

@ -4,7 +4,6 @@
import FlowItem from "./FlowItem.svelte" import FlowItem from "./FlowItem.svelte"
import TestDataModal from "./TestDataModal.svelte" import TestDataModal from "./TestDataModal.svelte"
import Arrow from "./Arrow.svelte"
import { flip } from "svelte/animate" import { flip } from "svelte/animate"
import { fade, fly } from "svelte/transition" import { fade, fly } from "svelte/transition"
import { import {
@ -86,7 +85,9 @@
> >
<FlowItem {testDataModal} {testAutomation} {onSelect} {block} /> <FlowItem {testDataModal} {testAutomation} {onSelect} {block} />
{#if idx !== blocks.length - 1} {#if idx !== blocks.length - 1}
<Arrow /> <div class="separator" />
<Icon name="AddCircle" size="S" />
<div class="separator" />
{/if} {/if}
</div> </div>
{/each} {/each}
@ -97,6 +98,14 @@
</section> </section>
<style> <style>
.separator {
width: 1px;
height: 25px;
border-left: 1px dashed var(--grey-4);
color: var(--grey-4);
/* center horizontally */
align-self: center;
}
.canvas { .canvas {
margin: 0 -40px calc(-1 * var(--spacing-l)) -40px; margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
overflow-y: auto; overflow-y: auto;

23
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
View File

@ -26,6 +26,13 @@
let resultsModal let resultsModal
let setupToggled let setupToggled
let blockComplete let blockComplete
$: testResult = $automationStore?.testResults
? $automationStore.testResults.steps.filter(
step => step.stepId === block.stepId
)
: null
$: console.log(testResult)
$: instanceId = $database._id $: instanceId = $database._id
$: isTrigger = block.type === "TRIGGER" $: isTrigger = block.type === "TRIGGER"
@ -95,11 +102,15 @@
<Detail size="S">{block?.name?.toUpperCase() || ""}</Detail> <Detail size="S">{block?.name?.toUpperCase() || ""}</Detail>
</div> </div>
</div> </div>
<span on:click={() => resultsModal.show()}> {#if !!testResult}
<StatusLight positive={true} negative={false} <span on:click={() => resultsModal.show()}>
><Body size="XS">View response</Body></StatusLight <StatusLight
> positive={testResult[0].outputs.success}
</span> negative={!testResult[0].outputs.success}
><Body size="XS">View response</Body></StatusLight
>
</span>
{/if}
</div> </div>
</div> </div>
{#if !blockComplete} {#if !blockComplete}
@ -153,7 +164,7 @@
{/if} {/if}
<Modal bind:this={resultsModal} width="30%"> <Modal bind:this={resultsModal} width="30%">
<ResultsModal /> <ResultsModal {testResult} />
</Modal> </Modal>
<Modal bind:this={actionModal} width="30%"> <Modal bind:this={actionModal} width="30%">

60
packages/builder/src/components/automation/AutomationBuilder/FlowChart/ResultsModal.svelte
View File

@ -1,8 +1,10 @@
<script> <script>
import { ModalContent, Icon, Detail } from "@budibase/bbui" import { ModalContent, Icon, Detail, Badge, TextArea } from "@budibase/bbui"
export let testResult
let inputToggled let inputToggled
let outputToggled let outputToggled
$: console.log(testResult)
</script> </script>
<ModalContent <ModalContent
@ -11,37 +13,61 @@
title="Test Automation" title="Test Automation"
cancelText="Close" cancelText="Close"
> >
<div class="splitHeader"> <div slot="header">
<div <div style="float: right;">
on:click={() => { <Badge red><Icon size="S" name="CheckmarkCircle" /></Badge>
inputToggled = !inputToggled </div>
}} </div>
class="toggle"
> <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} {#if inputToggled}
<Icon size="M" name="ChevronDown" /> <Icon size="M" name="ChevronDown" />
{:else} {:else}
<Icon size="M" name="ChevronRight" /> <Icon size="M" name="ChevronRight" />
{/if} {/if}
<Detail size="S">Input</Detail>
</div> </div>
</div> </div>
{#if inputToggled}
<TextArea disabled value={JSON.stringify(testResult[0].inputs, null, 2)} />
{/if}
<div class="splitHeader"> <div
<div on:click={() => {
on:click={() => { outputToggled = !outputToggled
outputToggled = !outputToggled }}
}} class="toggle splitHeader"
class="toggle" >
> <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} {#if outputToggled}
<Icon size="M" name="ChevronDown" /> <Icon size="M" name="ChevronDown" />
{:else} {:else}
<Icon size="M" name="ChevronRight" /> <Icon size="M" name="ChevronRight" />
{/if} {/if}
<Detail size="S">Output</Detail>
</div> </div>
</div> </div>
{#if outputToggled}
<TextArea disabled value={JSON.stringify(testResult[0].outputs, null, 2)} />
{/if}
</ModalContent> </ModalContent>
<style> <style>

8
packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
View File

@ -5,7 +5,6 @@
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
let failedParse = null let failedParse = null
// clone the trigger so we're not mutating the reference // clone the trigger so we're not mutating the reference
let trigger = cloneDeep( let trigger = cloneDeep(
$automationStore.selectedAutomation.automation.definition.trigger $automationStore.selectedAutomation.automation.definition.trigger
@ -43,15 +42,12 @@
<ModalContent <ModalContent
title="Add test data" title="Add test data"
confirmText="Save" confirmText="Test"
showConfirmButton={true} showConfirmButton={true}
disabled={isError} disabled={isError}
onConfirm={() => { onConfirm={() => {
automationStore.actions.addTestDataToAutomation(testData) automationStore.actions.addTestDataToAutomation(testData)
automationStore.actions.trigger( automationStore.actions.test($automationStore.selectedAutomation, testData)
$automationStore.selectedAutomation,
testData
)
}} }}
cancelText="Cancel" cancelText="Cancel"
> >

1
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -20,7 +20,6 @@
export let webhookModal export let webhookModal
export let testData export let testData
export let schemaProperties export let schemaProperties
$: stepId = block.stepId $: stepId = block.stepId
$: bindings = getAvailableBindings( $: bindings = getAvailableBindings(
block || $automationStore.selectedBlock, block || $automationStore.selectedBlock,