@thoughtspot/visual-embed-sdk 1.41.0-pre-render-1 → 1.41.1

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

@@ -1,4 +1,3 @@
-
 import { resetValueFromWindow } from '../utils';
 import { ERROR_MESSAGE } from '../errors';
 import { resetCachedAuthToken } from '../authToken';
@@ -27,6 +26,8 @@ import {
     RuntimeParameter,
     Param,
     ContextMenuTriggerOptions,
+    CustomActionTarget,
+    CustomActionsPosition,
 } from '../types';
 import {
     executeAfterWait,
@@ -346,6 +347,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
@@ -382,6 +384,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
@@ -424,6 +427,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [HomepageModule.MyLibrary, HomepageModule.Learning],
                         hiddenListColumns: [],
+                        customActions: [],
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
                     },
@@ -462,6 +466,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
                     },
@@ -503,6 +508,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         reorderedHomepageModules:
                             [HomepageModule.MyLibrary, HomepageModule.Watchlist],
                         customVariablesForThirdPartyTools,
@@ -547,6 +553,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
@@ -592,6 +599,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
@@ -636,6 +644,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
@@ -681,6 +690,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
@@ -725,6 +735,7 @@ describe('Unit test case for ts embed', () => {
                             [HomeLeftNavItem.Home, HomeLeftNavItem.MonitorSubscription],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools,
                     },
@@ -893,6 +904,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools: {},
@@ -977,6 +989,7 @@ describe('Unit test case for ts embed', () => {
                         hiddenHomeLeftNavItems: [],
                         hiddenHomepageModules: [],
                         hiddenListColumns: [],
+                        customActions: [],
                         hostConfig: undefined,
                         reorderedHomepageModules: [],
                         customVariablesForThirdPartyTools: {},
@@ -1011,6 +1024,127 @@ describe('Unit test case for ts embed', () => {
         });
     });
 
+    describe('getDefaultAppInitData with CustomActionsValidationResult', () => {
+        beforeEach(() => {
+            jest.spyOn(authInstance, 'doCookielessTokenAuth').mockResolvedValueOnce(true);
+            jest.spyOn(authService, 'verifyTokenService').mockResolvedValue(true);
+            init({
+                thoughtSpotHost: 'tshost',
+                authType: AuthType.TrustedAuthTokenCookieless,
+                getAuthToken: () => Promise.resolve('test_auth_token1'),
+            });
+        });
+
+        afterEach(() => {
+            baseInstance.reset();
+            jest.clearAllMocks();
+        });
+
+        test('should handle valid custom actions and sort them by name in getDefaultAppInitData', async () => {
+            const mockEmbedEventPayload = {
+                type: EmbedEvent.APP_INIT,
+                data: {},
+            };
+            
+            // Create a SearchEmbed with valid custom actions to test
+            // CustomActionsValidationResult
+            const searchEmbed = new SearchEmbed(getRootEl(), {
+                ...defaultViewConfig,
+                customActions: [
+                    {
+                        id: 'action1',
+                        name: 'Valid Action',
+                        target: CustomActionTarget.LIVEBOARD,
+                        position: CustomActionsPosition.PRIMARY,
+                        metadataIds: { liveboardIds: ['lb123'] }
+                    },
+                    {
+                        id: 'action2',
+                        name: 'Another Valid Action',
+                        target: CustomActionTarget.VIZ,
+                        position: CustomActionsPosition.MENU,
+                        metadataIds: { vizIds: ['viz456'] }
+                    }
+                ]
+            });
+            
+            searchEmbed.render();
+            const mockPort: any = {
+                postMessage: jest.fn(),
+            };
+
+            await executeAfterWait(() => {
+                const iframe = getIFrameEl();
+                postMessageToParent(iframe.contentWindow, mockEmbedEventPayload, mockPort);
+            });
+
+            await executeAfterWait(() => {
+                expect(mockPort.postMessage).toHaveBeenCalledWith({
+                    type: EmbedEvent.APP_INIT,
+                    data: {
+                        customisations: {
+                            content: {},
+                            style: {
+                                customCSS: {},
+                                customCSSUrl: undefined,
+                            },
+                        },
+                        authToken: 'test_auth_token1',
+                        runtimeFilterParams: null,
+                        runtimeParameterParams: null,
+                        hiddenHomeLeftNavItems: [],
+                        hiddenHomepageModules: [],
+                        hiddenListColumns: [],
+                        customActions: [
+                            {
+                                id: 'action2',
+                                name: 'Another Valid Action',
+                                target: CustomActionTarget.VIZ,
+                                position: CustomActionsPosition.MENU,
+                                metadataIds: { vizIds: ['viz456'] }
+                            },
+                            {
+                                id: 'action1',
+                                name: 'Valid Action',
+                                target: CustomActionTarget.LIVEBOARD,
+                                position: CustomActionsPosition.PRIMARY,
+                                metadataIds: { liveboardIds: ['lb123'] }
+                            }
+                        ], // Actions should be sorted by name
+                        hostConfig: undefined,
+                        reorderedHomepageModules: [],
+                        customVariablesForThirdPartyTools: {},
+                    },
+                });
+                
+                // Verify that CustomActionsValidationResult structure is
+                // correct
+                const appInitData = mockPort.postMessage.mock.calls[0][0].data;
+                expect(appInitData.customActions).toHaveLength(2);
+                expect(appInitData.customActions).toEqual(
+                    expect.arrayContaining([
+                        expect.objectContaining({
+                            id: 'action1',
+                            name: 'Valid Action',
+                            target: CustomActionTarget.LIVEBOARD,
+                            position: CustomActionsPosition.PRIMARY
+                        }),
+                        expect.objectContaining({
+                            id: 'action2',
+                            name: 'Another Valid Action',
+                            target: CustomActionTarget.VIZ,
+                            position: CustomActionsPosition.MENU
+                        })
+                    ])
+                );
+                
+                // Verify actions are sorted by name (alphabetically)
+                expect(appInitData.customActions[0].name).toBe('Another Valid Action');
+                expect(appInitData.customActions[1].name).toBe('Valid Action');
+            });
+        });
+    });
+
     describe('Token fetch fails in cookieless authentication authType', () => {
         beforeEach(() => {
             jest.spyOn(authInstance, 'doCookielessTokenAuth').mockResolvedValueOnce(true);
@@ -2354,7 +2488,7 @@ describe('Unit test case for ts embed', () => {
         });
 
         afterAll((): void => {
-            window.location = location as any;
+            window.location = location;
         });
 
         it('get url params for TS', () => {

package/src/embed/ts-embed.ts

@@ -35,6 +35,7 @@ import {
     removeStyleProperties,
     isUndefined,
 } from '../utils';
+import { getCustomActions } from '../utils/custom-actions';
 import {
     getThoughtSpotHost,
     URL_MAX_LENGTH,
@@ -198,11 +199,11 @@ export class TsEmbed {
         uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
             ...viewConfig,
         });
-        const embedConfig = getEmbedConfig();
-        this.embedConfig = embedConfig;
-    
         this.hostEventClient = new HostEventClient(this.iFrame);
+
         this.isReadyForRenderPromise = getInitPromise().then(async () => {
+            const embedConfig = getEmbedConfig();
+            this.embedConfig = embedConfig;
             if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
                 this.embedConfig.authTriggerContainer = domSelector;
             }
@@ -380,6 +381,16 @@ export class TsEmbed {
 
     protected async getDefaultAppInitData(): Promise<DefaultAppInitData> {
         const authToken = await this.getAuthTokenForCookielessInit();
+        const customActionsResult = getCustomActions([
+            ...(this.viewConfig.customActions || []),
+            ...(this.embedConfig.customActions || [])
+        ]);
+        if (customActionsResult.errors.length > 0) {
+            this.handleError({
+                type: 'CUSTOM_ACTION_VALIDATION',
+                message: customActionsResult.errors,
+            });
+        }
         return {
             customisations: getCustomisations(this.embedConfig, this.viewConfig),
             authToken,
@@ -398,6 +409,7 @@ export class TsEmbed {
             customVariablesForThirdPartyTools:
                 this.embedConfig.customVariablesForThirdPartyTools || {},
             hiddenListColumns: this.viewConfig.hiddenListColumns || [],
+            customActions: customActionsResult.actions,
         };
     }
 
@@ -482,10 +494,10 @@ export class TsEmbed {
         this.on(EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
         this.on(EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
         this.on(EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
-
-        const embedListenerReadyHandler = this.createEmbedContainerHandler(EmbedEvent.EmbedListenerReady);
+        
+        const embedListenerReadyHandler = this.createEmbedContainerHandler(EmbedEvent.EmbedListenerReady);  
         this.on(EmbedEvent.EmbedListenerReady, embedListenerReadyHandler, { start: false }, true);
-
+        
         const authInitHandler = this.createEmbedContainerHandler(EmbedEvent.AuthInit);
         this.on(EmbedEvent.AuthInit, authInitHandler, { start: false }, true);
     };
@@ -508,12 +520,6 @@ export class TsEmbed {
         return `${basePath}#`;
     }
 
-    protected getUpdateEmbedParamsObject() {
-        let queryParams = this.getEmbedParamsObject();
-        queryParams = { ...this.viewConfig, ...queryParams };
-        return queryParams;
-    }
-
     /**
      * Common query params set for all the embed modes.
      * @param queryParams
@@ -696,15 +702,10 @@ export class TsEmbed {
     }
 
     protected getEmbedParams() {
-        const queryParams = this.getEmbedParamsObject();
+        const queryParams = this.getBaseQueryParams();
         return getQueryParamString(queryParams);
     }
 
-    protected getEmbedParamsObject() {
-        const params = this.getBaseQueryParams();
-        return params;
-    }
-
     protected getRootIframeSrc() {
         const query = this.getEmbedParams();
         return this.getEmbedBasePath(query);
@@ -1139,12 +1140,12 @@ export class TsEmbed {
         }
     }
 
-     /**
+    /**
      * @hidden
      * Internal state to track if the embed container is loaded.
      * This is used to trigger events after the embed container is loaded.
      */
-     public isEmbedContainerLoaded = false;
+    public isEmbedContainerLoaded = false;
 
     /**
      * @hidden
@@ -1190,7 +1191,7 @@ export class TsEmbed {
         } else {
             logger.debug('pushing callback to embedContainerReadyCallbacks', callback);
             this.embedContainerReadyCallbacks.push(callback);
-        }
+          }
     }
 
     protected createEmbedContainerHandler = (source: EmbedEvent.AuthInit | EmbedEvent.EmbedListenerReady) => () => {
@@ -1278,13 +1279,19 @@ export class TsEmbed {
      * Creates the preRender shell
      * @param showPreRenderByDefault - Show the preRender after render, hidden by default
      */
-    public async preRender(showPreRenderByDefault = false): Promise<TsEmbed> {        
+    public async preRender(showPreRenderByDefault = false, replaceExistingPreRender = false): Promise<TsEmbed> {
         if (!this.viewConfig.preRenderId) {
             logger.error(ERROR_MESSAGE.PRERENDER_ID_MISSING);
             return this;
         }
         this.isPreRendered = true;
         this.showPreRenderByDefault = showPreRenderByDefault;
+        
+        const isAlreadyRendered = this.connectPreRendered();
+        if (isAlreadyRendered && !replaceExistingPreRender) {
+            return this;
+        }
+
         return this.handleRenderForPrerender();
     }
 
@@ -1406,14 +1413,8 @@ export class TsEmbed {
                 return this.preRender(true);
             }
             this.validatePreRenderViewConfig(this.viewConfig);
-            logger.debug('triggering UpdateEmbedParams', this.viewConfig);
-            this.executeAfterEmbedContainerLoaded(() => {
-                this.trigger(HostEvent.UpdateEmbedParams, this.getUpdateEmbedParamsObject());
-            });
         }
 
-        this.beforePrerenderVisible();
-
         if (this.el) {
             this.syncPreRenderStyle();
             if (!this.viewConfig.doNotTrackPreRenderSize) {
@@ -1431,6 +1432,8 @@ export class TsEmbed {
             }
         }
 
+        this.beforePrerenderVisible();
+
         removeStyleProperties(this.preRenderWrapper, ['z-index', 'opacity', 'pointer-events']);
 
         this.subscribeToEvents();

package/src/errors.ts

@@ -10,6 +10,7 @@ export const ERROR_MESSAGE = {
     SDK_NOT_INITIALIZED: 'SDK not initialized',
     SESSION_INFO_FAILED: 'Failed to get session information',
     INVALID_TOKEN_ERROR: 'Received invalid token from getAuthToken callback or authToken endpoint.',
+    INVALID_TOKEN_TYPE_ERROR: 'Expected getAuthToken to return a string, but received a {invalidType}.',
     MIXPANEL_TOKEN_NOT_FOUND: 'Mixpanel token not found in session info',
     PRERENDER_ID_MISSING: 'PreRender ID is required for preRender',
     SYNC_STYLE_CALLED_BEFORE_RENDER: 'PreRender should be called before using syncPreRenderStyle',
@@ -19,3 +20,14 @@ export const ERROR_MESSAGE = {
     RENDER_CALLED_BEFORE_INIT: 'Looks like render was called before calling init, the render won\'t start until init is called.\nFor more info check\n1. https://developers.thoughtspot.com/docs/Function_init#_init\n2.https://developers.thoughtspot.com/docs/getting-started#initSdk',
     SPOTTER_AGENT_NOT_INITIALIZED: 'SpotterAgent not initialized',
 };
+
+export const CUSTOM_ACTIONS_ERROR_MESSAGE = {
+    INVALID_ACTION_OBJECT: 'Custom Action Validation Error: Invalid action object provided',
+    MISSING_REQUIRED_FIELDS: (id: string, missingFields: string[]) => `Custom Action Validation Error for '${id}': Missing required fields: ${missingFields.join(', ')}`,
+    UNSUPPORTED_TARGET: (id: string, targetType: string) => `Custom Action Validation Error for '${id}': Target type '${targetType}' is not supported`,
+    INVALID_POSITION: (position: string, targetType: string, supportedPositions: string) => `Position '${position}' is not supported for ${targetType.toLowerCase()}-level custom actions. Supported positions: ${supportedPositions}`,
+    INVALID_METADATA_IDS: (targetType: string, invalidIds: string[], supportedIds: string) => `Invalid metadata IDs for ${targetType.toLowerCase()}-level custom actions: ${invalidIds.join(', ')}. Supported metadata IDs: ${supportedIds}`,
+    INVALID_DATA_MODEL_IDS: (targetType: string, invalidIds: string[], supportedIds: string) => `Invalid data model IDs for ${targetType.toLowerCase()}-level custom actions: ${invalidIds.join(', ')}. Supported data model IDs: ${supportedIds}`,
+    INVALID_FIELDS: (targetType: string, invalidFields: string[], supportedFields: string) => `Invalid fields for ${targetType.toLowerCase()}-level custom actions: ${invalidFields.join(', ')}. Supported fields: ${supportedFields}`,
+    DUPLICATE_IDS: (id: string, duplicateNames: string[], keptName: string) => `Duplicate custom action ID '${id}' found. Actions with names '${duplicateNames.join("', '")}' will be ignored. Keeping '${keptName}'.`,
+};

package/src/index.ts

@@ -62,6 +62,8 @@ import {
     VizPoint,
     CustomActionPayload,
     ListPageColumns,
+    CustomActionsPosition,
+    CustomActionTarget,
 } from './types';
 import { CustomCssVariables } from './css-variables';
 import { SageEmbed, SageViewConfig } from './embed/sage';
@@ -148,6 +150,8 @@ export {
     UIPassthroughEvent,
     ListPageColumns,
     DataPanelCustomColumnGroupsAccordionState,
+    CustomActionsPosition,
+    CustomActionTarget,
 };
 
 export { resetCachedAuthToken } from './authToken';

package/src/react/index.spec.tsx

@@ -56,7 +56,7 @@ describe('React Components', () => {
                 ),
             ).toBe(true);
             expect(getIFrameSrc(container)).toBe(
-                `http://${thoughtSpotHost}/?embedApp=true&hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&preAuthCache=true&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=false&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=true&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
+                `http://${thoughtSpotHost}/?embedApp=true&hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=None&blockNonEmbedFullAppAccess=true&hideAction=[%22${Action.ReportError}%22,%22editACopy%22,%22saveAsView%22,%22updateTSL%22,%22editTSL%22,%22onDeleteAnswer%22]&preAuthCache=true&overrideConsoleLogs=true&clientLogLevel=ERROR&enableDataPanelV2=true&dataSourceMode=hide&useLastSelectedSources=false&isSearchEmbed=true&collapseSearchBarInitially=true&enableCustomColumnGroups=false&dataPanelCustomGroupsAccordionInitialState=EXPAND_ALL#/embed/answer`,
             );
         });
 

package/src/react/index.tsx

@@ -94,10 +94,12 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
             };
         }, [viewConfig, listeners]);
 
+        const preRenderStyles = isPreRenderedComponent ? { display: 'none' } : {};
+
         return viewConfig.insertAsSibling ? (
-            <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute' }}></span>
+            <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute', ...preRenderStyles }}></span>
         ) : (
-            <div data-testid="tsEmbed" ref={ref} style={style} className={`ts-embed-container ${className}`}></div>
+            <div data-testid="tsEmbed" ref={ref} style={{ ...style, ...preRenderStyles }} className={`ts-embed-container ${className}`}></div>
         );
     },
 );
@@ -600,4 +602,5 @@ export {
     LogLevel,
     getSessionInfo,
     ListPageColumns,
+    CustomActionsPosition,
 } from '../index';