From 5f28e938df75ccd2b7a2d48eda0c3a6f0aa765dd Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 14 Mar 2024 12:42:13 +0100
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20use=20the=20DisplayResult=20c?=
 =?UTF-8?q?omponent=20in=20the=20Expanded=20resul=E2=80=A6=20(#3410)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(frontend): use the DisplayResult component in the Expanded result drawer

* fix(frontend): Fix table-row styling
---
 .../src/lib/components/DisplayResult.svelte   | 35 +++++++------------
 .../lib/components/table/AutoDataTable.svelte |  2 +-
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 8fbd7081af..230cc10943 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -199,7 +199,7 @@
 	}
 
 	$: isTableDisplay = isArrayWithObjects(result)
-	let richRender: boolean = true
+	let richRender: boolean = !forceJson
 
 	type InputObject = { [key: string]: number[] }
 
@@ -295,7 +295,7 @@
 				<AutoDataTable objects={transform(data)} />
 			{:else if !forceJson && resultKind == 'table-row'}
 				{@const data = 'table-row' in result ? result['table-row'] : result}
-				<div class="grid grid-flow-col-dense border border-gray-200">
+				<div class="grid grid-flow-col-dense border border-gray-200 dark:border-gray-600">
 					<TableCustom>
 						<tbody slot="body">
 							{#each Array.isArray(asListOfList(data)) ? asListOfList(data) : [] as row}
@@ -570,27 +570,16 @@
 							Copy to clipboard
 						</Button>
 					</svelte:fragment>
-					{#if largeObject}
-						<div class="text-sm mb-2 text-tertiary">
-							<a
-								class="text-sm text-secondary mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
-								download="{filename ?? 'result'}.json"
-								href={workspaceId && jobId
-									? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-									: `data:text/json;charset=utf-8,${encodeURIComponent(result)}`}
-								>Download <Download size={14} /></a
-							> JSON is too large to be displayed in full.
-						</div>
-					{:else if typeof result == 'string' && result.length > 0}
-						<pre class="text-sm">{result}</pre>
-						<div class="flex">
-							<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-								<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-							</Button>
-						</div>
-					{:else}
-						<Highlight language={json} code={toJsonStr(result).replace(/\\n/g, '\n')} />
-					{/if}
+					<svelte:self
+						{result}
+						{requireHtmlApproval}
+						{filename}
+						{jobId}
+						{workspaceId}
+						{hideAsJson}
+						{forceJson}
+						disableExpand={true}
+					/>
 				</DrawerContent>
 			</Drawer>
 		</Portal>
diff --git a/frontend/src/lib/components/table/AutoDataTable.svelte b/frontend/src/lib/components/table/AutoDataTable.svelte
index 1c4ff0447e..007b73860a 100644
--- a/frontend/src/lib/components/table/AutoDataTable.svelte
+++ b/frontend/src/lib/components/table/AutoDataTable.svelte
@@ -114,7 +114,7 @@
 
 <div class="w-full" bind:clientWidth={wrapperWidth}>
 	<div class="flex flex-col gap-2 py-2 my-2" style={`max-width: ${wrapperWidth}px;`}>
-		<div class="flex flex-row justify-between items-center">
+		<div class="flex flex-row justify-between items-center gap-2">
 			<div class="flex flex-row gap-2 items-center whitespace-nowrap w-full">
 				<input bind:value={search} placeholder="Search..." class="h-8 !text-xs" />
 				{#if selection.length > 0}