@thoughtspot/visual-embed-sdk 1.10.0-alpha.0 → 1.10.0-alpha.3

package/src/embed/ts-embed.ts

@@ -11,6 +11,8 @@ import {
     getEncodedQueryParamsString,
     getCssDimension,
     getOffsetTop,
+    embedEventStatus,
+    setAttributes,
 } from '../utils';
 import {
     getThoughtSpotHost,
@@ -28,6 +30,8 @@ import {
     RuntimeFilter,
     Param,
     EmbedConfig,
+    MessageOptions,
+    MessageCallbackObj,
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { getProcessData } from '../utils/processData';
@@ -37,6 +41,11 @@ import { getAuthPromise, getEmbedConfig, renderInQueue } from './base';
 
 const { version } = pkgInfo;
 
+/**
+ * Global prefix for all Thoughtspot postHash Params.
+ */
+export const THOUGHTSPOT_PARAM_PREFIX = 'ts-';
+
 /**
  * The event id map from v2 event names to v1 event id
  * v1 events are the classic embed events implemented in Blink v1
@@ -62,6 +71,11 @@ export interface FrameParams {
      * The height of the iFrame (unit is pixels if numeric).
      */
     height?: number | string;
+    /**
+     * This parameters will be passed on the iframe
+     * as is.
+     */
+    [key: string]: string | number | boolean;
 }
 
 /**
@@ -105,15 +119,28 @@ export interface ViewConfig {
      * @version 1.6.0 or later
      */
     visibleActions?: Action[];
+    /**
+     * Show alert messages and toast messages in the embedded view.
+     * @version 1.11.0 | ThoughtSpot: 8.3.0.cl
+     */
+    showAlerts?: boolean;
     /**
      * The list of runtime filters to apply to a search answer,
      * visualization, or Liveboard.
      */
     runtimeFilters?: RuntimeFilter[];
+    /**
+     * The locale/language to use for the embedded view.
+     * @version 1.9.4 or later
+     */
+    locale?: string;
     /**
      * 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.
+     * Warning: This option is for advanced use only and is used internally
+     * to control embed behavior in non-regular ways. We do not publish the
+     * list of supported keys and values associated with each.
      * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl
      */
     additionalFlags?: { [key: string]: string | number | boolean };
@@ -155,7 +182,7 @@ export class TsEmbed {
      * by the embedded app; multiple event handlers can be registered
      * against a particular message type.
      */
-    private eventHandlerMap: Map<string, MessageCallback[]>;
+    private eventHandlerMap: Map<string, MessageCallbackObj[]>;
 
     /**
      * A flag that is set to true post render.
@@ -324,7 +351,12 @@ export class TsEmbed {
         queryParams[Param.ViewPortHeight] = window.innerHeight;
         queryParams[Param.ViewPortWidth] = window.innerWidth;
         queryParams[Param.Version] = version;
-
+        if (
+            this.embedConfig.disableLoginRedirect === true ||
+            this.embedConfig.autoLogin === true
+        ) {
+            queryParams[Param.DisableLoginRedirect] = true;
+        }
         if (this.embedConfig.customCssUrl) {
             queryParams[Param.CustomCSSUrl] = this.embedConfig.customCssUrl;
         }
@@ -334,7 +366,9 @@ export class TsEmbed {
             disabledActionReason,
             hiddenActions,
             visibleActions,
+            showAlerts,
             additionalFlags,
+            locale,
         } = this.viewConfig;
 
         if (Array.isArray(visibleActions) && Array.isArray(hiddenActions)) {
@@ -356,6 +390,12 @@ export class TsEmbed {
         if (Array.isArray(visibleActions)) {
             queryParams[Param.VisibleActions] = visibleActions;
         }
+        if (showAlerts !== undefined) {
+            queryParams[Param.ShowAlerts] = showAlerts;
+        }
+        if (locale !== undefined) {
+            queryParams[Param.Locale] = locale;
+        }
         if (additionalFlags && additionalFlags.constructor.name === 'Object') {
             Object.assign(queryParams, additionalFlags);
         }
@@ -399,7 +439,7 @@ export class TsEmbed {
      * @param url
      * @param frameOptions
      */
-    protected renderIFrame(url: string, frameOptions: FrameParams): void {
+    protected renderIFrame(url: string, frameOptions: FrameParams = {}): void {
         if (this.isError) {
             return;
         }
@@ -441,12 +481,19 @@ export class TsEmbed {
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
                     this.iFrame.mozallowfullscreen = true;
+                    const {
+                        height: frameHeight,
+                        width: frameWidth,
+                        ...restParams
+                    } = frameOptions;
                     const width = getCssDimension(
-                        frameOptions?.width || DEFAULT_EMBED_WIDTH,
+                        frameWidth || DEFAULT_EMBED_WIDTH,
                     );
                     const height = getCssDimension(
-                        frameOptions?.height || DEFAULT_EMBED_HEIGHT,
+                        frameWidth || DEFAULT_EMBED_HEIGHT,
                     );
+                    setAttributes(this.iFrame, restParams);
+
                     this.iFrame.style.width = `${width}`;
                     this.iFrame.style.height = `${height}`;
                     this.iFrame.style.border = '0';
@@ -511,11 +558,19 @@ export class TsEmbed {
         eventPort?: MessagePort | void,
     ): void {
         const callbacks = this.eventHandlerMap.get(eventType) || [];
-        callbacks.forEach((callback) =>
-            callback(data, (payload) => {
-                this.triggerEventOnPort(eventPort, payload);
-            }),
-        );
+        const dataStatus = data?.status || embedEventStatus.END;
+        callbacks.forEach((callbackObj) => {
+            if (
+                (callbackObj.options.start &&
+                    dataStatus === embedEventStatus.START) || // When start status is true it trigger only start releated payload
+                (!callbackObj.options.start &&
+                    dataStatus === embedEventStatus.END) // When start status is false it trigger only end releated payload
+            ) {
+                callbackObj.callback(data, (payload) => {
+                    this.triggerEventOnPort(eventPort, payload);
+                });
+            }
+        });
     }
 
     /**
@@ -582,20 +637,21 @@ export class TsEmbed {
      * sends an event of a particular message type to the host application.
      *
      * @param messageType The message type
-     * @param callback A callback function
+     * @param callback A callback as a function
+     * @param options The message options
      */
     public on(
         messageType: EmbedEvent,
         callback: MessageCallback,
+        options: MessageOptions = { start: false },
     ): typeof TsEmbed.prototype {
         if (this.isRendered) {
             this.handleError(
                 'Please register event handlers before calling render',
             );
         }
-
         const callbacks = this.eventHandlerMap.get(messageType) || [];
-        callbacks.push(callback);
+        callbacks.push({ options, callback });
         this.eventHandlerMap.set(messageType, callbacks);
         return this;
     }
@@ -649,6 +705,34 @@ export class TsEmbed {
 
         return this;
     }
+
+    /**
+     * Get the Post Url Params for THOUGHTSPOT from the current
+     * host app URL.
+     * THOUGHTSPOT URL params starts with a prefix "ts-"
+     */
+    public getThoughtSpotPostUrlParams(): string {
+        const urlHash = window.location.hash;
+        const queryParams = window.location.search;
+        const postHashParams = urlHash.split('?');
+        const postURLParams = postHashParams[postHashParams.length - 1];
+        const queryParamsObj = new URLSearchParams(queryParams);
+        const postURLParamsObj = new URLSearchParams(postURLParams);
+        const params = new URLSearchParams();
+
+        const addKeyValuePairCb = (value: string, key: string): void => {
+            if (key.startsWith(THOUGHTSPOT_PARAM_PREFIX)) {
+                params.append(key, value);
+            }
+        };
+        queryParamsObj.forEach(addKeyValuePairCb);
+        postURLParamsObj.forEach(addKeyValuePairCb);
+
+        let tsParams = params.toString();
+        tsParams = tsParams ? `?${tsParams}` : '';
+
+        return tsParams;
+    }
 }
 
 /**

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';
@@ -25,17 +26,22 @@ describe('React Components', () => {
     describe('SearchEmbed', () => {
         it('Should Render the Iframe with props', async () => {
             const { container } = render(
-                <SearchEmbed hideDataSources={true} />,
+                <SearchEmbed hideDataSources={true} className="embedClass" />,
             );
 
             await waitFor(() => getIFrameEl(container));
 
+            expect(
+                getIFrameEl(container).parentElement.classList.contains(
+                    'embedClass',
+                ),
+            ).toBe(true);
             expect(getIFrameSrc(container)).toBe(
                 `http://${thoughtSpotHost}/?hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&hideAction=[%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true#/embed/answer`,
             );
         });
 
-        it('Should attach event listeners', async () => {
+        it('Should attach event listeners', async (done) => {
             const userGUID = 'absfdfgd';
             const { container } = render(
                 <SearchEmbed
@@ -44,6 +50,7 @@ describe('React Components', () => {
                     }}
                     onAuthInit={(e) => {
                         expect(e.data.userGUID).toEqual(userGUID);
+                        done();
                     }}
                 />,
             );
@@ -63,7 +70,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,41 @@ 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}
+                    className={className}
+                ></div>
+            );
+        },
+    );
 
 interface SearchProps extends EmbedProps, SearchViewConfig {}
 
@@ -68,3 +81,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;