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

package/src/embed/app.ts

@@ -259,7 +259,7 @@ export class AppEmbed extends V1Embed {
      */
     protected updateIFrameHeight = (data: MessagePayload) => {
         this.setIFrameHeight(Math.max(data.data, this.iFrame?.scrollHeight));
-    };
+    }
 
     private embedIframeCenter = (data: MessagePayload, responder: any) => {
         const obj = this.getIframeCenter();
@@ -267,7 +267,9 @@ export class AppEmbed extends V1Embed {
     };
 
     private setIframeHeightForNonEmbedLiveboard = (data: MessagePayload) => {
-        const { height: frameHeight, ...restParams } = this.viewConfig.frameParams || {};
+        const {
+            height: frameHeight, ...restParams
+        } = this.viewConfig.frameParams || {};
         if (!data.data.currentPath.startsWith('/pinboard/')) {
             this.setIFrameHeight(frameHeight || this.defaultHeight);
         }
@@ -357,19 +359,12 @@ export class AppEmbed extends V1Embed {
      *
      * @param renderOptions An object containing the page ID
      * to be embedded.
-     * @param showPreRenderByDefault
      */
-    public render(showPreRenderByDefault = false): AppEmbed {
+    public render(): AppEmbed {
         super.render();
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src, showPreRenderByDefault);
-
-        return this;
-    }
+        this.renderV1Embed(src);
 
-    public preRender(showPreRenderByDefault = false): AppEmbed {
-        super.preRender(showPreRenderByDefault);
-        this.render(showPreRenderByDefault);
         return this;
     }
 }

package/src/embed/liveboard.spec.ts

@@ -1,4 +1,4 @@
-import { LiveboardEmbed, LiveboardViewConfig } from './liveboard';
+import { LiveboardViewConfig, LiveboardEmbed } from './liveboard';
 import { init } from '../index';
 import {
     Action,
@@ -19,6 +19,7 @@ import {
     postMessageToParent,
     getIFrameEl,
     mockMessageChannel,
+    waitFor,
 } from '../test/test-utils';
 import * as tsEmbed from './ts-embed';
 import * as processTriggerInstance from '../utils/processTrigger';
@@ -392,4 +393,78 @@ describe('Liveboard/viz embed tests', () => {
             );
         });
     });
+
+    describe('PreRender flow for liveboard embed', () => {
+        test('it should preRender generic with liveboard id is not passed', (done) => {
+            const consoleSpy = jest.spyOn(console, 'error');
+            const libEmbed = new LiveboardEmbed(getRootEl(), {
+                preRenderId: 'testPreRender',
+            });
+            const prerenderGenericSpy = jest.spyOn(libEmbed, 'prerenderGeneric');
+            libEmbed.preRender();
+            executeAfterWait(() => {
+                const iFrame = document.getElementById(
+                    libEmbed.getPreRenderIds().child,
+                ) as HTMLIFrameElement;
+
+                // should render the generic link
+                expect(prerenderGenericSpy).toHaveBeenCalledTimes(1);
+                expect(iFrame.src).toMatch(/http:\/\/tshost\/.*&isLiveboardEmbed=true#$/);
+
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+
+                done();
+            });
+        });
+
+        test('it should preRender generic with liveboard id is not passed', async (done) => {
+            mockMessageChannel();
+            const consoleSpy = jest.spyOn(console, 'error');
+            const testPreRenderId = 'testPreRender';
+            const libEmbed = new LiveboardEmbed(getRootEl(), {
+                preRenderId: testPreRenderId,
+            });
+
+            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(),
+                });
+            });
+
+            libEmbed.preRender();
+
+            await waitFor(() => !!getIFrameEl());
+
+            const ts = '__tsEmbed';
+            expect(document.getElementById(libEmbed.getPreRenderIds().wrapper)[ts])
+                .toEqual(libEmbed);
+
+            const testLiveboardId = 'testLiveboardId';
+            const newLibEmbed = new LiveboardEmbed(getRootEl(), {
+                preRenderId: testPreRenderId,
+                liveboardId: testLiveboardId,
+            });
+            const navigateToLiveboardSpy = jest.spyOn(newLibEmbed, 'navigateToLiveboard');
+            newLibEmbed.showPreRender();
+
+            executeAfterWait(() => {
+                const iFrame = document.getElementById(
+                    libEmbed.getPreRenderIds().child,
+                ) as HTMLIFrameElement;
+
+                // should render the generic link
+                expect(navigateToLiveboardSpy).toHaveBeenCalledWith(testLiveboardId);
+                expect(iFrame.src).toMatch(/http:\/\/tshost\/.*&isLiveboardEmbed=true#$/);
+
+                expect(consoleSpy).toHaveBeenCalledTimes(0);
+
+                done();
+            });
+        });
+    });
 });

package/src/embed/liveboard.ts

@@ -9,6 +9,7 @@
  * @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
  */
 
+import _ from 'lodash';
 import { ERROR_MESSAGE } from '../errors';
 import {
     EmbedEvent,
@@ -260,6 +261,28 @@ export class LiveboardEmbed extends V1Embed {
         }
     }
 
+    protected beforePrerenderVisible(): void {
+        const embedObj = this.insertedDomEl[this.embedNodeKey] as LiveboardEmbed;
+
+        if (_.isUndefined(embedObj)) return;
+
+        const showDifferentLib = this.viewConfig.liveboardId
+        && embedObj.viewConfig.liveboardId !== this.viewConfig.liveboardId;
+
+        if (showDifferentLib) {
+            const libId = this.viewConfig.liveboardId;
+            this.navigateToLiveboard(libId);
+        }
+    }
+
+    protected handleRenderForPrerender(): void {
+        if (_.isUndefined(this.viewConfig.liveboardId)) {
+            this.prerenderGeneric();
+            return;
+        }
+        super.handleRenderForPrerender();
+    }
+
     /**
      * Triggers an event to the embedded app
      *
@@ -283,21 +306,12 @@ export class LiveboardEmbed extends V1Embed {
      *
      * @param renderOptions An object specifying the Liveboard ID,
      * visualization ID and the runtime filters.
-     * @param showPreRenderByDefault
      */
-    public render(showPreRenderByDefault = false): LiveboardEmbed {
+    public render(): LiveboardEmbed {
         super.render();
 
         const src = this.getIFrameSrc();
-        this.renderV1Embed(src, showPreRenderByDefault);
-
-        return this;
-    }
-
-    public preRender(showPreRenderByDefault = false): LiveboardEmbed {
-        super.preRender();
-
-        this.render(showPreRenderByDefault);
+        this.renderV1Embed(src);
 
         return this;
     }
@@ -307,8 +321,10 @@ export class LiveboardEmbed extends V1Embed {
         this.viewConfig.liveboardId = liveboardId;
         this.viewConfig.activeTabId = activeTabId;
         this.viewConfig.vizId = vizId;
-        if (this.isAppInitialized) {
+        if (this.isRendered) {
             this.trigger(HostEvent.Navigate, path.substring(1));
+        } else if (this.viewConfig.preRenderId) {
+            this.preRender(true);
         } else {
             this.render();
         }

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);
+        });
+    });
 });