windmill-components 1.473.1 → 1.493.2

package/package/components/ScriptBuilder.svelte

@@ -1,8 +1,8 @@
-<script>import { DraftService, ScriptService, ScheduleService, PostgresTriggerService } from '../gen';
+<script lang="ts">import { DraftService, ScriptService, PostgresTriggerService, CaptureService } from '../gen';
 import { inferArgs } from '../infer';
 import { initialCode } from '../script_helpers';
-import { defaultScripts, enterpriseLicense, userStore, workspaceStore } from '../stores';
-import { cleanValueProperties, emptySchema, emptyString, encodeState, formatCron, orderedJsonStringify, replaceFalseWithUndefined } from '../utils';
+import { defaultScripts, enterpriseLicense, usedTriggerKinds, userStore, workspaceStore } from '../stores';
+import { cleanValueProperties, emptySchema, emptyString, encodeState, generateRandomString, orderedJsonStringify, replaceFalseWithUndefined } from '../utils';
 import Path from './Path.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import { Alert, Badge, Button, Drawer, SecondsInput, Tab, TabContent, Tabs } from './common';
@@ -12,7 +12,7 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ErrorHandlerToggleButton from './details/ErrorHandlerToggleButton.svelte';
-import { Bug, Calendar, CheckCircle, Code, CornerDownLeft, DiffIcon, Pen, Plus, Rocket, Save, Settings, Shuffle, X } from 'lucide-svelte';
+import { Bug, Calendar, CheckCircle, Code, Pen, Plus, Rocket, Save, Settings, Shuffle, X } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 import { isCloudHosted } from '../cloud';
 import Awareness from './Awareness.svelte';
@@ -28,12 +28,15 @@ import { writable } from 'svelte/store';
 import { defaultScriptLanguages, processLangs } from '../scripts';
 import DefaultScripts from './DefaultScripts.svelte';
 import { createEventDispatcher, onMount, setContext } from 'svelte';
-import CustomPopover from './CustomPopover.svelte';
 import Summary from './Summary.svelte';
 import DeployOverrideConfirmationModal from './common/confirmationModal/DeployOverrideConfirmationModal.svelte';
 import TriggersEditor from './triggers/TriggersEditor.svelte';
-import { BUN_PREPROCESSOR_MODULE_CODE, PYTHON_PREPROCESSOR_MODULE_CODE } from '../script_helpers';
+import { TS_PREPROCESSOR_MODULE_CODE, TS_PREPROCESSOR_SCRIPT_INTRO, PYTHON_PREPROCESSOR_MODULE_CODE, PYTHON_PREPROCESSOR_SCRIPT_INTRO } from '../script_helpers';
 import CaptureTable from './triggers/CaptureTable.svelte';
+import DeployButton from './DeployButton.svelte';
+import { deployTriggers, filterDraftTriggers, handleSelectTriggerFromKind } from './triggers/utils';
+import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte';
+import { Triggers } from './triggers/triggers.svelte';
 export let script;
 export let fullyLoaded = true;
 export let initialPath = '';
@@ -53,9 +56,19 @@ export let functionExports = undefined;
 export function getInitialAndModifiedValues() {
     return {
         savedValue: savedScript,
-        modifiedValue: script
+        modifiedValue: {
+            ...script,
+            draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
+        }
     };
 }
+// used for new scripts for captures
+const fakeInitialPath = 'u/' +
+    ($userStore.username?.includes('@')
+        ? $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9_]/g, '')
+        : $userStore.username) +
+    '/' +
+    generateRandomString(12);
 let deployedValue = undefined; // Value to diff against
 let deployedBy = undefined; // Author
 let confirmCallback = () => { }; // What happens when user clicks `override` in warning
@@ -71,16 +84,31 @@ let metadataOpen = !neverShowMeta &&
 let editor = undefined;
 let scriptEditor = undefined;
 let captureTable = undefined;
-const primaryScheduleStore = writable(savedPrimarySchedule);
+// Draft triggers confirmation modal
+let draftTriggersModalOpen = false;
+let confirmDeploymentCallback = () => { };
+async function handleDraftTriggersConfirmed(event) {
+    const { selectedTriggers } = event.detail;
+    // Continue with saving the flow
+    draftTriggersModalOpen = false;
+    confirmDeploymentCallback(selectedTriggers);
+}
+const primaryScheduleStore = writable(savedPrimarySchedule); // keep for legacy
 const triggersCount = writable(savedPrimarySchedule
     ? { schedule_count: 1, primary_schedule: { schedule: savedPrimarySchedule.cron } }
     : undefined);
 const simplifiedPoll = writable(false);
-const selectedTriggerStore = writable('webhooks');
 export function setPrimarySchedule(schedule) {
     primaryScheduleStore.set(schedule);
     loadTriggers();
 }
+export function setDraftTriggers(triggers) {
+    triggersState.setTriggers([
+        ...(triggers ?? []),
+        ...triggersState.triggers.filter((t) => !t.draftConfig)
+    ]);
+    loadTriggers();
+}
 const dispatch = createEventDispatcher();
 $: initialPath != '' && loadTriggers();
 onMount(() => {
@@ -106,27 +134,24 @@ async function loadTriggers() {
         workspace: $workspaceStore,
         path: initialPath
     });
-    if ($primaryScheduleStore && $triggersCount.primary_schedule == undefined) {
-        $triggersCount = {
-            ...($triggersCount ?? {}),
-            schedule_count: ($triggersCount.schedule_count ?? 0) + 1,
-            primary_schedule: {
-                schedule: $primaryScheduleStore.cron
-            }
-        };
+    await triggersState.fetchTriggers(triggersCount, $workspaceStore, initialPath, false, $primaryScheduleStore, $userStore);
+    if (savedScript && savedScript.draft && savedScript.draft.draft_triggers) {
+        savedScript = filterDraftTriggers(savedScript, triggersState);
     }
 }
-const triggerDefaultValuesStore = writable(undefined);
+// Add triggers context store
+const triggersState = new Triggers([
+    { type: 'webhook', path: '', isDraft: false },
+    { type: 'email', path: '', isDraft: false },
+    ...(script.draft_triggers ?? [])
+], undefined, saveSessionDraft);
 const captureOn = writable(undefined);
 const showCaptureHint = writable(undefined);
 setContext('TriggerContext', {
-    selectedTrigger: selectedTriggerStore,
-    primarySchedule: primaryScheduleStore,
     triggersCount,
     simplifiedPoll,
-    defaultValues: triggerDefaultValuesStore,
-    captureOn: captureOn,
-    showCaptureHint: showCaptureHint
+    showCaptureHint: showCaptureHint,
+    triggersState
 });
 const enterpriseLangs = ['bigquery', 'snowflake', 'mssql', 'oracledb'];
 export function setCode(code) {
@@ -187,8 +212,21 @@ $: {
         }
     });
 }
-$: !disableHistoryChange &&
-    replaceStateFn('#' + encodeState({ ...script, primarySchedule: $primaryScheduleStore }));
+$: !disableHistoryChange && encodeScriptState(script);
+function encodeScriptState(script) {
+    replaceStateFn('#' +
+        encodeState({
+            ...script,
+            draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
+        }));
+}
+let timeout = undefined;
+function saveSessionDraft() {
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(() => {
+        encodeScriptState(script);
+    }, 500);
+}
 if (script.content == '') {
     initContent(script.language, script.kind, template);
 }
@@ -221,30 +259,6 @@ async function initContent(language, kind, template) {
         setCode(script.content);
     }
 }
-async function createSchedule(path) {
-    if (!$primaryScheduleStore) {
-        return;
-    }
-    const { cron, timezone, args, enabled, summary } = $primaryScheduleStore;
-    try {
-        await ScheduleService.createSchedule({
-            workspace: $workspaceStore,
-            requestBody: {
-                path: path,
-                schedule: formatCron(cron),
-                timezone,
-                script_path: path,
-                is_flow: false,
-                args,
-                enabled,
-                summary
-            }
-        });
-    }
-    catch (err) {
-        sendUserToast(`The primary schedule could not be created: ${err}`, true);
-    }
-}
 async function handleEditScript(stay, deployMsg) {
     // Fetch latest version and fetch entire script after if needed
     let actual_parent_hash = undefined;
@@ -310,7 +324,18 @@ async function syncWithDeployed() {
     });
     deployedBy = latestScript.created_by;
 }
-async function editScript(stay, parentHash, deploymentMsg) {
+async function editScript(stay, parentHash, deploymentMsg, triggersToDeploy) {
+    if (!triggersToDeploy) {
+        // Check if there are draft triggers that need confirmation
+        const draftTriggers = triggersState.triggers.filter((trigger) => trigger.draftConfig);
+        if (draftTriggers.length > 0) {
+            draftTriggersModalOpen = true;
+            confirmDeploymentCallback = async (triggersToDeploy) => {
+                await editScript(stay, parentHash, deploymentMsg, triggersToDeploy);
+            };
+            return;
+        }
+    }
     loadingSave = true;
     try {
         try {
@@ -321,9 +346,15 @@ async function editScript(stay, parentHash, deploymentMsg) {
         }
         script.schema = script.schema ?? emptySchema();
         try {
-            const result = await inferArgs(script.language, script.content, script.schema);
-            script.no_main_func = result?.no_main_func || undefined;
-            script.has_preprocessor = result?.has_preprocessor || undefined;
+            const result = await inferArgs(script.language, script.content, script.schema, script.kind === 'preprocessor' ? 'preprocessor' : undefined);
+            if (script.kind === 'preprocessor') {
+                script.no_main_func = undefined;
+                script.has_preprocessor = undefined;
+            }
+            else {
+                script.no_main_func = result?.no_main_func || undefined;
+                script.has_preprocessor = result?.has_preprocessor || undefined;
+            }
         }
         catch (error) {
             sendUserToast(`Could not parse code, are you sure it is valid?`, true);
@@ -359,57 +390,28 @@ async function editScript(stay, parentHash, deploymentMsg) {
                 on_behalf_of_email: script.on_behalf_of_email
             }
         });
-        const scheduleExists = initialPath != '' &&
-            (await ScheduleService.existsSchedule({
-                workspace: $workspaceStore ?? '',
-                path: script.path
-            }));
-        if ($primaryScheduleStore) {
-            const { enabled, timezone, args, cron, summary } = $primaryScheduleStore;
-            if (scheduleExists) {
-                const schedule = await ScheduleService.getSchedule({
-                    workspace: $workspaceStore ?? '',
-                    path: script.path
-                });
-                if (JSON.stringify(schedule.args) != JSON.stringify(args) ||
-                    schedule.schedule != cron ||
-                    schedule.timezone != timezone ||
-                    schedule.summary != summary) {
-                    await ScheduleService.updateSchedule({
-                        workspace: $workspaceStore ?? '',
-                        path: script.path,
-                        requestBody: {
-                            schedule: formatCron(cron),
-                            timezone,
-                            args,
-                            summary
-                        }
-                    });
-                }
-                if (enabled != schedule.enabled) {
-                    await ScheduleService.setScheduleEnabled({
-                        workspace: $workspaceStore ?? '',
-                        path: script.path,
-                        requestBody: { enabled }
-                    });
-                }
-            }
-            else if (enabled) {
-                await createSchedule(script.path);
-            }
-        }
-        else if (scheduleExists && !$triggersCount?.primary_schedule) {
-            await ScheduleService.deleteSchedule({
-                workspace: $workspaceStore ?? '',
-                path: script.path
+        if (!initialPath) {
+            await CaptureService.moveCapturesAndConfigs({
+                workspace: $workspaceStore,
+                path: fakeInitialPath,
+                requestBody: {
+                    new_path: script.path
+                },
+                runnableKind: 'script'
             });
         }
-        savedScript = structuredClone(script);
+        if (triggersToDeploy) {
+            await deployTriggers(triggersToDeploy, $workspaceStore, !!$userStore?.is_admin || !!$userStore?.is_super_admin, usedTriggerKinds, script.path, true);
+        }
+        const { draft_triggers: _, ...newScript } = structuredClone(script);
+        savedScript = structuredClone(newScript);
+        setDraftTriggers([]);
         if (!disableHistoryChange) {
             history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
         }
-        if (stay) {
+        if (stay || script.kind !== 'script' || script.no_main_func) {
             script.parent_hash = newHash;
+            sendUserToast('Deployed');
         }
         else {
             dispatch('deploy', newHash);
@@ -427,7 +429,8 @@ async function saveDraft(forceSave = false) {
     }
     if (savedScript) {
         const draftOrDeployed = cleanValueProperties(savedScript.draft || savedScript);
-        const current = cleanValueProperties(script);
+        const currentTriggers = structuredClone(triggersState.getDraftTriggersSnapshot());
+        const current = cleanValueProperties({ ...script, draft_triggers: currentTriggers });
         if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
             sendUserToast('No changes detected, ignoring', false, [
                 {
@@ -450,9 +453,15 @@ async function saveDraft(forceSave = false) {
         }
         script.schema = script.schema ?? emptySchema();
         try {
-            const result = await inferArgs(script.language, script.content, script.schema);
-            script.no_main_func = result?.no_main_func || undefined;
-            script.has_preprocessor = result?.has_preprocessor || undefined;
+            const result = await inferArgs(script.language, script.content, script.schema, script.kind === 'preprocessor' ? 'preprocessor' : undefined);
+            if (script.kind === 'preprocessor') {
+                script.no_main_func = undefined;
+                script.has_preprocessor = undefined;
+            }
+            else {
+                script.no_main_func = result?.no_main_func || undefined;
+                script.has_preprocessor = result?.has_preprocessor || undefined;
+            }
         }
         catch (error) {
             sendUserToast(`Could not parse code, are you sure it is valid?`, true);
@@ -461,10 +470,21 @@ async function saveDraft(forceSave = false) {
             if (savedScript?.draft_only) {
                 await ScriptService.deleteScriptByPath({
                     workspace: $workspaceStore,
-                    path: initialPath
+                    path: initialPath,
+                    keepCaptures: true
                 });
                 script.parent_hash = undefined;
             }
+            if (!initialPath || script.path != initialPath) {
+                await CaptureService.moveCapturesAndConfigs({
+                    workspace: $workspaceStore,
+                    path: initialPath || fakeInitialPath,
+                    requestBody: {
+                        new_path: script.path
+                    },
+                    runnableKind: 'script'
+                });
+            }
             await ScriptService.createScript({
                 workspace: $workspaceStore,
                 requestBody: {
@@ -497,19 +517,26 @@ async function saveDraft(forceSave = false) {
                 }
             });
         }
+        const draftTriggers = triggersState.getDraftTriggersSnapshot();
         await DraftService.createDraft({
             workspace: $workspaceStore,
             requestBody: {
                 path: initialPath == '' || savedScript?.draft_only ? script.path : initialPath,
                 typ: 'script',
-                value: { ...script, primary_schedule: $primaryScheduleStore }
+                value: {
+                    ...script,
+                    draft_triggers: draftTriggers
+                }
             }
         });
         savedScript = {
             ...(initialPath == '' || savedScript?.draft_only
                 ? { ...structuredClone(script), draft_only: true }
                 : savedScript),
-            draft: structuredClone(script)
+            draft: {
+                ...structuredClone(script),
+                draft_triggers: draftTriggers
+            }
         };
         let savedAtNewPath = false;
         if (initialPath == '' || (savedScript?.draft_only && script.path !== initialPath)) {
@@ -526,7 +553,7 @@ async function saveDraft(forceSave = false) {
     }
     loadingDraft = false;
 }
-function computeDropdownItems(initialPath) {
+function computeDropdownItems(initialPath, savedScript, diffDrawer) {
     let dropdownItems = initialPath != '' && customUi?.topBar?.extraDeployOptions != false
         ? [
             {
@@ -541,7 +568,31 @@ function computeDropdownItems(initialPath) {
                     window.open(`/scripts/add?template=${initialPath}`);
                 }
             },
-            ...(!script.draft_only
+            ...(customUi?.topBar?.diff !== false && savedScript && diffDrawer
+                ? [
+                    {
+                        label: 'Show diff',
+                        onClick: async () => {
+                            if (!savedScript) {
+                                return;
+                            }
+                            await syncWithDeployed();
+                            const currentDraftTriggers = structuredClone(triggersState.getDraftTriggersSnapshot());
+                            diffDrawer?.openDrawer();
+                            diffDrawer?.setDiff({
+                                mode: 'normal',
+                                deployed: deployedValue ?? savedScript,
+                                draft: savedScript['draft'],
+                                current: {
+                                    ...script,
+                                    draft_triggers: currentDraftTriggers
+                                }
+                            });
+                        }
+                    }
+                ]
+                : []),
+            ...(!script.draft_only && script.kind === 'script' && !script.no_main_func
                 ? [
                     {
                         label: 'Exit & See details',
@@ -584,8 +635,6 @@ let selectedTab = (() => {
     return 'metadata';
 })();
 setContext('disableTooltips', customUi?.disableTooltips === true);
-let deploymentMsg = '';
-let msgInput = undefined;
 function langToLanguage(lang) {
     if (lang == 'docker') {
         return 'bash';
@@ -605,16 +654,15 @@ async function applyArgs(e) {
 function openTriggers(ev) {
     metadataOpen = true;
     selectedTab = 'triggers';
-    selectedTriggerStore.set(ev.detail.kind);
-    triggerDefaultValuesStore.set(ev.detail.config);
+    handleSelectTriggerFromKind(triggersState, triggersCount, initialPath, ev.detail.kind);
     captureOn.set(true);
 }
 function addPreprocessor() {
     const code = editor?.getCode();
     if (code) {
         const preprocessorCode = script.language === 'python3'
-            ? PYTHON_PREPROCESSOR_MODULE_CODE
-            : BUN_PREPROCESSOR_MODULE_CODE;
+            ? PYTHON_PREPROCESSOR_SCRIPT_INTRO + PYTHON_PREPROCESSOR_MODULE_CODE
+            : TS_PREPROCESSOR_SCRIPT_INTRO + TS_PREPROCESSOR_MODULE_CODE;
         const mainIndex = code.indexOf(script.language === 'python3' ? 'def main' : 'export async function main');
         if (mainIndex === -1) {
             editor?.setCode(code + preprocessorCode);
@@ -625,6 +673,15 @@ function addPreprocessor() {
     }
     selectedInputTab = 'preprocessor';
 }
+function handleDeployTrigger(trigger) {
+    const { id, path, type } = trigger;
+    //Update the saved script to remove the draft trigger that is deployed
+    if (savedScript && savedScript.draft && savedScript.draft.draft_triggers) {
+        const newSavedDraftTrigers = savedScript.draft.draft_triggers.filter((t) => t.id !== id || t.path !== path || t.type !== type);
+        savedScript.draft.draft_triggers =
+            newSavedDraftTrigers.length > 0 ? newSavedDraftTrigers : undefined;
+    }
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -638,11 +695,21 @@ function addPreprocessor() {
 	bind:deployedValue
 	currentValue={script}
 />
+
+<DraftTriggersConfirmationModal
+	bind:open={draftTriggersModalOpen}
+	draftTriggers={triggersState.triggers.filter((t) => t.draftConfig)}
+	on:canceled={() => {
+		draftTriggersModalOpen = false
+	}}
+	on:confirmed={handleDraftTriggersConfirmed}
+/>
+
 {#if !$userStore?.operator}
 	<Drawer
 		placement="right"
 		bind:open={metadataOpen}
-		size={selectedTab === 'ui' ? '1200px' : '800px'}
+		size={selectedTab === 'ui' || selectedTab === 'triggers' ? '1200px' : '800px'}
 	>
 		<DrawerContent noPadding title="Settings" on:close={() => (metadataOpen = false)}>
 			<!-- svelte-ignore a11y-autofocus -->
@@ -811,7 +878,7 @@ function addPreprocessor() {
 													>
 														<LanguageIcon {lang} />
 														<span class="ml-2 py-2 truncate">{label}</span>
-														{#if lang === 'ansible'}
+														{#if lang === 'ansible' || lang === 'nu'}
 															<span class="text-tertiary !text-xs"> BETA </span>
 														{/if}
 													</Button>
@@ -1260,26 +1327,30 @@ function addPreprocessor() {
 									customUi={customUi?.settingsPanel?.metadata?.editableSchemaForm}
 								/>
 							</TabContent>
-							<TabContent value="triggers">
+							<TabContent value="triggers" class="h-full">
 								<TriggersEditor
 									on:applyArgs={applyArgs}
 									on:addPreprocessor={addPreprocessor}
 									on:exitTriggers={() => {
 										captureTable?.loadCaptures(true)
 									}}
-									{args}
+									currentPath={script.path}
 									{initialPath}
-									schema={script.schema}
+									{fakeInitialPath}
 									noEditor={true}
-									isFlow={false}
-									currentPath={script.path}
-									hash={script.parent_hash}
 									newItem={initialPath == ''}
+									isFlow={false}
+									{hasPreprocessor}
 									canHavePreprocessor={script.language === 'bun' ||
 										script.language === 'deno' ||
 										script.language === 'python3'}
-									{hasPreprocessor}
+									args={hasPreprocessor && selectedInputTab !== 'preprocessor' ? {} : args}
+									isDeployed={savedScript && !savedScript?.draft_only}
+									schema={script.schema}
+									hash={script.parent_hash}
+									onDeployTrigger={handleDeployTrigger}
 								/>
+
 								<!-- <ScriptSchedules {initialPath} schema={script.schema} schedule={scheduleStore} /> -->
 							</TabContent>
 						</div>
@@ -1310,7 +1381,10 @@ function addPreprocessor() {
 				</div>
 
 				<div class="gap-4 flex">
-					{#if $primaryScheduleStore != undefined ? $primaryScheduleStore && $primaryScheduleStore?.enabled : $triggersCount?.primary_schedule}
+					{#if triggersState.triggers?.some((t) => t.type === 'schedule')}
+						{@const primarySchedule = triggersState.triggers.findIndex((t) => t.isPrimary)}
+						{@const schedule = triggersState.triggers.findIndex((t) => t.type === 'schedule')}
+
 						<Button
 							btnClasses="hidden lg:inline-flex"
 							startIcon={{ icon: Calendar }}
@@ -1320,14 +1394,12 @@ function addPreprocessor() {
 							on:click={async () => {
 								metadataOpen = true
 								selectedTab = 'triggers'
-								$selectedTriggerStore = 'schedules'
+								triggersState.selectedTriggerIndex = primarySchedule ?? schedule
 							}}
 						>
-							{$primaryScheduleStore != undefined
-								? $primaryScheduleStore
-									? $primaryScheduleStore?.cron
-									: ''
-								: $triggersCount?.primary_schedule?.schedule}
+							{triggersState.triggers[primarySchedule]?.draftConfig?.schedule ??
+								triggersState.triggers[primarySchedule]?.lightConfig?.schedule ??
+								''}
 						</Button>
 					{/if}
 					{#if customUi?.topBar?.path != false}
@@ -1367,33 +1439,6 @@ function addPreprocessor() {
 				{/if}
 
 				<div class="flex flex-row gap-x-1 lg:gap-x-2">
-					{#if customUi?.topBar?.diff != false}
-						<Button
-							color="light"
-							variant="border"
-							size="xs"
-							on:click={async () => {
-								if (!savedScript) {
-									return
-								}
-								await syncWithDeployed()
-
-								diffDrawer?.openDrawer()
-								diffDrawer?.setDiff({
-									mode: 'normal',
-									deployed: deployedValue ?? savedScript,
-									draft: savedScript['draft'],
-									current: script
-								})
-							}}
-							disabled={!savedScript || !diffDrawer}
-						>
-							<div class="flex flex-row gap-2 items-center">
-								<DiffIcon size={14} />
-								<span class="hidden lg:flex"> Diff </span>
-							</div>
-						</Button>
-					{/if}
 					{#if customUi?.topBar?.settings != false}
 						<Button
 							color="light"
@@ -1420,41 +1465,13 @@ function addPreprocessor() {
 						<span class="hidden lg:flex"> Draft </span>
 					</Button>
 
-					<CustomPopover appearTimeout={0} focusEl={msgInput}>
-						<Button
-							loading={loadingSave}
-							size="xs"
-							disabled={!fullyLoaded}
-							startIcon={{ icon: Save }}
-							on:click={() => handleEditScript(false)}
-							dropdownItems={computeDropdownItems(initialPath)}
-						>
-							Deploy
-						</Button>
-						<svelte:fragment slot="overlay">
-							<div class="flex flex-row gap-2 min-w-72">
-								<input
-									type="text"
-									placeholder="Deployment message"
-									bind:value={deploymentMsg}
-									bind:this={msgInput}
-									on:keydown={(e) => {
-										if (e.key === 'Enter') {
-											handleEditScript(false, deploymentMsg)
-										}
-									}}
-								/>
-								<Button
-									size="xs"
-									on:click={() => handleEditScript(false, deploymentMsg)}
-									endIcon={{ icon: CornerDownLeft }}
-									loading={loadingSave}
-								>
-									Deploy
-								</Button>
-							</div>
-						</svelte:fragment>
-					</CustomPopover>
+					<DeployButton
+						loading={!fullyLoaded}
+						{loadingSave}
+						newFlow={false}
+						dropdownItems={computeDropdownItems(initialPath, savedScript, diffDrawer)}
+						on:save={({ detail }) => handleEditScript(false, detail)}
+					/>
 				</div>
 			</div>
 		</div>
@@ -1477,12 +1494,15 @@ function addPreprocessor() {
 			bind:this={scriptEditor}
 			bind:schema={script.schema}
 			path={script.path}
+			stablePathForCaptures={initialPath || fakeInitialPath}
 			bind:code={script.content}
 			lang={script.language}
 			{initialArgs}
 			kind={script.kind}
 			{template}
 			tag={script.tag}
+			lastSavedCode={savedScript?.draft?.content}
+			lastDeployedCode={savedScript?.draft_only ? undefined : savedScript?.content}
 			bind:args
 			bind:hasPreprocessor
 			bind:captureTable