Fix strict mode

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

.eslintignore

@@ -1,5 +1,6 @@
 **/node_modules/
 dist/
+Contracts/
 src/Api/Apis.ts
 src/AuthType.ts
 src/Bindings/BindingHandlersRegisterer.ts
@@ -137,7 +138,6 @@ src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/AddDatabasePane.ts
 src/Explorer/Panes/BrowseQueriesPane.ts
 src/Explorer/Panes/CassandraAddCollectionPane.ts
-src/Explorer/Panes/ClusterLibraryPane.ts
 src/Explorer/Panes/ContextualPaneBase.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
@@ -145,7 +145,6 @@ src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
 src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/LibraryManagePane.ts
 src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
@@ -267,11 +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/Ajax.ts
 src/Shared/Constants.ts
 src/Shared/DefaultExperienceUtility.test.ts
 src/Shared/DefaultExperienceUtility.ts
@@ -281,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
@@ -300,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
@@ -332,10 +322,6 @@ src/Explorer/Controls/Directory/DirectoryListComponent.test.tsx
 src/Explorer/Controls/Directory/DirectoryListComponent.tsx
 src/Explorer/Controls/Editor/EditorReact.tsx
 src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
-src/Explorer/Controls/LibraryManagement/ClusterLibraryGrid.tsx
-src/Explorer/Controls/LibraryManagement/ClusterLibraryGridAdapter.tsx
-src/Explorer/Controls/LibraryManagement/LibraryManage.tsx
-src/Explorer/Controls/LibraryManagement/LibraryManageComponentAdapter.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
@@ -426,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",
@@ -39,6 +39,9 @@ module.exports = {
     curly: "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-extraneous-class": "error",
-    "no-null/no-null": "error"
+    "no-null/no-null": "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,37 @@ 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
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Accessibility Check
+        run: |
+          # Ubuntu gets mad when webpack runs too many files watchers
+          cat /proc/sys/fs/inotify/max_user_watches
+          sudo sysctl fs.inotify.max_user_watches=524288
+          sudo sysctl -p
+          npm ci
+          npm start &
+          npx wait-on  -i 5000 https-get://0.0.0.0:1234/
+          node utils/accesibilityCheck.js
+        shell: bash
+        env:
+          NODE_TLS_REJECT_UNAUTHORIZED: 0
   nuget:
     name: Publish Nuget
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:
@@ -180,6 +222,7 @@ jobs:
           path: "*.nupkg"
   nugetmpac:
     name: Publish Nuget MPAC
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:

README.md

@@ -1,5 +1,9 @@
 # CosmosDB Explorer
 
+UI for Azure Cosmos DB. Powers the [Azure Portal](https://portal.azure.com/), https://cosmos.azure.com/, and the [Cosmos DB Emulator](https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator)
+
+![](https://sdkctlstore.blob.core.windows.net/exe/dataexplorer.gif)
+
 ## Getting Started
 
 - `npm install`
@@ -87,6 +91,10 @@ Jest and Puppeteer are used for end to end production runners and are contained
 1. Copy .env.example to .env and fill in all variables
 2. Run `npm run test:e2e`
 
+### Releasing
+
+We generally adhear to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
+
 # Contributing
 
 Please read the [contribution guidelines](./CONTRIBUTING.md).

__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

@@ -2349,9 +2349,9 @@ a:link {
     text-decoration: none;
 }
 
-.tabsContainer {
+.tabsManagerContainer {
     height: 100%;
-    width: 100%;
+    flex-grow: 1;
     overflow: hidden;
 }
 
@@ -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,9 +118,10 @@
     "@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",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
@@ -126,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",
@@ -146,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",
@@ -186,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 {
@@ -351,6 +364,7 @@ export class HttpStatusCodes {
   public static readonly Created: number = 201;
   public static readonly Accepted: number = 202;
   public static readonly NoContent: number = 204;
+  public static readonly NotModified: number = 304;
   public static readonly Unauthorized: number = 401;
   public static readonly Forbidden: number = 403;
   public static readonly NotFound: number = 404;

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

@@ -2,6 +2,7 @@ import * as Constants from "../Common/Constants";
 import * as ViewModels from "../Contracts/ViewModels";
 import { AuthType } from "../AuthType";
 import { StringUtils } from "../Utils/StringUtils";
+import Explorer from "../Explorer/Explorer";
 
 export default class EnvironmentUtility {
   public static getMongoBackendEndpoint(serverId: string, location: string, extensionEndpoint: string = ""): string {
@@ -26,7 +27,7 @@ export default class EnvironmentUtility {
     return window.authType === AuthType.AAD;
   }
 
-  public static getCassandraBackendEndpoint(explorer: ViewModels.Explorer): string {
+  public static getCassandraBackendEndpoint(explorer: Explorer): string {
     const defaultLocation: string = "default";
     const location: string = EnvironmentUtility.normalizeRegionName(explorer.databaseAccount().location);
     return (

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,21 +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(),
@@ -23,29 +20,29 @@ const defaultHeaders = {
   [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15"
 };
 
-function authHeaders(): any {
+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 };
   }
 }
 
-export function queryIterator(databaseId: string, collection: Collection, query: string): any {
+export function queryIterator(databaseId: string, collection: Collection, query: string): MinimalQueryIterator {
   let continuationToken: string;
   return {
     fetchNext: () => {
       return queryDocuments(databaseId, collection, false, query).then(response => {
         continuationToken = response.continuationToken;
-        const headers = {} as any;
-        response.headers.forEach((value: any, key: any) => {
+        const headers: { [key: string]: string | number } = {};
+        response.headers.forEach((value, key) => {
           headers[key] = value;
         });
         return {
           resources: response.documents,
           headers,
-          requestCharge: headers[CosmosSDKConstants.HttpHeaders.RequestCharge],
-          activityId: headers[CosmosSDKConstants.HttpHeaders.ActivityId],
+          requestCharge: Number(headers[CosmosSDKConstants.HttpHeaders.RequestCharge]),
+          activityId: String(headers[CosmosSDKConstants.HttpHeaders.ActivityId]),
           hasMoreResults: !!continuationToken
         };
       });
@@ -66,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,
@@ -74,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 : ""
@@ -114,16 +111,17 @@ export function queryDocuments(
           headers: response.headers
         };
       }
-      return errorHandling(response, "querying documents", params);
+      errorHandling(response, "querying documents", params);
+      return undefined;
     });
 }
 
 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("/");
@@ -134,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 : ""
@@ -165,9 +163,9 @@ export function createDocument(
   databaseId: string,
   collection: Collection,
   partitionKeyProperty: string,
-  documentContent: any
+  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,
@@ -175,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 : ""
   };
@@ -203,10 +201,10 @@ export function createDocument(
 export function updateDocument(
   databaseId: string,
   collection: Collection,
-  documentId: ViewModels.DocumentId,
-  documentContent: any
+  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("/");
@@ -217,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 : ""
@@ -244,12 +242,8 @@ export function updateDocument(
     });
 }
 
-export function deleteDocument(
-  databaseId: string,
-  collection: Collection,
-  documentId: ViewModels.DocumentId
-): Promise<any> {
-  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("/");
@@ -260,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 : ""
@@ -287,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
-): Promise<any> {
-  const databaseAccount = CosmosClient.databaseAccount();
-  const params: DataModels.MongoParameters = {
+  params: DataModels.CreateCollectionParams
+): Promise<DataModels.Collection> {
+  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: {
@@ -335,59 +321,17 @@ export function createMongoCollectionWithProxy(
     )
     .then(response => {
       if (response.ok) {
-        return undefined;
+        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<any> {
-  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) {
@@ -396,7 +340,9 @@ export function getEndpoint(databaseAccount: ViewModels.DatabaseAccount): string
   return url;
 }
 
-async function errorHandling(response: any, action: string, params: any): Promise<any> {
+// TODO: This function throws most of the time except on Forbidden which is a bit strange
+// It causes problems for TypeScript understanding the types
+async function errorHandling(response: Response, action: string, params: unknown): Promise<void> {
   const errorMessage = await response.text();
   // Log the error where the user can see it
   NotificationConsoleUtils.logConsoleMessage(
@@ -404,56 +350,12 @@ async function errorHandling(response: any, action: string, params: any): Promis
     `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<any> {
-  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 {
-    await new ResourceProviderClient(armEndpoint).putAsync(
-      getARMCreateCollectionEndpoint(params),
-      DataExplorerConstants.ArmApiVersions.publicVersion,
-      rpPayloadToCreateCollection
-    );
-  } catch (response) {
-    return errorHandling(response, "creating collection", 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,17 +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 Explorer from "../Explorer/Explorer";
 import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { CosmosClient } from "./CosmosClient";
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import * as Logger from "./Logger";
-import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
+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,
@@ -20,7 +24,7 @@ export class QueriesClient implements ViewModels.QueriesClient {
   private static readonly FetchQuery: string = "SELECT * FROM c";
   private static readonly FetchMongoQuery: string = "{}";
 
-  public constructor(private container: ViewModels.Explorer) {}
+  public constructor(private container: Explorer) {}
 
   public async setupQueriesCollection(): Promise<DataModels.Collection> {
     const queriesCollection: ViewModels.Collection = this.findQueriesCollection();
@@ -32,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(
@@ -88,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(
@@ -130,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) => {
@@ -216,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(
@@ -249,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 {
@@ -437,10 +445,8 @@ export interface Tenant {
 export interface AccountKeys {
   primaryMasterKey: string;
   secondaryMasterKey: string;
-  properties: {
-    primaryReadonlyMasterKey: string;
-    secondaryReadonlyMasterKey: string;
-  };
+  primaryReadonlyMasterKey: string;
+  secondaryReadonlyMasterKey: string;
 }
 
 export interface AfecFeature {
@@ -553,6 +559,7 @@ export interface GraphParameters extends RpParameters {
   pk: string;
   coll: string;
   cd: Boolean;
+  indexingPolicy?: IndexingPolicy;
 }
 
 export interface CreationRequest {
@@ -570,6 +577,7 @@ export interface SqlCollectionParameters extends RpParameters {
   coll: string;
   cd: Boolean;
   analyticalStorageTtl?: number;
+  indexingPolicy?: IndexingPolicy;
 }
 
 export interface MongoCreationRequest extends CreationRequest {
@@ -588,6 +596,7 @@ export interface GraphCreationRequest extends CreationRequest {
     resource: {
       id: string;
       partitionKey: {};
+      indexingPolicy?: IndexingPolicy;
     };
     options: RpOptions;
   };
@@ -613,6 +622,7 @@ export interface SqlCollectionCreationRequest extends CreationRequest {
       id: string;
       partitionKey: {};
       analyticalStorageTtl?: number;
+      indexingPolicy?: IndexingPolicy;
     };
     options: RpOptions;
   };
@@ -699,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,306 +1,16 @@
 import * as DataModels from "./DataModels";
-import * as Entities from "../Explorer/Tables/Entities";
-import * as monaco from "monaco-editor";
-import DocumentClientUtilityBase from "../Common/DocumentClientUtilityBase";
 import Q from "q";
-import QueryViewModel from "../Explorer/Tables/QueryBuilder/QueryViewModel";
-import TableEntityListViewModel from "../Explorer/Tables/DataTable/TableEntityListViewModel";
-import { AccessibleVerticalList } from "../Explorer/Tree/AccessibleVerticalList";
-import { ArcadiaWorkspaceItem } from "../Explorer/Controls/Arcadia/ArcadiaMenuPicker";
-import { CassandraTableKey, CassandraTableKeys, TableDataClient } from "../Explorer/Tables/TableDataClient";
+import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { ExecuteSprocParam } from "../Explorer/Panes/ExecuteSprocParamsPane";
-import { GitHubClient } from "../GitHub/GitHubClient";
-import { IColumnSetting } from "../Explorer/Panes/Tables/TableColumnOptionsPane";
-import { JunoClient, IGalleryItem } from "../Juno/JunoClient";
-import { Library } from "./DataModels";
-import { MostRecentActivity } from "../Explorer/MostRecentActivity/MostRecentActivity";
-import { NotebookContentItem } from "../Explorer/Notebook/NotebookContentItem";
-import { PlatformType } from "../PlatformType";
 import { QueryMetrics } from "@azure/cosmos";
-import { SetupNotebooksPane } from "../Explorer/Panes/SetupNotebooksPane";
-import { Splitter } from "../Common/Splitter";
-import { StringInputPane } from "../Explorer/Panes/StringInputPane";
-import { TabsManager } from "../Explorer/Tabs/TabsManager";
-import { TextFieldProps } from "../Explorer/Controls/DialogReactComponent/DialogComponent";
 import { UploadDetails } from "../workers/upload/definitions";
-import { UploadItemsPaneAdapter } from "../Explorer/Panes/UploadItemsPaneAdapter";
-import { ReactAdapter } from "../Bindings/ReactBindingHandler";
-
-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 Explorer {
-  flight: ko.Observable<string>;
-  handleMessage(event: MessageEvent): void;
-  isRefreshingExplorer: ko.Observable<boolean>;
-
-  databaseAccount: ko.Observable<DatabaseAccount>;
-  subscriptionType: ko.Observable<SubscriptionType>;
-  quotaId: ko.Observable<string>;
-  hasWriteAccess: ko.Observable<boolean>;
-
-  defaultExperience: ko.Observable<string>;
-  isPreferredApiDocumentDB: ko.Computed<boolean>;
-  isPreferredApiCassandra: ko.Computed<boolean>;
-  isPreferredApiTable: ko.Computed<boolean>;
-  isPreferredApiGraph: ko.Computed<boolean>;
-  isPreferredApiMongoDB: ko.Computed<boolean>;
-
-  isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
-
-  isDatabaseNodeOrNoneSelected(): boolean;
-  isDatabaseNodeSelected(): boolean;
-  isNodeKindSelected(nodeKind: string): boolean;
-  isNoneSelected(): boolean;
-  isSelectedDatabaseShared(): boolean;
-  deleteDatabaseText: ko.Observable<string>;
-  deleteCollectionText: ko.Subscribable<string>; // Our code assigns to a ko.Observable, but unit test assigns to ko.Computed
-
-  addCollectionText: ko.Observable<string>;
-  addDatabaseText: ko.Observable<string>;
-  collectionTitle: ko.Observable<string>;
-  collectionTreeNodeAltText: ko.Observable<string>;
-  refreshTreeTitle: ko.Observable<string>;
-
-  isAccountReady: ko.Observable<boolean>;
-
-  collectionCreationDefaults: CollectionCreationDefaults;
-  isEmulator: boolean;
-  features: ko.Observable<any>;
-  serverId: ko.Observable<string>;
-  extensionEndpoint: ko.Observable<string>;
-  armEndpoint: ko.Observable<string>;
-  isFeatureEnabled: (feature: string) => boolean;
-  isGalleryPublishEnabled: ko.Computed<boolean>;
-  isGitHubPaneEnabled: ko.Observable<boolean>;
-  isPublishNotebookPaneEnabled: ko.Observable<boolean>;
-  isRightPanelV2Enabled: ko.Computed<boolean>;
-  canExceedMaximumValue: ko.Computed<boolean>;
-  hasAutoPilotV2FeatureFlag: ko.Computed<boolean>;
-  isHostedDataExplorerEnabled: ko.Computed<boolean>;
-  isNotificationConsoleExpanded: ko.Observable<boolean>;
-  isTryCosmosDBSubscription: ko.Observable<boolean>;
-  canSaveQueries: ko.Computed<boolean>;
-  parentFrameDataExplorerVersion: ko.Observable<string>;
-
-  documentClientUtility: DocumentClientUtilityBase;
-  notificationsClient: NotificationsClient;
-  queriesClient: QueriesClient;
-  tableDataClient: TableDataClient;
-  splitter: Splitter;
-  notificationConsoleData: ko.ObservableArray<ConsoleData>;
-
-  // Selection
-  selectedNode: ko.Observable<TreeNode>;
-
-  // Tree
-  databases: ko.ObservableArray<Database>;
-  nonSystemDatabases: ko.Computed<Database[]>;
-  selectedDatabaseId: ko.Computed<string>;
-  selectedCollectionId: ko.Computed<string>;
-  isLeftPaneExpanded: ko.Observable<boolean>;
-
-  // Resource Token
-  resourceTokenDatabaseId: ko.Observable<string>;
-  resourceTokenCollectionId: ko.Observable<string>;
-  resourceTokenCollection: ko.Observable<CollectionBase>;
-  resourceTokenPartitionKey: ko.Observable<string>;
-  isAuthWithResourceToken: ko.Observable<boolean>;
-  isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
-
-  // Tabs
-  isTabsContentExpanded: ko.Observable<boolean>;
-  tabsManager: TabsManager;
-
-  // Contextual Panes
-  addDatabasePane: AddDatabasePane;
-  addCollectionPane: AddCollectionPane;
-  deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
-  deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
-  graphStylingPane: GraphStylingPane;
-  addTableEntityPane: AddTableEntityPane;
-  editTableEntityPane: EditTableEntityPane;
-  tableColumnOptionsPane: TableColumnOptionsPane;
-  querySelectPane: QuerySelectPane;
-  newVertexPane: NewVertexPane;
-  cassandraAddCollectionPane: CassandraAddCollectionPane;
-  settingsPane: SettingsPane;
-  executeSprocParamsPane: ExecuteSprocParamsPane;
-  renewAdHocAccessPane: RenewAdHocAccessPane;
-  uploadItemsPane: UploadItemsPane;
-  uploadItemsPaneAdapter: UploadItemsPaneAdapter;
-  loadQueryPane: LoadQueryPane;
-  saveQueryPane: ContextualPane;
-  browseQueriesPane: BrowseQueriesPane;
-  uploadFilePane: UploadFilePane;
-  stringInputPane: StringInputPane;
-  setupNotebooksPane: SetupNotebooksPane;
-  libraryManagePane: ContextualPane;
-  clusterLibraryPane: ContextualPane;
-  gitHubReposPane: ContextualPane;
-  publishNotebookPaneAdapter: ReactAdapter;
-
-  // Facade
-  logConsoleData(data: ConsoleData): void;
-  isNodeKindSelected(nodeKind: string): boolean;
-  initDataExplorerWithFrameInputs(inputs: DataExplorerInputsFrame): Q.Promise<void>;
-  toggleLeftPaneExpanded(): void;
-  refreshDatabaseForResourceToken(): Q.Promise<void>;
-  refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any>;
-  closeAllPanes(): void;
-  findSelectedDatabase(): Database;
-  findDatabaseWithId(databaseRid: string): Database;
-  isLastDatabase(): boolean;
-  isLastNonEmptyDatabase(): boolean;
-  findSelectedCollection(): Collection;
-  isLastCollection(): boolean;
-  findSelectedStoredProcedure(): StoredProcedure;
-  findSelectedUDF(): UserDefinedFunction;
-  findSelectedTrigger(): Trigger;
-  findCollection(rid: string): Collection;
-  provideFeedbackEmail(): void;
-  expandConsole: () => void;
-  collapseConsole: () => void;
-  generateSharedAccessData(): void;
-  getPlatformType(): PlatformType;
-  isConnectExplorerVisible(): boolean;
-  isRunningOnNationalCloud(): boolean;
-  displayConnectExplorerForm(): void;
-  hideConnectExplorerForm(): void;
-  displayContextSwitchPromptForConnectionString(connectionString: string): void;
-  displayGuestAccessTokenRenewalPrompt(): void;
-  rebindDocumentClientUtility(documentClientUtility: DocumentClientUtilityBase): void;
-  renewExplorerShareAccess: (explorer: Explorer, token: string) => Q.Promise<void>;
-  renewShareAccess(accessInput: string): Q.Promise<void>;
-  onUpdateTabsButtons: (buttons: NavbarButtonConfig[]) => void;
-  onNewCollectionClicked: () => void;
-  showOkModalDialog: (title: string, msg: string) => void;
-  showOkCancelModalDialog: (
-    title: string,
-    msg: string,
-    okLabel: string,
-    onOk: () => void,
-    cancelLabel: string,
-    onCancel: () => void
-  ) => void;
-  showOkCancelTextFieldModalDialog: (
-    title: string,
-    msg: string,
-    okLabel: string,
-    onOk: () => void,
-    cancelLabel: string,
-    onCancel: () => void,
-    textFiledProps: TextFieldProps,
-    isPrimaryButtonDisabled?: boolean
-  ) => void;
-
-  // Analytics
-  isNotebookEnabled: ko.Observable<boolean>;
-  isSparkEnabled: ko.Observable<boolean>;
-  isNotebooksEnabledForAccount: ko.Observable<boolean>;
-  isSparkEnabledForAccount: ko.Observable<boolean>;
-  hasStorageAnalyticsAfecFeature: ko.Observable<boolean>;
-  openEnableSynapseLinkDialog(): void;
-  isSynapseLinkUpdating: ko.Observable<boolean>;
-  notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>;
-  sparkClusterConnectionInfo: ko.Observable<DataModels.SparkClusterConnectionInfo>;
-  arcadiaToken: ko.Observable<string>;
-  arcadiaWorkspaces: ko.ObservableArray<ArcadiaWorkspaceItem>;
-  memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
-  notebookManager?: any; // This is dynamically loaded
-  openNotebook(notebookContentItem: NotebookContentItem): Promise<boolean>; // True if it was opened, false otherwise
-  resetNotebookWorkspace(): void;
-  importAndOpen: (path: string) => Promise<boolean>;
-  importAndOpenContent: (name: string, content: string) => Promise<boolean>;
-  publishNotebook: (name: string, content: string) => void;
-  openNotebookTerminal: (kind: TerminalKind) => void;
-  openGallery: (notebookUrl?: string, galleryItem?: IGalleryItem, isFavorite?: boolean) => void;
-  openNotebookViewer: (notebookUrl: string) => void;
-  notebookWorkspaceManager: NotebookWorkspaceManager;
-  sparkClusterManager: SparkClusterManager;
-  mostRecentActivity: MostRecentActivity;
-  initNotebooks: (databaseAccount: DataModels.DatabaseAccount) => Promise<void>;
-  deleteCluster(): void;
-  openSparkMasterTab(): Promise<void>;
-  handleOpenFileAction(path: string): Promise<void>;
-
-  // Notebook operations
-  openNotebook(notebookContentItem: NotebookContentItem): Promise<boolean>; // True if it was opened, false otherwise
-  deleteNotebookFile: (item: NotebookContentItem) => Promise<void>;
-  onCreateDirectory(parent: NotebookContentItem): Q.Promise<NotebookContentItem>;
-  onNewNotebookClicked: (parent?: NotebookContentItem) => void;
-  onUploadToNotebookServerClicked: (parent?: NotebookContentItem) => void;
-  renameNotebook: (notebookFile: NotebookContentItem) => Q.Promise<NotebookContentItem>;
-  readFile: (notebookFile: NotebookContentItem) => Promise<string>;
-  downloadFile: (notebookFile: NotebookContentItem) => Promise<void>;
-  createNotebookContentItemFile: (name: string, filepath: string) => NotebookContentItem;
-  refreshContentItem(item: NotebookContentItem): Promise<void>;
-  getNotebookBasePath(): string;
-
-  createWorkspace(): Promise<string>;
-  createSparkPool(workspaceId: string): Promise<string>;
-}
-
-export interface NotebookWorkspaceManager {
-  getNotebookWorkspacesAsync(cosmosAccountResourceId: string): Promise<DataModels.NotebookWorkspace[]>;
-  getNotebookWorkspaceAsync(
-    cosmosAccountResourceId: string,
-    notebookWorkspaceId: string
-  ): Promise<DataModels.NotebookWorkspace>;
-  createNotebookWorkspaceAsync(cosmosdbResourceId: string, notebookWorkspaceId: string): Promise<void>;
-  deleteNotebookWorkspaceAsync(cosmosdbResourceId: string, notebookWorkspaceId: string): Promise<void>;
-  getNotebookConnectionInfoAsync(
-    cosmosAccountResourceId: string,
-    notebookWorkspaceId: string
-  ): Promise<DataModels.NotebookWorkspaceConnectionInfo>;
-  startNotebookWorkspaceAsync(cosmosdbResourceId: string, notebookWorkspaceId: string): Promise<void>;
-}
-
-export interface KernelConnectionMetadata {
-  name: string;
-  configurationEndpoints: DataModels.NotebookConfigurationEndpoints;
-  notebookConnectionInfo: DataModels.NotebookWorkspaceConnectionInfo;
-}
-
-export interface SparkClusterManager {
-  getClustersAsync(cosmosAccountResourceId: string): Promise<DataModels.SparkCluster[]>;
-  getClusterAsync(cosmosAccountResourceId: string, clusterId: string): Promise<DataModels.SparkCluster>;
-  createClusterAsync(cosmosAccountResourceId: string, cluster: Partial<DataModels.SparkCluster>): Promise<void>;
-  updateClusterAsync(
-    cosmosAccountResourceId: string,
-    clusterId: string,
-    sparkCluster: DataModels.SparkCluster
-  ): Promise<DataModels.SparkCluster>;
-  deleteClusterAsync(cosmosAccountResourceId: string, clusterId: string): Promise<void>;
-  getClusterConnectionInfoAsync(
-    cosmosAccountResourceId: string,
-    clusterId: string
-  ): Promise<DataModels.SparkClusterConnectionInfo>;
-  getLibrariesAsync(cosmosdbResourceId: string): Promise<Library[]>;
-  getLibraryAsync(cosmosdbResourceId: string, libraryName: string): Promise<Library>;
-  addLibraryAsync(cosmosdbResourceId: string, libraryName: string, library: Library): Promise<void>;
-  deleteLibraryAsync(cosmosdbResourceId: string, libraryName: string): Promise<void>;
-}
-
-export interface ArcadiaResourceManager {
-  getWorkspacesAsync(arcadiaResourceId: string): Promise<DataModels.ArcadiaWorkspace[]>;
-  getWorkspaceAsync(arcadiaResourceId: string, workspaceId: string): Promise<DataModels.ArcadiaWorkspace>;
-  listWorkspacesAsync(subscriptionIds: string[]): Promise<DataModels.ArcadiaWorkspace[]>;
-  listSparkPoolsAsync(resourceId: string): Promise<DataModels.SparkPool[]>;
-}
+import Explorer from "../Explorer/Explorer";
+import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
+import StoredProcedure from "../Explorer/Tree/StoredProcedure";
+import Trigger from "../Explorer/Tree/Trigger";
+import DocumentId from "../Explorer/Tree/DocumentId";
+import ConflictId from "../Explorer/Tree/ConflictId";
 
 export interface TokenProvider {
   getAuthHeader(): Promise<Headers>;
@@ -340,11 +50,6 @@ export interface WaitsForTemplate {
   isTemplateReady: ko.Observable<boolean>;
 }
 
-export interface AdHocAccessData {
-  readWriteUrl: string;
-  readUrl: string;
-}
-
 export interface TreeNode {
   nodeKind: string;
   rid: string;
@@ -466,236 +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>;
-}
-
-export interface StoredProcedure extends TreeNode {
-  container: Explorer;
-  collection: Collection;
-  rid: string;
-  self: string;
-  id: ko.Observable<string>;
-  body: ko.Observable<string>;
-
-  delete(): void;
-  open: () => void;
-  select(): void;
-  execute(params: string[], partitionKeyValue?: string): void;
-}
-
-export interface UserDefinedFunction extends TreeNode {
-  container: Explorer;
-  collection: Collection;
-  rid: string;
-  self: string;
-  id: ko.Observable<string>;
-  body: ko.Observable<string>;
-
-  delete(): void;
-  open: () => void;
-  select(): void;
-}
-
-export interface Trigger extends TreeNode {
-  container: Explorer;
-  collection: Collection;
-  rid: string;
-  self: string;
-  id: ko.Observable<string>;
-  body: ko.Observable<string>;
-  triggerType: ko.Observable<string>;
-  triggerOperation: ko.Observable<string>;
-
-  delete(): void;
-  open: () => void;
-  select(): void;
-}
-
 /**
  * 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 AddCollectionPane extends ContextualPane {
-  collectionIdTitle: ko.Observable<string>;
-  collectionWithThroughputInSharedTitle: ko.Observable<string>;
-  databaseId: ko.Observable<string>;
-  partitionKey: ko.Observable<string>;
-  storage: ko.Observable<string>;
-  throughputSinglePartition: ko.Observable<number>;
-  throughputMultiPartition: ko.Observable<number>;
-
-  open: (databaseId?: string) => void;
-  onStorageOptionsKeyDown(source: any, event: KeyboardEvent): boolean;
-  onRupmOptionsKeyDown(source: any, event: KeyboardEvent): void;
-  onEnableSynapseLinkButtonClicked: () => void;
-}
-
-export interface AddDatabasePane extends ContextualPane {}
-
-export interface DeleteDatabaseConfirmationPane extends ContextualPane {
-  databaseIdConfirmation: ko.Observable<string>;
-  databaseIdConfirmationText: ko.Observable<string>;
-  databaseDeleteFeedback: ko.Observable<string>;
-}
-
-export interface DeleteCollectionConfirmationPane extends ContextualPane {
-  collectionIdConfirmation: ko.Observable<string>;
-  collectionIdConfirmationText: ko.Observable<string>;
-  containerDeleteFeedback: ko.Observable<string>;
-  recordDeleteFeedback: ko.Observable<boolean>;
-}
-
-export interface SettingsPane extends ContextualPane {
-  pageOption: ko.Observable<string>;
-  customItemPerPage: ko.Observable<number>;
-  crossPartitionQueryEnabled: ko.Observable<boolean>;
-  maxDegreeOfParallelism: ko.Observable<number>;
-  shouldShowQueryPageOptions: ko.Computed<boolean>;
-
-  onCustomPageOptionsKeyDown(source: any, event: KeyboardEvent): boolean;
-  onUnlimitedPageOptionKeyDown(source: any, event: KeyboardEvent): boolean;
-  onJsonDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean;
-  onGraphDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean;
-}
-
-export interface ExecuteSprocParamsPane extends ContextualPane {
-  params: ko.ObservableArray<ExecuteSprocParam>;
-  partitionKeyValue: ko.Observable<string>;
-
-  addNewParam(): void;
-}
-
-export interface RenewAdHocAccessPane extends ContextualPane {
-  accessKey: ko.Observable<string>;
-}
-
-export interface UploadItemsPane extends ContextualPane {
-  selectedFilesTitle: ko.Observable<string>;
-  files: ko.Observable<FileList>;
-
-  updateSelectedFiles(element: any, event: any): void;
-}
-
-export interface LoadQueryPane extends ContextualPane {
-  selectedFilesTitle: ko.Observable<string>;
-  files: ko.Observable<FileList>;
-
-  loadQueryFromFile(file: File): Q.Promise<void>;
-}
-
-export interface BrowseQueriesPane extends ContextualPane {
-  loadSavedQuery: (savedQuery: DataModels.Query) => void;
-}
-
-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;
-}
-
-export interface UploadFilePane extends ContextualPane {
-  openWithOptions: (options: UploadFilePaneOpenOptions) => void;
-}
-
 /**
  * Graph configuration
  */
@@ -740,41 +224,6 @@ export interface InputProperty {
   values: InputPropertyValue[];
 }
 
-export interface GraphStylingPane extends ContextualPane {
-  setData(graphConfigUIData: GraphConfigUiData): void;
-}
-
-export interface NewVertexPane extends ContextualPane {
-  setPartitionKeyProperty: (pKeyProp: string) => void;
-  subscribeOnSubmitCreate: (callback: (newVertexData: NewVertexData) => void) => void;
-}
-
-export interface AddTableEntityPane extends ContextualPane {
-  tableViewModel: TableEntityListViewModel;
-}
-
-export interface EditTableEntityPane extends ContextualPane {
-  originEntity: Entities.ITableEntity;
-  tableViewModel: TableEntityListViewModel;
-  originalNumberOfProperties: number;
-}
-
-export interface TableColumnOptionsPane extends ContextualPane {
-  tableViewModel: TableEntityListViewModel;
-  parameters: IColumnSetting;
-  setDisplayedColumns(columnNames: string[], order: number[], visible: boolean[]): void;
-}
-
-export interface QuerySelectPane extends ContextualPane {
-  queryViewModel: QueryViewModel;
-}
-
-export interface CassandraAddCollectionPane extends ContextualPane {
-  createTableQuery: ko.Observable<string>;
-  keyspaceId: ko.Observable<string>;
-  userTableQuery: ko.Observable<string>;
-}
-
 export interface Editable<T> extends ko.Observable<T> {
   setBaseline(baseline: T): void;
 
@@ -800,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;
@@ -824,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;
 
@@ -841,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>;
@@ -909,262 +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 ConflictsTab extends Tab {
-  /* Conflicts Grid  */
-  selectedConflictId: ko.Observable<ConflictId>;
-  selectedConflictContent: Editable<any>;
-  selectedConflictCurrent: Editable<any>;
-  onConflictIdClick(conflictId: ConflictId): Q.Promise<any>;
-  dataContentsGridScrollHeight: ko.Observable<string>;
-  accessibleDocumentList: AccessibleVerticalList;
-  documentContentsGridId: string;
-
-  partitionKey: DataModels.PartitionKey;
-  partitionKeyPropertyHeader: string;
-  partitionKeyProperty: string;
-  conflictIds: ko.ObservableArray<ConflictId>;
-
-  /* Document Editor */
-  isEditorDirty: ko.Computed<boolean>;
-  editorState: ko.Observable<DocumentExplorerState>;
-  onValidDocumentEdit(content: any): Q.Promise<any>;
-  onInvalidDocumentEdit(content: any): Q.Promise<any>;
-  loadingConflictData: ko.Observable<boolean>;
-
-  onAcceptChangesClick(): Q.Promise<any>;
-  onDiscardClick(): Q.Promise<any>;
-
-  initDocumentEditorForCreate(documentId: ConflictId, documentToInsert: any): Q.Promise<any>;
-  initDocumentEditorForReplace(documentId: ConflictId, conflictContent: any, currentContent: any): Q.Promise<any>;
-  initDocumentEditorForDelete(documentId: ConflictId, documentToDelete: any): Q.Promise<any>;
-  initDocumentEditorForNoOp(conflictId: ConflictId): Q.Promise<any>;
-  loadNextPage(): Q.Promise<any>;
-}
-
-export interface SettingsTab extends Tab {
-  /*state*/
-  throughput: ko.Observable<number>;
-  timeToLive: ko.Observable<string>;
-  timeToLiveSeconds: ko.Observable<number>;
-  geospatialVisible: ko.Computed<boolean>;
-  geospatialConfigType: ko.Observable<string>;
-  indexingPolicyContent: ko.Observable<DataModels.IndexingPolicy>;
-  rupm: ko.Observable<string>;
-  requestUnitsUsageCost: ko.Computed<string>;
-  canThroughputExceedMaximumValue: ko.Computed<boolean>;
-  shouldDisplayPortalUsePrompt: ko.Computed<boolean>;
-  warningMessage: ko.Computed<string>;
-  ttlOffFocused: ko.Observable<boolean>;
-  ttlOnDefaultFocused: ko.Observable<boolean>;
-  ttlOnFocused: ko.Observable<boolean>;
-  indexingPolicyElementFocused: ko.Observable<boolean>;
-  notificationStatusInfo: ko.Observable<string>;
-  shouldShowNotificationStatusPrompt: ko.Computed<boolean>;
-  shouldShowStatusBar: ko.Computed<boolean>;
-  pendingNotification: ko.Observable<DataModels.Notification>;
-
-  conflictResolutionPolicyMode: ko.Observable<string>;
-  conflictResolutionPolicyPath: ko.Observable<string>;
-  conflictResolutionPolicyProcedure: ko.Observable<string>;
-
-  rupmVisible: ko.Computed<boolean>;
-  costsVisible: ko.Computed<boolean>;
-  minRUAnotationVisible: ko.Computed<boolean>;
-
-  /* Command Bar */
-  saveSettingsButton: Button;
-  discardSettingsChangesButton: Button;
-  onSaveClick(): Q.Promise<any>;
-  onRevertClick(): Q.Promise<any>;
-
-  /* Indexing Policy Editor */
-  isIndexingPolicyEditorInitializing: ko.Observable<boolean>;
-  indexingPolicyEditor: ko.Observable<monaco.editor.IStandaloneCodeEditor>;
-  onValidIndexingPolicyEdit(content: any): Q.Promise<any>;
-  onInvalidIndexingPolicyEdit(content: any): Q.Promise<any>;
-
-  onSaveClick(): Q.Promise<any>;
-  onRevertClick(): Q.Promise<any>;
-}
-
-export interface DatabaseSettingsTab extends Tab {
-  /*state*/
-  throughput: ko.Observable<number>;
-  requestUnitsUsageCost: ko.PureComputed<string>;
-  canThroughputExceedMaximumValue: ko.Computed<boolean>;
-  warningMessage: ko.Computed<string>;
-  notificationStatusInfo: ko.Observable<string>;
-  shouldShowNotificationStatusPrompt: ko.Computed<boolean>;
-  shouldShowStatusBar: ko.Computed<boolean>;
-  pendingNotification: ko.Observable<DataModels.Notification>;
-
-  costsVisible: ko.Computed<boolean>;
-  minRUAnotationVisible: ko.Computed<boolean>;
-
-  /* Command Bar */
-  saveSettingsButton: Button;
-  discardSettingsChangesButton: Button;
-  onSaveClick(): Q.Promise<any>;
-  onRevertClick(): Q.Promise<any>;
-
-  /* Errors */
-  displayedError: ko.Observable<string>;
-
-  onSaveClick(): Q.Promise<any>;
-  onRevertClick(): 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,
@@ -1282,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.test.ts

@@ -123,12 +123,4 @@ describe("Component Registerer", () => {
   it("should register throughput-input component", () => {
     expect(ko.components.isRegistered("throughput-input")).toBe(true);
   });
-
-  it("should register library-manage-pane component", () => {
-    expect(ko.components.isRegistered("library-manage-pane")).toBe(true);
-  });
-
-  it("should register cluster-library-pane component", () => {
-    expect(ko.components.isRegistered("cluster-library-pane")).toBe(true);
-  });
 });

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());
@@ -78,6 +76,4 @@ ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPa
 ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComponent());
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
-ko.components.register("library-manage-pane", new PaneComponents.LibraryManagePaneComponent());
-ko.components.register("cluster-library-pane", new PaneComponents.ClusterLibraryPaneComponent());
 ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -12,6 +12,10 @@ import AddTriggerIcon from "../../images/AddTrigger.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
 import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import Explorer from "./Explorer";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import StoredProcedure from "./Tree/StoredProcedure";
+import Trigger from "./Tree/Trigger";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -26,7 +30,7 @@ export interface DatabaseContextMenuButtonParams {
  */
 export class ResourceTreeContextMenuButtonFactory {
   public static createDatabaseContextMenu(
-    container: ViewModels.Explorer,
+    container: Explorer,
     selectedDatabase: ViewModels.Database
   ): TreeNodeMenuItem[] {
     const newCollectionMenuItem: TreeNodeMenuItem = {
@@ -44,7 +48,7 @@ export class ResourceTreeContextMenuButtonFactory {
   }
 
   public static createCollectionContextMenuButton(
-    container: ViewModels.Explorer,
+    container: Explorer,
     selectedCollection: ViewModels.Collection
   ): TreeNodeMenuItem[] {
     const items: TreeNodeMenuItem[] = [];
@@ -115,8 +119,8 @@ export class ResourceTreeContextMenuButtonFactory {
   }
 
   public static createStoreProcedureContextMenuItems(
-    container: ViewModels.Explorer,
-    storedProcedure: ViewModels.StoredProcedure
+    container: Explorer,
+    storedProcedure: StoredProcedure
   ): TreeNodeMenuItem[] {
     if (container.isPreferredApiCassandra()) {
       return [];
@@ -131,10 +135,7 @@ export class ResourceTreeContextMenuButtonFactory {
     ];
   }
 
-  public static createTriggerContextMenuItems(
-    container: ViewModels.Explorer,
-    trigger: ViewModels.Trigger
-  ): TreeNodeMenuItem[] {
+  public static createTriggerContextMenuItems(container: Explorer, trigger: Trigger): TreeNodeMenuItem[] {
     if (container.isPreferredApiCassandra()) {
       return [];
     }
@@ -149,8 +150,8 @@ export class ResourceTreeContextMenuButtonFactory {
   }
 
   public static createUserDefinedFunctionContextMenuItems(
-    container: ViewModels.Explorer,
-    userDefinedFunction: ViewModels.UserDefinedFunction
+    container: Explorer,
+    userDefinedFunction: UserDefinedFunction
   ): TreeNodeMenuItem[] {
     if (container.isPreferredApiCassandra()) {
       return [];

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/DialogReactComponent/DialogComponent.tsx

@@ -3,6 +3,7 @@ import { Dialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric
 import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
 import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
 import { Link } from "office-ui-fabric-react/lib/Link";
+import { FontIcon } from "office-ui-fabric-react";
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -84,7 +85,7 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
         {textFieldProps && <TextField {...textFieldProps} />}
         {linkProps && (
           <Link href={linkProps.linkUrl} target="_blank">
-            {linkProps.linkText}
+            {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
           </Link>
         )}
         <DialogFooter>

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

@@ -23,8 +23,5 @@ interface ErrorDisplayParams {
 }
 
 class ErrorDisplayViewModel {
-  private params: ErrorDisplayParams;
-  public constructor(params: ErrorDisplayParams) {
-    this.params = params;
-  }
+  public constructor(public params: ErrorDisplayParams) {}
 }

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

@@ -1,17 +1,17 @@
 import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "office-ui-fabric-react";
 import * as React from "react";
-import * as ViewModels from "../../../Contracts/ViewModels";
 import * as Constants from "../../../Common/Constants";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 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";
 
 export interface AddRepoComponentProps {
-  container: ViewModels.Explorer;
+  container: Explorer;
   getRepo: (owner: string, repo: string) => Promise<IGitHubRepo>;
   pinRepo: (item: RepoListItem) => void;
 }

src/Explorer/Controls/Header/GalleryHeaderComponent.tsx

@@ -5,11 +5,9 @@ export class GalleryHeaderComponent extends React.Component {
   private static readonly azureText = "Microsoft Azure";
   private static readonly cosmosdbText = "Cosmos DB";
   private static readonly galleryText = "Gallery";
-  private static readonly loginText = "Log in";
+  private static readonly loginText = "Sign In";
   private static readonly openPortal = () => window.open("https://portal.azure.com", "_blank");
   private static readonly openDataExplorer = () => (window.location.href = new URL("./", window.location.href).href);
-  private static readonly openGallery = () =>
-    (window.location.href = new URL("./galleryViewer.html", window.location.href).href);
   private static readonly headerItemStyle: React.CSSProperties = {
     color: "white"
   };
@@ -63,7 +61,7 @@ export class GalleryHeaderComponent extends React.Component {
         <Stack.Item>
           {this.renderHeaderItem(
             GalleryHeaderComponent.galleryText,
-            GalleryHeaderComponent.openGallery,
+            undefined,
             GalleryHeaderComponent.headerItemTextProps
           )}
         </Stack.Item>

src/Explorer/Controls/LibraryManagement/ClusterLibraryGrid.tsx

@@ -1,40 +0,0 @@
-import * as React from "react";
-import { DetailsList, IColumn, SelectionMode } from "office-ui-fabric-react/lib/DetailsList";
-import { Library } from "../../../Contracts/DataModels";
-
-export interface ClusterLibraryItem extends Library {
-  installed: boolean;
-}
-
-export interface ClusterLibraryGridProps {
-  libraryItems: ClusterLibraryItem[];
-  onInstalledChanged: (libraryName: string, installed: boolean) => void;
-}
-
-export function ClusterLibraryGrid(props: ClusterLibraryGridProps): JSX.Element {
-  const onInstalledChanged = (e: React.FormEvent<HTMLInputElement>) => {
-    const target = e.target;
-    const libraryName = (target as any).dataset.name;
-    const checked = (target as any).checked;
-    return props.onInstalledChanged(libraryName, checked);
-  };
-
-  const columns: IColumn[] = [
-    {
-      key: "name",
-      name: "Name",
-      fieldName: "name",
-      minWidth: 150
-    },
-    {
-      key: "installed",
-      name: "Installed",
-      minWidth: 100,
-      onRender: (item: ClusterLibraryItem) => {
-        return <input type="checkbox" checked={item.installed} onChange={onInstalledChanged} data-name={item.name} />;
-      }
-    }
-  ];
-
-  return <DetailsList columns={columns} items={props.libraryItems} selectionMode={SelectionMode.none} />;
-}

src/Explorer/Controls/LibraryManagement/ClusterLibraryGridAdapter.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { ClusterLibraryGrid, ClusterLibraryGridProps } from "./ClusterLibraryGrid";
-
-export class ClusterLibraryGridAdapter implements ReactAdapter {
-  public parameters: ko.Observable<ClusterLibraryGridProps>;
-
-  public renderComponent(): JSX.Element {
-    return <ClusterLibraryGrid {...this.parameters()} />;
-  }
-}

src/Explorer/Controls/LibraryManagement/LibraryManage.tsx

@@ -1,156 +0,0 @@
-import * as React from "react";
-import DeleteIcon from "../../../../images/delete.svg";
-import { Button } from "office-ui-fabric-react/lib/Button";
-import { DetailsList, IColumn, SelectionMode } from "office-ui-fabric-react/lib/DetailsList";
-import { Library } from "../../../Contracts/DataModels";
-import { Label } from "office-ui-fabric-react/lib/Label";
-import { SparkLibrary } from "../../../Common/Constants";
-import { TextField } from "office-ui-fabric-react/lib/TextField";
-
-export interface LibraryManageComponentProps {
-  addProps: {
-    nameProps: LibraryAddNameTextFieldProps;
-    urlProps: LibraryAddUrlTextFieldProps;
-    buttonProps: LibraryAddButtonProps;
-  };
-  gridProps: LibraryManageGridProps;
-}
-
-export function LibraryManageComponent(props: LibraryManageComponentProps): JSX.Element {
-  const {
-    addProps: { nameProps, urlProps, buttonProps },
-    gridProps
-  } = props;
-  return (
-    <div>
-      <div className="library-add-container">
-        <LibraryAddNameTextField {...nameProps} />
-        <LibraryAddUrlTextField {...urlProps} />
-        <LibraryAddButton {...buttonProps} />
-      </div>
-      <div className="library-grid-container">
-        <Label>All Libraries</Label>
-        <LibraryManageGrid {...gridProps} />
-      </div>
-    </div>
-  );
-}
-
-export interface LibraryManageGridProps {
-  items: Library[];
-  onLibraryDeleteClick: (libraryName: string) => void;
-}
-
-function LibraryManageGrid(props: LibraryManageGridProps): JSX.Element {
-  const columns: IColumn[] = [
-    {
-      key: "name",
-      name: "Name",
-      fieldName: "name",
-      minWidth: 200
-    },
-    {
-      key: "delete",
-      name: "Delete",
-      minWidth: 60,
-      onRender: (item: Library) => {
-        const onDelete = () => {
-          props.onLibraryDeleteClick(item.name);
-        };
-        return (
-          <span className="library-delete">
-            <img src={DeleteIcon} alt="Delete" onClick={onDelete} />
-          </span>
-        );
-      }
-    }
-  ];
-  return <DetailsList columns={columns} items={props.items} selectionMode={SelectionMode.none} />;
-}
-
-export interface LibraryAddButtonProps {
-  disabled: boolean;
-  onLibraryAddClick: (event: React.FormEvent<any>) => void;
-}
-
-function LibraryAddButton(props: LibraryAddButtonProps): JSX.Element {
-  return (
-    <Button text="Add" className="library-add-button" onClick={props.onLibraryAddClick} disabled={props.disabled} />
-  );
-}
-
-export interface LibraryAddUrlTextFieldProps {
-  libraryAddress: string;
-  onLibraryAddressChange: (libraryAddress: string) => void;
-  onLibraryAddressValidated: (errorMessage: string, value: string) => void;
-}
-
-function LibraryAddUrlTextField(props: LibraryAddUrlTextFieldProps): JSX.Element {
-  const handleTextChange = (e: React.FormEvent<any>, libraryAddress: string) => {
-    props.onLibraryAddressChange(libraryAddress);
-  };
-  const validateText = (text: string): string => {
-    if (!text) {
-      return "";
-    }
-    const libraryUrlRegex = /^(https:\/\/.+\/)(.+)\.(jar)$/gi;
-    const isValidUrl = libraryUrlRegex.test(text);
-    if (isValidUrl) {
-      return "";
-    }
-    return "Need to be a valid https uri";
-  };
-  return (
-    <TextField
-      value={props.libraryAddress}
-      label="Url"
-      type="url"
-      className="library-add-textfield"
-      onChange={handleTextChange}
-      onGetErrorMessage={validateText}
-      onNotifyValidationResult={props.onLibraryAddressValidated}
-      placeholder="https://myrepo/myjar.jar"
-      autoComplete="off"
-    />
-  );
-}
-
-export interface LibraryAddNameTextFieldProps {
-  libraryName: string;
-  onLibraryNameChange: (libraryName: string) => void;
-  onLibraryNameValidated: (errorMessage: string, value: string) => void;
-}
-
-function LibraryAddNameTextField(props: LibraryAddNameTextFieldProps): JSX.Element {
-  const handleTextChange = (e: React.FormEvent<any>, libraryName: string) => {
-    props.onLibraryNameChange(libraryName);
-  };
-  const validateText = (text: string): string => {
-    if (!text) {
-      return "";
-    }
-    const length = text.length;
-    if (length < SparkLibrary.nameMinLength || length > SparkLibrary.nameMaxLength) {
-      return "Library name length need to be between 3 and 63.";
-    }
-    const nameRegex = /^[a-z0-9][-a-z0-9]*[a-z0-9]$/gi;
-    const isValidUrl = nameRegex.test(text);
-    if (isValidUrl) {
-      return "";
-    }
-    return "Need to be a valid name. Letters, numbers and - are allowed";
-  };
-  return (
-    <TextField
-      value={props.libraryName}
-      label="Name"
-      type="text"
-      className="library-add-textfield"
-      onChange={handleTextChange}
-      onGetErrorMessage={validateText}
-      onNotifyValidationResult={props.onLibraryNameValidated}
-      placeholder="myjar"
-      autoComplete="off"
-    />
-  );
-}

src/Explorer/Controls/LibraryManagement/LibraryManageComponentAdapter.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { LibraryManageComponent, LibraryManageComponentProps } from "./LibraryManage";
-
-export class LibraryManageComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<LibraryManageComponentProps>;
-
-  public renderComponent(): JSX.Element {
-    return <LibraryManageComponent {...this.parameters()} />;
-  }
-}

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,9 +17,11 @@ describe("GalleryCardComponent", () => {
         isSample: false,
         downloads: 0,
         favorites: 0,
-        views: 0
+        views: 0,
+        newCellId: undefined
       },
       isFavorite: false,
+      showDownload: true,
       showDelete: true,
       onClick: undefined,
       onTagClick: undefined,

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

@@ -1,4 +1,4 @@
-import { Card, ICardTokens } from "@uifabric/react-cards";
+import { Card } from "@uifabric/react-cards";
 import {
   FontWeights,
   Icon,
@@ -18,10 +18,12 @@ import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
+import { StyleConstants } from "../../../../Common/Constants";
 
 export interface GalleryCardComponentProps {
   data: IGalleryItem;
   isFavorite: boolean;
+  showDownload: boolean;
   showDelete: boolean;
   onClick: () => void;
   onTagClick: (tag: string) => void;
@@ -32,30 +34,32 @@ export interface GalleryCardComponentProps {
 }
 
 export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
-  public static readonly CARD_HEIGHT = 384;
   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 cardTokens: ICardTokens = {
-    width: GalleryCardComponent.CARD_WIDTH,
-    height: GalleryCardComponent.CARD_HEIGHT,
-    childrenGap: 8,
-    childrenMargin: 10
-  };
+  private static readonly cardItemGapBig = 10;
+  private static readonly cardItemGapSmall = 8;
 
   public render(): JSX.Element {
+    const cardButtonsVisible = this.props.isFavorite !== undefined || this.props.showDownload || this.props.showDelete;
     const options: Intl.DateTimeFormatOptions = {
       year: "numeric",
       month: "short",
       day: "numeric"
     };
-
     const dateString = new Date(this.props.data.created).toLocaleString("default", options);
+    const cardTitle = FileSystemUtil.stripExtension(this.props.data.name, "ipynb");
 
     return (
-      <Card aria-label="Notebook Card" tokens={GalleryCardComponent.cardTokens} onClick={this.props.onClick}>
-        <Card.Item>
+      <Card
+        aria-label={cardTitle}
+        data-is-focusable="true"
+        tokens={{ width: GalleryCardComponent.CARD_WIDTH, childrenGap: 0 }}
+        onClick={event => this.onClick(event, this.props.onClick)}
+      >
+        <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
           <Persona
             imageUrl={this.props.data.isSample && CosmosDBLogo}
             text={this.props.data.author}
@@ -63,69 +67,89 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
           />
         </Card.Item>
 
-        <Card.Item fill>
+        <Card.Item>
           <Image
-            src={
-              this.props.data.thumbnailUrl ||
-              `https://placehold.it/${GalleryCardComponent.CARD_WIDTH}x${GalleryCardComponent.cardImageHeight}`
-            }
+            src={this.props.data.thumbnailUrl}
             width={GalleryCardComponent.CARD_WIDTH}
             height={GalleryCardComponent.cardImageHeight}
             imageFit={ImageFit.cover}
-            alt="Notebook cover image"
+            alt={`${cardTitle} cover image`}
           />
         </Card.Item>
 
-        <Card.Section>
+        <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
           <Text variant="small" nowrap>
             {this.props.data.tags?.map((tag, index, array) => (
               <span key={tag}>
-                <Link onClick={(event): void => this.onTagClick(event, tag)}>{tag}</Link>
+                <Link onClick={event => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
                 {index === array.length - 1 ? <></> : ", "}
               </span>
             ))}
           </Text>
-          <Text styles={{ root: { fontWeight: FontWeights.semibold } }} nowrap>
-            {FileSystemUtil.stripExtension(this.props.data.name, "ipynb")}
+
+          <Text
+            styles={{
+              root: {
+                fontWeight: FontWeights.semibold,
+                paddingTop: GalleryCardComponent.cardItemGapSmall,
+                paddingBottom: GalleryCardComponent.cardItemGapSmall
+              }
+            }}
+            nowrap
+          >
+            {cardTitle}
           </Text>
+
           <Text variant="small" styles={{ root: { height: 36 } }}>
             {this.props.data.description.substr(0, GalleryCardComponent.cardDescriptionMaxChars)}
           </Text>
+
+          <span>
+            {this.generateIconText("RedEye", this.props.data.views.toString())}
+            {this.generateIconText("Download", this.props.data.downloads.toString())}
+            {this.props.isFavorite !== undefined &&
+              this.generateIconText("Heart", this.props.data.favorites.toString())}
+          </span>
         </Card.Section>
 
-        <Card.Section horizontal styles={{ root: { alignItems: "flex-end" } }}>
-          {this.generateIconText("RedEye", this.props.data.views.toString())}
-          {this.generateIconText("Download", this.props.data.downloads.toString())}
-          {this.props.isFavorite !== undefined && this.generateIconText("Heart", this.props.data.favorites.toString())}
-        </Card.Section>
+        {cardButtonsVisible && (
+          <Card.Section
+            styles={{
+              root: {
+                marginLeft: GalleryCardComponent.cardItemGapBig,
+                marginRight: GalleryCardComponent.cardItemGapBig
+              }
+            }}
+          >
+            <Separator styles={{ root: { padding: 0, height: 1 } }} />
 
-        <Card.Item>
-          <Separator styles={{ root: { padding: 0, height: 1 } }} />
-        </Card.Item>
+            <span>
+              {this.props.isFavorite !== undefined &&
+                this.generateIconButtonWithTooltip(
+                  this.props.isFavorite ? "HeartFill" : "Heart",
+                  this.props.isFavorite ? "Unlike" : "Like",
+                  "left",
+                  this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
+                )}
 
-        <Card.Section horizontal styles={{ root: { marginTop: 0 } }}>
-          {this.props.isFavorite !== undefined &&
-            this.generateIconButtonWithTooltip(
-              this.props.isFavorite ? "HeartFill" : "Heart",
-              this.props.isFavorite ? "Unlike" : "Like",
-              this.props.isFavorite ? this.onUnfavoriteClick : this.onFavoriteClick
-            )}
+              {this.props.showDownload &&
+                this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
 
-          {this.generateIconButtonWithTooltip("Download", "Download", this.onDownloadClick)}
-
-          {this.props.showDelete && (
-            <div style={{ width: "100%", textAlign: "right" }}>
-              {this.generateIconButtonWithTooltip("Delete", "Remove", this.onDeleteClick)}
-            </div>
-          )}
-        </Card.Section>
+              {this.props.showDelete &&
+                this.generateIconButtonWithTooltip("Delete", "Remove", "right", this.props.onDeleteClick)}
+            </span>
+          </Card.Section>
+        )}
       </Card>
     );
   }
 
   private generateIconText = (iconName: string, text: string): JSX.Element => {
     return (
-      <Text variant="tiny" styles={{ root: { color: "#ccc" } }}>
+      <Text
+        variant="tiny"
+        styles={{ root: { color: StyleConstants.BaseMedium, paddingRight: GalleryCardComponent.cardItemGapSmall } }}
+      >
         <Icon iconName={iconName} styles={{ root: { verticalAlign: "middle" } }} /> {text}
       </Text>
     );
@@ -138,70 +162,37 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
   private generateIconButtonWithTooltip = (
     iconName: string,
     title: string,
-    onClick: (
-      event: React.MouseEvent<
-        HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
-        MouseEvent
-      >
-    ) => void
+    horizontalAlign: "right" | "left",
+    activate: () => void
   ): JSX.Element => {
     return (
       <TooltipHost
         content={title}
         id={`TooltipHost-IconButton-${iconName}`}
         calloutProps={{ gapSpace: 0 }}
-        styles={{ root: { display: "inline-block" } }}
+        styles={{ root: { display: "inline-block", float: horizontalAlign } }}
       >
-        <IconButton iconProps={{ iconName }} title={title} ariaLabel={title} onClick={onClick} />
+        <IconButton
+          iconProps={{ iconName }}
+          title={title}
+          ariaLabel={title}
+          onClick={event => this.onClick(event, activate)}
+        />
       </TooltipHost>
     );
   };
 
-  private onTagClick = (
-    event: React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | LinkBase, MouseEvent>,
-    tag: string
+  private onClick = (
+    event:
+      | React.MouseEvent<HTMLElement | HTMLAnchorElement | HTMLButtonElement | LinkBase, MouseEvent>
+      | React.MouseEvent<
+          HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
+          MouseEvent
+        >,
+    activate: () => void
   ): void => {
     event.stopPropagation();
-    this.props.onTagClick(tag);
-  };
-
-  private onFavoriteClick = (
-    event: React.MouseEvent<
-      HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
-      MouseEvent
-    >
-  ): void => {
-    event.stopPropagation();
-    this.props.onFavoriteClick();
-  };
-
-  private onUnfavoriteClick = (
-    event: React.MouseEvent<
-      HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
-      MouseEvent
-    >
-  ): void => {
-    event.stopPropagation();
-    this.props.onUnfavoriteClick();
-  };
-
-  private onDownloadClick = (
-    event: React.MouseEvent<
-      HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
-      MouseEvent
-    >
-  ): void => {
-    event.stopPropagation();
-    this.props.onDownloadClick();
-  };
-
-  private onDeleteClick = (
-    event: React.MouseEvent<
-      HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button | HTMLSpanElement,
-      MouseEvent
-    >
-  ): void => {
-    event.stopPropagation();
-    this.props.onDeleteClick();
+    event.preventDefault();
+    activate();
   };
 }

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

@@ -2,35 +2,47 @@
 
 exports[`GalleryCardComponent renders 1`] = `
 <Card
-  aria-label="Notebook Card"
+  aria-label="name"
+  data-is-focusable="true"
+  onClick={[Function]}
   tokens={
     Object {
-      "childrenGap": 8,
-      "childrenMargin": 10,
-      "height": 384,
+      "childrenGap": 0,
       "width": 256,
     }
   }
 >
-  <CardItem>
+  <CardItem
+    tokens={
+      Object {
+        "padding": 10,
+      }
+    }
+  >
     <StyledPersonaBase
       imageUrl={false}
       secondaryText="Invalid Date"
       text="author"
     />
   </CardItem>
-  <CardItem
-    fill={true}
-  >
+  <CardItem>
     <Memo(StyledImageBase)
-      alt="Notebook cover image"
+      alt="name cover image"
       height={144}
       imageFit={2}
       src="thumbnailUrl"
       width={256}
     />
   </CardItem>
-  <CardSection>
+  <CardSection
+    styles={
+      Object {
+        "root": Object {
+          "padding": 10,
+        },
+      }
+    }
+  >
     <Text
       nowrap={true}
       variant="small"
@@ -51,6 +63,8 @@ exports[`GalleryCardComponent renders 1`] = `
         Object {
           "root": Object {
             "fontWeight": 600,
+            "paddingBottom": 8,
+            "paddingTop": 8,
           },
         }
       }
@@ -69,88 +83,91 @@ exports[`GalleryCardComponent renders 1`] = `
     >
       description
     </Text>
+    <span>
+      <Text
+        styles={
+          Object {
+            "root": Object {
+              "color": undefined,
+              "paddingRight": 8,
+            },
+          }
+        }
+        variant="tiny"
+      >
+        <Memo(StyledIconBase)
+          iconName="RedEye"
+          styles={
+            Object {
+              "root": Object {
+                "verticalAlign": "middle",
+              },
+            }
+          }
+        />
+         
+        0
+      </Text>
+      <Text
+        styles={
+          Object {
+            "root": Object {
+              "color": undefined,
+              "paddingRight": 8,
+            },
+          }
+        }
+        variant="tiny"
+      >
+        <Memo(StyledIconBase)
+          iconName="Download"
+          styles={
+            Object {
+              "root": Object {
+                "verticalAlign": "middle",
+              },
+            }
+          }
+        />
+         
+        0
+      </Text>
+      <Text
+        styles={
+          Object {
+            "root": Object {
+              "color": undefined,
+              "paddingRight": 8,
+            },
+          }
+        }
+        variant="tiny"
+      >
+        <Memo(StyledIconBase)
+          iconName="Heart"
+          styles={
+            Object {
+              "root": Object {
+                "verticalAlign": "middle",
+              },
+            }
+          }
+        />
+         
+        0
+      </Text>
+    </span>
   </CardSection>
   <CardSection
-    horizontal={true}
     styles={
       Object {
         "root": Object {
-          "alignItems": "flex-end",
+          "marginLeft": 10,
+          "marginRight": 10,
         },
       }
     }
   >
-    <Text
-      styles={
-        Object {
-          "root": Object {
-            "color": "#ccc",
-          },
-        }
-      }
-      variant="tiny"
-    >
-      <Memo(StyledIconBase)
-        iconName="RedEye"
-        styles={
-          Object {
-            "root": Object {
-              "verticalAlign": "middle",
-            },
-          }
-        }
-      />
-       
-      0
-    </Text>
-    <Text
-      styles={
-        Object {
-          "root": Object {
-            "color": "#ccc",
-          },
-        }
-      }
-      variant="tiny"
-    >
-      <Memo(StyledIconBase)
-        iconName="Download"
-        styles={
-          Object {
-            "root": Object {
-              "verticalAlign": "middle",
-            },
-          }
-        }
-      />
-       
-      0
-    </Text>
-    <Text
-      styles={
-        Object {
-          "root": Object {
-            "color": "#ccc",
-          },
-        }
-      }
-      variant="tiny"
-    >
-      <Memo(StyledIconBase)
-        iconName="Heart"
-        styles={
-          Object {
-            "root": Object {
-              "verticalAlign": "middle",
-            },
-          }
-        }
-      />
-       
-      0
-    </Text>
-  </CardSection>
-  <CardItem>
     <Styled
       styles={
         Object {
@@ -161,79 +178,63 @@ exports[`GalleryCardComponent renders 1`] = `
         }
       }
     />
-  </CardItem>
-  <CardSection
-    horizontal={true}
-    styles={
-      Object {
-        "root": Object {
-          "marginTop": 0,
-        },
-      }
-    }
-  >
-    <StyledTooltipHostBase
-      calloutProps={
-        Object {
-          "gapSpace": 0,
-        }
-      }
-      content="Like"
-      id="TooltipHost-IconButton-Heart"
-      styles={
-        Object {
-          "root": Object {
-            "display": "inline-block",
-          },
-        }
-      }
-    >
-      <CustomizedIconButton
-        ariaLabel="Like"
-        iconProps={
+    <span>
+      <StyledTooltipHostBase
+        calloutProps={
           Object {
-            "iconName": "Heart",
+            "gapSpace": 0,
           }
         }
-        onClick={[Function]}
-        title="Like"
-      />
-    </StyledTooltipHostBase>
-    <StyledTooltipHostBase
-      calloutProps={
-        Object {
-          "gapSpace": 0,
-        }
-      }
-      content="Download"
-      id="TooltipHost-IconButton-Download"
-      styles={
-        Object {
-          "root": Object {
-            "display": "inline-block",
-          },
-        }
-      }
-    >
-      <CustomizedIconButton
-        ariaLabel="Download"
-        iconProps={
+        content="Like"
+        id="TooltipHost-IconButton-Heart"
+        styles={
           Object {
-            "iconName": "Download",
+            "root": Object {
+              "display": "inline-block",
+              "float": "left",
+            },
           }
         }
-        onClick={[Function]}
-        title="Download"
-      />
-    </StyledTooltipHostBase>
-    <div
-      style={
-        Object {
-          "textAlign": "right",
-          "width": "100%",
+      >
+        <CustomizedIconButton
+          ariaLabel="Like"
+          iconProps={
+            Object {
+              "iconName": "Heart",
+            }
+          }
+          onClick={[Function]}
+          title="Like"
+        />
+      </StyledTooltipHostBase>
+      <StyledTooltipHostBase
+        calloutProps={
+          Object {
+            "gapSpace": 0,
+          }
         }
-      }
-    >
+        content="Download"
+        id="TooltipHost-IconButton-Download"
+        styles={
+          Object {
+            "root": Object {
+              "display": "inline-block",
+              "float": "left",
+            },
+          }
+        }
+      >
+        <CustomizedIconButton
+          ariaLabel="Download"
+          iconProps={
+            Object {
+              "iconName": "Download",
+            }
+          }
+          onClick={[Function]}
+          title="Download"
+        />
+      </StyledTooltipHostBase>
       <StyledTooltipHostBase
         calloutProps={
           Object {
@@ -246,6 +247,7 @@ exports[`GalleryCardComponent renders 1`] = `
           Object {
             "root": Object {
               "display": "inline-block",
+              "float": "right",
             },
           }
         }
@@ -261,7 +263,7 @@ exports[`GalleryCardComponent renders 1`] = `
           title="Remove"
         />
       </StyledTooltipHostBase>
-    </div>
+    </span>
   </CardSection>
 </Card>
 `;

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/GalleryAndNotebookViewerComponent.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { JunoClient, IGalleryItem } from "../../../Juno/JunoClient";
+import { GalleryTab, SortBy, GalleryViewerComponentProps, GalleryViewerComponent } from "./GalleryViewerComponent";
+import { NotebookViewerComponentProps, NotebookViewerComponent } from "../NotebookViewer/NotebookViewerComponent";
+import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import Explorer from "../../Explorer";
+
+export interface GalleryAndNotebookViewerComponentProps {
+  container?: Explorer;
+  junoClient: JunoClient;
+  notebookUrl?: string;
+  galleryItem?: IGalleryItem;
+  isFavorite?: boolean;
+  selectedTab: GalleryTab;
+  sortBy: SortBy;
+  searchText: string;
+}
+
+interface GalleryAndNotebookViewerComponentState {
+  notebookUrl: string;
+  galleryItem: IGalleryItem;
+  isFavorite: boolean;
+  selectedTab: GalleryTab;
+  sortBy: SortBy;
+  searchText: string;
+}
+
+export class GalleryAndNotebookViewerComponent extends React.Component<
+  GalleryAndNotebookViewerComponentProps,
+  GalleryAndNotebookViewerComponentState
+> {
+  constructor(props: GalleryAndNotebookViewerComponentProps) {
+    super(props);
+
+    this.state = {
+      notebookUrl: props.notebookUrl,
+      galleryItem: props.galleryItem,
+      isFavorite: props.isFavorite,
+      selectedTab: props.selectedTab,
+      sortBy: props.sortBy,
+      searchText: props.searchText
+    };
+  }
+
+  public render(): JSX.Element {
+    if (this.state.notebookUrl) {
+      const props: NotebookViewerComponentProps = {
+        container: this.props.container,
+        junoClient: this.props.junoClient,
+        notebookUrl: this.state.notebookUrl,
+        galleryItem: this.state.galleryItem,
+        isFavorite: this.state.isFavorite,
+        backNavigationText: GalleryUtils.getTabTitle(this.state.selectedTab),
+        onBackClick: this.onBackClick,
+        onTagClick: this.loadTaggedItems
+      };
+
+      return <NotebookViewerComponent {...props} />;
+    }
+
+    const props: GalleryViewerComponentProps = {
+      container: this.props.container,
+      junoClient: this.props.junoClient,
+      selectedTab: this.state.selectedTab,
+      sortBy: this.state.sortBy,
+      searchText: this.state.searchText,
+      openNotebook: this.openNotebook,
+      onSelectedTabChange: this.onSelectedTabChange,
+      onSortByChange: this.onSortByChange,
+      onSearchTextChange: this.onSearchTextChange
+    };
+
+    return <GalleryViewerComponent {...props} />;
+  }
+
+  private onBackClick = (): void => {
+    this.setState({
+      notebookUrl: undefined
+    });
+  };
+
+  private loadTaggedItems = (tag: string): void => {
+    this.setState({
+      notebookUrl: undefined,
+      searchText: tag
+    });
+  };
+
+  private openNotebook = (data: IGalleryItem, isFavorite: boolean): void => {
+    this.setState({
+      notebookUrl: this.props.junoClient.getNotebookContentUrl(data.id),
+      galleryItem: data,
+      isFavorite
+    });
+  };
+
+  private onSelectedTabChange = (selectedTab: GalleryTab): void => {
+    this.setState({
+      selectedTab
+    });
+  };
+
+  private onSortByChange = (sortBy: SortBy): void => {
+    this.setState({
+      sortBy
+    });
+  };
+
+  private onSearchTextChange = (searchText: string): void => {
+    this.setState({
+      searchText
+    });
+  };
+}

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx

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

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

@@ -9,6 +9,7 @@ describe("GalleryViewerComponent", () => {
       selectedTab: GalleryTab.OfficialSamples,
       sortBy: SortBy.MostViewed,
       searchText: undefined,
+      openNotebook: undefined,
       onSelectedTabChange: undefined,
       onSortByChange: undefined,
       onSearchTextChange: undefined

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -15,22 +15,25 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Logger from "../../../Common/Logger";
-import * as ViewModels from "../../../Contracts/ViewModels";
-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?: ViewModels.Explorer;
+  container?: Explorer;
   junoClient: JunoClient;
   selectedTab: GalleryTab;
   sortBy: SortBy;
   searchText: string;
+  openNotebook: (data: IGalleryItem, isFavorite: boolean) => void;
   onSelectedTabChange: (newTab: GalleryTab) => void;
   onSortByChange: (sortBy: SortBy) => void;
   onSearchTextChange: (searchText: string) => void;
@@ -59,6 +62,7 @@ interface GalleryViewerComponentState {
   sortBy: SortBy;
   searchText: string;
   dialogProps: DialogProps;
+  isCodeOfConductAccepted: boolean;
 }
 
 interface GalleryTabInfo {
@@ -66,13 +70,14 @@ interface GalleryTabInfo {
   content: JSX.Element;
 }
 
-export class GalleryViewerComponent extends React.Component<GalleryViewerComponentProps, GalleryViewerComponentState>
-  implements GalleryUtils.DialogEnabledComponent {
+export class GalleryViewerComponent extends React.Component<GalleryViewerComponentProps, GalleryViewerComponentState> {
   public static readonly OfficialSamplesTitle = "Official samples";
   public static readonly PublicGalleryTitle = "Public gallery";
   public static readonly FavoritesTitle = "Liked";
   public static readonly PublishedTitle = "Your published work";
 
+  private static readonly rowsPerPage = 5;
+
   private static readonly mostViewedText = "Most viewed";
   private static readonly mostDownloadedText = "Most downloaded";
   private static readonly mostFavoritedText = "Most liked";
@@ -84,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;
 
@@ -98,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 = [
@@ -128,17 +135,24 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
   }
 
-  setDialogProps = (dialogProps: DialogProps): void => {
-    this.setState({ dialogProps });
-  };
-
   public render(): JSX.Element {
     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 = {
@@ -169,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,
@@ -176,10 +201,23 @@ 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: 20 }}>
-        <Stack horizontal tokens={{ childrenGap: 20 }}>
+      <Stack tokens={{ childrenGap: 10 }}>
+        <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
           <Stack.Item grow>
             <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
           </Stack.Item>
@@ -189,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>
     );
@@ -256,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");
@@ -270,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
     });
   }
 
@@ -335,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) {
@@ -389,8 +438,10 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   private getPageSpecification = (itemIndex?: number, visibleRect?: IRectangle): IPageSpecification => {
-    this.columnCount = Math.floor(visibleRect.width / GalleryCardComponent.CARD_WIDTH);
-    this.rowCount = Math.floor(visibleRect.height / GalleryCardComponent.CARD_HEIGHT);
+    if (itemIndex === 0) {
+      this.columnCount = Math.floor(visibleRect.width / GalleryCardComponent.CARD_WIDTH) || this.columnCount;
+      this.rowCount = GalleryViewerComponent.rowsPerPage;
+    }
 
     return {
       height: visibleRect.height,
@@ -406,8 +457,9 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     const props: GalleryCardComponentProps = {
       data,
       isFavorite,
+      showDownload: !!this.props.container,
       showDelete: this.state.selectedTab === GalleryTab.Published,
-      onClick: () => this.openNotebook(data, isFavorite),
+      onClick: () => this.props.openNotebook(data, isFavorite),
       onTagClick: this.loadTaggedItems,
       onFavoriteClick: () => this.favoriteItem(data),
       onUnfavoriteClick: () => this.unfavoriteItem(data),
@@ -422,20 +474,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   };
 
-  private openNotebook = (data: IGalleryItem, isFavorite: boolean): void => {
-    if (this.props.container && this.props.junoClient) {
-      this.props.container.openGallery(this.props.junoClient.getNotebookContentUrl(data.id), data, isFavorite);
-    } else {
-      const params = new URLSearchParams({
-        [GalleryUtils.NotebookViewerParams.NotebookUrl]: this.props.junoClient.getNotebookContentUrl(data.id),
-        [GalleryUtils.NotebookViewerParams.GalleryItemId]: data.id
-      });
-
-      const location = new URL("./notebookViewer.html", window.location.href).href;
-      window.open(`${location}?${params.toString()}`);
-    }
-  };
-
   private loadTaggedItems = (tag: string): void => {
     const searchText = tag;
     this.setState({
@@ -465,9 +503,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   };
 
   private downloadItem = async (data: IGalleryItem): Promise<void> => {
-    GalleryUtils.downloadItem(this, this.props.container, this.props.junoClient, data, item =>
-      this.refreshSelectedTab(item)
-    );
+    GalleryUtils.downloadItem(this.props.container, this.props.junoClient, data, item => this.refreshSelectedTab(item));
   };
 
   private deleteItem = async (data: IGalleryItem): Promise<void> => {

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/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`GalleryViewerComponent renders 1`] = `
       <Stack
         tokens={
           Object {
-            "childrenGap": 20,
+            "childrenGap": 10,
           }
         }
       >
@@ -30,6 +30,7 @@ exports[`GalleryViewerComponent renders 1`] = `
           tokens={
             Object {
               "childrenGap": 20,
+              "padding": 10,
             }
           }
         >

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/NotebookMetadataComponent.tsx

@@ -16,11 +16,12 @@ import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
 import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
+import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 
 export interface NotebookMetadataComponentProps {
   data: IGalleryItem;
   isFavorite: boolean;
-  downloadButtonText: string;
+  downloadButtonText?: string;
   onTagClick: (tag: string) => void;
   onFavoriteClick: () => void;
   onUnfavoriteClick: () => void;
@@ -54,11 +55,18 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
               </>
             )}
           </Text>
-          <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
+
+          {this.props.downloadButtonText && (
+            <PrimaryButton text={this.props.downloadButtonText} onClick={this.props.onDownloadClick} />
+          )}
         </Stack>
 
         <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 10 }}>
-          <Persona text={this.props.data.author} size={PersonaSize.size32} />
+          <Persona
+            imageUrl={this.props.data.isSample && CosmosDBLogo}
+            text={this.props.data.author}
+            size={PersonaSize.size32}
+          />
           <Text>{dateString}</Text>
           <Text>
             <Icon iconName="RedEye" /> {this.props.data.views}

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -3,14 +3,14 @@
  */
 import { Notebook } from "@nteract/commutable";
 import { createContentRef } from "@nteract/core";
-import { Icon, Link } from "office-ui-fabric-react";
+import { Icon, Link, ProgressIndicator } from "office-ui-fabric-react";
 import * as React from "react";
 import { contents } from "rx-jupyter";
 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";
@@ -18,9 +18,12 @@ import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookRe
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 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?: ViewModels.Explorer;
+  container?: Explorer;
   junoClient?: JunoClient;
   notebookUrl: string;
   galleryItem?: IGalleryItem;
@@ -36,10 +39,13 @@ interface NotebookViewerComponentState {
   galleryItem?: IGalleryItem;
   isFavorite?: boolean;
   dialogProps: DialogProps;
+  showProgressBar: boolean;
 }
 
-export class NotebookViewerComponent extends React.Component<NotebookViewerComponentProps, NotebookViewerComponentState>
-  implements GalleryUtils.DialogEnabledComponent {
+export class NotebookViewerComponent extends React.Component<
+  NotebookViewerComponentProps,
+  NotebookViewerComponentState
+> {
   private clientManager: NotebookClientV2;
   private notebookComponentBootstrapper: NotebookComponentBootstrapper;
 
@@ -65,46 +71,57 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
       content: undefined,
       galleryItem: props.galleryItem,
       isFavorite: props.isFavorite,
-      dialogProps: undefined
+      dialogProps: undefined,
+      showProgressBar: true
     };
 
     this.loadNotebookContent();
   }
 
-  setDialogProps = (dialogProps: DialogProps): void => {
-    this.setState({ dialogProps });
-  };
-
   private async loadNotebookContent(): Promise<void> {
     try {
       const response = await fetch(this.props.notebookUrl);
       if (!response.ok) {
+        this.setState({ showProgressBar: false });
         throw new Error(`Received HTTP ${response.status} while fetching ${this.props.notebookUrl}`);
       }
 
       const notebook: Notebook = await response.json();
+      this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
       this.notebookComponentBootstrapper.setContent("json", notebook);
-      this.setState({ content: 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 });
       const message = `Failed to load notebook content: ${error}`;
       Logger.logError(message, "NotebookViewerComponent/loadNotebookContent");
       NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
     }
   }
 
+  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>
@@ -117,9 +134,7 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
             <NotebookMetadataComponent
               data={this.state.galleryItem}
               isFavorite={this.state.isFavorite}
-              downloadButtonText={
-                this.props.container ? "Download to my notebooks" : "Edit/Run in Cosmos DB data explorer"
-              }
+              downloadButtonText={this.props.container && "Download to my notebooks"}
               onTagClick={this.props.onTagClick}
               onFavoriteClick={this.favoriteItem}
               onUnfavoriteClick={this.unfavoriteItem}
@@ -130,6 +145,8 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
           <></>
         )}
 
+        {this.state.showProgressBar && <ProgressIndicator />}
+
         {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
           hideInputs: this.props.hideInputs
         })}
@@ -173,7 +190,7 @@ export class NotebookViewerComponent extends React.Component<NotebookViewerCompo
   };
 
   private downloadItem = async (): Promise<void> => {
-    GalleryUtils.downloadItem(this, this.props.container, this.props.junoClient, this.state.galleryItem, item =>
+    GalleryUtils.downloadItem(this.props.container, this.props.junoClient, this.state.galleryItem, item =>
       this.setState({ galleryItem: item })
     );
   };

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

@@ -48,6 +48,7 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
     verticalAlign="center"
   >
     <StyledPersonaBase
+      imageUrl={false}
       size={11}
       text="author"
     />
@@ -147,6 +148,7 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
     verticalAlign="center"
   >
     <StyledPersonaBase
+      imageUrl={false}
       size={11}
       text="author"
     />

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;
@@ -217,7 +218,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                     menuItem: any
                   ) => {
                     if (window.confirm("Are you sure you want to delete this query?")) {
-                      const container: ViewModels.Explorer = window.dataExplorer;
+                      const container = window.dataExplorer;
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
                         databaseAccountName: container && container.databaseAccount().name,
                         defaultExperience: container && container.defaultExperience(),

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

@@ -8,11 +8,12 @@ import * as React from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
 import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import Explorer from "../../Explorer";
 
 export class QueriesGridComponentAdapter implements ReactAdapter {
   public parameters: ko.Observable<number>;
 
-  constructor(private container: ViewModels.Explorer) {
+  constructor(private container: Explorer) {
     this.parameters = ko.observable<number>(Date.now());
   }
 

src/Explorer/Controls/SmartUi/InputUtils.ts

@@ -1,6 +1,6 @@
 /* Utilities for validation */
 
-export const onValidateValueChange = (newValue: string, minValue?: number, maxValue?: number): number => {
+export const onValidateValueChange = (newValue: string, minValue?: number, maxValue?: number): number | undefined => {
   let numericValue = parseInt(newValue);
   if (!isNaN(numericValue) && isFinite(numericValue)) {
     if (minValue !== undefined && numericValue < minValue) {
@@ -16,7 +16,7 @@ export const onValidateValueChange = (newValue: string, minValue?: number, maxVa
   return undefined;
 };
 
-export const onIncrementValue = (newValue: string, step: number, max?: number): number => {
+export const onIncrementValue = (newValue: string, step: number, max?: number): number | undefined => {
   const numericValue = parseInt(newValue);
   if (!isNaN(numericValue) && isFinite(numericValue)) {
     const newValue = numericValue + step;
@@ -25,7 +25,7 @@ export const onIncrementValue = (newValue: string, step: number, max?: number):
   return undefined;
 };
 
-export const onDecrementValue = (newValue: string, step: number, min?: number): number => {
+export const onDecrementValue = (newValue: string, step: number, min?: number): number | undefined => {
   const numericValue = parseInt(newValue);
   if (!isNaN(numericValue) && isFinite(numericValue)) {
     const newValue = numericValue - step;

src/Explorer/Controls/Spark/ClusterSettingsComponent.less

@@ -1,17 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.labelWithRedAsterisk {
-    line-height: 18px;
-    font-size: @DefaultFontSize;
-    font-family: @DataExplorerFont;
-    color: @DefaultFontColor;
-}
-
-.labelWithRedAsterisk::before {
-    content: "* ";
-    color: @SelectionHigh;
-}
-
-.clusterSettingsDropdown {
-    margin-bottom: 10px;
-}

src/Explorer/Controls/Spark/ClusterSettingsComponent.tsx

@@ -1,159 +0,0 @@
-import * as React from "react";
-import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
-import { Slider, ISliderProps } from "office-ui-fabric-react/lib/Slider";
-import { Stack, IStackItemStyles, IStackStyles } from "office-ui-fabric-react/lib/Stack";
-import { TextField, ITextFieldProps } from "office-ui-fabric-react/lib/TextField";
-import { Spark } from "../../../Common/Constants";
-import { SparkCluster } from "../../../Contracts/DataModels";
-
-export interface ClusterSettingsComponentProps {
-  cluster: SparkCluster;
-  onClusterSettingsChanged: (cluster: SparkCluster) => void;
-}
-
-export class ClusterSettingsComponent extends React.Component<ClusterSettingsComponentProps, {}> {
-  constructor(props: ClusterSettingsComponentProps) {
-    super(props);
-  }
-
-  public render(): JSX.Element {
-    return (
-      <>
-        {this.getMasterSizeDropdown()}
-        {this.getWorkerSizeDropdown()}
-        {this.getWorkerCountSliderInput()}
-      </>
-    );
-  }
-
-  private getMasterSizeDropdown(): JSX.Element {
-    const driverSize: string =
-      this.props.cluster && this.props.cluster.properties && this.props.cluster.properties.driverSize;
-    const masterSizeOptions: IDropdownOption[] = Spark.SKUs.keys().map(sku => ({
-      key: sku,
-      text: Spark.SKUs.get(sku)
-    }));
-    const masterSizeDropdownProps: IDropdownProps = {
-      label: "Master Size",
-      options: masterSizeOptions,
-      defaultSelectedKey: driverSize,
-      onChange: this._onDriverSizeChange,
-      styles: {
-        root: "clusterSettingsDropdown"
-      }
-    };
-    return <Dropdown {...masterSizeDropdownProps} />;
-  }
-
-  private getWorkerSizeDropdown(): JSX.Element {
-    const workerSize: string =
-      this.props.cluster && this.props.cluster.properties && this.props.cluster.properties.workerSize;
-    const workerSizeOptions: IDropdownOption[] = Spark.SKUs.keys().map(sku => ({
-      key: sku,
-      text: Spark.SKUs.get(sku)
-    }));
-    const workerSizeDropdownProps: IDropdownProps = {
-      label: "Worker Size",
-      options: workerSizeOptions,
-      defaultSelectedKey: workerSize,
-      onChange: this._onWorkerSizeChange,
-      styles: {
-        label: "labelWithRedAsterisk",
-        root: "clusterSettingsDropdown"
-      }
-    };
-    return <Dropdown {...workerSizeDropdownProps} />;
-  }
-
-  private getWorkerCountSliderInput(): JSX.Element {
-    const workerCount: number =
-      (this.props.cluster &&
-        this.props.cluster.properties &&
-        this.props.cluster.properties.workerInstanceCount !== undefined &&
-        this.props.cluster.properties.workerInstanceCount) ||
-      0;
-    const stackStyle: IStackStyles = {
-      root: {
-        paddingTop: 5
-      }
-    };
-    const sliderItemStyle: IStackItemStyles = {
-      root: {
-        width: "100%",
-        paddingRight: 20
-      }
-    };
-
-    const workerCountSliderProps: ISliderProps = {
-      min: 0,
-      max: Spark.MaxWorkerCount,
-      step: 1,
-      value: workerCount,
-      showValue: false,
-      onChange: this._onWorkerCountChange,
-      styles: {
-        root: {
-          width: "100%",
-          paddingRight: 20
-        }
-      }
-    };
-    const workerCountTextFieldProps: ITextFieldProps = {
-      value: workerCount.toString(),
-      styles: {
-        fieldGroup: {
-          width: 45,
-          height: 25
-        },
-        field: {
-          textAlign: "center"
-        }
-      },
-      onChange: this._onWorkerCountTextFieldChange
-    };
-
-    return (
-      <Stack styles={stackStyle}>
-        <span className="labelWithRedAsterisk">Worker Nodes</span>
-        <Stack horizontal verticalAlign="center">
-          <Slider {...workerCountSliderProps} />
-          <TextField {...workerCountTextFieldProps} />
-        </Stack>
-      </Stack>
-    );
-  }
-
-  private _onDriverSizeChange = (_event: React.FormEvent, selectedOption: IDropdownOption) => {
-    const newValue: string = selectedOption.key as string;
-    const cluster = this.props.cluster;
-    if (cluster) {
-      cluster.properties.driverSize = newValue;
-      this.props.onClusterSettingsChanged(cluster);
-    }
-  };
-
-  private _onWorkerSizeChange = (_event: React.FormEvent, selectedOption: IDropdownOption) => {
-    const newValue: string = selectedOption.key as string;
-    const cluster = this.props.cluster;
-    if (cluster) {
-      cluster.properties.workerSize = newValue;
-      this.props.onClusterSettingsChanged(cluster);
-    }
-  };
-
-  private _onWorkerCountChange = (count: number) => {
-    count = Math.min(count, Spark.MaxWorkerCount);
-    const cluster = this.props.cluster;
-    if (cluster) {
-      cluster.properties.workerInstanceCount = count;
-      this.props.onClusterSettingsChanged(cluster);
-    }
-  };
-
-  private _onWorkerCountTextFieldChange = (_event: React.FormEvent, newValue: string) => {
-    const count = parseInt(newValue);
-    if (!isNaN(count)) {
-      this._onWorkerCountChange(count);
-    }
-  };
-}

src/Explorer/Controls/Spark/ClusterSettingsComponentAdapter.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { ClusterSettingsComponent, ClusterSettingsComponentProps } from "./ClusterSettingsComponent";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-
-export class ClusterSettingsComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<ClusterSettingsComponentProps>;
-
-  public renderComponent(): JSX.Element {
-    return <ClusterSettingsComponent {...this.parameters()} />;
-  }
-}

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
-    };
-  }
-}