@thoughtspot/visual-embed-sdk 1.35.5-hostEvent.6 → 1.35.5-hostEvent.8

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

@@ -1,10 +1,11 @@
-import { getIFrameEl } from '../../test/test-utils';
+import { getIFrameEl, getRootEl } from '../../test/test-utils';
 import { HostEvent } from '../../types';
 import { processTrigger } from '../../utils/processTrigger';
+import * as EmbedConfigService from '../embedConfig';
 import {
-    UiPassthroughEvent,
-    UiPassthroughRequest,
-    UiPassthroughArrayResponse,
+    UIPassthroughEvent,
+    UIPassthroughRequest,
+    UIPassthroughArrayResponse,
     HostEventRequest,
 } from './contracts';
 import { HostEventClient } from './host-event-client';
@@ -14,23 +15,27 @@ jest.mock('../../utils/processTrigger');
 const mockProcessTrigger = processTrigger as jest.Mock;
 
 const createHostEventClient = () => {
-    const mockIframe = getIFrameEl();
-    const mockThoughtSpotHost = 'http://localhost';
-    const client = new HostEventClient(mockThoughtSpotHost);
-    return { client, mockIframe, mockThoughtSpotHost };
+    const mockIframe = document.createElement('iframe');
+    const client = new HostEventClient(mockIframe);
+    return { client, mockIframe };
 };
 
 describe('HostEventClient', () => {
+    const mockThoughtSpotHost = 'http://localhost';
+    beforeEach(() => {
+        jest.spyOn(EmbedConfigService, 'getEmbedConfig').mockReturnValue({ thoughtSpotHost: mockThoughtSpotHost });
+    });
+
     afterEach(() => {
         jest.clearAllMocks();
     });
 
-    describe('executeUiPassthroughApi', () => {
+    describe('executeUIPassthroughApi', () => {
         it('should call processTrigger with correct parameters and return response', async () => {
-            const { client, mockIframe, mockThoughtSpotHost } = createHostEventClient();
+            const { client, mockIframe } = createHostEventClient();
 
-            const apiName = UiPassthroughEvent.addVizToPinboard;
-            const parameters: UiPassthroughRequest<typeof apiName> = {
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
                 newVizName: 'testViz',
             };
             const triggerResponse = Promise.resolve([
@@ -39,11 +44,11 @@ describe('HostEventClient', () => {
 
             mockProcessTrigger.mockResolvedValue(triggerResponse);
 
-            const result = await client.executeUiPassthroughApi(getIFrameEl(), apiName, parameters);
+            const result = await client.triggerUIPassthroughApi(apiName, parameters);
 
             expect(mockProcessTrigger).toHaveBeenCalledWith(
                 mockIframe,
-                HostEvent.UiPassthrough,
+                HostEvent.UIPassthrough,
                 mockThoughtSpotHost,
                 {
                     type: apiName,
@@ -54,11 +59,11 @@ describe('HostEventClient', () => {
         });
     });
 
-    describe('handleUiPassthroughForHostEvent', () => {
+    describe('handleUIPassthroughForHostEvent', () => {
         it('should return the value from the first valid response', async () => {
             const { client } = createHostEventClient();
-            const apiName = UiPassthroughEvent.addVizToPinboard;
-            const parameters: UiPassthroughRequest<typeof apiName> = {
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
                 newVizName: 'testViz',
             };
             const triggerResponse = Promise.resolve([
@@ -66,8 +71,7 @@ describe('HostEventClient', () => {
             ]);
             mockProcessTrigger.mockResolvedValue(triggerResponse);
 
-            const result = await client.handleUiPassthroughForHostEvent(getIFrameEl(),
-                apiName, parameters);
+            const result = await client.handleHostEventWithParam(apiName, parameters);
 
             expect(result).toEqual({
                 pinboardId: 'testPinboard',
@@ -78,50 +82,50 @@ describe('HostEventClient', () => {
 
         it('should throw an error if no valid response is found', async () => {
             const { client } = createHostEventClient();
-            const apiName = UiPassthroughEvent.addVizToPinboard;
-            const parameters: UiPassthroughRequest<typeof apiName> = {
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
                 newVizName: 'testViz',
             };
-            const triggerResponse: UiPassthroughArrayResponse<typeof apiName> = Promise.resolve([]);
+            const triggerResponse: UIPassthroughArrayResponse<typeof apiName> = [];
             mockProcessTrigger.mockResolvedValue(triggerResponse);
 
-            await expect(client.handleUiPassthroughForHostEvent(getIFrameEl(), apiName, parameters))
+            await expect(client.handleHostEventWithParam(apiName, parameters))
                 .rejects.toEqual({ error: 'No answer found.' });
         });
 
         it('should throw an error if no valid response is found for vizId', async () => {
             const { client } = createHostEventClient();
-            const apiName = UiPassthroughEvent.addVizToPinboard;
-            const parameters: UiPassthroughRequest<typeof apiName> = {
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
                 newVizName: 'testViz',
                 vizId: 'testVizId',
             };
-            const triggerResponse: UiPassthroughArrayResponse<typeof apiName> = Promise.resolve([]);
+            const triggerResponse: UIPassthroughArrayResponse<typeof apiName> = [];
             mockProcessTrigger.mockResolvedValue(triggerResponse);
 
-            await expect(client.handleUiPassthroughForHostEvent(getIFrameEl(), apiName, parameters))
+            await expect(client.handleHostEventWithParam(apiName, parameters))
                 .rejects.toEqual({ error: 'No answer found for vizId: testVizId.' });
         });
 
         it('should throw an error if the response contains errors', async () => {
             const { client } = createHostEventClient();
-            const apiName = UiPassthroughEvent.addVizToPinboard;
-            const parameters: UiPassthroughRequest<typeof apiName> = {
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
                 newVizName: 'testViz',
             };
-            const triggerResponse: UiPassthroughArrayResponse<typeof apiName> = Promise.resolve([
+            const triggerResponse: UIPassthroughArrayResponse<typeof apiName> = [
                 { error: 'Some error' },
-            ]);
+            ];
             mockProcessTrigger.mockResolvedValue(triggerResponse);
 
-            await expect(client.handleUiPassthroughForHostEvent(getIFrameEl(), apiName, parameters))
+            await expect(client.handleHostEventWithParam(apiName, parameters))
                 .rejects.toEqual({ error: 'Some error' });
         });
     });
 
     describe('executeHostEvent', () => {
-        it('should call handleUiPassthroughForHostEvent for Pin event', async () => {
-            const { client } = createHostEventClient();
+        it('should call handleUIPassthroughForHostEvent for Pin event', async () => {
+            const { client, mockIframe } = createHostEventClient();
             const hostEvent = HostEvent.Pin;
             const payload: HostEventRequest<typeof hostEvent> = {
                 newVizName: 'testViz',
@@ -136,19 +140,19 @@ describe('HostEventClient', () => {
 
             mockProcessTrigger.mockResolvedValue([mockResponse]);
 
-            const result = await client.executeHostEvent(getIFrameEl(), hostEvent, payload);
+            const result = await client.triggerHostEvent(hostEvent, payload);
 
             expect(mockProcessTrigger).toHaveBeenCalledWith(
-                getIFrameEl(),
-                HostEvent.UiPassthrough,
+                mockIframe,
+                HostEvent.UIPassthrough,
                 'http://localhost',
-                { parameters: payload, type: UiPassthroughEvent.addVizToPinboard },
+                { parameters: payload, type: UIPassthroughEvent.PinAnswerToLiveboard },
             );
             expect(result).toEqual(mockResponse.value);
         });
 
-        it('should call handleUiPassthroughForHostEvent for SaveAnswer event', async () => {
-            const { client } = createHostEventClient();
+        it('should call handleUIPassthroughForHostEvent for SaveAnswer event', async () => {
+            const { client, mockIframe } = createHostEventClient();
             const hostEvent = HostEvent.SaveAnswer;
             const payload: HostEventRequest<typeof hostEvent> = {
                 name: 'Test Answer',
@@ -170,12 +174,12 @@ describe('HostEventClient', () => {
                 refId: 'testVizId',
             }];
             mockProcessTrigger.mockResolvedValue(mockResponse);
-            const result = await client.executeHostEvent(getIFrameEl(), hostEvent, payload);
+            const result = await client.triggerHostEvent(hostEvent, payload);
 
             expect(mockProcessTrigger).toHaveBeenCalledWith(
-                null,
-                'UiPassthrough',
-                'http://localhost',
+                mockIframe,
+                HostEvent.UIPassthrough,
+                mockThoughtSpotHost,
                 {
                     parameters: payload,
                     type: 'saveAnswer',
@@ -191,14 +195,14 @@ describe('HostEventClient', () => {
             const mockResponse = { fallbackResponse: 'data' };
             jest.spyOn(client, 'hostEventFallback').mockResolvedValue(mockResponse);
 
-            const result = await client.executeHostEvent(getIFrameEl(), hostEvent, payload);
+            const result = await client.triggerHostEvent(hostEvent, payload);
 
-            expect(client.hostEventFallback).toHaveBeenCalledWith(null, hostEvent, payload);
+            expect(client.hostEventFallback).toHaveBeenCalledWith(hostEvent, payload);
             expect(result).toEqual(mockResponse);
         });
 
         it('should call fallback  for Pin event', async () => {
-            const { client } = createHostEventClient();
+            const { client, mockIframe } = createHostEventClient();
             const hostEvent = HostEvent.Pin;
             const payload: HostEventRequest<typeof hostEvent> = {} as any;
             const mockResponse = {
@@ -211,19 +215,19 @@ describe('HostEventClient', () => {
 
             mockProcessTrigger.mockResolvedValue([mockResponse]);
 
-            const result = await client.executeHostEvent(getIFrameEl(), hostEvent, payload);
+            const result = await client.triggerHostEvent(hostEvent, payload);
 
             expect(mockProcessTrigger).toHaveBeenCalledWith(
-                getIFrameEl(),
+                mockIframe,
                 HostEvent.Pin,
-                'http://localhost',
+                mockThoughtSpotHost,
                 {},
             );
             expect(result).toEqual([mockResponse]);
         });
 
         it('should call fallback for SaveAnswer event', async () => {
-            const { client } = createHostEventClient();
+            const { client, mockIframe } = createHostEventClient();
             const hostEvent = HostEvent.SaveAnswer;
             const payload: HostEventRequest<typeof hostEvent> = {} as any;
             const mockResponse = {
@@ -236,12 +240,12 @@ describe('HostEventClient', () => {
 
             mockProcessTrigger.mockResolvedValue([mockResponse]);
 
-            const result = await client.executeHostEvent(getIFrameEl(), hostEvent, payload);
+            const result = await client.triggerHostEvent(hostEvent, payload);
 
             expect(mockProcessTrigger).toHaveBeenCalledWith(
-                getIFrameEl(),
+                mockIframe,
                 HostEvent.Save,
-                'http://localhost',
+                mockThoughtSpotHost,
                 {},
             );
             expect(result).toEqual([mockResponse]);

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

@@ -1,38 +1,47 @@
 import { HostEvent } from '../../types';
-import { processTrigger } from '../../utils/processTrigger';
+import { processTrigger as processTriggerService } from '../../utils/processTrigger';
+import { getEmbedConfig } from '../embedConfig';
 import {
-    UiPassthroughArrayResponse,
-    UiPassthroughEvent, HostEventRequest, HostEventResponse,
-    UiPassthroughRequest,
-    UiPassthroughResponse,
+    UIPassthroughArrayResponse,
+    UIPassthroughEvent, HostEventRequest, HostEventResponse,
+    UIPassthroughRequest,
+    UIPassthroughResponse,
+    TriggerPayload,
+    TriggerResponse,
 } from './contracts';
 
 export class HostEventClient {
-  thoughtSpotHost: string;
+  iFrame: HTMLIFrameElement;
 
-  constructor(thoughtSpotHost: string) {
-      this.thoughtSpotHost = thoughtSpotHost;
+  constructor(iFrame?: HTMLIFrameElement) {
+      this.iFrame = iFrame;
   }
 
-  public async executeUiPassthroughApi<UiPassthroughEventT extends UiPassthroughEvent>(
-      iFrame: HTMLIFrameElement,
-      apiName: UiPassthroughEventT,
-      parameters: UiPassthroughRequest<UiPassthroughEventT>,
-  ): UiPassthroughArrayResponse<UiPassthroughEventT> {
-      const res = await processTrigger(iFrame, HostEvent.UiPassthrough, this.thoughtSpotHost, {
-          type: apiName,
-          parameters,
-      });
+  /**
+   * A wrapper over process trigger to
+   * @param {HostEvent} message Host event to send
+   * @param {any} data Data to send with the host event
+   * @returns {Promise<any>} - the response from the process trigger
+   */
+  protected async processTrigger(message: HostEvent, data: any): Promise<any> {
+      if (!this.iFrame) {
+          throw new Error('Iframe element is not set');
+      }
 
-      return res;
+      const thoughtspotHost = getEmbedConfig().thoughtSpotHost;
+      return processTriggerService(
+          this.iFrame,
+          message,
+          thoughtspotHost,
+          data,
+      );
   }
 
-  public async handleUiPassthroughForHostEvent<UiPassthroughEventT extends UiPassthroughEvent>(
-      iFrame: HTMLIFrameElement,
-      apiName: UiPassthroughEventT,
-      parameters: UiPassthroughRequest<UiPassthroughEventT>,
-  ): Promise<UiPassthroughResponse<UiPassthroughEventT>> {
-      const response = (await this.executeUiPassthroughApi(iFrame, apiName, parameters))
+  public async handleHostEventWithParam<UIPassthroughEventT extends UIPassthroughEvent>(
+      apiName: UIPassthroughEventT,
+      parameters: UIPassthroughRequest<UIPassthroughEventT>,
+  ): Promise<UIPassthroughResponse<UIPassthroughEventT>> {
+      const response = (await this.triggerUIPassthroughApi(apiName, parameters))
           ?.filter?.((r) => r.error || r.value)[0];
 
       if (!response) {
@@ -41,42 +50,90 @@ export class HostEventClient {
           throw { error };
       }
 
-      const errors = response.error || (response.value as any)?.errors;
+      const errors = response.error
+        || (response.value as any)?.errors
+        || (response.value as any)?.error;
+
       if (errors) {
       // eslint-disable-next-line no-throw-literal
-          throw { error: response.error };
+          throw { error: errors };
       }
 
       return { ...response.value };
   }
 
   public async hostEventFallback(
-      iFrame: HTMLIFrameElement, hostEvent: HostEvent, data: any,
+      hostEvent: HostEvent,
+      data: any,
   ): Promise<any> {
-      return processTrigger(iFrame, hostEvent, this.thoughtSpotHost, data);
+      return this.processTrigger(hostEvent, data);
   }
 
-  public 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,
-          );
+  /**
+   * Setter for the iframe element used for host events
+   * @param {HTMLIFrameElement} iFrame - the iframe element to set
+   */
+  public setIframeElement(iFrame: HTMLIFrameElement): void {
+      this.iFrame = iFrame;
+  }
+
+  public async triggerUIPassthroughApi<UIPassthroughEventT extends UIPassthroughEvent>(
+      apiName: UIPassthroughEventT,
+      parameters: UIPassthroughRequest<UIPassthroughEventT>,
+  ): Promise<UIPassthroughArrayResponse<UIPassthroughEventT>> {
+      const res = await this.processTrigger(HostEvent.UIPassthrough, {
+          type: apiName,
+          parameters,
+      });
+
+      return res;
+  }
+
+  protected async handlePinEvent(
+      payload: HostEventRequest<HostEvent.Pin>,
+  ): Promise<HostEventResponse<HostEvent.Pin>> {
+      if (!payload || !('newVizName' in payload)) {
+          return this.hostEventFallback(HostEvent.Pin, payload);
+      }
+
+      return this.handleHostEventWithParam(
+          UIPassthroughEvent.PinAnswerToLiveboard, payload,
+      );
+  }
+
+  protected async handleSaveAnswerEvent(
+      payload: HostEventRequest<HostEvent.SaveAnswer>,
+  ): Promise<any> {
+      if (!payload || !('name' in payload) || !('description' in payload)) {
+          // Save is the fallback for SaveAnswer
+          return this.hostEventFallback(HostEvent.Save, payload);
       }
-      if (hostEvent === HostEvent.SaveAnswer && payload?.name) {
-          const data = await this.handleUiPassthroughForHostEvent(
-              iFrame, UiPassthroughEvent.saveAnswer, payload,
-          );
-          return {
-              ...data,
-              answerId: data?.saveResponse?.data?.Answer__save?.answer?.id,
-          };
+
+      const data = await this.handleHostEventWithParam(
+          UIPassthroughEvent.SaveAnswer, payload,
+      );
+      return {
+          ...data,
+          answerId: data?.saveResponse?.data?.Answer__save?.answer?.id,
+      };
+  }
+
+  public async triggerHostEvent<
+    HostEventT extends HostEvent,
+    PayloadT,
+  >(
+      hostEvent: HostEventT,
+      payload?: TriggerPayload<PayloadT, HostEventT>,
+  ): Promise<TriggerResponse<PayloadT, HostEventT>> {
+      switch (hostEvent) {
+          case HostEvent.Pin:
+              return this.handlePinEvent(payload as HostEventRequest<HostEvent.Pin>) as any;
+          case HostEvent.SaveAnswer:
+              return this.handleSaveAnswerEvent(
+                  payload as HostEventRequest<HostEvent.SaveAnswer>,
+              ) as any;
+          default:
+              return this.hostEventFallback(hostEvent, 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

@@ -484,8 +484,10 @@ describe('Liveboard/viz embed tests', () => {
             liveboardId,
         } as LiveboardViewConfig);
         liveboardEmbed.render();
-        const result = await liveboardEmbed.trigger(HostEvent.Pin);
-        expect(mockProcessTrigger).toBeCalled();
+        await executeAfterWait(async () => {
+            await liveboardEmbed.trigger(HostEvent.Pin);
+            expect(mockProcessTrigger).toBeCalled();
+        });
     });
 
     test('should render active tab when activeTab present', async () => {

package/src/embed/liveboard.ts

@@ -249,7 +249,7 @@ export interface LiveboardViewConfig
      */
     enableAskSage?: boolean;
     /**
-     * This flag is used to enable the 2 column layout in liveboard
+     * This flag is used to enable the 2 column layout on a Liveboard
      * @type {boolean}
      * @default false
      * @version SDK: 1.32.0 | ThoughtSpot:10.1.0.cl
@@ -284,7 +284,7 @@ export interface LiveboardViewConfig
      */
     showPreviewLoader?: boolean;
     /**
-     * This flag is used to enable the compact header in liveboard
+     * This flag is used to enable the compact header on a Liveboard
      * @type {boolean}
      * @default false
      * @version SDK: 1.35.0 | ThoughtSpot:10.3.0.cl
@@ -298,7 +298,7 @@ export interface LiveboardViewConfig
      */
     isLiveboardCompactHeaderEnabled?: boolean;
     /**
-     * This flag is used to show/hide verified Icon in liveboard compact header
+     * This flag is used to show/hide verified icon in the Liveboard compact header
      * @type {boolean}
      * @default true
      * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
@@ -312,7 +312,8 @@ export interface LiveboardViewConfig
      */
     showLiveboardVerifiedBadge?: boolean;
     /**
-     * This flag is used to show/hide re-verify banner in liveboard compact header
+     * This flag is used to show/hide the re-verify banner
+     * in Liveboard compact header
      * @type {boolean}
      * @default true
      * @version SDK: 1.35.0 | ThoughtSpot:10.4.0.cl
@@ -326,7 +327,7 @@ export interface LiveboardViewConfig
      */
     showLiveboardReverifyBanner?: boolean;
     /**
-     * This flag is used to enable/disable hide irrelevant filters in liveboard tab
+     * This flag is used to enable/disable hide irrelevant filters in a Liveboard tab
      * @type {boolean}
      * @default false
      * @version SDK: 1.36.0 | ThoughtSpot:10.6.0.cl
@@ -682,8 +683,8 @@ export class LiveboardEmbed extends V1Embed {
     }
 
     /**
-     * Returns the full url of the liveboard/viz which can be used to open
-     * this liveboard inside the full Thoughtspot application in a new tab.
+     * Returns the full url of the Liveboard/visualization which can be used to open
+     * this Liveboard inside the full Thoughtspot application in a new tab.
      * @returns url string
      */
     public getLiveboardUrl(): string {

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

@@ -50,7 +50,7 @@ import { logger } from '../utils/logger';
 import { version } from '../../package.json';
 import { HiddenActionItemByDefaultForSearchEmbed } from './search';
 import { processTrigger } from '../utils/processTrigger';
-import { UiPassthroughEvent } from './hostEventClient/contracts';
+import { UIPassthroughEvent } from './hostEventClient/contracts';
 
 jest.mock('../utils/processTrigger');
 
@@ -142,25 +142,25 @@ describe('Unit test case for ts embed', () => {
             });
         });
 
-        test('triggerUiPassThrough with params', async () => {
+        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,
+                    await searchEmbed.triggerUIPassThrough(
+                        UIPassthroughEvent.PinAnswerToLiveboard,
                         payload,
                     ),
                 );
                 expect(mockProcessTrigger).toHaveBeenCalledWith(
                     getIFrameEl(),
-                    HostEvent.UiPassthrough,
+                    HostEvent.UIPassthrough,
                     'http://tshost',
                     {
                         parameters: payload,
-                        type: UiPassthroughEvent.addVizToPinboard,
+                        type: UIPassthroughEvent.PinAnswerToLiveboard,
                     },
                 );
             });