windmill-components 1.448.50 → 1.472.2

package/package/components/schema/AddPropertyFormV2.svelte

@@ -3,27 +3,27 @@ import { Button } from '../common';
 import { CornerDownLeft } from 'lucide-svelte';
 import Popover from '../meltComponents/Popover.svelte';
 let name = '';
+export let customName = undefined;
 const dispatch = createEventDispatcher();
 function addField() {
     dispatch('add', { name });
     name = '';
 }
-let open = false;
 </script>
 
-<Popover closeButton={false} bind:open>
+<Popover closeButton={false} class="w-full">
 	<svelte:fragment slot="trigger">
 		<slot name="trigger" />
 	</svelte:fragment>
-	<svelte:fragment slot="content">
+	<svelte:fragment slot="content" let:close>
 		<div class="flex flex-row gap-2 p-2 rounded-md">
 			<input
 				bind:value={name}
-				placeholder="Field name"
+				placeholder={`${customName ?? 'Field'} name`}
 				on:keydown={(event) => {
 					if (event.key === 'Enter') {
 						addField()
-						open = false
+						close()
 					}
 				}}
 			/>
@@ -34,12 +34,12 @@ let open = false;
 				id="flow-editor-add-property"
 				on:click={() => {
 					addField()
-					open = false
+					close()
 				}}
 				disabled={!name}
 				shortCut={{ Icon: CornerDownLeft, withoutModifier: true }}
 			>
-				Add field
+				Add {customName ? customName.toLowerCase() : 'field'}
 			</Button>
 		</div>
 	</svelte:fragment>

package/package/components/schema/AddPropertyFormV2.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        customName?: string | undefined;
+    };
     events: {
         add: CustomEvent<any>;
     } & {

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -166,7 +166,6 @@ let error = undefined;
 				on:delete={(e) => {
 					addProperty?.handleDeleteArgument([e.detail])
 				}}
-				lightweightMode
 				dndType="drawer"
 				editTab="inputEditor"
 			>

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -11,7 +11,6 @@ export let schema;
 export let uiOnly = false;
 export let noPreview = false;
 export let fullHeight = true;
-export let lightweightMode = false;
 export let formatExtension = undefined;
 let resourceIsTextFile = false;
 let addProperty = undefined;
@@ -95,6 +94,7 @@ let autocompleteExtension = true;
 			</AddPropertyV2>
 		{/if}
 		<EditableSchemaForm
+			onlyMaskPassword
 			bind:this={editableSchemaForm}
 			bind:schema
 			on:change={() => dispatch('change', schema)}
@@ -107,7 +107,6 @@ let autocompleteExtension = true;
 			}}
 			{uiOnly}
 			{noPreview}
-			{lightweightMode}
 			editTab="inputEditor"
 		>
 			<svelte:fragment slot="addProperty">

package/package/components/schema/EditableSchemaWrapper.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         uiOnly?: boolean | undefined;
         noPreview?: boolean | undefined;
         fullHeight?: boolean | undefined;
-        lightweightMode?: boolean | undefined;
         formatExtension?: string | undefined;
     };
     events: {

package/package/components/schema/FlowPropertyEditor.svelte

@@ -7,13 +7,12 @@ import ArgInput from '../ArgInput.svelte';
 import ObjectTypeNarrowing from '../ObjectTypeNarrowing.svelte';
 import Tabs from '../common/tabs/Tabs.svelte';
 import { Tab, TabContent } from '../common';
-import LightweightArgInput from '../LightweightArgInput.svelte';
 import EditableSchemaDrawer from './EditableSchemaDrawer.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import Button from '../common/button/Button.svelte';
 import { Pen, Plus, Trash2 } from 'lucide-svelte';
-import Popup from '../common/popup/Popup.svelte';
+import Popover from '../meltComponents/Popover.svelte';
 import { deepEqual } from 'fast-equals';
 export let format = undefined;
 export let contentEncoding = undefined;
@@ -36,7 +35,6 @@ export let properties = undefined;
 export let order = undefined;
 export let requiredProperty = undefined;
 export let displayWebhookWarning = true;
-export let lightweightMode = false;
 function getOneOfWithoutLabel(oneOf) {
     return oneOf.map((v) => ({
         ...v,
@@ -148,30 +146,31 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 
 <div class="flex flex-col gap-2">
 	{#if type === 'object' && schema.oneOf && schema.oneOf.length >= 2}
-		<div class="flex flex-row gap-2 items-center justify-start">
-			<ToggleButtonGroup bind:selected={oneOfSelected} class="w-auto">
+		<div class="flex flex-row gap-1 items-center justify-start">
+			<ToggleButtonGroup
+				bind:selected={oneOfSelected}
+				class="h-auto w-auto"
+				tabListClass="flex-wrap"
+				let:item
+			>
 				{#each schema.oneOf as obj}
-					<ToggleButton value={obj.title} label={obj.title} />
+					<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
 				{/each}
 			</ToggleButtonGroup>
 
-			<Popup
-				floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-				containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-				let:close
-			>
-				<svelte:fragment slot="button">
+			<Popover placement="bottom-end" closeButton>
+				<svelte:fragment slot="trigger">
 					<Button size="xs2" color="light" nonCaptureEvent startIcon={{ icon: Plus }} />
 				</svelte:fragment>
-				<Label label="Label">
-					<div class="flex flex-col gap-2">
+				<svelte:fragment slot="content" let:close>
+					<Label label="Label" class="p-2 flex flex-col gap-2">
 						<input
 							type="text"
 							class="w-full !bg-surface"
 							on:keydown={(event) => {
 								if (event.key === 'Enter') {
 									createVariant(variantName)
-									close(null)
+									close()
 								}
 							}}
 							bind:value={variantName}
@@ -182,25 +181,25 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 							size="xs"
 							on:click={() => {
 								createVariant(variantName)
-								close(null)
+								close()
 							}}
-							disabled={!variantName}
+							disabled={variantName.length === 0}
 						>
 							Add
 						</Button>
-					</div>
-				</Label>
-			</Popup>
+					</Label>
+				</svelte:fragment>
+			</Popover>
 		</div>
 		<div class="flex flex-row gap-2 items-center">
 			<span class="font-semibold text-sm">{oneOfSelected}</span>
 
-			<Popup
+			<Popover
 				floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 				containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-				let:close
+				closeButton
 			>
-				<svelte:fragment slot="button">
+				<svelte:fragment slot="trigger">
 					<Button
 						size="xs2"
 						color="light"
@@ -214,8 +213,8 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 						}}
 					/>
 				</svelte:fragment>
-				<Label label="Label">
-					<div class="flex flex-col gap-2">
+				<svelte:fragment slot="content" let:close>
+					<Label label="Label" class="p-2 flex flex-col gap-2">
 						<input
 							type="text"
 							class="w-full !bg-surface"
@@ -223,7 +222,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 								if (event.key === 'Enter') {
 									if (oneOfSelected) {
 										renameVariant(variantName, oneOfSelected)
-										close(null)
+										close()
 									}
 								}
 							}}
@@ -236,16 +235,16 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 							on:click={() => {
 								if (oneOfSelected) {
 									renameVariant(variantName, oneOfSelected)
-									close(null)
+									close()
 								}
 							}}
-							disabled={!variantName}
+							disabled={variantName.length === 0}
 						>
 							Rename
 						</Button>
-					</div>
-				</Label>
-			</Popup>
+					</Label>
+				</svelte:fragment>
+			</Popover>
 			<Button
 				size="xs2"
 				color="red"
@@ -272,7 +271,7 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 		{/if}
 	{:else if type === 'object' && format !== 'resource-s3_object'}
 		<Tabs
-			selected={initialObjectSelected}
+			bind:selected={initialObjectSelected}
 			on:selected={(e) => {
 				if (e.detail === 'custom-object') {
 					format = ''
@@ -295,42 +294,27 @@ let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ?
 		</Tabs>
 	{/if}
 
-	{#if !(type === 'object' && oneOf && oneOf.length >= 2)}
+	{#if !(type === 'object' && oneOf && oneOf.length >= 2) && !(type == 'object' && initialObjectSelected == 'custom-object')}
 		<Label label="Default">
-			{#if lightweightMode}
-				<LightweightArgInput
-					bind:value={defaultValue}
-					type={password ? 'string' : type}
-					displayHeader={false}
-					{pattern}
-					{customErrorMessage}
-					{itemsType}
-					{contentEncoding}
-					{format}
-					{extra}
-					{disabled}
-				/>
-			{:else}
-				<ArgInput
-					noDefaultOnSelectFirst
-					{itemPicker}
-					resourceTypes={getResourceTypesFromFormat(format)}
-					bind:value={defaultValue}
-					type={password ? 'string' : type}
-					displayHeader={false}
-					{pattern}
-					{customErrorMessage}
-					{itemsType}
-					{contentEncoding}
-					{format}
-					{extra}
-					{disabled}
-					{nullable}
-					{variableEditor}
-					compact
-					noMargin
-				/>
-			{/if}
+			<ArgInput
+				noDefaultOnSelectFirst
+				{itemPicker}
+				resourceTypes={getResourceTypesFromFormat(format)}
+				bind:value={defaultValue}
+				type={password ? 'string' : type}
+				displayHeader={false}
+				{pattern}
+				{customErrorMessage}
+				{itemsType}
+				{contentEncoding}
+				{format}
+				{extra}
+				{disabled}
+				{nullable}
+				{variableEditor}
+				compact
+				noMargin
+			/>
 		</Label>
 	{/if}
 

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -30,7 +30,6 @@ declare const __propDef: {
         order?: string[] | undefined;
         requiredProperty?: string[] | undefined;
         displayWebhookWarning?: boolean | undefined;
-        lightweightMode?: boolean | undefined;
     };
     events: {
         schemaChange: CustomEvent<any>;

package/package/components/schema/InputSelectedBadge.svelte

@@ -0,0 +1,28 @@
+<script>import { classes } from '../common/alert/model';
+import { twMerge } from 'tailwind-merge';
+import Button from '../common/button/Button.svelte';
+import { X } from 'lucide-svelte';
+export let inputSelected = undefined;
+</script>
+
+<div class="min-h-[38px]">
+	<div
+		class="rounded-md flex flex-row gap-2 items-center py-1 px-2 w-fit {classes['info']
+			.bgClass} {inputSelected ? '' : 'hidden'}"
+	>
+		<p class={twMerge(classes['info'].descriptionClass, 'text-xs px-2')}>
+			Using {inputSelected === 'history'
+				? 'historic'
+				: inputSelected === 'captures'
+				? 'captures'
+				: 'saved'} input arguments
+		</p>
+		<Button
+			color="light"
+			size="xs2"
+			startIcon={{ icon: X }}
+			shortCut={{ key: 'esc', withoutModifier: true }}
+			on:click
+		/>
+	</div>
+</div>

package/package/components/schema/InputSelectedBadge.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        inputSelected?: 'history' | 'captures' | 'saved' | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputSelectedBadgeProps = typeof __propDef.props;
+export type InputSelectedBadgeEvents = typeof __propDef.events;
+export type InputSelectedBadgeSlots = typeof __propDef.slots;
+export default class InputSelectedBadge extends SvelteComponent<InputSelectedBadgeProps, InputSelectedBadgeEvents, InputSelectedBadgeSlots> {
+}
+export {};

package/package/components/schema/PropertyEditor.svelte

@@ -135,7 +135,11 @@ function updateSchema() {
 		</Label>
 
 		{#if type == 'array'}
-			<ArrayTypeNarrowing bind:itemsType canEditResourceType={isFlowInput || isAppInput} />
+			<ArrayTypeNarrowing
+				originalType={extra['originalType']}
+				bind:itemsType
+				canEditResourceType={isFlowInput || isAppInput}
+			/>
 		{:else if type == 'string' || ['number', 'integer', 'object'].includes(type ?? '')}
 			<div>
 				<Label label="Field settings">
@@ -164,9 +168,9 @@ function updateSchema() {
 								bind:currencyLocale={extra['currencyLocale']}
 							/>
 						{:else if type == 'object' && oneOf && oneOf.length >= 2 && !isFlowInput && !isAppInput}
-							<ToggleButtonGroup bind:selected={oneOfSelected} class="mb-2">
+							<ToggleButtonGroup bind:selected={oneOfSelected} class="mb-2" let:item>
 								{#each oneOf as obj}
-									<ToggleButton value={obj.title} label={obj.title} />
+									<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
 								{/each}
 							</ToggleButtonGroup>
 							{#if oneOfSelected && oneOfSchemas}

package/package/components/schema/SchemaFormDND.svelte

@@ -7,7 +7,6 @@ export let dndType = undefined;
 export let schema;
 export let args = {};
 export let prettifyHeader = false;
-export let lightweightMode = false;
 export let onlyMaskPassword = false;
 export let disablePortal = false;
 export let disabled = false;
@@ -17,6 +16,8 @@ export let disableDnd = false;
 export let shouldDispatchChanges = false;
 export let diff = {};
 export let nestedClasses = '';
+export let isValid = true;
+export let noVariablePicker = false;
 const dispatch = createEventDispatcher();
 const flipDurationMs = 200;
 let items = computeItems();
@@ -63,7 +64,6 @@ function handleFinalize(e) {
 	on:acceptChange
 	on:rejectChange
 	on:nestedChange
-	{lightweightMode}
 	bind:args
 	{prettifyHeader}
 	{onlyMaskPassword}
@@ -82,6 +82,8 @@ function handleFinalize(e) {
 	{diff}
 	{nestedParent}
 	{shouldDispatchChanges}
+	bind:isValid
+	{noVariablePicker}
 >
 	<svelte:fragment slot="actions">
 		{#if !disableDnd}

package/package/components/schema/SchemaFormDND.svelte.d.ts

@@ -7,7 +7,6 @@ declare const __propDef: {
         schema: Schema;
         args?: Record<string, any> | undefined;
         prettifyHeader?: boolean | undefined;
-        lightweightMode?: boolean | undefined;
         onlyMaskPassword?: boolean | undefined;
         disablePortal?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -20,6 +19,8 @@ declare const __propDef: {
         shouldDispatchChanges?: boolean | undefined;
         diff?: Record<string, SchemaDiff> | undefined;
         nestedClasses?: string | undefined;
+        isValid?: boolean | undefined;
+        noVariablePicker?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/package/components/schema/SchemaPickerRow.svelte

@@ -53,7 +53,7 @@ function formatDateShort(dateString) {
 
 <Cell
 	wrap
-	class="text-2xs font-normal text-left p-2 rounded-md overflow-auto text-ellipsis scrollbar-none"
+	class="text-2xs font-normal text-left py-2 overflow-auto text-ellipsis scrollbar-none"
 	title={formatDate(date)}
 >
 	{formatDateShort(date)}
@@ -65,7 +65,7 @@ function formatDateShort(dateString) {
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class={twMerge(
-				'text-xs border w-full font-normal text-left p-1 rounded-md whitespace-nowrap overflow-hidden text-ellipsis',
+				'text-xs border w-full font-normal text-tertiary text-left p-1 rounded-md whitespace-nowrap overflow-hidden text-ellipsis',
 				hovering && 'border-surface'
 			)}
 			on:click={() => {
@@ -77,7 +77,15 @@ function formatDateShort(dateString) {
 			{JSON.stringify(payloadData)}
 		</div>
 		<svelte:fragment slot="overlay">
-			<ObjectViewer json={payloadData} />
+			{#if payloadData === 'WINDMILL_TOO_BIG'}
+				<div class="text-center text-tertiary text-xs">
+					Payload too big to preview but can still be loaded
+				</div>
+			{:else}
+				<div class="max-w-60 overflow-auto">
+					<ObjectViewer json={payloadData} />
+				</div>
+			{/if}
 		</svelte:fragment>
 	</CustomPopover>
 

package/package/components/schema/SchemaPickerRow.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        payloadData: Record<string, any>;
+        payloadData: Record<string, any> | string;
         date: string | undefined;
         selected?: boolean | undefined;
         hovering?: boolean | undefined;

package/package/components/scriptEditor/LogPanel.svelte

@@ -27,6 +27,7 @@ export let diffEditor = undefined;
 export let args = undefined;
 export let workspace = undefined;
 export let showCaptures = false;
+export let customUi = undefined;
 let selectedTab = 'logs';
 let drawerOpen = false;
 let drawerContent = undefined;
@@ -53,6 +54,7 @@ let forceJson = false;
 				workspaceId={previewJob?.workspace_id}
 				jobId={previewJob?.id}
 				result={drawerContent.content}
+				customUi={customUi?.displayResult}
 			/>
 		{:else if drawerContent?.mode === 'plain'}
 			<pre
@@ -68,8 +70,10 @@ let forceJson = false;
 <div class="h-full flex flex-col">
 	<Tabs bind:selected={selectedTab} class="pt-1" wrapperClass="flex-none">
 		<Tab value="logs" size="xs">Logs & Result</Tab>
-		<Tab value="history" size="xs">History</Tab>
-		{#if showCaptures}
+		{#if customUi?.disableHistory !== true}
+			<Tab value="history" size="xs">History</Tab>
+		{/if}
+		{#if showCaptures && customUi?.disableTriggerCaptures !== true}
 			<Tab value="captures" size="xs">Trigger captures</Tab>
 		{/if}
 
@@ -94,6 +98,7 @@ let forceJson = false;
 									content={previewJob?.logs}
 									isLoading={previewJob?.['running'] == false && previewIsLoading}
 									tag={previewJob?.tag}
+									download={customUi?.disableDownload !== true}
 								/>
 							</Pane>
 							<Pane>
@@ -106,6 +111,7 @@ let forceJson = false;
 												workspaceId={previewJob?.workspace_id}
 												jobId={previewJob?.id}
 												result={previewJob.result}
+												customUi={customUi?.displayResult}
 											>
 												<svelte:fragment slot="copilot-fix">
 													{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}

package/package/components/scriptEditor/LogPanel.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type CompletedJob, type Job, type Preview } from '../../gen';
 import type Editor from '../Editor.svelte';
 import type DiffEditor from '../DiffEditor.svelte';
+import type { PreviewPanelUi } from '../custom_ui';
 declare const __propDef: {
     props: {
         lang: Preview['language'] | undefined;
@@ -13,6 +14,7 @@ declare const __propDef: {
         args?: Record<string, any> | undefined;
         workspace?: string | undefined;
         showCaptures?: boolean | undefined;
+        customUi?: PreviewPanelUi | undefined;
         setFocusToLogs?: (() => void) | undefined;
     };
     events: {

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -26,18 +26,28 @@ async function validateName(id) {
     }
     checking = false;
 }
+let loading = false;
 async function renameWorkspace() {
-    open = false;
-    await WorkspaceService.changeWorkspaceId({
-        workspace: $workspaceStore,
-        requestBody: {
-            new_name: newName,
-            new_id: newId
-        }
-    });
-    sendUserToast(`Renamed workspace to ${newName}. Reloading...`);
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-    window.location.href = '/workspace_settings?tab=general&workspace=' + newId;
+    try {
+        loading = true;
+        await WorkspaceService.changeWorkspaceId({
+            workspace: $workspaceStore,
+            requestBody: {
+                new_name: newName,
+                new_id: newId
+            }
+        });
+        open = false;
+        sendUserToast(`Renamed workspace to ${newName}. Reloading...`);
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        window.location.href = '/workspace_settings?tab=general&workspace=' + newId;
+    }
+    catch (err) {
+        sendUserToast(`Error renaming workspace: ${err}`, true);
+    }
+    finally {
+        loading = false;
+    }
 }
 export let open = false;
 </script>
@@ -67,7 +77,8 @@ export let open = false;
 <Modal bind:open title="Change workspace ID">
 	<div class="flex flex-col gap-4">
 		<Alert type="warning" title="Warning">
-			You will have to update your webhook calls and your CLI sync configuration.
+			Renaming the workspace may take a few minutes to complete. Once finished, please update your
+			webhook calls and adjust your CLI sync configuration accordingly.
 		</Alert>
 		<p class="text-secondary text-sm"
 			>Current ID <br /> <span class="font-bold">{$workspaceStore ?? ''}</span></p
@@ -89,6 +100,7 @@ export let open = false;
 		<Button
 			size="sm"
 			disabled={checking || errorId.length > 0 || !newName || !newId}
+			{loading}
 			on:click={() => {
 				renameWorkspace()
 			}}

package/package/components/settings/PremiumInfo.svelte

@@ -237,10 +237,10 @@ $: estimatedSeats && updateExecs();
 								/>
 							{/if}
 						</div>
-						<p class="italic text-xs"
-							>An email notification will be sent to {premiumInfo.owner} if the specified threshold amount
-							is reached during a given month.</p
-						>
+						<p class="italic text-xs">
+							An email notification will be sent to {premiumInfo.owner} if the specified threshold amount
+							is exceeded during a given month.
+						</p>
 					</div>
 				{/if}
 				<div class="w-full">