Data Type: use Property Editor UI label instead over name (#20716)

Prioritize using the property editor ui label and localize it.

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts

@@ -142,7 +142,10 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 				}
 				this.removeUmbController(contentContextConsumer);
 				this.removeUmbController(propContextConsumer);
-				const propertyEditorName = this.#propertyEditorUIs.find((ui) => ui.alias === params.uiAlias)?.name;
+				const propertyEditorUiManifest = this.#propertyEditorUIs.find((ui) => ui.alias === params.uiAlias);
+				const propertyEditorName = this.localize.string(
+					propertyEditorUiManifest?.meta?.label || propertyEditorUiManifest?.name || '#general_notFound',
+				);
 				const dataTypeName = `${contentContext?.getName() ?? ''} - ${propContext.getName() ?? ''} - ${propertyEditorName}`;
 
 				return {

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

@@ -208,7 +208,7 @@ export class UmbDataTypeWorkspaceContext
 			umbExtensionsRegistry.byTypeAndAlias('propertyEditorUi', propertyEditorUIAlias),
 			(manifest) => {
 				this.#propertyEditorUiIcon.setValue(manifest?.meta.icon || null);
-				this.#propertyEditorUiName.setValue(manifest?.name || null);
+				this.#propertyEditorUiName.setValue(manifest?.meta?.label || manifest?.name || null);
 
 				// 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) => ({

src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/views/details/data-type-details-workspace-property-editor-picker.element.ts

@@ -83,7 +83,7 @@ export class UmbDataTypeDetailsWorkspacePropertyEditorPickerElement extends UmbF
 	#renderPropertyEditorReference() {
 		if (!this.propertyEditorUiAlias || !this.propertyEditorSchemaAlias) return nothing;
 
-		let name = this.propertyEditorUiName;
+		let name = this.localize.string(this.propertyEditorUiName);
 		let alias = this.propertyEditorUiAlias;
 		let error = false;
 

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/RichTextEditor.spec.ts

@@ -2,7 +2,6 @@
 import {expect} from "@playwright/test";
 
 const dataTypeName = 'Richtext editor';
-const tipTapPropertyEditorName = 'Rich Text Editor [Tiptap] Property Editor UI';
 const tipTapAlias = 'Umbraco.RichText';
 const tipTapUiAlias = 'Umb.PropertyEditorUi.Tiptap';
 const extensionsDefaultValue = [
@@ -81,10 +80,9 @@ test('tiptap is the default property editor in rich text editor', async ({umbrac
   // Act
   await umbracoUi.dataType.goToDataType(dataTypeName);
 
-  // Assert 
+  // Assert
   await umbracoUi.dataType.doesSettingHaveValue(ConstantHelper.tipTapSettings);
   await umbracoUi.dataType.doesSettingItemsHaveCount(ConstantHelper.tipTapSettings);
-  await umbracoUi.dataType.doesPropertyEditorHaveName(tipTapPropertyEditorName);
   await umbracoUi.dataType.doesPropertyEditorHaveAlias(tipTapAlias);
   await umbracoUi.dataType.doesPropertyEditorHaveUiAlias(tipTapUiAlias);
   const dataTypeData = await umbracoApi.dataType.getByName(dataTypeName);
@@ -95,4 +93,4 @@ test('tiptap is the default property editor in rich text editor', async ({umbrac
   expect(await umbracoApi.dataType.doesTiptapExtensionsItemsMatchCount(dataTypeName, extensionsDefaultValue.length)).toBeTruthy();
   expect(await umbracoApi.dataType.doesTiptapExtensionsHaveItems(dataTypeName, extensionsDefaultValue)).toBeTruthy();
   expect(await umbracoApi.dataType.doesTiptapToolbarHaveItems(dataTypeName, toolbarDefaultValue)).toBeTruthy();
-});
+});