windmill-components 1.56.2 → 1.57.1

package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -2,7 +2,6 @@
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { staticValues } from '../componentsPanel/componentStaticValues';
 import SubTypeEditor from './SubTypeEditor.svelte';
-export let canHide = false;
 export let componentInput;
 function addElementByType() {
     if (componentInput.subFieldType && componentInput.value) {
@@ -40,16 +39,17 @@ function deleteElementByType(index) {
 <div class="flex gap-2 flex-col mt-2">
 	{#if componentInput.value}
 		{#each componentInput.value as value, index (index)}
-			<div class="flex flex-row gap-2 items-center">
-				<SubTypeEditor bind:componentInput bind:value {canHide} />
+			<div class="flex flex-row gap-2 items-center relative">
+				<SubTypeEditor bind:componentInput bind:value />
 
-				<div>
+				<div class="absolute top-4 right-4">
 					<Button
 						size="xs"
 						color="light"
 						variant="border"
 						on:click={() => deleteElementByType(index)}
 						iconOnly
+						btnClasses="!text-red-500"
 						startIcon={{ icon: faTrashAlt }}
 					/>
 				</div>

package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte.d.ts

@@ -1,54 +1,44 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        canHide?: boolean | undefined;
         componentInput: (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
-            defaultValue: string[];
             subFieldType?: "text" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
-            defaultValue: string[];
             subFieldType?: "textarea" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<number[]> & {
             fieldType: "array";
-            defaultValue: number[];
             subFieldType?: "number" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<boolean[]> & {
             fieldType: "array";
-            defaultValue: boolean[];
             subFieldType?: "boolean" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
-            defaultValue: string[];
             subFieldType?: "date" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
-            defaultValue: string[];
             subFieldType?: "time" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
-            defaultValue: string[];
             subFieldType?: "datetime" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<object[]> & {
             fieldType: "array";
-            defaultValue: object[];
             subFieldType?: "object" | undefined;
             format?: string | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
-            defaultValue: string[];
             subFieldType?: "select" | undefined;
             format?: string | undefined;
         } & {
-            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions";
+            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions";
         });
     };
     events: {

package/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte

@@ -1,43 +1,61 @@
 <script>import { ToggleButton, ToggleButtonGroup } from '../../../common';
 import { faArrowRight, faCode, faPen } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
 export let componentInput;
 export let disableStatic = false;
-$: if (componentInput.fieldType == 'textarea' && componentInput.type == 'static') {
+const { onchange } = getContext('AppEditorContext');
+$: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
     //@ts-ignore
     componentInput.type = 'template';
+    componentInput['eval'] = componentInput.value;
 }
 const brackets = '${}';
+let clientWidth;
 </script>
 
 {#if componentInput.fieldType !== 'any'}
-	<div class="w-full">
-		<ToggleButtonGroup bind:selected={componentInput.type}>
-			{#if componentInput.fieldType === 'textarea'}
+	<div class="w-full overflow-x-auto" bind:clientWidth>
+		<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
+			{#if componentInput.fieldType === 'template'}
 				<ToggleButton position="left" value="template" size="xs" disable={disableStatic}>
-					{brackets} Templatable
+					{brackets}&nbsp;<span class="hidden lg:block">Template</span>
 				</ToggleButton>
 			{:else}
 				<ToggleButton
+					title="Static"
 					position="left"
 					value="static"
 					startIcon={{ icon: faPen }}
 					size="xs"
 					disable={disableStatic}
 				>
-					Static
+					{#if clientWidth > 250}
+						<span class="hidden lg:block">Static</span>
+					{/if}
 				</ToggleButton>
 			{/if}
 
 			<ToggleButton
+				title="Connect"
 				value="connected"
 				position="center"
 				startIcon={{ icon: faArrowRight }}
 				size="xs"
 			>
-				Connected
+				{#if clientWidth > 250}
+					<span class="hidden lg:block">Connect</span>
+				{/if}
 			</ToggleButton>
-			<ToggleButton position="right" value="runnable" startIcon={{ icon: faCode }} size="xs">
-				Computed
+			<ToggleButton
+				title="Compute"
+				position="right"
+				value="runnable"
+				startIcon={{ icon: faCode }}
+				size="xs"
+			>
+				{#if clientWidth > 250}
+					<span class="hidden lg:block">Compute</span>
+				{/if}
 			</ToggleButton>
 		</ToggleButtonGroup>
 	</div>

package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -15,11 +15,12 @@ import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 import AlignmentEditor from './AlignmentEditor.svelte';
 import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
 import TemplateEditor from '../../../TemplateEditor.svelte';
-import { Alert } from '../../../common';
 export let component;
 export let onDelete = undefined;
-const { app, staticOutputs, runnableComponents, worldStore } = getContext('AppEditorContext');
+export let rowColumns = false;
+const { app, staticOutputs, runnableComponents, selectedComponent, worldStore } = getContext('AppEditorContext');
 function removeGridElement() {
+    $selectedComponent = undefined;
     if (onDelete && component) {
         delete $staticOutputs[component.id];
         $staticOutputs = $staticOutputs;
@@ -71,12 +72,21 @@ $: extraLib =
 </script>
 
 {#if component}
-	<div class="flex flex-col w-full divide-y">
+	<div class="flex flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
 			<PanelSection
-				title={component.componentInput.fieldType === 'any' ? 'Runnable' : 'Component input'}
+				smallPadding
+				title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}
 			>
 				<svelte:fragment slot="action">
+					<span
+						class={classNames(
+							'text-white px-2 text-2xs py-0.5 font-bold rounded-sm w-fit',
+							'bg-indigo-500'
+						)}
+					>
+						{`${component.id}`}
+					</span>
 					{#if component.componentInput.fieldType !== 'any'}
 						<Badge color="blue">
 							{component.componentInput.fieldType === 'array' &&
@@ -86,31 +96,15 @@ $: extraLib =
 						</Badge>
 					{/if}
 				</svelte:fragment>
-				<span
-					class={classNames(
-						'text-white px-2 text-2xs py-0.5 font-bold rounded-sm w-fit',
-						'bg-indigo-500'
-					)}
-				>
-					{`Selected component: ${component.id}`}
-				</span>
 
 				<ComponentInputTypeEditor bind:componentInput={component.componentInput} />
 
-				{#if onDelete}
-					<div class="w-full">
-						<Alert title="Special arguments" size="xs">
-							The row and the rowIndex are passed as arguments to the runnable.
-						</Alert>
-					</div>
-				{/if}
-
 				<div class="flex flex-col w-full gap-2 my-2">
 					{#if component.componentInput.type === 'static'}
 						<StaticInputEditor bind:componentInput={component.componentInput} />
 					{:else if component.componentInput.type === 'template' && component.componentInput !== undefined}
-						<div class="py-1 rounded border border-1 border-gray-500">
-							<TemplateEditor bind:code={component.componentInput.eval} {extraLib} />
+						<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
+							<TemplateEditor fontSize={12} bind:code={component.componentInput.eval} {extraLib} />
 						</div>
 					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
 						<ConnectedInputEditor bind:componentInput={component.componentInput} />
@@ -122,7 +116,7 @@ $: extraLib =
 					<div class="border w-full">
 						<PanelSection
 							smallPadding
-							title={`Runnable inputs (${
+							title={`Runnable Inputs (${
 								Object.keys(component.componentInput.fields ?? {}).length
 							})`}
 						>
@@ -137,6 +131,7 @@ $: extraLib =
 								shouldCapitalize={false}
 								bind:inputSpecs={component.componentInput.fields}
 								userInputEnabled={component.type !== 'buttoncomponent'}
+								{rowColumns}
 							/>
 						</PanelSection>
 					</div>
@@ -151,7 +146,7 @@ $: extraLib =
 		{/if}
 
 		{#if component.type === 'tablecomponent' && Array.isArray(component.actionButtons)}
-			<TableActions bind:components={component.actionButtons} />
+			<TableActions id={component.id} bind:components={component.actionButtons} />
 		{/if}
 
 		<AlignmentEditor bind:component />

package/components/apps/editor/settingsPanel/ComponentPanel.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
     props: {
         component: AppComponent | undefined;
         onDelete?: (() => void) | undefined;
+        rowColumns?: boolean | undefined;
         buildExtraLib?: ((components: Record<string, Record<string, Output<any>>>) => string) | undefined;
     };
     events: {

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -1,11 +1,18 @@
-<script>import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+<script>import Toggle from '../../../Toggle.svelte';
+import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
+import RowInputEditor from './inputEditor/RowInputEditor.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 export let componentInput;
-export let canHide = false;
 </script>
 
-{#if componentInput.type === 'static'}
-	<StaticInputEditor bind:componentInput {canHide} />
-{:else if componentInput.type === 'connected'}
+{#if componentInput.type === 'connected'}
 	<ConnectedInputEditor bind:componentInput />
+{:else if componentInput.type === 'row'}
+	<RowInputEditor bind:componentInput />
+{:else if componentInput.type === 'static'}
+	<StaticInputEditor bind:componentInput />
+{:else if componentInput.type === 'user'}
+	<span class="text-2xs italic text-gray-6f00"
+		>Field's value is set by the user in the visible field</span
+	>
 {/if}

package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput;
-        canHide?: boolean | undefined;
+        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte

@@ -1,68 +1,94 @@
 <script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
 import { capitalize } from '../../../../utils';
-import { faArrowRight, faPen, faUser } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faPen, faTableCells, faUser } from '@fortawesome/free-solid-svg-icons';
 import { fieldTypeToTsType } from '../../utils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
+import { getContext } from 'svelte';
 export let inputSpecs;
 export let userInputEnabled = true;
 export let staticOnly = false;
 export let shouldCapitalize = true;
+export let rowColumns = false;
+const { connectingInput } = getContext('AppEditorContext');
 </script>
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(inputSpecs) as inputSpecKey, index (index)}
+		{#each Object.keys(inputSpecs) as inputSpecKey (inputSpecKey)}
 			{@const input = inputSpecs[inputSpecKey]}
-			{#if true}
-				<div class="flex flex-col gap-2">
-					<div class="flex justify-between items-center gap-1">
-						<span class="text-xs font-semibold">
-							{shouldCapitalize ? capitalize(inputSpecKey) : inputSpecKey}
-						</span>
+			<div class="flex flex-col gap-1">
+				<div class="flex justify-between items-end gap-1">
+					<span class="text-sm font-semibold truncate">
+						{shouldCapitalize ? capitalize(inputSpecKey) : inputSpecKey}
+					</span>
 
-						<div class="flex gap-2 items-center">
-							<Badge color="blue">
-								{input.fieldType === 'array' && input.subFieldType
-									? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
-									: capitalize(fieldTypeToTsType(input.fieldType))}
-							</Badge>
+					<div class="flex gap-2 flex-wrap items-center">
+						<Badge color="blue">
+							{input.fieldType === 'array' && input.subFieldType
+								? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
+								: capitalize(fieldTypeToTsType(input.fieldType))}
+						</Badge>
 
-							<ToggleButtonGroup bind:selected={inputSpecs[inputSpecKey].type}>
+						{#if !inputSpecs[inputSpecKey].onlyStatic}
+							<ToggleButtonGroup
+								bind:selected={inputSpecs[inputSpecKey].type}
+								on:selected={(e) => {
+									console.log(inputSpecs[inputSpecKey])
+									if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
+										$connectingInput = {
+											opened: true,
+											input: undefined,
+											hoveredComponent: undefined
+										}
+									}
+								}}
+							>
 								<ToggleButton
+									title="Static"
 									position="left"
 									value="static"
 									startIcon={{ icon: faPen }}
 									size="xs"
 									iconOnly
 								/>
-								<ToggleButton
-									position={userInputEnabled && input.format === undefined ? 'center' : 'right'}
-									value="connected"
-									startIcon={{ icon: faArrowRight }}
-									size="xs"
-									iconOnly
-									disabled={staticOnly}
-								/>
-								{#if userInputEnabled && input.format === undefined}
+								{#if rowColumns}
 									<ToggleButton
-										position="right"
+										title="From Row"
+										position="center"
+										value="row"
+										startIcon={{ icon: faTableCells }}
+										size="xs"
+										iconOnly
+										disabled={staticOnly}
+									/>
+								{/if}
+								{#if userInputEnabled && (!input.format?.startsWith('resource-') || true)}
+									<ToggleButton
+										title="User Input"
+										position="center"
 										value="user"
 										startIcon={{ icon: faUser }}
 										size="xs"
 										iconOnly
-										disabled={staticOnly && !userInputEnabled}
+										disabled={staticOnly}
 									/>
 								{/if}
+								<ToggleButton
+									title="Connect"
+									position="right"
+									value="connected"
+									startIcon={{ icon: faArrowRight }}
+									size="xs"
+									iconOnly
+									disabled={staticOnly}
+								/>
 							</ToggleButtonGroup>
-						</div>
+						{/if}
 					</div>
-
-					<InputsSpecEditor
-						bind:componentInput={inputSpecs[inputSpecKey]}
-						canHide={userInputEnabled && input.format === undefined}
-					/>
 				</div>
-			{/if}
+
+				<InputsSpecEditor bind:componentInput={inputSpecs[inputSpecKey]} />
+			</div>
 		{/each}
 	</div>
 {:else}

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
-        inputSpecs: Record<string, StaticAppInput | ConnectedAppInput | UserAppInput>;
+        inputSpecs: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput) & {
+            onlyStatic?: boolean;
+        }>;
         userInputEnabled?: boolean | undefined;
         staticOnly?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
+        rowColumns?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/Recompute.svelte

@@ -14,7 +14,7 @@ function onChange(event, id) {
 }
 </script>
 
-<PanelSection title="Recompute">
+<PanelSection title="Recompute after this compute">
 	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
 		<table class="divide-y divide-gray-300 border w-full">
 			<thead class="bg-gray-50">
@@ -31,7 +31,7 @@ function onChange(event, id) {
 				{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
 					<tr>
 						<td class="whitespace-nowrap px-4 py-2 text-xs">
-							<Badge color="blue">{id}</Badge>
+							<Badge color="dark-indigo">{id}</Badge>
 						</td>
 						<td class="relative whitespace-nowrap px-4 py-2 ">
 							<input

package/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -1,7 +1,10 @@
 <script>import Button from '../../../common/button/Button.svelte';
+import Tooltip from '../../../Tooltip.svelte';
 import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
 import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
+const { app } = getContext('AppEditorContext');
 export let appInput;
 let inlineScriptEditorDrawer;
 function edit() {
@@ -9,6 +12,16 @@ function edit() {
         inlineScriptEditorDrawer?.openDrawer();
     }
 }
+function detach() {
+    if (appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript) {
+        $app.unusedInlineScripts.push({
+            name: appInput.runnable.name,
+            inlineScript: appInput.runnable.inlineScript
+        });
+        $app = $app;
+        appInput = clearResultAppInput(appInput);
+    }
+}
 function clear() {
     appInput = clearResultAppInput(appInput);
 }
@@ -20,19 +33,24 @@ function clear() {
 		bind:inlineScript={appInput.runnable.inlineScript}
 	/>
 {/if}
-<div class="flex justify-between w-full items-center gap-1">
-	<span class="text-xs font-semibold">
+<div class="flex flex-col xl:flex-row justify-between w-full flex-wrap items-center gap-1">
+	<span class="text-xs font-semibold truncate">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
 		{:else if appInput.runnable?.type === 'runnableByPath'}
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex flex-wrap gap-1">
+	<div class="flex gap-1 flex-wrap justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
 			<Button size="xs" color="light" variant="border" startIcon={{ icon: faEdit }} on:click={edit}>
 				Edit
 			</Button>
+			<Button size="xs" color="light" variant="border" on:click={detach}
+				>Detach <Tooltip
+					>Detaching an inline script keep it for later to be reused by another component</Tooltip
+				></Button
+			>
 		{/if}
 		<Button size="xs" color="red" variant="border" startIcon={{ icon: faClose }} on:click={clear}>
 			Clear

package/components/apps/editor/settingsPanel/SubTypeEditor.svelte

@@ -1,11 +1,9 @@
 <script>import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 export let value;
-export let canHide = false;
 export let componentInput;
 let fakeComponentInput = {
     ...componentInput,
     value,
-    visible: componentInput.visible,
     // We don't support array of arrays
     // @ts-ignore
     fieldType: componentInput.subFieldType
@@ -14,4 +12,4 @@ let fakeComponentInput = {
 $: fakeComponentInput && (value = fakeComponentInput.value);
 </script>
 
-<StaticInputEditor bind:componentInput={fakeComponentInput} {canHide} />
+<StaticInputEditor bind:componentInput={fakeComponentInput} />

package/components/apps/editor/settingsPanel/SubTypeEditor.svelte.d.ts

@@ -3,7 +3,6 @@ import type { StaticAppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         value: any;
-        canHide?: boolean | undefined;
         componentInput: StaticAppInput;
     };
     events: {

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -2,41 +2,36 @@
 import Button from '../../../common/button/Button.svelte';
 import { getNextId } from '../../../flows/flowStateUtils';
 import { classNames } from '../../../../utils';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
+import { Icon } from 'svelte-awesome';
 import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
 export let components;
-const { app, selectedComponent } = getContext('AppEditorContext');
+export let id;
+const { selectedComponent, staticOutputs } = getContext('AppEditorContext');
 function addComponent() {
-    const grid = $app.grid ?? [];
-    const id = getNextId(grid.map((gridItem) => gridItem.data.id));
+    const actionId = getNextId(components.map((x) => x.id.split('-')[1]));
     const newComponent = {
-        id,
+        id: `${id}-${actionId}`,
         type: 'buttoncomponent',
         configuration: {
             label: {
                 type: 'static',
-                visible: true,
                 value: 'Action',
-                fieldType: 'textarea',
-                defaultValue: 'Action'
+                fieldType: 'text'
             },
             color: {
                 fieldType: 'select',
                 type: 'static',
-                visible: true,
                 value: 'dark',
-                optionValuesKey: 'buttonColorOptions',
-                defaultValue: 'dark'
+                optionValuesKey: 'buttonColorOptions'
             },
             size: {
                 fieldType: 'select',
                 type: 'static',
-                visible: true,
                 value: 'xs',
-                optionValuesKey: 'buttonSizeOptions',
-                defaultValue: 'xs'
+                optionValuesKey: 'buttonSizeOptions'
             }
         },
         componentInput: {
@@ -44,13 +39,19 @@ function addComponent() {
             fieldType: 'any',
             fields: {},
             runnable: undefined,
-            defaultValue: undefined
+            value: undefined
         },
         recomputeIds: undefined,
         card: false
     };
     components = [...components, newComponent];
 }
+function deleteComponent(cid) {
+    components = components.filter((x) => x.id !== cid);
+    delete $staticOutputs[cid];
+    $staticOutputs = $staticOutputs;
+    $selectedComponent = id;
+}
 </script>
 
 <PanelSection title={`Table actions ${components.length > 0 ? `(${components.length})` : ''}`}>
@@ -65,10 +66,13 @@ function addComponent() {
 		/>
 	</svelte:fragment>
 
+	{#if components.length == 0}
+		<span class="text-xs text-gray-500">No action buttons</span>
+	{/if}
 	{#each components as component}
 		<div
 			class={classNames(
-				'w-full text-xs font-bold py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+				'w-full text-xs font-bold gap-1 py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
 				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
@@ -77,11 +81,16 @@ function addComponent() {
 			}}
 			on:keypress
 		>
+			<div>
+				<Button variant="border" color="red" on:click={() => deleteComponent(component.id)}>
+					<Icon class="h-3" data={faTrashAlt} />
+				</Button>
+			</div>
 			<div>
 				<TableActionLabel componentInput={component.configuration.label} />
 			</div>
-			<Badge color="dark-blue">
-				Component: {component.id}
+			<Badge color="dark-indigo">
+				{component.id}
 			</Badge>
 		</div>
 	{/each}

package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts

@@ -3,6 +3,7 @@ import type { ButtonComponent, BaseAppComponent } from '../../types';
 declare const __propDef: {
     props: {
         components: (BaseAppComponent & ButtonComponent)[];
+        id: string;
     };
     events: {
         keypress: KeyboardEvent;