@thoughtspot/visual-embed-sdk 1.9.3 → 1.10.0-alpha.2

package/src/embed/search.ts

@@ -49,10 +49,6 @@ 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.
      */
@@ -130,7 +126,6 @@ export class SearchEmbed extends TsEmbed {
     private getIFrameSrc(answerId: string, dataSources?: string[]) {
         const {
             hideResults,
-            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,
@@ -173,8 +168,11 @@ export class SearchEmbed extends TsEmbed {
         if (queryParamsString) {
             query = `?${queryParamsString}`;
         }
+        const tsPostHashParams = this.getThoughtSpotPostUrlParams();
 
-        return `${this.getEmbedBasePath(query)}/${answerPath}`;
+        return `${this.getEmbedBasePath(
+            query,
+        )}/${answerPath}${tsPostHashParams}`;
     }
 
     /**

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

@@ -10,7 +10,12 @@ import {
     LiveboardEmbed,
 } from '../index';
 import { Action } from '../types';
-import { getDocumentBody, getIFrameSrc, getRootEl } from '../test/test-utils';
+import {
+    getDocumentBody,
+    getIFrameEl,
+    getIFrameSrc,
+    getRootEl,
+} from '../test/test-utils';
 import * as config from '../config';
 import * as tsEmbedInstance from './ts-embed';
 import * as mixpanelInstance from '../mixpanel-service';
@@ -28,6 +33,7 @@ const pinboardId = 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0';
 const liveboardId = 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0';
 const thoughtSpotHost = 'tshost';
 const defaultParamsForPinboardEmbed = `hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}`;
+const defaultParamsPost = '&isPinboardV2Enabled=false';
 
 describe('Unit test case for ts embed', () => {
     const mockMixPanelEvent = jest.spyOn(
@@ -227,7 +233,7 @@ describe('Unit test case for ts embed', () => {
         });
     });
 
-    describe('Naviage to Page API', () => {
+    describe('Navigate to Page API', () => {
         const path = 'viz/e0836cad-4fdf-42d4-bd97-567a6b2a6058';
         beforeEach(() => {
             jest.spyOn(config, 'getThoughtSpotHost').mockImplementation(
@@ -242,7 +248,7 @@ describe('Unit test case for ts embed', () => {
             await pinboardEmbed.render();
             // pinboardEmbed.navigateToPage(path);
             expect(getIFrameSrc()).toBe(
-                `http://${thoughtSpotHost}/?embedApp=true&${defaultParamsForPinboardEmbed}&isLiveboardEmbed=true#/embed/${path}`,
+                `http://${thoughtSpotHost}/?embedApp=true&${defaultParamsForPinboardEmbed}&isLiveboardEmbed=true${defaultParamsPost}#/embed/${path}`,
             );
         });
 
@@ -256,10 +262,23 @@ describe('Unit test case for ts embed', () => {
             await appEmbed.render();
             appEmbed.navigateToPage(path);
             expect(getIFrameSrc()).toBe(
-                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}#/${path}`,
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}${defaultParamsPost}#/${path}`,
             );
         });
 
+        test('Set Frame params to the iframe as attributes', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                    allowtransparency: true,
+                },
+            });
+            await appEmbed.render();
+            const iframe = getIFrameEl();
+            expect(iframe.getAttribute('allowtransparency')).toBe('true');
+        });
+
         test('navigateToPage function use before render', async () => {
             spyOn(console, 'log');
             const appEmbed = new AppEmbed(getRootEl(), {
@@ -275,7 +294,7 @@ describe('Unit test case for ts embed', () => {
             );
         });
     });
-    describe('Naviage to Page API - Pinboard', () => {
+    describe('Navigate to Page API - Pinboard', () => {
         const path = 'pinboard/e0836cad-4fdf-42d4-bd97-567a6b2a6058';
         beforeEach(() => {
             jest.spyOn(config, 'getThoughtSpotHost').mockImplementation(
@@ -293,7 +312,7 @@ describe('Unit test case for ts embed', () => {
             await appEmbed.render();
             appEmbed.navigateToPage(path);
             expect(getIFrameSrc()).toBe(
-                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}#/${path}`,
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}${defaultParamsPost}#/${path}`,
             );
         });
     });
@@ -319,8 +338,57 @@ describe('Unit test case for ts embed', () => {
             await appEmbed.render();
             expect(getIFrameSrc()).toBe(
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}` +
-                    '&foo=bar&baz=1&bool=true#/home',
+                    `&foo=bar&baz=1&bool=true${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    describe('validate getThoughtSpotPostUrlParams', () => {
+        const { location } = window;
+
+        beforeAll(() => {
+            delete window.location;
+            (window as any).location = {
+                hash: '',
+                search: '',
+            };
+        });
+
+        beforeEach(() => {
+            jest.spyOn(config, 'getThoughtSpotHost').mockImplementation(
+                () => 'http://tshost',
+            );
+        });
+
+        afterAll((): void => {
+            window.location = location;
+        });
+
+        it('get url params for TS', () => {
+            const tsEmbed = new tsEmbedInstance.TsEmbed(
+                getRootEl(),
+                defaultViewConfig,
+            );
+            const urlHash =
+                '#/analyze?ts-app=thoughtspot&ts-id=123&title=embed-sdk';
+            window.location.hash = urlHash;
+            const postHashParams = '?ts-app=thoughtspot&ts-id=123';
+            expect(tsEmbed.getThoughtSpotPostUrlParams()).toBe(postHashParams);
+        });
+
+        it('validate query params and postHash params for TS', () => {
+            const tsEmbed = new tsEmbedInstance.TsEmbed(
+                getRootEl(),
+                defaultViewConfig,
             );
+            const urlHash =
+                '#/analyze?ts-app=thoughtspot&ts-id=123&title=embed-sdk';
+            window.location.hash = urlHash;
+            const urlSearch = '?ts-type=subscribe&search-title=abc';
+            window.location.search = urlSearch;
+            const postHashParams =
+                '?ts-type=subscribe&ts-app=thoughtspot&ts-id=123';
+            expect(tsEmbed.getThoughtSpotPostUrlParams()).toBe(postHashParams);
         });
     });
 });

package/src/embed/ts-embed.ts

@@ -11,6 +11,7 @@ import {
     getEncodedQueryParamsString,
     getCssDimension,
     getOffsetTop,
+    setAttributes,
 } from '../utils';
 import {
     getThoughtSpotHost,
@@ -37,6 +38,11 @@ import { getAuthPromise, getEmbedConfig, renderInQueue } from './base';
 
 const { version } = pkgInfo;
 
+/**
+ * Global prefix for all Thoughtspot postHash Params.
+ */
+export const THOUGHTSPOT_PARAM_PREFIX = 'ts-';
+
 /**
  * The event id map from v2 event names to v1 event id
  * v1 events are the classic embed events implemented in Blink v1
@@ -62,6 +68,11 @@ export interface FrameParams {
      * The height of the iFrame (unit is pixels if numeric).
      */
     height?: number | string;
+    /**
+     * This parameters will be passed on the iframe
+     * as is.
+     */
+    [key: string]: string | number | boolean;
 }
 
 /**
@@ -403,7 +414,7 @@ export class TsEmbed {
      * @param url
      * @param frameOptions
      */
-    protected renderIFrame(url: string, frameOptions: FrameParams): void {
+    protected renderIFrame(url: string, frameOptions: FrameParams = {}): void {
         if (this.isError) {
             return;
         }
@@ -445,12 +456,19 @@ export class TsEmbed {
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
                     this.iFrame.mozallowfullscreen = true;
+                    const {
+                        height: frameHeight,
+                        width: frameWidth,
+                        ...restParams
+                    } = frameOptions;
                     const width = getCssDimension(
-                        frameOptions?.width || DEFAULT_EMBED_WIDTH,
+                        frameWidth || DEFAULT_EMBED_WIDTH,
                     );
                     const height = getCssDimension(
-                        frameOptions?.height || DEFAULT_EMBED_HEIGHT,
+                        frameWidth || DEFAULT_EMBED_HEIGHT,
                     );
+                    setAttributes(this.iFrame, restParams);
+
                     this.iFrame.style.width = `${width}`;
                     this.iFrame.style.height = `${height}`;
                     this.iFrame.style.border = '0';
@@ -653,6 +671,34 @@ export class TsEmbed {
 
         return this;
     }
+
+    /**
+     * Get the Post Url Params for THOUGHTSPOT from the current
+     * host app URL.
+     * THOUGHTSPOT URL params starts with a prefix "ts-"
+     */
+    public getThoughtSpotPostUrlParams(): string {
+        const urlHash = window.location.hash;
+        const queryParams = window.location.search;
+        const postHashParams = urlHash.split('?');
+        const postURLParams = postHashParams[postHashParams.length - 1];
+        const queryParamsObj = new URLSearchParams(queryParams);
+        const postURLParamsObj = new URLSearchParams(postURLParams);
+        const params = new URLSearchParams();
+
+        const addKeyValuePairCb = (value: string, key: string): void => {
+            if (key.startsWith(THOUGHTSPOT_PARAM_PREFIX)) {
+                params.append(key, value);
+            }
+        };
+        queryParamsObj.forEach(addKeyValuePairCb);
+        postURLParamsObj.forEach(addKeyValuePairCb);
+
+        let tsParams = params.toString();
+        tsParams = tsParams ? `?${tsParams}` : '';
+
+        return tsParams;
+    }
 }
 
 /**

package/src/react/index.spec.tsx

@@ -26,11 +26,16 @@ describe('React Components', () => {
     describe('SearchEmbed', () => {
         it('Should Render the Iframe with props', async () => {
             const { container } = render(
-                <SearchEmbed hideDataSources={true} />,
+                <SearchEmbed hideDataSources={true} className="embedClass" />,
             );
 
             await waitFor(() => getIFrameEl(container));
 
+            expect(
+                getIFrameEl(container).parentElement.classList.contains(
+                    'embedClass',
+                ),
+            ).toBe(true);
             expect(getIFrameSrc(container)).toBe(
                 `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&hideAction=[%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true#/embed/answer`,
             );

package/src/react/index.tsx

@@ -42,7 +42,13 @@ const componentFactory = <
                 }
             }, [embedProps]);
 
-            return <div data-testid="tsEmbed" ref={ref}></div>;
+            return (
+                <div
+                    data-testid="tsEmbed"
+                    ref={ref}
+                    className={className}
+                ></div>
+            );
         },
     );
 

package/src/types.ts

@@ -129,7 +129,7 @@ export interface EmbedConfig {
      * @version SDK: 1.9.3 | ThoughtSpot: 8.1.0.cl
      * @default false
      */
-     disableLoginRedirect?: boolean;
+    disableLoginRedirect?: boolean;
 
     /**
      * Calls the prefetch method internally when set to true
@@ -459,7 +459,6 @@ export enum DataSourceVisualMode {
 export enum Param {
     DataSources = 'dataSources',
     DataSourceMode = 'dataSourceMode',
-    ExpandAllDataSource = 'expandAllDataSource',
     DisableActions = 'disableAction',
     DisableActionReason = 'disableHint',
     ForceTable = 'forceTable',
@@ -483,8 +482,9 @@ export enum Param {
     ViewPortWidth = 'viewPortWidth',
     VisibleActions = 'visibleAction',
     CustomCSSUrl = 'customCssUrl',
-    visibleVizs = 'pinboardVisibleVizs',
     DisableLoginRedirect = 'disableLoginRedirect',
+    visibleVizs = 'pinboardVisibleVizs',
+    LiveboardV2Enabled = 'isPinboardV2Enabled',
 }
 
 /**
@@ -494,30 +494,57 @@ export enum Param {
 // eslint-disable-next-line no-shadow
 export enum Action {
     Save = 'save',
+    /**
+     * @hidden
+     */
     Update = 'update',
+    /**
+     * @hidden
+     */
     SaveUntitled = 'saveUntitled',
     SaveAsView = 'saveAsView',
     MakeACopy = 'makeACopy',
     EditACopy = 'editACopy',
     CopyLink = 'embedDocument',
+    /**
+     * @hidden
+     */
     ResetLayout = 'resetLayout',
     Schedule = 'subscription',
     SchedulesList = 'schedule-list',
     Share = 'share',
     AddFilter = 'addFilter',
     ConfigureFilter = 'configureFilter',
+    /**
+     * @hidden
+     */
     AddFormula = 'addFormula',
+    /**
+     * @hidden
+     */
     SearchOnTop = 'searchOnTop',
     SpotIQAnalyze = 'spotIQAnalyze',
+    /**
+     * @hidden
+     */
     ExplainInsight = 'explainInsight',
+    /**
+     * @hidden
+     */
     SpotIQFollow = 'spotIQFollow',
     ShareViz = 'shareViz',
+    /**
+     * @hidden
+     */
     ReplaySearch = 'replaySearch',
     ShowUnderlyingData = 'showUnderlyingData',
     Download = 'download',
     DownloadAsPdf = 'downloadAsPdf',
     DownloadAsCsv = 'downloadAsCSV',
     DownloadAsXlsx = 'downloadAsXLSX',
+    /**
+     * @hidden
+     */
     DownloadTrace = 'downloadTrace',
     ExportTML = 'exportTSL',
     ImportTML = 'importTSL',
@@ -528,18 +555,39 @@ export enum Action {
     Edit = 'edit',
     EditTitle = 'editTitle',
     Remove = 'delete',
+    /**
+     * @hidden
+     */
     Ungroup = 'ungroup',
+    /**
+     * @hidden
+     */
     Describe = 'describe',
+    /**
+     * @hidden
+     */
     Relate = 'relate',
+    /**
+     * @hidden
+     */
     CustomizeHeadlines = 'customizeHeadlines',
     /**
      * @hidden
      */
     PinboardInfo = 'pinboardInfo',
     LiveboardInfo = 'pinboardInfo',
+    /**
+     * @hidden
+     */
     SendAnswerFeedback = 'sendFeedback',
+    /**
+     * @hidden
+     */
     DownloadEmbraceQueries = 'downloadEmbraceQueries',
     Pin = 'pin',
+    /**
+     * @hidden
+     */
     AnalysisInfo = 'analysisInfo',
     Subscription = 'subscription',
     Explore = 'explore',
@@ -547,16 +595,18 @@ export enum Action {
     DrillExclude = 'context-menu-item-exclude',
     CopyToClipboard = 'context-menu-item-copy-to-clipboard',
     CopyAndEdit = 'context-menu-item-copy-and-edit',
+    /**
+     * @hidden
+     */
     DrillEdit = 'context-menu-item-edit',
     EditMeasure = 'context-menu-item-edit-measure',
     Separator = 'context-menu-item-separator',
+    /**
+     * @hidden
+     */
     DrillDown = 'DRILL',
     RequestAccess = 'requestAccess',
     QueryDetailsButtons = 'queryDetailsButtons',
-    /**
-     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
-     */
-    Monitor = 'createMonitor',
     /**
      * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
@@ -573,6 +623,10 @@ export enum Action {
      * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     EditDetails = 'editDetails',
+    /**
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    CreateMonitor = 'createMonitor',
 }
 
 export interface SessionInterface {

package/src/utils.ts

@@ -135,3 +135,12 @@ export const getOffsetTop = (element: any) => {
     const rect = element.getBoundingClientRect();
     return rect.top + window.scrollY;
 };
+
+export const setAttributes = (
+    element: HTMLElement,
+    attributes: { [key: string]: string | number | boolean },
+): void => {
+    Object.keys(attributes).forEach((key) => {
+        element.setAttribute(key, attributes[key].toString());
+    });
+};