@nyaruka/temba-components 0.140.0 → 0.141.1

package/out-tsc/src/flow/Editor.js

@@ -8,6 +8,7 @@ import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
+import { TEMBA_COMPONENTS_VERSION } from '../version';
 import { formatIssueMessage, getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
@@ -22,7 +23,7 @@ export function findNodeForExit(definition, exitUuid) {
     }
     return null;
 }
-const SAVE_QUIET_TIME = 500;
+const SAVE_QUIET_TIME = 2000;
 const DRAG_THRESHOLD = 5;
 const AUTO_TRANSLATE_MODELS_ENDPOINT = '/api/internal/llms.json';
 // Offset for positioning dropped action node relative to mouse cursor
@@ -68,6 +69,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;
@@ -546,6 +554,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;
+      }
     `;
     }
     constructor() {
@@ -588,6 +661,8 @@ export class Editor extends RapidElement {
         this.revisions = [];
         this.viewingRevision = null;
         this.isLoadingRevisions = false;
+        this.isSaving = false;
+        this.saveError = null;
         this.preRevertState = null;
         this.translationCache = new Map();
         // NodeEditor state - handles both node and action editing
@@ -622,6 +697,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) => {
             this.dragFromNodeId = connection.data.nodeId;
@@ -749,9 +825,14 @@ 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();
         }
@@ -791,13 +872,26 @@ export class Editor extends RapidElement {
             }
         }, SAVE_QUIET_TIME);
     }
+    definitionForSave(definition) {
+        return {
+            ...definition,
+            _ui: {
+                ...definition._ui,
+                editor: TEMBA_COMPONENTS_VERSION
+            }
+        };
+    }
     saveChanges(definitionOverride) {
-        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) => {
             var _b;
+            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();
@@ -807,16 +901,53 @@ export class Editor extends RapidElement {
                 if (((_b = response.json.revision) === null || _b === void 0 ? void 0 : _b.revision) !== undefined) {
                     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;
+        });
+    }
+    extractErrorMessage(response) {
+        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}.`;
+    }
+    showSaveErrorDialog(message) {
+        const dialog = document.createElement('temba-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);
         });
-        getStore().getState().setDirtyDate(null);
     }
     startActivityFetching() {
         // Don't start if simulator is active
@@ -848,6 +979,10 @@ 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);
             if (this.activityTimer !== null) {
@@ -879,6 +1014,9 @@ 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();
     }
     setupGlobalEventListeners() {
         document.addEventListener('mousemove', this.boundMouseMove);
@@ -1577,6 +1715,25 @@ export class Editor extends RapidElement {
             });
         }
     }
+    handleEmptyFlowClick(event) {
+        const editor = this.querySelector('#editor');
+        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');
+        if (canvasMenu) {
+            const button = event.currentTarget;
+            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);
+        }
+    }
     handleCanvasMenuSelection(event) {
         const selection = event.detail;
         const store = getStore();
@@ -2647,7 +2804,7 @@ export class Editor extends RapidElement {
     }
     renderIssuesTab() {
         var _b;
-        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.length))
+        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.length) || !this.revisionsWindowHidden)
             return '';
         return html `
       <temba-floating-tab
@@ -2691,6 +2848,8 @@ export class Editor extends RapidElement {
     `;
     }
     renderRevisionsTab() {
+        if (this.revisions.length <= 1)
+            return '';
         return html `
       <temba-floating-tab
         id="revisions-tab"
@@ -2958,6 +3117,11 @@ export class Editor extends RapidElement {
     `;
     }
     renderLocalizationTab() {
+        var _b;
+        if (!this.revisionsWindowHidden)
+            return '';
+        if (((_b = this.definition) === null || _b === void 0 ? void 0 : _b.nodes.length) === 0)
+            return '';
         const languages = this.getLocalizationLanguages();
         if (!languages.length) {
             return html ``;
@@ -3018,21 +3182,41 @@ 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({
+            id="grid"
+            class="${this.viewingRevision ? 'viewing-revision' : ''}"
+            style="min-width:100%;width:${this.canvasSize
+            .width}px; height:${this.canvasSize.height}px"
+          >
+            <div
+              id="canvas"
+              class="${getClasses({
             'viewing-revision': !!this.viewingRevision,
             'read-only-connections': !!this.viewingRevision || this.isTranslating
         })}"
-          >
-            ${this.definition
+            >
+              ${this.definition
             ? repeat([...this.definition.nodes].sort((a, b) => a.uuid.localeCompare(b.uuid)), (node) => node.uuid, (node) => {
                 var _b, _c, _d;
                 const position = ((_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position) || {
@@ -3046,43 +3230,49 @@ export class Editor extends RapidElement {
                 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) => {
+                        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>`;
+                      ></temba-flow-node>`;
             })
             : html `<temba-loading></temba-loading>`}
-            ${repeat(Object.entries(stickies), ([uuid]) => uuid, ([uuid, sticky]) => {
+              ${repeat(Object.entries(stickies), ([uuid]) => uuid, ([uuid, sticky]) => {
             var _b;
             const position = sticky.position || { left: 0, top: 0 };
             const dragging = this.isDragging && ((_b = this.currentDragItem) === null || _b === void 0 ? void 0 : _b.uuid) === uuid;
             const selected = this.selectedItems.has(uuid);
             return html `<temba-sticky-note
-                  class="draggable ${dragging ? 'dragging' : ''} ${selected
+                    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>`;
+                    @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()}
+              ${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
@@ -3213,6 +3403,12 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "isLoadingRevisions", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isSaving", void 0);
+__decorate([
+    state()
+], Editor.prototype, "saveError", void 0);
 __decorate([
     state()
 ], Editor.prototype, "editingNode", void 0);