windmill-components 1.36.2 → 1.46.1

package/components/flows/flowStore.js

@@ -1,7 +1,39 @@
-import { get, writable } from 'svelte/store';
+import { sendUserToast } from '../../utils';
+import { get, writable, derived } from 'svelte/store';
 import { flowStateStore, initFlowState } from './flowState';
-export const flowStore = writable({ summary: "", value: { modules: [] }, path: "", edited_at: "", edited_by: "", archived: false, extra_perms: {} });
-export function initFlow(flow) {
+import { numberToChars } from './utils';
+export const flowStore = writable({
+    summary: '',
+    value: { modules: [] },
+    path: '',
+    edited_at: '',
+    edited_by: '',
+    archived: false,
+    extra_perms: {}
+});
+export function dfs(modules) {
+    let result = [];
+    for (const module of modules) {
+        if (module.value.type == 'forloopflow') {
+            result = result.concat(module.id);
+            result = result.concat(dfs(module.value.modules));
+        }
+        else if (module.value.type == 'branchone') {
+            result = result.concat(module.id);
+            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat().concat(module.value.default)));
+        }
+        else if (module.value.type == 'branchall') {
+            result = result.concat(module.id);
+            result = result.concat(dfs(module.value.branches.map((b) => b.modules).flat()));
+        }
+        else {
+            result.push(module.id);
+        }
+    }
+    return result;
+}
+export async function initFlow(flow) {
+    let counter = 40;
     for (const mod of flow.value.modules) {
         migrateFlowModule(mod);
         let val = mod.value;
@@ -9,19 +41,29 @@ export function initFlow(flow) {
             let flowVal = val;
             if (flowVal.value && flowVal.value.modules) {
                 flowVal.modules = flowVal.value.modules;
-                flowVal.modules.forEach(migrateFlowModule);
                 flowVal.value = undefined;
             }
+            flowVal.modules.forEach(migrateFlowModule);
         }
     }
+    await initFlowState(flow);
     flowStore.set(flow);
-    initFlowState(flow);
     function migrateFlowModule(mod) {
+        if (mod.id == undefined) {
+            mod.id = numberToChars(counter++);
+        }
         let modVal = mod;
         if (modVal.input_transform) {
             modVal.input_transforms = modVal.input_transform;
             delete modVal.input_transform;
         }
+        if ((modVal.input_transforms && modVal.value.type == 'script') ||
+            modVal.value.type == 'rawscript') {
+            if (modVal.input_transforms && Object.keys(modVal.input_transforms).length > 0) {
+                modVal.value.input_transforms = modVal.input_transforms;
+                delete modVal.input_transforms;
+            }
+        }
         if (modVal.stop_after_if_expr) {
             modVal.stop_after_if = {
                 expr: modVal.stop_after_if_expr,
@@ -35,9 +77,20 @@ export function initFlow(flow) {
 export async function copyFirstStepSchema() {
     const flowState = get(flowStateStore);
     flowStore.update((flow) => {
-        if (flowState.modules[0].schema) {
-            flow.schema = flowState.modules[0].schema;
+        const firstModuleId = flow.value.modules[0]?.id;
+        if (flowState[firstModuleId] && firstModuleId) {
+            flow.schema = flowState[firstModuleId].schema;
+            const v = flow.value.modules[0].value;
+            if (v.type == 'rawscript' || v.type == 'script') {
+                Object.keys(v.input_transforms ?? {}).forEach((key) => {
+                    v.input_transforms[key] = {
+                        type: 'javascript',
+                        expr: `flow_input.${key}`
+                    };
+                });
+            }
         }
         return flow;
     });
+    sendUserToast('Copied first step schema as flow input schema');
 }

package/components/flows/header/FlowImportExportMenu.svelte

@@ -1,7 +1,5 @@
 <script>import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
-import Menu from '../../common/menu/Menu.svelte';
-import MenuItem from '../../common/menu/MenuItem.svelte';
 import FlowViewer from '../../FlowViewer.svelte';
 import SimpleEditor from '../../SimpleEditor.svelte';
 import { sendUserToast } from '../../../utils';
@@ -21,28 +19,20 @@ function importJson() {
 }
 </script>
 
-<Menu placement="bottom-end">
-	<button
-		slot="trigger"
-		class="flex items-center text-sm border focus:outline-none focus:ring-4 font-medium rounded-md text-gray-800 bg-white hover:bg-gray-100 focus:ring-gray-300 px-4 py-2"
-	>
-		Import/Export
-	</button>
-	<div class="divide-y divide-gray-200">
-		<MenuItem on:click={() => jsonSetterDrawer.toggleDrawer()}>
-			<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
-			Import from a JSON OpenFlow
-		</MenuItem>
-		<MenuItem on:click={() => jsonViewerDrawer.toggleDrawer()}>
-			<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
-			Export to a JSON OpenFlow
-		</MenuItem>
-	</div>
-</Menu>
+<div class="flex-row gap-x-2 hidden sm:flex">
+	<Button size="sm" variant="border" color="light" on:click={() => jsonSetterDrawer.toggleDrawer()}>
+		<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
+		Import JSON
+	</Button>
+	<Button size="sm" variant="border" color="light" on:click={() => jsonViewerDrawer.toggleDrawer()}>
+		<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
+		Export JSON
+	</Button>
+</div>
 
 <Drawer bind:this={jsonSetterDrawer} size="800px">
 	<DrawerContent title="Import JSON" on:close={() => jsonSetterDrawer.toggleDrawer()}>
-		<Button size="sm" on:click={importJson}>Import</Button>
+		<Button slot="submission" size="sm" on:click={importJson}>Import</Button>
 		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
 	</DrawerContent>
 </Drawer>

package/components/flows/header/FlowPreviewButtons.svelte

@@ -3,7 +3,6 @@ import Drawer from '../../common/drawer/Drawer.svelte';
 import FlowPreviewContent from '../../FlowPreviewContent.svelte';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
-import Icon from 'svelte-awesome';
 const { selectedId } = getContext('FlowEditorContext');
 let previewOpen = false;
 let previewMode = 'whole';
@@ -12,46 +11,48 @@ $: upToDisabled = [
     'settings-schedule',
     'settings-retries',
     'inputs',
-    'schedules'
+    'schedules',
+    'failure'
 ].includes($selectedId);
 </script>
 
-<span
-	class="flex flex-row-reverse justify-between flex-wrap gap-2  w-full py-2 px-4 bg-white border-b border-t"
->
+<div class="flex flex-row-reverse justify-between items-center gap-x-2">
 	<Button
-		btnClasses="grow"
 		on:click={() => {
 			previewMode = 'whole'
 			previewOpen = !previewOpen
 		}}
 		size="sm"
+		endIcon={{ icon: faPlay }}
 	>
 		Test flow
-		<Icon data={faPlay} class="ml-2" scale={0.8} />
 	</Button>
 	{#if !upToDisabled}
 		<Button
-			btnClasses="grow"
 			size="sm"
 			disabled={upToDisabled}
 			color="light"
 			variant="border"
 			on:click={() => {
 				previewMode = 'upTo'
-
 				previewOpen = !previewOpen
 			}}
+			endIcon={{ icon: faPlay }}
 		>
 			Test up to step {$selectedId
 				.split('-')
 				.map((x) => (Number.isNaN(Number(x)) ? x : Number(x) + 1))
 				.join(' ')}
-			<Icon data={faPlay} class="ml-2" scale={0.8} />
 		</Button>
 	{/if}
-</span>
+</div>
 
 <Drawer bind:open={previewOpen} size="800px">
-	<FlowPreviewContent bind:previewMode on:close={() => (previewOpen = !previewOpen)} />
+	<FlowPreviewContent
+		open={previewOpen}
+		bind:previewMode
+		on:close={() => {
+			previewOpen = false
+		}}
+	/>
 </Drawer>

package/components/flows/map/FlowBranchAllMap.svelte

@@ -0,0 +1,90 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte';
+import { slide } from 'svelte/transition';
+import { faCodeBranch, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '../../common';
+import { classNames } from '../../../utils';
+import Icon from 'svelte-awesome';
+import { deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
+import { emptyFlowModuleState } from '../utils';
+import { flowStateStore } from '../flowState';
+export let module;
+let selectedBranch = 0;
+const { select, selectedId } = getContext('FlowEditorContext');
+async function addBranch() {
+    await idMutex.runExclusive(async () => {
+        if (module.value.type === 'branchall') {
+            const newModule = emptyModule();
+            module.value.branches.splice(module.value.branches.length, 0, {
+                summary: '',
+                skip_failure: false,
+                modules: [newModule]
+            });
+            module = module;
+            $flowStateStore[newModule.id] = emptyFlowModuleState();
+        }
+    });
+}
+function removeBranch(index) {
+    if (module.value.type === 'branchall') {
+        module.value.branches[index].modules.forEach((mod) => {
+            deleteFlowStateById(mod.id);
+        });
+        module.value.branches.splice(index, 1);
+        module = module;
+    }
+}
+</script>
+
+{#if module.value.type === 'branchall'}
+	<div class="flex text-xs">
+		<div
+			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2"
+		>
+			{#each module.value.branches ?? [] as branch, branchIndex (branchIndex)}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:click={() => {
+						selectedBranch = branchIndex
+						select(`${module.id}-branch-${branchIndex}`)
+					}}
+					class={classNames(
+						'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center',
+						$selectedId === `${module.id}-branch-${branchIndex}`
+							? 'outline outline-offset-1 outline-2  outline-slate-900'
+							: ''
+					)}
+				>
+					<Icon data={faCodeBranch} class="mr-2" />
+					<span
+						class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
+					>
+						{branch.summary || `Branch ${branchIndex}`}
+						<Button
+							iconOnly
+							size="xs"
+							startIcon={{ icon: faTrashAlt }}
+							color="light"
+							variant="border"
+							on:click={() => removeBranch(branchIndex)}
+						/>
+					</span>
+				</div>
+
+				<div>
+					<FlowModuleSchemaMap bind:modules={branch.modules} color="indigo" />
+				</div>
+			{/each}
+			<div class="overflow-clip">
+				<Button
+					size="xs"
+					color="dark"
+					startIcon={{ icon: faCodeBranch }}
+					on:click={() => addBranch()}
+				>
+					Add branch
+				</Button>
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        module: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowBranchAllMapProps = typeof __propDef.props;
+export declare type FlowBranchAllMapEvents = typeof __propDef.events;
+export declare type FlowBranchAllMapSlots = typeof __propDef.slots;
+export default class FlowBranchAllMap extends SvelteComponentTyped<FlowBranchAllMapProps, FlowBranchAllMapEvents, FlowBranchAllMapSlots> {
+}
+export {};

package/components/flows/map/FlowBranchOneMap.svelte

@@ -0,0 +1,116 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleSchemaMap from './FlowModuleSchemaMap.svelte';
+import { slide } from 'svelte/transition';
+import { faCodeBranch, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { Button } from '../../common';
+import { classNames } from '../../../utils';
+import Icon from 'svelte-awesome';
+import { deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
+import { emptyFlowModuleState } from '../utils';
+import { flowStateStore } from '../flowState';
+export let module;
+let selectedBranch = 0;
+const { select, selectedId } = getContext('FlowEditorContext');
+async function addBranch() {
+    await idMutex.runExclusive(async () => {
+        if (module.value.type === 'branchone') {
+            const newModule = emptyModule();
+            module.value.branches.splice(module.value.branches.length, 0, {
+                summary: '',
+                expr: '',
+                modules: [newModule]
+            });
+            module = module;
+            $flowStateStore[newModule.id] = emptyFlowModuleState();
+        }
+    });
+}
+function removeBranch(index) {
+    if (module.value.type === 'branchone') {
+        module.value.branches[index].modules.forEach((mod) => {
+            deleteFlowStateById(mod.id);
+        });
+        module.value.branches.splice(index, 1);
+        module = module;
+    }
+}
+</script>
+
+{#if module.value.type === 'branchone'}
+	<div class="flex text-xs">
+		<div
+			class="w-full space-y-2 flex flex-col border p-2 bg-gray-500 border-gray-600 bg-opacity-10 rounded-sm my-2"
+		>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				on:click={() => {
+					selectedBranch = 0
+					select(`${module.id}-branch-default`)
+				}}
+				class={classNames(
+					'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center',
+					$selectedId === `${module.id}-branch-default`
+						? 'outline outline-offset-1 outline-2  outline-slate-900'
+						: ''
+				)}
+			>
+				<Icon data={faCodeBranch} class="mr-2" />
+				<span
+					class="truncate text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center"
+				>
+					Default branch
+				</span>
+			</div>
+			<div>
+				<FlowModuleSchemaMap bind:modules={module.value.default} color="indigo" />
+			</div>
+
+			{#each module.value.branches ?? [] as branch, branchIndex (branchIndex)}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					on:click={() => {
+						selectedBranch = branchIndex + 1
+						select(`${module.id}-branch-${branchIndex}`)
+					}}
+					class={classNames(
+						'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4',
+						$selectedId === `${module.id}-branch-${branchIndex}`
+							? 'outline outline-offset-1 outline-2  outline-slate-900'
+							: ''
+					)}
+				>
+					<Icon data={faCodeBranch} class="mr-2" />
+					<span
+						class="text-xs flex flex-row justify-between w-full flex-wrap gap-2 items-center truncate"
+					>
+						{branch.summary || `Branch ${branchIndex}`}
+
+						<Button
+							iconOnly
+							size="xs"
+							startIcon={{ icon: faTrashAlt }}
+							color="light"
+							variant="border"
+							on:click={() => removeBranch(branchIndex)}
+						/>
+					</span>
+				</div>
+
+				<div>
+					<FlowModuleSchemaMap bind:modules={branch.modules} color="indigo" />
+				</div>
+			{/each}
+			<div class="overflow-clip">
+				<Button
+					btnClasses=""
+					size="xs"
+					color="dark"
+					startIcon={{ icon: faCodeBranch }}
+					on:click={() => addBranch()}
+				>
+					Add branch
+				</Button>
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        module: FlowModule;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowBranchOneMapProps = typeof __propDef.props;
+export declare type FlowBranchOneMapEvents = typeof __propDef.events;
+export declare type FlowBranchOneMapSlots = typeof __propDef.slots;
+export default class FlowBranchOneMap extends SvelteComponentTyped<FlowBranchOneMapProps, FlowBranchOneMapEvents, FlowBranchOneMapSlots> {
+}
+export {};

package/components/flows/map/FlowErrorHandlerItem.svelte

@@ -1,11 +1,11 @@
 <script>import { getContext } from 'svelte';
 import Icon from 'svelte-awesome';
 import { faBug } from '@fortawesome/free-solid-svg-icons';
-import { NEVER_TESTED_THIS_FAR } from '../flowStateUtils';
-import { classNames, emptyModule, emptySchema } from '../../../utils';
+import { classNames, emptySchema } from '../../../utils';
 import { flowStateStore } from '../flowState';
 import Toggle from '../../Toggle.svelte';
 import { flowStore } from '../flowStore';
+import { NEVER_TESTED_THIS_FAR } from '../utils';
 const { select, selectedId } = getContext('FlowEditorContext');
 function onToggle() {
     if ($flowStore.value.failure_module) {
@@ -16,16 +16,19 @@ function onToggle() {
     else {
         const failureModule = {
             schema: emptySchema(),
-            previewResult: NEVER_TESTED_THIS_FAR,
-            childFlowModules: []
+            previewResult: NEVER_TESTED_THIS_FAR
+        };
+        $flowStateStore['failure'] = failureModule;
+        $flowStore.value.failure_module = {
+            id: 'failure',
+            value: { type: 'identity' }
         };
-        $flowStateStore.failureModule = failureModule;
-        $flowStore.value.failure_module = emptyModule();
         select('failure');
     }
 }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	on:click={() => {
 		if ($flowStore.value.failure_module) {
@@ -35,7 +38,7 @@ function onToggle() {
 		}
 	}}
 	class={classNames(
-		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col overflow-x-hidden',
+		'border rounded-md p-2 bg-white text-sm cursor-pointer mt-4 flex flex-col overflow-x-hidden  bottom-0 z-10 sticky',
 		$selectedId.includes('failure') ? 'outline outline-offset-1 outline-2 outline-slate-900' : ''
 	)}
 >
@@ -49,12 +52,12 @@ function onToggle() {
 
 	<div class="w-full truncate block">
 		{#if Boolean($flowStore.value.failure_module)}
-			<span
-				>{$flowStore.value.failure_module?.summary ||
+			<span>
+				{$flowStore.value.failure_module?.summary ||
 					($flowStore.value.failure_module?.value.type === 'rawscript'
 						? `Inline ${$flowStore.value.failure_module?.value.language}`
-						: 'Select a script')}</span
-			>
+						: 'Select a script')}
+			</span>
 		{/if}
 	</div>
 </div>

package/components/flows/map/FlowInputsItem.svelte

@@ -0,0 +1,19 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import Icon from 'svelte-awesome';
+import { faPen } from '@fortawesome/free-solid-svg-icons';
+const { select, selectedId } = getContext('FlowEditorContext');
+</script>
+
+<FlowModuleSchemaItem
+	on:click={() => select('inputs')}
+	isFirst
+	hasLine
+	selected={$selectedId === 'inputs'}
+	bold
+	label="Flow Input"
+>
+	<div slot="icon">
+		<Icon data={faPen} scale={0.8} />
+	</div>
+</FlowModuleSchemaItem>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowInputsItemProps = typeof __propDef.props;
+export declare type FlowInputsItemEvents = typeof __propDef.events;
+export declare type FlowInputsItemSlots = typeof __propDef.slots;
+export default class FlowInputsItem extends SvelteComponentTyped<FlowInputsItemProps, FlowInputsItemEvents, FlowInputsItemSlots> {
+}
+export {};

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,4 +1,5 @@
-<script>import Button from '../../common/button/Button.svelte';
+<script>import Badge from '../../common/badge/Badge.svelte';
+import Button from '../../common/button/Button.svelte';
 import { classNames } from '../../../utils';
 import { faBed, faRepeat, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
@@ -12,14 +13,18 @@ export let deletable = false;
 export let retry = false;
 export let earlyStop = false;
 export let suspend = false;
+export let bold = false;
+export let id = undefined;
+export let label;
 const margin = isLast ? '' : isFirst ? 'mb-0.5' : 'my-0.5';
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="flex" on:click>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="flex relative" on:click>
 	<div
 		class={classNames(
-			'flex  mr-2 w-8 ',
+			'flex mr-2 ml-0.5',
 			hasLine ? 'line' : '',
 			isFirst ? 'justify-center items-start' : 'justify-center items-center'
 		)}
@@ -27,48 +32,60 @@ const dispatch = createEventDispatcher();
 		<div
 			class={classNames(
 				'flex justify-center items-center w-6 h-6 border rounded-full text-xs font-bold',
-				color === 'blue' ? 'bg-blue-100 text-blue-400' : 'bg-orange-100 text-orange-400',
-				margin
+				color === 'blue'
+					? 'bg-blue-200 text-blue-800'
+					: color === 'orange'
+					? 'bg-orange-200 text-orange-800'
+					: 'bg-blue-100 text-blue-600',
+				''
 			)}
 		>
 			<slot name="icon" />
 		</div>
 	</div>
-	<div class="relative w-full">
-		<div class="absolute text-sm right-14 -bottom-3 flex flex-row gap-1"
-			>{#if retry}
-				<div class="bg-white rounded border text-gray-600 px-1"
-					><Icon scale={0.8} data={faRepeat} /></div
-				>
-			{/if}{#if earlyStop}
-				<div class="bg-white rounded border text-gray-600 px-1"
-					><Icon scale={0.8} data={faStop} /></div
-				>
+	<div
+		class={classNames(
+			'w-full flex overflow-hidden rounded-sm cursor-pointer',
+			selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
+			margin
+		)}
+	>
+		<div class="absolute text-sm right-14 -bottom-3 flex flex-row gap-1">
+			{#if retry}
+				<div class="bg-white rounded border text-gray-600 px-1">
+					<Icon scale={0.8} data={faRepeat} />
+				</div>
+			{/if}
+			{#if earlyStop}
+				<div class="bg-white rounded border text-gray-600 px-1">
+					<Icon scale={0.8} data={faStop} />
+				</div>
 			{/if}
 			{#if suspend}
-				<div class="bg-white rounded border text-gray-600 px-1"
-					><Icon scale={0.8} data={faBed} /></div
-				>
-			{/if}</div
-		>
+				<div class="bg-white rounded border text-gray-600 px-1">
+					<Icon scale={0.8} data={faBed} />
+				</div>
+			{/if}
+		</div>
 		<div
-			class={classNames(
-				'border  w-full rounded-sm p-2 bg-white text-sm cursor-pointer flex justify-between items-center space-x-2 overflow-hidden',
-				margin,
-				selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : ''
-			)}
+			class="flex justify-between items-center w-full overflow-hidden border p-2 bg-white text-sm"
 		>
-			<slot name="content" class="w-full" />
-			{#if deletable}
-				<Button
-					on:click={(event) => dispatch('delete', { event })}
-					startIcon={{ icon: faTrashAlt }}
-					iconOnly={true}
-					color="light"
-					variant="border"
-					size="xs"
-				/>
-			{/if}
+			<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
+			<div class="flex items-center space-x-2">
+				{#if id}
+					<Badge color="indigo">{id}</Badge>
+				{/if}
+				{#if deletable}
+					<Button
+						on:click={(event) => dispatch('delete', event)}
+						startIcon={{ icon: faTrashAlt, classes: 'text-gray-500' }}
+						iconOnly={true}
+						color="light"
+						variant="border"
+						size="xs"
+					/>
+				{/if}
+			</div>
 		</div>
 	</div>
 </div>