@thoughtspot/visual-embed-sdk 1.36.0 → 1.36.1

package/lib/src/visual-embed-sdk.d.ts

@@ -4505,16 +4505,63 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             getExportRequestForCurrentPinboard = "getExportRequestForCurrentPinboard",
             /**
-                * Trigger the **Pin** action on an embedded object
-                * @param - Liveboard embed takes the `vizId` as a
-                * key. Can be left undefined when embedding Search, full app, or
-                * a visualization.
+                * Trigger **Pin** action on an embedded object.
+                * If no parameters are defined, the pin action is triggered
+                * for the Answer that the user is currently on
+                * and a modal opens for Liveboard selection.
+                * To add an Answer or visualization to a Liveboard programmatically without
+                * showing requiring additional user input via *Pin to Liveboard* modal, define
+                * the following parameters:
+                *
+                * @param
+                * `vizId`-  GUID of the saved Answer or visualization to pin to a Liveboard.
+                *  Optional when pinning a new chart or table generated from a Search query.
+                * @param
+                * `liveboardID` - GUID of the Liveboard to pin an Answer. If there is no Liveboard,
+                *  specify the `newLiveboardName` parameter to create a new Liveboard.
+                * @param
+                * `tabId` - GUID of the Liveboard tab. Adds the Answer to the Liveboard tab
+                *  specified in the code.
+                * @param
+                * `newVizName` - Name string for the Answer or visualization. If defined,
+                *  this parameter adds a new visualization object or creates a copy of the
+                *  Answer or visualization specified in `vizId`.
+                *  Required attribute.
+                * @param
+                * `newLiveboardName` - Name string for the Liveboard.
+                *  Creates a new Liveboard object with the specified name.
+                * @param
+                * `newTabName` - Name of the tab. Adds a new tab Liveboard specified
+                *  in the code.
+                *
                 * @example
                 * ```js
-                * appEmbed.trigger(HostEvent.Pin)
+                * const pinResponse = await appEmbed.trigger(HostEvent.Pin, {
+                *     vizId: "123",
+                *     newVizName: "Sales by region",
+                *     liveboardId: "123",
+                *     tabId: "123"
+                *  });
                 * ```
+                * @example
                 * ```js
-                * searchEmbed.trigger(HostEvent.Pin)
+                * const pinResponse = await appEmbed.trigger(HostEvent.Pin, {
+                *     newVizName: "Total sales of Jackets",
+                *     liveboardId: "123"
+                *  });
+                * ```
+                *
+                * @example
+                * ```js
+                * const pinResponse = await searchEmbed.trigger(HostEvent.Pin, {
+                *     newVizName: "Sales by state",
+                *     newLiveboardName: "Sales",
+                *     newTabName: "Products"
+                *  });
+                * ```
+                * @example
+                * ```js
+                * appEmbed.trigger(HostEvent.Pin)
                 * ```
                 * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
                 */
@@ -5170,8 +5217,25 @@ declare module '@thoughtspot/visual-embed-sdk/types' {
                 */
             InfoSuccess = "InfoSuccess",
             /**
-                * Triggers the action to get the current view of the liveboard
-                * @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
+                * Trigger the save action for an Answer.
+                * To programmatically save an answer without opening the
+                * *Describe your Answer* modal, define the `name` and `description`
+                * properties.
+                * If no parameters are specified, the save action is
+                * triggered with a modal to prompt users to
+                * add a name and description for the Answer.
+                * @param - optional attributes to set Answer properties.
+                *  `name` - Name string for the Answer.
+                *  `description` - Description text for the Answer.
+                *
+                * @example
+                * ```js
+                * const saveAnswerResponse = await searchEmbed.trigger(HostEvent.SaveAnswer, {
+                *      name: "Sales by states",
+                *      description: "Total sales by states in MidWest"
+                *   });
+                * ```
+                * @version SDK: 1.36.0 | ThoughtSpot: 10.6.0.cl
                 */
             SaveAnswer = "saveAnswer",
             /**
@@ -6756,6 +6820,14 @@ declare module '@thoughtspot/visual-embed-sdk/css-variables' {
                 * panel.
                 */
             '--ts-var-search-auto-complete-subtext-font-color'?: string;
+            /**
+                * Background color of the input box in the Spotter page.
+                */
+            '--ts-var-spotter-input-background'?: string;
+            /**
+                * Background color of the previously asked prompt message in the Spotter page.
+                */
+            '--ts-var-spotter-prompt-background': string;
             /**
                 * Background color of the data panel.
                 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.36.0",
+    "version": "1.36.1",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",

package/src/css-variables.ts

@@ -111,6 +111,16 @@ export interface CustomCssVariables {
      */
     '--ts-var-search-auto-complete-subtext-font-color'?: string;
 
+    /**
+     * Background color of the input box in the Spotter page.
+     */
+    '--ts-var-spotter-input-background'?: string;
+
+    /**
+     * Background color of the previously asked prompt message in the Spotter page.
+     */
+    '--ts-var-spotter-prompt-background': string;
+
     /**
      * Background color of the data panel.
      */

package/src/embed/hostEventClient/host-event-client.spec.ts

@@ -133,6 +133,7 @@ describe('HostEventClient', () => {
             const mockResponse = {
                 value: {
                     pinboardId: 'testPinboard',
+                    liveboardId: 'testPinboard',
                     tabId: 'testTab',
                     vizId: 'testVizId',
                 },
@@ -250,5 +251,65 @@ describe('HostEventClient', () => {
             );
             expect(result).toEqual([mockResponse]);
         });
+
+        it('Pin response support pinboardId as well', async () => {
+            const { client, mockIframe } = createHostEventClient();
+            const hostEvent = HostEvent.Pin;
+            const payload: HostEventRequest<typeof hostEvent> = {
+                newVizDescription: 'Test Description',
+                vizId: 'testVizId',
+                newVizName: 'Test Answer',
+                newLiveboardName: 'testLiveboard',
+            } as any;
+            const mockResponse = [{
+                value: {
+                    pinboardId: 'testLiveboard',
+                    liveboardId: 'testPinboard',
+                    tabId: 'testTab',
+                    vizId: 'testVizId',
+                },
+                refId: 'testVizId',
+            }];
+            mockProcessTrigger.mockResolvedValue(mockResponse);
+            const result = await client.triggerHostEvent(hostEvent, payload);
+            expect(result.liveboardId).toBe('testLiveboard');
+        });
+
+        it('should request liveboardId as well', async () => {
+            const { client, mockIframe } = createHostEventClient();
+            const hostEvent = HostEvent.Pin;
+            const payload: HostEventRequest<typeof hostEvent> = {
+                liveboardId: 'test',
+                newVizName: 'Test Answer',
+                newPinboardName: 'testLiveboard1',
+                newLiveboardName: 'testLiveboard',
+            } as any;
+            const mockResponse = [{
+                value: {
+                    pinboardId: 'testLiveboard',
+                    tabId: 'testTab',
+                    vizId: 'testVizId',
+                },
+                refId: 'testVizId',
+            }];
+            mockProcessTrigger.mockResolvedValue(mockResponse);
+            const result = await client.triggerHostEvent(hostEvent, payload);
+            expect(result.liveboardId).toBe('testLiveboard');
+            expect(mockProcessTrigger).toHaveBeenCalledWith(
+                mockIframe,
+                HostEvent.UIPassthrough,
+                mockThoughtSpotHost,
+                {
+                    parameters: { ...payload, pinboardId: 'test', newPinboardName: 'testLiveboard' },
+                    type: 'addVizToPinboard',
+                },
+            );
+            expect(result).toEqual({
+                pinboardId: 'testLiveboard',
+                tabId: 'testTab',
+                vizId: 'testVizId',
+                liveboardId: 'testLiveboard',
+            });
+        });
     });
 });

package/src/embed/hostEventClient/host-event-client.ts

@@ -98,13 +98,18 @@ export class HostEventClient {
 
       const formattedPayload = {
           ...payload,
-          pinboardId: payload.liveboardId,
-          newPinboardName: payload.newLiveboardName,
+          pinboardId: payload.liveboardId ?? (payload as any).pinboardId,
+          newPinboardName: payload.newLiveboardName ?? (payload as any).newPinboardName,
       };
 
-      return this.handleHostEventWithParam(
+      const data = await this.handleHostEventWithParam(
           UIPassthroughEvent.PinAnswerToLiveboard, formattedPayload,
       );
+
+      return {
+          ...data,
+          liveboardId: (data as any).pinboardId,
+      };
   }
 
   protected async handleSaveAnswerEvent(

package/src/types.ts

@@ -2615,16 +2615,63 @@ export enum HostEvent {
      */
     getExportRequestForCurrentPinboard = 'getExportRequestForCurrentPinboard',
     /**
-     * Trigger the **Pin** action on an embedded object
-     * @param - Liveboard embed takes the `vizId` as a
-     * key. Can be left undefined when embedding Search, full app, or
-     * a visualization.
+     * Trigger **Pin** action on an embedded object.
+     * If no parameters are defined, the pin action is triggered
+     * for the Answer that the user is currently on
+     * and a modal opens for Liveboard selection.
+     * To add an Answer or visualization to a Liveboard programmatically without
+     * showing requiring additional user input via *Pin to Liveboard* modal, define
+     * the following parameters:
+     *
+     * @param
+     * `vizId`-  GUID of the saved Answer or visualization to pin to a Liveboard.
+     *  Optional when pinning a new chart or table generated from a Search query.
+     * @param
+     * `liveboardID` - GUID of the Liveboard to pin an Answer. If there is no Liveboard,
+     *  specify the `newLiveboardName` parameter to create a new Liveboard.
+     * @param
+     * `tabId` - GUID of the Liveboard tab. Adds the Answer to the Liveboard tab
+     *  specified in the code.
+     * @param
+     * `newVizName` - Name string for the Answer or visualization. If defined,
+     *  this parameter adds a new visualization object or creates a copy of the
+     *  Answer or visualization specified in `vizId`.
+     *  Required attribute.
+     * @param
+     * `newLiveboardName` - Name string for the Liveboard.
+     *  Creates a new Liveboard object with the specified name.
+     * @param
+     * `newTabName` - Name of the tab. Adds a new tab Liveboard specified
+     *  in the code.
+     *
      * @example
      * ```js
-     * appEmbed.trigger(HostEvent.Pin)
+     * const pinResponse = await appEmbed.trigger(HostEvent.Pin, {
+     *     vizId: "123",
+     *     newVizName: "Sales by region",
+     *     liveboardId: "123",
+     *     tabId: "123"
+     *  });
      * ```
+     * @example
      * ```js
-     * searchEmbed.trigger(HostEvent.Pin)
+     * const pinResponse = await appEmbed.trigger(HostEvent.Pin, {
+     *     newVizName: "Total sales of Jackets",
+     *     liveboardId: "123"
+     *  });
+     * ```
+     *
+     * @example
+     * ```js
+     * const pinResponse = await searchEmbed.trigger(HostEvent.Pin, {
+     *     newVizName: "Sales by state",
+     *     newLiveboardName: "Sales",
+     *     newTabName: "Products"
+     *  });
+     * ```
+     * @example
+     * ```js
+     * appEmbed.trigger(HostEvent.Pin)
      * ```
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1.sw
      */
@@ -3280,8 +3327,25 @@ export enum HostEvent {
      */
      InfoSuccess = 'InfoSuccess',
     /**
-     * Triggers the action to get the current view of the liveboard
-     * @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
+     * Trigger the save action for an Answer.
+     * To programmatically save an answer without opening the
+     * *Describe your Answer* modal, define the `name` and `description`
+     * properties.
+     * If no parameters are specified, the save action is
+     * triggered with a modal to prompt users to
+     * add a name and description for the Answer.
+     * @param - optional attributes to set Answer properties.
+     *  `name` - Name string for the Answer.
+     *  `description` - Description text for the Answer.
+     *
+     * @example
+     * ```js
+     * const saveAnswerResponse = await searchEmbed.trigger(HostEvent.SaveAnswer, {
+     *      name: "Sales by states",
+     *      description: "Total sales by states in MidWest"
+     *   });
+     * ```
+     * @version SDK: 1.36.0 | ThoughtSpot: 10.6.0.cl
      */
     SaveAnswer = 'saveAnswer',
     /**