windmill-components 1.89.0 → 1.89.1

package/package/components/CronInput.svelte

@@ -142,7 +142,7 @@ $: dateFormatter = new Intl.DateTimeFormat('en-GB', {
 }).format;
 </script>
 
-<div class="w-full flex space-x-16 p-4">
+<div class="w-full flex space-x-16">
 	<div class="w-full flex flex-col space-y-2">
 		<div class="w-full flex flex-col gap-1">
 			<small class="font-bold">Cron</small>
@@ -316,7 +316,7 @@ $: dateFormatter = new Intl.DateTimeFormat('en-GB', {
 			<small>Estimated upcoming events ({timezone})</small>
 			<div class="flex flex-col rounded-md p-4 border text-gray-600">
 				{#each preview as date}
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center space-x-2 text-sm">
 						<span>{dateFormatter(new Date(date))}</span>
 					</div>
 				{/each}

package/package/components/ScheduleEditor.svelte

@@ -180,10 +180,10 @@ let drawer;
 				<div class="mb-8" />
 			{/if}
 
-			<h2 class="border-b pb-1 mb-2">
-				<span class="mr-1">Schedule</span>
+			<div class="flex flex-row items-center mb-2 gap-1">
+				<div class="text-xl font-extrabold">Schedule</div>
 				<Tooltip>Schedules use CRON syntax. Seconds are mandatory.</Tooltip>
-			</h2>
+			</div>
 
 			<CronInput disabled={!can_write} bind:schedule bind:timezone bind:validCRON />
 

package/package/components/SchemaEditor.svelte

@@ -166,11 +166,10 @@ let error = '';
 				}}
 			/>
 			<div class="ml-2">
-				<Tooltip>
-					Arguments can be edited either using the wizard, or by editing their JSON Schema,
-					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema"
-						>see docs</a
-					>
+				<Tooltip
+					documentationLink="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema"
+				>
+					Arguments can be edited either using the wizard, or by editing their JSON Schema
 				</Tooltip>
 			</div>
 		</div>

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

@@ -263,6 +263,7 @@ async function setResult(res) {
         delete $errorByComponent[previousJobId];
         $errorByComponent = $errorByComponent;
     }
+    donePromise?.();
 }
 function handleInputClick(e) {
     const event = e;
@@ -301,7 +302,6 @@ function handleInputClick(e) {
 			if (startedAt > lastStartedAt) {
 				lastStartedAt = startedAt
 				setResult(e.detail.result)
-				donePromise?.()
 			}
 		}
 		loading = false

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -31,13 +31,13 @@ function handleItems() {
         })
         : [];
     let rawValue;
-    if (defaultValue) {
+    if (defaultValue !== undefined) {
         rawValue = defaultValue;
     }
     else if (listItems.length > 0) {
         rawValue = items[0].value;
     }
-    if (rawValue) {
+    if (rawValue !== undefined) {
         value = JSON.stringify(rawValue);
         outputs?.result.set(rawValue);
     }

package/package/components/apps/editor/AppEditor.svelte

@@ -283,7 +283,7 @@ else {
 									<TabContent value="insert">
 										<ComponentList />
 									</TabContent>
-									<TabContent value="css">
+									<TabContent value="css" class="h-full">
 										<CssSettings />
 									</TabContent>
 								</div>

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

@@ -488,7 +488,7 @@ function onKeyDown(event) {
 	<div class="flex flex-row gap-2 justify-end items-center overflow-visible">
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!border !rounded-md"
+			btnClasses="!rounded-md"
 			dropdownItems={[
 				{
 					displayName: 'JSON',

package/package/components/apps/editor/RecomputeAllComponents.svelte

@@ -40,13 +40,16 @@ function refresh() {
         isFirstLoad = true;
     }
     loading = true;
-    Promise.all(Object.keys($runnableComponents).map((id) => {
+    const promises = Object.keys($runnableComponents)
+        .map((id) => {
         if (!$runnableComponents?.[id]?.autoRefresh &&
             (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)) {
             return;
         }
         return $runnableComponents?.[id]?.cb?.();
-    })).finally(() => {
+    })
+        .filter(Boolean);
+    Promise.all(promises).finally(() => {
         loading = false;
     });
 }

package/package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -4,9 +4,9 @@ import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
 import { components as componentsRecord, COMPONENT_SETS } from '../component';
 import ListItem from './ListItem.svelte';
 import { appComponentFromType, insertNewGridItem } from '../appUtils';
-import { X } from 'lucide-svelte';
 import { push } from '../../../../history';
 import { flip } from 'svelte/animate';
+import { ClearableInput } from '../../../common';
 const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
 function addComponent(appComponentType) {
@@ -28,22 +28,7 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 </script>
 
 <section class="p-2 sticky bg-white w-full z-10 top-0">
-	<div class="relative">
-		<input
-			bind:value={search}
-			class="px-2 py-1 border border-gray-300 rounded-sm !pr-6"
-			placeholder="Search components..."
-		/>
-
-		{#if search !== ''}
-			<button
-				class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-500 bg-gray-300 transition-all rounded-full p-0.5"
-				on:click|stopPropagation|preventDefault={() => (search = '')}
-			>
-				<X size="10" color="white" />
-			</button>
-		{/if}
-	</div>
+	<ClearableInput bind:value={search} placeholder="Search components..." />
 </section>
 
 <div class="relative">

package/package/components/apps/editor/componentsPanel/CssSettings.svelte

@@ -1,17 +1,19 @@
 <script>import { getContext } from 'svelte';
-import { LayoutDashboardIcon, MousePointer2, CurlyBraces, X } from 'lucide-svelte';
+import { LayoutDashboardIcon, MousePointer2, CurlyBraces } from 'lucide-svelte';
 import SimpleEditor from '../../../SimpleEditor.svelte';
 import { emptyString } from '../../../../utils';
-import { Tab, TabContent, Tabs } from '../../../common';
+import { ClearableInput, Tab, TabContent, Tabs } from '../../../common';
 import ListItem from './ListItem.svelte';
 import CssProperty from './CssProperty.svelte';
 import { ccomponents, components } from '../component';
+import { slide } from 'svelte/transition';
 const STATIC_ELEMENTS = ['app'];
 const TITLE_PREFIX = 'Css.';
 const { app } = getContext('AppViewerContext');
 let rawCode = '';
 $: rawCode && parseJson();
 let jsonError = '';
+let jsonErrorHeight;
 function parseJson() {
     try {
         $app.css = JSON.parse(rawCode ?? '');
@@ -51,8 +53,8 @@ entries.sort((a, b) => a.name.localeCompare(b.name));
 let search = '';
 </script>
 
-<div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div>
-<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
+<!-- <div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div> -->
+<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="h-full">
 	<Tab value="ui" size="xs" class="w-1/2">
 		<div class="m-1 center-center">
 			<MousePointer2 size={16} />
@@ -65,80 +67,64 @@ let search = '';
 			<span class="pl-1">JSON</span>
 		</div>
 	</Tab>
-	<div slot="content" class="h-full overflow-y-auto">
-		<TabContent value="ui">
-			<div class="sticky top-0 left-0 w-full bg-white p-2">
-				<div class="relative">
-					<input
-						bind:value={search}
-						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
-						placeholder="Search..."
-					/>
-					{#if search}
-						<button
-							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
-							on:click|stopPropagation|preventDefault={() => (search = '')}
+	<div slot="content" class="h-[calc(100%-35px)] overflow-auto">
+		<TabContent value="ui" class="h-full">
+			<div class="p-2">
+				<ClearableInput bind:value={search} placeholder="Search..." />
+			</div>
+			<div class="h-[calc(100%-50px)] overflow-auto relative">
+				{#each search != '' ? entries.filter((x) => x.name
+								.toLowerCase()
+								.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
+					{#if ids.length > 0}
+						<ListItem
+							title={name}
+							prefix={TITLE_PREFIX}
+							on:open={(e) => {
+								if ($app.css != undefined) {
+									if (e.detail && $app.css[type] == undefined) {
+										$app.css[type] = Object.fromEntries(ids.map(({ id }) => [id, {}]))
+									}
+								}
+							}}
 						>
-							<X size="14" />
-						</button>
+							<div slot="title" class="flex items-center">
+								<svelte:component this={icon} size={18} />
+								<span class="ml-1">
+									{name}
+								</span>
+							</div>
+							<div class="pb-2">
+								{#each ids as { id, forceStyle, forceClass }}
+									<div class="mb-3">
+										{#if $app?.css?.[type]}
+											<CssProperty
+												{forceClass}
+												{forceStyle}
+												name={id}
+												bind:value={$app.css[type][id]}
+											/>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</ListItem>
 					{/if}
-				</div>
+				{/each}
 			</div>
-			{#each search != '' ? entries.filter((x) => x.name
-							.toLowerCase()
-							.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
-				{#if ids.length > 0}
-					<ListItem
-						title={name}
-						prefix={TITLE_PREFIX}
-						on:open={(e) => {
-							if ($app.css != undefined) {
-								if (e.detail && $app.css[type] == undefined) {
-									$app.css[type] = Object.fromEntries(ids.map(({ id }) => [id, {}]))
-								}
-							}
-						}}
-					>
-						<div slot="title" class="flex items-center">
-							<svelte:component this={icon} size={18} />
-							<span class="ml-1">
-								{name}
-							</span>
-						</div>
-						<div class="pb-2">
-							{#each ids as { id, forceStyle, forceClass }}
-								<div class="mb-3">
-									{#if $app?.css?.[type]}
-										<CssProperty
-											{forceClass}
-											{forceStyle}
-											name={id}
-											bind:value={$app.css[type][id]}
-										/>
-									{/if}
-								</div>
-							{/each}
-						</div>
-					</ListItem>
-				{/if}
-			{/each}
 		</TabContent>
-		<TabContent value="json">
+		<TabContent value="json" class="h-full">
 			{#if !emptyString(jsonError)}
-				<span class="text-red-400 text-xs mb-1 flex flex-row-reverse">
+				<div
+					transition:slide={{ duration: 200 }}
+					bind:clientHeight={jsonErrorHeight}
+					class="text-red-500 text-xs p-1"
+				>
 					{jsonError}
-				</span>
-			{:else}
-				<div class="py-2" />
+				</div>
 			{/if}
-			<div class="h-full w-full py-1">
-				<SimpleEditor
-					autoHeight
-					class="editor"
-					lang="json"
-					bind:code={rawCode}
-					fixedOverflowWidgets={false}
-				/>
+			<div style="height: calc(100% - {jsonErrorHeight || 0}px);">
+				<SimpleEditor class="h-full" lang="json" bind:code={rawCode} fixedOverflowWidgets={false} />
 			</div>
 		</TabContent>
 	</div>

package/package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,5 +1,4 @@
 <script>import { classNames } from '../../../../utils';
-import { X } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { connectInput } from '../appUtils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
@@ -7,6 +6,7 @@ import ComponentOutput from './ComponentOutput.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
 import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
 import OutputHeader from './components/OutputHeader.svelte';
+import { ClearableInput } from '../../../common';
 const { connectingInput, app } = getContext('AppViewerContext');
 const { search } = getContext('ContextPanel');
 let hasState = false;
@@ -21,21 +21,7 @@ let hasState = false;
 	>
 		<div class="min-w-[150px]">
 			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
-				<div class="relative w-full">
-					<input
-						bind:value={$search}
-						class="!border-gray-200 !rounded-md !text-xs !pr-6"
-						placeholder="Search outputs..."
-					/>
-					{#if $search !== ''}
-						<button
-							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-500 bg-gray-300 transition-all rounded-full p-0.5"
-							on:click|stopPropagation|preventDefault={() => ($search = '')}
-						>
-							<X size="10" color="white" />
-						</button>
-					{/if}
-				</div>
+				<ClearableInput bind:value={$search} placeholder="Search outputs..." />
 			</div>
 
 			<div class="flex flex-col gap-4">

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

@@ -189,15 +189,15 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 					on:click={() => {
 						const newInlineScript = {
 							content: `// read outputs and ctx
-				console.log(ctx.email)
-				
-				// access a global state store
-				if (!state.foo) { state.foo = 0 }
-				state.foo += 1
-				
-				// you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
-				
-				return state.foo`,
+console.log(ctx.email)
+
+// access a global state store
+if (!state.foo) { state.foo = 0 }
+state.foo += 1
+
+// you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
+
+return state.foo`,
 							language: 'frontend',
 							path: 'frontend script',
 							schema: undefined

package/package/components/apps/editor/inlineScriptsPanel/utils.js

@@ -18,7 +18,13 @@ export function computeFields(schema, defaultUserInput, fields) {
         else {
             if (fieldTypeToTsType(newInput.fieldType) !== fieldTypeToTsType(oldInput.fieldType) ||
                 newInput.format !== oldInput.format ||
-                newInput.subFieldType !== oldInput.subFieldType) {
+                newInput.subFieldType !== oldInput.subFieldType ||
+                // An input became a select
+                (newInput.fieldType === 'select' && oldInput.fieldType !== 'select') ||
+                // The input was already a select, but the values changed
+                (newInput.fieldType === 'select' &&
+                    oldInput.fieldType === 'select' &&
+                    JSON.stringify(newInput.selectOptions) !== JSON.stringify(oldInput.selectOptions))) {
                 result[key] = newInput;
             }
             else {

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

@@ -42,7 +42,7 @@ function open() {
 	}
 
 	:global(.color-picker-input) :global(span) > :global(div.wrapper) {
-		box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.25) !important;
+		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
 		border-style: none !important;
 		border-radius: 0.375rem !important;
 		top: 6px !important;

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

@@ -1,5 +1,5 @@
-<script>import { Loader2, X } from 'lucide-svelte';
-import { Popup } from '../../../../common';
+<script>import { Loader2 } from 'lucide-svelte';
+import { ClearableInput, Popup } from '../../../../common';
 import { fade } from 'svelte/transition';
 export let componentInput;
 let anchor;
@@ -44,11 +44,11 @@ function select(label) {
 }
 </script>
 
-<div class="relative">
-	<input
+<div bind:this={anchor} class="relative">
+	<ClearableInput
 		readonly
 		value={formatName(componentInput.value)}
-		bind:this={anchor}
+		on:change={({ detail }) => (componentInput.value = detail)}
 		on:focus={getData}
 		class="!pr-6"
 	/>
@@ -56,28 +56,24 @@ function select(label) {
 		<div class="center-center absolute right-2 top-1/2 transform -translate-y-1/2 p-0.5">
 			<Loader2 class="animate-spin" size={16} />
 		</div>
-	{:else if componentInput.value}
-		<button
-			class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-500 bg-gray-300 transition-all rounded-full p-0.5"
-			on:click|stopPropagation|preventDefault={() => (componentInput.value = undefined)}
-			title="Clear"
-			aria-label="Clear"
-		>
-			<X size="10" color="white" />
-		</button>
 	{/if}
 </div>
 {#if anchor}
 	<Popup
 		ref={anchor}
 		closeOn={[]}
-		options={{ placement: 'bottom' }}
+		options={{
+			placement: 'bottom-start',
+			strategy: 'fixed',
+			modifiers: [{ name: 'offset', options: { offset: [0, 6] } }]
+		}}
 		bind:open={openPopup}
 		let:close
 		transition={fade}
+		wrapperClasses=" z-[1002]"
 	>
 		{#if !loading}
-			<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
+			<div class="w-72 shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
 				{#if filteredItems}
 					<input
 						on:keydown={(event) => {

package/package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -20,5 +20,10 @@ $: onLoad =
 	{onLoad}
 	{recomputeOnInputChanged}
 	id={$selectedComponent?.[0]}
+	shouldHideAddDependencyButton={[
+		'buttoncomponent',
+		'formcomponent',
+		'formbuttoncomponent'
+	].includes(appComponent.type)}
 	{onClick}
 />

package/package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte

@@ -9,6 +9,7 @@ export let onClick = false;
 export let onLoad = false;
 export let id = undefined;
 export let recomputeOnInputChanged = false;
+export let shouldHideAddDependencyButton = false;
 const colors = {
     green: 'text-green-800 border-green-600 bg-green-100',
     indigo: 'text-indigo-800 border-indigo-600 bg-indigo-100',
@@ -115,7 +116,7 @@ function deleteDep(index) {
 		<div class="w-full">
 			<div class="flex justify-between items-center">
 				<div class="text-xs font-semibold text-slate-800 mb-1">Change on values</div>
-				{#if inlineScript?.language === 'frontend'}
+				{#if inlineScript?.language === 'frontend' && !shouldHideAddDependencyButton}
 					<Button
 						variant="border"
 						size="xs"

package/package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         onLoad?: boolean | undefined;
         id?: string | undefined;
         recomputeOnInputChanged?: boolean | undefined;
+        shouldHideAddDependencyButton?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/utils.js

@@ -48,6 +48,13 @@ export function schemaToInputsSpec(schema, defaultUserInput) {
             fieldType: property.type,
             format: property.format
         };
+        if (Array.isArray(property.enum)) {
+            accu[key] = {
+                ...accu[key],
+                selectOptions: property.enum,
+                fieldType: 'select'
+            };
+        }
         return accu;
     }, {});
 }

package/package/components/common/button/ButtonDropdown.svelte

@@ -3,7 +3,7 @@
 	import { ChevronDown } from 'lucide-svelte'
 </script>
 
-<Menu let:open as="div" class="relative z-50 flex w-full h-full">
+<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
 	<MenuButton class="h-full w-full px-2">
 		<ChevronDown class="w-5 h-5" />
 	</MenuButton>

package/package/components/common/clearableInput/ClearableInput.svelte

@@ -8,6 +8,7 @@ export let inputClass = '';
 export let wrapperClass = '';
 export let buttonClass = '';
 const dispatch = createEventDispatcher();
+let isHovered = false;
 $: isNumeric = ['number', 'range'].includes(type);
 $: dispatch('change', value);
 function handleInput(e) {
@@ -18,7 +19,11 @@ function clear() {
 }
 </script>
 
-<div class="relative grow {wrapperClass}">
+<div
+	class="relative grow {wrapperClass}"
+	on:mouseenter={() => (isHovered = true)}
+	on:mouseleave={() => (isHovered = false)}
+>
 	{#if type === 'textarea'}
 		<textarea
 			{value}
@@ -42,14 +47,15 @@ function clear() {
 			on:blur
 		/>
 	{/if}
-	{#if value}
+	{#if value && isHovered}
 		<button
-			transition:fade|local={{ duration: 100 }}
-			class="absolute z-10 top-1.5 right-1 rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 {buttonClass}"
+			transition:fade|local={{ duration: 80 }}
+			class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-white bg-gray-300
+			duration-200 hover:bg-gray-600 focus:bg-gray-600 {buttonClass}"
 			aria-label="Clear"
 			on:click|preventDefault|stopPropagation={clear}
 		>
-			<X size={14} />
+			<X size={11} class="" />
 		</button>
 	{/if}
 	<slot />