windmill-components 1.22.42 → 1.28.3

package/components/StringTypeNarrowing.svelte

@@ -3,6 +3,7 @@ import ResourceTypePicker from './ResourceTypePicker.svelte';
 export let pattern;
 export let enum_;
 export let format;
+export let contentEncoding;
 let kind = 'none';
 let patternStr = pattern ?? '';
 let resource;
@@ -21,13 +22,14 @@ const FORMATS = [
 $: format =
     kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : undefined;
 $: pattern = patternStr == '' ? undefined : patternStr;
+$: contentEncoding = kind == 'base64' ? 'base64' : undefined;
 </script>
 
 <RadioButton
 	label="Kind"
-	small={true}
 	options={[
 		['None', 'none'],
+		['File (base64)', 'base64'],
 		['Enum', 'enum'],
 		['Resource Path', 'resource'],
 		['Format', 'format'],
@@ -35,12 +37,14 @@ $: pattern = patternStr == '' ? undefined : patternStr;
 	]}
 	bind:value={kind}
 />
+<div class="my-2" />
 
 {#if kind == 'pattern'}
-	<label class="mb-2 text-gray-700 text-xs"
+	<label for="input" class="mb-2 text-gray-700 text-xs"
 		>Pattern (Regex)
 		<div class="flex flex-row">
 			<input
+				id="input"
 				type="text"
 				placeholder="^(\\([0-9]{3}\\))?[0-9]{3}-[0-9]{4}$"
 				bind:value={patternStr}
@@ -54,11 +58,11 @@ $: pattern = patternStr == '' ? undefined : patternStr;
 		</div>
 	</label>
 {:else if kind == 'enum'}
-	<label class="mb-2 text-gray-700 text-xs"
+	<label for="input" class="mb-2 text-gray-700 text-xs"
 		>Enums
 		{#each enum_ ?? [] as e}
 			<div class="flex flex-row max-w-md">
-				<input type="text" bind:value={e} />
+				<input id="input" type="text" bind:value={e} />
 				<button
 					class="default-button mx-6"
 					on:click={() => {

package/components/StringTypeNarrowing.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         pattern: string | undefined;
         enum_: string[] | undefined;
         format: string | undefined;
+        contentEncoding: 'base64' | 'binary' | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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,5 +1,5 @@
-<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';
 const [popperRef, popperContent] = createPopperActions({
@@ -46,6 +46,7 @@ function close() {
 		use:popperContent={extraOpts}
 		on:mouseenter={open}
 		on:mouseleave={close}
+		class="w-96 text-left"
 	>
 		<slot />
 		<div id="arrow" data-popper-arrow />

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,11 +1,12 @@
-<script>import { FlowModuleValue, Script } from '../../gen';
-import { getScriptByPath } from '../../utils';
+<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 { scrollIntoView } from './utils';
 export let open;
@@ -16,10 +17,15 @@ let modalViewer;
 let modalViewerContent = '';
 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'));
@@ -27,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;