@thoughtspot/visual-embed-sdk 1.38.0 → 1.38.1

package/src/utils/graphql/answerService/answerService.ts

@@ -27,19 +27,20 @@ export interface UnderlyingDataPoint {
 
 /**
  * AnswerService provides a simple way to work with ThoughtSpot Answers.
- * 
+ *
  * This service allows you to interact with ThoughtSpot Answers programmatically,
  * making it easy to customize visualizations, filter data, and extract insights
  * directly from your application.
- * 
+ *
  * You can use this service to:
+ *
  * - Add or remove columns from Answers (`addColumns`, `removeColumns`, `addColumnsByName`)
  * - Apply filters to Answers (`addFilter`)
  * - Get data from Answers in different formats (JSON, CSV, PNG) (`fetchData`, `fetchCSVBlob`, `fetchPNGBlob`)
  * - Get data for specific points in visualizations (`getUnderlyingDataForPoint`)
  * - Run custom queries (`executeQuery`)
- * - Add visualizations to liveboards (`addDisplayedVizToLiveboard`)
- * 
+ * - Add visualizations to Liveboards (`addDisplayedVizToLiveboard`)
+ *
  * @example
  * ```js
  * // Get the answer service

package/src/utils/processData.spec.ts

@@ -6,6 +6,8 @@ import * as base from '../embed/base';
 import * as embedConfigInstance from '../embed/embedConfig';
 import { EmbedEvent, AuthType } from '../types';
 import * as sessionInfoService from './sessionInfoService';
+import * as utilsModule from '../utils';
+import { logger } from './logger';
 
 describe('Unit test for process data', () => {
     beforeAll(() => {
@@ -251,4 +253,30 @@ describe('Unit test for process data', () => {
         expect(base.notifyAuthFailure).toBeCalledWith(auth.AuthFailureType.IDLE_SESSION_TIMEOUT);
         expect(el.innerHTML).toBe('Hello');
     });
+
+    test('should handle ExitPresentMode when disableFullscreenPresentation is false (enabled)', () => {
+        const mockConfig = {
+            disableFullscreenPresentation: false,
+        };
+        
+        const mockHandleExitPresentMode = jest.spyOn(utilsModule, 'handleExitPresentMode').mockImplementation(() => {});
+        
+        jest.spyOn(embedConfigInstance, 'getEmbedConfig').mockReturnValue(mockConfig);
+
+        const processedData = {
+            type: EmbedEvent.ExitPresentMode,
+            data: {},
+        };
+
+        processDataInstance.processEventData(
+            EmbedEvent.ExitPresentMode,
+            processedData,
+            thoughtSpotHost,
+            null,
+        );
+
+        expect(mockHandleExitPresentMode).toHaveBeenCalled();
+        
+        mockHandleExitPresentMode.mockReset();
+    });
 });

package/src/utils/processData.ts

@@ -10,6 +10,21 @@ import { AuthType, CustomActionPayload, EmbedEvent } from '../types';
 import { AnswerService } from './graphql/answerService/answerService';
 import { resetCachedAuthToken } from '../authToken';
 import { ERROR_MESSAGE } from '../errors';
+import { logger } from '../utils/logger';
+import { handleExitPresentMode } from '../utils';
+
+/**
+ * Process the ExitPresentMode event and handle default fullscreen exit
+ * @param e - The event data
+ */
+function processExitPresentMode(e: any) {
+    const embedConfig = getEmbedConfig();
+    const disableFullscreenPresentation = embedConfig?.disableFullscreenPresentation ?? true;
+    
+    if (!disableFullscreenPresentation) {
+        handleExitPresentMode();
+    }
+}
 
 /**
  *
@@ -136,6 +151,8 @@ export function processEventData(
             return processAuthFailure(e, containerEl);
         case EmbedEvent.AuthLogout:
             return processAuthLogout(e, containerEl);
+        case EmbedEvent.ExitPresentMode:
+            return processExitPresentMode(e);
         default:
     }
     return e;

package/src/utils/processTrigger.spec.ts

@@ -1,6 +1,9 @@
 import * as _processTriggerInstance from './processTrigger';
 import { HostEvent } from '../types';
 import { messageChannelMock, mockMessageChannel } from '../test/test-utils';
+import { logger } from './logger';
+import * as utilsModule from '../utils';
+import * as embedConfigModule from '../embed/embedConfig';
 
 describe('Unit test for processTrigger', () => {
     const iFrame: any = {
@@ -8,6 +11,11 @@ describe('Unit test for processTrigger', () => {
             postMessage: jest.fn(),
         },
     };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     test('when hostevent is reload, reload function should be called with iFrame', async () => {
         jest.useFakeTimers();
         const iFrameElement = document.createElement('iframe');
@@ -86,4 +94,86 @@ describe('Unit test for processTrigger', () => {
         expect(messageChannelMock.port1.close).toBeCalled();
         await expect(triggerPromise).resolves.toBeInstanceOf(Error);
     });
+
+    describe('Present event with fullscreen presentation flag', () => {
+        let mockHandlePresentEvent: any;
+        let mockLoggerWarn: any;
+        let mockGetEmbedConfig: any;
+
+        beforeEach(() => {
+            mockHandlePresentEvent = jest.spyOn(utilsModule, 'handlePresentEvent').mockImplementation(() => {});
+            mockLoggerWarn = jest.spyOn(logger, 'warn').mockImplementation(() => {});
+            mockGetEmbedConfig = jest.spyOn(embedConfigModule, 'getEmbedConfig').mockImplementation(() => ({}));
+        });
+
+        afterEach(() => {
+            mockHandlePresentEvent.mockReset();
+            mockLoggerWarn.mockReset();
+            mockGetEmbedConfig.mockReset();
+        });
+
+        test('should handle Present event when disableFullscreenPresentation is false (enabled)', () => {
+            const mockConfig = {
+                disableFullscreenPresentation: false,
+            };
+            mockGetEmbedConfig.mockReturnValue(mockConfig);
+
+            const messageType = HostEvent.Present;
+            const thoughtSpotHost = 'https://example.thoughtspot.com';
+            const data = {};
+
+            _processTriggerInstance.processTrigger(
+                iFrame,
+                messageType,
+                thoughtSpotHost,
+                data,
+            );
+
+            expect(mockHandlePresentEvent).toHaveBeenCalledWith(iFrame);
+        });
+
+        test('should warn and not handle Present event when disableFullscreenPresentation is true (disabled)', () => {
+            const mockConfig = {
+                disableFullscreenPresentation: true,
+            };
+            mockGetEmbedConfig.mockReturnValue(mockConfig);
+
+            const messageType = HostEvent.Present;
+            const thoughtSpotHost = 'https://example.thoughtspot.com';
+            const data = {};
+
+            _processTriggerInstance.processTrigger(
+                iFrame,
+                messageType,
+                thoughtSpotHost,
+                data,
+            );
+
+            expect(mockHandlePresentEvent).not.toHaveBeenCalled();
+            expect(mockLoggerWarn).toHaveBeenCalledWith(
+                'Fullscreen presentation mode is disabled. Set disableFullscreenPresentation: false to enable this feature.',
+            );
+        });
+
+        test('should default to disabled when disableFullscreenPresentation is not provided', () => {
+            const mockConfig = {};
+            mockGetEmbedConfig.mockReturnValue(mockConfig);
+
+            const messageType = HostEvent.Present;
+            const thoughtSpotHost = 'https://example.thoughtspot.com';
+            const data = {};
+
+            _processTriggerInstance.processTrigger(
+                iFrame,
+                messageType,
+                thoughtSpotHost,
+                data,
+            );
+
+            expect(mockHandlePresentEvent).not.toHaveBeenCalled();
+            expect(mockLoggerWarn).toHaveBeenCalledWith(
+                'Fullscreen presentation mode is disabled. Set disableFullscreenPresentation: false to enable this feature.',
+            );
+        });
+    });
 });

package/src/utils/processTrigger.ts

@@ -1,5 +1,8 @@
 import { ERROR_MESSAGE } from '../errors';
-import { HostEvent } from '../types';
+import { HostEvent, MessagePayload } from '../types';
+import { logger } from '../utils/logger';
+import { handlePresentEvent } from '../utils';
+import { getEmbedConfig } from '../embed/embedConfig';
 
 /**
  * Reloads the ThoughtSpot iframe.
@@ -51,6 +54,18 @@ export function processTrigger(
             reload(iFrame);
             return res(null);
         }
+        
+        if (messageType === HostEvent.Present) {
+            const embedConfig = getEmbedConfig();
+            const disableFullscreenPresentation = embedConfig?.disableFullscreenPresentation ?? true;
+            
+            if (!disableFullscreenPresentation) {
+                handlePresentEvent(iFrame);
+            } else {
+                logger.warn('Fullscreen presentation mode is disabled. Set disableFullscreenPresentation: false to enable this feature.');
+            }
+        }
+        
         const channel = new MessageChannel();
         channel.port1.onmessage = ({ data: responseData }) => {
             channel.port1.close();

package/src/utils.spec.ts

@@ -13,8 +13,19 @@ import {
     isUndefined,
     storeValueInWindow,
     getValueFromWindow,
+    handlePresentEvent,
+    handleExitPresentMode,
 } from './utils';
 import { RuntimeFilterOp } from './types';
+import { logger } from './utils/logger';
+
+// Mock logger
+jest.mock('./utils/logger', () => ({
+    logger: {
+        warn: jest.fn(),
+        error: jest.fn(),
+    },
+}));
 
 describe('unit test for utils', () => {
     test('getQueryParamString', () => {
@@ -294,3 +305,105 @@ describe('unit test for utils', () => {
         });
     });
 });
+
+describe('Fullscreen Utility Functions', () => {
+    let originalExitFullscreen: any;
+    let mockIframe: HTMLIFrameElement;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        
+        // Store and mock exitFullscreen
+        originalExitFullscreen = document.exitFullscreen;
+        document.exitFullscreen = jest.fn();
+
+        // Mock iframe
+        mockIframe = {
+            requestFullscreen: jest.fn(),
+        } as any;
+
+        // Mock not in fullscreen initially
+        Object.defineProperty(document, 'fullscreenElement', {
+            writable: true,
+            value: null,
+        });
+    });
+
+    afterEach(() => {
+        // Restore original method
+        document.exitFullscreen = originalExitFullscreen;
+    });
+
+    describe('handlePresentEvent', () => {
+        it('should enter fullscreen when iframe is provided', () => {
+            const mockPromise = Promise.resolve();
+            (mockIframe.requestFullscreen as jest.Mock).mockReturnValue(mockPromise);
+
+            handlePresentEvent(mockIframe);
+
+            expect(mockIframe.requestFullscreen).toHaveBeenCalled();
+            expect(logger.error).not.toHaveBeenCalled();
+        });
+
+        it('should log error when fullscreen API is not supported', () => {
+            delete (mockIframe as any).requestFullscreen;
+
+            handlePresentEvent(mockIframe);
+
+            expect(logger.error).toHaveBeenCalledWith('Fullscreen API is not supported by this browser.');
+        });
+
+        it('should not attempt fullscreen when already in fullscreen mode', () => {
+            Object.defineProperty(document, 'fullscreenElement', {
+                writable: true,
+                value: mockIframe,
+            });
+
+            handlePresentEvent(mockIframe);
+
+            expect(mockIframe.requestFullscreen).not.toHaveBeenCalled();
+            expect(logger.error).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('handleExitPresentMode', () => {
+        beforeEach(() => {
+            // Mock being in fullscreen
+            Object.defineProperty(document, 'fullscreenElement', {
+                writable: true,
+                value: document.createElement('iframe'),
+            });
+        });
+
+        it('should exit fullscreen when in fullscreen mode', () => {
+            const mockPromise = Promise.resolve();
+            (document.exitFullscreen as jest.Mock).mockReturnValue(mockPromise);
+
+            handleExitPresentMode();
+
+            expect(document.exitFullscreen).toHaveBeenCalled();
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+
+        it('should not attempt to exit when not in fullscreen mode', () => {
+            Object.defineProperty(document, 'fullscreenElement', {
+                writable: true,
+                value: null,
+            });
+
+            handleExitPresentMode();
+
+            expect(document.exitFullscreen).not.toHaveBeenCalled();
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+
+        it('should log warning when exit fullscreen API is not supported', () => {
+            // Mock being in fullscreen but no exit methods available
+            document.exitFullscreen = undefined as any;
+
+            handleExitPresentMode();
+
+            expect(logger.warn).toHaveBeenCalledWith('Exit fullscreen API is not supported by this browser.');
+        });
+    });
+});

package/src/utils.ts

@@ -13,9 +13,10 @@ import {
     RuntimeFilter,
     CustomisationsInterface,
     DOMSelector,
-    ViewConfig,
     RuntimeParameter,
+    AllEmbedViewConfig,
 } from './types';
+import { logger } from './utils/logger';
 
 /**
  * Construct a runtime filters query string from the given filters.
@@ -216,7 +217,7 @@ export const checkReleaseVersionInBeta = (
 
 export const getCustomisations = (
     embedConfig: EmbedConfig,
-    viewConfig: ViewConfig,
+    viewConfig: AllEmbedViewConfig,
 ): CustomisationsInterface => {
     const customizationsFromViewConfig = viewConfig.customizations;
     const customizationsFromEmbedConfig = embedConfig.customizations
@@ -387,3 +388,78 @@ export function resetValueFromWindow(key: string): boolean {
     }
     return false;
 }
+
+/**
+ * Check if the document is currently in fullscreen mode
+ */
+const isInFullscreen = (): boolean => {
+    return !!(
+        document.fullscreenElement ||
+        (document as any).webkitFullscreenElement ||
+        (document as any).mozFullScreenElement ||
+        (document as any).msFullscreenElement
+    );
+};
+
+/**
+ * Handle Present HostEvent by entering fullscreen mode
+ * @param iframe The iframe element to make fullscreen
+ */
+export const handlePresentEvent = async (iframe: HTMLIFrameElement): Promise<void> => {
+    if (isInFullscreen()) {
+        return; // Already in fullscreen
+    }
+
+    // Browser-specific methods to enter fullscreen mode
+    const fullscreenMethods = [
+        'requestFullscreen',      // Standard API
+        'webkitRequestFullscreen', // WebKit browsers
+        'mozRequestFullScreen',   // Firefox
+        'msRequestFullscreen'     // IE/Edge
+    ];
+
+    for (const method of fullscreenMethods) {
+        if (typeof (iframe as any)[method] === 'function') {
+            try {
+                const result = (iframe as any)[method]();
+                await Promise.resolve(result);
+                return;
+            } catch (error) {
+                logger.warn(`Failed to enter fullscreen using ${method}:`, error);
+            }
+        }
+    }
+
+    logger.error('Fullscreen API is not supported by this browser.');
+};
+
+/**
+ * Handle ExitPresentMode EmbedEvent by exiting fullscreen mode
+ */
+export const handleExitPresentMode = async (): Promise<void> => {
+    if (!isInFullscreen()) {
+        return; // Not in fullscreen
+    }
+
+    const exitFullscreenMethods = [
+        'exitFullscreen',        // Standard API
+        'webkitExitFullscreen',  // WebKit browsers
+        'mozCancelFullScreen',   // Firefox
+        'msExitFullscreen'       // IE/Edge
+    ];
+
+    // Try each method until one works
+    for (const method of exitFullscreenMethods) {
+        if (typeof (document as any)[method] === 'function') {
+            try {
+                const result = (document as any)[method]();
+                await Promise.resolve(result);
+                return;
+            } catch (error) {
+                logger.warn(`Failed to exit fullscreen using ${method}:`, error);
+            }
+        }
+    }
+
+    logger.warn('Exit fullscreen API is not supported by this browser.');
+};