windmill-components 1.291.4 → 1.305.0

package/package/components/FlowStatusViewer.svelte

@@ -5,7 +5,7 @@ import { isOwner as loadIsOwner } from '../utils';
 import { userStore, workspaceStore } from '../stores';
 export let jobId;
 export let workspaceId = undefined;
-export let flowStateStore = undefined;
+export let flowStateStore = writable({});
 export let selectedJobStep = undefined;
 export let isOwner = false;
 let lastJobId = jobId;

package/package/components/FlowStatusViewerInner.svelte

@@ -31,6 +31,7 @@ export let selectedNode = undefined;
 export let globalModuleStates;
 export let globalDurationStatuses;
 export let childFlow = false;
+export let reducedPolling = false;
 let jobResults = [];
 let jobFailures = [];
 let forloop_selected = '';
@@ -78,22 +79,6 @@ function initializeByJob(modId) {
         return x;
     }));
 }
-if (flowJobIds) {
-    let common = {
-        iteration_from: Math.max(flowJobIds.flowJobs.length - 20, 0),
-        iteration_total: flowJobIds?.length
-    };
-    let modId = flowJobIds?.moduleId ?? '';
-    $localDurationStatuses[modId] = {
-        ...($localDurationStatuses[modId] ?? { byJob: {} }),
-        ...common
-    };
-    let prefixed = modId;
-    globalDurationStatuses.forEach((x) => x.update((x) => {
-        x[prefixed] = { ...(x[prefixed] ?? { byJob: {} }), ...common };
-        return x;
-    }));
-}
 function updateForloop(len) {
     forloop_selected = flowJobIds?.flowJobs[len - 1] ?? '';
     lastSize = len;
@@ -110,7 +95,13 @@ function updateStatus(status) {
     else if ($retryStatus[jobId ?? ''] != undefined) {
         delete $retryStatus[jobId ?? ''];
     }
-    $suspendStatus[jobId ?? ''] = job?.flow_status?.modules?.[job?.flow_status.step]?.count;
+    let jobStatus = job?.flow_status?.modules?.[job?.flow_status.step];
+    if (jobStatus && jobStatus.count != undefined) {
+        $suspendStatus[jobId ?? ''] = { nb: jobStatus.count, job: job };
+    }
+    else if ($suspendStatus[jobId ?? ''] != undefined) {
+        delete $suspendStatus[jobId ?? ''];
+    }
 }
 function updateInnerModules() {
     if ($localModuleStates) {
@@ -124,7 +115,8 @@ function updateInnerModules() {
                 $localModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
                 JobService.getJob({
                     workspace: workspaceId ?? $workspaceStore ?? '',
-                    id: mod.job ?? ''
+                    id: mod.job ?? '',
+                    noLogs: true
                 })
                     .then((job) => {
                     const newState = {
@@ -151,7 +143,8 @@ async function loadJobInProgress() {
         try {
             const newJob = await JobService.getJob({
                 workspace: workspaceId ?? $workspaceStore ?? '',
-                id: jobId ?? ''
+                id: jobId ?? '',
+                noLogs: true
             });
             if (!deepEqual(job, newJob)) {
                 job = newJob;
@@ -166,16 +159,34 @@ async function loadJobInProgress() {
         }
     }
     if (job?.type !== 'CompletedJob' && errorCount < 4) {
-        timeout = setTimeout(() => loadJobInProgress(), 500);
+        timeout = setTimeout(() => loadJobInProgress(), reducedPolling ? 5000 : 1000);
     }
 }
 async function updateJobId() {
     if (jobId !== job?.id) {
         $localModuleStates = {};
-        $localDurationStatuses = {};
         flowTimeline?.reset();
         timeout && clearTimeout(timeout);
         innerModules = [];
+        if (flowJobIds) {
+            let common = {
+                iteration_from: Math.max(flowJobIds.flowJobs.length - 20, 0),
+                iteration_total: flowJobIds?.length
+            };
+            let modId = flowJobIds?.moduleId ?? '';
+            $localDurationStatuses[modId] = {
+                ...($localDurationStatuses[modId] ?? { byJob: {} }),
+                ...common
+            };
+            let prefixed = modId;
+            globalDurationStatuses.forEach((x) => x.update((x) => {
+                x[prefixed] = { ...(x[prefixed] ?? { byJob: {} }), ...common };
+                return x;
+            }));
+        }
+        else {
+            $localDurationStatuses = {};
+        }
         await loadJobInProgress();
     }
 }
@@ -245,6 +256,12 @@ function onJobsLoaded(mod, job) {
 function innerJobLoaded(jobLoaded, j) {
     let modId = flowJobIds?.moduleId;
     if (modId) {
+        if ($flowStateStore && $flowStateStore?.[modId] == undefined) {
+            $flowStateStore[modId] = {
+                ...$flowStateStore[modId],
+                previewResult: jobLoaded.args
+            };
+        }
         if ($flowStateStore?.[modId]) {
             if (!childFlow) {
                 if (!$flowStateStore[modId].previewResult ||
@@ -321,6 +338,26 @@ function innerJobLoaded(jobLoaded, j) {
 }
 let flowTimeline;
 let rightColumnSelect = 'timeline';
+let slicedListJobIds = [];
+$: flowJobIds && !deepEqual(flowJobIds, lastFlowJobIds) && updateSlicedListJobIds();
+let lastFlowJobIds = undefined;
+function updateSlicedListJobIds() {
+    lastFlowJobIds = flowJobIds;
+    slicedListJobIds =
+        (flowJobIds?.flowJobs.length ?? 0) > 20
+            ? flowJobIds?.flowJobs?.slice($localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0) ?? []
+            : flowJobIds?.flowJobs ?? [];
+}
+function loadPreviousIters(lenToAdd) {
+    let r = $localDurationStatuses[flowJobIds?.moduleId ?? ''];
+    if (r.iteration_from) {
+        r.iteration_from -= lenToAdd;
+        $localDurationStatuses = $localDurationStatuses;
+        globalDurationStatuses.forEach((x) => x.update((x) => x));
+    }
+    jobResults = [...new Array(lenToAdd), ...jobResults];
+    updateSlicedListJobIds();
+}
 </script>
 
 {#if job}
@@ -337,23 +374,28 @@ let rightColumnSelect = 'timeline';
 			)}
 
 			{#if (flowJobIds?.flowJobs.length ?? 0) > 20 && lenToAdd > 0}
+				{@const allToAdd = (flowJobIds?.length ?? 0) - (slicedListJobIds.length ?? 0)}
 				<p class="text-tertiary italic text-xs">
 					For performance reasons, only the last 20 items are shown by default <button
 						class="text-primary underline ml-4"
 						on:click={() => {
-							let r = $localDurationStatuses[flowJobIds?.moduleId ?? '']
-							if (r.iteration_from) {
-								r.iteration_from -= lenToAdd
-								$localDurationStatuses = $localDurationStatuses
-								globalDurationStatuses.forEach((x) => x.update((x) => x))
-							}
+							loadPreviousIters(lenToAdd)
 						}}
 						>Load {lenToAdd} prior
 					</button>
+					{#if allToAdd > 0}
+						<button
+							class="text-primary underline ml-4"
+							on:click={() => {
+								loadPreviousIters(allToAdd)
+							}}
+							>Load {allToAdd} prior
+						</button>
+					{/if}
 				</p>
 			{/if}
 			{#if render}
-				<div class="w-full h-full border border-gray-600 bg-surface p-1 overflow-auto">
+				<div class="w-full h-full border border-secondary bg-surface p-1 overflow-auto">
 					<DisplayResult workspaceId={job?.workspace_id} {jobId} result={jobResults} />
 				</div>
 			{/if}
@@ -371,13 +413,26 @@ let rightColumnSelect = 'timeline';
 							jobId={job?.id}
 							loading={job['running'] == true}
 							result={job.result}
-							logs={job.logs ?? ''}
+							logs={job.logs}
 						/>
 					</div>
 				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
 					<FlowStatusWaitingForEvents {workspaceId} {job} {isOwner} />
+				{:else if $suspendStatus && Object.keys($suspendStatus).length > 0}
+					<div class="flex gap-2 flex-col">
+						{#each Object.values($suspendStatus) as suspendCount (suspendCount.job.id)}
+							<div>
+								<div class="text-sm">
+									Flow suspended, waiting for {suspendCount.nb} events
+								</div>
+								<FlowStatusWaitingForEvents job={suspendCount.job} {workspaceId} {isOwner} />
+							</div>
+						{/each}
+					</div>
 				{:else if job.logs}
-					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
+					<div
+						class="text-xs p-4 bg-surface-secondary overflow-auto max-h-80 border border-tertiary-inverse"
+					>
 						<pre class="w-full">{job.logs}</pre>
 					</div>
 				{:else if innerModules?.length > 0}
@@ -426,22 +481,28 @@ let rightColumnSelect = 'timeline';
 					Embedded flows: ({flowJobIds?.flowJobs.length} items)
 				</h3>
 				{#if (flowJobIds?.flowJobs.length ?? 0) > 20 && lenToAdd > 0}
+					{@const allToAdd = (flowJobIds?.length ?? 0) - (slicedListJobIds.length ?? 0)}
+
 					<p class="text-tertiary italic text-xs">
 						For performance reasons, only the last 20 items are shown by default <button
 							class="text-primary underline ml-4"
 							on:click={() => {
-								let r = $localDurationStatuses[flowJobIds?.moduleId ?? '']
-								if (r.iteration_from) {
-									r.iteration_from -= lenToAdd
-									$localDurationStatuses = $localDurationStatuses
-									globalDurationStatuses.forEach((x) => x.update((x) => x))
-								}
+								loadPreviousIters(lenToAdd)
 							}}
 							>Load {lenToAdd} prior
 						</button>
+						{#if allToAdd > 0}
+							<button
+								class="text-primary underline ml-4"
+								on:click={() => {
+									loadPreviousIters(allToAdd)
+								}}
+								>Load {allToAdd} prior
+							</button>
+						{/if}
 					</p>
 				{/if}
-				{#each (flowJobIds?.flowJobs.length ?? 0) > 20 ? flowJobIds?.flowJobs?.slice($localDurationStatuses[flowJobIds?.moduleId ?? '']?.iteration_from ?? 0) ?? [] : flowJobIds?.flowJobs ?? [] as loopJobId, j (loopJobId)}
+				{#each slicedListJobIds as loopJobId, j (loopJobId)}
 					{#if render}
 						<Button
 							variant={forloop_selected === loopJobId ? 'contained' : 'border'}
@@ -471,12 +532,14 @@ let rightColumnSelect = 'timeline';
 						</Button>
 					{/if}
 
+					<!-- <LogId id={loopJobId} /> -->
 					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 						<svelte:self
 							{childFlow}
 							globalModuleStates={[localModuleStates, ...globalModuleStates]}
 							globalDurationStatuses={[localDurationStatuses, ...globalDurationStatuses]}
 							render={forloop_selected == loopJobId && selected == 'sequence' && render}
+							reducedPolling={flowJobIds?.flowJobs.length && flowJobIds?.flowJobs.length > 20}
 							{workspaceId}
 							jobId={loopJobId}
 							on:jobsLoaded={(e) => innerJobLoaded(e.detail, j)}
@@ -570,9 +633,9 @@ let rightColumnSelect = 'timeline';
 								{/if}
 							{/each}
 							{#each Object.values($suspendStatus) as count}
-								{#if count}
+								{#if count.nb}
 									<span class="text-sm">
-										Flow suspended, waiting for {count} events
+										Flow suspended, waiting for {count.nb} events
 									</span>
 								{/if}
 							{/each}
@@ -600,10 +663,15 @@ let rightColumnSelect = 'timeline';
 							failureModule={job.raw_flow?.failure_module}
 						/>
 					</div>
-					<div class="border-l border-gray-400 pt-1 overflow-auto min-h-[800px] flex flex-col">
+					<div
+						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col"
+					>
 						<Tabs bind:selected={rightColumnSelect}>
 							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
 							<Tab value="detail"><span class="font-semibold">Details</span></Tab>
+							{#if Object.keys(job?.flow_status?.user_states ?? {}).length > 0}
+								<Tab value="user_states"><span class="font-semibold">User States</span></Tab>
+							{/if}
 						</Tabs>
 						{#if rightColumnSelect == 'timeline'}
 							<FlowTimeline
@@ -613,7 +681,7 @@ let rightColumnSelect = 'timeline';
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'detail'}
-							<div class="pt-2">
+							<div class="pt-2 h-full">
 								{#if selectedNode}
 									{@const node = $localModuleStates[selectedNode]}
 
@@ -663,15 +731,16 @@ let rightColumnSelect = 'timeline';
 												<JobArgs args={node.args} />
 											</div>
 										{/if}
-
 										<FlowJobResult
 											workspaceId={job?.workspace_id}
 											jobId={node.job_id}
 											noBorder
-											loading={false}
+											loading={node.type != FlowStatusModule.type.SUCCESS &&
+												node.type != FlowStatusModule.type.FAILURE}
+											refreshLog={node.type == FlowStatusModule.type.IN_PROGRESS}
 											col
 											result={node.result}
-											logs={node.logs ?? ''}
+											logs={node.logs}
 										/>
 									{:else}
 										<p class="p-2 text-tertiary italic"
@@ -682,6 +751,10 @@ let rightColumnSelect = 'timeline';
 								{:else}<p class="p-2 text-tertiary italic">Select a node to see its details here</p
 									>{/if}
 							</div>
+						{:else if rightColumnSelect == 'user_states'}
+							<div class="p-2">
+								<JobArgs argLabel="Key" args={job?.flow_status?.user_states ?? {}} />
+							</div>
 						{/if}
 					</div>
 				</div>

package/package/components/FlowStatusViewerInner.svelte.d.ts

@@ -19,6 +19,7 @@ declare const __propDef: {
         globalModuleStates: Writable<Record<string, GraphModuleState>>[];
         globalDurationStatuses: Writable<Record<string, DurationStatus>>[];
         childFlow?: boolean | undefined;
+        reducedPolling?: boolean | undefined;
     };
     events: {
         jobsLoaded: CustomEvent<any>;

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -2,6 +2,8 @@
 import { Job, JobService } from '../gen';
 import { workspaceStore } from '../stores';
 import { sendUserToast } from '../toast';
+import { X } from 'lucide-svelte';
+import DisplayResult from './DisplayResult.svelte';
 import LightweightSchemaForm from './LightweightSchemaForm.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
@@ -9,73 +11,120 @@ export let isOwner;
 export let workspaceId;
 export let job;
 let default_payload = {};
-let enum_payload = {};
 let resumeUrl = undefined;
+let cancelUrl = undefined;
+let description = undefined;
+let hide_cancel = false;
 $: approvalStep = (job?.flow_status?.step ?? 1) - 1;
+let defaultValues = {};
 $: job && getDefaultArgs();
+let schema = {};
+let lastJobId = undefined;
 async function getDefaultArgs() {
-    let jobId = job.flow_status?.modules?.[approvalStep]?.job;
+    let jobId = job?.flow_status?.modules?.[approvalStep]?.job;
+    if (jobId === lastJobId) {
+        return;
+    }
     if (!jobId) {
         return {};
     }
+    lastJobId = jobId;
     let job_result = await JobService.getCompletedJobResult({
         workspace: workspaceId ?? $workspaceStore ?? '',
         id: jobId
     });
-    default_payload = job_result?.default_args ?? {};
-    enum_payload = job_result?.enums ?? {};
+    const args = job_result?.default_args ?? {};
+    description = job_result?.description;
+    defaultValues = JSON.parse(JSON.stringify(args));
+    default_payload = args;
     resumeUrl = job_result?.['resume'];
+    cancelUrl = job_result?.['cancel'];
+    hide_cancel = job?.raw_flow?.modules?.[approvalStep]?.suspend?.hide_cancel ?? false;
+    schema = mergeSchema(job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? {}, job_result?.enums ?? {});
+}
+async function continu(approve) {
+    if ((resumeUrl && approve) || (cancelUrl && !approve)) {
+        let split = (approve ? resumeUrl : cancelUrl).split('/');
+        let signatureUrl = split.pop() ?? '';
+        const regex = /([^?]+)(?:\?[^=]+=(\w+))?/;
+        const matches = signatureUrl.match(regex);
+        const signature = matches?.[1];
+        if (!signature) {
+            sendUserToast(`Could not parse signature: ${signatureUrl}`, true);
+            return;
+        }
+        const approver = matches?.[2] || undefined;
+        let resumeId = -1;
+        let parsedResumeId = split.pop() ?? '';
+        try {
+            resumeId = new Number(parsedResumeId).valueOf();
+        }
+        catch (e) {
+            console.error(`Could not parse resume id: ${parsedResumeId}`);
+        }
+        let jobId = split.pop() ?? '';
+        if (approve) {
+            await JobService.resumeSuspendedJobPost({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: jobId,
+                requestBody: default_payload,
+                resumeId,
+                signature,
+                approver
+            });
+        }
+        else {
+            await JobService.cancelSuspendedJobPost({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: jobId,
+                resumeId,
+                signature,
+                approver,
+                requestBody: {}
+            });
+        }
+    }
+    else {
+        if (approve) {
+            await JobService.resumeSuspendedFlowAsOwner({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: job?.id ?? '',
+                requestBody: default_payload
+            });
+        }
+        else {
+            await JobService.cancelQueuedJob({
+                workspace: workspaceId ?? $workspaceStore ?? '',
+                id: job?.id ?? '',
+                requestBody: {}
+            });
+        }
+    }
 }
 </script>
 
 <div class="w-full h-full mt-2 text-sm text-tertiary">
 	<p>Waiting to be resumed</p>
+	{#if description != undefined}
+		<DisplayResult noControls result={description} />
+	{/if}
 	<div>
 		{#if isOwner || resumeUrl}
 			<div class="flex flex-row gap-2 mt-2">
+				{#if cancelUrl && !hide_cancel}
+					<div>
+						<Button
+							color="red"
+							title="Cancel the flow"
+							iconOnly
+							startIcon={{ icon: X }}
+							variant="border"
+							on:click={() => continu(false)}
+						/>
+					</div>
+				{/if}
 				<div>
-					<Button
-						color="green"
-						variant="border"
-						on:click={async () => {
-							if (resumeUrl) {
-								let split = resumeUrl.split('/')
-								let signatureUrl = split.pop() ?? ''
-								const regex = /([^?]+)(?:\?[^=]+=(\w+))?/
-
-								const matches = signatureUrl.match(regex)
-
-								const signature = matches?.[1]
-								if (!signature) {
-									sendUserToast(`Could not parse signature: ${signatureUrl}`, true)
-									return
-								}
-								const approver = matches?.[2] || undefined
-
-								let resumeId = -1
-								let parsedResumeId = split.pop() ?? ''
-								try {
-									resumeId = new Number(parsedResumeId).valueOf()
-								} catch (e) {
-									console.error(`Could not parse resume id: ${parsedResumeId}`)
-								}
-								let jobId = split.pop() ?? ''
-								await JobService.resumeSuspendedJobPost({
-									workspace: workspaceId ?? $workspaceStore ?? '',
-									id: jobId,
-									requestBody: default_payload,
-									resumeId,
-									signature,
-									approver
-								})
-							} else {
-								await JobService.resumeSuspendedFlowAsOwner({
-									workspace: workspaceId ?? $workspaceStore ?? '',
-									id: job?.id ?? '',
-									requestBody: default_payload
-								})
-							}
-						}}
+					<Button color="green" variant="border" on:click={() => continu(true)}
 						>Resume <Tooltip
 							>Since you are an owner of this flow, you can send resume events without necessarily
 							knowing the resume id sent by the approval step</Tooltip
@@ -83,15 +132,9 @@ async function getDefaultArgs() {
 					>
 				</div>
 
-				{#if job.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
+				{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
 					<div class="w-full border rounded-lg p-2">
-						<LightweightSchemaForm
-							bind:args={default_payload}
-							schema={mergeSchema(
-								job.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema ?? {},
-								enum_payload
-							)}
-						/>
+						<LightweightSchemaForm bind:args={default_payload} {defaultValues} {schema} />
 					</div>
 				{/if}
 				<Tooltip

package/package/components/GfmMarkdown.svelte

@@ -0,0 +1,14 @@
+<script>import Markdown from 'svelte-exmarkdown';
+import { gfmPlugin } from 'svelte-exmarkdown/gfm';
+export let md;
+</script>
+
+<div class="!prose-xs pgap">
+	<Markdown {md} plugins={[gfmPlugin()]} />
+</div>
+
+<style global>
+	:global(.pgap) > :global(p) {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}</style>

package/package/components/GfmMarkdown.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        md: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GfmMarkdownProps = typeof __propDef.props;
+export type GfmMarkdownEvents = typeof __propDef.events;
+export type GfmMarkdownSlots = typeof __propDef.slots;
+export default class GfmMarkdown extends SvelteComponent<GfmMarkdownProps, GfmMarkdownEvents, GfmMarkdownSlots> {
+}
+export {};

package/package/components/GroupEditor.svelte

@@ -2,7 +2,7 @@
 import { userStore, workspaceStore } from '../stores';
 import AutoComplete from 'simple-svelte-autocomplete';
 import { createEventDispatcher } from 'svelte';
-import autosize from 'svelte-autosize';
+import autosize from '../autosize';
 import { Button } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
@@ -89,7 +89,6 @@ function getRole(x) {
 			<textarea
 				disabled={!can_write}
 				rows="2"
-				type="text"
 				use:autosize
 				bind:value={group.summary}
 				placeholder="Summary of the group"

package/package/components/HighlightCode.svelte

@@ -50,7 +50,7 @@ $: lang = getLang(language);
 
 <div class="relative overflow-x-auto">
 	<Button
-		wrapperClasses="absolute top-2 right-2"
+		wrapperClasses="absolute top-2 right-2 z-20"
 		on:click={() => copyToClipboard(code)}
 		color="light"
 		size="xs2"

package/package/components/InputTransformForm.svelte

@@ -210,7 +210,7 @@ loadResourceTypes();
 											staticTemplate
 												? `\`${arg?.value?.toString().replaceAll('`', '\\`') ?? ''}\``
 												: arg.value
-												? JSON.stringify(arg?.value, null, 4)
+												? '(' + JSON.stringify(arg?.value, null, 4) + ')'
 												: ''
 										)
 									}
@@ -226,6 +226,19 @@ loadResourceTypes();
 											arg.expr = undefined
 										}
 										setPropertyType(arg?.value)
+									} else if (inputCat == 'list' || inputCat == 'object') {
+										if (arg) {
+											try {
+												let newExpr = arg.expr
+												if (newExpr.startsWith('(') && newExpr.endsWith(')')) {
+													newExpr = newExpr.slice(1, -1)
+												}
+												arg.value = JSON.parse(newExpr)
+											} catch (e) {
+												arg.value = undefined
+											}
+											arg.expr = undefined
+										}
 									} else {
 										if (arg) {
 											arg.type = 'static'
@@ -282,7 +295,7 @@ loadResourceTypes();
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="relative {$propPickerConfig?.propName == argName
-				? 'outline outline-offset-0 outline-2 outline-blue-500 rounded-md'
+				? 'outline outline-offset-1 outline-1 outline-blue-500 rounded-md'
 				: ''}"
 			on:keyup={stepInputGen?.onKeyUp}
 		>
@@ -372,6 +385,15 @@ loadResourceTypes();
 				<div class="mb-2" />
 			{:else}
 				Not recognized input type {argName} ({arg.expr}, {propertyType})
+				<div class="flex mt-2">
+					<Button
+						variant="border"
+						size="xs"
+						on:click={() => {
+							arg.expr = ''
+						}}>Set expr to empty string</Button
+					></div
+				>
 			{/if}
 		</div>
 	</div>

package/package/components/InstanceGroupEditor.svelte

@@ -1,6 +1,6 @@
 <script>import { GroupService } from '../gen';
 import { createEventDispatcher } from 'svelte';
-import autosize from 'svelte-autosize';
+import autosize from '../autosize';
 import { Button } from './common';
 import Skeleton from './common/skeleton/Skeleton.svelte';
 import TableCustom from './TableCustom.svelte';
@@ -32,7 +32,6 @@ async function loadInstanceGroup() {
 		<div class="flex flex-col gap-1">
 			<textarea
 				rows="2"
-				type="text"
 				use:autosize
 				bind:value={instance_group.summary}
 				placeholder="Summary of the group"