Merge remote-tracking branch 'origin/main' into feature/dictionary-export-import

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/menu-item.model.ts

@@ -21,4 +21,5 @@ export interface ManifestMenuItemTreeKind extends ManifestMenuItem {
 
 export interface MetaMenuItemTreeKind extends MetaMenuItem {
 	treeAlias: string;
+	hideTreeRoot?: boolean;
 }

src/Umbraco.Web.UI.Client/src/packages/core/modal/token/document-picker-modal.token.ts

@@ -11,6 +11,6 @@ export const UMB_DOCUMENT_PICKER_MODAL = new UmbModalToken<UmbDocumentPickerModa
 		size: 'small',
 	},
 	{
-		treeAlias: 'Umb.Tree.Documents',
+		treeAlias: 'Umb.Tree.Document',
 	},
 );

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-menu-item/tree-menu-item.element.ts

@@ -26,7 +26,13 @@ export class UmbMenuItemTreeElement extends UmbLitElement implements UmbMenuItem
 	manifest?: ManifestMenuItemTreeKind;
 
 	render() {
-		return this.manifest ? html` <umb-tree alias=${this.manifest?.meta.treeAlias}></umb-tree> ` : nothing;
+		return this.manifest
+			? html`
+					<umb-tree
+						alias=${this.manifest?.meta.treeAlias}
+						?hide-tree-root=${this.manifest.meta.hideTreeRoot === true}></umb-tree>
+			  `
+			: nothing;
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.stories.ts

@@ -13,7 +13,7 @@ type Story = StoryObj<UmbTreeElement>;
 // TODO: This does not display anything - need help
 export const Overview: Story = {
 	args: {
-		alias: 'Umb.Tree.Documents',
+		alias: 'Umb.Tree.Document',
 		selectable: true,
 	},
 };

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entities.ts

@@ -0,0 +1,2 @@
+export const UMB_DICTIONARY_ROOT_ENTITY_TYPE = 'dictionary-root';
+export const UMB_DICTIONARY_ENTITY_TYPE = 'dictionary-item';

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/entity-actions/manifests.ts

@@ -1,4 +1,5 @@
-import { DICTIONARY_REPOSITORY_ALIAS } from '../repository/manifests.js';
+import { UMB_DICTIONARY_REPOSITORY_ALIAS } from '../repository/manifests.js';
+import { UMB_DICTIONARY_ENTITY_TYPE } from '../entities.js';
 import UmbReloadDictionaryEntityAction from './reload.action.js';
 import UmbImportDictionaryEntityAction from './import/import.action.js';
 import UmbExportDictionaryEntityAction from './export/export.action.js';
@@ -6,9 +7,6 @@ import UmbCreateDictionaryEntityAction from './create/create.action.js';
 import { UmbDeleteEntityAction, UmbMoveEntityAction } from '@umbraco-cms/backoffice/entity-action';
 import type { ManifestEntityAction, ManifestModal } from '@umbraco-cms/backoffice/extension-registry';
 
-const entityType = 'dictionary-item';
-const repositoryAlias = DICTIONARY_REPOSITORY_ALIAS;
-
 const entityActions: Array<ManifestEntityAction> = [
 	{
 		type: 'entityAction',
@@ -19,8 +17,8 @@ const entityActions: Array<ManifestEntityAction> = [
 		meta: {
 			icon: 'icon-add',
 			label: 'Create',
-			repositoryAlias,
-			entityTypes: [entityType],
+			repositoryAlias: UMB_DICTIONARY_REPOSITORY_ALIAS,
+			entityTypes: [UMB_DICTIONARY_ENTITY_TYPE],
 		},
 	},
 	{
@@ -32,8 +30,8 @@ const entityActions: Array<ManifestEntityAction> = [
 		meta: {
 			icon: 'icon-enter',
 			label: 'Move',
-			repositoryAlias,
-			entityTypes: [entityType],
+			repositoryAlias: UMB_DICTIONARY_REPOSITORY_ALIAS,
+			entityTypes: [UMB_DICTIONARY_ENTITY_TYPE],
 		},
 	},
 	{
@@ -45,8 +43,8 @@ const entityActions: Array<ManifestEntityAction> = [
 		meta: {
 			icon: 'icon-download-alt',
 			label: 'Export',
-			repositoryAlias,
-			entityTypes: [entityType],
+			repositoryAlias: UMB_DICTIONARY_REPOSITORY_ALIAS,
+			entityTypes: [UMB_DICTIONARY_ENTITY_TYPE],
 		},
 	},
 	{
@@ -58,8 +56,8 @@ const entityActions: Array<ManifestEntityAction> = [
 		meta: {
 			icon: 'icon-page-up',
 			label: 'Import',
-			repositoryAlias,
-			entityTypes: [entityType],
+			repositoryAlias: UMB_DICTIONARY_REPOSITORY_ALIAS,
+			entityTypes: [UMB_DICTIONARY_ENTITY_TYPE],
 		},
 	},
 	{
@@ -71,8 +69,8 @@ const entityActions: Array<ManifestEntityAction> = [
 		meta: {
 			icon: 'icon-refresh',
 			label: 'Reload',
-			repositoryAlias,
-			entityTypes: [entityType],
+			repositoryAlias: UMB_DICTIONARY_REPOSITORY_ALIAS,
+			entityTypes: [UMB_DICTIONARY_ENTITY_TYPE],
 		},
 	},
 	{
@@ -84,8 +82,8 @@ const entityActions: Array<ManifestEntityAction> = [
 		meta: {
 			icon: 'icon-trash',
 			label: 'Delete',
-			repositoryAlias,
-			entityTypes: [entityType],
+			repositoryAlias: UMB_DICTIONARY_REPOSITORY_ALIAS,
+			entityTypes: [UMB_DICTIONARY_ENTITY_TYPE],
 		},
 	},
 ];

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/index.ts

@@ -1,3 +1,3 @@
 export * from './repository/index.js';
+export * from './tree/index.js';
 export * from './components/index.js';
-import './components/index.js';

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/menu-item/dictionary-menu-item.element.ts

@@ -1,17 +0,0 @@
-import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-
-@customElement('umb-dictionary-menu-item')
-export class UmbDictionaryMenuItemElement extends UmbLitElement {
-	render() {
-		return html`<umb-tree alias="Umb.Tree.Dictionary" hide-tree-root></umb-tree>`;
-	}
-}
-
-export default UmbDictionaryMenuItemElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-dictionary-menu-item': UmbDictionaryMenuItemElement;
-	}
-}

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/menu-item/manifests.ts

@@ -1,16 +1,20 @@
-import type { ManifestMenuItem } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_DICTIONARY_ENTITY_TYPE } from '../entities.js';
+import { UMB_DICTIONARY_TREE_ALIAS } from '../tree/index.js';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-const menuItem: ManifestMenuItem = {
+const menuItem: ManifestTypes = {
 	type: 'menuItem',
+	kind: 'tree',
 	alias: 'Umb.MenuItem.Dictionary',
 	name: 'Dictionary Menu Item',
 	weight: 400,
-	loader: () => import('./dictionary-menu-item.element.js'),
 	meta: {
 		label: 'Dictionary',
 		icon: 'icon-book-alt',
-		entityType: 'dictionary-item',
+		entityType: UMB_DICTIONARY_ENTITY_TYPE,
 		menus: ['Umb.Menu.Dictionary'],
+		treeAlias: UMB_DICTIONARY_TREE_ALIAS,
+		hideTreeRoot: true,
 	},
 };
 

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/repository/dictionary.repository.ts

@@ -1,14 +1,11 @@
+import { type UmbDictionaryTreeStore, UMB_DICTIONARY_TREE_STORE_CONTEXT } from '../tree/index.js';
 import { UmbDictionaryStore, UMB_DICTIONARY_STORE_CONTEXT_TOKEN } from './dictionary.store.js';
 import { UmbDictionaryDetailServerDataSource } from './sources/dictionary.detail.server.data.js';
-import { UmbDictionaryTreeStore, UMB_DICTIONARY_TREE_STORE_CONTEXT_TOKEN } from './dictionary.tree.store.js';
-import { UmbDictionaryTreeServerDataSource } from './sources/dictionary.tree.server.data.js';
 import { UmbBaseController, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbDetailRepository } from '@umbraco-cms/backoffice/repository';
-import { UmbTreeRepository, UmbTreeDataSource } from '@umbraco-cms/backoffice/tree';
 import {
 	CreateDictionaryItemRequestModel,
 	DictionaryOverviewResponseModel,
-	EntityTreeItemResponseModel,
 	ImportDictionaryRequestModel,
 	UpdateDictionaryItemRequestModel,
 } from '@umbraco-cms/backoffice/backend-api';
@@ -18,7 +15,6 @@ import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 export class UmbDictionaryRepository
 	extends UmbBaseController
 	implements
-		UmbTreeRepository<EntityTreeItemResponseModel>,
 		UmbDetailRepository<
 			CreateDictionaryItemRequestModel,
 			any,
@@ -29,7 +25,6 @@ export class UmbDictionaryRepository
 {
 	#init!: Promise<unknown>;
 
-	#treeSource: UmbTreeDataSource;
 	#treeStore?: UmbDictionaryTreeStore;
 
 	#detailSource: UmbDictionaryDetailServerDataSource;
@@ -41,7 +36,6 @@ export class UmbDictionaryRepository
 		super(host);
 
 		// TODO: figure out how spin up get the correct data source
-		this.#treeSource = new UmbDictionaryTreeServerDataSource(this);
 		this.#detailSource = new UmbDictionaryDetailServerDataSource(this);
 
 		this.#init = Promise.all([
@@ -49,7 +43,7 @@ export class UmbDictionaryRepository
 				this.#detailStore = instance;
 			}),
 
-			this.consumeContext(UMB_DICTIONARY_TREE_STORE_CONTEXT_TOKEN, (instance) => {
+			this.consumeContext(UMB_DICTIONARY_TREE_STORE_CONTEXT, (instance) => {
 				this.#treeStore = instance;
 			}),
 
@@ -59,82 +53,6 @@ export class UmbDictionaryRepository
 		]);
 	}
 
-	// TREE:
-	async requestTreeRoot() {
-		await this.#init;
-
-		const data = {
-			id: null,
-			type: 'dictionary-root',
-			name: 'Dictionary',
-			icon: 'icon-folder',
-			hasChildren: true,
-		};
-
-		return { data };
-	}
-
-	async requestRootTreeItems() {
-		await this.#init;
-
-		const { data, error } = await this.#treeSource.getRootItems();
-
-		if (data) {
-			this.#treeStore?.appendItems(data.items);
-		}
-
-		return { data, error, asObservable: () => this.#treeStore!.rootItems };
-	}
-
-	async requestTreeItemsOf(parentId: string | null) {
-		if (parentId === undefined) throw new Error('Parent id is missing');
-		await this.#init;
-
-		const { data, error } = await this.#treeSource.getChildrenOf(parentId);
-
-		if (data) {
-			this.#treeStore?.appendItems(data.items);
-		}
-
-		return { data, error, asObservable: () => this.#treeStore!.childrenOf(parentId) };
-	}
-
-	async requestItems(ids: Array<string>) {
-		await this.#init;
-
-		if (!ids) {
-			throw new Error('Ids are missing');
-		}
-
-		const { data, error } = await this.#treeSource.getItems(ids);
-
-		return { data, error, asObservable: () => this.#treeStore!.items(ids) };
-	}
-
-	async requestItems(ids: Array<string>) {
-		// TODO: There is a bug where the item gets removed from the tree before we confirm the delete via the modal. It doesn't delete the item unless we confirm the delete.
-		if (!ids) throw new Error('Dictionary Ids are missing');
-		await this.#init;
-
-		const { data, error } = await this.#treeSource.getItems(ids);
-
-		if (data) {
-			this.#treeStore?.appendItems(data);
-		}
-
-		return { data, error, asObservable: () => this.#treeStore!.items(ids) };
-	}
-
-	async rootTreeItems() {
-		await this.#init;
-		return this.#treeStore!.rootItems;
-	}
-
-	async treeItemsOf(parentId: string | null) {
-		await this.#init;
-		return this.#treeStore!.childrenOf(parentId);
-	}
-
 	async itemsLegacy(ids: Array<string>) {
 		await this.#init;
 		return this.#treeStore!.items(ids);

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/repository/index.ts

@@ -1,3 +1 @@
 export * from './dictionary.repository.js';
-export * from './dictionary.store.js';
-export * from './dictionary.tree.store.js';

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/repository/manifests.ts

@@ -1,32 +1,23 @@
 import { UmbDictionaryRepository } from './dictionary.repository.js';
-import { UmbDictionaryTreeStore } from './dictionary.tree.store.js';
 import { UmbDictionaryStore } from './dictionary.store.js';
-import { ManifestStore, ManifestTreeStore, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+import { ManifestStore, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 
-export const DICTIONARY_REPOSITORY_ALIAS = 'Umb.Repository.Dictionary';
+export const UMB_DICTIONARY_REPOSITORY_ALIAS = 'Umb.Repository.Dictionary';
 
 const repository: ManifestRepository = {
 	type: 'repository',
-	alias: DICTIONARY_REPOSITORY_ALIAS,
+	alias: UMB_DICTIONARY_REPOSITORY_ALIAS,
 	name: 'Dictionary Repository',
 	api: UmbDictionaryRepository,
 };
 
-export const DICTIONARY_STORE_ALIAS = 'Umb.Store.Dictionary';
-export const DICTIONARY_TREE_STORE_ALIAS = 'Umb.Store.DictionaryTree';
+export const UMB_DICTIONARY_STORE_ALIAS = 'Umb.Store.Dictionary';
 
 const store: ManifestStore = {
 	type: 'store',
-	alias: DICTIONARY_STORE_ALIAS,
+	alias: UMB_DICTIONARY_STORE_ALIAS,
 	name: 'Dictionary Store',
 	api: UmbDictionaryStore,
 };
 
-const treeStore: ManifestTreeStore = {
-	type: 'treeStore',
-	alias: DICTIONARY_TREE_STORE_ALIAS,
-	name: 'Dictionary Tree Store',
-	api: UmbDictionaryTreeStore,
-};
-
-export const manifests = [repository, store, treeStore];
+export const manifests = [repository, store];

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/dictionary-tree.repository.ts

@@ -0,0 +1,28 @@
+import { UMB_DICTIONARY_ROOT_ENTITY_TYPE } from '../entities.js';
+import { UmbDictionaryTreeServerDataSource } from './dictionary-tree.server.data-source.js';
+import { UmbDictionaryTreeItemModel, UmbDictionaryTreeRootModel } from './types.js';
+import { UMB_DICTIONARY_TREE_STORE_CONTEXT } from './dictionary-tree.store.js';
+import { UmbTreeRepositoryBase } from '@umbraco-cms/backoffice/tree';
+import { type UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbApi } from '@umbraco-cms/backoffice/extension-api';
+
+export class UmbDictionaryTreeRepository
+	extends UmbTreeRepositoryBase<UmbDictionaryTreeItemModel, UmbDictionaryTreeRootModel>
+	implements UmbApi
+{
+	constructor(host: UmbControllerHost) {
+		super(host, UmbDictionaryTreeServerDataSource, UMB_DICTIONARY_TREE_STORE_CONTEXT);
+	}
+
+	async requestTreeRoot() {
+		const data = {
+			id: null,
+			type: UMB_DICTIONARY_ROOT_ENTITY_TYPE,
+			name: 'Dictionary',
+			icon: 'icon-folder',
+			hasChildren: true,
+		};
+
+		return { data };
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/dictionary-tree.server.data-source.ts

@@ -1,21 +1,21 @@
-import { DictionaryResource } from '@umbraco-cms/backoffice/backend-api';
-import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbTreeDataSource } from '@umbraco-cms/backoffice/tree';
+import { DictionaryResource, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources';
 
 /**
  * A data source for the Dictionary tree that fetches data from the server
  * @export
  * @class UmbDictionaryTreeServerDataSource
- * @implements {DictionaryTreeDataSource}
+ * @implements {UmbTreeDataSource}
  */
-export class UmbDictionaryTreeServerDataSource implements UmbTreeDataSource {
+export class UmbDictionaryTreeServerDataSource implements UmbTreeDataSource<EntityTreeItemResponseModel> {
 	#host: UmbControllerHost;
 
 	/**
-	 * Creates an instance of DictionaryTreeDataSource.
+	 * Creates an instance of UmbDictionaryTreeServerDataSource.
 	 * @param {UmbControllerHost} host
-	 * @memberof DictionaryTreeDataSource
+	 * @memberof UmbDictionaryTreeServerDataSource
 	 */
 	constructor(host: UmbControllerHost) {
 		this.#host = host;
@@ -32,7 +32,7 @@ export class UmbDictionaryTreeServerDataSource implements UmbTreeDataSource {
 
 	/**
 	 * Fetches the children of a given parent id from the server
-	 * @param {(string | null)} parentId
+	 * @param {(string)} parentId
 	 * @return {*}
 	 * @memberof UmbDictionaryTreeServerDataSource
 	 */
@@ -60,10 +60,7 @@ export class UmbDictionaryTreeServerDataSource implements UmbTreeDataSource {
 	 * @memberof UmbDictionaryTreeServerDataSource
 	 */
 	async getItems(ids: Array<string>) {
-		if (!ids || ids.length === 0) {
-			throw new Error('Ids are missing');
-		}
-
+		if (!ids) throw new Error('Ids are missing');
 		return tryExecuteAndNotify(
 			this.#host,
 			DictionaryResource.getDictionaryItem({

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/dictionary-tree.store.ts

@@ -1,12 +1,12 @@
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
-import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/tree';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
+import { UmbEntityTreeStore } from '@umbraco-cms/backoffice/tree';
 
 /**
  * @export
  * @class UmbDictionaryTreeStore
- * @extends {UmbEntityTreeStore}
- * @description - Tree Data Store for Dictionary
+ * @extends {UmbStoreBase}
+ * @description - Tree Data Store for Dictionary Items
  */
 export class UmbDictionaryTreeStore extends UmbEntityTreeStore {
 	/**
@@ -15,10 +15,8 @@ export class UmbDictionaryTreeStore extends UmbEntityTreeStore {
 	 * @memberof UmbDictionaryTreeStore
 	 */
 	constructor(host: UmbControllerHostElement) {
-		super(host, UMB_DICTIONARY_TREE_STORE_CONTEXT_TOKEN.toString());
+		super(host, UMB_DICTIONARY_TREE_STORE_CONTEXT.toString());
 	}
 }
 
-export const UMB_DICTIONARY_TREE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbDictionaryTreeStore>(
-	'UmbDictionaryTreeStore',
-);
+export const UMB_DICTIONARY_TREE_STORE_CONTEXT = new UmbContextToken<UmbDictionaryTreeStore>('UmbDictionaryTreeStore');

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/index.ts

@@ -0,0 +1,9 @@
+export { UmbDictionaryTreeRepository } from './dictionary-tree.repository.js';
+export {
+	UMB_DICTIONARY_TREE_REPOSITORY_ALIAS,
+	UMB_DICTIONARY_TREE_STORE_ALIAS,
+	UMB_DICTIONARY_TREE_ALIAS,
+} from './manifests.js';
+export { UMB_DICTIONARY_TREE_STORE_CONTEXT } from './dictionary-tree.store.js';
+export { type UmbDictionaryTreeStore } from './dictionary-tree.store.js';
+export * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/manifests.ts

@@ -1,23 +1,48 @@
-import { DICTIONARY_REPOSITORY_ALIAS } from '../repository/manifests.js';
-import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry';
+import { UMB_DICTIONARY_ENTITY_TYPE, UMB_DICTIONARY_ROOT_ENTITY_TYPE } from '../entities.js';
+import { UmbDictionaryTreeRepository } from './dictionary-tree.repository.js';
+import { UmbDictionaryTreeStore } from './dictionary-tree.store.js';
+import type {
+	ManifestRepository,
+	ManifestTree,
+	ManifestTreeItem,
+	ManifestTreeStore,
+} from '@umbraco-cms/backoffice/extension-registry';
+
+export const UMB_DICTIONARY_TREE_REPOSITORY_ALIAS = 'Umb.Repository.Dictionary.Tree';
+export const UMB_DICTIONARY_TREE_STORE_ALIAS = 'Umb.Store.Dictionary.Tree';
+export const UMB_DICTIONARY_TREE_ALIAS = 'Umb.Tree.Dictionary';
+
+const treeRepository: ManifestRepository = {
+	type: 'repository',
+	alias: UMB_DICTIONARY_TREE_REPOSITORY_ALIAS,
+	name: 'Dictionary Tree Repository',
+	api: UmbDictionaryTreeRepository,
+};
+
+const treeStore: ManifestTreeStore = {
+	type: 'treeStore',
+	alias: UMB_DICTIONARY_TREE_STORE_ALIAS,
+	name: 'Dictionary Tree Store',
+	api: UmbDictionaryTreeStore,
+};
 
 const tree: ManifestTree = {
 	type: 'tree',
-	alias: 'Umb.Tree.Dictionary',
+	alias: UMB_DICTIONARY_TREE_ALIAS,
 	name: 'Dictionary Tree',
 	meta: {
-		repositoryAlias: DICTIONARY_REPOSITORY_ALIAS,
+		repositoryAlias: UMB_DICTIONARY_TREE_REPOSITORY_ALIAS,
 	},
 };
 
 const treeItem: ManifestTreeItem = {
 	type: 'treeItem',
 	kind: 'entity',
-	alias: 'Umb.TreeItem.DictionaryItem',
-	name: 'Dictionary Item Tree Item',
+	alias: 'Umb.TreeItem.Dictionary',
+	name: 'Dictionary Tree Item',
 	meta: {
-		entityTypes: ['dictionary-root', 'dictionary-item'],
+		entityTypes: [UMB_DICTIONARY_ROOT_ENTITY_TYPE, UMB_DICTIONARY_ENTITY_TYPE],
 	},
 };
 
-export const manifests = [tree, treeItem];
+export const manifests = [treeRepository, treeStore, tree, treeItem];

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/tree/types.ts

@@ -0,0 +1,5 @@
+import { EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import type { UmbEntityTreeItemModel, UmbEntityTreeRootModel } from '@umbraco-cms/backoffice/tree';
+
+export type UmbDictionaryTreeItemModel = EntityTreeItemResponseModel & UmbEntityTreeItemModel;
+export type UmbDictionaryTreeRootModel = EntityTreeItemResponseModel & UmbEntityTreeRootModel;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu-item/document-menu-item.element.ts

@@ -1,17 +0,0 @@
-import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-
-@customElement('umb-document-menu-item')
-export class UmbDocumentMenuItemElement extends UmbLitElement {
-	render() {
-		return html`<umb-tree alias="Umb.Tree.Documents" hide-tree-root></umb-tree>`;
-	}
-}
-
-export default UmbDocumentMenuItemElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-document-menu-item': UmbDocumentMenuItemElement;
-	}
-}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu-item/manifests.ts

@@ -1,15 +1,17 @@
-import type { ManifestMenuItem } from '@umbraco-cms/backoffice/extension-registry';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-const menuItem: ManifestMenuItem = {
+const menuItem: ManifestTypes = {
 	type: 'menuItem',
+	kind: 'tree',
 	alias: 'Umb.MenuItem.Documents',
 	name: 'Documents Menu Item',
 	weight: 200,
-	loader: () => import('./document-menu-item.element.js'),
 	meta: {
 		label: 'Documents',
 		icon: 'icon-folder',
 		menus: ['Umb.Menu.Content'],
+		treeAlias: 'Umb.Tree.Document',
+		hideTreeRoot: true,
 	},
 };
 

src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/manifests.ts

@@ -1,11 +1,11 @@
 import { DOCUMENT_REPOSITORY_ALIAS } from '../repository/manifests.js';
 import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry';
 
-export const DOCUMENT_TREE_ALIAS = 'Umb.Tree.Documents';
+export const UMB_DOCUMENT_TREE_ALIAS = 'Umb.Tree.Document';
 
 const tree: ManifestTree = {
 	type: 'tree',
-	alias: DOCUMENT_TREE_ALIAS,
+	alias: UMB_DOCUMENT_TREE_ALIAS,
 	name: 'Documents Tree',
 	meta: {
 		repositoryAlias: DOCUMENT_REPOSITORY_ALIAS,

src/Umbraco.Web.UI.Client/src/packages/media/media/menu-item/manifests.ts

@@ -1,15 +1,17 @@
-import type { ManifestMenuItem } from '@umbraco-cms/backoffice/extension-registry';
+import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
 
-const menuItem: ManifestMenuItem = {
+const menuItem: ManifestTypes = {
 	type: 'menuItem',
+	kind: 'tree',
 	alias: 'Umb.MenuItem.Media',
 	name: 'Media Menu Item',
 	weight: 100,
-	loader: () => import('./media-menu-item.element.js'),
 	meta: {
 		label: 'Media',
 		icon: 'icon-folder',
 		menus: ['Umb.Menu.Media'],
+		treeAlias: 'Umb.Tree.Media',
+		hideTreeRoot: true,
 	},
 };
 

src/Umbraco.Web.UI.Client/src/packages/media/media/menu-item/media-menu-item.element.ts

@@ -1,17 +0,0 @@
-import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-
-@customElement('umb-media-menu-item')
-export class UmbMediaMenuItemElement extends UmbLitElement {
-	render() {
-		return html`<umb-tree alias="Umb.Tree.Media" hide-tree-root></umb-tree>`;
-	}
-}
-
-export default UmbMediaMenuItemElement;
-
-declare global {
-	interface HTMLElementTagNameMap {
-		'umb-media-menu-item': UmbMediaMenuItemElement;
-	}
-}

src/Umbraco.Web.UI.Client/src/packages/media/media/tree/manifests.ts

@@ -1,11 +1,11 @@
 import { MEDIA_REPOSITORY_ALIAS } from '../repository/manifests.js';
 import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extension-registry';
 
-const treeAlias = 'Umb.Tree.Media';
+const UMB_MEDIA_TREE_ALIAS = 'Umb.Tree.Media';
 
 const tree: ManifestTree = {
 	type: 'tree',
-	alias: treeAlias,
+	alias: UMB_MEDIA_TREE_ALIAS,
 	name: 'Media Tree',
 	meta: {
 		repositoryAlias: MEDIA_REPOSITORY_ALIAS,