Allow testing notifiers before registering them

This commit adds a new "Test" button next to the one for registering a notifier,
so the user can use it to test if the notifier they are about to register
actually works.

Author: vincent-olivert-riera

promgen/static/js/promgen.vue.js

@@ -38,6 +38,16 @@ const silenceStore = {
     }
 };
 
+const notifierPreTestResultStore = {
+    state: {
+        result: null,
+        msg: null,
+        show: false,
+    },
+    show() { this.state.show = true },
+    set(key, val) { this.state[key] = val },
+};
+
 const app = new Vue({
     el: '#vue',
     delimiters: ['[[', ']]'],
@@ -263,3 +273,46 @@ const ExporterTest = Vue.component('exporter-test', {
         }
     }
 })
+
+const NotifierPreTestResult = Vue.component("notifier-pre-test-result", {
+    data: () => ({
+        state: notifierPreTestResultStore.state,
+    }),
+    template: `
+        <bootstrap-panel
+            :class="{
+                'panel-info': state.result === 'success',
+                'panel-danger': state.result === 'error'}
+            "
+            heading="Notifier test result"
+            v-if="state.show"
+        >
+            {{ state.msg }}
+        </bootstrap-panel>`,
+});
+
+const NotifierPreTest = Vue.component("notifier-pre-test", {
+    // Notifier Pre Test button for Forms.
+    // Acts like a regular form submit button, but hijacks the button click and
+    // submits it to an alternate URL for testing.
+    props: ["href"],
+    template: `
+        <button @click.prevent="onTestSubmit">
+            <slot />
+        </button>`,
+    methods: {
+        onTestSubmit(event) {
+            // Find the parent form our button belongs to so that we can
+            // simulate a form submission.
+            const form = new FormData(event.srcElement.closest("form"));
+            fetch(this.href, { body: form, method: "post" })
+                .then(resp => resp.json())
+                .then(resp => {
+                    notifierPreTestResultStore.set("result", resp.result);
+                    notifierPreTestResultStore.set("msg", resp.msg);
+                    notifierPreTestResultStore.show();
+                })
+                .catch((error) => alert(error));
+        },
+    },
+});

promgen/templates/promgen/profile.html

@@ -78,6 +78,12 @@ <h1>{{user.username}} ({{user.email}})</h1>
             </table>
             <div class="panel-footer">
               <button class="btn btn-primary">Register Notifier</button>
+              <notifier-pre-test
+                class="btn btn-info"
+                href="{% url 'notifier-pre-test' %}"
+              >
+                {% trans "Test" %}
+              </notifier-pre-test>
             </div>
           </form>
         </div>
@@ -88,6 +94,10 @@ <h1>{{user.username}} ({{user.email}})</h1>
   </div>
 </div>
 
+<div>
+  <notifier-pre-test-result></notifier-pre-test-result>
+</div>
+
 {% if user.is_staff %}
 <div class="panel panel-warning">
   <div class="panel-heading">Debug</div>

promgen/urls.py

@@ -80,6 +80,7 @@
     path("notifier/<int:pk>/test", views.NotifierTest.as_view(), name="notifier-test"),
     path("notifier/<int:pk>", views.NotifierUpdate.as_view(), name="notifier-edit"),
     path("notifier/<int:pk>/toggle", views.NotifierToggle.as_view(), name="notifier-toggle"),
+    path("notifier/pre-test", views.NotifierPreTest.as_view(), name="notifier-pre-test"),
     # Rules
     path("rule", views.RulesList.as_view(), name="rules-list"),
     path("rule/<int:pk>", views.RuleDetail.as_view(), name="rule-detail"),

promgen/views.py

@@ -321,6 +321,28 @@ def get_success_url(self):
         return reverse("profile")
 
 
+class NotifierPreTest(LoginRequiredMixin, View):
+    def post(self, request):
+        data = request.POST.dict()
+        sender = models.Sender(
+            sender=data.get("sender"),
+            value=data.get("value"),
+            alias=data.get("alias"),
+        )
+
+        try:
+            sender.test()
+        except Exception as e:
+            return JsonResponse({
+                "result": "error",
+                "msg": f"Error sending test message with {sender.sender}"
+            })
+        else:
+            return JsonResponse({
+                "result": "success",
+                "msg": f"Sent test message with {sender.sender}",
+            })
+
 class NotifierTest(LoginRequiredMixin, View):
     def post(self, request, pk):
         sender = get_object_or_404(models.Sender, id=pk)