@thoughtspot/visual-embed-sdk 1.10.0-alpha.3 → 1.10.1

package/src/embed/app.spec.ts

@@ -1,11 +1,12 @@
 import { AppEmbed, AppViewConfig, Page } from './app';
 import { init } from '../index';
-import { Action, AuthType, RuntimeFilterOp } from '../types';
+import { Action, AuthType, HostEvent, RuntimeFilterOp } from '../types';
 import {
     executeAfterWait,
     getDocumentBody,
     getIFrameSrc,
     getRootEl,
+    getIFrameEl,
 } from '../test/test-utils';
 import { version } from '../../package.json';
 import * as config from '../config';
@@ -82,6 +83,7 @@ describe('App embed tests', () => {
             [Page.Liveboards]: 'pinboards',
             [Page.Data]: 'data/tables',
             [Page.Home]: 'home',
+            [Page.SpotIQ]: 'insights/results',
         };
 
         const pageIds = Object.keys(pageRouteMap);
@@ -194,6 +196,52 @@ describe('App embed tests', () => {
             );
         });
 
+        test('navigateToPage with noReload should trigger the appropriate event', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+            });
+            await appEmbed.render();
+
+            const iframe = getIFrameEl();
+            iframe.contentWindow.postMessage = jest.fn();
+            appEmbed.navigateToPage(path, true);
+
+            expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: HostEvent.Navigate,
+                    data: path,
+                }),
+                `http://${thoughtSpotHost}`,
+            );
+
+            appEmbed.navigateToPage(-1, true);
+            expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: HostEvent.Navigate,
+                    data: -1,
+                }),
+                `http://${thoughtSpotHost}`,
+            );
+        });
+
+        test('Do not allow number path without noReload in navigateToPage', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+            });
+            await appEmbed.render();
+            spyOn(console, 'warn');
+            appEmbed.navigateToPage(-1);
+            expect(console.warn).toHaveBeenCalledWith(
+                'Path can only by a string when triggered without noReload',
+            );
+        });
+
         test('navigateToPage function use before render', async () => {
             spyOn(console, 'log');
             const appEmbed = new AppEmbed(getRootEl(), {

package/src/embed/app.ts

@@ -10,7 +10,7 @@
  */
 
 import { getFilterQuery, getQueryParamString } from '../utils';
-import { Param, RuntimeFilter, DOMSelector } from '../types';
+import { Param, RuntimeFilter, DOMSelector, HostEvent } from '../types';
 import { V1Embed, ViewConfig } from './ts-embed';
 
 /**
@@ -194,19 +194,31 @@ export class AppEmbed extends V1Embed {
     /**
      * Navigate to particular page for app embed. eg:answers/pinboards/home
      * This is used for embedding answers, pinboards, visualizations and full application only.
-     * @param path The string, set to iframe src and navigate to new page
+     * @param path string | number The string, set to iframe src and navigate to new page
      * eg: appEmbed.navigateToPage('pinboards')
+     * When used with `noReload` this can also be a number like 1/-1 to go forward/back.
+     * @param noReload boolean Trigger the navigation without reloading the page (version: 1.12.0 | 8.4.0.cl)
      */
-    public navigateToPage(path: string): void {
-        if (this.iFrame) {
+    public navigateToPage(path: string | number, noReload = false): void {
+        if (!this.iFrame) {
+            console.log('Please call render before invoking this method');
+            return;
+        }
+        if (noReload) {
+            this.trigger(HostEvent.Navigate, path);
+        } else {
+            if (typeof path !== 'string') {
+                console.warn(
+                    'Path can only by a string when triggered without noReload',
+                );
+                return;
+            }
             const iframeSrc = this.iFrame.src;
             const embedPath = '#/embed';
             const currentPath = iframeSrc.includes(embedPath) ? embedPath : '#';
             this.iFrame.src = `${
                 iframeSrc.split(currentPath)[0]
             }${currentPath}/${path.replace(/^\/?#?\//, '')}`;
-        } else {
-            console.log('Please call render before invoking this method');
         }
     }
 

package/src/embed/base.spec.ts

@@ -1,4 +1,7 @@
+import EventEmitter from 'eventemitter3';
+import * as auth from '../auth';
 import * as index from '../index';
+import * as base from './base';
 import {
     executeAfterWait,
     getAllIframeEl,
@@ -9,10 +12,11 @@ import {
 } from '../test/test-utils';
 
 const thoughtSpotHost = 'tshost';
+let authEE: EventEmitter;
 
 describe('Base TS Embed', () => {
     beforeAll(() => {
-        index.init({
+        authEE = index.init({
             thoughtSpotHost,
             authType: index.AuthType.None,
         });
@@ -38,10 +42,12 @@ describe('Base TS Embed', () => {
             },
             '*',
         );
-
-        jest.spyOn(window, 'alert').mockImplementation(() => {
+        jest.spyOn(window, 'alert').mockReset();
+        jest.spyOn(window, 'alert').mockImplementation(() => undefined);
+        authEE.on(auth.AuthStatus.FAILURE, (reason) => {
+            expect(reason).toEqual(auth.AuthFailureType.NO_COOKIE_ACCESS);
             expect(window.alert).toBeCalledWith(
-                'Third party cookie access is blocked on this browser, please allow third party cookies for ThoughtSpot to work properly',
+                'Third party cookie access is blocked on this browser, please allow third party cookies for this to work properly. \nYou can use `suppressNoCookieAccessAlert` to suppress this message.',
             );
             done();
         });
@@ -92,4 +98,50 @@ describe('Base TS Embed', () => {
             expect(getIFrameSrc()).toContain('disableLoginRedirect=true');
         });
     });
+
+    test('handleAuth notifies for SDK auth failure', (done) => {
+        jest.spyOn(auth, 'authenticate').mockResolvedValue(false);
+        const authEmitter = index.init({
+            thoughtSpotHost,
+            authType: index.AuthType.Basic,
+            username: 'test',
+            password: 'test',
+        });
+        authEmitter.on(auth.AuthStatus.FAILURE, (reason) => {
+            expect(reason).toBe(auth.AuthFailureType.SDK);
+            done();
+        });
+    });
+
+    test('Logout method should disable autoLogin', () => {
+        jest.spyOn(window, 'fetch').mockResolvedValue({
+            type: 'opaque',
+        });
+        index.init({
+            thoughtSpotHost,
+            authType: index.AuthType.None,
+            autoLogin: true,
+        });
+        index.logout();
+        expect(window.fetch).toHaveBeenCalledWith(
+            `http://${thoughtSpotHost}${auth.EndPoints.LOGOUT}`,
+            {
+                credentials: 'include',
+                mode: 'no-cors',
+                method: 'POST',
+            },
+        );
+        expect(base.getEmbedConfig().autoLogin).toBe(false);
+    });
+});
+
+describe('Base without init', () => {
+    test('notify should error when called without init', () => {
+        base.reset();
+        jest.spyOn(global.console, 'error').mockImplementation(() => undefined);
+        base.notifyAuthSuccess();
+        base.notifyAuthFailure(auth.AuthFailureType.SDK);
+        base.notifyLogout();
+        expect(global.console.error).toHaveBeenCalledTimes(3);
+    });
 });

package/src/embed/base.ts

@@ -7,31 +7,72 @@
  * @summary Base classes
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
+import EventEmitter from 'eventemitter3';
 import { getThoughtSpotHost } from '../config';
-import { EmbedConfig } from '../types';
-import { authenticate } from '../auth';
+import { AuthType, EmbedConfig } from '../types';
+import {
+    authenticate,
+    logout as _logout,
+    AuthFailureType,
+    AuthStatus,
+} from '../auth';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 
 let config = {} as EmbedConfig;
+const CONFIG_DEFAULTS: Partial<EmbedConfig> = {
+    loginFailedMessage: 'Not logged in',
+    authType: AuthType.None,
+};
+
+export let authPromise: Promise<boolean>;
+
+export const getEmbedConfig = (): EmbedConfig => config;
+
+export const getAuthPromise = (): Promise<boolean> => authPromise;
 
-export let authPromise: Promise<void>;
+let authEE: EventEmitter;
 
+export function notifyAuthSuccess(): void {
+    if (!authEE) {
+        console.error('SDK not initialized');
+        return;
+    }
+    authEE.emit(AuthStatus.SUCCESS);
+}
+
+export function notifyAuthFailure(failureType: AuthFailureType): void {
+    if (!authEE) {
+        console.error('SDK not initialized');
+        return;
+    }
+    authEE.emit(AuthStatus.FAILURE, failureType);
+}
+
+export function notifyLogout(): void {
+    if (!authEE) {
+        console.error('SDK not initialized');
+        return;
+    }
+    authEE.emit(AuthStatus.LOGOUT);
+}
 /**
  * Perform authentication on the ThoughtSpot app as applicable.
  */
-export const handleAuth = (): Promise<void> => {
-    const authConfig = {
-        ...config,
-        thoughtSpotHost: getThoughtSpotHost(config),
-    };
-    authPromise = authenticate(authConfig);
+export const handleAuth = (): Promise<boolean> => {
+    authPromise = authenticate(config);
+    authPromise.then(
+        (isLoggedIn) => {
+            if (!isLoggedIn) {
+                notifyAuthFailure(AuthFailureType.SDK);
+            }
+        },
+        () => {
+            notifyAuthFailure(AuthFailureType.SDK);
+        },
+    );
     return authPromise;
 };
 
-export const getEmbedConfig = (): EmbedConfig => config;
-
-export const getAuthPromise = (): Promise<void> => authPromise;
-
 /**
  * Prefetches static resources from the specified URL. Web browsers can then cache the prefetched resources and serve them from the user's local disk to provide faster access to your app.
  * @param url The URL provided for prefetch
@@ -59,8 +100,13 @@ export const prefetch = (url?: string): void => {
  *
  * @returns authPromise Promise which resolves when authentication is complete.
  */
-export const init = (embedConfig: EmbedConfig): Promise<void> => {
-    config = embedConfig;
+export const init = (embedConfig: EmbedConfig): EventEmitter => {
+    config = {
+        ...CONFIG_DEFAULTS,
+        ...embedConfig,
+        thoughtSpotHost: getThoughtSpotHost(embedConfig),
+    };
+    authEE = new EventEmitter();
     handleAuth();
 
     uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_CALLED_INIT, {
@@ -71,7 +117,21 @@ export const init = (embedConfig: EmbedConfig): Promise<void> => {
     if (config.callPrefetch) {
         prefetch(config.thoughtSpotHost);
     }
-    return authPromise;
+    return authEE;
+};
+
+export function disableAutoLogin(): void {
+    config.autoLogin = false;
+}
+
+export const logout = (doNotDisableAutoLogin = false): Promise<boolean> => {
+    if (!doNotDisableAutoLogin) {
+        disableAutoLogin();
+    }
+    return _logout(config).then((isLoggedIn) => {
+        notifyLogout();
+        return isLoggedIn;
+    });
 };
 
 let renderQueue: Promise<any> = Promise.resolve();
@@ -89,3 +149,10 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => void) => {
         fn(() => {}); // eslint-disable-line @typescript-eslint/no-empty-function
     }
 };
+
+// For testing purposes only
+export function reset(): void {
+    config = {} as any;
+    authEE = null;
+    authPromise = null;
+}

package/src/embed/embed.spec.ts

@@ -71,7 +71,7 @@ describe('Custom CSS Url', () => {
         document.body.innerHTML = getDocumentBody();
     });
 
-    test.only('passing customCssUrl should set the correct query params on the iframe', async (done) => {
+    test('passing customCssUrl should set the correct query params on the iframe', async (done) => {
         init({
             thoughtSpotHost,
             authType: AuthType.None,

package/src/embed/events.spec.ts

@@ -5,6 +5,7 @@ import {
     SearchEmbed,
     PinboardEmbed,
     LiveboardEmbed,
+    AppEmbed,
     HostEvent,
 } from '../index';
 import {
@@ -247,4 +248,35 @@ describe('test communication between host app and ThoughtSpot', () => {
         };
         expect(mockPort.postMessage).toHaveBeenCalledWith(heightObj);
     });
+    test('ALL event listener should fire for all events with the event type set correctly', async () => {
+        const embed = new AppEmbed(getRootEl(), defaultViewConfig);
+        const spy = jest.fn();
+        embed.on(EmbedEvent.ALL, spy);
+        embed.render();
+
+        await executeAfterWait(() => {
+            const iframe = getIFrameEl();
+            postMessageToParent(iframe.contentWindow, {
+                type: EmbedEvent.CustomAction,
+                data: PAYLOAD,
+            });
+            postMessageToParent(iframe.contentWindow, {
+                type: EmbedEvent.DialogOpen,
+            });
+        });
+
+        await executeAfterWait(() => {
+            expect(spy).toHaveBeenCalledTimes(3);
+            expect(spy.mock.calls[0][0]).toMatchObject({
+                type: EmbedEvent.Init,
+            });
+            expect(spy.mock.calls[1][0]).toMatchObject({
+                type: EmbedEvent.CustomAction,
+                data: PAYLOAD,
+            });
+            expect(spy.mock.calls[2][0]).toMatchObject({
+                type: EmbedEvent.DialogOpen,
+            });
+        }, EVENT_WAIT_TIME);
+    });
 });

package/src/embed/search.ts

@@ -49,6 +49,10 @@ export interface SearchViewConfig extends ViewConfig {
      * using raw answer data.
      */
     hideResults?: boolean;
+    /**
+     * If set to true, expands all the data sources panel.
+     */
+    expandAllDataSource?: boolean;
     /**
      * If set to true, the Search Assist feature is enabled.
      */
@@ -126,6 +130,7 @@ export class SearchEmbed extends TsEmbed {
     private getIFrameSrc(answerId: string, dataSources?: string[]) {
         const {
             hideResults,
+            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,

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

@@ -165,15 +165,16 @@ describe('Unit test case for ts embed', () => {
         });
     });
 
-    describe('when thoughtSpotHost have value and authPromise return success response', () => {
+    describe('when thoughtSpotHost have value and authPromise return response true/false', () => {
         beforeAll(() => {
             init({
                 thoughtSpotHost,
                 authType: AuthType.None,
+                loginFailedMessage: 'Failed to Login',
             });
         });
 
-        beforeEach(() => {
+        const setup = async (isLoggedIn = false) => {
             jest.spyOn(window, 'addEventListener').mockImplementationOnce(
                 (event, handler, options) => {
                     handler({
@@ -186,10 +187,9 @@ describe('Unit test case for ts embed', () => {
                 },
             );
             const iFrame: any = document.createElement('div');
-            jest.spyOn(
-                baseInstance,
-                'getAuthPromise',
-            ).mockResolvedValueOnce(() => Promise.resolve());
+            jest.spyOn(baseInstance, 'getAuthPromise').mockResolvedValueOnce(
+                isLoggedIn,
+            );
             const tsEmbed = new SearchEmbed(getRootEl(), {});
             iFrame.contentWindow = null;
             tsEmbed.on(EmbedEvent.CustomAction, jest.fn());
@@ -199,10 +199,11 @@ describe('Unit test case for ts embed', () => {
                 },
             );
             jest.spyOn(document, 'createElement').mockReturnValueOnce(iFrame);
-            tsEmbed.render();
-        });
+            await tsEmbed.render();
+        };
 
-        test('mixpanel should call with VISUAL_SDK_RENDER_COMPLETE', () => {
+        test('mixpanel should call with VISUAL_SDK_RENDER_COMPLETE', async () => {
+            await setup(true);
             expect(mockMixPanelEvent).toBeCalledWith(
                 MIXPANEL_EVENT.VISUAL_SDK_RENDER_START,
             );
@@ -212,11 +213,20 @@ describe('Unit test case for ts embed', () => {
         });
 
         test('Should remove prefetch iframe', async () => {
+            await setup(true);
             const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>(
                 '.prefetchIframe',
             );
             expect(prefetchIframe.length).toBe(0);
         });
+
+        test('Should render failure when login fails', async (done) => {
+            setup(false);
+            executeAfterWait(() => {
+                expect(getRootEl().innerHTML).toContain('Failed to Login');
+                done();
+            });
+        });
     });
 
     describe('when thoughtSpotHost have value and authPromise return error', () => {

package/src/embed/ts-embed.ts

@@ -34,7 +34,7 @@ import {
     MessageCallbackObj,
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
-import { getProcessData } from '../utils/processData';
+import { processEventData } from '../utils/processData';
 import { processTrigger } from '../utils/processTrigger';
 import pkgInfo from '../../package.json';
 import { getAuthPromise, getEmbedConfig, renderInQueue } from './base';
@@ -212,14 +212,6 @@ export class TsEmbed {
         this.isError = false;
         this.viewConfig = viewConfig;
         this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
-        if (!this.embedConfig.suppressNoCookieAccessAlert) {
-            this.on(EmbedEvent.NoCookieAccess, () => {
-                // eslint-disable-next-line no-alert
-                alert(
-                    'Third party cookie access is blocked on this browser, please allow third party cookies for ThoughtSpot to work properly',
-                );
-            });
-        }
     }
 
     /**
@@ -279,9 +271,10 @@ export class TsEmbed {
      * will be removed for ts7.oct.cl
      * @hidden
      */
-    private formatEventData(event: MessageEvent) {
+    private formatEventData(event: MessageEvent, eventType: string) {
         const eventData = {
             ...event.data,
+            type: eventType,
         };
         if (!eventData.data) {
             eventData.data = event.data.payload;
@@ -299,11 +292,16 @@ export class TsEmbed {
         window.addEventListener('message', (event) => {
             const eventType = this.getEventType(event);
             const eventPort = this.getEventPort(event);
-            const eventData = this.formatEventData(event);
+            const eventData = this.formatEventData(event, eventType);
             if (event.source === this.iFrame.contentWindow) {
                 this.executeCallbacks(
                     eventType,
-                    getProcessData(eventType, eventData, this.thoughtSpotHost),
+                    processEventData(
+                        eventType,
+                        eventData,
+                        this.thoughtSpotHost,
+                        this.el,
+                    ),
                     eventPort,
                 );
             }
@@ -457,12 +455,18 @@ export class TsEmbed {
                 data: {
                     timestamp: initTimestamp,
                 },
+                type: EmbedEvent.Init,
             });
 
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
 
             getAuthPromise()
-                ?.then(() => {
+                ?.then((isLoggedIn: boolean) => {
+                    if (!isLoggedIn) {
+                        this.el.innerHTML = this.embedConfig.loginFailedMessage;
+                        return;
+                    }
+
                     uploadMixpanelEvent(
                         MIXPANEL_EVENT.VISUAL_SDK_RENDER_COMPLETE,
                     );
@@ -490,7 +494,7 @@ export class TsEmbed {
                         frameWidth || DEFAULT_EMBED_WIDTH,
                     );
                     const height = getCssDimension(
-                        frameWidth || DEFAULT_EMBED_HEIGHT,
+                        frameHeight || DEFAULT_EMBED_HEIGHT,
                     );
                     setAttributes(this.iFrame, restParams);
 
@@ -505,6 +509,7 @@ export class TsEmbed {
                             data: {
                                 timestamp: loadTimestamp,
                             },
+                            type: EmbedEvent.Load,
                         });
                         uploadMixpanelEvent(
                             MIXPANEL_EVENT.VISUAL_SDK_IFRAME_LOAD_PERFORMANCE,
@@ -533,6 +538,7 @@ export class TsEmbed {
                     uploadMixpanelEvent(
                         MIXPANEL_EVENT.VISUAL_SDK_RENDER_FAILED,
                     );
+                    this.el.innerHTML = this.embedConfig.loginFailedMessage;
                     this.handleError(error);
                 });
         });
@@ -558,6 +564,8 @@ export class TsEmbed {
         eventPort?: MessagePort | void,
     ): void {
         const callbacks = this.eventHandlerMap.get(eventType) || [];
+        const allHandlers = this.eventHandlerMap.get(EmbedEvent.ALL) || [];
+        callbacks.push(...allHandlers);
         const dataStatus = data?.status || embedEventStatus.END;
         callbacks.forEach((callbackObj) => {
             if (
@@ -760,9 +768,10 @@ export class V1Embed extends TsEmbed {
     public on(
         messageType: EmbedEvent,
         callback: MessageCallback,
+        options: MessageOptions = { start: false },
     ): typeof TsEmbed.prototype {
         const eventType = this.getCompatibleEventType(messageType);
 
-        return super.on(eventType, callback);
+        return super.on(eventType, callback, options);
     }
 }

package/src/index.ts

@@ -9,13 +9,14 @@
  */
 
 import { AppEmbed, Page, AppViewConfig } from './embed/app';
-import { init, prefetch } from './embed/base';
+import { init, prefetch, logout } from './embed/base';
 import {
     PinboardEmbed,
     LiveboardViewConfig,
     LiveboardEmbed,
 } from './embed/liveboard';
 import { SearchEmbed, SearchViewConfig } from './embed/search';
+import { AuthFailureType, AuthStatus } from './auth';
 import {
     AuthType,
     RuntimeFilter,
@@ -29,11 +30,14 @@ import {
 
 export {
     init,
+    logout,
     prefetch,
     SearchEmbed,
     PinboardEmbed,
     LiveboardEmbed,
     AppEmbed,
+    AuthFailureType,
+    AuthStatus,
     // types
     Page,
     AuthType,

package/src/test/test-utils.ts

@@ -14,7 +14,7 @@ type DOMElement = HTMLElement | Document;
 
 export const getRootEl = () => document.getElementById('embed');
 
-export const getRootEl2 = () => document.getElementById('emebed-2');
+export const getRootEl2 = () => document.getElementById('embed-2');
 
 export const getIFrameEl = (container: DOMElement = document) =>
     container.querySelector('iframe');