Enable Preview for Hosted Mode (#844)

preview/config.json

@@ -1,3 +1,4 @@
 {
-  "PROXY_PATH": "/proxy"
+  "PROXY_PATH": "/proxy",
+  "msalRedirectURI": "https://cosmos-explorer-preview.azurewebsites.net/"
 }

preview/index.js

@@ -62,6 +62,17 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
     })
     .catch(() => res.sendStatus(500));
 });
+app.get("/", (req, res) => {
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/branches/master")
+    .then((response) => response.json())
+    .then(({ commit: { sha } }) => {
+      const explorer = new URL(
+        "https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/hostedExplorer.html"
+      );
+      return res.redirect(explorer.href);
+    })
+    .catch(() => res.sendStatus(500));
+});
 
 app.listen(port, () => {
   console.log(`Example app listening on port: ${port}`);

src/ConfigContext.ts

@@ -28,6 +28,7 @@ export interface ConfigContext {
   armAPIVersion?: string;
   allowedJunoOrigins: string[];
   enableSchemaAnalyzer: boolean;
+  msalRedirectURI?: string;
 }
 
 // Default configuration

src/HostedExplorer.tsx

@@ -8,6 +8,7 @@ import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
 import { useAADAuth } from "./hooks/useAADAuth";
+import { useConfig } from "./hooks/useConfig";
 import { useTokenMetadata } from "./hooks/usePortalAccessToken";
 import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
 import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
@@ -30,7 +31,7 @@ const App: React.FunctionComponent = () => {
 
   // For showing/hiding panel
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
-
+  const config = useConfig();
   const { isLoggedIn, armToken, graphToken, account, tenantId, logout, login, switchTenant } = useAADAuth();
   const [databaseAccount, setDatabaseAccount] = React.useState<DatabaseAccount>();
   const [authType, setAuthType] = React.useState<AuthType>(encryptedToken ? AuthType.EncryptedToken : undefined);
@@ -74,7 +75,7 @@ const App: React.FunctionComponent = () => {
   });
 
   const showExplorer =
-    (isLoggedIn && databaseAccount) ||
+    (config && isLoggedIn && databaseAccount) ||
     (encryptedTokenMetadata && encryptedTokenMetadata) ||
     (authType === AuthType.ResourceToken && connectionString);
 

src/hooks/useAADAuth.ts

@@ -1,6 +1,7 @@
 import * as msal from "@azure/msal-browser";
 import { useBoolean } from "@fluentui/react-hooks";
 import * as React from "react";
+import { configContext } from "../ConfigContext";
 import { getMsalInstance } from "../Utils/AuthorizationUtils";
 
 const msalInstance = getMsalInstance();
@@ -30,7 +31,10 @@ export function useAADAuth(): ReturnType {
 
   msalInstance.setActiveAccount(account);
   const login = React.useCallback(async () => {
-    const response = await msalInstance.loginPopup();
+    const response = await msalInstance.loginPopup({
+      redirectUri: configContext.msalRedirectURI,
+      scopes: [],
+    });
     setLoggedIn();
     setAccount(response.account);
     setTenantId(response.tenantId);
@@ -46,6 +50,7 @@ export function useAADAuth(): ReturnType {
   const switchTenant = React.useCallback(
     async (id) => {
       const response = await msalInstance.loginPopup({
+        redirectUri: configContext.msalRedirectURI,
         authority: `https://login.microsoftonline.com/${id}`,
         scopes: [],
       });