@thoughtspot/visual-embed-sdk 1.42.0 → 1.42.1-alpha.2

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

@@ -61,6 +61,14 @@ import { UIPassthroughEvent } from './hostEventClient/contracts';
 import * as sessionInfoService from '../utils/sessionInfoService';
 import * as authToken from '../authToken';
 
+// Mock api-intercept by default to avoid altering existing APP_INIT payload
+// expectations
+jest.mock('../api-intercept', () => ({
+    getInterceptInitData: jest.fn(() => ({})),
+    handleInterceptEvent: jest.fn(),
+    processLegacyInterceptResponse: jest.fn((x: any) => x),
+}));
+
 jest.mock('../utils/processTrigger');
 
 const mockProcessTrigger = processTrigger as jest.Mock;
@@ -1045,7 +1053,7 @@ describe('Unit test case for ts embed', () => {
                 type: EmbedEvent.APP_INIT,
                 data: {},
             };
-            
+
             // Create a SearchEmbed with valid custom actions to test
             // CustomActionsValidationResult
             const searchEmbed = new SearchEmbed(getRootEl(), {
@@ -1067,7 +1075,7 @@ describe('Unit test case for ts embed', () => {
                     }
                 ]
             });
-            
+
             searchEmbed.render();
             const mockPort: any = {
                 postMessage: jest.fn(),
@@ -1116,7 +1124,7 @@ describe('Unit test case for ts embed', () => {
                         customVariablesForThirdPartyTools: {},
                     },
                 });
-                
+
                 // Verify that CustomActionsValidationResult structure is
                 // correct
                 const appInitData = mockPort.postMessage.mock.calls[0][0].data;
@@ -1137,7 +1145,7 @@ describe('Unit test case for ts embed', () => {
                         })
                     ])
                 );
-                
+
                 // Verify actions are sorted by name (alphabetically)
                 expect(appInitData.customActions[0].name).toBe('Another Valid Action');
                 expect(appInitData.customActions[1].name).toBe('Valid Action');
@@ -2488,7 +2496,7 @@ describe('Unit test case for ts embed', () => {
         });
 
         afterAll((): void => {
-            window.location = location as any;
+            (window.location as any) = location;
         });
 
         it('get url params for TS', () => {
@@ -3345,4 +3353,212 @@ 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();
+        });
+    });
+});
+
+describe('API Intercept integration in TsEmbed', () => {
+    beforeEach(() => {
+        document.body.innerHTML = getDocumentBody();
+        jest.clearAllMocks();
+    });
+
+    test('APP_INIT includes API intercept init data when enabled', async () => {
+        init({
+            thoughtSpotHost: 'tshost',
+            authType: AuthType.None,
+            enableApiIntercept: true,
+            interceptTimeout: 1234,
+        } as any);
+
+        // Include intercept setup via viewConfig too
+        const { InterceptedApiType } = require('../types');
+
+        // Override mocked getInterceptInitData for this test only
+        const apiInterceptModule = require('../api-intercept');
+        apiInterceptModule.getInterceptInitData.mockReturnValue({
+            enableApiIntercept: true,
+            interceptTimeout: 1234,
+            interceptUrls: [
+                'http://tshost/prism/?op=CreateAnswerSession',
+                'http://tshost/prism/?op=GetV2SourceDetail',
+                'http://tshost/custom/path',
+            ],
+        });
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            enableApiIntercept: true,
+            interceptUrls: [InterceptedApiType.METADATA, '/custom/path'],
+        } as any);
+
+        searchEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        const mockEmbedEventPayload = { type: EmbedEvent.APP_INIT, data: {} };
+
+        await executeAfterWait(() => {
+            const iframe = getIFrameEl();
+            postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+        });
+
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: EmbedEvent.APP_INIT,
+                    data: expect.objectContaining({
+                        enableApiIntercept: true,
+                        interceptTimeout: 1234,
+                        interceptUrls: expect.arrayContaining([
+                            expect.stringContaining('CreateAnswerSession'),
+                            expect.stringContaining('GetV2SourceDetail'),
+                            expect.stringContaining('custom/path'),
+                        ]),
+                    }),
+                }),
+            );
+        });
+    });
+
+    test('ApiIntercept event delegates to handleInterceptEvent and bypasses default callbacks', async () => {
+        init({ thoughtSpotHost: 'tshost', authType: AuthType.None } as any);
+
+        const apiInterceptModule = require('../api-intercept');
+        const handleInterceptSpy = jest.spyOn(apiInterceptModule, 'handleInterceptEvent').mockResolvedValue(undefined);
+
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            enableApiIntercept: true,
+        } as any);
+
+        const apiCb = jest.fn();
+        searchEmbed.on(EmbedEvent.ApiIntercept as any, apiCb as any);
+
+        searchEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        const eventPayload = {
+            type: EmbedEvent.ApiIntercept,
+            data: JSON.stringify({ input: '/prism/?op=GetChartWithData', init: { body: '{}' } }),
+        };
+
+        await executeAfterWait(() => {
+            const iframe = getIFrameEl();
+            postMessageToParent(iframe.contentWindow, eventPayload, mockPort);
+        });
+
+        await executeAfterWait(() => {
+            expect(handleInterceptSpy).toHaveBeenCalled();
+            expect(apiCb).not.toHaveBeenCalled();
+        });
+    });
 });
+

package/src/embed/ts-embed.ts

@@ -71,6 +71,7 @@ import { getEmbedConfig } from './embedConfig';
 import { ERROR_MESSAGE } from '../errors';
 import { getPreauthInfo } from '../utils/sessionInfoService';
 import { HostEventClient } from './hostEventClient/host-event-client';
+import { getInterceptInitData, handleInterceptEvent, processLegacyInterceptResponse } from '../api-intercept';
 
 const { version } = pkgInfo;
 
@@ -201,7 +202,7 @@ export class TsEmbed {
         });
         const embedConfig = getEmbedConfig();
         this.embedConfig = embedConfig;
-    
+
         this.hostEventClient = new HostEventClient(this.iFrame);
         this.isReadyForRenderPromise = getInitPromise().then(async () => {
             if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
@@ -312,31 +313,11 @@ 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();
-        const messageEventListener = (event: MessageEvent<any>) => {
-            const eventType = this.getEventType(event);
-            const eventPort = this.getEventPort(event);
-            const eventData = this.formatEventData(event, eventType);
-            if (event.source === this.iFrame.contentWindow) {
-                this.executeCallbacks(
-                    eventType,
-                    processEventData(
-                        eventType,
-                        eventData,
-                        this.thoughtSpotHost,
-                        this.isPreRendered ? this.preRenderWrapper : this.el,
-                    ),
-                    eventPort,
-                );
-            }
-        };
-        window.addEventListener('message', messageEventListener);
+    private subscribeToNetworkEvents() {
+        this.unsubscribeToNetworkEvents();
 
         const onlineEventListener = (e: Event) => {
             this.trigger(HostEvent.Reload);
@@ -344,7 +325,7 @@ export class TsEmbed {
         window.addEventListener('online', onlineEventListener);
 
         const offlineEventListener = (e: Event) => {
-            const offlineWarning = 'Network not Detected. Embed is offline. Please reconnect and refresh';
+            const offlineWarning = ERROR_MESSAGE.OFFLINE_WARNING;
             this.executeCallbacks(EmbedEvent.Error, {
                 offlineWarning,
             });
@@ -352,11 +333,84 @@ export class TsEmbed {
         };
         window.addEventListener('offline', offlineEventListener);
 
-        this.subscribedListeners = {
-            message: messageEventListener,
-            online: onlineEventListener,
-            offline: offlineEventListener,
-        };
+        this.subscribedListeners.online = onlineEventListener;
+        this.subscribedListeners.offline = offlineEventListener;
+    }
+
+    private messageEventListener = async (event: MessageEvent<any>) => {
+        const eventType = this.getEventType(event);
+        const eventPort = this.getEventPort(event);
+        const eventData = this.formatEventData(event, eventType);
+        if (event.source === this.iFrame.contentWindow) {
+            const processedEventData = await processEventData(
+                eventType,
+                eventData,
+                this.thoughtSpotHost,
+                this.isPreRendered ? this.preRenderWrapper : this.el,
+            );
+
+            const executeEvent = (_eventType: EmbedEvent, data: any) => {
+                this.executeCallbacks(_eventType, data, eventPort);
+            }
+
+            if (eventType === EmbedEvent.ApiIntercept && this.viewConfig.enableApiIntercept) {
+                const getUnsavedAnswerTml = async (props: { sessionId?: string, vizId?: string }) => {
+                    const response = await this.triggerUIPassThrough(UIPassthroughEvent.GetUnsavedAnswerTML, props);
+                    return response[0]?.value;
+                }
+                handleInterceptEvent({ eventData: processedEventData, executeEvent, embedConfig: this.embedConfig, viewConfig: this.viewConfig, getUnsavedAnswerTml });
+                return;
+            }
+
+            this.executeCallbacks(
+                eventType,
+                processedEventData,
+                eventPort,
+            );
+        }
+    };
+    /**
+     * Subscribe to message events that depend on successful iframe setup
+     */
+    private subscribeToMessageEvents() {
+        this.unsubscribeToMessageEvents();
+
+        window.addEventListener('message', this.messageEventListener);
+
+        this.subscribedListeners.message = this.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();
+    }
+
+
+    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;
+        }
+    }
+
+    private unsubscribeToMessageEvents() {
+        if (this.subscribedListeners.message) {
+            window.removeEventListener('message', this.subscribedListeners.message);
+            delete this.subscribedListeners.message;
+        }
     }
 
     private unsubscribeToEvents() {
@@ -391,7 +445,7 @@ export class TsEmbed {
                 message: customActionsResult.errors,
             });
         }
-        return {
+        const baseInitData = {
             customisations: getCustomisations(this.embedConfig, this.viewConfig),
             authToken,
             runtimeFilterParams: this.viewConfig.excludeRuntimeFiltersfromURL
@@ -410,7 +464,10 @@ export class TsEmbed {
                 this.embedConfig.customVariablesForThirdPartyTools || {},
             hiddenListColumns: this.viewConfig.hiddenListColumns || [],
             customActions: customActionsResult.actions,
+            ...getInterceptInitData(this.embedConfig, this.viewConfig),
         };
+
+        return baseInitData;
     }
 
     protected async getAppInitData() {
@@ -798,6 +855,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) {
@@ -843,7 +903,9 @@ export class TsEmbed {
                             el.remove();
                         });
                     }
-                    this.subscribeToEvents();
+                    // Subscribe to message events only after successful
+                    // auth and iframe setup
+                    this.subscribeToMessageEvents();
                 })
                 .catch((error) => {
                     nextInQueue();
@@ -983,6 +1045,21 @@ export class TsEmbed {
         this.iFrame.style.height = getCssDimension(height);
     }
 
+    protected createEmbedEventResponder = (eventPort: MessagePort | void, eventType: EmbedEvent) => {
+
+        const { enableApiIntercept } = getInterceptInitData(this.embedConfig, this.viewConfig);
+        if (eventType === EmbedEvent.OnBeforeGetVizDataIntercept && enableApiIntercept) {
+            return (payload: any) => {
+                const payloadToSend = processLegacyInterceptResponse(payload);
+                this.triggerEventOnPort(eventPort, payloadToSend);
+            }
+        }
+
+        return (payload: any) => {
+            this.triggerEventOnPort(eventPort, payload);
+        }
+    }
+
     /**
      * Executes all registered event handlers for a particular event type
      * @param eventType The event type
@@ -1007,9 +1084,8 @@ export class TsEmbed {
                 // payload
                 || (!callbackObj.options.start && dataStatus === embedEventStatus.END)
             ) {
-                callbackObj.callback(data, (payload) => {
-                    this.triggerEventOnPort(eventPort, payload);
-                });
+                const responder = this.createEmbedEventResponder(eventPort, eventType);
+                callbackObj.callback(data, responder);
             }
         });
     }
@@ -1151,12 +1227,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;
+    /**
+    * @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
@@ -1243,6 +1319,16 @@ 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);
     }
@@ -1298,7 +1384,7 @@ export class TsEmbed {
         }
         this.isPreRendered = true;
         this.showPreRenderByDefault = showPreRenderByDefault;
-        
+
         const isAlreadyRendered = this.connectPreRendered();
         if (isAlreadyRendered && !replaceExistingPreRender) {
             return this;

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/index.ts

@@ -64,6 +64,7 @@ import {
     ListPageColumns,
     CustomActionsPosition,
     CustomActionTarget,
+    InterceptedApiType,
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { SageEmbed, SageViewConfig } from './embed/sage';
@@ -152,6 +153,7 @@ export {
     DataPanelCustomColumnGroupsAccordionState,
     CustomActionsPosition,
     CustomActionTarget,
+    InterceptedApiType,
 };
 
 export { resetCachedAuthToken } from './authToken';

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

@@ -59,4 +59,5 @@ export {
     resetCachedAuthToken,
     UIPassthroughEvent,
     DataPanelCustomColumnGroupsAccordionState,
+    InterceptedApiType,
 } from '../index';