windmill-components 1.434.1 → 1.444.1

package/package/components/triggers/KafkaTriggersPanel.svelte

@@ -1,19 +1,31 @@
-<script>import { Button } from '../common';
-import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
+<script>import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
 import { KafkaTriggerService } from '../../gen';
-import Skeleton from '../common/skeleton/Skeleton.svelte';
 import { canWrite } from '../../utils';
 import Alert from '../common/alert/Alert.svelte';
-import { getContext } from 'svelte';
+import { getContext, onMount } from 'svelte';
 import KafkaTriggerEditor from './KafkaTriggerEditor.svelte';
 import { isCloudHosted } from '../../cloud';
-import KafkaIcon from '../icons/KafkaIcon.svelte';
+import TriggersEditorSection from './TriggersEditorSection.svelte';
+import Section from '../Section.svelte';
+import Skeleton from '../common/skeleton/Skeleton.svelte';
+import Description from '../Description.svelte';
 export let isFlow;
 export let path;
 export let newItem = false;
+export let isEditor = false;
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
 let kafkaTriggerEditor;
 $: path && loadTriggers();
-const { triggersCount } = getContext('TriggerContext');
+const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
+onMount(() => {
+    if (defaultValues &&
+        $selectedTrigger === 'kafka' &&
+        Object.keys($defaultValues ?? {}).length > 0) {
+        kafkaTriggerEditor.openNew(isFlow, path, $defaultValues);
+        defaultValues.set(undefined);
+    }
+});
 let kafkaTriggers = undefined;
 export async function loadTriggers() {
     try {
@@ -30,6 +42,13 @@ export async function loadTriggers() {
         console.error('impossible to load kafka triggers', e);
     }
 }
+let data = {
+    kafkaTriggers: [],
+    newItem
+};
+function saveTrigger(path, args) {
+    kafkaTriggerEditor?.openNew(isFlow, path, args);
+}
 </script>
 
 <KafkaTriggerEditor
@@ -49,47 +68,56 @@ export async function loadTriggers() {
 	</Alert>
 {:else}
 	<div class="flex flex-col gap-4">
-		{#if newItem}
-			<Alert title="Triggers disabled" type="warning" size="xs">
-				Deploy the {isFlow ? 'flow' : 'script'} to add kafka triggers.
-			</Alert>
-		{:else}
-			<Button
-				on:click={() => kafkaTriggerEditor?.openNew(isFlow, path)}
-				variant="border"
-				color="light"
-				size="xs"
-				startIcon={{ icon: KafkaIcon }}
-			>
-				New Kafka Trigger
-			</Button>
+		<Description link="https://www.windmill.dev/docs/core_concepts/kafka_triggers">
+			Kafka triggers execute scripts and flows in response to messages published to Kafka topics.
+		</Description>
+		<TriggersEditorSection
+			on:saveTrigger={(e) => {
+				saveTrigger(path, e.detail.config)
+			}}
+			on:applyArgs
+			on:addPreprocessor
+			cloudDisabled={false}
+			triggerType="kafka"
+			{isFlow}
+			{data}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+		/>
+
+		{#if !newItem}
 			{#if kafkaTriggers}
-				{#if kafkaTriggers.length == 0}
-					<div class="text-xs text-secondary"> No kafka triggers </div>
-				{:else}
-					<div class="flex flex-col divide-y pt-2">
-						{#each kafkaTriggers as kafkaTrigger (kafkaTrigger.path)}
-							<div class="grid grid-cols-5 text-2xs items-center py-2">
-								<div class="col-span-2 truncate">{kafkaTrigger.path}</div>
-								<div class="col-span-2 truncate">
-									{kafkaTrigger.kafka_resource_path}
-								</div>
-								<div class="flex justify-end">
-									<button
-										on:click={() => kafkaTriggerEditor?.openEdit(kafkaTrigger.path, isFlow)}
-										class="px-2"
-									>
-										{#if kafkaTrigger.canWrite}
-											Edit
-										{:else}
-											View
-										{/if}
-									</button>
+				<Section label="Kafka Triggers">
+					{#if kafkaTriggers.length == 0}
+						<div class="text-xs text-secondary text-center"> No kafka triggers </div>
+					{:else}
+						<div class="flex flex-col divide-y pt-2">
+							{#each kafkaTriggers as kafkaTrigger (kafkaTrigger.path)}
+								<div class="grid grid-cols-5 text-2xs items-center py-2">
+									<div class="col-span-2 truncate">{kafkaTrigger.path}</div>
+									<div class="col-span-2 truncate">
+										{kafkaTrigger.kafka_resource_path}
+									</div>
+									<div class="flex justify-end">
+										<button
+											on:click={() => kafkaTriggerEditor?.openEdit(kafkaTrigger.path, isFlow)}
+											class="px-2"
+										>
+											{#if kafkaTrigger.canWrite}
+												Edit
+											{:else}
+												View
+											{/if}
+										</button>
+									</div>
 								</div>
-							</div>
-						{/each}
-					</div>
-				{/if}
+							{/each}
+						</div>
+					{/if}
+				</Section>
 			{:else}
 				<Skeleton layout={[[8]]} />
 			{/if}

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

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

package/package/components/triggers/RouteEditor.svelte

@@ -6,10 +6,10 @@ export async function openEdit(ePath, isFlow) {
     await tick();
     drawer?.openEdit(ePath, isFlow);
 }
-export async function openNew(is_flow, initial_script_path) {
+export async function openNew(is_flow, initial_script_path, defaultValues) {
     open = true;
     await tick();
-    drawer?.openNew(is_flow, initial_script_path);
+    drawer?.openNew(is_flow, initial_script_path, defaultValues);
 }
 export async function getTriggers() {
     return drawer?.getTriggers();

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
-        openNew?: ((is_flow: boolean, initial_script_path?: string) => Promise<void>) | undefined;
+        openNew?: ((is_flow: boolean, initial_script_path?: string, defaultValues?: Record<string, any>) => Promise<void>) | undefined;
         getTriggers?: (() => Promise<any>) | undefined;
     };
     events: {
@@ -17,7 +17,7 @@ export type RouteEditorEvents = typeof __propDef.events;
 export type RouteEditorSlots = typeof __propDef.slots;
 export default class RouteEditor extends SvelteComponent<RouteEditorProps, RouteEditorEvents, RouteEditorSlots> {
     get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
-    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined) => Promise<void>;
+    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined, defaultValues?: Record<string, any> | undefined) => Promise<void>;
     get getTriggers(): () => Promise<any>;
 }
 export {};

package/package/components/triggers/RouteEditorConfigSection.svelte

@@ -0,0 +1,162 @@
+<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 { 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 dirtyRoutePath = false;
+export let route_path = '';
+export let http_method = 'post';
+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;
+export let isValid = false;
+let validateTimeout = undefined;
+let routeError = '';
+async function validateRoute(path, method) {
+    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);
+}
+async function routeExists(route_path, method) {
+    return await HttpTriggerService.existsRoute({
+        workspace: $workspaceStore,
+        requestBody: {
+            route_path,
+            http_method: method
+        }
+    });
+}
+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);
+</script>
+
+<div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			captureType="http"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			bind:captureTable
+		>
+			<Label label="URL">
+				<ClipboardPanel content={fullRoute} disabled={!captureInfo.active} />
+			</Label>
+
+			<Label label="Example cUrl">
+				<CopyableCodeBlock
+					disabled={!captureInfo.active}
+					code={`curl \\
+-X POST ${fullRoute} \\
+-H 'Content-Type: application/json' \\
+-d '{"foo": 42}'`}
+					language={bash}
+				/>
+			</Label>
+		</CaptureSection>
+	{/if}
+	<Section label="HTTP" {headless}>
+		{#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>
+</div>

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

@@ -0,0 +1,43 @@
+import { SvelteComponent } from "svelte";
+import type { CaptureInfo } from './CaptureSection.svelte';
+import CaptureTable from './CaptureTable.svelte';
+declare const __propDef: {
+    props: {
+        dirtyRoutePath?: boolean | undefined;
+        route_path?: string | undefined;
+        http_method?: "get" | "post" | "put" | "delete" | "patch" | undefined;
+        can_write?: boolean | undefined;
+        static_asset_config?: {
+            s3: string;
+            storage?: string;
+            filename?: string;
+        } | undefined;
+        showCapture?: boolean | undefined;
+        initialRoutePath?: string | undefined;
+        headless?: boolean | undefined;
+        captureInfo?: CaptureInfo | undefined;
+        captureTable?: CaptureTable | undefined;
+        isValid?: boolean | undefined;
+    };
+    events: {
+        captureToggle: CustomEvent<undefined>;
+        applyArgs: CustomEvent<{
+            kind: "main" | "preprocessor";
+            args: Record<string, any> | undefined;
+        }>;
+        updateSchema: CustomEvent<{
+            schema: any;
+            redirect: boolean;
+        }>;
+        addPreprocessor: CustomEvent<null>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RouteEditorConfigSectionProps = typeof __propDef.props;
+export type RouteEditorConfigSectionEvents = typeof __propDef.events;
+export type RouteEditorConfigSectionSlots = typeof __propDef.slots;
+export default class RouteEditorConfigSection extends SvelteComponent<RouteEditorConfigSectionProps, RouteEditorConfigSectionEvents, RouteEditorConfigSectionSlots> {
+}
+export {};