Merge branch 'master' of https://github.com/Azure/cosmos-explorer into users/aisayas/pbe

package.json

@@ -15,7 +15,7 @@
     "@fluentui/react": "8.14.3",
     "@fluentui/react-components": "9.32.1",
     "@jupyterlab/services": "6.0.2",
-    "@jupyterlab/terminal": "4.0.8",
+    "@jupyterlab/terminal": "3.0.3",
     "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",

src/Common/Constants.ts

@@ -427,12 +427,6 @@ export class JunoEndpoints {
   public static readonly Stage = "https://tools-staging.cosmos.azure.com";
 }
 
-export class PriorityLevel {
-  public static readonly High = "high";
-  public static readonly Low = "low";
-  public static readonly Default = "low";
-}
-
 export const QueryCopilotSampleDatabaseId = "CopilotSampleDb";
 export const QueryCopilotSampleContainerId = "SampleContainer";
 

src/Common/CosmosClient.ts

@@ -1,10 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
 import { sendCachedDataMessage } from "Common/MessageHandler";
-import { getAuthorizationTokenUsingResourceTokens } from "Common/getAuthorizationTokenUsingResourceTokens";
 import { AuthorizationToken, MessageTypes } from "Contracts/MessageTypes";
-import { checkDatabaseResourceTokensValidity } from "Platform/Fabric/FabricUtil";
-import { AuthType } from "../AuthType";
-import { PriorityLevel } from "../Common/Constants";
 import { Platform, configContext } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
@@ -30,33 +26,12 @@ export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
   }
 
   if (configContext.platform === Platform.Fabric) {
-    switch (requestInfo.resourceType) {
-      case Cosmos.ResourceType.conflicts:
-      case Cosmos.ResourceType.container:
-      case Cosmos.ResourceType.sproc:
-      case Cosmos.ResourceType.udf:
-      case Cosmos.ResourceType.trigger:
-      case Cosmos.ResourceType.item:
-      case Cosmos.ResourceType.pkranges:
-        // User resource tokens
-        headers[HttpHeaders.msDate] = new Date().toUTCString();
-        const resourceTokens = userContext.fabricDatabaseConnectionInfo.resourceTokens;
-        checkDatabaseResourceTokensValidity(userContext.fabricDatabaseConnectionInfo.resourceTokensTimestamp);
-        return getAuthorizationTokenUsingResourceTokens(resourceTokens, requestInfo.path, requestInfo.resourceId);
-
-      case Cosmos.ResourceType.none:
-      case Cosmos.ResourceType.database:
-      case Cosmos.ResourceType.offer:
-      case Cosmos.ResourceType.user:
-      case Cosmos.ResourceType.permission:
-        // User master tokens
-        const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
-          requestInfo,
-        ]);
-        console.log("Response from Fabric: ", authorizationToken);
-        headers[HttpHeaders.msDate] = authorizationToken.XDate;
-        return decodeURIComponent(authorizationToken.PrimaryReadWriteToken);
-    }
+    const authorizationToken = await sendCachedDataMessage<AuthorizationToken>(MessageTypes.GetAuthorizationToken, [
+      requestInfo,
+    ]);
+    console.log("Response from Fabric: ", authorizationToken);
+    headers[HttpHeaders.msDate] = authorizationToken.XDate;
+    return authorizationToken.PrimaryReadWriteToken;
   }
 
   if (userContext.masterKey) {
@@ -132,18 +107,6 @@ export function client(): Cosmos.CosmosClient {
   _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
     SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
 
-  if (
-    userContext.authType === AuthType.ConnectionString ||
-    userContext.authType === AuthType.EncryptedToken ||
-    userContext.authType === AuthType.ResourceToken
-  ) {
-    // Default to low priority. Needed for non-AAD-auth scenarios
-    // where we cannot use RP API, and thus, cannot detect whether priority
-    // based execution is enabled.
-    // The header will be ignored if priority based execution is disabled on the account.
-    _defaultHeaders["x-ms-cosmos-priority-level"] = PriorityLevel.Default;
-  }
-
   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,

src/Common/dataAccess/readCollections.ts

@@ -1,57 +1,18 @@
-import { ContainerResponse } from "@azure/cosmos";
 import { Queries } from "Common/Constants";
-import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { listMongoDBCollections } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlContainers } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import { listTables } from "../../Utils/arm/generatedClients/cosmos/tableResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
-
-  if (
-    configContext.platform === Platform.Fabric &&
-    userContext.fabricDatabaseConnectionInfo &&
-    userContext.fabricDatabaseConnectionInfo.databaseId === databaseId
-  ) {
-    const collections: DataModels.Collection[] = [];
-    const promises: Promise<ContainerResponse>[] = [];
-
-    for (const collectionResourceId in userContext.fabricDatabaseConnectionInfo.resourceTokens) {
-      // Dictionary key looks like this: dbs/SampleDB/colls/Container
-      const resourceIdObj = collectionResourceId.split("/");
-      const tokenDatabaseId = resourceIdObj[1];
-      const tokenCollectionId = resourceIdObj[3];
-
-      if (tokenDatabaseId === databaseId) {
-        promises.push(client().database(databaseId).container(tokenCollectionId).read());
-      }
-    }
-
-    try {
-      const responses = await Promise.all(promises);
-      responses.forEach((response) => {
-        collections.push(response.resource as DataModels.Collection);
-      });
-
-      // Sort collections by id before returning
-      collections.sort((a, b) => a.id.localeCompare(b.id));
-      return collections;
-    } catch (error) {
-      handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
-      throw error;
-    } finally {
-      clearMessage();
-    }
-  }
-
   try {
     if (
       userContext.authType === AuthType.AAD &&

src/Common/dataAccess/readDatabaseOffer.ts

@@ -1,22 +1,15 @@
-import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import { Offer, ReadDatabaseOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { handleError } from "../ErrorHandlingUtils";
 import { readOfferWithSDK } from "./readOfferWithSDK";
 
 export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promise<Offer> => {
-  if (configContext.platform === Platform.Fabric) {
-    // TODO This works, but is very slow, because it requests the token, so we skip for now
-    console.error("Skiping readDatabaseOffer for Fabric");
-    return undefined;
-  }
-
   const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
 
   try {

src/Common/dataAccess/readDatabases.ts

@@ -1,53 +1,17 @@
-import { Platform, configContext } from "ConfigContext";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
 import { listGremlinDatabases } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
 import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
 import { listSqlDatabases } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
 
 export async function readDatabases(): Promise<DataModels.Database[]> {
   let databases: DataModels.Database[];
   const clearMessage = logConsoleProgress(`Querying databases`);
-
-  if (configContext.platform === Platform.Fabric && userContext.fabricDatabaseConnectionInfo?.resourceTokens) {
-    const tokensData = userContext.fabricDatabaseConnectionInfo;
-
-    const databaseIdsSet = new Set<string>(); // databaseId
-
-    for (const collectionResourceId in tokensData.resourceTokens) {
-      // Dictionary key looks like this: dbs/SampleDB/colls/Container
-      const resourceIdObj = collectionResourceId.split("/");
-
-      if (resourceIdObj.length !== 4) {
-        handleError(`Resource key not recognized: ${resourceIdObj}`, "ReadDatabases", `Error while querying databases`);
-        clearMessage();
-        return [];
-      }
-
-      const databaseId = resourceIdObj[1];
-
-      databaseIdsSet.add(databaseId);
-    }
-
-    const databases: DataModels.Database[] = Array.from(databaseIdsSet.values())
-      .sort((a, b) => a.localeCompare(b))
-      .map((databaseId) => ({
-        _rid: "",
-        _self: "",
-        _etag: "",
-        _ts: 0,
-        id: databaseId,
-        collections: [],
-      }));
-    clearMessage();
-    return databases;
-  }
-
   try {
     if (
       userContext.authType === AuthType.AAD &&

src/Common/getAuthorizationTokenUsingResourceTokens.ts

@@ -1,66 +0,0 @@
-export function getAuthorizationTokenUsingResourceTokens(
-  resourceTokens: { [resourceId: string]: string },
-  path: string,
-  resourceId: string,
-): string {
-  // console.log(`getting token for path: "${path}" and resourceId: "${resourceId}"`);
-
-  if (resourceTokens && Object.keys(resourceTokens).length > 0) {
-    // For database account access(through getDatabaseAccount API), path and resourceId are "",
-    // so in this case we return the first token to be used for creating the auth header as the
-    // service will accept any token in this case
-    if (!path && !resourceId) {
-      return resourceTokens[Object.keys(resourceTokens)[0]];
-    }
-
-    // If we have exact resource token for the path use it
-    if (resourceId && resourceTokens[resourceId]) {
-      return resourceTokens[resourceId];
-    }
-
-    // minimum valid path /dbs
-    if (!path || path.length < 4) {
-      console.error(
-        `Unable to get authotization token for Path:"${path}" and resourcerId:"${resourceId}". Invalid path.`,
-      );
-      return null;
-    }
-
-    path = trimSlashFromLeftAndRight(path);
-    const pathSegments = (path && path.split("/")) || [];
-
-    // Item path
-    if (pathSegments.length === 6) {
-      // Look for a container token matching the item path
-      const containerPath = pathSegments.slice(0, 4).map(decodeURIComponent).join("/");
-      if (resourceTokens[containerPath]) {
-        return resourceTokens[containerPath];
-      }
-    }
-
-    // This is legacy behavior that lets someone use a resource token pointing ONLY at an ID
-    // It was used when _rid was exposed by the SDK, but now that we are using user provided ids it is not needed
-    // However removing it now would be a breaking change
-    // if it's an incomplete path like /dbs/db1/colls/, start from the parent resource
-    let index = pathSegments.length % 2 === 0 ? pathSegments.length - 1 : pathSegments.length - 2;
-    for (; index > 0; index -= 2) {
-      const id = decodeURI(pathSegments[index]);
-      if (resourceTokens[id]) {
-        return resourceTokens[id];
-      }
-    }
-  }
-
-  console.error(`Unable to get authotization token for Path:"${path}" and resourcerId:"${resourceId}"`);
-  return null;
-}
-
-const trimLeftSlashes = new RegExp("^[/]+");
-const trimRightSlashes = new RegExp("[/]+$");
-function trimSlashFromLeftAndRight(inputString: string): string {
-  if (typeof inputString !== "string") {
-    throw new Error("invalid input: input is not string");
-  }
-
-  return inputString.replace(trimLeftSlashes, "").replace(trimRightSlashes, "");
-}

src/ConfigContext.ts

@@ -64,7 +64,6 @@ let configContext: Readonly<ConfigContext> = {
     `^https:\\/\\/.*\\.fabric\\.microsoft\\.com$`,
     `^https:\\/\\/.*\\.powerbi\\.com$`,
     `^https:\\/\\/.*\\.analysis-df\\.net$`,
-    `^https:\\/\\/.*\\.analysis-df\\.windows\\.net$`,
   ], // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",

src/Contracts/AzureResourceGraph.ts

@@ -1,13 +0,0 @@
-export interface QueryRequestOptions {
-  $skipToken?: string;
-  $top?: number;
-  subscriptions: string[];
-}
-
-export interface QueryResponse {
-  $skipToken: string;
-  count: number;
-  data: any;
-  resultTruncated: boolean;
-  totalRecords: number;
-}

src/Contracts/DataModels.ts

@@ -88,13 +88,13 @@ export interface GenerateTokenResponse {
 }
 
 export interface Subscription {
-  uniqueDisplayName?: string;
+  uniqueDisplayName: string;
   displayName: string;
   subscriptionId: string;
-  tenantId?: string;
+  tenantId: string;
   state: string;
-  subscriptionPolicies?: SubscriptionPolicies;
-  authorizationSource?: string;
+  subscriptionPolicies: SubscriptionPolicies;
+  authorizationSource: string;
 }
 
 export interface SubscriptionPolicies {

src/Contracts/FabricContract.ts

@@ -9,12 +9,14 @@ export type FabricMessage =
       type: "initialize";
       message: {
         endpoint: string | undefined;
-        databaseId: string | undefined;
-        resourceTokens: unknown | undefined;
-        resourceTokensTimestamp: number | undefined;
         error: string | undefined;
       };
     }
+  | {
+      type: "openTab";
+      databaseName: string;
+      collectionName: string | undefined;
+    }
   | {
       type: "authorizationToken";
       message: {
@@ -22,15 +24,6 @@ export type FabricMessage =
         error: string | undefined;
         data: AuthorizationToken | undefined;
       };
-    }
-  | {
-      type: "allResourceTokens";
-      message: {
-        endpoint: string | undefined;
-        databaseId: string | undefined;
-        resourceTokens: unknown | undefined;
-        resourceTokensTimestamp: number | undefined;
-      };
     };
 
 export type DataExploreMessage =
@@ -47,9 +40,6 @@ export type DataExploreMessage =
       type: MessageTypes.GetAuthorizationToken;
       id: string;
       params: GetCosmosTokenMessageOptions[];
-    }
-  | {
-      type: MessageTypes.GetAllResourceTokens;
     };
 
 export type GetCosmosTokenMessageOptions = {
@@ -65,13 +55,4 @@ export type CosmosDBTokenResponse = {
 
 export type CosmosDBConnectionInfoResponse = {
   endpoint: string;
-  databaseId: string;
-  resourceTokens: unknown;
 };
-
-export interface FabricDatabaseConnectionInfo {
-  endpoint: string;
-  databaseId: string;
-  resourceTokens: { [resourceId: string]: string };
-  resourceTokensTimestamp: number;
-}

src/Contracts/MessageTypes.ts

@@ -40,7 +40,6 @@ export enum MessageTypes {
 
   // Data Explorer -> Fabric communication
   GetAuthorizationToken,
-  GetAllResourceTokens,
 }
 
 export interface AuthorizationToken {

src/Definitions/less.d.ts

@@ -1,4 +0,0 @@
-declare module "*.less" {
-  const value: string;
-  export default value;
-}

src/Explorer/ContextMenuButtonFactory.tsx

@@ -129,22 +129,20 @@ export const createCollectionContextMenuButton = (
     });
   }
 
-  if (configContext.platform !== Platform.Fabric) {
-    items.push({
-      iconSrc: DeleteCollectionIcon,
-      onClick: () => {
-        useSelectedNode.getState().setSelectedNode(selectedCollection);
-        useSidePanel
-          .getState()
-          .openSidePanel(
-            "Delete " + getCollectionName(),
-            <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
-          );
-      },
-      label: `Delete ${getCollectionName()}`,
-      styleClass: "deleteCollectionMenuItem",
-    });
-  }
+  items.push({
+    iconSrc: DeleteCollectionIcon,
+    onClick: () => {
+      useSelectedNode.getState().setSelectedNode(selectedCollection);
+      useSidePanel
+        .getState()
+        .openSidePanel(
+          "Delete " + getCollectionName(),
+          <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />,
+        );
+    },
+    label: `Delete ${getCollectionName()}`,
+    styleClass: "deleteCollectionMenuItem",
+  });
 
   return items;
 };

src/Explorer/Explorer.tsx

@@ -4,7 +4,6 @@ import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import { IGalleryItem } from "Juno/JunoClient";
-import { requestDatabaseResourceTokens } from "Platform/Fabric/FabricUtil";
 import { allowedNotebookServerUrls, validateEndpoint } from "Utils/EndpointValidation";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import * as ko from "knockout";
@@ -380,13 +379,6 @@ export default class Explorer {
   };
 
   public onRefreshResourcesClick = (): void => {
-    if (configContext.platform === Platform.Fabric) {
-      // Requesting the tokens will trigger a refresh of the databases
-      // TODO: Once the id is returned from Fabric, we can await this call and then refresh the databases here
-      requestDatabaseResourceTokens();
-      return;
-    }
-
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
@@ -697,9 +689,9 @@ export default class Explorer {
   private _initSettings() {
     if (!ExplorerSettings.hasSettingsDefined()) {
       ExplorerSettings.createDefaultSettings();
-    } else {
-      ExplorerSettings.ensurePriorityLevel();
     }
+
+    ExplorerSettings.ensurePriorityLevel();
   }
 
   public uploadFile(

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -50,36 +50,31 @@ export function createStaticCommandBarButtons(
     return createStaticCommandBarButtonsForResourceToken(container, selectedNodeState);
   }
 
+  const newCollectionBtn = createNewCollectionGroup(container);
   const buttons: CommandButtonComponentProps[] = [];
 
-  // Avoid starting with a divider
-  const addDivider = () => {
-    if (buttons.length > 0) {
+  buttons.push(newCollectionBtn);
+  if (
+    configContext.platform !== Platform.Fabric &&
+    userContext.apiType !== "Tables" &&
+    userContext.apiType !== "Cassandra"
+  ) {
+    const addSynapseLink = createOpenSynapseLinkDialogButton(container);
+
+    if (addSynapseLink) {
       buttons.push(createDivider());
-    }
-  };
-
-  if (configContext.platform !== Platform.Fabric) {
-    const newCollectionBtn = createNewCollectionGroup(container);
-    buttons.push(newCollectionBtn);
-    if (userContext.apiType !== "Tables" && userContext.apiType !== "Cassandra") {
-      const addSynapseLink = createOpenSynapseLinkDialogButton(container);
-
-      if (addSynapseLink) {
-        addDivider();
-        buttons.push(addSynapseLink);
-      }
-    }
-
-    if (userContext.apiType !== "Tables") {
-      newCollectionBtn.children = [createNewCollectionGroup(container)];
-      const newDatabaseBtn = createNewDatabase(container);
-      newCollectionBtn.children.push(newDatabaseBtn);
+      buttons.push(addSynapseLink);
     }
   }
 
+  if (userContext.apiType !== "Tables" && configContext.platform !== Platform.Fabric) {
+    newCollectionBtn.children = [createNewCollectionGroup(container)];
+    const newDatabaseBtn = createNewDatabase(container);
+    newCollectionBtn.children.push(newDatabaseBtn);
+  }
+
   if (useNotebook.getState().isNotebookEnabled) {
-    addDivider();
+    buttons.push(createDivider());
     const notebookButtons: CommandButtonComponentProps[] = [];
 
     const newNotebookButton = createNewNotebookButton(container);
@@ -133,7 +128,7 @@ export function createStaticCommandBarButtons(
     const isQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 
     if (isQuerySupported) {
-      addDivider();
+      buttons.push(createDivider());
       const newSqlQueryBtn = createNewSQLQueryButton(selectedNodeState);
       buttons.push(newSqlQueryBtn);
     }

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -32,8 +32,14 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
   return (
     <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
       {icon}
-      <span className="panelWarningErrorDetailsLinkContainer" role="alert" aria-live="assertive">
-        <Text aria-label={message} className="panelWarningErrorMessage" variant="small">
+      <span className="panelWarningErrorDetailsLinkContainer">
+        <Text
+          role="alert"
+          aria-live="assertive"
+          aria-label={message}
+          className="panelWarningErrorMessage"
+          variant="small"
+        >
           {message}
           {link && linkText && (
             <Link target="_blank" href={link}>

src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { ReactWrapper, mount } from "enzyme";
+import { mount, ReactWrapper } from "enzyme";
 import React from "react";
 import { RightPaneForm } from "./RightPaneForm";
 
@@ -34,6 +34,6 @@ describe("Right Pane Form", () => {
   it("should render error in header", () => {
     render(<RightPaneForm {...props} formError="file already Exist" />);
     expect(screen.getByLabelText("error")).toBeDefined();
-    expect(screen.getByRole("alert").innerHTML).toContain("file already Exist");
+    expect(screen.getByRole("alert").innerHTML).toEqual("file already Exist");
   });
 });

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,3 +1,4 @@
+import { PriorityLevel } from "@azure/cosmos";
 import {
   Checkbox,
   ChoiceGroup,
@@ -58,10 +59,10 @@ export const SettingsPane: FunctionComponent = () => {
       ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
       : Constants.Queries.DefaultMaxDegreeOfParallelism,
   );
-  const [priorityLevel, setPriorityLevel] = useState<string>(
+  const [priorityLevel, setPriorityLevel] = useState<PriorityLevel>(
     LocalStorageUtility.hasItem(StorageKey.PriorityLevel)
-      ? LocalStorageUtility.getEntryString(StorageKey.PriorityLevel)
-      : Constants.PriorityLevel.Default,
+      ? (LocalStorageUtility.getEntryString(StorageKey.PriorityLevel) as PriorityLevel)
+      : PriorityLevel.Low,
   );
   const explorerVersion = configContext.gitSha;
   const shouldShowQueryPageOptions = userContext.apiType === "SQL";
@@ -81,7 +82,7 @@ export const SettingsPane: FunctionComponent = () => {
     LocalStorageUtility.setEntryString(StorageKey.ContainerPaginationEnabled, containerPaginationEnabled.toString());
     LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
     LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
-    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel.toString());
+    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, priorityLevel);
 
     if (shouldShowGraphAutoVizOption) {
       LocalStorageUtility.setEntryBoolean(
@@ -149,15 +150,15 @@ export const SettingsPane: FunctionComponent = () => {
   ];
 
   const priorityLevelOptionList: IChoiceGroupOption[] = [
-    { key: Constants.PriorityLevel.Low, text: "Low" },
-    { key: Constants.PriorityLevel.High, text: "High" },
+    { key: PriorityLevel.Low, text: "Low" },
+    { key: PriorityLevel.High, text: "High" },
   ];
 
   const handleOnPriorityLevelOptionChange = (
     ev: React.FormEvent<HTMLInputElement>,
     option: IChoiceGroupOption,
   ): void => {
-    setPriorityLevel(option.key);
+    setPriorityLevel(option.key as PriorityLevel);
   };
 
   const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
@@ -401,8 +402,7 @@ export const SettingsPane: FunctionComponent = () => {
                 </legend>
                 <InfoTooltip>
                   Sets the priority level for data-plane requests from Data Explorer when using Priority-Based
-                  Execution. If &quot;None&quot; is selected, Data Explorer will not specify priority level, and the
-                  server-side default priority level will be used.
+                  Execution.
                 </InfoTooltip>
                 <ChoiceGroup
                   ariaLabelledBy="priorityLevel"

src/Explorer/Panes/Tables/EditTableEntityPanel.tsx

@@ -390,9 +390,6 @@ export const EditTableEntityPanel: FunctionComponent<EditTableEntityPanelProps>
           </Stack>
         )}
       </div>
-      <div className="panelNullWarning" style={{ padding: "20px", color: "red" }}>
-        Warning: Null fields will not be displayed for editing.
-      </div>
     </RightPaneForm>
   );
 };

src/Explorer/Panes/Tables/__snapshots__/EditTableEntityPanel.test.tsx.snap

@@ -355,17 +355,6 @@ exports[`Excute Edit Table Entity Pane should render Default properly 1`] = `
           </div>
         </Stack>
       </div>
-      <div
-        className="panelNullWarning"
-        style={
-          Object {
-            "color": "red",
-            "padding": "20px",
-          }
-        }
-      >
-        Warning: Null fields will not be displayed for editing.
-      </div>
       <PanelFooterComponent
         buttonLabel="Update"
         isButtonDisabled={false}

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -323,19 +323,21 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               </IconBase>
             </StyledIconBase>
             <span
-              aria-live="assertive"
               className="panelWarningErrorDetailsLinkContainer"
               key=".0:$.1"
-              role="alert"
             >
               <Text
                 aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+                aria-live="assertive"
                 className="panelWarningErrorMessage"
+                role="alert"
                 variant="small"
               >
                 <span
                   aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
+                  aria-live="assertive"
                   className="panelWarningErrorMessage css-56"
+                  role="alert"
                 >
                   Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                 </span>

src/Explorer/Quickstart/VCoreMongoQuickstartCommands.ts

@@ -1,6 +1,5 @@
 export const newDbAndCollectionCommand = `use quickstartDB
-db.createCollection('sampleCollection')
-`;
+db.createCollection('sampleCollection')`;
 
 export const newDbAndCollectionCommandForDisplay = `use quickstartDB // Create new database named 'quickstartDB' or switch to it if it already exists
 
@@ -17,25 +16,19 @@ export const loadDataCommand = `db.sampleCollection.insertMany([
     {title: "War and Peace", author: "Leo Tolstoy", pages: 1392},
     {title: "The Odyssey", author: "Homer", pages: 374},
     {title: "Ulysses", author: "James Joyce", pages: 730}
-  ])
-`;
+  ])`;
 
-export const findOrwellCommand = `db.sampleCollection.find({author: "George Orwell"})
-`;
+export const queriesCommand = `db.sampleCollection.find({author: "George Orwell"})
 
-export const findOrwellCommandForDisplay = `// Query to find all books written by "George Orwell"
-db.sampleCollection.find({author: "George Orwell"})`;
-
-export const findByPagesCommand = `db.sampleCollection.find({pages: {$gt: 500}})
-`;
-
-export const findByPagesCommandForDisplay = `// Query to find all books with more than 500 pages
 db.sampleCollection.find({pages: {$gt: 500}})
-`;
 
-export const findAndSortCommand = `db.sampleCollection.find({}).sort({pages: 1})
-`;
+db.sampleCollection.find({}).sort({pages: 1})`;
 
-export const findAndSortCommandForDisplay = `// Query to find all books and sort them by the number of pages in ascending order
-db.sampleCollection.find({}).sort({pages: 1})
-`;
+export const queriesCommandForDisplay = `// Query to find all books written by "George Orwell"
+db.sampleCollection.find({author: "George Orwell"})
+
+// Query to find all books with more than 500 pages
+db.sampleCollection.find({pages: {$gt: 500}})
+
+// Query to find all books and sort them by the number of pages in ascending order
+db.sampleCollection.find({}).sort({pages: 1})`;

src/Explorer/Quickstart/VCoreMongoQuickstartGuide.tsx

@@ -9,17 +9,15 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { customPivotHeaderRenderer } from "Explorer/Quickstart/Shared/QuickstartRenderUtilities";
 import {
-  findAndSortCommand,
-  findAndSortCommandForDisplay,
-  findByPagesCommand,
-  findByPagesCommandForDisplay,
-  findOrwellCommand,
-  findOrwellCommandForDisplay,
   loadDataCommand,
   newDbAndCollectionCommand,
   newDbAndCollectionCommandForDisplay,
+  queriesCommand,
+  queriesCommandForDisplay,
 } from "Explorer/Quickstart/VCoreMongoQuickstartCommands";
 import { useTerminal } from "hooks/useTerminal";
 import React, { useState } from "react";
@@ -65,16 +63,28 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
             >
               <Stack style={{ marginTop: 20 }}>
                 <Text>
-                  This tutorial guides you to create and query distributed tables using a sample dataset.
+                  A hosted mongosh (mongo shell) is provided for this quick start. You are automatically logged in to
+                  mongosh, allowing you to interact with your database directly.
                   <br />
                   <br />
-                  To start, input the admin password you used during the cluster creation process into the MongoDB vCore
-                  terminal.
+                  When not in the quick start guide, connecting to Azure Cosmos DB for MongoDB vCore is straightforward
+                  using your connection string.
                   <br />
                   <br />
+                  <Link
+                    aria-label="View connection string"
+                    href=""
+                    onClick={() => sendMessage({ type: MessageTypes.OpenVCoreMongoConnectionStringsBlade })}
+                  >
+                    View connection string
+                  </Link>
                   <br />
-                  Note: If you navigate out of the Quick start blade &#40;MongoDB vCore Shell&#41;, the session will be
-                  closed and all ongoing commands might be interrupted.
+                  <br />
+                  This string contains placeholders for &lt;user&gt; and &lt;password&gt;. Replace them with your chosen
+                  username and password to establish a secure connection to your cluster. Depending on your environment,
+                  you may need to adjust firewall rules or configure private endpoints in the &lsquo;Networking&rsquo;
+                  tab of your database settings, or modify your own network&apos;s firewall settings, to successfully
+                  connect.
                 </Text>
               </Stack>
             </PivotItem>
@@ -93,7 +103,6 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
                   documents are similar to the columns in a relational database table. One key advantage of MongoDB is
                   that these documents within a collection can have different fields.
                   <br />
-                  <br />
                   You&apos;re now going to create a new database and a collection within that database using the Mongo
                   shell. In MongoDB, creating a database or a collection is implicit. This means that databases and
                   collections are created when you first reference them in a command, so no explicit creation command is
@@ -144,14 +153,14 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
                   with data. In MongoDB, data is stored as documents, which are structured as field and value pairs.
                   <br />
                   <br />
-                  We&apos;ll add 10 documents representing books, each with a title, author, and number of pages, to
-                  your sampleCollection in the quickstartDB database.
+                  Let&apos;s populate your sampleCollection with data. We&apos;ll add 10 documents representing books,
+                  each with a title, author, and number of pages, to your sampleCollection in the quickstartDB database.
                 </Text>
                 <DefaultButton
                   style={{ marginTop: 16, width: 200 }}
                   onClick={() => useTerminal.getState().sendMessage(loadDataCommand)}
                 >
-                  Load data
+                  Create distributed table
                 </DefaultButton>
                 <Stack horizontal style={{ marginTop: 16 }}>
                   <TextField
@@ -188,23 +197,23 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
             >
               <Stack style={{ marginTop: 20 }}>
                 <Text>
-                  Once you&apos;ve inserted data into your sampleCollection, you can retrieve it using queries. MongoDB
+                  Once you’ve inserted data into your sampleCollection, you can retrieve it using queries. MongoDB
                   queries can be as simple or as complex as you need them to be, allowing you to filter, sort, and limit
                   results.
                 </Text>
                 <DefaultButton
                   style={{ marginTop: 16, width: 110 }}
-                  onClick={() => useTerminal.getState().sendMessage(findOrwellCommand)}
+                  onClick={() => useTerminal.getState().sendMessage(queriesCommand)}
                 >
-                  Try query
+                  Load data
                 </DefaultButton>
                 <Stack horizontal style={{ marginTop: 16 }}>
                   <TextField
-                    id="findOrwellCommand"
+                    id="queriesCommand"
                     multiline
-                    rows={2}
+                    rows={5}
                     readOnly
-                    defaultValue={findOrwellCommandForDisplay}
+                    defaultValue={queriesCommandForDisplay}
                     styles={{
                       root: { width: "90%" },
                       field: {
@@ -218,71 +227,13 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
                     iconProps={{
                       iconName: "Copy",
                     }}
-                    onClick={() => onCopyBtnClicked("#findOrwellCommand")}
-                  />
-                </Stack>
-                <DefaultButton
-                  style={{ marginTop: 32, width: 110 }}
-                  onClick={() => useTerminal.getState().sendMessage(findByPagesCommand)}
-                >
-                  Try query
-                </DefaultButton>
-                <Stack horizontal style={{ marginTop: 16 }}>
-                  <TextField
-                    id="findByPagesCommand"
-                    multiline
-                    rows={2}
-                    readOnly
-                    defaultValue={findByPagesCommandForDisplay}
-                    styles={{
-                      root: { width: "90%" },
-                      field: {
-                        backgroundColor: "#EEEEEE",
-                        fontFamily:
-                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
-                      },
-                    }}
-                  />
-                  <IconButton
-                    iconProps={{
-                      iconName: "Copy",
-                    }}
-                    onClick={() => onCopyBtnClicked("#findByPagesCommand")}
-                  />
-                </Stack>
-                <DefaultButton
-                  style={{ marginTop: 32, width: 110 }}
-                  onClick={() => useTerminal.getState().sendMessage(findAndSortCommand)}
-                >
-                  Try query
-                </DefaultButton>
-                <Stack horizontal style={{ marginTop: 16 }}>
-                  <TextField
-                    id="findAndSortCommand"
-                    multiline
-                    rows={2}
-                    readOnly
-                    defaultValue={findAndSortCommandForDisplay}
-                    styles={{
-                      root: { width: "90%" },
-                      field: {
-                        backgroundColor: "#EEEEEE",
-                        fontFamily:
-                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
-                      },
-                    }}
-                  />
-                  <IconButton
-                    iconProps={{
-                      iconName: "Copy",
-                    }}
-                    onClick={() => onCopyBtnClicked("#findAndSortCommand")}
+                    onClick={() => onCopyBtnClicked("#queriesCommand")}
                   />
                 </Stack>
               </Stack>
             </PivotItem>
             <PivotItem
-              headerText="Next steps"
+              headerText="Integrations"
               onRenderItemLink={(props, defaultRenderer) =>
                 customPivotHeaderRenderer(props, defaultRenderer, currentStep, 4)
               }
@@ -291,18 +242,46 @@ export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
             >
               <Stack>
                 <Text>
-                  <b>Migrate existing data</b>
-                  <br />
-                  <br />
-                  Modernize your data seamlessly from an existing MongoDB cluster, whether it&apos;s on-premises or
-                  hosted in the cloud, to Azure Cosmos DB for MongoDB vCore.&nbsp;
-                  <Link
-                    target="_blank"
-                    href="https://learn.microsoft.com/azure/cosmos-db/mongodb/vcore/migration-options"
-                  >
-                    Learn more
-                  </Link>
+                  Cosmos DB for MongoDB vCore seamlessly integrates with Azure services. These integrations enable
+                  Cosmos DB for MongoDB and its partner products to directly interoperate, ensuring a smooth and unified
+                  experience, that just works.
                 </Text>
+                <Stack horizontal>
+                  <Stack style={{ marginTop: 20, marginRight: 20 }}>
+                    <Text>
+                      <b>First party integrations</b>
+                      <br />
+                      <br />
+                      <b>Azure Monitor</b>
+                      <br />
+                      Azure monitor provides comprehensive monitoring and diagnostics for Cosmos DB for Mongo DB. Learn
+                      more
+                      <br />
+                      <br />
+                      <b>Azure Networking</b>
+                      <br />
+                      Azure Networking seamlessly integrates with Azure Cosmos DB for Mongo DB for fast and secure data
+                      access. Learn more
+                      <br />
+                      <br />
+                      <b>PowerShell/CLI/ARM</b>
+                      <br />
+                      PowerShell/CLI/ARM seamlessly integrates with Azure Cosmos DB for Mongo DB for efficient
+                      management and automation. Learn more
+                    </Text>
+                  </Stack>
+                  <Stack style={{ marginTop: 20, marginLeft: 20 }}>
+                    <Text>
+                      <b>Application platforms integrations</b>
+                      <br />
+                      <br />
+                      <b>Vercel</b>
+                      <br />
+                      Vercel is a cloud platform for hosting static front ends and serverless functions, with instant
+                      deployments, automated scaling, and Next.js integration. Learn more
+                    </Text>
+                  </Stack>
+                </Stack>
               </Stack>
             </PivotItem>
           </Pivot>

src/Explorer/Tables/TableDataClient.ts

@@ -147,7 +147,7 @@ export class CassandraAPIDataClient extends TableDataClient {
     let properties = "(";
     let values = "(";
     for (let property in entity) {
-      if (entity[property]._ === "" || entity[property]._ === undefined) {
+      if (entity[property]._ === null) {
         continue;
       }
       properties = properties.concat(`${property}, `);
@@ -208,9 +208,6 @@ export class CassandraAPIDataClient extends TableDataClient {
           !originalDocument[property] ||
           newEntity[property]._.toString() !== originalDocument[property]._.toString()
         ) {
-          if (newEntity[property]._.toString() === "" || newEntity[property]._ === undefined) {
-            continue;
-          }
           let propertyQuerySegment = this.isStringType(newEntity[property].$)
             ? `${property} = '${newEntity[property]._}',`
             : `${property} = ${newEntity[property]._},`;

src/Explorer/Tree2/useDatabaseTreeNodes.ts

@@ -5,6 +5,7 @@ import { useDatabases } from "Explorer/useDatabases";
 import { useTabs } from "hooks/useTabs";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import * as ViewModels from "../../Contracts/ViewModels";
+import * as ResourceTreeContextMenuButtonFactory from "../ContextMenuButtonFactory";
 import Explorer from "../Explorer";
 import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { useSelectedNode } from "../useSelectedNode";
@@ -21,7 +22,7 @@ export const useDatabaseTreeNodes = (container: Explorer, isNotebookEnabled: boo
       className: "databaseHeader",
       children: [],
       isSelected: () => useSelectedNode.getState().isDataNodeSelected(database.id()),
-      contextMenu: undefined, // TODO Disable this for now as the actions don't work. ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
+      contextMenu: ResourceTreeContextMenuButtonFactory.createDatabaseContextMenu(container, database.id()),
       onExpanded: async () => {
         useSelectedNode.getState().setSelectedNode(database);
         if (!databaseNode.children || databaseNode.children?.length === 0) {

src/HostedExplorer.tsx

@@ -7,6 +7,9 @@ import "../less/hostedexplorer.less";
 import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";
+import { useAADAuth } from "./hooks/useAADAuth";
+import { useConfig } from "./hooks/useConfig";
+import { useTokenMetadata } from "./hooks/usePortalAccessToken";
 import { HostedExplorerChildFrame } from "./HostedExplorerChildFrame";
 import { AccountSwitcher } from "./Platform/Hosted/Components/AccountSwitcher";
 import { ConnectExplorer } from "./Platform/Hosted/Components/ConnectExplorer";
@@ -17,9 +20,6 @@ import { SignInButton } from "./Platform/Hosted/Components/SignInButton";
 import "./Platform/Hosted/ConnectScreen.less";
 import { extractMasterKeyfromConnectionString } from "./Platform/Hosted/HostedUtils";
 import "./Shared/appInsights";
-import { useAADAuth } from "./hooks/useAADAuth";
-import { useConfig } from "./hooks/useConfig";
-import { useTokenMetadata } from "./hooks/usePortalAccessToken";
 
 initializeIcons();
 

src/Main.tsx

@@ -1,13 +1,13 @@
 // CSS Dependencies
 import { initializeIcons, loadTheme } from "@fluentui/react";
-import "bootstrap/dist/css/bootstrap.css";
 import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
 import { MongoQuickstartTutorial } from "Explorer/Quickstart/Tutorials/MongoQuickstartTutorial";
 import { SQLQuickstartTutorial } from "Explorer/Quickstart/Tutorials/SQLQuickstartTutorial";
+import { userContext } from "UserContext";
+import "bootstrap/dist/css/bootstrap.css";
 import { useCarousel } from "hooks/useCarousel";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import { userContext } from "UserContext";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
 import "../externals/jquery-ui.structure.min.css";
@@ -16,27 +16,27 @@ import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
-import { Platform } from "ConfigContext";
 import { QueryCopilotCarousel } from "Explorer/QueryCopilot/CopilotCarousel";
 import { QueryCopilotFeedbackModal } from "Explorer/QueryCopilot/Modal/QueryCopilotFeedbackModal";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
-import "../images/favicon.ico";
 import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
+import "../images/favicon.ico";
+import "../less/TableStyles/CustomizeColumns.less";
+import "../less/TableStyles/EntityEditor.less";
+import "../less/TableStyles/fulldatatables.less";
+import "../less/TableStyles/queryBuilder.less";
+import * as StyleConstants from "./Common/StyleConstants";
+import { configContext, Platform } from "ConfigContext";
 import "../less/documentDB.less";
 import "../less/forms.less";
 import "../less/infobox.less";
 import "../less/menus.less";
 import "../less/messagebox.less";
 import "../less/resourceTree.less";
-import "../less/TableStyles/CustomizeColumns.less";
-import "../less/TableStyles/EntityEditor.less";
-import "../less/TableStyles/fulldatatables.less";
-import "../less/TableStyles/queryBuilder.less";
 import "../less/tree.less";
 import { CollapsedResourceTree } from "./Common/CollapsedResourceTree";
 import { ResourceTreeContainer } from "./Common/ResourceTreeContainer";
-import * as StyleConstants from "./Common/StyleConstants";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
 import { Dialog } from "./Explorer/Controls/Dialog";
@@ -55,11 +55,11 @@ import "./Explorer/Panes/PanelComponent.less";
 import { SidePanel } from "./Explorer/Panes/PanelContainerComponent";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import { Tabs } from "./Explorer/Tabs/Tabs";
+import "./Libs/jquery";
+import "./Shared/appInsights";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
-import "./Libs/jquery";
 import { appThemeFabric } from "./Platform/Fabric/FabricTheme";
-import "./Shared/appInsights";
 
 initializeIcons();
 
@@ -72,7 +72,6 @@ const App: React.FunctionComponent = () => {
   const config = useConfig();
   if (config?.platform === Platform.Fabric) {
     loadTheme(appThemeFabric);
-    import("../less/documentDBFabric.less");
   }
   StyleConstants.updateStyles();
   const explorer = useKnockoutExplorer(config?.platform);
@@ -92,6 +91,7 @@ const App: React.FunctionComponent = () => {
 
   return (
     <div className="flexContainer" aria-hidden="false">
+      <LoadFabricOverrides />
       <div id="divExplorer" className="flexContainer hideOverflows">
         <div id="freeTierTeachingBubble"> </div>
         {/* Main Command Bar - Start */}
@@ -141,8 +141,20 @@ const App: React.FunctionComponent = () => {
   );
 };
 
-const mainElement = document.getElementById("Main");
-ReactDOM.render(<App />, mainElement);
+ReactDOM.render(<App />, document.body);
+
+function LoadFabricOverrides(): JSX.Element {
+  if (configContext.platform === Platform.Fabric) {
+    const FabricStyle = React.lazy(() => import("./Platform/Fabric/FabricPlatform"));
+    return (
+      <React.Suspense fallback={<div></div>}>
+        <FabricStyle />
+      </React.Suspense>
+    );
+  } else {
+    return <></>;
+  }
+}
 
 function LoadingExplorer(): JSX.Element {
   return (

src/Platform/Fabric/FabricPlatform.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import "../../../less/documentDBFabric.less";
+// This is a dummy export, allowing us to conditionally import documentDBFabric.less
+// by lazy-importing this in Main.tsx (see LoadFabricOverrides() there)
+export default function InitFabric() {
+  return <></>;
+}

src/Platform/Fabric/FabricUtil.ts

@@ -1,53 +0,0 @@
-import { sendCachedDataMessage } from "Common/MessageHandler";
-import { FabricDatabaseConnectionInfo } from "Contracts/FabricContract";
-import { MessageTypes } from "Contracts/MessageTypes";
-import Explorer from "Explorer/Explorer";
-import { updateUserContext } from "UserContext";
-
-const TOKEN_VALIDITY_MS = (3600 - 600) * 1000; // 1 hour minus 10 minutes to be safe
-let timeoutId: NodeJS.Timeout;
-
-// Prevents multiple parallel requests
-let isRequestPending = false;
-
-export const requestDatabaseResourceTokens = (): void => {
-  if (isRequestPending) {
-    return;
-  }
-
-  // TODO Make Fabric return the message id so we can handle this promise
-  isRequestPending = true;
-  sendCachedDataMessage<FabricDatabaseConnectionInfo>(MessageTypes.GetAllResourceTokens, []);
-};
-
-export const handleRequestDatabaseResourceTokensResponse = (
-  explorer: Explorer,
-  fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo,
-): void => {
-  isRequestPending = false;
-  updateUserContext({ fabricDatabaseConnectionInfo });
-  scheduleRefreshDatabaseResourceToken();
-  explorer.refreshAllDatabases();
-};
-
-/**
- * Check token validity and schedule a refresh if necessary
- * @param tokenTimestamp
- * @returns
- */
-export const scheduleRefreshDatabaseResourceToken = (): void => {
-  if (timeoutId !== undefined) {
-    clearTimeout(timeoutId);
-    timeoutId = undefined;
-  }
-
-  timeoutId = setTimeout(() => {
-    requestDatabaseResourceTokens();
-  }, TOKEN_VALIDITY_MS);
-};
-
-export const checkDatabaseResourceTokensValidity = (tokenTimestamp: number): void => {
-  if (tokenTimestamp + TOKEN_VALIDITY_MS < Date.now()) {
-    requestDatabaseResourceTokens();
-  }
-};

src/Platform/Hosted/Components/ConnectExplorer.tsx

@@ -30,18 +30,6 @@ export const fetchEncryptedToken = async (connectionString: string): Promise<str
   return decodeURIComponent(result.readWrite || result.read);
 };
 
-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 response = await fetch(url, { headers, method: "POST" });
-  if (!response.ok) {
-    throw response;
-  }
-
-  return (await response.text()) === "True";
-};
-
 export const ConnectExplorer: React.FunctionComponent<Props> = ({
   setEncryptedToken,
   login,
@@ -50,7 +38,6 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
   setConnectionString,
 }: Props) => {
   const [isFormVisible, { setTrue: showForm }] = useBoolean(false);
-  const [errorMessage, setErrorMessage] = React.useState("");
   const enableConnectionStringLogin = !userContext.features.disableConnectionStringLogin;
 
   return (
@@ -66,14 +53,6 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
               id="connectWithConnectionString"
               onSubmit={async (event) => {
                 event.preventDefault();
-                setErrorMessage("");
-
-                if (await isAccountRestrictedForConnectionStringLogin(connectionString)) {
-                  setErrorMessage(
-                    "This account has been blocked from connection-string login. Please go to cosmos.azure.com/aad for AAD based login.",
-                  );
-                  return;
-                }
 
                 if (isResourceTokenConnectionString(connectionString)) {
                   setAuthType(AuthType.ResourceToken);
@@ -97,12 +76,10 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
                     setConnectionString(event.target.value);
                   }}
                 />
-                {errorMessage.length > 0 && (
-                  <span className="errorDetailsInfoTooltip">
-                    <img className="errorImg" src={ErrorImage} alt="Error notification" />
-                    <span className="errorDetails">{errorMessage}</span>
-                  </span>
-                )}
+                <span className="errorDetailsInfoTooltip" style={{ display: "none" }}>
+                  <img className="errorImg" src={ErrorImage} alt="Error notification" />
+                  <span className="errorDetails"></span>
+                </span>
               </p>
               <p className="connectExplorerContent">
                 <input className="filterbtnstyle" type="submit" value="Connect" />

src/Platform/Hosted/ConnectScreen.less

@@ -66,7 +66,7 @@
 }
 .connectExplorerContainer .connectExplorer .connectExplorerContent .errorDetailsInfoTooltip .errorDetails {
   bottom: 24px;
-  width: 165px;
+  width: 145px;
   visibility: hidden;
   background-color: #393939;
   color: #ffffff;

src/Platform/Hosted/extractFeatures.ts

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

src/Shared/ExplorerSettings.ts

@@ -1,3 +1,4 @@
+import { PriorityLevel } from "@azure/cosmos";
 import * as Constants from "../Common/Constants";
 import { LocalStorageUtility, StorageKey } from "./StorageUtility";
 
@@ -6,7 +7,7 @@ export const createDefaultSettings = () => {
   LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, Constants.Queries.itemsPerPage);
   LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "true");
   LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, Constants.Queries.DefaultMaxDegreeOfParallelism);
-  LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, Constants.PriorityLevel.Default);
+  LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, PriorityLevel.Low);
 };
 
 export const hasSettingsDefined = (): boolean => {
@@ -19,6 +20,6 @@ export const hasSettingsDefined = (): boolean => {
 
 export const ensurePriorityLevel = () => {
   if (!LocalStorageUtility.hasItem(StorageKey.PriorityLevel)) {
-    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, Constants.PriorityLevel.Default);
+    LocalStorageUtility.setEntryString(StorageKey.PriorityLevel, PriorityLevel.Low);
   }
 };

src/Terminal/JupyterLabAppFactory.ts

@@ -10,13 +10,9 @@ import { userContext } from "UserContext";
 export class JupyterLabAppFactory {
   private isShellStarted: boolean | undefined;
   private checkShellStarted: ((content: string | undefined) => void) | undefined;
-  private onShellExited: (restartShell: boolean) => void;
-  private restartShell: boolean;
+  private onShellExited: () => void;
 
   private isShellExited(content: string | undefined) {
-    if (userContext.apiType === "VCoreMongo" && content?.includes("MongoServerError: Invalid key")) {
-      this.restartShell = true;
-    }
     return content?.includes("cosmosuser@");
   }
 
@@ -36,11 +32,10 @@ export class JupyterLabAppFactory {
     this.isShellStarted = content?.includes("Enter password");
   }
 
-  constructor(closeTab: (restartShell: boolean) => void) {
+  constructor(closeTab: () => void) {
     this.onShellExited = closeTab;
     this.isShellStarted = false;
     this.checkShellStarted = undefined;
-    this.restartShell = false;
 
     switch (userContext.apiType) {
       case "Mongo":
@@ -74,7 +69,7 @@ export class JupyterLabAppFactory {
         if (!this.isShellStarted) {
           this.checkShellStarted(content);
         } else if (this.isShellExited(content)) {
-          this.onShellExited(this.restartShell);
+          this.onShellExited();
         }
       }
     }, this);

src/Terminal/index.ts

@@ -11,8 +11,6 @@ import { JupyterLabAppFactory } from "./JupyterLabAppFactory";
 import { TerminalProps } from "./TerminalProps";
 import "./index.css";
 
-let session: ITerminalConnection | undefined;
-
 const createServerSettings = (props: TerminalProps): ServerConnection.ISettings => {
   let body: BodyInit | undefined;
   let headers: HeadersInit | undefined;
@@ -51,7 +49,7 @@ const createServerSettings = (props: TerminalProps): ServerConnection.ISettings
   return ServerConnection.makeSettings(options);
 };
 
-const initTerminal = async (props: TerminalProps): Promise<void> => {
+const initTerminal = async (props: TerminalProps): Promise<ITerminalConnection | undefined> => {
   // Initialize userContext (only properties which are needed by TelemetryProcessor)
   updateUserContext({
     subscriptionId: props.subscriptionId,
@@ -61,37 +59,28 @@ const initTerminal = async (props: TerminalProps): Promise<void> => {
   });
 
   const serverSettings = createServerSettings(props);
-
-  createTerminalApp(props, serverSettings);
-};
-
-const createTerminalApp = async (props: TerminalProps, serverSettings: ServerConnection.ISettings) => {
   const data = { baseUrl: serverSettings.baseUrl };
   const startTime = TelemetryProcessor.traceStart(Action.OpenTerminal, data);
 
   try {
-    session = await new JupyterLabAppFactory((restartShell: boolean) =>
-      closeTab(props, serverSettings, restartShell),
-    ).createTerminalApp(serverSettings);
+    const session = await new JupyterLabAppFactory(() => closeTab(props.tabId)).createTerminalApp(serverSettings);
     TelemetryProcessor.traceSuccess(Action.OpenTerminal, data, startTime);
+    return session;
   } catch (error) {
     TelemetryProcessor.traceFailure(Action.OpenTerminal, data, startTime);
-    session = undefined;
+    return undefined;
   }
 };
 
-const closeTab = (props: TerminalProps, serverSettings: ServerConnection.ISettings, restartShell: boolean): void => {
-  if (restartShell) {
-    createTerminalApp(props, serverSettings);
-  } else {
-    window.parent.postMessage(
-      { type: MessageTypes.CloseTab, data: { tabId: props.tabId }, signature: "pcIframe" },
-      window.document.referrer,
-    );
-  }
+const closeTab = (tabId: string): void => {
+  window.parent.postMessage(
+    { type: MessageTypes.CloseTab, data: { tabId: tabId }, signature: "pcIframe" },
+    window.document.referrer,
+  );
 };
 
 const main = async (): Promise<void> => {
+  let session: ITerminalConnection | undefined;
   postRobot.on(
     "props",
     {
@@ -102,7 +91,7 @@ const main = async (): Promise<void> => {
       // Typescript definition for event is wrong. So read props by casting to <any>
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const props = (event as any).data as TerminalProps;
-      await initTerminal(props);
+      session = await initTerminal(props);
     },
   );
 

src/UserContext.ts

@@ -1,4 +1,3 @@
-import { FabricDatabaseConnectionInfo } from "Contracts/FabricContract";
 import { ParsedResourceTokenConnectionString } from "Platform/Hosted/Helpers/ResourceTokenUtils";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceOpen } from "Shared/Telemetry/TelemetryProcessor";
@@ -48,7 +47,6 @@ export interface VCoreMongoConnectionParams {
 }
 
 interface UserContext {
-  readonly fabricDatabaseConnectionInfo?: FabricDatabaseConnectionInfo;
   readonly authType?: AuthType;
   readonly masterKey?: string;
   readonly subscriptionId?: string;

src/Utils/PriorityBasedExecutionUtils.test.ts

@@ -1,7 +1,7 @@
-import * as PriorityBasedExecutionUtils from "./PriorityBasedExecutionUtils";
-import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { PriorityLevel } from "../Common/Constants";
 import * as Cosmos from "@azure/cosmos";
+import { PriorityLevel } from "@azure/cosmos";
+import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
+import * as PriorityBasedExecutionUtils from "./PriorityBasedExecutionUtils";
 
 describe("Priority execution utility", () => {
   it("check default priority level is Low", () => {

src/Utils/PriorityBasedExecutionUtils.ts

@@ -1,6 +1,6 @@
 import * as Cosmos from "@azure/cosmos";
+import { Constants, PriorityLevel } from "@azure/cosmos";
 import { LocalStorageUtility, StorageKey } from "Shared/StorageUtility";
-import { PriorityLevel } from "../Common/Constants";
 import { userContext } from "../UserContext";
 
 export function isFeatureEnabled(): boolean {
@@ -21,18 +21,18 @@ export function isRelevantRequest(requestContext: Cosmos.RequestContext): boolea
 }
 
 export function getPriorityLevel(): PriorityLevel {
-  const priorityLevel = LocalStorageUtility.getEntryString(StorageKey.PriorityLevel);
-  if (priorityLevel && Object.values(PriorityLevel).includes(priorityLevel)) {
+  const priorityLevel: string = LocalStorageUtility.getEntryString(StorageKey.PriorityLevel);
+  if (priorityLevel) {
     return priorityLevel as PriorityLevel;
   } else {
-    return PriorityLevel.Default;
+    return PriorityLevel.Low;
   }
 }
 
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, undefined, next) => {
   if (isRelevantRequest(requestContext)) {
     const priorityLevel: PriorityLevel = getPriorityLevel();
-    requestContext.headers["x-ms-cosmos-priority-level"] = priorityLevel as string;
+    requestContext.headers[Constants.HttpHeaders.PriorityLevel] = priorityLevel;
   }
   return next(requestContext);
 };

src/explorer.html

@@ -8,7 +8,5 @@
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
   </head>
 
-  <body>
-    <div id="Main" style="height: 100%"></div>
-  </body>
+  <body></body>
 </html>

src/hooks/useDatabaseAccounts.tsx

@@ -1,9 +1,6 @@
-import { HttpHeaders } from "Common/Constants";
-import { QueryRequestOptions, QueryResponse } from "Contracts/AzureResourceGraph";
 import useSWR from "swr";
 import { configContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
-/* eslint-disable  @typescript-eslint/no-explicit-any */
 
 interface AccountListResult {
   nextLink: string;
@@ -33,56 +30,10 @@ export async function fetchDatabaseAccounts(subscriptionId: string, accessToken:
   return accounts.sort((a, b) => a.name.localeCompare(b.name));
 }
 
-export async function fetchDatabaseAccountsFromGraph(
-  subscriptionId: string,
-  accessToken: string,
-): Promise<DatabaseAccount[]> {
-  const headers = new Headers();
-  const bearer = `Bearer ${accessToken}`;
-
-  headers.append("Authorization", bearer);
-  headers.append(HttpHeaders.contentType, "application/json");
-  const databaseAccountsQuery = "resources | where type =~ 'microsoft.documentdb/databaseaccounts'";
-  const apiVersion = "2021-03-01";
-  const managementResourceGraphAPIURL = `${configContext.ARM_ENDPOINT}providers/Microsoft.ResourceGraph/resources?api-version=${apiVersion}`;
-
-  const databaseAccounts: DatabaseAccount[] = [];
-  let skipToken: string;
-  do {
-    const body = {
-      query: databaseAccountsQuery,
-      subscriptions: [subscriptionId],
-      ...(skipToken && {
-        options: {
-          $skipToken: skipToken,
-        } as QueryRequestOptions,
-      }),
-    };
-
-    const response = await fetch(managementResourceGraphAPIURL, {
-      method: "POST",
-      headers,
-      body: JSON.stringify(body),
-    });
-
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-
-    const queryResponse: QueryResponse = (await response.json()) as QueryResponse;
-    skipToken = queryResponse.$skipToken;
-    queryResponse.data?.map((databaseAccount: any) => {
-      databaseAccounts.push(databaseAccount as DatabaseAccount);
-    });
-  } while (skipToken);
-
-  return databaseAccounts.sort((a, b) => a.name.localeCompare(b.name));
-}
-
 export function useDatabaseAccounts(subscriptionId: string, armToken: string): DatabaseAccount[] | undefined {
   const { data } = useSWR(
     () => (armToken && subscriptionId ? ["databaseAccounts", subscriptionId, armToken] : undefined),
-    (_, subscriptionId, armToken) => fetchDatabaseAccountsFromGraph(subscriptionId, armToken),
+    (_, subscriptionId, armToken) => fetchDatabaseAccounts(subscriptionId, armToken),
   );
   return data;
 }

src/hooks/useKnockoutExplorer.ts

@@ -1,11 +1,7 @@
 import { createUri } from "Common/UrlUtility";
-import { FabricDatabaseConnectionInfo, FabricMessage } from "Contracts/FabricContract";
+import { FabricMessage } from "Contracts/FabricContract";
 import Explorer from "Explorer/Explorer";
 import { useSelectedNode } from "Explorer/useSelectedNode";
-import {
-  handleRequestDatabaseResourceTokensResponse,
-  scheduleRefreshDatabaseResourceToken,
-} from "Platform/Fabric/FabricUtil";
 import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
@@ -102,37 +98,58 @@ async function configureFabric(): Promise<Explorer> {
         }
 
         const data: FabricMessage = event.data?.data;
+
         if (!data) {
           return;
         }
 
         switch (data.type) {
           case "initialize": {
-            const fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo = {
-              endpoint: data.message.endpoint,
-              databaseId: data.message.databaseId,
-              resourceTokens: data.message.resourceTokens as { [resourceId: string]: string },
-              resourceTokensTimestamp: data.message.resourceTokensTimestamp,
-            };
-            explorer = await createExplorerFabric(fabricDatabaseConnectionInfo);
+            explorer = await configureWithFabric(data.message.endpoint);
             resolve(explorer);
-
-            explorer.refreshAllDatabases().then(() => {
-              openFirstContainer(explorer, fabricDatabaseConnectionInfo.databaseId);
-            });
-            scheduleRefreshDatabaseResourceToken();
             break;
           }
           case "newContainer":
             explorer.onNewCollectionClicked();
             break;
-          case "authorizationToken": {
-            handleCachedDataMessage(data);
+          case "openTab": {
+            // Expand database first
+            const databaseName = sessionStorage.getItem("openDatabaseName") ?? data.databaseName;
+            const database = useDatabases.getState().databases.find((db) => db.id() === databaseName);
+            if (database) {
+              await database.expandDatabase();
+              useDatabases.getState().updateDatabase(database);
+              useSelectedNode.getState().setSelectedNode(database);
+
+              let collectionResourceId = data.collectionName;
+              if (collectionResourceId === undefined) {
+                // Pick first collection if collectionName not specified in message
+                collectionResourceId = database.collections()[0]?.id();
+              }
+
+              if (collectionResourceId !== undefined) {
+                // Expand collection
+                const collection = database.collections().find((coll) => coll.id() === collectionResourceId);
+                collection.expandCollection();
+                useSelectedNode.getState().setSelectedNode(collection);
+
+                handleOpenAction(
+                  {
+                    actionType: ActionType.OpenCollectionTab,
+                    databaseResourceId: databaseName,
+                    collectionResourceId: data.collectionName,
+                    tabKind: TabKind.SQLDocuments,
+                  } as DataExplorerAction,
+                  useDatabases.getState().databases,
+                  explorer,
+                );
+              }
+            }
+
             break;
           }
-          case "allResourceTokens": {
-            // TODO call handleCachedDataMessage when Fabric echoes message id back
-            handleRequestDatabaseResourceTokensResponse(explorer, data.message as FabricDatabaseConnectionInfo);
+          case "authorizationToken": {
+            handleCachedDataMessage(data);
             break;
           }
           default:
@@ -147,41 +164,6 @@ async function configureFabric(): Promise<Explorer> {
   });
 }
 
-const openFirstContainer = async (explorer: Explorer, databaseName: string, collectionName?: string) => {
-  // Expand database first
-  databaseName = sessionStorage.getItem("openDatabaseName") ?? databaseName;
-  const database = useDatabases.getState().databases.find((db) => db.id() === databaseName);
-  if (database) {
-    await database.expandDatabase();
-    useDatabases.getState().updateDatabase(database);
-    useSelectedNode.getState().setSelectedNode(database);
-
-    let collectionResourceId = collectionName;
-    if (collectionResourceId === undefined) {
-      // Pick first collection if collectionName not specified in message
-      collectionResourceId = database.collections()[0]?.id();
-    }
-
-    if (collectionResourceId !== undefined) {
-      // Expand collection
-      const collection = database.collections().find((coll) => coll.id() === collectionResourceId);
-      collection.expandCollection();
-      useSelectedNode.getState().setSelectedNode(collection);
-
-      handleOpenAction(
-        {
-          actionType: ActionType.OpenCollectionTab,
-          databaseResourceId: databaseName,
-          collectionResourceId: collectionName,
-          tabKind: TabKind.SQLDocuments,
-        } as DataExplorerAction,
-        useDatabases.getState().databases,
-        explorer,
-      );
-    }
-  }
-};
-
 async function configureHosted(): Promise<Explorer> {
   const win = window as unknown as HostedExplorerChildFrame;
   let explorer: Explorer;
@@ -319,9 +301,8 @@ function configureHostedWithResourceToken(config: ResourceToken): Explorer {
   return explorer;
 }
 
-function createExplorerFabric(fabricDatabaseConnectionInfo: FabricDatabaseConnectionInfo): Explorer {
+function configureWithFabric(documentEndpoint: string): Explorer {
   updateUserContext({
-    fabricDatabaseConnectionInfo,
     authType: AuthType.ConnectionString,
     databaseAccount: {
       id: "",
@@ -330,11 +311,12 @@ function createExplorerFabric(fabricDatabaseConnectionInfo: FabricDatabaseConnec
       name: "Mounted",
       kind: AccountKind.Default,
       properties: {
-        documentEndpoint: fabricDatabaseConnectionInfo.endpoint,
+        documentEndpoint,
       },
     },
   });
   const explorer = new Explorer();
+  setTimeout(() => explorer.refreshAllDatabases(), 0);
   return explorer;
 }
 

src/hooks/useSubscriptions.tsx

@@ -1,9 +1,6 @@
-import { HttpHeaders } from "Common/Constants";
-import { QueryRequestOptions, QueryResponse } from "Contracts/AzureResourceGraph";
 import useSWR from "swr";
 import { configContext } from "../ConfigContext";
 import { Subscription } from "../Contracts/DataModels";
-/* eslint-disable  @typescript-eslint/no-explicit-any */
 
 interface SubscriptionListResult {
   nextLink: string;
@@ -35,58 +32,10 @@ export async function fetchSubscriptions(accessToken: string): Promise<Subscript
   return subscriptions.sort((a, b) => a.displayName.localeCompare(b.displayName));
 }
 
-export async function fetchSubscriptionsFromGraph(accessToken: string): Promise<Subscription[]> {
-  const headers = new Headers();
-  const bearer = `Bearer ${accessToken}`;
-
-  headers.append("Authorization", bearer);
-  headers.append(HttpHeaders.contentType, "application/json");
-  const subscriptionsQuery =
-    "resources | where type == 'microsoft.documentdb/databaseaccounts' | join kind=inner ( resourcecontainers | where type == 'microsoft.resources/subscriptions' | project subscriptionId, subscriptionName = name, subscriptionState = tostring(parse_json(properties).state) ) on subscriptionId |  summarize by subscriptionId, subscriptionName, subscriptionState";
-  const apiVersion = "2021-03-01";
-  const managementResourceGraphAPIURL = `${configContext.ARM_ENDPOINT}providers/Microsoft.ResourceGraph/resources?api-version=${apiVersion}`;
-
-  const subscriptions: Subscription[] = [];
-  let skipToken: string;
-  do {
-    const body = {
-      query: subscriptionsQuery,
-      ...(skipToken && {
-        options: {
-          $skipToken: skipToken,
-        } as QueryRequestOptions,
-      }),
-    };
-
-    const response = await fetch(managementResourceGraphAPIURL, {
-      method: "POST",
-      headers,
-      body: JSON.stringify(body),
-    });
-
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-
-    const queryResponse: QueryResponse = (await response.json()) as QueryResponse;
-    skipToken = queryResponse.$skipToken;
-
-    queryResponse.data?.map((subscription: any) => {
-      subscriptions.push({
-        displayName: subscription.subscriptionName,
-        subscriptionId: subscription.subscriptionId,
-        state: subscription.subscriptionState,
-      } as Subscription);
-    });
-  } while (skipToken);
-
-  return subscriptions.sort((a, b) => a.displayName.localeCompare(b.displayName));
-}
-
 export function useSubscriptions(armToken: string): Subscription[] | undefined {
   const { data } = useSWR(
     () => (armToken ? ["subscriptions", armToken] : undefined),
-    (_, armToken) => fetchSubscriptionsFromGraph(armToken),
+    (_, armToken) => fetchSubscriptions(armToken),
   );
   return data;
 }