@thoughtspot/visual-embed-sdk 1.28.0-preRender → 1.28.0

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

@@ -1,38 +1,39 @@
 /* eslint-disable dot-notation */
+import * as authInstance from '../auth';
 import { resetCachedAuthToken } from '../authToken';
+import * as config from '../config';
 import {
+    AppEmbed,
     AuthType,
-    init,
     EmbedEvent,
-    SearchEmbed,
-    PinboardEmbed,
-    LiveboardViewConfig,
-    AppEmbed,
     LiveboardEmbed,
+    LiveboardViewConfig,
+    PinboardEmbed,
+    SearchEmbed,
+    init,
 } from '../index';
+import * as mixpanelInstance from '../mixpanel-service';
+import { MIXPANEL_EVENT } from '../mixpanel-service';
 import {
-    Action, HomeLeftNavItem, RuntimeFilter, RuntimeFilterOp, HomepageModule,
-} from '../types';
-import {
+    createRootEleForEmbed,
+    defaultParamsForPinboardEmbed,
     executeAfterWait,
+    expectUrlMatchesWithParams,
     getDocumentBody,
     getIFrameEl,
     getIFrameSrc,
     getRootEl,
+    mockMessageChannel,
     postMessageToParent,
-    defaultParamsForPinboardEmbed,
     waitFor,
-    expectUrlMatchesWithParams,
-    mockMessageChannel,
 } from '../test/test-utils';
-import * as config from '../config';
-import * as tsEmbedInstance from './ts-embed';
-import * as mixpanelInstance from '../mixpanel-service';
-import * as authInstance from '../auth';
-import * as baseInstance from './base';
-import { MIXPANEL_EVENT } from '../mixpanel-service';
+import {
+    Action, HomeLeftNavItem, HomepageModule, RuntimeFilter, RuntimeFilterOp,
+} from '../types';
 import * as authService from '../utils/authService/authService';
 import { logger } from '../utils/logger';
+import * as baseInstance from './base';
+import * as tsEmbedInstance from './ts-embed';
 
 const defaultViewConfig = {
     frameParams: {
@@ -47,15 +48,6 @@ const tabId2 = 'eca215d4-0d2c-4a55-90e3-d81ef6848ae0';
 const thoughtSpotHost = 'tshost';
 const defaultParamsPost = '';
 
-const createRootEleForEmbed = () => {
-    const rootEle = document.createElement('div');
-    rootEle.id = 'myRoot';
-    const tsEmbedDiv = document.createElement('div');
-    tsEmbedDiv.id = 'tsEmbedDiv';
-    rootEle.appendChild(tsEmbedDiv);
-    document.body.appendChild(rootEle);
-};
-
 beforeAll(() => {
     spyOn(window, 'alert');
 });
@@ -317,6 +309,46 @@ describe('Unit test case for ts embed', () => {
             });
         });
 
+        test('Runtime filters from view Config should be part of app_init payload when excludeRuntimeFiltersfromURL is undefined', async () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const mockRuntimeFilters: RuntimeFilter[] = [
+                {
+                    columnName: 'color',
+                    operator: RuntimeFilterOp.EQ,
+                    values: ['blue'],
+                },
+            ];
+
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                excludeRuntimeFiltersfromURL: true,
+                runtimeFilters: mockRuntimeFilters,
+            });
+            searchEmbed.render();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: {
+                    customisations,
+                    authToken: '',
+                    runtimeFilterParams: 'col1=color&op1=EQ&val1=blue',
+                    hiddenHomeLeftNavItems: [],
+                    hiddenHomepageModules: [],
+                    hostConfig: undefined,
+                    reorderedHomepageModules: [],
+                },
+            });
+        });
+
         test('Runtime filters from view Config should not be part of app_init payload when excludeRuntimeFiltersfromURL is false', async () => {
             const mockEmbedEventPayload = {
                 type: EmbedEvent.APP_INIT,
@@ -364,7 +396,7 @@ describe('Unit test case for ts embed', () => {
             };
             const mockedHiddenHomeLeftNavItems: HomeLeftNavItem[] = [
                 HomeLeftNavItem.Home,
-                HomeLeftNavItem.Documentation,
+                HomeLeftNavItem.MonitorSubscription,
             ];
 
             const searchEmbed = new AppEmbed(getRootEl(), {
@@ -386,7 +418,10 @@ describe('Unit test case for ts embed', () => {
                     authToken: '',
                     hostConfig: undefined,
                     runtimeFilterParams: null,
-                    hiddenHomeLeftNavItems: [HomeLeftNavItem.Home, HomeLeftNavItem.Documentation],
+                    hiddenHomeLeftNavItems: [
+                        HomeLeftNavItem.Home,
+                        HomeLeftNavItem.MonitorSubscription,
+                    ],
                     hiddenHomepageModules: [],
                     reorderedHomepageModules: [],
                 },
@@ -615,7 +650,10 @@ describe('Unit test case for ts embed', () => {
                 type: EmbedEvent.APP_INIT,
                 data: {},
             };
-            const searchEmbed = new SearchEmbed(getRootEl(), { ...defaultViewConfig, preRenderId: 'test' });
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                preRenderId: 'test',
+            });
             searchEmbed.preRender();
             const mockPort: any = {
                 postMessage: jest.fn(),
@@ -672,7 +710,10 @@ describe('Unit test case for ts embed', () => {
                 type: EmbedEvent.AuthExpire,
                 data: {},
             };
-            const searchEmbed = new SearchEmbed(getRootEl(), { ...defaultViewConfig, preRenderId: 'test' });
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                preRenderId: 'test',
+            });
             jest.spyOn(baseInstance, 'notifyAuthFailure');
             searchEmbed.preRender();
             const mockPort: any = {

package/src/embed/ts-embed.ts

@@ -8,57 +8,54 @@
  */
 
 import isEqual from 'lodash/isEqual';
-import { logger } from '../utils/logger';
+import pkgInfo from '../../package.json';
+import { AuthFailureType } from '../auth';
 import { getAuthenticationToken } from '../authToken';
-import { AnswerService } from '../utils/graphql/answerService/answerService';
 import {
-    getEncodedQueryParamsString,
-    getCssDimension,
-    getOffsetTop,
-    embedEventStatus,
-    setAttributes,
-    getCustomisations,
-    getRuntimeFilters,
-    getDOMNode,
-    getFilterQuery,
-    getQueryParamString,
-    getRuntimeParameters,
-    setStyleProperties,
-    removeStyleProperties,
-    isUndefined,
-} from '../utils';
-import {
-    getThoughtSpotHost,
-    URL_MAX_LENGTH,
-    DEFAULT_EMBED_WIDTH,
     DEFAULT_EMBED_HEIGHT,
+    DEFAULT_EMBED_WIDTH,
+    URL_MAX_LENGTH,
+    getThoughtSpotHost,
     getV2BasePath,
 } from '../config';
+import { MIXPANEL_EVENT, uploadMixpanelEvent } from '../mixpanel-service';
 import {
+    Action,
     AuthType,
+    ContextMenuTriggerOptions,
     DOMSelector,
-    HostEvent,
+    EmbedConfig,
     EmbedEvent,
+    HostEvent,
     MessageCallback,
-    Action,
-    Param,
-    EmbedConfig,
-    MessageOptions,
-    MessagePayload,
     MessageCallbackObj,
+    MessageOptions,
+    Param,
     ViewConfig,
-    FrameParams,
-    ContextMenuTriggerOptions,
-    RuntimeFilter,
 } from '../types';
-import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
-import { processEventData, processAuthFailure } from '../utils/processData';
+import {
+    embedEventStatus,
+    getCssDimension,
+    getCustomisations,
+    getDOMNode,
+    getEncodedQueryParamsString,
+    getFilterQuery,
+    getOffsetTop,
+    getQueryParamString,
+    getRuntimeFilters,
+    getRuntimeParameters,
+    isUndefined,
+    removeStyleProperties,
+    setAttributes,
+    setStyleProperties,
+} from '../utils';
+import { AnswerService } from '../utils/graphql/answerService/answerService';
+import { logger } from '../utils/logger';
+import { processAuthFailure, processEventData } from '../utils/processData';
 import { processTrigger } from '../utils/processTrigger';
-import pkgInfo from '../../package.json';
 import {
-    getAuthPromise, renderInQueue, handleAuth, notifyAuthFailure,
+    getAuthPromise, handleAuth, notifyAuthFailure, renderInQueue,
 } from './base';
-import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
 
 const { version } = pkgInfo;
@@ -170,7 +167,7 @@ export class TsEmbed {
         this.thoughtSpotV2Base = getV2BasePath(this.embedConfig);
         this.eventHandlerMap = new Map();
         this.isError = false;
-        this.viewConfig = viewConfig;
+        this.viewConfig = { excludeRuntimeFiltersfromURL: true, ...viewConfig };
         this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
         this.registerAppInit();
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
@@ -518,10 +515,7 @@ export class TsEmbed {
         const queryParams = this.shouldEncodeUrlQueryParams
             ? `?base64UrlEncodedFlags=${getEncodedQueryParamsString(queryString)}`
             : `?${queryString}`;
-        let host = this.thoughtSpotHost;
-        if (!isUndefined(this.embedConfig.enableReactShell)) {
-            host = this.embedConfig.enableReactShell as boolean ? '/v2' : '/v1';
-        }
+        const host = this.thoughtSpotHost;
         const path = `${host}/${queryParams}#`;
         return path;
     }
@@ -559,8 +553,7 @@ export class TsEmbed {
 
         const {
             height: frameHeight,
-            width: frameWidth,
-            ...restParams
+            width: frameWidth, ...restParams
         } = this.viewConfig.frameParams || {};
         const width = getCssDimension(frameWidth || DEFAULT_EMBED_WIDTH);
         const height = getCssDimension(frameHeight || DEFAULT_EMBED_HEIGHT);
@@ -682,7 +675,7 @@ export class TsEmbed {
     protected connectPreRendered(): boolean {
         const preRenderIds = this.getPreRenderIds();
         this.preRenderWrapper = this.preRenderWrapper
-            || document.getElementById(preRenderIds.wrapper);
+        || document.getElementById(preRenderIds.wrapper);
 
         this.preRenderChild = this.preRenderChild || document.getElementById(preRenderIds.child);
 
@@ -968,6 +961,16 @@ export class TsEmbed {
      */
     public trigger(messageType: HostEvent, data: any = {}): Promise<any> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
+
+        if (!this.isRendered) {
+            this.handleError('Please call render before triggering events');
+            return null;
+        }
+
+        if (!messageType) {
+            this.handleError('Host event type is undefined');
+            return null;
+        }
         return processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
     }
 
@@ -978,7 +981,7 @@ export class TsEmbed {
      *
      * @param args
      */
-    public render(): TsEmbed {
+    public async render(): Promise<TsEmbed> {
         this.isRendered = true;
 
         return this;
@@ -1236,7 +1239,7 @@ export class V1Embed extends TsEmbed {
 
     constructor(domSelector: DOMSelector, viewConfig: ViewConfig) {
         super(domSelector, viewConfig);
-        this.viewConfig = viewConfig;
+        this.viewConfig = { excludeRuntimeFiltersfromURL: true, ...viewConfig };
     }
 
     /**

package/src/index.ts

@@ -54,6 +54,7 @@ import { SageEmbed, SageViewConfig } from './embed/sage';
 import { AnswerService, SessionInterface, UnderlyingDataPoint } from './utils/graphql/answerService/answerService';
 import { getEmbedConfig } from './embed/embedConfig';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from './mixpanel-service';
+import { tokenizedFetch } from './tokenizedFetch';
 
 export {
     init,
@@ -65,6 +66,7 @@ export {
     exportTMLInput,
     getEmbedConfig as getInitConfig,
     getSessionInfo,
+    tokenizedFetch,
     SearchEmbed,
     SearchBarEmbed,
     PinboardEmbed,

package/src/react/index.spec.tsx

@@ -135,6 +135,7 @@ describe('React Components', () => {
                             values: [100],
                         },
                     ]}
+                    excludeRuntimeFiltersfromURL={false}
                 />,
             );
 
@@ -199,6 +200,35 @@ describe('React Components', () => {
             ).toBe(true);
             expect(containerSibling.querySelector('div')).toBe(null);
         });
+
+        it('Should have the correct container element', async () => {
+            const { container } = render(
+                <LiveboardEmbed liveboardId="abcd" className="def" />,
+            );
+
+            await waitFor(() => getIFrameEl(container));
+            expect(container.querySelector('div')).not.toBe(null);
+            expect(
+                container.querySelector('div').classList.contains('def'),
+            ).toBe(true);
+
+            const { container: containerSibling } = render(
+                <LiveboardEmbed
+                    liveboardId="abcd"
+                    className="def"
+                    insertAsSibling={true}
+                />,
+            );
+            await waitFor(() => getIFrameEl(containerSibling));
+            expect(containerSibling.querySelector('span')).not.toBe(null);
+            expect(containerSibling.querySelector('span').style.position).toBe(
+                'absolute',
+            );
+            expect(
+                getIFrameEl(containerSibling).classList.contains('def'),
+            ).toBe(true);
+            expect(containerSibling.querySelector('div')).toBe(null);
+        });
     });
 
     describe('SearchBarEmbed', () => {

package/src/test/test-utils.ts

@@ -116,3 +116,12 @@ export const expectUrlMatch = (source: string, target: string) => {
     const targetUrl = new URL(target);
     expect(sourceUrl.hash).toBe(targetUrl.hash);
 };
+
+export const createRootEleForEmbed = () => {
+    const rootEle = document.createElement('div');
+    rootEle.id = 'myRoot';
+    const tsEmbedDiv = document.createElement('div');
+    tsEmbedDiv.id = 'tsEmbedDiv';
+    rootEle.appendChild(tsEmbedDiv);
+    document.body.appendChild(rootEle);
+};

package/src/tokenizedFetch.ts

@@ -3,6 +3,15 @@ import { getEmbedConfig } from './embed/embedConfig';
 
 import { AuthType } from './types';
 
+/**
+ * Fetch wrapper that adds the authentication token to the request.
+ * Use this to call the ThoughtSpot APIs when using the visual embed sdk.
+ *
+ * @param input
+ * @param init
+ * @version SDK: 1.28.0
+ * @group Global methods
+ */
 export const tokenizedFetch: typeof fetch = async (input, init): Promise<Response> => {
     const embedConfig = getEmbedConfig();
     if (embedConfig.authType !== AuthType.TrustedAuthTokenCookieless) {