feat: script versions history

frontend/src/lib/components/EditorBar.svelte

@@ -9,6 +9,7 @@
 		faBook,
 		faCube,
 		faDollarSign,
+		faHistory,
 		faPlus,
 		faRotate,
 		faRotateLeft
@@ -35,6 +36,7 @@
 	import { Link, Users } from 'lucide-svelte'
 	import { capitalize } from '$lib/utils'
 	import type { Schema, SchemaProperty } from '$lib/common'
+	import ScriptVersionHistory from './ScriptVersionHistory.svelte'
 
 	export let lang: 'python3' | 'deno' | 'go' | 'bash'
 	export let editor: Editor | undefined
@@ -52,6 +54,7 @@
 	export let collabMode = false
 	export let collabLive = false
 	export let collabUsers: { name: string }[] = []
+	export let scriptPath: string | undefined = undefined
 
 	let contextualVariablePicker: ItemPicker
 	let variablePicker: ItemPicker
@@ -125,8 +128,18 @@
 		}
 		return rec(schema.properties, true)
 	}
+
+	let historyBrowserDrawerOpen = false
 </script>
 
+{#if scriptPath}
+	<Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
+		<DrawerContent title="Versions History" on:close={() => (historyBrowserDrawerOpen = false)}>
+			<ScriptVersionHistory {scriptPath} />
+		</DrawerContent>
+	</Drawer>
+{/if}
+
 <Drawer bind:this={scriptPicker} size="900px">
 	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
 		{#if pick_existing == 'hub'}
@@ -471,20 +484,36 @@
 		</div>
 	</div>
 
-	{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
-		<Button
-			btnClasses="!font-medium text-gray-600"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={scriptPicker.openDrawer}
-			{iconOnly}
-			startIcon={{ icon: faBook }}
-			title="Explore other scripts"
-		>
-			Library
-		</Button>
-	{/if}
+	<div class="flex flex-row items-center gap-2">
+		{#if scriptPath}
+			<Button
+				btnClasses="!font-medium text-gray-600"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={() => (historyBrowserDrawerOpen = true)}
+				{iconOnly}
+				startIcon={{ icon: faHistory }}
+				title="See history"
+			>
+				History
+			</Button>
+		{/if}
+		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
+			<Button
+				btnClasses="!font-medium text-gray-600"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={scriptPicker.openDrawer}
+				{iconOnly}
+				startIcon={{ icon: faBook }}
+				title="Explore other scripts"
+			>
+				Library
+			</Button>
+		{/if}
+	</div>
 </div>
 
 <style lang="postcss">

frontend/src/lib/components/ScriptEditor.svelte

@@ -223,6 +223,7 @@
 <div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
+			scriptPath={edit ? path : undefined}
 			on:toggleCollabMode={() => {
 				if (wsProvider?.shouldConnect) {
 					disableCollaboration()

frontend/src/lib/components/ScriptVersionHistory.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import PanelSection from './apps/editor/settingsPanel/common/PanelSection.svelte'
+	import { classNames } from '$lib/utils'
+	import { ScriptService } from '$lib/gen'
+	import { workspaceStore } from '$lib/stores'
+	import { Skeleton } from '$lib/components/common'
+	import FlowModuleScript from './flows/content/FlowModuleScript.svelte'
+
+	export let scriptPath: string
+
+	let selectedVersion: string | undefined = undefined
+	let versions: string[] | undefined = undefined
+
+	async function loadVersions() {
+		versions = (
+			await ScriptService.getScriptByPath({ workspace: $workspaceStore!, path: scriptPath })
+		).parent_hashes
+	}
+
+	loadVersions()
+</script>
+
+<Splitpanes class="!overflow-visible">
+	<Pane size={20}>
+		<PanelSection title="Past Versions">
+			<div class="flex flex-col gap-2 w-full">
+				{#if versions}
+					{#if versions.length > 0}
+						<div class="flex gap-2 flex-col">
+							{#each versions ?? [] as version}
+								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<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',
+										selectedVersion == version ? 'bg-blue-100 text-blue-600' : ''
+									)}
+									on:click={() => (selectedVersion = version)}
+								>
+									<span class="text-xs truncate">{version}</span>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="text-sm text-gray-500">No items</div>
+					{/if}
+				{:else}
+					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+				{/if}
+			</div>
+		</PanelSection>
+	</Pane>
+	<Pane size={80}>
+		<div class="h-full w-full overflow-auto">
+			{#if selectedVersion}
+				{#key selectedVersion}
+					<FlowModuleScript path={scriptPath} hash={selectedVersion} />
+				{/key}
+			{:else}
+				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+			{/if}
+		</div>
+	</Pane>
+</Splitpanes>

frontend/src/lib/components/apps/editor/AppEditorHeader.svelte

@@ -532,7 +532,7 @@
 </Drawer>
 
 <Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
-	<DrawerContent title="Deployment History" on:close={() => historyBrowserDrawerOpen}>
+	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
 		<DeploymentHistory on:restore {versions} />
 	</DrawerContent>
 </Drawer>