windmill-components 1.109.8 → 1.121.0

package/package/components/FlowStatusWaitingForEvents.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import { Job } from '../gen';
+declare const __propDef: {
+    props: {
+        is_owner: boolean;
+        workspaceId: string | undefined;
+        job: Job;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowStatusWaitingForEventsProps = typeof __propDef.props;
+export type FlowStatusWaitingForEventsEvents = typeof __propDef.events;
+export type FlowStatusWaitingForEventsSlots = typeof __propDef.slots;
+export default class FlowStatusWaitingForEvents extends SvelteComponentTyped<FlowStatusWaitingForEventsProps, FlowStatusWaitingForEventsEvents, FlowStatusWaitingForEventsSlots> {
+}
+export {};

package/package/components/InputTransformForm.svelte

@@ -4,11 +4,14 @@ import FieldHeader from './FieldHeader.svelte';
 import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
 import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils';
 import SimpleEditor from './SimpleEditor.svelte';
-import { Button, ToggleButton, ToggleButtonGroup } from './common';
-import { faCode } from '@fortawesome/free-solid-svg-icons';
+import { Button } from './common';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import { ResourceService } from '../gen';
 import TemplateEditor from './TemplateEditor.svelte';
 import { setInputCat as computeInputCat } from '../utils';
-import { Plug } from 'lucide-svelte';
+import { Code, Plug } from 'lucide-svelte';
+import { workspaceStore } from '../stores';
 export let schema;
 export let arg;
 export let argName;
@@ -94,6 +97,11 @@ function setDefaultCode() {
     }
 }
 $: schema.properties[argName].default && setDefaultCode();
+let resourceTypes = undefined;
+async function loadResourceTypes() {
+    resourceTypes = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
+}
+loadResourceTypes();
 </script>
 
 {#if arg != undefined}
@@ -119,7 +127,7 @@ $: schema.properties[argName].default && setDefaultCode();
 			{/if}
 		</div>
 		{#if !noDynamicToggle}
-			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap z-10">
+			<div class="flex flex-row gap-x-6 gap-y-1 flex-wrap z-10 items-center">
 				<div>
 					<ToggleButtonGroup
 						bind:selected={propertyType}
@@ -162,24 +170,25 @@ $: schema.properties[argName].default && setDefaultCode();
 					>
 						{#if isStaticTemplate(inputCat)}
 							<ToggleButton
-								title={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
+								tooltip={`Write text or surround javascript with \`\$\{\` and \`\}\`. Use \`results\` to connect to another node\'s output.`}
 								light
 								position="left"
 								value="static"
 								size="xs2"
-							>
-								{'${} '}&nbsp;
-							</ToggleButton>
+								small
+								label={'${}'}
+							/>
 						{:else}
-							<ToggleButton light position="left" value="static" size="xs2">Static</ToggleButton>
+							<ToggleButton small label="Static" position="left" value="static" size="xs2" />
 						{/if}
 
 						<ToggleButton
+							small
 							light
-							title="Javascript expression ('flow_input' or 'results')."
+							tooltip="Javascript expression ('flow_input' or 'results')."
 							position="right"
 							value="javascript"
-							startIcon={{ icon: faCode }}
+							icon={Code}
 							size="xs2"
 						/>
 					</ToggleButtonGroup>
@@ -229,6 +238,7 @@ $: schema.properties[argName].default && setDefaultCode();
 			</div>
 		{:else if propertyType === undefined || propertyType == 'static'}
 			<ArgInput
+				{resourceTypes}
 				noMargin
 				compact
 				bind:this={argInput}

package/package/components/InputTransformForm.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 import type VariableEditor from './VariableEditor.svelte';
 import type ItemPicker from './ItemPicker.svelte';
-import type { InputTransform } from '../gen';
+import { type InputTransform } from '../gen';
 declare const __propDef: {
     props: {
         schema: Schema;

package/package/components/InputTransformSchemaForm.svelte

@@ -49,7 +49,7 @@ $: {
 	{#if keys.length > 0}
 		{#each keys as argName (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div class="z-10 pt-1.5">
+				<div class="z-10 pt-4">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}

package/package/components/JobArgs.svelte

@@ -1,34 +1,127 @@
-<script>import ArgInfo from './ArgInfo.svelte';
-import { Skeleton } from './common';
+<script>import { ChevronRightSquare, ClipboardCopy, Download, Expand } from 'lucide-svelte';
+import ArgInfo from './ArgInfo.svelte';
+import { Button, Drawer, DrawerContent, Skeleton } from './common';
 import TableCustom from './TableCustom.svelte';
+import Portal from 'svelte-portal';
+import { Highlight } from 'svelte-highlight';
+import { copyToClipboard } from '../utils';
+import { json } from 'svelte-highlight/languages';
 export let args;
 export let tableClass = '';
+let jsonViewer;
+let runLocally;
+let jsonStr = '';
+function pythonCode() {
+    return `
+if __name__ == 'main':
+${Object.entries(args)
+        .map(([arg, value]) => {
+        return `  ${arg} = ${JSON.stringify(value)}`;
+    })
+        .join('\n')}
+
+  main(${Object.keys(args)
+        .map((x) => `${x} = ${x}`)
+        .join(', ')})
+`;
+}
+function typescriptCode() {
+    return `
+if (import.meta.main) {
+${Object.entries(args)
+        .map(([arg, value]) => {
+        return `  let ${arg} = ${JSON.stringify(value)}`;
+    })
+        .join('\n')}
+
+  await main(...)
+}
+`;
+}
 </script>
 
-<TableCustom class="py-2 {tableClass}">
-	<tr slot="header-row">
-		<th>Argument</th>
-		<th>Value</th>
-	</tr>
-	<tbody slot="body">
-		{#if args && Object.keys(args).length > 0}
-			{#each Object.entries(args) as [arg, value]}
+<div class="relative">
+	<div class="text-gray-500 text-xs absolute top-8 right-0">
+		<button
+			on:click={() => {
+				jsonStr = JSON.stringify(args, null, 4)
+				jsonViewer.openDrawer()
+			}}><Expand size={18} /></button
+		>
+	</div>
+	<TableCustom class="py-2 {tableClass}">
+		<tr slot="header-row">
+			<th>Argument</th>
+			<th>Value</th>
+		</tr>
+		<tbody slot="body">
+			{#if args && Object.keys(args).length > 0}
+				{#each Object.entries(args) as [arg, value]}
+					<tr>
+						<td class="font-semibold">{arg}</td>
+						<td><ArgInfo {value} /></td>
+					</tr>
+				{/each}
+			{:else if args}
+				<tr><div class="text-gray-600 pt-2 pl-1 text-sm">No arguments</div></tr>
+			{:else}
 				<tr>
-					<td class="font-semibold">{arg}</td>
-					<td><ArgInfo {value} /></td>
+					<td>
+						<Skeleton layout={[[3], 0.5, [3]]} />
+					</td>
+					<td>
+						<Skeleton layout={[[3], 0.5, [3]]} />
+					</td>
 				</tr>
-			{/each}
-		{:else if args}
-			<tr><div class="text-gray-600 pt-2 pl-1 text-sm">No arguments</div></tr>
-		{:else}
-			<tr>
-				<td>
-					<Skeleton layout={[[3], 0.5, [3]]} />
-				</td>
-				<td>
-					<Skeleton layout={[[3], 0.5, [3]]} />
-				</td>
-			</tr>
-		{/if}
-	</tbody>
-</TableCustom>
+			{/if}
+		</tbody>
+	</TableCustom>
+</div>
+
+<Portal>
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<a
+					class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+					download="windmill-args.json"
+					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
+					>Download <Download size={14} /></a
+				>
+				<Button on:click={runLocally.openDrawer} color="light" size="xs">
+					<div class="flex gap-2 items-center">Use in a local script<ChevronRightSquare /> </div>
+				</Button>
+				<Button on:click={() => copyToClipboard(jsonStr)} color="light" size="xs">
+					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+				</Button>
+			</svelte:fragment>
+			{#if jsonStr.length > 100000}
+				<div class="text-sm mb-2 text-gray-600">
+					<a
+						download="windmill-args.json"
+						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+					>
+					JSON is too large to be displayed in full.
+				</div>
+			{:else}
+				<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
+			{/if}
+		</DrawerContent>
+	</Drawer>
+	<Drawer bind:this={runLocally} size="900px">
+		<DrawerContent title="Run locally" on:close={runLocally.closeDrawer}>
+			<h3 class="mb-2">Envs</h3>
+			If using the wmill client in your code, set the following env variables:
+			<pre
+				><code
+					>BASE_URL="{window.location.origin}"
+WM_TOKEN="{'<TOKEN>'}"</code
+				></pre
+			>
+			<h3 class="mt-8">TypeScript</h3>
+			<pre><code>{typescriptCode()}</code></pre>
+			<h3 class="mt-8">Python</h3>
+			<pre><code>{pythonCode()}</code></pre>
+		</DrawerContent>
+	</Drawer>
+</Portal>

package/package/components/LightweightArgInput.svelte

@@ -1,4 +1,4 @@
-<script>import { faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
 import { Badge, Button } from './common';
 import { createEventDispatcher } from 'svelte';
@@ -11,6 +11,8 @@ import Toggle from './Toggle.svelte';
 import Range from './Range.svelte';
 import LightweightSchemaForm from './LightweightSchemaForm.svelte';
 import { twMerge } from 'tailwind-merge';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
 export let css = undefined;
 export let label = '';
 export let value;
@@ -185,10 +187,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					<span>&nbsp; Not set</span>
 				{/if}
 			{:else if inputCat == 'list'}
-				<div>
-					<div>
+				<div class="w-full">
+					<div class="w-full">
 						{#each value ?? [] as v, i}
-							<div class="flex flex-row max-w-md mt-1">
+							<div class="flex flex-row max-w-md mt-1 w-full">
 								{#if itemsType?.type == 'number'}
 									<input type="number" bind:value={v} />
 								{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
@@ -198,14 +200,25 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
 										multiple={false}
 									/>
+								{:else if Array.isArray(itemsType?.enum)}
+									<select
+										on:focus={(e) => {
+											dispatch('focus')
+										}}
+										class="px-6"
+										bind:value={v}
+									>
+										{#each itemsType?.enum ?? [] as e}
+											<option>{e}</option>
+										{/each}
+									</select>
 								{:else}
 									<input type="text" bind:value={v} />
 								{/if}
-								<Button
-									variant="border"
-									color="red"
-									size="sm"
-									btnClasses="mx-6"
+								<button
+									transition:fade|local={{ duration: 100 }}
+									class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 ml-2"
+									aria-label="Clear"
 									on:click={() => {
 										value = value.filter((el) => el != v)
 										if (value.length == 0) {
@@ -213,15 +226,15 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 										}
 									}}
 								>
-									<Icon data={faMinus} />
-								</Button>
+									<X size={14} />
+								</button>
 							</div>
 						{/each}
 					</div>
-					<div class="flex">
+					<div class="flex my-2">
 						<Button
 							variant="border"
-							color="blue"
+							color="light"
 							size="sm"
 							btnClasses="mt-1"
 							on:click={() => {
@@ -232,7 +245,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							}}
 						>
 							<Icon data={faPlus} class="mr-2" />
-							Add item
+							Add
 						</Button>
 					</div>
 					<span class="ml-2">
@@ -294,7 +307,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				/>
 			{:else if inputCat == 'string'}
 				<div class="flex flex-col w-full">
-					<div class="flex flex-row w-full items- justify-between">
+					<div class="flex flex-row w-full items-center justify-between">
 						<textarea
 							rows="1"
 							bind:this={el}

package/package/components/LightweightArgInput.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         itemsType?: {
             type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
+            enum?: string[] | undefined;
         } | undefined;
         displayHeader?: boolean | undefined;
         properties?: {

package/package/components/LightweightSchemaForm.svelte

@@ -14,30 +14,30 @@ $: if (args === undefined) {
 }
 </script>
 
-<div class={twMerge('w-full flex flex-col overflow-auto', largeGap ? 'gap-8' : 'gap-2')}>
+<div
+	class={twMerge('w-full flex flex-col overflow-auto px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}
+>
 	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
-		<div>
-			{#if typeof args == 'object' && schema?.properties[argName] && args}
-				<LightweightArgInput
-					label={argName}
-					description={schema.properties[argName].description}
-					bind:value={args[argName]}
-					bind:valid={inputCheck[argName]}
-					type={schema.properties[argName].type}
-					required={schema.required?.includes(argName) ?? false}
-					pattern={schema.properties[argName].pattern}
-					defaultValue={schema.properties[argName].default}
-					enum_={schema.properties[argName].enum}
-					format={schema.properties[argName].format}
-					contentEncoding={schema.properties[argName].contentEncoding}
-					properties={schema.properties[argName].properties}
-					itemsType={schema.properties[argName].items}
-					extra={schema.properties[argName]}
-					on:inputClicked
-					{displayType}
-					{css}
-				/>
-			{/if}
-		</div>
+		{#if typeof args == 'object' && schema?.properties[argName] && args}
+			<LightweightArgInput
+				label={argName}
+				description={schema.properties[argName].description}
+				bind:value={args[argName]}
+				bind:valid={inputCheck[argName]}
+				type={schema.properties[argName].type}
+				required={schema.required?.includes(argName) ?? false}
+				pattern={schema.properties[argName].pattern}
+				defaultValue={schema.properties[argName].default}
+				enum_={schema.properties[argName].enum}
+				format={schema.properties[argName].format}
+				contentEncoding={schema.properties[argName].contentEncoding}
+				properties={schema.properties[argName].properties}
+				itemsType={schema.properties[argName].items}
+				extra={schema.properties[argName]}
+				on:inputClicked
+				{displayType}
+				{css}
+			/>
+		{/if}
 	{/each}
 </div>

package/package/components/LogViewer.svelte

@@ -1,10 +1,13 @@
-<script>import { Loader2 } from 'lucide-svelte';
-import { Drawer, DrawerContent } from './common';
+<script>import { ClipboardCopy, Download, Loader2 } from 'lucide-svelte';
+import { Button, Drawer, DrawerContent } from './common';
+import { copyToClipboard } from '../utils';
+import { workspaceStore } from '../stores';
 export let content;
 export let isLoading;
 export let duration = undefined;
 export let mem = undefined;
 export let wrapperClass = '';
+export let jobId = undefined;
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
@@ -19,6 +22,16 @@ let logViewer;
 
 <Drawer bind:this={logViewer} size="900px">
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
+		<svelte:fragment slot="actions">
+			<a
+				class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+				download="windmill-logs.json"
+				href="/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}">Download <Download size={14} /></a
+			>
+			<Button on:click={() => copyToClipboard(content)} color="light" size="xs">
+				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+			</Button>
+		</svelte:fragment>
 		<div>
 			<pre class="bg-gray-50 text-xs w-full p-2"
 				>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
@@ -28,10 +41,8 @@ let logViewer;
 </Drawer>
 
 <div class="relative w-full h-full {wrapperClass}">
-	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
-		<div
-			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
-		>
+	<div bind:this={div} class="w-full h-full overflow-auto relative secondaryBackground">
+		<div class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
 			<div class="flex gap-1">
 				<button on:click={logViewer.openDrawer}>Expand</button>
 				<div class="py-2 pr-2 text-xs flex gap-2 items-center">
@@ -43,16 +54,17 @@ let logViewer;
 		{#if isLoading}
 			<Loader2 class="animate-spin absolute top-2 left-2" />
 		{:else if duration}
-			<span class="absolute text-xs text-gray-500 top-2 left-2">took {duration}ms</span>
+			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-2"
+				>took {duration}ms</span
+			>
 		{/if}
 		{#if mem}
-			<span class="absolute text-xs text-gray-500 top-2 left-36"
+			<span class="absolute text-xs text-gray-500 dark:text-gray-400 top-2 left-36"
 				>mem peak: {(mem / 1024).toPrecision(4)}MB</span
 			>
 		{/if}
-		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
-			>{#if content}<span>{content}</span>{:else if !isLoading}<span class="text-gray-600"
-					>No logs are available yet</span
+		<pre class="whitespace-pre-wrap break-words text-xs w-full p-2"
+			>{#if content}<span>{content}</span>{:else if !isLoading}<span>No logs are available yet</span
 				>{/if}</pre
 		>
 	</div>

package/package/components/LogViewer.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         duration?: number | undefined;
         mem?: number | undefined;
         wrapperClass?: string | undefined;
+        jobId?: string | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/package/components/ModulePreview.svelte

@@ -87,7 +87,13 @@ function jobDone() {
 	<Pane size={50} minSize={20}>
 		<Splitpanes horizontal>
 			<Pane size={50} minSize={10}>
-				<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+				<LogViewer
+					jobId={testJob?.id}
+					duration={testJob?.['duration_ms']}
+					mem={testJob?.['mem_peak']}
+					content={testJob?.logs}
+					isLoading={testIsLoading}
+				/>
 			</Pane>
 			<Pane size={50} minSize={10} class="text-sm text-gray-600">
 				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}

package/package/components/ModulePreviewForm.svelte

@@ -4,6 +4,8 @@ import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
 import { getContext } from 'svelte';
 import { evalValue } from './flows/utils';
+import { ResourceService } from '../gen';
+import { workspaceStore } from '../stores';
 export let schema;
 export let args = {};
 export let mod;
@@ -43,6 +45,11 @@ function plugIt(argName) {
     }
 }
 let editor = {};
+let resourceTypes = undefined;
+async function loadResourceTypes() {
+    resourceTypes = await ResourceService.listResourceTypeNames({ workspace: $workspaceStore });
+}
+loadResourceTypes();
 </script>
 
 <div class="w-full pt-2">
@@ -52,6 +59,7 @@ let editor = {};
 				<div class="flex gap-2 items-center">
 					{#if typeof args == 'object' && schema?.properties[argName]}
 						<ArgInput
+							{resourceTypes}
 							minW={false}
 							autofocus={i == 0 && autofocus}
 							label={argName}

package/package/components/ModulePreviewForm.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import type { FlowModule } from '../gen';
+import { type FlowModule } from '../gen';
 import type { PickableProperties } from './flows/previousResults';
 declare const __propDef: {
     props: {

package/package/components/MoveDrawer.svelte

@@ -101,9 +101,9 @@ async function updatePath() {
 		<h2 class="border-b pb-1 mt-10 mb-4">Path</h2>
 		<div class="flex flex-col mb-2 gap-6">
 			<Path disabled={!own} {kind} {initialPath} bind:path />
-			<div class="mt-4" />
-			<Button disabled={!own} on:click={updatePath}>Move/Rename</Button>
-			<div />
 		</div>
+		<svelte:fragment slot="actions">
+			<Button disabled={!own} on:click={updatePath}>Move/Rename</Button>
+		</svelte:fragment>
 	</DrawerContent>
 </Drawer>