@thoughtspot/visual-embed-sdk 1.17.2-customcss → 1.18.0-alpha.1

package/src/embed/ts-embed.ts

@@ -30,12 +30,13 @@ import {
     EmbedEvent,
     MessageCallback,
     Action,
-    RuntimeFilter,
     Param,
     EmbedConfig,
     MessageOptions,
     MessagePayload,
     MessageCallbackObj,
+    ViewConfig,
+    FrameParams,
 } from '../types';
 import { uploadMixpanelEvent, MIXPANEL_EVENT } from '../mixpanel-service';
 import { processEventData } from '../utils/processData';
@@ -60,103 +61,6 @@ const V1EventMap = {
     [EmbedEvent.Data]: [EmbedEvent.V1Data],
 };
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LayoutConfig {}
-
-/**
- * Embedded iFrame configuration
- */
-export interface FrameParams {
-    /**
-     * The width of the iFrame (unit is pixels if numeric).
-     */
-    width?: number | string;
-    /**
-     * The height of the iFrame (unit is pixels if numeric).
-     */
-    height?: number | string;
-    /**
-     * This parameters will be passed on the iframe
-     * as is.
-     */
-    [key: string]: string | number | boolean | undefined;
-}
-
-/**
- * The configuration object for an embedded view.
- */
-export interface ViewConfig {
-    /**
-     * @hidden
-     */
-    layoutConfig?: LayoutConfig;
-    /**
-     * The <b>width</b> and <b>height</b> dimensions to render an embedded object inside your app.  Specify the values in pixels or percentage.
-     */
-    frameParams?: FrameParams;
-    /**
-     * @hidden
-     */
-    theme?: string;
-    /**
-     * @hidden
-     */
-    // eslint-disable-next-line camelcase
-    styleSheet__unstable?: string;
-    /**
-     * The list of actions to disable from the primary menu, more menu
-     * (...), and the contextual menu.
-     */
-    disabledActions?: Action[];
-    /**
-     * The tooltip to display for disabled actions.
-     */
-    disabledActionReason?: string;
-    /**
-     * The list of actions to hide from the primary menu, more menu
-     * (...), and the contextual menu.
-     */
-    hiddenActions?: Action[];
-    /**
-     * The list of actions to display from the primary menu, more menu
-     * (...), and the contextual menu.
-     * @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1-sw
-     */
-    visibleActions?: Action[];
-    /**
-     * Show alert messages and toast messages in the embedded view.
-     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1-sw
-     */
-    showAlerts?: boolean;
-    /**
-     * The list of runtime filters to apply to a search answer,
-     * visualization, or Liveboard.
-     */
-    runtimeFilters?: RuntimeFilter[];
-    /**
-     * The locale/language to use for the embedded view.
-     * @version SDK: 1.9.4 | ThoughtSpot 8.1.0.cl, 8.4.1-sw
-     */
-    locale?: string;
-    /**
-     * This is an object (key/val) of override flags which will be applied
-     * to the internal embedded object. This can be used to add any
-     * URL flag.
-     * Warning: This option is for advanced use only and is used internally
-     * to control embed behavior in non-regular ways. We do not publish the
-     * list of supported keys and values associated with each.
-     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl, 8.4.1-sw
-     */
-    additionalFlags?: { [key: string]: string | number | 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.17.2 | ThoughtSpot: 8.4.1-sw, 8.4.0.cl
-     * @default ''
-     */
-    customCssUrl?: string;
-}
-
 /**
  * Base class for embedding v2 experience
  * Note: the v2 version of ThoughtSpot Blink is built on the new stack:
@@ -317,7 +221,12 @@ export class TsEmbed {
     private appInitCb = (_: any, responder: any) => {
         responder({
             type: EmbedEvent.APP_INIT,
-            data: { customisations: getCustomisations(this.embedConfig) },
+            data: {
+                customisations: getCustomisations(
+                    this.embedConfig,
+                    this.viewConfig,
+                ),
+            },
         });
     };
 
@@ -388,7 +297,7 @@ export class TsEmbed {
             showAlerts,
             additionalFlags,
             locale,
-            customCssUrl,
+            customizations,
         } = this.viewConfig;
 
         if (Array.isArray(visibleActions) && Array.isArray(hiddenActions)) {
@@ -398,14 +307,13 @@ export class TsEmbed {
             return queryParams;
         }
 
-        // TODO remove this
-        if (this.embedConfig.customCssUrl) {
-            queryParams[Param.CustomCSSUrl] = this.embedConfig.customCssUrl;
-        }
+        // TODO remove embedConfig.customCssUrl
+        const cssUrlParam =
+            customizations?.style?.customCSSUrl ||
+            this.embedConfig.customCssUrl;
 
-        // If you need to override customCSS URL for a specific embed liveboard
-        if (customCssUrl) {
-            queryParams[Param.CustomCSSUrl] = customCssUrl;
+        if (cssUrlParam) {
+            queryParams[Param.CustomCSSUrl] = cssUrlParam;
         }
 
         if (disabledActions?.length) {
@@ -733,7 +641,7 @@ export class TsEmbed {
      * @param messageType The event type
      * @param data The payload to send with the message
      */
-    public trigger(messageType: HostEvent, data: any): Promise<any> {
+    public trigger(messageType: HostEvent, data: any = {}): Promise<any> {
         uploadMixpanelEvent(
             `${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`,
         );

package/src/react/index.tsx

@@ -10,9 +10,9 @@ import {
     LiveboardEmbed as _LiveboardEmbed,
     LiveboardViewConfig,
 } from '../embed/liveboard';
-import { TsEmbed, ViewConfig } from '../embed/ts-embed';
+import { TsEmbed } from '../embed/ts-embed';
 
-import { EmbedEvent } from '../types';
+import { EmbedEvent, ViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 
 const componentFactory = <

package/src/react/util.ts

@@ -1,5 +1,4 @@
-import { EmbedEvent, MessageCallback } from '../types';
-import { ViewConfig } from '../embed/ts-embed';
+import { EmbedEvent, MessageCallback, ViewConfig } from '../types';
 
 // eslint-disable-next-line prettier/prettier
 export type EmbedEventHandlers = { [key in keyof typeof EmbedEvent as `on${Capitalize<key>}`]?: MessageCallback };

package/src/types.ts

@@ -87,11 +87,11 @@ interface customCssInterface {
 }
 interface CustomStyles {
     customCSSUrl?: string;
-    customCss?: customCssInterface;
+    customCSS?: customCssInterface;
 }
 export interface CustomisationsInterface {
-    style: CustomStyles;
-    content: {
+    style?: CustomStyles;
+    content?: {
         [key: string]: string;
     };
 }
@@ -239,13 +239,12 @@ export interface EmbedConfig {
      * @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl, 8.4.1-sw*
      */
     suppressSearchEmbedBetaWarning?: boolean;
-
     /**
      * Custom style params for embed Config.
      *
      * @version SDK: 1.17.0 | ThoughtSpot: 8.9.0.cl
      */
-    customisations?: CustomisationsInterface;
+    customizations?: CustomisationsInterface;
     /**
      * For noRedirect SSO Auth, we need a button which the user
      * click to trigger the flow. This is the containing element
@@ -262,6 +261,103 @@ export interface EmbedConfig {
     authTriggerText?: string;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LayoutConfig {}
+
+/**
+ * Embedded iFrame configuration
+ */
+export interface FrameParams {
+    /**
+     * The width of the iFrame (unit is pixels if numeric).
+     */
+    width?: number | string;
+    /**
+     * The height of the iFrame (unit is pixels if numeric).
+     */
+    height?: number | string;
+    /**
+     * This parameters will be passed on the iframe
+     * as is.
+     */
+    [key: string]: string | number | boolean | undefined;
+}
+
+/**
+ * The configuration object for an embedded view.
+ */
+export interface ViewConfig {
+    /**
+     * @hidden
+     */
+    layoutConfig?: LayoutConfig;
+    /**
+     * The <b>width</b> and <b>height</b> dimensions to render an embedded object inside your app.  Specify the values in pixels or percentage.
+     */
+    frameParams?: FrameParams;
+    /**
+     * @hidden
+     */
+    theme?: string;
+    /**
+     * @hidden
+     */
+    // eslint-disable-next-line camelcase
+    styleSheet__unstable?: string;
+    /**
+     * The list of actions to disable from the primary menu, more menu
+     * (...), and the contextual menu.
+     */
+    disabledActions?: Action[];
+    /**
+     * The tooltip to display for disabled actions.
+     */
+    disabledActionReason?: string;
+    /**
+     * The list of actions to hide from the primary menu, more menu
+     * (...), and the contextual menu.
+     */
+    hiddenActions?: Action[];
+    /**
+     * The list of actions to display from the primary menu, more menu
+     * (...), and the contextual menu.
+     * @version SDK: 1.6.0 | ThoughtSpot: ts8.nov.cl, 8.4.1-sw
+     */
+    visibleActions?: Action[];
+    /**
+     * Show alert messages and toast messages in the embedded view.
+     * @version SDK: 1.11.0 | ThoughtSpot: 8.3.0.cl, 8.4.1-sw
+     */
+    showAlerts?: boolean;
+    /**
+     * The list of runtime filters to apply to a search answer,
+     * visualization, or Liveboard.
+     */
+    runtimeFilters?: RuntimeFilter[];
+    /**
+     * The locale/language to use for the embedded view.
+     * @version SDK: 1.9.4 | ThoughtSpot 8.1.0.cl, 8.4.1-sw
+     */
+    locale?: string;
+    /**
+     * This is an object (key/val) of override flags which will be applied
+     * to the internal embedded object. This can be used to add any
+     * URL flag.
+     * Warning: This option is for advanced use only and is used internally
+     * to control embed behavior in non-regular ways. We do not publish the
+     * list of supported keys and values associated with each.
+     * @version SDK: 1.9.0 | ThoughtSpot: 8.1.0.cl, 8.4.1-sw
+     */
+    additionalFlags?: { [key: string]: string | number | boolean };
+    /**
+     * Dynamic CSSUrl and customCSS to be injected in the loaded application.
+     * You would also need to set `style-src` in the CSP settings.
+     * @version SDK: 1.17.2 | ThoughtSpot: 8.4.1-sw, 8.4.0.cl
+     * @default ''
+     */
+    customizations?: CustomisationsInterface;
+}
+
 /**
  * MessagePayload: Embed event payload: message type, data and status (start/end)
  */
@@ -778,7 +874,10 @@ export enum HostEvent {
      * Triggers the Pin action on an embedded object
      * @param - incase of Liveboard embed, takes in an object with vizId as a key
      * can be left empty for search and visualization embeds
-     * @example liveboardEmbed.trigger(HostEvent.Pin, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * @example
+     * liveboardEmbed.trigger(HostEvent.Pin, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.Pin)
+     * searchEmbed.trigger(HostEvent.Pin)
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
      */
     Pin = 'pin',
@@ -825,8 +924,11 @@ export enum HostEvent {
      */
     DownloadAsPdf = 'downloadAsPdf',
     /**
-     * Triggers the Make a copy action on a Liveboard
-     * @example liveboardEmbed.trigger(HostEvent.MakeACopy)
+     * Triggers the Make a copy action on a Liveboard, search or visualization
+     * @example
+     * liveboardEmbed.trigger(HostEvent.MakeACopy, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.MakeACopy)
+     * searchEmbed.trigger(HostEvent.MakeACopy)
      * @version SDK: 1.15.0 | ThoughtSpot: 8.7.0.cl, 8.8.1-sw
      */
     MakeACopy = 'makeACopy',
@@ -890,15 +992,74 @@ export enum HostEvent {
     /**
      * Get TML for the current search.
      * @example searchEmbed.trigger(HostEvent.GetTML)
-     * @version SDK: 1.18.0 | ThoughtSpot: 8.10.0.cl, 9.0.1-sw
+     * @version SDK: 1.18.0 | ThoughtSpot: 8.10.0.cl
      */
     GetTML = 'getTML',
+    /**
+     * Triggers the ShowUnderlyingData action on visualization or search
+     * @param - an object with vizId as a key
+     * @example
+     * liveboardEmbed.trigger(HostEvent.ShowUnderlyingData, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.ShowUnderlyingData)
+     * searchEmbed.trigger(HostEvent.ShowUnderlyingData)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    ShowUnderlyingData = 'showUnderlyingData',
+    /**
+     * Triggers the Delete action on visualization or search
+     * @param - incase of Liveboard embed, takes in an object with vizId as a key
+     * can be left empty for search and visualization embeds
+     * @example
+     * liveboardEmbed.trigger(HostEvent.Delete, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.Delete)
+     * searchEmbed.trigger(HostEvent.Delete)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    Delete = 'delete',
+    /**
+     * Triggers the SpotIQAnalyze action on visualization or search
+     * @param - incase of Liveboard embed, takes in an object with vizId as a key
+     * can be left empty for search and visualization embeds
+     * @example
+     * liveboardEmbed.trigger(HostEvent.SpotIQAnalyze, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.SpotIQAnalyze)
+     * searchEmbed.trigger(HostEvent.SpotIQAnalyze)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    SpotIQAnalyze = 'spotIQAnalyze',
+    /**
+     * Triggers the Download action on visualization or search when Displaymode is Chart
+     * @example
+     * liveboardEmbed.trigger(HostEvent.Download, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.Download)
+     * searchEmbed.trigger(HostEvent.Download)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    Download = 'download',
+    /**
+     * Triggers the downloadAsCSV action on visualization or search when Displaymode is Table
+     * @example
+     * liveboardEmbed.trigger(HostEvent.DownloadAsCsv, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.DownloadAsCsv)
+     * searchEmbed.trigger(HostEvent.DownloadAsCsv)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    DownloadAsCsv = 'downloadAsCSV',
+    /**
+     * Triggers the downloadAsXLSX action on visualization or search when Displaymode is Table
+     * @example
+     * liveboardEmbed.trigger(HostEvent.DownloadAsXlsx, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.DownloadAsXlsx)
+     * searchEmbed.trigger(HostEvent.DownloadAsXlsx)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    DownloadAsXlsx = 'downloadAsXLSX',
     /**
      * Triggers the Share action on a liveboard or answer
      * @example
      * liveboardEmbed.trigger(HostEvent.Share)
      * searchEmbed.trigger(HostEvent.Share)
-     * @version SDK: 1.19.0 | Thoughtspot: 9.0.0.cl, 9.0.1-sw
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
      */
     Share = 'share',
     /**
@@ -906,9 +1067,36 @@ export enum HostEvent {
      * @example
      * liveboardEmbed.trigger(HostEvent.Save)
      * searchEmbed.trigger(HostEvent.Save)
-     * @version SDK: 1.19.0 | Thoughtspot: 9.0.0.cl, 9.0.1-sw
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
      */
     Save = 'save',
+    /**
+     * Triggers the SyncToSheets action on visualization
+     * @param - an object with vizId as a key
+     * @example
+     * liveboardEmbed.trigger(HostEvent.SyncToSheets, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.SyncToSheets)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    SyncToSheets = 'sync-to-sheets',
+    /**
+     * Triggers the SyncToOtherApps action on visualization
+     * @param - an object with vizId as a key
+     * @example
+     * liveboardEmbed.trigger(HostEvent.SyncToOtherApps, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.SyncToOtherApps)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    SyncToOtherApps = 'sync-to-other-apps',
+    /**
+     * Triggers the ManagePipelines action on visualization
+     * @param - an object with vizId as a key
+     * @example
+     * liveboardEmbed.trigger(HostEvent.ManagePipelines, {vizId: '730496d6-6903-4601-937e-2c691821af3c'})
+     * vizEmbed.trigger(HostEvent.ManagePipelines)
+     * @version SDK: 1.19.0 | ThoughtSpot: 9.0.0.cl, 9.0.1-sw
+     */
+    ManagePipelines = 'manage-pipeline',
 }
 
 /**

package/src/utils.ts

@@ -13,6 +13,7 @@ import {
     RuntimeFilter,
     CustomisationsInterface,
     DOMSelector,
+    ViewConfig,
 } from './types';
 
 /**
@@ -179,14 +180,25 @@ export const checkReleaseVersionInBeta = (
 
 export const getCustomisations = (
     embedConfig: EmbedConfig,
+    viewConfig: ViewConfig,
 ): CustomisationsInterface => {
-    const { customCssUrl } = embedConfig;
-    let { customisations } = embedConfig;
-    customisations = customisations || ({} as CustomisationsInterface);
-    customisations.style = customisations.style || {};
-    customisations.style.customCSSUrl =
-        customisations.style.customCSSUrl || customCssUrl;
-    return customisations;
+    const customCssFromEmbedConfig = embedConfig.customCssUrl;
+    const customizationsFromViewConfig =
+        viewConfig.customizations ||
+        ((viewConfig as any).customisations as CustomisationsInterface);
+    let customizations =
+        embedConfig.customizations ||
+        ((embedConfig as any).customisations as CustomisationsInterface);
+    customizations = customizations || ({} as CustomisationsInterface);
+    customizations.style = customizations.style || {};
+    customizations.style.customCSSUrl =
+        customizationsFromViewConfig?.style.customCSSUrl ||
+        customizations.style.customCSSUrl ||
+        customCssFromEmbedConfig;
+    customizations.style.customCSS =
+        customizationsFromViewConfig?.style.customCSS ||
+        customizations.style.customCSS;
+    return customizations;
 };
 
 /**