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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.40.1-alpha.2",
+    "version": "1.40.1",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -38,7 +38,7 @@
     "size-limit": [
         {
             "path": "dist/tsembed.es.js",
-            "limit": "31 kB"
+            "limit": "32 kB"
         }
     ],
     "scripts": {
@@ -55,7 +55,7 @@
         "docgen": "typedoc --tsconfig tsconfig.json --theme typedoc-theme --json static/typedoc/typedoc.json --disableOutputCheck",
         "test-sdk": "jest -c jest.config.sdk.js --runInBand",
         "test": "npm run test-sdk",
-        "posttest": "cat ./coverage/sdk/lcov.info | coveralls",
+        "posttest": "cat ./coverage/sdk/lcov.info | npx coveralls-next",
         "is-publish-allowed": "node scripts/is-publish-allowed.js",
         "prepublishOnly": "npm run is-publish-allowed && npm run test && npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
         "check-size": "npm run build && size-limit",
@@ -85,7 +85,7 @@
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.2.1",
         "@rollup/plugin-replace": "^5.0.2",
-        "@size-limit/preset-big-lib": "^8.2.6",
+        "@size-limit/preset-big-lib": "^11.2.0",
         "@testing-library/dom": "^7.31.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
@@ -96,11 +96,12 @@
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^8.28.0",
         "@typescript-eslint/parser": "^8.28.0",
+        "ajv": "^8.17.1",
         "asciidoctor": "^2.2.1",
         "babel-jest": "^26.6.3",
         "babel-preset-gatsby": "^1.10.0",
         "command-line-args": "^5.1.1",
-        "coveralls": "^3.1.0",
+        "coveralls-next": "^5.0.0",
         "crypto": "^1.0.1",
         "current-git-branch": "^1.1.0",
         "dts-bundle": "^0.7.3",
@@ -120,7 +121,7 @@
         "highlight.js": "^10.6.0",
         "html-to-text": "^8.0.0",
         "identity-obj-proxy": "^3.0.0",
-        "istanbul-merge": "^1.1.1",
+        "istanbul-merge": "^2.0.0",
         "jest": "^26.6.3",
         "jest-fetch-mock": "^3.0.3",
         "jsdom": "^17.0.0",

package/src/css-variables.ts

@@ -472,4 +472,399 @@ export interface CustomCssVariables {
      * Background color of checkbox.
      */
     '--ts-var-checkbox-background-color'?: string;
-  }
+
+    /**
+     * Height of the tiles in the Liveboard.
+     */
+    '--ts-var-viz-tile-height'?: string;
+
+    /**
+     * Background color of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-background'?: string;
+
+    /**
+     * Font color of the title of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-title-color'?: string;
+
+    /**
+     * Font size of the title of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-title-fontsize'?: string;
+
+    /**
+     * Background color of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-background'?: string;
+
+    /**
+     * Font size of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-fontsize'?: string;
+
+    /**
+     * Font color of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-font-color'?: string;
+
+    /**
+     * Border color of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-border-color'?: string;
+
+    /**
+     * Background color of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-background'?: string;
+
+    /**
+     * Border radius of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-border-radius'?: string;
+
+    /**
+     * Padding of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-padding'?: string;
+
+    /**
+     * Background color of the table header in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-table-header-background'?: string;
+
+    /**
+     * Padding of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-padding'?: string;
+
+    /**
+     * Padding of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-padding'?: string;
+
+    /**
+     * Font size of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-size'?: string;
+
+    /**
+     * Font weight of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-weight'?: string;
+
+    /**
+     * Font size of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-size'?: string;
+
+    /**
+     * Font weight of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-weight'?: string;
+
+    /**
+     * Font size of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-size'?: string;
+
+    /**
+     * Font weight of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-weight'?: string;
+
+    /**
+     * Border of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-border'?: string;
+
+    /**
+     * Padding of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-padding'?: string;
+
+    /**
+     * Padding of the answer viz in the Liveboard.
+     */
+    '--ts-var-liveboard-answer-viz-padding'?: string;
+
+    /**
+     * Background color of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-background'?: string;
+
+    /**
+     * Border color of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-border-color'?: string;
+
+    /**
+     * Font color of the heading of the note title in the Liveboard.
+     */
+    '--ts-var-liveboard-notetitle-heading-font-color'?: string;
+
+    /**
+     * Font color of the body of the note title in the Liveboard.
+     */
+    '--ts-var-liveboard-notetitle-body-font-color'?: string;
+
+    /**
+     * Font color of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-color'?: string;
+
+    /**
+     * Font color of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-color'?: string;
+
+    /**
+     * Font color of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-color'?: string;
+
+    /**
+     * Background color of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-background'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard.
+     */
+    '--ts-var-liveboard-chip-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard.
+     */
+    '--ts-var-liveboard-chip-color'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard on hover.
+     */
+    '--ts-var-liveboard-chip--hover-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard on hover.
+     */
+    '--ts-var-liveboard-chip--hover-color'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard on active.
+     */
+    '--ts-var-liveboard-chip--active-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard on active.
+     */
+    '--ts-var-liveboard-chip--active-color'?: string;
+
+    /**
+     * Width of the side panel in the Liveboard.
+     */
+    '--ts-var-side-panel-width'?: string;
+
+    /**
+     * Background color of the edit bar in the Liveboard.
+     */
+    '--ts-var-liveboard-edit-bar-background'?: string;
+
+    /**
+     * Breakpoint for the dual column layout in the Liveboard.
+     */
+    '--ts-var-liveboard-dual-column-breakpoint'?: string;
+
+    /**
+     * Breakpoint for the single column layout in the Liveboard.
+     */
+    '--ts-var-liveboard-single-column-breakpoint'?: string;
+
+    /**
+     * Background color of the cross filter layout in the Liveboard.
+     */
+    '--ts-var-liveboard-cross-filter-layout-background'?: string;
+
+    /**
+     * Border color of the active tab in the Liveboard.
+     */
+    '--ts-var-liveboard-tab-active-border-color'?: string;
+
+    /**
+     * Font color of the hover tab in the Liveboard.
+     */
+    '--ts-var-liveboard-tab-hover-color'?: string;
+
+    /**
+     * Font size of the title of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-title-fontsize'?: string;
+
+    /**
+     * Font weight of the title of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-title-fontweight'?: string;
+
+    /**
+     * Font weight of the description of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-description-font-weight'?: string;
+
+    /**
+     * Opacity of the description of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-description-opacity'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard.
+     */
+    '--ts-var-parameter-chip-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard.
+     */
+    '--ts-var-parameter-chip-text-color'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard on hover.
+     */
+    '--ts-var-parameter-chip-hover-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard on hover.
+     */
+    '--ts-var-parameter-chip-hover-text-color'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard on active.
+     */
+    '--ts-var-parameter-chip-active-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard on active.
+     */
+    '--ts-var-parameter-chip-active-text-color'?: string;
+
+    /**
+     * Background color of the action button in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-action-button-background'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-action-button-font-color'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header on hover.
+     */
+    '--ts-var-liveboard-header-action-button-hover-color'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header on active.
+     */
+    '--ts-var-liveboard-header-action-button-active-color'?: string;
+
+    /**
+     * Background color of the badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-background'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-font-color'?: string;
+
+    /**
+     * Background color of the modified badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-modified-background'?: string;
+
+    /**
+     * Font color of the modified badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-modified-font-color'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header on hover.
+     */
+    '--ts-var-liveboard-header-badge-hover-color'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header on active.
+     */
+    '--ts-var-liveboard-header-badge-active-color'?: string;
+
+    /**
+     * Font color of the hero text in the KPI widget.
+     */
+    '--ts-var-kpi-hero-color'?: string;
+
+    /**
+     * Font color of the comparison text in the KPI widget.
+     */
+    '--ts-var-kpi-comparison-color'?: string;
+
+    /**
+     * Font color of the analyze text in the KPI widget.
+     */
+    '--ts-var-kpi-analyze-text-color'?: string;
+
+    /**
+     * Font color of the legend title in the heatmap chart.
+     */
+    '--ts-var-chart-heatmap-legend-title-color'?: string;
+
+    /**
+     * Font color of the legend label in the heatmap chart.
+     */
+    '--ts-var-chart-heatmap-legend-label-color'?: string;
+
+    /**
+     * Font color of the legend title in the treemap chart.
+     */
+    '--ts-var-chart-treemap-legend-title-color'?: string;
+
+    /**
+     * Font color of the legend label in the treemap chart.
+     */
+    '--ts-var-chart-treemap-legend-label-color'?: string;
+
+    /**
+     * Color of the positive change in the KPI.
+     */
+    '--ts-var-kpi-positive-change-color'?: string;
+
+    /**
+     * Color of the negative change in the KPI.
+     */
+    '--ts-var-kpi-negative-change-color'?: string;
+ 
+    /**
+     * Background color of the change analysis insights.
+     */
+    '--ts-var-change-analysis-insights-background'?: string;
+
+    /**
+     * Background color of the forecasting card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-forecasting-card-background'?: string;
+
+    /**
+     * Background color of the outlier card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-outlier-card-background'?: string;
+
+    /**
+     * Background color of the trend card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-trend-card-background'?: string;
+    
+    /**
+     * Background color of the crosscorrelation card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-crosscorrelation-card-background'?: string;
+    
+    /**
+     * Background color of the summary header in the CCA modal.
+     */
+    '--ts-var-cca-modal-summary-header-background'?: string;
+  }

package/src/embed/app.spec.ts

@@ -593,9 +593,10 @@ describe('App embed tests', () => {
         });
     });
 
-    test('Should add navigationVersion=v3 & modularHomeExperience=false when primaryNavbarVersion is Sliding to the iframe src', async () => {
+    test('Should add navigationVersion=v3 & modularHomeExperience=true when primaryNavbarVersion is Sliding to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
+            // Not included the homePage v2 config under discoveryExperience.
             discoveryExperience: {
                 primaryNavbarVersion: PrimaryNavbarVersion.Sliding,
             },
@@ -605,7 +606,58 @@ describe('App embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=true&navigationVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add homepageVersion=v3 & navigationVersion=v3 & modularHomeExperience=true when Sliding and ModularWithStylingChanges configured in the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            discoveryExperience: {
+                primaryNavbarVersion: PrimaryNavbarVersion.Sliding,
+                homePage: HomePage.ModularWithStylingChanges,
+            },
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=true&navigationVersion=v3&homepageVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add homepageVersion=v3 & navigationVersion=v3 & modularHomeExperience=true when homePage is ModularWithStylingChanges to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            // primaryNavbarVersion is not included under discoveryExperience,
+            // then it set navigationVersion=v2 and modularHomeExperience=false.
+            discoveryExperience: {
+                homePage: HomePage.ModularWithStylingChanges,
+            },
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2&homepageVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add navigationVersion=v2 when primaryNavbarVersion is not added to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2${defaultParams}${defaultParamsPost}#/home`,
             );
         });
     });

package/src/embed/app.ts

@@ -107,6 +107,11 @@ export enum HomePage {
      * It serves as the foundational version of the home page.
      */
     Modular = 'v2',
+    /**
+     * ModularWithStylingChanges (v3) introduces Modular Home Experience
+     * with styling changes.
+     */
+    ModularWithStylingChanges = 'v3',
 }
 
 /**
@@ -740,10 +745,21 @@ export class AppEmbed extends V1Embed {
             params[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
 
+        // Set navigation to v2 by default to avoid problems like the app
+        // switcher (9-dot menu) not showing when v3 navigation is turned on
+        // at the cluster level.
+        // To use v3 navigation, we must manually set the discoveryExperience
+        // settings.
+        params[Param.NavigationVersion] = 'v2';
+        // Set homePageVersion to v2 by default to reset the LD flag value
+        // for the homepageVersion.
+        params[Param.HomepageVersion] = 'v2';
         if (discoveryExperience) {
             // primaryNavbarVersion v3 will enabled the new left navigation
             if (discoveryExperience.primaryNavbarVersion === PrimaryNavbarVersion.Sliding) {
                 params[Param.NavigationVersion] = discoveryExperience.primaryNavbarVersion;
+                // Enable the modularHomeExperience when Sliding is enabled.
+                params[Param.ModularHomeExperienceEnabled] = true;
             }
 
             // homePage v2 will enable the modular home page
@@ -751,6 +767,14 @@ export class AppEmbed extends V1Embed {
             if (discoveryExperience.homePage === HomePage.Modular) {
                 params[Param.ModularHomeExperienceEnabled] = true;
             }
+
+            // ModularWithStylingChanges (v3) introduces the styling changes
+            // to the Modular Homepage.
+            // v3 will be the base version of homePageVersion.
+            if (discoveryExperience.homePage === HomePage.ModularWithStylingChanges) {
+                params[Param.HomepageVersion] = HomePage.ModularWithStylingChanges;
+            }
+
             // listPageVersion v3 will enable the new list page
             if (discoveryExperience.listPageVersion === ListPage.ListWithUXChanges) {
                 params[Param.ListPageVersion] = discoveryExperience.listPageVersion;

package/src/embed/bodyless-conversation.ts

@@ -39,14 +39,6 @@ export class ConversationMessage extends TsEmbed {
         super(container, viewConfig);
     }
 
-    protected getEmbedParamsObject() {
-        const queryParams = this.getBaseQueryParams();
-
-        queryParams[Param.HideActions] = [...(queryParams[Param.HideActions] ?? [])];
-        queryParams[Param.isSpotterAgentEmbed] = true;
-        return queryParams;
-    }
-
     public getIframeSrc() {
         const {
             sessionId,
@@ -57,8 +49,10 @@ export class ConversationMessage extends TsEmbed {
             messageId,
         } = this.viewConfig;
         const path = 'conv-assist-answer';
-        const queryParams = this.getEmbedParamsObject();
+        const queryParams = this.getBaseQueryParams();
 
+        queryParams[Param.HideActions] = [...(queryParams[Param.HideActions] ?? [])];
+        queryParams[Param.isSpotterAgentEmbed] = true;
         let query = '';
         const queryParamsString = getQueryParamString(queryParams, true);
         if (queryParamsString) {