@thoughtspot/visual-embed-sdk 1.33.0-alpha.2 → 1.33.0

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

@@ -56,7 +56,6 @@ beforeAll(() => {
 const customisations = {
     style: {
         customCSS: {},
-        customCSSUrl: 'http://localhost:3000',
     },
     content: {},
 };
@@ -64,7 +63,6 @@ const customisations = {
 const customisationsView = {
     style: {
         customCSS: {},
-        customCSSUrl: 'http://localhost:8000',
     },
     content: {
         strings: {
@@ -95,7 +93,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthTokenCookieless,
                 getAuthToken: () => Promise.resolve('test_auth_token2'),
             });
@@ -136,7 +133,6 @@ describe('Unit test case for ts embed', () => {
                 thoughtSpotHost: 'tshost',
                 authType: AuthType.None,
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
             });
         });
 
@@ -199,9 +195,6 @@ describe('Unit test case for ts embed', () => {
                     reorderedHomepageModules: [],
                 },
             });
-            expect(getIFrameSrc()).toContain(
-                `customCssUrl=${customisationsView.style.customCSSUrl}`,
-            );
         });
 
         test('hide home page modules from view Config should be part of app_init payload', async () => {
@@ -601,7 +594,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthTokenCookieless,
                 getAuthToken: () => Promise.resolve('test_auth_token1'),
             });
@@ -655,7 +647,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthTokenCookieless,
                 getAuthToken: () => Promise.reject(),
             });
@@ -790,7 +781,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthToken,
                 username: 'tsadmin',
                 getAuthToken: () => Promise.resolve('test_auth_token3'),
@@ -819,7 +809,6 @@ describe('Unit test case for ts embed', () => {
             init({
                 thoughtSpotHost: 'tshost',
                 customizations: customisations,
-                customCssUrl: 'http://localhost:5000',
                 authType: AuthType.TrustedAuthToken,
                 username: 'tsadmin',
                 getAuthToken: () => Promise.resolve('test_auth_token4'),

package/src/embed/ts-embed.ts

@@ -454,13 +454,6 @@ export class TsEmbed {
             return queryParams;
         }
 
-        // TODO remove embedConfig.customCssUrl
-        const cssUrlParam = customizations?.style?.customCSSUrl || this.embedConfig.customCssUrl;
-
-        if (cssUrlParam) {
-            queryParams[Param.CustomCSSUrl] = cssUrlParam;
-        }
-
         if (disabledActions?.length) {
             queryParams[Param.DisableActions] = disabledActions;
         }
@@ -500,9 +493,7 @@ export class TsEmbed {
         if (locale !== undefined) {
             queryParams[Param.Locale] = locale;
         }
-        if (additionalFlags && additionalFlags.constructor.name === 'Object') {
-            Object.assign(queryParams, additionalFlags);
-        }
+
         if (linkOverride) {
             queryParams[Param.LinkOverride] = linkOverride;
         }
@@ -516,6 +507,13 @@ export class TsEmbed {
         queryParams[Param.OverrideNativeConsole] = true;
         queryParams[Param.ClientLogLevel] = this.embedConfig.logLevel;
 
+        if (additionalFlags && additionalFlags.constructor.name === 'Object') {
+            Object.assign(queryParams, additionalFlags);
+        }
+
+        // Do not add any flags below this, as we want additional flags to
+        // override other flags
+
         return queryParams;
     }
 
@@ -1221,7 +1219,7 @@ export class TsEmbed {
      * @version SDK: 1.25.0 / ThoughtSpot 9.10.0
      */
     public async getAnswerService(vizId?: string): Promise<AnswerService> {
-        const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId);
+        const { session } = await this.trigger(HostEvent.GetAnswerSession, vizId ? { vizId } : {});
 
         return new AnswerService(session, null, this.embedConfig.thoughtSpotHost);
     }
@@ -1298,7 +1296,6 @@ export class V1Embed extends TsEmbed {
 
     /**
      * Only for testing purposes.
-     *
      * @hidden
      */
     // eslint-disable-next-line camelcase

package/src/mixpanel-service.ts

@@ -11,6 +11,10 @@ export const EndPoints = {
 const mixpanelLib = mixpanel.default || mixpanel;
 let mixpanelInstance: mixpanel.Mixpanel;
 
+/**
+ * Enum of mixpanel events
+ * @hidden
+ */
 export const MIXPANEL_EVENT = {
     VISUAL_SDK_RENDER_START: 'visual-sdk-render-start',
     VISUAL_SDK_CALLED_INIT: 'visual-sdk-called-init',

package/src/tokenizedFetch.ts

@@ -22,7 +22,11 @@ import { AuthType } from './types';
 export const tokenizedFetch: typeof fetch = async (input, init): Promise<Response> => {
     const embedConfig = getEmbedConfig();
     if (embedConfig.authType !== AuthType.TrustedAuthTokenCookieless) {
-        return fetch(input, init);
+        return fetch(input, {
+            // ensure cookies are included for the non cookie-less api calls.
+            credentials: 'include',
+            ...init,
+        });
     }
 
     const req = new Request(input, init);

package/src/types.ts

@@ -449,13 +449,6 @@ export interface EmbedConfig {
      */
     queueMultiRenders?: boolean;
 
-    /**
-     * Dynamic CSS URL to be injected in the loaded application.
-     * You would also need to set `style-src` in the CSP settings.
-     * @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1.sw
-     * @default ''
-     */
-    customCssUrl?: string;
     /**
      * [AuthServer|Basic] Detect if third-party party cookies are enabled by doing an
      * additional call. This is slower and should be avoided. Listen to the
@@ -589,6 +582,13 @@ export interface EmbedConfig {
      * @version SDK: 1.28.5 | Thoughtspot: *
      */
     disableTokenVerification?: boolean;
+
+    /**
+     * This flag is used to disable showing the login failure page in the embedded app.
+     *
+     * @version SDK 1.32.3 | Thoughtspot: *
+     */
+    disableLoginFailurePage?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -715,11 +715,12 @@ export interface ViewConfig {
      */
     visibleActions?: Action[];
     /**
-     * Show alert messages and toast messages in the embedded view.
+     * Show alert messages and toast messages in the embedded
+     * view in full app embed.
      * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1.sw
      * @example
      * ```js
-     * const embed = new LiveboardEmbed('#embed-container', {
+     * const embed = new AppEmbed('#embed-container', {
      *    ... // other options
      *    showAlerts:true,
      * })
@@ -1040,6 +1041,32 @@ export interface ViewConfig {
      * @version SDK: 1.32.1 | ThoughtSpot: 10.3.0.cl
      */
     disableRedirectionLinksInNewTab?: boolean;
+    /**
+     * Flag to control Data panel experience
+     * @default true
+     * @version SDK: 1.34.0 | Thoughtspot: 10.3.0.cl
+     * @example
+     * ```js
+     * const embed = new AppEmbed('#tsEmbed', {
+     *    ... // other options
+     *    dataPanelV2: true,
+     * })
+     * ```
+     */
+    dataPanelV2?: boolean;
+    /**
+     * To enable custom column groups in data panel v2
+     * @version SDK: 1.32.0 | Thoughtspot: 10.0.0.cl
+     * @default false
+     * @example
+     * ```js
+     * const embed = new SearchEmbed('#tsEmbed', {
+     *   ... // other options
+     *   enableCustomColumnGroups: true,
+     * });
+     * ```
+     */
+    enableCustomColumnGroups?: boolean;
 }
 
 /**
@@ -1252,6 +1279,28 @@ export interface RuntimeParameter {
  *   console.log('Drilldown event', drilldown);
  * }));
  * ```
+ *
+ * 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
+ * // ...
+ * const MyComponent = ({ dataSources }) => {
+ *      const onLoad = () => {
+ *      console.log(EmbedEvent.Load, {});
+ *      };
+ *
+ *      return (
+ *          <SearchEmbed
+ *              dataSources={dataSources}
+ *              onLoad = {logEvent("Load")}
+ *          />
+ *     );
+ * };
+ * ```
+ *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2121,21 +2170,61 @@ export enum EmbedEvent {
      */
     Rename = 'rename',
     /**
-     * Emitted when user wants to intercept the search execution
+     * Emitted if the user wants to intercept the search execution
+     * and implement logic to decide whether to run the search or not
      *
-     * Set IsOnBeforeGetVizDataInterceptEnabled : true to use
-     * this embed event
+     * Prerequisite: Set isOnBeforeGetVizDataInterceptEnabled : true
+     * for this embed event to get emitted.
+     *
+     * @param: payload
+     * @param: responder
+     * Contains elements that lets developers define whether ThoughtSpot
+     * will run the search or not, and if not, which error message to provide.
+     *
+     * execute: When execute returns true, the search will be run.
+     * When execute returns false, the search will not be executed.
+     *
+     * 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
-     * searchEmbed.on(EmbedEvent.OnBeforeGetVizDataIntercept,
+     * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
      * (payload, responder) => {
      *  responder({
      *      data: {
-     *          execute: true,
-     *   }})
+     *          execute:false,
+     *          error: {
+     *          //Provide a custom error message to explain to your end user
+     *          //why their search did not run
+     *          errorText: "This search query cannot be run.
+     *          Please contact your administrator for more details."
+     *          }
+     *  }})
+     * })
+     * ```
+     *
+     *```js
+     * .on(EmbedEvent.OnBeforeGetVizDataIntercept,
+     * (payload, responder) => {
+     * const query = payload.data.data.answer.search_query
+     * responder({
+     *  data: {
+     *      // returns true as long as the query does not include
+     *      // both the 'sales' AND the 'county' column
+     *      execute: !(query.includes("sales")&&query.includes("county")),
+     *      error: {
+     *      //Provide a custom error message to explain to your end user
+     *      // why their search did not run, and which searches are accepted by your custom logic.
+     *      errorText: "You can't use this query :" + query + ".
+     *      The 'sales' measures can never be used at the 'county' level.
+     *      Please try another measure, or remove 'county' from your search."
+     *      }
+     *  }})
      * })
      *```
-     * @version SDK : 1.29.0 | Thoughtspot : 10.2.0.cl
      */
     OnBeforeGetVizDataIntercept = 'onBeforeGetVizDataIntercept',
     /**
@@ -2154,7 +2243,7 @@ export enum EmbedEvent {
 
 /**
  * Event types that can be triggered by the host application
- * to the embedded ThoughtSpot app
+ * to the embedded ThoughtSpot app.
  *
  * To trigger an event use the corresponding
  * {@link LiveboardEmbed.trigger} or {@link AppEmbed.trigger} or {@link
@@ -2171,6 +2260,40 @@ export enum EmbedEvent {
  *   { columnName: 'state, operator: RuntimeFilterOp.EQ, values: ['california']}
  * ]);
  * ```
+ * @example
+ * If using React components to embed, use the format shown in this example:
+ *
+ * ```js
+ *  const selectVizs = () => {
+ *      embedRef.current.trigger(HostEvent.SetVisibleVizs, [
+ *         "715e4613-c891-4884-be44-aa8d13701c06",
+ *         "3f84d633-e325-44b2-be25-c6650e5a49cf"
+ *      ]);
+ *    };
+ * ```
+ *
+ *
+ * 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 = () => {
+ *       const embedRef = useRef(null); // import { useRef } from react
+ *       const onLiveboardRendered = () => {
+ *          embedRef.current.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
+ *      };
+ *
+ *      return (
+ *          <LiveboardEmbed
+ *              ref={embedRef}
+ *              liveboardId="<liveboard-guid>"
+ *              onLiveboardRendered={onLiveboardRendered}
+ *          />
+ *      );
+ *  }
+ * ```
+ *
  * @group Events
  */
 // eslint-disable-next-line no-shadow
@@ -2255,6 +2378,15 @@ export enum HostEvent {
      * @hidden
      */
     Reload = 'reload',
+    /**
+     * Get current iframe src
+     * @example
+     * ```js
+     * const frameUrl = AppEmbed.trigger(HostEvent.GetIframeUrl)
+     * ```
+     * @version SDK: 1.35.0 | Thoughtspot: 10.4.0.cl
+     */
+    GetIframeUrl = 'GetIframeUrl',
     /**
      * Display specific visualizations on a Liveboard.
      * @param - An array of GUIDs of the visualization to show. The visualization IDs not passed
@@ -2856,10 +2988,23 @@ export enum HostEvent {
      *     filter: {
      *         column: "item type",
      *         oper: "IN",
-     *         values: ["bags","shirts"],
+     *         values: ["bags","shirts"]
+     *        }
+     *    });
+     * ```
+     * @example
+     * ```js
+     *
+     * liveboardEmbed.trigger(HostEvent.UpdateFilters, {
+     *     filter: {
+     *         column: "date",
+     *         oper: "EQ",
+     *         values: ["JULY","2023"],
+     *         type: "MONTH_YEAR"
      *        }
      *    });
      * ```
+     *
      * @example
      *
      * ```js
@@ -2877,7 +3022,8 @@ export enum HostEvent {
      *    {
      *      column: "Date",
      *      oper: 'EQ',
-     *      values: ["1656680400"]
+     *      values: ["2023-07-31"],
+     *      types: "EXACT_DATE"
      *    }]
      * });
      * ```
@@ -3067,7 +3213,6 @@ export enum Param {
     ViewPortHeight = 'viewPortHeight',
     ViewPortWidth = 'viewPortWidth',
     VisibleActions = 'visibleAction',
-    CustomCSSUrl = 'customCssUrl',
     DisableLoginRedirect = 'disableLoginRedirect',
     visibleVizs = 'pinboardVisibleVizs',
     LiveboardV2Enabled = 'isPinboardV2Enabled',
@@ -3126,6 +3271,9 @@ export enum Param {
     FocusSearchBarOnRender = 'focusSearchBarOnRender',
     DisableRedirectionLinksInNewTab = 'disableRedirectionLinksInNewTab',
     HomePageSearchBarMode = 'homePageSearchBarMode',
+    ShowLiveboardVerifiedBadge = 'showLiveboardVerifiedBadge',
+    ShowLiveboardReverifyBanner = 'showLiveboardReverifyBanner',
+    LiveboardHeaderV2 = 'isLiveboardHeaderV2Enabled',
 }
 
 /**
@@ -4052,7 +4200,7 @@ export enum Action {
      *
      * @version SDK: 1.32.0 | Thoughtspot: 10.1.0.cl
      */
-    CreateLiveboard = 'CreateLiveboard',
+    CreateLiveboard = 'createLiveboard',
 
     /**
      * Action ID for to hide Verified Liveboard Banner
@@ -4154,6 +4302,17 @@ export enum Action {
      */
     UnsubscribeScheduleHomepage = 'unsubscribeScheduleHomepage',
 
+    /**
+     * The **Manage Tags** action on Homepage Favourite Module.
+     *
+     * @example
+     * ```js
+     * disabledActions: [Action.ManageTags]
+     * ```
+     * @version SDK : 1.34.0 | Thoughtspot: 10.3.0.cl
+     */
+    ManageTags = 'manageTags',
+
     /**
      * Action ID for delete schedule action on schedule on homepage
      * @example

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

@@ -29,7 +29,9 @@ describe('Unit test for authService', () => {
         const response = await fetchSessionInfoService(thoughtSpotHost);
         expect(response.success).toBe(true);
         expect(fetch).toHaveBeenCalledTimes(1);
-        expect(fetch).toBeCalledWith(`${thoughtSpotHost}${EndPoints.SESSION_INFO}`, {});
+        expect(fetch).toBeCalledWith(`${thoughtSpotHost}${EndPoints.SESSION_INFO}`, {
+            credentials: 'include',
+        });
     });
 
     test('fetchAuthTokenService', async () => {

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

@@ -101,7 +101,6 @@ export const getAnswer = `
                     isDiscoverable
                     isHidden
                     modifiedAt
-                    tags
                 }
                 visualizations {
                     ... on TableViz {
@@ -164,3 +163,12 @@ export const addVizToLiveboard = `
         }
     }
 `;
+
+export const getSQLQuery = `
+    mutation GetSQLQuery($session: BachSessionIdInput!) {
+        Answer__getQuery(session: $session) {
+            ${bachSessionId}
+            sql
+        }
+    }
+`;

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

@@ -3,7 +3,9 @@ import { AuthType, RuntimeFilterOp, VizPoint } from '../../../types';
 import { AnswerService } from './answerService';
 import {
     getAnswerData, removeColumns, addFilter, addColumns,
+    getSQLQuery,
 } from './answer-queries';
+import * as queries from './answer-queries';
 import * as authTokenInstance from '../../../authToken';
 import * as tokenizedFetch from '../../../tokenizedFetch';
 import * as embedConfigInstance from '../../../embed/embedConfig';
@@ -34,6 +36,23 @@ describe('Answer service tests', () => {
     beforeEach(() => {
         fetchMock.resetMocks();
     });
+
+    test('should call executeQuery with correct parameters to add columns', async () => {
+        const service = createAnswerService();
+        const executeQuerySpy = jest.spyOn(service, 'executeQuery').mockResolvedValue({
+            id: { genNo: 2 },
+
+        });
+
+        const columnIds = ['col1', 'col2'];
+        const result = await service.addColumns(columnIds);
+
+        expect(executeQuerySpy).toHaveBeenCalledWith(queries.addColumns, {
+            columns: columnIds.map((colId) => ({ logicalColumnId: colId })),
+        });
+        expect(result.id.genNo).toBe(2);
+    });
+
     test('Execute query should execute the supplied graphql on the session', async () => {
         fetchMock.mockResponseOnce(JSON.stringify({
             data: {
@@ -146,6 +165,30 @@ describe('Answer service tests', () => {
         );
     });
 
+    test('fetchPNGBlob should call the right API', () => {
+        const answerService = createAnswerService();
+
+        const mockEmbedConfig = {
+            thougthspotHost: '/test',
+            authType: AuthType.TrustedAuthTokenCookieless,
+        };
+        jest.spyOn(embedConfigInstance, 'getEmbedConfig').mockReturnValueOnce(mockEmbedConfig);
+        jest.spyOn(authTokenInstance, 'getAuthenticationToken').mockReturnValueOnce(Promise.resolve('token'));
+        const mockTokenizedFetch = jest.spyOn(tokenizedFetch, 'tokenizedFetch');
+        answerService.fetchPNGBlob(undefined, true);
+
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=2&omitBackground=true&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data`, expect.objectContaining({}));
+
+        answerService.fetchPNGBlob('en-uk', true);
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=2&omitBackground=true&genNo=${defaultSession.genNo}&userLocale=en-uk&exportFileName=data`, expect.objectContaining({}));
+
+        answerService.fetchPNGBlob(undefined, false);
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=2&omitBackground=false&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data`, expect.objectContaining({}));
+
+        answerService.fetchPNGBlob(undefined, true, 3);
+        expect(mockTokenizedFetch).toHaveBeenCalledWith(`https://tshost/prism/download/answer/png?sessionId=${defaultSession.sessionId}&deviceScaleFactor=3&omitBackground=true&genNo=${defaultSession.genNo}&userLocale=en-us&exportFileName=data`, expect.objectContaining({}));
+    });
+
     test('getUnderlyingDataForPoint should call the right APIs', async () => {
         fetchMock.mockResponses(
             JSON.stringify({
@@ -404,4 +447,30 @@ describe('Answer service tests', () => {
             }),
         );
     });
+
+    test('Get SQL query should call the right API', async () => {
+        fetchMock.mockResponseOnce(JSON.stringify({
+            data: {
+                Answer__getQuery: {
+                    id: {},
+                    sql: 'SELECT * FROM table',
+                },
+            },
+        }));
+        const answerService = createAnswerService();
+        const sql = await answerService.getSQLQuery();
+        expect(fetchMock).toHaveBeenCalledWith(
+            'https://tshost/prism/?op=GetSQLQuery',
+            expect.objectContaining({
+                body: JSON.stringify({
+                    operationName: 'GetSQLQuery',
+                    query: getSQLQuery,
+                    variables: {
+                        session: defaultSession,
+                    },
+                }),
+            }),
+        );
+        expect(sql).toBe('SELECT * FROM table');
+    });
 });

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

@@ -173,6 +173,14 @@ export class AnswerService {
         );
     }
 
+    public async getSQLQuery(): Promise<string> {
+        const { sql } = await this.executeQuery(
+            queries.getSQLQuery,
+            {},
+        );
+        return sql;
+    }
+
     /**
      * Fetch data from the answer.
      * @param offset
@@ -214,6 +222,25 @@ export class AnswerService {
         });
     }
 
+    /**
+     * Fetch the data for the answer as a PNG blob. This might be
+     * quicker for larger data.
+     * @param userLocale
+     * @param omitBackground Omit the background in the PNG
+     * @param deviceScaleFactor The scale factor for the PNG
+     * @return Response
+     */
+    public async fetchPNGBlob(userLocale = 'en-us', omitBackground = false, deviceScaleFactor = 2): Promise<Response> {
+        const fetchUrl = this.getFetchPNGBlobUrl(
+            userLocale,
+            omitBackground,
+            deviceScaleFactor,
+        );
+        return tokenizedFetch(fetchUrl, {
+            credentials: 'include',
+        });
+    }
+
     /**
      * Just get the internal URL for this answer's data
      * as a CSV blob.
@@ -225,6 +252,14 @@ export class AnswerService {
         return `${this.thoughtSpotHost}/prism/download/answer/csv?sessionId=${this.session.sessionId}&genNo=${this.session.genNo}&userLocale=${userLocale}&exportFileName=data&hideCsvHeader=${!includeInfo}`;
     }
 
+    /**
+     * Just get the internal URL for this answer's data
+     * as a PNG blob.
+     */
+    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`;
+    }
+
     /**
      * Get underlying data given a point and the output column names.
      * In case of a context menu action, the selectedPoints are

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

@@ -0,0 +1,38 @@
+import 'jest-fetch-mock';
+import { getSourceDetail } from './sourceService';
+import * as tokenizedFetchUtil from '../../tokenizedFetch';
+import { graphqlQuery } from './graphql-request';
+
+const getSourceDetailQuery = `
+    query GetSourceDetail($ids: [GUID!]!) {
+        getSourceDetailById(ids: $ids, type: LOGICAL_TABLE) {
+            id
+            name
+        }
+    }  
+`;
+
+const thoughtSpotHost = 'TSHOST';
+
+describe('graphQl tests', () => {
+    test('should call tokenizedFetch with correct parameters when graphqlQuery is called', async () => {
+        jest.spyOn(tokenizedFetchUtil, 'tokenizedFetch');
+
+        const details = await graphqlQuery({
+            query: getSourceDetailQuery,
+            variables: {
+                ids: [2],
+            },
+            thoughtSpotHost,
+        });
+
+        expect(tokenizedFetchUtil.tokenizedFetch).toBeCalledWith('TSHOST/prism/?op=GetSourceDetail', {
+            body: '{"operationName":"GetSourceDetail","query":"\\n    query GetSourceDetail($ids: [GUID!]!) {\\n        getSourceDetailById(ids: $ids, type: LOGICAL_TABLE) {\\n            id\\n            name\\n        }\\n    }  \\n","variables":{"ids":[2]}}',
+            credentials: 'include',
+            headers: {
+                accept: '*/*', 'accept-language': 'en-us', 'content-type': 'application/json;charset=UTF-8', 'x-requested-by': 'ThoughtSpot',
+            },
+            method: 'POST',
+        });
+    });
+});