windmill-components 1.46.3 → 1.55.0

package/components/Dropdown.svelte

@@ -1,107 +1,86 @@
-<script>import { clickOutside } from '../utils';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons';
-import { Button } from './common';
-let open = false;
+import { Button, Menu } from './common';
 export let dropdownItems;
 export let name = undefined;
-// The dropdown is positioned versus its first relatively positioned partent
-// By default, the dropdown is positioned relative to its button
-// This can cause the dropdown to be hidden if it is in an overflow-hidden div.
-// In that case, set relative to false and control the dropdown positioning from the div
-export let relative = true;
-export let left = true;
+export let placement = 'bottom-start';
 const dispatch = createEventDispatcher();
-function toggle() {
-    open = !open;
-}
-function handleClickOutsideMenu(event) {
-    open = false;
-}
 </script>
 
-<div
-	class="ml-2 {relative ? 'relative' : ''} {$$props.class}"
-	use:clickOutside
-	on:click_outside={handleClickOutsideMenu}
->
-	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" on:click={toggle}>
+<Menu {placement} let:close>
+	<Button color="light" size="xs" btnClasses="!text-blue-500 bg-transparent" slot="trigger">
 		{#if !$$slots.default}
 			<Icon data={faEllipsisH} scale={1.2} />
 		{:else}
 			<slot />
 		{/if}
 	</Button>
-	<div
-		class="flex flex-col z-50 origin-top-right absolute {left
-			? 'right-0'
-			: 'left-0'} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none {open
-			? 'visible'
-			: 'hidden'}"
-		role="menu"
-		tabindex="-1"
-	>
-		{#if dropdownItems}
-			{#each dropdownItems as item, i}
-				{#if item.action}
-					<button
-						on:click={(event) => {
-							if (!item.disabled) {
-								event.preventDefault()
-								open = false
-								item.action && item.action(event)
-								dispatch('click', { item: item?.eventName })
-							}
-						}}
-						class="block hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left{item.separatorTop
-							? 'border-t'
-							: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
-							? 'text-red-500'
-							: ''}"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-						disabled={item.disabled}
-						class:disabled={item.disabled}
-					>
-						{#if item.icon}
-							<Icon
-								data={item.icon}
-								scale={0.6}
-								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
-							/>
-						{/if}{item.displayName}
-					</button>
-				{:else if item.href}
-					<a
-						href={item.href}
-						on:click={() => {
-							if (!item.disabled) {
-								open = false
-							}
-						}}
-						class="block px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}"
-						class:disabled={item.disabled}
-						>{#if item.icon}
-							<Icon
-								data={item.icon}
-								scale={0.6}
-								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
-							/>
-						{/if}{item.displayName}</a
-					>
-				{:else}
-					<span
-						class="block px-4 py-2 text-sm text-gray-700"
-						role="menuitem"
-						tabindex="-1"
-						id="user-menu-item-{name}-{i}}">{item.displayName}</span
-					>{/if}
-			{/each}
-		{/if}
-	</div>
-</div>
+	{#if dropdownItems}
+		{#each dropdownItems as item, i}
+			{#if item.action}
+				<button
+					on:click={(event) => {
+						if (!item.disabled) {
+							event.preventDefault()
+							close()
+							item.action && item.action(event)
+							dispatch('click', { item: item?.eventName })
+						}
+					}}
+					class="block w-full whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30 px-4 py-2 text-sm text-gray-700 text-left {item.separatorTop
+						? 'border-t'
+						: ''} {item.separatorBottom ? 'border-b' : ''} {item.type == 'delete'
+						? 'text-red-500'
+						: ''}"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+					disabled={item.disabled}
+					class:disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</button>
+			{:else if item.href}
+				<a
+					href={item.href}
+					on:click={() => {
+						if (!item.disabled) {
+							close()
+						}
+					}}
+					class="block w-full px-4 py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+					class:disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</a>
+			{:else}
+				<span
+					class="block  px-4 py-2 text-sm text-gray-700"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+				>
+					{item.displayName}
+				</span>
+			{/if}
+		{/each}
+	{/if}
+</Menu>

package/components/Dropdown.svelte.d.ts

@@ -2,11 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 import type { DropdownItem } from '../utils';
 declare const __propDef: {
     props: {
-        [x: string]: any;
         dropdownItems: DropdownItem[];
         name?: string | undefined;
-        relative?: boolean | undefined;
-        left?: boolean | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
     };
     events: {
         click: CustomEvent<any>;
@@ -17,9 +15,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type DropdownProps = typeof __propDef.props;
-export declare type DropdownEvents = typeof __propDef.events;
-export declare type DropdownSlots = typeof __propDef.slots;
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
 export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
 }
 export {};

package/components/Editor.svelte

@@ -9,6 +9,16 @@ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSuggestionDiagnostics: true,
     noSyntaxValidation: true
 });
+monaco.editor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+monaco.editor.setTheme('myTheme');
 </script>
 
 <script>import { browser, dev } from '$app/env';
@@ -41,6 +51,7 @@ export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false, go: false };
 export let shouldBindKey = true;
+export let fixedOverflowWidgets = true;
 let websockets = [];
 let websocketInterval;
 let lastWsAttempt = new Date();
@@ -343,15 +354,15 @@ async function closeWebsockets() {
 async function loadMonaco() {
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
+    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
+            dispatch('change');
         }, 500);
-        dispatch('change');
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
@@ -408,12 +419,13 @@ onDestroy(() => {
 });
 </script>
 
-<div bind:this={divEl} class={$$props.class} />
+<div bind:this={divEl} class="{$$props.class} editor" />
 
 <style>
 	.editor {
-		padding-left: 0px;
-		padding-right: 0px;
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh
+    border-radius: 0.375rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+    padding: 0px
 }</style>

package/components/Editor.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
             go: boolean;
         } | undefined;
         shouldBindKey?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;
@@ -34,9 +35,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type EditorProps = typeof __propDef.props;
-export declare type EditorEvents = typeof __propDef.events;
-export declare type EditorSlots = typeof __propDef.slots;
+export type EditorProps = typeof __propDef.props;
+export type EditorEvents = typeof __propDef.events;
+export type EditorSlots = typeof __propDef.slots;
 export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
     get getCode(): () => string;
     get insertAtCursor(): (code: string) => void;

package/components/EditorBar.svelte

@@ -1,31 +1,34 @@
 <script context="module">export const EDITOR_BAR_WIDTH_THRESHOLD = 1044;
 </script>
 
-<script>import { ResourceService, ScriptService, VariableService } from '../gen';
-import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
-import { faCode, faCube, faDollarSign, faRotate, faRotateLeft, faWallet } from '@fortawesome/free-solid-svg-icons';
-import { hubScripts, workspaceStore } from '../stores';
+<script>import { ResourceService, VariableService } from '../gen';
+import { getScriptByPath, sendUserToast } from '../utils';
+import { faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Button from './common/button/Button.svelte';
 import HighlightCode from './HighlightCode.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { Drawer } from './common';
+import { Badge, Drawer } from './common';
+import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte';
+import PickHubScript from './flows/pickers/PickHubScript.svelte';
+import ToggleHubWorkspace from './ToggleHubWorkspace.svelte';
+import Skeleton from './common/skeleton/Skeleton.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
 export let iconOnly = false;
 export let validCode = true;
+export let kind = 'script';
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
-let scriptPicker;
 let variableEditor;
 let resourceEditor;
 let codeViewer;
-let codeLang = 'deno';
-let codeContent = '';
+let codeObj = undefined;
 function addEditorActions() {
     editor.addAction('insert-variable', 'Windmill: Insert variable', () => {
         variablePicker.openDrawer();
@@ -36,42 +39,44 @@ function addEditorActions() {
 }
 $: editor && addEditorActions();
 async function loadVariables() {
-    return (await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => {
-        return { name: x.path, ...x };
-    });
+    return await VariableService.listVariable({ workspace: $workspaceStore ?? '' });
 }
 async function loadContextualVariables() {
     return await VariableService.listContextualVariables({
         workspace: $workspaceStore ?? 'NO_W'
     });
 }
-async function loadScripts() {
-    const workspaceScripts = await ScriptService.listScripts({
-        workspace: $workspaceStore ?? 'NO_W'
-    });
-    await loadHubScripts();
-    const hubScripts_ = $hubScripts ?? [];
-    return workspaceScripts.concat(hubScripts_);
+let scriptPicker;
+let pick_existing = 'hub';
+let filter = '';
+async function onScriptPick(e) {
+    codeObj = undefined;
+    codeViewer?.openDrawer?.();
+    codeObj = await getScriptByPath(e.detail.path ?? '');
 }
 </script>
 
-<ItemPicker
-	bind:this={scriptPicker}
-	pickCallback={async (path, _) => {
-		const { language, content } = await getScriptByPath(path ?? '')
-		codeContent = content
-		codeLang = language
-		codeViewer.openDrawer()
-	}}
-	closeOnClick={false}
-	itemName="script"
-	extraField="summary"
-	loadItems={loadScripts}
-/>
+<Drawer bind:this={scriptPicker} size="900px">
+	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
+		{#if pick_existing == 'hub'}
+			<PickHubScript bind:filter {kind} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</PickHubScript>
+		{:else}
+			<WorkspaceScriptPicker bind:filter {kind} on:pick={onScriptPick}>
+				<ToggleHubWorkspace bind:selected={pick_existing} />
+			</WorkspaceScriptPicker>
+		{/if}
+	</DrawerContent>
+</Drawer>
 
 <Drawer bind:this={codeViewer} size="600px">
 	<DrawerContent title="Code" on:close={codeViewer.closeDrawer}>
-		<HighlightCode language={codeLang} code={codeContent} />
+		{#if codeObj}
+			<HighlightCode language={codeObj?.language} code={codeObj?.content} />
+		{:else}
+			<Skeleton layout={[[40]]} />
+		{/if}
 	</DrawerContent>
 </Drawer>
 
@@ -121,18 +126,18 @@ async function loadScripts() {
 			}
 			editor.insertAtCursor(`v, _ := wmill.GetVariable("${path}")`)
 		} else if (lang == 'bash') {
-			sendUserToast('Not supported yet', true)
+			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
+  "$WM_BASE_URL/api/w/$WM_WORKSPACE/variables/get/${path}" \\
+  | jq -r .value`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
 	itemName="Variable"
-	extraField="name"
+	extraField="path"
 	loadItems={loadVariables}
+	buttons={{ 'Edit/View': (x) => variableEditor.editVariable(x) }}
 >
 	<div slot="submission" class="flex flex-row">
-		<div class="text-xs mr-2 align-middle">
-			The variable you were looking for does not exist yet?
-		</div>
 		<Button
 			variant="border"
 			color="blue"
@@ -167,28 +172,28 @@ async function loadScripts() {
 			}
 			editor.insertAtCursor(`r, _ := wmill.GetResource("${path}")`)
 		} else if (lang == 'bash') {
-			sendUserToast('Not supported yet', true)
+			editor.insertAtCursor(`curl -s -H "Authorization: Bearer $WM_TOKEN" \\
+  "$WM_BASE_URL/api/w/$WM_WORKSPACE/resources/get/${path}" \\
+  | jq -r .value`)
 		}
 		sendUserToast(`${path} inserted at cursor`)
 	}}
 	itemName="Resource"
-	extraField="resource_type"
+	buttons={{ 'Edit/View': (x) => resourceEditor.initEdit(x) }}
+	extraField="description"
+	extraField2="resource_type"
 	loadItems={async () =>
 		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
 >
-	<div slot="submission" class="flex flex-row gap-x-1">
-		<Button target="_blank" color="blue" size="sm" href="/resources?connect_app=undefined">
-			Connect an API
-		</Button>
+	<div slot="submission" class="flex flex-row gap-x-1 mr-2">
 		<Button
+			target="_blank"
 			variant="border"
 			color="blue"
 			size="sm"
-			on:click={() => {
-				resourceEditor.initNew()
-			}}
+			href="/resources?connect_app=undefined"
 		>
-			New custom resource
+			Connect an API
 		</Button>
 	</div>
 </ItemPicker>
@@ -196,17 +201,14 @@ async function loadScripts() {
 <ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
-<div class="flex flex-row justify-between items-center overflow-hidden w-full">
+<div class="flex flex-row justify-between items-center overflow-hidden w-full px-1">
 	<div class="flex flex-row divide-x items-center">
 		<div class="mx-2">
-			<span
-				title={validCode
-					? 'last signature parsing was sucessful'
-					: 'last signature parsing was succesful'}
-				class="relative inline-flex rounded-full h-2 w-2 {validCode
-					? 'bg-green-500/80'
-					: 'bg-red-500'}"
-			/>
+			{#if validCode}
+				<Badge color="green">Inputs</Badge>
+			{:else}
+				<Badge color="red">Inputs</Badge>
+			{/if}
 		</div>
 		<div>
 			<Button
@@ -218,7 +220,7 @@ async function loadScripts() {
 				startIcon={{ icon: faDollarSign }}
 				{iconOnly}
 			>
-				+Contextual Variable
+				+Context Var
 			</Button>
 		</div>
 		<div>
@@ -228,7 +230,7 @@ async function loadScripts() {
 				on:click={variablePicker.openDrawer}
 				size="xs"
 				spacingSize="md"
-				startIcon={{ icon: faWallet }}
+				startIcon={{ icon: faDollarSign }}
 				{iconOnly}
 			>
 				+Variable
@@ -247,59 +249,59 @@ async function loadScripts() {
 				+Resource
 			</Button>
 		</div>
-
 		<div>
 			<Button
 				btnClasses="mx-1 !font-medium"
 				size="xs"
 				spacingSize="md"
 				color="light"
-				on:click={scriptPicker.openDrawer}
+				on:click={editor.clearContent}
 				{iconOnly}
-				startIcon={{ icon: faCode }}
+				startIcon={{ icon: faRotateLeft }}
 			>
-				View Script
+				Reset
 			</Button>
 		</div>
-
+		<div>
+			<Button
+				btnClasses="!font-medium"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={editor.reloadWebsocket}
+				startIcon={{ icon: faRotate }}
+			>
+				{#if !iconOnly}
+					Assistant
+				{/if}
+				<span class="ml-1 -my-1">
+					{#if lang == 'deno'}
+						(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
+					{:else if lang == 'go'}
+						(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
+					{:else if lang == 'python3'}
+						(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
+						<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
+					{/if}
+				</span>
+			</Button></div
+		>
+	</div>
+	<div class="py-1">
 		<div>
 			<Button
 				btnClasses="mx-1 !font-medium"
 				size="xs"
 				spacingSize="md"
 				color="light"
-				on:click={editor.clearContent}
+				on:click={scriptPicker.openDrawer}
 				{iconOnly}
-				startIcon={{ icon: faRotateLeft }}
+				startIcon={{ icon: faEye }}
 			>
-				Reset content
+				Script
 			</Button>
 		</div>
 	</div>
-	<div>
-		<Button
-			btnClasses="ml-1 !font-medium"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={editor.reloadWebsocket}
-			startIcon={{ icon: faRotate }}
-		>
-			{#if !iconOnly}
-				Reload assistants
-			{/if}
-			<span class="ml-1">
-				{#if lang == 'deno'}
-					(<span class={websocketAlive.deno ? 'green' : 'text-red-700'}>Deno</span>)
-				{:else if lang == 'go'}
-					(<span class={websocketAlive.go ? 'green' : 'text-red-700'}>Go</span>)
-				{:else if lang == 'python3'}
-					(<span class={websocketAlive.pyright ? 'green' : 'text-red-700'}>Pyright</span>
-					<span class={websocketAlive.black ? 'green' : 'text-red-700'}>Black</span>)
-				{/if}
-			</span>
-		</Button>
-	</div>
 </div>
 
 <style>

package/components/EditorBar.svelte.d.ts

@@ -13,15 +13,16 @@ declare const __propDef: {
         };
         iconOnly?: boolean | undefined;
         validCode?: boolean | undefined;
+        kind?: "script" | "trigger" | "approval" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type EditorBarProps = typeof __propDef.props;
-export declare type EditorBarEvents = typeof __propDef.events;
-export declare type EditorBarSlots = typeof __propDef.slots;
+export type EditorBarProps = typeof __propDef.props;
+export type EditorBarEvents = typeof __propDef.events;
+export type EditorBarSlots = typeof __propDef.slots;
 export default class EditorBar extends SvelteComponentTyped<EditorBarProps, EditorBarEvents, EditorBarSlots> {
 }
 export {};

package/components/FieldHeader.svelte

@@ -7,16 +7,17 @@ export let required = false;
 export let itemsType = undefined;
 </script>
 
-<div>
+<div class="inline-flex flex-row items-center">
 	<span class="font-semibold">
 		{label}
 	</span>
-	<span class="text-sm italic text-indigo-800">
+	<Required {required} class="!ml-0" />
+
+	<span class="text-sm italic ml-1 text-indigo-800">
 		({type ?? 'any'}{contentEncoding && contentEncoding != ''
 			? `, encoding: ${contentEncoding}`
 			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
 			? ` of ${itemsType?.type}s`
 			: ''})</span
 	>
-	<Required {required} class="!ml-0" />
 </div>

package/components/FieldHeader.svelte.d.ts

@@ -16,9 +16,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FieldHeaderProps = typeof __propDef.props;
-export declare type FieldHeaderEvents = typeof __propDef.events;
-export declare type FieldHeaderSlots = typeof __propDef.slots;
+export type FieldHeaderProps = typeof __propDef.props;
+export type FieldHeaderEvents = typeof __propDef.events;
+export type FieldHeaderSlots = typeof __propDef.slots;
 export default class FieldHeader extends SvelteComponentTyped<FieldHeaderProps, FieldHeaderEvents, FieldHeaderSlots> {
 }
 export {};