settings_playground: Add typeaheads for pygments_name field.

The typeahead suggests a human-readable `pretty_name` for the
`language` field in the add-playgrounds form.

The suggestions are sorted based on the popularity of these
languages.

E.g: A `py` prefix would match with `Python` first before
matching with others like `Python 2.x` based on priority.

static/js/realm_playground.js

@@ -1,4 +1,7 @@
+import * as typeahead_helper from "./typeahead_helper";
+
 const map_language_to_playground_info = new Map();
+const pygments_pretty_name_list = new Set();
 
 export function update_playgrounds(playgrounds_data) {
     map_language_to_playground_info.clear();
@@ -21,6 +24,25 @@ export function get_playground_info_for_languages(lang) {
     return map_language_to_playground_info.get(lang);
 }
 
-export function initialize(playground_data) {
-    update_playgrounds(playground_data);
+export function sort_pygments_pretty_names_by_priority(generated_pygments_data) {
+    const priority_sorted_pygments_data = Object.keys(generated_pygments_data.langs).sort(
+        typeahead_helper.compare_by_popularity,
+    );
+    for (const data of priority_sorted_pygments_data) {
+        const pretty_name = generated_pygments_data.langs[data].pretty_name;
+        // JS maintains the order of insertion in a set so we don't need to worry about
+        // the priority changing.
+        if (!pygments_pretty_name_list.has(pretty_name)) {
+            pygments_pretty_name_list.add(pretty_name);
+        }
+    }
+}
+
+export function get_pygments_pretty_names_list() {
+    return Array.from(pygments_pretty_name_list);
+}
+
+export function initialize(playground_data, generated_pygments_data) {
+    update_playgrounds(playground_data);
+    sort_pygments_pretty_names_by_priority(generated_pygments_data);
 }

static/js/settings_playgrounds.js

@@ -6,6 +6,8 @@ import * as channel from "./channel";
 import {$t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import {page_params} from "./page_params";
+import * as realm_playground from "./realm_playground";
+import * as typeahead_helper from "./typeahead_helper";
 import * as ui from "./ui";
 import * as ui_report from "./ui_report";
 
@@ -149,4 +151,19 @@ function build_page() {
                 },
             });
         });
+
+    $("#playground_pygments_language").typeahead({
+        source() {
+            return realm_playground.get_pygments_pretty_names_list();
+        },
+        items: 5,
+        fixed: true,
+        highlighter(item) {
+            return typeahead_helper.render_typeahead_item({primary: item});
+        },
+        matcher(item) {
+            const q = this.query.trim().toLowerCase();
+            return item.toLowerCase().startsWith(q);
+        },
+    });
 }

static/js/ui_init.js

@@ -504,7 +504,7 @@ export function initialize_everything() {
         emoji_codes: generated_emoji_codes,
     });
     markdown.initialize(page_params.realm_linkifiers, markdown_config.get_helpers());
-    realm_playground.initialize(page_params.realm_playgrounds);
+    realm_playground.initialize(page_params.realm_playgrounds, generated_pygments_data);
     composebox_typeahead.initialize(); // Must happen after compose.initialize()
     search.initialize();
     tutorial.initialize();

static/templates/settings/playground_settings_admin.hbs

@@ -28,7 +28,6 @@
                     <div class="settings-section-title">{{t "Add a new code playground" }}</div>
                     <div class="alert" id="admin-playground-status"></div>
                     <div class="control-group">
-                        {{!-- TODO: This should have a typeahead suggestion popover --}}
                         <label for="playground_pygments_language" class="control-label"> {{t "Language" }}</label>
                         <input type="text" id="playground_pygments_language" name="pygments_language" autocomplete="off" placeholder="Python" />
                     </div>