windmill-components 1.89.0 → 1.103.0

package/package/cloud.d.ts

@@ -0,0 +1 @@
+export declare function isCloudHosted(): boolean;

package/package/cloud.js

@@ -0,0 +1,42 @@
+import { BROWSER } from 'esm-env';
+import { page } from '$app/stores';
+import { get } from 'svelte/store';
+import { premiumStore, userStore, workspaceStore } from './stores';
+import { getUserExt } from './user';
+import { WorkspaceService } from './gen';
+export function isCloudHosted() {
+    return get(page)?.url?.hostname == 'app.windmill.dev';
+}
+if (BROWSER) {
+    workspaceStore.subscribe(async (workspace) => {
+        if (workspace) {
+            try {
+                localStorage.setItem('workspace', String(workspace));
+            }
+            catch (e) {
+                console.error('Could not persist workspace to local storage', e);
+            }
+            const user = await getUserExt(workspace);
+            userStore.set(user);
+            if (isCloudHosted() && user?.is_admin) {
+                premiumStore.set(await WorkspaceService.getPremiumInfo({ workspace }));
+            }
+        }
+        else {
+            userStore.set(undefined);
+        }
+    });
+    setInterval(async () => {
+        try {
+            const workspace = get(workspaceStore);
+            const user = get(userStore);
+            if (workspace && user && !user.is_super_admin && !user.is_admin) {
+                userStore.set(await getUserExt(workspace));
+                console.log('refreshed user');
+            }
+        }
+        catch (e) {
+            console.error('Could not refresh user', e);
+        }
+    }, 30000);
+}

package/package/common.d.ts

@@ -2,9 +2,17 @@ import type { Script } from './gen';
 export type OwnerKind = 'group' | 'user' | 'folder';
 export type ActionKind = 'Create' | 'Update' | 'Delete' | 'Execute';
 export type SupportedLanguage = Script.language;
+export interface PropertyDisplayInfo {
+    property: SchemaProperty;
+    name: string;
+    isRequired: boolean;
+    path: string[];
+    index: number;
+    propertiesNumber: number;
+}
 export interface SchemaProperty {
     type: string | undefined;
-    description: string;
+    description?: string;
     pattern?: string;
     default?: any;
     enum?: string[];
@@ -17,6 +25,7 @@ export interface SchemaProperty {
     properties?: {
         [name: string]: SchemaProperty;
     };
+    required?: string[];
 }
 export type Schema = {
     $schema: string | undefined;

package/package/components/AddUser.svelte

@@ -1,9 +1,9 @@
-<script>import { sendUserToast } from '../utils';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import { WorkspaceService } from '../gen';
 import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import Tooltip from './Tooltip.svelte';
+import { sendUserToast } from '../toast';
 const dispatch = createEventDispatcher();
 let email;
 let username;

package/package/components/ApiConnectForm.svelte

@@ -1,11 +1,12 @@
 <script>import { JobService, Preview, ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { emptySchema, emptyString, sendUserToast } from '../utils';
+import { emptySchema, emptyString } from '../utils';
 import { Loader2 } from 'lucide-svelte';
 import Button from './common/button/Button.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
+import { sendUserToast } from '../toast';
 export let resource_type;
 export let args = {};
 export let password;

package/package/components/AppConnect.svelte

@@ -55,8 +55,7 @@ const apiTokenApps = {
 import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import IconedResourceType from './IconedResourceType.svelte';
 import { OauthService, ResourceService, VariableService } from '../gen';
-import { page } from '$app/stores';
-import { emptyString, sendUserToast, truncateRev } from '../utils';
+import { emptyString, truncateRev } from '../utils';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import Path from './Path.svelte';
@@ -66,6 +65,7 @@ import ApiConnectForm from './ApiConnectForm.svelte';
 import SearchItems from './SearchItems.svelte';
 import autosize from 'svelte-autosize';
 import WhitelistIp from './WhitelistIp.svelte';
+import { sendUserToast } from '../toast';
 export let newPageOAuth = false;
 let filter = '';
 let manual = false;
@@ -143,7 +143,7 @@ async function next() {
         args = {};
     }
     else if (step == 1 && !manual) {
-        const url = new URL(`/api/oauth/connect/${resource_type}`, $page.url.origin);
+        const url = new URL(`/api/oauth/connect/${resource_type}`, window.location.origin);
         url.searchParams.append('scopes', scopes.join('+'));
         if (extra_params.length > 0) {
             extra_params.forEach(([key, value]) => url.searchParams.append(key, value));

package/package/components/ArgInfo.svelte

@@ -27,7 +27,9 @@ async function getResource(path) {
 	</DrawerContent>
 </Drawer>
 
-{#if value == '<function call>'}
+{#if value == undefined || value == null}
+	<span class="text-gray-600">null</span>
+{:else if value == '<function call>'}
 	{'<function call>'}<Tooltip
 		>The arg was none and the default argument of the script is a function call, hence the actual
 		value used for this arg was the output of the script's function call for this arg</Tooltip

package/package/components/ArgInput.svelte

@@ -42,6 +42,8 @@ export let variableEditor = undefined;
 export let itemPicker = undefined;
 export let noMargin = false;
 export let extra = {};
+export let minW = true;
+export let prettifyHeader = false;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: validateInput(pattern, value);
@@ -117,6 +119,12 @@ function testRegex(pattern, value) {
         return false;
     }
 }
+function onKeyDown(e) {
+    if ((e.ctrlKey || e.metaKey) && e.key == 'Enter') {
+        return;
+    }
+    e.stopPropagation();
+}
 $: {
     if (value == undefined || value == null) {
         value = defaultValue;
@@ -142,10 +150,10 @@ let itemsLimit = 50;
 </script>
 
 <!-- svelte-ignore a11y-autofocus -->
-<div class="flex flex-col w-full min-w-[250px]">
+<div class="flex flex-col w-full {minW ? 'min-w-[250px]' : ''}">
 	<div>
 		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
+			<FieldHeader prettify={prettifyHeader} {label} {required} {type} {contentEncoding} {format} />
 		{/if}
 		{#if editableSchema}
 			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
@@ -169,7 +177,7 @@ let itemsLimit = 50;
 								use:autosize
 								rows="1"
 								bind:value={description}
-								on:keydown|stopPropagation
+								on:keydown={onKeyDown}
 								placeholder="Field description"
 							/>
 							{#if type == 'string' && format != 'date-time'}
@@ -385,7 +393,7 @@ let itemsLimit = 50;
 									dispatch('focus')
 								}}
 								use:autosize
-								on:keydown|stopPropagation
+								on:keydown={onKeyDown}
 								type="text"
 								{disabled}
 								class="col-span-10 {valid
@@ -403,6 +411,7 @@ let itemsLimit = 50;
 											pickForField = label
 											itemPicker?.openDrawer?.()
 										}}
+										title="Use Variable"
 									>
 										<Icon data={faDollarSign} />
 									</div>

package/package/components/ArgInput.svelte.d.ts

@@ -34,12 +34,13 @@ declare const __propDef: {
         itemPicker?: ItemPicker | undefined;
         noMargin?: boolean | undefined;
         extra?: Record<string, any> | undefined;
+        minW?: boolean | undefined;
+        prettifyHeader?: boolean | undefined;
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;
     };
     events: {
-        keydown: KeyboardEvent;
         focus: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/CenteredModal.svelte

@@ -11,30 +11,34 @@ onMount(async () => {
 </script>
 
 <div class="center-center min-h-screen p-4 relative bg-gray-50">
-	<div
-		class="border rounded-md shadow-md bg-white w-full max-w-[640px]
+	<div class="flex flex-col gap-2 items-center w-full">
+		{#if !disableLogo}
+			<div class="hidden lg:block">
+				<div>
+					<WindmillIcon height="100px" width="100px" spin="slow" />
+				</div>
+				<h2 class="text-center pt-2 text-gray-800">Windmill</h2>
+			</div>
+		{/if}
+
+		<div
+			class="border rounded-md shadow-md bg-white w-full max-w-[640px]
 	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
-	>
-		<div class="mb-10">
-			<h1 class="text-center">
-				{title}
-			</h1>
-			{#if subtitle}
-				<p class="text-sm text-center text-gray-600 mt-2">
-					{subtitle}
-				</p>
-			{/if}
-		</div>
-		<slot />
-	</div>
-	{#if !disableLogo}
-		<div class="hidden lg:block absolute top-10 right-50">
-			<div>
-				<WindmillIcon height="100px" width="100px" spin="slow" />
+		>
+			<div class="mb-10">
+				<h1 class="text-center">
+					{title}
+				</h1>
+				{#if subtitle}
+					<p class="text-sm text-center text-gray-600 mt-2">
+						{subtitle}
+					</p>
+				{/if}
 			</div>
-			<h2 class="text-center pt-2 text-gray-800">Windmill</h2>
+			<slot />
 		</div>
-	{/if}
+	</div>
+
 	<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
 		<span class="font-mono">{version}</span>
 	</div>

package/package/components/ChevronButton.svelte

@@ -6,7 +6,7 @@ export let viewOptions = false;
 
 <button
 	type="submit"
-	class="mr-6 text-sm underline text-gray-700 inline-flex  items-center"
+	class="mr-6 text-sm underline text-gray-700 inline-flex items-center"
 	on:click={() => {
 		viewOptions = !viewOptions
 	}}

package/package/components/CliHelpBox.svelte

@@ -13,25 +13,25 @@ $: url = `${$page.url.protocol}//${$page.url.hostname}/`;
 
 <div class="text-sm mt-2 flex">
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<span
-		class="underline mr-4"
+	<button
+		class="underline mr-4 text-gray-600"
 		on:click={() => {
 			opened = !opened
 		}}
 	>
 		CLI quick setup
 		<Icon class="ml-2" data={opened ? faChevronUp : faChevronDown} scale={0.7} />
-	</span>
+	</button>
 </div>
 
 {#if opened}
 	<div
-		transition:slide|local
-		class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
+		transition:slide|local={{ duration: 100 }}
+		class="border border-gray-200 rounded-md p-4 mt-2 text-sm text-gray-600"
 		role="alert"
 		id="dynamic-input-help-box"
 	>
-		<ul class="pl-0 list-decimal list-inside">
+		<ul class="pl-0 pt-2 list-decimal list-inside">
 			<li
 				>Install the latest wmill CLI from deno.land: <InlineCodeCopy
 					content={'deno install --unstable -A https://deno.land/x/wmill/main.ts'}

package/package/components/CollapseLink.svelte

@@ -1,12 +1,22 @@
 <script>import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
+import { Button } from './common';
+import { slide } from 'svelte/transition';
 export let open = false;
 export let text;
+export let small = false;
 </script>
 
-<button class="text-gray-600 underline" on:click={() => (open = !open)}>
-	{text}&nbsp;<Icon data={open ? faChevronUp : faChevronDown} scale={0.5} />
-</button>
+<div class="flex">
+	<Button
+		variant="border"
+		color="light"
+		btnClasses="text-gray-600 {small ? 'text-xs' : ''} "
+		on:click={() => (open = !open)}
+	>
+		{text}&nbsp;<Icon data={open ? faChevronUp : faChevronDown} scale={0.5} />
+	</Button>
+</div>
 {#if open}
-	<div><slot /></div>
+	<div transition:slide|local={{ duration: 100 }}><slot /></div>
 {/if}

package/package/components/CollapseLink.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         open?: boolean | undefined;
         text: string;
+        small?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/CronInput.svelte

@@ -142,7 +142,7 @@ $: dateFormatter = new Intl.DateTimeFormat('en-GB', {
 }).format;
 </script>
 
-<div class="w-full flex space-x-16 p-4">
+<div class="w-full flex space-x-16">
 	<div class="w-full flex flex-col space-y-2">
 		<div class="w-full flex flex-col gap-1">
 			<small class="font-bold">Cron</small>
@@ -300,8 +300,8 @@ $: dateFormatter = new Intl.DateTimeFormat('en-GB', {
 					</div>
 
 					<div class="mt-4">
-						<Button variant="border" color="dark" size="xs" on:click={() => (schedule = nschedule)}
-							>Set Schedule</Button
+						<Button color="dark" size="xs" on:click={() => (schedule = nschedule)}
+							>Set Cron Schedule</Button
 						>
 					</div>
 				</CollapseLink>
@@ -316,7 +316,7 @@ $: dateFormatter = new Intl.DateTimeFormat('en-GB', {
 			<small>Estimated upcoming events ({timezone})</small>
 			<div class="flex flex-col rounded-md p-4 border text-gray-600">
 				{#each preview as date}
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center space-x-2 text-sm">
 						<span>{dateFormatter(new Date(date))}</span>
 					</div>
 				{/each}

package/package/components/DisplayResult.svelte

@@ -6,6 +6,7 @@ import { Button, Drawer, DrawerContent } from './common';
 import autosize from 'svelte-autosize';
 import { ClipboardCopy } from 'lucide-svelte';
 import Portal from 'svelte-portal';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -60,7 +61,20 @@ function inferResultKind(result) {
                 return 'error';
             }
             else if (keys.length === 2 && keys.includes('file') && keys.includes('filename')) {
-                return 'filename';
+                return 'file';
+            }
+            else if (keys.length === 3 &&
+                keys.includes('file') &&
+                keys.includes('filename') &&
+                keys.includes('autodownload')) {
+                if (result.autodownload) {
+                    const a = document.createElement('a');
+                    a.href = 'data:application/octet-stream;base64,' + result.file;
+                    a.download = result.filename;
+                    a.click();
+                    console.log('autodownload', result.file, result.filename);
+                }
+                return 'file';
             }
             else if (keys.length == 3 &&
                 keys.includes('resume') &&
@@ -174,19 +188,15 @@ let jsonViewer;
 			</div>
 		{:else if !forceJson && resultKind == 'file'}
 			<div
-				><a download="windmill.file" href="data:application/octet-stream;base64,{result.file}"
-					>Download</a
+				><a
+					download={result.filename ?? 'windmill.file'}
+					href="data:application/octet-stream;base64,{result.file}">Download</a
 				>
 			</div>
-		{:else if !forceJson && resultKind === 'filename'}
-			<div>
-				<a download={result.filename} href="data:application/octet-stream;base64,{result.file}">
-					Download
-				</a>
-			</div>
 		{:else if !forceJson && resultKind == 'error'}<div>
 				<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
-					>{result.error.name}: {result.error.message}</span
+					>{#if result.error.name || result.error.message}{result.error.name}: {result.error
+							.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span
 				>
 				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
 			</div>
@@ -218,10 +228,14 @@ let jsonViewer;
 		{:else}
 			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			{#if jsonStr.length > 10000}
-				JSON too large. <a
-					download="{filename ?? 'result'}.json"
-					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
-				>
+				<div class="text-sm mb-2 text-gray-600">
+					<a
+						download="{filename ?? 'result'}.json"
+						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+					>
+					JSON is too large to be displayed in full.
+				</div>
+				<ObjectViewer json={result} />
 			{:else}
 				<Highlight language={json} code={jsonStr} />
 			{/if}
@@ -244,7 +258,18 @@ let jsonViewer;
 						<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
 					</Button>
 				</svelte:fragment>
-				<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+				{@const str = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
+				{#if str.length > 100000}
+					<div class="text-sm mb-2 text-gray-600">
+						<a
+							download="{filename ?? 'result'}.json"
+							href="data:text/json;charset=utf-8,{encodeURIComponent(str)}">Download</a
+						>
+						JSON is too large to be displayed in full.
+					</div>
+				{:else}
+					<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+				{/if}
 			</DrawerContent>
 		</Drawer>
 	</Portal>

package/package/components/DraftBadge.svelte

@@ -0,0 +1,19 @@
+<script>import Popover from './Popover.svelte';
+import { Badge } from './common';
+export let has_draft = false;
+export let draft_only = false;
+</script>
+
+{#if has_draft}
+	{#if draft_only}
+		<Popover notClickable>
+			<svelte:fragment slot="text">Never deployed and is only a draft</svelte:fragment>
+			<Badge small color="indigo" baseClass="border border-indigo-200">Draft only</Badge>
+		</Popover>
+	{:else}
+		<Popover notClickable>
+			<svelte:fragment slot="text">Is deployed and has a draft</svelte:fragment>
+			<Badge color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
+		</Popover>
+	{/if}
+{/if}

package/package/components/DraftBadge.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        has_draft?: boolean | undefined;
+        draft_only?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DraftBadgeProps = typeof __propDef.props;
+export type DraftBadgeEvents = typeof __propDef.events;
+export type DraftBadgeSlots = typeof __propDef.slots;
+export default class DraftBadge extends SvelteComponentTyped<DraftBadgeProps, DraftBadgeEvents, DraftBadgeSlots> {
+}
+export {};

package/package/components/Dropdown.svelte

@@ -2,7 +2,6 @@
 import Icon from 'svelte-awesome';
 import { MoreVertical } from 'lucide-svelte';
 import { Button, Menu } from './common';
-import { goto } from '$app/navigation';
 import { twMerge } from 'tailwind-merge';
 export let dropdownItems = [];
 export let name = undefined;
@@ -71,7 +70,6 @@ function computeDropdowns() {
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
 					class="block w-full px-4 font-semibold text-left py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"