@thoughtspot/visual-embed-sdk 1.47.3 → 1.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.47.3",
+    "version": "1.49.0",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",

package/src/auth.spec.ts

@@ -450,7 +450,7 @@ describe('Unit test for auth', () => {
 
         it('should support emitting SAML_POPUP_CLOSED_NO_AUTH event', () => {
             const emitSpy = jest.fn();
-            const mockEventEmitter = { 
+            const mockEventEmitter = {
                 emit: emitSpy,
                 once: jest.fn()
             };
@@ -460,6 +460,60 @@ describe('Unit test for auth', () => {
             authInstance.setAuthEE(null);
         });
 
+        it('should set loggedInStatus from cachedAuthToken without calling isLoggedIn again after popup flow', async () => {
+            Object.defineProperty(window, 'location', { value: { href: '', hash: '' } });
+            checkReleaseVersionInBetaInstance.storeValueInWindow('cachedAuthToken', 'test-cached-token');
+            (authInstance as any).samlCompletionPromise = Promise.resolve();
+            global.window.open = jest.fn();
+
+            jest.spyOn(tokenAuthService, 'isActiveService')
+                .mockReturnValueOnce(Promise.resolve(false));
+
+            await authInstance.doSamlAuth({ ...embedConfig.doSamlAuthNoRedirect });
+
+            expect(authInstance.loggedInStatus).toBe(true);
+            expect(tokenAuthService.isActiveService).toHaveBeenCalledTimes(1);
+        });
+
+        it('should store decoded accessToken in window when SAMLComplete event includes accessToken', async () => {
+            Object.defineProperty(window, 'location', { value: { href: '', hash: '' } });
+            global.window.open = jest.fn().mockReturnValue({ closed: false, focus: jest.fn(), close: jest.fn() });
+
+            (authInstance as any).samlCompletionPromise = null;
+
+            let capturedMessageHandler: ((e: any) => void) | null = null;
+            jest.spyOn(window, 'addEventListener').mockImplementation((type: any, handler: any) => {
+                if (type === 'message') {
+                    capturedMessageHandler = handler;
+                }
+            });
+
+            jest.spyOn(tokenAuthService, 'isActiveService')
+                .mockReturnValueOnce(Promise.resolve(false));
+
+            const authPromise = authInstance.doSamlAuth({ ...embedConfig.doSamlAuthNoRedirect });
+
+            await new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+            expect(capturedMessageHandler).not.toBeNull();
+
+            const accessToken = 'my-access-token';
+            capturedMessageHandler!({
+                data: {
+                    type: EmbedEvent.SAMLComplete,
+                    accessToken: encodeURIComponent(accessToken),
+                },
+                source: { close: jest.fn() },
+            });
+
+            await authPromise;
+
+            expect(
+                checkReleaseVersionInBetaInstance.getValueFromWindow('cachedAuthToken'),
+            ).toBe(accessToken);
+            expect(authInstance.loggedInStatus).toBe(true);
+        });
+
     });
 
     describe('doOIDCAuth', () => {

package/src/auth.ts

@@ -1,5 +1,5 @@
 import EventEmitter from 'eventemitter3';
-import { getAuthenticationToken } from './authToken';
+import { getAuthenticationToken, storeAuthTokenInCache, getCacheAuthToken } from './authToken';
 import { getEmbedConfig } from './embed/embedConfig';
 import { initMixpanel } from './mixpanel-service';
 import {
@@ -462,6 +462,10 @@ async function samlPopupFlow(ssoURL: string, triggerContainer: DOMSelector, trig
     samlCompletionPromise = samlCompletionPromise || new Promise<void>((resolve, reject) => {
         window.addEventListener('message', (e) => {
             if (e.data.type === EmbedEvent.SAMLComplete) {
+                if (e.data.accessToken) {
+                    const decodedToken = decodeURIComponent(e.data.accessToken);
+                    storeAuthTokenInCache(decodedToken);
+                }
                 samlCompletionResolved = true;
                 if (popupClosedCheck) {
                     clearInterval(popupClosedCheck);
@@ -503,7 +507,12 @@ const doSSOAuth = async (embedConfig: EmbedConfig, ssoEndPoint: string): Promise
     const ssoURL = `${thoughtSpotHost}${ssoEndPoint}`;
     if (embedConfig.inPopup) {
         await samlPopupFlow(ssoURL, embedConfig.authTriggerContainer, embedConfig.authTriggerText);
-        loggedInStatus = await isLoggedIn(thoughtSpotHost);
+        const cachedToken = getCacheAuthToken();
+        if (cachedToken) {
+            loggedInStatus = true;
+        } else {
+            loggedInStatus = await isLoggedIn(thoughtSpotHost);
+        }
         return;
     }
 

package/src/authToken.ts

@@ -6,8 +6,8 @@ import { logger } from './utils/logger';
 
 const cacheAuthTokenKey = 'cachedAuthToken';
 
-const getCacheAuthToken = (): string | null => getValueFromWindow(cacheAuthTokenKey);
-const storeAuthTokenInCache = (token: string): void => {
+export const getCacheAuthToken = (): string | null => getValueFromWindow(cacheAuthTokenKey);
+export const storeAuthTokenInCache = (token: string): void => {
     storeValueInWindow(cacheAuthTokenKey, token);
 };
 

package/src/css-variables.ts

@@ -991,4 +991,178 @@ export interface CustomCssVariables {
      * Background color of the color palette in the Liveboard styling panel.
      */
     '--ts-var-liveboard-styling-color-palette-background'?: string;
-  }
+
+    /**
+     * Main panel background of the SpotterViz.
+     */
+    '--ts-var-spotterviz-panel-background'?: string;
+
+    /**
+     * Background color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-background'?: string;
+
+    /**
+     * Placeholder text color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-placeholder-color'?: string;
+
+    /**
+     * CTA color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-cta-color'?: string;
+
+    /**
+     * CTA hover color of the chat input field in SpotterViz.
+     */
+    '--ts-var-spotterviz-input-cta-hover-color'?: string;
+
+    /**
+     * Text color for the SpotterViz label in the empty state, displayed below
+     * the SpotterViz icon.
+     */
+    '--ts-var-spotterviz-emptystate-spotterviz-color'?: string;
+
+    /**
+     * Background color of the starter prompt cards in SpotterViz.
+     */
+    '--ts-var-spotterviz-prompt-card-background'?: string;
+
+    /**
+     * Background hover color of the starter prompt cards in SpotterViz.
+     */
+    '--ts-var-spotterviz-prompt-card-hover-background'?: string;
+
+    /**
+     * Primary text color in SpotterViz, also used for tool response text,
+     * upvote/downvote buttons, and other primary content.
+     */
+    '--ts-var-spotterviz-text-primary'?: string;
+
+    /**
+     * Secondary text color in SpotterViz.
+     */
+    '--ts-var-spotterviz-text-secondary'?: string;
+
+    /**
+     * Background color of the user chat message bubble in SpotterViz.
+     */
+    '--ts-var-spotterviz-message-background'?: string;
+
+    /**
+     * Hover color for the user chat message expand button in SpotterViz.
+     */
+    '--ts-var-spotterviz-usermessage-icon-hover'?: string;
+
+    /**
+     * Background color of the user chat message expand button in SpotterViz.
+     */
+    '--ts-var-spotterviz-usermessage-icon-background'?: string;
+
+    /**
+     * Color of the thinking step header when in progress in SpotterViz.
+     */
+    '--ts-var-spotterviz-thinking-inprogress-header-color'?: string;
+
+    /**
+     * Color of the thinking step header when completed in SpotterViz.
+     */
+    '--ts-var-spotterviz-thinking-completed-header-color'?: string;
+
+    /**
+     * Color of the final completion indicator icon shown when all work is done.
+     * The last green dot which is shown when work is done.
+     */
+    '--ts-var-spotterviz-thinking-work-done-icon-color'?: string;
+
+    /**
+     * Hover background color for the working/work done CTA in SpotterViz.
+     */
+    '--ts-var-spotterviz-thinking-cta-hover-background'?: string;
+
+    /**
+     * Background color of tool call panels in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-call-background'?: string;
+
+    /**
+     * Color of tool titles and icons in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-title-color'?: string;
+
+    /**
+     * Border color of tool call panels in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-border-color'?: string;
+
+    /**
+     * Background color of the JSON input panel inside a tool call in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-json-input-background'?: string;
+
+    /**
+     * Background color of the upvote/downvote feedback buttons in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-feedback-button-background'?: string;
+
+    /**
+     * Hover background color of the upvote/downvote feedback buttons in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-feedback-button-hover'?: string;
+
+    /**
+     * Text color of the JSON input panel inside a tool call in SpotterViz.
+     */
+    '--ts-var-spotterviz-tool-json-input-color'?: string;
+
+    /**
+     * Background color of the last checkpoint section in SpotterViz.
+     */
+    '--ts-var-spotterviz-last-checkpoint-background'?: string;
+
+    /**
+     * Border color of the last checkpoint section in SpotterViz.
+     */
+    '--ts-var-spotterviz-last-checkpoint-border'?: string;
+
+    /**
+     * Border color of the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-border'?: string;
+
+    /**
+     * Background color of the selected section in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-selected-background'?: string;
+
+    /**
+     * Text color of the selected section in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-selected-text-color'?: string;
+
+    /**
+     * Text color of unselected items in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-text'?: string;
+
+    /**
+     * Hover background color of unselected items in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-hover-background'?: string;
+
+    /**
+     * Hover text color of unselected items in the Liveboard edit header toolbar.
+     */
+    '--ts-var-liveboard-edit-toolbar-hover-text-color'?: string;
+
+    /**
+     * Text color of the SpotterViz footer.
+     */
+    '--ts-var-spotterviz-footer-text-color'?: string;
+
+    /**
+     * Shared border color used throughout SpotterViz: input box, user message,
+     * header underline, left panel border, thinking step connector and dots.
+     */
+    '--ts-var-spotterviz-border-color'?: string;
+}

package/src/embed/app.spec.ts

@@ -23,6 +23,7 @@ import {
     expectUrlMatchesWithParams,
     postMessageToParent,
     testVisualOverridesInEmbed,
+    expectUrlToHaveParamsWithValues,
 } from '../test/test-utils';
 import { version } from '../../package.json';
 import * as config from '../config';
@@ -480,6 +481,19 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should disable isWYSIWYGLiveboardPDFEnabled by default in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&profileAndHelpInNavBarHidden=false&isWYSIWYGLiveboardPDFEnabled=false${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('should set isLinkParametersEnabled to true in url', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -508,6 +522,18 @@ describe('App embed tests', () => {
         });
     });
 
+    test('Should add homepageVersion=v4 when homePage is Focused to the iframe src', async () => {
+        await testUrlParams(
+            {
+                ...defaultViewConfig,
+                discoveryExperience: {
+                    homePage: HomePage.Focused,
+                },
+            } as AppViewConfig,
+            `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2&homepageVersion=v4${defaultParams}${defaultParamsPost}#/home`,
+        );
+    });
+
     test('should set isLiveboardXLSXCSVDownloadEnabled to true in url', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -566,6 +592,141 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should include spotterVizConfig in APP_INIT embedParams when spotterViz is provided', async () => {
+        const spotterViz = {
+            brandName: 'MyBrand',
+            brandHeadline: "Hi, there! I'm",
+            description: 'Ask questions about your data',
+            inputChatPlaceholder: 'Ask a question...',
+            hideStarterPrompts: false,
+            customStarterPrompts: [
+                {
+                    id: '001',
+                    displayText: 'Show revenue by region',
+                    fullPrompt: 'Show revenue by region',
+                },
+                { id: '002', displayText: 'Top customers', fullPrompt: 'Top customers by sales' },
+            ],
+        };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterViz,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: expect.objectContaining({
+                    embedParams: expect.objectContaining({
+                        spotterVizConfig: spotterViz,
+                    }),
+                }),
+            });
+        });
+    });
+
+    test('should pass brandHeadline through spotterVizConfig in APP_INIT', async () => {
+        const spotterViz = { brandName: 'MyBrand', brandHeadline: "Hi, there! I'm" };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterViz,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: expect.objectContaining({
+                    embedParams: expect.objectContaining({
+                        spotterVizConfig: expect.objectContaining({
+                            brandHeadline: "Hi, there! I'm",
+                        }),
+                    }),
+                }),
+            });
+        });
+    });
+
+    test('should not include spotterVizConfig in APP_INIT when spotterViz is not provided', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            const callArgs = mockPort.postMessage.mock.calls[0][0];
+            expect(callArgs.type).toBe(EmbedEvent.APP_INIT);
+            if (callArgs.data.embedParams) {
+                expect(callArgs.data.embedParams.spotterVizConfig).toBeUndefined();
+            }
+        });
+    });
+
+    test('should include spotterVizConfig alongside spotterSidebarConfig in APP_INIT', async () => {
+        const spotterViz = { brandName: 'MyBrand' };
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterViz,
+            spotterSidebarConfig: { enablePastConversationsSidebar: true },
+        } as AppViewConfig);
+
+        mockMessageChannel();
+        appEmbed.render();
+
+        const mockPort: any = { postMessage: jest.fn() };
+        await executeAfterWait(() => {
+            postMessageToParent(
+                getIFrameEl().contentWindow,
+                { type: EmbedEvent.APP_INIT, data: {} },
+                mockPort,
+            );
+        });
+        await executeAfterWait(() => {
+            expect(mockPort.postMessage).toHaveBeenCalledWith({
+                type: EmbedEvent.APP_INIT,
+                data: expect.objectContaining({
+                    embedParams: expect.objectContaining({
+                        spotterVizConfig: spotterViz,
+                        spotterSidebarConfig: expect.objectContaining({
+                            enablePastConversationsSidebar: true,
+                        }),
+                    }),
+                }),
+            });
+        });
+    });
+
     test('should set toolResponseCardBrandingLabel in url via spotterChatConfig', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -582,6 +743,33 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should set spotterFileUploadEnabled to true in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterChatConfig: { spotterFileUploadEnabled: true },
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&profileAndHelpInNavBarHidden=false&spotterFileUploadEnabled=true${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should set spotterFileUploadFileTypes in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            spotterChatConfig: { spotterFileUploadFileTypes: { types: ['image/png', 'application/pdf'] } },
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlToHaveParamsWithValues(getIFrameSrc(), {
+                spotterFileUploadFileTypes: JSON.stringify({ types: ['image/png', 'application/pdf'] }),
+            });
+        });
+    });
+
     test('should set isLiveboardXLSXCSVDownloadEnabled to false in url', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -974,6 +1162,47 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should set newConnectionsExperience to true in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            newConnectionsExperience: true,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&newConnectionsExperience=true${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should set newConnectionsExperience to false in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            newConnectionsExperience: false,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&newConnectionsExperience=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should disable connection new experience by default in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('Should add hideIrrelevantFiltersAtTabLevel flag to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -1707,6 +1936,36 @@ describe('App embed tests', () => {
             addEventListenerSpy.mockRestore();
         });
 
+        test('should listen to scroll and resize changes from scrollable iframe ancestors', async () => {
+            const scrollContainer = getRootEl();
+            scrollContainer.style.overflow = 'auto';
+
+            const scrollContainerAddEventListenerSpy = jest.spyOn(scrollContainer, 'addEventListener');
+            const resizeObserveSpy = jest.fn();
+            const resizeDisconnectSpy = jest.fn();
+            (window as any).ResizeObserver = jest.fn().mockImplementation(() => ({
+                observe: resizeObserveSpy,
+                disconnect: resizeDisconnectSpy,
+            }));
+
+            const appEmbed = new AppEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                fullHeight: true,
+                lazyLoadingForFullHeight: true,
+                enableScrollableContainerLazyLoading: true,
+            } as AppViewConfig);
+
+            await appEmbed.render();
+
+            await executeAfterWait(() => {
+                expect(scrollContainerAddEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+                expect(resizeObserveSpy).toHaveBeenCalledWith(scrollContainer);
+            }, 100);
+
+            appEmbed.destroy();
+            expect(resizeDisconnectSpy).toHaveBeenCalled();
+        });
+
         test('should remove window event listeners on destroy when fullHeight and lazyLoadingForFullHeight are enabled', async () => {
             const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
 
@@ -1721,7 +1980,7 @@ describe('App embed tests', () => {
             appEmbed.destroy();
 
             expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
-            expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
+            expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function), true);
 
             removeEventListenerSpy.mockRestore();
         });
@@ -1952,5 +2211,3 @@ describe('AppEmbed visualOverrides tests', () => {
         await testVisualOverridesInEmbed(appEmbed, visualOverrides);
     });
 });
-
-