From 7c7919fdb4403f6b6e0309d5498ef9e985b5d5fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Fri, 10 Nov 2017 13:42:50 +0200
Subject: [PATCH] UI tweaks for the "Add Webhook" form.

---
 hc/front/forms.py                       | 14 ++---
 hc/front/views.py                       |  5 +-
 static/css/channels.css                 | 10 ++++
 static/js/webhook.js                    | 42 +++++++--------
 templates/integrations/add_webhook.html | 71 ++++++++++++++-----------
 5 files changed, 77 insertions(+), 65 deletions(-)

diff --git a/hc/front/forms.py b/hc/front/forms.py
index 3308787b..554ec5ee 100644
--- a/hc/front/forms.py
+++ b/hc/front/forms.py
@@ -67,16 +67,16 @@ class AddWebhookForm(forms.Form):
     post_data = forms.CharField(max_length=1000, required=False)
 
     def __init__(self, *args, **kwargs):
-        self.headers = {}
-        if all(k in kwargs for k in ("header_keys", "header_values")):
-            header_keys = kwargs.pop("header_keys")
-            header_values = kwargs.pop("header_values")
+        super(AddWebhookForm, self).__init__(*args, **kwargs)
 
-            for i, (key, val) in enumerate(zip(header_keys, header_values)):
+        self.headers = {}
+        if "header_key[]" in self.data and "header_value[]" in self.data:
+            keys = self.data.getlist("header_key[]")
+            values = self.data.getlist("header_value[]")
+            for key, value in zip(keys, values):
                 if key:
-                    self.headers[key] = val
+                    self.headers[key] = value
 
-        super(AddWebhookForm, self).__init__(*args, **kwargs)
 
     def get_value(self):
         val = dict(self.cleaned_data)
diff --git a/hc/front/views.py b/hc/front/views.py
index 972ef126..22853577 100644
--- a/hc/front/views.py
+++ b/hc/front/views.py
@@ -437,10 +437,7 @@ def add_email(request):
 @login_required
 def add_webhook(request):
     if request.method == "POST":
-        header_keys = request.POST.getlist('header_key[]')
-        header_values = request.POST.getlist('header_value[]')
-        form = AddWebhookForm(request.POST or None, 
-            header_keys=header_keys, header_values=header_values)
+        form = AddWebhookForm(request.POST)
         if form.is_valid():
             channel = Channel(user=request.team.user, kind="webhook")
             channel.value = form.get_value()
diff --git a/static/css/channels.css b/static/css/channels.css
index 0d2a0d5c..d4e5a364 100644
--- a/static/css/channels.css
+++ b/static/css/channels.css
@@ -191,4 +191,14 @@ table.channels-table > tbody > tr > th {
 
 .page-channels .icon-delete {
     font-size: 16px;
+}
+
+/* Add Webhook */
+
+.webhook-header input.form-control {
+    width: 300px;
+}
+
+.webhook-header {
+    margin-bottom: 4px;
 }
\ No newline at end of file
diff --git a/static/js/webhook.js b/static/js/webhook.js
index 9b22b380..2e7cc9f2 100644
--- a/static/js/webhook.js
+++ b/static/js/webhook.js
@@ -1,29 +1,25 @@
 $(function() {
-    $(".webhook_header_btn:first").addClass("btn-info").text("+")
-    $(".webhook_header_btn:not(:first)").addClass("btn-danger").text("X")
+    function haveBlankHeaderForm() {
+        return $("#webhook-headers .webhook-header").filter(function() {
+            var key = $(".key", this).val();
+            var value = $(".value", this).val();
+            return !key && !value;
+        }).length;
+    }
 
-    $("#webhook_headers").on("click", ".webhook_header_btn.btn-danger", function(e) {
-        e.preventDefault();
-        $(this).closest("div.row").remove();
-    });
+    function ensureBlankHeaderForm() {
+        if (!haveBlankHeaderForm()) {
+            var tmpl = $("#header-template").html();
+            $("#webhook-headers").append(tmpl);
+        }
+    }
 
-    $("#webhook_headers").on("click", ".webhook_header_btn.btn-info", function(e) {
+    $("#webhook-headers").on("click", "button", function(e) {
         e.preventDefault();
+        $(this).closest(".webhook-header").remove();
+        ensureBlankHeaderForm();
+    })
 
-        // Add new header form
-        $("#webhook_headers").append(
-'<div class="row">\
-    <div class="col-xs-6 col-sm-6" style="padding-right: 0px;">\
-        <input type="text" class="form-control" name="header_key[]" placeholder="Key">\
-    </div>\
-    <div class="col-xs-6 col-sm-6" style="padding-left: 0px;">\
-        <div class="input-group">\
-            <input type="text" class="form-control" name="header_value[]" placeholder="Value">\
-            <span class="input-group-btn">\
-                <button class="webhook_header_btn btn btn-danger" type="button" class="btn">X</button>\
-            </span>\
-        </div>\
-    </div>\
-</div>');
-    });
+    $("#webhook-headers").on("keyup", "input", ensureBlankHeaderForm);
+    ensureBlankHeaderForm();
 });
\ No newline at end of file
diff --git a/templates/integrations/add_webhook.html b/templates/integrations/add_webhook.html
index 4291a041..6e952ad8 100644
--- a/templates/integrations/add_webhook.html
+++ b/templates/integrations/add_webhook.html
@@ -106,40 +106,31 @@
             </div>
         </div>
         <div class="form-group {{ form.headers.css_classes }}">
-            <label class="col-sm-2 control-label">Headers</label>
-            <div id="webhook_headers" class="col-xs-12 col-sm-10">
-                {% if form.headers %}
-                {% for k,v in form.headers.items %}
-                <div class="row">
-                    <div class="col-xs-6 col-sm-6" style="padding-right: 0px;">
-                        <input type="text" class="form-control" name="header_key[]" placeholder="Key" value="{{ k|default:"" }}">
-                    </div>
-                    <div class="col-xs-6 col-sm-6" style="padding-left: 0px;">
-                        <div class="input-group">
-                            <input type="text" class="form-control" name="header_value[]" placeholder="Value" value="{{ v|default:"" }}">
-                            <span class="input-group-btn">
-                                <button class="webhook_header_btn btn" type="button" class="btn"></button>
-                            </span>
-                        </div>
-                    </div>
+            <label class="col-sm-2 control-label">Request Headers</label>
+            <div id="webhook-headers" class="col-xs-12 col-sm-10">
+                {% for k, v in form.headers.items %}
+                <div class="form-inline webhook-header">
+                    <input
+                        type="text"
+                        class="form-control key"
+                        name="header_key[]"
+                        placeholder="Content-Type"
+                        value="{{ k }}" />
+                    <input
+                        type="text"
+                        class="form-control value"
+                        name="header_value[]"
+                        placeholder="application/json"
+                        value="{{ v }}" />
+                        <button class="btn btn-default" type="button">
+                            <span class="icon-delete"></span>
+                        </button>
                 </div>
                 {% endfor %}
-                {% else %}
-                <div class="row">
-                    <div class="col-xs-6 col-sm-6" style="padding-right: 0px;">
-                        <input type="text" class="form-control" name="header_key[]" placeholder="Key">
-                    </div>
-                    <div class="col-xs-6 col-sm-6" style="padding-left: 0px;">
-                        <div class="input-group">
-                            <input type="text" class="form-control" name="header_value[]" placeholder="Value">
-                            <span class="input-group-btn">
-                                <button class="webhook_header_btn btn btn-info" type="button" class="btn">+</button>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                {% endif %}
             </div>
+            <div class="text-center">
+            </div>
+
         </div>
         <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10">
@@ -149,6 +140,24 @@
     </form>
 </div>
 </div>
+
+<div id="header-template" class="hide">
+    <div class="form-inline webhook-header">
+        <input
+            type="text"
+            class="form-control key"
+            name="header_key[]"
+            placeholder="Content-Type" />
+        <input
+            type="text"
+            class="form-control value"
+            name="header_value[]"
+            placeholder="application/json" />
+            <button class="btn btn-default" type="button">
+                <span class="icon-delete"></span>
+            </button>
+    </div>
+</div>
 {% endblock %}
 
 {% block scripts %}