windmill-components 1.85.0 → 1.87.0

package/dist/components/ResourceEditor.svelte

@@ -0,0 +1,203 @@
+<script>import { ResourceService } from '../gen';
+import { canWrite, emptyString, isOwner, sendUserToast } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { Alert, Button, Drawer, Skeleton } from './common';
+import Path from './Path.svelte';
+import Required from './Required.svelte';
+import { userStore, workspaceStore } from '../stores';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import autosize from 'svelte-autosize';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
+import Toggle from './Toggle.svelte';
+let path = '';
+let initialPath = '';
+let resourceToEdit;
+let description = '';
+let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`;
+let selectedResourceType;
+let resourceSchema;
+let args = {};
+let can_write = true;
+let loadingSchema = false;
+let linkedVars = [];
+let drawer;
+let rawCode = undefined;
+const dispatch = createEventDispatcher();
+export async function initEdit(p) {
+    initialPath = p;
+    path = p;
+    resourceToEdit = undefined;
+    resourceSchema = undefined;
+    viewJsonSchema = false;
+    loadingSchema = true;
+    drawer.openDrawer?.();
+    resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
+    description = resourceToEdit.description ?? '';
+    selectedResourceType = resourceToEdit.resource_type;
+    loadResourceType();
+    args = resourceToEdit.value;
+    can_write =
+        resourceToEdit.workspace_id == $workspaceStore &&
+            canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore);
+    linkedVars = Object.entries(args)
+        .filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
+        .map(([k, _]) => k);
+}
+async function editResource() {
+    if (resourceToEdit) {
+        await ResourceService.updateResource({
+            workspace: $workspaceStore,
+            path: resourceToEdit.path,
+            requestBody: { path, value: args, description }
+        });
+        sendUserToast(`Updated resource at ${path}`);
+        dispatch('refresh', path);
+        drawer.closeDrawer?.();
+    }
+    else {
+        throw Error('Cannot edit undefined resourceToEdit');
+    }
+}
+async function loadResourceType() {
+    if (selectedResourceType) {
+        try {
+            const resourceType = await ResourceService.getResourceType({
+                workspace: $workspaceStore,
+                path: selectedResourceType
+            });
+            if (resourceType.schema) {
+                resourceSchema = resourceType.schema;
+            }
+        }
+        catch (err) {
+            resourceSchema = undefined;
+            loadingSchema = false;
+            rawCode = JSON.stringify(args, null, 2);
+        }
+    }
+    else {
+        sendUserToast(`ResourceType cannot be undefined.`, true);
+    }
+    loadingSchema = false;
+}
+let isValid = true;
+let jsonError = '';
+$: rawCode && parseJson();
+function parseJson() {
+    try {
+        args = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
+}
+$: linkedVars.length > 0 && path && updateArgsFromLinkedVars();
+function updateArgsFromLinkedVars() {
+    linkedVars.forEach((k) => {
+        args[k] = `$var:${path}`;
+    });
+}
+let viewJsonSchema = false;
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent
+		title={resourceToEdit ? 'Edit ' + resourceToEdit.path : 'Add a resource'}
+		on:close={drawer.closeDrawer}
+	>
+		<div>
+			<div class="flex flex-col gap-3 py-3 text-gray-700">
+				<div>
+					{#if !can_write}
+						<div class="m-2">
+							<Alert type="warning" title="Only read access"
+								>You only have read access to this resource and cannot edit it</Alert
+							>
+						</div>
+					{/if}
+					<Path
+						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+						bind:path
+						{initialPath}
+						namePlaceholder="resource"
+						kind="resource"
+					/>
+				</div>
+				<div class="flex w-full justify-between max-w-lg items-center mt-4">
+					<h3>Value</h3>
+					<Toggle
+						on:change={(e) => switchTab(e.detail)}
+						options={{
+							right: 'As JSON'
+						}}
+					/>
+				</div>
+				<div class="text-sm">
+					{#if loadingSchema}
+						<Skeleton layout={[[4]]} />
+					{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
+						<SchemaForm
+							noDelete
+							disabled={!can_write}
+							compact
+							schema={resourceSchema}
+							bind:args
+							bind:isValid
+						/>
+					{:else if !can_write}
+						<input type="text" disabled value={rawCode} />
+					{:else}
+						{#if !viewJsonSchema}
+							<p class="italic text-gray-500 text-xs mb-4"
+								>No corresponding resource type found in your workspace for {selectedResourceType}.
+								Define the value in JSON directly</p
+							>
+						{/if}
+
+						{#if !emptyString(jsonError)}<span
+								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
+							>{:else}<div class="py-2" />{/if}
+						<div class="h-full w-full border p-1 rounded">
+							<SimpleEditor
+								autoHeight
+								class="editor"
+								lang="json"
+								bind:code={rawCode}
+								fixedOverflowWidgets={false}
+							/>
+						</div>
+					{/if}
+				</div>
+				<h3 class="mt-4">Description <Required required={false} /> </h3>
+				<textarea
+					type="text"
+					disabled={!can_write}
+					use:autosize
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+				/>
+			</div>
+		</div>
+		<svelte:fragment slot="actions">
+			<Button
+				startIcon={{ icon: faSave }}
+				on:click={editResource}
+				disabled={!can_write || !isValid || jsonError != ''}
+			>
+				Save
+			</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/dist/components/RunForm.svelte

@@ -0,0 +1,206 @@
+<script>import { defaultIfEmptyString, displayDaysAgo, emptyString, getToday, truncateHash } from '../utils';
+import { slide } from 'svelte/transition';
+import { runFormStore, userStore } from '../stores';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import CliHelpBox from './CliHelpBox.svelte';
+import { Badge, Button } from './common';
+import InlineCodeCopy from './InlineCodeCopy.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import SharedBadge from './SharedBadge.svelte';
+import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
+import CollapseLink from './CollapseLink.svelte';
+export let runnable;
+export let runAction;
+export let buttonText = 'Run';
+export let schedulable = true;
+export let detailed = true;
+export let autofocus = false;
+export let topButton = false;
+export let loading = false;
+export let noVariablePicker = false;
+export let viewCliRun = false;
+export let isFlow;
+export let args = {};
+if ($runFormStore) {
+    args = $runFormStore;
+    $runFormStore = undefined;
+}
+export function run() {
+    runAction(scheduledForStr, args, invisible_to_owner);
+}
+export let isValid = true;
+let viewOptions = false;
+let viewCliOptions = false;
+let scheduledForStr;
+let invisible_to_owner;
+$: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
+</script>
+
+<div class="max-w-6xl">
+	{#if detailed}
+		{#if runnable}
+			<div class="flex flex-row flex-wrap justify-between gap-4">
+				<div>
+					<div class="flex flex-col mb-2">
+						<h1 class="break-words py-2 mr-2">
+							{defaultIfEmptyString(runnable.summary, runnable.path ?? '')}
+						</h1>
+						{#if !emptyString(runnable.summary)}
+							<h2 class="font-bold pb-4">{runnable.path}</h2>
+						{/if}
+
+						<div class="flex items-center gap-2">
+							<span class="text-sm text-gray-500">
+								{#if runnable}
+									Edited {displayDaysAgo(runnable.created_at || '')} by {runnable.created_by ||
+										'unknown'}
+								{/if}
+							</span>
+							<Badge color="dark-gray">
+								{truncateHash(runnable?.hash ?? '')}
+							</Badge>
+							{#if runnable?.is_template}
+								<Badge color="blue">Template</Badge>
+							{/if}
+							{#if runnable && runnable.kind !== 'runnable'}
+								<Badge color="blue">
+									{runnable?.kind}
+								</Badge>
+							{/if}
+							<SharedBadge
+								canWrite={runnable.can_write ?? true}
+								extraPerms={runnable?.extra_perms ?? {}}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		{:else}
+			<h1>Loading...</h1>
+		{/if}
+	{/if}
+	{#if topButton}
+		<Button
+			btnClasses="!px-6 !py-1 w-full"
+			disabled={!isValid}
+			on:click={() => runAction(undefined, args)}
+		>
+			{buttonText}
+		</Button>
+	{/if}
+	{#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>
+		{:else}
+			<SchemaForm {noVariablePicker} {autofocus} schema={runnable.schema} bind:isValid bind:args />
+		{/if}
+	{:else}
+		<div class="text-xs text-gray-600">No schema</div>
+	{/if}
+	{#if schedulable}
+		<div class="mt-10" />
+		<CollapseLink text="Advanced">
+			<div class="flex flex-col gap-4 mt-2 border p-2">
+				<div class="flex flex-col gap-2">
+					<div class="flex">
+						<Button
+							color="light"
+							size="sm"
+							endIcon={{ icon: viewOptions ? faChevronUp : faChevronDown }}
+							on:click={() => (viewOptions = !viewOptions)}
+						>
+							Schedule to run later
+						</Button>
+					</div>
+					{#if viewOptions}
+						<div transition:slide|local class="mt-6">
+							<div class="border rounded-md p-3 pt-4">
+								<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>
+						</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>
+				{/if}
+			</div>
+		</CollapseLink>
+		<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">
+				<Button
+					{loading}
+					btnClasses="!px-6 !py-1"
+					disabled={!isValid}
+					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
+				>
+					{scheduledForStr ? 'Schedule to run later' : buttonText}
+				</Button>
+			</div>
+		</div>
+	{:else if !topButton}
+		<Button
+			btnClasses="!px-6 !py-1 w-full"
+			disabled={!isValid}
+			on:click={() => runAction(undefined, args, invisible_to_owner)}
+		>
+			{buttonText}
+		</Button>
+	{/if}
+
+	{#if viewCliRun}
+		<div>
+			<div class="my-20" />
+			<div class="flex">
+				<Button
+					color="light"
+					size="xs"
+					endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
+					on:click={() => (viewCliOptions = !viewCliOptions)}
+				>
+					Run it from the CLI
+				</Button>
+			</div>
+			{#if viewCliOptions}
+				<div transition:slide|local class="mt-2 px-4 pt-2">
+					<InlineCodeCopy content={cliCommand} />
+					<CliHelpBox />
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/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>