From 39b3c575393bd10fabe14daec7b9782a3c379dea Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 23 Dec 2022 17:28:21 +0100
Subject: [PATCH] fix navigation on index list rows

---
 backend/windmill-api/src/jobs.rs              |  4 ++--
 frontend/src/lib/components/Dropdown.svelte   | 20 +++++++------------
 .../lib/components/common/menu/Menu.svelte    |  4 +++-
 .../lib/components/common/table/Row.svelte    | 18 ++++++++---------
 .../components/common/table/RowIcon.svelte    |  5 +++--
 5 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/backend/windmill-api/src/jobs.rs b/backend/windmill-api/src/jobs.rs
index bcf8b004ab..c655725984 100644
--- a/backend/windmill-api/src/jobs.rs
+++ b/backend/windmill-api/src/jobs.rs
@@ -63,7 +63,7 @@ pub fn workspaced_service() -> Router {
         .route("/completed/get_result/:id", get(get_completed_job_result))
         .route("/completed/delete/:id", post(delete_completed_job))
         .route("/get/:id", get(get_job))
-        .route("/flow/resume/:id", post(resume_suspended_job_as_owner))
+        .route("/flow/resume/:id", post(resume_suspended_flow_as_owner))
         .route("/getupdate/:id", get(get_job_update))
         .route(
             "/job_signature/:job_id/:resume_id",
@@ -455,7 +455,7 @@ async fn list_jobs(
     Ok(Json(jobs.into_iter().map(From::from).collect()))
 }
 
-pub async fn resume_suspended_job_as_owner(
+pub async fn resume_suspended_flow_as_owner(
     authed: Authed,
     Extension(db): Extension<DB>,
     Path((w_id, job_id)): Path<(String, Uuid)>,
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index ab8fc29a39..c8e8c53a32 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -28,8 +28,7 @@
 		{#each dropdownItems as item, i}
 			{#if item.action}
 				<button
-					on:click={(event) => {
-						event.preventDefault()
+					on:click|preventDefault|stopPropagation={(event) => {
 						if (!item.disabled) {
 							close()
 							item.action && item.action(event)
@@ -38,7 +37,7 @@
 					}}
 					class="block w-full  whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					 px-4 py-2 text-sm text-gray-700 text-left 
-					 {item.disabled ? 'bg-gray-100' : ''}
+					 {item.disabled ? 'bg-gray-200' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
 						? 'text-red-500'
@@ -60,14 +59,9 @@
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click={(e) => {
-						if (!item.disabled) {
-							close()
-						} else {
-							e.preventDefault()
-						}
-					}}
-					class="block w-full px-4 font-semibold  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+					on:click|stopPropagation
+					class="block w-full px-4 font-semibold text-left  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
@@ -85,11 +79,11 @@
 			{:else}
 				<span
 					class:bg-gray-50={item.disabled}
-					class="block  px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class="block  text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
-					on:click|preventDefault
+					on:click|preventDefault|stopPropagation
 				>
 					{#if item.icon}
 						<Icon
diff --git a/frontend/src/lib/components/common/menu/Menu.svelte b/frontend/src/lib/components/common/menu/Menu.svelte
index b26da298dd..37ccc4ac29 100644
--- a/frontend/src/lib/components/common/menu/Menu.svelte
+++ b/frontend/src/lib/components/common/menu/Menu.svelte
@@ -15,6 +15,8 @@
 	function handleOutsideClick(event) {
 		if (show && !menu.contains(event.target)) {
 			show = false
+			event.preventDefault()
+			event.stopPropagation()
 		}
 	}
 
@@ -48,7 +50,7 @@
 
 <div class="relative" bind:this={menu}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div on:click={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
+	<div on:click|stopPropagation={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
 		<slot class="triggerable" name="trigger" />
 	</div>
 	{#if show}
diff --git a/frontend/src/lib/components/common/table/Row.svelte b/frontend/src/lib/components/common/table/Row.svelte
index 41ca1fef96..c2ad77cf8b 100644
--- a/frontend/src/lib/components/common/table/Row.svelte
+++ b/frontend/src/lib/components/common/table/Row.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation'
 	import Star from '$lib/components/Star.svelte'
 
 	import { createEventDispatcher } from 'svelte'
@@ -23,24 +24,21 @@
 	}[kind]
 </script>
 
-<a
-	class="hover:bg-gray-50 cursor-pointer w-full flex items-center p-4 gap-4 {color} rounded-md"
-	{href}
->
-	<RowIcon {kind} />
+<div class="hover:bg-gray-50 w-full inline-flex items-center p-4 gap-4 {color} rounded-md">
+	<RowIcon {href} {kind} />
 
-	<div class="w-full min-w-0 ">
-		<div class="text-gray-900 flex-wrap text-md font-semibold mb-1 truncate">
+	<a {href} class="w-full min-w-0 grow hover:underline decoration-gray-400">
+		<div class="text-gray-900 flex-wrap text-left text-md font-semibold mb-1 truncate ">
 			{#if marked}
 				{@html marked}
 			{:else}
 				{!summary || summary.length == 0 ? path : summary}
 			{/if}
 		</div>
-		<div class="text-gray-600 text-xs truncate">
+		<div class="text-gray-600 text-xs truncate text-left font-light">
 			{path}
 		</div>
-	</div>
+	</a>
 	<div class="w-96 hidden lg:flex flex-row max-w-xs gap-1 items-start flex-wrap">
 		<slot name="badges" />
 	</div>
@@ -61,4 +59,4 @@
 			/>
 		</div>
 	{/if}
-</a>
+</div>
diff --git a/frontend/src/lib/components/common/table/RowIcon.svelte b/frontend/src/lib/components/common/table/RowIcon.svelte
index 1e565a9c71..59f39d39b6 100644
--- a/frontend/src/lib/components/common/table/RowIcon.svelte
+++ b/frontend/src/lib/components/common/table/RowIcon.svelte
@@ -5,6 +5,7 @@
 	import Icon from 'svelte-awesome'
 
 	export let kind: 'script' | 'flow' | 'app'
+	export let href: string = '#'
 
 	const color = {
 		script: 'bg-blue-50 border-blue-200',
@@ -19,7 +20,7 @@
 	}[kind]
 </script>
 
-<div class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
+<a {href} class={classNames('rounded-md p-1 flex justify-center items-center border', color)}>
 	{#if kind === 'flow'}
 		<span class="ml-1 mb-0.5 -mt-0.5">
 			<Icon data={faBarsStaggered} scale={1.1} class="mr-0.5 text-[#14b8a6]" />
@@ -29,4 +30,4 @@
 	{:else if kind === 'script'}
 		<Code2 size={24} color={iconColor} />
 	{/if}
-</div>
+</a>