@thoughtspot/visual-embed-sdk 1.20.0-alpha.2 → 1.20.0-prerender.0

package/src/embed/app.ts

@@ -11,11 +11,7 @@
 
 import { getFilterQuery, getQueryParamString } from '../utils';
 import {
-    Param,
-    RuntimeFilter,
-    DOMSelector,
-    HostEvent,
-    ViewConfig,
+    Param, RuntimeFilter, DOMSelector, HostEvent, ViewConfig,
 } from '../types';
 import { V1Embed } from './ts-embed';
 
@@ -56,7 +52,8 @@ export enum Page {
 
 /**
  * The view configuration for full app embedding.
- * @Category App Embed
+ *
+ * @group Embed components
  */
 export interface AppViewConfig extends ViewConfig {
     /**
@@ -81,8 +78,9 @@ export interface AppViewConfig extends ViewConfig {
      */
     pageId?: Page;
     /**
-     * This puts a filter tag on the application. All metadata lists in the application, such as
-     * Liveboards and answers, would be filtered by this tag.
+     * This puts a filter tag on the application. All metadata lists in the
+     * application, such as Liveboards and answers, would be filtered by this
+     * tag.
      */
     tag?: string;
     /**
@@ -92,12 +90,14 @@ export interface AppViewConfig extends ViewConfig {
     /**
      * Render liveboards using the new v2 rendering mode
      * This is a transient flag which is primarily meant for internal use
+     *
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1-sw
      * @hidden
      */
     liveboardV2?: boolean;
     /**
      * If set to true, the Search Assist feature is enabled.
+     *
      * @version SDK: 1.13.0 | ThoughtSpot: 8.5.0.cl, 8.8.1-sw
      */
     enableSearchAssist?: boolean;
@@ -105,7 +105,8 @@ export interface AppViewConfig extends ViewConfig {
 
 /**
  * Embeds full ThoughtSpot experience in a host application.
- * @Category App Embed
+ *
+ * @group Embed components
  */
 export class AppEmbed extends V1Embed {
     protected viewConfig: AppViewConfig;
@@ -119,9 +120,22 @@ export class AppEmbed extends V1Embed {
      * Constructs a map of parameters to be passed on to the
      * embedded Liveboard or visualization.
      */
-    private getEmbedParams() {
-        const params = this.getBaseQueryParams();
-        const { tag, hideObjects, liveboardV2 } = this.viewConfig;
+    protected getEmbedParams() {
+        const {
+            tag,
+            hideObjects,
+            liveboardV2,
+            showPrimaryNavbar,
+            disableProfileAndHelp,
+            enableSearchAssist,
+        } = this.viewConfig;
+
+        let params = {};
+        params[Param.EmbedApp] = true;
+        params[Param.PrimaryNavHidden] = !showPrimaryNavbar;
+        params[Param.HideProfleAndHelp] = !!disableProfileAndHelp;
+
+        params = this.getBaseQueryParams(params);
 
         if (tag) {
             params[Param.Tag] = tag;
@@ -133,6 +147,10 @@ export class AppEmbed extends V1Embed {
             params[Param.LiveboardV2Enabled] = liveboardV2;
         }
 
+        if (enableSearchAssist !== undefined) {
+            params[Param.EnableSearchAssist] = enableSearchAssist;
+        }
+
         const queryParams = getQueryParamString(params, true);
 
         return queryParams;
@@ -140,21 +158,13 @@ export class AppEmbed extends V1Embed {
 
     /**
      * Constructs the URL of the ThoughtSpot app page to be rendered.
+     *
      * @param pageId The ID of the page to be embedded.
      */
-    private getIFrameSrc(pageId: string, runtimeFilters: RuntimeFilter[]) {
-        const filterQuery = getFilterQuery(runtimeFilters || []);
-        const queryParams = this.getEmbedParams();
-        const queryString = [filterQuery, queryParams]
-            .filter(Boolean)
-            .join('&');
-        let url = `${this.getV1EmbedBasePath(
-            queryString,
-            this.viewConfig.showPrimaryNavbar,
-            this.viewConfig.disableProfileAndHelp,
-            true,
-            this.viewConfig.enableSearchAssist,
-        )}/${pageId}`;
+    private getIFrameSrc() {
+        const { pageId, path } = this.viewConfig;
+        const pageRoute = this.formatPath(path) || this.getPageRoute(pageId);
+        let url = `${this.getRootIframeSrc()}/${pageRoute}`;
 
         const tsPostHashParams = this.getThoughtSpotPostUrlParams();
         url = `${url}${tsPostHashParams}`;
@@ -164,6 +174,7 @@ export class AppEmbed extends V1Embed {
 
     /**
      * Gets the ThoughtSpot route of the page for a particular page ID.
+     *
      * @param pageId The identifier for a page in the ThoughtSpot app.
      */
     private getPageRoute(pageId: Page) {
@@ -188,6 +199,7 @@ export class AppEmbed extends V1Embed {
 
     /**
      * Formats the path provided by the user.
+     *
      * @param path The URL path.
      * @returns The URL path that the embedded app understands.
      */
@@ -206,10 +218,13 @@ export class AppEmbed extends V1Embed {
 
     /**
      * Navigate to particular page for app embed. eg:answers/pinboards/home
-     * This is used for embedding answers, pinboards, visualizations and full application only.
+     * This is used for embedding answers, pinboards, visualizations and full application
+     * only.
+     *
      * @param path string | number The string, set to iframe src and navigate to new page
      * eg: appEmbed.navigateToPage('pinboards')
-     * When used with `noReload` this can also be a number like 1/-1 to go forward/back.
+     * When used with `noReload` (default: true) this can also be a number
+     * like 1/-1 to go forward/back.
      * @param noReload boolean Trigger the navigation without reloading the page
      * @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl, 8.4.1-sw
      */
@@ -222,31 +237,28 @@ export class AppEmbed extends V1Embed {
             this.trigger(HostEvent.Navigate, path);
         } else {
             if (typeof path !== 'string') {
-                console.warn(
-                    'Path can only by a string when triggered without noReload',
-                );
+                console.warn('Path can only by a string when triggered without noReload');
                 return;
             }
             const iframeSrc = this.iFrame.src;
             const embedPath = '#/embed';
             const currentPath = iframeSrc.includes(embedPath) ? embedPath : '#';
-            this.iFrame.src = `${
-                iframeSrc.split(currentPath)[0]
-            }${currentPath}/${path.replace(/^\/?#?\//, '')}`;
+            this.iFrame.src = `${iframeSrc.split(currentPath)[0]}${currentPath}/${path.replace(
+                /^\/?#?\//,
+                '',
+            )}`;
         }
     }
 
     /**
      * Renders the embedded application pages in the ThoughtSpot app.
+     *
      * @param renderOptions An object containing the page ID
      * to be embedded.
      */
     public render(): AppEmbed {
         super.render();
-
-        const { pageId, runtimeFilters, path } = this.viewConfig;
-        const pageRoute = this.formatPath(path) || this.getPageRoute(pageId);
-        const src = this.getIFrameSrc(pageRoute, runtimeFilters);
+        const src = this.getIFrameSrc();
         this.renderV1Embed(src);
 
         return this;

package/src/embed/base.spec.ts

@@ -20,7 +20,7 @@ describe('Base TS Embed', () => {
         authEE = index.init({
             thoughtSpotHost,
             authType: index.AuthType.None,
-        });
+        }) as EventEmitter;
     });
 
     beforeEach(() => {
@@ -62,9 +62,7 @@ describe('Base TS Embed', () => {
             callPrefetch: true,
         });
         expect(getAllIframeEl().length).toBe(1);
-        const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>(
-            '.prefetchIframe',
-        );
+        const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>('.prefetchIframe');
         expect(prefetchIframe.length).toBe(1);
         const firstIframe = <HTMLIFrameElement>prefetchIframe[0];
         expect(firstIframe.src).toBe(url);
@@ -79,9 +77,7 @@ describe('Base TS Embed', () => {
             index.PrefetchFeatures.LiveboardEmbed,
         ]);
         expect(getAllIframeEl().length).toBe(2);
-        const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>(
-            '.prefetchIframe',
-        );
+        const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>('.prefetchIframe');
         expect(prefetchIframe.length).toBe(2);
         const firstIframe = <HTMLIFrameElement>prefetchIframe[0];
         expect(firstIframe.src).toBe(searchUrl);
@@ -93,9 +89,7 @@ describe('Base TS Embed', () => {
         const url = '';
         index.prefetch(url);
         expect(getAllIframeEl().length).toBe(0);
-        const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>(
-            '.prefetchIframe',
-        );
+        const prefetchIframe = document.querySelectorAll<HTMLIFrameElement>('.prefetchIframe');
         expect(prefetchIframe.length).toBe(0);
     });
 
@@ -148,9 +142,9 @@ describe('Base TS Embed', () => {
         });
 
         authEmitter.on(auth.AuthStatus.FAILURE, failureCallback);
-        authEmitter.on(auth.AuthStatus.SDK_SUCCESS, (reason) => {
+        authEmitter.on(auth.AuthStatus.SDK_SUCCESS, (...args) => {
             expect(failureCallback).not.toBeCalled();
-            expect(reason).toBe(undefined);
+            expect(args.length).toBe(0);
             done();
         });
     });

package/src/embed/base.ts

@@ -16,11 +16,13 @@ import {
     logout as _logout,
     AuthFailureType,
     AuthStatus,
+    AuthEvent,
     notifyAuthFailure,
     notifyAuthSDKSuccess,
     notifyAuthSuccess,
     notifyLogout,
     setAuthEE,
+    AuthEventEmitter,
 } from '../auth';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 
@@ -32,16 +34,19 @@ const CONFIG_DEFAULTS: Partial<EmbedConfig> = {
 };
 
 export let authPromise: Promise<boolean>;
-
+/**
+ * Gets the configuration embed was initialized with.
+ *
+ * @returns {@link EmbedConfig} The configuration embed was initialized with.
+ * @version SDK: 1.19.0 | ThoughtSpot: *
+ * @group Global methods
+ */
 export const getEmbedConfig = (): EmbedConfig => config;
 
 export const getAuthPromise = (): Promise<boolean> => authPromise;
 
 export {
-    notifyAuthFailure,
-    notifyAuthSDKSuccess,
-    notifyAuthSuccess,
-    notifyLogout,
+    notifyAuthFailure, notifyAuthSDKSuccess, notifyAuthSuccess, notifyLogout,
 };
 
 /**
@@ -72,15 +77,16 @@ const hostUrlToFeatureUrl = {
 };
 
 /**
- * Prefetches static resources from the specified URL. Web browsers can then cache the prefetched resources and serve them from the user's local disk to provide faster access to your app.
+ * Prefetches static resources from the specified URL. Web browsers can then cache the
+ * prefetched resources and serve them from the user's local disk to provide faster access
+ * to your app.
+ *
  * @param url The URL provided for prefetch
  * @param prefetchFeatures Specify features which needs to be prefetched.
  * @version SDK: 1.4.0 | ThoughtSpot: ts7.sep.cl, 7.2.1
+ * @group Global methods
  */
-export const prefetch = (
-    url?: string,
-    prefetchFeatures?: PrefetchFeatures[],
-): void => {
+export const prefetch = (url?: string, prefetchFeatures?: PrefetchFeatures[]): void => {
     if (url === '') {
         // eslint-disable-next-line no-console
         console.warn('The prefetch method does not have a valid URL');
@@ -88,21 +94,25 @@ export const prefetch = (
         const features = prefetchFeatures || [PrefetchFeatures.FullApp];
         let hostUrl = url || config.thoughtSpotHost;
         hostUrl = hostUrl[hostUrl.length - 1] === '/' ? hostUrl : `${hostUrl}/`;
-        uniq(
-            features.map((feature) => hostUrlToFeatureUrl[feature](hostUrl)),
-        ).forEach((prefetchUrl, index) => {
-            const iFrame = document.createElement('iframe');
-            iFrame.src = prefetchUrl;
-            iFrame.style.width = '0';
-            iFrame.style.height = '0';
-            iFrame.style.border = '0';
-            iFrame.classList.add('prefetchIframe');
-            iFrame.classList.add(`prefetchIframeNum-${index}`);
-            document.body.appendChild(iFrame);
-        });
+        uniq(features.map((feature) => hostUrlToFeatureUrl[feature](hostUrl))).forEach(
+            (prefetchUrl, index) => {
+                const iFrame = document.createElement('iframe');
+                iFrame.src = prefetchUrl;
+                iFrame.style.width = '0';
+                iFrame.style.height = '0';
+                iFrame.style.border = '0';
+                iFrame.classList.add('prefetchIframe');
+                iFrame.classList.add(`prefetchIframeNum-${index}`);
+                document.body.appendChild(iFrame);
+            },
+        );
     }
 };
 
+/**
+ *
+ * @param embedConfig
+ */
 function sanity(embedConfig: EmbedConfig) {
     if (embedConfig.thoughtSpotHost === undefined) {
         throw new Error('ThoughtSpot host not provided');
@@ -112,23 +122,19 @@ function sanity(embedConfig: EmbedConfig) {
             throw new Error('Username not provided with Trusted auth');
         }
 
-        if (
-            !embedConfig.authEndpoint &&
-            typeof embedConfig.getAuthToken !== 'function'
-        ) {
-            throw new Error(
-                'Trusted auth should provide either authEndpoint or getAuthToken',
-            );
+        if (!embedConfig.authEndpoint && typeof embedConfig.getAuthToken !== 'function') {
+            throw new Error('Trusted auth should provide either authEndpoint or getAuthToken');
         }
     }
 }
 
+/**
+ *
+ * @param embedConfig
+ */
 function backwardCompat(embedConfig: EmbedConfig): EmbedConfig {
     const newConfig = { ...embedConfig };
-    if (
-        embedConfig.noRedirect !== undefined &&
-        embedConfig.inPopup === undefined
-    ) {
+    if (embedConfig.noRedirect !== undefined && embedConfig.inPopup === undefined) {
         newConfig.inPopup = embedConfig.noRedirect;
     }
     return newConfig;
@@ -137,14 +143,23 @@ function backwardCompat(embedConfig: EmbedConfig): EmbedConfig {
 /**
  * Initializes the Visual Embed SDK globally and perform
  * authentication if applicable.
+ *
  * @param embedConfig The configuration object containing ThoughtSpot host,
  * authentication mechanism and so on.
- * example: authStatus = init(config);
- * authStatus.on(AuthStatus.FAILURE, (reason) => { // do something here });
- * @returns event emitter which emits events on authentication success, failure and logout. See {@link AuthStatus}
+ * @example
+ * ```js
+ *   const authStatus = init({
+ *     thoughtSpotHost: 'https://my.thoughtspot.cloud',
+ *     authType: AuthType.None,
+ *   });
+ *   authStatus.on(AuthStatus.FAILURE, (reason) => { // do something here });
+ * ```
+ * @returns {@link AuthEventEmitter} event emitter which emits events on authentication success,
+ *      failure and logout. See {@link AuthStatus}
  * @version SDK: 1.0.0 | ThoughtSpot ts7.april.cl, 7.2.1
+ * @group Authentication / Init
  */
-export const init = (embedConfig: EmbedConfig): EventEmitter => {
+export const init = (embedConfig: EmbedConfig): AuthEventEmitter => {
     sanity(embedConfig);
     config = {
         ...CONFIG_DEFAULTS,
@@ -152,46 +167,45 @@ export const init = (embedConfig: EmbedConfig): EventEmitter => {
         thoughtSpotHost: getThoughtSpotHost(embedConfig),
     };
     config = backwardCompat(config);
-    const authEE = new EventEmitter();
+    const authEE = new EventEmitter<AuthStatus | AuthEvent>();
     setAuthEE(authEE);
     handleAuth();
 
     uploadMixpanelEvent(MIXPANEL_EVENT.VISUAL_SDK_CALLED_INIT, {
         authType: config.authType,
         host: config.thoughtSpotHost,
-        usedCustomizationSheet:
-            embedConfig.customizations?.style?.customCSSUrl != null,
-        usedCustomizationVariables:
-            embedConfig.customizations?.style?.customCSS?.variables != null,
+        usedCustomizationSheet: embedConfig.customizations?.style?.customCSSUrl != null,
+        usedCustomizationVariables: embedConfig.customizations?.style?.customCSS?.variables != null,
         usedCustomizationRules:
-            embedConfig.customizations?.style?.customCSS?.rules_UNSTABLE !=
-            null,
-        usedCustomizationStrings: !!embedConfig.customizations?.content
-            ?.strings,
-        usedCustomizationIconSprite: !!embedConfig.customizations
-            ?.iconSpriteUrl,
+            embedConfig.customizations?.style?.customCSS?.rules_UNSTABLE != null,
+        usedCustomizationStrings: !!embedConfig.customizations?.content?.strings,
+        usedCustomizationIconSprite: !!embedConfig.customizations?.iconSpriteUrl,
     });
 
     if (config.callPrefetch) {
         prefetch(config.thoughtSpotHost);
     }
-    return authEE;
+    return authEE as AuthEventEmitter;
 };
 
+/**
+ *
+ */
 export function disableAutoLogin(): void {
     config.autoLogin = false;
 }
 
 /**
- * Logs out from ThoughtSpot. This also sets the autoLogin flag to false, to prevent
- * the SDK from automatically logging in again.
+ * Logs out from ThoughtSpot. This also sets the autoLogin flag to false, to
+ * prevent the SDK from automatically logging in again.
  *
- * You can call the `init` method again to re login, if autoLogin is set to true in this
- * second call it will be honored.
+ * You can call the `init` method again to re login, if autoLogin is set to
+ * true in this second call it will be honored.
  *
  * @param doNotDisableAutoLogin This flag when passed will not disable autoLogin
  * @returns Promise which resolves when logout completes.
  * @version SDK: 1.10.1 | ThoughtSpot: 8.2.0.cl, 8.4.1-sw
+ * @group Global methods
  */
 export const logout = (doNotDisableAutoLogin = false): Promise<boolean> => {
     if (!doNotDisableAutoLogin) {
@@ -206,12 +220,12 @@ export const logout = (doNotDisableAutoLogin = false): Promise<boolean> => {
 let renderQueue: Promise<any> = Promise.resolve();
 
 /**
- * Renders functions in a queue, resolves to next function only after the callback next is called
+ * Renders functions in a queue, resolves to next function only after the callback next
+ * is called
+ *
  * @param fn The function being registered
  */
-export const renderInQueue = (
-    fn: (next?: (val?: any) => void) => Promise<any>,
-): Promise<any> => {
+export const renderInQueue = (fn: (next?: (val?: any) => void) => Promise<any>): Promise<any> => {
     const { queueMultiRenders = false } = config;
     if (queueMultiRenders) {
         renderQueue = renderQueue.then(() => new Promise((res) => fn(res)));
@@ -222,6 +236,9 @@ export const renderInQueue = (
 };
 
 // For testing purposes only
+/**
+ *
+ */
 export function reset(): void {
     config = {} as any;
     setAuthEE(null);

package/src/embed/embed.spec.ts

@@ -1,4 +1,6 @@
-import { init, AuthType, SearchEmbed, EmbedEvent } from '../index';
+import {
+    init, AuthType, SearchEmbed, EmbedEvent,
+} from '../index';
 import {
     EVENT_WAIT_TIME,
     executeAfterWait,
@@ -59,8 +61,7 @@ describe('test view config', () => {
         await executeAfterWait(() => {
             expect(onErrorSpy).toHaveBeenCalledWith(
                 {
-                    error:
-                        'Please register event handlers before calling render',
+                    error: 'Please register event handlers before calling render',
                 },
                 expect.any(Function),
             );
@@ -84,9 +85,7 @@ describe('Custom CSS Url', () => {
         embed.render();
         executeAfterWait(() => {
             const iframe = getIFrameEl();
-            expect(iframe.src.includes('customCssUrl=bla.com/foo.css')).toBe(
-                true,
-            );
+            expect(iframe.src.includes('customCssUrl=bla.com/foo.css')).toBe(true);
             done();
         });
     });