Merge remote-tracking branch 'origin/feature/property-context' into feature/refactor-RxJS-stores

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/performance-profiling/dashboard-performance-profiling.element.ts

@@ -30,8 +30,8 @@ export class UmbDashboardPerformanceProfilingElement extends UmbLitElement {
 	@state()
 	private _profilingPerformance = false;
 
-	connectedCallback(): void {
-		super.connectedCallback();
+	constructor() {
+		super();
 		this._getProfilingStatus();
 		this._profilingPerformance = localStorage.getItem('profilingPerformance') === 'true';
 	}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/content-property/content-property.element.ts

@@ -4,10 +4,11 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
 
 import { UmbDataTypeStore } from '../../../settings/data-types/data-type.store';
-import type { ContentProperty } from '@umbraco-cms/models';
+import type { ContentProperty, DataTypeDetails } from '@umbraco-cms/models';
 
 import '../workspace-property/workspace-property.element';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { UmbObserverController } from '@umbraco-cms/observable-api';
 
 @customElement('umb-content-property')
 export class UmbContentPropertyElement extends UmbLitElement {
@@ -20,14 +21,18 @@ export class UmbContentPropertyElement extends UmbLitElement {
 		`,
 	];
 
+	// TODO: Consider if we just need to get the DataType Key?..
 	private _property?: ContentProperty;
 	@property({ type: Object, attribute: false })
 	public get property(): ContentProperty | undefined {
 		return this._property;
 	}
 	public set property(value: ContentProperty | undefined) {
+		const oldProperty = this._property;
 		this._property = value;
-		this._observeDataType();
+		if(this._property?.dataTypeKey !== oldProperty?.dataTypeKey) {
+			this._observeDataType(this._property?.dataTypeKey);
+		}
 	}
 
 	@property()
@@ -40,33 +45,37 @@ export class UmbContentPropertyElement extends UmbLitElement {
 	private _dataTypeData?: any;
 
 	private _dataTypeStore?: UmbDataTypeStore;
+	private _dataTypeObserver?: UmbObserverController<DataTypeDetails | null>;
 
 	constructor() {
 		super();
 
 		this.consumeContext('umbDataTypeStore', (instance) => {
 			this._dataTypeStore = instance;
-			this._observeDataType();
+			this._observeDataType(this._property?.dataTypeKey);
 		});
 	}
 
-	private _observeDataType() {
-		if (!this._dataTypeStore || !this._property) return;
+	private _observeDataType(dataTypeKey?: string) {
+		if (!this._dataTypeStore) return;
 
-		this.observe(
-			this._dataTypeStore.getByKey(this._property.dataTypeKey),
-			(dataType) => {
-				this._dataTypeData = dataType?.data;
-				this._propertyEditorUIAlias = dataType?.propertyEditorUIAlias || undefined;
-			}
-		);
+		this._dataTypeObserver?.destroy();
+		if(dataTypeKey) {
+			this._dataTypeObserver = this.observe(
+				this._dataTypeStore.getByKey(dataTypeKey),
+				(dataType) => {
+					this._dataTypeData = dataType?.data;
+					this._propertyEditorUIAlias = dataType?.propertyEditorUIAlias || undefined;
+				}
+			);
+		}
 	}
 
 	render() {
 		return html`<umb-workspace-property
-			label=${ifDefined(this.property?.label)}
-			description=${ifDefined(this.property?.description)}
-			alias="${ifDefined(this.property?.alias)}"
+			alias=${ifDefined(this._property?.alias)}
+			label=${ifDefined(this._property?.label)}
+			description=${ifDefined(this._property?.description)}
 			property-editor-ui-alias="${ifDefined(this._propertyEditorUIAlias)}"
 			.value=${this.value}
 			.config=${this._dataTypeData}></umb-workspace-property>`;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace-property/workspace-property.element.ts

@@ -98,6 +98,7 @@ export class UmbWorkspacePropertyElement extends UmbLitElement {
 	private _propertyEditorUIAlias = '';
 	@property({ type: String, attribute: 'property-editor-ui-alias' })
 	public set propertyEditorUIAlias(value: string) {
+		if(this._propertyEditorUIAlias === value) return;
 		this._propertyEditorUIAlias = value;
 		this._observePropertyEditorUI();
 	}