some wordsmithing

images/EntraID.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="uuid-f8d4d392-7c12-4bd9-baff-66fbf7814b91" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <path d="m3.802,14.032c.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128v4.073c-.286,0-.574-.078-.824-.234l-4.374-2.734Z" fill="#225086"/>
-  <path d="m7.853,1.507L.353,9.967c-.579.654-.428,1.642.323,2.111,0,0,2.776,1.735,3.126,1.954.388.242,1.033.511,1.715.511.621,0,1.198-.18,1.676-.487,0,0,.001,0,.002-.001l1.805-1.128-4.364-2.728,4.365-4.924V1s0,0,0,0c-.424,0-.847.169-1.147.507Z" fill="#6df"/>
-  <polygon points="4.636 10.199 4.688 10.231 9 12.927 9.001 12.927 9.001 12.927 9.001 5.276 9 5.275 4.636 10.199" fill="#cbf8ff"/>
-  <path d="m17.324,12.078c.751-.469.902-1.457.323-2.111l-4.921-5.551c-.397-.185-.842-.291-1.313-.291-.925,0-1.752.399-2.302,1.026l-.109.123h0s4.364,4.924,4.364,4.924h0s0,0,0,0l-4.365,2.728v4.073c.287,0,.573-.078.823-.234l7.5-4.688Z" fill="#074793"/>
-  <path d="m9.001,1v4.275s.109-.123.109-.123c.55-.627,1.377-1.026,2.302-1.026.472,0,.916.107,1.313.291l-2.579-2.909c-.299-.338-.723-.507-1.146-.507Z" fill="#0294e4"/>
-  <polygon points="13.365 10.199 13.365 10.199 13.365 10.199 9.001 5.276 9.001 12.926 13.365 10.199" fill="#96bcc2"/>
-</svg>

less/documentDB.less

@@ -2366,9 +2366,9 @@ a:link {
 .tabsManagerContainer {
   height: 100%;
   flex-grow: 1;
-  display: flex;
-  flex-direction: column;
+  overflow: hidden;
   min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {
@@ -2671,7 +2671,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper> .tabNavText {
   font-weight: bolder;
   border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
@@ -2708,68 +2708,68 @@ a:link {
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
     .contentWrapper {
-      .flex-display();
-      width: @ContentWrapper;
-
-      .statusIconContainer {
-        width: @StatusIconContainerSize;
-        height: @StatusIconContainerSize;
-        margin-left: @SmallSpace;
-        display: inline-flex;
-
-        .errorIconContainer {
-          width: @ErrorIconContainer;
-          height: @ErrorIconContainer;
-          margin-top: 1px;
-
-          .errorIcon {
-            width: @ErrorIconWidth;
+        .flex-display();
+        width: @ContentWrapper;
+    
+        .statusIconContainer {
+          width: @StatusIconContainerSize;
+          height: @StatusIconContainerSize;
+          margin-left: @SmallSpace;
+          display: inline-flex;
+    
+          .errorIconContainer {
+            width: @ErrorIconContainer;
+            height: @ErrorIconContainer;
+            margin-top: 1px;
+    
+            .errorIcon {
+              width: @ErrorIconWidth;
+              height: @LoadingErrorIconSize;
+              background-image: url(../images/error_no_outline.svg);
+              background-repeat: no-repeat;
+              background-position: center;
+              background-size: 3px;
+              display: block;
+              margin: 1px 0px 0px 6px;
+            }
+          }
+    
+          .errorIconContainer.actionsEnabled {
+            &:hover {
+              .hover();
+            }
+    
+            &:focus {
+              .focus();
+            }
+    
+            &:active {
+              .active();
+            }
+          }
+    
+          .errorIconContainer[tabindex]:active {
+            outline: none;
+          }
+    
+          .loadingIcon {
+            width: @LoadingErrorIconSize;
             height: @LoadingErrorIconSize;
-            background-image: url(../images/error_no_outline.svg);
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: 3px;
-            display: block;
-            margin: 1px 0px 0px 6px;
+            margin: 0px 0px @SmallSpace @SmallSpace;
           }
         }
-
-        .errorIconContainer.actionsEnabled {
-          &:hover {
-            .hover();
-          }
-
-          &:focus {
-            .focus();
-          }
-
-          &:active {
-            .active();
-          }
-        }
-
-        .errorIconContainer[tabindex]:active {
-          outline: none;
-        }
-
-        .loadingIcon {
-          width: @LoadingErrorIconSize;
-          height: @LoadingErrorIconSize;
-          margin: 0px 0px @SmallSpace @SmallSpace;
+    
+        .tabNavText {
+          margin-left: @SmallSpace;
+          margin-right: 2px;
+          color: @BaseDark;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          flex-grow: 1;
         }
       }
 
-      .tabNavText {
-        margin-left: @SmallSpace;
-        margin-right: 2px;
-        color: @BaseDark;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        flex-grow: 1;
-      }
-    }
-
     .tabIconSection {
       width: 29px;
       position: relative;

package.json

@@ -209,7 +209,6 @@
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
-    "test:file": "jest --coverage=false",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
@@ -245,4 +244,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}

src/Common/Constants.ts

@@ -196,12 +196,6 @@ export class Queries {
   public static readonly DefaultMaxWaitTimeInSeconds = 30;
 }
 
-export class RBACOptions {
-  public static setAutomaticRBACOption: string = "Automatic";
-  public static setTrueRBACOption: string = "True";
-  public static setFalseRBACOption: string = "False";
-}
-
 export class SavedQueries {
   public static readonly CollectionName: string = "___Query";
   public static readonly DatabaseName: string = "___Cosmos";
@@ -261,7 +255,6 @@ export class HttpHeaders {
   public static partitionKey: string = "x-ms-documentdb-partitionkey";
   public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-  public static xAPIKey: string = "X-API-Key";
 }
 
 export class ContentType {

src/Common/CosmosClient.test.ts

@@ -28,6 +28,19 @@ describe("tokenProvider", () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
+
+  it("calls the auth token service if no master key is set", async () => {
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(1);
+  });
+
+  it("does not call the auth service if a master key is set", async () => {
+    updateUserContext({
+      masterKey: "foo",
+    });
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(0);
+  });
 });
 
 describe("getTokenFromAuthService", () => {

src/Common/CosmosClient.ts

@@ -3,12 +3,10 @@ import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizatio
 import { AuthorizationToken } from "Contracts/FabricMessageTypes";
 import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { listKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { DatabaseAccountListKeysResult } from "Utils/arm/generatedClients/cosmos/types";
 import { AuthType } from "../AuthType";
 import { PriorityLevel } from "../Common/Constants";
 import { Platform, configContext } from "../ConfigContext";
-import { updateUserContext, userContext } from "../UserContext";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "../Utils/PriorityBasedExecutionUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
@@ -19,16 +17,7 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  const aadDataPlaneFeatureEnabled =
-    userContext.features.enableAadDataPlane && userContext.databaseAccount.properties.disableLocalAuth;
-  const dataPlaneRBACOptionEnabled = userContext.dataPlaneRbacEnabled && userContext.apiType === "SQL";
-  if (aadDataPlaneFeatureEnabled || (!userContext.features.enableAadDataPlane && dataPlaneRBACOptionEnabled)) {
-    if (!userContext.aadToken) {
-      logConsoleError(
-        `AAD token does not exist. Please use "Login for Entra ID" prior to performing Entra ID RBAC operations`,
-      );
-      return null;
-    }
+  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
     const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
     const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
     return authorizationToken;
@@ -83,30 +72,8 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
 
   if (userContext.masterKey) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
-      verb,
-      resourceId,
-      resourceType,
-      headers,
-      userContext.masterKey,
-    );
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
-  } else if (userContext.dataPlaneRbacEnabled == false) {
-    const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
-    const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
-
-    if (keys.primaryMasterKey) {
-      updateUserContext({ masterKey: keys.primaryMasterKey });
-      // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-      await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
-        verb,
-        resourceId,
-        resourceType,
-        headers,
-        keys.primaryMasterKey,
-      );
-      return decodeURIComponent(headers.authorization);
-    }
   }
 
   if (userContext.resourceToken) {
@@ -190,6 +157,7 @@ export function client(): Cosmos.CosmosClient {
 
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
+    key: userContext.masterKey,
     tokenProvider,
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,

src/ConfigContext.ts

@@ -42,10 +42,6 @@ export interface ConfigContext {
   ARM_API_VERSION: string;
   GRAPH_ENDPOINT: string;
   GRAPH_API_VERSION: string;
-  // This is the endpoint to get offering Ids to be used to fetch prices. Refer to this doc: https://learn.microsoft.com/en-us/rest/api/marketplacecatalog/dataplane/skus/list?view=rest-marketplacecatalog-dataplane-2023-05-01-preview&tabs=HTTP
-  CATALOG_ENDPOINT: string;
-  CATALOG_API_VERSION: string;
-  CATALOG_API_KEY: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
@@ -97,9 +93,6 @@ let configContext: Readonly<ConfigContext> = {
   ARM_API_VERSION: "2016-06-01",
   GRAPH_ENDPOINT: "https://graph.microsoft.com",
   GRAPH_API_VERSION: "1.6",
-  CATALOG_ENDPOINT: "https://catalogapi.azure.com/",
-  CATALOG_API_VERSION: "2023-05-01-preview",
-  CATALOG_API_KEY: "",
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
@@ -199,9 +192,6 @@ if (process.env.NODE_ENV === "development") {
   updateConfigContext({
     PROXY_PATH: "/proxy",
     EMULATOR_ENDPOINT: "https://localhost:8081",
-    PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
-    MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
-    CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Mpac,
   });
 }
 
@@ -248,6 +238,15 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
           updateConfigContext({ platform });
       }
     }
+    if (window.location.origin !== configContext.hostedExplorerURL) {
+      if (window.location.origin === "https://localhost:1234") {
+        // Special case for localhost, we need to send them to 'hostedExplorer.html'.
+        updateConfigContext({ hostedExplorerURL: "https://localhost:1234/hostedExplorer.html" });
+      } else {
+        const newOrigin = window.location.origin.endsWith("/") ? window.location.origin : `${window.location.origin}/`;
+        updateConfigContext({ hostedExplorerURL: newOrigin });
+      }
+    }
   } catch (error) {
     console.error("No configuration file found using defaults");
   }
@@ -255,3 +254,4 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
 }
 
 export { configContext };
+

src/Contracts/ViewModels.ts

@@ -425,7 +425,6 @@ export interface SelfServeFrameInputs {
   authorizationToken: string;
   csmEndpoint: string;
   flights?: readonly string[];
-  catalogAPIKey: string;
 }
 
 export class MonacoEditorSettings {

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
+import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -8,7 +8,6 @@ export interface CollapsibleSectionProps {
   isExpandedByDefault: boolean;
   onExpand?: () => void;
   children: JSX.Element;
-  tooltipContent?: string | JSX.Element | JSX.Element[];
 }
 
 export interface CollapsibleSectionState {
@@ -56,19 +55,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>
-          {this.props.tooltipContent && (
-            <TooltipHost
-              directionalHint={DirectionalHint.bottomLeftEdge}
-              content={this.props.tooltipContent}
-              styles={{
-                root: {
-                  marginLeft: "0 !important",
-                },
-              }}
-            >
-              <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
-            </TooltipHost>
-          )}
         </Stack>
         {this.state.isExpanded && this.props.children}
       </>

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -20,10 +20,6 @@
   outline-offset: 2px;
 }
 
-.outlineNone{
-  outline: none !important;
-}
-
 .copyQuery:focus::after,
 .deleteQuery:focus::after {
   outline: none !important;

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -223,7 +223,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
             <Link
-              className="underlinedLink outlineNone"
+              className="underlinedLink"
               target="_blank"
               href="https://cosmos.azure.com/capacitycalculator/"
               aria-label="capacity calculator of azure cosmos db"

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -733,13 +733,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
              
             <StyledLinkBase
               aria-label="capacity calculator of azure cosmos db"
-              className="underlinedLink outlineNone"
+              className="underlinedLink"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
                 aria-label="capacity calculator of azure cosmos db"
-                className="underlinedLink outlineNone"
+                className="underlinedLink"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -1019,7 +1019,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link underlinedLink outlineNone root-117"
+                  className="ms-Link underlinedLink root-117"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"

src/Explorer/Explorer.tsx

@@ -7,13 +7,11 @@ import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCop
 import { IGalleryItem } from "Juno/JunoClient";
 import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { acquireTokenWithMsal, getMsalInstance } from "Utils/AuthorizationUtils";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
-import * as msal from "@azure/msal-browser";
 import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
@@ -32,13 +30,14 @@ import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { isAccountNewerThanThresholdInMs, updateUserContext, userContext } from "../UserContext";
+import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
 import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
+import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
@@ -67,8 +66,6 @@ import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
 import StoredProcedure from "./Tree/StoredProcedure";
 import { useDatabases } from "./useDatabases";
 import { useSelectedNode } from "./useSelectedNode";
-import { update } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
-import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 
@@ -254,44 +251,8 @@ export default class Explorer {
     };
     useDialog.getState().openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
-  }
 
-  public async openLoginForEntraIDPopUp(): Promise<void> {
-    if (userContext.databaseAccount.properties?.documentEndpoint) {
-      const hrefEndpoint = new URL(userContext.databaseAccount.properties.documentEndpoint).href.replace(
-        /\/$/,
-        "/.default",
-      );
-      const msalInstance = await getMsalInstance();
-
-      try {
-        const response = await msalInstance.loginPopup({
-          redirectUri: configContext.msalRedirectURI,
-          scopes: [],
-        });
-        localStorage.setItem("cachedTenantId", response.tenantId);
-        const cachedAccount = msalInstance.getAllAccounts()?.[0];
-        msalInstance.setActiveAccount(cachedAccount);
-        const aadToken = await acquireTokenWithMsal(msalInstance, {
-          forceRefresh: true,
-          scopes: [hrefEndpoint],
-          authority: `${configContext.AAD_ENDPOINT}${localStorage.getItem("cachedTenantId")}`,
-        });
-        updateUserContext({ aadToken: aadToken });
-        useDataPlaneRbac.setState({ aadTokenUpdated: true });
-      } catch (error) {
-        if (error instanceof msal.AuthError && error.errorCode === msal.BrowserAuthErrorMessage.popUpWindowError.code) {
-          logConsoleError(
-            "We were unable to establish authorization for this account, due to pop-ups being disabled in the browser.\nPlease enable pop-ups for this site and try again",
-          );
-        } else {
-          const errorJson = JSON.stringify(error);
-          logConsoleError(
-            `Failed to perform authorization for this account, due to the following error: \n${errorJson}`,
-          );
-        }
-      }
-    }
+    // TODO: return result
   }
 
   public openNPSSurveyDialog(): void {
@@ -1196,25 +1157,21 @@ export default class Explorer {
   }
 
   public async refreshSampleData(): Promise<void> {
-    try {
-      if (!userContext.sampleDataConnectionInfo) {
-        return;
-      }
-      const collection: DataModels.Collection = await readSampleCollection();
-      if (!collection) {
-        return;
-      }
-
-      const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
-      if (!databaseId) {
-        return;
-      }
-
-      const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
-      useDatabases.setState({ sampleDataResourceTokenCollection });
-    } catch (error) {
-      Logger.logError(getErrorMessage(error), "Explorer");
+    if (!userContext.sampleDataConnectionInfo) {
       return;
     }
+
+    const collection: DataModels.Collection = await readSampleCollection();
+    if (!collection) {
+      return;
+    }
+
+    const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
+    if (!databaseId) {
+      return;
+    }
+
+    const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
+    useDatabases.setState({ sampleDataResourceTokenCollection });
   }
 }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -15,7 +15,6 @@ import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
 import OpenInTabIcon from "../../../../images/open-in-tab.svg";
 import SettingsIcon from "../../../../images/settings_15x15.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
-import EntraIDIcon from "../../../../images/EntraID.svg";
 import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { Platform, configContext } from "../../../ConfigContext";
@@ -31,10 +30,9 @@ import { OpenFullScreen } from "../../OpenFullScreen";
 import { AddDatabasePanel } from "../../Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
-import { SettingsPane, useDataPlaneRbac } from "../../Panes/SettingsPane/SettingsPane";
+import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
 import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState, useSelectedNode } from "../../useSelectedNode";
-import { useEffect, useState } from "react";
 
 let counter = 0;
 
@@ -71,22 +69,6 @@ export function createStaticCommandBarButtons(
       }
     }
 
-    if (userContext.apiType === "SQL") {
-      const [loginButtonProps, setLoginButtonProps] = useState<CommandButtonComponentProps | undefined>(undefined);
-      const dataPlaneRbacEnabled = useDataPlaneRbac((state) => state.dataPlaneRbacEnabled);
-      const aadTokenUpdated = useDataPlaneRbac((state) => state.aadTokenUpdated);
-
-      useEffect(() => {
-        const buttonProps = createLoginForEntraIDButton(container);
-        setLoginButtonProps(buttonProps);
-      }, [dataPlaneRbacEnabled, aadTokenUpdated, container]);
-
-      if (loginButtonProps) {
-        addDivider();
-        buttons.push(loginButtonProps);
-      }
-    }
-
     if (userContext.apiType !== "Tables") {
       newCollectionBtn.children = [createNewCollectionGroup(container)];
       const newDatabaseBtn = createNewDatabase(container);
@@ -293,31 +275,6 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
   };
 }
 
-function createLoginForEntraIDButton(container: Explorer): CommandButtonComponentProps {
-  if (configContext.platform !== Platform.Portal) {
-    return undefined;
-  }
-
-  const handleCommandClick = async () => {
-    await container.openLoginForEntraIDPopUp();
-    useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
-  };
-
-  if (!userContext.dataPlaneRbacEnabled || userContext.aadToken) {
-    return undefined;
-  }
-
-  const label = "Login for Entra ID RBAC";
-  return {
-    iconSrc: EntraIDIcon,
-    iconAlt: label,
-    onCommandClick: handleCommandClick,
-    commandButtonLabel: label,
-    hasPopup: true,
-    ariaLabel: label,
-  };
-}
-
 function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   const label = "New " + getDatabaseName();
   return {

src/Explorer/OpenFullScreen.tsx

@@ -1,20 +1,43 @@
 import { PrimaryButton, Stack, Text } from "@fluentui/react";
+import { AuthType } from "AuthType";
+import { configContext } from "ConfigContext";
+import { userContext } from "UserContext";
 import * as React from "react";
 
 export const OpenFullScreen: React.FunctionComponent = () => {
+  const searchParams = new URLSearchParams();
+  searchParams.append("openFrom", "portal");
+
+  let hasAccountContext = false;
+  let requiresConnectionString = false;
+
+  if (userContext.authType === AuthType.AAD) {
+    if (userContext.subscriptionId && userContext.databaseAccount) {
+      searchParams.append("subscription", userContext.subscriptionId);
+      searchParams.append("account", userContext.databaseAccount.name);
+      searchParams.append("authType", "entra");
+      hasAccountContext = true;
+    }
+  } else if (userContext.authType === AuthType.MasterKey || userContext.authType === AuthType.ResourceToken) {
+    requiresConnectionString = true;
+  }
+
   return (
     <>
       <div style={{ padding: "34px" }}>
         <Stack tokens={{ childrenGap: 10 }}>
           <Text>
-            Open this database account in a new browser tab with Cosmos DB Explorer. You can connect using your
-            Microsoft account or a connection string.
+            Open this database account in a new browser tab with Cosmos DB Explorer.
+            {requiresConnectionString && " You'll need to provide a connection string."}
+            {hasAccountContext && " You may be prompted to sign in with Entra ID again."}
+          </Text>
+          <Text>
+            Open tabs and queries will not be carried over, but you can still access them in this tab.
           </Text>
           <Stack horizontal tokens={{ childrenGap: 10 }}>
             <PrimaryButton
-              onClick={() => {
-                window.open("https://cosmos.azure.com/", "_blank");
-              }}
+              href={`${configContext.hostedExplorerURL}?${searchParams.toString()}`}
+              target="_blank"
               text="Open"
               iconProps={{ iconName: "OpenInNewWindow" }}
             />

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -21,7 +21,7 @@ import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
 import { SubscriptionType } from "Contracts/SubscriptionType";
-import { AddVectorEmbeddingPolicyForm } from "Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm";
+import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -82,6 +82,22 @@ export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
   excludedPaths: [],
 };
 
+const DefaultDatabaseVectorIndex: DataModels.IndexingPolicy = {
+  indexingMode: "consistent",
+  automatic: true,
+  includedPaths: [
+    {
+      path: "/*",
+    },
+  ],
+  excludedPaths: [
+    {
+      path: '/"_etag"/?',
+    },
+  ],
+  vectorIndexes: [],
+};
+
 export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
   vectorEmbeddings: [],
 };
@@ -106,9 +122,8 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
-  vectorIndexingPolicy: DataModels.VectorIndex[];
-  vectorEmbeddingPolicy: DataModels.VectorEmbedding[];
-  vectorPolicyValidated: boolean;
+  vectorIndexingPolicy: string;
+  vectorEmbeddingPolicy: string;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -144,9 +159,8 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
-      vectorEmbeddingPolicy: [],
-      vectorIndexingPolicy: [],
-      vectorPolicyValidated: true,
+      vectorIndexingPolicy: JSON.stringify(DefaultDatabaseVectorIndex, null, 2),
+      vectorEmbeddingPolicy: JSON.stringify(DefaultVectorEmbeddingPolicy, null, 2),
     };
   }
 
@@ -882,28 +896,60 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           )}
           {this.shouldShowVectorSearchParameters() && (
             <Stack>
+              <CollapsibleSectionComponent
+                title="Indexing Policy"
+                isExpandedByDefault={false}
+                onExpand={() => {
+                  this.scrollToSection("collapsibleVectorPolicySectionContent");
+                }}
+              >
+                <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
+                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
+                    Learn more
+                  </Link>
+                  <EditorReact
+                    language={"json"}
+                    content={this.state.vectorIndexingPolicy}
+                    isReadOnly={false}
+                    wordWrap={"on"}
+                    ariaLabel={"Editing indexing policy"}
+                    lineNumbers={"on"}
+                    scrollBeyondLastLine={false}
+                    spinnerClassName="panelSectionSpinner"
+                    monacoContainerStyles={{
+                      minHeight: 200,
+                    }}
+                    onContentChanged={(newIndexingPolicy: string) => this.setVectorIndexingPolicy(newIndexingPolicy)}
+                  />
+                </Stack>
+              </CollapsibleSectionComponent>
               <CollapsibleSectionComponent
                 title="Container Vector Policy"
                 isExpandedByDefault={false}
                 onExpand={() => {
                   this.scrollToSection("collapsibleVectorPolicySectionContent");
                 }}
-                tooltipContent={this.getContainerVectorPolicyTooltipContent()}
               >
                 <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
-                  <Stack styles={{ root: { paddingLeft: 40 } }}>
-                    <AddVectorEmbeddingPolicyForm
-                      vectorEmbedding={this.state.vectorEmbeddingPolicy}
-                      vectorIndex={this.state.vectorIndexingPolicy}
-                      onVectorEmbeddingChange={(
-                        vectorEmbeddingPolicy: DataModels.VectorEmbedding[],
-                        vectorIndexingPolicy: DataModels.VectorIndex[],
-                        vectorPolicyValidated: boolean,
-                      ) => {
-                        this.setState({ vectorEmbeddingPolicy, vectorIndexingPolicy, vectorPolicyValidated });
-                      }}
-                    />
-                  </Stack>
+                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
+                    Learn more
+                  </Link>
+                  <EditorReact
+                    language={"json"}
+                    content={this.state.vectorEmbeddingPolicy}
+                    isReadOnly={false}
+                    wordWrap={"on"}
+                    ariaLabel={"Editing container vector policy"}
+                    lineNumbers={"on"}
+                    scrollBeyondLastLine={false}
+                    spinnerClassName="panelSectionSpinner"
+                    monacoContainerStyles={{
+                      minHeight: 200,
+                    }}
+                    onContentChanged={(newVectorEmbeddingPolicy: string) =>
+                      this.setVectorEmbeddingPolicy(newVectorEmbeddingPolicy)
+                    }
+                  />
                 </Stack>
               </CollapsibleSectionComponent>
             </Stack>
@@ -1113,13 +1159,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
-  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: DataModels.VectorEmbedding[]): void {
+  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: string): void {
     this.setState({
       vectorEmbeddingPolicy,
     });
   }
 
-  private setVectorIndexingPolicy(vectorIndexingPolicy: DataModels.VectorIndex[]): void {
+  private setVectorIndexingPolicy(vectorIndexingPolicy: string): void {
     this.setState({
       vectorIndexingPolicy,
     });
@@ -1205,18 +1251,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
-  private getContainerVectorPolicyTooltipContent(): JSX.Element {
-    return (
-      <Text variant="small">
-        Describe any properties in your data that contain vectors, so that they can be made available for similarity
-        queries.{" "}
-        <Link target="_blank" href="https://aka.ms/CosmosDBVectorSetup">
-          Learn more
-        </Link>
-      </Text>
-    );
-  }
-
   private shouldShowCollectionThroughputInput(): boolean {
     if (isServerlessAccount()) {
       return false;
@@ -1336,9 +1370,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
-    if (this.shouldShowVectorSearchParameters() && !this.state.vectorPolicyValidated) {
-      this.setState({ errorMessage: "Please fix errors in container vector policy" });
-      return false;
+    if (this.shouldShowVectorSearchParameters()) {
+      try {
+        JSON.parse(this.state.vectorIndexingPolicy) as DataModels.IndexingPolicy;
+      } catch (e) {
+        this.setState({ errorMessage: "Invalid JSON format for indexingPolicy" });
+        return false;
+      }
+
+      try {
+        JSON.parse(this.state.vectorEmbeddingPolicy) as DataModels.VectorEmbeddingPolicy;
+      } catch (e) {
+        this.setState({ errorMessage: "Invalid JSON format for vectorEmbeddingPolicy" });
+        return false;
+      }
     }
 
     return true;
@@ -1416,17 +1461,15 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         }
       : undefined;
 
-    const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
+    let indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
       ? AllPropertiesIndexed
       : SharedDatabaseDefault;
 
     let vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
 
     if (this.shouldShowVectorSearchParameters()) {
-      indexingPolicy.vectorIndexes = this.state.vectorIndexingPolicy;
-      vectorEmbeddingPolicy = {
-        vectorEmbeddings: this.state.vectorEmbeddingPolicy,
-      };
+      indexingPolicy = JSON.parse(this.state.vectorIndexingPolicy);
+      vectorEmbeddingPolicy = JSON.parse(this.state.vectorEmbeddingPolicy);
     }
 
     const telemetryData = {

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -4,19 +4,14 @@ import {
   IChoiceGroupOption,
   ISpinButtonStyles,
   IToggleStyles,
-  Icon,
-  MessageBar,
-  MessageBarType,
   Position,
   SpinButton,
   Toggle,
-  TooltipHost,
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { SplitterDirection } from "Common/Splitter";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
-import { Platform, configContext } from "ConfigContext";
-import { useDatabases } from "Explorer/useDatabases";
+import { configContext } from "ConfigContext";
 import {
   DefaultRUThreshold,
   LocalStorageUtility,
@@ -26,7 +21,7 @@ import {
   ruThresholdEnabled as isRUThresholdEnabled,
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
-import { updateUserContext, userContext } from "UserContext";
+import { userContext } from "UserContext";
 import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -34,24 +29,6 @@ import { useSidePanel } from "hooks/useSidePanel";
 import React, { FunctionComponent, useState } from "react";
 import Explorer from "../../Explorer";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
-import { AuthType } from "AuthType";
-import create, { UseStore } from "zustand";
-
-export interface DataPlaneRbacState {
-  dataPlaneRbacEnabled: boolean;
-  aadTokenUpdated: boolean;
-
-  getState?: () => DataPlaneRbacState;
-
-  setDataPlaneRbacEnabled: (dataPlaneRbacEnabled: boolean) => void;
-  setAadDataPlaneUpdated: (aadTokenUpdated: boolean) => void;
-}
-
-type DataPlaneRbacStore = UseStore<Partial<DataPlaneRbacState>>;
-
-export const useDataPlaneRbac: DataPlaneRbacStore = create(() => ({
-  dataPlaneRbacEnabled: false,
-}));
 
 export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   explorer,
@@ -66,14 +43,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       ? Constants.Queries.UnlimitedPageOption
       : Constants.Queries.CustomPageOption,
   );
-
-  const [enableDataPlaneRBACOption, setEnableDataPlaneRBACOption] = useState<string>(
-    LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)
-      ? LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled)
-      : Constants.RBACOptions.setAutomaticRBACOption,
-  );
-  const [showDataPlaneRBACWarning, setShowDataPlaneRBACWarning] = useState<boolean>(false);
-
   const [ruThresholdEnabled, setRUThresholdEnabled] = useState<boolean>(isRUThresholdEnabled());
   const [ruThreshold, setRUThreshold] = useState<number>(getRUThreshold());
   const [queryTimeoutEnabled, setQueryTimeoutEnabled] = useState<boolean>(
@@ -138,10 +107,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
   const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
-  const shouldShowCopilotSampleDBOption =
-    userContext.apiType === "SQL" &&
-    useQueryCopilot.getState().copilotEnabled &&
-    useDatabases.getState().sampleDataResourceTokenCollection;
+  const shouldShowCopilotSampleDBOption = userContext.apiType === "SQL" && useQueryCopilot.getState().copilotEnabled;
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 
@@ -149,26 +115,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
       StorageKey.ActualItemPerPage,
       isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage,
     );
-
     LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
-
-    LocalStorageUtility.setEntryString(StorageKey.DataPlaneRbacEnabled, enableDataPlaneRBACOption);
-    if (
-      enableDataPlaneRBACOption === Constants.RBACOptions.setTrueRBACOption ||
-      (enableDataPlaneRBACOption === Constants.RBACOptions.setAutomaticRBACOption &&
-        userContext.databaseAccount.properties.disableLocalAuth)
-    ) {
-      updateUserContext({
-        dataPlaneRbacEnabled: true,
-      });
-      useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
-    } else {
-      updateUserContext({
-        dataPlaneRbacEnabled: false,
-      });
-      useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
-    }
-
     LocalStorageUtility.setEntryBoolean(StorageKey.RUThresholdEnabled, ruThresholdEnabled);
     LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
     LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
@@ -256,12 +203,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     { key: Constants.PriorityLevel.High, text: "High" },
   ];
 
-  const dataPlaneRBACOptionsList: IChoiceGroupOption[] = [
-    { key: Constants.RBACOptions.setAutomaticRBACOption, text: "Automatic" },
-    { key: Constants.RBACOptions.setTrueRBACOption, text: "True" },
-    { key: Constants.RBACOptions.setFalseRBACOption, text: "False" },
-  ];
-
   const defaultQueryResultsViewOptionList: IChoiceGroupOption[] = [
     { key: SplitterDirection.Vertical, text: "Vertical" },
     { key: SplitterDirection.Horizontal, text: "Horizontal" },
@@ -278,20 +219,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     setPageOption(option.key);
   };
 
-  const handleOnDataPlaneRBACOptionChange = (
-    ev: React.FormEvent<HTMLInputElement>,
-    option: IChoiceGroupOption,
-  ): void => {
-    setEnableDataPlaneRBACOption(option.key);
-
-    const shouldShowWarning =
-      (option.key === Constants.RBACOptions.setTrueRBACOption ||
-        (option.key === Constants.RBACOptions.setAutomaticRBACOption &&
-          userContext.databaseAccount.properties.disableLocalAuth === true)) &&
-      !useDataPlaneRbac.getState().aadTokenUpdated;
-    setShowDataPlaneRBACWarning(shouldShowWarning);
-  };
-
   const handleOnRUThresholdToggleChange = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
     setRUThresholdEnabled(checked);
   };
@@ -452,54 +379,6 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
             </div>
           </div>
         )}
-        {userContext.apiType === "SQL" && userContext.authType === AuthType.AAD && (
-          <>
-            <div className="settingsSection">
-              <div className="settingsSectionPart">
-                <fieldset>
-                  <legend id="enableDataPlaneRBACOptions" className="settingsSectionLabel legendLabel">
-                    Enable Entra ID RBAC
-                  </legend>
-                  <TooltipHost
-                    content={
-                      <>
-                        Choose Automatic to enable Entra ID RBAC automatically. True/False to force enable/disable Entra
-                        ID RBAC.
-                        <a
-                          href="https://learn.microsoft.com/en-us/azure/cosmos-db/how-to-setup-rbac#use-data-explorer"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {" "}
-                          Learn more{" "}
-                        </a>
-                      </>
-                    }
-                  >
-                    <Icon iconName="Info" ariaLabel="Info tooltip" className="panelInfoIcon" tabIndex={0} />
-                  </TooltipHost>
-                  {showDataPlaneRBACWarning && configContext.platform === Platform.Portal && (
-                    <MessageBar
-                      messageBarType={MessageBarType.warning}
-                      isMultiline={true}
-                      onDismiss={() => setShowDataPlaneRBACWarning(false)}
-                      dismissButtonAriaLabel="Close"
-                    >
-                      Please click on &quot;Login for Entra ID RBAC&quot; prior to performing Entra ID RBAC operations
-                    </MessageBar>
-                  )}
-                  <ChoiceGroup
-                    ariaLabelledBy="enableDataPlaneRBACOptions"
-                    options={dataPlaneRBACOptionsList}
-                    styles={choiceButtonStyles}
-                    selectedKey={enableDataPlaneRBACOption}
-                    onChange={handleOnDataPlaneRBACOptionChange}
-                  />
-                </fieldset>
-              </div>
-            </div>
-          </>
-        )}
         {userContext.apiType === "SQL" && (
           <>
             <div className="settingsSection">

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx

@@ -1,84 +0,0 @@
-import "@testing-library/jest-dom/extend-expect";
-import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import React from "react";
-import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
-
-const mockVectorEmbedding: VectorEmbedding[] = [
-  { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
-];
-
-const mockVectorIndex: VectorIndex[] = [{ path: "/vector1", type: "flat" }];
-
-const mockOnVectorEmbeddingChange = jest.fn();
-
-describe("AddVectorEmbeddingPolicyForm", () => {
-  let component: RenderResult;
-
-  beforeEach(() => {
-    component = render(
-      <AddVectorEmbeddingPolicyForm
-        vectorEmbedding={mockVectorEmbedding}
-        vectorIndex={mockVectorIndex}
-        onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
-      />,
-    );
-  });
-
-  test("renders correctly", () => {
-    expect(screen.getByText("Vector embedding 1")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("/vector1")).toBeInTheDocument();
-  });
-
-  test("calls onVectorEmbeddingChange on adding a new vector embedding", () => {
-    fireEvent.click(screen.getByText("Add vector embedding"));
-    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
-  });
-
-  test("calls onDelete when delete button is clicked", async () => {
-    const deleteButton = component.container.querySelector("#delete-vector-policy-1");
-    fireEvent.click(deleteButton);
-    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
-    expect(screen.queryByText("Vector embedding 1")).toBeNull();
-  });
-
-  test("calls onVectorEmbeddingPathChange on input change", () => {
-    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/newPath" } });
-    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
-  });
-
-  test("validates input correctly", async () => {
-    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "" } });
-    await waitFor(() => expect(screen.getByText("Vector embedding path should not be empty")).toBeInTheDocument(), {
-      timeout: 1500,
-    });
-    await waitFor(
-      () =>
-        expect(
-          screen.getByText("Vector embedding dimension must be greater than 0 and less than or equal 4096"),
-        ).toBeInTheDocument(),
-      {
-        timeout: 1500,
-      },
-    );
-    fireEvent.change(component.container.querySelector("#vector-policy-dimension-1"), { target: { value: "4096" } });
-    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/vector1" } });
-    await waitFor(() => expect(screen.queryByText("Vector embedding path should not be empty")).toBeNull(), {
-      timeout: 1500,
-    });
-    await waitFor(
-      () => expect(screen.queryByText("Maximum allowed dimension for flat index is 505")).toBeInTheDocument(),
-      {
-        timeout: 1500,
-      },
-    );
-  });
-
-  test("duplicate vector path is not allowed", async () => {
-    fireEvent.click(screen.getByText("Add vector embedding"));
-    fireEvent.change(component.container.querySelector("#vector-policy-path-2"), { target: { value: "/vector1" } });
-    await waitFor(() => expect(screen.queryByText("Vector embedding path is already defined")).toBeNull(), {
-      timeout: 1500,
-    });
-  });
-});

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx

@@ -1,300 +0,0 @@
-import {
-  DefaultButton,
-  Dropdown,
-  IDropdownOption,
-  IStyleFunctionOrObject,
-  ITextFieldStyleProps,
-  ITextFieldStyles,
-  IconButton,
-  Label,
-  Stack,
-  TextField,
-} from "@fluentui/react";
-import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
-import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
-import {
-  getDataTypeOptions,
-  getDistanceFunctionOptions,
-  getIndexTypeOptions,
-} from "Explorer/Panes/VectorSearchPanel/VectorSearchUtils";
-import React, { FunctionComponent, useState } from "react";
-
-export interface IAddVectorEmbeddingPolicyFormProps {
-  vectorEmbedding: VectorEmbedding[];
-  vectorIndex: VectorIndex[];
-  onVectorEmbeddingChange: (
-    vectorEmbeddings: VectorEmbedding[],
-    vectorIndexingPolicies: VectorIndex[],
-    validationPassed: boolean,
-  ) => void;
-}
-
-export interface VectorEmbeddingPolicyData {
-  path: string;
-  dataType: VectorEmbedding["dataType"];
-  distanceFunction: VectorEmbedding["distanceFunction"];
-  dimensions: number;
-  indexType: VectorIndex["type"] | "none";
-  pathError: string;
-  dimensionsError: string;
-}
-
-type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
-
-const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
-  fieldGroup: {
-    height: 27,
-  },
-  field: {
-    fontSize: 12,
-    padding: "0 8px",
-  },
-};
-
-const dropdownStyles = {
-  title: {
-    height: 27,
-    lineHeight: "24px",
-    fontSize: 12,
-  },
-  dropdown: {
-    height: 27,
-    lineHeight: "24px",
-  },
-  dropdownItem: {
-    fontSize: 12,
-  },
-};
-
-export const AddVectorEmbeddingPolicyForm: FunctionComponent<IAddVectorEmbeddingPolicyFormProps> = ({
-  vectorEmbedding,
-  vectorIndex,
-  onVectorEmbeddingChange,
-}): JSX.Element => {
-  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
-    let error = "";
-    if (!path) {
-      error = "Vector embedding path should not be empty";
-    }
-    if (
-      index >= 0 &&
-      vectorEmbeddingPolicyData?.find(
-        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
-          dataIndex !== index && vectorEmbedding.path === path,
-      )
-    ) {
-      error = "Vector embedding path is already defined";
-    }
-    return error;
-  };
-
-  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
-    let error = "";
-    if (dimension <= 0 || dimension > 4096) {
-      error = "Vector embedding dimension must be greater than 0 and less than or equal 4096";
-    }
-    if (indexType === "flat" && dimension > 505) {
-      error = "Maximum allowed dimension for flat index is 505";
-    }
-    return error;
-  };
-
-  const initializeData = (vectorEmbedding: VectorEmbedding[], vectorIndex: VectorIndex[]) => {
-    const mergedData: VectorEmbeddingPolicyData[] = [];
-    vectorEmbedding.forEach((embedding) => {
-      const matchingIndex = vectorIndex.find((index) => index.path === embedding.path);
-      mergedData.push({
-        ...embedding,
-        indexType: matchingIndex?.type || "none",
-        pathError: onVectorEmbeddingPathError(embedding.path),
-        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
-      });
-    });
-    return mergedData;
-  };
-
-  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
-    initializeData(vectorEmbedding, vectorIndex),
-  );
-
-  React.useEffect(() => {
-    propagateData();
-  }, [vectorEmbeddingPolicyData]);
-
-  const propagateData = () => {
-    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
-      dataType: policy.dataType,
-      dimensions: policy.dimensions,
-      distanceFunction: policy.distanceFunction,
-      path: policy.path,
-    }));
-    const vectorIndexingPolicies: VectorIndex[] = vectorEmbeddingPolicyData
-      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
-      .map(
-        (policy) =>
-          ({
-            path: policy.path,
-            type: policy.indexType,
-          }) as VectorIndex,
-      );
-    const validationPassed = vectorEmbeddingPolicyData.every(
-      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
-    );
-    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexingPolicies, validationPassed);
-  };
-
-  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = event.target.value.trim();
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
-      vectorEmbeddings[index].path = "/" + value;
-    } else {
-      vectorEmbeddings[index].path = value;
-    }
-    const error = onVectorEmbeddingPathError(value, index);
-    vectorEmbeddings[index].pathError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
-    const value = parseInt(event.target.value.trim()) || 0;
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].dimensions = value;
-    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    const vectorEmbedding = vectorEmbeddings[index];
-    vectorEmbeddings[index].indexType = option.key as never;
-    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
-    vectorEmbeddings[index].dimensionsError = error;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onVectorEmbeddingPolicyChange = (
-    index: number,
-    option: IDropdownOption,
-    property: VectorEmbeddingPolicyProperty,
-  ): void => {
-    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
-    vectorEmbeddings[index][property] = option.key as never;
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  const onAdd = () => {
-    setVectorEmbeddingPolicyData([
-      ...vectorEmbeddingPolicyData,
-      {
-        path: "",
-        dataType: "float32",
-        distanceFunction: "euclidean",
-        dimensions: 0,
-        indexType: "none",
-        pathError: onVectorEmbeddingPathError(""),
-        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
-      },
-    ]);
-  };
-
-  const onDelete = (index: number) => {
-    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
-    setVectorEmbeddingPolicyData(vectorEmbeddings);
-  };
-
-  return (
-    <Stack tokens={{ childrenGap: 4 }}>
-      {vectorEmbeddingPolicyData.length > 0 &&
-        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
-          <CollapsibleSectionComponent key={index} isExpandedByDefault={true} title={`Vector embedding ${index + 1}`}>
-            <Stack horizontal tokens={{ childrenGap: 4 }}>
-              <Stack
-                styles={{
-                  root: {
-                    margin: "0 0 6px 20px !important",
-                    paddingLeft: 20,
-                    width: "80%",
-                    borderLeft: "1px solid",
-                  },
-                }}
-              >
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Path</Label>
-                  <TextField
-                    id={`vector-policy-path-${index + 1}`}
-                    required={true}
-                    placeholder="/vector1"
-                    styles={textFieldStyles}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
-                    value={vectorEmbeddingPolicy.path || ""}
-                    errorMessage={vectorEmbeddingPolicy.pathError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Data type</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDataTypeOptions()}
-                    selectedKey={vectorEmbeddingPolicy.dataType}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "dataType")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Distance function</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getDistanceFunctionOptions()}
-                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
-                    }
-                  ></Dropdown>
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Dimensions</Label>
-                  <TextField
-                    id={`vector-policy-dimension-${index + 1}`}
-                    required={true}
-                    styles={textFieldStyles}
-                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      onVectorEmbeddingDimensionsChange(index, event)
-                    }
-                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
-                  />
-                </Stack>
-                <Stack>
-                  <Label styles={{ root: { fontSize: 12 } }}>Index type</Label>
-                  <Dropdown
-                    required={true}
-                    styles={dropdownStyles}
-                    options={getIndexTypeOptions()}
-                    selectedKey={vectorEmbeddingPolicy.indexType}
-                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
-                      onVectorEmbeddingIndexTypeChange(index, option)
-                    }
-                  ></Dropdown>
-                </Stack>
-              </Stack>
-              <IconButton
-                id={`delete-vector-policy-${index + 1}`}
-                iconProps={{ iconName: "Delete" }}
-                style={{ height: 27, margin: "auto" }}
-                onClick={() => onDelete(index)}
-              />
-            </Stack>
-          </CollapsibleSectionComponent>
-        ))}
-      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
-        Add vector embedding
-      </DefaultButton>
-    </Stack>
-  );
-};

src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts

@@ -1,16 +0,0 @@
-import { IDropdownOption } from "@fluentui/react";
-
-const dataTypes = ["float32", "uint8", "int8"];
-const distanceFunctions = ["euclidean", "cosine", "dotproduct"];
-const indexTypes = ["none", "flat", "diskANN", "quantizedFlat"];
-
-export const getDataTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(dataTypes);
-export const getDistanceFunctionOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(distanceFunctions);
-export const getIndexTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(indexTypes);
-
-function createDropdownOptionsFromLiterals<T extends string>(literals: T[]): IDropdownOption[] {
-  return literals.map((value) => ({
-    key: value,
-    text: value,
-  }));
-}

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -504,12 +504,7 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               {!showFeedbackBar && (
                 <Text style={{ fontSize: 12 }}>
                   AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-                  <Link
-                    href="https://aka.ms/cdb-copilot-preview-terms"
-                    target="_blank"
-                    style={{ color: "#0072D4" }}
-                    className="underlinedLink"
-                  >
+                  <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072D4" }}>
                     Read preview terms
                   </Link>
                   {showErrorMessageBar && (

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -355,15 +355,15 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               ) : (
                 <div className="moreStuffContainer">
                   <div className="moreStuffColumn commonTasks">
-                    <h2 className="title">Recents</h2>
+                    <div className="title">Recents</div>
                     {this.getRecentItems()}
                   </div>
                   <div className="moreStuffColumn">
-                    <h2 className="title">Top 3 things you need to know</h2>
+                    <div className="title">Top 3 things you need to know</div>
                     {this.top3Items()}
                   </div>
                   <div className="moreStuffColumn tipsContainer">
-                    <h2 className="title">Learning Resources</h2>
+                    <div className="title">Learning Resources</div>
                     {this.getLearningResourceItems()}
                   </div>
                 </div>

src/HostedExplorer.tsx

@@ -33,7 +33,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, authFailure } =
+  const { isLoggedIn, armToken, graphToken, account, tenantId, logout, forgetUser, login, switchTenant, authFailure } =
     useAADAuth();
   const [databaseAccount, setDatabaseAccount] = React.useState<DatabaseAccount>();
   const [authType, setAuthType] = React.useState<AuthType>(encryptedToken ? AuthType.EncryptedToken : undefined);

src/Index.tsx

@@ -9,7 +9,6 @@ import "../less/index.less";
 
 const Index = (): JSX.Element => {
   const [navigationSelection, setNavigationSelection] = useState("quickstart");
-
   const quickstart_click = () => {
     setNavigationSelection("quickstart");
   };

src/Platform/Hosted/Components/AccountSwitcher.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable react/display-name */
 
 import { DefaultButton, IButtonStyles, IContextualMenuItem } from "@fluentui/react";
+import { urlContext } from "Utils/UrlContext";
 import * as React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
 import { StyleConstants } from "../../../Common/StyleConstants";
@@ -50,12 +51,12 @@ interface Props {
 export const AccountSwitcher: FunctionComponent<Props> = ({ armToken, setDatabaseAccount }: Props) => {
   const subscriptions = useSubscriptions(armToken);
   const [selectedSubscriptionId, setSelectedSubscriptionId] = useState<string>(() =>
-    localStorage.getItem("cachedSubscriptionId"),
+    urlContext.subscription || localStorage.getItem("cachedSubscriptionId"),
   );
   const selectedSubscription = subscriptions?.find((sub) => sub.subscriptionId === selectedSubscriptionId);
   const accounts = useDatabaseAccounts(selectedSubscription?.subscriptionId, armToken);
   const [selectedAccountName, setSelectedAccountName] = useState<string>(() =>
-    localStorage.getItem("cachedDatabaseAccountName"),
+    urlContext.account || localStorage.getItem("cachedDatabaseAccountName"),
   );
   const selectedAccount = accounts?.find((account) => account.name === selectedAccountName);
 

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -1,6 +1,7 @@
 import { useBoolean } from "@fluentui/react-hooks";
 import { userContext } from "UserContext";
 import { useNewPortalBackendEndpoint } from "Utils/EndpointUtils";
+import { OpenedFrom, RequestedAuthType, urlContext } from "Utils/UrlContext";
 import * as React from "react";
 import ConnectImage from "../../../../images/HdeConnectCosmosDB.svg";
 import ErrorImage from "../../../../images/error.svg";
@@ -69,7 +70,9 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
 }: Props) => {
   const [isFormVisible, { setTrue: showForm }] = useBoolean(false);
   const [errorMessage, setErrorMessage] = React.useState("");
-  const enableConnectionStringLogin = !userContext.features.disableConnectionStringLogin;
+  const enableConnectionStringLogin =
+    urlContext.authType !== RequestedAuthType.Entra &&
+    !userContext.features.disableConnectionStringLogin;
 
   return (
     <div id="connectExplorer" className="connectExplorerContainer" style={{ display: "flex" }}>
@@ -136,6 +139,11 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
                 <p className="switchConnectTypeText" data-test="Link:SwitchConnectionType" onClick={showForm}>
                   Connect to your account with connection string
                 </p>
+                )}
+              {urlContext.openFrom === OpenedFrom.Portal && (
+                <p className="switchConnectTypeText">
+                  Click sign in to continue your session from the Azure Portal.
+                </p>
               )}
             </div>
           )}

src/SelfServe/SelfServe.tsx

@@ -117,7 +117,6 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
   updateConfigContext({
     ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
-    CATALOG_API_KEY: inputs.catalogAPIKey,
   });
 
   updateUserContext({

src/SelfServe/SqlX/SqlX.rp.ts

@@ -1,15 +1,11 @@
 import { configContext } from "../../ConfigContext";
 import { userContext } from "../../UserContext";
-import { get } from "../../Utils/arm/generatedClients/cosmos/locations";
-import { armRequestWithoutPolling, getOfferingIdsRequest } from "../../Utils/arm/request";
+import { armRequestWithoutPolling } from "../../Utils/arm/request";
 import { selfServeTraceFailure, selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor";
 import { RefreshResult } from "../SelfServeTypes";
 import SqlX from "./SqlX";
 import {
   FetchPricesResponse,
-  GetOfferingIdsResponse,
-  OfferingIdMap,
-  OfferingIdRequest,
   PriceMapAndCurrencyCode,
   RegionItem,
   RegionsResponse,
@@ -170,21 +166,11 @@ export const getRegions = async (): Promise<Array<RegionItem>> => {
   }
 };
 
-export const getRegionShortName = async (regionDisplayName: string): Promise<string> => {
-  const locationsList = await get(userContext.subscriptionId, regionDisplayName);
-
-  if ("id" in locationsList) {
-    const locationId = locationsList.id;
-    return locationId.substring(locationId.lastIndexOf("/") + 1);
-  }
-  return undefined;
-};
-
 const getFetchPricesPathForRegion = (subscriptionId: string): string => {
   return `/subscriptions/${subscriptionId}/providers/Microsoft.CostManagement/fetchPrices`;
 };
 
-export const getPriceMapAndCurrencyCode = async (map: OfferingIdMap): Promise<PriceMapAndCurrencyCode> => {
+export const getPriceMapAndCurrencyCode = async (regions: Array<RegionItem>): Promise<PriceMapAndCurrencyCode> => {
   const telemetryData = {
     feature: "Calculate approximate cost",
     function: "getPriceMapAndCurrencyCode",
@@ -195,94 +181,39 @@ export const getPriceMapAndCurrencyCode = async (map: OfferingIdMap): Promise<Pr
 
   try {
     const priceMap = new Map<string, Map<string, number>>();
-    let billingCurrency;
-    for (const region of map.keys()) {
+    let currencyCode;
+    for (const regionItem of regions) {
       const regionPriceMap = new Map<string, number>();
-      const regionShortName = await getRegionShortName(region);
-      const requestBody: OfferingIdRequest = {
-        location: regionShortName,
-        ids: Array.from(map.get(region).keys()),
-      };
 
       const response = await armRequestWithoutPolling<FetchPricesResponse>({
         host: configContext.ARM_ENDPOINT,
         path: getFetchPricesPathForRegion(userContext.subscriptionId),
         method: "POST",
-        apiVersion: "2023-04-01-preview",
-        body: requestBody,
-      });
-
-      for (const item of response.result) {
-        if (item.error) {
-          continue;
-        }
-
-        if (billingCurrency === undefined) {
-          billingCurrency = item.billingCurrency;
-        } else if (item.billingCurrency !== billingCurrency) {
-          throw Error("Currency Code Mismatch: Currency code not same for all regions / skus.");
-        }
-
-        const offeringId = item.id;
-        const skuName = map.get(region).get(offeringId);
-        const unitPriceinBillingCurrency = item.prices.find((x) => x.type === "Consumption")
-          ?.unitPriceinBillingCurrency;
-        regionPriceMap.set(skuName, unitPriceinBillingCurrency);
-      }
-      priceMap.set(region, regionPriceMap);
-    }
-
-    selfServeTraceSuccess(telemetryData, getPriceMapAndCurrencyCodeTimestamp);
-    return { priceMap: priceMap, billingCurrency: billingCurrency };
-  } catch (err) {
-    const failureTelemetry = { err, selfServeClassName: SqlX.name };
-    selfServeTraceFailure(failureTelemetry, getPriceMapAndCurrencyCodeTimestamp);
-    return { priceMap: undefined, billingCurrency: undefined };
-  }
-};
-
-const getOfferingIdPathForRegion = (): string => {
-  return `/skus?serviceFamily=Databases&service=Azure Cosmos DB`;
-};
-
-export const getOfferingIds = async (regions: Array<RegionItem>): Promise<OfferingIdMap> => {
-  const telemetryData = {
-    feature: "Get Offering Ids to calculate approximate cost",
-    function: "getOfferingIds",
-    description: "fetch offering ids API call",
-    selfServeClassName: SqlX.name,
-  };
-  const getOfferingIdsCodeTimestamp = selfServeTraceStart(telemetryData);
-
-  try {
-    const offeringIdMap = new Map<string, Map<string, string>>();
-    for (const regionItem of regions) {
-      const regionOfferingIdMap = new Map<string, string>();
-      const regionShortName = await getRegionShortName(regionItem.locationName);
-
-      const response = await getOfferingIdsRequest<GetOfferingIdsResponse>({
-        host: configContext.CATALOG_ENDPOINT,
-        path: getOfferingIdPathForRegion(),
-        method: "GET",
-        apiVersion: "2023-05-01-preview",
+        apiVersion: "2020-01-01-preview",
         queryParams: {
-          filter: "armRegionName eq '" + regionShortName + "'",
+          filter:
+            "armRegionName eq '" +
+            regionItem.locationName.split(" ").join("").toLowerCase() +
+            "' and serviceFamily eq 'Databases' and productName eq 'Azure Cosmos DB Dedicated Gateway - General Purpose'",
         },
       });
 
-      for (const item of response.result.items) {
-        if (item.offeringProperties?.length > 0) {
-          regionOfferingIdMap.set(item.offeringProperties[0].offeringId, item.skuName);
+      for (const item of response.result.Items) {
+        if (currencyCode === undefined) {
+          currencyCode = item.currencyCode;
+        } else if (item.currencyCode !== currencyCode) {
+          throw Error("Currency Code Mismatch: Currency code not same for all regions / skus.");
         }
+        regionPriceMap.set(item.skuName, item.retailPrice);
       }
-      offeringIdMap.set(regionItem.locationName, regionOfferingIdMap);
+      priceMap.set(regionItem.locationName, regionPriceMap);
     }
 
-    selfServeTraceSuccess(telemetryData, getOfferingIdsCodeTimestamp);
-    return offeringIdMap;
+    selfServeTraceSuccess(telemetryData, getPriceMapAndCurrencyCodeTimestamp);
+    return { priceMap: priceMap, currencyCode: currencyCode };
   } catch (err) {
     const failureTelemetry = { err, selfServeClassName: SqlX.name };
-    selfServeTraceFailure(failureTelemetry, getOfferingIdsCodeTimestamp);
-    return undefined;
+    selfServeTraceFailure(failureTelemetry, getPriceMapAndCurrencyCodeTimestamp);
+    return { priceMap: undefined, currencyCode: undefined };
   }
 };

src/SelfServe/SqlX/SqlX.tsx

@@ -24,7 +24,6 @@ import { BladeType, generateBladeLink } from "../SelfServeUtils";
 import {
   deleteDedicatedGatewayResource,
   getCurrentProvisioningState,
-  getOfferingIds,
   getPriceMapAndCurrencyCode,
   getRegions,
   refreshDedicatedGatewayProvisioning,
@@ -371,10 +370,9 @@ export default class SqlX extends SelfServeBaseClass {
     });
 
     regions = await getRegions();
-    const offeringIdMap = await getOfferingIds(regions);
-    const priceMapAndCurrencyCode = await getPriceMapAndCurrencyCode(offeringIdMap);
+    const priceMapAndCurrencyCode = await getPriceMapAndCurrencyCode(regions);
     priceMap = priceMapAndCurrencyCode.priceMap;
-    currencyCode = priceMapAndCurrencyCode.billingCurrency;
+    currencyCode = priceMapAndCurrencyCode.currencyCode;
 
     const response = await getCurrentProvisioningState();
     if (response.status && response.status !== "Deleting") {

src/SelfServe/SqlX/SqlxTypes.ts

@@ -30,51 +30,23 @@ export type UpdateDedicatedGatewayRequestProperties = {
   serviceType: string;
 };
 
-export type FetchPricesResponse = Array<PriceItem>;
-
-export type PriceItem = {
-  prices: Array<PriceType>;
-  id: string;
-  billingCurrency: string;
-  error: PriceError;
-};
-
-export type PriceType = {
-  type: string;
-  unitPriceinBillingCurrency: number;
-};
-
-export type PriceError = {
-  type: string;
-  description: string;
+export type FetchPricesResponse = {
+  Items: Array<PriceItem>;
+  NextPageLink: string | undefined;
+  Count: number;
 };
 
 export type PriceMapAndCurrencyCode = {
   priceMap: Map<string, Map<string, number>>;
-  billingCurrency: string;
+  currencyCode: string;
 };
 
-export type GetOfferingIdsResponse = {
-  items: Array<OfferingIdItem>;
-  nextPageLink: string | undefined;
-};
-
-export type OfferingIdItem = {
+export type PriceItem = {
+  retailPrice: number;
   skuName: string;
-  offeringProperties: Array<OfferingProperties>;
+  currencyCode: string;
 };
 
-export type OfferingProperties = {
-  offeringId: string;
-};
-
-export type OfferingIdRequest = {
-  ids: Array<string>;
-  location: string;
-};
-
-export type OfferingIdMap = Map<string, Map<string, string>>;
-
 export type RegionsResponse = {
   properties: RegionsProperties;
 };

src/Shared/StorageUtility.ts

@@ -6,7 +6,6 @@ import * as StringUtility from "./StringUtility";
 export { LocalStorageUtility, SessionStorageUtility };
 export enum StorageKey {
   ActualItemPerPage,
-  DataPlaneRbacEnabled,
   RUThresholdEnabled,
   RUThreshold,
   QueryTimeoutEnabled,

src/UserContext.ts

@@ -13,12 +13,12 @@ import { CollectionCreation, CollectionCreationDefaults } from "./Shared/Constan
 interface ThroughputDefaults {
   fixed: number;
   unlimited:
-    | number
-    | {
-        collectionThreshold: number;
-        lessThanOrEqualToThreshold: number;
-        greatThanThreshold: number;
-      };
+  | number
+  | {
+    collectionThreshold: number;
+    lessThanOrEqualToThreshold: number;
+    greatThanThreshold: number;
+  };
   unlimitedmax: number;
   unlimitedmin: number;
   shared: number;
@@ -101,7 +101,6 @@ export interface UserContext {
   sampleDataConnectionInfo?: ParsedResourceTokenConnectionString;
   readonly vcoreMongoConnectionParams?: VCoreMongoConnectionParams;
   readonly feedbackPolicies?: AdminFeedbackPolicySettings;
-  readonly dataPlaneRbacEnabled?: boolean;
 }
 
 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra" | "Postgres" | "VCoreMongo";
@@ -193,3 +192,4 @@ function apiType(account: DatabaseAccount | undefined): ApiType {
 }
 
 export { updateUserContext, userContext };
+

src/Utils/EndpointUtils.ts

@@ -128,7 +128,7 @@ export const allowedGraphEndpoints: ReadonlyArray<string> = ["https://graph.micr
 
 export const allowedArcadiaEndpoints: ReadonlyArray<string> = ["https://workspaceartifacts.projectarcadia.net"];
 
-export const allowedHostedExplorerEndpoints: ReadonlyArray<string> = ["https://cosmos.azure.com/"];
+export const allowedHostedExplorerEndpoints: ReadonlyArray<string> = ["https://cosmos.azure.com/", "https://localhost:1234/"];
 
 export const allowedMsalRedirectEndpoints: ReadonlyArray<string> = [
   "https://cosmos-explorer-preview.azurewebsites.net/",

src/Utils/UrlContext.ts

@@ -0,0 +1,17 @@
+const urlParams = new URLSearchParams(window.location.search);
+
+export enum OpenedFrom {
+  Portal = "portal",
+}
+
+export enum RequestedAuthType {
+  Entra = "entra",
+  ConnectionString = "connectionstring",
+}
+
+export const urlContext = {
+  openFrom: urlParams.get("openFrom") as OpenedFrom,
+  authType: urlParams.get("authType") as RequestedAuthType,
+  subscription: urlParams.get("subscription"),
+  account: urlParams.get("account"),
+};

src/Utils/arm/request.ts

@@ -160,52 +160,3 @@ async function getOperationStatus(operationStatusUrl: string) {
   }
   throw new Error(`Operation Response: ${JSON.stringify(body)}. Retrying.`);
 }
-
-export async function getOfferingIdsRequest<T>({
-  host,
-  path,
-  apiVersion,
-  method,
-  body: requestBody,
-  queryParams,
-}: Options): Promise<{ result: T; operationStatusUrl: string }> {
-  const url = new URL(path, host);
-  url.searchParams.append("api-version", configContext.armAPIVersion || apiVersion);
-  if (queryParams) {
-    queryParams.filter && url.searchParams.append("$filter", queryParams.filter);
-    queryParams.metricNames && url.searchParams.append("metricnames", queryParams.metricNames);
-  }
-
-  if (!configContext.CATALOG_API_KEY) {
-    throw new Error("No catalog API key provided");
-  }
-
-  const response = await window.fetch(url.href, {
-    method,
-    headers: {
-      [HttpHeaders.xAPIKey]: configContext.CATALOG_API_KEY,
-    },
-    body: requestBody ? JSON.stringify(requestBody) : undefined,
-  });
-  if (!response.ok) {
-    let error: ARMError;
-    try {
-      const errorResponse = (await response.json()) as ParsedErrorResponse;
-      if ("error" in errorResponse) {
-        error = new ARMError(errorResponse.error.message);
-        error.code = errorResponse.error.code;
-      } else {
-        error = new ARMError(errorResponse.message);
-        error.code = errorResponse.code;
-      }
-    } catch (error) {
-      throw new Error(await response.text());
-    }
-
-    throw error;
-  }
-
-  const operationStatusUrl = (response.headers && response.headers.get("location")) || "";
-  const responseBody = (await response.json()) as T;
-  return { result: responseBody, operationStatusUrl: operationStatusUrl };
-}

src/hooks/useAADAuth.ts

@@ -38,6 +38,7 @@ export function useAADAuth(): ReturnType {
   const [authFailure, setAuthFailure] = React.useState<AadAuthFailure>(undefined);
 
   msalInstance.setActiveAccount(account);
+
   const login = React.useCallback(async () => {
     const response = await msalInstance.loginPopup({
       redirectUri: configContext.msalRedirectURI,
@@ -47,13 +48,13 @@ export function useAADAuth(): ReturnType {
     setAccount(response.account);
     setTenantId(response.tenantId);
     localStorage.setItem("cachedTenantId", response.tenantId);
-  }, []);
+  }, [setLoggedIn, setAccount, setTenantId]);
 
   const logout = React.useCallback(() => {
     setLoggedOut();
     localStorage.removeItem("cachedTenantId");
     msalInstance.logoutRedirect();
-  }, []);
+  }, [setLoggedOut]);
 
   const switchTenant = React.useCallback(
     async (id) => {
@@ -66,7 +67,7 @@ export function useAADAuth(): ReturnType {
       setAccount(response.account);
       localStorage.setItem("cachedTenantId", response.tenantId);
     },
-    [account, tenantId],
+    [setTenantId, setAccount],
   );
 
   const acquireTokens = React.useCallback(async () => {
@@ -123,6 +124,19 @@ export function useAADAuth(): ReturnType {
     }
   }, [account, tenantId, acquireTokens, authFailure]);
 
+  React.useEffect(() => {
+    (async () => {
+      // If we're on a redirect, handle it
+      const response = await msalInstance.handleRedirectPromise();
+      if (response) {
+        setLoggedIn();
+        setAccount(response.account);
+        setTenantId(response.tenantId);
+        localStorage.setItem("cachedTenantId", response.tenantId);
+      }
+    })()
+  }, [setLoggedIn])
+
   return {
     account,
     tenantId,

src/hooks/useKnockoutExplorer.ts

@@ -1,4 +1,3 @@
-import * as Constants from "Common/Constants";
 import { createUri } from "Common/UrlUtility";
 import { DATA_EXPLORER_RPC_VERSION } from "Contracts/DataExplorerMessagesContract";
 import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
@@ -6,7 +5,6 @@ import { FABRIC_RPC_VERSION, FabricMessageV2 } from "Contracts/FabricMessagesCon
 import Explorer from "Explorer/Explorer";
 import { useSelectedNode } from "Explorer/useSelectedNode";
 import { scheduleRefreshDatabaseResourceToken } from "Platform/Fabric/FabricUtil";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -43,7 +41,6 @@ import { isInvalidParentFrameOrigin, shouldProcessMessage } from "../Utils/Messa
 import { listKeys } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
 import { DatabaseAccountListKeysResult } from "../Utils/arm/generatedClients/cosmos/types";
 import { applyExplorerBindings } from "../applyExplorerBindings";
-import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 
 // This hook will create a new instance of Explorer.ts and bind it to the DOM
 // This hook has a LOT of magic, but ideally we can delete it once we have removed KO and switched entirely to React
@@ -256,6 +253,7 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
   const subscriptionId = accountResourceId && accountResourceId.split("subscriptions/")[1].split("/")[0];
   const resourceGroup = accountResourceId && accountResourceId.split("resourceGroups/")[1].split("/")[0];
   let aadToken;
+  let keys: DatabaseAccountListKeysResult = {};
   if (account.properties?.documentEndpoint) {
     const hrefEndpoint = new URL(account.properties.documentEndpoint).href.replace(/\/$/, "/.default");
     const msalInstance = await getMsalInstance();
@@ -273,30 +271,8 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     }
   }
   try {
-    updateUserContext({
-      databaseAccount: config.databaseAccount,
-    });
-
-    if (!userContext.features.enableAadDataPlane) {
-      if (userContext.apiType === "SQL") {
-        if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
-          const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
-
-          let dataPlaneRbacEnabled;
-          if (isDataPlaneRbacSetting === Constants.RBACOptions.setAutomaticRBACOption) {
-            dataPlaneRbacEnabled = account.properties.disableLocalAuth;
-          } else {
-            dataPlaneRbacEnabled = isDataPlaneRbacSetting === Constants.RBACOptions.setTrueRBACOption;
-          }
-
-          updateUserContext({ dataPlaneRbacEnabled });
-        }
-      } else {
-        const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
-        updateUserContext({
-          masterKey: keys.primaryMasterKey,
-        });
-      }
+    if (!account.properties.disableLocalAuth) {
+      keys = await listKeys(subscriptionId, resourceGroup, account.name);
     }
   } catch (e) {
     if (userContext.features.enableAadDataPlane) {
@@ -309,6 +285,8 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     subscriptionId,
     resourceGroup,
     aadToken,
+    databaseAccount: config.databaseAccount,
+    masterKey: keys.primaryMasterKey,
   });
   const explorer = new Explorer();
   return explorer;
@@ -442,7 +420,7 @@ async function configurePortal(): Promise<Explorer> {
     // In the Portal, configuration of Explorer happens via iframe message
     window.addEventListener(
       "message",
-      async (event) => {
+      (event) => {
         if (isInvalidParentFrameOrigin(event)) {
           return;
         }
@@ -472,29 +450,6 @@ async function configurePortal(): Promise<Explorer> {
             setTimeout(() => explorer.openNPSSurveyDialog(), 3000);
           }
 
-          const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
-
-          if (userContext.apiType === "SQL") {
-            if (LocalStorageUtility.hasItem(StorageKey.DataPlaneRbacEnabled)) {
-              const isDataPlaneRbacSetting = LocalStorageUtility.getEntryString(StorageKey.DataPlaneRbacEnabled);
-
-              let dataPlaneRbacEnabled;
-              if (isDataPlaneRbacSetting === Constants.RBACOptions.setAutomaticRBACOption) {
-                dataPlaneRbacEnabled = account.properties.disableLocalAuth;
-              } else {
-                dataPlaneRbacEnabled = isDataPlaneRbacSetting === Constants.RBACOptions.setTrueRBACOption;
-              }
-
-              updateUserContext({ dataPlaneRbacEnabled });
-              useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
-            }
-          } else {
-            const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
-            updateUserContext({
-              masterKey: keys.primaryMasterKey,
-            });
-          }
-
           if (openAction) {
             handleOpenAction(openAction, useDatabases.getState().databases, explorer);
           }
@@ -535,6 +490,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
   }
 
   const authorizationToken = inputs.authorizationToken || "";
+  const masterKey = inputs.masterKey || "";
   const databaseAccount = inputs.databaseAccount;
 
   updateConfigContext({
@@ -547,6 +503,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
 
   updateUserContext({
     authorizationToken,
+    masterKey,
     databaseAccount,
     resourceGroup: inputs.resourceGroup,
     subscriptionId: inputs.subscriptionId,

test/README.md

@@ -33,11 +33,9 @@ All you need to provide is a resource group to deploy in to.
 
 To use this script, there are a few prerequisites that must be done at least once:
 
-1. This script requires Powershell 7+. Install it [here](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows).
-2. [Install Azure PowerShell](https://learn.microsoft.com/en-us/powershell/azure/install-azps-windows?view=azps-12.0.0&tabs=powershell&pivots=windows-psgallery) if you don't already have it.
-3. [Install Bicep CLI](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/install#install-manually) if it is not already installed.
-4. Connect to your Azure account using `Connect-AzAccount`.
-5. Ensure you have a Resource Group _ready_ to deploy into, the deploy script requires an existing resource group. This resource group should be named `[username]-e2e-testing`, where `[username]` is your Windows username, (**Microsoft employees:** This should be your alias). The easiest way to do this is by running the `create-resource-group.ps1` script, specifying the Subscription (Name or ID) and Location in which you want to create the Resource Group. For example:
+1. [Install Azure PowerShell](https://learn.microsoft.com/en-us/powershell/azure/install-azps-windows?view=azps-12.0.0&tabs=powershell&pivots=windows-psgallery) if you don't already have it.
+2. Connect to your Azure account using `Connect-AzAccount`.
+3. Ensure you have a Resource Group _ready_ to deploy into, the deploy script requires an existing resource group. This resource group should be named `[username]-e2e-testing`, where `[username]` is your Windows username, (**Microsoft employees:** This should be your alias). The easiest way to do this is by running the `create-resource-group.ps1` script, specifying the Subscription (Name or ID) and Location in which you want to create the Resource Group. For example:
 
 ```powershell
 .\test\resources\create-resource-group.ps1 -SubscriptionName "My Subscription" -Location "West US 3"
@@ -122,14 +120,6 @@ Configuring for E2E Testing
 
 ## Running the tests
 
-If Azure CLI is not installed, please [install it](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli).
-
-Log into Az CLI with the following command:
-
-```powershell
-az login --scope https://management.core.windows.net//.default
-```
-
 To run all tests in a headless browser, run the following command from the root of the repo:
 
 ```powershell
@@ -150,4 +140,4 @@ npx playwright test --ui
 
 The UI allows you to select a specific test to run and to see the results of the test in the browser.
 
-See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.
+See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.

test/tables/container.spec.ts

@@ -14,9 +14,6 @@ test("Tables CRUD", async ({ page }) => {
     await okButton.click();
   });
 
-  const databaseNode = explorer.treeNode("DATA/TablesDB");
-  await databaseNode.expand();
-  
   const tableNode = explorer.treeNode(`DATA/TablesDB/${tableId}`);
   await expect(tableNode.element).toBeAttached();