add code block component

src/Umbraco.Web.UI.Client/src/mocks/data/template.data.ts

@@ -109,18 +109,19 @@ export const createTemplateScaffold = (masterTemplateAlias: string) => {
 }`;
 };
 
+//prettier-ignore
 const templateQueryExpressions = [
-	`Umbraco.ContentAtRoot().FirstOrDefault()
-    .ChildrenOfType("docTypeWithTemplate")
-    .Where(x => x.IsVisible())`,
-	`Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544"))
-    .ChildrenOfType("docTypeWithTemplate")
-    .Where(x => x.IsVisible())`,
-	`Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544"))
-    .ChildrenOfType("docTypeWithTemplate")
-    .Where(x => (x.Id > 5))
-    .Where(x => x.IsVisible())
-    .OrderByDescending(x => x.UpdateDate)`,
+`Umbraco.ContentAtRoot().FirstOrDefault()
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => x.IsVisible())`,
+`Umbraco.Content(Guid.Parse("0b3498dc-255a-4d62-aa4f-ef7bff333544"))
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => x.IsVisible())`,
+`Umbraco.ContentAtRoot().FirstOrDefault()
+.ChildrenOfType("docTypeWithTemplate")
+.Where(x => (x.Id != -6))
+.Where(x => x.IsVisible())
+.OrderBy(x => x.UpdateDate)`,
 ];
 
 const randomIndex = () => Math.floor(Math.random() * 3);

src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.element.ts

@@ -1,23 +1,67 @@
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	html,
+	LitElement,
+	customElement,
+	property,
+	queryAssignedNodes,
+	state,
+} from '@umbraco-cms/backoffice/external/lit';
+
+//TODO consider adding a highlight prop to the code block, that could spin up/access monaco instance and highlight the code
 
 /**
- *  A simple styled box for showing code-based error messages.
+ *  A simple styled box for showing code-based error messages or blocks od code.
  *  @slot the full message
  *
  */
 @customElement('umb-code-block')
 export class UmbCodeBlockElement extends LitElement {
+	@property()
+	language = '';
+
+	@property({ type: Boolean })
+	copy = false;
+
+	@queryAssignedNodes()
+	nodes!: NodeListOf<ChildNode>;
+
+	@state()
+	copyState: 'idle' | 'success' = 'idle';
+
+	async copyCode() {
+		const text = this.textContent;
+		if (text) {
+			await navigator.clipboard.writeText(text);
+			this.copyState = 'success';
+			setTimeout(() => {
+				this.copyState = 'idle';
+			}, 2000);
+		}
+	}
+
 	render() {
-		return html`<div id="container">
+		return html`
+			${this.language
+				? html`<div id="header">
+						<span id="lang">${this.language}</span> ${this.copy
+							? html`<button @click=${this.copyCode}>
+									${this.copyState === 'idle'
+										? html`<uui-icon name="copy"></uui-icon>Copy`
+										: html`<uui-icon name="check"></uui-icon>Copied!`}
+							  </button>`
+							: ''}
+				  </div>`
+				: ''}
 			<uui-scroll-container>
-				<pre>
+				<pre style="${this.language ? 'border-top: 1px solid var(--uui-color-divider-emphasis);' : ''}">
 					<code>
 						<slot></slot>
 					</code>
 				</pre>
 			</uui-scroll-container>
-		</div> `;
+		`;
 	}
 
 	static styles = [
@@ -25,27 +69,65 @@ export class UmbCodeBlockElement extends LitElement {
 		css`
 			:host {
 				display: block;
-				font-family: monospace;
-			}
-
-			#container {
 				border: 1px solid var(--uui-color-divider-emphasis);
 				color: var(--uui-color-text-alt);
-				background-color: var(--uui-color-divider-standalone);
-				padding: var(--uui-size-space-2);
 				border-radius: var(--uui-border-radius);
 				line-height: var(--uui-size-10);
 			}
+
 			:host uui-scroll-container {
 				max-height: 500px;
 				overflow-y: auto;
 				overflow-wrap: anywhere;
 			}
 			pre {
-				max-width: 100%;
-				white-space: pre-line;
-				word-break: break-word;
-				overflow-wrap: break-word;
+				font-family: monospace;
+				background-color: var(--uui-color-surface-alt);
+				color: #303033;
+				display: block;
+				font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
+				margin: 0;
+				overflow-x: auto;
+				padding: 9.5px;
+				white-space: pre-wrap;
+			}
+
+			pre code {
+				word-wrap: normal;
+				background-color: transparent;
+				border: 0;
+				padding: 0;
+				white-space: pre;
+			}
+
+			#header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				background-color: var(--uui-color-surface-alt);
+			}
+
+			#lang {
+				margin-left: 16px;
+				font-weight: bold;
+				text-transform: uppercase;
+			}
+
+			button {
+				font-family: inherit;
+				padding: 6px 16px;
+				background-color: transparent;
+				border: none;
+				border-left: 1px solid var(--uui-color-divider-emphasis);
+				border-radius: 0;
+				color: #000;
+				display: flex;
+				align-items: center;
+				gap: 8px;
+			}
+
+			button:hover {
+				background-color: var(--uui-color-surface-emphasis);
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/src/packages/core/components/code-block/code-block.stories.ts

@@ -1,11 +1,14 @@
 import { Meta, StoryObj } from '@storybook/web-components';
-import { html } from '@umbraco-cms/backoffice/external/lit';
 import './code-block.element.js';
 import type { UmbCodeBlockElement } from './code-block.element.js';
+import { html } from '@umbraco-cms/backoffice/external/lit';
 
 const meta: Meta<UmbCodeBlockElement> = {
 	title: 'Components/Code Block',
 	component: 'umb-code-block',
+	parameters: {
+		layout: 'centered',
+	},
 };
 
 export default meta;

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -4,7 +4,7 @@ export * from './backoffice-modal-container/backoffice-modal-container.element.j
 export * from './backoffice-notification-container/backoffice-notification-container.element.js';
 export * from './body-layout/body-layout.element.js';
 export * from './button-with-dropdown/button-with-dropdown.element.js'; // TODO: delete this and change usage to umb-dropdown
-// export * from './code-block.js';
+export * from './code-block/index.js';
 export * from './data-type/index.js';
 export * from './input-date/index.js';
 export * from './dropdown/index.js';

src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts

@@ -246,8 +246,13 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 								  >`
 								: ''}
 						</div>
-						<div class="row">N items returned, in 0 ms</div>
-						<code> ${this._templateQuery?.queryExpression ?? ''} </code>
+						<div class="row">
+							<span id="results-count"
+								>${this._templateQuery?.resultCount ?? 0} items returned, in ${this._templateQuery?.executionTime ?? 0}
+								ms</span
+							>
+						</div>
+						<umb-code-block language="C#" copy> ${this._templateQuery?.queryExpression ?? ''} </umb-code-block>
 					</uui-box>
 				</div>
 
@@ -297,6 +302,10 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 				flex-direction: column;
 				justify-content: flex-start;
 			}
+
+			#results-count {
+				font-weight: bold;
+			}
 		`,
 	];
 }