Refactor explorer config into useKnockoutExplorer hook (#397)

Co-authored-by: Steve Faulkner <stfaul@microsoft.com>

test/testExplorer/TestExplorer.ts

@@ -1,7 +1,5 @@
-import { MessageTypes } from "../../src/Contracts/ExplorerContracts";
 import "../../less/hostedexplorer.less";
 import { TestExplorerParams } from "./TestExplorerParams";
-import { ClientSecretCredential } from "@azure/identity";
 import { DatabaseAccountsGetResponse } from "@azure/arm-cosmosdb/esm/models";
 import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import * as msRest from "@azure/ms-rest-js";
@@ -19,26 +17,6 @@ class CustomSigner implements msRest.ServiceClientCredentials {
   }
 }
 
-const handleMessage = (event: MessageEvent): void => {
-  if (event.data.type === MessageTypes.InitTestExplorer) {
-    sendMessageToExplorerFrame(event.data);
-  }
-};
-
-const AADLogin = async (
-  notebooksTestRunnerApplicationId: string,
-  notebooksTestRunnerClientId: string,
-  notebooksTestRunnerClientSecret: string
-): Promise<string> => {
-  const credentials = new ClientSecretCredential(
-    notebooksTestRunnerApplicationId,
-    notebooksTestRunnerClientId,
-    notebooksTestRunnerClientSecret
-  );
-  const token = await credentials.getToken("https://management.core.windows.net/.default");
-  return token.token;
-};
-
 const getDatabaseAccount = async (
   token: string,
   notebooksAccountSubscriptonId: string,
@@ -49,34 +27,8 @@ const getDatabaseAccount = async (
   return client.databaseAccounts.get(notebooksAccountResourceGroup, notebooksAccountName);
 };
 
-const sendMessageToExplorerFrame = (data: unknown): void => {
-  const explorerFrame = document.getElementById("explorerMenu") as HTMLIFrameElement;
-
-  explorerFrame &&
-    explorerFrame.contentDocument &&
-    explorerFrame.contentDocument.referrer &&
-    explorerFrame.contentWindow.postMessage(
-      {
-        signature: "pcIframe",
-        data: data,
-      },
-      explorerFrame.contentDocument.referrer || window.location.href
-    );
-};
-
 const initTestExplorer = async (): Promise<void> => {
-  window.addEventListener("message", handleMessage, false);
-
   const urlSearchParams = new URLSearchParams(window.location.search);
-  const notebooksTestRunnerTenantId = decodeURIComponent(
-    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerTenantId)
-  );
-  const notebooksTestRunnerClientId = decodeURIComponent(
-    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerClientId)
-  );
-  const notebooksTestRunnerClientSecret = decodeURIComponent(
-    urlSearchParams.get(TestExplorerParams.notebooksTestRunnerClientSecret)
-  );
   const portalRunnerDatabaseAccount = decodeURIComponent(
     urlSearchParams.get(TestExplorerParams.portalRunnerDatabaseAccount)
   );
@@ -89,11 +41,7 @@ const initTestExplorer = async (): Promise<void> => {
   );
   const selfServeType = urlSearchParams.get(TestExplorerParams.selfServeType);
 
-  const token = await AADLogin(
-    notebooksTestRunnerTenantId,
-    notebooksTestRunnerClientId,
-    notebooksTestRunnerClientSecret
-  );
+  const token = decodeURIComponent(urlSearchParams.get(TestExplorerParams.token));
   const databaseAccount = await getDatabaseAccount(
     token,
     portalRunnerSubscripton,
@@ -102,7 +50,6 @@ const initTestExplorer = async (): Promise<void> => {
   );
 
   const initTestExplorerContent = {
-    type: MessageTypes.InitTestExplorer,
     inputs: {
       databaseAccount: databaseAccount,
       subscriptionId: portalRunnerSubscripton,
@@ -130,11 +77,35 @@ const initTestExplorer = async (): Promise<void> => {
       },
       // add UI test only when feature is not dependent on flights anymore
       flights: [],
-      selfServeType: selfServeType,
+      selfServeType,
     } as ViewModels.DataExplorerInputsFrame,
   };
 
-  window.postMessage(initTestExplorerContent, window.location.href);
+  const iframe = document.createElement("iframe");
+  window.addEventListener(
+    "message",
+    (event) => {
+      // 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") {
+        iframe.contentWindow.postMessage(
+          {
+            signature: "pcIframe",
+            data: initTestExplorerContent,
+          },
+          iframe.contentDocument.referrer || window.location.href
+        );
+      }
+    },
+    false
+  );
+  iframe.id = "explorerMenu";
+  iframe.name = "explorer";
+  iframe.classList.add("iframe");
+  iframe.title = "explorer";
+  iframe.src = "explorer.html?platform=Portal&disablePortalInitCache";
+  document.body.appendChild(iframe);
 };
 
-window.addEventListener("load", initTestExplorer);
+initTestExplorer();

test/testExplorer/TestExplorerParams.ts

@@ -1,10 +1,8 @@
 export enum TestExplorerParams {
-  notebooksTestRunnerTenantId = "notebooksTestRunnerTenantId",
-  notebooksTestRunnerClientId = "notebooksTestRunnerClientId",
-  notebooksTestRunnerClientSecret = "notebooksTestRunnerClientSecret",
   portalRunnerDatabaseAccount = "portalRunnerDatabaseAccount",
   portalRunnerDatabaseAccountKey = "portalRunnerDatabaseAccountKey",
   portalRunnerSubscripton = "portalRunnerSubscripton",
   portalRunnerResourceGroup = "portalRunnerResourceGroup",
   selfServeType = "selfServeType",
+  token = "token",
 }

test/testExplorer/TestExplorerUtils.ts

@@ -1,5 +1,6 @@
 import { Frame } from "puppeteer";
 import { TestExplorerParams } from "./TestExplorerParams";
+import { ClientSecretCredential } from "@azure/identity";
 
 let testExplorerFrame: Frame;
 export const getTestExplorerFrame = async (params?: Map<string, string>): Promise<Frame> => {
@@ -15,19 +16,15 @@ export const getTestExplorerFrame = async (params?: Map<string, string>): Promis
   const portalRunnerSubscripton = process.env.PORTAL_RUNNER_SUBSCRIPTION;
   const portalRunnerResourceGroup = process.env.PORTAL_RUNNER_RESOURCE_GROUP;
 
+  const credentials = new ClientSecretCredential(
+    notebooksTestRunnerTenantId,
+    notebooksTestRunnerClientId,
+    notebooksTestRunnerClientSecret
+  );
+
+  const { token } = await credentials.getToken("https://management.core.windows.net/.default");
+
   const testExplorerUrl = new URL("testExplorer.html", "https://localhost:1234");
-  testExplorerUrl.searchParams.append(
-    TestExplorerParams.notebooksTestRunnerTenantId,
-    encodeURI(notebooksTestRunnerTenantId)
-  );
-  testExplorerUrl.searchParams.append(
-    TestExplorerParams.notebooksTestRunnerClientId,
-    encodeURI(notebooksTestRunnerClientId)
-  );
-  testExplorerUrl.searchParams.append(
-    TestExplorerParams.notebooksTestRunnerClientSecret,
-    encodeURI(notebooksTestRunnerClientSecret)
-  );
   testExplorerUrl.searchParams.append(
     TestExplorerParams.portalRunnerDatabaseAccount,
     encodeURI(portalRunnerDatabaseAccount)
@@ -41,6 +38,7 @@ export const getTestExplorerFrame = async (params?: Map<string, string>): Promis
     TestExplorerParams.portalRunnerResourceGroup,
     encodeURI(portalRunnerResourceGroup)
   );
+  testExplorerUrl.searchParams.append(TestExplorerParams.token, encodeURI(token));
 
   if (params) {
     for (const key of params.keys()) {

test/testExplorer/testExplorer.html

@@ -6,13 +6,5 @@
     <link rel="shortcut icon" href="images/CosmosDB_rgb_ui_lighttheme.ico" type="image/x-icon" />
   </head>
 
-  <body>
-    <iframe
-      id="explorerMenu"
-      name="explorer"
-      class="iframe"
-      title="explorer"
-      src="explorer.html?v=1.0.1&platform=Portal"
-    ></iframe>
-  </body>
+  <body></body>
 </html>