@nyaruka/temba-components 0.156.15 → 0.156.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.15",
+  "version": "0.156.16",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/flow/Editor.ts

@@ -40,7 +40,6 @@ import type { RevisionsWindow } from './RevisionsWindow';
 import {
   ACTION_GROUP_METADATA,
   CONTEXT_MENU_SHORTCUTS,
-  Features,
   FlowType,
   FlowTypes
 } from './types';
@@ -200,10 +199,6 @@ export class Editor extends RapidElement {
   @property({ type: Array })
   public features: string[] = [];
 
-  private get autoTranslateEnabled(): boolean {
-    return this.features?.includes(Features.AUTO_TRANSLATE) ?? false;
-  }
-
   private activityTimer: number | null = null;
   private activityInterval = 100; // Start with 100ms interval for fast initial load
 
@@ -1601,6 +1596,9 @@ export class Editor extends RapidElement {
         }
 
         getStore().getState().setDirtyDate(null);
+
+        // Refresh the revisions list if it's currently open.
+        this.getRevisionsWindow()?.refresh();
       })
       .catch((error) => {
         console.error('Failed to save flow:', error);
@@ -1760,7 +1758,7 @@ export class Editor extends RapidElement {
   }
 
   private handleAutoTranslateClick(): void {
-    if (!this.autoTranslateEnabled || this.viewingRevision) {
+    if (this.viewingRevision) {
       return;
     }
     const at = this.querySelector('temba-auto-translate') as any;
@@ -3694,9 +3692,7 @@ export class Editor extends RapidElement {
     // at 100% — the dialog's "update existing" option lets users re-run
     // translation on already-translated entries.
     const hasPendingTranslations =
-      this.autoTranslateEnabled &&
-      Boolean(activeLanguage) &&
-      progress.total > 0;
+      Boolean(activeLanguage) && progress.total > 0;
 
     return html`
       <temba-editor-toolbar
@@ -3930,14 +3926,12 @@ export class Editor extends RapidElement {
         @temba-revision-reverted=${this.handleRevisionReverted}
         @temba-revisions-closed=${this.handleRevisionsClosed}
       ></temba-revisions-window>
-      ${this.autoTranslateEnabled
-        ? html`<temba-auto-translate
-            .definition=${this.definition}
-            language-code=${this.languageCode}
-            ?disabled=${this.viewingRevision}
-            @temba-auto-translate-changed=${this.handleAutoTranslateChanged}
-          ></temba-auto-translate>`
-        : ''}
+      <temba-auto-translate
+        .definition=${this.definition}
+        language-code=${this.languageCode}
+        ?disabled=${this.viewingRevision}
+        @temba-auto-translate-changed=${this.handleAutoTranslateChanged}
+      ></temba-auto-translate>
       <div id="editor-container">
         ${this.renderToolbarElement()}
         <div id="editor">

package/src/flow/RevisionsWindow.ts

@@ -7,18 +7,28 @@ import { getStore } from '../store/Store';
 import { FlowDefinition } from '../store/flow-definition';
 import { fetchResults } from '../utils';
 import { FLOW_SPEC_VERSION } from '../store/AppState';
+import {
+  labelsFor,
+  RevisionChanges,
+  summarizeChanges
+} from './revision-summary';
+
+const GROUP_WINDOW_MS = 15 * 60 * 1000;
+const MAX_GROUP_LABELS = 3;
 
 export interface Revision {
   id: number;
   user: {
-    id: number;
-    username: string;
-    first_name: string;
-    last_name: string;
+    id?: number;
+    email?: string;
+    username?: string;
+    first_name?: string;
+    last_name?: string;
     name?: string;
   };
   created_on: string;
   comment?: string;
+  changes?: RevisionChanges | null;
 }
 
 export class RevisionsWindow extends RapidElement {
@@ -53,11 +63,18 @@ export class RevisionsWindow extends RapidElement {
     dirtyDate: Date | null;
   } | null = null;
   private browseLanguageCode: string | null = null;
+  private fetchRequestId = 0;
 
   public get isViewingRevision(): boolean {
     return this.viewingRevision !== null;
   }
 
+  public refresh(): void {
+    if (!this.hidden) {
+      this.fetchRevisions();
+    }
+  }
+
   protected updated(changes: PropertyValues): void {
     super.updated(changes);
     if (
@@ -84,8 +101,8 @@ export class RevisionsWindow extends RapidElement {
         name="revisions"
         header="Revisions"
         icon="revisions"
-        .width=${240}
-        .maxHeight=${400}
+        .width=${340}
+        .maxHeight=${500}
         .top=${120}
         color="rgb(142, 94, 167)"
         .saving=${this.saving}
@@ -99,11 +116,15 @@ export class RevisionsWindow extends RapidElement {
           >
             ${this.isLoading && !this.revisions.length
               ? html`<temba-loading></temba-loading>`
-              : this.revisions.map((rev) => {
+              : this.revisions.map((rev, index) => {
+                  const isCurrent = index === 0;
                   const isSelected = this.viewingRevision?.id === rev.id;
+                  const summary = summarizeChanges(rev.changes);
                   return html`
                     <div
-                      class="revision-item ${isSelected ? 'selected' : ''}"
+                      class="revision-item ${isSelected
+                        ? 'selected'
+                        : ''} ${isCurrent ? 'current' : ''}"
                       style="padding:8px; border-radius:4px; cursor:pointer; background:${isSelected
                         ? '#f0f6ff'
                         : '#f9fafb'}; border:1px solid ${isSelected
@@ -111,36 +132,46 @@ export class RevisionsWindow extends RapidElement {
                         : '#e5e7eb'}; transition: all 0.2s ease;"
                       @click=${() => this.handleRevisionClick(rev)}
                     >
+                      ${summary
+                        ? html`<div
+                            class="revision-summary"
+                            style="font-size:13px; color:#111827; line-height:1.3;"
+                          >
+                            ${summary}
+                          </div>`
+                        : ''}
                       <div
-                        style="display:flex; justify-content:space-between; align-items:center;"
+                        class="revision-meta"
+                        style="display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:20px; font-size:11px; color:#6b7280; margin-top:${summary
+                          ? '2px'
+                          : '0'};"
                       >
-                        <div
-                          class="revision-header"
-                          style="margin-bottom: 2px;"
-                        >
-                          <div
-                            style="font-weight:600; font-size:13px; color:#111827;"
-                          >
-                            <temba-date
-                              value=${rev.created_on}
-                              display="duration"
-                            ></temba-date>
-                          </div>
-                          <div style="font-size:11px; color:#6b7280;">
-                            ${rev.user.name || rev.user.username}
-                          </div>
+                        <div style="flex:1; min-width:0;">
+                          <temba-date
+                            value=${rev.created_on}
+                            display="duration"
+                          ></temba-date>
+                          · ${rev.user.name || rev.user.username}
                         </div>
-                        ${isSelected
-                          ? html`<button
-                              class="revert-button"
-                              @click=${(e: Event) => {
-                                e.stopPropagation();
-                                this.handleRevertClick();
-                              }}
+                        ${isCurrent
+                          ? html`<div
+                              class="current-label"
+                              style="font-size:10px; font-weight:600; text-transform:uppercase; color:#6b7280; background:#e5e7eb; padding:2px 6px; border-radius:10px; letter-spacing:0.5px; flex-shrink:0;"
                             >
-                              Revert
-                            </button>`
-                          : html``}
+                              Current
+                            </div>`
+                          : isSelected
+                            ? html`<button
+                                class="revert-button"
+                                style="font-size:10px; font-weight:600; text-transform:uppercase; color:#1e3a8a; background:#a4cafe; padding:2px 6px; border-radius:10px; letter-spacing:0.5px; border:none; cursor:pointer; flex-shrink:0;"
+                                @click=${(e: Event) => {
+                                  e.stopPropagation();
+                                  this.handleRevertClick();
+                                }}
+                              >
+                                Revert
+                              </button>`
+                            : html``}
                       </div>
 
                       ${rev.comment
@@ -162,17 +193,92 @@ export class RevisionsWindow extends RapidElement {
   // --- Private ---
 
   private async fetchRevisions() {
+    const requestId = ++this.fetchRequestId;
     this.isLoading = true;
     try {
       const results = await fetchResults(
         `/flow/revisions/${this.flow}/?version=${FLOW_SPEC_VERSION}`
       );
-      this.revisions = results.slice(1);
+      if (requestId !== this.fetchRequestId) return;
+      this.revisions = this.collapseRevisions(results);
     } catch (e) {
+      if (requestId !== this.fetchRequestId) return;
       console.error('Error fetching revisions', e);
     } finally {
-      this.isLoading = false;
+      if (requestId === this.fetchRequestId) {
+        this.isLoading = false;
+      }
+    }
+  }
+
+  // Lump revisions made in a continuous editing session (within 15 minutes
+  // of each other, by the same author) onto their most recent member,
+  // merging the tag sets so the summary covers everything that happened in
+  // the window. The merged revision is capped at three distinct displayed
+  // labels — once a fourth would be introduced we break out into a new row.
+  private collapseRevisions(revisions: Revision[]): Revision[] {
+    // The API returns newest-first today; sort defensively so the head/window
+    // logic stays correct if that ever changes.
+    const sorted = [...revisions].sort(
+      (a, b) =>
+        new Date(b.created_on).getTime() - new Date(a.created_on).getTime()
+    );
+    const result: Revision[] = [];
+    let group: Revision[] = [];
+    let groupLabels = new Set<string>();
+
+    const flush = () => {
+      if (group.length === 0) return;
+      const head = group[0];
+      const tagSet = new Set<string>();
+      let anyKnown = false;
+      for (const r of group) {
+        if (r.changes) {
+          anyKnown = true;
+          for (const tag of r.changes.tags || []) tagSet.add(tag);
+        }
+      }
+      result.push({
+        ...head,
+        changes: anyKnown ? { tags: Array.from(tagSet) } : null
+      });
+      group = [];
+      groupLabels = new Set();
+    };
+
+    for (const rev of sorted) {
+      if (group.length === 0) {
+        group.push(rev);
+        groupLabels = labelsFor(rev.changes);
+        continue;
+      }
+      const head = group[0];
+      const headTime = new Date(head.created_on).getTime();
+      const revTime = new Date(rev.created_on).getTime();
+      const withinWindow = headTime - revTime < GROUP_WINDOW_MS;
+      // Compare on whichever identifier the server provides — real data
+      // arrives with `email`, while test fixtures use `username`. Falling
+      // back through the chain keeps both shapes working.
+      const headId = head.user?.email ?? head.user?.username;
+      const revId = rev.user?.email ?? rev.user?.username;
+      const sameAuthor = headId === revId;
+      const prospective = new Set([
+        ...groupLabels,
+        ...labelsFor(rev.changes)
+      ]);
+      const fitsLabelCap = prospective.size <= MAX_GROUP_LABELS;
+
+      if (withinWindow && sameAuthor && fitsLabelCap) {
+        group.push(rev);
+        groupLabels = prospective;
+      } else {
+        flush();
+        group.push(rev);
+        groupLabels = labelsFor(rev.changes);
+      }
     }
+    flush();
+    return result;
   }
 
   private async handleRevisionClick(revision: Revision) {

package/src/flow/revision-summary.ts

@@ -0,0 +1,62 @@
+export interface RevisionChanges {
+  tags: string[];
+}
+
+const TAG_LABELS: Record<string, { label: string; order: number }> = {
+  metadata: { label: 'metadata', order: 0 },
+  nodes: { label: 'nodes', order: 1 },
+  routing: { label: 'routing', order: 2 },
+  actions: { label: 'actions', order: 3 },
+  stickies: { label: 'stickies', order: 5 },
+  layout: { label: 'layout', order: 6 }
+};
+
+function tagToLabel(tag: string): { label: string; order: number } | null {
+  if (Object.prototype.hasOwnProperty.call(TAG_LABELS, tag)) {
+    return TAG_LABELS[tag];
+  }
+  if (tag.startsWith('localization:')) {
+    return { label: 'translations', order: 4 };
+  }
+  return null;
+}
+
+export function labelsFor(
+  changes: RevisionChanges | null | undefined
+): Set<string> {
+  const result = new Set<string>();
+  for (const tag of changes?.tags || []) {
+    const entry = tagToLabel(tag);
+    if (entry) result.add(entry.label);
+  }
+  return result;
+}
+
+export function summarizeChanges(
+  changes: RevisionChanges | null | undefined
+): string {
+  if (!changes) return '';
+  const tags = changes.tags || [];
+  if (tags.length === 0) return '';
+
+  const orders = new Map<string, number>();
+  for (const tag of tags) {
+    const entry = tagToLabel(tag);
+    if (entry && !orders.has(entry.label)) {
+      orders.set(entry.label, entry.order);
+    }
+  }
+  if (orders.size === 0) return '';
+
+  const labels = Array.from(orders.entries())
+    .sort((a, b) => a[1] - b[1])
+    .map(([label]) => label);
+
+  return `Changed ${joinNaturally(labels)}`;
+}
+
+function joinNaturally(parts: string[]): string {
+  if (parts.length <= 1) return parts.join('');
+  if (parts.length === 2) return `${parts[0]} and ${parts[1]}`;
+  return `${parts.slice(0, -1).join(', ')}, and ${parts[parts.length - 1]}`;
+}

package/src/flow/types.ts

@@ -50,8 +50,7 @@ export const CONTEXT_MENU_SHORTCUTS: Record<FlowType, ContextMenuShortcut[]> = {
 export const Features = {
   AI: 'ai',
   AIRTIME: 'airtime',
-  LOCATIONS: 'locations',
-  AUTO_TRANSLATE: 'auto_translate'
+  LOCATIONS: 'locations'
 } as const;
 
 export type Feature = (typeof Features)[keyof typeof Features];

package/web-test-runner.config.mjs

@@ -140,13 +140,13 @@ const checkScreenshot = async (filename, excluded, threshold) => {
   });
 };
 
-const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
-  // clear out any past tests
-  const diffs = path.resolve(SCREENSHOTS, DIFF);
-  const tests = path.resolve(SCREENSHOTS, TEST);
+// clear out any past tests once per process — clearing per-page would race
+// with other concurrent pages that have already written test screenshots and
+// are about to read them back, causing intermittent ENOENT failures.
+rimraf.sync(path.resolve(SCREENSHOTS, DIFF));
+rimraf.sync(path.resolve(SCREENSHOTS, TEST));
 
-  rimraf.sync(diffs);
-  rimraf.sync(tests);
+const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
 
   await page.exposeFunction(
     'matchPageSnapshot',
@@ -335,7 +335,7 @@ const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
 
 export default {
   rootDir: './',
-  files: '**/test/**/*.test.ts',
+  files: ['**/test/**/*.test.ts', '!**/test/utils.test.ts'],
   nodeResolve: true,
   concurrency: 4,
   filterBrowserLogs(log) {