windmill-components 1.28.7 → 1.34.0

package/components/ScriptBuilder.svelte

@@ -2,7 +2,7 @@
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
-import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode } from '../script_helpers';
+import { DENO_INIT_CODE, DENO_INIT_CODE_TRIGGER, initialCode, POSTGRES_INIT_CODE } from '../script_helpers';
 import { workspaceStore } from '../stores';
 import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
@@ -18,6 +18,7 @@ let scriptSchema;
 $: step = Number($page.url.searchParams.get('step')) || 1;
 export let script;
 export let initialPath = '';
+export let template = undefined;
 let pathError = '';
 $: setQueryWithoutLoad($page.url, 'state', encodeState(script));
 $: {
@@ -26,10 +27,10 @@ $: {
     }
 }
 if (script.content == '') {
-    initContent(script.language, script.is_trigger);
+    initContent(script.language, template);
 }
-function initContent(lang, is_trigger) {
-    script.content = initialCode(lang, is_trigger);
+function initContent(language, template) {
+    script.content = initialCode(language, template == 'pgsql' ? 'pgsql' : script.is_trigger ? 'trigger' : undefined);
 }
 async function editScript() {
     try {
@@ -81,7 +82,9 @@ onDestroy(() => {
 });
 </script>
 
-<div class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 ">
+<div
+	class="flex flex-col h-screen max-w-screen-lg xl:-ml-20 xl:pl-4 w-full -mt-4 pt-4 md:mx-10 pr-2"
+>
 	<!-- Nav between steps-->
 	<div class="flex flex-col w-full">
 		<div class="justify-between flex flex-row drop-shadow-sm w-full mt-4">
@@ -121,21 +124,34 @@ onDestroy(() => {
 							changeStep(step + 1)
 						}}>Next</button
 					>
-					{#if step == 2}
-						<button
-							class="default-button-secondary px-6 max-h-8 mr-2"
-							on:click={async () => {
-								await inferSchema()
-								editScript()
-							}}>Save (commit)</button
-						>
-					{/if}
 				{:else}
-					<button class="default-button px-6 self-end" on:click={editScript}>Save (commit)</button>
+					<button class="default-button px-6 self-end" on:click={editScript}>Save</button>
+				{/if}
+				{#if step > 1}
+					<button
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={async () => {
+							changeStep(step - 1)
+						}}>Back</button
+					>
+				{/if}
+				{#if step == 2}
+					<button
+						class="default-button-secondary px-6 max-h-8 mr-2"
+						on:click={async () => {
+							await inferSchema()
+							editScript()
+						}}>Save (commit)</button
+					>
 				{/if}
 			</div>
 		</div>
-		<div class="flex flex-row-reverse">
+		<div class="flex flex-row justify-between gap-x-20">
+			<span class="my-1 text-xs text-gray-500">
+				<a target="_blank" href="https://github.com/windmill-labs/windmill-gh-action-deploy"
+					>sync from github instead</a
+				>
+			</span>
 			<span class="my-1 text-sm text-gray-500 italic">
 				{#if script.hash != ''} Editing from {script.hash} with path{/if}
 				{#if initialPath && initialPath != script.path} {initialPath} &rightarrow; {/if}
@@ -151,7 +167,8 @@ onDestroy(() => {
 				bind:error={pathError}
 				bind:path={script.path}
 				{initialPath}
-				namePlaceholder="example/my/script"
+				on:enter={() => changeStep(2)}
+				namePlaceholder="my_script"
 				kind="script"
 			>
 				<div slot="ownerToolkit">
@@ -162,7 +179,7 @@ onDestroy(() => {
 					<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
 				</div>
 			</Path>
-			<h3 class="text-gray-700 pb-1 border-b">Language</h3>
+			<h3 class="text-gray-700 border-b">Language</h3>
 			<div class="max-w-md">
 				<RadioButton
 					label="Language"
@@ -170,10 +187,26 @@ onDestroy(() => {
 						['Typescript (Deno)', 'deno'],
 						['Python 3.10', 'python3']
 					]}
-					on:change={(e) => initContent(e.detail, script.is_trigger)}
+					on:change={(e) => initContent(e.detail, template)}
 					bind:value={script.language}
 				/>
 			</div>
+			{#if script.language == 'deno'}
+				<h4 class="text-gray-700  border-b">Template</h4>
+
+				<div class="max-w-md">
+					<RadioButton
+						label="Template"
+						options={[
+							['None', undefined],
+							['PostgreSQL', 'pgsql']
+						]}
+						on:change={(e) => initContent(script.language, e.detail)}
+						bind:value={template}
+					/>
+				</div>
+			{/if}
+
 			<h3 class="text-gray-700 pb-1 border-b">Metadata</h3>
 
 			<label class="block ">
@@ -226,8 +259,12 @@ onDestroy(() => {
 					type="checkbox"
 					bind:checked={script.is_trigger}
 					on:change={() => {
-						if (script.content == DENO_INIT_CODE || script.content == DENO_INIT_CODE_TRIGGER) {
-							initContent(script.language, script.is_trigger)
+						if (
+							script.content == DENO_INIT_CODE ||
+							script.content == DENO_INIT_CODE_TRIGGER ||
+							script.content == POSTGRES_INIT_CODE
+						) {
+							initContent(script.language, template)
 						}
 					}}
 				/>

package/components/ScriptBuilder.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         script: Script;
         initialPath?: string | undefined;
+        template?: 'pgsql' | undefined;
         setCode?: ((script: Script) => void) | undefined;
     };
     events: {

package/components/ScriptEditor.svelte

@@ -24,7 +24,7 @@ export let path;
 export let lang;
 // Control Editor layout
 export let viewPreview = true;
-export let previewTab = 'logs';
+export let previewTab = 'input';
 let websocketAlive = { pyright: false, black: false, deno: false };
 let modalViewerTitle = '';
 let modalViewerContent;
@@ -131,7 +131,9 @@ async function inferSchema() {
     });
     await inferArgs(lang, editor.getCode(), schema);
     schema = schema;
-    isDefault.forEach((key) => (args[key] = schema.properties[key].default));
+    isDefault
+        .filter((key) => schema.properties[key] != undefined)
+        .forEach((key) => (args[key] = schema.properties[key].default));
     for (const key of Object.keys(args)) {
         if (schema.properties[key] == undefined) {
             delete args[key];

package/components/SharedBadge.svelte

@@ -1,4 +1,6 @@
 <script>import { userStore } from '../stores';
+import { faPeopleGroup, faShare } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
 import Badge from './Badge.svelte';
 export let extraPerms = {};
 export let canWrite;
@@ -46,11 +48,14 @@ $: {
 </script>
 
 {#if kind == 'read' || kind == 'write'}
-	<span class="mr-1">
+	<span class="mr-1 align-center">
 		{#if kind == 'read'}
-			<Badge tooltip={reason}>shared to you (read-only)</Badge>
+			<Badge tooltip={reason}>
+				<Icon data={faPeopleGroup} scale={0.7} />
+				read</Badge
+			>
 		{:else if kind == 'write'}
-			<Badge tooltip={reason}>shared to you</Badge>
+			<Badge tooltip={reason}><Icon data={faPeopleGroup} scale={0.7} /></Badge>
 		{/if}
 	</span>
 {/if}

package/components/VariableEditor.svelte

@@ -113,7 +113,7 @@ async function updateVariable() {
 					bind:error={pathError}
 					bind:path
 					{initialPath}
-					namePlaceholder="my/variable"
+					namePlaceholder="my_variable"
 					kind="variable"
 				/>
 			</div>

package/components/flows/CopyFirstStepSchema.svelte

@@ -1,10 +1,11 @@
 <script>import { Button } from 'flowbite-svelte';
-import { copyFirstStepSchema, isCopyFirstStepSchemaDisabled } from './flowStore';
+import { isCopyFirstStepSchemaDisabled } from './flowState';
+import { copyFirstStepSchema } from './flowStore';
 </script>
 
 <Button
-	color="alternative"
-	size="sm"
+	color="light"
+	size="xs"
 	disabled={$isCopyFirstStepSchemaDisabled}
 	on:click={copyFirstStepSchema}
 >

package/components/flows/DynamicInputHelpBox.svelte

@@ -1,7 +1,7 @@
 <script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { slide } from 'svelte/transition';
-export let i = 1;
+export let importPath = undefined;
 $: opened = false;
 </script>
 
@@ -70,8 +70,10 @@ x + 2</code
 			</li>
 		</ul>
 		<p>To re-enable editor assistance, import the helper functions types using:</p>
-		<code
-			>{`import { previous_result, flow_input, step, variable, resource, params } from 'windmill@${i}'`}</code
-		>
+		<code>
+			{`import { previous_result, flow_input, step, variable, resource, params } from 'windmill${
+				importPath ? `@${importPath}` : ''
+			}'`}
+		</code>
 	</div>
 {/if}

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        i?: number | undefined;
+        importPath?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/FlowBox.svelte

@@ -1,3 +1,16 @@
-<div class="bg-white border border-gray-300 rounded-lg w-full shadow-md">
-	<slot />
+<script>import { createEventDispatcher } from 'svelte';
+import FlowBoxHeader from './FlowBoxHeader.svelte';
+export let title = undefined;
+export let headerClickable = false;
+const dispatch = createEventDispatcher();
+let slots = $$props.$$slots;
+</script>
+
+<div class="bg-white border border-gray-300 rounded-md shadow-md">
+	<FlowBoxHeader clickable={headerClickable} on:click={() => dispatch('clickheader')} {title}>
+		<slot name="header" />
+	</FlowBoxHeader>
+	{#if slots.content}
+		<slot name="content" />
+	{/if}
 </div>

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

@@ -1,23 +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: {};
+    props: {
+        [x: string]: any;
+        title?: string | undefined;
+        headerClickable?: boolean | undefined;
+    };
     events: {
+        clickheader: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        header: {};
+        content: {};
     };
 };
+export declare type FlowBoxProps = typeof __propDef.props;
+export declare type FlowBoxEvents = typeof __propDef.events;
+export declare type FlowBoxSlots = typeof __propDef.slots;
+export default class FlowBox extends SvelteComponentTyped<FlowBoxProps, FlowBoxEvents, FlowBoxSlots> {
+}
 export {};

package/components/flows/FlowBoxHeader.svelte

@@ -1,9 +1,16 @@
-<script>export let title = undefined;
+<script>import { createEventDispatcher } from 'svelte';
+export let title = undefined;
+export let clickable = false;
+const dispatch = createEventDispatcher();
 </script>
 
-<div class="flex items-center justify-between flex-wra px-6 py-4 border-b border-gray-300">
+<div
+	on:click={() => dispatch('click')}
+	class="flex items-center justify-between flex-wrap px-6 py-2"
+	class:cursor-pointer={clickable}
+>
 	{#if title}
-		<h3 class="text-lg leading-6 font-bold text-gray-900">{title}</h3>
+		<h3 class="text-sm font-bold text-gray-900">{title}</h3>
 	{/if}
 	<slot />
 </div>

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

@@ -2,8 +2,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title?: string | undefined;
+        clickable?: boolean | undefined;
     };
     events: {
+        click: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/flows/FlowInput.svelte

@@ -1,20 +1,22 @@
-<script>import SchemaEditor from '../SchemaEditor.svelte';
+<script>import { emptySchema } from '../../utils';
+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">
+<FlowBox title="Flow Inputs">
+	<div slot="header">
 		<CopyFirstStepSchema />
-	</FlowBoxHeader>
-	<div class="p-6 ">
-		<SchemaEditor
-			on:change={() => {
-				$flowStore = $flowStore
-			}}
-			schema={$flowStore.schema}
-		/>
+	</div>
+	<div slot="content">
+		<div class="p-6 border-t border-gray-300">
+			<SchemaEditor
+				on:change={() => {
+					$flowStore = $flowStore
+				}}
+				schema={$flowStore?.schema ?? emptySchema()}
+			/>
+		</div>
 	</div>
 </FlowBox>

package/components/flows/FlowInputs.svelte

@@ -4,42 +4,62 @@ import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from './pickers/FlowScriptPicker.svelte';
 import PickHubScript from './pickers/PickHubScript.svelte';
 import PickScript from './pickers/PickScript.svelte';
-export let isTrigger;
+export let shouldDisableLoopCreation = false;
+export let shouldDisableTriggerScripts = false;
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="columns-2">
-	<PickScript {isTrigger} on:pick />
-	<PickHubScript {isTrigger} on:pick />
-	<FlowScriptPicker
-		label={`Create a for-loop here (coming soon)`}
-		disabled={true}
-		icon={faRepeat}
-		iconColor="text-blue-500"
-	/>
-
-	<FlowScriptPicker
-		label={`New Postgres SQL query`}
-		icon={faCode}
-		iconColor="text-blue-800"
-		on:click={() => dispatch('pick', { path: 'hub/130/execute_custom_query_postgresql' })}
-	/>
-
-	<FlowScriptPicker
-		disabled={isTrigger}
-		label="New Python {isTrigger ? 'trigger ' : ''}script (3.10)"
-		icon={faCode}
-		iconColor="text-green-500"
-		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}
-	/>
-
-	<FlowScriptPicker
-		label="New Typescript {isTrigger ? 'trigger ' : ''}script (Deno)"
-		icon={faCode}
-		iconColor="text-blue-800"
-		on:click={() => dispatch('new', { language: RawScript.language.DENO })}
-	/>
+<div class="space-y-4">
+	{#if !shouldDisableTriggerScripts}
+		<div class="text-sm font-bold">Scripts</div>
+	{/if}
+
+	<div class="grid sm:grid-col-2 lg:grid-cols-3 gap-4">
+		<PickScript on:pick />
+		<PickHubScript on:pick />
+
+		<FlowScriptPicker
+			label={`Create a for-loop here`}
+			disabled={shouldDisableLoopCreation}
+			icon={faRepeat}
+			iconColor="text-blue-500"
+			on:click={() => dispatch('loop')}
+		/>
+
+		<FlowScriptPicker
+			label={`New PostgreSQL query`}
+			icon={faCode}
+			iconColor="text-blue-800"
+			on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'pgsql' })}
+		/>
+
+		<FlowScriptPicker
+			label="New Python script (3.10)"
+			icon={faCode}
+			iconColor="text-green-500"
+			on:click={() => dispatch('new', { language: RawScript.language.PYTHON3, type: 'flow' })}
+		/>
+
+		<FlowScriptPicker
+			label="New Typescript script (Deno)"
+			icon={faCode}
+			iconColor="text-blue-800"
+			on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'flow' })}
+		/>
+	</div>
+
+	{#if !shouldDisableTriggerScripts}
+		<div class="text-sm font-bold">Trigger scripts</div>
+
+		<div class="grid sm:grid-col-1 md:grid-col-2 lg:grid-cols-3 gap-4">
+			<PickScript isTrigger={true} on:pick />
+			<PickHubScript isTrigger={true} on:pick />
+			<FlowScriptPicker
+				label="New Typescript script (Deno)"
+				icon={faCode}
+				iconColor="text-blue-800"
+				on:click={() => dispatch('new', { language: RawScript.language.DENO, type: 'trigger' })}
+			/>
+		</div>
+	{/if}
 </div>

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

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        isTrigger: boolean;
+        shouldDisableLoopCreation?: boolean | undefined;
+        shouldDisableTriggerScripts?: boolean | undefined;
     };
     events: {
         pick: CustomEvent<any>;
+        loop: CustomEvent<any>;
         new: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/flows/FlowModuleHeader.svelte

@@ -1,18 +1,19 @@
-<script>import { getScriptByPath } from '../../utils';
-import { faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+<script>import { getScriptByPath, valueToTsType } from '../../utils';
+import { faArrowDown, faClose, faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { Button } from 'flowbite-svelte';
+import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { Highlight } from 'svelte-highlight';
 import python from 'svelte-highlight/languages/python';
 import typescript from 'svelte-highlight/languages/typescript';
+import IconedPath from '../IconedPath.svelte';
+import IconedResourceType from '../IconedResourceType.svelte';
 import Modal from '../Modal.svelte';
-import FlowBoxHeader from './FlowBoxHeader.svelte';
-import { createScriptFromInlineScript, fork, removeModule } from './flowStore';
-import { scrollIntoView } from './utils';
-export let open;
-export let i;
-export let shouldPick = false;
+import { isEmptyFlowModule } from './flowStateUtils';
+import { stepOpened } from './stepOpenedStore';
+export let indexes;
 export let mod;
+$: shouldPick = isEmptyFlowModule(mod);
 let modalViewer;
 let modalViewerContent = '';
 let modalViewerLanguage = 'deno';
@@ -27,60 +28,75 @@ async function viewCode() {
         throw Error('Not a script');
     }
 }
-function scrollTo({ target }) {
-    const el = document.querySelector(target.getAttribute('href'));
-    scrollIntoView(el);
-}
+const dispatch = createEventDispatcher();
+$: opened = $stepOpened === String(indexes.join('-'));
 </script>
 
-<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 === 'script' && !shouldPick}
-			<Button
-				on:click={() => {
-					open = i
-					fork(i)
-				}}
-				size="sm"
-				color="alternative"
-			>
-				<Icon data={faCodeBranch} class="mr-2" />
-				Fork
-			</Button>
-			<Button size="sm" color="alternative" on:click={viewCode}>
-				<Icon data={faCode} class="mr-2" />
-				View code
-			</Button>
+<div>
+	<h3 class="text-sm font-bold text-gray-900 flex flex-col">
+		<span class="text-xs shrink">
+			{#if 'path' in mod.value && mod.value.path}
+				<IconedPath path={mod.value.path} />
+			{:else if 'language' in mod.value && mod.value.language}
+				Inline {mod.value.language}
+			{:else}
+				Select a script
+			{/if}
+		</span>
+		{#if ('path' in mod.value && mod.value.path) || ('language' in mod.value && mod.value.language)}
+			<input
+				on:click|stopPropagation={() => undefined}
+				class="overflow-x-auto"
+				type="text"
+				bind:value={mod.summary}
+				placeholder="Summary"
+			/>
 		{/if}
+	</h3>
+</div>
 
-		{#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>
-		{/if}
+<div class="flex flex-row space-x-2" on:click|stopPropagation={() => undefined}>
+	{#if mod.value.type === 'script' && !shouldPick}
+		<Button size="xs" color="alternative" on:click={() => dispatch('fork')}>
+			<Icon data={faCodeBranch} class="mr-2" />
+			Fork
+		</Button>
+		<Button size="xs" color="alternative" on:click={viewCode}>
+			<Icon data={faCode} class="mr-2" />
+			View code
+		</Button>
+	{/if}
+
+	{#if mod.value.type === 'rawscript' && !shouldPick}
+		<Button size="xs" color="alternative" on:click={() => dispatch('createScriptFromInlineScript')}>
+			<Icon data={faSave} class="mr-2" />
+			Save to workspace
+		</Button>
+	{/if}
+	<Button
+		size="xs"
+		color="alternative"
+		on:click={() => {
+			dispatch('delete')
+		}}
+	>
+		<Icon data={faTrashAlt} class="mr-2" />
+		Remove step
+	</Button>
+	{#if opened}
+		<Button size="xs" color="dark" on:click={() => stepOpened.update(() => undefined)}>
+			<Icon data={faClose} />
+		</Button>
+	{:else}
 		<Button
-			size="sm"
-			color="alternative"
-			on:click={() => {
-				open = -1
-				removeModule(i)
-			}}
+			size="xs"
+			color="light"
+			on:click={() => stepOpened.update(() => String(indexes.join('-')))}
 		>
-			<Icon data={faTrashAlt} class="mr-2" />
-			Remove step
+			<Icon data={faArrowDown} />
 		</Button>
-	</div>
-</FlowBoxHeader>
+	{/if}
+</div>
 
 <Modal bind:this={modalViewer}>
 	<div slot="title">Script {'path' in mod?.value ? mod?.value.path : ''}</div>