@nyaruka/temba-components 0.139.0 → 0.141.0

package/src/flow/Editor.ts

@@ -11,6 +11,7 @@ import {
 import { getStore } from '../store/Store';
 import {
   AppState,
+  FlowIssue,
   fromStore,
   zustand,
   FLOW_SPEC_VERSION
@@ -18,7 +19,20 @@ 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 {
+  formatIssueMessage,
+  getNodeBounds,
+  calculateReflowPositions,
+  NodeBounds,
+  snapToGrid
+} from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 
 interface Revision {
@@ -49,12 +63,6 @@ import { Dialog } from '../layout/Dialog';
 
 import { CanvasMenu, CanvasMenuSelection } from './CanvasMenu';
 import { NodeTypeSelector, NodeTypeSelection } from './NodeTypeSelector';
-import {
-  getNodeBounds,
-  calculateReflowPositions,
-  NodeBounds,
-  snapToGrid
-} from './utils';
 import { FloatingWindow } from '../layout/FloatingWindow';
 
 export function findNodeForExit(
@@ -70,7 +78,7 @@ export function findNodeForExit(
   return null;
 }
 
-const SAVE_QUIET_TIME = 500;
+const SAVE_QUIET_TIME = 2000;
 
 export interface DraggableItem {
   uuid: string;
@@ -173,6 +181,9 @@ export class Editor extends RapidElement {
   @fromStore(zustand, (state: AppState) => state.getCurrentActivity())
   private activityData!: any;
 
+  @fromStore(zustand, (state: AppState) => state.flowInfo?.issues || [])
+  private flowIssues!: FlowIssue[];
+
   // Drag state
   @state()
   private isDragging = false;
@@ -217,6 +228,9 @@ export class Editor extends RapidElement {
   private connectionSourceX: number | null = null;
   private connectionSourceY: number | null = null;
 
+  @state()
+  private issuesWindowHidden = true;
+
   @state()
   private localizationWindowHidden = true;
 
@@ -252,6 +266,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;
@@ -269,6 +289,8 @@ export class Editor extends RapidElement {
   @state()
   private editingAction: Action | null = null;
 
+  private dialogOrigin: { x: number; y: number } | null = null;
+
   @state()
   private isCreatingNewNode = false;
 
@@ -351,12 +373,23 @@ 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;
         -webkit-font-smoothing: antialiased;
       }
 
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       #grid {
         position: relative;
         background-color: #f9f9f9;
@@ -490,7 +523,7 @@ export class Editor extends RapidElement {
         font-weight: 600;
         line-height: 0.9;
         cursor: pointer;
-        z-index: 500;
+        z-index: 10;
         pointer-events: auto;
         white-space: nowrap;
         user-select: none;
@@ -805,6 +838,91 @@ export class Editor extends RapidElement {
         color: #9ca3af;
         white-space: nowrap;
       }
+
+      .issue-list-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        color: #333;
+      }
+
+      .issue-list-item:hover {
+        background: #fff5f5;
+      }
+
+      .issue-list-item temba-icon {
+        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;
+      }
     `;
   }
 
@@ -820,6 +938,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) => {
@@ -984,10 +1103,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();
     }
@@ -1033,10 +1158,16 @@ export class Editor extends RapidElement {
 
   private saveChanges(definitionOverride?: FlowDefinition): Promise<void> {
     const definition = definitionOverride || this.definition;
-    // post the flow definition to the server
+    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();
@@ -1049,17 +1180,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 {
@@ -1095,6 +1267,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);
 
@@ -1131,6 +1308,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 {
@@ -1219,6 +1400,7 @@ export class Editor extends RapidElement {
     if (event.button !== 0) return;
 
     if (this.isReadOnly()) return;
+    this.blurActiveContentEditable();
 
     const element = event.currentTarget as HTMLElement;
     // Only start dragging if clicking on the element itself, not on exits or other interactive elements
@@ -1288,8 +1470,22 @@ export class Editor extends RapidElement {
     this.handleCanvasMouseDown(event);
   }
 
+  private blurActiveContentEditable(): void {
+    let active: Element | null = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+      active = active.shadowRoot.activeElement;
+    }
+    if (
+      active instanceof HTMLElement &&
+      active.getAttribute('contenteditable') === 'true'
+    ) {
+      active.blur();
+    }
+  }
+
   private handleCanvasMouseDown(event: MouseEvent): void {
     if (this.isReadOnly()) return;
+    this.blurActiveContentEditable();
 
     const target = event.target as HTMLElement;
     if (target.id === 'canvas' || target.id === 'grid') {
@@ -1974,6 +2170,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();
@@ -2160,6 +2378,10 @@ export class Editor extends RapidElement {
   private handleActionEditRequested(event: CustomEvent): void {
     // For action editing, we set the action and find the corresponding node
     this.editingAction = event.detail.action;
+    this.dialogOrigin =
+      event.detail.originX != null
+        ? { x: event.detail.originX, y: event.detail.originY }
+        : null;
 
     // Find the node that contains this action
     const nodeUuid = event.detail.nodeUuid;
@@ -2205,6 +2427,10 @@ export class Editor extends RapidElement {
   private handleNodeEditRequested(event: CustomEvent): void {
     this.editingNode = event.detail.node;
     this.editingNodeUI = event.detail.nodeUI;
+    this.dialogOrigin =
+      event.detail.originX != null
+        ? { x: event.detail.originX, y: event.detail.originY }
+        : null;
   }
 
   private handleNodeDeleted(event: CustomEvent): void {
@@ -2294,6 +2520,7 @@ export class Editor extends RapidElement {
     this.editingNode = null;
     this.editingNodeUI = null;
     this.editingAction = null;
+    this.dialogOrigin = null;
   }
 
   private handleActionEditCanceled(): void {
@@ -2948,6 +3175,7 @@ export class Editor extends RapidElement {
 
     this.localizationWindowHidden = false;
     this.revisionsWindowHidden = true;
+    this.issuesWindowHidden = true;
 
     const alreadySelected = languages.some(
       (lang) => lang.code === this.languageCode
@@ -3210,11 +3438,47 @@ export class Editor extends RapidElement {
     this.autoTranslating = false;
   }
 
+  private handleIssuesTabClick(): void {
+    this.issuesWindowHidden = false;
+    this.revisionsWindowHidden = true;
+    this.localizationWindowHidden = true;
+  }
+
+  private handleIssuesWindowClosed(): void {
+    this.issuesWindowHidden = true;
+  }
+
+  private handleIssueItemClick(issue: FlowIssue): void {
+    const issuesWindow = document.getElementById(
+      'issues-window'
+    ) as FloatingWindow;
+    issuesWindow?.handleClose();
+    this.issuesWindowHidden = true;
+
+    this.focusNode(issue.node_uuid);
+
+    const node = this.definition.nodes.find((n) => n.uuid === issue.node_uuid);
+    if (!node) return;
+
+    if (issue.action_uuid) {
+      const action = node.actions?.find((a) => a.uuid === issue.action_uuid);
+      if (action) {
+        this.editingAction = action;
+        this.editingNode = node;
+        this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+      }
+    } else {
+      this.editingNode = node;
+      this.editingNodeUI = this.definition._ui.nodes[issue.node_uuid];
+    }
+  }
+
   private handleRevisionsTabClick(): void {
     if (this.revisionsWindowHidden) {
       this.fetchRevisions();
       this.revisionsWindowHidden = false;
-      this.localizationWindowHidden = true; // Close other window
+      this.issuesWindowHidden = true;
+      this.localizationWindowHidden = true;
     }
   }
 
@@ -3328,14 +3592,60 @@ export class Editor extends RapidElement {
     getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
   }
 
+  private renderIssuesTab(): TemplateResult | string {
+    if (!this.flowIssues?.length || !this.revisionsWindowHidden) return '';
+    return html`
+      <temba-floating-tab
+        id="issues-tab"
+        icon="alert_warning"
+        label="Flow Issues"
+        color="tomato"
+        order="1"
+        .hidden=${!this.issuesWindowHidden}
+        @temba-button-clicked=${this.handleIssuesTabClick}
+      ></temba-floating-tab>
+    `;
+  }
+
+  private renderIssuesWindow(): TemplateResult | string {
+    if (!this.flowIssues?.length) return '';
+    return html`
+      <temba-floating-window
+        id="issues-window"
+        header="Flow Issues"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="tomato"
+        .hidden=${this.issuesWindowHidden}
+        @temba-dialog-hidden=${this.handleIssuesWindowClosed}
+      >
+        <div style="display:flex; flex-direction:column; gap:2px;">
+          ${this.flowIssues.map(
+            (issue) => html`
+              <div
+                class="issue-list-item"
+                @click=${() => this.handleIssueItemClick(issue)}
+              >
+                <temba-icon name="alert_warning" size="1.2"></temba-icon>
+                <span>${formatIssueMessage(issue)}</span>
+              </div>
+            `
+          )}
+        </div>
+      </temba-floating-window>
+    `;
+  }
+
   private renderRevisionsTab(): TemplateResult | string {
+    if (this.revisions.length <= 1) return '';
     return html`
       <temba-floating-tab
         id="revisions-tab"
         icon="revisions"
         label="Revisions"
         color="rgb(142, 94, 167)"
-        order="1"
+        order="2"
         .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
         @temba-button-clicked=${this.handleRevisionsTabClick}
       ></temba-floating-tab>
@@ -3622,6 +3932,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``;
@@ -3633,7 +3945,7 @@ export class Editor extends RapidElement {
         icon="language"
         label="Translate Flow"
         color="#6b7280"
-        order="2"
+        order="3"
         .hidden=${!this.localizationWindowHidden}
         @temba-button-clicked=${this.handleLocalizationTabClick}
       ></temba-floating-tab>
@@ -3691,90 +4003,117 @@ export class Editor extends RapidElement {
 
     const stickies = this.definition?._ui?.stickies || {};
 
-    return html`${style} ${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"
-        >
+    return html`${style} ${this.renderIssuesWindow()}
+      ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
+      <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
@@ -3782,6 +4121,7 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
+            .dialogOrigin=${this.dialogOrigin}
             @temba-node-saved=${(e: CustomEvent) =>
               this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e: CustomEvent) =>
@@ -3797,6 +4137,7 @@ export class Editor extends RapidElement {
             .features=${this.features}
           ></temba-node-type-selector>`
         : ''}
-      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
+      ${this.renderIssuesTab()} ${this.renderRevisionsTab()}
+      ${this.renderLocalizationTab()} `;
   }
 }