@nyaruka/temba-components 0.137.0 → 0.138.0

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

@@ -3,11 +3,11 @@ import { html } from 'lit-html';
 import { css, unsafeCSS } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { getStore } from '../store/Store';
-import { fromStore, zustand } from '../store/AppState';
+import { fromStore, zustand, FLOW_SPEC_VERSION } from '../store/AppState';
 import { RapidElement } from '../RapidElement';
 import { repeat } from 'lit-html/directives/repeat.js';
 import { CustomEventType } from '../interfaces';
-import { generateUUID, postJSON } from '../utils';
+import { generateUUID, postJSON, fetchResults, getClasses } from '../utils';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { ACTION_GROUP_METADATA } from './types';
 import { Plumber } from './Plumber';
@@ -110,6 +110,29 @@ export class Editor extends RapidElement {
         transition: none !important;
       }
 
+      #canvas.viewing-revision {
+        pointer-events: none;
+      }
+
+      #canvas.read-only svg {
+        pointer-events: none;
+      }
+
+      #grid.viewing-revision {
+        background-color: #fff9fc;
+        background-image: radial-gradient(
+          circle,
+          rgba(166, 38, 164, 0.2) 1px,
+          transparent 1px
+        );
+      }
+
+      #grid.viewing-revision temba-flow-node,
+      #grid.viewing-revision svg.jtk-connector,
+      #grid.viewing-revision .activity-overlay {
+        opacity: 0.5;
+      }
+
       body .jtk-endpoint {
         width: initial;
         height: initial;
@@ -164,12 +187,28 @@ export class Editor extends RapidElement {
         stroke-width: 3px;
       }
 
+      body #canvas.read-only-connections svg.jtk-connector.jtk-hover path {
+        stroke: var(--color-connectors) !important;
+      }
+
       body .plumb-connector.jtk-hover .plumb-arrow {
         fill: var(--color-success) !important;
         stroke-width: 0px;
         z-index: 10;
       }
 
+      body
+        #canvas.read-only-connections
+        .plumb-connector.jtk-hover
+        .plumb-arrow {
+        fill: var(--color-connectors) !important;
+        ponter-events: none;
+      }
+
+      body #canvas.read-only-connections svg {
+        pointer-events: none;
+      }
+
       /* Activity overlays on connections */
       .jtk-overlay.activity-overlay {
         background: #f3f3f3;
@@ -458,6 +497,18 @@ export class Editor extends RapidElement {
         width: 100%;
       }
 
+      .revert-button {
+        background: var(--color-primary-dark);
+        border: none;
+        color: #fff;
+        padding: 6px 10px;
+        border-radius: var(--curvature);
+        font-size: 11px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+      }
+
       .auto-translate-button {
         background: var(--color-primary-dark);
         border: none;
@@ -544,6 +595,11 @@ export class Editor extends RapidElement {
         this.autoTranslating = false;
         this.autoTranslateModel = null;
         this.autoTranslateError = null;
+        this.revisionsWindowHidden = true;
+        this.revisions = [];
+        this.viewingRevision = null;
+        this.isLoadingRevisions = false;
+        this.preRevertState = null;
         this.translationCache = new Map();
         // NodeEditor state - handles both node and action editing
         this.editingNode = null;
@@ -693,10 +749,11 @@ export class Editor extends RapidElement {
             }
         }, SAVE_QUIET_TIME);
     }
-    saveChanges() {
+    saveChanges(definitionOverride) {
+        const definition = definitionOverride || this.definition;
         // post the flow definition to the server
-        getStore()
-            .postJSON(`/flow/revisions/${this.flow}/`, this.definition)
+        return getStore()
+            .postJSON(`/flow/revisions/${this.flow}/`, definition)
             .then((response) => {
             var _b;
             // Update flow info and revision with the response data
@@ -708,6 +765,10 @@ 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();
+                }
             }
         })
             .catch((error) => {
@@ -751,7 +812,7 @@ export class Editor extends RapidElement {
                 clearTimeout(this.activityTimer);
             }
             this.activityTimer = window.setTimeout(() => {
-                this.fetchActivityData();
+                // this.fetchActivityData();
             }, this.activityInterval);
         });
     }
@@ -832,6 +893,8 @@ export class Editor extends RapidElement {
         // ignore right clicks
         if (event.button !== 0)
             return;
+        if (this.isReadOnly())
+            return;
         const element = event.currentTarget;
         // Only start dragging if clicking on the element itself, not on exits or other interactive elements
         const target = event.target;
@@ -893,6 +956,8 @@ export class Editor extends RapidElement {
     }
     handleCanvasMouseDown(event) {
         var _b;
+        if (this.isReadOnly())
+            return;
         const target = event.target;
         if (target.id === 'canvas' || target.id === 'grid') {
             // Ignore clicks on exits
@@ -954,6 +1019,7 @@ export class Editor extends RapidElement {
         // Clean up jsPlumb connections for nodes before removing them
         uuids.forEach((uuid) => {
             this.plumber.removeNodeConnections(uuid);
+            this.plumber.removeAllEndpoints(uuid);
         });
         // Now remove them from the definition
         if (uuids.length > 0 && this.plumber) {
@@ -1372,6 +1438,10 @@ export class Editor extends RapidElement {
         store.getState().expandCanvas(maxWidth, maxHeight);
     }
     handleCanvasContextMenu(event) {
+        if (this.isReadOnly()) {
+            event.preventDefault();
+            return;
+        }
         // Check if we right-clicked on empty canvas space
         const target = event.target;
         if (target.id !== 'canvas') {
@@ -2048,6 +2118,7 @@ export class Editor extends RapidElement {
             return;
         }
         this.localizationWindowHidden = false;
+        this.revisionsWindowHidden = true;
         const alreadySelected = languages.some((lang) => lang.code === this.languageCode);
         if (!alreadySelected) {
             this.handleLanguageChange(languages[0].code);
@@ -2255,6 +2326,199 @@ export class Editor extends RapidElement {
         }
         this.autoTranslating = false;
     }
+    handleRevisionsTabClick() {
+        if (this.revisionsWindowHidden) {
+            this.fetchRevisions();
+            this.revisionsWindowHidden = false;
+            this.localizationWindowHidden = true; // Close other window
+        }
+    }
+    handleRevisionsWindowClosed() {
+        this.resetRevisionsScroll();
+        this.revisionsWindowHidden = true;
+        if (this.viewingRevision) {
+            this.handleCancelRevisionView();
+        }
+    }
+    resetRevisionsScroll() {
+        var _b;
+        const list = (_b = this.querySelector('#revisions-window').shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.body');
+        if (list) {
+            list.scrollTop = 0;
+        }
+    }
+    async fetchRevisions() {
+        this.isLoadingRevisions = true;
+        try {
+            const results = await fetchResults(`/flow/revisions/${this.flow}/?version=${FLOW_SPEC_VERSION}`);
+            this.revisions = results.slice(1);
+        }
+        catch (e) {
+            console.error('Error fetching revisions', e);
+        }
+        finally {
+            this.isLoadingRevisions = false;
+        }
+    }
+    async handleRevisionClick(revision) {
+        var _b, _c;
+        if (((_b = this.viewingRevision) === null || _b === void 0 ? void 0 : _b.id) === revision.id) {
+            return;
+        }
+        if (!this.viewingRevision) {
+            // Save current state first
+            this.preRevertState = {
+                definition: this.definition,
+                dirtyDate: this.dirtyDate
+            };
+        }
+        this.viewingRevision = revision;
+        this.isLoadingRevisions = true;
+        (_c = this.plumber) === null || _c === void 0 ? void 0 : _c.reset();
+        try {
+            await getStore()
+                .getState()
+                .fetchRevision(`/flow/revisions/${this.flow}`, revision.id.toString());
+        }
+        catch (e) {
+            console.error('Error fetching revision details', e);
+            this.handleCancelRevisionView();
+        }
+        finally {
+            this.isLoadingRevisions = false;
+        }
+    }
+    handleCancelRevisionView() {
+        var _b;
+        (_b = this.plumber) === null || _b === void 0 ? void 0 : _b.reset();
+        if (this.preRevertState) {
+            const currentInfo = getStore().getState().flowInfo;
+            getStore().getState().setFlowContents({
+                definition: this.preRevertState.definition,
+                info: currentInfo
+            });
+            if (this.preRevertState.dirtyDate) {
+                getStore().getState().setDirtyDate(this.preRevertState.dirtyDate);
+            }
+        }
+        else {
+            // Fallback if no pre-revert definition
+            getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+        }
+        this.viewingRevision = null;
+        this.preRevertState = null;
+    }
+    async handleRevertClick() {
+        var _b;
+        if (!this.viewingRevision || !this.preRevertState)
+            return;
+        (_b = this.plumber) === null || _b === void 0 ? void 0 : _b.reset();
+        // Use the content of the viewing revision (this.definition)
+        // but the revision number of the current head (preRevertState)
+        // so the server accepts it as a valid update
+        const definitionToSave = {
+            ...this.definition,
+            revision: this.preRevertState.definition.revision
+        };
+        await this.saveChanges(definitionToSave);
+        this.viewingRevision = null;
+        this.preRevertState = null;
+        this.revisionsWindowHidden = true;
+        const revisionsWindow = document.getElementById('revisions-window');
+        revisionsWindow.handleClose();
+        // Refresh revisions list to show the new one
+        this.fetchRevisions();
+        // Fetch the latest version of the flow to ensure the store is up to date
+        getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
+    }
+    renderRevisionsTab() {
+        return html `
+      <temba-floating-tab
+        id="revisions-tab"
+        icon="revisions"
+        label="Revisions"
+        color="rgb(142, 94, 167)"
+        top="105"
+        .hidden=${!this.revisionsWindowHidden && this.localizationWindowHidden}
+        @temba-button-clicked=${this.handleRevisionsTabClick}
+      ></temba-floating-tab>
+    `;
+    }
+    renderRevisionsWindow() {
+        return html `
+      <temba-floating-window
+        id="revisions-window"
+        header="Revisions"
+        .width=${360}
+        .maxHeight=${600}
+        .top=${75}
+        color="rgb(142, 94, 167)"
+        .hidden=${this.revisionsWindowHidden}
+        @temba-dialog-hidden=${this.handleRevisionsWindowClosed}
+      >
+        <div class="localization-window-content">
+          <div
+            class="revisions-list"
+            style="display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding-bottom:10px;"
+          >
+            ${this.isLoadingRevisions && !this.revisions.length
+            ? html `<temba-loading></temba-loading>`
+            : this.revisions.map((rev) => {
+                var _b;
+                const isSelected = ((_b = this.viewingRevision) === null || _b === void 0 ? void 0 : _b.id) === rev.id;
+                return html `
+                    <div
+                      class="revision-item ${isSelected ? 'selected' : ''}"
+                      style="padding:8px; border-radius:4px; cursor:pointer; background:${isSelected
+                    ? '#f0f6ff' // Light blue bg for selected
+                    : '#f9fafb'}; border:1px solid ${isSelected ? '#a4cafe' : '#e5e7eb'}; transition: all 0.2s ease;"
+                      @click=${() => this.handleRevisionClick(rev)}
+                    >
+                      <div
+                        style="display:flex; justify-content:space-between; align-items:center;"
+                      >
+                        <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>
+                        ${isSelected
+                    ? html `<button
+                                class="revert-button"
+                                @click=${this.handleRevertClick}
+                              >
+                                Revert
+                              </button>`
+                    : html ``}
+                        
+                        </button>
+                      </div>
+
+                      ${rev.comment
+                    ? html `<div
+                              style="font-size:12px; color:#4b5563; margin-top:4px;"
+                            >
+                              ${rev.comment}
+                            </div>`
+                    : ''}
+                      
+                    </div>
+                  `;
+            })}
+          </div>
+        </div>
+      </temba-floating-window>
+    `;
+    }
     renderLocalizationWindow() {
         var _b, _c, _d;
         const languages = this.getLocalizationLanguages();
@@ -2481,6 +2745,9 @@ export class Editor extends RapidElement {
             behavior: 'smooth'
         });
     }
+    isReadOnly() {
+        return this.viewingRevision !== null || this.isTranslating;
+    }
     render() {
         var _b, _c;
         // we have to embed our own style since we are in light DOM
@@ -2489,17 +2756,24 @@ 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.renderLocalizationWindow()}
-      ${this.renderAutoTranslateDialog()}
+        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"
         >
-          <div id="canvas">
+          <div
+            id="canvas"
+            class="${getClasses({
+            'viewing-revision': !!this.viewingRevision,
+            'read-only-connections': !!this.viewingRevision || this.isTranslating
+        })}"
+          >
             ${this.definition
-            ? repeat(this.definition.nodes, (node) => node.uuid, (node, index) => {
+            ? 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) || {
                     left: 0,
@@ -2509,7 +2783,8 @@ export class Editor extends RapidElement {
                     ((_d = this.currentDragItem) === null || _d === void 0 ? void 0 : _d.uuid) === node.uuid;
                 const selected = this.selectedItems.has(node.uuid);
                 // first node is the flow start (nodes are sorted by position)
-                const isFlowStart = index === 0;
+                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'
@@ -2561,11 +2836,13 @@ export class Editor extends RapidElement {
             : ''}
 
       <temba-canvas-menu></temba-canvas-menu>
-      <temba-node-type-selector
-        .flowType=${this.flowType}
-        .features=${this.features}
-      ></temba-node-type-selector>
-      ${this.renderLocalizationTab()} `;
+      ${!this.viewingRevision
+            ? html `<temba-node-type-selector
+            .flowType=${this.flowType}
+            .features=${this.features}
+          ></temba-node-type-selector>`
+            : ''}
+      ${this.renderRevisionsTab()} ${this.renderLocalizationTab()} `;
     }
 }
 __decorate([
@@ -2652,6 +2929,18 @@ __decorate([
 __decorate([
     state()
 ], Editor.prototype, "autoTranslateError", void 0);
+__decorate([
+    state()
+], Editor.prototype, "revisionsWindowHidden", void 0);
+__decorate([
+    state()
+], Editor.prototype, "revisions", void 0);
+__decorate([
+    state()
+], Editor.prototype, "viewingRevision", void 0);
+__decorate([
+    state()
+], Editor.prototype, "isLoadingRevisions", void 0);
 __decorate([
     state()
 ], Editor.prototype, "editingNode", void 0);