windmill-components 1.37.0 → 1.46.2

package/components/ItemPicker.svelte

@@ -1,6 +1,7 @@
 <script>import Fuse from 'fuse.js';
+import { Drawer } from './common';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
-import Modal from './Modal.svelte';
 export let pickCallback;
 export let loadItems;
 export let extraField;
@@ -15,56 +16,62 @@ const fuseOptions = {
     keys: ['path', extraField]
 };
 const fuse = new Fuse(items, fuseOptions);
-export function openModal() {
+export function openDrawer() {
     loadItems().then((v) => {
         items = v;
         if (items) {
             fuse.setCollection(items);
         }
     });
-    modal.openModal();
+    drawer.openDrawer();
 }
 $: filteredItems =
     itemsFilter.length > 0 && items ? fuse.search(itemsFilter).map((value) => value.item) : items;
-let modal;
+let drawer;
 </script>
 
-<Modal bind:this={modal} z="z-30">
-	<div slot="title">Search a {itemName}</div>
-	<div slot="content">
-		{#if filteredItems}
-			<div class="w-12/12 pb-4">
-				<input placeholder="Search {itemName}" bind:value={itemsFilter} class="search-item" />
-			</div>
-			<ul class="divide-y divide-gray-200">
-				{#each filteredItems as obj}
-					<li
-						class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
-						on:click={() => {
-							if (closeOnClick) {
-								modal.closeModal()
-							}
-							pickCallback(obj['path'], obj[extraField])
-						}}
-					>
-						<p class="text-sm font-semibold flex flex-row">
-							{#if `app` in obj}
-								<IconedResourceType silent={true} name={obj['app']} />
-								<span class="mr-2" />
-							{/if}
-							<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-all"
-								>{obj['path'] ?? ''}</span
-							>
-						</p>
-						<p class="text-xs italic">{obj['description'] ?? ''}</p>
-					</li>
-				{/each}
-			</ul>
-		{:else}
-			<span class="mt-2 text-sm text-red-400">{noItemMessage}</span>
-		{/if}
-	</div>
-	<span slot="submission">
-		<slot name="submission" />
-	</span>
-</Modal>
+<Drawer bind:this={drawer} size="600px">
+	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
+		<div>
+			{#if filteredItems}
+				<div class="w-12/12 pb-4">
+					<input
+						type="text"
+						placeholder="Search {itemName}"
+						bind:value={itemsFilter}
+						class="search-item"
+					/>
+				</div>
+				<ul class="divide-y divide-gray-200">
+					{#each filteredItems as obj}
+						<li
+							class="py-4 px-1 gap-1 flex flex-col hover:bg-white hover:border text-black cursor-pointer"
+							on:click={() => {
+								if (closeOnClick) {
+									drawer.closeDrawer()
+								}
+								pickCallback(obj['path'], obj[extraField])
+							}}
+						>
+							<p class="text-sm font-semibold flex flex-row">
+								{#if `app` in obj}
+									<IconedResourceType silent={true} name={obj['app']} />
+									<span class="mr-2" />
+								{/if}
+								<span class="mr-2">{obj[extraField]}</span><span class="font-normal break-words"
+									>{obj['path'] ?? ''}</span
+								>
+							</p>
+							<p class="text-xs italic">{obj['description'] ?? ''}</p>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<span class="mt-2 text-sm text-red-400">{noItemMessage}</span>
+			{/if}
+		</div>
+		<span slot="submission">
+			<slot name="submission" />
+		</span>
+	</DrawerContent>
+</Drawer>

package/components/ItemPicker.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         itemName: string;
         closeOnClick?: boolean | undefined;
         noItemMessage?: string | undefined;
-        openModal?: (() => void) | undefined;
+        openDrawer?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -20,6 +20,6 @@ export declare type ItemPickerProps = typeof __propDef.props;
 export declare type ItemPickerEvents = typeof __propDef.events;
 export declare type ItemPickerSlots = typeof __propDef.slots;
 export default class ItemPicker extends SvelteComponentTyped<ItemPickerProps, ItemPickerEvents, ItemPickerSlots> {
-    get openModal(): () => void;
+    get openDrawer(): () => void;
 }
 export {};

package/components/JobArgs.svelte

@@ -0,0 +1,33 @@
+<script>import ArgInfo from './ArgInfo.svelte';
+import { Skeleton } from './common';
+import TableCustom from './TableCustom.svelte';
+export let args;
+</script>
+
+<TableCustom class="px-10 py-2">
+	<tr slot="header-row"
+		><th>Argument</th>
+		<th>Value</th></tr
+	>
+	<tbody slot="body">
+		{#if args && Object.keys(args).length > 0}
+			{#each Object.entries(args) as [arg, value]}
+				<tr>
+					<td class="font-semibold">{arg}</td>
+					<td><ArgInfo {value} /></td>
+				</tr>
+			{/each}
+		{:else if args}
+			<tr>No arguments</tr>
+		{:else}
+			<tr>
+				<td>
+					<Skeleton layout={[[3], 0.5, [3]]} />
+				</td>
+				<td>
+					<Skeleton layout={[[3], 0.5, [3]]} />
+				</td>
+			</tr>
+		{/if}
+	</tbody>
+</TableCustom>

package/components/JobArgs.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        args: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type JobArgsProps = typeof __propDef.props;
+export declare type JobArgsEvents = typeof __propDef.events;
+export declare type JobArgsSlots = typeof __propDef.slots;
+export default class JobArgs extends SvelteComponentTyped<JobArgsProps, JobArgsEvents, JobArgsSlots> {
+}
+export {};

package/components/JobStatus.svelte

@@ -1,30 +1,34 @@
 <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 { Badge } from 'flowbite-svelte';
+import Badge from './common/badge/Badge.svelte';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
 </script>
 
 {#if job && 'success' in job && job.success}
-	<Badge large color="green">
-		<Icon data={faCheck} scale={SMALL_ICON_SCALE} class="mr-2" />
-		Success {job.is_skipped ? '(Skipped)' : ''}
-	</Badge>
+	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
+		<Badge large color="green">
+			<Icon data={faCheck} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Success {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>
+		<Badge large>
+			<Icon data={faHourglassHalf} scale={SMALL_ICON_SCALE} class="mr-2" />
+			Ran in {msToSec(job.duration_ms)} s
+		</Badge>
+	</div>
 {:else if job && 'success' in job}
-	<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>
+	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
+		<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" />
+			Ran in {msToSec(job.duration_ms)}s
+		</Badge>
+	</div>
 {:else if job && 'running' in job && job.running}
 	<Badge large color="yellow">
 		<Icon data={faCircle} scale={SMALL_ICON_SCALE} class="mr-2" />

package/components/LogViewer.svelte

@@ -13,11 +13,16 @@ export function scrollToBottom() {
 
 <div class="relative w-full h-full">
 	<div bind:this={div} class="w-full h-full overflow-auto bg-gray-50 relative">
-		<pre
-			class="whitespace-pre-wrap break-all bg-gray-50 text-xs w-full p-2">{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre>
-	</div>
-	<div class="absolute top-0 right-0 mr-2 text-gray-500 text-sm bg-gray-50/20">
-		Auto scroll
-		<input type="checkbox" bind:checked={scroll} />
+		<div
+			class="sticky top-0 right-0 w-full flex flex-row-reverse justify-between text-gray-500 text-sm bg-gray-50/20"
+		>
+			<div>
+				Auto scroll
+				<input type="checkbox" bind:checked={scroll} />
+			</div>
+		</div>
+		<pre class="whitespace-pre-wrap break-words bg-gray-50 text-xs w-full p-2"
+			>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+		>
 	</div>
 </div>

package/components/Modal.svelte

@@ -2,12 +2,12 @@
 export let open = false;
 export let z = 'z-30';
 const dispatch = createEventDispatcher();
-export function closeModal() {
+export function closeDrawer() {
     document.body.style.overflow = 'auto';
     open = false;
     dispatch('close');
 }
-export function openModal() {
+export function openDrawer() {
     document.body.style.overflow = 'hidden';
     open = true;
     dispatch('open');
@@ -17,7 +17,7 @@ function handleKeyUp(event) {
     if (key === 'Escape' || key === 'Esc') {
         if (open) {
             event.preventDefault();
-            closeModal();
+            closeDrawer();
         }
     }
 }
@@ -37,7 +37,7 @@ function handleKeyUp(event) {
 					<button
 						on:click={() => {
 							open = false
-							closeModal()
+							closeDrawer()
 						}}
 					>
 						<svg
@@ -65,7 +65,7 @@ function handleKeyUp(event) {
 					<div class="flex flex-row justify-between p-2 ">
 						<button
 							on:click={() => {
-								closeModal()
+								closeDrawer()
 							}}
 						>
 							<svg

package/components/Modal.svelte.d.ts

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         open?: boolean | undefined;
         z?: string | undefined;
-        closeModal?: (() => void) | undefined;
-        openModal?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
+        openDrawer?: (() => void) | undefined;
     };
     events: {
         close: CustomEvent<any>;
@@ -22,7 +22,7 @@ export declare type ModalProps = typeof __propDef.props;
 export declare type ModalEvents = typeof __propDef.events;
 export declare type ModalSlots = typeof __propDef.slots;
 export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
-    get closeModal(): () => void;
-    get openModal(): () => void;
+    get closeDrawer(): () => void;
+    get openDrawer(): () => void;
 }
 export {};

package/components/ModulePreview.svelte

@@ -1,5 +1,5 @@
 <script>import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
-import { HSplitPane, VSplitPane } from 'svelte-split-pane';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
 import RunForm from './RunForm.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
 import LogViewer from './LogViewer.svelte';
@@ -13,7 +13,6 @@ let testIsLoading = false;
 let testJob;
 export let mod;
 export let schema;
-export let indices;
 let stepArgs = {};
 export function runTestWithStepArgs() {
     runTest(stepArgs);
@@ -34,20 +33,7 @@ export async function runTest(args) {
 }
 function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
-        const result = testJob.result;
-        const pMod = $flowStateStore.modules[indices[0]];
-        if (pMod) {
-            if (indices[1] != undefined && pMod.childFlowModules) {
-                const cMod = pMod.childFlowModules[indices[1]];
-                if (cMod) {
-                    cMod.previewResult = result;
-                }
-            }
-            else {
-                pMod.previewResult = result;
-            }
-            $flowStateStore.modules[indices[0]] = pMod;
-        }
+        $flowStateStore[mod.id].previewResult = testJob.result;
     }
 }
 </script>
@@ -58,50 +44,48 @@ function jobDone() {
 	bind:isLoading={testIsLoading}
 	bind:job={testJob}
 />
-<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
-	<left slot="left" class="relative">
-		<div class="overflow-auto h-full p-4">
-			<RunForm
-				runnable={{ summary: mod.summary ?? '', schema, description: '' }}
-				runAction={(_, args) => runTest(args)}
-				schedulable={false}
-				buttonText="Test just this step (Ctrl+Enter)"
-				detailed={false}
-				bind:args={stepArgs}
-			/>
-			{#if testIsLoading}
-				<Button
-					on:click={testJobLoader?.cancelJob}
-					btnClasses="w-full mt-4"
-					color="red"
-					size="sm"
-					startIcon={{
-						icon: faRotateRight,
-						classes: 'animate-spin'
-					}}
-				>
-					Cancel
-				</Button>
-			{/if}
-		</div>
-	</left>
-	<right slot="right">
-		<div class="overflow-auto h-full">
-			<VSplitPane topPanelSize="50%" downPanelSize="50%">
-				<top slot="top">
-					<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
-				</top>
-				<down slot="down">
-					<pre class="overflow-x-auto break-all relative h-full p-2 text-sm"
-						>{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}<DisplayResult
-								result={testJob.result}
-							/>
-						{:else if testIsLoading}Waiting for result...
-						{:else}Test to see the result here
-						{/if}
-        	</pre>
-				</down>
-			</VSplitPane>
-		</div>
-	</right>
-</HSplitPane>
+<Splitpanes>
+	<Pane size={50} minSize={20} class="p-4">
+		<RunForm
+			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
+			runAction={(_, args) => runTest(args)}
+			schedulable={false}
+			buttonText="Test just this step (Ctrl+Enter)"
+			detailed={false}
+			topButton
+			bind:args={stepArgs}
+		/>
+		{#if testIsLoading}
+			<Button
+				on:click={testJobLoader?.cancelJob}
+				btnClasses="w-full mt-4"
+				color="red"
+				size="sm"
+				startIcon={{
+					icon: faRotateRight,
+					classes: 'animate-spin'
+				}}
+			>
+				Cancel
+			</Button>
+		{/if}
+	</Pane>
+	<Pane size={50} minSize={20}>
+		<Splitpanes horizontal>
+			<Pane size={50} minSize={10}>
+				<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+			</Pane>
+			<Pane size={50} minSize={10} class="text-sm text-gray-600">
+				{#if testJob != undefined && 'result' in testJob && testJob.result != undefined}
+					<pre class="overflow-x-auto break-words relative h-full px-2">
+						<DisplayResult result={testJob.result} />
+					</pre>
+				{:else}
+					<div class="p-2">
+						{testIsLoading ? 'Waiting for result...' : 'Test to see the result here'}
+					</div>
+				{/if}
+			</Pane>
+		</Splitpanes>
+	</Pane>
+</Splitpanes>

package/components/ModulePreview.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
     props: {
         mod: FlowModule;
         schema: Schema;
-        indices: [number, number | undefined];
         runTestWithStepArgs?: (() => void) | undefined;
         runTest?: ((args: any) => Promise<void>) | undefined;
     };

package/components/PageHeader.svelte

@@ -4,17 +4,17 @@ export let tooltip = '';
 export let primary = true;
 </script>
 
-<div class="flex flex-col sm:flex-row justify-between mt-4 mb-2">
+<div class="flex flex-row flex-wrap justify-between mt-4 mb-2 min-h-[48px]">
 	{#if primary}
-		<span class="text-xl font-bold flex items-center space-x-2">
-			<span class="mr-0.5">{title}</span>
+		<span class="flex items-center space-x-2">
+			<h1 class="mr-0.5">{title}</h1>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}
 		</span>
-		{:else}
-		<span class="text-lg font-semibold flex items-center space-x-2">
-			<span class="mr-0.5">{title}</span>
+	{:else}
+		<span class="flex items-center space-x-2">
+			<h2 class="mr-0.5">{title}</h2>
 			{#if tooltip}
 				<Tooltip>{tooltip}</Tooltip>
 			{/if}

package/components/Password.svelte

@@ -25,7 +25,7 @@ onMount(() => {
 });
 </script>
 
-<label class="block text-gray-700" for="password"> {label} </label>
+<label class="block text-gray-700" for="password"> {@html label} </label>
 <div class="relative w-full">
 	<div class="absolute inset-y-0 right-0 flex items-center px-2">
 		<input class="hidden js-password-toggle" id="toggle" type="checkbox" />

package/components/Path.svelte

@@ -1,10 +1,11 @@
 <script>import { pathToMeta } from '../common';
 import { FlowService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
 import { GroupService } from '../gen';
-import Tooltip from './Tooltip.svelte';
 import { userStore, workspaceStore } from '../stores';
 import { sleep } from '../utils';
 import { createEventDispatcher } from 'svelte';
+import Required from './Required.svelte';
+import Popover from './Popover.svelte';
 export let meta = {
     ownerKind: 'user',
     owner: '',
@@ -15,6 +16,7 @@ export let initialPath;
 export let path = '';
 export let error = '';
 export let kind;
+let inputP = undefined;
 const dispatch = createEventDispatcher();
 let groups = [];
 $: path = metaToPath(meta);
@@ -24,6 +26,9 @@ function metaToPath(meta) {
 export function getPath() {
     return path;
 }
+export function focus() {
+    inputP?.focus();
+}
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {
@@ -43,6 +48,9 @@ export async function reset() {
         while (await pathExists(metaToPath(meta), kind)) {
             meta.name = `${namePlaceholder}_${i}`;
             i += 1;
+            if (initialPath && initialPath != '') {
+                meta = pathToMeta(initialPath);
+            }
         }
     }
     else {
@@ -134,9 +142,15 @@ $: {
 	<div class="flex flex-col sm:grid sm:grid-cols-4 sm:gap-4 pb-0 mb-1">
 		<label class="block">
 			<span class="text-gray-700 text-sm whitespace-nowrap">
-				Owner Kind <Tooltip>
-					<slot name="ownerToolkit" />
-				</Tooltip>
+				<Popover
+					>Owner Kind
+					<span slot="text"
+						>Select the group <span class="font-mono">all</span>
+						to share it with all workspace users, and <span class="font-mono">user</span> to keep it
+						private.
+						<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
+					</span>
+				</Popover>
 			</span>
 
 			<select
@@ -155,8 +169,9 @@ $: {
 		</label>
 		{#if meta.ownerKind === 'user'}
 			<label class="block">
-				<span class="text-sm text-gray-700">Owner</span>
+				<span class="text-gray-700 text-sm">Owner</span>
 				<input
+					type="text"
 					bind:value={meta.owner}
 					placeholder={$userStore?.username ?? ''}
 					disabled={!($userStore?.is_admin ?? false)}
@@ -164,7 +179,7 @@ $: {
 			</label>
 		{:else}
 			<label class="block">
-				<span class="text-sm text-gray-700">Owner</span>
+				<span class="text-gray-700 text-sm">Owner</span>
 				<select bind:value={meta.owner}>
 					{#each groups as g}
 						<option>{g.name}</option>
@@ -173,9 +188,15 @@ $: {
 			</label>
 		{/if}
 		<label class="block col-span-2">
-			<span class="text-gray-700 text-sm">Name<span class="text-red-600 text-sm">*</span></span>
+			<span class="text-gray-700 text-sm">
+				Name
+				<Required required={true} />
+			</span>
 			<input
+				type="text"
+				id="path"
 				autofocus
+				bind:this={inputP}
 				autocomplete="off"
 				on:keyup={handleKeyUp}
 				bind:value={meta.name}

package/components/Path.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         error?: string | undefined;
         kind: "script" | "resource" | "schedule" | "variable" | "flow";
         getPath?: (() => string) | undefined;
+        focus?: (() => void) | undefined;
         reset?: (() => Promise<void>) | undefined;
     };
     events: {
@@ -16,15 +17,14 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        ownerToolkit: {};
-    };
+    slots: {};
 };
 export declare type PathProps = typeof __propDef.props;
 export declare type PathEvents = typeof __propDef.events;
 export declare type PathSlots = typeof __propDef.slots;
 export default class Path extends SvelteComponentTyped<PathProps, PathEvents, PathSlots> {
     get getPath(): () => string;
+    get focus(): () => void;
     get reset(): () => Promise<void>;
 }
 export {};