@thoughtspot/visual-embed-sdk 1.35.5-hostEvent.5 → 1.35.5-hostEvent.7

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

@@ -1,38 +1,52 @@
 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';
 
+// Define a type for the eventHandlerMap
+type EventHandlerMap = {
+  [K in HostEvent]: any;
+};
+
 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,7 +55,10 @@ 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 };
@@ -51,32 +68,77 @@ export class HostEventClient {
   }
 
   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);
       }
-      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,
-          };
+
+      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);
+      }
+
+      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/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,
                     },
                 );
             });

package/src/embed/ts-embed.ts

@@ -12,9 +12,11 @@ import isObject from 'lodash/isObject';
 import {
     HostEventRequest,
     HostEventResponse,
-    UiPassthroughArrayResponse,
-    UiPassthroughEvent,
-    UiPassthroughRequest,
+    TriggerPayload,
+    TriggerResponse,
+    UIPassthroughArrayResponse,
+    UIPassthroughEvent,
+    UIPassthroughRequest,
 } from './hostEventClient/contracts';
 import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
@@ -85,7 +87,7 @@ const TS_EMBED_ID = '_thoughtspot-embed';
  * We cannot rename v1 event types to maintain backward compatibility
  * @internal
  */
-const V1EventMap = {};
+const V1EventMap: Record<string, any> = {};
 
 /**
  * Base class for embedding v2 experience
@@ -119,6 +121,15 @@ export class TsEmbed {
      */
     protected iFrame: HTMLIFrameElement;
 
+    /**
+     * Setter for the iframe element
+     * @param {HTMLIFrameElement} iFrame HTMLIFrameElement
+     */
+    protected setIframeElement(iFrame: HTMLIFrameElement): void {
+        this.iFrame = iFrame;
+        this.hostEventClient.setIframeElement(iFrame);
+    }
+
     protected viewConfig: ViewConfig;
 
     protected embedConfig: EmbedConfig;
@@ -190,7 +201,7 @@ export class TsEmbed {
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
-        this.hostEventClient = new HostEventClient(this.embedConfig.thoughtSpotHost);
+        this.hostEventClient = new HostEventClient(this.iFrame);
     }
 
     /**
@@ -252,7 +263,7 @@ export class TsEmbed {
         return eventData;
     }
 
-    private subscribedListeners = {};
+    private subscribedListeners: Record<string, any> = {};
 
     /**
      * Adds a global event listener to window for "message" events.
@@ -620,7 +631,7 @@ export class TsEmbed {
             this.insertIntoDOM(child);
         }
         if (this.insertedDomEl instanceof Node) {
-            this.insertedDomEl[this.embedNodeKey] = this;
+            (this.insertedDomEl as any)[this.embedNodeKey] = this;
         }
     }
 
@@ -658,7 +669,7 @@ export class TsEmbed {
                         return;
                     }
 
-                    this.iFrame = this.iFrame || this.createIframeEl(url);
+                    this.setIframeElement(this.iFrame || this.createIframeEl(url));
                     this.iFrame.addEventListener('load', () => {
                         nextInQueue();
                         const loadTimestamp = Date.now();
@@ -728,7 +739,7 @@ export class TsEmbed {
         if (this.preRenderWrapper && this.preRenderChild) {
             this.isPreRendered = true;
             if (this.preRenderChild instanceof HTMLIFrameElement) {
-                this.iFrame = this.preRenderChild;
+                this.setIframeElement(this.preRenderChild);
             }
             this.insertedDomEl = this.preRenderWrapper;
             this.isRendered = true;
@@ -777,7 +788,7 @@ export class TsEmbed {
         this.preRenderWrapper = preRenderWrapper;
 
         if (preRenderChild instanceof HTMLIFrameElement) {
-            this.iFrame = preRenderChild;
+            this.setIframeElement(preRenderChild);
         }
         this.insertedDomEl = preRenderWrapper;
 
@@ -994,14 +1005,14 @@ export class TsEmbed {
 
     /**
      * Triggers an event to the embedded app
-     * @param messageType The event type
-     * @param data The payload to send with the message
+     * @param {HostEvent} messageType The event type
+     * @param {any} data The payload to send with the message
      * @returns A promise that resolves with the response from the embedded app
      */
-    public trigger<HostEventT extends HostEvent>(
+    public async trigger<HostEventT extends HostEvent, PayloadT>(
         messageType: HostEventT,
-        data?: HostEventRequest<HostEventT>,
-    ): Promise<HostEventResponse<HostEventT>> {
+        data?: TriggerPayload<PayloadT, HostEventT>,
+    ): Promise<TriggerResponse<PayloadT, HostEventT>> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
 
         if (!this.isRendered) {
@@ -1014,22 +1025,22 @@ export class TsEmbed {
             return null;
         }
 
-        return this.hostEventClient.executeHostEvent(this.iFrame, messageType, data);
+        return this.hostEventClient.triggerHostEvent(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
+     * @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<UiPassthroughEventT extends UiPassthroughEvent>(
-        apiName: UiPassthroughEventT,
-        parameters: UiPassthroughRequest<UiPassthroughEventT>,
-    ): UiPassthroughArrayResponse<UiPassthroughEventT> {
-        return this.hostEventClient.executeUiPassthroughApi(this.iFrame, apiName, parameters);
+    public async triggerUIPassThrough<UIPassthroughEventT extends UIPassthroughEvent>(
+        apiName: UIPassthroughEventT,
+        parameters: UIPassthroughRequest<UIPassthroughEventT>,
+    ): Promise<UIPassthroughArrayResponse<UIPassthroughEventT>> {
+        const response = this.hostEventClient.triggerUIPassthroughApi(apiName, parameters);
+        return response;
     }
 
     /**
@@ -1135,14 +1146,14 @@ export class TsEmbed {
 
     private validatePreRenderViewConfig = (viewConfig: ViewConfig) => {
         const preRenderAllowedKeys = ['preRenderId', 'vizId', 'liveboardId'];
-        const preRenderedObject = this.insertedDomEl?.[this.embedNodeKey] as TsEmbed;
+        const preRenderedObject = (this.insertedDomEl as any)?.[this.embedNodeKey] as TsEmbed;
         if (!preRenderedObject) return;
         if (viewConfig.preRenderId) {
             const allOtherKeys = Object.keys(viewConfig).filter(
                 (key) => !preRenderAllowedKeys.includes(key) && !key.startsWith('on'),
             );
 
-            allOtherKeys.forEach((key) => {
+            allOtherKeys.forEach((key: keyof ViewConfig) => {
                 if (
                     !isUndefined(viewConfig[key])
                     && !isEqual(viewConfig[key], preRenderedObject.viewConfig[key])

package/src/index.ts

@@ -61,7 +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';
+import { UIPassthroughEvent } from './embed/hostEventClient/contracts';
 
 export {
     init,
@@ -128,7 +128,7 @@ export {
     HomePageSearchBarMode,
     VizPoint,
     CustomActionPayload,
-    UiPassthroughEvent,
+    UIPassthroughEvent,
 };
 
 export { resetCachedAuthToken } from './authToken';

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

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

package/src/types.ts

@@ -3208,7 +3208,7 @@ export enum HostEvent {
      * EmbedApi
      * @hidden
      */
-    UiPassthrough = 'UiPassthrough',
+    UIPassthrough = 'UiPassthrough',
 }
 
 /**