@thoughtspot/visual-embed-sdk 1.24.0-alpha.3 → 1.24.0-alpha.4

package/src/css-variables.ts

@@ -23,6 +23,13 @@ export interface CustomCssVariables {
      */
     '--ts-var-root-text-transform'?: string;
 
+    /**
+     * application color, it replaces #2770EF which is rd-color(blue,base) and
+     * its similar colors like rd-color(blue,60), rd-color(accent, base) and
+     * rd-color(text, accent) in the app.
+     */
+    '--ts-var-application-color'?: string;
+
     /**
      * Background color of the top navigation panel.
      */
@@ -345,6 +352,11 @@ export interface CustomCssVariables {
      */
     '--ts-var-menu--hover-background'?: string;
 
+    /**
+     * Text color for selected menu items.
+     */
+    '--ts-var-menu-selected-text-color'?: string;
+
     /**
      * Background color of the dialogs.
      */
@@ -369,4 +381,39 @@ export interface CustomCssVariables {
      * Background color of the footer area on dialogs.
      */
     '--ts-var-dialog-footer-background'?: string;
+
+    /**
+     * Background for selected state in list
+     */
+    '--ts-var-list-selected-background'?: string;
+
+    /**
+     * Background for hover state in list
+     */
+    '--ts-var-list-hover-background'?: string;
+
+    /**
+     * Background for hover state in segment control.
+     */
+    '--ts-var-segment-control-hover-background'?: string;
+
+    /**
+     * Text color for slected item in modular home's watchlist.
+     */
+    '--ts-var-home-watchlist-selected-text-color'?: string;
+
+    /**
+     * Text color for favorite carousel find your favorites card in modular home.
+     */
+    '--ts-var-home-favorite-suggestion-card-text-color'?: string;
+
+    /**
+     * Icon color for favorite carousel find your favorites card in modular home.
+     */
+    '--ts-var-home-favorite-suggestion-card-icon-color'?: string;
+
+    /**
+     * Background for favorite carousel find your favorites card in modular home.
+     */
+    '--ts-var-home-favorite-suggestion-card-background'?: string;
   }

package/src/embed/app.spec.ts

@@ -284,6 +284,21 @@ describe('App embed tests', () => {
         });
     });
 
+    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.
@@ -183,6 +194,7 @@ export class AppEmbed extends V1Embed {
             enableSearchAssist,
             fullHeight,
             dataPanelV2 = false,
+            hideHomepageLeftNav = false,
             modularHomeExperience = false,
         } = this.viewConfig;
 
@@ -214,6 +226,7 @@ export class AppEmbed extends V1Embed {
         }
 
         params[Param.DataPanelV2Enabled] = dataPanelV2;
+        params[Param.HideHomepageLeftNav] = hideHomepageLeftNav;
         params[Param.ModularHomeExperienceEnabled] = modularHomeExperience;
         const queryParams = getQueryParamString(params, true);
 

package/src/embed/base.ts

@@ -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/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,47 @@ 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}`,
+            );
+        });
+    });
 });

package/src/embed/search.ts

@@ -110,9 +110,14 @@ 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;
 }
 
 export const HiddenActionItemByDefaultForSearchEmbed = [
@@ -166,6 +171,7 @@ export class SearchEmbed extends TsEmbed {
             dataSources,
             excludeRuntimeFiltersfromURL,
             dataPanelV2 = false,
+            useLastSelectedSources = false,
         } = this.viewConfig;
         const queryParams = this.getBaseQueryParams();
 
@@ -201,7 +207,12 @@ 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);

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

@@ -9,7 +9,13 @@ import {
     AppEmbed,
     LiveboardEmbed,
 } from '../index';
-import { Action, RuntimeFilter, RuntimeFilterOp } from '../types';
+import {
+    Action,
+    HomeLeftNavItem,
+    RuntimeFilter,
+    RuntimeFilterOp,
+    HomepageModule,
+} from '../types';
 import {
     executeAfterWait,
     getDocumentBody,
@@ -101,7 +107,13 @@ describe('Unit test case for ts embed', () => {
             });
             expect(mockPort.postMessage).toHaveBeenCalledWith({
                 type: EmbedEvent.APP_INIT,
-                data: { customisations, authToken: '', runtimeFilterParams: null },
+                data: {
+                    customisations,
+                    authToken: '',
+                    runtimeFilterParams: null,
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [],
+                },
             });
         });
 
@@ -128,6 +140,8 @@ describe('Unit test case for ts embed', () => {
                     customisations: customisationsView,
                     authToken: '',
                     runtimeFilterParams: null,
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [],
                 },
             });
             expect(getIFrameSrc()).toContain(
@@ -135,6 +149,42 @@ describe('Unit test case for ts embed', () => {
             );
         });
 
+        test('hide home page modules from view Config should be part of app_init payload', async () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const mockedHiddenHomepageModules: HomepageModule[] = [
+                HomepageModule.MyLibrary,
+                HomepageModule.Learning,
+            ];
+
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                hiddenHomepageModules: mockedHiddenHomepageModules,
+            });
+            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: '',
+                    hostConfig: undefined,
+                    runtimeFilterParams: null,
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [HomepageModule.MyLibrary,
+                        HomepageModule.Learning],
+                },
+            });
+        });
+
         test('Runtime filters from view Config should be part of app_init payload', async () => {
             const mockEmbedEventPayload = {
                 type: EmbedEvent.APP_INIT,
@@ -166,6 +216,44 @@ describe('Unit test case for ts embed', () => {
                     customisations,
                     authToken: '',
                     runtimeFilterParams: 'col1=color&op1=EQ&val1=blue',
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [],
+                },
+            });
+        });
+
+        test('homeLeftNav from view Config should be part of app_init payload', async () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const mockedHiddenHomeLeftNavItems: HomeLeftNavItem[] = [
+                HomeLeftNavItem.Home,
+                HomeLeftNavItem.Documentation,
+            ];
+
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                hiddenHomeLeftNavItems: mockedHiddenHomeLeftNavItems,
+            });
+            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: '',
+                    hostConfig: undefined,
+                    runtimeFilterParams: null,
+                    hiddenHomeLeftNavItems: [HomeLeftNavItem.Home,
+                        HomeLeftNavItem.Documentation],
+                    hiddenHomepageModules: [],
                 },
             });
         });
@@ -319,6 +407,8 @@ describe('Unit test case for ts embed', () => {
                         customisations,
                         authToken: 'test_auth_token1',
                         runtimeFilterParams: null,
+                        hiddenHomeLeftNavItems: [],
+                        hiddenHomepageModules: [],
                     },
                 });
             });

package/src/embed/ts-embed.ts

@@ -273,7 +273,10 @@ export class TsEmbed {
                 customisations: getCustomisations(this.embedConfig, this.viewConfig),
                 authToken,
                 runtimeFilterParams: getRuntimeFilters(this.viewConfig.runtimeFilters),
+                hiddenHomepageModules: this.viewConfig.hiddenHomepageModules || [],
                 hostConfig: this.embedConfig.hostConfig,
+                hiddenHomeLeftNavItems: this.viewConfig?.hiddenHomeLeftNavItems
+                    ? this.viewConfig?.hiddenHomeLeftNavItems : [],
             },
         });
     };

package/src/types.ts

@@ -178,6 +178,16 @@ export enum AuthType {
     Basic = 'Basic',
 }
 
+export enum HomeLeftNavItem {
+    Home = 'insights-home',
+    Liveboards = 'liveboards',
+    Answers = 'answers',
+    MonitorSubscription = 'monitor-alerts',
+    SpotIQAnalysis = 'spotiq-analysis',
+    Tutorials = 'tutorials',
+    Documentation = 'documentation',
+    Community = 'community',
+}
 export type DOMSelector = string | HTMLElement;
 
 /**
@@ -723,6 +733,12 @@ export interface ViewConfig {
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     hiddenTabs?: string[];
+    /**
+     * Hide the home page modules
+     * eg: hiddenHomepageModules = [HomepageModule.MyLibrary]
+     * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
+     */
+    hiddenHomepageModules?: HomepageModule[];
     /**
      * The list of tab IDs to show in the embedded.
      * Only this Tabs will be shown in their respective LBs.
@@ -742,6 +758,14 @@ export interface ViewConfig {
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     visibleTabs?: string[];
+    /**
+     * homepageLeftNavItems : show/hide Homeapage Left Nav Bar Items
+     * There are 8 home nav list items, we will send those item as list
+     * which we want to hide for TSE.
+     * eg: hiddenHomeLeftNavItems = [HomeLeftNavItem.Home] to hide home.
+     * @version SDK: 1.27.0 | Thoughtspot: 9.8.0.cl
+     */
+    hiddenHomeLeftNavItems?: HomeLeftNavItem[];
 }
 
 /**
@@ -866,6 +890,37 @@ export enum RuntimeFilterOp {
     IN = 'IN',
 }
 
+/**
+ * Home page module that can be hide
+ */
+// eslint-disable-next-line no-shadow
+export enum HomepageModule {
+    /**
+     * Search bar
+     */
+    Search = 'search',
+    /**
+     * kPI watchlist module
+     */
+    Watchlist = 'watchlist',
+    /**
+     * favorite objects
+     */
+    Favorite = 'favorite',
+    /**
+     * List of answers and liveboards
+     */
+    MyLibrary = 'mylibrary',
+    /**
+     * Trending list
+     */
+    Trending = 'trending',
+    /**
+     * Learning videos
+     */
+    Learning = 'learning',
+}
+
 /**
  * A filter that can be applied to ThoughtSpot answers, Liveboards, or
  * visualizations at runtime.
@@ -1329,6 +1384,12 @@ export enum EmbedEvent {
      * @version SDK : 1.27.0 | Thoughtspot: 9.7.0.cl
      */
     SageWorksheetUpdated = 'sageWorksheetUpdated',
+    /**
+     * Emitten when a user updates a connection in Data tab
+     *
+     * @version SDK : 1.27.0 | Thoughtspot: 9.8.0.cl
+     */
+    UpdateConnection = 'updateConnection',
 }
 
 /**
@@ -2139,6 +2200,7 @@ export enum Param {
     HideSampleQuestions = 'hideSampleQuestions',
     WorksheetId = 'worksheet',
     Query = 'query',
+    HideHomepageLeftNav = 'hideHomepageLeftNav',
     ModularHomeExperienceEnabled = 'modularHomeExperience',
 }
 
@@ -2645,7 +2707,7 @@ export enum Action {
     * disabledActions: [Action.QueryDetailsButtons]
     * ```
     */
-    QueryDetailsButtons = 'QueryDetailsButtons',
+    QueryDetailsButtons = 'queryDetailsButtons',
     /**
      * The **Delete** action for Answers.
      *
@@ -2950,6 +3012,25 @@ export enum Action {
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     ModifySageAnswer = 'modifySageAnswer',
+    /**
+     * The **Move to Tab** menu action on visualizations in liveboard edit mode.
+     * Allows moving a visualization to a different tab.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.MoveToTab]
+     * ```
+     */
+    MoveToTab = 'onContainerMove',
+    /**
+     * The **Manage Alertsb** menu action on KPI visualizations.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.ManageMonitor]
+     * ```
+     */
+    ManageMonitor = 'ManageMonitor',
 }
 
 export interface SessionInterface {