chatbot

* Adds mongo e2e spec

* Adds mongo connection string

* Constantize sql spec

* Use shared login function

* Remove comment

* Remove login lines from cassandra

* Adds frame return tyoe

* test updates

* format

* adds unique name

* remove trivial type annotation

.env.example

@@ -4,3 +4,4 @@ PORTAL_RUNNER_PASSWORD=
 PORTAL_RUNNER_SUBSCRIPTION=
 PORTAL_RUNNER_RESOURCE_GROUP=
 PORTAL_RUNNER_DATABASE_ACCOUNT=
+PORTAL_RUNNER_CONNECTION_STRING=

.eslintignore

@@ -266,10 +266,6 @@ src/ResourceProvider/ResourceProviderClientFactory.ts
 src/RouteHandlers/RouteHandler.ts
 src/RouteHandlers/TabRouteHandler.test.ts
 src/RouteHandlers/TabRouteHandler.ts
-src/Shared/AddCollectionUtility.test.ts
-src/Shared/AddCollectionUtility.ts
-src/Shared/AddDatabaseUtility.test.ts
-src/Shared/AddDatabaseUtility.ts
 src/Shared/Constants.ts
 src/Shared/DefaultExperienceUtility.test.ts
 src/Shared/DefaultExperienceUtility.ts
@@ -279,8 +275,6 @@ src/Shared/StorageUtility.test.ts
 src/Shared/StorageUtility.ts
 src/Shared/StringUtility.test.ts
 src/Shared/StringUtility.ts
-src/Shared/Telemetry/TelemetryConstants.ts
-src/Shared/Telemetry/TelemetryProcessor.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
@@ -418,6 +412,5 @@ cypress/integration/dataexplorer/SQL/addCollection.spec.ts
 cypress/integration/dataexplorer/TABLE/addCollection.spec.ts
 cypress/integration/notebook/newNotebook.spec.ts
 cypress/integration/notebook/resourceTree.spec.ts
-__mocks__/AddDatabaseUtility.ts
 __mocks__/monaco-editor.ts
 src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx

.eslintrc.js

@@ -27,7 +27,7 @@ module.exports = {
       plugins: ["react"]
     },
     {
-      files: ["**/*.test.{ts,tsx}"],
+      files: ["**/*.{test,spec}.{ts,tsx}"],
       env: {
         jest: true
       },
@@ -41,6 +41,7 @@ module.exports = {
     "@typescript-eslint/no-extraneous-class": "error",
     "no-null/no-null": "error",
     "@typescript-eslint/no-explicit-any": "error",
-    "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }]
+    "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
+    eqeqeq: "error"
   }
 };

.github/workflows/ci.yml

@@ -3,8 +3,8 @@ on:
   push:
     branches:
       - master
-      - hotfix/*
-      - release/*
+      - hotfix/**
+      - release/**
   pull_request:
     branches:
       - master
@@ -134,6 +134,11 @@ jobs:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
           CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
+      - uses: actions/upload-artifact@v2
+        name: videos
+        if: ${{ failure() }}
+        with:
+          path: "**/*.mp4"
   endtoendmongo:
     name: "End To End Tests | Mongo"
     needs: [lint, format, compile, unittest]
@@ -163,6 +168,11 @@ jobs:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
           CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
+      - uses: actions/upload-artifact@v2
+        if: ${{ failure() }}
+        name: videos
+        with:
+          path: "**/*.mp4"
   accessibility:
     name: "Accessibility | Hosted"
     needs: [lint, format, compile, unittest]
@@ -186,6 +196,28 @@ jobs:
         shell: bash
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
+  endtoendpuppeteer:
+    name: "End to end puppeteer tests"
+    needs: [lint, format, compile, unittest]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: End to End Puppeteer Tests
+        run: |
+          npm ci
+          npm start &
+          npm run wait-for-server
+          npm run test:e2e
+        shell: bash
+        env:
+          NODE_TLS_REJECT_UNAUTHORIZED: 0
+          PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
+          MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
+          CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')

__mocks__/AddDatabaseUtility.ts

@@ -1,5 +0,0 @@
-export class AddDbUtilities {
-    createGremlinDatabase(params: any) {
-        return Promise.resolve(1)
-    }
-}

cypress/cypress.json

@@ -3,7 +3,7 @@
   "pluginsFile": false,
   "fixturesFolder": false,
   "supportFile": "./support/index.js",
-  "defaultCommandTimeout": 60000,
+  "defaultCommandTimeout": 90000,
   "chromeWebSecurity": false,
   "reporter": "mochawesome",
   "reporterOptions": {

cypress/package.json

@@ -6,8 +6,8 @@
   "scripts": {
     "test": "cypress run",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
-    "test:sql": "cypress run --browser chrome --headless --spec \"./integration/dataexplorer/SQL/*\"",
-    "test:ci": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/ https-get://0.0.0.0:8081/_explorer/index.html && cypress run --browser chrome --headless",
+    "test:sql": "cypress run --browser chrome --spec \"./integration/dataexplorer/SQL/*\"",
+    "test:ci": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/ https-get://0.0.0.0:8081/_explorer/index.html && cypress run --browser edge --headless",
     "test:debug": "cypress open"
   },
   "devDependencies": {

jest-puppeteer.config.js

@@ -3,7 +3,9 @@ const isCI = require("is-ci");
 module.exports = {
   launch: {
     headless: isCI,
-    slowMo: isCI ? null : 20,
-    defaultViewport: null
+    slowMo: 30,
+    defaultViewport: null,
+    ignoreHTTPSErrors: true,
+    args: ["--disable-web-security"]
   }
 };

less/Common/Constants.less

@@ -35,6 +35,7 @@
 @NotificationLow: #FFF4CE;
 @NotificationHigh: #F9E9B0;
 @Purple1: #8A2DA5;
+@Dirty: #9b4f96;
 
 @BaseLow: #F2F2F2;
 @BaseMediumLow: #E6E6E6;
@@ -54,7 +55,7 @@
 
 @SelectionColor: #3074B0;
 
-@FocusColor: #00bcf2;
+@FocusColor: #605e5c;
 
 /******************************************************************************
                                 METRICS
@@ -104,6 +105,7 @@
 @newCollectionPaneInputWidth: 300px;
 @tooltipTextWidth: 280px;
 @sharedCollectionThroughputTooltipTextWidth: 150px;
+@mongoWildcardIndexTooltipWidth: 150px;
 @addContainerPaneThroughputInfoWidth: 370px;
 @optionsInfoWidth: 210px;
 @noFixedCollectionsTooltipWidth: 196px;

less/documentDB.less

@@ -1522,6 +1522,10 @@ p {
     .tooltipVisible();
 }
 
+.infoTooltip a {
+    color: @AccentHigh;
+}
+
 .nowrap {
     white-space: nowrap;
 }
@@ -1561,6 +1565,10 @@ p {
     min-width: @tooltipTextWidth;
 }
 
+.mongoWildcardIndexTooltipWidth {
+    min-width: @mongoWildcardIndexTooltipWidth;
+}
+
 .sharedCollectionThroughputTooltipWidth {
     min-width: @sharedCollectionThroughputTooltipTextWidth;
 }
@@ -1646,7 +1654,7 @@ p {
 }
 
 .contextual-pane .collid {
-    border: 1px solid #bbbbbb;
+    border: 1px solid #605e5c;
     font-size: 10px;
     padding: 5px 10px;
     color: #000;
@@ -1739,7 +1747,7 @@ input::-webkit-calendar-picker-indicator {
     padding-right: 34px;
     color: @BaseDark;
     overflow-y: auto;
-    overflow-x: hidden;
+    overflow-x: auto;
     margin: (2 * @MediumSpace) 0px;
 }
 
@@ -2074,7 +2082,7 @@ a:link {
 .resourceTreeAndTabs {
     display: flex;
     flex: 1 1 auto;
-    overflow: hidden;
+    overflow: auto;
     height: 100%;
 }
 
@@ -2423,22 +2431,6 @@ a:link {
     display: none;
 }
 
-::-webkit-input-placeholder {
-    color: #969696;
-}
-
-::-moz-placeholder {
-    color: #969696;
-}
-
-:-ms-input-placeholder {
-    color: #969696;
-}
-
-:-moz-placeholder {
-    color: #969696;
-}
-
 ::-ms-expand {
     color: #969696;
 }
@@ -2988,6 +2980,10 @@ settings-pane {
     .enableAnalyticalStorageRadio:nth-child(n+2) {
         margin-left: @LargeSpace;
     }
+
+    .enableAnalyticalStorageRadioLabel {
+        padding: 0px
+    }
 }
 
 .addCollectionLabel {
@@ -3017,4 +3013,12 @@ settings-pane {
 
 .italic {
     font-style: italic;
-}
+}
+
+.warningErrorContent a {
+    color: @AccentMediumHigh
+}
+
+.infoBoxContent a {
+    color: @AccentMediumHigh
+}

package.json

@@ -4,11 +4,11 @@
   "description": "Cosmos Explorer",
   "main": "index.js",
   "dependencies": {
-    "@azure/cosmos": "3.7.4",
+    "@azure/cosmos": "3.9.0",
     "@azure/cosmos-language-service": "0.0.4",
     "@jupyterlab/services": "4.2.0",
     "@jupyterlab/terminal": "1.2.1",
-    "@microsoft/applicationinsights-web": "2.5.4",
+    "@microsoft/applicationinsights-web": "2.5.8",
     "@nteract/commutable": "7.1.4",
     "@nteract/connected-components": "6.7.8",
     "@nteract/core": "13.0.0",
@@ -42,7 +42,8 @@
     "applicationinsights": "1.8.0",
     "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.6.0",
+    "botframework-webchat": "4.10.1",
+    "canvas": "2.6.1",
     "clean-webpack-plugin": "0.1.19",
     "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
@@ -55,6 +56,7 @@
     "es6-object-assign": "1.1.0",
     "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
+    "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
     "immutable": "4.0.0-rc.12",
@@ -66,7 +68,7 @@
     "mkdirp": "1.0.4",
     "monaco-editor": "0.15.6",
     "object.entries": "1.1.0",
-    "office-ui-fabric-react": "7.121.10",
+    "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "promise-polyfill": "8.1.0",
@@ -102,12 +104,15 @@
     "@types/d3": "4.13.2",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.5",
+    "@types/expect-puppeteer": "4.4.3",
     "@types/hasher": "0.0.31",
     "@types/jest": "23.3.10",
+    "@types/jest-environment-puppeteer": "4.3.2",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
     "@types/promise.prototype.finally": "2.0.3",
     "@types/prop-types": "15.5.8",
+    "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
     "@types/react": "16.8.25",
     "@types/react-dom": "16.0.7",
@@ -118,8 +123,8 @@
     "@types/text-encoding": "0.0.33",
     "@types/underscore": "1.7.36",
     "@types/webfontloader": "1.6.29",
-    "@typescript-eslint/eslint-plugin": "3.2.0",
-    "@typescript-eslint/parser": "3.2.0",
+    "@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",
@@ -132,11 +137,10 @@
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
     "enzyme-to-json": "3.4.3",
-    "eslint": "7.3.1",
+    "eslint": "7.8.1",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
-    "eslint-plugin-react": "7.20.0",
     "expose-loader": "0.7.5",
     "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
@@ -164,8 +168,9 @@
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "3.9.6",
+    "typescript": "4.0.2",
     "url-loader": "1.1.1",
+    "wait-on": "4.0.2",
     "webpack": "4.43.0",
     "webpack-bundle-analyzer": "3.6.1",
     "webpack-cli": "3.3.10",
@@ -184,12 +189,13 @@
     "test": "rimraf coverage && jest",
     "test:e2e": "jest -c ./jest.config.e2e.js --detectOpenHandles",
     "watch": "npm run start",
+    "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
     "compile": "tsc",
     "compile:contracts": "tsc -p ./tsconfig.contracts.json",
     "compile:strict": "tsc -p ./tsconfig.strict.json",
-    "format": "prettier --write \"{src,cypress}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
-    "format:check": "prettier --check \"{src,cypress}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
+    "format": "prettier --write \"{src,cypress,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
+    "format:check": "prettier --check \"{src,cypress,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
     "build:contracts": "npm run compile:contracts",
     "strictEligibleFiles": "node ./strict-migration-tools/index.js",

sampleData/sqlSampleData.json

@@ -3,8 +3,8 @@
   "offerThroughput": 400,
   "databaseLevelThroughput": false,
   "collectionId": "Persons",
-  "rupmEnabled": false,
-  "partitionKey": { "kind": "Hash", "paths": ["/firstname"] },
+  "createNewDatabase": true,
+  "partitionKey": { "kind": "Hash", "paths": ["/firstname"], "version": 1 },
   "data": [
     {
       "firstname": "Eva",
@@ -23,4 +23,4 @@
       "age": 23
     }
   ]
-}
+}

src/Common/Constants.ts

@@ -1,5 +1,5 @@
 import { AutopilotTier } from "../Contracts/DataModels";
-import { config } from "../Config";
+import { configContext } from "../ConfigContext";
 import { HashMap } from "./HashMap";
 
 export class AuthorizationEndpoints {
@@ -7,14 +7,23 @@ export class AuthorizationEndpoints {
   public static common: string = "https://login.windows.net/";
 }
 
+export class CodeOfConductEndpoints {
+  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
+  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
+  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
+}
+
 export class BackendEndpoints {
   public static localhost: string = "https://localhost:12900";
   public static dev: string = "https://ext.documents-dev.windows-int.net";
-  public static productionPortal: string = config.BACKEND_ENDPOINT || "https://main.documentdb.ext.azure.com";
+  public static productionPortal: string = configContext.BACKEND_ENDPOINT || "https://main.documentdb.ext.azure.com";
 }
 
 export class EndpointsRegex {
-  public static readonly cassandra = "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com";
+  public static readonly cassandra = [
+    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
+    "HostName=(.*).cassandra.cosmos.azure.com"
+  ];
   public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
   public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
   public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
@@ -113,6 +122,9 @@ export class Features {
   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 enableSettingsV2 = "enablesettingsv2";
   public static readonly enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";
   public static readonly notebookServerUrl = "notebookserverurl";
@@ -123,6 +135,7 @@ export class Features {
   public static readonly enableAutoPilotV2 = "enableautopilotv2";
   public static readonly ttl90Days = "ttl90days";
   public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly enableSDKoperations = "enablesdkoperations";
 }
 
 export class AfecFeatures {
@@ -158,89 +171,8 @@ export enum MongoBackendEndpointType {
   remote
 }
 
-export class MongoBackend {
-  public static localhostEndpoint: string = "/api/mongo/explorer";
-  public static centralUsEndpoint: string = "https://main.documentdb.ext.azure.com/api/mongo/explorer";
-  public static northEuropeEndpoint: string = "https://main.documentdb.ext.azure.com/api/mongo/explorer";
-  public static southEastAsiaEndpoint: string = "https://main.documentdb.ext.azure.com/api/mongo/explorer";
-
-  public static endpointsByRegion: any = {
-    default: MongoBackend.centralUsEndpoint,
-    northeurope: MongoBackend.northEuropeEndpoint,
-    ukwest: MongoBackend.northEuropeEndpoint,
-    uksouth: MongoBackend.northEuropeEndpoint,
-    westeurope: MongoBackend.northEuropeEndpoint,
-    australiaeast: MongoBackend.southEastAsiaEndpoint,
-    australiasoutheast: MongoBackend.southEastAsiaEndpoint,
-    centralindia: MongoBackend.southEastAsiaEndpoint,
-    eastasia: MongoBackend.southEastAsiaEndpoint,
-    japaneast: MongoBackend.southEastAsiaEndpoint,
-    japanwest: MongoBackend.southEastAsiaEndpoint,
-    koreacentral: MongoBackend.southEastAsiaEndpoint,
-    koreasouth: MongoBackend.southEastAsiaEndpoint,
-    southeastasia: MongoBackend.southEastAsiaEndpoint,
-    southindia: MongoBackend.southEastAsiaEndpoint,
-    westindia: MongoBackend.southEastAsiaEndpoint
-  };
-
-  public static endpointsByEnvironment: any = {
-    default: MongoBackendEndpointType.local,
-    localhost: MongoBackendEndpointType.local,
-    prod1: MongoBackendEndpointType.remote,
-    prod2: MongoBackendEndpointType.remote
-  };
-}
-
 // TODO: 435619 Add default endpoints per cloud and use regional only when available
 export class CassandraBackend {
-  public static readonly localhostEndpoint: string = "https://localhost:12901/";
-  public static readonly devEndpoint: string = "https://platformproxycassandradev.azurewebsites.net/";
-
-  public static readonly centralUsEndpoint: string = "https://main.documentdb.ext.azure.com/";
-  public static readonly northEuropeEndpoint: string = "https://main.documentdb.ext.azure.com/";
-  public static readonly southEastAsiaEndpoint: string = "https://main.documentdb.ext.azure.com/";
-
-  public static readonly bf_default: string = "https://main.documentdb.ext.microsoftazure.de/";
-  public static readonly mc_default: string = "https://main.documentdb.ext.azure.cn/";
-  public static readonly ff_default: string = "https://main.documentdb.ext.azure.us/";
-
-  public static readonly endpointsByRegion: any = {
-    default: CassandraBackend.centralUsEndpoint,
-    northeurope: CassandraBackend.northEuropeEndpoint,
-    ukwest: CassandraBackend.northEuropeEndpoint,
-    uksouth: CassandraBackend.northEuropeEndpoint,
-    westeurope: CassandraBackend.northEuropeEndpoint,
-    australiaeast: CassandraBackend.southEastAsiaEndpoint,
-    australiasoutheast: CassandraBackend.southEastAsiaEndpoint,
-    centralindia: CassandraBackend.southEastAsiaEndpoint,
-    eastasia: CassandraBackend.southEastAsiaEndpoint,
-    japaneast: CassandraBackend.southEastAsiaEndpoint,
-    japanwest: CassandraBackend.southEastAsiaEndpoint,
-    koreacentral: CassandraBackend.southEastAsiaEndpoint,
-    koreasouth: CassandraBackend.southEastAsiaEndpoint,
-    southeastasia: CassandraBackend.southEastAsiaEndpoint,
-    southindia: CassandraBackend.southEastAsiaEndpoint,
-    westindia: CassandraBackend.southEastAsiaEndpoint,
-
-    // Black Forest
-    germanycentral: CassandraBackend.bf_default,
-    germanynortheast: CassandraBackend.bf_default,
-
-    // Fairfax
-    usdodeast: CassandraBackend.ff_default,
-    usdodcentral: CassandraBackend.ff_default,
-    usgovarizona: CassandraBackend.ff_default,
-    usgoviowa: CassandraBackend.ff_default,
-    usgovtexas: CassandraBackend.ff_default,
-    usgovvirginia: CassandraBackend.ff_default,
-
-    // Mooncake
-    chinaeast: CassandraBackend.mc_default,
-    chinaeast2: CassandraBackend.mc_default,
-    chinanorth: CassandraBackend.mc_default,
-    chinanorth2: CassandraBackend.mc_default
-  };
-
   public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
   public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
   public static readonly queryApi: string = "api/cassandra";
@@ -550,3 +482,11 @@ export class AnalyticalStorageTtl {
   public static readonly Infinite: number = -1;
   public static readonly Disabled: number = 0;
 }
+
+export class TerminalQueryParams {
+  public static readonly Terminal = "terminal";
+  public static readonly Server = "server";
+  public static readonly Token = "token";
+  public static readonly SubscriptionId = "subscriptionId";
+  public static readonly TerminalEndpoint = "terminalEndpoint";
+}

src/Common/CosmosClient.test.ts

@@ -1,6 +1,7 @@
-import { CosmosClient, tokenProvider, endpoint, requestPlugin, getTokenFromAuthService } from "./CosmosClient";
 import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
-import { config, Platform } from "../Config";
+import { configContext, Platform, updateConfigContext, resetConfigContext } from "../ConfigContext";
+import { updateUserContext } from "../UserContext";
+import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
 
 describe("tokenProvider", () => {
   const options = {
@@ -32,7 +33,9 @@ describe("tokenProvider", () => {
   });
 
   it("does not call the auth service if a master key is set", async () => {
-    CosmosClient.masterKey("foo");
+    updateUserContext({
+      masterKey: "foo"
+    });
     await tokenProvider(options);
     expect((window.fetch as any).mock.calls.length).toBe(0);
   });
@@ -41,7 +44,7 @@ describe("tokenProvider", () => {
 describe("getTokenFromAuthService", () => {
   beforeEach(() => {
     delete window.dataExplorer;
-    delete config.BACKEND_ENDPOINT;
+    resetConfigContext();
     window.fetch = jest.fn().mockImplementation(() => {
       return {
         json: () => "{}",
@@ -64,7 +67,9 @@ describe("getTokenFromAuthService", () => {
   });
 
   it("builds the correct URL in dev", () => {
-    config.BACKEND_ENDPOINT = "https://localhost:1234";
+    updateConfigContext({
+      BACKEND_ENDPOINT: "https://localhost:1234"
+    });
     getTokenFromAuthService("GET", "dbs", "foo");
     expect(window.fetch).toHaveBeenCalledWith(
       "https://localhost:1234/api/guest/runtimeproxy/authorizationTokens",
@@ -75,24 +80,28 @@ describe("getTokenFromAuthService", () => {
 
 describe("endpoint", () => {
   it("falls back to _databaseAccount", () => {
-    CosmosClient.databaseAccount({
-      id: "foo",
-      name: "foo",
-      location: "foo",
-      type: "foo",
-      kind: "foo",
-      tags: [],
-      properties: {
-        documentEndpoint: "bar",
-        gremlinEndpoint: "foo",
-        tableEndpoint: "foo",
-        cassandraEndpoint: "foo"
+    updateUserContext({
+      databaseAccount: {
+        id: "foo",
+        name: "foo",
+        location: "foo",
+        type: "foo",
+        kind: "foo",
+        tags: [],
+        properties: {
+          documentEndpoint: "bar",
+          gremlinEndpoint: "foo",
+          tableEndpoint: "foo",
+          cassandraEndpoint: "foo"
+        }
       }
     });
     expect(endpoint()).toEqual("bar");
   });
   it("uses _endpoint if set", () => {
-    CosmosClient.endpoint("baz");
+    updateUserContext({
+      endpoint: "baz"
+    });
     expect(endpoint()).toEqual("baz");
   });
 });
@@ -100,17 +109,17 @@ describe("endpoint", () => {
 describe("requestPlugin", () => {
   beforeEach(() => {
     delete window.dataExplorerPlatform;
-    delete config.PROXY_PATH;
-    delete config.BACKEND_ENDPOINT;
-    delete config.PROXY_PATH;
+    resetConfigContext();
   });
 
   describe("Hosted", () => {
     it("builds a proxy URL in development", () => {
       const next = jest.fn();
-      config.platform = Platform.Hosted;
-      config.BACKEND_ENDPOINT = "https://localhost:1234";
-      config.PROXY_PATH = "/proxy";
+      updateConfigContext({
+        platform: Platform.Hosted,
+        BACKEND_ENDPOINT: "https://localhost:1234",
+        PROXY_PATH: "/proxy"
+      });
       const headers = {};
       const endpoint = "https://docs.azure.com";
       const path = "/dbs/foo";
@@ -122,8 +131,7 @@ describe("requestPlugin", () => {
   describe("Emulator", () => {
     it("builds a url for emulator proxy via webpack", () => {
       const next = jest.fn();
-      config.platform = Platform.Emulator;
-      config.PROXY_PATH = "/proxy";
+      updateConfigContext({ platform: Platform.Emulator, PROXY_PATH: "/proxy" });
       const headers = {};
       const endpoint = "";
       const path = "/dbs/foo";

src/Common/CosmosClient.ts

@@ -1,39 +1,28 @@
 import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
-import { DatabaseAccount } from "../Contracts/DataModels";
-import { HttpHeaders, EmulatorMasterKey } from "./Constants";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { config, Platform } from "../Config";
-
-let _client: Cosmos.CosmosClient;
-let _masterKey: string;
-let _endpoint: string;
-let _authorizationToken: string;
-let _accessToken: string;
-let _databaseAccount: DatabaseAccount;
-let _subscriptionId: string;
-let _resourceGroup: string;
-let _resourceToken: string;
+import { configContext, Platform } from "../ConfigContext";
+import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { EmulatorMasterKey, HttpHeaders } from "./Constants";
+import { userContext } from "../UserContext";
 
 const _global = typeof self === "undefined" ? window : self;
 
 export const tokenProvider = async (requestInfo: RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
-  if (config.platform === Platform.Emulator) {
+  if (configContext.platform === Platform.Emulator) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
   }
 
-  if (_masterKey) {
+  if (userContext.masterKey) {
     // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
     await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
     return decodeURIComponent(headers.authorization);
   }
 
-  if (_resourceToken) {
-    return _resourceToken;
+  if (userContext.resourceToken) {
+    return userContext.resourceToken;
   }
 
   const result = await getTokenFromAuthService(verb, resourceType, resourceId);
@@ -42,28 +31,33 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };
 
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = config.PROXY_PATH;
+  requestContext.endpoint = configContext.PROXY_PATH;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
   return next(requestContext);
 };
 
 export const endpoint = () => {
-  if (config.platform === Platform.Emulator) {
+  if (configContext.platform === Platform.Emulator) {
     // In worker scope, _global(self).parent does not exist
     const location = _global.parent ? _global.parent.location : _global.location;
-    return config.EMULATOR_ENDPOINT || location.origin;
+    return configContext.EMULATOR_ENDPOINT || location.origin;
   }
-  return _endpoint || (_databaseAccount && _databaseAccount.properties && _databaseAccount.properties.documentEndpoint);
+  return (
+    userContext.endpoint ||
+    (userContext.databaseAccount &&
+      userContext.databaseAccount.properties &&
+      userContext.databaseAccount.properties.documentEndpoint)
+  );
 };
 
 export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {
   try {
-    const host = config.BACKEND_ENDPOINT || _global.dataExplorer.extensionEndpoint();
+    const host = configContext.BACKEND_ENDPOINT || _global.dataExplorer.extensionEndpoint();
     const response = await _global.fetch(host + "/api/guest/runtimeproxy/authorizationTokens", {
       method: "POST",
       headers: {
         "content-type": "application/json",
-        "x-ms-encrypted-auth-token": _accessToken
+        "x-ms-encrypted-auth-token": userContext.accessToken
       },
       body: JSON.stringify({
         verb,
@@ -75,106 +69,25 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
     const result = JSON.parse(await response.json());
     return result;
   } catch (error) {
-    NotificationConsoleUtils.logConsoleMessage(
-      ConsoleDataType.Error,
-      `Failed to get authorization headers for ${resourceType}: ${JSON.stringify(error)}`
-    );
+    logConsoleError(`Failed to get authorization headers for ${resourceType}: ${JSON.stringify(error)}`);
     return Promise.reject(error);
   }
 }
 
-export const CosmosClient = {
-  client(): Cosmos.CosmosClient {
-    if (_client) {
-      return _client;
-    }
-    const options: Cosmos.CosmosClientOptions = {
-      endpoint: endpoint() || " ", // CosmosClient gets upset if we pass a falsy value here
-      key: _masterKey,
-      tokenProvider,
-      connectionPolicy: {
-        enableEndpointDiscovery: false
-      },
-      userAgentSuffix: "Azure Portal"
-    };
+export function client(): Cosmos.CosmosClient {
+  const options: Cosmos.CosmosClientOptions = {
+    endpoint: endpoint() || " ", // CosmosClient gets upset if we pass a falsy value here
+    key: userContext.masterKey,
+    tokenProvider,
+    connectionPolicy: {
+      enableEndpointDiscovery: false
+    },
+    userAgentSuffix: "Azure Portal"
+  };
 
-    // In development we proxy requests to the backend via webpack. This is removed in production bundles.
-    if (process.env.NODE_ENV === "development") {
-      (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
-    }
-    _client = new Cosmos.CosmosClient(options);
-    return _client;
-  },
-
-  authorizationToken(value?: string): string {
-    if (typeof value === "undefined") {
-      return _authorizationToken;
-    }
-    _authorizationToken = value;
-    _client = null;
-    return value;
-  },
-
-  accessToken(value?: string): string {
-    if (typeof value === "undefined") {
-      return _accessToken;
-    }
-    _accessToken = value;
-    _client = null;
-    return value;
-  },
-
-  masterKey(value?: string): string {
-    if (typeof value === "undefined") {
-      return _masterKey;
-    }
-    _client = null;
-    _masterKey = value;
-    return value;
-  },
-
-  endpoint(value?: string): string {
-    if (typeof value === "undefined") {
-      return _endpoint;
-    }
-    _client = null;
-    _endpoint = value;
-    return value;
-  },
-
-  databaseAccount(value?: DatabaseAccount): DatabaseAccount {
-    if (typeof value === "undefined") {
-      return _databaseAccount || ({} as any);
-    }
-    _client = null;
-    _databaseAccount = value;
-    return value;
-  },
-
-  subscriptionId(value?: string): string {
-    if (typeof value === "undefined") {
-      return _subscriptionId;
-    }
-    _client = null;
-    _subscriptionId = value;
-    return value;
-  },
-
-  resourceGroup(value?: string): string {
-    if (typeof value === "undefined") {
-      return _resourceGroup;
-    }
-    _client = null;
-    _resourceGroup = value;
-    return value;
-  },
-
-  resourceToken(value?: string): string {
-    if (typeof value === "undefined") {
-      return _resourceToken;
-    }
-    _client = null;
-    _resourceToken = value;
-    return value;
+  // In development we proxy requests to the backend via webpack. This is removed in production bundles.
+  if (process.env.NODE_ENV === "development") {
+    (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
   }
-};
+  return new Cosmos.CosmosClient(options);
+}

src/Common/DataAccessUtilityBase.ts

@@ -1,34 +1,26 @@
-import * as _ from "underscore";
-import * as Constants from "./Constants";
-import * as DataModels from "../Contracts/DataModels";
-import * as HeadersUtility from "./HeadersUtility";
-import * as ViewModels from "../Contracts/ViewModels";
-import Q from "q";
 import {
   ConflictDefinition,
-  ContainerDefinition,
-  ContainerResponse,
-  DatabaseResponse,
   FeedOptions,
   ItemDefinition,
-  PartitionKeyDefinition,
+  OfferDefinition,
   QueryIterator,
-  Resource,
-  TriggerDefinition
+  Resource
 } from "@azure/cosmos";
-import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
-import { CosmosClient } from "./CosmosClient";
-import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
-import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-import { sendCachedDataMessage } from "./MessageHandler";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { OfferUtils } from "../Utils/OfferUtils";
 import { RequestOptions } from "@azure/cosmos/dist-esm";
-import StoredProcedure from "../Explorer/Tree/StoredProcedure";
-import { Platform, config } from "../Config";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
-import DocumentId from "../Explorer/Tree/DocumentId";
+import Q from "q";
+import { configContext, Platform } from "../ConfigContext";
+import * as DataModels from "../Contracts/DataModels";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
+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 { OfferUtils } from "../Utils/OfferUtils";
+import * as Constants from "./Constants";
+import { client } from "./CosmosClient";
+import * as HeadersUtility from "./HeadersUtility";
+import { sendCachedDataMessage } from "./MessageHandler";
 
 export function getCommonQueryOptions(options: FeedOptions): any {
   const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
@@ -54,136 +46,13 @@ export function queryDocuments(
   options: any
 ): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
   options = getCommonQueryOptions(options);
-  const documentsIterator = CosmosClient.client()
+  const documentsIterator = client()
     .database(databaseId)
     .container(containerId)
     .items.query(query, options);
   return Q(documentsIterator);
 }
 
-export function readStoredProcedures(
-  collection: ViewModels.Collection,
-  options?: any
-): Q.Promise<DataModels.StoredProcedure[]> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.storedProcedures.readAll(options)
-      .fetchAll()
-      .then(response => response.resources as DataModels.StoredProcedure[])
-  );
-}
-
-export function readStoredProcedure(
-  collection: ViewModels.Collection,
-  requestedResource: DataModels.Resource,
-  options?: any
-): Q.Promise<DataModels.StoredProcedure> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.storedProcedure(requestedResource.id)
-      .read(options)
-      .then(response => response.resource as DataModels.StoredProcedure)
-  );
-}
-export function readUserDefinedFunctions(
-  collection: ViewModels.Collection,
-  options: any
-): Q.Promise<DataModels.UserDefinedFunction[]> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.userDefinedFunctions.readAll(options)
-      .fetchAll()
-      .then(response => response.resources as DataModels.UserDefinedFunction[])
-  );
-}
-export function readUserDefinedFunction(
-  collection: ViewModels.Collection,
-  requestedResource: DataModels.Resource,
-  options?: any
-): Q.Promise<DataModels.UserDefinedFunction> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.userDefinedFunction(requestedResource.id)
-      .read(options)
-      .then(response => response.resource as DataModels.UserDefinedFunction)
-  );
-}
-
-export function readTriggers(collection: ViewModels.Collection, options: any): Q.Promise<DataModels.Trigger[]> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.triggers.readAll(options)
-      .fetchAll()
-      .then(response => response.resources as DataModels.Trigger[])
-  );
-}
-
-export function readTrigger(
-  collection: ViewModels.Collection,
-  requestedResource: DataModels.Resource,
-  options?: any
-): Q.Promise<DataModels.Trigger> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.trigger(requestedResource.id)
-      .read(options)
-      .then(response => response.resource as DataModels.Trigger)
-  );
-}
-
-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>();
-
-  CosmosClient.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 readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
-  const partitionKey = documentId.partitionKeyValue;
-
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .item(documentId.id(), partitionKey)
-      .read()
-      .then(response => response.resource)
-  );
-}
-
 export function getPartitionKeyHeaderForConflict(conflictId: ConflictId): Object {
   const partitionKeyDefinition: DataModels.PartitionKey = conflictId.partitionKey;
   const partitionKeyValue: any = conflictId.partitionKeyValue;
@@ -203,19 +72,18 @@ export function getPartitionKeyHeader(partitionKeyDefinition: DataModels.Partiti
   return [partitionKeyValue];
 }
 
-export function updateCollection(
-  databaseId: string,
-  collectionId: string,
-  newCollection: DataModels.Collection,
-  options: any = {}
-): Q.Promise<DataModels.Collection> {
+export function updateOffer(
+  offer: DataModels.Offer,
+  newOffer: DataModels.Offer,
+  options?: RequestOptions
+): Q.Promise<DataModels.Offer> {
   return Q(
-    CosmosClient.client()
-      .database(databaseId)
-      .container(collectionId)
-      .replace(newCollection as ContainerDefinition, options)
-      .then(async (response: ContainerResponse) => {
-        return refreshCachedResources().then(() => response.resource as DataModels.Collection);
+    client()
+      .offer(offer.id)
+      // TODO Remove casting when SDK types are fixed (https://github.com/Azure/azure-sdk-for-js/issues/10660)
+      .replace((newOffer as unknown) as OfferDefinition, options)
+      .then(response => {
+        return Promise.all([refreshCachedOffers(), refreshCachedResources()]).then(() => response.resource);
       })
   );
 }
@@ -228,7 +96,7 @@ export function updateDocument(
   const partitionKey = documentId.partitionKeyValue;
 
   return Q(
-    CosmosClient.client()
+    client()
       .database(collection.databaseId)
       .container(collection.id())
       .item(documentId.id(), partitionKey)
@@ -237,115 +105,54 @@ export function updateDocument(
   );
 }
 
-export function updateOffer(
-  offer: DataModels.Offer,
-  newOffer: DataModels.Offer,
-  options?: RequestOptions
-): Q.Promise<DataModels.Offer> {
-  return Q(
-    CosmosClient.client()
-      .offer(offer.id)
-      .replace(newOffer, options)
-      .then(response => {
-        return Promise.all([refreshCachedOffers(), refreshCachedResources()]).then(() => 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));
 
-export function updateStoredProcedure(
-  collection: ViewModels.Collection,
-  storedProcedure: DataModels.StoredProcedure,
-  options: any
-): Q.Promise<DataModels.StoredProcedure> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.storedProcedure(storedProcedure.id)
-      .replace(storedProcedure, options)
-      .then(response => response.resource as DataModels.StoredProcedure)
-  );
-}
-
-export function updateUserDefinedFunction(
-  collection: ViewModels.Collection,
-  userDefinedFunction: DataModels.UserDefinedFunction,
-  options?: any
-): Q.Promise<DataModels.UserDefinedFunction> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.userDefinedFunction(userDefinedFunction.id)
-      .replace(userDefinedFunction, options)
-      .then(response => response.resource as DataModels.StoredProcedure)
-  );
-}
-
-export function updateTrigger(
-  collection: ViewModels.Collection,
-  trigger: DataModels.Trigger,
-  options?: any
-): Q.Promise<DataModels.Trigger> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.trigger(trigger.id)
-      .replace(trigger as TriggerDefinition, options)
-      .then(response => response.resource as DataModels.Trigger)
+  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(
-    CosmosClient.client()
+    client()
       .database(collection.databaseId)
       .container(collection.id())
       .items.create(newDocument)
-      .then(response => response.resource as DataModels.StoredProcedure)
+      .then(response => response.resource)
   );
 }
 
-export function createStoredProcedure(
-  collection: ViewModels.Collection,
-  newStoredProcedure: DataModels.StoredProcedure,
-  options?: any
-): Q.Promise<DataModels.StoredProcedure> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.storedProcedures.create(newStoredProcedure, options)
-      .then(response => response.resource as DataModels.StoredProcedure)
-  );
-}
+export function readDocument(collection: ViewModels.CollectionBase, documentId: DocumentId): Q.Promise<any> {
+  const partitionKey = documentId.partitionKeyValue;
 
-export function createUserDefinedFunction(
-  collection: ViewModels.Collection,
-  newUserDefinedFunction: DataModels.UserDefinedFunction,
-  options: any
-): Q.Promise<DataModels.UserDefinedFunction> {
   return Q(
-    CosmosClient.client()
+    client()
       .database(collection.databaseId)
       .container(collection.id())
-      .scripts.userDefinedFunctions.create(newUserDefinedFunction, options)
-      .then(response => response.resource as DataModels.UserDefinedFunction)
-  );
-}
-
-export function createTrigger(
-  collection: ViewModels.Collection,
-  newTrigger: DataModels.Trigger,
-  options?: any
-): Q.Promise<DataModels.Trigger> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.triggers.create(newTrigger as TriggerDefinition, options)
-      .then(response => response.resource as DataModels.Trigger)
+      .item(documentId.id(), partitionKey)
+      .read()
+      .then(response => response.resource)
   );
 }
 
@@ -353,7 +160,7 @@ export function deleteDocument(collection: ViewModels.CollectionBase, documentId
   const partitionKey = documentId.partitionKeyValue;
 
   return Q(
-    CosmosClient.client()
+    client()
       .database(collection.databaseId)
       .container(collection.id())
       .item(documentId.id(), partitionKey)
@@ -369,7 +176,7 @@ export function deleteConflict(
   options.partitionKey = options.partitionKey || getPartitionKeyHeaderForConflict(conflictId);
 
   return Q(
-    CosmosClient.client()
+    client()
       .database(collection.databaseId)
       .container(collection.id())
       .conflict(conflictId.id())
@@ -377,242 +184,8 @@ export function deleteConflict(
   );
 }
 
-export function deleteStoredProcedure(
-  collection: ViewModels.Collection,
-  storedProcedure: DataModels.StoredProcedure,
-  options: any
-): Q.Promise<any> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.storedProcedure(storedProcedure.id)
-      .delete()
-  );
-}
-
-export function deleteUserDefinedFunction(
-  collection: ViewModels.Collection,
-  userDefinedFunction: DataModels.UserDefinedFunction,
-  options: any
-): Q.Promise<any> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.userDefinedFunction(userDefinedFunction.id)
-      .delete()
-  );
-}
-
-export function deleteTrigger(
-  collection: ViewModels.Collection,
-  trigger: DataModels.Trigger,
-  options: any
-): Q.Promise<any> {
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .scripts.trigger(trigger.id)
-      .delete()
-  );
-}
-
-export function readCollections(database: ViewModels.Database, options: any): Q.Promise<DataModels.Collection[]> {
-  return Q(
-    CosmosClient.client()
-      .database(database.id())
-      .containers.readAll()
-      .fetchAll()
-      .then(response => response.resources as DataModels.Collection[])
-  );
-}
-
-export function readCollection(databaseId: string, collectionId: string): Q.Promise<DataModels.Collection> {
-  return Q(
-    CosmosClient.client()
-      .database(databaseId)
-      .container(collectionId)
-      .read()
-      .then(response => response.resource as DataModels.Collection)
-  );
-}
-
-export function readCollectionQuotaInfo(
-  collection: ViewModels.Collection,
-  options: any
-): Q.Promise<DataModels.CollectionQuotaInfo> {
-  options = options || {};
-  options.populateQuotaInfo = true;
-  options.initialHeaders = options.initialHeaders || {};
-  options.initialHeaders[Constants.HttpHeaders.populatePartitionStatistics] = true;
-
-  return Q(
-    CosmosClient.client()
-      .database(collection.databaseId)
-      .container(collection.id())
-      .read(options)
-      // TODO any needed because SDK does not properly type response.resource.statistics
-      .then((response: any) => {
-        let quota: DataModels.CollectionQuotaInfo = HeadersUtility.getQuota(response.headers);
-        quota["usageSizeInKB"] = response.resource.statistics.reduce(
-          (
-            previousValue: number,
-            currentValue: DataModels.Statistic,
-            currentIndex: number,
-            array: DataModels.Statistic[]
-          ) => {
-            return previousValue + currentValue.sizeInKB;
-          },
-          0
-        );
-        quota["numPartitions"] = response.resource.statistics.length;
-        quota["uniqueKeyPolicy"] = collection.uniqueKeyPolicy; // TODO: Remove after refactoring (#119617)
-        return quota;
-      })
-  );
-}
-
-export function readOffers(options: any): Q.Promise<DataModels.Offer[]> {
-  try {
-    if (config.platform === Platform.Portal) {
-      return sendCachedDataMessage<DataModels.Offer[]>(MessageTypes.AllOffers, [
-        (<any>window).dataExplorer.databaseAccount().id,
-        Constants.ClientDefaults.portalCacheTimeoutMs
-      ]);
-    }
-  } catch (error) {
-    // If error getting cached Offers, continue on and read via SDK
-  }
-  return Q(
-    CosmosClient.client()
-      .offers.readAll()
-      .fetchAll()
-      .then(response => response.resources)
-  );
-}
-
-export function readOffer(requestedResource: DataModels.Offer, options: any): Q.Promise<DataModels.OfferWithHeaders> {
-  options = options || {};
-  options.initialHeaders = options.initialHeaders || {};
-  if (!OfferUtils.isOfferV1(requestedResource)) {
-    options.initialHeaders[Constants.HttpHeaders.populateCollectionThroughputInfo] = true;
-  }
-
-  return Q(
-    CosmosClient.client()
-      .offer(requestedResource.id)
-      .read(options)
-      .then(response => ({ ...response.resource, headers: response.headers }))
-  );
-}
-
-export function readDatabases(options: any): Q.Promise<DataModels.Database[]> {
-  try {
-    if (config.platform === Platform.Portal) {
-      return sendCachedDataMessage<DataModels.Database[]>(MessageTypes.AllDatabases, [
-        (<any>window).dataExplorer.databaseAccount().id,
-        Constants.ClientDefaults.portalCacheTimeoutMs
-      ]);
-    }
-  } catch (error) {
-    // If error getting cached DBs, continue on and read via SDK
-  }
-
-  return Q(
-    CosmosClient.client()
-      .databases.readAll()
-      .fetchAll()
-      .then(response => response.resources as DataModels.Database[])
-  );
-}
-
-export function getOrCreateDatabaseAndCollection(
-  request: DataModels.CreateDatabaseAndCollectionRequest,
-  options: any
-): Q.Promise<DataModels.Collection> {
-  const databaseOptions: any = options && _.omit(options, "sharedOfferThroughput");
-  const {
-    databaseId,
-    databaseLevelThroughput,
-    collectionId,
-    partitionKey,
-    indexingPolicy,
-    uniqueKeyPolicy,
-    offerThroughput,
-    analyticalStorageTtl,
-    hasAutoPilotV2FeatureFlag
-  } = request;
-
-  const createBody: DatabaseRequest = {
-    id: databaseId
-  };
-
-  // TODO: replace when SDK support autopilot
-  const initialHeaders = request.autoPilot
-    ? !hasAutoPilotV2FeatureFlag
-      ? {
-          [Constants.HttpHeaders.autoPilotThroughputSDK]: JSON.stringify({
-            maxThroughput: request.autoPilot.maxThroughput
-          })
-        }
-      : {
-          [Constants.HttpHeaders.autoPilotTier]: request.autoPilot.autopilotTier
-        }
-    : undefined;
-  if (databaseLevelThroughput) {
-    if (request.autoPilot) {
-      databaseOptions.initialHeaders = initialHeaders;
-    }
-    createBody.throughput = offerThroughput;
-  }
-
-  return Q(
-    CosmosClient.client()
-      .databases.createIfNotExists(createBody, databaseOptions)
-      .then(response => {
-        return response.database.containers.create(
-          {
-            id: collectionId,
-            partitionKey: (partitionKey || undefined) as PartitionKeyDefinition,
-            indexingPolicy: indexingPolicy ? indexingPolicy : undefined,
-            uniqueKeyPolicy: uniqueKeyPolicy ? uniqueKeyPolicy : undefined,
-            analyticalStorageTtl: analyticalStorageTtl,
-            throughput: databaseLevelThroughput || request.autoPilot ? undefined : offerThroughput
-          } as ContainerRequest, // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
-          {
-            initialHeaders: databaseLevelThroughput ? undefined : initialHeaders
-          }
-        );
-      })
-      .then(containerResponse => containerResponse.resource as DataModels.Collection)
-      .finally(() => refreshCachedResources(options))
-  );
-}
-
-export function createDatabase(
-  request: DataModels.CreateDatabaseRequest,
-  options: any
-): Q.Promise<DataModels.Database> {
-  var deferred = Q.defer<DataModels.Database>();
-
-  _createDatabase(request, options).then(
-    (createdDatabase: DataModels.Database) => {
-      refreshCachedOffers().then(() => {
-        deferred.resolve(createdDatabase);
-      });
-    },
-    _createDatabaseError => {
-      deferred.reject(_createDatabaseError);
-    }
-  );
-
-  return deferred.promise;
-}
-
 export function refreshCachedOffers(): Q.Promise<void> {
-  if (config.platform === Platform.Portal) {
+  if (configContext.platform === Platform.Portal) {
     return sendCachedDataMessage(MessageTypes.RefreshOffers, []);
   } else {
     return Q();
@@ -620,7 +193,7 @@ export function refreshCachedOffers(): Q.Promise<void> {
 }
 
 export function refreshCachedResources(options?: any): Q.Promise<void> {
-  if (config.platform === Platform.Portal) {
+  if (configContext.platform === Platform.Portal) {
     return sendCachedDataMessage(MessageTypes.RefreshResources, []);
   } else {
     return Q();
@@ -633,62 +206,9 @@ export function queryConflicts(
   query: string,
   options: any
 ): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
-  const documentsIterator = CosmosClient.client()
+  const documentsIterator = client()
     .database(databaseId)
     .container(containerId)
     .conflicts.query(query, options);
   return Q(documentsIterator);
 }
-
-export async function updateOfferThroughputBeyondLimit(
-  request: DataModels.UpdateOfferThroughputRequest
-): Promise<void> {
-  if (config.platform !== Platform.Portal) {
-    throw new Error("Updating throughput beyond specified limit is not supported on this platform");
-  }
-
-  const explorer = window.dataExplorer;
-  const url = `${explorer.extensionEndpoint()}/api/offerthroughputrequest/updatebeyondspecifiedlimit`;
-  const authorizationHeader = getAuthorizationHeader();
-
-  const response = await fetch(url, {
-    method: "POST",
-    body: JSON.stringify(request),
-    headers: { [authorizationHeader.header]: authorizationHeader.token }
-  });
-
-  if (response.ok) {
-    return undefined;
-  }
-  throw new Error(await response.text());
-}
-
-function _createDatabase(request: DataModels.CreateDatabaseRequest, options: any = {}): Q.Promise<DataModels.Database> {
-  const { databaseId, databaseLevelThroughput, offerThroughput, autoPilot, hasAutoPilotV2FeatureFlag } = request;
-  const createBody: DatabaseRequest = { id: databaseId };
-  const databaseOptions: any = options && _.omit(options, "sharedOfferThroughput");
-  // TODO: replace when SDK support autopilot
-  const initialHeaders = autoPilot
-    ? !hasAutoPilotV2FeatureFlag
-      ? {
-          [Constants.HttpHeaders.autoPilotThroughputSDK]: JSON.stringify({ maxThroughput: autoPilot.maxThroughput })
-        }
-      : {
-          [Constants.HttpHeaders.autoPilotTier]: autoPilot.autopilotTier
-        }
-    : undefined;
-  if (!!databaseLevelThroughput) {
-    if (autoPilot) {
-      databaseOptions.initialHeaders = initialHeaders;
-    }
-    createBody.throughput = offerThroughput;
-  }
-
-  return Q(
-    CosmosClient.client()
-      .databases.create(createBody, databaseOptions)
-      .then((response: DatabaseResponse) => {
-        return refreshCachedResources(databaseOptions).then(() => response.resource);
-      })
-  );
-}

src/Common/EnvironmentUtility.ts

@@ -1,49 +1,8 @@
-import * as Constants from "../Common/Constants";
-import * as ViewModels from "../Contracts/ViewModels";
-import { AuthType } from "../AuthType";
-import { StringUtils } from "../Utils/StringUtils";
-import Explorer from "../Explorer/Explorer";
-
 export default class EnvironmentUtility {
-  public static getMongoBackendEndpoint(serverId: string, location: string, extensionEndpoint: string = ""): string {
-    const defaultEnvironment: string = "default";
-    const defaultLocation: string = "default";
-    let environment: string = serverId;
-    const endpointType: Constants.MongoBackendEndpointType =
-      Constants.MongoBackend.endpointsByEnvironment[environment] ||
-      Constants.MongoBackend.endpointsByEnvironment[defaultEnvironment];
-    if (endpointType === Constants.MongoBackendEndpointType.local) {
-      return `${extensionEndpoint}${Constants.MongoBackend.localhostEndpoint}`;
-    }
-
-    const normalizedLocation = EnvironmentUtility.normalizeRegionName(location);
-    return (
-      Constants.MongoBackend.endpointsByRegion[normalizedLocation] ||
-      Constants.MongoBackend.endpointsByRegion[defaultLocation]
-    );
-  }
-
-  public static isAadUser(): boolean {
-    return window.authType === AuthType.AAD;
-  }
-
-  public static getCassandraBackendEndpoint(explorer: Explorer): string {
-    const defaultLocation: string = "default";
-    const location: string = EnvironmentUtility.normalizeRegionName(explorer.databaseAccount().location);
-    return (
-      Constants.CassandraBackend.endpointsByRegion[location] ||
-      Constants.CassandraBackend.endpointsByRegion[defaultLocation]
-    );
-  }
-
   public static normalizeArmEndpointUri(uri: string): string {
     if (uri && uri.slice(-1) !== "/") {
       return `${uri}/`;
     }
     return uri;
   }
-
-  private static normalizeRegionName(region: string): string {
-    return region && StringUtils.stripSpacesFromString(region.toLocaleLowerCase());
-  }
 }

src/Common/ErrorParserUtility.ts

@@ -1,69 +1,69 @@
-import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
-
-export function replaceKnownError(err: string): string {
-  if (
-    window.dataExplorer.subscriptionType() === ViewModels.SubscriptionType.Internal &&
-    err.indexOf("SharedOffer is Disabled for your account") >= 0
-  ) {
-    return "Database throughput is not supported for internal subscriptions.";
-  } else if (err.indexOf("Partition key paths must contain only valid") >= 0) {
-    return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
-  }
-
-  return err;
-}
-
-export function parse(err: any): DataModels.ErrorDataModel[] {
-  try {
-    return _parse(err);
-  } catch (e) {
-    return [<DataModels.ErrorDataModel>{ message: JSON.stringify(err) }];
-  }
-}
-
-function _parse(err: any): DataModels.ErrorDataModel[] {
-  var normalizedErrors: DataModels.ErrorDataModel[] = [];
-  if (err.message && !err.code) {
-    normalizedErrors.push(err);
-  } else {
-    const innerErrors: any[] = _getInnerErrors(err.message);
-    normalizedErrors = innerErrors.map(innerError =>
-      typeof innerError === "string" ? { message: innerError } : innerError
-    );
-  }
-
-  return normalizedErrors;
-}
-
-function _getInnerErrors(message: string): any[] {
-  /*
-            The backend error message has an inner-message which is a stringified object. 
-
-            For SQL errors, the "errors" property is an array of SqlErrorDataModel.
-            Example:
-                "Message: {"Errors":["Resource with specified id or name already exists"]}\r\nActivityId: 80005000008d40b6a, Request URI: /apps/19000c000c0a0005/services/mctestdocdbprod-MasterService-0-00066ab9937/partitions/900005f9000e676fb8/replicas/13000000000955p"
-            For non-SQL errors the "Errors" propery is an array of string.
-            Example:
-                "Message: {"errors":[{"severity":"Error","location":{"start":7,"end":8},"code":"SC1001","message":"Syntax error, incorrect syntax near '.'."}]}\r\nActivityId: d3300016d4084e310a, Request URI: /apps/12401f9e1df77/services/dc100232b1f44545/partitions/f86f3bc0001a2f78/replicas/13085003638s"
-        */
-
-  let innerMessage: any = null;
-
-  const singleLineMessage = message.replace(/[\r\n]|\r|\n/g, "");
-  try {
-    // Multi-Partition error flavor
-    const regExp = /^(.*)ActivityId: (.*)/g;
-    const regString = regExp.exec(singleLineMessage);
-    const innerMessageString = regString[1];
-    innerMessage = JSON.parse(innerMessageString);
-  } catch (e) {
-    // Single-partition error flavor
-    const regExp = /^Message: (.*)ActivityId: (.*), Request URI: (.*)/g;
-    const regString = regExp.exec(singleLineMessage);
-    const innerMessageString = regString[1];
-    innerMessage = JSON.parse(innerMessageString);
-  }
-
-  return innerMessage.errors ? innerMessage.errors : innerMessage.Errors;
-}
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+
+export function replaceKnownError(err: string): string {
+  if (
+    window.dataExplorer.subscriptionType() === ViewModels.SubscriptionType.Internal &&
+    err.indexOf("SharedOffer is Disabled for your account") >= 0
+  ) {
+    return "Database throughput is not supported for internal subscriptions.";
+  } else if (err.indexOf("Partition key paths must contain only valid") >= 0) {
+    return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
+  }
+
+  return err;
+}
+
+export function parse(err: any): DataModels.ErrorDataModel[] {
+  try {
+    return _parse(err);
+  } catch (e) {
+    return [<DataModels.ErrorDataModel>{ message: JSON.stringify(err) }];
+  }
+}
+
+function _parse(err: any): DataModels.ErrorDataModel[] {
+  var normalizedErrors: DataModels.ErrorDataModel[] = [];
+  if (err.message && !err.code) {
+    normalizedErrors.push(err);
+  } else {
+    const innerErrors: any[] = _getInnerErrors(err.message);
+    normalizedErrors = innerErrors.map(innerError =>
+      typeof innerError === "string" ? { message: innerError } : innerError
+    );
+  }
+
+  return normalizedErrors;
+}
+
+function _getInnerErrors(message: string): any[] {
+  /*
+            The backend error message has an inner-message which is a stringified object. 
+
+            For SQL errors, the "errors" property is an array of SqlErrorDataModel.
+            Example:
+                "Message: {"Errors":["Resource with specified id or name already exists"]}\r\nActivityId: 80005000008d40b6a, Request URI: /apps/19000c000c0a0005/services/mctestdocdbprod-MasterService-0-00066ab9937/partitions/900005f9000e676fb8/replicas/13000000000955p"
+            For non-SQL errors the "Errors" propery is an array of string.
+            Example:
+                "Message: {"errors":[{"severity":"Error","location":{"start":7,"end":8},"code":"SC1001","message":"Syntax error, incorrect syntax near '.'."}]}\r\nActivityId: d3300016d4084e310a, Request URI: /apps/12401f9e1df77/services/dc100232b1f44545/partitions/f86f3bc0001a2f78/replicas/13085003638s"
+        */
+
+  let innerMessage: any = null;
+
+  const singleLineMessage = message.replace(/[\r\n]|\r|\n/g, "");
+  try {
+    // Multi-Partition error flavor
+    const regExp = /^(.*)ActivityId: (.*)/g;
+    const regString = regExp.exec(singleLineMessage);
+    const innerMessageString = regString[1];
+    innerMessage = JSON.parse(innerMessageString);
+  } catch (e) {
+    // Single-partition error flavor
+    const regExp = /^Message: (.*)ActivityId: (.*), Request URI: (.*)/g;
+    const regString = regExp.exec(singleLineMessage);
+    const innerMessageString = regString[1];
+    innerMessage = JSON.parse(innerMessageString);
+  }
+
+  return innerMessage.errors ? innerMessage.errors : innerMessage.Errors;
+}

src/Common/MessageHandler.test.ts

@@ -1,6 +1,5 @@
 import Q from "q";
 import * as MessageHandler from "./MessageHandler";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 
 describe("Message Handler", () => {
   it("should handle cached message", async () => {

src/Common/MessageHandler.ts

@@ -1,73 +1,76 @@
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import Q from "q";
-import * as _ from "underscore";
-import * as Constants from "./Constants";
-
-export interface CachedDataPromise<T> {
-  deferred: Q.Deferred<T>;
-  startTime: Date;
-  id: string;
-}
-
-export const RequestMap: Record<string, CachedDataPromise<any>> = {};
-
-export function handleCachedDataMessage(message: any): void {
-  const messageContent = message && message.message;
-  if (message == null || messageContent == null || messageContent.id == null || !RequestMap[messageContent.id]) {
-    return;
-  }
-
-  const cachedDataPromise = RequestMap[messageContent.id];
-  if (messageContent.error != null) {
-    cachedDataPromise.deferred.reject(messageContent.error);
-  } else {
-    cachedDataPromise.deferred.resolve(JSON.parse(messageContent.data));
-  }
-  runGarbageCollector();
-}
-
-export function sendCachedDataMessage<TResponseDataModel>(
-  messageType: MessageTypes,
-  params: Object[],
-  timeoutInMs?: number
-): Q.Promise<TResponseDataModel> {
-  let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
-    deferred: Q.defer<TResponseDataModel>(),
-    startTime: new Date(),
-    id: _.uniqueId()
-  };
-  RequestMap[cachedDataPromise.id] = cachedDataPromise;
-  sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
-
-  //TODO: Use telemetry to measure optimal time to resolve/reject promises
-  return cachedDataPromise.deferred.promise.timeout(
-    timeoutInMs || Constants.ClientDefaults.requestTimeoutMs,
-    "Timed out while waiting for response from portal"
-  );
-}
-
-export function sendMessage(data: any): void {
-  if (canSendMessage()) {
-    window.parent.postMessage(
-      {
-        signature: "pcIframe",
-        data: data
-      },
-      window.document.referrer
-    );
-  }
-}
-
-export function canSendMessage(): boolean {
-  return window.parent !== window;
-}
-
-// TODO: This is exported just for testing. It should not be.
-export function runGarbageCollector() {
-  Object.keys(RequestMap).forEach((key: string) => {
-    const promise: Q.Promise<any> = RequestMap[key].deferred.promise;
-    if (promise.isFulfilled() || promise.isRejected()) {
-      delete RequestMap[key];
-    }
-  });
-}
+import { MessageTypes } from "../Contracts/ExplorerContracts";
+import Q from "q";
+import * as _ from "underscore";
+import * as Constants from "./Constants";
+import { getDataExplorerWindow } from "../Utils/WindowUtils";
+
+export interface CachedDataPromise<T> {
+  deferred: Q.Deferred<T>;
+  startTime: Date;
+  id: string;
+}
+
+export const RequestMap: Record<string, CachedDataPromise<any>> = {};
+
+export function handleCachedDataMessage(message: any): void {
+  const messageContent = message && message.message;
+  if (message == null || messageContent == null || messageContent.id == null || !RequestMap[messageContent.id]) {
+    return;
+  }
+
+  const cachedDataPromise = RequestMap[messageContent.id];
+  if (messageContent.error != null) {
+    cachedDataPromise.deferred.reject(messageContent.error);
+  } else {
+    cachedDataPromise.deferred.resolve(JSON.parse(messageContent.data));
+  }
+  runGarbageCollector();
+}
+
+export function sendCachedDataMessage<TResponseDataModel>(
+  messageType: MessageTypes,
+  params: Object[],
+  timeoutInMs?: number
+): Q.Promise<TResponseDataModel> {
+  let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
+    deferred: Q.defer<TResponseDataModel>(),
+    startTime: new Date(),
+    id: _.uniqueId()
+  };
+  RequestMap[cachedDataPromise.id] = cachedDataPromise;
+  sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
+
+  //TODO: Use telemetry to measure optimal time to resolve/reject promises
+  return cachedDataPromise.deferred.promise.timeout(
+    timeoutInMs || Constants.ClientDefaults.requestTimeoutMs,
+    "Timed out while waiting for response from portal"
+  );
+}
+
+export function sendMessage(data: any): void {
+  if (canSendMessage()) {
+    // We try to find data explorer window first, then fallback to current window
+    const portalChildWindow = getDataExplorerWindow(window) || window;
+    portalChildWindow.parent.postMessage(
+      {
+        signature: "pcIframe",
+        data: data
+      },
+      portalChildWindow.document.referrer
+    );
+  }
+}
+
+export function canSendMessage(): boolean {
+  return window.parent !== window;
+}
+
+// TODO: This is exported just for testing. It should not be.
+export function runGarbageCollector() {
+  Object.keys(RequestMap).forEach((key: string) => {
+    const promise: Q.Promise<any> = RequestMap[key].deferred.promise;
+    if (promise.isFulfilled() || promise.isRejected()) {
+      delete RequestMap[key];
+    }
+  });
+}

src/Common/MongoProxyClient.test.ts

@@ -1,18 +1,10 @@
-import {
-  _createMongoCollectionWithARM,
-  deleteDocument,
-  getEndpoint,
-  queryDocuments,
-  readDocument,
-  updateDocument
-} from "./MongoProxyClient";
 import { AuthType } from "../AuthType";
-import { Collection } from "../Contracts/ViewModels";
-import { config } from "../Config";
-import { CosmosClient } from "./CosmosClient";
-import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
-import DocumentId from "../Explorer/Tree/DocumentId";
+import { resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
+import { Collection } from "../Contracts/ViewModels";
+import DocumentId from "../Explorer/Tree/DocumentId";
+import { updateUserContext } from "../UserContext";
+import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
 jest.mock("../ResourceProvider/ResourceProviderClient.ts");
 
 const databaseId = "testDB";
@@ -62,13 +54,15 @@ const databaseAccount = {
     tableEndpoint: "foo",
     cassandraEndpoint: "foo"
   }
-};
+} as DatabaseAccount;
 
 describe("MongoProxyClient", () => {
   describe("queryDocuments", () => {
     beforeEach(() => {
-      delete config.BACKEND_ENDPOINT;
-      CosmosClient.databaseAccount(databaseAccount as any);
+      resetConfigContext();
+      updateUserContext({
+        databaseAccount
+      });
       window.dataExplorer = {
         extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
         serverId: () => ""
@@ -88,7 +82,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct proxy URL in development", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       queryDocuments(databaseId, collection, true, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
         "https://localhost:1234/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
@@ -98,8 +92,10 @@ describe("MongoProxyClient", () => {
   });
   describe("readDocument", () => {
     beforeEach(() => {
-      delete config.MONGO_BACKEND_ENDPOINT;
-      CosmosClient.databaseAccount(databaseAccount as any);
+      resetConfigContext();
+      updateUserContext({
+        databaseAccount
+      });
       window.dataExplorer = {
         extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
         serverId: () => ""
@@ -119,7 +115,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct proxy URL in development", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
         "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
@@ -129,8 +125,10 @@ describe("MongoProxyClient", () => {
   });
   describe("createDocument", () => {
     beforeEach(() => {
-      delete config.MONGO_BACKEND_ENDPOINT;
-      CosmosClient.databaseAccount(databaseAccount as any);
+      resetConfigContext();
+      updateUserContext({
+        databaseAccount
+      });
       window.dataExplorer = {
         extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
         serverId: () => ""
@@ -150,7 +148,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct proxy URL in development", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       readDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
         "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
@@ -160,8 +158,10 @@ describe("MongoProxyClient", () => {
   });
   describe("updateDocument", () => {
     beforeEach(() => {
-      delete config.MONGO_BACKEND_ENDPOINT;
-      CosmosClient.databaseAccount(databaseAccount as any);
+      resetConfigContext();
+      updateUserContext({
+        databaseAccount
+      });
       window.dataExplorer = {
         extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
         serverId: () => ""
@@ -181,7 +181,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct proxy URL in development", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       updateDocument(databaseId, collection, documentId, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
         "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
@@ -191,8 +191,10 @@ describe("MongoProxyClient", () => {
   });
   describe("deleteDocument", () => {
     beforeEach(() => {
-      delete config.MONGO_BACKEND_ENDPOINT;
-      CosmosClient.databaseAccount(databaseAccount as any);
+      resetConfigContext();
+      updateUserContext({
+        databaseAccount
+      });
       window.dataExplorer = {
         extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
         serverId: () => ""
@@ -212,7 +214,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct proxy URL in development", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       deleteDocument(databaseId, collection, documentId);
       expect(window.fetch).toHaveBeenCalledWith(
         "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
@@ -222,9 +224,11 @@ describe("MongoProxyClient", () => {
   });
   describe("getEndpoint", () => {
     beforeEach(() => {
-      delete config.MONGO_BACKEND_ENDPOINT;
+      resetConfigContext();
       delete window.authType;
-      CosmosClient.databaseAccount(databaseAccount as any);
+      updateUserContext({
+        databaseAccount
+      });
       window.dataExplorer = {
         extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
         serverId: () => ""
@@ -232,74 +236,20 @@ describe("MongoProxyClient", () => {
     });
 
     it("returns a production endpoint", () => {
-      const endpoint = getEndpoint(databaseAccount as DatabaseAccount);
+      const endpoint = getEndpoint();
       expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
     });
 
     it("returns a development endpoint", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
-      const endpoint = getEndpoint(databaseAccount as DatabaseAccount);
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
+      const endpoint = getEndpoint();
       expect(endpoint).toEqual("https://localhost:1234/api/mongo/explorer");
     });
 
     it("returns a guest endpoint", () => {
       window.authType = AuthType.EncryptedToken;
-      const endpoint = getEndpoint(databaseAccount as DatabaseAccount);
+      const endpoint = getEndpoint();
       expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
     });
   });
-
-  describe("createMongoCollectionWithARM", () => {
-    it("should create a collection with autopilot when autopilot is selected + shared throughput is false", () => {
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      const properties = {
-        pk: "state",
-        coll: "abc-collection",
-        cd: true,
-        db: "a1-db",
-        st: false,
-        sid: "a2",
-        rg: "c1",
-        dba: "main",
-        is: false
-      };
-      _createMongoCollectionWithARM("management.azure.com", properties, { "x-ms-cosmos-offer-autopilot-tier": "1" });
-      expect(resourceProviderClientPutAsyncSpy).toHaveBeenCalledWith(
-        "subscriptions/a2/resourceGroups/c1/providers/Microsoft.DocumentDB/databaseAccounts/foo/mongodbDatabases/a1-db/collections/abc-collection",
-        "2020-04-01",
-        {
-          properties: {
-            options: { "x-ms-cosmos-offer-autopilot-tier": "1" },
-            resource: { id: "abc-collection" }
-          }
-        }
-      );
-    });
-    it("should create a collection with provisioned throughput when provisioned throughput is selected + shared throughput is false", () => {
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      const properties = {
-        pk: "state",
-        coll: "abc-collection",
-        cd: true,
-        db: "a1-db",
-        st: false,
-        sid: "a2",
-        rg: "c1",
-        dba: "main",
-        is: false,
-        offerThroughput: 400
-      };
-      _createMongoCollectionWithARM("management.azure.com", properties, undefined);
-      expect(resourceProviderClientPutAsyncSpy).toHaveBeenCalledWith(
-        "subscriptions/a2/resourceGroups/c1/providers/Microsoft.DocumentDB/databaseAccounts/foo/mongodbDatabases/a1-db/collections/abc-collection",
-        "2020-04-01",
-        {
-          properties: {
-            options: { throughput: "400" },
-            resource: { id: "abc-collection" }
-          }
-        }
-      );
-    });
-  });
 });

src/Common/MongoProxyClient.ts

@@ -1,22 +1,17 @@
-import * as Constants from "../Common/Constants";
-import * as DataExplorerConstants from "../Common/Constants";
-import * as DataModels from "../Contracts/DataModels";
-import EnvironmentUtility from "./EnvironmentUtility";
-import queryString from "querystring";
-import { AddDbUtilities } from "../Shared/AddDatabaseUtility";
-import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
-import { AuthType } from "../AuthType";
-import { Collection } from "../Contracts/ViewModels";
-import { config } from "../Config";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
-import { CosmosClient } from "./CosmosClient";
-import { sendMessage } from "./MessageHandler";
+import queryString from "querystring";
+import { AuthType } from "../AuthType";
+import { configContext } from "../ConfigContext";
+import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
-import { MinimalQueryIterator } from "./IteratorUtilities";
+import { Collection } from "../Contracts/ViewModels";
+import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentId from "../Explorer/Tree/DocumentId";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
+import { userContext } from "../UserContext";
+import { MinimalQueryIterator } from "./IteratorUtilities";
+import { sendMessage } from "./MessageHandler";
 
 const defaultHeaders = {
   [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
@@ -26,9 +21,9 @@ const defaultHeaders = {
 
 function authHeaders() {
   if (window.authType === AuthType.EncryptedToken) {
-    return { [HttpHeaders.guestAccessToken]: CosmosClient.accessToken() };
+    return { [HttpHeaders.guestAccessToken]: userContext.accessToken };
   } else {
-    return { [HttpHeaders.authorization]: CosmosClient.authorizationToken() };
+    return { [HttpHeaders.authorization]: userContext.authorizationToken };
   }
 }
 
@@ -67,7 +62,7 @@ export function queryDocuments(
   query: string,
   continuationToken?: string
 ): Promise<QueryResponse> {
-  const databaseAccount = CosmosClient.databaseAccount();
+  const databaseAccount = userContext.databaseAccount;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
     db: databaseId,
@@ -75,14 +70,14 @@ export function queryDocuments(
     resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
     rid: collection.rid,
     rtype: "docs",
-    sid: CosmosClient.subscriptionId(),
-    rg: CosmosClient.resourceGroup(),
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
       collection && collection.partitionKey && !collection.partitionKey.systemKey ? collection.partitionKeyProperty : ""
   };
 
-  const endpoint = getEndpoint(databaseAccount) || "";
+  const endpoint = getEndpoint() || "";
 
   const headers = {
     ...defaultHeaders,
@@ -125,7 +120,7 @@ export function readDocument(
   collection: Collection,
   documentId: DocumentId
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = CosmosClient.databaseAccount();
+  const databaseAccount = userContext.databaseAccount;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
   const path = idComponents.slice(0, 4).join("/");
@@ -136,14 +131,14 @@ export function readDocument(
     resourceUrl: `${resourceEndpoint}${path}/${rid}`,
     rid,
     rtype: "docs",
-    sid: CosmosClient.subscriptionId(),
-    rg: CosmosClient.resourceGroup(),
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
       documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
   };
 
-  const endpoint = getEndpoint(databaseAccount);
+  const endpoint = getEndpoint();
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "GET",
@@ -169,7 +164,7 @@ export function createDocument(
   partitionKeyProperty: string,
   documentContent: unknown
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = CosmosClient.databaseAccount();
+  const databaseAccount = userContext.databaseAccount;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
     db: databaseId,
@@ -177,13 +172,13 @@ export function createDocument(
     resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
     rid: collection.rid,
     rtype: "docs",
-    sid: CosmosClient.subscriptionId(),
-    rg: CosmosClient.resourceGroup(),
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : ""
   };
 
-  const endpoint = getEndpoint(databaseAccount);
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
@@ -208,7 +203,7 @@ export function updateDocument(
   documentId: DocumentId,
   documentContent: string
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = CosmosClient.databaseAccount();
+  const databaseAccount = userContext.databaseAccount;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
   const path = idComponents.slice(0, 5).join("/");
@@ -219,13 +214,13 @@ export function updateDocument(
     resourceUrl: `${resourceEndpoint}${path}/${rid}`,
     rid,
     rtype: "docs",
-    sid: CosmosClient.subscriptionId(),
-    rg: CosmosClient.resourceGroup(),
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
       documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
   };
-  const endpoint = getEndpoint(databaseAccount);
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -247,7 +242,7 @@ export function updateDocument(
 }
 
 export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
-  const databaseAccount = CosmosClient.databaseAccount();
+  const databaseAccount = userContext.databaseAccount;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
   const path = idComponents.slice(0, 5).join("/");
@@ -258,13 +253,13 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
     resourceUrl: `${resourceEndpoint}${path}/${rid}`,
     rid,
     rtype: "docs",
-    sid: CosmosClient.subscriptionId(),
-    rg: CosmosClient.resourceGroup(),
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
       documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
   };
-  const endpoint = getEndpoint(databaseAccount);
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -285,43 +280,35 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
 }
 
 export function createMongoCollectionWithProxy(
-  databaseId: string,
-  collectionId: string,
-  offerThroughput: number,
-  shardKey: string,
-  createDatabase: boolean,
-  sharedThroughput: boolean,
-  isSharded: boolean,
-  autopilotOptions?: DataModels.RpOptions
+  params: DataModels.CreateCollectionParams
 ): Promise<DataModels.Collection> {
-  const databaseAccount = CosmosClient.databaseAccount();
-  const params: DataModels.MongoParameters = {
+  const databaseAccount = userContext.databaseAccount;
+  const shardKey: string = params.partitionKey?.paths[0];
+  const mongoParams: DataModels.MongoParameters = {
     resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
-    db: databaseId,
-    coll: collectionId,
+    db: params.databaseId,
+    coll: params.collectionId,
     pk: shardKey,
-    offerThroughput,
-    cd: createDatabase,
-    st: sharedThroughput,
-    is: isSharded,
+    offerThroughput: params.offerThroughput,
+    cd: params.createNewDatabase,
+    st: params.databaseLevelThroughput,
+    is: !!shardKey,
     rid: "",
     rtype: "colls",
-    sid: CosmosClient.subscriptionId(),
-    rg: CosmosClient.resourceGroup(),
+    sid: userContext.subscriptionId,
+    rg: userContext.resourceGroup,
     dba: databaseAccount.name,
-    isAutoPilot: false
+    isAutoPilot: !!params.autoPilotMaxThroughput,
+    autoPilotThroughput: params.autoPilotMaxThroughput?.toString()
   };
 
-  if (autopilotOptions) {
-    params.isAutoPilot = true;
-    params.autoPilotTier = autopilotOptions[Constants.HttpHeaders.autoPilotTier] as string;
-  }
-
-  const endpoint = getEndpoint(databaseAccount);
+  const endpoint = getEndpoint();
 
   return window
     .fetch(
-      `${endpoint}/createCollection?${queryString.stringify((params as unknown) as queryString.ParsedUrlQueryInput)}`,
+      `${endpoint}/createCollection?${queryString.stringify(
+        (mongoParams as unknown) as queryString.ParsedUrlQueryInput
+      )}`,
       {
         method: "POST",
         headers: {
@@ -335,58 +322,13 @@ export function createMongoCollectionWithProxy(
       if (response.ok) {
         return response.json();
       }
-      return errorHandling(response, "creating collection", params);
+      return errorHandling(response, "creating collection", mongoParams);
     });
 }
 
-export function createMongoCollectionWithARM(
-  armEndpoint: string,
-  databaseId: string,
-  analyticalStorageTtl: number,
-  collectionId: string,
-  offerThroughput: number,
-  shardKey: string,
-  createDatabase: boolean,
-  sharedThroughput: boolean,
-  isSharded: boolean,
-  additionalOptions?: DataModels.RpOptions
-): Promise<DataModels.CreateCollectionWithRpResponse> {
-  const databaseAccount = CosmosClient.databaseAccount();
-  const params: DataModels.MongoParameters = {
-    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
-    db: databaseId,
-    coll: collectionId,
-    pk: shardKey,
-    offerThroughput,
-    cd: createDatabase,
-    st: sharedThroughput,
-    is: isSharded,
-    rid: "",
-    rtype: "colls",
-    sid: CosmosClient.subscriptionId(),
-    rg: CosmosClient.resourceGroup(),
-    dba: databaseAccount.name,
-    analyticalStorageTtl
-  };
-
-  if (createDatabase) {
-    return AddDbUtilities.createMongoDatabaseWithARM(
-      armEndpoint,
-      params,
-      sharedThroughput ? additionalOptions : {}
-    ).then(() => {
-      return _createMongoCollectionWithARM(armEndpoint, params, sharedThroughput ? {} : additionalOptions);
-    });
-  }
-  return _createMongoCollectionWithARM(armEndpoint, params, additionalOptions);
-}
-
-export function getEndpoint(databaseAccount: DataModels.DatabaseAccount): string {
-  const serverId = window.dataExplorer.serverId();
+export function getEndpoint(): string {
   const extensionEndpoint = window.dataExplorer.extensionEndpoint();
-  let url = config.MONGO_BACKEND_ENDPOINT
-    ? config.MONGO_BACKEND_ENDPOINT + "/api/mongo/explorer"
-    : EnvironmentUtility.getMongoBackendEndpoint(serverId, databaseAccount.location, extensionEndpoint);
+  let url = (configContext.MONGO_BACKEND_ENDPOINT || extensionEndpoint) + "/api/mongo/explorer";
 
   if (window.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");
@@ -411,50 +353,5 @@ async function errorHandling(response: Response, action: string, params: unknown
 }
 
 export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameters): string {
-  return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${
-    CosmosClient.databaseAccount().name
-  }/mongodbDatabases/${params.db}/collections/${params.coll}`;
-}
-
-export async function _createMongoCollectionWithARM(
-  armEndpoint: string,
-  params: DataModels.MongoParameters,
-  rpOptions: DataModels.RpOptions
-): Promise<DataModels.CreateCollectionWithRpResponse> {
-  const rpPayloadToCreateCollection: DataModels.MongoCreationRequest = {
-    properties: {
-      resource: {
-        id: params.coll
-      },
-      options: {}
-    }
-  };
-
-  if (params.is) {
-    rpPayloadToCreateCollection.properties.resource["shardKey"] = { [params.pk]: "Hash" };
-  }
-
-  if (!params.st) {
-    if (rpOptions) {
-      rpPayloadToCreateCollection.properties.options = rpOptions;
-    } else {
-      rpPayloadToCreateCollection.properties.options["throughput"] =
-        params.offerThroughput && params.offerThroughput.toString();
-    }
-  }
-
-  if (params.analyticalStorageTtl) {
-    rpPayloadToCreateCollection.properties.resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
-
-  try {
-    return new ResourceProviderClient<DataModels.CreateCollectionWithRpResponse>(armEndpoint).putAsync(
-      getARMCreateCollectionEndpoint(params),
-      DataExplorerConstants.ArmApiVersions.publicVersion,
-      rpPayloadToCreateCollection
-    );
-  } catch (response) {
-    errorHandling(response, "creating collection", undefined);
-    return undefined;
-  }
+  return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/mongodbDatabases/${params.db}/collections/${params.coll}`;
 }

src/Common/NotificationsClientBase.ts

@@ -2,9 +2,8 @@ import "jquery";
 import * as Q from "q";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
-
 import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
-import { CosmosClient } from "./CosmosClient";
+import { userContext } from "../UserContext";
 
 export class NotificationsClientBase {
   private _extensionEndpoint: string;
@@ -16,10 +15,10 @@ export class NotificationsClientBase {
 
   public fetchNotifications(): Q.Promise<DataModels.Notification[]> {
     const deferred: Q.Deferred<DataModels.Notification[]> = Q.defer<DataModels.Notification[]>();
-    const databaseAccount = CosmosClient.databaseAccount();
-    const subscriptionId: string = CosmosClient.subscriptionId();
-    const resourceGroup: string = CosmosClient.resourceGroup();
-    const url: string = `${this._extensionEndpoint}${this._notificationsApiSuffix}?accountName=${databaseAccount.name}&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
+    const databaseAccount = userContext.databaseAccount;
+    const subscriptionId = userContext.subscriptionId;
+    const resourceGroup = userContext.resourceGroup;
+    const url = `${this._extensionEndpoint}${this._notificationsApiSuffix}?accountName=${databaseAccount.name}&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
     const authorizationHeader: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
     const headers: any = {};
     headers[authorizationHeader.header] = authorizationHeader.token;

src/Common/QueriesClient.ts

@@ -1,24 +1,19 @@
+import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
-import DocumentId from "../Explorer/Tree/DocumentId";
-import * as ErrorParserUtility from "./ErrorParserUtility";
-import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
+import Explorer from "../Explorer/Explorer";
 import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { CosmosClient } from "./CosmosClient";
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import * as Logger from "./Logger";
+import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
+import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueryUtils } from "../Utils/QueryUtils";
-import Explorer from "../Explorer/Explorer";
-import {
-  getOrCreateDatabaseAndCollection,
-  createDocument,
-  queryDocuments,
-  queryDocumentsPage,
-  deleteDocument
-} from "./DocumentClientUtilityBase";
-import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
+import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
+import { userContext } from "../UserContext";
+import { createDocument, deleteDocument, queryDocuments, queryDocumentsPage } from "./DocumentClientUtilityBase";
+import { createCollection } from "./dataAccess/createCollection";
+import * as ErrorParserUtility from "./ErrorParserUtility";
+import * as Logger from "./Logger";
 
 export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
@@ -41,12 +36,13 @@ export class QueriesClient {
       ConsoleDataType.InProgress,
       "Setting up account for saving queries"
     );
-    return getOrCreateDatabaseAndCollection({
+    return createCollection({
       collectionId: SavedQueries.CollectionName,
+      createNewDatabase: true,
       databaseId: SavedQueries.DatabaseName,
       partitionKey: QueriesClient.PartitionKey,
       offerThroughput: SavedQueries.OfferThroughput,
-      databaseLevelThroughput: undefined
+      databaseLevelThroughput: false
     })
       .then(
         (collection: DataModels.Collection) => {
@@ -249,10 +245,10 @@ export class QueriesClient {
   }
 
   public getResourceId(): string {
-    const databaseAccount = CosmosClient.databaseAccount();
-    const databaseAccountName: string = (databaseAccount && databaseAccount.name) || "";
-    const subscriptionId: string = CosmosClient.subscriptionId() || "";
-    const resourceGroup: string = CosmosClient.resourceGroup() || "";
+    const databaseAccount = userContext.databaseAccount;
+    const databaseAccountName = (databaseAccount && databaseAccount.name) || "";
+    const subscriptionId = userContext.subscriptionId || "";
+    const resourceGroup = userContext.resourceGroup || "";
 
     return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}`;
   }

src/Common/dataAccess/createCollection.test.ts

@@ -0,0 +1,81 @@
+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";
+import { armRequest } from "../../Utils/arm/request";
+import { client } from "../CosmosClient";
+import { createCollection, constructRpOptions } from "./createCollection";
+import { updateUserContext } from "../../UserContext";
+
+describe("createCollection", () => {
+  const createCollectionParams: CreateCollectionParams = {
+    createNewDatabase: false,
+    collectionId: "testContainer",
+    databaseId: "testDatabase",
+    databaseLevelThroughput: true,
+    offerThroughput: 400
+  };
+
+  beforeAll(() => {
+    updateUserContext({
+      databaseAccount: {
+        name: "test"
+      } as DatabaseAccount,
+      defaultExperience: DefaultAccountExperienceType.DocumentDB
+    });
+  });
+
+  it("should call ARM if logged in with AAD", async () => {
+    window.authType = AuthType.AAD;
+    await createCollection(createCollectionParams);
+    expect(armRequest).toHaveBeenCalled();
+  });
+
+  it("should call SDK if not logged in with non-AAD method", async () => {
+    window.authType = AuthType.MasterKey;
+    (client as jest.Mock).mockReturnValue({
+      databases: {
+        createIfNotExists: () => {
+          return {
+            database: {
+              containers: {
+                create: () => ({})
+              }
+            }
+          };
+        }
+      }
+    });
+    await createCollection(createCollectionParams);
+    expect(client).toHaveBeenCalled();
+  });
+
+  it("constructRpOptions should return the correct options", () => {
+    expect(constructRpOptions(createCollectionParams)).toEqual({});
+
+    const manualThroughputParams: CreateCollectionParams = {
+      createNewDatabase: false,
+      collectionId: "testContainer",
+      databaseId: "testDatabase",
+      databaseLevelThroughput: false,
+      offerThroughput: 400
+    };
+    expect(constructRpOptions(manualThroughputParams)).toEqual({ throughput: 400 });
+
+    const autoPilotThroughputParams: CreateCollectionParams = {
+      createNewDatabase: false,
+      collectionId: "testContainer",
+      databaseId: "testDatabase",
+      databaseLevelThroughput: false,
+      offerThroughput: 400,
+      autoPilotMaxThroughput: 4000
+    };
+    expect(constructRpOptions(autoPilotThroughputParams)).toEqual({
+      autoscaleSettings: {
+        maxThroughput: 4000
+      }
+    });
+  });
+});

src/Common/dataAccess/createCollection.ts

@@ -0,0 +1,384 @@
+import * as DataModels from "../../Contracts/DataModels";
+import * as ErrorParserUtility from "../ErrorParserUtility";
+import { AuthType } from "../../AuthType";
+import { ContainerResponse, DatabaseResponse } from "@azure/cosmos";
+import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
+import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import * as ARMTypes from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { client } from "../CosmosClient";
+import { createMongoCollectionWithProxy } from "../MongoProxyClient";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import {
+  createUpdateCassandraTable,
+  getCassandraTable
+} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import {
+  createUpdateGremlinGraph,
+  getGremlinGraph
+} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+import { createDatabase } from "./createDatabase";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+
+export const createCollection = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  let collection: DataModels.Collection;
+  const clearMessage = logConsoleProgress(
+    `Creating a new container ${params.collectionId} for database ${params.databaseId}`
+  );
+  try {
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+      if (params.createNewDatabase) {
+        const createDatabaseParams: DataModels.CreateDatabaseParams = {
+          autoPilotMaxThroughput: params.autoPilotMaxThroughput,
+          databaseId: params.databaseId,
+          databaseLevelThroughput: params.databaseLevelThroughput,
+          offerThroughput: params.offerThroughput
+        };
+        await createDatabase(createDatabaseParams);
+      }
+      collection = await createCollectionWithARM(params);
+    } else if (userContext.defaultExperience === DefaultAccountExperienceType.MongoDB) {
+      collection = await createMongoCollectionWithProxy(params);
+    } else {
+      collection = await createCollectionWithSDK(params);
+    }
+  } catch (error) {
+    const sanitizedError = ErrorParserUtility.replaceKnownError(JSON.stringify(error));
+    logConsoleError(`Error while creating container ${params.collectionId}:\n ${sanitizedError}`);
+    logError(JSON.stringify(error), "CreateCollection", error.code);
+    sendNotificationForError(error);
+    clearMessage();
+    throw error;
+  }
+  logConsoleInfo(`Successfully created container ${params.collectionId}`);
+  await refreshCachedResources();
+  clearMessage();
+  return collection;
+};
+
+const createCollectionWithARM = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  const defaultExperience = userContext.defaultExperience;
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      return createSqlContainer(params);
+    case DefaultAccountExperienceType.MongoDB:
+      return createMongoCollection(params);
+    case DefaultAccountExperienceType.Cassandra:
+      return createCassandraTable(params);
+    case DefaultAccountExperienceType.Graph:
+      return createGraph(params);
+    case DefaultAccountExperienceType.Table:
+      return createTable(params);
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+};
+
+const createSqlContainer = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  try {
+    const getResponse = await getSqlContainer(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId,
+      params.collectionId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create container failed: container with id ${params.collectionId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
+  const resource: ARMTypes.SqlContainerResource = {
+    id: params.collectionId
+  };
+  if (params.analyticalStorageTtl) {
+    resource.analyticalStorageTtl = params.analyticalStorageTtl;
+  }
+  if (params.indexingPolicy) {
+    resource.indexingPolicy = params.indexingPolicy;
+  }
+  if (params.partitionKey) {
+    resource.partitionKey = params.partitionKey;
+  }
+  if (params.uniqueKeyPolicy) {
+    resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
+  }
+
+  const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
+    properties: {
+      resource,
+      options
+    }
+  };
+
+  const createResponse = await createUpdateSqlContainer(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    params.collectionId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Collection);
+};
+
+const createMongoCollection = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  const mongoWildcardIndexOnAllFields: ARMTypes.MongoIndex[] = [{ key: { keys: ["$**"] } }, { key: { keys: ["_id"] } }];
+  try {
+    const getResponse = await getMongoDBCollection(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId,
+      params.collectionId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create collection failed: collection with id ${params.collectionId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
+  const resource: ARMTypes.MongoDBCollectionResource = {
+    id: params.collectionId
+  };
+  if (params.analyticalStorageTtl) {
+    resource.analyticalStorageTtl = params.analyticalStorageTtl;
+  }
+  if (params.partitionKey) {
+    const partitionKeyPath: string = params.partitionKey.paths[0];
+    resource.shardKey = { [partitionKeyPath]: "Hash" };
+  }
+  if (params.createMongoWildcardIndex) {
+    resource.indexes = mongoWildcardIndexOnAllFields;
+  }
+
+  const rpPayload: ARMTypes.MongoDBCollectionCreateUpdateParameters = {
+    properties: {
+      resource,
+      options
+    }
+  };
+
+  const createResponse = await createUpdateMongoDBCollection(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    params.collectionId,
+    rpPayload
+  );
+
+  if (params.createMongoWildcardIndex) {
+    TelemetryProcessor.trace(Action.CreateMongoCollectionWithWildcardIndex, ActionModifiers.Mark, {
+      message: "Mongo Collection created with wildcard index on all fields."
+    });
+  }
+
+  return createResponse && (createResponse.properties.resource as DataModels.Collection);
+};
+
+const createCassandraTable = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  try {
+    const getResponse = await getCassandraTable(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId,
+      params.collectionId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create table failed: table with id ${params.collectionId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
+  const resource: ARMTypes.CassandraTableResource = {
+    id: params.collectionId
+  };
+  if (params.analyticalStorageTtl) {
+    resource.analyticalStorageTtl = params.analyticalStorageTtl;
+  }
+
+  const rpPayload: ARMTypes.CassandraTableCreateUpdateParameters = {
+    properties: {
+      resource,
+      options
+    }
+  };
+
+  const createResponse = await createUpdateCassandraTable(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    params.collectionId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Collection);
+};
+
+const createGraph = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  try {
+    const getResponse = await getGremlinGraph(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId,
+      params.collectionId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create graph failed: graph with id ${params.collectionId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
+  const resource: ARMTypes.GremlinGraphResource = {
+    id: params.collectionId
+  };
+
+  if (params.indexingPolicy) {
+    resource.indexingPolicy = params.indexingPolicy;
+  }
+  if (params.partitionKey) {
+    resource.partitionKey = params.partitionKey;
+  }
+  if (params.uniqueKeyPolicy) {
+    resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
+  }
+
+  const rpPayload: ARMTypes.GremlinGraphCreateUpdateParameters = {
+    properties: {
+      resource,
+      options
+    }
+  };
+
+  const createResponse = await createUpdateGremlinGraph(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    params.collectionId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Collection);
+};
+
+const createTable = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  try {
+    const getResponse = await getTable(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.collectionId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create table failed: table with id ${params.collectionId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
+  const resource: ARMTypes.TableResource = {
+    id: params.collectionId
+  };
+
+  const rpPayload: ARMTypes.TableCreateUpdateParameters = {
+    properties: {
+      resource,
+      options
+    }
+  };
+
+  const createResponse = await createUpdateTable(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.collectionId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Collection);
+};
+
+export const constructRpOptions = (params: DataModels.CreateDatabaseParams): ARMTypes.CreateUpdateOptions => {
+  if (params.databaseLevelThroughput) {
+    return {};
+  }
+
+  if (params.autoPilotMaxThroughput) {
+    return {
+      autoscaleSettings: {
+        maxThroughput: params.autoPilotMaxThroughput
+      }
+    };
+  }
+
+  return {
+    throughput: params.offerThroughput
+  };
+};
+
+const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  const createCollectionBody: ContainerRequest = {
+    id: params.collectionId,
+    partitionKey: params.partitionKey || undefined,
+    indexingPolicy: params.indexingPolicy || undefined,
+    uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
+    analyticalStorageTtl: params.analyticalStorageTtl
+  } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
+  const collectionOptions: RequestOptions = {};
+  const createDatabaseBody: DatabaseRequest = { id: params.databaseId };
+
+  if (params.databaseLevelThroughput) {
+    if (params.autoPilotMaxThroughput) {
+      createDatabaseBody.maxThroughput = params.autoPilotMaxThroughput;
+    } else {
+      createDatabaseBody.throughput = params.offerThroughput;
+    }
+  } else {
+    if (params.autoPilotMaxThroughput) {
+      createCollectionBody.maxThroughput = params.autoPilotMaxThroughput;
+    } else {
+      createCollectionBody.throughput = params.offerThroughput;
+    }
+  }
+
+  const databaseResponse: DatabaseResponse = await client().databases.createIfNotExists(createDatabaseBody);
+  const collectionResponse: ContainerResponse = await databaseResponse?.database.containers.create(
+    createCollectionBody,
+    collectionOptions
+  );
+  return collectionResponse?.resource as DataModels.Collection;
+};

src/Common/dataAccess/createDatabase.ts

@@ -0,0 +1,250 @@
+import * as DataModels from "../../Contracts/DataModels";
+import { AuthType } from "../../AuthType";
+import { DatabaseResponse } from "@azure/cosmos";
+import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import {
+  CassandraKeyspaceCreateUpdateParameters,
+  GremlinDatabaseCreateUpdateParameters,
+  MongoDBDatabaseCreateUpdateParameters,
+  SqlDatabaseCreateUpdateParameters,
+  CreateUpdateOptions
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { client } from "../CosmosClient";
+import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import {
+  createUpdateCassandraKeyspace,
+  getCassandraKeyspace
+} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import {
+  createUpdateMongoDBDatabase,
+  getMongoDBDatabase
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import {
+  createUpdateGremlinDatabase,
+  getGremlinDatabase
+} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { refreshCachedOffers, refreshCachedResources } from "../DataAccessUtilityBase";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+
+export async function createDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  let database: DataModels.Database;
+  const clearMessage = logConsoleProgress(`Creating a new database ${params.databaseId}`);
+  try {
+    if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
+      throw new Error("Creating database resources is not allowed for tables accounts");
+    }
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+      database = await createDatabaseWithARM(params);
+    } else {
+      database = await createDatabaseWithSDK(params);
+    }
+  } catch (error) {
+    logConsoleError(`Error while creating database ${params.databaseId}:\n ${error.message}`);
+    logError(JSON.stringify(error), "CreateDatabase", error.code);
+    sendNotificationForError(error);
+    clearMessage();
+    throw error;
+  }
+  logConsoleInfo(`Successfully created database ${params.databaseId}`);
+  await refreshCachedResources();
+  await refreshCachedOffers();
+  clearMessage();
+  return database;
+}
+
+async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  const defaultExperience = userContext.defaultExperience;
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      return createSqlDatabase(params);
+    case DefaultAccountExperienceType.MongoDB:
+      return createMongoDatabase(params);
+    case DefaultAccountExperienceType.Cassandra:
+      return createCassandraKeyspace(params);
+    case DefaultAccountExperienceType.Graph:
+      return createGremlineDatabase(params);
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+}
+
+async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  try {
+    const getResponse = await getSqlDatabase(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: CreateUpdateOptions = constructRpOptions(params);
+  const rpPayload: SqlDatabaseCreateUpdateParameters = {
+    properties: {
+      resource: {
+        id: params.databaseId
+      },
+      options
+    }
+  };
+  const createResponse = await createUpdateSqlDatabase(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Database);
+}
+
+async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  try {
+    const getResponse = await getMongoDBDatabase(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: CreateUpdateOptions = constructRpOptions(params);
+  const rpPayload: MongoDBDatabaseCreateUpdateParameters = {
+    properties: {
+      resource: {
+        id: params.databaseId
+      },
+      options
+    }
+  };
+  const createResponse = await createUpdateMongoDBDatabase(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Database);
+}
+
+async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  try {
+    const getResponse = await getCassandraKeyspace(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: CreateUpdateOptions = constructRpOptions(params);
+  const rpPayload: CassandraKeyspaceCreateUpdateParameters = {
+    properties: {
+      resource: {
+        id: params.databaseId
+      },
+      options
+    }
+  };
+  const createResponse = await createUpdateCassandraKeyspace(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Database);
+}
+
+async function createGremlineDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  try {
+    const getResponse = await getGremlinDatabase(
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      params.databaseId
+    );
+    if (getResponse?.properties?.resource) {
+      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
+    }
+  } catch (error) {
+    if (error.code !== "NotFound") {
+      throw error;
+    }
+  }
+
+  const options: CreateUpdateOptions = constructRpOptions(params);
+  const rpPayload: GremlinDatabaseCreateUpdateParameters = {
+    properties: {
+      resource: {
+        id: params.databaseId
+      },
+      options
+    }
+  };
+  const createResponse = await createUpdateGremlinDatabase(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    rpPayload
+  );
+  return createResponse && (createResponse.properties.resource as DataModels.Database);
+}
+
+async function createDatabaseWithSDK(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  const createBody: DatabaseRequest = { id: params.databaseId };
+
+  if (params.databaseLevelThroughput) {
+    if (params.autoPilotMaxThroughput) {
+      createBody.maxThroughput = params.autoPilotMaxThroughput;
+    } else {
+      createBody.throughput = params.offerThroughput;
+    }
+  }
+
+  const response: DatabaseResponse = await client().databases.create(createBody);
+  return response.resource;
+}
+
+function constructRpOptions(params: DataModels.CreateDatabaseParams): CreateUpdateOptions {
+  if (!params.databaseLevelThroughput) {
+    return {};
+  }
+
+  if (params.autoPilotMaxThroughput) {
+    return {
+      autoscaleSettings: {
+        maxThroughput: params.autoPilotMaxThroughput
+      }
+    };
+  }
+
+  return {
+    throughput: params.offerThroughput
+  };
+}

src/Common/dataAccess/createStoredProcedure.ts

@@ -0,0 +1,28 @@
+import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function createStoredProcedure(
+  databaseId: string,
+  collectionId: string,
+  storedProcedure: StoredProcedureDefinition
+): Promise<StoredProcedureDefinition & Resource> {
+  let createdStoredProcedure: StoredProcedureDefinition & Resource;
+  const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.storedProcedures.create(storedProcedure);
+    createdStoredProcedure = response.resource;
+  } catch (error) {
+    logConsoleError(`Error while creating stored procedure ${storedProcedure.id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "CreateStoredProcedure", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return createdStoredProcedure;
+}

src/Common/dataAccess/createTrigger.ts

@@ -0,0 +1,28 @@
+import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function createTrigger(
+  databaseId: string,
+  collectionId: string,
+  trigger: TriggerDefinition
+): Promise<TriggerDefinition & Resource> {
+  let createdTrigger: TriggerDefinition & Resource;
+  const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.triggers.create(trigger);
+    createdTrigger = response.resource;
+  } catch (error) {
+    logConsoleError(`Error while creating trigger ${trigger.id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "CreateTrigger", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return createdTrigger;
+}

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -0,0 +1,28 @@
+import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function createUserDefinedFunction(
+  databaseId: string,
+  collectionId: string,
+  userDefinedFunction: UserDefinedFunctionDefinition
+): Promise<UserDefinedFunctionDefinition & Resource> {
+  let createdUserDefinedFunction: UserDefinedFunctionDefinition & Resource;
+  const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.userDefinedFunctions.create(userDefinedFunction);
+    createdUserDefinedFunction = response.resource;
+  } catch (error) {
+    logConsoleError(`Error while creating user defined function ${userDefinedFunction.id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "CreateUserupdateUserDefinedFunction", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return createdUserDefinedFunction;
+}

src/Common/dataAccess/deleteCollection.test.ts

@@ -1,16 +1,46 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../MessageHandler");
+jest.mock("../CosmosClient");
 import { deleteCollection } from "./deleteCollection";
 import { armRequest } from "../../Utils/arm/request";
 import { AuthType } from "../../AuthType";
+import { client } from "../CosmosClient";
+import { updateUserContext } from "../../UserContext";
+import { DatabaseAccount } from "../../Contracts/DataModels";
 import { sendCachedDataMessage } from "../MessageHandler";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 
 describe("deleteCollection", () => {
+  beforeAll(() => {
+    updateUserContext({
+      databaseAccount: {
+        name: "test"
+      } as DatabaseAccount,
+      defaultExperience: DefaultAccountExperienceType.DocumentDB
+    });
+    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
+  });
+
   it("should call ARM if logged in with AAD", async () => {
     window.authType = AuthType.AAD;
-    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
     await deleteCollection("database", "collection");
     expect(armRequest).toHaveBeenCalled();
   });
-  // TODO: Test non-AAD case
+
+  it("should call SDK if not logged in with non-AAD method", async () => {
+    window.authType = AuthType.MasterKey;
+    (client as jest.Mock).mockReturnValue({
+      database: () => {
+        return {
+          container: () => {
+            return {
+              delete: (): unknown => undefined
+            };
+          }
+        };
+      }
+    });
+    await deleteCollection("database", "collection");
+    expect(client).toHaveBeenCalled();
+  });
 });

src/Common/dataAccess/deleteCollection.ts

@@ -1,31 +1,57 @@
-import { CosmosClient } from "../CosmosClient";
-import { refreshCachedResources } from "../DataAccessUtilityBase";
-import { logConsoleProgress, logConsoleInfo, logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { deleteSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteCassandraTable } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { deleteTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
 
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
   try {
-    if (window.authType === AuthType.AAD) {
-      await deleteSqlContainer(
-        CosmosClient.subscriptionId(),
-        CosmosClient.resourceGroup(),
-        CosmosClient.databaseAccount().name,
-        databaseId,
-        collectionId
-      );
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+      await deleteCollectionWithARM(databaseId, collectionId);
     } else {
-      await CosmosClient.client()
+      await client()
         .database(databaseId)
         .container(collectionId)
         .delete();
     }
   } catch (error) {
     logConsoleError(`Error while deleting container ${collectionId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "DeleteCollection", error.code);
+    sendNotificationForError(error);
     throw error;
   }
   logConsoleInfo(`Successfully deleted container ${collectionId}`);
   clearMessage();
   await refreshCachedResources();
 }
+
+function deleteCollectionWithARM(databaseId: string, collectionId: string): Promise<void> {
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.defaultExperience;
+
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      return deleteSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+    case DefaultAccountExperienceType.MongoDB:
+      return deleteMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+    case DefaultAccountExperienceType.Cassandra:
+      return deleteCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+    case DefaultAccountExperienceType.Graph:
+      return deleteGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+    case DefaultAccountExperienceType.Table:
+      return deleteTable(subscriptionId, resourceGroup, accountName, collectionId);
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+}

src/Common/dataAccess/deleteDatabase.test.ts

@@ -1,16 +1,42 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../MessageHandler");
+jest.mock("../CosmosClient");
 import { deleteDatabase } from "./deleteDatabase";
 import { armRequest } from "../../Utils/arm/request";
 import { AuthType } from "../../AuthType";
+import { client } from "../CosmosClient";
+import { updateUserContext } from "../../UserContext";
+import { DatabaseAccount } from "../../Contracts/DataModels";
 import { sendCachedDataMessage } from "../MessageHandler";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 
 describe("deleteDatabase", () => {
+  beforeAll(() => {
+    updateUserContext({
+      databaseAccount: {
+        name: "test"
+      } as DatabaseAccount,
+      defaultExperience: DefaultAccountExperienceType.DocumentDB
+    });
+    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
+  });
+
   it("should call ARM if logged in with AAD", async () => {
     window.authType = AuthType.AAD;
-    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
     await deleteDatabase("database");
     expect(armRequest).toHaveBeenCalled();
   });
-  // TODO: Test non-AAD case
+
+  it("should call SDK if not logged in with non-AAD method", async () => {
+    window.authType = AuthType.MasterKey;
+    (client as jest.Mock).mockReturnValue({
+      database: () => {
+        return {
+          delete: (): unknown => undefined
+        };
+      }
+    });
+    await deleteDatabase("database");
+    expect(client).toHaveBeenCalled();
+  });
 });

src/Common/dataAccess/deleteDatabase.ts

@@ -1,8 +1,13 @@
-import { CosmosClient } from "../CosmosClient";
-import { refreshCachedResources } from "../DataAccessUtilityBase";
-import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteCassandraKeyspace } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
 import { logError } from "../Logger";
 import { sendNotificationForError } from "./sendNotificationForError";
 
@@ -10,15 +15,13 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting database ${databaseId}`);
 
   try {
-    if (window.authType === AuthType.AAD) {
-      await deleteSqlDatabase(
-        CosmosClient.subscriptionId(),
-        CosmosClient.resourceGroup(),
-        CosmosClient.databaseAccount().name,
-        databaseId
-      );
+    if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
+      throw new Error("Deleting database resources is not allowed for tables accounts");
+    }
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+      await deleteDatabaseWithARM(databaseId);
     } else {
-      await CosmosClient.client()
+      await client()
         .database(databaseId)
         .delete();
     }
@@ -32,3 +35,23 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
   clearMessage();
   await refreshCachedResources();
 }
+
+function deleteDatabaseWithARM(databaseId: string): Promise<void> {
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.defaultExperience;
+
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      return deleteSqlDatabase(subscriptionId, resourceGroup, accountName, databaseId);
+    case DefaultAccountExperienceType.MongoDB:
+      return deleteMongoDBDatabase(subscriptionId, resourceGroup, accountName, databaseId);
+    case DefaultAccountExperienceType.Cassandra:
+      return deleteCassandraKeyspace(subscriptionId, resourceGroup, accountName, databaseId);
+    case DefaultAccountExperienceType.Graph:
+      return deleteGremlinDatabase(subscriptionId, resourceGroup, accountName, databaseId);
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+}

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -0,0 +1,26 @@
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function deleteStoredProcedure(
+  databaseId: string,
+  collectionId: string,
+  storedProcedureId: string
+): Promise<void> {
+  const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
+  try {
+    await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.storedProcedure(storedProcedureId)
+      .delete();
+  } catch (error) {
+    logConsoleError(`Error while deleting stored procedure ${storedProcedureId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "DeleteStoredProcedure", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return undefined;
+}

src/Common/dataAccess/deleteTrigger.ts

@@ -0,0 +1,22 @@
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function deleteTrigger(databaseId: string, collectionId: string, triggerId: string): Promise<void> {
+  const clearMessage = logConsoleProgress(`Deleting trigger ${triggerId}`);
+  try {
+    await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.trigger(triggerId)
+      .delete();
+  } catch (error) {
+    logConsoleError(`Error while deleting trigger ${triggerId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "DeleteTrigger", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return undefined;
+}

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -0,0 +1,22 @@
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function deleteUserDefinedFunction(databaseId: string, collectionId: string, id: string): Promise<void> {
+  const clearMessage = logConsoleProgress(`Deleting user defined function ${id}`);
+  try {
+    await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.userDefinedFunction(id)
+      .delete();
+  } catch (error) {
+    logConsoleError(`Error while deleting user defined function ${id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "DeleteUserDefinedFunction", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return undefined;
+}

src/Common/dataAccess/readCollection.test.ts

@@ -0,0 +1,35 @@
+jest.mock("../CosmosClient");
+import { AuthType } from "../../AuthType";
+import { DatabaseAccount } from "../../Contracts/DataModels";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { client } from "../CosmosClient";
+import { readCollection } from "./readCollection";
+import { updateUserContext } from "../../UserContext";
+
+describe("readCollection", () => {
+  beforeAll(() => {
+    updateUserContext({
+      databaseAccount: {
+        name: "test"
+      } as DatabaseAccount,
+      defaultExperience: DefaultAccountExperienceType.DocumentDB
+    });
+  });
+
+  it("should call SDK if logged in with resource token", async () => {
+    window.authType = AuthType.ResourceToken;
+    (client as jest.Mock).mockReturnValue({
+      database: () => {
+        return {
+          container: () => {
+            return {
+              read: (): unknown => ({})
+            };
+          }
+        };
+      }
+    });
+    await readCollection("database", "collection");
+    expect(client).toHaveBeenCalled();
+  });
+});

src/Common/dataAccess/readCollection.ts

@@ -0,0 +1,24 @@
+import * as DataModels from "../../Contracts/DataModels";
+import { client } from "../CosmosClient";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function readCollection(databaseId: string, collectionId: string): Promise<DataModels.Collection> {
+  let collection: DataModels.Collection;
+  const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .read();
+    collection = response.resource as DataModels.Collection;
+  } catch (error) {
+    logConsoleError(`Error while querying container ${collectionId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadCollection", error.code);
+    sendNotificationForError(error);
+    throw error;
+  }
+  clearMessage();
+  return collection;
+}

src/Common/dataAccess/readCollectionOffer.ts

@@ -0,0 +1,126 @@
+import * as DataModels from "../../Contracts/DataModels";
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { HttpHeaders } from "../Constants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
+import { getSqlContainerThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { getMongoDBCollectionThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { getCassandraTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { getGremlinGraphThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { getTableThroughput } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { readOffers } from "./readOffers";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+
+export const readCollectionOffer = async (
+  params: DataModels.ReadCollectionOfferParams
+): Promise<DataModels.OfferWithHeaders> => {
+  const clearMessage = logConsoleProgress(`Querying offer for collection ${params.collectionId}`);
+  let offerId = params.offerId;
+  if (!offerId) {
+    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+      try {
+        offerId = await getCollectionOfferIdWithARM(params.databaseId, params.collectionId);
+      } catch (error) {
+        clearMessage();
+        if (error.code !== "NotFound") {
+          throw error;
+        }
+        return undefined;
+      }
+    } else {
+      offerId = await getCollectionOfferIdWithSDK(params.collectionResourceId);
+      if (!offerId) {
+        clearMessage();
+        return undefined;
+      }
+    }
+  }
+
+  const options: RequestOptions = {
+    initialHeaders: {
+      [HttpHeaders.populateCollectionThroughputInfo]: true
+    }
+  };
+
+  try {
+    const response = await client()
+      .offer(offerId)
+      .read(options);
+    return (
+      response && {
+        ...response.resource,
+        headers: response.headers
+      }
+    );
+  } catch (error) {
+    logConsoleError(`Error while querying offer for collection ${params.collectionId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadCollectionOffer", error.code);
+    sendNotificationForError(error);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};
+
+const getCollectionOfferIdWithARM = async (databaseId: string, collectionId: string): Promise<string> => {
+  let rpResponse;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.defaultExperience;
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      rpResponse = await getSqlContainerThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.MongoDB:
+      rpResponse = await getMongoDBCollectionThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.Cassandra:
+      rpResponse = await getCassandraTableThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.Graph:
+      rpResponse = await getGremlinGraphThroughput(
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        databaseId,
+        collectionId
+      );
+      break;
+    case DefaultAccountExperienceType.Table:
+      rpResponse = await getTableThroughput(subscriptionId, resourceGroup, accountName, collectionId);
+      break;
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+
+  return rpResponse?.name;
+};
+
+const getCollectionOfferIdWithSDK = async (collectionResourceId: string): Promise<string> => {
+  const offers = await readOffers();
+  const offer = offers.find(offer => offer.resource === collectionResourceId);
+  return offer?.id;
+};

src/Common/dataAccess/readCollectionQuotaInfo.ts

@@ -0,0 +1,48 @@
+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 { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+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) {
+    logConsoleError(`Error while querying quota info for container ${collection.id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadCollectionQuotaInfo", error.code);
+    sendNotificationForError(error);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/readCollections.test.ts

@@ -0,0 +1,45 @@
+jest.mock("../../Utils/arm/request");
+jest.mock("../CosmosClient");
+import { AuthType } from "../../AuthType";
+import { DatabaseAccount } from "../../Contracts/DataModels";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { armRequest } from "../../Utils/arm/request";
+import { client } from "../CosmosClient";
+import { readCollections } from "./readCollections";
+import { updateUserContext } from "../../UserContext";
+
+describe("readCollections", () => {
+  beforeAll(() => {
+    updateUserContext({
+      databaseAccount: {
+        name: "test"
+      } as DatabaseAccount,
+      defaultExperience: DefaultAccountExperienceType.DocumentDB
+    });
+  });
+
+  it("should call ARM if logged in with AAD", async () => {
+    window.authType = AuthType.AAD;
+    await readCollections("database");
+    expect(armRequest).toHaveBeenCalled();
+  });
+
+  it("should call SDK if not logged in with non-AAD method", async () => {
+    window.authType = AuthType.MasterKey;
+    (client as jest.Mock).mockReturnValue({
+      database: () => {
+        return {
+          containers: {
+            readAll: () => {
+              return {
+                fetchAll: (): unknown => []
+              };
+            }
+          }
+        };
+      }
+    });
+    await readCollections("database");
+    expect(client).toHaveBeenCalled();
+  });
+});

src/Common/dataAccess/readCollections.ts

@@ -0,0 +1,71 @@
+import * as DataModels from "../../Contracts/DataModels";
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { client } from "../CosmosClient";
+import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+
+export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
+  let collections: DataModels.Collection[];
+  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
+  try {
+    if (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
+    ) {
+      collections = await readCollectionsWithARM(databaseId);
+    } else {
+      const sdkResponse = await client()
+        .database(databaseId)
+        .containers.readAll()
+        .fetchAll();
+      collections = sdkResponse.resources as DataModels.Collection[];
+    }
+  } catch (error) {
+    logConsoleError(`Error while querying containers for database ${databaseId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadCollections", error.code);
+    sendNotificationForError(error);
+    throw error;
+  }
+  clearMessage();
+  return collections;
+}
+
+async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Collection[]> {
+  let rpResponse;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.defaultExperience;
+
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      rpResponse = await listSqlContainers(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    case DefaultAccountExperienceType.MongoDB:
+      rpResponse = await listMongoDBCollections(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    case DefaultAccountExperienceType.Cassandra:
+      rpResponse = await listCassandraTables(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    case DefaultAccountExperienceType.Graph:
+      rpResponse = await listGremlinGraphs(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    case DefaultAccountExperienceType.Table:
+      rpResponse = await listTables(subscriptionId, resourceGroup, accountName);
+      break;
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+
+  return rpResponse?.value?.map(collection => collection.properties?.resource as DataModels.Collection);
+}

src/Common/dataAccess/readDatabaseOffer.ts

@@ -0,0 +1,102 @@
+import * as DataModels from "../../Contracts/DataModels";
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { HttpHeaders } from "../Constants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
+import { getSqlDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { getMongoDBDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { getCassandraKeyspaceThroughput } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { getGremlinDatabaseThroughput } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { readOffers } from "./readOffers";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+
+export const readDatabaseOffer = async (
+  params: DataModels.ReadDatabaseOfferParams
+): Promise<DataModels.OfferWithHeaders> => {
+  const clearMessage = logConsoleProgress(`Querying offer for database ${params.databaseId}`);
+  let offerId = params.offerId;
+  if (!offerId) {
+    if (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
+    ) {
+      try {
+        offerId = await getDatabaseOfferIdWithARM(params.databaseId);
+      } catch (error) {
+        clearMessage();
+        if (error.code !== "NotFound") {
+          throw new error();
+        }
+        return undefined;
+      }
+    } else {
+      offerId = await getDatabaseOfferIdWithSDK(params.databaseResourceId);
+      if (!offerId) {
+        clearMessage();
+        return undefined;
+      }
+    }
+  }
+
+  const options: RequestOptions = {
+    initialHeaders: {
+      [HttpHeaders.populateCollectionThroughputInfo]: true
+    }
+  };
+
+  try {
+    const response = await client()
+      .offer(offerId)
+      .read(options);
+    return (
+      response && {
+        ...response.resource,
+        headers: response.headers
+      }
+    );
+  } catch (error) {
+    logConsoleError(`Error while querying offer for database ${params.databaseId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadDatabaseOffer", error.code);
+    sendNotificationForError(error);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};
+
+const getDatabaseOfferIdWithARM = async (databaseId: string): Promise<string> => {
+  let rpResponse;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.defaultExperience;
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      rpResponse = await getSqlDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    case DefaultAccountExperienceType.MongoDB:
+      rpResponse = await getMongoDBDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    case DefaultAccountExperienceType.Cassandra:
+      rpResponse = await getCassandraKeyspaceThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    case DefaultAccountExperienceType.Graph:
+      rpResponse = await getGremlinDatabaseThroughput(subscriptionId, resourceGroup, accountName, databaseId);
+      break;
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+
+  return rpResponse?.name;
+};
+
+const getDatabaseOfferIdWithSDK = async (databaseResourceId: string): Promise<string> => {
+  const offers = await readOffers();
+  const offer = offers.find(offer => offer.resource === databaseResourceId);
+  return offer?.id;
+};

src/Common/dataAccess/readDatabases.test.ts

@@ -0,0 +1,41 @@
+jest.mock("../../Utils/arm/request");
+jest.mock("../CosmosClient");
+import { AuthType } from "../../AuthType";
+import { DatabaseAccount } from "../../Contracts/DataModels";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { armRequest } from "../../Utils/arm/request";
+import { client } from "../CosmosClient";
+import { readDatabases } from "./readDatabases";
+import { updateUserContext } from "../../UserContext";
+
+describe("readDatabases", () => {
+  beforeAll(() => {
+    updateUserContext({
+      databaseAccount: {
+        name: "test"
+      } as DatabaseAccount,
+      defaultExperience: DefaultAccountExperienceType.DocumentDB
+    });
+  });
+
+  it("should call ARM if logged in with AAD", async () => {
+    window.authType = AuthType.AAD;
+    await readDatabases();
+    expect(armRequest).toHaveBeenCalled();
+  });
+
+  it("should call SDK if not logged in with non-AAD method", async () => {
+    window.authType = AuthType.MasterKey;
+    (client as jest.Mock).mockReturnValue({
+      databases: {
+        readAll: () => {
+          return {
+            fetchAll: (): unknown => []
+          };
+        }
+      }
+    });
+    await readDatabases();
+    expect(client).toHaveBeenCalled();
+  });
+});

src/Common/dataAccess/readDatabases.ts

@@ -0,0 +1,67 @@
+import * as DataModels from "../../Contracts/DataModels";
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { client } from "../CosmosClient";
+import { listSqlDatabases } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { listGremlinDatabases } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+
+export async function readDatabases(): Promise<DataModels.Database[]> {
+  let databases: DataModels.Database[];
+  const clearMessage = logConsoleProgress(`Querying databases`);
+  try {
+    if (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Cassandra
+    ) {
+      databases = await readDatabasesWithARM();
+    } else {
+      const sdkResponse = await client()
+        .databases.readAll()
+        .fetchAll();
+      databases = sdkResponse.resources as DataModels.Database[];
+    }
+  } catch (error) {
+    logConsoleError(`Error while querying databases:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadDatabases", error.code);
+    sendNotificationForError(error);
+    throw error;
+  }
+  clearMessage();
+  return databases;
+}
+
+async function readDatabasesWithARM(): Promise<DataModels.Database[]> {
+  let rpResponse;
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.defaultExperience;
+
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      rpResponse = await listSqlDatabases(subscriptionId, resourceGroup, accountName);
+      break;
+    case DefaultAccountExperienceType.MongoDB:
+      rpResponse = await listMongoDBDatabases(subscriptionId, resourceGroup, accountName);
+      break;
+    case DefaultAccountExperienceType.Cassandra:
+      rpResponse = await listCassandraKeyspaces(subscriptionId, resourceGroup, accountName);
+      break;
+    case DefaultAccountExperienceType.Graph:
+      rpResponse = await listGremlinDatabases(subscriptionId, resourceGroup, accountName);
+      break;
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+
+  return rpResponse?.value?.map(database => database.properties?.resource as DataModels.Database);
+}

src/Common/dataAccess/readOffers.ts

@@ -0,0 +1,43 @@
+import { Offer } from "../../Contracts/DataModels";
+import { ClientDefaults } from "../Constants";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { Platform, configContext } from "../../ConfigContext";
+import { client } from "../CosmosClient";
+import { logConsoleProgress, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { sendCachedDataMessage } from "../MessageHandler";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+
+export const readOffers = async (): Promise<Offer[]> => {
+  const clearMessage = logConsoleProgress(`Querying offers`);
+  try {
+    if (configContext.platform === Platform.Portal) {
+      return sendCachedDataMessage<Offer[]>(MessageTypes.AllOffers, [
+        userContext.databaseAccount.id,
+        ClientDefaults.portalCacheTimeoutMs
+      ]);
+    }
+  } catch (error) {
+    // If error getting cached Offers, continue on and read via SDK
+  }
+
+  try {
+    const response = await client()
+      .offers.readAll()
+      .fetchAll();
+    return response?.resources;
+  } catch (error) {
+    // This should be removed when we can correctly identify if an account is serverless when connected using connection string too.
+    if (error.message.includes("Reading or replacing offers is not supported for serverless accounts")) {
+      return [];
+    }
+
+    logConsoleError(`Error while querying offers:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadOffers", error.code);
+    sendNotificationForError(error);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/readStoredProcedures.ts

@@ -0,0 +1,27 @@
+import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function readStoredProcedures(
+  databaseId: string,
+  collectionId: string
+): Promise<(StoredProcedureDefinition & Resource)[]> {
+  let sprocs: (StoredProcedureDefinition & Resource)[];
+  const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.storedProcedures.readAll()
+      .fetchAll();
+    sprocs = response.resources;
+  } catch (error) {
+    logConsoleError(`Failed to query stored procedures for container ${collectionId}: ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadStoredProcedures", error.code);
+    sendNotificationForError(error);
+  }
+  clearMessage();
+  return sprocs;
+}

src/Common/dataAccess/readTriggers.ts

@@ -0,0 +1,27 @@
+import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function readTriggers(
+  databaseId: string,
+  collectionId: string
+): Promise<(TriggerDefinition & Resource)[]> {
+  let triggers: (TriggerDefinition & Resource)[];
+  const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.triggers.readAll()
+      .fetchAll();
+    triggers = response.resources;
+  } catch (error) {
+    logConsoleError(`Failed to query triggers for container ${collectionId}: ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadTriggers", error.code);
+    sendNotificationForError(error);
+  }
+  clearMessage();
+  return triggers;
+}

src/Common/dataAccess/readUserDefinedFunctions.ts

@@ -0,0 +1,27 @@
+import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function readUserDefinedFunctions(
+  databaseId: string,
+  collectionId: string
+): Promise<(UserDefinedFunctionDefinition & Resource)[]> {
+  let udfs: (UserDefinedFunctionDefinition & Resource)[];
+  const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.userDefinedFunctions.readAll()
+      .fetchAll();
+    udfs = response.resources;
+  } catch (error) {
+    logConsoleError(`Failed to query user defined functions for container ${collectionId}: ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "ReadUserDefinedFunctions", error.code);
+    sendNotificationForError(error);
+  }
+  clearMessage();
+  return udfs;
+}

src/Common/dataAccess/updateCollection.ts

@@ -0,0 +1,225 @@
+import { AuthType } from "../../AuthType";
+import { Collection } from "../../Contracts/DataModels";
+import { ContainerDefinition } from "@azure/cosmos";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import {
+  ExtendedResourceProperties,
+  SqlContainerCreateUpdateParameters,
+  SqlContainerResource
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import {
+  createUpdateCassandraTable,
+  getCassandraTable
+} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import {
+  createUpdateGremlinGraph,
+  getGremlinGraph
+} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+
+export async function updateCollection(
+  databaseId: string,
+  collectionId: string,
+  newCollection: Collection,
+  options: RequestOptions = {}
+): Promise<Collection> {
+  let collection: Collection;
+  const clearMessage = logConsoleProgress(`Updating container ${collectionId}`);
+
+  try {
+    if (
+      window.authType === AuthType.AAD &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
+    ) {
+      collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
+    } else {
+      const sdkResponse = await client()
+        .database(databaseId)
+        .container(collectionId)
+        .replace(newCollection as ContainerDefinition, options);
+      collection = sdkResponse.resource as Collection;
+    }
+  } catch (error) {
+    logConsoleError(`Failed to update container ${collectionId}: ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "UpdateCollection", error.code);
+    sendNotificationForError(error);
+    throw error;
+  }
+  logConsoleInfo(`Successfully updated container ${collectionId}`);
+  clearMessage();
+  await refreshCachedResources();
+  return collection;
+}
+
+async function updateCollectionWithARM(
+  databaseId: string,
+  collectionId: string,
+  newCollection: Collection
+): Promise<Collection> {
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+  const defaultExperience = userContext.defaultExperience;
+
+  switch (defaultExperience) {
+    case DefaultAccountExperienceType.DocumentDB:
+      return updateSqlContainer(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
+    case DefaultAccountExperienceType.MongoDB:
+      return updateMongoDBCollection(
+        databaseId,
+        collectionId,
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        newCollection
+      );
+    case DefaultAccountExperienceType.Cassandra:
+      return updateCassandraTable(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
+    case DefaultAccountExperienceType.Graph:
+      return updateGremlinGraph(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
+    case DefaultAccountExperienceType.Table:
+      return updateTable(collectionId, subscriptionId, resourceGroup, accountName, newCollection);
+    default:
+      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+  }
+}
+
+async function updateSqlContainer(
+  databaseId: string,
+  collectionId: string,
+  subscriptionId: string,
+  resourceGroup: string,
+  accountName: string,
+  newCollection: Collection
+): Promise<Collection> {
+  const getResponse = await getSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+  if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
+    const updateResponse = await createUpdateSqlContainer(
+      subscriptionId,
+      resourceGroup,
+      accountName,
+      databaseId,
+      collectionId,
+      getResponse as SqlContainerCreateUpdateParameters
+    );
+    return updateResponse && (updateResponse.properties.resource as Collection);
+  }
+
+  throw new Error(`Sql container to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`);
+}
+
+async function updateMongoDBCollection(
+  databaseId: string,
+  collectionId: string,
+  subscriptionId: string,
+  resourceGroup: string,
+  accountName: string,
+  newCollection: Collection
+): Promise<Collection> {
+  const getResponse = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+  if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
+    const updateResponse = await createUpdateMongoDBCollection(
+      subscriptionId,
+      resourceGroup,
+      accountName,
+      databaseId,
+      collectionId,
+      getResponse as SqlContainerCreateUpdateParameters
+    );
+    return updateResponse && (updateResponse.properties.resource as Collection);
+  }
+
+  throw new Error(
+    `MongoDB collection to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`
+  );
+}
+
+async function updateCassandraTable(
+  databaseId: string,
+  collectionId: string,
+  subscriptionId: string,
+  resourceGroup: string,
+  accountName: string,
+  newCollection: Collection
+): Promise<Collection> {
+  const getResponse = await getCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+  if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
+    const updateResponse = await createUpdateCassandraTable(
+      subscriptionId,
+      resourceGroup,
+      accountName,
+      databaseId,
+      collectionId,
+      getResponse as SqlContainerCreateUpdateParameters
+    );
+    return updateResponse && (updateResponse.properties.resource as Collection);
+  }
+
+  throw new Error(
+    `Cassandra table to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`
+  );
+}
+
+async function updateGremlinGraph(
+  databaseId: string,
+  collectionId: string,
+  subscriptionId: string,
+  resourceGroup: string,
+  accountName: string,
+  newCollection: Collection
+): Promise<Collection> {
+  const getResponse = await getGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
+  if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
+    const updateResponse = await createUpdateGremlinGraph(
+      subscriptionId,
+      resourceGroup,
+      accountName,
+      databaseId,
+      collectionId,
+      getResponse as SqlContainerCreateUpdateParameters
+    );
+    return updateResponse && (updateResponse.properties.resource as Collection);
+  }
+
+  throw new Error(`Gremlin graph to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`);
+}
+
+async function updateTable(
+  collectionId: string,
+  subscriptionId: string,
+  resourceGroup: string,
+  accountName: string,
+  newCollection: Collection
+): Promise<Collection> {
+  const getResponse = await getTable(subscriptionId, resourceGroup, accountName, collectionId);
+  if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
+    const updateResponse = await createUpdateTable(
+      subscriptionId,
+      resourceGroup,
+      accountName,
+      collectionId,
+      getResponse as SqlContainerCreateUpdateParameters
+    );
+    return updateResponse && (updateResponse.properties.resource as Collection);
+  }
+
+  throw new Error(`Table to update does not exist. Table id: ${collectionId}`);
+}

src/Common/dataAccess/updateOfferThroughputBeyondLimit.test.ts

@@ -0,0 +1,26 @@
+import { updateOfferThroughputBeyondLimit } from "./updateOfferThroughputBeyondLimit";
+
+describe("updateOfferThroughputBeyondLimit", () => {
+  it("should call fetch", async () => {
+    window.fetch = jest.fn(() => {
+      return {
+        ok: true
+      };
+    });
+    window.dataExplorer = {
+      logConsoleData: jest.fn(),
+      deleteInProgressConsoleDataWithId: jest.fn(),
+      extensionEndpoint: jest.fn()
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+    await updateOfferThroughputBeyondLimit({
+      subscriptionId: "foo",
+      resourceGroup: "foo",
+      databaseAccountName: "foo",
+      databaseName: "foo",
+      throughput: 1000000000,
+      offerIsRUPerMinuteThroughputEnabled: false
+    });
+    expect(window.fetch).toHaveBeenCalled();
+  });
+});

src/Common/dataAccess/updateOfferThroughputBeyondLimit.ts

@@ -0,0 +1,52 @@
+import { Platform, configContext } from "../../ConfigContext";
+import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
+import { AutoPilotOfferSettings } from "../../Contracts/DataModels";
+import { logConsoleProgress, logConsoleInfo, logConsoleError } from "../../Utils/NotificationConsoleUtils";
+import { HttpHeaders } from "../Constants";
+
+interface UpdateOfferThroughputRequest {
+  subscriptionId: string;
+  resourceGroup: string;
+  databaseAccountName: string;
+  databaseName: string;
+  collectionName?: string;
+  throughput: number;
+  offerIsRUPerMinuteThroughputEnabled: boolean;
+  offerAutopilotSettings?: AutoPilotOfferSettings;
+}
+
+export async function updateOfferThroughputBeyondLimit(request: UpdateOfferThroughputRequest): Promise<void> {
+  if (configContext.platform !== Platform.Portal) {
+    throw new Error("Updating throughput beyond specified limit is not supported on this platform");
+  }
+
+  const resourceDescriptionInfo = request.collectionName
+    ? `database ${request.databaseName} and container ${request.collectionName}`
+    : `database ${request.databaseName}`;
+
+  const clearMessage = logConsoleProgress(
+    `Requesting increase in throughput to ${request.throughput} for ${resourceDescriptionInfo}`
+  );
+
+  const explorer = window.dataExplorer;
+  const url = `${explorer.extensionEndpoint()}/api/offerthroughputrequest/updatebeyondspecifiedlimit`;
+  const authorizationHeader = getAuthorizationHeader();
+
+  const response = await fetch(url, {
+    method: "POST",
+    body: JSON.stringify(request),
+    headers: { [authorizationHeader.header]: authorizationHeader.token, [HttpHeaders.contentType]: "application/json" }
+  });
+
+  if (response.ok) {
+    logConsoleInfo(
+      `Successfully requested an increase in throughput to ${request.throughput} for ${resourceDescriptionInfo}`
+    );
+    clearMessage();
+    return undefined;
+  }
+  const error = await response.json();
+  logConsoleError(`Failed to request an increase in throughput for ${request.throughput}: ${error.message}`);
+  clearMessage();
+  throw new Error(error.message);
+}

src/Common/dataAccess/updateStoredProcedure.ts

@@ -0,0 +1,29 @@
+import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function updateStoredProcedure(
+  databaseId: string,
+  collectionId: string,
+  storedProcedure: StoredProcedureDefinition
+): Promise<StoredProcedureDefinition & Resource> {
+  let updatedStoredProcedure: StoredProcedureDefinition & Resource;
+  const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.storedProcedure(storedProcedure.id)
+      .replace(storedProcedure);
+    updatedStoredProcedure = response.resource;
+  } catch (error) {
+    logConsoleError(`Error while updating stored procedure ${storedProcedure.id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "UpdateStoredProcedure", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return updatedStoredProcedure;
+}

src/Common/dataAccess/updateTrigger.ts

@@ -0,0 +1,29 @@
+import { TriggerDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function updateTrigger(
+  databaseId: string,
+  collectionId: string,
+  trigger: TriggerDefinition
+): Promise<TriggerDefinition> {
+  let updatedTrigger: TriggerDefinition;
+  const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.trigger(trigger.id)
+      .replace(trigger);
+    updatedTrigger = response.resource;
+  } catch (error) {
+    logConsoleError(`Error while updating trigger ${trigger.id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "UpdateTrigger", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return updatedTrigger;
+}

src/Common/dataAccess/updateUserDefinedFunction.ts

@@ -0,0 +1,29 @@
+import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
+import { logConsoleError, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { logError } from "../Logger";
+import { sendNotificationForError } from "./sendNotificationForError";
+
+export async function updateUserDefinedFunction(
+  databaseId: string,
+  collectionId: string,
+  userDefinedFunction: UserDefinedFunctionDefinition
+): Promise<UserDefinedFunctionDefinition & Resource> {
+  let updatedUserDefinedFunction: UserDefinedFunctionDefinition & Resource;
+  const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
+  try {
+    const response = await client()
+      .database(databaseId)
+      .container(collectionId)
+      .scripts.userDefinedFunction(userDefinedFunction.id)
+      .replace(userDefinedFunction);
+    updatedUserDefinedFunction = response.resource;
+  } catch (error) {
+    logConsoleError(`Error while updating user defined function ${userDefinedFunction.id}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "UpdateUserupdateUserDefinedFunction", error.code);
+    sendNotificationForError(error);
+  }
+
+  clearMessage();
+  return updatedUserDefinedFunction;
+}

src/ConfigContext.ts

@@ -4,9 +4,9 @@ export enum Platform {
   Emulator = "Emulator"
 }
 
-interface Config {
+interface ConfigContext {
   platform: Platform;
-  allowedParentFrameOrigins: RegExp;
+  allowedParentFrameOrigins: string[];
   gitSha?: string;
   proxyPath?: string;
   AAD_ENDPOINT: string;
@@ -28,9 +28,15 @@ interface Config {
 }
 
 // Default configuration
-let config: Config = {
+let configContext: Readonly<ConfigContext> = {
   platform: Platform.Portal,
-  allowedParentFrameOrigins: /^https:\/\/portal\.azure\.com$|^https:\/\/portal\.azure\.us$|^https:\/\/portal\.azure\.cn$|^https:\/\/portal\.microsoftazure\.de$|^https:\/\/.+\.portal\.azure\.com$|^https:\/\/.+\.portal\.azure\.us$|^https:\/\/.+\.portal\.azure\.cn$|^https:\/\/.+\.portal\.microsoftazure\.de$|^https:\/\/main\.documentdb\.ext\.azure\.com$|^https:\/\/main\.documentdb\.ext\.microsoftazure\.de$|^https:\/\/main\.documentdb\.ext\.azure\.cn$|^https:\/\/main\.documentdb\.ext\.azure\.us$/,
+  allowedParentFrameOrigins: [
+    `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
+    `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
+    `^https:\\/\\/[\\.\\w]*ext\\.azure\\.(com|cn|us)$`,
+    `^https:\\/\\/[\\.\\w]*\\.ext\\.microsoftazure\\.de$`,
+    `^https://cosmos-db-dataexplorer-germanycentral.azurewebsites.de$`
+  ],
   // Webpack injects this at build time
   gitSha: process.env.GIT_SHA,
   hostedExplorerURL: "https://cosmos.azure.com/",
@@ -46,36 +52,63 @@ let config: Config = {
   JUNO_ENDPOINT: "https://tools.cosmos.azure.com"
 };
 
+export function resetConfigContext(): void {
+  if (process.env.NODE_ENV !== "test") {
+    throw new Error("resetConfigContext can only becalled in a test environment");
+  }
+  configContext = {} as ConfigContext;
+}
+
+export function updateConfigContext(newContext: Partial<ConfigContext>): void {
+  Object.assign(configContext, newContext);
+}
+
 // Injected for local develpment. These will be removed in the production bundle by webpack
 if (process.env.NODE_ENV === "development") {
   const port: string = process.env.PORT || "1234";
-  config.BACKEND_ENDPOINT = "https://localhost:" + port;
-  config.MONGO_BACKEND_ENDPOINT = "https://localhost:" + port;
-  config.PROXY_PATH = "/proxy";
-  config.EMULATOR_ENDPOINT = "https://localhost:8081";
+  updateConfigContext({
+    BACKEND_ENDPOINT: "https://localhost:" + port,
+    MONGO_BACKEND_ENDPOINT: "https://localhost:" + port,
+    PROXY_PATH: "/proxy",
+    EMULATOR_ENDPOINT: "https://localhost:8081"
+  });
 }
 
-export async function initializeConfiguration(): Promise<Config> {
+export async function initializeConfiguration(): Promise<ConfigContext> {
   try {
     const response = await fetch("./config.json");
     if (response.status === 200) {
       try {
-        const externalConfig = await response.json();
-        config = Object.assign({}, config, externalConfig);
+        const { allowedParentFrameOrigins, ...externalConfig } = await response.json();
+        Object.assign(configContext, externalConfig);
+        if (allowedParentFrameOrigins && allowedParentFrameOrigins.length > 0) {
+          updateConfigContext({
+            allowedParentFrameOrigins: [...configContext.allowedParentFrameOrigins, ...allowedParentFrameOrigins]
+          });
+        }
       } catch (error) {
         console.error("Unable to parse json in config file");
         console.error(error);
       }
     }
-    // Allow override of any config value with URL query parameters
+    // Allow override of platform value with URL query parameter
     const params = new URLSearchParams(window.location.search);
-    params.forEach((value, key) => {
-      (config as any)[key] = value;
-    });
+    if (params.has("platform")) {
+      const platform = params.get("platform");
+      switch (platform) {
+        default:
+          console.log("Invalid platform query parameter given, ignoring");
+          break;
+        case Platform.Portal:
+        case Platform.Hosted:
+        case Platform.Emulator:
+          updateConfigContext({ platform });
+      }
+    }
   } catch (error) {
     console.log("No configuration file found using defaults");
   }
-  return config;
+  return configContext;
 }
 
-export { config };
+export { configContext };

src/Contracts/DataModels.ts

@@ -88,10 +88,6 @@ export interface Resource {
   id: string;
 }
 
-export interface ResourceRequest {
-  id: string;
-}
-
 export interface Collection extends Resource {
   defaultTtl?: number;
   indexingPolicy?: IndexingPolicy;
@@ -104,39 +100,12 @@ export interface Collection extends Resource {
   geospatialConfig?: GeospatialConfig;
 }
 
-export interface CreateCollectionWithRpResponse extends Resource {
-  properties: Collection;
-  name: string;
-  type: string;
-}
-
-export interface CollectionRequest extends ResourceRequest {
-  defaultTtl?: number;
-  indexingPolicy?: IndexingPolicy;
-  partitionKey?: PartitionKey;
-  uniqueKeyPolicy?: UniqueKeyPolicy;
-  conflictResolutionPolicy?: ConflictResolutionPolicy;
-}
-
 export interface Database extends Resource {
   collections?: Collection[];
 }
 
 export interface DocumentId extends Resource {}
 
-export interface Script extends Resource {
-  body: string;
-}
-
-export interface StoredProcedure extends Script {}
-
-export interface UserDefinedFunction extends Script {}
-
-export interface Trigger extends Script {
-  triggerType: string;
-  triggerOperation: string;
-}
-
 export interface ConflictId extends Resource {
   resourceId?: string;
   resourceType?: string;
@@ -153,7 +122,14 @@ export interface KeyResource {
   Token: string;
 }
 
-export interface IndexingPolicy {}
+export interface IndexingPolicy {
+  automatic: boolean;
+  indexingMode: string;
+  includedPaths: any;
+  excludedPaths: any;
+  compositeIndexes?: any;
+  spatialIndexes?: any;
+}
 
 export interface PartitionKey {
   paths: string[];
@@ -252,28 +228,6 @@ export interface ErrorDataModel {
   code?: string;
 }
 
-/**
- * Defines a property bag for telemetry e.g. see ITelemetryError.
- */
-export interface ITelemetryProperties {
-  [propertyName: string]: string;
-}
-
-/**
- * Defines a property bag for telemetry e.g. see ITelemetryError.
- */
-export interface ITelemetryEvent {
-  name: string;
-  properties?: ITelemetryProperties;
-}
-
-/**
- * Defines an error to be logged as telemetry data.
- */
-export interface ITelemetryError extends ITelemetryEvent {
-  error: any;
-}
-
 export interface CreateDatabaseAndCollectionRequest {
   databaseId: string;
   collectionId: string;
@@ -300,11 +254,6 @@ export enum AutopilotTier {
   Tier4 = 4
 }
 
-export interface RpOptions {
-  // tier is sent as string, autoscale as object (AutoPilotCreationSettings)
-  [key: string]: string | AutoPilotCreationSettings;
-}
-
 export interface Query {
   id: string;
   resourceId: string;
@@ -312,17 +261,6 @@ export interface Query {
   query: string;
 }
 
-export interface UpdateOfferThroughputRequest {
-  subscriptionId: string;
-  resourceGroup: string;
-  databaseAccountName: string;
-  databaseName: string;
-  collectionName: string;
-  throughput: number;
-  offerIsRUPerMinuteThroughputEnabled: boolean;
-  offerAutopilotSettings?: AutoPilotOfferSettings;
-}
-
 export interface AutoPilotOfferSettings {
   tier?: AutopilotTier;
   maximumTierThroughput?: number;
@@ -331,18 +269,38 @@ export interface AutoPilotOfferSettings {
   targetMaxThroughput?: number;
 }
 
-export interface CreateDatabaseRequest {
+export interface CreateDatabaseParams {
+  autoPilotMaxThroughput?: number;
   databaseId: string;
   databaseLevelThroughput?: boolean;
   offerThroughput?: number;
-  autoPilot?: AutoPilotCreationSettings;
-  hasAutoPilotV2FeatureFlag?: boolean;
 }
 
-export interface SharedThroughputRange {
-  minimumRU: number;
-  maximumRU: number;
-  defaultRU: number;
+export interface CreateCollectionParams {
+  createNewDatabase: boolean;
+  collectionId: string;
+  databaseId: string;
+  databaseLevelThroughput: boolean;
+  offerThroughput: number;
+  analyticalStorageTtl?: number;
+  autoPilotMaxThroughput?: number;
+  indexingPolicy?: IndexingPolicy;
+  partitionKey?: PartitionKey;
+  uniqueKeyPolicy?: UniqueKeyPolicy;
+  createMongoWildcardIndex?: boolean;
+}
+
+export interface ReadDatabaseOfferParams {
+  databaseId: string;
+  databaseResourceId?: string;
+  offerId?: string;
+}
+
+export interface ReadCollectionOfferParams {
+  collectionId: string;
+  databaseId: string;
+  collectionResourceId?: string;
+  offerId?: string;
 }
 
 export interface Notification {
@@ -487,25 +445,6 @@ export interface NotebookConfigurationEndpointInfo {
   token: string;
 }
 
-export interface SparkCluster {
-  id: string;
-  name: string;
-  type: string;
-  properties: {
-    kind: string;
-    driverSize: string;
-    workerSize: string;
-    workerInstanceCount: number;
-    creationTime: string;
-    status: string;
-    libraries?: SparkClusterLibrary[];
-  };
-}
-
-export interface SparkClusterFeedResponse {
-  value: SparkCluster[];
-}
-
 export interface SparkClusterConnectionInfo {
   userName: string;
   password: string;
@@ -547,79 +486,10 @@ export interface MongoParameters extends RpParameters {
   analyticalStorageTtl?: number;
 }
 
-export interface GraphParameters extends RpParameters {
-  pk: string;
-  coll: string;
-  cd: Boolean;
-  indexingPolicy?: IndexingPolicy;
-}
-
-export interface CreationRequest {
-  properties: {
-    resource: {
-      id: string;
-    };
-    options: RpOptions;
-  };
-}
-
-export interface SqlCollectionParameters extends RpParameters {
-  uniqueKeyPolicy?: UniqueKeyPolicy;
-  pk: string;
-  coll: string;
-  cd: Boolean;
-  analyticalStorageTtl?: number;
-  indexingPolicy?: IndexingPolicy;
-}
-
-export interface MongoCreationRequest extends CreationRequest {
-  properties: {
-    resource: {
-      id: string;
-      analyticalStorageTtl?: number;
-      shardKey?: {};
-    };
-    options: RpOptions;
-  };
-}
-
-export interface GraphCreationRequest extends CreationRequest {
-  properties: {
-    resource: {
-      id: string;
-      partitionKey: {};
-      indexingPolicy?: IndexingPolicy;
-    };
-    options: RpOptions;
-  };
-}
-
-export interface CreateDatabaseWithRpResponse {
-  id: string;
-  name: string;
-  type: string;
-  properties: {
-    id: string;
-  };
-}
-
 export interface SparkClusterLibrary {
   name: string;
 }
 
-export interface SqlCollectionCreationRequest extends CreationRequest {
-  properties: {
-    resource: {
-      uniqueKeyPolicy?: UniqueKeyPolicy;
-      id: string;
-      partitionKey: {};
-      analyticalStorageTtl?: number;
-      indexingPolicy?: IndexingPolicy;
-    };
-    options: RpOptions;
-  };
-}
-
 export interface Library extends SparkClusterLibrary {
   properties: {
     kind: "Jar";

src/Contracts/ViewModels.ts

@@ -1,16 +1,22 @@
-import * as DataModels from "./DataModels";
+import {
+  QueryMetrics,
+  Resource,
+  StoredProcedureDefinition,
+  TriggerDefinition,
+  UserDefinedFunctionDefinition
+} from "@azure/cosmos";
 import Q from "q";
-import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
-import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { QueryMetrics } from "@azure/cosmos";
-import { UploadDetails } from "../workers/upload/definitions";
 import Explorer from "../Explorer/Explorer";
-import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
+import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
+import ConflictId from "../Explorer/Tree/ConflictId";
+import DocumentId from "../Explorer/Tree/DocumentId";
 import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
-import DocumentId from "../Explorer/Tree/DocumentId";
-import ConflictId from "../Explorer/Tree/ConflictId";
+import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
+import { UploadDetails } from "../workers/upload/definitions";
+import * as DataModels from "./DataModels";
 
 export interface TokenProvider {
   getAuthHeader(): Promise<Headers>;
@@ -75,15 +81,15 @@ export interface Database extends TreeNode {
   selectedSubnodeKind: ko.Observable<CollectionTabKind>;
 
   selectDatabase(): void;
-  expandDatabase(): void;
+  expandDatabase(): Promise<void>;
   collapseDatabase(): void;
 
-  loadCollections(): Q.Promise<void>;
+  loadCollections(): Promise<void>;
   findCollectionWithId(collectionRid: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
   onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
-  readSettings(): void;
   onSettingsClick: () => void;
+  loadOffer(): Promise<void>;
 }
 
 export interface CollectionBase extends TreeNode {
@@ -127,8 +133,7 @@ export interface Collection extends CollectionBase {
   onMongoDBDocumentsClick(): void;
   openTab(): void;
 
-  onSettingsClick: () => void;
-  readSettings(): Q.Promise<void>;
+  onSettingsClick: () => Promise<void>;
   onDeleteCollectionContextMenuClick(source: Collection, event: MouseEvent): void;
 
   onNewGraphClick(): void;
@@ -153,13 +158,14 @@ export interface Collection extends CollectionBase {
   collapseUserDefinedFunctions(): void;
   collapseTriggers(): void;
 
-  loadUserDefinedFunctions(): Q.Promise<any>;
-  loadStoredProcedures(): Q.Promise<any>;
-  loadTriggers(): Q.Promise<any>;
+  loadUserDefinedFunctions(): Promise<any>;
+  loadStoredProcedures(): Promise<any>;
+  loadTriggers(): Promise<any>;
+  loadOffer(): Promise<void>;
 
-  createStoredProcedureNode(data: DataModels.StoredProcedure): StoredProcedure;
-  createUserDefinedFunctionNode(data: DataModels.UserDefinedFunction): UserDefinedFunction;
-  createTriggerNode(data: DataModels.Trigger): Trigger;
+  createStoredProcedureNode(data: StoredProcedureDefinition & Resource): StoredProcedure;
+  createUserDefinedFunctionNode(data: UserDefinedFunctionDefinition & Resource): UserDefinedFunction;
+  createTriggerNode(data: TriggerDefinition & Resource): Trigger;
   findStoredProcedureWithId(sprocRid: string): StoredProcedure;
   findTriggerWithId(triggerRid: string): Trigger;
   findUserDefinedFunctionWithId(udfRid: string): UserDefinedFunction;
@@ -303,10 +309,6 @@ export interface ScriptTabOption extends TabOptions {
   partitionKey?: DataModels.PartitionKey;
 }
 
-export interface WaitsForTemplate {
-  isTemplateReady: ko.Observable<boolean>;
-}
-
 export interface EditorPosition {
   line: number;
   column: number;
@@ -353,7 +355,8 @@ export enum CollectionTabKind {
   NotebookV2 = 15,
   SparkMasterTab = 16,
   Gallery = 17,
-  NotebookViewer = 18
+  NotebookViewer = 18,
+  SettingsV2 = 19
 }
 
 export enum TerminalKind {

src/DefaultAccountExperienceType.ts

@@ -0,0 +1,8 @@
+export enum DefaultAccountExperienceType {
+  DocumentDB = "DocumentDB",
+  Graph = "Graph",
+  MongoDB = "MongoDB",
+  Table = "Table",
+  Cassandra = "Cassandra",
+  ApiForMongoDB = "Azure Cosmos DB for MongoDB API"
+}

src/Explorer/ComponentRegisterer.test.ts

@@ -48,6 +48,10 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("settings-tab")).toBe(true);
   });
 
+  it("should register settings-tab-v2 component", () => {
+    expect(ko.components.isRegistered("settings-tab-v2")).toBe(true);
+  });
+
   it("should register query-tab component", () => {
     expect(ko.components.isRegistered("query-tab")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -34,6 +34,7 @@ ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedure
 ko.components.register("trigger-tab", new TabComponents.TriggerTab());
 ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
 ko.components.register("settings-tab", new TabComponents.SettingsTab());
+ko.components.register("settings-tab-v2", new TabComponents.SettingsTabV2());
 ko.components.register("query-tab", new TabComponents.QueryTab());
 ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
 ko.components.register("graph-tab", new TabComponents.GraphTab());
@@ -77,3 +78,4 @@ ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComp
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
 ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());
+ko.components.register("support-pane", new PaneComponents.SupportPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -16,6 +16,8 @@ import Explorer from "./Explorer";
 import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
+import { userContext } from "../UserContext";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -29,22 +31,24 @@ export interface DatabaseContextMenuButtonParams {
  * New resource tree (in ReactJS)
  */
 export class ResourceTreeContextMenuButtonFactory {
-  public static createDatabaseContextMenu(
-    container: Explorer,
-    selectedDatabase: ViewModels.Database
-  ): TreeNodeMenuItem[] {
-    const newCollectionMenuItem: TreeNodeMenuItem = {
-      iconSrc: AddCollectionIcon,
-      onClick: () => container.onNewCollectionClicked(),
-      label: container.addCollectionText()
-    };
+  public static createDatabaseContextMenu(container: Explorer): TreeNodeMenuItem[] {
+    const items: TreeNodeMenuItem[] = [
+      {
+        iconSrc: AddCollectionIcon,
+        onClick: () => container.onNewCollectionClicked(),
+        label: container.addCollectionText()
+      }
+    ];
 
-    const deleteDatabaseMenuItem = {
-      iconSrc: DeleteDatabaseIcon,
-      onClick: () => container.deleteDatabaseConfirmationPane.open(),
-      label: container.deleteDatabaseText()
-    };
-    return [newCollectionMenuItem, deleteDatabaseMenuItem];
+    if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
+      items.push({
+        iconSrc: DeleteDatabaseIcon,
+        onClick: () => container.deleteDatabaseConfirmationPane.open(),
+        label: container.deleteDatabaseText(),
+        styleClass: "deleteDatabaseMenuItem"
+      });
+    }
+    return items;
   }
 
   public static createCollectionContextMenuButton(
@@ -112,7 +116,8 @@ export class ResourceTreeContextMenuButtonFactory {
         const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
         selectedCollection && selectedCollection.onDeleteCollectionContextMenuClick(selectedCollection, null);
       },
-      label: container.deleteCollectionText()
+      label: container.deleteCollectionText(),
+      styleClass: "deleteCollectionMenuItem"
     });
 
     return items;

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,6 +1,6 @@
 import { StringUtils } from "../../../Utils/StringUtils";
 import { KeyCodes } from "../../../Common/Constants";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
 

src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap

@@ -265,6 +265,9 @@ exports[`test render renders with filters 1`] = `
             "buttonTextDisabled": "#a19f9d",
             "buttonTextHovered": "#201f1e",
             "buttonTextPressed": "#201f1e",
+            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+            "cardStandoutBackground": "#ffffff",
             "defaultStateBackground": "#faf9f8",
             "disabledBackground": "#f3f2f1",
             "disabledBodySubtext": "#c8c6c4",
@@ -604,6 +607,9 @@ exports[`test render renders with filters 1`] = `
                             "buttonTextDisabled": "#a19f9d",
                             "buttonTextHovered": "#201f1e",
                             "buttonTextPressed": "#201f1e",
+                            "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                            "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                            "cardStandoutBackground": "#ffffff",
                             "defaultStateBackground": "#faf9f8",
                             "disabledBackground": "#f3f2f1",
                             "disabledBodySubtext": "#c8c6c4",
@@ -997,6 +1003,9 @@ exports[`test render renders with filters 1`] = `
                               "buttonTextDisabled": "#a19f9d",
                               "buttonTextHovered": "#201f1e",
                               "buttonTextPressed": "#201f1e",
+                              "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                              "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                              "cardStandoutBackground": "#ffffff",
                               "defaultStateBackground": "#faf9f8",
                               "disabledBackground": "#f3f2f1",
                               "disabledBodySubtext": "#c8c6c4",
@@ -1113,6 +1122,11 @@ exports[`test render renders with filters 1`] = `
                               },
                               "iconDisabled": Object {
                                 "color": "#a19f9d",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
+                                    "color": "GrayText",
+                                  },
+                                },
                               },
                               "label": Array [
                                 Object {
@@ -1134,6 +1148,11 @@ exports[`test render renders with filters 1`] = `
                               },
                               "menuIconDisabled": Object {
                                 "color": "#a19f9d",
+                                "selectors": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
+                                    "color": "GrayText",
+                                  },
+                                },
                               },
                               "root": Array [
                                 Object {
@@ -1150,7 +1169,6 @@ exports[`test render renders with filters 1`] = `
                                       "right": 2,
                                       "selectors": Object {
                                         "@media screen and (-ms-high-contrast: active)": Object {
-                                          "border": "none",
                                           "bottom": -2,
                                           "left": -2,
                                           "outlineColor": "ButtonText",
@@ -1230,7 +1248,6 @@ exports[`test render renders with filters 1`] = `
                                       "right": 2,
                                       "selectors": Object {
                                         "@media screen and (-ms-high-contrast: active)": Object {
-                                          "border": "none",
                                           "bottom": -2,
                                           "left": -2,
                                           "outlineColor": "ButtonText",
@@ -1259,10 +1276,6 @@ exports[`test render renders with filters 1`] = `
                                     ":hover": Object {
                                       "outline": 0,
                                     },
-                                    "@media screen and (-ms-high-contrast: active)": Object {
-                                      "borderColor": "grayText",
-                                      "color": "grayText",
-                                    },
                                   },
                                 },
                                 Object {
@@ -1362,13 +1375,21 @@ exports[`test render renders with filters 1`] = `
                                       "selectors": Object {
                                         "@media screen and (-ms-high-contrast: active)": Object {
                                           "MsHighContrastAdjust": "none",
-                                          "backgroundColor": "WindowText",
-                                          "color": "Window",
+                                          "backgroundColor": "Window",
+                                          "border": "1px solid WindowText",
+                                          "borderRightWidth": "0",
+                                          "color": "WindowText",
                                         },
                                       },
                                     },
                                     ".ms-Button--primary + .ms-Button": Object {
                                       "border": "none",
+                                      "selectors": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                          "border": "1px solid WindowText",
+                                          "borderLeftWidth": "0",
+                                        },
+                                      },
                                     },
                                   },
                                 },
@@ -1408,6 +1429,9 @@ exports[`test render renders with filters 1`] = `
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
                                   },
+                                  "@media screen and (forced-colors: active)": Object {
+                                    "forcedColorAdjust": "none",
+                                  },
                                 },
                               },
                               "splitButtonContainerFocused": Object {
@@ -1554,6 +1578,13 @@ exports[`test render renders with filters 1`] = `
                                         },
                                       },
                                     },
+                                    ".ms-Button-menuIcon": Object {
+                                      "selectors": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
+                                          "color": "GrayText",
+                                        },
+                                      },
+                                    },
                                     ":hover": Object {
                                       "cursor": "default",
                                     },
@@ -1775,6 +1806,9 @@ exports[`test render renders with filters 1`] = `
                                 "buttonTextDisabled": "#a19f9d",
                                 "buttonTextHovered": "#201f1e",
                                 "buttonTextPressed": "#201f1e",
+                                "cardShadow": "0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)",
+                                "cardShadowHovered": "0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)",
+                                "cardStandoutBackground": "#ffffff",
                                 "defaultStateBackground": "#faf9f8",
                                 "disabledBackground": "#f3f2f1",
                                 "disabledBodySubtext": "#c8c6c4",

src/Explorer/Controls/DynamicList/DynamicListComponent.ts

@@ -86,6 +86,7 @@ export class DynamicListViewModel extends WaitsForTemplateViewModel {
   public onRemoveItemKeyPress = (data: any, event: KeyboardEvent, source: any): boolean => {
     if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
       this.removeItem(data, event);
+      (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
       event.stopPropagation();
       return false;
     }
@@ -94,7 +95,7 @@ export class DynamicListViewModel extends WaitsForTemplateViewModel {
 
   public addItem(): void {
     this.listItems.push({ value: ko.observable("") });
-    document.getElementById("uniqueKeyItems").focus();
+    (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
   }
 
   public onAddItemKeyPress = (source: any, event: KeyboardEvent): boolean => {

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -49,6 +49,13 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
     { 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",
+      value: "true"
+    },
+    { key: "feature.enablesettingsv2", label: "Enable SettingsV2 Tab", value: "true" },
     { key: "feature.canexceedmaximumvalue", label: "Can exceed max value", value: "true" },
     {
       key: "feature.enablefixedcollectionwithsharedthroughput",

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

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

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -6,7 +6,7 @@ import { RepoListItem } from "./GitHubReposComponent";
 import { ChildrenMargin } from "./GitHubStyleConstants";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import { IGitHubRepo } from "../../../GitHub/GitHubClient";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import UrlUtility from "../../../Common/UrlUtility";
 import Explorer from "../../Explorer";
 

src/Explorer/Controls/GitHub/GitHubReposComponent.tsx

@@ -66,7 +66,9 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr
 
     return (
       <>
-        <div className={"firstdivbg headerline"}>{header}</div>
+        <div className={"firstdivbg headerline"} role="heading" aria-level={2}>
+          {header}
+        </div>
         <div className={"paneMainContent"}>{content}</div>
         {!this.props.showAuthorizeAccess && (
           <>

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -8,6 +8,8 @@ import * as Logger from "../../../Common/Logger";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { StringUtils } from "../../../Utils/StringUtils";
+import { userContext } from "../../../UserContext";
+import { TerminalQueryParams } from "../../../Common/Constants";
 
 export interface NotebookTerminalComponentProps {
   notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
@@ -32,11 +34,11 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
 
   public getTerminalParams(): Map<string, string> {
     let params: Map<string, string> = new Map<string, string>();
-    params.set("terminal", "true");
+    params.set(TerminalQueryParams.Terminal, "true");
 
     const terminalEndpoint: string = this.tryGetTerminalEndpoint();
     if (terminalEndpoint) {
-      params.set("terminalEndpoint", terminalEndpoint);
+      params.set(TerminalQueryParams.TerminalEndpoint, terminalEndpoint);
     }
 
     return params;
@@ -75,11 +77,13 @@ export class NotebookTerminalComponent extends React.Component<NotebookTerminalC
       return "";
     }
 
-    params.set("server", serverInfo.notebookServerEndpoint);
+    params.set(TerminalQueryParams.Server, serverInfo.notebookServerEndpoint);
     if (serverInfo.authToken && serverInfo.authToken.length > 0) {
-      params.set("token", serverInfo.authToken);
+      params.set(TerminalQueryParams.Token, serverInfo.authToken);
     }
 
+    params.set(TerminalQueryParams.SubscriptionId, userContext.subscriptionId);
+
     let result: string = "terminal.html?";
     for (let key of params.keys()) {
       result += `${key}=${encodeURIComponent(params.get(key))}&`;

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.test.tsx

@@ -17,7 +17,8 @@ describe("GalleryCardComponent", () => {
         isSample: false,
         downloads: 0,
         favorites: 0,
-        views: 0
+        views: 0,
+        newCellId: undefined
       },
       isFavorite: false,
       showDownload: true,

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.test.tsx

@@ -0,0 +1,43 @@
+import { shallow } from "enzyme";
+import * as sinon from "sinon";
+import React from "react";
+import { CodeOfConductComponent, CodeOfConductComponentProps } from "./CodeOfConductComponent";
+import { IJunoResponse, JunoClient } from "../../../Juno/JunoClient";
+import { HttpStatusCodes } from "../../../Common/Constants";
+
+describe("CodeOfConductComponent", () => {
+  let sandbox: sinon.SinonSandbox;
+  let codeOfConductProps: CodeOfConductComponentProps;
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+    sandbox.stub(JunoClient.prototype, "acceptCodeOfConduct").returns({
+      status: HttpStatusCodes.OK,
+      data: true
+    } as IJunoResponse<boolean>);
+    const junoClient = new JunoClient(undefined);
+    codeOfConductProps = {
+      junoClient: junoClient,
+      onAcceptCodeOfConduct: jest.fn()
+    };
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  it("renders", () => {
+    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("onAcceptedCodeOfConductCalled", async () => {
+    const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
+    wrapper
+      .find(".genericPaneSubmitBtn")
+      .first()
+      .simulate("click");
+    await Promise.resolve();
+    expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled();
+  });
+});

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { JunoClient } from "../../../Juno/JunoClient";
+import { HttpStatusCodes, CodeOfConductEndpoints } from "../../../Common/Constants";
+import * as Logger from "../../../Common/Logger";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
+import { Stack, Text, Checkbox, PrimaryButton, Link } from "office-ui-fabric-react";
+
+export interface CodeOfConductComponentProps {
+  junoClient: JunoClient;
+  onAcceptCodeOfConduct: (result: boolean) => void;
+}
+
+interface CodeOfConductComponentState {
+  readCodeOfConduct: boolean;
+}
+
+export class CodeOfConductComponent extends React.Component<CodeOfConductComponentProps, CodeOfConductComponentState> {
+  private descriptionPara1: string;
+  private descriptionPara2: string;
+  private descriptionPara3: string;
+  private link1: { label: string; url: string };
+  private link2: { label: string; url: string };
+
+  constructor(props: CodeOfConductComponentProps) {
+    super(props);
+
+    this.state = {
+      readCodeOfConduct: false
+    };
+
+    this.descriptionPara1 = "Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement";
+    this.descriptionPara2 =
+      "Azure Cosmos DB Notebook Public Gallery contains notebook samples shared by users of Cosmos DB.";
+    this.descriptionPara3 = "In order to access Azure Cosmos DB Notebook Gallery resources, you must accept the ";
+    this.link1 = { label: "code of conduct", url: CodeOfConductEndpoints.codeOfConduct };
+    this.link2 = { label: "privacy statement", url: CodeOfConductEndpoints.privacyStatement };
+  }
+
+  private async acceptCodeOfConduct(): Promise<void> {
+    try {
+      const response = await this.props.junoClient.acceptCodeOfConduct();
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
+      }
+
+      this.props.onAcceptCodeOfConduct(response.data);
+    } catch (error) {
+      const message = `Failed to accept code of conduct: ${error}`;
+      Logger.logError(message, "CodeOfConductComponent/acceptCodeOfConduct");
+      logConsoleError(message);
+    }
+  }
+
+  private onChangeCheckbox = (): void => {
+    this.setState({ readCodeOfConduct: !this.state.readCodeOfConduct });
+  };
+
+  public render(): JSX.Element {
+    return (
+      <Stack tokens={{ childrenGap: 20 }}>
+        <Stack.Item>
+          <Text style={{ fontWeight: 500, fontSize: "20px" }}>{this.descriptionPara1}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>{this.descriptionPara2}</Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Text>
+            {this.descriptionPara3}
+            <Link href={this.link1.url} target="_blank">
+              {this.link1.label}
+            </Link>
+            {" and "}
+            <Link href={this.link2.url} target="_blank">
+              {this.link2.label}
+            </Link>
+          </Text>
+        </Stack.Item>
+
+        <Stack.Item>
+          <Checkbox
+            styles={{
+              label: {
+                margin: 0,
+                padding: "2 0 2 0"
+              },
+              text: {
+                fontSize: 12
+              }
+            }}
+            label="I have read and accepted the code of conduct and privacy statement"
+            onChange={this.onChangeCheckbox}
+          />
+        </Stack.Item>
+
+        <Stack.Item>
+          <PrimaryButton
+            ariaLabel="Continue"
+            title="Continue"
+            onClick={async () => await this.acceptCodeOfConduct()}
+            tabIndex={0}
+            className="genericPaneSubmitBtn"
+            text="Continue"
+            disabled={!this.state.readCodeOfConduct}
+          />
+        </Stack.Item>
+      </Stack>
+    );
+  }
+}

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -15,7 +15,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Logger from "../../../Common/Logger";
-import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
+import { IGalleryItem, JunoClient, IJunoResponse, IPublicGalleryData } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
@@ -24,6 +24,8 @@ import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/Gallery
 import "./GalleryViewerComponent.less";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import Explorer from "../../Explorer";
+import { CodeOfConductComponent } from "./CodeOfConductComponent";
+import { InfoComponent } from "./InfoComponent/InfoComponent";
 
 export interface GalleryViewerComponentProps {
   container?: Explorer;
@@ -60,6 +62,7 @@ interface GalleryViewerComponentState {
   sortBy: SortBy;
   searchText: string;
   dialogProps: DialogProps;
+  isCodeOfConductAccepted: boolean;
 }
 
 interface GalleryTabInfo {
@@ -86,6 +89,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private publicNotebooks: IGalleryItem[];
   private favoriteNotebooks: IGalleryItem[];
   private publishedNotebooks: IGalleryItem[];
+  private isCodeOfConductAccepted: boolean;
   private columnCount: number;
   private rowCount: number;
 
@@ -100,7 +104,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       selectedTab: props.selectedTab,
       sortBy: props.sortBy,
       searchText: props.searchText,
-      dialogProps: undefined
+      dialogProps: undefined,
+      isCodeOfConductAccepted: undefined
     };
 
     this.sortingOptions = [
@@ -134,9 +139,20 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     const tabs: GalleryTabInfo[] = [this.createTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
 
     if (this.props.container?.isGalleryPublishEnabled()) {
-      tabs.push(this.createTab(GalleryTab.PublicGallery, this.state.publicNotebooks));
+      tabs.push(
+        this.createPublicGalleryTab(
+          GalleryTab.PublicGallery,
+          this.state.publicNotebooks,
+          this.state.isCodeOfConductAccepted
+        )
+      );
       tabs.push(this.createTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
-      tabs.push(this.createTab(GalleryTab.Published, this.state.publishedNotebooks));
+
+      // 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.
+      if (this.state.isCodeOfConductAccepted !== false) {
+        tabs.push(this.createTab(GalleryTab.Published, this.state.publishedNotebooks));
+      }
     }
 
     const pivotProps: IPivotProps = {
@@ -167,6 +183,17 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   }
 
+  private createPublicGalleryTab(
+    tab: GalleryTab,
+    data: IGalleryItem[],
+    acceptedCodeOfConduct: boolean
+  ): GalleryTabInfo {
+    return {
+      tab,
+      content: this.createPublicGalleryTabContent(data, acceptedCodeOfConduct)
+    };
+  }
+
   private createTab(tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo {
     return {
       tab,
@@ -174,6 +201,19 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     };
   }
 
+  private createPublicGalleryTabContent(data: IGalleryItem[], acceptedCodeOfConduct: boolean): JSX.Element {
+    return acceptedCodeOfConduct === false ? (
+      <CodeOfConductComponent
+        junoClient={this.props.junoClient}
+        onAcceptCodeOfConduct={(result: boolean) => {
+          this.setState({ isCodeOfConductAccepted: result });
+        }}
+      />
+    ) : (
+      this.createTabContent(data)
+    );
+  }
+
   private createTabContent(data: IGalleryItem[]): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
@@ -187,8 +227,12 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           <Stack.Item styles={{ root: { minWidth: 200 } }}>
             <Dropdown options={this.sortingOptions} selectedKey={this.state.sortBy} onChange={this.onDropdownChange} />
           </Stack.Item>
+          {this.props.container?.isGalleryPublishEnabled() && (
+            <Stack.Item>
+              <InfoComponent />
+            </Stack.Item>
+          )}
         </Stack>
-
         {data && this.createCardsTabContent(data)}
       </Stack>
     );
@@ -254,12 +298,19 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private async loadPublicNotebooks(searchText: string, sortBy: SortBy, offline: boolean): Promise<void> {
     if (!offline) {
       try {
-        const response = await this.props.junoClient.getPublicNotebooks();
+        let response: IJunoResponse<IPublicGalleryData> | IJunoResponse<IGalleryItem[]>;
+        if (this.props.container.isCodeOfConductEnabled()) {
+          response = await this.props.junoClient.fetchPublicNotebooks();
+          this.isCodeOfConductAccepted = response.data?.metadata.acceptedCodeOfConduct;
+          this.publicNotebooks = response.data?.notebooksData;
+        } else {
+          response = await this.props.junoClient.getPublicNotebooks();
+          this.publicNotebooks = response.data;
+        }
+
         if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
           throw new Error(`Received HTTP ${response.status} when loading public notebooks`);
         }
-
-        this.publicNotebooks = response.data;
       } catch (error) {
         const message = `Failed to load public notebooks: ${error}`;
         Logger.logError(message, "GalleryViewerComponent/loadPublicNotebooks");
@@ -268,7 +319,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
 
     this.setState({
-      publicNotebooks: this.publicNotebooks && [...this.sort(sortBy, this.search(searchText, this.publicNotebooks))]
+      publicNotebooks: this.publicNotebooks && [...this.sort(sortBy, this.search(searchText, this.publicNotebooks))],
+      isCodeOfConductAccepted: this.isCodeOfConductAccepted
     });
   }
 
@@ -333,12 +385,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private isGalleryItemPresent(searchText: string, item: IGalleryItem): boolean {
     const toSearch = searchText.trim().toUpperCase();
-    const searchData: string[] = [
-      item.author.toUpperCase(),
-      item.description.toUpperCase(),
-      item.name.toUpperCase(),
-      ...item.tags?.map(tag => tag.toUpperCase())
-    ];
+    const searchData: string[] = [item.author.toUpperCase(), item.description.toUpperCase(), item.name.toUpperCase()];
+
+    if (item.tags) {
+      searchData.push(...item.tags.map(tag => tag.toUpperCase()));
+    }
 
     for (const data of searchData) {
       if (data?.indexOf(toSearch) !== -1) {

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.less

@@ -0,0 +1,26 @@
+@import "../../../../../less/Common/Constants.less";
+.infoPanel, .infoPanelMain {
+    display: flex;
+    align-items: center;
+}
+
+.infoPanel {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.infoLabel, .infoLabelMain {
+    padding-left: 5px  
+}
+
+.infoLabel {
+    font-weight: 400
+}
+
+.infoIconMain {
+    color: @AccentMedium
+}
+
+.infoIconMain:hover {
+    color: @BaseMedium
+}

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.test.tsx

@@ -0,0 +1,10 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { InfoComponent } from "./InfoComponent";
+
+describe("InfoComponent", () => {
+  it("renders", () => {
+    const wrapper = shallow(<InfoComponent />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/NotebookGallery/InfoComponent/InfoComponent.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { Icon, Label, Stack, HoverCard, HoverCardType, Link } from "office-ui-fabric-react";
+import { CodeOfConductEndpoints } from "../../../../Common/Constants";
+import "./InfoComponent.less";
+
+export class InfoComponent extends React.Component {
+  private getInfoPanel = (iconName: string, labelText: string, url: string): JSX.Element => {
+    return (
+      <Link href={url} target="_blank">
+        <div className="infoPanel">
+          <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} />
+          <Label className="infoLabel">{labelText}</Label>
+        </div>
+      </Link>
+    );
+  };
+
+  private onHover = (): JSX.Element => {
+    return (
+      <Stack tokens={{ childrenGap: 5, padding: 5 }}>
+        <Stack.Item>{this.getInfoPanel("Script", "Code of Conduct", CodeOfConductEndpoints.codeOfConduct)}</Stack.Item>
+        <Stack.Item>
+          {this.getInfoPanel("RedEye", "Privacy Statement", CodeOfConductEndpoints.privacyStatement)}
+        </Stack.Item>
+        <Stack.Item>
+          {this.getInfoPanel("KnowledgeArticle", "Microsoft Terms of Use", CodeOfConductEndpoints.termsOfUse)}
+        </Stack.Item>
+      </Stack>
+    );
+  };
+
+  public render(): JSX.Element {
+    return (
+      <HoverCard plainCardProps={{ onRenderPlainCard: this.onHover }} instantOpenOnClick type={HoverCardType.plain}>
+        <div className="infoPanelMain">
+          <Icon className="infoIconMain" iconName="Help" styles={{ root: { verticalAlign: "middle" } }} />
+          <Label className="infoLabelMain">Help</Label>
+        </div>
+      </HoverCard>
+    );
+  }
+}

src/Explorer/Controls/NotebookGallery/InfoComponent/__snapshots__/InfoComponent.test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfoComponent renders 1`] = `
+<StyledHoverCardBase
+  instantOpenOnClick={true}
+  plainCardProps={
+    Object {
+      "onRenderPlainCard": [Function],
+    }
+  }
+  type="PlainCard"
+>
+  <div
+    className="infoPanelMain"
+  >
+    <Memo(StyledIconBase)
+      className="infoIconMain"
+      iconName="Help"
+      styles={
+        Object {
+          "root": Object {
+            "verticalAlign": "middle",
+          },
+        }
+      }
+    />
+    <StyledLabelBase
+      className="infoLabelMain"
+    >
+      Help
+    </StyledLabelBase>
+  </div>
+</StyledHoverCardBase>
+`;

src/Explorer/Controls/NotebookGallery/__snapshots__/CodeOfConductComponent.test.tsx.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeOfConductComponent renders 1`] = `
+<Stack
+  tokens={
+    Object {
+      "childrenGap": 20,
+    }
+  }
+>
+  <StackItem>
+    <Text
+      style={
+        Object {
+          "fontSize": "20px",
+          "fontWeight": 500,
+        }
+      }
+    >
+      Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement
+    </Text>
+  </StackItem>
+  <StackItem>
+    <Text>
+      Azure Cosmos DB Notebook Public Gallery contains notebook samples shared by users of Cosmos DB.
+    </Text>
+  </StackItem>
+  <StackItem>
+    <Text>
+      In order to access Azure Cosmos DB Notebook Gallery resources, you must accept the 
+      <StyledLinkBase
+        href="https://aka.ms/cosmos-code-of-conduct"
+        target="_blank"
+      >
+        code of conduct
+      </StyledLinkBase>
+       and 
+      <StyledLinkBase
+        href="https://aka.ms/ms-privacy-policy"
+        target="_blank"
+      >
+        privacy statement
+      </StyledLinkBase>
+    </Text>
+  </StackItem>
+  <StackItem>
+    <StyledCheckboxBase
+      label="I have read and accepted the code of conduct and privacy statement"
+      onChange={[Function]}
+      styles={
+        Object {
+          "label": Object {
+            "margin": 0,
+            "padding": "2 0 2 0",
+          },
+          "text": Object {
+            "fontSize": 12,
+          },
+        }
+      }
+    />
+  </StackItem>
+  <StackItem>
+    <CustomizedPrimaryButton
+      ariaLabel="Continue"
+      className="genericPaneSubmitBtn"
+      disabled={true}
+      onClick={[Function]}
+      tabIndex={0}
+      text="Continue"
+      title="Continue"
+    />
+  </StackItem>
+</Stack>
+`;

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.test.tsx

@@ -17,7 +17,8 @@ describe("NotebookMetadataComponent", () => {
         isSample: false,
         downloads: 0,
         favorites: 0,
-        views: 0
+        views: 0,
+        newCellId: undefined
       },
       isFavorite: false,
       downloadButtonText: "Download",
@@ -45,7 +46,8 @@ describe("NotebookMetadataComponent", () => {
         isSample: false,
         downloads: 0,
         favorites: 0,
-        views: 0
+        views: 0,
+        newCellId: undefined
       },
       isFavorite: true,
       downloadButtonText: "Download",

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -19,6 +19,7 @@ import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComp
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 import Explorer from "../../Explorer";
+import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 
 export interface NotebookViewerComponentProps {
@@ -29,6 +30,7 @@ export interface NotebookViewerComponentProps {
   isFavorite?: boolean;
   backNavigationText: string;
   hideInputs?: boolean;
+  hidePrompts?: boolean;
   onBackClick: () => void;
   onTagClick: (tag: string) => void;
 }
@@ -86,6 +88,7 @@ export class NotebookViewerComponent extends React.Component<
       }
 
       const notebook: Notebook = await response.json();
+      this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
       this.notebookComponentBootstrapper.setContent("json", notebook);
       this.setState({ content: notebook, showProgressBar: false });
 
@@ -105,10 +108,21 @@ export class NotebookViewerComponent extends React.Component<
     }
   }
 
+  private removeNotebookViewerLink = (notebook: Notebook, newCellId: string): void => {
+    if (!newCellId) {
+      return;
+    }
+    const notebookV4 = notebook as NotebookV4;
+    if (notebookV4 && notebookV4.cells[0].source[0].search(newCellId)) {
+      delete notebookV4.cells[0];
+      notebook = notebookV4;
+    }
+  };
+
   public render(): JSX.Element {
     return (
       <div className="notebookViewerContainer">
-        {this.props.backNavigationText ? (
+        {this.props.backNavigationText !== undefined ? (
           <Link onClick={this.props.onBackClick}>
             <Icon iconName="Back" /> {this.props.backNavigationText}
           </Link>
@@ -135,7 +149,8 @@ export class NotebookViewerComponent extends React.Component<
         {this.state.showProgressBar && <ProgressIndicator />}
 
         {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
-          hideInputs: this.props.hideInputs
+          hideInputs: this.props.hideInputs,
+          hidePrompts: this.props.hidePrompts
         })}
 
         {this.state.dialogProps && <DialogComponent {...this.state.dialogProps} />}

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -24,7 +24,7 @@ import {
 } from "office-ui-fabric-react/lib/utilities/selection/index";
 import { StyleConstants } from "../../../Common/Constants";
 import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
 import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
 import { QueriesClient } from "../../../Common/QueriesClient";

src/Explorer/Controls/Settings/SettingsComponent.less

@@ -0,0 +1,31 @@
+@import "../../../../less/Common/Constants";
+
+.settingsV2MainContainer {
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.settingsV2ToolTip {
+    padding: 10px;
+    font: 12px @DataExplorerFont;
+    max-width: 300px;
+}
+
+.autoPilotSelector span {
+    height: 25px;
+    font: 14px @DataExplorerFont;
+}
+
+.settingsV2TabsContainer {
+  padding: @LargeSpace @LargeSpace 30px @LargeSpace;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+  font-family: @DataExplorerFont;
+}
+
+.settingsV2IndexingPolicyEditor {
+  width: 100%;
+  height: 60vh;
+}

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

@@ -0,0 +1,269 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import SettingsTabV2 from "../../Tabs/SettingsTabV2";
+import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import ko from "knockout";
+import { TtlType, isDirty, TtlOnNoDefault, TtlOn, TtlOff } from "./SettingsUtils";
+import Explorer from "../../Explorer";
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
+jest.mock("../../../Common/dataAccess/updateCollection", () => ({
+  updateCollection: jest.fn().mockReturnValue({
+    id: undefined,
+    defaultTtl: undefined,
+    indexingPolicy: undefined,
+    conflictResolutionPolicy: undefined,
+    changeFeedPolicy: undefined,
+    analyticalStorageTtl: undefined,
+    geospatialConfig: undefined
+  } as DataModels.Collection)
+}));
+import { updateOffer } from "../../../Common/DocumentClientUtilityBase";
+jest.mock("../../../Common/DocumentClientUtilityBase", () => ({
+  updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer)
+}));
+
+describe("SettingsComponent", () => {
+  const baseProps: SettingsComponentProps = {
+    settingsTab: new SettingsTabV2({
+      collection: collection,
+      tabKind: ViewModels.CollectionTabKind.SettingsV2,
+      title: "Scale & Settings",
+      tabPath: "",
+      node: undefined,
+      selfLink: undefined,
+      hashLocation: "settings",
+      isActive: ko.observable(false),
+      onUpdateTabsButtons: undefined
+    })
+  };
+
+  it("renders", () => {
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("dirty value enables save button and discard button", () => {
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
+    expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(false);
+    expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(false);
+    wrapper.setState({ isScaleSaveable: true, isScaleDiscardable: true });
+    wrapper.update();
+    expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
+    expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
+    wrapper.setState({
+      isScaleSaveable: false,
+      isScaleDiscardable: false,
+      isSubSettingsSaveable: true,
+      isSubSettingsDiscardable: true
+    });
+    wrapper.update();
+    expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
+    expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
+    wrapper.setState({ isSubSettingsSaveable: false, isSubSettingsDiscardable: false, isIndexingPolicyDirty: true });
+    wrapper.update();
+    expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
+    expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
+    wrapper.setState({ isIndexingPolicyDirty: false, isConflictResolutionDirty: true });
+    wrapper.update();
+    expect(settingsComponentInstance.isSaveSettingsButtonEnabled()).toEqual(true);
+    expect(settingsComponentInstance.isDiscardSettingsButtonEnabled()).toEqual(true);
+  });
+
+  it("auto pilot helper functions pass on correct value", () => {
+    const newCollection = { ...collection };
+    newCollection.offer = ko.observable<DataModels.Offer>({
+      content: {
+        offerAutopilotSettings: {
+          maxThroughput: 10000
+        }
+      }
+    } as DataModels.Offer);
+
+    const props = { ...baseProps };
+    props.settingsTab.collection = newCollection;
+
+    const wrapper = shallow(<SettingsComponent {...props} />);
+    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
+    expect(settingsComponentInstance.hasProvisioningTypeChanged()).toEqual(false);
+    wrapper.setState({
+      userCanChangeProvisioningTypes: true,
+      isAutoPilotSelected: true,
+      wasAutopilotOriginallySet: false,
+      autoPilotThroughput: 1000
+    });
+    wrapper.update();
+    expect(settingsComponentInstance.hasProvisioningTypeChanged()).toEqual(true);
+  });
+
+  it("shouldShowKeyspaceSharedThroughputMessage", () => {
+    let settingsComponentInstance = new SettingsComponent(baseProps);
+    expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(false);
+
+    const newContainer = new Explorer({
+      notificationsClient: undefined,
+      isEmulator: false
+    });
+    newContainer.isPreferredApiCassandra = ko.computed(() => true);
+
+    const newCollection = { ...collection };
+    newCollection.container = newContainer;
+    const newDatabase = {
+      nodeKind: undefined,
+      rid: undefined,
+      container: newContainer,
+      self: undefined,
+      id: undefined,
+      collections: undefined,
+      offer: undefined,
+      isDatabaseExpanded: undefined,
+      isDatabaseShared: ko.computed(() => true),
+      selectedSubnodeKind: undefined,
+      selectDatabase: undefined,
+      expandDatabase: undefined,
+      collapseDatabase: undefined,
+      loadCollections: undefined,
+      findCollectionWithId: undefined,
+      openAddCollection: undefined,
+      onDeleteDatabaseContextMenuClick: undefined,
+      readSettings: undefined,
+      onSettingsClick: undefined,
+      loadOffer: undefined
+    } as ViewModels.Database;
+    newCollection.getDatabase = () => newDatabase;
+    newCollection.offer = ko.observable(undefined);
+
+    const props = { ...baseProps };
+    props.settingsTab.collection = newCollection;
+
+    settingsComponentInstance = new SettingsComponent(props);
+    expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(true);
+  });
+
+  it("hasConflictResolution", () => {
+    let settingsComponentInstance = new SettingsComponent(baseProps);
+    expect(settingsComponentInstance.hasConflictResolution()).toEqual(undefined);
+
+    const newContainer = new Explorer({
+      notificationsClient: undefined,
+      isEmulator: false
+    });
+    newContainer.databaseAccount = ko.observable({
+      id: undefined,
+      name: undefined,
+      location: undefined,
+      type: undefined,
+      kind: undefined,
+      tags: undefined,
+      properties: {
+        documentEndpoint: undefined,
+        tableEndpoint: undefined,
+        gremlinEndpoint: undefined,
+        cassandraEndpoint: undefined,
+        enableMultipleWriteLocations: true
+      }
+    });
+    const newCollection = { ...collection };
+    newCollection.container = newContainer;
+    newCollection.conflictResolutionPolicy = ko.observable({
+      mode: DataModels.ConflictResolutionMode.Custom,
+      conflictResolutionProcedure: undefined
+    } as DataModels.ConflictResolutionPolicy);
+
+    const props = { ...baseProps };
+    props.settingsTab.collection = newCollection;
+
+    settingsComponentInstance = new SettingsComponent(props);
+    expect(settingsComponentInstance.hasConflictResolution()).toEqual(true);
+  });
+
+  it("isOfferReplacePending", () => {
+    let settingsComponentInstance = new SettingsComponent(baseProps);
+    expect(settingsComponentInstance.isOfferReplacePending()).toEqual(undefined);
+
+    const newCollection = { ...collection };
+    newCollection.offer = ko.observable({
+      headers: { "x-ms-offer-replace-pending": true }
+    } as DataModels.OfferWithHeaders);
+    const props = { ...baseProps };
+    props.settingsTab.collection = newCollection;
+
+    settingsComponentInstance = new SettingsComponent(props);
+    expect(settingsComponentInstance.isOfferReplacePending()).toEqual(true);
+  });
+
+  it("save calls updateCollection and updateOffer", async () => {
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    wrapper.setState({ isSubSettingsSaveable: true, isScaleSaveable: true });
+    wrapper.update();
+    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
+    await settingsComponentInstance.onSaveClick();
+    expect(updateCollection).toBeCalled();
+    expect(updateOffer).toBeCalled();
+  });
+
+  it("revert resets state values", async () => {
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    wrapper.setState({ timeToLive: TtlType.OnNoDefault, throughput: 10 });
+    wrapper.update();
+    let state = wrapper.state() as SettingsComponentState;
+    expect(isDirty(state.timeToLive, state.timeToLiveBaseline)).toEqual(true);
+    expect(isDirty(state.throughput, state.throughputBaseline)).toEqual(true);
+
+    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
+    settingsComponentInstance.onRevertClick();
+    state = wrapper.state() as SettingsComponentState;
+    expect(isDirty(state.timeToLive, state.timeToLiveBaseline)).toEqual(false);
+    expect(isDirty(state.throughput, state.throughputBaseline)).toEqual(false);
+  });
+
+  it("getTtlValue", async () => {
+    const settingsComponentInstance = new SettingsComponent(baseProps);
+    expect(settingsComponentInstance.getTtlValue(TtlType.OnNoDefault)).toEqual(TtlOnNoDefault);
+    expect(settingsComponentInstance.getTtlValue(TtlType.On)).toEqual(TtlOn);
+    expect(settingsComponentInstance.getTtlValue(TtlType.Off)).toEqual(TtlOff);
+  });
+
+  it("getAnalyticalStorageTtl", () => {
+    const newCollection = { ...collection };
+    newCollection.analyticalStorageTtl = ko.observable(10);
+    const props = { ...baseProps };
+    props.settingsTab.collection = newCollection;
+    const wrapper = shallow(<SettingsComponent {...props} />);
+    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
+    expect(settingsComponentInstance.getAnalyticalStorageTtl()).toEqual(10);
+    wrapper.setState({ analyticalStorageTtlSelection: TtlType.Off });
+    wrapper.update();
+    expect(settingsComponentInstance.getAnalyticalStorageTtl()).toEqual(-1);
+  });
+
+  it("getUpdatedConflictResolutionPolicy", () => {
+    const wrapper = shallow(<SettingsComponent {...baseProps} />);
+    const conflictResolutionPolicyPath = "_ts";
+    const conflictResolutionPolicyProcedure = "sample_sproc";
+    const expectSprocPath =
+      "/dbs/" + collection.databaseId + "/colls/" + collection.id() + "/sprocs/" + conflictResolutionPolicyProcedure;
+
+    wrapper.setState({
+      conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.LastWriterWins,
+      conflictResolutionPolicyPath: conflictResolutionPolicyPath
+    });
+    wrapper.update();
+    const settingsComponentInstance = wrapper.instance() as SettingsComponent;
+    let conflictResolutionPolicy = settingsComponentInstance.getUpdatedConflictResolutionPolicy();
+    expect(conflictResolutionPolicy.mode).toEqual(DataModels.ConflictResolutionMode.LastWriterWins);
+    expect(conflictResolutionPolicy.conflictResolutionPath).toEqual(conflictResolutionPolicyPath);
+
+    wrapper.setState({
+      conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.Custom,
+      conflictResolutionPolicyProcedure: conflictResolutionPolicyProcedure
+    });
+    wrapper.update();
+    conflictResolutionPolicy = settingsComponentInstance.getUpdatedConflictResolutionPolicy();
+    expect(conflictResolutionPolicy.mode).toEqual(DataModels.ConflictResolutionMode.Custom);
+    expect(conflictResolutionPolicy.conflictResolutionProcedure).toEqual(expectSprocPath);
+  });
+});

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -0,0 +1,912 @@
+import * as React from "react";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import * as Constants from "../../../Common/Constants";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as SharedConstants from "../../../Shared/Constants";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import DiscardIcon from "../../../../images/discard.svg";
+import SaveIcon from "../../../../images/save-cosmos.svg";
+import { traceStart, traceFailure, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import Explorer from "../../Explorer";
+import { updateOffer } from "../../../Common/DocumentClientUtilityBase";
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { userContext } from "../../../UserContext";
+import { updateOfferThroughputBeyondLimit } from "../../../Common/dataAccess/updateOfferThroughputBeyondLimit";
+import SettingsTab from "../../Tabs/SettingsTabV2";
+import { throughputUnit } from "./SettingsRenderUtils";
+import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
+import {
+  getMaxRUs,
+  hasDatabaseSharedThroughput,
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  SettingsV2TabTypes,
+  getTabTitle,
+  isDirty,
+  TtlOff,
+  TtlOn,
+  TtlOnNoDefault,
+  parseConflictResolutionMode,
+  parseConflictResolutionProcedure
+} from "./SettingsUtils";
+import {
+  ConflictResolutionComponent,
+  ConflictResolutionComponentProps
+} from "./SettingsSubComponents/ConflictResolutionComponent";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
+import { Pivot, PivotItem, IPivotProps, IPivotItemProps, IChoiceGroupOption } from "office-ui-fabric-react";
+import "./SettingsComponent.less";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+
+interface SettingsV2TabInfo {
+  tab: SettingsV2TabTypes;
+  content: JSX.Element;
+}
+
+interface ButtonV2 {
+  isVisible: () => boolean;
+  isEnabled: () => boolean;
+  isSelected?: () => boolean;
+}
+
+export interface SettingsComponentProps {
+  settingsTab: SettingsTab;
+}
+
+export interface SettingsComponentState {
+  throughput: number;
+  throughputBaseline: number;
+  autoPilotThroughput: number;
+  autoPilotThroughputBaseline: number;
+  isAutoPilotSelected: boolean;
+  wasAutopilotOriginallySet: boolean;
+  isScaleSaveable: boolean;
+  isScaleDiscardable: boolean;
+
+  timeToLive: TtlType;
+  timeToLiveBaseline: TtlType;
+  timeToLiveSeconds: number;
+  timeToLiveSecondsBaseline: number;
+  geospatialConfigType: GeospatialConfigType;
+  geospatialConfigTypeBaseline: GeospatialConfigType;
+  analyticalStorageTtlSelection: TtlType;
+  analyticalStorageTtlSelectionBaseline: TtlType;
+  analyticalStorageTtlSeconds: number;
+  analyticalStorageTtlSecondsBaseline: number;
+  changeFeedPolicy: ChangeFeedPolicyState;
+  changeFeedPolicyBaseline: ChangeFeedPolicyState;
+  isSubSettingsSaveable: boolean;
+  isSubSettingsDiscardable: boolean;
+
+  indexingPolicyContent: DataModels.IndexingPolicy;
+  indexingPolicyContentBaseline: DataModels.IndexingPolicy;
+  shouldDiscardIndexingPolicy: boolean;
+  indexingPolicyElementFocussed: boolean;
+  isIndexingPolicyDirty: boolean;
+
+  conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
+  conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
+  conflictResolutionPolicyPath: string;
+  conflictResolutionPolicyPathBaseline: string;
+  conflictResolutionPolicyProcedure: string;
+  conflictResolutionPolicyProcedureBaseline: string;
+  isConflictResolutionDirty: boolean;
+
+  initialNotification: DataModels.Notification;
+  selectedTab: SettingsV2TabTypes;
+}
+
+export class SettingsComponent extends React.Component<SettingsComponentProps, SettingsComponentState> {
+  private static readonly sixMonthsInSeconds = 15768000;
+  private static readonly zeroSeconds = 0;
+
+  public saveSettingsButton: ButtonV2;
+  public discardSettingsChangesButton: ButtonV2;
+
+  public isAnalyticalStorageEnabled: boolean;
+  private collection: ViewModels.Collection;
+  private container: Explorer;
+  private changeFeedPolicyVisible: boolean;
+  private isFixedContainer: boolean;
+  private autoPilotTiersList: ViewModels.DropdownOption<DataModels.AutopilotTier>[];
+  private shouldShowIndexingPolicyEditor: boolean;
+
+  constructor(props: SettingsComponentProps) {
+    super(props);
+
+    this.collection = this.props.settingsTab.collection as ViewModels.Collection;
+    this.container = this.collection?.container;
+    this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
+    this.shouldShowIndexingPolicyEditor =
+      this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
+
+    this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+      Constants.Features.enableChangeFeedPolicy
+    );
+    // Mongo container with system partition key still treat as "Fixed"
+
+    this.isFixedContainer =
+      !this.collection.partitionKey ||
+      (this.container.isPreferredApiMongoDB() && this.collection.partitionKey.systemKey);
+
+    this.state = {
+      throughput: undefined,
+      throughputBaseline: undefined,
+      autoPilotThroughput: undefined,
+      autoPilotThroughputBaseline: undefined,
+      isAutoPilotSelected: false,
+      wasAutopilotOriginallySet: false,
+      isScaleSaveable: false,
+      isScaleDiscardable: false,
+
+      timeToLive: undefined,
+      timeToLiveBaseline: undefined,
+      timeToLiveSeconds: undefined,
+      timeToLiveSecondsBaseline: undefined,
+      geospatialConfigType: undefined,
+      geospatialConfigTypeBaseline: undefined,
+      analyticalStorageTtlSelection: undefined,
+      analyticalStorageTtlSelectionBaseline: undefined,
+      analyticalStorageTtlSeconds: undefined,
+      analyticalStorageTtlSecondsBaseline: undefined,
+      changeFeedPolicy: undefined,
+      changeFeedPolicyBaseline: undefined,
+      isSubSettingsSaveable: false,
+      isSubSettingsDiscardable: false,
+
+      indexingPolicyContent: undefined,
+      indexingPolicyContentBaseline: undefined,
+      indexingPolicyElementFocussed: false,
+      shouldDiscardIndexingPolicy: false,
+      isIndexingPolicyDirty: false,
+
+      conflictResolutionPolicyMode: undefined,
+      conflictResolutionPolicyModeBaseline: undefined,
+      conflictResolutionPolicyPath: undefined,
+      conflictResolutionPolicyPathBaseline: undefined,
+      conflictResolutionPolicyProcedure: undefined,
+      conflictResolutionPolicyProcedureBaseline: undefined,
+      isConflictResolutionDirty: false,
+
+      initialNotification: undefined,
+      selectedTab: SettingsV2TabTypes.ScaleTab
+    };
+
+    this.saveSettingsButton = {
+      isEnabled: this.isSaveSettingsButtonEnabled,
+      isVisible: () => {
+        return true;
+      }
+    };
+
+    this.discardSettingsChangesButton = {
+      isEnabled: this.isDiscardSettingsButtonEnabled,
+      isVisible: () => {
+        return true;
+      }
+    };
+  }
+
+  componentDidMount(): void {
+    this.setAutoPilotStates();
+    this.setBaseline();
+    if (this.props.settingsTab.isActive()) {
+      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+    }
+  }
+
+  componentDidUpdate(): void {
+    if (this.props.settingsTab.isActive()) {
+      this.props.settingsTab.getSettingsTabContainer().onUpdateTabsButtons(this.getTabsButtons());
+    }
+  }
+
+  public isSaveSettingsButtonEnabled = (): boolean => {
+    if (this.isOfferReplacePending()) {
+      return false;
+    }
+
+    return (
+      this.state.isScaleSaveable ||
+      this.state.isSubSettingsSaveable ||
+      this.state.isIndexingPolicyDirty ||
+      this.state.isConflictResolutionDirty
+    );
+  };
+
+  public isDiscardSettingsButtonEnabled = (): boolean => {
+    return (
+      this.state.isScaleDiscardable ||
+      this.state.isSubSettingsDiscardable ||
+      this.state.isIndexingPolicyDirty ||
+      this.state.isConflictResolutionDirty
+    );
+  };
+
+  private setAutoPilotStates = (): void => {
+    const offer = this.collection?.offer && this.collection.offer();
+    const offerAutopilotSettings = offer?.content?.offerAutopilotSettings;
+
+    if (
+      offerAutopilotSettings &&
+      offerAutopilotSettings.maxThroughput &&
+      AutoPilotUtils.isValidAutoPilotThroughput(offerAutopilotSettings.maxThroughput)
+    ) {
+      this.setState({
+        isAutoPilotSelected: true,
+        wasAutopilotOriginallySet: true,
+        autoPilotThroughput: offerAutopilotSettings.maxThroughput,
+        autoPilotThroughputBaseline: offerAutopilotSettings.maxThroughput
+      });
+    }
+  };
+
+  public hasProvisioningTypeChanged = (): boolean =>
+    this.state.wasAutopilotOriginallySet !== this.state.isAutoPilotSelected;
+
+  public shouldShowKeyspaceSharedThroughputMessage = (): boolean =>
+    this.container && this.container.isPreferredApiCassandra() && hasDatabaseSharedThroughput(this.collection);
+
+  public hasConflictResolution = (): boolean =>
+    this.container?.databaseAccount &&
+    this.container.databaseAccount()?.properties?.enableMultipleWriteLocations &&
+    this.collection.conflictResolutionPolicy &&
+    !!this.collection.conflictResolutionPolicy();
+
+  public isOfferReplacePending = (): boolean => {
+    const offer = this.collection?.offer && this.collection.offer();
+    return (
+      offer &&
+      Object.keys(offer).find(value => value === "headers") &&
+      !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
+    );
+  };
+
+  public onSaveClick = async (): Promise<void> => {
+    this.props.settingsTab.isExecutionError(false);
+
+    this.props.settingsTab.isExecuting(true);
+    const startKey: number = traceStart(Action.UpdateSettings, {
+      databaseAccountName: this.container.databaseAccount()?.name,
+      defaultExperience: this.container.defaultExperience(),
+      dataExplorerArea: Constants.Areas.Tab,
+      tabTitle: this.props.settingsTab.tabTitle()
+    });
+
+    const newCollection: DataModels.Collection = { ...this.collection.rawDataModel };
+
+    try {
+      if (
+        this.state.isSubSettingsSaveable ||
+        this.state.isIndexingPolicyDirty ||
+        this.state.isConflictResolutionDirty
+      ) {
+        let defaultTtl: number;
+        switch (this.state.timeToLive) {
+          case TtlType.On:
+            defaultTtl = Number(this.state.timeToLiveSeconds);
+            break;
+          case TtlType.OnNoDefault:
+            defaultTtl = -1;
+            break;
+          case TtlType.Off:
+          default:
+            defaultTtl = undefined;
+            break;
+        }
+
+        newCollection.defaultTtl = defaultTtl;
+
+        newCollection.indexingPolicy = this.state.indexingPolicyContent;
+
+        newCollection.changeFeedPolicy =
+          this.changeFeedPolicyVisible && this.state.changeFeedPolicy === ChangeFeedPolicyState.On
+            ? {
+                retentionDuration: Constants.BackendDefaults.maxChangeFeedRetentionDuration
+              }
+            : undefined;
+
+        newCollection.analyticalStorageTtl = this.getAnalyticalStorageTtl();
+
+        newCollection.geospatialConfig = {
+          type: this.state.geospatialConfigType
+        };
+
+        const conflictResolutionChanges: DataModels.ConflictResolutionPolicy = this.getUpdatedConflictResolutionPolicy();
+        if (conflictResolutionChanges) {
+          newCollection.conflictResolutionPolicy = conflictResolutionChanges;
+        }
+
+        const updatedCollection: DataModels.Collection = await updateCollection(
+          this.collection.databaseId,
+          this.collection.id(),
+          newCollection
+        );
+        this.collection.rawDataModel = updatedCollection;
+        this.collection.defaultTtl(updatedCollection.defaultTtl);
+        this.collection.analyticalStorageTtl(updatedCollection.analyticalStorageTtl);
+        this.collection.id(updatedCollection.id);
+        this.collection.indexingPolicy(updatedCollection.indexingPolicy);
+        this.collection.conflictResolutionPolicy(updatedCollection.conflictResolutionPolicy);
+        this.collection.changeFeedPolicy(updatedCollection.changeFeedPolicy);
+        this.collection.geospatialConfig(updatedCollection.geospatialConfig);
+        this.setState({
+          isSubSettingsSaveable: false,
+          isSubSettingsDiscardable: false,
+          isIndexingPolicyDirty: false,
+          isConflictResolutionDirty: false
+        });
+      }
+
+      if (this.state.isScaleSaveable) {
+        const newThroughput = this.state.throughput;
+        const newOffer: DataModels.Offer = { ...this.collection.offer() };
+        const originalThroughputValue: number = this.state.throughput;
+
+        if (newOffer.content) {
+          newOffer.content.offerThroughput = newThroughput;
+        } else {
+          newOffer.content = {
+            offerThroughput: newThroughput,
+            offerIsRUPerMinuteThroughputEnabled: false
+          };
+        }
+
+        const headerOptions: RequestOptions = { initialHeaders: {} };
+
+        if (this.state.isAutoPilotSelected) {
+          newOffer.content.offerAutopilotSettings = {
+            maxThroughput: this.state.autoPilotThroughput
+          };
+
+          // user has changed from provisioned --> autoscale
+          if (this.hasProvisioningTypeChanged()) {
+            headerOptions.initialHeaders[Constants.HttpHeaders.migrateOfferToAutopilot] = "true";
+            delete newOffer.content.offerAutopilotSettings;
+          } else {
+            delete newOffer.content.offerThroughput;
+          }
+        } else {
+          this.setState({
+            isAutoPilotSelected: false
+          });
+
+          // user has changed from autoscale --> provisioned
+          if (this.hasProvisioningTypeChanged()) {
+            headerOptions.initialHeaders[Constants.HttpHeaders.migrateOfferToManualThroughput] = "true";
+          } else {
+            delete newOffer.content.offerAutopilotSettings;
+          }
+        }
+
+        if (
+          getMaxRUs(this.collection, this.container) <=
+            SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
+          newThroughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
+          this.container
+        ) {
+          const requestPayload = {
+            subscriptionId: userContext.subscriptionId,
+            databaseAccountName: userContext.databaseAccount.name,
+            resourceGroup: userContext.resourceGroup,
+            databaseName: this.collection.databaseId,
+            collectionName: this.collection.id(),
+            throughput: newThroughput,
+            offerIsRUPerMinuteThroughputEnabled: false
+          };
+          try {
+            await updateOfferThroughputBeyondLimit(requestPayload);
+            this.collection.offer().content.offerThroughput = originalThroughputValue;
+            this.setState({
+              throughput: originalThroughputValue,
+              throughputBaseline: originalThroughputValue,
+              initialNotification: {
+                description: `Throughput update for ${newThroughput} ${throughputUnit}`
+              } as DataModels.Notification
+            });
+            this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+          } catch (error) {
+            traceFailure(
+              Action.UpdateSettings,
+              {
+                databaseAccountName: this.container.databaseAccount().name,
+                databaseName: this.collection && this.collection.databaseId,
+                collectionName: this.collection && this.collection.id(),
+                defaultExperience: this.container.defaultExperience(),
+                dataExplorerArea: Constants.Areas.Tab,
+                tabTitle: this.props.settingsTab.tabTitle(),
+                error: error
+              },
+              startKey
+            );
+            throw error;
+          }
+        } else {
+          const updatedOffer: DataModels.Offer = await updateOffer(this.collection.offer(), newOffer, headerOptions);
+          this.collection.offer(updatedOffer);
+          this.setState({ isScaleSaveable: false, isScaleDiscardable: false });
+          if (this.state.isAutoPilotSelected) {
+            this.setState({
+              autoPilotThroughput: updatedOffer.content.offerAutopilotSettings.maxThroughput,
+              autoPilotThroughputBaseline: updatedOffer.content.offerAutopilotSettings.maxThroughput
+            });
+          } else {
+            this.setState({
+              throughput: updatedOffer.content.offerThroughput,
+              throughputBaseline: updatedOffer.content.offerThroughput
+            });
+          }
+        }
+      }
+      this.container.isRefreshingExplorer(false);
+      this.setBaseline();
+      this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
+      traceSuccess(
+        Action.UpdateSettings,
+        {
+          databaseAccountName: this.container.databaseAccount()?.name,
+          defaultExperience: this.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.props.settingsTab.tabTitle()
+        },
+        startKey
+      );
+    } catch (reason) {
+      this.container.isRefreshingExplorer(false);
+      this.props.settingsTab.isExecutionError(true);
+      console.error(reason);
+      traceFailure(
+        Action.UpdateSettings,
+        {
+          databaseAccountName: this.container.databaseAccount()?.name,
+          defaultExperience: this.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.props.settingsTab.tabTitle()
+        },
+        startKey
+      );
+    }
+    this.props.settingsTab.isExecuting(false);
+  };
+
+  public onRevertClick = (): void => {
+    this.setState({
+      throughput: this.state.throughputBaseline,
+      timeToLive: this.state.timeToLiveBaseline,
+      timeToLiveSeconds: this.state.timeToLiveSecondsBaseline,
+      geospatialConfigType: this.state.geospatialConfigTypeBaseline,
+      indexingPolicyContent: this.state.indexingPolicyContentBaseline,
+      conflictResolutionPolicyMode: this.state.conflictResolutionPolicyModeBaseline,
+      conflictResolutionPolicyPath: this.state.conflictResolutionPolicyPathBaseline,
+      conflictResolutionPolicyProcedure: this.state.conflictResolutionPolicyProcedureBaseline,
+      analyticalStorageTtlSelection: this.state.analyticalStorageTtlSelectionBaseline,
+      analyticalStorageTtlSeconds: this.state.analyticalStorageTtlSecondsBaseline,
+      changeFeedPolicy: this.state.changeFeedPolicyBaseline,
+      autoPilotThroughput: this.state.autoPilotThroughputBaseline,
+      isAutoPilotSelected: this.state.wasAutopilotOriginallySet,
+      shouldDiscardIndexingPolicy: true,
+      isScaleSaveable: false,
+      isScaleDiscardable: false,
+      isSubSettingsSaveable: false,
+      isSubSettingsDiscardable: false,
+      isIndexingPolicyDirty: false,
+      isConflictResolutionDirty: false
+    });
+  };
+
+  private onScaleSaveableChange = (isScaleSaveable: boolean): void =>
+    this.setState({ isScaleSaveable: isScaleSaveable });
+
+  private onScaleDiscardableChange = (isScaleDiscardable: boolean): void =>
+    this.setState({ isScaleDiscardable: isScaleDiscardable });
+
+  private onIndexingPolicyElementFocusChange = (indexingPolicyElementFocussed: boolean): void =>
+    this.setState({ indexingPolicyElementFocussed: indexingPolicyElementFocussed });
+
+  private onIndexingPolicyContentChange = (newIndexingPolicy: DataModels.IndexingPolicy): void =>
+    this.setState({ indexingPolicyContent: newIndexingPolicy });
+
+  private resetShouldDiscardIndexingPolicy = (): void => this.setState({ shouldDiscardIndexingPolicy: false });
+
+  private logIndexingPolicySuccessMessage = (): void => {
+    if (this.props.settingsTab.onLoadStartKey) {
+      traceSuccess(
+        Action.Tab,
+        {
+          databaseAccountName: this.container.databaseAccount().name,
+          databaseName: this.collection.databaseId,
+          collectionName: this.collection.id(),
+          defaultExperience: this.container.defaultExperience(),
+          dataExplorerArea: Constants.Areas.Tab,
+          tabTitle: this.props.settingsTab.tabTitle()
+        },
+        this.props.settingsTab.onLoadStartKey
+      );
+      this.props.settingsTab.onLoadStartKey = undefined;
+    }
+  };
+
+  private onConflictResolutionPolicyModeChange = (
+    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.setState({
+      conflictResolutionPolicyMode:
+        DataModels.ConflictResolutionMode[option.key as keyof typeof DataModels.ConflictResolutionMode]
+    });
+
+  private onConflictResolutionPolicyPathChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => this.setState({ conflictResolutionPolicyPath: newValue });
+
+  private onConflictResolutionPolicyProcedureChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => this.setState({ conflictResolutionPolicyProcedure: newValue });
+
+  private onConflictResolutionDirtyChange = (isConflictResolutionDirty: boolean): void =>
+    this.setState({ isConflictResolutionDirty: isConflictResolutionDirty });
+
+  public getTtlValue = (value: string): TtlType => {
+    switch (value) {
+      case TtlOn:
+        return TtlType.On;
+      case TtlOff:
+        return TtlType.Off;
+      case TtlOnNoDefault:
+        return TtlType.OnNoDefault;
+    }
+    return undefined;
+  };
+
+  private onTtlChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption): void =>
+    this.setState({ timeToLive: this.getTtlValue(option.key) });
+
+  private onTimeToLiveSecondsChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    let newTimeToLiveSeconds = parseInt(newValue);
+    newTimeToLiveSeconds = isNaN(newTimeToLiveSeconds) ? SettingsComponent.zeroSeconds : newTimeToLiveSeconds;
+    this.setState({ timeToLiveSeconds: newTimeToLiveSeconds });
+  };
+
+  private onGeoSpatialConfigTypeChange = (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.setState({ geospatialConfigType: GeospatialConfigType[option.key as keyof typeof GeospatialConfigType] });
+
+  private onAnalyticalStorageTtlSelectionChange = (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void => this.setState({ analyticalStorageTtlSelection: this.getTtlValue(option.key) });
+
+  private onAnalyticalStorageTtlSecondsChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    let newAnalyticalStorageTtlSeconds = parseInt(newValue);
+    newAnalyticalStorageTtlSeconds = isNaN(newAnalyticalStorageTtlSeconds)
+      ? SettingsComponent.zeroSeconds
+      : newAnalyticalStorageTtlSeconds;
+    this.setState({ analyticalStorageTtlSeconds: newAnalyticalStorageTtlSeconds });
+  };
+
+  private onChangeFeedPolicyChange = (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ): void =>
+    this.setState({ changeFeedPolicy: ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState] });
+
+  private onSubSettingsSaveableChange = (isSubSettingsSaveable: boolean): void =>
+    this.setState({ isSubSettingsSaveable: isSubSettingsSaveable });
+
+  private onSubSettingsDiscardableChange = (isSubSettingsDiscardable: boolean): void =>
+    this.setState({ isSubSettingsDiscardable: isSubSettingsDiscardable });
+
+  private onIndexingPolicyDirtyChange = (isIndexingPolicyDirty: boolean): void =>
+    this.setState({ isIndexingPolicyDirty: isIndexingPolicyDirty });
+
+  public getAnalyticalStorageTtl = (): number => {
+    if (this.isAnalyticalStorageEnabled) {
+      if (this.state.analyticalStorageTtlSelection === TtlType.On) {
+        return Number(this.state.analyticalStorageTtlSeconds);
+      } else {
+        return Constants.AnalyticalStorageTtl.Infinite;
+      }
+    }
+    return undefined;
+  };
+
+  public getUpdatedConflictResolutionPolicy = (): DataModels.ConflictResolutionPolicy => {
+    if (
+      !isDirty(this.state.conflictResolutionPolicyMode, this.state.conflictResolutionPolicyModeBaseline) &&
+      !isDirty(this.state.conflictResolutionPolicyPath, this.state.conflictResolutionPolicyPathBaseline) &&
+      !isDirty(this.state.conflictResolutionPolicyProcedure, this.state.conflictResolutionPolicyProcedureBaseline)
+    ) {
+      return undefined;
+    }
+
+    const policy: DataModels.ConflictResolutionPolicy = {
+      mode: parseConflictResolutionMode(this.state.conflictResolutionPolicyMode)
+    };
+
+    if (
+      policy.mode === DataModels.ConflictResolutionMode.Custom &&
+      this.state.conflictResolutionPolicyProcedure?.length > 0
+    ) {
+      policy.conflictResolutionProcedure = Constants.HashRoutePrefixes.sprocWithIds(
+        this.collection.databaseId,
+        this.collection.id(),
+        this.state.conflictResolutionPolicyProcedure,
+        false
+      );
+    }
+
+    if (policy.mode === DataModels.ConflictResolutionMode.LastWriterWins) {
+      policy.conflictResolutionPath = this.state.conflictResolutionPolicyPath;
+      if (policy.conflictResolutionPath?.startsWith("/")) {
+        policy.conflictResolutionPath = "/" + policy.conflictResolutionPath;
+      }
+    }
+
+    return policy;
+  };
+
+  public setBaseline = (): void => {
+    const defaultTtl = this.collection.defaultTtl();
+
+    let timeToLive: TtlType = this.state.timeToLive;
+    let timeToLiveSeconds = this.state.timeToLiveSeconds;
+    switch (defaultTtl) {
+      case undefined:
+      case 0:
+        timeToLive = TtlType.Off;
+        timeToLiveSeconds = SettingsComponent.sixMonthsInSeconds;
+        break;
+      case -1:
+        timeToLive = TtlType.OnNoDefault;
+        timeToLiveSeconds = SettingsComponent.sixMonthsInSeconds;
+        break;
+      default:
+        timeToLive = TtlType.On;
+        timeToLiveSeconds = defaultTtl;
+        break;
+    }
+
+    let analyticalStorageTtlSelection: TtlType;
+    let analyticalStorageTtlSeconds: number;
+    if (this.isAnalyticalStorageEnabled) {
+      const analyticalStorageTtl: number = this.collection.analyticalStorageTtl();
+      if (analyticalStorageTtl === Constants.AnalyticalStorageTtl.Infinite) {
+        analyticalStorageTtlSelection = TtlType.OnNoDefault;
+      } else {
+        analyticalStorageTtlSelection = TtlType.On;
+        analyticalStorageTtlSeconds = analyticalStorageTtl;
+      }
+    }
+
+    const offerThroughput = this.collection?.offer && this.collection.offer()?.content?.offerThroughput;
+    const changeFeedPolicy = this.collection.rawDataModel?.changeFeedPolicy
+      ? ChangeFeedPolicyState.On
+      : ChangeFeedPolicyState.Off;
+    const indexingPolicyContent = this.collection.indexingPolicy();
+    const conflictResolutionPolicy: DataModels.ConflictResolutionPolicy =
+      this.collection.conflictResolutionPolicy && this.collection.conflictResolutionPolicy();
+
+    const conflictResolutionPolicyMode = parseConflictResolutionMode(conflictResolutionPolicy?.mode);
+    const conflictResolutionPolicyPath = conflictResolutionPolicy?.conflictResolutionPath;
+    const conflictResolutionPolicyProcedure = parseConflictResolutionProcedure(
+      conflictResolutionPolicy?.conflictResolutionProcedure
+    );
+    const geospatialConfigTypeString: string =
+      (this.collection.geospatialConfig && this.collection.geospatialConfig()?.type) || GeospatialConfigType.Geometry;
+    const geoSpatialConfigType = GeospatialConfigType[geospatialConfigTypeString as keyof typeof GeospatialConfigType];
+
+    this.setState({
+      throughput: offerThroughput,
+      throughputBaseline: offerThroughput,
+      changeFeedPolicy: changeFeedPolicy,
+      changeFeedPolicyBaseline: changeFeedPolicy,
+      timeToLive: timeToLive,
+      timeToLiveBaseline: timeToLive,
+      timeToLiveSeconds: timeToLiveSeconds,
+      timeToLiveSecondsBaseline: timeToLiveSeconds,
+      analyticalStorageTtlSelection: analyticalStorageTtlSelection,
+      analyticalStorageTtlSelectionBaseline: analyticalStorageTtlSelection,
+      analyticalStorageTtlSeconds: analyticalStorageTtlSeconds,
+      analyticalStorageTtlSecondsBaseline: analyticalStorageTtlSeconds,
+      indexingPolicyContent: indexingPolicyContent,
+      indexingPolicyContentBaseline: indexingPolicyContent,
+      conflictResolutionPolicyMode: conflictResolutionPolicyMode,
+      conflictResolutionPolicyModeBaseline: conflictResolutionPolicyMode,
+      conflictResolutionPolicyPath: conflictResolutionPolicyPath,
+      conflictResolutionPolicyPathBaseline: conflictResolutionPolicyPath,
+      conflictResolutionPolicyProcedure: conflictResolutionPolicyProcedure,
+      conflictResolutionPolicyProcedureBaseline: conflictResolutionPolicyProcedure,
+      geospatialConfigType: geoSpatialConfigType,
+      geospatialConfigTypeBaseline: geoSpatialConfigType
+    });
+  };
+
+  private getTabsButtons = (): CommandButtonComponentProps[] => {
+    const buttons: CommandButtonComponentProps[] = [];
+    if (this.saveSettingsButton.isVisible()) {
+      const label = "Save";
+      buttons.push({
+        iconSrc: SaveIcon,
+        iconAlt: label,
+        onCommandClick: async () => await this.onSaveClick(),
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.saveSettingsButton.isEnabled()
+      });
+    }
+
+    if (this.discardSettingsChangesButton.isVisible()) {
+      const label = "Discard";
+      buttons.push({
+        iconSrc: DiscardIcon,
+        iconAlt: label,
+        onCommandClick: this.onRevertClick,
+        commandButtonLabel: label,
+        ariaLabel: label,
+        hasPopup: false,
+        disabled: !this.discardSettingsChangesButton.isEnabled()
+      });
+    }
+    return buttons;
+  };
+
+  private onMaxAutoPilotThroughputChange = (newThroughput: number): void =>
+    this.setState({ autoPilotThroughput: newThroughput });
+
+  private onThroughputChange = (newThroughput: number): void => this.setState({ throughput: newThroughput });
+
+  private onAutoPilotSelected = (isAutoPilotSelected: boolean): void =>
+    this.setState({ isAutoPilotSelected: isAutoPilotSelected });
+
+  private onPivotChange = (item: PivotItem): void => {
+    const selectedTab = SettingsV2TabTypes[item.props.itemKey as keyof typeof SettingsV2TabTypes];
+    this.setState({ selectedTab: selectedTab });
+  };
+
+  public render(): JSX.Element {
+    const scaleComponentProps: ScaleComponentProps = {
+      collection: this.collection,
+      container: this.container,
+      isFixedContainer: this.isFixedContainer,
+      autoPilotTiersList: this.autoPilotTiersList,
+      onThroughputChange: this.onThroughputChange,
+      throughput: this.state.throughput,
+      throughputBaseline: this.state.throughputBaseline,
+      autoPilotThroughput: this.state.autoPilotThroughput,
+      autoPilotThroughputBaseline: this.state.autoPilotThroughputBaseline,
+      isAutoPilotSelected: this.state.isAutoPilotSelected,
+      wasAutopilotOriginallySet: this.state.wasAutopilotOriginallySet,
+      onAutoPilotSelected: this.onAutoPilotSelected,
+      onMaxAutoPilotThroughputChange: this.onMaxAutoPilotThroughputChange,
+      onScaleSaveableChange: this.onScaleSaveableChange,
+      onScaleDiscardableChange: this.onScaleDiscardableChange,
+      initialNotification: this.props.settingsTab.pendingNotification()
+    };
+
+    const subSettingsComponentProps: SubSettingsComponentProps = {
+      collection: this.collection,
+      container: this.container,
+      isAnalyticalStorageEnabled: this.isAnalyticalStorageEnabled,
+      changeFeedPolicyVisible: this.changeFeedPolicyVisible,
+      timeToLive: this.state.timeToLive,
+      timeToLiveBaseline: this.state.timeToLiveBaseline,
+      onTtlChange: this.onTtlChange,
+      timeToLiveSeconds: this.state.timeToLiveSeconds,
+      timeToLiveSecondsBaseline: this.state.timeToLiveSecondsBaseline,
+      onTimeToLiveSecondsChange: this.onTimeToLiveSecondsChange,
+      geospatialConfigType: this.state.geospatialConfigType,
+      geospatialConfigTypeBaseline: this.state.geospatialConfigTypeBaseline,
+      onGeoSpatialConfigTypeChange: this.onGeoSpatialConfigTypeChange,
+      analyticalStorageTtlSelection: this.state.analyticalStorageTtlSelection,
+      analyticalStorageTtlSelectionBaseline: this.state.analyticalStorageTtlSelectionBaseline,
+      onAnalyticalStorageTtlSelectionChange: this.onAnalyticalStorageTtlSelectionChange,
+      analyticalStorageTtlSeconds: this.state.analyticalStorageTtlSeconds,
+      analyticalStorageTtlSecondsBaseline: this.state.analyticalStorageTtlSecondsBaseline,
+      onAnalyticalStorageTtlSecondsChange: this.onAnalyticalStorageTtlSecondsChange,
+      changeFeedPolicy: this.state.changeFeedPolicy,
+      changeFeedPolicyBaseline: this.state.changeFeedPolicyBaseline,
+      onChangeFeedPolicyChange: this.onChangeFeedPolicyChange,
+      onSubSettingsSaveableChange: this.onSubSettingsSaveableChange,
+      onSubSettingsDiscardableChange: this.onSubSettingsDiscardableChange
+    };
+
+    const indexingPolicyComponentProps: IndexingPolicyComponentProps = {
+      shouldDiscardIndexingPolicy: this.state.shouldDiscardIndexingPolicy,
+      resetShouldDiscardIndexingPolicy: this.resetShouldDiscardIndexingPolicy,
+      indexingPolicyContent: this.state.indexingPolicyContent,
+      indexingPolicyContentBaseline: this.state.indexingPolicyContentBaseline,
+      onIndexingPolicyElementFocusChange: this.onIndexingPolicyElementFocusChange,
+      onIndexingPolicyContentChange: this.onIndexingPolicyContentChange,
+      logIndexingPolicySuccessMessage: this.logIndexingPolicySuccessMessage,
+      onIndexingPolicyDirtyChange: this.onIndexingPolicyDirtyChange
+    };
+
+    const conflictResolutionPolicyComponentProps: ConflictResolutionComponentProps = {
+      collection: this.collection,
+      container: this.container,
+      conflictResolutionPolicyMode: this.state.conflictResolutionPolicyMode,
+      conflictResolutionPolicyModeBaseline: this.state.conflictResolutionPolicyModeBaseline,
+      onConflictResolutionPolicyModeChange: this.onConflictResolutionPolicyModeChange,
+      conflictResolutionPolicyPath: this.state.conflictResolutionPolicyPath,
+      conflictResolutionPolicyPathBaseline: this.state.conflictResolutionPolicyPathBaseline,
+      onConflictResolutionPolicyPathChange: this.onConflictResolutionPolicyPathChange,
+      conflictResolutionPolicyProcedure: this.state.conflictResolutionPolicyProcedure,
+      conflictResolutionPolicyProcedureBaseline: this.state.conflictResolutionPolicyProcedureBaseline,
+      onConflictResolutionPolicyProcedureChange: this.onConflictResolutionPolicyProcedureChange,
+      onConflictResolutionDirtyChange: this.onConflictResolutionDirtyChange
+    };
+
+    const tabs: SettingsV2TabInfo[] = [];
+    if (!hasDatabaseSharedThroughput(this.collection)) {
+      tabs.push({
+        tab: SettingsV2TabTypes.ScaleTab,
+        content: <ScaleComponent {...scaleComponentProps} />
+      });
+    }
+
+    tabs.push({
+      tab: SettingsV2TabTypes.SubSettingsTab,
+      content: <SubSettingsComponent {...subSettingsComponentProps} />
+    });
+
+    if (this.shouldShowIndexingPolicyEditor) {
+      tabs.push({
+        tab: SettingsV2TabTypes.IndexingPolicyTab,
+        content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />
+      });
+    }
+
+    if (this.hasConflictResolution()) {
+      tabs.push({
+        tab: SettingsV2TabTypes.ConflictResolutionTab,
+        content: <ConflictResolutionComponent {...conflictResolutionPolicyComponentProps} />
+      });
+    }
+
+    const pivotProps: IPivotProps = {
+      onLinkClick: this.onPivotChange,
+      selectedKey: SettingsV2TabTypes[this.state.selectedTab]
+    };
+
+    const pivotItems = tabs.map(tab => {
+      const pivotItemProps: IPivotItemProps = {
+        itemKey: SettingsV2TabTypes[tab.tab],
+        style: { marginTop: 20 },
+        headerText: getTabTitle(tab.tab)
+      };
+
+      return (
+        <PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
+          {tab.content}
+        </PivotItem>
+      );
+    });
+
+    return (
+      <div className="settingsV2MainContainer">
+        {this.shouldShowKeyspaceSharedThroughputMessage() && (
+          <div>This table shared throughput is configured at the keyspace</div>
+        )}
+
+        <div className="settingsV2TabsContainer">
+          <Pivot {...pivotProps}>{pivotItems}</Pivot>
+        </div>
+      </div>
+    );
+  }
+}

src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx

@@ -0,0 +1,20 @@
+import ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import { SettingsComponent, SettingsComponentProps } from "./SettingsComponent";
+
+export class SettingsComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor(private props: SettingsComponentProps) {
+    this.parameters = ko.observable<number>(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    return <SettingsComponent {...this.props} />;
+  }
+
+  public triggerRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}

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

@@ -0,0 +1,58 @@
+import { shallow } from "enzyme";
+import React from "react";
+import {
+  getAutoPilotV3SpendElement,
+  getEstimatedSpendElement,
+  getEstimatedAutoscaleSpendElement,
+  manualToAutoscaleDisclaimerElement,
+  ttlWarning,
+  indexingPolicyTTLWarningMessage,
+  updateThroughputBeyondLimitWarningMessage,
+  updateThroughputDelayedApplyWarningMessage,
+  getThroughputApplyDelayedMessage,
+  getThroughputApplyShortDelayMessage,
+  getThroughputApplyLongDelayMessage,
+  getToolTipContainer,
+  conflictResolutionCustomToolTip,
+  changeFeedPolicyToolTip,
+  conflictResolutionLwwTooltip
+} from "./SettingsRenderUtils";
+
+class SettingsRenderUtilsTestComponent extends React.Component {
+  public render(): JSX.Element {
+    return (
+      <>
+        {getAutoPilotV3SpendElement(1000, false)}
+        {getAutoPilotV3SpendElement(undefined, false)}
+        {getAutoPilotV3SpendElement(1000, true)}
+        {getAutoPilotV3SpendElement(undefined, true)}
+
+        {getEstimatedSpendElement(1000, "mooncake", 2, false, true)}
+
+        {getEstimatedAutoscaleSpendElement(1000, "mooncake", 2, false)}
+
+        {manualToAutoscaleDisclaimerElement}
+        {ttlWarning}
+        {indexingPolicyTTLWarningMessage}
+        {updateThroughputBeyondLimitWarningMessage}
+        {updateThroughputDelayedApplyWarningMessage}
+
+        {getThroughputApplyDelayedMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}
+        {getThroughputApplyShortDelayMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}
+        {getThroughputApplyLongDelayMessage(false, 1000, "RU/s", "sampleDb", "sampleCollection", 2000)}
+
+        {getToolTipContainer(<span>Sample Text</span>)}
+        {conflictResolutionLwwTooltip}
+        {conflictResolutionCustomToolTip}
+        {changeFeedPolicyToolTip}
+      </>
+    );
+  }
+}
+
+describe("SettingsUtils functions", () => {
+  it("render", () => {
+    const wrapper = shallow(<SettingsRenderUtilsTestComponent />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -0,0 +1,349 @@
+import * as React from "react";
+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
+} from "../../../Utils/PricingUtils";
+import {
+  ITextFieldStyles,
+  ICheckboxStyles,
+  IStackProps,
+  IStackTokens,
+  IChoiceGroupStyles,
+  Link,
+  Text,
+  IMessageBarStyles,
+  ITextStyles
+} from "office-ui-fabric-react";
+import { isDirtyTypes, isDirty } from "./SettingsUtils";
+
+const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
+
+export const spendAckCheckBoxStyle: ICheckboxStyles = {
+  label: {
+    margin: 0,
+    padding: "2 0 2 0"
+  },
+  text: {
+    fontSize: 12
+  }
+};
+
+export const subComponentStackProps: Partial<IStackProps> = {
+  tokens: { childrenGap: 20 }
+};
+
+export const titleAndInputStackProps: Partial<IStackProps> = {
+  tokens: { childrenGap: 5 }
+};
+
+export const checkBoxAndInputStackProps: Partial<IStackProps> = {
+  tokens: { childrenGap: 10 }
+};
+
+export const toolTipLabelStackTokens: IStackTokens = {
+  childrenGap: 6
+};
+
+export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop: "5px" } };
+
+export const throughputUnit = "RU/s";
+
+export const getAutoPilotV3SpendElement = (
+  maxAutoPilotThroughputSet: number,
+  isDatabaseThroughput: boolean,
+  requestUnitsUsageCostElement?: JSX.Element
+): JSX.Element => {
+  if (!maxAutoPilotThroughputSet) {
+    return <></>;
+  }
+
+  const resource: string = isDatabaseThroughput ? "database" : "container";
+  return (
+    <>
+      <Text>
+        Your {resource} throughput will automatically scale from{" "}
+        <b>
+          {AutoPilotUtils.getMinRUsBasedOnUserInput(maxAutoPilotThroughputSet)} RU/s (10% of max RU/s) -{" "}
+          {maxAutoPilotThroughputSet} RU/s
+        </b>{" "}
+        based on usage.
+        <br />
+      </Text>
+      {requestUnitsUsageCostElement}
+      <Text>
+        After the first {AutoPilotUtils.getStorageBasedOnUserInput(maxAutoPilotThroughputSet)} GB of data stored, the
+        max RU/s will be automatically upgraded based on the new storage value.
+        <Link href={AutopilotDocumentation.Url} target="_blank">
+          {" "}
+          Learn more
+        </Link>
+        .
+      </Text>
+    </>
+  );
+};
+
+export const getEstimatedAutoscaleSpendElement = (
+  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>
+  );
+};
+
+export const getEstimatedSpendElement = (
+  throughput: number,
+  serverId: string,
+  regions: number,
+  multimaster: boolean,
+  rupmEnabled: 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);
+
+  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>
+  );
+};
+
+export const manualToAutoscaleDisclaimerElement: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle} id="manualToAutoscaleDisclaimerElement">
+    The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings
+    and storage of your resource. After autoscale has been enabled, you can change the max RU/s.{" "}
+    <a href={Urls.autoscaleMigration}>Learn more</a>
+  </Text>
+);
+
+export const ttlWarning: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    The system will automatically delete items based on the TTL value (in seconds) you provide, without needing a delete
+    operation explicitly issued by a client application. For more information see,{" "}
+    <Link target="_blank" href="https://aka.ms/cosmos-db-ttl">
+      Time to Live (TTL) in Azure Cosmos DB
+    </Link>
+    .
+  </Text>
+);
+
+export const indexingPolicyTTLWarningMessage: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    Changing the Indexing Policy impacts query results while the index transformation occurs. When a change is made and
+    the indexing mode is set to consistent or lazy, queries return eventual results until the operation completes. For
+    more information see,{" "}
+    <Link target="_blank" href="https://aka.ms/cosmosdb/modify-index-policy">
+      Modifying Indexing Policies
+    </Link>
+    .
+  </Text>
+);
+
+export const updateThroughputBeyondLimitWarningMessage: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle} id="updateThroughputBeyondLimitWarningMessage">
+    You are about to request an increase in throughput beyond the pre-allocated capacity. The service will scale out and
+    increase throughput for the selected container. This operation will take 1-3 business days to complete. You can
+    track the status of this request in Notifications.
+  </Text>
+);
+
+export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
+    You are about to request an increase in throughput beyond the pre-allocated capacity. This operation will take some
+    time to complete.
+  </Text>
+);
+
+const getCurrentThroughput = (
+  isAutoscale: boolean,
+  throughput: number,
+  throughputUnit: string,
+  targetThroughput?: number
+): string => {
+  if (targetThroughput) {
+    if (throughput) {
+      return isAutoscale
+        ? `, Current autoscale throughput: ${Math.round(
+            throughput / 10
+          )} - ${throughput} ${throughputUnit}, Target autoscale throughput: ${Math.round(
+            targetThroughput / 10
+          )} - ${targetThroughput} ${throughputUnit}`
+        : `, Current manual throughput: ${throughput} ${throughputUnit}, Target manual throughput: ${targetThroughput}`;
+    } else {
+      return isAutoscale
+        ? `, Target autoscale throughput: ${Math.round(targetThroughput / 10)} - ${targetThroughput} ${throughputUnit}`
+        : `, Target manual throughput: ${targetThroughput} ${throughputUnit}`;
+    }
+  }
+
+  if (!targetThroughput && throughput) {
+    return isAutoscale
+      ? `, Current autoscale throughput: ${Math.round(throughput / 10)} - ${throughput} ${throughputUnit}`
+      : `, Current manual throughput: ${throughput} ${throughputUnit}`;
+  }
+
+  return "";
+};
+
+export const getThroughputApplyDelayedMessage = (
+  isAutoscale: boolean,
+  throughput: number,
+  throughputUnit: string,
+  databaseName: string,
+  collectionName: string,
+  requestedThroughput: number
+): JSX.Element => (
+  <Text styles={infoAndToolTipTextStyle}>
+    The request to increase the throughput has successfully been submitted. This operation will take 1-3 business days
+    to complete. View the latest status in Notifications.
+    <br />
+    Database: {databaseName}, Container: {collectionName}{" "}
+    {getCurrentThroughput(isAutoscale, throughput, throughputUnit, requestedThroughput)}
+  </Text>
+);
+
+export const getThroughputApplyShortDelayMessage = (
+  isAutoscale: boolean,
+  throughput: number,
+  throughputUnit: string,
+  databaseName: string,
+  collectionName: string,
+  targetThroughput: number
+): JSX.Element => (
+  <Text styles={infoAndToolTipTextStyle} id="throughputApplyShortDelayMessage">
+    A request to increase the throughput is currently in progress. This operation will take some time to complete.
+    <br />
+    Database: {databaseName}, Container: {collectionName}{" "}
+    {getCurrentThroughput(isAutoscale, throughput, throughputUnit, targetThroughput)}
+  </Text>
+);
+
+export const getThroughputApplyLongDelayMessage = (
+  isAutoscale: boolean,
+  throughput: number,
+  throughputUnit: string,
+  databaseName: string,
+  collectionName: string,
+  requestedThroughput: number
+): JSX.Element => (
+  <Text styles={infoAndToolTipTextStyle} id="throughputApplyLongDelayMessage">
+    A request to increase the throughput is currently in progress. This operation will take 1-3 business days to
+    complete. View the latest status in Notifications.
+    <br />
+    Database: {databaseName}, Container: {collectionName}{" "}
+    {getCurrentThroughput(isAutoscale, throughput, throughputUnit, requestedThroughput)}
+  </Text>
+);
+
+export const getToolTipContainer = (content: string | JSX.Element): JSX.Element =>
+  content ? <Text styles={infoAndToolTipTextStyle}>{content}</Text> : undefined;
+
+export const conflictResolutionLwwTooltip: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    Gets or sets the name of a integer property in your documents which is used for the Last Write Wins (LWW) based
+    conflict resolution scheme. By default, the system uses the system defined timestamp property, _ts to decide the
+    winner for the conflicting versions of the document. Specify your own integer property if you want to override the
+    default timestamp based conflict resolution.
+  </Text>
+);
+
+export const conflictResolutionCustomToolTip: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    Gets or sets the name of a stored procedure (aka merge procedure) for resolving the conflicts. You can write
+    application defined logic to determine the winner of the conflicting versions of a document. The stored procedure
+    will get executed transactionally, exactly once, on the server side. If you do not provide a stored procedure, the
+    conflicts will be populated in the
+    <Link className="linkDarkBackground" href="https://aka.ms/dataexplorerconflics" target="_blank">
+      {` conflicts feed`}
+    </Link>
+    . You can update/re-register the stored procedure at any time.
+  </Text>
+);
+
+export const changeFeedPolicyToolTip: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    Enable change feed log retention policy to retain last 10 minutes of history for items in the container by default.
+    To support this, the request unit (RU) charge for this container will be multiplied by a factor of two for writes.
+    Reads are unaffected.
+  </Text>
+);
+
+export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes): Partial<ITextFieldStyles> => ({
+  fieldGroup: {
+    height: 25,
+    width: 300,
+    borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
+    selectors: {
+      ":disabled": {
+        backgroundColor: StyleConstants.BaseMedium,
+        borderColor: StyleConstants.BaseMediumHigh
+      }
+    }
+  }
+});
+
+export const getChoiceGroupStyles = (current: isDirtyTypes, baseline: isDirtyTypes): Partial<IChoiceGroupStyles> => ({
+  flexContainer: [
+    {
+      selectors: {
+        ".ms-ChoiceField-field.is-checked::before": {
+          borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : ""
+        },
+        ".ms-ChoiceField-field.is-checked::after": {
+          borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : ""
+        },
+        ".ms-ChoiceField-wrapper label": {
+          whiteSpace: "nowrap",
+          fontSize: 14,
+          fontFamily: StyleConstants.DataExplorerFont,
+          padding: "2px 5px"
+        }
+      }
+    }
+  ]
+});

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

@@ -0,0 +1,54 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { ConflictResolutionComponentProps, ConflictResolutionComponent } from "./ConflictResolutionComponent";
+import { container, collection } from "../TestUtils";
+import * as DataModels from "../../../../Contracts/DataModels";
+
+describe("ConflictResolutionComponent", () => {
+  const baseProps: ConflictResolutionComponentProps = {
+    collection: collection,
+    container: container,
+    conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.Custom,
+    conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode.Custom,
+    onConflictResolutionPolicyModeChange: () => {
+      return;
+    },
+    conflictResolutionPolicyPath: "",
+    conflictResolutionPolicyPathBaseline: "",
+    onConflictResolutionPolicyPathChange: () => {
+      return;
+    },
+    conflictResolutionPolicyProcedure: "",
+    conflictResolutionPolicyProcedureBaseline: "",
+    onConflictResolutionPolicyProcedureChange: () => {
+      return;
+    },
+    onConflictResolutionDirtyChange: () => {
+      return;
+    }
+  };
+
+  it("Sproc text field displayed", () => {
+    const wrapper = shallow(<ConflictResolutionComponent {...baseProps} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#conflictResolutionCustomTextField")).toEqual(true);
+    expect(wrapper.exists("#conflictResolutionLwwTextField")).toEqual(false);
+  });
+
+  it("Path text field displayed", () => {
+    const props = { ...baseProps, conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.LastWriterWins };
+    const wrapper = shallow(<ConflictResolutionComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#conflictResolutionCustomTextField")).toEqual(false);
+    expect(wrapper.exists("#conflictResolutionLwwTextField")).toEqual(true);
+  });
+
+  it("conflict resolution policy dirty is set", () => {
+    let conflictRsolutionComponent = new ConflictResolutionComponent(baseProps);
+    expect(conflictRsolutionComponent.IsComponentDirty()).toEqual(false);
+
+    const newProps = { ...baseProps, conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.LastWriterWins };
+    conflictRsolutionComponent = new ConflictResolutionComponent(newProps);
+    expect(conflictRsolutionComponent.IsComponentDirty()).toEqual(true);
+  });
+});

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

@@ -0,0 +1,142 @@
+import * as React from "react";
+import * as ViewModels from "../../../../Contracts/ViewModels";
+import * as DataModels from "../../../../Contracts/DataModels";
+import Explorer from "../../../Explorer";
+import {
+  getTextFieldStyles,
+  conflictResolutionLwwTooltip,
+  conflictResolutionCustomToolTip,
+  subComponentStackProps,
+  getChoiceGroupStyles
+} from "../SettingsRenderUtils";
+import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "office-ui-fabric-react";
+import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
+import { isDirty } from "../SettingsUtils";
+
+export interface ConflictResolutionComponentProps {
+  collection: ViewModels.Collection;
+  container: Explorer;
+  conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
+  conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
+  onConflictResolutionPolicyModeChange: (
+    event?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ) => void;
+  conflictResolutionPolicyPath: string;
+  conflictResolutionPolicyPathBaseline: string;
+
+  onConflictResolutionPolicyPathChange: (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ) => void;
+  conflictResolutionPolicyProcedure: string;
+  conflictResolutionPolicyProcedureBaseline: string;
+
+  onConflictResolutionPolicyProcedureChange: (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ) => void;
+  onConflictResolutionDirtyChange: (isConflictResolutionDirty: boolean) => void;
+}
+
+export class ConflictResolutionComponent extends React.Component<ConflictResolutionComponentProps> {
+  private shouldCheckComponentIsDirty = true;
+  private conflictResolutionChoiceGroupOptions: IChoiceGroupOption[] = [
+    {
+      key: DataModels.ConflictResolutionMode.LastWriterWins,
+      text: "Last Write Wins (default)"
+    },
+    { key: DataModels.ConflictResolutionMode.Custom, text: "Merge Procedure (custom)" }
+  ];
+
+  componentDidMount(): void {
+    this.onComponentUpdate();
+  }
+
+  componentDidUpdate(): void {
+    this.onComponentUpdate();
+  }
+
+  private onComponentUpdate = (): void => {
+    if (!this.shouldCheckComponentIsDirty) {
+      this.shouldCheckComponentIsDirty = true;
+      return;
+    }
+    this.props.onConflictResolutionDirtyChange(this.IsComponentDirty());
+    this.shouldCheckComponentIsDirty = false;
+  };
+
+  public IsComponentDirty = (): boolean => {
+    if (
+      isDirty(this.props.conflictResolutionPolicyMode, this.props.conflictResolutionPolicyModeBaseline) ||
+      isDirty(this.props.conflictResolutionPolicyPath, this.props.conflictResolutionPolicyPathBaseline) ||
+      isDirty(this.props.conflictResolutionPolicyProcedure, this.props.conflictResolutionPolicyProcedureBaseline)
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  private getConflictResolutionModeComponent = (): JSX.Element => (
+    <ChoiceGroup
+      label="Mode"
+      selectedKey={this.props.conflictResolutionPolicyMode}
+      options={this.conflictResolutionChoiceGroupOptions}
+      onChange={this.props.onConflictResolutionPolicyModeChange}
+      styles={getChoiceGroupStyles(
+        this.props.conflictResolutionPolicyMode,
+        this.props.conflictResolutionPolicyModeBaseline
+      )}
+    />
+  );
+
+  private onRenderLwwComponentTextField = (props: ITextFieldProps) => (
+    <ToolTipLabelComponent label={props.label} toolTipElement={conflictResolutionLwwTooltip} />
+  );
+
+  private getConflictResolutionLWWComponent = (): JSX.Element => (
+    <TextField
+      id="conflictResolutionLwwTextField"
+      label={"Conflict Resolver Property"}
+      onRenderLabel={this.onRenderLwwComponentTextField}
+      styles={getTextFieldStyles(
+        this.props.conflictResolutionPolicyPath,
+        this.props.conflictResolutionPolicyPathBaseline
+      )}
+      value={this.props.conflictResolutionPolicyPath}
+      onChange={this.props.onConflictResolutionPolicyPathChange}
+    />
+  );
+
+  private onRenderCustomComponentTextField = (props: ITextFieldProps) => (
+    <ToolTipLabelComponent label={props.label} toolTipElement={conflictResolutionCustomToolTip} />
+  );
+
+  private getConflictResolutionCustomComponent = (): JSX.Element => (
+    <TextField
+      id="conflictResolutionCustomTextField"
+      label="Stored procedure"
+      onRenderLabel={this.onRenderCustomComponentTextField}
+      styles={getTextFieldStyles(
+        this.props.conflictResolutionPolicyProcedure,
+        this.props.conflictResolutionPolicyProcedureBaseline
+      )}
+      value={this.props.conflictResolutionPolicyProcedure}
+      onChange={this.props.onConflictResolutionPolicyProcedureChange}
+    />
+  );
+
+  public render(): JSX.Element {
+    return (
+      <Stack {...subComponentStackProps}>
+        {this.getConflictResolutionModeComponent()}
+
+        {this.props.conflictResolutionPolicyMode === DataModels.ConflictResolutionMode.LastWriterWins &&
+          this.getConflictResolutionLWWComponent()}
+
+        {this.props.conflictResolutionPolicyMode === DataModels.ConflictResolutionMode.Custom &&
+          this.getConflictResolutionCustomComponent()}
+      </Stack>
+    );
+  }
+}

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

@@ -0,0 +1,59 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./IndexingPolicyComponent";
+import * as DataModels from "../../../../Contracts/DataModels";
+
+describe("IndexingPolicyComponent", () => {
+  const initialIndexingPolicyContent: DataModels.IndexingPolicy = {
+    automatic: false,
+    indexingMode: "",
+    includedPaths: [],
+    excludedPaths: []
+  };
+  const baseProps: IndexingPolicyComponentProps = {
+    shouldDiscardIndexingPolicy: false,
+    resetShouldDiscardIndexingPolicy: () => {
+      return;
+    },
+    indexingPolicyContent: initialIndexingPolicyContent,
+    indexingPolicyContentBaseline: initialIndexingPolicyContent,
+    onIndexingPolicyElementFocusChange: () => {
+      return;
+    },
+    onIndexingPolicyContentChange: () => {
+      return;
+    },
+    logIndexingPolicySuccessMessage: () => {
+      return;
+    },
+    onIndexingPolicyDirtyChange: () => {
+      return;
+    }
+  };
+
+  it("renders", () => {
+    const wrapper = shallow(<IndexingPolicyComponent {...baseProps} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("indexing policy is reset", () => {
+    const wrapper = shallow(<IndexingPolicyComponent {...baseProps} />);
+
+    const indexingPolicyComponentInstance = wrapper.instance() as IndexingPolicyComponent;
+    const resetIndexingPolicyEditorMockFn = jest.fn();
+    indexingPolicyComponentInstance.resetIndexingPolicyEditor = resetIndexingPolicyEditorMockFn;
+
+    wrapper.setProps({ shouldDiscardIndexingPolicy: true });
+    wrapper.update();
+    expect(resetIndexingPolicyEditorMockFn.mock.calls.length).toEqual(1);
+  });
+
+  it("conflict resolution policy dirty is set", () => {
+    let indexingPolicyComponent = new IndexingPolicyComponent(baseProps);
+    expect(indexingPolicyComponent.IsComponentDirty()).toEqual(false);
+
+    const newProps = { ...baseProps, indexingPolicyContent: undefined as DataModels.IndexingPolicy };
+    indexingPolicyComponent = new IndexingPolicyComponent(newProps);
+    expect(indexingPolicyComponent.IsComponentDirty()).toEqual(true);
+  });
+});

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

@@ -0,0 +1,121 @@
+import * as React from "react";
+import * as DataModels from "../../../../Contracts/DataModels";
+import * as monaco from "monaco-editor";
+import { isDirty } from "../SettingsUtils";
+import { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
+import { indexingPolicyTTLWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
+
+export interface IndexingPolicyComponentProps {
+  shouldDiscardIndexingPolicy: boolean;
+  resetShouldDiscardIndexingPolicy: () => void;
+  indexingPolicyContent: DataModels.IndexingPolicy;
+  indexingPolicyContentBaseline: DataModels.IndexingPolicy;
+  onIndexingPolicyElementFocusChange: (indexingPolicyContentFocussed: boolean) => void;
+  onIndexingPolicyContentChange: (newIndexingPolicy: DataModels.IndexingPolicy) => void;
+  logIndexingPolicySuccessMessage: () => void;
+  onIndexingPolicyDirtyChange: (isIndexingPolicyDirty: boolean) => void;
+}
+
+interface IndexingPolicyComponentState {
+  indexingPolicyContentIsValid: boolean;
+}
+
+export class IndexingPolicyComponent extends React.Component<
+  IndexingPolicyComponentProps,
+  IndexingPolicyComponentState
+> {
+  private shouldCheckComponentIsDirty = true;
+  private indexingPolicyDiv = React.createRef<HTMLDivElement>();
+  private indexingPolicyEditor: monaco.editor.IStandaloneCodeEditor;
+
+  constructor(props: IndexingPolicyComponentProps) {
+    super(props);
+    this.state = {
+      indexingPolicyContentIsValid: true
+    };
+  }
+
+  componentDidUpdate(): void {
+    if (this.props.shouldDiscardIndexingPolicy) {
+      this.resetIndexingPolicyEditor();
+      this.props.resetShouldDiscardIndexingPolicy();
+    }
+    this.onComponentUpdate();
+  }
+
+  componentDidMount(): void {
+    this.resetIndexingPolicyEditor();
+    this.onComponentUpdate();
+  }
+
+  public resetIndexingPolicyEditor = (): void => {
+    if (!this.indexingPolicyEditor) {
+      this.createIndexingPolicyEditor();
+    } else {
+      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+      const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+      indexingPolicyEditorModel.setValue(value);
+    }
+    this.onComponentUpdate();
+  };
+
+  private onComponentUpdate = (): void => {
+    if (!this.shouldCheckComponentIsDirty) {
+      this.shouldCheckComponentIsDirty = true;
+      return;
+    }
+    this.props.onIndexingPolicyDirtyChange(this.IsComponentDirty());
+    this.shouldCheckComponentIsDirty = false;
+  };
+
+  public IsComponentDirty = (): boolean => {
+    if (
+      isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) &&
+      this.state.indexingPolicyContentIsValid
+    ) {
+      return true;
+    }
+
+    return false;
+  };
+
+  private createIndexingPolicyEditor = (): void => {
+    const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
+
+    this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+      value: value,
+      language: "json",
+      readOnly: false,
+      ariaLabel: "Indexing Policy"
+    });
+    if (this.indexingPolicyEditor) {
+      this.indexingPolicyEditor.onDidFocusEditorText(() => this.props.onIndexingPolicyElementFocusChange(true));
+      this.indexingPolicyEditor.onDidBlurEditorText(() => this.props.onIndexingPolicyElementFocusChange(false));
+      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+      indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
+      this.props.logIndexingPolicySuccessMessage();
+    }
+  };
+
+  private onEditorContentChange = (): void => {
+    const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+    try {
+      const newIndexingPolicyContent = JSON.parse(indexingPolicyEditorModel.getValue()) as DataModels.IndexingPolicy;
+      this.props.onIndexingPolicyContentChange(newIndexingPolicyContent);
+      this.setState({ indexingPolicyContentIsValid: true });
+    } catch (e) {
+      this.setState({ indexingPolicyContentIsValid: false });
+    }
+  };
+
+  public render(): JSX.Element {
+    return (
+      <Stack {...titleAndInputStackProps}>
+        {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
+          <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicyTTLWarningMessage}</MessageBar>
+        )}
+        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
+      </Stack>
+    );
+  }
+}

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

@@ -0,0 +1,160 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
+import { container, collection } from "../TestUtils";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
+import Explorer from "../../../Explorer";
+import * as Constants from "../../../../Common/Constants";
+import { PlatformType } from "../../../../PlatformType";
+import * as DataModels from "../../../../Contracts/DataModels";
+import { throughputUnit } from "../SettingsRenderUtils";
+import * as SharedConstants from "../../../../Shared/Constants";
+import ko from "knockout";
+
+describe("ScaleComponent", () => {
+  const nonNationalCloudContainer = new Explorer({
+    notificationsClient: undefined,
+    isEmulator: false
+  });
+  nonNationalCloudContainer.getPlatformType = () => PlatformType.Portal;
+  nonNationalCloudContainer.isRunningOnNationalCloud = () => false;
+
+  const targetThroughput = 6000;
+
+  const baseProps: ScaleComponentProps = {
+    collection: collection,
+    container: container,
+    isFixedContainer: false,
+    autoPilotTiersList: [],
+    onThroughputChange: () => {
+      return;
+    },
+    throughput: 1000,
+    throughputBaseline: 1000,
+    autoPilotThroughput: 4000,
+    autoPilotThroughputBaseline: 4000,
+    isAutoPilotSelected: false,
+    wasAutopilotOriginallySet: true,
+    onAutoPilotSelected: () => false,
+    onMaxAutoPilotThroughputChange: () => {
+      return;
+    },
+    onScaleSaveableChange: () => {
+      return;
+    },
+    onScaleDiscardableChange: () => {
+      return;
+    },
+    initialNotification: {
+      description: `Throughput update for ${targetThroughput} ${throughputUnit}`
+    } as DataModels.Notification
+  };
+
+  it("renders with correct intiial notification", () => {
+    let wrapper = shallow(<ScaleComponent {...baseProps} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists(ThroughputInputAutoPilotV3Component)).toEqual(true);
+    expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(true);
+    expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(false);
+    expect(wrapper.find("#throughputApplyLongDelayMessage").html()).toContain(targetThroughput);
+
+    const newCollection = { ...collection };
+    const maxThroughput = 5000;
+    const targetMaxThroughput = 50000;
+    newCollection.offer = ko.observable({
+      content: {
+        offerAutopilotSettings: {
+          maxThroughput: maxThroughput,
+          targetMaxThroughput: targetMaxThroughput
+        }
+      },
+      headers: { "x-ms-offer-replace-pending": true }
+    } as DataModels.OfferWithHeaders);
+    const newProps = {
+      ...baseProps,
+      initialNotification: undefined as DataModels.Notification,
+      collection: newCollection
+    };
+    wrapper = shallow(<ScaleComponent {...newProps} />);
+    expect(wrapper.exists("#throughputApplyShortDelayMessage")).toEqual(true);
+    expect(wrapper.exists("#throughputApplyLongDelayMessage")).toEqual(false);
+    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(maxThroughput);
+    expect(wrapper.find("#throughputApplyShortDelayMessage").html()).toContain(targetMaxThroughput);
+  });
+
+  it("autoScale disabled", () => {
+    const scaleComponent = new ScaleComponent(baseProps);
+    expect(scaleComponent.isAutoScaleEnabled()).toEqual(false);
+  });
+
+  it("autoScale enabled", () => {
+    const newContainer = new Explorer({
+      notificationsClient: undefined,
+      isEmulator: false
+    });
+
+    newContainer.databaseAccount({
+      id: undefined,
+      name: undefined,
+      location: undefined,
+      type: undefined,
+      kind: "documentdb",
+      tags: undefined,
+      properties: {
+        documentEndpoint: undefined,
+        tableEndpoint: undefined,
+        gremlinEndpoint: undefined,
+        cassandraEndpoint: undefined,
+        capabilities: [
+          {
+            name: Constants.CapabilityNames.EnableAutoScale.toLowerCase(),
+            description: undefined
+          }
+        ]
+      }
+    });
+    const props = { ...baseProps, container: newContainer };
+    const scaleComponent = new ScaleComponent(props);
+    expect(scaleComponent.isAutoScaleEnabled()).toEqual(true);
+  });
+
+  it("getMaxRUThroughputInputLimit", () => {
+    const scaleComponent = new ScaleComponent(baseProps);
+    expect(scaleComponent.getMaxRUThroughputInputLimit()).toEqual(40000);
+  });
+
+  it("getThroughputTitle", () => {
+    let scaleComponent = new ScaleComponent(baseProps);
+    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - 40,000 RU/s)");
+
+    let newProps = { ...baseProps, container: nonNationalCloudContainer };
+    scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");
+
+    newProps = { ...baseProps, isAutoPilotSelected: true };
+    scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (autoscale)");
+  });
+
+  it("canThroughputExceedMaximumValue", () => {
+    let scaleComponent = new ScaleComponent(baseProps);
+    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(false);
+
+    const newProps = { ...baseProps, container: nonNationalCloudContainer };
+    scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
+  });
+
+  it("getThroughputWarningMessage", () => {
+    const throughputBeyondLimit = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million + 1000;
+    const throughputBeyondMaxRus = SharedConstants.CollectionCreation.DefaultCollectionRUs1Million - 1000;
+
+    const newProps = { ...baseProps, container: nonNationalCloudContainer, throughput: throughputBeyondLimit };
+    let scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputBeyondLimitWarningMessage");
+
+    newProps.throughput = throughputBeyondMaxRus;
+    scaleComponent = new ScaleComponent(newProps);
+    expect(scaleComponent.getThroughputWarningMessage().props.id).toEqual("updateThroughputDelayedApplyWarningMessage");
+  });
+});

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

@@ -0,0 +1,235 @@
+import * as React from "react";
+import * as Constants from "../../../../Common/Constants";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
+import * as ViewModels from "../../../../Contracts/ViewModels";
+import * as DataModels from "../../../../Contracts/DataModels";
+import * as SharedConstants from "../../../../Shared/Constants";
+import Explorer from "../../../Explorer";
+import { PlatformType } from "../../../../PlatformType";
+import {
+  getTextFieldStyles,
+  subComponentStackProps,
+  titleAndInputStackProps,
+  throughputUnit,
+  getThroughputApplyLongDelayMessage,
+  getThroughputApplyShortDelayMessage,
+  updateThroughputBeyondLimitWarningMessage,
+  updateThroughputDelayedApplyWarningMessage
+} from "../SettingsRenderUtils";
+import { getMaxRUs, getMinRUs, hasDatabaseSharedThroughput } from "../SettingsUtils";
+import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
+import { Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+
+export interface ScaleComponentProps {
+  collection: ViewModels.Collection;
+  container: Explorer;
+  isFixedContainer: boolean;
+  autoPilotTiersList: ViewModels.DropdownOption<DataModels.AutopilotTier>[];
+  onThroughputChange: (newThroughput: number) => void;
+  throughput: number;
+  throughputBaseline: number;
+  autoPilotThroughput: number;
+  autoPilotThroughputBaseline: number;
+  isAutoPilotSelected: boolean;
+  wasAutopilotOriginallySet: boolean;
+  onAutoPilotSelected: (isAutoPilotSelected: boolean) => void;
+  onMaxAutoPilotThroughputChange: (newThroughput: number) => void;
+  onScaleSaveableChange: (isScaleSaveable: boolean) => void;
+  onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
+  initialNotification: DataModels.Notification;
+}
+
+export class ScaleComponent extends React.Component<ScaleComponentProps> {
+  private isEmulator: boolean;
+  constructor(props: ScaleComponentProps) {
+    super(props);
+    this.isEmulator = this.props.container.isEmulator;
+  }
+
+  public isAutoScaleEnabled = (): boolean => {
+    const accountCapabilities: DataModels.Capability[] = this.props.container?.databaseAccount()?.properties
+      ?.capabilities;
+    const enableAutoScaleCapability =
+      accountCapabilities &&
+      accountCapabilities.find((capability: DataModels.Capability) => {
+        return (
+          capability &&
+          capability.name &&
+          capability.name.toLowerCase() === Constants.CapabilityNames.EnableAutoScale.toLowerCase()
+        );
+      });
+
+    return !!enableAutoScaleCapability;
+  };
+
+  private getStorageCapacityTitle = (): JSX.Element => {
+    // Mongo container with system partition key still treat as "Fixed"
+    const isFixed =
+      !this.props.collection.partitionKey ||
+      (this.props.container.isPreferredApiMongoDB() && this.props.collection.partitionKey.systemKey);
+    const capacity: string = isFixed ? "Fixed" : "Unlimited";
+    return (
+      <Stack {...titleAndInputStackProps}>
+        <Label>Storage capacity</Label>
+        <Text>{capacity}</Text>
+      </Stack>
+    );
+  };
+
+  public getMaxRUThroughputInputLimit = (): number => {
+    if (this.props.container?.getPlatformType() === PlatformType.Hosted && this.props.collection.partitionKey) {
+      return SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
+    }
+
+    return getMaxRUs(this.props.collection, this.props.container);
+  };
+
+  public getThroughputTitle = (): string => {
+    if (this.props.isAutoPilotSelected) {
+      return AutoPilotUtils.getAutoPilotHeaderText(false);
+    }
+
+    const minThroughput: string = getMinRUs(this.props.collection, this.props.container).toLocaleString();
+    const maxThroughput: string =
+      this.canThroughputExceedMaximumValue() && !this.props.isFixedContainer
+        ? "unlimited"
+        : getMaxRUs(this.props.collection, this.props.container).toLocaleString();
+    return `Throughput (${minThroughput} - ${maxThroughput} RU/s)`;
+  };
+
+  public canThroughputExceedMaximumValue = (): boolean => {
+    const isPublicAzurePortal: boolean =
+      this.props.container.getPlatformType() === PlatformType.Portal &&
+      !this.props.container.isRunningOnNationalCloud();
+    const hasPartitionKey = !!this.props.collection.partitionKey;
+
+    return isPublicAzurePortal && hasPartitionKey;
+  };
+
+  public getInitialNotificationElement = (): JSX.Element => {
+    if (this.props.initialNotification) {
+      return this.getLongDelayMessage();
+    }
+
+    const offer = this.props.collection?.offer && this.props.collection.offer();
+    if (
+      offer &&
+      Object.keys(offer).find(value => {
+        return value === "headers";
+      }) &&
+      !!(offer as DataModels.OfferWithHeaders).headers[Constants.HttpHeaders.offerReplacePending]
+    ) {
+      const throughput = offer?.content?.offerAutopilotSettings?.maxThroughput;
+
+      const targetThroughput =
+        offer.content?.offerAutopilotSettings?.targetMaxThroughput || offer?.content?.offerThroughput;
+
+      return getThroughputApplyShortDelayMessage(
+        this.props.isAutoPilotSelected,
+        throughput,
+        throughputUnit,
+        this.props.collection.databaseId,
+        this.props.collection.id(),
+        targetThroughput
+      );
+    }
+
+    return undefined;
+  };
+
+  public getThroughputWarningMessage = (): JSX.Element => {
+    const throughputExceedsBackendLimits: boolean =
+      this.canThroughputExceedMaximumValue() &&
+      getMaxRUs(this.props.collection, this.props.container) <=
+        SharedConstants.CollectionCreation.DefaultCollectionRUs1Million &&
+      this.props.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs1Million;
+
+    if (throughputExceedsBackendLimits && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
+      return updateThroughputBeyondLimitWarningMessage;
+    }
+
+    const throughputExceedsMaxValue: boolean =
+      !this.isEmulator && this.props.throughput > getMaxRUs(this.props.collection, this.props.container);
+
+    if (throughputExceedsMaxValue && !!this.props.collection.partitionKey && !this.props.isFixedContainer) {
+      return updateThroughputDelayedApplyWarningMessage;
+    }
+
+    return undefined;
+  };
+
+  public getLongDelayMessage = (): JSX.Element => {
+    const matches: string[] = this.props.initialNotification?.description.match(
+      `Throughput update for (.*) ${throughputUnit}`
+    );
+
+    const throughput = this.props.throughputBaseline;
+    const targetThroughput: number = matches.length > 1 && Number(matches[1]);
+    if (targetThroughput) {
+      return getThroughputApplyLongDelayMessage(
+        this.props.wasAutopilotOriginallySet,
+        throughput,
+        throughputUnit,
+        this.props.collection.databaseId,
+        this.props.collection.id(),
+        targetThroughput
+      );
+    }
+    return <></>;
+  };
+
+  private getThroughputInputComponent = (): JSX.Element => (
+    <ThroughputInputAutoPilotV3Component
+      databaseAccount={this.props.container.databaseAccount()}
+      serverId={this.props.container.serverId()}
+      throughput={this.props.throughput}
+      throughputBaseline={this.props.throughputBaseline}
+      onThroughputChange={this.props.onThroughputChange}
+      minimum={getMinRUs(this.props.collection, this.props.container)}
+      maximum={this.getMaxRUThroughputInputLimit()}
+      isEnabled={!hasDatabaseSharedThroughput(this.props.collection)}
+      canExceedMaximumValue={this.canThroughputExceedMaximumValue()}
+      label={this.getThroughputTitle()}
+      isEmulator={this.isEmulator}
+      isFixed={this.props.isFixedContainer}
+      isAutoPilotSelected={this.props.isAutoPilotSelected}
+      onAutoPilotSelected={this.props.onAutoPilotSelected}
+      wasAutopilotOriginallySet={this.props.wasAutopilotOriginallySet}
+      maxAutoPilotThroughput={this.props.autoPilotThroughput}
+      maxAutoPilotThroughputBaseline={this.props.autoPilotThroughputBaseline}
+      onMaxAutoPilotThroughputChange={this.props.onMaxAutoPilotThroughputChange}
+      spendAckChecked={false}
+      onScaleSaveableChange={this.props.onScaleSaveableChange}
+      onScaleDiscardableChange={this.props.onScaleDiscardableChange}
+      getThroughputWarningMessage={this.getThroughputWarningMessage}
+    />
+  );
+
+  public render(): JSX.Element {
+    return (
+      <Stack {...subComponentStackProps}>
+        {this.getInitialNotificationElement() && (
+          <MessageBar messageBarType={MessageBarType.warning}>{this.getInitialNotificationElement()}</MessageBar>
+        )}
+        {!this.isAutoScaleEnabled() && (
+          <Stack {...subComponentStackProps}>
+            {this.getThroughputInputComponent()}
+            {this.getStorageCapacityTitle()}
+          </Stack>
+        )}
+
+        {/* TODO: Replace link with call to the Azure Support blade */}
+        {this.isAutoScaleEnabled() && (
+          <Stack {...titleAndInputStackProps}>
+            <Text>Throughput (RU/s)</Text>
+            <TextField disabled styles={getTextFieldStyles(undefined, undefined)} />
+            <Text>
+              Your account has custom settings that prevents setting throughput at the container level. Please work with
+              your Cosmos DB engineering team point of contact to make changes.
+            </Text>
+          </Stack>
+        )}
+      </Stack>
+    );
+  }
+}

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

@@ -0,0 +1,136 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SubSettingsComponent";
+import { container, collection } from "../TestUtils";
+import { TtlType, GeospatialConfigType, ChangeFeedPolicyState } from "../SettingsUtils";
+import ko from "knockout";
+import Explorer from "../../../Explorer";
+
+describe("SubSettingsComponent", () => {
+  container.isPreferredApiDocumentDB = ko.computed(() => true);
+
+  const baseProps: SubSettingsComponentProps = {
+    collection: collection,
+    container: container,
+
+    timeToLive: TtlType.On,
+    timeToLiveBaseline: TtlType.On,
+    onTtlChange: () => {
+      return;
+    },
+    timeToLiveSeconds: 1000,
+    timeToLiveSecondsBaseline: 1000,
+    onTimeToLiveSecondsChange: () => {
+      return;
+    },
+
+    geospatialConfigType: GeospatialConfigType.Geography,
+    geospatialConfigTypeBaseline: GeospatialConfigType.Geography,
+    onGeoSpatialConfigTypeChange: () => {
+      return;
+    },
+
+    isAnalyticalStorageEnabled: true,
+    analyticalStorageTtlSelection: TtlType.On,
+    analyticalStorageTtlSelectionBaseline: TtlType.On,
+    onAnalyticalStorageTtlSelectionChange: () => {
+      return;
+    },
+    analyticalStorageTtlSeconds: 2000,
+    analyticalStorageTtlSecondsBaseline: 2000,
+    onAnalyticalStorageTtlSecondsChange: () => {
+      return;
+    },
+
+    changeFeedPolicyVisible: true,
+    changeFeedPolicy: ChangeFeedPolicyState.On,
+    changeFeedPolicyBaseline: ChangeFeedPolicyState.On,
+
+    onChangeFeedPolicyChange: () => {
+      return;
+    },
+    onSubSettingsSaveableChange: () => {
+      return;
+    },
+    onSubSettingsDiscardableChange: () => {
+      return;
+    }
+  };
+
+  it("renders", () => {
+    const wrapper = shallow(<SubSettingsComponent {...baseProps} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#timeToLive")).toEqual(true);
+    expect(wrapper.exists("#timeToLiveSeconds")).toEqual(true);
+    expect(wrapper.exists("#geoSpatialConfig")).toEqual(true);
+    expect(wrapper.exists("#analyticalStorageTimeToLive")).toEqual(true);
+    expect(wrapper.exists("#analyticalStorageTimeToLiveSeconds")).toEqual(true);
+    expect(wrapper.exists("#changeFeedPolicy")).toEqual(true);
+  });
+
+  it("timeToLiveSeconds hidden", () => {
+    const props = { ...baseProps, timeToLive: TtlType.Off };
+    const wrapper = shallow(<SubSettingsComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#timeToLive")).toEqual(true);
+    expect(wrapper.exists("#timeToLiveSeconds")).toEqual(false);
+  });
+
+  it("analyticalTimeToLive hidden", () => {
+    const props = { ...baseProps, isAnalyticalStorageEnabled: false };
+    const wrapper = shallow(<SubSettingsComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#analyticalStorageTimeToLive")).toEqual(false);
+    expect(wrapper.exists("#analyticalStorageTimeToLiveSeconds")).toEqual(false);
+  });
+
+  it("analyticalTimeToLiveSeconds hidden", () => {
+    const props = { ...baseProps, analyticalStorageTtlSelection: TtlType.OnNoDefault };
+    const wrapper = shallow(<SubSettingsComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#analyticalStorageTimeToLive")).toEqual(true);
+    expect(wrapper.exists("#analyticalStorageTimeToLiveSeconds")).toEqual(false);
+  });
+
+  it("changeFeedPolicy hidden", () => {
+    const props = { ...baseProps, changeFeedPolicyVisible: false };
+    const wrapper = shallow(<SubSettingsComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#changeFeedPolicy")).toEqual(false);
+  });
+
+  it("partitionKey is visible", () => {
+    const subSettingsComponent = new SubSettingsComponent(baseProps);
+    expect(subSettingsComponent.getPartitionKeyVisible()).toEqual(true);
+  });
+
+  it("partitionKey not visible", () => {
+    const newContainer = new Explorer({
+      notificationsClient: undefined,
+      isEmulator: false
+    });
+
+    newContainer.isPreferredApiCassandra = ko.computed(() => true);
+    const props = { ...baseProps, container: newContainer };
+    const subSettingsComponent = new SubSettingsComponent(props);
+    expect(subSettingsComponent.getPartitionKeyVisible()).toEqual(false);
+  });
+
+  it("largePartitionKey is enabled", () => {
+    const subSettingsComponent = new SubSettingsComponent(baseProps);
+    expect(subSettingsComponent.isLargePartitionKeyEnabled()).toEqual(true);
+  });
+
+  it("sub settings saveable and discardable are set", () => {
+    let subSettingsComponent = new SubSettingsComponent(baseProps);
+    let isComponentDirtyResult = subSettingsComponent.IsComponentDirty();
+    expect(isComponentDirtyResult.isSaveable).toEqual(false);
+    expect(isComponentDirtyResult.isDiscardable).toEqual(false);
+
+    const newProps = { ...baseProps, timeToLive: TtlType.OnNoDefault };
+    subSettingsComponent = new SubSettingsComponent(newProps);
+    isComponentDirtyResult = subSettingsComponent.IsComponentDirty();
+    expect(isComponentDirtyResult.isSaveable).toEqual(true);
+    expect(isComponentDirtyResult.isDiscardable).toEqual(true);
+  });
+});

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

@@ -0,0 +1,296 @@
+import * as React from "react";
+import * as ViewModels from "../../../../Contracts/ViewModels";
+import {
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  isDirty,
+  IsComponentDirtyResult
+} from "../SettingsUtils";
+import Explorer from "../../../Explorer";
+import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
+import {
+  Label,
+  Text,
+  TextField,
+  Stack,
+  IChoiceGroupOption,
+  ChoiceGroup,
+  MessageBar,
+  MessageBarType
+} from "office-ui-fabric-react";
+import {
+  getTextFieldStyles,
+  changeFeedPolicyToolTip,
+  subComponentStackProps,
+  titleAndInputStackProps,
+  getChoiceGroupStyles,
+  ttlWarning,
+  messageBarStyles
+} from "../SettingsRenderUtils";
+import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
+
+export interface SubSettingsComponentProps {
+  collection: ViewModels.Collection;
+  container: Explorer;
+
+  timeToLive: TtlType;
+  timeToLiveBaseline: TtlType;
+
+  onTtlChange: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
+  timeToLiveSeconds: number;
+  timeToLiveSecondsBaseline: number;
+  onTimeToLiveSecondsChange: (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ) => void;
+
+  geospatialConfigType: GeospatialConfigType;
+  geospatialConfigTypeBaseline: GeospatialConfigType;
+  onGeoSpatialConfigTypeChange: (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ) => void;
+
+  isAnalyticalStorageEnabled: boolean;
+  analyticalStorageTtlSelection: TtlType;
+  analyticalStorageTtlSelectionBaseline: TtlType;
+  onAnalyticalStorageTtlSelectionChange: (
+    ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
+    option?: IChoiceGroupOption
+  ) => void;
+
+  analyticalStorageTtlSeconds: number;
+  analyticalStorageTtlSecondsBaseline: number;
+  onAnalyticalStorageTtlSecondsChange: (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ) => void;
+
+  changeFeedPolicyVisible: boolean;
+  changeFeedPolicy: ChangeFeedPolicyState;
+  changeFeedPolicyBaseline: ChangeFeedPolicyState;
+  onChangeFeedPolicyChange: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => void;
+  onSubSettingsSaveableChange: (isSubSettingsSaveable: boolean) => void;
+  onSubSettingsDiscardableChange: (isSubSettingsDiscardable: boolean) => void;
+}
+
+export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> {
+  private shouldCheckComponentIsDirty = true;
+  private ttlVisible: boolean;
+  private geospatialVisible: boolean;
+  private partitionKeyValue: string;
+  private partitionKeyName: string;
+
+  constructor(props: SubSettingsComponentProps) {
+    super(props);
+    this.ttlVisible = (this.props.container && !this.props.container.isPreferredApiCassandra()) || false;
+    this.geospatialVisible = this.props.container.isPreferredApiDocumentDB();
+    this.partitionKeyValue = "/" + this.props.collection.partitionKeyProperty;
+    this.partitionKeyName = this.props.container.isPreferredApiMongoDB() ? "Shard key" : "Partition key";
+  }
+
+  componentDidMount(): void {
+    this.onComponentUpdate();
+  }
+
+  componentDidUpdate(): void {
+    this.onComponentUpdate();
+  }
+
+  private onComponentUpdate = (): void => {
+    if (!this.shouldCheckComponentIsDirty) {
+      this.shouldCheckComponentIsDirty = true;
+      return;
+    }
+
+    const isComponentDirtyResult = this.IsComponentDirty();
+    this.props.onSubSettingsSaveableChange(isComponentDirtyResult.isSaveable);
+    this.props.onSubSettingsDiscardableChange(isComponentDirtyResult.isDiscardable);
+
+    this.shouldCheckComponentIsDirty = false;
+  };
+
+  public IsComponentDirty = (): IsComponentDirtyResult => {
+    if (
+      (this.props.timeToLive === TtlType.On && !this.props.timeToLiveSeconds) ||
+      (this.props.analyticalStorageTtlSelection === TtlType.On && !this.props.analyticalStorageTtlSeconds)
+    ) {
+      return { isSaveable: false, isDiscardable: true };
+    } else if (
+      isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) ||
+      (this.props.timeToLive === TtlType.On &&
+        isDirty(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)) ||
+      isDirty(this.props.analyticalStorageTtlSelection, this.props.analyticalStorageTtlSelectionBaseline) ||
+      (this.props.analyticalStorageTtlSelection === TtlType.On &&
+        isDirty(this.props.analyticalStorageTtlSeconds, this.props.analyticalStorageTtlSecondsBaseline)) ||
+      isDirty(this.props.geospatialConfigType, this.props.geospatialConfigTypeBaseline) ||
+      isDirty(this.props.changeFeedPolicy, this.props.changeFeedPolicyBaseline)
+    ) {
+      return { isSaveable: true, isDiscardable: true };
+    }
+
+    return { isSaveable: false, isDiscardable: false };
+  };
+
+  private ttlChoiceGroupOptions: IChoiceGroupOption[] = [
+    { key: TtlType.Off, text: "Off" },
+    { key: TtlType.OnNoDefault, text: "On (no default)" },
+    { key: TtlType.On, text: "On" }
+  ];
+
+  private getTtlComponent = (): JSX.Element => (
+    <Stack {...titleAndInputStackProps}>
+      <ChoiceGroup
+        id="timeToLive"
+        label="Time to Live"
+        selectedKey={this.props.timeToLive}
+        options={this.ttlChoiceGroupOptions}
+        onChange={this.props.onTtlChange}
+        styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
+      />
+      {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
+        <MessageBar messageBarType={MessageBarType.warning} styles={messageBarStyles}>
+          {ttlWarning}
+        </MessageBar>
+      )}
+      {this.props.timeToLive === TtlType.On && (
+        <TextField
+          id="timeToLiveSeconds"
+          styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
+          type="number"
+          required
+          min={1}
+          max={Int32.Max}
+          value={this.props.timeToLiveSeconds?.toString()}
+          onChange={this.props.onTimeToLiveSecondsChange}
+          suffix="second(s)"
+        />
+      )}
+    </Stack>
+  );
+
+  private analyticalTtlChoiceGroupOptions: IChoiceGroupOption[] = [
+    { key: TtlType.Off, text: "Off", disabled: true },
+    { key: TtlType.OnNoDefault, text: "On (no default)" },
+    { key: TtlType.On, text: "On" }
+  ];
+
+  private getAnalyticalStorageTtlComponent = (): JSX.Element => (
+    <Stack {...titleAndInputStackProps}>
+      <ChoiceGroup
+        id="analyticalStorageTimeToLive"
+        label="Analytical Storage Time to Live"
+        selectedKey={this.props.analyticalStorageTtlSelection}
+        options={this.analyticalTtlChoiceGroupOptions}
+        onChange={this.props.onAnalyticalStorageTtlSelectionChange}
+        styles={getChoiceGroupStyles(
+          this.props.analyticalStorageTtlSelection,
+          this.props.analyticalStorageTtlSelectionBaseline
+        )}
+      />
+      {this.props.analyticalStorageTtlSelection === TtlType.On && (
+        <TextField
+          id="analyticalStorageTimeToLiveSeconds"
+          styles={getTextFieldStyles(
+            this.props.analyticalStorageTtlSeconds,
+            this.props.analyticalStorageTtlSecondsBaseline
+          )}
+          type="number"
+          required
+          min={1}
+          max={Int32.Max}
+          value={this.props.analyticalStorageTtlSeconds?.toString()}
+          suffix="second(s)"
+          onChange={this.props.onAnalyticalStorageTtlSecondsChange}
+        />
+      )}
+    </Stack>
+  );
+
+  private geoSpatialConfigTypeChoiceGroupOptions: IChoiceGroupOption[] = [
+    { key: GeospatialConfigType.Geography, text: "Geography" },
+    { key: GeospatialConfigType.Geometry, text: "Geometry" }
+  ];
+
+  private getGeoSpatialComponent = (): JSX.Element => (
+    <ChoiceGroup
+      id="geoSpatialConfig"
+      label="Geospatial Configuration"
+      selectedKey={this.props.geospatialConfigType}
+      options={this.geoSpatialConfigTypeChoiceGroupOptions}
+      onChange={this.props.onGeoSpatialConfigTypeChange}
+      styles={getChoiceGroupStyles(this.props.geospatialConfigType, this.props.geospatialConfigTypeBaseline)}
+    />
+  );
+
+  private changeFeedChoiceGroupOptions: IChoiceGroupOption[] = [
+    { key: ChangeFeedPolicyState.Off, text: "Off" },
+    { key: ChangeFeedPolicyState.On, text: "On" }
+  ];
+
+  private getChangeFeedComponent = (): JSX.Element => {
+    const labelId = "settingsV2ChangeFeedLabelId";
+
+    return (
+      <Stack>
+        <Label id={labelId}>
+          <ToolTipLabelComponent label="Change feed log retention policy" toolTipElement={changeFeedPolicyToolTip} />
+        </Label>
+        <ChoiceGroup
+          id="changeFeedPolicy"
+          selectedKey={this.props.changeFeedPolicy}
+          options={this.changeFeedChoiceGroupOptions}
+          onChange={this.props.onChangeFeedPolicyChange}
+          styles={getChoiceGroupStyles(this.props.changeFeedPolicy, this.props.changeFeedPolicyBaseline)}
+          aria-labelledby={labelId}
+        />
+      </Stack>
+    );
+  };
+
+  private getPartitionKeyComponent = (): JSX.Element => (
+    <Stack {...titleAndInputStackProps}>
+      {this.getPartitionKeyVisible() && (
+        <TextField
+          label={this.partitionKeyName}
+          disabled
+          styles={getTextFieldStyles(undefined, undefined)}
+          defaultValue={this.partitionKeyValue}
+        />
+      )}
+
+      {this.isLargePartitionKeyEnabled() && <Text>Large {this.partitionKeyName.toLowerCase()} has been enabled</Text>}
+    </Stack>
+  );
+
+  public getPartitionKeyVisible = (): boolean => {
+    if (
+      this.props.container.isPreferredApiCassandra() ||
+      this.props.container.isPreferredApiTable() ||
+      !this.props.collection.partitionKeyProperty ||
+      (this.props.container.isPreferredApiMongoDB() && this.props.collection.partitionKey.systemKey)
+    ) {
+      return false;
+    }
+    return true;
+  };
+
+  public isLargePartitionKeyEnabled = (): boolean => this.props.collection.partitionKey?.version >= 2;
+
+  public render(): JSX.Element {
+    return (
+      <Stack {...subComponentStackProps}>
+        {this.ttlVisible && this.getTtlComponent()}
+
+        {this.geospatialVisible && this.getGeoSpatialComponent()}
+
+        {this.props.isAnalyticalStorageEnabled && this.getAnalyticalStorageTtlComponent()}
+
+        {this.props.changeFeedPolicyVisible && this.getChangeFeedComponent()}
+
+        {this.getPartitionKeyComponent()}
+      </Stack>
+    );
+  }
+}

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

@@ -0,0 +1,97 @@
+import { shallow } from "enzyme";
+import React from "react";
+import {
+  ThroughputInputAutoPilotV3Component,
+  ThroughputInputAutoPilotV3Props
+} from "./ThroughputInputAutoPilotV3Component";
+import * as DataModels from "../../../../../Contracts/DataModels";
+
+describe("ThroughputInputAutoPilotV3Component", () => {
+  const baseProps: ThroughputInputAutoPilotV3Props = {
+    databaseAccount: {} as DataModels.DatabaseAccount,
+    serverId: undefined,
+    wasAutopilotOriginallySet: false,
+    throughput: 100,
+    throughputBaseline: 100,
+    onThroughputChange: undefined,
+    minimum: 10000,
+    maximum: 400,
+    step: 100,
+    isEnabled: true,
+    isEmulator: false,
+    spendAckChecked: false,
+    spendAckId: "spendAckId",
+    spendAckText: "spendAckText",
+    spendAckVisible: false,
+    showAsMandatory: true,
+    isFixed: false,
+    label: "label",
+    infoBubbleText: "infoBubbleText",
+    canExceedMaximumValue: true,
+    onAutoPilotSelected: undefined,
+    isAutoPilotSelected: false,
+    maxAutoPilotThroughput: 4000,
+    maxAutoPilotThroughputBaseline: 4000,
+    onMaxAutoPilotThroughputChange: undefined,
+    onScaleSaveableChange: () => {
+      return;
+    },
+    onScaleDiscardableChange: () => {
+      return;
+    },
+    getThroughputWarningMessage: () => undefined
+  };
+
+  it("throughput input visible", () => {
+    const wrapper = shallow(<ThroughputInputAutoPilotV3Component {...baseProps} />);
+    const throughputComponent = wrapper.instance() as ThroughputInputAutoPilotV3Component;
+    expect(throughputComponent.hasProvisioningTypeChanged()).toEqual(false);
+    expect(throughputComponent.overrideWithProvisionedThroughputSettings()).toEqual(false);
+    expect(throughputComponent.overrideWithAutoPilotSettings()).toEqual(false);
+
+    expect(wrapper).toMatchSnapshot();
+    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", () => {
+    const newProps = { ...baseProps, isAutoPilotSelected: true };
+    const wrapper = shallow(<ThroughputInputAutoPilotV3Component {...newProps} />);
+    const throughputComponent = wrapper.instance() as ThroughputInputAutoPilotV3Component;
+    expect(throughputComponent.hasProvisioningTypeChanged()).toEqual(true);
+    expect(throughputComponent.overrideWithProvisionedThroughputSettings()).toEqual(true);
+    expect(throughputComponent.overrideWithAutoPilotSettings()).toEqual(false);
+
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#autopilotInput")).toEqual(true);
+    expect(wrapper.exists("#throughputInput")).toEqual(false);
+    expect(wrapper.exists("#manualToAutoscaleDisclaimerElement")).toEqual(true);
+
+    wrapper.setProps({ wasAutopilotOriginallySet: true });
+    wrapper.update();
+    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(true);
+    expect(wrapper.exists("#throughputSpendElement")).toEqual(false);
+  });
+
+  it("spendAck checkbox visible", () => {
+    const newProps = { ...baseProps, spendAckVisible: true };
+    const wrapper = shallow(<ThroughputInputAutoPilotV3Component {...newProps} />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.exists("#spendAckCheckBox")).toEqual(true);
+  });
+
+  it("scale saveable and discardable are set", () => {
+    let throughputComponent = new ThroughputInputAutoPilotV3Component(baseProps);
+    let isComponentDirtyResult = throughputComponent.IsComponentDirty();
+    expect(isComponentDirtyResult.isSaveable).toEqual(false);
+    expect(isComponentDirtyResult.isDiscardable).toEqual(false);
+
+    const newProps = { ...baseProps, throughput: 1000000 };
+    throughputComponent = new ThroughputInputAutoPilotV3Component(newProps);
+    isComponentDirtyResult = throughputComponent.IsComponentDirty();
+    expect(isComponentDirtyResult.isSaveable).toEqual(true);
+    expect(isComponentDirtyResult.isDiscardable).toEqual(true);
+  });
+});