windmill-components 1.408.2 → 1.430.2

package/package/components/details/DetailPageDetailPanel.svelte

@@ -1,105 +1,59 @@
 <script>import { Tabs, Tab, TabContent } from '../common';
-import { CalendarCheck2, MailIcon, Route, Terminal, Webhook } from 'lucide-svelte';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
 import HighlightTheme from '../HighlightTheme.svelte';
 import FlowViewerInner from '../FlowViewerInner.svelte';
+import DetailPageTriggerPanel from './DetailPageTriggerPanel.svelte';
 export let triggerSelected = 'webhooks';
 export let flow_json = undefined;
-export let hasStepDetails = false;
+export let simplfiedPoll = false;
 export let isOperator = false;
 export let selected;
-$: if (hasStepDetails) {
-    selected = 'flow_step';
-}
-// When we no longer have a selected flow step, switch to saved inputs
-$: !hasStepDetails && selected === 'flow_step' && (selected = 'saved_inputs');
 </script>
 
 <HighlightTheme />
 
-<Splitpanes horizontal class="h-full">
-	<Pane size={100}>
-		<Tabs bind:selected>
-			<Tab value="saved_inputs">Saved inputs</Tab>
-			{#if !isOperator}
-				<Tab value="details">Details & Triggers</Tab>
-			{/if}
-			{#if flow_json}
-				<Tab value="raw">Raw</Tab>
-			{/if}
-			{#if hasStepDetails}
-				<Tab value="flow_step">Step</Tab>
-			{/if}
-			<svelte:fragment slot="content">
-				<div class="overflow-hidden" style="height:calc(100% - 32px);">
-					<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
-						<slot name="save_inputs" />
-					</TabContent>
-					<TabContent value="details" class="flex flex-col flex-1 h-full">
-						<Splitpanes horizontal class="h-full">
-							<Pane size={50} minSize={20}>
-								<slot name="details" />
-							</Pane>
-							<Pane size={50} minSize={20}>
-								<Tabs bind:selected={triggerSelected}>
-									<Tab value="webhooks">
-										<span class="flex flex-row gap-2 items-center">
-											<Webhook size={14} />
-											Webhooks
-										</span>
-									</Tab>
-									<Tab value="schedule">
-										<span class="flex flex-row gap-2 items-center">
-											<CalendarCheck2 size={14} />
-											Schedules
-										</span>
-									</Tab>
-									<Tab value="routes">
-										<span class="flex flex-row gap-2 items-center">
-											<Route size={14} />
-											HTTP
-										</span>
-									</Tab>
-									<Tab value="email">
-										<span class="flex flex-row gap-2 items-center">
-											<MailIcon size={14} />
-											Email
-										</span>
-									</Tab>
-									<Tab value="cli">
-										<span class="flex flex-row gap-2 items-center">
-											<Terminal size={14} />
-											CLI
-										</span>
-									</Tab>
-								</Tabs>
+<Tabs bind:selected>
+	<Tab value="saved_inputs">Saved Inputs</Tab>
+	{#if !isOperator}
+		<Tab value="triggers">Triggers</Tab>
+	{/if}
+	{#if flow_json}
+		<Tab value="raw">Export</Tab>
+	{:else}
+		<Tab value="script">Script</Tab>
+	{/if}
+	{#if selected == 'flow_step'}
+		<Tab value="flow_step">Step</Tab>
+	{/if}
 
-								<div class="h-[calc(100%-32px)]">
-									<div class="h-full overflow-auto">
-										{#if triggerSelected === 'webhooks'}
-											<slot name="webhooks" />
-										{:else if triggerSelected === 'routes'}
-											<slot name="routes" />
-										{:else if triggerSelected === 'email'}
-											<slot name="email" />
-										{:else if triggerSelected === 'schedule'}
-											<slot name="schedule" />
-										{:else if triggerSelected === 'cli'}
-											<slot name="cli" />
-										{/if}
-									</div>
-								</div>
-							</Pane>
-						</Splitpanes>
-					</TabContent>
-					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto">
+	<svelte:fragment slot="content">
+		<div class="h-[calc(100%-32px)]">
+			<div class="h-full overflow-auto">
+				<TabContent value="saved_inputs" class="h-full">
+					<slot name="save_inputs" />
+				</TabContent>
+				<TabContent value="script" class="h-full">
+					<slot name="script" />
+				</TabContent>
+				<TabContent value="triggers" class="h-full pt-2">
+					<DetailPageTriggerPanel {simplfiedPoll} bind:triggerSelected>
+						<slot slot="webhooks" name="webhooks" />
+						<slot slot="routes" name="routes" />
+						<slot slot="websockets" name="websockets" />
+						<slot slot="kafka" name="kafka" />
+						<slot slot="emails" name="emails" />
+						<slot slot="schedules" name="schedules" />
+						<slot slot="cli" name="cli" />
+					</DetailPageTriggerPanel>
+				</TabContent>
+				{#if flow_json}
+					<TabContent value="raw" class="flex flex-col flex-1 h-full overflow-auto p-2">
 						<FlowViewerInner flow={flow_json} />
 					</TabContent>
 					<TabContent value="flow_step" class="flex flex-col flex-1 h-full">
 						<slot name="flow_step" />
 					</TabContent>
-				</div>
-			</svelte:fragment>
-		</Tabs>
-	</Pane>
-</Splitpanes>
+				{/if}
+			</div>
+		</div>
+	</svelte:fragment>
+</Tabs>

package/package/components/details/DetailPageDetailPanel.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        triggerSelected?: "email" | "schedule" | "webhooks" | "cli" | "routes" | undefined;
+        triggerSelected?: "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | undefined;
         flow_json?: any | undefined;
-        hasStepDetails?: boolean | undefined;
+        simplfiedPoll?: boolean | undefined;
         isOperator?: boolean | undefined;
         selected: string;
     };
@@ -12,12 +12,28 @@ declare const __propDef: {
     };
     slots: {
         save_inputs: {};
-        details: {};
-        webhooks: {};
-        routes: {};
-        email: {};
-        schedule: {};
-        cli: {};
+        script: {};
+        webhooks: {
+            slot: string;
+        };
+        routes: {
+            slot: string;
+        };
+        websockets: {
+            slot: string;
+        };
+        kafka: {
+            slot: string;
+        };
+        emails: {
+            slot: string;
+        };
+        schedules: {
+            slot: string;
+        };
+        cli: {
+            slot: string;
+        };
         flow_step: {};
     };
 };

package/package/components/details/DetailPageHeader.svelte

@@ -5,6 +5,9 @@ import { classNames } from '../../utils';
 import ErrorHandlerToggleButton from './ErrorHandlerToggleButton.svelte';
 import { twMerge } from 'tailwind-merge';
 import { userStore } from '../../stores';
+import { createEventDispatcher, getContext } from 'svelte';
+import { Calendar } from 'lucide-svelte';
+const { triggersCount, selectedTrigger } = getContext('TriggerContext');
 export let mainButtons = [];
 export let menuItems = [];
 export let title;
@@ -12,6 +15,7 @@ export let tag;
 export let errorHandlerKind;
 export let scriptOrFlowPath;
 export let errorHandlerMuted;
+const dispatch = createEventDispatcher();
 </script>
 
 <div class="border-b p-2 shadow-md">
@@ -29,6 +33,22 @@ export let errorHandlerMuted;
 					<Badge>tag: {tag}</Badge>
 				{/if}
 				<slot />
+				{#if $triggersCount?.primary_schedule}
+					<Button
+						btnClasses="inline-flex"
+						startIcon={{ icon: Calendar }}
+						variant="contained"
+						color="light"
+						size="xs"
+						on:click={() => {
+							$selectedTrigger = 'schedules'
+							dispatch('triggerDetail')
+						}}
+					>
+						{$triggersCount?.primary_schedule?.schedule ?? ''}
+					</Button>
+				{/if}
+				<slot name="trigger-badges" />
 			</div>
 			<div class="flex gap-1 md:gap-2 items-center">
 				{#if menuItems.length > 0}

package/package/components/details/DetailPageHeader.svelte.d.ts

@@ -19,10 +19,13 @@ declare const __propDef: {
         errorHandlerMuted: boolean | undefined;
     };
     events: {
+        triggerDetail: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
+        'trigger-badges': {};
     };
 };
 export type DetailPageHeaderProps = typeof __propDef.props;

package/package/components/details/DetailPageLayout.svelte

@@ -2,13 +2,24 @@
 import SplitPanesWrapper from '../splitPanes/SplitPanesWrapper.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import DetailPageDetailPanel from './DetailPageDetailPanel.svelte';
+import { setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import DetailPageTriggerPanel from './DetailPageTriggerPanel.svelte';
 export let isOperator = false;
 export let flow_json = undefined;
-export let hasStepDetails = false;
 export let selected;
-export let triggerSelected = 'webhooks';
+export let triggersCount;
 let mobileTab = 'form';
 let clientWidth = window.innerWidth;
+const primaryScheduleStore = writable(undefined);
+const selectedTriggerStore = writable('webhooks');
+const simplifiedPoll = writable(false);
+setContext('TriggerContext', {
+    selectedTrigger: selectedTriggerStore,
+    primarySchedule: primaryScheduleStore,
+    triggersCount,
+    simplifiedPoll
+});
 </script>
 
 <main class="h-screen w-full" bind:clientWidth>
@@ -22,18 +33,20 @@ let clientWidth = window.innerWidth;
 					</Pane>
 					<Pane size={35} minSize={15}>
 						<DetailPageDetailPanel
-							bind:triggerSelected
+							simplfiedPoll={$simplifiedPoll}
+							bind:triggerSelected={$selectedTriggerStore}
 							bind:selected
 							{isOperator}
 							{flow_json}
-							{hasStepDetails}
 						>
 							<slot slot="webhooks" name="webhooks" />
 							<slot slot="routes" name="routes" />
-							<slot slot="email" name="email" />
-							<slot slot="schedule" name="schedule" />
+							<slot slot="websockets" name="websockets" />
+							<slot slot="kafka" name="kafka" />
+							<slot slot="emails" name="emails" />
+							<slot slot="schedules" name="schedules" />
 							<slot slot="cli" name="cli" />
-							<slot slot="details" name="details" />
+							<slot slot="script" name="script" />
 							<slot slot="save_inputs" name="save_inputs" />
 							<slot slot="flow_step" name="flow_step" />
 						</DetailPageDetailPanel>
@@ -42,28 +55,46 @@ let clientWidth = window.innerWidth;
 			</SplitPanesWrapper>
 		</div>
 	{:else}
-		<div class="h-full">
+		<div class="h-full w-full">
 			<slot name="header" />
 			<Tabs bind:selected={mobileTab}>
 				<Tab value="form">Run form</Tab>
-				<Tab value="detail">Details</Tab>
+				<Tab value="saved_inputs">Saved Inputs</Tab>
+				{#if !isOperator}
+					<Tab value="triggers">Triggers</Tab>
+				{/if}
+				{#if !flow_json}
+					<Tab value="script">Script</Tab>
+				{/if}
+
 				<svelte:fragment slot="content">
-					<TabContent value="form" class="flex flex-col flex-1 h-full">
-						<slot name="form" />
-					</TabContent>
+					<div class="h-full">
+						<TabContent value="form" class="flex flex-col flex-1 h-full">
+							<slot name="form" />
+						</TabContent>
 
-					<TabContent value="detail" class="flex flex-col flex-1 h-full">
-						<DetailPageDetailPanel bind:triggerSelected bind:selected {isOperator} {hasStepDetails}>
-							<slot slot="webhooks" name="webhooks" />
-							<slot slot="routes" name="routes" />
-							<slot slot="email" name="email" />
-							<slot slot="schedule" name="schedule" />
-							<slot slot="cli" name="cli" />
-							<slot slot="details" name="details" />
-							<slot slot="save_inputs" name="save_inputs" />
-							<slot slot="flow_step" name="flow_step" />
-						</DetailPageDetailPanel>
-					</TabContent>
+						<TabContent value="saved_inputs" class="flex flex-col flex-1 h-full">
+							<slot name="save_inputs" />
+						</TabContent>
+						<TabContent value="triggers" class="flex flex-col flex-1 h-full">
+							<DetailPageTriggerPanel
+								simplfiedPoll={$simplifiedPoll}
+								bind:triggerSelected={$selectedTriggerStore}
+							>
+								<slot slot="webhooks" name="webhooks" />
+								<slot slot="routes" name="routes" />
+								<slot slot="script" name="script" />
+								<slot slot="websockets" name="websockets" />
+								<slot slot="kafka" name="kafka" />
+								<slot slot="emails" name="emails" />
+								<slot slot="schedules" name="schedules" />
+								<slot slot="cli" name="cli" />
+							</DetailPageTriggerPanel>
+						</TabContent>
+						<TabContent value="script" class="flex flex-col flex-1 h-full">
+							<slot name="script" />
+						</TabContent>
+					</div>
 				</svelte:fragment>
 			</Tabs>
 		</div>

package/package/components/details/DetailPageLayout.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponent } from "svelte";
+import { type Writable } from 'svelte/store';
+import type { TriggersCount } from '../../gen';
 declare const __propDef: {
     props: {
         isOperator?: boolean | undefined;
         flow_json?: any | undefined;
-        hasStepDetails?: boolean | undefined;
         selected: string;
-        triggerSelected?: "schedule" | "webhooks" | "cli" | undefined;
+        triggersCount: Writable<TriggersCount | undefined>;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -19,21 +20,23 @@ declare const __propDef: {
         routes: {
             slot: string;
         };
-        email: {
+        websockets: {
             slot: string;
         };
-        schedule: {
+        kafka: {
             slot: string;
         };
-        cli: {
+        emails: {
             slot: string;
         };
-        details: {
+        schedules: {
             slot: string;
         };
-        save_inputs: {
+        cli: {
             slot: string;
         };
+        script: {};
+        save_inputs: {};
         flow_step: {
             slot: string;
         };

package/package/components/details/DetailPageTriggerPanel.svelte

@@ -0,0 +1,78 @@
+<script>import { Tabs, Tab } from '../common';
+import { CalendarCheck2, MailIcon, Route, Terminal, Webhook, Unplug } from 'lucide-svelte';
+import HighlightTheme from '../HighlightTheme.svelte';
+import KafkaIcon from '../icons/KafkaIcon.svelte';
+export let triggerSelected = 'webhooks';
+export let simplfiedPoll = false;
+</script>
+
+<HighlightTheme />
+
+{#if !simplfiedPoll}
+	<Tabs bind:selected={triggerSelected}>
+		<Tab value="webhooks">
+			<span class="flex flex-row gap-2 items-center text-xs">
+				<Webhook size={12} />
+				Webhooks
+			</span>
+		</Tab>
+		<Tab value="schedules">
+			<span class="flex flex-row gap-2 items-center text-xs">
+				<CalendarCheck2 size={12} />
+				Schedules
+			</span>
+		</Tab>
+		<Tab value="routes">
+			<span class="flex flex-row gap-2 items-center text-xs">
+				<Route size={12} />
+				HTTP
+			</span>
+		</Tab>
+		<Tab value="websockets">
+			<span class="flex flex-row gap-2 items-center text-xs">
+				<Unplug size={12} />
+				Websockets
+			</span>
+		</Tab>
+		<Tab value="kafka">
+			<span class="flex flex-row gap-2 items-center text-xs">
+				<KafkaIcon size={12} />
+				Kafka
+			</span>
+		</Tab>
+		<Tab value="emails">
+			<span class="flex flex-row gap-2 items-center text-xs">
+				<MailIcon size={12} />
+				Email
+			</span>
+		</Tab>
+		<Tab value="cli">
+			<span class="flex flex-row gap-2 items-center text-xs">
+				<Terminal size={12} />
+				CLI
+			</span>
+		</Tab>
+	</Tabs>
+
+	<div class="h-[calc(100%-32px)]">
+		<div class="h-full overflow-auto">
+			{#if triggerSelected === 'webhooks'}
+				<slot name="webhooks" />
+			{:else if triggerSelected === 'routes'}
+				<slot name="routes" />
+			{:else if triggerSelected === 'emails'}
+				<slot name="emails" />
+			{:else if triggerSelected === 'schedules'}
+				<slot name="schedules" />
+			{:else if triggerSelected === 'websockets'}
+				<slot name="websockets" />
+			{:else if triggerSelected === 'kafka'}
+				<slot name="kafka" />
+			{:else if triggerSelected === 'cli'}
+				<slot name="cli" />
+			{/if}
+		</div>
+	</div>
+{:else}
+	<slot name="schedules" />
+{/if}

package/package/components/details/DetailPageTriggerPanel.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        triggerSelected?: "emails" | "webhooks" | "schedules" | "cli" | "routes" | "websockets" | "scheduledPoll" | "kafka" | undefined;
+        simplfiedPoll?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        webhooks: {};
+        routes: {};
+        emails: {};
+        schedules: {};
+        websockets: {};
+        kafka: {};
+        cli: {};
+    };
+};
+export type DetailPageTriggerPanelProps = typeof __propDef.props;
+export type DetailPageTriggerPanelEvents = typeof __propDef.events;
+export type DetailPageTriggerPanelSlots = typeof __propDef.slots;
+export default class DetailPageTriggerPanel extends SvelteComponent<DetailPageTriggerPanelProps, DetailPageTriggerPanelEvents, DetailPageTriggerPanelSlots> {
+}
+export {};

package/package/components/details/EmailTriggerPanel.svelte

@@ -13,6 +13,8 @@ import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { AlertTriangle } from 'lucide-svelte';
 import Skeleton from '../common/skeleton/Skeleton.svelte';
+import Label from '../Label.svelte';
+import TriggerTokens from '../triggers/TriggerTokens.svelte';
 let userSettings;
 export let token;
 export let scopes = [];
@@ -30,7 +32,7 @@ async function getEmailDomain() {
 }
 getEmailDomain();
 let requestType = 'path';
-function emailAddress() {
+function emailAddress(requestType, path, hash, isFlow, token) {
     const pathOrHash = requestType === 'hash' ? hash : path.replaceAll('/', '.');
     const plainPrefix = `${$workspaceStore}+${(requestType === 'hash' ? 'hash.' : isFlow ? 'flow.' : '') + pathOrHash}+${token}`;
     const encodedPrefix = base32
@@ -40,6 +42,9 @@ function emailAddress() {
         .toLowerCase();
     return `${pathOrHash}+${encodedPrefix}@${emailDomain}`;
 }
+export let email = '';
+$: email = emailAddress(requestType, path, hash, isFlow, token);
+let triggerTokens = undefined;
 </script>
 
 <HighlightTheme />
@@ -48,18 +53,20 @@ function emailAddress() {
 	bind:this={userSettings}
 	on:tokenCreated={(e) => {
 		token = e.detail
+		triggerTokens?.listTokens()
 	}}
-	newTokenLabel={`${$userStore?.username ?? 'superadmin'}-${generateRandomString(4)}`}
+	newTokenWorkspace={$workspaceStore}
+	newTokenLabel={`email-${$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 loading}
 		<Skeleton layout={[[18]]} />
 	{:else}
 		{#if emailDomain}
 			{#if SCRIPT_VIEW_SHOW_CREATE_TOKEN_BUTTON}
-				<div class="my-2">
+				<Label label="Token">
 					<div class="flex flex-row justify-between gap-2">
 						<input
 							bind:value={token}
@@ -80,7 +87,7 @@ function emailAddress() {
 							Create/input a valid token before copying the email address below
 						</div>
 					{/if}
-				</div>
+				</Label>
 			{/if}
 
 			{#if !isFlow}
@@ -94,20 +101,19 @@ function emailAddress() {
 					</div>
 				</div>
 			{/if}
-			<div class="flex flex-col gap-4">
-				{#key requestType}
-					{#key token}
-						<div class="flex flex-col gap-2">
-							<ClipboardPanel title="Email address" content={emailAddress()} />
-						</div>
-					{/key}
+
+			{#key requestType}
+				{#key token}
+					<Label label="Email address">
+						<ClipboardPanel content={email} />
+					</Label>
 				{/key}
-				<Alert title="Email trigger" size="xs">
-					To trigger the job by email, send an email to the address above. The job will receive two
-					arguments: `raw_email` containing the raw email as string, and `parsed_email` containing
-					the parsed email as an object.
-				</Alert>
-			</div>
+			{/key}
+			<Alert title="Email trigger" size="xs">
+				To trigger the job by email, send an email to the address above. The job will receive two
+				arguments: `raw_email` containing the raw email as string, and `parsed_email` containing the
+				parsed email as an object.
+			</Alert>
 		{:else}
 			<div>
 				<Alert title="Email triggers are disabled" size="xs" type="warning">
@@ -124,5 +130,7 @@ function emailAddress() {
 				Email triggers on Windmill Community Edition are limited to 100 emails per day.
 			</Alert>
 		{/if}
+
+		<TriggerTokens bind:this={triggerTokens} {isFlow} {path} labelPrefix="email" />
 	{/if}
 </div>

package/package/components/details/EmailTriggerPanel.svelte.d.ts

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