@thoughtspot/visual-embed-sdk 1.26.2 → 1.27.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.26.2",
+    "version": "1.27.0-alpha.0",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",

package/src/auth.ts

@@ -72,8 +72,8 @@ export enum AuthStatus {
      */
     LOGOUT = 'LOGOUT',
     /**
-     * Emitted when inPopup: true in the SAMLRedirect flow.
-     * And, we are waiting for popup to be triggered either programatically
+     * Emitted when inPopup is true in the SAMLRedirect flow and the
+     * popup is waiting to be triggered either programmatically
      * or by the trigger button.
      *
      * @version SDK: 1.19.0
@@ -126,8 +126,8 @@ export interface AuthEventEmitter {
  */
 export enum AuthEvent {
     /**
-     * Manually trigger the SSO popup. This is useful with
-     * authStatus: SAMLRedirect/OIDCRedicre and inPopup: true
+     * Manually trigger the SSO popup. This is useful when
+     * authStatus is SAMLRedirect/OIDCRedirect and inPopup is set to true
      */
     TRIGGER_SSO_POPUP = 'TRIGGER_SSO_POPUP',
 }
@@ -472,6 +472,12 @@ export const logout = async (embedConfig: EmbedConfig): Promise<boolean> => {
     const { thoughtSpotHost } = embedConfig;
     await fetchLogoutService(thoughtSpotHost);
     resetCachedAuthToken();
+    const thoughtspotIframes = document.querySelectorAll('[data-ts-iframe=\'true\']');
+    if (thoughtspotIframes?.length) {
+        thoughtspotIframes.forEach((el) => {
+            el.parentElement.innerHTML = embedConfig.loginFailedMessage;
+        });
+    }
     loggedInStatus = false;
     return loggedInStatus;
 };

package/src/embed/app.ts

@@ -57,43 +57,43 @@ export enum Page {
  */
 export interface AppViewConfig extends Omit<ViewConfig, 'visibleTabs'> {
     /**
-     * If true, the main navigation bar within the ThoughtSpot app
+     * If true, the top navigation bar within the ThoughtSpot app
      * is displayed. By default, the navigation bar is hidden.
-     * This flag also control the homepage left nav-bar.
+     * This flag also controls the homepage left navigation bar.
      */
     showPrimaryNavbar?: boolean;
     /**
-     * Flag to control Homepage Left Nav Bar
-     * If showPrimaryNavbar is true, ie navigation bar(Global nav-bar) and Homepage left
-     * nav-bar is visible, this flag will only hide the homepage left nav.
-     * Precedence of showPrimaryNavbar flag > hideHomepageLeftNav flag.
+     * Control the visibility of the left navigation bar on the Homepage.
+     * If showPrimaryNavbar is true, that is, if the Global and Homepage
+     * nav-bars are visible, this flag will only hide the homepage left nav-bar.
+     * The showPrimaryNavbar flag takes precedence over the hideHomepageLeftNav.
      *
      * @default false
      * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
      */
     hideHomepageLeftNav?: boolean;
     /**
-     * If true, help and profile buttons will hide on NavBar. By default,
-     * they are shown.
+     * Control the visibility of the help (?) and profile buttons on the
+     * Global nav-bar. By default, these buttons are visible on the nav-bar.
      */
     disableProfileAndHelp?: boolean;
     /**
-     * If true, application switcher button will hide on NavBar. By default,
-     * they are shown.
+     * Control the visibility of the application switcher button on the nav-bar.
+     * By default, the application switcher is shown.
      */
     hideApplicationSwitcher?: boolean;
     /**
-     * If true, org switcher button will hide on NavBar. By default,
-     * they are shown.
+     * Control the visibility of the Org switcher button on the nav-bar.
+     * By default, the Org switcher button is shown.
      */
     hideOrgSwitcher?: boolean;
     /**
-     * A URL path within the app that is to be embedded.
+     * A URL path to the embedded application page
      * If both path and pageId attributes are defined, the path definition
      * takes precedence. This is the path post the `#/` in the URL of the standalone
      * ThoughtSpot app. Use this to open the embedded view to a specific path.
      *
-     * For eg, if you want the component to open to a specific liveboard
+     * For eg, if you want the component to open to a specific Liveboard
      * you could set the path to `pinboard/<liveboardId>/tab/<tabId>`.
      *
      * @example
@@ -282,8 +282,10 @@ export class AppEmbed extends V1Embed {
      *
      * @param pageId The ID of the page to be embedded.
      */
-    private getIFrameSrc() {
-        const { pageId, path, modularHomeExperience } = this.viewConfig;
+    public getIFrameSrc(): string {
+        const {
+            pageId, path, modularHomeExperience,
+        } = this.viewConfig;
         const pageRoute = this.formatPath(path) || this.getPageRoute(pageId, modularHomeExperience);
         let url = `${this.getRootIframeSrc()}/${pageRoute}`;
 
@@ -301,7 +303,7 @@ export class AppEmbed extends V1Embed {
      */
     protected updateIFrameHeight = (data: MessagePayload) => {
         this.setIFrameHeight(Math.max(data.data, this.iFrame?.scrollHeight));
-    }
+    };
 
     private embedIframeCenter = (data: MessagePayload, responder: any) => {
         const obj = this.getIframeCenter();
@@ -309,9 +311,7 @@ export class AppEmbed extends V1Embed {
     };
 
     private setIframeHeightForNonEmbedLiveboard = (data: MessagePayload) => {
-        const {
-            height: frameHeight, ...restParams
-        } = this.viewConfig.frameParams || {};
+        const { height: frameHeight, ...restParams } = this.viewConfig.frameParams || {};
         if (!data.data.currentPath.startsWith('/pinboard/')) {
             this.setIFrameHeight(frameHeight || this.defaultHeight);
         }

package/src/embed/liveboard.ts

@@ -28,7 +28,7 @@ import { V1Embed } from './ts-embed';
  *
  * @group Embed components
  */
-export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageModules' | 'hiddenHomeLeftNavItems'| 'reorderedHomepageModules'> {
+export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageModules' | 'hiddenHomeLeftNavItems' | 'reorderedHomepageModules'> {
     /**
      * If set to true, the embedded object container dynamically resizes
      * according to the height of the Liveboard.
@@ -37,8 +37,8 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      */
     fullHeight?: boolean;
     /**
-     * This is the minimum height(in pixels) for a full height Liveboard.
-     * Setting this height helps resolves issues with empty Liveboards and
+     * This is the minimum height(in pixels) for a full-height Liveboard.
+     * Setting this height helps resolve issues with empty Liveboards and
      * other screens navigable from a Liveboard.
      *
      * @version SDK: 1.5.0 | ThoughtSpot: ts7.oct.cl, 7.2.1
@@ -51,7 +51,7 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
     enableVizTransformations?: boolean;
     /**
      * The Liveboard to display in the embedded view.
-     * Use either of liveboardId or pinboardId to reference the Liveboard to embed.
+     * Use either liveboardId or pinboardId to reference the Liveboard to embed.
      *
      * @version SDK: 1.3.0 | ThoughtSpot ts7.aug.cl, 7.2.1
      */
@@ -70,80 +70,85 @@ export interface LiveboardViewConfig extends Omit<ViewConfig, 'hiddenHomepageMod
      * If set to true, all filter chips from a
      * Liveboard page will be read-only (no X buttons)
      *
-     * @version SDK: 1.3.0 | ThoughtSpot ts7.aug.cl, 7.2.1
+     * @version SDK: 1.3.0 | ThoughtSpot ts7.aug.cl, 7.2.1.sw
      */
     preventLiveboardFilterRemoval?: boolean;
     /**
-     * Array of viz ids which should be visible when the liveboard
-     * first renders. This can be changed by triggering the "SetVisibleVizs"
+     * Array of visualization IDs which should be visible when the Liveboard
+     * renders. This can be changed by triggering the `SetVisibleVizs`
      * event.
      *
      * @version SDK: 1.9.1 | ThoughtSpot: 8.1.0.cl, 8.4.1-sw
      */
     visibleVizs?: string[];
     /**
-     * To support backward compatibilty
+     * To support backward compatibility
      *
      * @hidden
      */
     preventPinboardFilterRemoval?: boolean;
     /**
-     * Render embedded Liveboards and visualizations in the new Liveboard experience mode
+     * Render embedded Liveboards and visualizations in the
+     * new Liveboard experience mode.
      *
      * @version SDK: 1.14.0 | ThoughtSpot: 8.6.0.cl, 8.8.1-sw
      */
     liveboardV2?: boolean;
     /**
-     * Tab ID of the Liveboard that is supposed to be active
+     * Set a Liveboard tab as an active tab.
+     * Specify the tab ID.
      *
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
      */
     activeTabId?: string;
     /**
-     * Hide tab Panel of embedded LB
+     * Show or hide the tab panel of the embedded Liveboard.
      *
-     * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
+     * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl, 9.8.0.sw
      */
     hideTabPanel?: boolean;
     /**
-     * Show or hide Liveboard header
+     * Show or hide the Liveboard header.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      * @default false
      */
     hideLiveboardHeader?: boolean;
     /**
-     * Show or hide Liveboard title
+     * Show or hide the Liveboard title.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      * @default false
      */
     showLiveboardTitle?: boolean;
     /**
-     * Show or hide Liveboard description
+     * Show or hide the Liveboard description.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      * @default false
      */
     showLiveboardDescription?: boolean;
     /**
-     * Boolean for sticky Liveboard header.
+     * Control the position and visibility of
+     * the Liveboard header as the users scroll down the
+     * embedded Liveboard page.
      *
      * @example
      * ```js
      * const embed = new LiveboardEmbed('#embed', {
-     *   ... // other liveboard view config
+     *   ... // other Liveboard view config
      *   isLiveboardHeaderSticky: true,
      * });
      * ```
-     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      */
     isLiveboardHeaderSticky?: boolean;
 }
 
 /**
- * Embed a ThoughtSpot Liveboard or a Thoughtspot visualization. When rendered it already
- * waits for the authentication to complete, so no need to wait for AuthStatus.SUCCESS.
+ * Embed a ThoughtSpot Liveboard or visualization. When rendered it already
+ * waits for the authentication to complete, so you need not wait for
+ * `AuthStatus.SUCCESS`.
  *
  * @example
  * ```js
@@ -256,9 +261,9 @@ export class LiveboardEmbed extends V1Embed {
 
     /**
      * Construct the URL of the embedded ThoughtSpot Liveboard or visualization
-     * to be loaded within the iframe.
+     * to be loaded within the iFrame.
      */
-    private getIFrameSrc() {
+    private getIFrameSrc(): string {
         const { vizId, activeTabId } = this.viewConfig;
         const liveboardId = this.viewConfig.liveboardId ?? this.viewConfig.pinboardId;
 
@@ -307,7 +312,7 @@ export class LiveboardEmbed extends V1Embed {
         if (isUndefined(embedObj)) return;
 
         const showDifferentLib = this.viewConfig.liveboardId
-        && embedObj.viewConfig.liveboardId !== this.viewConfig.liveboardId;
+            && embedObj.viewConfig.liveboardId !== this.viewConfig.liveboardId;
 
         if (showDifferentLib) {
             const libId = this.viewConfig.liveboardId;
@@ -374,4 +379,4 @@ export class LiveboardEmbed extends V1Embed {
 /**
  * @hidden
  */
-export class PinboardEmbed extends LiveboardEmbed {}
+export class PinboardEmbed extends LiveboardEmbed { }

package/src/embed/sage.ts

@@ -18,14 +18,14 @@ import { V1Embed } from './ts-embed';
  */
 export interface SearchOptions {
     /**
-     * The query string to pre-fill in natual language search bar
+     * The query string to pass for Natural Language Search.
      */
     searchQuery: string;
     /**
-     * Boolean to determine if the search should be executed or not.
-     * if it is executed, put the focus on the results.
-     * if it’s not executed, put the focus in the search bar - at the end of
-     * the tokens
+     * Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
      */
     executeSearch?: boolean;
 }
@@ -34,7 +34,7 @@ export interface SearchOptions {
  * The configuration attributes for the embedded Natural language search view. Based on
  * GPT and LLM.
  *
- * @version: SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl, 9.5.1-sw
+ * @version: SDK: 1.23.0 | ThoughtSpot: 9.8.0.cl, 9.8.0.sw
  * @group Embed components
  */
 export interface SageViewConfig
@@ -43,11 +43,11 @@ export interface SageViewConfig
         'hiddenHomepageModules' | 'hiddenHomeLeftNavItems' | 'hiddenTabs' | 'visibleTabs' | 'reorderedHomepageModules'
     > {
     /**
-     * If set to true, a list of liveboard and answers related
+     * If set to true, a list of Liveboard and Answers related
      * to the natural language search will be shown below the
      * AI generated answer.
      *
-     * @deprecated Currently liveboard and answers related
+     * @deprecated Currently Liveboard and Answers related
      * to the natural language search will not be shown for sage
      * embed
      */
@@ -64,57 +64,75 @@ export interface SageViewConfig
      */
     isProductTour?: boolean;
     /**
-     * flag to hide search bar title. default false.
+     * Show or hide the search bar title.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideSearchBarTitle?: boolean;
     /**
-     * flag to disable Sage Answer header(`AI Answer` title section on top of the Sage
-     * answer). default false.
+     * Show or hide the Answer header, that is, the `AI Answer` title
+     * at the top of the Answer page.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.9.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.10.0.cl
      */
     hideSageAnswerHeader?: boolean;
     /**
-     * flag to disable changing worksheet. default false.
+     * Disable the worksheet selection option.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.9.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     disableWorksheetChange?: boolean;
     /**
-     * flag to hide worksheet selector. default false.
+     * Hide the worksheet selection panel.
+     *
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideWorksheetSelector?: boolean;
     /**
-     * If set to true, the search bar auto complete search suggestions will not be shown.
-     * default false
+     * Show or hide autocomplete suggestions for the search query string.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.9.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideAutocompleteSuggestions?: boolean;
     /**
-     * If set to false, the auto complete search suggestions not be shown
+     * Show or hide autocomplete suggestions for the search query string.
      *
-     * @deprecated currently, object suggestions will not be shown for sage embed
-     * earlier this flag was used to show Auto complete suggestions
+     * @deprecated
+     * Currently, the object suggestions will not be shown for Natural Language Search.
+     * You can use {@link hideAutocompleteSuggestions} instead.
      */
     showObjectSuggestions?: boolean;
     /**
-     * If set to true, sample questions would be hidden to user.
-     * These sample questions are autogenerated based on selected datasource.
+     * Show or hide sample questions.
+     * The sample questions are autogenerated based on the worksheet
+     * selected for the search operation.
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.10.0.cl
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     hideSampleQuestions?: boolean;
     /**
-     * The data source GUID to set on load.
+     * The data source GUID (Worksheet GUID) to set on load.
      */
     dataSource?: string;
     /**
-     * Configuration for search options
+     * Includes the following properties:
      *
-     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl
+     * `searchQuery`: The search query string to pass in the search bar.
+     * Supports Natural Language Search queries.
+     *
+     * `executeSearch`: Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
+     *
+     * @example
+     * ```js
+     * searchOptions: {
+     *    searchQuery: 'average sales by country and product type',
+     *    executeSearch: true,
+     * }
+     * ```
+     * @version SDK: 1.26.0 | Thoughtspot: 9.8.0.cl, 9.8.0.sw
      */
     searchOptions?: SearchOptions;
 }
@@ -129,7 +147,7 @@ export const HiddenActionItemByDefaultForSageEmbed = [
     Action.Share,
 ];
 /**
- * Embed ThoughtSpot LLM and GPT based natural language search component.
+ * Embed ThoughtSpot LLM and GPT-based Natural Language Search component.
  *
  * @version: SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl, 9.5.1-sw
  * @group Embed components
@@ -194,7 +212,7 @@ export class SageEmbed extends V1Embed {
      *
      * @returns {string} iframe url
      */
-    private getIFrameSrc() {
+    public getIFrameSrc(): string {
         const path = 'eureka';
         const postHashObj = {};
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();

package/src/embed/search-bar.tsx

@@ -20,25 +20,41 @@ export interface SearchBarViewConfig
     > {
     /**
      * The array of data source GUIDs to set on load.
-     * Only a single dataSource supported currently.
+     * Only a single data source is supported currently.
      *
-     * @deprecated Use dataSource instead
+     * @deprecated Use `dataSource` instead
      */
     dataSources?: string[];
     /**
      * The array of data source GUIDs to set on load.
      *
-     * @version: SDK: 1.19.0
+     * @version: SDK: 1.19.0, ThoughtSpot 9.0.0.cl, 9.0.1.sw
      */
     dataSource?: string;
     /**
-     * Flag to set if last selected dataSource should be used
+     * Boolean to define if the last selected data source should be used
      *
-     * @version: SDK: 1.24.0
+     * @version: SDK: 1.24.0, ThoughtSpot 9.5.0.cl, 9.5.0.sw
      */
     useLastSelectedSources?: boolean;
     /**
-     * Configuration for search options
+     * Configuration for search options.
+     * Includes the following properties:
+     *
+     * `searchTokenString`: Search tokens to pass in the query.
+     *
+     * `executeSearch`: Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
+     *
+     * @example
+     * ```js
+     * searchOptions: {
+     *    searchTokenString: '[quantity purchased] [region]',
+     *    executeSearch: true,
+     * }
+     * ```
      */
     searchOptions?: SearchOptions;
 }

package/src/embed/search.spec.ts

@@ -411,4 +411,17 @@ describe('Search embed tests', () => {
             );
         });
     });
+    test('should set hideSearchBar to true if hideSearchBar flag is true', async () => {
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            hideSearchBar: true,
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false&hideSearchBar=true${prefixParams}#/embed/saved-answer/${answerId}`,
+            );
+        });
+    });
 });