@nyaruka/temba-components 0.139.0 → 0.140.0

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

@@ -8,11 +8,11 @@ import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
 import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
+import { formatIssueMessage, getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
 import { Plumber, calculateFlowchartPath, ARROW_LENGTH, ARROW_HALF_WIDTH, CURSOR_GAP } from './Plumber';
 import { CanvasNode } from './CanvasNode';
-import { getNodeBounds, calculateReflowPositions, snapToGrid } from './utils';
 export function findNodeForExit(definition, exitUuid) {
     for (const node of definition.nodes) {
         const exit = node.exits.find((e) => e.uuid === exitUuid);
@@ -74,6 +74,10 @@ export class Editor extends RapidElement {
         -webkit-font-smoothing: antialiased;
       }
 
+      temba-floating-tab {
+        --floating-tab-right: 15px;
+      }
+
       #grid {
         position: relative;
         background-color: #f9f9f9;
@@ -207,7 +211,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;
@@ -522,6 +526,26 @@ 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;
+      }
     `;
     }
     constructor() {
@@ -550,6 +574,7 @@ export class Editor extends RapidElement {
         // Canvas-relative source exit position (set at drag start)
         this.connectionSourceX = null;
         this.connectionSourceY = null;
+        this.issuesWindowHidden = true;
         this.localizationWindowHidden = true;
         this.translationFilters = {
             categories: false
@@ -569,6 +594,7 @@ export class Editor extends RapidElement {
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.dialogOrigin = null;
         this.isCreatingNewNode = false;
         this.pendingNodePosition = null;
         // Canvas drop state for dragging actions to canvas
@@ -915,6 +941,7 @@ export class Editor extends RapidElement {
             return;
         if (this.isReadOnly())
             return;
+        this.blurActiveContentEditable();
         const element = event.currentTarget;
         // Only start dragging if clicking on the element itself, not on exits or other interactive elements
         const target = event.target;
@@ -974,10 +1001,22 @@ export class Editor extends RapidElement {
         // We clicked on empty canvas space, start selection
         this.handleCanvasMouseDown(event);
     }
+    blurActiveContentEditable() {
+        var _b;
+        let active = document.activeElement;
+        while ((_b = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement) {
+            active = active.shadowRoot.activeElement;
+        }
+        if (active instanceof HTMLElement &&
+            active.getAttribute('contenteditable') === 'true') {
+            active.blur();
+        }
+    }
     handleCanvasMouseDown(event) {
         var _b;
         if (this.isReadOnly())
             return;
+        this.blurActiveContentEditable();
         const target = event.target;
         if (target.id === 'canvas' || target.id === 'grid') {
             // Ignore clicks on exits
@@ -1692,6 +1731,10 @@ export class Editor extends RapidElement {
     handleActionEditRequested(event) {
         // 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;
         const node = this.definition.nodes.find((n) => n.uuid === nodeUuid);
@@ -1727,6 +1770,10 @@ export class Editor extends RapidElement {
     handleNodeEditRequested(event) {
         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;
     }
     handleNodeDeleted(event) {
         const nodeUuid = event.detail.uuid;
@@ -1797,6 +1844,7 @@ export class Editor extends RapidElement {
         this.editingNode = null;
         this.editingNodeUI = null;
         this.editingAction = null;
+        this.dialogOrigin = null;
     }
     handleActionEditCanceled() {
         // If we were creating a new node, just discard it
@@ -2253,6 +2301,7 @@ export class Editor extends RapidElement {
         }
         this.localizationWindowHidden = false;
         this.revisionsWindowHidden = true;
+        this.issuesWindowHidden = true;
         const alreadySelected = languages.some((lang) => lang.code === this.languageCode);
         if (!alreadySelected) {
             this.handleLanguageChange(languages[0].code);
@@ -2460,11 +2509,42 @@ export class Editor extends RapidElement {
         }
         this.autoTranslating = false;
     }
+    handleIssuesTabClick() {
+        this.issuesWindowHidden = false;
+        this.revisionsWindowHidden = true;
+        this.localizationWindowHidden = true;
+    }
+    handleIssuesWindowClosed() {
+        this.issuesWindowHidden = true;
+    }
+    handleIssueItemClick(issue) {
+        var _b;
+        const issuesWindow = document.getElementById('issues-window');
+        issuesWindow === null || issuesWindow === void 0 ? void 0 : 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 = (_b = node.actions) === null || _b === void 0 ? void 0 : _b.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];
+        }
+    }
     handleRevisionsTabClick() {
         if (this.revisionsWindowHidden) {
             this.fetchRevisions();
             this.revisionsWindowHidden = false;
-            this.localizationWindowHidden = true; // Close other window
+            this.issuesWindowHidden = true;
+            this.localizationWindowHidden = true;
         }
     }
     handleRevisionsWindowClosed() {
@@ -2565,6 +2645,51 @@ export class Editor extends RapidElement {
         // Fetch the latest version of the flow to ensure the store is up to date
         getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
     }
+    renderIssuesTab() {
+        var _b;
+        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.length))
+            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>
+    `;
+    }
+    renderIssuesWindow() {
+        var _b;
+        if (!((_b = this.flowIssues) === null || _b === void 0 ? void 0 : _b.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>
+    `;
+    }
     renderRevisionsTab() {
         return html `
       <temba-floating-tab
@@ -2572,7 +2697,7 @@ export class Editor extends RapidElement {
         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>
@@ -2843,7 +2968,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>
@@ -2890,8 +3015,9 @@ export class Editor extends RapidElement {
       ${unsafeCSS(CanvasNode.styles.cssText)}
     </style>`;
         const stickies = ((_c = (_b = this.definition) === null || _b === void 0 ? void 0 : _b._ui) === null || _c === void 0 ? void 0 : _c.stickies) || {};
-        return html `${style} ${this.renderRevisionsWindow()}
-      ${this.renderLocalizationWindow()} ${this.renderAutoTranslateDialog()}
+        return html `${style} ${this.renderIssuesWindow()}
+      ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
+      ${this.renderAutoTranslateDialog()}
       <div id="editor">
         <div
           id="grid"
@@ -2964,6 +3090,7 @@ export class Editor extends RapidElement {
             .node=${this.editingNode}
             .nodeUI=${this.editingNodeUI}
             .action=${this.editingAction}
+            .dialogOrigin=${this.dialogOrigin}
             @temba-node-saved=${(e) => this.handleNodeSaved(e.detail.node, e.detail.uiConfig)}
             @temba-action-saved=${(e) => this.handleActionSaved(e.detail.action)}
             @temba-node-edit-cancelled=${this.handleNodeEditCanceled}
@@ -2977,7 +3104,8 @@ export class Editor extends RapidElement {
             .features=${this.features}
           ></temba-node-type-selector>`
             : ''}
-      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
+      ${this.renderIssuesTab()} ${this.renderRevisionsTab()}
+      ${this.renderLocalizationTab()} `;
     }
 }
 __decorate([
@@ -3016,6 +3144,9 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.getCurrentActivity())
 ], Editor.prototype, "activityData", void 0);
+__decorate([
+    fromStore(zustand, (state) => { var _b; return ((_b = state.flowInfo) === null || _b === void 0 ? void 0 : _b.issues) || []; })
+], Editor.prototype, "flowIssues", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isDragging", void 0);
@@ -3046,6 +3177,9 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "isValidTarget", void 0);
+__decorate([
+    state()
+], Editor.prototype, "issuesWindowHidden", void 0);
 __decorate([
     state()
 ], Editor.prototype, "localizationWindowHidden", void 0);