From 16b1c33de5099b7cf128f7b2747cd06e4a54f321 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Mon, 11 Mar 2024 09:34:43 +0100
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20add=20script=20history=20in=20?=
 =?UTF-8?q?the=20script=20menu=20on=20the=20homepage=20=E2=80=A6=20(#3388)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): add script history in the script menu on the homepage + move test an iteration

* fix(frontend): fix Test an iteration position
---
 .../components/common/table/ScriptRow.svelte  | 30 ++++++++++++++++++-
 .../components/flows/content/FlowLoop.svelte  | 18 +++++++----
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index e3ac4fd51c..31919452fa 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -29,8 +29,11 @@
 		List,
 		Pen,
 		Share,
-		Trash
+		Trash,
+		History
 	} from 'lucide-svelte'
+	import ScriptVersionHistory from '$lib/components/ScriptVersionHistory.svelte'
+	import { Drawer, DrawerContent } from '..'
 
 	export let script: Script & { canWrite: boolean }
 	export let marked: string | undefined
@@ -74,6 +77,7 @@
 	let scheduleEditor: ScheduleEditor
 
 	const dlt: 'delete' = 'delete'
+	let versionsDrawerOpen: boolean = false
 </script>
 
 {#if menuOpen}
@@ -209,6 +213,13 @@
 						icon: List,
 						href: `/runs/${script.path}`
 					},
+					{
+						displayName: 'Versions',
+						icon: History,
+						action: () => {
+							versionsDrawerOpen = true
+						}
+					},
 					{
 						displayName: 'Audit logs',
 						icon: Eye,
@@ -300,3 +311,20 @@
 		/>
 	</svelte:fragment>
 </Row>
+
+{#if script}
+	<Drawer bind:open={versionsDrawerOpen} size="1200px">
+		<DrawerContent title="Versions History" on:close={() => (versionsDrawerOpen = false)}>
+			<ScriptVersionHistory
+				scriptPath={script.path}
+				openDetails
+				on:openDetails={(e) => {
+					if (script) {
+						goto(`/scripts/get/${e.detail.version}?workspace=${$workspaceStore}`)
+					}
+					versionsDrawerOpen = false
+				}}
+			/>
+		</DrawerContent>
+	</Drawer>
+{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowLoop.svelte b/frontend/src/lib/components/flows/content/FlowLoop.svelte
index b66c83618e..75e58085dc 100644
--- a/frontend/src/lib/components/flows/content/FlowLoop.svelte
+++ b/frontend/src/lib/components/flows/content/FlowLoop.svelte
@@ -83,6 +83,7 @@
 						tooltip="For loops"
 						documentationLink="https://www.windmill.dev/docs/flows/flow_loops"
 						class="mb-4"
+						size="xs"
 					>
 						Add steps inside the loop and specify an iterator expression that defines the sequence
 						over which your subsequent steps will iterate.
@@ -129,8 +130,9 @@
 							/>
 						</div>
 					</div>
+
 					<div class="my-2 flex flex-row gap-2 items-center">
-						<div class="text-sm font-bold">
+						<div class="text-sm font-bold whitespace-nowrap">
 							Iterator expression
 							<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_loops">
 								List to iterate over.
@@ -157,7 +159,16 @@
 								pickableProperties={stepPropPicker.pickableProperties}
 							/>
 						{/if}
+						<div class="flex w-full justify-end">
+							<Button
+								on:click={() => (previewOpen = true)}
+								startIcon={{ icon: Play }}
+								color="dark"
+								size="sm">Test an iteration</Button
+							>
+						</div>
 					</div>
+
 					{#if mod.value.iterator.type == 'javascript'}
 						<!-- svelte-ignore a11y-no-static-element-interactions -->
 						<div
@@ -199,11 +210,6 @@
 						/>
 					{/if}
 				{/if}
-				<div class="flex mt-4">
-					<Button on:click={() => (previewOpen = true)} startIcon={{ icon: Play }} color="dark"
-						>Test an iteration</Button
-					>
-				</div>
 			</Pane>
 			<Pane size={40} minSize={20} class="flex flex-col flex-1">
 				<Tabs bind:selected>