From 83f2ba44a856f2ab8411ef39bb48842e15c116fd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 7 Aug 2022 09:56:50 +0200
Subject: [PATCH] some reactive changes

---
 frontend/src/lib/components/ArgInput.svelte   | 19 ++++++++++++-------
 .../src/lib/components/FlowBuilder.svelte     |  2 +-
 .../lib/components/InputTransformForm.svelte  |  2 +-
 .../lib/components/ObjectResourceInput.svelte |  4 ++--
 .../src/lib/components/RadioButton.svelte     |  6 ++++--
 .../src/lib/components/SchemaEditor.svelte    |  2 +-
 .../lib/components/flows/FlowSettings.svelte  |  3 ++-
 .../src/routes/user/accept_invite@user.svelte |  2 +-
 .../routes/user/create_workspace@user.svelte  |  4 +++-
 frontend/src/routes/user/login@user.svelte    |  6 +-----
 .../login_callback/[client_name]@none.svelte  | 10 ++++------
 .../src/routes/user/workspaces@user.svelte    | 15 ++++++++++++---
 12 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index f042003a70..c953c2dfaa 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -139,7 +139,7 @@
 	$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding)
 </script>
 
-<div class="flex flex-col w-full">
+<div class="flex flex-col w-full mb-2">
 	<div>
 		{#if displayHeader}
 			<FieldHeader {label} {required} {type} {contentEncoding} {format} {itemsType} />
@@ -183,13 +183,18 @@
 		{/if}
 
 		<div class="grid grid-cols-2">
-			<div class="text-sm italic pb-1">
-				{description}
-			</div>
-			<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
-				{error === '' ? '...' : error}
-			</div>
+			{#if description || error}
+				<div class="text-sm italic pb-1">
+					{description}
+				</div>
+				<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
+					{error === '' ? '...' : error}
+				</div>
+			{:else}
+				<div class="mt-1" />
+			{/if}
 		</div>
+
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				<input
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index b431070997..251f504caa 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -224,7 +224,7 @@
 	<div class={`relative h-screen w-1/3 ${previewOpen ? '' : 'hidden'}`}>
 		<div class="absolute top-0 h-full">
 			{#if $flowStore && step === 1}
-				<div class="fixed border-l-2 right-0 h-screen w-1/3">
+				<div class="fixed border-l-2 right-0 h-screen w-1/2 sm:w-1/3">
 					<FlowPreviewContent
 						bind:args={scheduleArgs}
 						on:close={() => (previewOpen = !previewOpen)}
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index b451824f87..1a9b41722c 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -90,7 +90,7 @@
 </script>
 
 {#if arg != undefined}
-	<div class="flex justify-between items-center">
+	<div class="flex justify-between items-center mb-2">
 		<div class="flex items-center">
 			<FieldHeader
 				label={argName}
diff --git a/frontend/src/lib/components/ObjectResourceInput.svelte b/frontend/src/lib/components/ObjectResourceInput.svelte
index 874562ea2c..5c337ec978 100644
--- a/frontend/src/lib/components/ObjectResourceInput.svelte
+++ b/frontend/src/lib/components/ObjectResourceInput.svelte
@@ -58,8 +58,8 @@
 	$: value && valueToPath()
 </script>
 
-<div class="flex flex-row w-full gap-2">
-	<div class="shrink w-40">
+<div class="flex flex-row w-full flex-wrap gap-x-2">
+	<div class="shrink">
 		<RadioButton
 			options={[
 				[`Resource (${resourceTypeName})`, 'resource'],
diff --git a/frontend/src/lib/components/RadioButton.svelte b/frontend/src/lib/components/RadioButton.svelte
index f963bed3ed..c7c6ffe02b 100644
--- a/frontend/src/lib/components/RadioButton.svelte
+++ b/frontend/src/lib/components/RadioButton.svelte
@@ -15,7 +15,7 @@
 		{#each options as [label, val]}
 			<label
 				class:item-button-selected={val == value}
-				class="item-button text-center text-sm h-full p-2 grow"
+				class="item-button text-center text-sm h-full p-2 grow whitespace-nowrap"
 			>
 				<input
 					type="radio"
@@ -26,7 +26,9 @@
 					on:click={() => dispatch('change', val)}
 				/>
 				<p>
-					{#if typeof label !== 'string'}{label.title} <Tooltip>{label.desc}</Tooltip>
+					{#if typeof label !== 'string'}
+						{label.title}
+						<Tooltip>{label.desc}</Tooltip>
 					{:else}{label}{/if}
 				</p>
 			</label>
diff --git a/frontend/src/lib/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
index f577b87f0e..face2f7bfd 100644
--- a/frontend/src/lib/components/SchemaEditor.svelte
+++ b/frontend/src/lib/components/SchemaEditor.svelte
@@ -138,7 +138,7 @@
 </script>
 
 <div class="flex flex-col">
-	<div class="flex justify-between">
+	<div class="flex justify-between gap-x-2">
 		<Button
 			on:click={() => {
 				modalProperty = Object.assign({}, DEFAULT_PROPERTY)
diff --git a/frontend/src/lib/components/flows/FlowSettings.svelte b/frontend/src/lib/components/flows/FlowSettings.svelte
index 93cb7ba58b..641c90e2c6 100644
--- a/frontend/src/lib/components/flows/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/FlowSettings.svelte
@@ -166,12 +166,13 @@
 						right: 'enabled'
 					}}
 				/>
-				<div class="p-2 mt-2 rounded" class:bg-gray-300={!scheduleEnabled}>
+				<div class="p-2 my-2 rounded" class:bg-gray-300={!scheduleEnabled}>
 					{#if !scheduleEnabled}
 						<span class="font-black">No next scheduled run when disabled</span>
 					{/if}
 					<CronInput bind:schedule={scheduleCron} />
 				</div>
+
 				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
 			</CollapseLink>
 		{/if}
diff --git a/frontend/src/routes/user/accept_invite@user.svelte b/frontend/src/routes/user/accept_invite@user.svelte
index 0bf95200ed..5de5e8c612 100644
--- a/frontend/src/routes/user/accept_invite@user.svelte
+++ b/frontend/src/routes/user/accept_invite@user.svelte
@@ -23,7 +23,7 @@
 		sendUserToast(`Invitation to ${workspace_id} accepted as ${username}`)
 		usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces())
 		workspaceStore.set(workspace_id)
-		goto('/scripts')
+		goto($page.url.searchParams.get('rd') ?? '/scripts')
 	}
 
 	async function validateName(username: string): Promise<void> {
diff --git a/frontend/src/routes/user/create_workspace@user.svelte b/frontend/src/routes/user/create_workspace@user.svelte
index 58a1de15e5..6969ce76d3 100644
--- a/frontend/src/routes/user/create_workspace@user.svelte
+++ b/frontend/src/routes/user/create_workspace@user.svelte
@@ -9,6 +9,8 @@
 	import { usersWorkspaceStore, workspaceStore } from '$lib/stores'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 
+	const rd = $page.url.searchParams.get('rd')
+
 	let id = ''
 	let name = ''
 	let username = ''
@@ -53,7 +55,7 @@
 		sendUserToast(`Successfully created workspace id: ${id}`)
 		usersWorkspaceStore.set(await WorkspaceService.listUserWorkspaces())
 		workspaceStore.set(id)
-		goto('/')
+		goto(rd ?? '/')
 	}
 
 	function handleKeyUp(event: KeyboardEvent) {
diff --git a/frontend/src/routes/user/login@user.svelte b/frontend/src/routes/user/login@user.svelte
index 599dd0f65d..a347577b8e 100644
--- a/frontend/src/routes/user/login@user.svelte
+++ b/frontend/src/routes/user/login@user.svelte
@@ -49,11 +49,7 @@
 
 	function redirectUser() {
 		if ($workspaceStore) {
-			if (rd) {
-				goto(decodeURI(rd))
-			} else {
-				goto('/')
-			}
+			goto(rd ?? '/')
 		} else {
 			goto('/user/workspaces')
 		}
diff --git a/frontend/src/routes/user/login_callback/[client_name]@none.svelte b/frontend/src/routes/user/login_callback/[client_name]@none.svelte
index ef97231493..a11a54195f 100644
--- a/frontend/src/routes/user/login_callback/[client_name]@none.svelte
+++ b/frontend/src/routes/user/login_callback/[client_name]@none.svelte
@@ -17,7 +17,9 @@
 
 	onMount(async () => {
 		const rd = localStorage.getItem('rd')
-		localStorage.removeItem('rd')
+		if (rd) {
+			localStorage.removeItem('rd')
+		}
 		if (error) {
 			sendUserToast(`Error trying to login with ${clientName} ${error}`, true)
 			goto('/user/login')
@@ -31,11 +33,7 @@
 			}
 			if ($workspaceStore) {
 				$userStore = await getUserExt($workspaceStore)
-				if (rd) {
-					goto(rd)
-				} else {
-					goto('/')
-				}
+				goto(rd ?? '/')
 			} else {
 				if (rd) {
 					goto('/user/workspaces?rd=' + encodeURIComponent(rd))
diff --git a/frontend/src/routes/user/workspaces@user.svelte b/frontend/src/routes/user/workspaces@user.svelte
index 5dd5b3b047..a61cde770a 100644
--- a/frontend/src/routes/user/workspaces@user.svelte
+++ b/frontend/src/routes/user/workspaces@user.svelte
@@ -22,6 +22,7 @@
 	let invites: WorkspaceInvite[] = []
 	let list_all_as_super_admin: boolean = false
 	let workspaces: { id: string; name: string; username: string }[] = []
+	const rd = $page.url.searchParams.get('rd')
 
 	async function loadInvites() {
 		try {
@@ -98,7 +99,7 @@
 					"
 				on:click={() => {
 					workspaceStore.set(workspace.id)
-					goto($page.url.searchParams.get('rd') ?? '/scripts')
+					goto(rd ?? '/scripts')
 				}}
 				><span class="font-mono">{workspace.id}</span> - {workspace.name} as
 				<span class="font-mono">{workspace.username}</span>
@@ -106,7 +107,11 @@
 		</label>
 	{/each}
 	<div class="flex flex-row-reverse  pt-4">
-		<a href="/user/create_workspace" class="primary-button">Create a new workspace &rightarrow; </a>
+		<a
+			href="/user/create_workspace{rd ? `?rd=${encodeURIComponent(rd)}` : ''}"
+			class="primary-button"
+			>Create a new workspace &rightarrow;
+		</a>
 	</div>
 	<h2 class="my-2">Invitations</h2>
 	<p class="text-xs mb-2 italic text-gray-500">Join a workspace</p>
@@ -140,7 +145,11 @@
 				{/if}
 			</span>
 			<span>
-				<a href="/user/accept_invite?workspace={encodeURIComponent(invite.workspace_id)}">
+				<a
+					href="/user/accept_invite?workspace={encodeURIComponent(invite.workspace_id)}{rd
+						? `&rd=${encodeURIComponent(rd)}`
+						: ''}"
+				>
 					accept
 				</a>