refactor(frontend): capture refactor UI

backend/windmill-api/src/utils.rs

@@ -5,6 +5,9 @@
  * Please see the included NOTICE for copyright information and
  * LICENSE-AGPL for a copy of the license.
  */
+
+use std::fmt::Display;
+
 use axum::{body::Body, response::Response};
 use regex::Regex;
 use serde::{Deserialize, Deserializer};
@@ -35,6 +38,16 @@ pub enum RunnableKind {
     Flow,
 }
 
+impl Display for RunnableKind {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let runnable_kind = match self {
+            RunnableKind::Script => "script",
+            RunnableKind::Flow => "flow"
+        };
+        write!(f, "{}", runnable_kind)
+    }
+}
+
 pub async fn require_super_admin(db: &DB, email: &str) -> error::Result<()> {
     let is_admin = is_super_admin_email(db, email).await?;
 

frontend/src/lib/components/Description.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { twMerge } from 'tailwind-merge'
+
 	export let link: string | undefined = undefined
 </script>
 
-<div class="text-xs text-tertiary font-normal">
+<div class={twMerge('text-xs text-tertiary font-normal opacity-80', $$props.class)}>
 	<slot />
 	{#if link}
 		<a href={link} target="_blank">Learn more</a>

frontend/src/lib/components/Dev.svelte

@@ -47,10 +47,11 @@
 		parseTypescriptDeps
 	} from '$lib/relative_imports'
 	import Tooltip from './Tooltip.svelte'
-	import type { ScheduleTrigger, TriggerContext } from './triggers'
+	import type { TriggerContext } from './triggers'
 	import { workspaceAIClients } from './copilot/lib'
 	import type { FlowPropPickerConfig, PropPickerContext } from './prop_picker'
 	import type { PickableProperties } from './flows/previousResults'
+	import { Triggers } from './triggers/triggers.svelte'
 	$: token = $page.url.searchParams.get('wm_token') ?? undefined
 	$: workspace = $page.url.searchParams.get('workspace') ?? undefined
 	$: themeDarkRaw = $page.url.searchParams.get('activeColorTheme')
@@ -493,20 +494,13 @@
 
 	const testStepStore = writable<Record<string, any>>({})
 	const selectedIdStore = writable('settings-metadata')
-	const selectedTriggerStore = writable<
-		'webhooks' | 'emails' | 'schedules' | 'cli' | 'routes' | 'websockets' | 'scheduledPoll'
-	>('webhooks')
 
-	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(undefined)
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	setContext<TriggerContext>('TriggerContext', {
-		primarySchedule: primaryScheduleStore,
-		selectedTrigger: selectedTriggerStore,
 		triggersCount: triggersCount,
 		simplifiedPoll: writable(false),
-		defaultValues: writable(undefined),
-		captureOn: writable(undefined),
-		showCaptureHint: writable(undefined)
+		showCaptureHint: writable(undefined),
+		triggersState: new Triggers()
 	})
 	setContext<FlowEditorContext>('FlowEditorContext', {
 		selectedId: selectedIdStore,

frontend/src/lib/components/DisplayResult.svelte

@@ -35,6 +35,7 @@
 	import PdfViewer from './display/PdfViewer.svelte'
 	import type { DisplayResultUi } from './custom_ui'
 	import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte'
+	import { toJsonStr } from '$lib/utils'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	export let result: any
@@ -269,15 +270,6 @@
 	let jsonViewer: Drawer
 	let s3FileViewer: S3FilePicker
 
-	function toJsonStr(result: any) {
-		try {
-			// console.log(result)
-			return JSON.stringify(result ?? null, null, 4) ?? 'null'
-		} catch (e) {
-			return 'error stringifying object: ' + e.toString()
-		}
-	}
-
 	function checkIfHasBigInt(result: any) {
 		if (typeof result === 'number' && Number.isInteger(result) && !Number.isSafeInteger(result)) {
 			return true

frontend/src/lib/components/DisplayResultControlBar.svelte

@@ -26,7 +26,7 @@
 	}
 </script>
 
-<div class={twMerge('flex flex-row gap-2.5 z-10 text-tertiary -mt-1')}>
+<div class={twMerge('flex flex-row gap-2.5 z-10 text-tertiary -mt-1 items-center')}>
 	{#if customUi?.disableDownload !== true}
 		<a
 			download="{filename ?? 'result'}.json"

frontend/src/lib/components/DropdownV2.svelte

@@ -25,6 +25,8 @@
 	export let fixedHeight = true
 	export let hidePopup = false
 	export let open = false
+	export let customWidth: number | undefined = undefined
+	export let customMenu = false
 
 	const {
 		elements: { menu, item, trigger },
@@ -106,11 +108,16 @@
 </button>
 
 {#if open && !hidePopup}
-	<div use:melt={$menu} data-menu class="z-[6000]">
-		<div
-			class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
-		>
-			<DropdownV2Inner items={computeItems} meltItem={item} />
-		</div>
+	<div use:melt={$menu} data-menu class="z-[6000] transition-all duration-100">
+		{#if customMenu}
+			<slot name="menu" />
+		{:else}
+			<div
+				class="bg-surface border w-56 origin-top-right rounded-md shadow-md focus:outline-none overflow-y-auto py-1 max-h-[50vh]"
+				style={customWidth ? `width: ${customWidth}px` : ''}
+			>
+				<DropdownV2Inner items={computeItems} meltItem={item} />
+			</div>
+		{/if}
 	</div>
 {/if}

frontend/src/lib/components/DropdownV2Inner.svelte

@@ -4,10 +4,15 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { MenubarMenuElements } from '@melt-ui/svelte'
 	import type { Item } from '$lib/utils'
-	export let items: Item[] | (() => Item[]) | (() => Promise<Item[]>) = []
-	export let meltItem: MenubarMenuElements['item']
 
-	let computedItems: Item[] | undefined = undefined
+	interface Props {
+		items?: Item[] | (() => Item[]) | (() => Promise<Item[]>)
+		meltItem: MenubarMenuElements['item']
+	}
+
+	let { items = [], meltItem }: Props = $props()
+
+	let computedItems: Item[] | undefined = $state(undefined)
 	async function computeItems() {
 		if (typeof items === 'function') {
 			computedItems = ((await items()) ?? []).filter((item) => !item.hide)
@@ -38,9 +43,12 @@
 				item={meltItem}
 			>
 				{#if item.icon}
-					<svelte:component this={item.icon} size={14} color={item.iconColor} />
+					<item.icon size={14} color={item.iconColor} />
 				{/if}
-				{item.displayName}
+				<p title={item.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
+					{item.displayName}
+				</p>
+				{@render item.extra?.()}
 			</MenuItem>
 		{/each}
 	</div>