windmill-components 1.58.1 → 1.60.1

package/components/SchemaModal.svelte

@@ -35,6 +35,12 @@ export let oldArgName = undefined;
 let resource_type = undefined;
 const dispatch = createEventDispatcher();
 let drawer;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        dispatch('save');
+    }
+}
 export function openDrawer() {
     drawer.openDrawer();
     resource_type = property.format?.substring(5);
@@ -66,6 +72,8 @@ else {
 }
 </script>
 
+<svelte:window on:keyup={handleKeyUp} />
+
 <Drawer bind:this={drawer} placement="right">
 	<DrawerContent on:close={clearModal} title="Add an argument">
 		<div class="flex flex-col gap-6">

package/components/ScriptBuilder.svelte

@@ -174,7 +174,6 @@ $: kind = script.kind;
 					bind:this={summaryC}
 					bind:value={script.summary}
 					placeholder="A short summary of the script displayed when the script is listed"
-					rows="1"
 				/>
 				<h2 class="border-b pb-1 mt-8 mb-6">Language</h2>
 				<div class="flex flex-row gap-2 flex-wrap">

package/components/Tooltip.svelte

@@ -1,11 +1,12 @@
 <script>import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import Popover from './Popover.svelte';
+export let light = false;
 </script>
 
 <Popover notClickable>
 	<Icon
-		class="text-gray-500 font-thin inline-block align-middle w-4"
+		class="{light ? 'text-gray-300' : ' text-gray-500'} font-thin inline-block align-middle w-4"
 		data={faInfoCircle}
 		scale={0.8}
 	/>

package/components/Tooltip.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        light?: boolean | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/components/DisplayComponent.svelte

@@ -6,7 +6,7 @@ let result = undefined;
 export const staticOutputs = ['result', 'loading'];
 </script>
 
-<RunnableWrapper bind:result bind:componentInput {id}>
+<RunnableWrapper flexWrap bind:result bind:componentInput {id}>
 	<div class="w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm">
 		Results
 	</div>

package/components/apps/components/buttons/AppButton.svelte

@@ -40,6 +40,7 @@ $: loading = isLoading && ownClick;
 <InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
+	flexWrap
 	bind:runnableComponent
 	bind:componentInput
 	{id}
@@ -66,13 +67,9 @@ $: loading = isLoading && ownClick;
 			}}
 			{size}
 			{color}
+			{loading}
 		>
 			{labelValue}
-			{#if !loading}
-				<span class="w-5" />
-			{:else}
-				<Loader2 class="animate-spin ml-1" size={14} />
-			{/if}
 		</Button>
 	</AlignWrapper>
 </RunnableWrapper>

package/components/apps/components/dataDisplay/AppBarChart.svelte

@@ -41,7 +41,7 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		{#if lineChart}
 			<Line {data} {options} />

package/components/apps/components/dataDisplay/AppHtml.svelte

@@ -9,7 +9,7 @@ export const staticOutputs = ['result', 'loading'];
 let result = undefined;
 </script>
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 		<div
 			on:pointerdown={(e) => {

package/components/apps/components/dataDisplay/AppPieChart.svelte

@@ -36,7 +36,7 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		{#if doughnut}
 			<Doughnut {data} {options} />

package/components/apps/components/dataDisplay/AppScatterChart.svelte

@@ -39,7 +39,7 @@ $: data = {
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		<Scatter {data} {options} />
 	{/if}

package/components/apps/components/dataDisplay/AppText.svelte

@@ -1,4 +1,8 @@
-<script>import AlignWrapper from '../helpers/AlignWrapper.svelte';
+<script>import { Clipboard } from 'lucide-svelte';
+import { copyToClipboard } from '../../../../utils';
+import Button from '../../../common/button/Button.svelte';
+import Popover from '../../../Popover.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
@@ -10,6 +14,7 @@ export const staticOutputs = ['result', 'loading'];
 let extraStyle = undefined;
 let result = undefined;
 let style = undefined;
+let copyButton;
 function getComponent() {
     switch (style) {
         case 'Title':
@@ -44,20 +49,38 @@ $: style && (classes = getClasses());
 
 <InputValue {id} input={configuration.extraStyle} bind:value={extraStyle} />
 <InputValue {id} input={configuration.style} bind:value={style} />
+<InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
 		{#if !result || result === ''}
 			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
 				No text
 			</div>
-		{:else}<svelte:element
-				this={component}
-				class="whitespace-pre-wrap {classes}"
-				style={extraStyle}
-			>
-				{String(result)}
-			</svelte:element>
+		{:else}
+			<div class="flex flex-wrap gap-2">
+				<svelte:element
+					this={component}
+					class="whitespace-pre-wrap {classes}"
+					style={extraStyle}
+				>
+					{String(result)}
+				</svelte:element>
+				{#if copyButton && result}
+					<Popover notClickable>
+						<Button
+							size="xs"
+							btnClasses="!px-2"
+							on:click={() => copyToClipboard(result)}
+						>
+							<Clipboard size={14} strokeWidth={2} />
+						</Button>
+						<svelte:fragment slot="text">
+							Copy to clipboard
+						</svelte:fragment>
+					</Popover>
+				{/if}
+			</div>
 		{/if}
 	</AlignWrapper>
 </RunnableWrapper>

package/components/apps/components/dataDisplay/AppTimeseries.svelte

@@ -50,7 +50,7 @@ $: data = {
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		<Scatter {data} {options} />
 	{/if}

package/components/apps/components/form/AppForm.svelte

@@ -1,5 +1,7 @@
 <script>import { Button } from '../../../common';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
+import { Icon } from 'svelte-awesome';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
@@ -16,6 +18,8 @@ let color;
 let size;
 let runnableComponent;
 let isLoading = false;
+$: noInputs =
+    componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
 $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
@@ -32,6 +36,7 @@ $: outputs?.loading.subscribe({
 <InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
+	defaultUserInput
 	noMinH
 	bind:runnableComponent
 	bind:componentInput
@@ -39,39 +44,47 @@ $: outputs?.loading.subscribe({
 	{extraQueryParams}
 	autoRefresh={false}
 	forceSchemaDisplay={true}
+	runnableClass="!block"
 >
 	<AlignWrapper {horizontalAlignment}>
-		<div class="flex flex-col gap-2 px-4 w-full ">
+		<div class="flex flex-col gap-2 px-4 w-full">
 			<div>
-				{#if componentInput?.type != 'runnable' || Object.values(componentInput?.fields ?? {}).filter((x) => x.type == 'user').length == 0}
-					<span class="text-gray-600 italic text-sm py-2">
-						Run forms are meant to be associated with a runnable with some user inputs. Pick a
-						runnable and set some 'Runnable Inputs' to 'User Input'
-					</span>
+				{#if noInputs}
+					<div class="text-gray-600 italic text-sm my-4">
+						Run forms are associated with a runnable that has user inputs.
+						<br />
+						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+						<strong>
+							User Input
+							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+						</strong>
+					</div>
 				{/if}
 			</div>
 			<div class="flex justify-end">
-				<Button
-					loading={isLoading}
-					btnClasses="my-1"
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-						window.dispatchEvent(new Event('pointerup'))
-					}}
-					on:click={() => {
-						runnableComponent?.runComponent()
+				{#if !noInputs}
+					<Button
+						loading={isLoading}
+						btnClasses="my-1"
+						on:pointerdown={(e) => {
+							e?.stopPropagation()
+							window.dispatchEvent(new Event('pointerup'))
+						}}
+						on:click={() => {
+							runnableComponent?.runComponent()
 
-						if (recomputeIds) {
-							recomputeIds.forEach((id) => {
-								$runnableComponents[id]?.()
-							})
-						}
-					}}
-					{size}
-					{color}
-				>
-					{labelValue}
-				</Button>
+							if (recomputeIds) {
+								recomputeIds.forEach((id) => {
+									$runnableComponents[id]?.()
+								})
+							}
+						}}
+						{size}
+						{color}
+					>
+						{labelValue}
+					</Button>
+				{/if}
 			</div>
 		</div>
 	</AlignWrapper>

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

@@ -16,6 +16,9 @@ export let autoRefresh = true;
 export let result = undefined;
 export let forceSchemaDisplay = false;
 export let noMinH = false;
+export let defaultUserInput = false;
+export let flexWrap = false;
+export let wrapperClass = '';
 const { worldStore, runnableComponents, workspace, appPath, isEditor, jobs, noBackend } = getContext('AppEditorContext');
 onMount(() => {
     if (autoRefresh) {
@@ -87,7 +90,7 @@ async function loadSchemaAndInputsByName() {
 function reloadInputs(schema) {
     let schemaCopy = JSON.parse(JSON.stringify(schema));
     const result = {};
-    const newInputs = schemaToInputsSpec(schemaCopy);
+    const newInputs = schemaToInputsSpec(schemaCopy, defaultUserInput);
     if (!fields) {
         return newInputs;
     }
@@ -99,7 +102,9 @@ function reloadInputs(schema) {
             result[key] = newInput;
         }
         else {
-            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType)) {
+            if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
+                newInput.format !== oldInput.format ||
+                newInput.subFieldType !== oldInput.subFieldType) {
                 result[key] = newInput;
             }
             else {
@@ -188,7 +193,7 @@ async function executeComponent(noToast = false) {
         });
     });
     if (njob) {
-        $jobs = [...$jobs, { job: njob, component: id }];
+        $jobs = [{ job: njob, component: id }, ...$jobs];
     }
 }
 export async function runComponent() {
@@ -225,7 +230,7 @@ let lastStartedAt = Date.now();
 	bind:this={testJobLoader}
 />
 
-<div class="h-full flex relative flex-row flex-wrap">
+<div class="h-full flex relative flex-row flex-wrap {wrapperClass}">
 	{#if autoRefresh === true}
 		<div class="flex absolute top-1 right-1">
 			<RefreshButton componentId={id} />
@@ -234,8 +239,7 @@ let lastStartedAt = Date.now();
 	{#if schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0 && (autoRefresh || forceSchemaDisplay)}
 		<div class="px-2 h-fit min-h-0">
 			<SchemaForm
-				compact
-				flexWrap
+				{flexWrap}
 				schema={schemaStripped}
 				bind:args
 				{disabledArgs}
@@ -252,7 +256,8 @@ let lastStartedAt = Date.now();
 	{:else if result?.error}
 		<div class="p-2">
 			<Alert type="error" title="Error during execution">
-				<pre title={result.error} class="text-2xs whitespace-pre-wrap">{result.error}</pre>
+				See "Debug Runs" on the top right for more details
+				<pre title={result.error} class=" mt-2 text-2xs whitespace-pre-wrap">{result.error}</pre>
 			</Alert>
 			<slot />
 		</div>

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

@@ -10,6 +10,9 @@ declare const __propDef: {
         result?: any;
         forceSchemaDisplay?: boolean | undefined;
         noMinH?: boolean | undefined;
+        defaultUserInput?: boolean | undefined;
+        flexWrap?: boolean | undefined;
+        wrapperClass?: string | undefined;
         runComponent?: (() => Promise<void>) | undefined;
     };
     events: {

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

@@ -10,6 +10,9 @@ export let extraQueryParams = {};
 export let autoRefresh = true;
 export let runnableComponent = undefined;
 export let forceSchemaDisplay = false;
+export let defaultUserInput = false;
+export let flexWrap = false;
+export let runnableClass = '';
 const { staticExporter, noBackend } = getContext('AppEditorContext');
 if (noBackend && componentInput?.type == 'runnable') {
     result = componentInput?.['value'];
@@ -26,6 +29,8 @@ function isRunnableDefined() {
 	<slot />
 {:else if componentInput.type === 'runnable' && isRunnableDefined()}
 	<RunnableComponent
+		{flexWrap}
+		{defaultUserInput}
 		bind:this={runnableComponent}
 		bind:fields={componentInput.fields}
 		bind:result
@@ -35,6 +40,7 @@ function isRunnableDefined() {
 		{extraQueryParams}
 		{forceSchemaDisplay}
 		{noMinH}
+		wrapperClass={runnableClass}
 	>
 		<slot />
 	</RunnableComponent>

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

@@ -11,6 +11,9 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         runnableComponent?: RunnableComponent | undefined;
         forceSchemaDisplay?: boolean | undefined;
+        defaultUserInput?: boolean | undefined;
+        flexWrap?: boolean | undefined;
+        runnableClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/numberInputs/AppSliderInputs.svelte

@@ -28,7 +28,7 @@ $: if (value || !value) {
 <AlignWrapper {verticalAlignment}>
 	<div class="flex w-full gap-1 px-1">
 		<span>{min}</span>
-		<div class="grow">
+		<div class="grow ">
 			<Range bind:value {min} {max} />
 		</div>
 		<span>{max}</span>

package/components/apps/components/table/AppTable.svelte

@@ -14,7 +14,7 @@ export let componentInput;
 export let configuration;
 export let actionButtons;
 export const staticOutputs = ['selectedRow', 'loading', 'result', 'search'];
-$: result = [];
+let result = undefined;
 let search = undefined;
 let searchValue = '';
 let pagination = true;
@@ -75,8 +75,8 @@ function cellIsObject(x, props) {
 }
 let filteredResult = [];
 $: filteredResult && setOptions(filteredResult);
-$: search === 'By Component' && (filteredResult = searchInResult(result, searchValue));
-$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result);
+$: search === 'By Component' && (filteredResult = searchInResult(result ?? [], searchValue));
+$: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = result ?? []);
 $: outputs = $worldStore?.outputsById[id];
 function rerender() {
     table = createSvelteTable(options);
@@ -86,22 +86,22 @@ $: result && rerender();
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
 			{#if search !== 'Disabled'}
-				<div class="px-4 py-2">
+				<div class="px-2 py-1">
 					<div class="flex items-center">
-						<div>
+						<div class="grow max-w-[300px]">
 							<DebouncedInput placeholder="Search..." bind:value={searchValue} />
 						</div>
 					</div>
 				</div>
 			{/if}
 
-			<div class="overflow-auto flex-1 w-full">
-				<table class="divide-y divide-gray-300 w-full border-b border-b-gray-200">
-					<thead class="bg-gray-50 text-left">
+			<div class="overflow-x-auto flex-1 w-full">
+				<table class="relative w-full border-b border-b-gray-200">
+					<thead class="sticky top-0 bg-gray-50 text-left">
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -109,16 +109,22 @@ $: result && rerender();
 										{@const context = header?.getContext()}
 										{#if context}
 											{@const component = renderCell(header.column.columnDef.header, context)}
-											<th class="px-4 py-4 text-sm font-semibold">
-												{#if !header.isPlaceholder && component}
-													<svelte:component this={component} />
-												{/if}
+											<th class="!p-0">
+												<span class="block px-4 py-4 text-sm font-semibold border-b">
+													{#if !header.isPlaceholder && component}
+														<svelte:component this={component} />
+													{/if}
+												</span>
 											</th>
 										{/if}
 									{/if}
 								{/each}
 								{#if actionButtons.length > 0}
-									<th class="px-4 py-4 text-sm font-semibold">Actions</th>
+									<th class="!p-0">
+										<span class="block px-4 py-4 text-sm font-semibold border-b">
+											Actions
+										</span>
+									</th>
 								{/if}
 							</tr>
 						{/each}
@@ -180,7 +186,7 @@ $: result && rerender();
 
 			<AppTableFooter paginationEnabled={pagination} {result} {table} />
 		</div>
-	{:else}
+	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
 			The result should be an array of objects
 		</Alert>

package/components/apps/components/table/AppTableFooter.svelte

@@ -1,5 +1,6 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 import { tableOptions } from './tableOptions';
 export let result;
 export let paginationEnabled = false;
@@ -15,26 +16,30 @@ function downloadResultAsJSON() {
 }
 </script>
 
-<div class="px-4 py-2 text-xs flex flex-row gap-2 items-center justify-between">
+<div class="px-2 py-1 text-xs flex flex-row gap-2 items-center justify-between">
 	{#if paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)}
 		<div class="flex items-center gap-2 flex-row">
 			<Button
 				size="xs"
 				variant="border"
 				color="light"
+				btnClasses="!py-1 !pl-1"
 				on:click={() => $table.previousPage()}
 				disabled={!$table.getCanPreviousPage()}
 			>
+				<ChevronLeft size={14} />
 				Previous
 			</Button>
 			<Button
 				size="xs"
 				variant="border"
 				color="light"
+				btnClasses="!py-1 !pr-1"
 				on:click={() => $table.nextPage()}
 				disabled={!$table.getCanNextPage()}
 			>
 				Next
+				<ChevronRight size={14} />
 			</Button>
 			{$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
 		</div>
@@ -46,6 +51,7 @@ function downloadResultAsJSON() {
 			size="xs"
 			variant="border"
 			color="light"
+			btnClasses="!py-1"
 			on:click={downloadResultAsJSON}
 			startIcon={{ icon: faDownload }}
 		>