windmill-components 1.444.2 → 1.447.4

package/package/components/SavedInputs.svelte

@@ -2,16 +2,17 @@
 import { InputService, JobService } from '../gen/index.js';
 import { userStore, workspaceStore } from '../stores.js';
 import { base } from '../base';
-import { classNames, displayDate, displayDateOnly, sendUserToast } from '../utils.js';
+import { classNames, displayDateOnly, sendUserToast } from '../utils.js';
 import { createEventDispatcher } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
-import { ArrowLeftIcon, Edit, ExternalLink, Save, X } from 'lucide-svelte';
+import { ArrowLeftIcon, Edit, ExternalLink, X } from 'lucide-svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import TimeAgo from './TimeAgo.svelte';
 import JobLoader from './runs/JobLoader.svelte';
 import Skeleton from './common/skeleton/Skeleton.svelte';
+import SaveInputsButton from './SaveInputsButton.svelte';
 export let scriptHash = null;
 export let scriptPath = null;
 export let flowPath = null;
@@ -24,7 +25,6 @@ let savedInputs = undefined;
 let selectedInput;
 let jobs = [];
 let loading = false;
-let savingInputs = false;
 const dispatch = createEventDispatcher();
 $: runnableId = scriptHash || scriptPath || flowPath || undefined;
 let runnableType = undefined;
@@ -61,34 +61,6 @@ async function loadSavedInputs() {
         perPage: 10
     });
 }
-async function saveInput(args) {
-    savingInputs = true;
-    const requestBody = {
-        name: 'Saved ' + displayDate(new Date()),
-        args: args
-    };
-    try {
-        let id = await InputService.createInput({
-            workspace: $workspaceStore,
-            runnableId,
-            runnableType,
-            requestBody
-        });
-        const input = {
-            id,
-            created_by: '',
-            created_at: new Date().toISOString(),
-            is_public: false,
-            ...requestBody
-        };
-        savedInputs = [input, ...(savedInputs ?? [])];
-    }
-    catch (err) {
-        console.error(err);
-        sendUserToast(`Failed to save Input: ${err}`, true);
-    }
-    savingInputs = false;
-}
 async function updateInput(input) {
     input.isSaving = true;
     try {
@@ -145,25 +117,26 @@ async function loadLargeArgs(id, input, allowLarge) {
 }
 </script>
 
-<JobLoader
-	bind:jobs
-	path={runnableId ?? null}
-	isSkipped={false}
-	jobKindsCat="jobs"
-	jobKinds="all"
-	user={null}
-	label={null}
-	folder={null}
-	concurrencyKey={null}
-	tag={null}
-	success="running"
-	argFilter={undefined}
-	bind:loading
-	syncQueuedRunsCount={false}
-	refreshRate={10000}
-	computeMinAndMax={undefined}
-	perPage={5}
-/>
+{#if runnableId}
+	<JobLoader
+		bind:jobs
+		path={runnableId}
+		isSkipped={false}
+		jobKindsCat="all"
+		user={null}
+		label={null}
+		folder={null}
+		concurrencyKey={null}
+		tag={null}
+		success="running"
+		argFilter={undefined}
+		bind:loading
+		syncQueuedRunsCount={false}
+		refreshRate={10000}
+		computeMinAndMax={undefined}
+		perPage={5}
+	/>
+{/if}
 
 <div class="min-w-[300px] h-full">
 	<Splitpanes horizontal={true}>
@@ -171,21 +144,20 @@ async function loadLargeArgs(id, input, allowLarge) {
 			<div class="w-full flex flex-col gap-4 p-2">
 				<div class="w-full flex justify-between items-center gap-4 flex-wrap">
 					<span class="text-sm font-semibold flex-shrink-0"
-						>Saved Inputs <Tooltip
+						>Saved Inputs<Tooltip
 							>Shared inputs are available to anyone with access to the script</Tooltip
 						></span
 					>
 					{#if canSaveInputs}
-						<Button
-							on:click={() => saveInput(args)}
+						<SaveInputsButton
+							{args}
 							disabled={!isValid}
-							loading={savingInputs}
-							startIcon={{ icon: Save }}
-							color="light"
-							size="xs"
-						>
-							<span>Save Current Input</span>
-						</Button>
+							{runnableId}
+							{runnableType}
+							on:update={() => {
+								loadSavedInputs()
+							}}
+						/>
 					{/if}
 				</div>
 
@@ -354,7 +326,7 @@ async function loadLargeArgs(id, input, allowLarge) {
 							>
 						{/if}
 					{:else}
-						<div class="text-left text-tertiary text-xs">No running runs</div>
+						<div class="text-left text-tertiary text-xs">No job currently running</div>
 					{/if}
 				</div>
 

package/package/components/SavedInputsPicker.svelte

@@ -0,0 +1,264 @@
+<script>import { Button } from './common';
+import { InputService } from '../gen/index.js';
+import { userStore, workspaceStore } from '../stores.js';
+import { sendUserToast } from '../utils.js';
+import { createEventDispatcher, onDestroy } from 'svelte';
+import { Edit, Trash2, Save } from 'lucide-svelte';
+import Toggle from './Toggle.svelte';
+import { Cell } from './table/index';
+import { clickOutside } from '../utils';
+import SaveInputsButton from './SaveInputsButton.svelte';
+import Popover from './Popover.svelte';
+import InfiniteList from './InfiniteList.svelte';
+import { twMerge } from 'tailwind-merge';
+export let flowPath = null;
+export let previewArgs = undefined;
+let infiniteList = null;
+let draft = true;
+let selectedInput = null;
+let isEditing = null;
+const dispatch = createEventDispatcher();
+$: runnableId = flowPath || undefined;
+let runnableType = undefined;
+$: runnableType = flowPath ? 'FlowPath' : undefined;
+async function updateInput(input) {
+    if (!input)
+        return;
+    input.isSaving = true;
+    try {
+        await InputService.updateInput({
+            workspace: $workspaceStore,
+            requestBody: {
+                id: input.id,
+                name: input.name,
+                is_public: input.is_public
+            }
+        });
+    }
+    catch (err) {
+        console.error(err);
+        sendUserToast(`Failed to update Input: ${err}`, true);
+    }
+    input.isSaving = false;
+}
+function initLoadInputs() {
+    const loadInputsPageFn = async (page, perPage) => {
+        return await InputService.listInputs({
+            workspace: $workspaceStore,
+            runnableId,
+            runnableType,
+            page,
+            perPage
+        });
+    };
+    infiniteList?.setLoader(loadInputsPageFn);
+    const deleteInputFn = async (id) => {
+        await InputService.deleteInput({
+            workspace: $workspaceStore,
+            input: id
+        });
+    };
+    infiniteList?.setDeleteItemFn(deleteInputFn);
+}
+async function loadLargeArgs(id, input, allowLarge) {
+    if (!id)
+        return;
+    return await InputService.getArgsFromHistoryOrSavedInput({
+        jobOrInputId: id,
+        workspace: $workspaceStore,
+        input,
+        allowLarge
+    });
+}
+let selectedArgs = undefined;
+async function handleSelect(input) {
+    if (input.isEditing)
+        return;
+    if (selectedInput === input.id) {
+        selectedInput = null;
+        selectedArgs = undefined;
+        dispatch('select', undefined);
+    }
+    else {
+        selectedInput = input.id;
+        selectedArgs = await loadLargeArgs(input.id, true, false);
+        dispatch('select', selectedArgs);
+    }
+}
+onDestroy(() => {
+    selectedInput = null;
+    selectedArgs = undefined;
+    dispatch('select', undefined);
+});
+async function getPropPickerElements() {
+    const elements = document.querySelectorAll('[data-schema-picker], [data-schema-picker] *');
+    return elements ? Array.from(elements) : [];
+}
+function handleKeydown(event) {
+    if (event.key === 'Escape' && isEditing) {
+        setEditing(null);
+    }
+    else if (event.key === 'Escape' && selectedInput) {
+        selectedInput = null;
+        selectedArgs = undefined;
+        dispatch('select', undefined);
+    }
+    if (event.key === 'Enter' && isEditing) {
+        updateInput(isEditing).then(() => {
+            setEditing(null);
+        });
+    }
+}
+function setEditing(input) {
+    isEditing = input;
+    dispatch('isEditing', !!input);
+}
+function handleError(error) {
+    if (error.type === 'delete') {
+        sendUserToast(`Failed to delete saved input: ${error.error}`, true);
+    }
+    else if (error.type === 'load') {
+        sendUserToast(`Failed to load saved inputs: ${error.error}`, true);
+    }
+}
+$: $workspaceStore && flowPath && (infiniteList && initLoadInputs(), (draft = false));
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<div
+	class="w-full flex flex-col gap-1 h-full overflow-y-auto p"
+	use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
+	on:click_outside={() => {
+		selectedInput = null
+		selectedArgs = undefined
+		dispatch('select', undefined)
+	}}
+>
+	<div>
+		<Popover class="w-full" placement="bottom" disablePopup={flowPath && previewArgs}>
+			<svelte:fragment slot="text">
+				{#if !flowPath}
+					Save draft first before you can save inputs
+				{:else if !previewArgs}
+					Add inputs before saving
+				{/if}
+			</svelte:fragment>
+			<SaveInputsButton
+				{runnableId}
+				{runnableType}
+				args={previewArgs ?? {}}
+				disabled={!previewArgs || !flowPath}
+				on:update={() => {
+					infiniteList?.loadData('refresh')
+				}}
+				showTooltip={true}
+			/>
+		</Popover>
+	</div>
+	<div class="grow min-h-0">
+		{#if !draft}
+			<InfiniteList
+				bind:this={infiniteList}
+				selectedItemId={selectedInput}
+				on:error={(e) => handleError(e.detail)}
+				on:select={(e) => handleSelect(e.detail)}
+			>
+				<svelte:fragment slot="columns">
+					<colgroup>
+						<col class="w-8" />
+						<col />
+					</colgroup>
+				</svelte:fragment>
+				<svelte:fragment let:item>
+					<Cell>
+						<div class="center-center">
+							<Save size={12} />
+						</div>
+					</Cell>
+					<Cell>
+						<div
+							class="w-full flex items-center text-sm justify-between gap-4 px-4 text-left transition-all"
+						>
+							<div class="w-full h-full items-center justify-between flex gap-1 min-w-0 p-1">
+								{#if isEditing && isEditing.id === item.id}
+									<form
+										on:submit={() => {
+											updateInput(isEditing)
+											setEditing(null)
+										}}
+										class="w-full"
+									>
+										<input type="text" bind:value={isEditing.name} class="text-secondary" />
+									</form>
+								{:else}
+									<small
+										class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left"
+									>
+										{item.name}
+									</small>
+								{/if}
+								{#if item.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
+									<div class="items-center flex gap-2">
+										{#if !isEditing || isEditing?.id !== item.id}
+											<div class="group-hover:block hidden -my-2">
+												<Toggle
+													size="xs"
+													options={{ right: 'shared' }}
+													checked={item.is_public}
+													on:change={(e) => {
+														updateInput({ ...item, is_public: e.detail })
+													}}
+												/>
+											</div>
+										{/if}
+
+										<Button
+											loading={isEditing?.id === item.id && isEditing?.isSaving}
+											color="light"
+											size="xs"
+											variant="border"
+											spacingSize="xs2"
+											btnClasses={'group-hover:block hidden -my-2'}
+											on:click={(e) => {
+												e.stopPropagation()
+												if (isEditing?.id === item.id) {
+													updateInput(isEditing)
+													setEditing(null)
+												} else {
+													setEditing(item)
+												}
+											}}
+										>
+											<Edit class="w-4 h-4" />
+										</Button>
+										<Button
+											color="light"
+											size="xs"
+											spacingSize="xs2"
+											variant="contained"
+											btnClasses={twMerge(
+												isEditing?.id === item.id ? 'block' : 'group-hover:block hidden -my-2',
+												'hover:text-white hover:bg-red-500 text-red-500'
+											)}
+											on:click={() => {
+												infiniteList?.deleteItem(item.id)
+											}}
+										>
+											<Trash2 class="w-4 h-4" />
+										</Button>
+									</div>
+								{:else}
+									<span class="text-xs text-tertiary">By {item.created_by}</span>
+								{/if}
+							</div>
+						</div>
+					</Cell>
+				</svelte:fragment>
+				<svelte:fragment slot="empty">
+					<div class="text-center text-xs text-tertiary">No saved Inputs</div>
+				</svelte:fragment>
+			</InfiniteList>
+		{/if}
+	</div>
+</div>

package/package/components/SavedInputsPicker.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        flowPath?: string | null | undefined;
+        previewArgs?: any;
+    };
+    events: {
+        select: CustomEvent<any>;
+        isEditing: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SavedInputsPickerProps = typeof __propDef.props;
+export type SavedInputsPickerEvents = typeof __propDef.events;
+export type SavedInputsPickerSlots = typeof __propDef.slots;
+export default class SavedInputsPicker extends SvelteComponent<SavedInputsPickerProps, SavedInputsPickerEvents, SavedInputsPickerSlots> {
+}
+export {};

package/package/components/ScheduleEditorInner.svelte

@@ -555,7 +555,6 @@ function onVersionChange() {
 		{#if drawerLoading}
 			<Loader2 class="animate-spin" />
 		{:else}
-			{can_write}
 			<div class="flex flex-col gap-12">
 				<div class="flex flex-col gap-4">
 					<div>

package/package/components/SchemaForm.svelte

@@ -68,13 +68,12 @@ function removeExtraKey() {
 let pickForField;
 let itemPicker = undefined;
 let variableEditor = undefined;
-$: isValid = allTrue(inputCheck ?? {});
 let resourceTypes = undefined;
 async function loadResourceTypes() {
     resourceTypes = await getResourceTypes();
 }
 loadResourceTypes();
-$: schema && reorder();
+$: schema && (reorder(), (hidden = {}));
 function hasExtraKeys() {
     return Object.keys(args ?? {}).some((x) => !keys.includes(x));
 }
@@ -106,8 +105,28 @@ function reorder() {
     }
 }
 $: fields = items ?? keys.map((x) => ({ id: x, value: x }));
+let hidden = {};
+function handleHiddenFields(schema, args) {
+    for (const x of fields) {
+        if (schema?.properties[x.value]?.showExpr) {
+            if (computeShow(x.value, schema.properties[x.value].showExpr, args)) {
+                hidden[x.value] = false;
+            }
+            else if (!hidden[x.value]) {
+                hidden[x.value] = true;
+                // remove arg (important: will not trigger a re-render)
+                delete args[x.value];
+                // make sure it's made valid
+                inputCheck[x.value] = true;
+            }
+        }
+    }
+}
+$: handleHiddenFields(schema, args);
+$: isValid = allTrue(inputCheck ?? {});
 </script>
 
+<!-- {JSON.stringify(args)} -->
 {#if showReset}
 	<div class="flex flex-row-reverse w-full">
 		<Button size="xs" color="light" on:click={() => setDefaults()}>
@@ -136,7 +155,7 @@ $: fields = items ?? keys.map((x) => ({ id: x, value: x }));
 						}}
 					>
 						{#if typeof args == 'object' && schema?.properties[argName]}
-							{#if computeShow(argName, schema?.properties[argName].showExpr, args)}
+							{#if !hidden[argName]}
 								{#if lightweightMode}
 									<LightweightArgInput
 										label={argName}