SCAL-222310 : Init

Author: sastaachar

src/embed/embedPuppeteer.ts

@@ -0,0 +1,76 @@
+import { logger } from 'src/utils/logger';
+import { TsEmbed } from './ts-embed';
+import { Action, HostEvent } from 'src/types';
+
+class PuppetString {
+  private embedInstance: TsEmbed;
+
+  constructor(embedInstance: TsEmbed) {
+      this.embedInstance = embedInstance;
+  }
+
+  public async clickPinButton() {
+      const res = await this.embedInstance.trigger('EMBED_PUPPET_MOVE', {
+          element: 'dual-intent-open-modal',
+          action: 'click',
+      });
+
+      if (!res.data.success) {
+          throw Error('Failed to click pin button');
+      }
+
+      return this;
+  }
+
+  public async filterPinboardInput(text: string) {
+      const res = await this.embedInstance.trigger('EMBED_PUPPET_MOVE', {
+          element: 'filter-pinboard',
+          action: 'click',
+      });
+
+      if (res.data.success) {
+          const res = await this.embedInstance.trigger('EMBED_PUPPET_MOVE', {
+              element: 'filter-pinboard',
+              action: 'fill',
+              text,
+          });
+      }
+
+      throw Error('Failed to Filter pinboard');
+  }
+}
+
+class EmbedPuppeteer {
+  private embedInstance: TsEmbed;
+
+  private isPuppetEnabled = false;
+
+  private puppet: PuppetString;
+
+  constructor(embedInstance: TsEmbed) {
+      this.puppet = new PuppetString(embedInstance);
+      this.embedInstance = embedInstance;
+  }
+
+  protected async checkIfPuppetEnabled() {
+      const res = await this.embedInstance.trigger(HostEvent.EMBED_PUPPET, {
+          puppetCheck: true,
+      });
+      if (res.data.puppetEnabled) {
+          this.isPuppetEnabled = true;
+          return;
+      }
+      this.isPuppetEnabled = false;
+  }
+
+  public async pinVizToLiveboard(liveboardName: string) {
+      if (!this.isPuppetEnabled) {
+          logger.warn('Embed puppet is not enabled. Please enable puppeteer to use this feature.');
+          return false;
+      }
+
+      (await this.puppet.clickPinButton()).filterPinboardInput(liveboardName).catch((e) => {
+          logger.error('Failed to pin viz to liveboard', e);
+      });
+  }
+}

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 { isEmbedApiEvent, processEmbedApiEvent } from '../utils/embedApi/processEmbedApi';
 import { logger } from '../utils/logger';
 import { getAuthenticationToken } from '../authToken';
 import { AnswerService } from '../utils/graphql/answerService/answerService';
@@ -990,6 +991,11 @@ export class TsEmbed {
             this.handleError('Host event type is undefined');
             return null;
         }
+
+        if (!isEmbedApiEvent(messageType, data)) {
+            return processEmbedApiEvent(this.iFrame, messageType, this.thoughtSpotHost, data);
+        }
+
         return processTrigger(this.iFrame, messageType, this.thoughtSpotHost, data);
     }
 

src/types.ts

@@ -3180,7 +3180,14 @@ export enum HostEvent {
      * @version SDK: 1.29.0 | Thoughtspot: 10.1.0.cl
      */
     GetParameters = 'GetParameters',
-}
+
+    /**
+     * EmbedApi
+     *
+     * @hidden
+     */
+    EmbedApi = 'EmbedApi',
+  }
 
 /**
  * The different visual modes that the data sources panel within

src/utils/embedApi/contracts.ts

@@ -0,0 +1,60 @@
+import { HostEvent } from '../../types';
+
+export type EmbedApiContractBase = {
+  addVizToPinboard: (payload: {
+      vizId: string;
+      newVizName: string;
+      newVizDescription?: string;
+      pinboardId?: string;
+      tabId?: string;
+      newPinboardName?: string;
+      newTabName?: string;
+      pinFromStore?: boolean;
+  }) => {
+      pinboardId: string;
+      tabId: string;
+      vizId: string;
+      errors?: any;
+  };
+  saveAnswer: (payload: {
+      name: string;
+      description: string;
+      vizId: string;
+      isDiscoverable?: boolean;
+  }) => any;
+  getA3AnalysisColumns: (
+      payload: {
+          vizId: string;
+      } & any,
+  ) => {
+      data?: any;
+      errors?: any;
+  };
+  getPinboardTabInfo: () => any;
+  getDiscoverabilityStatus: () => {
+      shouldShowDiscoverability: boolean;
+      isDiscoverabilityCheckboxUnselectedPerOrg: boolean;
+  };
+  getAvailableEmbedApis: () => {
+      keys: string[];
+  };
+  getAnswerPageConfig: (payload: { vizId: string }) => any;
+  getPinboardPageConfig: () => any;
+  _notFound: (payload: any) => any;
+};
+
+export type EmbedApiName = keyof EmbedApiContractBase;
+
+export type EmbedApiArrayResponse<ApiName extends EmbedApiName> =
+  Promise<Array<{
+    redId?: string;
+    value?: ReturnType<EmbedApiContractBase[ApiName]>;
+    error?: any;
+  }>>
+
+export type EmbedApiHostEventMapping = {
+  [key: string]: string;
+  [HostEvent.Pin]: 'addVizToPinboard';
+}
+
+export type EmbedApiEventResponse<HostEventT extends HostEvent> = ReturnType<EmbedApiContractBase[EmbedApiHostEventMapping[HostEventT] extends keyof EmbedApiContractBase ? EmbedApiHostEventMapping[HostEventT] : '_notFound']>;

src/utils/embedApi/embedApiClient.ts

@@ -0,0 +1,25 @@
+import { HostEvent } from 'src/types';
+import { processTrigger } from '../processTrigger';
+import { EmbedApiArrayResponse, EmbedApiContractBase } from './contracts';
+
+export class EmbedApiClient {
+  iFrame: HTMLIFrameElement;
+
+  thoughtSpotHost: string;
+
+  constructor(iFrame: HTMLIFrameElement, thoughtSpotHost: string) {
+      this.iFrame = iFrame;
+      this.thoughtSpotHost = thoughtSpotHost;
+  }
+
+  async executeEmbedApi<ApiName extends keyof EmbedApiContractBase>(apiName: ApiName,
+      parameters: Parameters<EmbedApiContractBase[ApiName]>[0]):
+    EmbedApiArrayResponse<ApiName> {
+      const res = await processTrigger(this.iFrame, HostEvent.EmbedApi, this.thoughtSpotHost, {
+          type: apiName,
+          parameters,
+      });
+
+      return res;
+  }
+}

src/utils/embedApi/processEmbedApi.ts

@@ -0,0 +1,52 @@
+import { HostEvent } from '../../types';
+import { EmbedApiEventResponse } from './contracts';
+import { EmbedApiClient } 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;
+}
+
+/**
+ *
+ * @param iFrame
+ * @param messageType
+ * @param thoughtSpotHost
+ * @param data
+ * @returns Promise<any>
+ */
+export async function processEmbedApiEvent<T extends HostEvent>(
+    iFrame: HTMLIFrameElement,
+    messageType: T,
+    thoughtSpotHost: string,
+    data: any,
+): Promise<{
+error?: any;
+value?: EmbedApiEventResponse<T>
+}> {
+    if (messageType === HostEvent.Pin) {
+        const embedApiClient = new EmbedApiClient(iFrame, thoughtSpotHost);
+        const res = (await embedApiClient.executeEmbedApi('addVizToPinboard', {
+            ...data,
+        })).filter((r) => r.error || r.value)[0];
+        if (res.error) {
+            return { error: res?.error?.message };
+        }
+        if (res.value) {
+            return { error: res?.value.errors?.message };
+        }
+
+        // could not find a type check to tell ts both are same.
+        return { value: res.value } as any;
+    }
+
+    return { error: 'Invalid Embed API event' };
+}