From 89cb5befc6f390d232a12e4396b2ea0b84319c50 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Thu, 25 Apr 2024 17:49:46 +0200
Subject: [PATCH] Rich result buttons (#3485)

* Rich result buttons

* Fix rich result button

* feat(frontend): improve rich display buttons

* Icon to monitor

* Custom tooltip

* End Monitor

* Tooltip file fixed

---------

Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 .../src/lib/components/DisplayResult.svelte   | 15 ++++-
 frontend/src/lib/components/Tooltip.svelte    |  3 +-
 .../components/scriptEditor/LogPanel.svelte   | 56 +++++++++++--------
 3 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index f209224f27..ff60092eb6 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -26,6 +26,7 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import MapResult from './MapResult.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	export let result: any
 	export let requireHtmlApproval = false
@@ -303,12 +304,20 @@
 				<div class="text-tertiary text-xs flex gap-2 z-10 items-center">
 					<slot name="copilot-fix" />
 					{#if !disableExpand && !noControls}
+						<Tooltip documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering" customSize="115%">
+							The result renderer in Windmill supports rich display rendering, allowing you to customize the display format of your results.
+						</Tooltip>
 						<button on:click={() => copyToClipboard(toJsonStr(result))}
-							><ClipboardCopy size={16} /></button
-						>
-						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
+							class="-mt-1">
+							<ClipboardCopy size={16} />
+						</button>
+						<button on:click={jsonViewer.openDrawer}
+							class="-mt-1">
+							<Expand size={16} />
+						</button>
 					{/if}
 				</div>
+										
 			</div>{#if !forceJson && resultKind == 'table-col'}
 				{@const data = 'table-col' in result ? result['table-col'] : result}
 				<AutoDataTable objects={transform(data)} />
diff --git a/frontend/src/lib/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
index ec0d2da41d..92294de81f 100644
--- a/frontend/src/lib/components/Tooltip.svelte
+++ b/frontend/src/lib/components/Tooltip.svelte
@@ -10,10 +10,11 @@
 	export let documentationLink: string | undefined = undefined
 	export let small = false
 	export let markdownTooltip: string | undefined = undefined
+	export let customSize: string = '100%';
 	const plugins = [gfmPlugin()]
 </script>
 
-<Popover notClickable {placement} class={wrapperClass}>
+<Popover notClickable {placement} class={wrapperClass} style="transform: scale({parseFloat(customSize) / 100});" >
 	<div
 		class="inline-flex w-3 mx-0.5 {light
 			? 'text-tertiary-inverse'
diff --git a/frontend/src/lib/components/scriptEditor/LogPanel.svelte b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
index 12b15d6627..286bef2287 100644
--- a/frontend/src/lib/components/scriptEditor/LogPanel.svelte
+++ b/frontend/src/lib/components/scriptEditor/LogPanel.svelte
@@ -26,6 +26,8 @@
 	import DataTable from '../table/DataTable.svelte'
 	import Head from '../table/Head.svelte'
 	import WorkflowTimeline from '../WorkflowTimeline.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+
 
 	export let lang: Preview['language'] | undefined
 	export let previewIsLoading = false
@@ -117,31 +119,39 @@
 					<Pane>
 						{#if previewJob != undefined && 'result' in previewJob}
 							<div class="relative w-full h-full p-2">
-								<DisplayResult
-									workspaceId={previewJob?.workspace_id}
-									jobId={previewJob?.id}
-									result={previewJob.result}
-								>
-									<svelte:fragment slot="copilot-fix">
-										{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
-											<ScriptFix
-												error={JSON.stringify(previewJob.result.error)}
-												{lang}
-												{editor}
-												{diffEditor}
-												{args}
-											/>
-										{/if}
-									</svelte:fragment>
-								</DisplayResult>
+								<div class="relative">
+									<DisplayResult
+										workspaceId={previewJob?.workspace_id}
+										jobId={previewJob?.id}
+										result={previewJob.result}
+									>
+										<svelte:fragment slot="copilot-fix">
+											{#if lang && editor && diffEditor && args && previewJob?.result && typeof previewJob?.result == 'object' && `error` in previewJob?.result && previewJob?.result.error}
+												<ScriptFix
+													error={JSON.stringify(previewJob.result.error)}
+													{lang}
+													{editor}
+													{diffEditor}
+													{args}
+												/>
+											{/if}
+										</svelte:fragment>
+									</DisplayResult>
+								</div>
 							</div>
 						{:else}
-							<div class="text-sm text-tertiary p-2">
-								{#if previewIsLoading}
-									<Loader2 class="animate-spin" />
-								{:else}
-									Test to see the result here
-								{/if}
+							<div class="text-sm text-tertiary p-2 flex justify-between items-center">
+								<span>
+									{#if previewIsLoading}
+										<Loader2 class="animate-spin" />
+									{:else}
+										Test to see the result here
+									{/if}
+								</span>
+								<Tooltip documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering">
+									The result renderer in Windmill supports rich display rendering, allowing you to customize the display format of your results.
+								</Tooltip>
+
 							</div>
 						{/if}
 					</Pane>