Fix strict mode

Co-authored-by: Daniel Si Pham <v-danpha@microsoft.com>

.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
@@ -298,11 +292,9 @@ src/Utils/DatabaseAccountUtils.ts
 src/Utils/JunoUtils.ts
 src/Utils/MessageValidation.ts
 src/Utils/NotebookConfigurationUtils.ts
-src/Utils/NotificationConsoleUtils.ts
 src/Utils/OfferUtils.test.ts
 src/Utils/OfferUtils.ts
 src/Utils/PricingUtils.test.ts
-src/Utils/PricingUtils.ts
 src/Utils/QueryUtils.test.ts
 src/Utils/QueryUtils.ts
 src/Utils/StringUtils.test.ts
@@ -420,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

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es6: true
   },
-  plugins: ["@typescript-eslint", "no-null"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   globals: {
     Atomics: "readonly",
@@ -40,6 +40,8 @@ module.exports = {
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-extraneous-class": "error",
     "no-null/no-null": "error",
-    "@typescript-eslint/no-explicit-any": "error"
+    "@typescript-eslint/no-explicit-any": "error",
+    "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
+    eqeqeq: "error"
   }
 };

.github/CODEOWNERS

@@ -1 +1 @@
-* @Azure/cosmos-explorer-owners
+* @Azure/cosmos-explorer-owners @Azure/azure-cosmos-explorer-developers

.github/workflows/ci.yml

@@ -1,9 +1,13 @@
 name: CI
 on:
   push:
-    branches: [master]
+    branches:
+      - master
+      - hotfix/*
+      - release/*
   pull_request:
-    branches: [master]
+    branches:
+      - master
 jobs:
   compile:
     runs-on: ubuntu-latest
@@ -52,6 +56,7 @@ jobs:
       - run: npm run test
   build:
     runs-on: ubuntu-latest
+    needs: [lint, format, compile, unittest]
     name: "Build"
     steps:
       - uses: actions/checkout@v2
@@ -75,6 +80,7 @@ jobs:
           path: dist/
   endtoendemulator:
     name: "End To End Tests | Emulator | SQL"
+    needs: [lint, format, compile, unittest]
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
@@ -101,6 +107,7 @@ jobs:
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
   endtoendsql:
     name: "End To End Tests | SQL"
+    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -127,8 +134,14 @@ 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]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -155,8 +168,14 @@ 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]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -179,7 +198,7 @@ jobs:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
   nuget:
     name: Publish Nuget
-    if: github.ref == 'refs/heads/master'
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:
@@ -203,7 +222,7 @@ jobs:
           path: "*.nupkg"
   nugetmpac:
     name: Publish Nuget MPAC
-    if: github.ref == 'refs/heads/master'
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:

__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.config.js

@@ -39,10 +39,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 18,
-      functions: 22,
-      lines: 28,
-      statements: 27
+      branches: 20,
+      functions: 24,
+      lines: 30,
+      statements: 29.0
     }
   },
 

less/documentDB.less

@@ -3017,4 +3017,8 @@ settings-pane {
 
 .italic {
     font-style: italic;
+}
+
+.warningErrorContent 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",
@@ -34,13 +34,15 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
+    "@types/mkdirp": "1.0.1",
+    "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
     "@uifabric/styling": "7.13.7",
     "abort-controller": "3.0.0",
     "applicationinsights": "1.8.0",
     "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.6.0",
+    "canvas": "2.6.1",
     "clean-webpack-plugin": "0.1.19",
     "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
@@ -54,20 +56,23 @@
     "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
     "hasher": "1.2.0",
+    "html2canvas": "1.0.0-rc.5",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
     "jquery-typeahead": "2.10.6",
     "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
+    "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",
     "promise.prototype.finally": "3.1.0",
     "q": "1.5.1",
-    "react": "16.9.0",
+    "react": "16.13.1",
     "react-animate-height": "2.0.8",
     "react-dnd": "9.4.0",
     "react-dnd-html5-backend": "9.4.0",
@@ -113,8 +118,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",
@@ -127,9 +132,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",
@@ -147,17 +153,19 @@
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "0.4.3",
     "monaco-editor-webpack-plugin": "1.7.0",
+    "node-fetch": "2.6.0",
     "prettier": "1.19.1",
     "puppeteer": "4.0.0",
     "raw-loader": "0.5.1",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
+    "swr": "0.3.2",
     "terser-webpack-plugin": "3.0.5",
     "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",
     "webpack": "4.43.0",
     "webpack-bundle-analyzer": "3.6.1",
@@ -187,7 +195,8 @@
     "build:contracts": "npm run compile:contracts",
     "strictEligibleFiles": "node ./strict-migration-tools/index.js",
     "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
-    "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks"
+    "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
+    "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
   },
   "repository": {
     "type": "git",

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/Api/Apis.ts

@@ -1,13 +0,0 @@
-import * as ViewModels from "../Contracts/ViewModels";
-
-export class DefaultApi implements ViewModels.CosmosDbApi {
-  public isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
-    return false;
-  };
-}
-
-export class CassandraApi implements ViewModels.CosmosDbApi {
-  public isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
-    return database.id() === "system";
-  };
-}

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";
@@ -101,6 +110,7 @@ export class CapabilityNames {
   public static readonly EnableNotebooks: string = "EnableNotebooks";
   public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
   public static readonly EnableMongo: string = "EnableMongo";
+  public static readonly EnableServerless: string = "EnableServerless";
 }
 
 export class Features {
@@ -112,6 +122,8 @@ 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 enableSpark = "enablespark";
   public static readonly livyEndpoint = "livyendpoint";
   public static readonly notebookServerUrl = "notebookserverurl";
@@ -122,6 +134,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 {

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 { 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/ErrorParserUtility.ts

@@ -1,4 +1,4 @@
-import * as DataModels from "../Contracts/DataModels";
+import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 
 export function replaceKnownError(err: string): string {
@@ -7,6 +7,8 @@ export function replaceKnownError(err: string): string {
     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;

src/Common/Logger.test.ts

@@ -1,46 +1,26 @@
+jest.mock("./MessageHandler");
 import { LogEntryLevel } from "../Contracts/Diagnostics";
 import * as Logger from "./Logger";
-import { MessageHandler } from "./MessageHandler";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
+import { sendMessage } from "./MessageHandler";
 
 describe("Logger", () => {
-  let sendMessageSpy: jasmine.Spy;
-
   beforeEach(() => {
-    sendMessageSpy = spyOn(MessageHandler, "sendMessage");
-  });
-
-  afterEach(() => {
-    sendMessageSpy = null;
+    jest.resetAllMocks();
   });
 
   it("should log info messages", () => {
     Logger.logInfo("Test info", "DocDB");
-    const spyArgs = sendMessageSpy.calls.mostRecent().args[0];
-
-    expect(spyArgs.type).toBe(MessageTypes.LogInfo);
-    expect(spyArgs.data).toContain(LogEntryLevel.Verbose);
-    expect(spyArgs.data).toContain("DocDB");
-    expect(spyArgs.data).toContain("Test info");
+    expect(sendMessage).toBeCalled();
   });
 
   it("should log error messages", () => {
     Logger.logError("Test error", "DocDB");
-    const spyArgs = sendMessageSpy.calls.mostRecent().args[0];
-
-    expect(spyArgs.type).toBe(MessageTypes.LogInfo);
-    expect(spyArgs.data).toContain(LogEntryLevel.Error);
-    expect(spyArgs.data).toContain("DocDB");
-    expect(spyArgs.data).toContain("Test error");
+    expect(sendMessage).toBeCalled();
   });
 
   it("should log warnings", () => {
     Logger.logWarning("Test warning", "DocDB");
-    const spyArgs = sendMessageSpy.calls.mostRecent().args[0];
-
-    expect(spyArgs.type).toBe(MessageTypes.LogInfo);
-    expect(spyArgs.data).toContain(LogEntryLevel.Warning);
-    expect(spyArgs.data).toContain("DocDB");
-    expect(spyArgs.data).toContain("Test warning");
+    expect(sendMessage).toBeCalled();
   });
 });

src/Common/Logger.ts

@@ -1,4 +1,4 @@
-import { MessageHandler } from "./MessageHandler";
+import { sendMessage } from "./MessageHandler";
 import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
 import { appInsights } from "../Shared/appInsights";
 import { SeverityLevel } from "@microsoft/applicationinsights-web";
@@ -33,7 +33,7 @@ export function logError(message: string | Error, area: string, code?: number):
 }
 
 function _logEntry(entry: Diagnostics.LogEntry): void {
-  MessageHandler.sendMessage({
+  sendMessage({
     type: MessageTypes.LogInfo,
     data: JSON.stringify(entry)
   });

src/Common/MessageHandler.test.ts

@@ -1,65 +1,29 @@
 import Q from "q";
-import { CachedDataPromise, MessageHandler } from "./MessageHandler";
+import * as MessageHandler from "./MessageHandler";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 
-class MockMessageHandler extends MessageHandler {
-  public static addToMap(key: string, value: CachedDataPromise<any>): void {
-    MessageHandler.RequestMap[key] = value;
-  }
-
-  public static mapContainsKey(key: string): boolean {
-    return MessageHandler.RequestMap[key] != null;
-  }
-
-  public static clearAllEntries(): void {
-    MessageHandler.RequestMap = {};
-  }
-
-  public static runGarbageCollector(): void {
-    MessageHandler.runGarbageCollector();
-  }
-}
-
 describe("Message Handler", () => {
-  beforeEach(() => {
-    MockMessageHandler.clearAllEntries();
-  });
-
-  xit("should send cached data message", (done: any) => {
-    const testValidationCallback = (e: MessageEvent) => {
-      expect(e.data.data).toEqual(
-        jasmine.objectContaining({ type: MessageTypes.AllDatabases, params: ["some param"] })
-      );
-      e.currentTarget.removeEventListener(e.type, testValidationCallback);
-      done();
-    };
-    window.parent.addEventListener("message", testValidationCallback);
-    MockMessageHandler.sendCachedDataMessage(MessageTypes.AllDatabases, ["some param"]);
-  });
-
-  it("should handle cached message", () => {
-    let mockPromise: CachedDataPromise<any> = {
+  it("should handle cached message", async () => {
+    let mockPromise = {
       id: "123",
       startTime: new Date(),
       deferred: Q.defer<any>()
     };
     let mockMessage = { message: { id: "123", data: "{}" } };
-
-    MockMessageHandler.addToMap(mockPromise.id, mockPromise);
-    MockMessageHandler.handleCachedDataMessage(mockMessage);
+    MessageHandler.RequestMap[mockPromise.id] = mockPromise;
+    MessageHandler.handleCachedDataMessage(mockMessage);
     expect(mockPromise.deferred.promise.isFulfilled()).toBe(true);
   });
 
-  it("should delete fulfilled promises on running the garbage collector", () => {
-    let mockPromise: CachedDataPromise<any> = {
+  it("should delete fulfilled promises on running the garbage collector", async () => {
+    let message = {
       id: "123",
       startTime: new Date(),
       deferred: Q.defer<any>()
     };
 
-    MockMessageHandler.addToMap(mockPromise.id, mockPromise);
-    mockPromise.deferred.reject("some error");
-    MockMessageHandler.runGarbageCollector();
-    expect(MockMessageHandler.mapContainsKey(mockPromise.id)).toBe(false);
+    MessageHandler.handleCachedDataMessage(message);
+    MessageHandler.runGarbageCollector();
+    expect(MessageHandler.RequestMap["123"]).toBeUndefined();
   });
 });

src/Common/MessageHandler.ts

@@ -1,85 +1,73 @@
-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;
-}
-
-/**
- * For some reason, typescript emits a Map() in the compiled js output(despite the target being set to ES5) forcing us to define our own polyfill,
- * so we define our own custom implementation of the ES6 Map to work around it.
- */
-type Map = { [key: string]: CachedDataPromise<any> };
-
-export class MessageHandler {
-  protected static RequestMap: Map = {};
-
-  public static handleCachedDataMessage(message: any): void {
-    const messageContent = message && message.message;
-    if (
-      message == null ||
-      messageContent == null ||
-      messageContent.id == null ||
-      !MessageHandler.RequestMap[messageContent.id]
-    ) {
-      return;
-    }
-
-    const cachedDataPromise = MessageHandler.RequestMap[messageContent.id];
-    if (messageContent.error != null) {
-      cachedDataPromise.deferred.reject(messageContent.error);
-    } else {
-      cachedDataPromise.deferred.resolve(JSON.parse(messageContent.data));
-    }
-    MessageHandler.runGarbageCollector();
-  }
-
-  public static sendCachedDataMessage<TResponseDataModel>(
-    messageType: MessageTypes,
-    params: Object[],
-    timeoutInMs?: number
-  ): Q.Promise<TResponseDataModel> {
-    let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
-      deferred: Q.defer<TResponseDataModel>(),
-      startTime: new Date(),
-      id: _.uniqueId()
-    };
-    MessageHandler.RequestMap[cachedDataPromise.id] = cachedDataPromise;
-    MessageHandler.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"
-    );
-  }
-
-  public static sendMessage(data: any): void {
-    if (MessageHandler.canSendMessage()) {
-      window.parent.postMessage(
-        {
-          signature: "pcIframe",
-          data: data
-        },
-        window.document.referrer
-      );
-    }
-  }
-
-  public static canSendMessage(): boolean {
-    return window.parent !== window;
-  }
-
-  protected static runGarbageCollector() {
-    Object.keys(MessageHandler.RequestMap).forEach((key: string) => {
-      const promise: Q.Promise<any> = MessageHandler.RequestMap[key].deferred.promise;
-      if (promise.isFulfilled() || promise.isRejected()) {
-        delete MessageHandler.RequestMap[key];
-      }
-    });
-  }
-}
+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];
+    }
+  });
+}

src/Common/MongoProxyClient.test.ts

@@ -1,16 +1,11 @@
-import {
-  _createMongoCollectionWithARM,
-  deleteDocument,
-  getEndpoint,
-  queryDocuments,
-  readDocument,
-  updateDocument
-} from "./MongoProxyClient";
 import { AuthType } from "../AuthType";
-import { Collection, DatabaseAccount, DocumentId } from "../Contracts/ViewModels";
-import { config } from "../Config";
-import { CosmosClient } from "./CosmosClient";
+import { configContext, resetConfigContext, updateConfigContext } from "../ConfigContext";
+import { DatabaseAccount } from "../Contracts/DataModels";
+import { Collection } from "../Contracts/ViewModels";
+import DocumentId from "../Explorer/Tree/DocumentId";
 import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
+import { updateUserContext } from "../UserContext";
+import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
 jest.mock("../ResourceProvider/ResourceProviderClient.ts");
 
 const databaseId = "testDB";
@@ -60,13 +55,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: () => ""
@@ -86,7 +83,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",
@@ -96,8 +93,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: () => ""
@@ -117,7 +116,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",
@@ -127,8 +126,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: () => ""
@@ -148,7 +149,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",
@@ -158,8 +159,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: () => ""
@@ -171,7 +174,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct URL", () => {
-      updateDocument(databaseId, collection, documentId, {});
+      updateDocument(databaseId, collection, documentId, "{}");
       expect(window.fetch).toHaveBeenCalledWith(
         "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object)
@@ -179,8 +182,8 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct proxy URL in development", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
-      updateDocument(databaseId, collection, documentId, {});
+      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",
         expect.any(Object)
@@ -189,8 +192,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: () => ""
@@ -210,7 +215,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",
@@ -220,9 +225,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: () => ""
@@ -235,7 +242,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("returns a development endpoint", () => {
-      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
       const endpoint = getEndpoint(databaseAccount as DatabaseAccount);
       expect(endpoint).toEqual("https://localhost:1234/api/mongo/explorer");
     });
@@ -246,58 +253,4 @@ describe("MongoProxyClient", () => {
       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,18 @@
-import * as Constants from "../Common/Constants";
-import * as DataExplorerConstants from "../Common/Constants";
-import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
-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 { MessageHandler } 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 { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
-import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
+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 EnvironmentUtility from "./EnvironmentUtility";
 import { MinimalQueryIterator } from "./IteratorUtilities";
+import { sendMessage } from "./MessageHandler";
 
 const defaultHeaders = {
   [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
@@ -26,9 +22,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 +63,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,8 +71,8 @@ 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 : ""
@@ -123,9 +119,9 @@ export function queryDocuments(
 export function readDocument(
   databaseId: string,
   collection: Collection,
-  documentId: ViewModels.DocumentId
+  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,8 +132,8 @@ 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 : ""
@@ -169,7 +165,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,8 +173,8 @@ 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 : ""
   };
@@ -205,10 +201,10 @@ export function createDocument(
 export function updateDocument(
   databaseId: string,
   collection: Collection,
-  documentId: ViewModels.DocumentId,
-  documentContent: unknown
+  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,8 +215,8 @@ 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 : ""
@@ -230,7 +226,7 @@ export function updateDocument(
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "PUT",
-      body: JSON.stringify(documentContent),
+      body: documentContent,
       headers: {
         ...defaultHeaders,
         ...authHeaders(),
@@ -246,12 +242,8 @@ export function updateDocument(
     });
 }
 
-export function deleteDocument(
-  databaseId: string,
-  collection: Collection,
-  documentId: ViewModels.DocumentId
-): Promise<void> {
-  const databaseAccount = CosmosClient.databaseAccount();
+export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
+  const databaseAccount = userContext.databaseAccount;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
   const path = idComponents.slice(0, 5).join("/");
@@ -262,8 +254,8 @@ export function deleteDocument(
     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 : ""
@@ -289,43 +281,35 @@ export function deleteDocument(
 }
 
 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);
 
   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: {
@@ -339,57 +323,15 @@ 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: ViewModels.DatabaseAccount): string {
+export function getEndpoint(databaseAccount: DataModels.DatabaseAccount): string {
   const serverId = window.dataExplorer.serverId();
   const extensionEndpoint = window.dataExplorer.extensionEndpoint();
-  let url = config.MONGO_BACKEND_ENDPOINT
-    ? config.MONGO_BACKEND_ENDPOINT + "/api/mongo/explorer"
+  let url = configContext.MONGO_BACKEND_ENDPOINT
+    ? configContext.MONGO_BACKEND_ENDPOINT + "/api/mongo/explorer"
     : EnvironmentUtility.getMongoBackendEndpoint(serverId, databaseAccount.location, extensionEndpoint);
 
   if (window.authType === AuthType.EncryptedToken) {
@@ -408,57 +350,12 @@ async function errorHandling(response: Response, action: string, params: unknown
     `Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`
   );
   if (response.status === HttpStatusCodes.Forbidden) {
-    MessageHandler.sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
+    sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
     return;
   }
   throw new Error(errorMessage);
 }
 
 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,11 +2,10 @@ 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 implements ViewModels.NotificationsClient {
+export class NotificationsClientBase {
   private _extensionEndpoint: string;
   private _notificationsApiSuffix: string;
 
@@ -16,10 +15,10 @@ export class NotificationsClientBase implements ViewModels.NotificationsClient {
 
   public fetchNotifications(): Q.Promise<DataModels.Notification[]> {
     const deferred: Q.Deferred<DataModels.Notification[]> = Q.defer<DataModels.Notification[]>();
-    const databaseAccount: ViewModels.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,18 +1,21 @@
+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 { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { CosmosClient } from "./CosmosClient";
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import * as Logger from "./Logger";
-import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
-import { QueryUtils } from "../Utils/QueryUtils";
 import Explorer from "../Explorer/Explorer";
+import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
+import DocumentId from "../Explorer/Tree/DocumentId";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { QueryUtils } from "../Utils/QueryUtils";
+import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
+import { userContext } from "../UserContext";
+import { createDocument, deleteDocument, queryDocuments, queryDocumentsPage } from "./DocumentClientUtilityBase";
+import { createCollection } from "./dataAccess/createCollection";
+import * as ErrorParserUtility from "./ErrorParserUtility";
+import * as Logger from "./Logger";
 
-export class QueriesClient implements ViewModels.QueriesClient {
+export class QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
     paths: [`/${SavedQueries.PartitionKeyProperty}`],
     kind: BackendDefaults.partitionKeyKind,
@@ -33,14 +36,14 @@ export class QueriesClient implements ViewModels.QueriesClient {
       ConsoleDataType.InProgress,
       "Setting up account for saving queries"
     );
-    return this.container.documentClientUtility
-      .getOrCreateDatabaseAndCollection({
-        collectionId: SavedQueries.CollectionName,
-        databaseId: SavedQueries.DatabaseName,
-        partitionKey: QueriesClient.PartitionKey,
-        offerThroughput: SavedQueries.OfferThroughput,
-        databaseLevelThroughput: undefined
-      })
+    return createCollection({
+      collectionId: SavedQueries.CollectionName,
+      createNewDatabase: true,
+      databaseId: SavedQueries.DatabaseName,
+      partitionKey: QueriesClient.PartitionKey,
+      offerThroughput: SavedQueries.OfferThroughput,
+      databaseLevelThroughput: false
+    })
       .then(
         (collection: DataModels.Collection) => {
           NotificationConsoleUtils.logConsoleMessage(
@@ -89,8 +92,7 @@ export class QueriesClient implements ViewModels.QueriesClient {
       `Saving query ${query.queryName}`
     );
     query.id = query.queryName;
-    return this.container.documentClientUtility
-      .createDocument(queriesCollection, query)
+    return createDocument(queriesCollection, query)
       .then(
         (savedQuery: DataModels.Query) => {
           NotificationConsoleUtils.logConsoleMessage(
@@ -131,17 +133,11 @@ export class QueriesClient implements ViewModels.QueriesClient {
 
     const options: any = { enableCrossPartitionQuery: true };
     const id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Fetching saved queries");
-    return this.container.documentClientUtility
-      .queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
+    return queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
       .then(
         (queryIterator: QueryIterator<ItemDefinition & Resource>) => {
           const fetchQueries = (firstItemIndex: number): Q.Promise<ViewModels.QueryResults> =>
-            this.container.documentClientUtility.queryDocumentsPage(
-              queriesCollection.id(),
-              queryIterator,
-              firstItemIndex,
-              options
-            );
+            queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex, options);
           return QueryUtils.queryAllPages(fetchQueries).then(
             (results: ViewModels.QueryResults) => {
               let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
@@ -217,17 +213,16 @@ export class QueriesClient implements ViewModels.QueriesClient {
       `Deleting query ${query.queryName}`
     );
     query.id = query.queryName;
-    const documentId: ViewModels.DocumentId = new DocumentId(
+    const documentId = new DocumentId(
       {
         partitionKey: QueriesClient.PartitionKey,
         partitionKeyProperty: "id"
-      } as ViewModels.DocumentsTab,
+      } as DocumentsTab,
       query,
       query.queryName
     ); // TODO: Remove DocumentId's dependency on DocumentsTab
     const options: any = { partitionKey: query.resourceId };
-    return this.container.documentClientUtility
-      .deleteDocument(queriesCollection, documentId)
+    return deleteDocument(queriesCollection, documentId)
       .then(
         () => {
           NotificationConsoleUtils.logConsoleMessage(
@@ -250,10 +245,10 @@ export class QueriesClient implements ViewModels.QueriesClient {
   }
 
   public getResourceId(): string {
-    const databaseAccount: ViewModels.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,374 @@
+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-cosmos-db/types";
+import { client } from "../CosmosClient";
+import { createMongoCollectionWithProxy } from "../MongoProxyClient";
+import {
+  createUpdateSqlContainer,
+  getSqlContainer
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/sqlResources";
+import {
+  createUpdateCassandraTable,
+  getCassandraTable
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/cassandraResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/mongoDBResources";
+import {
+  createUpdateGremlinGraph,
+  getGremlinGraph
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/gremlinResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/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";
+
+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> => {
+  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" };
+  }
+
+  const rpPayload: ARMTypes.MongoDBCollectionCreateUpdateParameters = {
+    properties: {
+      resource,
+      options
+    }
+  };
+
+  const createResponse = await createUpdateMongoDBCollection(
+    userContext.subscriptionId,
+    userContext.resourceGroup,
+    userContext.databaseAccount.name,
+    params.databaseId,
+    params.collectionId,
+    rpPayload
+  );
+  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,254 @@
+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-cosmos-db/types";
+import { client } from "../CosmosClient";
+import {
+  createUpdateSqlDatabase,
+  getSqlDatabase
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/sqlResources";
+import {
+  createUpdateCassandraKeyspace,
+  getCassandraKeyspace
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/cassandraResources";
+import {
+  createUpdateMongoDBDatabase,
+  getMongoDBDatabase
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/mongoDBResources";
+import {
+  createUpdateGremlinDatabase,
+  getGremlinDatabase
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/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 (
+      window.authType === AuthType.AAD &&
+      !userContext.useSDKOperations &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table
+    ) {
+      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/deleteCollection.test.ts

@@ -0,0 +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;
+    await deleteCollection("database", "collection");
+    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 {
+          container: () => {
+            return {
+              delete: (): unknown => undefined
+            };
+          }
+        };
+      }
+    });
+    await deleteCollection("database", "collection");
+    expect(client).toHaveBeenCalled();
+  });
+});

src/Common/dataAccess/deleteCollection.ts

@@ -0,0 +1,57 @@
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { deleteSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/sqlResources";
+import { deleteCassandraTable } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/cassandraResources";
+import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/mongoDBResources";
+import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/gremlinResources";
+import { deleteTable } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/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 && !userContext.useSDKOperations) {
+      await deleteCollectionWithARM(databaseId, collectionId);
+    } else {
+      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

@@ -0,0 +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;
+    await deleteDatabase("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 {
+          delete: (): unknown => undefined
+        };
+      }
+    });
+    await deleteDatabase("database");
+    expect(client).toHaveBeenCalled();
+  });
+});

src/Common/dataAccess/deleteDatabase.ts

@@ -0,0 +1,58 @@
+import { AuthType } from "../../AuthType";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/sqlResources";
+import { deleteCassandraKeyspace } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/cassandraResources";
+import { deleteMongoDBDatabase } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/mongoDBResources";
+import { deleteGremlinDatabase } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/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";
+
+export async function deleteDatabase(databaseId: string): Promise<void> {
+  const clearMessage = logConsoleProgress(`Deleting database ${databaseId}`);
+
+  try {
+    if (
+      window.authType === AuthType.AAD &&
+      userContext.defaultExperience !== DefaultAccountExperienceType.Table &&
+      !userContext.useSDKOperations
+    ) {
+      await deleteDatabaseWithARM(databaseId);
+    } else {
+      await client()
+        .database(databaseId)
+        .delete();
+    }
+  } catch (error) {
+    logConsoleError(`Error while deleting database ${databaseId}:\n ${JSON.stringify(error)}`);
+    logError(JSON.stringify(error), "DeleteDatabase", error.code);
+    sendNotificationForError(error);
+    throw error;
+  }
+  logConsoleInfo(`Successfully deleted database ${databaseId}`);
+  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/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/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-cosmos-db/sqlResources";
+import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/cassandraResources";
+import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/mongoDBResources";
+import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/gremlinResources";
+import { listTables } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/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/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-cosmos-db/sqlResources";
+import { listCassandraKeyspaces } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/cassandraResources";
+import { listMongoDBDatabases } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/mongoDBResources";
+import { listGremlinDatabases } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/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/sendNotificationForError.ts

@@ -0,0 +1,20 @@
+import * as Constants from "../Constants";
+import { sendMessage } from "../MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+
+interface CosmosError {
+  code: number;
+  message?: string;
+}
+
+export function sendNotificationForError(error: CosmosError): void {
+  if (error && error.code === Constants.HttpStatusCodes.Forbidden) {
+    if (error.message && error.message.toLowerCase().indexOf("sharedoffer is disabled for your account") > 0) {
+      return;
+    }
+    sendMessage({
+      type: MessageTypes.ForbiddenError,
+      reason: error && error.message ? error.message : error
+    });
+  }
+}

src/Common/dataAccess/updateCollection.ts

@@ -0,0 +1,228 @@
+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-cosmos-db/types";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { client } from "../CosmosClient";
+import {
+  createUpdateSqlContainer,
+  getSqlContainer
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/sqlResources";
+import {
+  createUpdateCassandraTable,
+  getCassandraTable
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/cassandraResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/mongoDBResources";
+import {
+  createUpdateGremlinGraph,
+  getGremlinGraph
+} from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/gremlinResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01-cosmos-db/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/ConfigContext.ts

@@ -4,7 +4,7 @@ export enum Platform {
   Emulator = "Emulator"
 }
 
-interface Config {
+interface ConfigContext {
   platform: Platform;
   allowedParentFrameOrigins: RegExp;
   gitSha?: string;
@@ -28,7 +28,7 @@ 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$/,
   // Webpack injects this at build time
@@ -46,36 +46,58 @@ 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);
+        Object.assign(configContext, externalConfig);
       } 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

@@ -153,7 +153,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[];
@@ -312,17 +319,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,12 +327,24 @@ 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 CreateCollectionParams {
+  createNewDatabase: boolean;
+  collectionId: string;
+  databaseId: string;
+  databaseLevelThroughput: boolean;
+  offerThroughput: number;
+  analyticalStorageTtl?: number;
+  autoPilotMaxThroughput?: number;
+  indexingPolicy?: IndexingPolicy;
+  partitionKey?: PartitionKey;
+  uniqueKeyPolicy?: UniqueKeyPolicy;
 }
 
 export interface SharedThroughputRange {
@@ -701,11 +709,6 @@ export interface SparkPool extends ArmResource {
   properties: SparkPoolProperties;
 }
 
-export interface MemoryUsageInfo {
-  freeKB: number;
-  totalKB: number;
-}
-
 export interface resourceTokenConnectionStringProperties {
   accountEndpoint: string;
   collectionId: string;

src/Contracts/ViewModels.ts

@@ -1,41 +1,16 @@
 import * as DataModels from "./DataModels";
-import * as monaco from "monaco-editor";
-import DocumentClientUtilityBase from "../Common/DocumentClientUtilityBase";
 import Q from "q";
-import { AccessibleVerticalList } from "../Explorer/Tree/AccessibleVerticalList";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { GitHubClient } from "../GitHub/GitHubClient";
-import { JunoClient, IGalleryItem } from "../Juno/JunoClient";
-import { NotebookContentItem } from "../Explorer/Notebook/NotebookContentItem";
 import { QueryMetrics } from "@azure/cosmos";
 import { UploadDetails } from "../workers/upload/definitions";
 import Explorer from "../Explorer/Explorer";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
 import StoredProcedure from "../Explorer/Tree/StoredProcedure";
-import ConflictsTab from "../Explorer/Tabs/ConflictsTab";
 import Trigger from "../Explorer/Tree/Trigger";
-
-export interface ExplorerOptions {
-  documentClientUtility: DocumentClientUtilityBase;
-  notificationsClient: NotificationsClient;
-  isEmulator: boolean;
-}
-
-export interface Capability extends DataModels.Capability {}
-
-export interface ConfigurationOverrides extends DataModels.ConfigurationOverrides {}
-
-export interface NavbarButtonConfig extends CommandButtonComponentProps {}
-
-export interface DatabaseAccount extends DataModels.DatabaseAccount {}
-
-export interface KernelConnectionMetadata {
-  name: string;
-  configurationEndpoints: DataModels.NotebookConfigurationEndpoints;
-  notebookConnectionInfo: DataModels.NotebookWorkspaceConnectionInfo;
-}
+import DocumentId from "../Explorer/Tree/DocumentId";
+import ConflictId from "../Explorer/Tree/ConflictId";
 
 export interface TokenProvider {
   getAuthHeader(): Promise<Headers>;
@@ -75,11 +50,6 @@ export interface WaitsForTemplate {
   isTemplateReady: ko.Observable<boolean>;
 }
 
-export interface AdHocAccessData {
-  readWriteUrl: string;
-  readUrl: string;
-}
-
 export interface TreeNode {
   nodeKind: string;
   rid: string;
@@ -201,118 +171,15 @@ export interface Collection extends CollectionBase {
   getLabel(): string;
 }
 
-export interface DocumentId {
-  container: DocumentsTab;
-  rid: string;
-  self: string;
-  ts: string;
-  partitionKeyValue: any;
-  partitionKeyProperty: string;
-  partitionKey: DataModels.PartitionKey;
-  stringPartitionKeyValue: string;
-  id: ko.Observable<string>;
-
-  isDirty: ko.Observable<boolean>;
-  click(): void;
-  getPartitionKeyValueAsString(): string;
-  loadDocument(): Q.Promise<any>;
-  partitionKeyHeader(): Object;
-}
-
-export interface ConflictId {
-  container: ConflictsTab;
-  rid: string;
-  self: string;
-  ts: string;
-  partitionKeyValue: any;
-  partitionKeyProperty: string;
-  partitionKey: DataModels.PartitionKey;
-  stringPartitionKeyValue: string;
-  id: ko.Observable<string>;
-  operationType: string;
-  resourceId: string;
-  resourceType: string;
-
-  isDirty: ko.Observable<boolean>;
-  click(): void;
-  buildDocumentIdFromConflict(partitionKeyValue: any): DocumentId;
-  getPartitionKeyValueAsString(): string;
-  loadConflict(): Q.Promise<any>;
-}
-
 /**
  * Options used to initialize pane
  */
 export interface PaneOptions {
   id: string;
-  documentClientUtility: DocumentClientUtilityBase;
   visible: ko.Observable<boolean>;
   container?: Explorer;
 }
 
-export interface ContextualPane {
-  documentClientUtility: DocumentClientUtilityBase;
-  formErrors: ko.Observable<string>;
-  formErrorsDetails: ko.Observable<string>;
-  id: string;
-  title: ko.Observable<string>;
-  visible: ko.Observable<boolean>;
-  firstFieldHasFocus: ko.Observable<boolean>;
-  isExecuting: ko.Observable<boolean>;
-
-  submit: () => void;
-  cancel: () => void;
-  open: () => void;
-  close: () => void;
-  resetData: () => void;
-  showErrorDetails: () => void;
-  onCloseKeyPress(source: any, event: KeyboardEvent): void;
-  onPaneKeyDown(source: any, event: KeyboardEvent): boolean;
-}
-
-export interface GitHubReposPaneOptions extends PaneOptions {
-  gitHubClient: GitHubClient;
-  junoClient: JunoClient;
-}
-
-export interface PublishNotebookPaneOptions extends PaneOptions {
-  junoClient: JunoClient;
-}
-
-export interface PublishNotebookPaneOpenOptions {
-  name: string;
-  author: string;
-  content: string;
-}
-
-export interface AddCollectionPaneOptions extends PaneOptions {
-  isPreferredApiTable: ko.Computed<boolean>;
-  databaseId?: string;
-  databaseSelfLink?: string;
-}
-
-export interface UploadFilePaneOpenOptions {
-  paneTitle: string;
-  selectFileInputLabel: string;
-  errorMessage: string; // Could not upload notebook
-  inProgressMessage: string; // Uploading notebook
-  successMessage: string; // Successfully uploaded notebook
-  onSubmit: (file: File) => Promise<any>;
-  extensions?: string; // input accept field. E.g: .ipynb
-  submitButtonLabel?: string;
-}
-
-export interface StringInputPaneOpenOptions {
-  paneTitle: string;
-  inputLabel: string;
-  errorMessage: string;
-  inProgressMessage: string;
-  successMessage: string;
-  onSubmit: (input: string) => Promise<any>;
-  submitButtonLabel: string;
-  defaultInput?: string;
-}
-
 /**
  * Graph configuration
  */
@@ -382,19 +249,6 @@ export interface DocumentRequestContainer {
   resourceName?: string;
 }
 
-export interface NotificationsClient {
-  fetchNotifications(): Q.Promise<DataModels.Notification[]>;
-  setExtensionEndpoint(extensionEndpoint: string): void;
-}
-
-export interface QueriesClient {
-  setupQueriesCollection(): Promise<DataModels.Collection>;
-  saveQuery(query: DataModels.Query): Promise<void>;
-  getQueries(): Promise<DataModels.Query[]>;
-  deleteQuery(query: DataModels.Query): Promise<void>;
-  getResourceId(): string;
-}
-
 export interface DocumentClientOption {
   endpoint?: string;
   masterKey?: string;
@@ -406,11 +260,10 @@ export interface TabOptions {
   tabKind: CollectionTabKind;
   title: string;
   tabPath: string;
-  documentClientUtility: DocumentClientUtilityBase;
   selfLink: string;
   isActive: ko.Observable<boolean>;
   hashLocation: string;
-  onUpdateTabsButtons: (buttons: NavbarButtonConfig[]) => void;
+  onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
   isTabsContentExpanded?: ko.Observable<boolean>;
   onLoadStartKey?: number;
 
@@ -423,47 +276,6 @@ export interface TabOptions {
   theme?: string;
 }
 
-export interface SparkMasterTabOptions extends TabOptions {
-  clusterConnectionInfo: DataModels.SparkClusterConnectionInfo;
-  container: Explorer;
-}
-
-export interface GraphTabOptions extends TabOptions {
-  account: DatabaseAccount;
-  masterKey: string;
-  collectionId: string;
-  databaseId: string;
-  collectionPartitionKeyProperty: string;
-}
-
-export interface NotebookTabOptions extends TabOptions {
-  account: DatabaseAccount;
-  masterKey: string;
-  container: Explorer;
-  notebookContentItem: NotebookContentItem;
-}
-
-export interface TerminalTabOptions extends TabOptions {
-  account: DatabaseAccount;
-  container: Explorer;
-  kind: TerminalKind;
-}
-
-export interface GalleryTabOptions extends TabOptions {
-  account: DatabaseAccount;
-  container: Explorer;
-  junoClient: JunoClient;
-  notebookUrl?: string;
-  galleryItem?: IGalleryItem;
-  isFavorite?: boolean;
-}
-
-export interface NotebookViewerTabOptions extends TabOptions {
-  account: DatabaseAccount;
-  container: Explorer;
-  notebookUrl: string;
-}
-
 export interface DocumentsTabOptions extends TabOptions {
   partitionKey: DataModels.PartitionKey;
   documentIds: ko.ObservableArray<DocumentId>;
@@ -491,157 +303,15 @@ export interface ScriptTabOption extends TabOptions {
   partitionKey?: DataModels.PartitionKey;
 }
 
-// Tabs
-export interface Tab {
-  documentClientUtility: DocumentClientUtilityBase;
-  node: TreeNode; // Can be null
-  collection: CollectionBase;
-  rid: string;
-
-  tabKind: CollectionTabKind;
-  tabId: string;
-  isActive: ko.Observable<boolean>;
-  isMouseOver: ko.Observable<boolean>;
-  tabPath: ko.Observable<string>;
-  tabTitle: ko.Observable<string>;
-  hashLocation: ko.Observable<string>;
-  closeTabButton: Button;
-  onCloseTabButtonClick(): void;
-  onTabClick(): Q.Promise<any>;
-  onKeyPressActivate(source: any, event: KeyboardEvent): void;
-  onKeyPressClose(source: any, event: KeyboardEvent): void;
-  onActivate(): Q.Promise<any>;
-  refresh(): void;
-  closeButtonTabIndex: ko.Computed<number>;
-  isExecutionError: ko.Observable<boolean>;
-  isExecuting: ko.Observable<boolean>;
-}
-
-export interface DocumentsTab extends Tab {
-  /* Documents Grid  */
-  selectDocument(documentId: DocumentId): Q.Promise<any>;
-  selectedDocumentId: ko.Observable<DocumentId>;
-  selectedDocumentContent: Editable<any>;
-  onDocumentIdClick(documentId: DocumentId): Q.Promise<any>;
-  dataContentsGridScrollHeight: ko.Observable<string>;
-  accessibleDocumentList: AccessibleVerticalList;
-  documentContentsGridId: string;
-
-  partitionKey: DataModels.PartitionKey;
-  idHeader: string;
-  partitionKeyPropertyHeader: string;
-  partitionKeyProperty: string;
-  documentIds: ko.ObservableArray<DocumentId>;
-
-  /* Documents Filter */
-  filterContent: ko.Observable<string>;
-  appliedFilter: ko.Observable<string>;
-  lastFilterContents: ko.ObservableArray<string>;
-  isFilterExpanded: ko.Observable<boolean>;
-  applyFilterButton: Button;
-  onShowFilterClick(): Q.Promise<any>;
-  onHideFilterClick(): Q.Promise<any>;
-  onApplyFilterClick(): Q.Promise<any>;
-
-  /* Document Editor */
-  isEditorDirty: ko.Computed<boolean>;
-  editorState: ko.Observable<DocumentExplorerState>;
-  onValidDocumentEdit(content: any): Q.Promise<any>;
-  onInvalidDocumentEdit(content: any): Q.Promise<any>;
-
-  onNewDocumentClick(): Q.Promise<any>;
-  onSaveNewDocumentClick(): Q.Promise<any>;
-  onRevertNewDocumentClick(): Q.Promise<any>;
-  onSaveExisitingDocumentClick(): Q.Promise<any>;
-  onRevertExisitingDocumentClick(): Q.Promise<any>;
-  onDeleteExisitingDocumentClick(): Q.Promise<any>;
-
-  /* Errors */
-  displayedError: ko.Observable<string>;
-
-  initDocumentEditor(documentId: DocumentId, content: any): Q.Promise<any>;
-  loadNextPage(): Q.Promise<any>;
-}
-
 export interface WaitsForTemplate {
   isTemplateReady: ko.Observable<boolean>;
 }
 
-export interface QueryTab extends Tab {
-  queryEditorId: string;
-  isQueryMetricsEnabled: ko.Computed<boolean>;
-  activityId: ko.Observable<string>;
-
-  /* Command Bar */
-  executeQueryButton: Button;
-  fetchNextPageButton: Button;
-  saveQueryButton: Button;
-  onExecuteQueryClick(): Q.Promise<any>;
-  onFetchNextPageClick(): Q.Promise<any>;
-
-  /*Query Editor*/
-  initialEditorContent: ko.Observable<string>;
-  sqlQueryEditorContent: ko.Observable<string>;
-  sqlStatementToExecute: ko.Observable<string>;
-
-  /* Results */
-  allResultsMetadata: ko.ObservableArray<QueryResultsMetadata>;
-
-  /* Errors */
-  errors: ko.ObservableArray<QueryError>;
-
-  /* Status  */
-  statusMessge: ko.Observable<string>;
-  statusIcon: ko.Observable<string>;
-}
-
-export interface ScriptTab extends Tab {
-  id: Editable<string>;
-  editorId: string;
-
-  saveButton: Button;
-  updateButton: Button;
-  discardButton: Button;
-  deleteButton: Button;
-
-  editorState: ko.Observable<ScriptEditorState>;
-  editorContent: ko.Observable<string>;
-  editor: ko.Observable<monaco.editor.IStandaloneCodeEditor>;
-
-  errors: ko.ObservableArray<QueryError>;
-  statusMessge: ko.Observable<string>;
-  statusIcon: ko.Observable<string>;
-
-  formFields: ko.ObservableArray<Editable<any>>;
-  formIsValid: ko.Computed<boolean>;
-  formIsDirty: ko.Computed<boolean>;
-
-  isNew: ko.Observable<boolean>;
-  resource: ko.Observable<DataModels.Resource>;
-
-  setBaselines(): void;
-}
-
-export interface StoredProcedureTab extends ScriptTab {
-  onExecuteSprocsResult(result: any, logsData: any): void;
-  onExecuteSprocsError(error: string): void;
-}
-
-export interface UserDefinedFunctionTab extends ScriptTab {}
-
-export interface TriggerTab extends ScriptTab {
-  triggerType: Editable<string>;
-  triggerOperation: Editable<string>;
-}
-
-export interface GraphTab extends Tab {}
 export interface EditorPosition {
   line: number;
   column: number;
 }
 
-export interface MongoShellTab extends Tab {}
-
 export enum DocumentExplorerState {
   noDocumentSelected,
   newDocumentValid,
@@ -759,40 +429,8 @@ export interface AuthorizationTokenHeaderMetadata {
   token: string;
 }
 
-export interface TelemetryActions {
-  sendEvent(name: string, telemetryProperties?: { [propertyName: string]: string }): Q.Promise<any>;
-  sendError(errorInfo: DataModels.ITelemetryError): Q.Promise<any>;
-  sendMetric(
-    name: string,
-    metricNumber: number,
-    telemetryProperties?: { [propertyName: string]: string }
-  ): Q.Promise<any>;
-}
-
-export interface ConfigurationOverrides {
-  EnableBsonSchema: string;
-}
-
-export interface CosmosDbApi {
-  isSystemDatabasePredicate: (database: Database) => boolean;
-}
-
 export interface DropdownOption<T> {
   text: string;
   value: T;
   disable?: boolean;
 }
-
-export interface INotebookContainerClient {
-  resetWorkspace: () => Promise<void>;
-}
-
-export interface INotebookContentClient {
-  updateItemChildren: (item: NotebookContentItem) => Promise<void>;
-  createNewNotebookFile: (parent: NotebookContentItem) => Promise<NotebookContentItem>;
-  deleteContentItem: (item: NotebookContentItem) => Promise<void>;
-  uploadFileAsync: (name: string, content: string, parent: NotebookContentItem) => Promise<NotebookContentItem>;
-  renameNotebook: (item: NotebookContentItem, targetName: string) => Promise<NotebookContentItem>;
-  createDirectory: (parent: NotebookContentItem, newDirectoryName: string) => Promise<NotebookContentItem>;
-  readFileContent: (filePath: string) => Promise<string>;
-}

src/Controls/Heatmap/Heatmap.ts

@@ -12,7 +12,7 @@ import {
   PortalTheme
 } from "./HeatmapDatatypes";
 import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import { MessageHandler } from "../../Common/MessageHandler";
+import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
 import { MessageTypes } from "../../Contracts/ExplorerContracts";
 import { StyleConstants } from "../../Common/Constants";
 import "./Heatmap.less";
@@ -209,7 +209,7 @@ export class Heatmap {
       for (let i = 0; i < this._chartData.dataPoints.length; i++) {
         output.push(this._chartData.dataPoints[i][xAxisIndex]);
       }
-      MessageHandler.sendCachedDataMessage(MessageTypes.LogInfo, output);
+      sendCachedDataMessage(MessageTypes.LogInfo, output);
     });
   }
 }
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }
 
 window.addEventListener("message", handleMessage, false);
-MessageHandler.sendMessage("ready");
+sendMessage("ready");

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.ts

@@ -13,9 +13,7 @@ import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponen
 import { TabsManagerKOComponent } from "./Tabs/TabsManager";
 import { ThroughputInputComponent } from "./Controls/ThroughputInput/ThroughputInputComponent";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-import { ToolbarComponent } from "./Controls/Toolbar/Toolbar";
 
-ko.components.register("toolbar", new ToolbarComponent());
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
 ko.components.register("error-display", new ErrorDisplayComponent());

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/FeaturePanel/FeaturePanelComponent.tsx

@@ -49,6 +49,12 @@ 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.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,12 @@ exports[`Feature panel renders all flags 1`] = `
         className="checkboxRow"
         horizontalAlign="space-between"
       >
+        <StyledCheckboxBase
+          checked={false}
+          key="feature.canexceedmaximumvalue"
+          label="Can exceed max value"
+          onChange={[Function]}
+        />
         <StyledCheckboxBase
           checked={false}
           key="feature.enablefixedcollectionwithsharedthroughput"

src/Explorer/Controls/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/Notebook/NotebookTerminalComponent.tsx

@@ -5,7 +5,7 @@
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as Logger from "../../../Common/Logger";
-import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { StringUtils } from "../../../Utils/StringUtils";
 

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/Cards/GalleryCardComponent.tsx

@@ -36,6 +36,8 @@ export interface GalleryCardComponentProps {
 export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
   public static readonly CARD_WIDTH = 256;
   private static readonly cardImageHeight = 144;
+  public static readonly cardHeightToWidthRatio =
+    GalleryCardComponent.cardImageHeight / GalleryCardComponent.CARD_WIDTH;
   private static readonly cardDescriptionMaxChars = 88;
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;

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,15 +15,17 @@ 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 { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
 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

@@ -10,7 +10,7 @@ import * as Logger from "../../../Common/Logger";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
@@ -19,6 +19,8 @@ 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 {
   container?: Explorer;
@@ -85,16 +87,17 @@ 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 });
 
-      if (this.props.galleryItem) {
+      if (this.props.galleryItem && !SessionStorageUtility.getEntry(this.props.galleryItem.id)) {
         const response = await this.props.junoClient.increaseNotebookViews(this.props.galleryItem.id);
         if (!response.data) {
           throw new Error(`Received HTTP ${response.status} while increasing notebook views`);
         }
-
         this.setState({ galleryItem: response.data });
+        SessionStorageUtility.setEntry(this.props.galleryItem?.id, "true");
       }
     } catch (error) {
       this.setState({ showProgressBar: false });
@@ -104,10 +107,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>

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -24,12 +24,13 @@ 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";
 
 export interface QueriesGridComponentProps {
-  queriesClient: ViewModels.QueriesClient;
+  queriesClient: QueriesClient;
   onQuerySelect: (query: DataModels.Query) => void;
   containerVisible: boolean;
   saveQueryEnabled: boolean;

src/Explorer/Controls/Toolbar/IToolbarAction.ts

@@ -1,12 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import IToolbarDisplayable from "./IToolbarDisplayable";
-
-interface IToolbarAction extends IToolbarDisplayable {
-  type: "action";
-  action: () => void;
-}
-
-export default IToolbarAction;

src/Explorer/Controls/Toolbar/IToolbarDisplayable.ts

@@ -1,18 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-interface IToolbarDisplayable {
-  id: string;
-  title: ko.Subscribable<string>;
-  displayName: ko.Subscribable<string>;
-  enabled: ko.Subscribable<boolean>;
-  visible: ko.Observable<boolean>;
-  focused: ko.Observable<boolean>;
-  icon: string;
-  mouseDown: (data: any, event: MouseEvent) => any;
-  keyUp: (data: any, event: KeyboardEvent) => any;
-  keyDown: (data: any, event: KeyboardEvent) => any;
-}
-
-export default IToolbarDisplayable;

src/Explorer/Controls/Toolbar/IToolbarDropDown.ts

@@ -1,56 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import IToolbarDisplayable from "./IToolbarDisplayable";
-
-interface IToolbarDropDown extends IToolbarDisplayable {
-  type: "dropdown";
-  subgroup: IActionConfigItem[];
-  expanded: ko.Observable<boolean>;
-  open: () => void;
-}
-
-export interface IDropdown {
-  type: "dropdown";
-  title: string;
-  displayName: string;
-  id: string;
-  enabled: ko.Observable<boolean>;
-  visible?: ko.Observable<boolean>;
-  icon?: string;
-  subgroup?: IActionConfigItem[];
-}
-
-export interface ISeperator {
-  type: "separator";
-  visible?: ko.Observable<boolean>;
-}
-
-export interface IToggle {
-  type: "toggle";
-  title: string;
-  displayName: string;
-  checkedTitle: string;
-  checkedDisplayName: string;
-  id: string;
-  checked: ko.Observable<boolean>;
-  enabled: ko.Observable<boolean>;
-  visible?: ko.Observable<boolean>;
-  icon?: string;
-}
-
-export interface IAction {
-  type: "action";
-  title: string;
-  displayName: string;
-  id: string;
-  action: () => any;
-  enabled: ko.Subscribable<boolean>;
-  visible?: ko.Observable<boolean>;
-  icon?: string;
-}
-
-export type IActionConfigItem = ISeperator | IAction | IToggle | IDropdown;
-
-export default IToolbarDropDown;

src/Explorer/Controls/Toolbar/IToolbarItem.ts

@@ -1,12 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import IToolbarAction from "./IToolbarAction";
-import IToolbarToggle from "./IToolbarToggle";
-import IToolbarSeperator from "./IToolbarSeperator";
-import IToolbarDropDown from "./IToolbarDropDown";
-
-type IToolbarItem = IToolbarAction | IToolbarToggle | IToolbarSeperator | IToolbarDropDown;
-
-export default IToolbarItem;

src/Explorer/Controls/Toolbar/IToolbarSeperator.ts

@@ -1,10 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-interface IToolbarSeperator {
-  type: "separator";
-  visible: ko.Observable<boolean>;
-}
-
-export default IToolbarSeperator;

src/Explorer/Controls/Toolbar/IToolbarToggle.ts

@@ -1,12 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import IToolbarDisplayable from "./IToolbarDisplayable";
-
-interface IToolbarToggle extends IToolbarDisplayable {
-  type: "toggle";
-  checked: ko.Observable<boolean>;
-  toggle: () => void;
-}
-export default IToolbarToggle;

src/Explorer/Controls/Toolbar/KeyCodes.ts

@@ -1,58 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-var keyCodes = {
-  RightClick: 3,
-  Enter: 13,
-  Esc: 27,
-  Tab: 9,
-  LeftArrow: 37,
-  UpArrow: 38,
-  RightArrow: 39,
-  DownArrow: 40,
-  Delete: 46,
-  A: 65,
-  B: 66,
-  C: 67,
-  D: 68,
-  E: 69,
-  F: 70,
-  G: 71,
-  H: 72,
-  I: 73,
-  J: 74,
-  K: 75,
-  L: 76,
-  M: 77,
-  N: 78,
-  O: 79,
-  P: 80,
-  Q: 81,
-  R: 82,
-  S: 83,
-  T: 84,
-  U: 85,
-  V: 86,
-  W: 87,
-  X: 88,
-  Y: 89,
-  Z: 90,
-  Period: 190,
-  DecimalPoint: 110,
-  F1: 112,
-  F2: 113,
-  F3: 114,
-  F4: 115,
-  F5: 116,
-  F6: 117,
-  F7: 118,
-  F8: 119,
-  F9: 120,
-  F10: 121,
-  F11: 122,
-  F12: 123,
-  Dash: 189
-};
-
-export default keyCodes;

src/Explorer/Controls/Toolbar/Toolbar.ts

@@ -1,145 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-import { IDropdown } from "./IToolbarDropDown";
-import { IActionConfigItem } from "./IToolbarDropDown";
-import IToolbarItem from "./IToolbarItem";
-
-import * as ko from "knockout";
-import ToolbarDropDown from "./ToolbarDropDown";
-import ToolbarAction from "./ToolbarAction";
-import ToolbarToggle from "./ToolbarToggle";
-import template from "./toolbar.html";
-
-export default class Toolbar {
-  private _toolbarWidth = ko.observable<number>();
-  private _actionConfigs: IActionConfigItem[];
-  private _afterExecute: (id: string) => void;
-
-  private _hasFocus: boolean = false;
-  private _focusedSubscription: ko.Subscription;
-
-  constructor(actionItems: IActionConfigItem[], afterExecute?: (id: string) => void) {
-    this._actionConfigs = actionItems;
-    this._afterExecute = afterExecute;
-    this.toolbarItems.subscribe(this._focusFirstEnabledItem);
-
-    $(window).resize(() => {
-      this._toolbarWidth($(".toolbar").width());
-    });
-    setTimeout(() => {
-      this._toolbarWidth($(".toolbar").width());
-    }, 500);
-  }
-
-  public toolbarItems: ko.PureComputed<IToolbarItem[]> = ko.pureComputed(() => {
-    var remainingToolbarSpace = this._toolbarWidth();
-    var toolbarItems: IToolbarItem[] = [];
-
-    var moreItem: IDropdown = {
-      type: "dropdown",
-      title: "More",
-      displayName: "More",
-      id: "more-actions-toggle",
-      enabled: ko.observable(true),
-      visible: ko.observable(true),
-      icon: "images/ASX_More.svg",
-      subgroup: []
-    };
-
-    var showHasMoreItem = false;
-    var addSeparator = false;
-    this._actionConfigs.forEach(actionConfig => {
-      if (actionConfig.type === "separator") {
-        addSeparator = true;
-      } else if (remainingToolbarSpace / 60 > 2) {
-        if (addSeparator) {
-          addSeparator = false;
-          toolbarItems.push(Toolbar._createToolbarItemFromConfig({ type: "separator" }));
-          remainingToolbarSpace -= 10;
-        }
-
-        toolbarItems.push(Toolbar._createToolbarItemFromConfig(actionConfig));
-        remainingToolbarSpace -= 60;
-      } else {
-        showHasMoreItem = true;
-        if (addSeparator) {
-          addSeparator = false;
-          moreItem.subgroup.push({
-            type: "separator"
-          });
-        }
-
-        if (!!actionConfig) {
-          moreItem.subgroup.push(actionConfig);
-        }
-      }
-    });
-
-    if (showHasMoreItem) {
-      toolbarItems.push(
-        Toolbar._createToolbarItemFromConfig({ type: "separator" }),
-        Toolbar._createToolbarItemFromConfig(moreItem)
-      );
-    }
-
-    return toolbarItems;
-  });
-
-  public focus() {
-    this._hasFocus = true;
-    this._focusFirstEnabledItem(this.toolbarItems());
-  }
-
-  private _focusFirstEnabledItem = (items: IToolbarItem[]) => {
-    if (!!this._focusedSubscription) {
-      // no memory leaks! :D
-      this._focusedSubscription.dispose();
-    }
-    if (this._hasFocus) {
-      for (var i = 0; i < items.length; i++) {
-        if (items[i].type !== "separator" && (<any>items[i]).enabled()) {
-          (<any>items[i]).focused(true);
-          this._focusedSubscription = (<any>items[i]).focused.subscribe((newValue: any) => {
-            if (!newValue) {
-              this._hasFocus = false;
-              this._focusedSubscription.dispose();
-            }
-          });
-          break;
-        }
-      }
-    }
-  };
-
-  private static _createToolbarItemFromConfig(
-    configItem: IActionConfigItem,
-    afterExecute?: (id: string) => void
-  ): IToolbarItem {
-    switch (configItem.type) {
-      case "dropdown":
-        return new ToolbarDropDown(configItem, afterExecute);
-      case "action":
-        return new ToolbarAction(configItem, afterExecute);
-      case "toggle":
-        return new ToolbarToggle(configItem, afterExecute);
-      case "separator":
-        return {
-          type: "separator",
-          visible: ko.observable(true)
-        };
-    }
-  }
-}
-
-/**
- * Helper class for ko component registration
- */
-export class ToolbarComponent {
-  constructor() {
-    return {
-      viewModel: Toolbar,
-      template
-    };
-  }
-}

src/Explorer/Controls/Toolbar/ToolbarAction.ts

@@ -1,86 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import * as ko from "knockout";
-import { IAction } from "./IToolbarDropDown";
-import IToolbarAction from "./IToolbarAction";
-import KeyCodes from "./KeyCodes";
-import Utilities from "./Utilities";
-
-export default class ToolbarAction implements IToolbarAction {
-  public type: "action" = "action";
-  public id: string;
-  public icon: string;
-  public title: ko.Observable<string>;
-  public displayName: ko.Observable<string>;
-  public enabled: ko.Subscribable<boolean>;
-  public visible: ko.Observable<boolean>;
-  public focused: ko.Observable<boolean>;
-  public action: () => void;
-  private _afterExecute: (id: string) => void;
-
-  constructor(actionItem: IAction, afterExecute?: (id: string) => void) {
-    this.action = actionItem.action;
-    this.title = ko.observable(actionItem.title);
-    this.displayName = ko.observable(actionItem.displayName);
-    this.id = actionItem.id;
-    this.enabled = actionItem.enabled;
-    this.visible = actionItem.visible ? actionItem.visible : ko.observable(true);
-    this.focused = ko.observable(false);
-    this.icon = actionItem.icon;
-    this._afterExecute = afterExecute;
-  }
-
-  private _executeAction = () => {
-    this.action();
-    if (!!this._afterExecute) {
-      this._afterExecute(this.id);
-    }
-  };
-
-  public mouseDown = (data: any, event: MouseEvent): boolean => {
-    this._executeAction();
-    return false;
-  };
-
-  public keyUp = (data: any, event: KeyboardEvent): boolean => {
-    var handled: boolean = false;
-
-    handled = Utilities.onEnter(event, ($sourceElement: JQuery) => {
-      this._executeAction();
-      if ($sourceElement.hasClass("active")) {
-        $sourceElement.removeClass("active");
-      }
-      return true;
-    });
-
-    return !handled;
-  };
-
-  public keyDown = (data: any, event: KeyboardEvent): boolean => {
-    var handled: boolean = false;
-
-    handled = Utilities.onEnter(event, ($sourceElement: JQuery) => {
-      if ($sourceElement.hasClass("active")) {
-        $sourceElement.removeClass("active");
-      }
-      return true;
-    });
-
-    if (!handled) {
-      // Reset color if [shift-] tabbing, 'up/down arrowing', or 'esc'-aping away from button while holding down 'enter'
-      Utilities.onKeys(
-        event,
-        [KeyCodes.Tab, KeyCodes.UpArrow, KeyCodes.DownArrow, KeyCodes.Esc],
-        ($sourceElement: JQuery) => {
-          if ($sourceElement.hasClass("active")) {
-            $sourceElement.removeClass("active");
-          }
-        }
-      );
-    }
-
-    return !handled;
-  };
-}

src/Explorer/Controls/Toolbar/ToolbarDropDown.ts

@@ -1,167 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import * as ko from "knockout";
-import { IDropdown } from "./IToolbarDropDown";
-import { IActionConfigItem } from "./IToolbarDropDown";
-import IToolbarDropDown from "./IToolbarDropDown";
-import KeyCodes from "./KeyCodes";
-import Utilities from "./Utilities";
-
-interface IMenuItem {
-  id?: string;
-  type: "normal" | "separator" | "submenu";
-  label?: string;
-  enabled?: boolean;
-  visible?: boolean;
-  submenu?: IMenuItem[];
-}
-
-export default class ToolbarDropDown implements IToolbarDropDown {
-  public type: "dropdown" = "dropdown";
-  public title: ko.Observable<string>;
-  public displayName: ko.Observable<string>;
-  public id: string;
-  public enabled: ko.Observable<boolean>;
-  public visible: ko.Observable<boolean>;
-  public focused: ko.Observable<boolean>;
-  public icon: string;
-  public subgroup: IActionConfigItem[] = [];
-  public expanded: ko.Observable<boolean> = ko.observable(false);
-  private _afterExecute: (id: string) => void;
-
-  constructor(dropdown: IDropdown, afterExecute?: (id: string) => void) {
-    this.subgroup = dropdown.subgroup;
-    this.title = ko.observable(dropdown.title);
-    this.displayName = ko.observable(dropdown.displayName);
-    this.id = dropdown.id;
-    this.enabled = dropdown.enabled;
-    this.visible = dropdown.visible ? dropdown.visible : ko.observable(true);
-    this.focused = ko.observable(false);
-    this.icon = dropdown.icon;
-    this._afterExecute = afterExecute;
-  }
-
-  private static _convertToMenuItem = (
-    actionConfigs: IActionConfigItem[],
-    actionMap: { [id: string]: () => void } = {}
-  ): { menuItems: IMenuItem[]; actionMap: { [id: string]: () => void } } => {
-    var returnValue = {
-      menuItems: actionConfigs.map<IMenuItem>((actionConfig: IActionConfigItem, index, array) => {
-        var menuItem: IMenuItem;
-        switch (actionConfig.type) {
-          case "action":
-            menuItem = <IMenuItem>{
-              id: actionConfig.id,
-              type: "normal",
-              label: actionConfig.displayName,
-              enabled: actionConfig.enabled(),
-              visible: actionConfig.visible ? actionConfig.visible() : true
-            };
-            actionMap[actionConfig.id] = actionConfig.action;
-            break;
-          case "dropdown":
-            menuItem = <IMenuItem>{
-              id: actionConfig.id,
-              type: "submenu",
-              label: actionConfig.displayName,
-              enabled: actionConfig.enabled(),
-              visible: actionConfig.visible ? actionConfig.visible() : true,
-              submenu: ToolbarDropDown._convertToMenuItem(actionConfig.subgroup, actionMap).menuItems
-            };
-            break;
-          case "toggle":
-            menuItem = <IMenuItem>{
-              id: actionConfig.id,
-              type: "normal",
-              label: actionConfig.checked() ? actionConfig.checkedDisplayName : actionConfig.displayName,
-              enabled: actionConfig.enabled(),
-              visible: actionConfig.visible ? actionConfig.visible() : true
-            };
-            actionMap[actionConfig.id] = () => {
-              actionConfig.checked(!actionConfig.checked());
-            };
-            break;
-          case "separator":
-            menuItem = <IMenuItem>{
-              type: "separator",
-              visible: true
-            };
-            break;
-        }
-        return menuItem;
-      }),
-      actionMap: actionMap
-    };
-
-    return returnValue;
-  };
-
-  public open = () => {
-    if (!!(<any>window).host) {
-      var convertedMenuItem = ToolbarDropDown._convertToMenuItem(this.subgroup);
-
-      (<any>window).host
-        .executeProviderOperation("MenuManager.showMenu", {
-          iFrameStack: [`#${window.frameElement.id}`],
-          anchor: `#${this.id}`,
-          menuItems: convertedMenuItem.menuItems
-        })
-        .then((id?: string) => {
-          if (!!id && !!convertedMenuItem.actionMap[id]) {
-            convertedMenuItem.actionMap[id]();
-          }
-        });
-
-      if (!!this._afterExecute) {
-        this._afterExecute(this.id);
-      }
-    }
-  };
-
-  public mouseDown = (data: any, event: MouseEvent): boolean => {
-    this.open();
-    return false;
-  };
-
-  public keyUp = (data: any, event: KeyboardEvent): boolean => {
-    var handled: boolean = false;
-
-    handled = Utilities.onEnter(event, ($sourceElement: JQuery) => {
-      this.open();
-      if ($sourceElement.hasClass("active")) {
-        $sourceElement.removeClass("active");
-      }
-      return true;
-    });
-
-    return !handled;
-  };
-
-  public keyDown = (data: any, event: KeyboardEvent): boolean => {
-    var handled: boolean = false;
-
-    handled = Utilities.onEnter(event, ($sourceElement: JQuery) => {
-      if ($sourceElement.hasClass("active")) {
-        $sourceElement.removeClass("active");
-      }
-      return true;
-    });
-
-    if (!handled) {
-      // Reset color if [shift-] tabbing, 'up/down arrowing', or 'esc'-aping away from button while holding down 'enter'
-      Utilities.onKeys(
-        event,
-        [KeyCodes.Tab, KeyCodes.UpArrow, KeyCodes.DownArrow, KeyCodes.Esc],
-        ($sourceElement: JQuery) => {
-          if ($sourceElement.hasClass("active")) {
-            $sourceElement.removeClass("active");
-          }
-        }
-      );
-    }
-
-    return !handled;
-  };
-}

src/Explorer/Controls/Toolbar/ToolbarToggle.ts

@@ -1,109 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import * as ko from "knockout";
-import { IToggle } from "./IToolbarDropDown";
-import IToolbarToggle from "./IToolbarToggle";
-import KeyCodes from "./KeyCodes";
-import Utilities from "./Utilities";
-
-export default class ToolbarToggle implements IToolbarToggle {
-  public type: "toggle" = "toggle";
-  public checked: ko.Observable<boolean>;
-  public id: string;
-  public enabled: ko.Observable<boolean>;
-  public visible: ko.Observable<boolean>;
-  public focused: ko.Observable<boolean>;
-  public icon: string;
-
-  private _title: string;
-  private _displayName: string;
-  private _checkedTitle: string;
-  private _checkedDisplayName: string;
-
-  private _afterExecute: (id: string) => void;
-
-  constructor(toggleItem: IToggle, afterExecute?: (id: string) => void) {
-    this._title = toggleItem.title;
-    this._displayName = toggleItem.displayName;
-    this.id = toggleItem.id;
-    this.enabled = toggleItem.enabled;
-    this.visible = toggleItem.visible ? toggleItem.visible : ko.observable(true);
-    this.focused = ko.observable(false);
-    this.icon = toggleItem.icon;
-    this.checked = toggleItem.checked;
-    this._checkedTitle = toggleItem.checkedTitle;
-    this._checkedDisplayName = toggleItem.checkedDisplayName;
-    this._afterExecute = afterExecute;
-  }
-
-  public title = ko.pureComputed(() => {
-    if (this.checked()) {
-      return this._checkedTitle;
-    } else {
-      return this._title;
-    }
-  });
-
-  public displayName = ko.pureComputed(() => {
-    if (this.checked()) {
-      return this._checkedDisplayName;
-    } else {
-      return this._displayName;
-    }
-  });
-
-  public toggle = () => {
-    this.checked(!this.checked());
-
-    if (this.checked() && !!this._afterExecute) {
-      this._afterExecute(this.id);
-    }
-  };
-
-  public mouseDown = (data: any, event: MouseEvent): boolean => {
-    this.toggle();
-    return false;
-  };
-
-  public keyUp = (data: any, event: KeyboardEvent): boolean => {
-    var handled: boolean = false;
-
-    handled = Utilities.onEnter(event, ($sourceElement: JQuery) => {
-      this.toggle();
-      if ($sourceElement.hasClass("active")) {
-        $sourceElement.removeClass("active");
-      }
-      return true;
-    });
-
-    return !handled;
-  };
-
-  public keyDown = (data: any, event: KeyboardEvent): boolean => {
-    var handled: boolean = false;
-
-    handled = Utilities.onEnter(event, ($sourceElement: JQuery) => {
-      if ($sourceElement.hasClass("active")) {
-        $sourceElement.removeClass("active");
-      }
-      return true;
-    });
-
-    if (!handled) {
-      // Reset color if [shift-] tabbing, 'up/down arrowing', or 'esc'-aping away from button while holding down 'enter'
-      Utilities.onKeys(
-        event,
-        [KeyCodes.Tab, KeyCodes.UpArrow, KeyCodes.DownArrow, KeyCodes.Esc],
-        ($sourceElement: JQuery) => {
-          if ($sourceElement.hasClass("active")) {
-            $sourceElement.removeClass("active");
-          }
-        }
-      );
-    }
-
-    return !handled;
-  };
-}

src/Explorer/Controls/Toolbar/Utilities.ts

@@ -1,166 +0,0 @@
-/*!---------------------------------------------------------
- * Copyright (C) Microsoft Corporation. All rights reserved.
- *----------------------------------------------------------*/
-
-import KeyCodes from "./KeyCodes";
-
-export default class Utilities {
-  /**
-   * Executes an action on a keyboard event.
-   * Modifiers: ctrlKey - control/command key, shiftKey - shift key, altKey - alt/option key;
-   * pass on 'null' to ignore the modifier (default).
-   */
-  public static onKey(
-    event: any,
-    eventKeyCode: number,
-    action: ($sourceElement: JQuery) => void,
-    metaKey: boolean = null,
-    shiftKey: boolean = null,
-    altKey: boolean = null
-  ): boolean {
-    var source: any = event.target || event.srcElement,
-      keyCode: number = event.keyCode,
-      $sourceElement = $(source),
-      handled: boolean = false;
-
-    if (
-      $sourceElement.length &&
-      keyCode === eventKeyCode &&
-      $.isFunction(action) &&
-      (metaKey === null || metaKey === event.metaKey) &&
-      (shiftKey === null || shiftKey === event.shiftKey) &&
-      (altKey === null || altKey === event.altKey)
-    ) {
-      action($sourceElement);
-      handled = true;
-    }
-
-    return handled;
-  }
-
-  /**
-   * Executes an action on the first matched keyboard event.
-   */
-  public static onKeys(
-    event: any,
-    eventKeyCodes: number[],
-    action: ($sourceElement: JQuery) => void,
-    metaKey: boolean = null,
-    shiftKey: boolean = null,
-    altKey: boolean = null
-  ): boolean {
-    var handled: boolean = false,
-      keyCount: number,
-      i: number;
-
-    if ($.isArray(eventKeyCodes)) {
-      keyCount = eventKeyCodes.length;
-
-      for (i = 0; i < keyCount; ++i) {
-        handled = Utilities.onKey(event, eventKeyCodes[i], action, metaKey, shiftKey, altKey);
-
-        if (handled) {
-          break;
-        }
-      }
-    }
-
-    return handled;
-  }
-
-  /**
-   * Executes an action on an 'enter' keyboard event.
-   */
-  public static onEnter(
-    event: any,
-    action: ($sourceElement: JQuery) => void,
-    metaKey: boolean = null,
-    shiftKey: boolean = null,
-    altKey: boolean = null
-  ): boolean {
-    return Utilities.onKey(event, KeyCodes.Enter, action, metaKey, shiftKey, altKey);
-  }
-
-  /**
-   * Executes an action on a 'tab' keyboard event.
-   */
-  public static onTab(
-    event: any,
-    action: ($sourceElement: JQuery) => void,
-    metaKey: boolean = null,
-    shiftKey: boolean = null,
-    altKey: boolean = null
-  ): boolean {
-    return Utilities.onKey(event, KeyCodes.Tab, action, metaKey, shiftKey, altKey);
-  }
-
-  /**
-   * Executes an action on an 'Esc' keyboard event.
-   */
-  public static onEsc(
-    event: any,
-    action: ($sourceElement: JQuery) => void,
-    metaKey: boolean = null,
-    shiftKey: boolean = null,
-    altKey: boolean = null
-  ): boolean {
-    return Utilities.onKey(event, KeyCodes.Esc, action, metaKey, shiftKey, altKey);
-  }
-
-  /**
-   * Executes an action on an 'UpArrow' keyboard event.
-   */
-  public static onUpArrow(
-    event: any,
-    action: ($sourceElement: JQuery) => void,
-    metaKey: boolean = null,
-    shiftKey: boolean = null,
-    altKey: boolean = null
-  ): boolean {
-    return Utilities.onKey(event, KeyCodes.UpArrow, action, metaKey, shiftKey, altKey);
-  }
-
-  /**
-   * Executes an action on a 'DownArrow' keyboard event.
-   */
-  public static onDownArrow(
-    event: any,
-    action: ($sourceElement: JQuery) => void,
-    metaKey: boolean = null,
-    shiftKey: boolean = null,
-    altKey: boolean = null
-  ): boolean {
-    return Utilities.onKey(event, KeyCodes.DownArrow, action, metaKey, shiftKey, altKey);
-  }
-
-  /**
-   * Executes an action on a mouse event.
-   */
-  public static onButton(event: any, eventButtonCode: number, action: ($sourceElement: JQuery) => void): boolean {
-    var source: any = event.currentTarget;
-    var buttonCode: number = event.button;
-    var $sourceElement = $(source);
-    var handled: boolean = false;
-
-    if ($sourceElement.length && buttonCode === eventButtonCode && $.isFunction(action)) {
-      action($sourceElement);
-      handled = true;
-    }
-
-    return handled;
-  }
-
-  /**
-   * Executes an action on a 'left' mouse event.
-   */
-  public static onLeftButton(event: any, action: ($sourceElement: JQuery) => void): boolean {
-    return Utilities.onButton(event, buttonCodes.Left, action);
-  }
-}
-
-var buttonCodes = {
-  None: -1,
-  Left: 0,
-  Middle: 1,
-  Right: 2
-};

src/Explorer/Controls/Toolbar/toolbar.html

@@ -1,44 +0,0 @@
-<div class="toolbar">
-  <!-- ko template: { name: 'toolbarItemTemplate', foreach: toolbarItems } -->
-  <!-- /ko -->
-</div>
-
-<script type="text/html" id="toolbarItemTemplate">
-  <!-- ko if: type === "action" -->
-  <div class="toolbar-group" data-bind="visible: visible">
-      <button class="toolbar-group-button" data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled">
-              <div class="toolbar-group-button-icon">
-                  <div class="toolbar_icon" data-bind="icon: icon"></div>
-              </div>
-              <span data-bind="text: displayName"></span>
-          </button>
-  </div>
-  <!-- /ko -->
-
-  <!-- ko if: type === "toggle" -->
-  <div class="toolbar-group" data-bind="visible: visible">
-      <button class="toolbar-group-button toggle-button" data-bind="hasFocus: focused, attr: {id: id, title: title}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled">
-              <div class="toolbar-group-button-icon" data-bind="css: { 'toggle-checked': checked }">
-                  <div class="toolbar_icon"  data-bind="icon: icon"></div>
-              </div>
-              <span data-bind="text: displayName"></span>
-          </button>
-  </div>
-  <!-- /ko -->
-  <!-- ko if: type === "dropdown" -->
-  <div class="toolbar-group" data-bind="visible: visible">
-      <div class="dropdown" data-bind="attr: {id: (id + '-dropdown')}">
-          <button role="menu" class="toolbar-group-button" data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName},  event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled">
-                  <div class="toolbar-group-button-icon">
-                      <div class="toolbar_icon" data-bind="icon: icon"></div>
-                  </div>
-                  <span data-bind="text: displayName"></span>
-              </button>
-      </div>
-  </div>
-  <!-- /ko -->
-
-  <!-- ko if: type === "separator" -->
-  <div class="toolbar-group vertical-separator" data-bind="visible: visible"></div>
-  <!-- /ko -->
-</script>

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -1,12 +1,14 @@
+jest.mock("../../Common/DocumentClientUtilityBase");
+jest.mock("../../Common/dataAccess/createCollection");
 import * as ko from "knockout";
 import * as sinon from "sinon";
 import * as ViewModels from "../../Contracts/ViewModels";
-import DocumentClientUtilityBase from "../../Common/DocumentClientUtilityBase";
 import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
-import { CosmosClient } from "../../Common/CosmosClient";
+import * as DocumentClientUtility from "../../Common/DocumentClientUtilityBase";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
 import Explorer from "../Explorer";
+import { updateUserContext } from "../../UserContext";
 
 describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
@@ -32,8 +34,8 @@ describe("ContainerSampleGenerator", () => {
       databaseId: sampleDatabaseId,
       offerThroughput: 400,
       databaseLevelThroughput: false,
+      createNewDatabase: true,
       collectionId: sampleCollectionId,
-      rupmEnabled: false,
       data: [
         {
           firstname: "Eva",
@@ -62,27 +64,33 @@ describe("ContainerSampleGenerator", () => {
 
     const explorerStub = createExplorerStub(database);
     explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => true);
-
-    const fakeDocumentClientUtility = sinon.createStubInstance(DocumentClientUtilityBase);
-    fakeDocumentClientUtility.getOrCreateDatabaseAndCollection.returns(Q.resolve(collection));
-    fakeDocumentClientUtility.createDocument.returns(Q.resolve());
-
-    explorerStub.documentClientUtility = fakeDocumentClientUtility;
-
     const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
     generator.setData(sampleData);
 
     await generator.createSampleContainerAsync();
 
-    expect(fakeDocumentClientUtility.createDocument.called).toBe(true);
+    expect(DocumentClientUtility.createDocument).toHaveBeenCalled();
   });
 
   it("should send gremlin queries for Graph API account", async () => {
     sinon.stub(GremlinClient.prototype, "initialize").callsFake(() => {});
     const executeStub = sinon.stub(GremlinClient.prototype, "execute").returns(Q.resolve());
 
-    sinon.stub(CosmosClient, "databaseAccount").returns({
-      properties: {}
+    updateUserContext({
+      databaseAccount: {
+        id: "foo",
+        name: "foo",
+        location: "foo",
+        type: "foo",
+        kind: "foo",
+        tags: [],
+        properties: {
+          documentEndpoint: "bar",
+          gremlinEndpoint: "foo",
+          tableEndpoint: "foo",
+          cassandraEndpoint: "foo"
+        }
+      }
     });
 
     const sampleCollectionId = "SampleCollection";
@@ -92,8 +100,8 @@ describe("ContainerSampleGenerator", () => {
       databaseId: sampleDatabaseId,
       offerThroughput: 400,
       databaseLevelThroughput: false,
+      createNewDatabase: true,
       collectionId: sampleCollectionId,
-      rupmEnabled: false,
       data: [
         "g.addV('person').property(id, '1').property('_partitionKey','pk').property('name', 'Eva').property('age', 44)"
       ]
@@ -109,18 +117,12 @@ describe("ContainerSampleGenerator", () => {
     const explorerStub = createExplorerStub(database);
     explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => true);
 
-    const fakeDocumentClientUtility = sinon.createStubInstance(DocumentClientUtilityBase);
-    fakeDocumentClientUtility.getOrCreateDatabaseAndCollection.returns(Q.resolve(collection));
-    fakeDocumentClientUtility.createDocument.returns(Q.resolve());
-
-    explorerStub.documentClientUtility = fakeDocumentClientUtility;
-
     const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
     generator.setData(sampleData);
 
     await generator.createSampleContainerAsync();
 
-    expect(fakeDocumentClientUtility.createDocument.called).toBe(false);
+    expect(DocumentClientUtility.createDocument).toHaveBeenCalled();
     expect(executeStub.called).toBe(true);
   });
 

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -1,14 +1,15 @@
-import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import GraphTab from ".././Tabs/GraphTab";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import { CosmosClient } from "../../Common/CosmosClient";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
-import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import { createDocument } from "../../Common/DocumentClientUtilityBase";
+import { createCollection } from "../../Common/dataAccess/createCollection";
+import { userContext } from "../../UserContext";
 
-interface SampleDataFile extends DataModels.CreateDatabaseAndCollectionRequest {
+interface SampleDataFile extends DataModels.CreateCollectionParams {
   data: any[];
 }
 
@@ -53,18 +54,11 @@ export class ContainerSampleGenerator {
   }
 
   private async createContainerAsync(): Promise<ViewModels.Collection> {
-    const createRequest: DataModels.CreateDatabaseAndCollectionRequest = {
+    const createRequest: DataModels.CreateCollectionParams = {
       ...this.sampleDataFile
     };
 
-    const options: any = {};
-    if (this.container.isPreferredApiMongoDB()) {
-      options.initialHeaders = options.initialHeaders || {};
-      options.initialHeaders[Constants.HttpHeaders.supportSpatialLegacyCoordinates] = true;
-      options.initialHeaders[Constants.HttpHeaders.usePolygonsSmallerThanAHemisphere] = true;
-    }
-
-    await this.container.documentClientUtility.getOrCreateDatabaseAndCollection(createRequest, options);
+    await createCollection(createRequest);
     await this.container.refreshAllDatabases();
     const database = this.container.findDatabaseWithId(this.sampleDataFile.databaseId);
     if (!database) {
@@ -86,14 +80,14 @@ export class ContainerSampleGenerator {
       if (!queries || queries.length < 1) {
         return;
       }
-      const account = CosmosClient.databaseAccount();
+      const account = userContext.databaseAccount;
       const databaseId = collection.databaseId;
       const gremlinClient = new GremlinClient();
       gremlinClient.initialize({
         endpoint: `wss://${GraphTab.getGremlinEndpoint(account)}`,
         databaseId: databaseId,
         collectionId: collection.id(),
-        masterKey: CosmosClient.masterKey() || "",
+        masterKey: userContext.masterKey || "",
         maxResultSize: 100
       });
 
@@ -103,7 +97,7 @@ export class ContainerSampleGenerator {
     } else {
       // For SQL all queries are executed at the same time
       this.sampleDataFile.data.forEach(doc => {
-        const subPromise = this.container.documentClientUtility.createDocument(collection, doc);
+        const subPromise = createDocument(collection, doc);
         subPromise.catch(reason => NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, reason));
         promises.push(subPromise);
       });

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,6 +1,6 @@
 import * as ViewModels from "../../Contracts/ViewModels";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
-import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import Explorer from "../Explorer";
 

src/Explorer/Explorer.ts

@@ -15,16 +15,18 @@ import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import Database from "./Tree/Database";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import DocumentClientUtilityBase from "../Common/DocumentClientUtilityBase";
+import { readOffers, refreshCachedResources } from "../Common/DocumentClientUtilityBase";
+import { readCollection } from "../Common/dataAccess/readCollection";
+import { readDatabases } from "../Common/dataAccess/readDatabases";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
 import EnvironmentUtility from "../Common/EnvironmentUtility";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import hasher from "hasher";
 import NewVertexPane from "./Panes/NewVertexPane";
-import NotebookV2Tab from "./Tabs/NotebookV2Tab";
+import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import Q from "q";
 import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import TerminalTab from "./Tabs/TerminalTab";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import { ActionContracts, MessageTypes } from "../Contracts/ExplorerContracts";
@@ -33,12 +35,10 @@ import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
-import { CassandraApi } from "../Api/Apis";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
-import { config } from "../Config";
+import { configContext, updateConfigContext } from "../ConfigContext";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import { CosmosClient } from "../Common/CosmosClient";
 import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
 import { DialogComponentAdapter } from "./Controls/DialogReactComponent/DialogComponentAdapter";
@@ -52,12 +52,12 @@ import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
 import { IGalleryItem } from "../Juno/JunoClient";
 import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import * as Logger from "../Common/Logger";
-import { MessageHandler } from "../Common/MessageHandler";
+import { sendMessage, sendCachedDataMessage, handleCachedDataMessage } from "../Common/MessageHandler";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import { NotificationConsoleComponentAdapter } from "./Menus/NotificationConsole/NotificationConsoleComponentAdapter";
-import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { PlatformType } from "../PlatformType";
 import { QueriesClient } from "../Common/QueriesClient";
 import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
@@ -82,6 +82,11 @@ import { toRawContentUri, fromContentUri } from "../Utils/GitHubUtils";
 import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
+import { NotificationsClientBase } from "../Common/NotificationsClientBase";
+import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import TabsBase from "./Tabs/TabsBase";
+import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
+import { updateUserContext, userContext } from "../UserContext";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -92,6 +97,15 @@ enum ShareAccessToggleState {
   Read
 }
 
+interface ExplorerOptions {
+  notificationsClient: NotificationsClientBase;
+  isEmulator: boolean;
+}
+interface AdHocAccessData {
+  readWriteUrl: string;
+  readUrl: string;
+}
+
 export default class Explorer {
   public flight: ko.Observable<string> = ko.observable<string>(
     SharedConstants.CollectionCreation.DefaultAddCollectionDefaultFlight
@@ -107,7 +121,7 @@ export default class Explorer {
   public hasWriteAccess: ko.Observable<boolean>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
-  public databaseAccount: ko.Observable<ViewModels.DatabaseAccount>;
+  public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
   public subscriptionType: ko.Observable<ViewModels.SubscriptionType>;
   public quotaId: ko.Observable<string>;
@@ -118,6 +132,7 @@ export default class Explorer {
   public isPreferredApiGraph: ko.Computed<boolean>;
   public isPreferredApiTable: ko.Computed<boolean>;
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
+  public isServerlessEnabled: ko.Computed<boolean>;
   public isEmulator: boolean;
   public isAccountReady: ko.Observable<boolean>;
   public canSaveQueries: ko.Computed<boolean>;
@@ -126,9 +141,8 @@ export default class Explorer {
   public extensionEndpoint: ko.Observable<string>;
   public armEndpoint: ko.Observable<string>;
   public isTryCosmosDBSubscription: ko.Observable<boolean>;
-  public documentClientUtility: DocumentClientUtilityBase;
-  public notificationsClient: ViewModels.NotificationsClient;
-  public queriesClient: ViewModels.QueriesClient;
+  public notificationsClient: NotificationsClientBase;
+  public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
   public parentFrameDataExplorerVersion: ko.Observable<string> = ko.observable<string>("");
@@ -139,7 +153,7 @@ export default class Explorer {
   public isNotificationConsoleExpanded: ko.Observable<boolean>;
 
   // Panes
-  public contextPanes: ViewModels.ContextualPane[];
+  public contextPanes: ContextualPaneBase[];
 
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
@@ -184,25 +198,29 @@ export default class Explorer {
   public uploadItemsPane: UploadItemsPane;
   public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
   public loadQueryPane: LoadQueryPane;
-  public saveQueryPane: ViewModels.ContextualPane;
+  public saveQueryPane: ContextualPaneBase;
   public browseQueriesPane: BrowseQueriesPane;
   public uploadFilePane: UploadFilePane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
-  public gitHubReposPane: ViewModels.ContextualPane;
+  public gitHubReposPane: ContextualPaneBase;
   public publishNotebookPaneAdapter: ReactAdapter;
+  public copyNotebookPaneAdapter: ReactAdapter;
 
   // features
   public isGalleryPublishEnabled: ko.Computed<boolean>;
+  public isCodeOfConductEnabled: ko.Computed<boolean>;
+  public isLinkInjectionEnabled: ko.Computed<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
+  public isCopyNotebookPaneEnabled: ko.Observable<boolean>;
   public isHostedDataExplorerEnabled: ko.Computed<boolean>;
   public isRightPanelV2Enabled: ko.Computed<boolean>;
   public canExceedMaximumValue: ko.Computed<boolean>;
   public hasAutoPilotV2FeatureFlag: ko.Computed<boolean>;
 
   public shouldShowShareDialogContents: ko.Observable<boolean>;
-  public shareAccessData: ko.Observable<ViewModels.AdHocAccessData>;
+  public shareAccessData: ko.Observable<AdHocAccessData>;
   public renewExplorerShareAccess: (explorer: Explorer, token: string) => Q.Promise<void>;
   public renewTokenError: ko.Observable<string>;
   public tokenForRenewal: ko.Observable<string>;
@@ -225,10 +243,9 @@ export default class Explorer {
   public arcadiaWorkspaces: ko.ObservableArray<ArcadiaWorkspaceItem>;
   public hasStorageAnalyticsAfecFeature: ko.Observable<boolean>;
   public isSynapseLinkUpdating: ko.Observable<boolean>;
-  public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
   public notebookManager?: any; // This is dynamically loaded
 
-  private _panes: ViewModels.ContextualPane[] = [];
+  private _panes: ContextualPaneBase[] = [];
   private _importExplorerConfigComplete: boolean = false;
   private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = database => false;
   private _isInitializingNotebooks: boolean;
@@ -251,7 +268,7 @@ export default class Explorer {
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
-  constructor(options: ViewModels.ExplorerOptions) {
+  constructor(options: ExplorerOptions) {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree
     });
@@ -264,7 +281,7 @@ export default class Explorer {
     this.deleteDatabaseText = ko.observable<string>("Delete Database");
     this.refreshTreeTitle = ko.observable<string>("Refresh collections");
 
-    this.databaseAccount = ko.observable<ViewModels.DatabaseAccount>();
+    this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
     this.subscriptionType = ko.observable<ViewModels.SubscriptionType>(
       SharedConstants.CollectionCreation.DefaultSubscriptionType
     );
@@ -356,8 +373,6 @@ export default class Explorer {
         );
       }
     });
-    this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
-    this.documentClientUtility = options.documentClientUtility;
     this.notificationsClient = options.notificationsClient;
     this.isEmulator = options.isEmulator;
 
@@ -374,7 +389,7 @@ export default class Explorer {
     this.resourceTokenPartitionKey = ko.observable<string>();
     this.isAuthWithResourceToken = ko.observable<boolean>(false);
 
-    this.shareAccessData = ko.observable<ViewModels.AdHocAccessData>({
+    this.shareAccessData = ko.observable<AdHocAccessData>({
       readWriteUrl: undefined,
       readUrl: undefined
     });
@@ -397,8 +412,15 @@ export default class Explorer {
     this.isGalleryPublishEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableGalleryPublish)
     );
+    this.isCodeOfConductEnabled = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.enableCodeOfConduct)
+    );
+    this.isLinkInjectionEnabled = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.enableLinkInjection)
+    );
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
+    this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
     this.canExceedMaximumValue = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
@@ -459,8 +481,14 @@ export default class Explorer {
     });
     this.notificationConsoleData = ko.observableArray<ConsoleData>([]);
     this.defaultExperience = ko.observable<string>();
-    this.databaseAccount.subscribe((databaseAccount: ViewModels.DatabaseAccount) => {
-      this.defaultExperience(DefaultExperienceUtility.getDefaultExperienceFromDatabaseAccount(databaseAccount));
+    this.databaseAccount.subscribe(databaseAccount => {
+      const defaultExperience: string = DefaultExperienceUtility.getDefaultExperienceFromDatabaseAccount(
+        databaseAccount
+      );
+      this.defaultExperience(defaultExperience);
+      updateUserContext({
+        defaultExperience: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience)
+      });
     });
 
     this.isPreferredApiDocumentDB = ko.computed(() => {
@@ -509,6 +537,14 @@ export default class Explorer {
       return false;
     });
 
+    this.isServerlessEnabled = ko.computed(
+      () =>
+        this.databaseAccount &&
+        this.databaseAccount()?.properties?.capabilities?.find(
+          item => item.name === Constants.CapabilityNames.EnableServerless
+        ) !== undefined
+    );
+
     this.isPreferredApiMongoDB = ko.computed(() => {
       const defaultExperience = (this.defaultExperience && this.defaultExperience()) || "";
       if (defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.MongoDB.toLowerCase()) {
@@ -544,8 +580,9 @@ export default class Explorer {
         defaultExperience &&
         defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase()
       ) {
-        const api = new CassandraApi();
-        this._isSystemDatabasePredicate = api.isSystemDatabasePredicate;
+        this._isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
+          return database.id() === "system";
+        };
       }
     });
 
@@ -575,7 +612,6 @@ export default class Explorer {
     });
 
     this.addDatabasePane = new AddDatabasePane({
-      documentClientUtility: this.documentClientUtility,
       id: "adddatabasepane",
       visible: ko.observable<boolean>(false),
 
@@ -584,7 +620,6 @@ export default class Explorer {
 
     this.addCollectionPane = new AddCollectionPane({
       isPreferredApiTable: ko.computed(() => this.isPreferredApiTable()),
-      documentClientUtility: this.documentClientUtility,
       id: "addcollectionpane",
       visible: ko.observable<boolean>(false),
 
@@ -592,7 +627,6 @@ export default class Explorer {
     });
 
     this.deleteCollectionConfirmationPane = new DeleteCollectionConfirmationPane({
-      documentClientUtility: this.documentClientUtility,
       id: "deletecollectionconfirmationpane",
       visible: ko.observable<boolean>(false),
 
@@ -600,7 +634,6 @@ export default class Explorer {
     });
 
     this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
-      documentClientUtility: this.documentClientUtility,
       id: "deletedatabaseconfirmationpane",
       visible: ko.observable<boolean>(false),
 
@@ -608,7 +641,6 @@ export default class Explorer {
     });
 
     this.graphStylingPane = new GraphStylingPane({
-      documentClientUtility: this.documentClientUtility,
       id: "graphstylingpane",
       visible: ko.observable<boolean>(false),
 
@@ -616,7 +648,6 @@ export default class Explorer {
     });
 
     this.addTableEntityPane = new AddTableEntityPane({
-      documentClientUtility: this.documentClientUtility,
       id: "addtableentitypane",
       visible: ko.observable<boolean>(false),
 
@@ -624,7 +655,6 @@ export default class Explorer {
     });
 
     this.editTableEntityPane = new EditTableEntityPane({
-      documentClientUtility: this.documentClientUtility,
       id: "edittableentitypane",
       visible: ko.observable<boolean>(false),
 
@@ -632,7 +662,6 @@ export default class Explorer {
     });
 
     this.tableColumnOptionsPane = new TableColumnOptionsPane({
-      documentClientUtility: this.documentClientUtility,
       id: "tablecolumnoptionspane",
       visible: ko.observable<boolean>(false),
 
@@ -640,7 +669,6 @@ export default class Explorer {
     });
 
     this.querySelectPane = new QuerySelectPane({
-      documentClientUtility: this.documentClientUtility,
       id: "queryselectpane",
       visible: ko.observable<boolean>(false),
 
@@ -648,7 +676,6 @@ export default class Explorer {
     });
 
     this.newVertexPane = new NewVertexPane({
-      documentClientUtility: this.documentClientUtility,
       id: "newvertexpane",
       visible: ko.observable<boolean>(false),
 
@@ -656,7 +683,6 @@ export default class Explorer {
     });
 
     this.cassandraAddCollectionPane = new CassandraAddCollectionPane({
-      documentClientUtility: this.documentClientUtility,
       id: "cassandraaddcollectionpane",
       visible: ko.observable<boolean>(false),
 
@@ -664,7 +690,6 @@ export default class Explorer {
     });
 
     this.settingsPane = new SettingsPane({
-      documentClientUtility: this.documentClientUtility,
       id: "settingspane",
       visible: ko.observable<boolean>(false),
 
@@ -672,7 +697,6 @@ export default class Explorer {
     });
 
     this.executeSprocParamsPane = new ExecuteSprocParamsPane({
-      documentClientUtility: this.documentClientUtility,
       id: "executesprocparamspane",
       visible: ko.observable<boolean>(false),
 
@@ -680,7 +704,6 @@ export default class Explorer {
     });
 
     this.renewAdHocAccessPane = new RenewAdHocAccessPane({
-      documentClientUtility: this.documentClientUtility,
       id: "renewadhocaccesspane",
       visible: ko.observable<boolean>(false),
 
@@ -688,7 +711,6 @@ export default class Explorer {
     });
 
     this.uploadItemsPane = new UploadItemsPane({
-      documentClientUtility: this.documentClientUtility,
       id: "uploaditemspane",
       visible: ko.observable<boolean>(false),
 
@@ -698,7 +720,6 @@ export default class Explorer {
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
-      documentClientUtility: this.documentClientUtility,
       id: "loadquerypane",
       visible: ko.observable<boolean>(false),
 
@@ -706,7 +727,6 @@ export default class Explorer {
     });
 
     this.saveQueryPane = new SaveQueryPane({
-      documentClientUtility: this.documentClientUtility,
       id: "savequerypane",
       visible: ko.observable<boolean>(false),
 
@@ -714,7 +734,6 @@ export default class Explorer {
     });
 
     this.browseQueriesPane = new BrowseQueriesPane({
-      documentClientUtility: this.documentClientUtility,
       id: "browsequeriespane",
       visible: ko.observable<boolean>(false),
 
@@ -722,7 +741,6 @@ export default class Explorer {
     });
 
     this.uploadFilePane = new UploadFilePane({
-      documentClientUtility: this.documentClientUtility,
       id: "uploadfilepane",
       visible: ko.observable<boolean>(false),
 
@@ -730,7 +748,6 @@ export default class Explorer {
     });
 
     this.stringInputPane = new StringInputPane({
-      documentClientUtility: this.documentClientUtility,
       id: "stringinputpane",
       visible: ko.observable<boolean>(false),
 
@@ -738,7 +755,6 @@ export default class Explorer {
     });
 
     this.setupNotebooksPane = new SetupNotebooksPane({
-      documentClientUtility: this.documentClientUtility,
       id: "setupnotebookspane",
       visible: ko.observable<boolean>(false),
 
@@ -771,7 +787,6 @@ export default class Explorer {
       this.setupNotebooksPane
     ];
     this.addDatabaseText.subscribe((addDatabaseText: string) => this.addDatabasePane.title(addDatabaseText));
-    this.rebindDocumentClientUtility.bind(this);
     this.isTabsContentExpanded = ko.observable(false);
 
     document.addEventListener(
@@ -853,7 +868,7 @@ export default class Explorer {
           this.editTableEntityPane.title("Edit Table Entity");
           this.deleteCollectionConfirmationPane.title("Delete Table");
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-          this.tableDataClient = new TablesAPIDataClient(this.documentClientUtility);
+          this.tableDataClient = new TablesAPIDataClient();
           break;
         case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
           this.addCollectionText("New Table");
@@ -872,7 +887,7 @@ export default class Explorer {
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
           this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
           this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
-          this.tableDataClient = new CassandraAPIDataClient(this.documentClientUtility);
+          this.tableDataClient = new CassandraAPIDataClient();
           break;
       }
     });
@@ -958,6 +973,10 @@ export default class Explorer {
         this.sparkClusterConnectionInfo.valueHasMutated();
       }
 
+      if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
+        updateUserContext({ useSDKOperations: true });
+      }
+
       featureSubcription.dispose();
     });
 
@@ -1018,7 +1037,7 @@ export default class Explorer {
         );
 
         try {
-          const databaseAccount: ViewModels.DatabaseAccount = await resourceProviderClient.patchAsync(
+          const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
             this.databaseAccount().id,
             "2019-12-12",
             {
@@ -1057,13 +1076,6 @@ export default class Explorer {
     // TODO: return result
   }
 
-  public rebindDocumentClientUtility(documentClientUtility: DocumentClientUtilityBase): void {
-    this.documentClientUtility = documentClientUtility;
-    this._panes.forEach((pane: ViewModels.ContextualPane) => {
-      pane.documentClientUtility = documentClientUtility;
-    });
-  }
-
   public copyUrlLink(src: any, event: MouseEvent): void {
     const urlLinkInput: HTMLInputElement = document.getElementById("shareUrlLink") as HTMLInputElement;
     urlLinkInput && urlLinkInput.select();
@@ -1382,7 +1394,7 @@ export default class Explorer {
     }
 
     const deferred: Q.Deferred<void> = Q.defer();
-    this.documentClientUtility.readCollection(databaseId, collectionId).then((collection: DataModels.Collection) => {
+    readCollection(databaseId, collectionId).then((collection: DataModels.Collection) => {
       this.resourceTokenCollection(new ResourceTokenCollection(this, databaseId, collection));
       this.selectedNode(this.resourceTokenCollection());
       deferred.resolve();
@@ -1406,66 +1418,71 @@ export default class Explorer {
         dataExplorerArea: Constants.Areas.ResourceTree
       });
     }
+
     // TODO: Refactor
     const deferred: Q.Deferred<any> = Q.defer();
-    const offerPromise: Q.Promise<DataModels.Offer[]> = this.documentClientUtility.readOffers();
-    this._setLoadingStatusText("Fetching offers...");
 
+    const refreshDatabases = (offers?: DataModels.Offer[]) => {
+      this._setLoadingStatusText("Fetching databases...");
+      readDatabases().then(
+        (databases: DataModels.Database[]) => {
+          this._setLoadingStatusText("Successfully fetched databases.");
+          TelemetryProcessor.traceSuccess(
+            Action.LoadDatabases,
+            {
+              databaseAccountName: this.databaseAccount().name,
+              defaultExperience: this.defaultExperience(),
+              dataExplorerArea: Constants.Areas.ResourceTree
+            },
+            startKey
+          );
+          const currentlySelectedNode: ViewModels.TreeNode = this.selectedNode();
+          const deltaDatabases = this.getDeltaDatabases(databases, offers);
+          this.addDatabasesToList(deltaDatabases.toAdd);
+          this.deleteDatabasesFromList(deltaDatabases.toDelete);
+          this.selectedNode(currentlySelectedNode);
+          this._setLoadingStatusText("Fetching containers...");
+          this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
+            .then(
+              () => {
+                this._setLoadingStatusText("Successfully fetched containers.");
+                deferred.resolve();
+              },
+              reason => {
+                this._setLoadingStatusText("Failed to fetch containers.");
+                deferred.reject(reason);
+              }
+            )
+            .finally(() => this.isRefreshingExplorer(false));
+        },
+        error => {
+          this._setLoadingStatusText("Failed to fetch databases.");
+          this.isRefreshingExplorer(false);
+          deferred.reject(error);
+          TelemetryProcessor.traceFailure(
+            Action.LoadDatabases,
+            {
+              databaseAccountName: this.databaseAccount().name,
+              defaultExperience: this.defaultExperience(),
+              dataExplorerArea: Constants.Areas.ResourceTree,
+              error: JSON.stringify(error)
+            },
+            startKey
+          );
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Error while refreshing databases: ${JSON.stringify(error)}`
+          );
+        }
+      );
+    };
+
+    const offerPromise: Q.Promise<DataModels.Offer[]> = readOffers({ isServerless: this.isServerlessEnabled() });
+    this._setLoadingStatusText("Fetching offers...");
     offerPromise.then(
       (offers: DataModels.Offer[]) => {
         this._setLoadingStatusText("Successfully fetched offers.");
-        this._setLoadingStatusText("Fetching databases...");
-        this.documentClientUtility.readDatabases(null /*options*/).then(
-          (databases: DataModels.Database[]) => {
-            this._setLoadingStatusText("Successfully fetched databases.");
-            TelemetryProcessor.traceSuccess(
-              Action.LoadDatabases,
-              {
-                databaseAccountName: this.databaseAccount().name,
-                defaultExperience: this.defaultExperience(),
-                dataExplorerArea: Constants.Areas.ResourceTree
-              },
-              startKey
-            );
-            const currentlySelectedNode: ViewModels.TreeNode = this.selectedNode();
-            const deltaDatabases = this.getDeltaDatabases(databases, offers);
-            this.addDatabasesToList(deltaDatabases.toAdd);
-            this.deleteDatabasesFromList(deltaDatabases.toDelete);
-            this.selectedNode(currentlySelectedNode);
-            this._setLoadingStatusText("Fetching containers...");
-            this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
-              .then(
-                () => {
-                  this._setLoadingStatusText("Successfully fetched containers.");
-                  deferred.resolve();
-                },
-                reason => {
-                  this._setLoadingStatusText("Failed to fetch containers.");
-                  deferred.reject(reason);
-                }
-              )
-              .finally(() => this.isRefreshingExplorer(false));
-          },
-          error => {
-            this._setLoadingStatusText("Failed to fetch databases.");
-            this.isRefreshingExplorer(false);
-            deferred.reject(error);
-            TelemetryProcessor.traceFailure(
-              Action.LoadDatabases,
-              {
-                databaseAccountName: this.databaseAccount().name,
-                defaultExperience: this.defaultExperience(),
-                dataExplorerArea: Constants.Areas.ResourceTree,
-                error: JSON.stringify(error)
-              },
-              startKey
-            );
-            NotificationConsoleUtils.logConsoleMessage(
-              ConsoleDataType.Error,
-              `Error while refreshing databases: ${JSON.stringify(error)}`
-            );
-          }
-        );
+        refreshDatabases(offers);
       },
       error => {
         this._setLoadingStatusText("Failed to fetch offers.");
@@ -1535,7 +1552,7 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.ResourceTree
     });
     this.isRefreshingExplorer(true);
-    this.documentClientUtility.refreshCachedResources().then(
+    refreshCachedResources().then(
       () => {
         TelemetryProcessor.traceSuccess(
           Action.LoadDatabases,
@@ -1588,7 +1605,7 @@ export default class Explorer {
 
   public async getArcadiaToken(): Promise<string> {
     return new Promise<string>((resolve: (token: string) => void, reject: (error: any) => void) => {
-      MessageHandler.sendCachedDataMessage<string>(MessageTypes.GetArcadiaToken, undefined /** params **/).then(
+      sendCachedDataMessage<string>(MessageTypes.GetArcadiaToken, undefined /** params **/).then(
         (token: string) => {
           resolve(token);
         },
@@ -1602,7 +1619,7 @@ export default class Explorer {
 
   private async _getArcadiaWorkspaces(): Promise<ArcadiaWorkspaceItem[]> {
     try {
-      const workspaces = await this._arcadiaManager.listWorkspacesAsync([CosmosClient.subscriptionId()]);
+      const workspaces = await this._arcadiaManager.listWorkspacesAsync([userContext.subscriptionId]);
       let workspaceItems: ArcadiaWorkspaceItem[] = new Array(workspaces.length);
       const sparkPromises: Promise<void>[] = [];
       workspaces.forEach((workspace, i) => {
@@ -1626,11 +1643,11 @@ export default class Explorer {
   }
 
   public async createWorkspace(): Promise<string> {
-    return MessageHandler.sendCachedDataMessage(MessageTypes.CreateWorkspace, undefined /** params **/);
+    return sendCachedDataMessage(MessageTypes.CreateWorkspace, undefined /** params **/);
   }
 
   public async createSparkPool(workspaceId: string): Promise<string> {
-    return MessageHandler.sendCachedDataMessage(MessageTypes.CreateSparkPool, [workspaceId]);
+    return sendCachedDataMessage(MessageTypes.CreateSparkPool, [workspaceId]);
   }
 
   public async initNotebooks(databaseAccount: DataModels.DatabaseAccount): Promise<void> {
@@ -1705,7 +1722,7 @@ export default class Explorer {
     }
 
     try {
-      const workspaces = await this.notebookWorkspaceManager.getNotebookWorkspacesAsync(databaseAccount.id);
+      const workspaces = await this.notebookWorkspaceManager.getNotebookWorkspacesAsync(databaseAccount?.id);
       return workspaces && workspaces.length > 0 && workspaces.some(workspace => workspace.name === "default");
     } catch (error) {
       Logger.logError(error, "Explorer/_containsDefaultNotebookWorkspace");
@@ -1718,6 +1735,7 @@ export default class Explorer {
       return;
     }
 
+    let clearMessage;
     try {
       const notebookWorkspace = await this.notebookWorkspaceManager.getNotebookWorkspaceAsync(
         this.databaseAccount().id,
@@ -1729,10 +1747,14 @@ export default class Explorer {
         notebookWorkspace.properties.status &&
         notebookWorkspace.properties.status.toLowerCase() === "stopped"
       ) {
+        clearMessage = NotificationConsoleUtils.logConsoleProgress("Initializing notebook workspace");
         await this.notebookWorkspaceManager.startNotebookWorkspaceAsync(this.databaseAccount().id, "default");
       }
     } catch (error) {
       Logger.logError(error, "Explorer/ensureNotebookWorkspaceRunning");
+      NotificationConsoleUtils.logConsoleError(`Failed to initialize notebook workspace: ${JSON.stringify(error)}`);
+    } finally {
+      clearMessage && clearMessage();
     }
   }
 
@@ -1807,8 +1829,8 @@ export default class Explorer {
 
     const isRunningInPortal = window.dataExplorerPlatform == PlatformType.Portal;
     const isRunningInDevMode = process.env.NODE_ENV === "development";
-    if (inputs && config.BACKEND_ENDPOINT && isRunningInPortal && isRunningInDevMode) {
-      inputs.extensionEndpoint = config.PROXY_PATH;
+    if (inputs && configContext.BACKEND_ENDPOINT && isRunningInPortal && isRunningInDevMode) {
+      inputs.extensionEndpoint = configContext.PROXY_PATH;
     }
 
     const initPromise: Q.Promise<void> = inputs ? this.initDataExplorerWithFrameInputs(inputs) : Q();
@@ -1826,7 +1848,7 @@ export default class Explorer {
         }
       }
       if (message.actionType === ActionContracts.ActionType.TransmitCachedData) {
-        MessageHandler.handleCachedDataMessage(message);
+        handleCachedDataMessage(message);
         return;
       }
       if (message.type) {
@@ -1913,7 +1935,7 @@ export default class Explorer {
       this.features(inputs.features);
       this.serverId(inputs.serverId);
       this.extensionEndpoint(inputs.extensionEndpoint || "");
-      this.armEndpoint(EnvironmentUtility.normalizeArmEndpointUri(inputs.csmEndpoint || config.ARM_ENDPOINT));
+      this.armEndpoint(EnvironmentUtility.normalizeArmEndpointUri(inputs.csmEndpoint || configContext.ARM_ENDPOINT));
       this.notificationsClient.setExtensionEndpoint(this.extensionEndpoint());
       this.databaseAccount(databaseAccount);
       this.subscriptionType(inputs.subscriptionType);
@@ -1929,11 +1951,17 @@ export default class Explorer {
 
       this._importExplorerConfigComplete = true;
 
-      CosmosClient.authorizationToken(authorizationToken);
-      CosmosClient.masterKey(masterKey);
-      CosmosClient.databaseAccount(databaseAccount);
-      CosmosClient.subscriptionId(inputs.subscriptionId);
-      CosmosClient.resourceGroup(inputs.resourceGroup);
+      updateConfigContext({
+        ARM_ENDPOINT: this.armEndpoint()
+      });
+
+      updateUserContext({
+        authorizationToken,
+        masterKey,
+        databaseAccount,
+        resourceGroup: inputs.resourceGroup,
+        subscriptionId: inputs.subscriptionId
+      });
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
         {
@@ -1963,7 +1991,7 @@ export default class Explorer {
     return _.find(selectedCollection.storedProcedures(), (storedProcedure: StoredProcedure) => {
       const openedSprocTab = this.tabsManager.getTabs(
         ViewModels.CollectionTabKind.StoredProcedures,
-        (tab: ViewModels.Tab) => tab.node && tab.node.rid === storedProcedure.rid
+        tab => tab.node && tab.node.rid === storedProcedure.rid
       );
       return (
         storedProcedure.rid === this.selectedNode().rid ||
@@ -1977,7 +2005,7 @@ export default class Explorer {
     return _.find(selectedCollection.userDefinedFunctions(), (userDefinedFunction: UserDefinedFunction) => {
       const openedUdfTab = this.tabsManager.getTabs(
         ViewModels.CollectionTabKind.UserDefinedFunctions,
-        (tab: ViewModels.Tab) => tab.node && tab.node.rid === userDefinedFunction.rid
+        tab => tab.node && tab.node.rid === userDefinedFunction.rid
       );
       return (
         userDefinedFunction.rid === this.selectedNode().rid ||
@@ -1991,7 +2019,7 @@ export default class Explorer {
     return _.find(selectedCollection.triggers(), (trigger: Trigger) => {
       const openedTriggerTab = this.tabsManager.getTabs(
         ViewModels.CollectionTabKind.Triggers,
-        (tab: ViewModels.Tab) => tab.node && tab.node.rid === trigger.rid
+        tab => tab.node && tab.node.rid === trigger.rid
       );
       return (
         trigger.rid === this.selectedNode().rid ||
@@ -2001,7 +2029,7 @@ export default class Explorer {
   }
 
   public closeAllPanes(): void {
-    this._panes.forEach((pane: ViewModels.ContextualPane) => pane.close());
+    this._panes.forEach((pane: ContextualPaneBase) => pane.close());
   }
 
   public getPlatformType(): PlatformType {
@@ -2016,13 +2044,13 @@ export default class Explorer {
     );
   }
 
-  public onUpdateTabsButtons(buttons: ViewModels.NavbarButtonConfig[]): void {
+  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
     this.commandBarComponentAdapter.onUpdateTabsButtons(buttons);
   }
 
   public signInAad = () => {
     TelemetryProcessor.trace(Action.SignInAad, undefined, { area: "Explorer" });
-    MessageHandler.sendMessage({
+    sendMessage({
       type: MessageTypes.AadSignIn
     });
   };
@@ -2033,21 +2061,21 @@ export default class Explorer {
   };
 
   public clickHostedAccountSwitch = () => {
-    MessageHandler.sendMessage({
+    sendMessage({
       type: MessageTypes.UpdateAccountSwitch,
       click: true
     });
   };
 
   public clickHostedDirectorySwitch = () => {
-    MessageHandler.sendMessage({
+    sendMessage({
       type: MessageTypes.UpdateDirectoryControl,
       click: true
     });
   };
 
   public refreshDatabaseAccount = () => {
-    MessageHandler.sendMessage({
+    sendMessage({
       type: MessageTypes.RefreshDatabaseAccount
     });
   };
@@ -2076,9 +2104,7 @@ export default class Explorer {
           if (isNewDatabase) {
             database.expandDatabase();
           }
-          this.tabsManager.refreshActiveTab(
-            (tab: ViewModels.Tab) => tab.collection && tab.collection.getDatabase().rid === database.rid
-          );
+          this.tabsManager.refreshActiveTab(tab => tab.collection && tab.collection.getDatabase().rid === database.rid);
         })
       );
     });
@@ -2180,8 +2206,8 @@ export default class Explorer {
       return undefined;
     }
 
-    const urlPrefixWithKeyParam: string = `${config.hostedExplorerURL}?key=`;
-    const currentActiveTab: ViewModels.Tab = this.tabsManager.activeTab();
+    const urlPrefixWithKeyParam: string = `${configContext.hostedExplorerURL}?key=`;
+    const currentActiveTab = this.tabsManager.activeTab();
 
     return `${urlPrefixWithKeyParam}${token}#/${(currentActiveTab && currentActiveTab.hashLocation()) || ""}`;
   }
@@ -2292,7 +2318,7 @@ export default class Explorer {
     return _.find(offers, (offer: DataModels.Offer) => offer.resource === resourceId);
   }
 
-  private uploadFile(name: string, content: string, parent: NotebookContentItem): Promise<NotebookContentItem> {
+  public uploadFile(name: string, content: string, parent: NotebookContentItem): Promise<NotebookContentItem> {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to upload notebook, but notebook is not enabled";
       Logger.logError(error, "Explorer/uploadFile");
@@ -2347,14 +2373,28 @@ export default class Explorer {
     return Promise.resolve(false);
   }
 
-  public publishNotebook(name: string, content: string): void {
+  public async publishNotebook(name: string, content: string | unknown, parentDomElement: HTMLElement): Promise<void> {
     if (this.notebookManager) {
-      this.notebookManager.openPublishNotebookPane(name, content);
+      await this.notebookManager.openPublishNotebookPane(
+        name,
+        content,
+        parentDomElement,
+        this.isCodeOfConductEnabled(),
+        this.isLinkInjectionEnabled()
+      );
       this.publishNotebookPaneAdapter = this.notebookManager.publishNotebookPaneAdapter;
       this.isPublishNotebookPaneEnabled(true);
     }
   }
 
+  public copyNotebook(name: string, content: string): void {
+    if (this.notebookManager) {
+      this.notebookManager.openCopyNotebookPane(name, content);
+      this.copyNotebookPaneAdapter = this.notebookManager.copyNotebookPaneAdapter;
+      this.isCopyNotebookPaneEnabled(true);
+    }
+  }
+
   public showOkModalDialog(title: string, msg: string): void {
     this._dialogProps({
       isModal: true,
@@ -2444,28 +2484,26 @@ export default class Explorer {
       throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
     }
 
-    const notebookTabs: NotebookV2Tab[] = this.tabsManager.getTabs(
+    const notebookTabs = this.tabsManager.getTabs(
       ViewModels.CollectionTabKind.NotebookV2,
-      (tab: ViewModels.Tab) =>
+      tab =>
         (tab as NotebookV2Tab).notebookPath &&
         FileSystemUtil.isPathEqual((tab as NotebookV2Tab).notebookPath(), notebookContentItem.path)
     ) as NotebookV2Tab[];
-    let notebookTab: NotebookV2Tab = notebookTabs && notebookTabs[0];
+    let notebookTab = notebookTabs && notebookTabs[0];
 
     if (notebookTab) {
       this.tabsManager.activateTab(notebookTab);
     } else {
-      const options: ViewModels.NotebookTabOptions = {
-        account: CosmosClient.databaseAccount(),
+      const options: NotebookTabOptions = {
+        account: userContext.databaseAccount,
         tabKind: ViewModels.CollectionTabKind.NotebookV2,
         node: null,
         title: notebookContentItem.name,
         tabPath: notebookContentItem.path,
-        documentClientUtility: null,
-
         collection: null,
         selfLink: null,
-        masterKey: CosmosClient.masterKey() || "",
+        masterKey: userContext.masterKey || "",
         hashLocation: "notebooks",
         isActive: ko.observable(false),
         isTabsContentExpanded: ko.observable(true),
@@ -2521,7 +2559,7 @@ export default class Explorer {
         onSubmit: (input: string) => this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input)
       })
       .then(newNotebookFile => {
-        const notebookTabs: ViewModels.Tab[] = this.tabsManager.getTabs(
+        const notebookTabs = this.tabsManager.getTabs(
           ViewModels.CollectionTabKind.NotebookV2,
           (tab: NotebookV2Tab) => tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), originalPath)
         );
@@ -2609,7 +2647,11 @@ export default class Explorer {
 
   private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
     const authType = window.authType as AuthType;
-    if (authType === AuthType.EncryptedToken || authType === AuthType.ResourceToken) {
+    if (
+      authType === AuthType.EncryptedToken ||
+      authType === AuthType.ResourceToken ||
+      authType === AuthType.MasterKey
+    ) {
       this.isNotebooksEnabledForAccount(false);
       return;
     }
@@ -2651,7 +2693,7 @@ export default class Explorer {
   }
 
   public _refreshSparkEnabledStateForAccount = async (): Promise<void> => {
-    const subscriptionId = CosmosClient.subscriptionId();
+    const subscriptionId = userContext.subscriptionId;
     const armEndpoint = this.armEndpoint();
     const authType = window.authType as AuthType;
     if (!subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
@@ -2680,7 +2722,7 @@ export default class Explorer {
   };
 
   public _isAfecFeatureRegistered = async (featureName: string): Promise<boolean> => {
-    const subscriptionId = CosmosClient.subscriptionId();
+    const subscriptionId = userContext.subscriptionId;
     const armEndpoint = this.armEndpoint();
     const authType = window.authType as AuthType;
     if (!featureName || !subscriptionId || !armEndpoint || authType === AuthType.EncryptedToken) {
@@ -2709,6 +2751,7 @@ export default class Explorer {
     }
 
     await this.resourceTree.initialize();
+    this.notebookManager?.refreshPinnedRepos();
     if (this.notebookToImport) {
       this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
     }
@@ -2891,7 +2934,7 @@ export default class Explorer {
 
     const terminalTabs: TerminalTab[] = this.tabsManager.getTabs(
       ViewModels.CollectionTabKind.Terminal,
-      (tab: ViewModels.Tab) => tab.hashLocation() == hashLocation
+      tab => tab.hashLocation() == hashLocation
     ) as TerminalTab[];
     let terminalTab: TerminalTab = terminalTabs && terminalTabs[0];
 
@@ -2899,13 +2942,11 @@ export default class Explorer {
       this.tabsManager.activateTab(terminalTab);
     } else {
       const newTab = new TerminalTab({
-        account: CosmosClient.databaseAccount(),
+        account: userContext.databaseAccount,
         tabKind: ViewModels.CollectionTabKind.Terminal,
         node: null,
         title: title,
         tabPath: title,
-        documentClientUtility: null,
-
         collection: null,
         selfLink: null,
         hashLocation: hashLocation,
@@ -2927,7 +2968,7 @@ export default class Explorer {
 
     const galleryTabs = this.tabsManager.getTabs(
       ViewModels.CollectionTabKind.Gallery,
-      (tab: ViewModels.Tab) => tab.hashLocation() == hashLocation
+      tab => tab.hashLocation() == hashLocation
     );
     let galleryTab = galleryTabs && galleryTabs[0];
 
@@ -2940,7 +2981,7 @@ export default class Explorer {
 
       const newTab = new this.galleryTab.default({
         // GalleryTabOptions
-        account: CosmosClient.databaseAccount(),
+        account: userContext.databaseAccount,
         container: this,
         junoClient: this.notebookManager?.junoClient,
         notebookUrl,
@@ -2973,24 +3014,21 @@ export default class Explorer {
 
     const notebookViewerTabModule = this.notebookViewerTab;
 
-    let isNotebookViewerOpen = (tab: ViewModels.Tab) => {
+    let isNotebookViewerOpen = (tab: TabsBase) => {
       const notebookViewerTab = tab as typeof notebookViewerTabModule.default;
       return notebookViewerTab.notebookUrl === notebookUrl;
     };
 
-    const notebookViewerTabs = this.tabsManager.getTabs(
-      ViewModels.CollectionTabKind.NotebookV2,
-      (tab: ViewModels.Tab) => {
-        return tab.hashLocation() == hashLocation && isNotebookViewerOpen(tab);
-      }
-    );
+    const notebookViewerTabs = this.tabsManager.getTabs(ViewModels.CollectionTabKind.NotebookV2, tab => {
+      return tab.hashLocation() == hashLocation && isNotebookViewerOpen(tab);
+    });
     let notebookViewerTab = notebookViewerTabs && notebookViewerTabs[0];
 
     if (notebookViewerTab) {
       this.tabsManager.activateNewTab(notebookViewerTab);
     } else {
       notebookViewerTab = new this.notebookViewerTab.default({
-        account: CosmosClient.databaseAccount(),
+        account: userContext.databaseAccount,
         tabKind: ViewModels.CollectionTabKind.NotebookViewer,
         node: null,
         title: title,
@@ -3077,12 +3115,6 @@ export default class Explorer {
     } else {
       loadingTitle.innerHTML = title;
     }
-
-    TelemetryProcessor.trace(
-      Action.LoadingStatus,
-      ActionModifiers.Mark,
-      title !== "Welcome to Azure Cosmos DB" ? `Title: ${title}, Text: ${text}` : text
-    );
   }
 
   private _openSetupNotebooksPaneForQuickstart(): void {

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -15,7 +15,7 @@ import { GraphData, D3Node, D3Link } from "./GraphData";
 import { HashMap } from "../../../Common/HashMap";
 import { BaseType } from "d3";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { GraphConfig } from "../../Tabs/GraphTab";
 import { GraphExplorer } from "./GraphExplorer";
 import * as Constants from "../../../Common/Constants";

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

@@ -1,3 +1,4 @@
+jest.mock("../../../Common/DocumentClientUtilityBase");
 import React from "react";
 import * as sinon from "sinon";
 import { mount, ReactWrapper } from "enzyme";
@@ -7,11 +8,11 @@ import { GraphExplorer, GraphExplorerProps, GraphAccessor, GraphHighlightedNodeD
 import * as D3ForceGraph from "./D3ForceGraph";
 import { GraphData } from "./GraphData";
 import { TabComponent } from "../../Controls/Tabs/TabComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as StorageUtility from "../../../Shared/StorageUtility";
 import GraphTab from "../../Tabs/GraphTab";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
 
 describe("Check whether query result is vertex array", () => {
   it("should reject null as vertex array", () => {
@@ -86,13 +87,31 @@ describe("getPkIdFromDocumentId", () => {
     expect(GraphExplorer.getPkIdFromDocumentId(doc, "mypk")).toEqual("['pkvalue', 'id']");
   });
 
+  it("should create pkid pair from partitioned graph (pk as number)", () => {
+    const doc = createFakeDoc({ id: "id", mypk: 234 });
+    expect(GraphExplorer.getPkIdFromDocumentId(doc, "mypk")).toEqual("[234, 'id']");
+  });
+
+  it("should create pkid pair from partitioned graph (pk as boolean)", () => {
+    const doc = createFakeDoc({ id: "id", mypk: true });
+    expect(GraphExplorer.getPkIdFromDocumentId(doc, "mypk")).toEqual("[true, 'id']");
+  });
+
   it("should create pkid pair from partitioned graph (pk as valid array value)", () => {
     const doc = createFakeDoc({ id: "id", mypk: [{ id: "someid", _value: "pkvalue" }] });
     expect(GraphExplorer.getPkIdFromDocumentId(doc, "mypk")).toEqual("['pkvalue', 'id']");
   });
 
-  it("should error if id is not a string", () => {
-    const doc = createFakeDoc({ id: { foo: 1 } });
+  it("should error if id is not a string or number", () => {
+    let doc = createFakeDoc({ id: { foo: 1 } });
+    try {
+      GraphExplorer.getPkIdFromDocumentId(doc, undefined);
+      expect(true).toBe(false);
+    } catch (e) {
+      expect(true).toBe(true);
+    }
+
+    doc = createFakeDoc({ id: true });
     try {
       GraphExplorer.getPkIdFromDocumentId(doc, undefined);
       expect(true).toBe(false);
@@ -101,16 +120,8 @@ describe("getPkIdFromDocumentId", () => {
     }
   });
 
-  it("should error if pk not string nor non-empty array", () => {
-    let doc = createFakeDoc({ mypk: { foo: 1 } });
-
-    try {
-      GraphExplorer.getPkIdFromDocumentId(doc, "mypk");
-    } catch (e) {
-      expect(true).toBe(true);
-    }
-
-    doc = createFakeDoc({ mypk: [] });
+  it("should error if pk is empty array", () => {
+    let doc = createFakeDoc({ mypk: [] });
     try {
       GraphExplorer.getPkIdFromDocumentId(doc, "mypk");
       expect(true).toBe(false);
@@ -134,7 +145,7 @@ describe("GraphExplorer", () => {
   const COLLECTION_SELF_LINK = "collectionSelfLink";
   const gremlinRU = 789.12;
 
-  const createMockProps = (documentClientUtility?: any): GraphExplorerProps => {
+  const createMockProps = (): GraphExplorerProps => {
     const graphConfig = GraphTab.createGraphConfig();
     const graphConfigUi = GraphTab.createGraphConfigUiData(graphConfig);
 
@@ -149,7 +160,6 @@ describe("GraphExplorer", () => {
       onIsValidQueryChange: (isValidQuery: boolean): void => {},
 
       collectionPartitionKeyProperty: "collectionPartitionKeyProperty",
-      documentClientUtility: documentClientUtility,
       collectionRid: COLLECTION_RID,
       collectionSelfLink: COLLECTION_SELF_LINK,
       graphBackendEndpoint: "graphBackendEndpoint",
@@ -188,7 +198,6 @@ describe("GraphExplorer", () => {
     let wrapper: ReactWrapper;
 
     let connectStub: sinon.SinonSpy;
-    let queryDocStub: sinon.SinonSpy;
     let submitToBackendSpy: sinon.SinonSpy;
     let renderResultAsJsonStub: sinon.SinonSpy;
     let onMiddlePaneInitializedStub: sinon.SinonSpy;
@@ -215,46 +224,6 @@ describe("GraphExplorer", () => {
       [query: string]: AjaxResponse;
     }
 
-    const createDocumentClientUtilityMock = (docDBResponse: AjaxResponse) => {
-      const mock = {
-        queryDocuments: () => {},
-        queryDocumentsPage: (
-          rid: string,
-          iterator: any,
-          firstItemIndex: number,
-          options: any
-        ): Q.Promise<ViewModels.QueryResults> => {
-          const qresult = {
-            hasMoreResults: false,
-            firstItemIndex: firstItemIndex,
-            lastItemIndex: 0,
-            itemCount: 0,
-            documents: docDBResponse.response,
-            activityId: "",
-            headers: [] as any[],
-            requestCharge: gVRU
-          };
-
-          return Q.resolve(qresult);
-        }
-      };
-
-      const fakeIterator: any = {
-        nextItem: (callback: (error: any, document: DataModels.DocumentId) => void): void => {},
-        hasMoreResults: () => false,
-        executeNext: (callback: (error: any, documents: DataModels.DocumentId[], headers: any) => void): void => {}
-      };
-
-      queryDocStub = sinon.stub(mock, "queryDocuments").callsFake(
-        (container: ViewModels.DocumentRequestContainer, query: string, options: any): Q.Promise<any> => {
-          (fakeIterator as any)._query = query;
-          return Q.resolve(fakeIterator);
-        }
-      );
-
-      return mock;
-    };
-
     const setupMocks = (
       graphExplorer: GraphExplorer,
       backendResponses: BackendResponses,
@@ -333,7 +302,29 @@ describe("GraphExplorer", () => {
       done: any,
       ignoreD3Update: boolean
     ): GraphExplorer => {
-      const props: GraphExplorerProps = createMockProps(createDocumentClientUtilityMock(docDBResponse));
+      (queryDocuments as jest.Mock).mockImplementation((container: any, query: string, options: any) => {
+        return Q.resolve({
+          _query: query,
+          nextItem: (callback: (error: any, document: DataModels.DocumentId) => void): void => {},
+          hasMoreResults: () => false,
+          executeNext: (callback: (error: any, documents: DataModels.DocumentId[], headers: any) => void): void => {}
+        });
+      });
+      (queryDocumentsPage as jest.Mock).mockImplementation(
+        (rid: string, iterator: any, firstItemIndex: number, options: any) => {
+          return Q.resolve({
+            hasMoreResults: false,
+            firstItemIndex: firstItemIndex,
+            lastItemIndex: 0,
+            itemCount: 0,
+            documents: docDBResponse.response,
+            activityId: "",
+            headers: [] as any[],
+            requestCharge: gVRU
+          });
+        }
+      );
+      const props: GraphExplorerProps = createMockProps();
       wrapper = mount(<GraphExplorer {...props} />);
       graphExplorerInstance = wrapper.instance() as GraphExplorer;
       setupMocks(graphExplorerInstance, backendResponses, done, ignoreD3Update);
@@ -341,7 +332,7 @@ describe("GraphExplorer", () => {
     };
 
     const cleanUpStubsWrapper = () => {
-      queryDocStub.restore();
+      jest.resetAllMocks();
       connectStub.restore();
       submitToBackendSpy.restore();
       renderResultAsJsonStub.restore();
@@ -378,22 +369,11 @@ describe("GraphExplorer", () => {
         expect((graphExplorerInstance.submitToBackend as sinon.SinonSpy).calledWith("g.V()")).toBe(false);
       });
 
-      it("should submit g.V() as docdb query with proper query", () => {
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[2]
-        ).toBe(DOCDB_G_DOT_V_QUERY);
-      });
-
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[0]
-        ).toEqual("databaseId");
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[1]
-        ).toEqual("collectionId");
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[3]
-        ).toEqual({ maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE, enableCrossPartitionQuery: true });
+        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+          enableCrossPartitionQuery: true
+        });
       });
 
       it("should call backend thrice (user query, fetch outE, then fetch inE)", () => {
@@ -426,22 +406,11 @@ describe("GraphExplorer", () => {
         expect((graphExplorerInstance.submitToBackend as sinon.SinonSpy).calledWith("g.V()")).toBe(false);
       });
 
-      it("should submit g.V() as docdb query with proper query", () => {
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[2]
-        ).toBe(DOCDB_G_DOT_V_QUERY);
-      });
-
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[0]
-        ).toEqual("databaseId");
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[1]
-        ).toEqual("collectionId");
-        expect(
-          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[3]
-        ).toEqual({ maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE, enableCrossPartitionQuery: true });
+        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+          enableCrossPartitionQuery: true
+        });
       });
 
       it("should call backend thrice (user query, fetch outE, then fetch inE)", () => {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -8,7 +8,7 @@ import * as D3ForceGraph from "./D3ForceGraph";
 import { GraphVizComponentProps } from "./GraphVizComponent";
 import * as GraphData from "./GraphData";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { GraphUtil } from "./GraphUtil";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
@@ -23,12 +23,12 @@ import { GraphConfig } from "../../Tabs/GraphTab";
 import { EditorReact } from "../../Controls/Editor/EditorReact";
 import LoadGraphIcon from "../../../../images/LoadGraph.png";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as Constants from "../../../Common/Constants";
 import { InputProperty } from "../../../Contracts/ViewModels";
 import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import DocumentClientUtilityBase from "../../../Common/DocumentClientUtilityBase";
+import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
 
 export interface GraphAccessor {
   applyFilter: () => void;
@@ -47,7 +47,6 @@ export interface GraphExplorerProps {
   onIsValidQueryChange: (isValidQuery: boolean) => void;
 
   collectionPartitionKeyProperty: string;
-  documentClientUtility: DocumentClientUtilityBase;
   collectionRid: string;
   collectionSelfLink: string;
   graphBackendEndpoint: string;
@@ -697,7 +696,6 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @param cmd
    */
   public submitToBackend(cmd: string): Q.Promise<GremlinClient.GremlinRequestResult> {
-    console.log("submit:", cmd);
     const id = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${cmd}`);
     this.setExecuteCounter(this.executeCounter + 1);
 
@@ -730,26 +728,24 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    */
   public executeNonPagedDocDbQuery(query: string): Q.Promise<DataModels.DocumentId[]> {
     // TODO maxItemCount: this reduces throttling, but won't cap the # of results
-    return this.props.documentClientUtility
-      .queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-        maxItemCount: GraphExplorer.PAGE_ALL,
-        enableCrossPartitionQuery:
-          StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.IsCrossPartitionQueryEnabled) ===
-          "true"
-      })
-      .then(
-        (iterator: QueryIterator<ItemDefinition & Resource>) => {
-          return iterator.fetchNext().then(response => response.resources);
-        },
-        (reason: any) => {
-          GraphExplorer.reportToConsole(
-            ConsoleDataType.Error,
-            `Failed to execute non-paged query ${query}. Reason:${reason}`,
-            reason
-          );
-          return null;
-        }
-      );
+    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
+      maxItemCount: GraphExplorer.PAGE_ALL,
+      enableCrossPartitionQuery:
+        StorageUtility.LocalStorageUtility.getEntryString(StorageUtility.StorageKey.IsCrossPartitionQueryEnabled) ===
+        "true"
+    }).then(
+      (iterator: QueryIterator<ItemDefinition & Resource>) => {
+        return iterator.fetchNext().then(response => response.resources);
+      },
+      (reason: any) => {
+        GraphExplorer.reportToConsole(
+          ConsoleDataType.Error,
+          `Failed to execute non-paged query ${query}. Reason:${reason}`,
+          reason
+        );
+        return null;
+      }
+    );
   }
 
   /**
@@ -1375,7 +1371,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
     if (collectionPartitionKeyProperty && d.hasOwnProperty(collectionPartitionKeyProperty)) {
       let pk = (d as any)[collectionPartitionKeyProperty];
-      if (typeof pk !== "string") {
+      if (typeof pk !== "string" && typeof pk !== "number" && typeof pk !== "boolean") {
         if (Array.isArray(pk) && pk.length > 0) {
           // pk is [{ id: 'id', _value: 'value' }]
           pk = pk[0]["_value"];
@@ -1732,12 +1728,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       query = `select root.id, root.${this.props.collectionPartitionKeyProperty} from root where IS_DEFINED(root._isEdge) = false order by root._ts asc`;
     }
 
-    return this.props.documentClientUtility
-      .queryDocuments(this.props.databaseId, this.props.collectionId, query, {
-        maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
-        enableCrossPartitionQuery:
-          LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-      })
+    return queryDocuments(this.props.databaseId, this.props.collectionId, query, {
+      maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+      enableCrossPartitionQuery: LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+    })
       .then(
         (iterator: QueryIterator<ItemDefinition & Resource>) => {
           this.currentDocDBQueryInfo = {
@@ -1766,16 +1760,15 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       .currentDocDBQueryInfo.index + GraphExplorer.ROOT_LIST_PAGE_SIZE})`;
     const id = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${queryInfoStr}`);
 
-    return this.props.documentClientUtility
-      .queryDocumentsPage(
-        this.props.collectionRid,
-        this.currentDocDBQueryInfo.iterator,
-        this.currentDocDBQueryInfo.index,
-        {
-          enableCrossPartitionQuery:
-            LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-        }
-      )
+    return queryDocumentsPage(
+      this.props.collectionRid,
+      this.currentDocDBQueryInfo.iterator,
+      this.currentDocDBQueryInfo.index,
+      {
+        enableCrossPartitionQuery:
+          LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+      }
+    )
       .then((results: ViewModels.QueryResults) => {
         GraphExplorer.clearConsoleProgress(id);
         this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;

src/Explorer/Graph/GraphExplorerComponent/GraphExplorerAdapter.tsx

@@ -3,7 +3,6 @@ import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import { GraphConfig } from "../../Tabs/GraphTab";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { GraphExplorer, GraphAccessor } from "./GraphExplorer";
-import DocumentClientUtilityBase from "../../../Common/DocumentClientUtilityBase";
 
 interface Parameter {
   onIsNewVertexDisabledChange: (isEnabled: boolean) => void;
@@ -18,7 +17,6 @@ interface Parameter {
   graphConfig?: GraphConfig;
 
   collectionPartitionKeyProperty: string;
-  documentClientUtility: DocumentClientUtilityBase;
   collectionRid: string;
   collectionSelfLink: string;
   graphBackendEndpoint: string;
@@ -51,7 +49,6 @@ export class GraphExplorerAdapter implements ReactAdapter {
         onIsGraphDisplayed={this.params.onIsGraphDisplayed}
         onResetDefaultGraphConfigValues={this.params.onResetDefaultGraphConfigValues}
         collectionPartitionKeyProperty={this.params.collectionPartitionKeyProperty}
-        documentClientUtility={this.params.documentClientUtility}
         collectionRid={this.params.collectionRid}
         collectionSelfLink={this.params.collectionSelfLink}
         graphBackendEndpoint={this.params.graphBackendEndpoint}

src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts

@@ -1,6 +1,6 @@
 import * as sinon from "sinon";
 import { GremlinClient, GremlinClientParameters } from "./GremlinClient";
-import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import * as Logger from "../../../Common/Logger";
 
 describe("Gremlin Client", () => {

src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts

@@ -4,7 +4,7 @@
 
 import * as Q from "q";
 import { GremlinSimpleClient, Result } from "./GremlinSimpleClient";
-import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { HashMap } from "../../../Common/HashMap";
 import * as Logger from "../../../Common/Logger";

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -12,11 +12,12 @@ import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/Com
 import { StyleConstants } from "../../../Common/Constants";
 import { CommandBarUtil } from "./CommandBarUtil";
 import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 
 export class CommandBarComponentAdapter implements ReactAdapter {
   public parameters: ko.Observable<number>;
   public container: Explorer;
-  private tabsButtons: ViewModels.NavbarButtonConfig[];
+  private tabsButtons: CommandButtonComponentProps[];
   private isNotebookTabActive: ko.Computed<boolean>;
 
   constructor(container: Explorer) {
@@ -44,14 +45,15 @@ export class CommandBarComponentAdapter implements ReactAdapter {
       container.isHostedDataExplorerEnabled,
       container.isSynapseLinkUpdating,
       container.databaseAccount,
-      this.isNotebookTabActive
+      this.isNotebookTabActive,
+      container.isServerlessEnabled
     ];
 
     ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
     this.parameters = ko.observable(Date.now());
   }
 
-  public onUpdateTabsButtons(buttons: ViewModels.NavbarButtonConfig[]): void {
+  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
     this.tabsButtons = buttons;
     this.triggerRender();
   }
@@ -80,9 +82,7 @@ export class CommandBarComponentAdapter implements ReactAdapter {
     uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
     if (this.isNotebookTabActive()) {
-      uiFabricControlButtons.unshift(
-        CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
-      );
+      uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
     }
 
     return (

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -7,6 +7,47 @@ import Explorer from "../../Explorer";
 describe("CommandBarComponentButtonFactory tests", () => {
   let mockExplorer: Explorer;
 
+  describe("Enable Azure Synapse Link Button", () => {
+    const enableAzureSynapseLinkBtnLabel = "Enable Azure Synapse Link (Preview)";
+
+    beforeAll(() => {
+      mockExplorer = {} as Explorer;
+      mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
+      mockExplorer.isPreferredApiTable = ko.computed(() => true);
+      mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
+      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
+      mockExplorer.isSparkEnabled = ko.observable(true);
+      mockExplorer.isSynapseLinkUpdating = ko.observable(false);
+      mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
+      mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
+      mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
+      mockExplorer.isNotebookEnabled = ko.observable(false);
+      mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
+      mockExplorer.isRunningOnNationalCloud = () => false;
+    });
+
+    it("Account is not serverless - button should be visible", () => {
+      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        button => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeDefined();
+    });
+
+    it("Account is serverless - button should be hidden", () => {
+      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => true);
+
+      const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
+      const enableAzureSynapseLinkBtn = buttons.find(
+        button => button.commandButtonLabel === enableAzureSynapseLinkBtnLabel
+      );
+      expect(enableAzureSynapseLinkBtn).toBeUndefined();
+    });
+  });
+
   describe("Enable notebook button", () => {
     const enableNotebookBtnLabel = "Enable Notebooks (Preview)";
 
@@ -23,6 +64,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
+      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
     });
 
     it("Notebooks is already enabled - button should be hidden", () => {
@@ -86,6 +128,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
+      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
     });
 
     beforeEach(() => {
@@ -167,6 +210,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
+      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
     });
 
     beforeEach(() => {
@@ -254,6 +298,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isGalleryPublishEnabled = ko.computed<boolean>(() => false);
       mockExplorer.notebookManager = new NotebookManager();
       mockExplorer.notebookManager.gitHubOAuthService = new GitHubOAuthService(undefined);
+      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
     });
 
     beforeEach(() => {
@@ -305,6 +350,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
       mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
+      mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
     });
 
     it("should only show New SQL Query and Open Query buttons", () => {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

@@ -2,7 +2,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { PlatformType } from "../../../PlatformType";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { Areas } from "../../../Common/Constants";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";
@@ -24,19 +24,20 @@ import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
 import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
 import GitHubIcon from "../../../../images/github.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
-import { config, Platform } from "../../../Config";
+import { configContext, Platform } from "../../../ConfigContext";
 import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 
 export class CommandBarComponentButtonFactory {
   private static counter: number = 0;
 
-  public static createStaticCommandBarButtons(container: Explorer): ViewModels.NavbarButtonConfig[] {
+  public static createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
     if (container.isAuthWithResourceToken()) {
       return CommandBarComponentButtonFactory.createStaticCommandBarButtonsForResourceToken(container);
     }
 
     const newCollectionBtn = CommandBarComponentButtonFactory.createNewCollectionGroup(container);
-    const buttons: ViewModels.NavbarButtonConfig[] = [newCollectionBtn];
+    const buttons: CommandButtonComponentProps[] = [newCollectionBtn];
 
     const addSynapseLink = CommandBarComponentButtonFactory.createOpenSynapseLinkDialogButton(container);
     if (addSynapseLink) {
@@ -112,7 +113,7 @@ export class CommandBarComponentButtonFactory {
 
       if (CommandBarComponentButtonFactory.areScriptsSupported(container)) {
         const label = "New Stored Procedure";
-        const newStoredProcedureBtn: ViewModels.NavbarButtonConfig = {
+        const newStoredProcedureBtn: CommandButtonComponentProps = {
           iconSrc: AddStoredProcedureIcon,
           iconAlt: label,
           onCommandClick: () => {
@@ -133,12 +134,12 @@ export class CommandBarComponentButtonFactory {
     return buttons;
   }
 
-  public static createContextCommandBarButtons(container: Explorer): ViewModels.NavbarButtonConfig[] {
-    const buttons: ViewModels.NavbarButtonConfig[] = [];
+  public static createContextCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+    const buttons: CommandButtonComponentProps[] = [];
 
     if (!container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB()) {
       const label = "New Shell";
-      const newMongoShellBtn: ViewModels.NavbarButtonConfig = {
+      const newMongoShellBtn: CommandButtonComponentProps = {
         iconSrc: HostedTerminalIcon,
         iconAlt: label,
         onCommandClick: () => {
@@ -156,15 +157,15 @@ export class CommandBarComponentButtonFactory {
     return buttons;
   }
 
-  public static createControlCommandBarButtons(container: Explorer): ViewModels.NavbarButtonConfig[] {
-    const buttons: ViewModels.NavbarButtonConfig[] = [];
+  public static createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
+    const buttons: CommandButtonComponentProps[] = [];
     if (window.dataExplorerPlatform === PlatformType.Hosted) {
       return buttons;
     }
 
     if (!container.isPreferredApiCassandra()) {
       const label = "Settings";
-      const settingsPaneButton: ViewModels.NavbarButtonConfig = {
+      const settingsPaneButton: CommandButtonComponentProps = {
         iconSrc: SettingsIcon,
         iconAlt: label,
         onCommandClick: () => container.settingsPane.open(),
@@ -179,7 +180,7 @@ export class CommandBarComponentButtonFactory {
 
     if (container.isHostedDataExplorerEnabled()) {
       const label = "Open Full Screen";
-      const fullScreenButton: ViewModels.NavbarButtonConfig = {
+      const fullScreenButton: CommandButtonComponentProps = {
         iconSrc: OpenInTabIcon,
         iconAlt: label,
         onCommandClick: () => container.generateSharedAccessData(),
@@ -195,7 +196,7 @@ export class CommandBarComponentButtonFactory {
 
     if (!container.hasOwnProperty("isEmulator") || !container.isEmulator) {
       const label = "Feedback";
-      const feedbackButtonOptions: ViewModels.NavbarButtonConfig = {
+      const feedbackButtonOptions: CommandButtonComponentProps = {
         iconSrc: FeedbackIcon,
         iconAlt: label,
         onCommandClick: () => container.provideFeedbackEmail(),
@@ -211,7 +212,7 @@ export class CommandBarComponentButtonFactory {
     return buttons;
   }
 
-  public static createDivider(): ViewModels.NavbarButtonConfig {
+  public static createDivider(): CommandButtonComponentProps {
     const label = `divider${CommandBarComponentButtonFactory.counter++}`;
     return {
       isDivider: true,
@@ -228,7 +229,7 @@ export class CommandBarComponentButtonFactory {
     return container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
   }
 
-  private static createNewCollectionGroup(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
     const label = container.addCollectionText();
     return {
       iconSrc: AddCollectionIcon,
@@ -241,10 +242,15 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createOpenSynapseLinkDialogButton(container: Explorer): ViewModels.NavbarButtonConfig {
-    if (config.platform === Platform.Emulator) {
+  private static createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonComponentProps {
+    if (configContext.platform === Platform.Emulator) {
       return null;
     }
+
+    if (container.isServerlessEnabled()) {
+      return null;
+    }
+
     if (
       container.databaseAccount &&
       container.databaseAccount() &&
@@ -276,7 +282,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createNewDatabase(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createNewDatabase(container: Explorer): CommandButtonComponentProps {
     const label = container.addDatabaseText();
     return {
       iconSrc: AddDatabaseIcon,
@@ -291,7 +297,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createNewSQLQueryButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createNewSQLQueryButton(container: Explorer): CommandButtonComponentProps {
     if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
       const label = "New SQL Query";
       return {
@@ -325,15 +331,15 @@ export class CommandBarComponentButtonFactory {
     return null;
   }
 
-  public static createScriptCommandButtons(container: Explorer): ViewModels.NavbarButtonConfig[] {
-    const buttons: ViewModels.NavbarButtonConfig[] = [];
+  public static createScriptCommandButtons(container: Explorer): CommandButtonComponentProps[] {
+    const buttons: CommandButtonComponentProps[] = [];
 
     const shouldEnableScriptsCommands: boolean =
       !container.isDatabaseNodeOrNoneSelected() && CommandBarComponentButtonFactory.areScriptsSupported(container);
 
     if (shouldEnableScriptsCommands) {
       const label = "New Stored Procedure";
-      const newStoredProcedureBtn: ViewModels.NavbarButtonConfig = {
+      const newStoredProcedureBtn: CommandButtonComponentProps = {
         iconSrc: AddStoredProcedureIcon,
         iconAlt: label,
         onCommandClick: () => {
@@ -350,7 +356,7 @@ export class CommandBarComponentButtonFactory {
 
     if (shouldEnableScriptsCommands) {
       const label = "New UDF";
-      const newUserDefinedFunctionBtn: ViewModels.NavbarButtonConfig = {
+      const newUserDefinedFunctionBtn: CommandButtonComponentProps = {
         iconSrc: AddUdfIcon,
         iconAlt: label,
         onCommandClick: () => {
@@ -367,7 +373,7 @@ export class CommandBarComponentButtonFactory {
 
     if (shouldEnableScriptsCommands) {
       const label = "New Trigger";
-      const newTriggerBtn: ViewModels.NavbarButtonConfig = {
+      const newTriggerBtn: CommandButtonComponentProps = {
         iconSrc: AddTriggerIcon,
         iconAlt: label,
         onCommandClick: () => {
@@ -385,7 +391,7 @@ export class CommandBarComponentButtonFactory {
     return buttons;
   }
 
-  private static createScaleAndSettingsButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createScaleAndSettingsButton(container: Explorer): CommandButtonComponentProps {
     let isShared = false;
     if (container.isDatabaseNodeSelected()) {
       isShared = container.findSelectedDatabase().isDatabaseShared();
@@ -410,7 +416,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createNewNotebookButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createNewNotebookButton(container: Explorer): CommandButtonComponentProps {
     const label = "New Notebook";
     return {
       iconSrc: NewNotebookIcon,
@@ -423,7 +429,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createuploadNotebookButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createuploadNotebookButton(container: Explorer): CommandButtonComponentProps {
     const label = "Upload to Notebook Server";
     return {
       iconSrc: NewNotebookIcon,
@@ -436,7 +442,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createOpenQueryButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createOpenQueryButton(container: Explorer): CommandButtonComponentProps {
     const label = "Open Query";
     return {
       iconSrc: BrowseQueriesIcon,
@@ -449,7 +455,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createOpenQueryFromDiskButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createOpenQueryFromDiskButton(container: Explorer): CommandButtonComponentProps {
     const label = "Open Query From Disk";
     return {
       iconSrc: OpenQueryFromDiskIcon,
@@ -462,8 +468,8 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createEnableNotebooksButton(container: Explorer): ViewModels.NavbarButtonConfig {
-    if (config.platform === Platform.Emulator) {
+  private static createEnableNotebooksButton(container: Explorer): CommandButtonComponentProps {
+    if (configContext.platform === Platform.Emulator) {
       return null;
     }
     const label = "Enable Notebooks (Preview)";
@@ -483,7 +489,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createOpenTerminalButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createOpenTerminalButton(container: Explorer): CommandButtonComponentProps {
     const label = "Open Terminal";
     return {
       iconSrc: CosmosTerminalIcon,
@@ -496,7 +502,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createOpenMongoTerminalButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createOpenMongoTerminalButton(container: Explorer): CommandButtonComponentProps {
     const label = "Open Mongo Shell";
     const tooltip =
       "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
@@ -522,7 +528,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createOpenCassandraTerminalButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createOpenCassandraTerminalButton(container: Explorer): CommandButtonComponentProps {
     const label = "Open Cassandra Shell";
     const tooltip =
       "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
@@ -548,7 +554,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createNotebookWorkspaceResetButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createNotebookWorkspaceResetButton(container: Explorer): CommandButtonComponentProps {
     const label = "Reset Workspace";
     return {
       iconSrc: ResetWorkspaceIcon,
@@ -561,7 +567,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createManageGitHubAccountButton(container: Explorer): ViewModels.NavbarButtonConfig {
+  private static createManageGitHubAccountButton(container: Explorer): CommandButtonComponentProps {
     let connectedToGitHub: boolean = container.notebookManager?.gitHubOAuthService.isLoggedIn();
     const label = connectedToGitHub ? "Manage GitHub settings" : "Connect to GitHub";
     return {
@@ -584,7 +590,7 @@ export class CommandBarComponentButtonFactory {
     };
   }
 
-  private static createStaticCommandBarButtonsForResourceToken(container: Explorer): ViewModels.NavbarButtonConfig[] {
+  private static createStaticCommandBarButtonsForResourceToken(container: Explorer): CommandButtonComponentProps[] {
     const newSqlQueryBtn = CommandBarComponentButtonFactory.createNewSQLQueryButton(container);
     const openQueryBtn = CommandBarComponentButtonFactory.createOpenQueryButton(container);
 

src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx

@@ -1,9 +1,10 @@
 import { CommandBarUtil } from "./CommandBarUtil";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 
 describe("CommandBarUtil tests", () => {
-  const createButton = (): ViewModels.NavbarButtonConfig => {
+  const createButton = (): CommandButtonComponentProps => {
     return {
       iconSrc: "icon",
       iconAlt: "label",
@@ -54,7 +55,7 @@ describe("CommandBarUtil tests", () => {
   });
 
   it("should create buttons with unique keys", () => {
-    const btns: ViewModels.NavbarButtonConfig[] = [];
+    const btns: CommandButtonComponentProps[] = [];
     for (let i = 0; i < 5; i++) {
       btns.push(createButton());
     }

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,17 +1,14 @@
-import _ from "underscore";
-import * as React from "react";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Observable } from "knockout";
+import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import { Dropdown, IDropdownOption, IDropdownStyles } from "office-ui-fabric-react/lib/Dropdown";
 import { IconType } from "office-ui-fabric-react/lib/Icon";
 import { IComponentAsProps } from "office-ui-fabric-react/lib/Utilities";
-import { KeyCodes, StyleConstants } from "../../../Common/Constants";
-import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as React from "react";
+import _ from "underscore";
 import ChevronDownIcon from "../../../../images/Chevron_down.svg";
+import { StyleConstants } from "../../../Common/Constants";
 import { ArcadiaMenuPicker } from "../../Controls/Arcadia/ArcadiaMenuPicker";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { MemoryTrackerComponent } from "./MemoryTrackerComponent";
-import { MemoryUsageInfo } from "../../../Contracts/DataModels";
 
 /**
  * Utilities for CommandBar
@@ -21,13 +18,13 @@ export class CommandBarUtil {
    * Convert our NavbarButtonConfig to UI Fabric buttons
    * @param btns
    */
-  public static convertButton(btns: ViewModels.NavbarButtonConfig[], backgroundColor: string): ICommandBarItemProps[] {
+  public static convertButton(btns: CommandButtonComponentProps[], backgroundColor: string): ICommandBarItemProps[] {
     const buttonHeightPx = StyleConstants.CommandBarButtonHeight;
 
     return btns
       .filter(btn => btn)
       .map(
-        (btn: ViewModels.NavbarButtonConfig, index: number): ICommandBarItemProps => {
+        (btn: CommandButtonComponentProps, index: number): ICommandBarItemProps => {
           if (btn.isDivider) {
             return CommandBarUtil.createDivider(btn.commandButtonLabel);
           }
@@ -179,10 +176,10 @@ export class CommandBarUtil {
     };
   }
 
-  public static createMemoryTracker(key: string, memoryUsageInfo: Observable<MemoryUsageInfo>): ICommandBarItemProps {
+  public static createMemoryTracker(key: string): ICommandBarItemProps {
     return {
       key,
-      onRender: () => <MemoryTrackerComponent memoryUsageInfo={memoryUsageInfo} />
+      onRender: () => <MemoryTrackerComponent />
     };
   }
 }

src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx

@@ -1,50 +1,71 @@
-import * as React from "react";
-import { Observable, Subscription } from "knockout";
-import { MemoryUsageInfo } from "../../../Contracts/DataModels";
+import React, { FunctionComponent } from "react";
+import useSWR from "swr";
 import { ProgressIndicator } from "office-ui-fabric-react/lib/ProgressIndicator";
 import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
 import { Stack } from "office-ui-fabric-react/lib/Stack";
+import { listConnectionInfo } from "../../../Utils/arm/generatedClients/2020-04-01-notebook/notebookWorkspaces";
+import { NotebookWorkspaceConnectionInfoResult } from "../../../Utils/arm/generatedClients/2020-04-01-notebook/types";
+import { userContext } from "../../../UserContext";
 
-interface MemoryTrackerProps {
-  memoryUsageInfo: Observable<MemoryUsageInfo>;
+export interface MemoryUsageInfo {
+  total: number;
+  free: number;
 }
 
-export class MemoryTrackerComponent extends React.Component<MemoryTrackerProps> {
-  private memoryUsageInfoSubscription: Subscription;
+const kbInGB = 1048576;
 
-  public componentDidMount(): void {
-    this.memoryUsageInfoSubscription = this.props.memoryUsageInfo.subscribe(() => {
-      this.forceUpdate();
-    });
-  }
-
-  public componentWillUnmount(): void {
-    this.memoryUsageInfoSubscription && this.memoryUsageInfoSubscription.dispose();
-  }
-
-  public render(): JSX.Element {
-    const memoryUsageInfo: MemoryUsageInfo = this.props.memoryUsageInfo();
-    if (!memoryUsageInfo) {
-      return (
-        <Stack className="memoryTrackerContainer" horizontal>
-          <span>Memory</span>
-          <Spinner size={SpinnerSize.medium} />
-        </Stack>
-      );
+const fetchMemoryInfo = async (_key: unknown, connectionInfo: NotebookWorkspaceConnectionInfoResult) => {
+  const response = await fetch(`${connectionInfo.notebookServerEndpoint}/api/metrics/memory`, {
+    method: "GET",
+    headers: {
+      Authorization: `Token ${connectionInfo.authToken}`,
+      "content-type": "application/json"
     }
+  });
+  if (!response.ok) {
+    throw new Error(await response.text());
+  }
+  const memoryUsageInfo = (await response.json()) as MemoryUsageInfo;
+  return {
+    totalKB: memoryUsageInfo.total,
+    freeKB: memoryUsageInfo.free
+  };
+};
 
-    const totalGB = memoryUsageInfo.totalKB / 1048576;
-    const usedGB = totalGB - memoryUsageInfo.freeKB / 1048576;
+export const MemoryTrackerComponent: FunctionComponent = () => {
+  const { data: connectionInfo } = useSWR(
+    [
+      "notebooksConnectionInfo",
+      userContext.subscriptionId,
+      userContext.resourceGroup,
+      userContext.databaseAccount.name,
+      "default"
+    ],
+    (_key, subscriptionId, resourceGroup, accountName, workspace) =>
+      listConnectionInfo(subscriptionId, resourceGroup, accountName, workspace)
+  );
+  const { data } = useSWR(connectionInfo ? ["memoryUsage", connectionInfo] : null, fetchMemoryInfo, {
+    refreshInterval: 2000
+  });
 
+  if (!data) {
     return (
       <Stack className="memoryTrackerContainer" horizontal>
         <span>Memory</span>
-        <ProgressIndicator
-          className={usedGB / totalGB > 0.8 ? "lowMemory" : ""}
-          description={usedGB.toFixed(1) + " of " + totalGB.toFixed(1) + " GB"}
-          percentComplete={usedGB / totalGB}
-        />
+        <Spinner size={SpinnerSize.medium} />
       </Stack>
     );
   }
-}
+  const totalGB = data.totalKB / kbInGB;
+  const usedGB = totalGB - data.freeKB / kbInGB;
+  return (
+    <Stack className="memoryTrackerContainer" horizontal>
+      <span>Memory</span>
+      <ProgressIndicator
+        className={usedGB / totalGB > 0.8 ? "lowMemory" : ""}
+        description={usedGB.toFixed(1) + " of " + totalGB.toFixed(1) + " GB"}
+        percentComplete={usedGB / totalGB}
+      />
+    </Stack>
+  );
+};

src/Explorer/Menus/NavBar/ControlBarComponent.tsx

@@ -3,17 +3,19 @@
  */
 
 import * as React from "react";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { CommandButtonComponent } from "../../Controls/CommandButton/CommandButtonComponent";
+import {
+  CommandButtonComponent,
+  CommandButtonComponentProps
+} from "../../Controls/CommandButton/CommandButtonComponent";
 
 export interface ControlBarComponentProps {
-  buttons: ViewModels.NavbarButtonConfig[];
+  buttons: CommandButtonComponentProps[];
 }
 
 export class ControlBarComponent extends React.Component<ControlBarComponentProps> {
-  private static renderButtons(commandButtonOptions: ViewModels.NavbarButtonConfig[]): JSX.Element[] {
+  private static renderButtons(commandButtonOptions: CommandButtonComponentProps[]): JSX.Element[] {
     return commandButtonOptions.map(
-      (btn: ViewModels.NavbarButtonConfig, index: number): JSX.Element => {
+      (btn: CommandButtonComponentProps, index: number): JSX.Element => {
         // Remove label
         btn.commandButtonLabel = null;
         return CommandButtonComponent.renderButton(btn, `${index}`);

src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx

@@ -8,12 +8,12 @@ import * as ko from "knockout";
 import * as React from "react";
 import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import { ControlBarComponent } from "./ControlBarComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 
 export class ControlBarComponentAdapter implements ReactAdapter {
   public parameters: ko.Observable<number>;
 
-  constructor(private buttons: ko.ObservableArray<ViewModels.NavbarButtonConfig>) {
+  constructor(private buttons: ko.ObservableArray<CommandButtonComponentProps>) {
     this.buttons.subscribe(() => this.forceRender());
     this.parameters = ko.observable<number>(Date.now());
   }