introduce umb-content-workspace-property to improve dx

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/content/content/global-components/content-workspace-property.element.ts

@@ -0,0 +1,78 @@
+import { UMB_CONTENT_WORKSPACE_CONTEXT } from '../constants.js';
+import { html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
+
+import '../workspace/views/edit/content-editor-property.element.js';
+
+@customElement('umb-content-workspace-property')
+export class UmbContentWorkspacePropertyElement extends UmbLitElement {
+	private _alias?: string | undefined;
+
+	@property()
+	public get alias(): string | undefined {
+		return this._alias;
+	}
+	public set alias(value: string | undefined) {
+		this._alias = value;
+		this.#observePropertyType();
+	}
+
+	@state()
+	_datasetVariantId?: UmbVariantId;
+
+	@state()
+	_dataPath?: string;
+
+	@state()
+	_writeable?: boolean;
+
+	@state()
+	_workspaceContext?: typeof UMB_CONTENT_WORKSPACE_CONTEXT.TYPE;
+
+	@state()
+	_propertyType?: UmbPropertyTypeModel;
+
+	constructor() {
+		super();
+
+		// The Property Dataset is local to the active variant, we use this to retrieve the variant we like to gather the value from.
+		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, (datasetContext) => {
+			this._datasetVariantId = datasetContext?.getVariantId();
+		});
+
+		// The Content Workspace Context is used to retrieve the property type we like to observe.
+		// This gives us the configuration from the property type as part of the data type.
+		this.consumeContext(UMB_CONTENT_WORKSPACE_CONTEXT, async (workspaceContext) => {
+			this._workspaceContext = workspaceContext;
+			this.#observePropertyType();
+		});
+	}
+
+	async #observePropertyType() {
+		if (!this._alias || !this._workspaceContext) return;
+
+		this.observe(await this._workspaceContext?.structure.propertyStructureByAlias(this._alias), (propertyType) => {
+			this._propertyType = propertyType;
+		});
+	}
+
+	override render() {
+		if (!this._datasetVariantId && !this._propertyType) return nothing;
+
+		return html`<umb-content-workspace-view-edit-property
+			class="property"
+			.variantId=${this._datasetVariantId}
+			.property=${this._propertyType}></umb-content-workspace-view-edit-property>`;
+	}
+}
+
+export default UmbContentWorkspacePropertyElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-content-workspace-property': UmbContentWorkspacePropertyElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/content/content/global-components/index.ts

@@ -0,0 +1,2 @@
+import './content-workspace-property.element.js';
+export * from './content-workspace-property.element.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/index.ts

@@ -2,9 +2,11 @@ export * from './collection/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './controller/merge-content-variant-data.controller.js';
+export * from './global-components/index.js';
 export * from './manager/index.js';
 export * from './property-dataset-context/index.js';
 export * from './workspace/index.js';
+
 export type * from './repository/index.js';
 export type * from './types.js';
 export type * from './variant-picker/index.js';

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor-properties.element.ts

@@ -11,8 +11,6 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 
-import './content-editor-property.element.js';
-
 @customElement('umb-content-workspace-view-edit-properties')
 export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement {
 	#workspaceContext?: typeof UMB_CONTENT_WORKSPACE_CONTEXT.TYPE;
@@ -103,10 +101,9 @@ export class UmbContentWorkspaceViewEditPropertiesElement extends UmbLitElement
 					this._visibleProperties,
 					(property) => property.alias,
 					(property) =>
-						html`<umb-content-workspace-view-edit-property
+						html`<umb-content-workspace-property
 							class="property"
-							.variantId=${this._datasetVariantId}
-							.property=${property}></umb-content-workspace-view-edit-property>`,
+							alias=${property.alias}></umb-content-workspace-property>`,
 				)
 			: nothing;
 	}

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/views/edit/content-editor-property.element.ts

@@ -33,7 +33,7 @@ export class UmbContentWorkspaceViewEditPropertyElement extends UmbLitElement {
 
 	override willUpdate(changedProperties: Map<string, any>) {
 		super.willUpdate(changedProperties);
-		if (changedProperties.has('type') || changedProperties.has('variantId') || changedProperties.has('_context')) {
+		if (changedProperties.has('property') || changedProperties.has('variantId') || changedProperties.has('_context')) {
 			if (this.variantId && this.property && this._context) {
 				const propertyVariantId = new UmbVariantId(
 					this.property.variesByCulture ? this.variantId.culture : null,