windmill-components 1.408.2 → 1.430.3

package/package/components/triggers/TriggersEditor.svelte

@@ -0,0 +1,113 @@
+<script>import Tab from '../common/tabs/Tab.svelte';
+import { Tabs } from '../common';
+import WebhooksPanel from './WebhooksPanel.svelte';
+import EmailTriggerPanel from '../details/EmailTriggerPanel.svelte';
+import RoutesPanel from './RoutesPanel.svelte';
+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 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 initialPath;
+export let schema;
+export let isFlow;
+const { selectedTrigger, simplifiedPoll } = getContext('TriggerContext');
+</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 $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>
+</FlowCard>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        noEditor: boolean;
+        newItem?: boolean | undefined;
+        currentPath: string;
+        initialPath: string;
+        schema: any;
+        isFlow: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TriggersEditorProps = typeof __propDef.props;
+export type TriggersEditorEvents = typeof __propDef.events;
+export type TriggersEditorSlots = typeof __propDef.slots;
+export default class TriggersEditor extends SvelteComponent<TriggersEditorProps, TriggersEditorEvents, TriggersEditorSlots> {
+}
+export {};

package/package/components/{details → triggers}/WebhooksPanel.svelte

@@ -2,7 +2,7 @@
 import Tooltip from '../Tooltip.svelte';
 import { userStore, workspaceStore } from '../../stores';
 import bash from 'svelte-highlight/languages/bash';
-import { Tabs, Tab, TabContent, Button } from '../common';
+import { Tabs, Tab, TabContent, Button, Alert } from '../common';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import { DEFAULT_WEBHOOK_TYPE, SCRIPT_VIEW_SHOW_EXAMPLE_CURL, SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON } from '../../consts';
@@ -10,10 +10,12 @@ import { ArrowDownRight, ArrowUpRight, Clipboard } from 'lucide-svelte';
 import UserSettings from '../UserSettings.svelte';
 import { Highlight } from 'svelte-highlight';
 import { typescript } from 'svelte-highlight/languages';
-import ClipboardPanel from './ClipboardPanel.svelte';
+import ClipboardPanel from '../details/ClipboardPanel.svelte';
 import { copyToClipboard, generateRandomString } from '../../utils';
 import HighlightTheme from '../HighlightTheme.svelte';
 import { base } from '../../base';
+import Label from '../Label.svelte';
+import TriggerTokens from './TriggerTokens.svelte';
 let userSettings;
 export let token;
 export let args;
@@ -21,6 +23,8 @@ export let scopes = [];
 export let isFlow = false;
 export let hash = undefined;
 export let path;
+export let url = '';
+export let newItem = false;
 let selectedTab = 'rest';
 let webhooks;
 $: webhooks = isFlow ? computeFlowWebhooks(path) : computeScriptWebhooks(hash, path);
@@ -170,6 +174,7 @@ while true; do
   fi
 done`}`;
 }
+let triggerTokens = undefined;
 </script>
 
 <HighlightTheme />
@@ -178,32 +183,36 @@ done`}`;
 	bind:this={userSettings}
 	on:tokenCreated={(e) => {
 		token = e.detail
+		triggerTokens?.listTokens()
 	}}
+	newTokenWorkspace={$workspaceStore}
 	newTokenLabel={`webhook-${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
 	{scopes}
 />
 
-<div class="p-2 flex flex-col w-full gap-4">
+<div class="flex flex-col w-full gap-4">
 	{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
-		<div class="flex flex-row justify-between my-2 gap-2">
-			<input
-				bind:value={token}
-				placeholder="paste your token here once created to alter examples below"
-				class="!text-xs"
-			/>
-			<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
-				Create a Webhook-specific Token
-				<Tooltip light>
-					The token will have a scope such that it can only be used to trigger this script. It is
-					safe to share as it cannot be used to impersonate you.
-				</Tooltip>
-			</Button>
-		</div>
+		<Label label="Token">
+			<div class="flex flex-row justify-between gap-2">
+				<input
+					bind:value={token}
+					placeholder="paste your token here once created to alter examples below"
+					class="!text-xs !font-normal"
+				/>
+				<Button size="xs" color="light" variant="border" on:click={userSettings.openDrawer}>
+					Create a Webhook-specific Token
+					<Tooltip light>
+						The token will have a scope such that it can only be used to trigger this script. It is
+						safe to share as it cannot be used to impersonate you.
+					</Tooltip>
+				</Button>
+			</div>
+		</Label>
 	{/if}
 
 	<div class="flex flex-col gap-2">
 		<div class="flex flex-row justify-between">
-			<div class="text-xs font-semibold flex flex-row items-center">Request type</div>
+			<div class="text-sm font-normal text-secondary flex flex-row items-center">Request type</div>
 			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={webhookType}>
 				<ToggleButton
 					label="Async"
@@ -218,7 +227,7 @@ done`}`;
 			</ToggleButtonGroup>
 		</div>
 		<div class="flex flex-row justify-between">
-			<div class="text-xs font-semibold flex flex-row items-center">Call method</div>
+			<div class="text-sm font-normal text-secondary flex flex-row items-center">Call method</div>
 			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={requestType}>
 				<ToggleButton
 					label="POST by path"
@@ -245,7 +254,9 @@ done`}`;
 			</ToggleButtonGroup>
 		</div>
 		<div class="flex flex-row justify-between">
-			<div class="text-xs font-semibold flex flex-row items-center">Token configuration</div>
+			<div class="text-sm font-normal text-secondary flex flex-row items-center"
+				>Token configuration</div
+			>
 			<ToggleButtonGroup class="h-[30px] w-auto" bind:selected={tokenType}>
 				<ToggleButton label="Token in Headers" value="headers" />
 				<ToggleButton label="Token in Query" value="query" />
@@ -265,14 +276,20 @@ done`}`;
 			{#key token}
 				<TabContent value="rest" class="flex flex-col flex-1 h-full ">
 					<div class="flex flex-col gap-2">
-						<ClipboardPanel title="Url" content={url} />
+						<Label label="Url">
+							<ClipboardPanel content={url} />
+						</Label>
 
 						{#if requestType !== 'get_path'}
-							<ClipboardPanel title="Body" content={JSON.stringify(args, null, 2)} />
+							<Label label="Body">
+								<ClipboardPanel content={JSON.stringify(args, null, 2)} />
+							</Label>
 						{/if}
 						{#key requestType}
 							{#key tokenType}
-								<ClipboardPanel title="Headers" content={JSON.stringify(headers(), null, 2)} />
+								<Label label="Headers">
+									<ClipboardPanel content={JSON.stringify(headers(), null, 2)} />
+								</Label>
 							{/key}
 						{/key}
 					</div>
@@ -321,4 +338,15 @@ done`}`;
 			{/key}
 		</svelte:fragment>
 	</Tabs>
+
+	<div class="mt-10" />
+	<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="webhook" />
+
+	{#if newItem}
+		<div class="mt-10" />
+		<Alert type="warning" title="Attached to a deployed path">
+			The webhooks are only valid for a given path and will only trigger the deployed version of the
+			{isFlow ? 'flow' : 'script'}.
+		</Alert>
+	{/if}
 </div>

package/package/components/{details → triggers}/WebhooksPanel.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         isFlow?: boolean | undefined;
         hash?: string | undefined;
         path: string;
+        url?: string | undefined;
+        newItem?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/triggers/WebsocketTriggerEditor.svelte

@@ -0,0 +1,19 @@
+<script>import { tick } from 'svelte';
+import WebsocketTriggerEditorInner from './WebsocketTriggerEditorInner.svelte';
+let open = false;
+export async function openEdit(ePath, isFlow) {
+    open = true;
+    await tick();
+    drawer?.openEdit(ePath, isFlow);
+}
+export async function openNew(is_flow, initial_script_path) {
+    open = true;
+    await tick();
+    drawer?.openNew(is_flow, initial_script_path);
+}
+let drawer;
+</script>
+
+{#if open}
+	<WebsocketTriggerEditorInner on:update bind:this={drawer} />
+{/if}

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

@@ -0,0 +1,21 @@
+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;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WebsocketTriggerEditorProps = typeof __propDef.props;
+export type WebsocketTriggerEditorEvents = typeof __propDef.events;
+export type WebsocketTriggerEditorSlots = typeof __propDef.slots;
+export default class WebsocketTriggerEditor extends SvelteComponent<WebsocketTriggerEditorProps, WebsocketTriggerEditorEvents, WebsocketTriggerEditorSlots> {
+    get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
+    get openNew(): (is_flow: boolean, initial_script_path?: string | undefined) => Promise<void>;
+}
+export {};