2022-05-09 17:50:43 +02:00
|
|
|
<script>
|
2023-10-17 12:51:23 +02:00
|
|
|
import { automationStore, selectedAutomation } from "builderStore"
|
|
|
|
|
import { Icon, Body, StatusLight, AbsTooltip } from "@budibase/bbui"
|
2022-05-09 17:50:43 +02:00
|
|
|
import { externalActions } from "./ExternalActions"
|
2023-02-23 14:55:18 +01:00
|
|
|
import { createEventDispatcher } from "svelte"
|
2023-10-24 16:17:22 +02:00
|
|
|
import { Features } from "constants/backend/automations"
|
2022-05-09 17:50:43 +02:00
|
|
|
|
|
|
|
|
export let block
|
2023-02-23 14:55:18 +01:00
|
|
|
export let open
|
2022-05-09 17:50:43 +02:00
|
|
|
export let showTestStatus = false
|
2022-05-31 14:30:18 +02:00
|
|
|
export let testResult
|
|
|
|
|
export let isTrigger
|
2022-11-05 01:05:15 +01:00
|
|
|
export let idx
|
2023-10-24 16:17:22 +02:00
|
|
|
export let addLooping
|
|
|
|
|
export let deleteStep
|
2023-11-08 11:27:15 +01:00
|
|
|
export let enableNaming = true
|
2023-10-17 12:51:23 +02:00
|
|
|
let validRegex = /^[A-Za-z0-9_\s]+$/
|
|
|
|
|
let typing = false
|
|
|
|
|
|
2023-02-23 14:55:18 +01:00
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
|
|
2023-11-08 11:27:15 +01:00
|
|
|
$: stepNames = $selectedAutomation?.definition.stepNames
|
2023-10-26 12:27:20 +02:00
|
|
|
$: automationName = stepNames?.[block.id] || block?.name || ""
|
2023-10-24 16:17:22 +02:00
|
|
|
$: automationNameError = getAutomationNameError(automationName)
|
|
|
|
|
$: status = updateStatus(testResult, isTrigger)
|
2023-10-27 11:45:58 +02:00
|
|
|
$: isHeaderTrigger = isTrigger || block.type === "TRIGGER"
|
|
|
|
|
|
2022-05-31 14:30:18 +02:00
|
|
|
$: {
|
|
|
|
|
if (!testResult) {
|
2023-02-23 14:55:18 +01:00
|
|
|
testResult = $automationStore.testResults?.steps?.filter(step =>
|
|
|
|
|
block.id ? step.id === block.id : step.stepId === block.stepId
|
|
|
|
|
)?.[0]
|
2022-05-31 14:30:18 +02:00
|
|
|
}
|
|
|
|
|
}
|
2023-11-08 11:27:15 +01:00
|
|
|
$: loopBlock = $selectedAutomation?.definition.steps.find(
|
2023-10-26 12:27:20 +02:00
|
|
|
x => x.blockToLoop === block?.id
|
2023-10-24 16:17:22 +02:00
|
|
|
)
|
2022-05-09 17:50:43 +02:00
|
|
|
|
|
|
|
|
async function onSelect(block) {
|
|
|
|
|
await automationStore.update(state => {
|
|
|
|
|
state.selectedBlock = block
|
|
|
|
|
return state
|
|
|
|
|
})
|
|
|
|
|
}
|
2022-06-28 18:02:24 +02:00
|
|
|
|
|
|
|
|
function updateStatus(results, isTrigger) {
|
2022-06-29 14:34:36 +02:00
|
|
|
if (!results) {
|
|
|
|
|
return {}
|
|
|
|
|
}
|
2022-07-26 14:59:22 +02:00
|
|
|
const lcStatus = results.outputs?.status?.toLowerCase()
|
|
|
|
|
if (lcStatus === "stopped" || lcStatus === "stopped_error") {
|
2022-06-28 18:02:24 +02:00
|
|
|
return { yellow: true, message: "Stopped" }
|
|
|
|
|
} else if (results.outputs?.success || isTrigger) {
|
|
|
|
|
return { positive: true, message: "Success" }
|
|
|
|
|
} else {
|
|
|
|
|
return { negative: true, message: "Error" }
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-10-17 12:51:23 +02:00
|
|
|
|
|
|
|
|
const getAutomationNameError = name => {
|
2023-11-06 11:06:32 +01:00
|
|
|
if (stepNames) {
|
|
|
|
|
for (const [key, value] of Object.entries(stepNames)) {
|
|
|
|
|
if (name === value && key !== block.id) {
|
|
|
|
|
return "This name already exists, please enter a unique name"
|
|
|
|
|
}
|
2023-11-03 12:05:05 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-26 17:05:15 +02:00
|
|
|
if (name !== block.name && name?.length > 0) {
|
|
|
|
|
let invalidRoleName = !validRegex.test(name)
|
|
|
|
|
if (invalidRoleName) {
|
|
|
|
|
return "Please enter a role name consisting of only alphanumeric symbols and underscores"
|
2023-10-24 16:17:22 +02:00
|
|
|
}
|
2023-11-03 12:05:05 +01:00
|
|
|
|
2023-10-26 12:27:20 +02:00
|
|
|
return null
|
2023-10-17 12:51:23 +02:00
|
|
|
}
|
2023-10-26 12:27:20 +02:00
|
|
|
}
|
2023-10-17 12:51:23 +02:00
|
|
|
|
|
|
|
|
const startTyping = async () => {
|
|
|
|
|
typing = true
|
|
|
|
|
}
|
2023-10-24 16:17:22 +02:00
|
|
|
|
|
|
|
|
const saveName = async () => {
|
2023-10-26 17:05:15 +02:00
|
|
|
if (automationNameError || block.name === automationName) {
|
2023-10-24 16:17:22 +02:00
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (automationName.length === 0) {
|
2023-10-26 17:05:15 +02:00
|
|
|
await automationStore.actions.deleteAutomationName(block.id)
|
2023-10-24 16:17:22 +02:00
|
|
|
} else {
|
2023-10-26 17:05:15 +02:00
|
|
|
await automationStore.actions.saveAutomationName(block.id, automationName)
|
2023-10-24 16:17:22 +02:00
|
|
|
}
|
|
|
|
|
}
|
2022-05-09 17:50:43 +02:00
|
|
|
</script>
|
|
|
|
|
|
2023-10-17 12:51:23 +02:00
|
|
|
<div
|
|
|
|
|
class:typing={typing && !automationNameError}
|
|
|
|
|
class:typing-error={automationNameError}
|
|
|
|
|
class="blockSection"
|
2023-11-21 11:04:49 +01:00
|
|
|
on:click={() => dispatch("toggle")}
|
2023-10-17 12:51:23 +02:00
|
|
|
>
|
|
|
|
|
<div class="splitHeader">
|
2022-05-09 17:50:43 +02:00
|
|
|
<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"
|
2022-07-29 14:11:50 +02:00
|
|
|
style="color:var(--spectrum-global-color-gray-700);"
|
2022-05-09 17:50:43 +02:00
|
|
|
focusable="false"
|
|
|
|
|
>
|
|
|
|
|
<use xlink:href="#spectrum-icon-18-{block.icon}" />
|
|
|
|
|
</svg>
|
|
|
|
|
{/if}
|
|
|
|
|
<div class="iconAlign">
|
2023-10-27 11:45:58 +02:00
|
|
|
{#if isHeaderTrigger}
|
2022-11-05 01:20:38 +01:00
|
|
|
<Body size="XS"><b>Trigger</b></Body>
|
2022-05-09 17:50:43 +02:00
|
|
|
{:else}
|
2023-10-26 17:05:15 +02:00
|
|
|
<div style="margin-left: 2px;">
|
|
|
|
|
<Body size="XS"><b>Step {idx}</b></Body>
|
|
|
|
|
</div>
|
2022-05-09 17:50:43 +02:00
|
|
|
{/if}
|
2023-11-08 11:27:15 +01:00
|
|
|
|
|
|
|
|
{#if enableNaming}
|
|
|
|
|
<input
|
|
|
|
|
class="input-text"
|
|
|
|
|
disabled={!enableNaming}
|
|
|
|
|
placeholder="Enter some text"
|
|
|
|
|
name="name"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
value={automationName}
|
|
|
|
|
on:input={e => {
|
|
|
|
|
automationName = e.target.value.trim()
|
|
|
|
|
}}
|
2023-11-21 11:04:49 +01:00
|
|
|
on:click={e => {
|
|
|
|
|
e.stopPropagation()
|
|
|
|
|
startTyping()
|
|
|
|
|
}}
|
|
|
|
|
on:keydown={async e => {
|
|
|
|
|
if (e.key === "Enter") {
|
|
|
|
|
typing = false
|
|
|
|
|
if (automationNameError) {
|
|
|
|
|
automationName = stepNames[block.id] || block?.name
|
|
|
|
|
} else {
|
|
|
|
|
await saveName()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}}
|
2023-11-08 11:27:15 +01:00
|
|
|
on:blur={async () => {
|
|
|
|
|
typing = false
|
|
|
|
|
if (automationNameError) {
|
|
|
|
|
automationName = stepNames[block.id] || block?.name
|
|
|
|
|
} else {
|
|
|
|
|
await saveName()
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
{:else}
|
|
|
|
|
<div class="input-text">
|
|
|
|
|
{automationName}
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
2022-05-09 17:50:43 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="blockTitle">
|
2022-05-31 14:30:18 +02:00
|
|
|
{#if showTestStatus && testResult}
|
2023-10-27 11:45:58 +02:00
|
|
|
<div class="status-container">
|
|
|
|
|
<div style="float:right;">
|
|
|
|
|
<StatusLight
|
|
|
|
|
positive={status?.positive}
|
|
|
|
|
yellow={status?.yellow}
|
|
|
|
|
negative={status?.negative}
|
|
|
|
|
>
|
|
|
|
|
<Body size="XS">{status?.message}</Body>
|
|
|
|
|
</StatusLight>
|
|
|
|
|
</div>
|
|
|
|
|
<Icon
|
2023-11-24 12:11:30 +01:00
|
|
|
e.stopPropagation()
|
|
|
|
|
on:click={e => {
|
|
|
|
|
e.stopPropagation()
|
|
|
|
|
dispatch("toggle")
|
|
|
|
|
}}
|
2023-10-27 11:45:58 +02:00
|
|
|
hoverable
|
|
|
|
|
name={open ? "ChevronUp" : "ChevronDown"}
|
|
|
|
|
/>
|
2022-05-09 17:50:43 +02:00
|
|
|
</div>
|
|
|
|
|
{/if}
|
|
|
|
|
<div
|
2023-10-17 12:51:23 +02:00
|
|
|
class="context-actions"
|
|
|
|
|
class:hide-context-actions={typing}
|
2022-05-09 17:50:43 +02:00
|
|
|
on:click={() => {
|
|
|
|
|
onSelect(block)
|
|
|
|
|
}}
|
|
|
|
|
>
|
2023-10-17 12:51:23 +02:00
|
|
|
{#if !showTestStatus}
|
2023-10-27 11:45:58 +02:00
|
|
|
{#if !isHeaderTrigger && !loopBlock && (block?.features?.[Features.LOOPING] || !block.features)}
|
2023-10-24 16:17:22 +02:00
|
|
|
<AbsTooltip type="info" text="Add looping">
|
|
|
|
|
<Icon on:click={addLooping} hoverable name="RotateCW" />
|
|
|
|
|
</AbsTooltip>
|
|
|
|
|
{/if}
|
2023-11-08 11:27:15 +01:00
|
|
|
{#if !isHeaderTrigger}
|
|
|
|
|
<AbsTooltip type="negative" text="Delete step">
|
|
|
|
|
<Icon on:click={deleteStep} hoverable name="DeleteOutline" />
|
|
|
|
|
</AbsTooltip>
|
|
|
|
|
{/if}
|
2023-10-17 12:51:23 +02:00
|
|
|
{/if}
|
2023-10-27 11:45:58 +02:00
|
|
|
{#if !showTestStatus}
|
|
|
|
|
<Icon
|
2023-11-24 12:11:30 +01:00
|
|
|
on:click={e => {
|
|
|
|
|
e.stopPropagation()
|
|
|
|
|
dispatch("toggle")
|
|
|
|
|
}}
|
2023-10-27 11:45:58 +02:00
|
|
|
hoverable
|
|
|
|
|
name={open ? "ChevronUp" : "ChevronDown"}
|
|
|
|
|
/>
|
|
|
|
|
{/if}
|
2022-05-09 17:50:43 +02:00
|
|
|
</div>
|
2023-10-17 12:51:23 +02:00
|
|
|
{#if automationNameError}
|
|
|
|
|
<div class="error-container">
|
|
|
|
|
<AbsTooltip type="negative" text={automationNameError}>
|
|
|
|
|
<div class="error-icon">
|
|
|
|
|
<Icon size="S" name="Alert" />
|
|
|
|
|
</div>
|
|
|
|
|
</AbsTooltip>
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
2022-05-09 17:50:43 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
2023-10-27 11:45:58 +02:00
|
|
|
.status-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
gap: var(--spacing-m);
|
|
|
|
|
/* You can also add padding or margin to adjust the spacing between the text and the chevron if needed. */
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-17 12:51:23 +02:00
|
|
|
.context-actions {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: var(--spacing-l);
|
|
|
|
|
margin-bottom: var(--spacing-xs);
|
|
|
|
|
}
|
2022-05-09 17:50:43 +02:00
|
|
|
.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);
|
2023-10-30 13:55:24 +01:00
|
|
|
border: 1px solid transparent;
|
2022-05-09 17:50:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blockTitle {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
2023-10-17 12:51:23 +02:00
|
|
|
|
|
|
|
|
.hide-context-actions {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
input {
|
|
|
|
|
color: var(--ink);
|
|
|
|
|
background-color: transparent;
|
2023-10-26 17:05:15 +02:00
|
|
|
border: 1px solid transparent;
|
2023-10-27 11:45:58 +02:00
|
|
|
width: 230px;
|
2023-10-17 12:51:23 +02:00
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
2023-11-08 11:27:15 +01:00
|
|
|
.input-text {
|
|
|
|
|
font-size: var(--spectrum-alias-font-size-default);
|
|
|
|
|
font-family: var(--font-sans);
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-17 12:51:23 +02:00
|
|
|
input:focus {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide arrows for number fields */
|
|
|
|
|
input::-webkit-outer-spin-button,
|
|
|
|
|
input::-webkit-inner-spin-button {
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.typing {
|
2023-10-26 17:05:15 +02:00
|
|
|
border: 1px solid var(--spectrum-global-color-static-blue-500);
|
|
|
|
|
border-radius: 4px 4px 4px 4px;
|
2023-10-17 12:51:23 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.typing-error {
|
2023-10-26 17:05:15 +02:00
|
|
|
border: 1px solid var(--spectrum-global-color-static-red-500);
|
|
|
|
|
border-radius: 4px 4px 4px 4px;
|
2023-10-17 12:51:23 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error-icon :global(.spectrum-Icon) {
|
|
|
|
|
fill: var(--spectrum-global-color-red-400);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.error-container {
|
|
|
|
|
padding-top: var(--spacing-xl);
|
|
|
|
|
}
|
2022-05-09 17:50:43 +02:00
|
|
|
</style>
|
