From 57c423f63a5a80c53fb5d427a75b474eb2f09821 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 25 Jan 2024 16:07:57 +0100
Subject: [PATCH] Feature: Render Template Query Item Samples

---
 .../modals/query-builder/query-builder.element.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
index 819f033a4b..915b5e241c 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts
@@ -260,12 +260,15 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 								  </uui-button>`
 								: ''}
 						</div>
-						<div class="row">
+						<div class="row query-results">
 							<span id="results-count">
 								${this._templateQuery?.resultCount ?? 0}
 								<umb-localize key="template_itemsReturned">items returned, in</umb-localize>
 								${this._templateQuery?.executionTime ?? 0} ms
 							</span>
+							${this._templateQuery?.sampleResults.map(
+								(sample) => html`<span><uui-icon name=${sample.icon}></uui-icon>${sample.name}</span>`,
+							) ?? ''}
 						</div>
 						<umb-code-block language="C#" copy>${this._templateQuery?.queryExpression ?? ''}</umb-code-block>
 					</uui-box>
@@ -322,6 +325,16 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 			#results-count {
 				font-weight: bold;
 			}
+			.query-results {
+				flex-direction: column;
+				align-items: flex-start;
+				gap: 0;
+			}
+			.query-results span {
+				display: flex;
+				align-items: center;
+				gap: var(--uui-size-1);
+			}
 		`,
 	];
 }