shell: Rewrite language selector into react and PF4

Author: marusak

pkg/shell/base_index.js

@@ -19,7 +19,11 @@
 
 import $ from "jquery";
 import cockpit from "cockpit";
+import React from "react";
+import ReactDOM from "react-dom";
+
 import { showDialog } from "./active-pages";
+import { LangModal } from "./shell-modals.jsx";
 
 var shell_embedded = window.location.pathname.indexOf(".html") !== -1;
 const _ = cockpit.gettext;
@@ -486,7 +490,7 @@ function Router(index) {
  * As a convenience, common menu items can be setup by adding the
  * selector to be used to hook them up. The accepted selectors
  * are.
- * oops_sel, logout_sel, language_sel
+ * oops_sel, logout_sel
  *
  * Emits "disconnect" and "expect_restart" signals, that should be
  * handled by the caller.
@@ -818,44 +822,6 @@ function Index() {
         });
     }
 
-    /* Display language dialog */
-    function setup_language(id) {
-        /*
-         * Note that we don't go ahead and load all the po files in order
-         * to produce this list. Perhaps we would include it somewhere in a
-         * separate automatically generated file. Need to see.
-         */
-        var manifest = cockpit.manifests.shell || { };
-        $(".display-language-menu").toggle(!!manifest.locales);
-        var language = document.cookie.replace(/(?:(?:^|.*;\s*)CockpitLang\s*=\s*([^;]*).*$)|^.*$/, "$1");
-        if (!language)
-            language = "en-us";
-
-        $('html').attr('lang', language);
-
-        $.each(manifest.locales || { }, function(code, name) {
-            var el = $("<option>").text(name)
-                    .val(code);
-            if (code == language)
-                el.attr("selected", "true");
-            $("#display-language-list").append(el);
-        });
-
-        $("#display-language-select-button").on("click", function(event) {
-            var code_to_select = $("#display-language-list").val();
-            var cookie = "CockpitLang=" + encodeURIComponent(code_to_select) +
-                         "; path=/; expires=Sun, 16 Jul 3567 06:23:41 GMT";
-            document.cookie = cookie;
-            window.localStorage.setItem("cockpit.lang", code_to_select);
-            window.location.reload(true);
-            return false;
-        });
-
-        $(id).on("shown.bs.modal", function() {
-            $("display-language-list").focus();
-        });
-    }
-
     function setup_killer(id) {
         $(id).on("click", function(ev) {
             if (ev && ev.button === 0)
@@ -869,11 +835,19 @@ function Index() {
     if (self.logout_sel)
         setup_logout(self.logout_sel);
 
-    if (self.language_sel)
-        setup_language(self.language_sel);
-
     if (self.killer_sel)
         setup_killer(self.killer_sel);
+
+    const manifest = cockpit.manifests.shell || { };
+    $(".display-language-menu").toggle(!!manifest.locales);
+
+    $("#open-display-language").click(() => {
+        ReactDOM.render(React.createElement(LangModal, {
+            onClose: () =>
+                ReactDOM.unmountComponentAtNode(document.getElementById('display-language'))
+        }),
+                        document.getElementById('display-language'));
+    });
 }
 
 function CompiledComponents() {

pkg/shell/index.html

@@ -69,7 +69,7 @@
               <li id="super-user-indicator-mobile" class="mobile_v"></li>
               <li class="divider mobile_v"></li>
               <li class="display-language-menu">
-                <a role="link" tabindex="0" data-toggle="modal" data-target="#display-language" translate="yes">Display language</a>
+                <a role="link" tabindex="0" translate="yes" id="open-display-language">Display language</a>
               </li>
               <li class="divider display-language-menu"></li>
               <li>
@@ -104,24 +104,7 @@
             </div>
         </div>
 
-        <div class="modal" id="display-language" tabindex="-1" role="dialog" data-backdrop="static">
-          <div class="modal-dialog">
-            <div class="modal-content">
-              <div class="modal-header">
-                <h4 class="modal-title" translate="yes">Display language</h4>
-              </div>
-              <div class="modal-body">
-                <p translate="yes">Choose the language to be used in the application</p>
-                <select id="display-language-list" size="5" data-role="none">
-                </select>
-              </div>
-              <div class="modal-footer">
-                <button class="pf-c-button pf-m-primary" id="display-language-select-button" translate="yes">Select</button>
-                <button class="pf-c-button pf-m-link" data-dismiss="modal" translate="yes">Cancel</button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <div id="display-language"></div>
 
         <div class="modal" id="session-timeout-dialog" tabindex="-1" role="dialog" data-backdrop="static">
           <div class="modal-dialog">

pkg/shell/index.js

@@ -45,7 +45,6 @@ document.addEventListener("click", function(ev) {
 var options = {
     logout_sel: "#go-logout",
     oops_sel: "#navbar-oops",
-    language_sel: "#display-language",
     killer_sel: "#active-pages",
     default_title: "Cockpit",
 };

pkg/shell/shell-modals.jsx

@@ -46,3 +46,53 @@ export function AboutModal(props) {
             </div>
         </Modal>);
 }
+
+export class LangModal extends React.Component {
+    constructor(props) {
+        super();
+
+        let language = document.cookie.replace(/(?:(?:^|.*;\s*)CockpitLang\s*=\s*([^;]*).*$)|^.*$/, "$1");
+        if (!language)
+            language = "en-us";
+
+        this.state = {
+            selected: language,
+        };
+
+        this.onSelect = this.onSelect.bind(this);
+    }
+
+    onSelect() {
+        const lang = this.state.selected;
+
+        if (!lang)
+            return;
+
+        const cookie = "CockpitLang=" + encodeURIComponent(lang) + "; path=/; expires=Sun, 16 Jul 3567 06:23:41 GMT";
+        document.cookie = cookie;
+        window.localStorage.setItem("cockpit.lang", lang);
+        window.location.reload(true);
+    }
+
+    render() {
+        const manifest = cockpit.manifests.shell || { };
+
+        return (
+            <Modal isOpen position="top" variant="medium"
+                   id="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>
+            </Modal>);
+    }
+}

test/verify/check-apps

@@ -164,9 +164,14 @@ class TestApps(PackageCase):
             b.switch_to_top()
             b.click("#navbar-dropdown")
             b.click(".display-language-menu a")
-            b.wait_popup('display-language')
-            b.set_val("#display-language select", lang)
-            b.click("#display-language-select-button")
+            if m.image == "rhel-8-3-distropkg": # Changed in #14890
+                b.wait_popup('display-language')
+                b.set_val("#display-language select", lang)
+                b.click("#display-language-select-button")
+            else:
+                b.wait_visible('#display-language-modal')
+                b.set_val("#display-language-modal select", 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)
             b.reload(ignore_cache=True)
@@ -177,7 +182,7 @@ class TestApps(PackageCase):
         b.wait_present(".app-description:contains('DESCRIPTION:de')")
         b.wait_not_present(".app-description:contains('DESCRIPTION:none')")
 
-        set_lang("ja-ja")
+        set_lang("ja-jp")
         b.wait_present(".app-description:contains('DESCRIPTION:none')")
         b.wait_not_present(".app-description:contains('DESCRIPTION:de')")
 

test/verify/check-pages

@@ -51,7 +51,7 @@ class TestPages(MachineCase):
         self.browser.click("#navbar-dropdown")
 
         self.browser.click(".display-language-menu a")
-        self.browser.wait_popup('display-language')
+        self.browser.wait_visible('#display-language-modal')
 
 
     def testBasic(self):
@@ -166,8 +166,8 @@ OnCalendar=daily
         # Lets try changing the language
 
         self.open_lang_modal()
-        b.set_val("#display-language select", "de-de")
-        b.click("#display-language-select-button")
+        b.set_val("#display-language-modal select", "de-de")
+        b.click("#display-language-modal footer button.pf-m-primary")
         b.expect_load()
         if b.cdp.browser in ["chrome", "chromium"]:
             # HACK: work around language switching in Chrome not working in current session (issue #8160)
@@ -249,16 +249,16 @@ OnCalendar=daily
         b.wait_present('#overview')
 
         self.open_lang_modal()
-        languages = b.eval_js("ph_select('#display-language-list option').map(function(e) { return e.value })")
-        b.click("#display-language button[data-dismiss]") # Close the menu
+        languages = b.eval_js("ph_select('#display-language-modal-list option').map(function(e) { return e.value })")
+        b.click("#display-language-modal footer button.pf-m-link") # Close the menu
 
         for language in languages:
             b.go("/system")
             b.enter_page("/system")
 
             self.open_lang_modal()
-            b.set_val("#display-language select", language)
-            b.click("#display-language-select-button")
+            b.set_val("#display-language-modal select", language)
+            b.click("#display-language-modal footer button.pf-m-primary")
             b.expect_load()
             if b.cdp.browser in ["chrome", "chromium"]:
                 # HACK: work around language switching in Chrome not working in current session (issue #8160)
@@ -308,8 +308,8 @@ OnCalendar=daily
         self.login_and_go('/system')
         b.wait_present('#overview')
         self.open_lang_modal()
-        b.set_val('#display-language select', 'pt-br')
-        b.click('#display-language-select-button')
+        b.set_val('#display-language-modal select', 'pt-br')
+        b.click('#display-language-modal footer button.pf-m-primary')
         b.expect_load()
         if b.cdp.browser in ["chrome", "chromium"]:
             # HACK: work around language switching in Chrome not working in current session (issue #8160)
@@ -501,8 +501,8 @@ OnCalendar=daily
 
         # Search internationalized menu
         self.open_lang_modal()
-        b.set_val("#display-language select", "de-de")
-        b.click("#display-language-select-button")
+        b.set_val("#display-language-modal select", "de-de")
+        b.click("#display-language-modal footer button.pf-m-primary")
         b.expect_load()
         if b.cdp.browser in ["chrome", "chromium"]:
             # HACK: work around language switching in Chrome not working in current session (issue #8160)