Fix ready message sent to parent frame

src/Common/MessageHandler.ts

@@ -1,8 +1,8 @@
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import Q from "q";
 import * as _ from "underscore";
-import * as Constants from "./Constants";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
+import * as Constants from "./Constants";
 
 export interface CachedDataPromise<T> {
   deferred: Q.Deferred<T>;
@@ -61,6 +61,21 @@ export function sendMessage(data: any): void {
   }
 }
 
+export function sendReadyMessage(): void {
+  if (canSendMessage()) {
+    // We try to find data explorer window first, then fallback to current window
+    const portalChildWindow = getDataExplorerWindow(window) || window;
+    portalChildWindow.parent.postMessage(
+      {
+        signature: "pcIframe",
+        kind: "ready",
+      },
+      portalChildWindow.document.referrer
+    );
+  }
+}
+
+
 export function canSendMessage(): boolean {
   return window.parent !== window;
 }

src/Controls/Heatmap/Heatmap.ts

@@ -1,5 +1,10 @@
-import * as Plotly from "plotly.js-cartesian-dist-min";
 import dayjs from "dayjs";
+import * as Plotly from "plotly.js-cartesian-dist-min";
+import { StyleConstants } from "../../Common/Constants";
+import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import "./Heatmap.less";
 import {
   ChartSettings,
   DataPayload,
@@ -9,13 +14,8 @@ import {
   HeatmapData,
   LayoutSettings,
   PartitionTimeStampToData,
-  PortalTheme,
+  PortalTheme
 } from "./HeatmapDatatypes";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { StyleConstants } from "../../Common/Constants";
-import "./Heatmap.less";
 
 export class Heatmap {
   public static readonly elementId: string = "heatmap";
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }
 
 window.addEventListener("message", handleMessage, false);
-sendMessage("ready");
+sendReadyMessage();

src/Explorer/Tabs/MongoShellTab.ts

@@ -83,10 +83,10 @@ export default class MongoShellTab extends TabsBase {
   }
 
   private handleReadyMessage(event: MessageEvent, shellIframe: HTMLIFrameElement) {
-    if (typeof event.data["data"] !== "string") {
+    if (typeof event.data["kind"] !== "string") {
       return;
     }
-    if (event.data.data !== "ready") {
+    if (event.data.kind !== "ready") {
       return;
     }
 

src/SelfServe/SelfServe.tsx

@@ -3,7 +3,7 @@ import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendMessage } from "../Common/MessageHandler";
+import { sendReadyMessage } from "../Common/MessageHandler";
 import { configContext, updateConfigContext } from "../ConfigContext";
 import { SelfServeFrameInputs } from "../Contracts/ViewModels";
 import { updateUserContext } from "../UserContext";
@@ -89,4 +89,4 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
 ReactDOM.render(renderSpinner(), document.getElementById("selfServeContent"));
 window.addEventListener("message", handleMessage, false);
-sendMessage("ready");
+sendReadyMessage();

src/hooks/useKnockoutExplorer.ts

@@ -3,7 +3,7 @@ import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
 import { AccountKind, DefaultAccountExperience } from "../Common/Constants";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendMessage } from "../Common/MessageHandler";
+import { sendReadyMessage } from "../Common/MessageHandler";
 import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
@@ -15,14 +15,14 @@ import {
   ConnectionString,
   EncryptedToken,
   HostedExplorerChildFrame,
-  ResourceToken,
+  ResourceToken
 } from "../HostedExplorerChildFrame";
 import { emulatorAccount } from "../Platform/Emulator/emulatorAccount";
 import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { parseResourceTokenConnectionString } from "../Platform/Hosted/Helpers/ResourceTokenUtils";
 import {
   getDatabaseAccountKindFromExperience,
-  getDatabaseAccountPropertiesFromMetadata,
+  getDatabaseAccountPropertiesFromMetadata
 } from "../Platform/Hosted/HostedUtils";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
 import { PortalEnv, updateUserContext } from "../UserContext";
@@ -274,7 +274,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
       false
     );
 
-    sendMessage("ready");
+    sendReadyMessage();
   });
 }
 

test/testExplorer/TestExplorer.ts

@@ -79,7 +79,7 @@ const initTestExplorer = async (): Promise<void> => {
       // After we have received the "ready" message from the child iframe we can post configuration
       // This simulates the same action that happens in the portal
       console.dir(event.data);
-      if (event.data?.data === "ready") {
+      if (event.data?.kind === "ready") {
         iframe.contentWindow.postMessage(
           {
             signature: "pcIframe",