windmill-components 1.70.0 → 1.77.0

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

@@ -1,21 +1,20 @@
 <script>import { Badge, Button } from '../../../common';
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { Plus } from 'lucide-svelte';
 import { getContext } from 'svelte';
+import Tooltip from '../../../Tooltip.svelte';
 import { getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import { getAppScripts } from './utils';
 const PREFIX = 'script-selector-';
 export let selectedScriptComponentId = undefined;
-const { app, selectedComponent, lazyGrid } = getContext('AppEditorContext');
-let list;
+const { app, selectedComponent } = getContext('AppViewerContext');
 function selectScript(id) {
     selectedScriptComponentId = id;
     if (!id.startsWith('unused-') || !id.startsWith('bg_')) {
         $selectedComponent = selectedScriptComponentId;
     }
 }
-$: runnables = getAppScripts($lazyGrid);
+$: runnables = getAppScripts($app.grid, $app.subgrids);
 // When selected component changes, update selectedScriptComponentId
 $: if ($selectedComponent != selectedScriptComponentId) {
     selectedScriptComponentId = $selectedComponent;
@@ -41,99 +40,110 @@ function createBackgroundScript() {
 }
 </script>
 
-<div class="mb-0 pb-0 pl-2 sticky top-0 bg-white border-b text-xs font-semibold">Runnables</div>
-<div bind:this={list} class="grow flex flex-col gap-4">
-	<PanelSection title="Inline scripts" smallPadding>
-		<div class="flex flex-col gap-2 w-full">
-			{#if runnables.inline.length > 0}
-				<div class="flex gap-1 flex-col ">
-					{#each runnables.inline as { name, id }, index (index)}
+<PanelSection title="Runnables" smallPadding>
+	<div class="w-full flex flex-col gap-6 py-1">
+		<div>
+			<div class="text-sm font-semibold truncate mb-1"> Inline scripts </div>
+			<div class="flex flex-col gap-2 w-full">
+				{#if runnables.inline.length > 0}
+					<div class="flex gap-1 flex-col ">
+						{#each runnables.inline as { name, id }, index (index)}
+							<button
+								id={PREFIX + id}
+								class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id)}
+							>
+								<span class="text-2xs truncate">{name}</span>
+								<div>
+									<Badge color="dark-indigo">{id}</Badge>
+								</div>
+							</button>
+						{/each}
+					</div>
+				{/if}
+				{#if $app.unusedInlineScripts?.length > 0}
+					<div class="flex gap-1 flex-col ">
+						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
+							{@const id = `unused-${index}`}
+							<button
+								id={PREFIX + id}
+								class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+								on:click={() => selectScript(id)}
+							>
+								<span class="text-2xs truncate">{unusedInlineScript.name}</span>
+								<Badge color="red">Detached</Badge>
+							</button>
+						{/each}
+					</div>
+				{/if}
+				{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
+					<div class="text-xs text-gray-500">No inline scripts</div>
+				{/if}
+			</div>
+		</div>
+
+		<div>
+			<div class="text-sm font-semibold truncate mb-1"> Workspace/Hub </div>
+			<div class="flex flex-col gap-1 w-full">
+				{#if runnables.imported.length > 0}
+					{#each runnables.imported as { name, id }, index (index)}
 						<button
 							id={PREFIX + id}
-							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
-							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 							on:click={() => selectScript(id)}
 						>
 							<span class="text-2xs truncate">{name}</span>
-							<div>
-								<Badge color="dark-indigo">{id}</Badge>
-							</div>
+							<Badge color="dark-indigo">{id}</Badge>
 						</button>
 					{/each}
-				</div>
-			{/if}
+				{:else}
+					<div class="text-xs text-gray-500">No imported scripts/flows</div>
+				{/if}
+			</div>
+		</div>
 
-			{#if $app.unusedInlineScripts?.length > 0}
-				<div class="flex gap-1 flex-col ">
-					{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
-						{@const id = `unused-${index}`}
+		<div>
+			<div class="w-full flex justify-between items-center">
+				<div class="text-sm font-semibold truncate mb-1">
+					Background scripts
+					<Tooltip class="mb-0.5">
+						Background scripts are triggered upon global refresh or when their input changes. The
+						result of a background script can be shared among many components.
+					</Tooltip>
+				</div>
+				<Button
+					size="xs"
+					color="light"
+					variant="border"
+					btnClasses="!rounded-full !p-1"
+					title="Create a new background script"
+					aria-label="Create a new background script"
+					on:click={createBackgroundScript}
+				>
+					<Plus size={14} class="text-gray-500" />
+				</Button>
+			</div>
+			<div class="flex flex-col gap-1 w-full">
+				{#if $app.hiddenInlineScripts?.length > 0}
+					{#each $app.hiddenInlineScripts as { name }, index (index)}
+						{@const id = `bg_${index}`}
 						<button
 							id={PREFIX + id}
-							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
-							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
+							class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200
+								{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 							on:click={() => selectScript(id)}
 						>
-							<span class="text-2xs truncate">{unusedInlineScript.name}</span>
-							<Badge color="red">Detached</Badge>
+							<span class="text-2xs truncate">{name}</span>
+							<Badge color="dark-indigo">{id}</Badge>
 						</button>
 					{/each}
-				</div>
-			{/if}
-
-			{#if runnables.inline.length == 0 && $app.unusedInlineScripts?.length == 0}
-				<div class="text-sm text-gray-500">No inline scripts</div>
-			{/if}
-		</div>
-	</PanelSection>
-
-	<PanelSection title="Workspace/Hub" smallPadding>
-		<div class="flex flex-col gap-1 w-full">
-			{#if runnables.imported.length > 0}
-				{#each runnables.imported as { name, id }, index (index)}
-					<button
-						id={PREFIX + id}
-						class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
-							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
-						on:click={() => selectScript(id)}
-					>
-						<span class="text-2xs truncate">{name}</span>
-						<Badge color="dark-indigo">{id}</Badge>
-					</button>
-				{/each}
-			{:else}
-				<div class="text-sm text-gray-500">No imported scripts/flows</div>
-			{/if}
-		</div>
-	</PanelSection>
-
-	<PanelSection
-		title="Background scripts"
-		tooltip="Background scripts are triggered upon global refresh or when their input changes. The result
-		of a background script can be shared among many components."
-		smallPadding
-	>
-		<svelte:fragment slot="action">
-			<Button size="xs" color="dark" variant="border" on:click={createBackgroundScript}
-				><Plus size={14} />
-			</Button>
-		</svelte:fragment>
-		<div class="flex flex-col gap-1 w-full">
-			{#if $app.hiddenInlineScripts?.length > 0}
-				{#each $app.hiddenInlineScripts as { name }, index (index)}
-					{@const id = `bg_${index}`}
-					<button
-						id={PREFIX + id}
-						class="border flex gap-1 truncate font-normal justify-between w-full items-center py-1 px-2 rounded-sm duration-200 
-							{selectedScriptComponentId === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
-						on:click={() => selectScript(id)}
-					>
-						<span class="text-2xs truncate">{name}</span>
-						<Badge color="dark-indigo">{id}</Badge>
-					</button>
-				{/each}
-			{:else}
-				<div class="text-sm text-gray-500">No items</div>
-			{/if}
+				{:else}
+					<div class="text-xs text-gray-500">No background scripts</div>
+				{/if}
+			</div>
 		</div>
-	</PanelSection>
-</div>
+	</div>
+</PanelSection>

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

@@ -1,7 +1,6 @@
-import type { Schema } from "../../../../common";
-import type { AppInputs } from "../../inputType";
-import type { GridItem } from "../../types";
-import type { AppComponent } from "../component";
+import type { Schema } from '../../../../common';
+import type { AppInputs } from '../../inputType';
+import type { GridItem } from '../../types';
 export interface AppScriptsList {
     inline: {
         name: string;
@@ -12,8 +11,5 @@ export interface AppScriptsList {
         id: string;
     }[];
 }
-export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): {};
-export declare function getAppScripts(grid: GridItem[]): FilledItem<{
-    data: AppComponent;
-    id: string;
-}>;
+export declare function computeFields(schema: Schema, defaultUserInput: boolean, fields: AppInputs): Record<string, import("../../inputType").StaticAppInput>;
+export declare function getAppScripts(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): AppScriptsList;

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

@@ -1,4 +1,4 @@
-import { fieldTypeToTsType, schemaToInputsSpec } from "../../utils";
+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
 export function computeFields(schema, defaultUserInput, fields) {
@@ -28,23 +28,34 @@ export function computeFields(schema, defaultUserInput, fields) {
     });
     return result;
 }
-export function getAppScripts(grid) {
-    return grid.reduce((acc, gridComponent) => {
-        const component = gridComponent.data;
+function processGridItemRunnable(gridItem, list) {
+    const component = gridItem.data;
+    if (component) {
         const componentInput = component.componentInput;
         if (component.type === 'tablecomponent') {
             component.actionButtons.forEach((actionButton) => {
                 if (actionButton.componentInput?.type !== 'runnable') {
                     return;
                 }
-                processRunnable(actionButton.componentInput.runnable, actionButton.id, acc);
+                processRunnable(actionButton.componentInput.runnable, actionButton.id, list);
             });
         }
         if (componentInput?.type === 'runnable') {
-            processRunnable(componentInput.runnable, gridComponent.id, acc);
+            processRunnable(componentInput.runnable, gridItem.id, list);
         }
-        return acc;
-    }, { inline: [], imported: [] });
+    }
+    return list;
+}
+export function getAppScripts(grid, subgrids) {
+    const scriptsList = grid.reduce((acc, gridComponent) => processGridItemRunnable(gridComponent, acc), { inline: [], imported: [] });
+    if (subgrids) {
+        Object.values(subgrids).forEach((subgrid) => {
+            subgrid.forEach((subgridComponent) => {
+                processGridItemRunnable(subgridComponent, scriptsList);
+            });
+        });
+    }
+    return scriptsList;
 }
 function processRunnable(runnable, id, list) {
     if (runnable?.type === undefined) {

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

@@ -6,6 +6,9 @@ import SubTypeEditor from './SubTypeEditor.svelte';
 export let componentInput;
 const dispatch = createEventDispatcher();
 function addElementByType() {
+    if (!Array.isArray(componentInput.value)) {
+        componentInput.value = [];
+    }
     if (componentInput.subFieldType && componentInput.value) {
         if (componentInput.subFieldType === 'boolean') {
             componentInput.value.push(false);
@@ -16,6 +19,9 @@ function addElementByType() {
         else if (componentInput.subFieldType === 'object') {
             componentInput.value.push({});
         }
+        else if (componentInput.subFieldType === 'labeledresource') {
+            componentInput.value.push({ value: '', label: '' });
+        }
         else if (componentInput.subFieldType === 'text' ||
             componentInput.subFieldType === 'textarea' ||
             // TODO: Add support for these types
@@ -40,7 +46,7 @@ function deleteElementByType(index) {
 </script>
 
 <div class="flex gap-2 flex-col mt-2">
-	{#if componentInput.value}
+	{#if Array.isArray(componentInput.value)}
 		{#each componentInput.value as value, index (index)}
 			<div class="flex flex-row gap-2 items-center relative">
 				<SubTypeEditor bind:componentInput bind:value />
@@ -58,13 +64,8 @@ function deleteElementByType(index) {
 				</div>
 			</div>
 		{/each}
-		<Button
-			size="xs"
-			color="light"
-			startIcon={{ icon: faPlus }}
-			on:click={() => addElementByType()}
-		>
-			Add
-		</Button>
 	{/if}
+	<Button size="xs" color="light" startIcon={{ icon: faPlus }} on:click={() => addElementByType()}>
+		Add
+	</Button>
 </div>

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

@@ -8,7 +8,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
@@ -17,7 +17,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<number[]> & {
             fieldType: "array";
@@ -26,7 +26,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<boolean[]> & {
             fieldType: "array";
@@ -35,7 +35,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
@@ -44,7 +44,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
@@ -53,7 +53,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
@@ -62,7 +62,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<object[]> & {
             fieldType: "array";
@@ -71,7 +71,7 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
@@ -80,10 +80,10 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         } & {
-            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions";
+            optionValuesKey: "buttonColorOptions" | "tabsKindOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions" | "splitPanelOptions";
         }) | (import("../../inputType").StaticInput<string[]> & {
             fieldType: "array";
             subFieldType?: "select" | undefined;
@@ -91,10 +91,19 @@ declare const __propDef: {
             fileUpload?: {
                 accept: string;
                 multiple?: boolean | undefined;
-                base64?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
             } | undefined;
         } & {
-            optionValuesKey: "buttonColorOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions";
+            optionValuesKey: "buttonColorOptions" | "tabsKindOptions" | "buttonSizeOptions" | "tableSearchOptions" | "chartThemeOptions" | "textStyleOptions" | "currencyOptions" | "localeOptions" | "objectFitOptions" | "splitPanelOptions";
+        }) | (import("../../inputType").StaticInput<object[]> & {
+            fieldType: "array";
+            subFieldType?: "labeledresource" | undefined;
+            format?: string | undefined;
+            fileUpload?: {
+                accept: string;
+                multiple?: boolean | undefined;
+                convertTo?: import("../../../common/fileInput/model").ReadFileAs | undefined;
+            } | undefined;
         });
     };
     events: {

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

@@ -3,7 +3,7 @@ import { faArrowRight, faCode, faPen } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 export let componentInput;
 export let disableStatic = false;
-const { onchange } = getContext('AppEditorContext');
+const { onchange } = getContext('AppViewerContext');
 $: if (componentInput.fieldType == 'template' && componentInput.type == 'static') {
     //@ts-ignore
     componentInput.type = 'template';