typeahead: Suggest existing custom language in Code Playground settings.

The Code Playground feature can have multiple entries per language. So
the autocomplete for settings should return existing custom languages
too.

web/src/realm_playground.js

@@ -58,8 +58,7 @@ export function get_pygments_typeahead_list_for_composebox() {
 }
 
 // This gets the candidate list for showing autocomplete in settings when
-// adding a new Code Playground. This will not include existing Code
-// Playgrounds in the candidate list.
+// adding a new Code Playground.
 export function get_pygments_typeahead_list_for_settings(query) {
     const language_labels = new Map();
 
@@ -73,6 +72,11 @@ export function get_pygments_typeahead_list_for_settings(query) {
         );
     }
 
+    const playground_pygment_langs = [...map_language_to_playground_info.keys()];
+    for (const lang of playground_pygment_langs) {
+        language_labels.set(lang, $t({defaultMessage: "Custom language: {query}"}, {query: lang}));
+    }
+
     for (const [key, values] of map_pygments_pretty_name_to_aliases) {
         language_labels.set(key, key + " (" + Array.from(values).join(", ") + ")");
     }

web/tests/realm_playground.test.js

@@ -7,6 +7,7 @@ const {run_test} = require("./lib/test");
 
 const pygments_data = zrequire("../generated/pygments_data.json");
 
+const {$t} = zrequire("i18n");
 const realm_playground = zrequire("realm_playground");
 
 run_test("get_pygments_typeahead_list_for_composebox", () => {
@@ -39,3 +40,67 @@ run_test("get_pygments_typeahead_list_for_composebox", () => {
         Object.keys(pygments_data.langs).length + playground_data.length,
     );
 });
+
+run_test("get_pygments_typeahead_list_for_settings", () => {
+    const custom_pygment_language = "custom_lang";
+    const playground_data = [
+        {
+            id: 1,
+            name: "Custom Lang #1",
+            pygments_language: custom_pygment_language,
+            url_prefix: "https://example.com/?q=",
+        },
+        {
+            id: 2,
+            name: "Custom Lang #2",
+            pygments_language: custom_pygment_language,
+            url_prefix: "https://example.com/?q=",
+        },
+        {
+            id: 3,
+            name: "Invent a Language",
+            pygments_language: "invent_a_lang",
+            url_prefix: "https://example.com/?q=",
+        },
+    ];
+    realm_playground.initialize(playground_data, pygments_data);
+
+    let candidates = realm_playground.get_pygments_typeahead_list_for_settings("");
+    let iterator = candidates.entries();
+    assert.equal(iterator.next().value[1], $t({defaultMessage: "Custom language: custom_lang"}));
+    assert.equal(iterator.next().value[1], $t({defaultMessage: "Custom language: invent_a_lang"}));
+    assert.equal(iterator.next().value[1], "JavaScript (javascript, js, javascript, js)");
+    assert.equal(
+        iterator.next().value[1],
+        "Python (python, py, py3, python3, sage, python, py, py3, python3, sage)",
+    );
+    assert.equal(iterator.next().value[1], "Java (java, java)");
+    assert.equal(iterator.next().value[1], "Go (go, golang, go, golang)");
+    assert.equal(iterator.next().value[1], "Rust (rust, rs, rust, rs)");
+
+    // Test typing "cu". Previously added custom languages should show up too.
+    candidates = realm_playground.get_pygments_typeahead_list_for_settings("cu");
+    iterator = candidates.entries();
+    assert.equal(
+        iterator.next().value[1],
+        $t({defaultMessage: "Custom language: {query}"}, {query: "cu"}),
+    );
+    assert.equal(iterator.next().value[1], $t({defaultMessage: "Custom language: custom_lang"}));
+    assert.equal(iterator.next().value[1], $t({defaultMessage: "Custom language: invent_a_lang"}));
+    assert.equal(iterator.next().value[1], "JavaScript (javascript, js, javascript, js)");
+    assert.equal(
+        iterator.next().value[1],
+        "Python (python, py, py3, python3, sage, python, py, py3, python3, sage)",
+    );
+
+    // Test typing "invent_a_lang". Make sure there is no duplicate entries.
+    candidates = realm_playground.get_pygments_typeahead_list_for_settings("invent_a_lang");
+    iterator = candidates.entries();
+    assert.equal(iterator.next().value[1], $t({defaultMessage: "Custom language: invent_a_lang"}));
+    assert.equal(iterator.next().value[1], $t({defaultMessage: "Custom language: custom_lang"}));
+    assert.equal(iterator.next().value[1], "JavaScript (javascript, js, javascript, js)");
+    assert.equal(
+        iterator.next().value[1],
+        "Python (python, py, py3, python3, sage, python, py, py3, python3, sage)",
+    );
+});