@umbraco-cms/backoffice 14.0.0-d335c2c2 → 14.0.0-d542ed7d

package/dist-cms/packages/templating/templates/modals/query-builder/query-builder.element.js

@@ -0,0 +1,276 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { UmbTemplateRepository } from '../../repository/template.repository.js';
+import { UUITextStyles } from '../../../../../external/uui/index.js';
+import { css, html, customElement, state, query, queryAll } from '../../../../../external/lit/index.js';
+import { UmbModalBaseElement } from '../../../../../shared/modal/index.js';
+import { UMB_DOCUMENT_PICKER_MODAL, UMB_MODAL_MANAGER_CONTEXT_TOKEN, } from '../../../../core/modal/index.js';
+import { UmbDocumentRepository } from '../../../../documents/documents/index.js';
+var SortOrder;
+(function (SortOrder) {
+    SortOrder["Ascending"] = "ascending";
+    SortOrder["Descending"] = "descending";
+})(SortOrder || (SortOrder = {}));
+let UmbChooseInsertTypeModalElement = class UmbChooseInsertTypeModalElement extends UmbModalBaseElement {
+    #documentRepository;
+    #modalManagerContext;
+    #templateRepository;
+    constructor() {
+        super();
+        this._queryRequest = {};
+        this._selectedRootContentName = 'all pages';
+        this._defaultSortDirection = SortOrder.Descending;
+        this.#postTemplateQuery = async () => {
+            const { data, error } = await this.#templateRepository.postTemplateQueryExecute({
+                requestBody: this._queryRequest,
+            });
+            if (data)
+                this._templateQuery = { ...data };
+        };
+        this.#openDocumentPicker = () => {
+            this.#modalManagerContext
+                ?.open(UMB_DOCUMENT_PICKER_MODAL)
+                .onSubmit()
+                .then((result) => {
+                this.#updateQueryRequest({ rootContentId: result.selection[0] });
+                if (result.selection.length > 0 && result.selection[0] === null) {
+                    this._selectedRootContentName = 'all pages';
+                    return;
+                }
+                if (result.selection.length > 0) {
+                    this.#getDocumentItem(result.selection);
+                    return;
+                }
+            });
+        };
+        this.#addFilterElement = () => {
+            this._filterContainer?.appendChild(this.#createFilterElement());
+        };
+        this.#updateFilters = () => {
+            this.#updateQueryRequest({ filters: Array.from(this._filterElements)?.map((filter) => filter.filter) ?? [] });
+        };
+        this.#removeFilter = (event) => {
+            const target = event.target;
+            this._filterContainer?.removeChild(target);
+            this.#updateFilters();
+        };
+        this.#templateRepository = new UmbTemplateRepository(this);
+        this.#documentRepository = new UmbDocumentRepository(this);
+        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
+            this.#modalManagerContext = instance;
+        });
+        this.#init();
+    }
+    #init() {
+        this.#getTemplateQuerySettings();
+        this.#postTemplateQuery();
+    }
+    #close() {
+        this.modalContext?.reject();
+    }
+    #submit() {
+        this.modalContext?.submit({
+            value: this._templateQuery?.queryExpression ?? '',
+        });
+    }
+    #updateQueryRequest(update) {
+        this._queryRequest = { ...this._queryRequest, ...update };
+        this.#postTemplateQuery();
+    }
+    async #getTemplateQuerySettings() {
+        const { data, error } = await this.#templateRepository.getTemplateQuerySettings();
+        if (data)
+            this._queryBuilderSettings = data;
+    }
+    #postTemplateQuery;
+    #openDocumentPicker;
+    async #getDocumentItem(ids) {
+        const { data, error } = await this.#documentRepository.requestItemsLegacy(ids);
+        if (data) {
+            this._selectedRootContentName = data[0].name;
+        }
+    }
+    #createFilterElement() {
+        const filterElement = document.createElement('umb-query-builder-filter');
+        filterElement.settings = this._queryBuilderSettings;
+        filterElement.classList.add('row');
+        filterElement.addEventListener('add-filter', this.#addFilterElement);
+        filterElement.addEventListener('remove-filter', this.#removeFilter);
+        filterElement.addEventListener('update-query', this.#updateFilters);
+        return filterElement;
+    }
+    #setContentType(event) {
+        const target = event.target;
+        this.#updateQueryRequest({ contentTypeAlias: target.value ?? '' });
+        this._contentTypeDropdown.closePopover();
+    }
+    #setSortProperty(event) {
+        const target = event.target;
+        if (!this._queryRequest.sort)
+            this.#setSortDirection();
+        this.#updateQueryRequest({
+            sort: { ...this._queryRequest.sort, propertyAlias: target.value ?? '' },
+        });
+        this._sortDropdown.closePopover();
+    }
+    #setSortDirection() {
+        if (!this._queryRequest.sort?.direction) {
+            this.#updateQueryRequest({
+                sort: { ...this._queryRequest.sort, direction: this._defaultSortDirection },
+            });
+            return;
+        }
+        this.#updateQueryRequest({
+            sort: {
+                ...this._queryRequest.sort,
+                direction: this._queryRequest.sort?.direction === SortOrder.Ascending ? SortOrder.Descending : SortOrder.Ascending,
+            },
+        });
+    }
+    #addFilterElement;
+    #updateFilters;
+    #removeFilter;
+    render() {
+        return html `
+			<umb-body-layout headline="Query builder">
+				<div id="main">
+					<uui-box>
+						<div class="row">
+							I want
+							<umb-button-with-dropdown look="outline" id="content-type-dropdown" label="Choose content type"
+								>${this._queryRequest?.contentTypeAlias ?? 'all content'}
+								<uui-combobox-list slot="dropdown" @change=${this.#setContentType} class="options-list">
+									<uui-combobox-list-option value="">all content</uui-combobox-list-option>
+									${this._queryBuilderSettings?.contentTypeAliases?.map((alias) => html `<uui-combobox-list-option .value=${alias}
+												>content of type "${alias}"</uui-combobox-list-option
+											>`)}
+								</uui-combobox-list></umb-button-with-dropdown
+							>
+							from
+							<uui-button look="outline" @click=${this.#openDocumentPicker} label="Choose root content"
+								>${this._selectedRootContentName}
+							</uui-button>
+						</div>
+						<div id="filter-container">
+							<umb-query-builder-filter
+								unremovable
+								class="row"
+								.settings=${this._queryBuilderSettings}
+								@add-filter=${this.#addFilterElement}
+								@update-query=${this.#updateFilters}
+								@remove-filter=${this.#removeFilter}></umb-query-builder-filter>
+						</div>
+						<div class="row">
+							ordered by
+							<umb-button-with-dropdown look="outline" id="sort-dropdown" label="Property alias"
+								>${this._queryRequest.sort?.propertyAlias ?? ''}
+								<uui-combobox-list slot="dropdown" @change=${this.#setSortProperty} class="options-list">
+									${this._queryBuilderSettings?.properties?.map((property) => html `<uui-combobox-list-option .value=${property.alias ?? ''}
+												>${property.alias}</uui-combobox-list-option
+											>`)}
+								</uui-combobox-list></umb-button-with-dropdown
+							>
+
+							${this._queryRequest.sort?.propertyAlias
+            ? html `<uui-button look="outline" @click=${this.#setSortDirection}
+										>${this._queryRequest.sort.direction ?? this._defaultSortDirection}</uui-button
+								  >`
+            : ''}
+						</div>
+						<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>
+
+				<div slot="actions">
+					<uui-button @click=${this.#close} look="secondary" label="Close">Close</uui-button>
+					<uui-button @click=${this.#submit} look="primary" color="positive" label="Submit">Submit</uui-button>
+				</div>
+			</umb-body-layout>
+		`;
+    }
+    static { this.styles = [
+        UUITextStyles,
+        css `
+			:host {
+				display: block;
+				color: var(--uui-color-text);
+				--umb-header-layout-height: 70px;
+			}
+
+			#main {
+				box-sizing: border-box;
+				height: calc(
+					100dvh - var(--umb-header-layout-height) - var(--umb-footer-layout-height) - 2 * var(--uui-size-layout-1)
+				);
+			}
+
+			.options-list {
+				min-width: 30ch;
+				background-color: var(--uui-color-surface);
+				box-shadow: var(--uui-shadow-depth-3);
+			}
+
+			uui-combobox-list-option {
+				padding: 8px 20px;
+			}
+
+			.row {
+				display: flex;
+				gap: 10px;
+				border-bottom: 1px solid #f3f3f5;
+				align-items: center;
+				padding: 20px 0;
+			}
+
+			#filter-container {
+				flex-direction: column;
+				justify-content: flex-start;
+			}
+
+			#results-count {
+				font-weight: bold;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    query('#content-type-dropdown')
+], UmbChooseInsertTypeModalElement.prototype, "_contentTypeDropdown", void 0);
+__decorate([
+    query('#sort-dropdown')
+], UmbChooseInsertTypeModalElement.prototype, "_sortDropdown", void 0);
+__decorate([
+    query('#filter-container')
+], UmbChooseInsertTypeModalElement.prototype, "_filterContainer", void 0);
+__decorate([
+    queryAll('umb-query-builder-filter')
+], UmbChooseInsertTypeModalElement.prototype, "_filterElements", void 0);
+__decorate([
+    state()
+], UmbChooseInsertTypeModalElement.prototype, "_templateQuery", void 0);
+__decorate([
+    state()
+], UmbChooseInsertTypeModalElement.prototype, "_queryRequest", void 0);
+__decorate([
+    state()
+], UmbChooseInsertTypeModalElement.prototype, "_queryBuilderSettings", void 0);
+__decorate([
+    state()
+], UmbChooseInsertTypeModalElement.prototype, "_selectedRootContentName", void 0);
+__decorate([
+    state()
+], UmbChooseInsertTypeModalElement.prototype, "_defaultSortDirection", void 0);
+UmbChooseInsertTypeModalElement = __decorate([
+    customElement('umb-templating-query-builder-modal')
+], UmbChooseInsertTypeModalElement);
+export default UmbChooseInsertTypeModalElement;

package/dist-cms/packages/templating/templates/repository/sources/template.query-builder.server.data.d.ts

@@ -0,0 +1,33 @@
+import { TemplateQueryExecuteModel } from '../../../../../external/backend-api/index.js';
+import type { UmbControllerHostElement } from '../../../../../libs/controller-api/index.js';
+/**
+ * A data source for the Template Query Builder that fetches data from the server
+ * @export
+ * @class UmbTemplateQueryBuilderServerDataSource
+ */
+export declare class UmbTemplateQueryBuilderServerDataSource {
+    #private;
+    /**
+     * Creates an instance of UmbTemplateQueryBuilderServerDataSource.
+     * @param {UmbControllerHostElement} host
+     * @memberof UmbTemplateQueryBuilderServerDataSource
+     */
+    constructor(host: UmbControllerHostElement);
+    /**
+     * Fetches the query builder settings from the server
+     *
+     * @return {*}
+     * @memberof UmbTemplateQueryBuilderServerDataSource
+     */
+    getTemplateQuerySettings(): Promise<import("../../../../../shared/repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").TemplateQuerySettingsResponseModel>>;
+    /**
+     * Executes a query builder query on the server
+     *
+     * @param {{ requestBody?: TemplateQueryExecuteModel }} { requestBody }
+     * @return {*}
+     * @memberof UmbTemplateQueryBuilderServerDataSource
+     */
+    postTemplateQueryExecute({ requestBody }: {
+        requestBody?: TemplateQueryExecuteModel;
+    }): Promise<import("../../../../../shared/repository/index.js").DataSourceResponse<import("../../../../../external/backend-api/index.js").TemplateQueryResultResponseModel>>;
+}

package/dist-cms/packages/templating/templates/repository/sources/template.query-builder.server.data.js

@@ -0,0 +1,37 @@
+import { TemplateResource } from '../../../../../external/backend-api/index.js';
+import { tryExecuteAndNotify } from '../../../../../shared/resources/index.js';
+/**
+ * A data source for the Template Query Builder that fetches data from the server
+ * @export
+ * @class UmbTemplateQueryBuilderServerDataSource
+ */
+export class UmbTemplateQueryBuilderServerDataSource {
+    #host;
+    /**
+     * Creates an instance of UmbTemplateQueryBuilderServerDataSource.
+     * @param {UmbControllerHostElement} host
+     * @memberof UmbTemplateQueryBuilderServerDataSource
+     */
+    constructor(host) {
+        this.#host = host;
+    }
+    /**
+     * Fetches the query builder settings from the server
+     *
+     * @return {*}
+     * @memberof UmbTemplateQueryBuilderServerDataSource
+     */
+    async getTemplateQuerySettings() {
+        return tryExecuteAndNotify(this.#host, TemplateResource.getTemplateQuerySettings());
+    }
+    /**
+     * Executes a query builder query on the server
+     *
+     * @param {{ requestBody?: TemplateQueryExecuteModel }} { requestBody }
+     * @return {*}
+     * @memberof UmbTemplateQueryBuilderServerDataSource
+     */
+    async postTemplateQueryExecute({ requestBody }) {
+        return tryExecuteAndNotify(this.#host, TemplateResource.postTemplateQueryExecute({ requestBody }));
+    }
+}

package/dist-cms/packages/templating/templates/repository/template-item.store.js

@@ -17,7 +17,7 @@ export class UmbTemplateItemStore extends UmbStoreBase {
         super(host, UMB_TEMPLATE_ITEM_STORE_CONTEXT_TOKEN.toString(), new UmbArrayState([], (x) => x.id));
     }
     items(ids) {
-        return this._data.getObservablePart((items) => items.filter((item) => ids.includes(item.id ?? '')));
+        return this._data.asObservablePart((items) => items.filter((item) => ids.includes(item.id ?? '')));
     }
 }
 export const UMB_TEMPLATE_ITEM_STORE_CONTEXT_TOKEN = new UmbContextToken('UmbTemplateItemStore');

package/dist-cms/packages/templating/templates/repository/template.repository.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from '../../../../external/rxjs/index.js';
 import type { UmbDetailRepository, UmbItemRepository, UmbTreeRepository } from '../../../../shared/repository/index.js';
 import type { UmbControllerHostElement } from '../../../../libs/controller-api/index.js';
-import type { CreateTemplateRequestModel, EntityTreeItemResponseModel, ItemResponseModelBaseModel, TemplateItemResponseModel, TemplateResponseModel, UpdateTemplateRequestModel } from '../../../../external/backend-api/index.js';
+import type { CreateTemplateRequestModel, EntityTreeItemResponseModel, ItemResponseModelBaseModel, TemplateItemResponseModel, TemplateQueryExecuteModel, TemplateResponseModel, UpdateTemplateRequestModel } from '../../../../external/backend-api/index.js';
 export declare class UmbTemplateRepository implements UmbTreeRepository<EntityTreeItemResponseModel>, UmbDetailRepository<CreateTemplateRequestModel, string, UpdateTemplateRequestModel, TemplateResponseModel>, UmbItemRepository<TemplateItemResponseModel> {
     #private;
     constructor(host: UmbControllerHostElement);
@@ -38,12 +38,6 @@ export declare class UmbTemplateRepository implements UmbTreeRepository<EntityTr
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
         asObservable: () => Observable<EntityTreeItemResponseModel[]>;
     }>;
-    requestItems(ids: Array<string>): Promise<{
-        data: TemplateItemResponseModel[] | undefined;
-        error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
-        asObservable: () => Observable<TemplateItemResponseModel[]>;
-    }>;
-    items(uniques: string[]): Promise<Observable<ItemResponseModelBaseModel[]>>;
     byId(id: string): Promise<Observable<any>>;
     create(template: CreateTemplateRequestModel): Promise<{
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
@@ -54,4 +48,14 @@ export declare class UmbTemplateRepository implements UmbTreeRepository<EntityTr
     delete(id: string): Promise<{
         error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
     }>;
+    getTemplateQuerySettings(): Promise<import("../../../../shared/repository/index.js").DataSourceResponse<import("../../../../external/backend-api/index.js").TemplateQuerySettingsResponseModel>>;
+    postTemplateQueryExecute({ requestBody }: {
+        requestBody?: TemplateQueryExecuteModel;
+    }): Promise<import("../../../../shared/repository/index.js").DataSourceResponse<import("../../../../external/backend-api/index.js").TemplateQueryResultResponseModel>>;
+    requestItems(ids: Array<string>): Promise<{
+        data: TemplateItemResponseModel[] | undefined;
+        error: import("../../../../external/backend-api/index.js").ApiError | import("../../../../external/backend-api/index.js").CancelError | undefined;
+        asObservable: () => Observable<TemplateItemResponseModel[]>;
+    }>;
+    items(uniques: string[]): Promise<Observable<ItemResponseModelBaseModel[]>>;
 }

package/dist-cms/packages/templating/templates/repository/template.repository.js

@@ -4,6 +4,7 @@ import { UmbTemplateTreeServerDataSource } from './sources/template.tree.server.
 import { UmbTemplateDetailServerDataSource } from './sources/template.detail.server.data.js';
 import { UMB_TEMPLATE_ITEM_STORE_CONTEXT_TOKEN } from './template-item.store.js';
 import { UmbTemplateItemServerDataSource } from './sources/template.item.server.data.js';
+import { UmbTemplateQueryBuilderServerDataSource } from './sources/template.query-builder.server.data.js';
 import { UMB_NOTIFICATION_CONTEXT_TOKEN } from '../../../core/notification/index.js';
 import { UmbContextConsumerController } from '../../../../libs/context-api/index.js';
 export class UmbTemplateRepository {
@@ -16,11 +17,13 @@ export class UmbTemplateRepository {
     #treeStore;
     #store;
     #notificationContext;
+    #queryBuilderSource;
     constructor(host) {
         this.#host = host;
         this.#treeDataSource = new UmbTemplateTreeServerDataSource(this.#host);
         this.#detailDataSource = new UmbTemplateDetailServerDataSource(this.#host);
         this.#itemSource = new UmbTemplateItemServerDataSource(this.#host);
+        this.#queryBuilderSource = new UmbTemplateQueryBuilderServerDataSource(this.#host);
         this.#init = Promise.all([
             new UmbContextConsumerController(this.#host, UMB_TEMPLATE_ITEM_STORE_CONTEXT_TOKEN, (instance) => {
                 this.#itemStore = instance;
@@ -105,20 +108,6 @@ export class UmbTemplateRepository {
         }
         return { data, error, asObservable: () => this.#treeStore.items([id]) };
     }
-    // ITEMS:
-    async requestItems(ids) {
-        if (!ids)
-            throw new Error('Ids are missing');
-        await this.#init;
-        const { data, error } = await this.#itemSource.getItems(ids);
-        if (data) {
-            this.#itemStore?.appendItems(data);
-        }
-        return { data, error, asObservable: () => this.#itemStore.items(ids) };
-    }
-    async items(uniques) {
-        throw new Error('items method is not implemented in UmbTemplateRepository');
-    }
     async byId(id) {
         if (!id)
             throw new Error('Key is missing');
@@ -138,7 +127,7 @@ export class UmbTemplateRepository {
         }
         // TODO: we currently don't use the detail store for anything.
         // Consider to look up the data before fetching from the server
-        //this.#store?.append({ ...template, $type: 'EntityTreeItemResponseModel' });
+        //this.#store?.append({ ...template });
         // TODO: Update tree store with the new item? or ask tree to request the new item?
         return { error };
     }
@@ -179,4 +168,29 @@ export class UmbTemplateRepository {
         this.#treeStore?.removeItem(id);
         return { error };
     }
+    //#endregion
+    //#region TEMPLATE_QUERY:
+    async getTemplateQuerySettings() {
+        await this.#init;
+        return this.#queryBuilderSource.getTemplateQuerySettings();
+    }
+    async postTemplateQueryExecute({ requestBody }) {
+        await this.#init;
+        return this.#queryBuilderSource.postTemplateQueryExecute({ requestBody });
+    }
+    //#endregion
+    //#region ITEMS:
+    async requestItems(ids) {
+        if (!ids)
+            throw new Error('Ids are missing');
+        await this.#init;
+        const { data, error } = await this.#itemSource.getItems(ids);
+        if (data) {
+            this.#itemStore?.appendItems(data);
+        }
+        return { data, error, asObservable: () => this.#itemStore.items(ids) };
+    }
+    async items(uniques) {
+        throw new Error('items method is not implemented in UmbTemplateRepository');
+    }
 }

package/dist-cms/packages/templating/templates/repository/template.store.js

@@ -30,10 +30,10 @@ export class UmbTemplateStore extends UmbStoreBase {
      * @memberof UmbTemplateStore
      */
     byId(id) {
-        return this._data.getObservablePart((x) => x.find((y) => y.id === id));
+        return this._data.asObservablePart((x) => x.find((y) => y.id === id));
     }
     items(uniques) {
-        return this._data.getObservablePart((x) => x.filter((y) => uniques.includes(y.id)));
+        return this._data.asObservablePart((x) => x.filter((y) => uniques.includes(y.id)));
     }
     /**
      * Removes templates in the store with the given uniques

package/dist-cms/packages/templating/templates/workspace/template-workspace-editor.element.js

@@ -5,6 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_MODAL_TEMPLATING_INSERT_SECTION_MODAL } from '../../modals/insert-section-modal/insert-section-modal.element.js';
+import { UMB_TEMPLATE_QUERY_BUILDER_MODAL } from '../modals/modal-tokens.js';
+import { getQuerySnippet } from '../../utils.js';
 import { camelCase } from '../../../../external/lodash/index.js';
 import { UUITextStyles } from '../../../../external/uui/index.js';
 import { css, html, customElement, query, state, nothing } from '../../../../external/lit/index.js';
@@ -99,6 +101,13 @@ export let UmbTemplateWorkspaceEditorElement = class UmbTemplateWorkspaceEditorE
             this.#templateWorkspaceContext?.setMasterTemplate(data.selection[0] ?? '');
         });
     }
+    #openQueryBuilder() {
+        const queryBuilderModal = this._modalContext?.open(UMB_TEMPLATE_QUERY_BUILDER_MODAL);
+        queryBuilderModal?.onSubmit().then((queryBuilderModalResult) => {
+            if (queryBuilderModalResult.value)
+                this._codeEditor?.insert(getQuerySnippet(queryBuilderModalResult.value));
+        });
+    }
     #renderMasterTemplatePicker() {
         return html `
 			<uui-button-group>
@@ -129,7 +138,12 @@ export let UmbTemplateWorkspaceEditorElement = class UmbTemplateWorkspaceEditorE
     render() {
         // TODO: add correct UI elements
         return html `<umb-workspace-editor alias="Umb.Workspace.Template">
-			<uui-input placeholder="Enter name..." slot="header" .value=${this._name} @input=${this.#onNameInput}
+			<uui-input
+				placeholder="Enter name..."
+				slot="header"
+				.value=${this._name}
+				@input=${this.#onNameInput}
+				label="template name"
 				><umb-template-alias-input
 					slot="append"
 					.value=${this._alias ?? ''}
@@ -140,9 +154,13 @@ export let UmbTemplateWorkspaceEditorElement = class UmbTemplateWorkspaceEditorE
 					${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"
+							@click=${this.#openQueryBuilder}>
 							<uui-icon name="umb:wand"></uui-icon>Query builder
-						</uui-button> -->
+						</uui-button>
 						<uui-button
 							look="secondary"
 							id="sections-button"

package/dist-cms/packages/templating/templates/workspace/template-workspace.context.js

@@ -62,13 +62,13 @@ ${currentContent}`;
         return this.#data.getValue();
     }
     setName(value) {
-        this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', name: value });
+        this.#data.next({ ...this.#data.value, name: value });
     }
     setAlias(value) {
-        this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', alias: value });
+        this.#data.next({ ...this.#data.value, alias: value });
     }
     setContent(value) {
-        this.#data.next({ ...this.#data.value, $type: this.#data.value?.$type || '', content: value });
+        this.#data.next({ ...this.#data.value, content: value });
     }
     getLayoutBlockRegexPattern() {
         return new RegExp('(@{[\\s\\S][^if]*?Layout\\s*?=\\s*?)("[^"]*?"|null)(;[\\s\\S]*?})', 'gi');
@@ -114,6 +114,7 @@ ${currentContent}`;
             else {
                 this.repository.requestRootTreeItems();
             }
+            return;
         }
         if (template?.id) {
             await this.repository.save(template.id, {
@@ -121,7 +122,7 @@ ${currentContent}`;
                 content: template.content,
                 alias: template.alias,
             });
-            this.repository.requestTreeItemsOf(this.#masterTemplate.value?.id ?? '');
+            this.repository.requestTreeItemsOf(this.#masterTemplate.value?.id ?? null);
         }
     }
     async create(parentId = null) {
@@ -129,8 +130,8 @@ ${currentContent}`;
         if (!data)
             return;
         this.setIsNew(true);
-        this.#data.next({ ...data, id: '', name: '', alias: '', $type: 'TemplateResponseModel' });
-        if (!parentId || parentId === 'root')
+        this.#data.next({ ...data, id: '', name: '', alias: '' });
+        if (!parentId)
             return;
         await this.setMasterTemplate(parentId);
     }

package/dist-cms/packages/templating/templates/workspace/template-workspace.element.d.ts

@@ -1,5 +1,6 @@
 import type { UmbRoute } from '../../../../shared/router/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import '../../components/insert-menu/templating-insert-menu.element.js';
 import './template-workspace-editor.element.js';
 export declare class UmbTemplateWorkspaceElement extends UmbLitElement {
     #private;

package/dist-cms/packages/templating/templates/workspace/template-workspace.element.js

@@ -7,20 +7,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbTemplateWorkspaceContext } from './template-workspace.context.js';
 import { html, customElement, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../shared/lit-element/index.js';
+import '../../components/insert-menu/templating-insert-menu.element.js';
 import './template-workspace-editor.element.js';
+import { UmbWorkspaceIsNewRedirectController } from '../../../core/workspace/index.js';
 export let UmbTemplateWorkspaceElement = class UmbTemplateWorkspaceElement extends UmbLitElement {
     constructor() {
         super(...arguments);
         this.#templateWorkspaceContext = new UmbTemplateWorkspaceContext(this);
-        this.#routerPath = '';
         this.#element = document.createElement('umb-template-workspace-editor');
         this._routes = [
             {
-                path: 'create/:parentKey',
+                path: 'create/:parentId',
                 component: () => this.#element,
                 setup: (component, info) => {
-                    const parentKey = info.match.params.parentKey;
-                    this.#templateWorkspaceContext.create(parentKey);
+                    const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
+                    this.#templateWorkspaceContext.create(parentId);
+                    new UmbWorkspaceIsNewRedirectController(this, this.#templateWorkspaceContext, this.shadowRoot.querySelector('umb-router-slot'));
                 },
             },
             {
@@ -37,14 +39,9 @@ export let UmbTemplateWorkspaceElement = class UmbTemplateWorkspaceElement exten
         this.#templateWorkspaceContext.load(entityId);
     }
     #templateWorkspaceContext;
-    #routerPath;
     #element;
     render() {
-        return html `<umb-router-slot
-			.routes=${this._routes}
-			@init=${(event) => {
-            this.#routerPath = event.target.absoluteRouterPath;
-        }}></umb-router-slot>`;
+        return html `<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
     }
 };
 __decorate([

package/dist-cms/packages/translation/dashboards/dictionary/dashboard-translation-dictionary.element.js

@@ -72,7 +72,6 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
             // TODO: Generate URL for editing the dictionary item
             const tableItem = {
                 id: dictionary.name ?? '',
-                icon: 'umb:book-alt',
                 data: [
                     {
                         columnAlias: 'name',

package/dist-cms/packages/translation/dictionary/repository/dictionary.store.js

@@ -20,7 +20,7 @@ export class UmbDictionaryStore extends UmbStoreBase {
      * @memberof UmbDictionaryStore
      */
     byId(id) {
-        return this._data.getObservablePart((x) => x.find((y) => y.id === id));
+        return this._data.asObservablePart((x) => x.find((y) => y.id === id));
     }
     remove(uniques) {
         this._data.remove(uniques);