windmill-components 1.434.1 → 1.444.0

package/package/components/triggers/TriggersEditor.svelte

@@ -7,107 +7,137 @@ import RunPageSchedules from '../RunPageSchedules.svelte';
 import { canWrite } from '../../utils';
 import { userStore } from '../../stores';
 import FlowCard from '../flows/common/FlowCard.svelte';
-import { getContext } from 'svelte';
+import { getContext, onDestroy, createEventDispatcher } from 'svelte';
 import WebsocketTriggersPanel from './WebsocketTriggersPanel.svelte';
 import ScheduledPollPanel from './ScheduledPollPanel.svelte';
 import KafkaTriggersPanel from './KafkaTriggersPanel.svelte';
 export let noEditor;
 export let newItem = false;
 export let currentPath;
+export let hash = undefined;
 export let initialPath;
 export let schema;
 export let isFlow;
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
 const { selectedTrigger, simplifiedPoll } = getContext('TriggerContext');
+const dispatch = createEventDispatcher();
+onDestroy(() => {
+    dispatch('exitTriggers');
+});
 </script>
 
 <FlowCard {noEditor} title="Triggers">
-	<div class="pt-4">
-		{#if !$simplifiedPoll}
-			<Tabs bind:selected={$selectedTrigger}>
-				<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
-				<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
-				<Tab value="routes" selectedClass="text-primary text-sm font-semibold">Routes</Tab>
-				<Tab value="websockets" selectedClass="text-primary text-sm font-semibold">Websockets</Tab>
-				<Tab value="kafka" selectedClass="text-primary text-sm font-semibold">Kafka</Tab>
-				<Tab value="emails" selectedClass="text-primary text-sm font-semibold">Email</Tab>
-				{#if isFlow}
-					<Tab value="scheduledPoll" selectedClass="text-primary text-sm font-semibold"
-						>Scheduled Poll</Tab
-					>
-				{/if}
-
-				<svelte:fragment slot="content">
-					{#if $selectedTrigger === 'webhooks'}
-						<div class="p-4">
-							<WebhooksPanel
-								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-								path={currentPath}
-								{isFlow}
-								args={{}}
-								token=""
-								{newItem}
-							/>
-						</div>
-					{/if}
-
-					{#if $selectedTrigger === 'emails'}
-						<div class="p-4">
-							<EmailTriggerPanel
-								token=""
-								scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
-								path={currentPath}
-								{isFlow}
-							/>
-						</div>
-					{/if}
-
-					{#if $selectedTrigger === 'routes'}
-						<div class="p-4">
-							<RoutesPanel {newItem} path={currentPath} {isFlow} />
-						</div>
-					{/if}
+	{#if !$simplifiedPoll}
+		<Tabs bind:selected={$selectedTrigger}>
+			<Tab value="webhooks" selectedClass="text-primary font-semibold">Webhooks</Tab>
+			<Tab value="schedules" selectedClass="text-primary text-sm font-semibold">Schedules</Tab>
+			<Tab value="routes" selectedClass="text-primary text-sm font-semibold">HTTP</Tab>
+			<Tab value="websockets" selectedClass="text-primary text-sm font-semibold">Websockets</Tab>
+			<Tab value="kafka" selectedClass="text-primary text-sm font-semibold">Kafka</Tab>
+			<Tab value="emails" selectedClass="text-primary text-sm font-semibold">Email</Tab>
+			{#if isFlow}
+				<Tab value="scheduledPoll" selectedClass="text-primary text-sm font-semibold"
+					>Scheduled Poll</Tab
+				>
+			{/if}
 
-					{#if $selectedTrigger === 'websockets'}
-						<div class="p-4">
-							<WebsocketTriggersPanel {newItem} path={currentPath} {isFlow} />
-						</div>
-					{/if}
-
-					{#if $selectedTrigger === 'kafka'}
-						<div class="p-4">
-							<KafkaTriggersPanel {newItem} path={currentPath} {isFlow} />
-						</div>
-					{/if}
-
-					{#if $selectedTrigger === 'schedules'}
-						<div class="p-4">
-							<RunPageSchedules
-								{schema}
-								{isFlow}
-								path={initialPath}
-								{newItem}
-								can_write={canWrite(currentPath, {}, $userStore)}
-							/>
-						</div>
-					{/if}
-
-					{#if $selectedTrigger === 'scheduledPoll'}
-						<div class="p-4">
-							<ScheduledPollPanel />
-						</div>
-					{/if}
-				</svelte:fragment>
-			</Tabs>
-		{:else}
-			<div class="px-4 pb-2">
-				<RunPageSchedules
-					{schema}
-					{isFlow}
-					path={initialPath}
-					{newItem}
-					can_write={canWrite(currentPath, {}, $userStore)}
-				/>
-			</div>
-		{/if}
-	</div>
+			<svelte:fragment slot="content">
+				{#if $selectedTrigger === 'webhooks'}
+					<div class="p-4">
+						<WebhooksPanel
+							on:applyArgs
+							on:addPreprocessor
+							scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+							path={currentPath}
+							{hash}
+							{isFlow}
+							args={{}}
+							token=""
+							{newItem}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+						/>
+					</div>
+				{:else if $selectedTrigger === 'emails'}
+					<div class="p-4">
+						<EmailTriggerPanel
+							on:applyArgs
+							on:addPreprocessor
+							token=""
+							scopes={isFlow ? [`run:flow/${currentPath}`] : [`run:script/${currentPath}`]}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+							{newItem}
+						/>
+					</div>
+				{:else if $selectedTrigger === 'routes'}
+					<div class="p-4">
+						<RoutesPanel
+							on:applyArgs
+							on:addPreprocessor
+							{newItem}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+						/>
+					</div>
+				{:else if $selectedTrigger === 'websockets'}
+					<div class="p-4">
+						<WebsocketTriggersPanel
+							on:applyArgs
+							on:addPreprocessor
+							{newItem}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+						/>
+					</div>
+				{:else if $selectedTrigger === 'kafka'}
+					<div class="p-4">
+						<KafkaTriggersPanel
+							on:applyArgs
+							on:addPreprocessor
+							{newItem}
+							path={currentPath}
+							{isFlow}
+							isEditor={true}
+							{canHavePreprocessor}
+							{hasPreprocessor}
+						/>
+					</div>
+				{:else if $selectedTrigger === 'schedules'}
+					<div class="p-4">
+						<RunPageSchedules
+							{schema}
+							{isFlow}
+							path={initialPath}
+							{newItem}
+							can_write={canWrite(currentPath, {}, $userStore)}
+						/>
+					</div>
+				{:else if $selectedTrigger === 'scheduledPoll'}
+					<div class="p-4">
+						<ScheduledPollPanel />
+					</div>
+				{/if}
+			</svelte:fragment>
+		</Tabs>
+	{:else}
+		<div class="px-4 pb-2">
+			<RunPageSchedules
+				{schema}
+				{isFlow}
+				path={initialPath}
+				{newItem}
+				can_write={canWrite(currentPath, {}, $userStore)}
+			/>
+		</div>
+	{/if}
 </FlowCard>

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

@@ -4,11 +4,18 @@ declare const __propDef: {
         noEditor: boolean;
         newItem?: boolean | undefined;
         currentPath: string;
+        hash?: string | undefined;
         initialPath: string;
         schema: any;
         isFlow: boolean;
+        canHavePreprocessor?: boolean | undefined;
+        hasPreprocessor?: boolean | undefined;
     };
     events: {
+        applyArgs: any;
+        addPreprocessor: any;
+        exitTriggers: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/triggers/TriggersEditorSection.svelte

@@ -0,0 +1,109 @@
+<script>import Button from '../common/button/Button.svelte';
+import { ChevronDown, Save } from 'lucide-svelte';
+import CaptureWrapper from './CaptureWrapper.svelte';
+import { capitalize } from '../../utils';
+import Popover from '../Popover.svelte';
+import Section from '../Section.svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import {} from '../../gen';
+import TriggersWrapper from './TriggersWrapper.svelte';
+import { twMerge } from 'tailwind-merge';
+export let cloudDisabled;
+export let triggerType;
+export let isFlow = false;
+export let data = {};
+export let noSave = false;
+export let isEditor = false;
+export let path = '';
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
+export let newItem;
+const captureTypeLabels = {
+    http: 'New custom HTTP route',
+    websocket: 'New websocket trigger',
+    webhook: 'Webhook',
+    kafka: 'New kafka trigger',
+    email: 'Email trigger'
+};
+const { captureOn } = getContext('TriggerContext');
+let args = {};
+const dispatch = createEventDispatcher();
+const { flowStore, selectedId } = getContext('FlowEditorContext') || {};
+</script>
+
+<Section label={captureTypeLabels[triggerType]}>
+	<svelte:fragment slot="action">
+		<div class="flex flex-row grow w-min-0 gap-2 items-center justify-end">
+			{#if isEditor}
+				<Button
+					size="xs2"
+					on:click={() => {
+						$captureOn = !$captureOn
+					}}
+					variant="border"
+					color="light"
+					endIcon={{
+						icon: ChevronDown,
+						classes: twMerge('transition', $captureOn ? 'rotate-180' : '')
+					}}
+				>
+					Capture
+				</Button>
+			{/if}
+
+			{#if !noSave}
+				{@const disabled = newItem || cloudDisabled}
+				<Popover notClickable>
+					<Button
+						size="xs2"
+						{disabled}
+						startIcon={{ icon: Save }}
+						on:click={() => {
+							dispatch('saveTrigger', {
+								config: args
+							})
+						}}
+					>
+						Save
+					</Button>
+					<svelte:fragment slot="text">
+						{#if disabled}
+							{#if newItem}
+								Deploy the runnable to enable trigger creation
+							{:else if cloudDisabled}
+								{capitalize(triggerType)} triggers are disabled in the multi-tenant cloud
+							{/if}
+						{:else}
+							Create new {captureTypeLabels[triggerType].toLowerCase()}
+						{/if}
+					</svelte:fragment>
+				</Popover>
+			{/if}
+		</div>
+	</svelte:fragment>
+
+	{#if isEditor}
+		<CaptureWrapper
+			{path}
+			{isFlow}
+			captureType={triggerType}
+			{hasPreprocessor}
+			{canHavePreprocessor}
+			on:applyArgs
+			on:addPreprocessor
+			on:updateSchema={(e) => {
+				const { schema, redirect } = e.detail
+				$flowStore.schema = schema
+				if (redirect) {
+					$selectedId = 'Input'
+				}
+			}}
+			on:saveTrigger
+			bind:args
+			{data}
+			showCapture={$captureOn}
+		/>
+	{:else}
+		<TriggersWrapper {path} {isFlow} {triggerType} {cloudDisabled} {args} {data} />
+	{/if}
+</Section>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        cloudDisabled: boolean;
+        triggerType: CaptureTriggerKind;
+        isFlow?: boolean | undefined;
+        data?: any;
+        noSave?: boolean | undefined;
+        isEditor?: boolean | undefined;
+        path?: string | undefined;
+        canHavePreprocessor?: boolean | undefined;
+        hasPreprocessor?: boolean | undefined;
+        newItem: boolean;
+    };
+    events: {
+        applyArgs: any;
+        addPreprocessor: any;
+        saveTrigger: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TriggersEditorSectionProps = typeof __propDef.props;
+export type TriggersEditorSectionEvents = typeof __propDef.events;
+export type TriggersEditorSectionSlots = typeof __propDef.slots;
+export default class TriggersEditorSection extends SvelteComponent<TriggersEditorSectionProps, TriggersEditorSectionEvents, TriggersEditorSectionSlots> {
+}
+export {};

package/package/components/triggers/TriggersWrapper.svelte

@@ -0,0 +1,60 @@
+<script>import {} from '../../gen';
+import { capitalize } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import RouteEditorConfigSection from './RouteEditorConfigSection.svelte';
+import WebsocketEditorConfigSection from './WebsocketEditorConfigSection.svelte';
+import WebhooksConfigSection from './WebhooksConfigSection.svelte';
+import EmailTriggerConfigSection from '../details/EmailTriggerConfigSection.svelte';
+import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte';
+export let triggerType = 'webhook';
+export let cloudDisabled = false;
+export let args;
+export let isFlow = false;
+export let path = '';
+export let data = {};
+</script>
+
+<div class="flex flex-col gap-4 w-full">
+	{#if cloudDisabled}
+		<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+			{capitalize(triggerType)} triggers are disabled in the multi-tenant cloud.
+		</Alert>
+	{:else if triggerType === 'websocket'}
+		<WebsocketEditorConfigSection
+			can_write={true}
+			headless={true}
+			bind:url={args.url}
+			bind:url_runnable_args={args.url_runnable_args}
+			showCapture={false}
+		/>
+	{:else if triggerType === 'webhook'}
+		<WebhooksConfigSection
+			{isFlow}
+			{path}
+			hash={data?.hash}
+			token={data?.token}
+			{args}
+			scopes={data?.scopes}
+			showCapture={false}
+		/>
+	{:else if triggerType === 'http'}
+		<RouteEditorConfigSection
+			showCapture={false}
+			can_write={true}
+			bind:route_path={args.route_path}
+			bind:http_method={args.http_method}
+			headless
+		/>
+	{:else if triggerType === 'email'}
+		<EmailTriggerConfigSection
+			hash={data?.hash}
+			token={data?.token}
+			{path}
+			{isFlow}
+			userSettings={data?.userSettings}
+			emailDomain={data?.emailDomain}
+		/>
+	{:else if triggerType === 'kafka'}
+		<KafkaTriggersConfigSection headless={true} bind:args staticInputDisabled={false} />
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        triggerType?: any;
+        cloudDisabled?: boolean | undefined;
+        args: any;
+        isFlow?: boolean | undefined;
+        path?: string | undefined;
+        data?: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TriggersWrapperProps = typeof __propDef.props;
+export type TriggersWrapperEvents = typeof __propDef.events;
+export type TriggersWrapperSlots = typeof __propDef.slots;
+export default class TriggersWrapper extends SvelteComponent<TriggersWrapperProps, TriggersWrapperEvents, TriggersWrapperSlots> {
+}
+export {};