windmill-components 1.434.1 → 1.444.1

package/package/components/triggers/RouteEditorInner.svelte

@@ -1,4 +1,4 @@
-<script>import { Alert, Badge, Button } from '../common';
+<script>import { Button } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import Path from '../Path.svelte';
@@ -13,13 +13,14 @@ 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 { 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';
+import { json } from 'svelte-highlight/languages';
+import { Highlight } from 'svelte-highlight';
+import RouteEditorConfigSection from './RouteEditorConfigSection.svelte';
 let is_flow = false;
 let initialPath = '';
 let edit = true;
@@ -47,7 +48,7 @@ export async function openEdit(ePath, isFlow) {
         drawerLoading = false;
     }
 }
-export async function openNew(nis_flow, fixedScriptPath_) {
+export async function openNew(nis_flow, fixedScriptPath_, defaultValues) {
     drawerLoading = true;
     try {
         drawer?.openDrawer();
@@ -57,9 +58,9 @@ export async function openNew(nis_flow, fixedScriptPath_) {
         is_async = false;
         requires_auth = false;
         initialRoutePath = '';
-        route_path = '';
+        route_path = defaultValues?.route_path ?? '';
         dirtyRoutePath = false;
-        http_method = 'post';
+        http_method = defaultValues?.http_method ?? 'post';
         initialScriptPath = '';
         fixedScriptPath = fixedScriptPath_ ?? '';
         script_path = fixedScriptPath;
@@ -75,7 +76,7 @@ export async function openNew(nis_flow, fixedScriptPath_) {
 }
 let path = '';
 let pathError = '';
-let routeError = '';
+let isValid = false;
 let dirtyRoutePath = false;
 let is_async = false;
 let requires_auth = false;
@@ -148,36 +149,6 @@ async function triggerScript() {
 }
 let drawer;
 let dirtyPath = false;
-$: fullRoute = `${window.location.origin}${base}/api/r/${isCloudHosted() ? $workspaceStore + '/' : ''}${route_path}`;
-async function routeExists(route_path, method) {
-    return await HttpTriggerService.existsRoute({
-        workspace: $workspaceStore,
-        requestBody: {
-            route_path,
-            http_method
-        }
-    });
-}
-let validateTimeout = undefined;
-async function validateRoute(path, method) {
-    routeError = '';
-    if (validateTimeout) {
-        clearTimeout(validateTimeout);
-    }
-    validateTimeout = setTimeout(async () => {
-        if (!/^[\w-:]+(\/[\w-:]+)*$/.test(path)) {
-            routeError = 'Endpoint not valid';
-        }
-        else if (initialRoutePath !== path && (await routeExists(path, method))) {
-            routeError = 'Endpoint already taken';
-        }
-        else {
-            routeError = '';
-        }
-        validateTimeout = undefined;
-    }, 500);
-}
-$: validateRoute(route_path, http_method);
 </script>
 
 {#if static_asset_config}
@@ -201,7 +172,7 @@ $: validateRoute(route_path, http_method);
 				<Button
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' ||
-						routeError != '' ||
+						!isValid ||
 						(!static_asset_config && emptyString(script_path)) ||
 						(static_asset_config && emptyString(static_asset_config.s3)) ||
 						!can_write}
@@ -231,76 +202,15 @@ $: validateRoute(route_path, http_method);
 					</Label>
 				</div>
 
-				<Section label="HTTP">
-					{#if !($userStore?.is_admin || $userStore?.is_super_admin)}
-						<Alert type="info" title="Admin only" collapsible>
-							Route endpoints can only be edited by workspace admins
-						</Alert>
-						<div class="my-2" />
-					{/if}
-					<div class="flex flex-col w-full gap-4">
-						<label class="block grow w-full">
-							<div class="text-secondary text-sm flex items-center gap-1 w-full justify-between">
-								<div>
-									Path
-									<Required required={true} />
-								</div>
-								<div class="text-2xs text-tertiary"> ':myparam' for path params </div>
-							</div>
-							<!-- svelte-ignore a11y-autofocus -->
-							<input
-								type="text"
-								autocomplete="off"
-								bind:value={route_path}
-								disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
-								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 ||
-								!!static_asset_config}
-						>
-							<ToggleButton label="GET" value="get" />
-							<ToggleButton label="POST" value="post" />
-							<ToggleButton label="PUT" value="put" />
-							<ToggleButton label="PATCH" value="patch" />
-							<ToggleButton label="DELETE" value="delete" />
-						</ToggleButtonGroup>
-						<div class="flex flex-col w-full mt-2">
-							<div class="flex justify-start w-full">
-								<Badge
-									color="gray"
-									class="center-center !bg-surface-secondary !text-tertiary !w-[90px] !h-[24px] rounded-r-none border"
-								>
-									Full endpoint
-								</Badge>
-								<input
-									type="text"
-									readonly
-									value={fullRoute}
-									size={fullRoute.length || 50}
-									class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-									on:focus={({ currentTarget }) => {
-										currentTarget.select()
-									}}
-								/>
-							</div>
-
-							<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5"
-								>{dirtyRoutePath ? routeError : ''}</div
-							>
-						</div>
-					</div>
-				</Section>
+				<RouteEditorConfigSection
+					bind:route_path
+					bind:isValid
+					bind:dirtyRoutePath
+					bind:http_method
+					{can_write}
+					bind:static_asset_config
+					{initialRoutePath}
+				/>
 
 				<Section label="Target">
 					<ToggleButtonGroup
@@ -324,36 +234,48 @@ $: validateRoute(route_path, http_method);
 
 					{#if static_asset_config}
 						<div class="flex flex-col w-full gap-1">
-							<Toggle
-								class="flex justify-end"
-								bind:checked={s3FileUploadRawMode}
-								size="xs"
-								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"
+							{#if can_write}
+								<Toggle
+									class="flex justify-end"
+									bind:checked={s3FileUploadRawMode}
 									size="xs"
-									btnClasses="mt-1"
-									on:click={() => {
-										s3FilePicker?.open?.(static_asset_config)
-									}}
-									startIcon={{ icon: Pipette }}
-								>
-									Choose an object from the catalog
-								</Button>
+									options={{ left: 'Existing file' }}
+									disabled={!can_write}
+								/>
+							{/if}
+							{#if s3FileUploadRawMode}
+								{#if can_write}
+									<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}
+									/>
+								{:else}
+									<Highlight
+										language={json}
+										code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
+									/>
+								{/if}
+								{#if can_write}
+									<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>
+								{/if}
 							{:else}
 								<FileUpload
 									allowMultiple={false}
@@ -386,7 +308,8 @@ $: validateRoute(route_path, http_method);
 								allowFlow={true}
 								bind:itemKind
 								bind:scriptPath={script_path}
-								allowRefresh
+								allowRefresh={can_write}
+								allowEdit={!$userStore?.operator}
 							/>
 
 							{#if script_path === undefined}
@@ -404,34 +327,46 @@ $: validateRoute(route_path, http_method);
 					{/if}
 				</Section>
 
-				<Section label="Settings">
+				<Section label="Advanced">
 					<div class="flex flex-col gap-4">
 						<div class="flex flex-row justify-between">
-							<div class="text-sm font-semibold flex flex-row items-center">Request type</div>
-							<ToggleButtonGroup class="w-auto" bind:selected={is_async} disabled={!can_write}>
-								<ToggleButton
-									label="Async"
-									value={true}
-									tooltip="The returning value is the uuid of the job assigned to execute the job."
-								/>
-								<ToggleButton
-									label="Sync"
-									value={false}
-									tooltip="Triggers the execution, wait for the job to complete and return it as a response."
-								/>
-							</ToggleButtonGroup>
-						</div>
-						<div class="flex flex-row justify-between">
-							<div class="text-sm font-semibold flex flex-row items-center">Authentication</div>
-							<ToggleButtonGroup class="w-auto" bind:selected={requires_auth} disabled={!can_write}>
-								<ToggleButton label="None" value={false} />
-								<ToggleButton
-									label="Required"
-									value={true}
-									tooltip="Requires authentication with read access on the route"
-								/>
-							</ToggleButtonGroup>
+							<Label label="Request type" class="w-full">
+								<svelte:fragment slot="action">
+									<ToggleButtonGroup
+										class="w-auto h-full"
+										bind:selected={is_async}
+										disabled={!can_write}
+									>
+										<ToggleButton
+											label="Async"
+											value={true}
+											tooltip="The returning value is the uuid of the job assigned to execute the job."
+										/>
+										<ToggleButton
+											label="Sync"
+											value={false}
+											tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+										/>
+									</ToggleButtonGroup>
+								</svelte:fragment>
+							</Label>
 						</div>
+						<Label label="Authentication" class="w-full">
+							<svelte:fragment slot="action">
+								<ToggleButtonGroup
+									class="w-auto h-full"
+									bind:selected={requires_auth}
+									disabled={!can_write}
+								>
+									<ToggleButton label="None" value={false} />
+									<ToggleButton
+										label="Required"
+										value={true}
+										tooltip="Requires authentication with read access on the route"
+									/>
+								</ToggleButtonGroup>
+							</svelte:fragment>
+						</Label>
 					</div>
 				</Section>
 			</div>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
-        openNew?: ((nis_flow: boolean, fixedScriptPath_?: string) => Promise<void>) | undefined;
+        openNew?: ((nis_flow: boolean, fixedScriptPath_?: string, defaultValues?: Record<string, any>) => Promise<void>) | undefined;
     };
     events: {
         focus: CustomEvent<any>;
@@ -18,6 +18,6 @@ export type RouteEditorInnerEvents = typeof __propDef.events;
 export type RouteEditorInnerSlots = typeof __propDef.slots;
 export default class RouteEditorInner extends SvelteComponent<RouteEditorInnerProps, RouteEditorInnerEvents, RouteEditorInnerSlots> {
     get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
-    get openNew(): (nis_flow: boolean, fixedScriptPath_?: string | undefined) => Promise<void>;
+    get openNew(): (nis_flow: boolean, fixedScriptPath_?: string | undefined, defaultValues?: Record<string, any> | undefined) => Promise<void>;
 }
 export {};

package/package/components/triggers/RoutesPanel.svelte

@@ -1,18 +1,29 @@
-<script>import { Button } from '../common';
-import { userStore, workspaceStore } from '../../stores';
+<script>import { userStore, workspaceStore } from '../../stores';
 import { HttpTriggerService } from '../../gen';
-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';
+import { getContext, onMount } from 'svelte';
+import Section from '../Section.svelte';
+import TriggersEditorSection from './TriggersEditorSection.svelte';
+import Description from '../Description.svelte';
 export let isFlow;
 export let path;
 export let newItem = false;
+export let isEditor = false;
+export let canHavePreprocessor = false;
 let routeEditor;
 $: path && loadTriggers();
-const { triggersCount } = getContext('TriggerContext');
+const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
+onMount(() => {
+    if (defaultValues &&
+        $selectedTrigger === 'routes' &&
+        Object.keys($defaultValues ?? {}).length > 0) {
+        routeEditor.openNew(isFlow, path, $defaultValues);
+        defaultValues.set(undefined);
+    }
+});
 let httpTriggers = undefined;
 export async function loadTriggers() {
     try {
@@ -38,57 +49,61 @@ export async function loadTriggers() {
 	bind:this={routeEditor}
 />
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-8">
+	<Description link="https://www.windmill.dev/docs/core_concepts/http_routing">
+		Routes expose your scripts and flows as HTTP endpoints. Each route can be configured with a
+		specific HTTP method and path.
+	</Description>
+	<TriggersEditorSection
+		on:saveTrigger={(e) => {
+			routeEditor?.openNew(isFlow, path, e.detail.config)
+		}}
+		on:applyArgs
+		on:addPreprocessor
+		cloudDisabled={false}
+		triggerType="http"
+		{isFlow}
+		{path}
+		{isEditor}
+		{canHavePreprocessor}
+		{newItem}
+	/>
 	{#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}
+		<Section label="Routes">
+			{#if !$userStore?.is_admin && !$userStore?.is_super_admin}
+				<Alert title="Only workspace admins can create routes" type="warning" size="xs" />
+			{/if}
 
-	{#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>
+			{#if httpTriggers}
+				{#if httpTriggers.length == 0}
+					<div class="text-xs text-secondary text-center"> 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>
+						{/each}
 					</div>
-				{/each}
-			</div>
-		{/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}
+			{:else}
+				<Skeleton layout={[[8]]} />
+			{/if}
+		</Section>
 	{/if}
 </div>

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

@@ -4,9 +4,14 @@ declare const __propDef: {
         isFlow: boolean;
         path: string;
         newItem?: boolean | undefined;
+        isEditor?: boolean | undefined;
+        canHavePreprocessor?: boolean | undefined;
         loadTriggers?: (() => Promise<void>) | undefined;
     };
     events: {
+        applyArgs: any;
+        addPreprocessor: any;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/triggers/ScheduledPollPanel.svelte

@@ -1,18 +1,14 @@
-<script>import Alert from '../common/alert/Alert.svelte';
-import Label from '../Label.svelte';
+<script>import Label from '../Label.svelte';
 import { base } from '../../base';
+import Description from '../Description.svelte';
 </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
+	<Description link="https://www.windmill.dev/docs/flows/flow_trigger">
+		Scheduled 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>
+	</Description>
 
 	<Label label="Setting a scheduled poll" primary>
 		<ul class="pt-4 space-y-2 text-sm">