@thoughtspot/visual-embed-sdk 1.28.0-alpha.2 → 1.28.0-alpha.5

package/src/embed/search.ts

@@ -8,7 +8,11 @@
  */
 
 import {
-    DataSourceVisualMode, DOMSelector, Param, Action, ViewConfig,
+    DataSourceVisualMode,
+    DOMSelector,
+    Param,
+    Action,
+    ViewConfig,
 } from '../types';
 import {
     getQueryParamString,
@@ -57,27 +61,74 @@ export interface SearchViewConfig
     /**
      * If set to true, the data sources panel is collapsed on load,
      * but can be expanded manually.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    collapseDataSources:true,
+     * })
+     * ```
      */
     collapseDataSources?: boolean;
     /**
      * Show or hide the data sources panel.
+     *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideDataSources:true,
+     * })
+     * ```
      */
     hideDataSources?: boolean;
     /**
      * Show or hide the charts and tables in search answers.
      * This attribute can be used to create a custom visualization
      * using raw answer data.
+     *
+     * @version: SDK: 1.2.0 | ThoughtSpot: 9.1.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideResults:true,
+     * })
+     * ```
      */
     hideResults?: boolean;
     /**
      * If set to true, the Search Assist feature is enabled.
      *
      * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl, 8.8.1-sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    enableSearchAssist:true,
+     * })
+     * ```
      */
     enableSearchAssist?: boolean;
     /**
      * If set to true, the tabular view is set as the default
      * format for presenting search data.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    forceTable:true,
+     * })
      */
     forceTable?: boolean;
     /**
@@ -85,12 +136,28 @@ export interface SearchViewConfig
      * Only a single data source is supported currently.
      *
      * @deprecated Use `dataSource` instead.
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSources:['id-234','id-456'],
+     * })
+     * ```
      */
     dataSources?: string[];
     /**
      * The array of data source GUIDs to set on load.
      *
      * @version: SDK: 1.19.0
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataSource:'id-234',
+     * })
+     * ```
      */
     dataSource?: string;
     /**
@@ -123,6 +190,16 @@ export interface SearchViewConfig
     searchOptions?: SearchOptions;
     /**
      * The GUID of a saved answer to load initially.
+     *
+     * @version: SDK: 1.1.0 | ThoughtSpot: 8.1.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    answerId:'sed-1234',
+     * })
+     * ```
      */
     answerId?: string;
     /**
@@ -130,6 +207,14 @@ export interface SearchViewConfig
      * The chart/table should still be visible.
      *
      * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.5.0.sw
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideSearchBar:true,
+     * })
+     * ```
      */
     hideSearchBar?: boolean;
     /**
@@ -137,6 +222,14 @@ export interface SearchViewConfig
      *
      * @default false
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     *
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataPanelV2:false,
+     * })
+     * ```
      */
     dataPanelV2?: boolean;
     /**
@@ -196,7 +289,7 @@ export class SearchEmbed extends TsEmbed {
             runtimeFilters,
             dataSource,
             dataSources,
-            excludeRuntimeFiltersfromURL,
+            excludeRuntimeFiltersfromURL = true,
             hideSearchBar,
             dataPanelV2 = false,
             useLastSelectedSources = false,
@@ -281,18 +374,18 @@ export class SearchEmbed extends TsEmbed {
     /**
      * Render the embedded ThoughtSpot search
      */
-    public render(): SearchEmbed {
+    public async render(): Promise<SearchEmbed> {
         super.render();
         const { answerId } = this.viewConfig;
 
         const src = this.getIFrameSrc();
-        this.renderIFrame(src);
+        await this.renderIFrame(src);
         getAuthPromise().then(() => {
             if (
                 checkReleaseVersionInBeta(
                     getReleaseVersion(),
                     getEmbedConfig().suppressSearchEmbedBetaWarning
-                    || getEmbedConfig().suppressErrorAlerts,
+                        || getEmbedConfig().suppressErrorAlerts,
                 )
             ) {
                 alert(ERROR_MESSAGE.SEARCHEMBED_BETA_WRANING_MESSAGE);

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

@@ -0,0 +1,39 @@
+import {
+    init, AuthType, LiveboardEmbed, HostEvent,
+} from '../index';
+import {
+    executeAfterWait,
+    getDocumentBody,
+    getIFrameEl,
+    getRootEl,
+} from '../test/test-utils';
+
+describe('Trigger', () => {
+    beforeEach(() => {
+        document.body.innerHTML = getDocumentBody();
+    });
+    test('should trigger the event', async (done) => {
+        init({
+            thoughtSpotHost: 'https://tshost',
+            authType: AuthType.None,
+        });
+        const lb = new LiveboardEmbed(getRootEl(), {
+            frameParams: {
+                width: '100%',
+                height: '100%',
+            },
+            liveboardId: '123',
+        });
+        const val = await lb.render();
+        const iframe = getIFrameEl();
+        jest.spyOn(iframe.contentWindow, 'postMessage');
+        executeAfterWait(() => {
+            lb.trigger(HostEvent.DownloadAsCsv, { vizId: 'testId' });
+            expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(expect.objectContaining({
+                type: HostEvent.DownloadAsCsv,
+                data: { vizId: 'testId' },
+            }), 'https://tshost', expect.anything());
+            done();
+        });
+    });
+});

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

@@ -11,7 +11,7 @@ import {
     LiveboardEmbed,
 } from '../index';
 import {
-    Action, HomeLeftNavItem, RuntimeFilter, RuntimeFilterOp, HomepageModule,
+    Action, HomeLeftNavItem, RuntimeFilter, RuntimeFilterOp, HomepageModule, HostEvent,
 } from '../types';
 import {
     executeAfterWait,
@@ -24,6 +24,7 @@ import {
     waitFor,
     expectUrlMatchesWithParams,
     mockMessageChannel,
+    createRootEleForEmbed,
 } from '../test/test-utils';
 import * as config from '../config';
 import * as tsEmbedInstance from './ts-embed';
@@ -47,15 +48,6 @@ const tabId2 = 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0';
 const thoughtSpotHost = 'tshost';
 const defaultParamsPost = '';
 
-const createRootEleForEmbed = () => {
-    const rootEle = document.createElement('div');
-    rootEle.id = 'myRoot';
-    const tsEmbedDiv = document.createElement('div');
-    tsEmbedDiv.id = 'tsEmbedDiv';
-    rootEle.appendChild(tsEmbedDiv);
-    document.body.appendChild(rootEle);
-};
-
 beforeAll(() => {
     spyOn(window, 'alert');
 });
@@ -317,6 +309,46 @@ describe('Unit test case for ts embed', () => {
             });
         });
 
+        test('Runtime filters from view Config should be part of app_init payload when excludeRuntimeFiltersfromURL is undefined', async () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const mockRuntimeFilters: RuntimeFilter[] = [
+                {
+                    columnName: 'color',
+                    operator: RuntimeFilterOp.EQ,
+                    values: ['blue'],
+                },
+            ];
+
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                excludeRuntimeFiltersfromURL: true,
+                runtimeFilters: mockRuntimeFilters,
+            });
+            searchEmbed.render();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: {
+                    customisations,
+                    authToken: '',
+                    runtimeFilterParams: 'col1=color&op1=EQ&val1=blue',
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [],
+                    hostConfig: undefined,
+                    reorderedHomepageModules: [],
+                },
+            });
+        });
+
         test('Runtime filters from view Config should not be part of app_init payload when excludeRuntimeFiltersfromURL is false', async () => {
             const mockEmbedEventPayload = {
                 type: EmbedEvent.APP_INIT,
@@ -364,7 +396,7 @@ describe('Unit test case for ts embed', () => {
             };
             const mockedHiddenHomeLeftNavItems: HomeLeftNavItem[] = [
                 HomeLeftNavItem.Home,
-                HomeLeftNavItem.Documentation,
+                HomeLeftNavItem.MonitorSubscription,
             ];
 
             const searchEmbed = new AppEmbed(getRootEl(), {
@@ -386,7 +418,8 @@ describe('Unit test case for ts embed', () => {
                     authToken: '',
                     hostConfig: undefined,
                     runtimeFilterParams: null,
-                    hiddenHomeLeftNavItems: [HomeLeftNavItem.Home, HomeLeftNavItem.Documentation],
+                    hiddenHomeLeftNavItems:
+                        [HomeLeftNavItem.Home, HomeLeftNavItem.MonitorSubscription],
                     hiddenHomepageModules: [],
                     reorderedHomepageModules: [],
                 },
@@ -1176,7 +1209,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&foo=bar&baz=1&bool=true${defaultParamsPost}#/home`,
+                + `&foo=bar&baz=1&bool=true${defaultParamsPost}#/home`,
             );
         });
 
@@ -1192,7 +1225,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&showAlerts=true${defaultParamsPost}#/home`,
+                + `&showAlerts=true${defaultParamsPost}#/home`,
             );
         });
         it('Sets the locale param', async () => {
@@ -1207,7 +1240,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&locale=ja-JP${defaultParamsPost}#/home`,
+                + `&locale=ja-JP${defaultParamsPost}#/home`,
             );
         });
         it('Sets the iconSprite url', async () => {
@@ -1224,7 +1257,7 @@ describe('Unit test case for ts embed', () => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
-                    + `&iconSprite=iconSprite.com${defaultParamsPost}#/home`,
+                + `&iconSprite=iconSprite.com${defaultParamsPost}#/home`,
             );
         });
 

package/src/embed/ts-embed.ts

@@ -170,7 +170,7 @@ export class TsEmbed {
         this.thoughtSpotV2Base = getV2BasePath(this.embedConfig);
         this.eventHandlerMap = new Map();
         this.isError = false;
-        this.viewConfig = viewConfig;
+        this.viewConfig = { excludeRuntimeFiltersfromURL: true, ...viewConfig };
         this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
         this.registerAppInit();
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
@@ -518,10 +518,7 @@ export class TsEmbed {
         const queryParams = this.shouldEncodeUrlQueryParams
             ? `?base64UrlEncodedFlags=${getEncodedQueryParamsString(queryString)}`
             : `?${queryString}`;
-        let host = this.thoughtSpotHost;
-        if (!isUndefined(this.embedConfig.enableReactShell)) {
-            host = this.embedConfig.enableReactShell as boolean ? '/v2' : '/v1';
-        }
+        const host = this.thoughtSpotHost;
         const path = `${host}/${queryParams}#`;
         return path;
     }
@@ -968,6 +965,16 @@ export class TsEmbed {
      */
     public trigger(messageType: HostEvent, data: any = {}): Promise<any> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
+
+        if (!this.isRendered) {
+            this.handleError('Please call render before triggering events');
+            return null;
+        }
+
+        if (!messageType) {
+            this.handleError('Host event type is undefined');
+            return null;
+        }
         return processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
     }
 
@@ -978,7 +985,7 @@ export class TsEmbed {
      *
      * @param args
      */
-    public render(): TsEmbed {
+    public async render(): Promise<TsEmbed> {
         this.isRendered = true;
 
         return this;
@@ -1090,11 +1097,11 @@ export class TsEmbed {
                 ) {
                     logger.warn(
                         `${viewConfig.embedComponentType || 'Component'} was pre-rendered with `
-                            + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
-                            + `but a different value "${JSON.stringify(viewConfig[key])}" `
-                            + 'was passed to the Embed component. '
-                            + 'The new value provided is ignored, the value provided during '
-                            + 'preRender is used.',
+                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                        + 'was passed to the Embed component. '
+                        + 'The new value provided is ignored, the value provided during '
+                        + 'preRender is used.',
                     );
                 }
             });
@@ -1164,8 +1171,8 @@ export class TsEmbed {
         const elBoundingClient = this.el.getBoundingClientRect();
 
         setStyleProperties(this.preRenderWrapper, {
-            top: `${elBoundingClient.y}px`,
-            left: `${elBoundingClient.x}px`,
+            top: `${elBoundingClient.y + window.scrollY}px`,
+            left: `${elBoundingClient.x + window.scrollX}px`,
             width: `${elBoundingClient.width}px`,
             height: `${elBoundingClient.height}px`,
         });
@@ -1186,8 +1193,6 @@ export class TsEmbed {
             pointerEvents: 'none',
             zIndex: '-1000',
             position: 'absolute ',
-            top: '0',
-            left: '0',
         };
         setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
 
@@ -1238,7 +1243,7 @@ export class V1Embed extends TsEmbed {
 
     constructor(domSelector: DOMSelector, viewConfig: ViewConfig) {
         super(domSelector, viewConfig);
-        this.viewConfig = viewConfig;
+        this.viewConfig = { excludeRuntimeFiltersfromURL: true, ...viewConfig };
     }
 
     /**

package/src/index.ts

@@ -54,6 +54,7 @@ import { SageEmbed, SageViewConfig } from './embed/sage';
 import { AnswerService, SessionInterface, UnderlyingDataPoint } from './utils/graphql/answerService/answerService';
 import { getEmbedConfig } from './embed/embedConfig';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from './mixpanel-service';
+import { tokenizedFetch } from './tokenizedFetch';
 
 export {
     init,
@@ -65,6 +66,7 @@ export {
     exportTMLInput,
     getEmbedConfig as getInitConfig,
     getSessionInfo,
+    tokenizedFetch,
     SearchEmbed,
     SearchBarEmbed,
     PinboardEmbed,
@@ -113,3 +115,5 @@ export {
     VizPoint,
     CustomActionPayload,
 };
+
+export { resetCachedAuthToken } from './authToken';

package/src/react/index.spec.tsx

@@ -135,6 +135,7 @@ describe('React Components', () => {
                             values: [100],
                         },
                     ]}
+                    excludeRuntimeFiltersfromURL={false}
                 />,
             );
 

package/src/test/test-utils.ts

@@ -116,3 +116,12 @@ export const expectUrlMatch = (source: string, target: string) => {
     const targetUrl = new URL(target);
     expect(sourceUrl.hash).toBe(targetUrl.hash);
 };
+
+export const createRootEleForEmbed = () => {
+    const rootEle = document.createElement('div');
+    rootEle.id = 'myRoot';
+    const tsEmbedDiv = document.createElement('div');
+    tsEmbedDiv.id = 'tsEmbedDiv';
+    rootEle.appendChild(tsEmbedDiv);
+    document.body.appendChild(rootEle);
+};

package/src/tokenizedFetch.ts

@@ -3,6 +3,15 @@ import { getEmbedConfig } from './embed/embedConfig';
 
 import { AuthType } from './types';
 
+/**
+ * Fetch wrapper that adds the authentication token to the request.
+ * Use this to call the ThoughtSpot APIs when using the visual embed sdk.
+ *
+ * @param input
+ * @param init
+ * @version SDK: 1.28.0
+ * @group Global methods
+ */
 export const tokenizedFetch: typeof fetch = async (input, init): Promise<Response> => {
     const embedConfig = getEmbedConfig();
     if (embedConfig.authType !== AuthType.TrustedAuthTokenCookieless) {