windmill-components 1.531.1 → 1.537.1

package/package/components/ArgInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { preventDefault, stopPropagation, createBubbler } from 'svelte/legacy';
 const bubble = createBubbler();
-import { setInputCat as computeInputCat, debounce, emptyString, getSchemaFromProperties } from '../utils';
+import { setInputCat as computeInputCat, debounce, emptySchema, emptyString, getSchemaFromProperties } from '../utils';
 import { DollarSign, Plus, X, Check, Loader2, ExternalLink } from 'lucide-svelte';
 import { createEventDispatcher, onDestroy, onMount, tick, untrack } from 'svelte';
 import { fade } from 'svelte/transition';
@@ -28,6 +28,8 @@ import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import S3ArgInput from './common/fileUpload/S3ArgInput.svelte';
 import { base } from '../base';
+import { workspaceStore } from '../stores';
+import { getJsonSchemaFromResource } from './schema/jsonSchemaResource.svelte';
 let { label = '', value = $bindable(), defaultValue = $bindable(undefined), description = $bindable(undefined), format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = $bindable(undefined), valid = $bindable(undefined), enum_ = $bindable(undefined), disabled = false, itemsType = $bindable(undefined), displayHeader = true, properties = $bindable(undefined), nestedRequired = undefined, autofocus = null, compact = false, password = false, pickForField = $bindable(undefined), variableEditor = undefined, itemPicker = undefined, noMargin = false, extra = {}, minW = true, prettifyHeader = false, resourceTypes, disablePortal = false, showSchemaExplorer = false, simpleTooltip = undefined, customErrorMessage = undefined, onlyMaskPassword = false, nullable = false, title = $bindable(undefined), placeholder = $bindable(undefined), order = $bindable(undefined), editor = $bindable(undefined), orderEditable = false, shouldDispatchChanges = false, noDefaultOnSelectFirst = false, helperScript = undefined, otherArgs = {}, lightHeader = false, diffStatus = undefined, hideNested = false, nestedParent = undefined, nestedClasses = '', displayType = true, css = undefined, appPath = undefined, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
 $effect(() => {
     if (description == undefined) {
@@ -488,6 +490,47 @@ onDestroy(() => {
 				{appPath}
 				{computeS3ForceViewerPolicies}
 			/>
+		{:else if inputCat == 'object' && format == 'json-schema'}
+			{#await import('./EditableSchemaForm.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					bind:schema={
+						() =>
+							value && typeof value === 'object' && !Array.isArray(value) ? value : emptySchema(),
+						(v) => {
+							value = v
+						}
+					}
+					isFlowInput
+					editTab="inputEditor"
+					noPreview
+					addPropertyInEditorTab
+				/>
+			{/await}
+		{:else if inputCat == 'object' && format?.startsWith('jsonschema-')}
+			{#await getJsonSchemaFromResource(format.substring('jsonschema-'.length), workspace ?? $workspaceStore ?? '')}
+				<Loader2 class="animate-spin" />
+			{:then schema}
+				{#if !schema || !schema.properties}
+					{#await import('./JsonEditor.svelte')}
+						<Loader2 class="animate-spin" />
+					{:then Module}
+						<Module.default code={JSON.stringify(value, null, 2)} bind:value />
+					{/await}
+				{:else}
+					<div class="py-4 pr-2 pl-6 border rounded-md w-full">
+						<SchemaForm
+							{onlyMaskPassword}
+							{disablePortal}
+							{disabled}
+							{prettifyHeader}
+							{schema}
+							bind:args={value}
+						/>
+					</div>
+				{/if}
+			{/await}
 		{:else if inputCat == 'list' && !isListJson}
 			<div class="w-full flex gap-4">
 				<div class="w-full">
@@ -723,11 +766,21 @@ onDestroy(() => {
 							selected={oneOfSelected}
 							on:selected={({ detail }) => {
 								oneOfSelected = detail
-								const prevValueKeys = Object.keys(
+								const selectedObjProperties =
 									oneOf?.find((o) => o.title == detail)?.properties ?? {}
-								)
+								const newValueKeys = Object.keys(selectedObjProperties)
 								const toKeep = {}
-								for (const key of prevValueKeys) {
+								for (const key of newValueKeys) {
+									// Check if there is a select (enum) in the newly selected oneOf and if the current value is not in the enum, skip it
+									if (
+										!['kind', 'label'].includes(key) &&
+										selectedObjProperties[key]?.enum &&
+										value &&
+										value[key] !== undefined &&
+										!selectedObjProperties[key].enum.includes(value[key])
+									) {
+										continue
+									}
 									toKeep[key] = value[key]
 								}
 								const tagKey = oneOf.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
@@ -768,8 +821,11 @@ onDestroy(() => {
 													}
 												}
 												bind:args={value}
-												dndType={`nested-${title}`}
-												hiddenArgs={['label', 'kind']}
+												hiddenArgs={[
+													oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
+														? 'kind'
+														: 'label'
+												]}
 												on:reorder={(e) => {
 													if (oneOf && oneOf[objIdx]) {
 														const keys = e.detail
@@ -862,20 +918,14 @@ onDestroy(() => {
 							{disablePortal}
 							{disabled}
 							{prettifyHeader}
-							bind:schema={
-								() => ({
-									properties,
-									$schema: '',
-									required: nestedRequired ?? [],
-									type: 'object',
-									order
-								}),
-								(newSchema) => {
-									dispatch('nestedChange')
-								}
-							}
+							schema={{
+								properties,
+								$schema: '',
+								required: nestedRequired ?? [],
+								type: 'object',
+								order
+							}}
 							bind:args={value}
-							dndType={`nested-${title}`}
 							on:reorder={(e) => {
 								const keys = e.detail
 								order = keys

package/package/components/Auth0Setting.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import CollapseLink from './CollapseLink.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import CollapseLink from './CollapseLink.svelte';
 import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -25,8 +26,12 @@ function changeDomain(domain, custom) {
     }
 }
 let enabled = $derived(value != undefined);
-$effect(() => {
-    changeDomain(value?.['domain'], value?.['custom']);
+let lastValues = { domain: undefined, custom: undefined };
+$effect.pre(() => {
+    if (value?.['domain'] != lastValues.domain || value?.['custom'] != lastValues.custom) {
+        lastValues = { domain: value?.['domain'], custom: value?.['custom'] };
+        untrack(() => changeDomain(value?.['domain'], value?.['custom']));
+    }
 });
 </script>
 

package/package/components/Dev.svelte

@@ -27,7 +27,7 @@ import { approximateFindPythonRelativePath, isTypescriptRelativePath, parseTypes
 import Tooltip from './Tooltip.svelte';
 import { workspaceAIClients } from './copilot/lib';
 import { Triggers } from './triggers/triggers.svelte';
-import { TestSteps } from './flows/testSteps.svelte';
+import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
 let flowCopilotContext = {
     shouldUpdatePropertyType: writable({}),
@@ -374,7 +374,7 @@ const previewArgsStore = $state({ val: {} });
 const scriptEditorDrawer = writable(undefined);
 const moving = writable(undefined);
 const history = initHistory(flowStore.val);
-const testSteps = new TestSteps();
+const stepsInputArgs = new StepsInputArgs();
 const selectedIdStore = writable('settings-metadata');
 const triggersCount = writable(undefined);
 const modulesTestStates = new ModulesTestStates((moduleId) => {
@@ -397,7 +397,7 @@ setContext('FlowEditorContext', {
     pathStore: writable(''),
     flowStateStore,
     flowStore,
-    testSteps,
+    stepsInputArgs,
     saveDraft: () => { },
     initialPathStore: writable(''),
     fakeInitialPath: '',
@@ -708,7 +708,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								noEditor
 								on:applyArgs={(ev) => {
 									if (ev.detail.kind === 'preprocessor') {
-										testSteps.setStepArgs('preprocessor', ev.detail.args ?? {})
+										stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 										$selectedIdStore = 'preprocessor'
 									} else {
 										previewArgsStore.val = ev.detail.args ?? {}
@@ -720,6 +720,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								isOwner={flowPreviewContent?.getIsOwner()}
 								{suspendStatus}
 								onOpenDetails={flowPreviewButtons?.openPreview}
+								previewOpen={flowPreviewButtons?.getPreviewOpen()}
 							/>
 						{/key}
 					</Pane>

package/package/components/DiffDrawer.svelte

@@ -155,7 +155,7 @@ export function setDiff(diff) {
 										<Module.default
 											open={true}
 											automaticLayout
-											class="h-full"
+											className="h-full"
 											defaultLang={lang}
 											defaultModifiedLang={data.current.lang}
 											defaultOriginal={content}
@@ -170,7 +170,7 @@ export function setDiff(diff) {
 										<Module.default
 											open={true}
 											automaticLayout
-											class="h-full"
+											className="h-full"
 											defaultLang="yaml"
 											defaultOriginal={metadata}
 											defaultModified={data.current.metadata}

package/package/components/DiffEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
-import { createEventDispatcher, onMount } from 'svelte';
+import { onMount } from 'svelte';
 import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
@@ -7,20 +7,12 @@ import { editor as meditor } from 'monaco-editor';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import Button from './common/button/Button.svelte';
+import { twMerge } from 'tailwind-merge';
 const SIDE_BY_SIDE_MIN_WIDTH = 700;
-export let automaticLayout = true;
-export let fixedOverflowWidgets = true;
-export let defaultLang = undefined;
-export let defaultModifiedLang = undefined;
-export let defaultOriginal = undefined;
-export let defaultModified = undefined;
-export let readOnly = false;
-export let showButtons = false;
-export let showHistoryButton = true;
-let diffEditor;
-let diffDivEl = null;
-let editorWidth = SIDE_BY_SIDE_MIN_WIDTH;
-export let open = false;
+let { open = false, className = '', automaticLayout = true, fixedOverflowWidgets = true, defaultLang, defaultModifiedLang, defaultOriginal = undefined, defaultModified = undefined, readOnly = false, buttons = [], modifiedModel } = $props();
+let diffEditor = $state(undefined);
+let diffDivEl = $state(null);
+let editorWidth = $state(SIDE_BY_SIDE_MIN_WIDTH);
 async function loadDiffEditor() {
     await initializeVscode();
     if (!diffDivEl) {
@@ -40,23 +32,17 @@ async function loadDiffEditor() {
         lineNumbersMinChars: 2,
         scrollbar: { alwaysConsumeMouseWheel: false }
     });
-    if (defaultOriginal !== undefined &&
-        defaultModified !== undefined &&
-        defaultLang !== undefined) {
+    if (defaultLang !== undefined) {
         setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang);
     }
 }
 export function setupModel(lang, original, modified, modifiedLang) {
+    const o = meditor.createModel(original ?? '', lang);
+    const m = modifiedModel ?? meditor.createModel(modified ?? '', modifiedLang ?? lang);
     diffEditor?.setModel({
-        original: meditor.createModel('', lang),
-        modified: meditor.createModel('', modifiedLang ?? lang)
+        original: o,
+        modified: m
     });
-    if (original) {
-        setOriginal(original);
-    }
-    if (modified) {
-        setModified(modified);
-    }
 }
 export function setOriginal(code) {
     diffEditor?.getModel()?.original?.setValue(code);
@@ -69,6 +55,15 @@ export function setModified(code) {
     diffEditor?.getModel()?.modified?.setValue(code);
     defaultModified = code;
 }
+export function setModifiedModel(model) {
+    const curr = diffEditor?.getModel();
+    if (!curr)
+        return;
+    diffEditor?.setModel({
+        original: curr.original,
+        modified: model
+    });
+}
 export function getModified() {
     return diffEditor?.getModel()?.modified.getValue() ?? '';
 }
@@ -81,8 +76,14 @@ export function hide() {
 function onWidthChange(editorWidth) {
     diffEditor?.updateOptions({ renderSideBySide: editorWidth >= SIDE_BY_SIDE_MIN_WIDTH });
 }
-$: onWidthChange(editorWidth);
-$: open && diffDivEl && loadDiffEditor();
+$effect(() => {
+    if (open && diffDivEl) {
+        loadDiffEditor();
+    }
+});
+$effect(() => {
+    onWidthChange(editorWidth);
+});
 onMount(() => {
     if (BROWSER) {
         return () => {
@@ -90,28 +91,24 @@ onMount(() => {
         };
     }
 });
-const dispatch = createEventDispatcher();
 </script>
 
 {#if open}
 	<EditorTheme />
 	<div
 		bind:this={diffDivEl}
-		class="{$$props.class} editor nonmain-editor"
+		class={twMerge('editor nonmain-editor', className)}
 		bind:clientWidth={editorWidth}
 	></div>
-	{#if showButtons}
+	{#if buttons.length > 0}
 		<div
 			class="absolute flex flex-row gap-2 bottom-10 left-1/2 z-10 -translate-x-1/2 rounded-md p-1 w-full justify-center"
 		>
-			{#if showHistoryButton}
-				<Button on:click={() => dispatch('seeHistory')} variant="contained" size="sm"
-					>See changes history</Button
+			{#each buttons as button}
+				<Button on:click={button.onClick} variant="contained" size="sm" color={button.color}
+					>{button.text}</Button
 				>
-			{/if}
-			<Button on:click={() => dispatch('hideDiffMode')} variant="contained" size="sm" color="red"
-				>Quit diff mode</Button
-			>
+			{/each}
 		</div>
 	{/if}
 {/if}

package/package/components/DiffEditor.svelte.d.ts

@@ -1,51 +1,35 @@
 import '@codingame/monaco-vscode-standalone-languages';
 import '@codingame/monaco-vscode-standalone-json-language-features';
 import '@codingame/monaco-vscode-standalone-typescript-language-features';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import { editor as meditor } from 'monaco-editor';
+import type { ButtonType } from './common';
+export interface ButtonProp {
+    text: string;
+    color?: ButtonType.Color;
+    onClick: () => void;
 }
-declare const DiffEditor: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    automaticLayout?: boolean | undefined;
-    fixedOverflowWidgets?: boolean | undefined;
-    defaultLang?: string | undefined | undefined;
-    defaultModifiedLang?: string | undefined | undefined;
-    defaultOriginal?: string | undefined | undefined;
-    defaultModified?: string | undefined | undefined;
-    readOnly?: boolean | undefined;
-    showButtons?: boolean | undefined;
-    showHistoryButton?: boolean | undefined;
-    open?: boolean | undefined;
-    setupModel?: ((lang: string, original?: string, modified?: string, modifiedLang?: string) => void) | undefined;
-    setOriginal?: ((code: string) => void) | undefined;
-    getOriginal?: (() => string) | undefined;
-    setModified?: ((code: string) => void) | undefined;
-    getModified?: (() => string) | undefined;
-    show?: (() => void) | undefined;
-    hide?: (() => void) | undefined;
-}, {
-    hideDiffMode: CustomEvent<void>;
-    seeHistory: CustomEvent<void>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+interface Props {
+    open?: boolean;
+    className?: string;
+    automaticLayout?: boolean;
+    fixedOverflowWidgets?: boolean;
+    defaultLang?: string;
+    defaultModifiedLang?: string;
+    defaultOriginal?: string;
+    defaultModified?: string;
+    readOnly?: boolean;
+    buttons?: ButtonProp[];
+    modifiedModel?: meditor.ITextModel;
+}
+declare const DiffEditor: import("svelte").Component<Props, {
     setupModel: (lang: string, original?: string, modified?: string, modifiedLang?: string) => void;
     setOriginal: (code: string) => void;
     getOriginal: () => string;
     setModified: (code: string) => void;
+    setModifiedModel: (model: meditor.ITextModel) => void;
     getModified: () => string;
     show: () => void;
     hide: () => void;
-}, string>;
-type DiffEditor = InstanceType<typeof DiffEditor>;
+}, "">;
+type DiffEditor = ReturnType<typeof DiffEditor>;
 export default DiffEditor;