windmill-components 1.448.50 → 1.472.2

package/package/components/triggers/{RouteEditorConfigSection.svelte → http/RouteEditorConfigSection.svelte}

@@ -1,29 +1,26 @@
-<script>import { Alert, Badge } from '../common';
-import Required from '../Required.svelte';
-import Section from '../Section.svelte';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import { userStore, workspaceStore } from '../../stores';
-import Label from '../Label.svelte';
-import CopyableCodeBlock from '../details/CopyableCodeBlock.svelte';
+<script>import { Alert, Badge } from '../../common';
+import Required from '../../Required.svelte';
+import Section from '../../Section.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import { userStore, workspaceStore } from '../../../stores';
+import Label from '../../Label.svelte';
+import CopyableCodeBlock from '../../details/CopyableCodeBlock.svelte';
 import { bash } from 'svelte-highlight/languages';
-import { HttpTriggerService } from '../../gen';
+import { HttpTriggerService } from '../../../gen';
 // import { page } from '$app/stores'
-import { isCloudHosted } from '../../cloud';
-import { base } from '../../base';
-import CaptureSection from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
-import ClipboardPanel from '../details/ClipboardPanel.svelte';
-export let isFlow;
-export let path;
-export let args = { route_path: '', http_method: 'get' };
+import { base } from '../../../base';
+import CaptureSection from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
+import ClipboardPanel from '../../details/ClipboardPanel.svelte';
+import { isCloudHosted } from '../../../cloud';
+export let initialTriggerPath = undefined;
 export let dirtyRoutePath = false;
-export let route_path = '';
-export let http_method = 'post';
+export let route_path;
+export let http_method;
 export let can_write = false;
 export let static_asset_config = undefined;
 export let showCapture = false;
-export let initialRoutePath = '';
 export let headless = false;
 export let captureInfo = undefined;
 export let captureTable = undefined;
@@ -31,15 +28,15 @@ export let isValid = false;
 export let runnableArgs = {};
 let validateTimeout = undefined;
 let routeError = '';
-async function validateRoute(path, method) {
+async function validateRoute(routePath, method) {
     if (validateTimeout) {
         clearTimeout(validateTimeout);
     }
     validateTimeout = setTimeout(async () => {
-        if (!/^[\w-:]+(\/[\w-:]+)*$/.test(path)) {
+        if (!routePath || !method || !/^:?[-\w]+(\/:?[-\w]+)*$/.test(routePath)) {
             routeError = 'Endpoint not valid';
         }
-        else if (initialRoutePath !== path && (await routeExists(path, method))) {
+        else if (await routeExists(routePath, method)) {
             routeError = 'Endpoint already taken';
         }
         else {
@@ -53,26 +50,26 @@ async function routeExists(route_path, method) {
         workspace: $workspaceStore,
         requestBody: {
             route_path,
-            http_method: method
+            http_method: method,
+            trigger_path: initialTriggerPath
         }
     });
 }
-$: captureURL = `${location.origin}${base}/api/w/${$workspaceStore}/capture_u/http/${isFlow ? 'flow' : 'script'}/${path.replaceAll('/', '.')}/${route_path}`;
-function getHttpRoute(route_path) {
-    return `${location.origin}${base}/api/r/${isCloudHosted() ? $workspaceStore + '/' : ''}${route_path}`;
-}
 $: validateRoute(route_path, http_method);
 $: isValid = routeError === '';
-$: fullRoute = getHttpRoute(route_path);
-$: showCapture && (http_method = 'post');
-function updateArgs(route_path, http_method) {
-    args && ((args.route_path = route_path), (args.http_method = http_method));
+function getHttpRoute(route_path) {
+    return `${location.origin}${base}/api/r/${isCloudHosted() ? $workspaceStore + '/' : ''}${route_path ?? ''}`;
 }
-$: updateArgs(route_path, http_method);
+$: fullRoute = getHttpRoute(route_path);
+$: !http_method && (http_method = 'post');
+$: route_path === undefined && (route_path = '');
 </script>
 
 <div>
 	{#if showCapture && captureInfo}
+		{@const captureURL = `${location.origin}${base}/api/w/${$workspaceStore}/capture_u/http/${
+			captureInfo.isFlow ? 'flow' : 'script'
+		}/${captureInfo.path.replaceAll('/', '.')}/${route_path}`}
 		<CaptureSection
 			captureType="http"
 			disabled={!isValid}
@@ -92,7 +89,7 @@ $: updateArgs(route_path, http_method);
 				<CopyableCodeBlock
 					disabled={!captureInfo.active}
 					code={`curl \\
--X ${http_method.toUpperCase()} ${captureURL} \\
+-X ${(http_method ?? 'post').toUpperCase()} ${captureURL} \\
 -H 'Content-Type: application/json' \\
 -d '${JSON.stringify(runnableArgs ?? {}, null, 2)}'`}
 					language={bash}
@@ -109,26 +106,28 @@ $: updateArgs(route_path, http_method);
 		{/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 class="flex flex-col gap-1">
+					<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>
-					<div class="text-2xs text-tertiary"> ':myparam' for path params </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
+						}}
+					/>
 				</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
@@ -137,12 +136,13 @@ $: updateArgs(route_path, http_method);
 				disabled={!($userStore?.is_admin || $userStore?.is_super_admin) ||
 					!can_write ||
 					!!static_asset_config}
+				let:item
 			>
-				<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" />
+				<ToggleButton label="GET" value="get" {item} />
+				<ToggleButton label="POST" value="post" {item} />
+				<ToggleButton label="PUT" value="put" {item} />
+				<ToggleButton label="PATCH" value="patch" {item} />
+				<ToggleButton label="DELETE" value="delete" {item} />
 			</ToggleButtonGroup>
 			<div class="flex flex-col w-full mt-2">
 				<div class="flex justify-start w-full">

package/package/components/triggers/{RouteEditorConfigSection.svelte.d.ts → http/RouteEditorConfigSection.svelte.d.ts}

@@ -1,14 +1,12 @@
 import { SvelteComponent } from "svelte";
-import type { CaptureInfo } from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
+import type { CaptureInfo } from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
 declare const __propDef: {
     props: {
-        isFlow: boolean;
-        path: string;
-        args?: Record<string, any> | undefined;
+        initialTriggerPath?: string | undefined;
         dirtyRoutePath?: boolean | undefined;
-        route_path?: string | undefined;
-        http_method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
+        route_path: string | undefined;
+        http_method: 'get' | 'post' | 'put' | 'patch' | 'delete' | undefined;
         can_write?: boolean | undefined;
         static_asset_config?: {
             s3: string;
@@ -16,7 +14,6 @@ declare const __propDef: {
             filename?: string;
         } | undefined;
         showCapture?: boolean | undefined;
-        initialRoutePath?: string | undefined;
         headless?: boolean | undefined;
         captureInfo?: CaptureInfo | undefined;
         captureTable?: CaptureTable | undefined;
@@ -24,7 +21,9 @@ declare const __propDef: {
         runnableArgs?: any;
     };
     events: {
-        captureToggle: CustomEvent<undefined>;
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
         applyArgs: CustomEvent<{
             kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;

package/package/components/triggers/{RouteEditorInner.svelte → http/RouteEditorInner.svelte}

@@ -1,26 +1,27 @@
-<script>import { Button } from '../common';
-import Drawer from '../common/drawer/Drawer.svelte';
-import DrawerContent from '../common/drawer/DrawerContent.svelte';
-import Path from '../Path.svelte';
-import Required from '../Required.svelte';
-import ScriptPicker from '../ScriptPicker.svelte';
-import { HttpTriggerService } from '../../gen';
-import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
-import { canWrite, emptyString, sendUserToast } from '../../utils';
+<script>import { Button } from '../../common';
+import Drawer from '../../common/drawer/Drawer.svelte';
+import DrawerContent from '../../common/drawer/DrawerContent.svelte';
+import Path from '../../Path.svelte';
+import Required from '../../Required.svelte';
+import ScriptPicker from '../../ScriptPicker.svelte';
+import { HttpTriggerService } from '../../../gen';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../../stores';
+import { canWrite, emptyString, sendUserToast } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
-import Section from '../Section.svelte';
+import Section from '../../Section.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 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 Label from '../../Label.svelte';
 import { json } from 'svelte-highlight/languages';
 import { Highlight } from 'svelte-highlight';
+import JsonEditor from '../../JsonEditor.svelte';
+import FileUpload from '../../common/fileUpload/FileUpload.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import S3FilePicker from '../../S3FilePicker.svelte';
+import Toggle from '../../Toggle.svelte';
 import RouteEditorConfigSection from './RouteEditorConfigSection.svelte';
+import SimpleEditor from '../../SimpleEditor.svelte';
+import { isCloudHosted } from '../../../cloud';
 let is_flow = false;
 let initialPath = '';
 let edit = true;
@@ -57,7 +58,6 @@ export async function openNew(nis_flow, fixedScriptPath_, defaultValues) {
         itemKind = nis_flow ? 'flow' : 'script';
         is_async = false;
         requires_auth = false;
-        initialRoutePath = '';
         route_path = defaultValues?.route_path ?? '';
         dirtyRoutePath = false;
         http_method = defaultValues?.http_method ?? 'post';
@@ -69,6 +69,7 @@ export async function openNew(nis_flow, fixedScriptPath_, defaultValues) {
         path = '';
         initialPath = '';
         dirtyPath = false;
+        is_static_website = false;
     }
     finally {
         drawerLoading = false;
@@ -80,10 +81,10 @@ let isValid = false;
 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 is_static_website = false;
 let s3FilePicker;
 let s3FileUploadRawMode = false;
 let s3Editor = undefined;
@@ -99,12 +100,14 @@ async function loadTrigger() {
     is_flow = s.is_flow;
     path = s.path;
     route_path = s.route_path;
-    initialRoutePath = s.route_path;
     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;
+    if (!isCloudHosted()) {
+        static_asset_config = s.static_asset_config;
+        s3FileUploadRawMode = !!static_asset_config;
+        is_static_website = s.is_static_website;
+    }
     can_write = canWrite(s.path, s.extra_perms, $userStore);
 }
 async function triggerScript() {
@@ -120,7 +123,8 @@ async function triggerScript() {
                 requires_auth,
                 route_path: $userStore?.is_admin || $userStore?.is_super_admin ? route_path : undefined,
                 http_method,
-                static_asset_config
+                static_asset_config,
+                is_static_website
             }
         });
         sendUserToast(`Route ${path} updated`);
@@ -136,7 +140,8 @@ async function triggerScript() {
                 requires_auth,
                 route_path,
                 http_method,
-                static_asset_config
+                static_asset_config,
+                is_static_website
             }
         });
         sendUserToast(`Route ${path} created`);
@@ -149,13 +154,13 @@ async function triggerScript() {
 }
 let drawer;
 let dirtyPath = false;
-let args = { route_path: '' };
-$: args && (route_path = args.route_path);
+$: !static_asset_config && (is_static_website = false);
 </script>
 
 {#if static_asset_config}
 	<S3FilePicker
 		bind:this={s3FilePicker}
+		folderOnly={is_static_website}
 		bind:selectedFileKey={static_asset_config}
 		on:close={() => {
 			s3Editor?.setCode(JSON.stringify(static_asset_config, null, 2))
@@ -204,104 +209,117 @@ $: args && (route_path = args.route_path);
 					</Label>
 				</div>
 
-				<RouteEditorConfigSection
-					isFlow={is_flow}
-					{path}
-					bind:route_path
-					bind:args
-					bind:isValid
-					bind:dirtyRoutePath
-					bind:http_method
-					{can_write}
-					bind:static_asset_config
-					{initialRoutePath}
-				/>
-
 				<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 !isCloudHosted()}
+						<ToggleButtonGroup
+							disabled={fixedScriptPath != '' || !can_write}
+							selected={static_asset_config
+								? is_static_website
+									? 'static_website'
+									: 'static_asset'
+								: 'runnable'}
+							on:selected={(ev) => {
+								if (ev.detail === 'static_asset' || ev.detail === 'static_website') {
+									static_asset_config = { s3: '' }
+									s3Editor?.setCode(JSON.stringify(static_asset_config, null, 2))
+									script_path = ''
+									initialScriptPath = ''
+									is_flow = false
+									http_method = 'get'
+									is_async = false
+									is_static_website = ev.detail === 'static_website'
+									if (is_static_website) {
+										requires_auth = false
+									}
+								} else if (ev.detail === 'runnable') {
+									static_asset_config = undefined
+								}
+							}}
+							let:item
+						>
+							<ToggleButton label="Runnable" value="runnable" {item} />
+							<ToggleButton label="Static asset" value="static_asset" {item} />
+							<ToggleButton label="Static website" value="static_website" {item} />
+						</ToggleButtonGroup>
+					{/if}
 
 					{#if static_asset_config}
-						<div class="flex flex-col w-full gap-1">
-							{#if can_write}
-								<Toggle
-									class="flex justify-end"
-									bind:checked={s3FileUploadRawMode}
-									size="xs"
-									options={{ left: 'Existing file' }}
-									disabled={!can_write}
-								/>
-							{/if}
-							{#if s3FileUploadRawMode}
+						{#if is_static_website}
+							<p class="text-xs my-1 text-tertiary">
+								Upload or specify a <b>folder</b> on S3. All its files will be served under the path
+								above. Use this full path as the base URL of your website to ensure relative imports
+								work correctly.
+							</p>
+						{/if}
+						<div class="flex flex-col gap-4">
+							<div class="flex flex-col w-full gap-1">
 								{#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)}
+									<Toggle
+										class="flex justify-end"
+										bind:checked={s3FileUploadRawMode}
+										size="xs"
+										options={{ left: 'Existing file' }}
+										disabled={!can_write}
 									/>
 								{/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 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?.(!is_static_website ? static_asset_config : undefined)
+											}}
+											startIcon={{ icon: Pipette }}
+										>
+											Choose an object from the catalog
+										</Button>
+									{/if}
+								{:else}
+									{#key is_static_website}
+										<FileUpload
+											folderOnly={is_static_website}
+											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: ''
+												}
+											}}
+										/>
+									{/key}
 								{/if}
-							{: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>
 						</div>
 					{:else}
-						<p class="text-xs mb-1 text-tertiary">
+						<p class="text-xs mt-0.5 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>
@@ -332,48 +350,73 @@ $: args && (route_path = args.route_path);
 					{/if}
 				</Section>
 
-				<Section label="Advanced">
-					<div class="flex flex-col gap-4">
-						<div class="flex flex-row justify-between">
-							<Label label="Request type" class="w-full">
+				<RouteEditorConfigSection
+					initialTriggerPath={initialPath}
+					bind:route_path
+					bind:isValid
+					bind:dirtyRoutePath
+					bind:http_method
+					{can_write}
+					bind:static_asset_config
+				/>
+
+				{#if !is_static_website}
+					<Section label="Advanced">
+						<div class="flex flex-col gap-4">
+							{#if !static_asset_config}
+								<div class="flex flex-row justify-between">
+									<Label label="Request type" class="w-full">
+										<svelte:fragment slot="action">
+											<ToggleButtonGroup
+												class="w-auto h-full"
+												selected={is_async ? 'async' : 'sync'}
+												on:selected={({ detail }) => {
+													is_async = detail === 'async'
+												}}
+												disabled={!can_write || !!static_asset_config}
+												let:item
+											>
+												<ToggleButton
+													label="Async"
+													value="async"
+													tooltip="The returning value is the uuid of the job assigned to execute the job."
+													{item}
+												/>
+												<ToggleButton
+													label="Sync"
+													value="sync"
+													tooltip="Triggers the execution, wait for the job to complete and return it as a response."
+													{item}
+												/>
+											</ToggleButtonGroup>
+										</svelte:fragment>
+									</Label>
+								</div>
+							{/if}
+							<Label label="Authentication" class="w-full">
 								<svelte:fragment slot="action">
 									<ToggleButtonGroup
 										class="w-auto h-full"
-										bind:selected={is_async}
+										selected={requires_auth ? 'required' : 'none'}
+										on:selected={({ detail }) => {
+											requires_auth = detail === 'required'
+										}}
 										disabled={!can_write}
+										let:item
 									>
+										<ToggleButton label="None" value="none" {item} />
 										<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."
+											label="Required"
+											value="required"
+											tooltip="Requires authentication with read access on the route"
+											{item}
 										/>
 									</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>
+					</Section>
+				{/if}
 			</div>
 		{/if}
 	</DrawerContent>