Feature: Unsupported properties

Author: loivsen

src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts

@@ -35,11 +35,15 @@ export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
 	@state()
 	_dataPaths?: Array<string>;
 
+	@state()
+	private _ownerEntityType?: string;
+
 	constructor() {
 		super();
 
 		this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
 			this.#blockWorkspace = workspaceContext;
+			this._ownerEntityType = this.#blockWorkspace.getEntityType();
 			this.#setStructureManager();
 		});
 	}
@@ -70,6 +74,7 @@ export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
 				html`<umb-property-type-based-property
 					class="property"
 					data-path=${this._dataPaths![index]}
+					.ownerEntityType=${this._ownerEntityType}
 					.property=${property}
 					${umbDestroyOnDisconnect()}></umb-property-type-based-property>`,
 		);

src/packages/core/content-type/components/property-type-based-property/property-type-based-property.element.ts

@@ -8,6 +8,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type { UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
 import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { UMB_UNSUPPORTED_EDITOR_SCHEMA_ALIASES } from '@umbraco-cms/backoffice/property';
 
 @customElement('umb-property-type-based-property')
 export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
@@ -27,9 +28,26 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 	@property({ type: String, attribute: 'data-path' })
 	public dataPath?: string;
 
+	@property({ type: String })
+	public get ownerEntityType(): string | undefined {
+		return this._ownerEntityType;
+	}
+	public set ownerEntityType(value: string | undefined) {
+		// Change this to ownerSchemaEditorAlias and retrieve the correct information.
+		this._ownerEntityType = value;
+	}
+
+	private _ownerEntityType?: string;
+
 	@state()
 	private _propertyEditorUiAlias?: string;
 
+	@state()
+	private _propertyEditorSchemaAlias?: string;
+
+	@state()
+	private _isUnsupported?: boolean;
+
 	@state()
 	private _dataTypeData?: UmbPropertyEditorConfig;
 
@@ -38,6 +56,16 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 
 	#contentPropertyContext = new UmbContentPropertyContext(this);
 
+	private async _checkSchemaSupport() {
+		if (!this._ownerEntityType || !this._propertyEditorSchemaAlias) return;
+
+		if (this._ownerEntityType in UMB_UNSUPPORTED_EDITOR_SCHEMA_ALIASES) {
+			this._isUnsupported = UMB_UNSUPPORTED_EDITOR_SCHEMA_ALIASES[this._ownerEntityType].includes(
+				this._propertyEditorSchemaAlias,
+			);
+		}
+	}
+
 	private async _observeDataType(dataTypeUnique?: string) {
 		this._dataTypeObserver?.destroy();
 		if (dataTypeUnique) {
@@ -51,6 +79,9 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 
 					this._dataTypeData = dataType?.values;
 					this._propertyEditorUiAlias = dataType?.editorUiAlias || undefined;
+					this._propertyEditorSchemaAlias = dataType?.editorAlias || undefined;
+					this._checkSchemaSupport();
+
 					// If there is no UI, we will look up the Property editor model to find the default UI alias:
 					if (!this._propertyEditorUiAlias && dataType?.editorAlias) {
 						//use 'dataType.editorAlias' to look up the extension in the registry:
@@ -75,6 +106,12 @@ export class UmbPropertyTypeBasedPropertyElement extends UmbLitElement {
 
 	override render() {
 		if (!this._propertyEditorUiAlias || !this._property?.alias) return;
+		if (this._isUnsupported) {
+			return html`<umb-unsupported-property
+				.alias=${this._property.alias}
+				.ownerEntityType=${this._ownerEntityType}
+				.schema=${this._propertyEditorSchemaAlias!}></umb-unsupported-property>`;
+		}
 		return html`
 			<umb-property
 				.dataPath=${this.dataPath}

src/packages/core/property/index.ts

@@ -3,3 +3,4 @@ export * from './property-dataset/index.js';
 export * from './property-layout/index.js';
 export * from './property/index.js';
 export * from './types/index.js';
+export * from './unsupported-property/index.js';

src/packages/core/property/types/index.ts

@@ -1 +1,2 @@
 export * from './property-value-data.type.js';
+export * from './unsupported-properties.type.js';

src/packages/core/property/types/unsupported-properties.type.ts

@@ -0,0 +1 @@
+export type UmbUnsupportedEditorSchemaAliases = Record<string, Array<string>>;

src/packages/core/property/unsupported-property/index.ts

@@ -0,0 +1,2 @@
+export * from './utils.js';
+export * from './unsupported-property.element.js';

src/packages/core/property/unsupported-property/unsupported-property.element.ts

@@ -0,0 +1,45 @@
+import { css, customElement, html, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+/**
+ *  @description Component for displaying an unsupported property
+ */
+
+@customElement('umb-unsupported-property')
+export class UmbUnsupportedPropertyElement extends UmbLitElement {
+	@property({ type: String })
+	public alias = '';
+
+	@property({ type: String })
+	public schema = '';
+
+	override render() {
+		return html`<div id="not-supported">
+			<umb-localize key="blockEditor_propertyEditorNotSupported" .args=${[this.alias, this.schema]}></umb-localize>
+		</div>`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1) 0;
+			}
+
+			#not-supported {
+				background-color: var(--uui-color-danger);
+				color: var(--uui-color-surface);
+				padding: var(--uui-size-space-4);
+				border-radius: var(--uui-border-radius);
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-unsupported-property': UmbUnsupportedPropertyElement;
+	}
+}

src/packages/core/property/unsupported-property/utils.ts

@@ -0,0 +1,5 @@
+import type { UmbUnsupportedEditorSchemaAliases } from '../types/index.js';
+
+export const UMB_UNSUPPORTED_EDITOR_SCHEMA_ALIASES: UmbUnsupportedEditorSchemaAliases = {
+	block: ['Umbraco.ImageCropper', 'Umbraco.UploadField'],
+};