@thoughtspot/visual-embed-sdk
Version:
ThoughtSpot Embed SDK
1,120 lines (1,119 loc) • 65.9 kB
JavaScript
"use strict";
/**
* Copyright (c) 2022
*
* Base classes
* @summary Base classes
* @author Ayon Ghosh <ayon.ghosh@thoughtspot.com>
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.V1Embed = exports.TsEmbed = exports.THOUGHTSPOT_PARAM_PREFIX = void 0;
const tslib_1 = require("tslib");
const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
const isEmpty_1 = tslib_1.__importDefault(require("lodash/isEmpty"));
const isObject_1 = tslib_1.__importDefault(require("lodash/isObject"));
const contracts_1 = require("./hostEventClient/contracts");
const logger_1 = require("../utils/logger");
const authToken_1 = require("../authToken");
const answerService_1 = require("../utils/graphql/answerService/answerService");
const utils_1 = require("../utils");
const custom_actions_1 = require("../utils/custom-actions");
const config_1 = require("../config");
const types_1 = require("../types");
const mixpanel_service_1 = require("../mixpanel-service");
const processData_1 = require("../utils/processData");
const package_json_1 = tslib_1.__importDefault(require("../../package.json"));
const base_1 = require("./base");
const auth_1 = require("../auth");
const embedConfig_1 = require("./embedConfig");
const errors_1 = require("../errors");
const sessionInfoService_1 = require("../utils/sessionInfoService");
const host_event_client_1 = require("./hostEventClient/host-event-client");
const api_intercept_1 = require("../api-intercept");
const { version } = package_json_1.default;
/**
* Global prefix for all Thoughtspot postHash Params.
*/
exports.THOUGHTSPOT_PARAM_PREFIX = 'ts-';
const TS_EMBED_ID = '_thoughtspot-embed';
/**
* The event id map from v2 event names to v1 event id
* v1 events are the classic embed events implemented in Blink v1
* We cannot rename v1 event types to maintain backward compatibility
* @internal
*/
const V1EventMap = {};
/**
* Base class for embedding v2 experience
* Note: the v2 version of ThoughtSpot Blink is built on the new stack:
* React+GraphQL
*/
class TsEmbed {
/**
* Setter for the iframe element
* @param {HTMLIFrameElement} iFrame HTMLIFrameElement
*/
setIframeElement(iFrame) {
this.iFrame = iFrame;
this.hostEventClient.setIframeElement(iFrame);
}
constructor(domSelector, viewConfig) {
/**
* The key to store the embed instance in the DOM node
*/
this.embedNodeKey = '__tsEmbed';
this.isAppInitialized = false;
/**
* Should we encode URL Query Params using base64 encoding which thoughtspot
* will generate for embedding. This provides additional security to
* thoughtspot clusters against Cross site scripting attacks.
* @default false
*/
this.shouldEncodeUrlQueryParams = false;
this.defaultHiddenActions = [types_1.Action.ReportError];
/**
* Handler for fullscreen change events
*/
this.fullscreenChangeHandler = null;
this.subscribedListeners = {};
this.messageEventListener = (event) => {
const eventType = this.getEventType(event);
const eventPort = this.getEventPort(event);
const eventData = this.formatEventData(event, eventType);
if (event.source === this.iFrame.contentWindow) {
const processedEventData = (0, processData_1.processEventData)(eventType, eventData, this.thoughtSpotHost, this.isPreRendered ? this.preRenderWrapper : this.el);
if (eventType === types_1.EmbedEvent.ApiIntercept) {
this.handleApiInterceptEvent({ eventData, eventPort });
return;
}
this.executeCallbacks(eventType, processedEventData, eventPort);
}
};
/**
* Send Custom style as part of payload of APP_INIT
* @param _
* @param responder
*/
this.appInitCb = async (_, responder) => {
try {
const appInitData = await this.getAppInitData();
this.isAppInitialized = true;
responder({
type: types_1.EmbedEvent.APP_INIT,
data: appInitData,
});
}
catch (e) {
logger_1.logger.error(`AppInit failed, Error : ${e === null || e === void 0 ? void 0 : e.message}`);
}
};
/**
* Sends updated auth token to the iFrame to avoid user logout
* @param _
* @param responder
*/
this.updateAuthToken = async (_, responder) => {
const { authType } = this.embedConfig;
let { autoLogin } = this.embedConfig;
// Default autoLogin: true for cookieless if undefined/null, otherwise
// false
autoLogin = autoLogin !== null && autoLogin !== void 0 ? autoLogin : (authType === types_1.AuthType.TrustedAuthTokenCookieless);
if (autoLogin && authType === types_1.AuthType.TrustedAuthTokenCookieless) {
try {
const authToken = await (0, authToken_1.getAuthenticationToken)(this.embedConfig);
responder({
type: types_1.EmbedEvent.AuthExpire,
data: { authToken },
});
}
catch (e) {
logger_1.logger.error(`${errors_1.ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${e === null || e === void 0 ? void 0 : e.message}`);
(0, processData_1.processAuthFailure)(e, this.isPreRendered ? this.preRenderWrapper : this.el);
}
}
else if (autoLogin) {
(0, base_1.handleAuth)();
}
(0, base_1.notifyAuthFailure)(auth_1.AuthFailureType.EXPIRY);
};
/**
* Auto Login and send updated authToken to the iFrame to avoid user session logout
* @param _
* @param responder
*/
this.idleSessionTimeout = (_, responder) => {
(0, base_1.handleAuth)().then(async () => {
let authToken = '';
try {
authToken = await (0, authToken_1.getAuthenticationToken)(this.embedConfig);
responder({
type: types_1.EmbedEvent.IdleSessionTimeout,
data: { authToken },
});
}
catch (e) {
logger_1.logger.error(`${errors_1.ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${e === null || e === void 0 ? void 0 : e.message}`);
(0, processData_1.processAuthFailure)(e, this.isPreRendered ? this.preRenderWrapper : this.el);
}
}).catch((e) => {
logger_1.logger.error(`Auto Login failed, Error : ${e === null || e === void 0 ? void 0 : e.message}`);
});
(0, base_1.notifyAuthFailure)(auth_1.AuthFailureType.IDLE_SESSION_TIMEOUT);
};
/**
* Register APP_INIT event and sendback init payload
*/
this.registerAppInit = () => {
this.on(types_1.EmbedEvent.APP_INIT, this.appInitCb, { start: false }, true);
this.on(types_1.EmbedEvent.AuthExpire, this.updateAuthToken, { start: false }, true);
this.on(types_1.EmbedEvent.IdleSessionTimeout, this.idleSessionTimeout, { start: false }, true);
const embedListenerReadyHandler = this.createEmbedContainerHandler(types_1.EmbedEvent.EmbedListenerReady);
this.on(types_1.EmbedEvent.EmbedListenerReady, embedListenerReadyHandler, { start: false }, true);
const authInitHandler = this.createEmbedContainerHandler(types_1.EmbedEvent.AuthInit);
this.on(types_1.EmbedEvent.AuthInit, authInitHandler, { start: false }, true);
};
this.showPreRenderByDefault = false;
/**
* We can process the customer given payload before sending it to the embed port
* Embed event handler -> responder -> createEmbedEventResponder -> send response
* @param eventPort The event port for a specific MessageChannel
* @param eventType The event type
* @returns
*/
this.createEmbedEventResponder = (eventPort, eventType) => {
const getPayloadToSend = (payload) => {
if (eventType === types_1.EmbedEvent.OnBeforeGetVizDataIntercept) {
return (0, api_intercept_1.processLegacyInterceptResponse)(payload);
}
if (eventType === types_1.EmbedEvent.ApiIntercept) {
return (0, api_intercept_1.processApiInterceptResponse)(payload);
}
return payload;
};
return (payload) => {
const payloadToSend = getPayloadToSend(payload);
this.triggerEventOnPort(eventPort, payloadToSend);
};
};
/**
* @hidden
* Internal state to track if the embed container is loaded.
* This is used to trigger events after the embed container is loaded.
*/
this.isEmbedContainerLoaded = false;
/**
* @hidden
* Internal state to track the callbacks to be executed after the embed container
* is loaded.
* This is used to trigger events after the embed container is loaded.
*/
this.embedContainerReadyCallbacks = [];
this.createEmbedContainerHandler = (source) => () => {
const processEmbedContainerReady = () => {
logger_1.logger.debug('processEmbedContainerReady');
this.isEmbedContainerLoaded = true;
this.executeEmbedContainerReadyCallbacks();
};
if (source === types_1.EmbedEvent.AuthInit) {
const AUTH_INIT_FALLBACK_DELAY = 1000;
// Wait for 1 second to ensure the embed container is loaded
// This is a workaround to ensure the embed container is loaded
// this is needed until all clusters have EmbedListenerReady event
setTimeout(processEmbedContainerReady, AUTH_INIT_FALLBACK_DELAY);
}
else if (source === types_1.EmbedEvent.EmbedListenerReady) {
processEmbedContainerReady();
}
};
this.validatePreRenderViewConfig = (viewConfig) => {
var _a;
const preRenderAllowedKeys = ['preRenderId', 'vizId', 'liveboardId'];
const preRenderedObject = (_a = this.insertedDomEl) === null || _a === void 0 ? void 0 : _a[this.embedNodeKey];
if (!preRenderedObject)
return;
if (viewConfig.preRenderId) {
const allOtherKeys = Object.keys(viewConfig).filter((key) => !preRenderAllowedKeys.includes(key) && !key.startsWith('on'));
allOtherKeys.forEach((key) => {
if (!(0, utils_1.isUndefined)(viewConfig[key])
&& !(0, isEqual_1.default)(viewConfig[key], preRenderedObject.viewConfig[key])) {
logger_1.logger.warn(`${viewConfig.embedComponentType || 'Component'} was pre-rendered with `
+ `"${key}" as "${JSON.stringify(preRenderedObject.viewConfig[key])}" `
+ `but a different value "${JSON.stringify(viewConfig[key])}" `
+ 'was passed to the Embed component. '
+ 'The new value provided is ignored, the value provided during '
+ 'preRender is used.');
}
});
}
};
this.el = (0, utils_1.getDOMNode)(domSelector);
this.eventHandlerMap = new Map();
this.isError = false;
this.viewConfig = {
excludeRuntimeFiltersfromURL: false,
excludeRuntimeParametersfromURL: false,
...viewConfig,
};
this.registerAppInit();
(0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
...viewConfig,
});
const embedConfig = (0, embedConfig_1.getEmbedConfig)();
this.embedConfig = embedConfig;
this.hostEventClient = new host_event_client_1.HostEventClient(this.iFrame);
this.isReadyForRenderPromise = (0, base_1.getInitPromise)().then(async () => {
if (!embedConfig.authTriggerContainer && !embedConfig.useEventForSAMLPopup) {
this.embedConfig.authTriggerContainer = domSelector;
}
this.thoughtSpotHost = (0, config_1.getThoughtSpotHost)(embedConfig);
this.thoughtSpotV2Base = (0, config_1.getV2BasePath)(embedConfig);
this.shouldEncodeUrlQueryParams = embedConfig.shouldEncodeUrlQueryParams;
});
}
/**
* Throws error encountered during initialization.
*/
throwInitError() {
this.handleError({
errorType: types_1.ErrorDetailsTypes.VALIDATION_ERROR,
message: errors_1.ERROR_MESSAGE.INIT_SDK_REQUIRED,
code: types_1.EmbedErrorCodes.INIT_ERROR,
error: errors_1.ERROR_MESSAGE.INIT_SDK_REQUIRED,
});
}
/**
* Handles errors within the SDK
* @param error The error message or object
* @param errorDetails The error details
*/
handleError(errorDetails) {
this.isError = true;
this.executeCallbacks(types_1.EmbedEvent.Error, errorDetails);
// Log error
logger_1.logger.error(errorDetails);
}
/**
* Extracts the type field from the event payload
* @param event The window message event
*/
getEventType(event) {
var _a, _b;
return ((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) || ((_b = event.data) === null || _b === void 0 ? void 0 : _b.__type);
}
/**
* Extracts the port field from the event payload
* @param event The window message event
* @returns
*/
getEventPort(event) {
if (event.ports.length && event.ports[0]) {
return event.ports[0];
}
return null;
}
/**
* Checks if preauth cache is enabled
* from the view config and embed config
* @returns boolean
*/
isPreAuthCacheEnabled() {
// Disable preauth cache when:
// 1. overrideOrgId is present since:
// - cached auth info would be for wrong org
// - info call response changes for each different overrideOrgId
// 2. disablePreauthCache is explicitly set to true
// 3. FullAppEmbed has primary navbar visible since:
// - primary navbar requires fresh auth state for navigation
// - cached auth may not reflect current user permissions
const isDisabled = (this.viewConfig.overrideOrgId !== undefined
|| this.embedConfig.disablePreauthCache === true
|| this.isFullAppEmbedWithVisiblePrimaryNavbar());
return !isDisabled;
}
/**
* Checks if current embed is FullAppEmbed with visible primary navbar
* @returns boolean
*/
isFullAppEmbedWithVisiblePrimaryNavbar() {
const appViewConfig = this.viewConfig;
// Check if this is a FullAppEmbed (AppEmbed)
// showPrimaryNavbar defaults to true if not explicitly set to false
return (appViewConfig.embedComponentType === 'AppEmbed'
&& appViewConfig.showPrimaryNavbar === true);
}
/**
* fix for ts7.sep.cl
* will be removed for ts7.oct.cl
* @param event
* @param eventType
* @hidden
*/
formatEventData(event, eventType) {
const eventData = {
...event.data,
type: eventType,
};
if (!eventData.data) {
eventData.data = event.data.payload;
}
return eventData;
}
/**
* Subscribe to network events (online/offline) that should
* work regardless of auth status
*/
subscribeToNetworkEvents() {
this.unsubscribeToNetworkEvents();
const onlineEventListener = (e) => {
this.trigger(types_1.HostEvent.Reload);
};
window.addEventListener('online', onlineEventListener);
const offlineEventListener = (e) => {
const errorDetails = {
errorType: types_1.ErrorDetailsTypes.NETWORK,
message: errors_1.ERROR_MESSAGE.OFFLINE_WARNING,
code: types_1.EmbedErrorCodes.NETWORK_ERROR,
offlineWarning: errors_1.ERROR_MESSAGE.OFFLINE_WARNING,
};
this.executeCallbacks(types_1.EmbedEvent.Error, errorDetails);
logger_1.logger.warn(errorDetails);
};
window.addEventListener('offline', offlineEventListener);
this.subscribedListeners.online = onlineEventListener;
this.subscribedListeners.offline = offlineEventListener;
}
handleApiInterceptEvent({ eventData, eventPort }) {
const executeEvent = (_eventType, data) => {
this.executeCallbacks(_eventType, data, eventPort);
};
const getUnsavedAnswerTml = async (props) => {
var _a, _b;
const response = await this.triggerUIPassThrough(contracts_1.UIPassthroughEvent.GetUnsavedAnswerTML, props);
return (_b = (_a = response.filter((item) => item.value)) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.value;
};
(0, api_intercept_1.handleInterceptEvent)({ eventData, executeEvent, viewConfig: this.viewConfig, getUnsavedAnswerTml });
}
/**
* Subscribe to message events that depend on successful iframe setup
*/
subscribeToMessageEvents() {
this.unsubscribeToMessageEvents();
window.addEventListener('message', this.messageEventListener);
this.subscribedListeners.message = this.messageEventListener;
}
/**
* Adds event listeners for both network and message events.
* This maintains backward compatibility with the existing method.
* Adds a global event listener to window for "message" events.
* ThoughtSpot detects if a particular event is targeted to this
* embed instance through an identifier contained in the payload,
* and executes the registered callbacks accordingly.
*/
subscribeToEvents() {
this.subscribeToNetworkEvents();
this.subscribeToMessageEvents();
}
unsubscribeToNetworkEvents() {
if (this.subscribedListeners.online) {
window.removeEventListener('online', this.subscribedListeners.online);
delete this.subscribedListeners.online;
}
if (this.subscribedListeners.offline) {
window.removeEventListener('offline', this.subscribedListeners.offline);
delete this.subscribedListeners.offline;
}
}
unsubscribeToMessageEvents() {
if (this.subscribedListeners.message) {
window.removeEventListener('message', this.subscribedListeners.message);
delete this.subscribedListeners.message;
}
}
unsubscribeToEvents() {
Object.keys(this.subscribedListeners).forEach((key) => {
window.removeEventListener(key, this.subscribedListeners[key]);
});
}
async getAuthTokenForCookielessInit() {
let authToken = '';
if (this.embedConfig.authType !== types_1.AuthType.TrustedAuthTokenCookieless)
return authToken;
try {
authToken = await (0, authToken_1.getAuthenticationToken)(this.embedConfig);
}
catch (e) {
(0, processData_1.processAuthFailure)(e, this.isPreRendered ? this.preRenderWrapper : this.el);
throw e;
}
return authToken;
}
async getDefaultAppInitData() {
var _a, _b;
const authToken = await this.getAuthTokenForCookielessInit();
const customActionsResult = (0, custom_actions_1.getCustomActions)([
...(this.viewConfig.customActions || []),
...(this.embedConfig.customActions || [])
]);
if (customActionsResult.errors.length > 0) {
this.handleError({
errorType: types_1.ErrorDetailsTypes.VALIDATION_ERROR,
message: customActionsResult.errors,
code: types_1.EmbedErrorCodes.CUSTOM_ACTION_VALIDATION,
error: { type: types_1.EmbedErrorCodes.CUSTOM_ACTION_VALIDATION, message: customActionsResult.errors }
});
}
const baseInitData = {
customisations: (0, utils_1.getCustomisations)(this.embedConfig, this.viewConfig),
authToken,
runtimeFilterParams: this.viewConfig.excludeRuntimeFiltersfromURL
? (0, utils_1.getRuntimeFilters)(this.viewConfig.runtimeFilters)
: null,
runtimeParameterParams: this.viewConfig.excludeRuntimeParametersfromURL
? (0, utils_1.getRuntimeParameters)(this.viewConfig.runtimeParameters || [])
: null,
hiddenHomepageModules: this.viewConfig.hiddenHomepageModules || [],
reorderedHomepageModules: this.viewConfig.reorderedHomepageModules || [],
hostConfig: this.embedConfig.hostConfig,
hiddenHomeLeftNavItems: ((_a = this.viewConfig) === null || _a === void 0 ? void 0 : _a.hiddenHomeLeftNavItems)
? (_b = this.viewConfig) === null || _b === void 0 ? void 0 : _b.hiddenHomeLeftNavItems
: [],
customVariablesForThirdPartyTools: this.embedConfig.customVariablesForThirdPartyTools || {},
hiddenListColumns: this.viewConfig.hiddenListColumns || [],
customActions: customActionsResult.actions,
...(0, api_intercept_1.getInterceptInitData)(this.viewConfig),
};
return baseInitData;
}
async getAppInitData() {
return this.getDefaultAppInitData();
}
/**
* Constructs the base URL string to load the ThoughtSpot app.
* @param query
*/
getEmbedBasePath(query) {
let queryString = query.startsWith('?') ? query : `?${query}`;
if (this.shouldEncodeUrlQueryParams) {
queryString = `?base64UrlEncodedFlags=${(0, utils_1.getEncodedQueryParamsString)(queryString.substr(1))}`;
}
const basePath = [this.thoughtSpotHost, this.thoughtSpotV2Base, queryString]
.filter((x) => x.length > 0)
.join('/');
return `${basePath}#`;
}
async getUpdateEmbedParamsObject() {
let queryParams = this.getEmbedParamsObject();
const appInitData = await this.getAppInitData();
queryParams = { ...this.viewConfig, ...queryParams, ...appInitData };
return queryParams;
}
/**
* Common query params set for all the embed modes.
* @param queryParams
* @returns queryParams
*/
getBaseQueryParams(queryParams = {}) {
var _a, _b, _c, _d;
let hostAppUrl = ((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.host) || '';
// The below check is needed because TS Cloud firewall, blocks
// localhost/127.0.0.1 in any url param.
if (hostAppUrl.includes('localhost') || hostAppUrl.includes('127.0.0.1')) {
hostAppUrl = 'local-host';
}
const blockNonEmbedFullAppAccess = (_b = this.embedConfig.blockNonEmbedFullAppAccess) !== null && _b !== void 0 ? _b : true;
queryParams[types_1.Param.EmbedApp] = true;
queryParams[types_1.Param.HostAppUrl] = encodeURIComponent(hostAppUrl);
queryParams[types_1.Param.ViewPortHeight] = window.innerHeight;
queryParams[types_1.Param.ViewPortWidth] = window.innerWidth;
queryParams[types_1.Param.Version] = version;
queryParams[types_1.Param.AuthType] = this.embedConfig.authType;
queryParams[types_1.Param.blockNonEmbedFullAppAccess] = blockNonEmbedFullAppAccess;
queryParams[types_1.Param.AutoLogin] = this.embedConfig.autoLogin;
if (this.embedConfig.disableLoginRedirect === true || this.embedConfig.autoLogin === true) {
queryParams[types_1.Param.DisableLoginRedirect] = true;
}
if (this.embedConfig.authType === types_1.AuthType.EmbeddedSSO) {
queryParams[types_1.Param.ForceSAMLAutoRedirect] = true;
}
if (this.embedConfig.authType === types_1.AuthType.TrustedAuthTokenCookieless) {
queryParams[types_1.Param.cookieless] = true;
}
if (this.embedConfig.pendoTrackingKey) {
queryParams[types_1.Param.PendoTrackingKey] = this.embedConfig.pendoTrackingKey;
}
if (this.embedConfig.numberFormatLocale) {
queryParams[types_1.Param.NumberFormatLocale] = this.embedConfig.numberFormatLocale;
}
if (this.embedConfig.dateFormatLocale) {
queryParams[types_1.Param.DateFormatLocale] = this.embedConfig.dateFormatLocale;
}
if (this.embedConfig.currencyFormat) {
queryParams[types_1.Param.CurrencyFormat] = this.embedConfig.currencyFormat;
}
const { disabledActions, disabledActionReason, hiddenActions, visibleActions, hiddenTabs, visibleTabs, showAlerts, additionalFlags: additionalFlagsFromView, locale, customizations, contextMenuTrigger, linkOverride, insertInToSlide, disableRedirectionLinksInNewTab, overrideOrgId, exposeTranslationIDs, primaryAction, } = this.viewConfig;
const { additionalFlags: additionalFlagsFromInit } = this.embedConfig;
const additionalFlags = {
...additionalFlagsFromInit,
...additionalFlagsFromView,
};
if (Array.isArray(visibleActions) && Array.isArray(hiddenActions)) {
this.handleError({
errorType: types_1.ErrorDetailsTypes.VALIDATION_ERROR,
message: errors_1.ERROR_MESSAGE.CONFLICTING_ACTIONS_CONFIG,
code: types_1.EmbedErrorCodes.CONFLICTING_ACTIONS_CONFIG,
error: errors_1.ERROR_MESSAGE.CONFLICTING_ACTIONS_CONFIG,
});
return queryParams;
}
if (Array.isArray(visibleTabs) && Array.isArray(hiddenTabs)) {
this.handleError({
errorType: types_1.ErrorDetailsTypes.VALIDATION_ERROR,
message: errors_1.ERROR_MESSAGE.CONFLICTING_TABS_CONFIG,
code: types_1.EmbedErrorCodes.CONFLICTING_TABS_CONFIG,
error: errors_1.ERROR_MESSAGE.CONFLICTING_TABS_CONFIG,
});
return queryParams;
}
if (primaryAction) {
queryParams[types_1.Param.PrimaryAction] = primaryAction;
}
if (disabledActions === null || disabledActions === void 0 ? void 0 : disabledActions.length) {
queryParams[types_1.Param.DisableActions] = disabledActions;
}
if (disabledActionReason) {
queryParams[types_1.Param.DisableActionReason] = disabledActionReason;
}
if (exposeTranslationIDs) {
queryParams[types_1.Param.ExposeTranslationIDs] = exposeTranslationIDs;
}
queryParams[types_1.Param.HideActions] = [...this.defaultHiddenActions, ...(hiddenActions !== null && hiddenActions !== void 0 ? hiddenActions : [])];
if (Array.isArray(visibleActions)) {
queryParams[types_1.Param.VisibleActions] = visibleActions;
}
if (Array.isArray(hiddenTabs)) {
queryParams[types_1.Param.HiddenTabs] = hiddenTabs;
}
if (Array.isArray(visibleTabs)) {
queryParams[types_1.Param.VisibleTabs] = visibleTabs;
}
/**
* Default behavior for context menu will be left-click
* from version 9.2.0.cl the user have an option to override context
* menu click
*/
if (contextMenuTrigger === types_1.ContextMenuTriggerOptions.LEFT_CLICK) {
queryParams[types_1.Param.ContextMenuTrigger] = 'left';
}
else if (contextMenuTrigger === types_1.ContextMenuTriggerOptions.RIGHT_CLICK) {
queryParams[types_1.Param.ContextMenuTrigger] = 'right';
}
else if (contextMenuTrigger === types_1.ContextMenuTriggerOptions.BOTH_CLICKS) {
queryParams[types_1.Param.ContextMenuTrigger] = 'both';
}
const embedCustomizations = this.embedConfig.customizations;
const spriteUrl = (customizations === null || customizations === void 0 ? void 0 : customizations.iconSpriteUrl) || (embedCustomizations === null || embedCustomizations === void 0 ? void 0 : embedCustomizations.iconSpriteUrl);
if (spriteUrl) {
queryParams[types_1.Param.IconSpriteUrl] = spriteUrl.replace('https://', '');
}
const stringIDsUrl = ((_c = customizations === null || customizations === void 0 ? void 0 : customizations.content) === null || _c === void 0 ? void 0 : _c.stringIDsUrl)
|| ((_d = embedCustomizations === null || embedCustomizations === void 0 ? void 0 : embedCustomizations.content) === null || _d === void 0 ? void 0 : _d.stringIDsUrl);
if (stringIDsUrl) {
queryParams[types_1.Param.StringIDsUrl] = stringIDsUrl;
}
if (showAlerts !== undefined) {
queryParams[types_1.Param.ShowAlerts] = showAlerts;
}
if (locale !== undefined) {
queryParams[types_1.Param.Locale] = locale;
}
if (linkOverride) {
queryParams[types_1.Param.LinkOverride] = linkOverride;
}
if (insertInToSlide) {
queryParams[types_1.Param.ShowInsertToSlide] = insertInToSlide;
}
if (disableRedirectionLinksInNewTab) {
queryParams[types_1.Param.DisableRedirectionLinksInNewTab] = disableRedirectionLinksInNewTab;
}
if (overrideOrgId !== undefined) {
queryParams[types_1.Param.OverrideOrgId] = overrideOrgId;
}
if (this.isPreAuthCacheEnabled()) {
queryParams[types_1.Param.preAuthCache] = true;
}
queryParams[types_1.Param.OverrideNativeConsole] = true;
queryParams[types_1.Param.ClientLogLevel] = this.embedConfig.logLevel;
if ((0, isObject_1.default)(additionalFlags) && !(0, isEmpty_1.default)(additionalFlags)) {
Object.assign(queryParams, additionalFlags);
}
// Do not add any flags below this, as we want additional flags to
// override other flags
return queryParams;
}
/**
* Constructs the base URL string to load v1 of the ThoughtSpot app.
* This is used for embedding Liveboards, visualizations, and full application.
* @param queryString The query string to append to the URL.
* @param isAppEmbed A Boolean parameter to specify if you are embedding
* the full application.
*/
getV1EmbedBasePath(queryString) {
const queryParams = this.shouldEncodeUrlQueryParams
? `?base64UrlEncodedFlags=${(0, utils_1.getEncodedQueryParamsString)(queryString)}`
: `?${queryString}`;
const host = this.thoughtSpotHost;
const path = `${host}/${queryParams}#`;
return path;
}
getEmbedParams() {
const queryParams = this.getEmbedParamsObject();
return (0, utils_1.getQueryParamString)(queryParams);
}
getEmbedParamsObject() {
const params = this.getBaseQueryParams();
return params;
}
getRootIframeSrc() {
const query = this.getEmbedParams();
return this.getEmbedBasePath(query);
}
createIframeEl(frameSrc) {
const iFrame = document.createElement('iframe');
iFrame.src = frameSrc;
iFrame.id = TS_EMBED_ID;
iFrame.setAttribute('data-ts-iframe', 'true');
// according to screenfull.js documentation
// allowFullscreen, webkitallowfullscreen and mozallowfullscreen must be
// true
iFrame.allowFullscreen = true;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
iFrame.webkitallowfullscreen = true;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
iFrame.mozallowfullscreen = true;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
iFrame.allow = 'clipboard-read; clipboard-write; fullscreen;';
const frameParams = this.viewConfig.frameParams;
const { height: frameHeight, width: frameWidth, ...restParams } = frameParams || {};
const width = (0, utils_1.getCssDimension)(frameWidth || config_1.DEFAULT_EMBED_WIDTH);
const height = (0, utils_1.getCssDimension)(frameHeight || config_1.DEFAULT_EMBED_HEIGHT);
(0, utils_1.setAttributes)(iFrame, restParams);
iFrame.style.width = `${width}`;
iFrame.style.height = `${height}`;
// Set minimum height to the frame so that,
// scaling down on the fullheight doesn't make it too small.
iFrame.style.minHeight = `${height}`;
iFrame.style.border = '0';
iFrame.name = 'ThoughtSpot Embedded Analytics';
return iFrame;
}
handleInsertionIntoDOM(child) {
if (this.isPreRendered) {
this.insertIntoDOMForPreRender(child);
}
else {
this.insertIntoDOM(child);
}
if (this.insertedDomEl instanceof Node) {
this.insertedDomEl[this.embedNodeKey] = this;
}
}
/**
* Renders the embedded ThoughtSpot app in an iframe and sets up
* event listeners.
* @param url - The URL of the embedded ThoughtSpot app.
*/
async renderIFrame(url) {
if (this.isError) {
return null;
}
if (!this.thoughtSpotHost) {
this.throwInitError();
}
if (url.length > config_1.URL_MAX_LENGTH) {
// warn: The URL is too long
}
return (0, base_1.renderInQueue)((nextInQueue) => {
var _a;
const initTimestamp = Date.now();
this.executeCallbacks(types_1.EmbedEvent.Init, {
data: {
timestamp: initTimestamp,
},
type: types_1.EmbedEvent.Init,
});
(0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_RENDER_START);
// Always subscribe to network events, regardless of auth status
this.subscribeToNetworkEvents();
return (_a = (0, base_1.getAuthPromise)()) === null || _a === void 0 ? void 0 : _a.then((isLoggedIn) => {
if (!isLoggedIn) {
this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage);
return;
}
this.setIframeElement(this.iFrame || this.createIframeEl(url));
this.iFrame.addEventListener('load', () => {
nextInQueue();
const loadTimestamp = Date.now();
this.executeCallbacks(types_1.EmbedEvent.Load, {
data: {
timestamp: loadTimestamp,
},
type: types_1.EmbedEvent.Load,
});
(0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_RENDER_COMPLETE, {
elWidth: this.iFrame.clientWidth,
elHeight: this.iFrame.clientHeight,
timeTookToLoad: loadTimestamp - initTimestamp,
});
// Send info event if preauth cache is enabled
if (this.isPreAuthCacheEnabled()) {
(0, sessionInfoService_1.getPreauthInfo)().then((data) => {
if (data === null || data === void 0 ? void 0 : data.info) {
this.trigger(types_1.HostEvent.InfoSuccess, data);
}
});
}
// Setup fullscreen change handler after iframe is
// loaded and ready
this.setupFullscreenChangeHandler();
});
this.iFrame.addEventListener('error', () => {
nextInQueue();
});
this.handleInsertionIntoDOM(this.iFrame);
const prefetchIframe = document.querySelectorAll('.prefetchIframe');
if (prefetchIframe.length) {
prefetchIframe.forEach((el) => {
el.remove();
});
}
// Subscribe to message events only after successful
// auth and iframe setup
this.subscribeToMessageEvents();
}).catch((error) => {
nextInQueue();
(0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_RENDER_FAILED, {
error: JSON.stringify(error),
});
this.handleInsertionIntoDOM(this.embedConfig.loginFailedMessage);
this.handleError({
errorType: types_1.ErrorDetailsTypes.API,
message: error.message || errors_1.ERROR_MESSAGE.LOGIN_FAILED,
code: types_1.EmbedErrorCodes.LOGIN_FAILED,
error: error,
});
});
});
}
createPreRenderWrapper() {
var _a;
const preRenderIds = this.getPreRenderIds();
(_a = document.getElementById(preRenderIds.wrapper)) === null || _a === void 0 ? void 0 : _a.remove();
const preRenderWrapper = document.createElement('div');
preRenderWrapper.id = preRenderIds.wrapper;
const initialPreRenderWrapperStyle = {
position: 'absolute',
top: '0',
left: '0',
width: '100vw',
height: '100vh',
};
(0, utils_1.setStyleProperties)(preRenderWrapper, initialPreRenderWrapperStyle);
return preRenderWrapper;
}
connectPreRendered() {
const preRenderIds = this.getPreRenderIds();
const preRenderWrapperElement = document.getElementById(preRenderIds.wrapper);
this.preRenderWrapper = this.preRenderWrapper || preRenderWrapperElement;
this.preRenderChild = this.preRenderChild || document.getElementById(preRenderIds.child);
if (this.preRenderWrapper && this.preRenderChild) {
this.isPreRendered = true;
if (this.preRenderChild instanceof HTMLIFrameElement) {
this.setIframeElement(this.preRenderChild);
}
this.insertedDomEl = this.preRenderWrapper;
this.isRendered = true;
}
return this.isPreRenderAvailable();
}
isPreRenderAvailable() {
return (this.isRendered
&& this.isPreRendered
&& Boolean(this.preRenderWrapper && this.preRenderChild));
}
createPreRenderChild(child) {
var _a;
const preRenderIds = this.getPreRenderIds();
(_a = document.getElementById(preRenderIds.child)) === null || _a === void 0 ? void 0 : _a.remove();
if (child instanceof HTMLElement) {
child.id = preRenderIds.child;
return child;
}
const divChildNode = document.createElement('div');
(0, utils_1.setStyleProperties)(divChildNode, { width: '100%', height: '100%' });
divChildNode.id = preRenderIds.child;
if (typeof child === 'string') {
divChildNode.innerHTML = child;
}
else {
divChildNode.appendChild(child);
}
return divChildNode;
}
insertIntoDOMForPreRender(child) {
const preRenderChild = this.createPreRenderChild(child);
const preRenderWrapper = this.createPreRenderWrapper();
preRenderWrapper.appendChild(preRenderChild);
this.preRenderChild = preRenderChild;
this.preRenderWrapper = preRenderWrapper;
if (preRenderChild instanceof HTMLIFrameElement) {
this.setIframeElement(preRenderChild);
}
this.insertedDomEl = preRenderWrapper;
if (this.showPreRenderByDefault) {
this.showPreRender();
}
else {
this.hidePreRender();
}
document.body.appendChild(preRenderWrapper);
}
insertIntoDOM(child) {
var _a;
if (this.viewConfig.insertAsSibling) {
if (typeof child === 'string') {
const div = document.createElement('div');
div.innerHTML = child;
div.id = TS_EMBED_ID;
child = div;
}
if (((_a = this.el.nextElementSibling) === null || _a === void 0 ? void 0 : _a.id) === TS_EMBED_ID) {
this.el.nextElementSibling.remove();
}
this.el.parentElement.insertBefore(child, this.el.nextSibling);
this.insertedDomEl = child;
}
else if (typeof child === 'string') {
this.el.innerHTML = child;
this.insertedDomEl = this.el.children[0];
}
else {
this.el.innerHTML = '';
this.el.appendChild(child);
this.insertedDomEl = child;
}
}
/**
* Sets the height of the iframe
* @param height The height in pixels
*/
setIFrameHeight(height) {
this.iFrame.style.height = (0, utils_1.getCssDimension)(height);
}
/**
* Executes all registered event handlers for a particular event type
* @param eventType The event type
* @param data The payload invoked with the event handler
* @param eventPort The event Port for a specific MessageChannel
*/
executeCallbacks(eventType, data, eventPort) {
const eventHandlers = this.eventHandlerMap.get(eventType) || [];
const allHandlers = this.eventHandlerMap.get(types_1.EmbedEvent.ALL) || [];
const callbacks = [...eventHandlers, ...allHandlers];
const dataStatus = (data === null || data === void 0 ? void 0 : data.status) || utils_1.embedEventStatus.END;
callbacks.forEach((callbackObj) => {
if (
// When start status is true it trigger only start releated
// payload
(callbackObj.options.start && dataStatus === utils_1.embedEventStatus.START)
// When start status is false it trigger only end releated
// payload
|| (!callbackObj.options.start && dataStatus === utils_1.embedEventStatus.END)) {
const responder = this.createEmbedEventResponder(eventPort, eventType);
callbackObj.callback(data, responder);
}
});
}
/**
* Returns the ThoughtSpot hostname or IP address.
*/
getThoughtSpotHost() {
return this.thoughtSpotHost;
}
/**
* Gets the v1 event type (if applicable) for the EmbedEvent type
* @param eventType The v2 event type
* @returns The corresponding v1 event type if one exists
* or else the v2 event type itself
*/
getCompatibleEventType(eventType) {
return V1EventMap[eventType] || eventType;
}
/**
* Calculates the iframe center for the current visible viewPort
* of iframe using Scroll position of Host App, offsetTop for iframe
* in Host app. ViewPort height of the tab.
* @returns iframe Center in visible viewport,
* Iframe height,
* View port height.
*/
getIframeCenter() {
const offsetTopClient = (0, utils_1.getOffsetTop)(this.iFrame);
const scrollTopClient = window.scrollY;
const viewPortHeight = window.innerHeight;
const iframeHeight = this.iFrame.offsetHeight;
const iframeScrolled = scrollTopClient - offsetTopClient;
let iframeVisibleViewPort;
let iframeOffset;
if (iframeScrolled < 0) {
iframeVisibleViewPort = viewPortHeight - (offsetTopClient - scrollTopClient);
iframeVisibleViewPort = Math.min(iframeHeight, iframeVisibleViewPort);
iframeOffset = 0;
}
else {
iframeVisibleViewPort = Math.min(iframeHeight - iframeScrolled, viewPortHeight);
iframeOffset = iframeScrolled;
}
const iframeCenter = iframeOffset + iframeVisibleViewPort / 2;
return {
iframeCenter,
iframeScrolled,
iframeHeight,
viewPortHeight,
iframeVisibleViewPort,
};
}
/**
* Registers an event listener to trigger an alert when the ThoughtSpot app
* sends an event of a particular message type to the host application.
* @param messageType The message type
* @param callback A callback as a function
* @param options The message options
* @param isSelf
* @param isRegisteredBySDK
* @example
* ```js
* tsEmbed.on(EmbedEvent.Error, (data) => {
* console.error(data);
* });
* ```
* @example
* ```js
* tsEmbed.on(EmbedEvent.Save, (data) => {
* console.log("Answer save clicked", data);
* }, {
* start: true // This will trigger the callback on start of save
* });
* ```
*/
on(messageType, callback, options = { start: false }, isRegisteredBySDK = false) {
(0, mixpanel_service_1.uploadMixpanelEvent)(`${mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_ON}-${messageType}`, {
isRegisteredBySDK,
});
if (this.isRendered) {
logger_1.logger.warn('Please register event handlers before calling render');
}
const callbacks = this.eventHandlerMap.get(messageType) || [];
callbacks.push({ options, callback });
this.eventHandlerMap.set(messageType, callbacks);
return this;
}
/**
* Removes an event listener for a particular event type.
* @param messageType The message type
* @param callback The callback to remove
* @example
* ```js
* const errorHandler = (data) => { console.error(data); };
* tsEmbed.on(EmbedEvent.Error, errorHandler);
* tsEmbed.off(EmbedEvent.Error, errorHandler);
* ```
*/
off(messageType, callback) {
const callbacks = this.eventHandlerMap.get(messageType) || [];
const index = callbacks.findIndex((cb) => cb.callback === callback);
if (index > -1) {
callbacks.splice(index, 1);
}
return this;
}
/**
* Triggers an event on specific Port registered against
* for the EmbedEvent
* @param eventType The message type
* @param data The payload to send
* @param eventPort
* @param payload
*/
triggerEventOnPort(eventPort, payload) {
if (eventPort) {
try {
eventPort.postMessage({
type: payload.type,
data: payload.data,
});
}
catch (e) {
eventPort.postMessage({ error: e });
logger_1.logger.log(e);
}
}
else {
logger_1.logger.log('Event Port is not defined');
}
}
getPreRenderObj() {
var _a;
const embedObj = (_a = this.insertedDomEl) === null || _a === void 0 ? void 0 : _a[this.embedNodeKey];
if (embedObj === this) {
logger_1.logger.info('embedObj is same as this');
}
return embedObj;
}
checkEmbedContainerLoaded() {
if (this.isEmbedContainerLoaded)
return true;
const preRenderObj = this.getPreRenderObj();
if (preRenderObj && preRenderObj.isEmbedContainerLoaded) {
this.isEmbedContainerLoaded = true;
}
return this.isEmbedContainerLoaded;
}
executeEmbedContainerReadyCallbacks() {
logger_1.logger.debug('executePendingEvents', this.embedContainerReadyCallbacks);
this.embedContainerReadyCallbacks.forEach((callback) => {
callback === null || callback === void 0 ? void 0 : callback();
});
this.embedContainerReadyCallbacks = [];
}
/**
* Executes a callback after the embed container is loaded.
* @param callback The callback to execute
*/
executeAfterEmbedContainerLoaded(callback) {
if (this.checkEmbedContainerLoaded()) {
callback === null || callback === void 0 ? void 0 : callback();
}
else {
logger_1.logger.debug('pushing callback to embedContainerReadyCallbacks', callback);
this.embedContainerReadyCallbacks.push(callback);
}
}
/**
* Triggers an event to the embedded app
* @param {HostEvent} messageType The event type
* @param {any} data The payload to send with the message
* @returns A promise that resolves with the response from the embedded app
*/
async trigger(messageType, data = {}) {
(0, mixpanel_service_1.uploadMixpanelEvent)(`${mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_TRIGGER}-${messageType}`);
if (!this.isRendered) {
this.handleError({
errorType: types_1.ErrorDetailsTypes.VALIDATION_ERROR,
message: errors_1.ERROR_MESSAGE.RENDER_BEFORE_EVENTS_REQUIRED,
code: types_1.EmbedErrorCodes.RENDER_NOT_CALLED,
error: errors_1.ERROR_MESSAGE.RENDER_BEFORE_EVENTS_REQUIRED,
});
return null;