windmill-components 1.36.2 → 1.46.1

package/components/FlowViewer.svelte

@@ -5,8 +5,11 @@ import { Tab, Tabs, TabContent, Button } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import SvelteMarkdown from 'svelte-markdown';
-import FlowModulesViewer from './FlowModulesViewer.svelte';
-import { copyToClipboard } from '../utils';
+import { copyToClipboard, scriptPathToHref } from '../utils';
+import { FlowGraph } from './graph';
+import HighlightCode from './HighlightCode.svelte';
+import InputTransformsViewer from './InputTransformsViewer.svelte';
+import IconedPath from './IconedPath.svelte';
 export let flow;
 export let initialOpen = undefined;
 $: flowFiltered = {
@@ -16,6 +19,8 @@ $: flowFiltered = {
     schema: flow.schema
 };
 export let tab = 'ui';
+export let noSummary = false;
+let stepDetail = undefined;
 let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
@@ -33,11 +38,13 @@ function toAny(x) {
 	<svelte:fragment slot="content">
 		<TabContent value="ui">
 			<div class="flow-root w-full pb-4">
-				<h2 class="my-4">{flow.summary}</h2>
-				<SvelteMarkdown source={flow.description ?? ''} />
+				{#if !noSummary}
+					<h2 class="my-4">{flow.summary}</h2>
+					<SvelteMarkdown source={flow.description ?? ''} />
+				{/if}
 
 				<p class="font-black text-lg w-full my-4">
-					<span>Inputs</span>
+					<span>Flow Input</span>
 				</p>
 				{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
 					<ul class="my-2">
@@ -61,10 +68,78 @@ function toAny(x) {
 				{:else}
 					<div class="text-gray-700 text-xs italic mb-4">No inputs</div>
 				{/if}
-				<FlowModulesViewer
-					modules={flow?.value?.modules}
-					failureModule={flow?.value?.failure_module}
-				/>
+				<div class="pr-40 flex flex-col">
+					<div class="mt-5 h-full w-full border border-gray-700">
+						<FlowGraph
+							modules={flow?.value?.modules}
+							failureModule={flow?.value?.failure_module}
+							on:click={(e) => (stepDetail = e.detail)}
+						/>
+					</div>
+					<div class="w-full border-l border-r border-b border-gray-700 min-h-[150px] p-2">
+						{#if stepDetail == undefined}
+							<span class="font-black text-lg w-full my-4">
+								<span>Click on a step to see its details</span>
+							</span>
+						{:else}
+							<div class="font-black text-lg w-full mb-2 "
+								>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal"
+									>{stepDetail.summary || ''}</span
+								></div
+							>
+							{#if stepDetail.value.type == 'identity'}
+								<div> An identity step return as output its input </div>
+							{:else if stepDetail.value.type == 'rawscript'}
+								<div class="text-2xs mb-4">
+									<h3>Step Inputs</h3>
+									<InputTransformsViewer
+										inputTransforms={stepDetail?.value?.input_transforms ??
+											stepDetail?.input_transforms ??
+											{}}
+									/>
+								</div>
+
+								<h3>Code</h3>
+								<HighlightCode
+									language={stepDetail.value.language}
+									code={stepDetail.value.content}
+								/>
+							{:else if stepDetail.value.type == 'script'}
+								<div class="mb-4">
+									<a
+										rel="noreferrer"
+										target="_blank"
+										href={scriptPathToHref(stepDetail?.value?.path ?? '')}
+										class=""
+									>
+										<IconedPath path={stepDetail?.value?.path ?? ''} />
+									</a>
+								</div>
+								<div class="text-2xs mb-4">
+									<h3>Step Inputs</h3>
+									<InputTransformsViewer
+										inputTransforms={stepDetail?.value?.input_transforms ??
+											stepDetail?.input_transforms ??
+											{}}
+									/>
+								</div>
+								{#if stepDetail.value.path.startsWith('hub/')}
+									<div class="mt-6">
+										<h3>Code</h3>
+										<iframe
+											class="w-full h-full  text-sm"
+											title="embedded script from hub"
+											frameborder="0"
+											src="https://hub.windmill.dev/embed/script/{stepDetail.value?.path?.substring(
+												4
+											)}"
+										/>
+									</div>
+								{/if}
+							{/if}
+						{/if}
+					</div>
+				</div>
 			</div>
 		</TabContent>
 		<TabContent value="json">

package/components/FlowViewer.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         };
         initialOpen?: number | undefined;
         tab?: "json" | "schema" | "ui" | undefined;
+        noSummary?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/GroupModal.svelte

@@ -1,13 +1,12 @@
 <script>import { userStore, workspaceStore } from '../stores';
-import Modal from './Modal.svelte';
 import { GroupService, UserService } from '../gen';
 import AutoComplete from 'simple-svelte-autocomplete';
-import PageHeader from './PageHeader.svelte';
 import TableCustom from './TableCustom.svelte';
 import { canWrite } from '../utils';
-import { Button } from './common';
+import { Button, Drawer } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
 let name = '';
-let modal;
+let drawer;
 let can_write = false;
 let group;
 let members = [];
@@ -26,11 +25,11 @@ $: {
         });
     }
 }
-export function openModal(newName) {
+export function openDrawer(newName) {
     name = newName;
     loadGroup();
     loadUsernames();
-    modal.openModal();
+    drawer.openDrawer();
 }
 async function addToGroup() {
     await GroupService.addUserToGroup({
@@ -46,14 +45,14 @@ async function loadGroup() {
 }
 </script>
 
-<Modal bind:this={modal}>
-	<div slot="title">group {name}</div>
-	<div slot="content">
-		<PageHeader title="Summary" />
-		<p>{group?.summary ?? 'No summary'}</p>
-		<PageHeader title="Members">
+<Drawer bind:this={drawer}>
+	<DrawerContent title="Group {name}" on:close={drawer.closeDrawer}>
+		<div class="flex flex-col gap-6">
+			<h2>Summary</h2>
+			<p>{group?.summary ?? 'No summary'}</p>
+			<h2>Members</h2>
 			{#if can_write}
-				<div>
+				<div class="flex items-start">
 					<AutoComplete items={usernames} bind:selectedItem={username} />
 					<Button
 						variant="contained"
@@ -66,34 +65,34 @@ async function loadGroup() {
 					</Button>
 				</div>
 			{/if}
-		</PageHeader>
-		<TableCustom>
-			<tr slot="header-row">
-				<th>user</th>
-				<th>admin of group</th>
-				<th />
-			</tr>
-			<tbody slot="body">
-				{#each members as { name, isAdmin }}<tr>
-						<td>{name}</td>
-						<td> {isAdmin ? 'admin' : ''} </td>
-						<td>
-							{#if can_write}
-								<button
-									class="ml-2 text-red-500"
-									on:click={async () => {
-										await GroupService.removeUserToGroup({
-											workspace: $workspaceStore ?? '',
-											name: group?.name ?? '',
-											requestBody: { username: name }
-										})
-										loadGroup()
-									}}>remove</button
-								>
-							{/if}</td
-						>
-					</tr>{/each}
-			</tbody></TableCustom
-		>
-	</div>
-</Modal>
+			<TableCustom>
+				<tr slot="header-row">
+					<th>user</th>
+					<th>admin of group</th>
+					<th />
+				</tr>
+				<tbody slot="body">
+					{#each members as { name, isAdmin }}<tr>
+							<td>{name}</td>
+							<td> {isAdmin ? 'admin' : ''} </td>
+							<td>
+								{#if can_write}
+									<button
+										class="ml-2 text-red-500"
+										on:click={async () => {
+											await GroupService.removeUserToGroup({
+												workspace: $workspaceStore ?? '',
+												name: group?.name ?? '',
+												requestBody: { username: name }
+											})
+											loadGroup()
+										}}>remove</button
+									>
+								{/if}</td
+							>
+						</tr>{/each}
+				</tbody>
+			</TableCustom>
+		</div>
+	</DrawerContent>
+</Drawer>

package/components/GroupModal.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        openModal?: ((newName: string) => void) | undefined;
+        openDrawer?: ((newName: string) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -12,6 +12,6 @@ export declare type GroupModalProps = typeof __propDef.props;
 export declare type GroupModalEvents = typeof __propDef.events;
 export declare type GroupModalSlots = typeof __propDef.slots;
 export default class GroupModal extends SvelteComponentTyped<GroupModalProps, GroupModalEvents, GroupModalSlots> {
-    get openModal(): (newName: string) => void;
+    get openDrawer(): (newName: string) => void;
 }
 export {};

package/components/HighlightCode.svelte

@@ -2,6 +2,7 @@
 import python from 'svelte-highlight/languages/python';
 import typescript from 'svelte-highlight/languages/typescript';
 import go from 'svelte-highlight/languages/go';
+import shell from 'svelte-highlight/languages/shell';
 export let code = '';
 export let language;
 function getLang(lang) {
@@ -12,8 +13,10 @@ function getLang(lang) {
             return typescript;
         case 'go':
             return go;
+        case 'bash':
+            return shell;
         default:
-            return python;
+            return typescript;
     }
 }
 $: lang = getLang(language);

package/components/HighlightCode.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         code?: string | undefined;
-        language: 'python3' | 'deno' | 'go' | undefined;
+        language: 'python3' | 'deno' | 'go' | 'bash' | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/IconedResourceType.svelte

@@ -1,5 +1,4 @@
-<script>import Icon from 'svelte-awesome';
-import AirtableIcon from './icons/AirtableIcon.svelte';
+<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';
@@ -24,9 +23,10 @@ export let silent = false;
 export let after = false;
 export let height = '24px';
 export let width = '24px';
+export let center = false;
 </script>
 
-<div class="flex flex-row gap-2 justify-center -pl-2 whitespace-nowrap">
+<div class=" truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
@@ -42,7 +42,7 @@ export let width = '24px';
 	{:else if name === 'slack'}
 		<Slack {height} {width} />
 	{:else if name === 'github'}
-		<GithubIcon />
+		<GithubIcon {height} {width} />
 	{:else if name === 'gmail'}
 		<GmailIcon {height} {width} />
 	{:else if name === 'gsheets'}
@@ -71,6 +71,8 @@ export let width = '24px';
 		<WindmillIcon {height} {width} />
 	{:else if name === 'http'}
 		<HttpIcon {height} {width} />
+	{:else}
+		<span style="width: {width}" class="bg-gray-100 rounded-full" />
 	{/if}
 	{#if !silent && after}
 		{name}

package/components/IconedResourceType.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         after?: boolean | undefined;
         height?: string | undefined;
         width?: string | undefined;
+        center?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/InputTransformForm.svelte

@@ -12,10 +12,11 @@ export let schema;
 export let arg;
 export let argName;
 export let extraLib = 'missing extraLib';
-export let inputCheck;
+export let inputCheck = true;
 export let importPath = undefined;
-let monacos = {};
-let inputCats = {};
+export let monaco = undefined;
+let argInput = undefined;
+let inputCat = 'object';
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';
@@ -47,8 +48,8 @@ function setPropertyType(rawValue) {
 function isStaticTemplate(inputCat) {
     return inputCat === 'string' || inputCat === 'sql';
 }
-function connectProperty(argName, rawValue) {
-    if (isStaticTemplate(inputCats[argName])) {
+function connectProperty(rawValue) {
+    if (isStaticTemplate(inputCat)) {
         arg.value = `\$\{${rawValue}}`;
         setPropertyType(arg.value);
     }
@@ -59,6 +60,25 @@ function connectProperty(argName, rawValue) {
     }
 }
 $: checked = propertyType == 'javascript';
+function onFocus() {
+    if (isStaticTemplate(inputCat)) {
+        focusProp(argName, 'append', (path) => {
+            const toAppend = `\$\{${path}}`;
+            arg.value = `${arg.value ?? ''}${toAppend}`;
+            setPropertyType(arg.value);
+            argInput?.focus();
+            return false;
+        });
+    }
+    else {
+        focusProp(argName, 'insert', (path) => {
+            arg.expr = path;
+            arg.type = 'javascript';
+            propertyType = 'javascript';
+            return true;
+        });
+    }
+}
 const { focusProp } = getContext('PropPickerWrapper');
 </script>
 
@@ -88,7 +108,7 @@ const { focusProp } = getContext('PropPickerWrapper');
 				}}
 				on:change={(e) => {
 					const type = e.detail ? 'javascript' : 'static'
-					const staticTemplate = isStaticTemplate(inputCats[argName])
+					const staticTemplate = isStaticTemplate(inputCat)
 					if (type === 'javascript') {
 						arg.expr = getDefaultExpr(
 							importPath,
@@ -108,47 +128,36 @@ const { focusProp } = getContext('PropPickerWrapper');
 					arg.type = type
 				}}
 			/>
-			<div
+
+			<Button
+				variant="contained"
+				color="blue"
+				size="md"
 				on:click={() => {
 					focusProp(argName, 'connect', (path) => {
-						connectProperty(argName, path)
+						connectProperty(path)
+						return false
 					})
 				}}
 			>
-				<Button variant="contained" color="blue" size="md">
-					<Icon data={faChain} />
-				</Button>
-			</div>
+				<Icon data={faChain} />
+			</Button>
 		</div>
 	</div>
 	<div class="max-w-xs" />
 
 	{#if propertyType === undefined || !checked}
 		<ArgInput
-			on:focus={() => {
-				if (isStaticTemplate(inputCats[argName])) {
-					focusProp(argName, 'append', (path) => {
-						const toAppend = `\$\{${path}}`
-						arg.value = `${arg.value ?? ''}${toAppend}`
-						setPropertyType(arg.value)
-					})
-				} else {
-					focusProp(argName, 'insert', (path) => {
-						console.log('path', path)
-						arg.expr = path
-						arg.type = 'javascript'
-						propertyType = 'javascript'
-					})
-				}
-			}}
+			bind:this={argInput}
+			on:focus={onFocus}
 			label={argName}
-			bind:editor={monacos[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[argName]}
+			bind:valid={inputCheck}
 			defaultValue={schema.properties[argName].default}
 			bind:enum_={schema.properties[argName].enum}
 			bind:format={schema.properties[argName].format}
@@ -156,9 +165,9 @@ const { focusProp } = getContext('PropPickerWrapper');
 			bind:itemsType={schema.properties[argName].items}
 			properties={schema.properties[argName].properties}
 			displayHeader={false}
-			bind:inputCat={inputCats[argName]}
+			bind:inputCat
 			on:input={(e) => {
-				if (isStaticTemplate(inputCats[argName])) {
+				if (isStaticTemplate(inputCat)) {
 					setPropertyType(e.detail.rawValue)
 				}
 			}}
@@ -167,18 +176,19 @@ const { focusProp } = getContext('PropPickerWrapper');
 		{#if arg.expr != undefined}
 			<div class="border rounded p-2 mt-2 border-gray-300">
 				<SimpleEditor
-					bind:this={monacos[argName]}
-					on:focus={() => {
-						focusProp(argName, 'insert', (path) => {
-							monacos[argName].insertAtCursor(path)
-						})
-					}}
+					bind:this={monaco}
 					bind:code={arg.expr}
+					{extraLib}
 					lang="javascript"
 					class="few-lines-editor"
-					{extraLib}
 					extraLibPath="file:///node_modules/@types/windmill@{importPath}/index.d.ts"
 					shouldBindKey={false}
+					on:focus={() => {
+						focusProp(argName, 'insert', (path) => {
+							monaco?.insertAtCursor(path)
+							return false
+						})
+					}}
 				/>
 			</div>
 			<DynamicInputHelpBox {importPath} />
@@ -188,5 +198,5 @@ const { focusProp } = getContext('PropPickerWrapper');
 		<p>Not recognized arg type {arg.type}</p>
 	{/if}
 {:else}
-	<p>Arg at {argName} is undefined</p>
+	<p class="text-sm text-gray-700">Arg at {argName} is undefined</p>
 {/if}

package/components/InputTransformForm.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 import type { InputTransform } from '../gen';
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         schema: Schema;
         arg: InputTransform | any;
         argName: string;
         extraLib?: string | undefined;
-        inputCheck: {
-            [id: string]: boolean;
-        };
+        inputCheck?: boolean | undefined;
         importPath?: string | undefined;
+        monaco?: SimpleEditor | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/InputTransformsViewer.svelte

@@ -1,6 +1,7 @@
 <script>import { Highlight } from 'svelte-highlight';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 import typescript from 'svelte-highlight/languages/typescript';
+import { cleanExpr } from './flows/utils';
 export let inputTransforms;
 </script>
 
@@ -11,7 +12,7 @@ export let inputTransforms;
 					json={val.value}
 				/>{:else}
 				<span class="text-xs">
-					<Highlight offsetTop={0} language={typescript} code={val.expr} />
+					<Highlight offsetTop={0} language={typescript} code={cleanExpr(val.expr)} />
 				</span>
 			{/if}
 		</li>

package/components/InviteGlobalUser.svelte

@@ -1,13 +1,9 @@
 <script>import { sendUserToast } from '../utils';
-import Switch from './Switch.svelte';
 import { createEventDispatcher } from 'svelte';
 import { UserService } from '../gen';
 import { Button } from './common';
+import Toggle from './Toggle.svelte';
 const dispatch = createEventDispatcher();
-let modal;
-export function openModal() {
-    modal.openModal();
-}
 let email;
 let is_super_admin = false;
 let password;
@@ -35,13 +31,13 @@ async function addUser() {
 }
 </script>
 
-<div class="flex flex-row">
-	<input on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+<div class="flex flex-row space-x-1">
+	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
 
-	<Switch class="ml-2" bind:checked={is_super_admin} horizontal={true} label={'admin: '} />
+	<Toggle class="mx-2" bind:checked={is_super_admin} options={{ right: 'admin' }} />
 	<input on:keyup={handleKeyUp} type="password" placeholder="password" bind:value={password} />
-	<input on:keyup={handleKeyUp} placeholder="name" bind:value={name} />
-	<input on:keyup={handleKeyUp} placeholder="company" bind:value={company} />
+	<input type="text" on:keyup={handleKeyUp} placeholder="name" bind:value={name} />
+	<input type="text" on:keyup={handleKeyUp} placeholder="company" bind:value={company} />
 
 	<Button
 		variant="contained"

package/components/InviteGlobalUser.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        openModal?: (() => void) | undefined;
-    };
+    props: {};
     events: {
         new: CustomEvent<any>;
     } & {
@@ -14,6 +12,5 @@ export declare type InviteGlobalUserProps = typeof __propDef.props;
 export declare type InviteGlobalUserEvents = typeof __propDef.events;
 export declare type InviteGlobalUserSlots = typeof __propDef.slots;
 export default class InviteGlobalUser extends SvelteComponentTyped<InviteGlobalUserProps, InviteGlobalUserEvents, InviteGlobalUserSlots> {
-    get openModal(): () => void;
 }
 export {};

package/components/InviteUser.svelte

@@ -1,14 +1,10 @@
 <script>import { sendUserToast } from '../utils';
-import Switch from './Switch.svelte';
 import { createEventDispatcher } from 'svelte';
 import { workspaceStore } from '../stores';
 import { WorkspaceService } from '../gen';
 import { Button } from './common';
+import Toggle from './Toggle.svelte';
 const dispatch = createEventDispatcher();
-let modal;
-export function openModal() {
-    modal.openModal();
-}
 let email;
 let is_admin = false;
 function handleKeyUp(event) {
@@ -32,14 +28,14 @@ async function inviteUser() {
 </script>
 
 <div class="flex flex-row">
-	<input on:keyup={handleKeyUp} placeholder="email" bind:value={email} />
+	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} class="mr-4" />
 
-	<Switch class="ml-2" bind:checked={is_admin} horizontal={true} label={'admin: '} />
+	<Toggle bind:checked={is_admin} options={{ right: 'admin' }} />
 	<Button
 		variant="contained"
 		color="blue"
 		size="sm"
-		btnClasses="!ml-4"
+		btnClasses="!ml-8"
 		on:click={inviteUser}
 		disabled={email === undefined}
 	>

package/components/InviteUser.svelte.d.ts

@@ -1,8 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        openModal?: (() => void) | undefined;
-    };
+    props: {};
     events: {
         new: CustomEvent<any>;
     } & {
@@ -14,6 +12,5 @@ export declare type InviteUserProps = typeof __propDef.props;
 export declare type InviteUserEvents = typeof __propDef.events;
 export declare type InviteUserSlots = typeof __propDef.slots;
 export default class InviteUser extends SvelteComponentTyped<InviteUserProps, InviteUserEvents, InviteUserSlots> {
-    get openModal(): () => void;
 }
 export {};