From 801f2a8299956f0debe95bb13faef798a0ea0b08 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 15 Aug 2023 10:46:33 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20Fix=20toast=20when=20adding=20?=
 =?UTF-8?q?a=20user=20+=20set=20default=20vscoode=20the=E2=80=A6=20(#2080)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): Fix toast when adding a user + set default vscoode theme variable + fix DisplayResult componnet

* fix(frontend): handle both encoding

* fix(frontend): add all editorHoverWidget classes
---
 frontend/src/lib/components/AddUser.svelte    | 11 ++++---
 .../src/lib/components/DisplayResult.svelte   | 32 ++++++++++++++-----
 frontend/tailwind.config.cjs                  | 12 ++++++-
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte
index cdde727e82..11f1a75d3a 100644
--- a/frontend/src/lib/components/AddUser.svelte
+++ b/frontend/src/lib/components/AddUser.svelte
@@ -113,11 +113,12 @@
 			color="blue"
 			size="sm"
 			on:click={() => {
-				addUser()
-				// @ts-ignore
-				email = undefined
-				// @ts-ignore
-				username = undefined
+				addUser().then(() => {
+					// @ts-ignore
+					email = undefined
+					// @ts-ignore
+					username = undefined
+				})
 			}}
 			disabled={email === undefined || username === undefined}
 		>
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index dcf2c34fe2..d2548e490c 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -113,6 +113,14 @@
 
 	let jsonViewer: Drawer
 	$: jsonStr = JSON.stringify(result, null, 4)
+
+	function contentOrRootString(obj: string | { filename: string; content: string }) {
+		if (typeof obj === 'string') {
+			return obj
+		} else {
+			return obj.content
+		}
+	}
 </script>
 
 <div class="inline-highlight">
@@ -190,15 +198,19 @@
 				{/if}
 			</div>
 		{:else if !forceJson && resultKind == 'png'}
-			<div class="h-full"
-				><img alt="png rendered" class="w-auto h-full" src="data:image/png;base64,{result.png}" />
+			<div class="h-full">
+				<img
+					alt="png rendered"
+					class="w-auto h-full"
+					src="data:image/png;base64,{contentOrRootString(result.png)}"
+				/>
 			</div>
 		{:else if !forceJson && resultKind == 'jpeg'}
-			<div class="h-full"
-				><img
+			<div class="h-full">
+				<img
 					alt="jpeg rendered"
 					class="w-auto h-full"
-					src="data:image/jpeg;base64,{result.jpeg}"
+					src="data:image/jpeg;base64,{contentOrRootString(result.jpeg)}"
 				/>
 			</div>
 		{:else if !forceJson && resultKind == 'svg'}
@@ -207,14 +219,18 @@
 			</div>
 			<div class="h-full overflow-auto">{@html result.svg} </div>
 		{:else if !forceJson && resultKind == 'gif'}
-			<div class="h-full"
-				><img alt="gif rendered" class="w-auto h-full" src="data:image/gif;base64,{result.gif}" />
+			<div class="h-full">
+				<img
+					alt="gif rendered"
+					class="w-auto h-full"
+					src="data:image/gif;base64,{contentOrRootString(result.gif)}"
+				/>
 			</div>
 		{:else if !forceJson && resultKind == 'file'}
 			<div
 				><a
 					download={result.filename ?? 'windmill.file'}
-					href="data:application/octet-stream;base64,{result.file}">Download</a
+					href="data:application/octet-stream;base64,{contentOrRootString(result.file)}">Download</a
 				>
 			</div>
 		{:else if !forceJson && resultKind == 'error' && result?.error}<div
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 5ed75cf34d..949031a465 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -495,6 +495,11 @@ const config = {
 					'--color-border': lightThemeRgb.border,
 					'--color-border-hover': lightThemeRgb.borderHover,
 
+					'--vscode-editorSuggestWidget-background': '#f3f3f3',
+					'--vscode-editorHoverWidget-foreground': '#616161',
+					'--vscode-editorHoverWidget-border': '#c8c8c8',
+					'--vscode-editorHoverWidget-statusBarBackground': '#e7e7e7',
+
 					[`@media (min-width: ${theme('screens.qhd')})`]: {
 						fontSize: theme('fontSize.lg')
 					},
@@ -526,7 +531,12 @@ const config = {
 						'--color-text-disabled-inverse': lightThemeRgb.textDisabled,
 
 						'--color-border': darkThemeRgb.border,
-						'--color-border-hover': darkThemeRgb.borderHover
+						'--color-border-hover': darkThemeRgb.borderHover,
+
+						'--vscode-editorSuggestWidget-background': '#252526',
+						'--vscode-editorHoverWidget-foreground': '#cccccc',
+						'--vscode-editorHoverWidget-border': '#454545',
+						'--vscode-editorHoverWidget-statusBarBackground': '#2c2c2d'
 					}
 				},
 				h1: {