From a18081256e289c3766fe053524abef9a0cf8a0fb Mon Sep 17 00:00:00 2001
From: Julia Gru <56249914+julczka@users.noreply.github.com>
Date: Thu, 1 Jun 2023 10:57:52 +0200
Subject: [PATCH] cleanup

---
 .../templating-insert-menu.element.ts         | 22 +++++----
 .../insert-choose-type-sidebar.element.ts     | 49 ++++++++++++-------
 .../insert-section-input.element.ts           |  4 --
 .../template-workspace-editor.element.ts      | 19 ++-----
 .../workspace/template-workspace.element.ts   | 28 +----------
 5 files changed, 48 insertions(+), 74 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
index 562e118215..87f5246c9b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/components/insert-menu/templating-insert-menu.element.ts
@@ -103,14 +103,14 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
 		});
 	}
 
-	// #openInsertPartialViewSidebar() {
-	// 	this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
-	// 	this.#openModal?.onSubmit().then((value) => {
-	// 		this.#getPartialViewSnippet(value).then(() => {
-	// 			this.#dispatchInsertEvent();
-	// 		});
-	// 	});
-	// }
+	#openInsertPartialViewSidebar() {
+		this.#openModal = this._modalContext?.open(UMB_PARTIAL_VIEW_PICKER_MODAL);
+		this.#openModal?.onSubmit().then((value) => {
+			this.#getPartialViewSnippet(value).then(() => {
+				this.#dispatchInsertEvent();
+			});
+		});
+	}
 
 	#openInsertDictionaryItemModal() {
 		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
@@ -143,15 +143,17 @@ export class UmbTemplatingInsertMenuElement extends UmbLitElement {
 					id="insert-button"
 					label="open insert menu">
 					<ul id="insert-menu" slot="dropdown">
+						<!-- 
+						TODO: uncomment when insert value has endpoint and is properly implemented	
 						<li>
 							<uui-menu-item
 								class="insert-menu-item"
 								target="_blank"
 								label="Value"
 								title="Value"
-								@click=${this.#openInsertValueSidebar}>
+								>
 							</uui-menu-item>
-						</li>
+						</li> -->
 
 						<li>
 							<uui-menu-item
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
index 0ce9baf0a3..0fbfd81a32 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-choose-type-sidebar.element.ts
@@ -74,26 +74,44 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	}
 
 	#openInsertDictionaryItemModal() {
-		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {pickableFilter: item => item.id !== null});
+		this.#openModal = this._modalContext?.open(UMB_DICTIONARY_ITEM_PICKER_MODAL, {
+			pickableFilter: (item) => item.id !== null,
+		});
 		this.#openModal?.onSubmit().then((dictionaryItemPickerModalResult) => {
 			if (dictionaryItemPickerModalResult)
 				this.modalHandler?.submit({ value: dictionaryItemPickerModalResult, type: CodeSnippetType.dictionaryItem });
 		});
 	}
 
+	//TODO: insert this when we have insert value implemented
+	#renderInsertValueButton() {
+		return html`<uui-button @click=${this.#openInsertValueSidebar} look="placeholder" label="Insert value"
+			><h3>Value</h3>
+			<p>
+				Displays the value of a named field from the current page, with options to modify the value or fallback to
+				alternative values.
+			</p></uui-button
+		>`;
+	}
+
+	//TODO: insert this when we have partial views
+	#renderInsertPartialViewButton() {
+		return html`${this.data?.hidePartialViews
+			? ''
+			: html`<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
+					><h3>Partial view</h3>
+					<p>
+						A partial view is a separate template file which can be rendered inside another template, it's great for
+						reusing markup or for separating complex templates into separate files.
+					</p></uui-button
+			  >`}`;
+	}
+
 	render() {
 		return html`
 			<umb-body-layout headline="Insert">
 				<div id="main">
 					<uui-box>
-						<uui-button @click=${this.#openInsertValueSidebar} look="placeholder" label="Insert value"
-							><h3>Value</h3>
-							<p>
-								Displays the value of a named field from the current page, with options to modify the value or fallback
-								to alternative values.
-							</p></uui-button
-						>
-
 						<uui-button @click=${this.#openInsertDictionaryItemModal} look="placeholder" label="Insert Dictionary item"
 							><h3>Dictionary item</h3>
 							<p>
@@ -138,16 +156,9 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement
 	];
 }
 
-//TODO: insert this when we have partial views
-// ${this.data?.hidePartialViews
-// 	? ''
-// 	: html`<uui-button @click=${this.#openInsertPartialViewSidebar} look="placeholder" label="Insert value"
-// 			><h3>Partial view</h3>
-// 			<p>
-// 				A partial view is a separate template file which can be rendered inside another template, it's great
-// 				for reusing markup or for separating complex templates into separate files.
-// 			</p></uui-button
-// 	  >`}
+
+
+
 
 declare global {
 	interface HTMLElementTagNameMap {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts
index 96f4d400e6..11bfedf8be 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/modals/insert-section-modal/insert-section-input.element.ts
@@ -31,10 +31,6 @@ export class UmbInsertSectionCheckboxElement extends UUIBooleanInputElement {
 	@property({ attribute: false })
 	snippetMethod?: (value: string, isMandatory: boolean) => string;
 
-	firstUpdated() {
-		console.log(this.snippetMethod);
-	}
-
 	validate() {
 		if (!this.form) return true;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
index a1b2616331..7e28459fc3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
@@ -1,3 +1,4 @@
+import camelCase from 'lodash-es/camelCase.js';
 import { UmbTemplatingInsertMenuElement } from '../../components/insert-menu/templating-insert-menu.element.js';
 import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element.js';
 import type { UmbCodeEditorElement } from '../../../core/components/code-editor/code-editor.element.js';
@@ -7,8 +8,6 @@ import { css, html, customElement, query, state, nothing } from '@umbraco-cms/ba
 import { UMB_MODAL_CONTEXT_TOKEN, UMB_TEMPLATE_PICKER_MODAL, UmbModalContext } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { Subject, debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
-import camelCase from 'lodash-es/camelCase.js';
-//import { UmbCodeEditorElement } from '@umbraco-cms/backoffice/components';
 
 @customElement('umb-template-workspace-editor')
 export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
@@ -72,7 +71,6 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 			});
 
 			this.inputQuery$.pipe(debounceTime(250)).subscribe((nameInputValue) => {
-				console.log(nameInputValue);
 				this.#templateWorkspaceContext?.setName(nameInputValue);
 				if (this.#isNew && !this._alias) this.#templateWorkspaceContext?.setAlias(camelCase(nameInputValue));
 			});
@@ -124,8 +122,6 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
 		const layoutBlockRegex = /(@{[\s\S][^if]*?Layout\s*?=\s*?)("[^"]*?"|null)(;[\s\S]*?})/gi;
 		const masterTemplate = await this.#templateWorkspaceContext?.setMasterTemplate(id);
 
-		//root item selected
-
 		//Reset master template or is did not exist and the declaration exists
 		if (masterTemplate === null && layoutBlockRegex.test(this._content)) {
 			const string = this._content?.replace(layoutBlockRegex, `$1null$3`);
@@ -194,10 +190,6 @@ ${this._content}`;
 			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
 	}
 
-	#save() {
-		this.#templateWorkspaceContext?.save();
-	}
-
 	render() {
 		// TODO: add correct UI elements
 		return html`<umb-workspace-editor alias="Umb.Workspace.Template">
@@ -207,17 +199,14 @@ ${this._content}`;
 					.value=${this._alias}
 					@change=${this.#onAliasInput}></umb-template-alias-input
 			></uui-input>
-			<uui-button @click=${this.#save} .color=${'danger'} look="primary"
-				>TEMPORARY SAVE BUTTON - REMOVE ME WHEN THE ACTION IS BACK</uui-button
-			>
 			<uui-box>
 				<div slot="header" id="code-editor-menu-container">
 					${this.#renderMasterTemplatePicker()}
 					<div>
 						<umb-templating-insert-menu @insert=${this.#insertSnippet}></umb-templating-insert-menu>
-						<uui-button look="secondary" id="query-builder-button" label="Query builder">
+						<!-- <uui-button look="secondary" id="query-builder-button" label="Query builder">
 							<uui-icon name="umb:wand"></uui-icon>Query builder
-						</uui-button>
+						</uui-button> -->
 						<uui-button
 							look="secondary"
 							id="sections-button"
@@ -259,6 +248,8 @@ ${this._content}`;
 				min-height: calc(100dvh - 300px);
 				margin: var(--uui-size-layout-1);
 				--uui-box-default-padding: 0;
+				/* remove header border bottom as code editor looks better in this box */
+				--uui-color-divider-standalone: transparent;
 			}
 
 			uui-input {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts
index a6672e9d08..3be7284fb8 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts
@@ -1,6 +1,5 @@
 import { UmbTemplateWorkspaceContext } from './template-workspace.context.js';
-import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
-import { css, html , customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import type { IRoutingInfo, PageComponent, UmbRoute, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -45,31 +44,6 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
 				this.#routerPath = event.target.absoluteRouterPath;
 			}}></umb-router-slot>`;
 	}
-
-	static styles = [
-		UUITextStyles,
-		css`
-			:host {
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-
-			umb-code-editor {
-				--editor-height: calc(100vh - 300px);
-			}
-
-			uui-box {
-				margin: 1em;
-				--uui-box-default-padding: 0;
-			}
-
-			uui-input {
-				width: 100%;
-				margin: 1em;
-			}
-		`,
-	];
 }
 
 export default UmbTemplateWorkspaceElement;