windmill-components 1.21.0 → 1.28.1

package/components/FlowViewer.svelte

@@ -3,40 +3,78 @@ import Highlight from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import python from 'svelte-highlight/languages/python';
 import typescript from 'svelte-highlight/languages/typescript';
-import { FlowModuleValue } from '../gen';
-import github from 'svelte-highlight/styles/github';
 import { slide } from 'svelte/transition';
 import Tabs from './Tabs.svelte';
+import SchemaViewer from './SchemaViewer.svelte';
+import FieldHeader from './FieldHeader.svelte';
 export let flow;
+let flowFiltered = {
+    summary: flow.summary,
+    description: flow.description,
+    value: flow.value,
+    schema: flow.schema
+};
 export let embedded = false;
 export let tab = 'ui';
 let open = {};
+let hubCode = {};
+function toAny(x) {
+    return x;
+}
 </script>
 
-<svelte:head>
-	{@html github}
-</svelte:head>
-
 {#if !embedded}
 	<Tabs
 		tabs={[
 			['ui', 'Flow rendered'],
-			['json', 'JSON']
+			['json', 'JSON'],
+			['schema', 'Input schema of the flow']
 		]}
 		bind:tab
 	/>
 {/if}
 {#if tab == 'ui'}
-	<div class="flow-root w-full p-4">
-		<p class="font-black text-lg mb-6 w-full ml-2">
-			<span>{flow.value.modules.length} Steps </span>
+	<div class="flow-root w-full pb-4">
+		{#if !embedded}
+			<h2 class="mt-4">{flow.summary}</h2>
+			<h3 class="mt-4">{flow.description}</h3>
+
+			<p class="font-black text-lg w-full my-4">
+				<span>Inputs</span>
+			</p>
+			{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
+				<ul class="my-2">
+					{#each Object.entries(flow.schema.properties) as [inp, v]}
+						<li class="list-disc flex flex-row">
+							<FieldHeader
+								label={inp}
+								required={flow.schema.required?.includes(inp)}
+								type={toAny(v)?.type}
+								contentEncoding={toAny(v)?.contentEncoding}
+								format={toAny(v)?.format}
+								itemsType={toAny(v)?.itemsType}
+							/><span class="ml-4 mt-2 text-xs"
+								>{toAny(v)?.default != undefined
+									? 'default: ' + JSON.stringify(toAny(v)?.default)
+									: ''}</span
+							>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
+			{/if}
+		{/if}
+
+		<p class="font-black text-lg my-6 w-full">
+			<span>{flow?.value?.modules?.length} Step{flow?.value?.modules?.length > 1 ? 's' : ''} </span>
 			<span class="mt-4" />
 		</p>
 		<ul class="-mb-8 w-full">
-			{#each flow.value.modules ?? [] as mod, i}
+			{#each flow?.value?.modules ?? [] as mod, i}
 				<li class="w-full">
 					<div class="relative pb-8 w-full">
-						{#if i < (flow.value.modules ?? []).length - 1}
+						{#if i < (flow?.value?.modules ?? []).length - 1}
 							<span
 								class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
 								aria-hidden="true"
@@ -52,33 +90,58 @@ let open = {};
 							<div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 w-full">
 								<div class="w-full">
 									<p class="text-sm text-gray-500">
-										{#if mod.value.type == FlowModuleValue.type.SCRIPT}
+										{#if mod?.value?.type == 'script'}
 											Script at path <a
 												target="_blank"
-												href={scriptPathToHref(mod.value.path ?? '')}
-												class="font-medium text-gray-900">{mod.value.path}</a
+												href={scriptPathToHref(mod?.value?.path ?? '')}
+												class="font-medium text-gray-900">{mod?.value?.path}</a
 											>
-										{:else if mod.value.type == FlowModuleValue.type.RAWSCRIPT}
+											{#if mod?.value?.path?.startsWith('hub/')}
+												<div>
+													<button
+														on:click={async () => {
+															open[i] = !open[i]
+														}}
+														class="mb-2 underline text-black"
+													>
+														View code {open[i] ? '(-)' : '(+)'}</button
+													>
+													{#if open[i]}
+														<div class="w-full h-full">
+															<iframe
+																style="height: 400px;"
+																class="w-full h-full  text-sm"
+																title="embedded script from hub"
+																frameborder="0"
+																src="https://hub.windmill.dev/embed/script/{mod?.value?.path?.substring(
+																	4
+																)}"
+															/>
+														</div>
+													{/if}
+												</div>
+											{/if}
+										{:else if mod?.value?.type == 'rawscript'}
 											<button
 												on:click={() => (open[i] = !open[i])}
 												class="mb-2 underline text-black"
 											>
-												Raw {mod.value.language} script {open[i] ? '(-)' : '(+)'}</button
+												Raw {mod?.value?.language} script {open[i] ? '(-)' : '(+)'}</button
 											>
 
 											{#if open[i]}
 												<div transition:slide class="border border-black p-2 bg-gray-50 w-full">
 													<Highlight
-														language={mod.value.language == 'deno' ? typescript : python}
-														code={mod.value.content}
+														language={mod?.value?.language == 'deno' ? typescript : python}
+														code={mod?.value?.content}
 													/>
 												</div>
 											{/if}
-										{:else if mod.value.type == FlowModuleValue.type.FLOW}
-											Flow at path {mod.value.path}
-										{:else if mod.value.type == FlowModuleValue.type.FORLOOPFLOW}
-											For loop over step {i}'s result':
-											<svelte:self flow={mod.value} embedded={true} />
+										{:else if mod?.value?.type == 'flow'}
+											Flow at path {mod?.value?.path}
+										{:else if mod?.value?.type == 'forloopflow'}
+											For loop over all the elements of the list returned as a result of step {i}:
+											<svelte:self flow={mod?.value} embedded={true} />
 										{/if}
 									</p>
 								</div>
@@ -89,6 +152,17 @@ let open = {};
 			{/each}
 		</ul>
 	</div>
-{:else}
-	<Highlight language={json} code={JSON.stringify(flow.value, null, 4)} />
+{:else if tab == 'json'}
+	<div class="relative">
+		<button
+			on:click={async () => {
+				await navigator.clipboard.writeText(JSON.stringify(flowFiltered, null, 4))
+			}}
+			class="absolute default-secondary-button-v2 bg-white/30 right-0 my-2 ml-4"
+			>copy content</button
+		>
+		<Highlight language={json} code={JSON.stringify(flowFiltered, null, 4)} />
+	</div>
+{:else if tab == 'schema'}
+	<SchemaViewer schema={flow.schema} />
 {/if}

package/components/FlowViewer.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import { type Flow } from '../gen';
+import type { FlowValue } from '../gen';
 declare const __propDef: {
     props: {
-        flow: Flow;
+        flow: {
+            summary: string;
+            description?: string;
+            value: FlowValue;
+            schema?: any;
+        };
         embedded?: boolean | undefined;
-        tab?: "json" | "ui" | undefined;
+        tab?: "json" | "schema" | "ui" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/IconedResourceType.svelte

@@ -1,20 +1,29 @@
-<script>import Mysql from './icons/Mysql.svelte';
-import Mail from './icons/Mail.svelte';
+<script>import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import Icon from 'svelte-awesome';
+import AirtableIcon from './icons/AirtableIcon.svelte';
 import DbIcon from './icons/DbIcon.svelte';
+import GcalIcon from './icons/GcalIcon.svelte';
+import GCloudIcon from './icons/GCloudIcon.svelte';
+import GdriveIcon from './icons/GdriveIcon.svelte';
+import GitlabIcon from './icons/GItlabIcon.svelte';
+import GmailIcon from './icons/GmailIcon.svelte';
+import GSheetsIcon from './icons/GSheetsIcon.svelte';
+import Mail from './icons/Mail.svelte';
+import Mysql from './icons/Mysql.svelte';
 import PostgresIcon from './icons/PostgresIcon.svelte';
-import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import Slack from './icons/Slack.svelte';
-import Icon from 'svelte-awesome';
+import TogglIcon from './icons/TogglIcon.svelte';
 export let name;
 export let after = false;
 export let height = '24px';
 export let width = '24px';
 </script>
 
-<div class="flex flex-row gap-2">
+<div class="flex flex-row gap-2 justify-center -pl-2 whitespace-nowrap">
 	{#if !after}
 		{name}
 	{/if}
+
 	{#if name === 'postgresql'}
 		<PostgresIcon {height} {width} />
 	{:else if name === 'mysql'}
@@ -27,6 +36,22 @@ export let width = '24px';
 		<Slack {height} {width} />
 	{:else if name === 'github'}
 		<Icon data={faGithub} scale={1.4} />
+	{:else if name === 'gmail'}
+		<GmailIcon {height} {width} />
+	{:else if name === 'gsheets'}
+		<GSheetsIcon {height} {width} />
+	{:else if name === 'gitlab'}
+		<GitlabIcon {height} {width} />
+	{:else if name === 'gcloud'}
+		<GCloudIcon {height} {width} />
+	{:else if name === 'gcal'}
+		<GcalIcon {height} {width} />
+	{:else if name === 'gdrive'}
+		<GdriveIcon {height} {width} />
+	{:else if name === 'airtable'}
+		<AirtableIcon {height} {width} />
+	{:else if name === 'toggl'}
+		<TogglIcon {height} {width} />
 	{/if}
 	{#if after}
 		{name}

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/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}