windmill-components 1.46.3 → 1.55.0

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

@@ -0,0 +1,188 @@
+<script>import { page } from '$app/stores';
+import Alert from '../../../common/alert/Alert.svelte';
+import Button from '../../../common/button/Button.svelte';
+import SchemaForm from '../../../SchemaForm.svelte';
+import TestJobLoader from '../../../TestJobLoader.svelte';
+import { AppService } from '../../../../gen';
+import { workspaceStore } from '../../../../stores';
+import { faRefresh } from '@fortawesome/free-solid-svg-icons';
+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 runnable;
+export let extraQueryParams = {};
+export let autoRefresh = true;
+export let result = undefined;
+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 };
+function setStaticInputsToArgs() {
+    Object.entries(inputs ?? {}).forEach(([key, value]) => {
+        if (value.type === 'static') {
+            args[key] = value.value;
+        }
+    });
+    args = args;
+}
+$: inputs && setStaticInputsToArgs();
+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 && testJobLoader) {
+        executeComponent();
+    }
+    return areAllArgsValid;
+}
+$: isValid = argMergedArgsValid(mergedArgs, testJobLoader);
+// Test job internal state
+let testJob = undefined;
+let testJobLoader = undefined;
+$: outputs = $worldStore?.outputsById[id];
+async function loadSchemaFromTriggerable(workspace, path, runType) {
+    schema = await loadSchema(workspace, path, runType);
+}
+// Only loads the schema
+$: if ($workspaceStore && runnable?.type === 'runnableByPath' && !schema) {
+    // Remote schema needs to be loaded
+    const { path, runType } = runnable;
+    loadSchemaFromTriggerable($workspaceStore, path, runType);
+}
+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) {
+    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) => {
+        delete schemaWithoutExtraQueries.properties[key];
+    });
+    inputs = schemaToInputsSpec(schemaWithoutExtraQueries);
+}
+let schemaStripped = undefined;
+function stripSchema(schema, inputs) {
+    schemaStripped = JSON.parse(JSON.stringify(schema));
+    // Remove hidden static inputs
+    Object.keys(inputs ?? {}).forEach((key) => {
+        const input = inputs[key];
+        if (input.type === 'static' && !input.visible && schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+        if (input.type === 'connected' && schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+    });
+    // Remove extra query params from schema
+    Object.keys(extraQueryParams).forEach((key) => {
+        if (schemaStripped !== undefined) {
+            delete schemaStripped.properties[key];
+        }
+    });
+}
+$: schema && inputs && stripSchema(schema, inputs);
+$: disabledArgs = Object.keys(inputs ?? {}).reduce((disabledArgsAccumulator, inputName) => {
+    if (inputs[inputName].type === 'static') {
+        disabledArgsAccumulator = [...disabledArgsAccumulator, inputName];
+    }
+    return disabledArgsAccumulator;
+}, []);
+async function executeComponent() {
+    if (!schema) {
+        return;
+    }
+    outputs?.loading?.set(true);
+    await testJobLoader?.abstractRun(() => {
+        const requestBody = {
+            args: mergedArgs,
+            force_viewer_static_fields: {}
+        };
+        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 (runnable?.type === 'runnableByPath') {
+            const { path, runType } = runnable;
+            requestBody['path'] = `${runType}/${path}`;
+        }
+        return AppService.executeComponent({
+            workspace: $workspaceStore,
+            path: pagePath,
+            requestBody
+        });
+    });
+}
+export async function runComponent() {
+    await executeComponent();
+}
+</script>
+
+{#each Object.keys(inputs ?? {}) as key}
+	<InputValue input={inputs[key]} bind:value={runnableInputValues[key]} />
+{/each}
+
+<TestJobLoader
+	on:done={() => {
+		if (testJob && outputs) {
+			outputs.result?.set(testJob?.result)
+			outputs.loading?.set(false)
+			result = testJob.result
+		}
+	}}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+	bind:this={testJobLoader}
+/>
+
+{#if schemaStripped !== undefined && (autoRefresh || forceSchemaDisplay)}
+	<SchemaForm schema={schemaStripped} bind:args {isValid} {disabledArgs} shouldHideNoInputs />
+{/if}
+
+{#if !runnable}
+	<Alert type="warning" size="xs" class="mt-2" title="Missing runnable">
+		Please select a runnable
+	</Alert>
+{:else if autoRefresh === true}
+	{#if isValid}
+		<div class="flex flex-row-reverse">
+			<Button
+				size="xs"
+				color="light"
+				variant="border"
+				on:click={() => executeComponent()}
+				disabled={!isValid}
+				startIcon={{ icon: faRefresh, classes: testIsLoading ? 'animate-spin' : '' }}
+				iconOnly
+			/>
+		</div>
+		<slot />
+	{:else}
+		<Alert type="warning" size="xs" class="mt-2" title="Missing inputs">
+			Please fill in all the inputs
+		</Alert>
+	{/if}
+{:else}
+	<slot />
+{/if}

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInputs, Runnable } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        inputs: AppInputs;
+        runnable: Runnable;
+        extraQueryParams?: Record<string, any> | undefined;
+        autoRefresh?: boolean | undefined;
+        result?: any;
+        forceSchemaDisplay?: boolean | undefined;
+        runComponent?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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(): () => 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

@@ -0,0 +1,28 @@
+<script>import Toggle from '../../../Toggle.svelte';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+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={configuration.label} bind:value={labelValue} />
+
+<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	<Toggle
+		bind:value
+		options={{ right: labelValue }}
+		on:change={(e) => {
+			outputs.result.set(e.detail)
+		}}
+	/>
+</AlignWrapper>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppCheckboxProps = typeof __propDef.props;
+export type AppCheckboxEvents = typeof __propDef.events;
+export type AppCheckboxSlots = typeof __propDef.slots;
+export default class AppCheckbox extends SvelteComponentTyped<AppCheckboxProps, AppCheckboxEvents, AppCheckboxSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -0,0 +1,116 @@
+<script>import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
+import { onMount, setContext } from 'svelte';
+import { Pane } from 'svelte-splitpanes';
+import { writable } from 'svelte/store';
+import { buildWorld } from '../rx';
+import AppEditorHeader from './AppEditorHeader.svelte';
+import GridEditor from './GridEditor.svelte';
+import Tabs from '../../common/tabs/Tabs.svelte';
+import TabContent from '../../common/tabs/TabContent.svelte';
+import { Tab } from '../../common';
+import ComponentList from './componentsPanel/ComponentList.svelte';
+import Icon from 'svelte-awesome';
+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';
+const appStore = writable(app);
+const worldStore = writable(undefined);
+const staticOutputs = writable({});
+const selectedComponent = writable(undefined);
+const mode = writable(initialMode);
+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));
+$: selectedTab = $selectedComponent ? 'settings' : 'insert';
+$: previewing = $mode === 'preview';
+$: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
+</script>
+
+{#if !$userStore?.operator}
+	{#if initialMode !== 'preview'}
+		<AppEditorHeader bind:title={$appStore.title} bind:mode={$mode} bind:breakpoint={$breakpoint} />
+	{/if}
+
+	{#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 $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}
+				</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/AppEditor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { App, EditorMode } from '../types';
+declare const __propDef: {
+    props: {
+        app: App;
+        path: string;
+        initialMode?: EditorMode | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppEditorProps = typeof __propDef.props;
+export type AppEditorEvents = typeof __propDef.events;
+export type AppEditorSlots = typeof __propDef.slots;
+export default class AppEditor extends SvelteComponentTyped<AppEditorProps, AppEditorEvents, AppEditorSlots> {
+}
+export {};

package/components/apps/editor/AppEditorHeader.svelte

@@ -0,0 +1,75 @@
+<script>import { page } from '$app/stores';
+import Button from '../../common/button/Button.svelte';
+import ToggleButton from '../../common/toggleButton/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton/ToggleButtonGroup.svelte';
+import { AppService, Policy } from '../../../gen';
+import { userStore, workspaceStore } from '../../../stores';
+import { faDesktopAlt, faDisplay, faExternalLink, faHand, faMobileAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { sendUserToast } from '../../../utils';
+const { app } = getContext('AppEditorContext');
+export let title = $app.title || '';
+export let mode;
+export let breakpoint;
+const loading = {
+    publish: false,
+    save: false
+};
+async function save() {
+    loading.save = true;
+    AppService.updateApp({
+        workspace: $workspaceStore,
+        path: $page.params.path,
+        requestBody: {
+            value: $app,
+            summary: title,
+            policy: {
+                triggerables: {},
+                execution_mode: Policy.execution_mode.PUBLISHER,
+                on_behalf_of: `u/${$userStore?.username}`
+            }
+        }
+    })
+        .then(() => {
+        sendUserToast('Saved');
+    })
+        .catch(() => {
+        sendUserToast('Error during saving. Please try again later', true);
+    })
+        .finally(() => {
+        loading.save = false;
+    });
+}
+</script>
+
+<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-2">
+		<div>
+			<ToggleButtonGroup bind:selected={mode}>
+				<ToggleButton position="left" value="dnd" startIcon={{ icon: faHand }} size="xs">
+					Editor
+				</ToggleButton>
+				<ToggleButton position="right" value="preview" startIcon={{ icon: faDisplay }} size="xs">
+					Preview
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+		<div>
+			<ToggleButtonGroup bind:selected={breakpoint}>
+				<ToggleButton position="left" value="sm" startIcon={{ icon: faMobileAlt }} size="xs">
+					Mobile
+				</ToggleButton>
+				<ToggleButton position="right" value="lg" startIcon={{ icon: faDesktopAlt }} size="xs">
+					Desktop
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+	</div>
+	<div class="flex flex-row gap-2 w-64 justify-end">
+		<Button color="dark" size="xs" variant="border" startIcon={{ icon: faExternalLink }}>
+			Publish
+		</Button>
+		<Button loading={loading.save} on:click={save} color="dark" size="xs">Save</Button>
+	</div>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { EditorBreakpoint, EditorMode } from '../types';
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        mode: EditorMode;
+        breakpoint: EditorBreakpoint;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppEditorHeaderProps = typeof __propDef.props;
+export type AppEditorHeaderEvents = typeof __propDef.events;
+export type AppEditorHeaderSlots = typeof __propDef.slots;
+export default class AppEditorHeader extends SvelteComponentTyped<AppEditorHeaderProps, AppEditorHeaderEvents, AppEditorHeaderSlots> {
+}
+export {};