@thoughtspot/visual-embed-sdk 1.37.0 → 1.37.1

package/src/embed/app.ts

@@ -83,6 +83,47 @@ export enum HomePageSearchBarMode {
     AI_ANSWER = 'aiAnswer',
     NONE = 'none'
 }
+
+/**
+ * Define the version of the primary navbar
+ * @version SDK: 1.39.0 | Thoughtspot: 10.10.0.cl
+ */
+export enum PrimaryNavbarVersion {
+    /**
+     * Sliding (v3) introduces a new left-side navigation hub featuring a tab switcher,
+     * along with updates to the top navigation bar.
+     * It serves as the foundational version of the PrimaryNavBar.
+     */
+    Sliding = 'v3',
+}
+
+/**
+ * Define the version of the home page
+ * @version SDK: 1.39.0 | Thoughtspot: 10.10.0.cl
+ */
+export enum HomePage {
+    /**
+     * Modular (v2) introduces the updated Modular Home Experience.
+     * It serves as the foundational version of the home page.
+     */
+    Modular = 'v2',
+}
+
+/**
+ * Define the discovery experience
+ * @version SDK: 1.39.0 | Thoughtspot: 10.10.0.cl
+ */
+export interface DiscoveryExperience {
+    /**
+     * primaryNavbarVersion determines the version of the navigation version.
+     */
+    primaryNavbarVersion?: PrimaryNavbarVersion;
+    /**
+     * homePage determines the version of the home page.
+     */
+    homePage?: HomePage;
+}
+
 /**
  * The view configuration for full app embedding.
  * @group Embed components
@@ -151,6 +192,51 @@ export interface AppViewConfig extends Omit<ViewConfig, 'visibleTabs'> {
      * ```
      */
     enablePendoHelp?: boolean
+    /**
+     * Control the visibility of the hamburger icon on the top nav bar
+     * available when new navigation V3 is enabled.
+     *
+     * @default false
+     * @version SDK: 1.39.0 | Thoughtspot: 10.10.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideHamburger : true,
+     * })
+     * ```
+     */
+    hideHamburger?: boolean;
+    /**
+     * Control the visibility of the Eureka search on the top nav bar
+     * this will control for both new V2 and new navigation V3.
+     *
+     * @default true
+     * @version SDK: 1.39.0 | Thoughtspot: 10.10.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideObjectSearch: false,
+     * })
+     * ```
+     */
+    hideObjectSearch?: boolean;
+    /**
+     * Control the visibility of the notification on the top nav bar V3,
+     * available when new navigation V3 is enabled.
+     *
+     * @default true
+     * @version SDK: 1.39.0 | Thoughtspot: 10.10.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other options
+     *    hideNotification: false,
+     * })
+     * ```
+     */
+    hideNotification?: boolean;
     /**
      * Control the visibility of the application switcher button on the nav-bar.
      * By default, the application switcher is shown.
@@ -344,6 +430,23 @@ export interface AppViewConfig extends Omit<ViewConfig, 'visibleTabs'> {
      * ```
      */
     modularHomeExperience?: boolean;
+    /**
+     * To configure the top-left navigation and home page experience
+     *
+     * @default false
+     * @version SDK: 1.39.0 | Thoughtspot: 10.10.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other options
+     *    discoveryExperience : {
+     *      primaryNavbarVersion: PrimaryNavbarVersion.Sliding,
+     *      homePage: HompePage.Modular,
+     *    },
+     * })
+     * ```
+     */
+    discoveryExperience?: DiscoveryExperience;
     /**
      * Boolean to control if Liveboard header is sticky or not.
      * @example
@@ -515,6 +618,9 @@ export class AppEmbed extends V1Embed {
             liveboardV2,
             showPrimaryNavbar,
             disableProfileAndHelp,
+            hideHamburger,
+            hideObjectSearch,
+            hideNotification,
             hideApplicationSwitcher,
             hideOrgSwitcher,
             enableSearchAssist,
@@ -541,6 +647,7 @@ export class AppEmbed extends V1Embed {
             homePageSearchBarMode,
             isUnifiedSearchExperienceEnabled = true,
             enablePendoHelp = true,
+            discoveryExperience,
         } = this.viewConfig;
 
         let params = {};
@@ -561,6 +668,18 @@ export class AppEmbed extends V1Embed {
 
         params = this.getBaseQueryParams(params);
 
+        if (hideObjectSearch) {
+            params[Param.HideObjectSearch] = !!hideObjectSearch;
+        }
+
+        if (hideHamburger) {
+            params[Param.HideHamburger] = !!hideHamburger;
+        }
+
+        if (hideNotification) {
+            params[Param.HideNotification] = !!hideNotification;
+        }
+
         if (fullHeight === true) {
             params[Param.fullHeight] = true;
         }
@@ -620,6 +739,20 @@ export class AppEmbed extends V1Embed {
             /* eslint-disable-next-line max-len */
             params[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
+
+        if (discoveryExperience) {
+            // primaryNavbarVersion v3 will enabled the new left navigation
+            if (discoveryExperience.primaryNavbarVersion === PrimaryNavbarVersion.Sliding) {
+                params[Param.NavigationVersion] = discoveryExperience.primaryNavbarVersion;
+            }
+
+            // homePage v2 will enable the modular home page
+            // and it will override the modularHomeExperience value
+            if (discoveryExperience.homePage === HomePage.Modular) {
+                params[Param.ModularHomeExperienceEnabled] = true;
+            }
+        }
+
         const queryParams = getQueryParamString(params, true);
 
         return queryParams;

package/src/embed/base.ts

@@ -137,6 +137,15 @@ export const prefetch = (
                     iFrame.style.width = '0';
                     iFrame.style.height = '0';
                     iFrame.style.border = '0';
+
+                    // Make it 'fixed' to keep it in a different stacking context.
+                    //   This should solve the focus behaviours inside the iframe from
+                    //   interfering with main body.
+                    iFrame.style.position = 'fixed';
+                    // Push it out of viewport.
+                    iFrame.style.top = '100vh';
+                    iFrame.style.left = '100vw';
+
                     iFrame.classList.add('prefetchIframe');
                     iFrame.classList.add(`prefetchIframeNum-${index}`);
                     document.body.appendChild(iFrame);

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

@@ -60,6 +60,7 @@ import { HiddenActionItemByDefaultForSearchEmbed } from './search';
 import { processTrigger } from '../utils/processTrigger';
 import { UIPassthroughEvent } from './hostEventClient/contracts';
 import * as sessionInfoService from '../utils/sessionInfoService';
+import * as authToken from '../authToken';
 
 jest.mock('../utils/processTrigger');
 
@@ -2578,4 +2579,133 @@ describe('Unit test case for ts embed', () => {
             expect(iframeAfterInit).not.toBe(null);
         });
     });
+
+    describe('AutoLogin behavior in updateAuthToken', () => {
+      const mockPort = { postMessage: jest.fn() };
+      const mockEmbedEventPayload = { type: EmbedEvent.AuthExpire, data: {} };
+      
+      beforeEach(() => {
+        jest.clearAllMocks();
+        document.body.innerHTML = getDocumentBody();
+        mockPort.postMessage.mockClear();
+        jest.spyOn(authToken, 'getAuthenticationToken').mockResolvedValue('test-token');
+        
+        jest.spyOn(baseInstance, 'handleAuth').mockImplementation(() => Promise.resolve(true));
+        jest.spyOn(baseInstance, 'notifyAuthFailure').mockImplementation(() => {});
+      });
+
+      const renderAndTriggerAuthExpire = async () => {
+        const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+        await searchEmbed.render();
+        await executeAfterWait(() => {
+          const iframe = getIFrameEl();
+          postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+        });
+      };
+
+      test('Cookieless with autoLogin undefined should default to true', async () => {
+        init({
+          thoughtSpotHost: 'tshost',
+          authType: AuthType.TrustedAuthTokenCookieless,
+          // autoLogin undefined
+        });
+
+        await renderAndTriggerAuthExpire();
+
+        await executeAfterWait(() => {
+          expect(authToken.getAuthenticationToken).toHaveBeenCalled();
+          expect(baseInstance.handleAuth).toHaveBeenCalledTimes(1);
+          expect(mockPort.postMessage).toHaveBeenCalledWith({
+            type: EmbedEvent.AuthExpire,
+            data: { authToken: 'test-token' },
+          });
+        });
+      });
+
+      test('Cookieless with autoLogin false should not get auth token', async () => {
+        init({
+          thoughtSpotHost: 'tshost',
+          authType: AuthType.TrustedAuthTokenCookieless,
+          autoLogin: false,
+        });
+
+        await renderAndTriggerAuthExpire();
+
+        await executeAfterWait(() => {
+          expect(authToken.getAuthenticationToken).not.toHaveBeenCalled();
+          expect(baseInstance.handleAuth).toHaveBeenCalledTimes(1);
+          expect(mockPort.postMessage).not.toHaveBeenCalled();
+        });
+      });
+
+      test('Cookieless with autoLogin true should get auth token', async () => {
+        init({
+          thoughtSpotHost: 'tshost',
+          authType: AuthType.TrustedAuthTokenCookieless,
+          autoLogin: true,
+        });
+
+        await renderAndTriggerAuthExpire();
+
+        await executeAfterWait(() => {
+          expect(authToken.getAuthenticationToken).toHaveBeenCalled();
+          expect(baseInstance.handleAuth).toHaveBeenCalledTimes(1);
+          expect(mockPort.postMessage).toHaveBeenCalledWith({
+            type: EmbedEvent.AuthExpire,
+            data: { authToken: 'test-token' },
+          });
+        });
+      });
+
+      test('Other authType with autoLogin undefined should default to false', async () => {
+        init({
+          thoughtSpotHost: 'tshost',
+          authType: AuthType.None,
+          // autoLogin undefined
+        });
+
+        await renderAndTriggerAuthExpire();
+
+        await executeAfterWait(() => {
+          expect(authToken.getAuthenticationToken).not.toHaveBeenCalled();
+          expect(baseInstance.handleAuth).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      test('Other authType with autoLogin true should call handleAuth', async () => {
+        init({
+          thoughtSpotHost: 'tshost',
+          authType: AuthType.None,
+          autoLogin: true,
+        });
+
+        await renderAndTriggerAuthExpire();
+
+        await executeAfterWait(() => {
+          expect(authToken.getAuthenticationToken).not.toHaveBeenCalled();
+          expect(baseInstance.handleAuth).toHaveBeenCalledTimes(2);
+        });
+      });
+
+      test('Other authType with autoLogin false should not call handleAuth', async () => {
+        init({
+          thoughtSpotHost: 'tshost',
+          authType: AuthType.None,
+          autoLogin: false,
+        });
+
+        await renderAndTriggerAuthExpire();
+
+        await executeAfterWait(() => {
+          expect(authToken.getAuthenticationToken).not.toHaveBeenCalled();
+          expect(baseInstance.handleAuth).toHaveBeenCalledTimes(1);
+        });
+      });
+
+      afterEach(() => {
+        expect(baseInstance.notifyAuthFailure).toHaveBeenCalledWith(
+          authInstance.AuthFailureType.EXPIRY
+        );
+      });
+    });
 });

package/src/embed/ts-embed.ts

@@ -409,11 +409,13 @@ export class TsEmbed {
      * @param responder
      */
     private updateAuthToken = async (_: any, responder: any) => {
-        const { autoLogin = false, authType } = this.embedConfig; // Set autoLogin default to false
-        if (authType === AuthType.TrustedAuthTokenCookieless) {
-            let authToken = '';
+        const { authType } = this.embedConfig;
+        let { autoLogin } = this.embedConfig;
+        // Default autoLogin: true for cookieless if undefined/null, otherwise false
+        autoLogin = autoLogin ?? (authType === AuthType.TrustedAuthTokenCookieless);
+        if (autoLogin && authType === AuthType.TrustedAuthTokenCookieless) {
             try {
-                authToken = await getAuthenticationToken(this.embedConfig);
+                const authToken = await getAuthenticationToken(this.embedConfig);
                 responder({
                     type: EmbedEvent.AuthExpire,
                     data: { authToken },
@@ -540,6 +542,7 @@ export class TsEmbed {
             disableRedirectionLinksInNewTab,
             overrideOrgId,
             exposeTranslationIDs,
+            primaryAction,
         } = this.viewConfig;
 
         const { additionalFlags: additionalFlagsFromInit } = this.embedConfig;
@@ -558,6 +561,9 @@ export class TsEmbed {
             this.handleError('You cannot have both hidden Tabs and visible Tabs');
             return queryParams;
         }
+        if (primaryAction) {
+            queryParams[Param.PrimaryAction] = primaryAction;
+        }
 
         if (disabledActions?.length) {
             queryParams[Param.DisableActions] = disabledActions;

package/src/types.ts

@@ -204,7 +204,19 @@ export enum HomeLeftNavItem {
     /**
      * @version SDK: 1.34.0| ThoughtSpot: 10.3.0.cl
      */
-    LiveboardSchedules = 'liveboard-schedules'
+    LiveboardSchedules = 'liveboard-schedules',
+    /**
+     * Create new options in the insights left navigation,
+     * available when new navigation V3 is enabled.
+     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     */
+    Create = 'create',
+    /**
+     * Spotter option in the insights left navigation,
+     * available when new navigation V3 is enabled.
+     * @version SDK: 1.39.0 | ThoughtSpot: 10.10.0.cl
+     */
+    Spotter = 'spotter',
 }
 export type DOMSelector = string | HTMLElement;
 
@@ -712,6 +724,19 @@ export interface ViewConfig {
      * ```
      */
     disabledActions?: Action[];
+    /**
+     * The primary action to display on top of the viz for Liveboard and App Embed.
+     * Use this to set the primary action.
+     * @version SDK: 1.37.0 | ThoughtSpot: 10.9.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed', {
+     *   ... // other liveboard view config
+     *   primaryAction: Action.Download
+     * });
+     * ```
+     */
+    primaryAction?: Action | string;
     /**
      * The tooltip to display for disabled actions.
      * @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1.sw
@@ -2654,9 +2679,12 @@ export enum HostEvent {
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.OpenFilter,
-     * { columnId: '<column-GUID>', name: 'column name', type: 'INT64', dataType: 'ATTRIBUTE'})
+     *  {column: { columnId: '<column-GUID>', name: 'column name', type: 'INT64', dataType: 'ATTRIBUTE'}})
+     * ```
+     * @example
+     * ```js
      * LiveboardEmbed.trigger(HostEvent.OpenFilter,
-     *  { columnId: '<column-GUID>'})
+     *   { column: {columnId: '<column-GUID>'}})
      * ```
      * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
      */
@@ -3265,6 +3293,25 @@ export enum HostEvent {
      *    }]
      * });
      * ```
+     * If there are multiple columns with the same name, consider
+     * using `WORKSHEET_NAME::COLUMN_NAME` format.
+     *
+     * @example
+     *
+     * ```js
+     * liveboardEmbed.trigger(HostEvent.UpdateFilters, {
+     *  filters: [{
+     *      column: "(Sample) Retail - Apparel::city",
+     *      oper: 'IN',
+     *      values: ["atlanta"]
+     *  },
+     *  {
+     *      column: "(Sample) Retail - Apparel::Region",
+     *      oper: 'IN',
+     *      values: ["West","Midwest"]
+     *  }]
+     * });
+     * ```
      * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
      */
     UpdateFilters = 'updateFilters',
@@ -3324,8 +3371,17 @@ export enum HostEvent {
     /**
      * Get the Answer session for a Search or
      * Liveboard visualization.
+     * 
+     * Note: This event is not typically used directly. Instead, use the 
+     * `getAnswerService()` method on the embed instance to get an AnswerService 
+     * object that provides a more convenient interface for working with answers.
+     * 
      * @example
      * ```js
+     * // Preferred way to get an AnswerService
+     * const service = await embed.getAnswerService();
+     * 
+     * // Alternative direct usage (not recommended)
      * const {session} = await embed.trigger(
      *  HostEvent.GetAnswerSession, {
      *      vizId: '123', // For Liveboard Visualization.
@@ -3333,6 +3389,10 @@ export enum HostEvent {
      * ```
      * @example
      * ```js
+     * // Preferred way to get an AnswerService
+     * const service = await embed.getAnswerService();
+     * 
+     * // Alternative direct usage (not recommended)
      * const {session} = await embed.trigger( HostEvent.GetAnswerSession )
      * ```
      * @version SDK: 1.26.0 | ThoughtSpot: 9.10.0.cl, 10.1.0.sw
@@ -3541,6 +3601,10 @@ export enum Param {
     ShowInsertToSlide = 'insertInToSlide',
     PrimaryNavHidden = 'primaryNavHidden',
     HideProfleAndHelp = 'profileAndHelpInNavBarHidden',
+    NavigationVersion = 'navigationVersion',
+    HideHamburger = 'hideHamburger',
+    HideObjectSearch = 'hideObjectSearch',
+    HideNotification = 'hideNotification',
     HideApplicationSwitcher = 'applicationSwitcherHidden',
     HideOrgSwitcher = 'orgSwitcherHidden',
     IsSageEmbed = 'isSageEmbed',
@@ -3597,6 +3661,7 @@ export enum Param {
     preAuthCache = 'preAuthCache',
     ShowSpotterLimitations = 'showSpotterLimitations',
     CoverAndFilterOptionInPDF = 'coverAndFilterOptionInPDF',
+    PrimaryAction = 'primaryAction',
 }
 
 /**

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

@@ -26,29 +26,49 @@ export interface UnderlyingDataPoint {
 }
 
 /**
- * Class representing the answer service provided with the
- * custom action payload. This service could be used to run
- * graphql queries in the context of the answer on which the
- * custom action was triggered.
+ * AnswerService provides a simple way to work with ThoughtSpot Answers.
+ * 
+ * This service allows you to interact with ThoughtSpot Answers programmatically,
+ * making it easy to customize visualizations, filter data, and extract insights
+ * directly from your application.
+ * 
+ * You can use this service to:
+ * - Add or remove columns from Answers (`addColumns`, `removeColumns`, `addColumnsByName`)
+ * - Apply filters to Answers (`addFilter`)
+ * - Get data from Answers in different formats (JSON, CSV, PNG) (`fetchData`, `fetchCSVBlob`, `fetchPNGBlob`)
+ * - Get data for specific points in visualizations (`getUnderlyingDataForPoint`)
+ * - Run custom queries (`executeQuery`)
+ * - Add visualizations to liveboards (`addDisplayedVizToLiveboard`)
+ * 
  * @example
  * ```js
- *  embed.on(EmbedEvent.CustomAction, e => {
- *     const underlying = await e.answerService.getUnderlyingDataForPoint([
- *       'col name 1'
- *     ]);
- *     const data = await underlying.fetchData(0, 100);
- *  })
+ * // Get the answer service
+ * embed.on(EmbedEvent.Data, async (e) => {
+ *     const service = await embed.getAnswerService();
+ *     
+ *     // Add columns to the answer
+ *     await service.addColumnsByName(["Sales", "Region"]);
+ *     
+ *     // Get the data
+ *     const data = await service.fetchData();
+ *     console.log(data);
+ * });
  * ```
+ * 
  * @example
  * ```js
- * embed.on(EmbedEvent.Data, async (e) => {
- *     const service = await embed.getAnswerService();
- *     await service.addColumns([
- *         "<column guid>"
+ * // Get data for a point in a visualization
+ * embed.on(EmbedEvent.CustomAction, async (e) => {
+ *     const underlying = await e.answerService.getUnderlyingDataForPoint([
+ *       'Product Name',
+ *       'Sales Amount'
  *     ]);
- *     console.log(await service.fetchData());
+ *     
+ *     const data = await underlying.fetchData(0, 100);
+ *     console.log(data);
  * });
  * ```
+ * 
  * @version SDK: 1.25.0| ThoughtSpot: 9.10.0.cl
  * @group Events
  */

package/src/utils/processData.ts

@@ -80,15 +80,15 @@ export function processAuthFailure(e: any, containerEl: Element) {
     const {
         loginFailedMessage, authType, disableLoginFailurePage, autoLogin,
     } = getEmbedConfig();
-    if (
-        autoLogin
-        && (authType === AuthType.TrustedAuthToken
-            || authType === AuthType.TrustedAuthTokenCookieless)
-    ) {
+    
+    const isEmbeddedSSO = authType === AuthType.EmbeddedSSO;
+    const isTrustedAuth = authType === AuthType.TrustedAuthToken || authType === AuthType.TrustedAuthTokenCookieless;
+    const isEmbeddedSSOInfoFailure = isEmbeddedSSO && e?.data?.type === AuthFailureType.UNAUTHENTICATED_FAILURE;
+    if (autoLogin && isTrustedAuth) {
         // eslint-disable-next-line no-param-reassign
         containerEl.innerHTML = loginFailedMessage;
         notifyAuthFailure(AuthFailureType.IDLE_SESSION_TIMEOUT);
-    } else if (authType !== AuthType.None && !disableLoginFailurePage) {
+    } else if (authType !== AuthType.None && !disableLoginFailurePage && !isEmbeddedSSOInfoFailure) {
         // eslint-disable-next-line no-param-reassign
         containerEl.innerHTML = loginFailedMessage;
         notifyAuthFailure(AuthFailureType.OTHER);