windmill-components 1.558.3 → 1.596.0

package/package/components/DeployWorkspace.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { createEventDispatcher, untrack } from 'svelte';
 import { base } from '../base';
 import { enterpriseLicense, superadmin, workspaceStore } from '../stores';
 import { AppService, FlowService, FolderService, RawAppService, ResourceService, ScheduleService, ScriptService, UserService, VariableService, WorkspaceService } from '../gen';
@@ -11,24 +11,16 @@ import { Loader2 } from 'lucide-svelte';
 import Badge from './common/badge/Badge.svelte';
 import DiffDrawer from './DiffDrawer.svelte';
 import { existsTrigger, getTriggerDependency, getTriggersDeployData, getTriggerValue } from '../utils_deployable';
+import { getAllGridItems } from './apps/editor/appUtils';
+import { isRunnableByPath } from './apps/inputType';
 const dispatch = createEventDispatcher();
-export let kind;
-export let initialPath = '';
-export let additionalInformation = undefined;
-export let workspaceToDeployTo = undefined;
-export let hideButton = false;
-let seeTarget = undefined;
-let dependencies = undefined;
-const allAlreadyExists = {};
-let diffDrawer;
-let notSet = undefined;
-$: WorkspaceService.getDeployTo({ workspace: $workspaceStore }).then((x) => {
-    workspaceToDeployTo = x.deploy_to;
-    if (x.deploy_to == undefined) {
-        notSet = true;
-    }
-});
-$: workspaceToDeployTo && reload(initialPath);
+let { kind, initialPath = '', additionalInformation = undefined, workspaceToDeployTo = $bindable(undefined), hideButton = false } = $props();
+let seeTarget = $state(undefined);
+let dependencies = $state(undefined);
+const allAlreadyExists = $state({});
+let diffDrawer = $state(undefined);
+let notSet = $state(undefined);
+let isFlow = $state(undefined);
 async function reload(path) {
     try {
         if (!$superadmin) {
@@ -103,6 +95,24 @@ async function getDependencies(kind, path) {
                 return result;
             });
         }
+        else if (kind == 'app') {
+            const app = await AppService.getAppByPath({ workspace: $workspaceStore, path });
+            console.log('app', app);
+            let appValue = app.value;
+            let result = [];
+            getAllGridItems(appValue).forEach((gridItem) => {
+                const ci = gridItem.data.componentInput;
+                if (ci?.type == 'runnable' && isRunnableByPath(ci.runnable)) {
+                    if (ci.runnable.runType == 'script') {
+                        result.push({ kind: 'script', path: ci.runnable.path });
+                    }
+                    else if (ci.runnable.runType == 'flow') {
+                        result.push({ kind: 'flow', path: ci.runnable.path });
+                    }
+                }
+            });
+            return result;
+        }
         else if (kind == 'resource') {
             const res = await ResourceService.getResource({ workspace: $workspaceStore, path });
             function recObj(obj) {
@@ -141,7 +151,6 @@ async function getDependencies(kind, path) {
             processed.push({ kind: 'folder', path: split[1] });
         }
     }
-    processed.reverse();
     return processed;
 }
 async function checkAlreadyExists(kind, path) {
@@ -225,7 +234,7 @@ async function checkAlreadyExists(kind, path) {
     }
     return exists;
 }
-const deploymentStatus = {};
+const deploymentStatus = $state({});
 async function deploy(kind, path) {
     const statusPath = `${kind}:${path}`;
     deploymentStatus[statusPath] = { status: 'loading' };
@@ -550,18 +559,29 @@ async function getValue(kind, path, workspace) {
     }
 }
 async function showDiff(kind, path) {
-    diffDrawer.openDrawer();
+    diffDrawer?.openDrawer();
     let values = await Promise.all([
         getValue(kind, path, workspaceToDeployTo),
         getValue(kind, path, $workspaceStore)
     ]);
-    diffDrawer.setDiff({
+    diffDrawer?.setDiff({
         mode: 'simple',
         original: values?.[0],
         current: values?.[1],
         title: 'Staging/prod <> Dev'
     });
 }
+$effect(() => {
+    WorkspaceService.getDeployTo({ workspace: $workspaceStore }).then((x) => {
+        workspaceToDeployTo = x.deploy_to;
+        if (x.deploy_to == undefined) {
+            notSet = true;
+        }
+    });
+});
+$effect(() => {
+    workspaceToDeployTo && initialPath && untrack(() => reload(initialPath));
+});
 </script>
 
 <div class="mt-6"></div>
@@ -593,15 +613,24 @@ async function showDiff(kind, path) {
 	{:else if seeTarget == true}
 		<h3 class="mb-6 mt-16">All related deployable items</h3>
 
-		<DiffDrawer bind:this={diffDrawer} />
+		<DiffDrawer bind:this={diffDrawer} {isFlow} />
 		<div class="grid grid-cols-9 justify-center max-w-3xl gap-2">
-			{#each dependencies ?? [] as { kind, path, include }}
+			{#each dependencies ?? [] as { kind, path, include }, i}
 				{@const statusPath = computeStatusPath(kind, path)}
 				<div class="col-span-1 truncate text-secondary text-sm pt-0.5">{kind}</div><div
 					class="col-span-5 truncate font-semibold">{path}</div
-				><div class="col-span-1 pt-1.5"><Toggle size="xs" bind:checked={include} /></div><div
-					class="col-span-1"
-				>
+				><div class="col-span-1 pt-1.5">
+					<Toggle
+						size="xs"
+						checked={include}
+						on:change={(e) => {
+							if (dependencies?.[i]) {
+								dependencies[i].include = e.detail
+							}
+						}}
+					/>
+				</div>
+				<div class="col-span-1">
 					{#if allAlreadyExists[statusPath] == false}
 						{#if include}
 							<Badge
@@ -627,8 +656,9 @@ async function showDiff(kind, path) {
 					{:else if allAlreadyExists[statusPath] == true}
 						<button
 							class="text-blue-600 font-normal mt-1"
-							on:click={() => {
+							onclick={() => {
 								showDiff(kind, path)
+								isFlow = kind === 'flow'
 							}}>diff</button
 						>
 					{/if}</div

package/package/components/DeployWorkspace.svelte.d.ts

@@ -1,4 +1,11 @@
 import { type AdditionalInformation, type Kind } from '../utils_deployable';
+interface Props {
+    kind: Kind;
+    initialPath?: string;
+    additionalInformation?: AdditionalInformation | undefined;
+    workspaceToDeployTo?: string | undefined;
+    hideButton?: boolean;
+}
 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;
@@ -12,19 +19,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DeployWorkspace: $$__sveltets_2_IsomorphicComponent<{
-    kind: Kind;
-    initialPath?: string;
-    additionalInformation?: AdditionalInformation | undefined;
-    workspaceToDeployTo?: string | undefined;
-    hideButton?: boolean;
-    deployAll?: () => void;
-}, {
+declare const DeployWorkspace: $$__sveltets_2_IsomorphicComponent<Props, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     deployAll: () => void;
-}, string>;
+}, "workspaceToDeployTo">;
 type DeployWorkspace = InstanceType<typeof DeployWorkspace>;
 export default DeployWorkspace;

package/package/components/Description.svelte

@@ -2,7 +2,7 @@
 export let link = undefined;
 </script>
 
-<div class={twMerge('text-xs text-tertiary font-normal opacity-80', $$props.class)}>
+<div class={twMerge('text-xs text-primary font-normal', $$props.class)}>
 	<slot />
 	{#if link}
 		<a href={link} target="_blank">Learn more</a>

package/package/components/Dev.svelte

@@ -18,6 +18,8 @@ import FlowEditorPanel from './flows/content/FlowEditorPanel.svelte';
 import { deepEqual } from 'fast-equals';
 import { writable } from 'svelte/store';
 import { initHistory } from '../history.svelte';
+import { SelectionManager } from './graph/selectionUtils.svelte';
+import { NoteEditor, setNoteEditorContext } from './graph/noteEditor.svelte';
 import { dfs } from './flows/dfs';
 import { loadSchemaFromModule } from './flows/flowInfers';
 import { CornerDownLeft, Play } from 'lucide-svelte';
@@ -363,6 +365,7 @@ let lastUriPath = undefined;
 async function replaceFlow(lastEdit) {
     mode = 'flow';
     lastUriPath = lastEdit.uriPath;
+    pathStore.set(lastEdit.path);
     // sendUserToast(JSON.stringify(lastEdit.flow), true)
     // return
     try {
@@ -374,7 +377,12 @@ async function replaceFlow(lastEdit) {
                 lastEdit.flow.value = { modules: [] };
             }
             flowStore.val = lastEdit.flow;
-            inferModuleArgs($selectedIdStore);
+            try {
+                let ids = dfs(flowStore.val.value.modules ?? [], (m) => m.id);
+                flowStateStore.val = Object.fromEntries(ids.map((k) => [k, {}]));
+            }
+            catch (e) { }
+            inferModuleArgs(selectedId);
         }
     }
     catch (e) {
@@ -387,11 +395,13 @@ const scriptEditorDrawer = writable(undefined);
 const moving = writable(undefined);
 const history = initHistory(flowStore.val);
 const stepsInputArgs = new StepsInputArgs();
-const selectedIdStore = writable('settings-metadata');
+const selectionManager = new SelectionManager();
+selectionManager.selectId('settings-metadata');
 const triggersCount = writable(undefined);
 const modulesTestStates = new ModulesTestStates((moduleId) => {
+    // console.log('FOO')
     // Update the derived store with test job states
-    showJobStatus = false;
+    // showJobStatus = false
 });
 const outputPickerOpenFns = $state({});
 setContext('TriggerContext', {
@@ -400,18 +410,20 @@ setContext('TriggerContext', {
     showCaptureHint: writable(undefined),
     triggersState: new Triggers()
 });
+let pathStore = writable('');
+let initialPathStore = writable('');
 setContext('FlowEditorContext', {
-    selectedId: selectedIdStore,
+    selectionManager,
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
     moving,
     history,
-    pathStore: writable(''),
+    pathStore: pathStore,
     flowStateStore,
     flowStore,
     stepsInputArgs,
     saveDraft: () => { },
-    initialPathStore: writable(''),
+    initialPathStore,
     fakeInitialPath: '',
     flowInputsStore: writable({}),
     customUi: {},
@@ -430,6 +442,12 @@ setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
     pickablePropertiesFiltered: writable(undefined)
 });
+// Set up NoteEditor context for note editing capabilities
+const noteEditor = new NoteEditor(flowStore, () => {
+    // Enable notes display when a note is created
+    flowModuleSchemaMap?.enableNotes?.();
+});
+setNoteEditorContext(noteEditor);
 let lastSent = undefined;
 function updateFlow(flow) {
     if (lockChanges) {
@@ -505,7 +523,7 @@ $effect(() => {
     flowStore.val && untrack(() => updateFlow(flowStore.val));
 });
 $effect(() => {
-    $selectedIdStore && untrack(() => inferModuleArgs($selectedIdStore));
+    selectedId && untrack(() => inferModuleArgs(selectedId));
 });
 let localModuleStates = $state({});
 let suspendStatus = $state({ val: {} });
@@ -521,7 +539,7 @@ function onJobDone() {
         if (job.type === 'CompletedJob' &&
             job.success &&
             flowPreviewButtons?.getPreviewMode() === 'whole') {
-            if (flowModuleSchemaMap?.isNodeVisible('result') && $selectedIdStore !== 'Result') {
+            if (flowModuleSchemaMap?.isNodeVisible('Result') && selectedId !== 'Result') {
                 outputPickerOpenFns['Result']?.();
             }
         }
@@ -543,6 +561,7 @@ function resetModulesStates() {
     showJobStatus = false;
 }
 const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
+const selectedId = $derived(selectionManager.getSelectedId());
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -562,7 +581,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 				>
 			</div>
 
-			<div class="absolute top-2 right-2 !text-tertiary text-xs">
+			<div class="absolute top-2 right-2 !text-primary text-xs">
 				{#if $userStore != undefined}
 					As {$userStore?.username} in {$workspaceStore}
 				{:else}
@@ -621,7 +640,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 				{:else}
 					<Button
 						disabled={currentScript === undefined}
-						color="dark"
+						variant="accent"
 						on:click={(e) => {
 							runTest()
 						}}
@@ -679,8 +698,8 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					<FlowPreviewButtons
 						bind:this={flowPreviewButtons}
 						{onJobDone}
+						bind:localModuleStates
 						onRunPreview={() => {
-							localModuleStates = {}
 							showJobStatus = true
 						}}
 					/>
@@ -695,7 +714,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								disableTutorials
 								smallErrorHandler={true}
 								disableStaticInputs
-								{localModuleStates}
+								localModuleStates={showJobStatus ? localModuleStates : {}}
 								onTestUpTo={flowPreviewButtons?.testUpTo}
 								testModuleStates={modulesTestStates}
 								isOwner={flowPreviewContent?.getIsOwner?.()}
@@ -724,7 +743,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 								on:applyArgs={(ev) => {
 									if (ev.detail.kind === 'preprocessor') {
 										stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
-										$selectedIdStore = 'preprocessor'
+										selectionManager.selectId('preprocessor')
 									} else {
 										previewArgsStore.val = ev.detail.args ?? {}
 										flowPreviewButtons?.openPreview()

package/package/components/Dev.svelte.d.ts

@@ -10,6 +10,7 @@ type LastEditScript = {
 type LastEditFlow = {
     flow: OpenFlow;
     uriPath: string;
+    path: string;
 };
 type $$ComponentProps = {
     initial?: {

package/package/components/DiffDrawer.svelte

@@ -5,6 +5,7 @@ import Tabs from './common/tabs/Tabs.svelte';
 import Tab from './common/tabs/Tab.svelte';
 import { cleanValueProperties, orderedJsonStringify, orderedYamlStringify, replaceFalseWithUndefined } from '../utils';
 let diffType = $state(undefined);
+let flowdiffMode = $state('yaml');
 let contentType = $derived.by(() => {
     if (!data || !diffType)
         return undefined;
@@ -16,7 +17,7 @@ let contentType = $derived.by(() => {
             : undefined;
 });
 let diffViewer = $state(undefined);
-let { restoreDeployed = async () => { }, restoreDraft = async () => { } } = $props();
+let { restoreDeployed = undefined, restoreDraft = undefined, isFlow = false } = $props();
 let data = $state(undefined);
 export function openDrawer() {
     data = undefined;
@@ -79,35 +80,38 @@ export function setDiff(diff) {
 			{#if diffType && data}
 				<Tabs bind:selected={diffType} wrapperClass="shrink-0">
 					{#if data.mode === 'simple'}
-						<Tab value="custom">{data.title}</Tab>
+						<Tab value="custom" label={data.title} />
 					{:else}
-						<Tab value="deployed" disabled={!data.deployed}
-							>{'Deployed <> Current'}{!data.deployed ? ' (no deployed version)' : ''}</Tab
-						>
-						<Tab value="draft" disabled={!data.draft}
-							>{'Latest saved draft <> Current'}{!data.draft ? ' (no draft)' : ''}</Tab
-						>
+						<Tab
+							value="deployed"
+							disabled={!data.deployed}
+							label="{'Deployed <> Current'}{!data.deployed ? ' (no deployed version)' : ''}"
+						/>
+
+						<Tab
+							value="draft"
+							disabled={!data.draft}
+							label="{'Latest saved draft <> Current'}{!data.draft ? ' (no draft)' : ''}"
+						/>
 					{/if}
 				</Tabs>
 			{/if}
 			{#if data?.mode === 'normal'}
 				{#if diffType === 'draft'}
 					<Button
-						size="xs"
-						color="light"
-						variant="border"
+						unifiedSize="md"
+						variant="default"
 						wrapperClasses="self-start"
-						on:click={restoreDraft}
+						onClick={restoreDraft}
 						disabled={orderedJsonStringify(data.draft) === orderedJsonStringify(data.current)}
 						>Restore to latest saved draft</Button
 					>
 				{:else if diffType === 'deployed'}
 					<Button
-						size="xs"
-						color="light"
-						variant="border"
+						unifiedSize="md"
+						variant="default"
 						wrapperClasses="self-start"
-						on:click={restoreDeployed}
+						onClick={restoreDeployed}
 						disabled={!data.draft &&
 							orderedJsonStringify(data.deployed) === orderedJsonStringify(data.current)}
 					>
@@ -138,12 +142,16 @@ export function setDiff(diff) {
 					<div class="flex flex-col h-full gap-4">
 						{#if data.current.content !== undefined}
 							<Tabs bind:selected={contentType}>
-								<Tab value="content" disabled={content === data.current.content}
-									>Content{content === data.current.content ? ' (no changes)' : ''}</Tab
-								>
-								<Tab value="metadata" disabled={metadata === data.current.metadata}
-									>Metadata{metadata === data.current.metadata ? ' (no changes)' : ''}</Tab
-								>
+								<Tab
+									value="content"
+									disabled={content === data.current.content}
+									label={`Content${content === data.current.content ? ' (no changes)' : ''}`}
+								/>
+								<Tab
+									value="metadata"
+									disabled={metadata === data.current.metadata}
+									label={`Metadata${metadata === data.current.metadata ? ' (no changes)' : ''}`}
+								/>
 							</Tabs>
 						{/if}
 						<div class="flex-1">
@@ -164,19 +172,50 @@ export function setDiff(diff) {
 										/>
 									{/await}
 								{:else if contentType === 'metadata'}
-									{#await import('./DiffEditor.svelte')}
-										<Loader2 class="animate-spin" />
-									{:then Module}
-										<Module.default
-											open={true}
-											automaticLayout
-											className="h-full"
-											defaultLang="yaml"
-											defaultOriginal={metadata}
-											defaultModified={data.current.metadata}
-											readOnly
-										/>
-									{/await}
+									{#if isFlow}
+										<Tabs bind:selected={flowdiffMode}>
+											<Tab value="yaml" label={`YAML`} />
+											<Tab value="graph" label={`Graph`} />
+										</Tabs>
+										{#if flowdiffMode === 'yaml'}
+											{#await import('./DiffEditor.svelte')}
+												<Loader2 class="animate-spin" />
+											{:then Module}
+												<Module.default
+													open={true}
+													automaticLayout
+													className="h-full"
+													defaultLang="yaml"
+													defaultOriginal={metadata}
+													defaultModified={data.current.metadata}
+													readOnly
+												/>
+											{/await}
+										{:else if flowdiffMode === 'graph'}
+											{#await import('./FlowGraphDiffViewer.svelte')}
+												<Loader2 class="animate-spin" />
+											{:then Module}
+												<Module.default
+													beforeYaml={metadata ?? ''}
+													afterYaml={data.current.metadata}
+												/>
+											{/await}
+										{/if}
+									{:else}
+										{#await import('./DiffEditor.svelte')}
+											<Loader2 class="animate-spin" />
+										{:then Module}
+											<Module.default
+												open={true}
+												automaticLayout
+												className="h-full"
+												defaultLang="yaml"
+												defaultOriginal={metadata}
+												defaultModified={data.current.metadata}
+												readOnly
+											/>
+										{/await}
+									{/if}
 								{/if}
 							{/key}
 						</div>
@@ -199,8 +238,8 @@ export function setDiff(diff) {
 		{#snippet actions()}
 			{#if data?.button}
 				<Button
-					color="light"
-					on:click={() => {
+					variant="subtle"
+					onClick={() => {
 						if (data?.button) {
 							data.button.onClick()
 							diffViewer?.closeDrawer()

package/package/components/DiffDrawer.svelte.d.ts

@@ -2,6 +2,7 @@ import { type Value } from '../utils';
 interface Props {
     restoreDeployed?: () => Promise<void>;
     restoreDraft?: () => Promise<void>;
+    isFlow?: boolean;
 }
 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> & {

package/package/components/DiffEditor.svelte

@@ -32,6 +32,7 @@ async function loadDiffEditor() {
         lineNumbersMinChars: 2,
         scrollbar: { alwaysConsumeMouseWheel: false }
     });
+    console.log('defaultModified', defaultModified);
     if (defaultLang !== undefined) {
         setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang);
     }
@@ -64,6 +65,11 @@ export function setModifiedModel(model) {
         modified: model
     });
 }
+export function showWithModelAndOriginal(original, model) {
+    setOriginal(original);
+    setModifiedModel(model);
+    show();
+}
 export function getModified() {
     return diffEditor?.getModel()?.modified.getValue() ?? '';
 }

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

@@ -19,7 +19,7 @@ interface Props {
     defaultModified?: string;
     readOnly?: boolean;
     buttons?: ButtonProp[];
-    modifiedModel?: meditor.ITextModel;
+    modifiedModel?: meditor.ITextModel | meditor.IEditorModel;
 }
 declare const DiffEditor: import("svelte").Component<Props, {
     setupModel: (lang: string, original?: string, modified?: string, modifiedLang?: string) => void;
@@ -27,6 +27,7 @@ declare const DiffEditor: import("svelte").Component<Props, {
     getOriginal: () => string;
     setModified: (code: string) => void;
     setModifiedModel: (model: meditor.ITextModel) => void;
+    showWithModelAndOriginal: (original: string, model: meditor.ITextModel | meditor.IEditorModel) => void;
     getModified: () => string;
     show: () => void;
     hide: () => void;