refactor merge data flow

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

@@ -72,8 +72,6 @@ export class UmbDataTypeWorkspaceContext
 
 	#settingsDefaultData?: Array<PropertyEditorSettingsDefaultData>;
 
-	#propertyEditorUISettingsSchemaAlias?: string;
-
 	#propertyEditorUiIcon = new UmbStringState<string | null>(null);
 	readonly propertyEditorUiIcon = this.#propertyEditorUiIcon.asObservable();
 
@@ -82,6 +80,8 @@ export class UmbDataTypeWorkspaceContext
 
 	constructor(host: UmbControllerHost) {
 		super(host, 'Umb.Workspace.DataType');
+
+		this.#observePropertyEditorSchemaAlias();
 		this.#observePropertyEditorUIAlias();
 
 		this.routes.setRoutes([
@@ -121,7 +121,7 @@ export class UmbDataTypeWorkspaceContext
 		this.#propertyEditorUISettingsDefaultData = [];
 		this.#settingsDefaultData = undefined;
 
-		this._mergeConfigProperties();
+		this.#mergeConfigProperties();
 	}
 
 	// Hold the last set property editor ui alias, so we know when it changes, so we can reset values. [NL]
@@ -131,30 +131,13 @@ export class UmbDataTypeWorkspaceContext
 		this.observe(
 			this.propertyEditorUiAlias,
 			async (propertyEditorUiAlias) => {
-				const previousPropertyEditorUIAlias = this.#lastPropertyEditorUIAlias;
-				this.#lastPropertyEditorUIAlias = propertyEditorUiAlias;
+				this.#propertyEditorUISettingsProperties = [];
+				this.#propertyEditorUISettingsDefaultData = [];
+
 				// we only want to react on the change if the alias is set or null. When it is undefined something is still loading
 				if (propertyEditorUiAlias === undefined) return;
 
-				// if the property editor ui alias is not set, we use the default alias from the schema
-				if (propertyEditorUiAlias === null) {
-					await this.#observePropertyEditorSchemaAlias();
-					if (this.#propertyEditorSchemaConfigDefaultUIAlias !== null) {
-						this.setPropertyEditorUiAlias(this.#propertyEditorSchemaConfigDefaultUIAlias);
-					}
-				} else {
-					await this.#setPropertyEditorUIConfig(propertyEditorUiAlias);
-					this.setPropertyEditorSchemaAlias(this.#propertyEditorUISettingsSchemaAlias!);
-					await this.#observePropertyEditorSchemaAlias();
-				}
-
-				if (
-					this.getIsNew() ||
-					(previousPropertyEditorUIAlias && previousPropertyEditorUIAlias !== propertyEditorUiAlias)
-				) {
-					this.#transferConfigDefaultData();
-				}
-				this._mergeConfigProperties();
+				this.#observePropertyEditorUIConfig(propertyEditorUiAlias);
 			},
 			'editorUiAlias',
 		);
@@ -164,13 +147,19 @@ export class UmbDataTypeWorkspaceContext
 		return this.observe(
 			this.propertyEditorSchemaAlias,
 			(propertyEditorSchemaAlias) => {
-				this.#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias);
+				this.#propertyEditorSchemaSettingsProperties = [];
+				this.#propertyEditorSchemaSettingsDefaultData = [];
+				this.#observePropertyEditorSchemaConfig(propertyEditorSchemaAlias);
 			},
 			'schemaAlias',
-		).asPromise();
+		);
 	}
 
-	#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias?: string) {
+	#observePropertyEditorSchemaConfig(propertyEditorSchemaAlias?: string) {
+		if (!propertyEditorSchemaAlias) {
+			this.removeUmbControllerByAlias('schema');
+			return;
+		}
 		this.observe(
 			propertyEditorSchemaAlias
 				? umbExtensionsRegistry.byTypeAndAlias('propertyEditorSchema', propertyEditorSchemaAlias)
@@ -183,36 +172,56 @@ export class UmbDataTypeWorkspaceContext
 				}));
 				this.#propertyEditorSchemaSettingsDefaultData = manifest?.meta.settings?.defaultData || [];
 				this.#propertyEditorSchemaConfigDefaultUIAlias = manifest?.meta.defaultPropertyEditorUiAlias || null;
+				if (this.#propertyEditorSchemaConfigDefaultUIAlias && this.getPropertyEditorUiAlias() === null) {
+					// Fallback to the default property editor ui for this property editor schema.
+					this.setPropertyEditorUiAlias(this.#propertyEditorSchemaConfigDefaultUIAlias);
+				}
+				this.#mergeConfigProperties();
 			},
 			'schema',
 		);
 	}
 
-	#setPropertyEditorUIConfig(propertyEditorUIAlias: string) {
-		return this.observe(
+	#observePropertyEditorUIConfig(propertyEditorUIAlias: string | null) {
+		if (!propertyEditorUIAlias) {
+			this.removeUmbControllerByAlias('editorUi');
+			return;
+		}
+		this.observe(
 			umbExtensionsRegistry.byTypeAndAlias('propertyEditorUi', propertyEditorUIAlias),
 			(manifest) => {
 				this.#propertyEditorUiIcon.setValue(manifest?.meta.icon || null);
 				this.#propertyEditorUiName.setValue(manifest?.name || null);
 
-				this.#propertyEditorUISettingsSchemaAlias = manifest?.meta.propertyEditorSchemaAlias;
 				// Maps properties to have a weight, so they can be sorted, notice UI properties have a +1000 weight compared to schema properties.
 				this.#propertyEditorUISettingsProperties = (manifest?.meta.settings?.properties ?? []).map((x, i) => ({
 					...x,
 					weight: x.weight ?? 1000 + i,
 				}));
 				this.#propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || [];
+				this.setPropertyEditorSchemaAlias(manifest?.meta.propertyEditorSchemaAlias);
+				this.#mergeConfigProperties();
 			},
 			'editorUi',
-		).asPromise();
+		);
 	}
 
-	private _mergeConfigProperties() {
+	#mergeConfigProperties() {
 		if (this.#propertyEditorSchemaSettingsProperties && this.#propertyEditorUISettingsProperties) {
 			// Reset the value to this array, and then afterwards append:
 			this.#properties.setValue(this.#propertyEditorSchemaSettingsProperties);
 			// Append the UI settings properties to the schema properties, so they can override the schema properties:
 			this.#properties.append(this.#propertyEditorUISettingsProperties);
+
+			// If new or if the alias was changed then set default values.
+			const previousPropertyEditorUIAlias = this.#lastPropertyEditorUIAlias;
+			this.#lastPropertyEditorUIAlias = this.getPropertyEditorUiAlias();
+			if (
+				this.getIsNew() ||
+				(previousPropertyEditorUIAlias && previousPropertyEditorUIAlias !== this.#lastPropertyEditorUIAlias)
+			) {
+				this.#transferConfigDefaultData();
+			}
 		}
 	}
 
@@ -301,9 +310,15 @@ export class UmbDataTypeWorkspaceContext
 		this.#currentData.update({ name });
 	}
 
+	getPropertyEditorSchemaAlias() {
+		return this.#currentData.getValue()?.editorAlias;
+	}
 	setPropertyEditorSchemaAlias(alias?: string) {
 		this.#currentData.update({ editorAlias: alias });
 	}
+	getPropertyEditorUiAlias() {
+		return this.#currentData.getValue()?.editorUiAlias;
+	}
 	setPropertyEditorUiAlias(alias?: string) {
 		this.#currentData.update({ editorUiAlias: alias });
 	}