windmill-components 1.394.8 → 1.405.5

package/package/components/triggers/RouteEditorInner.svelte

@@ -0,0 +1,327 @@
+<script>import { Alert, Badge, 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 { Loader2, Save } 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';
+let is_flow = false;
+let initialPath = '';
+let edit = true;
+let itemKind = 'script';
+$: is_flow = itemKind === 'flow';
+let script_path = '';
+let initialScriptPath = '';
+let fixedScriptPath = '';
+let drawerLoading = true;
+export async function openEdit(ePath, isFlow) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        initialPath = ePath;
+        itemKind = isFlow ? 'flow' : 'script';
+        edit = true;
+        dirtyPath = false;
+        await loadTrigger();
+    }
+    catch (err) {
+        sendUserToast(`Could not load route: ${err}`, true);
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+export async function openNew(nis_flow, fixedScriptPath_) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        is_flow = nis_flow;
+        edit = false;
+        itemKind = nis_flow ? 'flow' : 'script';
+        is_async = false;
+        requires_auth = false;
+        initialRoutePath = '';
+        route_path = '';
+        http_method = 'post';
+        initialScriptPath = '';
+        fixedScriptPath = fixedScriptPath_ ?? '';
+        script_path = fixedScriptPath;
+        path = '';
+        initialPath = '';
+        dirtyPath = false;
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+let path = '';
+let pathError = '';
+let routeError = '';
+let is_async = false;
+let requires_auth = false;
+let initialRoutePath = '';
+let route_path = '';
+let http_method = 'post';
+const dispatch = createEventDispatcher();
+let can_write = true;
+async function loadTrigger() {
+    const s = await HttpTriggerService.getHttpTrigger({
+        workspace: $workspaceStore,
+        path: initialPath
+    });
+    script_path = s.script_path;
+    initialScriptPath = s.script_path;
+    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;
+    can_write = canWrite(s.path, s.extra_perms, $userStore);
+}
+async function triggerScript() {
+    if (edit) {
+        await HttpTriggerService.updateHttpTrigger({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                is_async,
+                requires_auth,
+                route_path: $userStore?.is_admin || $userStore?.is_super_admin ? route_path : undefined,
+                http_method
+            }
+        });
+        sendUserToast(`Route ${path} updated`);
+    }
+    else {
+        await HttpTriggerService.createHttpTrigger({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                is_async,
+                requires_auth,
+                route_path,
+                http_method
+            }
+        });
+        sendUserToast(`Route ${path} created`);
+    }
+    if (!$usedTriggerKinds.includes('http')) {
+        $usedTriggerKinds = [...$usedTriggerKinds, 'http'];
+    }
+    dispatch('update');
+    drawer.closeDrawer();
+}
+let drawer;
+let dirtyPath = false;
+$: fullRoute = `${$page.url.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>
+
+<Drawer size="700px" bind:this={drawer}>
+	<DrawerContent
+		title={edit ? (can_write ? `Edit route ${initialPath}` : `Route ${initialPath}`) : 'New route'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading && can_write}
+				<Button
+					startIcon={{ icon: Save }}
+					disabled={pathError != '' || routeError != '' || emptyString(script_path) || !can_write}
+					on:click={triggerScript}
+				>
+					Save
+				</Button>
+			{/if}
+		</svelte:fragment>
+		{#if drawerLoading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<div class="flex flex-col gap-12">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="route"
+							kind="http_trigger"
+							hideUser
+							disabled={!can_write}
+						/>
+					</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'}
+							/>
+						</label>
+
+						<ToggleButtonGroup
+							class="w-auto"
+							bind:selected={http_method}
+							disabled={!($userStore?.is_admin || $userStore?.is_super_admin) || !can_write}
+						>
+							<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">{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
+						/>
+
+						{#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>
+				</Section>
+				<Section label="Settings">
+					<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>
+						</div>
+					</div>
+				</Section>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,21 @@
+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;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RouteEditorInnerProps = typeof __propDef.props;
+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>;
+}
+export {};

package/package/components/triggers/RoutesPanel.svelte

@@ -0,0 +1,74 @@
+<script>import { Button } from '../common';
+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';
+export let isFlow;
+export let path;
+let routeEditor;
+let triggers = undefined;
+$: path && loadTriggers();
+async function loadTriggers() {
+    try {
+        triggers = (await HttpTriggerService.listHttpTriggers({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).map((x) => {
+            return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
+        });
+    }
+    catch (e) {
+        console.error('impossible to load http routes');
+    }
+}
+</script>
+
+<RouteEditor
+	on:update={() => {
+		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>
+	{/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}
+					</div>
+					<button on:click={() => routeEditor?.openEdit(trigger.path, isFlow)}>
+						{#if trigger.canWrite}
+							Edit
+						{:else}
+							View
+						{/if}
+					</button>
+				</div>
+			{/each}
+		</div>
+	{/if}
+{:else}
+	<Skeleton layout={[[8]]} />
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isFlow: boolean;
+        path: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/package/editorUtils.js

@@ -70,6 +70,8 @@ export function langToExt(lang) {
             return 'gql';
         case 'css':
             return 'css';
+        case 'ansible':
+            return 'yml';
         default:
             return 'unknown';
     }

package/package/gen/core/OpenAPI.js

@@ -21,7 +21,7 @@ export const OpenAPI = {
     PASSWORD: undefined,
     TOKEN: undefined,
     USERNAME: undefined,
-    VERSION: '1.394.3',
+    VERSION: '1.404.1',
     WITH_CREDENTIALS: false,
     interceptors: {
         request: new Interceptors(),