@thoughtspot/visual-embed-sdk
Version:
ThoughtSpot Embed SDK
1,099 lines • 83.4 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 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 sdk_version_1 = require("../utils/sdk-version");
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");
/**
* Global prefix for all ThoughtSpot postHash Params.
*/
exports.THOUGHTSPOT_PARAM_PREFIX = 'ts-';
const TS_EMBED_ID = '_thoughtspot-embed';
/**
* dataset key used to stash a custom preRenderContainer's original inline
* `position` while we override it to `relative`. Stored on the container (not
* per-instance) so the override can be reverted on destroy even when multiple
* pre-rendered embeds share the same container.
*/
const PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY = 'tsEmbedOriginalPosition';
const PRERENDER_WRAPPER_ID_PREFIX = 'tsEmbed-pre-render-wrapper-';
/**
* 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];
this.preRenderContainerEl = null;
this.containerScrollListener = null;
/**
* 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.hostElement);
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}`);
}
};
this.handleAuthFailure = (error) => {
logger_1.logger.error(`${errors_1.ERROR_MESSAGE.INVALID_TOKEN_ERROR} Error : ${error === null || error === void 0 ? void 0 : error.message}`);
(0, processData_1.processAuthFailure)(error, this.isPreRendered ? this.preRenderWrapper : this.hostElement);
};
/**
* Refresh the auth token if the autoLogin is true and the authType is TrustedAuthTokenCookieless
* @param _
* @param responder
*/
this.tokenRefresh = async (_, responder) => {
try {
await this.refreshAuthTokenForCookieless(responder, types_1.EmbedEvent.RefreshAuthToken, true);
}
catch (e) {
this.handleAuthFailure(e);
}
};
/**
* Sends updated auth token to the iFrame to avoid user logout
* @param _
* @param responder
*/
this.updateAuthToken = async (_, responder) => {
const { authType, autoLogin: autoLoginConfig } = this.embedConfig;
// Default autoLogin: true for cookieless if undefined/null, otherwise
// false
const autoLogin = autoLoginConfig !== null && autoLoginConfig !== void 0 ? autoLoginConfig : authType === types_1.AuthType.TrustedAuthTokenCookieless;
try {
await this.refreshAuthTokenForCookieless(responder, types_1.EmbedEvent.AuthExpire, false);
}
catch (e) {
this.handleAuthFailure(e);
}
if (autoLogin && authType !== types_1.AuthType.TrustedAuthTokenCookieless) {
(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) {
this.handleAuthFailure(e);
}
})
.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.on(types_1.EmbedEvent.RefreshAuthToken, this.tokenRefresh, { 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.hostElement = (0, utils_1.getDOMNode)(domSelector);
this.eventHandlerMap = new Map();
this.isError = false;
this.viewConfig = {
excludeRuntimeFiltersfromURL: true,
excludeRuntimeParametersfromURL: true,
...viewConfig,
};
this.registerAppInit();
(0, mixpanel_service_1.uploadMixpanelEvent)(mixpanel_service_1.MIXPANEL_EVENT.VISUAL_SDK_EMBED_CREATE, {
...viewConfig,
});
const embedConfig = (0, embedConfig_1.getEmbedConfig)();
if (embedConfig) {
this.embedConfig = embedConfig;
this.thoughtSpotHost = (0, config_1.getThoughtSpotHost)(embedConfig);
this.thoughtSpotV2Base = (0, config_1.getV2BasePath)(embedConfig);
}
this.hostEventClient = new host_event_client_1.HostEventClient(this.iFrame);
this.shouldWaitForRenderPromise = !(0, base_1.getIsInitCompleted)();
const afterInit = () => {
// Prefer the config captured at construction time; fall back to
// getEmbedConfig() for the case where init()
// hadn't been called yet.
this.embedConfig = embedConfig !== null && embedConfig !== void 0 ? embedConfig : (0, embedConfig_1.getEmbedConfig)();
if (!this.embedConfig) {
logger_1.logger.error('embedConfig unavailable in afterInit; init() may not have completed');
return;
}
if (!this.embedConfig.authTriggerContainer && !this.embedConfig.useEventForSAMLPopup) {
this.embedConfig.authTriggerContainer = domSelector;
}
this.thoughtSpotHost = (0, config_1.getThoughtSpotHost)(this.embedConfig);
this.thoughtSpotV2Base = (0, config_1.getV2BasePath)(this.embedConfig);
this.shouldEncodeUrlQueryParams = this.embedConfig.shouldEncodeUrlQueryParams;
};
if (!this.shouldWaitForRenderPromise) {
afterInit();
}
else {
this.isReadyForRenderPromise = (0, base_1.getInitPromise)()
.then(afterInit)
.catch((err) => {
logger_1.logger.error('SDK init failed before embed could be configured', err);
this.throwInitError();
})
.finally(() => {
this.shouldWaitForRenderPromise = false;
});
}
}
/**
* 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.hostElement);
throw e;
}
return authToken;
}
async getDefaultAppInitData() {
var _a, _b, _c;
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,
embedExpiryInAuthToken: (_c = this.viewConfig.refreshAuthTokenOnNearExpiry) !== null && _c !== void 0 ? _c : true,
...(0, api_intercept_1.getInterceptInitData)(this.viewConfig),
...(0, utils_1.getHostEventsConfig)(this.viewConfig),
};
return baseInitData;
}
async getAppInitData() {
return this.getDefaultAppInitData();
}
/**
* Helper method to refresh/update auth token for TrustedAuthTokenCookieless auth type
* @param responder - Function to send response back
* @param eventType - The embed event type to send
* @param forceRefresh - Whether to force refresh the token
* @returns Promise that resolves if token was refreshed, rejects otherwise
*/
async refreshAuthTokenForCookieless(responder, eventType, forceRefresh = false) {
const { authType, autoLogin } = this.embedConfig;
const isAutoLoginTrue = autoLogin !== null && autoLogin !== void 0 ? autoLogin : authType === types_1.AuthType.TrustedAuthTokenCookieless;
if (isAutoLoginTrue && authType === types_1.AuthType.TrustedAuthTokenCookieless) {
const authToken = await (0, authToken_1.getAuthenticationToken)(this.embedConfig, forceRefresh);
responder({
type: eventType,
data: { authToken },
});
}
}
/**
* 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] = sdk_version_1.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, enableLinkOverridesV2, 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 (!disableRedirectionLinksInNewTab && (enableLinkOverridesV2 || linkOverride)) {
queryParams[types_1.Param.EnableLinkOverridesV2] = true;
queryParams[types_1.Param.LinkOverride] = true;
}
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; local-network-access;';
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;
}
/**
* Returns true if this embed instance is configured for pre-rendering.
*/
isPreRenderEmbed() {
return !!this.viewConfig.preRenderId;
}
handleInsertionIntoDOM(child) {
if (this.isPreRenderEmbed()) {
this.insertIntoDOMForPreRender(child);
}
else {
this.insertIntoDOM(child);
}
if (this.insertedDomEl instanceof Node) {
this.insertedDomEl[this.embedNodeKey] = this;
}
if (this.preRenderWrapper) {
this.preRenderWrapper[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;
}
/**
* Checks for an existing pre-rendered component and connects to it.
*
* If a matching pre-rendered component is found in the DOM, this method
* sets the internal properties of the embed object to reference it.
*
* @returns True if a connection was successfully established, false otherwise.
*/
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.isRendered = true;
}
return this.isPreRenderConnected();
}
isPreRenderConnected() {
return 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;
}
/**
* Creates the in-flow placeholder div inserted into the host element when
* showPreRender() is called. The wrapper observes this element to stay
* aligned with the host layout.
*/
createPreRenderPlaceholder() {
const placeholder = document.createElement('div');
const id = this.getPreRenderIds();
const { width: frameWidth, height: frameHeight } = this.viewConfig.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);
placeholder.style.width = width;
placeholder.style.height = height;
// we can improve this , lol
placeholder.id = id.placeHolder;
return placeholder;
}
/**
* Resolves the configured preRenderContainer to a live element, falling
* back to `document.body`. A string selector is re-queried on every call so
* a remounted container (E.g.: React replacing the node) resolves to the
* fresh element; an element passed directly cannot be re-resolved.
*/
resolvePreRenderContainerTarget() {
var _a;
const containerConfig = this.viewConfig.preRenderContainer;
let container = null;
if (typeof containerConfig === 'string') {
try {
// Resolve against the host's shadow root too, so a selector can
// target a container inside the same shadow DOM as the embed —
// document.querySelector alone cannot pierce shadow boundaries.
container = (0, utils_1.querySelectorAcrossShadowRoot)(containerConfig, this.hostElement);
}
catch (e) {
logger_1.logger.error(`Invalid CSS selector for preRenderContainer: ${containerConfig}`, e);
}
}
else if (containerConfig) {
container = containerConfig;
}
return (_a = container) !== null && _a !== void 0 ? _a : document.body;
}
/**
* Makes the container a positioning context for the absolutely positioned
* wrapper, stashing the original inline `position` on the element (once) so
* destroy() can restore it exactly, leaving no trace. Recording it on the
* element rather than per-instance lets the override be reverted even when
* embeds share the same container.
*/
applyPreRenderContainerPositioning(container) {
if (container === document.body) {
return;
}
const pos = window.getComputedStyle(container).position;
if (pos === 'static') {
if (container.dataset[PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY] === undefined) {
container.dataset[PRERENDER_CONTAINER_ORIGINAL_POSITION_KEY] = container.style.position;
}
container.style.position = 'relative';
}
}
/**
* Re-attaches the wrapper to a live container when the previously resolved
* one has been detached or no longer holds the wrapper — e.g. the host app
* remounted a custom preRenderContainer, which would otherwise leave a stale
* reference and collapse the wrapper. Only string selectors can be
* re-resolved; a container passed as an element is left untouched.
*/
reconcilePreRenderContainer() {
const wrapper = this.preRenderWrapper;
const stored = this.preRenderContainerEl;
// Nothing to reconcile until this instance resolved its container.
if (!wrapper || !stored) {
return;
}
const storedIsLive = stored === document.body || document.contains(stored);
if (storedIsLive && stored.contains(wrapper)) {
return;
}
const resolved = this.resolvePreRenderContainerTarget();
// Re-resolution yielded the same (still stale) element — nothing we can
// do, e.g. a detached container passed as an HTMLElement.
if (resolved === stored && stored.contains(wrapper)) {
return;
}
if (this.containerScrollListener && stored !== resolved) {
if (stored !== document.body) {
stored.removeEventListener('scroll', this.containerScrollListener);
}
if (resolved !== document.body) {
resolved.addEventListener('scroll', this.containerScrollListener);
}
}
this.applyPreRenderContainerPositioning(resolved);
if (wrapper.parentNode !== resolved) {
resolved.appendChild(wrapper);
}
this.preRenderContainerEl = resolved;
}
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);
}
if (this.iFrame) {
this.iFrame.style.height = '100%';
this.iFrame.style.width = '100%';
}
if (this.showPreRenderByDefault) {
this.showPreRender();
}
else {
this.hidePreRender();
}
const targetContainer = this.resolvePreRenderContainerTarget();
this.preRenderContainerEl = targetContainer;
this.applyPreRenderContainerPositioning(targetContainer);
targetContainer.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.hostElement.nextElementSibling) === null || _a === void 0 ? void 0 : _a.id) === TS_EMBED_ID) {
this.hostElement.nextElementSibling.remove();
}
this.hostElement.parentElement.insertBefore(child, this.hostElement.nextSibling);
this.insertedDomEl = child;
}
else if (typeof child === 'string') {
this.hostElement.innerHTML = child;
this.insertedDomEl = this.hostElement.children[0];
}
else {
this.hostElement.innerHTML = '';
this.hostElement.appendChild(child);
this.insertedDomEl = child;
}
}
/**
* Sets the height of the iframe
* @param height The height in pixels
*/
setIFrameHeight(height) {
if (this.isPreRendered) {
if (this.insertedDomEl) {
this.insertedDomEl.style.height = (0, utils_1.getCssDimension)(height);
}
else if (this.preRenderWrapper) {
this.preRenderWrapper.style.height = (0, utils_1.getCssDimension)(height);
}
}
else {
// normal (non-preRender) mode: size the iframe directly
this.iFrame.style.height = (0, utils_1.getCssDimension)(height);
}
}
shouldSkipEvent(eventType,