From 032cc8497fe7ecd2730e23d2bf81e19040349dcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20H=C3=B6nig?= <robhoenig@gmail.com>
Date: Wed, 7 Feb 2018 10:34:52 +0100
Subject: [PATCH] settings sidebar: Extract bot edit form.

This is the first step in cleaning up the bot edit code.
Since the bot edit form appears dynamically, we remove
it from the static HTML scaffold, of which settings_sidebar
is a part of.
---
 frontend_tests/node_tests/templates.js |  4 +++
 static/js/settings.js                  |  1 +
 static/js/settings_bots.js             |  8 +++--
 static/templates/edit_bot.handlebars   | 45 ++++++++++++++++++++++++
 templates/zerver/settings_sidebar.html | 47 +-------------------------
 5 files changed, 56 insertions(+), 49 deletions(-)
 create mode 100644 static/templates/edit_bot.handlebars

diff --git a/frontend_tests/node_tests/templates.js b/frontend_tests/node_tests/templates.js
index 2a549133cc..9d73fb8e4f 100644
--- a/frontend_tests/node_tests/templates.js
+++ b/frontend_tests/node_tests/templates.js
@@ -1465,6 +1465,10 @@ function render(template_name, args) {
     assert.equal($(html).find('input').attr('placeholder'), args.value);
 }());
 
+(function edit_bot() {
+    render('edit_bot');
+}());
+
 // By the end of this test, we should have compiled all our templates.  Ideally,
 // we will also have exercised them to some degree, but that's a little trickier
 // to enforce.
diff --git a/static/js/settings.js b/static/js/settings.js
index c1cad3ce87..5cf22943cf 100644
--- a/static/js/settings.js
+++ b/static/js/settings.js
@@ -11,6 +11,7 @@ $("body").ready(function () {
 
     var close_sidebar = function () {
         $sidebar.removeClass("show");
+        $sidebar.find("#edit_bot").empty();
         is_open = false;
     };
 
diff --git a/static/js/settings_bots.js b/static/js/settings_bots.js
index 8339fdf59d..6ef6786dc9 100644
--- a/static/js/settings_bots.js
+++ b/static/js/settings_bots.js
@@ -274,9 +274,11 @@ exports.set_up = function () {
 
     var image_version = 0;
 
-    var avatar_widget = avatar.build_bot_edit_widget($("#settings_page"));
-
     $("#active_bots_list").on("click", "button.open_edit_bot_form", function (e) {
+        var edit_bot_form = templates.render('edit_bot');
+        $(".edit_bot").empty();
+        $(".edit_bot").append(edit_bot_form);
+        var avatar_widget = avatar.build_bot_edit_widget($("#settings_page"));
         var users_list = people.get_realm_persons().filter(function (person)  {
             return !person.is_bot;
         });
@@ -286,7 +288,7 @@ exports.set_up = function () {
         var image = li.find(".image");
         var bot_info = li;
         var bot_id = bot_info.find('.bot_info').attr('data-user_id').valueOf();
-        var reset_edit_bot = li.find(".reset_edit_bot");
+        var reset_edit_bot = $("#edit_bot .reset_edit_bot");
         var owner_select = $(templates.render("bot_owner_select", {users_list:users_list}));
         var old_full_name = bot_info.find(".name").text();
         var old_owner = bot_data.get(bot_id).owner;
diff --git a/static/templates/edit_bot.handlebars b/static/templates/edit_bot.handlebars
new file mode 100644
index 0000000000..0d62fc3696
--- /dev/null
+++ b/static/templates/edit_bot.handlebars
@@ -0,0 +1,45 @@
+<form class="edit_bot_form form-horizontal" data-target="edit-bot" data-title="{{t 'Edit bot' }}">
+    <div class="bot_edit_errors alert alert-error hide"></div>
+    <div class="">
+        <label>{{t "Bot email" }}</label>
+        <div class="edit_bot_email"></div>
+    </div>
+    <div class="edit-bot-form-box">
+        <div class="">
+            <label for="edit_bot_name">{{t "Full name" }}</label>
+            <input id="edit_bot_name" type="text" name="bot_name" class="edit_bot_name required" maxlength=50 />
+            <div><label for="edit_bot_name" generated="true" class="text-error"></label></div>
+        </div>
+        <div class="edit-bot-owner">
+            <label for="bot_owner_select">{{t "Owner" }}</label>
+            <div class="select-form"></div>
+        </div>
+        <div id="service_data">
+            <div class="">
+                <label for="edit_service_base_url">{{t "Endoint URL" }}</label>
+                <input id="edit_service_base_url" type="text" name="service_payload_url" class="edit_service_base_url required" maxlength=50 />
+                <div><label for="edit_service_base_url" generated="true" class="text-error"></label></div>
+            </div>
+            <div class="">
+                <label for="edit_service_interface">{{t "Interface" }}</label>
+                <select id="edit_service_interface" name="service_interface" default="1">
+                    <option value="1">{{t "Generic" }}</option>
+                    <option value="2">{{t "Slack's outgoing webhooks" }}</option>
+                </select>
+            </div>
+        </div>
+        <div class="avatar-section">
+            <label for="bot_avatar_file_input">Avatar</label>
+            <input type="file" name="bot_avatar_file_input" class="notvisible edit_bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
+            <div class="edit_bot_avatar_file"></div>
+            <button type="button" class="btn btn-default edit_bot_avatar_upload_button">{{t "Choose avatar" }}</button>
+            <button type="button" class="btn btn-default edit_bot_avatar_clear_button display-none">{{t "Clear avatar" }}</button>
+            <div><label for="edit_bot_avatar_file" generated="true" class="edit_bot_avatar_error text-error"></label></div>
+        </div>
+        <div class="buttons">
+            <input type="submit" class="btn btn-primary edit_bot_button" value="{{t 'Save' }}" />
+            <button type="button" class="btn btn-default reset_edit_bot" data-sidebar-form-close>{{t 'Cancel' }}</button>
+            <div class="edit_bot_spinner"></div>
+        </div>
+    </div>
+</form>
diff --git a/templates/zerver/settings_sidebar.html b/templates/zerver/settings_sidebar.html
index 1bdbc61866..3a40ffcf70 100644
--- a/templates/zerver/settings_sidebar.html
+++ b/templates/zerver/settings_sidebar.html
@@ -5,52 +5,7 @@
     </div>
 
     <div class="content">
-        <div class='edit_bot'>
-            <form class="edit_bot_form form-horizontal" data-target="edit-bot" data-title="{{ _('Edit bot') }}">
-                <div class="bot_edit_errors alert alert-error hide"></div>
-                <div class="">
-                    <label>{{ _("Bot email") }}</label>
-                    <div class="edit_bot_email"></div>
-                </div>
-                <div class="edit-bot-form-box">
-                    <div class="">
-                        <label for="edit_bot_name">{{ _("Full name") }}</label>
-                        <input id="edit_bot_name" type="text" name="bot_name" class="edit_bot_name required" maxlength=50 />
-                        <div><label for="edit_bot_name" generated="true" class="text-error"></label></div>
-                    </div>
-                    <div class="edit-bot-owner">
-                        <label for="bot_owner_select">{{ _("Owner") }}</label>
-                        <div class="select-form"></div>
-                    </div>
-                    <div id="service_data">
-                        <div class="">
-                            <label for="edit_service_base_url">{{ _("Endoint URL") }}</label>
-                            <input id="edit_service_base_url" type="text" name="service_payload_url" class="edit_service_base_url required" maxlength=50 />
-                            <div><label for="edit_service_base_url" generated="true" class="text-error"></label></div>
-                        </div>
-                        <div class="">
-                            <label for="edit_service_interface">{{ _("Interface") }}</label>
-                            <select id="edit_service_interface" name="service_interface" default="1">
-                                <option value="1">{{ _("Generic") }}</option>
-                                <option value="2">{{ _("Slack's outgoing webhooks") }}</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="avatar-section">
-                        <label for="bot_avatar_file_input">Avatar</label>
-                        <input type="file" name="bot_avatar_file_input" class="notvisible edit_bot_avatar_file_input" value="{{ _('Upload avatar') }}" />
-                        <div class="edit_bot_avatar_file"></div>
-                        <button type="button" class="btn btn-default edit_bot_avatar_upload_button">{{ _("Choose avatar") }}</button>
-                        <button type="button" class="btn btn-default edit_bot_avatar_clear_button display-none">{{ _("Clear avatar") }}</button>
-                        <div><label for="edit_bot_avatar_file" generated="true" class="edit_bot_avatar_error text-error"></label></div>
-                    </div>
-                    <div class="buttons">
-                        <input type="submit" class="btn btn-primary edit_bot_button" value="{{ _('Save') }}" />
-                        <button type="button" class="btn btn-default reset_edit_bot" data-sidebar-form-close>{{ _('Cancel') }}</button>
-                        <div class="edit_bot_spinner"></div>
-                    </div>
-                </div>
-            </form>
+        <div id="edit_bot" class='edit_bot'>
         </div>
     </div>
 </div>