return correct tree data set from the mocked database

src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/editor-content.element.ts

@@ -177,7 +177,7 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 				<div id="header" slot="header">
 					<uui-input id="name-input" .value=${this._content?.name} @input="${this._handleInput}">
 						<!-- Implement Variant Selector -->
-						${this._content && this._content.variants.length > 0
+						${this._content && this._content.variants?.length > 0
 							? html`
 									<div slot="append">
 										<uui-button id="variant-selector-toggle" @click=${this._toggleVariantSelector}>
@@ -191,7 +191,7 @@ export class UmbEditorContentElement extends UmbContextProviderMixin(
 
 					<!-- Implement Variant Selector -->
 					<!-- TODO: Refactor Variant Selector into its own component -->
-					${this._content && this._content.variants.length > 0
+					${this._content && this._content.variants?.length > 0
 						? html`
 								<uui-popover id="variant-selector-popover" .open=${this._variantSelectorIsOpen} @close=${this._close}>
 									<div id="variant-selector-dropdown" slot="popover">

src/Umbraco.Web.UI.Client/src/backoffice/editors/shared/editor-content/views/edit/editor-view-content-edit.element.ts

@@ -50,7 +50,7 @@ export class UmbEditorViewContentEditElement extends UmbContextConsumerMixin(Umb
 	render() {
 		return html`
 			<uui-box>
-				${this._properties.map(
+				${this._properties?.map(
 					(property: ContentProperty) => html`
 						<umb-content-property
 							.property=${property}

src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts

@@ -1,4 +1,5 @@
 import { UmbEntityData } from './entity.data';
+import { createFolderTreeItem } from './utils';
 import { FolderTreeItem } from '@umbraco-cms/backend-api';
 import type { DataTypeDetails } from '@umbraco-cms/models';
 
@@ -96,16 +97,19 @@ class UmbDataTypeData extends UmbEntityData<DataTypeDetails> {
 	}
 
 	getTreeRoot(): Array<FolderTreeItem> {
-		return this.data.filter((item) => item.parentKey === null);
+		const rootItems = this.data.filter((item) => item.parentKey === null);
+		return rootItems.map((item) => createFolderTreeItem(item));
 	}
 
 	getTreeItemChildren(key: string): Array<FolderTreeItem> {
-		return this.data.filter((item) => item.parentKey === key);
+		const childItems = this.data.filter((item) => item.parentKey === key);
+		return childItems.map((item) => createFolderTreeItem(item));
 	}
 
 	getTreeItem(keys: Array<string>): Array<FolderTreeItem> {
-		return this.data.filter((item) => keys.includes(item.key ?? ''));
+		const items = this.data.filter((item) => keys.includes(item.key ?? ''));
+		return items.map((item) => createFolderTreeItem(item));
 	}
 }
 
-export const umbDataTypeData = new UmbDataTypeData();
+export const umbDataTypeData = new UmbDataTypeData();

src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts

@@ -1,4 +1,5 @@
 import { UmbEntityData } from './entity.data';
+import { createDocumentTypeTreeItem } from './utils';
 import { DocumentTypeTreeItem } from '@umbraco-cms/backend-api';
 import type { DocumentTypeDetails } from '@umbraco-cms/models';
 
@@ -40,16 +41,19 @@ class UmbDocumentTypeData extends UmbEntityData<DocumentTypeDetails> {
 	}
 
 	getTreeRoot(): Array<DocumentTypeTreeItem> {
-		return this.data.filter((item) => item.parentKey === null);
+		const rootItems = this.data.filter((item) => item.parentKey === null);
+		return rootItems.map((item) => createDocumentTypeTreeItem(item));
 	}
 
 	getTreeItemChildren(key: string): Array<DocumentTypeTreeItem> {
-		return this.data.filter((item) => item.parentKey === key);
+		const childItems = this.data.filter((item) => item.parentKey === key);
+		return childItems.map((item) => createDocumentTypeTreeItem(item));
 	}
 
 	getTreeItem(keys: Array<string>): Array<DocumentTypeTreeItem> {
-		return this.data.filter((item) => keys.includes(item.key));
+		const items = this.data.filter((item) => keys.includes(item.key ?? ''));
+		return items.map((item) => createDocumentTypeTreeItem(item));
 	}
 }
 
-export const umbDocumentTypeData = new UmbDocumentTypeData();
+export const umbDocumentTypeData = new UmbDocumentTypeData();

src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts

@@ -1,7 +1,7 @@
-import { UmbData } from './data';
+import { UmbEntityData } from './entity.data';
+import { createDocumentTreeItem } from './utils';
 import { DocumentTreeItem, PagedDocumentTreeItem } from '@umbraco-cms/backend-api';
 import type { DocumentDetails } from '@umbraco-cms/models';
-import { UmbEntityData } from './entity.data';
 
 export const data: Array<DocumentDetails> = [
 	{
@@ -188,18 +188,21 @@ class UmbDocumentData extends UmbEntityData<DocumentDetails> {
 
 	getTreeRoot(): PagedDocumentTreeItem {
 		const items = this.data.filter((item) => item.parentKey === null);
+		const treeItems = items.map((item) => createDocumentTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItemChildren(key: string): PagedDocumentTreeItem {
 		const items = this.data.filter((item) => item.parentKey === key);
+		const treeItems = items.map((item) => createDocumentTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
-	getTreeItems(keys: Array<string>): Array<DocumentTreeItem> {
-		return this.data.filter((item) => keys.includes(item.key ?? ''));
+	getTreeItem(keys: Array<string>): Array<DocumentTreeItem> {
+		const items = this.data.filter((item) => keys.includes(item.key ?? ''));
+		return items.map((item) => createDocumentTreeItem(item));
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/media-type.data.ts

@@ -1,4 +1,5 @@
 import { UmbEntityData } from './entity.data';
+import { createFolderTreeItem } from './utils';
 import { FolderTreeItem, PagedFolderTreeItem } from '@umbraco-cms/backend-api';
 import type { MediaTypeDetails } from '@umbraco-cms/models';
 
@@ -31,6 +32,7 @@ export const data: Array<MediaTypeDetails> = [
 	},
 ];
 
+
 // Temp mocked database
 class UmbMediaTypeData extends UmbEntityData<MediaTypeDetails> {
 	constructor() {
@@ -39,18 +41,21 @@ class UmbMediaTypeData extends UmbEntityData<MediaTypeDetails> {
 
 	getTreeRoot(): PagedFolderTreeItem {
 		const items = this.data.filter((item) => item.parentKey === null);
+		const treeItems = items.map((item) => createFolderTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItemChildren(key: string): PagedFolderTreeItem {
 		const items = this.data.filter((item) => item.parentKey === key);
+		const treeItems = items.map((item) => createFolderTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItem(keys: Array<string>): Array<FolderTreeItem> {
-		return this.data.filter((item) => keys.includes(item.key ?? ''));
+		const items = this.data.filter((item) => keys.includes(item.key ?? ''));
+		return items.map((item) => createFolderTreeItem(item));
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/media.data.ts

@@ -1,7 +1,8 @@
-import { UmbData } from './data';
+import { UmbEntityData } from './entity.data';
+import { createContentTreeItem } from './utils';
 import { ContentTreeItem, PagedContentTreeItem } from '@umbraco-cms/backend-api';
 import type { MediaDetails } from '@umbraco-cms/models';
-import { UmbEntityData } from './entity.data';
+
 
 export const data: Array<MediaDetails> = [
 	{
@@ -66,18 +67,21 @@ class UmbMediaData extends UmbEntityData<MediaDetails> {
 
 	getTreeRoot(): PagedContentTreeItem {
 		const items = this.data.filter((item) => item.parentKey === null);
+		const treeItems = items.map((item) => createContentTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItemChildren(key: string): PagedContentTreeItem {
 		const items = this.data.filter((item) => item.key === key);
+		const treeItems = items.map((item) => createContentTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItem(keys: Array<string>): Array<ContentTreeItem> {
-		return this.data.filter((item) => keys.includes(item.key));
+		const items = this.data.filter((item) => keys.includes(item.key));
+		return items.map((item) => createContentTreeItem(item));
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/member-group.data.ts

@@ -1,4 +1,5 @@
 import { UmbEntityData } from './entity.data';
+import { createEntityTreeItem } from './utils';
 import { EntityTreeItem, PagedEntityTreeItem } from '@umbraco-cms/backend-api';
 import type { MemberGroupDetails } from '@umbraco-cms/models';
 
@@ -22,18 +23,21 @@ class UmbMemberGroupData extends UmbEntityData<MemberGroupDetails> {
 
 	getTreeRoot(): PagedEntityTreeItem {
 		const items = this.data.filter((item) => item.parentKey === null);
+		const treeItems = items.map((item) => createEntityTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItemChildren(key: string): PagedEntityTreeItem {
 		const items = this.data.filter((item) => item.parentKey === key);
+		const treeItems = items.map((item) => createEntityTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItem(keys: Array<string>): Array<EntityTreeItem> {
-		return this.data.filter((item) => keys.includes(item.key));
+		const items = this.data.filter((item) => keys.includes(item.key ?? ''));
+		return items.map((item) => createEntityTreeItem(item));
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/member-type.data.ts

@@ -1,4 +1,5 @@
 import { UmbData } from './data';
+import { createEntityTreeItem } from './utils';
 import { EntityTreeItem, PagedEntityTreeItem } from '@umbraco-cms/backend-api';
 import type { MemberTypeDetails } from '@umbraco-cms/models';
 
@@ -25,18 +26,21 @@ class UmbMemberTypeData extends UmbData<MemberTypeDetails> {
 
 	getTreeRoot(): PagedEntityTreeItem {
 		const items = this.data.filter((item) => item.parentKey === null);
+		const treeItems = items.map((item) => createEntityTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItemChildren(key: string): PagedEntityTreeItem {
 		const items = this.data.filter((item) => item.parentKey === key);
+		const treeItems = items.map((item) => createEntityTreeItem(item));
 		const total = items.length;
-		return { items, total };
+		return { items: treeItems, total };
 	}
 
 	getTreeItem(keys: Array<string>): Array<EntityTreeItem> {
-		return this.data.filter((item) => keys.includes(item.key ?? ''));
+		const items = this.data.filter((item) => keys.includes(item.key ?? ''));
+		return items.map((item) => createEntityTreeItem(item));
 	}
 }
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/utils.ts

@@ -0,0 +1,47 @@
+import type { ContentTreeItem, DocumentTreeItem, DocumentTypeTreeItem, EntityTreeItem, FolderTreeItem } from "@umbraco-cms/backend-api";
+import type { DocumentDetails, DocumentTypeDetails } from "@umbraco-cms/models";
+
+export const createEntityTreeItem = (item: any): EntityTreeItem => {
+	return {
+		name: item.name,
+		type: item.type,
+		icon: item.icon,
+		hasChildren: item.hasChildren,
+		key: item.key,
+		isContainer: item.isContainer,
+		parentKey: item.parentKey,
+	};
+};
+
+export const createFolderTreeItem = (item: any): FolderTreeItem => {
+	return {
+		...createEntityTreeItem(item),
+		isFolder: item.isFolder,
+	};
+};
+
+export const createContentTreeItem = (item: any): ContentTreeItem => {
+	return {
+		...createEntityTreeItem(item),
+		noAccess: item.noAccess,
+		isTrashed: item.isTrashed,
+	};
+};
+
+export const createDocumentTreeItem = (item: DocumentDetails): DocumentTreeItem => {
+	return {
+		...createContentTreeItem(item),
+		noAccess: item.noAccess,
+		isProtected: item.isProtected,
+		isPublished: item.isPublished,
+		isEdited: item.isEdited,
+		isTrashed: item.isTrashed,
+	};
+}
+
+export const createDocumentTypeTreeItem = (item: DocumentTypeDetails): DocumentTypeTreeItem => {
+	return {
+		...createFolderTreeItem(item),
+		isElement: item.isElement
+	};
+};

src/Umbraco.Web.UI.Client/src/core/stores/store.ts

@@ -23,48 +23,45 @@ export class UmbDataStoreBase<T extends UmbDataStoreIdentifiers> implements UmbD
 	protected _items: BehaviorSubject<Array<T>> = new BehaviorSubject(<Array<T>>[]);
 	public readonly items: Observable<Array<T>> = this._items.asObservable();
 
-	public deleteItems(deletedKeys: Array<string>): void {
+	/**
+	 * @description - Delete items from the store.
+	 * @param {Array<string>} keys
+	 * @memberof UmbDataStoreBase
+	 */
+	public deleteItems(keys: Array<string>): void {
 		const remainingItems = this._items
 			.getValue()
-			.filter((item) => item.key && deletedKeys.includes(item.key) === false);
+			.filter((item) => item.key && keys.includes(item.key) === false);
 		this._items.next(remainingItems);
 	}
 
 	/**
 	 * @description - Update the store with new items. Existing items are updated, new items are added. Existing items are matched by the compareKey.
-	 * @param {Array<T>} updatedItems
+	 * @param {Array<T>} items
 	 * @param {keyof T} [compareKey='key']
 	 * @memberof UmbDataStoreBase
 	 */
-	public updateItems(updatedItems: Array<T>, compareKey: keyof T = 'key'): void {
-		const storedItems = this._items.getValue();
-		const updated: T[] = [...storedItems];
+	public updateItems(items: Array<T>, compareKey: keyof T = 'key'): void {
+		const storedItems = [...this._items.getValue()];
 
-		updatedItems.forEach((updatedItem) => {
-			const index = storedItems.map((storedItem) => storedItem[compareKey]).indexOf(updatedItem[compareKey]);
+		items.forEach((item) => {
+			const index = storedItems.map((storedItem) => storedItem[compareKey]).indexOf(item[compareKey]);
 
+			// If the node is in the store, update it
 			if (index !== -1) {
-				const itemKeys = Object.keys(storedItems[index]);
+				const storedItem = storedItems[index];
 
-				const newItem = {};
-
-				for (const [key] of Object.entries(updatedItem)) {
-					if (itemKeys.indexOf(key) !== -1) {
-						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-						// @ts-ignore
-						newItem[key] = updatedItem[key];
-					}
+				for (const [key] of Object.entries(item)) {
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					//@ts-ignore
+					storedItem[key] = item[key];
 				}
-
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
-				updated[index] = newItem;
 			} else {
 				// If the node is not in the store, add it
-				updated.push(updatedItem);
+				storedItems.push(item);
 			}
 		});
 
-		this._items.next([...updated]);
+		this._items.next([...storedItems]);
 	}
 }