More experimenting with API notifications in other spots in the UI

readthedocsext/theme/templates/base.html

@@ -49,9 +49,11 @@
 
     {% block content-wrapper %}
       <div class="ui very padded container">
-        {% block messages %}
-          {% include "includes/utils/messages.html" %}
-        {% endblock messages %}
+        {% block notifications %}
+          {% block messages %}
+            {% include "includes/utils/messages.html" %}
+          {% endblock messages %}
+        {% endblock notifications %}
 
         {# TODO move admin-bar usage to content-header #}
         {% block admin-bar %}{% endblock %}

readthedocsext/theme/templates/builds/build_detail.html

@@ -202,9 +202,17 @@ <h3>{% trans "Build Errors" %}</h3>
 
     {% else %}
 
+      {% block build_detail_notifications %}
+        <div class="ui inverted basic fitted segment">
+          {# Build notifications only #}
+          <rtd-notification-list
+            url="{% url "projects-builds-notifications-list" project.slug build.pk %}"
+            csrf-token="{{ csrf_token }}">
+          </rtd-notification-list>
+        </div>
+      {% endblock build_detail_notifications %}
+
       {% comment %}
-        Error list
-      {% endcomment %}
       {% if build.notifications.exists %}
         {% for notification in build.notifications.all %}
           {% if notification.get_message.type == "error" %}
@@ -221,6 +229,7 @@ <h3>{% trans "Build Errors" %}</h3>
           <span>{% trans "For more information on this error, see our documentation." %}</span>
         </div>
       {% endif %}
+      {% endcomment %}
 
       <div class="ui inverted bottom attached segment transition slide">
 

readthedocsext/theme/templates/includes/utils/messages.html

@@ -7,11 +7,6 @@
   page content pane.
 {% endcomment %}
 
-<rtd-notification-list
-  url="{% url "users-notifications-list" request.user.username %}"
-  csrf-token="{{ csrf_token }}">
-</rtd-notification-list>
-
 {% if messages %}
   {% for message in messages %}
     {% comment %}

readthedocsext/theme/templates/profiles/base_edit.html

@@ -3,6 +3,16 @@
 {% load i18n %}
 {% load core_tags %}
 
+{% block notifications %}
+  {# User notifications only #}
+  <rtd-notification-list
+    url="{% url "users-notifications-list" request.user.username %}"
+    csrf-token="{{ csrf_token }}">
+  </rtd-notification-list>
+
+  {{ block.super }}
+{% endblock notifications %}
+
 {% block content %}
   <div class="ui stackable grid">
     <div class="five wide computer five wide tablet sixteen wide mobile column">

readthedocsext/theme/templates/projects/base.html

@@ -3,3 +3,16 @@
 {% block header %}
   {% include "includes/header.html" with active_item="projects" %}
 {% endblock %}
+
+{% block notifications %}
+  {# Project specific notifications only #}
+  {% if project %}
+    <rtd-notification-list
+      url="{% url "projects-notifications-list" project.slug %}"
+      csrf-token="{{ csrf_token }}">
+    </rtd-notification-list>
+  {% endif %}
+
+  {{ block.super }}
+{% endblock notifications %}
+

readthedocsext/theme/templates/projects/base_dashboard.html

@@ -6,6 +6,15 @@
 
 {% block title %}{% trans "Projects" %}{% endblock %}
 
+{% block notifications %}
+  <rtd-notification-list
+    url="{% url "users-notifications-list" request.user.username %}"
+    csrf-token="{{ csrf_token }}">
+  </rtd-notification-list>
+
+  {{ block.super }}
+{% endblock notifications %}
+
 {% block content %}
   {% url "projects_import" as projects_import_url %}
   {% url "socialaccount_connections" as social_accounts %}

readthedocsext/theme/templates/projects/partials/header.html

@@ -13,14 +13,6 @@
 {% endcomment %}
 
 {% block project_header %}
-  {# Render all the notifications attached to the project.#}
-  {% for notification in project.notifications.all %}
-    <div class="ui message">
-      <i class="{{ notification.get_message.get_display_icon_classes }} icon"></i>
-      <span>{{ notification.get_message.get_rendered_body|safe }}</span>
-    </div>
-  {% endfor %}
-
   <div class="ui top attached segment" data-bind="using: CollapsingHeaderView(true)">
 
     {% block project_header_metadata %}

src/js/modules/notifications.js

@@ -1,8 +1,10 @@
+import jquery from "jquery";
 import { LitElement, css, html, nothing } from "lit";
 import {repeat} from 'lit/directives/repeat.js';
 import {when} from 'lit/directives/when.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+import {ref, createRef} from 'lit/directives/ref.js';
 
 export class NotificationList extends LitElement {
   static properties = {
@@ -53,38 +55,51 @@ export class NotificationList extends LitElement {
   }
 
   renderNotification(notification) {
+    if (notification.dismissed) {
+      return nothing;
+    }
+
+    // Direct reference to 
+    const refClose = createRef();
+
     return html`
-      <div class="ui ${notification.message.type} message">
+      <div class="ui small ${notification.message.type} message" ${ref(refClose)}>
         ${when(notification.dismissable, () => html`
-          <i class="fas fa-xmark close inline icon" @click=${{handleEvent: () => this.dismissNotification(notification), once: true}}></i>
+          <i class="fas fa-xmark close inline icon" @click=${{handleEvent: () => this.dismissNotification(notification, refClose.value), once: true}}></i>
         `)}
-        <div class="header">
+        <h5 class="header">
           <i class="fad ${notification.message.icon_classes} icon"></i>
           ${unsafeHTML(notification.message.header)}
-        </div>
+        </h5>
         ${unsafeHTML(notification.message.body)}
       </div>
     `
   }
 
-  dismissNotification(notification) {
+  dismissNotification(notification, element) {
+    if (notification.dismissable === false) {
+      return;
+    }
+
     console.debug("Dismissing notification:", notification.id);
     const options = {
       method: "PATCH",
       headers: {
         "Content-Type": "application/json",
         "X-CSRFToken": this.csrfToken,
       },
-      body: {
+      body: JSON.stringify({
         state: "dismissed",
-      },
+      }),
     };
     fetch(notification._links._self, options).then((response) => {
-      console.log(response);
-      // TODO error catch response
-      response.json().then((data) => {
-        console.log(data);
-      });
+      if (response.ok) {
+        // Use FUI transition module to fade out and remove the notification
+        jquery(element).transition("fade");
+      }
+      else {
+        console.debug("Error dismissing notification", response);
+      }
     });
   }
 }