Feature: Client Cache for Document Item Models (#19923)

* extend controller base

* extend controller base

* add package for management api

* add signalr as external package

* connect to server event hub

* do no act on undefined

* add event subject

* correct alias

* export token

* add helper methods

* cache server responses

* fix import

* use helpers

* add detail request manager

* implement for document type

* implement for data type

* add method for update

* add support for create method

* align code

* Update detail-request.manager.ts

* move explicit naming

* move into folder

* collect server code in folder

* add implementation for data type request manager

* implement for document type

* only cache when we have connection to the server events

* update

* fix imports

* introduce item cache

* call trough get items controller

* remove log

* add unit tests for item cache

* Create cache.test.ts

* use sync method to lookup data type item

* use correct alias

* remove unused code

* split detail cache invalidation from request manager

* introduce item cache invalidation manager

* remove unused

* invalidate documents when document types changes

* align naming

* add method to get unique

* use server model instead of mapping

* call method

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: madsrasmussen

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));
+	}
+}