windmill-components 1.58.1 → 1.60.0

package/components/AddUser.svelte

@@ -0,0 +1,66 @@
+<script>import { sendUserToast } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { workspaceStore } from '../stores';
+import { WorkspaceService } from '../gen';
+import { Button, ToggleButton, ToggleButtonGroup } from './common';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
+let email;
+let username;
+function handleKeyUp(event) {
+    const key = event.key;
+    if (key === 'Enter') {
+        event.preventDefault();
+        addUser();
+    }
+}
+async function addUser() {
+    await WorkspaceService.addUser({
+        workspace: $workspaceStore,
+        requestBody: {
+            email,
+            username,
+            is_admin: selected == 'admin',
+            operator: selected == 'operator'
+        }
+    });
+    sendUserToast(`Added ${email}`);
+    dispatch('new');
+}
+let selected = 'author';
+</script>
+
+<div class="flex flex-row">
+	<input type="email" on:keyup={handleKeyUp} placeholder="email" bind:value={email} class="mr-4" />
+	<input
+		type="text"
+		on:keyup={handleKeyUp}
+		placeholder="username"
+		bind:value={username}
+		class="mr-4"
+	/>
+	<ToggleButtonGroup bind:selected>
+		<ToggleButton position="left" value="operator" size="sm"
+			>Operator <Tooltip
+				>An operator can only execute and view scripts/flows/apps from your workspace, and only
+				those that he has visibility on</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="center" value="author" size="sm"
+			>Author <Tooltip
+				>An Author can execute and view scripts/flows/apps, but he can also create new ones</Tooltip
+			></ToggleButton
+		>
+		<ToggleButton position="right" value="admin" size="sm">Admin</ToggleButton>
+	</ToggleButtonGroup>
+	<Button
+		variant="contained"
+		color="blue"
+		size="sm"
+		btnClasses="!ml-8"
+		on:click={addUser}
+		disabled={email === undefined}
+	>
+		Add
+	</Button>
+</div>

package/components/AddUser.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        new: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddUserProps = typeof __propDef.props;
+export type AddUserEvents = typeof __propDef.events;
+export type AddUserSlots = typeof __propDef.slots;
+export default class AddUser extends SvelteComponentTyped<AddUserProps, AddUserEvents, AddUserSlots> {
+}
+export {};

package/components/AppConnect.svelte

@@ -1,30 +1,30 @@
 <script context="module">"use strict";
 const apiTokenApps = {
     airtable: {
-        img: 'airtable_connect.png',
+        img: '/airtable_connect.png',
         instructions: ['Click on the top-right avatar', 'Click on Account', 'Find "Api"']
     },
     discord_webhook: {
-        img: 'discord_webhook.png',
+        img: '/discord_webhook.png',
         instructions: ['Click on Server Settings', 'Click on Integration', 'Find "Webhooks"'],
         key: 'webhook_url'
     },
     toggl: {
-        img: 'toggl_connect.png',
+        img: '/toggl_connect.png',
         instructions: [
             'Go to <a href="https://track.toggl.com/profile" target="_blank" rel=”noopener noreferrer”>https://track.toggl.com/profile</a>',
             'Find "API Token"'
         ]
     },
     mailchimp: {
-        img: 'mailchimp_connect.png',
+        img: '/mailchimp_connect.png',
         instructions: [
             'Go to <a href="https://admin.mailchimp.com/account/api" target="_blank" rel=”noopener noreferrer”>https://admin.mailchimp.com/account/api</a>',
             'Find "Your API Keys"'
         ]
     },
     sendgrid: {
-        img: 'sendgrid_connect.png',
+        img: '/sendgrid_connect.png',
         instructions: [
             'Go to <a href="https://app.sendgrid.com/settings/api_keys" target="_blank" rel=”noopener noreferrer”>https://app.sendgrid.com/settings/api_keys</a>',
             'Create an API key',
@@ -134,6 +134,7 @@ async function next() {
         }
         else {
             window.open(url.toString(), '_blank');
+            drawer.closeDrawer();
         }
     }
     else {

package/components/ArgInput.svelte

@@ -119,20 +119,24 @@ function testRegex(pattern, value) {
 $: {
     if (value == undefined || value == null) {
         value = defaultValue;
-        if (defaultValue === undefined || defaultValue === null)
+        if (defaultValue === undefined || defaultValue === null) {
             if (inputCat === 'string') {
                 value = '';
             }
             else if (inputCat == 'enum') {
                 value = enum_?.[0];
             }
+            else if (inputCat == 'boolean') {
+                value = false;
+            }
+        }
     }
 }
 export let inputCat = 'string';
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 </script>
 
-<div class="flex flex-col w-full">
+<div class="flex flex-col w-full min-w-[250px]">
 	<div>
 		{#if displayHeader}
 			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
@@ -203,7 +207,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{:else}
 					<input
 						{autofocus}
-						on:focus
+						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
+							dispatch('focus')
+						}}
 						{disabled}
 						type="number"
 						class={valid
@@ -218,6 +225,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+						window.dispatchEvent(new Event('pointerup'))
+					}}
 					{disabled}
 					class={valid
 						? ''
@@ -295,7 +306,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				{:else}
 					<textarea
 						bind:this={el}
-						on:focus
+						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
+							dispatch('focus')
+						}}
 						{autofocus}
 						{disabled}
 						use:autosize
@@ -311,7 +325,15 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					/>
 				{/if}
 			{:else if inputCat == 'enum'}
-				<select {disabled} class="px-6" bind:value>
+				<select
+					on:focus={(e) => {
+						window.dispatchEvent(new Event('pointerup'))
+						dispatch('focus')
+					}}
+					{disabled}
+					class="px-6"
+					bind:value
+				>
 					{#each enum_ ?? [] as e}
 						<option>{e}</option>
 					{/each}
@@ -321,7 +343,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'sql' || inputCat == 'yaml'}
 				<div class="border my-1 mb-4 w-full border-gray-400">
 					<SimpleEditor
-						on:focus={() => dispatch('focus')}
+						on:focus={(e) => {
+							window.dispatchEvent(new Event('pointerup'))
+							dispatch('focus')
+						}}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}
 						lang={inputCat}
@@ -357,7 +382,10 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								{autofocus}
 								rows="1"
 								bind:this={el}
-								on:focus={() => dispatch('focus')}
+								on:focus={(e) => {
+									window.dispatchEvent(new Event('pointerup'))
+									dispatch('focus')
+								}}
 								on:blur={() => dispatch('blur')}
 								use:autosize
 								type="text"
@@ -373,16 +401,13 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							/>
 							{#if itemPicker}
 								<div class="ml-1 relative">
-									<Button
-										{disabled}
-										variant="border"
-										color="blue"
-										size="sm"
-										btnClasses="min-w-min min-h-[34px] items-center leading-4 py-0"
+									<!-- svelte-ignore a11y-click-events-have-key-events -->
+									<div
+										class="min-w-min min-h-[34px] items-center leading-4 px-3 text-blue-500 cursor-pointer border border-blue-500 rounded center-center"
 										on:click={() => {
 											pickForField = label
 											itemPicker?.openDrawer?.()
-										}}><Icon data={faDollarSign} /></Button
+										}}><Icon data={faDollarSign} /></div
 									>
 								</div>
 							{/if}

package/components/Dropdown.svelte

@@ -2,6 +2,7 @@
 import Icon from 'svelte-awesome';
 import { MoreHorizontal } from 'lucide-svelte';
 import { Button, Menu } from './common';
+import { goto } from '$app/navigation';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
@@ -52,7 +53,7 @@ const dispatch = createEventDispatcher();
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click|stopPropagation
+					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
 					class="block w-full px-4 font-semibold text-left  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"

package/components/EditorBar.svelte

@@ -3,7 +3,7 @@
 
 <script>import { ResourceService, VariableService } from '../gen';
 import { getScriptByPath, sendUserToast } from '../utils';
-import { faBroom, faCube, faDollarSign, faEye, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { faBroom, faCube, faDollarSign, faEye, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -142,11 +142,12 @@ async function onScriptPick(e) {
 			variant="border"
 			color="blue"
 			size="sm"
+			startIcon={{ icon: faPlus }}
 			on:click={() => {
 				variableEditor.initNew()
 			}}
 		>
-			Create a new variable
+			New variable
 		</Button>
 	</div>
 </ItemPicker>

package/components/FlowStatusViewer.svelte

@@ -6,7 +6,7 @@ import Icon from 'svelte-awesome';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
-import { Button, Tab } from './common';
+import { Badge, Button, Tab } from './common';
 import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { FlowGraph } from './graph';
@@ -15,6 +15,7 @@ import { displayDate, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
 import Tooltip from './Tooltip.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import { Loader2 } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let flowState = undefined;
@@ -144,9 +145,9 @@ let payload = '"a test payload in json"';
 					<div class="w-full h-full">
 						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
 					</div>
-				{:else if job.flow_status?.modules?.[job?.flow_status?.step].type === FlowStatusModule.type.WAITING_FOR_EVENTS}
+				{:else if job.flow_status?.modules?.[job?.flow_status?.step]?.type === FlowStatusModule.type.WAITING_FOR_EVENTS}
 					<div class="w-full h-full mt-2 text-sm text-gray-600">
-						<p>Waiting for approval from the previous step</p>
+						<p>Waiting to be resumed</p>
 						<div>
 							{#if is_owner}
 								<div class="flex flex-row gap-2 mt-2">
@@ -175,7 +176,8 @@ let payload = '"a test payload in json"';
 									>
 								</div>
 							{:else}
-								You cannot resume the job without the resume id since you are not an owner of {job.script_path}
+								You cannot resume the flow yourself without receiving the resume secret since you
+								are not an owner of {job.script_path}
 							{/if}
 						</div>
 					</div>
@@ -183,6 +185,24 @@ let payload = '"a test payload in json"';
 					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
 						<pre class="w-full">{job.logs}</pre>
 					</div>
+				{:else if innerModules?.length > 0}
+					<div class="flex flex-col gap-1">
+						{#each innerModules as mod, i (mod.id)}
+							{#if mod.type == FlowStatusModule.type.IN_PROGRESS}
+								<div
+									><span class="inline-flex gap-1"
+										><Badge color="indigo">{mod.id}</Badge>
+										{#if job.raw_flow?.modules[i]?.summary}
+											<span class="font-medium text-gray-900">
+												{job.raw_flow?.modules[i]?.summary ?? ''}
+											</span>
+										{/if}
+										<Loader2 class="animate-spin" /></span
+									></div
+								>
+							{/if}
+						{/each}
+					</div>
 				{/if}
 			</div>
 		{/if}

package/components/IconedResourceType.svelte

@@ -5,16 +5,16 @@ export let after = false;
 export let height = '24px';
 export let width = '24px';
 export let center = false;
-$: name_prefix = name.split('_')[0];
+$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
 </script>
 
 <div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
 	{#if !silent && !after}
 		{name}
 	{/if}
-	{#if APP_TO_ICON_COMPONENT[name_prefix]}
+	{#if iconComponent}
 		<span class="text-gray-700 grayscale">
-			<svelte:component this={APP_TO_ICON_COMPONENT[name_prefix]} {height} {width} />
+			<svelte:component this={iconComponent} {height} {width} />
 		</span>
 	{:else}
 		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full" />

package/components/InviteUser.svelte

@@ -6,7 +6,6 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import Tooltip from './Tooltip.svelte';
 const dispatch = createEventDispatcher();
 let email;
-let is_admin = false;
 function handleKeyUp(event) {
     const key = event.key;
     if (key === 'Enter') {

package/components/ItemPicker.svelte

@@ -42,12 +42,12 @@ let drawer;
 />
 
 <Drawer bind:this={drawer} size="600px">
-	<DrawerContent title="Search a {itemName}" on:close={drawer.closeDrawer}>
-		<div class="w-full">
+	<DrawerContent overflow_y={false} title="Search {itemName}s" on:close={drawer.closeDrawer}>
+		<div class="w-full h-full flex flex-col">
 			<div class="w-12/12 pb-4">
 				<input
 					type="text"
-					placeholder="Search {itemName}"
+					placeholder="Search {itemName}s"
 					bind:value={filter}
 					class="search-item"
 				/>
@@ -61,10 +61,10 @@ let drawer;
 					{@html noItemMessage}
 				</div>
 			{:else if filteredItems?.length}
-				<div class="border rounded-md divide-y divide-gray-200 w-full">
+				<div class="border rounded-md divide-y divide-gray-200 w-full overflow-auto pb-12 grow">
 					{#each filteredItems as obj}
 						<div
-							class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 first-of-type:!border-t-0 
+							class="hover:bg-gray-50 w-full flex items-center p-4 gap-4 first-of-type:!border-t-0 
 						first-of-type:rounded-t-md last-of-type:rounded-b-md"
 						>
 							<div class="inline-flex items-center grow">

package/components/ModulePreview.svelte

@@ -35,7 +35,6 @@ export async function runTest(args) {
     else {
         throw Error('not testable module type');
     }
-    sendUserToast(`started test ${truncateRev(jobId ?? '', 10)}`);
 }
 function jobDone() {
     if (testJob && !testJob.canceled && testJob.type == 'CompletedJob' && `result` in testJob) {
@@ -61,6 +60,7 @@ function jobDone() {
 		{/if}
 
 		<RunForm
+			loading={testIsLoading}
 			runnable={{ summary: mod.summary ?? '', schema, description: '' }}
 			runAction={(_, args) => runTest(args)}
 			schedulable={false}

package/components/MoveDrawer.svelte

@@ -35,7 +35,8 @@ async function updatePath() {
                 path: path ?? '',
                 summary: summary ?? '',
                 description: flow.description,
-                value: flow.value
+                value: flow.value,
+                schema: flow.schema
             }
         });
     }
@@ -85,7 +86,6 @@ async function updatePath() {
 			type="text"
 			bind:value={summary}
 			placeholder="A short summary displayed when it is listed"
-			rows="1"
 			disabled={!own}
 		/>
 

package/components/Path.svelte

@@ -60,12 +60,14 @@ export async function reset() {
 }
 async function loadFolders() {
     let initialFolders = [];
+    let initialFolder = '';
     if (initialPath?.split('/')?.[0] == 'f') {
-        initialFolders.push(initialPath?.split('/')?.[1]);
+        initialFolder = initialPath?.split('/')?.[1];
+        initialFolders.push(initialFolder);
     }
-    folders = initialFolders.concat(await FolderService.listFolderNames({
+    folders = initialFolders.concat((await FolderService.listFolderNames({
         workspace: $workspaceStore
-    }));
+    })).filter((x) => x != initialFolder));
 }
 async function loadGroups() {
     let initialGroups = [];

package/components/Popover.svelte

@@ -4,6 +4,7 @@ const ALIGN = ['start', 'end'];
 export let placement = 'auto';
 export let notClickable = false;
 export let popupClass = '';
+export let disapperTimoout = 100;
 const [popperRef, popperContent] = createPopperActions({ placement });
 const betterPreventOverflow = (options) => ({
     name: 'preventOverflow',
@@ -32,20 +33,30 @@ function open() {
     showTooltip = true;
 }
 function close() {
-    timeout = setTimeout(() => (showTooltip = false), 100);
+    timeout = setTimeout(() => (showTooltip = false), disapperTimoout);
 }
 </script>
 
-<button
-	class:cursor-default={notClickable}
-	use:popperRef
-	on:mouseenter={open}
-	on:mouseleave={close}
-	on:click
-	class={$$props.class}
->
-	<slot />
-</button>
+{#if notClickable}
+	<span
+		use:popperRef
+		on:mouseenter={open}
+		on:mouseleave={close}
+		class={$$props.class}
+	>
+		<slot />
+	</span>
+{:else}
+	<button
+		use:popperRef
+		on:mouseenter={open}
+		on:mouseleave={close}
+		on:click
+		class={$$props.class}
+	>
+		<slot />
+	</button>
+{/if}
 {#if showTooltip}
 	<div
 		use:popperContent={extraOpts}

package/components/Popover.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         placement?: "left" | "right" | "auto" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "auto-start" | "auto-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
         notClickable?: boolean | undefined;
         popupClass?: string | undefined;
+        disapperTimoout?: number | undefined;
     };
     events: {
         click: MouseEvent;

package/components/ResourcePicker.svelte

@@ -7,6 +7,7 @@ import { Button } from './common';
 import Select from 'svelte-select';
 import AppConnect from './AppConnect.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
+import { truncate } from '../utils';
 const dispatch = createEventDispatcher();
 let resources = [];
 export let initialValue = undefined;
@@ -25,7 +26,7 @@ $: {
 $: dispatch('change', value);
 $: collection = resources.map((x) => ({
     value: x.path,
-    label: `${x.path}${x.description ? ' | ' + x.description : ''}`
+    label: x.path
 }));
 let appConnect;
 let resourceEditor;
@@ -44,12 +45,13 @@ let resourceEditor;
 
 <div class="flex flex-row gap-x-1 w-full">
 	<Select
+		listAutoWidth={false}
 		--height="34px"
 		value={collection.find((x) => x.value == value)}
 		bind:justValue={value}
 		items={collection}
 		class="text-clip grow min-w-0"
-		placeholder="Pick a {resourceType} resource"
+		placeholder="{resourceType} resource"
 	/>
 	{#if value && value != ''}
 		<Button variant="border" size="xs" on:click={() => resourceEditor?.initEdit?.(value ?? '')}>
@@ -68,3 +70,8 @@ let resourceEditor;
 		}}><Icon scale={0.8} data={faRotateRight} /></Button
 	>
 </div>
+
+<style>
+	:global(.svelte-select-list) {
+		font-size: small !important;
+	}</style>

package/components/RunForm.svelte

@@ -15,6 +15,7 @@ export let schedulable = true;
 export let detailed = true;
 export let autofocus = false;
 export let topButton = false;
+export let loading = false;
 export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
 export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
@@ -133,17 +134,18 @@ let invisible_to_owner;
 				<div class="flex items-center gap-1">
 					<Toggle
 						options={{
-							right: `make run invisible to ${runnable?.path?.split('/').slice(0, 2).join('/')}`
+							right: `run only visible to you`
 						}}
 						bind:checked={invisible_to_owner}
 					/>
 					<Tooltip
-						>By default, runs are visible to the owner of the script or flow being triggered</Tooltip
+						>By default, runs are visible to the owner(s) of the script or flow being triggered</Tooltip
 					>
 				</div>
 			{/if}
 			<div class="flex-row-reverse flex grow">
 				<Button
+					{loading}
 					btnClasses="!px-6 !py-1"
 					disabled={!isValid}
 					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}

package/components/RunForm.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         detailed?: boolean | undefined;
         autofocus?: boolean | undefined;
         topButton?: boolean | undefined;
+        loading?: boolean | undefined;
         args?: Record<string, any> | undefined;
         run?: (() => void) | undefined;
         isValid?: boolean | undefined;

package/components/SchemaForm.svelte

@@ -1,6 +1,7 @@
 <script>import { VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { slide } from 'svelte/transition';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
@@ -45,7 +46,7 @@ let itemPicker = undefined;
 let variableEditor = undefined;
 </script>
 
-<div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-4' : ''}">
+<div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
 		{#each Object.keys(schema?.properties ?? {}) as argName, i (argName)}
 			{#if !filter || filter.includes(argName)}
@@ -112,7 +113,7 @@ let variableEditor = undefined;
 			}
 		}}
 		itemName="Variable"
-		extraField="name"
+		extraField="path"
 		loadItems={async () =>
 			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
 				name: x.path,
@@ -121,20 +122,21 @@ let variableEditor = undefined;
 	>
 		<div
 			slot="submission"
-			class="flex flex-row-reverse w-full p-5 bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
+			class="flex flex-row-reverse w-full bg-white border-t border-gray-200 rounded-bl-lg rounded-br-lg"
 		>
 			<Button
 				variant="border"
 				color="blue"
 				size="sm"
+				startIcon={{ icon: faPlus }}
 				on:click={() => {
 					variableEditor?.initNew?.()
 				}}
 			>
-				Create a new variable
+				New variable
 			</Button>
 		</div>
 	</ItemPicker>
 
-	<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />
+	<VariableEditor bind:this={variableEditor} />
 {/if}

package/components/ScriptBuilder.svelte

@@ -174,7 +174,6 @@ $: kind = script.kind;
 					bind:this={summaryC}
 					bind:value={script.summary}
 					placeholder="A short summary of the script displayed when the script is listed"
-					rows="1"
 				/>
 				<h2 class="border-b pb-1 mt-8 mb-6">Language</h2>
 				<div class="flex flex-row gap-2 flex-wrap">