From 006e7353ce75509cf99cff548e6dde09263e52d3 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Tue, 17 Jan 2023 19:10:06 +0100
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20Select=20the=20first=20row=20b?=
 =?UTF-8?q?y=20default,=20and=20remove=20the=20abilit=E2=80=A6=20(#1121)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): Select the first row by default, and remove the ability to deselect + fix table header z-index

* fix(frontend): restore z-index, under the floating tags
---
 frontend/src/lib/components/Tooltip.svelte         |  4 +++-
 .../apps/components/table/AppTable.svelte          | 14 ++++----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index 5663d8f827..4afad97a05 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -12,7 +12,9 @@
 
 <Popover notClickable {placement} class={wrapperClass}>
 	<Icon
-		class="{light ? 'text-gray-300' : ' text-gray-500'} font-thin inline-block align-middle w-4 {$$props.class}"
+		class="{light
+			? 'text-gray-300'
+			: ' text-gray-500'} font-thin inline-block align-middle w-4 {$$props.class}"
 		data={faInfoCircle}
 		{scale}
 	/>
diff --git a/frontend/src/lib/components/apps/components/table/AppTable.svelte b/frontend/src/lib/components/apps/components/table/AppTable.svelte
index c4738779e7..9d6cb6bea8 100644
--- a/frontend/src/lib/components/apps/components/table/AppTable.svelte
+++ b/frontend/src/lib/components/apps/components/table/AppTable.svelte
@@ -27,7 +27,6 @@
 
 	let search: 'By Runnable' | 'By Component' | 'Disabled' | undefined = undefined
 	let searchValue = ''
-
 	let pagination: boolean | undefined = true
 
 	$: setSearch(searchValue)
@@ -47,13 +46,10 @@
 	const { worldStore, staticOutputs: staticOutputsStore } =
 		getContext<AppEditorContext>('AppEditorContext')
 
-	let selectedRowIndex = -1
+	let selectedRowIndex = 0
 
 	function toggleRow(row: Record<string, any>, rowIndex: number) {
-		if (selectedRowIndex === rowIndex) {
-			selectedRowIndex = -1
-			outputs.selectedRow.set(null)
-		} else {
+		if (selectedRowIndex !== rowIndex) {
 			selectedRowIndex = rowIndex
 			outputs?.selectedRow.set(row.original)
 		}
@@ -133,7 +129,7 @@
 
 			<div class="overflow-x-auto flex-1 w-full">
 				<table class="relative w-full border-b border-b-gray-200">
-					<thead class="sticky top-0 z-50 bg-gray-50 text-left">
+					<thead class="sticky top-0 z-40 bg-gray-50 text-left">
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -153,9 +149,7 @@
 								{/each}
 								{#if actionButtons.length > 0}
 									<th class="!p-0">
-										<span class="block px-4 py-4 text-sm font-semibold border-b">
-											Actions
-										</span>
+										<span class="block px-4 py-4 text-sm font-semibold border-b"> Actions </span>
 									</th>
 								{/if}
 							</tr>