windmill-components 1.408.2 → 1.430.2

package/package/components/triggers/RouteEditorInner.svelte

@@ -9,13 +9,18 @@ import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
 import { canWrite, emptyString, sendUserToast } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import Section from '../Section.svelte';
-import { Loader2, Save } from 'lucide-svelte';
+import { Loader2, Save, Pipette } from 'lucide-svelte';
 import Label from '../Label.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { page } from '$app/stores';
 import { isCloudHosted } from '../../cloud';
 import { base } from '../../base';
+import S3FilePicker from '../S3FilePicker.svelte';
+import Toggle from '../Toggle.svelte';
+import JsonEditor from '../apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import FileUpload from '../common/fileUpload/FileUpload.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
 let is_flow = false;
 let initialPath = '';
 let edit = true;
@@ -33,6 +38,7 @@ export async function openEdit(ePath, isFlow) {
         itemKind = isFlow ? 'flow' : 'script';
         edit = true;
         dirtyPath = false;
+        dirtyRoutePath = false;
         await loadTrigger();
     }
     catch (err) {
@@ -53,10 +59,13 @@ export async function openNew(nis_flow, fixedScriptPath_) {
         requires_auth = false;
         initialRoutePath = '';
         route_path = '';
+        dirtyRoutePath = false;
         http_method = 'post';
         initialScriptPath = '';
         fixedScriptPath = fixedScriptPath_ ?? '';
         script_path = fixedScriptPath;
+        static_asset_config = undefined;
+        s3FileUploadRawMode = false;
         path = '';
         initialPath = '';
         dirtyPath = false;
@@ -68,11 +77,16 @@ export async function openNew(nis_flow, fixedScriptPath_) {
 let path = '';
 let pathError = '';
 let routeError = '';
+let dirtyRoutePath = false;
 let is_async = false;
 let requires_auth = false;
 let initialRoutePath = '';
 let route_path = '';
 let http_method = 'post';
+let static_asset_config = undefined;
+let s3FilePicker;
+let s3FileUploadRawMode = false;
+let s3Editor = undefined;
 const dispatch = createEventDispatcher();
 let can_write = true;
 async function loadTrigger() {
@@ -89,6 +103,8 @@ async function loadTrigger() {
     http_method = s.http_method ?? 'post';
     is_async = s.is_async;
     requires_auth = s.requires_auth;
+    static_asset_config = s.static_asset_config;
+    s3FileUploadRawMode = !!static_asset_config;
     can_write = canWrite(s.path, s.extra_perms, $userStore);
 }
 async function triggerScript() {
@@ -103,7 +119,8 @@ async function triggerScript() {
                 is_async,
                 requires_auth,
                 route_path: $userStore?.is_admin || $userStore?.is_super_admin ? route_path : undefined,
-                http_method
+                http_method,
+                static_asset_config
             }
         });
         sendUserToast(`Route ${path} updated`);
@@ -118,7 +135,8 @@ async function triggerScript() {
                 is_async,
                 requires_auth,
                 route_path,
-                http_method
+                http_method,
+                static_asset_config
             }
         });
         sendUserToast(`Route ${path} created`);
@@ -163,6 +181,17 @@ async function validateRoute(path, method) {
 $: validateRoute(route_path, http_method);
 </script>
 
+{#if static_asset_config}
+	<S3FilePicker
+		bind:this={s3FilePicker}
+		bind:selectedFileKey={static_asset_config}
+		on:close={() => {
+			s3Editor?.setCode(JSON.stringify(static_asset_config, null, 2))
+		}}
+		readOnlyMode={false}
+	/>
+{/if}
+
 <Drawer size="700px" bind:this={drawer}>
 	<DrawerContent
 		title={edit ? (can_write ? `Edit route ${initialPath}` : `Route ${initialPath}`) : 'New route'}
@@ -172,7 +201,11 @@ $: validateRoute(route_path, http_method);
 			{#if !drawerLoading && can_write}
 				<Button
 					startIcon={{ icon: Save }}
-					disabled={pathError != '' || routeError != '' || emptyString(script_path) || !can_write}
+					disabled={pathError != '' ||
+						routeError != '' ||
+						(!static_asset_config && emptyString(script_path)) ||
+						(static_asset_config && emptyString(static_asset_config.s3)) ||
+						!can_write}
 					on:click={triggerScript}
 				>
 					Save
@@ -224,13 +257,18 @@ $: validateRoute(route_path, http_method);
 								class={routeError === ''
 									? ''
 									: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
+								on:input={() => {
+									dirtyRoutePath = true
+								}}
 							/>
 						</label>
 
 						<ToggleButtonGroup
 							class="w-auto"
 							bind:selected={http_method}
-							disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
+							disabled={!($userStore?.is_admin || $userStore?.is_super_admin) ||
+								!can_write ||
+								!!static_asset_config}
 						>
 							<ToggleButton label="GET" value="get" />
 							<ToggleButton label="POST" value="post" />
@@ -257,40 +295,116 @@ $: validateRoute(route_path, http_method);
 									}}
 								/>
 							</div>
-							<div class="text-red-600 dark:text-red-400 text-2xs">{routeError}</div>
+
+							<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
+								>{dirtyRoutePath ? routeError : ''}</div
+							>
 						</div>
 					</div>
 				</Section>
 
-				<Section label="Runnable">
-					<p class="text-xs mb-1 text-tertiary">
-						Pick a script or flow to be triggered<Required required={true} /><br />
-						To handle headers, query or path parameters, add a preprocessor to your runnable.
-					</p>
-					<div class="flex flex-row mb-2">
-						<ScriptPicker
-							disabled={fixedScriptPath != '' || !can_write}
-							initialPath={fixedScriptPath || initialScriptPath}
-							kinds={['script']}
-							allowFlow={true}
-							bind:itemKind
-							bind:scriptPath={script_path}
-							allowRefresh
-						/>
+				<Section label="Target">
+					<ToggleButtonGroup
+						disabled={fixedScriptPath != '' || !can_write}
+						selected={static_asset_config ? 'static_asset' : 'runnable'}
+						on:selected={(ev) => {
+							if (ev.detail === 'static_asset') {
+								static_asset_config = { s3: '' }
+								script_path = ''
+								initialScriptPath = ''
+								is_flow = false
+								http_method = 'get'
+							} else {
+								static_asset_config = undefined
+							}
+						}}
+					>
+						<ToggleButton label="Runnable" value="runnable" />
+						<ToggleButton label="Static asset" value="static_asset" />
+					</ToggleButtonGroup>
 
-						{#if script_path === undefined}
-							<Button
-								btnClasses="ml-4 mt-2"
-								color="dark"
+					{#if static_asset_config}
+						<div class="flex flex-col w-full gap-1">
+							<Toggle
+								class="flex justify-end"
+								bind:checked={s3FileUploadRawMode}
 								size="xs"
-								href={itemKind === 'flow'
-									? '/flows/add?hub=55'
-									: '/scripts/add?hub=hub%2F9088%2Fwindmill%2FHTTP%20route%20script%20with%20preprocessor%20template'}
-								target="_blank">Create from template</Button
-							>
-						{/if}
-					</div>
+								options={{ left: 'Existing file' }}
+							/>
+							{#if s3FileUploadRawMode}
+								<JsonEditor
+									bind:editor={s3Editor}
+									on:focus={(e) => {
+										dispatch('focus')
+									}}
+									on:blur={(e) => {
+										dispatch('blur')
+									}}
+									code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
+									bind:value={static_asset_config}
+								/>
+								<Button
+									variant="border"
+									color="light"
+									size="xs"
+									btnClasses="mt-1"
+									on:click={() => {
+										s3FilePicker?.open?.(static_asset_config)
+									}}
+									startIcon={{ icon: Pipette }}
+								>
+									Choose an object from the catalog
+								</Button>
+							{:else}
+								<FileUpload
+									allowMultiple={false}
+									randomFileKey={true}
+									on:addition={(evt) => {
+										static_asset_config = {
+											s3: evt.detail?.path ?? '',
+											filename: evt.detail?.filename ?? undefined
+										}
+										s3FileUploadRawMode = true
+									}}
+									on:deletion={(evt) => {
+										static_asset_config = {
+											s3: ''
+										}
+									}}
+								/>
+							{/if}
+						</div>
+					{:else}
+						<p class="text-xs mb-1 text-tertiary">
+							Pick a script or flow to be triggered<Required required={true} /><br />
+							To handle headers, query or path parameters, add a preprocessor to your runnable.
+						</p>
+						<div class="flex flex-row mb-2">
+							<ScriptPicker
+								disabled={fixedScriptPath != '' || !can_write}
+								initialPath={fixedScriptPath || initialScriptPath}
+								kinds={['script']}
+								allowFlow={true}
+								bind:itemKind
+								bind:scriptPath={script_path}
+								allowRefresh
+							/>
+
+							{#if script_path === undefined}
+								<Button
+									btnClasses="ml-4 mt-2"
+									color="dark"
+									size="xs"
+									href={itemKind === 'flow'
+										? '/flows/add?hub=55'
+										: '/scripts/add?hub=hub%2F9088%2Fwindmill%2FHTTP%20route%20script%20with%20preprocessor%20template'}
+									target="_blank">Create from template</Button
+								>
+							{/if}
+						</div>
+					{/if}
 				</Section>
+
 				<Section label="Settings">
 					<div class="flex flex-col gap-4">
 						<div class="flex flex-row justify-between">

package/package/components/triggers/RouteEditorInner.svelte.d.ts

@@ -5,6 +5,8 @@ declare const __propDef: {
         openNew?: ((nis_flow: boolean, fixedScriptPath_?: string) => Promise<void>) | undefined;
     };
     events: {
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
         update: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/triggers/RoutesPanel.svelte

@@ -5,23 +5,28 @@ import { RouteIcon } from 'lucide-svelte';
 import Skeleton from '../common/skeleton/Skeleton.svelte';
 import RouteEditor from './RouteEditor.svelte';
 import { canWrite } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import { getContext } from 'svelte';
 export let isFlow;
 export let path;
+export let newItem = false;
 let routeEditor;
-let triggers = undefined;
 $: path && loadTriggers();
-async function loadTriggers() {
+const { triggersCount } = getContext('TriggerContext');
+let httpTriggers = undefined;
+export async function loadTriggers() {
     try {
-        triggers = (await HttpTriggerService.listHttpTriggers({
+        httpTriggers = (await HttpTriggerService.listHttpTriggers({
             workspace: $workspaceStore ?? '',
             path,
             isFlow
         })).map((x) => {
             return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
         });
+        $triggersCount = { ...($triggersCount ?? {}), http_routes_count: httpTriggers?.length };
     }
     catch (e) {
-        console.error('impossible to load http routes');
+        console.error('impossible to load http routes', e);
     }
 }
 </script>
@@ -33,42 +38,57 @@ async function loadTriggers() {
 	bind:this={routeEditor}
 />
 
-<div class="p-2 flex flex-col">
-	{#if $userStore?.is_admin || $userStore?.is_super_admin}
-		<Button
-			on:click={() => routeEditor?.openNew(isFlow, path)}
-			variant="border"
-			color="light"
-			size="xs"
-			startIcon={{ icon: RouteIcon }}
-		>
-			New Route
-		</Button>
+<div class="flex flex-col gap-4">
+	{#if !newItem}
+		{#if $userStore?.is_admin || $userStore?.is_super_admin}
+			<Button
+				on:click={() => routeEditor?.openNew(isFlow, path)}
+				variant="border"
+				color="light"
+				size="xs"
+				startIcon={{ icon: RouteIcon }}
+			>
+				New Route
+			</Button>
+		{:else}
+			<Alert title="Only workspace admins can create routes" type="warning" size="xs" />
+		{/if}
 	{/if}
-</div>
 
-{#if triggers}
-	{#if triggers.length == 0}
-		<div class="text-xs text-secondary px-2"> No http routes </div>
-	{:else}
-		<div class="flex flex-col divide-y px-2 pt-2">
-			{#each triggers as trigger (trigger.path)}
-				<div class="grid grid-cols-5 text-2xs items-center py-2">
-					<div class="col-span-2 truncate">{trigger.path}</div>
-					<div class="col-span-2 truncate">
-						{trigger.http_method.toUpperCase()} /{trigger.route_path}
+	{#if httpTriggers}
+		{#if httpTriggers.length == 0}
+			<div class="text-xs text-secondary"> No http routes </div>
+		{:else}
+			<div class="flex flex-col divide-y pt-2">
+				{#each httpTriggers as httpTriggers (httpTriggers.path)}
+					<div class="grid grid-cols-5 text-2xs items-center py-2">
+						<div class="col-span-2 truncate">{httpTriggers.path}</div>
+						<div class="col-span-2 truncate">
+							{httpTriggers.http_method.toUpperCase()} /{httpTriggers.route_path}
+						</div>
+						<div class="flex justify-end">
+							<button
+								on:click={() => routeEditor?.openEdit(httpTriggers.path, isFlow)}
+								class="px-2"
+							>
+								{#if httpTriggers.canWrite}
+									Edit
+								{:else}
+									View
+								{/if}
+							</button>
+						</div>
 					</div>
-					<button on:click={() => routeEditor?.openEdit(trigger.path, isFlow)}>
-						{#if trigger.canWrite}
-							Edit
-						{:else}
-							View
-						{/if}
-					</button>
-				</div>
-			{/each}
-		</div>
+				{/each}
+			</div>
+		{/if}
+	{:else}
+		<Skeleton layout={[[8]]} />
 	{/if}
-{:else}
-	<Skeleton layout={[[8]]} />
-{/if}
+
+	{#if newItem}
+		<Alert title="Triggers disabled" type="warning" size="xs">
+			Deploy the {isFlow ? 'flow' : 'script'} to add http routes.
+		</Alert>
+	{/if}
+</div>

package/package/components/triggers/RoutesPanel.svelte.d.ts

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         isFlow: boolean;
         path: string;
+        newItem?: boolean | undefined;
+        loadTriggers?: (() => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -13,5 +15,6 @@ export type RoutesPanelProps = typeof __propDef.props;
 export type RoutesPanelEvents = typeof __propDef.events;
 export type RoutesPanelSlots = typeof __propDef.slots;
 export default class RoutesPanel extends SvelteComponent<RoutesPanelProps, RoutesPanelEvents, RoutesPanelSlots> {
+    get loadTriggers(): () => Promise<void>;
 }
 export {};

package/package/components/triggers/ScheduledPollPanel.svelte

@@ -0,0 +1,38 @@
+<script>import Alert from '../common/alert/Alert.svelte';
+import Label from '../Label.svelte';
+import { base } from '../../base';
+</script>
+
+<div class="flex flex-col w-full gap-4 text-sm">
+	<Alert
+		title="Scheduled Poll"
+		size="xs"
+		documentationLink="https://www.windmill.dev/docs/flows/flow_trigger"
+	>
+		Sheduled Poll is a trigger that polls an external API at a given interval. It is useful for
+		triggering jobs based on the change of external states. Under the hood, it is a script triggered
+		by a schedule, and returning a list of the changed states so we can iterate over them.
+	</Alert>
+
+	<Label label="Setting a scheduled poll" primary>
+		<ul class="pt-4 space-y-2 text-sm">
+			<li>
+				1. Choose a trigger script using the script picker that will poll for new events regularly <img
+					class="shadow-lg rounded"
+					alt="script picker"
+					src="{base}/script-picker.png"
+					width="400"
+				/>
+			</li>
+
+			<li>
+				2. Add logic to process each new event <img
+					class="shadow-lg rounded"
+					alt="create action"
+					src="{base}/create_action.png"
+					width="500"
+				/>
+			</li>
+		</ul>
+	</Label>
+</div>

package/package/components/triggers/ScheduledPollPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScheduledPollPanelProps = typeof __propDef.props;
+export type ScheduledPollPanelEvents = typeof __propDef.events;
+export type ScheduledPollPanelSlots = typeof __propDef.slots;
+export default class ScheduledPollPanel extends SvelteComponent<ScheduledPollPanelProps, ScheduledPollPanelEvents, ScheduledPollPanelSlots> {
+}
+export {};

package/package/components/triggers/TriggerTokens.svelte

@@ -0,0 +1,70 @@
+<script>import { FlowService, ScriptService, UserService } from '../../gen';
+import { userStore, workspaceStore } from '../../stores';
+import { getContext } from 'svelte';
+import { Skeleton } from '../common';
+import Label from '../Label.svelte';
+import { capitalize } from '../../utils';
+export let isFlow;
+export let path;
+export let labelPrefix;
+const { triggersCount } = getContext('TriggerContext');
+let tokens = undefined;
+export async function listTokens() {
+    tokens = (isFlow
+        ? await FlowService.listTokensOfFlow({ workspace: $workspaceStore, path })
+        : await ScriptService.listTokensOfScript({ workspace: $workspaceStore, path })).filter((x) => x.label && x.label.startsWith(labelPrefix + '-'));
+    if (labelPrefix == 'email') {
+        $triggersCount = { ...($triggersCount ?? {}), email_count: tokens?.length };
+    }
+    else {
+        $triggersCount = { ...($triggersCount ?? {}), webhook_count: tokens?.length };
+    }
+}
+async function deleteToken(tokenPrefix) {
+    await UserService.deleteToken({
+        tokenPrefix: tokenPrefix
+    });
+    await listTokens();
+}
+$: $workspaceStore && listTokens();
+</script>
+
+<div class="flex flex-col gap-2">
+	<Label label="Existing {capitalize(labelPrefix)} Tokens">
+		{#if tokens}
+			{#if tokens.length == 0}
+				<div class="text-xs text-secondary">No {labelPrefix} specific tokens found</div>
+			{:else}
+				<div class="flex flex-col divide-y pt-2">
+					<div class="grid grid-cols-6 text-2xs items-center py-2">
+						<div class="col-span-2 truncate font-semibold">Prefix</div>
+						<div class="col-span-2 truncate font-semibold">Label</div>
+						<div class="col-span-1 truncate font-semibold">Owner</div>
+						<div class="col-span-1" />
+					</div>
+					{#each tokens as token (token.token_prefix)}
+						<div class="grid grid-cols-6 text-2xs items-center py-2">
+							<div class="col-span-2 truncate">{token.token_prefix}***</div>
+							<div class="col-span-2 truncate">
+								{token.label}
+							</div>
+							<div class="col-span-1 truncate">
+								{token.email}
+							</div>
+							{#if token.email == $userStore?.email}
+								<button
+									on:click={() => deleteToken(token.token_prefix)}
+									class="text-xs text-secondary">delete</button
+								>
+							{:else}
+								<div class="col-span-1" />
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+		{:else}
+			<Skeleton layout={[[8]]} />
+		{/if}
+	</Label>
+</div>

package/package/components/triggers/TriggerTokens.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+        labelPrefix: 'email' | 'webhook';
+        listTokens?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TriggerTokensProps = typeof __propDef.props;
+export type TriggerTokensEvents = typeof __propDef.events;
+export type TriggerTokensSlots = typeof __propDef.slots;
+export default class TriggerTokens extends SvelteComponent<TriggerTokensProps, TriggerTokensEvents, TriggerTokensSlots> {
+    get listTokens(): () => Promise<void>;
+}
+export {};