windmill-components 1.87.0 → 1.89.0

package/package/components/SavedInputs.svelte

@@ -0,0 +1,306 @@
+<script>import { Button } from './common';
+import { InputService, RunnableType } from '../gen/index.js';
+import { userStore, workspaceStore } from '../stores.js';
+import { classNames, displayDate, displayDaysAgo, sendUserToast } from '../utils.js';
+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 Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
+export let scriptHash = null;
+export let scriptPath = null;
+export let flowPath = null;
+let runnableId = scriptHash || scriptPath || flowPath || undefined;
+let runnableType = scriptHash
+    ? RunnableType.SCRIPT_HASH
+    : scriptPath
+        ? RunnableType.SCRIPT_PATH
+        : flowPath
+            ? RunnableType.FLOW_PATH
+            : undefined;
+// Are the current Inputs valid and able to be saved?
+export let isValid;
+export let args;
+let previousInputs = [];
+let savedInputs = [];
+let selectedInput;
+async function loadInputHistory() {
+    previousInputs = await InputService.getInputHistory({
+        workspace: $workspaceStore,
+        runnableId,
+        runnableType,
+        perPage: 10
+    });
+}
+async function loadSavedInputs() {
+    savedInputs = await InputService.listInputs({
+        workspace: $workspaceStore,
+        runnableId,
+        runnableType,
+        perPage: 10
+    });
+}
+let savingInputs = false;
+async function saveInput(args) {
+    savingInputs = true;
+    const requestBody = {
+        name: 'Saved ' + displayDate(new Date()),
+        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 {
+        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;
+}
+async function deleteInput(input) {
+    try {
+        await InputService.deleteInput({
+            workspace: $workspaceStore,
+            input: input.id
+        });
+        savedInputs = savedInputs.filter((i) => i.id !== input.id);
+        if (selectedInput === input) {
+            selectedInput = null;
+        }
+    }
+    catch (err) {
+        console.error(err);
+        sendUserToast(`Failed to delete Input: ${err}`, true);
+    }
+}
+$: {
+    if ($workspaceStore && (scriptHash || scriptPath || flowPath)) {
+        loadInputHistory();
+        loadSavedInputs();
+    }
+}
+const dispatch = createEventDispatcher();
+const selectArgs = (selected_args) => {
+    dispatch('selected_args', selected_args);
+};
+</script>
+
+<div class="min-w-[300px] h-full">
+	<Splitpanes horizontal={true}>
+		<Pane>
+			<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-extrabold flex-shrink-0"
+						>Saved Inputs <Tooltip
+							>Shared tooltips are available to anyone with access to the script</Tooltip
+						></span
+					>
+					<Button
+						on:click={() => saveInput(args)}
+						disabled={!isValid}
+						loading={savingInputs}
+						startIcon={{ icon: faSave }}
+						color="blue"
+						size="xs"
+					>
+						<span>Save Current Input</span>
+					</Button>
+				</div>
+
+				<div class="w-full flex flex-col gap-2 h-full overflow-y-auto p">
+					{#if savedInputs.length > 0}
+						{#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' : ''
+								)}
+								on:click={() => {
+									if (!i.isEditing) {
+										if (selectedInput === i) {
+											selectedInput = null
+										} else {
+											selectedInput = i
+										}
+									}
+								}}
+							>
+								<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
+									{#if i.isEditing}
+										<form
+											on:submit={() => {
+												updateInput(i)
+												i.isEditing = false
+												i.isSaving = false
+											}}
+											class="w-full"
+										>
+											<input type="text" bind:value={i.name} class="text-gray-700" />
+										</form>
+									{:else}
+										<small
+											class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left"
+										>
+											{i.name}
+										</small>
+									{/if}
+									{#if i.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
+										<div class="items-center flex gap-2">
+											{#if !i.isEditing}
+												<div class="group-hover:block hidden -my-2">
+													<Toggle
+														size="xs"
+														options={{ right: 'shared' }}
+														bind:checked={i.is_public}
+														on:change={() => {
+															updateInput(i)
+														}}
+													/>
+												</div>
+											{/if}
+
+											<Button
+												loading={i.isSaving}
+												color="gray"
+												size="xs"
+												variant="border"
+												spacingSize="xs2"
+												btnClasses={'group-hover:block hidden'}
+												on:click={(e) => {
+													e.stopPropagation()
+													i.isEditing = !i.isEditing
+													if (!i.isEditing) {
+														updateInput(i)
+														i.isSaving = false
+													}
+												}}
+											>
+												<Edit class="w-4 h-4" />
+											</Button>
+											<Button
+												color="red"
+												size="xs"
+												spacingSize="xs2"
+												variant="border"
+												btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden'}
+												on:click={() => deleteInput(i)}
+											>
+												<X class="w-4 h-4" />
+											</Button>
+										</div>
+									{:else}
+										<span class="text-xs text-gray-600">By {i.created_by}</span>
+									{/if}
+								</div>
+							</button>
+						{/each}
+					{:else}
+						<div class="text-center text-gray-500">No saved Inputs</div>
+					{/if}
+				</div>
+			</div>
+		</Pane>
+
+		<Pane>
+			<div class="w-full flex flex-col gap-4 p-2">
+				<span class="text-sm font-extrabold">Previous Inputs</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' : ''
+								)}
+								on:click={() => {
+									if (selectedInput === i) {
+										selectedInput = null
+									} else {
+										selectedInput = i
+									}
+								}}
+							>
+								<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"
+									>
+										{displayDaysAgo(i.created_at)} by {i.created_by}
+									</small>
+								</div>
+							</button>
+						{/each}
+					{:else}
+						<div class="text-center text-gray-500">No previous Inputs</div>
+					{/if}
+				</div>
+			</div>
+		</Pane>
+
+		<Pane>
+			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
+				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
+					<div class="text-sm font-extrabold">Preview</div>
+
+					<div class="w-full min-h-0 grow overflow-auto">
+						{#if Object.keys(selectedInput?.args || {}).length > 0}
+							<div class="border overflow-auto h-full p-2">
+								<ObjectViewer json={selectedInput?.args} />
+							</div>
+						{:else}
+							<div class="text-center text-gray-500">
+								Select an Input to preview scripts arguments
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<div class="w-full flex flex-col px-2 pb-2">
+					<Button
+						color="blue"
+						btnClasses="w-full"
+						size="sm"
+						spacingSize="xl"
+						on:click={() => selectArgs(selectedInput?.args)}
+						disabled={Object.keys(selectedInput?.args || {}).length === 0}
+					>
+						<ArrowLeftIcon class="w-4 h-4 mr-2" />
+						Use Input
+					</Button>
+				</div>
+			</div>
+		</Pane>
+	</Splitpanes>
+</div>

package/package/components/SavedInputs.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        scriptHash?: string | null | undefined;
+        scriptPath?: string | null | undefined;
+        flowPath?: string | null | undefined;
+        isValid: boolean;
+        args: object;
+    };
+    events: {
+        selected_args: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SavedInputsProps = typeof __propDef.props;
+export type SavedInputsEvents = typeof __propDef.events;
+export type SavedInputsSlots = typeof __propDef.slots;
+export default class SavedInputs extends SvelteComponentTyped<SavedInputsProps, SavedInputsEvents, SavedInputsSlots> {
+}
+export {};

package/package/components/ScheduleEditor.svelte

@@ -0,0 +1,236 @@
+<script context="module">
+	export function load() {
+		return {
+			stuff: { title: 'New Schedule' }
+		}
+	}
+</script>
+
+<script>import { Alert, Button } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import CronInput from './CronInput.svelte';
+import Path from './Path.svelte';
+import Required from './Required.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import ScriptPicker from './ScriptPicker.svelte';
+import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
+import { FlowService, ScheduleService, Script, ScriptService } from '../gen';
+import { userStore, workspaceStore } from '../stores';
+import { canWrite, emptyString, formatCron, sendUserToast } from '../utils';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+let initialPath = '';
+let edit = true;
+let schedule = '0 0 12 * *';
+let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+let itemKind = 'script';
+let script_path = '';
+let initialScriptPath = '';
+export function openEdit(ePath, isFlow) {
+    is_flow = isFlow;
+    initialPath = ePath;
+    itemKind = is_flow ? 'flow' : 'script';
+    if (path == ePath) {
+        loadSchedule();
+    }
+    else {
+        path = ePath;
+    }
+    edit = true;
+    drawer?.openDrawer();
+}
+export function openNew(is_flow, initial_script_path) {
+    edit = false;
+    itemKind = is_flow ? 'flow' : 'script';
+    initialScriptPath = initial_script_path ?? '';
+    path = initialScriptPath;
+    initialPath = initialScriptPath;
+    script_path = initialScriptPath;
+    timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    drawer?.openDrawer();
+}
+$: is_flow = itemKind == 'flow';
+let runnable;
+let args = {};
+let isValid = true;
+let path = '';
+let enabled = false;
+let pathError = '';
+let validCRON = true;
+$: allowSchedule = isValid && validCRON && script_path != '';
+$: script_path != '' && loadScript(script_path);
+const dispatch = createEventDispatcher();
+async function loadScript(p) {
+    if (p) {
+        if (is_flow) {
+            runnable = await FlowService.getFlowByPath({ workspace: $workspaceStore, path: p });
+        }
+        else {
+            runnable = await ScriptService.getScriptByPath({ workspace: $workspaceStore, path: p });
+        }
+    }
+    else {
+        runnable = undefined;
+    }
+}
+let can_write = true;
+async function loadSchedule() {
+    try {
+        const s = await ScheduleService.getSchedule({
+            workspace: $workspaceStore,
+            path: initialPath
+        });
+        enabled = s.enabled;
+        schedule = s.schedule;
+        timezone = s.timezone;
+        script_path = s.script_path ?? '';
+        is_flow = s.is_flow;
+        args = s.args ?? {};
+        can_write = canWrite(s.path, s.extra_perms, $userStore);
+    }
+    catch (err) {
+        sendUserToast(`Could not load schedule: ${err}`, true);
+    }
+}
+async function scheduleScript() {
+    if (edit) {
+        await ScheduleService.updateSchedule({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                schedule: formatCron(schedule),
+                timezone,
+                args
+            }
+        });
+        sendUserToast(`Schedule ${path} updated`);
+    }
+    else {
+        await ScheduleService.createSchedule({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                schedule: formatCron(schedule),
+                timezone,
+                script_path,
+                is_flow,
+                args,
+                enabled: true
+            }
+        });
+        sendUserToast(`Schedule ${path} created`);
+    }
+    dispatch('update');
+    drawer.closeDrawer();
+}
+$: {
+    if ($workspaceStore) {
+        if (edit && path != '') {
+            loadSchedule();
+        }
+    }
+}
+let drawer;
+</script>
+
+<Drawer size="900px" bind:this={drawer}>
+	<DrawerContent
+		title={edit ? `Edit ${initialPath}` : 'New schedule'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if edit}
+				<div class="mr-8">
+					<Toggle
+						disabled={!can_write}
+						checked={enabled}
+						options={{ right: 'enable', left: 'disable' }}
+						on:change={async (e) => {
+							await ScheduleService.setScheduleEnabled({
+								path: initialPath,
+								workspace: $workspaceStore ?? '',
+								requestBody: { enabled: e.detail }
+							})
+							sendUserToast(`${e.detail ? 'enabled' : 'disabled'} schedule ${initialPath}`)
+						}}
+					/>
+				</div>
+			{/if}
+			<Button
+				startIcon={{ icon: faSave }}
+				disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
+				on:click={scheduleScript}
+			>
+				{edit ? 'Save' : 'Schedule'}
+			</Button>
+		</svelte:fragment>
+		<div>
+			{#if !edit}
+				<span class="font-semibold text-gray-700">Path</span>
+				<Path
+					checkInitialPathExistence
+					bind:error={pathError}
+					bind:path
+					{initialPath}
+					namePlaceholder="schedule"
+					kind="schedule"
+				/>
+				<div class="mb-8" />
+			{/if}
+
+			<h2 class="border-b pb-1 mb-2">
+				<span class="mr-1">Schedule</span>
+				<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
+			</h2>
+
+			<CronInput disabled={!can_write} bind:schedule bind:timezone bind:validCRON />
+
+			<h2 class="border-b pb-1 mt-8 mb-2">Runnable</h2>
+			{#if !edit}
+				<p class="text-xs mb-1 text-gray-600">
+					Pick a script or flow to be triggered by the schedule<Required required={true} />
+				</p>
+				<ScriptPicker
+					disabled={initialScriptPath != '' || !can_write}
+					initialPath={initialScriptPath}
+					kind={Script.kind.SCRIPT}
+					allowFlow={true}
+					bind:itemKind
+					bind:scriptPath={script_path}
+				/>
+			{:else}
+				<Alert type="info" title="Runnable path cannot be edited">
+					Once a schedule is created, the runnable path cannot be changed. However, when renaming a
+					script or a flow, the runnable path will automatically update itself.
+				</Alert>
+				<div class="my-2" />
+				<ScriptPicker
+					disabled
+					initialPath={script_path}
+					scriptPath={script_path}
+					allowFlow={true}
+					{itemKind}
+				/>
+			{/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 />
+					{:else}
+						<div class="text-xs texg-gray-700">
+							This {is_flow ? 'flow' : 'script'} takes no argument
+						</div>
+					{/if}
+				{:else}
+					<div class="text-xs texg-gray-700 my-2">
+						Pick a {is_flow ? 'flow' : 'script'} and fill its argument here
+					</div>
+				{/if}
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/ScheduleEditor.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+export declare function load(): {
+    stuff: {
+        title: string;
+    };
+};
+declare const __propDef: {
+    props: {
+        openEdit?: ((ePath: string, isFlow: boolean) => void) | undefined;
+        openNew?: ((is_flow: boolean, initial_script_path?: string) => void) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScheduleEditorProps = typeof __propDef.props;
+export type ScheduleEditorEvents = typeof __propDef.events;
+export type ScheduleEditorSlots = typeof __propDef.slots;
+export default class ScheduleEditor extends SvelteComponentTyped<ScheduleEditorProps, ScheduleEditorEvents, ScheduleEditorSlots> {
+    get openEdit(): (ePath: string, isFlow: boolean) => void;
+    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined) => void;
+}
+export {};