Add test data sidebar and componentize part of the flow item for this purpose
This commit is contained in:
Peter Clement
parent
eeda40f829
commit
f58118b52d
|
|
@ -1,30 +1,27 @@
|
||||||
<script>
|
<script>
|
||||||
|
import FlowItemTitle from "./FlowItemTitle.svelte"
|
||||||
|
|
||||||
import { automationStore } from "builderStore"
|
import { automationStore } from "builderStore"
|
||||||
import {
|
import {
|
||||||
Icon,
|
Icon,
|
||||||
Divider,
|
Divider,
|
||||||
Layout,
|
Layout,
|
||||||
Body,
|
|
||||||
Detail,
|
Detail,
|
||||||
Modal,
|
Modal,
|
||||||
Button,
|
Button,
|
||||||
StatusLight,
|
|
||||||
Select,
|
Select,
|
||||||
ActionButton,
|
ActionButton,
|
||||||
notifications,
|
notifications,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
|
import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
|
||||||
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
|
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
|
||||||
import ResultsModal from "./ResultsModal.svelte"
|
|
||||||
import ActionModal from "./ActionModal.svelte"
|
import ActionModal from "./ActionModal.svelte"
|
||||||
import { externalActions } from "./ExternalActions"
|
|
||||||
|
|
||||||
export let block
|
export let block
|
||||||
export let testDataModal
|
export let testDataModal
|
||||||
let selected
|
let selected
|
||||||
let webhookModal
|
let webhookModal
|
||||||
let actionModal
|
let actionModal
|
||||||
let resultsModal
|
|
||||||
let blockComplete
|
let blockComplete
|
||||||
let showLooping = false
|
let showLooping = false
|
||||||
|
|
||||||
|
|
@ -32,9 +29,6 @@
|
||||||
$: showBindingPicker =
|
$: showBindingPicker =
|
||||||
block.stepId === "CREATE_ROW" || block.stepId === "UPDATE_ROW"
|
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"
|
$: isTrigger = block.type === "TRIGGER"
|
||||||
|
|
||||||
$: selected = $automationStore.selectedBlock?.id === block.id
|
$: selected = $automationStore.selectedBlock?.id === block.id
|
||||||
|
|
@ -182,63 +176,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="blockSection">
|
<FlowItemTitle bind:blockComplete {block} {testDataModal} />
|
||||||
<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>
|
|
||||||
{#if !blockComplete}
|
{#if !blockComplete}
|
||||||
<Divider noMargin />
|
<Divider noMargin />
|
||||||
<div class="blockSection">
|
<div class="blockSection">
|
||||||
|
|
@ -283,10 +221,6 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<Modal bind:this={resultsModal} width="30%">
|
|
||||||
<ResultsModal {isTrigger} {testResult} />
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<Modal bind:this={actionModal} width="30%">
|
<Modal bind:this={actionModal} width="30%">
|
||||||
<ActionModal {blockIdx} bind:blockComplete />
|
<ActionModal {blockIdx} bind:blockComplete />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -51,6 +51,7 @@
|
||||||
$automationStore.selectedAutomation?.automation,
|
$automationStore.selectedAutomation?.automation,
|
||||||
testData
|
testData
|
||||||
)
|
)
|
||||||
|
$automationStore.selectedAutomation.automation.showTestPanel = true
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
notifications.error("Error testing notification")
|
notifications.error("Error testing notification")
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -4,7 +4,11 @@
|
||||||
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
|
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
|
||||||
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
|
import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
|
||||||
import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.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 modal
|
||||||
let webhookModal
|
let webhookModal
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -39,6 +43,10 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#if automation.showTestPanel}
|
||||||
|
<div class="setup"><TestPanel {automation} /></div>
|
||||||
|
{/if}
|
||||||
<Modal bind:this={modal}>
|
<Modal bind:this={modal}>
|
||||||
<CreateAutomationModal {webhookModal} />
|
<CreateAutomationModal {webhookModal} />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
@ -52,7 +60,8 @@
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
height: 0;
|
height: 0;
|
||||||
display: grid;
|
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 {
|
.nav {
|
||||||
|
|
@ -92,4 +101,17 @@
|
||||||
.main {
|
.main {
|
||||||
width: 300px;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue