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
windmill-labs · Feb 3, 2025 · 8904ce0 · 8904ce0
1 parent 9f184ca
commit 8904ce0
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 204 deletions.
diff --git a/frontend/src/lib/components/Section.svelte b/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}

diff --git a/frontend/src/lib/components/details/EmailTriggerPanel.svelte b/frontend/src/lib/components/details/EmailTriggerPanel.svelte
@@ -74,6 +74,7 @@
 				on:updateSchema
 				on:testWithArgs
 				{newItem}
+				alwaysOpened={true}
 			/>
 		{:else}
 			<div>

diff --git a/frontend/src/lib/components/triggers/TriggersEditorSection.svelte b/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}

diff --git a/frontend/src/lib/components/triggers/http/RoutesPanel.svelte b/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>