From bf7974aca5d2cd5a6fb0c7bc9c0f00d3bb636ba3 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 10 Sep 2020 15:27:39 +0100 Subject: [PATCH] Update to use stepId for workflows and improve workflow UX when editing blocks --- .../builderStore/store/workflow/Workflow.js | 8 +- .../src/builderStore/store/workflow/index.js | 23 +- .../WorkflowPanel/BlockList/BlockList.svelte | 34 +-- .../BlockList/WorkflowBlock.svelte | 8 +- packages/builder/yarn.lock | 236 +----------------- 5 files changed, 51 insertions(+), 258 deletions(-) diff --git a/packages/builder/src/builderStore/store/workflow/Workflow.js b/packages/builder/src/builderStore/store/workflow/Workflow.js index 94f1c85229..3e02fa62da 100644 --- a/packages/builder/src/builderStore/store/workflow/Workflow.js +++ b/packages/builder/src/builderStore/store/workflow/Workflow.js @@ -67,16 +67,16 @@ export default class Workflow { return [...steps, ...definition.steps].map(step => { // The client side display definition for the block - const definition = blockDefinitions[step.type][step.actionId] + const definition = blockDefinitions[step.type][step.stepId] if (!definition) { throw new Error( - `No block definition exists for the chosen block. Check there's an entry in the block definitions for ${step.actionId}` + `No block definition exists for the chosen block. Check there's an entry in the block definitions for ${step.stepId}` ) } if (!definition.params) { throw new Error( - `Blocks should always have parameters. Ensure that the block definition is correct for ${step.actionId}` + `Blocks should always have parameters. Ensure that the block definition is correct for ${step.stepId}` ) } @@ -88,7 +88,7 @@ export default class Workflow { type: step.type, params: step.params, args, - heading: step.actionId, + heading: step.stepId, body: mustache.render(tagline, args), name: definition.name, } diff --git a/packages/builder/src/builderStore/store/workflow/index.js b/packages/builder/src/builderStore/store/workflow/index.js index d4ba9fe76f..66b27aa6bd 100644 --- a/packages/builder/src/builderStore/store/workflow/index.js +++ b/packages/builder/src/builderStore/store/workflow/index.js @@ -95,14 +95,33 @@ const workflowActions = store => ({ addBlockToWorkflow: block => { store.update(state => { state.currentWorkflow.addBlock(block) - state.selectedWorkflowBlock = block + const steps = state.currentWorkflow.workflow.definition.steps + state.selectedWorkflowBlock = steps.length + ? steps[steps.length - 1] + : state.currentWorkflow.workflow.definition.trigger return state }) }, deleteWorkflowBlock: block => { store.update(state => { + console.log(state.currentWorkflow.workflow) + const idx = state.currentWorkflow.workflow.definition.steps.findIndex( + x => x.id === block.id + ) state.currentWorkflow.deleteBlock(block.id) - state.selectedWorkflowBlock = null + + // Select next closest step + const steps = state.currentWorkflow.workflow.definition.steps + let nextSelectedBlock + if (steps[idx] != null) { + nextSelectedBlock = steps[idx] + } else if (steps[idx - 1] != null) { + nextSelectedBlock = steps[idx - 1] + } else { + nextSelectedBlock = + state.currentWorkflow.workflow.definition.trigger || null + } + state.selectedWorkflowBlock = nextSelectedBlock return state }) }, diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte index ea3d23bd38..db2077bb0f 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte @@ -4,23 +4,23 @@ import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte" let selectedTab = "TRIGGER" - let definitions = [] + let buttonProps = [] + $: blocks = Object.entries($workflowStore.blockDefinitions[selectedTab]) - $: buttonProps = [ - ...($workflowStore.currentWorkflow.hasTrigger() - ? [] - : [{ value: "TRIGGER", text: "Trigger" }]), - { value: "ACTION", text: "Action" }, - { value: "LOGIC", text: "Logic" }, - ] - - $: definitions = Object.entries($workflowStore.blockDefinitions[selectedTab]) $: { - if ( - $workflowStore.currentWorkflow.hasTrigger() && - selectedTab === "TRIGGER" - ) { - selectedTab = "ACTION" + if ($workflowStore.currentWorkflow.hasTrigger()) { + buttonProps = [ + { value: "ACTION", text: "Action" }, + { value: "LOGIC", text: "Logic" }, + ] + if (selectedTab === "TRIGGER") { + selectedTab = "ACTION" + } + } else { + buttonProps = [{ value: "TRIGGER", text: "Trigger" }] + if (selectedTab !== "TRIGGER") { + selectedTab = "TRIGGER" + } } } @@ -32,8 +32,8 @@
- {#each definitions as [actionId, blockDefinition]} - + {#each blocks as [stepId, blockDefinition]} + {/each}
diff --git a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte index 5ba08648c9..85ebd28e5b 100644 --- a/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte +++ b/packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte @@ -1,15 +1,15 @@