shell: use pf4 Menu component for the display language list

This component now also offers search functionality.

Author: KKoukiou

pkg/shell/shell-modals.jsx

@@ -19,7 +19,13 @@
 
 import cockpit from "cockpit";
 import React from "react";
-import { Button, Modal } from '@patternfly/react-core';
+import {
+    Button,
+    Divider,
+    Menu, MenuList, MenuItem, MenuContent, MenuInput,
+    Modal,
+    TextInput,
+} from '@patternfly/react-core';
 
 import "form-layout.scss";
 
@@ -80,19 +86,39 @@ export class LangModal extends React.Component {
         return (
             <Modal isOpen position="top" variant="medium"
                    id="display-language-modal"
+                   className="display-language-modal"
                    onClose={this.props.onClose}
                    title={_("Display language")}
                    footer={<>
                        <Button variant='primary' onClick={this.onSelect}>{_("Select")}</Button>
                        <Button variant='link' onClick={this.props.onClose}>{_("Cancel")}</Button>
                    </>}
             >
-                <p translate="yes">Choose the language to be used in the application</p>
-                <select id="display-language-list" size="5" data-role="none" defaultValue={this.state.selected} onChange={e => this.setState({ selected: e.target.value })}>
-                    {Object.keys(manifest.locales || { }).map(key => {
-                        return <option key={key} value={key}>{manifest.locales[key]}</option>;
-                    })}
-                </select>
+                <p>{_("Choose the language to be used in the application")}</p>
+                <Menu id="display-language-list"
+                      onSelect={(_, selected) => this.setState({ selected })}
+                      activeItemId={this.state.selected}
+                      selected={this.state.selected}>
+                    <MenuInput>
+                        <TextInput
+                            value={this.state.searchInput}
+                            aria-label={_("Filter menu items")}
+                            iconVariant="search"
+                            type="search"
+                            onChange={searchInput => this.setState({ searchInput })}
+                        />
+                    </MenuInput>
+                    <Divider />
+                    <MenuContent>
+                        <MenuList>
+                            {Object.keys(manifest.locales || { })
+                                    .filter(key => !this.state.searchInput || manifest.locales[key].toLowerCase().includes(this.state.searchInput.toString().toLowerCase()))
+                                    .map(key => {
+                                        return <MenuItem itemId={key} key={key} data-value={key}>{manifest.locales[key]}</MenuItem>;
+                                    })}
+                        </MenuList>
+                    </MenuContent>
+                </Menu>
             </Modal>);
     }
 }

pkg/shell/shell.scss

@@ -121,12 +121,16 @@ html.index-page body {
     font-weight: bold;
 }
 
-#display-language-list {
-    width: 100%;
+.display-language-modal {
+    /* Do not let the language menu expand to the end of the page */
+    .pf-c-menu__content {
+        max-height: 20rem;
+        overflow: auto;
+    }
 }
 
-#display-language-list option {
-    padding: 10px;
+#display-language-list {
+    margin-bottom: var(--pf-global--spacer--sm);
 }
 
 iframe.container-frame {

test/verify/check-apps

@@ -178,7 +178,10 @@ class TestApps(PackageCase):
                 b.click("#display-language-select-button")
             else:
                 b.wait_visible('#display-language-modal')
-                b.set_val("#display-language-modal select", lang)
+                if m.image in ["rhel-8-5-distropkg"]:
+                    b.set_val("#display-language-modal select", lang)
+                else:
+                    b.click('#display-language-modal li[data-value=%s] button' % lang)
                 b.click("#display-language-modal footer button.pf-m-primary")
             b.expect_load()
             # HACK: work around language switching in Chrome not working in current session (issue #8160)

test/verify/check-pages

@@ -165,7 +165,7 @@ OnCalendar=daily
         # Lets try changing the language
 
         self.open_lang_modal()
-        b.set_val("#display-language-modal select", "de-de")
+        b.click('#display-language-modal li[data-value=de-de] button')
         b.click("#display-language-modal footer button.pf-m-primary")
         b.expect_load()
         if b.cdp.browser in ["chrome", "chromium"]:
@@ -266,7 +266,7 @@ OnCalendar=daily
             b.enter_page("/system")
 
             self.open_lang_modal()
-            b.set_val("#display-language-modal select", language)
+            b.click("#display-language-modal li[data-value=%s] button" % language)
             b.click("#display-language-modal footer button.pf-m-primary")
             b.expect_load()
             if b.cdp.browser in ["chrome", "chromium"]:
@@ -318,7 +318,7 @@ OnCalendar=daily
         self.login_and_go('/system')
         b.wait_visible('#overview')
         self.open_lang_modal()
-        b.set_val('#display-language-modal select', 'pt-br')
+        b.click('#display-language-modal li[data-value=pt-br] button')
         b.click('#display-language-modal footer button.pf-m-primary')
         b.expect_load()
         if b.cdp.browser in ["chrome", "chromium"]:
@@ -511,7 +511,14 @@ OnCalendar=daily
 
         # Search internationalized menu
         self.open_lang_modal()
-        b.set_val("#display-language-modal select", "de-de")
+
+        # Filter the available languages
+        b.set_input_text('#display-language-modal input[type=search]', "Deutsch")
+        b.click('#display-language-modal li[data-value=de-de] button')
+        b.wait_js_func("ph_count_check", "#display-language-modal li", 1)
+        b.set_input_text('#display-language-modal input[type=search]', "")
+
+        b.click('#display-language-modal li[data-value=de-de] button')
         b.click("#display-language-modal footer button.pf-m-primary")
         b.expect_load()
         if b.cdp.browser in ["chrome", "chromium"]: