initial commit for querytabv2

* Adds e2e baseline SQL test in puppeteer

* fix lint

* Skip index test

* add to ci

* Stop waiting for server

* Switch to headless mode

* Adds wait-for-server to package.json and uses it in puppeteer CI

* Adds waiton

* top level wait on

* Adds env var to secrets ci.yml

* use existing connection string

* redo tests

* nits and hopefully fix timeout issue

* Fix config file

* try waiting for delete container menu

* Removes statuseval

* Remove unused var

* Slow down and add quotes to selector

* Fix blocking point, remove wait

* Reduce to 50

* Adds database delete stuff

* remove logs, add back waitFors

* Finish container SQL spec test

.env.example

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

.eslintignore

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

.github/workflows/ci.yml

@@ -196,6 +196,26 @@ jobs:
         shell: bash
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
+  endtoendpuppeteer:
+    name: "End to end puppeteer tests"
+    needs: [lint, format, compile, unittest]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: End to End Puppeteer Tests
+        run: |
+          npm ci
+          npm start &
+          npm run wait-for-server
+          npm run test:e2e
+        shell: bash
+        env:
+          NODE_TLS_REJECT_UNAUTHORIZED: 0
+          PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')

__mocks__/AddDatabaseUtility.ts

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

cypress/package.json

@@ -7,7 +7,7 @@
     "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 --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:ci": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/ https-get://0.0.0.0:8081/_explorer/index.html && cypress run --browser edge --headless",
     "test:debug": "cypress open"
   },
   "devDependencies": {

jest-puppeteer.config.js

@@ -3,7 +3,8 @@ const isCI = require("is-ci");
 module.exports = {
   launch: {
     headless: isCI,
-    slowMo: isCI ? null : 20,
-    defaultViewport: null
+    slowMo: 50,
+    defaultViewport: null,
+    ignoreHTTPSErrors: true
   }
 };

less/Common/Constants.less

@@ -54,7 +54,7 @@
 
 @SelectionColor: #3074B0;
 
-@FocusColor: #00bcf2;
+@FocusColor: #605e5c;
 
 /******************************************************************************
                                 METRICS

less/documentDB.less

@@ -1646,7 +1646,7 @@ p {
 }
 
 .contextual-pane .collid {
-    border: 1px solid #bbbbbb;
+    border: 1px solid #605e5c;
     font-size: 10px;
     padding: 5px 10px;
     color: #000;
@@ -2423,22 +2423,6 @@ a:link {
     display: none;
 }
 
-::-webkit-input-placeholder {
-    color: #969696;
-}
-
-::-moz-placeholder {
-    color: #969696;
-}
-
-:-ms-input-placeholder {
-    color: #969696;
-}
-
-:-moz-placeholder {
-    color: #969696;
-}
-
 ::-ms-expand {
     color: #969696;
 }
@@ -3017,4 +3001,12 @@ settings-pane {
 
 .italic {
     font-style: italic;
-}
+}
+
+.warningErrorContent a {
+    color: @AccentMediumHigh
+}
+
+.infoBoxContent a {
+    color: @AccentMediumHigh
+} 

package.json

@@ -8,7 +8,7 @@
     "@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",
@@ -66,7 +66,7 @@
     "mkdirp": "1.0.4",
     "monaco-editor": "0.15.6",
     "object.entries": "1.1.0",
-    "office-ui-fabric-react": "7.121.10",
+    "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "promise-polyfill": "8.1.0",
@@ -102,12 +102,15 @@
     "@types/d3": "4.13.2",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.5",
+    "@types/expect-puppeteer": "4.4.3",
     "@types/hasher": "0.0.31",
     "@types/jest": "23.3.10",
+    "@types/jest-environment-puppeteer": "4.3.2",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
     "@types/promise.prototype.finally": "2.0.3",
     "@types/prop-types": "15.5.8",
+    "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
     "@types/react": "16.8.25",
     "@types/react-dom": "16.0.7",
@@ -118,8 +121,8 @@
     "@types/text-encoding": "0.0.33",
     "@types/underscore": "1.7.36",
     "@types/webfontloader": "1.6.29",
-    "@typescript-eslint/eslint-plugin": "3.2.0",
-    "@typescript-eslint/parser": "3.2.0",
+    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "@typescript-eslint/parser": "4.0.1",
     "adal-angular": "1.0.15",
     "axe-puppeteer": "1.1.0",
     "babel-jest": "24.9.0",
@@ -132,7 +135,7 @@
     "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",
@@ -164,8 +167,9 @@
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "3.9.6",
+    "typescript": "4.0.2",
     "url-loader": "1.1.1",
+    "wait-on": "4.0.2",
     "webpack": "4.43.0",
     "webpack-bundle-analyzer": "3.6.1",
     "webpack-cli": "3.3.10",
@@ -184,6 +188,7 @@
     "test": "rimraf coverage && jest",
     "test:e2e": "jest -c ./jest.config.e2e.js --detectOpenHandles",
     "watch": "npm run start",
+    "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
     "compile": "tsc",
     "compile:contracts": "tsc -p ./tsconfig.contracts.json",

sampleData/sqlSampleData.json

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

src/Common/Constants.ts

@@ -122,6 +122,7 @@ export class Features {
   public static readonly enableTtl = "enablettl";
   public static readonly enableNotebooks = "enablenotebooks";
   public static readonly enableGalleryPublish = "enablegallerypublish";
+  public static readonly enableQueryTabV2 = "enablequerytabv2";
   public static readonly enableCodeOfConduct = "enablecodeofconduct";
   public static readonly enableLinkInjection = "enablelinkinjection";
   public static readonly enableSpark = "enablespark";

src/Common/DataAccessUtilityBase.ts

@@ -8,15 +8,12 @@ import {
   ConflictDefinition,
   FeedOptions,
   ItemDefinition,
-  PartitionKeyDefinition,
   QueryIterator,
   Resource,
   TriggerDefinition,
   OfferDefinition
 } from "@azure/cosmos";
-import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
 import { client } from "./CosmosClient";
-import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
 import { sendCachedDataMessage } from "./MessageHandler";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
@@ -480,69 +477,6 @@ export function readOffer(requestedResource: DataModels.Offer, options: any): Q.
   );
 }
 
-export function getOrCreateDatabaseAndCollection(
-  request: DataModels.CreateDatabaseAndCollectionRequest,
-  options: any
-): Q.Promise<DataModels.Collection> {
-  const databaseOptions: any = options && _.omit(options, "sharedOfferThroughput");
-  const {
-    databaseId,
-    databaseLevelThroughput,
-    collectionId,
-    partitionKey,
-    indexingPolicy,
-    uniqueKeyPolicy,
-    offerThroughput,
-    analyticalStorageTtl,
-    hasAutoPilotV2FeatureFlag
-  } = request;
-
-  const createBody: DatabaseRequest = {
-    id: databaseId
-  };
-
-  // TODO: replace when SDK support autopilot
-  const initialHeaders = request.autoPilot
-    ? !hasAutoPilotV2FeatureFlag
-      ? {
-          [Constants.HttpHeaders.autoPilotThroughputSDK]: JSON.stringify({
-            maxThroughput: request.autoPilot.maxThroughput
-          })
-        }
-      : {
-          [Constants.HttpHeaders.autoPilotTier]: request.autoPilot.autopilotTier
-        }
-    : undefined;
-  if (databaseLevelThroughput) {
-    if (request.autoPilot) {
-      databaseOptions.initialHeaders = initialHeaders;
-    }
-    createBody.throughput = offerThroughput;
-  }
-
-  return Q(
-    client()
-      .databases.createIfNotExists(createBody, databaseOptions)
-      .then(response => {
-        return response.database.containers.create(
-          {
-            id: collectionId,
-            partitionKey: (partitionKey || undefined) as PartitionKeyDefinition,
-            indexingPolicy: indexingPolicy ? indexingPolicy : undefined,
-            uniqueKeyPolicy: uniqueKeyPolicy ? uniqueKeyPolicy : undefined,
-            analyticalStorageTtl: analyticalStorageTtl,
-            throughput: databaseLevelThroughput || request.autoPilot ? undefined : offerThroughput
-          } as ContainerRequest, // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
-          {
-            initialHeaders: databaseLevelThroughput ? undefined : initialHeaders
-          }
-        );
-      })
-      .then(containerResponse => containerResponse.resource as DataModels.Collection)
-      .finally(() => refreshCachedResources(options))
-  );
-}
-
 export function refreshCachedOffers(): Q.Promise<void> {
   if (configContext.platform === Platform.Portal) {
     return sendCachedDataMessage(MessageTypes.RefreshOffers, []);

src/Common/DocumentClientUtilityBase.ts

@@ -1,6 +1,5 @@
 import * as Constants from "./Constants";
 import * as DataModels from "../Contracts/DataModels";
-import * as ErrorParserUtility from "./ErrorParserUtility";
 import * as ViewModels from "../Contracts/ViewModels";
 import Q from "q";
 import { ConflictDefinition, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
@@ -856,37 +855,3 @@ export function readOffer(
 
   return deferred.promise;
 }
-
-export function getOrCreateDatabaseAndCollection(
-  request: DataModels.CreateDatabaseAndCollectionRequest,
-  options: any = {}
-): Q.Promise<DataModels.Collection> {
-  const deferred: Q.Deferred<DataModels.Collection> = Q.defer<DataModels.Collection>();
-  const id = NotificationConsoleUtils.logConsoleMessage(
-    ConsoleDataType.InProgress,
-    `Creating a new container ${request.collectionId} for database ${request.databaseId}`
-  );
-
-  DataAccessUtilityBase.getOrCreateDatabaseAndCollection(request, options)
-    .then(
-      (collection: DataModels.Collection) => {
-        NotificationConsoleUtils.logConsoleMessage(
-          ConsoleDataType.Info,
-          `Successfully created container ${request.collectionId}`
-        );
-        deferred.resolve(collection);
-      },
-      (error: any) => {
-        const sanitizedError = ErrorParserUtility.replaceKnownError(JSON.stringify(error));
-        NotificationConsoleUtils.logConsoleMessage(
-          ConsoleDataType.Error,
-          `Error while creating container ${request.collectionId}:\n ${sanitizedError}`
-        );
-        sendNotificationForError(error);
-        deferred.reject(error);
-      }
-    )
-    .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
-
-  return deferred.promise;
-}

src/Common/MongoProxyClient.test.ts

@@ -5,14 +5,7 @@ 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,
-  _createMongoCollectionWithARM
-} from "./MongoProxyClient";
+import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
 jest.mock("../ResourceProvider/ResourceProviderClient.ts");
 
 const databaseId = "testDB";
@@ -260,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,16 +1,12 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
 import queryString from "querystring";
 import { AuthType } from "../AuthType";
-import * as Constants from "../Common/Constants";
-import * as DataExplorerConstants from "../Common/Constants";
 import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
-import { AddDbUtilities } from "../Shared/AddDatabaseUtility";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { userContext } from "../UserContext";
@@ -285,43 +281,35 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
 }
 
 export function createMongoCollectionWithProxy(
-  databaseId: string,
-  collectionId: string,
-  offerThroughput: number,
-  shardKey: string,
-  createDatabase: boolean,
-  sharedThroughput: boolean,
-  isSharded: boolean,
-  autopilotOptions?: DataModels.RpOptions
+  params: DataModels.CreateCollectionParams
 ): Promise<DataModels.Collection> {
   const databaseAccount = userContext.databaseAccount;
-  const params: DataModels.MongoParameters = {
+  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: 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,52 +323,10 @@ export function createMongoCollectionWithProxy(
       if (response.ok) {
         return response.json();
       }
-      return errorHandling(response, "creating collection", params);
+      return errorHandling(response, "creating collection", mongoParams);
     });
 }
 
-export function createMongoCollectionWithARM(
-  armEndpoint: string,
-  databaseId: string,
-  analyticalStorageTtl: number,
-  collectionId: string,
-  offerThroughput: number,
-  shardKey: string,
-  createDatabase: boolean,
-  sharedThroughput: boolean,
-  isSharded: boolean,
-  additionalOptions?: DataModels.RpOptions
-): Promise<DataModels.CreateCollectionWithRpResponse> {
-  const databaseAccount = userContext.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: userContext.subscriptionId,
-    rg: userContext.resourceGroup,
-    dba: databaseAccount.name,
-    analyticalStorageTtl
-  };
-
-  if (createDatabase) {
-    return AddDbUtilities.createMongoDatabaseWithARM(
-      armEndpoint,
-      params,
-      sharedThroughput ? additionalOptions : {}
-    ).then(() => {
-      return _createMongoCollectionWithARM(armEndpoint, params, sharedThroughput ? {} : additionalOptions);
-    });
-  }
-  return _createMongoCollectionWithARM(armEndpoint, params, additionalOptions);
-}
-
 export function getEndpoint(databaseAccount: DataModels.DatabaseAccount): string {
   const serverId = window.dataExplorer.serverId();
   const extensionEndpoint = window.dataExplorer.extensionEndpoint();
@@ -413,46 +359,3 @@ async function errorHandling(response: Response, action: string, params: unknown
 export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameters): string {
   return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/mongodbDatabases/${params.db}/collections/${params.coll}`;
 }
-
-export async function _createMongoCollectionWithARM(
-  armEndpoint: string,
-  params: DataModels.MongoParameters,
-  rpOptions: DataModels.RpOptions
-): Promise<DataModels.CreateCollectionWithRpResponse> {
-  const rpPayloadToCreateCollection: DataModels.MongoCreationRequest = {
-    properties: {
-      resource: {
-        id: params.coll
-      },
-      options: {}
-    }
-  };
-
-  if (params.is) {
-    rpPayloadToCreateCollection.properties.resource["shardKey"] = { [params.pk]: "Hash" };
-  }
-
-  if (!params.st) {
-    if (rpOptions) {
-      rpPayloadToCreateCollection.properties.options = rpOptions;
-    } else {
-      rpPayloadToCreateCollection.properties.options["throughput"] =
-        params.offerThroughput && params.offerThroughput.toString();
-    }
-  }
-
-  if (params.analyticalStorageTtl) {
-    rpPayloadToCreateCollection.properties.resource.analyticalStorageTtl = params.analyticalStorageTtl;
-  }
-
-  try {
-    return new ResourceProviderClient<DataModels.CreateCollectionWithRpResponse>(armEndpoint).putAsync(
-      getARMCreateCollectionEndpoint(params),
-      DataExplorerConstants.ArmApiVersions.publicVersion,
-      rpPayloadToCreateCollection
-    );
-  } catch (response) {
-    errorHandling(response, "creating collection", undefined);
-    return undefined;
-  }
-}

src/Common/QueriesClient.ts

@@ -10,13 +10,8 @@ import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
-import {
-  createDocument,
-  deleteDocument,
-  getOrCreateDatabaseAndCollection,
-  queryDocuments,
-  queryDocumentsPage
-} from "./DocumentClientUtilityBase";
+import { createDocument, deleteDocument, queryDocuments, queryDocumentsPage } from "./DocumentClientUtilityBase";
+import { createCollection } from "./dataAccess/createCollection";
 import * as ErrorParserUtility from "./ErrorParserUtility";
 import * as Logger from "./Logger";
 
@@ -41,12 +36,13 @@ export class QueriesClient {
       ConsoleDataType.InProgress,
       "Setting up account for saving queries"
     );
-    return getOrCreateDatabaseAndCollection({
+    return createCollection({
       collectionId: SavedQueries.CollectionName,
+      createNewDatabase: true,
       databaseId: SavedQueries.DatabaseName,
       partitionKey: QueriesClient.PartitionKey,
       offerThroughput: SavedQueries.OfferThroughput,
-      databaseLevelThroughput: undefined
+      databaseLevelThroughput: false
     })
       .then(
         (collection: DataModels.Collection) => {

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,371 @@
+import * as DataModels from "../../Contracts/DataModels";
+import * as ErrorParserUtility from "../ErrorParserUtility";
+import { AuthType } from "../../AuthType";
+import { ContainerResponse, DatabaseResponse } from "@azure/cosmos";
+import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
+import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import * as ARMTypes from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { client } from "../CosmosClient";
+import { createMongoCollectionWithProxy } from "../MongoProxyClient";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import {
+  createUpdateCassandraTable,
+  getCassandraTable
+} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import {
+  createUpdateGremlinGraph,
+  getGremlinGraph
+} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { logError } from "../Logger";
+import { refreshCachedResources } from "../DataAccessUtilityBase";
+import { sendNotificationForError } from "./sendNotificationForError";
+import { userContext } from "../../UserContext";
+import { createDatabase } from "./createDatabase";
+
+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

@@ -3,8 +3,10 @@ import { AuthType } from "../../AuthType";
 import { DatabaseResponse } from "@azure/cosmos";
 import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
 import {
+  CassandraKeyspaceCreateUpdateParameters,
+  GremlinDatabaseCreateUpdateParameters,
+  MongoDBDatabaseCreateUpdateParameters,
   SqlDatabaseCreateUpdateParameters,
   CreateUpdateOptions
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
@@ -79,7 +81,7 @@ async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promi
       userContext.databaseAccount.name,
       params.databaseId
     );
-    if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    if (getResponse?.properties?.resource) {
       throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
     }
   } catch (error) {
@@ -115,7 +117,7 @@ async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Pro
       userContext.databaseAccount.name,
       params.databaseId
     );
-    if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    if (getResponse?.properties?.resource) {
       throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
     }
   } catch (error) {
@@ -125,7 +127,7 @@ async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Pro
   }
 
   const options: CreateUpdateOptions = constructRpOptions(params);
-  const rpPayload: SqlDatabaseCreateUpdateParameters = {
+  const rpPayload: MongoDBDatabaseCreateUpdateParameters = {
     properties: {
       resource: {
         id: params.databaseId
@@ -161,7 +163,7 @@ async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams):
   }
 
   const options: CreateUpdateOptions = constructRpOptions(params);
-  const rpPayload: SqlDatabaseCreateUpdateParameters = {
+  const rpPayload: CassandraKeyspaceCreateUpdateParameters = {
     properties: {
       resource: {
         id: params.databaseId
@@ -187,7 +189,7 @@ async function createGremlineDatabase(params: DataModels.CreateDatabaseParams):
       userContext.databaseAccount.name,
       params.databaseId
     );
-    if (getResponse && getResponse.properties && getResponse.properties.resource) {
+    if (getResponse?.properties?.resource) {
       throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
     }
   } catch (error) {
@@ -197,7 +199,7 @@ async function createGremlineDatabase(params: DataModels.CreateDatabaseParams):
   }
 
   const options: CreateUpdateOptions = constructRpOptions(params);
-  const rpPayload: SqlDatabaseCreateUpdateParameters = {
+  const rpPayload: GremlinDatabaseCreateUpdateParameters = {
     properties: {
       resource: {
         id: params.databaseId
@@ -217,8 +219,7 @@ async function createGremlineDatabase(params: DataModels.CreateDatabaseParams):
 
 async function createDatabaseWithSDK(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
   const createBody: DatabaseRequest = { id: params.databaseId };
-  const databaseOptions: RequestOptions = {};
-  // TODO: replace when SDK support autopilot
+
   if (params.databaseLevelThroughput) {
     if (params.autoPilotMaxThroughput) {
       createBody.maxThroughput = params.autoPilotMaxThroughput;
@@ -227,7 +228,7 @@ async function createDatabaseWithSDK(params: DataModels.CreateDatabaseParams): P
     }
   }
 
-  const response: DatabaseResponse = await client().databases.create(createBody, databaseOptions);
+  const response: DatabaseResponse = await client().databases.create(createBody);
   return response.resource;
 }
 

src/Contracts/DataModels.ts

@@ -334,6 +334,19 @@ export interface CreateDatabaseParams {
   offerThroughput?: number;
 }
 
+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 {
   minimumRU: number;
   maximumRU: number;

src/Contracts/ViewModels.ts

@@ -353,7 +353,8 @@ export enum CollectionTabKind {
   NotebookV2 = 15,
   SparkMasterTab = 16,
   Gallery = 17,
-  NotebookViewer = 18
+  NotebookViewer = 18,
+  QueryV2 = 19
 }
 
 export enum TerminalKind {

src/Explorer/ComponentRegisterer.ts

@@ -35,6 +35,7 @@ ko.components.register("trigger-tab", new TabComponents.TriggerTab());
 ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
 ko.components.register("settings-tab", new TabComponents.SettingsTab());
 ko.components.register("query-tab", new TabComponents.QueryTab());
+ko.components.register("query-tab-v2", new TabComponents.QueryTabV2());
 ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
 ko.components.register("graph-tab", new TabComponents.GraphTab());
 ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

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

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

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

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

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

src/Explorer/Controls/Query/QueryComponent.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import QueryTabV2 from "../../Tabs/QueryTabV2";
+
+export interface QueryComponentProps {
+    queryTab: QueryTabV2
+}
+
+interface QueryComponentState {
+
+}
+
+export class QueryComponent extends React.Component<QueryComponentProps, QueryComponentState> {
+    public render() : JSX.Element {
+        return (
+            <h1>
+                Query tab v2 is here
+            </h1>
+        )
+    }
+}

src/Explorer/Controls/Query/QueryComponentAdapter.tsx

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

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -1,4 +1,5 @@
 jest.mock("../../Common/DocumentClientUtilityBase");
+jest.mock("../../Common/dataAccess/createCollection");
 import * as ko from "knockout";
 import * as sinon from "sinon";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -33,8 +34,8 @@ describe("ContainerSampleGenerator", () => {
       databaseId: sampleDatabaseId,
       offerThroughput: 400,
       databaseLevelThroughput: false,
+      createNewDatabase: true,
       collectionId: sampleCollectionId,
-      rupmEnabled: false,
       data: [
         {
           firstname: "Eva",
@@ -99,8 +100,8 @@ describe("ContainerSampleGenerator", () => {
       databaseId: sampleDatabaseId,
       offerThroughput: 400,
       databaseLevelThroughput: false,
+      createNewDatabase: true,
       collectionId: sampleCollectionId,
-      rupmEnabled: false,
       data: [
         "g.addV('person').property(id, '1').property('_partitionKey','pk').property('name', 'Eva').property('age', 44)"
       ]

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -1,4 +1,3 @@
-import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import GraphTab from ".././Tabs/GraphTab";
@@ -6,10 +5,11 @@ import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsol
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { createDocument, getOrCreateDatabaseAndCollection } from "../../Common/DocumentClientUtilityBase";
+import { createDocument } from "../../Common/DocumentClientUtilityBase";
+import { createCollection } from "../../Common/dataAccess/createCollection";
 import { userContext } from "../../UserContext";
 
-interface SampleDataFile extends DataModels.CreateDatabaseAndCollectionRequest {
+interface SampleDataFile extends DataModels.CreateCollectionParams {
   data: any[];
 }
 
@@ -54,18 +54,11 @@ export class ContainerSampleGenerator {
   }
 
   private async createContainerAsync(): Promise<ViewModels.Collection> {
-    const createRequest: DataModels.CreateDatabaseAndCollectionRequest = {
+    const createRequest: DataModels.CreateCollectionParams = {
       ...this.sampleDataFile
     };
 
-    const options: any = {};
-    if (this.container.isPreferredApiMongoDB()) {
-      options.initialHeaders = options.initialHeaders || {};
-      options.initialHeaders[Constants.HttpHeaders.supportSpatialLegacyCoordinates] = true;
-      options.initialHeaders[Constants.HttpHeaders.usePolygonsSmallerThanAHemisphere] = true;
-    }
-
-    await getOrCreateDatabaseAndCollection(createRequest, options);
+    await createCollection(createRequest);
     await this.container.refreshAllDatabases();
     const database = this.container.findDatabaseWithId(this.sampleDataFile.databaseId);
     if (!database) {

src/Explorer/Explorer.ts

@@ -26,7 +26,7 @@ import NewVertexPane from "./Panes/NewVertexPane";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import Q from "q";
 import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import TerminalTab from "./Tabs/TerminalTab";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import { ActionContracts, MessageTypes } from "../Contracts/ExplorerContracts";
@@ -209,6 +209,7 @@ export default class Explorer {
 
   // features
   public isGalleryPublishEnabled: ko.Computed<boolean>;
+  public isQueryTabV2Enabled: ko.Computed<boolean>;
   public isCodeOfConductEnabled: ko.Computed<boolean>;
   public isLinkInjectionEnabled: ko.Computed<boolean>;
   public isGitHubPaneEnabled: ko.Observable<boolean>;
@@ -414,6 +415,9 @@ export default class Explorer {
     this.isGalleryPublishEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableGalleryPublish)
     );
+    this.isQueryTabV2Enabled = ko.computed<boolean>(() =>
+    this.isFeatureEnabled(Constants.Features.enableQueryTabV2)
+    );
     this.isCodeOfConductEnabled = ko.computed<boolean>(() =>
       this.isFeatureEnabled(Constants.Features.enableCodeOfConduct)
     );
@@ -1893,6 +1897,9 @@ export default class Explorer {
   }
 
   public findSelectedDatabase(): ViewModels.Database {
+    if (!this.selectedNode()) {
+      return null;
+    }
     if (this.selectedNode().nodeKind === "Database") {
       return _.find(this.databases(), (database: ViewModels.Database) => database.rid === this.selectedNode().rid);
     }
@@ -3117,12 +3124,6 @@ export default class Explorer {
     } else {
       loadingTitle.innerHTML = title;
     }
-
-    TelemetryProcessor.trace(
-      Action.LoadingStatus,
-      ActionModifiers.Mark,
-      title !== "Welcome to Azure Cosmos DB" ? `Title: ${title}, Text: ${text}` : text
-    );
   }
 
   private _openSetupNotebooksPaneForQuickstart(): void {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -23,7 +23,7 @@ import { GraphConfig } from "../../Tabs/GraphTab";
 import { EditorReact } from "../../Controls/Editor/EditorReact";
 import LoadGraphIcon from "../../../../images/LoadGraph.png";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as Constants from "../../../Common/Constants";
 import { InputProperty } from "../../../Contracts/ViewModels";
 import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

@@ -2,7 +2,7 @@ import * as ViewModels from "../../../Contracts/ViewModels";
 import { PlatformType } from "../../../PlatformType";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { Areas } from "../../../Common/Constants";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
 import AddCollectionIcon from "../../../../images/AddCollection.svg";

src/Explorer/Notebook/MonacoEditor/MonacoEditor.tsx

@@ -1,464 +0,0 @@
-import { Channels } from "@nteract/messaging";
-import * as monaco from "./monaco";
-import * as React from "react";
-import { completionProvider } from "./completions/completionItemProvider";
-import { AppState, ContentRef } from "@nteract/core";
-import { connect } from "react-redux";
-import "./styles.css";
-import { LightThemeName, HCLightThemeName, DarkThemeName } from "./theme";
-// import { logger } from "src/common/localLogger";
-import { getCellMonacoLanguage } from "./selectors";
-// import { DocumentUri } from "./documentUri";
-
-export type IModelContentChangedEvent = monaco.editor.IModelContentChangedEvent;
-
-/**
- * Initial props for Monaco received from agnostic component
- */
-export interface IMonacoProps {
-  id: string;
-  contentRef: ContentRef;
-  modelUri?: monaco.Uri;
-  theme: monaco.editor.IStandaloneThemeData | monaco.editor.BuiltinTheme | string;
-  cellLanguageOverride?: string;
-  notebookLanguageOverride?: string;
-  readOnly?: boolean;
-  channels: Channels | undefined;
-  enableCompletion: boolean;
-  shouldRegisterDefaultCompletion?: boolean;
-  onChange: (value: string, event?: unknown) => void;
-  onFocusChange: (focus: boolean) => void;
-  onCursorPositionChange?: (selection: monaco.ISelection | null) => void;
-  onRegisterCompletionProvider?: (languageId: string) => void;
-  value: string;
-  editorFocused: boolean;
-  lineNumbers: boolean;
-
-  /** set height of editor to fit the specified number of lines in display */
-  numberOfLines?: number;
-
-  options?: monaco.editor.IEditorOptions;
-}
-
-/**
- * Monaco specific props derived from State
- */
-interface IMonacoStateProps {
-  language: string;
-}
-
-// Cache the custom theme data to avoid repeatly defining the custom theme
-let customThemeData: monaco.editor.IStandaloneThemeData;
-
-function getMonacoTheme(theme: monaco.editor.IStandaloneThemeData | monaco.editor.BuiltinTheme | string) {
-  if (typeof theme === "string") {
-    switch (theme) {
-      case "vs-dark":
-        return DarkThemeName;
-      case "hc-black":
-        return "hc-black";
-      case "vs":
-        return LightThemeName;
-      case "hc-light":
-        return HCLightThemeName;
-      default:
-        return LightThemeName;
-    }
-  } else if (theme === undefined || typeof theme === "undefined") {
-    return LightThemeName;
-  } else {
-    const themeName = "custom-vs";
-
-    // Skip redefining the same custom theme if it is the same theme data.
-    if (customThemeData !== theme) {
-      monaco.editor.defineTheme(themeName, theme);
-      customThemeData = theme;
-    }
-
-    return themeName;
-  }
-}
-
-const makeMapStateToProps = (initialState: AppState, initialProps: IMonacoProps) => {
-  const { id, contentRef } = initialProps;
-  const mapStateToProps = (state: AppState, ownProps: IMonacoProps & IMonacoStateProps) => {
-    return {
-      language: getCellMonacoLanguage(
-        state,
-        contentRef,
-        id,
-        ownProps.cellLanguageOverride,
-        ownProps.notebookLanguageOverride
-      )
-    };
-  };
-  return mapStateToProps;
-};
-
-/**
- * Creates a MonacoEditor instance within the MonacoContainer div
- */
-export class MonacoEditor extends React.Component<IMonacoProps & IMonacoStateProps> {
-  editor?: monaco.editor.IStandaloneCodeEditor;
-  editorContainerRef = React.createRef<HTMLDivElement>();
-  contentHeight?: number;
-  private cursorPositionListener?: monaco.IDisposable;
-
-  constructor(props: IMonacoProps & IMonacoStateProps) {
-    super(props);
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.calculateHeight = this.calculateHeight.bind(this);
-  }
-
-  onDidChangeModelContent(e: monaco.editor.IModelContentChangedEvent): void {
-    if (this.editor) {
-      if (this.props.onChange) {
-        this.props.onChange(this.editor.getValue(), e);
-      }
-
-      this.calculateHeight();
-    }
-  }
-
-  /**
-   * Adjust the height of editor
-   *
-   * @remarks
-   * The way to determine how many lines we should display in editor:
-   * If numberOfLines is not set or set to 0, we adjust the height to fit the content
-   * If numberOfLines is specified we respect that setting
-   */
-  calculateHeight(): void {
-    // Make sure we have an editor
-    if (!this.editor) {
-      return;
-    }
-
-    // Make sure we have a model
-    const model = this.editor.getModel();
-    if (!model) {
-      return;
-    }
-
-    if (this.editorContainerRef && this.editorContainerRef.current) {
-      const expectedLines = this.props.numberOfLines || model.getLineCount();
-      // The find & replace menu takes up 2 lines, that is why 2 line is set as the minimum number of lines
-      // TODO: we should either disable the find/replace menu or auto expand the editor when find/replace is triggerred.
-      const finalizedLines = Math.max(expectedLines, 1) + 1;
-      const lineHeight = this.editor.getConfiguration().lineHeight;
-
-      const contentHeight = finalizedLines * lineHeight;
-      if (this.contentHeight !== contentHeight) {
-        this.editorContainerRef.current.style.height = contentHeight + "px";
-        this.editor.layout();
-        this.contentHeight = contentHeight;
-      }
-    }
-  }
-
-  componentDidMount(): void {
-    if (this.editorContainerRef && this.editorContainerRef.current) {
-      // Register Jupyter completion provider if needed
-      this.registerCompletionProvider();
-
-      // Use Monaco model uri if provided. Otherwise, create a new model uri using editor id.
-      const uri = this.props.modelUri ? this.props.modelUri : monaco.Uri.file(this.props.id);
-
-      // Only create a new model if it does not exist. For example, when we double click on a markdown cell,
-      // an editor model is created for it. Once we go back to markdown preview mode that doesn't use the editor,
-      // double clicking on the markdown cell will again instantiate a monaco editor. In that case, we should
-      // rebind the previously created editor model for the markdown instead of recreating one. Monaco does not
-      // allow models to be recreated with the same uri.
-      let model = monaco.editor.getModel(uri);
-      if (!model) {
-        model = monaco.editor.createModel(this.props.value, this.props.language, uri);
-      }
-
-      // Create Monaco editor backed by a Monaco model.
-      this.editor = monaco.editor.create(this.editorContainerRef.current, {
-        // Following are the default settings
-        minimap: {
-          enabled: false
-        },
-        autoIndent: true,
-        overviewRulerLanes: 1,
-        scrollbar: {
-          useShadows: false,
-          verticalHasArrows: false,
-          horizontalHasArrows: false,
-          vertical: "hidden",
-          horizontal: "hidden",
-          verticalScrollbarSize: 0,
-          horizontalScrollbarSize: 0,
-          arrowSize: 30
-        },
-        scrollBeyondLastLine: false,
-        find: {
-          // TODO Need this?
-          // addExtraSpaceOnTop: false, // pops the editor out of alignment if turned on
-          seedSearchStringFromSelection: true, // default is true
-          autoFindInSelection: false // default is false
-        },
-        // Disable highlight current line, too much visual noise with it on.
-        // VS Code also has it disabled for their notebook experience.
-        renderLineHighlight: "none",
-
-        // Allow editor pop up widgets such as context menus, signature help, hover tips to be able to be
-        // displayed outside of the editor. Without this, the pop up widgets can be clipped.
-        fixedOverflowWidgets: true,
-
-        // Apply custom settings from configuration
-        ...this.props.options,
-
-        // Apply specific settings passed-in as direct props
-        model,
-        value: this.props.value,
-        language: this.props.language,
-        readOnly: this.props.readOnly,
-        lineNumbers: this.props.lineNumbers ? "on" : "off",
-        theme: getMonacoTheme(this.props.theme)
-      });
-
-      this.addEditorTopMargin();
-
-      // Ignore Ctrl + Enter
-      // tslint:disable-next-line no-bitwise
-      this.editor.addCommand(
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-        () => {
-          // Do nothing. This is handled elsewhere, we just don't want the editor to put the newline.
-        },
-        undefined
-      );
-      // TODO Add right context
-
-      this.toggleEditorOptions(this.props.editorFocused);
-
-      if (this.props.editorFocused) {
-        if (!this.editor.hasTextFocus()) {
-          // Bring browser focus to the editor if text not already in focus
-          this.editor.focus();
-        }
-        this.registerCursorListener();
-      }
-
-      // TODO: Need to remove the event listener when the editor is disposed, or we have a memory leak here.
-      //       The same applies to the other event listeners below
-      // Adds listener under the resize window event which calls the resize method
-      window.addEventListener("resize", this.resize.bind(this));
-
-      // Adds listeners for undo and redo actions emitted from the toolbar
-      this.editorContainerRef.current.addEventListener("undo", () => {
-        if (this.editor) {
-          this.editor.trigger("undo-event", "undo", {});
-        }
-      });
-      this.editorContainerRef.current.addEventListener("redo", () => {
-        if (this.editor) {
-          this.editor.trigger("redo-event", "redo", {});
-        }
-      });
-
-      this.editor.onDidChangeModelContent(this.onDidChangeModelContent.bind(this));
-      this.editor.onDidFocusEditorText(this.onFocus);
-      this.editor.onDidBlurEditorText(this.onBlur);
-      this.calculateHeight();
-
-      // FIXME: This might need further investigation as the props value should be respected in construction
-      // The following is a mitigation measure till that time
-      // Ensures that the source contents of the editor (value) is consistent with the state of the editor
-      this.editor.setValue(this.props.value);
-    }
-  }
-
-  addEditorTopMargin(): void {
-    if (this.editor) {
-      // Monaco editor doesn't have margins
-      // https://github.com/notable/notable/issues/551
-      // This is a workaround to add an editor area 12px padding at the top
-      // so that cursors rendered by collab decorators could be visible without being cut.
-      this.editor.changeViewZones(changeAccessor => {
-        const domNode = document.createElement("div");
-        changeAccessor.addZone({
-          afterLineNumber: 0,
-          heightInPx: 12,
-          domNode
-        });
-      });
-    }
-  }
-
-  /**
-   * Tells editor to check the surrounding container size and resize itself appropriately
-   */
-  resize(): void {
-    if (this.editor && this.props.editorFocused) {
-      this.editor.layout();
-    }
-  }
-
-  componentDidUpdate(): void {
-    if (!this.editor) {
-      return;
-    }
-
-    const { value, channels, /* language, contentRef, id,*/ editorFocused, theme } = this.props;
-
-    // Ensures that the source contents of the editor (value) is consistent with the state of the editor
-    if (this.editor.getValue() !== value) {
-      this.editor.setValue(value);
-    }
-
-    completionProvider.setChannels(channels);
-
-    // Register Jupyter completion provider if needed
-    this.registerCompletionProvider();
-
-    /*
-    // Apply new model to the editor when the language is changed.
-    const model = this.editor.getModel();
-    if (model && language && model.getModeId() !== language) {
-      const newUri = DocumentUri.createCellUri(contentRef, id, language);
-      if (!monaco.editor.getModel(newUri)) {
-        // Save the cursor position before we set new model.
-        const position = this.editor.getPosition();
-
-        // Set new model targeting the changed language.
-        this.editor.setModel(monaco.editor.createModel(value, language, newUri));
-        this.addEditorTopMargin();
-
-        // Restore cursor position to new model.
-        if (position) {
-          this.editor.setPosition(position);
-        }
-
-        // Dispose of the old model in a seperate event. We cannot dispose of the model within the
-        // componentDidUpdate method or else the editor will throw an exception. Zero in the timeout field
-        // means execute immediately but in a seperate next event.
-        setTimeout(() => model.dispose(), 0);
-      }
-    }
-    */
-
-    if (theme) {
-      monaco.editor.setTheme(getMonacoTheme(theme));
-    }
-
-    // In the multi-tabs scenario, when the notebook is hidden by setting "display:none",
-    // Any state update propagated here would cause a UI re-layout, monaco-editor will then recalculate
-    // and set its height to 5px.
-    // To work around that issue, we skip updating the UI when parent element's offsetParent is null (which
-    // indicate an ancient element is hidden by display set to none)
-    // We may revisit this when we get to refactor for multi-notebooks.
-    if (!this.editorContainerRef.current?.offsetParent) {
-      return;
-    }
-
-    // Set focus
-    if (editorFocused && !this.editor.hasTextFocus()) {
-      this.editor.focus();
-    }
-
-    // Tells the editor pane to check if its container has changed size and fill appropriately
-    this.editor.layout();
-  }
-
-  componentWillUnmount(): void {
-    if (this.editor) {
-      try {
-        const model = this.editor.getModel();
-        if (model) {
-          model.dispose();
-        }
-
-        this.editor.dispose();
-      } catch (err) {
-        console.error(`Error occurs in disposing editor: ${JSON.stringify(err)}`);
-      }
-    }
-  }
-
-  render(): JSX.Element {
-    return (
-      <div className="monaco-container">
-        <div ref={this.editorContainerRef} id={`editor-${this.props.id}`} />
-      </div>
-    );
-  }
-
-  /**
-   * Register default kernel-based completion provider.
-   * @param language Language
-   */
-  registerDefaultCompletionProvider(language: string): void {
-    // onLanguage event is emitted only once per language when language is first time needed.
-    monaco.languages.onLanguage(language, () => {
-      monaco.languages.registerCompletionItemProvider(language, completionProvider);
-    });
-  }
-
-  private onFocus() {
-    this.props.onFocusChange(true);
-    this.toggleEditorOptions(true);
-    this.registerCursorListener();
-  }
-
-  private onBlur() {
-    this.props.onFocusChange(false);
-    this.toggleEditorOptions(false);
-    this.unregisterCursorListener();
-  }
-
-  private registerCursorListener() {
-    if (this.editor && this.props.onCursorPositionChange) {
-      const selection = this.editor.getSelection();
-      this.props.onCursorPositionChange(selection);
-
-      if (!this.cursorPositionListener) {
-        this.cursorPositionListener = this.editor.onDidChangeCursorSelection(event =>
-          this.props.onCursorPositionChange!(event.selection)
-        );
-      }
-    }
-  }
-
-  private unregisterCursorListener() {
-    if (this.cursorPositionListener) {
-      this.cursorPositionListener.dispose();
-      this.cursorPositionListener = undefined;
-    }
-  }
-
-  /**
-   * Toggle editor options based on if the editor is in active state (i.e. focused).
-   * When the editor is not active, we want to deactivate some of the visual noise.
-   * @param isActive Whether editor is active.
-   */
-  private toggleEditorOptions(isActive: boolean) {
-    if (this.editor) {
-      this.editor.updateOptions({
-        matchBrackets: isActive,
-        occurrencesHighlight: isActive,
-        renderIndentGuides: isActive
-      });
-    }
-  }
-
-  /**
-   * Register language features for target language. Call before setting language type to model.
-   */
-  private registerCompletionProvider() {
-    const { enableCompletion, language, onRegisterCompletionProvider, shouldRegisterDefaultCompletion } = this.props;
-
-    if (enableCompletion && language) {
-      if (onRegisterCompletionProvider) {
-        onRegisterCompletionProvider(language);
-      } else if (shouldRegisterDefaultCompletion) {
-        this.registerDefaultCompletionProvider(language);
-      }
-    }
-  }
-}
-
-export default connect<IMonacoStateProps, void, IMonacoProps, AppState>(makeMapStateToProps)(MonacoEditor);

src/Explorer/Notebook/MonacoEditor/completions/completionItemProvider.ts

@@ -1,239 +0,0 @@
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
-// import * as monaco from "../monaco";
-import { Observable, Observer } from "rxjs";
-import { first, map } from "rxjs/operators";
-import { childOf, JupyterMessage, ofMessageType, Channels } from "@nteract/messaging";
-
-/**
- * TODO: import from nteract when the changes under editor-base.ts are ported to nteract.
- */
-import { CompletionResults, CompletionMatch, completionRequest, js_idx_to_char_idx } from "../editor-base";
-
-/**
- * Jupyter to Monaco completion item kinds.
- */
-const unknownJupyterKind = "<unknown>";
-const jupyterToMonacoCompletionItemKind = {
-  [unknownJupyterKind]: monaco.languages.CompletionItemKind.Field,
-  class: monaco.languages.CompletionItemKind.Class,
-  function: monaco.languages.CompletionItemKind.Function,
-  keyword: monaco.languages.CompletionItemKind.Keyword,
-  instance: monaco.languages.CompletionItemKind.Variable,
-  statement: monaco.languages.CompletionItemKind.Variable
-};
-
-/**
- * Completion item provider.
- */
-class CompletionItemProvider implements monaco.languages.CompletionItemProvider {
-  private channels: Channels | undefined;
-
-  /**
-   * Set Channels of Jupyter kernel.
-   * @param channels Channels of Jupyter kernel.
-   */
-  setChannels(channels: Channels | undefined) {
-    this.channels = channels;
-  }
-
-  /**
-   * Whether provider is connected to Jupyter kernel.
-   */
-  get isConnectedToKernel() {
-    return !!this.channels;
-  }
-
-  /**
-   * Additional characters to trigger completion other than Ctrl+Space.
-   */
-  get triggerCharacters() {
-    return [" ", "<", "/", ".", "="];
-  }
-
-  /**
-   * Get list of completion items at position of cursor.
-   * @param model Monaco editor text model.
-   * @param position Position of cursor.
-   */
-  async provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
-    // Convert to zero-based index
-    let cursorPos = model.getOffsetAt(position);
-    const code = model.getValue();
-    cursorPos = js_idx_to_char_idx(cursorPos, code);
-
-    // Get completions from Jupyter kernel if its Channels is connected
-    let items = [];
-    if (this.channels) {
-      try {
-        const message = completionRequest(code, cursorPos);
-        items = await this.codeCompleteObservable(this.channels, message, model).toPromise();
-      } catch (error) {
-        // Temporary log error to console until we settle on how we log in V3
-        // tslint:disable-next-line
-        console.error(error);
-      }
-    }
-
-    return Promise.resolve<monaco.languages.CompletionList>({
-      suggestions: items,
-      incomplete: false
-    });
-  }
-
-  /**
-   * Get list of completion items from Jupyter kernel.
-   * @param channels Channels of Jupyter kernel.
-   * @param message Jupyter message for completion request.
-   * @param model Text model.
-   */
-  private codeCompleteObservable(channels: Channels, message: JupyterMessage, model: monaco.editor.ITextModel) {
-    // Process completion response
-    const completion$ = channels.pipe(
-      childOf(message),
-      ofMessageType("complete_reply"),
-      map(entry => entry.content),
-      first(),
-      map(results => this.adaptToMonacoCompletions(results, model))
-    );
-
-    // Subscribe and send completion request message
-    return Observable.create((observer: Observer<unknown>) => {
-      const subscription = completion$.subscribe(observer);
-      channels.next(message);
-      return subscription;
-    });
-  }
-
-  /**
-   * Converts Jupyter completion result to list of Monaco completion items.
-   */
-  private adaptToMonacoCompletions(results: CompletionResults, model: monaco.editor.ITextModel) {
-    let range: monaco.IRange;
-    let percentCount = 0;
-    let matches = results ? results.matches : [];
-    if (results.metadata && results.metadata._jupyter_types_experimental) {
-      matches = results.metadata._jupyter_types_experimental as CompletionMatch[];
-    }
-    return matches.map((match: CompletionMatch, index: number) => {
-      if (typeof match === "string") {
-        const text = this.sanitizeText(match);
-        const filtered = this.getFilterText(text);
-        return {
-          kind: this.adaptToMonacoCompletionItemKind(unknownJupyterKind),
-          label: text,
-          insertText: text,
-          filterText: filtered,
-          sortText: this.getSortText(index)
-        } as monaco.languages.CompletionItem;
-      } else {
-        // We only need to get the range once as the range is the same for all completion items in the list.
-        if (!range) {
-          const start = model.getPositionAt(match.start);
-          const end = model.getPositionAt(match.end);
-          range = {
-            startLineNumber: start.lineNumber,
-            startColumn: start.column,
-            endLineNumber: end.lineNumber,
-            endColumn: end.column
-          };
-
-          // Get the range representing the text before the completion action was invoked.
-          // If the text starts with magics % indicator, we need to track how many of these indicators exist
-          // so that we ensure the insertion text only inserts the delta between what the user typed versus
-          // what is recommended by the completion. Without this, there will be extra % insertions.
-          // Example:
-          // User types %%p then suggestion list will recommend %%python, if we now commit the item then the
-          // final text in the editor becomes %%p%%python instead of %%python. This is why the tracking code
-          // below is needed. This behavior is only specific to the magics % indicators as Monaco does not
-          // handle % characters in their completion list well.
-          const rangeText = model.getValueInRange(range);
-          if (rangeText.startsWith("%%")) {
-            percentCount = 2;
-          } else if (rangeText.startsWith("%")) {
-            percentCount = 1;
-          }
-        }
-
-        const text = this.sanitizeText(match.text);
-        const filtered = this.getFilterText(text);
-        const insert = this.getInsertText(text, percentCount);
-        return {
-          kind: this.adaptToMonacoCompletionItemKind(match.type as keyof typeof jupyterToMonacoCompletionItemKind),
-          label: text,
-          insertText: percentCount > 0 ? insert : text,
-          filterText: filtered,
-          sortText: this.getSortText(index)
-        } as monaco.languages.CompletionItem;
-      }
-    });
-  }
-
-  /**
-   * Converts Jupyter completion item kind to Monaco completion item kind.
-   * @param kind Jupyter completion item kind.
-   */
-  private adaptToMonacoCompletionItemKind(kind: keyof typeof jupyterToMonacoCompletionItemKind) {
-    const result = jupyterToMonacoCompletionItemKind[kind];
-    return result ? result : jupyterToMonacoCompletionItemKind[unknownJupyterKind];
-  }
-
-  /**
-   * Remove everything before a dot. Jupyter completion results like to include all characters before
-   * the trigger character. For example, if user types "myarray.", we expect the completion results to
-   * show "append", "pop", etc. but for the actual case, it will show "myarray.append", "myarray.pop",
-   * etc. so we are going to sanitize the text.
-   * @param text Text of Jupyter completion item
-   */
-  private sanitizeText(text: string) {
-    const index = text.lastIndexOf(".");
-    return index > -1 && index < text.length - 1 ? text.substring(index + 1) : text;
-  }
-
-  /**
-   * Remove magics all % characters as Monaco doesn't like them for the filtering text.
-   * Without this, completion won't show magics match items.
-   * @param text Text of Jupyter completion item.
-   */
-  private getFilterText(text: string) {
-    return text.replace(/%/g, "");
-  }
-
-  /**
-   * Get insertion text handling what to insert for the magics case depending on what
-   * has already been typed.
-   * @param text Text of Jupyter completion item.
-   * @param percentCount Number of percent characters to remove
-   */
-  private getInsertText(text: string, percentCount: number) {
-    for (let i = 0; i < percentCount; i++) {
-      text = text.replace("%", "");
-    }
-    return text;
-  }
-
-  /**
-   * Maps numbers to strings, such that if a>b numerically, f(a)>f(b) lexicograhically.
-   * 1 -> "za", 26 -> "zz", 27 -> "zza", 28 -> "zzb", 52 -> "zzz", 53 ->"zzza"
-   * @param order Number to be converted to a sorting-string. order >= 0.
-   * @returns A string representing the order.
-   */
-  private getSortText(order: number): string {
-    order++;
-    const numCharacters = 26; // "z" - "a" + 1;
-    const div = Math.floor(order / numCharacters);
-
-    let sortText = "z";
-    for (let i = 0; i < div; i++) {
-      sortText += "z";
-    }
-
-    const remainder = order % numCharacters;
-    if (remainder > 0) {
-      sortText += String.fromCharCode(96 + remainder);
-    }
-    return sortText;
-  }
-}
-
-const completionProvider = new CompletionItemProvider();
-export { completionProvider };

src/Explorer/Notebook/MonacoEditor/converter.ts

@@ -1,44 +0,0 @@
-import Immutable from "immutable";
-import * as monaco from "./monaco";
-/**
- * Code Mirror to Monaco constants.
- */
-export enum Mode {
-  markdown = "markdown",
-  raw = "plaintext",
-  python = "python",
-  csharp = "csharp"
-}
-
-/**
- * Maps Code Mirror mode to a valid Monaco Editor supported langauge
- * defaults to plaintext if map not found.
- * @param mode Code Mirror mode
- * @returns Monaco language
- */
-export function mapCodeMirrorModeToMonaco(mode: string | { name: string }): string {
-  let language = "";
-
-  // Parse codemirror mode object
-  if (typeof mode === "string") {
-    language = mode;
-  }
-  // Vanilla object
-  else if (typeof mode === "object" && mode.name) {
-    language = mode.name;
-  }
-  // Immutable Map
-  else if (Immutable.Map.isMap(mode) && mode.has("name")) {
-    language = mode.get("name");
-  }
-
-  // Need to handle "ipython" as a special case since it is not a registered language
-  if (language === "ipython") {
-    return Mode.python;
-  } else if (language === "text/x-csharp") {
-    return Mode.csharp;
-  } else if (monaco.languages.getEncodedLanguageId(language) > 0) {
-    return language;
-  }
-  return Mode.raw;
-}

src/Explorer/Notebook/MonacoEditor/editor-base.ts

@@ -1,76 +0,0 @@
-// Disable linting on file since we will be moving the code below to nteract which have different rules configured.
-// tslint:disable:variable-name
-// tslint:disable:interface-name
-
-/**
- * TODO: Create new editor-base package in nteract repo and move all code below to new package.
- */
-
-import { createMessage } from "@nteract/messaging";
-
-/**
- * Jupyter messaging protocol's _jupyter_types_experimental completion result.
- */
-interface CompletionResult {
-  end: number;
-  start: number;
-  type: string;
-  text: string;
-  displayText?: string;
-}
-
-/**
- * Juptyer completion match item.
- */
-export type CompletionMatch = string | CompletionResult;
-
-/**
- * Jupyter messaging protocol's complete_reply response.
- */
-export interface CompletionResults {
-  status: string;
-  cursor_start: number;
-  cursor_end: number;
-  matches: CompletionMatch[];
-  metadata?: {
-    _jupyter_types_experimental?: unknown;
-  };
-}
-
-/**
- * Create Jupyter messaging protocol's complete_request message.
- * @param code Code of editor.
- * @param cursorPos cursor position represented in the Jupyter messaging protocol (character position)
- */
-export const completionRequest = (code: string, cursorPos: number) =>
-  createMessage("complete_request", {
-    content: {
-      code,
-      cursor_pos: cursorPos
-    }
-  });
-
-/**
- * JavaScript stores text as utf16 and string indices use "code units",
- * which stores high-codepoint characters as "surrogate pairs",
- * which occupy two indices in the JavaScript string.
- * We need to translate cursor_pos in the protocol (in characters)
- * to js offset (with surrogate pairs taking two spots).
- * @param js_idx JavaScript index
- * @param text Text
- */
-export const js_idx_to_char_idx: (js_idx: number, text: string) => number = (js_idx: number, text: string): number => {
-  let char_idx: number = js_idx;
-  for (let i = 0; i + 1 < text.length && i < js_idx; i++) {
-    const char_code: number = text.charCodeAt(i);
-    // check for surrogate pair
-    if (char_code >= 0xd800 && char_code <= 0xdbff) {
-      const next_char_code: number = text.charCodeAt(i + 1);
-      if (next_char_code >= 0xdc00 && next_char_code <= 0xdfff) {
-        char_idx--;
-        i++;
-      }
-    }
-  }
-  return char_idx;
-};

src/Explorer/Notebook/MonacoEditor/monaco.ts

@@ -1,10 +0,0 @@
-export * from "monaco-editor/esm/vs/editor/editor.api";
-
-// /**
-//  * Set the custom worker url to workaround the cross-domain issue with creating web worker
-//  * See https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-amd-cross.md for more details
-//  * This step has to be executed after a importing of monaco-editor once per chunk to make sure
-//  * the custom worker url overwrites the one from monaco-editor module itself.
-//  */
-// import { setMonacoWorkerUrl } from "./workerUrl";
-// setMonacoWorkerUrl();

src/Explorer/Notebook/MonacoEditor/selectors.ts

@@ -1,67 +0,0 @@
-import { AppState, ContentRef, selectors as nteractSelectors } from "@nteract/core";
-import { CellId } from "@nteract/commutable";
-import { Mode, mapCodeMirrorModeToMonaco } from "./converter";
-
-/**
- * Returns the language to use for syntax highlighting and autocompletion in the Monaco Editor for a given cell, falling back to the notebook language if one for the cell is not defined.
- */
-export const getCellMonacoLanguage = (
-  state: AppState,
-  contentRef: ContentRef,
-  cellId: CellId,
-  cellLanguageOverride?: string,
-  notebookLanguageOverride?: string
-): string => {
-  const model = nteractSelectors.model(state, { contentRef });
-  if (!model || model.type !== "notebook") {
-    throw new Error("Connected Editor components should not be used with non-notebook models");
-  }
-
-  const cell = nteractSelectors.notebook.cellById(model, { id: cellId });
-  if (!cell) {
-    throw new Error("Invalid cell id");
-  }
-
-  switch (cell.cell_type) {
-    case "markdown":
-      return Mode.markdown;
-    case "raw":
-      return Mode.raw;
-    case "code":
-      if (cellLanguageOverride) {
-        return mapCodeMirrorModeToMonaco(cellLanguageOverride);
-      } else {
-        // Fall back to notebook language if cell language isn't present.
-        return getNotebookMonacoLanguage(state, contentRef, notebookLanguageOverride);
-      }
-  }
-};
-
-/**
- * Returns the language to use for syntax highlighting and autocompletion in the Monaco Editor for a given notebook.
- */
-export const getNotebookMonacoLanguage = (
-  state: AppState,
-  contentRef: ContentRef,
-  notebookLanguageOverride?: string
-): string => {
-  const model = nteractSelectors.model(state, { contentRef });
-  if (!model || model.type !== "notebook") {
-    throw new Error("Connected Editor components should not be used with non-notebook models");
-  }
-
-  if (notebookLanguageOverride) {
-    return mapCodeMirrorModeToMonaco(notebookLanguageOverride);
-  }
-
-  const kernelRef = model.kernelRef;
-  let codeMirrorMode;
-  // Try to get the CodeMirror mode from the kernel.
-  if (kernelRef) {
-    codeMirrorMode = nteractSelectors.kernel(state, { kernelRef })?.info?.codemirrorMode;
-  }
-  // As a fallback, get the CodeMirror mode from the notebook itself.
-  codeMirrorMode = codeMirrorMode ?? nteractSelectors.notebook.codeMirrorMode(model);
-
-  return mapCodeMirrorModeToMonaco(codeMirrorMode);
-};

src/Explorer/Notebook/MonacoEditor/styles.css

@@ -1,22 +0,0 @@
-/*
-For the following components, we use the inherited width values from monaco-container.
-On resizing the browser, the width of monaco-container will be calculated
-and we just use the calculated width for the following components
-So we don't need to use Monaco editor's layout() function which is expensive operation and causes performance issues on resizing.
-*/
-/*
-TODO: These styles below are added for resizing perf improvement.
-Once the virtualization is implemented, we will revisit this later.
- */
-.monaco-container .monaco-editor {
-  width: inherit !important;
-}
-
-.monaco-container .monaco-editor .overflow-guard {
-  width: inherit !important;
-}
-
-/* 26px is the left margin for .monaco-scrollable-element  */
-.monaco-container .monaco-editor .monaco-scrollable-element.editor-scrollable.vs {
-  width: calc(100% - 26px) !important;
-}

src/Explorer/Notebook/MonacoEditor/theme.ts

@@ -1,75 +0,0 @@
-import * as monaco from "./monaco";
-
-// TODO: move defineTheme calls to an initialization function
-
-/**
- * The default light theme with customized background
- */
-export const LightThemeName = "vs-light";
-
-/**
- * Default monaco theme for light theme
- */
-export const customMonacoLightTheme: monaco.editor.IStandaloneThemeData = {
-  base: "vs", // Derive from default light theme of Monaco
-  inherit: true,
-  rules: [],
-  colors: {
-    // We want Monaco background to use the same background for our themes.
-    // Without this, the Monaco light theme has a yellowish tone.
-    // Verified with UX that white meets all the accessbility requirements for light
-    // and high contrast light theme.
-    "editor.background": "#FFFFFF"
-  }
-};
-
-monaco.editor.defineTheme(LightThemeName, customMonacoLightTheme);
-
-/**
- * The default dark theme with customized background
- */
-export const DarkThemeName = "aznb-dark";
-
-/**
- * Default monaco theme for dark theme
- */
-export const customMonacoDarkTheme: monaco.editor.IStandaloneThemeData = {
-  base: "vs-dark", // Derive from default dark theme of Monaco
-  inherit: true,
-  rules: [],
-  colors: {
-    "editor.background": "#1b1a19"
-  }
-};
-
-monaco.editor.defineTheme(DarkThemeName, customMonacoDarkTheme);
-
-/**
- * The custom high contrast light theme with customized background
- */
-export const HCLightThemeName = "hc-light";
-
-/**
- * Default monaco theme for light high contrast mode
- */
-export const customMonacoHCLightTheme: monaco.editor.IStandaloneThemeData = {
-  base: "vs", // Derive from default light theme of Monaco; change all grey colors to black to comply with highcontrast rules
-  inherit: true,
-  rules: [
-    { token: "annotation", foreground: "000000" },
-    { token: "delimiter.html", foreground: "000000" },
-    { token: "operator.scss", foreground: "000000" },
-    { token: "operator.sql", foreground: "000000" },
-    { token: "operator.swift", foreground: "000000" },
-    { token: "predefined.sql", foreground: "000000" }
-  ],
-  colors: {
-    // We want Monaco background to use the same background for our themes.
-    // Without this, the Monaco light theme has a yellowish tone.
-    // Verified with UX that white meets all the accessbility requirements for light
-    // and high contrast light theme.
-    "editor.background": "#FFFFFF"
-  }
-};
-
-monaco.editor.defineTheme(HCLightThemeName, customMonacoHCLightTheme);

src/Explorer/Notebook/NotebookClientV2.ts

@@ -32,7 +32,7 @@ import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
 import configureStore from "./NotebookComponent/store";
 
 import { Notification } from "react-notification-system";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -37,7 +37,7 @@ import * as Constants from "../../../Common/Constants";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as CdbActions from "./actions";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action as TelemetryAction } from "../../../Shared/Telemetry/TelemetryConstants";
 import { CdbAppState } from "./types";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";

src/Explorer/Notebook/NotebookComponent/reducers.ts

@@ -1,7 +1,7 @@
 import { actions, CoreRecord, reducers as nteractReducers } from "@nteract/core";
 import { Action } from "redux";
 import { Areas } from "../../../Common/Constants";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as cdbActions from "./actions";
 import { CdbRecord } from "./types";
 

src/Explorer/Notebook/NotebookManager.ts

@@ -9,7 +9,7 @@ import * as Logger from "../../Common/Logger";
 import { HttpStatusCodes, Areas } from "../../Common/Constants";
 import { GitHubReposPane } from "../Panes/GitHubReposPane";
 import ko from "knockout";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { IContentProvider } from "@nteract/core";
 import { NotebookContentProvider } from "./NotebookComponent/NotebookContentProvider";

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -30,7 +30,6 @@ import { CellType } from "@nteract/commutable/src";
 import "./NotebookRenderer.less";
 import HoverableCell from "./decorators/HoverableCell";
 import CellLabeler from "./decorators/CellLabeler";
-import MonacoEditor from "../MonacoEditor/MonacoEditor";
 import * as cdbActions from "../NotebookComponent/actions";
 
 export interface NotebookRendererBaseProps {
@@ -117,12 +116,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                           {{
                             editor: {
                               codemirror: (props: PassedEditorProps) => (
-                                <MonacoEditor
-                                  {...props}
-                                  lineNumbers={true}
-                                  enableCompletion={true}
-                                  shouldRegisterDefaultCompletion={true}
-                                />
+                                <CodeMirrorEditor {...props} lineNumbers={true} />
                               )
                             },
                             prompt: ({ id, contentRef }: { id: CellId; contentRef: ContentRef }) => (

src/Explorer/Panes/AddCollectionPane.html

@@ -25,7 +25,7 @@
                                                                 <!-- Add collection header - Start -->
   <div class="firstdivbg headerline">
       <span id="containerTitle" data-bind="text: title"></span>
-      <div class="closeImg" id="closeBtnAddCollection" role="button" aria-label="Close pane"
+      <div class="closeImg" id="closeBtnAddCollection" role="button" aria-label="Add collection close pane"
           data-bind="click: cancel, event: { keypress: onCloseKeyPress }" tabindex="0">
           <img src="../../../images/close-black.svg" title="Close" alt="Close" />
       </div>

src/Explorer/Panes/AddCollectionPane.ts

@@ -9,18 +9,15 @@ import * as PricingUtils from "../../Utils/PricingUtils";
 import * as SharedConstants from "../../Shared/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
 import editable from "../../Common/EditableUtility";
-import EnvironmentUtility from "../../Common/EnvironmentUtility";
-import Q from "q";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { configContext, Platform } from "../../ConfigContext";
 import { ContextualPaneBase } from "./ContextualPaneBase";
-import { createMongoCollectionWithARM, createMongoCollectionWithProxy } from "../../Common/MongoProxyClient";
 import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
 import { HashMap } from "../../Common/HashMap";
 import { PlatformType } from "../../PlatformType";
-import { refreshCachedResources, getOrCreateDatabaseAndCollection } from "../../Common/DocumentClientUtilityBase";
-import { userContext } from "../../UserContext";
+import { refreshCachedResources } from "../../Common/DocumentClientUtilityBase";
+import { createCollection } from "../../Common/dataAccess/createCollection";
 
 export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
   isPreferredApiTable: ko.Computed<boolean>;
@@ -811,7 +808,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     let databaseId: string = this.databaseCreateNew() ? this.databaseId().trim() : this.databaseId();
     let collectionId: string = this.collectionId().trim();
-    let rupm: boolean = this.rupm() === Constants.RUPMStates.on;
 
     let indexingPolicy: DataModels.IndexingPolicy;
     // todo - remove mongo indexing policy ticket # 616274
@@ -828,130 +824,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
     }
 
     this.formErrors("");
-
     this.isExecuting(true);
 
-    const createRequest: DataModels.CreateDatabaseAndCollectionRequest = {
+    const databaseLevelThroughput: boolean = this.databaseCreateNew()
+      ? this.databaseCreateNewShared()
+      : this.databaseHasSharedOffer() && !this.collectionWithThroughputInShared();
+    const autoPilotMaxThroughput: number = databaseLevelThroughput
+      ? this.isSharedAutoPilotSelected() && this.sharedAutoPilotThroughput()
+      : this.isAutoPilotSelected() && this.autoPilotThroughput();
+    const createCollectionParams: DataModels.CreateCollectionParams = {
+      createNewDatabase: this.databaseCreateNew(),
       collectionId,
       databaseId,
+      databaseLevelThroughput,
       offerThroughput,
-      databaseLevelThroughput: this.databaseHasSharedOffer() && !this.collectionWithThroughputInShared(),
-      rupmEnabled: rupm,
-      partitionKey,
-      indexingPolicy,
-      uniqueKeyPolicy,
-      autoPilot,
       analyticalStorageTtl: this._getAnalyticalStorageTtl(),
-      hasAutoPilotV2FeatureFlag: this.hasAutoPilotV2FeatureFlag()
+      autoPilotMaxThroughput,
+      indexingPolicy,
+      partitionKey,
+      uniqueKeyPolicy
     };
 
-    const options: any = {};
-    if (this.container.isPreferredApiMongoDB()) {
-      options.initialHeaders = options.initialHeaders || {};
-      options.initialHeaders[Constants.HttpHeaders.supportSpatialLegacyCoordinates] = true;
-      options.initialHeaders[Constants.HttpHeaders.usePolygonsSmallerThanAHemisphere] = true;
-    }
-
-    const databaseCreateNew = this.databaseCreateNew();
-    const useDatabaseSharedOffer = this.shouldUseDatabaseThroughput();
-    const isSharded: boolean = !!partitionKeyPath;
-    const autopilotSettings: DataModels.RpOptions = this._getAutopilotSettings();
-
-    let createCollectionFunc: () => Q.Promise<DataModels.Collection | DataModels.CreateCollectionWithRpResponse>;
-
-    if (this.container.isPreferredApiMongoDB()) {
-      const isFixedCollectionWithSharedThroughputBeingCreated =
-        this.container.isFixedCollectionWithSharedThroughputSupported() &&
-        !this.isUnlimitedStorageSelected() &&
-        this.databaseHasSharedOffer();
-      const isAadUser = EnvironmentUtility.isAadUser();
-
-      // note: v3 autopilot not supported yet for Mongo fixed collections (only tier supported)
-      if (!isAadUser || isFixedCollectionWithSharedThroughputBeingCreated) {
-        createCollectionFunc = () =>
-          Q(
-            createMongoCollectionWithProxy(
-              databaseId,
-              collectionId,
-              offerThroughput,
-              partitionKeyPath,
-              databaseCreateNew,
-              useDatabaseSharedOffer,
-              isSharded,
-              autopilotSettings
-            )
-          );
-      } else {
-        createCollectionFunc = () =>
-          Q(
-            createMongoCollectionWithARM(
-              this.container.armEndpoint(),
-              databaseId,
-              this._getAnalyticalStorageTtl(),
-              collectionId,
-              offerThroughput,
-              partitionKeyPath,
-              databaseCreateNew,
-              useDatabaseSharedOffer,
-              isSharded,
-              autopilotSettings
-            )
-          );
-      }
-    } else if (this.container.isPreferredApiTable() && EnvironmentUtility.isAadUser()) {
-      createCollectionFunc = () =>
-        Q(
-          AddCollectionUtility.Utilities.createAzureTableWithARM(
-            this.container.armEndpoint(),
-            createRequest,
-            autopilotSettings
-          )
-        );
-    } else if (this.container.isPreferredApiGraph() && EnvironmentUtility.isAadUser()) {
-      createCollectionFunc = () =>
-        Q(
-          AddCollectionUtility.CreateCollectionUtilities.createGremlinGraph(
-            this.container.armEndpoint(),
-            databaseId,
-            collectionId,
-            indexingPolicy,
-            offerThroughput,
-            partitionKeyPath,
-            partitionKey.version,
-            databaseCreateNew,
-            useDatabaseSharedOffer,
-            userContext.subscriptionId,
-            userContext.resourceGroup,
-            userContext.databaseAccount.name,
-            autopilotSettings
-          )
-        );
-    } else if (this.container.isPreferredApiDocumentDB() && EnvironmentUtility.isAadUser()) {
-      createCollectionFunc = () =>
-        Q(
-          AddCollectionUtility.CreateSqlCollectionUtilities.createSqlCollection(
-            this.container.armEndpoint(),
-            databaseId,
-            this._getAnalyticalStorageTtl(),
-            collectionId,
-            indexingPolicy,
-            offerThroughput,
-            partitionKeyPath,
-            partitionKey.version,
-            databaseCreateNew,
-            useDatabaseSharedOffer,
-            userContext.subscriptionId,
-            userContext.resourceGroup,
-            userContext.databaseAccount.name,
-            uniqueKeyPolicy,
-            autopilotSettings
-          )
-        );
-    } else {
-      createCollectionFunc = () => getOrCreateDatabaseAndCollection(createRequest, options);
-    }
-
-    createCollectionFunc().then(
+    createCollection(createCollectionParams).then(
       () => {
         this.isExecuting(false);
         this.close();
@@ -1049,7 +943,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     const defaultThroughput = this.container.collectionCreationDefaults.throughput;
     this.throughputSinglePartition(defaultThroughput.fixed);
     this.throughputMultiPartition(
-      AddCollectionUtility.Utilities.getMaxThroughput(this.container.collectionCreationDefaults, this.container)
+      AddCollectionUtility.getMaxThroughput(this.container.collectionCreationDefaults, this.container)
     );
 
     this.throughputDatabase(defaultThroughput.shared);
@@ -1234,35 +1128,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     return undefined;
   }
-  private _getAutopilotSettings(): DataModels.RpOptions {
-    if (
-      (!this.hasAutoPilotV2FeatureFlag() &&
-        this.databaseCreateNewShared() &&
-        this.isSharedAutoPilotSelected() &&
-        this.sharedAutoPilotThroughput()) ||
-      (this.hasAutoPilotV2FeatureFlag() &&
-        this.databaseCreateNewShared() &&
-        this.isSharedAutoPilotSelected() &&
-        this.selectedSharedAutoPilotTier())
-    ) {
-      return !this.hasAutoPilotV2FeatureFlag()
-        ? {
-            [Constants.HttpHeaders.autoPilotThroughput]: { maxThroughput: this.sharedAutoPilotThroughput() * 1 }
-          }
-        : { [Constants.HttpHeaders.autoPilotTier]: this.selectedSharedAutoPilotTier().toString() };
-    }
-    if (
-      (!this.hasAutoPilotV2FeatureFlag() && this.isAutoPilotSelected() && this.autoPilotThroughput()) ||
-      (this.hasAutoPilotV2FeatureFlag() && this.isAutoPilotSelected() && this.selectedAutoPilotTier())
-    ) {
-      return !this.hasAutoPilotV2FeatureFlag()
-        ? {
-            [Constants.HttpHeaders.autoPilotThroughput]: { maxThroughput: this.autoPilotThroughput() * 1 }
-          }
-        : { [Constants.HttpHeaders.autoPilotTier]: this.selectedAutoPilotTier().toString() };
-    }
-    return undefined;
-  }
 
   private _calculateNumberOfPartitions(): number {
     // Note: this will not validate properly on accounts that have been set up for custom partitioning,
@@ -1302,17 +1167,19 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
   private _updateThroughputLimitByCollectionStorage() {
     const storage = this.storage();
-    const minThroughputRU = AddCollectionUtility.Utilities.getMinRUForStorageOption(
-      this.container.collectionCreationDefaults,
-      storage
-    );
+    const minThroughputRU =
+      storage === SharedConstants.CollectionCreation.storage10Gb
+        ? SharedConstants.CollectionCreation.DefaultCollectionRUs400
+        : this.container.collectionCreationDefaults.throughput.unlimitedmin;
 
-    let maxThroughputRU = AddCollectionUtility.Utilities.getMaxRUForStorageOption(
-      this.container.collectionCreationDefaults,
-      storage
-    );
+    let maxThroughputRU;
     if (this.isTryCosmosDBSubscription()) {
       maxThroughputRU = Constants.TryCosmosExperience.maxRU;
+    } else {
+      maxThroughputRU =
+        storage === SharedConstants.CollectionCreation.storage10Gb
+          ? SharedConstants.CollectionCreation.DefaultCollectionRUs10K
+          : this.container.collectionCreationDefaults.throughput.unlimitedmax;
     }
 
     this.minThroughputRU(minThroughputRU);

src/Explorer/Panes/AddDatabasePane.ts

@@ -1,4 +1,3 @@
-import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
 import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
@@ -8,15 +7,11 @@ import * as PricingUtils from "../../Utils/PricingUtils";
 import * as SharedConstants from "../../Shared/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
 import editable from "../../Common/EditableUtility";
-import EnvironmentUtility from "../../Common/EnvironmentUtility";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { AddDbUtilities } from "../../Shared/AddDatabaseUtility";
-import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { createDatabase } from "../../Common/dataAccess/createDatabase";
 import { PlatformType } from "../../PlatformType";
-import { userContext } from "../../UserContext";
 
 export default class AddDatabasePane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;

src/Explorer/Panes/BrowseQueriesPane.ts

@@ -5,7 +5,7 @@ import { Areas } from "../../Common/Constants";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import * as Logger from "../../Common/Logger";
 import { QueriesGridComponentAdapter } from "../Controls/QueriesGridReactComponent/QueriesGridComponentAdapter";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import QueryTab from "../Tabs/QueryTab";
 
 export class BrowseQueriesPane extends ContextualPaneBase {

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -7,7 +7,7 @@ import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
 import * as SharedConstants from "../../Shared/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 import { ContextualPaneBase } from "./ContextualPaneBase";
@@ -494,9 +494,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
     this.selectedSharedAutoPilotTier(null);
     this.selectedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
     this.sharedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
-    this.throughput(
-      AddCollectionUtility.Utilities.getMaxThroughput(this.container.collectionCreationDefaults, this.container)
-    );
+    this.throughput(AddCollectionUtility.getMaxThroughput(this.container.collectionCreationDefaults, this.container));
     this.keyspaceThroughput(throughputDefaults.shared);
     this.maxThroughputRU(throughputDefaults.unlimitedmax);
     this.minThroughputRU(throughputDefaults.unlimitedmin);

src/Explorer/Panes/ContextualPaneBase.ts

@@ -4,7 +4,7 @@ import * as Constants from "../../Common/Constants";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { KeyCodes } from "../../Common/Constants";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Explorer from "../Explorer";
 
 // TODO: Use specific actions for logging telemetry data

src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts

@@ -8,7 +8,7 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import DeleteCollectionConfirmationPane from "./DeleteCollectionConfirmationPane";
 import DeleteFeedback from "../../Common/DeleteFeedback";
 import Explorer from "../Explorer";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { TreeNode } from "../../Contracts/ViewModels";
 import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
 

src/Explorer/Panes/DeleteCollectionConfirmationPane.ts

@@ -10,7 +10,7 @@ import { ContextualPaneBase } from "./ContextualPaneBase";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
 import DeleteFeedback from "../../Common/DeleteFeedback";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
 
 export default class DeleteCollectionConfirmationPane extends ContextualPaneBase {

src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts

@@ -8,7 +8,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import DeleteDatabaseConfirmationPane from "./DeleteDatabaseConfirmationPane";
 import DeleteFeedback from "../../Common/DeleteFeedback";
 import Explorer from "../Explorer";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { TreeNode } from "../../Contracts/ViewModels";
 import { TabsManager } from "../Tabs/TabsManager";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

@@ -11,7 +11,7 @@ import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility"
 import DeleteFeedback from "../../Common/DeleteFeedback";
 
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
 
 export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {

src/Explorer/Panes/GitHubReposPane.ts

@@ -5,7 +5,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { GitHubClient, IGitHubPageInfo, IGitHubRepo } from "../../GitHub/GitHubClient";
 import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { JunoUtils } from "../../Utils/JunoUtils";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";

src/Explorer/Panes/SaveQueryPane.ts

@@ -6,7 +6,7 @@ import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import QueryTab from "../Tabs/QueryTab";
 
 export class SaveQueryPane extends ContextualPaneBase {

src/Explorer/Panes/SetupNotebooksPane.ts

@@ -4,7 +4,7 @@ import { Areas, KeyCodes } from "../../Common/Constants";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as ko from "knockout";
 
 export class SetupNotebooksPane extends ContextualPaneBase {

src/Explorer/Panes/SwitchDirectoryPane.ts

@@ -5,7 +5,7 @@ import { DirectoryListProps } from "../Controls/Directory/DirectoryListComponent
 import { DefaultDirectoryDropdownProps } from "../Controls/Directory/DefaultDirectoryDropdownComponent";
 import { DirectoryComponentAdapter } from "../Controls/Directory/DirectoryComponentAdapter";
 import SwitchDirectoryPaneTemplate from "./SwitchDirectoryPane.html";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 
 class PaneComponent {
   constructor(data: any) {

src/Explorer/SplashScreen/SplashScreenComponent.tsx

@@ -45,7 +45,7 @@ export class SplashScreenComponent extends React.Component<SplashScreenComponent
                 tabIndex={0}
                 role="button"
               >
-                <img src={item.iconSrc} alt={item.title} />
+                <img src={item.iconSrc} alt="" />
                 <div className="legendContainer">
                   <div className="legend">{item.title}</div>
                   <div className="description">{item.description}</div>
@@ -66,7 +66,7 @@ export class SplashScreenComponent extends React.Component<SplashScreenComponent
                     tabIndex={0}
                     role="button"
                   >
-                    <img src={item.iconSrc} alt={item.title} />
+                    <img src={item.iconSrc} alt="" />
                     <span className="oneLineContent" title={item.info}>
                       {item.title}
                     </span>
@@ -79,7 +79,7 @@ export class SplashScreenComponent extends React.Component<SplashScreenComponent
               <ul>
                 {this.props.recentItems.map((item: SplashScreenItem, index: number) => (
                   <li key={`${item.title}${item.description}${index}`}>
-                    <img src={item.iconSrc} alt={item.title} />
+                    <img src={item.iconSrc} alt="" />
                     <span className="twoLineContent">
                       <Link onClick={item.onClick} title={item.info}>
                         {item.title}

src/Explorer/Tables/DataTable/DataTableViewModel.ts

@@ -7,7 +7,7 @@ import * as CommonConstants from "../../../Common/Constants";
 import * as Constants from "../Constants";
 import * as Entities from "../Entities";
 import QueryTablesTab from "../../Tabs/QueryTablesTab";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 
 // This is the format of the data we will have to pass to Datatable render callback,

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -15,7 +15,7 @@ import * as Utilities from "../Utilities";
 import * as Entities from "../Entities";
 import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import * as TableEntityProcessor from "../TableEntityProcessor";
-import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as ErrorParserUtility from "../../../Common/ErrorParserUtility";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";

src/Explorer/Tabs/ConflictsTab.ts

@@ -13,7 +13,7 @@ import * as HeadersUtility from "../../Common/HeadersUtility";
 import TabsBase from "./TabsBase";
 import { DocumentsGridMetrics } from "../../Common/Constants";
 import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import DiscardIcon from "../../../images/discard.svg";
 import DeleteIcon from "../../../images/delete.svg";

src/Explorer/Tabs/DatabaseSettingsTab.ts

@@ -11,7 +11,7 @@ import editable from "../../Common/EditableUtility";
 import Q from "q";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import TabsBase from "./TabsBase";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import { PlatformType } from "../../PlatformType";
 import { RequestOptions } from "@azure/cosmos/dist-esm";

src/Explorer/Tabs/DocumentsTab.ts

@@ -14,7 +14,7 @@ import TabsBase from "./TabsBase";
 import { DocumentsGridMetrics } from "../../Common/Constants";
 import { QueryUtils } from "../../Utils/QueryUtils";
 import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import NewDocumentIcon from "../../../images/NewDocument.svg";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import DiscardIcon from "../../../images/discard.svg";

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -8,7 +8,7 @@ import * as ErrorParserUtility from "../../Common/ErrorParserUtility";
 import MongoUtility from "../../Common/MongoUtility";
 import ObjectId from "../Tree/ObjectId";
 import Q from "q";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import {
   createDocument,

src/Explorer/Tabs/MongoShellTab.ts

@@ -6,7 +6,7 @@ import EnvironmentUtility from "../../Common/EnvironmentUtility";
 import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
 import Q from "q";
 import TabsBase from "./TabsBase";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { HashMap } from "../../Common/HashMap";

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -17,7 +17,7 @@ import SaveIcon from "../../../images/save-cosmos.svg";
 import ClearAllOutputsIcon from "../../../images/notebook/Notebook-clear-all-outputs.svg";
 import InterruptKernelIcon from "../../../images/notebook/Notebook-stop.svg";
 import KillKernelIcon from "../../../images/notebook/Notebook-stop.svg";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { Areas, ArmApiVersions } from "../../Common/Constants";
 import { CommandBarComponentButtonFactory } from "../Menus/CommandBar/CommandBarComponentButtonFactory";

src/Explorer/Tabs/QueryTab.ts

@@ -10,7 +10,7 @@ import { HashMap } from "../../Common/HashMap";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import * as Logger from "../../Common/Logger";
 import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import { QueryUtils } from "../../Utils/QueryUtils";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";

src/Explorer/Tabs/QueryTabV2.html

@@ -0,0 +1 @@
+<div style="height: 100%" data-bind="react:queryComponentAdapter"></div>

src/Explorer/Tabs/QueryTabV2.tsx

@@ -0,0 +1,17 @@
+import * as ViewModels from "../../Contracts/ViewModels";
+import TabsBase from "./TabsBase";
+import { QueryComponentAdapter } from "../Controls/Query/QueryComponentAdapter"
+import { QueryComponentProps } from "../Controls/Query/QueryComponent";
+
+export default class QueryTabV2 extends TabsBase {
+  public queryComponentAdapter: QueryComponentAdapter;
+
+  constructor(options: ViewModels.QueryTabOptions) {
+    super(options);
+    
+    const props: QueryComponentProps = {
+      queryTab: this
+    };
+    this.queryComponentAdapter = new QueryComponentAdapter(props);
+  }
+}

src/Explorer/Tabs/SettingsTab.ts

@@ -12,7 +12,7 @@ import editable from "../../Common/EditableUtility";
 import Q from "q";
 import SaveIcon from "../../../images/save-cosmos.svg";
 import TabsBase from "./TabsBase";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import { PlatformType } from "../../PlatformType";
 import { RequestOptions } from "@azure/cosmos/dist-esm";

src/Explorer/Tabs/StoredProcedureTab.ts

@@ -7,7 +7,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import editable from "../../Common/EditableUtility";
 import ScriptTabBase from "./ScriptTabBase";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import StoredProcedure from "../Tree/StoredProcedure";
 import { createStoredProcedure, updateStoredProcedure } from "../../Common/DocumentClientUtilityBase";

src/Explorer/Tabs/TabComponents.ts

@@ -17,6 +17,7 @@ import UserDefinedFunctionTabTemplate from "./UserDefinedFunctionTab.html";
 import GalleryTabTemplate from "./GalleryTab.html";
 import NotebookViewerTabTemplate from "./NotebookViewerTab.html";
 import TabsManagerTemplate from "./TabsManager.html";
+import QueryTabV2Template from "./QueryTabV2.html";
 
 export class TabComponent {
   constructor(data: any) {
@@ -123,6 +124,15 @@ export class QueryTab {
   }
 }
 
+export class QueryTabV2 {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: QueryTabV2Template
+    };
+  }
+}
+
 export class QueryTablesTab {
   constructor() {
     return {

src/Explorer/Tabs/TabsBase.ts

@@ -5,7 +5,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { RouteHandler } from "../../RouteHandlers/RouteHandler";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import ThemeUtility from "../../Common/ThemeUtility";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";

src/Explorer/Tabs/TabsManager.html

@@ -141,6 +141,11 @@
       <!-- ko if: $data.tabKind === 18 -->
       <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
       <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 19 -->
+      <query-tab-v2 params="{data: $data}"></query-tab-v2>
+      <!-- /ko -->
+      
     </div>
     <!-- /ko -->
   </div>

src/Explorer/Tabs/TriggerTab.ts

@@ -5,7 +5,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import ScriptTabBase from "./ScriptTabBase";
 import editable from "../../Common/EditableUtility";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Trigger from "../Tree/Trigger";
 import { createTrigger, updateTrigger } from "../../Common/DocumentClientUtilityBase";
 

src/Explorer/Tabs/UserDefinedFunctionTab.ts

@@ -4,7 +4,7 @@ import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import ScriptTabBase from "./ScriptTabBase";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import UserDefinedFunction from "../Tree/UserDefinedFunction";
 import { createUserDefinedFunction, updateUserDefinedFunction } from "../../Common/DocumentClientUtilityBase";
 

src/Explorer/Tree/Collection.ts

@@ -9,7 +9,7 @@ import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { PlatformType } from "../../PlatformType";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { OfferUtils } from "../../Utils/OfferUtils";
 import { StartUploadMessageParams, UploadDetails, UploadDetailsRecord } from "../../workers/upload/definitions";
@@ -42,6 +42,8 @@ import {
   readOffers
 } from "../../Common/DocumentClientUtilityBase";
 import { userContext } from "../../UserContext";
+import TabsBase from "../Tabs/TabsBase";
+import QueryTabV2 from "../Tabs/QueryTabV2";
 
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
@@ -729,8 +731,9 @@ export default class Collection implements ViewModels.Collection {
   }
 
   public onNewQueryClick(source: any, event: MouseEvent, queryText?: string) {
+    const queryTabType = this.container.isQueryTabV2Enabled ? ViewModels.CollectionTabKind.QueryV2 : ViewModels.CollectionTabKind.Query 
     const collection: ViewModels.Collection = source.collection || source;
-    const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
+    const id = this.container.tabsManager.getTabs(queryTabType).length + 1;
     const title = "Query " + id;
     const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
       databaseAccountName: this.container.databaseAccount().name,
@@ -741,8 +744,8 @@ export default class Collection implements ViewModels.Collection {
       tabTitle: title
     });
 
-    const queryTab: QueryTab = new QueryTab({
-      tabKind: ViewModels.CollectionTabKind.Query,
+    const queryTabProps : ViewModels.QueryTabOptions = {
+      tabKind: queryTabType,
       title: title,
       tabPath: "",
       collection: this,
@@ -754,7 +757,9 @@ export default class Collection implements ViewModels.Collection {
       partitionKey: collection.partitionKey,
       onLoadStartKey: startKey,
       onUpdateTabsButtons: this.container.onUpdateTabsButtons
-    });
+    }
+
+    const queryTab = this.container.isQueryTabV2Enabled ? new QueryTab(queryTabProps) : new QueryTabV2(queryTabProps)
 
     this.container.tabsManager.activateNewTab(queryTab);
   }

src/Explorer/Tree/Database.ts

@@ -7,7 +7,7 @@ import * as DataModels from "../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import DatabaseSettingsTab from "../Tabs/DatabaseSettingsTab";
 import Collection from "./Collection";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as Logger from "../../Common/Logger";

src/Explorer/Tree/ResourceTokenCollection.ts

@@ -7,7 +7,7 @@ import DocumentId from "./DocumentId";
 import DocumentsTab from "../Tabs/DocumentsTab";
 import Q from "q";
 import QueryTab from "../Tabs/QueryTab";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Explorer from "../Explorer";
 import TabsBase from "../Tabs/TabsBase";
 

src/Explorer/Tree/ResourceTreeAdapter.test.ts

@@ -0,0 +1,112 @@
+import Explorer from "../Explorer";
+import * as ko from "knockout";
+import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
+import * as ViewModels from "../../Contracts/ViewModels";
+import TabsBase from "../Tabs/TabsBase";
+
+describe("ResourceTreeAdapter", () => {
+  const mockContainer = (): Explorer =>
+    (({
+      selectedNode: ko.observable<ViewModels.TreeNode>({
+        nodeKind: "nodeKind",
+        rid: "rid",
+        id: ko.observable<string>("id")
+      }),
+      tabsManager: {
+        activeTab: ko.observable<TabsBase>({
+          tabKind: ViewModels.CollectionTabKind.Documents
+        } as TabsBase)
+      },
+      isNotebookEnabled: ko.observable<boolean>(true),
+      nonSystemDatabases: ko.observable<ViewModels.Database[]>([])
+    } as unknown) as Explorer);
+
+  // TODO isDataNodeSelected needs a better design and refactor, but for now, we protect some of the code paths
+  describe("isDataNodeSelected", () => {
+    it("it should not select if no selected node", () => {
+      const explorer = mockContainer();
+      explorer.selectedNode(undefined);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
+      expect(isDataNodeSelected).toBeFalsy();
+    });
+
+    it("it should not select incorrect subnodekinds", () => {
+      const resourceTreeAdapter = new ResourceTreeAdapter(mockContainer());
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
+      expect(isDataNodeSelected).toBeFalsy();
+    });
+
+    it("it should not select if no active tab", () => {
+      const explorer = mockContainer();
+      explorer.tabsManager.activeTab(undefined);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
+      expect(isDataNodeSelected).toBeFalsy();
+    });
+
+    it("should select if correct database node regardless of subnodekinds", () => {
+      const subNodeKind = ViewModels.CollectionTabKind.Documents;
+      const explorer = mockContainer();
+      explorer.selectedNode(({
+        nodeKind: "Database",
+        rid: "dbrid",
+        id: ko.observable<string>("id"),
+        selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind)
+      } as unknown) as ViewModels.TreeNode);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbrid", "Database", [
+        ViewModels.CollectionTabKind.Documents
+      ]);
+      expect(isDataNodeSelected).toBeTruthy();
+    });
+
+    it("should select correct collection node (documents or graph node)", () => {
+      let subNodeKind = ViewModels.CollectionTabKind.Documents;
+      const explorer = mockContainer();
+      explorer.tabsManager.activeTab({
+        tabKind: subNodeKind
+      } as TabsBase);
+      explorer.selectedNode(({
+        nodeKind: "Collection",
+        rid: "collrid",
+        id: ko.observable<string>("id"),
+        selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind)
+      } as unknown) as ViewModels.TreeNode);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      let isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("collrid", "Collection", [subNodeKind]);
+      expect(isDataNodeSelected).toBeTruthy();
+
+      subNodeKind = ViewModels.CollectionTabKind.Graph;
+      explorer.tabsManager.activeTab({
+        tabKind: subNodeKind
+      } as TabsBase);
+      explorer.selectedNode(({
+        nodeKind: "Collection",
+        rid: "collrid",
+        id: ko.observable<string>("id"),
+        selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind)
+      } as unknown) as ViewModels.TreeNode);
+      isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("collrid", "Collection", [subNodeKind]);
+      expect(isDataNodeSelected).toBeTruthy();
+    });
+
+    it("should not select incorrect collection node (e.g. Settings)", () => {
+      const explorer = mockContainer();
+      explorer.selectedNode(({
+        nodeKind: "Collection",
+        rid: "collrid",
+        id: ko.observable<string>("id"),
+        selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(ViewModels.CollectionTabKind.Documents)
+      } as unknown) as ViewModels.TreeNode);
+      explorer.tabsManager.activeTab({
+        tabKind: ViewModels.CollectionTabKind.Documents
+      } as TabsBase);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("collrid", "Collection", [
+        ViewModels.CollectionTabKind.Settings
+      ]);
+      expect(isDataNodeSelected).toBeFalsy();
+    });
+  });
+});

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -19,7 +19,7 @@ import { ArrayHashMap } from "../../Common/ArrayHashMap";
 import { NotebookUtil } from "../Notebook/NotebookUtil";
 import _ from "underscore";
 import { IPinnedRepo } from "../../Juno/JunoClient";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { Areas } from "../../Common/Constants";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
@@ -191,7 +191,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         databaseNode.children.push({
           label: "Scale",
           isSelected: () =>
-            this.isDataNodeSelected(database.rid, "Database", ViewModels.CollectionTabKind.DatabaseSettings),
+            this.isDataNodeSelected(database.rid, "Database", [ViewModels.CollectionTabKind.DatabaseSettings]),
           onClick: database.onSettingsClick.bind(database)
         });
       }
@@ -235,14 +235,18 @@ export class ResourceTreeAdapter implements ReactAdapter {
           data: collection.rid
         });
       },
-      isSelected: () => this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.Documents),
+      isSelected: () =>
+        this.isDataNodeSelected(collection.rid, "Collection", [
+          ViewModels.CollectionTabKind.Documents,
+          ViewModels.CollectionTabKind.Graph
+        ]),
       contextMenu: ResourceTreeContextMenuButtonFactory.createCollectionContextMenuButton(this.container, collection)
     });
 
     children.push({
       label: database.isDatabaseShared() || this.container.isServerlessEnabled() ? "Settings" : "Scale & Settings",
       onClick: collection.onSettingsClick.bind(collection),
-      isSelected: () => this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.Settings)
+      isSelected: () => this.isDataNodeSelected(collection.rid, "Collection", [ViewModels.CollectionTabKind.Settings])
     });
 
     if (ResourceTreeAdapter.showScriptNodes(this.container)) {
@@ -264,7 +268,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
       children.push({
         label: "Conflicts",
         onClick: collection.onConflictsClick.bind(collection),
-        isSelected: () => this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.Conflicts)
+        isSelected: () =>
+          this.isDataNodeSelected(collection.rid, "Collection", [ViewModels.CollectionTabKind.Conflicts])
       });
     }
 
@@ -302,7 +307,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         label: sp.id(),
         onClick: sp.open.bind(sp),
         isSelected: () =>
-          this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.StoredProcedures),
+          this.isDataNodeSelected(collection.rid, "Collection", [ViewModels.CollectionTabKind.StoredProcedures]),
         contextMenu: ResourceTreeContextMenuButtonFactory.createStoreProcedureContextMenuItems(this.container, sp)
       })),
       onClick: () => {
@@ -321,7 +326,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
         label: udf.id(),
         onClick: udf.open.bind(udf),
         isSelected: () =>
-          this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.UserDefinedFunctions),
+          this.isDataNodeSelected(collection.rid, "Collection", [ViewModels.CollectionTabKind.UserDefinedFunctions]),
         contextMenu: ResourceTreeContextMenuButtonFactory.createUserDefinedFunctionContextMenuItems(this.container, udf)
       })),
       onClick: () => {
@@ -339,7 +344,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
       children: collection.triggers().map((trigger: Trigger) => ({
         label: trigger.id(),
         onClick: trigger.open.bind(trigger),
-        isSelected: () => this.isDataNodeSelected(collection.rid, "Collection", ViewModels.CollectionTabKind.Triggers),
+        isSelected: () =>
+          this.isDataNodeSelected(collection.rid, "Collection", [ViewModels.CollectionTabKind.Triggers]),
         contextMenu: ResourceTreeContextMenuButtonFactory.createTriggerContextMenuItems(this.container, trigger)
       })),
       onClick: () => {
@@ -697,13 +703,19 @@ export class ResourceTreeAdapter implements ReactAdapter {
     window.requestAnimationFrame(() => this.parameters(Date.now()));
   }
 
-  private isDataNodeSelected(rid: string, nodeKind: string, subnodeKind: ViewModels.CollectionTabKind): boolean {
+  /**
+   * public for testing purposes
+   * @param rid
+   * @param nodeKind
+   * @param subnodeKinds
+   */
+  public isDataNodeSelected(rid: string, nodeKind: string, subnodeKinds: ViewModels.CollectionTabKind[]): boolean {
     if (!this.container.selectedNode || !this.container.selectedNode()) {
       return false;
     }
     const selectedNode = this.container.selectedNode();
 
-    if (subnodeKind === undefined) {
+    if (subnodeKinds === undefined || !Array.isArray(subnodeKinds)) {
       return selectedNode.rid === rid && selectedNode.nodeKind === nodeKind;
     } else {
       const activeTab = this.container.tabsManager.activeTab();
@@ -716,10 +728,10 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
       return (
         activeTab &&
-        activeTab.tabKind === subnodeKind &&
+        subnodeKinds.includes(activeTab.tabKind) &&
         selectedNode.rid === rid &&
         selectedSubnodeKind !== undefined &&
-        selectedSubnodeKind === subnodeKind
+        subnodeKinds.includes(selectedSubnodeKind)
       );
     }
   }

src/Explorer/Tree/StoredProcedure.ts

@@ -5,7 +5,7 @@ import * as DataModels from "../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 
 import StoredProcedureTab from "../Tabs/StoredProcedureTab";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Explorer from "../Explorer";
 import { deleteStoredProcedure, executeStoredProcedure } from "../../Common/DocumentClientUtilityBase";
 import TabsBase from "../Tabs/TabsBase";

src/Explorer/Tree/Trigger.ts

@@ -4,7 +4,7 @@ import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import TriggerTab from "../Tabs/TriggerTab";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Explorer from "../Explorer";
 import { deleteTrigger } from "../../Common/DocumentClientUtilityBase";
 

src/Explorer/Tree/UserDefinedFunction.ts

@@ -4,7 +4,7 @@ import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import UserDefinedFunctionTab from "../Tabs/UserDefinedFunctionTab";
-import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Explorer from "../Explorer";
 import { deleteUserDefinedFunction } from "../../Common/DocumentClientUtilityBase";
 

src/HostedExplorer.ts

@@ -29,7 +29,7 @@ import { MeControlComponentAdapter } from "./Explorer/Menus/NavBar/MeControlComp
 import { MessageTypes } from "./Contracts/ExplorerContracts";
 import * as ReactBindingHandler from "./Bindings/ReactBindingHandler";
 import { SwitchDirectoryPane, SwitchDirectoryPaneComponent } from "./Explorer/Panes/SwitchDirectoryPane";
-import TelemetryProcessor from "./Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "./Shared/Telemetry/TelemetryProcessor";
 import { isInvalidParentFrameOrigin } from "./Utils/MessageValidation";
 import "../less/hostedexplorer.less";
 import "./Explorer/Menus/NavBar/MeControlComponent.less";

src/Main.ts

@@ -60,7 +60,7 @@ import "url-polyfill/url-polyfill.min";
 // import "./ReactDevTools"
 
 import * as ko from "knockout";
-import TelemetryProcessor from "./Shared/Telemetry/TelemetryProcessor";
+import * as TelemetryProcessor from "./Shared/Telemetry/TelemetryProcessor";
 import * as ViewModels from "./Contracts/ViewModels";
 import { Action, ActionModifiers } from "./Shared/Telemetry/TelemetryConstants";
 

src/Shared/AddCollectionUtility.test.ts

@@ -1,162 +1,64 @@
-import * as SharedConstants from "../Shared/Constants";
-import { AddDbUtilities } from "../Shared/AddDatabaseUtility";
-import { CreateCollectionUtilities, CreateSqlCollectionUtilities, Utilities } from "./AddCollectionUtility";
-jest.mock("AddDatabaseUtility");
+import * as ko from "knockout";
+import { Collection, Database } from "../Contracts/ViewModels";
+import { getMaxThroughput } from "./AddCollectionUtility";
+import Explorer from "../Explorer/Explorer";
 
-const armEndpoint = "https://management.azure.com";
+describe("getMaxThroughput", () => {
+  it("default unlimited throughput setting", () => {
+    const defaults = {
+      storage: "100",
+      throughput: {
+        fixed: 400,
+        unlimited: 400,
+        unlimitedmax: 1000000,
+        unlimitedmin: 400,
+        shared: 400
+      }
+    };
 
-describe("Add Collection Utitlity", () => {
-  describe("createSqlCollection", () => {
-    it("should invoke createSqlCollectionWithARM if create database is false", () => {
-      const properties = {
-        uniqueKeyPolicy: { uniqueKeys: [{ paths: [""] }] },
-        cd: false,
-        coll: "abc-collection",
-        db: "a1-db",
-        dba: "main",
-        offerThroughput: 50000,
-        pk: "state",
-        sid: "a1",
-        rg: "b1",
-        st: true,
-        defaultTtl: -1,
-        indexingPolicy: SharedConstants.IndexingPolicies.AllPropertiesIndexed,
-        partitionKeyVersion: 2
-      };
-      const additionalOptions = {};
-      const createSqlCollectionWithARMSpy = jest.spyOn(CreateSqlCollectionUtilities, "createSqlCollectionWithARM");
-      CreateSqlCollectionUtilities.createSqlCollection(
-        armEndpoint,
-        properties.db,
-        properties.defaultTtl,
-        properties.coll,
-        properties.indexingPolicy,
-        properties.offerThroughput,
-        properties.pk,
-        properties.partitionKeyVersion,
-        properties.cd,
-        properties.st,
-        properties.sid,
-        properties.rg,
-        properties.dba,
-        properties.uniqueKeyPolicy,
-        additionalOptions
+    expect(getMaxThroughput(defaults, {} as Explorer)).toEqual(defaults.throughput.unlimited);
+  });
+
+  describe("no unlimited throughput setting", () => {
+    const defaults = {
+      storage: "100",
+      throughput: {
+        fixed: 400,
+        unlimited: {
+          collectionThreshold: 3,
+          lessThanOrEqualToThreshold: 400,
+          greatThanThreshold: 500
+        },
+        unlimitedmax: 1000000,
+        unlimitedmin: 400,
+        shared: 400
+      }
+    };
+
+    const mockCollection1 = { id: ko.observable("collection1") } as Collection;
+    const mockCollection2 = { id: ko.observable("collection2") } as Collection;
+    const mockCollection3 = { id: ko.observable("collection3") } as Collection;
+    const mockCollection4 = { id: ko.observable("collection4") } as Collection;
+    const mockDatabase = {} as Database;
+    const mockContainer = {
+      databases: ko.observableArray([mockDatabase])
+    } as Explorer;
+
+    it("less than or equal to collection threshold", () => {
+      mockDatabase.collections = ko.observableArray([mockCollection1, mockCollection2]);
+      expect(getMaxThroughput(defaults, mockContainer)).toEqual(
+        defaults.throughput.unlimited.lessThanOrEqualToThreshold
       );
-      expect(createSqlCollectionWithARMSpy).toHaveBeenCalled();
     });
 
-    it("should invoke createSqlDatabase + createSqlCollectionWithARM if create database is true", () => {
-      const properties = {
-        uniqueKeyPolicy: { uniqueKeys: [{ paths: [""] }] },
-        cd: true,
-        coll: "abc-collection",
-        db: "a1-db",
-        dba: "main",
-        offerThroughput: 50000,
-        pk: "state",
-        sid: "a1",
-        rg: "b1",
-        st: true,
-        analyticalStorageTtl: -1,
-        indexingPolicy: SharedConstants.IndexingPolicies.AllPropertiesIndexed,
-        partitionKeyVersion: 2
-      };
-      const additionalOptions = {};
-      const createSqlCollectionWithARMSpy = jest.spyOn(CreateSqlCollectionUtilities, "createSqlCollectionWithARM");
-      const createSqlDatabaseSpy = jest.spyOn(AddDbUtilities, "createSqlDatabase");
-      CreateSqlCollectionUtilities.createSqlCollection(
-        armEndpoint,
-        properties.db,
-        properties.analyticalStorageTtl,
-        properties.coll,
-        properties.indexingPolicy,
-        properties.offerThroughput,
-        properties.pk,
-        properties.partitionKeyVersion,
-        properties.cd,
-        properties.st,
-        properties.sid,
-        properties.rg,
-        properties.dba,
-        properties.uniqueKeyPolicy,
-        additionalOptions
-      );
-      expect(createSqlCollectionWithARMSpy).toHaveBeenCalled();
-      expect(createSqlDatabaseSpy).toHaveBeenCalled();
-    });
-  });
-});
-
-describe("Add Collection Utitlity", () => {
-  describe("createGremlinGraph", () => {
-    it("should invoke createGremlinGraphWithARM if create database is false", () => {
-      const properties = {
-        cd: false,
-        coll: "abc-collection",
-        db: "a1-db",
-        dba: "main",
-        offerThroughput: 50000,
-        pk: "state",
-        sid: "a1",
-        rg: "b1",
-        st: true,
-        indexingPolicy: SharedConstants.IndexingPolicies.AllPropertiesIndexed,
-        partitionKeyVersion: 2
-      };
-      const additionalOptions = {};
-      const createGremlinGraphWithARMSpy = jest.spyOn(CreateCollectionUtilities, "createGremlinGraphWithARM");
-      CreateCollectionUtilities.createGremlinGraph(
-        armEndpoint,
-        properties.db,
-        properties.coll,
-        properties.indexingPolicy,
-        properties.offerThroughput,
-        properties.pk,
-        properties.partitionKeyVersion,
-        properties.cd,
-        properties.st,
-        properties.sid,
-        properties.rg,
-        properties.dba,
-        additionalOptions
-      );
-      expect(createGremlinGraphWithARMSpy).toHaveBeenCalled();
-    });
-
-    it("should invoke createGremlinDatabase + createGremlinGraphWithARM if create database is true", () => {
-      const properties = {
-        cd: true,
-        coll: "abc-collection",
-        db: "a1-db",
-        dba: "main",
-        offerThroughput: 50000,
-        pk: "state",
-        sid: "a1",
-        rg: "b1",
-        st: true,
-        indexingPolicy: SharedConstants.IndexingPolicies.AllPropertiesIndexed,
-        partitionKeyVersion: 2
-      };
-      const additionalOptions = {};
-      const createGremlinGraphWithARMSpy = jest.spyOn(CreateCollectionUtilities, "createGremlinGraphWithARM");
-      const createGremlinDatabaseSpy = jest.spyOn(AddDbUtilities, "createGremlinDatabase");
-      CreateCollectionUtilities.createGremlinGraph(
-        armEndpoint,
-        properties.db,
-        properties.coll,
-        properties.indexingPolicy,
-        properties.offerThroughput,
-        properties.pk,
-        properties.partitionKeyVersion,
-        properties.cd,
-        properties.st,
-        properties.sid,
-        properties.rg,
-        properties.dba,
-        additionalOptions
-      );
-      expect(createGremlinDatabaseSpy).toHaveBeenCalled();
-      expect(createGremlinGraphWithARMSpy).toHaveBeenCalled();
+    it("exceeds collection threshold", () => {
+      mockDatabase.collections = ko.observableArray([
+        mockCollection1,
+        mockCollection2,
+        mockCollection3,
+        mockCollection4
+      ]);
+      expect(getMaxThroughput(defaults, mockContainer)).toEqual(defaults.throughput.unlimited.greatThanThreshold);
     });
   });
 });

src/Shared/AddCollectionUtility.ts

@@ -1,303 +1,23 @@
-import * as _ from "underscore";
-import * as DataExplorerConstants from "../Common/Constants";
-import * as DataModels from "../Contracts/DataModels";
-import * as SharedConstants from "./Constants";
-import * as ViewModels from "../Contracts/ViewModels";
-import { AddDbUtilities } from "../Shared/AddDatabaseUtility";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { HttpStatusCodes } from "../Common/Constants";
-import { sendMessage } from "../Common/MessageHandler";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
+import { any } from "underscore";
+import { CollectionCreationDefaults } from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
-import { userContext } from "../UserContext";
 
-export class CreateSqlCollectionUtilities {
-  public static createSqlCollection(
-    armEndpoint: string,
-    databaseId: string,
-    analyticalStorageTtl: number,
-    collectionId: string,
-    indexingPolicy: DataModels.IndexingPolicy,
-    offerThroughput: number,
-    partitionKey: string,
-    partitionKeyVersion: number,
-    createDatabase: boolean,
-    useDatabaseSharedOffer: boolean,
-    sid: string,
-    rg: string,
-    dba: string,
-    uniqueKeyPolicy: DataModels.UniqueKeyPolicy,
-    additionalOptions: DataModels.RpOptions
-  ): Promise<DataModels.CreateCollectionWithRpResponse> {
-    const params: DataModels.SqlCollectionParameters = {
-      uniqueKeyPolicy,
-      db: databaseId,
-      coll: collectionId,
-      pk: partitionKey,
-      offerThroughput,
-      cd: createDatabase,
-      st: useDatabaseSharedOffer,
-      sid,
-      rg,
-      dba,
-      analyticalStorageTtl,
-      indexingPolicy,
-      partitionKeyVersion
-    };
-
-    if (params.cd) {
-      return AddDbUtilities.createSqlDatabase(armEndpoint, params, additionalOptions).then(() => {
-        return CreateSqlCollectionUtilities.createSqlCollectionWithARM(armEndpoint, params, additionalOptions);
-      });
-    }
-    return CreateSqlCollectionUtilities.createSqlCollectionWithARM(armEndpoint, params, additionalOptions);
+export const getMaxThroughput = (defaults: CollectionCreationDefaults, container: Explorer): number => {
+  const throughput = defaults.throughput.unlimited;
+  if (typeof throughput === "number") {
+    return throughput;
+  } else {
+    return _exceedsThreshold(throughput.collectionThreshold, container)
+      ? throughput.greatThanThreshold
+      : throughput.lessThanOrEqualToThreshold;
   }
+};
 
-  public static async createSqlCollectionWithARM(
-    armEndpoint: string,
-    params: DataModels.SqlCollectionParameters,
-    rpOptions: DataModels.RpOptions
-  ): Promise<DataModels.CreateCollectionWithRpResponse> {
-    const rpPayloadToCreateCollection: DataModels.SqlCollectionCreationRequest = {
-      properties: {
-        resource: {
-          id: params.coll,
-          partitionKey: {
-            paths: [params.pk],
-            kind: "Hash",
-            version: params.partitionKeyVersion
-          }
-        },
-        options: {}
-      }
-    };
-
-    if (params.analyticalStorageTtl) {
-      rpPayloadToCreateCollection.properties.resource.analyticalStorageTtl = params.analyticalStorageTtl;
-    }
-
-    if (params.indexingPolicy) {
-      rpPayloadToCreateCollection.properties.resource.indexingPolicy = params.indexingPolicy;
-    }
-
-    if (!params.st) {
-      if (rpOptions) {
-        rpPayloadToCreateCollection.properties.options = rpOptions;
-      } else {
-        rpPayloadToCreateCollection.properties.options["throughput"] =
-          params.offerThroughput && params.offerThroughput.toString();
-      }
-    }
-
-    if (params.uniqueKeyPolicy) {
-      rpPayloadToCreateCollection.properties.resource.uniqueKeyPolicy = params.uniqueKeyPolicy;
-    }
-
-    try {
-      let response = await new ResourceProviderClient<DataModels.CreateCollectionWithRpResponse>(armEndpoint).putAsync(
-        CreateSqlCollectionUtilities.getSqlCollectionUri(params),
-        DataExplorerConstants.ArmApiVersions.publicVersion,
-        rpPayloadToCreateCollection
-      );
-      return response;
-    } catch (response) {
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Error creating collection: ${JSON.stringify(response)}`
-      );
-      if (response.status === HttpStatusCodes.Forbidden) {
-        sendMessage({ type: MessageTypes.ForbiddenError });
-      }
-      throw new Error(`Error creating collection`);
-    }
-  }
-
-  public static getSqlCollectionUri(params: DataModels.SqlCollectionParameters): string {
-    return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${params.dba}/sqlDatabases/${params.db}/containers/${params.coll}`;
-  }
-}
-
-export class CreateCollectionUtilities {
-  public static createGremlinGraph(
-    armEndpoint: string,
-    databaseId: string,
-    collectionId: string,
-    indexingPolicy: DataModels.IndexingPolicy,
-    offerThroughput: number,
-    partitionKey: string,
-    partitionKeyVersion: number,
-    createDatabase: boolean,
-    useDatabaseSharedOffer: boolean,
-    sid: string,
-    rg: string,
-    dba: string,
-    additionalOptions: DataModels.RpOptions
-  ): Promise<DataModels.CreateCollectionWithRpResponse> {
-    const params: DataModels.GraphParameters = {
-      db: databaseId,
-      coll: collectionId,
-      pk: partitionKey,
-      offerThroughput,
-      cd: createDatabase,
-      st: useDatabaseSharedOffer,
-      sid,
-      rg,
-      dba,
-      indexingPolicy,
-      partitionKeyVersion
-    };
-
-    if (params.cd) {
-      return AddDbUtilities.createGremlinDatabase(armEndpoint, params, additionalOptions).then(() => {
-        return CreateCollectionUtilities.createGremlinGraphWithARM(armEndpoint, params, additionalOptions);
-      });
-    }
-    return CreateCollectionUtilities.createGremlinGraphWithARM(armEndpoint, params, additionalOptions);
-  }
-
-  public static async createGremlinGraphWithARM(
-    armEndpoint: string,
-    params: DataModels.GraphParameters,
-    rpOptions: DataModels.RpOptions
-  ): Promise<DataModels.CreateCollectionWithRpResponse> {
-    const rpPayloadToCreateCollection: DataModels.GraphCreationRequest = {
-      properties: {
-        resource: {
-          id: params.coll,
-          partitionKey: {
-            paths: [params.pk],
-            kind: "Hash",
-            version: params.partitionKeyVersion
-          }
-        },
-        options: {}
-      }
-    };
-
-    if (params.indexingPolicy) {
-      rpPayloadToCreateCollection.properties.resource.indexingPolicy = params.indexingPolicy;
-    }
-
-    if (!params.st) {
-      if (rpOptions) {
-        rpPayloadToCreateCollection.properties.options = rpOptions;
-      } else {
-        rpPayloadToCreateCollection.properties.options["throughput"] =
-          params.offerThroughput && params.offerThroughput.toString();
-      }
-    }
-
-    try {
-      let response = await new ResourceProviderClient<DataModels.CreateCollectionWithRpResponse>(armEndpoint).putAsync(
-        CreateCollectionUtilities.getGremlinGraphUri(params),
-        DataExplorerConstants.ArmApiVersions.publicVersion,
-        rpPayloadToCreateCollection
-      );
-      return response;
-    } catch (response) {
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Error creating graph: ${JSON.stringify(response)}`
-      );
-      if (response.status === HttpStatusCodes.Forbidden) {
-        sendMessage({ type: MessageTypes.ForbiddenError });
-      }
-      throw new Error(`Error creating graph`);
-    }
-  }
-
-  public static getGremlinGraphUri(params: DataModels.GraphParameters): string {
-    return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${params.dba}/gremlinDatabases/${params.db}/graphs/${params.coll}`;
-  }
-}
-export class Utilities {
-  public static async createAzureTableWithARM(
-    armEndpoint: string,
-    params: DataModels.CreateDatabaseAndCollectionRequest,
-    rpOptions: DataModels.RpOptions
-  ): Promise<any> {
-    const rpPayloadToCreateDatabase: DataModels.CreationRequest = {
-      properties: {
-        resource: {
-          id: params.collectionId
-        },
-        options: {}
-      }
-    };
-
-    if (!params.databaseLevelThroughput) {
-      if (rpOptions) {
-        rpPayloadToCreateDatabase.properties.options = rpOptions;
-      } else {
-        rpPayloadToCreateDatabase.properties.options["throughput"] =
-          params.offerThroughput && params.offerThroughput.toString();
-      }
-    }
-
-    try {
-      await new ResourceProviderClient(armEndpoint).putAsync(
-        Utilities._getAzureTableUri(params),
-        DataExplorerConstants.ArmApiVersions.publicVersion,
-        rpPayloadToCreateDatabase
-      );
-    } catch (reason) {
-      NotificationConsoleUtils.logConsoleMessage(
-        ConsoleDataType.Error,
-        `Error creating table: ${JSON.stringify(reason)}, Payload: ${params}`
-      );
-      if (reason.status === HttpStatusCodes.Forbidden) {
-        sendMessage({ type: MessageTypes.ForbiddenError });
-        return;
-      }
-      throw new Error(`Error creating table`);
-    }
-  }
-
-  public static getMaxRUForStorageOption(
-    defaults: ViewModels.CollectionCreationDefaults,
-    storageOption: string
-  ): number {
-    if (storageOption === SharedConstants.CollectionCreation.storage10Gb) {
-      return SharedConstants.CollectionCreation.DefaultCollectionRUs10K;
-    }
-
-    return defaults.throughput.unlimitedmax;
-  }
-
-  public static getMinRUForStorageOption(
-    defaults: ViewModels.CollectionCreationDefaults,
-    storageOption: string
-  ): number {
-    if (storageOption === SharedConstants.CollectionCreation.storage10Gb) {
-      return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
-    }
-
-    return defaults.throughput.unlimitedmin;
-  }
-
-  public static getMaxThroughput(defaults: ViewModels.CollectionCreationDefaults, container: Explorer): number {
-    const throughput = defaults.throughput.unlimited;
-    if (typeof throughput === "number") {
-      return throughput;
-    } else {
-      return this._exceedsThreshold(throughput.collectionThreshold, container)
-        ? throughput.greatThanThreshold
-        : throughput.lessThanOrEqualToThreshold;
-    }
-  }
-
-  private static _exceedsThreshold(unlimitedThreshold: number, container: Explorer): boolean {
-    const databases = (container && container.databases && container.databases()) || [];
-    return _.any(
-      databases,
-      database =>
-        database && database.collections && database.collections() && database.collections().length > unlimitedThreshold
-    );
-  }
-
-  private static _getAzureTableUri(params: DataModels.CreateDatabaseAndCollectionRequest): string {
-    return `subscriptions/${userContext.subscriptionId}/resourceGroups/${userContext.resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/tables/${params.collectionId}`;
-  }
-}
+const _exceedsThreshold = (unlimitedThreshold: number, container: Explorer): boolean => {
+  const databases = (container && container.databases && container.databases()) || [];
+  return any(
+    databases,
+    database =>
+      database && database.collections && database.collections() && database.collections().length > unlimitedThreshold
+  );
+};

src/Shared/AddDatabaseUtility.test.ts

@@ -1,153 +0,0 @@
-import { AddDbUtilities } from "./AddDatabaseUtility";
-import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
-jest.mock("../ResourceProvider/ResourceProviderClient.ts");
-
-describe("Add Database Utitlity", () => {
-  const armEndpoint = "https://management.azure.com";
-  const properties = {
-    pk: "state",
-    coll: "abc-collection",
-    cd: true,
-    db: "a1-db",
-    offerThroughput: 50000,
-    st: true,
-    sid: "a1",
-    rg: "b1",
-    dba: "main"
-  };
-
-  describe("getRpClient", () => {
-    it("should return an instance of ResourceProviderClient", () => {
-      expect(AddDbUtilities.getRpClient()).not.toBeFalsy();
-      expect(AddDbUtilities.getRpClient()).toBeInstanceOf(ResourceProviderClient);
-    });
-  });
-
-  describe("getGremlinDatabaseUri", () => {
-    it("should return a uri in the correct format", () => {
-      expect(AddDbUtilities.getGremlinDatabaseUri(properties)).toEqual(
-        "subscriptions/a1/resourceGroups/b1/providers/Microsoft.DocumentDB/databaseAccounts/main/gremlinDatabases/a1-db"
-      );
-    });
-  });
-
-  describe("createGremlinDatabase", () => {
-    it("should utilize resource provider client", () => {
-      const resourceProviderClientSpy = spyOn<any>(AddDbUtilities, "getRpClient");
-      AddDbUtilities.createGremlinDatabase(armEndpoint, properties, undefined);
-      expect(resourceProviderClientSpy).toHaveBeenCalled();
-    });
-
-    it("should invoke getGremlinDatabaseUri", () => {
-      const getGremlinDatabaseUriSpy = spyOn<any>(AddDbUtilities, "getGremlinDatabaseUri");
-      AddDbUtilities.createGremlinDatabase(armEndpoint, properties, undefined);
-      expect(getGremlinDatabaseUriSpy).toHaveBeenCalled();
-    });
-
-    it("should invoke a put call via resource provider client to create a database and set throughput if shared throughtput is true", () => {
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      AddDbUtilities.createGremlinDatabase(armEndpoint, properties, undefined);
-      expect(
-        resourceProviderClientPutAsyncSpy
-      ).toHaveBeenCalledWith(
-        "subscriptions/a1/resourceGroups/b1/providers/Microsoft.DocumentDB/databaseAccounts/main/gremlinDatabases/a1-db",
-        "2020-04-01",
-        { properties: { options: { throughput: "50000" }, resource: { id: "a1-db" } } }
-      );
-    });
-
-    it("should invoke a put call via resource provider client to create a database and set autopilot if shared throughtput is true and autopilot settings are passed", () => {
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      AddDbUtilities.createGremlinDatabase(armEndpoint, properties, { "x-ms-cosmos-offer-autopilot-tier": "1" });
-      expect(
-        resourceProviderClientPutAsyncSpy
-      ).toHaveBeenCalledWith(
-        "subscriptions/a1/resourceGroups/b1/providers/Microsoft.DocumentDB/databaseAccounts/main/gremlinDatabases/a1-db",
-        "2020-04-01",
-        { properties: { options: { "x-ms-cosmos-offer-autopilot-tier": "1" }, resource: { id: "a1-db" } } }
-      );
-    });
-
-    it("should invoke a put call via resource provider client to create a database and not set throughput if shared throughtput is false", () => {
-      const properties = {
-        pk: "state",
-        coll: "abc-collection",
-        cd: true,
-        db: "a2-db",
-        st: false,
-        sid: "a2",
-        rg: "c1",
-        dba: "main"
-      };
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      AddDbUtilities.createGremlinDatabase(armEndpoint, properties, undefined);
-      expect(
-        resourceProviderClientPutAsyncSpy
-      ).toHaveBeenCalledWith(
-        "subscriptions/a2/resourceGroups/c1/providers/Microsoft.DocumentDB/databaseAccounts/main/gremlinDatabases/a2-db",
-        "2020-04-01",
-        { properties: { options: {}, resource: { id: "a2-db" } } }
-      );
-    });
-  });
-
-  describe("createSqlDatabase", () => {
-    it("should utilize resource provider client", () => {
-      const resourceProviderClientSpy = spyOn<any>(AddDbUtilities, "getRpClient");
-      AddDbUtilities.createSqlDatabase(armEndpoint, properties, undefined);
-      expect(resourceProviderClientSpy).toHaveBeenCalled();
-    });
-
-    it("should invoke getSqlDatabaseUri", () => {
-      const getSqlDatabaseUriSpy = spyOn<any>(AddDbUtilities, "getSqlDatabaseUri");
-      AddDbUtilities.createSqlDatabase(armEndpoint, properties, undefined);
-      expect(getSqlDatabaseUriSpy).toHaveBeenCalled();
-    });
-
-    it("should invoke a put call via resource provider client to create a database and set throughput if shared throughtput is true", () => {
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      AddDbUtilities.createSqlDatabase(armEndpoint, properties, undefined);
-      expect(
-        resourceProviderClientPutAsyncSpy
-      ).toHaveBeenCalledWith(
-        "subscriptions/a1/resourceGroups/b1/providers/Microsoft.DocumentDB/databaseAccounts/main/sqlDatabases/a1-db",
-        "2020-04-01",
-        { properties: { options: { throughput: "50000" }, resource: { id: "a1-db" } } }
-      );
-    });
-
-    it("should invoke a put call via resource provider client to create a database and set autopilot if shared throughtput is true and autopilot settings are passed", () => {
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      AddDbUtilities.createSqlDatabase(armEndpoint, properties, { "x-ms-cosmos-offer-autopilot-tier": "1" });
-      expect(
-        resourceProviderClientPutAsyncSpy
-      ).toHaveBeenCalledWith(
-        "subscriptions/a1/resourceGroups/b1/providers/Microsoft.DocumentDB/databaseAccounts/main/sqlDatabases/a1-db",
-        "2020-04-01",
-        { properties: { options: { "x-ms-cosmos-offer-autopilot-tier": "1" }, resource: { id: "a1-db" } } }
-      );
-    });
-
-    it("should invoke a put call via resource provider client to create a database and not set throughput if shared throughtput is false", () => {
-      const properties = {
-        pk: "state",
-        coll: "abc-collection",
-        cd: true,
-        db: "a2-db",
-        st: false,
-        sid: "a2",
-        rg: "c1",
-        dba: "main"
-      };
-      const resourceProviderClientPutAsyncSpy = jest.spyOn(ResourceProviderClient.prototype, "putAsync");
-      AddDbUtilities.createSqlDatabase(armEndpoint, properties, undefined);
-      expect(
-        resourceProviderClientPutAsyncSpy
-      ).toHaveBeenCalledWith(
-        "subscriptions/a2/resourceGroups/c1/providers/Microsoft.DocumentDB/databaseAccounts/main/sqlDatabases/a2-db",
-        "2020-04-01",
-        { properties: { options: {}, resource: { id: "a2-db" } } }
-      );
-    });
-  });
-});

src/Shared/AddDatabaseUtility.ts

@@ -1,187 +0,0 @@
-import * as DataExplorerConstants from "../Common/Constants";
-import * as DataModels from "../Contracts/DataModels";
-import { configContext } from "../ConfigContext";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import { HttpStatusCodes } from "../Common/Constants";
-import { sendMessage } from "../Common/MessageHandler";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
-import { userContext } from "../UserContext";
-import { createUpdateCassandraKeyspace } from "../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-
-export class AddDbUtilities {
-  // todo - remove any
-  public static async createMongoDatabaseWithARM(
-    armEndpoint: string,
-    params: DataModels.RpParameters,
-    rpOptions: DataModels.RpOptions
-  ): Promise<any> {
-    const rpPayloadToCreateDatabase: DataModels.MongoCreationRequest = {
-      properties: {
-        resource: {
-          id: params.db
-        },
-        options: {}
-      }
-    };
-
-    if (params.st) {
-      if (rpOptions) {
-        rpPayloadToCreateDatabase.properties.options = rpOptions;
-      } else {
-        rpPayloadToCreateDatabase.properties.options["throughput"] =
-          params.offerThroughput && params.offerThroughput.toString();
-      }
-    }
-
-    try {
-      await AddDbUtilities.getRpClient<DataModels.CreateDatabaseWithRpResponse>(armEndpoint).putAsync(
-        AddDbUtilities._getMongoDatabaseUri(params),
-        DataExplorerConstants.ArmApiVersions.publicVersion,
-        rpPayloadToCreateDatabase
-      );
-    } catch (reason) {
-      AddDbUtilities._handleCreationError(reason, params);
-    }
-  }
-
-  // todo - remove any
-  public static async createCassandraKeyspace(
-    params: DataModels.RpParameters,
-    rpOptions: DataModels.RpOptions
-  ): Promise<any> {
-    const rpPayloadToCreateKeyspace: DataModels.CreationRequest = {
-      properties: {
-        resource: {
-          id: params.db
-        },
-        options: {}
-      }
-    };
-
-    if (params.st) {
-      if (rpOptions) {
-        rpPayloadToCreateKeyspace.properties.options = rpOptions;
-      } else {
-        rpPayloadToCreateKeyspace.properties.options["throughput"] =
-          params.offerThroughput && params.offerThroughput.toString();
-      }
-    }
-
-    try {
-      await createUpdateCassandraKeyspace(
-        userContext.subscriptionId,
-        userContext.resourceGroup,
-        userContext.databaseAccount?.name,
-        params.db,
-        rpPayloadToCreateKeyspace
-      );
-    } catch (reason) {
-      AddDbUtilities._handleCreationError(reason, params, "keyspace");
-    }
-  }
-
-  public static async createSqlDatabase(
-    armEndpoint: string,
-    params: DataModels.RpParameters,
-    rpOptions: DataModels.RpOptions
-  ): Promise<any> {
-    const rpPayloadToCreateSqlDatabase: DataModels.CreationRequest = {
-      properties: {
-        resource: {
-          id: params.db
-        },
-        options: {}
-      }
-    };
-
-    if (params.st) {
-      if (rpOptions) {
-        rpPayloadToCreateSqlDatabase.properties.options = rpOptions;
-      } else {
-        rpPayloadToCreateSqlDatabase.properties.options["throughput"] =
-          params.offerThroughput && params.offerThroughput.toString();
-      }
-    }
-
-    try {
-      await AddDbUtilities.getRpClient<DataModels.CreateDatabaseWithRpResponse>(armEndpoint).putAsync(
-        AddDbUtilities.getSqlDatabaseUri(params),
-        DataExplorerConstants.ArmApiVersions.publicVersion,
-        rpPayloadToCreateSqlDatabase
-      );
-    } catch (reason) {
-      AddDbUtilities._handleCreationError(reason, params, "database");
-    }
-  }
-
-  public static getRpClient<T>(armEndpoint?: string): ResourceProviderClient<T> {
-    return new ResourceProviderClient<T>(armEndpoint || configContext.ARM_ENDPOINT);
-  }
-
-  public static async createGremlinDatabase(
-    armEndpoint: string,
-    params: DataModels.RpParameters,
-    autoPilotSettings: DataModels.RpOptions
-  ): Promise<DataModels.CreateDatabaseWithRpResponse> {
-    const rpPayloadToCreateDatabase: DataModels.CreationRequest = {
-      properties: {
-        resource: {
-          id: params.db
-        },
-        options: {}
-      }
-    };
-
-    const uri = AddDbUtilities.getGremlinDatabaseUri(params);
-
-    if (params.st) {
-      if (autoPilotSettings) {
-        rpPayloadToCreateDatabase.properties.options = autoPilotSettings;
-      } else {
-        rpPayloadToCreateDatabase.properties.options["throughput"] =
-          params.offerThroughput && params.offerThroughput.toString();
-      }
-    }
-
-    return new Promise<DataModels.CreateDatabaseWithRpResponse>((resolve, reject) => {
-      AddDbUtilities.getRpClient<DataModels.CreateDatabaseWithRpResponse>(armEndpoint)
-        .putAsync(uri, DataExplorerConstants.ArmApiVersions.publicVersion, rpPayloadToCreateDatabase)
-        .then(
-          () => {
-            resolve();
-          },
-          reason => {
-            AddDbUtilities._handleCreationError(reason, params);
-            reject();
-          }
-        );
-    });
-  }
-
-  private static _handleCreationError(reason: any, params: DataModels.RpParameters, dbType: string = "database") {
-    NotificationConsoleUtils.logConsoleError(`Error creating ${dbType}: ${JSON.stringify(reason)}, Payload: ${params}`);
-    if (reason.status === HttpStatusCodes.Forbidden) {
-      sendMessage({ type: MessageTypes.ForbiddenError });
-      return;
-    }
-    throw new Error(`Error creating ${dbType}`);
-  }
-
-  private static _getMongoDatabaseUri(params: DataModels.RpParameters): string {
-    return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/mongodbDatabases/${params.db}`;
-  }
-
-  private static _getCassandraKeyspaceUri(params: DataModels.RpParameters): string {
-    return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${userContext.databaseAccount.name}/cassandraKeyspaces/${params.db}`;
-  }
-
-  public static getGremlinDatabaseUri(params: DataModels.RpParameters): string {
-    return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${params.dba}/gremlinDatabases/${params.db}`;
-  }
-
-  public static getSqlDatabaseUri(params: DataModels.RpParameters): string {
-    return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${params.dba}/sqlDatabases/${params.db}`;
-  }
-}

src/Shared/Telemetry/TelemetryConstants.ts

@@ -1,13 +1,3 @@
-/**
- * Defines constants related to logging telemetry. Everything except Action should be kept in sync with the one in the Portal code as much as possible.
- *
- * TODO: Move this to ExplorerContracts (265329)
- */
-export class General {
-  public static ExtensionName: string = "Microsoft_Azure_DocumentDB";
-  public static BladeNamePrefix: string = "Extension/Microsoft_Azure_DocumentDB/Blade/";
-}
-
 // Data Explorer specific actions. No need to keep this in sync with the one in Portal.
 export enum Action {
   CollapseTreeNode,
@@ -83,24 +73,19 @@ export enum Action {
   NotebooksGitHubDisconnect
 }
 
-export class ActionModifiers {
-  public static Start: string = "start";
-  public static Success: string = "success";
-  public static Failed: string = "failed";
-  public static Mark: string = "mark";
-  public static Open: string = "open";
-  public static IFrameReady: string = "iframeready";
-  public static Close: string = "close";
-  public static Submit: string = "submit";
-  public static IndexAll: string = "index all properties";
-  public static NoIndex: string = "no indexing";
-  public static Cancel: string = "cancel";
-}
-
-export class CosmosDBEndpointNames {
-  public static Gateway: string = "CosmosDBGateway";
-  public static ResourceProvider: string = "DocumentDBResourceProvider";
-}
+export const ActionModifiers = {
+  Start: "start",
+  Success: "success",
+  Failed: "failed",
+  Mark: "mark",
+  Open: "open",
+  IFrameReady: "iframeready",
+  Close: "close",
+  Submit: "submit",
+  IndexAll: "index all properties",
+  NoIndex: "no indexing",
+  Cancel: "cancel"
+} as const;
 
 export enum SourceBlade {
   AddCollection,
@@ -126,17 +111,3 @@ export enum SourceBlade {
   ScriptExplorer,
   Keys
 }
-
-export class BladeLoadRequirements {
-  public static collections: string = "Collections";
-  public static collectionsWithOffers: string = "CollectionsWithOffers";
-  public static databaseAccount: string = "DatabaseAccount";
-  public static keys: string = "Keys";
-  public static metrics: string = "Metrics";
-  public static notifications: string = "Notifications";
-  public static singleCollection: string = "SingleCollection";
-
-  public static keysBlade: string[] = [BladeLoadRequirements.databaseAccount, BladeLoadRequirements.keys];
-  public static metricsBlade: string[] = [BladeLoadRequirements.databaseAccount];
-  public static overview: string[] = [BladeLoadRequirements.databaseAccount, BladeLoadRequirements.notifications];
-}

src/Shared/Telemetry/TelemetryProcessor.ts

@@ -8,123 +8,124 @@ import { userContext } from "../../UserContext";
 /**
  * Class that persists telemetry data to the portal tables.
  */
-// TODO: Move to a separate Diagnostics folder
-// TODO: Log telemetry for StorageExplorer case/other clients as well
-export default class TelemetryProcessor {
-  public static trace(action: Action, actionModifier: string = ActionModifiers.Mark, data?: any): void {
-    sendMessage({
-      type: MessageTypes.TelemetryInfo,
-      data: {
-        action: Action[action],
-        actionModifier: actionModifier,
-        data: JSON.stringify(data)
-      }
-    });
 
-    appInsights.trackEvent({ name: Action[action] }, TelemetryProcessor.getData(data));
-  }
-
-  public static traceStart(action: Action, data?: any): number {
-    const timestamp: number = Date.now();
-    sendMessage({
-      type: MessageTypes.TelemetryInfo,
-      data: {
-        action: Action[action],
-        actionModifier: ActionModifiers.Start,
-        timestamp: timestamp,
-        data: JSON.stringify(data)
-      }
-    });
-
-    appInsights.startTrackEvent(Action[action]);
-    return timestamp;
-  }
-
-  public static traceSuccess(action: Action, data?: any, timestamp?: number): void {
-    sendMessage({
-      type: MessageTypes.TelemetryInfo,
-      data: {
-        action: Action[action],
-        actionModifier: ActionModifiers.Success,
-        timestamp: timestamp || Date.now(),
-        data: JSON.stringify(data)
-      }
-    });
-
-    appInsights.stopTrackEvent(Action[action], TelemetryProcessor.getData(data));
-  }
-
-  public static traceFailure(action: Action, data?: any, timestamp?: number): void {
-    sendMessage({
-      type: MessageTypes.TelemetryInfo,
-      data: {
-        action: Action[action],
-        actionModifier: ActionModifiers.Failed,
-        timestamp: timestamp || Date.now(),
-        data: JSON.stringify(data)
-      }
-    });
-
-    appInsights.stopTrackEvent(Action[action], TelemetryProcessor.getData(data));
-  }
-
-  public static traceCancel(action: Action, data?: any, timestamp?: number): void {
-    sendMessage({
-      type: MessageTypes.TelemetryInfo,
-      data: {
-        action: Action[action],
-        actionModifier: ActionModifiers.Cancel,
-        timestamp: timestamp || Date.now(),
-        data: JSON.stringify(data)
-      }
-    });
-
-    appInsights.stopTrackEvent(Action[action], TelemetryProcessor.getData(data));
-  }
-
-  public static traceOpen(action: Action, data?: any, timestamp?: number): number {
-    const validTimestamp = timestamp || Date.now();
-    sendMessage({
-      type: MessageTypes.TelemetryInfo,
-      data: {
-        action: Action[action],
-        actionModifier: ActionModifiers.Open,
-        timestamp: validTimestamp,
-        data: JSON.stringify(data)
-      }
-    });
-
-    appInsights.startTrackEvent(Action[action]);
-    return validTimestamp;
-  }
-
-  public static traceMark(action: Action, data?: any, timestamp?: number): number {
-    const validTimestamp = timestamp || Date.now();
-    sendMessage({
-      type: MessageTypes.TelemetryInfo,
-      data: {
-        action: Action[action],
-        actionModifier: ActionModifiers.Mark,
-        timestamp: validTimestamp,
-        data: JSON.stringify(data)
-      }
-    });
-
-    appInsights.startTrackEvent(Action[action]);
-    return validTimestamp;
-  }
-
-  private static getData(data: any = {}): any {
-    if (typeof data === "string") {
-      data = { message: data };
+export function trace(action: Action, actionModifier: string = ActionModifiers.Mark, data?: unknown): void {
+  sendMessage({
+    type: MessageTypes.TelemetryInfo,
+    data: {
+      action: Action[action],
+      actionModifier: actionModifier,
+      data: JSON.stringify(data)
     }
+  });
+
+  appInsights.trackEvent({ name: Action[action] }, getData(data));
+}
+
+export function traceStart(action: Action, data?: unknown): number {
+  const timestamp: number = Date.now();
+  sendMessage({
+    type: MessageTypes.TelemetryInfo,
+    data: {
+      action: Action[action],
+      actionModifier: ActionModifiers.Start,
+      timestamp: timestamp,
+      data: JSON.stringify(data)
+    }
+  });
+
+  appInsights.startTrackEvent(Action[action]);
+  return timestamp;
+}
+
+export function traceSuccess(action: Action, data?: unknown, timestamp?: number): void {
+  sendMessage({
+    type: MessageTypes.TelemetryInfo,
+    data: {
+      action: Action[action],
+      actionModifier: ActionModifiers.Success,
+      timestamp: timestamp || Date.now(),
+      data: JSON.stringify(data)
+    }
+  });
+
+  appInsights.stopTrackEvent(Action[action], getData(data));
+}
+
+export function traceFailure(action: Action, data?: unknown, timestamp?: number): void {
+  sendMessage({
+    type: MessageTypes.TelemetryInfo,
+    data: {
+      action: Action[action],
+      actionModifier: ActionModifiers.Failed,
+      timestamp: timestamp || Date.now(),
+      data: JSON.stringify(data)
+    }
+  });
+
+  appInsights.stopTrackEvent(Action[action], getData(data));
+}
+
+export function traceCancel(action: Action, data?: unknown, timestamp?: number): void {
+  sendMessage({
+    type: MessageTypes.TelemetryInfo,
+    data: {
+      action: Action[action],
+      actionModifier: ActionModifiers.Cancel,
+      timestamp: timestamp || Date.now(),
+      data: JSON.stringify(data)
+    }
+  });
+
+  appInsights.stopTrackEvent(Action[action], getData(data));
+}
+
+export function traceOpen(action: Action, data?: unknown, timestamp?: number): number {
+  const validTimestamp = timestamp || Date.now();
+  sendMessage({
+    type: MessageTypes.TelemetryInfo,
+    data: {
+      action: Action[action],
+      actionModifier: ActionModifiers.Open,
+      timestamp: validTimestamp,
+      data: JSON.stringify(data)
+    }
+  });
+
+  appInsights.startTrackEvent(Action[action]);
+  return validTimestamp;
+}
+
+export function traceMark(action: Action, data?: unknown, timestamp?: number): number {
+  const validTimestamp = timestamp || Date.now();
+  sendMessage({
+    type: MessageTypes.TelemetryInfo,
+    data: {
+      action: Action[action],
+      actionModifier: ActionModifiers.Mark,
+      timestamp: validTimestamp,
+      data: JSON.stringify(data)
+    }
+  });
+
+  appInsights.startTrackEvent(Action[action]);
+  return validTimestamp;
+}
+
+function getData(data: unknown = {}): { [key: string]: string } | undefined {
+  if (typeof data === "string") {
+    data = { message: data };
+  }
+  if (typeof data === "object") {
     return {
       // TODO: Need to `any` here since the window imports Explorer which can't be in strict mode yet
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       authType: (window as any).authType,
-      subscriptionId: userContext.subscriptionId,
+      subscriptionId: userContext.subscriptionId as string,
       platform: configContext.platform,
-      env: process.env.NODE_ENV,
+      env: process.env.NODE_ENV as string,
       ...data
     };
   }
+  return undefined;
 }

src/Shared/appInsights.ts

@@ -1,7 +1,9 @@
 import { ApplicationInsights } from "@microsoft/applicationinsights-web";
+
 const appInsights = new ApplicationInsights({
   config: {
-    instrumentationKey: "fa645d97-6237-4656-9559-0ee0cb55ee49"
+    instrumentationKey: "fa645d97-6237-4656-9559-0ee0cb55ee49",
+    disableFetchTracking: false
   }
 });
 appInsights.loadAppInsights();

src/Utils/NotificationConsoleUtils.ts

@@ -3,7 +3,10 @@ import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/Notificat
 
 const _global = typeof self === "undefined" ? window : self;
 
-// DEPRECATED: Use logConsoleInfo, logConsoleError, logConsoleProgress instead
+/**
+ * @deprecated
+ * Use logConsoleInfo, logConsoleError, logConsoleProgress instead
+ * */
 export function logConsoleMessage(type: ConsoleDataType, message: string, id?: string): string {
   const dataExplorer = _global.dataExplorer;
   if (dataExplorer) {

src/Utils/PricingUtils.ts

@@ -193,7 +193,7 @@ export function getAutoPilotV3SpendHtml(maxAutoPilotThroughputSet: number, isDat
     maxAutoPilotThroughputSet
   )} GB of data stored, the max RU/s will be automatically upgraded based on the new storage value. <a href='${
     Constants.AutopilotDocumentation.Url
-  }' target='_blank'>Learn more</a>.`;
+  }' target='_blank' aria-label='Learn more about autoscale throughput'>Learn more</a>.`;
 }
 
 export function computeAutoscaleUsagePriceHourly(

src/Utils/arm/generatedClients/2020-04-01/types.ts

@@ -852,6 +852,10 @@ export interface SqlContainerResource {
 
   /* The conflict resolution policy for the container. */
   conflictResolutionPolicy?: ConflictResolutionPolicy;
+
+  //TODO: this property is manually added. It should be auto-generated instead. Need to be fixed in the API spec.
+  /* Analytical storage time to live */
+  analyticalStorageTtl?: number;
 }
 
 /* Cosmos DB indexing policy */