@thoughtspot/visual-embed-sdk 1.22.0-alpha.4 → 1.22.0-alpha.6

package/src/embed/sage.ts

@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2023
+ *
+ * Embed ThoughtSpot Sage
+ *
+ * @summary TS Sage embed
+ * @author Mourya Balabhadra <mourya.balabhadra@thoughtspot.com>
+ */
+
+import {
+    Action, DOMSelector, Param, ViewConfig,
+} from '../types';
+import { getQueryParamString } from '../utils';
+import { V1Embed } from './ts-embed';
+
+/**
+ * The configuration attributes for the embedded search view.
+ *
+ * @group Embed components
+ */
+export interface SageViewConfig extends ViewConfig {
+    /**
+     * If set to false, eureka results are hidden
+     */
+    hideEurekaResults?: boolean;
+    /**
+     * primary flag to enable eureka(/sage) page embedding.
+     */
+    isSageEmbed?: boolean,
+    /**
+     * flag to disable changing worksheet. default false.
+     */
+    disableWorksheetChange?: boolean,
+    /**
+     * flag to hide worksheet selector. default false.
+     */
+    hideWorksheetSelector?: boolean,
+    /**
+     * If set to true, the eureka search suggestions are not shown
+     *
+     */
+    hideEurekaSuggestions?: boolean;
+}
+export const HiddenActionItemByDefaultForSageEmbed = [
+    Action.Save,
+    Action.Pin,
+    Action.EditACopy,
+    Action.SaveAsView,
+    Action.UpdateTML,
+    Action.EditTML,
+    Action.AnswerDelete,
+    Action.Share,
+];
+/**
+ * Embed ThoughtSpot search
+ *
+ * @group Embed components
+ */
+export class SageEmbed extends V1Embed {
+    /**
+     * The view configuration for the embedded ThoughtSpot sage.
+     *
+     */
+    protected viewConfig: SageViewConfig;
+
+    // eslint-disable-next-line no-useless-constructor
+    constructor(domSelector: DOMSelector, viewConfig: SageViewConfig) {
+        super(domSelector, viewConfig);
+    }
+
+    /**
+     * Constructs a map of parameters to be passed on to the
+     * embedded Eureka or Sage search page.
+     *
+     * @returns {string} query string
+     */
+    protected getEmbedParams(): string {
+        const {
+            hideEurekaResults,
+            isSageEmbed,
+            disableWorksheetChange,
+            hideWorksheetSelector,
+            hideEurekaSuggestions,
+        } = this.viewConfig;
+
+        const params = {};
+        params[Param.EmbedApp] = true;
+        params[Param.HideEurekaResults] = !!hideEurekaResults;
+        params[Param.IsSageEmbed] = !!isSageEmbed;
+        params[Param.DisableWorksheetChange] = !!disableWorksheetChange;
+        params[Param.HideWorksheetSelector] = !!hideWorksheetSelector;
+        params[Param.HideEurekaSuggestions] = !!hideEurekaSuggestions;
+        params[Param.HideActions] = [
+            ...(params[Param.HideActions] ?? []),
+            ...HiddenActionItemByDefaultForSageEmbed,
+        ];
+
+        return getQueryParamString(params, true);
+    }
+
+    /**
+     * Construct the URL of the embedded ThoughtSpot sage to be
+     * loaded in the iframe
+     *
+     * @returns {string} iframe url
+     */
+    private getIFrameSrc() {
+        const path = 'eureka';
+        const tsPostHashParams = this.getThoughtSpotPostUrlParams();
+
+        return `${this.getRootIframeSrc()}/embed/${path}${tsPostHashParams}`;
+    }
+
+    /**
+     * Render the embedded ThoughtSpot Sage
+     *
+     * @returns {SageEmbed} Eureka/Sage embed
+     */
+    public render(): SageEmbed {
+        super.render();
+
+        const src = this.getIFrameSrc();
+        this.renderV1Embed(src);
+
+        return this;
+    }
+}

package/src/errors.ts

@@ -3,4 +3,5 @@ export const ERROR_MESSAGE = {
     LIVEBOARD_VIZ_ID_VALIDATION: 'Please provide either liveboardId or pinboardId',
     TRIGGER_TIMED_OUT: 'Trigger timedout in getting response',
     SEARCHEMBED_BETA_WRANING_MESSAGE: 'Search Embed is in Beta in this release.',
+    SAGE_EMBED_BETA_WARNING_MESSAGE: 'Sage Embed is in Beta in this release.',
 };

package/src/index.ts

@@ -38,6 +38,7 @@ import {
     ContextMenuTriggerOptions,
 } from './types';
 import { CustomCssVariables } from './css-variables';
+import { SageEmbed } from './embed/sage';
 
 export {
     init,
@@ -51,6 +52,7 @@ export {
     SearchBarEmbed,
     PinboardEmbed,
     LiveboardEmbed,
+    SageEmbed,
     AppEmbed,
     AuthFailureType,
     AuthStatus,

package/src/react/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { deepMerge } from '../utils';
 import { SearchBarEmbed as _SearchBarEmbed, SearchBarViewConfig } from '../embed/search-bar';
+import { SageEmbed as _SageEmbed, SageViewConfig } from '../embed/sage';
 import { SearchEmbed as _SearchEmbed, SearchViewConfig } from '../embed/search';
 import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
 import { LiveboardEmbed as _LiveboardEmbed, LiveboardViewConfig } from '../embed/liveboard';
@@ -150,6 +151,14 @@ export const SearchBarEmbed = componentFactory<
     SearchBarViewConfig
 >(_SearchBarEmbed);
 
+interface SageEmbedProps extends EmbedProps, SageViewConfig {}
+
+export const SageEmbed = componentFactory<
+    typeof _SageEmbed,
+    SageEmbedProps,
+    SageViewConfig
+>(_SageEmbed);
+
 /**
  * Get a reference to the embed component to trigger events on the component.
  *

package/src/test/test-utils.ts

@@ -109,3 +109,10 @@ export const expectUrlMatchesWithParams = (source: string, target: string) => {
     const targetParamsObj = Object.fromEntries(targetUrl.searchParams);
     expect(sourceParamsObj).toMatchObject(targetParamsObj);
 };
+
+export const expectUrlMatch = (source: string, target: string) => {
+    expectUrlMatchesWithParams(source, target);
+    const sourceUrl = new URL(source);
+    const targetUrl = new URL(target);
+    expect(sourceUrl.hash).toBe(targetUrl.hash);
+};

package/src/types.ts

@@ -195,16 +195,17 @@ export interface customCssInterface {
     /**
      * Can be used to define a custom font face
      * like:
+     *
      * @example
      * ```js
      * rules_UNSTABLE?: {
      *     "@font-face": {
      *         "font-family": "custom-font",
-     *         "src": url("/path/") 
+     *         "src": url("/path/")
      *     };
      *   };
      * ```
-     * 
+     *
      * Also, custom css rules outside of variables.
      * @example
      * ```js
@@ -447,6 +448,11 @@ export interface EmbedConfig {
      * @version SDK: 1.12.0 | ThoughtSpot: 8.4.0.cl, 8.4.1-sw*
      */
     suppressSearchEmbedBetaWarning?: boolean;
+    /**
+     * Hide beta alert warning message for SageEmbed.
+     *
+     */
+    suppressSageEmbedBetaWarning?: boolean;
     /**
      * Custom style params for embed Config.
      *
@@ -1882,6 +1888,11 @@ export enum Param {
     HideProfleAndHelp = 'profileAndHelpInNavBarHidden',
     HideApplicationSwitcher= 'applicationSwitcherHidden',
     HideOrgSwitcher= 'orgSwitcherHidden',
+    IsSageEmbed = 'isSageEmbed',
+    HideWorksheetSelector = 'hideWorksheetSelector',
+    DisableWorksheetChange = 'disableWorksheetChange',
+    HideEurekaResults = 'hideEurekaResults',
+    HideEurekaSuggestions = 'hideEurekaSuggestions',
 }
 
 /**