@thoughtspot/visual-embed-sdk 1.33.0 → 1.33.1-dc.2

package/src/test/test-utils.ts

@@ -1,12 +1,16 @@
+import { has } from 'lodash';
 import { version } from '../../package.json';
 import { Action, AuthType } from '../types';
 
 /**
  Initialises fetch to the global object
  */
-global.fetch = jest.fn(() => Promise.resolve({
-    json: () => ({ mixpanelAccessToken: '' }),
-}));
+if (!(global.fetch as any).mockResponse) {
+    console.log('mocking fetch');
+    global.fetch = jest.fn(() => Promise.resolve({
+        json: () => ({ mixpanelAccessToken: '' }),
+    }));
+}
 
 export const defaultParamsWithoutHiddenActions = `hostAppUrl=local-host&viewPortHeight=768&viewPortWidth=1024&sdkVersion=${version}&authType=${AuthType.None}&blockNonEmbedFullAppAccess=true`;
 export const defaultParams = `&${defaultParamsWithoutHiddenActions}&hideAction=[%22${Action.ReportError}%22]`;
@@ -106,6 +110,27 @@ export const expectUrlMatchesWithParams = (source: string, target: string) => {
     const sourceParamsObj = Object.fromEntries(sourceUrl.searchParams);
     const targetParamsObj = Object.fromEntries(targetUrl.searchParams);
     expect(sourceParamsObj).toMatchObject(targetParamsObj);
+
+    const sourceHashParams = getHashQueryParams(sourceUrl.hash);
+    const targetHashParams = getHashQueryParams(targetUrl.hash);
+    expect(sourceHashParams).toMatchObject(targetHashParams);
+};
+
+export const expectUrlToHaveParamsWithValues = (
+    url: string, paramsWithValues: Record<string, any>,
+) => {
+    const urlObj = new URL(url);
+    const urlParams = Object.fromEntries(urlObj.searchParams);
+
+    const sourceHashParams = getHashQueryParams(urlObj.hash);
+    const sourceParams = {
+        ...urlParams, ...sourceHashParams,
+    };
+
+    Object.entries(paramsWithValues).forEach(([key, value]) => {
+        expect(has(sourceParams, key)).toBeTruthy();
+        expect(`${sourceParams[key]}`).toBe(`${value}`);
+    });
 };
 
 export const expectUrlMatch = (source: string, target: string) => {
@@ -123,3 +148,21 @@ export const createRootEleForEmbed = () => {
     rootEle.appendChild(tsEmbedDiv);
     document.body.appendChild(rootEle);
 };
+
+export const getHashQueryParams = (hash: string): any => {
+    const params = hash.split('?')[1];
+    const hashParams = new URLSearchParams(params);
+    return Object.fromEntries(hashParams);
+};
+
+export const mockSessionInfo = {
+    userGUID: '1234',
+    mixpanelToken: 'abc123',
+    isPublicUser: false,
+    sessionId: '6588e7d9-710c-453e-a7b4-535fb3a8cbb2',
+    genNo: 3,
+    acSession: {
+        sessionId: 'cb202c48-b14b-4466-8a70-899ea666d46q',
+        genNo: 5,
+    },
+};

package/src/types.ts

@@ -585,7 +585,6 @@ export interface EmbedConfig {
 
     /**
      * This flag is used to disable showing the login failure page in the embedded app.
-     *
      * @version SDK 1.32.3 | Thoughtspot: *
      */
     disableLoginFailurePage?: boolean;
@@ -1283,7 +1282,6 @@ export interface RuntimeParameter {
  * If you are using React components for embedding, you can register to any
  * events from the `EmbedEvent` list by using the `on<EventName>` convention.
  * For example,`onAlert`, `onCopyToClipboard` and so on.
- *
  *  @example
  * ```js
  * // ...
@@ -1300,7 +1298,6 @@ export interface RuntimeParameter {
  *     );
  * };
  * ```
- *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2175,7 +2172,6 @@ export enum EmbedEvent {
      *
      * Prerequisite: Set isOnBeforeGetVizDataInterceptEnabled : true
      * for this embed event to get emitted.
-     *
      * @param: payload
      * @param: responder
      * Contains elements that lets developers define whether ThoughtSpot
@@ -2186,9 +2182,7 @@ export enum EmbedEvent {
      *
      * error: Developers can customize the user facing message when execute is
      * set to false using the error parameter in responder
-     *
      * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
-     *
      * @example
      *```js
      * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
@@ -2275,7 +2269,6 @@ export enum EmbedEvent {
  *
  * You can also attach an Embed event to a Host event to trigger
  * a specific action as shown in this example:
- *
  * @example
  * ```js
  *  const EmbeddedComponent = () => {
@@ -2293,7 +2286,6 @@ export enum EmbedEvent {
  *      );
  *  }
  * ```
- *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2595,28 +2587,23 @@ export enum HostEvent {
     /**
      * Trigger the **Make a copy** action on a Liveboard,
      * visualization, or Answer page.
-     *
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.MakeACopy)
      * ```
-     *
      * @example
      * ```js
      * liveboardEmbed.trigger(HostEvent.MakeACopy, {
      * vizId: '730496d6-6903-4601-937e-2c691821af3c'})
      * ```
-     *
      * @example
      * ```js
      * vizEmbed.trigger(HostEvent.MakeACopy)
      * ```
-     *
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.MakeACopy)
      * ```
-     *
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
     MakeACopy = 'makeACopy',
@@ -2642,7 +2629,6 @@ export enum HostEvent {
     /**
      * Trigger the **Create alert** action on a KPI chart
      * in a Liveboard or saved Answer.
-     *
      * @param - an object with `vizId` as a key
      * @example
      * ```js
@@ -2650,7 +2636,6 @@ export enum HostEvent {
      *  vizId: '730496d6-6903-4601-937e-2c691821af3c'
      * })
      * ```
-     *
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.CreateMonitor)
@@ -2661,7 +2646,6 @@ export enum HostEvent {
     /**
      * Trigger the **Manage alerts** action on a KPI chart
      * in a visualization or saved Answer.
-     *
      * @param - an object with `vizId` as a key
      * @example
      * ```js
@@ -2669,12 +2653,10 @@ export enum HostEvent {
      *  vizId: '730496d6-6903-4601-937e-2c691821af3c'
      * })
      * ```
-     *
      * @example
      * ```js
      * searchEmbed.trigger(HostEvent.ManageMonitor)
      * ```
-     *
      * @example
      * ```js
      * vizEmbed.trigger(HostEvent.ManageMonitor)
@@ -3004,7 +2986,6 @@ export enum HostEvent {
      *        }
      *    });
      * ```
-     *
      * @example
      *
      * ```js
@@ -3086,7 +3067,6 @@ export enum HostEvent {
     /**
      * Get the answer session for a Search or
      * Liveboard visualization.
-     *
      * @example
      * ```js
      * const {session} = await embed.trigger(
@@ -3094,12 +3074,10 @@ export enum HostEvent {
      *      vizId: '123', // For Liveboard Visualization.
      *  })
      * ```
-     *
      * @example
      * ```js
      * const {session} = await embed.trigger( HostEvent.GetAnswerSession )
      * ```
-     *
      * @version SDK: 1.26.0 | Thoughtspot: 9.10.0.cl
      */
     GetAnswerSession = 'getAnswerSession',
@@ -3274,6 +3252,7 @@ export enum Param {
     ShowLiveboardVerifiedBadge = 'showLiveboardVerifiedBadge',
     ShowLiveboardReverifyBanner = 'showLiveboardReverifyBanner',
     LiveboardHeaderV2 = 'isLiveboardHeaderV2Enabled',
+    SpotterEnabled = 'isSpotterExperienceEnabled',
 }
 
 /**
@@ -3829,7 +3808,6 @@ export enum Action {
     /**
      * @deprecated
      * Reports errors
-     *
      * @example
      * ```js
      * disabledActions: [Action.ReportError]
@@ -4059,14 +4037,12 @@ export enum Action {
      * ```js
      * disabledActions: [Action.RequestVerification]
      * ```
-     *
      * @version SDK: 1.25.0 | Thoughtspot: 9.6.0.cl
      */
     RequestVerification = 'requestVerification',
     /**
      *
-     * Allows users to mark a Liveboard as verified.
-     *
+     *Allows users to mark a Liveboard as verified.
      * @example
      * ```js
      * disabledActions: [Action.MarkAsVerified]
@@ -4077,7 +4053,6 @@ export enum Action {
     /**
      * The **Add Tab** action on a Liveboard.
      * Allows adding a new tab to a Liveboard view.
-     *
      * @example
      * ```js
      * disabledActions: [Action.AddTab]
@@ -4087,8 +4062,7 @@ export enum Action {
     AddTab = 'addTab',
     /**
      *
-     * Initiates contextual change analysis on KPI charts.
-     *
+     *Initiates contextual change analysis on KPI charts.
      * @example
      * ```js
      * disabledActions: [Action.EnableContextualChangeAnalysis]
@@ -4102,7 +4076,6 @@ export enum Action {
      * ```js
      * disabledActions: [Action.ShowSageQuery]
      * ```
-     *
      * @version SDK: 1.26.0 | Thoughtspot: 9.7.0.cl
      */
     ShowSageQuery = 'showSageQuery',
@@ -4117,8 +4090,7 @@ export enum Action {
     EditSageAnswer = 'editSageAnswer',
     /**
      *
-     * This action allows users to send feedback on AI-generated Answers.
-     *
+     *This action allows users to send feedback on AI-generated Answers.
      * @example
      * ```js
      * disabledActions: [Action.SageAnswerFeedback]
@@ -4197,7 +4169,6 @@ export enum Action {
      * hiddenAction: [Action.CreateLiveboard]
      * disabledActions: [Action.CreateLiveboard]
      * ```
-     *
      * @version SDK: 1.32.0 | Thoughtspot: 10.1.0.cl
      */
     CreateLiveboard = 'createLiveboard',
@@ -4304,7 +4275,6 @@ export enum Action {
 
     /**
      * The **Manage Tags** action on Homepage Favourite Module.
-     *
      * @example
      * ```js
      * disabledActions: [Action.ManageTags]

package/src/utils/authService/authService.spec.ts

@@ -114,9 +114,16 @@ describe('Unit test for authService', () => {
         try {
             await fetchSessionInfoService(authVerificationUrl);
         } catch (e) {
-            expect(e.message).toContain('Failed to fetch session info');
+            //
         }
         expect(logger.error).toHaveBeenCalledWith('Failed to fetch http://localhost:3000/callosum/v1/session/info', 'error');
+
+        try {
+            await fetchBasicAuthService(thoughtSpotHost, username, password);
+        } catch (e) {
+            expect(e.message).toContain('Failed to fetch session info');
+        }
+        expect(logger.error).toHaveBeenCalledWith('Failure', 'error');
     });
 
     test('verifyTokenService if token api works', async () => {

package/src/utils/authService/tokenizedAuthService.ts

@@ -18,7 +18,6 @@ function tokenizedFailureLoggedFetch(url: string, options: RequestInit = {}): Pr
 
 /**
  * Fetches the session info from the ThoughtSpot server.
- *
  * @param thoughtspotHost
  * @returns {Promise<any>}
  * @example
@@ -52,7 +51,6 @@ export async function fetchLogoutService(thoughtSpotHost: string): Promise<any>
 
 /**
  * Is active service to check if the user is logged in.
- *
  * @param thoughtSpotHost
  * @version SDK: 1.28.4 | ThoughtSpot: *
  */

package/src/utils/global-styles.spec.ts

@@ -0,0 +1,20 @@
+import { getDocumentBody } from '../test/test-utils';
+import { addPreviewStylesIfNotPresent } from './global-styles';
+
+describe('addPreviewStylesIfNotPresent', () => {
+    afterEach(() => {
+        document.body.innerHTML = getDocumentBody();
+    });
+    it('should not add preview styles if present', () => {
+        document.body.innerHTML = '<div id="ts-preview-style">test</div>';
+        addPreviewStylesIfNotPresent();
+        const styleEl = document.getElementById('ts-preview-style');
+        expect(styleEl.innerHTML).toBe('test');
+    });
+
+    it('should add preview styles if not present', () => {
+        addPreviewStylesIfNotPresent();
+        const styleEl = document.getElementById('ts-preview-style');
+        expect(styleEl).not.toBeNull();
+    });
+});

package/src/utils/graphql/answerService/answer-queries.ts

@@ -104,6 +104,7 @@ export const getAnswer = `
                 }
                 visualizations {
                     ... on TableViz {
+                        id
                         columns {
                             column {
                                 id
@@ -115,6 +116,9 @@ export const getAnswer = `
                             }
                         }
                     }
+                    ... on ChartViz {
+                        id
+                    }
                 }
             }
         }
@@ -172,3 +176,23 @@ export const getSQLQuery = `
         }
     }
 `;
+
+export const getAnswerTML = `
+mutation GetUnsavedAnswerTML($session: BachSessionIdInput!, $exportDependencies: Boolean, $formatType:  EDocFormatType, $exportPermissions: Boolean, $exportFqn: Boolean) {
+  UnsavedAnswer_getTML(
+    session: $session
+    exportDependencies: $exportDependencies
+    formatType: $formatType
+    exportPermissions: $exportPermissions
+    exportFqn: $exportFqn
+  ) {
+    zipFile
+    object {
+      edoc
+      name
+      type
+      __typename
+    }
+    __typename
+  }
+}`;

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

@@ -473,4 +473,90 @@ describe('Answer service tests', () => {
         );
         expect(sql).toBe('SELECT * FROM table');
     });
+
+    test('Add displayed Viz should call the right API', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                Answer__addDisplayedViz: {
+                    id: {
+                        genNo: 2,
+                    },
+                },
+            },
+        }));
+        const answer = {
+            displayMode: 'CHART_MODE',
+            visualizations: [{
+                id: 'table1',
+                __typename: 'TableViz',
+            }, {
+                id: 'chart1',
+                __typename: 'ChartViz',
+            }],
+        };
+        const answerService = createAnswerService(answer);
+        await answerService.addDisplayedVizToLiveboard('lbId');
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=AddVizToLiveboard',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'AddVizToLiveboard',
+                    query: queries.addVizToLiveboard,
+                    variables: {
+                        session: defaultSession,
+                        liveboardId: 'lbId',
+                        vizId: 'chart1',
+                    },
+                }),
+            }),
+        );
+
+        answer.displayMode = 'TABLE_MODE';
+        const answerService2 = createAnswerService(answer);
+        await answerService2.addDisplayedVizToLiveboard('lbId');
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=AddVizToLiveboard',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'AddVizToLiveboard',
+                    query: queries.addVizToLiveboard,
+                    variables: {
+                        session: defaultSession,
+                        liveboardId: 'lbId',
+                        vizId: 'table1',
+                    },
+                }),
+            }),
+        );
+    });
+
+    test('GetTML should call the right API', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                UnsavedAnswer_getTML: {
+                    object: [{
+                        edoc: `answer: 
+                            id: bar`,
+                    }],
+                },
+            },
+        }));
+        const answerService = createAnswerService();
+        answerService.setTMLOverride({ name: 'name' });
+        const { answer } = await answerService.getTML();
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=GetUnsavedAnswerTML',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'GetUnsavedAnswerTML',
+                    query: queries.getAnswerTML,
+                    variables: {
+                        session: defaultSession,
+                    },
+                }),
+            }),
+        );
+        expect(answer.name).toBe('name');
+        expect(answer.id).toBe('bar');
+    });
 });

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

@@ -1,3 +1,4 @@
+// import YAML from 'yaml';
 import { tokenizedFetch } from '../../../tokenizedFetch';
 import type {
     ColumnValue, RuntimeFilter, RuntimeFilterOp, VizPoint,
@@ -54,6 +55,8 @@ export interface UnderlyingDataPoint {
 export class AnswerService {
     private answer: Promise<any>;
 
+    private tmlOverride = {};
+
     /**
      * Should not need to be called directly.
      * @param session
@@ -68,14 +71,7 @@ export class AnswerService {
         private selectedPoints?: VizPoint[],
     ) {
         this.session = removeTypename(session);
-        if (!answer) {
-            this.answer = this.executeQuery(
-                queries.getAnswer,
-                {},
-            ).then((data) => data?.answer);
-        } else {
-            this.answer = answer;
-        }
+        this.answer = answer;
     }
 
     /**
@@ -83,7 +79,7 @@ export class AnswerService {
      * This can be used to get the list of all columns in the data source for example.
      */
     public async getSourceDetail() {
-        const sourceId = (await this.answer).sources[0].header.guid;
+        const sourceId = (await this.getAnswer()).sources[0].header.guid;
         return getSourceDetail(
             this.thoughtSpotHost,
             sourceId,
@@ -226,6 +222,7 @@ export class AnswerService {
      * Fetch the data for the answer as a PNG blob. This might be
      * quicker for larger data.
      * @param userLocale
+     * @param includeInfo
      * @param omitBackground Omit the background in the PNG
      * @param deviceScaleFactor The scale factor for the PNG
      * @return Response
@@ -255,6 +252,9 @@ export class AnswerService {
     /**
      * Just get the internal URL for this answer's data
      * as a PNG blob.
+     * @param userLocale
+     * @param omitBackground
+     * @param deviceScaleFactor
      */
     public getFetchPNGBlobUrl(userLocale = 'en-us', omitBackground = false, deviceScaleFactor = 2): string {
         return `${this.thoughtSpotHost}/prism/download/answer/png?sessionId=${this.session.sessionId}&deviceScaleFactor=${deviceScaleFactor}&omitBackground=${omitBackground}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data`;
@@ -355,9 +355,48 @@ export class AnswerService {
         return this.session;
     }
 
-    public getAnswer() {
+    public async getAnswer() {
+        if (this.answer) {
+            return this.answer;
+        }
+        this.answer = this.executeQuery(
+            queries.getAnswer,
+            {},
+        ).then((data) => data?.answer);
         return this.answer;
     }
+
+    public async getTML(): Promise<any> {
+        const { object } = await this.executeQuery(
+            queries.getAnswerTML,
+            {},
+        );
+        const edoc = object[0].edoc;
+        const YAML = await import('yaml');
+        const parsedDoc = YAML.parse(edoc);
+        return {
+            answer: {
+                ...parsedDoc.answer,
+                ...this.tmlOverride,
+            },
+        };
+    }
+
+    public async addDisplayedVizToLiveboard(liveboardId: string) {
+        const { displayMode, visualizations } = await this.getAnswer();
+        const viz = getDisplayedViz(visualizations, displayMode);
+        return this.executeQuery(
+            queries.addVizToLiveboard,
+            {
+                liveboardId,
+                vizId: viz.id,
+            },
+        );
+    }
+
+    public setTMLOverride(override: any) {
+        this.tmlOverride = override;
+    }
 }
 
 /**
@@ -423,3 +462,21 @@ function getSelectedPointsForUnderlyingDataQuery(
     });
     return underlyingDataPoint;
 }
+
+/**
+ *
+ * @param visualizations
+ * @param displayMode
+ */
+function getDisplayedViz(visualizations: any[], displayMode: string) {
+    if (displayMode === 'CHART_MODE') {
+        return visualizations.find(
+            // eslint-disable-next-line no-underscore-dangle
+            (viz: any) => viz.__typename === 'ChartViz',
+        );
+    }
+    return visualizations.find(
+        // eslint-disable-next-line no-underscore-dangle
+        (viz: any) => viz.__typename === 'TableViz',
+    );
+}

package/src/utils/graphql/graphql-request.spec.ts

@@ -16,7 +16,11 @@ const thoughtSpotHost = 'TSHOST';
 
 describe('graphQl tests', () => {
     test('should call tokenizedFetch with correct parameters when graphqlQuery is called', async () => {
-        jest.spyOn(tokenizedFetchUtil, 'tokenizedFetch');
+        jest.spyOn(tokenizedFetchUtil, 'tokenizedFetch').mockResolvedValue({
+            json: jest.fn().mockResolvedValue({
+                data: {},
+            }),
+        });
 
         const details = await graphqlQuery({
             query: getSourceDetailQuery,
@@ -34,5 +38,14 @@ describe('graphQl tests', () => {
             },
             method: 'POST',
         });
+
+        const details2 = await graphqlQuery({
+            query: getSourceDetailQuery,
+            variables: {
+                ids: [2],
+            },
+            thoughtSpotHost,
+            isCompositeQuery: true,
+        });
     });
 });

package/src/utils/graphql/graphql-request.ts

@@ -19,7 +19,7 @@ export async function graphqlQuery({
     variables: any,
     thoughtSpotHost: string,
     isCompositeQuery?: boolean
-}) {
+}): Promise<any> {
     const operationName = getOperationNameFromQuery(query);
     try {
         const response = await tokenizedFetch(`${thoughtSpotHost}/prism/?op=${operationName}`, {