Feature: Client Cache for Document Type and Data Type Detail Models (#19904)

* 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

* Create cache.test.ts

* use sync method to lookup data type item

* use correct alias

Author: madsrasmussen

src/Umbraco.Web.UI.Client/package-lock.json

@@ -60,6 +60,7 @@
 		"./lit-element": "./dist-cms/packages/core/lit-element/index.js",
 		"./localization": "./dist-cms/packages/core/localization/index.js",
 		"./log-viewer": "./dist-cms/packages/log-viewer/index.js",
+		"./management-api": "./dist-cms/packages/management-api/index.js",
 		"./markdown-editor": "./dist-cms/packages/markdown-editor/index.js",
 		"./media-type": "./dist-cms/packages/media/media-types/index.js",
 		"./media": "./dist-cms/packages/media/media/index.js",
@@ -126,6 +127,7 @@
 		"./external/monaco-editor": "./dist-cms/external/monaco-editor/index.js",
 		"./external/openid": "./dist-cms/external/openid/index.js",
 		"./external/rxjs": "./dist-cms/external/rxjs/index.js",
+		"./external/signalr": "./dist-cms/external/signalr/index.js",
 		"./external/tiptap": "./dist-cms/external/tiptap/index.js",
 		"./external/uui": "./dist-cms/external/uui/index.js"
 	},

src/Umbraco.Web.UI.Client/package.json

@@ -15,6 +15,7 @@ const CORE_PACKAGES = [
 	import('../../packages/block/umbraco-package.js'),
 	import('../../packages/clipboard/umbraco-package.js'),
 	import('../../packages/code-editor/umbraco-package.js'),
+	import('../../packages/content/umbraco-package.js'),
 	import('../../packages/data-type/umbraco-package.js'),
 	import('../../packages/dictionary/umbraco-package.js'),
 	import('../../packages/documents/umbraco-package.js'),
@@ -24,6 +25,7 @@ const CORE_PACKAGES = [
 	import('../../packages/help/umbraco-package.js'),
 	import('../../packages/language/umbraco-package.js'),
 	import('../../packages/log-viewer/umbraco-package.js'),
+	import('../../packages/management-api/umbraco-package.js'),
 	import('../../packages/markdown-editor/umbraco-package.js'),
 	import('../../packages/media/umbraco-package.js'),
 	import('../../packages/members/umbraco-package.js'),
@@ -48,7 +50,6 @@ const CORE_PACKAGES = [
 	import('../../packages/umbraco-news/umbraco-package.js'),
 	import('../../packages/user/umbraco-package.js'),
 	import('../../packages/webhook/umbraco-package.js'),
-	import('../../packages/content/umbraco-package.js'),
 ];
 
 @customElement('umb-backoffice')

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts

@@ -0,0 +1 @@
+export * from '@microsoft/signalr';

src/Umbraco.Web.UI.Client/src/external/signalr/index.ts

@@ -0,0 +1,11 @@
+{
+	"name": "@umbraco-backoffice/signalr",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build"
+	},
+	"dependencies": {
+		"@microsoft/signalr": "9.0.6"
+	}
+}

src/Umbraco.Web.UI.Client/src/external/signalr/package.json

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import { rmSync } from 'fs';
+import { getDefaultConfig } from '../../vite-config-base';
+
+const dist = '../../../dist-cms/external/signalr';
+
+// delete the unbundled dist folder
+rmSync(dist, { recursive: true, force: true });
+
+export default defineConfig({
+	...getDefaultConfig({
+		dist,
+		base: '/umbraco/backoffice/external/signalr',
+		entry: {
+			index: './index.ts',
+		},
+	}),
+});

src/Umbraco.Web.UI.Client/src/external/signalr/vite.config.ts

@@ -51,7 +51,6 @@ export class UmbBlockElementManager<LayoutDataType extends UmbBlockLayoutBaseMod
 	}
 
 	readonly #dataTypeItemManager = new UmbDataTypeItemRepositoryManager(this);
-	#dataTypeSchemaAliasMap = new Map<string, string>();
 
 	readonly structure = new UmbContentTypeStructureManager<UmbContentTypeModel>(
 		this,
@@ -91,18 +90,6 @@ export class UmbBlockElementManager<LayoutDataType extends UmbBlockLayoutBaseMod
 			},
 			null,
 		);
-		this.observe(
-			this.#dataTypeItemManager.items,
-			(dataTypes) => {
-				// Make a map of the data type unique and editorAlias:
-				this.#dataTypeSchemaAliasMap = new Map(
-					dataTypes.map((dataType) => {
-						return [dataType.unique, dataType.propertyEditorSchemaAlias];
-					}),
-				);
-			},
-			null,
-		);
 	}
 
 	public isLoaded() {
@@ -217,8 +204,9 @@ export class UmbBlockElementManager<LayoutDataType extends UmbBlockLayoutBaseMod
 			throw new Error(`Property alias "${alias}" not found.`);
 		}
 
-		// TODO: I think we should await this in the same way as we do for Content Detail Workspace Context. [NL]
-		const editorAlias = this.#dataTypeSchemaAliasMap.get(property.dataType.unique);
+		const dataTypeItem = await this.#dataTypeItemManager.getItemByUnique(property.dataType.unique);
+		const editorAlias = dataTypeItem?.propertyEditorSchemaAlias;
+
 		if (!editorAlias) {
 			throw new Error(`Editor Alias of "${property.dataType.unique}" not found.`);
 		}

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts

@@ -1,5 +1,5 @@
 import type { UmbDataTypeDetailModel } from '../../types.js';
-import { UmbDataTypeServerDataSource } from './data-type-detail.server.data-source.js';
+import { UmbDataTypeServerDataSource } from './server-data-source/data-type-detail.server.data-source.js';
 import type { UmbDataTypeDetailStore } from './data-type-detail.store.js';
 import { UMB_DATA_TYPE_DETAIL_STORE_CONTEXT } from './data-type-detail.store.context-token.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';