@nyaruka/temba-components 0.158.1 → 0.159.0

package/src/list/FlowList.ts

@@ -1,14 +1,16 @@
 import { css, html, TemplateResult } from 'lit';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
+import { Flow, ObjectReference } from '../interfaces';
 
 /**
  * Flow CRUDL list — drop-in replacement for the rapidpro
  * `flows/flow_list.html` table. Each row's leading icon reflects
  * the flow type (messaging / voice / background / surveyor).
- * Columns: name, runs, ongoing, completion bar, status, modified.
+ * Columns: name, status, runs, ongoing, completion bar, activity
+ * sparkline.
  */
-export class FlowList extends ContentList<any> {
+export class FlowList extends ContentList<Flow> {
   static get styles() {
     return css`
       ${ContentList.styles}
@@ -83,43 +85,35 @@ export class FlowList extends ContentList<any> {
     this.emptyMessage = 'No flows';
     this.searchPlaceholder = 'Search flows';
     this.columns = [
-      { key: 'name', label: 'Name', sortable: true, grow: 3 },
       {
-        key: 'status',
-        label: 'Status',
-        width: '110px',
-        grow: 0
+        key: 'name',
+        label: 'Name',
+        sortable: true,
+        width: '280px',
+        pinned: true
       },
+      { key: 'status', label: 'Status', width: '110px' },
       {
         key: 'runs',
         label: 'Runs',
         sortable: true,
-        width: '80px',
-        grow: 0,
+        width: '90px',
         align: 'right'
       },
       {
         key: 'ongoing',
         label: 'Ongoing',
         sortable: true,
-        width: '80px',
-        grow: 0,
+        width: '90px',
         align: 'right'
       },
       {
         key: 'completion',
         label: 'Completion',
-        width: '120px',
-        grow: 0,
+        width: '130px',
         align: 'right'
       },
-      {
-        key: 'activity',
-        label: 'Activity',
-        width: '120px',
-        grow: 0,
-        align: 'right'
-      }
+      { key: 'activity', label: 'Activity', width: '120px', align: 'right' }
     ];
     this.bulkActions = [
       {
@@ -133,7 +127,7 @@ export class FlowList extends ContentList<any> {
     ];
   }
 
-  protected getRowIcon(item: any): string | null {
+  protected getRowIcon(item: Flow): string | null {
     switch (item?.type) {
       case 'voice':
       case 'ivr':
@@ -147,12 +141,12 @@ export class FlowList extends ContentList<any> {
     }
   }
 
-  protected getRowHref(item: any): string | null {
+  protected getRowHref(item: Flow): string | null {
     return item?.uuid ? `/flow/editor/${item.uuid}/` : null;
   }
 
   protected renderCell(
-    item: any,
+    item: Flow,
     column: ContentListColumn
   ): TemplateResult | string {
     switch (column.key) {
@@ -170,7 +164,7 @@ export class FlowList extends ContentList<any> {
           ${labels.length > 0
             ? html`<span class="flow-labels">
                 ${labels.map(
-                  (l: any) =>
+                  (l: ObjectReference) =>
                     html`<temba-label type="label" icon=${Icon.label}
                       >${l.name}</temba-label
                     >`
@@ -196,7 +190,7 @@ export class FlowList extends ContentList<any> {
     }
   }
 
-  private renderCompletion(item: any): TemplateResult {
+  private renderCompletion(item: Flow): TemplateResult {
     const value = typeof item.completion === 'number' ? item.completion : 0;
     const pct = Math.round(value * 100);
     return html`
@@ -242,7 +236,7 @@ export class FlowList extends ContentList<any> {
     `;
   }
 
-  private renderFlowStatus(item: any): TemplateResult {
+  private renderFlowStatus(item: Flow): TemplateResult {
     const status = (item.status || 'active').toString().toLowerCase();
     const kind = status === 'archived' ? 'archived' : 'active';
     const label = status === 'archived' ? 'Archived' : 'Active';

package/src/list/MsgList.ts

@@ -1,48 +1,94 @@
 import { css, html, TemplateResult } from 'lit';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
+import { Msg } from '../interfaces';
 
 /**
  * Message CRUDL list — drop-in replacement for the rapidpro
- * `msgs/msg_list.html` table. Reverse-chronological; rows carry
- * contact name, message text + attachments + labels + active-flow
- * pill, and a duration timestamp.
+ * `msgs/msg_list.html` table. Reverse-chronological; the message
+ * cell carries the body text with its attachment thumbnails right
+ * after it and the flow / label pills pushed to the trailing edge,
+ * with a duration timestamp closing the row.
  */
-export class MsgList extends ContentList<any> {
+export class MsgList extends ContentList<Msg> {
   static get styles() {
     return css`
       ${ContentList.styles}
-      .msg-meta {
+      /* The message cell holds the body text with its attachment
+         thumbnails right after it, and the flow / label pills pushed
+         to the trailing edge. The text sizes to content and
+         ellipsizes when squeezed — resolved per row, so a busy row
+         doesn't widen a column for all of them. */
+      .msg-cell {
         display: flex;
         align-items: center;
-        gap: 6px;
-        flex-wrap: wrap;
-        font-size: 12px;
-        color: var(--text-3);
+        gap: 12px;
       }
       .msg-text {
-        display: block;
-        color: inherit;
-        font-weight: var(--w-regular);
+        flex: 0 1 auto;
+        /* A small floor so the message keeps a few words even on a
+           row whose meta is wide — the message yields most of its
+           width to the attachments and pills before they clip. */
+        min-width: 80px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      .msg-row {
+      /* Attachment thumbnails sit immediately after the text. */
+      .msg-attachments {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      /* Flow + label pills, pushed to the trailing edge of the cell. */
+      .cell-pills {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-left: auto;
+      }
+      /* Attachment thumbnails are sized well below the 44px row so
+         they never grow its height — a small square preview rather
+         than the chat history's full-size thumbnail. --thumb-icon-
+         padding shrinks temba-thumbnail's non-image fallback (the
+         document/video icon box) to match. The max-height clamp is
+         a backstop for any type that still carries its own larger
+         intrinsic size (e.g. a location map). */
+      .msg-thumb {
+        --thumb-size: 24px;
+        --thumb-padding: 2px;
+        --thumb-icon-padding: 4px;
+        max-height: 36px;
+        overflow: hidden;
+      }
+      /* Sent cell — the date with an optional channel-log icon to
+         its right. The cell stays right-aligned (the column's own
+         alignment) and uses a flex row so the icon sits flush
+         against the date with a small gap. */
+      .sent-cell {
         display: flex;
-        flex-direction: column;
-        gap: 2px;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 6px;
       }
-      .attachment-pill {
+      /* Channel-log icon link inside the sent cell. */
+      .msg-log {
+        flex: 0 0 auto;
         display: inline-flex;
         align-items: center;
-        gap: 3px;
-        padding: 0 6px 0 4px;
-        border-radius: 999px;
-        background: var(--sunken);
+        padding: 2px;
+        border-radius: var(--r-sm);
         color: var(--text-3);
-        --icon-color: var(--text-3);
-        font-size: 11px;
+        text-decoration: none;
+      }
+      .msg-log:hover {
+        background: var(--sunken);
+        color: var(--text-1);
+      }
+      .msg-log temba-icon {
+        --icon-color: currentColor;
       }
     `;
   }
@@ -52,15 +98,28 @@ export class MsgList extends ContentList<any> {
     this.valueKey = 'id';
     this.emptyMessage = 'No messages';
     this.searchPlaceholder = 'Search messages';
+    // Messages page 100 at a time, matching rapidpro's msg list.
+    this.pageSize = 100;
+    // Fixed layout so a long message ellipsis-truncates within its
+    // column instead of stretching the table; minTableWidth lets the
+    // list scroll horizontally once the container is too narrow to
+    // keep the columns usable, rather than clipping anything.
+    this.fixedLayout = true;
+    this.minTableWidth = '640px';
     this.columns = [
-      { key: 'contact', label: 'Contact', width: '180px', grow: 0 },
-      { key: 'text', label: 'Message', grow: 2 },
+      {
+        key: 'contact',
+        label: 'Contact',
+        width: '130px',
+        pinned: true
+      },
+      { key: 'text', label: 'Message', grow: true },
       {
         key: 'created_on',
         label: 'Sent',
-        width: '110px',
-        grow: 0,
-        align: 'right'
+        width: '120px',
+        align: 'right',
+        pinned: 'right'
       }
     ];
     this.bulkActions = [
@@ -76,68 +135,107 @@ export class MsgList extends ContentList<any> {
   }
 
   protected renderCell(
-    item: any,
+    item: Msg,
     column: ContentListColumn
   ): TemplateResult | string {
     switch (column.key) {
       case 'contact': {
         const contact = item.contact || {};
-        return html`<span class="msg-text"
-          >${contact.name || contact.urn || ''}</span
-        >`;
+        return contact.name || contact.urn || '';
       }
       case 'text':
-        return this.renderMessageBody(item);
+        return this.renderMessageCell(item);
       case 'created_on':
-        return html`<temba-date
-          value=${item.created_on}
-          display="duration"
-        ></temba-date>`;
+        return this.renderSentCell(item);
       default:
         return super.renderCell(item, column);
     }
   }
 
-  private renderMessageBody(item: any): TemplateResult {
-    const labels = item.labels || [];
-    const attachments = item.attachments || [];
-    const isOptin = item.msg_type === 'optin' || item.type === 'optin';
+  /** The message cell — body text, its attachment thumbnails, then
+   * the trailing flow / label pills. Each piece sizes to content, so
+   * the split is resolved independently for every row. */
+  private renderMessageCell(item: Msg): TemplateResult {
+    return html`
+      <div class="msg-cell">
+        <span class="msg-text">${this.renderMessageText(item)}</span>
+        ${this.renderAttachments(item)}${this.renderPills(item)}
+      </div>
+    `;
+  }
 
+  /** The sent cell — duration timestamp with an optional channel-log
+   * icon to its right. The icon is rendered when the server includes
+   * a logs_url on the row (permission- and retention-gated
+   * server-side). stopPropagation keeps the row's contact navigation
+   * from also firing when the icon is clicked. */
+  private renderSentCell(item: Msg): TemplateResult | string {
+    if (!item.created_on) return '';
     return html`
-      <div class="msg-row">
-        <span class="msg-text">
-          ${item.text || (isOptin ? 'Opt-in request' : '')}
-        </span>
-        ${labels.length || attachments.length || item.flow || isOptin
+      <div class="sent-cell">
+        <temba-date value=${item.created_on} display="duration"></temba-date>
+        ${item.logs_url && this.isSafeHref(item.logs_url)
           ? html`
-              <div class="msg-meta">
-                ${isOptin ? this.renderStatusPill('pending', 'opt-in') : null}
-                ${attachments.map(
-                  () => html`
-                    <span class="attachment-pill">
-                      <temba-icon
-                        name=${Icon.attachment}
-                        size="0.8"
-                      ></temba-icon>
-                      attachment
-                    </span>
-                  `
-                )}
-                ${item.flow
-                  ? html`<temba-label type="flow" icon=${Icon.flow}
-                      >${item.flow.name}</temba-label
-                    >`
-                  : null}
-                ${labels.map(
-                  (l: any) => html`
-                    <temba-label type="label" icon=${Icon.label}
-                      >${l.name}</temba-label
-                    >
-                  `
-                )}
-              </div>
+              <a
+                class="msg-log"
+                href=${item.logs_url}
+                @click=${(e: MouseEvent) => e.stopPropagation()}
+                aria-label="Channel log"
+              >
+                <temba-icon name=${Icon.log} size="0.95"></temba-icon>
+              </a>
             `
+          : ''}
+      </div>
+    `;
+  }
+
+  /** The message body — plain text, or an opt-in pill when an
+   * opt-in request carries no text of its own. */
+  private renderMessageText(item: Msg): TemplateResult | string {
+    const isOptin = item.msg_type === 'optin' || item.type === 'optin';
+    if (!item.text && isOptin) {
+      return this.renderStatusPill('pending', 'opt-in request');
+    }
+    return item.text || '';
+  }
+
+  /** Attachment thumbnails for a row, sitting immediately after the
+   * message text, or '' when the row carries none. */
+  private renderAttachments(item: Msg): TemplateResult | string {
+    const attachments = item.attachments || [];
+    if (!attachments.length) return '';
+    return html`
+      <div class="msg-attachments">
+        ${attachments.map(
+          (a) => html`
+            <temba-thumbnail
+              class="msg-thumb"
+              attachment=${a}
+            ></temba-thumbnail>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  /** Flow + label pills for a row, pushed to the trailing edge of
+   * the message cell, or '' when the row carries none. */
+  private renderPills(item: Msg): TemplateResult | string {
+    const labels = item.labels || [];
+    if (!item.flow && !labels.length) return '';
+    return html`
+      <div class="cell-pills">
+        ${item.flow
+          ? html`<temba-label type="flow" icon=${Icon.flow}
+              >${item.flow.name}</temba-label
+            >`
           : null}
+        ${labels.map(
+          (l) => html`
+            <temba-label type="label" icon=${Icon.label}>${l.name}</temba-label>
+          `
+        )}
       </div>
     `;
   }