feat(frontend): use the DisplayResult component in the Expanded resul… (#3410)

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

* fix(frontend): Fix table-row styling

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>

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}