windmill-components 1.558.4 → 1.596.0

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

@@ -4,11 +4,11 @@ import InlineScriptsPanelList from './InlineScriptsPanelList.svelte';
 import InlineScriptEditor from './InlineScriptEditor.svelte';
 import InlineScriptsPanelWithTable from './InlineScriptsPanelWithTable.svelte';
 import InlineScriptHiddenRunnable from './InlineScriptHiddenRunnable.svelte';
-import { BG_PREFIX } from '../../utils';
 import { sendUserToast } from '../../../../toast';
 import { workspaceStore } from '../../../../stores';
 import { twMerge } from 'tailwind-merge';
 import { createScriptFromInlineScript } from './utils';
+import { BG_PREFIX } from '../appUtilsCore';
 const { app, runnableComponents, appPath } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
 function deleteBackgroundScript(index) {
@@ -23,7 +23,7 @@ function deleteBackgroundScript(index) {
             inlineScript: undefined,
             name: `Background Runnable ${index}`,
             fields: {},
-            type: 'runnableByName',
+            type: 'inline',
             recomputeIds: undefined
         };
         $app.hiddenInlineScripts = $app.hiddenInlineScripts;
@@ -125,7 +125,7 @@ let { width = undefined } = $props();
 				{/if}
 			{/each}
 		{:else}
-			<div class="text-sm text-tertiary text-center py-8 px-2">
+			<div class="text-sm text-primary text-center py-8 px-2">
 				No runnable found at id {$selectedComponentInEditor}
 			</div>
 		{/if}

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

@@ -2,7 +2,7 @@
 import { Plus } from 'lucide-svelte';
 import { createEventDispatcher, getContext, untrack } from 'svelte';
 import Tooltip from '../../../Tooltip.svelte';
-import { BG_PREFIX, getAllScriptNames } from '../../utils';
+import { getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import { getAppScripts } from './utils';
 import AppTutorials from '../../../AppTutorials.svelte';
@@ -11,6 +11,7 @@ import { ignoredTutorials } from '../../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../../tutorialUtils';
 import DocLink from '../settingsPanel/DocLink.svelte';
 import HideButton from '../settingsPanel/HideButton.svelte';
+import { BG_PREFIX } from '../appUtilsCore';
 const PREFIX = 'script-selector-';
 const { app, selectedComponent } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
@@ -52,7 +53,7 @@ function createBackgroundScript() {
         name: newScriptPath,
         inlineScript: undefined,
         autoRefresh: true,
-        type: 'runnableByName',
+        type: 'inline',
         fields: {},
         recomputeIds: undefined
     });
@@ -165,7 +166,7 @@ $effect(() => {
 					</div>
 				{/if}
 				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0 && runnables.imported.length == 0}
-					<div class="text-xs text-tertiary">No scripts/flows</div>
+					<div class="text-xs text-primary">No scripts/flows</div>
 				{/if}
 			</div>
 		</div>
@@ -183,8 +184,7 @@ $effect(() => {
 				</div>
 				<Button
 					size="xs"
-					color="light"
-					variant="border"
+					variant="default"
 					btnClasses="!rounded-full !p-1"
 					title="Create a new background runnable"
 					aria-label="Create a new background runnable"
@@ -227,7 +227,7 @@ $effect(() => {
 						{/if}
 					{/each}
 				{:else}
-					<div class="text-xs text-tertiary">No background runnable</div>
+					<div class="text-xs text-primary">No background runnable</div>
 				{/if}
 			</div>
 		</div>

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

@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const InlineScriptsPanelList: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    reload: CustomEvent<any>;
+    reload: any;
     hidePanel: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

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

@@ -12,7 +12,7 @@ let cancelable = $state(undefined);
 		<Button
 			loading={runLoading}
 			size="xs"
-			color="dark"
+			variant="accent"
 			btnClasses="!px-2 !py-1"
 			on:click={async () => {
 				runLoading = true
@@ -30,8 +30,8 @@ let cancelable = $state(undefined);
 	{:else}
 		<Button
 			size="xs"
-			color="red"
-			variant="border"
+			variant="accent"
+			destructive
 			btnClasses="!px-2 !py-1 !ml-[3px]"
 			on:click={async () => {
 				cancelable?.forEach((f) => f.cancel())

package/package/components/apps/editor/inlineScriptsPanel/RunButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { InlineScript } from '../../types';
+import type { InlineScript } from '../../sharedTypes';
 interface Props {
     id: string;
     inlineScript?: InlineScript | undefined;

package/package/components/apps/editor/inlineScriptsPanel/utils.d.ts

@@ -1,5 +1,5 @@
 import type { Schema } from '../../../../common';
-import type { AppInputs, RunnableByName } from '../../inputType';
+import { type AppInputs, type RunnableByName } from '../../inputType';
 import type { GridItem, HiddenRunnable } from '../../types';
 export interface AppScriptsList {
     inline: {

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

@@ -1,5 +1,6 @@
 import { ScriptService } from '../../../../gen';
 import { sendUserToast } from '../../../../toast';
+import { isRunnableByName, isRunnableByPath } from '../../inputType';
 import { fieldTypeToTsType, schemaToInputsSpec } from '../../utils';
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
@@ -89,15 +90,15 @@ function processRunnable(runnable, transformer, id, list) {
     if (runnable?.type === undefined) {
         return;
     }
-    const type = runnable.type === 'runnableByPath' ? 'imported' : 'inline';
+    const type = isRunnableByPath(runnable) ? 'imported' : 'inline';
     list[type].push({
-        name: runnable[runnable.type === 'runnableByPath' ? 'path' : 'name'],
+        name: runnable[isRunnableByPath(runnable) ? 'path' : 'name'],
         id,
         transformer: transformer !== undefined
     });
 }
 export async function createScriptFromInlineScript(id, runnable, workspace, appPath) {
-    if (runnable.type != 'runnableByName') {
+    if (!isRunnableByName(runnable)) {
         sendUserToast('Only inline scripts can be saved to workspace', true);
         return;
     }
@@ -124,7 +125,7 @@ export async function createScriptFromInlineScript(id, runnable, workspace, appP
         }
     });
     Object.assign(runnable, {
-        type: 'runnableByPath',
+        type: 'path',
         schema: runnable.inlineScript.schema,
         runType: 'script',
         recomputeIds: undefined,

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

@@ -8,7 +8,7 @@ let { component = $bindable() } = $props();
 
 {#if component.horizontalAlignment || component.verticalAlignment}
 	<div class="flex flex-wrap gap-x-4 gap-y-1 w-full justify-end items-center">
-		<div class="text-tertiary text-xs">Alignment</div>
+		<div class="text-primary text-xs">Alignment</div>
 		{#if component.horizontalAlignment}
 			<ToggleButtonGroup
 				noWFull

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

@@ -8,7 +8,7 @@ import { generateRandomString, pluralize } from '../../../../utils';
 import Toggle from '../../../Toggle.svelte';
 import QuickAddColumn from './QuickAddColumn.svelte';
 import RefreshDatabaseStudioTable from './RefreshDatabaseStudioTable.svelte';
-import { findGridItem } from '../appUtils';
+import { findGridItem } from '../appUtilsCore';
 let { componentInput = $bindable(), subFieldType = undefined, selectOptions = undefined, id } = $props();
 const appContext = getContext('AppViewerContext');
 const { app, selectedComponent } = appContext || {};
@@ -191,10 +191,12 @@ async function deleteElementByType(index) {
         // If deleting actions column, clear all table actions
         if (subFieldType === 'ag-grid' && item && item._isActionsColumn === true) {
             const gridItem = id ? findGridItem($app, id) : null;
-            if (gridItem && (gridItem.data.type === 'aggridcomponent' ||
-                gridItem.data.type === 'aggridcomponentee' ||
-                gridItem.data.type === 'aggridinfinitecomponent' ||
-                gridItem.data.type === 'aggridinfinitecomponentee') && Array.isArray(gridItem.data.actions)) {
+            if (gridItem &&
+                (gridItem.data.type === 'aggridcomponent' ||
+                    gridItem.data.type === 'aggridcomponentee' ||
+                    gridItem.data.type === 'aggridinfinitecomponent' ||
+                    gridItem.data.type === 'aggridinfinitecomponentee') &&
+                Array.isArray(gridItem.data.actions)) {
                 gridItem.data.actions.length = 0;
             }
             await updateConfiguration();
@@ -247,7 +249,7 @@ const rnd = generateRandomString();
 <div class="flex gap-2 flex-col mt-2 w-full">
 	{#if Array.isArray(items) && componentInput.value}
 		<div class="flex flex-row items-center justify-between mr-1">
-			<div class="text-xs text-tertiary font-semibold">{pluralize(items.length, 'item')}</div>
+			<div class="text-xs text-primary font-semibold">{pluralize(items.length, 'item')}</div>
 			{#if subFieldType == 'labeledselect'}
 				<Toggle
 					options={{

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

@@ -147,7 +147,7 @@ let generatedCode = $derived(generateCodeFromMigrations(migrations));
 															</Badge>
 														</div>
 														<Button
-															color="dark"
+															variant="accent"
 															size="xs"
 															on:click={() => {
 																if (component?.customCss?.[cssKey]?.style != undefined) {
@@ -201,7 +201,7 @@ let generatedCode = $derived(generateCodeFromMigrations(migrations));
 															</Badge>
 														</div>
 														<Button
-															color="dark"
+															variant="accent"
 															size="xs"
 															on:click={() => {
 																if (type && $app.css?.[type]) {
@@ -250,7 +250,7 @@ let generatedCode = $derived(generateCodeFromMigrations(migrations));
 							</div>
 							<Button
 								size="xs"
-								color="dark"
+								variant="accent"
 								on:click={() => {
 									appendMigrationsToCss(migrations)
 									migrationModalOpen = false

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

@@ -1,4 +1,5 @@
 <script lang="ts">import Button from '../../../common/button/Button.svelte';
+import Alert from '../../../common/alert/Alert.svelte';
 import { getContext } from 'svelte';
 import PanelSection from './common/PanelSection.svelte';
 import InputsSpecsEditor from './InputsSpecsEditor.svelte';
@@ -33,6 +34,7 @@ import GridAgGridLicenseKey from './GridAgGridLicenseKey.svelte';
 import ComponentPanelDataSource from './ComponentPanelDataSource.svelte';
 import MenuItems from './MenuItems.svelte';
 import DecisionTreeGraphEditor from './DecisionTreeGraphEditor.svelte';
+import { getManagedFields } from '../../components/componentManagedFields';
 import GridAgChartsLicenseKe from './GridAgChartsLicenseKe.svelte';
 import Toggle from '../../../Toggle.svelte';
 import ContextVariables from './ContextVariables.svelte';
@@ -101,6 +103,9 @@ const initialConfiguration = item?.data?.type
 const componentInput = item?.data?.type
     ? ccomponents[item?.data?.type]?.initialData?.componentInput
     : undefined;
+const runnableInputsInfo = item?.data?.type
+    ? ccomponents[item.data.type]?.runnableInputsInfo
+    : undefined;
 const hasInteraction = item.data.type ? isTriggerable(item.data.type) : false;
 let evalV2editor = $state(undefined);
 function transformToFrontend() {
@@ -110,7 +115,7 @@ function transformToFrontend() {
             ...item.data.componentInput,
             type: 'runnable',
             runnable: {
-                type: 'runnableByName',
+                type: 'inline',
                 name: `Eval of ${id}`,
                 inlineScript: {
                     content: `return ${item.data.componentInput?.['expr']}`,
@@ -242,18 +247,16 @@ function onTemplateChange(e) {
 									bind:componentInput={item.data.componentInput}
 								/>
 							{:else if item.data?.componentInput?.type === 'template' || item.data?.componentInput?.type === 'templatev2'}
-								<div class="py-1 min-h-[28px] rounded border border-1 border-gray-500">
-									<TemplateEditor
-										fontSize={12}
-										bind:code={item.data.componentInput.eval}
-										{extraLib}
-										on:change={onTemplateChange}
-									/>
-								</div>
+								<TemplateEditor
+									fontSize={12}
+									bind:code={item.data.componentInput.eval}
+									{extraLib}
+									on:change={onTemplateChange}
+								/>
 								{#if item.data?.componentInput?.type === 'templatev2'}
 									{#if item.data?.componentInput.connections?.length > 0}
 										<div class="flex flex-wrap gap-2 items-center">
-											<div class="text-2xs text-tertiary">Re-evaluated on changes to:</div>
+											<div class="text-2xs text-primary">Re-evaluated on changes to:</div>
 											<div class="flex flex-wrap gap-1">
 												{#each item.data?.componentInput.connections ?? [] as connection (connection.componentId + '-' + connection.id)}
 													<span
@@ -303,6 +306,19 @@ function onTemplateChange(e) {
 											parameters this component is attached to.
 										</Tooltip>
 									</div>
+
+									<!-- Generic runnable inputs validation -->
+									{#if runnableInputsInfo?.validate}
+										{@const validation = runnableInputsInfo?.validate(
+											item.data.componentInput.fields ?? {}
+										)}
+										{#if validation}
+											<Alert type={validation.type} title={validation.title} size="xs" class="my-2">
+												{@html validation.message}
+											</Alert>
+										{/if}
+									{/if}
+
 									<InputsSpecsEditor
 										id={component.id}
 										shouldCapitalize={false}
@@ -315,10 +331,7 @@ function onTemplateChange(e) {
 										acceptSelf={component.type === 'aggridinfinitecomponent' ||
 											component.type === 'aggridinfinitecomponentee' ||
 											component.type === 'steppercomponent'}
-										overridenByComponent={component.type === 'aggridinfinitecomponent' ||
-										component.type === 'aggridinfinitecomponentee'
-											? ['offset', 'limit', 'orderBy', 'isDesc', 'search']
-											: []}
+										overridenByComponent={getManagedFields(component.type)}
 										securedContext
 									/>
 								</div>
@@ -403,7 +416,7 @@ function onTemplateChange(e) {
 				/>
 			</PanelSection>
 		{:else if item.data.type != 'containercomponent'}
-			<div class="h-full w-full text-sm text-tertiary text-center py-8 px-2">
+			<div class="h-full w-full text-sm text-primary text-center py-8 px-2">
 				{ccomponents[component.type].name} has no configuration
 			</div>
 		{/if}
@@ -417,9 +430,8 @@ function onTemplateChange(e) {
 				{#snippet action()}
 					<div class="flex justify-end flex-wrap gap-1">
 						<Button
-							color="light"
 							size="xs"
-							variant="border"
+							variant="default"
 							startIcon={{ icon: ChevronLeft }}
 							on:click={() => secondaryMenuLeft.toggle(StylePanel, { type: 'style' })}
 						>
@@ -475,20 +487,17 @@ function onTemplateChange(e) {
 					<div>
 						<Button
 							size="xs"
-							color="red"
-							variant="border"
+							variant="default"
 							on:click={removeGridElement}
-							shortCut={{
-								key: isMac() ? getModifierKey() + 'Del' : 'Del',
-								withoutModifier: true
-							}}
+							shortCut={{ key: isMac() ? getModifierKey() + 'Del' : 'Del', withoutModifier: true }}
+							destructive
 						>
 							Delete
 						</Button>
 					</div>
 				{/snippet}
 
-				<div class="overflow-auto grid grid-cols-2 gap-1 text-tertiary">
+				<div class="overflow-auto grid grid-cols-2 gap-1 text-primary">
 					<div>
 						<span class="text-secondary text-xs">Copy:</span>
 					</div>

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

@@ -1,7 +1,8 @@
 <script lang="ts">import Popover from '../../../Popover.svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import { getContext } from 'svelte';
-import { dfs, findGridItem } from '../appUtils';
+import { dfs } from '../appUtils';
+import { findGridItem } from '../appUtilsCore';
 let { type, id } = $props();
 const { app } = getContext('AppViewerContext');
 const tables = [

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

@@ -63,9 +63,8 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 							{#snippet action()}
 								<Button
 									size="xs"
-									color="light"
 									startIcon={{ icon: Trash }}
-									variant="border"
+									variant="default"
 									on:click={() => {
 										nodes = removeNode(nodes, selectedNode)
 
@@ -182,7 +181,7 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 			drawer?.openDrawer()
 		}}
 		size="xs"
-		color="dark"
+		variant="accent"
 		startIcon={{ icon: Network }}
 	>
 		Graph editor

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

@@ -5,7 +5,6 @@ import { twMerge } from 'tailwind-merge';
 import InsertDecisionTreeNode from './decisionTree/InsertDecisionTreeNode.svelte';
 import { Badge } from '../../../common';
 import { X } from 'lucide-svelte';
-import { getStateColor } from '../../../graph';
 import Tooltip from '../../../Tooltip.svelte';
 import NodeWrapper from '../../../graph/renderers/nodes/NodeWrapper.svelte';
 let { data } = $props();
@@ -19,15 +18,11 @@ let selected = $derived($selectedNodeId === data.node.id);
 		<div class="rounded-sm group">
 			<Button
 				class={twMerge(
-					'p-2 bg-surface w-full h-8 relative rounded-sm border border-gray-400',
+					'p-2 w-full h-8 relative rounded-sm border border-gray-400',
 					selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
-					'flex flex-row gap-2 items-center justify-between'
+					'flex flex-row gap-2 items-center justify-between bg-surface-tertiary'
 				)}
-				style="width: 275px; height: 34px; background-color: {getStateColor(
-					undefined,
-					darkMode,
-					true
-				)};"
+				style="width: 275px; height: 34px;"
 				on:click={() => {
 					selected = true
 					data.nodeCallbackHandler('select', data.node.id, data.node, data.parentIds, false)

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

@@ -101,7 +101,7 @@ const rnd = generateRandomString();
 		subgrid.
 	</Alert>
 	{#if items.length == 0}
-		<span class="text-xs text-tertiary">No Tabs</span>
+		<span class="text-xs text-primary">No Tabs</span>
 	{/if}
 	<div class="w-full flex flex-col mt-2">
 		<section
@@ -163,8 +163,7 @@ const rnd = generateRandomString();
 		</div>
 		<Button
 			size="xs"
-			color="light"
-			variant="border"
+			variant="default"
 			startIcon={{ icon: Plus }}
 			on:click={addCondition}
 			iconOnly

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

@@ -66,7 +66,7 @@ function addField(name) {
 		}`}
 	>
 		{#if Object.keys(groupFields ?? {}).length == 0}
-			<span class="text-xs text-tertiary">No group fields</span>
+			<span class="text-xs text-primary">No group fields</span>
 		{/if}
 		<div class="w-full flex gap-2 flex-col mt-2">
 			<InputsSpecsEditor
@@ -102,8 +102,7 @@ function addField(name) {
 				<Button
 					disabled={fieldName == ''}
 					size="sm"
-					color="light"
-					variant="border"
+					variant="default"
 					startIcon={{ icon: Plus }}
 					on:click={() => addField(fieldName)}
 					iconOnly

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

@@ -101,7 +101,7 @@ const rnd = generateRandomString();
 	title={`Items ${navbarItems && navbarItems.length > 0 ? `(${navbarItems.length})` : ''}`}
 >
 	{#if !navbarItems || navbarItems.length == 0}
-		<span class="text-xs text-tertiary">No items</span>
+		<span class="text-xs text-primary">No items</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		<section
@@ -168,7 +168,7 @@ const rnd = generateRandomString();
 						/>
 
 						{#if resolvedPaths[item.originalIndex]}
-							<div class="text-xs text-tertiary flex gap-2 flex-row flex-wrap">
+							<div class="text-xs text-primary flex gap-2 flex-row flex-wrap">
 								Path: <Badge small>{resolvedPaths[item.originalIndex]}</Badge>
 								{#if $appPath && resolvedPaths[item.originalIndex]?.includes($appPath)}
 									<Badge small color="blue"
@@ -188,13 +188,6 @@ const rnd = generateRandomString();
 				{/key}
 			{/each}
 		</section>
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			startIcon={{ icon: Plus }}
-			on:click={addPath}
-			iconOnly
-		/>
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addPath} iconOnly />
 	</div>
 </PanelSection>

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

@@ -40,7 +40,7 @@ function deleteSubgrid(index) {
 
 <PanelSection title={`panes ${panes.length > 0 ? `(${panes.length})` : ''}`}>
 	{#if panes.length == 0}
-		<span class="text-xs text-tertiary">No panes</span>
+		<span class="text-xs text-primary">No panes</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col">
 		{#each panes as _, index (index)}
@@ -62,13 +62,6 @@ function deleteSubgrid(index) {
 				/>
 			</div>
 		{/each}
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			startIcon={{ icon: Plus }}
-			on:click={addTab}
-			iconOnly
-		/>
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addTab} iconOnly />
 	</div>
 </PanelSection>

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

@@ -130,7 +130,7 @@ const rnd = generateRandomString();
 
 <PanelSection title={`${word}s ${tabs && tabs.length > 0 ? `(${tabs.length})` : ''}`}>
 	{#if !tabs || tabs.length == 0}
-		<span class="text-xs text-tertiary">No Tabs</span>
+		<span class="text-xs text-primary">No Tabs</span>
 	{/if}
 	<div class="w-full flex gap-2 flex-col mt-2">
 		<section
@@ -177,13 +177,6 @@ const rnd = generateRandomString();
 				</div>
 			{/each}
 		</section>
-		<Button
-			size="xs"
-			color="light"
-			variant="border"
-			startIcon={{ icon: Plus }}
-			on:click={addTab}
-			iconOnly
-		/>
+		<Button size="xs" variant="default" startIcon={{ icon: Plus }} on:click={addTab} iconOnly />
 	</div>
 </PanelSection>