windmill-components 1.291.4 → 1.305.0

package/package/autosize.d.ts

@@ -0,0 +1,4 @@
+export declare const action: (node: any) => {
+    destroy(): void;
+};
+export default action;

package/package/autosize.js

@@ -0,0 +1,76 @@
+export const action = (node) => {
+    /* Constants */
+    const update = new Event('update');
+    /* Functions */
+    const init = () => {
+        addStyles();
+        observeElement();
+        addEventListeners();
+        setInitialHeight();
+    };
+    const dispatchUpdateEvent = () => {
+        node.dispatchEvent(update);
+    };
+    const setInitialHeight = () => {
+        let height = 0;
+        if (node.value) {
+            height = node.scrollHeight;
+        }
+        else {
+            if (node.placeholder) {
+                node.value = node.placeholder;
+                height = node.scrollHeight;
+                node.value = '';
+            }
+            else {
+                node.value = '|';
+                node.style.height = '0px';
+                height = node.scrollHeight;
+                node.value = '';
+            }
+        }
+        node.style.height = height + 'px';
+    };
+    const setHeight = () => {
+        node.style.height = '0px';
+        node.style.height = Math.max(node.scrollHeight, 40) + 5 + 'px';
+    };
+    const addStyles = () => {
+        node.style.boxSizing = 'border-box';
+    };
+    const observeElement = () => {
+        let elementPrototype = Object.getPrototypeOf(node);
+        let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, 'value');
+        Object.defineProperty(node, 'value', {
+            get: function () {
+                return descriptor?.get?.apply(this, arguments);
+            },
+            set: function () {
+                descriptor?.set?.apply(this, arguments);
+                dispatchUpdateEvent();
+            }
+        });
+    };
+    const addEventListeners = () => {
+        node.addEventListener('input', (e) => {
+            dispatchUpdateEvent();
+        });
+        node.addEventListener('update', setHeight);
+    };
+    const removeEventListeners = () => {
+        node.removeEventListener('input', dispatchUpdateEvent);
+        node.removeEventListener('update', setHeight);
+    };
+    if (node.tagName.toLowerCase() !== 'textarea') {
+        throw new Error('svelte-textarea-auto-height can only be used on textarea elements.');
+    }
+    else {
+        init();
+        return {
+            destroy() {
+                removeEventListeners();
+            }
+        };
+    }
+};
+export default action;

package/package/components/AppConnect.svelte

@@ -61,12 +61,16 @@ import { Button, Drawer, Skeleton } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import ApiConnectForm from './ApiConnectForm.svelte';
 import SearchItems from './SearchItems.svelte';
-import autosize from 'svelte-autosize';
 import WhitelistIp from './WhitelistIp.svelte';
 import { sendUserToast } from '../toast';
 import OauthScopes from './OauthScopes.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import Markdown from 'svelte-exmarkdown';
+import autosize from '../autosize';
+import Required from './Required.svelte';
+import Toggle from './Toggle.svelte';
+import { Pen } from 'lucide-svelte';
+import GfmMarkdown from './GfmMarkdown.svelte';
 export let newPageOAuth = false;
 const nativeLanguagesCategory = [
     'postgresql',
@@ -83,6 +87,7 @@ let valueToken = undefined;
 let connects = undefined;
 let connectsManual = undefined;
 let args = {};
+let renderDescription = true;
 $: linkedSecretCandidates = apiTokenApps[resourceType]?.linkedSecret
     ? [apiTokenApps[resourceType]?.linkedSecret]
     : args != undefined
@@ -468,7 +473,7 @@ let darkMode = false;
 					</div>
 				{/if}
 			{:else if !emptyString(resourceTypeInfo?.description)}
-				<h3 class="mt-6 mb-2">{resourceTypeInfo?.name} description</h3>
+				<h4 class="mt-8 mb-2">{resourceTypeInfo?.name} description</h4>
 				<div class="text-sm">
 					<Markdown md={urlize(resourceTypeInfo?.description ?? '', 'md')} />
 				</div>
@@ -477,8 +482,25 @@ let darkMode = false;
 				<WhitelistIp />
 			{/if}
 
-			<h2 class="mt-4">Value</h2>
-			<div class="mt-4">
+			<h4 class="mt-8 inline-flex items-center gap-4"
+				>Resource description <Required required={false} />
+				<div class="flex gap-1 items-center">
+					<Toggle size="xs" bind:checked={renderDescription} />
+					<Pen size={14} />
+				</div>
+			</h4>
+			{#if renderDescription}
+				<div>
+					<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
+					<textarea use:autosize bind:value={description} placeholder={'Resource description'} />
+				</div>
+			{:else if description == undefined || description == ''}
+				<div class="text-sm text-tertiary">No description provided</div>
+			{:else}
+				<div class="mt-2" />
+				<GfmMarkdown md={description} />
+			{/if}
+			<div class="mt-12">
 				{#key resourceTypeInfo}
 					<ApiConnectForm
 						{linkedSecret}
@@ -490,9 +512,6 @@ let darkMode = false;
 					/>
 				{/key}
 			</div>
-
-			<h2 class="mt-4 mb-2">Description</h2>
-			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
 		{:else}
 			<Path
 				initialPath=""

package/package/components/ArgInput.svelte

@@ -1,7 +1,6 @@
 <script>import { setInputCat as computeInputCat, emptyString } from '../utils';
 import { ChevronDown, DollarSign, Pipette, Plus, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-import autosize from 'svelte-autosize';
 import Multiselect from 'svelte-multiselect';
 import { fade } from 'svelte/transition';
 import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
@@ -24,6 +23,7 @@ import DateTimeInput from './DateTimeInput.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte';
 import FileUpload from './common/fileUpload/FileUpload.svelte';
+import autosize from '../autosize';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -62,6 +62,7 @@ let ignoreValueUndefined = false;
 let error = '';
 let s3FilePicker;
 let s3FileUploadRawMode;
+let isListJson = false;
 let el = undefined;
 export let editor = undefined;
 let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
@@ -101,7 +102,7 @@ function handleDefaultValueChange() {
 }
 function evalValueToRaw() {
     rawValue =
-        inputCat === 'object' || inputCat === 'resource-object'
+        inputCat === 'object' || inputCat === 'resource-object' || (inputCat == 'list' && !isListJson)
             ? JSON.stringify(value, null, 2)
             : undefined;
 }
@@ -276,7 +277,6 @@ function changePosition(i, up) {
 			{/if}
 			<span class="text-2xs font-semibold">Preview:</span>
 		{/if}
-
 		{#if description}
 			<div class="text-xs italic pb-1 text-secondary">
 				<pre class="font-main">{description}</pre>
@@ -343,107 +343,121 @@ function changePosition(i, up) {
 				{#if type == 'boolean' && value == undefined}
 					<span>&nbsp; Not set</span>
 				{/if}
-			{:else if inputCat == 'list'}
-				<div class="w-full">
-					{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}
-						<div class="items-start">
-							<Multiselect
-								ulOptionsClass={'p-2 !bg-surface-secondary'}
-								{disabled}
-								bind:selected={value}
-								options={itemsType?.multiselect ?? []}
-								selectedOptionsDraggable={true}
-							/>
-						</div>
-					{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
-						<div class="items-start">
-							<Multiselect
-								ulOptionsClass={'p-2 !bg-surface-secondary'}
-								{disabled}
-								bind:selected={value}
-								options={itemsType?.enum ?? []}
-								selectedOptionsDraggable={true}
-							/>
-						</div>
-					{:else}
-						<div class="w-full">
-							{#key redraw}
-								{#if Array.isArray(value)}
-									{#each value ?? [] as v, i}
-										{#if i < itemsLimit}
-											<div class="flex max-w-md mt-1 w-full items-center">
-												{#if itemsType?.type == 'number'}
-													<input type="number" bind:value={v} id="arg-input-number-array" />
-												{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-													<input
-														type="file"
-														class="my-6"
-														on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-														multiple={false}
-													/>
-												{:else if itemsType?.type == 'object'}
-													<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
-												{:else if Array.isArray(itemsType?.enum)}
-													<ArgEnum
-														required
-														create={extra['disableCreate'] != true}
-														on:focus={() => {
-															dispatch('focus')
-														}}
-														on:blur={(e) => {
-															dispatch('blur')
+			{:else if inputCat == 'list' && !isListJson}
+				<div class="w-full flex gap-4">
+					<div class="w-full">
+						{#if Array.isArray(itemsType?.multiselect) && Array.isArray(value)}
+							<div class="items-start">
+								<Multiselect
+									ulOptionsClass={'p-2 !bg-surface-secondary'}
+									{disabled}
+									bind:selected={value}
+									options={itemsType?.multiselect ?? []}
+									selectedOptionsDraggable={true}
+								/>
+							</div>
+						{:else if itemsType?.enum != undefined && Array.isArray(itemsType?.enum) && Array.isArray(value)}
+							<div class="items-start">
+								<Multiselect
+									ulOptionsClass={'p-2 !bg-surface-secondary'}
+									{disabled}
+									bind:selected={value}
+									options={itemsType?.enum ?? []}
+									selectedOptionsDraggable={true}
+								/>
+							</div>
+						{:else}
+							<div class="w-full">
+								{#key redraw}
+									{#if Array.isArray(value)}
+										{#each value ?? [] as v, i}
+											{#if i < itemsLimit}
+												<div class="flex max-w-md mt-1 w-full items-center">
+													{#if itemsType?.type == 'number'}
+														<input type="number" bind:value={v} id="arg-input-number-array" />
+													{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+														<input
+															type="file"
+															class="my-6"
+															on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+															multiple={false}
+														/>
+													{:else if itemsType?.type == 'object'}
+														<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+													{:else if Array.isArray(itemsType?.enum)}
+														<ArgEnum
+															required
+															create={extra['disableCreate'] != true}
+															on:focus={() => {
+																dispatch('focus')
+															}}
+															on:blur={(e) => {
+																dispatch('blur')
+															}}
+															{defaultValue}
+															{valid}
+															{disabled}
+															{autofocus}
+															bind:value={v}
+															enum_={itemsType?.enum ?? []}
+														/>
+													{:else}
+														<input type="text" bind:value={v} id="arg-input-array" />
+													{/if}
+													<button
+														transition:fade|local={{ duration: 100 }}
+														class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
+														aria-label="Clear"
+														on:click={() => {
+															value.splice(i, 1)
+															redraw += 1
 														}}
-														{defaultValue}
-														{valid}
-														{disabled}
-														{autofocus}
-														bind:value={v}
-														enum_={itemsType?.enum ?? []}
-													/>
-												{:else}
-													<input type="text" bind:value={v} id="arg-input-array" />
-												{/if}
-												<button
-													transition:fade|local={{ duration: 100 }}
-													class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
-													aria-label="Clear"
-													on:click={() => {
-														value.splice(i, 1)
-														redraw += 1
-													}}
-												>
-													<X size={14} />
-												</button>
-											</div>
+													>
+														<X size={14} />
+													</button>
+												</div>
+											{/if}
+										{/each}
+										{#if value.length > itemsLimit}
+											<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
+												>{itemsLimit}/{value.length}: Load 50 more...</button
+											>
 										{/if}
-									{/each}
-									{#if value.length > itemsLimit}
-										<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
-											>{itemsLimit}/{value.length}: Load 50 more...</button
-										>
 									{/if}
-								{/if}
-							{/key}
-						</div>
-						<div class="flex mt-2">
-							<Button
-								variant="border"
-								color="light"
-								size="xs"
-								btnClasses="mt-1"
-								on:click={() => {
-									if (value == undefined || !Array.isArray(value)) {
-										value = []
-									}
-									value = value.concat('')
-								}}
-								id="arg-input-add-item"
-								startIcon={{ icon: Plus }}
-							>
-								Add item
-							</Button>
-						</div>
-					{/if}
+								{/key}
+							</div>
+							<div class="flex mt-2 gap-20 items-baseline">
+								<Button
+									variant="border"
+									color="light"
+									size="xs"
+									btnClasses="mt-1"
+									on:click={() => {
+										if (value == undefined || !Array.isArray(value)) {
+											value = []
+										}
+										value = value.concat('')
+									}}
+									id="arg-input-add-item"
+									startIcon={{ icon: Plus }}
+								>
+									Add item
+								</Button>
+							</div>
+						{/if}
+					</div>
+					<div class="mt-2 mr-4">
+						<Toggle
+							on:change={(e) => {
+								evalValueToRaw()
+								isListJson = !isListJson
+							}}
+							checked={isListJson}
+							textClass="text-secondary"
+							size="xs"
+							options={{ right: 'json' }}
+						/>
+					</div>
 				</div>
 			{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 				<span class="text-2xs text-tertiary">Loading resource types...</span>
@@ -502,7 +516,7 @@ function changePosition(i, up) {
 						/>
 					{/if}
 				</div>
-			{:else if inputCat == 'object' || inputCat == 'resource-object'}
+			{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
 						<SchemaForm
@@ -527,6 +541,19 @@ function changePosition(i, up) {
 						bind:value
 					/>
 				{/if}
+				{#if inputCat == 'list'}
+					<div class="block">
+						<Toggle
+							on:change={(e) => {
+								isListJson = !isListJson
+							}}
+							checked={isListJson}
+							textClass="text-secondary"
+							size="xs"
+							options={{ right: 'json' }}
+						/>
+					</div>
+				{/if}
 			{:else if inputCat == 'enum'}
 				<div class="flex flex-row w-full gap-1">
 					<ArgEnum
@@ -611,7 +638,6 @@ function changePosition(i, up) {
 									}}
 									use:autosize
 									on:keydown={onKeyDown}
-									type="text"
 									{disabled}
 									class={twMerge(
 										'w-full',

package/package/components/ContentSearch.svelte

@@ -33,6 +33,12 @@ export async function loadFlows() {
 }
 let searchKind = 'all';
 let isOpen = false;
+let inputElement;
+// Reactive statement to focus the input when the modal opens
+$: if (isOpen && inputElement) {
+    // Use a timeout to ensure focus after any animations or rendering
+    setTimeout(() => inputElement.focus(), 0);
+}
 let scripts = undefined;
 let filteredScriptItems = [];
 let resources = undefined;
@@ -178,8 +184,8 @@ $: counts =
 						<div class="relative text-tertiary grow min-w-[100px]">
 							<!-- svelte-ignore a11y-autofocus -->
 							<input
-								autofocus
-								placeholder={'Search in the content of resources, scripts, flows and apps'}
+								bind:this={inputElement}
+								placeholder="Search in the content of resources, scripts, flows and apps"
 								bind:value={search}
 								class="bg-surface !h-10 !px-4 !pr-10 !rounded-lg text-sm focus:outline-none"
 							/>

package/package/components/ContextualVariableEditor.svelte

@@ -0,0 +1,69 @@
+<script>import { WorkspaceService } from '../gen';
+import { createEventDispatcher } from 'svelte';
+import { workspaceStore } from '../stores';
+import { Button } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { sendUserToast } from '../toast';
+import Section from './Section.svelte';
+import { Save } from 'lucide-svelte';
+import autosize from '../autosize';
+const dispatch = createEventDispatcher();
+let edit = false;
+let name = '';
+let value = '';
+export function initNew() {
+    edit = false;
+    name = '';
+    value = '';
+    drawer.openDrawer();
+}
+export function editVariable(editName, editValue) {
+    edit = true;
+    name = editName;
+    value = editValue;
+    drawer.openDrawer();
+}
+let drawer;
+async function updateVariable() {
+    await WorkspaceService.setEnvironmentVariable({
+        workspace: $workspaceStore,
+        requestBody: {
+            value: value,
+            name: name
+        }
+    });
+    sendUserToast(`${edit ? 'Updated' : 'Created'} contextual variable ${name}`);
+    dispatch('update');
+    drawer.closeDrawer();
+}
+</script>
+
+<Drawer bind:this={drawer} size="900px">
+	<DrawerContent
+		title={edit ? `Update contextual variable ${name}` : 'Create a contextual variable'}
+		on:close={drawer.closeDrawer}
+	>
+		<div class="flex flex-col gap-8">
+			{#if !edit}
+				<Section label="Name">
+					<input type="text" bind:value={name} placeholder="Variable name" />
+				</Section>
+			{/if}
+			<Section label="Value">
+				<textarea rows="4" use:autosize bind:value placeholder="Variable value" />
+			</Section>
+		</div>
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={() => updateVariable()}
+				disabled={value === '' || name === ''}
+				startIcon={{ icon: Save }}
+				color="dark"
+				size="sm"
+			>
+				{edit ? 'Update' : 'Save'}
+			</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/package/components/ContextualVariableEditor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        initNew?: (() => void) | undefined;
+        editVariable?: ((editName: string, editValue: string) => void) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ContextualVariableEditorProps = typeof __propDef.props;
+export type ContextualVariableEditorEvents = typeof __propDef.events;
+export type ContextualVariableEditorSlots = typeof __propDef.slots;
+export default class ContextualVariableEditor extends SvelteComponent<ContextualVariableEditorProps, ContextualVariableEditorEvents, ContextualVariableEditorSlots> {
+    get initNew(): () => void;
+    get editVariable(): (editName: string, editValue: string) => void;
+}
+export {};

package/package/components/CronInput.svelte

@@ -11,6 +11,7 @@ import { onMount } from 'svelte';
 import CronBuilder from './CronBuilder.svelte';
 import Label from './Label.svelte';
 import CronGen from './copilot/CronGen.svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
 export let schedule;
 // export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60)
 export let timezone; // = Intl.DateTimeFormat().resolvedOptions().timeZone
@@ -192,6 +193,8 @@ const items = Object.keys(timezones)
     .flat();
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <div class="w-full flex space-x-8">
 	<div class="w-full flex flex-col gap-4">
 		<Label label="Cron">

package/package/components/DBSchemaExplorer.svelte

@@ -76,9 +76,9 @@ $: shouldDisplayError = resourcePath && resourcePath in $dbSchemas && !$dbSchema
 				</ToggleButtonGroup>
 			{/if}
 			{#if dbSchema.lang === 'graphql'}
-				<GraphqlSchemaViewer code={formatGraphqlSchema(dbSchema)} class="h-full" />
+				<GraphqlSchemaViewer code={formatGraphqlSchema(dbSchema.schema)} class="h-full" />
 			{:else}
-				<ObjectViewer json={formatSchema(dbSchema)} pureViewer />
+				<ObjectViewer json={formatSchema(dbSchema)} pureViewer collapseLevel={1} />
 			{/if}
 		</DrawerContent>
 	</Drawer>

package/package/components/DarkModeObserver.svelte

@@ -2,7 +2,7 @@
 import { createEventDispatcher } from 'svelte';
 export let darkMode = false;
 const dispatch = createEventDispatcher();
-let observer;
+let observer = undefined;
 onMount(() => {
     darkMode = document.documentElement.classList.contains('dark');
     observer = new MutationObserver((mutationsList, observer) => {
@@ -17,6 +17,6 @@ onMount(() => {
     observer.observe(document.documentElement, { attributes: true });
 });
 onDestroy(() => {
-    observer.disconnect();
+    observer?.disconnect();
 });
 </script>

package/package/components/DateTimeInput.svelte

@@ -9,7 +9,11 @@ let date = undefined;
 let time = undefined;
 function parseValue(value = undefined) {
     let dateFromValue = value ? new Date(value) : undefined;
-    date = isValidDate(dateFromValue) ? dateFromValue.toISOString().split('T')[0] : undefined;
+    date = isValidDate(dateFromValue)
+        ? `${dateFromValue.getFullYear().toString()}-${(dateFromValue.getMonth() + 1)
+            .toString()
+            .padStart(2, '0')}-${dateFromValue.getDate().toString().padStart(2, '0')}`
+        : undefined;
     time = isValidDate(dateFromValue)
         ? `${dateFromValue.getHours().toString().padStart(2, '0')}:${dateFromValue
             .getMinutes()
@@ -23,8 +27,10 @@ let initialTime = time;
 function parseDateAndTime(date, time) {
     if (date && time && (initialDate != date || initialTime != time)) {
         let newDate = new Date(`${date}T${time}`);
-        value = newDate.toISOString();
-        dispatch('change', value);
+        if (newDate.toString() != 'Invalid Date') {
+            value = newDate.toISOString();
+            dispatch('change', value);
+        }
     }
 }
 $: parseDateAndTime(date, time);

package/package/components/DefaultScripts.svelte

@@ -21,6 +21,7 @@ let drawer;
 		startIcon={{ icon: SettingsIcon }}
 		color="light"
 		size="xs2"
+		btnClasses="!text-tertiary"
 		variant="contained">defaults</Button
 	>
 {/if}