@thoughtspot/visual-embed-sdk 1.15.0 → 1.16.0

package/src/embed/base.spec.ts

@@ -55,7 +55,11 @@ describe('Base TS Embed', () => {
 
     test('Should add the prefetch iframe when prefetch is called. Should remove it once init is called.', async () => {
         const url = 'https://10.87.90.95/';
-        index.prefetch(url);
+        index.init({
+            thoughtSpotHost: url,
+            authType: index.AuthType.None,
+            callPrefetch: true,
+        });
         expect(getAllIframeEl().length).toBe(1);
         const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>(
             '.prefetchIframe',
@@ -65,6 +69,25 @@ describe('Base TS Embed', () => {
         expect(firstIframe.src).toBe(url);
     });
 
+    test('Should add the prefetch iframe when prefetch is called with multiple options', async () => {
+        const url = 'https://10.87.90.95/';
+        const searchUrl = `${url}v2/#/embed/answer`;
+        const liveboardUrl = url;
+        index.prefetch(url, [
+            index.PrefetchFeatures.SearchEmbed,
+            index.PrefetchFeatures.LiveboardEmbed,
+        ]);
+        expect(getAllIframeEl().length).toBe(2);
+        const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>(
+            '.prefetchIframe',
+        );
+        expect(prefetchIframe.length).toBe(2);
+        const firstIframe = <HTMLIFrameElement>prefetchIframe[0];
+        expect(firstIframe.src).toBe(searchUrl);
+        const secondIframe = <HTMLIFrameElement>prefetchIframe[1];
+        expect(secondIframe.src).toBe(liveboardUrl);
+    });
+
     test('Should not generate a prefetch iframe when url is empty string', async () => {
         const url = '';
         index.prefetch(url);
@@ -162,6 +185,7 @@ describe('Base without init', () => {
         base.notifyAuthSuccess();
         base.notifyAuthFailure(auth.AuthFailureType.SDK);
         base.notifyLogout();
-        expect(global.console.error).toHaveBeenCalledTimes(3);
+        base.notifyAuthSDKSuccess();
+        expect(global.console.error).toHaveBeenCalledTimes(4);
     });
 });

package/src/embed/base.ts

@@ -8,8 +8,9 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 import EventEmitter from 'eventemitter3';
+import _ from 'lodash';
 import { getThoughtSpotHost } from '../config';
-import { AuthType, EmbedConfig } from '../types';
+import { AuthType, EmbedConfig, PrefetchFeatures } from '../types';
 import {
     authenticate,
     logout as _logout,
@@ -83,35 +84,54 @@ export const handleAuth = (): Promise<boolean> => {
     return authPromise;
 };
 
+const hostUrlToFeatureUrl = {
+    [PrefetchFeatures.SearchEmbed]: (url: string) => `${url}v2/#/embed/answer`,
+    [PrefetchFeatures.LiveboardEmbed]: (url: string) => url,
+    [PrefetchFeatures.FullApp]: (url: string) => url,
+    [PrefetchFeatures.VizEmbed]: (url: string) => url,
+};
+
 /**
  * Prefetches static resources from the specified URL. Web browsers can then cache the prefetched resources and serve them from the user's local disk to provide faster access to your app.
  * @param url The URL provided for prefetch
+ * @param prefetchFeatures Specify features which needs to be prefetched.
+ * @version SDK: 1.4.0 | ThoughtSpot: ts7.sep.cl, 7.2.1
  */
-export const prefetch = (url?: string): void => {
+export const prefetch = (
+    url?: string,
+    prefetchFeatures?: PrefetchFeatures[],
+): void => {
     if (url === '') {
         // eslint-disable-next-line no-console
         console.warn('The prefetch method does not have a valid URL');
     } else {
-        const iFrame = document.createElement('iframe');
-        iFrame.src = url || config.thoughtSpotHost;
-        iFrame.style.width = '0';
-        iFrame.style.height = '0';
-        iFrame.style.border = '0';
-        iFrame.classList.add('prefetchIframe');
-        document.body.appendChild(iFrame);
+        const features = prefetchFeatures || [PrefetchFeatures.FullApp];
+        let hostUrl = url || config.thoughtSpotHost;
+        hostUrl = hostUrl[hostUrl.length - 1] === '/' ? hostUrl : `${hostUrl}/`;
+        _.uniq(
+            features.map((feature) => hostUrlToFeatureUrl[feature](hostUrl)),
+        ).forEach((prefetchUrl, index) => {
+            const iFrame = document.createElement('iframe');
+            iFrame.src = prefetchUrl;
+            iFrame.style.width = '0';
+            iFrame.style.height = '0';
+            iFrame.style.border = '0';
+            iFrame.classList.add('prefetchIframe');
+            iFrame.classList.add(`prefetchIframeNum-${index}`);
+            document.body.appendChild(iFrame);
+        });
     }
 };
 
 /**
- * Initialize the ThoughtSpot embed SDK globally and perform
+ * Initializes the Visual Embed SDK globally and perform
  * authentication if applicable.
  * @param embedConfig The configuration object containing ThoughtSpot host,
  * authentication mechanism and so on.
- *
- * eg: authStatus = init(config);
+ * example: authStatus = init(config);
  * authStatus.on(AuthStatus.FAILURE, (reason) => { // do something here });
- *
- * @returns event emitter which emits events on authentication success, failure and logout. {@link AuthStatus}
+ * @returns event emitter which emits events on authentication success, failure and logout. See {@link AuthStatus}
+ * @version SDK: 1.0.0 | ThoughtSpot ts7.april.cl, 7.2.1
  */
 export const init = (embedConfig: EmbedConfig): EventEmitter => {
     config = {
@@ -125,6 +145,13 @@ export const init = (embedConfig: EmbedConfig): EventEmitter => {
     uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_CALLED_INIT, {
         authType: config.authType,
         host: config.thoughtSpotHost,
+        usedCustomizationSheet:
+            embedConfig.customisations?.style?.customCSSUrl != null,
+        usedCustomizationVariables:
+            embedConfig.customisations?.style?.customCss?.variables != null,
+        usedCustomizationRules:
+            embedConfig.customisations?.style?.customCss?.rules_UNSTABLE !=
+            null,
     });
 
     if (config.callPrefetch) {
@@ -138,7 +165,7 @@ export function disableAutoLogin(): void {
 }
 
 /**
- * Logout from ThoughtSpot. This also sets the autoLogin flag to false, to prevent
+ * Logs out from ThoughtSpot. This also sets the autoLogin flag to false, to prevent
  * the SDK from automatically logging in again.
  *
  * You can call the `init` method again to re login, if autoLogin is set to true in this

package/src/embed/liveboard.spec.ts

@@ -29,8 +29,7 @@ const thoughtSpotHost = 'tshost';
 const defaultParamsSansHideAction = `&hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}`;
 const defaultParams = `${defaultParamsSansHideAction}&hideAction=[%22${Action.ReportError}%22]`;
 const prefixParams = '&isLiveboardEmbed=true';
-const prefixParamsVizEmbed =
-    '&isLiveboardEmbed=true&isVizEmbed=true';
+const prefixParamsVizEmbed = '&isLiveboardEmbed=true&isVizEmbed=true';
 
 beforeAll(() => {
     init({
@@ -249,4 +248,19 @@ describe('Liveboard/viz embed tests', () => {
             );
         });
     });
+    test('Should set liveboard options', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            liveboardId,
+            activeTabId,
+            liveboardV2: true,
+            defaultHeight: 100,
+            preventLiveboardFilterRemoval: true,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expect(getIFrameSrc()).toBe(
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&preventPinboardFilterRemoval=true&isLiveboardEmbed=true&isPinboardV2Enabled=true#/embed/viz/${liveboardId}/tab/${activeTabId}`,
+            );
+        });
+    });
 });

package/src/embed/liveboard.ts

@@ -29,6 +29,7 @@ export interface LiveboardViewConfig extends ViewConfig {
     /**
      * If set to true, the embedded object container dynamically resizes
      * according to the height of the Liveboard.
+     * @version SDK: 1.1.0 | ThoughtSpot: ts7.may.cl, 7.2.1
      */
     fullHeight?: boolean;
     /**
@@ -40,12 +41,13 @@ export interface LiveboardViewConfig extends ViewConfig {
      */
     defaultHeight?: number;
     /**
-     * If set to true, the context menu in visualizations will be enabled.
+     * @Deprecated If set to true, the context menu in visualizations will be enabled.
      */
     enableVizTransformations?: boolean;
     /**
      * The Liveboard to display in the embedded view.
      * Use either of liveboardId or pinboardId to reference the Liveboard to embed.
+     * @version SDK: 1.3.0 | ThoughtSpot ts7.aug.cl, 7.2.1
      */
     liveboardId?: string;
     /**
@@ -60,6 +62,7 @@ export interface LiveboardViewConfig extends ViewConfig {
     /**
      * 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
      */
     preventLiveboardFilterRemoval?: boolean;
     /**

package/src/embed/pinboard.spec.ts

@@ -21,8 +21,7 @@ const thoughtSpotHost = 'tshost';
 const defaultParamsWithoutHideActions = `&hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}`;
 const defaultParams = `${defaultParamsWithoutHideActions}&hideAction=[%22${Action.ReportError}%22]`;
 const prefixParams = '&isLiveboardEmbed=true';
-const prefixParamsVizEmbed =
-    '&isLiveboardEmbed=true&isVizEmbed=true';
+const prefixParamsVizEmbed = '&isLiveboardEmbed=true&isVizEmbed=true';
 beforeAll(() => {
     init({
         thoughtSpotHost,

package/src/embed/search-bar.tsx

@@ -0,0 +1,88 @@
+import { DOMSelector, Param, Action } from '../types';
+import { getQueryParamString } from '../utils';
+import { TsEmbed, ViewConfig } from './ts-embed';
+import { SearchOptions } from './search';
+
+export interface SearchBarViewConfig extends ViewConfig {
+    /**
+     * If set to true, hides the data sources panel.
+     */
+    hideDataSources?: boolean;
+    /**
+     * The array of data source GUIDs to set on load.
+     */
+    dataSources?: string[];
+    /**
+     * Configuration for search options
+     */
+    searchOptions?: SearchOptions;
+}
+
+/**
+ * Embed ThoughtSpot search bar
+ *
+ * @Category Search Embed
+ * @version: SDK: 1.17.0 | ThoughtSpot: 8.10.0
+ */
+export class SearchBarEmbed extends TsEmbed {
+    /**
+     * The view configuration for the embedded ThoughtSpot search bar.
+     */
+    protected viewConfig: SearchBarViewConfig;
+
+    constructor(domSelector: string, viewConfig: SearchBarViewConfig) {
+        super(domSelector);
+        this.viewConfig = viewConfig;
+    }
+
+    /**
+     * Construct the URL of the embedded ThoughtSpot search to be
+     * loaded in the iframe
+     * @param dataSources A list of data source GUIDs
+     */
+    private getIFrameSrc(dataSources?: string[]) {
+        const { searchOptions } = this.viewConfig;
+        const path = 'search-bar-embed';
+        const queryParams = this.getBaseQueryParams();
+
+        queryParams[Param.HideActions] = [
+            ...(queryParams[Param.HideActions] ?? []),
+        ];
+
+        if (dataSources && dataSources.length) {
+            queryParams[Param.DataSources] = JSON.stringify(dataSources);
+        }
+        if (searchOptions?.searchTokenString) {
+            queryParams[Param.searchTokenString] = encodeURIComponent(
+                searchOptions.searchTokenString,
+            );
+
+            if (searchOptions.executeSearch) {
+                queryParams[Param.executeSearch] = true;
+            }
+        }
+
+        queryParams[Param.UseLastSelectedDataSource] = false;
+        queryParams[Param.searchEmbed] = true;
+        let query = '';
+        const queryParamsString = getQueryParamString(queryParams, true);
+        if (queryParamsString) {
+            query = `?${queryParamsString}`;
+        }
+        const tsPostHashParams = this.getThoughtSpotPostUrlParams();
+
+        return `${this.getEmbedBasePath(query)}/${path}${tsPostHashParams}`;
+    }
+
+    /**
+     * Render the embedded ThoughtSpot search
+     */
+    public render(): SearchBarEmbed {
+        super.render();
+        const { dataSources } = this.viewConfig;
+
+        const src = this.getIFrameSrc(dataSources);
+        this.renderIFrame(src, this.viewConfig.frameParams);
+        return this;
+    }
+}

package/src/embed/search.ts

@@ -18,7 +18,7 @@ import { getReleaseVersion } from '../auth';
 /**
  * Configuration for search options
  */
-interface SearchOptions {
+export interface SearchOptions {
     /**
      * The tml string to load the answer
      */

package/src/embed/ts-embed.ts

@@ -746,6 +746,7 @@ export class TsEmbed {
      * Get the Post Url Params for THOUGHTSPOT from the current
      * host app URL.
      * THOUGHTSPOT URL params starts with a prefix "ts-"
+     * @version SDK: 1.14.0 | ThoughtSpot: 8.4.0.cl, 8.4.1-sw
      */
     public getThoughtSpotPostUrlParams(): string {
         const urlHash = window.location.hash;

package/src/index.ts

@@ -16,6 +16,7 @@ import {
     LiveboardEmbed,
 } from './embed/liveboard';
 import { SearchEmbed, SearchViewConfig } from './embed/search';
+import { SearchBarEmbed, SearchBarViewConfig } from './embed/search-bar';
 import { AuthFailureType, AuthStatus } from './auth';
 import {
     AuthType,
@@ -26,6 +27,7 @@ import {
     DataSourceVisualMode,
     Action,
     EmbedConfig,
+    PrefetchFeatures,
 } from './types';
 
 export {
@@ -33,6 +35,7 @@ export {
     logout,
     prefetch,
     SearchEmbed,
+    SearchBarEmbed,
     PinboardEmbed,
     LiveboardEmbed,
     AppEmbed,
@@ -49,6 +52,8 @@ export {
     Action,
     EmbedConfig,
     SearchViewConfig,
+    SearchBarViewConfig,
     LiveboardViewConfig,
     AppViewConfig,
+    PrefetchFeatures,
 };

package/src/react/index.spec.tsx

@@ -10,7 +10,13 @@ import {
     postMessageToParent,
     mockMessageChannel,
 } from '../test/test-utils';
-import { SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef } from './index';
+import {
+    SearchEmbed,
+    AppEmbed,
+    LiveboardEmbed,
+    useEmbedRef,
+    SearchBarEmbed,
+} from './index';
 import { AuthType, init } from '../index';
 
 import { version } from '../../package.json';
@@ -118,4 +124,31 @@ describe('React Components', () => {
             });
         });
     });
+
+    describe('SearchBarEmbed', () => {
+        it('Should Render the Iframe with props', async () => {
+            const { container } = render(
+                <SearchBarEmbed
+                    hideDataSources={true}
+                    className="embedClass"
+                    dataSources={['test']}
+                    searchOptions={{
+                        searchTokenString: '[revenue]',
+                        executeSearch: true,
+                    }}
+                />,
+            );
+
+            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=[%22${Action.ReportError}%22]&dataSources=[%22test%22]&searchTokenString=%5Brevenue%5D&executeSearch=true&useLastSelectedSources=false&isSearchEmbed=true#/embed/search-bar-embed`,
+            );
+        });
+    });
 });

package/src/react/index.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import {
+    SearchBarEmbed as _SearchBarEmbed,
+    SearchBarViewConfig,
+} from '../embed/search-bar';
 import { SearchEmbed as _SearchEmbed, SearchViewConfig } from '../embed/search';
 import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
 import {
@@ -83,6 +87,14 @@ export const PinboardEmbed = componentFactory<
     LiveboardViewConfig
 >(_LiveboardEmbed);
 
+interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig {}
+
+export const SearchBarEmbed = componentFactory<
+    typeof _SearchBarEmbed,
+    SearchBarEmbedProps,
+    SearchBarViewConfig
+>(_SearchBarEmbed);
+
 export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => {
     return React.useRef<TsEmbed>(null);
 };

package/src/types.ts

@@ -1041,3 +1041,10 @@ export enum OperationType {
 export interface AnswerServiceType {
     getAnswer?: (offset: number, batchSize: number) => any;
 }
+
+export enum PrefetchFeatures {
+    FullApp = 'FullApp',
+    SearchEmbed = 'SearchEmbed',
+    LiveboardEmbed = 'LiveboardEmbed',
+    VizEmbed = 'VizEmbed',
+}

package/src/utils/processData.spec.ts

@@ -98,9 +98,7 @@ describe('Unit test for process data', () => {
         const e = { type: EmbedEvent.AuthExpire };
         jest.spyOn(base, 'notifyAuthFailure');
         jest.spyOn(base, 'handleAuth');
-        jest.spyOn(base, 'getEmbedConfig').mockReturnValue({
-            autoLogin: false,
-        });
+        jest.spyOn(base, 'getEmbedConfig').mockReturnValue({});
         expect(
             processDataInstance.processEventData(e.type, e, '', null),
         ).toEqual({

package/src/utils/processTrigger.spec.ts

@@ -47,4 +47,26 @@ describe('Unit test for processTrigger', () => {
         expect(messageChannelMock.port1.close).toBeCalled();
         expect(triggerPromise).resolves.toEqual(res.data);
     });
+
+    test('Reject promise if error returned', async () => {
+        const messageType = HostEvent.Search;
+        const thoughtSpotHost = 'http://localhost:3000';
+        const data = {};
+        mockMessageChannel();
+        const triggerPromise = _processTriggerInstance.processTrigger(
+            iFrame,
+            messageType,
+            thoughtSpotHost,
+            data,
+        );
+        expect(iFrame.contentWindow.postMessage).toBeCalled();
+        const res = {
+            data: {
+                error: 'error',
+            },
+        };
+        messageChannelMock.port1.onmessage(res);
+        expect(messageChannelMock.port1.close).toBeCalled();
+        expect(triggerPromise).rejects.toEqual(res.data.error);
+    });
 });