windmill-components 1.52.0 → 1.55.1

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -6,28 +6,31 @@ import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
 import { workspaceStore } from '../../../../stores';
 import { faRefresh } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
+import { getContext, onMount } from 'svelte';
 import { loadSchema, schemaToInputsSpec } from '../../utils';
 import InputValue from './InputValue.svelte';
 // Component props
 export let id;
 export let inputs;
-export let path = undefined;
-export let runType = undefined;
-export let inlineScriptName = undefined;
+export let runnable;
 export let extraQueryParams = {};
 export let autoRefresh = true;
 export let result = undefined;
-const { app, worldStore } = getContext('AppEditorContext');
+export let forceSchemaDisplay = false;
+const { app, worldStore, runnableComponents } = getContext('AppEditorContext');
+onMount(() => {
+    $runnableComponents[id] = async () => {
+        await executeComponent();
+    };
+});
 let pagePath = $page.params.path;
 let args = {};
 let schema = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
 $: mergedArgs = { ...args, ...extraQueryParams, ...runnableInputValues };
-// TODO: Review
 function setStaticInputsToArgs() {
-    Object.entries(inputs).forEach(([key, value]) => {
+    Object.entries(inputs ?? {}).forEach(([key, value]) => {
         if (value.type === 'static') {
             args[key] = value.value;
         }
@@ -35,18 +38,18 @@ function setStaticInputsToArgs() {
     args = args;
 }
 $: inputs && setStaticInputsToArgs();
-function argMergedArgsValid(mergedArgs) {
-    if (Object.keys(inputs).filter((k) => inputs[k].type !== 'user').length !==
+function argMergedArgsValid(mergedArgs, testJobLoader) {
+    if (Object.keys(inputs ?? {}).filter((k) => inputs[k].type !== 'user').length !==
         Object.keys(runnableInputValues).length) {
         return false;
     }
     const areAllArgsValid = Object.values(mergedArgs).every((arg) => arg !== undefined && arg !== null);
-    if (areAllArgsValid && autoRefresh) {
+    if (areAllArgsValid && autoRefresh && testJobLoader) {
         executeComponent();
     }
     return areAllArgsValid;
 }
-$: isValid = argMergedArgsValid(mergedArgs);
+$: isValid = argMergedArgsValid(mergedArgs, testJobLoader);
 // Test job internal state
 let testJob = undefined;
 let testJobLoader = undefined;
@@ -55,17 +58,19 @@ async function loadSchemaFromTriggerable(workspace, path, runType) {
     schema = await loadSchema(workspace, path, runType);
 }
 // Only loads the schema
-$: if ($workspaceStore && path && runType && !schema) {
+$: if ($workspaceStore && runnable?.type === 'runnableByPath' && !schema) {
     // Remote schema needs to be loaded
+    const { path, runType } = runnable;
     loadSchemaFromTriggerable($workspaceStore, path, runType);
 }
-else if (inlineScriptName && $app.inlineScripts[inlineScriptName] && !schema) {
+else if (runnable?.type === 'runnableByName' && !schema) {
+    const { inlineScriptName } = runnable;
     // Inline scripts directly provide the schema
     schema = $app.inlineScripts[inlineScriptName].schema;
 }
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
-$: if (schema && Object.keys(schema.properties).length !== Object.keys(inputs).length) {
+$: if (schema && Object.keys(schema.properties).length !== Object.keys(inputs ?? {}).length) {
     let schemaWithoutExtraQueries = JSON.parse(JSON.stringify(schema));
     // Remove extra query params from the schema, which are not directly configurable by the user
     Object.keys(extraQueryParams).forEach((key) => {
@@ -77,12 +82,12 @@ let schemaStripped = undefined;
 function stripSchema(schema, inputs) {
     schemaStripped = JSON.parse(JSON.stringify(schema));
     // Remove hidden static inputs
-    Object.keys(inputs).forEach((key) => {
+    Object.keys(inputs ?? {}).forEach((key) => {
         const input = inputs[key];
         if (input.type === 'static' && !input.visible && schemaStripped !== undefined) {
             delete schemaStripped.properties[key];
         }
-        if (input.type === 'output' && schemaStripped !== undefined) {
+        if (input.type === 'connected' && schemaStripped !== undefined) {
             delete schemaStripped.properties[key];
         }
     });
@@ -94,7 +99,7 @@ function stripSchema(schema, inputs) {
     });
 }
 $: schema && inputs && stripSchema(schema, inputs);
-$: disabledArgs = Object.keys(inputs).reduce((disabledArgsAccumulator, inputName) => {
+$: disabledArgs = Object.keys(inputs ?? {}).reduce((disabledArgsAccumulator, inputName) => {
     if (inputs[inputName].type === 'static') {
         disabledArgsAccumulator = [...disabledArgsAccumulator, inputName];
     }
@@ -104,20 +109,22 @@ async function executeComponent() {
     if (!schema) {
         return;
     }
-    outputs?.loading.set(true);
+    outputs?.loading?.set(true);
     await testJobLoader?.abstractRun(() => {
         const requestBody = {
             args: mergedArgs,
             force_viewer_static_fields: {}
         };
-        if (inlineScriptName && $app.inlineScripts[inlineScriptName]) {
+        if (runnable?.type === 'runnableByName') {
+            const { inlineScriptName } = runnable;
             requestBody['raw_code'] = {
                 content: $app.inlineScripts[inlineScriptName].content,
                 language: $app.inlineScripts[inlineScriptName].language,
                 path: $app.inlineScripts[inlineScriptName].path
             };
         }
-        else if (path && runType) {
+        else if (runnable?.type === 'runnableByPath') {
+            const { path, runType } = runnable;
             requestBody['path'] = `${runType}/${path}`;
         }
         return AppService.executeComponent({
@@ -127,22 +134,21 @@ async function executeComponent() {
         });
     });
 }
-export function runComponent() {
-    executeComponent();
+export async function runComponent() {
+    await executeComponent();
 }
 </script>
 
-{#each Object.keys(inputs) as key}
+{#each Object.keys(inputs ?? {}) as key}
 	<InputValue input={inputs[key]} bind:value={runnableInputValues[key]} />
 {/each}
 
 <TestJobLoader
 	on:done={() => {
-		if (testJob) {
-			outputs.result.set(testJob?.result)
-			outputs?.loading.set(false)
-
-			result = testJob?.result
+		if (testJob && outputs) {
+			outputs.result?.set(testJob?.result)
+			outputs.loading?.set(false)
+			result = testJob.result
 		}
 	}}
 	bind:isLoading={testIsLoading}
@@ -150,11 +156,11 @@ export function runComponent() {
 	bind:this={testJobLoader}
 />
 
-{#if schemaStripped !== undefined && autoRefresh}
+{#if schemaStripped !== undefined && (autoRefresh || forceSchemaDisplay)}
 	<SchemaForm schema={schemaStripped} bind:args {isValid} {disabledArgs} shouldHideNoInputs />
 {/if}
 
-{#if inlineScriptName === undefined && path === undefined && runType === undefined && autoRefresh}
+{#if !runnable}
 	<Alert type="warning" size="xs" class="mt-2" title="Missing runnable">
 		Please select a runnable
 	</Alert>

package/components/apps/components/helpers/RunnableComponent.svelte.d.ts

@@ -1,16 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import type { InputsSpec } from '../../types';
+import type { AppInputs, Runnable } from '../../inputType';
 declare const __propDef: {
     props: {
         id: string;
-        inputs: InputsSpec;
-        path?: string | undefined;
-        runType?: 'script' | 'flow' | undefined;
-        inlineScriptName?: string | undefined;
+        inputs: AppInputs;
+        runnable: Runnable;
         extraQueryParams?: Record<string, any> | undefined;
         autoRefresh?: boolean | undefined;
         result?: any;
-        runComponent?: (() => void) | undefined;
+        forceSchemaDisplay?: boolean | undefined;
+        runComponent?: (() => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,6 +22,6 @@ export type RunnableComponentProps = typeof __propDef.props;
 export type RunnableComponentEvents = typeof __propDef.events;
 export type RunnableComponentSlots = typeof __propDef.slots;
 export default class RunnableComponent extends SvelteComponentTyped<RunnableComponentProps, RunnableComponentEvents, RunnableComponentSlots> {
-    get runComponent(): () => void;
+    get runComponent(): () => Promise<void>;
 }
 export {};

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -0,0 +1,32 @@
+<script>import NonRunnableComponent from './NonRunnableComponent.svelte';
+import RunnableComponent from './RunnableComponent.svelte';
+export let componentInput;
+export let id;
+export let result = undefined;
+// Optional props
+export let extraQueryParams = {};
+export let autoRefresh = true;
+export let runnableComponent = undefined;
+export let forceSchemaDisplay = false;
+</script>
+
+{#if componentInput === undefined}
+	<slot />
+{:else if componentInput.type === 'runnable' && componentInput.runnable}
+	<RunnableComponent
+		bind:this={runnableComponent}
+		bind:inputs={componentInput.fields}
+		bind:result
+		runnable={componentInput.runnable}
+		{autoRefresh}
+		{id}
+		{extraQueryParams}
+		{forceSchemaDisplay}
+	>
+		<slot />
+	</RunnableComponent>
+{:else}
+	<NonRunnableComponent bind:result {id} {componentInput}>
+		<slot />
+	</NonRunnableComponent>
+{/if}

package/components/apps/components/helpers/RunnableWrapper.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import RunnableComponent from './RunnableComponent.svelte';
+declare const __propDef: {
+    props: {
+        componentInput: AppInput | undefined;
+        id: string;
+        result?: any;
+        extraQueryParams?: Record<string, any> | undefined;
+        autoRefresh?: boolean | undefined;
+        runnableComponent?: RunnableComponent | undefined;
+        forceSchemaDisplay?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type RunnableWrapperProps = typeof __propDef.props;
+export type RunnableWrapperEvents = typeof __propDef.events;
+export type RunnableWrapperSlots = typeof __propDef.slots;
+export default class RunnableWrapper extends SvelteComponentTyped<RunnableWrapperProps, RunnableWrapperEvents, RunnableWrapperSlots> {
+}
+export {};

package/components/apps/components/numberInputs/AppNumberInput.svelte

@@ -0,0 +1,36 @@
+<script>import { getContext } from 'svelte';
+import DebouncedInput from '../helpers/DebouncedInput.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let value;
+let labelValue = 'Title';
+$: outputs = $worldStore?.outputsById[id];
+$: if (value || !value) {
+    // Disallow 'e' character in numbers
+    // if(value && value.toString().includes('e')) {
+    // 	value = +value.toString().replaceAll('e', '')
+    // }
+    const num = isNaN(+value) ? null : +value;
+    outputs?.result.set(num);
+}
+</script>
+
+<InputValue input={configuration.label} bind:value={labelValue} />
+
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label>
+	<div>
+		{labelValue}
+	</div>
+	<DebouncedInput
+		bind:value={value}
+		debounceDelay={300}
+		type="number"
+		inputmode="numeric"
+		pattern="\d*"
+		placeholder="Type..."
+	/>
+</label>

package/components/apps/components/numberInputs/AppNumberInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppNumberInputProps = typeof __propDef.props;
+export type AppNumberInputEvents = typeof __propDef.events;
+export type AppNumberInputSlots = typeof __propDef.slots;
+export default class AppNumberInput extends SvelteComponentTyped<AppNumberInputProps, AppNumberInputEvents, AppNumberInputSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/selectInputs/AppCheckbox.svelte

@@ -3,17 +3,19 @@ import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
-export let componentInputs;
+export let configuration;
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 const { worldStore } = getContext('AppEditorContext');
 export const staticOutputs = ['result'];
 let labelValue = 'Default label';
 let value = false;
+// As the checkbox is a special case and has no input
+// we need to manually set the output
 $: outputs = $worldStore?.outputsById[id];
 </script>
 
-<InputValue input={componentInputs.label} bind:value={labelValue} />
+<InputValue input={configuration.label} bind:value={labelValue} />
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	<Toggle

package/components/apps/components/selectInputs/AppCheckbox.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { InputsSpec } from '../../types';
+import type { AppInput } from '../../inputType';
 declare const __propDef: {
     props: {
         id: string;
-        componentInputs: InputsSpec;
+        configuration: Record<string, AppInput>;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;

package/components/apps/components/textInputs/AppTextInput.svelte

@@ -0,0 +1,21 @@
+<script>import { getContext } from 'svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let value;
+let labelValue = 'Title';
+$: outputs = $worldStore?.outputsById[id];
+$: (value || !value) && outputs?.result.set(value || '');
+</script>
+
+<InputValue input={configuration.label} bind:value={labelValue} />
+
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<label>
+	<div>
+		{labelValue}
+	</div>
+	<input type="text" bind:value placeholder="Type..." />
+</label>

package/components/apps/components/textInputs/AppTextInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTextInputProps = typeof __propDef.props;
+export type AppTextInputEvents = typeof __propDef.events;
+export type AppTextInputSlots = typeof __propDef.slots;
+export default class AppTextInput extends SvelteComponentTyped<AppTextInputProps, AppTextInputEvents, AppTextInputSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/editor/AppEditor.svelte

@@ -14,6 +14,8 @@ import { faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
 import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
 import { classNames } from '../../../utils';
+import AppPreview from './AppPreview.svelte';
+import { userStore } from '../../../stores';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -27,6 +29,7 @@ const connectingInput = writable({
     opened: false,
     input: undefined
 });
+const runnableComponents = writable({});
 setContext('AppEditorContext', {
     worldStore,
     staticOutputs,
@@ -34,72 +37,80 @@ setContext('AppEditorContext', {
     selectedComponent,
     mode,
     connectingInput,
-    breakpoint
+    breakpoint,
+    runnableComponents
 });
-function clearSelectionOnPreview() {
-    if ($mode === 'preview') {
-        $selectedComponent = undefined;
-    }
-}
 let mounted = false;
 onMount(() => {
     mounted = true;
 });
 $: mounted && ($worldStore = buildWorld($staticOutputs));
-$: $mode && $selectedComponent && clearSelectionOnPreview();
 $: selectedTab = $selectedComponent ? 'settings' : 'insert';
 $: previewing = $mode === 'preview';
 $: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
 </script>
 
-{#if initialMode !== 'preview'}
-	<AppEditorHeader bind:title={$appStore.title} bind:mode={$mode} bind:breakpoint={$breakpoint} />
-{/if}
+{#if !$userStore?.operator}
+	{#if initialMode !== 'preview'}
+		<AppEditorHeader bind:title={$appStore.title} bind:mode={$mode} bind:breakpoint={$breakpoint} />
+	{/if}
 
-<SplitPanesWrapper class="max-w-full overflow-hidden">
-	<Pane size={previewing ? 0 : 20} minSize={previewing ? 0 : 20} maxSize={40}>
-		<ContextPanel appPath={path} />
-	</Pane>
-	<Pane size={previewing ? 100 : 60}>
-		<div class="p-4 bg-gray-100 h-full w-full">
-			{#if $appStore.grid}
-				<div class={classNames('mx-auto h-full', width)}>
-					<GridEditor />
-				</div>
-			{/if}
-		</div>
-	</Pane>
-	<Pane size={previewing ? 0 : 25} minSize={previewing ? 0 : 20} maxSize={40}>
-		<Tabs bind:selected={selectedTab}>
-			<Tab value="insert" size="xs">
-				<div class="m-1 flex flex-row gap-2">
-					<Icon data={faPlus} />
-					<span>Insert</span>
-				</div>
-			</Tab>
-			<Tab value="settings" size="xs">
-				<div class="m-1 flex flex-row gap-2">
-					<Icon data={faSliders} />
-					<span>Settings</span>
-				</div>
-			</Tab>
-			<svelte:fragment slot="content">
-				<TabContent value="settings">
-					{#if $selectedComponent !== undefined}
-						{#each $appStore.grid as gridItem (gridItem.id)}
-							{#if gridItem.data.id === $selectedComponent}
-								<ComponentPanel bind:component={gridItem.data} />
-							{/if}
-						{/each}
+	{#if previewing}
+		<AppPreview app={$appStore} />
+	{:else}
+		<SplitPanesWrapper class="max-w-full overflow-hidden">
+			<Pane size={20} minSize={15} maxSize={40}>
+				<ContextPanel appPath={path} />
+			</Pane>
+			<Pane size={60}>
+				<div class="p-4 bg-gray-100 min-h-full w-full relative">
+					{#if $appStore.grid}
+						<div class={classNames('mx-auto h-full', width)}>
+							<GridEditor />
+						</div>
 					{/if}
-					{#if $selectedComponent === undefined}
-						<div class="p-4 text-sm">No component selected.</div>
+					{#if $connectingInput.opened}
+						<div
+							class="absolute top-0 left-0 w-full h-full bg-black border-2 bg-opacity-25 z-1 flex justify-center items-center"
+						/>
 					{/if}
-				</TabContent>
-				<TabContent value="insert">
-					<ComponentList />
-				</TabContent>
-			</svelte:fragment>
-		</Tabs>
-	</Pane>
-</SplitPanesWrapper>
+				</div>
+			</Pane>
+			<Pane size={30} minSize={25} maxSize={40}>
+				<Tabs bind:selected={selectedTab}>
+					<Tab value="insert" size="xs">
+						<div class="m-1 flex flex-row gap-2">
+							<Icon data={faPlus} />
+							<span>Insert</span>
+						</div>
+					</Tab>
+					<Tab value="settings" size="xs">
+						<div class="m-1 flex flex-row gap-2">
+							<Icon data={faSliders} />
+							<span>Settings</span>
+						</div>
+					</Tab>
+					<svelte:fragment slot="content">
+						<TabContent value="settings">
+							{#if $selectedComponent !== undefined}
+								{#each $appStore.grid as gridItem (gridItem.id)}
+									{#if gridItem.data.id === $selectedComponent}
+										<ComponentPanel bind:component={gridItem.data} />
+									{/if}
+								{/each}
+							{/if}
+							{#if $selectedComponent === undefined}
+								<div class="p-4 text-sm">No component selected.</div>
+							{/if}
+						</TabContent>
+						<TabContent value="insert">
+							<ComponentList />
+						</TabContent>
+					</svelte:fragment>
+				</Tabs>
+			</Pane>
+		</SplitPanesWrapper>
+	{/if}
+{:else}
+	App editor not available to operators
+{/if}

package/components/apps/editor/AppEditorHeader.svelte

@@ -31,10 +31,10 @@ async function save() {
         }
     })
         .then(() => {
-        sendUserToast('Saved successfully.');
+        sendUserToast('Saved');
     })
         .catch(() => {
-        sendUserToast('Error during saving. Please try again later.', true);
+        sendUserToast('Error during saving. Please try again later', true);
     })
         .finally(() => {
         loading.save = false;
@@ -44,7 +44,7 @@ async function save() {
 
 <div class="border-b flex flex-row justify-between py-1 px-4 items-center">
 	<input class="text-sm w-64" bind:value={title} />
-	<div class="flex gap-8">
+	<div class="flex gap-2">
 		<div>
 			<ToggleButtonGroup bind:selected={mode}>
 				<ToggleButton position="left" value="dnd" startIcon={{ icon: faHand }} size="xs">
@@ -66,7 +66,7 @@ async function save() {
 			</ToggleButtonGroup>
 		</div>
 	</div>
-	<div class="flex flex-row gap-2">
+	<div class="flex flex-row gap-2 w-64 justify-end">
 		<Button color="dark" size="xs" variant="border" startIcon={{ icon: faExternalLink }}>
 			Publish
 		</Button>

package/components/apps/editor/AppPreview.svelte

@@ -0,0 +1,42 @@
+<script>import { onMount, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { buildWorld } from '../rx';
+import GridEditor from './GridEditor.svelte';
+import { classNames } from '../../../utils';
+export let app;
+const appStore = writable(app);
+const worldStore = writable(undefined);
+const staticOutputs = writable({});
+const selectedComponent = writable(undefined);
+const mode = writable('preview');
+const breakpoint = writable('lg');
+const connectingInput = writable({
+    opened: false,
+    input: undefined
+});
+const runnableComponents = writable({});
+setContext('AppEditorContext', {
+    worldStore,
+    staticOutputs,
+    app: appStore,
+    selectedComponent,
+    mode,
+    connectingInput,
+    breakpoint,
+    runnableComponents
+});
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: mounted && ($worldStore = buildWorld($staticOutputs));
+$: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
+</script>
+
+<div class="h-full w-5/6 mx-auto">
+	{#if $appStore.grid}
+		<div class={classNames('mx-auto h-full', width)}>
+			<GridEditor />
+		</div>
+	{/if}
+</div>

package/components/apps/editor/AppPreview.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { App } from '../types';
+declare const __propDef: {
+    props: {
+        app: App;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppPreviewProps = typeof __propDef.props;
+export type AppPreviewEvents = typeof __propDef.events;
+export type AppPreviewSlots = typeof __propDef.slots;
+export default class AppPreview extends SvelteComponentTyped<AppPreviewProps, AppPreviewEvents, AppPreviewSlots> {
+}
+export {};