@thoughtspot/visual-embed-sdk 1.20.0-prerender.2 → 1.20.1

package/src/mixpanel-service.ts

@@ -19,7 +19,6 @@ let eventQueue: { eventId: string; eventProps: any }[] = [];
 
 /**
  * Pushes the event with its Property key-value map to mixpanel.
- *
  * @param eventId
  * @param eventProps
  */
@@ -31,9 +30,6 @@ export function uploadMixpanelEvent(eventId: string, eventProps = {}): void {
     mixpanel.track(eventId, eventProps);
 }
 
-/**
- *
- */
 function emptyQueue() {
     if (!isMixpanelInitialized) {
         return;
@@ -44,16 +40,11 @@ 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) {
@@ -66,9 +57,6 @@ export function initMixpanel(sessionInfo: any): void {
     }
 }
 
-/**
- *
- */
 export function testResetMixpanel() {
     isMixpanelInitialized = false;
     eventQueue = [];

package/src/react/index.spec.tsx

@@ -1,12 +1,8 @@
 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,
@@ -15,7 +11,11 @@ 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,7 +86,10 @@ 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 (
@@ -136,36 +139,9 @@ describe('React Components', () => {
             );
 
             await waitFor(() => getIFrameEl(container));
-            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}
-                />,
+            expect(getIFrameSrc(container)).toContain(
+                'col1=revenue&op1=EQ&val1=100',
             );
-            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,27 +1,38 @@
 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(
                         {
@@ -34,48 +45,54 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
                         },
                         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,
-);
+export const SearchEmbed = componentFactory<
+    typeof _SearchEmbed,
+    SearchProps,
+    SearchViewConfig
+>(_SearchEmbed);
 
 interface AppProps extends EmbedProps, AppViewConfig {}
 
-export const AppEmbed = componentFactory<typeof _AppEmbed, AppProps, AppViewConfig>(_AppEmbed);
+export const AppEmbed = componentFactory<
+    typeof _AppEmbed,
+    AppProps,
+    AppViewConfig
+>(_AppEmbed);
 
 interface LiveboardProps extends EmbedProps, LiveboardViewConfig {}
 
@@ -99,4 +116,6 @@ export const SearchBarEmbed = componentFactory<
     SearchBarViewConfig
 >(_SearchBarEmbed);
 
-export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => React.useRef<TsEmbed>(null);
+export const useEmbedRef = (): React.MutableRefObject<TsEmbed> => {
+    return React.useRef<TsEmbed>(null);
+};

package/src/react/util.ts

@@ -1,7 +1,9 @@
 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;
 }
@@ -11,13 +13,7 @@ export interface ViewConfigAndListeners<T extends ViewConfig> {
     listeners: { [key in EmbedEvent]?: MessageCallback };
 }
 
-/**
- *
- * @param props
- */
-export function getViewPropsAndListeners<
-    T extends EmbedProps,
-    U extends ViewConfig>(props: T): ViewConfigAndListeners<U> {
+export function getViewPropsAndListeners<T extends EmbedProps, U extends ViewConfig>(props: T): ViewConfigAndListeners<U> {
     return Object.keys(props).reduce(
         (accu, key) => {
             if (key.startsWith('on')) {
@@ -33,4 +29,4 @@ export function getViewPropsAndListeners<
             listeners: {},
         },
     );
-}
+}

package/src/test/test-utils.ts

@@ -3,15 +3,18 @@ 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;
 
@@ -19,33 +22,40 @@ export const getRootEl = () => document.getElementById('embed');
 
 export const getRootEl2 = () => document.getElementById('embed-2');
 
-export const getIFrameEl = (container: DOMElement = document) => container.querySelector('iframe');
+export const getIFrameEl = (container: DOMElement = document) => {
+    return 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> => new Promise((resolve) => {
-    const interval = setInterval(() => {
-        const value = fn();
-        if (value) {
-            clearInterval(interval);
-            resolve();
-        }
-    }, 100);
-});
+export const waitFor = (fn: () => boolean): Promise<void> => {
+    return 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,
@@ -56,37 +66,33 @@ export const postMessageToParent = (window: WindowProxy, data: any, port?: any)
 
 /**
  * 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,
-) => new Promise((resolve, reject) => {
-    setTimeout(() => {
-        const value = fn();
-        resolve(value);
-    }, waitTime);
-});
+) => {
+    return 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: {},
@@ -99,13 +105,3 @@ 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);
-};