windmill-components 1.22.42 → 1.28.3

package/components/InputTransformForm.svelte

@@ -0,0 +1,209 @@
+<script>import { faChain } from '@fortawesome/free-solid-svg-icons';
+import { Button, Tooltip } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
+import ArgInput from './ArgInput.svelte';
+import Editor from './Editor.svelte';
+import FieldHeader from './FieldHeader.svelte';
+import DynamicInputHelpBox from './flows/DynamicInputHelpBox.svelte';
+import { codeToStaticTemplate } from './flows/flowStore';
+import { getDefaultExpr, isCodeInjection } from './flows/utils';
+import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
+import Toggle from './Toggle.svelte';
+export let schema;
+export let arg;
+export let argName;
+export let extraLib = 'missing extraLib';
+export let inputCheck;
+export let i = undefined;
+export let pickableProperties = undefined;
+let overlays = {};
+let monacos = {};
+let inputCats = {};
+let propertyType = getPropertyType(arg);
+function getPropertyType(arg) {
+    let type = arg.type;
+    if (type == 'javascript') {
+        if (codeToStaticTemplate(arg.expr)) {
+            type = 'static';
+        }
+    }
+    return type;
+}
+function setPropertyType(rawValue) {
+    if (!arg) {
+        return;
+    }
+    if (isCodeInjection(rawValue)) {
+        arg.expr = getDefaultExpr(i, argName, `\`${rawValue}\``);
+        arg.type = 'javascript';
+        propertyType = 'static';
+    }
+    else {
+        if (arg.type === 'javascript' && propertyType === 'static') {
+            arg.type = 'static';
+        }
+        if (arg.type) {
+            propertyType = arg.type;
+        }
+    }
+}
+function isStaticTemplate(inputCat) {
+    return inputCat === 'string' || inputCat === 'sql';
+}
+function focusProp(argName, monacoEditor = false) {
+    Object.keys(overlays).forEach((k) => {
+        if (k == argName && (isStaticTemplate(inputCats[argName]) || monacoEditor)) {
+            overlays[k].focus();
+        }
+        else {
+            overlays[k].unfocus();
+        }
+    });
+}
+function connectProperty(argName, rawValue) {
+    if (isStaticTemplate(inputCats[argName])) {
+        arg.value = `\$\{${rawValue}}`;
+        setPropertyType(arg.value);
+    }
+    else {
+        arg.expr = getDefaultExpr(i ?? -1, undefined, rawValue);
+        arg.type = 'javascript';
+        propertyType = 'javascript';
+    }
+    if (monacos[argName]) {
+        monacos[argName].setCode(arg.value);
+    }
+}
+$: checked = propertyType == 'javascript';
+</script>
+
+{#if arg != undefined}
+	<div class="flex justify-between items-center">
+		<div class="flex items-center">
+			<FieldHeader
+				label={argName}
+				format={schema.properties[argName].format}
+				contentEncoding={schema.properties[argName].contentEncoding}
+				required={schema.required.includes(argName)}
+				type={schema.properties[argName].type}
+				itemsType={schema.properties[argName].items}
+			/>
+
+			{#if !checked && arg.type === 'javascript'}
+				<span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2">
+					{'${...}'}
+				</span>
+			{/if}
+		</div>
+		<Toggle
+			bind:checked
+			options={{
+				right: 'Raw Javascript Editor'
+			}}
+			on:change={(e) => {
+				const type = e.detail ? 'javascript' : 'static'
+				const staticTemplate = isStaticTemplate(inputCats[argName])
+				if (type === 'javascript') {
+					arg.expr = getDefaultExpr(
+						i ?? -1,
+						argName,
+						staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
+					)
+
+					arg.value = undefined
+					propertyType = 'javascript'
+				} else {
+					arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
+
+					arg.expr = undefined
+					propertyType = 'static'
+				}
+
+				arg.type = type
+			}}
+		/>
+	</div>
+	<div class="max-w-xs" />
+
+	{#if propertyType === undefined || !checked}
+		<OverlayPropertyPicker
+			{pickableProperties}
+			bind:this={overlays[argName]}
+			on:select={({ detail }) => {
+				if (detail.pickerVariation === 'connect') {
+					connectProperty(argName, detail.propPath)
+				} else {
+					const toAppend = `\$\{${detail.propPath}}`
+					arg.value = `${arg.value ?? ''}${toAppend}`
+					if (monacos[argName]) {
+						monacos[argName].setCode(arg.value)
+					}
+					if (isStaticTemplate(inputCats[argName])) {
+						setPropertyType(arg.value)
+					}
+				}
+			}}
+		>
+			<ArgInput
+				on:focus={() => focusProp(argName)}
+				label={argName}
+				bind:editor={monacos[argName]}
+				bind:description={schema.properties[argName].description}
+				bind:value={arg.value}
+				type={schema.properties[argName].type}
+				required={schema.required.includes(argName)}
+				bind:pattern={schema.properties[argName].pattern}
+				bind:valid={inputCheck[argName]}
+				defaultValue={schema.properties[argName].default}
+				bind:enum_={schema.properties[argName].enum}
+				bind:format={schema.properties[argName].format}
+				contentEncoding={schema.properties[argName].contentEncoding}
+				bind:itemsType={schema.properties[argName].items}
+				displayHeader={false}
+				bind:inputCat={inputCats[argName]}
+				on:input={(e) => {
+					if (isStaticTemplate(inputCats[argName])) {
+						setPropertyType(e.detail.rawValue)
+					}
+				}}
+			>
+				<div slot="actions">
+					<div on:click={() => overlays[argName]?.focus('connect')}>
+						<Tooltip placement="bottom" content="Input connect">
+							<Button size="sm" class="blue-button h-8">
+								<Icon data={faChain} />
+							</Button>
+						</Tooltip>
+					</div>
+				</div>
+			</ArgInput>
+		</OverlayPropertyPicker>
+	{:else if checked}
+		{#if arg.expr != undefined}
+			<OverlayPropertyPicker
+				bind:this={overlays[argName]}
+				{pickableProperties}
+				on:select={(event) => {
+					monacos[argName].insertAtCursor(event.detail.propPath)
+				}}
+			>
+				<div class="border rounded p-2 mt-2 border-gray-300">
+					<Editor
+						bind:this={monacos[argName]}
+						on:focus={() => focusProp(argName, true)}
+						bind:code={arg.expr}
+						lang="javascript"
+						class="few-lines-editor"
+						{extraLib}
+						extraLibPath="file:///node_modules/@types/windmill@{i}/index.d.ts"
+					/>
+				</div>
+			</OverlayPropertyPicker>
+			<DynamicInputHelpBox />
+		{/if}
+	{:else}
+		<p>Not recognized arg type {arg.type}</p>
+	{/if}
+{:else}
+	<p>Arg at {argName} is undefined</p>
+{/if}

package/components/InputTransformForm.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Schema } from '../common';
+import type { InputTransform } from '../gen';
+declare const __propDef: {
+    props: {
+        schema: Schema;
+        arg: InputTransform | any;
+        argName: string;
+        extraLib?: string | undefined;
+        inputCheck: {
+            [id: string]: boolean;
+        };
+        i?: number | undefined;
+        pickableProperties?: Object | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputTransformFormProps = typeof __propDef.props;
+export declare type InputTransformFormEvents = typeof __propDef.events;
+export declare type InputTransformFormSlots = typeof __propDef.slots;
+export default class InputTransformForm extends SvelteComponentTyped<InputTransformFormProps, InputTransformFormEvents, InputTransformFormSlots> {
+}
+export {};

package/components/InputTransformsViewer.svelte

@@ -0,0 +1,19 @@
+<script>import { Highlight } from 'svelte-highlight';
+import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import typescript from 'svelte-highlight/languages/typescript';
+export let inputTransforms;
+</script>
+
+<ul class="mb-1">
+	{#each Object.entries(inputTransforms) as [key, val]}
+		<li>
+			<span class="font-black text-gray-700">{key}</span>: {#if val.type == 'static'}<ObjectViewer
+					json={val.value}
+				/>{:else}
+				<span class="inline-block inline-highlight">
+					<Highlight offsetTop={0} language={typescript} code={val.expr} />
+				</span>
+			{/if}
+		</li>
+	{/each}
+</ul>

package/components/InputTransformsViewer.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputTransform } from '../gen';
+declare const __propDef: {
+    props: {
+        inputTransforms: Record<string, InputTransform>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type InputTransformsViewerProps = typeof __propDef.props;
+export declare type InputTransformsViewerEvents = typeof __propDef.events;
+export declare type InputTransformsViewerSlots = typeof __propDef.slots;
+export default class InputTransformsViewer extends SvelteComponentTyped<InputTransformsViewerProps, InputTransformsViewerEvents, InputTransformsViewerSlots> {
+}
+export {};

package/components/InviteGlobalUser.svelte

@@ -14,8 +14,8 @@ let password;
 let name;
 let company;
 function handleKeyUp(event) {
-    const key = event.key || event.keyCode;
-    if (key === 13 || key === 'Enter') {
+    const key = event.key;
+    if (key === 'Enter') {
         event.preventDefault();
         addUser();
     }

package/components/InviteUser.svelte

@@ -12,8 +12,8 @@ export function openModal() {
 let email;
 let is_admin = false;
 function handleKeyUp(event) {
-    const key = event.key || event.keyCode;
-    if (key === 13 || key === 'Enter') {
+    const key = event.key;
+    if (key === 'Enter') {
         event.preventDefault();
         inviteUser();
     }

package/components/JobStatus.svelte

@@ -1,38 +1,45 @@
-<script>import { faCalendar, faCircle, faClock, faHourglassHalf, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { displayDate, forLater } from '../utils';
+<script>import { displayDate, forLater, msToSec } from '../utils';
+import { faCalendar, faCheck, faCircle, faClock, faHourglassHalf, faTimes } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
-import { check } from 'svelte-awesome/icons';
+import { Badge } from 'flowbite-svelte';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
 </script>
 
 {#if job && 'success' in job && job.success}
-	<Icon class="text-green-600" data={check} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Succeeded {job.is_skipped ? '(Skipped)' : ''}</span>
-	<div>
-		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
-			>Job ran in {job.duration}
-			s</span
-		>
-	</div>
+	<Badge large color="green">
+		<Icon data={faCheck} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Succeeded {job.is_skipped ? '(Skipped)' : ''}
+	</Badge>
+
+	<Badge large>
+		<Icon data={faHourglassHalf} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Job ran in {msToSec(job.duration_ms)} s
+	</Badge>
 {:else if job && 'success' in job}
-	<Icon class="text-red-700" data={faTimes} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Failed</span>
-	<div>
-		<Icon class="text-gray-700" data={faHourglassHalf} scale={SMALL_ICON_SCALE} /><span class="mx-2"
-			>Job ran in {job.duration}
-			s</span
-		>
-	</div>
+	<Badge large color="red">
+		<Icon data={faTimes} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Failed
+	</Badge>
+	<Badge large>
+		<Icon data={faHourglassHalf} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Job ran in {msToSec(job.duration_ms)}s
+	</Badge>
 {:else if job && 'running' in job && job.running}
-	<Icon class="text-yellow-500" data={faCircle} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Running</span>
+	<Badge large color="yellow">
+		<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Running
+	</Badge>
 {:else if job && 'running' in job && 'scheduled_for' in job && job.scheduled_for && forLater(job.scheduled_for)}
-	<Icon class="text-gray-700" data={faCalendar} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Scheduled for {displayDate(job.scheduled_for)}</span>
+	<Badge>
+		<Icon data={faCalendar} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Scheduled for {displayDate(job.scheduled_for)}
+	</Badge>
 {:else if job && 'running' in job}
-	<Icon class="text-gray-700" data={faClock} scale={SMALL_ICON_SCALE} />
-	<span class="mx-2">Queued</span>
+	<Badge>
+		<Icon data={faClock} scale={SMALL_ICON_SCALE} class="mr-2" />
+		Queued
+	</Badge>
 {:else}
 	<Icon class="text-gray-200" data={faCircle} scale={SMALL_ICON_SCALE} />
 {/if}

package/components/Modal.svelte

@@ -13,8 +13,8 @@ export function openModal() {
     dispatch('open');
 }
 function handleKeyUp(event) {
-    const key = event.key || event.keyCode;
-    if (key === 27 || key === 'Escape' || key === 'Esc') {
+    const key = event.key;
+    if (key === 'Escape' || key === 'Esc') {
         if (open) {
             event.preventDefault();
             closeModal();
@@ -25,45 +25,18 @@ function handleKeyUp(event) {
 
 <svelte:window on:keyup={handleKeyUp} />
 
-<div class="blurred-background  {open ? '' : 'hidden'}" />
+{#if open}
+	<div class="blurred-background" />
 
-<div class="fixed top-0 w-screen h-screen {open ? '' : 'hidden'} {z}">
-	<div
-		class="fixed right-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
-	>
-		{#if open}
-			<div class="flex flex-row justify-between p-2  bg-white border-b border-gray-200">
-				<button
-					on:click={() => {
-						open = false
-						closeModal()
-					}}
-				>
-					<svg
-						class="w-6 h-6"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					</svg>
-				</button>
-				<p class="font-semibold text-gray-800"><slot name="title" /></p>
-				<div />
-			</div>
-			<div class="flex flex-col  bg-gray-50 pt-3 px-6 grow overflow-y-auto">
-				<slot name="content" />
-			</div>
-			<div class="flex flex-col bg-white border-gray-200 p-2">
-				<div class="flex flex-row justify-between p-2 ">
+	<div class="fixed top-0 w-screen h-screen {z}">
+		<div
+			class="fixed right-0 top-0 flex flex-col w-3/4 sm:w-2/3 lg:w-1/2 h-screen border border-gray-300 shadow-xl"
+		>
+			{#if open}
+				<div class="flex flex-row justify-between p-2 bg-white border-b border-gray-200">
 					<button
 						on:click={() => {
+							open = false
 							closeModal()
 						}}
 					>
@@ -82,12 +55,41 @@ function handleKeyUp(event) {
 							/>
 						</svg>
 					</button>
-					<span class="mr-4"><slot name="submission">&nbsp;</slot></span>
+					<p class="font-semibold text-gray-800"><slot name="title" /></p>
+					<div />
+				</div>
+				<div class="flex flex-col  bg-gray-50 pt-3 px-6 grow overflow-y-auto">
+					<slot name="content" />
+				</div>
+				<div class="flex flex-col bg-white border-gray-200 p-2">
+					<div class="flex flex-row justify-between p-2 ">
+						<button
+							on:click={() => {
+								closeModal()
+							}}
+						>
+							<svg
+								class="w-6 h-6"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						</button>
+						<span class="mr-4"><slot name="submission">&nbsp;</slot></span>
+					</div>
 				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.blurred-background {