windmill-components 1.448.50 → 1.472.2

package/package/components/InstanceSettings.svelte

@@ -42,7 +42,7 @@ async function loadSettings() {
             false;
     initialRequirePreexistingUserForOauth = requirePreexistingUserForOauth;
     oauths = JSON.parse(JSON.stringify(initialOauths));
-    initialValues = Object.fromEntries((await Promise.all(Object.entries(settings).map(async ([_, y]) => await Promise.all(y.map(async (x) => [x.key, await getValue(x.key, x.storage)]))))).flat());
+    initialValues = Object.fromEntries((await Promise.all([...Object.values(settings), scimSamlSetting].map(async (y) => await Promise.all(y.map(async (x) => [x.key, await getValue(x.key, x.storage)]))))).flat());
     let nvalues = JSON.parse(JSON.stringify(initialValues));
     if (nvalues['base_url'] == undefined) {
         nvalues['base_url'] = window.location.origin;
@@ -62,6 +62,27 @@ async function loadSettings() {
     if (nvalues['indexer_settings'] == undefined) {
         nvalues['indexer_settings'] = {};
     }
+    if (nvalues['critical_error_channels'] == undefined) {
+        nvalues['critical_error_channels'] = [];
+    }
+    else {
+        let teams = (await SettingService.getGlobal({ key: 'teams' })) ?? [];
+        nvalues['teams'] = teams;
+        nvalues['critical_error_channels'] = nvalues['critical_error_channels'].map((el) => {
+            if (el.teams_channel) {
+                const team = teams.find((team) => team.team_name === el.teams_channel.team_name) || null;
+                return {
+                    teams_channel: {
+                        team_id: team?.team_id,
+                        team_name: team?.team_name,
+                        channel_id: team?.channels.find((channel) => channel.channel_id === el.teams_channel.channel_id)?.channel_id,
+                        channel_name: team?.channels.find((channel) => channel.channel_id === el.teams_channel.channel_id)?.channel_name
+                    }
+                };
+            }
+            return el;
+        });
+    }
     $values = nvalues;
     loading = false;
     // populate snowflake account identifier from db
@@ -78,7 +99,7 @@ export async function saveSettings() {
     }
     let shouldReloadPage = false;
     if ($values) {
-        const allSettings = Object.values(settings).flatMap((x) => Object.entries(x));
+        const allSettings = [...Object.values(settings), scimSamlSetting].flatMap((x) => Object.entries(x));
         let licenseKeySet = false;
         await Promise.all(allSettings
             .filter((x) => {
@@ -146,7 +167,6 @@ function setupSnowflakeUrls() {
     };
     oauths['snowflake_oauth'].connect_config = connect_config;
 }
-let to = '';
 async function sendStats() {
     await SettingService.sendStats();
     sendUserToast('Usage sent');
@@ -213,13 +233,16 @@ async function sendStats() {
 							Anonymous usage data is collected to help improve Windmill.
 							<br />The following information is collected:
 							<ul class="list-disc list-inside pl-2">
-								<li>version of your instance</li>
-								<li>number and total duration of jobs</li>
-								<li>accounts usage</li>
-								<li>login type usage</li>
-								<li>workers usage</li>
-								<li>vCPUs usage</li>
+								<li>version of your instances</li>
+								<li>instance base URL</li>
+								<li>job usage (language, total duration, count)</li>
+								<li>login type usage (login type, count)</li>
+								<li>worker usage (worker, worker instance, vCPUs, memory)</li>
+								<li>user usage (author count, operator count)</li>
+								<li>superadmin email addresses</li>
+								<li>vCPU usage</li>
 								<li>memory usage</li>
+								<li>development instance status</li>
 							</ul>
 						</div>
 						{#if $enterpriseLicense}
@@ -237,7 +260,7 @@ async function sendStats() {
 								size="xs">Send usage</Button
 							>
 						{/if}
-					{:else if category == 'Auth/OAuth'}
+					{:else if category == 'Auth/OAuth/SAML'}
 						<AuthSettings
 							bind:oauths
 							bind:snowflakeAccountIdentifier
@@ -271,32 +294,6 @@ async function sendStats() {
 							{/each}
 						</div>
 					</div>
-					{#if category == 'SMTP'}
-						{@const smtp = $values['smtp_settings']}
-						<div class="flex gap-4"
-							><input type="email" bind:value={to} placeholder="contact@windmill.dev" />
-							<Button
-								disabled={to == '' || !smtp}
-								on:click={async () => {
-									await SettingService.testSmtp({
-										requestBody: {
-											to,
-											smtp: {
-												host: smtp['smtp_host'],
-												username: smtp['smtp_username'],
-												password: smtp['smtp_password'],
-												port: smtp['smtp_port'],
-												from: smtp['smtp_from'],
-												tls_implicit: smtp['smtp_tls_implicit'],
-												disable_tls: smtp['smtp_disable_tls']
-											}
-										}
-									})
-									sendUserToast('Test email sent')
-								}}>Test SMTP settings</Button
-							></div
-						>
-					{/if}
 				</TabContent>
 			{/each}
 		</svelte:fragment>

package/package/components/InviteUser.svelte

@@ -2,7 +2,8 @@
 import { createEventDispatcher } from 'svelte';
 import { globalEmailInvite, superadmin, workspaceStore } from '../stores';
 import { UserService, WorkspaceService } from '../gen';
-import { Button, Popup } from './common';
+import { Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
 import { isCloudHosted } from '../cloud';
 import { goto } from '../navigation';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -51,53 +52,52 @@ async function inviteUser() {
 let selected = 'developer';
 </script>
 
-<Popup floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="button">
+<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
+	<svelte:fragment slot="trigger">
 		<Button color="dark" size="xs" nonCaptureEvent={true} startIcon={{ icon: MailPlus }}>
 			Invite
 		</Button>
 	</svelte:fragment>
-
-	<div class="flex flex-col gap-2">
-		<input
-			type="email"
-			on:keyup={handleKeyUp}
-			placeholder="email"
-			bind:value={email}
-			class="mr-4"
-		/>
-		<ToggleButtonGroup bind:selected>
-			<ToggleButton
-				value="operator"
-				size="sm"
-				label="Operator"
-				tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+	<svelte:fragment slot="content">
+		<div class="flex flex-col gap-2 p-4">
+			<input
+				type="email"
+				on:keyup={handleKeyUp}
+				placeholder="email"
+				bind:value={email}
+				class="mr-4"
 			/>
+			<ToggleButtonGroup bind:selected let:item>
+				<ToggleButton
+					value="operator"
+					label="Operator"
+					tooltip="An operator can only execute and view scripts/flows/apps from your workspace, and only those that he has visibility on."
+					{item}
+				/>
 
-			<ToggleButton
-				position="center"
-				value="developer"
-				size="sm"
-				label="Developer"
-				tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
-			/>
+				<ToggleButton
+					value="developer"
+					label="Developer"
+					tooltip="A Developer can execute and view scripts/flows/apps, but they can also create new ones and edit those they are allowed to by their path (either u/ or Writer or Admin of their folder found at /f)."
+					{item}
+				/>
 
-			<ToggleButton
-				position="right"
-				value="admin"
+				<ToggleButton
+					value="admin"
+					label="Admin"
+					tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
+					{item}
+				/>
+			</ToggleButtonGroup>
+			<Button
+				variant="contained"
+				color="blue"
 				size="sm"
-				label="Admin"
-				tooltip="An admin has full control over a specific Windmill workspace, including the ability to manage users, edit entities, and control permissions within the workspace."
-			/>
-		</ToggleButtonGroup>
-		<Button
-			variant="contained"
-			color="blue"
-			size="sm"
-			on:click={inviteUser}
-			disabled={email === undefined}
-		>
-			Invite
-		</Button>
-	</div>
-</Popup>
+				on:click={inviteUser}
+				disabled={email === undefined}
+			>
+				Invite
+			</Button>
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/{apps/editor/settingsPanel/inputEditor/JsonEditor.svelte → JsonEditor.svelte}

@@ -1,5 +1,5 @@
 <script>import '@codingame/monaco-vscode-standalone-json-language-features';
-import SimpleEditor from '../../../../SimpleEditor.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 export let code;
 export let value = undefined;
 export let error = '';

package/package/components/{apps/editor/settingsPanel/inputEditor/JsonEditor.svelte.d.ts → JsonEditor.svelte.d.ts}

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import '@codingame/monaco-vscode-standalone-json-language-features';
-import SimpleEditor from '../../../../SimpleEditor.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         code: string | undefined;

package/package/components/JsonInputs.svelte

@@ -0,0 +1,63 @@
+<script>import SimpleEditor from './SimpleEditor.svelte';
+import { createEventDispatcher } from 'svelte';
+import { clickOutside } from '../utils';
+const dispatch = createEventDispatcher();
+export let updateOnBlur = true;
+export let placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}';
+let pendingJson = '';
+let simpleEditor = undefined;
+function updatePayloadFromJson(jsonInput) {
+    if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
+        dispatch('select', undefined);
+        return;
+    }
+    try {
+        const parsed = JSON.parse(jsonInput);
+        dispatch('select', parsed);
+    }
+    catch (error) {
+        dispatch('select', undefined);
+    }
+}
+export function setCode(code) {
+    simpleEditor?.setCode(code);
+}
+async function getPropPickerElements() {
+    const elements = document.querySelectorAll('[data-schema-picker], [data-schema-picker] *');
+    return elements ? Array.from(elements) : [];
+}
+</script>
+
+<div
+	class="h-full"
+	use:clickOutside={{ capture: false, exclude: getPropPickerElements }}
+	on:click_outside={() => {
+		if (updateOnBlur) {
+			updatePayloadFromJson('')
+		}
+	}}
+>
+	<SimpleEditor
+		bind:this={simpleEditor}
+		on:focus={() => {
+			if (updateOnBlur) {
+				dispatch('focus')
+				updatePayloadFromJson(pendingJson)
+			}
+		}}
+		on:blur={async () => {
+			if (updateOnBlur) {
+				dispatch('blur')
+			}
+		}}
+		on:change={(e) => {
+			if (e.detail?.code !== undefined) {
+				updatePayloadFromJson(e.detail.code)
+			}
+		}}
+		bind:code={pendingJson}
+		lang="json"
+		class="h-full"
+		{placeholder}
+	/>
+</div>

package/package/components/JsonInputs.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        updateOnBlur?: boolean | undefined;
+        placeholder?: string | undefined;
+        setCode?: ((code: string) => void) | undefined;
+    };
+    events: {
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JsonInputsProps = typeof __propDef.props;
+export type JsonInputsEvents = typeof __propDef.events;
+export type JsonInputsSlots = typeof __propDef.slots;
+export default class JsonInputs extends SvelteComponent<JsonInputsProps, JsonInputsEvents, JsonInputsSlots> {
+    get setCode(): (code: string) => void;
+}
+export {};

package/package/components/Label.svelte

@@ -11,10 +11,12 @@ export let required = false;
 	<div class="flex flex-row justify-between items-center w-full">
 		{#if !headless}
 			<div class="flex flex-row items-center gap-2">
-				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
-				{#if required}
-					<Required required={true} />
-				{/if}
+				<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6"
+					>{label}
+					{#if required}
+						<Required required={true} />
+					{/if}
+				</span>
 				<slot name="header" />
 			</div>
 		{/if}

package/package/components/Login.svelte

@@ -4,6 +4,7 @@ import Gitlab from './icons/brands/Gitlab.svelte';
 import Google from './icons/brands/Google.svelte';
 import Microsoft from './icons/brands/Microsoft.svelte';
 import Okta from './icons/brands/Okta.svelte';
+import Auth0 from './icons/brands/Auth0.svelte';
 import { OauthService, UserService, WorkspaceService } from '../gen';
 import { usersWorkspaceStore, workspaceStore, userStore } from '../stores';
 import { classNames, emptyString, parseQueryParams } from '../utils';
@@ -45,6 +46,11 @@ const providers = [
         type: 'okta',
         name: 'Okta',
         icon: Okta
+    },
+    {
+        type: 'auth0',
+        name: 'Auth0',
+        icon: Auth0
     }
 ];
 const providersType = providers.map((p) => p.type);
@@ -250,7 +256,7 @@ $: error && sendUserToast(error, true);
 				<Button
 					color="dark"
 					variant="border"
-					btnClasses="mt-2 w-full !border-gray-300"
+					btnClasses="mt-2 w-full"
 					on:click={() => storeRedirect(login.type)}
 				>
 					{login.displayName}
@@ -261,7 +267,7 @@ $: error && sendUserToast(error, true);
 			<Button
 				color="dark"
 				variant="border"
-				btnClasses="mt-2 w-full !border-gray-300"
+				btnClasses="mt-2 w-full"
 				on:click={() => {
 					if (saml) {
 						window.location.href = saml

package/package/components/OAuthSetting.svelte

@@ -3,12 +3,14 @@ import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import { onMount } from 'svelte';
+import { enterpriseLicense } from '../stores';
 export let name;
 export let value;
 export let login = true;
-$: enabled = value != undefined;
+export let eeOnly = false;
+$: enabled = value != undefined && !(eeOnly && !$enterpriseLicense);
 let tenant = '';
-$: name == 'microsoft' && changeTenantId(tenant);
+$: (name == 'microsoft' || name == 'teams') && changeTenantId(tenant);
 onMount(() => {
     try {
         if (name == 'microsoft' &&
@@ -17,6 +19,9 @@ onMount(() => {
             typeof value['login_config']['auth_url'] == 'string') {
             tenant = value['login_config']['auth_url'].split('/')[3];
         }
+        if (name === 'teams' && value?.tenant) {
+            tenant = value.tenant;
+        }
     }
     catch (e) {
         console.error('Could not set tenantId', e);
@@ -25,15 +30,23 @@ onMount(() => {
 function changeTenantId(tenant) {
     if (value && tenant) {
         if (tenant != '') {
-            value = {
-                ...value,
-                login_config: {
-                    auth_url: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize`,
-                    token_url: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`,
-                    userinfo_url: `https://graph.microsoft.com/oidc/userinfo`,
-                    scopes: ['openid', 'profile', 'email']
-                }
-            };
+            if (name === 'teams') {
+                value = {
+                    ...value,
+                    tenant
+                };
+            }
+            else {
+                value = {
+                    ...value,
+                    login_config: {
+                        auth_url: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/authorize`,
+                        token_url: `https://login.microsoftonline.com/${tenant}/oauth2/v2.0/token`,
+                        userinfo_url: `https://graph.microsoft.com/oidc/userinfo`,
+                        scopes: ['openid', 'profile', 'email']
+                    }
+                };
+            }
         }
         else {
             if (value['login_config']) {
@@ -50,6 +63,7 @@ function changeTenantId(tenant) {
 		class="text-sm flex gap-4 items-center font-medium text-primary {enabled ? 'rounded py-2' : ''}"
 		><div class="w-[120px]"><IconedResourceType {name} after={true} /></div><Toggle
 			checked={enabled}
+			disabled={eeOnly && !$enterpriseLicense}
 			on:change={(e) => {
 				if (e.detail) {
 					value = { id: '', secret: '' }
@@ -57,11 +71,14 @@ function changeTenantId(tenant) {
 					value = undefined
 				}
 			}}
-		/></label
-	>
+		/>
+		{#if eeOnly && !$enterpriseLicense}
+			<div class="text-xs"> (EE only) </div>
+		{/if}
+	</label>
 	{#if enabled}
 		<div class="p-2 rounded border mb-4">
-			{#if name != 'slack'}
+			{#if name != 'slack' && name != 'teams'}
 				<label class="block pb-2">
 					<span class="text-primary font-semibold text-sm">Custom Name</span>
 					<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
@@ -75,7 +92,7 @@ function changeTenantId(tenant) {
 				<span class="text-primary font-semibold text-sm">Client Secret</span>
 				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
 			</label>
-			{#if name == 'microsoft'}
+			{#if name == 'microsoft' || name == 'teams'}
 				<label class="block pb-2">
 					<span class="text-primary font-semibold text-sm">Tenant Id</span>
 					<input type="text" placeholder="Tenant Id" bind:value={tenant} />
@@ -160,6 +177,16 @@ function changeTenantId(tenant) {
 						under "Delegated Permissions".
 					</div>
 				</CollapseLink>
+			{:else if name == 'teams'}
+				<CollapseLink text="Instructions">
+					<div class="text-sm text-secondary border p-2">
+						Follow this guide on <a
+							href="https://www.windmill.dev/docs/misc/setup_oauth#microsoft-teams"
+							target="_blank">Windmill Docs</a
+						> to create a new Microsoft Teams App. Then paste Client ID, Tenant ID, and Client Secret
+						here.
+					</div>
+				</CollapseLink>
 			{/if}
 		</div>
 	{/if}

package/package/components/OAuthSetting.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         name: string;
         value: any;
         login?: boolean | undefined;
+        eeOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/ObjectResourceInput.svelte

@@ -1,7 +1,6 @@
-<script>import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+<script>import { Loader2 } from 'lucide-svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import S3ObjectPicker from './S3ObjectPicker.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
 export let format;
 export let value;
 export let disablePortal = false;
@@ -52,6 +51,10 @@ $: value && valueToPath();
 			{showSchemaExplorer}
 		/>
 	{:else}
-		<JsonEditor bind:editor code={JSON.stringify(value, null, 2)} bind:value />
+		{#await import('./JsonEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default bind:editor code={JSON.stringify(value, null, 2)} bind:value />
+		{/await}
 	{/if}
 </div>

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import SimpleEditor from './SimpleEditor.svelte';
+import type SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         format: string;

package/package/components/OktaSetting.svelte

@@ -47,9 +47,15 @@ function changeDomain(domain, custom) {
 			<label class="block pb-2">
 				<div class="flex gap-2 items-end">
 					<div>
-						<ToggleButtonGroup bind:selected={value['custom']}>
-							<ToggleButton value={false} label={'Org'} />
-							<ToggleButton value={true} label="Custom" />
+						<ToggleButtonGroup
+							selected={value['custom'] ? 'custom' : 'org'}
+							on:selected={({ detail }) => {
+								value['custom'] = detail === 'custom'
+							}}
+							let:item
+						>
+							<ToggleButton value="org" label={'Org'} {item} />
+							<ToggleButton value="custom" label="Custom" {item} />
 						</ToggleButtonGroup>
 					</div>
 					<div class="grow">

package/package/components/PasswordArgInput.svelte

@@ -5,7 +5,7 @@ import Password from './Password.svelte';
 export let value = undefined;
 export let disabled;
 let path = '';
-let password = value && !value.startsWith('$var:') ? value : '';
+let password = value && typeof value === 'string' && !value.startsWith('$var:') ? value : '';
 let isGenerating = false;
 async function generateValue() {
     if (isGenerating)

package/package/components/Path.svelte

@@ -3,7 +3,7 @@ const lastMetaUsed = writable(undefined);
 </script>
 
 <script>import { pathToMeta } from '../common';
-import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, HttpTriggerService, VariableService, WebsocketTriggerService, KafkaTriggerService, NatsTriggerService } from '../gen';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, HttpTriggerService, VariableService, WebsocketTriggerService, KafkaTriggerService, PostgresTriggerService, NatsTriggerService, SqsTriggerService } from '../gen';
 import { superadmin, userStore, workspaceStore } from '../stores';
 import { createEventDispatcher, getContext } from 'svelte';
 import { writable } from 'svelte/store';
@@ -195,12 +195,24 @@ async function pathExists(path, kind) {
             path: path
         });
     }
+    else if (kind == 'postgres_trigger') {
+        return await PostgresTriggerService.existsPostgresTrigger({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
     else if (kind == 'nats_trigger') {
         return await NatsTriggerService.existsNatsTrigger({
             workspace: $workspaceStore,
             path: path
         });
     }
+    else if (kind == 'sqs_trigger') {
+        return await SqsTriggerService.existsSqsTrigger({
+            workspace: $workspaceStore,
+            path: path
+        });
+    }
     else {
         return false;
     }
@@ -318,6 +330,7 @@ const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
 								}
 							}
 						}}
+						let:item
 					>
 						<ToggleButton
 							icon={User}
@@ -327,6 +340,7 @@ const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
 							value="user"
 							position="left"
 							label="User"
+							{item}
 						/>
 						<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
 						<ToggleButton
@@ -337,6 +351,7 @@ const openSearchWithPrefilledText = getContext('openSearchWithPrefilledText');
 							value="folder"
 							position="right"
 							label="Folder"
+							{item}
 						/>
 					</ToggleButtonGroup>
 				</div>

package/package/components/Path.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         checkInitialPathExistence?: boolean | undefined;
         autofocus?: boolean | undefined;
         dirty?: boolean | undefined;
-        kind: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger";
+        kind: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "sqs_trigger";
         hideUser?: boolean | undefined;
         focus?: (() => void) | undefined;
         setName?: ((x: string) => void) | undefined;

package/package/components/ResourceEditor.svelte

@@ -14,6 +14,7 @@ import { Pen } from 'lucide-svelte';
 import Markdown from 'svelte-exmarkdown';
 import autosize from '../autosize';
 import GfmMarkdown from './GfmMarkdown.svelte';
+import TestTriggerConnection from './triggers/TestTriggerConnection.svelte';
 export let canSave = true;
 export let resource_type = undefined;
 export let path = '';
@@ -185,7 +186,6 @@ function parseTextFileContent() {
 				</div>
 			{/if}</h4
 		>
-
 		{#if can_write && editDescription}
 			<div>
 				<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1">GH Markdown</div>
@@ -205,7 +205,11 @@ function parseTextFileContent() {
 		{/if}
 		<div class="flex w-full justify-between items-center mt-4">
 			<div />
-			<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
+			{#if resourceToEdit?.resource_type === 'nats' || resourceToEdit?.resource_type === 'kafka'}
+				<TestTriggerConnection kind={resourceToEdit?.resource_type} args={{ connection: args }} />
+			{:else}
+				<TestConnection resourceType={resourceToEdit?.resource_type} {args} />
+			{/if}
 			<Toggle
 				on:change={(e) => switchTab(e.detail)}
 				options={{