windmill-components 1.21.0 → 1.28.1

package/components/TableCustom.svelte

@@ -10,7 +10,7 @@ const dispatch = createEventDispatcher();
 - the second slot should be a <tbody>, containing th elements
 -->
 <div class="flex flex-col {$$props.class} min-w-full">
-	<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+	<div class="inline-block min-w-full py-2 align-middle">
 		<table id="table-custom" class="min-w-full divide-y divide-gray-300 table-auto">
 			<thead>
 				<slot name="header-row" />
@@ -22,18 +22,16 @@ const dispatch = createEventDispatcher();
 		<div class="flex flex-row-reverse text-gray-500 mb-6">
 			<button
 				class="ml-2 drop-shadow-md {showNext ? 'visible' : 'invisible'}"
-				on:click={() => {
-					dispatch('next')
-				}}>Next</button
+				on:click={() => dispatch('next')}
 			>
+				Next
+			</button>
 			<button
 				class="mx-2 drop-shadow-md {currentPage === 1 ? 'hidden' : ''}"
-				on:click={() => {
-					dispatch('previous')
-				}}>Previous</button
+				on:click={() => dispatch('previous')}
 			>
+				Previous
+			</button>
 		</div>
 	{/if}
 </div>
-
-<style></style>

package/components/TableSimple.svelte

@@ -10,7 +10,7 @@ const dispatch = createEventDispatcher();
 </script>
 
 <div class="mt-8 flex flex-col {$$props.class}">
-	<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
+	<div class="inline-block min-w-full align-middle">
 		<table class="min-w-full divide-y divide-gray-300 table-auto">
 			<thead>
 				<tr class={twTextSize}>

package/components/Toggle.svelte

@@ -1,15 +1,14 @@
 <script>import { createEventDispatcher } from 'svelte';
-export let value;
-export let options;
-let checked = options.right.value === value;
-const id = Date.now().toString(36);
+export let options = {};
+export let checked = false;
+const id = (Math.random() + 1).toString(36).substring(10);
 const dispatch = createEventDispatcher();
 </script>
 
 <span>
 	<label for={id} class="inline-flex items-center cursor-pointer mt-2">
-		{#if Boolean(options.left.label)}
-			<span class="mr-2 text-sm font-medium text-gray-900">{options.left.label}</span>
+		{#if Boolean(options?.left)}
+			<span class="mr-2 text-sm font-medium text-gray-900">{options?.left}</span>
 		{/if}
 		<div class="relative">
 			<input
@@ -19,16 +18,15 @@ const dispatch = createEventDispatcher();
 				class="sr-only peer"
 				bind:checked
 				on:change={() => {
-					value = checked ? options.right.value : options.left.value
-					dispatch('change', value)
+					dispatch('change', checked)
 				}}
 			/>
 			<div
 				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
 			/>
 		</div>
-		{#if Boolean(options.right.label)}
-			<span class="ml-2 text-sm font-medium text-gray-900">{options.right.label}</span>
+		{#if Boolean(options?.right)}
+			<span class="ml-2 text-sm font-medium text-gray-900">{options?.right}</span>
 		{/if}
 	</label>
 </span>

package/components/Toggle.svelte.d.ts

@@ -1,17 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        value: any;
-        options: {
-            left: {
-                label?: string | undefined;
-                value: any;
-            };
-            right: {
-                label?: string | undefined;
-                value: any;
-            };
-        };
+        options?: {
+            left?: string | undefined;
+            right?: string | undefined;
+        } | undefined;
+        checked?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/Tooltip.svelte

@@ -1,93 +1,67 @@
-<script>import Icon from 'svelte-awesome';
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+<script>import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { createPopperActions } from 'svelte-popperjs';
 import { fade } from 'svelte/transition';
-export let position = 'above';
-export let direction = 'default';
-let viewTooltip = false;
-let mouseOnMessage = false;
-let mouseOver = false;
-// This function makes sure the tooltip does not disappear when moving the mouse to the tooltip
-// message, so that users can click links there for example
-function hideTooltip() {
-    setTimeout(function () {
-        if (!mouseOnMessage && !mouseOver) {
-            viewTooltip = false;
+const [popperRef, popperContent] = createPopperActions({
+    placement: 'auto'
+});
+const betterPreventOverflow = (options) => ({
+    name: 'preventOverflow',
+    options,
+    effect: ({ state }) => {
+        const { padding = 0 } = options;
+        state.elements.popper.style.maxWidth = `calc(100vw - ${padding * 2}px)`;
+    }
+});
+const extraOpts = {
+    modifiers: [
+        betterPreventOverflow({ padding: 50 }),
+        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'arrow',
+            options: {
+                padding: 10 // 5px from the edges of the popper
+            }
         }
-        else {
-            hideTooltip();
-        }
-    }, 300);
+    ]
+};
+let showTooltip = false;
+let timeout;
+function open() {
+    clearTimeout(timeout);
+    showTooltip = true;
+}
+function close() {
+    timeout = setTimeout(() => (showTooltip = false), 200);
 }
 </script>
 
-<div class="inline-block has-tooltip {$$props.class}">
-	{#if viewTooltip}
-		<span
-			transition:fade
-			class="tooltip rounded shadow-lg p-1 leading-4 {position === 'above' ? '-mt-8' : 'mt-6'} 
-			{viewTooltip ? 'tooltip-visible' : 'tooltip'} {direction === 'left' ? 'right-0' : ''}
-			text-2xs text-gray-700"
-			on:mouseover={() => {
-				mouseOnMessage = true
-			}}
-			on:focus={() => {}}
-			on:mouseout={() => {
-				mouseOnMessage = false
-			}}
-			on:blur={() => {}}
-			><slot />
-		</span>
-	{/if}
-	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.6} />
-	<!-- Hovering on this (invisible) area triggers the apparition of the tooltip. Needed because the icon is too small-->
+<button use:popperRef on:mouseenter={open} on:mouseleave={close}>
+	<Icon class="text-gray-500 font-thin inline-block align-middle" data={faInfoCircle} scale={0.8} />
+</button>
+{#if showTooltip}
 	<div
-		class="relative w-4 h-5 -mt-5 -ml-1"
-		on:mouseover={() => {
-			viewTooltip = true
-			mouseOver = true
-		}}
-		on:focus={() => {
-			viewTooltip = true
-		}}
-		on:mouseout={() => {
-			hideTooltip()
-			mouseOver = false
-		}}
-		on:blur={() => {}}
-	/>
-</div>
+		transition:fade
+		id="tooltip"
+		use:popperContent={extraOpts}
+		on:mouseenter={open}
+		on:mouseleave={close}
+		class="w-96 text-left"
+	>
+		<slot />
+		<div id="arrow" data-popper-arrow />
+	</div>
+{/if}
 
 <style>
-	.tooltip {
-
-    visibility: hidden;
-
-    position: absolute;
-
-    transition-property: opacity;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 100ms
-}
-
-	.tooltip-visible {
-
-    visibility: visible;
-
-    position: absolute;
-
+	#tooltip {
     z-index: 50;
-
+    white-space: normal;
+    border-radius: 0.75rem;
     --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-
-    max-width: 24rem;
-
-    transition-property: opacity;
-
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    transition-duration: 150ms
+    background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+    padding: 1rem;
+    font-weight: 400;
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity))
 }</style>

package/components/Tooltip.svelte.d.ts

@@ -1,10 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        position?: ("above" | "below") | undefined;
-        direction?: ("default" | "left") | undefined;
-    };
+    props: {};
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/VariableEditor.svelte

@@ -7,6 +7,7 @@ import Modal from './Modal.svelte';
 import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import Required from './Required.svelte';
+import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 let path = '';
 let variable = {
@@ -120,19 +121,33 @@ async function updateVariable() {
 			<label class="block pb-6">
 				<input type="checkbox" bind:checked={variable.is_secret} />
 				<span class="ml-2">Secret</span>
-			</label>
-			<div class="font-semibold text-gray-700 col-span-10 }">
 				{#if variable.is_secret}
+					<div
+						class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-1 mt-1 text-sm"
+						role="alert"
+					>
+						When a secret, you will not be able to read this variable value from the variable editor
+						UI but only within scripts. <Tooltip>
+							Within scripts, every read of the value create the audit log:
+							'variables.decrypt_secret'</Tooltip
+						>
+					</div>
+				{/if}
+			</label>
+			{#if variable.is_secret}
+				<div class="font-semibold text-gray-700 col-span-10 }">
 					<Password
 						bind:password={variable.value}
 						placeholder={'******** (only fill to update value)'}
 						label={'variable (max 3000 characters)'}
 					/>
-				{:else}
-					<span>variable (max 3000 characters)</span>
+				</div>
+			{:else}
+				<div>
+					<span>Variable (max 3000 characters)</span>
 					<AutosizedTextarea bind:value={variable.value} minRows={5} />
-				{/if}
-			</div>
+				</div>
+			{/if}
 
 			<div class="flex flex-col w-full">
 				<span class="text-gray-700">Description<Required required={false} /></span>

package/components/flows/CopyFirstStepSchema.svelte

@@ -1,10 +1,12 @@
-<script>import { copyFirstStepSchema, isCopyFirstStepSchemaDisabled } from './flowStore';
+<script>import { Button } from 'flowbite-svelte';
+import { copyFirstStepSchema, isCopyFirstStepSchemaDisabled } from './flowStore';
 </script>
 
-<button
-	class="default-secondary-button-v2"
+<Button
+	color="alternative"
+	size="sm"
 	disabled={$isCopyFirstStepSchemaDisabled}
 	on:click={copyFirstStepSchema}
 >
-	Copy from step 1's schema
-</button>
+	Copy from first step schema
+</Button>

package/components/flows/DynamicInputHelpBox.svelte

@@ -58,7 +58,7 @@ belong to us`</code
 			<li><b>params</b>: the object containing the current step static values</li>
 			<li>
 				<b>step(n)</b>: the function returning the result of step number n. One can also use a
-				negative n. step(0) == flow_input , step(-1) == previous_result
+				negative n. step(0) == result of the first step , step(-1) == previous_result
 			</li>
 			<li>
 				<b>variable(path)</b>: the function returning the variable (including secrets) at given path

package/components/flows/FlowBox.svelte

@@ -0,0 +1,3 @@
+<div class="bg-white border border-gray-300 rounded-lg w-full shadow-md">
+	<slot />
+</div>

package/components/flows/FlowBox.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FlowBoxProps */
+/** @typedef {typeof __propDef.events}  FlowBoxEvents */
+/** @typedef {typeof __propDef.slots}  FlowBoxSlots */
+export default class FlowBox extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type FlowBoxProps = typeof __propDef.props;
+export type FlowBoxEvents = typeof __propDef.events;
+export type FlowBoxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/flows/FlowBoxHeader.svelte

@@ -0,0 +1,9 @@
+<script>export let title = undefined;
+</script>
+
+<div class="flex items-center justify-between flex-wra px-6 py-4 border-b border-gray-300">
+	{#if title}
+		<h3 class="text-lg leading-6 font-bold text-gray-900">{title}</h3>
+	{/if}
+	<slot />
+</div>

package/components/flows/FlowBoxHeader.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type FlowBoxHeaderProps = typeof __propDef.props;
+export declare type FlowBoxHeaderEvents = typeof __propDef.events;
+export declare type FlowBoxHeaderSlots = typeof __propDef.slots;
+export default class FlowBoxHeader extends SvelteComponentTyped<FlowBoxHeaderProps, FlowBoxHeaderEvents, FlowBoxHeaderSlots> {
+}
+export {};

package/components/flows/FlowInput.svelte

@@ -0,0 +1,20 @@
+<script>import SchemaEditor from '../SchemaEditor.svelte';
+import { flowStore } from './../flows/flowStore';
+import CopyFirstStepSchema from './CopyFirstStepSchema.svelte';
+import FlowBox from './FlowBox.svelte';
+import FlowBoxHeader from './FlowBoxHeader.svelte';
+</script>
+
+<FlowBox>
+	<FlowBoxHeader title="Flow Inputs">
+		<CopyFirstStepSchema />
+	</FlowBoxHeader>
+	<div class="p-6 ">
+		<SchemaEditor
+			on:change={() => {
+				$flowStore = $flowStore
+			}}
+			schema={$flowStore.schema}
+		/>
+	</div>
+</FlowBox>

package/components/flows/FlowInput.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowInputProps = typeof __propDef.props;
+export declare type FlowInputEvents = typeof __propDef.events;
+export declare type FlowInputSlots = typeof __propDef.slots;
+export default class FlowInput extends SvelteComponentTyped<FlowInputProps, FlowInputEvents, FlowInputSlots> {
+}
+export {};

package/components/flows/FlowInputs.svelte

@@ -1,4 +1,4 @@
-<script>import { FlowModuleValue } from '../../gen/models/FlowModuleValue';
+<script>import { RawScript } from '../../gen';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from './pickers/FlowScriptPicker.svelte';
@@ -15,13 +15,17 @@ const dispatch = createEventDispatcher();
 		label="New Typescript {isTrigger ? 'trigger ' : ''}script (Deno)"
 		icon={faCode}
 		iconColor="text-blue-800"
-		on:click={() => dispatch('new', { language: FlowModuleValue.language.DENO })}
+		on:click={() => dispatch('new', { language: RawScript.language.DENO })}
 	/>
+
 	<FlowScriptPicker
 		disabled={isTrigger}
 		label="New Python {isTrigger ? 'trigger ' : ''}script (3.10)"
 		icon={faCode}
 		iconColor="text-yellow-500"
-		on:click={() => dispatch('new', { language: FlowModuleValue.language.PYTHON3 })}
+		on:click={() => dispatch('new', { language: RawScript.language.PYTHON3 })}
+		tooltip={isTrigger
+			? 'Python is not supported for trigger scripts yet but is supported for every other steps'
+			: undefined}
 	/>
 </div>

package/components/flows/FlowModuleHeader.svelte

@@ -1,24 +1,31 @@
-<script>import { FlowModuleValue, Script } from '../../gen';
+<script>import { getScriptByPath } from '../../utils';
 import { faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'flowbite-svelte';
 import Icon from 'svelte-awesome';
 import { Highlight } from 'svelte-highlight';
-import { python, typescript } from 'svelte-highlight/languages';
-import github from 'svelte-highlight/styles/github';
+import python from 'svelte-highlight/languages/python';
+import typescript from 'svelte-highlight/languages/typescript';
 import Modal from '../Modal.svelte';
+import FlowBoxHeader from './FlowBoxHeader.svelte';
 import { createScriptFromInlineScript, fork, removeModule } from './flowStore';
-import { getScriptByPath, scrollIntoView } from './utils';
+import { scrollIntoView } from './utils';
 export let open;
 export let i;
 export let shouldPick = false;
 export let mod;
 let modalViewer;
 let modalViewerContent = '';
-let modalViewerLanguage = Script.language.DENO;
+let modalViewerLanguage = 'deno';
 async function viewCode() {
-    const { content, language } = await getScriptByPath(mod.value.path);
-    modalViewerContent = content;
-    modalViewerLanguage = language;
-    modalViewer.openModal();
+    if (mod.value.type == 'script') {
+        const { content, language } = await getScriptByPath(mod.value.path);
+        modalViewerContent = content;
+        modalViewerLanguage = language;
+        modalViewer.openModal();
+    }
+    else {
+        throw Error('Not a script');
+    }
 }
 function scrollTo({ target }) {
     const el = document.querySelector(target.getAttribute('href'));
@@ -26,61 +33,57 @@ function scrollTo({ target }) {
 }
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
-<div class="flex flex-row w-full space-x-2">
-	<slot />
-	<a href="#module-{i}" class="grow" on:click={() => (open = i)} on:click|preventDefault={scrollTo}
-		><div class="w-full" /></a
+<FlowBoxHeader>
+	<a
+		href="#module-{i}"
+		class="grow text-inherit"
+		on:click={() => (open = i)}
+		on:click|preventDefault={scrollTo}
 	>
+		<slot />
+	</a>
 
 	<div class="flex flex-row space-x-2">
-		{#if mod.value.type === FlowModuleValue.type.SCRIPT && !shouldPick}
-			<button
-				type="button"
+		{#if mod.value.type === 'script' && !shouldPick}
+			<Button
 				on:click={() => {
 					open = i
 					fork(i)
 				}}
-				class="default-secondary-button-v2 text-xs"
+				size="sm"
+				color="alternative"
 			>
-				<Icon data={faCodeBranch} class={`w-4 mr-2 h-4`} />
+				<Icon data={faCodeBranch} class="mr-2" />
 				Fork
-			</button>
-			<button type="button" on:click={viewCode} class="default-secondary-button-v2 text-xs">
-				<Icon data={faCode} class="w-4 mr-2 h-4" />
+			</Button>
+			<Button size="sm" color="alternative" on:click={viewCode}>
+				<Icon data={faCode} class="mr-2" />
 				View code
-			</button>
+			</Button>
 		{/if}
 
-		{#if mod.value.type === FlowModuleValue.type.RAWSCRIPT && !shouldPick}
-			<button
-				type="button"
-				on:click={() => createScriptFromInlineScript(i)}
-				class="default-secondary-button-v2 text-sm"
-			>
-				<Icon data={faSave} class="w-4 mr-4" />
+		{#if mod.value.type === 'rawscript' && !shouldPick}
+			<Button size="sm" color="alternative" on:click={() => createScriptFromInlineScript(i)}>
+				<Icon data={faSave} class="mr-2" />
 				Save to workspace
-			</button>
+			</Button>
 		{/if}
-		<button
-			type="button"
+		<Button
+			size="sm"
+			color="alternative"
 			on:click={() => {
 				open = -1
 				removeModule(i)
 			}}
-			class="default-secondary-button-v2 text-xs"
 		>
-			<Icon data={faTrashAlt} class="w-4 mr-2 h-4" />
+			<Icon data={faTrashAlt} class="mr-2" />
 			Remove step
-		</button>
+		</Button>
 	</div>
-</div>
+</FlowBoxHeader>
 
 <Modal bind:this={modalViewer}>
-	<div slot="title">Script {mod?.value.path}</div>
+	<div slot="title">Script {'path' in mod?.value ? mod?.value.path : ''}</div>
 	<div slot="content">
 		{#if modalViewerLanguage === 'python3'}
 			<Highlight language={python} code={modalViewerContent} />

package/components/flows/FlowModuleHeader.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type FlowModule } from '../../gen';
+import type { FlowModule } from '../../gen';
 declare const __propDef: {
     props: {
         open: number;