@thoughtspot/visual-embed-sdk 1.9.0-alpha.0 → 1.9.2

package/lib/src/visual-embed-sdk.d.ts

@@ -134,7 +134,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/base' {
         */
     export const prefetch: (url?: string) => void;
     /**
-        * Initialize the ThoughtSpot embed settings globally and perform
+        * Initialize the ThoughtSpot embed SDK globally and perform
         * authentication if applicable.
         * @param embedConfig The configuration object containing ThoughtSpot host,
         * authentication mechanism and so on.
@@ -203,6 +203,13 @@ declare module '@thoughtspot/visual-embed-sdk/embed/liveboard' {
                 * Liveboard page will be read-only (no X buttons)
                 */
             preventLiveboardFilterRemoval?: boolean;
+            /**
+                * Array of viz ids which should be visible when the liveboard
+                * first renders. This can be changed by triggering the "SetVisibleVizs"
+                * event.
+                * @version 1.9.1 or later
+                */
+            visibleVizs?: string[];
             /**
                 * To support backward compatibilty
                 * @hidden
@@ -277,6 +284,10 @@ declare module '@thoughtspot/visual-embed-sdk/embed/search' {
                 * 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.
                 */
@@ -589,7 +600,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             /**
                 * One or more data columns have been selected.
                 * @return columnIds - the list of columns
-                * @version SDK: 1.9.0 | ThoughtSpot: 8.2.0.cl
+                * @version SDK: 1.10.0 | ThoughtSpot: 8.2.0.cl
                 */
             AddRemoveColumns = "addRemoveColumns",
             /**
@@ -661,7 +672,14 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Emitted when any modal is closed in the app
                 * @version 1.6.0 or later
                 */
-            DialogClose = "dialog-close"
+            DialogClose = "dialog-close",
+            /**
+                * Emitted when a liveboard has completed rendering,
+                * this event can be used as a hook to trigger events on the
+                * rendered liveboard
+                * @version 1.9.1 or later
+                */
+            LiveboardRendered = "PinboardRendered"
     }
     /**
         * Event types that can be triggered by the host application
@@ -707,7 +725,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 * Update the runtime filters. The runtime filters passed here are extended
                 * on to the existing runtime filters if they exist.
                 * @param - {@link RuntimeFilter}[] an array of {@link RuntimeFilter} Types.
-                * @version 1.8.0 or later
+                * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
                 */
             UpdateRuntimeFilters = "UpdateRuntimeFilters"
     }
@@ -736,6 +754,7 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
     export enum Param {
             DataSources = "dataSources",
             DataSourceMode = "dataSourceMode",
+            ExpandAllDataSource = "expandAllDataSource",
             DisableActions = "disableAction",
             DisableActionReason = "disableHint",
             ForceTable = "forceTable",
@@ -758,7 +777,8 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             ViewPortHeight = "viewPortHeight",
             ViewPortWidth = "viewPortWidth",
             VisibleActions = "visibleAction",
-            CustomCSSUrl = "customCssUrl"
+            CustomCSSUrl = "customCssUrl",
+            visibleVizs = "pinboardVisibleVizs"
     }
     /**
         * The list of actions that can be performed on visual ThoughtSpot
@@ -826,23 +846,23 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
             RequestAccess = "requestAccess",
             QueryDetailsButtons = "queryDetailsButtons",
             /**
-                * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+                * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
                 */
             Monitor = "createMonitor",
             /**
-                * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+                * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
                 */
             AnswerDelete = "onDeleteAnswer",
             /**
-                * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+                * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
                 */
             AnswerChartSwitcher = "answerChartSwitcher",
             /**
-                * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+                * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
                 */
             AddToFavorites = "addToFavorites",
             /**
-                * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+                * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
                 */
             EditDetails = "editDetails"
     }
@@ -937,7 +957,7 @@ declare module '@thoughtspot/visual-embed-sdk/embed/ts-embed' {
                 * This is an object (key/val) of override flags which will be applied
                 * to the internal embedded object. This can be used to add any
                 * URL flag.
-                * @version 1.8.0
+                * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
                 */
             additionalFlags?: {
                     [key: string]: string | number | boolean;

package/package.json

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

package/src/auth.spec.ts

@@ -119,11 +119,15 @@ describe('Unit test for auth', () => {
         jest.spyOn(
             authService,
             'fetchAuthTokenService',
-        ).mockImplementation(() => ({ text: () => true }));
+        ).mockImplementation(() => ({ text: () => Promise.resolve('abc') }));
         jest.spyOn(authService, 'fetchAuthService');
         await authInstance.doTokenAuth(embedConfig.doTokenAuthSuccess);
         expect(authService.fetchSessionInfoService).toBeCalled();
-        expect(authService.fetchAuthService).toBeCalled();
+        expect(authService.fetchAuthService).toBeCalledWith(
+            thoughtSpotHost,
+            username,
+            'authToken',
+        );
     });
 
     test('doTokenAuth: when user is not loggedIn & getAuthToken not present, isLoggedIn should called', async () => {
@@ -133,15 +137,21 @@ describe('Unit test for auth', () => {
         jest.spyOn(
             authService,
             'fetchAuthTokenService',
-        ).mockImplementation(() => ({ text: () => true }));
+        ).mockImplementation(() =>
+            Promise.resolve({ text: () => Promise.resolve('abc') }),
+        );
         jest.spyOn(authService, 'fetchAuthService');
         await authInstance.doTokenAuth(
             embedConfig.doTokenAuthFailureWithoutGetAuthToken,
         );
-        executeAfterWait(() => {
+        await executeAfterWait(() => {
             expect(authInstance.loggedInStatus).toBe(true);
             expect(authService.fetchSessionInfoService).toBeCalled();
-            expect(authService.fetchAuthService).toBeCalled();
+            expect(authService.fetchAuthService).toBeCalledWith(
+                thoughtSpotHost,
+                username,
+                'abc',
+            );
         });
     });
 

package/src/auth.ts

@@ -102,7 +102,7 @@ export const doTokenAuth = async (embedConfig: EmbedConfig): Promise<void> => {
             authToken = await getAuthToken();
         } else {
             const response = await fetchAuthTokenService(authEndpoint);
-            authToken = response.text();
+            authToken = await response.text();
         }
         await fetchAuthService(thoughtSpotHost, username, authToken);
         loggedInStatus = false;

package/src/embed/base.ts

@@ -52,7 +52,7 @@ export const prefetch = (url?: string): void => {
 };
 
 /**
- * Initialize the ThoughtSpot embed settings globally and perform
+ * Initialize the ThoughtSpot embed SDK globally and perform
  * authentication if applicable.
  * @param embedConfig The configuration object containing ThoughtSpot host,
  * authentication mechanism and so on.

package/src/embed/liveboard.spec.ts

@@ -196,4 +196,17 @@ describe('Liveboard/viz embed tests', () => {
             );
         });
     });
+    test('Should set the visible vizs', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardId,
+            visibleVizs: ['abcd', 'pqrs'],
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expect(getIFrameSrc()).toBe(
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&pinboardVisibleVizs=[%22abcd%22,%22pqrs%22]${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
 });

package/src/embed/liveboard.ts

@@ -62,6 +62,13 @@ export interface LiveboardViewConfig extends ViewConfig {
      * Liveboard page will be read-only (no X buttons)
      */
     preventLiveboardFilterRemoval?: boolean;
+    /**
+     * Array of viz ids which should be visible when the liveboard
+     * first renders. This can be changed by triggering the "SetVisibleVizs"
+     * event.
+     * @version 1.9.1 or later
+     */
+    visibleVizs?: string[];
     /**
      * To support backward compatibilty
      * @hidden
@@ -93,6 +100,7 @@ export class LiveboardEmbed extends V1Embed {
             enableVizTransformations,
             fullHeight,
             defaultHeight,
+            visibleVizs,
         } = this.viewConfig;
 
         const preventLiveboardFilterRemoval =
@@ -113,6 +121,9 @@ export class LiveboardEmbed extends V1Embed {
         if (preventLiveboardFilterRemoval) {
             params[Param.preventLiveboardFilterRemoval] = true;
         }
+        if (visibleVizs) {
+            params[Param.visibleVizs] = visibleVizs;
+        }
         params[Param.livedBoardEmbed] = true;
         const queryParams = getQueryParamString(params, true);
 

package/src/embed/search.ts

@@ -49,6 +49,10 @@ export interface SearchViewConfig extends ViewConfig {
      * 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.
      */
@@ -126,6 +130,7 @@ export class SearchEmbed extends TsEmbed {
     private getIFrameSrc(answerId: string, dataSources?: string[]) {
         const {
             hideResults,
+            expandAllDataSource,
             enableSearchAssist,
             forceTable,
             searchOptions,

package/src/embed/ts-embed.ts

@@ -114,7 +114,7 @@ export interface ViewConfig {
      * This is an object (key/val) of override flags which will be applied
      * to the internal embedded object. This can be used to add any
      * URL flag.
-     * @version 1.8.0
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     additionalFlags?: { [key: string]: string | number | boolean };
 }

package/src/react/index.spec.tsx

@@ -3,13 +3,14 @@ import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import {
+    executeAfterWait,
     getIFrameEl,
     getIFrameSrc,
     postMessageToParent,
 } from '../test/test-utils';
-import { SearchEmbed, AppEmbed, PinboardEmbed } from './index';
+import { SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef } from './index';
 import { AuthType, init } from '../index';
-import { EmbedEvent } from '../types';
+import { EmbedEvent, HostEvent } from '../types';
 import { version } from '../../package.json';
 
 const thoughtSpotHost = 'localhost';
@@ -35,7 +36,7 @@ describe('React Components', () => {
             );
         });
 
-        it('Should attach event listeners', async () => {
+        it('Should attach event listeners', async (done) => {
             const userGUID = 'absfdfgd';
             const { container } = render(
                 <SearchEmbed
@@ -44,6 +45,7 @@ describe('React Components', () => {
                     }}
                     onAuthInit={(e) => {
                         expect(e.data.userGUID).toEqual(userGUID);
+                        done();
                     }}
                 />,
             );
@@ -63,7 +65,47 @@ describe('React Components', () => {
         //
     });
 
-    describe('PinboardEmbed', () => {
+    describe('LiveboardEmbed', () => {
         //
+        it('Should be able to trigger events on the embed using refs', async () => {
+            const TestComponent = () => {
+                const embedRef = useEmbedRef();
+                const onLiveboardRendered = () => {
+                    embedRef.current.trigger(HostEvent.SetVisibleVizs, [
+                        'viz1',
+                        'viz2',
+                    ]);
+                };
+
+                return (
+                    <LiveboardEmbed
+                        ref={embedRef}
+                        liveboardId="abcd"
+                        onLiveboardRendered={onLiveboardRendered}
+                    />
+                );
+            };
+
+            const { container } = render(<TestComponent />);
+
+            await waitFor(() => getIFrameEl(container));
+            const iframe = getIFrameEl(container);
+            jest.spyOn(iframe.contentWindow, 'postMessage');
+            postMessageToParent(iframe.contentWindow, {
+                type: EmbedEvent.LiveboardRendered,
+                data: {
+                    userGUID: 'abcd',
+                },
+            });
+            await executeAfterWait(() => {
+                expect(iframe.contentWindow.postMessage).toHaveBeenCalledWith(
+                    {
+                        type: HostEvent.SetVisibleVizs,
+                        data: ['viz1', 'viz2'],
+                    },
+                    `http://${thoughtSpotHost}`,
+                );
+            });
+        });
     });
 });

package/src/react/index.tsx

@@ -7,7 +7,7 @@ import {
 } from '../embed/liveboard';
 import { TsEmbed, ViewConfig } from '../embed/ts-embed';
 
-import { EmbedEvent, MessageCallback } from '../types';
+import { EmbedEvent } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 
 const componentFactory = <
@@ -16,28 +16,35 @@ const componentFactory = <
     V extends ViewConfig
 >(
     EmbedConstructor: T,
-) => (props: U) => {
-    const ref = React.useRef<HTMLDivElement>(null);
-    const { className, ...embedProps } = props;
-    const { viewConfig, listeners } = getViewPropsAndListeners<
-        Omit<U, 'className'>,
-        V
-    >(embedProps);
-    React.useEffect(() => {
-        const tsEmbed = new EmbedConstructor(ref!.current, {
-            ...viewConfig,
-        });
-        Object.keys(listeners).forEach((eventName) => {
-            tsEmbed.on(
-                eventName as EmbedEvent,
-                listeners[eventName as EmbedEvent],
-            );
-        });
-        tsEmbed.render();
-    }, [embedProps]);
+) =>
+    React.forwardRef<TsEmbed, U>(
+        (props: U, forwardedRef: React.MutableRefObject<TsEmbed>) => {
+            const ref = React.useRef<HTMLDivElement>(null);
+            const { className, ...embedProps } = props;
+            const { viewConfig, listeners } = getViewPropsAndListeners<
+                Omit<U, 'className'>,
+                V
+            >(embedProps);
+            React.useEffect(() => {
+                const tsEmbed = new EmbedConstructor(ref!.current, {
+                    ...viewConfig,
+                });
+                Object.keys(listeners).forEach((eventName) => {
+                    tsEmbed.on(
+                        eventName as EmbedEvent,
+                        listeners[eventName as EmbedEvent],
+                    );
+                });
+                tsEmbed.render();
+                if (forwardedRef) {
+                    // eslint-disable-next-line no-param-reassign
+                    forwardedRef.current = tsEmbed;
+                }
+            }, [embedProps]);
 
-    return <div data-testid="tsEmbed" className={className} ref={ref}></div>;
-};
+            return <div data-testid="tsEmbed" ref={ref}></div>;
+        },
+    );
 
 interface SearchProps extends EmbedProps, SearchViewConfig {}
 
@@ -68,3 +75,7 @@ export const PinboardEmbed = componentFactory<
     LiveboardProps,
     LiveboardViewConfig
 >(_LiveboardEmbed);
+
+export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => {
+    return React.useRef<TsEmbed>(null);
+};

package/src/react/util.ts

@@ -2,7 +2,8 @@ import { EmbedEvent, MessageCallback } from '../types';
 import { ViewConfig } from '../embed/ts-embed';
 
 // eslint-disable-next-line prettier/prettier
-export type EmbedEventHandlers = { [key in EmbedEvent as `on${Capitalize<key>}`]?: MessageCallback };
+export type EmbedEventHandlers = { [key in keyof typeof EmbedEvent as `on${Capitalize<key>}`]?: MessageCallback };
+
 
 export interface EmbedProps extends ViewConfig, EmbedEventHandlers {
     className?: string;

package/src/types.ts

@@ -291,7 +291,7 @@ export enum EmbedEvent {
     /**
      * One or more data columns have been selected.
      * @return columnIds - the list of columns
-     * @version SDK: 1.9.0 | ThoughtSpot: 8.2.0.cl
+     * @version SDK: 1.10.0 | ThoughtSpot: 8.2.0.cl
      */
     AddRemoveColumns = 'addRemoveColumns',
     /**
@@ -364,6 +364,13 @@ export enum EmbedEvent {
      * @version 1.6.0 or later
      */
     DialogClose = 'dialog-close',
+    /**
+     * Emitted when a liveboard has completed rendering,
+     * this event can be used as a hook to trigger events on the
+     * rendered liveboard
+     * @version 1.9.1 or later
+     */
+    LiveboardRendered = 'PinboardRendered',
 }
 
 /**
@@ -411,7 +418,7 @@ export enum HostEvent {
      * Update the runtime filters. The runtime filters passed here are extended
      * on to the existing runtime filters if they exist.
      * @param - {@link RuntimeFilter}[] an array of {@link RuntimeFilter} Types.
-     * @version 1.8.0 or later
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     UpdateRuntimeFilters = 'UpdateRuntimeFilters',
 }
@@ -444,6 +451,7 @@ export enum DataSourceVisualMode {
 export enum Param {
     DataSources = 'dataSources',
     DataSourceMode = 'dataSourceMode',
+    ExpandAllDataSource = 'expandAllDataSource',
     DisableActions = 'disableAction',
     DisableActionReason = 'disableHint',
     ForceTable = 'forceTable',
@@ -467,6 +475,7 @@ export enum Param {
     ViewPortWidth = 'viewPortWidth',
     VisibleActions = 'visibleAction',
     CustomCSSUrl = 'customCssUrl',
+    visibleVizs = 'pinboardVisibleVizs',
 }
 
 /**
@@ -536,23 +545,23 @@ export enum Action {
     RequestAccess = 'requestAccess',
     QueryDetailsButtons = 'queryDetailsButtons',
     /**
-     * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     Monitor = 'createMonitor',
     /**
-     * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     AnswerDelete = 'onDeleteAnswer',
     /**
-     * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     AnswerChartSwitcher = 'answerChartSwitcher',
     /**
-     * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     AddToFavorites = 'addToFavorites',
     /**
-     * @version SDK: 1.8.0 | ThoughtSpot: 8.1.0.cl
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     EditDetails = 'editDetails',
 }