feat: add diffs when editing workspace script inside a flow (#2581)

frontend/src/lib/components/DiffDrawer.svelte

@@ -128,7 +128,7 @@
 	$: updateContentType(data, diffType)
 </script>
 
-<Drawer bind:this={diffViewer} size="1200px">
+<Drawer bind:this={diffViewer} size="1200px" on:close>
 	<DrawerContent title="Diff" on:close={diffViewer.closeDrawer}>
 		<div class="flex flex-col gap-4 h-full">
 			{#if diffType && data}

frontend/src/lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -61,6 +61,8 @@
 			<Button
 				wrapperClasses="self-start"
 				color="light"
+				variant="border"
+				size="xs"
 				on:click={() => {
 					if (!savedValue || !modifiedValue) {
 						return

frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
 	import { Button, Drawer, DrawerContent } from '$lib/components/common'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import DiffDrawer from '$lib/components/DiffDrawer.svelte'
 	import ScriptEditor from '$lib/components/ScriptEditor.svelte'
 	import { ScriptService, type Preview, Script } from '$lib/gen'
 	import { inferArgs } from '$lib/infer'
 	import { workspaceStore } from '$lib/stores'
-	import { emptySchema, sendUserToast } from '$lib/utils'
+	import {
+		cleanValueProperties,
+		emptySchema,
+		orderedJsonStringify,
+		sendUserToast
+	} from '$lib/utils'
 	import { faSave } from '@fortawesome/free-solid-svg-icons'
-	import { Loader2 } from 'lucide-svelte'
+	import { cloneDeep } from 'lodash'
+	import { DiffIcon, Loader2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 
@@ -21,6 +29,7 @@
 			workspace: $workspaceStore!,
 			hash
 		})
+		savedScript = cloneDeep(script)
 		callback = cb
 	}
 
@@ -40,6 +49,21 @@
 		  }
 		| undefined = undefined
 
+	let savedScript:
+		| {
+				path: string
+				description: string
+				summary: string
+				hash: string
+				language: Preview.language
+				content: string
+				schema?: any
+				kind: 'script' | 'failure' | 'trigger' | 'command' | 'approval' | undefined
+				envs?: string[]
+				ws_error_handler_muted?: boolean
+		  }
+		| undefined = undefined
+
 	async function saveScript(): Promise<void> {
 		if (script) {
 			try {
@@ -69,15 +93,91 @@
 						ws_error_handler_muted: script.ws_error_handler_muted
 					}
 				})
+				savedScript = cloneDeep(script)
 				callback?.()
 			} catch (error) {
 				sendUserToast(`Impossible to save the script: ${error.body}`, true)
 			}
 		}
 	}
+
+	let closeAnyway = false
+	let diffDrawer: DiffDrawer
+	let unsavedModalOpen = false
+	async function checkForUnsavedChanges() {
+		if (closeAnyway) {
+			scriptEditorDrawer.closeDrawer()
+			closeAnyway = false
+			return
+		}
+		if (savedScript && script) {
+			const saved = cleanValueProperties(savedScript)
+			const current = cleanValueProperties(script)
+			if (orderedJsonStringify(saved) !== orderedJsonStringify(current)) {
+				unsavedModalOpen = true
+			} else {
+				scriptEditorDrawer.closeDrawer()
+			}
+		}
+	}
 </script>
 
-<Drawer bind:this={scriptEditorDrawer} size="1200px">
+<!-- <UnsavedConfirmationModal savedValue={savedScript} modifiedValue={script} {diffDrawer} /> -->
+
+<ConfirmationModal
+	open={unsavedModalOpen}
+	title="Unsaved changes detected"
+	confirmationText="Discard changes"
+	on:canceled={() => {
+		unsavedModalOpen = false
+	}}
+	on:confirmed={() => {
+		unsavedModalOpen = false
+		closeAnyway = true
+		scriptEditorDrawer.closeDrawer()
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to discard the changes you have made? </span>
+		<Button
+			wrapperClasses="self-start"
+			color="light"
+			variant="border"
+			size="xs"
+			on:click={() => {
+				if (!savedScript || !script) {
+					return
+				}
+				unsavedModalOpen = false
+				closeAnyway = true
+				scriptEditorDrawer.closeDrawer()
+				diffDrawer.openDrawer()
+				diffDrawer.setDiff({
+					title: 'Saved <> Current',
+					mode: 'simple',
+					original: savedScript,
+					current: script,
+					button: {
+						text: 'Close anyway',
+						onClick: () => {
+							closeAnyway = true
+							diffDrawer.closeDrawer()
+						}
+					}
+				})
+			}}
+			>Show diff
+		</Button>
+	</div>
+</ConfirmationModal>
+<Drawer
+	bind:this={scriptEditorDrawer}
+	size="1200px"
+	on:close={() => {
+		scriptEditorDrawer.openDrawer()
+		checkForUnsavedChanges()
+	}}
+>
 	<DrawerContent
 		title="Script Editor"
 		noPadding
@@ -109,6 +209,37 @@
 			</div>
 		{/if}
 		<svelte:fragment slot="actions">
+			<Button
+				disabled={!savedScript || !script}
+				color="light"
+				variant="border"
+				on:click={async () => {
+					if (!savedScript || !script) {
+						return
+					}
+					closeAnyway = true
+					scriptEditorDrawer.closeDrawer()
+					diffDrawer.openDrawer()
+					diffDrawer.setDiff({
+						mode: 'simple',
+						original: savedScript,
+						current: script,
+						title: 'Saved <> Current',
+						button: {
+							text: 'Restore to saved',
+							onClick: () => {
+								script = cloneDeep(savedScript)
+								diffDrawer.closeDrawer()
+							}
+						}
+					})
+				}}
+			>
+				<div class="flex flex-row gap-2 items-center">
+					<DiffIcon size={14} />
+					Diff
+				</div>
+			</Button>
 			<Button
 				on:click={async () => {
 					await saveScript()
@@ -121,3 +252,14 @@
 		</svelte:fragment>
 	</DrawerContent>
 </Drawer>
+
+<DiffDrawer
+	bind:this={diffDrawer}
+	on:close={() => {
+		if (!closeAnyway) {
+			scriptEditorDrawer.openDrawer()
+		} else {
+			closeAnyway = false
+		}
+	}}
+/>