@thoughtspot/visual-embed-sdk 1.35.2 → 1.35.4

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

@@ -0,0 +1,254 @@
+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,
+    HostEventRequest,
+} from './contracts';
+import { HostEventClient } from './host-event-client';
+
+jest.mock('../../utils/processTrigger');
+
+const mockProcessTrigger = processTrigger as jest.Mock;
+
+const createHostEventClient = () => {
+    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', () => {
+        it('should call processTrigger with correct parameters and return response', async () => {
+            const { client, mockIframe } = createHostEventClient();
+
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
+                newVizName: 'testViz',
+            };
+            const triggerResponse = Promise.resolve([
+                { value: { pinboardId: 'testPinboard', tabId: 'testTab', vizId: 'testVizId' } },
+            ]);
+
+            mockProcessTrigger.mockResolvedValue(triggerResponse);
+
+            const result = await client.triggerUIPassthroughApi(apiName, parameters);
+
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                mockIframe,
+                HostEvent.UIPassthrough,
+                mockThoughtSpotHost,
+                {
+                    type: apiName,
+                    parameters,
+                },
+            );
+            expect(result).toEqual(await triggerResponse);
+        });
+    });
+
+    describe('handleUIPassthroughForHostEvent', () => {
+        it('should return the value from the first valid response', async () => {
+            const { client } = createHostEventClient();
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
+                newVizName: 'testViz',
+            };
+            const triggerResponse = Promise.resolve([
+                { value: { pinboardId: 'testPinboard', tabId: 'testTab', vizId: 'testVizId' } },
+            ]);
+            mockProcessTrigger.mockResolvedValue(triggerResponse);
+
+            const result = await client.handleHostEventWithParam(apiName, parameters);
+
+            expect(result).toEqual({
+                pinboardId: 'testPinboard',
+                tabId: 'testTab',
+                vizId: 'testVizId',
+            });
+        });
+
+        it('should throw an error if no valid response is found', async () => {
+            const { client } = createHostEventClient();
+            const apiName = UIPassthroughEvent.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
+                newVizName: 'testViz',
+            };
+            const triggerResponse: UIPassthroughArrayResponse<typeof apiName> = [];
+            mockProcessTrigger.mockResolvedValue(triggerResponse);
+
+            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.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
+                newVizName: 'testViz',
+                vizId: 'testVizId',
+            };
+            const triggerResponse: UIPassthroughArrayResponse<typeof apiName> = [];
+            mockProcessTrigger.mockResolvedValue(triggerResponse);
+
+            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.PinAnswerToLiveboard;
+            const parameters: UIPassthroughRequest<typeof apiName> = {
+                newVizName: 'testViz',
+            };
+            const triggerResponse: UIPassthroughArrayResponse<typeof apiName> = [
+                { error: 'Some error' },
+            ];
+            mockProcessTrigger.mockResolvedValue(triggerResponse);
+
+            await expect(client.handleHostEventWithParam(apiName, parameters))
+                .rejects.toEqual({ error: 'Some error' });
+        });
+    });
+
+    describe('executeHostEvent', () => {
+        it('should call handleUIPassthroughForHostEvent for Pin event', async () => {
+            const { client, mockIframe } = createHostEventClient();
+            const hostEvent = HostEvent.Pin;
+            const payload: HostEventRequest<typeof hostEvent> = {
+                newVizName: 'testViz',
+            };
+            const mockResponse = {
+                value: {
+                    pinboardId: 'testPinboard',
+                    tabId: 'testTab',
+                    vizId: 'testVizId',
+                },
+            };
+
+            mockProcessTrigger.mockResolvedValue([mockResponse]);
+
+            const result = await client.triggerHostEvent(hostEvent, payload);
+
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                mockIframe,
+                HostEvent.UIPassthrough,
+                'http://localhost',
+                { parameters: payload, type: UIPassthroughEvent.PinAnswerToLiveboard },
+            );
+            expect(result).toEqual(mockResponse.value);
+        });
+
+        it('should call handleUIPassthroughForHostEvent for SaveAnswer event', async () => {
+            const { client, mockIframe } = createHostEventClient();
+            const hostEvent = HostEvent.SaveAnswer;
+            const payload: HostEventRequest<typeof hostEvent> = {
+                name: 'Test Answer',
+                description: 'Test Description',
+                vizId: 'testVizId',
+            };
+            const mockResponse = [{
+                value: {
+                    saveResponse: {
+                        data: {
+                            Answer__save: {
+                                answer: {
+                                    id: 'newAnswer',
+                                },
+                            },
+                        },
+                    },
+                },
+                refId: 'testVizId',
+            }];
+            mockProcessTrigger.mockResolvedValue(mockResponse);
+            const result = await client.triggerHostEvent(hostEvent, payload);
+
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                mockIframe,
+                HostEvent.UIPassthrough,
+                mockThoughtSpotHost,
+                {
+                    parameters: payload,
+                    type: 'saveAnswer',
+                },
+            );
+            expect(result).toEqual({ answerId: 'newAnswer', ...mockResponse[0].value });
+        });
+
+        it('should call hostEventFallback for unmapped events', async () => {
+            const { client } = createHostEventClient();
+            const hostEvent = 'testEvent' as HostEvent;
+            const payload = { data: 'testData' };
+            const mockResponse = { fallbackResponse: 'data' };
+            jest.spyOn(client, 'hostEventFallback').mockResolvedValue(mockResponse);
+
+            const result = await client.triggerHostEvent(hostEvent, payload);
+
+            expect(client.hostEventFallback).toHaveBeenCalledWith(hostEvent, payload);
+            expect(result).toEqual(mockResponse);
+        });
+
+        it('should call fallback  for Pin event', async () => {
+            const { client, mockIframe } = createHostEventClient();
+            const hostEvent = HostEvent.Pin;
+            const payload: HostEventRequest<typeof hostEvent> = {} as any;
+            const mockResponse = {
+                value: {
+                    pinboardId: 'testPinboard',
+                    tabId: 'testTab',
+                    vizId: 'testVizId',
+                },
+            };
+
+            mockProcessTrigger.mockResolvedValue([mockResponse]);
+
+            const result = await client.triggerHostEvent(hostEvent, payload);
+
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                mockIframe,
+                HostEvent.Pin,
+                mockThoughtSpotHost,
+                {},
+            );
+            expect(result).toEqual([mockResponse]);
+        });
+
+        it('should call fallback for SaveAnswer event', async () => {
+            const { client, mockIframe } = createHostEventClient();
+            const hostEvent = HostEvent.SaveAnswer;
+            const payload: HostEventRequest<typeof hostEvent> = {} as any;
+            const mockResponse = {
+                value: {
+                    pinboardId: 'testPinboard',
+                    tabId: 'testTab',
+                    vizId: 'testVizId',
+                },
+            };
+
+            mockProcessTrigger.mockResolvedValue([mockResponse]);
+
+            const result = await client.triggerHostEvent(hostEvent, payload);
+
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                mockIframe,
+                HostEvent.Save,
+                mockThoughtSpotHost,
+                {},
+            );
+            expect(result).toEqual([mockResponse]);
+        });
+    });
+});

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

@@ -0,0 +1,139 @@
+import { HostEvent } from '../../types';
+import { processTrigger as processTriggerService } from '../../utils/processTrigger';
+import { getEmbedConfig } from '../embedConfig';
+import {
+    UIPassthroughArrayResponse,
+    UIPassthroughEvent, HostEventRequest, HostEventResponse,
+    UIPassthroughRequest,
+    UIPassthroughResponse,
+    TriggerPayload,
+    TriggerResponse,
+} from './contracts';
+
+export class HostEventClient {
+  iFrame: HTMLIFrameElement;
+
+  constructor(iFrame?: HTMLIFrameElement) {
+      this.iFrame = iFrame;
+  }
+
+  /**
+   * 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');
+      }
+
+      const thoughtspotHost = getEmbedConfig().thoughtSpotHost;
+      return processTriggerService(
+          this.iFrame,
+          message,
+          thoughtspotHost,
+          data,
+      );
+  }
+
+  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) {
+          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
+        || (response.value as any)?.error;
+
+      if (errors) {
+      // eslint-disable-next-line no-throw-literal
+          throw { error: response.error };
+      }
+
+      return { ...response.value };
+  }
+
+  public async hostEventFallback(
+      hostEvent: HostEvent,
+      data: any,
+  ): Promise<any> {
+      return this.processTrigger(hostEvent, data);
+  }
+
+  /**
+   * 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);
+      }
+
+      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);
+      }
+  }
+}

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 () => {
@@ -570,6 +572,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 +682,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.
@@ -248,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
@@ -283,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
@@ -297,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
@@ -311,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
@@ -325,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
@@ -636,7 +638,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);
@@ -678,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/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.PinAnswerToLiveboard,
+                        payload,
+                    ),
+                );
+                expect(mockProcessTrigger).toHaveBeenCalledWith(
+                    getIFrameEl(),
+                    HostEvent.UIPassthrough,
+                    'http://tshost',
+                    {
+                        parameters: payload,
+                        type: UIPassthroughEvent.PinAnswerToLiveboard,
+                    },
+                );
+            });
+        });
+
+        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 () => {