windmill-components 1.77.0 → 1.79.0

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

@@ -7,7 +7,7 @@ import TableActions from './TableActions.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import Badge from '../../../common/badge/Badge.svelte';
-import { capitalize, classNames } from '../../../../utils';
+import { capitalize, classNames, getModifierKey } from '../../../../utils';
 import { buildExtraLib, fieldTypeToTsType } from '../../utils';
 import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
@@ -28,8 +28,10 @@ export let onDelete = undefined;
 export let parent;
 export let noGrid = false;
 export let duplicateMoveAllowed = true;
-const { app, staticOutputs, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state } = getContext('AppViewerContext');
-const { history } = getContext('AppEditorContext');
+let editor = undefined;
+const { app, runnableComponents, selectedComponent, worldStore, focusedGrid, stateId, state } = getContext('AppViewerContext');
+const { history, ontextfocus } = getContext('AppEditorContext');
+$: editor && ($ontextfocus = () => editor?.focus());
 function removeGridElement() {
     push(history, $app);
     $selectedComponent = undefined;
@@ -37,14 +39,11 @@ function removeGridElement() {
     if (component && !noGrid) {
         let ids = deleteGridItem($app, component, parent, false);
         for (const key of ids) {
-            delete $staticOutputs[key];
             delete $runnableComponents[key];
         }
     }
-    delete $staticOutputs[component.id];
     delete $runnableComponents[component.id];
     $app = $app;
-    $staticOutputs = $staticOutputs;
     $runnableComponents = $runnableComponents;
     onDelete?.();
 }
@@ -69,10 +68,7 @@ function keydown(event) {
 {#if component}
 	<div class="flex min-h-full flex-col min-w-[150px] w-full divide-y">
 		{#if component.componentInput}
-			<PanelSection
-				smallPadding
-				title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}
-			>
+			<PanelSection title={component.componentInput.fieldType === 'any' ? 'By Runnable' : 'Input'}>
 				<svelte:fragment slot="action">
 					<span
 						class={classNames(
@@ -99,7 +95,12 @@ function keydown(event) {
 						<StaticInputEditor bind:componentInput={component.componentInput} />
 					{:else if component.componentInput.type === 'template' && component.componentInput !== undefined}
 						<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
-							<TemplateEditor fontSize={12} bind:code={component.componentInput.eval} {extraLib} />
+							<TemplateEditor
+								bind:this={editor}
+								fontSize={12}
+								bind:code={component.componentInput.eval}
+								{extraLib}
+							/>
 						</div>
 					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
 						<ConnectedInputEditor bind:componentInput={component.componentInput} />
@@ -116,7 +117,6 @@ function keydown(event) {
 						{#if Object.keys(component.componentInput.fields ?? {}).length > 0}
 							<div class="border w-full">
 								<PanelSection
-									smallPadding
 									title={`Runnable Inputs (${
 										Object.keys(component.componentInput.fields ?? {}).length
 									})`}
@@ -132,7 +132,8 @@ function keydown(event) {
 										id={component.id}
 										shouldCapitalize={false}
 										bind:inputSpecs={component.componentInput.fields}
-										userInputEnabled={component.type !== 'buttoncomponent'}
+										userInputEnabled={component.type === 'formcomponent' ||
+											component.type === 'formbuttoncomponent'}
 										{rowColumns}
 									/>
 								</PanelSection>
@@ -202,34 +203,23 @@ function keydown(event) {
 						<Kbd>Del</Kbd>
 					</Button>
 				</div>
-				<div class="flex flex-col">
-					<div
-						><span class="text-gray-600 text-xs mr-2">Copy:</span><Kbd>CTRL+C</Kbd> + <Kbd
-							>CTRL+V</Kbd
-						></div
-					>
-					<!-- <Button
-					size="xs"
-					color="dark"
-					startIcon={{ icon: faCopy }}
-					on:click={() => {
-						if (component) {
-							duplicateElement(component.id)
-						}
-					}}
-				>
-					Duplicate component: {component.id}
-				</Button> -->
-					<div
-						><span class="text-gray-600 text-xs mr-2">Move:</span><Kbd>CTRL+X</Kbd> + <Kbd
-							>CTRL+V</Kbd
-						></div
-					>
-					<div
-						><span class="text-gray-600 text-xs mr-2">Navigate:</span><Kbd>&leftarrow;</Kbd><Kbd
-							>&uparrow;</Kbd
-						><Kbd>&rightarrow;</Kbd><Kbd>ESC</Kbd></div
-					>
+				<div class="flex flex-col gap-1">
+					<div>
+						<span class="text-gray-600 text-xs mr-2"> Copy:</span>
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Move: </span>
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
+						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+					</div>
+					<div>
+						<span class="text-gray-600 text-xs mr-2">Navigate:</span>
+						<Kbd>&leftarrow;</Kbd>
+						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
+						<Kbd>ESC</Kbd>
+					</div>
 				</div>
 			</PanelSection>
 		{/if}

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

@@ -5,7 +5,7 @@ import { deleteGridItem } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 export let panes;
 export let component;
-const { app, staticOutputs, runnableComponents } = getContext('AppViewerContext');
+const { app, runnableComponents } = getContext('AppViewerContext');
 function addTab() {
     const numberOfPanes = panes.length;
     panes = Array(panes.length + 1)
@@ -23,11 +23,9 @@ function deleteSubgrid(index) {
         const components = deleteGridItem($app, item.data, subgrid, false);
         console.log(components);
         for (const key in components) {
-            delete $staticOutputs[key];
             delete $runnableComponents[key];
         }
     }
-    $staticOutputs = $staticOutputs;
     $runnableComponents = $runnableComponents;
     for (let i = index; i < panes.length - 1; i++) {
         $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];

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

@@ -7,7 +7,7 @@ import { deleteGridItem } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 export let tabs;
 export let component;
-const { app, staticOutputs, runnableComponents, focusedGrid } = getContext('AppViewerContext');
+const { app, runnableComponents } = getContext('AppViewerContext');
 function addTab() {
     const numberOfTabs = tabs.length;
     tabs = [...tabs, `Tab ${numberOfTabs + 1}`];
@@ -23,11 +23,9 @@ function deleteSubgrid(index) {
         const components = deleteGridItem($app, item.data, subgrid, false);
         console.log(components);
         for (const key in components) {
-            delete $staticOutputs[key];
             delete $runnableComponents[key];
         }
     }
-    $staticOutputs = $staticOutputs;
     $runnableComponents = $runnableComponents;
     for (let i = index; i < tabs.length - 1; i++) {
         $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];

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

@@ -1,24 +1,120 @@
-<script>import VariableEditor from '../../../VariableEditor.svelte';
+<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
+import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
+import { faArrowRight, faPen, faUpload, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fieldTypeToTsType } from '../../utils';
+import Tooltip from '../../../Tooltip.svelte';
+import Popover from '../../../Popover.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
 import EvalInputEditor from './inputEditor/EvalInputEditor.svelte';
 import RowInputEditor from './inputEditor/RowInputEditor.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import UploadInputEditor from './inputEditor/UploadInputEditor.svelte';
+import { getContext } from 'svelte';
 export let id;
 export let componentInput;
+export let key;
 export let hasRows = false;
+export let userInputEnabled = false;
+export let shouldCapitalize = true;
+export let resourceOnly = false;
+const { connectingInput } = getContext('AppViewerContext');
 </script>
 
-{#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 === 'eval'}
-	<EvalInputEditor {hasRows} {id} bind:componentInput />
-{:else if componentInput.type === 'upload'}
-	<UploadInputEditor bind:componentInput />
-{:else if componentInput.type === 'user'}
-	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
+{#if componentInput.ctype == undefined}
+	{#if !(resourceOnly && (componentInput.fieldType !== 'object' || !componentInput.format?.startsWith('resource-')))}
+		<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(addWhitespaceBeforeCapitals(key)) : key}
+					{#if componentInput.tooltip}
+						<Tooltip>
+							{componentInput.tooltip}
+						</Tooltip>
+					{/if}
+				</span>
+
+				<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
+					<Badge color="blue">
+						{componentInput.fieldType === 'array' && componentInput.subFieldType
+							? `${capitalize(fieldTypeToTsType(componentInput.subFieldType))}[]`
+							: capitalize(fieldTypeToTsType(componentInput.fieldType))}
+					</Badge>
+
+					{#if !componentInput.onlyStatic && componentInput.type != 'eval'}
+						<ToggleButtonGroup
+							bind:selected={componentInput.type}
+							on:selected={(e) => {
+								if (e.detail == 'connected' && !componentInput['connection']) {
+									$connectingInput = {
+										opened: true,
+										input: undefined,
+										hoveredComponent: undefined
+									}
+								}
+							}}
+						>
+							<Popover placement="bottom" notClickable disapperTimoout={0}>
+								<ToggleButton
+									position="left"
+									value="static"
+									startIcon={{ icon: faPen }}
+									size="xs"
+									iconOnly
+								/>
+								<svelte:fragment slot="text">Static</svelte:fragment>
+							</Popover>
+							{#if userInputEnabled && !componentInput.format?.startsWith('resource-')}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
+									<ToggleButton
+										position="center"
+										value="user"
+										startIcon={{ icon: faUser }}
+										size="xs"
+										iconOnly
+									/>
+									<svelte:fragment slot="text">User Input</svelte:fragment>
+								</Popover>
+							{/if}
+							{#if 'fileUpload' in componentInput}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
+									<ToggleButton
+										position="center"
+										value="upload"
+										startIcon={{ icon: faUpload }}
+										size="xs"
+										iconOnly
+									/>
+									<svelte:fragment slot="text">Upload</svelte:fragment>
+								</Popover>
+							{/if}
+							<Popover placement="bottom" notClickable disapperTimoout={0}>
+								<ToggleButton
+									position="right"
+									value="connected"
+									startIcon={{ icon: faArrowRight }}
+									size="xs"
+									iconOnly
+								/>
+								<svelte:fragment slot="text">Connect</svelte:fragment>
+							</Popover>
+						</ToggleButtonGroup>
+					{/if}
+				</div>
+			</div>
+
+			{#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 === 'eval'}
+				<EvalInputEditor {hasRows} {id} bind:componentInput />
+			{:else if componentInput.type === 'upload'}
+				<UploadInputEditor bind:componentInput />
+			{:else if componentInput.type === 'user'}
+				<span class="text-2xs italic text-gray-600">Field's value is set by the user</span>
+			{/if}
+		</div>
+	{/if}
 {/if}

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

@@ -1,10 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, EvalAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        componentInput: StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput;
+        componentInput: RichConfiguration;
+        key: string;
         hasRows?: boolean | undefined;
+        userInputEnabled?: boolean | undefined;
+        shouldCapitalize?: boolean | undefined;
+        resourceOnly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,128 +1,25 @@
-<script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
-import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
-import { faArrowRight, faPen, faUpload, faUser } from '@fortawesome/free-solid-svg-icons';
-import { fieldTypeToTsType } from '../../utils';
-import InputsSpecEditor from './InputsSpecEditor.svelte';
-import { getContext } from 'svelte';
-import Tooltip from '../../../Tooltip.svelte';
-import Popover from '../../../Popover.svelte';
+<script>import InputsSpecEditor from './InputsSpecEditor.svelte';
 export let id;
 export let inputSpecs;
-export let userInputEnabled = true;
+export let userInputEnabled = false;
 export let shouldCapitalize = true;
 export let rowColumns = false;
 export let resourceOnly = false;
-const { connectingInput } = getContext('AppViewerContext');
 </script>
 
 {#if inputSpecs}
 	<div class="w-full flex flex-col gap-4">
-		{#each Object.keys(inputSpecs) as inputSpecKey (inputSpecKey)}
-			{@const input = inputSpecs[inputSpecKey]}
-			{#if !(resourceOnly && (input.fieldType !== 'object' || !input.format?.startsWith('resource-')))}
-				<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(addWhitespaceBeforeCapitals(inputSpecKey))
-								: inputSpecKey}
-							{#if input.tooltip}
-								<Tooltip>
-									{input.tooltip}
-								</Tooltip>
-							{/if}
-						</span>
-
-						<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
-							<Badge color="blue">
-								{input.fieldType === 'array' && input.subFieldType
-									? `${capitalize(fieldTypeToTsType(input.subFieldType))}[]`
-									: capitalize(fieldTypeToTsType(input.fieldType))}
-							</Badge>
-
-							{#if !inputSpecs[inputSpecKey].onlyStatic && inputSpecs[inputSpecKey].type != 'eval'}
-								<ToggleButtonGroup
-									bind:selected={inputSpecs[inputSpecKey].type}
-									on:selected={(e) => {
-										if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
-											$connectingInput = {
-												opened: true,
-												input: undefined,
-												hoveredComponent: undefined
-											}
-										}
-									}}
-								>
-									<Popover placement="bottom" notClickable disapperTimoout={0}>
-										<ToggleButton
-											position="left"
-											value="static"
-											startIcon={{ icon: faPen }}
-											size="xs"
-											iconOnly
-										/>
-										<svelte:fragment slot="text">Static</svelte:fragment>
-									</Popover>
-									<!-- {#if rowColumns}
-										<Popover placement="bottom" notClickable disapperTimoout={0}>
-											<ToggleButton
-												position="center"
-												value="row"
-												startIcon={{ icon: faTableCells }}
-												size="xs"
-											>
-												<Tooltip scale={0.6} placement="top-end" wrapperClass="center-center">
-													Use the column name to have the value of the cell be passed to the action
-												</Tooltip>
-											</ToggleButton>
-											<svelte:fragment slot="text">Column</svelte:fragment>
-										</Popover>
-									{/if} -->
-									{#if userInputEnabled && !input.format?.startsWith('resource-')}
-										<Popover placement="bottom" notClickable disapperTimoout={0}>
-											<ToggleButton
-												position="center"
-												value="user"
-												startIcon={{ icon: faUser }}
-												size="xs"
-												iconOnly
-											/>
-											<svelte:fragment slot="text">User Input</svelte:fragment>
-										</Popover>
-									{/if}
-									{#if 'fileUpload' in inputSpecs[inputSpecKey]}
-										<Popover placement="bottom" notClickable disapperTimoout={0}>
-											<ToggleButton
-												position="center"
-												value="upload"
-												startIcon={{ icon: faUpload }}
-												size="xs"
-												iconOnly
-											/>
-											<svelte:fragment slot="text">Upload</svelte:fragment>
-										</Popover>
-									{/if}
-									<Popover placement="bottom" notClickable disapperTimoout={0}>
-										<ToggleButton
-											position="right"
-											value="connected"
-											startIcon={{ icon: faArrowRight }}
-											size="xs"
-											iconOnly
-										/>
-										<svelte:fragment slot="text">Connect</svelte:fragment>
-									</Popover>
-								</ToggleButtonGroup>
-							{/if}
-						</div>
-					</div>
-
-					<InputsSpecEditor
-						hasRows={rowColumns}
-						{id}
-						bind:componentInput={inputSpecs[inputSpecKey]}
-					/>
-				</div>
+		{#each Object.keys(inputSpecs) as k}
+			{#if inputSpecs[k].ctype == undefined}
+				<InputsSpecEditor
+					key={k}
+					bind:componentInput={inputSpecs[k]}
+					{id}
+					{userInputEnabled}
+					{shouldCapitalize}
+					{resourceOnly}
+					hasRows={rowColumns}
+				/>
 			{/if}
 		{/each}
 	</div>

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent } from '../../types';
+import type { RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
-        inputSpecs: BaseAppComponent['configuration'];
+        inputSpecs: RichConfigurations;
         userInputEnabled?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;
         rowColumns?: boolean | undefined;

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

@@ -4,6 +4,7 @@ import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
 import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
+import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';
 const { app } = getContext('AppViewerContext');
 export let appInput;
 let inlineScriptEditorDrawer;
@@ -58,6 +59,9 @@ function clear() {
 		</Button>
 	</div>
 </div>
+{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
+	<ComponentTriggerList fields={appInput.fields} />
+{/if}
 {#if appInput.runnable?.type === 'runnableByName' && !appInput.runnable.inlineScript}
 	<span class="text-xs text-gray-500">
 		Please configure the language in the inline script panel

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

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
+import type { RichConfiguration } from '../../types';
 declare const __propDef: {
     props: {
-        componentInput: AppInput | undefined;
+        componentInput: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -9,7 +9,7 @@ import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
 export let components;
 export let id;
-const { selectedComponent, staticOutputs } = getContext('AppViewerContext');
+const { selectedComponent } = getContext('AppViewerContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
@@ -74,15 +74,12 @@ function addComponent() {
         recomputeIds: undefined,
         customCss: {
             button: { style: '', class: '' }
-        },
-        card: false
+        }
     };
     components = [...components, newComponent];
 }
 function deleteComponent(cid) {
     components = components.filter((x) => x.id !== cid);
-    delete $staticOutputs[cid];
-    $staticOutputs = $staticOutputs;
     $selectedComponent = id;
 }
 </script>

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -1,7 +1,6 @@
 <script>import { classNames } from '../../../../../utils';
 import Tooltip from '../../../../Tooltip.svelte';
 export let title;
-export let smallPadding = false;
 export let noPadding = false;
 export let titlePadding = '';
 export let tooltip = '';
@@ -11,7 +10,7 @@ export let tooltip = '';
 	class={classNames(
 		$$props.class,
 		'flex flex-col h-full gap-2 items-start',
-		noPadding ? '' : smallPadding ? 'p-2' : 'p-4'
+		noPadding ? '' : 'p-3'
 	)}
 >
 	<div class="flex justify-between flex-wrap items-center w-full gap-1">

package/components/apps/editor/settingsPanel/common/PanelSection.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         title: string;
-        smallPadding?: boolean | undefined;
         noPadding?: boolean | undefined;
         titlePadding?: string | undefined;
         tooltip?: string | undefined;

package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -46,9 +46,12 @@ $: componentInput && onchange?.();
 					initialValue={componentInput.value?.['value']?.split('$res:')[1] || ''}
 					on:change={(e) => {
 						let path = e.detail
-
-						if (componentInput && path) {
-							componentInput.value['value'] = `$res:${path}`
+						if (componentInput) {
+							if (path) {
+								componentInput.value['value'] = `$res:${path}`
+							} else {
+								componentInput.value['value'] = undefined
+							}
 						}
 					}}
 				/>
@@ -64,9 +67,12 @@ $: componentInput && onchange?.();
 				initialValue={componentInput.value?.split('$res:')[1] || ''}
 				on:change={(e) => {
 					let path = e.detail
-
-					if (componentInput && path) {
-						componentInput.value = `$res:${path}`
+					if (componentInput) {
+						if (path) {
+							componentInput.value = `$res:${path}`
+						} else {
+							componentInput.value = undefined
+						}
 					}
 				}}
 				resourceType={componentInput.format.split('-').length > 1