Run npm lint

* Fix API endpoint for CassandraProxy query API

* activate Mongo Proxy and Cassandra Proxy in Prod

* Add CP Prod endpoint

* Run npm format and tests

* Revert code

* fix bug that blocked local mongo proxy and cassandra proxy development

* Add prod endpoint

* fix pr check tests

* Remove prod

* Remove prod endpoint

* Remove dev endpoint

* Support data plane RBAC

* Support data plane RBAC

* Add additional changes for Portal RBAC functionality

* Address errors and checks

* Cleanup DP RBAC code

* Run format

* Fix unit tests

* Remove unnecessary code

* Run npm format

* Fix enableAadDataPlane feature flag behavior

* Fix  enable AAD dataplane feature flag behavior

* Address feedback comments

* Minor fix

* Add new fixes

* Fix Tables test

* Run npm format

* Address Local storage default setting issue

* Run npm format

* Address lint error

* Run format

* Address bug in fetching data for Tables Account

* Add fetchAndUpdate Keys

* Add fix for MPAC Tables account issue

* Fix issue with Cosmos Client

* Run np format

* Address bugs

* Remove unused import

---------

Co-authored-by: Asier Isayas <aisayas@microsoft.com>

images/EntraID.svg

@@ -0,0 +1,9 @@
+<?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>

src/Common/Constants.ts

@@ -133,6 +133,7 @@ export enum MongoBackendEndpointType {
 export class BackendApi {
   public static readonly GenerateToken: string = "GenerateToken";
   public static readonly PortalSettings: string = "PortalSettings";
+  public static readonly AccountRestrictions: string = "AccountRestrictions";
 }
 
 export class PortalBackendEndpoints {
@@ -185,6 +186,9 @@ export class CassandraProxyAPIs {
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";
+  public static setAutomaticRBACOption: string = "Automatic";
+  public static setTrueRBACOption: string = "True";
+  public static setFalseRBACOption: string = "False";
   public static itemsPerPage: number = 100;
   public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
   public static containersPerPage: number = 50;
@@ -196,6 +200,12 @@ 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";

src/Common/CosmosClient.test.ts

@@ -28,19 +28,6 @@ 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

@@ -17,9 +17,27 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
 
-  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
+  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;
+    }
     const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
     const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
+    console.log(`Returning Auth token`);
+    return authorizationToken;
+  }
+
+  if (userContext.dataPlaneRbacEnabled && userContext.authorizationToken) {
+    console.log(` Getting Portal Auth token `);
+    const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+    const authorizationToken = `${AUTH_PREFIX}${userContext.authorizationToken}`;
+    console.log(`Returning Portal Auth token`);
     return authorizationToken;
   }
 
@@ -72,7 +90,13 @@ 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, EmulatorMasterKey);
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(
+      verb,
+      resourceId,
+      resourceType,
+      headers,
+      userContext.masterKey,
+    );
     return decodeURIComponent(headers.authorization);
   }
 
@@ -137,8 +161,11 @@ enum SDKSupportedCapabilities {
 let _client: Cosmos.CosmosClient;
 
 export function client(): Cosmos.CosmosClient {
-  if (_client) return _client;
+  if (_client) {
-
+    if (!userContext.hasDataPlaneRbacSettingChanged) {
+      return _client;
+    }
+  }
   let _defaultHeaders: Cosmos.CosmosHeaders = {};
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
@@ -157,7 +184,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,
+    key: userContext.dataPlaneRbacEnabled ? "" : userContext.masterKey,
     tokenProvider,
     userAgentSuffix: "Azure Portal",
     defaultHeaders: _defaultHeaders,

src/Common/MessageHandler.ts

@@ -1,6 +1,7 @@
 import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
 import Q from "q";
 import * as _ from "underscore";
+import * as Logger from "../Common/Logger";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
 import * as Constants from "./Constants";
@@ -96,10 +97,18 @@ const _sendMessage = (message: any): void => {
     const portalChildWindow = getDataExplorerWindow(window) || window;
     if (portalChildWindow === window) {
       // Current window is a child of portal, send message to portal window
-      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
+      if (portalChildWindow.document.referrer) {
+        portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer);
+      } else {
+        Logger.logError("Iframe failed to send message to portal", "MessageHandler");
+      }
     } else {
       // Current window is not a child of portal, send message to the child window instead (which is data explorer)
-      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
+      if (portalChildWindow.location.origin) {
+        portalChildWindow.postMessage(message, portalChildWindow.location.origin);
+      } else {
+        Logger.logError("Iframe failed to send message to data explorer", "MessageHandler");
+      }
     }
   }
 };

src/Common/dataAccess/readCollection.ts

@@ -2,7 +2,6 @@ import { CosmosClient } from "@azure/cosmos";
 import { sampleDataClient } from "Common/SampleDataClient";
 import { userContext } from "UserContext";
 import * as DataModels from "../../Contracts/DataModels";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
@@ -31,7 +30,6 @@ export async function readCollectionInternal(
   collectionId: string,
 ): Promise<DataModels.Collection> {
   let collection: DataModels.Collection;
-  const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
   try {
     const response = await cosmosClient.database(databaseId).container(collectionId).read();
     collection = response.resource as DataModels.Collection;
@@ -39,6 +37,5 @@ export async function readCollectionInternal(
     handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);
     throw error;
   }
-  clearMessage();
   return collection;
 }

src/ConfigContext.ts

@@ -109,14 +109,14 @@ let configContext: Readonly<ConfigContext> = {
   PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Prod,
   MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Prod,
   NEW_MONGO_APIS: [
-    "resourcelist",
+    // "resourcelist",
-    "queryDocuments",
+    // "queryDocuments",
-    "createDocument",
+    // "createDocument",
-    "readDocument",
+    // "readDocument",
-    "updateDocument",
+    // "updateDocument",
-    "deleteDocument",
+    // "deleteDocument",
-    "createCollectionWithProxy",
+    // "createCollectionWithProxy",
-    "legacyMongoShell",
+    // "legacyMongoShell",
   ],
   MONGO_PROXY_OUTBOUND_IPS_ALLOWLISTED: false,
   CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Prod,

src/Explorer/Explorer.tsx

@@ -7,11 +7,13 @@ 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";
@@ -30,14 +32,13 @@ 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, userContext } from "../UserContext";
+import { isAccountNewerThanThresholdInMs, updateUserContext, 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";
@@ -66,6 +67,8 @@ 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();
 
@@ -251,8 +254,44 @@ export default class Explorer {
     };
     useDialog.getState().openDialog(addSynapseLinkDialogProps);
     TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
+  }
 
-    // TODO: return result
+  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}`,
+          );
+        }
+      }
+    }
   }
 
   public openNPSSurveyDialog(): void {
@@ -1158,7 +1197,7 @@ export default class Explorer {
 
   public async refreshSampleData(): Promise<void> {
     try {
-      if (!userContext.sampleDataConnectionInfo || useDatabases.getState().sampleDataResourceTokenCollection) {
+      if (!userContext.sampleDataConnectionInfo) {
         return;
       }
       const collection: DataModels.Collection = await readSampleCollection();

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts

@@ -162,7 +162,7 @@ export const addRootChildToGraph = (
  * @param value
  */
 export const escapeDoubleQuotes = (value: string): string => {
-  return value === undefined ? value : value.replace(/"/g, '\\"');
+  return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
 };
 
 /**
@@ -186,5 +186,5 @@ export const getQuotedPropValue = (ip: ViewModels.InputPropertyValue): string =>
  * @param value
  */
 export const escapeSingleQuotes = (value: string): string => {
-  return value === undefined ? value : value.replace(/'/g, "\\'");
+  return value === undefined ? value : value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
 };

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -15,6 +15,7 @@ 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";
@@ -30,9 +31,10 @@ import { OpenFullScreen } from "../../OpenFullScreen";
 import { AddDatabasePanel } from "../../Panes/AddDatabasePanel/AddDatabasePanel";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
 import { LoadQueryPane } from "../../Panes/LoadQueryPane/LoadQueryPane";
-import { SettingsPane } from "../../Panes/SettingsPane/SettingsPane";
+import { SettingsPane, useDataPlaneRbac } from "../../Panes/SettingsPane/SettingsPane";
 import { useDatabases } from "../../useDatabases";
 import { SelectedNodeState, useSelectedNode } from "../../useSelectedNode";
+import { useEffect, useState } from "react";
 
 let counter = 0;
 
@@ -69,6 +71,22 @@ 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);
@@ -275,6 +293,31 @@ 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/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -57,10 +57,6 @@ export class NotificationConsoleComponent extends React.Component<
     this.prevHeaderStatus = undefined;
   }
 
-  public componentDidMount() {
-    this.componentDidUpdate(this.props, this.state);
-  }
-
   public componentDidUpdate(
     prevProps: NotificationConsoleComponentProps,
     prevState: NotificationConsoleComponentState,
@@ -269,29 +265,20 @@ export class NotificationConsoleComponent extends React.Component<
   };
 
   private updateConsoleData = (prevProps: NotificationConsoleComponentProps): void => {
-    let updatedConsoleData: ConsoleData[] = [...this.state.allConsoleData];
-    let refresh = false;
-
     if (!this.areConsoleDataEqual(this.props.consoleData, prevProps.consoleData)) {
-      updatedConsoleData = [this.props.consoleData, ...updatedConsoleData];
+      this.setState({ allConsoleData: [this.props.consoleData, ...this.state.allConsoleData] });
-      refresh = true;
     }
 
-    if (this.props.inProgressConsoleDataIdToBeDeleted) {
+    if (
-      const hasMatchingItem = updatedConsoleData.some(
+      this.props.inProgressConsoleDataIdToBeDeleted &&
+      prevProps.inProgressConsoleDataIdToBeDeleted !== this.props.inProgressConsoleDataIdToBeDeleted
+    ) {
+      const allConsoleData = this.state.allConsoleData.filter(
         (data: ConsoleData) =>
-          data.type === ConsoleDataType.InProgress && data.id === this.props.inProgressConsoleDataIdToBeDeleted,
+          !(data.type === ConsoleDataType.InProgress && data.id === this.props.inProgressConsoleDataIdToBeDeleted),
       );
-
+      this.setState({ allConsoleData });
-      if (hasMatchingItem) {
-        updatedConsoleData = updatedConsoleData.filter(
-          (data: ConsoleData) =>
-            !(data.type === ConsoleDataType.InProgress && data.id === this.props.inProgressConsoleDataIdToBeDeleted),
-        );
-        refresh = true;
-      }
     }
-    refresh && this.setState({ allConsoleData: updatedConsoleData });
   };
 
   private areConsoleDataEqual = (currentData: ConsoleData, prevData: ConsoleData): boolean => {

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -576,9 +576,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 </TooltipHost>
               </Stack>
 
-              <Text variant="small" aria-label="pkDescription">
+              <Text variant="small">{this.getPartitionKeySubtext()}</Text>
-                {this.getPartitionKeySubtext()}
-              </Text>
 
               <input
                 type="text"

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -264,7 +264,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 </TooltipHost>
               </Stack>
 
-              <Text variant="small" aria-label="pkDescription">
+              <Text variant="small">
                 {getPartitionKeySubtext(userContext.features.partitionKeyDefault, userContext.apiType)}
               </Text>
 

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -4,14 +4,18 @@ 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 { configContext } from "ConfigContext";
+import { Platform, configContext } from "ConfigContext";
 import { useDatabases } from "Explorer/useDatabases";
 import {
   DefaultRUThreshold,
@@ -22,7 +26,7 @@ import {
   ruThresholdEnabled as isRUThresholdEnabled,
 } from "Shared/StorageUtility";
 import * as StringUtility from "Shared/StringUtility";
-import { userContext } from "UserContext";
+import { updateUserContext, userContext } from "UserContext";
 import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import * as PriorityBasedExecutionUtils from "Utils/PriorityBasedExecutionUtils";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
@@ -30,6 +34,26 @@ 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";
+import { DatabaseAccountListKeysResult } from "@azure/arm-cosmosdb/esm/models";
+import { listKeys } from "Utils/arm/generatedClients/cosmos/databaseAccounts";
+
+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,
@@ -44,6 +68,14 @@ 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>(
@@ -119,7 +151,37 @@ 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,
+        hasDataPlaneRbacSettingChanged: true,
+      });
+      useDataPlaneRbac.setState({ dataPlaneRbacEnabled: true });
+    } else {
+      updateUserContext({
+        dataPlaneRbacEnabled: false,
+        hasDataPlaneRbacSettingChanged: true,
+      });
+      const { databaseAccount: account, subscriptionId, resourceGroup } = userContext;
+      if (!userContext.features.enableAadDataPlane) {
+        const keys: DatabaseAccountListKeysResult = await listKeys(subscriptionId, resourceGroup, account.name);
+
+        if (keys.primaryMasterKey) {
+          updateUserContext({ masterKey: keys.primaryMasterKey });
+
+          useDataPlaneRbac.setState({ dataPlaneRbacEnabled: false });
+        }
+      }
+    }
+
     LocalStorageUtility.setEntryBoolean(StorageKey.RUThresholdEnabled, ruThresholdEnabled);
     LocalStorageUtility.setEntryBoolean(StorageKey.QueryTimeoutEnabled, queryTimeoutEnabled);
     LocalStorageUtility.setEntryNumber(StorageKey.RetryAttempts, retryAttempts);
@@ -207,6 +269,12 @@ 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" },
@@ -223,6 +291,20 @@ 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);
   };
@@ -383,6 +465,54 @@ 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/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -223,7 +223,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         </StyledTooltipHostBase>
       </Stack>
       <Text
-        aria-label="pkDescription"
         variant="small"
       />
       <input

src/Explorer/Tables/TableDataClient.ts

@@ -363,18 +363,24 @@ export class CassandraAPIDataClient extends TableDataClient {
     entitiesToDelete: Entities.ITableEntity[],
   ): Promise<any> {
     const query = `DELETE FROM ${collection.databaseId}.${collection.id()} WHERE `;
-    const partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
+    const partitionKeys: CassandraTableKey[] = collection.cassandraKeys.partitionKeys;
-
     await Promise.all(
       entitiesToDelete.map(async (currEntityToDelete: Entities.ITableEntity) => {
         const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting row ${currEntityToDelete.RowKey._}`);
-        const partitionKeyValue = currEntityToDelete[partitionKeyProperty];
-        const currQuery =
-          query +
-          (this.isStringType(partitionKeyValue.$)
-            ? `${partitionKeyProperty} = '${partitionKeyValue._}'`
-            : `${partitionKeyProperty} = ${partitionKeyValue._}`);
 
+        let currQuery = query;
+        for (let partitionKeyIndex = 0; partitionKeyIndex < partitionKeys.length; partitionKeyIndex++) {
+          const partitionKey: CassandraTableKey = partitionKeys[partitionKeyIndex];
+          const partitionKeyValue: Entities.ITableEntityAttribute = currEntityToDelete[partitionKey.property];
+          currQuery =
+            currQuery +
+            (this.isStringType(partitionKeyValue.$)
+              ? `${partitionKey.property} = '${partitionKeyValue._}'`
+              : `${partitionKey.property} = ${partitionKeyValue._}`);
+          if (partitionKeyIndex < partitionKeys.length - 1) {
+            currQuery = `${currQuery} AND `;
+          }
+        }
         try {
           await this.queryDocuments(collection, currQuery);
           NotificationConsoleUtils.logConsoleInfo(`Successfully deleted row ${currEntityToDelete.RowKey._}`);
@@ -753,13 +759,18 @@ export class CassandraAPIDataClient extends TableDataClient {
       configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development &&
       userContext.databaseAccount.properties.ipRules?.length > 0
     ) {
-      canAccessCassandraProxy = canAccessCassandraProxy && configContext.CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED;
+      if (
-    }
+        configContext.CASSANDRA_PROXY_ENDPOINT !== CassandraProxyEndpoints.Development &&
+        userContext.databaseAccount.properties.ipRules?.length > 0
+      ) {
+        canAccessCassandraProxy = canAccessCassandraProxy && configContext.CASSANDRA_PROXY_OUTBOUND_IPS_ALLOWLISTED;
+      }
 
-    return (
+      return (
-      canAccessCassandraProxy &&
+        canAccessCassandraProxy &&
-      configContext.NEW_CASSANDRA_APIS?.includes(api) &&
+        configContext.NEW_CASSANDRA_APIS?.includes(api) &&
-      activeCassandraProxyEndpoints.includes(configContext.CASSANDRA_PROXY_ENDPOINT)
+        activeCassandraProxyEndpoints.includes(configContext.CASSANDRA_PROXY_ENDPOINT)
-    );
+      );
+    }
   }
 }

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.test.tsx

@@ -340,7 +340,7 @@ describe("Documents tab (noSql API)", () => {
       isPreferredApiMongoDB: false,
       documentIds: [],
       collection: undefined,
-      partitionKey: undefined,
+      partitionKey: { kind: "Hash", paths: ["/foo"], version: 2 },
       onLoadStartKey: 0,
       tabTitle: "",
       onExecutionErrorChange: (isExecutionError: boolean): void => {

src/Explorer/Tabs/DocumentsTabV2/DocumentsTabV2.tsx

@@ -7,7 +7,10 @@ import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import MongoUtility from "Common/MongoUtility";
 import { StyleConstants } from "Common/StyleConstants";
 import { createDocument } from "Common/dataAccess/createDocument";
-import { deleteDocuments as deleteNoSqlDocuments } from "Common/dataAccess/deleteDocument";
+import {
+  deleteDocument as deleteNoSqlDocument,
+  deleteDocuments as deleteNoSqlDocuments,
+} from "Common/dataAccess/deleteDocument";
 import { queryDocuments } from "Common/dataAccess/queryDocuments";
 import { readDocument } from "Common/dataAccess/readDocument";
 import { updateDocument } from "Common/dataAccess/updateDocument";
@@ -824,7 +827,7 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
   }, [initialDocumentContent, selectedDocumentContentBaseline, setSelectedDocumentContent]);
 
   /**
-   * Implementation using bulk delete
+   * Implementation using bulk delete NoSQL API
    */
   let _deleteDocuments = useCallback(
     async (toDeleteDocumentIds: DocumentId[]): Promise<DocumentId[]> => {
@@ -834,7 +837,14 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
         tabTitle,
       });
       setIsExecuting(true);
-      return deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
+
+      // TODO: Once JS SDK Bug fix for bulk deleting legacy containers (whose systemKey==1) is released:
+      // Remove the check for systemKey, remove call to deleteNoSqlDocument(). deleteNoSqlDocuments() should always be called.
+      return (
+        partitionKey.systemKey
+          ? deleteNoSqlDocument(_collection, toDeleteDocumentIds[0]).then(() => [toDeleteDocumentIds[0]])
+          : deleteNoSqlDocuments(_collection, toDeleteDocumentIds)
+      )
         .then(
           (deletedIds) => {
             TelemetryProcessor.traceSuccess(
@@ -1800,7 +1810,8 @@ export const DocumentsTabComponent: React.FunctionComponent<IDocumentsTabCompone
                   size={tableContainerSizePx}
                   columnHeaders={columnHeaders}
                   isSelectionDisabled={
-                    configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly
+                    (partitionKey.systemKey && !isPreferredApiMongoDB) ||
+                    (configContext.platform === Platform.Fabric && userContext.fabricContext?.isReadOnly)
                   }
                 />
                 {tableItems.length > 0 && (

src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx

@@ -132,7 +132,7 @@ export default class MongoShellTabComponent extends Component<
         data: {
           resourceId: resourceId,
           accountName: accountName,
-          mongoEndpoint: mongoEndpoint,
+          mongoEndpoint: this._useMongoProxyEndpoint ? documentEndpoint : mongoEndpoint,
           authorization: authorization,
           databaseId: databaseId,
           collectionId: collectionId,

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -51,13 +51,18 @@ export const fetchEncryptedToken_ToBeDeprecated = async (connectionString: strin
 export const isAccountRestrictedForConnectionStringLogin = async (connectionString: string): Promise<boolean> => {
   const headers = new Headers();
   headers.append(HttpHeaders.connectionString, connectionString);
-  const url = configContext.BACKEND_ENDPOINT + "/api/guest/accountrestrictions/checkconnectionstringlogin";
+
+  const backendEndpoint: string = useNewPortalBackendEndpoint(BackendApi.PortalSettings)
+    ? configContext.PORTAL_BACKEND_ENDPOINT
+    : configContext.BACKEND_ENDPOINT;
+
+  const url = backendEndpoint + "/api/guest/accountrestrictions/checkconnectionstringlogin";
   const response = await fetch(url, { headers, method: "POST" });
   if (!response.ok) {
     throw response;
   }
 
-  return (await response.text()) === "True";
+  return (await response.text()).toLowerCase() === "true";
 };
 
 export const ConnectExplorer: React.FunctionComponent<Props> = ({

src/Platform/Hosted/extractFeatures.ts

@@ -14,6 +14,7 @@ export type Features = {
   readonly enableTtl: boolean;
   readonly executeSproc: boolean;
   readonly enableAadDataPlane: boolean;
+  readonly enableDataPlaneRbac: boolean;
   readonly enableResourceGraph: boolean;
   readonly enableKoResourceTree: boolean;
   readonly hostedDataExplorer: boolean;
@@ -69,6 +70,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     canExceedMaximumValue: "true" === get("canexceedmaximumvalue"),
     cosmosdb: "true" === get("cosmosdb"),
     enableAadDataPlane: "true" === get("enableaaddataplane"),
+    enableDataPlaneRbac: "true" === get("enabledataplanerbac"),
     enableResourceGraph: "true" === get("enableresourcegraph"),
     enableChangeFeedPolicy: "true" === get("enablechangefeedpolicy"),
     enableFixedCollectionWithSharedThroughput: "true" === get("enablefixedcollectionwithsharedthroughput"),

src/Shared/StorageUtility.ts

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

src/UserContext.ts

@@ -101,6 +101,8 @@ export interface UserContext {
   sampleDataConnectionInfo?: ParsedResourceTokenConnectionString;
   readonly vcoreMongoConnectionParams?: VCoreMongoConnectionParams;
   readonly feedbackPolicies?: AdminFeedbackPolicySettings;
+  readonly dataPlaneRbacEnabled?: boolean;
+  readonly hasDataPlaneRbacSettingChanged?: boolean;
 }
 
 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra" | "Postgres" | "VCoreMongo";

src/Utils/EndpointUtils.ts

@@ -164,6 +164,7 @@ export function useNewPortalBackendEndpoint(backendApi: string): boolean {
       PortalBackendEndpoints.Mpac,
       PortalBackendEndpoints.Prod,
     ],
+    [BackendApi.AccountRestrictions]: [PortalBackendEndpoints.Development, PortalBackendEndpoints.Mpac],
   };
 
   if (!newBackendApiEnvironmentMap[backendApi] || !configContext.PORTAL_BACKEND_ENDPOINT) {

src/hooks/useDatabaseAccounts.tsx

@@ -52,11 +52,17 @@ export async function fetchDatabaseAccountsFromGraph(
     const body = {
       query: databaseAccountsQuery,
       subscriptions: [subscriptionId],
-      ...(skipToken && {
+      ...(skipToken
-        options: {
+        ? {
-          $skipToken: skipToken,
+            options: {
-        } as QueryRequestOptions,
+              $skipToken: skipToken,
-      }),
+            } as QueryRequestOptions,
+          }
+        : {
+            options: {
+              $top: 150,
+            } as QueryRequestOptions,
+          }),
     };
 
     const response = await fetch(managementResourceGraphAPIURL, {

src/hooks/useKnockoutExplorer.ts

@@ -1,3 +1,4 @@
+import * as Constants from "Common/Constants";
 import { createUri } from "Common/UrlUtility";
 import { DATA_EXPLORER_RPC_VERSION } from "Contracts/DataExplorerMessagesContract";
 import { FabricMessageTypes } from "Contracts/FabricMessageTypes";
@@ -5,6 +6,7 @@ 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";
@@ -39,8 +41,8 @@ import { Node, PortalEnv, updateUserContext, userContext } from "../UserContext"
 import { acquireTokenWithMsal, getAuthorizationHeader, getMsalInstance } from "../Utils/AuthorizationUtils";
 import { isInvalidParentFrameOrigin, shouldProcessMessage } from "../Utils/MessageValidation";
 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
@@ -253,7 +255,6 @@ 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();
@@ -271,8 +272,42 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     }
   }
   try {
-    if (!account.properties.disableLocalAuth) {
+    updateUserContext({
-      keys = await listKeys(subscriptionId, resourceGroup, account.name);
+      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;
+          }
+          if (!dataPlaneRbacEnabled) {
+            await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+          }
+
+          updateUserContext({ dataPlaneRbacEnabled });
+        } else {
+          const dataPlaneRbacEnabled = account.properties.disableLocalAuth;
+          if (!dataPlaneRbacEnabled) {
+            await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+          }
+
+          updateUserContext({ dataPlaneRbacEnabled });
+          useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
+        }
+      } else {
+        await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+      }
+    } else {
+      if (!account.properties.disableLocalAuth) {
+        await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+      }
     }
   } catch (e) {
     if (userContext.features.enableAadDataPlane) {
@@ -285,8 +320,6 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     subscriptionId,
     resourceGroup,
     aadToken,
-    databaseAccount: config.databaseAccount,
-    masterKey: keys.primaryMasterKey,
   });
   const explorer = new Explorer();
   return explorer;
@@ -390,10 +423,24 @@ function configureEmulator(): Explorer {
   return explorer;
 }
 
+async function fetchAndUpdateKeys(subscriptionId: string, resourceGroup: string, account: string) {
+  try {
+    const keys = await listKeys(subscriptionId, resourceGroup, account);
+
+    updateUserContext({
+      masterKey: keys.primaryMasterKey,
+    });
+  } catch (error) {
+    console.error("Error during fetching keys or updating user context:", error);
+    throw error;
+  }
+}
+
 async function configurePortal(): Promise<Explorer> {
   updateUserContext({
     authType: AuthType.AAD,
   });
+
   let explorer: Explorer;
   return new Promise((resolve) => {
     // In development mode, try to load the iframe message from session storage.
@@ -408,6 +455,7 @@ async function configurePortal(): Promise<Explorer> {
         console.dir(message);
         updateContextsFromPortalMessage(message);
         explorer = new Explorer();
+
         // In development mode, save the iframe message from the portal in session storage.
         // This allows webpack hot reload to funciton properly
         if (process.env.NODE_ENV === "development") {
@@ -420,7 +468,7 @@ async function configurePortal(): Promise<Explorer> {
     // In the Portal, configuration of Explorer happens via iframe message
     window.addEventListener(
       "message",
-      (event) => {
+      async (event) => {
         if (isInvalidParentFrameOrigin(event)) {
           return;
         }
@@ -443,6 +491,41 @@ async function configurePortal(): Promise<Explorer> {
           }
 
           updateContextsFromPortalMessage(inputs);
+
+          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;
+              }
+              if (!dataPlaneRbacEnabled) {
+                await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+              }
+
+              updateUserContext({ dataPlaneRbacEnabled });
+              useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
+            } else {
+              const dataPlaneRbacEnabled = account.properties.disableLocalAuth;
+
+              if (!dataPlaneRbacEnabled) {
+                await fetchAndUpdateKeys(subscriptionId, resourceGroup, account.name);
+              }
+
+              updateUserContext({ dataPlaneRbacEnabled });
+              useDataPlaneRbac.setState({ dataPlaneRbacEnabled: dataPlaneRbacEnabled });
+            }
+          } else {
+            if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
+              await listKeys(subscriptionId, resourceGroup, account.name);
+            }
+          }
+
           explorer = new Explorer();
           resolve(explorer);
 
@@ -490,7 +573,6 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
   }
 
   const authorizationToken = inputs.authorizationToken || "";
-  const masterKey = inputs.masterKey || "";
   const databaseAccount = inputs.databaseAccount;
 
   updateConfigContext({
@@ -503,7 +585,6 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
 
   updateUserContext({
     authorizationToken,
-    masterKey,
     databaseAccount,
     resourceGroup: inputs.resourceGroup,
     subscriptionId: inputs.subscriptionId,

src/hooks/useSubscriptions.tsx

@@ -51,11 +51,17 @@ export async function fetchSubscriptionsFromGraph(accessToken: string): Promise<
   do {
     const body = {
       query: subscriptionsQuery,
-      ...(skipToken && {
+      ...(skipToken
-        options: {
+        ? {
-          $skipToken: skipToken,
+            options: {
-        } as QueryRequestOptions,
+              $skipToken: skipToken,
-      }),
+            } as QueryRequestOptions,
+          }
+        : {
+            options: {
+              $top: 150,
+            } as QueryRequestOptions,
+          }),
     };
 
     const response = await fetch(managementResourceGraphAPIURL, {

test/tables/container.spec.ts

@@ -14,6 +14,9 @@ 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();