SCAL-255929 - Added cleanup event on destroy (#338)

Author: jbhanu-thoughtspot

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.42.2",
+    "version": "1.42.3",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",

src/embed/base.ts

@@ -41,6 +41,8 @@ const CONFIG_DEFAULTS: Partial<EmbedConfig> = {
     authTriggerText: 'Authorize',
     authType: AuthType.None,
     logLevel: LogLevel.ERROR,
+    waitForCleanupOnDestroy: false,
+    cleanupTimeout: 5000,
 };
 
 export interface executeTMLInput {

src/embed/ts-embed.spec.ts

@@ -2428,50 +2428,6 @@ describe('Unit test case for ts embed', () => {
         });
     });
 
-    describe('When destroyed', () => {
-        it('should remove the iframe', async () => {
-            const appEmbed = new AppEmbed(getRootEl(), {
-                frameParams: {
-                    width: '100%',
-                    height: '100%',
-                },
-            });
-            await appEmbed.render();
-            expect(getIFrameEl()).toBeTruthy();
-            appEmbed.destroy();
-            expect(getIFrameEl()).toBeFalsy();
-        });
-
-        it('should remove the iframe when insertAsSibling is true', async () => {
-            const appEmbed = new AppEmbed(getRootEl(), {
-                frameParams: {
-                    width: '100%',
-                    height: '100%',
-                },
-                insertAsSibling: true,
-            });
-            await appEmbed.render();
-            expect(getIFrameEl()).toBeTruthy();
-            appEmbed.destroy();
-            expect(getIFrameEl()).toBeFalsy();
-        });
-
-        it("Should remove the error message on destroy if it's present", async () => {
-            jest.spyOn(baseInstance, 'getAuthPromise').mockResolvedValueOnce(false);
-            const appEmbed = new AppEmbed(getRootEl(), {
-                frameParams: {
-                    width: '100%',
-                    height: '100%',
-                },
-                insertAsSibling: true,
-            });
-            await appEmbed.render();
-            expect(getRootEl().nextElementSibling.innerHTML).toContain('Not logged in');
-            appEmbed.destroy();
-            expect(getRootEl().nextElementSibling.innerHTML).toBe('');
-        });
-    });
-
     describe('validate getThoughtSpotPostUrlParams', () => {
         const { location } = window;
 
@@ -3456,4 +3412,172 @@ describe('Unit test case for ts embed', () => {
             triggerSpy.mockReset();
         });
     });
+
+    describe('When destroyed', () => {
+        it('should remove the iframe', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+            });
+            await appEmbed.render();
+            expect(getIFrameEl()).toBeTruthy();
+            appEmbed.destroy();
+            expect(getIFrameEl()).toBeFalsy();
+        });
+
+        it('should remove the iframe when insertAsSibling is true', async () => {
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+                insertAsSibling: true,
+            });
+            await appEmbed.render();
+            expect(getIFrameEl()).toBeTruthy();
+            appEmbed.destroy();
+            expect(getIFrameEl()).toBeFalsy();
+        });
+
+        it("Should remove the error message on destroy if it's present", async () => {
+            jest.spyOn(baseInstance, 'getAuthPromise').mockResolvedValueOnce(false);
+            const appEmbed = new AppEmbed(getRootEl(), {
+                frameParams: {
+                    width: '100%',
+                    height: '100%',
+                },
+                insertAsSibling: true,
+            });
+            await appEmbed.render();
+            expect(getRootEl().nextElementSibling.innerHTML).toContain('Not logged in');
+            appEmbed.destroy();
+            expect(getRootEl().nextElementSibling.innerHTML).toBe('');
+        });
+
+        describe('with waitForCleanupOnDestroy configuration', () => {
+            let originalEmbedConfig: any;
+
+            beforeEach(() => {
+                originalEmbedConfig = embedConfig.getEmbedConfig();
+            });
+
+            afterEach(() => {
+                embedConfig.setEmbedConfig(originalEmbedConfig);
+            });
+
+            it('should trigger DestroyEmbed event immediately when waitForCleanupOnDestroy is false', async () => {
+                embedConfig.setEmbedConfig({
+                    ...originalEmbedConfig,
+                    waitForCleanupOnDestroy: false,
+                });
+
+                const appEmbed = new AppEmbed(getRootEl(), {
+                    frameParams: {
+                        width: '100%',
+                        height: '100%',
+                    },
+                });
+                await appEmbed.render();
+
+                const triggerSpy = jest.spyOn(appEmbed, 'trigger').mockResolvedValue(null);
+                const removeChildSpy = jest.spyOn(Node.prototype, 'removeChild').mockImplementation(() => getRootEl());
+
+                appEmbed.destroy();
+
+                expect(triggerSpy).toHaveBeenCalledWith(HostEvent.DestroyEmbed);
+                expect(removeChildSpy).toHaveBeenCalled();
+            });
+
+            it('should trigger DestroyEmbed event and wait for cleanup when waitForCleanupOnDestroy is true', async () => {
+                embedConfig.setEmbedConfig({
+                    ...originalEmbedConfig,
+                    waitForCleanupOnDestroy: true,
+                    cleanupTimeout: 1000,
+                });
+
+                const appEmbed = new AppEmbed(getRootEl(), {
+                    frameParams: {
+                        width: '100%',
+                        height: '100%',
+                    },
+                });
+                await appEmbed.render();
+
+                const triggerSpy = jest.spyOn(appEmbed, 'trigger').mockResolvedValue(null);
+                const removeChildSpy = jest.spyOn(Node.prototype, 'removeChild').mockImplementation(() => getRootEl());
+
+                appEmbed.destroy();
+
+                // Should be called immediately when waitForCleanupOnDestroy is true
+                expect(triggerSpy).toHaveBeenCalledWith(HostEvent.DestroyEmbed);
+                
+                // Wait for the timeout to complete
+                await new Promise(resolve => setTimeout(resolve, 1100));
+
+                expect(removeChildSpy).toHaveBeenCalled();
+            });
+
+            it('should handle Promise.race with successful cleanup completion', async () => {
+                embedConfig.setEmbedConfig({
+                    ...originalEmbedConfig,
+                    waitForCleanupOnDestroy: true,
+                    cleanupTimeout: 2000,
+                });
+
+                const appEmbed = new AppEmbed(getRootEl(), {
+                    frameParams: {
+                        width: '100%',
+                        height: '100%',
+                    },
+                });
+                await appEmbed.render();
+
+                // Mock trigger to resolve quickly (before timeout)
+                const triggerSpy = jest.spyOn(appEmbed, 'trigger').mockImplementation(() => 
+                    new Promise(resolve => setTimeout(() => resolve(null), 100))
+                );
+                const removeChildSpy = jest.spyOn(Node.prototype, 'removeChild').mockImplementation(() => getRootEl());
+
+                appEmbed.destroy();
+
+                // Wait for the trigger to complete
+                await new Promise(resolve => setTimeout(resolve, 200));
+
+                expect(triggerSpy).toHaveBeenCalledWith(HostEvent.DestroyEmbed);
+                expect(removeChildSpy).toHaveBeenCalled();
+            });
+
+            it('should handle Promise.race with timeout when cleanup takes too long', async () => {
+                embedConfig.setEmbedConfig({
+                    ...originalEmbedConfig,
+                    waitForCleanupOnDestroy: true,
+                    cleanupTimeout: 100,
+                });
+
+                const appEmbed = new AppEmbed(getRootEl(), {
+                    frameParams: {
+                        width: '100%',
+                        height: '100%',
+                    },
+                });
+                await appEmbed.render();
+
+                // Mock trigger to take longer than timeout
+                const triggerSpy = jest.spyOn(appEmbed, 'trigger').mockImplementation(() => 
+                    new Promise(resolve => setTimeout(() => resolve(null), 500))
+                );
+                const removeChildSpy = jest.spyOn(Node.prototype, 'removeChild').mockImplementation(() => getRootEl());
+
+                appEmbed.destroy();
+
+                // Wait for the timeout to complete
+                await new Promise(resolve => setTimeout(resolve, 200));
+
+                expect(triggerSpy).toHaveBeenCalledWith(HostEvent.DestroyEmbed);
+                expect(removeChildSpy).toHaveBeenCalled();
+            });
+        });
+    });
 });

src/embed/ts-embed.ts

@@ -1396,8 +1396,21 @@ export class TsEmbed {
     public destroy(): void {
         try {
             this.removeFullscreenChangeHandler();
-            this.insertedDomEl?.parentNode.removeChild(this.insertedDomEl);
             this.unsubscribeToEvents();
+            if (!getEmbedConfig().waitForCleanupOnDestroy) {
+                this.trigger(HostEvent.DestroyEmbed)
+                this.insertedDomEl?.parentNode?.removeChild(this.insertedDomEl);
+            } else {
+                const cleanupTimeout = getEmbedConfig().cleanupTimeout;
+                Promise.race([
+                    this.trigger(HostEvent.DestroyEmbed),
+                    new Promise((resolve) => setTimeout(resolve, cleanupTimeout)),
+                ]).then(() => {
+                    this.insertedDomEl?.parentNode?.removeChild(this.insertedDomEl);
+                }).catch((e) => {
+                    logger.log('Error destroying TS Embed', e);
+                });
+            }
         } catch (e) {
             logger.log('Error destroying TS Embed', e);
         }

src/types.ts

@@ -692,6 +692,19 @@ export interface EmbedConfig {
      * ```
      */
     customActions?: CustomAction[];
+
+    /**
+     * Wait for the cleanup to be completed before destroying the embed.
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
+     * @default false
+     */
+    waitForCleanupOnDestroy?: boolean;
+    /**
+     * The timeout for the cleanup to be completed before destroying the embed.
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
+     * @default 5000
+     */
+    cleanupTimeout?: number;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
@@ -4247,6 +4260,15 @@ export enum HostEvent {
      * ```
      */
     UpdateEmbedParams = 'updateEmbedParams',
+    /**
+     * Triggered when the embed is needed to be destroyed. This is used to clean up any embed related resources internally.
+     * @example
+     * ```js
+     * liveboardEmbed.trigger(HostEvent.DestroyEmbed);
+     * ```
+     * @version SDK: 1.41.0 | ThoughtSpot: 10.12.0.cl
+     */
+    DestroyEmbed = 'EmbedDestroyed',
 }
 
 /**