windmill-components 1.89.1 → 1.103.0

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

@@ -16,7 +16,12 @@ let clientWidth;
 {#if componentInput.fieldType !== 'any'}
 	<div class="w-full">
 		<div class="mx-auto" bind:clientWidth>
-			<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
+			<ToggleButtonGroup
+				on:selected={() => {
+					onchange?.()
+				}}
+				bind:selected={componentInput.type}
+			>
 				{#if componentInput.fieldType === 'template'}
 					<ToggleButton
 						tooltip={`Templated string (use \$\{<output>.x\} )`}
@@ -35,15 +40,8 @@ let clientWidth;
 					/>
 				{/if}
 
+				<ToggleButton value="connected" icon={Plug2} iconOnly={clientWidth < 250} label="Connect" />
 				<ToggleButton
-					tooltip="Connect to an output"
-					value="connected"
-					icon={Plug2}
-					iconOnly={clientWidth < 250}
-					label="Connect"
-				/>
-				<ToggleButton
-					tooltip="Compute it with a script/flow"
 					value="runnable"
 					icon={FunctionSquare}
 					iconOnly={clientWidth < 250}

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

@@ -14,7 +14,7 @@ import ComponentInputTypeEditor from './ComponentInputTypeEditor.svelte';
 import AlignmentEditor from './AlignmentEditor.svelte';
 import RunnableInputEditor from './inputEditor/RunnableInputEditor.svelte';
 import TemplateEditor from '../../../TemplateEditor.svelte';
-import { COMPONENT_SETS, ccomponents } from '../component';
+import { ccomponents } from '../component';
 import CssProperty from '../componentsPanel/CssProperty.svelte';
 import GridTab from './GridTab.svelte';
 import { clearErrorByComponentId, clearJobsByComponentId, deleteGridItem } from '../appUtils';
@@ -25,17 +25,27 @@ import Kbd from '../../../common/kbd/Kbd.svelte';
 import { secondaryMenu } from './secondaryMenu';
 import StylePanel from './StylePanel.svelte';
 import { Delete } from 'lucide-svelte';
+import GridCondition from './GridCondition.svelte';
+import { isTriggerable } from './script/utils';
 export let componentSettings = undefined;
 export let rowColumns = false;
 export let onDelete = undefined;
 export let noGrid = false;
 export let duplicateMoveAllowed = true;
 let editor = undefined;
-const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state, errorByComponent, jobs } = getContext('AppViewerContext');
+const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state, errorByComponent, jobs, componentControl } = getContext('AppViewerContext');
 const { history, ontextfocus, movingcomponents } = getContext('AppEditorContext');
 $: editor && ($ontextfocus = () => editor?.focus());
 function removeGridElement() {
     push(history, $app);
+    const id = componentSettings?.item?.id;
+    const onDeleteComponentControl = id ? $componentControl[id]?.onDelete : undefined;
+    if (onDeleteComponentControl) {
+        onDeleteComponentControl();
+    }
+    if (onDelete) {
+        onDelete();
+    }
     if (componentSettings?.item.id) {
         delete $worldStore.outputsById[componentSettings?.item.id];
         $errorByComponent = clearErrorByComponentId(componentSettings?.item.id, $errorByComponent);
@@ -79,7 +89,7 @@ const componentInput = componentSettings?.item?.data?.type
     : undefined;
 $: componentSettings?.item?.data && ($app = $app);
 const hasInteraction = componentSettings?.item.data.type
-    ? COMPONENT_SETS[1].components.includes(componentSettings?.item.data.type)
+    ? isTriggerable(componentSettings?.item.data.type)
     : false;
 </script>
 
@@ -89,7 +99,13 @@ const hasInteraction = componentSettings?.item.data.type
 	{@const component = componentSettings.item.data}
 	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
-			<PanelSection title={hasInteraction ? 'Event handler' : 'Data source'}>
+			<PanelSection
+				title={componentSettings?.item.data.type == 'steppercomponent'
+					? 'Validations'
+					: hasInteraction
+					? 'Event handler'
+					: 'Data source'}
+			>
 				<svelte:fragment slot="action">
 					<span
 						class={classNames(
@@ -149,8 +165,8 @@ const hasInteraction = componentSettings?.item.data.type
 								>
 									<svelte:fragment slot="action">
 										<Tooltip>
-											The runnable inputs of a button component are not settable by the user. They
-											must be defined statically or connected.
+											The runnable inputs are inferred from the inputs of the flow or script
+											parameters this component is attached to.
 										</Tooltip>
 									</svelte:fragment>
 
@@ -187,14 +203,33 @@ const hasInteraction = componentSettings?.item.data.type
 		{/if}
 
 		{#if componentSettings.item.data.type === 'tabscomponent'}
-			<GridTab bind:tabs={componentSettings.item.data.tabs} {component} />
+			<GridTab
+				bind:tabs={componentSettings.item.data.tabs}
+				bind:disabledTabs={componentSettings.item.data.disabledTabs}
+				bind:component={componentSettings.item.data}
+				canDisableTabs
+			/>
+		{:else if componentSettings.item.data.type === 'steppercomponent'}
+			<GridTab
+				bind:tabs={componentSettings.item.data.tabs}
+				bind:component={componentSettings.item.data}
+				word="Step"
+			/>
+		{:else if componentSettings.item.data.type === 'conditionalwrapper'}
+			<GridCondition
+				bind:conditions={componentSettings.item.data.conditions}
+				bind:component={componentSettings.item.data}
+			/>
 		{:else if componentSettings.item.data.type === 'verticalsplitpanescomponent' || componentSettings.item.data.type === 'horizontalsplitpanescomponent'}
-			<GridPane bind:panes={componentSettings.item.data.panes} {component} />
+			<GridPane
+				bind:panes={componentSettings.item.data.panes}
+				bind:component={componentSettings.item.data}
+			/>
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
 		{/if}
 
-		{#if componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent'}
+		{#if (`recomputeIds` in componentSettings.item.data && Array.isArray(componentSettings.item.data.recomputeIds)) || componentSettings.item.data.type === 'buttoncomponent' || componentSettings.item.data.type === 'formcomponent' || componentSettings.item.data.type === 'formbuttoncomponent' || componentSettings.item.data.type === 'checkboxcomponent'}
 			<Recompute
 				bind:recomputeIds={componentSettings.item.data.recomputeIds}
 				ownId={component.id}
@@ -203,8 +238,6 @@ const hasInteraction = componentSettings?.item.data.type
 
 		<div class="grow shrink" />
 
-		<AlignmentEditor bind:component={componentSettings.item.data} />
-
 		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
 			<PanelSection title="Styling">
 				<div slot="action" class="flex justify-end flex-wrap gap-1">
@@ -226,6 +259,7 @@ const hasInteraction = componentSettings?.item.data.type
 						Rich Editor
 					</Button>
 				</div>
+				<AlignmentEditor bind:component={componentSettings.item.data} />
 				{#if viewCssOptions}
 					<div transition:slide|local class="w-full">
 						{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
@@ -234,6 +268,7 @@ const hasInteraction = componentSettings?.item.data.type
 									<CssProperty
 										forceStyle={ccomponents[component.type].customCss[name].style != undefined}
 										forceClass={ccomponents[component.type].customCss[name].class != undefined}
+										tooltip={ccomponents[component.type].customCss[name].tooltip}
 										{name}
 										bind:value={componentSettings.item.data.customCss[name]}
 									/>

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

@@ -0,0 +1,181 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import PanelSection from './common/PanelSection.svelte';
+import { dndzone } from 'svelte-dnd-action';
+import { GripVertical, X } from 'lucide-svelte';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+import { generateRandomString } from '../../../../utils';
+import Alert from '../../../common/alert/Alert.svelte';
+import { twMerge } from 'tailwind-merge';
+import { getContext, tick } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+export let conditions = [];
+export let component;
+let dragDisabled = true;
+let items = conditions.map((condition, index) => {
+    return { value: condition, id: generateRandomString(), originalIndex: index };
+});
+$: conditions = items.map((item) => item.value);
+const { app, runnableComponents, componentControl } = getContext('AppViewerContext');
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+    // if the originalIndex are not in order, we should swap the subgrids
+    if (items.some((item, index) => item.originalIndex !== index)) {
+        const newSubgrids = {};
+        for (let i = 0; i < items.length; i++) {
+            newSubgrids[`${component.id}-${i}`] =
+                $app.subgrids[`${component.id}-${items[i].originalIndex}`] ?? [];
+        }
+        // update originalIndex
+        items.forEach((item, i) => {
+            item.originalIndex = i;
+        });
+        $app.subgrids = {
+            ...$app.subgrids,
+            ...newSubgrids
+        };
+        $app = $app;
+        tick().then(() => {
+            const targetIndex = items.findIndex((i) => i.id === e.detail.info.id);
+            $componentControl[component.id]?.setTab?.(targetIndex);
+        });
+    }
+    dragDisabled = true;
+}
+function startDrag(event) {
+    event.preventDefault();
+    dragDisabled = false;
+}
+function handleKeyDown(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && dragDisabled) {
+        dragDisabled = false;
+    }
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid, false);
+        for (const key in components) {
+            delete $runnableComponents[key];
+        }
+    }
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < items.length - 1; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    items.splice(index, 1);
+    items = [...items];
+    component.numberOfSubgrids = items.length;
+}
+function addCondition() {
+    const numberOfConditions = items.length;
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    const lastSubgrid = JSON.parse(JSON.stringify($app.subgrids[`${component.id}-${numberOfConditions - 1}`]));
+    $app.subgrids[`${component.id}-${numberOfConditions - 1}`] = [];
+    $app.subgrids[`${component.id}-${numberOfConditions}`] = lastSubgrid;
+    component.numberOfSubgrids = items.length;
+    const newCondition = {
+        type: 'eval',
+        expr: 'false',
+        fieldType: 'boolean'
+    };
+    items.splice(conditions.length - 1, 0, {
+        value: newCondition,
+        id: generateRandomString(),
+        originalIndex: items.length - 1
+    });
+    component.numberOfSubgrids = items.length;
+}
+</script>
+
+<PanelSection title={'Conditions'}>
+	<Alert title="Evaluation" size="xs">
+		Conditions are evaluated in order. The first condition that evaluates to true will render its
+		subgrid.
+	</Alert>
+	{#if items.length == 0}
+		<span class="text-xs text-gray-500">No Tabs</span>
+	{/if}
+	<div class="w-full flex flex-col mt-2">
+		<section
+			use:dndzone={{
+				items: items,
+				flipDurationMs: 200,
+				dropTargetStyle: {}
+			}}
+			on:consider={handleConsider}
+			on:finalize={handleFinalize}
+		>
+			{#each items as item, index (item.id)}
+				{#if index < items.length - 1}
+					{@const condition = item.value}
+					<div class="w-full flex flex-row gap-2 items-center relative">
+						<div class={twMerge('grow border p-3 my-2 rounded-md border-gray-200 bg-white')}>
+							<InputsSpecEditor
+								key={`Condition ${index + 1}`}
+								bind:componentInput={item.value}
+								id={component.id}
+								userInputEnabled={false}
+								shouldCapitalize={true}
+								resourceOnly={false}
+								hasRows={false}
+								fieldType={condition?.['fieldType']}
+								subFieldType={condition?.['subFieldType']}
+								format={condition?.['format']}
+								selectOptions={condition?.['selectOptions']}
+								tooltip={condition?.['tooltip']}
+								onlyStatic={condition?.['onlyStatic']}
+								fileUpload={condition?.['fileUpload']}
+								placeholder={condition?.['placeholder']}
+								customTitle={condition?.['customTitle']}
+								displayType={false}
+								noVariablePicker={true}
+							/>
+						</div>
+
+						<div class="flex flex-col justify-center gap-2">
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<div on:click={() => deleteSubgrid(index)}>
+								<X size={16} />
+							</div>
+
+							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+							<div
+								tabindex={dragDisabled ? 0 : -1}
+								class="w-4 h-4"
+								on:mousedown={startDrag}
+								on:touchstart={startDrag}
+								on:keydown={handleKeyDown}
+							>
+								<GripVertical size={16} />
+							</div>
+						</div>
+					</div>
+				{/if}
+			{/each}
+		</section>
+		<div class="border rounded-md p-3 mb-2">
+			<div class="flex">
+				<span class="font-bold text-xs">Default</span>
+			</div>
+			<Alert title="Default" size="xs">
+				The default container is rendered if no other conditions evaluate to true.
+			</Alert>
+		</div>
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addCondition}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        conditions?: RichConfiguration[] | undefined;
+        component: AppComponent;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridConditionProps = typeof __propDef.props;
+export type GridConditionEvents = typeof __propDef.events;
+export type GridConditionSlots = typeof __propDef.slots;
+export default class GridCondition extends SvelteComponentTyped<GridConditionProps, GridConditionEvents, GridConditionSlots> {
+}
+export {};

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

@@ -7,28 +7,41 @@ import PanelSection from './common/PanelSection.svelte';
 import { dndzone } from 'svelte-dnd-action';
 import { generateRandomString } from '../../../../utils';
 import { GripVertical } from 'lucide-svelte';
-export let tabs;
+import GridTabDisabled from './GridTabDisabled.svelte';
+export let tabs = [];
+export let disabledTabs = [];
+export let canDisableTabs = false;
+// Migration code
+$: if (tabs.length !== disabledTabs?.length && canDisableTabs) {
+    disabledTabs = Array(tabs.length).fill({
+        type: 'static',
+        value: false,
+        fieldType: 'boolean'
+    });
+}
+export let word = 'Tab';
 export let component;
 let items = tabs.map((tab, index) => {
     return { value: tab, id: generateRandomString(), originalIndex: index };
 });
+$: tabs = items.map((item) => item.value);
 const { app, runnableComponents, componentControl } = getContext('AppViewerContext');
 function addTab() {
-    const numberOfTabs = tabs.length;
-    tabs = [...tabs, `Tab ${numberOfTabs + 1}`];
+    const numberOfTabs = items.length;
     if (!$app.subgrids) {
         $app.subgrids = {};
     }
     $app.subgrids[`${component.id}-${numberOfTabs}`] = [];
-    component.numberOfSubgrids = tabs.length;
     items = [
         ...items,
         {
-            value: tabs[tabs.length - 1],
+            value: `${word} ${items.length + 1}`,
             id: generateRandomString(),
-            originalIndex: tabs.length - 1
+            originalIndex: items.length
         }
     ];
+    component.numberOfSubgrids = items.length;
+    disabledTabs = [...disabledTabs, { type: 'static', value: false, fieldType: 'boolean' }];
 }
 function deleteSubgrid(index) {
     let subgrid = `${component.id}-${index}`;
@@ -39,19 +52,21 @@ function deleteSubgrid(index) {
         }
     }
     $runnableComponents = $runnableComponents;
-    for (let i = index; i < tabs.length - 1; i++) {
+    for (let i = index; i < items.length - 1; i++) {
         $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
     }
-    tabs.splice(index, 1);
-    tabs = tabs;
-    component.numberOfSubgrids = tabs.length;
-    $app = $app;
     // Remove the corresponding item from the items array
     items = items.filter((item) => item.originalIndex !== index);
+    // Delete the item in the disabledTabs array
+    disabledTabs = disabledTabs.filter((_, i) => i !== index);
+    component.numberOfSubgrids = items.length;
     // Update the originalIndex of the remaining items
     items.forEach((item, i) => {
         item.originalIndex = i;
     });
+    items = items;
+    delete $app.subgrids[items.length];
+    $app = $app;
 }
 function handleConsider(e) {
     const { items: newItems } = e.detail;
@@ -65,14 +80,18 @@ function updateItemValue(index, e) {
 function handleFinalize(e) {
     const { items: newItems } = e.detail;
     items = newItems;
-    tabs = items.map((item) => item.value);
     // if the originalIndex are not in order, we should swap the subgrids
     if (items.some((item, index) => item.originalIndex !== index)) {
         const newSubgrids = {};
-        for (let i = 0; i < tabs.length; i++) {
+        for (let i = 0; i < items.length; i++) {
             newSubgrids[`${component.id}-${i}`] =
                 $app.subgrids[`${component.id}-${items[i].originalIndex}`] ?? [];
         }
+        const newDisabledTabs = [];
+        for (let i = 0; i < items.length; i++) {
+            newDisabledTabs.push(disabledTabs[items[i].originalIndex]);
+        }
+        disabledTabs = newDisabledTabs;
         // update originalIndex
         items.forEach((item, i) => {
             item.originalIndex = i;
@@ -101,7 +120,7 @@ function handleKeyDown(event) {
 }
 </script>
 
-<PanelSection title={`Tabs ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
+<PanelSection title={`${word}s ${tabs.length > 0 ? `(${tabs.length})` : ''}`}>
 	{#if tabs.length == 0}
 		<span class="text-xs text-gray-500">No Tabs</span>
 	{/if}
@@ -116,26 +135,34 @@ function handleKeyDown(event) {
 			on:finalize={handleFinalize}
 		>
 			{#each items as item, index (item.id)}
-				<div class="w-full flex flex-row gap-2 items-center relative my-1">
-					<input
-						on:keydown|stopPropagation
-						on:input={(e) => updateItemValue(index, e)}
-						type="text"
-						bind:value={tabs[index]}
-					/>
-					<div class="absolute right-6">
-						<CloseButton noBg on:close={() => deleteSubgrid(index)} />
-					</div>
-					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-					<div
-						tabindex={dragDisabled ? 0 : -1}
-						class="w-4 h-4"
-						on:mousedown={startDrag}
-						on:touchstart={startDrag}
-						on:keydown={handleKeyDown}
-					>
-						<GripVertical size={16} />
+				<div class="border rounded-md p-2 mb-2 bg-white">
+					<div class="w-full flex flex-row gap-2 items-center relative my-1">
+						<input
+							on:keydown|stopPropagation
+							on:input={(e) => updateItemValue(index, e)}
+							type="text"
+							bind:value={items[index].value}
+						/>
+						<div class="absolute right-6">
+							<CloseButton noBg on:close={() => deleteSubgrid(index)} />
+						</div>
+
+						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+
+						<div
+							tabindex={dragDisabled ? 0 : -1}
+							class="w-4 h-4"
+							on:mousedown={startDrag}
+							on:touchstart={startDrag}
+							on:keydown={handleKeyDown}
+						>
+							<GripVertical size={16} />
+						</div>
 					</div>
+
+					{#if canDisableTabs}
+						<GridTabDisabled bind:field={disabledTabs[index]} id={component.id} />
+					{/if}
 				</div>
 			{/each}
 		</section>

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

@@ -1,8 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
 import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
-        tabs: string[];
+        tabs?: string[] | undefined;
+        disabledTabs?: RichConfiguration[] | undefined;
+        canDisableTabs?: boolean | undefined;
+        word?: string | undefined;
         component: AppComponent;
     };
     events: {

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

@@ -0,0 +1,55 @@
+<script>import Toggle from '../../../Toggle.svelte';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+import { slide } from 'svelte/transition';
+export let id;
+export let field;
+let disablable = !(field.type === 'static' && field.value === false);
+</script>
+
+<Toggle
+	bind:checked={disablable}
+	size="xs"
+	options={{
+		right: 'Can be disabled'
+	}}
+	on:change={() => {
+		if (disablable) {
+			field = {
+				type: 'eval',
+				expr: 'false',
+				fieldType: 'boolean'
+			}
+		} else {
+			field = {
+				type: 'static',
+				value: false,
+				fieldType: 'boolean'
+			}
+		}
+	}}
+/>
+
+{#if disablable}
+	<div transition:slide|local>
+		<InputsSpecEditor
+			key={`Tab disabled`}
+			bind:componentInput={field}
+			{id}
+			userInputEnabled={false}
+			shouldCapitalize={true}
+			resourceOnly={false}
+			hasRows={false}
+			fieldType={field?.['fieldType']}
+			subFieldType={field?.['subFieldType']}
+			format={field?.['format']}
+			selectOptions={field?.['selectOptions']}
+			tooltip={field?.['tooltip']}
+			onlyStatic={field?.['onlyStatic']}
+			fileUpload={field?.['fileUpload']}
+			placeholder={field?.['placeholder']}
+			customTitle={field?.['customTitle']}
+			displayType={false}
+			noVariablePicker={true}
+		/>
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfiguration } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        field: RichConfiguration;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridTabDisabledProps = typeof __propDef.props;
+export type GridTabDisabledEvents = typeof __propDef.events;
+export type GridTabDisabledSlots = typeof __propDef.slots;
+export default class GridTabDisabled extends SvelteComponentTyped<GridTabDisabledProps, GridTabDisabledEvents, GridTabDisabledSlots> {
+}
+export {};