@thoughtspot/visual-embed-sdk 1.24.0-preRender.2 → 1.24.0-preRender.3

package/src/embed/sage.ts

@@ -168,22 +168,13 @@ export class SageEmbed extends V1Embed {
     /**
      * Render the embedded ThoughtSpot Sage
      *
-     * @param showPreRenderByDefault
      * @returns {SageEmbed} Eureka/Sage embed
      */
-    public render(showPreRenderByDefault = false): SageEmbed {
+    public render(): SageEmbed {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src, showPreRenderByDefault);
-
-        return this;
-    }
-
-    public preRender(showPreRenderByDefault = false): SageEmbed {
-        super.preRender(showPreRenderByDefault);
-
-        this.render(showPreRenderByDefault);
+        this.renderV1Embed(src);
 
         return this;
     }

package/src/embed/search.ts

@@ -259,15 +259,13 @@ export class SearchEmbed extends TsEmbed {
 
     /**
      * Render the embedded ThoughtSpot search
-     *
-     * @param showPreRenderByDefault
      */
-    public render(showPreRenderByDefault = false): SearchEmbed {
+    public render(): SearchEmbed {
         super.render();
         const { answerId } = this.viewConfig;
 
         const src = this.getIFrameSrc(answerId);
-        this.renderIFrame(src, showPreRenderByDefault);
+        this.renderIFrame(src);
         getAuthPromise().then(() => {
             if (
                 checkReleaseVersionInBeta(
@@ -280,12 +278,4 @@ export class SearchEmbed extends TsEmbed {
         });
         return this;
     }
-
-    public preRender(showPreRenderByDefault = false): SearchEmbed {
-        super.preRender();
-
-        this.render(showPreRenderByDefault);
-
-        return this;
-    }
 }

package/src/embed/ts-embed.spec.ts

@@ -1258,4 +1258,131 @@ describe('Unit test case for ts embed', () => {
             });
         });
     });
+
+    describe('validate preRender flow', () => {
+        beforeAll(() => {
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.None,
+            });
+        });
+
+        afterAll(() => {
+            const rootEle = document.getElementById('myRoot');
+            rootEle.remove();
+        });
+
+        const createRootEleForEmbed = () => {
+            const rootEle = document.createElement('div');
+            rootEle.id = 'myRoot';
+            const tsEmbedDiv = document.createElement('div');
+            tsEmbedDiv.id = 'tsEmbedDiv';
+            rootEle.appendChild(tsEmbedDiv);
+            document.body.appendChild(rootEle);
+        };
+
+        it('should preRender and hide the iframe', async () => {
+            createRootEleForEmbed();
+
+            const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                preRenderId: 'i-am-preRendered',
+                liveboardId: 'myLiveboardId',
+            });
+
+            libEmbed.preRender();
+
+            await waitFor(() => !!getIFrameEl());
+
+            const preRenderIds = libEmbed.getPreRenderIds();
+            const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+            expect(preRenderWrapper.style.opacity).toBe('0');
+            expect(preRenderWrapper.style.pointerEvents).toBe('none');
+            expect(preRenderWrapper.style.zIndex).toBe('-1000');
+
+            const preRenderChild = (document
+                .getElementById(preRenderIds.child) as HTMLIFrameElement);
+            expect(preRenderWrapper.children[0]).toEqual(preRenderChild);
+            expect(preRenderChild).toBeInstanceOf(HTMLIFrameElement);
+            expect(preRenderChild.src).toMatch(/^http:\/\/tshost.*\/myLiveboardId/);
+
+            const tsEmbedDiv = document.getElementById('tsEmbedDiv');
+            tsEmbedDiv.style.width = '100px';
+            tsEmbedDiv.style.height = '100px';
+
+            let resizeObserverCb: any;
+            (window as any).ResizeObserver = window.ResizeObserver
+            || jest.fn().mockImplementation((resizeObserverCbParam) => {
+                resizeObserverCb = resizeObserverCbParam;
+                return ({
+                    disconnect: jest.fn(),
+                    observe: jest.fn(),
+                    unobserve: jest.fn(),
+                });
+            });
+
+            // show preRender
+            libEmbed.showPreRender();
+
+            resizeObserverCb([{
+                target: tsEmbedDiv,
+                contentRect: { height: 297, width: 987 },
+            }]);
+
+            expect(preRenderWrapper.style.height).toEqual(`${297}px`);
+            expect(preRenderWrapper.style.width).toEqual(`${987}px`);
+
+            expect(preRenderWrapper.style.opacity).toBe('');
+            expect(preRenderWrapper.style.pointerEvents).toBe('');
+            expect(preRenderWrapper.style.zIndex).toBe('');
+
+            libEmbed.hidePreRender();
+            expect(preRenderWrapper.style.opacity).toBe('0');
+            expect(preRenderWrapper.style.pointerEvents).toBe('none');
+            expect(preRenderWrapper.style.zIndex).toBe('-1000');
+
+            libEmbed.destroy();
+            expect(document.getElementById(preRenderIds.wrapper)).toBe(null);
+        });
+
+        it('preRender called without preRenderId should log error ', () => {
+            createRootEleForEmbed();
+
+            spyOn(console, 'error');
+            const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                liveboardId: 'myLiveboardId',
+            });
+            libEmbed.preRender();
+
+            expect(console.error).toHaveBeenCalledWith('PreRender id is required for preRender');
+        });
+
+        it('showPreRender should preRender if not available', async () => {
+            createRootEleForEmbed();
+
+            const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                preRenderId: 'i-am-preRendered',
+                liveboardId: 'myLiveboardId',
+            });
+            const preRenderIds = libEmbed.getPreRenderIds();
+            libEmbed.showPreRender();
+            await waitFor(() => !!getIFrameEl());
+            const preRenderWrapper = document.getElementById(preRenderIds.wrapper);
+
+            expect(preRenderWrapper.style.opacity).toBe('');
+            expect(preRenderWrapper.style.pointerEvents).toBe('');
+            expect(preRenderWrapper.style.zIndex).toBe('');
+        });
+
+        it('hidePreRender should not preRender if not available', async () => {
+            createRootEleForEmbed();
+
+            const libEmbed = new LiveboardEmbed('#tsEmbedDiv', {
+                preRenderId: 'i-am-preRendered',
+                liveboardId: 'myLiveboardId',
+            });
+            spyOn(libEmbed, 'preRender');
+            libEmbed.hidePreRender();
+            expect(libEmbed.preRender).toHaveBeenCalledTimes(0);
+        });
+    });
 });

package/src/embed/ts-embed.ts

@@ -136,6 +136,11 @@ export class TsEmbed {
      */
     private isError: boolean;
 
+    /**
+     * A flag that is set to true post preRender.
+     */
+    private isPreRendered: boolean;
+
     /**
      * Should we encode URL Query Params using base64 encoding which thoughtspot
      * will generate for embedding. This provides additional security to
@@ -147,6 +152,8 @@ export class TsEmbed {
 
     private defaultHiddenActions = [Action.ReportError];
 
+    private resizeObserver: ResizeObserver;
+
     constructor(domSelector: DOMSelector, viewConfig?: ViewConfig) {
         this.el = getDOMNode(domSelector);
         // TODO: handle error
@@ -377,7 +384,8 @@ export class TsEmbed {
         queryParams[Param.ViewPortWidth] = window.innerWidth;
         queryParams[Param.Version] = version;
         queryParams[Param.AuthType] = this.embedConfig.authType;
-        queryParams[Param.blockNonEmbedFullAppAccess] = this.embedConfig.blockNonEmbedFullAppAccess ?? true;
+        queryParams[Param.blockNonEmbedFullAppAccess] = this.embedConfig.blockNonEmbedFullAppAccess
+            ?? true;
         if (this.embedConfig.disableLoginRedirect === true || this.embedConfig.autoLogin === true) {
             queryParams[Param.DisableLoginRedirect] = true;
         }
@@ -454,7 +462,8 @@ export class TsEmbed {
             queryParams[Param.ContextMenuTrigger] = false;
         }
 
-        const spriteUrl = customizations?.iconSpriteUrl || this.embedConfig.customizations?.iconSpriteUrl;
+        const spriteUrl = customizations?.iconSpriteUrl
+            || this.embedConfig.customizations?.iconSpriteUrl;
         if (spriteUrl) {
             queryParams[Param.IconSpriteUrl] = spriteUrl.replace('https://', '');
         }
@@ -533,7 +542,9 @@ export class TsEmbed {
         // @ts-ignore
         iFrame.allow = 'clipboard-read; clipboard-write';
 
-        const { height: frameHeight, width: frameWidth, ...restParams } = this.viewConfig.frameParams || {};
+        const {
+            height: frameHeight, width: frameWidth, ...restParams
+        } = this.viewConfig.frameParams || {};
         const width = getCssDimension(frameWidth || DEFAULT_EMBED_WIDTH);
         const height = getCssDimension(frameHeight || DEFAULT_EMBED_HEIGHT);
         setAttributes(iFrame, restParams);
@@ -545,12 +556,9 @@ export class TsEmbed {
         return iFrame;
     }
 
-    protected handleInsertionIntoDOM(child: string | Node, showPreRenderByDefault = false): void {
+    protected handleInsertionIntoDOM(child: string | Node): void {
         if (this.isPreRendered) {
-            if (!this.viewConfig.preRenderId) {
-                throw Error('PreRender id is required for preRender');
-            }
-            this.insertIntoDOMForPreRender(child, showPreRenderByDefault);
+            this.insertIntoDOMForPreRender(child);
         } else {
             this.insertIntoDOM(child);
         }
@@ -561,9 +569,8 @@ export class TsEmbed {
      * event listeners.
      *
      * @param url - The URL of the embedded ThoughtSpot app.
-     * @param showPreRenderByDefault - The flag to show the preRender by default.
      */
-    protected async renderIFrame(url: string, showPreRenderByDefault = false): Promise<any> {
+    protected async renderIFrame(url: string): Promise<any> {
         if (this.isError) {
             return null;
         }
@@ -588,10 +595,7 @@ export class TsEmbed {
             return getAuthPromise()
                 ?.then((isLoggedIn: boolean) => {
                     if (!isLoggedIn) {
-                        this.handleInsertionIntoDOM(
-                            this.embedConfig.loginFailedMessage,
-                            showPreRenderByDefault,
-                        );
+                        this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage);
                         return;
                     }
 
@@ -614,7 +618,7 @@ export class TsEmbed {
                     this.iFrame.addEventListener('error', () => {
                         nextInQueue();
                     });
-                    this.handleInsertionIntoDOM(this.iFrame, showPreRenderByDefault);
+                    this.handleInsertionIntoDOM(this.iFrame);
                     const prefetchIframe = document.querySelectorAll('.prefetchIframe');
                     if (prefetchIframe.length) {
                         prefetchIframe.forEach((el) => {
@@ -634,15 +638,6 @@ export class TsEmbed {
         });
     }
 
-    public getPreRenderIds() {
-        return {
-            wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
-            // shield:
-            // `tsEmbed-pre-render-shield-${this.viewConfig.preRenderId}`,
-            child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
-        };
-    }
-
     protected createPreRenderWrapper(): HTMLDivElement {
         if (!this.viewConfig.preRenderId) {
             throw new Error('PreRender id is required to create PreRender wrapper');
@@ -661,32 +656,18 @@ export class TsEmbed {
         };
         setStyleProperties(preRenderWrapper, initialPreRenderWrapperStyle);
 
-        // const preRenderShield = document.createElement('div');
-        // preRenderShield.id = preRenderIds.shield;
-        // setStyleProperties(preRenderShield, { position: 'absolute',
-        // width: '100%', height: '100%' });
-
-        // preRenderWrapper.appendChild(preRenderShield);
-
-        // this.preRenderWrapper = preRenderWrapper;
-        // this.preRenderShield = preRenderShield;
-        // this.preRenderChild = child;
-
         return preRenderWrapper;
     }
 
     protected preRenderWrapper: HTMLElement;
 
-    // protected preRenderShield: HTMLElement;
-
     protected preRenderChild: HTMLElement;
 
     protected connectPreRendered(): boolean {
         const preRenderIds = this.getPreRenderIds();
         this.preRenderWrapper = this.preRenderWrapper
-            || document.getElementById(preRenderIds.wrapper);
-        // this.preRenderShield = this.preRenderShield
-        //     || document.getElementById(preRenderIds.shield);
+          || document.getElementById(preRenderIds.wrapper);
+
         this.preRenderChild = this.preRenderChild || document.getElementById(preRenderIds.child);
 
         if (this.preRenderWrapper && this.preRenderChild) {
@@ -698,7 +679,7 @@ export class TsEmbed {
     }
 
     protected isPreRenderAvailable(): boolean {
-        return this.isPreRendered;
+        return this.isPreRendered && Boolean(this.preRenderWrapper && this.preRenderChild);
     }
 
     protected createPreRenderChild(child: string | Node): HTMLElement {
@@ -724,10 +705,7 @@ export class TsEmbed {
         return divChildNode;
     }
 
-    protected insertIntoDOMForPreRender(
-        child: string | Node,
-        showPreRenderByDefault = false,
-    ): void {
+    protected insertIntoDOMForPreRender(child: string | Node): void {
         const preRenderChild = this.createPreRenderChild(child);
         const preRenderWrapper = this.createPreRenderWrapper();
         preRenderWrapper.appendChild(preRenderChild);
@@ -739,83 +717,17 @@ export class TsEmbed {
             this.iFrame = preRenderChild;
         }
 
-        if (showPreRenderByDefault) {
+        if (this.showPreRenderByDefault) {
             this.showPreRender();
         } else {
             this.hidePreRender();
         }
 
+        this.insertedDomEl = preRenderWrapper;
         document.body.appendChild(preRenderWrapper);
     }
 
-    public hidePreRender(): void {
-        if (!this.isPreRenderAvailable()) {
-            // if the embed component is not preRendered , nothing to hide
-            console.warn(
-                'Warning: You should call PreRender before hiding it using hidePreRender.',
-            );
-            return;
-        }
-        const preRenderHideStyles = {
-            opacity: '0',
-            pointerEvents: 'none',
-            zIndex: '-1000',
-            position: 'absolute ',
-            top: '0',
-            left: '0',
-        };
-        setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
-
-        // const childBoundingRect = this.preRenderChild.getBoundingClientRect();
-        //
-        // setStyleProperties(this.preRenderShield, {
-        //     opacity: '0',
-        //     pointerEvents: 'none',
-        //     zIndex: '1',
-        //     width: `${childBoundingRect.width}px`,
-        //     height: `${childBoundingRect.height}px`,
-        //     position: 'absolute',
-        //     top: '0',
-        //     left: '0',
-        // });
-
-        this.unsubscribeToEvents();
-    }
-
-    public showPreRender(): void {
-        if (!this.isPreRenderAvailable()) {
-            const isAvailable = this.connectPreRendered();
-            if (!isAvailable) {
-                // if the Embed component is not preRendered , Render it now and
-                this.preRender(true);
-                // show it (hide is defalt behaviour)
-                // console.log('No preRender found, creating new ');
-                return;
-            }
-        }
-
-        this.syncPreRenderStyle();
-
-        removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
-
-        // setStyleProperties(this.preRenderShield, { zIndex: '-1' });
-
-        this.subscribeToEvents();
-    }
-
-    public syncPreRenderStyle(): void {
-        if (!this.el) {
-            throw new Error('Embed element is not defined');
-        }
-        const elBoundingClient = this.el.getBoundingClientRect();
-
-        setStyleProperties(this.preRenderWrapper, {
-            top: `${elBoundingClient.y}px`,
-            left: `${elBoundingClient.x}px`,
-            width: `${elBoundingClient.width}px`,
-            height: `${elBoundingClient.height}px`,
-        });
-    }
+    private showPreRenderByDefault = false;
 
     protected insertIntoDOM(child: string | Node): void {
         if (this.viewConfig.insertAsSibling) {
@@ -1048,15 +960,19 @@ export class TsEmbed {
         return this;
     }
 
-    private isPreRendered: boolean;
-
     /**
      * Creates the preRender shell
      *
-     * @param showPreRenderByDefault
+     * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
     public preRender(showPreRenderByDefault = false): TsEmbed {
+        if (!this.viewConfig.preRenderId) {
+            console.error('PreRender id is required for preRender');
+            return this;
+        }
         this.isPreRendered = true;
+        this.showPreRenderByDefault = showPreRenderByDefault;
+        this.render();
         return this;
     }
 
@@ -1120,6 +1036,110 @@ export class TsEmbed {
         const prerenderFrameSrc = this.getRootIframeSrc();
         return this.renderIFrame(prerenderFrameSrc);
     }
+
+    /**
+     * Displays the PreRender component.
+     * If the component is not preRendered, it attempts to create and render it.
+     * Also, synchronizes the style of the PreRender component with the embedding
+     * element.
+     */
+    public showPreRender(): void {
+        if (!this.isPreRenderAvailable()) {
+            const isAvailable = this.connectPreRendered();
+            if (!isAvailable) {
+                // if the Embed component is not preRendered , Render it now and
+                this.preRender(true);
+                return;
+            }
+        }
+
+        if (this.el) {
+            this.syncPreRenderStyle();
+
+            this.resizeObserver = new ResizeObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.contentRect && entry.target === this.el) {
+                        setStyleProperties(this.preRenderWrapper, {
+                            width: `${entry.contentRect.width}px`,
+                            height: `${entry.contentRect.height}px`,
+                        });
+                    }
+                });
+            });
+            this.resizeObserver.observe(this.el);
+        }
+
+        removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
+
+        this.subscribeToEvents();
+    }
+
+    /**
+     * Synchronizes the style properties of the PreRender component with the embedding
+     * element. This function adjusts the position, width, and height of the PreRender
+     * component
+     * to match the dimensions and position of the embedding element.
+     *
+     * @throws {Error} Throws an error if the embedding element (passed as domSelector)
+     * is not defined or not found.
+     */
+    public syncPreRenderStyle(): void {
+        if (!this.el) {
+            throw new Error('Embed element is not defined');
+        }
+        const elBoundingClient = this.el.getBoundingClientRect();
+
+        setStyleProperties(this.preRenderWrapper, {
+            top: `${elBoundingClient.y}px`,
+            left: `${elBoundingClient.x}px`,
+            width: `${elBoundingClient.width}px`,
+            height: `${elBoundingClient.height}px`,
+        });
+    }
+
+    /**
+     * Hides the PreRender component if it is available.
+     * If the component is not preRendered, it issues a warning.
+     */
+    public hidePreRender(): void {
+        if (!this.isPreRenderAvailable()) {
+            // if the embed component is not preRendered , nothing to hide
+            console.warn(
+                'Warning: You should call PreRender before hiding it using hidePreRender.',
+            );
+            return;
+        }
+        const preRenderHideStyles = {
+            opacity: '0',
+            pointerEvents: 'none',
+            zIndex: '-1000',
+            position: 'absolute ',
+            top: '0',
+            left: '0',
+        };
+        setStyleProperties(this.preRenderWrapper, preRenderHideStyles);
+
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+
+        this.unsubscribeToEvents();
+    }
+
+    /**
+     * Retrieves unique HTML element IDs for PreRender-related elements.
+     * These IDs are constructed based on the provided 'preRenderId' from 'viewConfig'.
+     *
+     * @returns {object} An object containing the IDs for the PreRender elements.
+     * @property {string} wrapper - The HTML element ID for the PreRender wrapper.
+     * @property {string} child - The HTML element ID for the PreRender child.
+     */
+    public getPreRenderIds() {
+        return {
+            wrapper: `tsEmbed-pre-render-wrapper-${this.viewConfig.preRenderId}`,
+            child: `tsEmbed-pre-render-child-${this.viewConfig.preRenderId}`,
+        };
+    }
 }
 
 /**
@@ -1141,10 +1161,9 @@ export class V1Embed extends TsEmbed {
      * Render the app in an iframe and set up event handlers
      *
      * @param iframeSrc
-     * @param showPreRenderByDefault - if true the preRender will be shown by default
      */
-    protected renderV1Embed(iframeSrc: string, showPreRenderByDefault = false): any {
-        return this.renderIFrame(iframeSrc, showPreRenderByDefault);
+    protected renderV1Embed(iframeSrc: string): Promise<any> {
+        return this.renderIFrame(iframeSrc);
     }
 
     protected getRootIframeSrc(): string {

package/src/react/all-types-export.ts

@@ -1,11 +1,15 @@
 export {
     SearchEmbed,
+    PreRenderedSearchEmbed,
     LiveboardEmbed,
+    PreRenderedLiveboardEmbed,
     SearchBarEmbed,
+    PreRenderedSearchBarEmbed,
     AppEmbed,
+    PreRenderedAppEmbed,
     SageEmbed,
+    PreRenderedSageEmbed,
     useEmbedRef,
-    PreRenderedLiveboardEmbed,
 } from './index';
 
 export {

package/src/react/index.spec.tsx

@@ -15,7 +15,7 @@ import {
     mockMessageChannel,
 } from '../test/test-utils';
 import {
-    SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed,
+    SearchEmbed, AppEmbed, LiveboardEmbed, useEmbedRef, SearchBarEmbed, PreRenderedLiveboardEmbed,
 } from './index';
 import * as allExports from './index';
 import {
@@ -226,6 +226,47 @@ describe('React Components', () => {
             );
         });
     });
+
+    describe('PreRenderedLiveboardEmbed', () => {
+        it('should preRender the liveboard ', async () => {
+            const preRenderId = 'tsEmbed-pre-render-wrapper-test';
+
+            const { container } = render(
+                <PreRenderedLiveboardEmbed
+                    className="embedClass"
+                    preRenderId="test"
+                    liveboardId="libId"
+                />,
+            );
+
+            await waitFor(() => getIFrameEl());
+            const preRenderWrapper = document.body.querySelector(`#${preRenderId}`) as HTMLDivElement;
+
+            expect(preRenderWrapper).toBeInstanceOf(HTMLDivElement);
+            expect((preRenderWrapper as HTMLDivElement).childElementCount).toBe(1);
+
+            const preRenderChildId = 'tsEmbed-pre-render-child-test';
+            const preRenderChild = document.body.querySelector(`#${preRenderChildId}`);
+            expect(preRenderWrapper.children[0]).toBe(preRenderChild);
+
+            (window as any).ResizeObserver = jest.fn().mockImplementation(() => ({
+                disconnect: jest.fn(),
+                observe: jest.fn(),
+                unobserve: jest.fn(),
+            }));
+            const { container: libContainer } = render(
+                <LiveboardEmbed
+                    className="embedClass"
+                    preRenderId="test"
+                    liveboardId="libId"
+                />,
+            );
+
+            expect(preRenderWrapper.style.opacity).toBe('');
+            expect(preRenderWrapper.style.pointerEvents).toBe('');
+            expect(preRenderWrapper.style.zIndex).toBe('');
+        });
+    });
 });
 
 describe('allExports', () => {