update Automation button placement and test details button
This commit is contained in:
Peter Clement
parent
5fbfc0bb6b
commit
0a8cb11514
7 changed files with 75 additions and 212 deletions
|
|
@ -105,9 +105,7 @@ const automationActions = store => ({
|
|||
},
|
||||
select: automation => {
|
||||
store.update(state => {
|
||||
let testResults = state.selectedAutomation?.testResults
|
||||
state.selectedAutomation = new Automation(cloneDeep(automation))
|
||||
state.selectedAutomation.testResults = testResults
|
||||
state.selectedBlock = null
|
||||
return state
|
||||
})
|
||||
|
|
|
|||
|
|
@ -40,66 +40,70 @@
|
|||
</script>
|
||||
|
||||
<div class="canvas">
|
||||
<div class="content">
|
||||
<div class="title">
|
||||
<div class="subtitle">
|
||||
<Heading size="S">{automation.name}</Heading>
|
||||
<div style="display:flex; align-items: center;">
|
||||
<div class="iconPadding">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
on:click={confirmDeleteDialog.show}
|
||||
hoverable
|
||||
size="M"
|
||||
name="DeleteOutline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left; padding-left: var(--spacing-xl);">
|
||||
<Heading size="S">{automation.name}</Heading>
|
||||
</div>
|
||||
<div style="float: right; padding-right: var(--spacing-xl);" class="title">
|
||||
<div class="subtitle">
|
||||
<div style="display:flex; align-items: center;">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
on:click={confirmDeleteDialog.show}
|
||||
hoverable
|
||||
size="M"
|
||||
name="DeleteOutline"
|
||||
/>
|
||||
</div>
|
||||
<ActionButton
|
||||
on:click={() => {
|
||||
testDataModal.show()
|
||||
}}
|
||||
icon="MultipleCheck"
|
||||
size="M">Run test</ActionButton
|
||||
>
|
||||
<div style="padding-left: var(--spacing-m);">
|
||||
<ActionButton
|
||||
disabled={!$automationStore.selectedAutomation?.testResults}
|
||||
on:click={() => {
|
||||
testDataModal.show()
|
||||
$automationStore.selectedAutomation.automation.showTestPanel = true
|
||||
}}
|
||||
icon="MultipleCheck"
|
||||
size="M">Run test</ActionButton
|
||||
size="M">Test Details</ActionButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#each blocks as block, idx (block.id)}
|
||||
<div
|
||||
class="block"
|
||||
animate:flip={{ duration: 500 }}
|
||||
in:fly|local={{ x: 500, duration: 1500 }}
|
||||
>
|
||||
{#if block.stepId !== "LOOP"}
|
||||
<FlowItem {testDataModal} {block} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
okText="Delete Automation"
|
||||
onOk={deleteAutomation}
|
||||
title="Confirm Deletion"
|
||||
>
|
||||
Are you sure you wish to delete the automation
|
||||
<i>{automation.name}?</i>
|
||||
This action cannot be undone.
|
||||
</ConfirmDialog>
|
||||
|
||||
<Modal bind:this={testDataModal} width="30%">
|
||||
<TestDataModal />
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="content">
|
||||
{#each blocks as block, idx (block.id)}
|
||||
<div
|
||||
class="block"
|
||||
animate:flip={{ duration: 500 }}
|
||||
in:fly|local={{ x: 500, duration: 500 }}
|
||||
out:fly|local={{ x: 500, duration: 500 }}
|
||||
>
|
||||
{#if block.stepId !== "LOOP"}
|
||||
<FlowItem {testDataModal} {block} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ConfirmDialog
|
||||
bind:this={confirmDeleteDialog}
|
||||
okText="Delete Automation"
|
||||
onOk={deleteAutomation}
|
||||
title="Confirm Deletion"
|
||||
>
|
||||
Are you sure you wish to delete the automation
|
||||
<i>{automation.name}?</i>
|
||||
This action cannot be undone.
|
||||
</ConfirmDialog>
|
||||
|
||||
<Modal bind:this={testDataModal} width="30%">
|
||||
<TestDataModal />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.canvas {
|
||||
margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
/* Fix for firefox not respecting bottom padding in scrolling containers */
|
||||
.canvas > *:last-child {
|
||||
padding-bottom: 40px;
|
||||
|
|
@ -127,10 +131,6 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.iconPadding {
|
||||
padding-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
padding-right: var(--spacing-m);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import FlowItemTitle from "./FlowItemTitle.svelte"
|
||||
import FlowItemHeader from "./FlowItemHeader.svelte"
|
||||
|
||||
import { automationStore } from "builderStore"
|
||||
import {
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
{/if}
|
||||
{/if}
|
||||
|
||||
<FlowItemTitle bind:blockComplete {block} {testDataModal} />
|
||||
<FlowItemHeader bind:blockComplete {block} {testDataModal} />
|
||||
{#if !blockComplete}
|
||||
<Divider noMargin />
|
||||
<div class="blockSection">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
<script>
|
||||
import { automationStore } from "builderStore"
|
||||
import { Icon, Body, Detail, StatusLight, Modal } from "@budibase/bbui"
|
||||
import { Icon, Body, Detail, StatusLight } 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 =>
|
||||
|
|
@ -63,7 +61,7 @@
|
|||
</div>
|
||||
<div class="blockTitle">
|
||||
{#if showTestStatus && testResult && testResult[0]}
|
||||
<div style="float: right;" on:click={() => resultsModal.show()}>
|
||||
<div style="float: right;">
|
||||
<StatusLight
|
||||
positive={isTrigger || testResult[0].outputs?.success}
|
||||
negative={!testResult[0].outputs?.success}
|
||||
|
|
@ -87,10 +85,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Modal bind:this={resultsModal} width="30%">
|
||||
<ResultsModal {isTrigger} {testResult} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.center-items {
|
||||
display: flex;
|
||||
|
|
@ -1,133 +0,0 @@
|
|||
<script>
|
||||
import { ModalContent, Icon, Detail, TextArea, Label } from "@budibase/bbui"
|
||||
|
||||
export let testResult
|
||||
export let isTrigger
|
||||
let inputToggled
|
||||
let outputToggled
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
showCloseIcon={false}
|
||||
showConfirmButton={false}
|
||||
cancelText="Close"
|
||||
>
|
||||
<div slot="header" class="result-modal-header">
|
||||
<span>Test Results</span>
|
||||
<div>
|
||||
{#if isTrigger || testResult[0].outputs.success}
|
||||
<div class="iconSuccess">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="iconFailure">
|
||||
<Icon size="S" name="CloseCircle" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
{#if testResult[0].outputs.iterations}
|
||||
<div style="display: flex;">
|
||||
<Icon name="Reuse" />
|
||||
<div style="margin-left: 10px;">
|
||||
<Label>
|
||||
This loop ran {testResult[0].outputs.iterations} times.</Label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
{#if inputToggled}
|
||||
<div class="text-area-container">
|
||||
<TextArea
|
||||
disabled
|
||||
value={JSON.stringify(testResult[0].inputs, null, 2)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<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}
|
||||
</div>
|
||||
</div>
|
||||
{#if outputToggled}
|
||||
<div class="text-area-container">
|
||||
<TextArea
|
||||
disabled
|
||||
value={JSON.stringify(testResult[0].outputs, null, 2)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
||||
<style>
|
||||
.result-modal-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.iconSuccess {
|
||||
color: var(--spectrum-global-color-green-600);
|
||||
}
|
||||
|
||||
.iconFailure {
|
||||
color: var(--spectrum-global-color-red-600);
|
||||
}
|
||||
|
||||
.splitHeader {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-area-container :global(textarea) {
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { Icon, Divider, Tabs, Tab, TextArea } from "@budibase/bbui"
|
||||
import FlowItemTitle from "./FlowChart/FlowItemTitle.svelte"
|
||||
import { Icon, Divider, Tabs, Tab, TextArea, Label } from "@budibase/bbui"
|
||||
import FlowItemHeader from "./FlowChart/FlowItemHeader.svelte"
|
||||
import { automationStore } from "builderStore"
|
||||
|
||||
export let automation
|
||||
|
|
@ -35,9 +35,6 @@
|
|||
<Icon
|
||||
on:click={async () => {
|
||||
$automationStore.selectedAutomation.automation.showTestPanel = false
|
||||
await automationStore.actions.save(
|
||||
$automationStore.selectedAutomation?.automation
|
||||
)
|
||||
}}
|
||||
hoverable
|
||||
name="Close"
|
||||
|
|
@ -51,15 +48,26 @@
|
|||
{#each blocks as block, idx}
|
||||
<div class="block">
|
||||
{#if block.stepId !== "LOOP"}
|
||||
<FlowItemTitle showTestStatus={true} bind:showParameters {block} />
|
||||
<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)}
|
||||
/>
|
||||
|
|
@ -68,6 +76,7 @@
|
|||
<Tab title="Output">
|
||||
<div style="padding: 10px 10px 10px 10px;">
|
||||
<TextArea
|
||||
minHeight="100px"
|
||||
disabled
|
||||
value={JSON.stringify(testResults?.[idx]?.outputs, null, 2)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
|
||||
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
|
||||
import TestPanel from "components/automation/AutomationBuilder/TestPanel.svelte"
|
||||
import { fly } from "svelte/transition"
|
||||
|
||||
$: automation =
|
||||
$automationStore.selectedAutomation?.automation ||
|
||||
|
|
@ -47,11 +46,7 @@
|
|||
</div>
|
||||
|
||||
{#if automation?.showTestPanel}
|
||||
<div
|
||||
in:fly|local={{ x: 500, duration: 500 }}
|
||||
out:fly|local={{ x: 500, duration: 500 }}
|
||||
class="setup"
|
||||
>
|
||||
<div class="setup">
|
||||
<TestPanel {automation} />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -87,13 +82,13 @@
|
|||
|
||||
.content {
|
||||
position: relative;
|
||||
padding: var(--spacing-l) 40px;
|
||||
padding-top: var(--spacing-l);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
gap: var(--spacing-l);
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
.centered {
|
||||
top: 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue