@thoughtspot/visual-embed-sdk 1.33.12 → 1.35.1

package/src/native/commonUtils.ts

@@ -0,0 +1,183 @@
+import { getCustomisationsMobileEmbed, getQueryParamString } from '../utils';
+import { Param } from '../types';
+import pkgInfo from '../../package.json';
+import { WebViewConfig } from './types';
+import { logger } from '../utils/logger';
+
+/**
+ * This method constructs the webview URL with given config.
+ * @param config To get the webviewURL pass the necessary config options.
+ * host: string;
+ * authType: AuthType;
+ * liveboardId: string;
+ * getAuthToken: () => Promise<string>;
+ * These four are necessary arguments.
+ * @returns The Promise for WebView URL.
+ */
+export const getWebViewUrl = async (config: WebViewConfig): Promise<string> => {
+    if (typeof config.getAuthToken !== 'function') {
+        throw new Error('`getAuthToken` must be a function that returns a Promise.');
+    }
+
+    const authToken = await config.getAuthToken();
+    if (!authToken) {
+        throw new Error('Failed to fetch initial authentication token.');
+    }
+
+    const hostAppUrl = encodeURIComponent(
+        config.host.includes('localhost')
+      || config.host.includes('127.0.0.1')
+      || config.host.includes('10.0.2.2')
+            ? 'local-host'
+            : config.host,
+    );
+
+    const queryParams = {
+        [Param.EmbedApp]: true,
+        [Param.HostAppUrl]: hostAppUrl,
+        [Param.Version]: pkgInfo.version,
+        [Param.AuthType]: config.authType,
+        [Param.livedBoardEmbed]: true,
+        [Param.EnableFlipTooltipToContextMenu]: true,
+        [Param.ContextMenuTrigger]: true,
+    };
+
+    const queryString = getQueryParamString(queryParams);
+    const webViewUrl = `${config.host}/embed?${queryString}#/embed/viz/${encodeURIComponent(config.liveboardId)}`;
+    return webViewUrl;
+};
+
+/**
+ * setting up message handling for the message replies to TS instances.
+ * @param config The webview config
+ * @param event The message event from the WebView.
+ * @param WebViewRef Ref to use and inject javascript
+ */
+export const setupWebViewMessageHandler = async (
+    config: WebViewConfig,
+    event: any,
+    webViewRef: any,
+) => {
+    const message = JSON.parse(event.nativeEvent.data);
+
+    const injectJavaScript = (codeSnip: string) => {
+        if (webViewRef?.current) {
+            webViewRef.current.injectJavaScript(codeSnip);
+        } else {
+            logger.error('Reference for Webview not found!!');
+        }
+    };
+
+    const defaultHandleMessage = async () => {
+        switch (message.type) {
+            case 'appInit': {
+                try {
+                    const authToken = await config.getAuthToken();
+                    const initPayload = {
+                        type: 'appInit',
+                        data: {
+                            host: config.host,
+                            authToken,
+                            customisations: getCustomisationsMobileEmbed(config),
+                        },
+                    };
+                    injectJavaScript(jsCodeToHandleInteractionsForContextMenu);
+                    injectJavaScript(`window.postMessage(${JSON.stringify(initPayload)}, '*');`);
+                } catch (error) {
+                    console.error('Error handling appInit:', error);
+                }
+                break;
+            }
+
+            case 'ThoughtspotAuthExpired': {
+                try {
+                    const newAuthToken = await config.getAuthToken();
+                    if (newAuthToken) {
+                        const authExpirePayload = {
+                            type: 'ThoughtspotAuthExpired',
+                            data: { authToken: newAuthToken },
+                        };
+                        injectJavaScript(`window.postMessage(${JSON.stringify(authExpirePayload)}, '*');`);
+                    }
+                } catch (error) {
+                    console.error('Error refreshing token on expiry:', error);
+                }
+                break;
+            }
+
+            case 'ThoughtspotAuthFailure': {
+                try {
+                    const newAuthToken = await config.getAuthToken();
+                    if (newAuthToken) {
+                        const authFailurePayload = {
+                            type: 'ThoughtspotAuthFailure',
+                            data: { authToken: newAuthToken },
+                        };
+                        injectJavaScript(`window.postMessage(${JSON.stringify(authFailurePayload)}, '*');`);
+                    }
+                } catch (error) {
+                    console.error('Error refreshing token on failure:', error);
+                }
+                break;
+            }
+
+            default:
+                console.warn('Unhandled message type:', message.type);
+        }
+    };
+
+    if (config.handleMessage) {
+        await config.handleMessage(event);
+    } else {
+        await defaultHandleMessage();
+    }
+};
+
+const jsCodeToHandleInteractionsForContextMenu = `
+// Disabling auofocus
+document.querySelectorAll('input[autofocus], textarea[autofocus]').forEach(el => el.removeAttribute('autofocus'));
+
+// adding meta tag to keep fixed viewport scalign
+const meta = document.createElement('meta');
+meta.name = 'viewport';
+meta.content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no';
+document.head.appendChild(meta);
+
+// input focus problem. -> we can just force it inside our view. 
+document.addEventListener('focusin', (event) => {
+  const target = event.target;
+
+  if (
+    target.tagName === 'INPUT' || 
+    target.tagName === 'TEXTAREA'
+  ) {
+    const rect = target.getBoundingClientRect();
+    if (
+      rect.top < 0 || 
+      rect.bottom > window.innerHeight || 
+      rect.left < 0 || 
+      rect.right > window.innerWidth
+    ) {
+      event.preventDefault();
+      // target.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'end' });
+      const horizontalPadding = 10;
+
+      let scrollX = 0;
+
+      if (rect.left < horizontalPadding) {
+        scrollX = rect.left - horizontalPadding;
+      }  
+      if (rect.right > window.innerWidth - horizontalPadding) {
+        scrollX = rect.right - window.innerWidth + horizontalPadding;
+      }
+      const scrollY = rect.top - (window.innerHeight / 2 - rect.height / 2);
+
+      window.scrollBy({
+        top: scrollY,
+        left: scrollX,
+        behavior: 'smooth',
+      })
+    }
+  }
+});
+`;

package/src/native/index.ts

@@ -0,0 +1 @@
+export { getWebViewUrl, setupWebViewMessageHandler } from './commonUtils';

package/src/native/types.ts

@@ -0,0 +1,10 @@
+import { AuthType, CustomisationsInterface } from 'src/types';
+
+export interface WebViewConfig {
+  host: string;
+  authType: AuthType;
+  liveboardId: string;
+  getAuthToken: () => Promise<string>;
+  handleMessage?: (event: any) => void;
+  customizations?: CustomisationsInterface;
+}

package/src/types.ts

@@ -2133,12 +2133,12 @@ export enum EmbedEvent {
      */
     FilterChanged = 'filterChanged',
     /**
-     *  Emitted when a user clicks the **Go** button on the Search page
+     *  Emitted when a user clicks the **Go** button on the sage embed
      * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      */
     SageEmbedQuery = 'sageEmbedQuery',
     /**
-     * Emitted when a user selects a data source.
+     * Emitted when a user selects a data source on the sage embed
      * @version SDK : 1.26.0 | Thoughtspot: 9.7.0.cl, 9.8.0.sw
      */
     SageWorksheetUpdated = 'sageWorksheetUpdated',
@@ -4379,7 +4379,7 @@ export enum Action {
      * ```js
      * const disabledActions = [Action.DisableChipReorder]
      * ```
-     * @version SDK: 1.35.0 | Thoughtspot: 10.5.0.cl
+     * @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
      */
     DisableChipReorder = 'disableChipReorder',
 
@@ -4389,7 +4389,7 @@ export enum Action {
      * ```js
      * hiddenAction: [Action.ChangeFilterVisibilityInTab]
      * ```
-     *  @version SDK: 1.35.0 | Thoughtspot: 10.5.0.cl
+     *  @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
      */
     ChangeFilterVisibilityInTab = 'changeFilterVisibilityInTab',
 

package/src/utils/processData.spec.ts

@@ -188,4 +188,46 @@ describe('Unit test for process data', () => {
         expect(base.notifyAuthFailure).not.toBeCalled();
         expect(el.innerHTML).not.toBe('Hello');
     });
+
+    test('should return the event if type is unknown (default branch)', () => {
+        const unknownEvent = { type: 'SomeRandomEvent' };
+        const result = processDataInstance.processEventData(
+            'SomeRandomEvent' as any, 
+            unknownEvent,
+            thoughtSpotHost,
+            null,
+        );
+        expect(result).toBe(unknownEvent);
+    });
+
+    test('processAuthInit uses e.payload.userGUID if e.data.userGUID is missing', () => {
+        const e = {
+            type: EmbedEvent.AuthInit,
+            payload: { userGUID: 'payload-guid' },
+            data: {},
+        };
+        jest.spyOn(base, 'notifyAuthSuccess').mockImplementation(() => {});
+        const result = processDataInstance.processEventData(e.type, e, '', null);
+        expect(result.data.userGUID).toBe('payload-guid');
+        expect(base.notifyAuthSuccess).toHaveBeenCalled();
+    });
+
+    test('NoCookieAccess with suppressErrorAlerts=true does not alert', () => {
+        const e = { type: EmbedEvent.NoCookieAccess };
+        const el: any = {};
+        jest.spyOn(embedConfigInstance, 'getEmbedConfig').mockReturnValue({
+            loginFailedMessage: 'Cookie blocked!',
+            suppressNoCookieAccessAlert: false,
+            suppressErrorAlerts: true,
+            ignoreNoCookieAccess: false,
+        });
+        jest.spyOn(window, 'alert').mockImplementation(() => {});
+        jest.spyOn(base, 'notifyAuthFailure');
+    
+        const result = processDataInstance.processEventData(e.type, e, '', el);
+        expect(result).toEqual({ type: e.type });
+        expect(window.alert).not.toHaveBeenCalled();
+        expect(el.innerHTML).toBe('Cookie blocked!');
+        expect(base.notifyAuthFailure).toHaveBeenCalled();
+    });
 });

package/src/utils.spec.ts

@@ -11,8 +11,10 @@ import {
     removeStyleProperties,
     setStyleProperties,
     isUndefined,
+    getCustomisationsMobileEmbed,
 } from './utils';
-import { RuntimeFilterOp } from './types';
+import { CustomisationsInterface, RuntimeFilterOp } from './types';
+import { WebViewConfig } from './native/types';
 
 describe('unit test for utils', () => {
     test('getQueryParamString', () => {
@@ -273,3 +275,147 @@ describe('unit test for utils', () => {
         expect(isUndefined({})).toBe(false);
     });
 });
+
+describe('getCustomisationsMobileEmbed', () => {
+    it('should return empty style and content if no customizations are defined', () => {
+      const embedConfig: Partial<WebViewConfig> = {};
+
+      const result = getCustomisationsMobileEmbed(embedConfig as WebViewConfig);
+      expect(result).toEqual({
+        style: {
+          customCSS: {},
+          customCSSUrl: undefined,
+        },
+        content: {},
+      });
+    });
+
+    it('should use embedConfig.customizations when present', () => {
+      const embedConfig: Partial<WebViewConfig> = {
+        customizations: {
+          style: {
+            customCSS: { 
+                rules_UNSTABLE: {
+                    '.title': { fontSize: '20px' },
+                }
+             },
+            customCSSUrl: 'http://example.com/styles.css',
+          },
+          content: {
+            headerText: 'Hello World',
+          },
+        },
+      };
+
+      const result = getCustomisationsMobileEmbed(embedConfig as WebViewConfig);
+      expect(result).toEqual({
+        style: {
+          customCSS: { 
+            rules_UNSTABLE: {
+                '.title': { fontSize: '20px' },
+            }
+           },
+          customCSSUrl: 'http://example.com/styles.css',
+        },
+        content: {
+          headerText: 'Hello World',
+        },
+      });
+    });
+
+    it('should fallback to embedConfig.customisations if customizations is undefined', () => {
+      const embedConfig: Partial<WebViewConfig> = {
+        customizations: {
+          style: {
+            backgroundColor: 'green',
+            customCSS: { '.anotherClass': { color: 'white' } },
+          },
+          content: {
+            footerText: 'Footer content',
+          },
+        } as CustomisationsInterface,
+      };
+
+      const result = getCustomisationsMobileEmbed(embedConfig as WebViewConfig);
+      expect(result).toEqual({
+        style: {
+          backgroundColor: 'green',
+          customCSS: { '.anotherClass': { color: 'white' } },
+          customCSSUrl: undefined,
+        },
+        content: {
+          footerText: 'Footer content',
+        },
+      });
+    });
+
+    it('should merge style objects correctly (customCSS stays as an object)', () => {
+      const embedConfig: Partial<WebViewConfig> = {
+        customizations: {
+          style: {
+            customCSS: {
+                rules_UNSTABLE: {
+                    '.title': { fontSize: '20px' },
+                }
+            },
+            customCSSUrl: 'http://example.com/old-styles.css',
+          },
+        },
+      };
+
+      const result = getCustomisationsMobileEmbed(embedConfig as WebViewConfig);
+      expect(result).toEqual({
+        style: {
+          customCSS: {
+            rules_UNSTABLE: {
+                '.title': { fontSize: '20px' },
+            }
+          },
+          customCSSUrl: 'http://example.com/old-styles.css',
+        },
+        content: {},
+      });
+    });
+
+    it('should handle missing style or content keys gracefully', () => {
+      const embedConfig: Partial<WebViewConfig> = {
+        customizations: {
+          style: undefined, // style is missing
+          content: undefined, // content is missing
+        },
+      };
+
+      const result = getCustomisationsMobileEmbed(embedConfig as WebViewConfig);
+      expect(result).toEqual({
+        style: {
+          customCSS: {},
+          customCSSUrl: undefined,
+        },
+        content: {},
+      });
+    });
+
+    it('should override customCSSUrl with embedConfig.customizations.style.customCSSUrl if defined', () => {
+      const embedConfig: Partial<WebViewConfig> = {
+        customizations: {
+          style: {
+            customCSSUrl: 'http://example.com/custom.css',
+            customCSS: { 
+                rules_UNSTABLE: {
+                    '.title': { fontSize: '20px' },
+                }
+             },
+          },
+        },
+      };
+
+      const result = getCustomisationsMobileEmbed(embedConfig as WebViewConfig);
+      expect(result.style?.customCSSUrl).toBe('http://example.com/custom.css');
+      expect(result.style?.customCSS).toEqual({ 
+        rules_UNSTABLE: {
+            '.title': { fontSize: '20px' },
+        }
+       });
+    });
+  });
+

package/src/utils.ts

@@ -16,6 +16,7 @@ import {
     ViewConfig,
     RuntimeParameter,
 } from './types';
+import { WebViewConfig } from './native/types';
 
 /**
  * Construct a runtime filters query string from the given filters.
@@ -73,7 +74,7 @@ export const getRuntimeParameters = (runtimeParameters: RuntimeParameter[]): str
  * parameter to the ThoughtSpot app.
  * @param value Any parameter value
  */
-const serializeParam = (value: any) => {
+export const serializeParam = (value: any) => {
     // do not serialize primitive types
     if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
         return value;
@@ -88,7 +89,7 @@ const serializeParam = (value: any) => {
  * in case of any other type, we directly return the value.
  * @param value
  */
-const paramToString = (value: any) => (Array.isArray(value) ? value.join(',') : value);
+export const paramToString = (value: any) => (Array.isArray(value) ? value.join(',') : value);
 
 /**
  * Return a query param string composed from the given params object
@@ -242,6 +243,28 @@ export const getCustomisations = (
     return customizations;
 };
 
+export const getCustomisationsMobileEmbed = (
+    embedConfig: WebViewConfig,
+): CustomisationsInterface => {
+    const customizationsFromEmbedConfig = embedConfig.customizations
+        || ((embedConfig as any).customisations as CustomisationsInterface);
+
+    const customizations: CustomisationsInterface = {
+        style: {
+            ...customizationsFromEmbedConfig?.style,
+            customCSS: {
+                ...customizationsFromEmbedConfig?.style?.customCSS,
+            },
+            customCSSUrl:
+                customizationsFromEmbedConfig?.style?.customCSSUrl,
+        },
+        content: {
+            ...customizationsFromEmbedConfig?.content,
+        },
+    };
+    return customizations;
+};
+
 export const getRuntimeFilters = (runtimefilters: any) => getFilterQuery(runtimefilters || []);
 
 /**