windmill-components 1.448.50 → 1.472.2

package/package/components/triggers/{RoutesPanel.svelte → http/RoutesPanel.svelte}

@@ -1,13 +1,12 @@
-<script>import { userStore, workspaceStore } from '../../stores';
-import { HttpTriggerService } from '../../gen';
-import Skeleton from '../common/skeleton/Skeleton.svelte';
+<script>import { userStore, workspaceStore } from '../../../stores';
+import { HttpTriggerService } from '../../../gen';
 import RouteEditor from './RouteEditor.svelte';
-import { canWrite } from '../../utils';
-import Alert from '../common/alert/Alert.svelte';
+import { canWrite } from '../../../utils';
 import { getContext, onMount } from 'svelte';
-import Section from '../Section.svelte';
-import TriggersEditorSection from './TriggersEditorSection.svelte';
-import Description from '../Description.svelte';
+import Section from '../../Section.svelte';
+import { Alert } from '../../common';
+import Description from '../../Description.svelte';
+import TriggersEditorSection from '../TriggersEditorSection.svelte';
 export let isFlow;
 export let path;
 export let newItem = false;
@@ -16,6 +15,8 @@ export let canHavePreprocessor = false;
 export let hasPreprocessor = false;
 export let args = {};
 let routeEditor;
+let openForm = true;
+let dontCloseOnLoad = false;
 $: path && loadTriggers();
 const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
 onMount(() => {
@@ -37,6 +38,7 @@ export async function loadTriggers() {
             return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
         });
         $triggersCount = { ...($triggersCount ?? {}), http_routes_count: httpTriggers?.length };
+        openForm = httpTriggers?.length === 0 || dontCloseOnLoad;
     }
     catch (e) {
         console.error('impossible to load http routes', e);
@@ -51,11 +53,42 @@ export async function loadTriggers() {
 	bind:this={routeEditor}
 />
 
-<div class="flex flex-col gap-8">
+<div class="flex flex-col gap-4">
 	<Description link="https://www.windmill.dev/docs/core_concepts/http_routing">
 		Routes expose your scripts and flows as HTTP endpoints. Each route can be configured with a
 		specific HTTP method and path.
 	</Description>
+	{#if !newItem && httpTriggers && httpTriggers.length > 0}
+		<Section label="Routes">
+			{#if !$userStore?.is_admin && !$userStore?.is_super_admin}
+				<Alert title="Only workspace admins can create routes" type="warning" size="xs" />
+			{/if}
+
+			<div class="flex flex-col divide-y pt-2">
+				{#each httpTriggers as httpTriggers (httpTriggers.path)}
+					<div class="grid grid-cols-5 text-2xs items-center py-2">
+						<div class="col-span-2 truncate">{httpTriggers.path}</div>
+						<div class="col-span-2 truncate">
+							{httpTriggers.http_method.toUpperCase()} /{httpTriggers.route_path}
+						</div>
+						<div class="flex justify-end">
+							<button
+								on:click={() => routeEditor?.openEdit(httpTriggers.path, isFlow)}
+								class="px-2"
+							>
+								{#if httpTriggers.canWrite}
+									Edit
+								{:else}
+									View
+								{/if}
+							</button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</Section>
+	{/if}
+
 	<TriggersEditorSection
 		on:saveTrigger={(e) => {
 			routeEditor?.openNew(isFlow, path, e.detail.config)
@@ -64,6 +97,7 @@ export async function loadTriggers() {
 		on:addPreprocessor
 		on:updateSchema
 		on:testWithArgs
+		bind:showCapture={dontCloseOnLoad}
 		cloudDisabled={false}
 		triggerType="http"
 		{isFlow}
@@ -73,43 +107,6 @@ export async function loadTriggers() {
 		{hasPreprocessor}
 		{newItem}
 		data={{ args }}
+		bind:openForm
 	/>
-	{#if !newItem}
-		<Section label="Routes">
-			{#if !$userStore?.is_admin && !$userStore?.is_super_admin}
-				<Alert title="Only workspace admins can create routes" type="warning" size="xs" />
-			{/if}
-
-			{#if httpTriggers}
-				{#if httpTriggers.length == 0}
-					<div class="text-xs text-secondary text-center"> No http routes </div>
-				{:else}
-					<div class="flex flex-col divide-y pt-2">
-						{#each httpTriggers as httpTriggers (httpTriggers.path)}
-							<div class="grid grid-cols-5 text-2xs items-center py-2">
-								<div class="col-span-2 truncate">{httpTriggers.path}</div>
-								<div class="col-span-2 truncate">
-									{httpTriggers.http_method.toUpperCase()} /{httpTriggers.route_path}
-								</div>
-								<div class="flex justify-end">
-									<button
-										on:click={() => routeEditor?.openEdit(httpTriggers.path, isFlow)}
-										class="px-2"
-									>
-										{#if httpTriggers.canWrite}
-											Edit
-										{:else}
-											View
-										{/if}
-									</button>
-								</div>
-							</div>
-						{/each}
-					</div>
-				{/if}
-			{:else}
-				<Skeleton layout={[[8]]} />
-			{/if}
-		</Section>
-	{/if}
 </div>

package/package/components/triggers/{KafkaTriggerEditorInner.svelte → kafka/KafkaTriggerEditorInner.svelte}

@@ -1,17 +1,17 @@
-<script>import { Alert, 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 { KafkaTriggerService } from '../../gen';
-import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
-import { canWrite, emptyString, sendUserToast } from '../../utils';
+<script>import { Alert, 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 { KafkaTriggerService } from '../../../gen';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../../stores';
+import { canWrite, emptyString, sendUserToast } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
-import Section from '../Section.svelte';
+import Section from '../../Section.svelte';
 import { Loader2, Save } from 'lucide-svelte';
-import Label from '../Label.svelte';
-import Toggle from '../Toggle.svelte';
+import Label from '../../Label.svelte';
+import Toggle from '../../Toggle.svelte';
 import KafkaTriggersConfigSection from './KafkaTriggersConfigSection.svelte';
 let drawer;
 let is_flow = false;
@@ -42,7 +42,7 @@ export async function openEdit(ePath, isFlow) {
         await loadTrigger();
     }
     catch (err) {
-        sendUserToast(`Could not load kafka trigger: ${err}`, true);
+        sendUserToast(`Could not load Kafka trigger: ${err}`, true);
     }
     finally {
         drawerLoading = false;
@@ -140,9 +140,9 @@ let isValid = false;
 	<DrawerContent
 		title={edit
 			? can_write
-				? `Edit kafka trigger ${initialPath}`
+				? `Edit Kafka trigger ${initialPath}`
 				: `Kafka trigger ${initialPath}`
-			: 'New kafka trigger'}
+			: 'New Kafka trigger'}
 		on:close={drawer.closeDrawer}
 	>
 		<svelte:fragment slot="actions">
@@ -159,7 +159,7 @@ let isValid = false;
 									workspace: $workspaceStore ?? '',
 									requestBody: { enabled: e.detail }
 								})
-								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} kafka trigger ${initialPath}`)
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} Kafka trigger ${initialPath}`)
 							}}
 						/>
 					</div>
@@ -201,13 +201,6 @@ let isValid = false;
 					</Label>
 				</div>
 
-				<KafkaTriggersConfigSection
-					bind:args
-					bind:isValid
-					{path}
-					defaultValues={useDefaultValues() ? defaultValues : undefined}
-				/>
-
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
 						Pick a script or flow to be triggered<Required required={true} />
@@ -225,6 +218,13 @@ let isValid = false;
 						/>
 					</div>
 				</Section>
+
+				<KafkaTriggersConfigSection
+					bind:args
+					bind:isValid
+					{path}
+					defaultValues={useDefaultValues() ? defaultValues : undefined}
+				/>
 			</div>
 		{/if}
 	</DrawerContent>

package/package/components/triggers/{KafkaTriggersConfigSection.svelte → kafka/KafkaTriggersConfigSection.svelte}

@@ -1,13 +1,14 @@
-<script>import ResourcePicker from '../ResourcePicker.svelte';
+<script>import ResourcePicker from '../../ResourcePicker.svelte';
 import { Boxes } from 'lucide-svelte';
-import Section from '../Section.svelte';
-import Subsection from '../Subsection.svelte';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import SchemaForm from '../SchemaForm.svelte';
-import CaptureSection, {} from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
-import { workspaceStore } from '../../stores';
+import Section from '../../Section.svelte';
+import Subsection from '../../Subsection.svelte';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import SchemaForm from '../../SchemaForm.svelte';
+import CaptureSection, {} from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
+import { workspaceStore } from '../../../stores';
+import TestTriggerConnection from '../TestTriggerConnection.svelte';
 export let path;
 export let defaultValues = undefined;
 export let headless = false;
@@ -130,15 +131,17 @@ const argsSchema = {
     },
     required: ['topics', 'group_id']
 };
-let connectionValid = false;
+let isStaticConnectionValid = false;
 let otherArgsValid = false;
-$: isValid =
-    (selected === 'resource'
+$: isConnectionValid =
+    selected === 'resource'
         ? !!args.kafka_resource_path
-        : connectionValid &&
+        : isStaticConnectionValid &&
             args.brokers &&
             args.brokers.length > 0 &&
-            args.brokers.every((b) => b.length > 0)) &&
+            args.brokers.every((b) => b.length > 0);
+$: isValid =
+    isConnectionValid &&
         otherArgsValid &&
         args.topics &&
         args.topics.length > 0 &&
@@ -188,9 +191,10 @@ $: path && setGroupId();
 										delete args.security
 									}
 								}}
+								let:item
 							>
-								<ToggleButton value="static" label="Static" small={true} />
-								<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} />
+								<ToggleButton value="static" label="Static" small={true} {item} />
+								<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} {item} />
 							</ToggleButtonGroup>
 						{/if}
 					</svelte:fragment>
@@ -205,10 +209,18 @@ $: path && setGroupId();
 						<SchemaForm
 							schema={connnectionSchema}
 							bind:args
-							bind:isValid={connectionValid}
+							bind:isValid={isStaticConnectionValid}
 							lightHeader={true}
 						/>
 					{/if}
+					{#if isConnectionValid}
+						<TestTriggerConnection
+							kind="kafka"
+							args={{
+								connection: args
+							}}
+						/>
+					{/if}
 				</Subsection>
 			</div>
 

package/package/components/triggers/{KafkaTriggersConfigSection.svelte.d.ts → kafka/KafkaTriggersConfigSection.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { type CaptureInfo } from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
+import { type CaptureInfo } from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
 declare const __propDef: {
     props: {
         path: string;
@@ -14,7 +14,9 @@ declare const __propDef: {
         isValid?: boolean | undefined;
     };
     events: {
-        captureToggle: CustomEvent<undefined>;
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
         applyArgs: CustomEvent<{
             kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;

package/package/components/triggers/{KafkaTriggersPanel.svelte → kafka/KafkaTriggersPanel.svelte}

@@ -1,14 +1,13 @@
-<script>import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
-import { KafkaTriggerService } from '../../gen';
-import { canWrite } from '../../utils';
-import Alert from '../common/alert/Alert.svelte';
+<script>import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
+import { KafkaTriggerService } from '../../../gen';
+import { canWrite } from '../../../utils';
 import { getContext, onMount } from 'svelte';
 import KafkaTriggerEditor from './KafkaTriggerEditor.svelte';
-import { isCloudHosted } from '../../cloud';
-import TriggersEditorSection from './TriggersEditorSection.svelte';
-import Section from '../Section.svelte';
-import Skeleton from '../common/skeleton/Skeleton.svelte';
-import Description from '../Description.svelte';
+import { isCloudHosted } from '../../../cloud';
+import Section from '../../Section.svelte';
+import Description from '../../Description.svelte';
+import { Alert } from '../../common';
+import TriggersEditorSection from '../TriggersEditorSection.svelte';
 export let isFlow;
 export let path;
 export let newItem = false;
@@ -16,6 +15,8 @@ export let isEditor = false;
 export let canHavePreprocessor = false;
 export let hasPreprocessor = false;
 let kafkaTriggerEditor;
+let openForm = true;
+let dontCloseOnLoad = false;
 $: path && loadTriggers();
 const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
 onMount(() => {
@@ -37,9 +38,10 @@ export async function loadTriggers() {
             return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
         });
         $triggersCount = { ...($triggersCount ?? {}), kafka_count: kafkaTriggers?.length };
+        openForm = kafkaTriggers?.length === 0 || dontCloseOnLoad;
     }
     catch (e) {
-        console.error('impossible to load kafka triggers', e);
+        console.error('impossible to load Kafka triggers', e);
     }
 }
 let data = {
@@ -71,6 +73,32 @@ function saveTrigger(path, args) {
 		<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>
+		{#if !newItem && kafkaTriggers && kafkaTriggers.length > 0}
+			<Section label="Kafka triggers">
+				<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>
+					{/each}
+				</div>
+			</Section>
+		{/if}
 		<TriggersEditorSection
 			on:saveTrigger={(e) => {
 				saveTrigger(path, e.detail.config)
@@ -88,41 +116,8 @@ function saveTrigger(path, args) {
 			{canHavePreprocessor}
 			{hasPreprocessor}
 			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
 		/>
-
-		{#if !newItem}
-			{#if kafkaTriggers}
-				<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>
-							{/each}
-						</div>
-					{/if}
-				</Section>
-			{:else}
-				<Skeleton layout={[[8]]} />
-			{/if}
-		{/if}
 	</div>
 {/if}

package/package/components/triggers/{NatsTriggerEditorInner.svelte → nats/NatsTriggerEditorInner.svelte}

@@ -1,18 +1,18 @@
-<script>import { Alert, 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 { NatsTriggerService } from '../../gen';
-import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
-import { canWrite, emptyString, sendUserToast } from '../../utils';
+<script>import { Alert, 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 { NatsTriggerService } from '../../../gen';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../../stores';
+import { canWrite, emptyString, sendUserToast } from '../../../utils';
 import { createEventDispatcher } from 'svelte';
-import Section from '../Section.svelte';
+import Section from '../../Section.svelte';
 import { Loader2, Save } from 'lucide-svelte';
-import Label from '../Label.svelte';
-import Toggle from '../Toggle.svelte';
+import Label from '../../Label.svelte';
 import NatsTriggersConfigSection from './NatsTriggersConfigSection.svelte';
+import Toggle from '../../Toggle.svelte';
 let drawer;
 let is_flow = false;
 let initialPath = '';
@@ -208,14 +208,6 @@ let isValid = false;
 						/>
 					</Label>
 				</div>
-
-				<NatsTriggersConfigSection
-					{path}
-					bind:args
-					bind:isValid
-					defaultValues={useDefaultValues() ? defaultValues : undefined}
-				/>
-
 				<Section label="Runnable">
 					<p class="text-xs mb-1 text-tertiary">
 						Pick a script or flow to be triggered<Required required={true} />
@@ -233,6 +225,13 @@ let isValid = false;
 						/>
 					</div>
 				</Section>
+
+				<NatsTriggersConfigSection
+					{path}
+					bind:args
+					bind:isValid
+					defaultValues={useDefaultValues() ? defaultValues : undefined}
+				/>
 			</div>
 		{/if}
 	</DrawerContent>

package/package/components/triggers/{NatsTriggersConfigSection.svelte → nats/NatsTriggersConfigSection.svelte}

@@ -1,13 +1,14 @@
-<script>import ResourcePicker from '../ResourcePicker.svelte';
-import { Boxes } from 'lucide-svelte';
-import Section from '../Section.svelte';
-import Subsection from '../Subsection.svelte';
-import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
-import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
-import SchemaForm from '../SchemaForm.svelte';
-import CaptureSection, {} from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
-import { workspaceStore } from '../../stores';
+<script>import { Boxes } from 'lucide-svelte';
+import Section from '../../Section.svelte';
+import Subsection from '../../Subsection.svelte';
+import { workspaceStore } from '../../../stores';
+import ToggleButton from '../../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ResourcePicker from '../../ResourcePicker.svelte';
+import SchemaForm from '../../SchemaForm.svelte';
+import CaptureSection, {} from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
+import TestTriggerConnection from '../TestTriggerConnection.svelte';
 export let defaultValues = undefined;
 export let headless = false;
 export let args = {};
@@ -165,22 +166,24 @@ const argsSchema = {
     },
     required: ['subjects', 'use_jetstream', 'stream_name', 'consumer_name']
 };
-let connectionValid = false;
+let isStaticConnectionValid = false;
 let otherArgsValid = false;
 let globalError = '';
 $: globalError =
     !args.use_jetstream && args.subjects && args.subjects.length > 1
         ? 'Only one subject is supported if not using JetStream.'
         : '';
-$: isValid =
-    (selected === 'resource'
+$: isConnectionValid =
+    selected === 'resource'
         ? !!args.nats_resource_path
-        : connectionValid &&
+        : isStaticConnectionValid &&
             args.servers &&
             args.servers.length > 0 &&
             args.servers.every((b) => b.length > 0) &&
             args.require_tls !== undefined &&
-            args.require_tls !== null) &&
+            args.require_tls !== null;
+$: isValid =
+    isConnectionValid &&
         otherArgsValid &&
         args.subjects &&
         args.subjects.length > 0 &&
@@ -236,9 +239,10 @@ $: useJetStream && setStreamAndConsumerNames();
 										delete args.require_tls
 									}
 								}}
+								let:item
 							>
-								<ToggleButton value="static" label="Static" small={true} />
-								<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} />
+								<ToggleButton value="static" label="Static" small={true} {item} />
+								<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} {item} />
 							</ToggleButtonGroup>
 						{/if}
 					</svelte:fragment>
@@ -253,10 +257,13 @@ $: useJetStream && setStreamAndConsumerNames();
 						<SchemaForm
 							schema={connnectionSchema}
 							bind:args
-							bind:isValid={connectionValid}
+							bind:isValid={isStaticConnectionValid}
 							lightHeader={true}
 						/>
 					{/if}
+					{#if isConnectionValid}
+						<TestTriggerConnection kind="nats" args={{ connection: args }} />
+					{/if}
 				</Subsection>
 			</div>
 

package/package/components/triggers/{NatsTriggersConfigSection.svelte.d.ts → nats/NatsTriggersConfigSection.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { type CaptureInfo } from './CaptureSection.svelte';
-import CaptureTable from './CaptureTable.svelte';
+import { type CaptureInfo } from '../CaptureSection.svelte';
+import CaptureTable from '../CaptureTable.svelte';
 declare const __propDef: {
     props: {
         defaultValues?: Record<string, any> | undefined;
@@ -14,7 +14,9 @@ declare const __propDef: {
         path: string;
     };
     events: {
-        captureToggle: CustomEvent<undefined>;
+        captureToggle: CustomEvent<{
+            disableOnly?: boolean | undefined;
+        }>;
         applyArgs: CustomEvent<{
             kind: "preprocessor" | "main";
             args: Record<string, any> | undefined;