@thoughtspot/visual-embed-sdk 1.32.4 → 1.32.7

package/src/embed/app.spec.ts

@@ -375,6 +375,51 @@ describe('App embed tests', () => {
         });
     });
 
+    test('Should add isLiveboardCompactHeaderEnabled flag to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            isLiveboardCompactHeaderEnabled: false,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&isLiveboardHeaderV2Enabled=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add showLiveboardReverifyBanner flag to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            showLiveboardReverifyBanner: false,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&showLiveboardReverifyBanner=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add showLiveboardVerifiedBadge flag to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            showLiveboardVerifiedBadge: false,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&showLiveboardVerifiedBadge=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('Should add default values of flags to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,

package/src/embed/app.ts

@@ -402,6 +402,48 @@ export interface AppViewConfig extends Omit<ViewConfig, 'visibleTabs'> {
      * @version SDK : 1.33.0 | Thoughtspot : 10.2.0.cl
      */
     homePageSearchBarMode?: HomePageSearchBarMode;
+    /**
+     * This flag is used to enable the compact header in liveboard
+     * @type {boolean}
+     * @default false
+     * @version SDK: 1.35.0 | ThoughtSpot:10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#embed-container', {
+     *    ... // other options
+     *    isLiveboardCompactHeaderEnabled: true,
+     * })
+     * ```
+     */
+    isLiveboardCompactHeaderEnabled?: boolean;
+    /**
+     * This flag is used to show/hide verified Icon in liveboard compact header
+     * @type {boolean}
+     * @default true
+     * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardVerifiedBadge: true,
+     * })
+     * ```
+     */
+    showLiveboardVerifiedBadge?: boolean;
+    /**
+     * This flag is used to show/hide re-verify banner in liveboard compact header
+     * @type {boolean}
+     * @default true
+     * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardReverifyBanner: true,
+     * })
+     * ```
+     */
+    showLiveboardReverifyBanner?: boolean;
 }
 
 /**
@@ -454,6 +496,9 @@ export class AppEmbed extends V1Embed {
             /* eslint-disable-next-line max-len */
             dataPanelCustomGroupsAccordionInitialState = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL,
             collapseSearchBar = true,
+            isLiveboardCompactHeaderEnabled = false,
+            showLiveboardVerifiedBadge = true,
+            showLiveboardReverifyBanner = true,
             homePageSearchBarMode,
         } = this.viewConfig;
 
@@ -468,6 +513,9 @@ export class AppEmbed extends V1Embed {
         params[Param.ShowLiveboardDescription] = !!showLiveboardDescription;
         params[Param.LiveboardHeaderSticky] = isLiveboardHeaderSticky;
         params[Param.IsFullAppEmbed] = true;
+        params[Param.LiveboardHeaderV2] = isLiveboardCompactHeaderEnabled;
+        params[Param.ShowLiveboardVerifiedBadge] = showLiveboardVerifiedBadge;
+        params[Param.ShowLiveboardReverifyBanner] = showLiveboardReverifyBanner;
 
         params = this.getBaseQueryParams(params);
 

package/src/embed/base.ts

@@ -263,18 +263,18 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
  * ```js
  *   executeTML({
  * //Array of metadata Tmls
-    metadata_tmls: [
-      "'\''{\"guid\":\"9bd202f5-d431-44bf-9a07-b4f7be372125\",
-      \"liveboard\":{\"name\":\"Parameters Liveboard\"}}'\''"
-    ],
-    import_policy: 'PARTIAL', // Specifies the import policy for the TML import.
-    create_new: false, // If selected, creates TML objects with new GUIDs.
-  }).then(result => {
-    console.log(result);
-  }).catch(error => {
-    console.error(error);
-  });
- *
+        metadata_tmls: [
+            "'\''{\"guid\":\"9bd202f5-d431-44bf-9a07-b4f7be372125\",
+            \"liveboard\":{\"name\":\"Parameters Liveboard\"}}'\''"
+        ],
+        import_policy: 'PARTIAL', // Specifies the import policy for the TML import.
+        create_new: false, // If selected, creates TML objects with new GUIDs.
+    }).then(result => {
+        console.log(result);
+    }).catch(error => {
+        console.error(error);
+    });
+ *```
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  * @group Global methods
  */

package/src/embed/liveboard.spec.ts

@@ -241,6 +241,54 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('Should add isLiveboardCompactHeaderEnabled flag to the iframe src', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            isLiveboardCompactHeaderEnabled: false,
+        } as LiveboardViewConfig);
+
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&isLiveboardHeaderV2Enabled=false${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
+    test('Should add showLiveboardReverifyBanner flag to the iframe src', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            showLiveboardReverifyBanner: false,
+        } as LiveboardViewConfig);
+
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&showLiveboardReverifyBanner=false${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
+    test('Should add showLiveboardVerifiedBadge flag to the iframe src', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            showLiveboardVerifiedBadge: false,
+        } as LiveboardViewConfig);
+
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&showLiveboardVerifiedBadge=false${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
     test('should not append runtime filters in URL if excludeRuntimeFiltersfromURL is true', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,

package/src/embed/liveboard.ts

@@ -284,6 +284,48 @@ export interface LiveboardViewConfig
      * @version SDK: 1.32.0 | ThoughtSpot: 10.0.0.cl
      */
     showPreviewLoader?: boolean;
+    /**
+     * This flag is used to enable the compact header in liveboard
+     * @type {boolean}
+     * @default false
+     * @version SDK: 1.35.0 | ThoughtSpot:10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    isLiveboardCompactHeaderEnabled: true,
+     * })
+     * ```
+     */
+    isLiveboardCompactHeaderEnabled?: boolean;
+    /**
+     * This flag is used to show/hide verified Icon in liveboard compact header
+     * @type {boolean}
+     * @default true
+     * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardVerifiedBadge: true,
+     * })
+     * ```
+     */
+    showLiveboardVerifiedBadge?: boolean;
+    /**
+     * This flag is used to show/hide re-verify banner in liveboard compact header
+     * @type {boolean}
+     * @default true
+     * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    showLiveboardReverifyBanner: true,
+     * })
+     * ```
+     */
+    showLiveboardReverifyBanner?: boolean;
 }
 
 /**
@@ -338,6 +380,9 @@ export class LiveboardEmbed extends V1Embed {
             showLiveboardDescription,
             showLiveboardTitle,
             isLiveboardHeaderSticky = true,
+            isLiveboardCompactHeaderEnabled = false,
+            showLiveboardVerifiedBadge = true,
+            showLiveboardReverifyBanner = true,
             enableAskSage,
             enable2ColumnLayout,
             dataPanelV2 = true,
@@ -388,6 +433,9 @@ export class LiveboardEmbed extends V1Embed {
         }
 
         params[Param.LiveboardHeaderSticky] = isLiveboardHeaderSticky;
+        params[Param.LiveboardHeaderV2] = isLiveboardCompactHeaderEnabled;
+        params[Param.ShowLiveboardVerifiedBadge] = showLiveboardVerifiedBadge;
+        params[Param.ShowLiveboardReverifyBanner] = showLiveboardReverifyBanner;
 
         params[Param.DataPanelV2Enabled] = dataPanelV2;
         const queryParams = getQueryParamString(params, true);

package/src/embed/ts-embed.ts

@@ -1214,7 +1214,7 @@ export class TsEmbed {
      * @version SDK: 1.25.0 / ThoughtSpot 9.10.0
      */
     public async getAnswerService(vizId?: string): Promise<AnswerService> {
-        const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId);
+        const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId ? { vizId } : {});
 
         return new AnswerService(session, null, this.embedConfig.thoughtSpotHost);
     }
@@ -1291,7 +1291,6 @@ export class V1Embed extends TsEmbed {
 
     /**
      * Only for testing purposes.
-     *
      * @hidden
      */
     // eslint-disable-next-line camelcase

package/src/types.ts

@@ -581,6 +581,13 @@ export interface EmbedConfig {
      * @version SDK: 1.28.5 | Thoughtspot: *
      */
     disableTokenVerification?: boolean;
+
+    /**
+     * This flag is used to disable showing the login failure page in the embedded app.
+     *
+     * @version SDK 1.32.3 | Thoughtspot: *
+     */
+    disableLoginFailurePage?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -2126,21 +2133,61 @@ export enum EmbedEvent {
      */
     Rename = 'rename',
     /**
-     * Emitted when user wants to intercept the search execution
+     * Emitted if the user wants to intercept the search execution
+     * and implement logic to decide whether to run the search or not
+     *
+     * Prerequisite: Set isOnBeforeGetVizDataInterceptEnabled : true
+     * for this embed event to get emitted.
+     *
+     * Parameter: payload
+     * Parameter: responder
+     * Contains elements that lets developers define whether ThoughtSpot
+     * will run the search or not, and if not, which error message to provide.
      *
-     * Set IsOnBeforeGetVizDataInterceptEnabled : true to use
-     * this embed event
+     * execute: When execute returns true, the search will be run.
+     * When execute returns false, the search will not be executed.
+     *
+     * error: Developers can customize the user facing message when execute is
+     * set to false using the error parameter in responder
+     *
+     * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
      *
      *```js
-     * searchEmbed.on(EmbedEvent.OnBeforeGetVizDataIntercept,
+     * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
      * (payload, responder) => {
      *  responder({
      *      data: {
-     *          execute: true,
-     *   }})
+     *          execute:false,
+     *          error: {
+     *          //Provide a custom error message to explain to your end user
+     *          //why their search did not run
+     *          errorText: "This search query cannot be run.
+     *          Please contact your administrator for more details."
+     *          }
+     *  }})
+     * })
+     * ```
+     *
+     *```js
+     * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
+     * (payload, responder) => {
+     * const query = payload.data.data.answer.search_query
+     * responder({
+     *  data: {
+     *      // returns true as long as the query does not include
+     *      // both the 'sales' AND the 'county' column
+     *      execute: !(query.includes("sales")&&query.includes("county")),
+     *      error: {
+     *      //Provide a custom error message to explain to your end user
+     *      // why their search did not run, and which searches are accepted by your custom logic.
+     *      errorText: "You can't use this query :" + query + ".
+     *      The 'sales' measures can never be used at the 'county' level.
+     *      Please try another measure, or remove 'county' from your search."
+     *      }
+     *  }})
      * })
      *```
-     * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
+     *
      */
     OnBeforeGetVizDataIntercept = 'onBeforeGetVizDataIntercept',
     /**
@@ -2260,6 +2307,15 @@ export enum HostEvent {
      * @hidden
      */
     Reload = 'reload',
+    /**
+     * Get current iframe src
+     * @example
+     * ```js
+     * const frameUrl = AppEmbed.trigger(HostEvent.GetIframeUrl)
+     * ```
+     * @version SDK: 1.35.0 | Thoughtspot: 10.4.0.cl
+     */
+    GetIframeUrl = 'GetIframeUrl',
     /**
      * Display specific visualizations on a Liveboard.
      * @param - An array of GUIDs of the visualization to show. The visualization IDs not passed
@@ -3130,6 +3186,9 @@ export enum Param {
     FocusSearchBarOnRender = 'focusSearchBarOnRender',
     DisableRedirectionLinksInNewTab = 'disableRedirectionLinksInNewTab',
     HomePageSearchBarMode = 'homePageSearchBarMode',
+    ShowLiveboardVerifiedBadge = 'showLiveboardVerifiedBadge',
+    ShowLiveboardReverifyBanner = 'showLiveboardReverifyBanner',
+    LiveboardHeaderV2 = 'isLiveboardHeaderV2Enabled',
 }
 
 /**

package/src/utils/graphql/answerService/answerService.ts

@@ -222,6 +222,25 @@ export class AnswerService {
         });
     }
 
+    /**
+     * Fetch the data for the answer as a PNG blob. This might be
+     * quicker for larger data.
+     * @param userLocale
+     * @param omitBackground Omit the background in the PNG
+     * @param deviceScaleFactor The scale factor for the PNG
+     * @return Response
+     */
+    public async fetchPNGBlob(userLocale = 'en-us', includeInfo = false, omitBackground = false, deviceScaleFactor = 2): Promise<Response> {
+        const fetchUrl = this.getFetchPNGBlobUrl(
+            userLocale,
+            omitBackground,
+            deviceScaleFactor,
+        );
+        return tokenizedFetch(fetchUrl, {
+            credentials: 'include',
+        });
+    }
+
     /**
      * Just get the internal URL for this answer's data
      * as a CSV blob.
@@ -233,6 +252,14 @@ export class AnswerService {
         return `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&hideCsvHeader=${!includeInfo}`;
     }
 
+    /**
+     * Just get the internal URL for this answer's data
+     * as a PNG blob.
+     */
+    public getFetchPNGBlobUrl(userLocale = 'en-us', omitBackground = false, deviceScaleFactor = 2): string {
+        return `${this.thoughtSpotHost}/prism/download/answer/png?sessionId=${this.session.sessionId}&deviceScaleFactor=${deviceScaleFactor}&omitBackground=${omitBackground}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data`;
+    }
+
     /**
      * Get underlying data given a point and the output column names.
      * In case of a context menu action, the selectedPoints are

package/src/utils/processData.spec.ts

@@ -1,3 +1,4 @@
+import { disable } from 'mixpanel-browser';
 import * as processDataInstance from './processData';
 import * as answerServiceInstance from './graphql/answerService/answerService';
 import * as auth from '../auth';
@@ -171,4 +172,19 @@ describe('Unit test for process data', () => {
         expect(el.innerHTML).toBe('Hello');
         expect(embedConfigInstance.getEmbedConfig().autoLogin).toBe(false);
     });
+
+    test('process authFailure AuthType=None', () => {
+        const e = { type: EmbedEvent.AuthFailure };
+        jest.spyOn(embedConfigInstance, 'getEmbedConfig').mockReturnValue({
+            loginFailedMessage: 'Hello',
+            authType: AuthType.EmbeddedSSO,
+            disableLoginFailurePage: true,
+        });
+        const el: any = {};
+        expect(processDataInstance.processEventData(e.type, e, '', el)).toEqual({
+            type: e.type,
+        });
+        expect(base.notifyAuthFailure).not.toBeCalled();
+        expect(el.innerHTML).not.toBe('Hello');
+    });
 });

package/src/utils/processData.ts

@@ -78,8 +78,8 @@ function processNoCookieAccess(e: any, containerEl: Element) {
  * @param containerEl
  */
 export function processAuthFailure(e: any, containerEl: Element) {
-    const { loginFailedMessage, authType } = getEmbedConfig();
-    if (authType !== AuthType.None) {
+    const { loginFailedMessage, authType, disableLoginFailurePage } = getEmbedConfig();
+    if (authType !== AuthType.None && !disableLoginFailurePage) {
         // eslint-disable-next-line no-param-reassign
         containerEl.innerHTML = loginFailedMessage;
         notifyAuthFailure(AuthFailureType.OTHER);