Languages: Sort the global content language selector (closes #22628)

src/Umbraco.Web.UI.Client/src/packages/language/app-language-select/app-language-select.element.ts

@@ -2,6 +2,7 @@ import { UmbLanguageCollectionRepository } from '../collection/index.js';
 import type { UmbLanguageDetailModel } from '../types.js';
 import type { UmbAppLanguageContext } from '../global-contexts/index.js';
 import { UMB_APP_LANGUAGE_CONTEXT } from '../constants.js';
+import { sortLanguages } from '../utils.js';
 import type {
 	UUIComboboxListElement,
 	UUIComboboxListEvent,
@@ -88,7 +89,7 @@ export class UmbAppLanguageSelectElement extends UmbLitElement {
 
 		// TODO: listen to changes
 		if (data) {
-			this._languages = data.items;
+			this._languages = [...data.items].sort(sortLanguages);
 			this.#checkForLanguageAccess();
 		}
 	}

src/Umbraco.Web.UI.Client/src/packages/language/index.ts

@@ -6,5 +6,6 @@ export * from './constants.js';
 export * from './repository/index.js';
 export * from './collection/index.js';
 export * from './global-contexts/index.js';
+export * from './utils.js';
 
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/language/utils.test.ts

@@ -0,0 +1,67 @@
+import { sortLanguages } from './utils.js';
+import type { UmbLanguageDetailModel } from './types.js';
+import { UMB_LANGUAGE_ENTITY_TYPE } from './entity.js';
+import { expect } from '@open-wc/testing';
+
+const makeLanguage = (overrides: Partial<UmbLanguageDetailModel>): UmbLanguageDetailModel => ({
+	entityType: UMB_LANGUAGE_ENTITY_TYPE,
+	unique: overrides.unique ?? overrides.name ?? 'lang',
+	name: overrides.name ?? '',
+	isDefault: false,
+	isMandatory: false,
+	fallbackIsoCode: null,
+	...overrides,
+});
+
+describe('sortLanguages', () => {
+	it('sorts the default language first regardless of input order', () => {
+		const english = makeLanguage({ unique: 'en', name: 'English', isDefault: true });
+		const french = makeLanguage({ unique: 'fr', name: 'French' });
+		const danish = makeLanguage({ unique: 'da', name: 'Danish' });
+
+		const sorted = [danish, french, english].sort(sortLanguages);
+
+		expect(sorted.map((l) => l.unique)).to.eql(['en', 'da', 'fr']);
+	});
+
+	it('sorts mandatory languages above non-mandatory (when no default involved)', () => {
+		const french = makeLanguage({ unique: 'fr', name: 'French' });
+		const danish = makeLanguage({ unique: 'da', name: 'Danish', isMandatory: true });
+		const german = makeLanguage({ unique: 'de', name: 'German' });
+
+		const sorted = [french, german, danish].sort(sortLanguages);
+
+		expect(sorted.map((l) => l.unique)).to.eql(['da', 'fr', 'de']);
+	});
+
+	it('sorts equal-priority languages alphabetically by name', () => {
+		const spanish = makeLanguage({ unique: 'es', name: 'Spanish' });
+		const french = makeLanguage({ unique: 'fr', name: 'French' });
+		const german = makeLanguage({ unique: 'de', name: 'German' });
+
+		const sorted = [spanish, german, french].sort(sortLanguages);
+
+		expect(sorted.map((l) => l.name)).to.eql(['French', 'German', 'Spanish']);
+	});
+
+	it('applies the full priority chain: default → mandatory → name', () => {
+		const english = makeLanguage({ unique: 'en', name: 'English', isDefault: true });
+		const danish = makeLanguage({ unique: 'da', name: 'Danish', isMandatory: true });
+		const french = makeLanguage({ unique: 'fr', name: 'French' });
+		const german = makeLanguage({ unique: 'de', name: 'German' });
+		const spanish = makeLanguage({ unique: 'es', name: 'Spanish' });
+
+		const sorted = [spanish, french, english, german, danish].sort(sortLanguages);
+
+		expect(sorted.map((l) => l.unique)).to.eql(['en', 'da', 'fr', 'de', 'es']);
+	});
+
+	it('places defined names before missing names', () => {
+		const french = makeLanguage({ unique: 'fr', name: 'French' });
+		const empty = makeLanguage({ unique: 'xx', name: '' });
+
+		const sorted = [empty, french].sort(sortLanguages);
+
+		expect(sorted.map((l) => l.unique)).to.eql(['fr', 'xx']);
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/language/utils.ts

@@ -0,0 +1,30 @@
+import type { UmbLanguageDetailModel } from './types.js';
+
+const compareDefault = (a: UmbLanguageDetailModel, b: UmbLanguageDetailModel) =>
+	(a.isDefault ? -1 : 1) - (b.isDefault ? -1 : 1);
+
+const compareMandatory = (a: UmbLanguageDetailModel, b: UmbLanguageDetailModel) =>
+	(a.isMandatory ? -1 : 1) - (b.isMandatory ? -1 : 1);
+
+const compareName = (a: UmbLanguageDetailModel, b: UmbLanguageDetailModel) => {
+	const nameA = a.name;
+	const nameB = b.name;
+
+	// If both names are missing, consider them equal.
+	if (!nameA && !nameB) return 0;
+
+	// If only one name is missing, sort the defined name first.
+	if (!nameA) return 1;
+	if (!nameB) return -1;
+
+	return nameA.localeCompare(nameB);
+};
+
+/**
+ * Sorts languages by: default first, then mandatory, then alphabetically by name.
+ * @param {UmbLanguageDetailModel} a - First language to compare
+ * @param {UmbLanguageDetailModel} b - Second language to compare
+ * @returns {number} - Sorting value
+ */
+export const sortLanguages = (a: UmbLanguageDetailModel, b: UmbLanguageDetailModel) =>
+	compareDefault(a, b) || compareMandatory(a, b) || compareName(a, b);