@thoughtspot/visual-embed-sdk 1.10.0 → 1.10.1

package/src/embed/ts-embed.ts

@@ -34,7 +34,7 @@ import {
     MessageCallbackObj,
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
-import { getProcessData } from '../utils/processData';
+import { processEventData } from '../utils/processData';
 import { processTrigger } from '../utils/processTrigger';
 import pkgInfo from '../../package.json';
 import { getAuthPromise, getEmbedConfig, renderInQueue } from './base';
@@ -212,14 +212,6 @@ export class TsEmbed {
         this.isError = false;
         this.viewConfig = viewConfig;
         this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
-        if (!this.embedConfig.suppressNoCookieAccessAlert) {
-            this.on(EmbedEvent.NoCookieAccess, () => {
-                // eslint-disable-next-line no-alert
-                alert(
-                    'Third party cookie access is blocked on this browser, please allow third party cookies for ThoughtSpot to work properly',
-                );
-            });
-        }
     }
 
     /**
@@ -304,7 +296,12 @@ export class TsEmbed {
             if (event.source === this.iFrame.contentWindow) {
                 this.executeCallbacks(
                     eventType,
-                    getProcessData(eventType, eventData, this.thoughtSpotHost),
+                    processEventData(
+                        eventType,
+                        eventData,
+                        this.thoughtSpotHost,
+                        this.el,
+                    ),
                     eventPort,
                 );
             }
@@ -464,7 +461,12 @@ export class TsEmbed {
             uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
 
             getAuthPromise()
-                ?.then(() => {
+                ?.then((isLoggedIn: boolean) => {
+                    if (!isLoggedIn) {
+                        this.el.innerHTML = this.embedConfig.loginFailedMessage;
+                        return;
+                    }
+
                     uploadMixpanelEvent(
                         MIXPANEL_EVENT.VISUAL_SDK_RENDER_COMPLETE,
                     );
@@ -492,7 +494,7 @@ export class TsEmbed {
                         frameWidth || DEFAULT_EMBED_WIDTH,
                     );
                     const height = getCssDimension(
-                        frameWidth || DEFAULT_EMBED_HEIGHT,
+                        frameHeight || DEFAULT_EMBED_HEIGHT,
                     );
                     setAttributes(this.iFrame, restParams);
 
@@ -536,6 +538,7 @@ export class TsEmbed {
                     uploadMixpanelEvent(
                         MIXPANEL_EVENT.VISUAL_SDK_RENDER_FAILED,
                     );
+                    this.el.innerHTML = this.embedConfig.loginFailedMessage;
                     this.handleError(error);
                 });
         });

package/src/index.ts

@@ -9,13 +9,14 @@
  */
 
 import { AppEmbed, Page, AppViewConfig } from './embed/app';
-import { init, prefetch } from './embed/base';
+import { init, prefetch, logout } from './embed/base';
 import {
     PinboardEmbed,
     LiveboardViewConfig,
     LiveboardEmbed,
 } from './embed/liveboard';
 import { SearchEmbed, SearchViewConfig } from './embed/search';
+import { AuthFailureType, AuthStatus } from './auth';
 import {
     AuthType,
     RuntimeFilter,
@@ -29,11 +30,14 @@ import {
 
 export {
     init,
+    logout,
     prefetch,
     SearchEmbed,
     PinboardEmbed,
     LiveboardEmbed,
     AppEmbed,
+    AuthFailureType,
+    AuthStatus,
     // types
     Page,
     AuthType,

package/src/test/test-utils.ts

@@ -14,7 +14,7 @@ type DOMElement = HTMLElement | Document;
 
 export const getRootEl = () => document.getElementById('embed');
 
-export const getRootEl2 = () => document.getElementById('emebed-2');
+export const getRootEl2 = () => document.getElementById('embed-2');
 
 export const getIFrameEl = (container: DOMElement = document) =>
     container.querySelector('iframe');

package/src/types.ts

@@ -131,6 +131,12 @@ export interface EmbedConfig {
      */
     disableLoginRedirect?: boolean;
 
+    /**
+     * This message is displayed on the embed view when the login fails.
+     * @version 1.10.1 | ThoughtSpot: *
+     */
+    loginFailedMessage?: string;
+
     /**
      * Calls the prefetch method internally when set to true
      * @default false
@@ -365,6 +371,16 @@ export enum EmbedEvent {
      * The ThoughtSpot auth session has expired.
      */
     AuthExpire = 'ThoughtspotAuthExpired',
+    /**
+     * ThoughtSpot failed to validate the auth session.
+     * @hidden
+     */
+    AuthFailure = 'ThoughtspotAuthFailure',
+    /**
+     * ThoughtSpot failed to validate the auth session.
+     * @hidden
+     */
+    AuthLogout = 'ThoughtspotAuthLogout',
     /**
      * The height of the embedded Liveboard or visualization has been computed.
      * @return data - The height of the embedded Liveboard or visualization

package/src/utils/authService.spec.ts

@@ -4,6 +4,7 @@ import {
     fetchAuthService,
     fetchBasicAuthService,
 } from './authService';
+import { EndPoints } from '../auth';
 
 const thoughtSpotHost = 'http://10.79.135.124:3000';
 
@@ -21,6 +22,7 @@ describe('Unit test for authService', () => {
             Promise.resolve({
                 json: () => ({ success: true }),
                 status: 200,
+                ok: true,
             }),
         );
         const response = await fetchSessionInfoService(authVerificationUrl);
@@ -32,6 +34,7 @@ describe('Unit test for authService', () => {
         global.fetch = jest.fn(() =>
             Promise.resolve({
                 text: () => ({ success: true }),
+                ok: true,
             }),
         );
         const response = await fetchAuthTokenService(authEndpoint);
@@ -40,14 +43,37 @@ describe('Unit test for authService', () => {
     });
 
     test('fetchAuthService', async () => {
-        global.fetch = jest.fn(() => Promise.resolve({ success: true }));
-        await fetchAuthService(authVerificationUrl, username, authToken);
-        expect(fetch).toBeCalled();
+        global.fetch = jest.fn(() =>
+            Promise.resolve({ success: true, ok: true }),
+        );
+        await fetchAuthService(thoughtSpotHost, username, authToken);
+        expect(fetch).toBeCalledWith(
+            `${thoughtSpotHost}${EndPoints.TOKEN_LOGIN}?username=${username}&auth_token=${authToken}`,
+            {
+                credentials: 'include',
+                redirect: 'manual',
+            },
+        );
     });
 
-    test('fetchBasicAuthService', async () => {
-        global.fetch = jest.fn(() => Promise.resolve({ success: true }));
+    test('fetchBasicAuthService called with manual redirect', async () => {
+        global.fetch = jest.fn(() =>
+            Promise.resolve({ success: true, ok: true }),
+        );
         await fetchBasicAuthService(thoughtSpotHost, username, password);
         expect(fetch).toBeCalled();
     });
+
+    test('log error on API failures', async () => {
+        jest.spyOn(global.console, 'error').mockImplementation(() => undefined);
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                text: () => Promise.resolve('error'),
+                status: 500,
+                ok: false,
+            }),
+        );
+        await fetchSessionInfoService(authVerificationUrl);
+        expect(global.console.error).toHaveBeenCalledWith('Failure', 'error');
+    });
 });

package/src/utils/authService.ts

@@ -1,10 +1,22 @@
 // eslint-disable-next-line import/no-cycle
 import { EndPoints } from '../auth';
 
+function failureLoggedFetch(
+    url: string,
+    options: RequestInit = {},
+): Promise<Response> {
+    return fetch(url, options).then(async (r) => {
+        if (!r.ok && r.type !== 'opaqueredirect' && r.type !== 'opaque') {
+            console.error('Failure', await r.text?.());
+        }
+        return r;
+    });
+}
+
 export function fetchSessionInfoService(
     authVerificationUrl: string,
 ): Promise<any> {
-    return fetch(authVerificationUrl, {
+    return failureLoggedFetch(authVerificationUrl, {
         credentials: 'include',
     });
 }
@@ -20,10 +32,12 @@ export async function fetchAuthService(
     username: string,
     authToken: string,
 ): Promise<any> {
-    return fetch(
+    return failureLoggedFetch(
         `${thoughtSpotHost}${EndPoints.TOKEN_LOGIN}?username=${username}&auth_token=${authToken}`,
         {
             credentials: 'include',
+            // We do not want to follow the redirect, as it starts giving a CORS error
+            redirect: 'manual',
         },
     );
 }
@@ -33,7 +47,7 @@ export async function fetchBasicAuthService(
     username: string,
     password: string,
 ): Promise<any> {
-    return fetch(`${thoughtSpotHost}${EndPoints.BASIC_LOGIN}`, {
+    return failureLoggedFetch(`${thoughtSpotHost}${EndPoints.BASIC_LOGIN}`, {
         method: 'POST',
         headers: {
             'content-type': 'application/x-www-form-urlencoded',
@@ -45,3 +59,13 @@ export async function fetchBasicAuthService(
         credentials: 'include',
     });
 }
+
+export async function fetchLogoutService(
+    thoughtSpotHost: string,
+): Promise<any> {
+    return failureLoggedFetch(`${thoughtSpotHost}${EndPoints.LOGOUT}`, {
+        credentials: 'include',
+        mode: 'no-cors',
+        method: 'POST',
+    });
+}

package/src/utils/processData.spec.ts

@@ -1,9 +1,20 @@
 import * as processDataInstance from './processData';
 import * as answerServiceInstance from './answerService';
 import * as auth from '../auth';
-import { EmbedEvent, OperationType } from '../types';
+import * as base from '../embed/base';
+import { EmbedEvent, OperationType, AuthType } from '../types';
 
 describe('Unit test for process data', () => {
+    beforeAll(() => {
+        base.init({
+            thoughtSpotHost: '',
+            authType: AuthType.None,
+        });
+    });
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
     const thoughtSpotHost = 'http://localhost';
     test('processDataInstance, when operation is GetChartWithData', () => {
         const answerService = {};
@@ -34,10 +45,11 @@ describe('Unit test for process data', () => {
             'processCustomAction',
         ).mockImplementation(async () => ({}));
         expect(
-            processDataInstance.getProcessData(
+            processDataInstance.processEventData(
                 EmbedEvent.CustomAction,
                 processedData,
                 thoughtSpotHost,
+                null,
             ),
         ).toStrictEqual(processedData);
     });
@@ -52,10 +64,11 @@ describe('Unit test for process data', () => {
             answerServiceInstance,
             'getAnswerServiceInstance',
         ).mockImplementation(async () => ({}));
-        processDataInstance.getProcessData(
+        processDataInstance.processEventData(
             EmbedEvent.Data,
             processedData,
             thoughtSpotHost,
+            null,
         );
         expect(processDataInstance.processCustomAction).not.toBeCalled();
     });
@@ -68,12 +81,134 @@ describe('Unit test for process data', () => {
         };
         const e = { type: EmbedEvent.AuthInit, data: sessionInfo };
         jest.spyOn(auth, 'initSession').mockReturnValue(null);
-        expect(processDataInstance.getProcessData(e.type, e, '')).toEqual({
+        jest.spyOn(base, 'notifyAuthSuccess');
+        expect(
+            processDataInstance.processEventData(e.type, e, '', null),
+        ).toEqual({
             type: e.type,
             data: {
                 userGUID: sessionInfo.userGUID,
             },
         });
         expect(auth.initSession).toBeCalledWith(sessionInfo);
+        expect(base.notifyAuthSuccess).toBeCalled();
+    });
+
+    test('AuthExpire autoLogin false', () => {
+        const e = { type: EmbedEvent.AuthExpire };
+        jest.spyOn(base, 'notifyAuthFailure');
+        jest.spyOn(base, 'handleAuth');
+        jest.spyOn(base, 'getEmbedConfig').mockReturnValue({
+            autoLogin: false,
+        });
+        expect(
+            processDataInstance.processEventData(e.type, e, '', null),
+        ).toEqual({
+            type: e.type,
+        });
+        expect(base.notifyAuthFailure).toBeCalledWith(
+            auth.AuthFailureType.EXPIRY,
+        );
+        expect(base.handleAuth).not.toHaveBeenCalled();
+    });
+
+    test('AuthExpire autoLogin true', () => {
+        const e = { type: EmbedEvent.AuthExpire };
+        jest.spyOn(base, 'notifyAuthFailure');
+        jest.spyOn(base, 'handleAuth').mockResolvedValue(true);
+        jest.spyOn(base, 'getEmbedConfig').mockReturnValue({
+            autoLogin: true,
+        });
+        expect(
+            processDataInstance.processEventData(e.type, e, '', null),
+        ).toEqual({
+            type: e.type,
+        });
+        expect(base.notifyAuthFailure).toBeCalledWith(
+            auth.AuthFailureType.EXPIRY,
+        );
+        expect(base.handleAuth).toBeCalled();
+    });
+
+    test('NoCookieAccess no suppress alert', () => {
+        const e = { type: EmbedEvent.NoCookieAccess };
+        jest.spyOn(base, 'notifyAuthFailure');
+        jest.spyOn(base, 'getEmbedConfig').mockReturnValue({
+            loginFailedMessage: 'Hello',
+            suppressNoCookieAccessAlert: false,
+        });
+        jest.spyOn(window, 'alert').mockImplementation(() => undefined);
+        const el: any = {};
+        expect(processDataInstance.processEventData(e.type, e, '', el)).toEqual(
+            {
+                type: e.type,
+            },
+        );
+        expect(base.notifyAuthFailure).toBeCalledWith(
+            auth.AuthFailureType.NO_COOKIE_ACCESS,
+        );
+        expect(window.alert).toBeCalled();
+        expect(el.innerHTML).toBe('Hello');
+    });
+
+    test('NoCookieAccess suppressAlert=true', () => {
+        const e = { type: EmbedEvent.NoCookieAccess };
+        jest.spyOn(base, 'notifyAuthFailure');
+        jest.spyOn(base, 'getEmbedConfig').mockReturnValue({
+            loginFailedMessage: 'Hello',
+            suppressNoCookieAccessAlert: true,
+        });
+        jest.spyOn(window, 'alert').mockReset();
+        jest.spyOn(window, 'alert').mockImplementation(() => undefined);
+        const el: any = {};
+        expect(processDataInstance.processEventData(e.type, e, '', el)).toEqual(
+            {
+                type: e.type,
+            },
+        );
+        expect(base.notifyAuthFailure).toBeCalledWith(
+            auth.AuthFailureType.NO_COOKIE_ACCESS,
+        );
+        expect(window.alert).not.toBeCalled();
+        expect(el.innerHTML).toBe('Hello');
+    });
+
+    test('process authFailure', () => {
+        const e = { type: EmbedEvent.AuthFailure };
+        jest.spyOn(base, 'notifyAuthFailure');
+        jest.spyOn(base, 'getEmbedConfig').mockReturnValue({
+            loginFailedMessage: 'Hello',
+        });
+        const el: any = {};
+        expect(processDataInstance.processEventData(e.type, e, '', el)).toEqual(
+            {
+                type: e.type,
+            },
+        );
+        expect(base.notifyAuthFailure).toBeCalledWith(
+            auth.AuthFailureType.OTHER,
+        );
+        expect(el.innerHTML).toBe('Hello');
+    });
+
+    test('process authLogout', () => {
+        base.init({
+            loginFailedMessage: 'Hello',
+            autoLogin: true,
+            thoughtSpotHost: '',
+            authType: AuthType.None,
+        });
+        jest.spyOn(base, 'getEmbedConfig').mockRestore();
+        const e = { type: EmbedEvent.AuthLogout };
+        jest.spyOn(base, 'notifyLogout');
+        const el: any = {};
+        expect(processDataInstance.processEventData(e.type, e, '', el)).toEqual(
+            {
+                type: e.type,
+            },
+        );
+        expect(base.notifyLogout).toBeCalled();
+        expect(el.innerHTML).toBe('Hello');
+        expect(base.getEmbedConfig().autoLogin).toBe(false);
     });
 });

package/src/utils/processData.ts

@@ -1,5 +1,12 @@
-import { getEmbedConfig, handleAuth } from '../embed/base';
-import { initSession } from '../auth';
+import {
+    disableAutoLogin,
+    getEmbedConfig,
+    handleAuth,
+    notifyAuthFailure,
+    notifyAuthSuccess,
+    notifyLogout,
+} from '../embed/base';
+import { AuthFailureType, initSession } from '../auth';
 import { EmbedEvent, OperationType } from '../types';
 import { getAnswerServiceInstance } from './answerService';
 
@@ -28,6 +35,7 @@ export function processCustomAction(e: any, thoughtSpotHost: string) {
 function processAuthInit(e: any) {
     // Store user session details sent by app.
     initSession(e.data);
+    notifyAuthSuccess();
 
     // Expose only allowed details (eg: userGUID) back to SDK users.
     return {
@@ -43,14 +51,50 @@ function processAuthExpire(e: any) {
     if (autoLogin) {
         handleAuth();
     }
+    notifyAuthFailure(AuthFailureType.EXPIRY);
     return e;
 }
 
-export function getProcessData(
+function processNoCookieAccess(e: any, containerEl: Element) {
+    const {
+        loginFailedMessage,
+        suppressNoCookieAccessAlert,
+    } = getEmbedConfig();
+    if (!suppressNoCookieAccessAlert) {
+        // eslint-disable-next-line no-alert
+        alert(
+            'Third party cookie access is blocked on this browser, please allow third party cookies for this to work properly. \nYou can use `suppressNoCookieAccessAlert` to suppress this message.',
+        );
+    }
+    // eslint-disable-next-line no-param-reassign
+    containerEl.innerHTML = loginFailedMessage;
+    notifyAuthFailure(AuthFailureType.NO_COOKIE_ACCESS);
+    return e;
+}
+
+function processAuthFailure(e: any, containerEl: Element) {
+    const { loginFailedMessage } = getEmbedConfig();
+    // eslint-disable-next-line no-param-reassign
+    containerEl.innerHTML = loginFailedMessage;
+    notifyAuthFailure(AuthFailureType.OTHER);
+    return e;
+}
+
+function processAuthLogout(e: any, containerEl: Element) {
+    const { loginFailedMessage } = getEmbedConfig();
+    // eslint-disable-next-line no-param-reassign
+    containerEl.innerHTML = loginFailedMessage;
+    disableAutoLogin();
+    notifyLogout();
+    return e;
+}
+
+export function processEventData(
     type: EmbedEvent,
     e: any,
     thoughtSpotHost: string,
-) {
+    containerEl: Element,
+): any {
     switch (type) {
         case EmbedEvent.CustomAction:
             return processCustomAction(e, thoughtSpotHost);
@@ -58,6 +102,12 @@ export function getProcessData(
             return processAuthInit(e);
         case EmbedEvent.AuthExpire:
             return processAuthExpire(e);
+        case EmbedEvent.NoCookieAccess:
+            return processNoCookieAccess(e, containerEl);
+        case EmbedEvent.AuthFailure:
+            return processAuthFailure(e, containerEl);
+        case EmbedEvent.AuthLogout:
+            return processAuthLogout(e, containerEl);
         default:
     }
     return e;