windmill-components 1.122.0 → 1.138.2

package/package/components/RunForm.svelte

@@ -1,7 +1,7 @@
-<script>import { defaultIfEmptyString, displayDaysAgo, emptyString, getToday, truncateHash } from '../utils';
-import { runFormStore, userStore } from '../stores';
+<script>import { defaultIfEmptyString, displayDaysAgo, emptyString, getModifierKey, getToday, truncateHash } from '../utils';
+import { userStore } from '../stores';
 import CliHelpBox from './CliHelpBox.svelte';
-import { Badge, Button } from './common';
+import { Badge, Button, Kbd } from './common';
 import InlineCodeCopy from './InlineCodeCopy.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SharedBadge from './SharedBadge.svelte';
@@ -20,11 +20,9 @@ export let loading = false;
 export let noVariablePicker = false;
 export let viewCliRun = false;
 export let isFlow;
+export let viewKeybinding = false;
 export let args = {};
-if ($runFormStore) {
-    args = $runFormStore;
-    $runFormStore = undefined;
-}
+let reloadArgs = 0;
 export async function setArgs(nargs) {
     args = nargs;
     reloadArgs++;
@@ -36,7 +34,6 @@ export let isValid = true;
 let scheduledForStr;
 let invisible_to_owner;
 $: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
-let reloadArgs = 0;
 </script>
 
 <div class="max-w-3xl">
@@ -53,7 +50,7 @@ let reloadArgs = 0;
 						{/if}
 
 						<div class="flex items-center gap-2">
-							<span class="text-sm text-gray-500">
+							<span class="text-sm text-tertiary">
 								{#if runnable}
 									Edited {displayDaysAgo(runnable.created_at || '')} by {runnable.created_by ||
 										'unknown'}
@@ -94,7 +91,7 @@ let reloadArgs = 0;
 	{#if runnable?.schema}
 		<div class="my-2" />
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
-			<div class="text-sm p-4">No arguments</div>
+			<div class="text-sm py-4 italic">No arguments</div>
 		{:else}
 			{#key reloadArgs}
 				<SchemaForm
@@ -108,78 +105,91 @@ let reloadArgs = 0;
 			{/key}
 		{/if}
 	{:else}
-		<div class="text-xs text-gray-600">No arguments</div>
+		<div class="text-xs text-tertiary">No arguments</div>
 	{/if}
 	{#if schedulable}
 		<div class="mt-10" />
 		<div class="flex gap-2 items-start flex-wrap justify-between mt-2 md:mt-6 mb-6">
-			<div class="flex-row-reverse flex grow">
+			<div class="flex-row-reverse flex-wrap flex w-full gap-4">
 				<Button
 					{loading}
 					color="dark"
-					btnClasses="!px-6 !py-1"
+					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
 					disabled={!isValid}
 					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
 				>
-					{scheduledForStr ? 'Schedule to run later' : buttonText}
+					{#if viewKeybinding}
+						<div class="inline-flex gap-0 items-center">
+							<Kbd small>{getModifierKey()}</Kbd><Kbd small>Enter</Kbd>
+						</div>{/if}
+					<div>
+						{scheduledForStr ? 'Schedule to run later' : buttonText}
+					</div>
 				</Button>
-			</div>
-		</div>
-		<CollapseLink small text="Advanced">
-			<div class="flex flex-col gap-4 mt-2 border p-2">
-				<div class="flex flex-col gap-2">
-					{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
-						<div class="border rounded-md p-3 pt-4">
-							<div class="px-2 font-semibold text-sm">Schedule to run later</div>
+				<div>
+					<CollapseLink small text="Advanced" class="justify-end">
+						<div class="flex flex-col gap-4 mt-2 border p-2">
+							<div class="flex flex-col gap-2">
+								{#if SCRIPT_VIEW_SHOW_SCHEDULE_RUN_LATER}
+									<div class="border rounded-md p-3 pt-4">
+										<div class="px-2 font-semibold text-sm">Schedule to run later</div>
 
-							<div class="flex flex-row items-end">
-								<div class="w-max md:w-2/3 mt-2 mb-1">
-									<label for="run-time" />
-									<input
-										class="inline-block"
-										type="datetime-local"
-										id="run-time"
-										name="run-scheduled-time"
-										bind:value={scheduledForStr}
-										min={getToday().toISOString().slice(0, 16)}
+										<div class="flex flex-row items-end">
+											<div class="w-max md:w-2/3 mt-2 mb-1">
+												<label for="run-time" />
+												<input
+													class="inline-block"
+													type="datetime-local"
+													id="run-time"
+													name="run-scheduled-time"
+													bind:value={scheduledForStr}
+													min={getToday().toISOString().slice(0, 16)}
+												/>
+											</div>
+											<Button
+												variant="border"
+												color="blue"
+												size="sm"
+												btnClasses="mx-2 mb-1"
+												on:click={() => {
+													scheduledForStr = undefined
+												}}
+											>
+												Clear
+											</Button>
+										</div>
+									</div>
+								{/if}
+							</div>
+							{#if runnable?.path?.startsWith(`u/${$userStore?.username}`) != true && (runnable?.path?.split('/')?.length ?? 0) > 2}
+								<div class="flex items-center gap-1">
+									<Toggle
+										options={{
+											right: `make run invisible to others`
+										}}
+										bind:checked={invisible_to_owner}
 									/>
+									<Tooltip
+										>By default, runs are visible to the owner(s) of the script or flow being
+										triggered</Tooltip
+									>
 								</div>
-								<Button
-									variant="border"
-									color="blue"
-									size="sm"
-									btnClasses="mx-2 mb-1"
-									on:click={() => {
-										scheduledForStr = undefined
-									}}
-								>
-									Clear
-								</Button>
-							</div>
+							{/if}
 						</div>
-					{/if}
+					</CollapseLink>
 				</div>
-				{#if runnable?.path?.startsWith(`u/${$userStore?.username}`) != true && (runnable?.path?.split('/')?.length ?? 0) > 2}
-					<div class="flex items-center gap-1">
-						<Toggle
-							options={{
-								right: `make run invisible to others`
-							}}
-							bind:checked={invisible_to_owner}
-						/>
-						<Tooltip
-							>By default, runs are visible to the owner(s) of the script or flow being triggered</Tooltip
-						>
-					</div>
-				{/if}
 			</div>
-		</CollapseLink>
+		</div>
 	{:else if !topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid}
 			on:click={() => runAction(undefined, args, invisible_to_owner)}
 		>
+			{#if viewKeybinding}
+				<div>
+					<Kbd small>{getModifierKey()}</Kbd>+<Kbd small>Enter</Kbd>
+				</div>{/if}
 			{buttonText}
 		</Button>
 	{/if}

package/package/components/RunForm.svelte.d.ts

@@ -25,6 +25,7 @@ declare const __propDef: {
         noVariablePicker?: boolean | undefined;
         viewCliRun?: boolean | undefined;
         isFlow: boolean;
+        viewKeybinding?: boolean | undefined;
         args?: Record<string, any> | undefined;
         setArgs?: ((nargs: Record<string, any>) => Promise<void>) | undefined;
         run?: (() => void) | undefined;

package/package/components/RunPageSchedules.svelte

@@ -0,0 +1,169 @@
+<script>import { faCalendar } from '@fortawesome/free-solid-svg-icons';
+import ScheduleEditor from './ScheduleEditor.svelte';
+import { Badge, Button } from './common';
+import { workspaceStore } from '../stores';
+import { ScheduleService } from '../gen';
+import { sendUserToast } from '../toast';
+import Toggle from './Toggle.svelte';
+import { ListOrdered, PenBox } from 'lucide-svelte';
+import JobArgs from './JobArgs.svelte';
+import Skeleton from './common/skeleton/Skeleton.svelte';
+import Tooltip from './Tooltip.svelte';
+export let isFlow;
+export let path;
+export let can_write;
+let scheduleEditor;
+let schedule = undefined;
+let schedules = undefined;
+$: path && loadSchedule();
+$: path && loadSchedules();
+async function loadSchedule() {
+    try {
+        let exists = await ScheduleService.existsSchedule({
+            workspace: $workspaceStore ?? '',
+            path
+        });
+        if (exists) {
+            schedule = await ScheduleService.getSchedule({
+                workspace: $workspaceStore ?? '',
+                path
+            });
+        }
+        else {
+            schedule = false;
+        }
+    }
+    catch (e) {
+        console.log('no primary schedule');
+    }
+}
+async function loadSchedules() {
+    try {
+        schedules = (await ScheduleService.listSchedules({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).filter((s) => s.path != path);
+    }
+    catch (e) {
+        console.error('impossible to load schedules');
+    }
+}
+async function setScheduleEnabled(path, enabled) {
+    try {
+        await ScheduleService.setScheduleEnabled({
+            path,
+            workspace: $workspaceStore,
+            requestBody: { enabled }
+        });
+        loadSchedule();
+        sendUserToast(`Schedule ${enabled ? 'enabled' : 'disabled'}`);
+    }
+    catch (err) {
+        sendUserToast(`Cannot ` + (enabled ? 'disable' : 'enable') + ` schedule: ${err}`, true);
+        loadSchedule();
+    }
+}
+</script>
+
+<ScheduleEditor
+	on:update={() => {
+		loadSchedule()
+		loadSchedules()
+	}}
+	bind:this={scheduleEditor}
+/>
+
+<div class="p-2 flex flex-col">
+	<Button
+		on:click={() => scheduleEditor?.openNew(isFlow, path)}
+		variant="border"
+		color="light"
+		size="xs"
+		startIcon={{ icon: faCalendar }}
+	>
+		New Schedule
+	</Button>
+</div>
+
+{#if schedule}
+	<div class="p-2 flex flex-col gap-2">
+		<div class="flex flex-row justify-between h-8">
+			<div class="flex flex-row gap-2">
+				<input
+					class="inline-block !w-32"
+					type="text"
+					id="cron-schedule"
+					name="cron-schedule"
+					placeholder="*/30 * * * *"
+					value={schedule.schedule}
+					disabled={true}
+				/>
+				<Badge color="indigo" small
+					>Primary schedule&nbsp;<Tooltip
+						>Share the same path as the script or flow it is attached to and its path get renamed
+						whenever the source path is renamed</Tooltip
+					></Badge
+				>
+			</div>
+			<div class="flex flex-row gap-2">
+				<Toggle
+					checked={schedule.enabled}
+					on:change={(e) => {
+						if (can_write) {
+							setScheduleEnabled(path, e.detail)
+						} else {
+							sendUserToast('not enough permission', true)
+						}
+					}}
+					options={{
+						right: 'On'
+					}}
+					size="xs"
+				/>
+				<Button size="xs" variant="border" color="light" href={`/runs/${path}`}>
+					<div class="flex flex-row gap-2">
+						<ListOrdered size={14} />
+						Runs
+					</div>
+				</Button>
+				<Button
+					size="xs"
+					color="dark"
+					on:click={() => scheduleEditor?.openEdit(path ?? '', isFlow)}
+				>
+					<PenBox size={14} />
+				</Button>
+			</div>
+		</div>
+		{#if Object.keys(schedule?.args ?? {}).length > 0}
+			<div class="">
+				<JobArgs args={schedule.args ?? {}} />
+			</div>
+		{:else}
+			<div class="text-xs texg-gray-700"> No arguments </div>
+		{/if}
+	</div>
+{:else if schedule == undefined}
+	<Skeleton layout={[[6]]} />
+{/if}
+
+<h3 class="px-2 pt-4">Other schedules</h3>
+
+{#if schedules}
+	{#if schedules.length == 0}
+		<div class="text-xs text-secondary px-2"> No other schedules </div>
+	{:else}
+		<div class="flex flex-col divide-y px-2 pt-2">
+			{#each schedules as schedule}
+				<div class="grid grid-cols-6 text-2xs items-center py-2"
+					><div class="col-span-3 truncate">{schedule.path}</div><div>{schedule.schedule}</div>
+					<div>{schedule.enabled ? 'on' : 'off'}</div>
+					<button on:click={() => scheduleEditor?.openEdit(path, isFlow)}>edit</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+{:else}
+	<Skeleton layout={[[8]]} />
+{/if}

package/package/components/RunPageSchedules.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+        can_write: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RunPageSchedulesProps = typeof __propDef.props;
+export type RunPageSchedulesEvents = typeof __propDef.events;
+export type RunPageSchedulesSlots = typeof __propDef.slots;
+export default class RunPageSchedules extends SvelteComponentTyped<RunPageSchedulesProps, RunPageSchedulesEvents, RunPageSchedulesSlots> {
+}
+export {};

package/package/components/SavedInputs.svelte

@@ -6,7 +6,7 @@ import { faSave } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
-import { ArrowLeftIcon, Edit, X } from 'lucide-svelte';
+import { ArrowLeftIcon, Edit, ExternalLink, X } from 'lucide-svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 export let scriptHash = null;
@@ -132,7 +132,7 @@ const selectArgs = (selected_args) => {
 						disabled={!isValid}
 						loading={savingInputs}
 						startIcon={{ icon: faSave }}
-						color="blue"
+						color="light"
 						size="xs"
 					>
 						<span>Save Current Input</span>
@@ -144,8 +144,8 @@ const selectArgs = (selected_args) => {
 						{#each savedInputs as i}
 							<button
 								class={classNames(
-									`w-full flex items-center group justify-between gap-4 py-2 px-4 text-left border rounded-md hover:bg-gray-100 transition-all`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50' : ''
+									`w-full flex items-center group justify-between gap-4 py-2 px-4 text-left border rounded-md hover:bg-surface-hover transition-all`,
+									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
 								)}
 								on:click={() => {
 									if (!i.isEditing) {
@@ -167,7 +167,7 @@ const selectArgs = (selected_args) => {
 											}}
 											class="w-full"
 										>
-											<input type="text" bind:value={i.name} class="text-gray-700" />
+											<input type="text" bind:value={i.name} class="text-secondary" />
 										</form>
 									{:else}
 										<small
@@ -193,7 +193,7 @@ const selectArgs = (selected_args) => {
 
 											<Button
 												loading={i.isSaving}
-												color="gray"
+												color="light"
 												size="xs"
 												variant="border"
 												spacingSize="xs2"
@@ -221,13 +221,13 @@ const selectArgs = (selected_args) => {
 											</Button>
 										</div>
 									{:else}
-										<span class="text-xs text-gray-600">By {i.created_by}</span>
+										<span class="text-xs text-tertiary">By {i.created_by}</span>
 									{/if}
 								</div>
 							</button>
 						{/each}
 					{:else}
-						<div class="text-center text-gray-500">No saved Inputs</div>
+						<div class="text-center text-tertiary">No saved Inputs</div>
 					{/if}
 				</div>
 			</div>
@@ -235,15 +235,15 @@ const selectArgs = (selected_args) => {
 
 		<Pane>
 			<div class="w-full flex flex-col gap-4 p-2">
-				<span class="text-sm font-extrabold">Previous Inputs</span>
+				<span class="text-sm font-extrabold">Previous runs</span>
 
 				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
 					{#if previousInputs.length > 0}
 						{#each previousInputs as i}
 							<button
 								class={classNames(
-									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-gray-100 transition-a`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50' : ''
+									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-surface-hover transition-a`,
+									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
 								)}
 								on:click={() => {
 									if (selectedInput === i) {
@@ -253,17 +253,35 @@ const selectArgs = (selected_args) => {
 									}
 								}}
 							>
-								<div class="w-full h-full items-center flex gap-4 min-w-0">
-									<small
-										class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left"
+								<div
+									class="w-full h-full items-center text-xs font-normal grid grid-cols-8 gap-4 min-w-0"
+								>
+									<div class="">
+										<div class="rounded-full w-2 h-2 {i.success ? 'bg-green-400' : 'bg-red-400'}" />
+									</div>
+									<div class="col-span-2">
+										{i.created_by}
+									</div>
+									<div
+										class="whitespace-nowrap col-span-3 font-normal overflow-hidden text-ellipsis flex-shrink text-center"
 									>
-										{displayDaysAgo(i.created_at)} by {i.created_by}
-									</small>
+										{displayDaysAgo(i.created_at)}
+									</div>
+									<div class="col-span-2">
+										<a
+											target="_blank"
+											href="/runs/{i.id}"
+											class="text-right float-right text-secondary"
+											title="See run detail in a new tab"
+										>
+											<ExternalLink size={16} />
+										</a>
+									</div>
 								</div>
 							</button>
 						{/each}
 					{:else}
-						<div class="text-center text-gray-500">No previous Inputs</div>
+						<div class="text-center text-tertiary">No previous Runs</div>
 					{/if}
 				</div>
 			</div>
@@ -280,7 +298,7 @@ const selectArgs = (selected_args) => {
 								<ObjectViewer json={selectedInput?.args} />
 							</div>
 						{:else}
-							<div class="text-center text-gray-500">
+							<div class="text-center text-tertiary">
 								Select an Input to preview scripts arguments
 							</div>
 						{/if}

package/package/components/ScheduleEditor.svelte

@@ -57,6 +57,11 @@ let pathError = '';
 let validCRON = true;
 $: allowSchedule = isValid && validCRON && script_path != '';
 $: script_path != '' && loadScript(script_path);
+// set isValid to true when a script/flow without any properties is selected
+$: runnable?.schema &&
+    runnable.schema.properties &&
+    Object.keys(runnable.schema.properties).length === 0 &&
+    (isValid = true);
 const dispatch = createEventDispatcher();
 async function loadScript(p) {
     if (p) {
@@ -207,7 +212,7 @@ let drawer;
 
 			<h2 class="border-b pb-1 mt-8 mb-2">Runnable</h2>
 			{#if !edit}
-				<p class="text-xs mb-1 text-gray-600">
+				<p class="text-xs mb-1 text-tertiary">
 					Pick a script or flow to be triggered by the schedule<Required required={true} />
 				</p>
 				<ScriptPicker
@@ -233,8 +238,6 @@ let drawer;
 				/>
 			{/if}
 			<div class="mt-6">
-				<span class="font-semibold text-gray-700">Arguments</span>
-
 				{#if runnable}
 					{#if runnable?.schema && runnable.schema.properties && Object.keys(runnable.schema.properties).length > 0}
 						<SchemaForm disabled={!can_write} schema={runnable.schema} bind:isValid bind:args />
@@ -250,21 +253,30 @@ let drawer;
 				{/if}
 			</div>
 			<h2 class="border-b pb-1 mt-8 mb-2">Error Handler</h2>
+
 			<ScriptPicker
-				disabled={initialScriptPath != '' || !can_write}
+				disabled={!can_write}
 				initialPath={errorHandlerPath}
 				kind={Script.kind.SCRIPT}
 				allowFlow={true}
 				bind:scriptPath={errorHandlerPath}
 				bind:itemKind={errorHandleritemKind}
+				canRefresh
 			/>
-			<div class="text-gray-600 italic text-sm mt-2"
-				>The following args will be passed to the error handler:
-				<ul class="mt-1 ml-2">
-					<li><b>path</b>: The path of the script or flow that errored</li>
-					<li><b>schedule_path</b>: The path of the schedule</li>
-					<li><b>error</b>: The error details</li>
-				</ul>
+			<div class="flex gap-20 items-start mt-3">
+				<div class="text-tertiary text-sm"
+					>The following args will be passed to the error handler:
+					<ul class="mt-1 ml-2">
+						<li><b>path</b>: The path of the script or flow that errored.</li>
+						<li><b>schedule_path</b>: The path of the schedule.</li>
+						<li><b>error</b>: The error details.</li>
+					</ul>
+				</div>
+				<Button
+					wrapperClasses="mt-6"
+					href="/scripts/add?hub=hub%2F1087%2Fwindmill%2Fschedule_error_handler_template"
+					target="_blank">Use template</Button
+				>
 			</div>
 		</div>
 	</DrawerContent>

package/package/components/SchemaEditor.svelte

@@ -25,6 +25,7 @@ let argError = '';
 let editing = false;
 let oldArgName; // when editing argument and changing name
 let viewJsonSchema = false;
+let jsonEditor;
 // Binding is not enough because monaco Editor does not support two-way binding
 export function getSchema() {
     try {
@@ -50,7 +51,9 @@ function modalToSchema(schema) {
         enum: schema.enum_,
         items: schema.items,
         contentEncoding: schema.contentEncoding,
-        format: schema.format
+        format: schema.format,
+        properties: schema.schema?.properties,
+        required: schema.schema?.required
     };
 }
 function handleAddOrEditArgument(modalProperty) {
@@ -60,7 +63,8 @@ function handleAddOrEditArgument(modalProperty) {
     if (modalProperty.name.length === 0) {
         argError = 'Arguments need to have a name';
     }
-    else if (Object.keys(schema.properties).includes(modalProperty.name) && !editing) {
+    else if (Object.keys(schema.properties).includes(modalProperty.name) &&
+        (!editing || (editing && oldArgName && oldArgName !== modalProperty.name))) {
         argError = 'There is already an argument with this name';
     }
     else {
@@ -86,6 +90,7 @@ function handleAddOrEditArgument(modalProperty) {
     }
     schema = schema;
     schemaString = JSON.stringify(schema, null, '\t');
+    jsonEditor?.setCode(schemaString);
     dispatch('change', schema);
 }
 function handleStartEditEvent(event) {
@@ -224,9 +229,9 @@ function displayInfoKey(displayInfo) {
 			/>
 			<div class="ml-2">
 				<Tooltip
-					documentationLink="https://www.windmill.dev/docs/reference/#script-parameters-to-json-schema"
+					documentationLink="https://www.windmill.dev/docs/core_concepts/json_schema_and_parsing#script-parameters-to-json-schema"
 				>
-					Arguments can be edited either using the wizard, or by editing their JSON Schema
+					Arguments can be edited either using the wizard, or by editing their JSON Schema.
 				</Tooltip>
 			</div>
 		</div>
@@ -265,15 +270,13 @@ function displayInfoKey(displayInfo) {
 						</tbody>
 					</TableCustom>
 				{:else}
-					<div class="text-gray-700 text-xs italic mt-2">This schema has no arguments.</div>
+					<div class="text-secondary text-xs italic mt-2">This schema has no arguments.</div>
 				{/if}
 			</div>
 		{:else}
-			{#if !emptyString(error)}<span class="text-red-400">{error}</span>{:else}<div
-					class="py-6"
-				/>{/if}
 			<div class="border rounded p-2">
 				<SimpleEditor
+					bind:this={jsonEditor}
 					fixedOverflowWidgets={false}
 					on:change={() => {
 						try {
@@ -288,6 +291,11 @@ function displayInfoKey(displayInfo) {
 					class="small-editor"
 				/>
 			</div>
+			{#if !emptyString(error)}
+				<div class="text-red-400">{error}</div>
+			{:else}
+				<div><br /></div>
+			{/if}
 		{/if}
 	</div>
 </div>