SCAL-234606 Add forced token generation flags in embed sdk (#68)

Author: sastaachar

src/embed/liveboard.spec.ts

@@ -172,6 +172,23 @@ describe('Liveboard/viz embed tests', () => {
         });
     });
 
+    test('should enable viz oAuthPollingInterval true', async () => {
+        const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
+            oAuthPollingInterval: 1000,
+            isForceRedirect: true,
+            dataSourceId: '12356',
+            ...defaultViewConfig,
+            liveboardId,
+        } as LiveboardViewConfig);
+        liveboardEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true${defaultParams}&oAuthPollingInterval=1000&isForceRedirect=true&dataSourceId=12356${prefixParams}#/embed/viz/${liveboardId}`,
+            );
+        });
+    });
+
     test('should disable viz transformations when enableVizTransformations false', async () => {
         const liveboardEmbed = new LiveboardEmbed(getRootEl(), {
             enableVizTransformations: false,

src/embed/liveboard.ts

@@ -338,6 +338,45 @@ export interface LiveboardViewConfig
      * ```
      */
     hideIrrelevantChipsInLiveboardTabs?: boolean;
+
+    /**
+     * The Liveboard to run on regular intervals to fetch the cdw token.
+     * @hidden
+     * @version SDK: 1.35.0 | ThoughtSpot:10.6.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    oAuthPollingInterval: value in milliseconds,
+     * })
+     */
+    oAuthPollingInterval?: number;
+
+    /**
+     * The Liveboard is set to force a token fetch during the initial load.
+     * @hidden
+     * @version SDK: 1.35.0 | ThoughtSpot:10.6.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    isForceRedirect: false,
+     * })
+     */
+    isForceRedirect?: boolean;
+
+    /**
+     * The source connection ID for authentication.
+     * @hidden
+     * @version SDK: 1.35.0 | ThoughtSpot:10.6.0.cl
+     * @example
+     * ```js
+     * const embed = new LiveboardEmbed('#embed-container', {
+     *    ... // other options
+     *    dataSourceId: '',
+     * })
+     */
+    dataSourceId?: string;
 }
 
 /**
@@ -399,6 +438,9 @@ export class LiveboardEmbed extends V1Embed {
             enable2ColumnLayout,
             dataPanelV2 = false,
             enableCustomColumnGroups = false,
+            oAuthPollingInterval,
+            isForceRedirect,
+            dataSourceId,
         } = this.viewConfig;
 
         const preventLiveboardFilterRemoval = this.viewConfig.preventLiveboardFilterRemoval
@@ -445,6 +487,18 @@ export class LiveboardEmbed extends V1Embed {
             params[Param.enableAskSage] = enableAskSage;
         }
 
+        if (oAuthPollingInterval !== undefined) {
+            params[Param.OauthPollingInterval] = oAuthPollingInterval;
+        }
+
+        if (isForceRedirect) {
+            params[Param.IsForceRedirect] = isForceRedirect;
+        }
+
+        if (dataSourceId !== undefined) {
+            params[Param.DataSourceId] = dataSourceId;
+        }
+
         params[Param.LiveboardHeaderSticky] = isLiveboardHeaderSticky;
         params[Param.LiveboardHeaderV2] = isLiveboardCompactHeaderEnabled;
         params[Param.ShowLiveboardVerifiedBadge] = showLiveboardVerifiedBadge;

src/embed/ts-embed.ts

@@ -9,6 +9,7 @@
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
+import { FlattenType, HostEventRequest, HostEventResponse } from '../utils/embedApi/contracts';
 import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
 import { AnswerService } from '../utils/graphql/answerService/answerService';
@@ -62,6 +63,7 @@ import {
 import { AuthFailureType } from '../auth';
 import { getEmbedConfig } from './embedConfig';
 import { ERROR_MESSAGE } from '../errors';
+import { HostEventClient } from '../utils/embedApi/embedApiClient';
 
 const { version } = pkgInfo;
 
@@ -273,6 +275,7 @@ export class TsEmbed {
         const onlineEventListener = (e: Event) => {
             this.trigger(HostEvent.Reload);
         };
+
         window.addEventListener('online', onlineEventListener);
 
         const offlineEventListener = (e: Event) => {
@@ -983,7 +986,11 @@ 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<HostEventT extends HostEvent>(
+        messageType: HostEventT,
+        data?: HostEventRequest<HostEventT>,
+    ):
+      Promise<HostEventResponse<HostEventT>> {
         uploadMixpanelEvent(`${MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
 
         if (!this.isRendered) {
@@ -995,7 +1002,9 @@ export class TsEmbed {
             this.handleError('Host event type is undefined');
             return null;
         }
-        return processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
+
+        const hostEventClient = new HostEventClient(this.iFrame, this.thoughtSpotHost);
+        return hostEventClient.executeHostEvent(messageType, data);
     }
 
     /**

src/react/index.tsx

@@ -8,7 +8,7 @@ import { AppEmbed as _AppEmbed, AppViewConfig } from '../embed/app';
 import { LiveboardEmbed as _LiveboardEmbed, LiveboardViewConfig } from '../embed/liveboard';
 import { TsEmbed } from '../embed/ts-embed';
 
-import { EmbedEvent, ViewConfig } from '../types';
+import { EmbedEvent, HostEvent, ViewConfig } from '../types';
 import { EmbedProps, getViewPropsAndListeners } from './util';
 import { ConversationEmbed as _ConversationEmbed, ConversationViewConfig } from '../embed/conversation';
 

src/types.ts

@@ -3194,7 +3194,21 @@ export enum HostEvent {
      * @version SDK: 1.29.0 | Thoughtspot: 10.1.0.cl
      */
     GetParameters = 'GetParameters',
-}
+    /**
+     * Triggers update of persoanlised view for a liveboard
+     * ```js
+     * liveboardEmbed.trigger(HostEvent.UpdatePersonalisedView, {viewId: '1234'})
+     * ```
+     * @version SDK: 1.36.0 | Thoughtspot: 10.6.0.cl
+     */
+    UpdatePersonalisedView = 'UpdatePersonalisedView',
+    /**
+     * EmbedApi
+     *
+     * @hidden
+     */
+    UiPassthrough = 'UiPassthrough',
+  }
 
 /**
  * The different visual modes that the data sources panel within
@@ -3316,6 +3330,9 @@ export enum Param {
     IsUnifiedSearchExperienceEnabled = 'isUnifiedSearchExperienceEnabled',
     OverrideOrgId = 'orgId',
     EnableFlipTooltipToContextMenu = 'flipTooltipToContextMenuEnabled',
+    OauthPollingInterval = 'oAuthPollingInterval',
+    IsForceRedirect = 'isForceRedirect',
+    DataSourceId = 'dataSourceId',
 }
 
 /**

src/utils/embedApi/contracts.ts

@@ -0,0 +1,112 @@
+import { HostEvent } from '../../types';
+
+export enum EmbedApiEvent {
+  addVizToPinboard = 'addVizToPinboard',
+  saveAnswer = 'saveAnswer',
+  getA3AnalysisColumns = 'getA3AnalysisColumns',
+  getPinboardTabInfo = 'getPinboardTabInfo',
+  getDiscoverabilityStatus = 'getDiscoverabilityStatus',
+  getAvailableEmbedApis = 'getAvailableEmbedApis',
+  getAnswerPageConfig = 'getAnswerPageConfig',
+  getPinboardPageConfig = 'getPinboardPageConfig',
+  embedApiEventNotFound = 'embedApiEventNotFound',
+}
+
+export type EmbedApiContractBase = {
+  [EmbedApiEvent.addVizToPinboard]: {
+    request: {
+      vizId?: string;
+      newVizName: string;
+      newVizDescription?: string;
+      pinboardId?: string;
+      tabId?: string;
+      newPinboardName?: string;
+      newTabName?: string;
+      pinFromStore?: boolean;
+    };
+    response: {
+      pinboardId: string extends string ? null : string;
+      tabId: string;
+      vizId: string;
+      errors?: any;
+    };
+  };
+  [EmbedApiEvent.saveAnswer]: {
+    request: {
+      name: string;
+      description: string;
+      vizId: string;
+      isDiscoverable?: boolean;
+    };
+    response: any;
+  };
+  [EmbedApiEvent.getA3AnalysisColumns]: {
+    request: {
+      vizId: string;
+    };
+    response: {
+      data?: any;
+      errors?: any;
+    };
+  };
+  [EmbedApiEvent.getPinboardTabInfo]: {
+    request: any;
+    response: any;
+  };
+  [EmbedApiEvent.getDiscoverabilityStatus]: {
+    request: any;
+    response: {
+      shouldShowDiscoverability: boolean;
+      isDiscoverabilityCheckboxUnselectedPerOrg: boolean;
+    };
+  };
+  [EmbedApiEvent.getAvailableEmbedApis]: {
+    request: any;
+    response: {
+      keys: string[];
+    };
+  };
+  [EmbedApiEvent.getAnswerPageConfig]: {
+    request: {
+      vizId: string;
+    };
+    response: any;
+  };
+  [EmbedApiEvent.getPinboardPageConfig]: {
+    request: any;
+    response: any;
+  };
+  [EmbedApiEvent.embedApiEventNotFound]: {
+    request: any;
+    response: any;
+  };
+};
+
+export type EmbedApiRequest<T extends keyof EmbedApiContractBase> = EmbedApiContractBase[T]['request'];
+export type EmbedApiResponse<T extends keyof EmbedApiContractBase> = EmbedApiContractBase[T]['response'];
+
+export type EmbedApiArrayResponse<ApiName extends keyof EmbedApiContractBase> =
+  Promise<Array<{
+    redId?: string;
+    value?: EmbedApiResponse<ApiName>;
+    error?: any;
+  }>>
+
+export type EmbedApiHostEventMapping = {
+  [HostEvent.Pin]: EmbedApiEvent.addVizToPinboard;
+  'hostEventNotMapped': EmbedApiEvent.embedApiEventNotFound;
+}
+
+export type FlattenType<T> = T extends infer R ? { [K in keyof R]: R[K] } : never;
+
+export type HostEventRequest<HostEventT extends HostEvent> =
+HostEventT extends keyof EmbedApiHostEventMapping ?
+FlattenType<EmbedApiRequest<EmbedApiHostEventMapping[HostEventT]>> : any;
+
+export type HostEventResponse<HostEventT extends HostEvent> =
+  HostEventT extends keyof EmbedApiHostEventMapping ?
+    {
+      value?: EmbedApiResponse<EmbedApiHostEventMapping[HostEventT]>
+      error?: any;
+    }
+   : any;

src/utils/embedApi/embedApiClient.ts

@@ -0,0 +1,63 @@
+import { HostEvent } from '../../types';
+import { processTrigger } from '../processTrigger';
+import {
+    EmbedApiArrayResponse,
+    EmbedApiContractBase,
+    EmbedApiEvent, EmbedApiRequest, HostEventRequest, HostEventResponse,
+} from './contracts';
+
+export class HostEventClient {
+  iFrame: HTMLIFrameElement;
+
+  thoughtSpotHost: string;
+
+  constructor(iFrame: HTMLIFrameElement, thoughtSpotHost: string) {
+      this.iFrame = iFrame;
+      this.thoughtSpotHost = thoughtSpotHost;
+  }
+
+  async executeEmbedApi<ApiName extends keyof EmbedApiContractBase>(apiName: ApiName,
+      parameters: EmbedApiRequest<ApiName>):
+    EmbedApiArrayResponse<ApiName> {
+      const res = await processTrigger(this.iFrame, HostEvent.UiPassthrough, this.thoughtSpotHost, {
+          type: apiName,
+          parameters,
+      });
+
+      return res;
+  }
+
+  async hostEventFallback(hostEvent: HostEvent, data: any): Promise<any> {
+      return processTrigger(this.iFrame, hostEvent, this.thoughtSpotHost, data);
+  }
+
+  async handlePinEvent(
+      payload: HostEventRequest<HostEvent.Pin>,
+  ): Promise<HostEventResponse<HostEvent.Pin>> {
+      const res = (await this.executeEmbedApi(EmbedApiEvent.addVizToPinboard, payload))
+          .filter((r) => r.error || r.value)[0];
+
+      if (!res) {
+          const noVizFoundError = `No viz found${payload.vizId ? ` with id ${payload.vizId}` : ''}`;
+          return { error: noVizFoundError } as HostEventResponse<HostEvent.Pin>;
+      }
+
+      if (res.error) {
+          return { error: res?.error?.message };
+      }
+      if (res.value?.errors?.message) {
+          return { error: res?.value.errors?.message };
+      }
+
+      return { value: res.value };
+  }
+
+  async executeHostEvent<T extends HostEvent>(hostEvent: HostEvent, payload: HostEventRequest<T>):
+    Promise<HostEventResponse<HostEvent>> {
+      if (hostEvent === HostEvent.Pin && typeof payload === 'object') {
+          return this.handlePinEvent(payload as HostEventRequest<HostEvent.Pin>);
+      }
+
+      return this.hostEventFallback(hostEvent, payload);
+  }
+}

src/utils/embedApi/processEmbedApi.ts

@@ -0,0 +1,18 @@
+import { EmbedEvent, HostEvent } from '../../types';
+import {
+    EmbedApiEvent, EmbedApiResponse, FlattenType, HostEventRequest, HostEventResponse,
+} from './contracts';
+import { HostEventClient } from './embedApiClient';
+
+/**
+ * Check if the event is an embed API event.
+ * @param messageType
+ * @param payload
+ * @returns boolean
+ */
+export function isEmbedApiEvent(messageType: HostEvent, payload: any): boolean {
+    if (messageType === HostEvent.Pin && typeof payload === 'object') {
+        return true;
+    }
+    return false;
+}