@thoughtspot/visual-embed-sdk 1.35.2 → 1.35.5-hostEvent.1

package/src/embed/hostEventClient/host-event-client.ts

@@ -0,0 +1,81 @@
+import { HostEvent } from '../../types';
+import { processTrigger } from '../../utils/processTrigger';
+import {
+    UiPassthroughArrayResponse,
+    UiPassthroughEvent, HostEventRequest, HostEventResponse,
+    UiPassthroughRequest,
+    FlattenType,
+} from './contracts';
+
+type UiPassthroughHandlerWithIframe = <UiPassthroughEventT extends UiPassthroughEvent>(
+    iFrame: HTMLIFrameElement,
+    apiName: UiPassthroughEventT,
+    parameters: FlattenType<UiPassthroughRequest<UiPassthroughEventT>>,
+) => UiPassthroughArrayResponse<UiPassthroughEventT>;
+
+export type UiPassthroughHandler = <UiPassthroughEventT extends UiPassthroughEvent>(
+  apiName: UiPassthroughEventT,
+  parameters: FlattenType<UiPassthroughRequest<UiPassthroughEventT>>,
+) => UiPassthroughArrayResponse<UiPassthroughEventT>;
+
+export class HostEventClient {
+  thoughtSpotHost: string;
+
+  constructor(thoughtSpotHost: string) {
+      this.thoughtSpotHost = thoughtSpotHost;
+  }
+
+  executeUiPassthroughApi:UiPassthroughHandlerWithIframe = async (iFrame, apiName, parameters) => {
+      const res = await processTrigger(iFrame, HostEvent.UiPassthrough, this.thoughtSpotHost, {
+          type: apiName,
+          parameters,
+      });
+
+      return res;
+  }
+
+  handleUiPassthroughForHostEvent:UiPassthroughHandlerWithIframe =
+     async (iFrame, apiName, parameters) => {
+         const response = (await this.executeUiPassthroughApi(iFrame, apiName, parameters))
+             ?.filter?.((r) => r.error || r.value)[0];
+
+         if (!response) {
+             const error = `No answer found${parameters.vizId ? ` for vizId: ${parameters.vizId}` : ''}.`;
+             // eslint-disable-next-line no-throw-literal
+             throw { error };
+         }
+
+         const errors = response.error || (response.value as any)?.errors;
+         if (errors) {
+             // eslint-disable-next-line no-throw-literal
+             throw { error: response.error };
+         }
+
+         return { ...response.value };
+     }
+
+  async hostEventFallback(
+      iFrame: HTMLIFrameElement, hostEvent: HostEvent, data: any,
+  ): Promise<any> {
+      return processTrigger(iFrame, hostEvent, this.thoughtSpotHost, data);
+  }
+
+  async executeHostEvent<T extends HostEvent>(
+      iFrame: HTMLIFrameElement, hostEvent: HostEvent, payload?: HostEventRequest<T>,
+  ):
+    Promise<HostEventResponse<HostEvent>> {
+      if (hostEvent === HostEvent.Pin && payload?.newVizName) {
+          return this.handleUiPassthroughForHostEvent(
+              iFrame, UiPassthroughEvent.addVizToPinboard, payload,
+          );
+      }
+      if (hostEvent === HostEvent.SaveAnswer && payload?.name) {
+          return this.handleUiPassthroughForHostEvent(
+              iFrame, UiPassthroughEvent.saveAnswer, payload,
+          );
+      }
+      // fallback for save answer is Save
+      if (hostEvent === HostEvent.SaveAnswer) hostEvent = HostEvent.Save;
+      return this.hostEventFallback(iFrame, hostEvent, payload);
+  }
+}

package/src/embed/liveboard.spec.ts

@@ -570,6 +570,27 @@ describe('Liveboard/viz embed tests', () => {
             done();
         });
     });
+
+    test('navigateToLiveboard with preRender', (done) => {
+        mockMessageChannel();
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            preRenderId: 'test',
+        } as LiveboardViewConfig);
+        const onSpy = jest.spyOn(liveboardEmbed, 'trigger');
+        liveboardEmbed.prerenderGeneric();
+        executeAfterWait(() => {
+            const iframe = getIFrameEl();
+            postMessageToParent(iframe.contentWindow, {
+                type: EmbedEvent.APP_INIT,
+            });
+        });
+        executeAfterWait(() => {
+            liveboardEmbed.navigateToLiveboard('lb1', 'viz1');
+            expect(onSpy).toHaveBeenCalledWith(HostEvent.Navigate, 'embed/viz/lb1/viz1');
+            done();
+        });
+    });
     test('should set runtime parametere values in url params', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -659,6 +680,17 @@ describe('Liveboard/viz embed tests', () => {
             });
         });
 
+        test('get liveboard url value', async () => {
+            const libEmbed = new LiveboardEmbed(getRootEl(), {
+                liveboardId: '1234',
+            });
+            await libEmbed.render();
+            await executeAfterWait(() => {
+                const url = libEmbed.getLiveboardUrl();
+                expect(url).toEqual('http://tshost/#/pinboard/1234');
+            });
+        });
+
         test('Show preview loader should show the loader if viz embed and showPreviewLoader is true', async () => {
             jest.spyOn(previewService, 'getPreview').mockResolvedValue({
                 vizContent: '<div id=test>test</div>',

package/src/embed/liveboard.ts

@@ -23,6 +23,7 @@ import { getQueryParamString, isUndefined } from '../utils';
 import { getAuthPromise } from './base';
 import { V1Embed } from './ts-embed';
 import { addPreviewStylesIfNotPresent } from '../utils/global-styles';
+import { HostEventRequest, HostEventResponse } from './hostEventClient/contracts';
 
 /**
  * The configuration for the embedded Liveboard or visualization page view.
@@ -636,7 +637,10 @@ export class LiveboardEmbed extends V1Embed {
      * @param messageType The event type
      * @param data The payload to send with the message
      */
-    public trigger(messageType: HostEvent, data: any = {}): Promise<any> {
+    public trigger<HostEventT extends HostEvent>(
+        messageType: HostEventT,
+        data?: HostEventRequest<HostEventT>,
+    ): Promise<HostEventResponse<HostEventT>> {
         const dataWithVizId = data;
         if (messageType === HostEvent.SetActiveTab) {
             this.setActiveTab(data);

package/src/embed/search.spec.ts

@@ -16,6 +16,7 @@ import {
     expectUrlMatchesWithParams,
 } from '../test/test-utils';
 import { version } from '../../package.json';
+import { SearchBarEmbed } from './search-bar';
 
 const defaultViewConfig = {
     frameParams: {
@@ -504,6 +505,20 @@ describe('Search embed tests', () => {
         });
     });
 
+    test('should set dataPanelCustomGroupsAccordionInitialState to EXPAND_FIRST when passed', async () => {
+        const searchEmbed = new SearchBarEmbed(getRootEl() as any, {
+            ...defaultViewConfig,
+            // eslint-disable-next-line max-len
+        });
+        searchEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/v2/?${defaultParams}&useLastSelectedSources=false${prefixParams}#/embed/search-bar-embed`,
+            );
+        });
+    });
+
     test('should set dataPanelCustomGroupsAccordionInitialState to EXPAND_FIRST when passed', async () => {
         const searchEmbed = new SearchEmbed(getRootEl(), {
             ...defaultViewConfig,

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

@@ -15,6 +15,7 @@ import {
     ConversationViewConfig,
     ConversationEmbed,
     SearchViewConfig,
+    AnswerService,
 } from '../index';
 import {
     Action, HomeLeftNavItem, RuntimeFilter, RuntimeFilterOp, HomepageModule, HostEvent,
@@ -48,7 +49,12 @@ import * as authService from '../utils/authService/authService';
 import { logger } from '../utils/logger';
 import { version } from '../../package.json';
 import { HiddenActionItemByDefaultForSearchEmbed } from './search';
+import { processTrigger } from '../utils/processTrigger';
+import { UiPassthroughEvent } from './hostEventClient/contracts';
 
+jest.mock('../utils/processTrigger');
+
+const mockProcessTrigger = processTrigger as jest.Mock;
 const defaultViewConfig = {
     frameParams: {
         width: 1280,
@@ -126,6 +132,52 @@ describe('Unit test case for ts embed', () => {
                 });
             });
         });
+
+        test('should get answer service', async () => {
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed.render();
+            mockProcessTrigger.mockResolvedValue({ session: 'test' });
+            await executeAfterWait(async () => {
+                expect(await searchEmbed.getAnswerService()).toBeInstanceOf(AnswerService);
+            });
+        });
+
+        test('triggerUiPassThrough with params', async () => {
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed.render();
+            mockProcessTrigger.mockResolvedValue({ session: 'test' });
+            await executeAfterWait(async () => {
+                const payload = { newVizName: 'test' };
+                expect(
+                    await searchEmbed.triggerUiPassThrough(
+                        UiPassthroughEvent.addVizToPinboard,
+                        payload,
+                    ),
+                );
+                expect(mockProcessTrigger).toHaveBeenCalledWith(
+                    getIFrameEl(),
+                    HostEvent.UiPassthrough,
+                    'http://tshost',
+                    {
+                        parameters: payload,
+                        type: UiPassthroughEvent.addVizToPinboard,
+                    },
+                );
+            });
+        });
+
+        test('should set proper height, width and min-height to iframe', async () => {
+            // we dont have origin specific policies so just checking if
+            // policies are ending with ;
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed.render();
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                expect(iframe.style.width).toBe(`${defaultViewConfig.frameParams.width}px`);
+                expect(iframe.style.height).toBe(`${defaultViewConfig.frameParams.height}px`);
+                expect(iframe.style.minHeight).toBe(`${defaultViewConfig.frameParams.height}px`);
+            });
+        });
     });
 
     describe('AuthExpire embedEvent in cookieless authentication authType', () => {
@@ -1338,7 +1390,6 @@ describe('Unit test case for ts embed', () => {
                 },
             });
             await appEmbed.render();
-            console.log('val ', getIFrameSrc());
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
                 `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&${defaultParamsForPinboardEmbed}`
@@ -1804,6 +1855,7 @@ describe('Unit test case for ts embed', () => {
         afterAll(() => {
             const rootEle = document.getElementById('myRoot');
             rootEle.remove();
+            jest.clearAllMocks();
         });
 
         it('should preRender and hide the iframe', async () => {

package/src/embed/ts-embed.ts

@@ -9,6 +9,7 @@
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
+import { HostEventRequest, HostEventResponse } from './hostEventClient/contracts';
 import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
 import { AnswerService } from '../utils/graphql/answerService/answerService';
@@ -62,6 +63,7 @@ import {
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
 import { ERROR_MESSAGE } from '../errors';
+import { HostEventClient, UiPassthroughHandler } from './hostEventClient/host-event-client';
 
 const { version } = pkgInfo;
 
@@ -121,8 +123,8 @@ export class TsEmbed {
     protected thoughtSpotHost: string;
 
     /*
-     * This is the base to access ThoughtSpot V2.
-     */
+    * This is the base to access ThoughtSpot V2.
+    */
     protected thoughtSpotV2Base: string;
 
     /**
@@ -159,6 +161,8 @@ export class TsEmbed {
 
     private resizeObserver: ResizeObserver;
 
+    protected hostEventClient: HostEventClient;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
         this.el = getDOMNode(domSelector);
         // TODO: handle error
@@ -180,6 +184,7 @@ export class TsEmbed {
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
+        this.hostEventClient = new HostEventClient(this.embedConfig.thoughtSpotHost);
     }
 
     /**
@@ -594,6 +599,9 @@ export class TsEmbed {
 
         iFrame.style.width = `${width}`;
         iFrame.style.height = `${height}`;
+        // Set minimum height to the frame so that,
+        // scaling down on the fullheight doesn't make it too small.
+        iFrame.style.minHeight = `${height}`;
         iFrame.style.border = '0';
         iFrame.name = 'ThoughtSpot Embedded Analytics';
         return iFrame;
@@ -982,8 +990,12 @@ export class TsEmbed {
      * Triggers an event to the embedded app
      * @param messageType The event type
      * @param data The payload to send with the message
+     * @returns A promise that resolves with the response from the embedded app
      */
-    public trigger(messageType: HostEvent, data: any = {}): Promise<any> {
+    public trigger<HostEventT extends HostEvent>(
+        messageType: HostEventT,
+        data?: HostEventRequest<HostEventT>,
+    ): Promise<HostEventResponse<HostEventT>> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
 
         if (!this.isRendered) {
@@ -995,7 +1007,20 @@ export class TsEmbed {
             this.handleError('Host event type is undefined');
             return null;
         }
-        return processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
+
+        return this.hostEventClient.executeHostEvent(this.iFrame, messageType, data);
+    }
+
+    /**
+     * Triggers an event to the embedded app, skipping the UI flow.
+     * @param {UiPassthroughEvent} apiName - The name of the API to be triggered.
+     * @param {UiPassthroughRequest} parameters - The parameters to be passed to the API.
+     * @returns {Promise<UiPassthroughRequest>} - A promise that resolves with the response 
+     * from the embedded app.
+     */
+    // eslint-disable-next-line arrow-body-style
+    public triggerUiPassThrough: UiPassthroughHandler = (apiName, parameters) => {
+        return this.hostEventClient.executeUiPassthroughApi(this.iFrame, apiName, parameters);
     }
 
     /**
@@ -1242,7 +1267,6 @@ export class TsEmbed {
      */
     public async getAnswerService(vizId?: string): Promise<AnswerService> {
         const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId ? { vizId } : {});
-
         return new AnswerService(session, null, this.embedConfig.thoughtSpotHost);
     }
 }

package/src/index.ts

@@ -61,6 +61,7 @@ import { uploadMixpanelEvent, MIXPANEL_EVENT } from './mixpanel-service';
 import { tokenizedFetch } from './tokenizedFetch';
 import { getAnswerFromQuery } from './utils/graphql/nlsService/nls-answer-service';
 import { createLiveboardWithAnswers } from './utils/liveboardService/liveboardService';
+import { UiPassthroughEvent } from './embed/hostEventClient/contracts';
 
 export {
     init,
@@ -127,6 +128,7 @@ export {
     HomePageSearchBarMode,
     VizPoint,
     CustomActionPayload,
+    UiPassthroughEvent,
 };
 
 export { resetCachedAuthToken } from './authToken';

package/src/react/all-types-export.ts

@@ -51,4 +51,5 @@ export {
     CustomCssVariables,
     RuntimeParameter,
     resetCachedAuthToken,
+    UiPassthroughEvent,
 } from '../index';

package/src/types.ts

@@ -1714,8 +1714,8 @@ export enum EmbedEvent {
      *
      * **Note**: This event is deprecated in v1.21.0.
      * To fire an event when a download action is initiated on a chart or table,
-     * use `EmbedEvent.DownloadAsPng`, `EmbedEvent.DownloadAsPDF`, `EmbedEvent.DownloadAsCSV`,
-     * or `EmbedEvent.DownloadAsXLSX`
+     * use `EmbedEvent.DownloadAsPng`, `EmbedEvent.DownloadAsPDF`,
+     * `EmbedEvent.DownloadAsCSV`, or `EmbedEvent.DownloadAsXLSX`
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
      * @example
      *```js
@@ -3199,6 +3199,16 @@ export enum HostEvent {
      * @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
      */
     UpdatePersonalisedView = 'UpdatePersonalisedView',
+    /**
+     * Triggers the action to get the current view of the liveboard
+     * @version SDK: 1.34.0 | Thoughtspot: 10.6.0.cl
+     */
+    SaveAnswer = 'saveAnswer',
+    /**
+     * EmbedApi
+     * @hidden
+     */
+    UiPassthrough = 'UiPassthrough',
 }
 
 /**