WIP

* Initial change of estimated cost to table format

* Converted cost estimate to table format and added different data for current vs updated cost estimates.

* lint fixes

* Changed the names of some interfaces

* Refactored a unit call to use an argument interface to avoid future confusion.

* Changed the severity of the save warning

* Format fix

* Fixed test due to styling change

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.eslintignore

@@ -14,7 +14,6 @@ src/Common/DataAccessUtilityBase.ts
 src/Common/DeleteFeedback.ts
 src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
-src/Common/EnvironmentUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
 src/Common/HeadersUtility.test.ts
@@ -43,7 +42,6 @@ src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
 src/Controls/Heatmap/HeatmapDatatypes.ts
-src/Definitions/adal.d.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts

.github/workflows/ci.yml

@@ -101,6 +101,7 @@ jobs:
           PLATFORM: "Emulator"
           NODE_TLS_REJECT_UNAUTHORIZED: 0
       - uses: actions/upload-artifact@v2
+        if: failure()
         with:
           name: screenshots
           path: failed-*
@@ -159,13 +160,14 @@ jobs:
           TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
+        if: failure()
         with:
           name: screenshots
           path: failed-*
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -189,7 +191,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -211,3 +213,28 @@ jobs:
         name: packages
         with:
           path: "*.nupkg"
+  nugetie:
+    name: Publish Nuget IE
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    runs-on: ubuntu-latest
+    env:
+      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
+      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
+    steps:
+      - uses: nuget/setup-nuget@v1
+        with:
+          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
+      - name: Download Dist Folder
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+      - run: cp ./configs/prod.json config.json
+      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.IE/g' DataExplorer.nuspec
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - uses: actions/upload-artifact@v2
+        name: packages
+        with:
+          path: "*.nupkg"

.github/workflows/runners.yml

@@ -1,25 +0,0 @@
-name: Runners
-on:
-  schedule:
-    - cron: "0 * 1 * *"
-jobs:
-  sqlcreatecollection:
-    runs-on: ubuntu-latest
-    name: "SQL | Create Collection"
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-      - run: npm ci
-      - run: npm run test:e2e
-        env:
-          PORTAL_RUNNER_APP_INSIGHTS_KEY: ${{ secrets.PORTAL_RUNNER_APP_INSIGHTS_KEY }}
-          PORTAL_RUNNER_USERNAME: ${{ secrets.PORTAL_RUNNER_USERNAME }}
-          PORTAL_RUNNER_PASSWORD: ${{ secrets.PORTAL_RUNNER_PASSWORD }}
-          PORTAL_RUNNER_SUBSCRIPTION: 69e02f2d-f059-4409-9eac-97e8a276ae2c
-          PORTAL_RUNNER_RESOURCE_GROUP: runners
-          PORTAL_RUNNER_DATABASE_ACCOUNT: portal-sql-runner
-      - uses: actions/upload-artifact@v2
-        if: failure()
-        with:
-          name: screenshots
-          path: failure.png

README.md

@@ -13,29 +13,18 @@ UI for Azure Cosmos DB. Powers the [Azure Portal](https://portal.azure.com/), ht
 
 ### Watch mode
 
-Run `npm run watch` to start the development server and automatically rebuild on changes
+Run `npm start` to start the development server and automatically rebuild on changes
 
-### Specifying Development Platform
+### Hosted Development (https://cosmos.azure.com)
 
-Setting the environment variable `PLATFORM` during the build process will force the explorer to load the specified platform. By default in development it will run in `Hosted` mode. Valid options:
-
-- Hosted
-- Emulator
-- Portal
-
-`PLATFORM=Emulator npm run watch`
-
-### Hosted Development
-
-The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
-
-To run pure hosted mode, in `webpack.config.js` change index HtmlWebpackPlugin to use hostedExplorer.html and change entry for index to use HostedExplorer.ts.
+- Visit: `https://localhost:1234/hostedExplorer.html`
+- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
+- The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development
 
-In a window environment, running `npm run build` will automatically copy the built files from `/dist` over to the default emulator install paths. In a non-windows environment you can specify an alternate endpoint using `EMULATOR_ENDPOINT` and webpack dev server will proxy requests for you.
-
-`PLATFORM=Emulator EMULATOR_ENDPOINT=https://my-vm.azure.com:8081 npm run watch`
+- Start the Cosmos Emulator
+- Visit: https://localhost:1234/index.html
 
 #### Setting up a Remote Emulator
 
@@ -55,16 +44,8 @@ The Cosmos emulator currently only runs in Windows environments. You can still d
 
 ### Portal Development
 
-The Cosmos Portal that consumes this repo is not currently open source. If you have access to this project, `npm run build` will copy the built files over to the portal where they will be loaded by the portal development environment
-
-You can however load a local running instance of data explorer in the production portal.
-
-1. Turn off browser SSL validation for localhost: chrome://flags/#allow-insecure-localhost OR Install valid SSL certs for localhost (on IE, follow these [instructions](https://www.technipages.com/ie-bypass-problem-with-this-websites-security-certificate) to install the localhost certificate in the right place)
-2. Allowlist `https://localhost:1234` domain for CORS in the Azure Cosmos DB portal
-3. Start the project in portal mode: `PLATFORM=Portal npm run watch`
-4. Load the portal using the following link: https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html
-
-Live reload will occur, but data explorer will not properly integrate again with the parent iframe. You will have to manually reload the page.
+- Visit: https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html
+- You may have to manually visit https://localhost:1234/explorer.html first and click through any SSL certificate warnings
 
 ### Testing
 

package-lock.json

@@ -275,6 +275,27 @@
         }
       }
     },
+    "@azure/msal-browser": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.8.0.tgz",
+      "integrity": "sha512-I6n7EQnwsZXgKPOLlS5X48jhzUNUFwMVm180wDBA/pwEkUy8ei6zWiPMBfWaMSxz9uNx9WHaEhgAyhJy0ze3AQ==",
+      "requires": {
+        "@azure/msal-common": "^2.0.0"
+      }
+    },
+    "@azure/msal-common": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-2.0.0.tgz",
+      "integrity": "sha512-d1RNcJb+P1EGzMHtgbZoVlHLQWjlVfr504jywNk9YEfoq8Hw3BxJ0wepu+1w0hc64D8zG0wljcvHaIH1jTn2SA==",
+      "requires": {
+        "debug": "^4.1.1"
+      }
+    },
+    "@azure/msal-react": {
+      "version": "1.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/@azure/msal-react/-/msal-react-1.0.0-alpha.1.tgz",
+      "integrity": "sha512-8BftMP1DyXf7/Fa7mxi14/fmHBdDGDUONmE8sm1T6w7ERJyY1RN7PZgdnUOcYcqj2xMnxfz9++8HsrzMrtMc0Q=="
+    },
     "@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -5448,12 +5469,6 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
       "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
     },
-    "adal-angular": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/adal-angular/-/adal-angular-1.0.15.tgz",
-      "integrity": "sha1-8qnvgvNYxEToMUKs5l0yJ6RBBDs=",
-      "dev": true
-    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -6359,7 +6374,6 @@
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
           "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-          "dev": true,
           "requires": {
             "base64-js": "^1.3.1",
             "ieee754": "^1.1.13"
@@ -14691,6 +14705,14 @@
       "requires": {
         "nan": "2.14.1",
         "prebuild-install": "5.3.3"
+      },
+      "dependencies": {
+        "nan": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
+          "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
+          "optional": true
+        }
       }
     },
     "killable": {
@@ -20134,7 +20156,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
       "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
-      "dev": true,
       "requires": {
         "chownr": "^1.1.1",
         "mkdirp-classic": "^0.5.2",

package.json

@@ -6,8 +6,10 @@
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.9.0",
-    "@azure/identity": "1.1.0",
     "@azure/cosmos-language-service": "0.0.5",
+    "@azure/identity": "1.1.0",
+    "@azure/msal-browser": "2.8.0",
+    "@azure/msal-react": "1.0.0-alpha.1",
     "@jupyterlab/services": "6.0.0-rc.2",
     "@jupyterlab/terminal": "3.0.0-rc.2",
     "@microsoft/applicationinsights-web": "2.5.9",
@@ -128,7 +130,6 @@
     "@types/webfontloader": "1.6.29",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
-    "adal-angular": "1.0.15",
     "axe-puppeteer": "1.1.0",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",

sampleData/gremlinSampleData.json

@@ -3,7 +3,6 @@
   "offerThroughput": 400,
   "databaseLevelThroughput": false,
   "collectionId": "Persons",
-  "rupmEnabled": false,
   "partitionKey": { "kind": "Hash", "paths": ["/name"] },
   "data": [
     "g.addV('person').property(id, '1').property('name', 'Eva').property('age', 44)",
@@ -13,4 +12,4 @@
     "g.V('1').addE('knows').to(g.V('2')).outV().addE('knows').to(g.V('3'))",
     "g.V('3').addE('knows').to(g.V('4'))"
   ]
-}
+}

src/Common/Constants.ts

@@ -108,13 +108,11 @@ export class CapabilityNames {
 export class Features {
   public static readonly cosmosdb = "cosmosdb";
   public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
-  public static readonly enableRupm = "enablerupm";
   public static readonly executeSproc = "dataexplorerexecutesproc";
   public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
   public static readonly enableTtl = "enablettl";
   public static readonly enableNotebooks = "enablenotebooks";
   public static readonly enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableCodeOfConduct = "enablecodeofconduct";
   public static readonly enableLinkInjection = "enablelinkinjection";
   public static readonly enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";
@@ -181,11 +179,6 @@ export class CassandraBackend {
   public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
 }
 
-export class RUPMStates {
-  public static on: string = "on";
-  public static off: string = "off";
-}
-
 export class Queries {
   public static CustomPageOption: string = "custom";
   public static UnlimitedPageOption: string = "unlimited";

src/Common/DataAccessUtilityBase.ts

@@ -1,169 +0,0 @@
-import { ConflictDefinition, FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import Q from "q";
-import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
-import ConflictId from "../Explorer/Tree/ConflictId";
-import DocumentId from "../Explorer/Tree/DocumentId";
-import StoredProcedure from "../Explorer/Tree/StoredProcedure";
-import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-import * as Constants from "./Constants";
-import { client } from "./CosmosClient";
-
-export function getCommonQueryOptions(options: FeedOptions): any {
-  const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
-  options = options || {};
-  options.populateQueryMetrics = true;
-  options.enableScanInQuery = options.enableScanInQuery || true;
-  if (!options.partitionKey) {
-    options.forceQueryPlan = true;
-  }
-  options.maxItemCount =
-    options.maxItemCount ||
-    (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
-    Constants.Queries.itemsPerPage;
-  options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
-
-  return options;
-}
-
-export function queryDocuments(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
-  options = getCommonQueryOptions(options);
-  const documentsIterator = client()
-    .database(databaseId)
-    .container(containerId)
-    .items.query(query, options);
-  return Q(documentsIterator);
-}
-
-export function getPartitionKeyHeaderForConflict(conflictId: ConflictId): Object {
-  const partitionKeyDefinition: DataModels.PartitionKey = conflictId.partitionKey;
-  const partitionKeyValue: any = conflictId.partitionKeyValue;
-
-  return getPartitionKeyHeader(partitionKeyDefinition, partitionKeyValue);
-}
-
-export function getPartitionKeyHeader(partitionKeyDefinition: DataModels.PartitionKey, partitionKeyValue: any): Object {
-  if (!partitionKeyDefinition) {
-    return undefined;
-  }
-
-  if (partitionKeyValue === undefined) {
-    return [{}];
-  }
-
-  return [partitionKeyValue];
-}
-
-export function updateDocument(
-  collection: ViewModels.CollectionBase,
-  documentId: DocumentId,
-  newDocument: any
-): Q.Promise<any> {
-  const partitionKey = documentId.partitionKeyValue;
-
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), partitionKey)
-      .replace(newDocument)
-      .then(response => response.resource)
-  );
-}
-
-export function executeStoredProcedure(
-  collection: ViewModels.Collection,
-  storedProcedure: StoredProcedure,
-  partitionKeyValue: any,
-  params: any[]
-): Q.Promise<any> {
-  // TODO remove this deferred. Kept it because of timeout code at bottom of function
-  const deferred = Q.defer<any>();
-
-  client()
-    .database(collection.databaseId)
-    .container(collection.id())
-    .scripts.storedProcedure(storedProcedure.id())
-    .execute(partitionKeyValue, params, { enableScriptLogging: true })
-    .then(response =>
-      deferred.resolve({
-        result: response.resource,
-        scriptLogs: response.headers[Constants.HttpHeaders.scriptLogResults]
-      })
-    )
-    .catch(error => deferred.reject(error));
-
-  return deferred.promise.timeout(
-    Constants.ClientDefaults.requestTimeoutMs,
-    `Request timed out while executing stored procedure ${storedProcedure.id()}`
-  );
-}
-
-export function createDocument(collection: ViewModels.CollectionBase, newDocument: any): Q.Promise<any> {
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .items.create(newDocument)
-      .then(response => response.resource)
-  );
-}
-
-export function readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  const partitionKey = documentId.partitionKeyValue;
-
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), partitionKey)
-      .read()
-      .then(response => response.resource)
-  );
-}
-
-export function deleteDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  const partitionKey = documentId.partitionKeyValue;
-
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), partitionKey)
-      .delete()
-  );
-}
-
-export function deleteConflict(
-  collection: ViewModels.CollectionBase,
-  conflictId: ConflictId,
-  options: any = {}
-): Q.Promise<any> {
-  options.partitionKey = options.partitionKey || getPartitionKeyHeaderForConflict(conflictId);
-
-  return Q(
-    client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .conflict(conflictId.id())
-      .delete(options)
-  );
-}
-
-export function queryConflicts(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
-  const documentsIterator = client()
-    .database(databaseId)
-    .container(containerId)
-    .conflicts.query(query, options);
-  return Q(documentsIterator);
-}

src/Common/DocumentClientUtilityBase.ts

@@ -1,217 +0,0 @@
-import { ConflictDefinition, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import Q from "q";
-import * as ViewModels from "../Contracts/ViewModels";
-import ConflictId from "../Explorer/Tree/ConflictId";
-import DocumentId from "../Explorer/Tree/DocumentId";
-import StoredProcedure from "../Explorer/Tree/StoredProcedure";
-import { logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
-import * as Constants from "./Constants";
-import * as DataAccessUtilityBase from "./DataAccessUtilityBase";
-import { MinimalQueryIterator, nextPage } from "./IteratorUtilities";
-import { handleError } from "./ErrorHandlingUtils";
-
-// TODO: Log all promise resolutions and errors with verbosity levels
-export function queryDocuments(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
-  return DataAccessUtilityBase.queryDocuments(databaseId, containerId, query, options);
-}
-
-export function queryConflicts(
-  databaseId: string,
-  containerId: string,
-  query: string,
-  options: any
-): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
-  return DataAccessUtilityBase.queryConflicts(databaseId, containerId, query, options);
-}
-
-export function getEntityName() {
-  const defaultExperience =
-    window.dataExplorer && window.dataExplorer.defaultExperience && window.dataExplorer.defaultExperience();
-  if (defaultExperience === Constants.DefaultAccountExperience.MongoDB) {
-    return "document";
-  }
-  return "item";
-}
-
-export function executeStoredProcedure(
-  collection: ViewModels.Collection,
-  storedProcedure: StoredProcedure,
-  partitionKeyValue: any,
-  params: any[]
-): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-
-  const clearMessage = logConsoleProgress(`Executing stored procedure ${storedProcedure.id()}`);
-  DataAccessUtilityBase.executeStoredProcedure(collection, storedProcedure, partitionKeyValue, params)
-    .then(
-      (response: any) => {
-        deferred.resolve(response);
-        logConsoleInfo(
-          `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
-        );
-      },
-      (error: any) => {
-        handleError(
-          error,
-          "ExecuteStoredProcedure",
-          `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
-        );
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function queryDocumentsPage(
-  resourceName: string,
-  documentsIterator: MinimalQueryIterator,
-  firstItemIndex: number,
-  options: any
-): Q.Promise<ViewModels.QueryResults> {
-  var deferred = Q.defer<ViewModels.QueryResults>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
-  Q(nextPage(documentsIterator, firstItemIndex))
-    .then(
-      (result: ViewModels.QueryResults) => {
-        const itemCount = (result.documents && result.documents.length) || 0;
-        logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
-        deferred.resolve(result);
-      },
-      (error: any) => {
-        handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Reading ${entityName} ${documentId.id()}`);
-  DataAccessUtilityBase.readDocument(collection, documentId)
-    .then(
-      (document: any) => {
-        deferred.resolve(document);
-      },
-      (error: any) => {
-        handleError(error, "ReadDocument", `Failed to read ${entityName} ${documentId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function updateDocument(
-  collection: ViewModels.CollectionBase,
-  documentId: DocumentId,
-  newDocument: any
-): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);
-  DataAccessUtilityBase.updateDocument(collection, documentId, newDocument)
-    .then(
-      (updatedDocument: any) => {
-        logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
-        deferred.resolve(updatedDocument);
-      },
-      (error: any) => {
-        handleError(error, "UpdateDocument", `Failed to update ${entityName} ${documentId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function createDocument(collection: ViewModels.CollectionBase, newDocument: any): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Creating new ${entityName} for container ${collection.id()}`);
-  DataAccessUtilityBase.createDocument(collection, newDocument)
-    .then(
-      (savedDocument: any) => {
-        logConsoleInfo(`Successfully created new ${entityName} for container ${collection.id()}`);
-        deferred.resolve(savedDocument);
-      },
-      (error: any) => {
-        handleError(error, "CreateDocument", `Error while creating new ${entityName} for container ${collection.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function deleteDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-  const entityName = getEntityName();
-  const clearMessage = logConsoleProgress(`Deleting ${entityName} ${documentId.id()}`);
-  DataAccessUtilityBase.deleteDocument(collection, documentId)
-    .then(
-      (response: any) => {
-        logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
-        deferred.resolve(response);
-      },
-      (error: any) => {
-        handleError(error, "DeleteDocument", `Error while deleting ${entityName} ${documentId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}
-
-export function deleteConflict(
-  collection: ViewModels.CollectionBase,
-  conflictId: ConflictId,
-  options?: any
-): Q.Promise<any> {
-  var deferred = Q.defer<any>();
-
-  const clearMessage = logConsoleProgress(`Deleting conflict ${conflictId.id()}`);
-  DataAccessUtilityBase.deleteConflict(collection, conflictId, options)
-    .then(
-      (response: any) => {
-        logConsoleInfo(`Successfully deleted conflict ${conflictId.id()}`);
-        deferred.resolve(response);
-      },
-      (error: any) => {
-        handleError(error, "DeleteConflict", `Error while deleting conflict ${conflictId.id()}`);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => {
-      clearMessage();
-    });
-
-  return deferred.promise;
-}

src/Common/DocumentUtility.ts

@@ -0,0 +1,10 @@
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
+import { userContext } from "../UserContext";
+
+export const getEntityName = (): string => {
+  if (userContext.defaultExperience === DefaultAccountExperienceType.MongoDB) {
+    return "document";
+  }
+
+  return "item";
+};

src/Common/EnvironmentUtility.ts

@@ -1,8 +1,6 @@
-export default class EnvironmentUtility {
-  public static normalizeArmEndpointUri(uri: string): string {
-    if (uri && uri.slice(-1) !== "/") {
-      return `${uri}/`;
-    }
-    return uri;
+export function normalizeArmEndpoint(uri: string): string {
+  if (uri && uri.slice(-1) !== "/") {
+    return `${uri}/`;
   }
+  return uri;
 }

src/Common/OfferUtility.test.ts

@@ -24,7 +24,8 @@ describe("parseSDKOfferResponse", () => {
       autoscaleMaxThroughput: undefined,
       minimumThroughput: 400,
       id: "test",
-      offerDefinition: mockOfferDefinition
+      offerDefinition: mockOfferDefinition,
+      offerReplacePending: false
     };
 
     expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
@@ -54,7 +55,8 @@ describe("parseSDKOfferResponse", () => {
       autoscaleMaxThroughput: 5000,
       minimumThroughput: 400,
       id: "test",
-      offerDefinition: mockOfferDefinition
+      offerDefinition: mockOfferDefinition,
+      offerReplacePending: false
     };
 
     expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);

src/Common/OfferUtility.ts

@@ -1,5 +1,6 @@
 import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
+import { HttpHeaders } from "./Constants";
 
 export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
   const offerDefinition: SDKOfferDefinition = offerResponse?.resource;
@@ -18,7 +19,7 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
       manualThroughput: undefined,
       minimumThroughput,
       offerDefinition,
-      headers: offerResponse.headers
+      offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true"
     };
   }
 
@@ -28,6 +29,6 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
     manualThroughput: offerContent.offerThroughput,
     minimumThroughput,
     offerDefinition,
-    headers: offerResponse.headers
+    offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true"
   };
 };

src/Common/QueriesClient.ts

@@ -3,16 +3,18 @@ import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
-import { createDocument, deleteDocument, queryDocuments, queryDocumentsPage } from "./DocumentClientUtilityBase";
+import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
 import { createCollection } from "./dataAccess/createCollection";
 import { handleError } from "./ErrorHandlingUtils";
+import { createDocument } from "./dataAccess/createDocument";
+import { deleteDocument } from "./dataAccess/deleteDocument";
+import { queryDocuments } from "./dataAccess/queryDocuments";
 
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
@@ -31,10 +33,7 @@ export class QueriesClient {
       return Promise.resolve(queriesCollection.rawDataModel);
     }
 
-    const id = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      "Setting up account for saving queries"
-    );
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Setting up account for saving queries");
     return createCollection({
       collectionId: SavedQueries.CollectionName,
       createNewDatabase: true,
@@ -45,10 +44,7 @@ export class QueriesClient {
     })
       .then(
         (collection: DataModels.Collection) => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            "Successfully set up account for saving queries"
-          );
+          NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
           return Promise.resolve(collection);
         },
         (error: any) => {
@@ -56,17 +52,14 @@ export class QueriesClient {
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public async saveQuery(query: DataModels.Query): Promise<void> {
     const queriesCollection = this.findQueriesCollection();
     if (!queriesCollection) {
       const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to save query ${query.queryName}: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
@@ -74,25 +67,16 @@ export class QueriesClient {
       this.validateQuery(query);
     } catch (error) {
       const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to save query ${query.queryName}: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
-    const id = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      `Saving query ${query.queryName}`
-    );
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Saving query ${query.queryName}`);
     query.id = query.queryName;
     return createDocument(queriesCollection, query)
       .then(
         (savedQuery: DataModels.Query) => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully saved query ${query.queryName}`
-          );
+          NotificationConsoleUtils.logConsoleInfo(`Successfully saved query ${query.queryName}`);
           return Promise.resolve();
         },
         (error: any) => {
@@ -103,74 +87,65 @@ export class QueriesClient {
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public async getQueries(): Promise<DataModels.Query[]> {
     const queriesCollection = this.findQueriesCollection();
     if (!queriesCollection) {
       const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to fetch saved queries: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
     const options: any = { enableCrossPartitionQuery: true };
-    const id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Fetching saved queries");
-    return queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
+    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+      SavedQueries.DatabaseName,
+      SavedQueries.CollectionName,
+      this.fetchQueriesQuery(),
+      options
+    );
+    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
+      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
+    return QueryUtils.queryAllPages(fetchQueries)
       .then(
-        (queryIterator: QueryIterator<ItemDefinition & Resource>) => {
-          const fetchQueries = (firstItemIndex: number): Q.Promise<ViewModels.QueryResults> =>
-            queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex, options);
-          return QueryUtils.queryAllPages(fetchQueries).then(
-            (results: ViewModels.QueryResults) => {
-              let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
-                if (!document) {
-                  return undefined;
-                }
-                const { id, resourceId, query, queryName } = document;
-                const parsedQuery: DataModels.Query = {
-                  resourceId: resourceId,
-                  queryName: queryName,
-                  query: query,
-                  id: id
-                };
-                try {
-                  this.validateQuery(parsedQuery);
-                  return parsedQuery;
-                } catch (error) {
-                  return undefined;
-                }
-              });
-              queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
-              NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, "Successfully fetched saved queries");
-              return Promise.resolve(queries);
-            },
-            (error: any) => {
-              handleError(error, "getSavedQueries", "Failed to fetch saved queries");
-              return Promise.reject(error);
+        (results: ViewModels.QueryResults) => {
+          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
+            if (!document) {
+              return undefined;
             }
-          );
+            const { id, resourceId, query, queryName } = document;
+            const parsedQuery: DataModels.Query = {
+              resourceId: resourceId,
+              queryName: queryName,
+              query: query,
+              id: id
+            };
+            try {
+              this.validateQuery(parsedQuery);
+              return parsedQuery;
+            } catch (error) {
+              return undefined;
+            }
+          });
+          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
+          return Promise.resolve(queries);
         },
         (error: any) => {
-          // should never get into this state but we handle this regardless
           handleError(error, "getSavedQueries", "Failed to fetch saved queries");
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public async deleteQuery(query: DataModels.Query): Promise<void> {
     const queriesCollection = this.findQueriesCollection();
     if (!queriesCollection) {
       const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to fetch saved queries: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
       return Promise.reject(errorMessage);
     }
 
@@ -178,16 +153,10 @@ export class QueriesClient {
       this.validateQuery(query);
     } catch (error) {
       const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Failed to delete query ${query.queryName}: ${errorMessage}`
-      );
+      NotificationConsoleUtils.logConsoleError(`Failed to delete query ${query.queryName}: ${errorMessage}`);
     }
 
-    const id = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      `Deleting query ${query.queryName}`
-    );
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting query ${query.queryName}`);
     query.id = query.queryName;
     const documentId = new DocumentId(
       {
@@ -201,10 +170,7 @@ export class QueriesClient {
     return deleteDocument(queriesCollection, documentId)
       .then(
         () => {
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully deleted query ${query.queryName}`
-          );
+          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted query ${query.queryName}`);
           return Promise.resolve();
         },
         (error: any) => {
@@ -212,7 +178,7 @@ export class QueriesClient {
           return Promise.reject(error);
         }
       )
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+      .finally(() => clearMessage());
   }
 
   public getResourceId(): string {

src/Common/dataAccess/createCollection.test.ts

@@ -1,6 +1,5 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../CosmosClient");
-jest.mock("../DataAccessUtilityBase");
 import { AuthType } from "../../AuthType";
 import { CreateCollectionParams, DatabaseAccount } from "../../Contracts/DataModels";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";

src/Common/dataAccess/createDocument.ts

@@ -0,0 +1,25 @@
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+
+export const createDocument = async (collection: CollectionBase, newDocument: unknown): Promise<unknown> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Creating new ${entityName} for container ${collection.id()}`);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .items.create(newDocument);
+
+    logConsoleInfo(`Successfully created new ${entityName} for container ${collection.id()}`);
+    return response?.resource;
+  } catch (error) {
+    handleError(error, "CreateDocument", `Error while creating new ${entityName} for container ${collection.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/deleteConflict.ts

@@ -0,0 +1,36 @@
+import ConflictId from "../../Explorer/Tree/ConflictId";
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { RequestOptions } from "@azure/cosmos";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+
+export const deleteConflict = async (collection: CollectionBase, conflictId: ConflictId): Promise<void> => {
+  const clearMessage = logConsoleProgress(`Deleting conflict ${conflictId.id()}`);
+
+  try {
+    const options = {
+      partitionKey: getPartitionKeyHeaderForConflict(conflictId)
+    };
+
+    await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .conflict(conflictId.id())
+      .delete(options as RequestOptions);
+    logConsoleInfo(`Successfully deleted conflict ${conflictId.id()}`);
+  } catch (error) {
+    handleError(error, "DeleteConflict", `Error while deleting conflict ${conflictId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};
+
+const getPartitionKeyHeaderForConflict = (conflictId: ConflictId): unknown => {
+  if (!conflictId.partitionKey) {
+    return undefined;
+  }
+
+  return conflictId.partitionKeyValue === undefined ? [{}] : [conflictId.partitionKeyValue];
+};

src/Common/dataAccess/deleteDocument.ts

@@ -0,0 +1,25 @@
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+
+export const deleteDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<void> => {
+  const entityName: string = getEntityName();
+  const clearMessage = logConsoleProgress(`Deleting ${entityName} ${documentId.id()}`);
+
+  try {
+    await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), documentId.partitionKeyValue)
+      .delete();
+    logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
+  } catch (error) {
+    handleError(error, "DeleteDocument", `Error while deleting ${entityName} ${documentId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/executeStoredProcedure.ts

@@ -0,0 +1,48 @@
+import { Collection } from "../../Contracts/ViewModels";
+import { ClientDefaults, HttpHeaders } from "../Constants";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import StoredProcedure from "../../Explorer/Tree/StoredProcedure";
+
+export interface ExecuteSprocResult {
+  result: StoredProcedure;
+  scriptLogs: string;
+}
+
+export const executeStoredProcedure = async (
+  collection: Collection,
+  storedProcedure: StoredProcedure,
+  partitionKeyValue: string,
+  params: string[]
+): Promise<ExecuteSprocResult> => {
+  const clearMessage = logConsoleProgress(`Executing stored procedure ${storedProcedure.id()}`);
+  const timeout = setTimeout(() => {
+    throw Error(`Request timed out while executing stored procedure ${storedProcedure.id()}`);
+  }, ClientDefaults.requestTimeoutMs);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .scripts.storedProcedure(storedProcedure.id())
+      .execute(partitionKeyValue, params, { enableScriptLogging: true });
+    clearTimeout(timeout);
+    logConsoleInfo(
+      `Finished executing stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+    );
+    return {
+      result: response.resource,
+      scriptLogs: response.headers[HttpHeaders.scriptLogResults] as string
+    };
+  } catch (error) {
+    handleError(
+      error,
+      "ExecuteStoredProcedure",
+      `Failed to execute stored procedure ${storedProcedure.id()} for container ${storedProcedure.collection.id()}`
+    );
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/getCollectionDataUsageSize.ts

@@ -0,0 +1,92 @@
+import { AuthType } from "../../AuthType";
+import { armRequest } from "../../Utils/arm/request";
+import { configContext } from "../../ConfigContext";
+import { handleError } from "../ErrorHandlingUtils";
+import { userContext } from "../../UserContext";
+
+interface TimeSeriesData {
+  data: {
+    timeStamp: string;
+    total: number;
+  }[];
+  metadatavalues: {
+    name: {
+      localizedValue: string;
+      value: string;
+    };
+    value: string;
+  };
+}
+
+interface MetricsData {
+  displayDescription: string;
+  errorCode: string;
+  id: string;
+  name: {
+    value: string;
+    localizedValue: string;
+  };
+  timeseries: TimeSeriesData[];
+  type: string;
+  unit: string;
+}
+
+interface MetricsResponse {
+  cost: number;
+  interval: string;
+  namespace: string;
+  resourceregion: string;
+  timespan: string;
+  value: MetricsData[];
+}
+
+export const getCollectionUsageSizeInKB = async (databaseName: string, containerName: string): Promise<number> => {
+  if (window.authType !== AuthType.AAD) {
+    return undefined;
+  }
+
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const filter = `DatabaseName eq '${databaseName}' and CollectionName eq '${containerName}'`;
+  const metricNames = "DataUsage,IndexUsage";
+  const path = `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${accountName}/providers/microsoft.insights/metrics`;
+
+  try {
+    const metricsResponse: MetricsResponse = await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path,
+      method: "GET",
+      apiVersion: "2018-01-01",
+      queryParams: {
+        filter,
+        metricNames
+      }
+    });
+
+    if (metricsResponse?.value?.length !== 2) {
+      return undefined;
+    }
+
+    const dataUsageData: MetricsData = metricsResponse.value[0];
+    const indexUsagedata: MetricsData = metricsResponse.value[1];
+    const dataUsageSizeInKb: number = getUsageSizeInKb(dataUsageData);
+    const indexUsageSizeInKb: number = getUsageSizeInKb(indexUsagedata);
+
+    return dataUsageSizeInKb + indexUsageSizeInKb;
+  } catch (error) {
+    handleError(error, "getCollectionUsageSize");
+    throw error;
+  }
+};
+
+const getUsageSizeInKb = (metricsData: MetricsData): number => {
+  if (metricsData?.errorCode !== "Success") {
+    throw Error(`Get collection usage size failed: ${metricsData.errorCode}`);
+  }
+
+  const timeSeriesData: TimeSeriesData = metricsData?.timeseries?.[0];
+  const usageSizeInBytes: number = timeSeriesData?.data?.[0]?.total;
+
+  return usageSizeInBytes ? usageSizeInBytes / 1024 : 0;
+};

src/Common/dataAccess/queryConflicts.ts

@@ -0,0 +1,14 @@
+import { ConflictDefinition, FeedOptions, QueryIterator, Resource } from "@azure/cosmos";
+import { client } from "../CosmosClient";
+
+export const queryConflicts = (
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: FeedOptions
+): QueryIterator<ConflictDefinition & Resource> => {
+  return client()
+    .database(databaseId)
+    .container(containerId)
+    .conflicts.query(query, options);
+};

src/Common/dataAccess/queryDocuments.test.ts

@@ -1,13 +1,13 @@
-import { getCommonQueryOptions } from "./DataAccessUtilityBase";
-import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-
-describe("getCommonQueryOptions", () => {
-  it("builds the correct default options objects", () => {
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
-  });
-  it("reads from localStorage", () => {
-    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
-    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
-    expect(getCommonQueryOptions({})).toMatchSnapshot();
-  });
-});
+import { getCommonQueryOptions } from "./queryDocuments";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+
+describe("getCommonQueryOptions", () => {
+  it("builds the correct default options objects", () => {
+    expect(getCommonQueryOptions({})).toMatchSnapshot();
+  });
+  it("reads from localStorage", () => {
+    LocalStorageUtility.setEntryNumber(StorageKey.ActualItemPerPage, 37);
+    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, 17);
+    expect(getCommonQueryOptions({})).toMatchSnapshot();
+  });
+});

src/Common/dataAccess/queryDocuments.ts

@@ -0,0 +1,34 @@
+import { Queries } from "../Constants";
+import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import { client } from "../CosmosClient";
+
+export const queryDocuments = (
+  databaseId: string,
+  containerId: string,
+  query: string,
+  options: FeedOptions
+): QueryIterator<ItemDefinition & Resource> => {
+  options = getCommonQueryOptions(options);
+  return client()
+    .database(databaseId)
+    .container(containerId)
+    .items.query(query, options);
+};
+
+export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
+  const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
+  options = options || {};
+  options.populateQueryMetrics = true;
+  options.enableScanInQuery = options.enableScanInQuery || true;
+  if (!options.partitionKey) {
+    options.forceQueryPlan = true;
+  }
+  options.maxItemCount =
+    options.maxItemCount ||
+    (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
+    Queries.itemsPerPage;
+  options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
+
+  return options;
+};

src/Common/dataAccess/queryDocumentsPage.ts

@@ -0,0 +1,26 @@
+import { QueryResults } from "../../Contracts/ViewModels";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { MinimalQueryIterator, nextPage } from "../IteratorUtilities";
+import { handleError } from "../ErrorHandlingUtils";
+import { getEntityName } from "../DocumentUtility";
+
+export const queryDocumentsPage = async (
+  resourceName: string,
+  documentsIterator: MinimalQueryIterator,
+  firstItemIndex: number
+): Promise<QueryResults> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Querying ${entityName} for container ${resourceName}`);
+
+  try {
+    const result: QueryResults = await nextPage(documentsIterator, firstItemIndex);
+    const itemCount = (result.documents && result.documents.length) || 0;
+    logConsoleInfo(`Successfully fetched ${itemCount} ${entityName} for container ${resourceName}`);
+    return result;
+  } catch (error) {
+    handleError(error, "QueryDocumentsPage", `Failed to query ${entityName} for container ${resourceName}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/readCollectionOffer.ts

@@ -105,7 +105,8 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
         id: offerId,
         autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
         manualThroughput: undefined,
-        minimumThroughput
+        minimumThroughput,
+        offerReplacePending: resource.offerReplacePending === "true"
       };
     }
 
@@ -113,7 +114,8 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
       id: offerId,
       autoscaleMaxThroughput: undefined,
       manualThroughput: resource.throughput,
-      minimumThroughput
+      minimumThroughput,
+      offerReplacePending: resource.offerReplacePending === "true"
     };
   }
 

src/Common/dataAccess/readCollectionQuotaInfo.ts

@@ -1,45 +0,0 @@
-import * as DataModels from "../../Contracts/DataModels";
-import * as HeadersUtility from "../HeadersUtility";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { ContainerDefinition, Resource } from "@azure/cosmos";
-import { HttpHeaders } from "../Constants";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-
-interface ResourceWithStatistics {
-  statistics: DataModels.Statistic[];
-}
-
-export const readCollectionQuotaInfo = async (
-  collection: ViewModels.Collection
-): Promise<DataModels.CollectionQuotaInfo> => {
-  const clearMessage = logConsoleProgress(`Querying containers for database ${collection.id}`);
-  const options: RequestOptions = {};
-  options.populateQuotaInfo = true;
-  options.initialHeaders = options.initialHeaders || {};
-  options.initialHeaders[HttpHeaders.populatePartitionStatistics] = true;
-
-  try {
-    const response = await client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .read(options);
-    const quota: DataModels.CollectionQuotaInfo = HeadersUtility.getQuota(response.headers);
-    const resource = response.resource as ContainerDefinition & Resource & ResourceWithStatistics;
-    quota["usageSizeInKB"] = resource.statistics.reduce(
-      (previousValue: number, currentValue: DataModels.Statistic) => previousValue + currentValue.sizeInKB,
-      0
-    );
-    quota["numPartitions"] = resource.statistics.length;
-    quota["uniqueKeyPolicy"] = collection.uniqueKeyPolicy; // TODO: Remove after refactoring (#119617)
-
-    return quota;
-  } catch (error) {
-    handleError(error, "ReadCollectionQuotaInfo", `Error while querying quota info for container ${collection.id}`);
-    throw error;
-  } finally {
-    clearMessage();
-  }
-};

src/Common/dataAccess/readDatabaseOffer.ts

@@ -77,7 +77,8 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
         id: offerId,
         autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
         manualThroughput: undefined,
-        minimumThroughput
+        minimumThroughput,
+        offerReplacePending: resource.offerReplacePending === "true"
       };
     }
 
@@ -85,7 +86,8 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
       id: offerId,
       autoscaleMaxThroughput: undefined,
       manualThroughput: resource.throughput,
-      minimumThroughput
+      minimumThroughput,
+      offerReplacePending: resource.offerReplacePending === "true"
     };
   }
 

src/Common/dataAccess/readDocument.ts

@@ -0,0 +1,27 @@
+import { Item } from "@azure/cosmos";
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+
+export const readDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<Item> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Reading ${entityName} ${documentId.id()}`);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), documentId.partitionKeyValue)
+      .read();
+
+    return response?.resource;
+  } catch (error) {
+    handleError(error, "ReadDocument", `Failed to read ${entityName} ${documentId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/updateDocument.ts

@@ -0,0 +1,32 @@
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { Item } from "@azure/cosmos";
+import { client } from "../CosmosClient";
+import { getEntityName } from "../DocumentUtility";
+import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+
+export const updateDocument = async (
+  collection: CollectionBase,
+  documentId: DocumentId,
+  newDocument: Item
+): Promise<Item> => {
+  const entityName = getEntityName();
+  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .item(documentId.id(), documentId.partitionKeyValue)
+      .replace(newDocument);
+
+    logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
+    return response?.resource;
+  } catch (error) {
+    handleError(error, "UpdateDocument", `Failed to update ${entityName} ${documentId.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Contracts/DataModels.ts

@@ -214,7 +214,7 @@ export interface Offer {
   manualThroughput: number;
   minimumThroughput: number;
   offerDefinition?: SDKOfferDefinition;
-  headers?: any;
+  offerReplacePending: boolean;
 }
 
 export interface SDKOfferDefinition extends Resource {
@@ -230,18 +230,6 @@ export interface SDKOfferDefinition extends Resource {
   offerResourceId?: string;
 }
 
-export interface CollectionQuotaInfo {
-  storedProcedures: number;
-  triggers: number;
-  functions: number;
-  documentsSize: number;
-  collectionSize: number;
-  documentsCount: number;
-  usageSizeInKB: number;
-  numPartitions: number;
-  uniqueKeyPolicy?: UniqueKeyPolicy; // TODO: This should ideally not be a part of the collection quota. Remove after refactoring. (#119617)
-}
-
 export interface OfferThroughputInfo {
   minimumRUForCollection: number;
   numPhysicalPartitions: number;
@@ -260,7 +248,6 @@ export interface CreateDatabaseAndCollectionRequest {
   collectionId: string;
   offerThroughput: number;
   databaseLevelThroughput: boolean;
-  rupmEnabled?: boolean;
   partitionKey?: PartitionKey;
   indexingPolicy?: IndexingPolicy;
   uniqueKeyPolicy?: UniqueKeyPolicy;

src/Contracts/ViewModels.ts

@@ -120,7 +120,7 @@ export interface Collection extends CollectionBase {
   requestSchema?: () => void;
   indexingPolicy: ko.Observable<DataModels.IndexingPolicy>;
   uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
-  quotaInfo: ko.Observable<DataModels.CollectionQuotaInfo>;
+  usageSizeInKB: ko.Observable<number>;
   offer: ko.Observable<DataModels.Offer>;
   conflictResolutionPolicy: ko.Observable<DataModels.ConflictResolutionPolicy>;
   changeFeedPolicy: ko.Observable<DataModels.ChangeFeedPolicy>;
@@ -362,7 +362,7 @@ export enum CollectionTabKind {
   Gallery = 17,
   NotebookViewer = 18,
   Schema = 19,
-  SettingsV2 = 19
+  SettingsV2 = 20
 }
 
 export enum TerminalKind {

src/Definitions/adal.d.ts

@@ -1,383 +0,0 @@
-// Type definitions for adal-angular 1.0.1.1
-// Project: https://github.com/AzureAD/azure-activedirectory-library-for-js#readme
-// Definitions by: Daniel Perez Alvarez <https://github.com/unindented>
-//                 Anthony Ciccarello <https://github.com/aciccarello>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-//This is a customized version of adal on top of version 1.0.1 which does not support multi tenant
-// Customized version add tenantId to stored tokens so when tenant change, adal will refetch instead of read from sessionStorage
-
-// In module contexts the class constructor function is the exported object
-// export = AuthenticationContext;
-
-// This class is defined globally in not in a module context
-declare class AuthenticationContext {
-  instance: string;
-  config: AuthenticationContext.Options;
-  callback: AuthenticationContext.TokenCallback;
-  popUp: boolean;
-  isAngular: boolean;
-
-  /**
-   * Enum for request type
-   */
-  REQUEST_TYPE: AuthenticationContext.RequestType;
-  RESPONSE_TYPE: AuthenticationContext.ResponseType;
-  CONSTANTS: AuthenticationContext.Constants;
-
-  constructor(options: AuthenticationContext.Options);
-  /**
-   * Initiates the login process by redirecting the user to Azure AD authorization endpoint.
-   */
-  login(): void;
-  /**
-   * Returns whether a login is in progress.
-   */
-  loginInProgress(): boolean;
-  /**
-   * Gets token for the specified resource from the cache.
-   * @param resource A URI that identifies the resource for which the token is requested.
-   * @param tenantId tenant Id.
-   */
-  getCachedToken(resource: string, tenantId: string): string;
-  /**
-   * If user object exists, returns it. Else creates a new user object by decoding `id_token` from the cache.
-   */
-  getCachedUser(): AuthenticationContext.UserInfo;
-  /**
-   * Adds the passed callback to the array of callbacks for the specified resource.
-   * @param resource A URI that identifies the resource for which the token is requested.
-   * @param expectedState A unique identifier (guid).
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  registerCallback(
-    expectedState: string,
-    resource: string,
-    callback: AuthenticationContext.TokenCallback,
-    tenantId: string
-  ): void;
-  /**
-   * Acquires token from the cache if it is not expired. Otherwise sends request to AAD to obtain a new token.
-   * @param resource Resource URI identifying the target resource.
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  acquireToken(resource: string, tenantId: string, callback: AuthenticationContext.TokenCallback): void;
-  /**
-   * Acquires token (interactive flow using a popup window) by sending request to AAD to obtain a new token.
-   * @param resource Resource URI identifying the target resource.
-   * @param extraQueryParameters Query parameters to add to the authentication request.
-   * @param claims Claims to add to the authentication request.
-   * @param callback The callback provided by the caller. It will be called with token or error.
-   */
-  acquireTokenPopup(
-    resource: string,
-    tenantId: string,
-    extraQueryParameters: string | null | undefined,
-    claims: string | null | undefined,
-    callback: AuthenticationContext.TokenCallback
-  ): void;
-  /**
-   * Acquires token (interactive flow using a redirect) by sending request to AAD to obtain a new token. In this case the callback passed in the authentication request constructor will be called.
-   * @param resource Resource URI identifying the target resource.
-   * @param extraQueryParameters Query parameters to add to the authentication request.
-   * @param claims Claims to add to the authentication request.
-   */
-  acquireTokenRedirect(
-    resource: string,
-    tenantId: string,
-    extraQueryParameters?: string | null,
-    claims?: string | null
-  ): void;
-  /**
-   * Redirects the browser to Azure AD authorization endpoint.
-   * @param urlNavigate URL of the authorization endpoint.
-   */
-  promptUser(urlNavigate: string): void;
-  /**
-   * Clears cache items.
-   */
-  clearCache(): void;
-  /**
-   * Clears cache items for a given resource.
-   * @param resource Resource URI identifying the target resource.
-   */
-  clearCacheForResource(resource: string): void;
-  /**
-   * Redirects user to logout endpoint. After logout, it will redirect to `postLogoutRedirectUri` if added as a property on the config object.
-   */
-  logOut(): void;
-  /**
-   * Calls the passed in callback with the user object or error message related to the user.
-   * @param callback The callback provided by the caller. It will be called with user or error.
-   */
-  getUser(callback: AuthenticationContext.UserCallback): void;
-  /**
-   * Checks if the URL fragment contains access token, id token or error description.
-   * @param hash Hash passed from redirect page.
-   */
-  isCallback(hash: string): boolean;
-  /**
-   * Gets login error.
-   */
-  getLoginError(): string;
-  /**
-   * Creates a request info object from the URL fragment and returns it.
-   */
-  getRequestInfo(hash: string): AuthenticationContext.RequestInfo;
-  /**
-   * Saves token or error received in the response from AAD in the cache. In case of `id_token`, it also creates the user object.
-   */
-  saveTokenFromHash(requestInfo: AuthenticationContext.RequestInfo): void;
-  /**
-   * Gets resource for given endpoint if mapping is provided with config.
-   * @param endpoint Resource URI identifying the target resource.
-   */
-  getResourceForEndpoint(resource: string): string;
-  /**
-   * This method must be called for processing the response received from AAD. It extracts the hash, processes the token or error, saves it in the cache and calls the callbacks with the result.
-   * @param hash Hash fragment of URL. Defaults to `window.location.hash`.
-   */
-  handleWindowCallback(hash?: string): void;
-
-  /**
-   * Checks the logging Level, constructs the log message and logs it. Users need to implement/override this method to turn on logging.
-   * @param level Level can be set 0, 1, 2 and 3 which turns on 'error', 'warning', 'info' or 'verbose' level logging respectively.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  log(level: AuthenticationContext.LoggingLevel, message: string, error: any): void;
-  /**
-   * Logs messages when logging level is set to 0.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  error(message: string, error: any): void;
-  /**
-   * Logs messages when logging level is set to 1.
-   * @param message Message to log.
-   */
-  warn(message: string): void;
-  /**
-   * Logs messages when logging level is set to 2.
-   * @param message Message to log.
-   */
-  info(message: string): void;
-  /**
-   * Logs messages when logging level is set to 3.
-   * @param message Message to log.
-   */
-  verbose(message: string): void;
-
-  /**
-   * Logs Pii messages when Logging Level is set to 0 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   * @param error Error to log.
-   */
-  errorPii(message: string, error: any): void;
-
-  /**
-   * Logs  Pii messages when Logging Level is set to 1 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  warnPii(message: string): void;
-
-  /**
-   * Logs messages when Logging Level is set to 2 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  infoPii(message: string): void;
-
-  /**
-   * Logs messages when Logging Level is set to 3 and window.piiLoggingEnabled is set to true.
-   * @param message Message to log.
-   */
-  verbosePii(message: string): void;
-}
-
-declare namespace AuthenticationContext {
-  function inject(config: Options): AuthenticationContext;
-
-  type LoggingLevel = 0 | 1 | 2 | 3;
-
-  type RequestType = "LOGIN" | "RENEW_TOKEN" | "UNKNOWN";
-
-  type ResponseType = "id_token token" | "token";
-
-  interface RequestInfo {
-    /**
-     * Object comprising of fields such as id_token/error, session_state, state, e.t.c.
-     */
-    parameters: any;
-    /**
-     * Request type.
-     */
-    requestType: RequestType;
-    /**
-     * Whether state is valid.
-     */
-    stateMatch: boolean;
-    /**
-     * Unique guid used to match the response with the request.
-     */
-    stateResponse: string;
-    /**
-     * Whether `requestType` contains `id_token`, `access_token` or error.
-     */
-    valid: boolean;
-  }
-
-  interface UserInfo {
-    /**
-     * Username assigned from UPN or email.
-     */
-    userName: string;
-    /**
-     * Properties parsed from `id_token`.
-     */
-    profile: any;
-  }
-
-  type TokenCallback = (errorDesc: string | null, token: string | null, error: any) => void;
-
-  type UserCallback = (errorDesc: string | null, user: UserInfo | null) => void;
-
-  /**
-   * Configuration options for Authentication Context
-   */
-  interface Options {
-    /**
-     * Client ID assigned to your app by Azure Active Directory.
-     */
-    clientId: string;
-    /**
-     * Endpoint at which you expect to receive tokens.Defaults to `window.location.href`.
-     */
-    redirectUri?: string;
-    /**
-     * Azure Active Directory instance. Defaults to `https://login.microsoftonline.com/`.
-     */
-    instance?: string;
-    /**
-     * Your target tenant. Defaults to `common`.
-     */
-    tenant?: string;
-    /**
-     * Query parameters to add to the authentication request.
-     */
-    extraQueryParameter?: string;
-    /**
-     * Unique identifier used to map the request with the response. Defaults to RFC4122 version 4 guid (128 bits).
-     */
-    correlationId?: string;
-    /**
-     * User defined function of handling the navigation to Azure AD authorization endpoint in case of login.
-     */
-    displayCall?: (url: string) => void;
-    /**
-     * Set this to true to enable login in a popup winodow instead of a full redirect. Defaults to `false`.
-     */
-    popUp?: boolean;
-    /**
-     * Set this to the resource to request on login. Defaults to `clientId`.
-     */
-    loginResource?: string;
-    /**
-     * Set this to redirect the user to a custom login page.
-     */
-    localLoginUrl?: string;
-    /**
-     * Redirects to start page after login. Defaults to `true`.
-     */
-    navigateToLoginRequestUrl?: boolean;
-    /**
-     * Set this to redirect the user to a custom logout page.
-     */
-    logOutUri?: string;
-    /**
-     * Redirects the user to postLogoutRedirectUri after logout. Defaults to `redirectUri`.
-     */
-    postLogoutRedirectUri?: string;
-    /**
-     * Sets browser storage to either 'localStorage' or sessionStorage'. Defaults to `sessionStorage`.
-     */
-    cacheLocation?: "localStorage" | "sessionStorage";
-    /**
-     * Array of keywords or URIs. Adal will attach a token to outgoing requests that have these keywords or URIs.
-     */
-    endpoints?: { [resource: string]: string };
-    /**
-     * Array of keywords or URIs. Adal will not attach a token to outgoing requests that have these keywords or URIs.
-     */
-    anonymousEndpoints?: string[];
-    /**
-     * If the cached token is about to be expired in the expireOffsetSeconds (in seconds), Adal will renew the token instead of using the cached token. Defaults to 300 seconds.
-     */
-    expireOffsetSeconds?: number;
-    /**
-     * The number of milliseconds of inactivity before a token renewal response from AAD should be considered timed out. Defaults to 6 seconds.
-     */
-    loadFrameTimeout?: number;
-    /**
-     * Callback to be invoked when a token is acquired.
-     */
-    callback?: TokenCallback;
-  }
-
-  interface LoggingConfig {
-    level: LoggingLevel;
-    log: (message: string) => void;
-    piiLoggingEnabled: boolean;
-  }
-
-  /**
-   * Enum for storage constants
-   */
-  interface Constants {
-    ACCESS_TOKEN: "access_token";
-    EXPIRES_IN: "expires_in";
-    ID_TOKEN: "id_token";
-    ERROR_DESCRIPTION: "error_description";
-    SESSION_STATE: "session_state";
-    STORAGE: {
-      TOKEN_KEYS: "adal.token.keys";
-      ACCESS_TOKEN_KEY: "adal.access.token.key";
-      EXPIRATION_KEY: "adal.expiration.key";
-      STATE_LOGIN: "adal.state.login";
-      STATE_RENEW: "adal.state.renew";
-      NONCE_IDTOKEN: "adal.nonce.idtoken";
-      SESSION_STATE: "adal.session.state";
-      USERNAME: "adal.username";
-      IDTOKEN: "adal.idtoken";
-      ERROR: "adal.error";
-      ERROR_DESCRIPTION: "adal.error.description";
-      LOGIN_REQUEST: "adal.login.request";
-      LOGIN_ERROR: "adal.login.error";
-      RENEW_STATUS: "adal.token.renew.status";
-    };
-    RESOURCE_DELIMETER: "|";
-    LOADFRAME_TIMEOUT: "6000";
-    TOKEN_RENEW_STATUS_CANCELED: "Canceled";
-    TOKEN_RENEW_STATUS_COMPLETED: "Completed";
-    TOKEN_RENEW_STATUS_IN_PROGRESS: "In Progress";
-    LOGGING_LEVEL: {
-      ERROR: 0;
-      WARN: 1;
-      INFO: 2;
-      VERBOSE: 3;
-    };
-    LEVEL_STRING_MAP: {
-      0: "ERROR:";
-      1: "WARNING:";
-      2: "INFO:";
-      3: "VERBOSE:";
-    };
-    POPUP_WIDTH: 483;
-    POPUP_HEIGHT: 600;
-  }
-}
-
-// declare global {
-//     interface Window {
-//         Logging: AuthenticationContext.LoggingConfig;
-//     }
-// }

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -38,7 +38,7 @@ export interface CommandButtonComponentProps {
   /**
    * Label for the button
    */
-  commandButtonLabel: string;
+  commandButtonLabel?: string;
 
   /**
    * True if this button opens a tab or pane, false otherwise.

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -44,12 +44,10 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
     onChange?: (_?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
   }[] = [
     { key: "feature.enablechangefeedpolicy", label: "Enable change feed policy", value: "true" },
-    { key: "feature.enablerupm", label: "Enable RUPM", value: "true" },
     { key: "feature.dataexplorerexecutesproc", label: "Execute stored procedure", value: "true" },
     { key: "feature.hosteddataexplorerenabled", label: "Hosted Data Explorer (deprecated?)", value: "true" },
     { key: "feature.enablettl", label: "Enable TTL", value: "true" },
     { key: "feature.enablegallerypublish", label: "Enable Notebook Gallery Publishing", value: "true" },
-    { key: "feature.enablecodeofconduct", label: "Enable Code Of Conduct Acknowledgement", value: "true" },
     {
       key: "feature.enableLinkInjection",
       label: "Enable Injecting Notebook Viewer Link into the first cell",

src/Explorer/Controls/FeaturePanel/__snapshots__/FeaturePanelComponent.test.tsx.snap

@@ -131,12 +131,6 @@ exports[`Feature panel renders all flags 1`] = `
           label="Enable change feed policy"
           onChange={[Function]}
         />
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.enablerupm"
-          label="Enable RUPM"
-          onChange={[Function]}
-        />
         <StyledCheckboxBase
           checked={false}
           key="feature.dataexplorerexecutesproc"
@@ -163,14 +157,14 @@ exports[`Feature panel renders all flags 1`] = `
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.enablecodeofconduct"
-          label="Enable Code Of Conduct Acknowledgement"
+          key="feature.enableLinkInjection"
+          label="Enable Injecting Notebook Viewer Link into the first cell"
           onChange={[Function]}
         />
         <StyledCheckboxBase
           checked={false}
-          key="feature.enableLinkInjection"
-          label="Enable Injecting Notebook Viewer Link into the first cell"
+          key="feature.canexceedmaximumvalue"
+          label="Can exceed max value"
           onChange={[Function]}
         />
       </Stack>
@@ -178,12 +172,6 @@ exports[`Feature panel renders all flags 1`] = `
         className="checkboxRow"
         horizontalAlign="space-between"
       >
-        <StyledCheckboxBase
-          checked={false}
-          key="feature.canexceedmaximumvalue"
-          label="Can exceed max value"
-          onChange={[Function]}
-        />
         <StyledCheckboxBase
           checked={false}
           key="feature.enablefixedcollectionwithsharedthroughput"

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -1,6 +1,7 @@
 import {
   Dropdown,
   FocusZone,
+  FontIcon,
   FontWeights,
   IDropdownOption,
   IPageSpecification,
@@ -16,7 +17,7 @@ import {
   Text
 } from "office-ui-fabric-react";
 import * as React from "react";
-import { IGalleryItem, JunoClient, IJunoResponse, IPublicGalleryData } from "../../../Juno/JunoClient";
+import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
@@ -136,7 +137,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   public render(): JSX.Element {
-    const tabs: GalleryTabInfo[] = [this.createTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
+    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
 
     if (this.props.container?.isGalleryPublishEnabled()) {
       tabs.push(
@@ -146,7 +147,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           this.state.isCodeOfConductAccepted
         )
       );
-      tabs.push(this.createTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+      tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
 
       // explicitly checking if isCodeOfConductAccepted is not false, as it is initially undefined.
       // Displaying code of conduct component on gallery load should not be the default behavior.
@@ -183,6 +184,27 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   }
 
+  private isEmptyData = (data: IGalleryItem[]): boolean => {
+    return !data || data.length === 0;
+  };
+
+  private createEmptyTabContent = (iconName: string, line1: string, line2: string): JSX.Element => {
+    return (
+      <Stack horizontalAlign="center" tokens={{ childrenGap: 10 }}>
+        <FontIcon iconName={iconName} style={{ fontSize: 100, color: "lightgray", marginTop: 20 }} />
+        <Text styles={{ root: { fontWeight: FontWeights.semibold } }}>{line1}</Text>
+        <Text>{line2}</Text>
+      </Stack>
+    );
+  };
+
+  private createSamplesTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
+    return {
+      tab,
+      content: this.createSearchBarHeader(this.createCardsTabContent(data))
+    };
+  };
+
   private createPublicGalleryTab(
     tab: GalleryTab,
     data: IGalleryItem[],
@@ -194,17 +216,29 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     };
   }
 
-  private createTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
+  private createFavoritesTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
-      content: this.createSearchBarHeader(this.createCardsTabContent(data))
+      content: this.isEmptyData(data)
+        ? this.createEmptyTabContent(
+            "ContactHeart",
+            "You have not liked anything",
+            "Like any notebook from Official Samples or Public gallery"
+          )
+        : this.createSearchBarHeader(this.createCardsTabContent(data))
     };
   }
 
   private createPublishedNotebooksTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
     return {
       tab,
-      content: this.createPublishedNotebooksTabContent(data)
+      content: this.isEmptyData(data)
+        ? this.createEmptyTabContent(
+            "Contact",
+            "You have not published anything",
+            "Publish your sample notebooks to share your published work with others"
+          )
+        : this.createPublishedNotebooksTabContent(data)
     };
   };
 
@@ -364,9 +398,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadPublicNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
-        let response: IJunoResponse<IPublicGalleryData> | IJunoResponse<IGalleryItem[]>;
-        if (this.props.container.isCodeOfConductEnabled()) {
-          response = await this.props.junoClient.fetchPublicNotebooks();
+        let response: IJunoResponse<IGalleryItem[]> | IJunoResponse<IPublicGalleryData>;
+        if (this.props.container) {
+          response = await this.props.junoClient.getPublicGalleryData();
           this.isCodeOfConductAccepted = response.data?.metadata.acceptedCodeOfConduct;
           this.publicNotebooks = response.data?.notebooksData;
         } else {
@@ -568,7 +602,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private deleteItem = async (data: IGalleryItem): Promise<void> => {
     GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, item => {
-      this.publishedNotebooks = this.publishedNotebooks.filter(notebook => item.id !== notebook.id);
+      this.publishedNotebooks = this.publishedNotebooks?.filter(notebook => item.id !== notebook.id);
       this.refreshSelectedTab(item);
     });
   };

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -92,7 +92,8 @@ describe("SettingsComponent", () => {
       autoscaleMaxThroughput: 10000,
       manualThroughput: undefined,
       minimumThroughput: 400,
-      id: "test"
+      id: "test",
+      offerReplacePending: false
     });
 
     const props = { ...baseProps };

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -295,7 +295,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     !!this.collection.conflictResolutionPolicy();
 
   public isOfferReplacePending = (): boolean => {
-    return !!this.collection?.offer()?.headers?.[Constants.HttpHeaders.offerReplacePending];
+    return this.collection?.offer()?.offerReplacePending;
   };
 
   public onSaveClick = async (): Promise<void> => {

src/Explorer/Controls/Settings/SettingsRenderUtils.test.tsx

@@ -1,9 +1,9 @@
 import { shallow } from "enzyme";
 import React from "react";
+import { IColumn, Text } from "office-ui-fabric-react";
 import {
   getAutoPilotV3SpendElement,
-  getEstimatedSpendElement,
-  getEstimatedAutoscaleSpendElement,
+  getEstimatedSpendingElement,
   manualToAutoscaleDisclaimerElement,
   ttlWarning,
   indexingPolicynUnsavedWarningMessage,
@@ -19,11 +19,37 @@ import {
   mongoIndexingPolicyDisclaimer,
   mongoIndexingPolicyAADError,
   mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage
+  renderMongoIndexTransformationRefreshMessage,
+  ManualEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown
 } from "./SettingsRenderUtils";
 
 class SettingsRenderUtilsTestComponent extends React.Component {
   public render(): JSX.Element {
+    const estimatedSpendingColumns: IColumn[] = [
+      { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "daily", name: "Daily", fieldName: "daily", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "monthly", name: "Monthly", fieldName: "monthly", minWidth: 100, maxWidth: 200, isResizable: true }
+    ];
+    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        hourly: <Text>$ 1.02</Text>,
+        daily: <Text>$ 24.48</Text>,
+        monthly: <Text>$ 744.6</Text>
+      }
+    ];
+    const priceBreakdown: PriceBreakdown = {
+      hourlyPrice: 1.02,
+      dailyPrice: 24.48,
+      monthlyPrice: 744.6,
+      pricePerRu: 0.00051,
+      currency: "RMB",
+      currencySign: "¥"
+    };
+
     return (
       <>
         {getAutoPilotV3SpendElement(1000, false)}
@@ -31,9 +57,7 @@ class SettingsRenderUtilsTestComponent extends React.Component {
         {getAutoPilotV3SpendElement(1000, true)}
         {getAutoPilotV3SpendElement(undefined, true)}
 
-        {getEstimatedSpendElement(1000, "mooncake", 2, false, true)}
-
-        {getEstimatedAutoscaleSpendElement(1000, "mooncake", 2, false)}
+        {getEstimatedSpendingElement(estimatedSpendingColumns, estimatedSpendingItems, 1000, 2, priceBreakdown, false)}
 
         {manualToAutoscaleDisclaimerElement}
         {ttlWarning}
@@ -69,4 +93,14 @@ describe("SettingsUtils functions", () => {
     const wrapper = shallow(<SettingsRenderUtilsTestComponent />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("should return correct price breakdown for a manual RU setting of 500, 1 region, multimaster disabled", () => {
+    const prices = getRuPriceBreakdown(500, "", 1, false, false);
+    expect(prices.hourlyPrice).toBe(0.04);
+    expect(prices.dailyPrice).toBe(0.96);
+    expect(prices.monthlyPrice).toBe(29.2);
+    expect(prices.pricePerRu).toBe(0.00008);
+    expect(prices.currency).toBe("USD");
+    expect(prices.currencySign).toBe("$");
+  });
 });

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -3,14 +3,13 @@ import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
 import { Urls, StyleConstants } from "../../../Common/Constants";
 import {
-  computeAutoscaleUsagePriceHourly,
   getPriceCurrency,
   getCurrencySign,
   getAutoscalePricePerRu,
   getMultimasterMultiplier,
   computeRUUsagePriceHourly,
   getPricePerRu,
-  calculateEstimateNumber
+  estimatedCostDisclaimer
 } from "../../../Utils/PricingUtils";
 import {
   ITextFieldStyles,
@@ -32,10 +31,41 @@ import {
   MessageBarType,
   Stack,
   Spinner,
-  SpinnerSize
+  SpinnerSize,
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  DetailsListLayoutMode,
+  IDetailsRowProps,
+  DetailsRow,
+  IDetailsColumnStyles
 } from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
+export interface EstimatedSpendingDisplayProps {
+  costType: JSX.Element;
+}
+
+export interface ManualEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
+  hourly: JSX.Element;
+  daily: JSX.Element;
+  monthly: JSX.Element;
+}
+
+export interface AutoscaleEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
+  minPerMonth: JSX.Element;
+  maxPerMonth: JSX.Element;
+}
+
+export interface PriceBreakdown {
+  hourlyPrice: number;
+  dailyPrice: number;
+  monthlyPrice: number;
+  pricePerRu: number;
+  currency: string;
+  currencySign: string;
+}
+
 export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
@@ -104,6 +134,16 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
   }
 };
 
+export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
+  root: {
+    selectors: {
+      ":hover": {
+        background: "transparent"
+      }
+    }
+  }
+};
+
 export const customDetailsListStyles: Partial<IDetailsListStyles> = {
   root: {
     selectors: {
@@ -130,6 +170,10 @@ export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop:
 
 export const throughputUnit = "RU/s";
 
+export function onRenderRow(props: IDetailsRowProps): JSX.Element {
+  return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
+}
+
 export const getAutoPilotV3SpendElement = (
   maxAutoPilotThroughputSet: number,
   isDatabaseThroughput: boolean,
@@ -165,64 +209,61 @@ export const getAutoPilotV3SpendElement = (
   );
 };
 
-export const getEstimatedAutoscaleSpendElement = (
+export const getRuPriceBreakdown = (
   throughput: number,
   serverId: string,
-  regions: number,
-  multimaster: boolean
-): JSX.Element => {
-  const hourlyPrice: number = computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster);
-  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
-  const currency: string = getPriceCurrency(serverId);
-  const currencySign: string = getCurrencySign(serverId);
-  const pricePerRu =
-    getAutoscalePricePerRu(serverId, getMultimasterMultiplier(regions, multimaster)) *
-    getMultimasterMultiplier(regions, multimaster);
-
-  return (
-    <Text id="autoscaleSpendElement">
-      Estimated monthly cost ({currency}) is{" "}
-      <b>
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice / 10)}
-        {` - `}
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice)}{" "}
-      </b>
-      ({"regions: "} {regions}, {throughput / 10} - {throughput} RU/s, {currencySign}
-      {pricePerRu}/RU)
-    </Text>
-  );
+  numberOfRegions: number,
+  isMultimaster: boolean,
+  isAutoscale: boolean
+): PriceBreakdown => {
+  const hourlyPrice: number = computeRUUsagePriceHourly({
+    serverId: serverId,
+    requestUnits: throughput,
+    numberOfRegions: numberOfRegions,
+    multimasterEnabled: isMultimaster,
+    isAutoscale: isAutoscale
+  });
+  const basePricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+    : getPricePerRu(serverId);
+  return {
+    hourlyPrice: hourlyPrice,
+    dailyPrice: hourlyPrice * 24,
+    monthlyPrice: hourlyPrice * hoursInAMonth,
+    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
+    currency: getPriceCurrency(serverId),
+    currencySign: getCurrencySign(serverId)
+  };
 };
 
-export const getEstimatedSpendElement = (
+export const getEstimatedSpendingElement = (
+  estimatedSpendingColumns: IColumn[],
+  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
   throughput: number,
-  serverId: string,
-  regions: number,
-  multimaster: boolean,
-  rupmEnabled: boolean
+  numberOfRegions: number,
+  priceBreakdown: PriceBreakdown,
+  isAutoscale: boolean
 ): JSX.Element => {
-  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, rupmEnabled, throughput, regions, multimaster);
-  const dailyPrice: number = hourlyPrice * 24;
-  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
-  const currency: string = getPriceCurrency(serverId);
-  const currencySign: string = getCurrencySign(serverId);
-  const pricePerRu = getPricePerRu(serverId) * getMultimasterMultiplier(regions, multimaster);
-
+  const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
-    <Text id="throughputSpendElement">
-      Estimated cost ({currency}):{" "}
-      <b>
-        {currencySign}
-        {calculateEstimateNumber(hourlyPrice)} hourly {` / `}
-        {currencySign}
-        {calculateEstimateNumber(dailyPrice)} daily {` / `}
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice)} monthly{" "}
-      </b>
-      ({"regions: "} {regions}, {throughput}RU/s, {currencySign}
-      {pricePerRu}/RU)
-    </Text>
+    <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
+      <DetailsList
+        disableSelectionZone
+        items={estimatedSpendingItems}
+        columns={estimatedSpendingColumns}
+        selectionMode={SelectionMode.none}
+        layoutMode={DetailsListLayoutMode.justified}
+        onRenderRow={onRenderRow}
+      />
+      <Text id="throughputSpendElement">
+        ({"regions: "} {numberOfRegions}, {ruRange}
+        {throughput} RU/s, {priceBreakdown.currencySign}
+        {priceBreakdown.pricePerRu}/RU)
+      </Text>
+      <Text>
+        <em>{estimatedCostDisclaimer}</em>
+      </Text>
+    </Stack>
   );
 };
 
@@ -266,6 +307,13 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
   </Text>
 );
 
+export const saveThroughputWarningMessage: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
+    before saving your changes
+  </Text>
+);
+
 const getCurrentThroughput = (
   isAutoscale: boolean,
   throughput: number,

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -6,8 +6,6 @@ import {
   IconButton,
   Text,
   SelectionMode,
-  IDetailsRowProps,
-  DetailsRow,
   IColumn,
   MessageBar,
   MessageBarType,
@@ -21,11 +19,11 @@ import {
   mongoIndexingPolicyDisclaimer,
   mediumWidthStackStyles,
   subComponentStackProps,
-  transparentDetailsRowStyles,
   createAndAddMongoIndexStackProps,
   separatorStyles,
   indexingPolicynUnsavedWarningMessage,
-  infoAndToolTipTextStyle
+  infoAndToolTipTextStyle,
+  onRenderRow
 } from "../../SettingsRenderUtils";
 import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
@@ -140,10 +138,6 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     return undefined;
   };
 
-  private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
-    return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
-  };
-
   private getActionButton = (arrayPosition: number, isCurrentIndex: boolean): JSX.Element => {
     return isCurrentIndex ? (
       <IconButton
@@ -253,7 +247,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
                 items={initialIndexes}
                 columns={this.initialIndexesColumns}
                 selectionMode={SelectionMode.none}
-                onRenderRow={this.onRenderRow}
+                onRenderRow={onRenderRow}
                 layoutMode={DetailsListLayoutMode.justified}
               />
               {this.renderIndexesToBeAdded()}
@@ -279,7 +273,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
               items={indexesToBeDropped}
               columns={this.indexesToBeDroppedColumns}
               selectionMode={SelectionMode.none}
-              onRenderRow={this.onRenderRow}
+              onRenderRow={onRenderRow}
               layoutMode={DetailsListLayoutMode.justified}
             />
           )}

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx

@@ -59,7 +59,7 @@ describe("ScaleComponent", () => {
       autoscaleMaxThroughput: maxThroughput,
       minimumThroughput: 400,
       id: "offer",
-      headers: { "x-ms-offer-replace-pending": true }
+      offerReplacePending: true
     });
     const newProps = {
       ...baseProps,

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -116,7 +116,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     }
 
     const offer = this.props.collection?.offer();
-    if (offer?.headers?.[Constants.HttpHeaders.offerReplacePending]) {
+    if (offer?.offerReplacePending) {
       const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
       return getThroughputApplyShortDelayMessage(
         this.props.isAutoPilotSelected,
@@ -186,7 +186,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       onScaleSaveableChange={this.props.onScaleSaveableChange}
       onScaleDiscardableChange={this.props.onScaleDiscardableChange}
       getThroughputWarningMessage={this.getThroughputWarningMessage}
-      usageSizeInKB={this.props.collection.quotaInfo().usageSizeInKB}
+      usageSizeInKB={this.props.collection.usageSizeInKB()}
     />
   );
 

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx

@@ -54,7 +54,6 @@ describe("ThroughputInputAutoPilotV3Component", () => {
     expect(wrapper.exists("#throughputInput")).toEqual(true);
     expect(wrapper.exists("#autopilotInput")).toEqual(false);
     expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
-    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(false);
   });
 
   it("autopilot input visible", () => {
@@ -72,8 +71,7 @@ describe("ThroughputInputAutoPilotV3Component", () => {
 
     wrapper.setProps({ wasAutopilotOriginallySet: true });
     wrapper.update();
-    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(true);
-    expect(wrapper.exists("#throughputSpendElement")).toEqual(false);
+    expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
   });
 
   it("spendAck checkbox visible", () => {

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -8,10 +8,15 @@ import {
   checkBoxAndInputStackProps,
   getChoiceGroupStyles,
   messageBarStyles,
-  getEstimatedSpendElement,
-  getEstimatedAutoscaleSpendElement,
+  getEstimatedSpendingElement,
   getAutoPilotV3SpendElement,
-  manualToAutoscaleDisclaimerElement
+  manualToAutoscaleDisclaimerElement,
+  saveThroughputWarningMessage,
+  ManualEstimatedSpendingDisplayProps,
+  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
+  transparentDetailsHeaderStyle
 } from "../../SettingsRenderUtils";
 import {
   Text,
@@ -23,7 +28,9 @@ import {
   Label,
   Link,
   MessageBar,
-  MessageBarType
+  MessageBarType,
+  FontIcon,
+  IColumn
 } from "office-ui-fabric-react";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
@@ -32,7 +39,7 @@ import * as DataModels from "../../../../../Contracts/DataModels";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import { userContext } from "../../../../../UserContext";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import { usageInGB } from "../../../../../Utils/PricingUtils";
+import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
 import { Features } from "../../../../../Common/Constants";
 
 export interface ThroughputInputAutoPilotV3Props {
@@ -165,34 +172,243 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return <></>;
     }
 
+    const isDirty: boolean = this.IsComponentDirty().isDiscardable;
     const serverId: string = this.props.serverId;
-    const offerThroughput: number = this.props.throughput;
-
     const regions = account?.properties?.readLocations?.length || 1;
     const multimaster = account?.properties?.enableMultipleWriteLocations || false;
 
     let estimatedSpend: JSX.Element;
 
     if (!this.props.isAutoPilotSelected) {
-      estimatedSpend = getEstimatedSpendElement(
+      estimatedSpend = this.getEstimatedManualSpendElement(
         // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
-        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : offerThroughput,
+        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
         serverId,
         regions,
         multimaster,
-        false
+        isDirty ? this.props.throughput : undefined
       );
     } else {
-      estimatedSpend = getEstimatedAutoscaleSpendElement(
-        this.props.maxAutoPilotThroughput,
+      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
+        this.props.maxAutoPilotThroughputBaseline,
         serverId,
         regions,
-        multimaster
+        multimaster,
+        isDirty ? this.props.maxAutoPilotThroughput : undefined
       );
     }
     return estimatedSpend;
   };
 
+  private getEstimatedAutoscaleSpendElement = (
+    throughput: number,
+    serverId: string,
+    numberOfRegions: number,
+    isMultimaster: boolean,
+    newThroughput?: number
+  ): JSX.Element => {
+    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
+    const estimatedSpendingColumns: IColumn[] = [
+      {
+        key: "costType",
+        name: "",
+        fieldName: "costType",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "minPerMonth",
+        name: "Min Per Month",
+        fieldName: "minPerMonth",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "maxPerMonth",
+        name: "Max Per Month",
+        fieldName: "maxPerMonth",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      }
+    ];
+    const estimatedSpendingItems: AutoscaleEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        minPerMonth: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)}
+          </Text>
+        ),
+        maxPerMonth: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
+          </Text>
+        )
+      }
+    ];
+
+    if (newThroughput) {
+      const newPrices: PriceBreakdown = getRuPriceBreakdown(
+        newThroughput,
+        serverId,
+        numberOfRegions,
+        isMultimaster,
+        true
+      );
+      estimatedSpendingItems.unshift({
+        costType: (
+          <Text>
+            <b>Updated Cost</b>
+          </Text>
+        ),
+        minPerMonth: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)}
+            </b>
+          </Text>
+        ),
+        maxPerMonth: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
+            </b>
+          </Text>
+        )
+      });
+    }
+
+    return getEstimatedSpendingElement(
+      estimatedSpendingColumns,
+      estimatedSpendingItems,
+      newThroughput ?? throughput,
+      numberOfRegions,
+      prices,
+      true
+    );
+  };
+
+  private getEstimatedManualSpendElement = (
+    throughput: number,
+    serverId: string,
+    numberOfRegions: number,
+    isMultimaster: boolean,
+    newThroughput?: number
+  ): JSX.Element => {
+    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
+    const estimatedSpendingColumns: IColumn[] = [
+      {
+        key: "costType",
+        name: "",
+        fieldName: "costType",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "hourly",
+        name: "Hourly",
+        fieldName: "hourly",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "daily",
+        name: "Daily",
+        fieldName: "daily",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "monthly",
+        name: "Monthly",
+        fieldName: "monthly",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      }
+    ];
+    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        hourly: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}
+          </Text>
+        ),
+        daily: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}
+          </Text>
+        ),
+        monthly: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
+          </Text>
+        )
+      }
+    ];
+
+    if (newThroughput) {
+      const newPrices: PriceBreakdown = getRuPriceBreakdown(
+        newThroughput,
+        serverId,
+        numberOfRegions,
+        isMultimaster,
+        false
+      );
+      estimatedSpendingItems.unshift({
+        costType: (
+          <Text>
+            <b>Updated Cost</b>
+          </Text>
+        ),
+        hourly: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}
+            </b>
+          </Text>
+        ),
+        daily: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}
+            </b>
+          </Text>
+        ),
+        monthly: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
+            </b>
+          </Text>
+        )
+      });
+    }
+
+    return getEstimatedSpendingElement(
+      estimatedSpendingColumns,
+      estimatedSpendingItems,
+      newThroughput ?? throughput,
+      numberOfRegions,
+      prices,
+      false
+    );
+  };
+
   private getAutoPilotUsageCost = (): JSX.Element => {
     if (!this.props.maxAutoPilotThroughput) {
       return <></>;
@@ -319,6 +535,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
   private renderThroughputInput = (): JSX.Element => (
     <Stack {...titleAndInputStackProps}>
+      <Text>
+        Estimate your required throughput with
+        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+          {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
+        </Link>
+      </Text>
       <TextField
         required
         type="number"
@@ -350,13 +572,24 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           onChange={this.onSpendAckChecked}
         />
       )}
+      <br />
       {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
     </Stack>
   );
 
+  private renderWarningMessage = (): JSX.Element => {
+    let warningMessage: JSX.Element;
+    if (this.IsComponentDirty().isDiscardable) {
+      warningMessage = saveThroughputWarningMessage;
+    }
+
+    return <>{warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}</>;
+  };
+
   public render(): JSX.Element {
     return (
       <Stack {...checkBoxAndInputStackProps}>
+        {this.renderWarningMessage()}
         {this.renderThroughputModeChoices()}
 
         {this.props.isAutoPilotSelected ? this.renderAutoPilotInput() : this.renderThroughputInput()}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -8,6 +8,21 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     }
   }
 >
+  <StyledMessageBarBase
+    messageBarType={5}
+  >
+    <Text
+      styles={
+        Object {
+          "root": Object {
+            "fontSize": 12,
+          },
+        }
+      }
+    >
+      Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
+    </Text>
+  </StyledMessageBarBase>
   <Stack>
     <StyledLabelBase
       id="settingsV2RadioButtonLabelId"
@@ -214,6 +229,19 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       }
     }
   >
+    <Text>
+      Estimate your required throughput with
+      <StyledLinkBase
+        href="https://cosmos.azure.com/capacitycalculator/"
+        target="_blank"
+      >
+         capacity calculator
+         
+        <Component
+          iconName="NavigateExternalInline"
+        />
+      </StyledLinkBase>
+    </Text>
     <StyledTextFieldBase
       disabled={false}
       id="throughputInput"
@@ -239,38 +267,142 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       type="number"
       value="100"
     />
-    <Text
-      id="throughputSpendElement"
+    <Stack
+      styles={
+        Object {
+          "root": Object {
+            "width": 600,
+          },
+        }
+      }
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
     >
-      Estimated cost (
-      USD
-      ):
-       
-      <b>
-        $
-        0.0080
-         hourly 
-         / 
-        $
-        0.19
-         daily 
-         / 
-        $
-        5.84
-         monthly
+      <StyledWithViewportComponent
+        columns={
+          Array [
+            Object {
+              "fieldName": "costType",
+              "isResizable": true,
+              "key": "costType",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "hourly",
+              "isResizable": true,
+              "key": "hourly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Hourly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "daily",
+              "isResizable": true,
+              "key": "daily",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Daily",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "monthly",
+              "isResizable": true,
+              "key": "monthly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Monthly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+          ]
+        }
+        disableSelectionZone={true}
+        items={
+          Array [
+            Object {
+              "costType": <Text>
+                Current Cost
+              </Text>,
+              "daily": <Text>
+                $
+                 
+                0.19
+              </Text>,
+              "hourly": <Text>
+                $
+                 
+                0.0080
+              </Text>,
+              "monthly": <Text>
+                $
+                 
+                5.84
+              </Text>,
+            },
+          ]
+        }
+        layoutMode={1}
+        onRenderRow={[Function]}
+        selectionMode={0}
+      />
+      <Text
+        id="throughputSpendElement"
+      >
+        (
+        regions: 
          
-      </b>
-      (
-      regions: 
-       
-      1
-      , 
-      100
-      RU/s, 
-      $
-      0.00008
-      /RU)
-    </Text>
+        1
+        , 
+        100
+         RU/s, 
+        $
+        0.00008
+        /RU)
+      </Text>
+      <Text>
+        <em>
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+        </em>
+      </Text>
+    </Stack>
     <StyledCheckboxBase
       checked={false}
       id="spendAckCheckBox"
@@ -288,6 +420,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         }
       }
     />
+    <br />
   </Stack>
 </Stack>
 `;
@@ -369,6 +502,19 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       }
     }
   >
+    <Text>
+      Estimate your required throughput with
+      <StyledLinkBase
+        href="https://cosmos.azure.com/capacitycalculator/"
+        target="_blank"
+      >
+         capacity calculator
+         
+        <Component
+          iconName="NavigateExternalInline"
+        />
+      </StyledLinkBase>
+    </Text>
     <StyledTextFieldBase
       disabled={false}
       id="throughputInput"
@@ -394,38 +540,143 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       type="number"
       value="100"
     />
-    <Text
-      id="throughputSpendElement"
+    <Stack
+      styles={
+        Object {
+          "root": Object {
+            "width": 600,
+          },
+        }
+      }
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
     >
-      Estimated cost (
-      USD
-      ):
-       
-      <b>
-        $
-        0.0080
-         hourly 
-         / 
-        $
-        0.19
-         daily 
-         / 
-        $
-        5.84
-         monthly
+      <StyledWithViewportComponent
+        columns={
+          Array [
+            Object {
+              "fieldName": "costType",
+              "isResizable": true,
+              "key": "costType",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "hourly",
+              "isResizable": true,
+              "key": "hourly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Hourly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "daily",
+              "isResizable": true,
+              "key": "daily",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Daily",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "monthly",
+              "isResizable": true,
+              "key": "monthly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Monthly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+          ]
+        }
+        disableSelectionZone={true}
+        items={
+          Array [
+            Object {
+              "costType": <Text>
+                Current Cost
+              </Text>,
+              "daily": <Text>
+                $
+                 
+                0.19
+              </Text>,
+              "hourly": <Text>
+                $
+                 
+                0.0080
+              </Text>,
+              "monthly": <Text>
+                $
+                 
+                5.84
+              </Text>,
+            },
+          ]
+        }
+        layoutMode={1}
+        onRenderRow={[Function]}
+        selectionMode={0}
+      />
+      <Text
+        id="throughputSpendElement"
+      >
+        (
+        regions: 
          
-      </b>
-      (
-      regions: 
-       
-      1
-      , 
-      100
-      RU/s, 
-      $
-      0.00008
-      /RU)
-    </Text>
+        1
+        , 
+        100
+         RU/s, 
+        $
+        0.00008
+        /RU)
+      </Text>
+      <Text>
+        <em>
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+        </em>
+      </Text>
+    </Stack>
+    <br />
   </Stack>
 </Stack>
 `;

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap

@@ -58,6 +58,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       spendAckChecked={false}
       throughput={1000}
       throughputBaseline={1000}
+      usageSizeInKB={100}
       wasAutopilotOriginallySet={true}
     />
     <Stack

src/Explorer/Controls/Settings/TestUtils.tsx

@@ -18,12 +18,13 @@ export const collection = ({
     excludedPaths: []
   }),
   uniqueKeyPolicy: {} as DataModels.UniqueKeyPolicy,
-  quotaInfo: ko.observable<DataModels.CollectionQuotaInfo>({} as DataModels.CollectionQuotaInfo),
+  usageSizeInKB: ko.observable(100),
   offer: ko.observable<DataModels.Offer>({
     autoscaleMaxThroughput: undefined,
     manualThroughput: 10000,
     minimumThroughput: 6000,
-    id: "offer"
+    id: "offer",
+    offerReplacePending: false
   }),
   conflictResolutionPolicy: ko.observable<DataModels.ConflictResolutionPolicy>(
     {} as DataModels.ConflictResolutionPolicy

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -133,8 +133,6 @@ exports[`SettingsComponent renders 1`] = `
                     "partitionKeyVisible": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
-                    "rupm": [Function],
-                    "rupmVisible": [Function],
                     "sharedAutoPilotThroughput": [Function],
                     "sharedThroughputRangeText": [Function],
                     "shouldCreateMongoWildcardIndex": [Function],
@@ -622,8 +620,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -735,7 +731,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -947,7 +942,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isCodeOfConductEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -1028,7 +1022,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
-                "parentFrameDataExplorerVersion": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -1054,7 +1047,6 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
-                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -1300,9 +1292,9 @@ exports[`SettingsComponent renders 1`] = `
                 "version": 2,
               },
               "partitionKeyProperty": "partitionKey",
-              "quotaInfo": [Function],
               "readSettings": [Function],
               "uniqueKeyPolicy": Object {},
+              "usageSizeInKB": [Function],
             }
           }
           container={
@@ -1412,8 +1404,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -1901,8 +1891,6 @@ exports[`SettingsComponent renders 1`] = `
                 "partitionKeyVisible": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
-                "rupm": [Function],
-                "rupmVisible": [Function],
                 "sharedAutoPilotThroughput": [Function],
                 "sharedThroughputRangeText": [Function],
                 "shouldCreateMongoWildcardIndex": [Function],
@@ -2014,7 +2002,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -2226,7 +2213,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isCodeOfConductEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -2307,7 +2293,6 @@ exports[`SettingsComponent renders 1`] = `
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
-              "parentFrameDataExplorerVersion": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -2333,7 +2318,6 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
-              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],
@@ -2704,8 +2688,6 @@ exports[`SettingsComponent renders 1`] = `
                     "partitionKeyVisible": [Function],
                     "requestUnitsUsageCost": [Function],
                     "ruToolTipText": [Function],
-                    "rupm": [Function],
-                    "rupmVisible": [Function],
                     "sharedAutoPilotThroughput": [Function],
                     "sharedThroughputRangeText": [Function],
                     "shouldCreateMongoWildcardIndex": [Function],
@@ -3193,8 +3175,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -3306,7 +3286,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "arcadiaToken": [Function],
-                "armEndpoint": [Function],
                 "browseQueriesPane": BrowseQueriesPane {
                   "canSaveQueries": [Function],
                   "container": [Circular],
@@ -3518,7 +3497,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
                 "isAuthWithResourceToken": [Function],
-                "isCodeOfConductEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -3599,7 +3577,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onRefreshResourcesClick": [Function],
                 "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
-                "parentFrameDataExplorerVersion": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -3625,7 +3602,6 @@ exports[`SettingsComponent renders 1`] = `
                   "titleLabel": "Select Columns",
                   "visible": [Function],
                 },
-                "quotaId": [Function],
                 "refreshDatabaseAccount": [Function],
                 "refreshNotebookList": [Function],
                 "refreshTreeTitle": [Function],
@@ -3871,9 +3847,9 @@ exports[`SettingsComponent renders 1`] = `
                 "version": 2,
               },
               "partitionKeyProperty": "partitionKey",
-              "quotaInfo": [Function],
               "readSettings": [Function],
               "uniqueKeyPolicy": Object {},
+              "usageSizeInKB": [Function],
             }
           }
           container={
@@ -3983,8 +3959,6 @@ exports[`SettingsComponent renders 1`] = `
                   "partitionKeyVisible": [Function],
                   "requestUnitsUsageCost": [Function],
                   "ruToolTipText": [Function],
-                  "rupm": [Function],
-                  "rupmVisible": [Function],
                   "sharedAutoPilotThroughput": [Function],
                   "sharedThroughputRangeText": [Function],
                   "shouldCreateMongoWildcardIndex": [Function],
@@ -4472,8 +4446,6 @@ exports[`SettingsComponent renders 1`] = `
                 "partitionKeyVisible": [Function],
                 "requestUnitsUsageCost": [Function],
                 "ruToolTipText": [Function],
-                "rupm": [Function],
-                "rupmVisible": [Function],
                 "sharedAutoPilotThroughput": [Function],
                 "sharedThroughputRangeText": [Function],
                 "shouldCreateMongoWildcardIndex": [Function],
@@ -4585,7 +4557,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "arcadiaToken": [Function],
-              "armEndpoint": [Function],
               "browseQueriesPane": BrowseQueriesPane {
                 "canSaveQueries": [Function],
                 "container": [Circular],
@@ -4797,7 +4768,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
               "isAuthWithResourceToken": [Function],
-              "isCodeOfConductEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -4878,7 +4848,6 @@ exports[`SettingsComponent renders 1`] = `
               "onRefreshResourcesClick": [Function],
               "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
-              "parentFrameDataExplorerVersion": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -4904,7 +4873,6 @@ exports[`SettingsComponent renders 1`] = `
                 "titleLabel": "Select Columns",
                 "visible": [Function],
               },
-              "quotaId": [Function],
               "refreshDatabaseAccount": [Function],
               "refreshNotebookList": [Function],
               "refreshTreeTitle": [Function],

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -60,66 +60,100 @@ exports[`SettingsUtils functions render 1`] = `
     </StyledLinkBase>
     .
   </Text>
-  <Text
-    id="throughputSpendElement"
+  <Stack
+    styles={
+      Object {
+        "root": Object {
+          "width": 600,
+        },
+      }
+    }
+    tokens={
+      Object {
+        "childrenGap": 10,
+      }
+    }
   >
-    Estimated cost (
-    RMB
-    ):
-     
-    <b>
-      ¥
-      1.29
-       hourly 
-       / 
-      ¥
-      31.06
-       daily 
-       / 
-      ¥
-      944.60
-       monthly
+    <StyledWithViewportComponent
+      columns={
+        Array [
+          Object {
+            "fieldName": "costType",
+            "isResizable": true,
+            "key": "costType",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "",
+          },
+          Object {
+            "fieldName": "hourly",
+            "isResizable": true,
+            "key": "hourly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Hourly",
+          },
+          Object {
+            "fieldName": "daily",
+            "isResizable": true,
+            "key": "daily",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Daily",
+          },
+          Object {
+            "fieldName": "monthly",
+            "isResizable": true,
+            "key": "monthly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Monthly",
+          },
+        ]
+      }
+      disableSelectionZone={true}
+      items={
+        Array [
+          Object {
+            "costType": <Text>
+              Current Cost
+            </Text>,
+            "daily": <Text>
+              $ 24.48
+            </Text>,
+            "hourly": <Text>
+              $ 1.02
+            </Text>,
+            "monthly": <Text>
+              $ 744.6
+            </Text>,
+          },
+        ]
+      }
+      layoutMode={1}
+      onRenderRow={[Function]}
+      selectionMode={0}
+    />
+    <Text
+      id="throughputSpendElement"
+    >
+      (
+      regions: 
        
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    1000
-    RU/s, 
-    ¥
-    0.00051
-    /RU)
-  </Text>
-  <Text
-    id="autoscaleSpendElement"
-  >
-    Estimated monthly cost (
-    RMB
-    ) is
-     
-    <b>
+      2
+      , 
+      1000
+       RU/s, 
       ¥
-      111.69
-       - 
-      ¥
-      1116.90
-       
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    100
-     - 
-    1000
-     RU/s, 
-    ¥
-    0.000765
-    /RU)
-  </Text>
+      0.00051
+      /RU)
+    </Text>
+    <Text>
+      <em>
+        *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+      </em>
+    </Text>
+  </Stack>
   <Text
     id="manualToAutoscaleDisclaimerElement"
     styles={

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -126,6 +126,12 @@
   </div>
 
   <div data-bind="visible: !isAutoPilotSelected()">
+    <p>
+      <span
+        >Estimate your required throughput with
+        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a></span
+      >
+    </p>
     <div data-bind="setTemplateReady: true">
       <input
         data-bind="

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -1,11 +1,11 @@
-jest.mock("../../Common/DocumentClientUtilityBase");
 jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
+jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
 import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
-import { createDocument } from "../../Common/DocumentClientUtilityBase";
+import { createDocument } from "../../Common/dataAccess/createDocument";
 import Explorer from "../Explorer";
 import { updateUserContext } from "../../UserContext";
 

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -4,8 +4,8 @@ import GraphTab from ".././Tabs/GraphTab";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { createDocument } from "../../Common/DocumentClientUtilityBase";
 import { createCollection } from "../../Common/dataAccess/createCollection";
+import { createDocument } from "../../Common/dataAccess/createDocument";
 import { userContext } from "../../UserContext";
 
 interface SampleDataFile extends DataModels.CreateCollectionParams {
@@ -95,12 +95,15 @@ export class ContainerSampleGenerator {
         .reduce((previous, current) => previous.then(current), Promise.resolve());
     } else {
       // For SQL all queries are executed at the same time
-      this.sampleDataFile.data.map(doc => {
-        const subPromise = createDocument(collection, doc);
-        subPromise.catch(reason => NotificationConsoleUtils.logConsoleError(reason));
-        promises.push(subPromise);
-      });
-      await Promise.all(promises);
+      await Promise.all(
+        this.sampleDataFile.data.map(async doc => {
+          try {
+            await createDocument(collection, doc);
+          } catch (error) {
+            NotificationConsoleUtils.logConsoleError(error);
+          }
+        })
+      );
     }
   }
 

src/Explorer/Explorer.ts

@@ -18,7 +18,7 @@ import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPa
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import EnvironmentUtility from "../Common/EnvironmentUtility";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import hasher from "hasher";
 import NewVertexPane from "./Panes/NewVertexPane";
@@ -121,7 +121,6 @@ export default class Explorer {
   public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
   public subscriptionType: ko.Observable<SubscriptionType>;
-  public quotaId: ko.Observable<string>;
   public defaultExperience: ko.Observable<string>;
   public isPreferredApiDocumentDB: ko.Computed<boolean>;
   public isPreferredApiCassandra: ko.Computed<boolean>;
@@ -135,12 +134,10 @@ export default class Explorer {
   public canSaveQueries: ko.Computed<boolean>;
   public features: ko.Observable<any>;
   public serverId: ko.Observable<string>;
-  public armEndpoint: ko.Observable<string>;
   public isTryCosmosDBSubscription: ko.Observable<boolean>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
-  public parentFrameDataExplorerVersion: ko.Observable<string> = ko.observable<string>("");
   public mostRecentActivity: MostRecentActivity.MostRecentActivity;
 
   // Notification Console
@@ -204,7 +201,6 @@ export default class Explorer {
 
   // features
   public isGalleryPublishEnabled: ko.Computed<boolean>;
-  public isCodeOfConductEnabled: ko.Computed<boolean>;
   public isLinkInjectionEnabled: ko.Computed<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
@@ -279,7 +275,6 @@ export default class Explorer {
 
     this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
     this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
-    this.quotaId = ko.observable<string>("");
     let firstInitialization = true;
     this.isRefreshingExplorer = ko.observable<boolean>(true);
     this.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
@@ -319,9 +314,9 @@ export default class Explorer {
       if (isAccountReady) {
         this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
-        this.notebookWorkspaceManager = new NotebookWorkspaceManager(this.armEndpoint());
+        this.notebookWorkspaceManager = new NotebookWorkspaceManager();
         this.arcadiaWorkspaces = ko.observableArray();
-        this._arcadiaManager = new ArcadiaResourceManager(this.armEndpoint());
+        this._arcadiaManager = new ArcadiaResourceManager();
         this._isAfecFeatureRegistered(Constants.AfecFeatures.StorageAnalytics).then(isRegistered =>
           this.hasStorageAnalyticsAfecFeature(isRegistered)
         );
@@ -371,7 +366,6 @@ export default class Explorer {
 
     this.features = ko.observable();
     this.serverId = ko.observable<string>();
-    this.armEndpoint = ko.observable<string>(undefined);
     this.queriesClient = new QueriesClient(this);
     this.isTryCosmosDBSubscription = ko.observable<boolean>(false);
 
@@ -404,9 +398,6 @@ export default class Explorer {
     this.isGalleryPublishEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableGalleryPublish)
     );
-    this.isCodeOfConductEnabled = ko.computed<boolean>(() =>
-      this.isFeatureEnabled(Constants.Features.enableCodeOfConduct)
-    );
     this.isLinkInjectionEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableLinkInjection)
     );
@@ -1016,9 +1007,7 @@ export default class Explorer {
         this.isSynapseLinkUpdating(true);
         this._closeSynapseLinkModalDialog();
 
-        const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(
-          this.databaseAccount().id
-        );
+        const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(this.databaseAccount().id);
 
         try {
           const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
@@ -1758,61 +1747,59 @@ export default class Explorer {
       inputs.extensionEndpoint = configContext.PROXY_PATH;
     }
 
-    const initPromise: Q.Promise<void> = inputs ? this.initDataExplorerWithFrameInputs(inputs) : Q();
+    this.initDataExplorerWithFrameInputs(inputs);
 
-    initPromise.then(() => {
-      const openAction: ActionContracts.DataExplorerAction = message.openAction;
-      if (!!openAction) {
-        if (this.isRefreshingExplorer()) {
-          const subscription = this.databases.subscribe((databases: ViewModels.Database[]) => {
-            handleOpenAction(openAction, this.nonSystemDatabases(), this);
-            subscription.dispose();
-          });
-        } else {
+    const openAction: ActionContracts.DataExplorerAction = message.openAction;
+    if (!!openAction) {
+      if (this.isRefreshingExplorer()) {
+        const subscription = this.databases.subscribe((databases: ViewModels.Database[]) => {
           handleOpenAction(openAction, this.nonSystemDatabases(), this);
-        }
+          subscription.dispose();
+        });
+      } else {
+        handleOpenAction(openAction, this.nonSystemDatabases(), this);
       }
-      if (message.actionType === ActionContracts.ActionType.TransmitCachedData) {
-        handleCachedDataMessage(message);
-        return;
-      }
-      if (message.type) {
-        switch (message.type) {
-          case MessageTypes.UpdateLocationHash:
-            if (!message.locationHash) {
-              break;
-            }
-            hasher.replaceHash(message.locationHash);
-            RouteHandler.getInstance().parseHash(message.locationHash);
-            break;
-          case MessageTypes.SendNotification:
-            if (!message.message) {
-              break;
-            }
-            NotificationConsoleUtils.logConsoleMessage(
-              message.consoleDataType || ConsoleDataType.Info,
-              message.message,
-              message.id
-            );
-            break;
-          case MessageTypes.ClearNotification:
-            if (!message.id) {
-              break;
-            }
-            NotificationConsoleUtils.clearInProgressMessageWithId(message.id);
-            break;
-          case MessageTypes.LoadingStatus:
-            if (!message.text) {
-              break;
-            }
-            this._setLoadingStatusText(message.text, message.title);
-            break;
-        }
-        return;
+    }
+    if (message.actionType === ActionContracts.ActionType.TransmitCachedData) {
+      handleCachedDataMessage(message);
+      return;
+    }
+    if (message.type) {
+      switch (message.type) {
+        case MessageTypes.UpdateLocationHash:
+          if (!message.locationHash) {
+            break;
+          }
+          hasher.replaceHash(message.locationHash);
+          RouteHandler.getInstance().parseHash(message.locationHash);
+          break;
+        case MessageTypes.SendNotification:
+          if (!message.message) {
+            break;
+          }
+          NotificationConsoleUtils.logConsoleMessage(
+            message.consoleDataType || ConsoleDataType.Info,
+            message.message,
+            message.id
+          );
+          break;
+        case MessageTypes.ClearNotification:
+          if (!message.id) {
+            break;
+          }
+          NotificationConsoleUtils.clearInProgressMessageWithId(message.id);
+          break;
+        case MessageTypes.LoadingStatus:
+          if (!message.text) {
+            break;
+          }
+          this._setLoadingStatusText(message.text, message.title);
+          break;
       }
+      return;
+    }
 
-      this.splashScreenAdapter.forceRender();
-    });
+    this.splashScreenAdapter.forceRender();
   }
 
   public findSelectedDatabase(): ViewModels.Database {
@@ -1852,8 +1839,14 @@ export default class Explorer {
     return false;
   }
 
-  public initDataExplorerWithFrameInputs(inputs: ViewModels.DataExplorerInputsFrame): Q.Promise<void> {
+  public initDataExplorerWithFrameInputs(inputs: ViewModels.DataExplorerInputsFrame): void {
     if (inputs != null) {
+      // 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") {
+        sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
+      }
+
       const authorizationToken = inputs.authorizationToken || "";
       const masterKey = inputs.masterKey || "";
       const databaseAccount = inputs.databaseAccount || null;
@@ -1862,25 +1855,18 @@ export default class Explorer {
       }
       this.features(inputs.features);
       this.serverId(inputs.serverId);
-      this.armEndpoint(EnvironmentUtility.normalizeArmEndpointUri(inputs.csmEndpoint || configContext.ARM_ENDPOINT));
       this.databaseAccount(databaseAccount);
       this.subscriptionType(inputs.subscriptionType);
-      this.quotaId(inputs.quotaId);
       this.hasWriteAccess(inputs.hasWriteAccess);
       this.flight(inputs.addCollectionDefaultFlight);
       this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription);
       this.isAuthWithResourceToken(inputs.isAuthWithresourceToken);
       this.setFeatureFlagsFromFlights(inputs.flights);
-
-      if (!!inputs.dataExplorerVersion) {
-        this.parentFrameDataExplorerVersion(inputs.dataExplorerVersion);
-      }
-
       this._importExplorerConfigComplete = true;
 
       updateConfigContext({
         BACKEND_ENDPOINT: inputs.extensionEndpoint || "",
-        ARM_ENDPOINT: this.armEndpoint()
+        ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT)
       });
 
       updateUserContext({
@@ -1889,7 +1875,8 @@ export default class Explorer {
         databaseAccount,
         resourceGroup: inputs.resourceGroup,
         subscriptionId: inputs.subscriptionId,
-        subscriptionType: inputs.subscriptionType
+        subscriptionType: inputs.subscriptionType,
+        quotaId: inputs.quotaId
       });
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
@@ -1903,7 +1890,6 @@ export default class Explorer {
 
       this.isAccountReady(true);
     }
-    return Q();
   }
 
   public setFeatureFlagsFromFlights(flights: readonly string[]): void {
@@ -2276,7 +2262,6 @@ export default class Explorer {
         name,
         content,
         parentDomElement,
-        this.isCodeOfConductEnabled(),
         this.isLinkInjectionEnabled()
       );
       this.publishNotebookPaneAdapter = this.notebookManager.publishNotebookPaneAdapter;
@@ -2567,7 +2552,7 @@ export default class Explorer {
 
   public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
     const subscriptionId = userContext.subscriptionId;
-    const armEndpoint = this.armEndpoint();
+    const armEndpoint = configContext.ARM_ENDPOINT;
     const authType = window.authType as AuthType;
     if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
@@ -2576,7 +2561,7 @@ export default class Explorer {
     }
 
     const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${Constants.AfecFeatures.Spark}`;
-    const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(featureUri);
+    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
     try {
       const sparkNotebooksFeature: DataModels.AfecFeature = await resourceProviderClient.getAsync(
         featureUri,
@@ -2596,7 +2581,7 @@ export default class Explorer {
 
   public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
     const subscriptionId = userContext.subscriptionId;
-    const armEndpoint = this.armEndpoint();
+    const armEndpoint = configContext.ARM_ENDPOINT;
     const authType = window.authType as AuthType;
     if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
       // explorer is not aware of the database account yet
@@ -2604,7 +2589,7 @@ export default class Explorer {
     }
 
     const featureUri = `subscriptions/${subscriptionId}/providers/Microsoft.Features/providers/Microsoft.DocumentDb/features/${featureName}`;
-    const resourceProviderClient = new ResourceProviderClientFactory(this.armEndpoint()).getOrCreate(featureUri);
+    const resourceProviderClient = new ResourceProviderClientFactory().getOrCreate(featureUri);
     try {
       const featureStatus: DataModels.AfecFeature = await resourceProviderClient.getAsync(
         featureUri,

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -1,4 +1,5 @@
-jest.mock("../../../Common/DocumentClientUtilityBase");
+jest.mock("../../../Common/dataAccess/queryDocuments");
+jest.mock("../../../Common/dataAccess/queryDocumentsPage");
 import React from "react";
 import * as sinon from "sinon";
 import { mount, ReactWrapper } from "enzyme";
@@ -12,7 +13,8 @@ import * as DataModels from "../../../Contracts/DataModels";
 import * as StorageUtility from "../../../Shared/StorageUtility";
 import GraphTab from "../../Tabs/GraphTab";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
+import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 
 describe("Check whether query result is vertex array", () => {
   it("should reject null as vertex array", () => {
@@ -299,12 +301,12 @@ describe("GraphExplorer", () => {
       ignoreD3Update: boolean
     ): GraphExplorer => {
       (queryDocuments as jest.Mock).mockImplementation((container: any, query: string, options: any) => {
-        return Q.resolve({
+        return {
           _query: query,
           nextItem: (callback: (error: any, document: DataModels.DocumentId) => void): void => {},
           hasMoreResults: () => false,
           executeNext: (callback: (error: any, documents: DataModels.DocumentId[], headers: any) => void): void => {}
-        });
+        };
       });
       (queryDocumentsPage as jest.Mock).mockImplementation(
         (rid: string, iterator: any, firstItemIndex: number, options: any) => {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -28,8 +28,10 @@ import * as Constants from "../../../Common/Constants";
 import { InputProperty } from "../../../Contracts/ViewModels";
 import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
+import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
+import { FeedOptions } from "@azure/cosmos";
 
 export interface GraphAccessor {
   applyFilter: () => void;
@@ -725,26 +727,32 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * Execute DocDB query and get all results
    */
-  public executeNonPagedDocDbQuery(query: string): Q.Promise<DataModels.DocumentId[]> {
-    // TODO maxItemCount: this reduces throttling, but won't cap the # of results
-    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-      maxItemCount: GraphExplorer.PAGE_ALL,
-      enableCrossPartitionQuery:
-        StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.IsCrossPartitionQueryEnabled) ===
-        "true"
-    }).then(
-      (iterator: QueryIterator<ItemDefinition & Resource>) => {
-        return iterator.fetchNext().then(response => response.resources);
-      },
-      (reason: any) => {
-        GraphExplorer.reportToConsole(
-          ConsoleDataType.Error,
-          `Failed to execute non-paged query ${query}. Reason:${reason}`,
-          reason
-        );
-        return null;
-      }
-    );
+  public async executeNonPagedDocDbQuery(query: string): Promise<DataModels.DocumentId[]> {
+    try {
+      // TODO maxItemCount: this reduces throttling, but won't cap the # of results
+      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+        this.props.databaseId,
+        this.props.collectionId,
+        query,
+        {
+          maxItemCount: GraphExplorer.PAGE_ALL,
+          enableCrossPartitionQuery:
+            StorageUtility.LocalStorageUtility.getEntryString(
+              StorageUtility.StorageKey.IsCrossPartitionQueryEnabled
+            ) === "true"
+        } as FeedOptions
+      );
+      const response = await iterator.fetchNext();
+
+      return response?.resources;
+    } catch (error) {
+      GraphExplorer.reportToConsole(
+        ConsoleDataType.Error,
+        `Failed to execute non-paged query ${query}. Reason:${error}`,
+        error
+      );
+      return null;
+    }
   }
 
   /**
@@ -864,7 +872,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * User executes query
    */
-  public submitQuery(query: string): void {
+  public async submitQuery(query: string): Promise<void> {
     // Clear any progress indicator
     this.executeCounter = 0;
     this.setState({
@@ -882,24 +890,22 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     // Remember query
     this.pushToLatestQueryFragments(query);
 
-    let backendPromise;
-
-    if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
-      backendPromise = this.executeDocDbGVQuery();
-    } else {
-      backendPromise = this.executeGremlinQuery(query);
-    }
-
-    backendPromise.then(
-      (result: UserQueryResult) => (this.queryTotalRequestCharge = result.requestCharge),
-      (error: any) => {
-        const errorMsg = `Failure in submitting query: ${query}: ${getErrorMessage(error)}`;
-        GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
-        this.setState({
-          filterQueryError: errorMsg
-        });
+    try {
+      let result: UserQueryResult;
+      if (query.toLocaleLowerCase() === "g.V()".toLocaleLowerCase()) {
+        result = await this.executeDocDbGVQuery();
+      } else {
+        result = await this.executeGremlinQuery(query);
       }
-    );
+
+      this.queryTotalRequestCharge = result.requestCharge;
+    } catch (error) {
+      const errorMsg = `Failure in submitting query: ${query}: ${getErrorMessage(error)}`;
+      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+      this.setState({
+        filterQueryError: errorMsg
+      });
+    }
   }
 
   /**
@@ -1390,7 +1396,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * Update possible vertices to display in UI
    */
-  private updatePossibleVertices(): Q.Promise<PossibleVertex[]> {
+  private updatePossibleVertices(): Promise<PossibleVertex[]> {
     const highlightedNodeId = this.state.highlightedNode ? this.state.highlightedNode.id : null;
 
     const q = `SELECT c.id, c["${this.props.graphConfigUiData.nodeCaptionChoice() ||
@@ -1721,85 +1727,81 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     );
   }
 
-  private executeDocDbGVQuery(): Q.Promise<UserQueryResult> {
+  private async executeDocDbGVQuery(): Promise<UserQueryResult> {
     let query = "select root.id from root where IS_DEFINED(root._isEdge) = false order by root._ts desc";
     if (this.props.collectionPartitionKeyProperty) {
       query = `select root.id, root.${this.props.collectionPartitionKeyProperty} from root where IS_DEFINED(root._isEdge) = false order by root._ts asc`;
     }
 
-    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-      maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
-      enableCrossPartitionQuery: LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-    })
-      .then(
-        (iterator: QueryIterator<ItemDefinition & Resource>) => {
-          this.currentDocDBQueryInfo = {
-            iterator: iterator,
-            index: 0,
-            query: query
-          };
-        },
-        (reason: any) => {
-          GraphExplorer.reportToConsole(
-            ConsoleDataType.Error,
-            `Failed to execute CosmosDB query: ${query} reason:${reason}`
-          );
-        }
-      )
-      .then(() => this.loadMoreRootNodes());
+    try {
+      const iterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+        this.props.databaseId,
+        this.props.collectionId,
+        query,
+        {
+          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+          enableCrossPartitionQuery:
+            LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+        } as FeedOptions
+      );
+      this.currentDocDBQueryInfo = {
+        iterator: iterator,
+        index: 0,
+        query: query
+      };
+      return await this.loadMoreRootNodes();
+    } catch (error) {
+      GraphExplorer.reportToConsole(
+        ConsoleDataType.Error,
+        `Failed to execute CosmosDB query: ${query} reason:${error}`
+      );
+      throw error;
+    }
   }
 
-  private loadMoreRootNodes(): Q.Promise<UserQueryResult> {
+  private async loadMoreRootNodes(): Promise<UserQueryResult> {
     if (!this.currentDocDBQueryInfo) {
-      return Q.resolve(null);
+      return undefined;
     }
-    let RU: string = GraphExplorer.REQUEST_CHARGE_UNKNOWN_MSG;
 
+    let RU: string = GraphExplorer.REQUEST_CHARGE_UNKNOWN_MSG;
     const queryInfoStr = `${this.currentDocDBQueryInfo.query} (${this.currentDocDBQueryInfo.index + 1}-${this
       .currentDocDBQueryInfo.index + GraphExplorer.ROOT_LIST_PAGE_SIZE})`;
     const id = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${queryInfoStr}`);
 
-    return queryDocumentsPage(
-      this.props.collectionId,
-      this.currentDocDBQueryInfo.iterator,
-      this.currentDocDBQueryInfo.index,
-      {
-        enableCrossPartitionQuery:
-          LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-      }
-    )
-      .then((results: ViewModels.QueryResults) => {
-        GraphExplorer.clearConsoleProgress(id);
-        this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
-        this.setState({ hasMoreRoots: results.hasMoreResults });
-        RU = results.requestCharge.toString();
-        GraphExplorer.reportToConsole(
-          ConsoleDataType.Info,
-          `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
-        );
-        const documents = results.documents || [];
-        return documents.map(
-          (item: DataModels.DocumentId) => {
-            return GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty);
-          },
-          (reason: any) => {
-            // Failure
-            GraphExplorer.clearConsoleProgress(id);
-            const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${reason}`;
-            GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
-            this.setState({
-              filterQueryError: errorMsg
-            });
-            this.setFilterQueryStatus(FilterQueryStatus.ErrorResult);
-            throw reason;
-          }
-        );
-      })
-      .then((pkIds: string[]) => {
-        const arg = pkIds.join(",");
-        return this.executeGremlinQuery(`g.V(${arg})`);
-      })
-      .then(() => ({ requestCharge: RU }));
+    try {
+      const results: ViewModels.QueryResults = await queryDocumentsPage(
+        this.props.collectionId,
+        this.currentDocDBQueryInfo.iterator,
+        this.currentDocDBQueryInfo.index
+      );
+
+      GraphExplorer.clearConsoleProgress(id);
+      this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
+      this.setState({ hasMoreRoots: results.hasMoreResults });
+      RU = results.requestCharge.toString();
+      GraphExplorer.reportToConsole(
+        ConsoleDataType.Info,
+        `Executed: ${queryInfoStr} ${GremlinClient.GremlinClient.getRequestChargeString(RU)}`
+      );
+      const pkIds: string[] = (results.documents || []).map((item: DataModels.DocumentId) =>
+        GraphExplorer.getPkIdFromDocumentId(item, this.props.collectionPartitionKeyProperty)
+      );
+
+      const arg = pkIds.join(",");
+      await this.executeGremlinQuery(`g.V(${arg})`);
+
+      return { requestCharge: RU };
+    } catch (error) {
+      GraphExplorer.clearConsoleProgress(id);
+      const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${getErrorMessage(error)}`;
+      GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
+      this.setState({
+        filterQueryError: errorMsg
+      });
+      this.setFilterQueryStatus(FilterQueryStatus.ErrorResult);
+      throw error;
+    }
   }
 
   private executeGremlinQuery(query: string): Q.Promise<UserQueryResult> {

src/Explorer/Menus/NavBar/MeControlComponent.tsx

@@ -1,3 +1,4 @@
+import "./MeControlComponent.less";
 import * as React from "react";
 import { DefaultButton, BaseButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
 import { DirectionalHint, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";

src/Explorer/Menus/NotificationConsole/NotificationConsole.less

@@ -99,7 +99,22 @@
         .notificationConsoleControls {
             padding: @MediumSpace;
             margin-left:@DefaultSpace;
+            display: flex;
+            align-items: center;
 
+            .ms-Dropdown-container {
+                display: flex;
+                .ms-Dropdown-title {
+                    height: 25px;
+                    line-height: 25px;
+                }
+                .ms-Dropdown {
+                    min-width: 110px;
+                    margin-left: 10px;
+                    height: 25px;
+                    line-height: 25px;
+                }
+            }
             #consoleFilterLabel {
                 padding: 4px;
             }
@@ -107,6 +122,7 @@
             .consoleSplitter {
                 border-left: 1px solid @BaseMedium;
                 margin: @MediumSpace;
+                height: 20px;
             }
 
             .clearNotificationsButton {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -5,7 +5,7 @@
 import * as React from "react";
 import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
 import AnimateHeight from "react-animate-height";
-
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
 import LoadingIcon from "../../../../images/loading.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
@@ -53,7 +53,12 @@ export class NotificationConsoleComponent extends React.Component<
   NotificationConsoleComponentState
 > {
   private static readonly transitionDurationMs = 200;
-  private static readonly FilterOptions = ["All", "In Progress", "Info", "Error"];
+  private static readonly FilterOptions = [
+    { key: "All", text: "All" },
+    { key: "In Progress", text: "In progress" },
+    { key: "Info", text: "Info" },
+    { key: "Error", text: "Error" }
+  ];
   private headerTimeoutId: number;
   private prevHeaderStatus: string;
   private consoleHeaderElement: HTMLElement;
@@ -62,7 +67,7 @@ export class NotificationConsoleComponent extends React.Component<
     super(props);
     this.state = {
       headerStatus: "",
-      selectedFilter: NotificationConsoleComponent.FilterOptions[0],
+      selectedFilter: NotificationConsoleComponent.FilterOptions[0].key || "",
       isExpanded: props.isConsoleExpanded
     };
     this.prevHeaderStatus = null;
@@ -150,20 +155,15 @@ export class NotificationConsoleComponent extends React.Component<
         >
           <div className="notificationConsoleContents">
             <div className="notificationConsoleControls">
-              <label id="consoleFilterLabel">Filter</label>
-              <select
-                aria-labelledby="consoleFilterLabel"
+              <Dropdown
+                label="Filter:"
                 role="combobox"
-                aria-label={this.state.selectedFilter}
-                value={this.state.selectedFilter}
+                selectedKey={this.state.selectedFilter}
+                options={NotificationConsoleComponent.FilterOptions}
                 onChange={this.onFilterSelected.bind(this)}
-              >
-                {NotificationConsoleComponent.FilterOptions.map((value: string) => (
-                  <option value={value} key={value}>
-                    {value}
-                  </option>
-                ))}
-              </select>
+                aria-labelledby="consoleFilterLabel"
+                aria-label={this.state.selectedFilter}
+              />
               <span className="consoleSplitter" />
               <span
                 className="clearNotificationsButton"
@@ -220,8 +220,8 @@ export class NotificationConsoleComponent extends React.Component<
     ));
   }
 
-  private onFilterSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
-    this.setState({ selectedFilter: event.target.value });
+  private onFilterSelected(event: React.ChangeEvent<HTMLSelectElement>, option: IDropdownOption): void {
+    this.setState({ selectedFilter: String(option.key) });
   }
 
   private getFilteredConsoleData(): ConsoleData[] {

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -110,43 +110,34 @@ exports[`NotificationConsoleComponent renders the console (expanded) 1`] = `
       <div
         className="notificationConsoleControls"
       >
-        <label
-          id="consoleFilterLabel"
-        >
-          Filter
-        </label>
-        <select
+        <StyledWithResponsiveMode
           aria-label="All"
           aria-labelledby="consoleFilterLabel"
+          label="Filter:"
           onChange={[Function]}
+          options={
+            Array [
+              Object {
+                "key": "All",
+                "text": "All",
+              },
+              Object {
+                "key": "In Progress",
+                "text": "In progress",
+              },
+              Object {
+                "key": "Info",
+                "text": "Info",
+              },
+              Object {
+                "key": "Error",
+                "text": "Error",
+              },
+            ]
+          }
           role="combobox"
-          value="All"
-        >
-          <option
-            key="All"
-            value="All"
-          >
-            All
-          </option>
-          <option
-            key="In Progress"
-            value="In Progress"
-          >
-            In Progress
-          </option>
-          <option
-            key="Info"
-            value="Info"
-          >
-            Info
-          </option>
-          <option
-            key="Error"
-            value="Error"
-          >
-            Error
-          </option>
-        </select>
+          selectedKey="All"
+        />
         <span
           className="consoleSplitter"
         />

src/Explorer/Notebook/NotebookManager.ts

@@ -128,17 +128,9 @@ export default class NotebookManager {
     name: string,
     content: string | ImmutableNotebook,
     parentDomElement: HTMLElement,
-    isCodeOfConductEnabled: boolean,
     isLinkInjectionEnabled: boolean
   ): Promise<void> {
-    await this.publishNotebookPaneAdapter.open(
-      name,
-      getFullName(),
-      content,
-      parentDomElement,
-      isCodeOfConductEnabled,
-      isLinkInjectionEnabled
-    );
+    await this.publishNotebookPaneAdapter.open(name, getFullName(), content, parentDomElement, isLinkInjectionEnabled);
   }
 
   public openCopyNotebookPane(name: string, content: string): void {

src/Explorer/Panes/AddCollectionPane.html

@@ -243,38 +243,6 @@
           </div>
           <!-- Unlimited Button Content - Start -->
           <div class="tabcontent" data-bind="visible: isUnlimitedStorageSelected() || databaseHasSharedOffer()">
-              <div data-bind="visible: rupmVisible">
-                  <div class="tabs">
-                      <p>
-                          <span class="mandatoryStar">*</span>
-                          <span class="addCollectionLabel">RU/m</span>
-                          <span class="infoTooltip" role="tooltip" tabindex="0">
-                              <img class="infoImg" src="/info-bubble.svg" alt="More information">
-                              <span class="tooltiptext throughputRuInfo">
-                                  For each 100 Request Units per second (RU/s) provisioned, 1,000 Request Units
-                                  per
-                                  minute
-                                  (RU/m) can be provisioned. E.g.: for a container with 5,000 RU/s provisioned
-                                  with
-                                  RU/m
-                                  enabled, the RU/m budget will be 50,000 RU/m.
-                              </span>
-                          </span>
-                      </p>
-                      <div tabindex="0" data-bind="event: { keydown: onRupmOptionsKeyDown }" aria-label="RU/m">
-                          <div class="tab">
-                              <input type="radio" id="rupmOn2" name="rupmcoll2" value="on" class="radio"
-                                  data-bind="checked: rupm">
-                              <label for="rupmOn2">ON</label>
-                          </div>
-                          <div class="tab">
-                              <input type="radio" id="rupmOff2" name="rupmcoll2" value="off" class="radio"
-                                  data-bind="checked: rupm">
-                              <label for="rupmOff2">OFF</label>
-                          </div>
-                      </div>
-                  </div>
-              </div>
               <div data-bind="visible: partitionKeyVisible">
                   <p>
                       <span class="mandatoryStar">*</span>

src/Explorer/Panes/AddCollectionPane.ts

@@ -16,6 +16,7 @@ import { ContextualPaneBase } from "./ContextualPaneBase";
 import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
 import { createCollection } from "../../Common/dataAccess/createCollection";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { userContext } from "../../UserContext";
 
 export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
   isPreferredApiTable: ko.Computed<boolean>;
@@ -42,8 +43,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
   public partitionKeyVisible: ko.Computed<boolean>;
   public partitionKeyPattern: ko.Computed<string>;
   public partitionKeyTitle: ko.Computed<string>;
-  public rupm: ko.Observable<string>;
-  public rupmVisible: ko.Observable<boolean>;
   public storage: ko.Observable<string>;
   public throughputSinglePartition: ViewModels.Editable<number>;
   public throughputMultiPartition: ViewModels.Editable<number>;
@@ -143,12 +142,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
       }
       return "";
     });
-    this.rupm = ko.observable<string>(Constants.RUPMStates.off);
-    this.rupmVisible = ko.observable<boolean>(false);
-    const featureSubcription = this.container.features.subscribe(() => {
-      this.rupmVisible(this.container.isFeatureEnabled(Constants.Features.enableRupm));
-      featureSubcription.dispose();
-    });
 
     this.canExceedMaximumValue = ko.pureComputed(() => this.container.canExceedMaximumValue());
 
@@ -201,7 +194,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
           account.properties.readLocations.length) ||
         1;
       const multimaster = (account && account.properties && account.properties.enableMultipleWriteLocations) || false;
-      const rupmEnabled: boolean = this.rupm() === Constants.RUPMStates.on;
 
       let throughputSpendAckText: string;
       let estimatedSpend: string;
@@ -211,23 +203,15 @@ export default class AddCollectionPane extends ContextualPaneBase {
           serverId,
           regions,
           multimaster,
-          rupmEnabled,
           this.isSharedAutoPilotSelected()
         );
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          serverId,
-          regions,
-          multimaster,
-          rupmEnabled
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.sharedAutoPilotThroughput(),
           serverId,
           regions,
           multimaster,
-          rupmEnabled,
           this.isSharedAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
@@ -264,7 +248,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
           account.properties.readLocations.length) ||
         1;
       const multimaster = (account && account.properties && account.properties.enableMultipleWriteLocations) || false;
-      const rupmEnabled: boolean = this.rupm() === Constants.RUPMStates.on;
 
       let throughputSpendAckText: string;
       let estimatedSpend: string;
@@ -274,15 +257,13 @@ export default class AddCollectionPane extends ContextualPaneBase {
           serverId,
           regions,
           multimaster,
-          rupmEnabled,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedSpendHtml(
           this.throughputMultiPartition(),
           serverId,
           regions,
-          multimaster,
-          rupmEnabled
+          multimaster
         );
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
@@ -290,7 +271,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
           serverId,
           regions,
           multimaster,
-          rupmEnabled,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
@@ -686,11 +666,10 @@ export default class AddCollectionPane extends ContextualPaneBase {
         storage: this.storage(),
         offerThroughput: this._getThroughput(),
         partitionKey: this.partitionKey(),
-        databaseId: this.databaseId(),
-        rupm: this.rupm()
+        databaseId: this.databaseId()
       }),
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: this._getThroughput(),
@@ -788,12 +767,11 @@ export default class AddCollectionPane extends ContextualPaneBase {
         id: this.collectionId(),
         storage: this.storage(),
         partitionKey,
-        rupm: this.rupm(),
         uniqueKeyPolicy,
         collectionWithThroughputInShared: this.collectionWithThroughputInShared()
       }),
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: offerThroughput,
@@ -863,12 +841,11 @@ export default class AddCollectionPane extends ContextualPaneBase {
             id: this.collectionId(),
             storage: this.storage(),
             partitionKey,
-            rupm: this.rupm(),
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared()
           }),
           subscriptionType: SubscriptionType[this.container.subscriptionType()],
-          subscriptionQuotaId: this.container.quotaId(),
+          subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
@@ -898,12 +875,11 @@ export default class AddCollectionPane extends ContextualPaneBase {
             id: this.collectionId(),
             storage: this.storage(),
             partitionKey,
-            rupm: this.rupm(),
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared()
           },
           subscriptionType: SubscriptionType[this.container.subscriptionType()],
-          subscriptionQuotaId: this.container.quotaId(),
+          subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
@@ -981,20 +957,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
     return true;
   }
 
-  public onRupmOptionsKeyDown(source: any, event: KeyboardEvent): boolean {
-    if (event.key === "ArrowRight") {
-      this.rupm("off");
-      return false;
-    }
-
-    if (event.key === "ArrowLeft") {
-      this.rupm("on");
-      return false;
-    }
-
-    return true;
-  }
-
   public onEnableSynapseLinkButtonClicked() {
     this.container.openEnableSynapseLinkDialog();
   }
@@ -1018,16 +980,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
     }
 
     const throughput = this._getThroughput();
-    const maxThroughputWithRUPM =
-      SharedConstants.CollectionCreation.MaxRUPMPerPartition * this._calculateNumberOfPartitions();
-
-    if (this.rupm() === Constants.RUPMStates.on && throughput > maxThroughputWithRUPM) {
-      this.formErrors(
-        `The maximum supported provisioned throughput with RU/m enabled is ${maxThroughputWithRUPM} RU/s. Please turn off RU/m to incease thoughput above ${maxThroughputWithRUPM} RU/s.`
-      );
-      return false;
-    }
-
     if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !this.throughputSpendAck()) {
       this.formErrors(`Please acknowledge the estimated daily spend.`);
       return false;

src/Explorer/Panes/AddDatabasePane.ts

@@ -13,6 +13,7 @@ import { createDatabase } from "../../Common/dataAccess/createDatabase";
 import { configContext, Platform } from "../../ConfigContext";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { userContext } from "../../UserContext";
 
 export default class AddDatabasePane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
@@ -133,19 +134,12 @@ export default class AddDatabasePane extends ContextualPaneBase {
       let estimatedSpendAcknowledge: string;
       let estimatedSpend: string;
       if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          serverId,
-          regions,
-          multimaster,
-          false /*rupmEnabled*/
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
         estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
           serverId,
           regions,
           multimaster,
-          false /*rupmEnabled*/,
           this.isAutoPilotSelected()
         );
       } else {
@@ -160,7 +154,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
           serverId,
           regions,
           multimaster,
-          false /*rupmEnabled*/,
           this.isAutoPilotSelected()
         );
       }
@@ -258,7 +251,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
       databaseAccountName: this.container.databaseAccount().name,
       defaultExperience: this.container.defaultExperience(),
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         throughput: this.throughput(),
         flight: this.container.flight()
@@ -286,7 +279,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
       }),
       offerThroughput,
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         flight: this.container.flight()
       },
@@ -350,7 +343,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
       }),
       offerThroughput: offerThroughput,
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         flight: this.container.flight()
       },
@@ -374,7 +367,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
       }),
       offerThroughput: offerThroughput,
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         flight: this.container.flight()
       },

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -15,6 +15,7 @@ import { HashMap } from "../../Common/HashMap";
 import { configContext, Platform } from "../../ConfigContext";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { userContext } from "../../UserContext";
 
 export default class CassandraAddCollectionPane extends ContextualPaneBase {
   public createTableQuery: ko.Observable<string>;
@@ -138,19 +139,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       let estimatedSpend: string;
       let estimatedDedicatedSpendAcknowledge: string;
       if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          offerThroughput,
-          serverId,
-          regions,
-          multimaster,
-          false /*rupmEnabled*/
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
         estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
           serverId,
           regions,
           multimaster,
-          false /*rupmEnabled*/,
           this.isAutoPilotSelected()
         );
       } else {
@@ -165,7 +159,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
           serverId,
           regions,
           multimaster,
-          false /*rupmEnabled*/,
           this.isAutoPilotSelected()
         );
       }
@@ -190,19 +183,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       let estimatedSpend: string;
       let estimatedSharedSpendAcknowledge: string;
       if (!this.isSharedAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
-          this.keyspaceThroughput(),
-          serverId,
-          regions,
-          multimaster,
-          false /*rupmEnabled*/
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, regions, multimaster);
         estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.keyspaceThroughput(),
           serverId,
           regions,
           multimaster,
-          false /*rupmEnabled*/,
           this.isSharedAutoPilotSelected()
         );
       } else {
@@ -217,7 +203,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
           serverId,
           regions,
           multimaster,
-          false /*rupmEnabled*/,
           this.isSharedAutoPilotSelected()
         );
       }
@@ -312,11 +297,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         storage: Constants.BackendDefaults.multiPartitionStorageInGb,
         offerThroughput: this.throughput(),
         partitionKey: "",
-        databaseId: this.keyspaceId(),
-        rupm: false
+        databaseId: this.keyspaceId()
       }),
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
@@ -366,12 +350,11 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         offerThroughput: this.throughput(),
         partitionKey: "",
         databaseId: this.keyspaceId(),
-        rupm: false,
         hasDedicatedThroughput: this.dedicateTableThroughput()
       }),
       keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
-      subscriptionQuotaId: this.container.quotaId(),
+      subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
@@ -413,12 +396,11 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             offerThroughput: this.throughput(),
             partitionKey: "",
             databaseId: this.keyspaceId(),
-            rupm: false,
             hasDedicatedThroughput: this.dedicateTableThroughput()
           }),
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
           subscriptionType: SubscriptionType[this.container.subscriptionType()],
-          subscriptionQuotaId: this.container.quotaId(),
+          subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),
@@ -444,12 +426,11 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             offerThroughput: this.throughput(),
             partitionKey: "",
             databaseId: this.keyspaceId(),
-            rupm: false,
             hasDedicatedThroughput: this.dedicateTableThroughput()
           },
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
           subscriptionType: SubscriptionType[this.container.subscriptionType()],
-          subscriptionQuotaId: this.container.quotaId(),
+          subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -98,26 +98,21 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
     author: string,
     notebookContent: string | ImmutableNotebook,
     parentDomElement: HTMLElement,
-    isCodeOfConductEnabled: boolean,
     isLinkInjectionEnabled: boolean
   ): Promise<void> {
-    if (isCodeOfConductEnabled) {
-      try {
-        const response = await this.junoClient.isCodeOfConductAccepted();
-        if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
-          throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
-        }
-
-        this.isCodeOfConductAccepted = response.data;
-      } catch (error) {
-        handleError(
-          error,
-          "PublishNotebookPaneAdapter/isCodeOfConductAccepted",
-          "Failed to check if code of conduct was accepted"
-        );
+    try {
+      const response = await this.junoClient.isCodeOfConductAccepted();
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
       }
-    } else {
-      this.isCodeOfConductAccepted = true;
+
+      this.isCodeOfConductAccepted = response.data;
+    } catch (error) {
+      handleError(
+        error,
+        "PublishNotebookPaneAdapter/isCodeOfConductAccepted",
+        "Failed to check if code of conduct was accepted"
+      );
     }
 
     this.name = name;

src/Explorer/SplashScreen/SplashScreenComponent.less

@@ -47,7 +47,7 @@
         padding: 32px 16px;
         display: flex;
         background-color: @BaseLight;
-        border: 1px solid #E5E5E5;
+        border: 1px solid #949494;
         box-sizing: border-box;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         border-radius: 4px;

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -421,53 +421,47 @@ export default class TableEntityListViewModel extends DataTableViewModel {
    * Note that this also means that we can get less entities than the requested download size in a successful call.
    * See Microsoft Azure API Documentation at: https://msdn.microsoft.com/en-us/library/azure/dd135718.aspx
    */
-  private prefetchData(
+  private async prefetchData(
     tableQuery: Entities.ITableQuery,
     downloadSize: number,
     currentRetry: number = 0
-  ): Q.Promise<any> {
+  ): Promise<IListTableEntitiesSegmentedResult> {
     if (!this.cache.serverCallInProgress) {
       this.cache.serverCallInProgress = true;
       this.allDownloaded = false;
       this.lastPrefetchTime = new Date().getTime();
-      var time = this.lastPrefetchTime;
+      const time = this.lastPrefetchTime;
 
-      var promise: Q.Promise<IListTableEntitiesSegmentedResult>;
       if (this._documentIterator && this.continuationToken) {
         // TODO handle Cassandra case
+        const response = await this._documentIterator.fetchNext();
+        const entities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(response?.resources);
 
-        promise = Q(this._documentIterator.fetchNext().then(response => response.resources)).then(
-          (documents: any[]) => {
-            let entities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(documents);
-            let finalEntities: IListTableEntitiesSegmentedResult = <IListTableEntitiesSegmentedResult>{
-              Results: entities,
-              ContinuationToken: this._documentIterator.hasMoreResults()
-            };
-            return Q.resolve(finalEntities);
-          }
-        );
-      } else if (this.continuationToken && this.queryTablesTab.container.isPreferredApiCassandra()) {
-        promise = this.queryTablesTab.container.tableDataClient.queryDocuments(
-          this.queryTablesTab.collection,
-          this.cqlQuery(),
-          true,
-          this.continuationToken
-        );
-      } else {
-        let query = this.sqlQuery();
-        if (this.queryTablesTab.container.isPreferredApiCassandra()) {
-          query = this.cqlQuery();
-        }
-        promise = this.queryTablesTab.container.tableDataClient.queryDocuments(
-          this.queryTablesTab.collection,
-          query,
-          true
-        );
+        return {
+          Results: entities,
+          ContinuationToken: this._documentIterator.hasMoreResults()
+        };
       }
-      return promise
-        .then((result: IListTableEntitiesSegmentedResult) => {
+
+      try {
+        let documents: IListTableEntitiesSegmentedResult;
+        if (this.continuationToken && this.queryTablesTab.container.isPreferredApiCassandra()) {
+          documents = await this.queryTablesTab.container.tableDataClient.queryDocuments(
+            this.queryTablesTab.collection,
+            this.cqlQuery(),
+            true,
+            this.continuationToken
+          );
+        } else {
+          const query = this.queryTablesTab.container.isPreferredApiCassandra() ? this.cqlQuery() : this.sqlQuery();
+          documents = await this.queryTablesTab.container.tableDataClient.queryDocuments(
+            this.queryTablesTab.collection,
+            query,
+            true
+          );
+
           if (!this._documentIterator) {
-            this._documentIterator = result.iterator;
+            this._documentIterator = documents.iterator;
           }
           var actualDownloadSize: number = 0;
 
@@ -478,11 +472,11 @@ export default class TableEntityListViewModel extends DataTableViewModel {
             return Q.resolve(null);
           }
 
-          var entities = result.Results;
+          var entities = documents.Results;
           actualDownloadSize = entities.length;
 
           // Queries can fetch no results and still return a continuation header. See prefetchAndRender() method.
-          this.continuationToken = this.isCancelled ? null : result.ContinuationToken;
+          this.continuationToken = this.isCancelled ? null : documents.ContinuationToken;
 
           if (!this.continuationToken) {
             this.allDownloaded = true;
@@ -514,20 +508,22 @@ export default class TableEntityListViewModel extends DataTableViewModel {
           // For #2.1, set prefetch exceeds maximum retry number and end prefetch.
           // For #2.2, go to next round prefetch.
           if (this.allDownloaded || nextDownloadSize === 0) {
-            return Q.resolve(result);
+            return documents;
           }
 
           if (currentRetry >= TableEntityListViewModel._maximumNumberOfPrefetchRetries) {
-            result.ExceedMaximumRetries = true;
-            return Q.resolve(result);
+            documents.ExceedMaximumRetries = true;
+            return documents;
           }
-          return this.prefetchData(tableQuery, nextDownloadSize, currentRetry + 1);
-        })
-        .catch((error: Error) => {
-          this.cache.serverCallInProgress = false;
-          return Q.reject(error);
-        });
+
+          return await this.prefetchData(tableQuery, nextDownloadSize, currentRetry + 1);
+        }
+      } catch (error) {
+        this.cache.serverCallInProgress = false;
+        throw error;
+      }
     }
-    return null;
+
+    return undefined;
   }
 }

src/Explorer/Tables/TableDataClient.ts

@@ -4,6 +4,7 @@ import Q from "q";
 import { displayTokenRenewalPromptForStatus, getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
 import { AuthType } from "../../AuthType";
 import { ConsoleDataType } from "../../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { FeedOptions } from "@azure/cosmos";
 import * as Constants from "../../Common/Constants";
 import * as Entities from "./Entities";
 import * as HeadersUtility from "../../Common/HeadersUtility";
@@ -12,9 +13,12 @@ import * as TableConstants from "./Constants";
 import * as TableEntityProcessor from "./TableEntityProcessor";
 import * as ViewModels from "../../Contracts/ViewModels";
 import Explorer from "../Explorer";
-import { queryDocuments, deleteDocument, updateDocument, createDocument } from "../../Common/DocumentClientUtilityBase";
 import { configContext } from "../../ConfigContext";
 import { handleError } from "../../Common/ErrorHandlingUtils";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
+import { updateDocument } from "../../Common/dataAccess/updateDocument";
 
 export interface CassandraTableKeys {
   partitionKeys: CassandraTableKey[];
@@ -38,19 +42,19 @@ export abstract class TableDataClient {
     collection: ViewModels.Collection,
     originalDocument: any,
     newEntity: Entities.ITableEntity
-  ): Q.Promise<Entities.ITableEntity>;
+  ): Promise<Entities.ITableEntity>;
 
   public abstract queryDocuments(
     collection: ViewModels.Collection,
     query: string,
     shouldNotify?: boolean,
     paginationToken?: string
-  ): Q.Promise<Entities.IListTableEntitiesResult>;
+  ): Promise<Entities.IListTableEntitiesResult>;
 
   public abstract deleteDocuments(
     collection: ViewModels.Collection,
     entitiesToDelete: Entities.ITableEntity[]
-  ): Q.Promise<any>;
+  ): Promise<any>;
 }
 
 export class TablesAPIDataClient extends TableDataClient {
@@ -74,77 +78,63 @@ export class TablesAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
-  public updateDocument(
+  public async updateDocument(
     collection: ViewModels.Collection,
     originalDocument: any,
     entity: Entities.ITableEntity
-  ): Q.Promise<Entities.ITableEntity> {
-    const deferred = Q.defer<Entities.ITableEntity>();
-
-    updateDocument(
-      collection,
-      originalDocument,
-      TableEntityProcessor.convertEntityToNewDocument(<Entities.ITableEntityForTablesAPI>entity)
-    ).then(
-      (newDocument: any) => {
-        const newEntity = TableEntityProcessor.convertDocumentsToEntities([newDocument])[0];
-        deferred.resolve(newEntity);
-      },
-      reason => {
-        deferred.reject(reason);
-      }
-    );
-    return deferred.promise;
+  ): Promise<Entities.ITableEntity> {
+    try {
+      const newDocument = await updateDocument(
+        collection,
+        originalDocument,
+        TableEntityProcessor.convertEntityToNewDocument(<Entities.ITableEntityForTablesAPI>entity)
+      );
+      return TableEntityProcessor.convertDocumentsToEntities([newDocument])[0];
+    } catch (error) {
+      handleError(error, "TablesAPIDataClient/updateDocument");
+      throw error;
+    }
   }
 
-  public queryDocuments(
+  public async queryDocuments(
     collection: ViewModels.Collection,
     query: string
-  ): Q.Promise<Entities.IListTableEntitiesResult> {
-    const deferred = Q.defer<Entities.IListTableEntitiesResult>();
+  ): Promise<Entities.IListTableEntitiesResult> {
+    try {
+      const options = {
+        enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey()
+      } as FeedOptions;
+      const iterator = queryDocuments(collection.databaseId, collection.id(), query, options);
+      const response = await iterator.fetchNext();
+      const documents = response?.resources;
+      const entities = TableEntityProcessor.convertDocumentsToEntities(documents);
 
-    let options: any = {};
-    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-    queryDocuments(collection.databaseId, collection.id(), query, options).then(
-      iterator => {
-        iterator
-          .fetchNext()
-          .then(response => response.resources)
-          .then(
-            (documents: any[] = []) => {
-              let entities: Entities.ITableEntity[] = TableEntityProcessor.convertDocumentsToEntities(documents);
-              let finalEntities: Entities.IListTableEntitiesResult = <Entities.IListTableEntitiesResult>{
-                Results: entities,
-                ContinuationToken: iterator.hasMoreResults(),
-                iterator: iterator
-              };
-              deferred.resolve(finalEntities);
-            },
-            reason => {
-              deferred.reject(reason);
-            }
-          );
-      },
-      reason => {
-        deferred.reject(reason);
-      }
-    );
-    return deferred.promise;
+      return {
+        Results: entities,
+        ContinuationToken: iterator.hasMoreResults(),
+        iterator: iterator
+      };
+    } catch (error) {
+      handleError(error, "TablesAPIDataClient/queryDocuments", "Query documents failed");
+      throw error;
+    }
   }
 
-  public deleteDocuments(collection: ViewModels.Collection, entitiesToDelete: Entities.ITableEntity[]): Q.Promise<any> {
-    let documentsToDelete: any[] = TableEntityProcessor.convertEntitiesToDocuments(
+  public async deleteDocuments(
+    collection: ViewModels.Collection,
+    entitiesToDelete: Entities.ITableEntity[]
+  ): Promise<any> {
+    const documentsToDelete: any[] = TableEntityProcessor.convertEntitiesToDocuments(
       <Entities.ITableEntityForTablesAPI[]>entitiesToDelete,
       collection
     );
-    let promiseArray: Q.Promise<any>[] = [];
-    documentsToDelete &&
-      documentsToDelete.forEach(document => {
+
+    await Promise.all(
+      documentsToDelete?.map(async document => {
         document.id = ko.observable<string>(document.id);
-        let promise: Q.Promise<any> = deleteDocument(collection, document);
-        promiseArray.push(promise);
-      });
-    return Q.all(promiseArray);
+        await deleteDocument(collection, document);
+      })
+    );
   }
 }
 
@@ -180,10 +170,7 @@ export class CassandraAPIDataClient extends TableDataClient {
         (data: any) => {
           entity[TableConstants.EntityKeyNames.RowKey] = entity[this.getCassandraPartitionKeyProperty(collection)];
           entity[TableConstants.EntityKeyNames.RowKey]._ = entity[TableConstants.EntityKeyNames.RowKey]._.toString();
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully added new row to table ${collection.id()}`
-          );
+          NotificationConsoleUtils.logConsoleInfo(`Successfully added new row to table ${collection.id()}`);
           deferred.resolve(entity);
         },
         error => {
@@ -197,181 +184,149 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
-  public updateDocument(
+  public async updateDocument(
     collection: ViewModels.Collection,
     originalDocument: any,
     newEntity: Entities.ITableEntity
-  ): Q.Promise<Entities.ITableEntity> {
-    const notificationId = NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.InProgress,
-      `Updating row ${originalDocument.RowKey._}`
-    );
-    const deferred = Q.defer<Entities.ITableEntity>();
-    let promiseArray: Q.Promise<any>[] = [];
-    let query = `UPDATE ${collection.databaseId}.${collection.id()}`;
-    let isChange: boolean = false;
-    for (let property in newEntity) {
-      if (!originalDocument[property] || newEntity[property]._.toString() !== originalDocument[property]._.toString()) {
-        if (this.isStringType(newEntity[property].$)) {
-          query = `${query} SET ${property} = '${newEntity[property]._}',`;
-        } else {
-          query = `${query} SET ${property} = ${newEntity[property]._},`;
+  ): Promise<Entities.ITableEntity> {
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Updating row ${originalDocument.RowKey._}`);
+
+    try {
+      let whereSegment = " WHERE";
+      let keys: CassandraTableKey[] = collection.cassandraKeys.partitionKeys.concat(
+        collection.cassandraKeys.clusteringKeys
+      );
+      for (let keyIndex in keys) {
+        const key = keys[keyIndex].property;
+        const keyType = keys[keyIndex].type;
+        whereSegment += this.isStringType(keyType)
+          ? ` ${key} = '${newEntity[key]._}' AND`
+          : ` ${key} = ${newEntity[key]._} AND`;
+      }
+      whereSegment = whereSegment.slice(0, whereSegment.length - 4);
+
+      let updateQuery = `UPDATE ${collection.databaseId}.${collection.id()}`;
+      let isPropertyUpdated = false;
+      for (let property in newEntity) {
+        if (
+          !originalDocument[property] ||
+          newEntity[property]._.toString() !== originalDocument[property]._.toString()
+        ) {
+          updateQuery += this.isStringType(newEntity[property].$)
+            ? ` SET ${property} = '${newEntity[property]._}',`
+            : ` SET ${property} = ${newEntity[property]._},`;
+          isPropertyUpdated = true;
         }
-        isChange = true;
       }
-    }
-    query = query.slice(0, query.length - 1);
-    let whereSegment = " WHERE";
-    let keys: CassandraTableKey[] = collection.cassandraKeys.partitionKeys.concat(
-      collection.cassandraKeys.clusteringKeys
-    );
-    for (let keyIndex in keys) {
-      const key = keys[keyIndex].property;
-      const keyType = keys[keyIndex].type;
-      if (this.isStringType(keyType)) {
-        whereSegment = `${whereSegment} ${key} = '${newEntity[key]._}' AND`;
-      } else {
-        whereSegment = `${whereSegment} ${key} = ${newEntity[key]._} AND`;
+
+      if (isPropertyUpdated) {
+        updateQuery = updateQuery.slice(0, updateQuery.length - 1);
+        updateQuery += whereSegment;
+        await this.queryDocuments(collection, updateQuery);
       }
-    }
-    whereSegment = whereSegment.slice(0, whereSegment.length - 4);
-    query = query + whereSegment;
-    if (isChange) {
-      promiseArray.push(this.queryDocuments(collection, query));
-    }
-    query = `DELETE `;
-    for (let property in originalDocument) {
-      if (property !== TableConstants.EntityKeyNames.RowKey && !newEntity[property] && !!originalDocument[property]) {
-        query = `${query} ${property},`;
-      }
-    }
-    if (query.length > 7) {
-      query = query.slice(0, query.length - 1);
-      query = `${query} FROM ${collection.databaseId}.${collection.id()}${whereSegment}`;
-      promiseArray.push(this.queryDocuments(collection, query));
-    }
-    Q.all(promiseArray)
-      .then(
-        (data: any) => {
-          newEntity[TableConstants.EntityKeyNames.RowKey] = originalDocument[TableConstants.EntityKeyNames.RowKey];
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully updated row ${newEntity.RowKey._}`
-          );
-          deferred.resolve(newEntity);
-        },
-        error => {
-          handleError(error, "UpdateRowCassandra", `Failed to update row ${newEntity.RowKey._}`);
-          deferred.reject(error);
+
+      let deleteQuery = `DELETE `;
+      let isPropertyDeleted = false;
+      for (let property in originalDocument) {
+        if (property !== TableConstants.EntityKeyNames.RowKey && !newEntity[property] && !!originalDocument[property]) {
+          deleteQuery += ` ${property},`;
+          isPropertyDeleted = true;
         }
-      )
-      .finally(() => {
-        NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
-      });
-    return deferred.promise;
+      }
+
+      if (isPropertyDeleted) {
+        deleteQuery = deleteQuery.slice(0, deleteQuery.length - 1);
+        deleteQuery += ` FROM ${collection.databaseId}.${collection.id()}${whereSegment}`;
+        await this.queryDocuments(collection, deleteQuery);
+      }
+
+      newEntity[TableConstants.EntityKeyNames.RowKey] = originalDocument[TableConstants.EntityKeyNames.RowKey];
+      NotificationConsoleUtils.logConsoleInfo(`Successfully updated row ${newEntity.RowKey._}`);
+      return newEntity;
+    } catch (error) {
+      handleError(error, "UpdateRowCassandra", "Failed to update row ${newEntity.RowKey._}");
+      throw error;
+    } finally {
+      clearMessage();
+    }
   }
 
-  public queryDocuments(
+  public async queryDocuments(
     collection: ViewModels.Collection,
     query: string,
     shouldNotify?: boolean,
     paginationToken?: string
-  ): Q.Promise<Entities.IListTableEntitiesResult> {
-    let notificationId: string;
-    if (shouldNotify) {
-      notificationId = NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.InProgress,
-        `Querying rows for table ${collection.id()}`
-      );
-    }
-    const deferred = Q.defer<Entities.IListTableEntitiesResult>();
-    const authType = window.authType;
-    const apiEndpoint: string =
-      authType === AuthType.EncryptedToken
-        ? Constants.CassandraBackend.guestQueryApi
-        : Constants.CassandraBackend.queryApi;
-    $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
-      type: "POST",
-      data: {
-        accountName: collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
-        cassandraEndpoint: this.trimCassandraEndpoint(
-          collection.container.databaseAccount().properties.cassandraEndpoint
-        ),
-        resourceId: collection.container.databaseAccount().id,
-        keyspaceId: collection.databaseId,
-        tableId: collection.id(),
-        query: query,
-        paginationToken: paginationToken
-      },
-      beforeSend: this.setAuthorizationHeader,
-      error: this.handleAjaxError,
-      cache: false
-    })
-      .then(
-        (data: any) => {
-          if (shouldNotify) {
-            NotificationConsoleUtils.logConsoleMessage(
-              ConsoleDataType.Info,
-              `Successfully fetched ${data.result.length} rows for table ${collection.id()}`
-            );
-          }
-          deferred.resolve({
-            Results: data.result,
-            ContinuationToken: data.paginationToken
-          });
+  ): Promise<Entities.IListTableEntitiesResult> {
+    const clearMessage =
+      shouldNotify && NotificationConsoleUtils.logConsoleProgress(`Querying rows for table ${collection.id()}`);
+    try {
+      const authType = window.authType;
+      const apiEndpoint: string =
+        authType === AuthType.EncryptedToken
+          ? Constants.CassandraBackend.guestQueryApi
+          : Constants.CassandraBackend.queryApi;
+      const data: any = await $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+        type: "POST",
+        data: {
+          accountName:
+            collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
+          cassandraEndpoint: this.trimCassandraEndpoint(
+            collection.container.databaseAccount().properties.cassandraEndpoint
+          ),
+          resourceId: collection.container.databaseAccount().id,
+          keyspaceId: collection.databaseId,
+          tableId: collection.id(),
+          query,
+          paginationToken
         },
-        (error: any) => {
-          if (shouldNotify) {
-            handleError(error, "QueryDocumentsCassandra", `Failed to query rows for table ${collection.id()}`);
-          }
-          deferred.reject(error);
-        }
-      )
-      .done(() => {
-        if (shouldNotify) {
-          NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
-        }
+        beforeSend: this.setAuthorizationHeader,
+        error: this.handleAjaxError,
+        cache: false
       });
-    return deferred.promise;
+      shouldNotify &&
+        NotificationConsoleUtils.logConsoleInfo(
+          `Successfully fetched ${data.result.length} rows for table ${collection.id()}`
+        );
+      return {
+        Results: data.result,
+        ContinuationToken: data.paginationToken
+      };
+    } catch (error) {
+      shouldNotify &&
+        handleError(error, "QueryDocumentsCassandra", `Failed to query rows for table ${collection.id()}`);
+      throw error;
+    } finally {
+      clearMessage?.();
+    }
   }
 
-  public deleteDocuments(collection: ViewModels.Collection, entitiesToDelete: Entities.ITableEntity[]): Q.Promise<any> {
+  public async deleteDocuments(
+    collection: ViewModels.Collection,
+    entitiesToDelete: Entities.ITableEntity[]
+  ): Promise<any> {
     const query = `DELETE FROM ${collection.databaseId}.${collection.id()} WHERE `;
-    let promiseArray: Q.Promise<any>[] = [];
-    let partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
-    for (let i = 0, len = entitiesToDelete.length; i < len; i++) {
-      let currEntityToDelete: Entities.ITableEntity = entitiesToDelete[i];
-      let currQuery = query;
-      let partitionKeyValue = currEntityToDelete[partitionKeyProperty];
-      if (partitionKeyValue._ != null && this.isStringType(partitionKeyValue.$)) {
-        currQuery = `${currQuery}${partitionKeyProperty} = '${partitionKeyValue._}' AND `;
-      } else {
-        currQuery = `${currQuery}${partitionKeyProperty} = ${partitionKeyValue._} AND `;
-      }
-      currQuery = currQuery.slice(0, currQuery.length - 5);
-      const notificationId = NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.InProgress,
-        `Deleting row ${currEntityToDelete.RowKey._}`
-      );
-      promiseArray.push(
-        this.queryDocuments(collection, currQuery)
-          .then(
-            () => {
-              NotificationConsoleUtils.logConsoleMessage(
-                ConsoleDataType.Info,
-                `Successfully deleted row ${currEntityToDelete.RowKey._}`
-              );
-            },
-            error => {
-              handleError(error, "DeleteRowCassandra", `Error while deleting row ${currEntityToDelete.RowKey._}`);
-            }
-          )
-          .finally(() => {
-            NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
-          })
-      );
-    }
-    return Q.all(promiseArray);
+    const partitionKeyProperty = this.getCassandraPartitionKeyProperty(collection);
+
+    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._}`;
+
+        try {
+          await this.queryDocuments(collection, currQuery);
+          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted row ${currEntityToDelete.RowKey._}`);
+        } catch (error) {
+          handleError(error, "DeleteRowCassandra", `Error while deleting row ${currEntityToDelete.RowKey._}`);
+          throw error;
+        } finally {
+          clearMessage();
+        }
+      })
+    );
   }
 
   public createKeyspace(

src/Explorer/Tabs/ConflictsTab.ts

@@ -16,18 +16,16 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import DiscardIcon from "../../../images/discard.svg";
 import DeleteIcon from "../../../images/delete.svg";
-import { QueryIterator, ItemDefinition, Resource, ConflictDefinition } from "@azure/cosmos";
+import { QueryIterator, Resource, ConflictDefinition, FeedOptions } from "@azure/cosmos";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
 import Explorer from "../Explorer";
-import {
-  queryConflicts,
-  deleteConflict,
-  deleteDocument,
-  createDocument,
-  updateDocument
-} from "../../Common/DocumentClientUtilityBase";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import { updateDocument } from "../../Common/dataAccess/updateDocument";
+import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
+import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
 
 export default class ConflictsTab extends TabsBase {
   public selectedConflictId: ko.Observable<ConflictId>;
@@ -225,25 +223,15 @@ export default class ConflictsTab extends TabsBase {
     });
   }
 
-  public refreshDocumentsGrid(): Q.Promise<any> {
-    // clear documents grid
-    this.conflictIds([]);
-    return this.createIterator()
-      .then(
-        // reset iterator
-        iterator => {
-          this._documentsIterator = iterator;
-        }
-      )
-      .then(
-        // load documents
-        () => {
-          return this.loadNextPage();
-        }
-      )
-      .catch(error => {
-        window.alert(getErrorMessage(error));
-      });
+  public async refreshDocumentsGrid(): Promise<void> {
+    try {
+      // clear documents grid
+      this.conflictIds([]);
+      this._documentsIterator = this.createIterator();
+      await this.loadNextPage();
+    } catch (error) {
+      window.alert(getErrorMessage(error));
+    }
   }
 
   public onRefreshButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
@@ -265,9 +253,9 @@ export default class ConflictsTab extends TabsBase {
     return Q();
   }
 
-  public onAcceptChangesClick = (): Q.Promise<any> => {
+  public onAcceptChangesClick = async (): Promise<void> => {
     if (this.isEditorDirty() && !this._isIgnoreDirtyEditor()) {
-      return Q();
+      return;
     }
 
     this.isExecutionError(false);
@@ -285,81 +273,79 @@ export default class ConflictsTab extends TabsBase {
       conflictResourceId: selectedConflict.resourceId
     });
 
-    let operationPromise: Q.Promise<any> = Q();
-    if (selectedConflict.operationType === Constants.ConflictOperationType.Replace) {
-      const documentContent = JSON.parse(this.selectedConflictContent());
+    try {
+      if (selectedConflict.operationType === Constants.ConflictOperationType.Replace) {
+        const documentContent = JSON.parse(this.selectedConflictContent());
 
-      operationPromise = updateDocument(
-        this.collection,
-        selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty]),
-        documentContent
-      );
-    }
+        await updateDocument(
+          this.collection,
+          selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty]),
+          documentContent
+        );
+      }
 
-    if (selectedConflict.operationType === Constants.ConflictOperationType.Create) {
-      const documentContent = JSON.parse(this.selectedConflictContent());
+      if (selectedConflict.operationType === Constants.ConflictOperationType.Create) {
+        const documentContent = JSON.parse(this.selectedConflictContent());
 
-      operationPromise = createDocument(this.collection, documentContent);
-    }
+        await createDocument(this.collection, documentContent);
+      }
 
-    if (selectedConflict.operationType === Constants.ConflictOperationType.Delete && !!this.selectedConflictContent()) {
-      const documentContent = JSON.parse(this.selectedConflictContent());
+      if (
+        selectedConflict.operationType === Constants.ConflictOperationType.Delete &&
+        !!this.selectedConflictContent()
+      ) {
+        const documentContent = JSON.parse(this.selectedConflictContent());
 
-      operationPromise = deleteDocument(
-        this.collection,
-        selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty])
-      );
-    }
+        await deleteDocument(
+          this.collection,
+          selectedConflict.buildDocumentIdFromConflict(documentContent[selectedConflict.partitionKeyProperty])
+        );
+      }
 
-    return operationPromise
-      .then(
-        () => {
-          return deleteConflict(this.collection, selectedConflict).then(() => {
-            this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
-            this.selectedConflictContent("");
-            this.selectedConflictCurrent("");
-            this.selectedConflictId(null);
-            this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-            TelemetryProcessor.traceSuccess(
-              Action.ResolveConflict,
-              {
-                databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-                defaultExperience: this.collection && this.collection.container.defaultExperience(),
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-                conflictResourceType: selectedConflict.resourceType,
-                conflictOperationType: selectedConflict.operationType,
-                conflictResourceId: selectedConflict.resourceId
-              },
-              startKey
-            );
-          });
+      await deleteConflict(this.collection, selectedConflict);
+      this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
+      this.selectedConflictContent("");
+      this.selectedConflictCurrent("");
+      this.selectedConflictId(null);
+      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+      TelemetryProcessor.traceSuccess(
+        Action.ResolveConflict,
+        {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.tabTitle(),
+          conflictResourceType: selectedConflict.resourceType,
+          conflictOperationType: selectedConflict.operationType,
+          conflictResourceId: selectedConflict.resourceId
         },
-        error => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          window.alert(errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.ResolveConflict,
-            {
-              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              conflictResourceType: selectedConflict.resourceType,
-              conflictOperationType: selectedConflict.operationType,
-              conflictResourceId: selectedConflict.resourceId,
-              error: errorMessage,
-              errorStack: getErrorStack(error)
-            },
-            startKey
-          );
-        }
-      )
-      .finally(() => this.isExecuting(false));
+        startKey
+      );
+    } catch (error) {
+      this.isExecutionError(true);
+      const errorMessage = getErrorMessage(error);
+      window.alert(errorMessage);
+      TelemetryProcessor.traceFailure(
+        Action.ResolveConflict,
+        {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.tabTitle(),
+          conflictResourceType: selectedConflict.resourceType,
+          conflictOperationType: selectedConflict.operationType,
+          conflictResourceId: selectedConflict.resourceId,
+          error: errorMessage,
+          errorStack: getErrorStack(error)
+        },
+        startKey
+      );
+    } finally {
+      this.isExecuting(false);
+    }
   };
 
-  public onDeleteClick = (): Q.Promise<any> => {
+  public onDeleteClick = async (): Promise<void> => {
     this.isExecutionError(false);
     this.isExecuting(true);
 
@@ -375,50 +361,48 @@ export default class ConflictsTab extends TabsBase {
       conflictResourceId: selectedConflict.resourceId
     });
 
-    return deleteConflict(this.collection, selectedConflict)
-      .then(
-        () => {
-          this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
-          this.selectedConflictContent("");
-          this.selectedConflictCurrent("");
-          this.selectedConflictId(null);
-          this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-          TelemetryProcessor.traceSuccess(
-            Action.DeleteConflict,
-            {
-              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              conflictResourceType: selectedConflict.resourceType,
-              conflictOperationType: selectedConflict.operationType,
-              conflictResourceId: selectedConflict.resourceId
-            },
-            startKey
-          );
+    try {
+      await deleteConflict(this.collection, selectedConflict);
+      this.conflictIds.remove((conflictId: ConflictId) => conflictId.rid === selectedConflict.rid);
+      this.selectedConflictContent("");
+      this.selectedConflictCurrent("");
+      this.selectedConflictId(null);
+      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
+      TelemetryProcessor.traceSuccess(
+        Action.DeleteConflict,
+        {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.tabTitle(),
+          conflictResourceType: selectedConflict.resourceType,
+          conflictOperationType: selectedConflict.operationType,
+          conflictResourceId: selectedConflict.resourceId
         },
-        error => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          window.alert(errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.DeleteConflict,
-            {
-              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              conflictResourceType: selectedConflict.resourceType,
-              conflictOperationType: selectedConflict.operationType,
-              conflictResourceId: selectedConflict.resourceId,
-              error: errorMessage,
-              errorStack: getErrorStack(error)
-            },
-            startKey
-          );
-        }
-      )
-      .finally(() => this.isExecuting(false));
+        startKey
+      );
+    } catch (error) {
+      this.isExecutionError(true);
+      const errorMessage = getErrorMessage(error);
+      window.alert(errorMessage);
+      TelemetryProcessor.traceFailure(
+        Action.DeleteConflict,
+        {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.tabTitle(),
+          conflictResourceType: selectedConflict.resourceType,
+          conflictOperationType: selectedConflict.operationType,
+          conflictResourceId: selectedConflict.resourceId,
+          error: errorMessage,
+          errorStack: getErrorStack(error)
+        },
+        startKey
+      );
+    } finally {
+      this.isExecuting(false);
+    }
   };
 
   public onDiscardClick = (): Q.Promise<any> => {
@@ -445,60 +429,47 @@ export default class ConflictsTab extends TabsBase {
     return Q();
   }
 
-  public onTabClick(): Q.Promise<any> {
-    return super.onTabClick().then(() => {
-      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Conflicts);
-    });
+  public onTabClick(): void {
+    super.onTabClick();
+    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Conflicts);
   }
 
-  public onActivate(): Q.Promise<any> {
-    return super.onActivate().then(() => {
-      if (this._documentsIterator) {
-        return Q.resolve(this._documentsIterator);
-      }
+  public async onActivate(): Promise<void> {
+    super.onActivate();
 
-      return this.createIterator().then(
-        (iterator: QueryIterator<ItemDefinition & Resource>) => {
-          this._documentsIterator = iterator;
-          return this.loadNextPage();
-        },
-        error => {
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceFailure(
-              Action.Tab,
-              {
-                databaseAccountName: this.collection.container.databaseAccount().name,
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-                defaultExperience: this.collection.container.defaultExperience(),
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-                error: getErrorMessage(error),
-                errorStack: getErrorStack(error)
-              },
-              this.onLoadStartKey
-            );
-            this.onLoadStartKey = null;
-          }
+    if (!this._documentsIterator) {
+      try {
+        this._documentsIterator = await this.createIterator();
+        await this.loadNextPage();
+      } catch (error) {
+        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+          TelemetryProcessor.traceFailure(
+            Action.Tab,
+            {
+              databaseAccountName: this.collection.container.databaseAccount().name,
+              databaseName: this.collection.databaseId,
+              collectionName: this.collection.id(),
+              defaultExperience: this.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: getErrorMessage(error),
+              errorStack: getErrorStack(error)
+            },
+            this.onLoadStartKey
+          );
+          this.onLoadStartKey = null;
         }
-      );
-    });
+      }
+    }
   }
 
-  public onRefreshClick(): Q.Promise<any> {
-    return this.refreshDocumentsGrid().then(() => {
-      this.selectedConflictContent("");
-      this.selectedConflictId(null);
-      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-    });
-  }
-
-  public createIterator(): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
+  public createIterator(): QueryIterator<ConflictDefinition & Resource> {
     // TODO: Conflict Feed does not allow filtering atm
     const query: string = undefined;
-    let options: any = {};
-    options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
-    return queryConflicts(this.collection.databaseId, this.collection.id(), query, options);
+    const options = {
+      enableCrossPartitionQuery: HeadersUtility.shouldEnableCrossPartitionKey()
+    };
+    return queryConflicts(this.collection.databaseId, this.collection.id(), query, options as FeedOptions);
   }
 
   public loadNextPage(): Q.Promise<any> {

src/Explorer/Tabs/DatabaseSettingsTab.ts

@@ -155,8 +155,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
           this.overrideWithAutoPilotSettings() ? this.autoPilotThroughput() : this.throughput(),
           serverId,
           regions,
-          multimaster,
-          false /*rupmEnabled*/
+          multimaster
         );
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
@@ -231,9 +230,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
       return this.throughputTitle() + this.requestUnitsUsageCost();
     });
     this.pendingNotification = ko.observable<DataModels.Notification>();
-    this._offerReplacePending = ko.observable<boolean>(
-      !!this.database.offer()?.headers?.[Constants.HttpHeaders.offerReplacePending]
-    );
+    this._offerReplacePending = ko.observable<boolean>(!!this.database.offer()?.offerReplacePending);
     this.notificationStatusInfo = ko.observable<string>("");
     this.shouldShowNotificationStatusPrompt = ko.computed<boolean>(() => this.notificationStatusInfo().length > 0);
     this.warningMessage = ko.computed<string>(() => {
@@ -242,7 +239,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
       }
 
       const offer = this.database.offer();
-      if (offer?.headers?.[Constants.HttpHeaders.offerReplacePending]) {
+      if (offer?.offerReplacePending) {
         const throughput = offer.manualThroughput || offer.autoscaleMaxThroughput;
         return throughputApplyShortDelayMessage(this.isAutoPilotSelected(), throughput, this.database.id());
       }
@@ -432,11 +429,10 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     return Q();
   };
 
-  public onActivate(): Q.Promise<any> {
-    return super.onActivate().then(async () => {
-      this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
-      await this.database.loadOffer();
-    });
+  public async onActivate(): Promise<void> {
+    super.onActivate();
+    this.database.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
+    await this.database.loadOffer();
   }
 
   private _setBaseline() {

src/Explorer/Tabs/DocumentsTab.html

@@ -103,7 +103,7 @@
             <button
               class="filterbtnstyle queryButton"
               data-bind="
-                                click: onApplyFilterClick,
+                                click: refreshDocumentsGrid,
                                 enable: applyFilterButton.enabled"
               aria-label="Apply filter"
               tabindex="0"

src/Explorer/Tabs/DocumentsTab.ts

@@ -19,19 +19,24 @@ import SaveIcon from "../../../images/save-cosmos.svg";
 import DiscardIcon from "../../../images/discard.svg";
 import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
 import UploadIcon from "../../../images/Upload_16x16.svg";
-import { extractPartitionKey, PartitionKeyDefinition, QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
+import {
+  extractPartitionKey,
+  PartitionKeyDefinition,
+  QueryIterator,
+  ItemDefinition,
+  Resource,
+  Item
+} from "@azure/cosmos";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import {
-  readDocument,
-  queryDocuments,
-  deleteDocument,
-  updateDocument,
-  createDocument
-} from "../../Common/DocumentClientUtilityBase";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
+import { readDocument } from "../../Common/dataAccess/readDocument";
+import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import { updateDocument } from "../../Common/dataAccess/updateDocument";
+import { createDocument } from "../../Common/dataAccess/createDocument";
 
 export default class DocumentsTab extends TabsBase {
   public selectedDocumentId: ko.Observable<DocumentId>;
@@ -369,36 +374,22 @@ export default class DocumentsTab extends TabsBase {
     return true;
   };
 
-  public onApplyFilterClick(): Q.Promise<any> {
+  public async refreshDocumentsGrid(): Promise<void> {
     // clear documents grid
     this.documentIds([]);
-    return this.createIterator()
-      .then(
-        // reset iterator
-        iterator => {
-          this._documentsIterator = iterator;
-        }
-      )
-      .then(
-        // load documents
-        () => {
-          return this.loadNextPage();
-        }
-      )
-      .then(() => {
-        // collapse filter
-        this.appliedFilter(this.filterContent());
-        this.isFilterExpanded(false);
-        const focusElement = document.getElementById("errorStatusIcon");
-        focusElement && focusElement.focus();
-      })
-      .catch(error => {
-        window.alert(getErrorMessage(error));
-      });
-  }
 
-  public refreshDocumentsGrid(): Q.Promise<any> {
-    return this.onApplyFilterClick();
+    try {
+      // reset iterator
+      this._documentsIterator = this.createIterator();
+      // load documents
+      await this.loadNextPage();
+      // collapse filter
+      this.appliedFilter(this.filterContent());
+      this.isFilterExpanded(false);
+      document.getElementById("errorStatusIcon")?.focus();
+    } catch (error) {
+      window.alert(getErrorMessage(error));
+    }
   }
 
   public onRefreshButtonKeyDown = (source: any, event: KeyboardEvent): boolean => {
@@ -434,7 +425,7 @@ export default class DocumentsTab extends TabsBase {
     return Q();
   };
 
-  public onSaveNewDocumentClick = (): Q.Promise<any> => {
+  public onSaveNewDocumentClick = (): Promise<any> => {
     this.isExecutionError(false);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
       databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
@@ -502,7 +493,7 @@ export default class DocumentsTab extends TabsBase {
     return Q();
   };
 
-  public onSaveExisitingDocumentClick = (): Q.Promise<any> => {
+  public onSaveExisitingDocumentClick = (): Promise<any> => {
     const selectedDocumentId = this.selectedDocumentId();
     const documentContent = JSON.parse(this.selectedDocumentContent());
 
@@ -571,17 +562,15 @@ export default class DocumentsTab extends TabsBase {
     return Q();
   };
 
-  public onDeleteExisitingDocumentClick = (): Q.Promise<any> => {
+  public onDeleteExisitingDocumentClick = async (): Promise<void> => {
     const selectedDocumentId = this.selectedDocumentId();
     const msg = !this.isPreferredApiMongoDB
       ? "Are you sure you want to delete the selected item ?"
       : "Are you sure you want to delete the selected document ?";
 
     if (window.confirm(msg)) {
-      return this._deleteDocument(selectedDocumentId);
+      await this._deleteDocument(selectedDocumentId);
     }
-
-    return Q();
   };
 
   public onValidDocumentEdit(): Q.Promise<any> {
@@ -617,63 +606,50 @@ export default class DocumentsTab extends TabsBase {
     return Q();
   }
 
-  public onTabClick(): Q.Promise<any> {
-    return super.onTabClick().then(() => {
-      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
-    });
+  public onTabClick(): void {
+    super.onTabClick();
+    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
   }
 
-  public onActivate(): Q.Promise<any> {
-    return super.onActivate().then(() => {
-      if (this._documentsIterator) {
-        return Q.resolve(this._documentsIterator);
-      }
+  public async onActivate(): Promise<void> {
+    super.onActivate();
 
-      return this.createIterator().then(
-        (iterator: QueryIterator<ItemDefinition & Resource>) => {
-          this._documentsIterator = iterator;
-          return this.loadNextPage();
-        },
-        error => {
-          if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
-            TelemetryProcessor.traceFailure(
-              Action.Tab,
-              {
-                databaseAccountName: this.collection.container.databaseAccount().name,
-                databaseName: this.collection.databaseId,
-                collectionName: this.collection.id(),
-                defaultExperience: this.collection.container.defaultExperience(),
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle(),
-                error: getErrorMessage(error),
-                errorStack: getErrorStack(error)
-              },
-              this.onLoadStartKey
-            );
-            this.onLoadStartKey = null;
-          }
+    if (!this._documentsIterator) {
+      try {
+        this._documentsIterator = this.createIterator();
+        await this.loadNextPage();
+      } catch (error) {
+        if (this.onLoadStartKey != null && this.onLoadStartKey != undefined) {
+          TelemetryProcessor.traceFailure(
+            Action.Tab,
+            {
+              databaseAccountName: this.collection.container.databaseAccount().name,
+              databaseName: this.collection.databaseId,
+              collectionName: this.collection.id(),
+              defaultExperience: this.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle(),
+              error: getErrorMessage(error),
+              errorStack: getErrorStack(error)
+            },
+            this.onLoadStartKey
+          );
+          this.onLoadStartKey = null;
         }
-      );
-    });
+      }
+    }
   }
 
-  public onRefreshClick(): Q.Promise<any> {
-    return this.refreshDocumentsGrid().then(() => {
-      this.selectedDocumentContent("");
-      this.selectedDocumentId(null);
-      this.editorState(ViewModels.DocumentExplorerState.noDocumentSelected);
-    });
-  }
   private _isIgnoreDirtyEditor = (): boolean => {
     var msg: string = "Changes will be lost. Do you want to continue?";
     return window.confirm(msg);
   };
 
-  protected __deleteDocument(documentId: DocumentId): Q.Promise<any> {
+  protected __deleteDocument(documentId: DocumentId): Promise<void> {
     return deleteDocument(this.collection, documentId);
   }
 
-  private _deleteDocument(selectedDocumentId: DocumentId): Q.Promise<any> {
+  private _deleteDocument(selectedDocumentId: DocumentId): Promise<void> {
     this.isExecutionError(false);
     const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
       databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
@@ -684,7 +660,7 @@ export default class DocumentsTab extends TabsBase {
     this.isExecuting(true);
     return this.__deleteDocument(selectedDocumentId)
       .then(
-        (result: any) => {
+        () => {
           this.documentIds.remove((documentId: DocumentId) => documentId.rid === selectedDocumentId.rid);
           this.selectedDocumentContent("");
           this.selectedDocumentId(null);
@@ -720,7 +696,7 @@ export default class DocumentsTab extends TabsBase {
       .finally(() => this.isExecuting(false));
   }
 
-  public createIterator(): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
+  public createIterator(): QueryIterator<ItemDefinition & Resource> {
     let filters = this.lastFilterContents();
     const filter: string = this.filterContent().trim();
     const query: string = this.buildQuery(filter);
@@ -734,11 +710,10 @@ export default class DocumentsTab extends TabsBase {
     return queryDocuments(this.collection.databaseId, this.collection.id(), query, options);
   }
 
-  public selectDocument(documentId: DocumentId): Q.Promise<any> {
+  public async selectDocument(documentId: DocumentId): Promise<void> {
     this.selectedDocumentId(documentId);
-    return readDocument(this.collection, documentId).then((content: any) => {
-      this.initDocumentEditor(documentId, content);
-    });
+    const content = await readDocument(this.collection, documentId);
+    this.initDocumentEditor(documentId, content);
   }
 
   public loadNextPage(): Q.Promise<any> {

src/Explorer/Tabs/GraphTab.ts

@@ -114,10 +114,9 @@ export default class GraphTab extends TabsBase {
       : `${account.name}.graphs.azure.com:443/`;
   }
 
-  public onTabClick(): Q.Promise<any> {
-    return super.onTabClick().then(() => {
-      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Graph);
-    });
+  public onTabClick(): void {
+    super.onTabClick();
+    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Graph);
   }
 
   /**

src/Explorer/Tabs/MongoDocumentsTab.html

@@ -289,7 +289,7 @@
             <button
               class="filterbtnstyle queryButton"
               data-bind="
-                                click: onApplyFilterClick,
+                                click: refreshDocumentsGrid,
                                 enable: applyFilterButton.enabled"
             >
               Apply Filter

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -44,7 +44,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
     super.buildCommandBarOptions();
   }
 
-  public onSaveNewDocumentClick = (): Q.Promise<any> => {
+  public onSaveNewDocumentClick = (): Promise<any> => {
     const documentContent = JSON.parse(this.selectedDocumentContent());
     this.displayedError("");
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
@@ -78,12 +78,12 @@ export default class MongoDocumentsTab extends DocumentsTab {
         startKey
       );
       Logger.logError("Failed to save new document: Document shard key not defined", "MongoDocumentsTab");
-      return Q.reject("Document without shard key");
+      throw new Error("Document without shard key");
     }
 
     this.isExecutionError(false);
     this.isExecuting(true);
-    return Q(createDocument(this.collection.databaseId, this.collection, this.partitionKeyProperty, documentContent))
+    return createDocument(this.collection.databaseId, this.collection, this.partitionKeyProperty, documentContent)
       .then(
         (savedDocument: any) => {
           let partitionKeyArray = extractPartitionKey(
@@ -136,7 +136,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
       .finally(() => this.isExecuting(false));
   };
 
-  public onSaveExisitingDocumentClick = (): Q.Promise<any> => {
+  public onSaveExisitingDocumentClick = (): Promise<any> => {
     const selectedDocumentId = this.selectedDocumentId();
     const documentContent = this.selectedDocumentContent();
     this.isExecutionError(false);
@@ -148,7 +148,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
       tabTitle: this.tabTitle()
     });
 
-    return Q(updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent))
+    return updateDocument(this.collection.databaseId, this.collection, selectedDocumentId, documentContent)
       .then(
         (updatedDocument: any) => {
           let value: string = this.renderObjectForEditor(updatedDocument || {}, null, 4);
@@ -204,13 +204,10 @@ export default class MongoDocumentsTab extends DocumentsTab {
     return filter || "{}";
   }
 
-  public selectDocument(documentId: DocumentId): Q.Promise<any> {
+  public async selectDocument(documentId: DocumentId): Promise<void> {
     this.selectedDocumentId(documentId);
-    return Q(
-      readDocument(this.collection.databaseId, this.collection, documentId).then((content: any) => {
-        this.initDocumentEditor(documentId, content);
-      })
-    );
+    const content = await readDocument(this.collection.databaseId, this.collection, documentId);
+    this.initDocumentEditor(documentId, content);
   }
 
   public loadNextPage(): Q.Promise<any> {
@@ -330,7 +327,7 @@ export default class MongoDocumentsTab extends DocumentsTab {
     return partitionKey;
   }
 
-  protected __deleteDocument(documentId: DocumentId): Q.Promise<any> {
-    return Q(deleteDocument(this.collection.databaseId, this.collection, documentId));
+  protected __deleteDocument(documentId: DocumentId): Promise<void> {
+    return deleteDocument(this.collection.databaseId, this.collection, documentId);
   }
 }

src/Explorer/Tabs/MongoShellTab.ts

@@ -53,10 +53,9 @@ export default class MongoShellTab extends TabsBase {
     // }
   }
 
-  public onTabClick(): Q.Promise<any> {
-    return super.onTabClick().then(() => {
-      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
-    });
+  public onTabClick(): void {
+    super.onTabClick();
+    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
   }
 
   public handleMessage(event: MessageEvent) {

src/Explorer/Tabs/QueryTab.html

@@ -103,7 +103,7 @@
         </div>
         <json-editor
           params="{ content: queryResults, isReadOnly: true, ariaLabel: 'Query results' }"
-          data-bind="visible: queryResults().length > 0 && isResultToggled() && allResultsMetadata().length > 0 && !error()"
+          data-bind="visible: queryResults() && queryResults().length > 0 && isResultToggled() && allResultsMetadata().length > 0 && !error()"
         >
         </json-editor>
         <div

src/Explorer/Tabs/QueryTab.ts

@@ -15,9 +15,10 @@ import { QueryUtils } from "../../Utils/QueryUtils";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
 
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
-import { queryDocuments, queryDocumentsPage } from "../../Common/DocumentClientUtilityBase";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
+import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
 
 enum ToggleState {
   Result,
@@ -163,20 +164,19 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
     this._buildCommandBarOptions();
   }
 
-  public onTabClick(): Q.Promise<any> {
-    return super.onTabClick().then(() => {
-      this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Query);
-    });
+  public onTabClick(): void {
+    super.onTabClick();
+    this.collection && this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.Query);
   }
 
-  public onExecuteQueryClick = (): Q.Promise<any> => {
+  public onExecuteQueryClick = async (): Promise<void> => {
     const sqlStatement: string = this.selectedContent() || this.sqlQueryEditorContent();
     this.sqlStatementToExecute(sqlStatement);
     this.allResultsMetadata([]);
     this.queryResults("");
-    this._iterator = null;
+    this._iterator = undefined;
 
-    return this._executeQueryDocumentsPage(0);
+    await this._executeQueryDocumentsPage(0);
   };
 
   public onLoadQueryClick = (): void => {
@@ -191,13 +191,13 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
     this.collection && this.collection.container && this.collection.container.browseQueriesPane.open();
   };
 
-  public onFetchNextPageClick(): Q.Promise<any> {
+  public async onFetchNextPageClick(): Promise<void> {
     const allResultsMetadata = (this.allResultsMetadata && this.allResultsMetadata()) || [];
     const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
     const firstResultIndex: number = (metadata && Number(metadata.firstItemIndex)) || 1;
     const itemCount: number = (metadata && Number(metadata.itemCount)) || 0;
 
-    return this._executeQueryDocumentsPage(firstResultIndex + itemCount - 1);
+    await this._executeQueryDocumentsPage(firstResultIndex + itemCount - 1);
   }
 
   public onErrorDetailsClick = (src: any, event: MouseEvent): boolean => {
@@ -265,19 +265,18 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
     return true;
   };
 
-  private _executeQueryDocumentsPage(firstItemIndex: number): Q.Promise<any> {
+  private async _executeQueryDocumentsPage(firstItemIndex: number): Promise<any> {
     this.error("");
     this.roundTrips(undefined);
-    if (this._iterator == null) {
-      const queryIteratorPromise = this._initIterator();
-      return queryIteratorPromise.finally(() => this._queryDocumentsPage(firstItemIndex));
+    if (this._iterator === undefined) {
+      this._initIterator();
     }
 
-    return this._queryDocumentsPage(firstItemIndex);
+    await this._queryDocumentsPage(firstItemIndex);
   }
 
   // TODO: Position and enable spinner when request is in progress
-  private _queryDocumentsPage(firstItemIndex: number): Q.Promise<any> {
+  private async _queryDocumentsPage(firstItemIndex: number): Promise<void> {
     this.isExecutionError(false);
     this._resetAggregateQueryMetrics();
     const startKey: number = TelemetryProcessor.traceStart(Action.ExecuteQuery, {
@@ -289,90 +288,90 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
     let options: any = {};
     options.enableCrossPartitionQuery = HeadersUtility.shouldEnableCrossPartitionKey();
 
-    const queryDocuments = (firstItemIndex: number) =>
-      queryDocumentsPage(this.collection && this.collection.id(), this._iterator, firstItemIndex, options);
+    const queryDocuments = async (firstItemIndex: number) =>
+      await queryDocumentsPage(this.collection && this.collection.id(), this._iterator, firstItemIndex);
     this.isExecuting(true);
-    return QueryUtils.queryPagesUntilContentPresent(firstItemIndex, queryDocuments)
-      .then(
-        (queryResults: ViewModels.QueryResults) => {
-          const allResultsMetadata = (this.allResultsMetadata && this.allResultsMetadata()) || [];
-          const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
-          const resultsMetadata: ViewModels.QueryResultsMetadata = {
-            hasMoreResults: queryResults.hasMoreResults,
-            itemCount: queryResults.itemCount,
-            firstItemIndex: queryResults.firstItemIndex,
-            lastItemIndex: queryResults.lastItemIndex
-          };
-          this.allResultsMetadata.push(resultsMetadata);
-          this.activityId(queryResults.activityId);
-          this.roundTrips(queryResults.roundTrips);
 
-          this._updateQueryMetricsMap(queryResults.headers[Constants.HttpHeaders.queryMetrics]);
+    try {
+      const queryResults: ViewModels.QueryResults = await QueryUtils.queryPagesUntilContentPresent(
+        firstItemIndex,
+        queryDocuments
+      );
+      const allResultsMetadata = (this.allResultsMetadata && this.allResultsMetadata()) || [];
+      const metadata: ViewModels.QueryResultsMetadata = allResultsMetadata[allResultsMetadata.length - 1];
+      const resultsMetadata: ViewModels.QueryResultsMetadata = {
+        hasMoreResults: queryResults.hasMoreResults,
+        itemCount: queryResults.itemCount,
+        firstItemIndex: queryResults.firstItemIndex,
+        lastItemIndex: queryResults.lastItemIndex
+      };
+      this.allResultsMetadata.push(resultsMetadata);
+      this.activityId(queryResults.activityId);
+      this.roundTrips(queryResults.roundTrips);
 
-          if (queryResults.itemCount == 0 && metadata != null && metadata.itemCount >= 0) {
-            // we let users query for the next page because the SDK sometimes specifies there are more elements
-            // even though there aren't any so we should not update the prior query results.
-            return;
-          }
+      this._updateQueryMetricsMap(queryResults.headers[Constants.HttpHeaders.queryMetrics]);
 
-          const documents: any[] = queryResults.documents;
-          const results = this.renderObjectForEditor(documents, null, 4);
+      if (queryResults.itemCount == 0 && metadata != null && metadata.itemCount >= 0) {
+        // we let users query for the next page because the SDK sometimes specifies there are more elements
+        // even though there aren't any so we should not update the prior query results.
+        return;
+      }
 
-          const resultsDisplay: string =
-            queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
-          this.showingDocumentsDisplayText(resultsDisplay);
-          this.requestChargeDisplayText(`${queryResults.requestCharge} RUs`);
+      const documents: any[] = queryResults.documents;
+      const results = this.renderObjectForEditor(documents, null, 4);
 
-          if (!this.queryResults() && !results) {
-            const errorMessage: string = JSON.stringify({
-              error: `Returned no results after query execution`,
-              accountName: this.collection && this.collection.container.databaseAccount(),
-              databaseName: this.collection && this.collection.databaseId,
-              collectionName: this.collection && this.collection.id(),
-              sqlQuery: this.sqlStatementToExecute(),
-              hasMoreResults: resultsMetadata.hasMoreResults,
-              itemCount: resultsMetadata.itemCount,
-              responseHeaders: queryResults && queryResults.headers
-            });
-            Logger.logError(errorMessage, "QueryTab");
-          }
+      const resultsDisplay: string =
+        queryResults.itemCount > 0 ? `${queryResults.firstItemIndex} - ${queryResults.lastItemIndex}` : `0 - 0`;
+      this.showingDocumentsDisplayText(resultsDisplay);
+      this.requestChargeDisplayText(`${queryResults.requestCharge} RUs`);
 
-          this.queryResults(results);
+      if (!this.queryResults() && !results) {
+        const errorMessage: string = JSON.stringify({
+          error: `Returned no results after query execution`,
+          accountName: this.collection && this.collection.container.databaseAccount(),
+          databaseName: this.collection && this.collection.databaseId,
+          collectionName: this.collection && this.collection.id(),
+          sqlQuery: this.sqlStatementToExecute(),
+          hasMoreResults: resultsMetadata.hasMoreResults,
+          itemCount: resultsMetadata.itemCount,
+          responseHeaders: queryResults && queryResults.headers
+        });
+        Logger.logError(errorMessage, "QueryTab");
+      }
 
-          TelemetryProcessor.traceSuccess(
-            Action.ExecuteQuery,
-            {
-              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle()
-            },
-            startKey
-          );
+      this.queryResults(results);
+
+      TelemetryProcessor.traceSuccess(
+        Action.ExecuteQuery,
+        {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.tabTitle()
         },
-        (error: any) => {
-          this.isExecutionError(true);
-          const errorMessage = getErrorMessage(error);
-          this.error(errorMessage);
-          TelemetryProcessor.traceFailure(
-            Action.ExecuteQuery,
-            {
-              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
-              defaultExperience: this.collection && this.collection.container.defaultExperience(),
-              dataExplorerArea: Constants.Areas.Tab,
-              tabTitle: this.tabTitle(),
-              error: errorMessage,
-              errorStack: getErrorStack(error)
-            },
-            startKey
-          );
-          document.getElementById("error-display").focus();
-        }
-      )
-      .finally(() => {
-        this.isExecuting(false);
-        this.togglesOnFocus();
-      });
+        startKey
+      );
+    } catch (error) {
+      this.isExecutionError(true);
+      const errorMessage = getErrorMessage(error);
+      this.error(errorMessage);
+      TelemetryProcessor.traceFailure(
+        Action.ExecuteQuery,
+        {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.tabTitle(),
+          error: errorMessage,
+          errorStack: getErrorStack(error)
+        },
+        startKey
+      );
+      document.getElementById("error-display").focus();
+    } finally {
+      this.isExecuting(false);
+      this.togglesOnFocus();
+    }
   }
 
   private _updateQueryMetricsMap(metricsMap: { [partitionKeyRange: string]: DataModels.QueryMetrics }): void {
@@ -477,16 +476,17 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
     }
   }
 
-  protected _initIterator(): Q.Promise<MinimalQueryIterator> {
+  protected _initIterator(): void {
     const options: any = QueryTab.getIteratorOptions(this.collection);
     if (this._resourceTokenPartitionKey) {
       options.partitionKey = this._resourceTokenPartitionKey;
     }
 
-    return Q(
-      queryDocuments(this.collection.databaseId, this.collection.id(), this.sqlStatementToExecute(), options).then(
-        iterator => (this._iterator = iterator)
-      )
+    this._iterator = queryDocuments(
+      this.collection.databaseId,
+      this.collection.id(),
+      this.sqlStatementToExecute(),
+      options
     );
   }
 

src/Explorer/Tabs/QueryTablesTab.ts

@@ -161,17 +161,16 @@ export default class QueryTablesTab extends TabsBase {
     return null;
   };
 
-  public onActivate(): Q.Promise<any> {
-    return super.onActivate().then(() => {
-      const columns =
-        !!this.tableEntityListViewModel() &&
-        !!this.tableEntityListViewModel().table &&
-        this.tableEntityListViewModel().table.columns;
-      if (!!columns) {
-        columns.adjust();
-        $(window).resize();
-      }
-    });
+  public onActivate(): void {
+    super.onActivate();
+    const columns =
+      !!this.tableEntityListViewModel() &&
+      !!this.tableEntityListViewModel().table &&
+      this.tableEntityListViewModel().table.columns;
+    if (!!columns) {
+      columns.adjust();
+      $(window).resize();
+    }
   }
 
   protected getTabsButtons(): CommandButtonComponentProps[] {

src/Explorer/Tabs/ScriptTabBase.ts

@@ -186,12 +186,11 @@ export default abstract class ScriptTabBase extends TabsBase implements ViewMode
     this._setBaselines();
   }
 
-  public onTabClick(): Q.Promise<any> {
-    return super.onTabClick().then(() => {
-      if (this.isNew()) {
-        this.collection.selectedSubnodeKind(this.tabKind);
-      }
-    });
+  public onTabClick(): void {
+    super.onTabClick();
+    if (this.isNew()) {
+      this.collection.selectedSubnodeKind(this.tabKind);
+    }
   }
 
   public abstract onSaveClick: () => Promise<any>;

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -42,54 +42,49 @@ export default class SettingsTabV2 extends TabsBase {
     });
   }
 
-  public onActivate(): Q.Promise<unknown> {
-    this.isExecuting(true);
-    this.currentCollection.loadOffer().then(
-      () => {
-        // passed in options and set by parent as "Settings" by default
-        this.tabTitle(this.currentCollection.offer() ? "Settings" : "Scale & Settings");
-        this.offerRead(true);
-        this.options.getPendingNotification.then(
-          (data: DataModels.Notification) => {
-            this.notification = data;
-            this.notificationRead(true);
-            this.isExecuting(false);
-          },
-          error => {
-            const errorMessage = getErrorMessage(error);
-            this.notification = undefined;
-            this.notificationRead(true);
-            this.isExecuting(false);
-            traceFailure(
-              Action.Tab,
-              {
-                databaseAccountName: this.options.collection.container.databaseAccount().name,
-                databaseName: this.options.collection.databaseId,
-                collectionName: this.options.collection.id(),
-                defaultExperience: this.options.collection.container.defaultExperience(),
-                dataExplorerArea: Constants.Areas.Tab,
-                tabTitle: this.tabTitle,
-                error: errorMessage,
-                errorStack: getErrorStack(error)
-              },
-              this.options.onLoadStartKey
-            );
-            logConsoleError(
-              `Error while fetching container settings for container ${this.options.collection.id()}: ${errorMessage}`
-            );
-            throw error;
-          }
-        );
-      },
-      () => {
-        this.offerRead(true);
-        this.isExecuting(false);
-      }
-    );
+  public async onActivate(): Promise<void> {
+    try {
+      this.isExecuting(true);
+      await this.currentCollection.loadOffer();
+      // passed in options and set by parent as "Settings" by default
+      this.tabTitle(this.currentCollection.offer() ? "Settings" : "Scale & Settings");
 
-    return super.onActivate().then(() => {
-      this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.SettingsV2);
-    });
+      this.options.getPendingNotification.then(
+        (data: DataModels.Notification) => {
+          this.notification = data;
+          this.notificationRead(true);
+        },
+        error => {
+          const errorMessage = getErrorMessage(error);
+          this.notification = undefined;
+          this.notificationRead(true);
+          traceFailure(
+            Action.Tab,
+            {
+              databaseAccountName: this.options.collection.container.databaseAccount().name,
+              databaseName: this.options.collection.databaseId,
+              collectionName: this.options.collection.id(),
+              defaultExperience: this.options.collection.container.defaultExperience(),
+              dataExplorerArea: Constants.Areas.Tab,
+              tabTitle: this.tabTitle,
+              error: errorMessage,
+              errorStack: getErrorStack(error)
+            },
+            this.options.onLoadStartKey
+          );
+          logConsoleError(
+            `Error while fetching container settings for container ${this.options.collection.id()}: ${errorMessage}`
+          );
+          throw error;
+        }
+      );
+    } finally {
+      this.offerRead(true);
+      this.isExecuting(false);
+    }
+
+    super.onActivate();
+    this.collection.selectedSubnodeKind(ViewModels.CollectionTabKind.SettingsV2);
   }
 
   public getSettingsTabContainer(): Explorer {

src/Explorer/Tabs/TabsBase.ts

@@ -94,9 +94,8 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     });
   }
 
-  public onTabClick(): Q.Promise<any> {
+  public onTabClick(): void {
     this.getContainer().tabsManager.activateTab(this);
-    return Q();
   }
 
   protected updateSelectedNode(): void {
@@ -128,7 +127,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
     return this.onSpaceOrEnterKeyPress(event, () => this.onCloseTabButtonClick());
   };
 
-  public onActivate(): Q.Promise<any> {
+  public onActivate(): void {
     this.updateSelectedNode();
     if (!!this.collection) {
       this.collection.selectedSubnodeKind(this.tabKind);
@@ -151,7 +150,6 @@ export default class TabsBase extends WaitsForTemplateViewModel {
       tabTitle: this.tabTitle(),
       tabId: this.tabId
     });
-    return Q();
   }
 
   public onErrorDetailsClick = (src: any, event: MouseEvent): boolean => {

src/Explorer/Tabs/TabsManager.html

@@ -142,7 +142,7 @@
       <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
       <!-- /ko -->
 
-      <!-- ko if: $data.tabKind === 19 -->
+      <!-- ko if: $data.tabKind === 20 -->
       <settings-tab-v2 params="{data: $data}"></settings-tab-v2>
       <!-- /ko -->
     </div>

src/Explorer/Tree/Collection.test.ts

@@ -10,10 +10,9 @@ describe("Collection", () => {
     container: Explorer,
     databaseId: string,
     data: DataModels.Collection,
-    quotaInfo: DataModels.CollectionQuotaInfo,
     offer: DataModels.Offer
   ): Collection {
-    return new Collection(container, databaseId, data, quotaInfo, offer);
+    return new Collection(container, databaseId, data);
   }
 
   function generateMockCollectionsDataModelWithPartitionKey(
@@ -50,7 +49,7 @@ describe("Collection", () => {
     });
     mockContainer.deleteCollectionText = ko.observable<string>("delete collection");
 
-    return generateCollection(mockContainer, "abc", data, {} as DataModels.CollectionQuotaInfo, {} as DataModels.Offer);
+    return generateCollection(mockContainer, "abc", data, {} as DataModels.Offer);
   }
 
   describe("Partition key path parsing", () => {

src/Explorer/Tree/Collection.ts

@@ -8,9 +8,8 @@ import * as Constants from "../../Common/Constants";
 import { readStoredProcedures } from "../../Common/dataAccess/readStoredProcedures";
 import { readTriggers } from "../../Common/dataAccess/readTriggers";
 import { readUserDefinedFunctions } from "../../Common/dataAccess/readUserDefinedFunctions";
-import { createDocument } from "../../Common/DocumentClientUtilityBase";
 import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
-import { readCollectionQuotaInfo } from "../../Common/dataAccess/readCollectionQuotaInfo";
+import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
 import * as Logger from "../../Common/Logger";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -37,9 +36,9 @@ import UserDefinedFunction from "./UserDefinedFunction";
 import { configContext, Platform } from "../../ConfigContext";
 import Explorer from "../Explorer";
 import { userContext } from "../../UserContext";
-import TabsBase from "../Tabs/TabsBase";
 import { fetchPortalNotifications } from "../../Common/PortalNotifications";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { createDocument } from "../../Common/dataAccess/createDocument";
 
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
@@ -54,7 +53,8 @@ export default class Collection implements ViewModels.Collection {
   public defaultTtl: ko.Observable<number>;
   public indexingPolicy: ko.Observable<DataModels.IndexingPolicy>;
   public uniqueKeyPolicy: DataModels.UniqueKeyPolicy;
-  public quotaInfo: ko.Observable<DataModels.CollectionQuotaInfo>;
+  public usageSizeInKB: ko.Observable<number>;
+
   public offer: ko.Observable<DataModels.Offer>;
   public conflictResolutionPolicy: ko.Observable<DataModels.ConflictResolutionPolicy>;
   public changeFeedPolicy: ko.Observable<DataModels.ChangeFeedPolicy>;
@@ -95,13 +95,7 @@ export default class Collection implements ViewModels.Collection {
   public userDefinedFunctionsFocused: ko.Observable<boolean>;
   public triggersFocused: ko.Observable<boolean>;
 
-  constructor(
-    container: Explorer,
-    databaseId: string,
-    data: DataModels.Collection,
-    quotaInfo: DataModels.CollectionQuotaInfo,
-    offer: DataModels.Offer
-  ) {
+  constructor(container: Explorer, databaseId: string, data: DataModels.Collection) {
     this.nodeKind = "Collection";
     this.container = container;
     this.self = data._self;
@@ -113,8 +107,8 @@ export default class Collection implements ViewModels.Collection {
     this.id = ko.observable(data.id);
     this.defaultTtl = ko.observable(data.defaultTtl);
     this.indexingPolicy = ko.observable(data.indexingPolicy);
-    this.quotaInfo = ko.observable(quotaInfo);
-    this.offer = ko.observable(offer);
+    this.usageSizeInKB = ko.observable();
+    this.offer = ko.observable();
     this.conflictResolutionPolicy = ko.observable(data.conflictResolutionPolicy);
     this.changeFeedPolicy = ko.observable<DataModels.ChangeFeedPolicy>(data.changeFeedPolicy);
     this.analyticalStorageTtl = ko.observable(data.analyticalStorageTtl);
@@ -557,7 +551,7 @@ export default class Collection implements ViewModels.Collection {
 
     const tabTitle = !this.offer() ? "Settings" : "Scale & Settings";
     const pendingNotificationsPromise: Q.Promise<DataModels.Notification> = this._getPendingThroughputSplitNotification();
-    const matchingTabs = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Settings, tab => {
+    const matchingTabs = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.SettingsV2, tab => {
       return tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id();
     });
 
@@ -607,14 +601,6 @@ export default class Collection implements ViewModels.Collection {
     }
   };
 
-  private async loadCollectionQuotaInfo(): Promise<void> {
-    // TODO: Use the collection entity cache to get quota info
-    const quotaInfoWithUniqueKeyPolicy = await readCollectionQuotaInfo(this);
-    this.uniqueKeyPolicy = quotaInfoWithUniqueKeyPolicy.uniqueKeyPolicy;
-    const quotaInfo = _.omit(quotaInfoWithUniqueKeyPolicy, "uniqueKeyPolicy");
-    this.quotaInfo(quotaInfo);
-  }
-
   public onNewQueryClick(source: any, event: MouseEvent, queryText?: string) {
     const collection: ViewModels.Collection = source.collection || source;
     const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
@@ -1105,8 +1091,7 @@ export default class Collection implements ViewModels.Collection {
     return deferred.promise;
   }
 
-  private _createDocumentsFromFile(fileName: string, documentContent: string): Q.Promise<UploadDetailsRecord> {
-    const deferred: Q.Deferred<UploadDetailsRecord> = Q.defer();
+  private async _createDocumentsFromFile(fileName: string, documentContent: string): Promise<UploadDetailsRecord> {
     const record: UploadDetailsRecord = {
       fileName: fileName,
       numSucceeded: 0,
@@ -1116,39 +1101,25 @@ export default class Collection implements ViewModels.Collection {
 
     try {
       const content = JSON.parse(documentContent);
-      const promises: Array<Q.Promise<any>> = [];
-
-      const triggerCreateDocument: (documentContent: any) => Q.Promise<any> = (documentContent: any) => {
-        return createDocument(this, documentContent).then(
-          doc => {
-            record.numSucceeded++;
-            return Q.resolve();
-          },
-          error => {
-            record.numFailed++;
-            record.errors = [...record.errors, getErrorMessage(error)];
-            return Q.resolve();
-          }
-        );
-      };
 
       if (Array.isArray(content)) {
-        for (let i = 0; i < content.length; i++) {
-          promises.push(triggerCreateDocument(content[i]));
-        }
+        await Promise.all(
+          content.map(async documentContent => {
+            await createDocument(this, documentContent);
+            record.numSucceeded++;
+          })
+        );
       } else {
-        promises.push(triggerCreateDocument(content));
+        await createDocument(this, documentContent);
+        record.numSucceeded++;
       }
 
-      Q.all(promises).then(() => {
-        deferred.resolve(record);
-      });
-    } catch (e) {
+      return record;
+    } catch (error) {
       record.numFailed++;
-      record.errors = [...record.errors, e.message];
-      deferred.resolve(record);
+      record.errors = [...record.errors, error.message];
+      return record;
     }
-    return deferred.promise;
   }
 
   private _getPendingThroughputSplitNotification(): Q.Promise<DataModels.Notification> {
@@ -1287,7 +1258,7 @@ export default class Collection implements ViewModels.Collection {
 
       try {
         this.offer(await readCollectionOffer(params));
-        await this.loadCollectionQuotaInfo();
+        this.usageSizeInKB(await getCollectionUsageSizeInKB(this.databaseId, this.id()));
 
         TelemetryProcessor.traceSuccess(
           Action.LoadOffers,

src/Explorer/Tree/ConflictId.ts

@@ -6,7 +6,7 @@ import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { extractPartitionKey } from "@azure/cosmos";
 import ConflictsTab from "../Tabs/ConflictsTab";
-import { readDocument } from "../../Common/DocumentClientUtilityBase";
+import { readDocument } from "../../Common/dataAccess/readDocument";
 
 export default class ConflictId {
   public container: ConflictsTab;
@@ -59,41 +59,42 @@ export default class ConflictId {
     return;
   }
 
-  public loadConflict(): Q.Promise<any> {
-    const conflictsTab = this.container;
+  public async loadConflict(): Promise<void> {
     this.container.selectedConflictId(this);
 
     if (this.operationType === Constants.ConflictOperationType.Create) {
       this.container.initDocumentEditorForCreate(this, this.content);
-      return Q();
+      return;
     }
 
     this.container.loadingConflictData(true);
-    return readDocument(this.container.collection, this.buildDocumentIdFromConflict(this.partitionKeyValue)).then(
-      (currentDocumentContent: any) => {
-        this.container.loadingConflictData(false);
-        if (this.operationType === Constants.ConflictOperationType.Replace) {
-          this.container.initDocumentEditorForReplace(this, this.content, currentDocumentContent);
-        } else {
-          this.container.initDocumentEditorForDelete(this, currentDocumentContent);
-        }
-      },
-      (reason: any) => {
-        this.container.loadingConflictData(false);
 
-        // Document could be deleted
-        if (
-          reason &&
-          reason.code === Constants.HttpStatusCodes.NotFound &&
-          this.operationType === Constants.ConflictOperationType.Delete
-        ) {
-          this.container.initDocumentEditorForNoOp(this);
-          return Q();
-        }
+    try {
+      const currentDocumentContent = await readDocument(
+        this.container.collection,
+        this.buildDocumentIdFromConflict(this.partitionKeyValue)
+      );
 
-        return Q.reject(reason);
+      if (this.operationType === Constants.ConflictOperationType.Replace) {
+        this.container.initDocumentEditorForReplace(this, this.content, currentDocumentContent);
+      } else {
+        this.container.initDocumentEditorForDelete(this, currentDocumentContent);
       }
-    );
+    } catch (error) {
+      // Document could be deleted
+      if (
+        error &&
+        error.code === Constants.HttpStatusCodes.NotFound &&
+        this.operationType === Constants.ConflictOperationType.Delete
+      ) {
+        this.container.initDocumentEditorForNoOp(this);
+        return;
+      }
+
+      throw error;
+    } finally {
+      this.container.loadingConflictData(false);
+    }
   }
 
   public getPartitionKeyValueAsString(): string {

src/Explorer/Tree/Database.ts

@@ -193,7 +193,7 @@ export default class Database implements ViewModels.Database {
     });
 
     deltaCollections.toAdd.forEach((collection: DataModels.Collection) => {
-      const collectionVM: Collection = new Collection(this.container, this.id(), collection, null, null);
+      const collectionVM: Collection = new Collection(this.container, this.id(), collection);
       collectionVMs.push(collectionVM);
     });
 

src/Explorer/Tree/DocumentId.ts

@@ -65,7 +65,7 @@ export default class DocumentId {
     return JSON.stringify(partitionKeyValue);
   }
 
-  public loadDocument(): Q.Promise<any> {
-    return this.container.selectDocument(this);
+  public async loadDocument(): Promise<void> {
+    await this.container.selectDocument(this);
   }
 }

src/Explorer/Tree/ResourceTreeAdapter.test.tsx

@@ -229,9 +229,7 @@ const createMockCollection = (): ViewModels.Collection => {
   const mockCollectionVM: ViewModels.Collection = new Collection(
     createMockContainer(),
     "fakeDatabaseId",
-    mockCollection,
-    undefined,
-    undefined
+    mockCollection
   );
 
   return mockCollectionVM;

src/Explorer/Tree/StoredProcedure.ts

@@ -2,7 +2,7 @@ import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import { deleteStoredProcedure } from "../../Common/dataAccess/deleteStoredProcedure";
-import { executeStoredProcedure } from "../../Common/DocumentClientUtilityBase";
+import { executeStoredProcedure } from "../../Common/dataAccess/executeStoredProcedure";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";

src/HostedExplorer.tsx

@@ -0,0 +1,242 @@
+import { Configuration, PublicClientApplication } from "@azure/msal-browser";
+import { AuthenticatedTemplate, MsalProvider, UnauthenticatedTemplate } from "@azure/msal-react";
+import { useBoolean } from "@uifabric/react-hooks";
+import {
+  DefaultButton,
+  DirectionalHint,
+  FocusZone,
+  initializeIcons,
+  Panel,
+  Persona,
+  PersonaInitialsColor,
+  PersonaSize
+} from "office-ui-fabric-react";
+import * as React from "react";
+import { render } from "react-dom";
+import FeedbackIcon from "../images/Feedback.svg";
+import ConnectIcon from "../images/HostedConnectwhite.svg";
+import "../less/hostedexplorer.less";
+import { CommandButtonComponent } from "./Explorer/Controls/CommandButton/CommandButtonComponent";
+import { DefaultDirectoryDropdownComponent } from "./Explorer/Controls/Directory/DefaultDirectoryDropdownComponent";
+import { DirectoryListComponent } from "./Explorer/Controls/Directory/DirectoryListComponent";
+import "./Explorer/Menus/NavBar/MeControlComponent.less";
+import { useGraphProfile } from "./hooks/useGraphProfile";
+import "./Shared/appInsights";
+
+initializeIcons();
+
+// MSAL configuration
+const configuration: Configuration = {
+  auth: {
+    clientId: "e8ae3d28-de2a-4dc8-8fa3-2d2998b1c38f",
+    redirectUri: "https://localhost:1234/hostedExplorer.html",
+    authority: "https://login.microsoftonline.com/72f988bf-86f1-41af-91ab-2d7cd011db47"
+  }
+};
+
+const application = new PublicClientApplication(configuration);
+
+const App: React.FunctionComponent = () => {
+  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
+  const { graphData, photo } = useGraphProfile();
+
+  const menuProps = {
+    className: "mecontrolContextualMenu",
+    isBeakVisible: false,
+    directionalHintFixed: true,
+    directionalHint: DirectionalHint.bottomRightEdge,
+    calloutProps: {
+      minPagePadding: 0
+    },
+    items: [
+      {
+        key: "Persona",
+        onRender: () => <Persona />
+      },
+      {
+        key: "SwitchDirectory",
+        onRender: () => (
+          <div className="switchDirectoryLink" onClick={() => openPanel}>
+            Switch Directory
+          </div>
+        )
+      },
+      {
+        key: "SignOut",
+        onRender: () => (
+          <div
+            className="signOutLink"
+            onClick={() => {
+              instance.logout();
+            }}
+          >
+            Sign out
+          </div>
+        )
+      }
+    ]
+  };
+  const personaProps = {};
+
+  // {
+  //   id: "commandbutton-settings",
+  //   iconSrc: SettingsIcon,
+  //   iconAlt: "setting button",
+  //   onCommandClick: () => {},
+  //   commandButtonLabel: undefined,
+  //   ariaLabel: "setting button",
+  //   tooltipText: "Global settings",
+  //   hasPopup: true,
+  //   disabled: false
+  // },
+  // {
+  //   id: "commandbutton-feedback",
+  //   iconSrc: FeedbackIcon,
+  //   iconAlt: "feeback button",
+  //   onCommandClick: () =>
+  //     window.open(
+  //       "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Hosted%20Data%20Explorer%20Feedback"
+  //     ),
+  //   commandButtonLabel: undefined,
+  //   ariaLabel: "feeback button",
+  //   tooltipText: "Send feedback",
+  //   hasPopup: true,
+  //   disabled: false
+  // }
+
+  const buttonProps = {
+    id: "mecontrolHeader",
+    className: "mecontrolHeaderButton",
+    menuProps: menuProps,
+    onRenderMenuIcon: () => <span />,
+    styles: {
+      rootHovered: { backgroundColor: "#393939" },
+      rootFocused: { backgroundColor: "#393939" },
+      rootPressed: { backgroundColor: "#393939" },
+      rootExpanded: { backgroundColor: "#393939" }
+    }
+  };
+  return (
+    <div>
+      <header>
+        <div className="items" role="menubar">
+          <div className="cosmosDBTitle">
+            <span
+              className="title"
+              data-bind="click: openAzurePortal, event: { keypress: onOpenAzurePortalKeyPress }"
+              tabIndex={0}
+              title="Go to Azure Portal"
+            >
+              Microsoft Azure
+            </span>
+            <span className="accontSplitter" /> <span className="serviceTitle">Cosmos DB</span>
+            <img
+              className="chevronRight"
+              src="/chevron-right.svg"
+              alt="account separator"
+              data-bind="visible: isAccountActive"
+            />
+            <span
+              className="accountSwitchComponentContainer"
+              data-bind="react: accountSwitchComponentAdapter, visible: isAccountActive"
+            />
+          </div>
+          <div className="feedbackConnectSettingIcons">
+            <AuthenticatedTemplate>
+              <CommandButtonComponent
+                id="commandbutton-connect"
+                iconSrc={ConnectIcon}
+                iconAlt="connect button"
+                onCommandClick={() => {}}
+                ariaLabel="connect button"
+                tooltipText="Connect to a Cosmos DB account"
+                hasPopup={true}
+                disabled={false}
+              />
+            </AuthenticatedTemplate>
+            <UnauthenticatedTemplate>
+              <CommandButtonComponent
+                id="commandbutton-feedback"
+                iconSrc={FeedbackIcon}
+                iconAlt="feeback button"
+                onCommandClick={() =>
+                  window.open(
+                    "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Hosted%20Data%20Explorer%20Feedback"
+                  )
+                }
+                ariaLabel="feeback button"
+                tooltipText="Send feedback"
+                hasPopup={true}
+                disabled={false}
+              />
+            </UnauthenticatedTemplate>
+          </div>
+          <div className="meControl">
+            <AuthenticatedTemplate>
+              <FocusZone>
+                <DefaultButton {...buttonProps}>
+                  <Persona
+                    imageUrl={photo}
+                    text={graphData?.displayName}
+                    secondaryText={graphData?.displayName}
+                    showSecondaryText={true}
+                    showInitialsUntilImageLoads={true}
+                    initialsColor={PersonaInitialsColor.teal}
+                    size={PersonaSize.size28}
+                    className="mecontrolHeaderPersona"
+                  />
+                </DefaultButton>
+              </FocusZone>
+            </AuthenticatedTemplate>
+            <UnauthenticatedTemplate>
+              <DefaultButton
+                className="mecontrolSigninButton"
+                text="Sign In"
+                onClick={() => {
+                  instance.loginPopup();
+                }}
+                styles={{
+                  rootHovered: { backgroundColor: "#393939", color: "#fff" },
+                  rootFocused: { backgroundColor: "#393939", color: "#fff" },
+                  rootPressed: { backgroundColor: "#393939", color: "#fff" }
+                }}
+              />
+            </UnauthenticatedTemplate>
+          </div>
+        </div>
+      </header>
+      {/* <iframe
+        id="explorerMenu"
+        name="explorer"
+        className="iframe"
+        title="explorer"
+        src="explorer.html?v=1.0.1&platform=Hosted"
+        data-bind="visible: navigationSelection() === 'explorer'"
+      ></iframe> */}
+      <div data-bind="react: firewallWarningComponentAdapter" />
+      <div data-bind="react: dialogComponentAdapter" />
+      <Panel
+        headerText="Select Directory"
+        isOpen={!isOpen}
+        onDismiss={dismissPanel}
+        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
+        closeButtonAriaLabel="Close"
+      >
+        <div className="directoryDropdownContainer">
+          <DefaultDirectoryDropdownComponent />
+        </div>
+        <div className="directoryDivider" />
+        <div className="directoryListContainer">
+          <DirectoryListComponent />
+        </div>
+      </Panel>
+    </div>
+  );
+};
+
+render(
+  <MsalProvider instance={application}>
+    <App />
+  </MsalProvider>,
+  document.body
+);

src/Juno/JunoClient.ts

@@ -178,8 +178,7 @@ export class JunoClient {
     return this.getNotebooks(`${this.getNotebooksUrl()}/gallery/public`);
   }
 
-  // will be renamed once feature.enableCodeOfConduct flag is removed
-  public async fetchPublicNotebooks(): Promise<IJunoResponse<IPublicGalleryData>> {
+  public async getPublicGalleryData(): Promise<IJunoResponse<IPublicGalleryData>> {
     const url = `${this.getNotebooksAccountUrl()}/gallery/public`;
     const response = await window.fetch(url, {
       method: "PATCH",
@@ -405,7 +404,7 @@ export class JunoClient {
   }
 
   public async reportAbuse(notebookId: string, abuseCategory: string, notes: string): Promise<IJunoResponse<boolean>> {
-    const response = await window.fetch(`${this.getNotebooksUrl()}/avert/reportAbuse`, {
+    const response = await window.fetch(`${this.getNotebooksUrl()}/gallery/reportAbuse`, {
       method: "POST",
       body: JSON.stringify({
         notebookId,

src/Main.tsx

@@ -44,7 +44,6 @@ import "./Libs/jquery";
 import "bootstrap/dist/js/npm";
 import "../externals/jquery.typeahead.min.js";
 import "../externals/jquery-ui.min.js";
-import "../externals/adal.js";
 import "promise-polyfill/src/polyfill";
 import "abort-controller/polyfill";
 import "whatwg-fetch";

src/NotebookWorkspaceManager/NotebookWorkspaceManager.ts

@@ -12,8 +12,8 @@ import { getErrorMessage } from "../Common/ErrorHandlingUtils";
 export class NotebookWorkspaceManager {
   private resourceProviderClientFactory: IResourceProviderClientFactory<any>;
 
-  constructor(private _armEndpoint: string) {
-    this.resourceProviderClientFactory = new ResourceProviderClientFactory(this._armEndpoint);
+  constructor() {
+    this.resourceProviderClientFactory = new ResourceProviderClientFactory();
   }
 
   public async getNotebookWorkspacesAsync(cosmosdbResourceId: string): Promise<NotebookWorkspace[]> {

src/Platform/Emulator/Main.ts

@@ -19,6 +19,7 @@ export function initializeExplorer(): Explorer {
       cassandraEndpoint: ""
     }
   });
+
   explorer.isAccountReady(true);
   return explorer;
 }