Content Type Designer tabs sorting improvement (#20074)

* fix style and localization

* Update src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor.element.ts

Co-authored-by: Copilot <[email protected]>

* fix class name as well

* minor fixes to sorting of tabs

* clean up

* add data-marks

* Updated package version to include test fixes for tab name

---------

Co-authored-by: Copilot <[email protected]>
Co-authored-by: Andreas Zerbst <[email protected]>

Author: 3 people

src/Umbraco.Web.UI.Client/src/packages/content/content-type/structure/content-type-container-structure-helper.class.ts

@@ -55,6 +55,7 @@ export class UmbContentTypeContainerStructureHelper<T extends UmbContentTypeMode
 			this.#initRejector = reject;
 		});
 
+		this.#childContainersMerged.sortBy((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
 		this.#legacyMergedChildContainers.sortBy((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
 	}
 

src/Umbraco.Web.UI.Client/src/packages/content/content-type/structure/content-type-structure-manager.class.ts

@@ -941,12 +941,13 @@ export class UmbContentTypeStructureManager<
 			for (const container of containers) {
 				const path = getContainerChainKey(container, containerByIdCache, chainCache);
 				const key = path?.join('|') ?? null;
+				const isOwner = this.isOwnerContainer(container.id);
 				if (!mergedMap.has(key)) {
 					// Store the first occurrence
 					mergedMap.set(key, {
 						key: key,
 						ids: [container.id],
-						ownerId: this.isOwnerContainer(container.id) ? container.id : undefined,
+						ownerId: isOwner ? container.id : undefined,
 						parentIds: new Set([container.parent?.id ?? null]),
 						path: path,
 						type: container.type,
@@ -958,7 +959,11 @@ export class UmbContentTypeStructureManager<
 					const existing = mergedMap.get(key)!;
 					existing.ids.push(container.id);
 					existing.parentIds.add(container.parent?.id ?? null);
-					existing.ownerId ??= this.isOwnerContainer(container.id) ? container.id : undefined;
+					existing.ownerId ??= isOwner ? container.id : undefined;
+					if (isOwner) {
+						// If this is the owner container, then we should update the sort order to ensure it is the one from the owner instance: [NL]
+						existing.sortOrder = container.sortOrder;
+					}
 				}
 			}
 

src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor.element.ts

@@ -37,9 +37,10 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 		getUniqueOfElement: (element) => element.getAttribute('data-umb-tab-key'),
 		getUniqueOfModel: (tab) => tab.key,
 		identifier: 'content-type-tabs-sorter',
-		itemSelector: 'uui-tab',
+		itemSelector: 'uui-tab:not(#root-tab)',
 		containerSelector: 'uui-tab-group',
 		disabledItemSelector: ':not([sortable])',
+		ignorerSelector: 'uui-input',
 		resolvePlacement: (args) => args.relatedRect.left + args.relatedRect.width * 0.5 > args.pointerX,
 		onChange: ({ model }) => {
 			this._tabs = model;
@@ -724,6 +725,10 @@ export class UmbContentTypeDesignEditorElement extends UmbLitElement implements
 				justify-content: center;
 				gap: var(--uui-size-space-2);
 				margin-right: calc(var(--uui-size-space-3) * -1);
+				pointer-events: none;
+			}
+			.tab-inner > uui-input {
+				pointer-events: auto;
 			}
 
 			.not-active uui-button {