From ad6c3e5ceeead564efaaaff7e111bbd9d68e4127 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 29 Dec 2023 03:21:11 +0100
Subject: [PATCH] small UX nits

---
 .../src/lib/components/ScriptBuilder.svelte   | 16 +++-
 .../components/common/button/Button.svelte    |  4 +
 .../ConfirmationModal.svelte                  |  2 +-
 .../common/fileInput/FileInput.svelte         |  1 -
 .../(root)/(logged)/resources/+page.svelte    | 92 ++++++++++---------
 5 files changed, 65 insertions(+), 50 deletions(-)

diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index 0859802840..9b08936824 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -179,7 +179,7 @@
 		}
 	}
 
-	async function editScript(): Promise<void> {
+	async function editScript(stay: boolean): Promise<void> {
 		loadingSave = true
 		try {
 			try {
@@ -223,7 +223,11 @@
 			})
 			savedScript = cloneDeep(script) as NewScriptWithDraft
 			history.replaceState(history.state, '', `/scripts/edit/${script.path}`)
-			goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
+			if (stay) {
+				script.parent_hash = newHash
+			} else {
+				goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
+			}
 		} catch (error) {
 			sendUserToast(`Error while saving the script: ${error.body || error.message}`, true)
 		}
@@ -332,6 +336,12 @@
 		let dropdownItems: { label: string; onClick: () => void }[] =
 			initialPath != ''
 				? [
+						{
+							label: 'Deploy & Stay here',
+							onClick: () => {
+								editScript(true)
+							}
+						},
 						{
 							label: 'Fork',
 							onClick: () => {
@@ -1007,7 +1017,7 @@
 						loading={loadingSave}
 						size="xs"
 						startIcon={{ icon: Save }}
-						on:click={() => editScript()}
+						on:click={() => editScript(false)}
 						dropdownItems={computeDropdownItems(initialPath)}
 					>
 						Deploy
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 434f3f37f4..65645f2002 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -49,6 +49,10 @@
 		}
 	}
 
+	export function focus() {
+		element?.focus({})
+	}
+
 	const dispatch = createEventDispatcher()
 	// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 	const colorVariants: Record<ButtonType.Color, Record<ButtonType.Variant, string>> = {
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index 49c529f699..f5f899e70f 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -34,7 +34,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window on:keydown|capture={onKeyDown} />
 
 {#if open}
 	<div
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index b86767e3e7..cd9fe6e76e 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -4,7 +4,6 @@
 	import Button from '../../common/button/Button.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import type { ReadFileAs } from './model'
-	import { sendUserToast } from '$lib/toast'
 
 	type ConvertedFile = string | ArrayBuffer | null
 
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 92aeaa41c0..0569a049fe 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -192,7 +192,7 @@
 			OauthService.disconnectAccount({ workspace: $workspaceStore!, id: account })
 		}
 		await ResourceService.deleteResource({ workspace: $workspaceStore!, path })
-		loadResources()
+		reload()
 	}
 
 	async function addResourceType(): Promise<void> {
@@ -312,8 +312,53 @@
 		inferrer?.closeDrawer?.()
 	}
 	let deploymentDrawer: DeployWorkspaceDrawer
+
+	async function reload() {
+		loading = {
+			resources: true,
+			types: true
+		}
+		if (tab == 'cache') {
+			await loadCache()
+		} else if (tab == 'states') {
+			await loadState()
+		} else {
+			await loadResources()
+		}
+		await loadResourceTypes()
+		loading = {
+			resources: false,
+			types: false
+		}
+	}
 </script>
 
+<ConfirmationModal
+	open={Boolean(deleteConfirmedCallback)}
+	title="Remove resource"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove this resource?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing a resource to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>
+
 <DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 
 <Portal>
@@ -541,24 +586,7 @@
 			<Button
 				variant="border"
 				color="light"
-				on:click={async () => {
-					loading = {
-						resources: true,
-						types: true
-					}
-					if (tab == 'cache') {
-						await loadCache()
-					} else if (tab == 'states') {
-						await loadState()
-					} else {
-						await loadResources()
-					}
-					await loadResourceTypes()
-					loading = {
-						resources: false,
-						types: false
-					}
-				}}
+				on:click={reload}
 				startIcon={{
 					icon: RotateCw,
 					classes: loading.resources || loading.types ? 'animate-spin' : ''
@@ -888,29 +916,3 @@
 		loadResources()
 	}}
 />
-
-<ConfirmationModal
-	open={Boolean(deleteConfirmedCallback)}
-	title="Remove resource"
-	confirmationText="Remove"
-	on:canceled={() => {
-		deleteConfirmedCallback = undefined
-	}}
-	on:confirmed={() => {
-		if (deleteConfirmedCallback) {
-			deleteConfirmedCallback()
-		}
-		deleteConfirmedCallback = undefined
-	}}
->
-	<div class="flex flex-col w-full space-y-4">
-		<span>Are you sure you want to remove this resource?</span>
-		<Alert type="info" title="Bypass confirmation">
-			<div>
-				You can press
-				<Badge color="dark-gray">SHIFT</Badge>
-				while removing a resource to bypass confirmation.
-			</div>
-		</Alert>
-	</div>
-</ConfirmationModal>