@nyaruka/temba-components 0.140.0 → 0.141.1

package/src/flow/Editor.ts

@@ -19,7 +19,14 @@ import {
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType, Workspace } from '../interfaces';
-import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
+import {
+  generateUUID,
+  postJSON,
+  fetchResults,
+  getClasses,
+  WebResponse
+} from '../utils';
+import { TEMBA_COMPONENTS_VERSION } from '../version';
 import {
   formatIssueMessage,
   getNodeBounds,
@@ -72,7 +79,7 @@ export function findNodeForExit(
   return null;
 }
 
-const SAVE_QUIET_TIME = 500;
+const SAVE_QUIET_TIME = 2000;
 
 export interface DraggableItem {
   uuid: string;
@@ -260,6 +267,12 @@ export class Editor extends RapidElement {
   @state()
   private isLoadingRevisions = false;
 
+  @state()
+  private isSaving = false;
+
+  @state()
+  private saveError: string | null = null;
+
   private preRevertState: {
     definition: FlowDefinition;
     dirtyDate: Date | null;
@@ -361,6 +374,13 @@ export class Editor extends RapidElement {
 
   static get styles() {
     return css`
+      #editor-container {
+        position: relative;
+        flex: 1;
+        display: flex;
+        min-height: 0;
+      }
+
       #editor {
         overflow: scroll;
         flex: 1;
@@ -839,6 +859,71 @@ export class Editor extends RapidElement {
         color: tomato;
         flex-shrink: 0;
       }
+
+      .empty-flow {
+        position: sticky;
+        top: 80px;
+        left: 0;
+        right: 0;
+        height: 0;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 50;
+      }
+
+      .empty-flow-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        text-align: center;
+        pointer-events: auto;
+      }
+
+      .empty-flow-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #374151;
+      }
+
+      .empty-flow-description {
+        font-size: 14px;
+        color: #6b7280;
+        max-width: 320px;
+        line-height: 1.5;
+      }
+
+      .empty-flow-button {
+        background: var(--color-primary-dark);
+        border: none;
+        color: #fff;
+        padding: 10px 20px;
+        border-radius: var(--curvature);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
+      .empty-flow-button:hover {
+        opacity: 0.9;
+      }
+
+      .save-indicator {
+        position: absolute;
+        top: 8px;
+        right: 16px;
+        padding: 6px 10px;
+        z-index: 10000;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.15s ease-in-out;
+      }
+
+      .save-indicator.visible {
+        opacity: 1;
+      }
     `;
   }
 
@@ -854,6 +939,7 @@ export class Editor extends RapidElement {
     this.setupGlobalEventListeners();
     if (changes.has('flow')) {
       getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+      this.fetchRevisions();
     }
 
     this.plumber.on('connection:drag', (connection: any) => {
@@ -1018,10 +1104,16 @@ export class Editor extends RapidElement {
 
     if (changes.has('dirtyDate')) {
       if (this.dirtyDate) {
+        this.isSaving = true;
         this.debouncedSave();
       }
     }
 
+    if (changes.has('saveError') && this.saveError) {
+      this.showSaveErrorDialog(this.saveError);
+      this.saveError = null;
+    }
+
     if (changes.has('languageCode')) {
       this.translationCache.clear();
     }
@@ -1065,12 +1157,30 @@ export class Editor extends RapidElement {
     }, SAVE_QUIET_TIME);
   }
 
+  private definitionForSave(definition: FlowDefinition): FlowDefinition {
+    return {
+      ...definition,
+      _ui: {
+        ...definition._ui,
+        editor: TEMBA_COMPONENTS_VERSION
+      }
+    };
+  }
+
   private saveChanges(definitionOverride?: FlowDefinition): Promise<void> {
-    const definition = definitionOverride || this.definition;
-    // post the flow definition to the server
+    const definition = this.definitionForSave(
+      definitionOverride || this.definition
+    );
+    this.isSaving = true;
+
     return getStore()
       .postJSON(`/flow/revisions/${this.flow}/`, definition)
       .then((response) => {
+        if (response.status < 200 || response.status >= 300) {
+          this.saveError = this.extractErrorMessage(response);
+          return;
+        }
+
         // Update flow info and revision with the response data
         if (response.json) {
           const state = getStore().getState();
@@ -1083,17 +1193,58 @@ export class Editor extends RapidElement {
             state.setRevision(response.json.revision.revision);
           }
 
-          // if the revisions window is open, refresh the list
-          if (!this.revisionsWindowHidden) {
-            this.fetchRevisions();
-          }
+          // Refresh revisions list so the tab visibility stays up to date
+          this.fetchRevisions();
         }
+
+        getStore().getState().setDirtyDate(null);
       })
       .catch((error) => {
         console.error('Failed to save flow:', error);
+        if (error instanceof Response) {
+          this.saveError = `Server error (${error.status}). Your changes have not been saved.`;
+        } else {
+          this.saveError =
+            'Unable to reach the server. Please check your connection and try again.';
+        }
+      })
+      .finally(() => {
+        this.isSaving = false;
       });
+  }
 
-    getStore().getState().setDirtyDate(null);
+  private extractErrorMessage(response: WebResponse): string {
+    if (response.json) {
+      if (typeof response.json.detail === 'string') {
+        return response.json.detail;
+      }
+      if (typeof response.json.error === 'string') {
+        return response.json.error;
+      }
+      if (typeof response.json.description === 'string') {
+        return response.json.description;
+      }
+    }
+    return `Save failed with status ${response.status}.`;
+  }
+
+  private showSaveErrorDialog(message: string): void {
+    const dialog = document.createElement('temba-dialog') as Dialog;
+    dialog.header = 'Save Failed';
+    dialog.primaryButtonName = '';
+    dialog.cancelButtonName = 'Dismiss';
+
+    const content = document.createElement('div');
+    content.style.cssText = 'padding: 20px; font-size: 14px; line-height: 1.5;';
+    content.textContent = message;
+    dialog.appendChild(content);
+
+    document.body.appendChild(dialog);
+    dialog.open = true;
+
+    dialog.addEventListener('temba-dialog-hidden', () => {
+      document.body.removeChild(dialog);
+    });
   }
 
   private startActivityFetching(): void {
@@ -1129,6 +1280,11 @@ export class Editor extends RapidElement {
     }
     const state = store.getState();
     state.fetchActivity(activityEndpoint).then(() => {
+      // Guard against responses arriving after the editor is disconnected
+      if (!this.isConnected) {
+        return;
+      }
+
       // Schedule next fetch with exponential backoff (max 5 minutes)
       this.activityInterval = Math.min(60000 * 5, this.activityInterval + 100);
 
@@ -1165,6 +1321,10 @@ export class Editor extends RapidElement {
     if (canvas) {
       canvas.removeEventListener('contextmenu', this.boundCanvasContextMenu);
     }
+
+    // Clear all flow-specific data from the store so stale data
+    // isn't briefly visible when a different flow is opened.
+    zustand.getState().clearFlowData();
   }
 
   private setupGlobalEventListeners(): void {
@@ -2023,6 +2183,28 @@ export class Editor extends RapidElement {
     }
   }
 
+  private handleEmptyFlowClick(event: MouseEvent): void {
+    const editor = this.querySelector('#editor') as HTMLElement;
+    if (!editor) return;
+
+    // Scroll to top-left
+    editor.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+
+    // Place node at top-left of the canvas
+    const nodeLeft = 0;
+    const nodeTop = 0;
+
+    const canvasMenu = this.querySelector('temba-canvas-menu') as CanvasMenu;
+    if (canvasMenu) {
+      const button = event.currentTarget as HTMLElement;
+      const rect = button.getBoundingClientRect();
+      const menuWidth = 265;
+      const menuX = rect.left + rect.width / 2 - menuWidth / 2;
+      const menuY = rect.bottom + 8;
+      canvasMenu.show(menuX, menuY, { x: nodeLeft, y: nodeTop }, false);
+    }
+  }
+
   private handleCanvasMenuSelection(event: CustomEvent): void {
     const selection = event.detail as CanvasMenuSelection;
     const store = getStore();
@@ -3424,7 +3606,7 @@ export class Editor extends RapidElement {
   }
 
   private renderIssuesTab(): TemplateResult | string {
-    if (!this.flowIssues?.length) return '';
+    if (!this.flowIssues?.length || !this.revisionsWindowHidden) return '';
     return html`
       <temba-floating-tab
         id="issues-tab"
@@ -3469,6 +3651,7 @@ export class Editor extends RapidElement {
   }
 
   private renderRevisionsTab(): TemplateResult | string {
+    if (this.revisions.length <= 1) return '';
     return html`
       <temba-floating-tab
         id="revisions-tab"
@@ -3762,6 +3945,8 @@ export class Editor extends RapidElement {
   }
 
   private renderLocalizationTab(): TemplateResult | string {
+    if (!this.revisionsWindowHidden) return '';
+    if (this.definition?.nodes.length === 0) return '';
     const languages = this.getLocalizationLanguages();
     if (!languages.length) {
       return html``;
@@ -3834,88 +4019,114 @@ export class Editor extends RapidElement {
     return html`${style} ${this.renderIssuesWindow()}
       ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
       ${this.renderAutoTranslateDialog()}
-      <div id="editor">
-        <div
-          id="grid"
-          class="${this.viewingRevision ? 'viewing-revision' : ''}"
-          style="min-width:100%;width:${this.canvasSize.width}px; height:${this
-            .canvasSize.height}px"
-        >
+      <div id="editor-container">
+        <div id="editor">
+          ${this.definition &&
+          this.definition.nodes.length === 0 &&
+          !this.isReadOnly()
+            ? html`<div class="empty-flow">
+                <div class="empty-flow-content">
+                  <div class="empty-flow-title">This flow is empty</div>
+                  <div class="empty-flow-description">
+                    Get started by adding your first action or split to define
+                    how this flow will work.
+                  </div>
+                  <button
+                    class="empty-flow-button"
+                    @click=${this.handleEmptyFlowClick}
+                  >
+                    Add first step
+                  </button>
+                </div>
+              </div>`
+            : ''}
           <div
-            id="canvas"
-            class="${getClasses({
-              'viewing-revision': !!this.viewingRevision,
-              'read-only-connections':
-                !!this.viewingRevision || this.isTranslating
-            })}"
+            id="grid"
+            class="${this.viewingRevision ? 'viewing-revision' : ''}"
+            style="min-width:100%;width:${this.canvasSize
+              .width}px; height:${this.canvasSize.height}px"
           >
-            ${this.definition
-              ? repeat(
-                  [...this.definition.nodes].sort((a, b) =>
-                    a.uuid.localeCompare(b.uuid)
-                  ),
-                  (node) => node.uuid,
-                  (node) => {
-                    const position = this.definition._ui?.nodes[node.uuid]
-                      ?.position || {
-                      left: 0,
-                      top: 0
-                    };
-
-                    const dragging =
-                      this.isDragging &&
-                      this.currentDragItem?.uuid === node.uuid;
-
-                    const selected = this.selectedItems.has(node.uuid);
-
-                    // first node is the flow start (nodes are sorted by position)
-                    const isFlowStart =
-                      this.definition.nodes.length > 0 &&
-                      this.definition.nodes[0].uuid === node.uuid;
-
-                    return html`<temba-flow-node
-                      class="draggable ${dragging ? 'dragging' : ''} ${selected
-                        ? 'selected'
-                        : ''} ${isFlowStart ? 'flow-start' : ''}"
-                      @mousedown=${this.handleMouseDown.bind(this)}
-                      uuid=${node.uuid}
-                      data-node-uuid=${node.uuid}
-                      style="left:${position.left}px; top:${position.top}px;transition: all 0.2s ease-in-out;"
-                      .plumber=${this.plumber}
-                      .node=${node}
-                      .ui=${this.definition._ui.nodes[node.uuid]}
-                      @temba-node-deleted=${(event) => {
-                        this.deleteNodes([event.detail.uuid]);
-                      }}
-                    ></temba-flow-node>`;
-                  }
-                )
-              : html`<temba-loading></temba-loading>`}
-            ${repeat(
-              Object.entries(stickies),
-              ([uuid]) => uuid,
-              ([uuid, sticky]) => {
-                const position = sticky.position || { left: 0, top: 0 };
-                const dragging =
-                  this.isDragging && this.currentDragItem?.uuid === uuid;
-                const selected = this.selectedItems.has(uuid);
-                return html`<temba-sticky-note
-                  class="draggable ${dragging ? 'dragging' : ''} ${selected
-                    ? 'selected'
-                    : ''}"
-                  @mousedown=${this.handleMouseDown.bind(this)}
-                  style="left:${position.left}px; top:${position.top}px;"
-                  uuid=${uuid}
-                  .data=${sticky}
-                  .dragging=${dragging}
-                  .selected=${selected}
-                ></temba-sticky-note>`;
-              }
-            )}
-            ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
-            ${this.renderConnectionPlaceholder()}
+            <div
+              id="canvas"
+              class="${getClasses({
+                'viewing-revision': !!this.viewingRevision,
+                'read-only-connections':
+                  !!this.viewingRevision || this.isTranslating
+              })}"
+            >
+              ${this.definition
+                ? repeat(
+                    [...this.definition.nodes].sort((a, b) =>
+                      a.uuid.localeCompare(b.uuid)
+                    ),
+                    (node) => node.uuid,
+                    (node) => {
+                      const position = this.definition._ui?.nodes[node.uuid]
+                        ?.position || {
+                        left: 0,
+                        top: 0
+                      };
+
+                      const dragging =
+                        this.isDragging &&
+                        this.currentDragItem?.uuid === node.uuid;
+
+                      const selected = this.selectedItems.has(node.uuid);
+
+                      // first node is the flow start (nodes are sorted by position)
+                      const isFlowStart =
+                        this.definition.nodes.length > 0 &&
+                        this.definition.nodes[0].uuid === node.uuid;
+
+                      return html`<temba-flow-node
+                        class="draggable ${dragging
+                          ? 'dragging'
+                          : ''} ${selected ? 'selected' : ''} ${isFlowStart
+                          ? 'flow-start'
+                          : ''}"
+                        @mousedown=${this.handleMouseDown.bind(this)}
+                        uuid=${node.uuid}
+                        data-node-uuid=${node.uuid}
+                        style="left:${position.left}px; top:${position.top}px;transition: all 0.2s ease-in-out;"
+                        .plumber=${this.plumber}
+                        .node=${node}
+                        .ui=${this.definition._ui.nodes[node.uuid]}
+                        @temba-node-deleted=${(event) => {
+                          this.deleteNodes([event.detail.uuid]);
+                        }}
+                      ></temba-flow-node>`;
+                    }
+                  )
+                : html`<temba-loading></temba-loading>`}
+              ${repeat(
+                Object.entries(stickies),
+                ([uuid]) => uuid,
+                ([uuid, sticky]) => {
+                  const position = sticky.position || { left: 0, top: 0 };
+                  const dragging =
+                    this.isDragging && this.currentDragItem?.uuid === uuid;
+                  const selected = this.selectedItems.has(uuid);
+                  return html`<temba-sticky-note
+                    class="draggable ${dragging ? 'dragging' : ''} ${selected
+                      ? 'selected'
+                      : ''}"
+                    @mousedown=${this.handleMouseDown.bind(this)}
+                    style="left:${position.left}px; top:${position.top}px;"
+                    uuid=${uuid}
+                    .data=${sticky}
+                    .dragging=${dragging}
+                    .selected=${selected}
+                  ></temba-sticky-note>`;
+                }
+              )}
+              ${this.renderSelectionBox()} ${this.renderCanvasDropPreview()}
+              ${this.renderConnectionPlaceholder()}
+            </div>
           </div>
         </div>
+        <div class="save-indicator ${this.isSaving ? 'visible' : ''}">
+          <temba-loading units="3" size="8"></temba-loading>
+        </div>
       </div>
 
       ${this.editingNode || this.editingAction