Menu expansion to paginated items

src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts

@@ -1,4 +1,5 @@
 import { partialUpdateFrozenArray } from '../utils/partial-update-frozen-array.function.js';
+import { prependToUniqueArray } from '../utils/prepend-to-unique-array.function.js';
 import { pushAtToUniqueArray } from '../utils/push-at-to-unique-array.function.js';
 import { pushToUniqueArray } from '../utils/push-to-unique-array.function.js';
 import { UmbDeepState } from './deep-state.js';
@@ -271,6 +272,36 @@ export class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
 		return this;
 	}
 
+	/**
+	 * @function prepend
+	 * @param {T[]} entries - A array of new data to be added in this Subject.
+	 * @returns {UmbArrayState<T>} Reference to it self.
+	 * @description - Prepend some new data to this Subject, if it compares to existing data it will replace it.
+	 * @example <caption>Example prepend some data.</caption>
+	 * const data = [
+	 * 	{ key: 1, value: 'foo'},
+	 * 	{ key: 2, value: 'bar'}
+	 * ];
+	 * const myState = new UmbArrayState(data);
+	 * myState.prepend([
+	 * 	{ key: 0, value: 'another-bla'},
+	 * 	{ key: 1, value: 'replaced-foo'},
+	 * ]);
+	 */
+	prepend(entries: T[]) {
+		if (this.getUniqueMethod) {
+			const next = [...this.getValue()];
+			entries.forEach((entry) => {
+				prependToUniqueArray(next, entry, this.getUniqueMethod!);
+			});
+			this.setValue(next);
+		} else {
+			this.setValue([...entries, ...this.getValue()]);
+		}
+
+		return this;
+	}
+
 	override destroy() {
 		super.destroy();
 		this.#sortMethod = undefined;

src/Umbraco.Web.UI.Client/src/libs/observable-api/utils/prepend-to-unique-array.function.ts

@@ -0,0 +1,22 @@
+/**
+ * @function prependToUniqueArray
+ * @param {T[]} data - An array of objects.
+ * @param {T} entry - The object to insert or replace with.
+ * @param {getUniqueMethod: (entry: T) => unknown} [getUniqueMethod] - Method to get the unique value of an entry.
+ * @description - Prepend or replaces an item of an Array.
+ * @returns {T[]} - The new array with the entry prepended or replaced.
+ * @example <caption>Example prepend new entry for a Array. Where the key is unique and the item will be updated if matched with existing.</caption>
+ * const entry = {key: 'myKey', value: 'myValue'};
+ * const newDataSet = prependToUniqueArray([], entry, x => x.key === key);
+ * myState.setValue(newDataSet);
+ */
+export function prependToUniqueArray<T>(data: T[], entry: T, getUniqueMethod: (entry: T) => unknown): T[] {
+	const unique = getUniqueMethod(entry);
+	const indexToReplace = data.findIndex((x) => getUniqueMethod(x) === unique);
+	if (indexToReplace !== -1) {
+		data[indexToReplace] = entry;
+	} else {
+		data.unshift(entry);
+	}
+	return data;
+}

src/Umbraco.Web.UI.Client/src/packages/core/backend-api/types.gen.ts

@@ -408,7 +408,7 @@ export type CreateUserGroupRequestModel = {
     mediaStartNode?: ReferenceByIdModel | null;
     mediaRootAccess: boolean;
     fallbackPermissions: Array<string>;
-    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
+    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | DocumentTypePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
     id?: string | null;
 };
 
@@ -467,7 +467,7 @@ export type CurrentUserResponseModel = {
     hasAccessToAllLanguages: boolean;
     hasAccessToSensitiveData: boolean;
     fallbackPermissions: Array<string>;
-    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
+    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | DocumentTypePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
     allowedSections: Array<string>;
     isAdmin: boolean;
 };
@@ -773,6 +773,12 @@ export type DocumentTypeItemResponseModel = {
     description?: string | null;
 };
 
+export type DocumentTypePermissionPresentationModel = {
+    $type: string;
+    verbs: Array<string>;
+    documentTypeAlias: string;
+};
+
 export type DocumentTypePropertyTypeContainerResponseModel = {
     id: string;
     parent?: ReferenceByIdModel | null;
@@ -2382,6 +2388,48 @@ export type StylesheetResponseModel = {
     content: string;
 };
 
+export type SubsetDataTypeTreeItemResponseModel = {
+    totalBefore: number;
+    totalAfter: number;
+    items: Array<DataTypeTreeItemResponseModel>;
+};
+
+export type SubsetDocumentBlueprintTreeItemResponseModel = {
+    totalBefore: number;
+    totalAfter: number;
+    items: Array<DocumentBlueprintTreeItemResponseModel>;
+};
+
+export type SubsetDocumentTreeItemResponseModel = {
+    totalBefore: number;
+    totalAfter: number;
+    items: Array<DocumentTreeItemResponseModel>;
+};
+
+export type SubsetDocumentTypeTreeItemResponseModel = {
+    totalBefore: number;
+    totalAfter: number;
+    items: Array<DocumentTypeTreeItemResponseModel>;
+};
+
+export type SubsetMediaTreeItemResponseModel = {
+    totalBefore: number;
+    totalAfter: number;
+    items: Array<MediaTreeItemResponseModel>;
+};
+
+export type SubsetMediaTypeTreeItemResponseModel = {
+    totalBefore: number;
+    totalAfter: number;
+    items: Array<MediaTypeTreeItemResponseModel>;
+};
+
+export type SubsetNamedEntityTreeItemResponseModel = {
+    totalBefore: number;
+    totalAfter: number;
+    items: Array<NamedEntityTreeItemResponseModel>;
+};
+
 export type TagResponseModel = {
     id: string;
     text?: string | null;
@@ -2777,7 +2825,7 @@ export type UpdateUserGroupRequestModel = {
     mediaStartNode?: ReferenceByIdModel | null;
     mediaRootAccess: boolean;
     fallbackPermissions: Array<string>;
-    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
+    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | DocumentTypePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
 };
 
 export type UpdateUserGroupsOnUserRequestModel = {
@@ -2884,7 +2932,7 @@ export type UserGroupResponseModel = {
     mediaStartNode?: ReferenceByIdModel | null;
     mediaRootAccess: boolean;
     fallbackPermissions: Array<string>;
-    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
+    permissions: Array<DocumentPermissionPresentationModel | DocumentPropertyValuePermissionPresentationModel | DocumentTypePermissionPresentationModel | UnknownTypePermissionPresentationModel>;
     id: string;
     isDeletable: boolean;
     aliasCanBeChanged: boolean;
@@ -3771,7 +3819,7 @@ export type GetTreeDataTypeSiblingsResponses = {
     /**
      * OK
      */
-    200: Array<DataTypeTreeItemResponseModel>;
+    200: SubsetDataTypeTreeItemResponseModel;
 };
 
 export type GetTreeDataTypeSiblingsResponse = GetTreeDataTypeSiblingsResponses[keyof GetTreeDataTypeSiblingsResponses];
@@ -4709,7 +4757,7 @@ export type GetTreeDocumentBlueprintSiblingsResponses = {
     /**
      * OK
      */
-    200: Array<DocumentBlueprintTreeItemResponseModel>;
+    200: SubsetDocumentBlueprintTreeItemResponseModel;
 };
 
 export type GetTreeDocumentBlueprintSiblingsResponse = GetTreeDocumentBlueprintSiblingsResponses[keyof GetTreeDocumentBlueprintSiblingsResponses];
@@ -5550,7 +5598,7 @@ export type GetTreeDocumentTypeSiblingsResponses = {
     /**
      * OK
      */
-    200: Array<DocumentTypeTreeItemResponseModel>;
+    200: SubsetDocumentTypeTreeItemResponseModel;
 };
 
 export type GetTreeDocumentTypeSiblingsResponse = GetTreeDocumentTypeSiblingsResponses[keyof GetTreeDocumentTypeSiblingsResponses];
@@ -7156,6 +7204,7 @@ export type GetTreeDocumentSiblingsData = {
         target?: string;
         before?: number;
         after?: number;
+        dataTypeId?: string;
     };
     url: '/umbraco/management/api/v1/tree/document/siblings';
 };
@@ -7175,7 +7224,7 @@ export type GetTreeDocumentSiblingsResponses = {
     /**
      * OK
      */
-    200: Array<DocumentTreeItemResponseModel>;
+    200: SubsetDocumentTreeItemResponseModel;
 };
 
 export type GetTreeDocumentSiblingsResponse = GetTreeDocumentSiblingsResponses[keyof GetTreeDocumentSiblingsResponses];
@@ -9070,7 +9119,7 @@ export type GetTreeMediaTypeSiblingsResponses = {
     /**
      * OK
      */
-    200: Array<MediaTypeTreeItemResponseModel>;
+    200: SubsetMediaTypeTreeItemResponseModel;
 };
 
 export type GetTreeMediaTypeSiblingsResponse = GetTreeMediaTypeSiblingsResponses[keyof GetTreeMediaTypeSiblingsResponses];
@@ -10016,6 +10065,7 @@ export type GetTreeMediaSiblingsData = {
         target?: string;
         before?: number;
         after?: number;
+        dataTypeId?: string;
     };
     url: '/umbraco/management/api/v1/tree/media/siblings';
 };
@@ -10035,7 +10085,7 @@ export type GetTreeMediaSiblingsResponses = {
     /**
      * OK
      */
-    200: Array<MediaTreeItemResponseModel>;
+    200: SubsetMediaTreeItemResponseModel;
 };
 
 export type GetTreeMediaSiblingsResponse = GetTreeMediaSiblingsResponses[keyof GetTreeMediaSiblingsResponses];
@@ -14170,7 +14220,7 @@ export type GetTreeTemplateSiblingsResponses = {
     /**
      * OK
      */
-    200: Array<NamedEntityTreeItemResponseModel>;
+    200: SubsetNamedEntityTreeItemResponseModel;
 };
 
 export type GetTreeTemplateSiblingsResponse = GetTreeTemplateSiblingsResponses[keyof GetTreeTemplateSiblingsResponses];

src/Umbraco.Web.UI.Client/src/packages/core/repository/types.ts

@@ -2,8 +2,14 @@ import type { UmbDataSourceErrorResponse, UmbDataSourceResponse } from './data-s
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 
 export interface UmbPagedModel<T> {
-	total: number;
 	items: Array<T>;
+	total: number;
+}
+
+export interface UmbTargetPagedModel<T> extends UmbPagedModel<T> {
+	// TODO: v18: make mandatory
+	totalAfter?: number;
+	totalBefore?: number;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

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

@@ -1 +1,2 @@
 export * from './tree-load-more-button.element.js';
+export * from './tree-load-prev-button.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/tree-load-prev-button.element.ts

@@ -0,0 +1,35 @@
+import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-tree-load-prev-button')
+export class UmbTreeLoadPrevButtonElement extends UmbLitElement {
+	override render() {
+		return html`<uui-button
+			data-mark="tree:load-prev"
+			id="load-prev"
+			look="secondary"
+			label=${this.localize.term('actions_loadMore')}></uui-button>`;
+	}
+
+	static override readonly styles = css`
+		:host {
+			position: relative;
+			display: block;
+			padding-left: var(--uui-size-space-3);
+			margin-right: var(--uui-size-space-2);
+			margin-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4));
+		}
+
+		uui-button {
+			width: 100%;
+			height: var(--uui-size---uui-size-layout-3);
+			--uui-box-border-radius: calc(var(--uui-border-radius) * 2);
+		}
+	`;
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-tree-load-prev-button': UmbTreeLoadPrevButtonElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/tree/data/tree-data-source.interface.ts

@@ -4,7 +4,7 @@ import type {
 	UmbTreeChildrenOfRequestArgs,
 	UmbTreeRootItemsRequestArgs,
 } from './types.js';
-import type { UmbPagedModel, UmbDataSourceResponse } from '@umbraco-cms/backoffice/repository';
+import type { UmbDataSourceResponse, UmbTargetPagedModel } from '@umbraco-cms/backoffice/repository';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 /**
@@ -32,18 +32,18 @@ export interface UmbTreeDataSource<
 	 * @returns {*}  {Promise<UmbDataSourceResponse<UmbPagedModel<TreeItemType>>>}
 	 * @memberof UmbTreeDataSource
 	 */
-	getRootItems(args: TreeRootItemsRequestArgsType): Promise<UmbDataSourceResponse<UmbPagedModel<TreeItemType>>>;
+	getRootItems(args: TreeRootItemsRequestArgsType): Promise<UmbDataSourceResponse<UmbTargetPagedModel<TreeItemType>>>;
 
 	/**
 	 * Gets the children of the given parent item.
-	 * @returns {*}  {Promise<UmbDataSourceResponse<UmbPagedModel<TreeItemType>>}
+	 * @returns {Promise<UmbDataSourceResponse<UmbPagedModel<TreeItemType>>>}
 	 * @memberof UmbTreeDataSource
 	 */
-	getChildrenOf(args: TreeChildrenOfRequestArgsType): Promise<UmbDataSourceResponse<UmbPagedModel<TreeItemType>>>;
+	getChildrenOf(args: TreeChildrenOfRequestArgsType): Promise<UmbDataSourceResponse<UmbTargetPagedModel<TreeItemType>>>;
 
 	/**
 	 * Gets the ancestors of the given item.
-	 * @returns {*}  {Promise<UmbDataSourceResponse<Array<TreeItemType>>}
+	 * @returns {Promise<UmbDataSourceResponse<Array<TreeItemType>>>}
 	 * @memberof UmbTreeDataSource
 	 */
 	getAncestorsOf(args: TreeAncestorsOfRequestArgsType): Promise<UmbDataSourceResponse<Array<TreeItemType>>>;

src/Umbraco.Web.UI.Client/src/packages/core/tree/data/tree-repository.interface.ts

@@ -5,9 +5,9 @@ import type {
 	UmbTreeRootItemsRequestArgs,
 } from './types.js';
 import type {
-	UmbPagedModel,
 	UmbRepositoryResponse,
 	UmbRepositoryResponseWithAsObservable,
+	UmbTargetPagedModel,
 } from '@umbraco-cms/backoffice/repository';
 import type { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
@@ -39,7 +39,7 @@ export interface UmbTreeRepository<
 	 */
 	requestTreeRootItems: (
 		args: TreeRootItemsRequestArgsType,
-	) => Promise<UmbRepositoryResponseWithAsObservable<UmbPagedModel<TreeItemType>, TreeItemType[]>>;
+	) => Promise<UmbRepositoryResponseWithAsObservable<UmbTargetPagedModel<TreeItemType>, TreeItemType[]>>;
 
 	/**
 	 * Requests the children of the given parent item.
@@ -48,7 +48,7 @@ export interface UmbTreeRepository<
 	 */
 	requestTreeItemsOf: (
 		args: TreeChildrenOfRequestArgsType,
-	) => Promise<UmbRepositoryResponseWithAsObservable<UmbPagedModel<TreeItemType>, TreeItemType[]>>;
+	) => Promise<UmbRepositoryResponseWithAsObservable<UmbTargetPagedModel<TreeItemType>, TreeItemType[]>>;
 
 	/**
 	 * Requests the ancestors of the given item.