diff --git a/src/components/localization/InstallationLanguage.jsx b/src/components/localization/InstallationLanguage.jsx
index 994e7a8d3..d66326cd4 100644
--- a/src/components/localization/InstallationLanguage.jsx
+++ b/src/components/localization/InstallationLanguage.jsx
@@ -17,10 +17,9 @@
import cockpit from "cockpit";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
import {
- Alert,
- Divider,
+ Button,
Form,
FormGroup,
Menu,
@@ -28,10 +27,12 @@ import {
MenuGroup,
MenuItem,
MenuList,
- MenuSearch,
- MenuSearchInput,
- SearchInput, Title,
+ TextInputGroup,
+ TextInputGroupMain,
+ TextInputGroupUtilities,
+ Title,
} from "@patternfly/react-core";
+import { SearchIcon, TimesIcon } from "@patternfly/react-icons";
import { setLocale } from "../../apis/boss.js";
import {
@@ -51,7 +52,6 @@ import "./InstallationLanguage.scss";
const _ = cockpit.gettext;
const getLanguageEnglishName = lang => lang["english-name"].v;
-const getLanguageId = lang => lang["language-id"].v;
const getLanguageNativeName = lang => lang["native-name"].v;
const getLocaleId = locale => locale["locale-id"].v;
const getLocaleNativeName = locale => locale["native-name"].v;
@@ -62,8 +62,8 @@ class LanguageSelector extends React.Component {
this.state = {
search: "",
};
+ this.initiallySelectedLanguage = props.language;
- this.updateNativeName = this.updateNativeName.bind(this);
this.renderOptions = this.renderOptions.bind(this);
}
@@ -80,19 +80,13 @@ class LanguageSelector extends React.Component {
}
}
- async updateNativeName (localeItem) {
- this.props.setNativeName(getLocaleNativeName(localeItem));
- }
-
renderOptions (filter) {
const { commonLocales, languages } = this.props;
const idPrefix = this.props.idPrefix;
- const filterLow = filter.toLowerCase();
const filtered = [];
+ const filterLow = filter.toLowerCase();
- // Is set to true when the first instance of a selected item is found.
- let foundSelected = false;
// Returns a locale with a given code.
const findLocaleWithId = (localeCode) => {
for (const languageId in languages) {
@@ -106,13 +100,11 @@ class LanguageSelector extends React.Component {
console.warn(`Locale with code ${localeCode} not found.`);
};
- // Returns a new instance of MenuItem from a given locale and with given prefix in it's key
- // and id.
+ // Helper to create a menu item
const createMenuItem = (locale, prefix) => {
const isSelected = this.props.language === getLocaleId(locale);
-
// Creating a ref that will be applied to the selected language and cause it to scroll into view.
- const scrollRef = (isSelected && !foundSelected)
+ const scrollRef = (isSelected)
? (ref) => {
if (ref) {
ref.scrollIntoView({ block: "center" });
@@ -120,72 +112,92 @@ class LanguageSelector extends React.Component {
}
: undefined;
- const item = (
+ return (
);
+ };
- // Prevent assigning scrollRef twice to languages that are both in common list and the alphabetical list.
- if (isSelected) {
- foundSelected = true;
- }
+ const onSearch = (locale) => (
+ getLocaleNativeName(locale).toLowerCase()
+ .includes(filterLow) ||
+ getLanguageNativeName(locale).toLowerCase()
+ .includes(filterLow) ||
+ getLanguageEnglishName(locale).toLowerCase()
+ .includes(filterLow)
+ );
- return item;
- };
+ const suggestedItems = commonLocales
+ .map(findLocaleWithId)
+ .sort((a, b) => {
+ if (!a || !b) {
+ return 0;
+ }
+ // Sort alphabetically by native name but keep the default locale at the top
+ if (getLocaleId(a) === this.initiallySelectedLanguage) {
+ return -1;
+ } else if (getLocaleId(b) === this.initiallySelectedLanguage) {
+ return 1;
+ }
+ return getLocaleNativeName(a).localeCompare(getLocaleNativeName(b));
+ })
+ .filter(locale => locale && onSearch(locale))
+ .map(locale => createMenuItem(locale, "option-common"));
- // List common languages.
- if (!filter) {
+ if (suggestedItems.length > 0) {
filtered.push(
- {
- commonLocales
- .map(findLocaleWithId)
- .filter(locale => locale)
- .map(locale => createMenuItem(locale, "option-common-"))
- }
+ {suggestedItems}
-
);
}
- // List alphabetically.
- const languagesIds = Object.keys(languages).sort();
- for (const languageId of languagesIds) {
- const languageItem = languages[languageId];
- const label = cockpit.format("$0 ($1)", getLanguageNativeName(languageItem.languageData), getLanguageEnglishName(languageItem.languageData));
-
- if (!filter || label.toLowerCase().indexOf(filterLow) !== -1) {
- filtered.push(
-
- {languageItem.locales.map(locale => createMenuItem(locale, "option-alpha-"))}
-
- );
- }
+ // List other languages (filtered by search if applicable)
+ const otherItems = Object.keys(languages)
+ .sort((a, b) => {
+ return getLanguageNativeName(languages[a].locales[0]).localeCompare(getLanguageNativeName(languages[b].locales[0]));
+ })
+ .flatMap(languageId => {
+ const languageItem = languages[languageId];
+ return languageItem.locales.filter(onSearch);
+ })
+ .filter(locale => commonLocales.indexOf(getLocaleId(locale)) === -1)
+ .map(locale => createMenuItem(locale, "option-alpha"));
+
+ if (otherItems.length > 0) {
+ filtered.push(
+
+ {otherItems}
+
+ );
}
- if (this.state.search && filtered.length === 0) {
+ // Handle case when no results are found
+ if (filter && filtered.length === 0) {
return [