Feature: Client Cache for Document Item Models

src/Umbraco.Web.UI.Client/src/packages/data-type/entry-point.ts

@@ -0,0 +1,12 @@
+import { UmbManagementApiDataTypeDetailDataCacheInvalidationManager } from './repository/detail/server-data-source/data-type-detail.server.cache-invalidation.manager.js';
+import type { UmbEntryPointOnInit, UmbEntryPointOnUnload } from '@umbraco-cms/backoffice/extension-api';
+
+let detailDataCacheInvalidationManager: UmbManagementApiDataTypeDetailDataCacheInvalidationManager | undefined;
+
+export const onInit: UmbEntryPointOnInit = (host) => {
+	detailDataCacheInvalidationManager = new UmbManagementApiDataTypeDetailDataCacheInvalidationManager(host);
+};
+
+export const onUnload: UmbEntryPointOnUnload = () => {
+	detailDataCacheInvalidationManager?.destroy();
+};

src/Umbraco.Web.UI.Client/src/packages/data-type/manifests.ts

@@ -21,4 +21,10 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...searchProviderManifests,
 	...treeManifests,
 	...workspaceManifests,
+	{
+		name: 'Data Type Backoffice Entry Point',
+		alias: 'Umb.EntryPoint.DataType',
+		type: 'backofficeEntryPoint',
+		js: () => import('./entry-point.js'),
+	},
 ];

src/Umbraco.Web.UI.Client/src/packages/data-type/repository/detail/server-data-source/data-type-detail.server.cache-invalidation.manager.ts

@@ -0,0 +1,13 @@
+import { dataTypeDetailCache } from './data-type-detail.server.cache.js';
+import { UmbManagementApiDetailDataCacheInvalidationManager } from '@umbraco-cms/backoffice/management-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+
+export class UmbManagementApiDataTypeDetailDataCacheInvalidationManager extends UmbManagementApiDetailDataCacheInvalidationManager<DataTypeResponseModel> {
+	constructor(host: UmbControllerHost) {
+		super(host, {
+			dataCache: dataTypeDetailCache,
+			eventSources: ['Umbraco:CMS:DataType'],
+		});
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/data-type/repository/detail/server-data-source/data-type-detail.server.request-manager.ts

@@ -21,7 +21,6 @@ export class UmbManagementApiDataTypeDetailDataRequestManager extends UmbManagem
 			update: (id: string, body: UpdateDataTypeRequestModel) => DataTypeService.putDataTypeById({ path: { id }, body }),
 			delete: (id: string) => DataTypeService.deleteDataTypeById({ path: { id } }),
 			dataCache: dataTypeDetailCache,
-			serverEventSource: 'Umbraco:CMS:DataType',
 		});
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/entry-point.ts

@@ -0,0 +1,12 @@
+import { UmbManagementApiDocumentTypeDetailDataCacheInvalidationManager } from './repository/detail/server-data-source/document-type-detail.server.cache-invalidation.manager.js';
+import type { UmbEntryPointOnInit, UmbEntryPointOnUnload } from '@umbraco-cms/backoffice/extension-api';
+
+let detailDataCacheInvalidationManager: UmbManagementApiDocumentTypeDetailDataCacheInvalidationManager | undefined;
+
+export const onInit: UmbEntryPointOnInit = (host) => {
+	detailDataCacheInvalidationManager = new UmbManagementApiDocumentTypeDetailDataCacheInvalidationManager(host);
+};
+
+export const onUnload: UmbEntryPointOnUnload = () => {
+	detailDataCacheInvalidationManager?.destroy();
+};

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/manifests.ts

@@ -19,4 +19,10 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...searchManifests,
 	...treeManifests,
 	...workspaceManifests,
+	{
+		name: 'Document Type Backoffice Entry Point',
+		alias: 'Umb.EntryPoint.DocumentType',
+		type: 'backofficeEntryPoint',
+		js: () => import('./entry-point.js'),
+	},
 ];

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/detail/server-data-source/document-type-detail.server.cache-invalidation.manager.ts

@@ -0,0 +1,13 @@
+import { documentTypeDetailCache } from './document-type-detail.server.cache.js';
+import { UmbManagementApiDetailDataCacheInvalidationManager } from '@umbraco-cms/backoffice/management-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+
+export class UmbManagementApiDocumentTypeDetailDataCacheInvalidationManager extends UmbManagementApiDetailDataCacheInvalidationManager<DocumentTypeResponseModel> {
+	constructor(host: UmbControllerHost) {
+		super(host, {
+			dataCache: documentTypeDetailCache,
+			eventSources: ['Umbraco:CMS:DocumentType'],
+		});
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/detail/server-data-source/document-type-detail.server.request-manager.ts

@@ -22,7 +22,6 @@ export class UmbManagementApiDocumentTypeDetailDataRequestManager extends UmbMan
 				DocumentTypeService.putDocumentTypeById({ path: { id }, body }),
 			delete: (id: string) => DocumentTypeService.deleteDocumentTypeById({ path: { id } }),
 			dataCache: documentTypeDetailCache,
-			serverEventSource: 'Umbraco:CMS:DocumentType',
 		});
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entry-point.ts

@@ -0,0 +1,12 @@
+import { UmbManagementApiDocumentItemDataCacheInvalidationManager } from './item/repository/document-item.server.cache-invalidation.manager.js';
+import type { UmbEntryPointOnInit, UmbEntryPointOnUnload } from '@umbraco-cms/backoffice/extension-api';
+
+let itemDataCacheInvalidationManager: UmbManagementApiDocumentItemDataCacheInvalidationManager | undefined;
+
+export const onInit: UmbEntryPointOnInit = (host) => {
+	itemDataCacheInvalidationManager = new UmbManagementApiDocumentItemDataCacheInvalidationManager(host);
+};
+
+export const onUnload: UmbEntryPointOnUnload = () => {
+	itemDataCacheInvalidationManager?.destroy();
+};

src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/repository/document-item.server.cache-invalidation.manager.ts

@@ -0,0 +1,43 @@
+import { documentItemCache } from './document-item.server.cache.js';
+import {
+	UmbManagementApiItemDataCacheInvalidationManager,
+	type UmbManagementApiServerEventModel,
+} from '@umbraco-cms/backoffice/management-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+
+export class UmbManagementApiDocumentItemDataCacheInvalidationManager extends UmbManagementApiItemDataCacheInvalidationManager<DocumentItemResponseModel> {
+	constructor(host: UmbControllerHost) {
+		super(host, {
+			dataCache: documentItemCache,
+			/* The Document item model includes info about the Document Type. 
+			We need to invalidate the cache for both Document and DocumentType events. */
+			eventSources: ['Umbraco:CMS:Document', 'Umbraco:CMS:DocumentType'],
+		});
+	}
+
+	protected override _onServerEvent(event: UmbManagementApiServerEventModel) {
+		if (event.eventSource === 'Umbraco:CMS:DocumentType') {
+			this.#onDocumentTypeChange(event);
+		} else {
+			this.#onDocumentChange(event);
+		}
+	}
+
+	#onDocumentChange(event: UmbManagementApiServerEventModel) {
+		// Invalidate the specific document
+		const documentId = event.key;
+		this._dataCache.delete(documentId);
+	}
+
+	#onDocumentTypeChange(event: UmbManagementApiServerEventModel) {
+		// Invalidate all documents of the specified Document Type
+		const documentTypeId = event.key;
+		const documentIds = this._dataCache
+			.getAll()
+			.filter((cachedItem) => cachedItem.documentType.id === documentTypeId)
+			.map((item) => item.id);
+
+		documentIds.forEach((id) => this._dataCache.delete(id));
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/repository/document-item.server.cache.ts

@@ -0,0 +1,6 @@
+import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { UmbManagementApiItemDataCache } from '@umbraco-cms/backoffice/management-api';
+
+const documentItemCache = new UmbManagementApiItemDataCache<DocumentItemResponseModel>();
+
+export { documentItemCache };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/repository/document-item.server.data-source.ts

@@ -1,10 +1,9 @@
 import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js';
 import type { UmbDocumentItemModel } from './types.js';
+import { UmbManagementApiDocumentItemDataRequestManager } from './document-item.server.request-manager.js';
 import type { DocumentItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
-import { DocumentService } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository';
-import { UmbItemDataApiGetRequestController } from '@umbraco-cms/backoffice/entity-item';
 
 /**
  * A data source for Document items that fetches data from the server
@@ -15,6 +14,8 @@ export class UmbDocumentItemServerDataSource extends UmbItemServerDataSourceBase
 	DocumentItemResponseModel,
 	UmbDocumentItemModel
 > {
+	#itemRequestManager = new UmbManagementApiDocumentItemDataRequestManager(this);
+
 	/**
 	 * Creates an instance of UmbDocumentItemServerDataSource.
 	 * @param {UmbControllerHost} host - The controller host for this controller to be appended to
@@ -29,13 +30,7 @@ export class UmbDocumentItemServerDataSource extends UmbItemServerDataSourceBase
 	override async getItems(uniques: Array<string>) {
 		if (!uniques) throw new Error('Uniques are missing');
 
-		const itemRequestManager = new UmbItemDataApiGetRequestController(this, {
-			// eslint-disable-next-line local-rules/no-direct-api-import
-			api: (args) => DocumentService.getItemDocument({ query: { id: args.uniques } }),
-			uniques,
-		});
-
-		const { data, error } = await itemRequestManager.request();
+		const { data, error } = await this.#itemRequestManager.getItems(uniques);
 
 		return { data: this._getMappedItems(data), error };
 	}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/repository/document-item.server.request-manager.ts

@@ -0,0 +1,15 @@
+/* eslint-disable local-rules/no-direct-api-import */
+import { documentItemCache } from './document-item.server.cache.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { DocumentService, type DocumentItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { UmbManagementApiItemDataRequestManager } from '@umbraco-cms/backoffice/management-api';
+
+export class UmbManagementApiDocumentItemDataRequestManager extends UmbManagementApiItemDataRequestManager<DocumentItemResponseModel> {
+	constructor(host: UmbControllerHost) {
+		super(host, {
+			getItems: (ids: Array<string>) => DocumentService.getItemDocument({ query: { id: ids } }),
+			dataCache: documentItemCache,
+			getUniqueMethod: (item: DocumentItemResponseModel) => item.id,
+		});
+	}
+}

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

@@ -42,4 +42,10 @@ export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> =
 	...urlManifests,
 	...userPermissionManifests,
 	...workspaceManifests,
+	{
+		name: 'Document Backoffice Entry Point',
+		alias: 'Umb.BackofficeEntryPoint.Document',
+		type: 'backofficeEntryPoint',
+		js: () => import('./entry-point.js'),
+	},
 ];

src/Umbraco.Web.UI.Client/src/packages/management-api/detail/cache-invalidation.manager.ts

@@ -0,0 +1,57 @@
+import { UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT } from '../server-event/constants.js';
+import type { UmbManagementApiServerEventModel } from '../server-event/types.js';
+import type { UmbManagementApiDetailDataCache } from './cache.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+
+export interface UmbManagementApiDetailDataInvalidationManagerArgs<DetailResponseModelType> {
+	dataCache: UmbManagementApiDetailDataCache<DetailResponseModelType>;
+	eventSources: Array<string>;
+}
+
+export class UmbManagementApiDetailDataCacheInvalidationManager<DetailResponseModelType> extends UmbControllerBase {
+	protected _dataCache: UmbManagementApiDetailDataCache<DetailResponseModelType>;
+	#eventSources: Array<string>;
+	#serverEventContext?: typeof UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT.TYPE;
+
+	constructor(
+		host: UmbControllerHost,
+		args: UmbManagementApiDetailDataInvalidationManagerArgs<DetailResponseModelType>,
+	) {
+		super(host);
+		{
+			this._dataCache = args.dataCache;
+			this.#eventSources = args.eventSources;
+
+			this.consumeContext(UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT, (context) => {
+				this.#serverEventContext = context;
+				this.#observeServerEvents();
+			});
+		}
+	}
+
+	/**
+	 * Handles server events
+	 * @protected
+	 * @param {UmbManagementApiServerEventModel} event - The server event to handle
+	 * @memberof UmbManagementApiDetailDataCacheInvalidationManager
+	 */
+	protected _onServerEvent(event: UmbManagementApiServerEventModel) {
+		this._dataCache.delete(event.key);
+	}
+
+	#observeServerEvents() {
+		this.observe(
+			this.#serverEventContext?.byEventSourcesAndEventTypes(this.#eventSources, ['Updated', 'Deleted']),
+			(event) => {
+				if (!event) return;
+				this._onServerEvent(event);
+			},
+			'umbObserveServerEvents',
+		);
+	}
+
+	override destroy(): void {
+		this._dataCache.clear();
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/management-api/detail/cache.test.ts

@@ -24,6 +24,10 @@ describe('UmbManagementApiDetailDataCache', () => {
 				expect(cache).to.have.property('get').that.is.a('function');
 			});
 
+			it('has a getAll method', () => {
+				expect(cache).to.have.property('getAll').that.is.a('function');
+			});
+
 			it('has a delete method', () => {
 				expect(cache).to.have.property('delete').that.is.a('function');
 			});
@@ -69,6 +73,14 @@ describe('UmbManagementApiDetailDataCache', () => {
 		});
 	});
 
+	describe('GetAll', () => {
+		it('returns all items from the cache', () => {
+			cache.set('item1', { id: 'item1' });
+			cache.set('item2', { id: 'item2' });
+			expect(cache.getAll()).to.deep.equal([{ id: 'item1' }, { id: 'item2' }]);
+		});
+	});
+
 	describe('Delete', () => {
 		it('removes an item from the cache', () => {
 			cache.set('item1', { id: 'item1' });

src/Umbraco.Web.UI.Client/src/packages/management-api/detail/cache.ts

@@ -1,16 +1,16 @@
 // Keep internal
-interface UmbCacheEntryModel<DataModelType> {
+interface UmbCacheEntryModel<DetailDataModelType> {
 	id: string;
-	data: DataModelType;
+	data: DetailDataModelType;
 }
 
 /**
  * A runtime cache for storing entity detail data from the Management Api
  * @class UmbManagementApiDetailDataCache
- * @template DataModelType
+ * @template DetailDataModelType
  */
-export class UmbManagementApiDetailDataCache<DataModelType> {
-	#entries: Map<string, UmbCacheEntryModel<DataModelType>> = new Map();
+export class UmbManagementApiDetailDataCache<DetailDataModelType> {
+	#entries: Map<string, UmbCacheEntryModel<DetailDataModelType>> = new Map();
 
 	/**
 	 * Checks if an entry exists in the cache
@@ -25,11 +25,11 @@ export class UmbManagementApiDetailDataCache<DataModelType> {
 	/**
 	 * Adds an entry to the cache
 	 * @param {string} id - The ID of the entry to add
-	 * @param {DataModelType} data - The data to cache
+	 * @param {DetailDataModelType} data - The data to cache
 	 * @memberof UmbManagementApiDetailDataCache
 	 */
-	set(id: string, data: DataModelType): void {
-		const cacheEntry: UmbCacheEntryModel<DataModelType> = {
+	set(id: string, data: DetailDataModelType): void {
+		const cacheEntry: UmbCacheEntryModel<DetailDataModelType> = {
 			id: id,
 			data,
 		};
@@ -40,14 +40,23 @@ export class UmbManagementApiDetailDataCache<DataModelType> {
 	/**
 	 * Retrieves an entry from the cache
 	 * @param {string} id - The ID of the entry to retrieve
-	 * @returns {DataModelType | undefined} - The cached entry or undefined if not found
+	 * @returns {DetailDataModelType | undefined} - The cached entry or undefined if not found
 	 * @memberof UmbManagementApiDetailDataCache
 	 */
-	get(id: string): DataModelType | undefined {
+	get(id: string): DetailDataModelType | undefined {
 		const entry = this.#entries.get(id);
 		return entry ? entry.data : undefined;
 	}
 
+	/**
+	 * Retrieves all entries from the cache
+	 * @returns {Array<DetailDataModelType>} - An array of all cached entries
+	 * @memberof UmbManagementApiItemDataCache
+	 */
+	getAll(): Array<DetailDataModelType> {
+		return Array.from(this.#entries.values()).map((entry) => entry.data);
+	}
+
 	/**
 	 * Deletes an entry from the cache
 	 * @param {string} id - The ID of the entry to delete