windmill-components 1.103.2 → 1.109.1

package/package/components/SchemaEditor.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         isFlowInput?: boolean | undefined;
         lightMode?: boolean | undefined;
-        schema?: Schema | undefined;
+        schema?: Schema | any;
         getSchema?: (() => Schema) | undefined;
     };
     events: {

package/package/components/SchemaForm.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        schema: Schema;
+        schema: Schema | any;
         args?: Record<string, any> | undefined;
         disabledArgs?: string[] | undefined;
         disabled?: boolean | undefined;

package/package/components/SchemaModal.svelte

@@ -29,23 +29,22 @@ import { Alert, Button } from './common';
 import Toggle from './Toggle.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Drawer from './common/drawer/Drawer.svelte';
-export let property = DEFAULT_PROPERTY;
 export let error = '';
 export let editing = false;
 export let oldArgName = undefined;
 export let isFlowInput = false;
-let resource_type = undefined;
 const dispatch = createEventDispatcher();
 let drawer;
+let property = DEFAULT_PROPERTY;
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {
-        dispatch('save');
+        dispatch('save', property);
     }
 }
-export function openDrawer() {
+export function openDrawer(nproperty) {
     drawer.openDrawer();
-    resource_type = property.format?.substring(5);
+    property = nproperty;
 }
 export function closeDrawer() {
     drawer.closeDrawer();
@@ -60,12 +59,8 @@ function clearModal() {
     property.required = DEFAULT_PROPERTY.required;
     property.selectedType = DEFAULT_PROPERTY.selectedType;
     property.format = undefined;
-    resource_type = undefined;
     drawer.closeDrawer();
 }
-$: if (property.selectedType == 'object' && resource_type) {
-    property.format = resource_type ? `$res:${resource_type}` : undefined;
-}
 $: if (property.name == '') {
     error = 'Name is required';
 }
@@ -142,7 +137,7 @@ else {
 				</div>
 			</div>
 			<div>
-				<div class="flex flex-row gap-x-4">
+				<div class="flex flex-row gap-x-4 items-center">
 					<ArgInput
 						label="Default"
 						bind:value={property.default}
@@ -151,7 +146,7 @@ else {
 					/>
 					<Toggle
 						options={{ right: 'Required' }}
-						class="mt-5 !justify-start"
+						class="!justify-start"
 						bind:checked={property.required}
 					/>
 				</div>
@@ -194,7 +189,7 @@ else {
 				color="blue"
 				disabled={!property.name || !property.selectedType || error != ''}
 				on:click={() => {
-					dispatch('save')
+					dispatch('save', property)
 				}}
 			>
 				Save

package/package/components/SchemaModal.svelte.d.ts

@@ -20,12 +20,11 @@ export declare function schemaToModal(schema: SchemaProperty, name: string, requ
 export declare const DEFAULT_PROPERTY: ModalSchemaProperty;
 declare const __propDef: {
     props: {
-        property?: ModalSchemaProperty | undefined;
         error?: string | undefined;
         editing?: boolean | undefined;
         oldArgName?: string | undefined;
         isFlowInput?: boolean | undefined;
-        openDrawer?: (() => void) | undefined;
+        openDrawer?: ((nproperty: ModalSchemaProperty) => void) | undefined;
         closeDrawer?: (() => void) | undefined;
     };
     events: {
@@ -39,7 +38,7 @@ export type SchemaModalProps = typeof __propDef.props;
 export type SchemaModalEvents = typeof __propDef.events;
 export type SchemaModalSlots = typeof __propDef.slots;
 export default class SchemaModal extends SvelteComponentTyped<SchemaModalProps, SchemaModalEvents, SchemaModalSlots> {
-    get openDrawer(): () => void;
+    get openDrawer(): (nproperty: ModalSchemaProperty) => void;
     get closeDrawer(): () => void;
 }
 export {};

package/package/components/SchemaViewer.svelte

@@ -7,6 +7,12 @@ import TabContent from './common/tabs/TabContent.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { Badge } from './common';
 export let schema = emptySchema();
+function getProperties(schema) {
+    if (schema.properties) {
+        return Object.entries(schema.properties);
+    }
+    return [];
+}
 </script>
 
 <div class="w-full">
@@ -28,7 +34,7 @@ export let schema = emptySchema();
 									<th>required</th>
 								</tr>
 								<tbody slot="body">
-									{#each Object.entries(schema.properties) as [name, property] (name)}
+									{#each getProperties(schema) as [name, property] (name)}
 										<tr>
 											<td class="font-semibold pl-1">{name}</td>
 											<td

package/package/components/SchemaViewer.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        schema?: Schema | undefined;
+        schema?: Schema | undefined | any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ScriptBuilder.svelte

@@ -3,23 +3,26 @@ import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
 import { initialCode } from '../script_helpers';
-import { userStore, workerTags, workspaceStore } from '../stores';
+import { enterpriseLicense, userStore, workerTags, workspaceStore } from '../stores';
 import { emptySchema, encodeState, getModifierKey, setQueryWithoutLoad } from '../utils';
 import Path from './Path.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { Badge, Button, Drawer, Kbd } from './common';
-import { faSave } from '@fortawesome/free-solid-svg-icons';
+import { Alert, Badge, Button, Drawer, Kbd } from './common';
+import { faPlus, faSave } from '@fortawesome/free-solid-svg-icons';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
 import Tooltip from './Tooltip.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { Pen } from 'lucide-svelte';
+import { Pen, X } from 'lucide-svelte';
 import autosize from 'svelte-autosize';
 import { SCRIPT_SHOW_BASH, SCRIPT_SHOW_GO, SCRIPT_SHOW_PSQL, SCRIPT_CUSTOMISE_SHOW_KIND } from '../consts';
 import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { sendUserToast } from '../toast';
 import { isCloudHosted } from '../cloud';
+import Awareness from './Awareness.svelte';
+import { Icon } from 'svelte-awesome';
+import { fade } from 'svelte/transition';
 export let script;
 export let initialPath = '';
 export let template = 'script';
@@ -27,7 +30,10 @@ export let initialArgs = {};
 export let lockedLanguage = false;
 export let topHash = undefined;
 export let showMeta = false;
-let metadataOpen = showMeta || (initialPath == '' && $page.url.searchParams.get('state') == undefined);
+let metadataOpen = showMeta ||
+    (initialPath == '' &&
+        $page.url.searchParams.get('state') == undefined &&
+        $page.url.searchParams.get('collab') == undefined);
 let advancedOpen = false;
 let editor = undefined;
 let scriptEditor = undefined;
@@ -77,13 +83,25 @@ const scriptKindOptions = [
 let pathError = '';
 let loadingSave = false;
 let loadingDraft = false;
-$: setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }]);
+$: {
+    ;
+    ['collab', 'path'].forEach((x) => {
+        if ($page.url.searchParams.get(x)) {
+            $page.url.searchParams.delete(x);
+        }
+    });
+    setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }]);
+}
 if (script.content == '') {
     initContent(script.language, script.kind, template);
 }
 function initContent(language, kind, template) {
+    scriptEditor?.disableCollaboration();
     script.content = initialCode(language, kind, template);
     scriptEditor?.inferSchema(script.content, language);
+    if (script.content != editor?.getCode()) {
+        setCode(script.content);
+    }
 }
 async function editScript() {
     loadingSave = true;
@@ -109,7 +127,8 @@ async function editScript() {
                 is_template: script.is_template,
                 language: script.language,
                 kind: script.kind,
-                tag: script.tag
+                tag: script.tag,
+                envs: script.envs
             }
         });
         history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
@@ -145,7 +164,8 @@ async function saveDraft() {
                     language: script.language,
                     kind: script.kind,
                     tag: script.tag,
-                    draft_only: true
+                    draft_only: true,
+                    envs: script.envs
                 }
             });
         }
@@ -234,13 +254,9 @@ function onKeyDown(event) {
 						color={isPicked ? 'blue' : 'dark'}
 						btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						on:click={() => {
-							let lastTemplate = template
 							template = 'script'
 							initContent(lang, script.kind, template)
 							script.language = lang
-							if (lastTemplate != template) {
-								setCode(script.content)
-							}
 						}}
 						disabled={lockedLanguage}
 					>
@@ -256,13 +272,9 @@ function onKeyDown(event) {
 						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						disabled={lockedLanguage}
 						on:click={() => {
-							let lastTemplate = template
 							template = 'pgsql'
 							initContent(Script.language.DENO, script.kind, template)
 							script.language = Script.language.DENO
-							if (lastTemplate != template) {
-								setCode(script.content)
-							}
 						}}
 					>
 						<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
@@ -290,13 +302,9 @@ function onKeyDown(event) {
 							)
 							return
 						}
-						let lastTemplate = template
 						template = 'docker'
 						initContent(Script.language.BASH, script.kind, template)
 						script.language = Script.language.BASH
-						if (lastTemplate != template) {
-							setCode(script.content)
-						}
 					}}
 				>
 					<LanguageIcon lang="docker" /><span class="ml-2 py-2">Docker</span>
@@ -358,6 +366,57 @@ function onKeyDown(event) {
 					{/if}
 				{/if}
 			</div>
+			{#if !isCloudHosted()}
+				<h2 class="border-b pb-1 mt-10 mb-4"
+					>Custom env variables<Tooltip
+						>Additional static custom env variables to pass to the script.</Tooltip
+					></h2
+				>
+				<div class="w-full">
+					<span class="text-gray-600 text-xs pb-2">Format is: `{'<KEY>=<VALUE>'}`</span>
+					{#if Array.isArray(script.envs ?? [])}
+						{#each script.envs ?? [] as v, i}
+							<div class="flex max-w-md mt-1 w-full items-center">
+								<input type="text" bind:value={v} placeholder="<KEY>=<VALUE>" />
+								<button
+									transition:fade|local={{ duration: 50 }}
+									class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
+									aria-label="Clear"
+									on:click={() => {
+										script.envs && script.envs.splice(i, 1)
+										script.envs = script.envs
+									}}
+								>
+									<X size={14} />
+								</button>
+							</div>
+						{/each}
+						{#if script.envs && script.envs.length > 0}
+							<div class="pt-2" />
+							<Alert type="warning" title="Not passed in previews"
+								>Static envs variables are not passed in preview but solely on deployed scripts.</Alert
+							>
+						{/if}
+					{/if}
+				</div>
+			{/if}
+			<div class="flex mt-2">
+				<Button
+					variant="border"
+					color="dark"
+					size="xs"
+					btnClasses="mt-1"
+					on:click={() => {
+						if (script.envs == undefined || !Array.isArray(script.envs)) {
+							script.envs = []
+						}
+						script.envs = script.envs.concat('')
+					}}
+				>
+					<Icon data={faPlus} class="mr-2" />
+					Add item
+				</Button>
+			</div>
 		</DrawerContent>
 	</Drawer>
 
@@ -409,7 +468,21 @@ function onKeyDown(event) {
 						<LanguageIcon lang={script.language} />
 					</button>
 				</div>
+				{#if $enterpriseLicense && initialPath != ''}
+					<Awareness />
+				{/if}
+
 				<div class="flex flex-row gap-x-4">
+					<Button
+						color="light"
+						variant="border"
+						size="xs"
+						on:click={() => {
+							metadataOpen = true
+						}}
+					>
+						Metadata
+					</Button>
 					<Button
 						color="dark"
 						variant="border"
@@ -464,7 +537,6 @@ function onKeyDown(event) {
 									template = 'script'
 									script.kind = value
 									initContent(script.language, value, template)
-									setCode(script.content)
 								}}
 							>
 								{title}
@@ -487,6 +559,8 @@ function onKeyDown(event) {
 			</DrawerContent>
 		</Drawer>
 		<ScriptEditor
+			collabMode
+			edit={initialPath != ''}
 			on:format={() => {
 				saveDraft()
 			}}

package/package/components/ScriptEditor.svelte

@@ -1,7 +1,8 @@
-<script>import { CompletedJob, Job, JobService } from '../gen';
-import { userStore, workspaceStore } from '../stores';
-import { emptySchema, getModifierKey } from '../utils';
-import { faPlay } from '@fortawesome/free-solid-svg-icons';
+<script>import { BROWSER } from 'esm-env';
+import { CompletedJob, Job, JobService, SettingsService } from '../gen';
+import { enterpriseLicense, userStore, workspaceStore } from '../stores';
+import { copyToClipboard, emptySchema, getModifierKey, sendUserToast } from '../utils';
+import { faClipboard, faPlay } from '@fortawesome/free-solid-svg-icons';
 import Editor from './Editor.svelte';
 import { inferArgs } from '../infer';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -10,11 +11,15 @@ import LogPanel from './scriptEditor/LogPanel.svelte';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
-import { createEventDispatcher, onMount } from 'svelte';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import { Button, Kbd } from './common';
 import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
+import * as Y from 'yjs';
 import { scriptLangToEditorLang } from '../scripts';
+import { WebsocketProvider } from 'y-websocket';
+import Modal from './common/modal/Modal.svelte';
+import { Icon } from 'svelte-awesome';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -26,6 +31,8 @@ export let initialArgs = {};
 export let fixedOverflowWidgets = true;
 export let noSyncFromGithub = false;
 export let editor = undefined;
+export let collabMode = false;
+export let edit = true;
 let websocketAlive = {
     pyright: false,
     black: false,
@@ -44,6 +51,18 @@ let testIsLoading = false;
 let testJob;
 let pastPreviews = [];
 let validCode = true;
+let wsProvider = undefined;
+let yContent = undefined;
+let peers = [];
+let showCollabPopup = false;
+const url = new URL(window.location.toString());
+let initialCollab = /true|1/i.test(url.searchParams.get('collab') ?? '0');
+if (initialCollab) {
+    setCollaborationMode();
+    url.searchParams.delete('collab');
+    url.searchParams.delete('path');
+    history.replaceState(null, '', url);
+}
 function onKeyDown(event) {
     if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
         event.preventDefault();
@@ -90,10 +109,74 @@ onMount(() => {
     inferSchema(code);
     loadPastTests();
 });
+export async function setCollaborationMode() {
+    if (!$enterpriseLicense) {
+        $enterpriseLicense = await SettingsService.getLicenseId();
+    }
+    if (!$enterpriseLicense) {
+        sendUserToast(`Multiplayer is an enterprise feature`, true, [
+            {
+                label: 'Upgrade',
+                callback: () => {
+                    window.open('https://www.windmill.dev/pricing', '_blank');
+                }
+            }
+        ]);
+        return;
+    }
+    const ydoc = new Y.Doc();
+    if (wsProvider) {
+        wsProvider.destroy();
+    }
+    let yContentInit = ydoc.getText('content');
+    const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws';
+    wsProvider = new WebsocketProvider(`${wsProtocol}://${window.location.host}/ws_mp/`, $workspaceStore + '/' + path ?? 'no-room-name', ydoc, { connect: false });
+    wsProvider.on('sync', (isSynced) => {
+        if (isSynced && yContentInit?.toJSON() == '') {
+            showCollabPopup = true;
+            yContentInit?.insert(0, code);
+        }
+        yContent = yContentInit;
+    });
+    wsProvider.on('connection-error', (WSErrorEvent) => {
+        console.error(WSErrorEvent);
+        sendUserToast('Multiplayer server connection had an error', true);
+    });
+    wsProvider.connect();
+    const awareness = wsProvider.awareness;
+    awareness.setLocalStateField('user', {
+        name: $userStore?.username
+    });
+    function setPeers() {
+        peers = Array.from(awareness.getStates().values()).map((x) => x.user);
+    }
+    setPeers();
+    // You can observe when a user updates their awareness information
+    awareness.on('change', (changes) => {
+        setPeers();
+    });
+}
+export function disableCollaboration() {
+    if (!wsProvider?.shouldConnect)
+        return;
+    peers = [];
+    console.log('collab mode disabled');
+    wsProvider?.disconnect();
+    wsProvider.destroy();
+    wsProvider = undefined;
+}
+onDestroy(() => {
+    disableCollaboration();
+});
 const dispatch = createEventDispatcher();
 function asKind(str) {
     return str;
 }
+function collabUrl() {
+    let url = new URL(window.location.toString());
+    url.search = '';
+    return `${url}?collab=1` + (edit ? '' : `&path=${path}`);
+}
 </script>
 
 <TestJobLoader
@@ -105,14 +188,34 @@ function asKind(str) {
 
 <svelte:window on:keydown={onKeyDown} />
 
+<Modal title="Invite others" bind:open={showCollabPopup}>
+	<div>Have others join by sharing the following url:</div>
+	<div class="flex gap-2 pr-4">
+		<input type="text" disabled value={collabUrl()} />
+		<button on:click={() => copyToClipboard(collabUrl())} class="text-gray-700 ml-2">
+			<Icon data={faClipboard} />
+		</button>
+	</div>
+</Modal>
 <div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
+			on:toggleCollabMode={() => {
+				if (wsProvider?.shouldConnect) {
+					disableCollaboration()
+				} else {
+					setCollaborationMode()
+				}
+			}}
+			collabLive={wsProvider?.shouldConnect}
+			{collabMode}
 			{validCode}
 			iconOnly={width < EDITOR_BAR_WIDTH_THRESHOLD}
+			on:collabPopup={() => (showCollabPopup = true)}
 			{editor}
 			{lang}
 			{websocketAlive}
+			collabUsers={peers}
 			kind={asKind(kind)}
 		/>
 		{#if !noSyncFromGithub}
@@ -139,10 +242,13 @@ function asKind(str) {
 			<div class="pl-2 h-full !overflow-visible">
 				{#key lang}
 					<Editor
+						folding
 						{path}
 						bind:code
 						bind:websocketAlive
 						bind:this={editor}
+						{yContent}
+						awareness={wsProvider?.awareness}
 						on:change={(e) => {
 							inferSchema(e.detail)
 						}}
@@ -184,7 +290,9 @@ function asKind(str) {
 					{:else}
 						<Button
 							color="dark"
-							on:click={runTest}
+							on:click={() => {
+								runTest()
+							}}
 							btnClasses="w-full"
 							size="xs"
 							startIcon={{

package/package/components/ScriptEditor.svelte.d.ts

@@ -4,7 +4,7 @@ import Editor from './Editor.svelte';
 import type { Preview } from '../gen/models/Preview';
 declare const __propDef: {
     props: {
-        schema?: Schema | undefined;
+        schema?: Schema | any;
         code: string;
         path: string | undefined;
         lang: Preview.language;
@@ -14,7 +14,11 @@ declare const __propDef: {
         fixedOverflowWidgets?: boolean | undefined;
         noSyncFromGithub?: boolean | undefined;
         editor?: Editor | undefined;
+        collabMode?: boolean | undefined;
+        edit?: boolean | undefined;
         inferSchema?: ((code: string, nlang?: 'go' | 'bash' | 'python3' | 'deno') => Promise<void>) | undefined;
+        setCollaborationMode?: (() => Promise<void>) | undefined;
+        disableCollaboration?: (() => void) | undefined;
     };
     events: {
         format: CustomEvent<any>;
@@ -28,5 +32,7 @@ export type ScriptEditorEvents = typeof __propDef.events;
 export type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponentTyped<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
     get inferSchema(): (code: string, nlang?: "deno" | "python3" | "go" | "bash" | undefined) => Promise<void>;
+    get setCollaborationMode(): () => Promise<void>;
+    get disableCollaboration(): () => void;
 }
 export {};

package/package/components/ScriptSchema.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        schema: Schema;
+        schema: Schema | any;
         setSchema?: ((newSchema: Schema) => void) | undefined;
     };
     events: {

package/package/components/TemplateEditor.svelte

@@ -336,6 +336,7 @@ let model;
 const { componentControl, selectedComponent } = getContext('AppViewerContext') || { componentControl: writable({}), selectedComponent: writable([]) };
 if ($selectedComponent) {
     $componentControl[$selectedComponent[0]] = {
+        ...$componentControl[$selectedComponent[0]],
         setCode: (value) => {
             code = value;
             setCode(value);

package/package/components/Toggle.svelte

@@ -33,6 +33,7 @@ const dispatch = createEventDispatcher();
 				{options?.left}
 			</span>
 		{/if}
+
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div class="relative" on:click|stopPropagation>
 			<input
@@ -40,7 +41,6 @@ const dispatch = createEventDispatcher();
 				on:click
 				{disabled}
 				type="checkbox"
-				value={false}
 				{id}
 				class="sr-only peer"
 				bind:checked

package/package/components/Urlize.svelte

@@ -0,0 +1,19 @@
+<script>export let text;
+const parseURL = (input) => {
+    if (input.startsWith('http://') || input.startsWith('https://')) {
+        return `<a href="${input}" target="_blank" rel="noopener noreferrer">${input}</a>`;
+    }
+    else {
+        return input;
+    }
+};
+const parseInput = (input) => {
+    if (!input)
+        return '';
+    const words = input.split(' ');
+    return words.map((word) => parseURL(word)).join(' ');
+};
+$: parsed = text ? text.split('\n').map(parseInput).join('\n') : '';
+</script>
+
+{@html parsed}

package/package/components/Urlize.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        text: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UrlizeProps = typeof __propDef.props;
+export type UrlizeEvents = typeof __propDef.events;
+export type UrlizeSlots = typeof __propDef.slots;
+export default class Urlize extends SvelteComponentTyped<UrlizeProps, UrlizeEvents, UrlizeSlots> {
+}
+export {};