ui: Refactor notification delete buttons to avoid repeating code

Tests:

- Through code changes, ensure that dist upgrade notification, updated to new
release notification, privacy notification, and app installed notification show
up. Ensure that they have correct hx- attributes and URL property for dismiss
button. Clicking dismiss button works as expected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>

plinth/modules/upgrades/templates/upgrades-dist-upgrade-notification.html

@@ -41,11 +41,5 @@
      role="button" class="btn btn-primary">
     {% trans "Go to Distribution Update" %}
   </a>
-  <a href="{% url 'notification_dismiss' id=id %}?next={{ request.path|iriencode }}"
-     hx-get="{% url 'notification_dismiss' id=id %}"
-     hx-target="#notification-{{ id }}"
-     hx-swap="delete swap:300ms"
-     role="button" class="btn btn-default">
-    {% trans "Dismiss" %}
-  </a>
+  {% include 'notifications-dismiss-button.html' with id=id %}
 </p>

plinth/modules/upgrades/templates/upgrades-new-release.html

@@ -17,11 +17,5 @@
 </p>
 
 <p>
-  <a href="{% url 'notification_dismiss' id=id %}?next={{ request.path|iriencode }}"
-     hx-get="{% url 'notification_dismiss' id=id %}"
-     hx-target="#notification-{{ id }}"
-     hx-swap="delete swap:300ms"
-     role="button" class="btn btn-default">
-    {% trans "Dismiss" %}
-  </a>
+  {% include 'notifications-dismiss-button.html' with id=id %}
 </p>

plinth/templates/notifications-dismiss-button.html

@@ -0,0 +1,12 @@
+{% comment %}
+# SPDX-License-Identifier: AGPL-3.0-or-later
+{% endcomment %}
+
+{% load i18n %}
+
+<a href="{% url 'notification_dismiss' id=id %}?next={{ request.path|iriencode }}"
+   hx-get="{% url 'notification_dismiss' id=id %}"
+   hx-target="#notification-{{ id }}" hx-swap="delete swap:300ms" role="button"
+   class="btn btn-default">
+  {% trans "Dismiss" %}
+</a>

plinth/templates/notifications.html

@@ -54,13 +54,7 @@
               <div class="btn-toolbar">
                 {% for action in note.actions %}
                   {% if action.type == "dismiss" %}
-                    <a href="{% url 'notification_dismiss' id=note.id %}?next={{ request.path|iriencode }}"
-                       hx-get="{% url 'notification_dismiss' id=note.id %}"
-                       hx-target="#notification-{{ note.id }}"
-                       hx-swap="delete swap:300ms"
-                       role="button" class="btn btn-default">
-                      {% trans "Dismiss" %}
-                    </a>
+                    {% include 'notifications-dismiss-button.html' with id=note.id %}
                   {% else %}
                     <a href="{% url action.url %}" role="button"
                        class="btn btn-{{ action.class|default:'default' }}">

plinth/templates/operation-notification.html

@@ -18,12 +18,6 @@
 
 {% if data.state == "completed" %}
   <div class="btn-toolbar">
-    <a href="{% url 'notification_dismiss' id=id %}?next={{ request.path|iriencode }}"
-       hx-get="{% url 'notification_dismiss' id=id %}"
-       hx-target="#notification-{{ id }}"
-       hx-swap="delete swap:300ms"
-       role="button" class="btn btn-default">
-      {% trans "Dismiss" %}
-    </a>
+    {% include 'notifications-dismiss-button.html' with id=id %}
   </div>
 {% endif %}