use resource to fetch cultures

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts

@@ -1,11 +1,10 @@
 import { Observable } from 'rxjs';
-import { Language, LanguageResource } from '@umbraco-cms/backend-api';
+import { Culture, CultureResource, Language, LanguageResource } from '@umbraco-cms/backend-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/resources';
 import { UmbContextToken } from '@umbraco-cms/context-api';
 import { UmbStoreBase } from '@umbraco-cms/store';
 import { ArrayState } from '@umbraco-cms/observable-api';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { umbracoPath } from '@umbraco-cms/utils';
 
 export type UmbLanguageStoreItemType = Language;
 export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageStore>('umbLanguageStore');
@@ -18,7 +17,7 @@ export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageS
  */
 export class UmbLanguageStore extends UmbStoreBase {
 	#data = new ArrayState<UmbLanguageStoreItemType>([], (x) => x.isoCode);
-	#availableLanguages = new ArrayState<UmbLanguageStoreItemType>([], (x) => x.isoCode);
+	#availableLanguages = new ArrayState<Culture>([], (x) => x.name);
 
 	public readonly availableLanguages = this.#availableLanguages.asObservable();
 
@@ -44,12 +43,11 @@ export class UmbLanguageStore extends UmbStoreBase {
 		return this.#data;
 	}
 
-	getAvailable() {
-		fetch(umbracoPath('/languages').toString())
-			.then((res) => res.json())
-			.then((data) => {
-				this.#availableLanguages.append(data);
-			});
+	getAvailableCultures() {
+		tryExecuteAndNotify(this._host, CultureResource.getCulture({ skip: 0, take: 1000 })).then(({ data }) => {
+			if (!data) return;
+			this.#availableLanguages.append(data.items);
+		});
 
 		return this.availableLanguages;
 	}

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts

@@ -50,9 +50,9 @@ export class UmbWorkspaceLanguageContext {
 		return this.#data.getValue();
 	}
 
-	public getAvailableLanguages() {
+	public getAvailableCultures() {
 		//TODO: Don't use !, however this will be changed with the introduction of repositories.
-		return this.#store!.getAvailable();
+		return this.#store!.getAvailableCultures();
 	}
 
 	public update(data: Partial<UmbLanguageStoreItemType>) {

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts

@@ -11,7 +11,7 @@ import {
 	UMB_LANGUAGE_STORE_CONTEXT_TOKEN,
 } from '../../../../language.store';
 import { UmbLitElement } from '@umbraco-cms/element';
-import { Language } from '@umbraco-cms/backend-api';
+import { Culture, Language } from '@umbraco-cms/backend-api';
 
 @customElement('umb-workspace-view-language-edit')
 export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
@@ -56,7 +56,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 	private _languages: UmbLanguageStoreItemType[] = [];
 
 	@state()
-	private _availableLanguages: UmbLanguageStoreItemType[] = [];
+	private _availableCultures: Culture[] = [];
 
 	@state()
 	private _search = '';
@@ -81,8 +81,8 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 					this._startData = language;
 				}
 			});
-			this.observe(this.#languageWorkspaceContext.getAvailableLanguages(), (languages) => {
-				this._availableLanguages = languages;
+			this.observe(this.#languageWorkspaceContext.getAvailableCultures(), (cultures) => {
+				this._availableCultures = cultures;
 			});
 		});
 
@@ -101,11 +101,11 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 			const isoCode = target.value.toString();
 
 			if (isoCode) {
-				this.#languageWorkspaceContext?.update({ isoCode: target.value.toString() });
+				this.#languageWorkspaceContext?.update({ isoCode });
 
 				// If the language name is not set, we set it to the name of the selected language.
 				if (!this.language?.name) {
-					const language = this._availableLanguages.find((language) => language.isoCode === target.value.toString());
+					const language = this._availableCultures.find((culture) => culture.name === isoCode);
 					if (language) {
 						this.#languageWorkspaceContext?.update({ name: language.name });
 					}
@@ -124,6 +124,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 		}
 	}
 
+	// TODO: move some of these methods to the context
 	#handleSearchChange(event: Event) {
 		const target = event.composedPath()[0] as UUIComboboxElement;
 		this._search = target.search;
@@ -152,14 +153,9 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 		}
 	}
 
-	get #filteredLanguages(): Array<Language> {
-		const onlyNewLanguages = this._availableLanguages.filter(
-			(language) =>
-				!this._languages.some((x) => x.isoCode === language.isoCode && x.isoCode !== this._startData?.isoCode)
-		);
-
-		return onlyNewLanguages.filter((language) => {
-			return language.name?.toLowerCase().includes(this._search.toLowerCase());
+	get #filteredCultures(): Array<Culture> {
+		return this._availableCultures.filter((culture) => {
+			return culture.englishName?.toLowerCase().includes(this._search.toLowerCase());
 		});
 	}
 
@@ -173,8 +169,8 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 		return this.#fallbackLanguages.find((language) => language.isoCode === this.language?.fallbackIsoCode);
 	}
 
-	get #fromAvailableLanguages() {
-		return this._availableLanguages.find((language) => language.isoCode === this.language?.isoCode);
+	get #fromAvailableCultures() {
+		return this._availableCultures.find((culture) => culture.name === this.language?.isoCode);
 	}
 
 	#renderCultureWarning() {
@@ -202,17 +198,17 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 				<umb-workspace-property-layout label="Language">
 					<div slot="editor">
 						<uui-combobox
-							value=${ifDefined(this.#fromAvailableLanguages?.isoCode)}
+							value=${ifDefined(this.#fromAvailableCultures?.name)}
 							@change=${this.#handleLanguageChange}
 							@search=${this.#handleSearchChange}>
 							<uui-combobox-list>
 								${repeat(
-									this.#filteredLanguages,
-									(language) => language.isoCode,
+									this.#filteredCultures,
+									(language) => language.name,
 									(language) =>
 										html`
-											<uui-combobox-list-option value=${ifDefined(language.isoCode)}
-												>${language.name}</uui-combobox-list-option
+											<uui-combobox-list-option value=${ifDefined(language.name)}
+												>${language.englishName}</uui-combobox-list-option
 											>
 										`
 								)}

src/Umbraco.Web.UI.Client/src/core/mocks/browser-handlers.ts

@@ -21,6 +21,7 @@ import { handlers as memberGroupHandlers } from './domains/member-group.handlers
 import { handlers as memberTypeHandlers } from './domains/member-type.handlers';
 import { handlers as templateHandlers } from './domains/template.handlers';
 import { handlers as languageHandlers } from './domains/language.handlers';
+import { handlers as cultureHandlers } from './domains/culture.handlers';
 import { handlers as redirectManagementHandlers } from './domains/redirect-management.handlers';
 
 const handlers = [
@@ -47,6 +48,7 @@ const handlers = [
 	...dictionaryHandlers,
 	...templateHandlers,
 	...languageHandlers,
+	...cultureHandlers,
 	...redirectManagementHandlers,
 ];
 

src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts

@@ -16,10 +16,6 @@ class UmbLanguagesData extends UmbData<UmbLanguageStoreItemType> {
 		return this.data.find((item) => item.isoCode === key);
 	}
 
-	getAvailable() {
-		return MockAvailable;
-	}
-
 	save(saveItems: Array<UmbLanguageStoreItemType>) {
 		saveItems.forEach((saveItem) => {
 			const foundIndex = this.data.findIndex((item) => item.isoCode === saveItem.isoCode);
@@ -101,34 +97,4 @@ export const MockData: Array<UmbLanguageStoreItemType> = [
 	},
 ];
 
-export const MockAvailable: Array<UmbLanguageStoreItemType> = [
-	{
-		name: 'English',
-		isoCode: 'en',
-		isDefault: true,
-		isMandatory: true,
-	},
-	{
-		name: 'Danish',
-		isoCode: 'da',
-		isDefault: false,
-		isMandatory: false,
-		fallbackIsoCode: 'en',
-	},
-	{
-		name: 'German',
-		isoCode: 'de',
-		isDefault: false,
-		isMandatory: false,
-		fallbackIsoCode: 'en',
-	},
-	{
-		name: 'French',
-		isoCode: 'fr',
-		isDefault: false,
-		isMandatory: false,
-		fallbackIsoCode: 'en',
-	},
-];
-
 export const umbLanguagesData = new UmbLanguagesData(MockData);

src/Umbraco.Web.UI.Client/src/core/mocks/domains/culture.handlers.ts

@@ -0,0 +1,10 @@
+import { rest } from 'msw';
+import { umbCulturesData } from '../data/culture.data';
+import { umbracoPath } from '@umbraco-cms/utils';
+
+export const handlers = [
+	rest.get(umbracoPath('/culture'), (req, res, ctx) => {
+		const data = umbCulturesData.get();
+		return res(ctx.status(200), ctx.json(data));
+	}),
+];