@thoughtspot/visual-embed-sdk 1.41.1 → 1.42.1-HE2

package/src/embed/search.ts

@@ -331,7 +331,7 @@ export const HiddenActionItemByDefaultForSearchEmbed = [
 ];
 
 export interface SearchAppInitData extends DefaultAppInitData {
-  searchOptions?: SearchOptions;
+    searchOptions?: SearchOptions;
 }
 
 /**
@@ -381,7 +381,7 @@ export class SearchEmbed extends TsEmbed {
         return { ...defaultAppInitData, ...this.getSearchInitData() };
     }
 
-    protected getEmbedParams(): string {
+    protected getEmbedParamsObject() {
         const {
             hideResults,
             enableSearchAssist,
@@ -398,7 +398,7 @@ export class SearchEmbed extends TsEmbed {
             collapseSearchBarInitially = false,
             enableCustomColumnGroups = false,
             isOnBeforeGetVizDataInterceptEnabled = false,
-            /* eslint-disable-next-line max-len */
+
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
             focusSearchBarOnRender = true,
             excludeRuntimeParametersfromURL,
@@ -443,7 +443,7 @@ export class SearchEmbed extends TsEmbed {
         }
 
         if (isOnBeforeGetVizDataInterceptEnabled) {
-            /* eslint-disable-next-line max-len */
+
             queryParams[Param.IsOnBeforeGetVizDataInterceptEnabled] = isOnBeforeGetVizDataInterceptEnabled;
         }
 
@@ -460,7 +460,7 @@ export class SearchEmbed extends TsEmbed {
         }
 
         queryParams[Param.searchEmbed] = true;
-        /* eslint-disable-next-line max-len */
+
         queryParams[Param.CollapseSearchBarInitially] = collapseSearchBarInitially || collapseSearchBar;
         queryParams[Param.EnableCustomColumnGroups] = enableCustomColumnGroups;
         if (dataPanelCustomGroupsAccordionInitialState
@@ -468,12 +468,23 @@ export class SearchEmbed extends TsEmbed {
             || dataPanelCustomGroupsAccordionInitialState
             === DataPanelCustomColumnGroupsAccordionState.EXPAND_FIRST
         ) {
-            /* eslint-disable-next-line max-len */
+
             queryParams[Param.DataPanelCustomGroupsAccordionInitialState] = dataPanelCustomGroupsAccordionInitialState;
         } else {
-            /* eslint-disable-next-line max-len */
+
             queryParams[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
+        return queryParams;
+    }
+
+    protected getEmbedParams() {
+        const {
+            runtimeParameters,
+            runtimeFilters,
+            excludeRuntimeParametersfromURL,
+            excludeRuntimeFiltersfromURL,
+        } = this.viewConfig;
+        const queryParams = this.getEmbedParamsObject();
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);
         if (queryParamsString) {

package/src/embed/ts-embed.spec.ts

@@ -2488,7 +2488,7 @@ describe('Unit test case for ts embed', () => {
         });
 
         afterAll((): void => {
-            window.location = location;
+            window.location = location as any;
         });
 
         it('get url params for TS', () => {
@@ -3345,4 +3345,115 @@ describe('Unit test case for ts embed', () => {
             expect(searchEmbed.isEmbedContainerLoaded).toBe(true);
         });
     });
+
+    describe('Online event listener registration after auth failure', () => {
+        beforeAll(() => {
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+                loginFailedMessage: 'Not logged in',
+            });
+        });
+
+        test('should register online event listener when authentication fails', async () => {
+            const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+            jest.spyOn(baseInstance, 'getAuthPromise').mockRejectedValueOnce(
+                new Error('Auth failed'),
+            );
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            addEventListenerSpy.mockClear();
+            await searchEmbed.render();
+            await executeAfterWait(() => {
+                expect(getRootEl().innerHTML).toContain('Not logged in');
+                const onlineListenerCalls = addEventListenerSpy.mock.calls.filter(
+                    (call) => call[0] === 'online',
+                );
+                expect(onlineListenerCalls).toHaveLength(1);
+                const offlineListenerCalls = addEventListenerSpy.mock.calls.filter(
+                    (call) => call[0] === 'offline',
+                );
+                expect(offlineListenerCalls).toHaveLength(1);
+                const messageListenerCalls = addEventListenerSpy.mock.calls.filter(
+                    (call) => call[0] === 'message',
+                );
+                expect(messageListenerCalls).toHaveLength(0);
+            });
+
+            addEventListenerSpy.mockRestore();
+        });
+
+        test('should attempt to trigger reload when online event occurs after auth failure', async () => {
+            jest.spyOn(baseInstance, 'getAuthPromise').mockRejectedValueOnce(
+                new Error('Auth failed'),
+            );
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            const triggerSpy = jest.spyOn(searchEmbed, 'trigger').mockResolvedValue(null);
+            await searchEmbed.render();
+
+            await executeAfterWait(() => {
+                expect(getRootEl().innerHTML).toContain('Not logged in');
+                triggerSpy.mockClear();
+                const onlineEvent = new Event('online');
+                window.dispatchEvent(onlineEvent);
+                expect(triggerSpy).toHaveBeenCalledWith(HostEvent.Reload);
+            });
+
+            triggerSpy.mockReset();
+        });
+
+        test('should handle online event gracefully when no iframe exists', async () => {
+            jest.spyOn(baseInstance, 'getAuthPromise').mockRejectedValueOnce(
+                new Error('Auth failed'),
+            );
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+            await searchEmbed.render();
+            await executeAfterWait(() => {
+                expect(getRootEl().innerHTML).toContain('Not logged in');
+                const onlineEvent = new Event('online');
+                expect(() => {
+                    window.dispatchEvent(onlineEvent);
+                }).not.toThrow();
+            });
+    
+            errorSpy.mockReset();
+        });
+
+        test('should register all event listeners when authentication succeeds', async () => {
+            const addEventListenerSpy = jest.spyOn(window, 'addEventListener');
+            jest.spyOn(baseInstance, 'getAuthPromise').mockResolvedValueOnce(true);
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            addEventListenerSpy.mockClear();
+            await searchEmbed.render();
+            await executeAfterWait(() => {
+                const onlineListenerCalls = addEventListenerSpy.mock.calls.filter(
+                    (call) => call[0] === 'online',
+                );
+                expect(onlineListenerCalls).toHaveLength(1);
+                const offlineListenerCalls = addEventListenerSpy.mock.calls.filter(
+                    (call) => call[0] === 'offline',
+                );
+                expect(offlineListenerCalls).toHaveLength(1);
+                const messageListenerCalls = addEventListenerSpy.mock.calls.filter(
+                    (call) => call[0] === 'message',
+                );
+                expect(messageListenerCalls).toHaveLength(1);
+            });
+
+            addEventListenerSpy.mockRestore();
+        });
+        test('should successfully trigger reload when online event occurs after auth success', async () => {
+            jest.spyOn(baseInstance, 'getAuthPromise').mockResolvedValueOnce(true);
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            const triggerSpy = jest.spyOn(searchEmbed, 'trigger').mockResolvedValue({} as any);
+            await searchEmbed.render();
+            await executeAfterWait(() => {
+                triggerSpy.mockClear();
+                const onlineEvent = new Event('online');
+                window.dispatchEvent(onlineEvent);
+                expect(triggerSpy).toHaveBeenCalledWith(HostEvent.Reload);
+            });
+            triggerSpy.mockReset();
+        });
+    });
 });

package/src/embed/ts-embed.ts

@@ -199,11 +199,11 @@ export class TsEmbed {
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
+        const embedConfig = getEmbedConfig();
+        this.embedConfig = embedConfig;
+    
         this.hostEventClient = new HostEventClient(this.iFrame);
-
         this.isReadyForRenderPromise = getInitPromise().then(async () => {
-            const embedConfig = getEmbedConfig();
-            this.embedConfig = embedConfig;
             if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
                 this.embedConfig.authTriggerContainer = domSelector;
             }
@@ -312,13 +312,36 @@ export class TsEmbed {
     private subscribedListeners: Record<string, any> = {};
 
     /**
-     * Adds a global event listener to window for "message" events.
-     * ThoughtSpot detects if a particular event is targeted to this
-     * embed instance through an identifier contained in the payload,
-     * and executes the registered callbacks accordingly.
+     * Subscribe to network events (online/offline) that should
+     * work regardless of auth status
      */
-    private subscribeToEvents() {
-        this.unsubscribeToEvents();
+    private subscribeToNetworkEvents() {
+        this.unsubscribeToNetworkEvents();
+
+        const onlineEventListener = (e: Event) => {
+            this.trigger(HostEvent.Reload);
+        };
+        window.addEventListener('online', onlineEventListener);
+
+        const offlineEventListener = (e: Event) => {
+            const offlineWarning = ERROR_MESSAGE.OFFLINE_WARNING;
+            this.executeCallbacks(EmbedEvent.Error, {
+                offlineWarning,
+            });
+            logger.warn(offlineWarning);
+        };
+        window.addEventListener('offline', offlineEventListener);
+
+        this.subscribedListeners.online = onlineEventListener;
+        this.subscribedListeners.offline = offlineEventListener;
+    }
+
+    /**
+     * Subscribe to message events that depend on successful iframe setup
+     */
+    private subscribeToMessageEvents() {
+        this.unsubscribeToMessageEvents();
+
         const messageEventListener = (event: MessageEvent<any>) => {
             const eventType = this.getEventType(event);
             const eventPort = this.getEventPort(event);
@@ -338,25 +361,37 @@ export class TsEmbed {
         };
         window.addEventListener('message', messageEventListener);
 
-        const onlineEventListener = (e: Event) => {
-            this.trigger(HostEvent.Reload);
-        };
-        window.addEventListener('online', onlineEventListener);
+        this.subscribedListeners.message = messageEventListener;
+    }
+    /**
+     * Adds event listeners for both network and message events.
+     * This maintains backward compatibility with the existing method.
+     * Adds a global event listener to window for "message" events.
+     * ThoughtSpot detects if a particular event is targeted to this
+     * embed instance through an identifier contained in the payload,
+     * and executes the registered callbacks accordingly.
+     */
+    private subscribeToEvents() {
+        this.subscribeToNetworkEvents();
+        this.subscribeToMessageEvents();
+    }
 
-        const offlineEventListener = (e: Event) => {
-            const offlineWarning = 'Network not Detected. Embed is offline. Please reconnect and refresh';
-            this.executeCallbacks(EmbedEvent.Error, {
-                offlineWarning,
-            });
-            logger.warn(offlineWarning);
-        };
-        window.addEventListener('offline', offlineEventListener);
+    private unsubscribeToNetworkEvents() {
+        if (this.subscribedListeners.online) {
+            window.removeEventListener('online', this.subscribedListeners.online);
+            delete this.subscribedListeners.online;
+        }
+        if (this.subscribedListeners.offline) {
+            window.removeEventListener('offline', this.subscribedListeners.offline);
+            delete this.subscribedListeners.offline;
+        }
+    }
 
-        this.subscribedListeners = {
-            message: messageEventListener,
-            online: onlineEventListener,
-            offline: offlineEventListener,
-        };
+    private unsubscribeToMessageEvents() {
+        if (this.subscribedListeners.message) {
+            window.removeEventListener('message', this.subscribedListeners.message);
+            delete this.subscribedListeners.message;
+        }
     }
 
     private unsubscribeToEvents() {
@@ -494,10 +529,10 @@ export class TsEmbed {
         this.on(EmbedEvent.APP_INIT, this.appInitCb, { 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);  
+
+        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);
     };
@@ -520,6 +555,12 @@ 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
@@ -702,10 +743,15 @@ export class TsEmbed {
     }
 
     protected getEmbedParams() {
-        const queryParams = this.getBaseQueryParams();
+        const queryParams = this.getEmbedParamsObject();
         return getQueryParamString(queryParams);
     }
 
+    protected getEmbedParamsObject() {
+        const params = this.getBaseQueryParams();
+        return params;
+    }
+
     protected getRootIframeSrc() {
         const query = this.getEmbedParams();
         return this.getEmbedBasePath(query);
@@ -787,6 +833,9 @@ export class TsEmbed {
 
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
 
+            // Always subscribe to network events, regardless of auth status
+            this.subscribeToNetworkEvents();
+
             return getAuthPromise()
                 ?.then((isLoggedIn: boolean) => {
                     if (!isLoggedIn) {
@@ -832,7 +881,9 @@ export class TsEmbed {
                             el.remove();
                         });
                     }
-                    this.subscribeToEvents();
+                    // Subscribe to message events only after successful
+                    // auth and iframe setup
+                    this.subscribeToMessageEvents();
                 })
                 .catch((error) => {
                     nextInQueue();
@@ -1140,12 +1191,12 @@ 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;
+     public isEmbedContainerLoaded = false;
 
     /**
      * @hidden
@@ -1191,7 +1242,7 @@ export class TsEmbed {
         } else {
             logger.debug('pushing callback to embedContainerReadyCallbacks', callback);
             this.embedContainerReadyCallbacks.push(callback);
-          }
+        }
     }
 
     protected createEmbedContainerHandler = (source: EmbedEvent.AuthInit | EmbedEvent.EmbedListenerReady) => () => {
@@ -1220,6 +1271,7 @@ export class TsEmbed {
     public async trigger<HostEventT extends HostEvent, PayloadT>(
         messageType: HostEventT,
         data: TriggerPayload<PayloadT, HostEventT> = {} as any,
+        context: any = {},
     ): Promise<TriggerResponse<PayloadT, HostEventT>> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
 
@@ -1232,8 +1284,18 @@ export class TsEmbed {
             this.handleError('Host event type is undefined');
             return null;
         }
+
+        // Check if iframe exists before triggering - 
+        // this prevents the error when auth fails
+        if (!this.iFrame) {
+            logger.debug(
+                `Cannot trigger ${messageType} - iframe not available (likely due to auth failure)`,
+            );
+            return null;
+        }
+
         // send an empty object, this is needed for liveboard default handlers
-        return this.hostEventClient.triggerHostEvent(messageType, data);
+        return this.hostEventClient.triggerHostEvent(messageType, data, context);
     }
 
     /**
@@ -1279,6 +1341,7 @@ export class TsEmbed {
      * Creates the preRender shell
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
+
     public async preRender(showPreRenderByDefault = false, replaceExistingPreRender = false): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
@@ -1413,8 +1476,14 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
+            logger.debug('triggering UpdateEmbedParams', this.viewConfig);
+            this.executeAfterEmbedContainerLoaded(() => {
+                this.trigger(HostEvent.UpdateEmbedParams, this.getUpdateEmbedParamsObject());
+            });
         }
 
+        this.beforePrerenderVisible();
+
         if (this.el) {
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
@@ -1432,8 +1501,6 @@ export class TsEmbed {
             }
         }
 
-        this.beforePrerenderVisible();
-
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();

package/src/errors.ts

@@ -19,6 +19,7 @@ export const ERROR_MESSAGE = {
     MISSING_REPORTING_OBSERVER: 'ReportingObserver not supported',
     RENDER_CALLED_BEFORE_INIT: 'Looks like render was called before calling init, the render won\'t start until init is called.\nFor more info check\n1. https://developers.thoughtspot.com/docs/Function_init#_init\n2.https://developers.thoughtspot.com/docs/getting-started#initSdk',
     SPOTTER_AGENT_NOT_INITIALIZED: 'SpotterAgent not initialized',
+    OFFLINE_WARNING : 'Network not Detected. Embed is offline. Please reconnect and refresh',
 };
 
 export const CUSTOM_ACTIONS_ERROR_MESSAGE = {

package/src/react/all-types-export.spec.ts

@@ -6,6 +6,6 @@ describe('Exports', () => {
     });
 
     it('should not have undefined exports', () => {
-        Object.keys(Exports).forEach((exportKey) => expect(Boolean(Exports[exportKey])).toBe(true));
+        Object.entries(Exports).forEach(([, exportValue]) => {expect(Boolean(exportValue)).toBe(true);});
     });
 });

package/src/react/util.spec.tsx

@@ -0,0 +1,88 @@
+import { getViewPropsAndListeners } from './util';
+import { EmbedEvent, MessageCallback } from '../types';
+
+describe('React util functions', () => {
+    describe('getViewPropsAndListeners', () => {
+        test('should return empty viewConfig and listeners for empty props', () => {
+            const props = {};
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({});
+            expect(result.listeners).toEqual({});
+        });
+
+        test('should separate view config properties from props', () => {
+            const props = {
+                frameParams: { width: 100, height: 200 },
+                showLiveboardTitle: true,
+                liveboardId: 'test-liveboard-id',
+                vizId: 'test-viz-id',
+                className: 'test-class',
+                style: { color: 'red' },
+            };
+
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({
+                frameParams: { width: 100, height: 200 },
+                showLiveboardTitle: true,
+                liveboardId: 'test-liveboard-id',
+                vizId: 'test-viz-id',
+                className: 'test-class',
+                style: { color: 'red' },
+            });
+            expect(result.listeners).toEqual({});
+        });
+
+        test('should separate event handlers from props', () => {
+            const onInit: MessageCallback = jest.fn();
+            const onLoad: MessageCallback = jest.fn();
+            const onData: MessageCallback = jest.fn();
+
+            const props = {
+                onInit,
+                onLoad,
+                onData,
+            };
+
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({});
+            expect(result.listeners).toEqual({
+                [EmbedEvent.Init]: onInit,
+                [EmbedEvent.Load]: onLoad,
+                [EmbedEvent.Data]: onData,
+            });
+        });
+
+        test('should handle both view config and event handlers', () => {
+            const onInit: MessageCallback = jest.fn();
+            const onAuthInit: MessageCallback = jest.fn();
+            const onQueryChanged: MessageCallback = jest.fn();
+
+            const props = {
+                liveboardId: 'test-liveboard-id',
+                showLiveboardTitle: false,
+                frameParams: { height: 500 },
+                onInit,
+                onAuthInit,
+                onQueryChanged,
+                className: 'embed-container',
+            };
+
+            const result = getViewPropsAndListeners(props);
+
+            expect(result.viewConfig).toEqual({
+                liveboardId: 'test-liveboard-id',
+                showLiveboardTitle: false,
+                frameParams: { height: 500 },
+                className: 'embed-container',
+            });
+            expect(result.listeners).toEqual({
+                [EmbedEvent.Init]: onInit,
+                [EmbedEvent.AuthInit]: onAuthInit,
+                [EmbedEvent.QueryChanged]: onQueryChanged,
+            });
+        });
+    });
+});

package/src/react/util.ts

@@ -24,10 +24,10 @@ export function getViewPropsAndListeners<
     return Object.keys(props).reduce(
         (accu, key) => {
             if (key.startsWith('on')) {
-                const eventName = key.substr(2);
-                accu.listeners[EmbedEvent[eventName]] = props[key];
+                const eventName = key.substr(2) as any;
+                (accu.listeners as any)[EmbedEvent[eventName as keyof typeof EmbedEvent] as any] = props[key as keyof T];
             } else {
-                accu.viewConfig[key] = props[key];
+                (accu.viewConfig as any)[key] = props[key as keyof T];
             }
             return accu;
         },