windmill-components 1.58.1 → 1.60.1

package/components/apps/editor/AppEditorHeader.svelte

@@ -24,6 +24,7 @@ import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils';
+import { toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 async function hash(message) {
@@ -48,34 +49,30 @@ let publishDrawerOpen = false;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
-function toStatic() {
-    const newApp = JSON.parse(JSON.stringify($app));
-    newApp.grid.forEach((x) => {
-        let c = x.data;
-        if (c.componentInput?.type == 'runnable') {
-            c.componentInput.value = $staticExporter[x.id]();
-        }
-    });
-    return { app: newApp, summary: $summary };
-}
 async function computeTriggerables() {
-    const allTriggers = await Promise.all($app.grid.map(async (x) => {
+    const allTriggers = await Promise.all($app.grid
+        .flatMap((x) => {
         let c = x.data;
-        if (c.componentInput?.type == 'runnable') {
-            const staticInputs = Object.fromEntries(Object.entries(c.componentInput.fields ?? {})
+        let r = [c.componentInput];
+        if (c.type === 'tablecomponent') {
+            r.push(...c.actionButtons.map((x) => x.componentInput));
+        }
+        return r.filter((x) => x);
+    })
+        .map(async (input) => {
+        if (input?.type == 'runnable') {
+            const staticInputs = Object.fromEntries(Object.entries(input.fields ?? {})
                 .filter(([k, v]) => v.type == 'static')
                 .map(([k, v]) => {
                 return [k, v['value']];
             }));
-            if (c.componentInput.runnable?.type == 'runnableByName') {
-                let hex = await hash(c.componentInput.runnable.inlineScript?.content);
+            if (input.runnable?.type == 'runnableByName') {
+                let hex = await hash(input.runnable.inlineScript?.content);
                 return [`rawscript/${hex}`, staticInputs];
             }
-            else if (c.componentInput.runnable?.type == 'runnableByPath') {
-                return [
-                    `${c.componentInput.runnable.runType}/${c.componentInput.runnable.path}`,
-                    staticInputs
-                ];
+            else if (input.runnable?.type == 'runnableByPath') {
+                let prefix = input.runnable.runType !== 'hubscript' ? input.runnable.runType : 'script';
+                return [`${prefix}/${input.runnable.path}`, staticInputs];
             }
         }
         return [];
@@ -96,6 +93,7 @@ async function createApp(path) {
                 policy
             }
         });
+        closeSaveDrawer();
         goto(`/apps/edit/${appId}`);
     }
     catch (e) {
@@ -353,9 +351,9 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 		<div class="hidden lg:block">
 			<ToggleButtonGroup bind:selected={$app.fullscreen}>
 				<ToggleButton position="left" value={false} size="xs">
-					<div class="flex gap-1 justify-start">
+					<div class="flex gap-1 justify-start items-center">
 						<AlignHorizontalSpaceAround size={14} />
-						<Tooltip>
+						<Tooltip light>
 							The max width is 1168px and the content stay centered instead of taking the full page
 							width
 						</Tooltip>
@@ -376,16 +374,23 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 					displayName: 'JSON',
 					icon: faFileExport,
 					action: () => {
-						appExport.open()
+						appExport.open($app)
 					}
 				},
 				{
 					displayName: 'Publish to Hub',
 					icon: faGlobe,
 					action: () => {
-						const url = appToHubUrl(toStatic())
+						const url = appToHubUrl(toStatic($app, $staticExporter, $summary))
 						window.open(url.toString(), '_blank')
 					}
+				},
+				{
+					displayName: 'Hub compatible JSON',
+					icon: faFileExport,
+					action: () => {
+						appExport.open(toStatic($app, $staticExporter, $summary).app)
+					}
 				}
 			]}
 		>
@@ -402,7 +407,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 				<span class="hidden md:inline">Debug Runs</span>
 			</Button>
 		</span>
-		<AppExportButton bind:this={appExport} app={$app} />
+		<AppExportButton bind:this={appExport} />
 		<Button
 			on:click={() => (publishDrawerOpen = true)}
 			color="light"

package/components/apps/editor/AppExportButton.svelte

@@ -6,10 +6,11 @@ import { Highlight } from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import { Button } from '../../common';
 let jsonViewerDrawer;
-export function open() {
+let app = undefined;
+export function open(app_l) {
+    app = app_l;
     jsonViewerDrawer?.toggleDrawer();
 }
-export let app;
 </script>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
@@ -25,7 +26,7 @@ export let app;
 			>
 				Copy content
 			</Button>
-			<Highlight language={json} code={JSON.stringify(app, null, 4)} />
+			<Highlight language={json} code={JSON.stringify(app ?? {}, null, 4)} />
 		</div>
 	</DrawerContent>
 </Drawer>

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

@@ -2,8 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { App } from '../types';
 declare const __propDef: {
     props: {
-        open?: (() => void) | undefined;
-        app: App;
+        open?: ((app_l: App) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,6 +13,6 @@ export type AppExportButtonProps = typeof __propDef.props;
 export type AppExportButtonEvents = typeof __propDef.events;
 export type AppExportButtonSlots = typeof __propDef.slots;
 export default class AppExportButton extends SvelteComponentTyped<AppExportButtonProps, AppExportButtonEvents, AppExportButtonSlots> {
-    get open(): () => void;
+    get open(): (app_l: App) => void;
 }
 export {};

package/components/apps/editor/GridEditor.svelte

@@ -125,7 +125,6 @@ const onpointerup = () => {
 							'h-full w-full flex justify-center align-center items-center',
 							gridComponent.data.card ? 'border border-gray-100' : ''
 						)}
-						on:click|preventDefault|capture|once|stopPropagation
 					>
 						<ComponentEditor
 							{pointerdown}

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

@@ -5,8 +5,6 @@ declare const __propDef: {
         policy: Policy;
     };
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/componentsPanel/data.js

@@ -220,10 +220,9 @@ const display = {
                 value: `<img
 	src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
 >
-<div class="absolute top-4 left-2  text-white">
+<h1 class="absolute top-4 left-2 text-white">
 	Hello \${ctx.username}
-</div>			
-`,
+</h1>`,
             },
             configuration: {},
             card: false
@@ -251,6 +250,13 @@ const display = {
                     type: 'static',
                     fieldType: 'text',
                     value: '',
+                    tooltip: 'CSS rules like "color: blue;"',
+                },
+                copyButton: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    onlyStatic: true,
                 },
             },
             card: false

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -7,7 +7,7 @@ import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import { fly } from 'svelte/transition';
 import Editor from '../../../Editor.svelte';
-import { scriptLangToEditorLang } from '../../../../utils';
+import { emptySchema, scriptLangToEditorLang } from '../../../../utils';
 import Tooltip from '../../../Tooltip.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
@@ -15,7 +15,7 @@ export let name = undefined;
 export let id;
 const { runnableComponents } = getContext('AppEditorContext');
 let editor;
-let validCode = false;
+let validCode = true;
 async function inferInlineScriptSchema(language, content, schema) {
     try {
         await inferArgs(language, content, schema);
@@ -28,8 +28,8 @@ async function inferInlineScriptSchema(language, content, schema) {
     return schema;
 }
 onMount(async () => {
-    if (inlineScript) {
-        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, inlineScript?.schema);
+    if (inlineScript && !inlineScript.schema) {
+        inlineScript.schema = await inferInlineScriptSchema(inlineScript?.language, inlineScript?.content, emptySchema());
     }
 });
 const dispatch = createEventDispatcher();
@@ -73,7 +73,7 @@ let runLoading = false;
 					startIcon={{ icon: faTrash }}
 					on:click={() => dispatch('delete')}
 				/>
-			{:else}
+			{:else if $runnableComponents[id] != undefined}
 				<Button
 					loading={runLoading}
 					size="xs"
@@ -84,9 +84,8 @@ let runLoading = false;
 						runLoading = false
 					}}
 				>
-					Run&nbsp;<Tooltip
-						>Ctrl+Enter to run the script and see the result in the component directly</Tooltip
-					>
+					Run&nbsp;
+					<Tooltip light>Ctrl+Enter</Tooltip>
 				</Button>
 			{/if}
 

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte

@@ -13,7 +13,7 @@ export let id;
 async function fork(path) {
     let { content, language, schema } = await getScriptByPath(path);
     if (componentInput && componentInput.type == 'runnable') {
-        if (!schema || Object.keys(schema).length == 0) {
+        if (!schema || typeof schema == 'string' || Object.keys(schema).length == 0) {
             schema = emptySchema();
             await inferArgs(language, content, schema);
         }

package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -68,7 +68,7 @@ $: {
 }
 </script>
 
-<div class="h-full flex flex-col gap-4">
+<div class="min-h-full flex flex-col gap-4">
 	<PanelSection title="Inline scripts" smallPadding>
 		<div class="flex flex-col gap-2 w-full">
 			{#if runnablesByName.length > 0}

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

@@ -109,7 +109,10 @@ $: extraLib =
 					{:else if component.componentInput.type === 'connected' && component.componentInput !== undefined}
 						<ConnectedInputEditor bind:componentInput={component.componentInput} />
 					{:else if component.componentInput?.type === 'runnable' && component.componentInput !== undefined}
-						<RunnableInputEditor bind:appInput={component.componentInput} />
+						<RunnableInputEditor
+							bind:appInput={component.componentInput}
+							defaultUserInput={component.type == 'formcomponent'}
+						/>
 					{/if}
 				</div>
 				{#if component.componentInput?.type === 'runnable' && Object.keys(component.componentInput.fields ?? {}).length > 0}

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

@@ -12,7 +12,5 @@ export let componentInput;
 {:else if componentInput.type === 'static'}
 	<StaticInputEditor bind:componentInput />
 {:else if componentInput.type === 'user'}
-	<span class="text-2xs italic text-gray-6f00"
-		>Field's value is set by the user in the visible field</span
-	>
+	<span class="text-2xs italic text-gray-6f00">Field's value is set by the user</span>
 {/if}

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

@@ -1,9 +1,11 @@
 <script>import { Badge, ToggleButton, ToggleButtonGroup } from '../../../common';
-import { capitalize } from '../../../../utils';
+import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
 import { faArrowRight, faPen, faTableCells, 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';
 export let inputSpecs;
 export let userInputEnabled = true;
 export let staticOnly = false;
@@ -19,10 +21,17 @@ const { connectingInput } = getContext('AppEditorContext');
 			<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(inputSpecKey) : inputSpecKey}
+						{shouldCapitalize
+							? capitalize(addWhitespaceBeforeCapitals(inputSpecKey))
+							: inputSpecKey}
+						{#if input.tooltip}
+							<Tooltip>
+								{input.tooltip}
+							</Tooltip>
+						{/if}
 					</span>
 
-					<div class="flex gap-2 flex-wrap items-center">
+					<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))}[]`
@@ -33,7 +42,6 @@ const { connectingInput } = getContext('AppEditorContext');
 							<ToggleButtonGroup
 								bind:selected={inputSpecs[inputSpecKey].type}
 								on:selected={(e) => {
-									console.log(inputSpecs[inputSpecKey])
 									if (e.detail == 'connected' && !inputSpecs[inputSpecKey]['connection']) {
 										$connectingInput = {
 											opened: true,
@@ -43,45 +51,56 @@ const { connectingInput } = getContext('AppEditorContext');
 									}
 								}}
 							>
-								<ToggleButton
-									title="Static"
-									position="left"
-									value="static"
-									startIcon={{ icon: faPen }}
-									size="xs"
-									iconOnly
-								/>
-								{#if rowColumns}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
 									<ToggleButton
-										title="From Row"
-										position="center"
-										value="row"
-										startIcon={{ icon: faTableCells }}
+										position="left"
+										value="static"
+										startIcon={{ icon: faPen }}
 										size="xs"
 										iconOnly
-										disabled={staticOnly}
 									/>
+									<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"
+											disabled={staticOnly}
+										>
+											<Tooltip>
+												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
+											disabled={staticOnly}
+										/>
+										<svelte:fragment slot="text">User Input</svelte:fragment>
+									</Popover>
 								{/if}
-								{#if userInputEnabled && (!input.format?.startsWith('resource-') || true)}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
 									<ToggleButton
-										title="User Input"
-										position="center"
-										value="user"
-										startIcon={{ icon: faUser }}
+										position="right"
+										value="connected"
+										startIcon={{ icon: faArrowRight }}
 										size="xs"
 										iconOnly
 										disabled={staticOnly}
 									/>
-								{/if}
-								<ToggleButton
-									title="Connect"
-									position="right"
-									value="connected"
-									startIcon={{ icon: faArrowRight }}
-									size="xs"
-									iconOnly
-									disabled={staticOnly}
-								/>
+									<svelte:fragment slot="text">Connect</svelte:fragment>
+								</Popover>
 							</ToggleButtonGroup>
 						{/if}
 					</div>

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

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { BaseAppComponent } from '../../types';
 declare const __propDef: {
     props: {
-        inputSpecs: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput) & {
-            onlyStatic?: boolean;
-        }>;
+        inputSpecs: BaseAppComponent['configuration'];
         userInputEnabled?: boolean | undefined;
         staticOnly?: boolean | undefined;
         shouldCapitalize?: boolean | undefined;

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

@@ -13,7 +13,7 @@ const { selectedComponent, staticOutputs } = getContext('AppEditorContext');
 function addComponent() {
     const actionId = getNextId(components.map((x) => x.id.split('-')[1]));
     const newComponent = {
-        id: `${id}-${actionId}`,
+        id: `${id}_${actionId}`,
         type: 'buttoncomponent',
         configuration: {
             label: {

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

@@ -2,5 +2,5 @@
 </script>
 
 {#if componentInput}
-	<input type="text" placeholder="column" bind:value={componentInput.column} />
+	<input type="text" placeholder="column name" bind:value={componentInput.column} />
 {/if}

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

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

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

@@ -3,6 +3,7 @@ import type { ResultAppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
+        defaultUserInput?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -13,7 +13,7 @@ $: componentInput && onchange?.();
 	{#if componentInput.fieldType === 'number'}
 		<input type="number" bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'textarea'}
-		<textarea type="text" bind:value={componentInput.value} />
+		<textarea bind:value={componentInput.value} />
 	{:else if componentInput.fieldType === 'boolean'}
 		<Toggle bind:checked={componentInput.value} />
 	{:else if componentInput.fieldType === 'select'}

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

@@ -9,6 +9,7 @@ import { getContext } from 'svelte';
 import { loadSchema, schemaToInputsSpec } from '../../../utils';
 import { emptySchema } from '../../../../../utils';
 export let appInput;
+export let defaultUserInput = false;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
@@ -19,7 +20,7 @@ async function loadSchemaFromTriggerable(path, runType) {
 async function pickScript(path) {
     if (appInput.type === 'runnable') {
         const schema = await loadSchemaFromTriggerable(path, 'script');
-        const fields = schemaToInputsSpec(schema);
+        const fields = schemaToInputsSpec(schema, defaultUserInput);
         appInput.runnable = {
             type: 'runnableByPath',
             path,
@@ -32,7 +33,7 @@ async function pickScript(path) {
 async function pickFlow(path) {
     if (appInput.type === 'runnable') {
         const schema = await loadSchemaFromTriggerable(path, 'flow');
-        const fields = schemaToInputsSpec(schema);
+        const fields = schemaToInputsSpec(schema, defaultUserInput);
         appInput.runnable = {
             type: 'runnableByPath',
             path,
@@ -45,7 +46,7 @@ async function pickFlow(path) {
 async function pickHubScript(path) {
     if (appInput.type === 'runnable') {
         const schema = await loadSchemaFromTriggerable(path, 'hubscript');
-        const fields = schemaToInputsSpec(schema);
+        const fields = schemaToInputsSpec(schema, defaultUserInput);
         appInput.runnable = {
             type: 'runnableByPath',
             path,

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

@@ -3,6 +3,7 @@ import type { ResultAppInput } from '../../../inputType';
 declare const __propDef: {
     props: {
         appInput: ResultAppInput;
+        defaultUserInput?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;