From bc1ad3b8d09fb2b6547dbcb37ac074ffdf9b383c Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Mon, 9 Oct 2023 19:07:32 +0200 Subject: [PATCH] feat(frontend): error handler tutorial (#2404) Co-authored-by: Ruben Fiszel --- .../components/FlowBuilderTutorials.svelte | 6 + .../src/lib/components/FlowTutorials.svelte | 5 + frontend/src/lib/components/Toggle.svelte | 3 +- .../flows/map/FlowErrorHandlerItem.svelte | 6 +- .../tutorials/FlowErrorHandler.svelte | 136 ++++++++++++++++++ 5 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 frontend/src/lib/components/tutorials/FlowErrorHandler.svelte diff --git a/frontend/src/lib/components/FlowBuilderTutorials.svelte b/frontend/src/lib/components/FlowBuilderTutorials.svelte index 4817426a50..a7c490969a 100644 --- a/frontend/src/lib/components/FlowBuilderTutorials.svelte +++ b/frontend/src/lib/components/FlowBuilderTutorials.svelte @@ -49,6 +49,12 @@ index={3} /> + flowTutorials?.runTutorialById('error-handler')} + label="Error handler" + index={4} + /> +
{ diff --git a/frontend/src/lib/components/FlowTutorials.svelte b/frontend/src/lib/components/FlowTutorials.svelte index 709916fb59..5bf18eca3d 100644 --- a/frontend/src/lib/components/FlowTutorials.svelte +++ b/frontend/src/lib/components/FlowTutorials.svelte @@ -4,11 +4,13 @@ import FlowBranchOne from './tutorials/FlowBranchOne.svelte' import FlowBuilderTutorialSimpleFlow from './tutorials/FlowBuilderTutorialSimpleFlow.svelte' import FlowBuilderTutorialsForLoop from './tutorials/FlowBuilderTutorialsForLoop.svelte' + import FlowErrorHandler from './tutorials/FlowErrorHandler.svelte' let flowBuilderTutorialSimpleFlow: FlowBuilderTutorialSimpleFlow | undefined = undefined let flowBuilderTutorialsForLoop: FlowBuilderTutorialsForLoop | undefined = undefined let flowBranchOne: FlowBranchOne | undefined = undefined let flowBranchAll: FlowBranchAll | undefined = undefined + let flowErrorHandler: FlowErrorHandler | undefined = undefined export function runTutorialById(id: string) { if (id === 'forloop') { @@ -19,6 +21,8 @@ flowBranchAll?.runTutorial() } else if (id === 'action') { flowBuilderTutorialSimpleFlow?.runTutorial() + } else if (id === 'error-handler') { + flowErrorHandler?.runTutorial() } } @@ -41,3 +45,4 @@ /> + diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte index 4ad86a4ab6..46c5f37897 100644 --- a/frontend/src/lib/components/Toggle.svelte +++ b/frontend/src/lib/components/Toggle.svelte @@ -14,9 +14,10 @@ export let textClass = '' export let textStyle = '' export let color: 'blue' | 'red' = 'blue' + export let id = (Math.random() + 1).toString(36).substring(10) export let size: 'sm' | 'xs' = 'sm' - const id = (Math.random() + 1).toString(36).substring(10) + const dispatch = createEventDispatcher() const bothOptions = Boolean(options.left) && Boolean(options.right) diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte index b4af80a626..fa3c060c2d 100644 --- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte +++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte @@ -77,6 +77,10 @@ {/if}
- +
diff --git a/frontend/src/lib/components/tutorials/FlowErrorHandler.svelte b/frontend/src/lib/components/tutorials/FlowErrorHandler.svelte new file mode 100644 index 0000000000..a9d6d2c2e0 --- /dev/null +++ b/frontend/src/lib/components/tutorials/FlowErrorHandler.svelte @@ -0,0 +1,136 @@ + + + [ + { + popover: { + title: 'Welcome to the Windmil Flow editor', + description: 'Learn how to recover from an error. You can use arrow keys to navigate.', + onNextClick: () => { + $flowStore.value.modules = [ + { + id: 'a', + value: { + type: 'rawscript', + content: + '// import * as wmill from "npm:windmill-client@1"\n\nexport async function main(x: string) {\n throw new Error("Fake error")\n}\n', + language: RawScript.language.DENO, + input_transforms: { + x: { + type: 'static', + value: '' + } + } + } + } + ] + setTimeout(() => { + driver.moveNext() + }) + } + } + }, + { + element: '#error-handler-toggle', + popover: { + title: 'Error handler', + description: + 'You can add an error handler to your flow. It will be executed if any of the steps in the flow fails.', + + onNextClick: () => { + clickButtonBySelector('#error-handler-toggle') + setTimeout(() => { + driver.moveNext() + }) + } + } + }, + { + popover: { + title: 'Steps kind', + description: "Choose the kind of step you want to add. Let's start with a simple action" + }, + element: '#flow-editor-insert-module' + }, + { + element: '#flow-editor-flow-inputs', + popover: { + title: 'Action configuration', + description: 'An action can be inlined, imported from your workspace or the Hub.' + } + }, + { + element: '#flow-editor-action-script', + popover: { + title: 'Supported languages', + description: 'Windmill support the following languages/runtimes.' + } + }, + { + element: '#flow-editor-action-script > button:nth-child(1)', + popover: { + title: 'Typescript', + description: "Let's pick an action to add to your flow", + onNextClick: () => { + clickButtonBySelector('#flow-editor-action-script > button > div > button:nth-child(1)') + + setTimeout(() => { + driver.moveNext() + }) + } + } + }, + { + element: '#flow-editor-test-flow', + popover: { + title: 'Test your flow', + description: 'We can now test our flow', + onNextClick: () => { + clickButtonBySelector('#flow-editor-test-flow') + + setTimeout(() => { + driver.moveNext() + }) + } + } + }, + + { + element: '#flow-editor-test-flow-drawer', + popover: { + title: 'Test your flow', + description: + 'Finally we can test our flow, and view how the error handler is executed when a step fails', + onNextClick: () => { + clickButtonBySelector('#flow-editor-test-flow-drawer') + + setTimeout(() => { + driver.moveNext() + + updateProgress(4) + }) + } + } + } + ]} +/>