feat: add diff toggle to flow inline scripts (#5550)

* draft flow diff

* add missing import

* cleaning

* code cleaning

* fix for recursive renderings

* fix typo

* cleaning

---------

Co-authored-by: HugoCasa <hugo@casademont.ch>

frontend/src/lib/components/FlowBuilder.svelte

@@ -1529,6 +1529,7 @@
 						$previewArgsStore = JSON.parse(JSON.stringify(e.detail))
 						flowPreviewButtons?.openPreview(true)
 					}}
+					{savedFlow}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>

frontend/src/lib/components/flows/FlowEditor.svelte

@@ -12,6 +12,7 @@
 	import { writable } from 'svelte/store'
 	import type { PropPickerContext, FlowPropPickerConfig } from '$lib/components/prop_picker'
 	import type { PickableProperties } from '$lib/components/flows/previousResults'
+	import type { Flow } from '$lib/gen'
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	export let loading: boolean
@@ -22,7 +23,11 @@
 	export let disabledFlowInputs = false
 	export let smallErrorHandler = false
 	export let newFlow: boolean = false
-
+	export let savedFlow:
+		| (Flow & {
+				draft?: Flow | undefined
+		  })
+		| undefined = undefined
 	let size = 50
 
 	const { currentStepStore: copilotCurrentStepStore } =
@@ -75,6 +80,7 @@
 				<FlowEditorPanel
 					{disabledFlowInputs}
 					{newFlow}
+					{savedFlow}
 					enableAi={!disableAi}
 					on:applyArgs
 					on:testWithArgs

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

@@ -7,7 +7,7 @@
 	import FlowFailureModule from './FlowFailureModule.svelte'
 	import FlowConstants from './FlowConstants.svelte'
 	import TriggersEditor from '../../triggers/TriggersEditor.svelte'
-	import type { FlowModule } from '$lib/gen'
+	import type { FlowModule, Flow } from '$lib/gen'
 	import { initFlowStepWarnings } from '../utils'
 	import { dfs } from '../dfs'
 	import FlowPreprocessorModule from './FlowPreprocessorModule.svelte'
@@ -18,6 +18,11 @@
 	export let enableAi = false
 	export let newFlow = false
 	export let disabledFlowInputs = false
+	export let savedFlow:
+		| (Flow & {
+				draft?: Flow | undefined
+		  })
+		| undefined = undefined
 
 	const {
 		selectedId,
@@ -140,6 +145,7 @@
 					bind:flowModule={$flowStore.value.modules[index]}
 					previousModule={$flowStore.value.modules[index - 1]}
 					{enableAi}
+					savedModule={savedFlow?.value.modules[index]}
 				/>
 			{/each}
 		{/key}

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

@@ -8,7 +8,7 @@
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { createScriptFromInlineScript, fork } from '$lib/components/flows/flowStateUtils'
 
-	import type { FlowModule } from '$lib/gen'
+	import type { FlowModule, RawScript } from '$lib/gen'
 	import FlowCard from '../common/FlowCard.svelte'
 	import FlowModuleHeader from './FlowModuleHeader.svelte'
 	import { getLatestHashForScript, scriptLangToEditorLang } from '$lib/scripts'
@@ -74,8 +74,10 @@
 	export let scriptTemplate: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' = 'script'
 	export let noEditor: boolean
 	export let enableAi: boolean
+	export let savedModule: FlowModule | undefined = undefined
 
 	let tag: string | undefined = undefined
+	let diffMode = false
 
 	let editor: Editor
 	let diffEditor: DiffEditor
@@ -98,6 +100,15 @@
 	let testIsLoading = false
 	let scriptProgress = undefined
 
+	$: lastDeployedCode = onModulesChange(savedModule, flowModule)
+	function onModulesChange(savedModule: FlowModule | undefined, flowModule: FlowModule) {
+		return savedModule?.value?.type === 'rawscript' &&
+			flowModule.value.type === 'rawscript' &&
+			savedModule.value.content !== flowModule.value.content
+			? savedModule.value.content
+			: undefined
+	}
+
 	const { modulesStore: copilotModulesStore } =
 		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
 
@@ -246,6 +257,20 @@
 	} else {
 		leftPanelSize = 100
 	}
+
+	function showDiffMode() {
+		diffMode = true
+		diffEditor?.setOriginal((savedModule?.value as RawScript).content ?? '')
+		diffEditor?.setModified(editor?.getCode() ?? '')
+		diffEditor?.show()
+		editor?.hide()
+	}
+
+	function hideDiffMode() {
+		diffMode = false
+		diffEditor?.hide()
+		editor?.show()
+	}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
@@ -323,6 +348,10 @@
 								acc[key] = obj.type === 'static' ? obj.value : undefined
 								return acc
 							}, {})}
+							on:showDiffMode={showDiffMode}
+							on:hideDiffMode={hideDiffMode}
+							{lastDeployedCode}
+							{diffMode}
 						/>
 					</div>
 				{/if}

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

@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { type FlowModule } from '$lib/gen'
+	import {
+		type BranchAll,
+		type BranchOne,
+		type FlowModule,
+		type ForloopFlow,
+		type WhileloopFlow
+	} from '$lib/gen'
 	import { getContext } from 'svelte'
 
 	import type { FlowEditorContext } from '../types'
@@ -25,6 +31,7 @@
 	export let flowModule: FlowModule
 	export let noEditor: boolean = false
 	export let enableAi = false
+	export let savedModule: FlowModule | undefined = undefined
 
 	const { selectedId, flowStateStore, flowInputsStore, flowStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')
@@ -190,6 +197,7 @@
 			{scriptKind}
 			{scriptTemplate}
 			{enableAi}
+			{savedModule}
 		/>
 	{/if}
 {:else if flowModule.value.type === 'forloopflow' || flowModule.value.type == 'whileloopflow'}
@@ -199,6 +207,7 @@
 			bind:flowModule={flowModule.value.modules[index]}
 			bind:parentModule={flowModule}
 			previousModule={flowModule.value.modules[index - 1]}
+			savedModule={(savedModule?.value as ForloopFlow | WhileloopFlow).modules[index]}
 			{enableAi}
 		/>
 	{/each}
@@ -215,6 +224,7 @@
 				bind:flowModule={flowModule.value.default[index]}
 				bind:parentModule={flowModule}
 				previousModule={flowModule.value.default[index - 1]}
+				savedModule={flowModule.value.default[index]}
 				{enableAi}
 			/>
 		{/each}
@@ -235,6 +245,7 @@
 					bind:flowModule={flowModule.value.branches[branchIndex].modules[index]}
 					bind:parentModule={flowModule}
 					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}
+					savedModule={(savedModule?.value as BranchOne).branches[branchIndex].modules[index]}
 					{enableAi}
 				/>
 			{/each}
@@ -252,6 +263,7 @@
 					bind:parentModule={flowModule}
 					previousModule={flowModule.value.branches[branchIndex].modules[index - 1]}
 					{enableAi}
+					savedModule={(savedModule?.value as BranchAll).branches[branchIndex].modules[index]}
 				/>
 			{/each}
 		{/if}