windmill-components 1.444.2 → 1.447.4

package/package/components/flows/content/FlowModuleMock.svelte

@@ -39,15 +39,14 @@ $: isMockEnabled = Boolean(flowModule.mock?.enabled);
 	/>
 	<div>
 		<span class="text-xs font-bold">Mocked Return value</span>
-		{#if flowModule?.mock?.return_value != undefined}
+		{#if flowModule?.mock?.enabled}
 			<JsonEditor {code} bind:value={flowModule.mock.return_value} />
 		{:else}
-			<input
-				type="text"
-				disabled
-				value={flowModule.mock?.return_value ? code : ''}
-				class="w-full p-2 border rounded-md"
-			/>
+			<pre class="text-xs border rounded p-2 bg-surface-disabled"
+				>{flowModule.mock?.return_value
+					? JSON.stringify(flowModule.mock?.return_value, null, 2)
+					: ''}</pre
+			>
 		{/if}
 	</div>
 </Section>

package/package/components/flows/content/FlowPathViewer.svelte

@@ -16,7 +16,8 @@ setContext('TriggerContext', {
     triggersCount: triggersCount,
     simplifiedPoll: writable(false),
     defaultValues: writable(undefined),
-    captureOn: writable(undefined)
+    captureOn: writable(undefined),
+    showCaptureHint: writable(undefined)
 });
 async function loadFlow(path) {
     flow = await FlowService.getFlowByPath({ workspace: $workspaceStore, path });

package/package/components/flows/content/FlowSettings.svelte

@@ -3,7 +3,7 @@ import FlowCard from '../common/FlowCard.svelte';
 import Toggle from '../../Toggle.svelte';
 import { Alert, Button, SecondsInput } from '../../common';
 import { getContext } from 'svelte';
-import { enterpriseLicense, workspaceStore } from '../../../stores';
+import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import Tooltip from '../../Tooltip.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
@@ -37,6 +37,7 @@ $: activeAdvancedOptions = [
     { name: 'Early Return', active: Boolean($flowStore.value.early_return) },
     { name: 'Dedicated Worker', active: Boolean($flowStore.dedicated_worker) },
     { name: 'Concurrent Limit', active: Boolean($flowStore.value.concurrent_limit) },
+    { name: 'Run on Behalf of Last Editor', active: Boolean($flowStore.on_behalf_of_email) },
     { name: 'Worker Tag', active: displayWorkerTagPicker }
 ];
 $: numberOfAdvancedOptionsOn = activeAdvancedOptions.filter((option) => option.active).length;
@@ -338,6 +339,27 @@ $: activeAdvancedOptionNames = activeAdvancedOptions
 					class="py-1"
 				/>
 
+				<!-- On behalf of last editor section -->
+				<Toggle
+					textClass="font-normal text-sm"
+					color="nord"
+					size="xs"
+					checked={Boolean($flowStore.on_behalf_of_email)}
+					on:change={() => {
+						if ($flowStore.on_behalf_of_email) {
+							$flowStore.on_behalf_of_email = undefined
+						} else {
+							$flowStore.on_behalf_of_email = $userStore?.email
+						}
+					}}
+					options={{
+						right: 'Run on behalf of last editor',
+						rightTooltip:
+							'When this option is enabled, the flow will be run with the permissions of the last editor.'
+					}}
+					class="py-1"
+				/>
+
 				<!-- Error Handler Section -->
 				<div class="flex flex-row items-center py-1">
 					<ErrorHandlerToggleButtonV2
@@ -348,7 +370,7 @@ $: activeAdvancedOptionNames = activeAdvancedOptions
 					/>
 					{#if !$enterpriseLicense}
 						<span
-							class="inline-flex text-xs text-primary items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
+							class="inline-flex text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
 						>
 							<AlertTriangle size={16} />
 							EE only <Tooltip>Enterprise Edition only feature</Tooltip>
@@ -469,7 +491,7 @@ $: activeAdvancedOptionNames = activeAdvancedOptions
 						/>
 						{#if !$enterpriseLicense || isCloudHosted()}
 							<span
-								class="inline-flex absolute top-0 left-72 text-xs text-primary items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
+								class="inline-flex absolute top-0 left-72 text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
 							>
 								<AlertTriangle size={16} />
 								EE only <Tooltip>Enterprise Edition only feature</Tooltip>

package/package/components/flows/content/FlowWhileLoop.svelte

@@ -39,115 +39,113 @@ $: previewIterationArgs = $flowStateStore[mod.id]?.previewArgs ?? {};
 	/>
 </Drawer>
 
-<div class="h-full flex flex-col">
-	<FlowCard {noEditor} title="While loop">
-		<div slot="header" class="grow">
-			<input bind:value={mod.summary} placeholder={'Summary'} />
-		</div>
+<FlowCard {noEditor} title="While loop">
+	<div slot="header" class="grow">
+		<input bind:value={mod.summary} placeholder={'Summary'} />
+	</div>
 
-		<Splitpanes horizontal class="!max-h-[calc(100%-48px)]">
-			<Pane size={60} minSize={20} class="p-4">
-				{#if !noEditor}
-					<Alert
-						type="info"
-						title="While loops"
-						class="mb-4"
-						size="xs"
-						documentationLink="https://www.windmill.dev/docs/flows/while_loops"
-					>
-						Add steps inside the while loop but have one of them use early stop/break in their
-						Advanced settings (or do it at the loop level that will watch the last step) to break
-						out of the while loop (otherwise it will loop forever and you will have to cancel the
-						flow manually).
-					</Alert>
-				{/if}
+	<Splitpanes horizontal class="h-full">
+		<Pane size={50} minSize={20} class="p-4">
+			{#if !noEditor}
+				<Alert
+					type="info"
+					title="While loops"
+					class="mb-4"
+					size="xs"
+					documentationLink="https://www.windmill.dev/docs/flows/while_loops"
+				>
+					Add steps inside the while loop but have one of them use early stop/break in their
+					Advanced settings (or do it at the loop level that will watch the last step) to break out
+					of the while loop (otherwise it will loop forever and you will have to cancel the flow
+					manually).
+				</Alert>
+			{/if}
 
-				{#if mod.value.type === 'whileloopflow'}
-					<div class="flex flex-row gap-8 mt-2 mb-6">
-						<div>
-							<div class="mb-2 text-sm font-bold"
-								>Skip failures <Tooltip
-									documentationLink="https://www.windmill.dev/docs/flows/while_loops"
-									>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
-									the error will be collected as the result of the iteration. Regardless of this
-									setting, if an error handler is defined, it will process the error.</Tooltip
-								></div
-							>
-							<Toggle
-								bind:checked={mod.value.skip_failures}
-								options={{
-									right: 'Skip failures'
-								}}
-							/>
-						</div>
+			{#if mod.value.type === 'whileloopflow'}
+				<div class="flex flex-row gap-8 mt-2 mb-6">
+					<div>
+						<div class="mb-2 text-sm font-bold"
+							>Skip failures <Tooltip
+								documentationLink="https://www.windmill.dev/docs/flows/while_loops"
+								>If disabled, the flow will fail as soon as one of the iteration fail. Otherwise,
+								the error will be collected as the result of the iteration. Regardless of this
+								setting, if an error handler is defined, it will process the error.</Tooltip
+							></div
+						>
+						<Toggle
+							bind:checked={mod.value.skip_failures}
+							options={{
+								right: 'Skip failures'
+							}}
+						/>
 					</div>
+				</div>
 
-					<div class="my-2 flex flex-row gap-2 items-center">
-						<div class="flex w-full justify-end">
-							<Button
-								on:click={() => (previewOpen = true)}
-								startIcon={{ icon: Play }}
-								color="dark"
-								size="sm">Test an iteration</Button
-							>
-						</div>
+				<div class="my-2 flex flex-row gap-2 items-center">
+					<div class="flex w-full justify-end">
+						<Button
+							on:click={() => (previewOpen = true)}
+							startIcon={{ icon: Play }}
+							color="dark"
+							size="sm">Test an iteration</Button
+						>
 					</div>
-				{/if}
-			</Pane>
-			<Pane size={40} minSize={20} class="flex flex-col flex-1">
-				<Tabs bind:selected>
-					<!-- <Tab value="retries">Retries</Tab> -->
-					<Tab value="early-stop">Early Stop/Break</Tab>
-					<Tab value="skip">Skip</Tab>
-					<Tab value="suspend">Suspend/Approval/Prompt</Tab>
-					<Tab value="sleep">Sleep</Tab>
-					<Tab value="mock">Mock</Tab>
-					<Tab value="lifetime">Lifetime</Tab>
+				</div>
+			{/if}
+		</Pane>
+		<Pane size={40} minSize={20} class="flex flex-col flex-1">
+			<Tabs bind:selected>
+				<!-- <Tab value="retries">Retries</Tab> -->
+				<Tab value="early-stop">Early Stop/Break</Tab>
+				<Tab value="skip">Skip</Tab>
+				<Tab value="suspend">Suspend/Approval/Prompt</Tab>
+				<Tab value="sleep">Sleep</Tab>
+				<Tab value="mock">Mock</Tab>
+				<Tab value="lifetime">Lifetime</Tab>
 
-					<svelte:fragment slot="content">
-						<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
-							<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
+				<svelte:fragment slot="content">
+					<div class="overflow-hidden bg-surface" style="height:calc(100% - 32px);">
+						<!-- <TabContent value="retries" class="flex flex-col flex-1 h-full">
 								<div class="p-4 overflow-y-auto">
 									<FlowRetries bind:flowModule={mod} />
 								</div>
 							</TabContent> -->
 
-							<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleEarlyStop bind:flowModule={mod} />
-								</div>
-							</TabContent>
+						<TabContent value="early-stop" class="flex flex-col flex-1 h-full">
+							<div class="p-4 overflow-y-auto">
+								<FlowModuleEarlyStop bind:flowModule={mod} />
+							</div>
+						</TabContent>
 
-							<TabContent value="skip" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSkip bind:flowModule={mod} {parentModule} {previousModule} />
-								</div>
-							</TabContent>
+						<TabContent value="skip" class="flex flex-col flex-1 h-full">
+							<div class="p-4 overflow-y-auto">
+								<FlowModuleSkip bind:flowModule={mod} {parentModule} {previousModule} />
+							</div>
+						</TabContent>
 
-							<TabContent value="suspend" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule={mod} />
-								</div>
-							</TabContent>
-							<TabContent value="sleep" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule={mod} />
-								</div>
-							</TabContent>
-							<TabContent value="mock" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleMock bind:flowModule={mod} />
-								</div>
-							</TabContent>
-							<TabContent value="lifetime" class="flex flex-col flex-1 h-full">
-								<div class="p-4 overflow-y-auto">
-									<FlowModuleDeleteAfterUse bind:flowModule={mod} disabled={!$enterpriseLicense} />
-								</div>
-							</TabContent>
-						</div>
-					</svelte:fragment>
-				</Tabs>
-			</Pane>
-		</Splitpanes>
-	</FlowCard>
-</div>
+						<TabContent value="suspend" class="flex flex-col flex-1 h-full">
+							<div class="p-4 overflow-y-auto">
+								<FlowModuleSuspend previousModuleId={previousModule?.id} bind:flowModule={mod} />
+							</div>
+						</TabContent>
+						<TabContent value="sleep" class="flex flex-col flex-1 h-full">
+							<div class="p-4 overflow-y-auto">
+								<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule={mod} />
+							</div>
+						</TabContent>
+						<TabContent value="mock" class="flex flex-col flex-1 h-full">
+							<div class="p-4 overflow-y-auto">
+								<FlowModuleMock bind:flowModule={mod} />
+							</div>
+						</TabContent>
+						<TabContent value="lifetime" class="flex flex-col flex-1 h-full">
+							<div class="p-4 overflow-y-auto">
+								<FlowModuleDeleteAfterUse bind:flowModule={mod} disabled={!$enterpriseLicense} />
+							</div>
+						</TabContent>
+					</div>
+				</svelte:fragment>
+			</Tabs>
+		</Pane>
+	</Splitpanes>
+</FlowCard>

package/package/components/flows/flowStore.d.ts

@@ -6,4 +6,17 @@ export type FlowMode = 'push' | 'pull';
 export declare const importFlowStore: Writable<Flow | undefined>;
 export declare function initFlow(flow: Flow, flowStore: Writable<Flow>, flowStateStore: Writable<FlowState>): Promise<void>;
 export declare function copyFirstStepSchema(flowState: FlowState, flowStore: Writable<OpenFlow>): Promise<void>;
+export declare function getFirstStepSchema(flowState: FlowState, flowStore: Writable<OpenFlow>): Promise<{
+    schema: import("../../common").Schema | undefined;
+    mod: {
+        id: string;
+        summary: string | undefined;
+        value: {
+            language?: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | undefined;
+            path?: string | undefined;
+            type: "script" | "flow" | "identity" | "rawscript" | "forloopflow" | "branchone" | "branchall" | "whileloopflow";
+        };
+    };
+    connectFirstNode: () => void;
+}>;
 export declare function replaceId(expr: string, id: string, newId: string): string;

package/package/components/flows/flowStore.js

@@ -1,5 +1,7 @@
 import { writable } from 'svelte/store';
 import { initFlowState } from './flowState';
+import { sendUserToast } from '../../toast';
+import { get } from 'svelte/store';
 export const importFlowStore = writable(undefined);
 export async function initFlow(flow, flowStore, flowStateStore) {
     await initFlowState(flow, flowStateStore);
@@ -18,11 +20,50 @@ export async function copyFirstStepSchema(flowState, flowStore) {
                         expr: `flow_input.${key}`
                     };
                 });
+                return flow;
             }
+            sendUserToast('Only scripts can be used as a input schema', true);
+            return flow;
         }
+        sendUserToast('No first step found', true);
         return flow;
     });
 }
+export async function getFirstStepSchema(flowState, flowStore) {
+    const flow = get(flowStore);
+    const firstModuleId = flow.value.modules[0]?.id;
+    if (!firstModuleId || !flowState[firstModuleId]) {
+        throw new Error('no first step found');
+    }
+    const schema = structuredClone(flowState[firstModuleId].schema);
+    const v = flow.value.modules[0].value;
+    if (v.type !== 'rawscript' && v.type !== 'script') {
+        throw new Error('only scripts can be used as a input schema');
+    }
+    const simplifiedModule = {
+        id: flow.value.modules[0].id,
+        summary: flow.value.modules[0].summary,
+        value: {
+            type: flow.value.modules[0].value.type,
+            ...('path' in flow.value.modules[0].value ? { path: flow.value.modules[0].value.path } : {}),
+            ...('language' in flow.value.modules[0].value
+                ? { language: flow.value.modules[0].value.language }
+                : {})
+        }
+    };
+    return {
+        schema,
+        mod: simplifiedModule,
+        connectFirstNode: () => {
+            Object.keys(v.input_transforms ?? {}).forEach((key) => {
+                v.input_transforms[key] = {
+                    type: 'javascript',
+                    expr: `flow_input.${key}`
+                };
+            });
+        }
+    };
+}
 export function replaceId(expr, id, newId) {
     return expr
         .replaceAll(`results.${id}`, `results.${newId}`)

package/package/components/flows/header/FlowPreviewButtons.svelte

@@ -2,19 +2,21 @@
 import Button from '../../common/button/Button.svelte';
 import Drawer from '../../common/drawer/Drawer.svelte';
 import FlowPreviewContent from '../../FlowPreviewContent.svelte';
+import { createEventDispatcher } from 'svelte';
 import { getContext } from 'svelte';
 import { Play } from 'lucide-svelte';
 const { selectedId } = getContext('FlowEditorContext');
 let previewOpen = false;
 let previewMode = 'whole';
-export async function openPreview() {
+export async function openPreview(test = false) {
     if (!previewOpen) {
         previewOpen = true;
+        if (!test)
+            return;
     }
-    else {
-        flowPreviewContent?.test();
-    }
+    flowPreviewContent?.test();
 }
+const dispatch = createEventDispatcher();
 let flowPreviewContent;
 let jobId = undefined;
 let job = undefined;
@@ -86,5 +88,9 @@ $: upToDisabled =
 		on:close={() => {
 			previewOpen = false
 		}}
+		on:openTriggers={(e) => {
+			previewOpen = false
+			dispatch('openTriggers', e.detail)
+		}}
 	/>
 </Drawer>

package/package/components/flows/header/FlowPreviewButtons.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        openPreview?: (() => Promise<void>) | undefined;
+        openPreview?: ((test?: boolean) => Promise<void>) | undefined;
     };
     events: {
+        openTriggers: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -12,6 +14,6 @@ export type FlowPreviewButtonsProps = typeof __propDef.props;
 export type FlowPreviewButtonsEvents = typeof __propDef.events;
 export type FlowPreviewButtonsSlots = typeof __propDef.slots;
 export default class FlowPreviewButtons extends SvelteComponent<FlowPreviewButtonsProps, FlowPreviewButtonsEvents, FlowPreviewButtonsSlots> {
-    get openPreview(): () => Promise<void>;
+    get openPreview(): (test?: boolean) => Promise<void>;
 }
 export {};

package/package/components/flows/header/FlowYamlEditor.svelte

@@ -30,6 +30,9 @@ function apply() {
         if (parsed['visible_to_runner_only'] !== undefined) {
             $flowStore.visible_to_runner_only = parsed['visible_to_runner_only'];
         }
+        if (parsed['on_behalf_of_email'] !== undefined) {
+            $flowStore.on_behalf_of_email = parsed['on_behalf_of_email'];
+        }
         $flowStore.value = parsed.value;
         $flowStore.schema = parsed.schema;
         $flowStore.tag = parsed.tag;

package/package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,7 +1,6 @@
-<script>import Badge from '../../common/badge/Badge.svelte';
-import Popover from '../../Popover.svelte';
+<script>import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { AlertTriangle, Bed, Database, Gauge, Move, Pencil, PhoneIncoming, Repeat, Square, SkipForward, Voicemail, X } from 'lucide-svelte';
+import { AlertTriangle, Bed, Database, Gauge, Move, PhoneIncoming, Repeat, Square, SkipForward, Voicemail, X } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fade } from 'svelte/transition';
 import { get } from 'svelte/store';
@@ -12,6 +11,7 @@ import { Drawer } from '../../common';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import { getDependeeAndDependentComponents } from '../flowExplorer';
 import { replaceId } from '../flowStore';
+import FlowModuleSchemaItemViewer from './FlowModuleSchemaItemViewer.svelte';
 import FlowPropPicker from '../propPicker/FlowPropPicker.svelte';
 export let selected = false;
 export let deletable = false;
@@ -44,9 +44,6 @@ $: pickableIds = $pickablePropertiesFiltered?.priorIds;
 let editId = false;
 let newId = id ?? '';
 let hover = false;
-let idBadgeWidth = undefined;
-let iconWidth = undefined;
-$: marginLeft = Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32;
 </script>
 
 {#if deletable && id && editId}
@@ -218,58 +215,11 @@ $: marginLeft = Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32;
 		{/if}
 	</div>
 
-	<div
-		class="relative flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
-	 p-2 text-2xs module text-primary"
-	>
-		{#if $$slots.icon}
-			<div class="flex-none" bind:clientWidth={iconWidth}>
-				<slot name="icon" />
-			</div>
-		{/if}
-
-		<Popover
-			class="absolute left-1/2 transform -translate-x-1/2 center-center"
-			style="max-width: calc(100% - {marginLeft}px)"
-		>
-			<div class="text-center truncate {bold ? '!font-bold' : 'font-normal'}">
-				{label}
-			</div>
-			<svelte:fragment slot="text">
-				<div>
-					<div>{label}</div>
-					{#if path != ''}<div>{path}</div>{/if}
-				</div>
-			</svelte:fragment>
-		</Popover>
-
-		<div class="flex items-center space-x-2 relative max-w-[25%]" bind:clientWidth={idBadgeWidth}>
-			{#if id && id !== 'preprocessor' && !id.startsWith('failure') && !id.startsWith('subflow:')}
-				<Badge
-					color="indigo"
-					wrapperClass="max-w-full"
-					baseClass="max-w-full truncate !px-1"
-					title={id}
-				>
-					<span class="max-w-full text-2xs truncate">{id}</span></Badge
-				>
-				{#if deletable}
-					<button
-						class="absolute -left-[28px] z-10 h-[20px] rounded-l rounded-t rounded-s w-[20px] trash center-center text-secondary bg-surface duration-150 hover:bg-blue-400 {editId
-							? '!bg-blue-400'
-							: ''} hover:text-white
-hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
-						on:click|preventDefault|stopPropagation={(event) => (editId = !editId)}
-						title="Edit Id"><Pencil size={14} /></button
-					>
-				{/if}
-			{:else if id?.startsWith('subflow:')}
-				<Badge color="blue" wrapperClass="max-w-full" baseClass="!px-1" title={id}>
-					<span class="max-w-full text-2xs truncate">{id.substring('subflow:'.length)}</span></Badge
-				>
-			{/if}
-		</div>
-	</div>
+	<FlowModuleSchemaItemViewer {label} {path} {id} {deletable} {bold} bind:editId {hover}>
+		<svelte:fragment slot="icon">
+			<slot name="icon" />
+		</svelte:fragment>
+	</FlowModuleSchemaItemViewer>
 
 	{#if id && $flowPropPickerConfig && pickableIds && Object.keys(pickableIds).includes(id)}
 		<div class="absolute -bottom-[14px] right-[21px] translate-x-[50%] center-center">

package/package/components/flows/map/FlowModuleSchemaItemViewer.svelte

@@ -0,0 +1,67 @@
+<script>import Popover from '../../Popover.svelte';
+import Badge from '../../common/badge/Badge.svelte';
+import { Pencil } from 'lucide-svelte';
+let iconWidth = 0;
+let idBadgeWidth = undefined;
+export let label = '';
+export let path = '';
+export let id = '';
+export let deletable = false;
+export let bold = false;
+export let editId = false;
+export let hover = false;
+$: marginLeft = Math.max(iconWidth ?? 0, idBadgeWidth ?? 0) * 2 + 32;
+</script>
+
+<div
+	class="relative flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
+	 p-2 text-2xs module text-primary"
+>
+	{#if $$slots.icon && true}
+		<div class="flex-none" bind:clientWidth={iconWidth}>
+			<slot name="icon" />
+		</div>
+	{/if}
+
+	<Popover
+		class="absolute left-1/2 transform -translate-x-1/2 center-center"
+		style="max-width: calc(100% - {marginLeft}px)"
+	>
+		<div class="text-center truncate {bold ? '!font-bold' : 'font-normal'}">
+			{label}
+		</div>
+		<svelte:fragment slot="text">
+			<div>
+				<div>{label}</div>
+				{#if path != ''}<div>{path}</div>{/if}
+			</div>
+		</svelte:fragment>
+	</Popover>
+
+	<div class="flex items-center space-x-2 relative max-w-[25%]" bind:clientWidth={idBadgeWidth}>
+		{#if id && id !== 'preprocessor' && !id.startsWith('failure') && !id.startsWith('subflow:')}
+			<Badge
+				color="indigo"
+				wrapperClass="max-w-full"
+				baseClass="max-w-full truncate !px-1"
+				title={id}
+			>
+				<span class="max-w-full text-2xs truncate">{id}</span></Badge
+			>
+			{#if deletable}
+				<button
+					class="absolute -left-[28px] z-10 h-[20px] rounded-l rounded-t rounded-s w-[20px] trash center-center text-secondary bg-surface duration-150 hover:bg-blue-400 {editId
+						? '!bg-blue-400'
+						: ''} hover:text-white
+hover:border-blue-700 hover:!visible {hover ? '' : '!hidden'}"
+					on:click|preventDefault|stopPropagation={(event) => (editId = !editId)}
+					title="Edit Id"><Pencil size={14} /></button
+				>
+			{/if}
+		{:else if id?.startsWith('subflow:')}
+			<Badge color="blue" wrapperClass="max-w-full" baseClass="!px-1" title={id}>
+				<span class="max-w-full text-2xs truncate">{id.substring('subflow:'.length)}</span></Badge
+			>
+		{/if}
+	</div>
+</div>

package/package/components/flows/map/FlowModuleSchemaItemViewer.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        path?: string | undefined;
+        id?: string | undefined;
+        deletable?: boolean | undefined;
+        bold?: boolean | undefined;
+        editId?: boolean | undefined;
+        hover?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+    };
+};
+export type FlowModuleSchemaItemViewerProps = typeof __propDef.props;
+export type FlowModuleSchemaItemViewerEvents = typeof __propDef.events;
+export type FlowModuleSchemaItemViewerSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaItemViewer extends SvelteComponent<FlowModuleSchemaItemViewerProps, FlowModuleSchemaItemViewerEvents, FlowModuleSchemaItemViewerSlots> {
+}
+export {};