@nyaruka/temba-components 0.164.0 → 0.166.0

package/src/list/NotificationList.ts

@@ -1,31 +1,28 @@
-import { css, html, TemplateResult } from 'lit';
+import { css, html, PropertyValues, TemplateResult } from 'lit';
 import { TembaList } from './TembaList';
 import { Options } from '../display/Options';
 import { Icon } from '../Icons';
-
-interface Notification {
-  created_on: string;
-  type: string;
-  url: string;
-  is_seen: boolean;
-  export?: {
-    type: string;
-    num_records: number;
-  };
-  import?: {
-    type: string;
-    num_records: number;
-  };
-  incident?: {
-    type: string;
-    started_on: string;
-    ended_on?: string;
-  };
-}
+import { CustomEventType, Notification } from '../interfaces';
+import {
+  RealtimeSubscription,
+  subscribeToNotifications
+} from '../live/Realtime';
+import { deleteRequest } from '../utils';
 
 export class NotificationList extends TembaList {
   reverseRefresh = false;
   internalFocusDisabled = true;
+
+  // fed by socket publications instead of interval polling
+  protected pollingEnabled = false;
+
+  private realtimeSubscription: RealtimeSubscription = null;
+
+  // publications that arrived before the initial fetch completed - a direct
+  // prepend would be clobbered when the fetch lands, so they wait for it
+  private pendingPubs: Notification[] = [];
+  private fetchedOnce = false;
+  private subscribedOnce = false;
   static get styles() {
     return css`
       :host {
@@ -134,6 +131,119 @@ export class NotificationList extends TembaList {
     };
   }
 
+  public connectedCallback() {
+    super.connectedCallback();
+    this.realtimeSubscription = subscribeToNotifications(
+      (notification) => this.handleNotification(notification),
+      () => this.handleSubscribed()
+    );
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.realtimeSubscription) {
+      this.realtimeSubscription.unsubscribe();
+      this.realtimeSubscription = null;
+    }
+  }
+
+  public willUpdate(changed: PropertyValues): void {
+    super.willUpdate(changed);
+    if (changed.has('loading') && !this.loading) {
+      this.fetchedOnce = true;
+      const pending = this.pendingPubs;
+      this.pendingPubs = [];
+      pending.forEach((notification) => this.prependNotification(notification));
+    }
+  }
+
+  private handleNotification(notification: Notification) {
+    // ignore redeliveries of notifications we already have so e.g. the
+    // menu's unseen badge only lights for genuinely new ones
+    if (
+      this.items.some((item) => item.url === notification.url) ||
+      this.pendingPubs.some((item) => item.url === notification.url)
+    ) {
+      return;
+    }
+
+    // announce arrival, even mid-fetch - e.g. the menu's unseen badge
+    this.fireCustomEvent(CustomEventType.NotificationReceived, {
+      notification
+    });
+
+    if (this.loading || !this.fetchedOnce) {
+      this.pendingPubs.push(notification);
+    } else {
+      this.prependNotification(notification);
+    }
+  }
+
+  private prependNotification(notification: Notification) {
+    // dedupe by url (our valueKey) and prepend
+    this.items = [
+      notification,
+      ...this.items.filter((item) => item.url !== notification.url)
+    ];
+    this.mostRecentItem = notification;
+  }
+
+  /**
+   * Fires on every (re)subscribe including after reconnects. The initial
+   * endpoint fetch covers the first one regardless of which completes first,
+   * so only refetch page one on resubscribes, to catch anything missed
+   * while offline.
+   */
+  private handleSubscribed() {
+    if (this.subscribedOnce && this.fetchedOnce) {
+      this.refresh();
+    }
+    this.subscribedOnce = true;
+  }
+
+  // urls marked seen on the server but still shown bold for this viewing
+  private seenUrls = new Set<string>();
+
+  /**
+   * Marks everything currently unseen as seen on the server, without any
+   * refetching - the socket keeps our items current and seen state is fully
+   * known here. Items stay bold for the current viewing and unbold on the
+   * next call (e.g. the next popup open). Resolves false if the server
+   * didn't record it, in which case nothing advances and the next call
+   * retries.
+   */
+  public markSeen(): Promise<boolean> {
+    // unbold whatever was marked seen last time
+    if (this.seenUrls.size > 0) {
+      this.items = this.items.map((item) =>
+        this.seenUrls.has(item.url) ? { ...item, is_seen: true } : item
+      );
+    }
+
+    const unseen = this.items.filter((item) => !item.is_seen);
+    if (unseen.length === 0 || !this.endpoint) {
+      return Promise.resolve(true);
+    }
+
+    // only advance our seen state if the server actually recorded it,
+    // otherwise we'd unbold items the server still considers unseen
+    return deleteRequest(this.endpoint)
+      .then((response) => {
+        if (!response.ok) {
+          console.warn(
+            `failed marking notifications seen (${response.status})`
+          );
+          return false;
+        }
+        this.seenUrls = new Set(unseen.map((item) => item.url));
+        return true;
+      })
+      .catch((error) => {
+        console.warn('failed marking notifications seen', error);
+        return false;
+      });
+  }
+
   public renderHeader(): TemplateResult {
     return html`<div class="header">
       <temba-icon name="notification"></temba-icon>

package/src/list/SortableList.ts

@@ -92,6 +92,7 @@ export class SortableList extends RapidElement {
 
   draggingIdx = -1;
   draggingEle = null;
+  ghostOriginalDisplay = '';
   dropPlaceholder: HTMLDivElement = null;
   pendingDropIndex = -1;
   pendingTargetElement: HTMLElement = null;
@@ -729,8 +730,11 @@ export class SortableList extends RapidElement {
         this.isExternalDrag = true;
         this.hideDropPlaceholder();
 
-        // hide the ghost element when dragging externally
+        // hide the ghost element when dragging externally, remembering its
+        // display (inlined from the original's computed style) so re-entry
+        // can restore it - forcing 'block' would break flex-laid-out ghosts
         if (this.ghostElement) {
+          this.ghostOriginalDisplay = this.ghostElement.style.display;
           this.ghostElement.style.display = 'none';
         }
 
@@ -745,7 +749,8 @@ export class SortableList extends RapidElement {
 
         // show the ghost element again when dragging internally
         if (this.ghostElement) {
-          this.ghostElement.style.display = 'block';
+          this.ghostElement.style.display =
+            this.ghostOriginalDisplay || 'block';
         }
 
         this.fireCustomEvent(CustomEventType.DragInternal, {

package/src/list/TembaList.ts

@@ -68,6 +68,9 @@ export class TembaList extends RapidElement {
 
   reverseRefresh = true;
 
+  // subclasses that get realtime updates can opt out of interval polling
+  protected pollingEnabled = true;
+
   // our next page from our endpoint
   nextPage: string = null;
 
@@ -108,14 +111,17 @@ export class TembaList extends RapidElement {
 
   public connectedCallback() {
     super.connectedCallback();
-    this.refreshInterval = setInterval(() => {
-      if (!this.paused) {
-        this.refreshKey = 'default_' + new Date().getTime();
-      }
-    }, DEFAULT_REFRESH);
+    if (this.pollingEnabled) {
+      this.refreshInterval = setInterval(() => {
+        if (!this.paused) {
+          this.refreshKey = 'default_' + new Date().getTime();
+        }
+      }, DEFAULT_REFRESH);
+    }
   }
 
   public disconnectedCallback() {
+    super.disconnectedCallback();
     clearInterval(this.refreshInterval);
   }
 
@@ -220,6 +226,14 @@ export class TembaList extends RapidElement {
     return this.selected;
   }
 
+  /** Deselects without firing a change — e.g. mobile going back to the
+   *  list, so the same row can be selected again. */
+  public clearSelection() {
+    this.cursorIndex = -1;
+    this.selected = null;
+    this.value = null;
+  }
+
   public refresh(): void {
     this.refreshKey = 'requested_' + new Date().getTime();
   }

package/src/list/TembaMenu.ts

@@ -33,7 +33,6 @@ export interface MenuItem {
   avatar?: string;
   trigger?: boolean;
   event?: string;
-  mobile?: boolean;
   initial?: string;
 }
 
@@ -401,29 +400,13 @@ export class TembaMenu extends ResizeElement {
         flex-direction: row;
       }
 
-      .root.fully-collapsed.mobile .level.level-0 > .item {
+      /* when collapsed on mobile, the only thing in the header is the
+         hamburger — any new direct child of level-0 must opt in with
+         the .top class to stay visible here */
+      .root.fully-collapsed.mobile .level.level-0 > *:not(.top) {
         display: none;
       }
 
-      .root.fully-collapsed.mobile .level.level-0 > .empty {
-        display: block;
-        width: 100%;
-        min-width: inherit;
-        max-width: inherit;
-      }
-
-      .root .level.level-0 > .show-mobile {
-        display: none;
-      }
-
-      .root.mobile .level.level-0 > .show-mobile {
-        display: flex;
-      }
-
-      .root.fully-collapsed.mobile .level.level-0 > .show-mobile {
-        display: contents !important;
-      }
-
       .root.fully-collapsed.mobile .level.level-0 .expand-icon {
         max-height: 100%;
         padding: 1em;
@@ -455,27 +438,12 @@ export class TembaMenu extends ResizeElement {
         min-width: inherit;
       }
 
-      .mobile.fully-collapsed .item {
-      }
-
       .mobile .expand-icon {
         transition: none;
         transform: rotate(-90deg);
         align-self: center;
       }
 
-      .mobile.fully-collapsed .level-0 .empty {
-        flex-grow: 1;
-      }
-
-      .mobile.fully-collapsed .top-spacer {
-        flex-grow: 0;
-      }
-
-      .mobile.fully-collapsed #dd-workspace {
-        display: none;
-      }
-
       .mobile.fully-collapsed .expand-icon {
         transform: none;
       }
@@ -819,17 +787,40 @@ export class TembaMenu extends ResizeElement {
     }
 
     this.loadItems(item);
-
-    // refresh any embedded lists
-    this.shadowRoot
-      .querySelectorAll('temba-notification-list')
-      .forEach((ele: NotificationList) => {
-        ele.refresh();
-      });
   }
 
   public refresh = debounce(this.doRefresh, 200);
 
+  /**
+   * Opening a popup with notifications in it marks them all seen - the badge
+   * clears now, the items unbold next open. No fetching; the socket keeps
+   * the list itself current.
+   */
+  private handlePopupOpened(event: CustomEvent, menuItem: MenuItem) {
+    const dropdown = event.currentTarget as HTMLElement;
+    const lists = dropdown.querySelectorAll('temba-notification-list');
+    if (lists.length === 0) {
+      return;
+    }
+
+    // clear the badge optimistically, restoring it if marking seen fails so
+    // the unseen indicator isn't silently lost
+    const bubble = menuItem.bubble;
+    if (bubble) {
+      menuItem.bubble = null;
+      this.requestUpdate('root');
+    }
+
+    lists.forEach((list: NotificationList) => {
+      list.markSeen().then((marked) => {
+        if (!marked && bubble && !menuItem.bubble) {
+          menuItem.bubble = bubble;
+          this.requestUpdate('root');
+        }
+      });
+    });
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private loadItems(item: MenuItem, event: MouseEvent = null) {
     if (item && item.endpoint) {
@@ -1143,6 +1134,13 @@ export class TembaMenu extends ResizeElement {
     if (menuItem.type === 'temba-notification-list') {
       return html`<temba-notification-list
         endpoint=${menuItem.href}
+        @temba-notification=${() => {
+          // light the unseen badge on our popup item as they arrive
+          if (parent && parent.bubble !== 'tomato') {
+            parent.bubble = 'tomato';
+            this.requestUpdate('root');
+          }
+        }}
       ></temba-notification-list>`;
     }
 
@@ -1203,8 +1201,7 @@ export class TembaMenu extends ResizeElement {
       expanding: this.expanding && this.expanding === menuItem.id,
       expanded: this.isExpanded(menuItem),
       iconless: !icon && !collapsedIcon && !menuItem.avatar,
-      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,
-      'show-mobile': menuItem.mobile
+      pressed: this.pressedItem && this.pressedItem.id == menuItem.id
     });
 
     if (menuItem.avatar) {
@@ -1287,7 +1284,11 @@ export class TembaMenu extends ResizeElement {
 
     if (menuItem.popup) {
       return html`
-        <temba-dropdown id="dd-${menuItem.id}">
+        <temba-dropdown
+          id="dd-${menuItem.id}"
+          @temba-opened=${(event: CustomEvent) =>
+            this.handlePopupOpened(event, menuItem)}
+        >
           <div slot="toggle">${item}</div>
 
           <div slot="dropdown">

package/src/live/CampaignEvents.ts

@@ -94,9 +94,6 @@ export class CampaignEvents extends EndpointMonitorElement {
   @property({ type: String })
   lang_scheduled_contacts = 'Contacts scheduled for this event';
 
-  @property({ type: String })
-  lang_okay = 'Okay';
-
   @property({ type: String })
   lang_send_message = 'Send Message';
 
@@ -494,14 +491,28 @@ export class CampaignEvents extends EndpointMonitorElement {
         line-height: 1.5;
       }
 
-      /* our own footer so the Okay button follows the same horizontal
-         padding as the header - its right edge lines up with Delete. A
-         full-bleed rule mirrors the header's. */
-      .detail-footer {
-        display: flex;
-        justify-content: flex-end;
-        padding: 1em;
-        border-top: 1px solid var(--border, #e4e7ec);
+      /* the close (✕) in the header's upper right - the square
+         hover-wash button treatment (the pager buttons'), sitting
+         just outboard of the action buttons */
+      .detail-close {
+        flex-shrink: 0;
+        margin-left: -4px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: var(--r-sm);
+        color: var(--text-3, #7b8593);
+        cursor: pointer;
+        user-select: none;
+      }
+      .detail-close:hover {
+        background: var(--sunken);
+        color: var(--text-1);
+      }
+      .detail-close temba-icon {
+        --icon-color: currentColor;
       }
 
       .detail-section-title {
@@ -1017,6 +1028,17 @@ export class CampaignEvents extends EndpointMonitorElement {
                           : null}
                       </div>`
                     : null}
+                  <div
+                    class="detail-close"
+                    role="button"
+                    tabindex="0"
+                    aria-label="Close"
+                    @click=${this.handleDetailClosed}
+                    @keydown=${(e: KeyboardEvent) =>
+                      this.handleActivationKey(e, this.handleDetailClosed)}
+                  >
+                    <temba-icon name=${Icon.close} size="1.4"></temba-icon>
+                  </div>
                 </div>
 
                 <div class="detail-body">
@@ -1072,14 +1094,6 @@ export class CampaignEvents extends EndpointMonitorElement {
 
                   ${this.renderFires()}
                 </div>
-
-                <div class="detail-footer">
-                  <temba-button
-                    primary
-                    name=${this.lang_okay}
-                    @click=${this.handleDetailClosed}
-                  ></temba-button>
-                </div>
               </div>
             `
           : null}