windmill-components 1.79.0 → 1.82.0

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

@@ -1,18 +1,15 @@
 <script>import Button from '../../../common/button/Button.svelte';
+import Toggle from '../../../Toggle.svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
+import { includes } from 'lodash';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
-import InlineScriptEditorDrawer from '../inlineScriptsPanel/InlineScriptEditorDrawer.svelte';
 import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';
 const { app } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 export let appInput;
-let inlineScriptEditorDrawer;
-function edit() {
-    if (appInput.runnable?.type === 'runnableByName') {
-        inlineScriptEditorDrawer?.openDrawer();
-    }
-}
+export let appComponent;
 function detach() {
     if (appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript) {
         $app.unusedInlineScripts.push({
@@ -28,13 +25,7 @@ function clear() {
 }
 </script>
 
-{#if appInput.runnable && appInput.runnable.type === 'runnableByName' && appInput.runnable.inlineScript}
-	<InlineScriptEditorDrawer
-		bind:this={inlineScriptEditorDrawer}
-		bind:inlineScript={appInput.runnable.inlineScript}
-	/>
-{/if}
-<div class="flex flex-col xl:flex-row justify-between w-full flex-wrap items-center gap-1">
+<div class="flex justify-between w-full items-center gap-1">
 	<span class="text-xs font-semibold truncate">
 		{#if appInput.runnable?.type === 'runnableByName'}
 			{appInput.runnable.name}
@@ -42,13 +33,10 @@ function clear() {
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1 flex-wrap justify-center">
+	<div class="flex gap-1  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
+				Detach&nbsp;
 				<Tooltip>
 					Detaching an inline script keep it for later to be reused by another component
 				</Tooltip>
@@ -59,17 +47,73 @@ function clear() {
 		</Button>
 	</div>
 </div>
+<div>
+	<div class="w-full"><div class="mx-auto w-0">&downarrow;</div></div>
+	<div class="flex gap-1 justify-between items-center">
+		<span class="text-xs font-semibold truncate">
+			Transformer &nbsp;<Tooltip
+				>A transformer is an optional frontend script that is executed right after the component's
+				script whose purpose is to do lightweight transformation in the browser. It takes the
+				previous computation's result as `result`</Tooltip
+			></span
+		>
+		<div class="flex gap-1">
+			{#if !appInput.transformer}
+				<div>
+					<Button
+						variant="border"
+						color="light"
+						size="xs"
+						on:click={() => {
+							appInput.transformer = {
+								language: 'frontend',
+								content: 'return result'
+							}
+							$selectedComponentInEditor = appComponent.id + '_transformer'
+						}}>Add Transformer</Button
+					>
+				</div>
+			{:else}
+				<Button
+					size="xs"
+					color="red"
+					variant="border"
+					startIcon={{ icon: faClose }}
+					on:click={() => {
+						appInput.transformer = undefined
+					}}
+				>
+					Clear
+				</Button>
+			{/if}
+		</div></div
+	>
+</div>
+
 {#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
-	<ComponentTriggerList fields={appInput.fields} />
+	{#if !['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type)}
+		<div class="flex items-center">
+			<Toggle
+				size="xs"
+				color="red"
+				bind:checked={appInput.doNotRecomputeOnInputChanged}
+				options={{ right: 'do NOT recompute on input changes' }}
+			/>
+			<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
+		</div>
+	{/if}
+
+	<div>
+		<ComponentTriggerList
+			bind:runnable={appInput.runnable}
+			{appComponent}
+			fields={appInput.fields}
+			doNotRecomputeOnInputChanged={appInput.doNotRecomputeOnInputChanged}
+		/>
+	</div>
 {/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
 	</span>
 {/if}
-{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript?.language === 'frontend'}
-	<span class="text-xs text-gray-500">
-		If the component is a display component. The script will be recomputed upon any changes to any
-		output or to the state.
-	</span>
-{/if}

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

@@ -1,8 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ResultAppInput } from '../../inputType';
+import type { AppComponent } from '../component';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
+        appComponent: AppComponent;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,15 +1,17 @@
 <script>import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 export let value;
 export let componentInput;
+export let subFieldType;
 let fakeComponentInput = {
     ...componentInput,
-    value,
-    // We don't support array of arrays
-    // @ts-ignore
-    fieldType: componentInput.subFieldType
+    value
 };
 // Bubble up changes to the real componentInput
 $: fakeComponentInput && (value = fakeComponentInput.value);
 </script>
 
-<StaticInputEditor bind:componentInput={fakeComponentInput} />
+<StaticInputEditor
+	noVariablePicker
+	fieldType={subFieldType}
+	bind:componentInput={fakeComponentInput}
+/>

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

@@ -1,9 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticAppInput } from '../../inputType';
+import type { InputType, StaticInput } from '../../inputType';
 declare const __propDef: {
     props: {
         value: any;
-        componentInput: StaticAppInput;
+        componentInput: StaticInput<any>;
+        subFieldType: InputType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -5,82 +5,27 @@ import { classNames } from '../../../../utils';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
+import { appComponentFromType, clearErrorByComponentId, clearJobsByComponentId } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
 import TableActionLabel from './TableActionLabel.svelte';
 export let components;
 export let id;
-const { selectedComponent } = getContext('AppViewerContext');
+const { selectedComponent, app, errorByComponent, jobs } = getContext('AppViewerContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
     const newComponent = {
-        id: `${id}_${actionId}`,
-        type: 'buttoncomponent',
-        configuration: {
-            label: {
-                type: 'static',
-                value: 'Action',
-                fieldType: 'text'
-            },
-            color: {
-                fieldType: 'select',
-                type: 'static',
-                value: 'dark',
-                optionValuesKey: 'buttonColorOptions'
-            },
-            size: {
-                fieldType: 'select',
-                type: 'static',
-                value: 'xs',
-                optionValuesKey: 'buttonSizeOptions'
-            },
-            disabled: {
-                fieldType: 'boolean',
-                type: 'eval',
-                expr: 'false',
-                tooltip: "Disabled based on a predicate.  Use `row` to access the current row's data"
-            },
-            goto: {
-                tooltip: 'Go to an url on success if not empty',
-                fieldType: 'text',
-                type: 'static',
-                value: ''
-            },
-            gotoNewTab: {
-                tooltip: 'Go to create a new tab',
-                fieldType: 'boolean',
-                type: 'static',
-                value: true
-            },
-            beforeIcon: {
-                type: 'static',
-                value: undefined,
-                fieldType: 'icon-select',
-                onlyStatic: true
-            },
-            afterIcon: {
-                type: 'static',
-                value: undefined,
-                fieldType: 'icon-select',
-                onlyStatic: true
-            }
-        },
-        componentInput: {
-            type: 'runnable',
-            fieldType: 'any',
-            fields: {},
-            runnable: undefined,
-            value: undefined
-        },
-        recomputeIds: undefined,
-        customCss: {
-            button: { style: '', class: '' }
-        }
+        ...appComponentFromType('buttoncomponent')(`${id}_${actionId}`),
+        recomputeIds: []
     };
     components = [...components, newComponent];
+    $app = $app;
 }
 function deleteComponent(cid) {
     components = components.filter((x) => x.id !== cid);
+    $errorByComponent = clearErrorByComponentId(cid, $errorByComponent);
+    $jobs = clearJobsByComponentId(cid, $jobs);
     $selectedComponent = id;
+    $app = $app;
 }
 </script>
 

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput, StaticInput } from '../../../inputType';
+import type { StaticInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<string> & Extract<AppInput, {
-            fieldType: 'color';
-        }>;
+        componentInput: StaticInput<string>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,7 +2,7 @@
 import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 export let componentInput;
-const { connectingInput, app } = getContext('AppViewerContext');
+const { connectingInput, app, worldStore } = getContext('AppViewerContext');
 function applyConnection() {
     if (!$connectingInput.opened &&
         $connectingInput.input !== undefined &&
@@ -14,6 +14,8 @@ function applyConnection() {
             hoveredComponent: undefined
         };
     }
+    $app = $app;
+    $worldStore = $worldStore;
 }
 $: $connectingInput && applyConnection();
 </script>

package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppInput, StaticInput } from '../../../inputType';
+import type { StaticInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<string> & Extract<AppInput, {
-            fieldType: 'icon-select';
-        }>;
+        componentInput: StaticInput<string>;
     };
     events: {
         keydown: KeyboardEvent;

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

@@ -3,11 +3,11 @@ import RunnableSelector from '../mainInput/RunnableSelector.svelte';
 import SelectedRunnable from '../SelectedRunnable.svelte';
 export let appInput;
 export let defaultUserInput = false;
-$: isRunnableSelected = isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput);
+export let appComponent;
 </script>
 
-{#if isRunnableSelected}
-	<SelectedRunnable bind:appInput />
-{:else}
-	<RunnableSelector {defaultUserInput} bind:appInput />
+{#if isScriptByPathDefined(appInput) || isScriptByNameDefined(appInput)}
+	<SelectedRunnable {appComponent} bind:appInput />
+{:else if appInput !== undefined}
+	<RunnableSelector id={appComponent.id} {defaultUserInput} bind:appInput />
 {/if}

package/components/apps/editor/settingsPanel/inputEditor/RunnableInputEditor.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ResultAppInput } from '../../../inputType';
+import type { AppComponent } from '../../component';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
         defaultUserInput?: boolean | undefined;
+        appComponent: AppComponent;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,5 +1,4 @@
 <script>import Toggle from '../../../../Toggle.svelte';
-import { staticValues } from '../../componentsPanel/componentStaticValues';
 import ArrayStaticInputEditor from '../ArrayStaticInputEditor.svelte';
 import ResourcePicker from '../../../../ResourcePicker.svelte';
 import JsonEditor from './JsonEditor.svelte';
@@ -8,32 +7,47 @@ import IconSelectInput from './IconSelectInput.svelte';
 import ColorInput from './ColorInput.svelte';
 import { Icon } from 'svelte-awesome';
 import { faDollarSign } from '@fortawesome/free-solid-svg-icons';
+import TabSelectInput from './TabSelectInput.svelte';
 export let componentInput;
+export let fieldType = undefined;
+export let subFieldType = undefined;
+export let selectOptions = undefined;
+export let placeholder = undefined;
+export let format = undefined;
+export let noVariablePicker = false;
 const { onchange } = getContext('AppViewerContext');
 const { pickVariableCallback } = getContext('AppEditorContext');
 $: componentInput && onchange?.();
 </script>
 
 {#if componentInput?.type === 'static'}
-	{#if componentInput.fieldType === 'number'}
+	{#if fieldType === 'number'}
 		<input on:keydown|stopPropagation type="number" bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'textarea'}
+	{:else if fieldType === 'textarea'}
 		<textarea on:keydown|stopPropagation bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'date'}
+	{:else if fieldType === 'date'}
 		<input on:keydown|stopPropagation type="date" bind:value={componentInput.value} />
-	{:else if componentInput.fieldType === 'boolean'}
+	{:else if fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
-	{:else if componentInput.fieldType === 'select'}
+	{:else if fieldType === 'select' && selectOptions}
 		<select on:keydown|stopPropagation on:keydown|stopPropagation bind:value={componentInput.value}>
-			{#each staticValues[componentInput.optionValuesKey] || [] as option}
-				<option value={option}>
-					{option}
-				</option>
+			{#each selectOptions ?? [] as option}
+				{#if typeof option == 'string'}
+					<option value={option}>
+						{option}
+					</option>
+				{:else}
+					<option value={option.value}>
+						{option.label}
+					</option>
+				{/if}
 			{/each}
 		</select>
-	{:else if componentInput.fieldType === 'icon-select'}
+	{:else if fieldType === 'icon-select'}
 		<IconSelectInput bind:componentInput />
-	{:else if componentInput.fieldType === 'labeledresource'}
+	{:else if fieldType === 'tab-select'}
+		<TabSelectInput bind:componentInput />
+	{:else if fieldType === 'labeledresource'}
 		{#if componentInput?.value && typeof componentInput?.value == 'object' && 'label' in componentInput?.value}
 			<div class="flex flex-col gap-1 w-full">
 				<input
@@ -59,10 +73,10 @@ $: componentInput && onchange?.();
 		{:else}
 			Inconsistent labeled resource object
 		{/if}
-	{:else if componentInput.fieldType === 'color'}
+	{:else if fieldType === 'color'}
 		<ColorInput bind:componentInput />
-	{:else if componentInput.fieldType === 'object'}
-		{#if componentInput?.format?.startsWith('resource-')}
+	{:else if fieldType === 'object'}
+		{#if format?.startsWith('resource-')}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')[1] || ''}
 				on:change={(e) => {
@@ -75,8 +89,8 @@ $: componentInput && onchange?.();
 						}
 					}
 				}}
-				resourceType={componentInput.format.split('-').length > 1
-					? componentInput.format.substring('resource-'.length)
+				resourceType={format.split('-').length > 1
+					? format.substring('resource-'.length)
 					: undefined}
 			/>
 		{:else}
@@ -87,28 +101,30 @@ $: componentInput && onchange?.();
 				/>
 			</div>
 		{/if}
-	{:else if componentInput.fieldType === 'array'}
-		<ArrayStaticInputEditor bind:componentInput on:deleteArrayItem />
+	{:else if fieldType === 'array'}
+		<ArrayStaticInputEditor {subFieldType} bind:componentInput on:deleteArrayItem />
 	{:else}
 		<div class="flex gap-1">
 			<input
 				on:keydown|stopPropagation
 				type="text"
-				placeholder="Static value"
+				placeholder={placeholder ?? 'Static value'}
 				bind:value={componentInput.value}
 			/>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<div
-				class="min-w-min min-h-[34px] items-center leading-4 px-3 text-gray-600 cursor-pointer border border-gray-700 rounded center-center"
-				on:click={() => {
-					$pickVariableCallback = (variable) => {
-						if (componentInput) {
-							componentInput.value = `$var:${variable}`
+			{#if !noVariablePicker}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div
+					class="min-w-min min-h-[34px] items-center leading-4 px-3 text-gray-600 cursor-pointer border border-gray-700 rounded center-center"
+					on:click={() => {
+						$pickVariableCallback = (variable) => {
+							if (componentInput) {
+								componentInput.value = `$var:${variable}`
+							}
 						}
-					}
-				}}
-				><Icon data={faDollarSign} />
-			</div>
+					}}
+					><Icon data={faDollarSign} />
+				</div>
+			{/if}
 		</div>
 	{/if}
 {/if}

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

@@ -1,8 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticAppInput } from '../../../inputType';
+import type { InputType, StaticInput, StaticOptions } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticAppInput | undefined;
+        componentInput: StaticInput<any> | undefined;
+        fieldType?: InputType | undefined;
+        subFieldType?: InputType | undefined;
+        selectOptions?: StaticOptions['selectOptions'] | undefined;
+        placeholder?: string | undefined;
+        format?: string | undefined;
+        noVariablePicker?: boolean | undefined;
     };
     events: {
         keydown: KeyboardEvent;

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

@@ -0,0 +1,46 @@
+<script>import { allItems } from '../../../utils';
+import { getContext } from 'svelte';
+export let componentInput;
+const { app } = getContext('AppViewerContext');
+const tabComponents = allItems($app.grid, $app.subgrids).filter((component) => component.data.type === 'tabscomponent');
+</script>
+
+{#if componentInput.value && tabComponents.length > 0}
+	<div>
+		<div class="flex flex-row gap-2 w-full">
+			<div class="flex flex-col">
+				<label for="tabId" class="text-xs font-semibold">Tab ID</label>
+
+				<select
+					id="tabId"
+					bind:value={componentInput.value.id}
+					class="border border-gray-300 rounded-md p-1 !w-16"
+				>
+					{#each tabComponents as tabComponent}
+						<option value={tabComponent.data.id}>
+							{tabComponent.data.id}
+						</option>
+					{/each}
+				</select>
+			</div>
+			<div class="flex flex-col">
+				<label for="tabIndex" class="text-xs font-semibold">Tab Index</label>
+				<select
+					id="tabIndex"
+					bind:value={componentInput.value.index}
+					class="border border-gray-300 rounded-md p-1 !w-16"
+				>
+					{#each tabComponents as tabComponent}
+						{#if tabComponent.data.id === componentInput.value.id}
+							{#each Array(tabComponent.data.numberOfSubgrids) as _, i}
+								<option value={i}>{i}</option>
+							{/each}
+						{/if}
+					{/each}
+				</select>
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="text-xs text-gray-500"> No tab component found in the app </div>
+{/if}

package/components/apps/editor/settingsPanel/inputEditor/TabSelectInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { StaticInput } from '../../../inputType';
+declare const __propDef: {
+    props: {
+        componentInput: StaticInput<{
+            id: string;
+            index: number;
+        }>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TabSelectInputProps = typeof __propDef.props;
+export type TabSelectInputEvents = typeof __propDef.events;
+export type TabSelectInputSlots = typeof __propDef.slots;
+export default class TabSelectInput extends SvelteComponentTyped<TabSelectInputProps, TabSelectInputEvents, TabSelectInputSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte

@@ -10,10 +10,12 @@ import { getAllScriptNames, loadSchema, schemaToInputsSpec } from '../../../util
 import { emptySchema } from '../../../../../utils';
 export let appInput;
 export let defaultUserInput = false;
+export let id;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
 const { app, workspace } = getContext('AppViewerContext');
+const { selectedComponentInEditor } = getContext('AppEditorContext');
 async function loadSchemaFromTriggerable(path, runType) {
     return loadSchema(workspace, path, runType) ?? emptySchema();
 }
@@ -28,6 +30,7 @@ async function pickScript(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 async function pickFlow(path) {
@@ -41,6 +44,7 @@ async function pickFlow(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 async function pickHubScript(path) {
@@ -54,6 +58,7 @@ async function pickHubScript(path) {
             schema
         };
         appInput.fields = fields;
+        $selectedComponentInEditor = id;
     }
 }
 function pickInlineScript(name) {
@@ -67,6 +72,7 @@ function pickInlineScript(name) {
         };
         $app.unusedInlineScripts.splice(unusedInlineScriptIndex, 1);
     }
+    $selectedComponentInEditor = id;
     $app = $app;
 }
 function createScript() {
@@ -83,6 +89,7 @@ function createScript() {
         inlineScript: undefined
     };
     appInput = appInput;
+    $selectedComponentInEditor = id;
     return newScriptPath;
 }
 </script>

package/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         appInput: ResultAppInput;
         defaultUserInput?: boolean | undefined;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;