@thoughtspot/visual-embed-sdk 1.10.0-alpha.2 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.10.0-alpha.2",
+    "version": "1.10.0",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -32,7 +32,7 @@
         "test-sdk": "jest -c jest.config.sdk.js",
         "test-docs": "jest -c jest.config.docs.js",
         "test": "npm run test-sdk && npm run test-docs && npx istanbul-merge --out ./coverage/coverage.json ./coverage/docs/coverage-final.json ./coverage/sdk/coverage-final.json && npx istanbul report --include ./coverage/coverage.json --dir ./coverage lcov",
-        "posttest": "cat ./coverage/lcov.info | coveralls",
+        "posttest": "cat ./coverage/sdk/lcov.info | coveralls",
         "prepublishOnly": "npm run test; npm run tsc; npm run bundle-dts; npm run build",
         "publish-dev": "npm publish --tag dev",
         "publish-prod": "npm publish --tag latest"

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';
 
 /**
@@ -42,6 +42,10 @@ export enum Page {
      * Data management page
      */
     Data = 'data',
+    /**
+     * SpotIQ listing page
+     */
+    SpotIQ = 'spotiq',
 }
 
 /**
@@ -161,6 +165,8 @@ export class AppEmbed extends V1Embed {
                 return 'pinboards';
             case Page.Data:
                 return 'data/tables';
+            case Page.SpotIQ:
+                return 'insights/results';
             case Page.Home:
             default:
                 return 'home';
@@ -188,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

@@ -5,6 +5,7 @@ import {
     getDocumentBody,
     getRootEl,
     getRootEl2,
+    getIFrameSrc,
 } from '../test/test-utils';
 
 const thoughtSpotHost = 'tshost';
@@ -78,4 +79,17 @@ describe('Base TS Embed', () => {
 
         expect(prefetch).toHaveBeenCalledTimes(0);
     });
+
+    test('Sets the disableLoginRedirect param when autoLogin is true', async () => {
+        index.init({
+            thoughtSpotHost,
+            authType: index.AuthType.None,
+            autoLogin: true,
+        });
+        const tsEmbed = new index.AppEmbed(getRootEl(), {});
+        await tsEmbed.render();
+        await executeAfterWait(() => {
+            expect(getIFrameSrc()).toContain('disableLoginRedirect=true');
+        });
+    });
 });

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

@@ -11,10 +11,12 @@ import {
 } from '../index';
 import { Action } from '../types';
 import {
+    executeAfterWait,
     getDocumentBody,
     getIFrameEl,
     getIFrameSrc,
     getRootEl,
+    postMessageToParent,
 } from '../test/test-utils';
 import * as config from '../config';
 import * as tsEmbedInstance from './ts-embed';
@@ -43,6 +45,126 @@ describe('Unit test case for ts embed', () => {
     beforeEach(() => {
         document.body.innerHTML = getDocumentBody();
     });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('Called Embed event status for start and end', () => {
+        beforeAll(() => {
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+            });
+        });
+
+        test('when Embed event status have start status', (done) => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.Save,
+                data: { answerId: '123' },
+                status: 'start',
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed
+                .on(
+                    EmbedEvent.Save,
+                    (payload) => {
+                        expect(payload).toEqual(mockEmbedEventPayload);
+                        done();
+                    },
+                    { start: true },
+                )
+                .render();
+
+            executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(
+                    iframe.contentWindow,
+                    mockEmbedEventPayload,
+                );
+            });
+        });
+
+        test('should not called post message, when Embed event status have start and start option as false', () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.Save,
+                data: { answerId: '123' },
+                status: 'start',
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed
+                .on(EmbedEvent.Save, () => {
+                    console.log('non callable');
+                })
+                .render();
+
+            executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                iframe.contentWindow.postMessage = jest.fn();
+                postMessageToParent(
+                    iframe.contentWindow,
+                    mockEmbedEventPayload,
+                );
+                expect(iframe.contentWindow.postMessage).toHaveBeenCalledTimes(
+                    0,
+                );
+            });
+        });
+
+        test('when Embed event status have end status', (done) => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.Save,
+                data: { answerId: '123' },
+                status: 'end',
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed
+                .on(EmbedEvent.Save, (payload) => {
+                    expect(payload).toEqual(mockEmbedEventPayload);
+                    done();
+                })
+                .render();
+
+            executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(
+                    iframe.contentWindow,
+                    mockEmbedEventPayload,
+                );
+            }, 1000);
+        });
+
+        test('should not called post message, when Embed event status have end status and start is true', () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.Save,
+                data: { answerId: '123' },
+                status: 'end',
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed
+                .on(
+                    EmbedEvent.Save,
+                    () => {
+                        console.log('non callable');
+                    },
+                    { start: true },
+                )
+                .render();
+
+            executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                iframe.contentWindow.postMessage = jest.fn();
+                postMessageToParent(
+                    iframe.contentWindow,
+                    mockEmbedEventPayload,
+                );
+                expect(iframe.contentWindow.postMessage).toHaveBeenCalledTimes(
+                    0,
+                );
+            }, 1000);
+        });
+    });
+
     describe('when thoughtSpotHost have value and authPromise return success response', () => {
         beforeAll(() => {
             init({
@@ -266,19 +388,6 @@ describe('Unit test case for ts embed', () => {
             );
         });
 
-        test('Set Frame params to the iframe as attributes', async () => {
-            const appEmbed = new AppEmbed(getRootEl(), {
-                frameParams: {
-                    width: '100%',
-                    height: '100%',
-                    allowtransparency: true,
-                },
-            });
-            await appEmbed.render();
-            const iframe = getIFrameEl();
-            expect(iframe.getAttribute('allowtransparency')).toBe('true');
-        });
-
         test('navigateToPage function use before render', async () => {
             spyOn(console, 'log');
             const appEmbed = new AppEmbed(getRootEl(), {
@@ -317,12 +426,26 @@ describe('Unit test case for ts embed', () => {
         });
     });
 
-    describe('additionalFlags config', () => {
+    describe('Iframe flags', () => {
         beforeEach(() => {
             jest.spyOn(config, 'getThoughtSpotHost').mockImplementation(
                 () => 'http://tshost',
             );
         });
+
+        test('Set Frame params to the iframe as attributes', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                    allowtransparency: true,
+                },
+            });
+            await appEmbed.render();
+            const iframe = getIFrameEl();
+            expect(iframe.getAttribute('allowtransparency')).toBe('true');
+        });
+
         it('should set the additional flags correctly on the iframe src', async () => {
             const appEmbed = new AppEmbed(getRootEl(), {
                 frameParams: {
@@ -341,6 +464,35 @@ describe('Unit test case for ts embed', () => {
                     `&foo=bar&baz=1&bool=true${defaultParamsPost}#/home`,
             );
         });
+
+        it('Sets the showAlerts param', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+                showAlerts: true,
+            });
+            await appEmbed.render();
+            expect(getIFrameSrc()).toBe(
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}` +
+                    `&showAlerts=true${defaultParamsPost}#/home`,
+            );
+        });
+        it('Sets the locale param', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+                locale: 'ja-JP',
+            });
+            await appEmbed.render();
+            expect(getIFrameSrc()).toBe(
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}` +
+                    `&locale=ja-JP${defaultParamsPost}#/home`,
+            );
+        });
     });
 
     describe('validate getThoughtSpotPostUrlParams', () => {

package/src/embed/ts-embed.ts

@@ -11,6 +11,7 @@ import {
     getEncodedQueryParamsString,
     getCssDimension,
     getOffsetTop,
+    embedEventStatus,
     setAttributes,
 } from '../utils';
 import {
@@ -29,6 +30,8 @@ import {
     RuntimeFilter,
     Param,
     EmbedConfig,
+    MessageOptions,
+    MessageCallbackObj,
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { getProcessData } from '../utils/processData';
@@ -116,15 +119,28 @@ export interface ViewConfig {
      * @version 1.6.0 or later
      */
     visibleActions?: Action[];
+    /**
+     * Show alert messages and toast messages in the embedded view.
+     * @version 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    showAlerts?: boolean;
     /**
      * The list of runtime filters to apply to a search answer,
      * visualization, or Liveboard.
      */
     runtimeFilters?: RuntimeFilter[];
+    /**
+     * The locale/language to use for the embedded view.
+     * @version 1.9.4 or later
+     */
+    locale?: string;
     /**
      * This is an object (key/val) of override flags which will be applied
      * to the internal embedded object. This can be used to add any
      * URL flag.
+     * Warning: This option is for advanced use only and is used internally
+     * to control embed behavior in non-regular ways. We do not publish the
+     * list of supported keys and values associated with each.
      * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     additionalFlags?: { [key: string]: string | number | boolean };
@@ -166,7 +182,7 @@ export class TsEmbed {
      * by the embedded app; multiple event handlers can be registered
      * against a particular message type.
      */
-    private eventHandlerMap: Map<string, MessageCallback[]>;
+    private eventHandlerMap: Map<string, MessageCallbackObj[]>;
 
     /**
      * A flag that is set to true post render.
@@ -263,9 +279,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;
@@ -283,7 +300,7 @@ 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,
@@ -335,10 +352,11 @@ export class TsEmbed {
         queryParams[Param.ViewPortHeight] = window.innerHeight;
         queryParams[Param.ViewPortWidth] = window.innerWidth;
         queryParams[Param.Version] = version;
-        if (this.embedConfig.disableLoginRedirect === true) {
-            queryParams[
-                Param.DisableLoginRedirect
-            ] = this.embedConfig.disableLoginRedirect;
+        if (
+            this.embedConfig.disableLoginRedirect === true ||
+            this.embedConfig.autoLogin === true
+        ) {
+            queryParams[Param.DisableLoginRedirect] = true;
         }
         if (this.embedConfig.customCssUrl) {
             queryParams[Param.CustomCSSUrl] = this.embedConfig.customCssUrl;
@@ -349,7 +367,9 @@ export class TsEmbed {
             disabledActionReason,
             hiddenActions,
             visibleActions,
+            showAlerts,
             additionalFlags,
+            locale,
         } = this.viewConfig;
 
         if (Array.isArray(visibleActions) && Array.isArray(hiddenActions)) {
@@ -371,6 +391,12 @@ export class TsEmbed {
         if (Array.isArray(visibleActions)) {
             queryParams[Param.VisibleActions] = visibleActions;
         }
+        if (showAlerts !== undefined) {
+            queryParams[Param.ShowAlerts] = showAlerts;
+        }
+        if (locale !== undefined) {
+            queryParams[Param.Locale] = locale;
+        }
         if (additionalFlags && additionalFlags.constructor.name === 'Object') {
             Object.assign(queryParams, additionalFlags);
         }
@@ -432,6 +458,7 @@ export class TsEmbed {
                 data: {
                     timestamp: initTimestamp,
                 },
+                type: EmbedEvent.Init,
             });
 
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
@@ -480,6 +507,7 @@ export class TsEmbed {
                             data: {
                                 timestamp: loadTimestamp,
                             },
+                            type: EmbedEvent.Load,
                         });
                         uploadMixpanelEvent(
                             MIXPANEL_EVENT.VISUAL_SDK_IFRAME_LOAD_PERFORMANCE,
@@ -533,11 +561,21 @@ export class TsEmbed {
         eventPort?: MessagePort | void,
     ): void {
         const callbacks = this.eventHandlerMap.get(eventType) || [];
-        callbacks.forEach((callback) =>
-            callback(data, (payload) => {
-                this.triggerEventOnPort(eventPort, payload);
-            }),
-        );
+        const allHandlers = this.eventHandlerMap.get(EmbedEvent.ALL) || [];
+        callbacks.push(...allHandlers);
+        const dataStatus = data?.status || embedEventStatus.END;
+        callbacks.forEach((callbackObj) => {
+            if (
+                (callbackObj.options.start &&
+                    dataStatus === embedEventStatus.START) || // When start status is true it trigger only start releated payload
+                (!callbackObj.options.start &&
+                    dataStatus === embedEventStatus.END) // When start status is false it trigger only end releated payload
+            ) {
+                callbackObj.callback(data, (payload) => {
+                    this.triggerEventOnPort(eventPort, payload);
+                });
+            }
+        });
     }
 
     /**
@@ -604,20 +642,21 @@ export class TsEmbed {
      * sends an event of a particular message type to the host application.
      *
      * @param messageType The message type
-     * @param callback A callback function
+     * @param callback A callback as a function
+     * @param options The message options
      */
     public on(
         messageType: EmbedEvent,
         callback: MessageCallback,
+        options: MessageOptions = { start: false },
     ): typeof TsEmbed.prototype {
         if (this.isRendered) {
             this.handleError(
                 'Please register event handlers before calling render',
             );
         }
-
         const callbacks = this.eventHandlerMap.get(messageType) || [];
-        callbacks.push(callback);
+        callbacks.push({ options, callback });
         this.eventHandlerMap.set(messageType, callbacks);
         return this;
     }
@@ -726,9 +765,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);
     }
 }