windmill-components 1.84.6 → 1.86.0

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

@@ -0,0 +1,90 @@
+<script>import { allItems } from '../../../utils';
+import { forbiddenIds } from '../../../../flows/idUtils';
+import { ArrowRight, Pencil } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import { fade, slide } from 'svelte/transition';
+import { Button, Popup } from '../../../../common';
+const { app, selectedComponent } = getContext('AppViewerContext');
+export let id;
+const dispatch = createEventDispatcher();
+const regex = /^[a-zA-Z0-9]{1,}$/;
+let value = id;
+let button;
+let input;
+let error = '';
+$: if (!regex.test(value)) {
+    error = 'The ID must include only letters and numbers';
+}
+else if (forbiddenIds.includes(value)) {
+    error = 'This ID is reserved';
+}
+else if (allItems($app.grid, $app.subgrids).some((item) => item.id === value && item.id !== id)) {
+    error = 'This ID is already in use';
+}
+else {
+    id = value;
+    error = '';
+}
+function save() {
+    if (error != '') {
+        return;
+    }
+    dispatch('change', id);
+    input.blur();
+}
+</script>
+
+<button
+	on:click|stopPropagation={() => {
+		$selectedComponent = [id]
+	}}
+	bind:this={button}
+	title="Edit ID"
+	class="flex items-center px-1 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+	aria-label="Open component ID editor"
+>
+	<Pencil size={14} />
+</button>
+<Popup
+	ref={button}
+	options={{ placement: 'top-start' }}
+	transition={fade}
+	wrapperClasses="!z-[1002]"
+	outerClasses="rounded shadow-xl bg-white border p-3"
+	on:close={() => (value = id)}
+>
+	<label class="block text-gray-900">
+		<div class="pb-1 text-sm text-gray-600">Component ID</div>
+		<div class="flex w-full">
+			<input
+				type="text"
+				bind:value
+				class="!w-auto grow"
+				bind:this={input}
+				on:click|stopPropagation={() => {}}
+				on:keypress={({ key }) => {
+					if (key === 'Enter') save()
+				}}
+			/>
+			<Button
+				size="xs"
+				color="blue"
+				buttonType="button"
+				btnClasses="!p-1 !w-[34px] !ml-1"
+				aria-label="Save ID"
+				disabled={error != ''}
+				on:click={save}
+			>
+				<ArrowRight size={18} />
+			</Button>
+		</div>
+		{#if error != ''}
+			<div
+				transition:slide|local={{ duration: 100 }}
+				class="w-full text-sm text-red-600 whitespace-pre-wrap pt-1"
+			>
+				{error}
+			</div>
+		{/if}
+	</label>
+</Popup>

package/components/apps/editor/contextPanel/components/IdEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IdEditorProps = typeof __propDef.props;
+export type IdEditorEvents = typeof __propDef.events;
+export type IdEditorSlots = typeof __propDef.slots;
+export default class IdEditor extends SvelteComponentTyped<IdEditorProps, IdEditorEvents, IdEditorSlots> {
+}
+export {};

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

@@ -1,7 +1,9 @@
-<script>import { classNames } from '../../../../../utils';
+<script>import { allItems } from '../../../utils';
+import { classNames } from '../../../../../utils';
 import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
 import { getContext } from 'svelte';
-import { allsubIds } from '../../appUtils';
+import { allsubIds, findGridItem } from '../../appUtils';
+import IdEditor from './IdEditor.svelte';
 export let id;
 export let name;
 export let first = false;
@@ -32,18 +34,78 @@ const idClass = {
     blue: 'bg-blue-500 text-white',
     indigo: 'bg-indigo-500 text-white'
 };
+function renameId(newId) {
+    {
+        const item = findGridItem($app, id);
+        if (item) {
+            item.data.id = newId;
+            item.id = newId;
+        }
+        const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(id + '-'));
+        oldSubgrids.forEach((subgrid) => {
+            if ($app.subgrids) {
+                $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid];
+                delete $app.subgrids[subgrid];
+            }
+        });
+        allItems($app.grid, $app.subgrids).forEach((item) => {
+            if (item.data.componentInput?.type == 'connected') {
+                if (item.data.componentInput.connection?.componentId === id) {
+                    item.data.componentInput.connection.componentId = newId;
+                }
+            }
+            else if (item.data.componentInput?.type == 'runnable') {
+                if (item.data.componentInput?.runnable?.type === 'runnableByName' &&
+                    item.data.componentInput?.runnable?.inlineScript?.refreshOn
+                        ?.map((x) => x.id)
+                        ?.includes(id)) {
+                    item.data.componentInput.runnable.inlineScript.refreshOn =
+                        item.data.componentInput.runnable.inlineScript.refreshOn.map((x) => {
+                            if (x.id === id) {
+                                return {
+                                    id: newId,
+                                    key: x.key
+                                };
+                            }
+                            return x;
+                        });
+                }
+            }
+            Object.values(item.data.configuration ?? {}).forEach((config) => {
+                if (config.type === 'connected') {
+                    if (config.connection?.componentId === id) {
+                        config.connection.componentId = newId;
+                    }
+                }
+                else if (config.type == 'oneOf') {
+                    Object.values(config.configuration ?? {}).forEach((choices) => {
+                        Object.values(choices).forEach((c) => {
+                            if (c.type === 'connected') {
+                                if (c.connection?.componentId === id) {
+                                    c.connection.componentId = newId;
+                                }
+                            }
+                        });
+                    });
+                }
+            });
+        });
+        $app = $app;
+        $selectedComponent = [newId];
+    }
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class={$search == '' || inSearch ? '' : 'invisible h-0 overflow-hidden'}>
 	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 	<div
-		on:mouseover|stopPropagation={() => {
+		on:mouseenter|stopPropagation={() => {
 			if (id !== $hoverStore) {
 				$hoverStore = id
 			}
 		}}
-		on:mouseout|stopPropagation={() => {
+		on:mouseleave|stopPropagation={() => {
 			if ($hoverStore !== undefined) {
 				$hoverStore = undefined
 			}
@@ -63,26 +125,35 @@ const idClass = {
 			$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
 		}}
 	>
-		<button
-			disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
-			title="Select component"
-			on:click|stopPropagation={() => ($selectedComponent = [id])}
-			class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
-		>
-			<div
-				class={classNames(
-					'text-2xs  font-bold px-2 py-0.5 rounded-sm',
-					$selectedComponent?.includes(id) ? idClass[color] : ''
-				)}
+		<div class="flex">
+			<button
+				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
+				title="Select component"
+				on:click|stopPropagation={() => ($selectedComponent = [id])}
+				class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
 			>
-				{id}
-			</div>
-			{#if selectable && !$selectedComponent?.includes(id)}
-				<div class=" px-1 ">
-					<Pointer size={14} />
+				<div
+					class={classNames(
+						'text-2xs  font-bold px-2 py-0.5 rounded-sm',
+						$selectedComponent?.includes(id) ? idClass[color] : ''
+					)}
+				>
+					{id}
 				</div>
+				{#if selectable && !$selectedComponent?.includes(id)}
+					<div class="px-1">
+						<Pointer size={14} />
+					</div>
+				{/if}
+			</button>
+			{#if selectable && ($selectedComponent?.includes(id) || $hoverStore === id)}
+				<IdEditor
+					{id}
+					on:selected={() => ($selectedComponent = [id])}
+					on:change={({ detail }) => renameId(detail)}
+				/>
 			{/if}
-		</button>
+		</div>
 		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
 			{name}
 			{#if !open}

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

@@ -5,7 +5,7 @@ import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs } from '../../../../infer';
 import Badge from '../../../common/badge/Badge.svelte';
 import Editor from '../../../Editor.svelte';
-import { emptySchema, isMac, scriptLangToEditorLang } from '../../../../utils';
+import { emptySchema, getModifierKey, scriptLangToEditorLang } from '../../../../utils';
 import Popover from '../../../Popover.svelte';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
@@ -148,7 +148,7 @@ function handleRefreshOn(refreshOn) {
 						Format
 
 						<div class="flex flex-row items-center gap-1">
-							<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
+							<Kbd>{getModifierKey()}</Kbd>
 							<Kbd>S</Kbd>
 						</div>
 					</div>
@@ -170,7 +170,7 @@ function handleRefreshOn(refreshOn) {
 							Run
 
 							<div class="flex flex-row items-center gap-1">
-								<Kbd>{isMac() ? '⌘' : 'CTRL'}</Kbd>
+								<Kbd>{getModifierKey()}</Kbd>
 								<Kbd>
 									<div class="h-4 flex items-center justify-center">
 										<CornerDownLeft size={10} />
@@ -188,6 +188,7 @@ function handleRefreshOn(refreshOn) {
 		<div class="border h-full">
 			{#if inlineScript.language != 'frontend'}
 				<Editor
+					path={inlineScript.path}
 					bind:this={editor}
 					class="flex flex-1 grow h-full"
 					lang={scriptLangToEditorLang(inlineScript?.language)}

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

@@ -48,11 +48,11 @@ function createBackgroundScript() {
 			<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 ">
+					<div class="flex gap-1 flex-col">
 						{#each runnables.inline as { name, id, transformer }, index (index)}
 							<button
 								id={PREFIX + id}
-								class="panel-item 
+								class="panel-item
 				{$selectedComponentInEditor === id ? 'border-blue-500 bg-blue-100' : 'hover:bg-blue-50'}"
 								on:click={() => selectScript(id)}
 							>
@@ -79,7 +79,7 @@ function createBackgroundScript() {
 					</div>
 				{/if}
 				{#if $app.unusedInlineScripts?.length > 0}
-					<div class="flex gap-1 flex-col ">
+					<div class="flex gap-1 flex-col">
 						{#each $app.unusedInlineScripts as unusedInlineScript, index (index)}
 							{@const id = `unused-${index}`}
 							<button

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

@@ -14,49 +14,62 @@ let clientWidth;
 </script>
 
 {#if componentInput.fieldType !== 'any'}
-	<div class="w-full overflow-x-auto" bind:clientWidth>
-		<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
-			{#if componentInput.fieldType === 'template'}
-				<ToggleButton position="left" value="template" size="xs" disable={disableStatic}>
-					{brackets}&nbsp;<span class="hidden lg:block">Template</span>
+	<div class="w-full">
+		<div class="mx-auto" bind:clientWidth>
+			<ToggleButtonGroup on:selected={() => onchange?.()} bind:selected={componentInput.type}>
+				{#if componentInput.fieldType === 'template'}
+					<ToggleButton
+						title={`Templated string (use \$\{<output>.x\} )`}
+						position="left"
+						value="template"
+						size="xs"
+						disable={disableStatic}
+					>
+						<span class="font-mono text-2xs h-3 -mt-0.5">
+							{brackets}
+						</span>
+						{#if clientWidth > 250}
+							&nbsp;Template
+						{/if}
+					</ToggleButton>
+				{:else}
+					<ToggleButton
+						title="Static"
+						position="left"
+						value="static"
+						startIcon={{ icon: faPen }}
+						size="xs"
+						disable={disableStatic}
+					>
+						{#if clientWidth > 250}
+							Static
+						{/if}
+					</ToggleButton>
+				{/if}
+
+				<ToggleButton
+					title="Connect to an output"
+					value="connected"
+					position="center"
+					startIcon={{ icon: faArrowRight }}
+					size="xs"
+				>
+					{#if clientWidth > 250}
+						Connect
+					{/if}
 				</ToggleButton>
-			{:else}
 				<ToggleButton
-					title="Static"
-					position="left"
-					value="static"
-					startIcon={{ icon: faPen }}
+					title="Compute it with a script/flow"
+					position="right"
+					value="runnable"
+					startIcon={{ icon: faCode }}
 					size="xs"
-					disable={disableStatic}
 				>
 					{#if clientWidth > 250}
-						<span class="hidden lg:block">Static</span>
+						Compute
 					{/if}
 				</ToggleButton>
-			{/if}
-
-			<ToggleButton
-				title="Connect"
-				value="connected"
-				position="center"
-				startIcon={{ icon: faArrowRight }}
-				size="xs"
-			>
-				{#if clientWidth > 250}
-					<span class="hidden lg:block">Connect</span>
-				{/if}
-			</ToggleButton>
-			<ToggleButton
-				title="Compute"
-				position="right"
-				value="runnable"
-				startIcon={{ icon: faCode }}
-				size="xs"
-			>
-				{#if clientWidth > 250}
-					<span class="hidden lg:block">Compute</span>
-				{/if}
-			</ToggleButton>
-		</ToggleButtonGroup>
+			</ToggleButtonGroup>
+		</div>
 	</div>
 {/if}

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

@@ -121,7 +121,7 @@ $: componentSettings?.item?.data && ($app = $app);
 								noVariablePicker
 							/>
 						{:else if componentSettings.item.data.componentInput.type === 'template' && componentSettings.item.data.componentInput !== undefined}
-							<div class="py-1 min-h-[28px]  rounded border border-1 border-gray-500">
+							<div class="py-1 min-h-[28px] rounded border border-1 border-gray-500">
 								<TemplateEditor
 									bind:this={editor}
 									fontSize={12}
@@ -185,7 +185,7 @@ $: componentSettings?.item?.data && ($app = $app);
 				/>
 			</PanelSection>
 		{:else}
-			<div class="h-full w-full font-bold text-gray-400 text-lg py-10 px-4"
+			<div class="h-full w-full text-sm text-gray-500 text-center py-8 px-2"
 				>{ccomponents[component.type].name} has no configuration</div
 			>
 		{/if}
@@ -210,7 +210,7 @@ $: componentSettings?.item?.data && ($app = $app);
 
 		{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
 			<PanelSection title="Styling">
-				<div slot="action">
+				<div slot="action" class="flex justify-end flex-wrap gap-1">
 					<Button
 						color="light"
 						size="xs"

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

@@ -22,6 +22,16 @@ function detach() {
 function clear() {
     appInput = clearResultAppInput(appInput);
 }
+$: {
+    if (appInput.recomputeOnInputChanged === undefined) {
+        appInput.recomputeOnInputChanged = true;
+    }
+    //TODO: remove after migration is done
+    if (appInput.doNotRecomputeOnInputChanged != undefined) {
+        appInput.recomputeOnInputChanged = !appInput.doNotRecomputeOnInputChanged;
+        appInput.doNotRecomputeOnInputChanged = undefined;
+    }
+}
 </script>
 
 <div class="flex justify-between w-full items-center gap-1">
@@ -32,7 +42,7 @@ function clear() {
 			{appInput.runnable.path}
 		{/if}
 	</span>
-	<div class="flex gap-1  justify-center">
+	<div class="flex gap-1 justify-center">
 		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
 			<Button size="xs" color="light" variant="border" on:click={detach}>
 				Detach&nbsp;
@@ -94,11 +104,9 @@ function clear() {
 		<div class="flex items-center">
 			<Toggle
 				size="xs"
-				color="red"
-				bind:checked={appInput.doNotRecomputeOnInputChanged}
-				options={{ right: 'do NOT recompute on input changes' }}
+				bind:checked={appInput.recomputeOnInputChanged}
+				options={{ right: 'recompute on any input changes' }}
 			/>
-			<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
 		</div>
 	{/if}
 
@@ -107,7 +115,7 @@ function clear() {
 			bind:runnable={appInput.runnable}
 			{appComponent}
 			fields={appInput.fields}
-			doNotRecomputeOnInputChanged={appInput.doNotRecomputeOnInputChanged}
+			recomputeOnInputChanged={appInput.recomputeOnInputChanged}
 		/>
 	</div>
 {/if}

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

@@ -1,6 +1,6 @@
 <script>import { Badge } from '../../../common';
 import Button from '../../../common/button/Button.svelte';
-import { getNextId } from '../../../flows/flowStateUtils';
+import { getNextId } from '../../../flows/idUtils';
 import { classNames } from '../../../../utils';
 import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';

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

@@ -13,9 +13,9 @@ function applyConnection() {
             input: undefined,
             hoveredComponent: undefined
         };
+        $app = $app;
+        $worldStore = $worldStore;
     }
-    $app = $app;
-    $worldStore = $worldStore;
 }
 $: $connectingInput && applyConnection();
 </script>

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

@@ -70,6 +70,7 @@ function select(label) {
 {#if anchor}
 	<Popup
 		ref={anchor}
+		closeOn={[]}
 		options={{ placement: 'bottom' }}
 		bind:open={openPopup}
 		let:close
@@ -79,7 +80,11 @@ function select(label) {
 			<div class="max-w-xs shadow-[0_10px_40px_-5px_rgba(0,0,0,0.25)] bg-white rounded-md p-2">
 				{#if filteredItems}
 					<input
-						on:keydown|stopPropagation
+						on:keydown={(event) => {
+							if (!['ArrowDown', 'ArrowUp'].includes(event.key)) {
+								event.stopPropagation()
+							}
+						}}
 						bind:value={search}
 						type="text"
 						placeholder="Search"
@@ -95,8 +100,8 @@ function select(label) {
 									select(label)
 									close()
 								}}
-								class="w-full center-center flex-col font-normal p-1 
-									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 
+								class="w-full center-center flex-col font-normal p-1
+									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200
 									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
 							>
 								<svelte:component this={icon} size={22} />

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

@@ -5,8 +5,6 @@ declare const __propDef: {
         componentInput: StaticInput<string>;
     };
     events: {
-        keydown: KeyboardEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -155,7 +155,7 @@ function createScript() {
 		color="light"
 		variant="border"
 		startIcon={{ icon: faPlus }}
-		btnClasses="truncate"
+		btnClasses="truncate w-full"
 	>
 		Create an inline script
 	</Button>
@@ -164,7 +164,7 @@ function createScript() {
 		size="sm"
 		color="blue"
 		startIcon={{ icon: faMousePointer }}
-		btnClasses="truncate"
+		btnClasses="truncate w-full"
 	>
 		Select a script or flow
 	</Button>

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

@@ -8,7 +8,6 @@ import { emptyString } from '../../../../../utils';
 import { Skeleton } from '../../../../common';
 export let filter = '';
 let flows = undefined;
-let loading = false;
 let filteredItems = [];
 $: prefilteredItems = flows ?? [];
 const dispatch = createEventDispatcher();
@@ -18,10 +17,8 @@ async function loadFlow() {
         perPage: 300
     });
     flows = loadedFlows;
-    loading = false;
 }
 onMount(() => {
-    loading = true;
     loadFlow();
 });
 </script>
@@ -56,7 +53,7 @@ onMount(() => {
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
@@ -64,7 +61,7 @@ onMount(() => {
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs ">
+								<div class="text-gray-600 text-xs">
 									{item.path}
 								</div>
 							</div>

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

@@ -8,7 +8,6 @@ import { emptyString } from '../../../../../utils';
 import { Skeleton } from '../../../../common';
 export let filter = '';
 let scripts = undefined;
-let loading = false;
 let filteredItems = [];
 $: prefilteredItems = scripts ?? [];
 const dispatch = createEventDispatcher();
@@ -18,10 +17,8 @@ async function loadScripts() {
         perPage: 300
     });
     scripts = loadedScripts;
-    loading = false;
 }
 onMount(() => {
-    loading = true;
     loadScripts();
 });
 </script>
@@ -56,7 +53,7 @@ onMount(() => {
 						<div class="flex items-center gap-4">
 							<RowIcon kind="script" />
 
-							<div class="w-full text-left font-normal ">
+							<div class="w-full text-left font-normal">
 								<div class="text-gray-900 flex-wrap text-md font-semibold mb-1">
 									{#if item.marked}
 										{@html item.marked ?? ''}
@@ -64,7 +61,7 @@ onMount(() => {
 										{!item.summary || item.summary.length == 0 ? item.path : item.summary}
 									{/if}
 								</div>
-								<div class="text-gray-600 text-xs ">
+								<div class="text-gray-600 text-xs">
 									{item.path}
 								</div>
 							</div>