windmill-components 1.46.3 → 1.55.0

package/components/HighlightCode.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         code?: string | undefined;
         language: 'python3' | 'deno' | 'go' | 'bash' | undefined;
     };
@@ -9,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type HighlightCodeProps = typeof __propDef.props;
-export declare type HighlightCodeEvents = typeof __propDef.events;
-export declare type HighlightCodeSlots = typeof __propDef.slots;
+export type HighlightCodeProps = typeof __propDef.props;
+export type HighlightCodeEvents = typeof __propDef.events;
+export type HighlightCodeSlots = typeof __propDef.slots;
 export default class HighlightCode extends SvelteComponentTyped<HighlightCodeProps, HighlightCodeEvents, HighlightCodeSlots> {
 }
 export {};

package/components/IconedPath.svelte

@@ -1,14 +1,24 @@
-<script>import Badge from './common/badge/Badge.svelte';
+<script>import { truncateHash } from '../utils';
+import { Building } from 'lucide-svelte';
+import { Badge } from './common';
 import IconedResourceType from './IconedResourceType.svelte';
 export let path;
+export let hash = undefined;
 </script>
 
-<div class="flex space-x-2 items-center">
+<div class="flex space-x-2 items-center w-full shrink min-w-0 {$$props.class}">
 	{#if path.startsWith('hub/')}
-		<IconedResourceType name={path.split('/')[2]} silent={true} />
-		<span>{path}</span>
+		<div>
+			<IconedResourceType width="20px" height="20px" name={path.split('/')[2]} silent={true} />
+		</div>
+		<span class="text-sm truncate">{path}</span>
 	{:else}
-		<Badge color="blue">Workspace</Badge>
-		<span>{path}</span>
+		<div class="center-center">
+			<Building size={16} />
+		</div>
+		<span class="text-sm truncate">{path}</span>
+		{#if hash}
+			<Badge>{truncateHash(hash)}</Badge>
+		{/if}
 	{/if}
 </div>

package/components/IconedPath.svelte.d.ts

@@ -1,16 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         path: string;
+        hash?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type IconedPathProps = typeof __propDef.props;
-export declare type IconedPathEvents = typeof __propDef.events;
-export declare type IconedPathSlots = typeof __propDef.slots;
+export type IconedPathProps = typeof __propDef.props;
+export type IconedPathEvents = typeof __propDef.events;
+export type IconedPathSlots = typeof __propDef.slots;
 export default class IconedPath extends SvelteComponentTyped<IconedPathProps, IconedPathEvents, IconedPathSlots> {
 }
 export {};

package/components/IconedResourceType.svelte

@@ -1,76 +1,21 @@
-<script>import AirtableIcon from './icons/AirtableIcon.svelte';
-import DbIcon from './icons/DbIcon.svelte';
-import DiscordIcon from './icons/DiscordIcon.svelte';
-import GcalIcon from './icons/GcalIcon.svelte';
-import GCloudIcon from './icons/GCloudIcon.svelte';
-import GdriveIcon from './icons/GdriveIcon.svelte';
-import GithubIcon from './icons/GithubIcon.svelte';
-import GitlabIcon from './icons/GItlabIcon.svelte';
-import GmailIcon from './icons/GmailIcon.svelte';
-import GSheetsIcon from './icons/GSheetsIcon.svelte';
-import HttpIcon from './icons/HttpIcon.svelte';
-import Mail from './icons/Mail.svelte';
-import MastodonIcon from './icons/MastodonIcon.svelte';
-import MatrixIcon from './icons/MatrixIcon.svelte';
-import Mysql from './icons/Mysql.svelte';
-import PostgresIcon from './icons/PostgresIcon.svelte';
-import S3Icon from './icons/S3Icon.svelte';
-import Slack from './icons/Slack.svelte';
-import TogglIcon from './icons/TogglIcon.svelte';
-import WindmillIcon from './icons/WindmillIcon.svelte';
+<script>import { APP_TO_ICON_COMPONENT } from './icons';
 export let name;
 export let silent = false;
 export let after = false;
 export let height = '24px';
 export let width = '24px';
 export let center = false;
+$: name_prefix = name.split('_')[0];
 </script>
 
 <div class=" truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
-
-	{#if name === 'postgresql'}
-		<PostgresIcon {height} {width} />
-	{:else if name === 'mysql'}
-		<Mysql {height} {width} />
-	{:else if name === 'smtp'}
-		<Mail {height} {width} />
-	{:else if name === 'mongodb'}
-		<DbIcon {height} {width} />
-	{:else if name === 'slack'}
-		<Slack {height} {width} />
-	{:else if name === 'github'}
-		<GithubIcon {height} {width} />
-	{: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} />
-	{:else if name === 's3'}
-		<S3Icon {height} {width} />
-	{:else if name === 'discord' || name == 'discord_webhook'}
-		<DiscordIcon {height} {width} />
-	{:else if name === 'mastodon'}
-		<MastodonIcon {height} {width} />
-	{:else if name === 'matrix'}
-		<MatrixIcon {height} {width} />
-	{:else if name === 'windmill'}
-		<WindmillIcon {height} {width} />
-	{:else if name === 'http'}
-		<HttpIcon {height} {width} />
+	{#if APP_TO_ICON_COMPONENT[name_prefix]}
+		<span class="text-gray-700">
+			<svelte:component this={APP_TO_ICON_COMPONENT[name_prefix]} {height} {width} />
+		</span>
 	{:else}
 		<span style="width: {width}" class="bg-gray-100 rounded-full" />
 	{/if}

package/components/IconedResourceType.svelte.d.ts

@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type IconedResourceTypeProps = typeof __propDef.props;
-export declare type IconedResourceTypeEvents = typeof __propDef.events;
-export declare type IconedResourceTypeSlots = typeof __propDef.slots;
+export type IconedResourceTypeProps = typeof __propDef.props;
+export type IconedResourceTypeEvents = typeof __propDef.events;
+export type IconedResourceTypeSlots = typeof __propDef.slots;
 export default class IconedResourceType extends SvelteComponentTyped<IconedResourceTypeProps, IconedResourceTypeEvents, IconedResourceTypeSlots> {
 }
 export {};

package/components/InputTransformForm.svelte

@@ -4,16 +4,17 @@ 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 Toggle from './Toggle.svelte';
-import { Button } from './common';
-import Icon from 'svelte-awesome';
-import { faChain } from '@fortawesome/free-solid-svg-icons';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import { faCode } from '@fortawesome/free-solid-svg-icons';
 export let schema;
 export let arg;
 export let argName;
 export let extraLib = 'missing extraLib';
 export let inputCheck = true;
-export let importPath = undefined;
+export let previousModuleId;
+export let pickForField = undefined;
+export let variableEditor = undefined;
+export let itemPicker = undefined;
 export let monaco = undefined;
 let argInput = undefined;
 let inputCat = 'object';
@@ -21,8 +22,10 @@ let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';
     if (type == 'javascript') {
-        if (codeToStaticTemplate(arg.expr)) {
+        const newValue = codeToStaticTemplate(arg.expr);
+        if (newValue) {
             type = 'static';
+            arg.value = newValue;
         }
     }
     return type;
@@ -32,7 +35,7 @@ function setPropertyType(rawValue) {
         return;
     }
     if (isCodeInjection(rawValue)) {
-        arg.expr = getDefaultExpr(importPath, argName, `\`${rawValue}\``);
+        arg.expr = getDefaultExpr(argName, previousModuleId, `\`${rawValue}\``);
         arg.type = 'javascript';
         propertyType = 'static';
     }
@@ -54,12 +57,12 @@ function connectProperty(rawValue) {
         setPropertyType(arg.value);
     }
     else {
-        arg.expr = getDefaultExpr(importPath, undefined, rawValue);
+        arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
         arg.type = 'javascript';
         propertyType = 'javascript';
+        monaco?.setCode(arg.expr);
     }
 }
-$: checked = propertyType == 'javascript';
 function onFocus() {
     if (isStaticTemplate(inputCat)) {
         focusProp(argName, 'append', (path) => {
@@ -75,16 +78,17 @@ function onFocus() {
             arg.expr = path;
             arg.type = 'javascript';
             propertyType = 'javascript';
+            monaco?.setCode(arg.expr);
             return true;
         });
     }
 }
-const { focusProp } = getContext('PropPickerWrapper');
+const { focusProp, propPickerConfig } = getContext('PropPickerWrapper');
 </script>
 
 {#if arg != undefined}
-	<div class="flex justify-between items-center mb-2">
-		<div class="flex items-center">
+	<div class="flex flex-row justify-between gap-1 mb-1">
+		<div class="flex items-center flex-wrap grow">
 			<FieldHeader
 				label={argName}
 				format={schema.properties[argName].format}
@@ -94,94 +98,138 @@ const { focusProp } = getContext('PropPickerWrapper');
 				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">
+			{#if isStaticTemplate(inputCat)}
+				<span
+					class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2 {propertyType ==
+						'static' && arg.type === 'javascript'
+						? 'visible'
+						: 'invisible'}"
+				>
 					{'${...}'}
 				</span>
 			{/if}
 		</div>
-		<div class="flex flex-row space-x-2 items-center">
-			<Toggle
-				bind:checked
-				options={{
-					right: 'Raw Javascript Editor'
-				}}
-				on:change={(e) => {
-					const type = e.detail ? 'javascript' : 'static'
-					const staticTemplate = isStaticTemplate(inputCat)
-					if (type === 'javascript') {
-						arg.expr = getDefaultExpr(
-							importPath,
-							argName,
-							staticTemplate ? `\`${arg.value ?? ''}\`` : arg.value
-						)
-
-						arg.value = undefined
-						propertyType = 'javascript'
-					} else {
-						arg.value = staticTemplate ? codeToStaticTemplate(arg.expr) : undefined
-
-						arg.expr = undefined
-						propertyType = 'static'
-					}
+		<div class="flex flex-row-reverse gap-x-4 gap-y-1 flex-wrap">
+			<div>
+				<Button
+					variant="contained"
+					color="blue"
+					size="xs"
+					on:click={() => {
+						focusProp(argName, 'connect', (path) => {
+							connectProperty(path)
+							return true
+						})
+					}}>Connect &rightarrow;</Button
+				>
+			</div>
+			<div>
+				<ToggleButtonGroup
+					bind:selected={propertyType}
+					on:selected={(e) => {
+						const staticTemplate = isStaticTemplate(inputCat)
+						if (e.detail === 'javascript') {
+							if (arg.expr == undefined) {
+								arg.expr = getDefaultExpr(
+									argName,
+									previousModuleId,
+									staticTemplate
+										? `\`${arg.value ?? ''}\``
+										: arg.value
+										? JSON.stringify(arg.value, null, 4)
+										: ''
+								)
+							}
 
-					arg.type = type
-				}}
-			/>
+							arg.value = undefined
+							propertyType = 'javascript'
+							arg.type = 'javascript'
+						} else {
+							if (staticTemplate) {
+								arg.value = codeToStaticTemplate(arg.expr)
+								setPropertyType(arg.value)
+							} else {
+								arg.type = 'static'
+								arg.value = undefined
+								arg.expr = undefined
+							}
+							propertyType = 'static'
+						}
+					}}
+				>
+					{#if isStaticTemplate(inputCat)}
+						<ToggleButton light position="left" value="static" size="xs">
+							{'${} '}Templatable</ToggleButton
+						>
+					{:else}
+						<ToggleButton light position="left" value="static" size="xs">Static</ToggleButton>
+					{/if}
 
-			<Button
-				variant="contained"
-				color="blue"
-				size="md"
-				on:click={() => {
-					focusProp(argName, 'connect', (path) => {
-						connectProperty(path)
-						return false
-					})
-				}}
-			>
-				<Icon data={faChain} />
-			</Button>
+					<ToggleButton
+						light
+						position="right"
+						value="javascript"
+						startIcon={{ icon: faCode }}
+						size="xs"
+					>
+						Dynamic (JS)
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</div>
 		</div>
 	</div>
 	<div class="max-w-xs" />
 
-	{#if propertyType === undefined || !checked}
-		<ArgInput
-			bind:this={argInput}
-			on:focus={onFocus}
-			label={argName}
-			bind:editor={monaco}
-			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}
-			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}
-			properties={schema.properties[argName].properties}
-			displayHeader={false}
-			bind:inputCat
-			on:input={(e) => {
-				if (isStaticTemplate(inputCat)) {
-					setPropertyType(e.detail.rawValue)
-				}
-			}}
-		/>
-	{:else if checked}
-		{#if arg.expr != undefined}
-			<div class="border rounded p-2 mt-2 border-gray-300">
+	<div
+		class="relative {$propPickerConfig?.propName == argName
+			? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
+			: ''}"
+	>
+		{#if $propPickerConfig?.propName == argName && $propPickerConfig?.insertionMode == 'connect'}
+			<span
+				class={'text-white  z-50 px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute top-0 right-0 bg-blue-500'}
+			>
+				Connect input &rightarrow;
+			</span>
+		{/if}
+		{#if propertyType === undefined || propertyType == 'static'}
+			<ArgInput
+				noMargin
+				compact
+				bind:this={argInput}
+				on:focus={onFocus}
+				label={argName}
+				bind:editor={monaco}
+				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}
+				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}
+				properties={schema.properties[argName].properties}
+				displayHeader={false}
+				bind:inputCat
+				on:input={(e) => {
+					if (isStaticTemplate(inputCat)) {
+						setPropertyType(e.detail.rawValue)
+					}
+				}}
+				{variableEditor}
+				{itemPicker}
+				bind:pickForField
+			/>
+		{:else if arg.expr != undefined}
+			<div class="border rounded mt-2 border-gray-300">
 				<SimpleEditor
 					bind:this={monaco}
 					bind:code={arg.expr}
 					{extraLib}
 					lang="javascript"
-					class="few-lines-editor"
-					extraLibPath="file:///node_modules/@types/windmill@{importPath}/index.d.ts"
 					shouldBindKey={false}
 					on:focus={() => {
 						focusProp(argName, 'insert', (path) => {
@@ -189,14 +237,16 @@ const { focusProp } = getContext('PropPickerWrapper');
 							return false
 						})
 					}}
+					autoHeight
 				/>
 			</div>
-			<DynamicInputHelpBox {importPath} />
+			<DynamicInputHelpBox />
 			<div class="mb-2" />
+		{:else}
+			Not recognized input type {argName}
 		{/if}
-	{:else}
-		<p>Not recognized arg type {arg.type}</p>
-	{/if}
+	</div>
+	<div class="mb-6" />
 {:else}
 	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>
 {/if}

package/components/InputTransformForm.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import type { InputTransform } from '../gen';
 import SimpleEditor from './SimpleEditor.svelte';
+import type VariableEditor from './VariableEditor.svelte';
+import type ItemPicker from './ItemPicker.svelte';
+import type { InputTransform } from '../gen';
 declare const __propDef: {
     props: {
         schema: Schema;
@@ -9,7 +11,10 @@ declare const __propDef: {
         argName: string;
         extraLib?: string | undefined;
         inputCheck?: boolean | undefined;
-        importPath?: string | undefined;
+        previousModuleId: string | undefined;
+        pickForField?: string | undefined;
+        variableEditor?: VariableEditor | undefined;
+        itemPicker?: ItemPicker | undefined;
         monaco?: SimpleEditor | undefined;
     };
     events: {
@@ -17,9 +22,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InputTransformFormProps = typeof __propDef.props;
-export declare type InputTransformFormEvents = typeof __propDef.events;
-export declare type InputTransformFormSlots = typeof __propDef.slots;
+export type InputTransformFormProps = typeof __propDef.props;
+export type InputTransformFormEvents = typeof __propDef.events;
+export type InputTransformFormSlots = typeof __propDef.slots;
 export default class InputTransformForm extends SvelteComponentTyped<InputTransformFormProps, InputTransformFormEvents, InputTransformFormSlots> {
 }
 export {};

package/components/InputTransformsViewer.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InputTransformsViewerProps = typeof __propDef.props;
-export declare type InputTransformsViewerEvents = typeof __propDef.events;
-export declare type InputTransformsViewerSlots = typeof __propDef.slots;
+export type InputTransformsViewerProps = typeof __propDef.props;
+export type InputTransformsViewerEvents = typeof __propDef.events;
+export type InputTransformsViewerSlots = typeof __propDef.slots;
 export default class InputTransformsViewer extends SvelteComponentTyped<InputTransformsViewerProps, InputTransformsViewerEvents, InputTransformsViewerSlots> {
 }
 export {};

package/components/InviteGlobalUser.svelte

@@ -26,7 +26,7 @@ async function addUser() {
             company
         }
     });
-    sendUserToast(`Successfully added ${email}. Welcome to them!`);
+    sendUserToast(`Added ${email}`);
     dispatch('new');
 }
 </script>
@@ -34,7 +34,7 @@ async function addUser() {
 <div class="flex flex-row space-x-1">
 	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
 
-	<Toggle class="mx-2" bind:checked={is_super_admin} options={{ right: 'admin' }} />
+	<Toggle class="mx-2" bind:checked={is_super_admin} options={{ right: 'superadmin' }} />
 	<input on:keyup={handleKeyUp} type="password" placeholder="password" bind:value={password} />
 	<input type="text" on:keyup={handleKeyUp} placeholder="name" bind:value={name} />
 	<input type="text" on:keyup={handleKeyUp} placeholder="company" bind:value={company} />

package/components/InviteGlobalUser.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         new: CustomEvent<any>;
     } & {
@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InviteGlobalUserProps = typeof __propDef.props;
-export declare type InviteGlobalUserEvents = typeof __propDef.events;
-export declare type InviteGlobalUserSlots = typeof __propDef.slots;
+export type InviteGlobalUserProps = typeof __propDef.props;
+export type InviteGlobalUserEvents = typeof __propDef.events;
+export type InviteGlobalUserSlots = typeof __propDef.slots;
 export default class InviteGlobalUser extends SvelteComponentTyped<InviteGlobalUserProps, InviteGlobalUserEvents, InviteGlobalUserSlots> {
 }
 export {};

package/components/InviteUser.svelte

@@ -2,8 +2,8 @@
 import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import { WorkspaceService } from '../gen';
-import { Button } from './common';
-import Toggle from './Toggle.svelte';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 let email;
 let is_admin = false;
@@ -19,18 +19,32 @@ async function inviteUser() {
         workspace: $workspaceStore,
         requestBody: {
             email,
-            is_admin
+            is_admin: selected == 'admin',
+            operator: selected == 'operator'
         }
     });
-    sendUserToast(`Successfully invited ${email}. Welcome to them!`);
+    sendUserToast(`Invited ${email}`);
     dispatch('new');
 }
+let selected = 'author';
 </script>
 
 <div class="flex flex-row">
 	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} class="mr-4" />
-
-	<Toggle bind:checked={is_admin} options={{ right: 'admin' }} />
+	<ToggleButtonGroup bind:selected>
+		<ToggleButton position="left" value="operator" size="sm"
+			>Operator <Tooltip
+				>An operator can only execute and view scripts/flows/apps from your workspace, and only
+				those that he has visibility on</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="center" value="author" size="sm"
+			>Author <Tooltip
+				>An Author can execute and view scripts/flows/apps, but he can also create new ones</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="right" value="admin" size="sm">Admin</ToggleButton>
+	</ToggleButtonGroup>
 	<Button
 		variant="contained"
 		color="blue"

package/components/InviteUser.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         new: CustomEvent<any>;
     } & {
@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type InviteUserProps = typeof __propDef.props;
-export declare type InviteUserEvents = typeof __propDef.events;
-export declare type InviteUserSlots = typeof __propDef.slots;
+export type InviteUserProps = typeof __propDef.props;
+export type InviteUserEvents = typeof __propDef.events;
+export type InviteUserSlots = typeof __propDef.slots;
 export default class InviteUser extends SvelteComponentTyped<InviteUserProps, InviteUserEvents, InviteUserSlots> {
 }
 export {};