@thoughtspot/visual-embed-sdk 1.26.2 → 1.27.0-alpha.0

package/src/embed/search.ts

@@ -23,18 +23,19 @@ import { getReleaseVersion } from '../auth';
 import { getEmbedConfig } from './embedConfig';
 
 /**
- * Configuration for search options
+ * Configuration for search options.
+ *
  */
 export interface SearchOptions {
     /**
-     * The tml string to load the answer
+     * Search tokens to pass in the query.
      */
     searchTokenString: string;
     /**
-     * Boolean to determine if the search should be executed or not.
-     * if it is executed, put the focus on the results.
-     * if it’s not executed, put the focus in the search bar - at the end of
-     * the tokens
+     * Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
      */
     executeSearch?: boolean;
 }
@@ -59,19 +60,15 @@ export interface SearchViewConfig
      */
     collapseDataSources?: boolean;
     /**
-     * If set to true, hides the data sources panel.
+     * Show or hide the data sources panel.
      */
     hideDataSources?: boolean;
     /**
-     * If set to true, hides the charts and tables in search answers.
+     * Show or hide the charts and tables in search answers.
      * This attribute can be used to create a custom visualization
      * using raw answer data.
      */
     hideResults?: boolean;
-    /**
-     * If set to true, expands all the data sources panel.
-     */
-    expandAllDataSource?: boolean;
     /**
      * If set to true, the Search Assist feature is enabled.
      *
@@ -85,9 +82,9 @@ export interface SearchViewConfig
     forceTable?: boolean;
     /**
      * The array of data source GUIDs to set on load.
-     * Only a single dataSource supported currently.
+     * Only a single data source is supported currently.
      *
-     * @deprecated Use dataSource instead
+     * @deprecated Use `dataSource` instead.
      */
     dataSources?: string[];
     /**
@@ -99,11 +96,29 @@ export interface SearchViewConfig
     /**
      * The initial search query to load the answer with.
      *
-     * @deprecated Use {@link searchOptions} instead
+     * @deprecated
+     *
+     * Use {@link searchOptions} instead.
      */
     searchQuery?: string;
     /**
-     * Configuration for search options
+     * Configuration for search options.
+     * Includes the following properties:
+     *
+     * `searchTokenString`: Search tokens to pass in the query.
+     *
+     * `executeSearch`: Boolean to define if the search should be executed or not.
+     * If it is executed, the focus is placed on the results.
+     * If it’s not executed, the focus is placed at the end of
+     * the token string in the search bar.
+     *
+     * @example
+     * ```js
+     * searchOptions: {
+     *    searchTokenString: '[quantity purchased] [region]',
+     *    executeSearch: true,
+     * }
+     * ```
      */
     searchOptions?: SearchOptions;
     /**
@@ -111,10 +126,10 @@ export interface SearchViewConfig
      */
     answerId?: string;
     /**
-     * If set to true, search page will render without the Search Bar
+     * If set to true, the search page will render without the Search Bar
      * The chart/table should still be visible.
      *
-     * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl
+     * @version SDK: 1.21.0 | ThoughtSpot: 9.2.0.cl, 9.5.0.sw
      */
     hideSearchBar?: boolean;
     /**
@@ -177,7 +192,6 @@ export class SearchEmbed extends TsEmbed {
     protected getEmbedParams(): string {
         const {
             hideResults,
-            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,
@@ -185,6 +199,7 @@ export class SearchEmbed extends TsEmbed {
             dataSource,
             dataSources,
             excludeRuntimeFiltersfromURL,
+            hideSearchBar,
             dataPanelV2 = false,
             useLastSelectedSources = false,
             runtimeParameters,
@@ -221,6 +236,10 @@ export class SearchEmbed extends TsEmbed {
             queryParams[Param.ForceTable] = true;
         }
 
+        if (hideSearchBar) {
+            queryParams[Param.HideSearchBar] = true;
+        }
+
         queryParams[Param.DataPanelV2Enabled] = dataPanelV2;
         queryParams[Param.DataSourceMode] = this.getDataSourceMode();
 
@@ -253,7 +272,8 @@ export class SearchEmbed extends TsEmbed {
      * @param answerId The GUID of a saved answer
      * @param dataSources A list of data source GUIDs
      */
-    private getIFrameSrc(answerId: string) {
+    public getIFrameSrc(): string {
+        const { answerId } = this.viewConfig;
         const answerPath = answerId ? `saved-answer/${answerId}` : 'answer';
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();
 
@@ -267,14 +287,14 @@ export class SearchEmbed extends TsEmbed {
         super.render();
         const { answerId } = this.viewConfig;
 
-        const src = this.getIFrameSrc(answerId);
+        const src = this.getIFrameSrc();
         this.renderIFrame(src);
         getAuthPromise().then(() => {
             if (
                 checkReleaseVersionInBeta(
                     getReleaseVersion(),
                     getEmbedConfig().suppressSearchEmbedBetaWarning
-                        || getEmbedConfig().suppressErrorAlerts,
+                    || getEmbedConfig().suppressErrorAlerts,
                 )
             ) {
                 alert(ERROR_MESSAGE.SEARCHEMBED_BETA_WRANING_MESSAGE);

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

@@ -562,6 +562,138 @@ describe('Unit test case for ts embed', () => {
         });
     });
 
+    describe('Token fetch fails in cookieless authentication authType', () => {
+        beforeEach(() => {
+            jest.spyOn(authInstance, 'doCookielessTokenAuth').mockResolvedValueOnce(true);
+            init({
+                thoughtSpotHost: 'tshost',
+                customizations: customisations,
+                customCssUrl: 'http://localhost:5000',
+                authType: AuthType.TrustedAuthTokenCookieless,
+                getAuthToken: () => Promise.reject(),
+            });
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+            baseInstance.reset();
+        });
+
+        test('should show login failure message if token failed during app_init', async () => {
+            const a = jest.spyOn(authService, 'verifyTokenService');
+            a.mockResolvedValue(true);
+
+            // authVerifyMock.mockResolvedValue(true);
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            searchEmbed.render();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            await executeAfterWait(() => {
+                expect(mockPort.postMessage).not.toHaveBeenCalled();
+                expect(getRootEl().innerHTML).toContain('Not logged in');
+            });
+
+            jest.spyOn(authService, 'verifyTokenService').mockClear();
+        });
+
+        test('should show login failure message if token failed during app_init prerender', async () => {
+            const a = jest.spyOn(authService, 'verifyTokenService');
+            a.mockResolvedValue(true);
+
+            // authVerifyMock.mockResolvedValue(true);
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), { ...defaultViewConfig, preRenderId: 'test' });
+            searchEmbed.preRender();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            const preRenderWrapper = document.getElementById('tsEmbed-pre-render-wrapper-test');
+            await executeAfterWait(() => {
+                expect(mockPort.postMessage).not.toHaveBeenCalled();
+                expect(preRenderWrapper.innerHTML).toContain('Not logged in');
+            });
+
+            jest.spyOn(authService, 'verifyTokenService').mockClear();
+        });
+
+        test('should show login failure message if update token failed', async () => {
+            const a = jest.spyOn(authService, 'verifyTokenService');
+            a.mockResolvedValue(true);
+
+            // authVerifyMock.mockResolvedValue(true);
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.AuthExpire,
+                data: {},
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), defaultViewConfig);
+            jest.spyOn(baseInstance, 'notifyAuthFailure');
+            searchEmbed.render();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            await executeAfterWait(() => {
+                expect(getRootEl().innerHTML).toContain('Not logged in');
+                expect(baseInstance.notifyAuthFailure).toBeCalledWith(
+                    authInstance.AuthFailureType.EXPIRY,
+                );
+            });
+
+            jest.spyOn(authService, 'verifyTokenService').mockClear();
+            jest.spyOn(baseInstance, 'notifyAuthFailure').mockClear();
+        });
+
+        test('should show login failure message if update token failed prerender', async () => {
+            const a = jest.spyOn(authService, 'verifyTokenService');
+            a.mockResolvedValue(true);
+
+            // authVerifyMock.mockResolvedValue(true);
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.AuthExpire,
+                data: {},
+            };
+            const searchEmbed = new SearchEmbed(getRootEl(), { ...defaultViewConfig, preRenderId: 'test' });
+            jest.spyOn(baseInstance, 'notifyAuthFailure');
+            searchEmbed.preRender();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+            const preRenderWrapper = document.getElementById('tsEmbed-pre-render-wrapper-test');
+            await executeAfterWait(() => {
+                expect(preRenderWrapper.innerHTML).toContain('Not logged in');
+                expect(baseInstance.notifyAuthFailure).toBeCalledWith(
+                    authInstance.AuthFailureType.EXPIRY,
+                );
+            });
+
+            jest.spyOn(authService, 'verifyTokenService').mockClear();
+            jest.spyOn(baseInstance, 'notifyAuthFailure').mockClear();
+        });
+    });
+
     xdescribe('AuthExpire embedEvent in TrustedAuthToken authType', () => {
         test('AutoLogin true scenario', async () => {
             init({

package/src/embed/ts-embed.ts

@@ -8,7 +8,6 @@
  */
 
 import isEqual from 'lodash/isEqual';
-
 import { getAuthenticationToken } from '../authToken';
 import { AnswerService } from '../utils/graphql/answerService/answerService';
 import {
@@ -52,7 +51,7 @@ import {
     RuntimeFilter,
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
-import { processEventData } from '../utils/processData';
+import { processEventData, processAuthFailure } from '../utils/processData';
 import { processTrigger } from '../utils/processTrigger';
 import pkgInfo from '../../package.json';
 import {
@@ -309,7 +308,12 @@ export class TsEmbed {
     private appInitCb = async (_: any, responder: any) => {
         let authToken = '';
         if (this.embedConfig.authType === AuthType.TrustedAuthTokenCookieless) {
-            authToken = await getAuthenticationToken(this.embedConfig);
+            try {
+                authToken = await getAuthenticationToken(this.embedConfig);
+            } catch (e) {
+                processAuthFailure(e, this.isPreRendered ? this.preRenderWrapper : this.el);
+                return;
+            }
         }
         this.isAppInitialized = true;
         responder({
@@ -339,11 +343,16 @@ export class TsEmbed {
     private updateAuthToken = async (_: any, responder: any) => {
         const { autoLogin = false, authType } = this.embedConfig; // Set autoLogin default to false
         if (authType === AuthType.TrustedAuthTokenCookieless) {
-            const authToken = await getAuthenticationToken(this.embedConfig);
-            responder({
-                type: EmbedEvent.AuthExpire,
-                data: { authToken },
-            });
+            let authToken = '';
+            try {
+                authToken = await getAuthenticationToken(this.embedConfig);
+                responder({
+                    type: EmbedEvent.AuthExpire,
+                    data: { authToken },
+                });
+            } catch (e) {
+                processAuthFailure(e, this.isPreRendered ? this.preRenderWrapper : this.el);
+            }
         } else if (autoLogin) {
             handleAuth();
         }
@@ -508,7 +517,11 @@ export class TsEmbed {
         const queryParams = this.shouldEncodeUrlQueryParams
             ? `?base64UrlEncodedFlags=${getEncodedQueryParamsString(queryString)}`
             : `?${queryString}`;
-        const path = `${this.thoughtSpotHost}/${queryParams}#`;
+        let host = this.thoughtSpotHost;
+        if (!isUndefined(this.embedConfig.enableReactShell)) {
+            host = this.embedConfig.enableReactShell as boolean ? '/v2' : '/v1';
+        }
+        const path = `${host}/${queryParams}#`;
         return path;
     }
 
@@ -527,6 +540,7 @@ export class TsEmbed {
 
         iFrame.src = frameSrc;
         iFrame.id = TS_EMBED_ID;
+        iFrame.setAttribute('data-ts-iframe', 'true');
 
         // according to screenfull.js documentation
         // allowFullscreen, webkitallowfullscreen and mozallowfullscreen must be
@@ -969,6 +983,10 @@ export class TsEmbed {
         return this;
     }
 
+    public getIframeSrc(): string {
+        return '';
+    }
+
     protected handleRenderForPrerender() {
         this.render();
     }
@@ -1071,11 +1089,11 @@ export class TsEmbed {
                 ) {
                     console.warn(
                         `${this.embedComponentType} was pre-rendered with `
-                            + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
-                            + `but a different value "${JSON.stringify(viewConfig[key])}" `
-                            + 'was passed to the Embed component. '
-                            + 'The new value provided is ignored, the value provided during '
-                            + 'preRender is used.',
+                        + `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+                        + `but a different value "${JSON.stringify(viewConfig[key])}" `
+                        + 'was passed to the Embed component. '
+                        + 'The new value provided is ignored, the value provided during '
+                        + 'preRender is used.',
                     );
                 }
             });

package/src/react/index.spec.tsx

@@ -199,35 +199,6 @@ 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', () => {