fix(frontend): Fix rich result styling + add title and hideDetails config (#2294)

frontend/src/lib/components/DisplayResult.svelte

@@ -14,6 +14,7 @@
 	export let disableExpand = false
 	export let jobId: string | undefined = undefined
 	export let workspaceId: string | undefined = undefined
+	export let disableDetails = false
 
 	let resultKind:
 		| 'json'
@@ -132,15 +133,18 @@
 				>
 				<slot name="copilot-fix" />
 			</div>
-		{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 w-full min-w-[400px] text-sm relative"
-				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
-				{#if !disableExpand}
-					<div class="text-tertiary text-xs absolute top-5.5 right-0 inline-flex gap-2">
-						<button on:click={() => copyToClipboard(jsonStr)}><ClipboardCopy size={16} /></button>
-						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
-					</div>
-				{/if}
+		{/if}
+		{#if typeof result == 'object' && Object.keys(result).length > 0}
+			<div class="mb-2 w-full min-w-[400px] text-sm relative">
+			{#if !disableDetails}
+			The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
+			{/if}
+			{#if !disableExpand}
+				<div class="text-tertiary text-xs absolute top-5.5 right-0 inline-flex gap-2">
+					<button on:click={() => copyToClipboard(jsonStr)}><ClipboardCopy size={16} /></button>
+					<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
+				</div>
+			{/if}
 			</div>{/if}{#if !forceJson && resultKind == 'table-col'}<div
 				class="grid grid-flow-col-dense border rounded-md"
 			>
@@ -296,6 +300,7 @@
 	{/if}
 </div>
 
+
 {#if !disableExpand}
 	<Portal>
 		<Drawer bind:this={jsonViewer} size="900px">

frontend/src/lib/components/apps/components/display/AppDisplayComponent.svelte

@@ -2,27 +2,38 @@
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppInput } from '../../inputType'
 	import {
 		IS_APP_PUBLIC_CONTEXT_KEY,
 		type AppViewerContext,
-		type ComponentCustomCSS
+		type ComponentCustomCSS,
+
+		type RichConfigurations
+
 	} from '../../types'
 	import RunnableWrapper from '../helpers/RunnableWrapper.svelte'
 	import { initCss } from '../../utils'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let componentInput: AppInput | undefined
 	export let initializing: boolean | undefined = undefined
 	export let customCss: ComponentCustomCSS<'displaycomponent'> | undefined = undefined
 	export let render: boolean
+	export let configuration: RichConfigurations
 
 	const requireHtmlApproval = getContext<boolean | undefined>(IS_APP_PUBLIC_CONTEXT_KEY)
 	const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
 	let result: any = undefined
 
+	const resolvedConfig = initConfig(
+		components['displaycomponent'].initialData.configuration,
+		configuration
+	)
+	
 	$componentControl[id] = {
 		setValue(value: string) {
 			result = value
@@ -37,6 +48,15 @@
 	let css = initCss($app.css?.displaycomponent, customCss)
 </script>
 
+{#each Object.keys(components['displaycomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
 {#each Object.keys(css ?? {}) as key (key)}
 	<ResolveStyle
 		{id}
@@ -57,7 +77,7 @@
 			)}
 			style={css?.header?.style}
 		>
-			Results
+			{resolvedConfig?.title ?? 'Result'}
 		</div>
 		<div
 			style={twMerge(
@@ -71,7 +91,7 @@
 				customCss?.container?.class
 			)}
 		>
-			<DisplayResult {result} {requireHtmlApproval} />
+			<DisplayResult {result} {requireHtmlApproval} disableExpand={resolvedConfig?.hideDetails} disableDetails={resolvedConfig?.hideDetails}/>
 		</div>
 	</div>
 </RunnableWrapper>

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -271,7 +271,6 @@
 	$: $cssEditorOpen && secondaryMenuLeft?.open(StylePanel, {})
 
 	function animateCssInput(cssEditorOpen: boolean) {
-		console.log(cssEditorOpen, cssToggled)
 		if (cssEditorOpen && !cssToggled) {
 			cssToggled = true
 

frontend/src/lib/components/apps/editor/component/Component.svelte

@@ -146,6 +146,7 @@
 				customCss={component.customCss}
 				bind:initializing
 				componentInput={component.componentInput}
+				configuration={component.configuration}
 				{render}
 			/>
 		{:else if component.type === 'logcomponent'}

frontend/src/lib/components/apps/editor/component/components.ts

@@ -476,7 +476,20 @@ export const components = {
 				fieldType: 'object',
 				value: { foo: 42 }
 			},
-			configuration: {}
+			configuration: {
+				title: {
+					type: 'static',
+					fieldType: 'text',
+					value: 'Result'
+				},
+				hideDetails: {
+					type: 'static',
+					fieldType: 'boolean',
+					value: false,
+					tooltip:
+						'Hide the details section: the object keys, the clipboard button and the maximise button'
+				}
+			}
 		}
 	},
 	jobidlogcomponent: {

frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -25,7 +25,7 @@
 	let tab: 'local' | 'global' = 'local'
 	let overrideGlobalCSS: (() => void) | undefined = undefined
 	let overrideLocalCSS: (() => void) | undefined = undefined
-	let type = component?.type
+	$: type = component?.type
 	let migrationModal: CssMigrationModal | undefined = undefined
 
 	$: customCssByComponentType =