Property Editors: Improve Missing Property Editor UI and allow save/publish

src/Umbraco.Core/Services/ContentEditingServiceBase.cs

@@ -526,8 +526,12 @@ private void RemoveMissingProperties(ContentEditingModelBase contentEditingModel
         // this should already have been validated by now, so it's OK to throw exceptions here
         if (_propertyEditorCollection.TryGet(propertyType.PropertyEditorAlias, out IDataEditor? dataEditor) == false)
         {
-            _logger.LogWarning("Unable to retrieve property value - no data editor found for property editor: {PropertyEditorAlias}", propertyType.PropertyEditorAlias);
-            return null;
+            _logger.LogWarning(
+                "Unable to find property editor {PropertyEditorAlias}, for property {PropertyAlias}. Leaving property value unchanged.",
+                propertyType.PropertyEditorAlias,
+                propertyType.Alias);
+
+            return content.GetValue(propertyType.Alias, culture, segment);
         }
 
         IDataValueEditor dataValueEditor = dataEditor.GetValueEditor();

src/Umbraco.Core/Services/PropertyValidationService.cs

@@ -22,7 +22,7 @@ public class PropertyValidationService : IPropertyValidationService
     private readonly ILanguageService _languageService;
     private readonly ContentSettings _contentSettings;
 
-    [Obsolete("Use the constructor that accepts ILanguageService and ContentSettings options. Will be removed in V17.")]
+    [Obsolete("Use the non-obsolete constructor. Will be removed in V17.")]
     public PropertyValidationService(
         PropertyEditorCollection propertyEditors,
         IDataTypeService dataTypeService,
@@ -76,10 +76,9 @@ public IEnumerable<ValidationResult> ValidatePropertyValue(
         }
 
         IDataEditor? dataEditor = GetDataEditor(propertyType);
-        if (dataEditor == null)
+        if (dataEditor is null)
         {
-            throw new InvalidOperationException("No property editor found by alias " +
-                                                propertyType.PropertyEditorAlias);
+            return [];
         }
 
         // only validate culture invariant properties if

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -2834,10 +2834,17 @@ export default {
 		resetUrlLabel: 'Reset',
 	},
 	missingEditor: {
+		title: 'This property type is no longer available.',
 		description:
-			'<p><strong>Error!</strong> This property type is no longer available. Please reach out to your administrator.</p>',
+			"Don't worry, your content is safe and publishing this document won't overwrite it or remove it.<br/>Please contact your site administrator to resolve this issue.",
+		detailsTitle: 'Additional details',
 		detailsDescription:
-			'<p>This property type is no longer available.<br/>Please contact your administrator so they can either delete this property or restore the property type.</p><p><strong>Data:</strong></p>',
+			"To resolve this you should either restore the property editor, change the property to use a supported data type or remove the property if it's no longer needed.",
+		detailsDataType: 'Data type',
+		detailsPropertyEditor: 'Property editor',
+		detailsData: 'Data',
+		detailsHide: 'Hide details',
+		detailsShow: 'Show details',
 	},
 	uiCulture: {
 		ar: 'العربية',

src/Umbraco.Web.UI.Client/src/assets/lang/pt.ts

@@ -2832,9 +2832,16 @@ export default {
 		resetUrlLabel: 'Redefinir',
 	},
 	missingEditor: {
+		title: 'Este tipo de propriedade já não se encontra disponível.',
 		description:
-			'<p><strong>Erro!</strong> Este tipo de propriedade já não se encontra disponível. Por favor, contacte o administrador.</p>',
+			'Não se preocupe, o seu conteúdo está seguro e a publicação deste documento não o substituirá nem removerá.<br/>Entre em contacto com o administrador do site para resolver o problema.',
+		detailsTitle: 'Detalhes adicionais',
 		detailsDescription:
-			'<p>Este tipo de propriedade já não se encontra disponível.<br/>Por favor, contacte o administrador para que ele possa apagar a propriedade ou restaurar o tipo de propriedade.</p><p><strong>Dados:</strong></p>',
+			'Para resolver o problema, deverá ou restaurar o editor de propriedades, ou alterar a propriedade para usar um tipo de dados compatível ou remover a propriedade se ela não for mais necessária.',
+		detailsDataType: 'Tipo de dados',
+		detailsPropertyEditor: 'Editor de propriedades',
+		detailsData: 'Dados',
+		detailsHide: 'Esconder detalhes',
+		detailsShow: 'Mostrar detalhes',
 	},
 } as UmbLocalizationDictionary;

src/Umbraco.Web.UI.Client/src/packages/property-editors/missing/manifests.ts

@@ -1,5 +1,3 @@
-import { manifests as modalManifests } from './modal/manifests.js';
-
 export const manifests: Array<UmbExtensionManifest> = [
 	{
 		type: 'propertyEditorUi',
@@ -14,5 +12,4 @@ export const manifests: Array<UmbExtensionManifest> = [
 			supportsReadOnly: true,
 		},
 	},
-	...modalManifests,
 ];

src/Umbraco.Web.UI.Client/src/packages/property-editors/missing/property-editor-ui-missing.element.ts

@@ -1,50 +1,129 @@
-import { UMB_MISSING_PROPERTY_EDITOR_MODAL } from './modal/missing-editor-modal.token.js';
-import { customElement, html } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, query, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { umbOpenModal } from '@umbraco-cms/backoffice/modal';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
-import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/content';
+import { UmbDataTypeDetailRepository, type UmbDataTypeDetailModel } from '@umbraco-cms/backoffice/data-type';
+import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
 
 /**
  * @element umb-property-editor-ui-missing
  */
 @customElement('umb-property-editor-ui-missing')
-export class UmbPropertyEditorUIMissingElement
-	extends UmbFormControlMixin<unknown, typeof UmbLitElement>(UmbLitElement, undefined)
-	implements UmbPropertyEditorUiElement
-{
+export class UmbPropertyEditorUIMissingElement extends UmbLitElement implements UmbPropertyEditorUiElement {
+	@property()
+	value = '';
+
+	@state()
+	private _expanded = false;
+
+	@query('#details')
+	focalPointElement!: HTMLElement;
+
+	private _dataTypeDetailModel?: UmbDataTypeDetailModel | undefined;
+	private _dataTypeDetailRepository = new UmbDataTypeDetailRepository(this);
+
 	constructor() {
 		super();
 
-		this.addValidator(
-			'customError',
-			() => this.localize.term('errors_propertyHasErrors'),
-			() => true,
-		);
-
-		this.pristine = false;
+		this.consumeContext(UMB_PROPERTY_TYPE_BASED_PROPERTY_CONTEXT, (propertyContext) => {
+			if (!propertyContext?.dataType) return;
+			this.observe(propertyContext.dataType, (dt) => {
+				if (!dt?.unique) return;
+				this._updateEditorAlias(dt);
+			});
+		});
 	}
 
-	async #onDetails(event: Event) {
-		event.stopPropagation();
+	private async _updateEditorAlias(dataType: UmbPropertyTypeModel['dataType']) {
+		this.observe(await this._dataTypeDetailRepository.byUnique(dataType.unique), (dataType) => {
+			this._dataTypeDetailModel = dataType;
+		});
+	}
 
-		await umbOpenModal(this, UMB_MISSING_PROPERTY_EDITOR_MODAL, {
-			data: {
-				// If the value is an object, we stringify it to make sure we can display it properly.
-				// If it's a primitive value, we just convert it to string.
-				value: typeof this.value === 'object' ? JSON.stringify(this.value, null, 2) : String(this.value),
-			},
-		}).catch(() => undefined);
+	async #onDetails() {
+		this._expanded = !this._expanded;
+		if (this._expanded) {
+			await this.updateComplete;
+			this.focalPointElement?.focus();
+		}
 	}
 
 	override render() {
-		return html`<umb-localize key="missingEditor_description"></umb-localize>
+		return html`<uui-box id="info">
+			<div slot="headline">
+				<uui-icon id="alert" name="alert"></uui-icon>${this.localize.term('missingEditor_title')}
+			</div>
+			<div id="content">
+				<umb-localize key="missingEditor_description"></umb-localize>
+				${this._expanded ? this._renderDetails() : nothing}
+			</div>
+
 			<uui-button
 				id="details-button"
-				look="secondary"
-				label=${this.localize.term('general_details')}
-				@click=${this.#onDetails}></uui-button>`;
+				compact
+				label="${this.localize.term(this._expanded ? 'missingEditor_detailsHide' : 'missingEditor_detailsShow')}"
+				@click=${this.#onDetails}>
+				<span>${this.localize.term(this._expanded ? 'missingEditor_detailsHide' : 'missingEditor_detailsShow')}</span
+				><uui-symbol-expand id="expand-symbol" .open=${this._expanded}></uui-symbol-expand>
+			</uui-button>
+		</uui-box>`;
 	}
+
+	private _renderDetails() {
+		return html` <div id="details" tabindex="0">
+			<umb-localize id="details-title" key="missingEditor_detailsTitle"></umb-localize>
+			<p>
+				<umb-localize key="missingEditor_detailsDescription"></umb-localize>
+			</p>
+			<p>
+				<strong><umb-localize key="missingEditor_detailsDataType"></umb-localize></strong>:
+				<code>${this._dataTypeDetailModel?.name}</code><br />
+				<strong><umb-localize key="missingEditor_detailsPropertyEditor"></umb-localize></strong>:
+				<code>${this._dataTypeDetailModel?.editorAlias}</code>
+			</p>
+			<umb-code-block id="codeblock" copy language="${this.localize.term('missingEditor_detailsData')}"
+				>${typeof this.value === 'object' ? JSON.stringify(this.value, null, 2) : String(this.value)}</umb-code-block
+			>
+		</div>`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-3);
+				--uui-box-default-padding: 0;
+			}
+			#content {
+				padding: var(--uui-size-space-5);
+				padding-bottom: var(--uui-size-space-3);
+			}
+			#alert {
+				padding-right: var(--uui-size-space-2);
+			}
+			#details-button {
+				float: right;
+			}
+			#details {
+				margin-top: var(--uui-size-space-5);
+			}
+			#details-title {
+				font-weight: 800;
+			}
+			#expand-symbol {
+				transform: rotate(90deg);
+			}
+			#expand-symbol[open] {
+				transform: rotate(180deg);
+			}
+			#codeblock {
+				max-height: 400px;
+				display: flex;
+				flex-direction: column;
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUIMissingElement;