@thoughtspot/visual-embed-sdk 1.20.2 → 1.20.3

package/src/index.ts

@@ -8,20 +8,14 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 import { AppEmbed, Page, AppViewConfig } from './embed/app';
-import { init, prefetch, logout, getEmbedConfig } from './embed/base';
 import {
-    PinboardEmbed,
-    LiveboardViewConfig,
-    LiveboardEmbed,
-} from './embed/liveboard';
+    init, prefetch, logout, getEmbedConfig,
+} from './embed/base';
+import { PinboardEmbed, LiveboardViewConfig, LiveboardEmbed } from './embed/liveboard';
 import { SearchEmbed, SearchViewConfig } from './embed/search';
 import { SearchBarEmbed, SearchBarViewConfig } from './embed/search-bar';
 import {
-    AuthFailureType,
-    AuthStatus,
-    AuthEvent,
-    AuthEventEmitter,
-    getSessionInfo,
+    AuthFailureType, AuthStatus, AuthEvent, AuthEventEmitter, getSessionInfo,
 } from './auth';
 import {
     AuthType,
@@ -41,6 +35,7 @@ import {
     CustomisationsInterface,
     CustomStyles,
     customCssInterface,
+    ContextMenuTriggerOptions,
 } from './types';
 
 export {
@@ -67,6 +62,7 @@ export {
     HostEvent,
     DataSourceVisualMode,
     Action,
+    ContextMenuTriggerOptions,
     EmbedConfig,
     SearchViewConfig,
     SearchBarViewConfig,

package/src/mixpanel-service.spec.ts

@@ -49,9 +49,7 @@ describe('Unit test for mixpanel', () => {
         initMixpanel(sessionInfo);
 
         expect(mixpanel.init).toHaveBeenCalledWith(sessionInfo.mixpanelToken);
-        expect(mixpanel.identify).not.toHaveBeenCalledWith(
-            sessionInfo.userGUID,
-        );
+        expect(mixpanel.identify).not.toHaveBeenCalledWith(sessionInfo.userGUID);
     });
 
     test('when not init, should queue events and flush on init', () => {

package/src/mixpanel-service.ts

@@ -19,6 +19,7 @@ let eventQueue: { eventId: string; eventProps: any }[] = [];
 
 /**
  * Pushes the event with its Property key-value map to mixpanel.
+ *
  * @param eventId
  * @param eventProps
  */
@@ -30,6 +31,9 @@ export function uploadMixpanelEvent(eventId: string, eventProps = {}): void {
     mixpanel.track(eventId, eventProps);
 }
 
+/**
+ *
+ */
 function emptyQueue() {
     if (!isMixpanelInitialized) {
         return;
@@ -40,11 +44,16 @@ function emptyQueue() {
     eventQueue = [];
 }
 
+/**
+ *
+ * @param sessionInfo
+ */
 export function initMixpanel(sessionInfo: any): void {
     if (!sessionInfo || !sessionInfo.mixpanelToken) {
         return;
     }
-    // On a public cluster the user is anonymous, so don't set the identify to userGUID
+    // On a public cluster the user is anonymous, so don't set the identify to
+    // userGUID
     const isPublicCluster = !!sessionInfo.isPublicUser;
     const token = sessionInfo.mixpanelToken;
     if (token) {
@@ -57,6 +66,9 @@ export function initMixpanel(sessionInfo: any): void {
     }
 }
 
+/**
+ *
+ */
 export function testResetMixpanel() {
     isMixpanelInitialized = false;
     eventQueue = [];

package/src/react/index.spec.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
-import { Action, EmbedEvent, HostEvent, RuntimeFilterOp } from '../types';
+import {
+    cleanup, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import {
+    Action, EmbedEvent, HostEvent, RuntimeFilterOp,
+} from '../types';
 import {
     executeAfterWait,
     getIFrameEl,
@@ -11,11 +15,7 @@ import {
     mockMessageChannel,
 } from '../test/test-utils';
 import {
-    SearchEmbed,
-    AppEmbed,
-    LiveboardEmbed,
-    useEmbedRef,
-    SearchBarEmbed,
+    SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed,
 } from './index';
 import { AuthType, init } from '../index';
 
@@ -86,10 +86,7 @@ describe('React Components', () => {
             const TestComponent = () => {
                 const embedRef = useEmbedRef();
                 const onLiveboardRendered = () => {
-                    embedRef.current.trigger(HostEvent.SetVisibleVizs, [
-                        'viz1',
-                        'viz2',
-                    ]);
+                    embedRef.current.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
                 };
 
                 return (
@@ -139,9 +136,65 @@ describe('React Components', () => {
             );
 
             await waitFor(() => getIFrameEl(container));
-            expect(getIFrameSrc(container)).toContain(
-                'col1=revenue&op1=EQ&val1=100',
+            expect(getIFrameSrc(container)).toContain('col1=revenue&op1=EQ&val1=100');
+        });
+
+        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);
+        });
+
+        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);
         });
 
         it('Should have the correct container element', async () => {

package/src/react/index.tsx

@@ -1,38 +1,27 @@
 import React from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { deepMerge } from '../utils';
-import {
-    SearchBarEmbed as _SearchBarEmbed,
-    SearchBarViewConfig,
-} from '../embed/search-bar';
+import { SearchBarEmbed as _SearchBarEmbed, SearchBarViewConfig } from '../embed/search-bar';
 import { SearchEmbed as _SearchEmbed, SearchViewConfig } from '../embed/search';
 import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
-import {
-    LiveboardEmbed as _LiveboardEmbed,
-    LiveboardViewConfig,
-} from '../embed/liveboard';
+import { LiveboardEmbed as _LiveboardEmbed, LiveboardViewConfig } from '../embed/liveboard';
 import { TsEmbed } from '../embed/ts-embed';
 
 import { EmbedEvent, ViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 
-const componentFactory = <
-    T extends typeof TsEmbed,
-    U extends EmbedProps,
-    V extends ViewConfig
->(
+const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V extends ViewConfig>(
     EmbedConstructor: T,
-) =>
-    React.forwardRef<TsEmbed, U>(
-        (props: U, forwardedRef: React.MutableRefObject<TsEmbed>) => {
-            const ref = React.useRef<HTMLDivElement>(null);
-            const { className, ...embedProps } = props;
-            const { viewConfig, listeners } = getViewPropsAndListeners<
+) => 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);
-            useDeepCompareEffect(() => {
-                const tsEmbed = new EmbedConstructor(
+        useDeepCompareEffect(() => {
+            const tsEmbed = new EmbedConstructor(
                     ref!.current,
                     deepMerge(
                         {
@@ -45,77 +34,137 @@ const componentFactory = <
                         },
                         viewConfig,
                     ),
-                );
-                Object.keys(listeners).forEach((eventName) => {
-                    tsEmbed.on(
+            );
+            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;
-                }
-                return () => {
-                    tsEmbed.destroy();
-                };
-            }, [viewConfig, listeners]);
+                );
+            });
+            tsEmbed.render();
+            if (forwardedRef) {
+                // eslint-disable-next-line no-param-reassign
+                forwardedRef.current = tsEmbed;
+            }
+            return () => {
+                tsEmbed.destroy();
+            };
+        }, [viewConfig, listeners]);
 
-            return viewConfig.insertAsSibling ? (
-                <span
+        return (
+            (viewConfig.insertAsSibling)
+                ? <span
                     data-testid="tsEmbed"
                     ref={ref}
                     style={{ position: 'absolute' }}
                 ></span>
-            ) : (
-                <div
+                : <div
                     data-testid="tsEmbed"
                     ref={ref}
-                    className={className}
-                ></div>
-            );
-        },
-    );
+                    className={className}>
+                </div>
+        );
+    },
+);
 
 interface SearchProps extends EmbedProps, SearchViewConfig {}
 
-export const SearchEmbed = componentFactory<
-    typeof _SearchEmbed,
-    SearchProps,
-    SearchViewConfig
->(_SearchEmbed);
+/**
+ * React component for Search Embed.
+ *
+ * @example
+ * ```tsx
+ * function Search() {
+ *  return <SearchEmbed
+ *      dataSource="dataSourceId"
+ *      searchOptions={{ searchTokenString: "[revenue]" }}
+ *  />
+ * }
+ * ```
+ */
+export const SearchEmbed = componentFactory<typeof _SearchEmbed, SearchProps, SearchViewConfig>(
+    _SearchEmbed,
+);
 
 interface AppProps extends EmbedProps, AppViewConfig {}
 
-export const AppEmbed = componentFactory<
-    typeof _AppEmbed,
-    AppProps,
-    AppViewConfig
->(_AppEmbed);
+/**
+ * React component for Full app Embed.
+ *
+ * @example
+ * ```tsx
+ * function Search() {
+ *  return <AppEmbed
+ *      showPrimaryNavbar={false}
+ *      pageId={Page.Liveboards}
+ *      onError={(error) => console.error(error)}
+ *  />
+ * }
+ * ```
+ */
+export const AppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(_AppEmbed);
 
 interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
 
+/**
+ * React component for Liveboard embed.
+ *
+ * @example
+ * ```tsx
+ * function Liveboard() {
+ *  return <LiveboardEmbed
+ *      liveboardId="liveboardId"
+ *      fullHeight={true} {/* default false *\/}
+ *      onLiveboardRendered={() => console.log('Liveboard rendered')}
+ *      vizId="vizId" {/* if doing viz embed *\/}
+ *  />
+ * }
+ * ```
+ */
 export const LiveboardEmbed = componentFactory<
     typeof _LiveboardEmbed,
     LiveboardProps,
     LiveboardViewConfig
 >(_LiveboardEmbed);
 
-export const PinboardEmbed = componentFactory<
-    typeof _LiveboardEmbed,
-    LiveboardProps,
-    LiveboardViewConfig
->(_LiveboardEmbed);
+export const PinboardEmbed = LiveboardEmbed;
 
 interface SearchBarEmbedProps extends EmbedProps, SearchBarViewConfig {}
 
+/**
+ * React component for Search bar embed.
+ *
+ * @example
+ * ```tsx
+ * function SearchBar() {
+ *  return <SearchBarEmbed
+ *      dataSource="dataSourceId"
+ *      searchOptions={{ searchTokenString: "[revenue]" }}
+ *  />
+ * }
+ * ```
+ */
 export const SearchBarEmbed = componentFactory<
     typeof _SearchBarEmbed,
     SearchBarEmbedProps,
     SearchBarViewConfig
 >(_SearchBarEmbed);
 
-export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => {
-    return React.useRef<TsEmbed>(null);
-};
+/**
+ * Get a reference to the embed component to trigger events on the component.
+ *
+ * @example
+ * ```
+ * function Component() {
+ * const ref = useEmbedRef();
+ * useEffect(() => {
+ * ref.current.trigger(
+ *  EmbedEvent.UpdateRuntimeFilter,
+ *  [{ columnName: 'name', operator: 'EQ', values: ['value']}]);
+ * }, [])
+ * return <LiveboardEmbed ref={ref} liveboardId={<id>} />
+ * }
+ * ```
+ * @returns {React.MutableRefObject<TsEmbed>} ref
+ */
+export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => React.useRef<TsEmbed>(null);

package/src/react/util.ts

@@ -1,9 +1,7 @@
 import { EmbedEvent, MessageCallback, ViewConfig } from '../types';
 
-// eslint-disable-next-line prettier/prettier
 export type EmbedEventHandlers = { [key in keyof typeof EmbedEvent as `on${Capitalize<key>}`]?: MessageCallback };
 
-
 export interface EmbedProps extends ViewConfig, EmbedEventHandlers {
     className?: string;
 }
@@ -13,7 +11,13 @@ export interface ViewConfigAndListeners<T extends ViewConfig> {
     listeners: { [key in EmbedEvent]?: MessageCallback };
 }
 
-export function getViewPropsAndListeners<T extends EmbedProps, U extends ViewConfig>(props: T): ViewConfigAndListeners<U> {
+/**
+ *
+ * @param props
+ */
+export function getViewPropsAndListeners<
+    T extends EmbedProps,
+    U extends ViewConfig>(props: T): ViewConfigAndListeners<U> {
     return Object.keys(props).reduce(
         (accu, key) => {
             if (key.startsWith('on')) {
@@ -29,4 +33,4 @@ export function getViewPropsAndListeners<T extends EmbedProps, U extends ViewCon
             listeners: {},
         },
     );
-}
+}

package/src/test/test-utils.ts

@@ -3,18 +3,15 @@ import { Action, AuthType } from '../types';
 
 /**
  Initialises fetch to the global object
-*/
-global.fetch = jest.fn(() =>
-    Promise.resolve({
-        json: () => ({ mixpanelAccessToken: '' }),
-    }),
-);
+ */
+global.fetch = jest.fn(() => Promise.resolve({
+    json: () => ({ mixpanelAccessToken: '' }),
+}));
 
 export const defaultParamsWithoutHiddenActions = `hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=${AuthType.None}`;
 export const defaultParams = `&${defaultParamsWithoutHiddenActions}&hideAction=[%22${Action.ReportError}%22]`;
 export const defaultParamsForPinboardEmbed = `hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&hideAction=[%22${Action.ReportError}%22]`;
-export const getDocumentBody = () =>
-    '<div id="embed"></div><div id="embed-2"></div>';
+export const getDocumentBody = () => '<div id="embed"></div><div id="embed-2"></div>';
 
 type DOMElement = HTMLElement | Document;
 
@@ -22,40 +19,33 @@ export const getRootEl = () => document.getElementById('embed');
 
 export const getRootEl2 = () => document.getElementById('embed-2');
 
-export const getIFrameEl = (container: DOMElement = document) => {
-    return container.querySelector('iframe');
-};
+export const getIFrameEl = (container: DOMElement = document) => container.querySelector('iframe');
 
 export const getAllIframeEl = () => document.querySelectorAll('iframe');
 
-export const getIFrameSrc = (container: DOMElement = document) =>
-    getIFrameEl(container).src;
+export const getIFrameSrc = (container: DOMElement = document) => getIFrameEl(container).src;
 
-export const waitFor = (fn: () => boolean): Promise<void> => {
-    return new Promise((resolve) => {
-        const interval = setInterval(() => {
-            const value = fn();
-            if (value) {
-                clearInterval(interval);
-                resolve();
-            }
-        }, 100);
-    });
-};
+export const waitFor = (fn: () => boolean): Promise<void> => new Promise((resolve) => {
+    const interval = setInterval(() => {
+        const value = fn();
+        if (value) {
+            clearInterval(interval);
+            resolve();
+        }
+    }, 100);
+});
 
 /**
  * jsdom does not set event source, therefore we do it
  * programmatically and use dispatchEvent instead of the
  * postMessage API
  * Reference: https://github.com/jsdom/jsdom/issues/2745
+ *
  * @param window
  * @param data
+ * @param port
  */
-export const postMessageToParent = (
-    window: WindowProxy,
-    data: any,
-    port?: any,
-) => {
+export const postMessageToParent = (window: WindowProxy, data: any, port?: any) => {
     const message = new MessageEvent('message', {
         data,
         source: window,
@@ -66,33 +56,37 @@ export const postMessageToParent = (
 
 /**
  * Execute a given function after a certain time has elapsed
+ *
  * @param fn The function to be executed after the wait period
  * @param waitTime The wait period in milliseconds
  */
 export const executeAfterWait = (
     fn: (...args: any[]) => void,
     waitTime = 0,
-) => {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            const value = fn();
-            resolve(value);
-        }, waitTime);
-    });
-};
+) => new Promise((resolve, reject) => {
+    setTimeout(() => {
+        const value = fn();
+        resolve(value);
+    }, waitTime);
+});
 
 /**
  * Time (in milliseconds) to wait for async events to be triggered
  */
 export const EVENT_WAIT_TIME = 1000;
 
+/**
+ *
+ * @param str
+ */
 export function fixedEncodeURI(str: string) {
     return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
 }
 
 /**
- * MessageChannel is available in Node > 15.0.0. Since the current node environment's
- * used for github actions is not above 14, we are mocking this for the current unit tests.
+ * MessageChannel is available in Node > 15.0.0. Since the current node
+ * environment's used for github actions is not above 14, we are mocking this
+ * for the current unit tests.
  */
 export const messageChannelMock: any = {
     port1: {},
@@ -105,3 +99,13 @@ export const mockMessageChannel = () => {
         return messageChannelMock;
     } as any;
 };
+
+export const expectUrlMatchesWithParams = (source: string, target: string) => {
+    const sourceUrl = new URL(source);
+    const targetUrl = new URL(target);
+    expect(sourceUrl.origin).toBe(targetUrl.origin);
+    expect(sourceUrl.pathname).toBe(targetUrl.pathname);
+    const sourceParamsObj = Object.fromEntries(sourceUrl.searchParams);
+    const targetParamsObj = Object.fromEntries(targetUrl.searchParams);
+    expect(sourceParamsObj).toMatchObject(targetParamsObj);
+};