feat(frontend): improve versions history by adding a diff viewer with… (#4261)

* feat(frontend): improve versions history by adding a diff viewer with the previous version

* feat(frontend): support diff with all previous versions

* feat(frontend): support diff with all previous versions

* feat(frontend): improving version diff

* feat(frontend): improve UI

frontend/src/lib/components/ScriptVersionHistory.svelte

@@ -8,7 +8,9 @@
 	import FlowModuleScript from './flows/content/FlowModuleScript.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
-	import { ExternalLink, Pencil, ArrowRight, X } from 'lucide-svelte'
+	import { ExternalLink, Pencil, ArrowRight, X, Diff, Code } from 'lucide-svelte'
+	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 
 	const dispatch = createEventDispatcher()
 
@@ -19,6 +21,7 @@
 	let deploymentMsgUpdate: string | undefined = undefined
 
 	let selectedVersion: ScriptHistory | undefined = undefined
+	let selectedVersionIndex: number | undefined = undefined
 	let versions: ScriptHistory[] | undefined = undefined
 	let loading: boolean = false
 
@@ -53,6 +56,9 @@
 	}
 
 	loadVersions()
+
+	let showDiff: boolean = false
+	let previousHash: string | undefined = undefined
 </script>
 
 <Splitpanes class="!overflow-visible">
@@ -62,17 +68,34 @@
 				{#if !loading}
 					{#if versions && versions.length > 0}
 						<div class="flex gap-2 flex-col">
-							{#each versions ?? [] as version}
+							{#each versions ?? [] as version, versionIndex}
 								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
 								<div
 									class={classNames(
-										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer ',
 										selectedVersion?.script_hash == version.script_hash
-											? 'bg-blue-100 text-blue-600'
-											: ''
+											? 'bg-surface-selected'
+											: '',
+										'hover:bg-surface-hover'
 									)}
 									on:click={() => {
 										selectedVersion = version
+										selectedVersionIndex = versionIndex
+
+										if (showDiff && versions && selectedVersionIndex === versions.length - 1) {
+											showDiff = false
+										}
+
+										const availableVersions = versions?.slice(selectedVersionIndex + 1)
+
+										if (
+											previousHash &&
+											!availableVersions?.find((v) => v.script_hash === previousHash)
+										) {
+											previousHash = availableVersions?.[0]?.script_hash
+										}
+
 										deploymentMsgUpdate = undefined
 										deploymentMsgUpdateMode = false
 									}}
@@ -168,7 +191,41 @@
 								</button>
 							{/if}
 						</span>
-						<FlowModuleScript showDate path={scriptPath} hash={selectedVersion.script_hash} />
+
+						{#if selectedVersionIndex !== undefined && versions?.slice(selectedVersionIndex + 1).length}
+							<div class="p-2 flex flex-row items-center gap-2 h-8">
+								<div class="w-min">
+									<ToggleButtonGroup bind:selected={showDiff}>
+										<ToggleButton light small value={false} label="Code" icon={Code} />
+										<ToggleButton light small value={true} label="Diff" icon={Diff} />
+									</ToggleButtonGroup>
+								</div>
+
+								{#if showDiff}
+									<div class="text-xs">Versions:</div>
+									<select bind:value={previousHash} class="!text-xs !w-40">
+										{#each versions?.slice(selectedVersionIndex + 1) ?? [] as version}
+											<option
+												value={version.script_hash}
+												selected={version.script_hash === selectedVersion.script_hash}
+												class="!text-xs"
+											>
+												{version.deployment_msg ?? version.script_hash}
+											</option>
+										{/each}
+									</select>
+								{/if}
+							</div>
+						{:else}
+							<div class="p-2 text-xs text-secondary"> No previous version found </div>
+						{/if}
+						<FlowModuleScript
+							showDate
+							path={scriptPath}
+							hash={selectedVersion.script_hash}
+							{previousHash}
+							{showDiff}
+						/>
 					</div>
 				{/key}
 			{:else}

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SupportedLanguage } from '$lib/common'
+	import DiffEditor from '$lib/components/DiffEditor.svelte'
 	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import TimeAgo from '$lib/components/TimeAgo.svelte'
 	import { ScriptService } from '$lib/gen'
@@ -8,10 +9,12 @@
 
 	export let path: string
 	export let hash: string | undefined = undefined
+	export let previousHash: string | undefined = undefined
 	export let showDate = false
 	export let showAllCode: boolean = true
 
 	let code: string
+	let previousCode: string
 	let language: SupportedLanguage
 	let lock: string | undefined = undefined
 	let date: string | undefined = undefined
@@ -24,6 +27,7 @@
 				? await ScriptService.getScriptByHash({ workspace: $workspaceStore!, hash })
 				: await getScriptByPath(path!)
 			code = script.content
+
 			language = script.language
 			lock = script.lock
 			date = script.created_at
@@ -33,11 +37,26 @@
 		}
 	}
 
+	async function loadPreviousCode(previousHash: string) {
+		try {
+			const previousScript = await ScriptService.getScriptByHash({
+				workspace: $workspaceStore!,
+				hash: previousHash
+			})
+			previousCode = previousScript.content
+		} catch (e) {
+			console.error(e)
+		}
+	}
+
 	$: path && loadCode(path, hash)
+	$: path && previousHash && loadPreviousCode(previousHash)
 
 	function toggleShowAll() {
 		showAllCode = !showAllCode
 	}
+
+	export let showDiff: boolean = false
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto p-2">
@@ -47,7 +66,20 @@
 	{#if notFound}
 		<div class="text-red-400">script not found at {path} in workspace {$workspaceStore}</div>
 	{:else if showAllCode}
-		<HighlightCode {language} {code} />
+		{#if showDiff}
+			{#key previousCode + code}
+				<DiffEditor
+					class="h-80"
+					readOnly
+					automaticLayout
+					defaultLang={language}
+					defaultOriginal={previousCode}
+					defaultModified={code}
+				/>
+			{/key}
+		{:else}
+			<HighlightCode {language} {code} />
+		{/if}
 	{:else}
 		<div class="code-container h-full">
 			<HighlightCode {language} code={code?.split('\n').slice(0, 10).join('\n')} />

frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte

@@ -475,7 +475,7 @@
 
 {#if script}
 	<Drawer bind:open={versionsDrawerOpen} size="1200px">
-		<DrawerContent title="Versions History" on:close={() => (versionsDrawerOpen = false)}>
+		<DrawerContent title="Versions History" on:close={() => (versionsDrawerOpen = false)} noPadding>
 			<ScriptVersionHistory
 				scriptPath={script.path}
 				openDetails