@thoughtspot/visual-embed-sdk 1.24.0-sage.3 → 1.24.0

package/src/embed/app.spec.ts

@@ -144,6 +144,39 @@ describe('App embed tests', () => {
                 });
             });
         }
+
+        const pageRouteMapForModularHome = {
+            [Page.Search]: 'answer',
+            [Page.Answers]: 'home/answers',
+            [Page.Pinboards]: 'home/liveboards',
+            [Page.Liveboards]: 'home/liveboards',
+            [Page.Data]: 'data/tables',
+            [Page.Home]: 'home',
+            [Page.SpotIQ]: 'home/spotiq-analysis',
+        };
+
+        const pageIdsForModularHomes = Object.keys(pageRouteMapForModularHome);
+        for (let i = 0; i < pageIdsForModularHomes.length; i++) {
+            const pageIdsForModularHome = pageIdsForModularHomes[i];
+
+            test(`${pageIdsForModularHome}`, async () => {
+                const route = pageRouteMap[pageIdsForModularHome];
+                const appEmbed = new AppEmbed(getRootEl(), {
+                    ...defaultViewConfig,
+                    modularHomeExperience: true,
+                    pageId: pageIdsForModularHome as Page,
+                } as AppViewConfig);
+                appEmbed.render();
+
+                await executeAfterWait(() => {
+                    expectUrlMatchesWithParams(
+                        getIFrameSrc(),
+                        `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false${defaultParams}${defaultParamsPost}#/${route}`,
+                    );
+                    cleanUp();
+                });
+            });
+        }
     });
 
     test('should navigate to a path', async () => {
@@ -269,6 +302,36 @@ describe('App embed tests', () => {
         });
     });
 
+    test('Should add modularHomeExperience flag to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            modularHomeExperience: true,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=true${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add hideHomepageLeftNav flag to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            hideHomepageLeftNav: false,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&hideHomepageLeftNav=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('should register event handlers to adjust iframe height', async () => {
         const onSpy = jest.spyOn(AppEmbed.prototype, 'on')
             .mockImplementation((event, callback) => {

package/src/embed/app.ts

@@ -59,8 +59,19 @@ export interface AppViewConfig extends ViewConfig {
     /**
      * If true, the main navigation bar within the ThoughtSpot app
      * is displayed. By default, the navigation bar is hidden.
+     * This flag also control the homepage left nav-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.
+     *
+     * @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.
@@ -79,12 +90,24 @@ export interface AppViewConfig extends ViewConfig {
     /**
      * A URL path within the app that is to be embedded.
      * If both path and pageId attributes are defined, the path definition
-     * takes precedence.
+     * 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
+     * you could set the path to `pinboard/<liveboardId>/tab/<tabId>`.
+     *
+     * @example
+     * ```
+     * <AppEmbed path="pinboard/1234/tab/7464" />
+     * ```
      */
     path?: string;
     /**
      * The application page to set as the start page
      * in the embedded view.
+     *
+     * Use this to open to particular page in the app. To open to a specific
+     * path within the app, use the `path` attribute which is more flexible.
      */
     pageId?: Page;
     /**
@@ -111,13 +134,13 @@ export interface AppViewConfig extends ViewConfig {
      * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl, 8.8.1-sw
      */
     enableSearchAssist?: boolean;
-     /**
-      * If set to true, the embedded object container dynamically resizes
-      * according to the height of the pages which support fullHeight mode.
-      *
-      * @version SDK: 1.21.0 | ThoughtSpot: 9.4.0.cl, 9.4.0-sw
-      */
-    fullHeight?:boolean;
+    /**
+     * If set to true, the embedded object container dynamically resizes
+     * according to the height of the pages which support fullHeight mode.
+     *
+     * @version SDK: 1.21.0 | ThoughtSpot: 9.4.0.cl, 9.4.0-sw
+     */
+    fullHeight?: boolean;
     /**
      * Flag to control Data panel experience
      *
@@ -126,6 +149,13 @@ export interface AppViewConfig extends ViewConfig {
      * @hidden
      */
     dataPanelV2?: boolean;
+    /**
+     * Flag to control new Modular Home experience
+     *
+     * @default false
+     * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
+     */
+    modularHomeExperience?: boolean;
 }
 
 /**
@@ -164,6 +194,8 @@ export class AppEmbed extends V1Embed {
             enableSearchAssist,
             fullHeight,
             dataPanelV2 = false,
+            hideHomepageLeftNav = false,
+            modularHomeExperience = false,
         } = this.viewConfig;
 
         let params = {};
@@ -194,6 +226,8 @@ export class AppEmbed extends V1Embed {
         }
 
         params[Param.DataPanelV2Enabled] = dataPanelV2;
+        params[Param.HideHomepageLeftNav] = hideHomepageLeftNav;
+        params[Param.ModularHomeExperienceEnabled] = modularHomeExperience;
         const queryParams = getQueryParamString(params, true);
 
         return queryParams;
@@ -205,8 +239,8 @@ export class AppEmbed extends V1Embed {
      * @param pageId The ID of the page to be embedded.
      */
     private getIFrameSrc() {
-        const { pageId, path } = this.viewConfig;
-        const pageRoute = this.formatPath(path) || this.getPageRoute(pageId);
+        const { pageId, path, modularHomeExperience } = this.viewConfig;
+        const pageRoute = this.formatPath(path) || this.getPageRoute(pageId, modularHomeExperience);
         let url = `${this.getRootIframeSrc()}/${pageRoute}`;
 
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();
@@ -243,21 +277,22 @@ export class AppEmbed extends V1Embed {
      * Gets the ThoughtSpot route of the page for a particular page ID.
      *
      * @param pageId The identifier for a page in the ThoughtSpot app.
+     * @param modularHomeExperience
      */
-    private getPageRoute(pageId: Page) {
+    private getPageRoute(pageId: Page, modularHomeExperience = false) {
         switch (pageId) {
             case Page.Search:
                 return 'answer';
             case Page.Answers:
-                return 'answers';
+                return modularHomeExperience ? 'home/answers' : 'answers';
             case Page.Liveboards:
-                return 'pinboards';
+                return modularHomeExperience ? 'home/liveboards' : 'pinboards';
             case Page.Pinboards:
-                return 'pinboards';
+                return modularHomeExperience ? 'home/liveboards' : 'pinboards';
             case Page.Data:
                 return 'data/tables';
             case Page.SpotIQ:
-                return 'insights/results';
+                return modularHomeExperience ? 'home/spotiq-analysis' : 'insights/results';
             case Page.Home:
             default:
                 return 'home';

package/src/embed/base.ts

@@ -44,13 +44,13 @@ export interface executeTMLInput {
 
 export interface exportTMLInput {
     metadata: {
-      identifier: string;
-      type?: 'LIVEBOARD' | 'ANSWER' | 'LOGICAL_TABLE' | 'CONNECTION';
+        identifier: string;
+        type?: 'LIVEBOARD' | 'ANSWER' | 'LOGICAL_TABLE' | 'CONNECTION';
     }[];
     export_associated?: boolean;
     export_fqn?: boolean;
     edoc_format?: 'YAML' | 'JSON';
-  }
+}
 
 export let authPromise: Promise<boolean>;
 /**
@@ -192,9 +192,9 @@ export const init = (embedConfig: EmbedConfig): AuthEventEmitter => {
     setAuthEE(authEE);
     handleAuth();
 
+    const { password, ...configToTrack } = config;
     uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_CALLED_INIT, {
-        authType: config.authType,
-        host: config.thoughtSpotHost,
+        ...configToTrack,
         usedCustomizationSheet: embedConfig.customizations?.style?.customCSSUrl != null,
         usedCustomizationVariables: embedConfig.customizations?.style?.customCSS?.variables != null,
         usedCustomizationRules:
@@ -258,6 +258,7 @@ export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>):
 
 /**
  * Imports TML representation of the metadata objects into ThoughtSpot.
+ *
  * @param data
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  */
@@ -305,7 +306,9 @@ export const executeTML = async (data: executeTMLInput): Promise<any> => {
 };
 
 /**
- * Exports TML representation of the metadata objects from ThoughtSpot in JSON or YAML format.
+ * Exports TML representation of the metadata objects from ThoughtSpot in JSON or YAML
+ * format.
+ *
  * @param data
  * @version SDK: 1.23.0 | ThoughtSpot: 9.4.0.cl
  */

package/src/embed/liveboard.spec.ts

@@ -337,22 +337,22 @@ describe('Liveboard/viz embed tests', () => {
             done();
         });
     });
-
-    test('SetActiveTab Hostevent trigger the navigate event with the correct path, not vizEmbed', async () => {
-        const mockProcessTrigger = jest.spyOn(tsEmbed.TsEmbed.prototype, 'trigger');
+    test('should set runtime parametere values in url params', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
-            enableVizTransformations: true,
             ...defaultViewConfig,
             liveboardId,
+            runtimeParameters: [
+                {
+                    name: 'Integer Date Range',
+                    value: 1,
+                },
+            ],
         } as LiveboardViewConfig);
         liveboardEmbed.render();
         await executeAfterWait(() => {
-            const result = liveboardEmbed.trigger(HostEvent.SetActiveTab, {
-                tabId: newActiveTabId,
-            });
-            expect(mockProcessTrigger).toHaveBeenCalledWith(
-                HostEvent.Navigate,
-                `embed/viz/${liveboardId}/tab/${newActiveTabId}`,
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}${prefixParams}&param1=Integer%20Date%20Range&paramVal1=1#/embed/viz/${liveboardId}`,
             );
         });
     });
@@ -373,4 +373,23 @@ describe('Liveboard/viz embed tests', () => {
             expect(mockProcessTrigger).not.toBeCalled();
         });
     });
+
+    test('SetActiveTab Hostevent trigger the navigate event with the correct path, not vizEmbed', async () => {
+        const mockProcessTrigger = jest.spyOn(tsEmbed.TsEmbed.prototype, 'trigger');
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            enableVizTransformations: true,
+            ...defaultViewConfig,
+            liveboardId,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            const result = liveboardEmbed.trigger(HostEvent.SetActiveTab, {
+                tabId: newActiveTabId,
+            });
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                HostEvent.Navigate,
+                `embed/viz/${liveboardId}/tab/${newActiveTabId}`,
+            );
+        });
+    });
 });

package/src/embed/liveboard.ts

@@ -15,11 +15,12 @@ import {
     MessagePayload,
     Param,
     RuntimeFilter,
+    RuntimeParameter,
     DOMSelector,
     HostEvent,
     ViewConfig,
 } from '../types';
-import { getQueryParamString } from '../utils';
+import { getQueryParamString, getRuntimeParameters } from '../utils';
 import { getAuthPromise } from './base';
 import { V1Embed } from './ts-embed';
 
@@ -105,6 +106,10 @@ export interface LiveboardViewConfig extends ViewConfig {
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     hideTabPanel?: boolean;
+    /**
+     * The list of parameter override to apply to a Liveboard.
+     */
+    runtimeParameters?: RuntimeParameter[];
 }
 
 /**
@@ -154,6 +159,7 @@ export class LiveboardEmbed extends V1Embed {
             vizId,
             hideTabPanel,
             activeTabId,
+            runtimeParameters,
         } = this.viewConfig;
 
         const preventLiveboardFilterRemoval = this.viewConfig.preventLiveboardFilterRemoval
@@ -184,7 +190,10 @@ export class LiveboardEmbed extends V1Embed {
         if (hideTabPanel) {
             params[Param.HideTabPanel] = hideTabPanel;
         }
-        const queryParams = getQueryParamString(params, true);
+        let queryParams = getQueryParamString(params, true);
+
+        const parameterQuery = getRuntimeParameters(runtimeParameters || []);
+        if (parameterQuery) queryParams += `&${parameterQuery}`;
 
         return queryParams;
     }

package/src/embed/search-bar.tsx

@@ -1,6 +1,4 @@
-import {
-    DOMSelector, Param, Action, ViewConfig,
-} from '../types';
+import { Param, ViewConfig } from '../types';
 import { getQueryParamString } from '../utils';
 import { TsEmbed } from './ts-embed';
 import { SearchOptions } from './search';
@@ -8,7 +6,8 @@ import { SearchOptions } from './search';
 /**
  * @group Embed components
  */
-export interface SearchBarViewConfig extends Omit<ViewConfig, 'runtimeFilters' | 'showAlerts' | 'dataPanelV2'> {
+export interface SearchBarViewConfig
+    extends Omit<ViewConfig, 'runtimeFilters' | 'showAlerts' | 'dataPanelV2'> {
     /**
      * The array of data source GUIDs to set on load.
      * Only a single dataSource supported currently.
@@ -22,6 +21,12 @@ export interface SearchBarViewConfig extends Omit<ViewConfig, 'runtimeFilters' |
      * @version: SDK: 1.19.0
      */
     dataSource?: string;
+    /**
+     * Flag to set if last selected dataSource should be used
+     *
+     * @version: SDK: 1.24.0
+     */
+    useLastSelectedSources?: boolean;
     /**
      * Configuration for search options
      */
@@ -52,7 +57,12 @@ export class SearchBarEmbed extends TsEmbed {
      * @param dataSources A list of data source GUIDs
      */
     private getIFrameSrc() {
-        const { searchOptions, dataSource, dataSources } = this.viewConfig;
+        const {
+            searchOptions,
+            dataSource,
+            dataSources,
+            useLastSelectedSources = false,
+        } = this.viewConfig;
         const path = 'search-bar-embed';
         const queryParams = this.getBaseQueryParams();
 
@@ -74,7 +84,10 @@ export class SearchBarEmbed extends TsEmbed {
             }
         }
 
-        queryParams[Param.UseLastSelectedDataSource] = false;
+        queryParams[Param.UseLastSelectedDataSource] = useLastSelectedSources;
+        if (dataSource || dataSources) {
+            queryParams[Param.UseLastSelectedDataSource] = false;
+        }
         queryParams[Param.searchEmbed] = true;
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);

package/src/embed/search.spec.ts

@@ -350,4 +350,65 @@ describe('Search embed tests', () => {
             );
         });
     });
+    test('should set useLastSelectedSources to true if useLastSelectedSources flag is true', async () => {
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            useLastSelectedSources: true,
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=true${prefixParams}#/embed/saved-answer/${answerId}`,
+            );
+        });
+    });
+    test('should set useLastSelectedSources to false if datasource is given irrespective of useLastSelectedSources', async () => {
+        const dataSource = 'data-source-1';
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            useLastSelectedSources: true,
+            dataSource,
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+            );
+        });
+    });
+    test('should set useLastSelectedSources to false if datasources are given irrespective of useLastSelectedSources', async () => {
+        const dataSources = ['data-source-1'];
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            useLastSelectedSources: true,
+            dataSources,
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSources=[%22data-source-1%22]&dataSourceMode=expand&enableDataPanelV2=false&useLastSelectedSources=false${prefixParams}#/embed/saved-answer/${answerId}`,
+            );
+        });
+    });
+    test('should set runtime parametere values in url params', async () => {
+        const searchEmbed = new SearchEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            runtimeParameters: [
+                {
+                    name: 'Integer Date Range',
+                    value: 1,
+                },
+            ],
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParamsWithHiddenActions}&dataSourceMode=expand&useLastSelectedSources=false${prefixParams}&param1=Integer%20Date%20Range&paramVal1=1#/embed/saved-answer/${answerId}`,
+            );
+        });
+    });
 });

package/src/embed/search.ts

@@ -14,8 +14,14 @@ import {
     Action,
     ViewConfig,
     RuntimeFilter,
+    RuntimeParameter,
 } from '../types';
-import { getQueryParamString, checkReleaseVersionInBeta, getFilterQuery } from '../utils';
+import {
+    getQueryParamString,
+    checkReleaseVersionInBeta,
+    getFilterQuery,
+    getRuntimeParameters,
+} from '../utils';
 import { TsEmbed } from './ts-embed';
 import { version } from '../../package.json';
 import { ERROR_MESSAGE } from '../errors';
@@ -60,6 +66,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.
      *
@@ -110,9 +120,18 @@ export interface SearchViewConfig extends ViewConfig {
      *
      * @default false
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
-     * @hidden
      */
     dataPanelV2?: boolean;
+    /**
+     * Flag to set if last selected dataSource should be used
+     *
+     * @version: SDK: 1.24.0
+     */
+    useLastSelectedSources?: boolean;
+    /**
+     * The list of parameter override to apply to a search answer.
+     */
+    runtimeParameters?: RuntimeParameter[];
 }
 
 export const HiddenActionItemByDefaultForSearchEmbed = [
@@ -158,6 +177,7 @@ export class SearchEmbed extends TsEmbed {
     protected getEmbedParams(): string {
         const {
             hideResults,
+            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,
@@ -166,6 +186,8 @@ export class SearchEmbed extends TsEmbed {
             dataSources,
             excludeRuntimeFiltersfromURL,
             dataPanelV2 = false,
+            useLastSelectedSources = false,
+            runtimeParameters,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
 
@@ -201,13 +223,22 @@ export class SearchEmbed extends TsEmbed {
 
         queryParams[Param.DataPanelV2Enabled] = dataPanelV2;
         queryParams[Param.DataSourceMode] = this.getDataSourceMode();
-        queryParams[Param.UseLastSelectedDataSource] = false;
+
+        queryParams[Param.UseLastSelectedDataSource] = useLastSelectedSources;
+        if (dataSource || dataSources) {
+            queryParams[Param.UseLastSelectedDataSource] = false;
+        }
+
         queryParams[Param.searchEmbed] = true;
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);
         if (queryParamsString) {
             query = `?${queryParamsString}`;
         }
+
+        const parameterQuery = getRuntimeParameters(runtimeParameters || []);
+        if (parameterQuery) query += `&${parameterQuery}`;
+
         const filterQuery = getFilterQuery(runtimeFilters || []);
         if (filterQuery && !excludeRuntimeFiltersfromURL) {
             query += `&${filterQuery}`;