windmill-components 1.55.1 → 1.55.2

package/components/ResourceEditor.svelte

@@ -40,23 +40,18 @@ export async function initEdit(p) {
             canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore);
 }
 async function editResource() {
-    try {
-        if (resourceToEdit) {
-            await ResourceService.updateResource({
-                workspace: $workspaceStore,
-                path: resourceToEdit.path,
-                requestBody: { path, value: args, description }
-            });
-            sendUserToast(`Updated resource at ${path}`);
-            dispatch('refresh');
-            drawer.closeDrawer?.();
-        }
-        else {
-            throw Error('Cannot edit undefined resourceToEdit');
-        }
+    if (resourceToEdit) {
+        await ResourceService.updateResource({
+            workspace: $workspaceStore,
+            path: resourceToEdit.path,
+            requestBody: { path, value: args, description }
+        });
+        sendUserToast(`Updated resource at ${path}`);
+        dispatch('refresh');
+        drawer.closeDrawer?.();
     }
-    catch (err) {
-        sendUserToast(`${err}`, true);
+    else {
+        throw Error('Cannot edit undefined resourceToEdit');
     }
 }
 async function loadResourceType() {

package/components/RunForm.svelte

@@ -5,6 +5,9 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import SchemaForm from './SchemaForm.svelte';
 import { Badge, Button } from './common';
 import SharedBadge from './SharedBadge.svelte';
+import Toggle from './Toggle.svelte';
+import { userStore } from '../stores';
+import Tooltip from './Tooltip.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -14,12 +17,13 @@ export let autofocus = false;
 export let topButton = false;
 export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
 export function run() {
-    runAction(scheduledForStr, args);
+    runAction(scheduledForStr, args, invisible_to_owner);
 }
 export let isValid = true;
 // Run later
 let viewOptions = false;
 let scheduledForStr;
+let invisible_to_owner;
 </script>
 
 <div class="max-w-6xl">
@@ -125,10 +129,23 @@ let scheduledForStr;
 			>
 				Schedule to run later
 			</Button>
+			{#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 ${runnable?.path?.split('/').slice(0, 2).join('/')}`
+						}}
+						bind:checked={invisible_to_owner}
+					/>
+					<Tooltip
+						>By default, runs are visible to the owner of the script or flow being triggered</Tooltip
+					>
+				</div>
+			{/if}
 			<Button
 				btnClasses="!px-6 !py-1"
 				disabled={!isValid}
-				on:click={() => runAction(scheduledForStr, args)}
+				on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
 			>
 				{scheduledForStr ? 'Schedule run to a later time' : buttonText}
 			</Button>
@@ -137,7 +154,7 @@ let scheduledForStr;
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
 			disabled={!isValid}
-			on:click={() => runAction(undefined, args)}
+			on:click={() => runAction(undefined, args, invisible_to_owner)}
 		>
 			{buttonText}
 		</Button>

package/components/RunForm.svelte.d.ts

@@ -15,7 +15,7 @@ declare const __propDef: {
             created_by?: string;
             extra_perms?: Record<string, boolean>;
         } | undefined;
-        runAction: (scheduledForStr: string | undefined, args: Record<string, any>) => void;
+        runAction: (scheduledForStr: string | undefined, args: Record<string, any>, invisible_to_owner?: boolean) => void;
         buttonText?: string | undefined;
         schedulable?: boolean | undefined;
         detailed?: boolean | undefined;

package/components/ScheduleEditor.svelte

@@ -0,0 +1,226 @@
+<script context="module">
+	export function load() {
+		return {
+			stuff: { title: 'New Schedule' }
+		}
+	}
+</script>
+
+<script>import { sendUserToast, formatCron, canWrite } from '../utils';
+import { ScriptService, Script, ScheduleService, FlowService } from '../gen';
+import Toggle from './Toggle.svelte';
+import Path from './Path.svelte';
+import { Alert, Badge, Button } from './common';
+import Tooltip from './Tooltip.svelte';
+import { userStore, workspaceStore } from '../stores';
+import SchemaForm from './SchemaForm.svelte';
+import ScriptPicker from './ScriptPicker.svelte';
+import Required from './Required.svelte';
+import CronInput, { OFFSET } from './CronInput.svelte';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import { createEventDispatcher } from 'svelte';
+let initialPath = '';
+let edit = true;
+let schedule = '0 0 12 * *';
+let itemKind = 'script';
+let script_path = '';
+let initialScriptPath = '';
+export function openEdit(ePath, isFlow) {
+    is_flow = isFlow;
+    initialPath = ePath;
+    itemKind = is_flow ? 'flow' : 'script';
+    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;
+    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;
+        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),
+                args
+            }
+        });
+        sendUserToast(`Schedule ${path} updated`);
+    }
+    else {
+        await ScheduleService.createSchedule({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                schedule: formatCron(schedule),
+                offset: OFFSET,
+                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 != ''}
+				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={'my_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: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/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 {};

package/components/ScriptBuilder.svelte

@@ -7,7 +7,6 @@ import { userStore, workspaceStore } from '../stores';
 import { encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
 import Path from './Path.svelte';
 import RadioButton from './RadioButton.svelte';
-import Required from './Required.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import CenteredPage from './CenteredPage.svelte';
@@ -158,129 +157,125 @@ $: kind = script.kind;
 		<!-- metadata -->
 		{#if step === 1}
 			<CenteredPage>
-				<div class="space-y-6">
-					<h2 class="border-b pb-1 mt-4">Path & Summary</h2>
-					<Path
-						bind:this={pathC}
-						bind:error={pathError}
-						bind:path={script.path}
-						{initialPath}
-						on:enter={() => changeStep(2)}
-						namePlaceholder="my_script"
-						kind="script"
-					/>
-					<label class="block ">
-						<span class="text-gray-700 text-sm">Summary <Required required={false} /></span>
-						<input
-							type="text"
-							bind:this={summaryC}
-							bind:value={script.summary}
-							placeholder="A very short summary of the script displayed when the script is listed"
-							rows="1"
-						/>
-					</label>
-					<h2 class="border-b pb-1 mt-4">Language</h2>
-					<div class="flex flex-row gap-2 flex-wrap">
-						{#each langs as [label, lang]}
-							{@const isPicked = script.language == lang && template == 'script'}
-							<Button
-								size="sm"
-								variant="border"
-								color={isPicked ? 'blue' : 'dark'}
-								btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-								on:click={() => {
-									script.language = lang
-									template = 'script'
-									initContent(lang, script.kind, template)
-								}}
-							>
-								<LanguageIcon {lang} /><span class="ml-2">{label}</span>
-							</Button>
-						{/each}
-						<Button
-							size="sm"
-							variant="border"
-							color={template == 'pgsql' ? 'blue' : 'dark'}
-							btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
-							on:click={() => {
-								script.language = Script.language.DENO
-								template = 'pgsql'
-								initContent(script.language, script.kind, template)
-							}}
-						>
-							<LanguageIcon lang="pgsql" /><span class="ml-2">PostgreSQL</span>
-						</Button>
+				<h2 class="border-b pb-1 mt-4 mb-2">Path</h2>
+				<Path
+					bind:this={pathC}
+					bind:error={pathError}
+					bind:path={script.path}
+					{initialPath}
+					on:enter={() => changeStep(2)}
+					namePlaceholder="my_script"
+					kind="script"
+				/>
+				<h2 class="border-b pb-1 mt-8 mb-4">Summary</h2>
+				<input
+					type="text"
+					bind:this={summaryC}
+					bind:value={script.summary}
+					placeholder="A very short summary of the script displayed when the script is listed"
+					rows="1"
+				/>
+				<h2 class="border-b pb-1 mt-8 mb-6">Language</h2>
+				<div class="flex flex-row gap-2 flex-wrap">
+					{#each langs as [label, lang]}
+						{@const isPicked = script.language == lang && template == 'script'}
 						<Button
 							size="sm"
 							variant="border"
-							color={template == 'mysql' ? 'blue' : 'dark'}
-							btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+							color={isPicked ? 'blue' : 'dark'}
+							btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 							on:click={() => {
-								script.language = Script.language.DENO
-								template = 'mysql'
-								initContent(script.language, script.kind, template)
+								script.language = lang
+								template = 'script'
+								initContent(lang, script.kind, template)
 							}}
 						>
-							<LanguageIcon lang="mysql" /><span class="ml-2">MySQL</span>
+							<LanguageIcon {lang} /><span class="ml-2">{label}</span>
 						</Button>
-					</div>
-					<h2 class="border-b pb-1 mt-4">Advanced</h2>
-					<div>
-						<Button
-							color="light"
-							size="sm"
-							endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
-							on:click={() => (viewScriptKind = !viewScriptKind)}
-						>
-							Tag this script as having a specific purpose inside flows
-						</Button>
-					</div>
-					{#if viewScriptKind}
-						<div class="max-w-lg">
-							<RadioButton
-								label="Script Type"
-								options={[
-									['Common Script', Script.kind.SCRIPT],
-									[
-										{
-											title: 'Trigger Script',
-											desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
-										},
-										Script.kind.TRIGGER
-									],
-									[
-										{
-											title: 'Error Handler',
-											desc: `Handle errors for flows after all retries attempts have been exhausted`
-										},
-										Script.kind.FAILURE
-									],
-									[
-										{
-											title: 'Approval Script',
-											desc: `Send notification externally to ask for approval to continue a flow`
-										},
-										Script.kind.APPROVAL
-									]
+					{/each}
+					<Button
+						size="sm"
+						variant="border"
+						color={template == 'pgsql' ? 'blue' : 'dark'}
+						btnClasses={template == 'pgsql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						on:click={() => {
+							script.language = Script.language.DENO
+							template = 'pgsql'
+							initContent(script.language, script.kind, template)
+						}}
+					>
+						<LanguageIcon lang="pgsql" /><span class="ml-2">PostgreSQL</span>
+					</Button>
+					<Button
+						size="sm"
+						variant="border"
+						color={template == 'mysql' ? 'blue' : 'dark'}
+						btnClasses={template == 'mysql' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+						on:click={() => {
+							script.language = Script.language.DENO
+							template = 'mysql'
+							initContent(script.language, script.kind, template)
+						}}
+					>
+						<LanguageIcon lang="mysql" /><span class="ml-2">MySQL</span>
+					</Button>
+				</div>
+				<h2 class="border-b pb-1 mt-8 mb-4">Advanced</h2>
+				<div class="mb-4">
+					<Button
+						color="light"
+						size="sm"
+						endIcon={{ icon: viewScriptKind ? faChevronUp : faChevronDown }}
+						on:click={() => (viewScriptKind = !viewScriptKind)}
+					>
+						Tag this script as having a specific purpose inside flows
+					</Button>
+				</div>
+				{#if viewScriptKind}
+					<div class="max-w-lg">
+						<RadioButton
+							label="Script Type"
+							options={[
+								['Action', Script.kind.SCRIPT],
+								[
+									{
+										title: 'Trigger',
+										desc: `First module of flows to trigger them based on watching changes external periodically using an internal state`
+									},
+									Script.kind.TRIGGER
+								],
+								[
+									{
+										title: 'Approval',
+										desc: `Send notification externally to ask for approval to continue a flow`
+									},
+									Script.kind.APPROVAL
+								],
+								[
+									{
+										title: 'Error Handler',
+										desc: `Handle errors for flows after all retries attempts have been exhausted`
+									},
+									Script.kind.FAILURE
+								]
 
-									// ['Command Handler', Script.kind.COMMAND]
-								]}
-								on:change={(e) => {
-									if (isInitialCode(script.content)) {
-										template = 'script'
-										initContent(script.language, e.detail, template)
-									}
-								}}
-								bind:value={script.kind}
-							/>
-						</div>
-					{/if}
-					<div class="ml-3">
-						<Toggle
-							bind:checked={script.is_template}
-							options={{ right: 'Save as a workspace template' }}
+								// ['Command Handler', Script.kind.COMMAND]
+							]}
+							on:change={(e) => {
+								if (isInitialCode(script.content)) {
+									template = 'script'
+									initContent(script.language, e.detail, template)
+								}
+							}}
+							bind:value={script.kind}
 						/>
 					</div>
+				{/if}
+				<div class="ml-3">
+					<Toggle
+						bind:checked={script.is_template}
+						options={{ right: 'Save as a workspace template' }}
+					/>
 				</div>
 			</CenteredPage>
 		{:else if step === 2}

package/components/ScriptEditor.svelte

@@ -22,6 +22,7 @@ export let lang;
 export let kind = undefined;
 export let initialArgs = {};
 export let fixedOverflowWidgets = true;
+export let noSyncFromGithub = false;
 let websocketAlive = { pyright: false, black: false, deno: false, go: false };
 let width = 1200;
 // Internal state
@@ -103,20 +104,22 @@ onMount(() => {
 			{websocketAlive}
 			{kind}
 		/>
-		<div class="py-1">
-			<Button
-				target="_blank"
-				href="https://github.com/windmill-labs/windmill/tree/main/cli"
-				color="light"
-				size="xs"
-				btnClasses="mr-1 hidden md:block"
-				startIcon={{
-					icon: faGithub
-				}}
-			>
-				Sync from Github
-			</Button>
-		</div>
+		{#if !noSyncFromGithub}
+			<div class="py-1">
+				<Button
+					target="_blank"
+					href="https://github.com/windmill-labs/windmill/tree/main/cli"
+					color="light"
+					size="xs"
+					btnClasses="mr-1 hidden md:block"
+					startIcon={{
+						icon: faGithub
+					}}
+				>
+					Sync from Github
+				</Button>
+			</div>
+		{/if}
 	</div>
 </div>
 <SplitPanesWrapper panesClass="!overflow-visible">

package/components/ScriptEditor.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         kind?: 'script' | 'trigger' | 'approval' | undefined;
         initialArgs?: Record<string, any> | undefined;
         fixedOverflowWidgets?: boolean | undefined;
+        noSyncFromGithub?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;