settings: Refactor default-language modal code.

We add a prefix to id of default_language_modal.hbs
such that we can use the same code for user settings
and realm-level settings.
We also add a class "default_language_modal" to the
modal div to avoid duplicate css.

frontend_tests/puppeteer_tests/settings.ts

@@ -301,7 +301,7 @@ async function test_alert_words_section(page: Page): Promise<void> {
 async function change_language(page: Page, language_data_code: string): Promise<void> {
     await page.waitForSelector("#user-display-settings .default_language", {visible: true});
     await page.click("#user-display-settings .default_language");
-    await page.waitForSelector("#default_language_modal", {visible: true});
+    await page.waitForSelector("#user_default_language_modal", {visible: true});
     const language_selector = `a[data-code="${CSS.escape(language_data_code)}"]`;
     await page.click(language_selector);
 }

static/js/settings_display.js

@@ -41,6 +41,8 @@ function change_display_setting(data, status_element, success_msg_html, sticky)
 export function set_up() {
     meta.loaded = true;
     const container = $("#user-display-settings");
+    const language_modal_elem = "#user_default_language_modal";
+
     container.find(".display-settings-status").hide();
 
     container.find(".demote_inactive_streams").val(user_settings.demote_inactive_streams);
@@ -57,8 +59,8 @@ export function set_up() {
         .find(`.emojiset_choice[value="${CSS.escape(user_settings.emojiset)}"]`)
         .prop("checked", true);
 
-    $("#default_language_modal [data-dismiss]").on("click", () => {
-        overlays.close_modal("#default_language_modal");
+    $(`${CSS.escape(language_modal_elem)} [data-dismiss]`).on("click", () => {
+        overlays.close_modal(language_modal_elem);
     });
 
     const all_display_settings = settings_config.get_all_display_settings();
@@ -86,36 +88,38 @@ export function set_up() {
         });
     }
 
-    $("#default_language_modal .language").on("click", (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        overlays.close_modal("#default_language_modal");
+    $(language_modal_elem)
+        .find(".language")
+        .on("click", (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            overlays.close_modal(language_modal_elem);
 
-        const $link = $(e.target).closest("a[data-code]");
-        const setting_value = $link.attr("data-code");
-        const data = {default_language: setting_value};
+            const $link = $(e.target).closest("a[data-code]");
+            const setting_value = $link.attr("data-code");
+            const data = {default_language: setting_value};
 
-        const new_language = $link.attr("data-name");
-        container.find(".default_language_name").text(new_language);
+            const new_language = $link.attr("data-name");
+            container.find(".default_language_name").text(new_language);
 
-        change_display_setting(
-            data,
-            "#user-display-settings .language-settings-status",
-            $t_html(
-                {
-                    defaultMessage:
-                        "Saved. Please <z-link>reload</z-link> for the change to take effect.",
-                },
-                {"z-link": (content_html) => `<a class='reload_link'>${content_html}</a>`},
-            ),
-            true,
-        );
-    });
+            change_display_setting(
+                data,
+                "#user-display-settings .language-settings-status",
+                $t_html(
+                    {
+                        defaultMessage:
+                            "Saved. Please <z-link>reload</z-link> for the change to take effect.",
+                    },
+                    {"z-link": (content_html) => `<a class='reload_link'>${content_html}</a>`},
+                ),
+                true,
+            );
+        });
 
     container.find(".default_language").on("click", (e) => {
         e.preventDefault();
         e.stopPropagation();
-        overlays.open_modal("#default_language_modal");
+        overlays.open_modal(language_modal_elem);
     });
 
     container.find(".demote_inactive_streams").on("change", function () {

static/styles/settings.css

@@ -342,7 +342,7 @@ td .button {
         text-decoration: none;
     }
 
-    #default_language_modal {
+    .default_language_modal {
         table {
             width: 90%;
             margin-top: 20px;

static/templates/default_language_modal.hbs

@@ -1,8 +1,8 @@
-<div id="default_language_modal" class="modal hide modal-bg fade" tabindex="-1" role="dialog"
-  aria-labelledby="default_language_modal_label" aria-hidden="true">
+<div id="{{prefix}}default_language_modal" class="modal hide modal-bg fade default_language_modal" tabindex="-1" role="dialog"
+  aria-labelledby="{{prefix}}default_language_modal_label" aria-hidden="true">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
-        <h3 id="default_language_modal_label">{{t "Select default language" }}</h3>
+        <h3 id="{{prefix}}default_language_modal_label">{{t "Select default language" }}</h3>
     </div>
     <div class="modal-body">
         <p>

static/templates/settings/display_settings.hbs

@@ -13,7 +13,7 @@
             </button>
         </div>
 
-        {{> ../default_language_modal language_list=language_list_dbl_col}}
+        {{> ../default_language_modal language_list=language_list_dbl_col prefix=prefix}}
     </div>
 
     <div class="display-settings">