@thoughtspot/visual-embed-sdk 1.40.1-alpha.2 → 1.40.1-alpha.3

package/src/embed/ts-embed.ts

@@ -185,10 +185,7 @@ export class TsEmbed {
      */
     private fullscreenChangeHandler: (() => void) | null = null;
 
-    public id: string;
-
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
-        this.id = Date.now().toString();
         this.el = getDOMNode(domSelector);
         this.eventHandlerMap = new Map();
         this.isError = false;
@@ -203,10 +200,9 @@ export class TsEmbed {
         });
         this.hostEventClient = new HostEventClient(this.iFrame);
 
-        const embedConfig = getEmbedConfig();
-        this.embedConfig = embedConfig;
         this.isReadyForRenderPromise = getInitPromise().then(async () => {
-        
+            const embedConfig = getEmbedConfig();
+            this.embedConfig = embedConfig;
             if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
                 this.embedConfig.authTriggerContainer = domSelector;
             }
@@ -274,7 +270,7 @@ export class TsEmbed {
         const isDisabled = (
             this.viewConfig.overrideOrgId !== undefined
             || this.embedConfig.disablePreauthCache === true
-            || this.isFullAppEmbedWithVisiblePrimaryNavbar()
+            // || this.isFullAppEmbedWithVisiblePrimaryNavbar()
         );
         return !isDisabled;
     }
@@ -314,8 +310,6 @@ export class TsEmbed {
 
     private subscribedListeners: Record<string, any> = {};
 
-    public isEmbedContainerLoaded = false;
-
     /**
      * Adds a global event listener to window for "message" events.
      * ThoughtSpot detects if a particular event is targeted to this
@@ -481,57 +475,19 @@ export class TsEmbed {
         notifyAuthFailure(AuthFailureType.IDLE_SESSION_TIMEOUT);
     };
 
-    private pendingEvents: Array<{ eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void }> = [];
-
-    protected getPreRenderObj<T extends TsEmbed>(): T {
-        const embedObj = (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
-        if (embedObj === (this as any)) {
-            logger.info('embedObj is same as this');
-        }
-        return embedObj;
-    }
-
-    private checkEmbedContainerLoaded() {
-        if (this.isEmbedContainerLoaded) return true;
-
-        const preRenderObj = this.getPreRenderObj<TsEmbed>();
-        if (preRenderObj && preRenderObj.isEmbedContainerLoaded) {
-            this.isEmbedContainerLoaded = true;
-        }
-
-        return this.isEmbedContainerLoaded;
-    }
-
-    private executePendingEvents() {
-        logger.debug('executePendingEvents', this.pendingEvents);
-        setTimeout(() => {
-            this.pendingEvents.forEach((event) => {
-                this.trigger(event.eventType, event.data);
-                event.onEventTriggered?.();
-            });
-            this.pendingEvents = [];
-        }, 1000);
-    }
-    protected triggerAfterLoad(eventType: HostEvent, data: TriggerPayload<any, HostEvent>, onEventTriggered?: () => void) {
-        if (this.checkEmbedContainerLoaded()) {
-            this.trigger(eventType, data);
-            onEventTriggered?.();
-        } else {
-            this.pendingEvents.push({ eventType, data, onEventTriggered });
-        }
-    }
-
     /**
      * Register APP_INIT event and sendback init payload
      */
     private registerAppInit = () => {
         this.on(EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
-        this.on(EmbedEvent.AuthInit, () => {
-            this.isEmbedContainerLoaded = true;
-            this.executePendingEvents();
-        }, { start: false }, true);
         this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
         this.on(EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
+        
+        const embedListenerReadyHandler = this.createEmbedContainerHandler(EmbedEvent.EmbedListenerReady);  
+        this.on(EmbedEvent.EmbedListenerReady, embedListenerReadyHandler, { start: false }, true);
+        
+        const authInitHandler = this.createEmbedContainerHandler(EmbedEvent.AuthInit);
+        this.on(EmbedEvent.AuthInit, authInitHandler, { start: false }, true);
     };
 
     /**
@@ -552,12 +508,6 @@ export class TsEmbed {
         return `${basePath}#`;
     }
 
-    protected getUpdateEmbedParamsObject() {
-        let queryParams = this.getEmbedParamsObject();
-        queryParams = { ...this.viewConfig, ...queryParams };
-        return queryParams;
-    }
-
     /**
      * Common query params set for all the embed modes.
      * @param queryParams
@@ -740,15 +690,10 @@ export class TsEmbed {
     }
 
     protected getEmbedParams() {
-        const queryParams = this.getEmbedParamsObject();
+        const queryParams = this.getBaseQueryParams();
         return getQueryParamString(queryParams);
     }
 
-    protected getEmbedParamsObject() {
-        const params = this.getBaseQueryParams();
-        return params;
-    }
-
     protected getRootIframeSrc() {
         const query = this.getEmbedParams();
         return this.getEmbedBasePath(query);
@@ -1133,11 +1078,9 @@ export class TsEmbed {
         if (this.isRendered) {
             logger.warn('Please register event handlers before calling render');
         }
-
         const callbacks = this.eventHandlerMap.get(messageType) || [];
         callbacks.push({ options, callback });
         this.eventHandlerMap.set(messageType, callbacks);
-
         return this;
     }
 
@@ -1185,6 +1128,77 @@ export class TsEmbed {
         }
     }
 
+    /**
+     * @hidden
+     * Internal state to track if the embed container is loaded.
+     * This is used to trigger events after the embed container is loaded.
+     */
+    public isEmbedContainerLoaded = false;
+
+    /**
+     * @hidden
+     * Internal state to track the callbacks to be executed after the embed container 
+     * is loaded.
+     * This is used to trigger events after the embed container is loaded.
+     */
+    private embedContainerReadyCallbacks: Array<() => void> = [];
+
+    protected getPreRenderObj<T extends TsEmbed>(): T {
+        const embedObj = (this.insertedDomEl as any)?.[this.embedNodeKey] as T;
+        if (embedObj === (this as any)) {
+            logger.info('embedObj is same as this');
+        }
+        return embedObj;
+    }
+
+    private checkEmbedContainerLoaded() {
+        if (this.isEmbedContainerLoaded) return true;
+
+        const preRenderObj = this.getPreRenderObj<TsEmbed>();
+        if (preRenderObj && preRenderObj.isEmbedContainerLoaded) {
+            this.isEmbedContainerLoaded = true;
+        }
+
+        return this.isEmbedContainerLoaded;
+    }
+    private executeEmbedContainerReadyCallbacks() {
+        logger.debug('executePendingEvents', this.embedContainerReadyCallbacks);
+        this.embedContainerReadyCallbacks.forEach((callback) => {
+            callback?.();
+        });
+        this.embedContainerReadyCallbacks = [];
+    }
+
+    /**
+     * Executes a callback after the embed container is loaded.
+     * @param callback The callback to execute
+     */
+    protected executeAfterEmbedContainerLoaded(callback: () => void) {
+        if (this.checkEmbedContainerLoaded()) {
+            callback?.();
+        } else {
+            logger.debug('pushing callback to embedContainerReadyCallbacks', callback);
+            this.embedContainerReadyCallbacks.push(callback);
+          }
+    }
+
+    protected createEmbedContainerHandler = (source: EmbedEvent.AuthInit | EmbedEvent.EmbedListenerReady) => () => {
+        const processEmbedContainerReady = () => {
+            logger.debug('processEmbedContainerReady');
+            this.isEmbedContainerLoaded = true;
+            this.executeEmbedContainerReadyCallbacks();
+        }
+        if (source === EmbedEvent.AuthInit) {
+            const AUTH_INIT_FALLBACK_DELAY = 1000;
+            // Wait for 1 second to ensure the embed container is loaded
+            // This is a workaround to ensure the embed container is loaded
+            // this is needed until all clusters have EmbedListenerReady event
+            setTimeout(processEmbedContainerReady, AUTH_INIT_FALLBACK_DELAY);
+        } else if (source === EmbedEvent.EmbedListenerReady) {
+            processEmbedContainerReady();
+        }
+    }
+
     /**
      * Triggers an event to the embedded app
      * @param {HostEvent} messageType The event type
@@ -1381,12 +1395,8 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
-            logger.debug('triggering UpdateEmbedParams', this.viewConfig);
-            this.triggerAfterLoad(HostEvent.UpdateEmbedParams, this.getUpdateEmbedParamsObject());
         }
 
-        this.beforePrerenderVisible();
-
         if (this.el) {
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
@@ -1404,6 +1414,8 @@ export class TsEmbed {
             }
         }
 
+        this.beforePrerenderVisible();
+
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();