settings_playground: Add UI to create a new playground.

The design of the form is similar to the linkifiers page
and is styled similarly.

The introduction text for "Code playgrounds" is improved
with more details and examples.

Also, we can remove the hardcoded playground and the fix
we had previously done to prevent breaking the hardcoded
playground.

static/js/realm_playground.js

@@ -1,6 +1,3 @@
-import {page_params} from "./page_params";
-import * as settings_config from "./settings_config";
-
 const map_language_to_playground_info = new Map();
 
 export function update_playgrounds(playgrounds_data) {
@@ -21,14 +18,7 @@ export function update_playgrounds(playgrounds_data) {
 }
 
 export function get_playground_info_for_languages(lang) {
-    if (page_params.realm_playgrounds) {
-        return map_language_to_playground_info.get(lang);
-    }
-
-    // FIXME: To avoid breaking the configured hardcoded playgrounds, this approach
-    // is used. This will be removed in the commit which adds the UI for playground
-    // creation.
-    return settings_config.get_playground_info_for_languages(lang);
+    return map_language_to_playground_info.get(lang);
 }
 
 export function initialize(playground_data) {

static/js/settings_config.js

@@ -417,55 +417,6 @@ export const all_notifications = () => ({
     },
 });
 
-const map_language_to_playground_info = {
-    // TODO: This is being hardcoded just for the prototype, post which we should
-    // add support for realm admins to configure their own choices. The keys here
-    // are the pygment lexer subclass names for the different language alias it
-    // supports.
-    Rust: [
-        {
-            name: "Rust playground",
-            url_prefix: "https://play.rust-lang.org/?edition=2018&code=",
-        },
-    ],
-    Julia: [
-        {
-            name: "Julia playground",
-            url_prefix: "https://repl.it/languages/julia/?code=",
-        },
-    ],
-    Python: [
-        {
-            name: "Python 3 playground",
-            url_prefix: "https://repl.it/languages/python3/?code=",
-        },
-    ],
-    "Python 2.7": [
-        {
-            name: "Python 2.7 playground",
-            url_prefix: "https://repl.it/languages/python/?code=",
-        },
-    ],
-    JavaScript: [
-        {
-            name: "JavaScript playground",
-            url_prefix: "https://repl.it/languages/javascript/?code=",
-        },
-    ],
-    Lean: [
-        {
-            name: "Lean playground",
-            url_prefix: "https://leanprover.github.io/live/latest/#code=",
-        },
-        {
-            name: "Lean community playground",
-            url_prefix: "https://leanprover-community.github.io/lean-web-editor/#code=",
-        },
-    ],
-};
-
-export const get_playground_info_for_languages = (lang) => map_language_to_playground_info[lang];
-
 export const desktop_icon_count_display_values = {
     messages: {
         code: 1,

static/js/settings_playgrounds.js

@@ -2,9 +2,12 @@ import $ from "jquery";
 
 import render_admin_playground_list from "../templates/settings/admin_playground_list.hbs";
 
+import * as channel from "./channel";
+import {$t_html} from "./i18n";
 import * as ListWidget from "./list_widget";
 import {page_params} from "./page_params";
 import * as ui from "./ui";
+import * as ui_report from "./ui_report";
 
 const meta = {
     loaded: false,
@@ -84,4 +87,49 @@ export function set_up() {
 function build_page() {
     meta.loaded = true;
     populate_playgrounds(page_params.realm_playgrounds);
+
+    $(".organization form.admin-playground-form")
+        .off("submit")
+        .on("submit", function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const playground_status = $("#admin-playground-status");
+            const add_playground_button = $(".new-playground-form button");
+            add_playground_button.prop("disabled", true);
+            playground_status.hide();
+
+            channel.post({
+                url: "/json/realm/playgrounds",
+                data: $(this).serialize(),
+                success() {
+                    $("#playground_pygments_language").val("");
+                    $("#playground_name").val("");
+                    $("#playground_url_prefix").val("");
+                    add_playground_button.prop("disabled", false);
+                    ui_report.success(
+                        $t_html({defaultMessage: "Custom playground added!"}),
+                        playground_status,
+                        3000,
+                    );
+                    // FIXME: One thing to note here is that the "view code in playground"
+                    // option for an already rendered code block (tagged with this newly added
+                    // language) would not be visible without a re-render. To fix this, we should
+                    // probably do some extraction in `rendered_markdown.js` which does a
+                    // live-update of the `data-code-language` parameter in code blocks. Or change
+                    // how we do the HTML in the frontend so that the icon labels/behavior are
+                    // computed dynamically when you hover over the message based on configured
+                    // playgrounds. Since this isn't high priority right now, we can probably
+                    // take this up later.
+                },
+                error(xhr) {
+                    add_playground_button.prop("disabled", false);
+                    ui_report.error(
+                        $t_html({defaultMessage: "Failed"}),
+                        xhr,
+                        playground_status,
+                        3000,
+                    );
+                },
+            });
+        });
 }