windmill-components 1.542.5 → 1.555.0

package/package/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte

@@ -3,6 +3,7 @@ import { updateProgress } from '../../tutorialUtils';
 import { clickButtonBySelector, isFlowTainted, setInputBySelector, triggerPointerDown, waitForElementLoading } from './utils';
 import Tutorial from './Tutorial.svelte';
 import { refreshStateStore } from '../../svelte5Utils.svelte';
+import { wait } from '../../utils';
 const { flowStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 let tutorial = undefined;
@@ -30,16 +31,13 @@ export function runTutorial() {
 			popover: {
 				title: 'Flows inputs',
 				description: 'Flows have inputs that can be used in the flow',
-				onNextClick: () => {
-					clickButtonBySelector('#flow-editor-virtual-Input')
-					tick()
-						.then(() => clickButtonBySelector('#add-flow-input-btn'))
-						.then(tick)
-						.then(() => setInputBySelector('input[placeholder="Field name"]', 'firstname'))
-
-					setTimeout(() => {
-						driver.moveNext()
-					})
+				onNextClick: async () => {
+					triggerPointerDown('#flow-editor-virtual-Input')
+					await wait(20)
+					clickButtonBySelector('#add-flow-input-btn')
+					await wait(0)
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
+					setTimeout(() => driver.moveNext())
 				}
 			},
 			element: '#flow-editor-virtual-Input'
@@ -53,11 +51,15 @@ export function runTutorial() {
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#add-flow-input-btn') // Close the input drawer
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
 		{
-			element: '#flow-editor-add-property',
+			element: '*:has(> #flow-editor-add-property)',
 			popover: {
 				title: 'Add your property',
 				description: 'Click here to save your property',
@@ -76,16 +78,26 @@ export function runTutorial() {
 				description: 'Click here to add a step to your flow',
 				onNextClick: () => {
 					triggerPointerDown(`#flow-editor-add-step-0`)
-					setTimeout(() => {
-						driver.moveNext()
-					})
+					setTimeout(() => driver.moveNext())
+				},
+				onPrevClick: async () => {
+					clickButtonBySelector('.delete-schema-field-button')
+					await wait(0)
+					clickButtonBySelector('#add-flow-input-btn')
+					await wait(0)
+					setInputBySelector('input[placeholder="Field name"]', 'firstname')
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
 		{
 			popover: {
 				title: 'Steps kind',
-				description: "Choose the kind of step you want to add. Let's start with a simple action"
+				description: "Choose the kind of step you want to add. Let's start with a simple action",
+				onPrevClick: () => {
+					triggerPointerDown(`#flow-editor-add-step-0`)
+					setTimeout(() => driver.movePrevious())
+				}
 			},
 			element: '#flow-editor-insert-module'
 		},
@@ -138,6 +150,7 @@ export function runTutorial() {
 				title: 'Action editor',
 				description: 'Windmill provides a full code editor to write your actions',
 				onPrevClick: () => {
+					triggerPointerDown(`#flow-editor-virtual-Input`)
 					triggerPointerDown(`#flow-editor-add-step-0`)
 					setTimeout(() => {
 						driver.movePrevious()
@@ -147,6 +160,9 @@ export function runTutorial() {
 		},
 		{
 			element: '#flow-editor-step-input',
+			onHighlighted: () => {
+				document.querySelector('#flow-editor-plug')?.parentElement?.classList.remove('opacity-0')
+			},
 			popover: {
 				title: 'Autogenerated schema',
 				description: 'The schema and the UI is autogenerated from your code'
@@ -154,10 +170,14 @@ export function runTutorial() {
 		},
 		{
 			element: '#flow-editor-plug',
+			onHighlighted: () => {
+				document.querySelector('#flow-editor-plug')?.parentElement?.classList.remove('opacity-0')
+			},
 			popover: {
 				title: 'Connect',
 				description:
 					'You can provide static values or connect to other nodes result. Here we will connect to the firstname input',
+
 				onNextClick: () => {
 					clickButtonBySelector('#flow-editor-plug')
 					setTimeout(() => {
@@ -187,6 +207,10 @@ export function runTutorial() {
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-plug')
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},
@@ -195,7 +219,11 @@ export function runTutorial() {
 			element: '#flow-editor-step-input',
 			popover: {
 				title: 'Input connected!',
-				description: 'The input is now connected to the firstname input'
+				description: 'The input is now connected to the firstname input',
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-plug')
+					setTimeout(() => driver.movePrevious())
+				}
 			}
 		},
 
@@ -215,7 +243,7 @@ export function runTutorial() {
 		},
 
 		{
-			element: '#flow-preview-content',
+			element: 'textarea.w-full',
 			popover: {
 				title: 'Flow input',
 				description: 'Let’s provide an input to our flow',
@@ -225,6 +253,10 @@ export function runTutorial() {
 					setTimeout(() => {
 						driver.moveNext()
 					})
+				},
+				onPrevClick: () => {
+					clickButtonBySelector('#flow-editor-test-flow') // Close the test drawer
+					setTimeout(() => driver.movePrevious())
 				}
 			}
 		},

package/package/components/tutorials/Tutorial.svelte

@@ -5,15 +5,21 @@ import { ignoredTutorials } from './ignoredTutorials';
 import SkipTutorials from './SkipTutorials.svelte';
 import TutorialControls from './TutorialControls.svelte';
 import TutorialInner from './TutorialInner.svelte';
+import { isCurrentlyInTutorial } from '../../stores';
 export let index = 0;
 export let name = 'action';
 export let tainted = false;
+export let onDestroyed = undefined;
 export let getSteps = () => [];
 let totalSteps = 0;
 let tutorial = undefined;
 const dispatch = createEventDispatcher();
 // Render controls needs to be exposed so steps that have a custom render can call it
 export function renderControls({ config, state }) {
+    const popoverContent = document.querySelector('#driver-popover-content');
+    popoverContent?.addEventListener('pointerdown', (event) => {
+        event.stopPropagation();
+    });
     const popoverDescription = document.querySelector('#driver-popover-description');
     if (!tutorial) {
         return;
@@ -88,6 +94,7 @@ export const runTutorial = (options) => {
         dispatch('error', { detail: name });
         return;
     }
+    isCurrentlyInTutorial.val = true;
     tutorial = driver({
         allowClose: true,
         disableActiveInteraction: true,
@@ -98,9 +105,11 @@ export const runTutorial = (options) => {
             renderControls({ config, state });
         },
         onDestroyed: () => {
+            onDestroyed?.();
             if (!tutorial?.hasNextStep()) {
                 $ignoredTutorials = Array.from(new Set([...$ignoredTutorials, index]));
             }
+            isCurrentlyInTutorial.val = false;
         }
     });
     const steps = getSteps(tutorial, options);

package/package/components/tutorials/Tutorial.svelte.d.ts

@@ -16,6 +16,7 @@ declare const Tutorial: $$__sveltets_2_IsomorphicComponent<{
     index?: number;
     name?: string;
     tainted?: boolean;
+    onDestroyed?: (() => void) | undefined;
     getSteps?: (driver: Driver, options?: {
         indexToInsertAt?: number;
         skipStepsCount?: number;

package/package/components/tutorials/app/AppTutorial.svelte

@@ -4,10 +4,12 @@ import { getContext } from 'svelte';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector, clickFirstButtonBySelector, connectInlineRunnableInputToComponentOutput, isAppTainted, updateInlineRunnableCode } from '../utils';
 import { updateProgress } from '../../../tutorialUtils';
+import {} from 'driver.js';
+import { wait } from '../../../utils';
 export let name;
 export let index;
 let tutorial = undefined;
-const { app, selectedComponent, focusedGrid, connectingInput } = getContext('AppViewerContext');
+const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
 export function runTutorial() {
     tutorial?.runTutorial();
@@ -28,7 +30,7 @@ function addComponent(appComponentType) {
 	on:skipAll
 	tainted={isAppTainted($app)}
 	getSteps={(driver) => {
-		const steps = [
+		const steps: DriveStep[] = [
 			{
 				popover: {
 					title: 'App editor tutorial',
@@ -91,7 +93,7 @@ function addComponent(appComponentType) {
 				popover: {
 					title: 'Component input',
 					description:
-						'There are several ways to set the input of a component. It can be static, the result of a JS expression, connected to the output of another component, or the result of a inline runnable. Here we will create an inline runnable that will convert the text to uppercase.',
+						'There are several ways to set the input of a component. It can be static, the result of a JS expression, connected to the output of another component, or the result of an inline runnable. Here we will create an inline runnable that will convert the text to uppercase.',
 					onNextClick: () => {
 						clickFirstButtonBySelector('#component-input')
 						setTimeout(() => {
@@ -122,9 +124,7 @@ function addComponent(appComponentType) {
 					description: "Let's create an inline script.",
 					onNextClick: () => {
 						clickButtonBySelector('#app-editor-create-inline-script')
-						setTimeout(() => {
-							driver.moveNext()
-						})
+						setTimeout(() => driver.moveNext())
 					}
 				}
 			},
@@ -134,7 +134,7 @@ function addComponent(appComponentType) {
 				popover: {
 					title: 'Choose a language',
 					description:
-						'You can choose the language of your runnable. They are two type of runnables: frontend and backend.'
+						'You can choose the language of your runnable. There are two type of runnables: frontend and backend.'
 				}
 			},
 
@@ -156,87 +156,71 @@ function addComponent(appComponentType) {
 			},
 			{
 				element: '#create-deno-script',
+				onHighlighted: () => {
+					document.querySelector('#schema-plug-x')?.parentElement?.classList.remove('opacity-0')
+				},
 				popover: {
 					title: 'Create a deno script',
 					description:
 						"Let's create a simple deno script. For the sake of this tutorial, we will create a script that converts the text to uppercase.",
-					onNextClick: () => {
+					onNextClick: async () => {
 						clickButtonBySelector('#create-deno-script')
-						setTimeout(() => {
-							if ($selectedComponent?.[0]) {
-								updateInlineRunnableCode(
-									$app,
-									$selectedComponent[0],
-									`export async function main(x: string) {
-  return x?.toLocaleUpperCase();
-}
-`
-								)
-							}
+						await wait(50)
+						if ($selectedComponent?.[0]) {
+							updateInlineRunnableCode(
+								$app,
+								$selectedComponent[0],
+								'export function main(x: string) {\n  return x?.toLocaleUpperCase();\n}'
+							)
+						}
 
-							driver.moveNext()
-						})
+						driver.moveNext()
 					}
 				}
 			},
 			{
-				element: '#schema-plug',
+				element: '#schema-plug-x',
+				onHighlighted: () => {
+					document.querySelector('#schema-plug-x')?.parentElement?.classList.remove('opacity-0')
+				},
 				popover: {
 					title: 'Connect the function input',
 					description:
 						"The function we created has an string input 'x'. We can connect the output of the text component to it.",
 					onNextClick: () => {
-						clickButtonBySelector('#schema-plug')
+						clickButtonBySelector('#schema-plug-x')
 						setTimeout(() => {
 							driver.moveNext()
 						})
 					}
 				}
 			},
-
 			{
-				element: '#connect-output-d',
+				element: '#connect-output-a',
 				popover: {
 					title: 'Select the output',
-					description: ' ',
+					description: 'Open the output selector of the text input component.',
 					onNextClick: () => {
-						$connectingInput.opened = false
-						$connectingInput.input = undefined
-
+						clickButtonBySelector('#connect-output-a')
 						setTimeout(() => {
 							driver.moveNext()
 						})
-					},
-					onPopoverRender: (popover, opts) => {
-						const wrapper = document.createElement('div')
-						wrapper.classList.add('flex', 'flex-col', 'gap-2', 'w-full', 'items-start')
-
-						const p1 = document.createElement('p')
-						p1.innerText =
-							'You can now select the output in the output menu. Click on the little red button to open the menu.'
-
-						const id = document.createElement('div')
-						id.innerHTML = `<button class="bg-red-500/70 border border-red-600 px-1 py-0.5" title="Outputs" aria-label="Open output"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-plug-2 "><path d="M9 2v6"></path><path d="M15 2v6"></path><path d="M12 17v5"></path><path d="M5 8h14"></path><path d="M6 11V8h12v3a6 6 0 1 1-12 0v0Z"></path></svg></button>`
-
-						const p2 = document.createElement('p')
-						p2.innerText =
-							'Once opened, you can select the output you want to connect to. Here we will connect the result output of the text component to the input "x" of the inline runnable.'
-
-						const objectViewer = document.createElement('div')
-						objectViewer.innerHTML = `<div class="rounded-lg shadow-md border p-4 bg-surface"><span class="s-UNyBDXJ1E286">  <ul class="w-full pl-2 border-none s-UNyBDXJ1E286"><li class="s-UNyBDXJ1E286"><button class="whitespace-nowrap s-UNyBDXJ1E286"><span class="key border  font-semibold rounded px-1 hover:bg-surface-hover text-2xs text-secondary s-UNyBDXJ1E286">result</span> :</button> <button class="val  rounded px-1 hover:bg-blue-100 string s-UNyBDXJ1E286"><span title="" class="text-2xs s-UNyBDXJ1E286">""</span></button></li> </ul> </span> <span class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200 s-UNyBDXJ1E286 hidden">{...}</span> </div>`
-
-						wrapper.appendChild(p1)
-						wrapper.appendChild(id)
-						wrapper.appendChild(p2)
-						wrapper.appendChild(objectViewer)
-
-						popover.description.appendChild(wrapper)
-
-						tutorial?.renderControls(opts)
 					}
 				}
 			},
-
+			{
+				element: '.component-output-viewer-a li *:has(> button[title="result"])',
+				popover: {
+					title: 'Select the output',
+					description: "Let's select the result of the text input component.",
+					onNextClick: () => {
+						setTimeout(async () => {
+							clickButtonBySelector('.component-output-viewer-a li button[title="result"]')
+							driver.moveNext()
+						})
+					}
+				}
+			},
 			{
 				element: '.wm-app-viewer',
 				popover: {

package/package/components/tutorials/app/BackgroundRunnablesTutorial.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import { updateProgress } from '../../../tutorialUtils';
+import {} from 'driver.js';
 import Tutorial from '../Tutorial.svelte';
 import { clickButtonBySelector } from '../utils';
 export let name;
@@ -16,7 +17,7 @@ export function runTutorial(skipStepsCount = undefined) {
 	on:error
 	on:skipAll
 	getSteps={(driver, options) => {
-		const steps = [
+		const steps: DriveStep[] = [
 			{
 				element: '#app-editor-runnable-panel',
 				popover: {
@@ -33,10 +34,7 @@ export function runTutorial(skipStepsCount = undefined) {
 						'Click here to create a runnable. Runnables are scripts that can be executed in the background. You can add as many runnables as you want.',
 					onNextClick: () => {
 						clickButtonBySelector('#create-background-runnable')
-
-						setTimeout(() => {
-							driver.moveNext()
-						})
+						setTimeout(() => driver.moveNext())
 					}
 				}
 			},

package/package/components/tutorials/app/ConnectionTutorial.svelte

@@ -54,12 +54,12 @@ function addComponent() {
 			}
 		},
 		{
-			element: '#plug',
+			element: '[data-connection-button] button[title="Connect"]',
 			popover: {
 				title: 'Connect the text component',
 				description: 'Click on the plug icon to connect the text component',
 				onNextClick: () => {
-					clickButtonBySelector('#plug')
+					clickButtonBySelector('[data-connection-button] button[title="Connect"]')
 					setTimeout(() => {
 						driver.moveNext()
 					})

package/package/components/tutorials/utils.js

@@ -1,5 +1,5 @@
 import { deepEqual } from 'fast-equals';
-import { findGridItem } from '../apps/editor/appUtils';
+import { emptyApp, findGridItem } from '../apps/editor/appUtils';
 export function setInputBySelector(selector, value) {
     const input = document.querySelector(selector);
     if (input) {
@@ -36,154 +36,6 @@ export function selectOptionsBySelector(selector, value) {
 export function isFlowTainted(flow) {
     return (flow.value.modules.length > 0 || Object.keys(flow?.schema?.properties ?? {}).length > 0);
 }
-const emptyApp = {
-    grid: [
-        {
-            '3': {
-                fixed: false,
-                x: 0,
-                y: 0,
-                fullHeight: false,
-                w: 6,
-                h: 2
-            },
-            '12': {
-                fixed: false,
-                x: 0,
-                y: 0,
-                fullHeight: false,
-                w: 12,
-                h: 2
-            },
-            data: {
-                type: 'containercomponent',
-                configuration: {},
-                customCss: {
-                    container: {
-                        class: '!p-0',
-                        style: ''
-                    }
-                },
-                numberOfSubgrids: 1,
-                id: 'a'
-            },
-            id: 'a'
-        }
-    ],
-    fullscreen: false,
-    unusedInlineScripts: [],
-    hiddenInlineScripts: [],
-    theme: {
-        type: 'path',
-        path: 'f/app_themes/theme_0'
-    },
-    subgrids: {
-        'a-0': [
-            {
-                '3': {
-                    fixed: false,
-                    x: 0,
-                    y: 0,
-                    fullHeight: false,
-                    w: 6,
-                    h: 1
-                },
-                '12': {
-                    fixed: false,
-                    x: 0,
-                    y: 0,
-                    fullHeight: false,
-                    w: 6,
-                    h: 1
-                },
-                data: {
-                    type: 'textcomponent',
-                    configuration: {
-                        style: {
-                            type: 'static',
-                            value: 'Body'
-                        },
-                        copyButton: {
-                            type: 'static',
-                            value: false
-                        },
-                        tooltip: {
-                            type: 'evalv2',
-                            value: '',
-                            fieldType: 'text',
-                            expr: '`Author: ${ctx.author}`',
-                            connections: [
-                                {
-                                    componentId: 'ctx',
-                                    id: 'author'
-                                }
-                            ]
-                        },
-                        disableNoText: {
-                            type: 'static',
-                            value: true,
-                            fieldType: 'boolean'
-                        }
-                    },
-                    componentInput: {
-                        type: 'templatev2',
-                        fieldType: 'template',
-                        eval: '${ctx.summary}',
-                        connections: [
-                            {
-                                id: 'summary',
-                                componentId: 'ctx'
-                            }
-                        ]
-                    },
-                    customCss: {
-                        text: {
-                            class: 'text-xl font-semibold whitespace-nowrap truncate',
-                            style: ''
-                        },
-                        container: {
-                            class: '',
-                            style: ''
-                        }
-                    },
-                    horizontalAlignment: 'left',
-                    verticalAlignment: 'center',
-                    id: 'b'
-                },
-                id: 'b'
-            },
-            {
-                '3': {
-                    fixed: false,
-                    x: 0,
-                    y: 1,
-                    fullHeight: false,
-                    w: 3,
-                    h: 1
-                },
-                '12': {
-                    fixed: false,
-                    x: 6,
-                    y: 0,
-                    fullHeight: false,
-                    w: 6,
-                    h: 1
-                },
-                data: {
-                    type: 'recomputeallcomponent',
-                    configuration: {},
-                    menuItems: [],
-                    horizontalAlignment: 'right',
-                    verticalAlignment: 'center',
-                    id: 'c'
-                },
-                id: 'c'
-            }
-        ]
-    },
-    hideLegacyTopBar: true,
-    norefreshbar: false
-};
 export function isAppTainted(app) {
     if (app.hideLegacyTopBar === true) {
         // An empty app should have only have a topbar and no hidden inline scripts
@@ -195,7 +47,7 @@ export function isAppTainted(app) {
             return true;
         }
         // Check if the current app is different from an empty app
-        return !deepEqual(app, emptyApp);
+        return !deepEqual(app, emptyApp());
     }
     else {
         // For older apps,
@@ -224,14 +76,12 @@ export function updateFlowModuleById(flow, id, callback) {
         }
     };
     dfs(flow.value.modules);
-    flow = flow;
 }
 export function updateBackgroundRunnableCode(app, index, newCode) {
     const script = app.hiddenInlineScripts[index];
     if (script.type === 'runnableByName' && script.inlineScript) {
         script.inlineScript.content = newCode;
     }
-    app = app;
 }
 export function updateInlineRunnableCode(app, componentId, newCode) {
     const gridItem = findGridItem(app, componentId);
@@ -241,7 +91,6 @@ export function updateInlineRunnableCode(app, componentId, newCode) {
             gridItem.data.componentInput.runnable.inlineScript.content = newCode;
         }
     }
-    app = app;
 }
 export function connectComponentSourceToOutput(app, componentId, targetId) {
     const gridItem = findGridItem(app, componentId);
@@ -258,7 +107,6 @@ export function connectComponentSourceToOutput(app, componentId, targetId) {
             ]
         };
     }
-    app = app;
 }
 export function connectInlineRunnableInputToComponentOutput(app, sourceComponentId, sourceField, targetComponentId, targetField, fieldType = 'text') {
     const gridItem = findGridItem(app, sourceComponentId);

package/package/components/vscode.js

@@ -110,7 +110,7 @@ export async function initializeVscode(caller, htmlContainer) {
                         token: 'comment'
                     },
                     {
-                        foreground: 'a3be8c',
+                        foreground: 'b3deac',
                         token: 'string'
                     },
                     {
@@ -122,7 +122,7 @@ export async function initializeVscode(caller, htmlContainer) {
                         token: 'constant.language'
                     },
                     {
-                        foreground: '81a1c1',
+                        foreground: '92bae6',
                         token: 'keyword'
                     },
                     {
@@ -179,15 +179,20 @@ export async function initializeVscode(caller, htmlContainer) {
                     {
                         foreground: '8fbcbb',
                         token: 'variable.other.constant'
-                    }
+                    },
+                    { token: 'string.value.json', foreground: 'e8b886' }, // string values in JSON
+                    { token: 'keyword.json', foreground: 'e8b886' } // true, false, null in JSON
                 ],
                 colors: {
                     'editor.foreground': '#D8DEE9',
-                    'editor.background': '#272D38',
-                    'editor.selectionBackground': '#434C5ECC',
+                    'editor.background': '#00000000',
+                    'editor.selectionBackground': '#515A6D',
+                    'editor.inactiveSelectionBackground': '#515A6DB0',
                     'editor.lineHighlightBackground': '#3B4252',
                     'editorCursor.foreground': '#D8DEE9',
-                    'editorWhitespace.foreground': '#434C5ECC'
+                    'editorWhitespace.foreground': '#515A6D',
+                    'editorIndentGuide.background1': '#5A647860',
+                    'editorIndentGuide.activeBackground1': '#6A7488'
                 }
             });
             meditor.defineTheme('myTheme', {
@@ -195,8 +200,11 @@ export async function initializeVscode(caller, htmlContainer) {
                 inherit: true,
                 rules: [],
                 colors: {
-                    'editorLineNumber.foreground': '#999',
-                    'editorGutter.background': '#F9FAFB'
+                    'editor.background': '#FFFFFF00',
+                    'editor.foreground': '#2d3748',
+                    'editorLineNumber.foreground': '#C2C9D1',
+                    'editorLineNumber.activeForeground': '#989DA5',
+                    'editorGutter.background': '#FFFFFF00'
                 }
             });
             if (document.documentElement.classList.contains('dark')) {