Segments: Auto unfold the culture variant in non-culture-variant mode (#20189)

in segment only variant situation then auto unfold the culture variant

Author: nielslyngsoe

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts

@@ -12,6 +12,7 @@ import type { UUIInputElement, UUIPopoverContainerElement } from '@umbraco-cms/b
 import type { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UMB_HINT_CONTEXT } from '@umbraco-cms/backoffice/hint';
 import type { UmbHint, UmbVariantHint } from '@umbraco-cms/backoffice/hint';
+import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
 
 @customElement('umb-workspace-split-view-variant-selector')
 export class UmbWorkspaceSplitViewVariantSelectorElement<
@@ -137,6 +138,24 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 			},
 			'_observeVariantOptions',
 		);
+
+		if (workspaceContext) {
+			this.observe(
+				observeMultiple([
+					workspaceContext.variesByCulture,
+					workspaceContext.variesBySegment,
+					workspaceContext.variantOptions,
+				]),
+				([variesByCulture, variesBySegment, variantOptions]) => {
+					if (variesByCulture === false && variesBySegment === true && variantOptions.length > 1) {
+						this.#expandVariant(UmbVariantId.Create(variantOptions[0]));
+					}
+				},
+				'_observeExpandFirstVariantIfSegmentOnly',
+			);
+		} else {
+			this.removeUmbControllerByAlias('_observeExpandFirstVariantIfSegmentOnly');
+		}
 	}
 
 	async #observeActiveVariants(workspaceContext?: UmbVariantDatasetWorkspaceContext) {
@@ -266,12 +285,12 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 
 		// If the active variant is a segment then we expend the culture variant when the selector is opened.
 		if (this.#isSegmentVariantOption(this._activeVariant)) {
-			const culture = this._cultureVariantOptions.find((variant) => {
+			const option = this._cultureVariantOptions.find((variant) => {
 				return variant.culture === this._activeVariant?.culture && variant.segment === null;
 			});
 
-			if (!culture) return;
-			const variantId = UmbVariantId.Create(culture);
+			if (!option) return;
+			const variantId = UmbVariantId.Create(option);
 			this.#expandVariant(variantId);
 		}
 	}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/document-workspace-split-view-variant-selector.element.ts

@@ -5,8 +5,7 @@ import { customElement, html, state } from '@umbraco-cms/backoffice/external/lit
 import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { UmbWorkspaceSplitViewVariantSelectorElement } from '@umbraco-cms/backoffice/workspace';
 
-const elementName = 'umb-document-workspace-split-view-variant-selector';
-@customElement(elementName)
+@customElement('umb-document-workspace-split-view-variant-selector')
 export class UmbDocumentWorkspaceSplitViewVariantSelectorElement extends UmbWorkspaceSplitViewVariantSelectorElement<UmbDocumentVariantOptionModel> {
 	protected override _variantSorter = sortVariants;
 
@@ -68,6 +67,6 @@ export class UmbDocumentWorkspaceSplitViewVariantSelectorElement extends UmbWork
 
 declare global {
 	interface HTMLElementTagNameMap {
-		[elementName]: UmbDocumentWorkspaceSplitViewVariantSelectorElement;
+		'umb-document-workspace-split-view-variant-selector': UmbDocumentWorkspaceSplitViewVariantSelectorElement;
 	}
 }