trigger panels new item is collapsed by default

* fix null arg

* fix badge height jump

* Make new trigger collapsable

* keep new trigger section open when using capture

* fix spelling

* remove animation

* rename new trigger to + new

* nit

frontend/src/lib/components/Section.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { enterpriseLicense } from '$lib/stores'
-	import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-svelte'
+	import { AlertTriangle, ChevronRight } from 'lucide-svelte'
 	import Tooltip from './Tooltip.svelte'
 	import { twMerge } from 'tailwind-merge'
+	import { slide } from 'svelte/transition'
 
 	export let label: string | undefined = undefined
 	export let tooltip: string | undefined = undefined
@@ -14,6 +15,7 @@
 	export let collapsable: boolean = false
 	export let collapsed: boolean = true
 	export let headless: boolean = false
+	export let animate: boolean = false
 </script>
 
 <div class={twMerge('w-full flex flex-col', wrapperClass)}>
@@ -27,11 +29,14 @@
 			>
 				{#if collapsable}
 					<button class="flex items-center gap-1" on:click={() => (collapsed = !collapsed)}>
-						{#if collapsed}
-							<ChevronRight size={16} />
-						{:else}
-							<ChevronDown size={16} />
-						{/if}
+						<ChevronRight
+							size={16}
+							class={twMerge(
+								'transition',
+								collapsed ? '' : 'rotate-90',
+								animate ? 'duration-200' : 'duration-0'
+							)}
+						/>
 						{label}
 					</button>
 				{:else}
@@ -58,7 +63,10 @@
 		</div>
 	{/if}
 	{#if !collapsable || !collapsed}
-		<div class={twMerge('grow min-h-0', $$props.class)}>
+		<div
+			class={twMerge('grow min-h-0', $$props.class)}
+			transition:slide={animate ? { duration: 200 } : { duration: 0 }}
+		>
 			<slot />
 		</div>
 	{/if}

frontend/src/lib/components/details/EmailTriggerPanel.svelte

@@ -74,6 +74,7 @@
 				on:updateSchema
 				on:testWithArgs
 				{newItem}
+				alwaysOpened={true}
 			/>
 		{:else}
 			<div>

frontend/src/lib/components/triggers/TriggersEditorSection.svelte

@@ -21,23 +21,26 @@
 	export let canHavePreprocessor: boolean = false
 	export let hasPreprocessor: boolean = false
 	export let newItem: boolean
+	export let openForm: boolean = false
+	export let alwaysOpened: boolean = false
+	export let showCapture: boolean = false
 
 	const captureTypeLabels: Record<CaptureTriggerKind, string> = {
-		http: 'New custom HTTP route',
-		websocket: 'New WebSocket trigger',
+		http: '+ New custom HTTP route',
+		websocket: '+ New WebSocket trigger',
 		webhook: 'Webhook',
-		kafka: 'New Kafka trigger',
+		kafka: '+ New Kafka trigger',
 		email: 'Email trigger',
-		nats: 'NATS trigger'
+		nats: '+ New NATS trigger'
 	}
 
 	const { captureOn } = getContext<TriggerContext>('TriggerContext')
 
 	let args: Record<string, any> = {}
+	$: collapsed = !openForm
 
 	const dispatch = createEventDispatcher()
 
-	let showCapture = false
 	let init = false
 	$: updateShowCapture(!!$captureOn)
 	function updateShowCapture(show: boolean) {
@@ -49,55 +52,57 @@
 	}
 </script>
 
-<Section label={captureTypeLabels[triggerType]}>
+<Section label={captureTypeLabels[triggerType]} collapsable={!alwaysOpened} bind:collapsed>
 	<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={() => {
-						showCapture = !showCapture
-					}}
-					variant="border"
-					color="light"
-					endIcon={{
-						icon: ChevronDown,
-						classes: twMerge('transition', showCapture ? 'rotate-180' : '')
-					}}
-				>
-					Test trigger
-				</Button>
-			{/if}
-
-			{#if !noSave}
-				{@const disabled = newItem || cloudDisabled}
-				<Popover notClickable>
+		{#if !collapsed || alwaysOpened}
+			<div class="flex flex-row grow w-min-0 gap-2 items-center justify-end">
+				{#if isEditor}
 					<Button
 						size="xs2"
-						{disabled}
-						startIcon={{ icon: Save }}
 						on:click={() => {
-							dispatch('saveTrigger', {
-								config: args
-							})
+							showCapture = !showCapture
+						}}
+						variant="border"
+						color="light"
+						endIcon={{
+							icon: ChevronDown,
+							classes: twMerge('transition', showCapture ? 'rotate-180' : '')
 						}}
 					>
-						Save
+						Test trigger
 					</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}
+
+				{#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}
-						{:else}
-							Create new {captureTypeLabels[triggerType].toLowerCase()}
-						{/if}
-					</svelte:fragment>
-				</Popover>
-			{/if}
-		</div>
+						</svelte:fragment>
+					</Popover>
+				{/if}
+			</div>
+		{/if}
 	</svelte:fragment>
 
 	{#if isEditor}

frontend/src/lib/components/triggers/http/RoutesPanel.svelte

@@ -5,7 +5,7 @@
 	import { canWrite } from '$lib/utils'
 	import { getContext, onMount } from 'svelte'
 	import Section from '$lib/components/Section.svelte'
-	import { Alert, Skeleton } from '$lib/components/common'
+	import { Alert } from '$lib/components/common'
 	import Description from '$lib/components/Description.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
 	import TriggersEditorSection from '../TriggersEditorSection.svelte'
@@ -19,6 +19,8 @@
 	export let args: Record<string, any> = {}
 
 	let routeEditor: RouteEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
 	$: path && loadTriggers()
 	const { triggersCount, selectedTrigger, defaultValues } =
@@ -48,6 +50,7 @@
 				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)
 		}
@@ -61,11 +64,42 @@
 	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)
@@ -74,6 +108,7 @@
 		on:addPreprocessor
 		on:updateSchema
 		on:testWithArgs
+		bind:showCapture={dontCloseOnLoad}
 		cloudDisabled={false}
 		triggerType="http"
 		{isFlow}
@@ -83,43 +118,6 @@
 		{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>
+</div>

frontend/src/lib/components/triggers/kafka/KafkaTriggersPanel.svelte

@@ -6,7 +6,6 @@
 	import KafkaTriggerEditor from './KafkaTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import Section from '$lib/components/Section.svelte'
-	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import Description from '$lib/components/Description.svelte'
 	import { Alert } from '$lib/components/common'
 	import type { TriggerContext } from '$lib/components/triggers'
@@ -20,6 +19,8 @@
 	export let hasPreprocessor: boolean = false
 
 	let kafkaTriggerEditor: KafkaTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
 	$: path && loadTriggers()
 
@@ -50,6 +51,7 @@
 				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)
 		}
@@ -85,6 +87,32 @@
 		<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)
@@ -102,41 +130,8 @@
 			{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}

frontend/src/lib/components/triggers/nats/NatsTriggersPanel.svelte

@@ -6,7 +6,6 @@
 	import NatsTriggerEditor from './NatsTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import Section from '$lib/components/Section.svelte'
-	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import Description from '$lib/components/Description.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
@@ -20,6 +19,8 @@
 	export let hasPreprocessor: boolean = false
 
 	let natsTriggerEditor: NatsTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
 	$: path && loadTriggers()
 
@@ -50,6 +51,7 @@
 				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
 			})
 			$triggersCount = { ...($triggersCount ?? {}), nats_count: natsTriggers?.length }
+			openForm = natsTriggers?.length === 0 || dontCloseOnLoad
 		} catch (e) {
 			console.error('impossible to load nats triggers', e)
 		}
@@ -85,6 +87,34 @@
 		<Description link="https://www.windmill.dev/docs/core_concepts/nats_triggers">
 			NATS triggers execute scripts and flows in response to messages published to NATS subjects.
 		</Description>
+
+		{#if !newItem && natsTriggers && natsTriggers.length > 0}
+			<Section label="NATS Triggers">
+				<div class="flex flex-col divide-y pt-2">
+					{#each natsTriggers as natsTrigger (natsTrigger.path)}
+						<div class="grid grid-cols-5 text-2xs items-center py-2">
+							<div class="col-span-2 truncate">{natsTrigger.path}</div>
+							<div class="col-span-2 truncate">
+								{natsTrigger.nats_resource_path}
+							</div>
+							<div class="flex justify-end">
+								<button
+									on:click={() => natsTriggerEditor?.openEdit(natsTrigger.path, isFlow)}
+									class="px-2"
+								>
+									{#if natsTrigger.canWrite}
+										Edit
+									{:else}
+										View
+									{/if}
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</Section>
+		{/if}
+
 		<TriggersEditorSection
 			on:saveTrigger={(e) => {
 				saveTrigger(path, e.detail.config)
@@ -100,41 +130,8 @@
 			{canHavePreprocessor}
 			{hasPreprocessor}
 			{newItem}
+			{openForm}
+			bind:showCapture={dontCloseOnLoad}
 		/>
-
-		{#if !newItem}
-			{#if natsTriggers}
-				<Section label="NATS Triggers">
-					{#if natsTriggers.length == 0}
-						<div class="text-xs text-secondary text-center"> No nats triggers </div>
-					{:else}
-						<div class="flex flex-col divide-y pt-2">
-							{#each natsTriggers as natsTrigger (natsTrigger.path)}
-								<div class="grid grid-cols-5 text-2xs items-center py-2">
-									<div class="col-span-2 truncate">{natsTrigger.path}</div>
-									<div class="col-span-2 truncate">
-										{natsTrigger.nats_resource_path}
-									</div>
-									<div class="flex justify-end">
-										<button
-											on:click={() => natsTriggerEditor?.openEdit(natsTrigger.path, isFlow)}
-											class="px-2"
-										>
-											{#if natsTrigger.canWrite}
-												Edit
-											{:else}
-												View
-											{/if}
-										</button>
-									</div>
-								</div>
-							{/each}
-						</div>
-					{/if}
-				</Section>
-			{:else}
-				<Skeleton layout={[[8]]} />
-			{/if}
-		{/if}
 	</div>
 {/if}

frontend/src/lib/components/triggers/webhook/WebhooksPanel.svelte

@@ -53,5 +53,6 @@
 		{canHavePreprocessor}
 		{hasPreprocessor}
 		{newItem}
+		alwaysOpened={true}
 	/>
 </div>

frontend/src/lib/components/triggers/websocket/WebsocketTriggersPanel.svelte

@@ -7,7 +7,7 @@
 	import WebsocketTriggerEditor from './WebsocketTriggerEditor.svelte'
 	import { isCloudHosted } from '$lib/cloud'
 	import Section from '$lib/components/Section.svelte'
-	import { Alert, Skeleton } from '$lib/components/common'
+	import { Alert } from '$lib/components/common'
 	import Description from '$lib/components/Description.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
 	import TriggersEditorSection from '../TriggersEditorSection.svelte'
@@ -19,6 +19,8 @@
 	export let hasPreprocessor: boolean = false
 
 	let wsTriggerEditor: WebsocketTriggerEditor
+	let openForm = true
+	let dontCloseOnLoad = false
 
 	$: path && loadTriggers()
 
@@ -49,6 +51,7 @@
 				return { canWrite: canWrite(x.path, x.extra_perms!, $userStore), ...x }
 			})
 			$triggersCount = { ...($triggersCount ?? {}), websocket_count: wsTriggers?.length }
+			openForm = wsTriggers?.length === 0 || dontCloseOnLoad
 		} catch (e) {
 			console.error('impossible to load WS triggers', e)
 		}
@@ -72,6 +75,36 @@
 			WebSocket triggers allow real-time bidirectional communication between your scripts/flows and
 			external systems. Each trigger creates a unique WebSocket endpoint.
 		</Description>
+
+		{#if !newItem && wsTriggers && wsTriggers.length > 0}
+			<Section label="WebSockets">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col divide-y pt-2">
+						{#each wsTriggers as wsTriggers (wsTriggers.path)}
+							<div class="grid grid-cols-5 text-2xs items-center py-2">
+								<div class="col-span-2 truncate">{wsTriggers.path}</div>
+								<div class="col-span-2 truncate">
+									{wsTriggers.url}
+								</div>
+								<div class="flex justify-end">
+									<button
+										on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
+										class="px-2"
+									>
+										{#if wsTriggers.canWrite}
+											Edit
+										{:else}
+											View
+										{/if}
+									</button>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</Section>
+		{/if}
+
 		<TriggersEditorSection
 			on:applyArgs
 			on:saveTrigger={(e) => {
@@ -88,43 +121,7 @@
 			{canHavePreprocessor}
 			{hasPreprocessor}
 			{newItem}
+			{openForm}
 		/>
-
-		{#if !newItem}
-			<Section label="WebSockets">
-				<div class="flex flex-col gap-4">
-					{#if wsTriggers}
-						{#if wsTriggers.length == 0}
-							<div class="text-xs text-secondary text-center"> No WebSocket triggers </div>
-						{:else}
-							<div class="flex flex-col divide-y pt-2">
-								{#each wsTriggers as wsTriggers (wsTriggers.path)}
-									<div class="grid grid-cols-5 text-2xs items-center py-2">
-										<div class="col-span-2 truncate">{wsTriggers.path}</div>
-										<div class="col-span-2 truncate">
-											{wsTriggers.url}
-										</div>
-										<div class="flex justify-end">
-											<button
-												on:click={() => wsTriggerEditor?.openEdit(wsTriggers.path, isFlow)}
-												class="px-2"
-											>
-												{#if wsTriggers.canWrite}
-													Edit
-												{:else}
-													View
-												{/if}
-											</button>
-										</div>
-									</div>
-								{/each}
-							</div>
-						{/if}
-					{:else}
-						<Skeleton layout={[[8]]} />
-					{/if}
-				</div>
-			</Section>
-		{/if}
 	</div>
 {/if}