@thoughtspot/visual-embed-sdk 1.13.0-alpha.2 → 1.13.0-alpha.3

package/src/embed/ts-embed.ts

@@ -75,7 +75,7 @@ export interface FrameParams {
      * This parameters will be passed on the iframe
      * as is.
      */
-    [key: string]: string | number | boolean;
+    [key: string]: string | number | boolean | undefined;
 }
 
 /**
@@ -202,6 +202,8 @@ export class TsEmbed {
      */
     private shouldEncodeUrlQueryParams = false;
 
+    private defaultHiddenActions = [Action.ReportError];
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
         this.el = this.getDOMNode(domSelector);
         // TODO: handle error
@@ -242,7 +244,7 @@ export class TsEmbed {
             error,
         });
         // Log error
-        console.log(error);
+        console.error(error);
     }
 
     /**
@@ -382,9 +384,10 @@ export class TsEmbed {
         if (disabledActionReason) {
             queryParams[Param.DisableActionReason] = disabledActionReason;
         }
-        if (hiddenActions?.length) {
-            queryParams[Param.HideActions] = hiddenActions;
-        }
+        queryParams[Param.HideActions] = [
+            ...this.defaultHiddenActions,
+            ...(hiddenActions ?? []),
+        ];
         if (Array.isArray(visibleActions)) {
             queryParams[Param.VisibleActions] = visibleActions;
         }
@@ -412,12 +415,16 @@ export class TsEmbed {
         showPrimaryNavbar = false,
         disableProfileAndHelp = false,
         isAppEmbed = false,
+        enableSearchAssist = false,
     ): string {
         const queryStringFrag = queryString ? `&${queryString}` : '';
         const primaryNavParam = `&primaryNavHidden=${!showPrimaryNavbar}`;
         const disableProfileAndHelpParam = `&profileAndHelpInNavBarHidden=${disableProfileAndHelp}`;
+        const enableSearchAssistParam = `&${Param.EnableSearchAssist}=${enableSearchAssist}`;
         let queryParams = `?embedApp=true${isAppEmbed ? primaryNavParam : ''}${
             isAppEmbed ? disableProfileAndHelpParam : ''
+        }${
+            enableSearchAssist ? enableSearchAssistParam : ''
         }${queryStringFrag}`;
         if (this.shouldEncodeUrlQueryParams) {
             queryParams = `?base64UrlEncodedFlags=${getEncodedQueryParamsString(
@@ -691,15 +698,16 @@ export class TsEmbed {
      * @param messageType The event type
      * @param data The payload to send with the message
      */
-    public trigger(
-        messageType: HostEvent,
-        data: any,
-    ): typeof TsEmbed.prototype {
-        processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
+    public trigger(messageType: HostEvent, data: any): Promise<any> {
         uploadMixpanelEvent(
             `${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`,
         );
-        return this;
+        return processTrigger(
+            this.iFrame,
+            messageType,
+            this.thoughtSpotHost,
+            data,
+        );
     }
 
     /**

package/src/errors.ts

@@ -3,4 +3,7 @@ export const ERROR_MESSAGE = {
         'Error parsing ThoughtSpot host. Please provide a valid URL.',
     LIVEBOARD_VIZ_ID_VALIDATION:
         'Please provide either liveboardId or pinboardId',
+    TRIGGER_TIMED_OUT: 'Trigger timedout in getting response',
+    SEARCHEMBED_BETA_WRANING_MESSAGE:
+        'Search Embed is in Beta in this release.',
 };

package/src/react/index.spec.tsx

@@ -2,15 +2,17 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { Action, EmbedEvent, HostEvent } from '../types';
 import {
     executeAfterWait,
     getIFrameEl,
     getIFrameSrc,
     postMessageToParent,
+    mockMessageChannel,
 } from '../test/test-utils';
 import { SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef } from './index';
 import { AuthType, init } from '../index';
-import { EmbedEvent, HostEvent } from '../types';
+
 import { version } from '../../package.json';
 
 const thoughtSpotHost = 'localhost';
@@ -20,6 +22,7 @@ beforeAll(() => {
         thoughtSpotHost,
         authType: AuthType.None,
     });
+    spyOn(window, 'alert');
 });
 
 describe('React Components', () => {
@@ -37,7 +40,7 @@ describe('React Components', () => {
                 ),
             ).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`,
+                `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true#/embed/answer`,
             );
         });
 
@@ -73,6 +76,7 @@ describe('React Components', () => {
     describe('LiveboardEmbed', () => {
         //
         it('Should be able to trigger events on the embed using refs', async () => {
+            mockMessageChannel();
             const TestComponent = () => {
                 const embedRef = useEmbedRef();
                 const onLiveboardRendered = () => {
@@ -109,6 +113,7 @@ describe('React Components', () => {
                         data: ['viz1', 'viz2'],
                     },
                     `http://${thoughtSpotHost}`,
+                    expect.anything(),
                 );
             });
         });

package/src/react/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
 import { SearchEmbed as _SearchEmbed, SearchViewConfig } from '../embed/search';
 import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
 import {
@@ -25,7 +26,7 @@ const componentFactory = <
                 Omit<U, 'className'>,
                 V
             >(embedProps);
-            React.useEffect(() => {
+            useDeepCompareEffect(() => {
                 const tsEmbed = new EmbedConstructor(ref!.current, {
                     ...viewConfig,
                 });
@@ -40,7 +41,7 @@ const componentFactory = <
                     // eslint-disable-next-line no-param-reassign
                     forwardedRef.current = tsEmbed;
                 }
-            }, [embedProps]);
+            }, [viewConfig, listeners]);
 
             return (
                 <div

package/src/test/test-utils.ts

@@ -70,3 +70,19 @@ export const EVENT_WAIT_TIME = 1000;
 export function fixedEncodeURI(str: string) {
     return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
 }
+
+/**
+ * MessageChannel is available in Node > 15.0.0. Since the current node environment's
+ * used for github actions is not above 14, we are mocking this for the current unit tests.
+ */
+export const messageChannelMock: any = {
+    port1: {},
+    port2: {},
+};
+export const mockMessageChannel = () => {
+    messageChannelMock.port1.close = jest.fn();
+    messageChannelMock.port2.onmessage = jest.fn();
+    window.MessageChannel = function MessageChannelMock() {
+        return messageChannelMock;
+    } as any;
+};

package/src/types.ts

@@ -19,8 +19,13 @@ export enum AuthType {
     None = 'None',
     /**
      * SSO using SAML
+     * @deprecated Use {@link SAML} instead
      */
     SSO = 'SSO_SAML',
+    /**
+     * SSO using SAML
+     */
+    SAML = 'SSO_SAML',
     /**
      * SSO using OIDC
      */
@@ -177,6 +182,12 @@ export interface EmbedConfig {
      * @version SDK: 1.10.4 | ThoughtSpot: *
      */
     detectCookieAccessSlow?: boolean;
+    /**
+     * Hide beta alert warning message for SearchEmbed.
+     *
+     * @version SDK: 1.12.0 | ThoughtSpot: *
+     */
+    suppressSearchEmbedBetaWarning?: boolean;
 }
 
 /**
@@ -608,6 +619,18 @@ export enum HostEvent {
      * @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl
      */
     Navigate = 'Navigate',
+    /**
+     * Gets the current pinboard content.
+     * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl
+     */
+    getExportRequestForCurrentPinboard = 'getExportRequestForCurrentPinboard',
+    /**
+     * Fires the pin action on an embedded object
+     * @param - incase of liveboard embed, takes in an object with vizId as a key
+     * can be left empty for search and viz embeds
+     * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl
+     */
+    Pin = 'pin',
 }
 
 /**
@@ -656,6 +679,7 @@ export enum Param {
     fullHeight = 'isFullHeightPinboard',
     livedBoardEmbed = 'isLiveboardEmbed',
     searchEmbed = 'isSearchEmbed',
+    vizEmbed = 'isVizEmbed',
     Version = 'sdkVersion',
     ViewPortHeight = 'viewPortHeight',
     ViewPortWidth = 'viewPortWidth',
@@ -808,6 +832,10 @@ export enum Action {
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl
      */
     CreateMonitor = 'createMonitor',
+    /**
+     * @version SDK: 1.11.1 | ThoughtSpot: 8.3.0.cl
+     */
+    ReportError = 'reportError',
 }
 
 export interface SessionInterface {

package/src/utils/processTrigger.spec.ts

@@ -1,5 +1,6 @@
 import * as _processTriggerInstance from './processTrigger';
 import { HostEvent } from '../types';
+import { messageChannelMock, mockMessageChannel } from '../test/test-utils';
 
 describe('Unit test for processTrigger', () => {
     const iFrame: any = {
@@ -29,12 +30,21 @@ describe('Unit test for processTrigger', () => {
         const messageType = HostEvent.Search;
         const thoughtSpotHost = 'http://localhost:3000';
         const data = {};
-        _processTriggerInstance.processTrigger(
+        mockMessageChannel();
+        const triggerPromise = _processTriggerInstance.processTrigger(
             iFrame,
             messageType,
             thoughtSpotHost,
             data,
         );
         expect(iFrame.contentWindow.postMessage).toBeCalled();
+        const res = {
+            data: {
+                test: '123',
+            },
+        };
+        messageChannelMock.port1.onmessage(res);
+        expect(messageChannelMock.port1.close).toBeCalled();
+        expect(triggerPromise).resolves.toEqual(res.data);
     });
 });

package/src/utils/processTrigger.ts

@@ -1,3 +1,4 @@
+import { ERROR_MESSAGE } from '../errors';
 import { HostEvent } from '../types';
 
 /**
@@ -17,24 +18,47 @@ function postIframeMessage(
     iFrame: HTMLIFrameElement,
     message: { type: HostEvent; data: any },
     thoughtSpotHost: string,
+    channel?: MessageChannel,
 ) {
-    return iFrame.contentWindow.postMessage(message, thoughtSpotHost);
+    return iFrame.contentWindow.postMessage(message, thoughtSpotHost, [
+        channel?.port2,
+    ]);
 }
 
+const TRIGGER_TIMEOUT = 30000;
+
 export function processTrigger(
     iFrame: HTMLIFrameElement,
     messageType: HostEvent,
     thoughtSpotHost: string,
     data: any,
-) {
-    switch (messageType) {
-        case HostEvent.Reload:
-            return reload(iFrame);
-        default:
-            return postIframeMessage(
-                iFrame,
-                { type: messageType, data },
-                thoughtSpotHost,
-            );
-    }
+): Promise<any> {
+    return new Promise<any>((res, rej) => {
+        if (messageType === HostEvent.Reload) {
+            reload(iFrame);
+            return res(null);
+        }
+        const channel = new MessageChannel();
+        channel.port1.onmessage = ({ data: responseData }) => {
+            channel.port1.close();
+            if (responseData.error) {
+                rej(responseData.error);
+            } else {
+                res(responseData);
+            }
+        };
+
+        // Close the messageChannel and resolve the promise if timeout.
+        setTimeout(() => {
+            channel.port1.close();
+            res(new Error(ERROR_MESSAGE.TRIGGER_TIMED_OUT));
+        }, TRIGGER_TIMEOUT);
+
+        return postIframeMessage(
+            iFrame,
+            { type: messageType, data },
+            thoughtSpotHost,
+            channel,
+        );
+    });
 }

package/src/utils.spec.ts

@@ -9,6 +9,7 @@ import {
     getEncodedQueryParamsString,
     appendToUrlHash,
     getRedirectUrl,
+    checkReleaseVersionInBeta,
 } from './utils';
 import { RuntimeFilterOp } from './types';
 
@@ -110,4 +111,32 @@ describe('unit test for utils', () => {
         expect(getEncodedQueryParamsString('')).toBe('');
         expect(getEncodedQueryParamsString('test')).toBe('dGVzdA');
     });
+
+    test('when ReleaseVersion is empty ', () => {
+        expect(checkReleaseVersionInBeta('', false)).toBe(false);
+    });
+
+    test('when ReleaseVersion is 7.0.1.cl ', () => {
+        expect(checkReleaseVersionInBeta('7.0.1.cl', false)).toBe(false);
+    });
+
+    test('when cluster has dev version', () => {
+        expect(checkReleaseVersionInBeta('dev', false)).toBe(false);
+    });
+
+    test('when cluster is above 8.4.0.cl-11 software version', () => {
+        expect(checkReleaseVersionInBeta('8.4.0.cl-117', false)).toBe(false);
+    });
+
+    test('when cluster is bellow 8.0.0.sw software version', () => {
+        expect(checkReleaseVersionInBeta('7.2.1.sw', false)).toBe(true);
+    });
+
+    test('when suppressBetaWarning is true and ReleaseVersion is 7.0.1', () => {
+        expect(checkReleaseVersionInBeta('7.0.1', true)).toBe(false);
+    });
+
+    test('when suppressBetaWarning is false ReleaseVersion is 7.0.1', () => {
+        expect(checkReleaseVersionInBeta('7.0.1', false)).toBe(true);
+    });
 });

package/src/utils.ts

@@ -154,3 +154,19 @@ export const setAttributes = (
         element.setAttribute(key, attributes[key].toString());
     });
 };
+
+const isCloudRelease = (version: string) => version.endsWith('.cl');
+
+/* For Search Embed: ReleaseVersionInBeta */
+export const checkReleaseVersionInBeta = (
+    releaseVersion: string,
+    suppressBetaWarning: boolean,
+): boolean => {
+    if (releaseVersion !== '' && !isCloudRelease(releaseVersion)) {
+        const splittedReleaseVersion = releaseVersion.split('.');
+        const majorVersion = Number(splittedReleaseVersion[0]);
+        const isBetaVersion = majorVersion < 8;
+        return !suppressBetaWarning && isBetaVersion;
+    }
+    return false;
+};