Initial Move from Azure DevOps to GitHub

src/Api/Apis.ts

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

src/AuthType.ts

@@ -0,0 +1,6 @@
+export enum AuthType {
+  AAD = "aad",
+  EncryptedToken = "encryptedtoken",
+  MasterKey = "masterkey",
+  ResourceToken = "resourcetoken"
+}

src/Bindings/BindingHandlersRegisterer.ts

@@ -0,0 +1,26 @@
+import * as ko from "knockout";
+import * as ReactBindingHandler from "./ReactBindingHandler";
+
+interface RestorePoint {
+  readonly element: JQuery;
+  readonly width: number;
+}
+
+export class BindingHandlersRegisterer {
+  public static registerBindingHandlers() {
+    ko.bindingHandlers.setTemplateReady = {
+      init(
+        element: any,
+        wrappedValueAccessor: () => any,
+        allBindings?: ko.AllBindings,
+        viewModel?: any,
+        bindingContext?: ko.BindingContext
+      ) {
+        const value = ko.unwrap(wrappedValueAccessor());
+        bindingContext.$data.isTemplateReady(value);
+      }
+    } as ko.BindingHandler;
+
+    ReactBindingHandler.Registerer.register();
+  }
+}

src/Bindings/ReactBindingHandler.ts

@@ -0,0 +1,48 @@
+/**
+ * Custom binding to make it easy to insert a React component.
+ * Mounts the react component and renders when needed.
+ *
+ * Usage:
+ * 1) Implement ReactAdapter:
+ *  parameters: pass any parameters including Knockout Observable's.
+ *  render(): render your ReactComponent here.
+ *
+ * 2) In the markup, add this:
+ * <div data-bind="react:myAdapter"></div>
+ */
+import * as ko from "knockout";
+import * as ReactDOM from "react-dom";
+
+export interface ReactAdapter {
+  parameters: any;
+  renderComponent: () => JSX.Element;
+  setElement?: (elt: Element) => void;
+}
+
+export class Registerer {
+  public static register(): void {
+    ko.bindingHandlers.react = {
+      init: (
+        element: any,
+        wrappedValueAccessor: () => any,
+        allBindings?: ko.AllBindings,
+        viewModel?: any,
+        bindingContext?: ko.BindingContext
+      ) => {
+        const adapter: ReactAdapter = wrappedValueAccessor();
+
+        if (adapter.setElement) {
+          adapter.setElement(element);
+        }
+
+        // If any of the ko observable change inside parameters, trigger a new render.
+        ko.computed(() => ko.toJSON(adapter.parameters)).subscribe(() =>
+          ReactDOM.render(adapter.renderComponent(), element)
+        );
+
+        // Initial rendering at mount point
+        ReactDOM.render(adapter.renderComponent(), element);
+      }
+    } as ko.BindingHandler;
+  }
+}

src/Common/ArrayHashMap.ts

@@ -0,0 +1,87 @@
+import { HashMap } from "./HashMap";
+
+/**
+ * Hash map of arrays which allows to:
+ * - push an item by key: add to array and create array if needed
+ * - remove item by key: remove from array and delete array if needed
+ */
+
+export class ArrayHashMap<T> {
+  private store: HashMap<T[]>;
+
+  constructor() {
+    this.store = new HashMap();
+  }
+
+  public has(key: string): boolean {
+    return this.store.has(key);
+  }
+
+  public get(key: string): T[] {
+    return this.store.get(key);
+  }
+
+  public size(): number {
+    return this.store.size();
+  }
+
+  public clear(): void {
+    this.store.clear();
+  }
+
+  public keys(): string[] {
+    return this.store.keys();
+  }
+
+  public delete(key: string): boolean {
+    return this.store.delete(key);
+  }
+
+  public forEach(key: string, iteratorFct: (value: T) => void) {
+    const values = this.store.get(key);
+    if (values) {
+      values.forEach(value => iteratorFct(value));
+    }
+  }
+
+  /**
+   * Insert item into array.
+   * If no array, create one.
+   * If item already in array, return.
+   * @param key
+   * @param item
+   */
+  public push(key: string, item: T): void {
+    let itemsArray: T[] = this.store.get(key);
+    if (!itemsArray) {
+      itemsArray = [item];
+      this.store.set(key, itemsArray);
+      return;
+    }
+
+    if (itemsArray.indexOf(item) === -1) {
+      itemsArray.push(item);
+    }
+  }
+
+  /**
+   * Remove item from array.
+   * If array is empty, remove array.
+   * @param key
+   * @param itemToRemove
+   */
+  public remove(key: string, itemToRemove: T) {
+    if (!this.store.has(key)) {
+      return;
+    }
+
+    const itemsArray = this.store.get(key);
+    const index = itemsArray.indexOf(itemToRemove);
+    if (index >= 0) {
+      itemsArray.splice(index, 1);
+      if (itemsArray.length === 0) {
+        this.store.delete(key);
+      }
+    }
+  }
+}

src/Common/Constants.ts

@@ -0,0 +1,541 @@
+import { AutopilotTier } from "../Contracts/DataModels";
+import { config } from "../Config";
+import { HashMap } from "./HashMap";
+
+export class AuthorizationEndpoints {
+  public static arm: string = "https://management.core.windows.net/";
+  public static common: string = "https://login.windows.net/";
+}
+
+export class BackendEndpoints {
+  public static localhost: string = "https://localhost:12900";
+  public static dev: string = "https://ext.documents-dev.windows-int.net";
+  public static productionPortal: string = config.BACKEND_ENDPOINT || "https://main.documentdb.ext.azure.com";
+}
+
+export class EndpointsRegex {
+  public static readonly cassandra = "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com";
+  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
+  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
+  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
+  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
+}
+
+export class ApiEndpoints {
+  public static runtimeProxy: string = "/api/RuntimeProxy";
+  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
+}
+
+export class ServerIds {
+  public static localhost: string = "localhost";
+  public static blackforest: string = "blackforest";
+  public static fairfax: string = "fairfax";
+  public static mooncake: string = "mooncake";
+  public static productionPortal: string = "prod";
+  public static dev: string = "dev";
+}
+
+export class ArmApiVersions {
+  public static readonly documentDB: string = "2015-11-06";
+  public static readonly arcadia: string = "2019-06-01-preview";
+  public static readonly arcadiaLivy: string = "2019-11-01-preview";
+  public static readonly arm: string = "2015-11-01";
+  public static readonly armFeatures: string = "2014-08-01-preview";
+  public static readonly publicVersion = "2020-03-01";
+}
+
+export class ArmResourceTypes {
+  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
+  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
+}
+
+export class BackendDefaults {
+  public static partitionKeyKind: string = "Hash";
+  public static singlePartitionStorageInGb: string = "10";
+  public static multiPartitionStorageInGb: string = "100";
+  public static maxChangeFeedRetentionDuration: number = 10;
+  public static partitionKeyVersion = 2;
+}
+
+export class ClientDefaults {
+  public static requestTimeoutMs: number = 60000;
+  public static portalCacheTimeoutMs: number = 10000;
+  public static errorNotificationTimeoutMs: number = 5000;
+  public static copyHelperTimeoutMs: number = 2000;
+  public static waitForDOMElementMs: number = 500;
+  public static cacheBustingTimeoutMs: number =
+    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static databaseThroughputIncreaseFactor: number = 100;
+  public static readonly arcadiaTokenRefreshInterval: number =
+    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
+}
+
+export class AccountKind {
+  public static DocumentDB: string = "DocumentDB";
+  public static MongoDB: string = "MongoDB";
+  public static Parse: string = "Parse";
+  public static GlobalDocumentDB: string = "GlobalDocumentDB";
+  public static Default: string = AccountKind.DocumentDB;
+}
+
+export class CorrelationBackend {
+  public static Url: string = "https://aka.ms/cosmosdbanalytics";
+}
+
+export class DefaultAccountExperience {
+  public static DocumentDB: string = "DocumentDB";
+  public static Graph: string = "Graph";
+  public static MongoDB: string = "MongoDB";
+  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
+  public static Table: string = "Table";
+  public static Cassandra: string = "Cassandra";
+  public static Default: string = DefaultAccountExperience.DocumentDB;
+}
+
+export class CapabilityNames {
+  public static EnableTable: string = "EnableTable";
+  public static EnableGremlin: string = "EnableGremlin";
+  public static EnableCassandra: string = "EnableCassandra";
+  public static EnableAutoScale: string = "EnableAutoScale";
+  public static readonly EnableNotebooks: string = "EnableNotebooks";
+  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
+  public static readonly EnableMongo: string = "EnableMongo";
+}
+
+export class Features {
+  public static readonly graphs = "graphs";
+  public static readonly cosmosdb = "cosmosdb";
+  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+  public static readonly enableRupm = "enablerupm";
+  public static readonly cacheOptimizations = "dataexplorercacheoptimizations";
+  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static readonly enableTtl = "enablettl";
+  public static readonly enableNotebooks = "enablenotebooks";
+  public static readonly enableGallery = "enablegallery";
+  public static readonly enableSpark = "enablespark";
+  public static readonly livyEndpoint = "livyendpoint";
+  public static readonly settingsPane = "dataexplorersettingspane";
+  public static readonly throughputOverview = "throughputOverview";
+  public static readonly enableNteract = "enablenteract";
+  public static readonly notebookServerUrl = "notebookserverurl";
+  public static readonly notebookServerToken = "notebookservertoken";
+  public static readonly notebookBasePath = "notebookbasepath";
+  public static readonly enableLegacyResourceTree = "enablelegacyresourcetree";
+  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly enableAutoPilotV2 = "enableautopilotv2";
+  public static readonly ttl90Days = "ttl90days";
+}
+
+export class AfecFeatures {
+  public static readonly Spark = "spark-public-preview";
+  public static readonly Notebooks = "sparknotebooks-public-preview";
+  public static readonly StorageAnalytics = "storageanalytics-public-preview";
+}
+
+export class Spark {
+  public static readonly MaxWorkerCount = 10;
+  public static readonly SKUs: HashMap<string> = new HashMap({
+    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
+    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
+    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
+    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
+    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
+    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
+    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
+  });
+}
+
+export class TagNames {
+  public static defaultExperience: string = "defaultExperience";
+}
+
+export class MongoDBAccounts {
+  public static protocol: string = "https";
+  public static defaultPort: string = "10255";
+}
+
+export enum MongoBackendEndpointType {
+  local,
+  remote
+}
+
+export class MongoBackend {
+  public static localhostEndpoint: string = "/api/mongo/explorer";
+  public static centralUsEndpoint: string = "https://main.documentdb.ext.azure.com/api/mongo/explorer";
+  public static northEuropeEndpoint: string = "https://main.documentdb.ext.azure.com/api/mongo/explorer";
+  public static southEastAsiaEndpoint: string = "https://main.documentdb.ext.azure.com/api/mongo/explorer";
+
+  public static endpointsByRegion: any = {
+    default: MongoBackend.centralUsEndpoint,
+    northeurope: MongoBackend.northEuropeEndpoint,
+    ukwest: MongoBackend.northEuropeEndpoint,
+    uksouth: MongoBackend.northEuropeEndpoint,
+    westeurope: MongoBackend.northEuropeEndpoint,
+    australiaeast: MongoBackend.southEastAsiaEndpoint,
+    australiasoutheast: MongoBackend.southEastAsiaEndpoint,
+    centralindia: MongoBackend.southEastAsiaEndpoint,
+    eastasia: MongoBackend.southEastAsiaEndpoint,
+    japaneast: MongoBackend.southEastAsiaEndpoint,
+    japanwest: MongoBackend.southEastAsiaEndpoint,
+    koreacentral: MongoBackend.southEastAsiaEndpoint,
+    koreasouth: MongoBackend.southEastAsiaEndpoint,
+    southeastasia: MongoBackend.southEastAsiaEndpoint,
+    southindia: MongoBackend.southEastAsiaEndpoint,
+    westindia: MongoBackend.southEastAsiaEndpoint
+  };
+
+  public static endpointsByEnvironment: any = {
+    default: MongoBackendEndpointType.local,
+    localhost: MongoBackendEndpointType.local,
+    prod1: MongoBackendEndpointType.remote,
+    prod2: MongoBackendEndpointType.remote
+  };
+}
+
+// TODO: 435619 Add default endpoints per cloud and use regional only when available
+export class CassandraBackend {
+  public static readonly localhostEndpoint: string = "https://localhost:12901/";
+  public static readonly devEndpoint: string = "https://platformproxycassandradev.azurewebsites.net/";
+
+  public static readonly centralUsEndpoint: string = "https://main.documentdb.ext.azure.com/";
+  public static readonly northEuropeEndpoint: string = "https://main.documentdb.ext.azure.com/";
+  public static readonly southEastAsiaEndpoint: string = "https://main.documentdb.ext.azure.com/";
+
+  public static readonly bf_default: string = "https://main.documentdb.ext.microsoftazure.de/";
+  public static readonly mc_default: string = "https://main.documentdb.ext.azure.cn/";
+  public static readonly ff_default: string = "https://main.documentdb.ext.azure.us/";
+
+  public static readonly endpointsByRegion: any = {
+    default: CassandraBackend.centralUsEndpoint,
+    northeurope: CassandraBackend.northEuropeEndpoint,
+    ukwest: CassandraBackend.northEuropeEndpoint,
+    uksouth: CassandraBackend.northEuropeEndpoint,
+    westeurope: CassandraBackend.northEuropeEndpoint,
+    australiaeast: CassandraBackend.southEastAsiaEndpoint,
+    australiasoutheast: CassandraBackend.southEastAsiaEndpoint,
+    centralindia: CassandraBackend.southEastAsiaEndpoint,
+    eastasia: CassandraBackend.southEastAsiaEndpoint,
+    japaneast: CassandraBackend.southEastAsiaEndpoint,
+    japanwest: CassandraBackend.southEastAsiaEndpoint,
+    koreacentral: CassandraBackend.southEastAsiaEndpoint,
+    koreasouth: CassandraBackend.southEastAsiaEndpoint,
+    southeastasia: CassandraBackend.southEastAsiaEndpoint,
+    southindia: CassandraBackend.southEastAsiaEndpoint,
+    westindia: CassandraBackend.southEastAsiaEndpoint,
+
+    // Black Forest
+    germanycentral: CassandraBackend.bf_default,
+    germanynortheast: CassandraBackend.bf_default,
+
+    // Fairfax
+    usdodeast: CassandraBackend.ff_default,
+    usdodcentral: CassandraBackend.ff_default,
+    usgovarizona: CassandraBackend.ff_default,
+    usgoviowa: CassandraBackend.ff_default,
+    usgovtexas: CassandraBackend.ff_default,
+    usgovvirginia: CassandraBackend.ff_default,
+
+    // Mooncake
+    chinaeast: CassandraBackend.mc_default,
+    chinaeast2: CassandraBackend.mc_default,
+    chinanorth: CassandraBackend.mc_default,
+    chinanorth2: CassandraBackend.mc_default
+  };
+
+  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
+  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
+  public static readonly queryApi: string = "api/cassandra";
+  public static readonly guestQueryApi: string = "api/guest/cassandra";
+  public static readonly keysApi: string = "api/cassandra/keys";
+  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
+  public static readonly schemaApi: string = "api/cassandra/schema";
+  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
+}
+
+export class RUPMStates {
+  public static on: string = "on";
+  public static off: string = "off";
+}
+
+export class Queries {
+  public static CustomPageOption: string = "custom";
+  public static UnlimitedPageOption: string = "unlimited";
+  public static itemsPerPage: number = 100;
+  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
+
+  public static QueryEditorMinHeightRatio: number = 0.1;
+  public static QueryEditorMaxHeightRatio: number = 0.4;
+  public static readonly DefaultMaxDegreeOfParallelism = 6;
+}
+
+export class SavedQueries {
+  public static readonly CollectionName: string = "___Query";
+  public static readonly DatabaseName: string = "___Cosmos";
+  public static readonly OfferThroughput: number = 400;
+  public static readonly PartitionKeyProperty: string = "id";
+}
+
+export class DocumentsGridMetrics {
+  public static DocumentsPerPage: number = 100;
+  public static IndividualRowHeight: number = 34;
+  public static BufferHeight: number = 28;
+  public static SplitterMinWidth: number = 200;
+  public static SplitterMaxWidth: number = 360;
+
+  public static DocumentEditorMinWidthRatio: number = 0.2;
+  public static DocumentEditorMaxWidthRatio: number = 0.4;
+}
+
+export class ExplorerMetrics {
+  public static SplitterMinWidth: number = 240;
+  public static SplitterMaxWidth: number = 400;
+  public static CollapsedResourceTreeWidth: number = 36;
+}
+
+export class SplitterMetrics {
+  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
+}
+
+export class Areas {
+  public static ResourceTree: string = "Resource Tree";
+  public static ContextualPane: string = "Contextual Pane";
+  public static Tab: string = "Tab";
+  public static ShareDialog: string = "Share Access Dialog";
+  public static Notebook: string = "Notebook";
+}
+
+export class HttpHeaders {
+  public static activityId: string = "x-ms-activity-id";
+  public static apiType: string = "x-ms-cosmos-apitype";
+  public static authorization: string = "authorization";
+  public static collectionIndexTransformationProgress: string =
+    "x-ms-documentdb-collection-index-transformation-progress";
+  public static continuation: string = "x-ms-continuation";
+  public static correlationRequestId: string = "x-ms-correlation-request-id";
+  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
+  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
+  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
+  public static connectionString: string = "x-ms-connection-string";
+  public static msDate: string = "x-ms-date";
+  public static location: string = "Location";
+  public static contentType: string = "Content-Type";
+  public static offerReplacePending: string = "x-ms-offer-replace-pending";
+  public static user: string = "x-ms-user";
+  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
+  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
+  public static requestCharge: string = "x-ms-request-charge";
+  public static resourceQuota: string = "x-ms-resource-quota";
+  public static resourceUsage: string = "x-ms-resource-usage";
+  public static retryAfterMs: string = "x-ms-retry-after-ms";
+  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
+  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
+  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
+  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
+  public static autoPilotThroughput = "ProvisionedThroughputSettings";
+  public static autoPilotTier = "x-ms-cosmos-offer-autopilot-tier";
+  public static partitionKey: string = "x-ms-documentdb-partitionkey";
+  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
+  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
+}
+
+export class ApiType {
+  // Mapped to hexadecimal values in the backend
+  public static readonly MongoDB: number = 1;
+  public static readonly Gremlin: number = 2;
+  public static readonly Cassandra: number = 4;
+  public static readonly Table: number = 8;
+  public static readonly SQL: number = 16;
+}
+
+export class HttpStatusCodes {
+  public static readonly OK: number = 200;
+  public static readonly Created: number = 201;
+  public static readonly Accepted: number = 202;
+  public static readonly NoContent: number = 204;
+  public static readonly Unauthorized: number = 401;
+  public static readonly Forbidden: number = 403;
+  public static readonly NotFound: number = 404;
+  public static readonly TooManyRequests: number = 429;
+  public static readonly Conflict: number = 409;
+
+  public static readonly InternalServerError: number = 500;
+  public static readonly BadGateway: number = 502;
+  public static readonly ServiceUnavailable: number = 503;
+  public static readonly GatewayTimeout: number = 504;
+
+  public static readonly RetryableStatusCodes: number[] = [
+    HttpStatusCodes.TooManyRequests,
+    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
+    HttpStatusCodes.BadGateway,
+    HttpStatusCodes.ServiceUnavailable,
+    HttpStatusCodes.GatewayTimeout
+  ];
+}
+
+export class Urls {
+  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
+  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
+}
+
+export class HashRoutePrefixes {
+  public static databases: string = "/dbs/{db_id}";
+  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
+  public static sprocHash: string = "/sprocs/";
+  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
+  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
+  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
+
+  public static databasesWithId(databaseId: string): string {
+    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static collectionsWithIds(databaseId: string, collectionId: string): string {
+    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  public static sprocWithIds(
+    databaseId: string,
+    collectionId: string,
+    sprocId: string,
+    stripFirstSlash: boolean = true
+  ): string {
+    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
+
+    const transformedSprocRoute: string = transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{sproc_id}", sprocId);
+    if (!!stripFirstSlash) {
+      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
+    }
+
+    return transformedSprocRoute;
+  }
+
+  public static conflictsWithIds(databaseId: string, collectionId: string) {
+    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
+  }
+
+  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
+    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
+
+    return transformedDatabasePrefix
+      .replace("{coll_id}", collectionId)
+      .replace("{doc_id}", docId)
+      .replace("/", ""); // strip the first slash since hasher adds it
+  }
+}
+
+export class ConfigurationOverridesValues {
+  public static IsBsonSchemaV2: string = "true";
+}
+
+export class KeyCodes {
+  public static Space: number = 32;
+  public static Enter: number = 13;
+  public static Escape: number = 27;
+  public static UpArrow: number = 38;
+  public static DownArrow: number = 40;
+  public static LeftArrow: number = 37;
+  public static RightArrow: number = 39;
+  public static Tab: number = 9;
+}
+
+export class TryCosmosExperience {
+  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
+  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
+  public static collectionsPerAccount: number = 3;
+  public static maxRU: number = 5000;
+  public static defaultRU: number = 3000;
+}
+
+export class OfferVersions {
+  public static V1: string = "V1";
+  public static V2: string = "V2";
+}
+
+export enum ConflictOperationType {
+  Replace = "replace",
+  Create = "create",
+  Delete = "delete"
+}
+
+export class AutoPilot {
+  public static tier1Text: string = "4,000 RU/s";
+  public static tier2Text: string = "20,000 RU/s";
+  public static tier3Text: string = "100,000 RU/s";
+  public static tier4Text: string = "500,000 RU/s";
+
+  public static tierText = {
+    [AutopilotTier.Tier1]: "Tier 1",
+    [AutopilotTier.Tier2]: "Tier 2",
+    [AutopilotTier.Tier3]: "Tier 3",
+    [AutopilotTier.Tier4]: "Tier 4"
+  };
+
+  public static tierMaxRus = {
+    [AutopilotTier.Tier1]: 2000,
+    [AutopilotTier.Tier2]: 20000,
+    [AutopilotTier.Tier3]: 100000,
+    [AutopilotTier.Tier4]: 500000
+  };
+
+  public static tierMinRus = {
+    [AutopilotTier.Tier1]: 0,
+    [AutopilotTier.Tier2]: 0,
+    [AutopilotTier.Tier3]: 0,
+    [AutopilotTier.Tier4]: 0
+  };
+
+  public static tierStorageInGB = {
+    [AutopilotTier.Tier1]: 50,
+    [AutopilotTier.Tier2]: 200,
+    [AutopilotTier.Tier3]: 1000,
+    [AutopilotTier.Tier4]: 5000
+  };
+}
+
+export class DataExplorerVersions {
+  public static readonly v_1_0_0: string = "1.0.0";
+  public static readonly v_1_0_1: string = "1.0.1";
+}
+
+export class DataExplorerFeatures {
+  public static offerCache: string = "OfferCache";
+}
+
+export const DataExplorerFeaturesVersions: any = {
+  OfferCache: DataExplorerVersions.v_1_0_1
+};
+
+export const EmulatorMasterKey =
+  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
+  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+
+// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
+export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
+
+export class Notebook {
+  public static readonly defaultBasePath = "./notebooks";
+  public static readonly heartbeatDelayMs = 5000;
+  public static readonly kernelRestartInitialDelayMs = 1000;
+  public static readonly kernelRestartMaxDelayMs = 20000;
+  public static readonly autoSaveIntervalMs = 120000;
+}
+
+export class SparkLibrary {
+  public static readonly nameMinLength = 3;
+  public static readonly nameMaxLength = 63;
+}
+
+export class AnalyticalStorageTtl {
+  public static readonly Days90: number = 7776000;
+  public static readonly Infinite: number = -1;
+  public static readonly Disabled: number = 0;
+}

src/Common/CosmosClient.test.ts

@@ -0,0 +1,134 @@
+import { CosmosClient, tokenProvider, endpoint, requestPlugin, getTokenFromAuthService } from "./CosmosClient";
+import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
+import { config, Platform } from "../Config";
+
+describe("tokenProvider", () => {
+  const options = {
+    verb: "GET" as any,
+    path: "/",
+    resourceId: "",
+    resourceType: "dbs" as ResourceType,
+    headers: {},
+    getAuthorizationTokenUsingMasterKey: () => ""
+  };
+
+  beforeEach(() => {
+    window.dataExplorer = { extensionEndpoint: () => "https://main.documentdb.ext.azure.com" } as any;
+    window.fetch = jest.fn().mockImplementation(() => {
+      return {
+        json: () => "{}",
+        headers: new Map()
+      };
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("calls the auth token service if no master key is set", async () => {
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(1);
+  });
+
+  it("does not call the auth service if a master key is set", async () => {
+    CosmosClient.masterKey("foo");
+    await tokenProvider(options);
+    expect((window.fetch as any).mock.calls.length).toBe(0);
+  });
+});
+
+describe("getTokenFromAuthService", () => {
+  beforeEach(() => {
+    delete window.dataExplorer;
+    delete config.BACKEND_ENDPOINT;
+    window.fetch = jest.fn().mockImplementation(() => {
+      return {
+        json: () => "{}",
+        headers: new Map()
+      };
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("builds the correct URL in production", () => {
+    window.dataExplorer = { extensionEndpoint: () => "https://main.documentdb.ext.azure.com" } as any;
+    getTokenFromAuthService("GET", "dbs", "foo");
+    expect(window.fetch).toHaveBeenCalledWith(
+      "https://main.documentdb.ext.azure.com/api/guest/runtimeproxy/authorizationTokens",
+      expect.any(Object)
+    );
+  });
+
+  it("builds the correct URL in dev", () => {
+    config.BACKEND_ENDPOINT = "https://localhost:1234";
+    getTokenFromAuthService("GET", "dbs", "foo");
+    expect(window.fetch).toHaveBeenCalledWith(
+      "https://localhost:1234/api/guest/runtimeproxy/authorizationTokens",
+      expect.any(Object)
+    );
+  });
+});
+
+describe("endpoint", () => {
+  it("falls back to _databaseAccount", () => {
+    CosmosClient.databaseAccount({
+      id: "foo",
+      name: "foo",
+      location: "foo",
+      type: "foo",
+      kind: "foo",
+      tags: [],
+      properties: {
+        documentEndpoint: "bar",
+        gremlinEndpoint: "foo",
+        tableEndpoint: "foo",
+        cassandraEndpoint: "foo"
+      }
+    });
+    expect(endpoint()).toEqual("bar");
+  });
+  it("uses _endpoint if set", () => {
+    CosmosClient.endpoint("baz");
+    expect(endpoint()).toEqual("baz");
+  });
+});
+
+describe("requestPlugin", () => {
+  beforeEach(() => {
+    delete window.dataExplorerPlatform;
+    delete config.PROXY_PATH;
+    delete config.BACKEND_ENDPOINT;
+    delete config.PROXY_PATH;
+  });
+
+  describe("Hosted", () => {
+    it("builds a proxy URL in development", () => {
+      const next = jest.fn();
+      config.platform = Platform.Hosted;
+      config.BACKEND_ENDPOINT = "https://localhost:1234";
+      config.PROXY_PATH = "/proxy";
+      const headers = {};
+      const endpoint = "https://docs.azure.com";
+      const path = "/dbs/foo";
+      requestPlugin({ endpoint, headers, path } as any, next as any);
+      expect(next.mock.calls[0][0]).toMatchSnapshot();
+    });
+  });
+
+  describe("Emulator", () => {
+    it("builds a url for emulator proxy via webpack", () => {
+      const next = jest.fn();
+      config.platform = Platform.Emulator;
+      config.PROXY_PATH = "/proxy";
+      const headers = {};
+      const endpoint = "";
+      const path = "/dbs/foo";
+      requestPlugin({ endpoint, headers, path } as any, next as any);
+      expect(next.mock.calls[0][0]).toMatchSnapshot();
+    });
+  });
+});

src/Common/CosmosClient.ts

@@ -0,0 +1,176 @@
+import * as Cosmos from "@azure/cosmos";
+import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
+import { DatabaseAccount } from "../Contracts/DataModels";
+import { HttpHeaders, EmulatorMasterKey } from "./Constants";
+import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { config, Platform } from "../Config";
+
+let _client: Cosmos.CosmosClient;
+let _masterKey: string;
+let _endpoint: string;
+let _authorizationToken: string;
+let _accessToken: string;
+let _databaseAccount: DatabaseAccount;
+let _subscriptionId: string;
+let _resourceGroup: string;
+let _resourceToken: string;
+
+const _global = typeof self === "undefined" ? window : self;
+
+export const tokenProvider = async (requestInfo: RequestInfo) => {
+  const { verb, resourceId, resourceType, headers } = requestInfo;
+  if (config.platform === Platform.Emulator) {
+    // TODO Remove any. SDK expects a return value for tokenProvider, but we are mutating the header object instead.
+    return setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey) as any;
+  }
+
+  if (_masterKey) {
+    // TODO Remove any. SDK expects a return value for tokenProvider, but we are mutating the header object instead.
+    return setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, _masterKey) as any;
+  }
+
+  if (_resourceToken) {
+    return _resourceToken;
+  }
+
+  const result = await getTokenFromAuthService(verb, resourceType, resourceId);
+  headers[HttpHeaders.msDate] = result.XDate;
+  return decodeURIComponent(result.PrimaryReadWriteToken);
+};
+
+export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
+  requestContext.endpoint = config.PROXY_PATH;
+  requestContext.headers["x-ms-proxy-target"] = endpoint();
+  return next(requestContext);
+};
+
+export const endpoint = () => {
+  if (config.platform === Platform.Emulator) {
+    return config.EMULATOR_ENDPOINT || window.parent.location.origin;
+  }
+  return _endpoint || (_databaseAccount && _databaseAccount.properties && _databaseAccount.properties.documentEndpoint);
+};
+
+export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {
+  try {
+    const host = config.BACKEND_ENDPOINT || _global.dataExplorer.extensionEndpoint();
+    const response = await _global.fetch(host + "/api/guest/runtimeproxy/authorizationTokens", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        "x-ms-encrypted-auth-token": _accessToken
+      },
+      body: JSON.stringify({
+        verb,
+        resourceType,
+        resourceId
+      })
+    });
+    //TODO I am not sure why we have to parse the JSON again here. fetch should do it for us when we call .json()
+    const result = JSON.parse(await response.json());
+    return result;
+  } catch (error) {
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Error,
+      `Failed to get authorization headers for ${resourceType}: ${JSON.stringify(error)}`
+    );
+    return Promise.reject(error);
+  }
+}
+
+export const CosmosClient = {
+  client(): Cosmos.CosmosClient {
+    if (_client) {
+      return _client;
+    }
+    const options: Cosmos.CosmosClientOptions = {
+      endpoint: endpoint() || " ", // CosmosClient gets upset if we pass a falsy value here
+      key: _masterKey,
+      tokenProvider,
+      connectionPolicy: {
+        enableEndpointDiscovery: false
+      },
+      userAgentSuffix: "Azure Portal"
+    };
+
+    // In development we proxy requests to the backend via webpack. This is removed in production bundles.
+    if (process.env.NODE_ENV === "development") {
+      (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
+    }
+    _client = new Cosmos.CosmosClient(options);
+    return _client;
+  },
+
+  authorizationToken(value?: string): string {
+    if (typeof value === "undefined") {
+      return _authorizationToken;
+    }
+    _authorizationToken = value;
+    _client = null;
+    return value;
+  },
+
+  accessToken(value?: string): string {
+    if (typeof value === "undefined") {
+      return _accessToken;
+    }
+    _accessToken = value;
+    _client = null;
+    return value;
+  },
+
+  masterKey(value?: string): string {
+    if (typeof value === "undefined") {
+      return _masterKey;
+    }
+    _client = null;
+    _masterKey = value;
+    return value;
+  },
+
+  endpoint(value?: string): string {
+    if (typeof value === "undefined") {
+      return _endpoint;
+    }
+    _client = null;
+    _endpoint = value;
+    return value;
+  },
+
+  databaseAccount(value?: DatabaseAccount): DatabaseAccount {
+    if (typeof value === "undefined") {
+      return _databaseAccount || ({} as any);
+    }
+    _client = null;
+    _databaseAccount = value;
+    return value;
+  },
+
+  subscriptionId(value?: string): string {
+    if (typeof value === "undefined") {
+      return _subscriptionId;
+    }
+    _client = null;
+    _subscriptionId = value;
+    return value;
+  },
+
+  resourceGroup(value?: string): string {
+    if (typeof value === "undefined") {
+      return _resourceGroup;
+    }
+    _client = null;
+    _resourceGroup = value;
+    return value;
+  },
+
+  resourceToken(value?: string): string {
+    if (typeof value === "undefined") {
+      return _resourceToken;
+    }
+    _client = null;
+    _resourceToken = value;
+    return value;
+  }
+};

src/Common/DataAccessUtilityBase.test.ts

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

src/Common/DataAccessUtilityBase.ts

@@ -0,0 +1,678 @@
+import * as _ from "underscore";
+import * as Constants from "./Constants";
+import * as DataModels from "../Contracts/DataModels";
+import * as HeadersUtility from "./HeadersUtility";
+import * as ViewModels from "../Contracts/ViewModels";
+import Q from "q";
+import {
+  ConflictDefinition,
+  ContainerDefinition,
+  ContainerResponse,
+  DatabaseResponse,
+  FeedOptions,
+  ItemDefinition,
+  PartitionKeyDefinition,
+  QueryIterator,
+  Resource,
+  TriggerDefinition
+} from "@azure/cosmos";
+import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
+import { CosmosClient } from "./CosmosClient";
+import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+import { MessageHandler } from "./MessageHandler";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
+import { OfferUtils } from "../Utils/OfferUtils";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+
+export function getCommonQueryOptions(options: FeedOptions): any {
+  const storedItemPerPageSetting: number = LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage);
+  options = options || {};
+  options.populateQueryMetrics = true;
+  options.enableScanInQuery = options.enableScanInQuery || true;
+  if (!options.partitionKey) {
+    options.forceQueryPlan = true;
+  }
+  options.maxItemCount =
+    options.maxItemCount ||
+    (storedItemPerPageSetting !== undefined && storedItemPerPageSetting) ||
+    Constants.Queries.itemsPerPage;
+  options.maxDegreeOfParallelism = LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism);
+
+  return options;
+}
+
+// TODO: Add timeout for all promises
+export abstract class DataAccessUtilityBase {
+  public queryDocuments(
+    databaseId: string,
+    containerId: string,
+    query: string,
+    options: any
+  ): Q.Promise<QueryIterator<ItemDefinition & Resource>> {
+    options = getCommonQueryOptions(options);
+    const documentsIterator = CosmosClient.client()
+      .database(databaseId)
+      .container(containerId)
+      .items.query(query, options);
+    return Q(documentsIterator);
+  }
+
+  public readStoredProcedures(
+    collection: ViewModels.Collection,
+    options?: any
+  ): Q.Promise<DataModels.StoredProcedure[]> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.storedProcedures.readAll(options)
+        .fetchAll()
+        .then(response => response.resources as DataModels.StoredProcedure[])
+    );
+  }
+
+  public readStoredProcedure(
+    collection: ViewModels.Collection,
+    requestedResource: DataModels.Resource,
+    options?: any
+  ): Q.Promise<DataModels.StoredProcedure> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.storedProcedure(requestedResource.id)
+        .read(options)
+        .then(response => response.resource as DataModels.StoredProcedure)
+    );
+  }
+  public readUserDefinedFunctions(
+    collection: ViewModels.Collection,
+    options: any
+  ): Q.Promise<DataModels.UserDefinedFunction[]> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.userDefinedFunctions.readAll(options)
+        .fetchAll()
+        .then(response => response.resources as DataModels.UserDefinedFunction[])
+    );
+  }
+  public readUserDefinedFunction(
+    collection: ViewModels.Collection,
+    requestedResource: DataModels.Resource,
+    options?: any
+  ): Q.Promise<DataModels.UserDefinedFunction> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.userDefinedFunction(requestedResource.id)
+        .read(options)
+        .then(response => response.resource as DataModels.UserDefinedFunction)
+    );
+  }
+
+  public readTriggers(collection: ViewModels.Collection, options: any): Q.Promise<DataModels.Trigger[]> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.triggers.readAll(options)
+        .fetchAll()
+        .then(response => response.resources as DataModels.Trigger[])
+    );
+  }
+
+  public readTrigger(
+    collection: ViewModels.Collection,
+    requestedResource: DataModels.Resource,
+    options?: any
+  ): Q.Promise<DataModels.Trigger> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.trigger(requestedResource.id)
+        .read(options)
+        .then(response => response.resource as DataModels.Trigger)
+    );
+  }
+
+  public executeStoredProcedure(
+    collection: ViewModels.Collection,
+    storedProcedure: ViewModels.StoredProcedure,
+    partitionKeyValue: any,
+    params: any[]
+  ): Q.Promise<any> {
+    // TODO remove this deferred. Kept it because of timeout code at bottom of function
+    const deferred = Q.defer<any>();
+
+    CosmosClient.client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .scripts.storedProcedure(storedProcedure.id())
+      .execute(partitionKeyValue, params, { enableScriptLogging: true })
+      .then(response =>
+        deferred.resolve({
+          result: response.resource,
+          scriptLogs: response.headers[Constants.HttpHeaders.scriptLogResults]
+        })
+      )
+      .catch(error => deferred.reject(error));
+
+    return deferred.promise.timeout(
+      Constants.ClientDefaults.requestTimeoutMs,
+      `Request timed out while executing stored procedure ${storedProcedure.id()}`
+    );
+  }
+
+  public readDocument(collection: ViewModels.CollectionBase, documentId: ViewModels.DocumentId): Q.Promise<any> {
+    const partitionKey = documentId.partitionKeyValue;
+
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .item(documentId.id(), partitionKey)
+        .read()
+        .then(response => response.resource)
+    );
+  }
+
+  public getPartitionKeyHeaderForConflict(conflictId: ViewModels.ConflictId): Object {
+    const partitionKeyDefinition: DataModels.PartitionKey = conflictId.partitionKey;
+    const partitionKeyValue: any = conflictId.partitionKeyValue;
+
+    return this.getPartitionKeyHeader(partitionKeyDefinition, partitionKeyValue);
+  }
+
+  public getPartitionKeyHeader(partitionKeyDefinition: DataModels.PartitionKey, partitionKeyValue: any): Object {
+    if (!partitionKeyDefinition) {
+      return undefined;
+    }
+
+    if (partitionKeyValue === undefined) {
+      return [{}];
+    }
+
+    return [partitionKeyValue];
+  }
+
+  public updateCollection(
+    databaseId: string,
+    collectionId: string,
+    newCollection: DataModels.Collection,
+    options: any = {}
+  ): Q.Promise<DataModels.Collection> {
+    return Q(
+      CosmosClient.client()
+        .database(databaseId)
+        .container(collectionId)
+        .replace(newCollection as ContainerDefinition, options)
+        .then(async (response: ContainerResponse) => {
+          return this.refreshCachedResources().then(() => response.resource as DataModels.Collection);
+        })
+    );
+  }
+
+  public updateDocument(
+    collection: ViewModels.CollectionBase,
+    documentId: ViewModels.DocumentId,
+    newDocument: any
+  ): Q.Promise<any> {
+    const partitionKey = documentId.partitionKeyValue;
+
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .item(documentId.id(), partitionKey)
+        .replace(newDocument)
+        .then(response => response.resource)
+    );
+  }
+
+  public updateOffer(
+    offer: DataModels.Offer,
+    newOffer: DataModels.Offer,
+    options?: RequestOptions
+  ): Q.Promise<DataModels.Offer> {
+    return Q(
+      CosmosClient.client()
+        .offer(offer.id)
+        .replace(newOffer, options)
+        .then(response => {
+          return Promise.all([this.refreshCachedOffers(), this.refreshCachedResources()]).then(() => response.resource);
+        })
+    );
+  }
+
+  public updateStoredProcedure(
+    collection: ViewModels.Collection,
+    storedProcedure: DataModels.StoredProcedure,
+    options: any
+  ): Q.Promise<DataModels.StoredProcedure> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.storedProcedure(storedProcedure.id)
+        .replace(storedProcedure, options)
+        .then(response => response.resource as DataModels.StoredProcedure)
+    );
+  }
+
+  public updateUserDefinedFunction(
+    collection: ViewModels.Collection,
+    userDefinedFunction: DataModels.UserDefinedFunction,
+    options?: any
+  ): Q.Promise<DataModels.UserDefinedFunction> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.userDefinedFunction(userDefinedFunction.id)
+        .replace(userDefinedFunction, options)
+        .then(response => response.resource as DataModels.StoredProcedure)
+    );
+  }
+
+  public updateTrigger(
+    collection: ViewModels.Collection,
+    trigger: DataModels.Trigger,
+    options?: any
+  ): Q.Promise<DataModels.Trigger> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.trigger(trigger.id)
+        .replace(trigger as TriggerDefinition, options)
+        .then(response => response.resource as DataModels.Trigger)
+    );
+  }
+
+  public createDocument(collection: ViewModels.CollectionBase, newDocument: any): Q.Promise<any> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .items.create(newDocument)
+        .then(response => response.resource as DataModels.StoredProcedure)
+    );
+  }
+
+  public createStoredProcedure(
+    collection: ViewModels.Collection,
+    newStoredProcedure: DataModels.StoredProcedure,
+    options?: any
+  ): Q.Promise<DataModels.StoredProcedure> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.storedProcedures.create(newStoredProcedure, options)
+        .then(response => response.resource as DataModels.StoredProcedure)
+    );
+  }
+
+  public createUserDefinedFunction(
+    collection: ViewModels.Collection,
+    newUserDefinedFunction: DataModels.UserDefinedFunction,
+    options: any
+  ): Q.Promise<DataModels.UserDefinedFunction> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.userDefinedFunctions.create(newUserDefinedFunction, options)
+        .then(response => response.resource as DataModels.UserDefinedFunction)
+    );
+  }
+
+  public createTrigger(
+    collection: ViewModels.Collection,
+    newTrigger: DataModels.Trigger,
+    options?: any
+  ): Q.Promise<DataModels.Trigger> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.triggers.create(newTrigger as TriggerDefinition, options)
+        .then(response => response.resource as DataModels.Trigger)
+    );
+  }
+
+  public deleteDocument(collection: ViewModels.CollectionBase, documentId: ViewModels.DocumentId): Q.Promise<any> {
+    const partitionKey = documentId.partitionKeyValue;
+
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .item(documentId.id(), partitionKey)
+        .delete()
+    );
+  }
+
+  public deleteConflict(
+    collection: ViewModels.CollectionBase,
+    conflictId: ViewModels.ConflictId,
+    options: any = {}
+  ): Q.Promise<any> {
+    options.partitionKey = options.partitionKey || this.getPartitionKeyHeaderForConflict(conflictId);
+
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .conflict(conflictId.id())
+        .delete(options)
+    );
+  }
+
+  public deleteCollection(collection: ViewModels.Collection, options: any): Q.Promise<any> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .delete()
+        .then(() => this.refreshCachedResources())
+    );
+  }
+
+  public deleteDatabase(database: ViewModels.Database, options: any): Q.Promise<any> {
+    return Q(
+      CosmosClient.client()
+        .database(database.id())
+        .delete()
+        .then(() => this.refreshCachedResources())
+    );
+  }
+
+  public deleteStoredProcedure(
+    collection: ViewModels.Collection,
+    storedProcedure: DataModels.StoredProcedure,
+    options: any
+  ): Q.Promise<any> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.storedProcedure(storedProcedure.id)
+        .delete()
+    );
+  }
+
+  public deleteUserDefinedFunction(
+    collection: ViewModels.Collection,
+    userDefinedFunction: DataModels.UserDefinedFunction,
+    options: any
+  ): Q.Promise<any> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.userDefinedFunction(userDefinedFunction.id)
+        .delete()
+    );
+  }
+
+  public deleteTrigger(collection: ViewModels.Collection, trigger: DataModels.Trigger, options: any): Q.Promise<any> {
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .scripts.trigger(trigger.id)
+        .delete()
+    );
+  }
+
+  public readCollections(database: ViewModels.Database, options: any): Q.Promise<DataModels.Collection[]> {
+    return Q(
+      CosmosClient.client()
+        .database(database.id())
+        .containers.readAll()
+        .fetchAll()
+        .then(response => response.resources as DataModels.Collection[])
+    );
+  }
+
+  public readCollection(databaseId: string, collectionId: string): Q.Promise<DataModels.Collection> {
+    return Q(
+      CosmosClient.client()
+        .database(databaseId)
+        .container(collectionId)
+        .read()
+        .then(response => response.resource)
+    );
+  }
+
+  public readCollectionQuotaInfo(
+    collection: ViewModels.Collection,
+    options: any
+  ): Q.Promise<DataModels.CollectionQuotaInfo> {
+    options = options || {};
+    options.populateQuotaInfo = true;
+    options.initialHeaders = options.initialHeaders || {};
+    options.initialHeaders[Constants.HttpHeaders.populatePartitionStatistics] = true;
+
+    return Q(
+      CosmosClient.client()
+        .database(collection.databaseId)
+        .container(collection.id())
+        .read(options)
+        // TODO any needed because SDK does not properly type response.resource.statistics
+        .then((response: any) => {
+          let quota: DataModels.CollectionQuotaInfo = HeadersUtility.getQuota(response.headers);
+          quota["usageSizeInKB"] = response.resource.statistics.reduce(
+            (
+              previousValue: number,
+              currentValue: DataModels.Statistic,
+              currentIndex: number,
+              array: DataModels.Statistic[]
+            ) => {
+              return previousValue + currentValue.sizeInKB;
+            },
+            0
+          );
+          quota["numPartitions"] = response.resource.statistics.length;
+          quota["uniqueKeyPolicy"] = collection.uniqueKeyPolicy; // TODO: Remove after refactoring (#119617)
+          return quota;
+        })
+    );
+  }
+
+  public readOffers(options: any): Q.Promise<DataModels.Offer[]> {
+    return Q(
+      CosmosClient.client()
+        .offers.readAll()
+        .fetchAll()
+        .then(response => response.resources)
+    );
+  }
+
+  public readOffer(requestedResource: DataModels.Offer, options: any): Q.Promise<DataModels.OfferWithHeaders> {
+    options = options || {};
+    options.initialHeaders = options.initialHeaders || {};
+    if (!OfferUtils.isOfferV1(requestedResource)) {
+      options.initialHeaders[Constants.HttpHeaders.populateCollectionThroughputInfo] = true;
+    }
+
+    return Q(
+      CosmosClient.client()
+        .offer(requestedResource.id)
+        .read(options)
+        .then(response => ({ ...response.resource, headers: response.headers }))
+    );
+  }
+
+  public readDatabases(options: any): Q.Promise<DataModels.Database[]> {
+    return Q(
+      CosmosClient.client()
+        .databases.readAll()
+        .fetchAll()
+        .then(response => response.resources as DataModels.Database[])
+    );
+  }
+
+  public 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.autoPilotThroughput]: JSON.stringify({
+              maxThroughput: request.autoPilot.maxThroughput
+            })
+          }
+        : {
+            [Constants.HttpHeaders.autoPilotTier]: request.autoPilot.autopilotTier
+          }
+      : undefined;
+    if (databaseLevelThroughput) {
+      if (request.autoPilot) {
+        databaseOptions.initialHeaders = initialHeaders;
+      }
+      createBody.throughput = offerThroughput;
+    }
+
+    return Q(
+      CosmosClient.client()
+        .databases.createIfNotExists(createBody, databaseOptions)
+        .then(response => {
+          return response.database.containers.create(
+            {
+              id: collectionId,
+              partitionKey: (partitionKey || undefined) as PartitionKeyDefinition,
+              indexingPolicy: indexingPolicy ? indexingPolicy : undefined,
+              uniqueKeyPolicy: uniqueKeyPolicy ? uniqueKeyPolicy : undefined,
+              analyticalStorageTtl: analyticalStorageTtl,
+              throughput: databaseLevelThroughput || request.autoPilot ? undefined : offerThroughput
+            } as ContainerRequest, // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
+            {
+              initialHeaders: databaseLevelThroughput ? undefined : initialHeaders
+            }
+          );
+        })
+        .then(containerResponse => containerResponse.resource)
+        .finally(() => this.refreshCachedResources(options))
+    );
+  }
+
+  public createDatabase(request: DataModels.CreateDatabaseRequest, options: any): Q.Promise<DataModels.Database> {
+    var deferred = Q.defer<DataModels.Database>();
+
+    this._createDatabase(request, options).then(
+      (createdDatabase: DataModels.Database) => {
+        this.refreshCachedOffers().then(() => {
+          deferred.resolve(createdDatabase);
+        });
+      },
+      _createDatabaseError => {
+        deferred.reject(_createDatabaseError);
+      }
+    );
+
+    return deferred.promise;
+  }
+
+  public refreshCachedOffers(): Q.Promise<void> {
+    if (MessageHandler.canSendMessage()) {
+      return MessageHandler.sendCachedDataMessage(MessageTypes.RefreshOffers, []);
+    } else {
+      return Q();
+    }
+  }
+
+  public refreshCachedResources(options?: any): Q.Promise<void> {
+    if (MessageHandler.canSendMessage()) {
+      return MessageHandler.sendCachedDataMessage(MessageTypes.RefreshResources, []);
+    } else {
+      return Q();
+    }
+  }
+
+  public readSubscription(subscriptionId: string, options: any): Q.Promise<DataModels.Subscription> {
+    throw new Error("Read subscription not supported on this platform");
+  }
+
+  public readSubscriptionDefaults(subscriptionId: string, quotaId: string, options: any): Q.Promise<string> {
+    throw new Error("Read subscription defaults not supported on this platform");
+  }
+
+  public queryConflicts(
+    databaseId: string,
+    containerId: string,
+    query: string,
+    options: any
+  ): Q.Promise<QueryIterator<ConflictDefinition & Resource>> {
+    const documentsIterator = CosmosClient.client()
+      .database(databaseId)
+      .container(containerId)
+      .conflicts.query(query, options);
+    return Q(documentsIterator);
+  }
+
+  public updateOfferThroughputBeyondLimit(
+    request: DataModels.UpdateOfferThroughputRequest,
+    options: any
+  ): Q.Promise<void> {
+    throw new Error("Updating throughput beyond specified limit is not supported on this platform");
+  }
+
+  private _createDatabase(
+    request: DataModels.CreateDatabaseRequest,
+    options: any = {}
+  ): Q.Promise<DataModels.Database> {
+    const { databaseId, databaseLevelThroughput, offerThroughput, autoPilot, hasAutoPilotV2FeatureFlag } = request;
+    const createBody: DatabaseRequest = { id: databaseId };
+    const databaseOptions: any = options && _.omit(options, "sharedOfferThroughput");
+    // TODO: replace when SDK support autopilot
+    const initialHeaders = autoPilot
+      ? !hasAutoPilotV2FeatureFlag
+        ? {
+            [Constants.HttpHeaders.autoPilotThroughput]: JSON.stringify({ maxThroughput: autoPilot.maxThroughput })
+          }
+        : {
+            [Constants.HttpHeaders.autoPilotTier]: autoPilot.autopilotTier
+          }
+      : undefined;
+    if (!!databaseLevelThroughput) {
+      if (autoPilot) {
+        databaseOptions.initialHeaders = initialHeaders;
+      }
+      createBody.throughput = offerThroughput;
+    }
+
+    return Q(
+      CosmosClient.client()
+        .databases.create(createBody, databaseOptions)
+        .then((response: DatabaseResponse) => {
+          return this.refreshCachedResources(databaseOptions).then(() => response.resource);
+        })
+    );
+  }
+}

src/Common/DeleteFeedback.ts

@@ -0,0 +1,15 @@
+import * as DataModels from "../Contracts/DataModels";
+
+export default class DeleteFeedback {
+  subscriptionId: string;
+  accountName: string;
+  apiType: DataModels.ApiKind;
+  feedback: string;
+
+  constructor(subscriptionId: string, accountName: string, apiType: DataModels.ApiKind, feedback: string) {
+    this.subscriptionId = subscriptionId;
+    this.accountName = accountName;
+    this.apiType = apiType;
+    this.feedback = feedback;
+  }
+}

src/Common/EditableUtility.ts

@@ -0,0 +1,94 @@
+import * as ko from "knockout";
+import * as ViewModels from "../Contracts/ViewModels";
+
+export default class EditableUtility {
+  public static observable<T>(initialValue?: T): ViewModels.Editable<T> {
+    var observable: ViewModels.Editable<T> = <ViewModels.Editable<T>>ko.observable<T>(initialValue);
+
+    observable.edits = ko.observableArray<T>([initialValue]);
+    observable.validations = ko.observableArray<(value: T) => boolean>([]);
+
+    observable.setBaseline = (baseline: T) => {
+      observable(baseline);
+      observable.edits([baseline]);
+    };
+
+    observable.getEditableCurrentValue = ko.computed<T>(() => {
+      const edits = (observable.edits && observable.edits()) || [];
+      if (edits.length === 0) {
+        return undefined;
+      }
+
+      return edits[edits.length - 1];
+    });
+
+    observable.getEditableOriginalValue = ko.computed<T>(() => {
+      const edits = (observable.edits && observable.edits()) || [];
+      if (edits.length === 0) {
+        return undefined;
+      }
+
+      return edits[0];
+    });
+
+    observable.editableIsDirty = ko.computed<boolean>(() => {
+      const edits = (observable.edits && observable.edits()) || [];
+      if (edits.length <= 1) {
+        return false;
+      }
+
+      let current: any = observable.getEditableCurrentValue();
+      let original: any = observable.getEditableOriginalValue();
+
+      switch (typeof current) {
+        case "string":
+        case "undefined":
+        case "number":
+        case "boolean":
+          current = current && current.toString();
+          break;
+
+        default:
+          current = JSON.stringify(current);
+          break;
+      }
+
+      switch (typeof original) {
+        case "string":
+        case "undefined":
+        case "number":
+        case "boolean":
+          original = original && original.toString();
+          break;
+
+        default:
+          original = JSON.stringify(original);
+          break;
+      }
+
+      if (current !== original) {
+        return true;
+      }
+
+      return false;
+    });
+
+    observable.subscribe(edit => {
+      var edits = observable.edits && observable.edits();
+      if (!edits) {
+        return;
+      }
+      edits.push(edit);
+      observable.edits(edits);
+    });
+
+    observable.editableIsValid = ko.observable<boolean>(true);
+    observable.subscribe(value => {
+      const validations: ((value: T) => boolean)[] = (observable.validations && observable.validations()) || [];
+      const isValid = validations.every(validate => validate(value));
+      observable.editableIsValid(isValid);
+    });
+
+    return observable;
+  }
+}

src/Common/EnvironmentUtility.ts

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

src/Common/ErrorParserUtility.test.ts

@@ -0,0 +1,24 @@
+import * as ErrorParserUtility from "./ErrorParserUtility";
+
+describe("Error Parser Utility", () => {
+  describe("shouldEnableCrossPartitionKeyForResourceWithPartitionKey()", () => {
+    it("should parse a backend error correctly", () => {
+      // A fake error matching what is thrown by the SDK on a bad collection create request
+      const innerMessage =
+        "The partition key component definition path '/asdwqr31 @#$#$WRadf' could not be accepted, failed near position '10'. Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
+      const message = `Message: {\"Errors\":[\"${innerMessage}\"]}\r\nActivityId: 97b2e684-7505-4921-85f6-2513b9b28220, Request URI: /apps/89fdcf25-2a0b-4d2a-aab6-e161e565b26f/services/54911149-7bb1-4e7d-a1fa-22c8b36a4bb9/partitions/cc2a7a04-5f5a-4709-bcf7-8509b264963f/replicas/132304018743619218p, RequestStats: , SDK: Microsoft.Azure.Documents.Common/2.10.0`;
+      const err = new Error(message) as any;
+      err.code = 400;
+      err.body = {
+        code: "BadRequest",
+        message
+      };
+      err.headers = {};
+      err.activityId = "97b2e684-7505-4921-85f6-2513b9b28220";
+
+      const parsedError = ErrorParserUtility.parse(err);
+      expect(parsedError.length).toBe(1);
+      expect(parsedError[0].message).toBe(innerMessage);
+    });
+  });
+});

src/Common/ErrorParserUtility.ts

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

src/Common/HashMap.test.ts

@@ -0,0 +1,70 @@
+import { HashMap } from "./HashMap";
+
+describe("HashMap", () => {
+  it("should test if key/val exists", () => {
+    const map = new HashMap<number>();
+    map.set("a", 123);
+
+    expect(map.has("a")).toBe(true);
+    expect(map.has("b")).toBe(false);
+  });
+
+  it("should get object back", () => {
+    const map = new HashMap<string>();
+    map.set("a", "123");
+    map.set("a", "456");
+
+    expect(map.get("a")).toBe("456");
+    expect(map.get("a")).not.toBe("123");
+  });
+
+  it("should return the right size", () => {
+    const map = new HashMap<string>();
+    map.set("a", "123");
+    map.set("b", "456");
+
+    expect(map.size()).toBe(2);
+  });
+
+  it("should be iterable", () => {
+    const map = new HashMap<number>();
+    map.set("a", 1);
+    map.set("b", 10);
+    map.set("c", 100);
+    map.set("d", 1000);
+
+    let i = 0;
+    map.forEach((key: string, value: number) => {
+      i += value;
+    });
+    expect(i).toBe(1111);
+  });
+
+  it("should be deleted", () => {
+    const map = new HashMap<number>();
+    map.set("a", 1);
+    map.set("b", 10);
+
+    expect(map.delete("a")).toBe(true);
+    expect(map.delete("c")).toBe(false);
+    expect(map.has("a")).toBe(false);
+    expect(map.has("b")).toBe(true);
+  });
+
+  it("should clear", () => {
+    const map = new HashMap<number>();
+    map.set("a", 1);
+    map.clear();
+    expect(map.size()).toBe(0);
+    expect(map.has("a")).toBe(false);
+  });
+
+  it("should return all keys", () => {
+    const map = new HashMap<number>();
+    map.set("a", 1);
+    map.set("b", 1);
+    expect(map.keys()).toEqual(["a", "b"]);
+    map.clear();
+    expect(map.keys().length).toBe(0);
+  });
+});

src/Common/HashMap.ts

@@ -0,0 +1,45 @@
+/**
+ * Simple hashmap implementation that doesn't rely on ES6 Map nor polyfills
+ */
+export class HashMap<T> {
+  constructor(private container: { [key: string]: T } = {}) {}
+
+  public has(key: string): boolean {
+    return this.container.hasOwnProperty(key);
+  }
+
+  public set(key: string, value: T): void {
+    this.container[key] = value;
+  }
+
+  public get(key: string): T {
+    return this.container[key];
+  }
+
+  public size(): number {
+    return Object.keys(this.container).length;
+  }
+
+  public delete(key: string): boolean {
+    if (this.has(key)) {
+      delete this.container[key];
+      return true;
+    }
+
+    return false;
+  }
+
+  public clear(): void {
+    this.container = {};
+  }
+
+  public keys(): string[] {
+    return Object.keys(this.container);
+  }
+
+  public forEach(iteratorFct: (key: string, value: T) => void) {
+    for (const k in this.container) {
+      iteratorFct(k, this.container[k]);
+    }
+  }
+}

src/Common/HeadersUtility.test.ts

@@ -0,0 +1,25 @@
+import * as HeadersUtility from "./HeadersUtility";
+import { ExplorerSettings } from "../Shared/ExplorerSettings";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+
+describe("Headers Utility", () => {
+  describe("shouldEnableCrossPartitionKeyForResourceWithPartitionKey()", () => {
+    beforeEach(() => {
+      ExplorerSettings.createDefaultSettings();
+    });
+
+    it("should return true by default", () => {
+      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(true);
+    });
+
+    it("should return false if the enable cross partition key feed option is false", () => {
+      LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "false");
+      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(false);
+    });
+
+    it("should return true if the enable cross partition key feed option is true", () => {
+      LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "true");
+      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(true);
+    });
+  });
+});

src/Common/HeadersUtility.ts

@@ -0,0 +1,28 @@
+import * as Constants from "./Constants";
+
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+
+// x-ms-resource-quota: databases = 100; collections = 5000; users = 500000; permissions = 2000000;
+export function getQuota(responseHeaders: any): any {
+  return responseHeaders && responseHeaders[Constants.HttpHeaders.resourceQuota]
+    ? parseStringIntoObject(responseHeaders[Constants.HttpHeaders.resourceQuota])
+    : null;
+}
+
+export function shouldEnableCrossPartitionKey(): boolean {
+  return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
+}
+
+function parseStringIntoObject(resourceString: string) {
+  var entityObject: any = {};
+
+  if (resourceString) {
+    var entitiesArray: string[] = resourceString.split(";");
+    for (var i: any = 0; i < entitiesArray.length; i++) {
+      var entity: string[] = entitiesArray[i].split("=");
+      entityObject[entity[0]] = entity[1];
+    }
+  }
+
+  return entityObject;
+}

src/Common/IteratorUtilities.test.ts

@@ -0,0 +1,20 @@
+import { nextPage } from "./IteratorUtilities";
+
+describe("nextPage", () => {
+  it("returns results for the next page", async () => {
+    const fakeIterator = {
+      fetchNext: () =>
+        Promise.resolve({
+          resources: [],
+          hasMoreResults: false,
+          continuation: "foo",
+          queryMetrics: {},
+          requestCharge: 1,
+          headers: {},
+          activityId: "foo"
+        })
+    };
+
+    expect(await nextPage(fakeIterator, 10)).toMatchSnapshot();
+  });
+});

src/Common/IteratorUtilities.ts

@@ -0,0 +1,32 @@
+import { QueryResults } from "../Contracts/ViewModels";
+
+interface QueryResponse {
+  resources: any[];
+  hasMoreResults: boolean;
+  activityId: string;
+  requestCharge: number;
+}
+
+export interface MinimalQueryIterator {
+  fetchNext: () => Promise<QueryResponse>;
+}
+
+// Pick<QueryIterator<any>, "fetchNext">;
+
+export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
+  return documentsIterator.fetchNext().then(response => {
+    const documents = response.resources;
+    const headers = (response as any).headers || {}; // TODO this is a private key. Remove any
+    const itemCount = (documents && documents.length) || 0;
+    return {
+      documents,
+      hasMoreResults: response.hasMoreResults,
+      itemCount,
+      firstItemIndex: Number(firstItemIndex) + 1,
+      lastItemIndex: Number(firstItemIndex) + Number(itemCount),
+      headers,
+      activityId: response.activityId,
+      requestCharge: response.requestCharge
+    };
+  });
+}

src/Common/Logger.test.ts

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

src/Common/Logger.ts

@@ -0,0 +1,87 @@
+import { MessageHandler } from "./MessageHandler";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { appInsights } from "../Shared/appInsights";
+import { SeverityLevel } from "@microsoft/applicationinsights-web";
+
+// TODO: Move to a separate Diagnostics folder
+export class Logger {
+  public static logInfo(message: string | Record<string, any>, area: string, code?: number): void {
+    let logMessage: string;
+    if (typeof message === "string") {
+      logMessage = message;
+    } else {
+      logMessage = JSON.stringify(message, Object.getOwnPropertyNames(message));
+    }
+    const entry: Diagnostics.LogEntry = Logger._generateLogEntry(
+      Diagnostics.LogEntryLevel.Verbose,
+      logMessage,
+      area,
+      code
+    );
+    return Logger._logEntry(entry);
+  }
+
+  public static logWarning(message: string, area: string, code?: number): void {
+    const entry: Diagnostics.LogEntry = Logger._generateLogEntry(
+      Diagnostics.LogEntryLevel.Warning,
+      message,
+      area,
+      code
+    );
+    return Logger._logEntry(entry);
+  }
+
+  public static logError(message: string | Error, area: string, code?: number): void {
+    let logMessage: string;
+    if (typeof message === "string") {
+      logMessage = message;
+    } else {
+      logMessage = JSON.stringify(message, Object.getOwnPropertyNames(message));
+    }
+    const entry: Diagnostics.LogEntry = Logger._generateLogEntry(
+      Diagnostics.LogEntryLevel.Error,
+      logMessage,
+      area,
+      code
+    );
+    return Logger._logEntry(entry);
+  }
+
+  private static _logEntry(entry: Diagnostics.LogEntry): void {
+    MessageHandler.sendMessage({
+      type: MessageTypes.LogInfo,
+      data: JSON.stringify(entry)
+    });
+
+    const severityLevel = ((level: Diagnostics.LogEntryLevel): SeverityLevel => {
+      switch (level) {
+        case Diagnostics.LogEntryLevel.Custom:
+        case Diagnostics.LogEntryLevel.Debug:
+        case Diagnostics.LogEntryLevel.Verbose:
+          return SeverityLevel.Verbose;
+        case Diagnostics.LogEntryLevel.Warning:
+          return SeverityLevel.Warning;
+        case Diagnostics.LogEntryLevel.Error:
+          return SeverityLevel.Error;
+        default:
+          return SeverityLevel.Information;
+      }
+    })(entry.level);
+    appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  }
+
+  private static _generateLogEntry(
+    level: Diagnostics.LogEntryLevel,
+    message: string,
+    area: string,
+    code: number
+  ): Diagnostics.LogEntry {
+    return {
+      timestamp: new Date().getUTCSeconds(),
+      level: level,
+      message: message,
+      area: area,
+      code: code
+    };
+  }
+}

src/Common/MessageHandler.test.ts

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

src/Common/MessageHandler.ts

@@ -0,0 +1,85 @@
+import { MessageTypes } from "../Contracts/ExplorerContracts";
+import Q from "q";
+import * as _ from "underscore";
+import * as Constants from "./Constants";
+
+export interface CachedDataPromise<T> {
+  deferred: Q.Deferred<T>;
+  startTime: Date;
+  id: string;
+}
+
+/**
+ * For some reason, typescript emits a Map() in the compiled js output(despite the target being set to ES5) forcing us to define our own polyfill,
+ * so we define our own custom implementation of the ES6 Map to work around it.
+ */
+type Map = { [key: string]: CachedDataPromise<any> };
+
+export class MessageHandler {
+  protected static RequestMap: Map = {};
+
+  public static handleCachedDataMessage(message: any): void {
+    const messageContent = message && message.message;
+    if (
+      message == null ||
+      messageContent == null ||
+      messageContent.id == null ||
+      !MessageHandler.RequestMap[messageContent.id]
+    ) {
+      return;
+    }
+
+    const cachedDataPromise = MessageHandler.RequestMap[messageContent.id];
+    if (messageContent.error != null) {
+      cachedDataPromise.deferred.reject(messageContent.error);
+    } else {
+      cachedDataPromise.deferred.resolve(JSON.parse(messageContent.data));
+    }
+    MessageHandler.runGarbageCollector();
+  }
+
+  public static sendCachedDataMessage<TResponseDataModel>(
+    messageType: MessageTypes,
+    params: Object[],
+    timeoutInMs?: number
+  ): Q.Promise<TResponseDataModel> {
+    let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
+      deferred: Q.defer<TResponseDataModel>(),
+      startTime: new Date(),
+      id: _.uniqueId()
+    };
+    MessageHandler.RequestMap[cachedDataPromise.id] = cachedDataPromise;
+    MessageHandler.sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
+
+    //TODO: Use telemetry to measure optimal time to resolve/reject promises
+    return cachedDataPromise.deferred.promise.timeout(
+      timeoutInMs || Constants.ClientDefaults.requestTimeoutMs,
+      "Timed out while waiting for response from portal"
+    );
+  }
+
+  public static sendMessage(data: any): void {
+    if (MessageHandler.canSendMessage()) {
+      window.parent.postMessage(
+        {
+          signature: "pcIframe",
+          data: data
+        },
+        window.document.referrer
+      );
+    }
+  }
+
+  public static canSendMessage(): boolean {
+    return window.parent !== window;
+  }
+
+  protected static runGarbageCollector() {
+    Object.keys(MessageHandler.RequestMap).forEach((key: string) => {
+      const promise: Q.Promise<any> = MessageHandler.RequestMap[key].deferred.promise;
+      if (promise.isFulfilled() || promise.isRejected()) {
+        delete MessageHandler.RequestMap[key];
+      }
+    });
+  }
+}

src/Common/MongoProxyClient.test.ts

@@ -0,0 +1,297 @@
+import {
+  _createMongoCollectionWithARM,
+  deleteDocument,
+  getEndpoint,
+  queryDocuments,
+  readDocument,
+  updateDocument
+} from "./MongoProxyClient";
+import { AuthType } from "../AuthType";
+import { Collection, DatabaseAccount, DocumentId } from "../Contracts/ViewModels";
+import { config } from "../Config";
+import { CosmosClient } from "./CosmosClient";
+import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
+jest.mock("../ResourceProvider/ResourceProviderClient.ts");
+
+const databaseId = "testDB";
+
+const fetchMock = () => {
+  return Promise.resolve({
+    ok: true,
+    text: () => "{}",
+    json: () => "{}",
+    headers: new Map()
+  });
+};
+
+const partitionKeyProperty = "pk";
+
+const collection = {
+  id: () => "testCollection",
+  rid: "testCollectionrid",
+  partitionKeyProperty,
+  partitionKey: {
+    paths: ["/pk"],
+    kind: "Hash",
+    version: 1
+  }
+} as Collection;
+
+const documentId = ({
+  partitionKeyHeader: () => "[]",
+  self: "db/testDB/db/testCollection/docs/testId",
+  partitionKeyProperty,
+  partitionKey: {
+    paths: ["/pk"],
+    kind: "Hash",
+    version: 1
+  }
+} as unknown) as DocumentId;
+
+const databaseAccount = {
+  id: "foo",
+  name: "foo",
+  location: "foo",
+  type: "foo",
+  kind: "foo",
+  properties: {
+    documentEndpoint: "bar",
+    gremlinEndpoint: "foo",
+    tableEndpoint: "foo",
+    cassandraEndpoint: "foo"
+  }
+};
+
+describe("MongoProxyClient", () => {
+  describe("queryDocuments", () => {
+    beforeEach(() => {
+      delete config.BACKEND_ENDPOINT;
+      CosmosClient.databaseAccount(databaseAccount as any);
+      window.dataExplorer = {
+        extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
+        serverId: () => ""
+      } as any;
+      window.fetch = jest.fn().mockImplementation(fetchMock);
+    });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it("builds the correct URL", () => {
+      queryDocuments(databaseId, collection, true, "{}");
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+
+    it("builds the correct proxy URL in development", () => {
+      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      queryDocuments(databaseId, collection, true, "{}");
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://localhost:1234/api/mongo/explorer/resourcelist?db=testDB&coll=testCollection&resourceUrl=bardbs%2FtestDB%2Fcolls%2FtestCollection%2Fdocs%2F&rid=testCollectionrid&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+  });
+  describe("readDocument", () => {
+    beforeEach(() => {
+      delete config.MONGO_BACKEND_ENDPOINT;
+      CosmosClient.databaseAccount(databaseAccount as any);
+      window.dataExplorer = {
+        extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
+        serverId: () => ""
+      } as any;
+      window.fetch = jest.fn().mockImplementation(fetchMock);
+    });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it("builds the correct URL", () => {
+      readDocument(databaseId, collection, documentId);
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+
+    it("builds the correct proxy URL in development", () => {
+      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      readDocument(databaseId, collection, documentId);
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+  });
+  describe("createDocument", () => {
+    beforeEach(() => {
+      delete config.MONGO_BACKEND_ENDPOINT;
+      CosmosClient.databaseAccount(databaseAccount as any);
+      window.dataExplorer = {
+        extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
+        serverId: () => ""
+      } as any;
+      window.fetch = jest.fn().mockImplementation(fetchMock);
+    });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it("builds the correct URL", () => {
+      readDocument(databaseId, collection, documentId);
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+
+    it("builds the correct proxy URL in development", () => {
+      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      readDocument(databaseId, collection, documentId);
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+  });
+  describe("updateDocument", () => {
+    beforeEach(() => {
+      delete config.MONGO_BACKEND_ENDPOINT;
+      CosmosClient.databaseAccount(databaseAccount as any);
+      window.dataExplorer = {
+        extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
+        serverId: () => ""
+      } as any;
+      window.fetch = jest.fn().mockImplementation(fetchMock);
+    });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it("builds the correct URL", () => {
+      updateDocument(databaseId, collection, documentId, {});
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+
+    it("builds the correct proxy URL in development", () => {
+      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      updateDocument(databaseId, collection, documentId, {});
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+  });
+  describe("deleteDocument", () => {
+    beforeEach(() => {
+      delete config.MONGO_BACKEND_ENDPOINT;
+      CosmosClient.databaseAccount(databaseAccount as any);
+      window.dataExplorer = {
+        extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
+        serverId: () => ""
+      } as any;
+      window.fetch = jest.fn().mockImplementation(fetchMock);
+    });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it("builds the correct URL", () => {
+      deleteDocument(databaseId, collection, documentId);
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+
+    it("builds the correct proxy URL in development", () => {
+      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      deleteDocument(databaseId, collection, documentId);
+      expect(window.fetch).toHaveBeenCalledWith(
+        "https://localhost:1234/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
+        expect.any(Object)
+      );
+    });
+  });
+  describe("getEndpoint", () => {
+    beforeEach(() => {
+      delete config.MONGO_BACKEND_ENDPOINT;
+      delete window.authType;
+      CosmosClient.databaseAccount(databaseAccount as any);
+      window.dataExplorer = {
+        extensionEndpoint: () => "https://main.documentdb.ext.azure.com",
+        serverId: () => ""
+      } as any;
+    });
+
+    it("returns a production endpoint", () => {
+      const endpoint = getEndpoint(databaseAccount as DatabaseAccount);
+      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
+    });
+
+    it("returns a development endpoint", () => {
+      config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
+      const endpoint = getEndpoint(databaseAccount as DatabaseAccount);
+      expect(endpoint).toEqual("https://localhost:1234/api/mongo/explorer");
+    });
+
+    it("returns a guest endpoint", () => {
+      window.authType = AuthType.EncryptedToken;
+      const endpoint = getEndpoint(databaseAccount as DatabaseAccount);
+      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-03-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-03-01",
+        { properties: { options: { throughput: "400" }, resource: { id: "abc-collection" } } }
+      );
+    });
+  });
+});

src/Common/MongoProxyClient.ts

@@ -0,0 +1,475 @@
+import * as Constants from "../Common/Constants";
+import * as DataExplorerConstants from "../Common/Constants";
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+import EnvironmentUtility from "./EnvironmentUtility";
+import queryString from "querystring";
+import { AddDbUtilities } from "../Shared/AddDatabaseUtility";
+import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
+import { AuthType } from "../AuthType";
+import { Collection } from "../Contracts/ViewModels";
+import { config } from "../Config";
+import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { Constants as CosmosSDKConstants } from "@azure/cosmos";
+import { CosmosClient } from "./CosmosClient";
+import { MessageHandler } from "./MessageHandler";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
+import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
+import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
+
+const defaultHeaders = {
+  [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
+  [CosmosSDKConstants.HttpHeaders.MaxEntityCount]: "100",
+  [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15"
+};
+
+function authHeaders(): any {
+  if (window.authType === AuthType.EncryptedToken) {
+    return { [HttpHeaders.guestAccessToken]: CosmosClient.accessToken() };
+  } else {
+    return { [HttpHeaders.authorization]: CosmosClient.authorizationToken() };
+  }
+}
+
+export function queryIterator(databaseId: string, collection: Collection, query: string) {
+  let continuationToken: string = null;
+  return {
+    fetchNext: () => {
+      return queryDocuments(databaseId, collection, false, query).then(response => {
+        continuationToken = response.continuationToken;
+        let headers = {} as any;
+        response.headers.forEach((value: any, key: any) => {
+          headers[key] = value;
+        });
+        return {
+          resources: response.documents,
+          headers,
+          requestCharge: headers[CosmosSDKConstants.HttpHeaders.RequestCharge],
+          activityId: headers[CosmosSDKConstants.HttpHeaders.ActivityId],
+          hasMoreResults: !!continuationToken
+        };
+      });
+    }
+  };
+}
+
+interface QueryResponse {
+  continuationToken: string;
+  documents: DataModels.DocumentId[];
+  headers: Headers;
+}
+
+export function queryDocuments(
+  databaseId: string,
+  collection: Collection,
+  isResourceList: boolean,
+  query: string,
+  continuationToken?: string
+): Promise<QueryResponse> {
+  const databaseAccount = CosmosClient.databaseAccount();
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
+    rid: collection.rid,
+    rtype: "docs",
+    sid: CosmosClient.subscriptionId(),
+    rg: CosmosClient.resourceGroup(),
+    dba: databaseAccount.name,
+    pk:
+      collection && collection.partitionKey && !collection.partitionKey.systemKey ? collection.partitionKeyProperty : ""
+  };
+
+  const endpoint = getEndpoint(databaseAccount) || "";
+
+  const headers = {
+    ...defaultHeaders,
+    ...authHeaders(),
+    [CosmosSDKConstants.HttpHeaders.IsQuery]: "true",
+    [CosmosSDKConstants.HttpHeaders.PopulateQueryMetrics]: "true",
+    [CosmosSDKConstants.HttpHeaders.EnableScanInQuery]: "true",
+    [CosmosSDKConstants.HttpHeaders.EnableCrossPartitionQuery]: "true",
+    [CosmosSDKConstants.HttpHeaders.ParallelizeCrossPartitionQuery]: "true",
+    [HttpHeaders.contentType]: "application/query+json"
+  };
+
+  if (continuationToken) {
+    headers[CosmosSDKConstants.HttpHeaders.Continuation] = continuationToken;
+  }
+
+  const path = isResourceList ? "/resourcelist" : "";
+
+  return window
+    .fetch(`${endpoint}${path}?${queryString.stringify(params)}`, {
+      method: "POST",
+      body: JSON.stringify({ query }),
+      headers
+    })
+    .then(async response => {
+      if (response.ok) {
+        return {
+          continuationToken: response.headers.get(CosmosSDKConstants.HttpHeaders.Continuation),
+          documents: (await response.json()).Documents as DataModels.DocumentId[],
+          headers: response.headers
+        };
+      }
+      const errorMessage = await response.text();
+      if (response.status === HttpStatusCodes.Forbidden) {
+        MessageHandler.sendMessage({
+          type: MessageTypes.ForbiddenError,
+          reason: errorMessage
+        });
+      }
+      throw new Error(errorMessage);
+    });
+}
+
+export function readDocument(
+  databaseId: string,
+  collection: Collection,
+  documentId: ViewModels.DocumentId
+): Promise<DataModels.DocumentId> {
+  const databaseAccount = CosmosClient.databaseAccount();
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const idComponents = documentId.self.split("/");
+  const path = idComponents.slice(0, 4).join("/");
+  const rid = encodeURIComponent(idComponents[5]);
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
+    rid,
+    rtype: "docs",
+    sid: CosmosClient.subscriptionId(),
+    rg: CosmosClient.resourceGroup(),
+    dba: databaseAccount.name,
+    pk:
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+  };
+
+  const endpoint = getEndpoint(databaseAccount);
+  return window
+    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
+      method: "GET",
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: encodeURIComponent(
+          JSON.stringify(documentId.partitionKeyHeader())
+        )
+      }
+    })
+    .then(async response => {
+      if (response.ok) {
+        return response.json();
+      }
+      errorHandling(response);
+    });
+}
+
+export function createDocument(
+  databaseId: string,
+  collection: Collection,
+  partitionKeyProperty: string,
+  documentContent: any
+): Promise<DataModels.DocumentId> {
+  const databaseAccount = CosmosClient.databaseAccount();
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}dbs/${databaseId}/colls/${collection.id()}/docs/`,
+    rid: collection.rid,
+    rtype: "docs",
+    sid: CosmosClient.subscriptionId(),
+    rg: CosmosClient.resourceGroup(),
+    dba: databaseAccount.name,
+    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : ""
+  };
+
+  const endpoint = getEndpoint(databaseAccount);
+
+  return window
+    .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
+      method: "POST",
+      body: JSON.stringify(documentContent),
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders()
+      }
+    })
+    .then(async response => {
+      if (response.ok) {
+        return response.json();
+      }
+      errorHandling(response);
+    });
+}
+
+export function updateDocument(
+  databaseId: string,
+  collection: Collection,
+  documentId: ViewModels.DocumentId,
+  documentContent: any
+): Promise<DataModels.DocumentId> {
+  const databaseAccount = CosmosClient.databaseAccount();
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const idComponents = documentId.self.split("/");
+  const path = idComponents.slice(0, 5).join("/");
+  const rid = encodeURIComponent(idComponents[5]);
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
+    rid,
+    rtype: "docs",
+    sid: CosmosClient.subscriptionId(),
+    rg: CosmosClient.resourceGroup(),
+    dba: databaseAccount.name,
+    pk:
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+  };
+  const endpoint = getEndpoint(databaseAccount);
+
+  return window
+    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
+      method: "PUT",
+      body: documentContent,
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [HttpHeaders.contentType]: "application/json",
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader())
+      }
+    })
+    .then(async response => {
+      if (response.ok) {
+        return response.json();
+      }
+      errorHandling(response);
+    });
+}
+
+export function deleteDocument(
+  databaseId: string,
+  collection: Collection,
+  documentId: ViewModels.DocumentId
+): Promise<any> {
+  const databaseAccount = CosmosClient.databaseAccount();
+  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
+  const idComponents = documentId.self.split("/");
+  const path = idComponents.slice(0, 5).join("/");
+  const rid = encodeURIComponent(idComponents[5]);
+  const params = {
+    db: databaseId,
+    coll: collection.id(),
+    resourceUrl: `${resourceEndpoint}${path}/${rid}`,
+    rid,
+    rtype: "docs",
+    sid: CosmosClient.subscriptionId(),
+    rg: CosmosClient.resourceGroup(),
+    dba: databaseAccount.name,
+    pk:
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+  };
+  const endpoint = getEndpoint(databaseAccount);
+
+  return window
+    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
+      method: "DELETE",
+      headers: {
+        ...defaultHeaders,
+        ...authHeaders(),
+        [HttpHeaders.contentType]: "application/json",
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader())
+      }
+    })
+    .then(async response => {
+      if (response.ok) {
+        return;
+      }
+      errorHandling(response);
+    });
+}
+
+export function createMongoCollectionWithProxy(
+  databaseId: string,
+  collectionId: string,
+  offerThroughput: number,
+  shardKey: string,
+  createDatabase: boolean,
+  sharedThroughput: boolean,
+  isSharded: boolean,
+  autopilotOptions?: DataModels.RpOptions
+): Promise<any> {
+  const databaseAccount = CosmosClient.databaseAccount();
+  const params: DataModels.MongoParameters = {
+    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
+    db: databaseId,
+    coll: collectionId,
+    pk: shardKey,
+    offerThroughput,
+    cd: createDatabase,
+    st: sharedThroughput,
+    is: isSharded,
+    rid: "",
+    rtype: "colls",
+    sid: CosmosClient.subscriptionId(),
+    rg: CosmosClient.resourceGroup(),
+    dba: databaseAccount.name,
+    isAutoPilot: false
+  };
+
+  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)}`,
+      {
+        method: "POST",
+        headers: {
+          ...defaultHeaders,
+          ...authHeaders(),
+          [HttpHeaders.contentType]: "application/json"
+        }
+      }
+    )
+    .then(async response => {
+      if (response.ok) {
+        return;
+      }
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Error creating collection: ${await response.json()}, Payload: ${params}`
+      );
+      errorHandling(response);
+    });
+}
+
+export function createMongoCollectionWithARM(
+  armEndpoint: string,
+  databaseId: string,
+  analyticalStorageTtl: number,
+  collectionId: string,
+  offerThroughput: number,
+  shardKey: string,
+  createDatabase: boolean,
+  sharedThroughput: boolean,
+  isSharded: boolean,
+  additionalOptions?: DataModels.RpOptions
+): Promise<any> {
+  const databaseAccount = CosmosClient.databaseAccount();
+  const params: DataModels.MongoParameters = {
+    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
+    db: databaseId,
+    coll: collectionId,
+    pk: shardKey,
+    offerThroughput,
+    cd: createDatabase,
+    st: sharedThroughput,
+    is: isSharded,
+    rid: "",
+    rtype: "colls",
+    sid: CosmosClient.subscriptionId(),
+    rg: CosmosClient.resourceGroup(),
+    dba: databaseAccount.name,
+    analyticalStorageTtl
+  };
+
+  if (createDatabase) {
+    return AddDbUtilities.createMongoDatabaseWithARM(
+      armEndpoint,
+      params,
+      sharedThroughput ? additionalOptions : {}
+    ).then(() => {
+      return _createMongoCollectionWithARM(armEndpoint, params, sharedThroughput ? {} : additionalOptions);
+    });
+  }
+  return _createMongoCollectionWithARM(armEndpoint, params, additionalOptions);
+}
+
+export function getEndpoint(databaseAccount: ViewModels.DatabaseAccount): string {
+  const serverId = window.dataExplorer.serverId();
+  const extensionEndpoint = window.dataExplorer.extensionEndpoint();
+  let url = config.MONGO_BACKEND_ENDPOINT
+    ? config.MONGO_BACKEND_ENDPOINT + "/api/mongo/explorer"
+    : EnvironmentUtility.getMongoBackendEndpoint(serverId, databaseAccount.location, extensionEndpoint);
+
+  if (window.authType === AuthType.EncryptedToken) {
+    url = url.replace("api/mongo", "api/guest/mongo");
+  }
+  return url;
+}
+
+async function errorHandling(response: any): Promise<any> {
+  const errorMessage = await response.text();
+  if (response.status === HttpStatusCodes.Forbidden) {
+    MessageHandler.sendMessage({
+      type: MessageTypes.ForbiddenError,
+      reason: errorMessage
+    });
+  }
+  throw new Error(errorMessage);
+}
+
+export function getARMCreateCollectionEndpoint(params: DataModels.MongoParameters): string {
+  return `subscriptions/${params.sid}/resourceGroups/${params.rg}/providers/Microsoft.DocumentDB/databaseAccounts/${
+    CosmosClient.databaseAccount().name
+  }/mongodbDatabases/${params.db}/collections/${params.coll}`;
+}
+
+export async function _createMongoCollectionWithARM(
+  armEndpoint: string,
+  params: DataModels.MongoParameters,
+  rpOptions: DataModels.RpOptions
+): Promise<any> {
+  const rpPayloadToCreateCollection: DataModels.MongoCreationRequest = {
+    properties: {
+      resource: {
+        id: params.coll
+      },
+      options: {}
+    }
+  };
+
+  if (params.is) {
+    rpPayloadToCreateCollection.properties.resource["shardKey"] = { [params.pk]: "Hash" };
+  }
+
+  if (!params.st) {
+    if (rpOptions) {
+      rpPayloadToCreateCollection.properties.options = rpOptions;
+    } else {
+      rpPayloadToCreateCollection.properties.options["throughput"] =
+        params.offerThroughput && params.offerThroughput.toString();
+    }
+  }
+
+  if (params.analyticalStorageTtl) {
+    rpPayloadToCreateCollection.properties.resource.analyticalStorageTtl = params.analyticalStorageTtl;
+  }
+
+  try {
+    await new ResourceProviderClient(armEndpoint).putAsync(
+      getARMCreateCollectionEndpoint(params),
+      DataExplorerConstants.ArmApiVersions.publicVersion,
+      rpPayloadToCreateCollection
+    );
+  } catch (response) {
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Error,
+      `Error creating collection: ${JSON.stringify(response)}`
+    );
+    if (response.status === HttpStatusCodes.Forbidden) {
+      MessageHandler.sendMessage({ type: MessageTypes.ForbiddenError });
+      return;
+    }
+    throw new Error(`Error creating collection`);
+  }
+}

src/Common/MongoUtility.ts

@@ -0,0 +1,168 @@
+/*    Copyright 2013 10gen Inc.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+export default class MongoUtility {
+  public static tojson = function(x: any, indent: string, nolint: boolean) {
+    if (x === null || x === undefined) {
+      return String(x);
+    }
+    indent = indent || "";
+
+    switch (typeof x) {
+      case "string":
+        var out = new Array(x.length + 1);
+        out[0] = '"';
+        for (var i = 0; i < x.length; i++) {
+          if (x[i] === '"') {
+            out[out.length] = '\\"';
+          } else if (x[i] === "\\") {
+            out[out.length] = "\\\\";
+          } else if (x[i] === "\b") {
+            out[out.length] = "\\b";
+          } else if (x[i] === "\f") {
+            out[out.length] = "\\f";
+          } else if (x[i] === "\n") {
+            out[out.length] = "\\n";
+          } else if (x[i] === "\r") {
+            out[out.length] = "\\r";
+          } else if (x[i] === "\t") {
+            out[out.length] = "\\t";
+          } else {
+            var code = x.charCodeAt(i);
+            if (code < 0x20) {
+              out[out.length] = (code < 0x10 ? "\\u000" : "\\u00") + code.toString(16);
+            } else {
+              out[out.length] = x[i];
+            }
+          }
+        }
+        return out.join("") + '"';
+      case "number":
+      /* falls through */
+      case "boolean":
+        return "" + x;
+      case "object":
+        var func = $.isArray(x) ? MongoUtility.tojsonArray : MongoUtility.tojsonObject;
+        var s = func(x, indent, nolint);
+        if (
+          (nolint === null || nolint === undefined || nolint === true) &&
+          s.length < 80 &&
+          (indent === null || indent.length === 0)
+        ) {
+          s = s.replace(/[\t\r\n]+/gm, " ");
+        }
+        return s;
+      case "function":
+        return x.toString();
+      default:
+        throw new Error("tojson can't handle type " + typeof x);
+    }
+  };
+
+  private static tojsonObject = function(x: any, indent: string, nolint: boolean) {
+    var lineEnding = nolint ? " " : "\n";
+    var tabSpace = nolint ? "" : "\t";
+    indent = indent || "";
+
+    if (typeof x.tojson === "function" && x.tojson !== MongoUtility.tojson) {
+      return x.tojson(indent, nolint);
+    }
+
+    if (x.constructor && typeof x.constructor.tojson === "function" && x.constructor.tojson !== MongoUtility.tojson) {
+      return x.constructor.tojson(x, indent, nolint);
+    }
+
+    if (MongoUtility.hasDefinedProperty(x, "toString") && !$.isArray(x)) {
+      return x.toString();
+    }
+
+    if (x instanceof Error) {
+      return x.toString();
+    }
+
+    if (MongoUtility.isObjectId(x)) {
+      return 'ObjectId("' + x.$oid + '")';
+    }
+
+    // push one level of indent
+    indent += tabSpace;
+    var s = "{";
+
+    var pairs = [];
+    for (var k in x) {
+      if (x.hasOwnProperty(k)) {
+        var val = x[k];
+        var pair = '"' + k + '" : ' + MongoUtility.tojson(val, indent, nolint);
+
+        if (k === "_id") {
+          pairs.unshift(pair);
+        } else {
+          pairs.push(pair);
+        }
+      }
+    }
+    // Add proper line endings, indents, and commas to each line
+    s += $.map(pairs, function(pair) {
+      return lineEnding + indent + pair;
+    }).join(",");
+    s += lineEnding;
+
+    // pop one level of indent
+    indent = indent.substring(1);
+    return s + indent + "}";
+  };
+
+  private static tojsonArray = function(a: any, indent: string, nolint: boolean) {
+    if (a.length === 0) {
+      return "[ ]";
+    }
+
+    var lineEnding = nolint ? " " : "\n";
+    if (!indent || nolint) {
+      indent = "";
+    }
+
+    var s = "[" + lineEnding;
+    indent += "\t";
+    for (var i = 0; i < a.length; i++) {
+      s += indent + MongoUtility.tojson(a[i], indent, nolint);
+      if (i < a.length - 1) {
+        s += "," + lineEnding;
+      }
+    }
+    if (a.length === 0) {
+      s += indent;
+    }
+
+    indent = indent.substring(1);
+    s += lineEnding + indent + "]";
+    return s;
+  };
+
+  private static hasDefinedProperty = function(obj: any, prop: string): boolean {
+    if (Object.getPrototypeOf === undefined || Object.getPrototypeOf(obj) === null) {
+      return false;
+    } else if (obj.hasOwnProperty(prop)) {
+      return true;
+    } else {
+      return MongoUtility.hasDefinedProperty(Object.getPrototypeOf(obj), prop);
+    }
+  };
+
+  private static isObjectId(obj: any): boolean {
+    var keys = Object.keys(obj);
+    return keys.length === 1 && keys[0] === "$oid" && typeof obj.$oid === "string" && /^[0-9a-f]{24}$/.test(obj.$oid);
+  }
+}

src/Common/NotificationsClientBase.ts

@@ -0,0 +1,47 @@
+import "jquery";
+import * as Q from "q";
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+import { CosmosClient } from "./CosmosClient";
+
+export class NotificationsClientBase implements ViewModels.NotificationsClient {
+  private _extensionEndpoint: string;
+  private _notificationsApiSuffix: string;
+
+  protected constructor(notificationsApiSuffix: string) {
+    this._notificationsApiSuffix = notificationsApiSuffix;
+  }
+
+  public fetchNotifications(): Q.Promise<DataModels.Notification[]> {
+    const deferred: Q.Deferred<DataModels.Notification[]> = Q.defer<DataModels.Notification[]>();
+    const databaseAccount: ViewModels.DatabaseAccount = CosmosClient.databaseAccount();
+    const subscriptionId: string = CosmosClient.subscriptionId();
+    const resourceGroup: string = CosmosClient.resourceGroup();
+    const url: string = `${this._extensionEndpoint}${this._notificationsApiSuffix}?accountName=${databaseAccount.name}&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
+    const authorizationHeader: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
+    const headers: any = {};
+    headers[authorizationHeader.header] = authorizationHeader.token;
+
+    $.ajax({
+      url: url,
+      type: "GET",
+      headers: headers,
+      cache: false
+    }).then(
+      (notifications: DataModels.Notification[], textStatus: string, xhr: JQueryXHR<any>) => {
+        deferred.resolve(notifications);
+      },
+      (xhr: JQueryXHR<any>, textStatus: string, error: any) => {
+        deferred.reject(xhr.responseText);
+      }
+    );
+
+    return deferred.promise;
+  }
+
+  public setExtensionEndpoint(extensionEndpoint: string): void {
+    this._extensionEndpoint = extensionEndpoint;
+  }
+}

src/Common/ObjectCache.test.ts

@@ -0,0 +1,33 @@
+import { ObjectCache } from "./ObjectCache";
+
+describe("Object cache", () => {
+  it("should keep size at or below limit", () => {
+    const cache = new ObjectCache<number>(2);
+    cache.set("a", 1);
+    cache.set("b", 2);
+    cache.set("c", 3);
+    cache.set("d", 4);
+    expect(cache.size()).toBe(2);
+  });
+
+  it("should remove first added element to keep size at limit", () => {
+    const cache = new ObjectCache<number>(2);
+    cache.set("a", 1);
+    cache.set("b", 2);
+    cache.set("c", 3);
+    expect(cache.has("a")).toBe(false);
+    expect(cache.has("b")).toBe(true);
+    expect(cache.has("c")).toBe(true);
+  });
+
+  it("should remove first accessed element to keep size at limit", () => {
+    const cache = new ObjectCache<number>(2);
+    cache.set("a", 1);
+    cache.set("b", 2);
+    cache.get("a");
+    cache.set("c", 3);
+    expect(cache.has("a")).toBe(true);
+    expect(cache.has("b")).toBe(false);
+    expect(cache.has("c")).toBe(true);
+  });
+});

src/Common/ObjectCache.ts

@@ -0,0 +1,56 @@
+import { HashMap } from "./HashMap";
+
+export class ObjectCache<T> extends HashMap<T> {
+  private keyQueue: string[]; // Last touched key FIFO to purge cache if too big.
+  private maxNbElements: number;
+
+  public constructor(maxNbElements: number) {
+    super();
+    this.keyQueue = [];
+    this.maxNbElements = maxNbElements;
+    this.clear();
+  }
+
+  public clear(): void {
+    super.clear();
+    this.keyQueue = [];
+  }
+
+  public get(key: string): T {
+    this.markKeyAsTouched(key);
+    return super.get(key);
+  }
+
+  public set(key: string, value: T): void {
+    super.set(key, value);
+
+    this.markKeyAsTouched(key);
+
+    if (super.size() > this.maxNbElements && key !== this.keyQueue[0]) {
+      this.reduceCacheSize();
+    }
+  }
+
+  /**
+   * Invalidate elements to keep the total number below the limit
+   */
+  private reduceCacheSize(): void {
+    // remove a key
+    const oldKey = this.keyQueue.shift();
+    if (oldKey) {
+      super.delete(oldKey);
+    }
+  }
+
+  /**
+   * Bubble up this key as new.
+   * @param key
+   */
+  private markKeyAsTouched(key: string) {
+    const n = this.keyQueue.indexOf(key);
+    if (n > -1) {
+      this.keyQueue.splice(n, 1);
+    }
+    this.keyQueue.push(key);
+  }
+}

src/Common/QueriesClient.ts

@@ -0,0 +1,286 @@
+import * as _ from "underscore";
+import * as DataModels from "../Contracts/DataModels";
+import * as ViewModels from "../Contracts/ViewModels";
+import DocumentId from "../Explorer/Tree/DocumentId";
+import * as ErrorParserUtility from "./ErrorParserUtility";
+import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
+import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { CosmosClient } from "./CosmosClient";
+import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { Logger } from "./Logger";
+import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
+import { QueryUtils } from "../Utils/QueryUtils";
+
+export class QueriesClient implements ViewModels.QueriesClient {
+  private static readonly PartitionKey: DataModels.PartitionKey = {
+    paths: [`/${SavedQueries.PartitionKeyProperty}`],
+    kind: BackendDefaults.partitionKeyKind,
+    version: BackendDefaults.partitionKeyVersion
+  };
+  private static readonly FetchQuery: string = "SELECT * FROM c";
+  private static readonly FetchMongoQuery: string = "{}";
+
+  public constructor(private container: ViewModels.Explorer) {}
+
+  public async setupQueriesCollection(): Promise<DataModels.Collection> {
+    const queriesCollection: ViewModels.Collection = this.findQueriesCollection();
+    if (queriesCollection) {
+      return Promise.resolve(queriesCollection.rawDataModel);
+    }
+
+    const id = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      "Setting up account for saving queries"
+    );
+    return this.container.documentClientUtility
+      .getOrCreateDatabaseAndCollection({
+        collectionId: SavedQueries.CollectionName,
+        databaseId: SavedQueries.DatabaseName,
+        partitionKey: QueriesClient.PartitionKey,
+        offerThroughput: SavedQueries.OfferThroughput,
+        databaseLevelThroughput: undefined
+      })
+      .then(
+        (collection: DataModels.Collection) => {
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            "Successfully set up account for saving queries"
+          );
+          return Promise.resolve(collection);
+        },
+        (error: any) => {
+          const stringifiedError: string = JSON.stringify(error);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to set up account for saving queries: ${stringifiedError}`
+          );
+          Logger.logError(stringifiedError, "setupQueriesCollection");
+          return Promise.reject(stringifiedError);
+        }
+      )
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+  }
+
+  public async saveQuery(query: DataModels.Query): Promise<void> {
+    const queriesCollection = this.findQueriesCollection();
+    if (!queriesCollection) {
+      const errorMessage: string = "Account not set up to perform saved query operations";
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to save query ${query.queryName}: ${errorMessage}`
+      );
+      return Promise.reject(errorMessage);
+    }
+
+    try {
+      this.validateQuery(query);
+    } catch (error) {
+      const errorMessage: string = "Invalid query specified";
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to save query ${query.queryName}: ${errorMessage}`
+      );
+      return Promise.reject(errorMessage);
+    }
+
+    const id = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `Saving query ${query.queryName}`
+    );
+    query.id = query.queryName;
+    return this.container.documentClientUtility
+      .createDocument(queriesCollection, query)
+      .then(
+        (savedQuery: DataModels.Query) => {
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `Successfully saved query ${query.queryName}`
+          );
+          return Promise.resolve();
+        },
+        (error: any) => {
+          let errorMessage: string;
+          const parsedError: DataModels.ErrorDataModel = ErrorParserUtility.parse(error)[0];
+          if (parsedError.code === HttpStatusCodes.Conflict.toString()) {
+            errorMessage = `Query ${query.queryName} already exists`;
+          } else {
+            errorMessage = parsedError.message;
+          }
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to save query ${query.queryName}: ${errorMessage}`
+          );
+          Logger.logError(JSON.stringify(parsedError), "saveQuery");
+          return Promise.reject(errorMessage);
+        }
+      )
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+  }
+
+  public async getQueries(): Promise<DataModels.Query[]> {
+    const queriesCollection = this.findQueriesCollection();
+    if (!queriesCollection) {
+      const errorMessage: string = "Account not set up to perform saved query operations";
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to fetch saved queries: ${errorMessage}`
+      );
+      return Promise.reject(errorMessage);
+    }
+
+    const options: any = { enableCrossPartitionQuery: true };
+    const id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Fetching saved queries");
+    return this.container.documentClientUtility
+      .queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
+      .then(
+        (queryIterator: QueryIterator<ItemDefinition & Resource>) => {
+          const fetchQueries = (firstItemIndex: number): Q.Promise<ViewModels.QueryResults> =>
+            this.container.documentClientUtility.queryDocumentsPage(
+              queriesCollection.id(),
+              queryIterator,
+              firstItemIndex,
+              options
+            );
+          return QueryUtils.queryAllPages(fetchQueries).then(
+            (results: ViewModels.QueryResults) => {
+              let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
+                if (!document) {
+                  return undefined;
+                }
+                const { id, resourceId, query, queryName } = document;
+                const parsedQuery: DataModels.Query = {
+                  resourceId: resourceId,
+                  queryName: queryName,
+                  query: query,
+                  id: id
+                };
+                try {
+                  this.validateQuery(parsedQuery);
+                  return parsedQuery;
+                } catch (error) {
+                  return undefined;
+                }
+              });
+              queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+              NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, "Successfully fetched saved queries");
+              return Promise.resolve(queries);
+            },
+            (error: any) => {
+              const stringifiedError: string = JSON.stringify(error);
+              NotificationConsoleUtils.logConsoleMessage(
+                ConsoleDataType.Error,
+                `Failed to fetch saved queries: ${stringifiedError}`
+              );
+              Logger.logError(stringifiedError, "getSavedQueries");
+              return Promise.reject(stringifiedError);
+            }
+          );
+        },
+        (error: any) => {
+          // should never get into this state but we handle this regardless
+          const stringifiedError: string = JSON.stringify(error);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to fetch saved queries: ${stringifiedError}`
+          );
+          Logger.logError(stringifiedError, "getSavedQueries");
+          return Promise.reject(stringifiedError);
+        }
+      )
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+  }
+
+  public async deleteQuery(query: DataModels.Query): Promise<void> {
+    const queriesCollection = this.findQueriesCollection();
+    if (!queriesCollection) {
+      const errorMessage: string = "Account not set up to perform saved query operations";
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to fetch saved queries: ${errorMessage}`
+      );
+      return Promise.reject(errorMessage);
+    }
+
+    try {
+      this.validateQuery(query);
+    } catch (error) {
+      const errorMessage: string = "Invalid query specified";
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Failed to delete query ${query.queryName}: ${errorMessage}`
+      );
+    }
+
+    const id = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `Deleting query ${query.queryName}`
+    );
+    query.id = query.queryName;
+    const documentId: ViewModels.DocumentId = new DocumentId(
+      {
+        partitionKey: QueriesClient.PartitionKey,
+        partitionKeyProperty: "id"
+      } as ViewModels.DocumentsTab,
+      query,
+      query.queryName
+    ); // TODO: Remove DocumentId's dependency on DocumentsTab
+    const options: any = { partitionKey: query.resourceId };
+    return this.container.documentClientUtility
+      .deleteDocument(queriesCollection, documentId)
+      .then(
+        () => {
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `Successfully deleted query ${query.queryName}`
+          );
+          return Promise.resolve();
+        },
+        (error: any) => {
+          const stringifiedError: string = JSON.stringify(error);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `Failed to delete query ${query.queryName}: ${stringifiedError}`
+          );
+          Logger.logError(stringifiedError, "deleteQuery");
+          return Promise.reject(stringifiedError);
+        }
+      )
+      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(id));
+  }
+
+  public getResourceId(): string {
+    const databaseAccount: ViewModels.DatabaseAccount = CosmosClient.databaseAccount();
+    const databaseAccountName: string = (databaseAccount && databaseAccount.name) || "";
+    const subscriptionId: string = CosmosClient.subscriptionId() || "";
+    const resourceGroup: string = CosmosClient.resourceGroup() || "";
+
+    return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}`;
+  }
+
+  private findQueriesCollection(): ViewModels.Collection {
+    const queriesDatabase: ViewModels.Database = _.find(
+      this.container.databases(),
+      (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName
+    );
+    if (!queriesDatabase) {
+      return undefined;
+    }
+    return _.find(
+      queriesDatabase.collections(),
+      (collection: ViewModels.Collection) => collection.id() === SavedQueries.CollectionName
+    );
+  }
+
+  private validateQuery(query: DataModels.Query): void {
+    if (!query || query.queryName == null || query.query == null || query.resourceId == null) {
+      throw new Error("Invalid query specified");
+    }
+  }
+
+  private fetchQueriesQuery(): string {
+    if (this.container.isPreferredApiMongoDB()) {
+      return QueriesClient.FetchMongoQuery;
+    }
+    return QueriesClient.FetchQuery;
+  }
+}

src/Common/Splitter.ts

@@ -0,0 +1,108 @@
+import * as ko from "knockout";
+
+import { SplitterMetrics } from "./Constants";
+
+export enum SplitterDirection {
+  Horizontal = "horizontal",
+  Vertical = "vertical"
+}
+
+export interface SplitterBounds {
+  max: number;
+  min: number;
+}
+
+export interface SplitterOptions {
+  splitterId: string;
+  leftId: string;
+  bounds: SplitterBounds;
+  direction: SplitterDirection;
+}
+
+export class Splitter {
+  public splitterId: string;
+  public leftSideId: string;
+
+  public splitter: HTMLElement;
+  public leftSide: HTMLElement;
+  public lastX: number;
+  public lastWidth: number;
+
+  private isCollapsed: ko.Observable<boolean>;
+  private bounds: SplitterBounds;
+  private direction: SplitterDirection;
+
+  constructor(options: SplitterOptions) {
+    this.splitterId = options.splitterId;
+    this.leftSideId = options.leftId;
+    this.isCollapsed = ko.observable<boolean>(false);
+    this.bounds = options.bounds;
+    this.direction = options.direction;
+    this.initialize();
+  }
+
+  public initialize() {
+    this.splitter = document.getElementById(this.splitterId);
+    this.leftSide = document.getElementById(this.leftSideId);
+
+    const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
+    const splitterOptions: JQueryUI.ResizableOptions = {
+      animate: true,
+      animateDuration: "fast",
+      start: this.onResizeStart,
+      stop: this.onResizeStop
+    };
+
+    if (isVerticalSplitter) {
+      $(this.leftSide).css("width", this.bounds.min);
+      $(this.splitter).css("height", "100%");
+
+      splitterOptions.maxWidth = this.bounds.max;
+      splitterOptions.minWidth = this.bounds.min;
+      splitterOptions.handles = { e: "#" + this.splitterId };
+    } else {
+      $(this.leftSide).css("height", this.bounds.min);
+      $(this.splitter).css("width", "100%");
+
+      splitterOptions.maxHeight = this.bounds.max;
+      splitterOptions.minHeight = this.bounds.min;
+      splitterOptions.handles = { s: "#" + this.splitterId };
+    }
+
+    $(this.leftSide).resizable(splitterOptions);
+  }
+
+  private onResizeStart: JQueryUI.ResizableEvent = (e: Event, ui: JQueryUI.ResizableUIParams) => {
+    if (this.direction === SplitterDirection.Vertical) {
+      $(".ui-resizable-helper").height("100%");
+    } else {
+      $(".ui-resizable-helper").width("100%");
+    }
+    $("iframe").css("pointer-events", "none");
+  };
+
+  private onResizeStop: JQueryUI.ResizableEvent = (e: Event, ui: JQueryUI.ResizableUIParams) => {
+    $("iframe").css("pointer-events", "auto");
+  };
+
+  public collapseLeft() {
+    this.lastX = $(this.splitter).position().left;
+    this.lastWidth = $(this.leftSide).width();
+    $(this.splitter).css("left", SplitterMetrics.CollapsedPositionLeft);
+    $(this.leftSide).css("width", "");
+    $(this.leftSide)
+      .resizable("option", "disabled", true)
+      .removeClass("ui-resizable-disabled"); // remove class so splitter is visible
+    $(this.splitter).removeClass("ui-resizable-e");
+    this.isCollapsed(true);
+  }
+
+  public expandLeft() {
+    $(this.splitter).addClass("ui-resizable-e");
+    $(this.leftSide).css("width", this.lastWidth);
+    $(this.splitter).css("left", this.lastX);
+    $(this.splitter).css("left", ""); // this ensures the splitter's position is not fixed and enables movement during resizing
+    $(this.leftSide).resizable("enable");
+    this.isCollapsed(false);
+  }
+}

src/Common/ThemeUtility.ts

@@ -0,0 +1,19 @@
+/*!---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *----------------------------------------------------------*/
+
+export default class ThemeUtility {
+  public static getMonacoTheme(theme: string): string {
+    switch (theme) {
+      case "default":
+      case "hc-white":
+        return "vs";
+      case "dark":
+        return "vs-dark";
+      case "hc-black":
+        return "hc-black";
+      default:
+        return "vs";
+    }
+  }
+}

src/Common/UrlUtility.ts

@@ -0,0 +1,55 @@
+export default class UrlUtility {
+  public static parseDocumentsPath(resourcePath: string): any {
+    if (typeof resourcePath !== "string") {
+      return {};
+    }
+
+    if (resourcePath.length === 0) {
+      return {};
+    }
+
+    if (resourcePath[resourcePath.length - 1] !== "/") {
+      resourcePath = resourcePath + "/";
+    }
+
+    if (resourcePath[0] !== "/") {
+      resourcePath = "/" + resourcePath;
+    }
+
+    var id: string;
+    var type: string;
+    var pathParts = resourcePath.split("/");
+
+    if (pathParts.length % 2 === 0) {
+      id = pathParts[pathParts.length - 2];
+      type = pathParts[pathParts.length - 3];
+    } else {
+      id = pathParts[pathParts.length - 3];
+      type = pathParts[pathParts.length - 2];
+    }
+
+    var result = {
+      type: type,
+      objectBody: {
+        id: id,
+        self: resourcePath
+      }
+    };
+
+    return result;
+  }
+
+  public static createUri(baseUri: string, relativeUri: string): string {
+    if (!baseUri) {
+      throw new Error("baseUri is null or empty");
+    }
+
+    var slashAtEndOfUriRegex = /\/$/,
+      slashAtStartOfUriRegEx = /^\//;
+
+    var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
+      normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
+
+    return normalizedBaseUri + normalizedRelativeUri;
+  }
+}

src/Common/__snapshots__/CosmosClient.test.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
+Object {
+  "endpoint": "/proxy",
+  "headers": Object {
+    "x-ms-proxy-target": "http://localhost",
+  },
+  "path": "/dbs/foo",
+}
+`;
+
+exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
+Object {
+  "endpoint": "/proxy",
+  "headers": Object {
+    "x-ms-proxy-target": "baz",
+  },
+  "path": "/dbs/foo",
+}
+`;

src/Common/__snapshots__/DataAccessUtilityBase.test.ts.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`getCommonQueryOptions builds the correct default options objects 1`] = `
+Object {
+  "enableScanInQuery": true,
+  "forceQueryPlan": true,
+  "maxDegreeOfParallelism": 0,
+  "maxItemCount": 100,
+  "populateQueryMetrics": true,
+}
+`;
+
+exports[`getCommonQueryOptions reads from localStorage 1`] = `
+Object {
+  "enableScanInQuery": true,
+  "forceQueryPlan": true,
+  "maxDegreeOfParallelism": 17,
+  "maxItemCount": 37,
+  "populateQueryMetrics": true,
+}
+`;

src/Common/__snapshots__/IteratorUtilities.test.ts.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`nextPage returns results for the next page 1`] = `
+Object {
+  "activityId": "foo",
+  "documents": Array [],
+  "firstItemIndex": 11,
+  "hasMoreResults": false,
+  "headers": Object {},
+  "itemCount": 0,
+  "lastItemIndex": 10,
+  "requestCharge": 1,
+}
+`;

src/Config.ts

@@ -0,0 +1,83 @@
+export enum Platform {
+  Portal = "Portal",
+  Hosted = "Hosted",
+  Emulator = "Emulator"
+}
+
+interface Config {
+  platform: Platform;
+  allowedParentFrameOrigins: RegExp;
+  gitSha?: string;
+  proxyPath?: string;
+  AAD_ENDPOINT: string;
+  ARM_AUTH_AREA: string;
+  ARM_ENDPOINT: string;
+  EMULATOR_ENDPOINT?: string;
+  ARM_API_VERSION: string;
+  GRAPH_ENDPOINT: string;
+  GRAPH_API_VERSION: string;
+  AZURESAMPLESCOSMOSDBPAT: string;
+  ARCADIA_ENDPOINT: string;
+  ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
+  BACKEND_ENDPOINT?: string;
+  MONGO_BACKEND_ENDPOINT?: string;
+  PROXY_PATH?: string;
+  JUNO_ENDPOINT: string;
+  GITHUB_CLIENT_ID: string;
+  GITHUB_CLIENT_SECRET?: string; // No need to inject secret for prod. Juno already knows it.
+  hostedExplorerURL: string;
+}
+
+// Default configuration
+let config: Config = {
+  platform: Platform.Portal,
+  allowedParentFrameOrigins: /^https:\/\/portal\.azure\.com$|^https:\/\/portal\.azure\.us$|^https:\/\/portal\.azure\.cn$|^https:\/\/portal\.microsoftazure\.de$|^https:\/\/.+\.portal\.azure\.com$|^https:\/\/.+\.portal\.azure\.us$|^https:\/\/.+\.portal\.azure\.cn$|^https:\/\/.+\.portal\.microsoftazure\.de$/,
+  // Webpack injects this at build time
+  gitSha: process.env.GIT_SHA,
+  hostedExplorerURL: "https://cosmos.azure.com/",
+  AAD_ENDPOINT: "https://login.microsoftonline.com/",
+  ARM_AUTH_AREA: "https://management.azure.com/",
+  ARM_ENDPOINT: "https://management.azure.com/",
+  ARM_API_VERSION: "2016-06-01",
+  GRAPH_ENDPOINT: "https://graph.windows.net",
+  GRAPH_API_VERSION: "1.6",
+  ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
+  ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
+  GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/settings/applications/1189306
+  JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
+  AZURESAMPLESCOSMOSDBPAT: "99e38770e29b4a61d7c49f188780504efd35cc86" //[SuppressMessage("Microsoft.Security", "CS001:SecretInline", Justification="  // this PAT is a "no scopes" PAT with zero access to any projects, this is just used to get around the dev.github.com rate limit when accessing public samples repo.")]
+};
+
+// Injected for local develpment. These will be removed in the production bundle by webpack
+if (process.env.NODE_ENV === "development") {
+  const port: string = process.env.PORT || "1234";
+  config.BACKEND_ENDPOINT = "https://localhost:" + port;
+  config.MONGO_BACKEND_ENDPOINT = "https://localhost:" + port;
+  config.PROXY_PATH = "/proxy";
+  config.EMULATOR_ENDPOINT = "https://localhost:8081";
+}
+
+export async function initializeConfiguration(): Promise<Config> {
+  try {
+    const response = await fetch("./config.json");
+    if (response.status === 200) {
+      try {
+        const externalConfig = await response.json();
+        config = Object.assign({}, config, externalConfig);
+      } catch (error) {
+        console.error("Unable to parse json in config file");
+        console.error(error);
+      }
+    }
+    // Allow override of any config value with URL query parameters
+    const params = new URLSearchParams(window.location.search);
+    params.forEach((value, key) => {
+      (config as any)[key] = value;
+    });
+  } catch (error) {
+    console.log("No configuration file found using defaults");
+  }
+  return config;
+}
+
+export { config };

src/Contracts/ActionContracts.ts

@@ -0,0 +1,83 @@
+/**
+ * Data Explorer tab kinds
+ */
+export enum TabKind {
+  SQLDocuments,
+  MongoDocuments,
+  TableEntities,
+  Graph,
+  SQLQuery,
+  ScaleSettings
+}
+
+/**
+ * Data Explorer pane kinds
+ */
+export enum PaneKind {
+  AddCollection,
+  CassandraAddCollection,
+  DeleteCollection,
+  DeleteDatabase,
+  GlobalSettings,
+  AdHocAccess,
+  SwitchDirectory
+}
+
+/**
+ * Parameters to pass to DataExplorer in order to have it perform a given action
+ */
+export interface DataExplorerAction {
+  actionType: ActionType | string;
+}
+
+/**
+ * Open tab action
+ */
+export interface OpenTab extends DataExplorerAction {
+  tabKind: TabKind | string;
+}
+
+/**
+ * Open collection tab action
+ */
+export interface OpenCollectionTab extends OpenTab {
+  databaseResourceId: string;
+  collectionResourceId: string;
+}
+
+/**
+ * Open query tab action
+ */
+export interface OpenQueryTab extends OpenCollectionTab {
+  query: QueryInfo;
+}
+
+/**
+ * Query info will be looked at in the order given in this interface (i.e. if text is provided, everything else is ignored)
+ */
+export interface QueryInfo {
+  text?: string;
+  partitionKeys?: string[];
+}
+
+/**
+ * Open pane action
+ */
+export interface OpenPane extends DataExplorerAction {
+  paneKind: PaneKind | string;
+}
+
+export interface OpenSampleNotebook extends DataExplorerAction {
+  path: string;
+}
+
+/**
+ * The types of actions that the DataExplorer supports performing upon opening.
+ */
+export enum ActionType {
+  OpenTab,
+  OpenCollectionTab,
+  OpenPane,
+  TransmitCachedData,
+  OpenSampleNotebook
+}

src/Contracts/DataModels.ts

@@ -0,0 +1,753 @@
+export interface DatabaseAccount {
+  id: string;
+  name: string;
+  location: string;
+  type: string;
+  kind: string;
+  tags: any;
+  properties: DatabaseAccountExtendedProperties;
+}
+
+export interface DatabaseAccountExtendedProperties {
+  documentEndpoint: string;
+  tableEndpoint: string;
+  gremlinEndpoint: string;
+  cassandraEndpoint: string;
+  configurationOverrides?: ConfigurationOverrides;
+  capabilities?: Capability[];
+  enableMultipleWriteLocations?: boolean;
+  mongoEndpoint?: string;
+  readLocations?: DatabaseAccountResponseLocation[];
+  writeLocations?: DatabaseAccountResponseLocation[];
+  enableFreeTier?: boolean;
+  enableAnalyticalStorage?: boolean;
+}
+
+export interface DatabaseAccountResponseLocation {
+  documentEndpoint: string;
+  failoverPriority: number;
+  id: string;
+  locationId: string;
+  locationName: string;
+  provisioningState: string;
+}
+
+export interface ConfigurationOverrides {
+  EnableBsonSchema: string;
+}
+
+export interface Capability {
+  name: string;
+  description: string;
+}
+
+export interface AccessInputMetadata {
+  accountName: string;
+  apiEndpoint: string;
+  apiKind: number;
+  documentEndpoint: string;
+  expiryTimestamp: string;
+  mongoEndpoint?: string;
+}
+
+export enum ApiKind {
+  SQL = 0,
+  MongoDB,
+  Table,
+  Cassandra,
+  Graph,
+  MongoDBCompute
+}
+
+export interface GenerateTokenResponse {
+  readWrite: string;
+  read: string;
+}
+
+export interface Subscription {
+  uniqueDisplayName: string;
+  displayName: string;
+  subscriptionId: string;
+  tenantId: string;
+  state: string;
+  subscriptionPolicies: SubscriptionPolicies;
+  authorizationSource: string;
+}
+
+export interface SubscriptionPolicies {
+  locationPlacementId: string;
+  quotaId: string;
+  spendingLimit?: string;
+}
+
+export interface Resource {
+  _rid: string;
+  _self: string;
+  _etag: string;
+  _ts: number | string;
+  id: string;
+}
+
+export interface ResourceRequest {
+  id: string;
+}
+
+export interface Collection extends Resource {
+  defaultTtl?: number;
+  indexingPolicy?: IndexingPolicy;
+  partitionKey?: PartitionKey;
+  statistics?: Statistic[];
+  uniqueKeyPolicy?: UniqueKeyPolicy;
+  conflictResolutionPolicy?: ConflictResolutionPolicy;
+  changeFeedPolicy?: ChangeFeedPolicy;
+  analyticalStorageTtl?: number;
+  geospatialConfig?: GeospatialConfig;
+}
+
+export interface CreateCollectionWithRpResponse extends Resource {
+  properties: Collection;
+  name: string;
+  type: string;
+}
+
+export interface CollectionRequest extends ResourceRequest {
+  defaultTtl?: number;
+  indexingPolicy?: IndexingPolicy;
+  partitionKey?: PartitionKey;
+  uniqueKeyPolicy?: UniqueKeyPolicy;
+  conflictResolutionPolicy?: ConflictResolutionPolicy;
+}
+
+export interface Database extends Resource {
+  collections?: Collection[];
+}
+
+export interface DocumentId extends Resource {}
+
+export interface Script extends Resource {
+  body: string;
+}
+
+export interface StoredProcedure extends Script {}
+
+export interface UserDefinedFunction extends Script {}
+
+export interface Trigger extends Script {
+  triggerType: string;
+  triggerOperation: string;
+}
+
+export interface ConflictId extends Resource {
+  resourceId?: string;
+  resourceType?: string;
+  operationType?: string;
+  content?: string;
+}
+
+export interface AuthHeaders {
+  "x-ms-date": string;
+  authorization: string;
+}
+
+export interface KeyResource {
+  Token: string;
+}
+
+export interface IndexingPolicy {}
+
+export interface PartitionKey {
+  paths: string[];
+  kind: string;
+  version: number;
+  systemKey?: boolean;
+}
+
+export interface Statistic {
+  documentCount: number;
+  id: string;
+  partitionKeys: any[];
+  sizeInKB: number;
+}
+
+export interface QueryPreparationTimes {
+  queryCompilationTime: any;
+  logicalPlanBuildTime: any;
+  physicalPlanBuildTime: any;
+  queryOptimizationTime: any;
+}
+
+export interface RuntimeExecutionTimes {
+  queryEngineExecutionTime: any;
+  systemFunctionExecutionTime: any;
+  userDefinedFunctionExecutionTime: any;
+}
+
+export interface QueryMetrics {
+  clientSideMetrics: any;
+  documentLoadTime: any;
+  documentWriteTime: any;
+  indexHitDocumentCount: number;
+  indexLookupTime: any;
+  outputDocumentCount: number;
+  outputDocumentSize: number;
+  queryPreparationTimes: QueryPreparationTimes;
+  retrievedDocumentCount: number;
+  retrievedDocumentSize: number;
+  runtimeExecutionTimes: RuntimeExecutionTimes;
+  totalQueryExecutionTime: any;
+  vmExecutionTime: any;
+}
+
+export interface Offer extends Resource {
+  offerVersion?: string;
+  offerType?: string;
+  content?: {
+    offerThroughput: number;
+    offerIsRUPerMinuteThroughputEnabled: boolean;
+    collectionThroughputInfo?: OfferThroughputInfo;
+    offerAutopilotSettings?: AutoPilotOfferSettings;
+  };
+  resource?: string;
+  offerResourceId?: string;
+}
+
+export interface OfferWithHeaders extends Offer {
+  headers: any;
+}
+
+export interface CollectionQuotaInfo {
+  storedProcedures: number;
+  triggers: number;
+  functions: number;
+  documentsSize: number;
+  collectionSize: number;
+  documentsCount: number;
+  usageSizeInKB: number;
+  numPartitions: number;
+  uniqueKeyPolicy?: UniqueKeyPolicy; // TODO: This should ideally not be a part of the collection quota. Remove after refactoring. (#119617)
+}
+
+export interface OfferThroughputInfo {
+  minimumRUForCollection: number;
+  numPhysicalPartitions: number;
+}
+
+export interface UniqueKeyPolicy {
+  uniqueKeys: UniqueKey[];
+}
+
+export interface UniqueKey {
+  paths: string[];
+}
+
+// Returned by DocumentDb client proxy
+// Inner errors in BackendErrorDataModel when error is in SQL syntax
+export interface ErrorDataModel {
+  message: string;
+  severity?: string;
+  location?: {
+    start: string;
+    end: string;
+  };
+  code?: string;
+}
+
+/**
+ * Defines a property bag for telemetry e.g. see ITelemetryError.
+ */
+export interface ITelemetryProperties {
+  [propertyName: string]: string;
+}
+
+/**
+ * Defines a property bag for telemetry e.g. see ITelemetryError.
+ */
+export interface ITelemetryEvent {
+  name: string;
+  properties?: ITelemetryProperties;
+}
+
+/**
+ * Defines an error to be logged as telemetry data.
+ */
+export interface ITelemetryError extends ITelemetryEvent {
+  error: any;
+}
+
+export interface CreateDatabaseAndCollectionRequest {
+  databaseId: string;
+  collectionId: string;
+  offerThroughput: number;
+  databaseLevelThroughput: boolean;
+  rupmEnabled?: boolean;
+  partitionKey?: PartitionKey;
+  indexingPolicy?: IndexingPolicy;
+  uniqueKeyPolicy?: UniqueKeyPolicy;
+  autoPilot?: AutoPilotCreationSettings;
+  analyticalStorageTtl?: number;
+  hasAutoPilotV2FeatureFlag?: boolean;
+}
+
+export interface AutoPilotCreationSettings {
+  autopilotTier?: AutopilotTier;
+  maxThroughput?: number;
+}
+
+export enum AutopilotTier {
+  Tier1 = 1,
+  Tier2 = 2,
+  Tier3 = 3,
+  Tier4 = 4
+}
+
+export interface RpOptions {
+  [key: string]: string | AutoPilotCreationSettings;
+}
+
+export interface Query {
+  id: string;
+  resourceId: string;
+  queryName: string;
+  query: string;
+}
+
+export interface UpdateOfferThroughputRequest {
+  subscriptionId: string;
+  resourceGroup: string;
+  databaseAccountName: string;
+  databaseName: string;
+  collectionName: string;
+  throughput: number;
+  offerIsRUPerMinuteThroughputEnabled: boolean;
+  offerAutopilotSettings?: AutoPilotOfferSettings;
+}
+
+export interface AutoPilotOfferSettings {
+  tier?: AutopilotTier;
+  maximumTierThroughput?: number;
+  targetTier?: AutopilotTier;
+  maxThroughput?: number;
+  targetMaxThroughput?: number;
+}
+
+export interface CreateDatabaseRequest {
+  databaseId: string;
+  databaseLevelThroughput?: boolean;
+  offerThroughput?: number;
+  autoPilot?: AutoPilotCreationSettings;
+  hasAutoPilotV2FeatureFlag?: boolean;
+}
+
+export interface SharedThroughputRange {
+  minimumRU: number;
+  maximumRU: number;
+  defaultRU: number;
+}
+
+export interface Notification {
+  id: string;
+  kind: string;
+  accountName: string;
+  action: any;
+  buttonValue?: any;
+  collectionName?: string;
+  databaseName?: string;
+  description: string;
+  endDateUtc: number;
+  seenAtUtc: number;
+  state: string;
+  type: string;
+  updatedAtUtc: string;
+}
+
+export enum ConflictResolutionMode {
+  Custom = "Custom",
+  LastWriterWins = "LastWriterWins"
+}
+
+/**
+ * Represents the conflict resolution policy configuration for specifying how to resolve conflicts
+ *  in case writes from different regions result in conflicts on documents in the collection in the Azure Cosmos DB service.
+ */
+export interface ConflictResolutionPolicy {
+  /**
+   * Gets or sets the ConflictResolutionMode in the Azure Cosmos DB service. By default it is ConflictResolutionMode.LastWriterWins.
+   */
+  mode?: keyof typeof ConflictResolutionMode;
+  /**
+   * Gets or sets the path which is present in each document in the Azure Cosmos DB service for last writer wins conflict-resolution.
+   * This path must be present in each document and must be an integer value.
+   * In case of a conflict occuring on a document, the document with the higher integer value in the specified path will be picked.
+   * If the path is unspecified, by default the timestamp path will be used.
+   *
+   * This value should only be set when using ConflictResolutionMode.LastWriterWins.
+   *
+   * ```typescript
+   * conflictResolutionPolicy.ConflictResolutionPath = "/name/first";
+   * ```
+   *
+   */
+  conflictResolutionPath?: string;
+  /**
+   * Gets or sets the StoredProcedure which is used for conflict resolution in the Azure Cosmos DB service.
+   * This stored procedure may be created after the Container is created and can be changed as required.
+   *
+   * 1. This value should only be set when using ConflictResolutionMode.Custom.
+   * 2. In case the stored procedure fails or throws an exception, the conflict resolution will default to registering conflicts in the conflicts feed.
+   *
+   * ```typescript
+   * conflictResolutionPolicy.ConflictResolutionProcedure = "resolveConflict"
+   * ```
+   */
+  conflictResolutionProcedure?: string;
+}
+
+export interface ChangeFeedPolicy {
+  retentionDuration: number;
+}
+
+export interface GeospatialConfig {
+  type: string;
+}
+
+export interface GatewayDatabaseAccount {
+  MediaLink: string;
+  DatabasesLink: string;
+  MaxMediaStorageUsageInMB: number;
+  CurrentMediaStorageUsageInMB: number;
+  EnableMultipleWriteLocations?: boolean;
+  WritableLocations: RegionEndpoint[];
+  ReadableLocations: RegionEndpoint[];
+}
+
+export interface RegionEndpoint {
+  name: string;
+  documentAccountEndpoint: string;
+}
+
+export interface Tenant {
+  displayName: string;
+  id: string;
+  tenantId: string;
+  countryCode: string;
+  domains: Array<string>;
+}
+
+export interface AccountKeys {
+  primaryMasterKey: string;
+  secondaryMasterKey: string;
+  properties: {
+    primaryReadonlyMasterKey: string;
+    secondaryReadonlyMasterKey: string;
+  };
+}
+
+export interface AfecFeature {
+  id: string;
+  name: string;
+  properties: { state: string };
+  type: string;
+}
+
+export interface OperationStatus {
+  status: string;
+  id?: string;
+  name?: string; // operationId
+  properties?: any;
+  error?: { code: string; message: string };
+}
+
+export interface NotebookWorkspaceConnectionInfo {
+  authToken: string;
+  notebookServerEndpoint: string;
+}
+
+export interface NotebookWorkspaceFeedResponse {
+  value: NotebookWorkspace[];
+}
+
+export interface NotebookWorkspace {
+  id: string;
+  name: string;
+  properties: {
+    status: string;
+    notebookServerEndpoint: string;
+  };
+}
+
+export interface NotebookConfigurationEndpoints {
+  path: string;
+  endpoints: NotebookConfigurationEndpointInfo[];
+}
+
+export interface NotebookConfigurationEndpointInfo {
+  type: string;
+  endpoint: string;
+  username: string;
+  password: string;
+  token: string;
+}
+
+export interface SparkCluster {
+  id: string;
+  name: string;
+  type: string;
+  properties: {
+    kind: string;
+    driverSize: string;
+    workerSize: string;
+    workerInstanceCount: number;
+    creationTime: string;
+    status: string;
+    libraries?: SparkClusterLibrary[];
+  };
+}
+
+export interface SparkClusterFeedResponse {
+  value: SparkCluster[];
+}
+
+export interface SparkClusterConnectionInfo {
+  userName: string;
+  password: string;
+  endpoints: SparkClusterEndpoint[];
+}
+
+export interface SparkClusterEndpoint {
+  kind: SparkClusterEndpointKind;
+  endpoint: string;
+}
+
+export enum SparkClusterEndpointKind {
+  SparkUI = "SparkUI",
+  HistoryServerUI = "HistoryServerUI",
+  Livy = "Livy"
+}
+
+export interface RpParameters {
+  db: string;
+  offerThroughput?: number;
+  st: Boolean;
+  sid: string;
+  rg: string;
+  dba: string;
+  partitionKeyVersion?: number;
+}
+
+export interface MongoParameters extends RpParameters {
+  pk?: string;
+  resourceUrl?: string;
+  coll?: string;
+  cd?: Boolean;
+  is?: Boolean;
+  rid?: string;
+  rtype?: string;
+  isAutoPilot?: Boolean;
+  autoPilotTier?: string;
+  autoPilotThroughput?: string;
+  analyticalStorageTtl?: number;
+}
+
+export interface GraphParameters extends RpParameters {
+  pk: string;
+  coll: string;
+  cd: Boolean;
+}
+
+export interface CreationRequest {
+  properties: {
+    resource: {
+      id: string;
+    };
+    options: RpOptions;
+  };
+}
+
+export interface SqlCollectionParameters extends RpParameters {
+  uniqueKeyPolicy?: UniqueKeyPolicy;
+  pk: string;
+  coll: string;
+  cd: Boolean;
+  analyticalStorageTtl?: number;
+}
+
+export interface MongoCreationRequest extends CreationRequest {
+  properties: {
+    resource: {
+      id: string;
+      analyticalStorageTtl?: number;
+      shardKey?: {};
+    };
+    options: RpOptions;
+  };
+}
+
+export interface GraphCreationRequest extends CreationRequest {
+  properties: {
+    resource: {
+      id: string;
+      partitionKey: {};
+    };
+    options: RpOptions;
+  };
+}
+
+export interface CreateDatabaseWithRpResponse {
+  id: string;
+  name: string;
+  type: string;
+  properties: {
+    id: string;
+  };
+}
+
+export interface SparkClusterLibrary {
+  name: string;
+}
+
+export interface SqlCollectionCreationRequest extends CreationRequest {
+  properties: {
+    resource: {
+      uniqueKeyPolicy?: UniqueKeyPolicy;
+      id: string;
+      partitionKey: {};
+      analyticalStorageTtl?: number;
+    };
+    options: RpOptions;
+  };
+}
+
+export interface Library extends SparkClusterLibrary {
+  properties: {
+    kind: "Jar";
+    source: {
+      kind: "HttpsUri";
+      uri: string;
+      libraryFileName: string;
+    };
+  };
+}
+
+export interface LibraryFeedResponse {
+  value: Library[];
+}
+
+export interface ArmResource {
+  id: string;
+  location: string;
+  name: string;
+  type: string;
+  tags: { [key: string]: string };
+}
+
+export interface ArcadiaWorkspaceIdentity {
+  type: string;
+  principalId: string;
+  tenantId: string;
+}
+
+export interface ArcadiaWorkspaceProperties {
+  managedResourceGroupName: string;
+  provisioningState: string;
+  sqlAdministratorLogin: string;
+  connectivityEndpoints: {
+    artifacts: string;
+    dev: string;
+    spark: string;
+    sql: string;
+    web: string;
+  };
+  defaultDataLakeStorage: {
+    accountUrl: string;
+    filesystem: string;
+  };
+}
+
+export interface ArcadiaWorkspaceFeedResponse {
+  value: ArcadiaWorkspace[];
+}
+
+export interface ArcadiaWorkspace extends ArmResource {
+  identity: ArcadiaWorkspaceIdentity;
+  properties: ArcadiaWorkspaceProperties;
+}
+
+export interface SparkPoolFeedResponse {
+  value: SparkPool[];
+}
+
+export interface SparkPoolProperties {
+  creationDate: string;
+  sparkVersion: string;
+  nodeCount: number;
+  nodeSize: string;
+  nodeSizeFamily: string;
+  provisioningState: string;
+  autoScale: {
+    enabled: boolean;
+    minNodeCount: number;
+    maxNodeCount: number;
+  };
+  autoPause: {
+    enabled: boolean;
+    delayInMinutes: number;
+  };
+}
+
+export interface SparkPool extends ArmResource {
+  properties: SparkPoolProperties;
+}
+
+export interface MemoryUsageInfo {
+  freeKB: number;
+  totalKB: number;
+}
+
+export interface NotebookMetadata {
+  date: string;
+  description: string;
+  tags: string[];
+  author: string;
+  views: number;
+  likes: number;
+  downloads: number;
+  imageUrl: string;
+}
+
+export interface UserMetadata {
+  likedNotebooks: string[];
+}
+
+export interface GitHubInfoJunoResponse {
+  encoding: string;
+  encodedContent: string;
+  content: string;
+  target: string;
+  submoduleGitUrl: string;
+  name: string;
+  path: string;
+  sha: string;
+  size: number;
+  type: {
+    stringValue: string;
+    value: number;
+  };
+  downloadUrl: string;
+  url: string;
+  gitUrl: string;
+  htmlUrl: string;
+  metadata?: NotebookMetadata;
+}
+
+export interface LikedNotebooksJunoResponse {
+  likedNotebooksContent: GitHubInfoJunoResponse[];
+  userMetadata: UserMetadata;
+}
+
+export interface resourceTokenConnectionStringProperties {
+  accountEndpoint: string;
+  collectionId: string;
+  databaseId: string;
+  partitionKey?: string;
+  resourceToken: string;
+}

src/Contracts/Diagnostics.ts

@@ -0,0 +1,55 @@
+/**
+ * Trace level.
+ */
+export enum LogEntryLevel {
+  /**
+   * Custom events.
+   */
+  Custom = -2,
+  /**
+   * Debug level.
+   */
+  Debug = -1,
+  /**
+   * Verbose level.
+   */
+  Verbose = 0,
+  /**
+   * Warning level.
+   */
+  Warning = 1,
+  /**
+   * Error level.
+   */
+  Error = 2
+}
+/**
+ * Schema of a log entry.
+ */
+export interface LogEntry {
+  /**
+   * Timestamp
+   */
+  timestamp: number;
+  /**
+   * Level
+   */
+  level: LogEntryLevel;
+  /**
+   * Portal, etc
+   */
+  area: string;
+  /**
+   * The message to be logged.
+   */
+  message: string;
+  /**
+   * The message code.
+   */
+  code: number;
+  /**
+   * Any additional data to be logged.
+   */
+  args?: any[];
+}
+export type LogMessage = string | Error;

src/Contracts/ExplorerContracts.ts

@@ -0,0 +1,38 @@
+import * as Versions from "./Versions";
+import * as ActionContracts from "./ActionContracts";
+import * as Diagnostics from "./Diagnostics";
+
+/**
+ * Messaging types used with Data Explorer <-> Portal communication
+ * and Hosted <-> Explorer communication
+ */
+export enum MessageTypes {
+  TelemetryInfo,
+  LogInfo,
+  RefreshResources,
+  AllDatabases,
+  CollectionsForDatabase,
+  RefreshOffers,
+  AllOffers,
+  UpdateLocationHash,
+  SingleOffer,
+  RefreshOffer,
+  UpdateAccountName,
+  ForbiddenError,
+  AadSignIn,
+  GetAccessAadRequest,
+  GetAccessAadResponse,
+  UpdateAccountSwitch,
+  UpdateDirectoryControl,
+  SwitchAccount,
+  SendNotification,
+  ClearNotification,
+  ExplorerClickEvent,
+  LoadingStatus,
+  GetArcadiaToken,
+  CreateWorkspace,
+  CreateSparkPool,
+  RefreshDatabaseAccount
+}
+
+export { Versions, ActionContracts, Diagnostics };

src/Contracts/Versions.ts

@@ -0,0 +1,4 @@
+/**
+ * Data Explorer version {major.minor.patch}
+ */
+export const DataExplorer: string = "1.0.1";

src/Controls/Heatmap/Heatmap.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="data:," />
+  </head>
+
+  <body>
+    <div id="heatmap"></div>
+  </body>
+</html>

src/Controls/Heatmap/Heatmap.less

@@ -0,0 +1,55 @@
+@import "../../../less/Common/Constants";
+html {
+  font-family: @DataExplorerFont;
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: @DataExplorerFont;
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+  overflow: hidden;
+}
+
+#heatmap {
+  .dark-theme {
+    color: @BaseLight;
+  }
+
+  .chartTitle {
+    position: absolute;
+    top: 5px;
+    left: 3px;
+    font-size: 13px;
+  }
+
+  .noDataMessage {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    z-index: 10000;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0.97;
+    div {
+      border-color: rgba(204, 204, 204, 0.8);
+      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
+      padding: 15px 10px;
+      width: calc(55% - 40px);
+      font-size: 13px;
+      text-align: center;
+      border-width: 1px;
+      border-style: solid;
+    }
+  }
+}

src/Controls/Heatmap/Heatmap.test.ts

@@ -0,0 +1,141 @@
+import dayjs from "dayjs";
+import { handleMessage, Heatmap, isDarkTheme } from "./Heatmap";
+import { PortalTheme } from "./HeatmapDatatypes";
+
+describe("The Heatmap Control", () => {
+  const dataPoints = {
+    "1": {
+      "2019-06-19T00:59:10Z": {
+        "Normalized Throughput": 0.35
+      },
+      "2019-06-19T00:48:10Z": {
+        "Normalized Throughput": 0.25
+      }
+    }
+  };
+
+  const chartCaptions = {
+    chartTitle: "chart title",
+    yAxisTitle: "YAxisTitle",
+    tooltipText: "Tooltip text",
+    timeWindow: 123456789
+  };
+
+  let heatmap: Heatmap;
+  let theme: PortalTheme = 1;
+  const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+
+  describe("drawHeatmap rendering", () => {
+    beforeEach(() => {
+      heatmap = new Heatmap(dataPoints, chartCaptions, theme);
+      document.body.innerHTML = divElement;
+    });
+
+    afterEach(() => {
+      document.body.innerHTML = ``;
+    });
+
+    it("should call _getChartSettings when drawHeatmap is invoked", () => {
+      const _getChartSettings = spyOn<any>(heatmap, "_getChartSettings");
+      heatmap.drawHeatmap();
+      expect(_getChartSettings.calls.any()).toBe(true);
+    });
+
+    it("should call _getLayoutSettings when drawHeatmap is invoked", () => {
+      const _getLayoutSettings = spyOn<any>(heatmap, "_getLayoutSettings");
+      heatmap.drawHeatmap();
+      expect(_getLayoutSettings.calls.any()).toBe(true);
+    });
+
+    it("should call _getChartDisplaySettings when drawHeatmap is invoked", () => {
+      const _getChartDisplaySettings = spyOn<any>(heatmap, "_getChartDisplaySettings");
+      heatmap.drawHeatmap();
+      expect(_getChartDisplaySettings.calls.any()).toBe(true);
+    });
+
+    it("drawHeatmap should render a Heatmap inside the div element", () => {
+      heatmap.drawHeatmap();
+      expect(document.body.innerHTML).not.toEqual(divElement);
+    });
+  });
+
+  describe("generateMatrixFromMap", () => {
+    it("should massage input data to match output expected", () => {
+      expect(heatmap.generateMatrixFromMap(dataPoints).yAxisPoints).toEqual(["1"]);
+      expect(heatmap.generateMatrixFromMap(dataPoints).dataPoints).toEqual([[0.25, 0.35]]);
+      expect(heatmap.generateMatrixFromMap(dataPoints).xAxisPoints.length).toEqual(2);
+    });
+
+    it("should output the date format to ISO8601 string format", () => {
+      expect(heatmap.generateMatrixFromMap(dataPoints).xAxisPoints[0].slice(10, 11)).toEqual("T");
+      expect(heatmap.generateMatrixFromMap(dataPoints).xAxisPoints[0].slice(-1)).toEqual("Z");
+    });
+
+    it("should convert the time to the user's local time", () => {
+      if (dayjs().utcOffset()) {
+        expect(heatmap.generateMatrixFromMap(dataPoints).xAxisPoints).not.toEqual([
+          "2019-06-19T00:48:10Z",
+          "2019-06-19T00:59:10Z"
+        ]);
+      } else {
+        expect(heatmap.generateMatrixFromMap(dataPoints).xAxisPoints).toEqual([
+          "2019-06-19T00:48:10Z",
+          "2019-06-19T00:59:10Z"
+        ]);
+      }
+    });
+  });
+
+  describe("isDarkTheme", () => {
+    it("isDarkTheme should return the correct result", () => {
+      expect(isDarkTheme(PortalTheme.dark)).toEqual(true);
+      expect(isDarkTheme(PortalTheme.azure)).not.toEqual(true);
+    });
+  });
+});
+
+describe("iframe rendering when there is no data", () => {
+  afterEach(() => {
+    document.body.innerHTML = ``;
+  });
+
+  it("should show a no data message with a dark theme", () => {
+    let data = {
+      data: {
+        signature: "pcIframe",
+        data: {
+          chartData: {},
+          chartSettings: {},
+          theme: 4
+        }
+      }
+    };
+
+    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    document.body.innerHTML = divElement;
+
+    handleMessage(data as MessageEvent);
+    expect(document.body.innerHTML).toContain("dark-theme");
+    expect(document.body.innerHTML).toContain("noDataMessage");
+  });
+
+  it("should show a no data message with a white theme", () => {
+    let data = {
+      data: {
+        signature: "pcIframe",
+        data: {
+          chartData: {},
+          chartSettings: {},
+          theme: 2
+        }
+      }
+    };
+
+    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    document.body.innerHTML = divElement;
+
+    handleMessage(data as MessageEvent);
+    expect(document.body.innerHTML).not.toContain("dark-theme");
+    expect(document.body.innerHTML).toContain("noDataMessage");
+  });
+});

src/Controls/Heatmap/Heatmap.ts

@@ -0,0 +1,268 @@
+import * as Plotly from "plotly.js-cartesian-dist-min";
+import dayjs from "dayjs";
+import {
+  ChartSettings,
+  DataPayload,
+  DisplaySettings,
+  FontSettings,
+  HeatmapCaptions,
+  HeatmapData,
+  LayoutSettings,
+  PartitionTimeStampToData,
+  PortalTheme
+} from "./HeatmapDatatypes";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import { MessageHandler } from "../../Common/MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { StyleConstants } from "../../Common/Constants";
+import "./Heatmap.less";
+
+export class Heatmap {
+  public static readonly elementId: string = "heatmap";
+
+  private _chartData: HeatmapData;
+  private _heatmapCaptions: HeatmapCaptions;
+  private _theme: PortalTheme;
+  private _defaultFontColor: string;
+
+  constructor(data: DataPayload, heatmapCaptions: HeatmapCaptions, theme: PortalTheme) {
+    this._theme = theme;
+    this._defaultFontColor = StyleConstants.BaseDark;
+    this._setThemeColorForChart();
+    this._chartData = this.generateMatrixFromMap(data);
+    this._heatmapCaptions = heatmapCaptions;
+  }
+
+  private _setThemeColorForChart() {
+    if (isDarkTheme(this._theme)) {
+      this._defaultFontColor = StyleConstants.BaseLight;
+    }
+  }
+
+  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color: string = "#838383"): FontSettings {
+    return {
+      family: StyleConstants.DataExplorerFont,
+      size,
+      color
+    };
+  }
+
+  public generateMatrixFromMap(data: DataPayload): HeatmapData {
+    // all keys in data payload, sorted...
+    const rows: string[] = Object.keys(data).sort((a: string, b: string) => {
+      if (parseInt(a) < parseInt(b)) {
+        return -1;
+      } else {
+        if (parseInt(a) > parseInt(b)) {
+          return 1;
+        } else {
+          return 0;
+        }
+      }
+    });
+    const output: HeatmapData = {
+      yAxisPoints: [],
+      dataPoints: [],
+      xAxisPoints: Object.keys(data[rows[0]]).sort((a: string, b: string) => {
+        if (a < b) {
+          return -1;
+        } else {
+          if (a > b) {
+            return 1;
+          } else {
+            return 0;
+          }
+        }
+      })
+    };
+    // go thru all rows and create 2d matrix for heatmap...
+    for (let i = 0; i < rows.length; i++) {
+      output.yAxisPoints.push(rows[i]);
+      let dataPoints: number[] = [];
+      for (let a = 0; a < output.xAxisPoints.length; a++) {
+        let row: PartitionTimeStampToData = data[rows[i]];
+        dataPoints.push(row[output.xAxisPoints[a]]["Normalized Throughput"]);
+      }
+      output.dataPoints.push(dataPoints);
+    }
+    for (let a = 0; a < output.xAxisPoints.length; a++) {
+      const dateTime = output.xAxisPoints[a];
+      // convert to local users timezone...
+      const day = dayjs(new Date(dateTime)).format("YYYY-MM-DD");
+      const hour = dayjs(new Date(dateTime)).format("HH:mm:ss");
+      // coerce to ISOString format since that is what plotly wants...
+      output.xAxisPoints[a] = `${day}T${hour}Z`;
+    }
+    return output;
+  }
+
+  private _getChartSettings(): ChartSettings[] {
+    return [
+      {
+        z: this._chartData.dataPoints,
+        type: "heatmap",
+        zmin: 0,
+        zmid: 50,
+        zmax: 100,
+        colorscale: [
+          [0.0, "#1FD338"],
+          [0.1, "#1CAD2F"],
+          [0.2, "#50A527"],
+          [0.3, "#719F21"],
+          [0.4, "#95991B"],
+          [0.5, "#CE8F11"],
+          [0.6, "#E27F0F"],
+          [0.7, "#E46612"],
+          [0.8, "#E64914"],
+          [0.9, "#B80016"],
+          [1.0, "#B80016"]
+        ],
+        name: "",
+        hovertemplate: this._heatmapCaptions.tooltipText,
+        colorbar: {
+          thickness: 15,
+          outlinewidth: 0,
+          tickcolor: StyleConstants.BaseDark,
+          tickfont: this._getFontStyles(10, this._defaultFontColor)
+        },
+        y: this._chartData.yAxisPoints,
+        x: this._chartData.xAxisPoints
+      }
+    ];
+  }
+
+  private _getLayoutSettings(): LayoutSettings {
+    return {
+      margin: {
+        l: 40,
+        r: 10,
+        b: 35,
+        t: 30,
+        pad: 0
+      },
+      paper_bgcolor: "transparent",
+      plot_bgcolor: "transparent",
+      width: 462,
+      height: 240,
+      yaxis: {
+        title: this._heatmapCaptions.yAxisTitle,
+        titlefont: this._getFontStyles(11),
+        autorange: true,
+        showgrid: false,
+        zeroline: false,
+        showline: false,
+        autotick: true,
+        fixedrange: true,
+        ticks: "",
+        showticklabels: false
+      },
+      xaxis: {
+        fixedrange: true,
+        title: "*White area in heatmap indicates there is no available data",
+        titlefont: this._getFontStyles(11),
+        autorange: true,
+        showgrid: false,
+        zeroline: false,
+        showline: false,
+        autotick: true,
+        tickformat: this._heatmapCaptions.timeWindow > 7 ? "%I:%M %p" : "%b %e",
+        showticklabels: true,
+        tickfont: this._getFontStyles(10)
+      },
+      title: {
+        text: this._heatmapCaptions.chartTitle,
+        x: 0.01,
+        font: this._getFontStyles(13, this._defaultFontColor)
+      }
+    };
+  }
+
+  private _getChartDisplaySettings(): DisplaySettings {
+    return {
+      /* heatmap can be fully responsive however the min-height needed in that case is greater than the iframe portal height, hence explicit width + height have been set in _getLayoutSettings
+      responsive: true,*/
+      displayModeBar: false
+    };
+  }
+
+  public drawHeatmap(): void {
+    // todo - create random elementId generator so multiple heatmaps can be created - ticket # 431469
+    Plotly.plot(
+      Heatmap.elementId,
+      this._getChartSettings(),
+      this._getLayoutSettings(),
+      this._getChartDisplaySettings()
+    );
+    let plotDiv: any = document.getElementById(Heatmap.elementId);
+    plotDiv.on("plotly_click", (data: any) => {
+      let timeSelected: string = data.points[0].x;
+      timeSelected = timeSelected.replace(" ", "T");
+      timeSelected = `${timeSelected}Z`;
+      let xAxisIndex;
+      for (let i = 0; i < this._chartData.xAxisPoints.length; i++) {
+        if (this._chartData.xAxisPoints[i] === timeSelected) {
+          xAxisIndex = i;
+          break;
+        }
+      }
+      let output = [];
+      for (let i = 0; i < this._chartData.dataPoints.length; i++) {
+        output.push(this._chartData.dataPoints[i][xAxisIndex]);
+      }
+      MessageHandler.sendCachedDataMessage(MessageTypes.LogInfo, output);
+    });
+  }
+}
+
+export function isDarkTheme(theme: PortalTheme) {
+  return theme === PortalTheme.dark;
+}
+
+export function handleMessage(event: MessageEvent) {
+  if (isInvalidParentFrameOrigin(event)) {
+    return;
+  }
+
+  if (typeof event.data !== "object" || event.data["signature"] !== "pcIframe") {
+    return;
+  }
+  if (
+    typeof event.data.data !== "object" ||
+    !("chartData" in event.data.data) ||
+    !("chartSettings" in event.data.data)
+  ) {
+    return;
+  }
+  Plotly.purge(Heatmap.elementId);
+  document.getElementById(Heatmap.elementId).innerHTML = "";
+  const data = event.data.data;
+  const chartData: DataPayload = data.chartData;
+  const chartSettings: HeatmapCaptions = data.chartSettings;
+  const chartTheme: PortalTheme = data.theme;
+  if (Object.keys(chartData).length) {
+    new Heatmap(chartData, chartSettings, chartTheme).drawHeatmap();
+  } else {
+    const chartTitleElement = document.createElement("div");
+    chartTitleElement.innerHTML = data.chartSettings.chartTitle;
+    chartTitleElement.classList.add("chartTitle");
+
+    const noDataMessageElement = document.createElement("div");
+    noDataMessageElement.classList.add("noDataMessage");
+    const noDataMessageContent = document.createElement("div");
+    noDataMessageContent.innerHTML = data.errorMessage;
+
+    noDataMessageElement.appendChild(noDataMessageContent);
+
+    if (isDarkTheme(chartTheme)) {
+      chartTitleElement.classList.add("dark-theme");
+      noDataMessageElement.classList.add("dark-theme");
+      noDataMessageContent.classList.add("dark-theme");
+    }
+
+    document.getElementById(Heatmap.elementId).appendChild(chartTitleElement);
+    document.getElementById(Heatmap.elementId).appendChild(noDataMessageElement);
+  }
+}
+
+window.addEventListener("message", handleMessage, false);
+MessageHandler.sendMessage("ready");

src/Controls/Heatmap/HeatmapDatatypes.ts

@@ -0,0 +1,106 @@
+type dataPoint = string | number;
+
+export interface DataPayload {
+  [id: string]: PartitionTimeStampToData;
+}
+
+export enum PortalTheme {
+  blue = 1,
+  azure,
+  light,
+  dark
+}
+
+export interface HeatmapData {
+  yAxisPoints: string[];
+  xAxisPoints: string[];
+  dataPoints: dataPoint[][];
+}
+
+export interface HeatmapCaptions {
+  chartTitle: string;
+  yAxisTitle: string;
+  tooltipText: string;
+  timeWindow: number;
+}
+
+export interface FontSettings {
+  family: string;
+  size: number;
+  color: string;
+}
+
+export interface LayoutSettings {
+  paper_bgcolor?: string;
+  plot_bgcolor?: string;
+  margin?: {
+    l: number;
+    r: number;
+    b: number;
+    t: number;
+    pad: number;
+  };
+  width?: number;
+  height?: number;
+  yaxis?: {
+    fixedrange: boolean;
+    title: HeatmapCaptions["yAxisTitle"];
+    titlefont: FontSettings;
+    autorange: boolean;
+    showgrid: boolean;
+    zeroline: boolean;
+    showline: boolean;
+    autotick: boolean;
+    ticks: "";
+    showticklabels: boolean;
+  };
+  xaxis?: {
+    fixedrange: boolean;
+    title: string;
+    titlefont: FontSettings;
+    autorange: boolean;
+    showgrid: boolean;
+    zeroline: boolean;
+    showline: boolean;
+    autotick: boolean;
+    showticklabels: boolean;
+    tickformat: string;
+    tickfont: FontSettings;
+  };
+  title?: {
+    text: HeatmapCaptions["chartTitle"];
+    x: number;
+    font?: FontSettings;
+  };
+  font?: FontSettings;
+}
+
+export interface ChartSettings {
+  z: HeatmapData["dataPoints"];
+  type: "heatmap";
+  zmin: number;
+  zmid: number;
+  zmax: number;
+  colorscale: [number, string][];
+  name: string;
+  hovertemplate: HeatmapCaptions["tooltipText"];
+  colorbar: {
+    thickness: number;
+    outlinewidth: number;
+    tickcolor: string;
+    tickfont: FontSettings;
+  };
+  y: HeatmapData["yAxisPoints"];
+  x: HeatmapData["xAxisPoints"];
+}
+
+export interface DisplaySettings {
+  displayModeBar: boolean;
+  responsive?: boolean;
+}
+
+export interface PartitionTimeStampToData {
+  [timeSeriesDates: string]: {
+    [NormalizedThroughput: string]: number;
+  };
+}

src/Definitions/adal.d.ts

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

src/Definitions/gif.d.ts

@@ -0,0 +1,4 @@
+declare module "*.gif" {
+  const template: string;
+  export default template;
+}

src/Definitions/globals.d.ts

@@ -0,0 +1,9 @@
+/* 
+d3-shape depends on a global type CanvasPathMethods in lib.dom.d.ts, but this was renamed
+to CanvasPath in TS 3.1. This file aliases the new type to the old type name to make
+d3-shape happy. 
+See: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/27776
+And: https://github.com/Microsoft/TSJS-lib-generator/issues/548
+*/
+
+type CanvasPathMethods = CanvasPath;

src/Definitions/html.d.ts

@@ -0,0 +1,4 @@
+declare module "*.html" {
+  const template: string;
+  export default template;
+}

src/Definitions/jquery-typescript.d.ts

@@ -0,0 +1,34 @@
+/* Type definitions for code-runner's jquery-typeahead v2.8.0
+ * https://github.com/running-coder/jquery-typeahead
+ *
+ * There is no DefinitelyTyped support for this library, yet, so we only define here what we use.
+ * https://github.com/running-coder/jquery-typeahead/issues/156
+ * TODO: Replace this minimum definition by the official one when it comes out.
+ */
+/// <reference path="jquery.d.ts" />
+
+interface JQueryTypeaheadParam {
+  input: string;
+  order?: string;
+  source: any;
+  callback?: any;
+  minLength?: number;
+  searchOnFocus?: boolean;
+  template?: string | { (query: string, item: any): string };
+  dynamic?: boolean;
+  mustSelectItem?: boolean;
+}
+
+/**
+ * For use with: $.typeahead()
+ */
+interface JQueryStatic {
+  typeahead(arg: JQueryTypeaheadParam): void;
+}
+
+/**
+ * For use with $('').typehead()
+ */
+// interface JQuery {
+//     typeahead(arg: JQueryTypeaheadParam): void;
+// }

src/Definitions/jquery.contextmenu.d.ts

@@ -0,0 +1,42 @@
+// Type definitions for jQuery contextMenu 1.7.0
+// Project: http://medialize.github.com/jQuery-contextMenu/
+// Definitions by: Natan Vivo <https://github.com/nvivo/>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference path="jquery.d.ts" />
+
+interface JQueryContextMenuOptions {
+  selector: string;
+  appendTo?: string;
+  trigger?: string;
+  autoHide?: boolean;
+  delay?: number;
+  determinePosition?: (menu: JQuery) => void;
+  position?: (opt: JQuery, x: number, y: number) => void;
+  positionSubmenu?: (menu: JQuery) => void;
+  zIndex?: number;
+  animation?: {
+    duration?: number;
+    show?: string;
+    hide?: string;
+  };
+  events?: {
+    show?: () => void;
+    hide?: () => void;
+  };
+  callback?: (key: any, options: any) => any;
+  items?: any;
+  build?: (triggerElement: JQuery, e: Event) => any;
+  reposition?: boolean;
+  className?: string;
+  itemClickEvent?: string;
+}
+
+interface JQueryStatic {
+  contextMenu(options?: JQueryContextMenuOptions): JQuery;
+  contextMenu(type: string, selector?: any): JQuery;
+}
+
+interface JQuery {
+  contextMenu(options?: any): JQuery;
+}

src/Definitions/plotly.js-cartesian-dist.d-min.ts

@@ -0,0 +1 @@
+declare module "plotly.js-cartesian-dist-min";

src/Definitions/png.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const template: string;
+  export default template;
+}

src/Definitions/svg.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const template: string;
+  export default template;
+}

src/Definitions/worker.d.ts

@@ -0,0 +1,7 @@
+declare module "worker-loader!*" {
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  export default WebpackWorker;
+}

src/Explorer/ComponentRegisterer.test.ts

@@ -0,0 +1,178 @@
+jest.mock("monaco-editor");
+
+import * as ko from "knockout";
+import "./ComponentRegisterer";
+
+describe("Component Registerer", () => {
+  it("should register command-button component", () => {
+    expect(ko.components.isRegistered("command-button")).toBe(true);
+  });
+
+  it("should register input-typeahead component", () => {
+    expect(ko.components.isRegistered("input-typeahead")).toBe(true);
+  });
+
+  it("should register new-vertex-form component", () => {
+    expect(ko.components.isRegistered("new-vertex-form")).toBe(true);
+  });
+
+  it("should register error-display component", () => {
+    expect(ko.components.isRegistered("error-display")).toBe(true);
+  });
+
+  it("should register graph-style component", () => {
+    expect(ko.components.isRegistered("graph-style")).toBe(true);
+  });
+
+  it("should register collapsible-panel component", () => {
+    expect(ko.components.isRegistered("collapsible-panel")).toBe(true);
+  });
+
+  it("should register json-editor component", () => {
+    expect(ko.components.isRegistered("json-editor")).toBe(true);
+  });
+
+  it("should register documents-tab component", () => {
+    expect(ko.components.isRegistered("documents-tab")).toBe(true);
+  });
+
+  it("should register stored-procedure-tab component", () => {
+    expect(ko.components.isRegistered("stored-procedure-tab")).toBe(true);
+  });
+
+  it("should register trigger-tab component", () => {
+    expect(ko.components.isRegistered("trigger-tab")).toBe(true);
+  });
+
+  it("should register user-defined-function-tab component", () => {
+    expect(ko.components.isRegistered("user-defined-function-tab")).toBe(true);
+  });
+
+  it("should register settings-tab component", () => {
+    expect(ko.components.isRegistered("settings-tab")).toBe(true);
+  });
+
+  it("should register query-tab component", () => {
+    expect(ko.components.isRegistered("query-tab")).toBe(true);
+  });
+
+  it("should register tables-query-tab component", () => {
+    expect(ko.components.isRegistered("tables-query-tab")).toBe(true);
+  });
+
+  it("should register graph-tab component", () => {
+    expect(ko.components.isRegistered("graph-tab")).toBe(true);
+  });
+
+  it("should register notebook-tab component", () => {
+    expect(ko.components.isRegistered("notebook-tab")).toBe(true);
+  });
+
+  it("should register notebookv2-tab component", () => {
+    expect(ko.components.isRegistered("notebookv2-tab")).toBe(true);
+  });
+
+  it("should register terminal-tab component", () => {
+    expect(ko.components.isRegistered("terminal-tab")).toBe(true);
+  });
+
+  it("should register spark-master-tab component", () => {
+    expect(ko.components.isRegistered("spark-master-tab")).toBe(true);
+  });
+
+  it("should register mongo-shell-tab component", () => {
+    expect(ko.components.isRegistered("mongo-shell-tab")).toBe(true);
+  });
+
+  it("should register resource-tree component", () => {
+    expect(ko.components.isRegistered("resource-tree")).toBe(true);
+  });
+
+  it("should register database-node component", () => {
+    expect(ko.components.isRegistered("database-node")).toBe(true);
+  });
+
+  it("should register collection-node component", () => {
+    expect(ko.components.isRegistered("collection-node")).toBe(true);
+  });
+
+  it("should register stored-procedure-node component", () => {
+    expect(ko.components.isRegistered("stored-procedure-node")).toBe(true);
+  });
+
+  it("should register trigger-node component", () => {
+    expect(ko.components.isRegistered("trigger-node")).toBe(true);
+  });
+
+  it("should register user-defined-function-node component", () => {
+    expect(ko.components.isRegistered("user-defined-function-node")).toBe(true);
+  });
+
+  it("should registeradd-collection-pane component", () => {
+    expect(ko.components.isRegistered("add-collection-pane")).toBe(true);
+  });
+
+  it("should register delete-collection-confirmation-pane component", () => {
+    expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
+  });
+
+  it("should register delete-database-confirmation-pane component", () => {
+    expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
+  });
+
+  it("should register save-query-pane component", () => {
+    expect(ko.components.isRegistered("save-query-pane")).toBe(true);
+  });
+
+  it("should register browse-queries-pane component", () => {
+    expect(ko.components.isRegistered("browse-queries-pane")).toBe(true);
+  });
+
+  it("should register graph-new-vertex-pane component", () => {
+    expect(ko.components.isRegistered("graph-new-vertex-pane")).toBe(true);
+  });
+
+  it("should register graph-styling-pane component", () => {
+    expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
+  });
+
+  it("should register upload-file-pane component", () => {
+    expect(ko.components.isRegistered("upload-file-pane")).toBe(true);
+  });
+
+  it("should register string-input-pane component", () => {
+    expect(ko.components.isRegistered("string-input-pane")).toBe(true);
+  });
+
+  it("should register setup-notebooks-pane component", () => {
+    expect(ko.components.isRegistered("setup-notebooks-pane")).toBe(true);
+  });
+
+  it("should register setup-spark-cluster-pane component", () => {
+    expect(ko.components.isRegistered("setup-spark-cluster-pane")).toBe(true);
+  });
+
+  it("should register manage-spark-cluster-pane component", () => {
+    expect(ko.components.isRegistered("manage-spark-cluster-pane")).toBe(true);
+  });
+
+  it("should register collection-node-context-menu component", () => {
+    expect(ko.components.isRegistered("collection-node-context-menu")).toBe(true);
+  });
+
+  it("should register dynamic-list component", () => {
+    expect(ko.components.isRegistered("dynamic-list")).toBe(true);
+  });
+
+  it("should register throughput-input component", () => {
+    expect(ko.components.isRegistered("throughput-input")).toBe(true);
+  });
+
+  it("should register library-manage-pane component", () => {
+    expect(ko.components.isRegistered("library-manage-pane")).toBe(true);
+  });
+
+  it("should register cluster-library-pane component", () => {
+    expect(ko.components.isRegistered("cluster-library-pane")).toBe(true);
+  });
+});

src/Explorer/ComponentRegisterer.ts

@@ -0,0 +1,98 @@
+import * as ko from "knockout";
+import * as PaneComponents from "./Panes/PaneComponents";
+import * as TabComponents from "./Tabs/TabComponents";
+import * as TreeComponents from "./Tree/TreeComponents";
+import { CollapsiblePanelComponent } from "./Controls/CollapsiblePanel/CollapsiblePanelComponent";
+import { CommandButtonComponent } from "./Controls/CommandButton/CommandButton";
+import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
+import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
+import { EditorComponent } from "./Controls/Editor/EditorComponent";
+import { ErrorDisplayComponent } from "./Controls/ErrorDisplayComponent/ErrorDisplayComponent";
+import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
+import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
+import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
+import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
+import { ThroughputInputComponent } from "./Controls/ThroughputInput/ThroughputInputComponent";
+import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
+import { ToolbarComponent } from "./Controls/Toolbar/Toolbar";
+
+ko.components.register("command-button", CommandButtonComponent);
+ko.components.register("toolbar", new ToolbarComponent());
+ko.components.register("input-typeahead", new InputTypeaheadComponent());
+ko.components.register("new-vertex-form", NewVertexComponent);
+ko.components.register("error-display", new ErrorDisplayComponent());
+ko.components.register("graph-style", GraphStyleComponent);
+ko.components.register("collapsible-panel", new CollapsiblePanelComponent());
+ko.components.register("editor", new EditorComponent());
+ko.components.register("json-editor", new JsonEditorComponent());
+ko.components.register("diff-editor", new DiffEditorComponent());
+ko.components.register("dynamic-list", DynamicListComponent);
+ko.components.register("throughput-input", ThroughputInputComponent);
+ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
+
+// Collection Tabs
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
+ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
+ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
+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("tables-query-tab", new TabComponents.QueryTablesTab());
+ko.components.register("graph-tab", new TabComponents.GraphTab());
+ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
+ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
+ko.components.register("notebook-tab", new TabComponents.NotebookTab());
+ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
+ko.components.register("terminal-tab", new TabComponents.TerminalTab());
+ko.components.register("spark-master-tab", new TabComponents.SparkMasterTab());
+ko.components.register("gallery-tab", new TabComponents.GalleryTab());
+ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
+
+// Database Tabs
+ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+
+// Resource Tree nodes
+ko.components.register("resource-tree", new TreeComponents.ResourceTree());
+ko.components.register("database-node", new TreeComponents.DatabaseTreeNode());
+ko.components.register("collection-node", new TreeComponents.CollectionTreeNode());
+ko.components.register("stored-procedure-node", new TreeComponents.StoredProcedureTreeNode());
+ko.components.register("trigger-node", new TreeComponents.TriggerTreeNode());
+ko.components.register("user-defined-function-node", new TreeComponents.UserDefinedFunctionTreeNode());
+
+// Panes
+ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
+ko.components.register("add-collection-pane", new PaneComponents.AddCollectionPaneComponent());
+ko.components.register(
+  "delete-collection-confirmation-pane",
+  new PaneComponents.DeleteCollectionConfirmationPaneComponent()
+);
+ko.components.register(
+  "delete-database-confirmation-pane",
+  new PaneComponents.DeleteDatabaseConfirmationPaneComponent()
+);
+ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());
+ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
+ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
+ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEntityPaneComponent());
+ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
+ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
+ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
+ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
+ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
+ko.components.register("renew-adhoc-access-pane", new PaneComponents.RenewAdHocAccessPane());
+ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
+ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
+ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
+ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
+ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComponent());
+ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
+ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
+ko.components.register("setup-spark-cluster-pane", new PaneComponents.SetupSparkClusterPaneComponent());
+ko.components.register("manage-spark-cluster-pane", new PaneComponents.ManageSparkClusterPaneComponent());
+ko.components.register("library-manage-pane", new PaneComponents.LibraryManagePaneComponent());
+ko.components.register("cluster-library-pane", new PaneComponents.ClusterLibraryPaneComponent());
+ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());
+
+// Menus
+ko.components.register("collection-node-context-menu", new TreeComponents.CollectionTreeNodeContextMenu());

src/Explorer/ContextMenuButtonFactory.ts

@@ -0,0 +1,422 @@
+import * as ko from "knockout";
+import * as ViewModels from "../Contracts/ViewModels";
+import { CommandButtonOptions } from "./Controls/CommandButton/CommandButton";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
+import AddCollectionIcon from "../../images/AddCollection.svg";
+import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
+import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
+import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
+import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
+import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
+import DeleteUDFIcon from "../../images/DeleteUDF.svg";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+
+export interface CollectionContextMenuButtonParams {
+  databaseId: string;
+  collectionId: string;
+}
+
+export interface DatabaseContextMenuButtonParams {
+  databaseId: string;
+}
+/**
+ * New resource tree (in ReactJS)
+ */
+export class ResourceTreeContextMenuButtonFactory {
+  public static createDatabaseContextMenu(
+    container: ViewModels.Explorer,
+    selectedDatabase: ViewModels.Database
+  ): TreeNodeMenuItem[] {
+    const newCollectionMenuItem: TreeNodeMenuItem = {
+      iconSrc: AddCollectionIcon,
+      onClick: () => container.onNewCollectionClicked(),
+      label: container.addCollectionText()
+    };
+
+    const deleteDatabaseMenuItem = {
+      iconSrc: DeleteDatabaseIcon,
+      onClick: () => container.deleteDatabaseConfirmationPane.open(),
+      label: container.deleteDatabaseText()
+    };
+    return [newCollectionMenuItem, deleteDatabaseMenuItem];
+  }
+
+  public static createCollectionContextMenuButton(
+    container: ViewModels.Explorer,
+    selectedCollection: ViewModels.Collection
+  ): TreeNodeMenuItem[] {
+    const items: TreeNodeMenuItem[] = [];
+    if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
+      items.push({
+        iconSrc: AddSqlQueryIcon,
+        onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null),
+        label: "New SQL Query"
+      });
+    }
+
+    if (container.isPreferredApiMongoDB()) {
+      items.push({
+        iconSrc: AddSqlQueryIcon,
+        onClick: () => selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, null),
+        label: "New Query"
+      });
+
+      items.push({
+        iconSrc: HostedTerminalIcon,
+        onClick: () => {
+          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        },
+        label: "New Shell"
+      });
+    }
+
+    if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
+      items.push({
+        iconSrc: AddStoredProcedureIcon,
+        onClick: () => {
+          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+          selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, null);
+        },
+        label: "New Stored Procedure"
+      });
+
+      items.push({
+        iconSrc: AddUdfIcon,
+        onClick: () => {
+          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+          selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection, null);
+        },
+        label: "New UDF"
+      });
+
+      items.push({
+        iconSrc: AddTriggerIcon,
+        onClick: () => {
+          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+          selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, null);
+        },
+        label: "New Trigger"
+      });
+    }
+
+    items.push({
+      iconSrc: DeleteCollectionIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onDeleteCollectionContextMenuClick(selectedCollection, null);
+      },
+      label: container.deleteCollectionText()
+    });
+
+    return items;
+  }
+
+  public static createStoreProcedureContextMenuItems(container: ViewModels.Explorer): TreeNodeMenuItem[] {
+    if (container.isPreferredApiCassandra()) {
+      return [];
+    }
+
+    return [
+      {
+        iconSrc: DeleteSprocIcon,
+        onClick: () => {
+          const selectedStoreProcedure: ViewModels.StoredProcedure = container.findSelectedStoredProcedure();
+          selectedStoreProcedure && selectedStoreProcedure.delete(selectedStoreProcedure, null);
+        },
+        label: "Delete Store Procedure"
+      }
+    ];
+  }
+
+  public static createTriggerContextMenuItems(container: ViewModels.Explorer): TreeNodeMenuItem[] {
+    if (container.isPreferredApiCassandra()) {
+      return [];
+    }
+
+    return [
+      {
+        iconSrc: DeleteTriggerIcon,
+        onClick: () => {
+          const selectedTrigger: ViewModels.Trigger = container.findSelectedTrigger();
+          selectedTrigger && selectedTrigger.delete(selectedTrigger, null);
+        },
+        label: "Delete Trigger"
+      }
+    ];
+  }
+
+  public static createUserDefinedFunctionContextMenuItems(container: ViewModels.Explorer): TreeNodeMenuItem[] {
+    if (container.isPreferredApiCassandra()) {
+      return [];
+    }
+
+    return [
+      {
+        iconSrc: DeleteUDFIcon,
+        onClick: () => {
+          const selectedUDF: ViewModels.UserDefinedFunction = container.findSelectedUDF();
+          selectedUDF && selectedUDF.delete(selectedUDF, null);
+        },
+        label: "Delete User Defined Function"
+      }
+    ];
+  }
+}
+
+/**
+ * Current resource tree (in KO)
+ * TODO: Remove when switching to new resource tree
+ */
+export class ContextMenuButtonFactory {
+  public static createDatabaseContextMenuButton(
+    container: ViewModels.Explorer,
+    btnParams: DatabaseContextMenuButtonParams
+  ): CommandButtonOptions[] {
+    const addCollectionId = `${btnParams.databaseId}-${container.addCollectionText()}`;
+    const deleteDatabaseId = `${btnParams.databaseId}-${container.deleteDatabaseText()}`;
+    const newCollectionButtonOptions: CommandButtonOptions = {
+      iconSrc: AddCollectionIcon,
+      id: addCollectionId,
+      onCommandClick: () => {
+        if (container.isPreferredApiCassandra()) {
+          container.cassandraAddCollectionPane.open();
+        } else {
+          container.addCollectionPane.open(container.selectedDatabaseId());
+        }
+
+        const selectedDatabase: ViewModels.Database = container.findSelectedDatabase();
+        selectedDatabase && selectedDatabase.contextMenu.hide(selectedDatabase, null);
+      },
+      commandButtonLabel: container.addCollectionText(),
+      hasPopup: true
+    };
+
+    const deleteDatabaseButtonOptions: CommandButtonOptions = {
+      iconSrc: DeleteDatabaseIcon,
+      id: deleteDatabaseId,
+      onCommandClick: () => {
+        const database: ViewModels.Database = container.findSelectedDatabase();
+        database.onDeleteDatabaseContextMenuClick(database, null);
+      },
+      commandButtonLabel: container.deleteDatabaseText(),
+      hasPopup: true,
+      disabled: ko.computed<boolean>(() => container.isNoneSelected()),
+      visible: ko.computed<boolean>(() => !container.isNoneSelected())
+    };
+
+    return [newCollectionButtonOptions, deleteDatabaseButtonOptions];
+  }
+
+  public static createCollectionContextMenuButton(
+    container: ViewModels.Explorer,
+    btnParams: CollectionContextMenuButtonParams
+  ): CommandButtonOptions[] {
+    const newSqlQueryId = `${btnParams.databaseId}-${btnParams.collectionId}-newSqlQuery`;
+    const newSqlQueryForGraphId = `${btnParams.databaseId}-${btnParams.collectionId}-newSqlQueryForGraph`;
+    const newQueryForMongoId = `${btnParams.databaseId}-${btnParams.collectionId}-newQuery`;
+    const newShellForMongoId = `${btnParams.databaseId}-${btnParams.collectionId}-newShell`;
+    const newStoredProcedureId = `${btnParams.databaseId}-${btnParams.collectionId}-newStoredProcedure`;
+    const udfId = `${btnParams.databaseId}-${btnParams.collectionId}-udf`;
+    const newTriggerId = `${btnParams.databaseId}-${btnParams.collectionId}-newTrigger`;
+    const deleteCollectionId = `${btnParams.databaseId}-${btnParams.collectionId}-${container.deleteCollectionText()}`;
+
+    const newSQLQueryButtonOptions: CommandButtonOptions = {
+      iconSrc: AddSqlQueryIcon,
+      id: newSqlQueryId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null);
+      },
+      commandButtonLabel: "New SQL Query",
+      hasPopup: true,
+      disabled: ko.computed<boolean>(
+        () => container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiDocumentDB()
+      ),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiDocumentDB()
+      )
+      //TODO: Merge with add query logic below, same goes for CommandBarButtonFactory
+    };
+
+    const newSQLQueryButtonOptionsForGraph: CommandButtonOptions = {
+      iconSrc: AddSqlQueryIcon,
+      id: newSqlQueryForGraphId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null);
+      },
+      commandButtonLabel: "New SQL Query",
+      hasPopup: true,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiGraph()),
+      visible: ko.computed<boolean>(() => !container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiGraph())
+    };
+
+    const newMongoQueryButtonOptions: CommandButtonOptions = {
+      iconSrc: AddSqlQueryIcon,
+      id: newQueryForMongoId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, null);
+      },
+      commandButtonLabel: "New Query",
+      hasPopup: true,
+      disabled: ko.computed<boolean>(
+        () => container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB()
+      ),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB()
+      )
+    };
+
+    const newMongoShellButtonOptions: CommandButtonOptions = {
+      iconSrc: HostedTerminalIcon,
+      id: newShellForMongoId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewMongoShellClick();
+      },
+      commandButtonLabel: "New Shell",
+      hasPopup: true,
+      disabled: ko.computed<boolean>(
+        () => container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB()
+      ),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && container.isPreferredApiMongoDB()
+      )
+    };
+
+    const newStoredProcedureButtonOptions: CommandButtonOptions = {
+      iconSrc: AddStoredProcedureIcon,
+      id: newStoredProcedureId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, null);
+      },
+      commandButtonLabel: "New Stored Procedure",
+      hasPopup: true,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected()),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && !container.isPreferredApiCassandra()
+      )
+    };
+
+    const newUserDefinedFunctionButtonOptions: CommandButtonOptions = {
+      iconSrc: AddUdfIcon,
+      id: udfId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection, null);
+      },
+      commandButtonLabel: "New UDF",
+      hasPopup: true,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected()),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && !container.isPreferredApiCassandra()
+      )
+    };
+
+    const newTriggerButtonOptions: CommandButtonOptions = {
+      iconSrc: AddTriggerIcon,
+      id: newTriggerId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, null);
+      },
+      commandButtonLabel: "New Trigger",
+      hasPopup: true,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected()),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && !container.isPreferredApiCassandra()
+      )
+    };
+
+    const deleteCollectionButtonOptions: CommandButtonOptions = {
+      iconSrc: DeleteCollectionIcon,
+      id: deleteCollectionId,
+      onCommandClick: () => {
+        const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
+        selectedCollection && selectedCollection.onDeleteCollectionContextMenuClick(selectedCollection, null);
+      },
+      commandButtonLabel: container.deleteCollectionText(),
+      hasPopup: true,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected()),
+      visible: ko.computed<boolean>(() => !container.isDatabaseNodeOrNoneSelected())
+      //TODO: Change to isCollectionNodeorNoneSelected and same in CommandBarButtonFactory
+    };
+
+    return [
+      newSQLQueryButtonOptions,
+      newSQLQueryButtonOptionsForGraph,
+      newMongoQueryButtonOptions,
+      newMongoShellButtonOptions,
+      newStoredProcedureButtonOptions,
+      newUserDefinedFunctionButtonOptions,
+      newTriggerButtonOptions,
+      deleteCollectionButtonOptions
+    ];
+  }
+
+  public static createStoreProcedureContextMenuButton(container: ViewModels.Explorer): CommandButtonOptions[] {
+    const deleteStoredProcedureId = "Context Menu - Delete Stored Procedure";
+    const deleteStoreProcedureButtonOptions: CommandButtonOptions = {
+      iconSrc: DeleteSprocIcon,
+      id: deleteStoredProcedureId,
+      onCommandClick: () => {
+        const selectedStoreProcedure: ViewModels.StoredProcedure = container.findSelectedStoredProcedure();
+        selectedStoreProcedure && selectedStoreProcedure.delete(selectedStoreProcedure, null);
+      },
+      commandButtonLabel: "Delete Stored Procedure",
+      hasPopup: false,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected()),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && !container.isPreferredApiCassandra()
+      )
+    };
+
+    return [deleteStoreProcedureButtonOptions];
+  }
+
+  public static createTriggerContextMenuButton(container: ViewModels.Explorer): CommandButtonOptions[] {
+    const deleteTriggerId = "Context Menu - Delete Trigger";
+    const deleteTriggerButtonOptions: CommandButtonOptions = {
+      iconSrc: DeleteTriggerIcon,
+      id: deleteTriggerId,
+      onCommandClick: () => {
+        const selectedTrigger: ViewModels.Trigger = container.findSelectedTrigger();
+        selectedTrigger && selectedTrigger.delete(selectedTrigger, null);
+      },
+      commandButtonLabel: "Delete Trigger",
+      hasPopup: false,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected()),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && !container.isPreferredApiCassandra()
+      )
+    };
+
+    return [deleteTriggerButtonOptions];
+  }
+
+  public static createUserDefinedFunctionContextMenuButton(container: ViewModels.Explorer): CommandButtonOptions[] {
+    const deleteUserDefinedFunctionId = "Context Menu - Delete User Defined Function";
+    const deleteUserDefinedFunctionButtonOptions: CommandButtonOptions = {
+      iconSrc: DeleteUDFIcon,
+      id: deleteUserDefinedFunctionId,
+      onCommandClick: () => {
+        const selectedUDF: ViewModels.UserDefinedFunction = container.findSelectedUDF();
+        selectedUDF && selectedUDF.delete(selectedUDF, null);
+      },
+      commandButtonLabel: "Delete User Defined Function",
+      hasPopup: false,
+      disabled: ko.computed<boolean>(() => container.isDatabaseNodeOrNoneSelected()),
+      visible: ko.computed<boolean>(
+        () => !container.isDatabaseNodeOrNoneSelected() && !container.isPreferredApiCassandra()
+      )
+    };
+
+    return [deleteUserDefinedFunctionButtonOptions];
+  }
+}

src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as Constants from "../../../Common/Constants";
+
+interface AccessibleElementProps extends React.HtmlHTMLAttributes<HTMLElement> {
+  as: string; // tag element name
+  onActivated: (event: React.SyntheticEvent<HTMLElement>) => void;
+  "aria-label": string;
+  tabIndex?: number;
+}
+
+/**
+ * Wrapper around span element to filter key press, automatically add onClick and require some a11y fields.
+ */
+export class AccessibleElement extends React.Component<AccessibleElementProps> {
+  private onKeyPress = (event: React.KeyboardEvent<HTMLSpanElement>): void => {
+    if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.props.onActivated(event);
+    }
+  };
+
+  public render(): JSX.Element {
+    const elementProps = { ...this.props };
+    delete elementProps.as;
+    delete elementProps.onActivated;
+
+    const tabIndex = this.props.tabIndex === undefined ? 0 : this.props.tabIndex;
+
+    return React.createElement(this.props.as, {
+      ...elementProps,
+      onKeyPress: this.onKeyPress,
+      onClick: this.props.onActivated,
+      tabIndex
+    });
+  }
+}

src/Explorer/Controls/Accordion/AccordionComponent.less

@@ -0,0 +1,35 @@
+@import "../../../../less/Common/Constants";
+
+.accordion {
+  overflow: hidden;
+  height: 100%;
+  .flex-display();
+  .flex-direction();
+
+  .accordionItemContainer {
+    overflow: hidden;
+    margin-bottom: @DefaultSpace;
+    .flex-display();
+    .flex-direction();
+
+    .accordionItemHeader {
+      padding: @SmallSpace @MediumSpace;
+      cursor: pointer;
+      background-color: @BaseMediumLow;
+      font-size: 12px;
+      font-weight: bold;
+    }
+
+    .accordionItemContent {
+      overflow: auto;
+    }
+
+    .expandCollapseIcon {
+      width: 10px;
+      height: 10px;
+      vertical-align: middle;
+      margin-bottom: 5px;
+      margin-right: @MediumSpace;
+    }
+  }
+}

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -0,0 +1,92 @@
+/**
+ * Accordion top class
+ */
+
+import * as React from "react";
+import * as Constants from "../../../Common/Constants";
+import AnimateHeight from "react-animate-height";
+
+import TriangleDownIcon from "../../../../images/Triangle-down.svg";
+import TriangleRightIcon from "../../../../images/Triangle-right.svg";
+
+export interface AccordionComponentProps {}
+
+export class AccordionComponent extends React.Component<AccordionComponentProps> {
+  public render(): JSX.Element {
+    return <div className="accordion">{this.props.children}</div>;
+  }
+}
+
+/**
+ * AccordionItem is the section inside the accordion
+ */
+
+export interface AccordionItemComponentProps {
+  title: string;
+  isExpanded?: boolean;
+}
+
+interface AccordionItemComponentState {
+  isExpanded: boolean;
+}
+
+export class AccordionItemComponent extends React.Component<AccordionItemComponentProps, AccordionItemComponentState> {
+  private static readonly durationMS = 500;
+  private isExpanded: boolean;
+
+  constructor(props: AccordionItemComponentProps) {
+    super(props);
+    this.isExpanded = props.isExpanded;
+    this.state = {
+      isExpanded: true
+    };
+  }
+
+  componentDidUpdate() {
+    if (this.props.isExpanded !== this.isExpanded) {
+      this.isExpanded = this.props.isExpanded;
+      this.setState({
+        isExpanded: this.props.isExpanded
+      });
+    }
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="accordionItemContainer">
+        <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
+          {this.renderCollapseExpandIcon()}
+          {this.props.title}
+        </div>
+        <div className="accordionItemContent">
+          <AnimateHeight duration={AccordionItemComponent.durationMS} height={this.state.isExpanded ? "auto" : 0}>
+            {this.props.children}
+          </AnimateHeight>
+        </div>
+      </div>
+    );
+  }
+
+  private renderCollapseExpandIcon(): JSX.Element {
+    return (
+      <img
+        className="expandCollapseIcon"
+        src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
+        alt="Hide"
+        tabIndex={0}
+        role="button"
+      />
+    );
+  }
+
+  private onHeaderClick = (event: React.MouseEvent<HTMLDivElement>): void => {
+    this.setState({ isExpanded: !this.state.isExpanded });
+  };
+
+  private onHeaderKeyPress = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
+      this.setState({ isExpanded: !this.state.isExpanded });
+      event.stopPropagation();
+    }
+  };
+}

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { shallow, mount } from "enzyme";
+import { AccountSwitchComponent, AccountSwitchComponentProps } from "./AccountSwitchComponent";
+import { AuthType } from "../../../AuthType";
+import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
+import { AccountKind } from "../../../Common/Constants";
+
+const createBlankProps = (): AccountSwitchComponentProps => {
+  return {
+    authType: null,
+    displayText: "",
+    accounts: [],
+    selectedAccountName: null,
+    isLoadingAccounts: false,
+    onAccountChange: jest.fn(),
+    subscriptions: [],
+    selectedSubscriptionId: null,
+    isLoadingSubscriptions: false,
+    onSubscriptionChange: jest.fn()
+  };
+};
+
+const createBlankAccount = (): DatabaseAccount => {
+  return {
+    id: "",
+    kind: AccountKind.Default,
+    name: "",
+    properties: null,
+    location: "",
+    tags: null,
+    type: ""
+  };
+};
+
+const createBlankSubscription = (): Subscription => {
+  return {
+    subscriptionId: "",
+    displayName: "",
+    authorizationSource: "",
+    state: "",
+    subscriptionPolicies: null,
+    tenantId: "",
+    uniqueDisplayName: ""
+  };
+};
+
+const createFullProps = (): AccountSwitchComponentProps => {
+  const props = createBlankProps();
+  props.authType = AuthType.AAD;
+  const account1 = createBlankAccount();
+  account1.name = "account1";
+  const account2 = createBlankAccount();
+  account2.name = "account2";
+  const account3 = createBlankAccount();
+  account3.name = "superlongaccountnamestringtest";
+  props.accounts = [account1, account2, account3];
+  props.selectedAccountName = "account2";
+
+  const sub1 = createBlankSubscription();
+  sub1.displayName = "sub1";
+  sub1.subscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
+  const sub2 = createBlankSubscription();
+  sub2.displayName = "subsubsubsubsubsubsub2";
+  sub2.subscriptionId = "b20b3e93-0185-4326-8a9c-d44bac276b6b";
+  props.subscriptions = [sub1, sub2];
+  props.selectedSubscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
+
+  return props;
+};
+
+describe("test render", () => {
+  it("renders no auth type -> handle error in code", () => {
+    const props = createBlankProps();
+
+    const wrapper = shallow(<AccountSwitchComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  // Encrypted Token
+  it("renders auth security token, with selected account name", () => {
+    const props = createBlankProps();
+    props.authType = AuthType.EncryptedToken;
+    props.selectedAccountName = "testaccount";
+
+    const wrapper = shallow(<AccountSwitchComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  // AAD
+  it("renders auth aad, with all information", () => {
+    const props = createFullProps();
+    const wrapper = shallow(<AccountSwitchComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders auth aad all dropdown menus", () => {
+    const props = createFullProps();
+    const wrapper = mount(<AccountSwitchComponent {...props} />);
+
+    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
+    wrapper.find("button.accountSwitchButton").simulate("click");
+    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(true);
+
+    expect(wrapper.exists("div.accountSwitchSubscriptionDropdown")).toBe(true);
+    wrapper.find("DropdownBase.accountSwitchSubscriptionDropdown").simulate("click");
+    // Click will dismiss the first contextual menu in enzyme. Need to dig deeper to achieve below test
+
+    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(true);
+    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(2);
+    // wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
+    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(false);
+
+    // expect(wrapper.exists("div.accountSwitchAccountDropdown")).toBe(true);
+    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
+    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(true);
+    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(3);
+    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
+    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(false);
+
+    // wrapper.find("button.accountSwitchButton").simulate("click");
+    // expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
+
+    wrapper.unmount();
+  });
+});
+
+// describe("test function", () => {
+//   it("switch subscription function", () => {
+//     const props = createFullProps();
+//     const wrapper = mount(<AccountSwitchComponent {...props} />);
+
+//     wrapper.find("button.accountSwitchButton").simulate("click");
+//     wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
+//     wrapper
+//       .find("button.ms-Dropdown-item")
+//       .at(1)
+//       .simulate("click");
+//     expect(props.onSubscriptionChange).toBeCalled();
+//     expect(props.onSubscriptionChange).toHaveBeenCalled();
+
+//     wrapper.unmount();
+//   });
+
+//   it("switch account", () => {
+//     const props = createFullProps();
+//     const wrapper = mount(<AccountSwitchComponent {...props} />);
+
+//     wrapper.find("button.accountSwitchButton").simulate("click");
+//     wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
+//     wrapper
+//       .find("button.ms-Dropdown-item")
+//       .at(0)
+//       .simulate("click");
+//     expect(props.onAccountChange).toBeCalled();
+//     expect(props.onAccountChange).toHaveBeenCalled();
+
+//     wrapper.unmount();
+//   });
+// });

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx

@@ -0,0 +1,177 @@
+import { AuthType } from "../../../AuthType";
+import { StyleConstants } from "../../../Common/Constants";
+import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
+
+import * as React from "react";
+import { DefaultButton, IButtonStyles, IButtonProps } from "office-ui-fabric-react/lib/Button";
+import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
+import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
+
+export interface AccountSwitchComponentProps {
+  authType: AuthType;
+  selectedAccountName: string;
+  accounts: DatabaseAccount[];
+  isLoadingAccounts: boolean;
+  onAccountChange: (newAccount: DatabaseAccount) => void;
+  selectedSubscriptionId: string;
+  subscriptions: Subscription[];
+  isLoadingSubscriptions: boolean;
+  onSubscriptionChange: (newSubscription: Subscription) => void;
+  displayText?: string;
+}
+
+export class AccountSwitchComponent extends React.Component<AccountSwitchComponentProps> {
+  public render(): JSX.Element {
+    return this.props.authType === AuthType.AAD ? this._renderSwitchDropDown() : this._renderAccountName();
+  }
+
+  private _renderSwitchDropDown(): JSX.Element {
+    const { displayText, selectedAccountName } = this.props;
+
+    const menuProps: IContextualMenuProps = {
+      directionalHintFixed: true,
+      className: "accountSwitchContextualMenu",
+      items: [
+        {
+          key: "switchSubscription",
+          onRender: this._renderSubscriptionDropdown.bind(this)
+        },
+        {
+          key: "switchAccount",
+          onRender: this._renderAccountDropDown.bind(this)
+        }
+      ]
+    };
+
+    const buttonStyles: IButtonStyles = {
+      root: {
+        fontSize: StyleConstants.DefaultFontSize,
+        height: 40,
+        padding: 0,
+        paddingLeft: 10,
+        marginRight: 5,
+        backgroundColor: StyleConstants.BaseDark,
+        color: StyleConstants.BaseLight
+      },
+      rootHovered: {
+        backgroundColor: StyleConstants.BaseHigh,
+        color: StyleConstants.BaseLight
+      },
+      rootFocused: {
+        backgroundColor: StyleConstants.BaseHigh,
+        color: StyleConstants.BaseLight
+      },
+      rootPressed: {
+        backgroundColor: StyleConstants.BaseHigh,
+        color: StyleConstants.BaseLight
+      },
+      rootExpanded: {
+        backgroundColor: StyleConstants.BaseHigh,
+        color: StyleConstants.BaseLight
+      },
+      textContainer: {
+        flexGrow: "initial"
+      }
+    };
+
+    const buttonProps: IButtonProps = {
+      text: displayText || selectedAccountName,
+      menuProps: menuProps,
+      styles: buttonStyles,
+      className: "accountSwitchButton",
+      id: "accountSwitchButton"
+    };
+
+    return <DefaultButton {...buttonProps} />;
+  }
+
+  private _renderSubscriptionDropdown(): JSX.Element {
+    const { subscriptions, selectedSubscriptionId, isLoadingSubscriptions } = this.props;
+    const options: IDropdownOption[] = subscriptions.map(sub => {
+      return {
+        key: sub.subscriptionId,
+        text: sub.displayName,
+        data: sub
+      };
+    });
+
+    const placeHolderText = isLoadingSubscriptions
+      ? "Loading subscriptions"
+      : !options || !options.length
+      ? "No subscriptions found in current directory"
+      : "Select subscription from list";
+
+    const dropdownProps: IDropdownProps = {
+      label: "Subscription",
+      className: "accountSwitchSubscriptionDropdown",
+      options: options,
+      onChange: this._onSubscriptionDropdownChange,
+      defaultSelectedKey: selectedSubscriptionId,
+      placeholder: placeHolderText,
+      styles: {
+        callout: "accountSwitchSubscriptionDropdownMenu"
+      }
+    };
+
+    return <Dropdown {...dropdownProps} />;
+  }
+
+  private _onSubscriptionDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
+    if (!option) {
+      return;
+    }
+
+    this.props.onSubscriptionChange(option.data);
+  };
+
+  private _renderAccountDropDown(): JSX.Element {
+    const { accounts, selectedAccountName, isLoadingAccounts } = this.props;
+    const options: IDropdownOption[] = accounts.map(account => {
+      return {
+        key: account.name,
+        text: account.name,
+        data: account
+      };
+    });
+    // Fabric UI will also try to select the first non-disabled option from dropdown.
+    // Add a option to prevent pop the message when user click on dropdown on first time.
+    options.unshift({
+      key: "select from list",
+      text: "Select Cosmos DB account from list",
+      data: undefined
+    });
+
+    const placeHolderText = isLoadingAccounts
+      ? "Loading Cosmos DB accounts"
+      : !options || !options.length
+      ? "No Cosmos DB accounts found"
+      : "Select Cosmos DB account from list";
+
+    const dropdownProps: IDropdownProps = {
+      label: "Cosmos DB Account Name",
+      className: "accountSwitchAccountDropdown",
+      options: options,
+      onChange: this._onAccountDropdownChange,
+      defaultSelectedKey: selectedAccountName,
+      placeholder: placeHolderText,
+      styles: {
+        callout: "accountSwitchAccountDropdownMenu"
+      }
+    };
+
+    return <Dropdown {...dropdownProps} />;
+  }
+
+  private _onAccountDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
+    if (!option) {
+      return;
+    }
+
+    this.props.onAccountChange(option.data);
+  };
+
+  private _renderAccountName(): JSX.Element {
+    const { displayText, selectedAccountName } = this.props;
+    return <span className="accountNameHeader">{displayText || selectedAccountName}</span>;
+  }
+}

src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx

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

src/Explorer/Controls/AccountSwitch/__snapshots__/AccountSwitchComponent.test.tsx.snap

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test render renders auth aad, with all information 1`] = `
+<CustomizedDefaultButton
+  className="accountSwitchButton"
+  id="accountSwitchButton"
+  menuProps={
+    Object {
+      "className": "accountSwitchContextualMenu",
+      "directionalHintFixed": true,
+      "items": Array [
+        Object {
+          "key": "switchSubscription",
+          "onRender": [Function],
+        },
+        Object {
+          "key": "switchAccount",
+          "onRender": [Function],
+        },
+      ],
+    }
+  }
+  styles={
+    Object {
+      "root": Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+        "fontSize": undefined,
+        "height": 40,
+        "marginRight": 5,
+        "padding": 0,
+        "paddingLeft": 10,
+      },
+      "rootExpanded": Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      },
+      "rootFocused": Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      },
+      "rootHovered": Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      },
+      "rootPressed": Object {
+        "backgroundColor": undefined,
+        "color": undefined,
+      },
+      "textContainer": Object {
+        "flexGrow": "initial",
+      },
+    }
+  }
+  text="account2"
+/>
+`;
+
+exports[`test render renders auth security token, with selected account name 1`] = `
+<span
+  className="accountNameHeader"
+>
+  testaccount
+</span>
+`;
+
+exports[`test render renders no auth type -> handle error in code 1`] = `
+<span
+  className="accountNameHeader"
+/>
+`;

src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import { ArcadiaWorkspace, SparkPool } from "../../../Contracts/DataModels";
+import { DefaultButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
+import {
+  IContextualMenuItem,
+  IContextualMenuProps,
+  ContextualMenuItemType
+} from "office-ui-fabric-react/lib/ContextualMenu";
+import { Logger } from "../../../Common/Logger";
+
+export interface ArcadiaMenuPickerProps {
+  selectText?: string;
+  disableSubmenu?: boolean;
+  selectedSparkPool: string;
+  workspaces: ArcadiaWorkspaceItem[];
+  onSparkPoolSelect: (
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+    item: IContextualMenuItem
+  ) => boolean | void;
+  onCreateNewWorkspaceClicked: () => boolean | void;
+  onCreateNewSparkPoolClicked: (workspaceResourceId: string) => boolean | void;
+}
+
+interface ArcadiaMenuPickerStates {
+  selectedSparkPool: string;
+}
+
+export interface ArcadiaWorkspaceItem extends ArcadiaWorkspace {
+  sparkPools: SparkPool[];
+}
+
+export class ArcadiaMenuPicker extends React.Component<ArcadiaMenuPickerProps, ArcadiaMenuPickerStates> {
+  constructor(props: ArcadiaMenuPickerProps) {
+    super(props);
+    this.state = {
+      selectedSparkPool: props.selectedSparkPool
+    };
+  }
+
+  private _onSparkPoolClicked = (
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+    item: IContextualMenuItem
+  ): boolean | void => {
+    try {
+      this.props.onSparkPoolSelect(e, item);
+      this.setState({
+        selectedSparkPool: item.text
+      });
+    } catch (error) {
+      Logger.logError(error, "ArcadiaMenuPicker/_onSparkPoolClicked");
+      throw error;
+    }
+  };
+
+  private _onCreateNewWorkspaceClicked = (
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+    item: IContextualMenuItem
+  ): boolean | void => {
+    this.props.onCreateNewWorkspaceClicked();
+  };
+
+  private _onCreateNewSparkPoolClicked = (
+    e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+    item: IContextualMenuItem
+  ): boolean | void => {
+    this.props.onCreateNewSparkPoolClicked(item.key);
+  };
+
+  public render() {
+    const { workspaces } = this.props;
+    let workspaceMenuItems: IContextualMenuItem[] = workspaces.map(workspace => {
+      let sparkPoolsMenuProps: IContextualMenuProps = {
+        items: workspace.sparkPools.map(
+          (sparkpool): IContextualMenuItem => ({
+            key: sparkpool.id,
+            text: sparkpool.name,
+            onClick: this._onSparkPoolClicked
+          })
+        )
+      };
+      if (!sparkPoolsMenuProps.items.length) {
+        sparkPoolsMenuProps.items.push({
+          key: workspace.id,
+          text: "Create new spark pool",
+          onClick: this._onCreateNewSparkPoolClicked
+        });
+      }
+
+      return {
+        key: workspace.id,
+        text: workspace.name,
+        subMenuProps: this.props.disableSubmenu ? undefined : sparkPoolsMenuProps
+      };
+    });
+
+    if (!workspaceMenuItems.length) {
+      workspaceMenuItems.push({
+        key: "create_workspace",
+        text: "Create new workspace",
+        onClick: this._onCreateNewWorkspaceClicked
+      });
+    }
+
+    const dropdownStyle: IButtonStyles = {
+      root: {
+        backgroundColor: "transparent",
+        margin: "auto 5px",
+        padding: "0",
+        border: "0"
+      },
+      rootHovered: {
+        backgroundColor: "transparent"
+      },
+      rootChecked: {
+        backgroundColor: "transparent"
+      },
+      rootFocused: {
+        backgroundColor: "transparent"
+      },
+      rootExpanded: {
+        backgroundColor: "transparent"
+      },
+      flexContainer: {
+        height: "30px",
+        border: "1px solid #a6a6a6",
+        padding: "0 8px"
+      },
+      label: {
+        fontWeight: "400",
+        fontSize: "12px"
+      }
+    };
+
+    return (
+      <DefaultButton
+        text={this.state.selectedSparkPool || this.props.selectText || "Select a Spark pool"}
+        persistMenu={true}
+        className="arcadia-menu-picker"
+        menuProps={{
+          items: workspaceMenuItems
+        }}
+        styles={dropdownStyle}
+      />
+    );
+  }
+}

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx

@@ -0,0 +1,93 @@
+/**
+ * Collapsible React component
+ * Note:
+ * If onCollapsedChanged() is triggered, parent container is responsible for:
+ * - updating isCollapsed property
+ * - calling render()
+ */
+
+import * as React from "react";
+import LeftArrowIcon from "../../../../images/imgarrowlefticon.svg";
+import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+
+export interface CollapsiblePanelProps {
+  collapsedTitle: string;
+  expandedTitle: string;
+  isCollapsed: boolean;
+  onCollapsedChanged: (newValue: boolean) => void;
+  collapseToLeft?: boolean;
+}
+
+export class CollapsiblePanel extends React.Component<CollapsiblePanelProps> {
+  public render(): JSX.Element {
+    return (
+      <div className={`collapsiblePanel ${this.props.isCollapsed ? "paneCollapsed" : ""}`}>
+        {!this.props.isCollapsed ? this.getExpandedFragment() : this.getCollapsedFragment()}
+      </div>
+    );
+  }
+
+  private toggleCollapse(): void {
+    this.props.onCollapsedChanged(!this.props.isCollapsed);
+  }
+
+  private getCollapsedFragment(): JSX.Element {
+    return (
+      <div className="collapsibleNav nav">
+        <ul className="nav">
+          <li className="collapsedBtn collapseExpandButton">
+            <AccessibleElement
+              className="collapsedIconContainer"
+              as="span"
+              onActivated={() => this.toggleCollapse()}
+              aria-label="Expand panel"
+            >
+              <img
+                className={`collapsedIcon ${!this.props.isCollapsed ? "expanded" : ""} ${
+                  this.props.collapseToLeft ? "iconMirror" : ""
+                }`}
+                src={LeftArrowIcon}
+                alt="Expand"
+              />
+            </AccessibleElement>
+            <AccessibleElement
+              className="rotatedInner"
+              as="span"
+              onActivated={() => this.toggleCollapse()}
+              aria-label="Expand panel"
+            >
+              <span>{this.props.collapsedTitle}</span>
+            </AccessibleElement>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
+  private getExpandedFragment(): JSX.Element {
+    return (
+      <React.Fragment>
+        <div className="panelHeader">
+          <AccessibleElement
+            as="span"
+            className={`collapsedIconContainer collapseExpandButton ${this.props.collapseToLeft ? "pull-right" : ""}`}
+            onActivated={() => this.toggleCollapse()}
+            aria-label="Collapse panel"
+          >
+            <img
+              className={`collapsedIcon imgVerticalAlignment ${!this.props.isCollapsed ? "expanded" : ""} ${
+                this.props.collapseToLeft ? "iconMirror" : ""
+              }`}
+              src={LeftArrowIcon}
+              alt="Collapse"
+            />
+          </AccessibleElement>
+          <span className={`expandedTitle ${!this.props.collapseToLeft ? "iconSpacer" : ""}`}>
+            {this.props.expandedTitle}
+          </span>
+        </div>
+        <div className="panelContent">{this.props.children}</div>
+      </React.Fragment>
+    );
+  }
+}

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less

@@ -0,0 +1,116 @@
+@import "../../../../less/Common/Constants";
+
+.collapsiblePanel {
+    width: 100%;
+    height: 100%;
+}
+
+.collapsiblePanel.paneCollapsed {
+    width: 39px !important;
+}
+
+.collapsiblePanel .collapsedIcon {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+}
+
+.collapsiblePanel .imgVerticalAlignment {
+    vertical-align: top;
+}
+
+.collapsiblePanel .collapsedIcon.iconMirror:not(.expanded) {
+    transform: rotate(-180deg);
+    -webkit-transform: rotate(-180deg);
+    -ms-transform: rotate(-180deg);
+}
+
+.collapsiblePanel .collapsedIcon.expanded:not(.iconMirror) {
+    transform: rotate(-180deg);
+    -webkit-transform: rotate(-180deg);
+    -ms-transform: rotate(-180deg);
+}
+
+.collapsiblePanel .panelHeader {
+    padding: 5px 0px 12px 0px;
+}
+
+.collapsiblePanel .panelHeader .collapsedIconContainer {
+    padding: 4px 0px 4px 6px;
+    margin-left: 0px;
+}
+
+.collapsiblePanel .panelHeader .expandedTitle {
+    color: #000;
+    font-weight: bold;
+}
+
+.collapsiblePanel .panelHeader .expandedTitle.iconSpacer {
+    padding-left: 0px;
+    margin-left: 3px;
+}
+
+.collapsiblePanel .panelContent {
+    margin-top: 10px;
+}
+
+.collapsiblePanel .collapsibleNav .rotatedInner {
+    color: black;
+    font-weight: 400;
+    font-size: 14px;
+    position: relative;
+    display: block;
+    cursor: pointer;
+    margin: 3px 10px;
+    transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    float: right;
+}
+
+.collapsiblePanel .collapsibleNav .collapsedBtn {
+    padding: 5px 5px 0px 0px;
+    cursor: pointer;
+    margin: 0px 0px;
+}
+
+.collapsiblePanel .panelHeader .collapseExpandButton:hover,
+.collapsiblePanel .collapsibleNav .collapseExpandButton:hover {
+    background: @BaseLow;
+}
+
+.collapsiblePanel .panelHeader .collapseExpandButton:active,
+.collapsiblePanel .collapsibleNav .collapseExpandButton:active {
+    background-color: @AccentMediumLow;
+}
+
+.collapsiblePanel .collapsibleNav ul.nav {
+    margin: 0 auto;
+    margin-top: 0px;
+    margin-left: 0px;
+}
+
+.collapsiblePanel .collapsibleNav ul.nav li {
+    float: right;
+    line-height: 25px;
+    height: auto;
+}
+
+.collapsiblePanel .collapsibleNav {
+    width: 100vh;
+    height: 45px;
+    background: white;
+    transform-origin: left top;
+    -webkit-transform-origin: left top;
+    -ms-transform-origin: left top;
+    transform: rotate(-90deg) translateX(-100%);
+    -webkit-transform: rotate(-90deg) translateX(-100%);
+    -ms-transform: rotate(-90deg) translateX(-100%);
+}
+
+.collapsiblePanel .collapsibleNav .collapsedIconContainer {
+    transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    float: right;
+}

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts

@@ -0,0 +1,56 @@
+import * as ko from "knockout";
+import template from "./collapsible-panel-component.html";
+
+/**
+ * Helper class for ko component registration
+ */
+export class CollapsiblePanelComponent {
+  constructor() {
+    return {
+      viewModel: CollapsiblePanelViewModel,
+      template
+    };
+  }
+}
+
+/**
+ * Parameters for this component
+ */
+interface CollapsiblePanelParams {
+  collapsedTitle: ko.Observable<string>;
+  expandedTitle: ko.Observable<string>;
+  isCollapsed?: ko.Observable<boolean>;
+  collapseToLeft?: boolean;
+}
+
+/**
+ * Collapsible panel:
+ *  Contains a header with [>] button to collapse and an title ("expandedTitle").
+ *  Collapsing the panel:
+ *   - shrinks width to narrow amount
+ *   - hides children
+ *   - shows [<]
+ *   - shows vertical title ("collapsedTitle")
+ *   - the default behavior is to collapse to the right (ie, place this component on the right or use "collapseToLeft" parameter)
+ *
+ * How to use in your markup:
+ * <collapsible-panel params="{ collapsedTitle:'Properties', expandedTitle:'Expanded properties' }">
+ *      <!-- add your markup here: the ko context is the same as outside of collapsible-panel (ie $data) -->
+ * </collapsible-panel>
+ *
+ * Use the optional "isCollapsed" parameter to programmatically collapse/expand the pane from outside the component.
+ * Use the optional "collapseToLeft" parameter to collapse to the left.
+ */
+class CollapsiblePanelViewModel {
+  private params: CollapsiblePanelParams;
+  private isCollapsed: ko.Observable<boolean>;
+
+  public constructor(params: CollapsiblePanelParams) {
+    this.params = params;
+    this.isCollapsed = params.isCollapsed || ko.observable(false);
+  }
+
+  private toggleCollapse(): void {
+    this.isCollapsed(!this.isCollapsed());
+  }
+}

src/Explorer/Controls/CollapsiblePanel/collapsible-panel-component.html

@@ -0,0 +1,44 @@
+<div class="collapsiblePanel" data-bind="css: { paneCollapsed:isCollapsed() }">
+  <div class="panelHeader" data-bind="visible: !isCollapsed()">
+    <span
+      class="collapsedIconContainer collapseExpandButton"
+      data-bind="click:toggleCollapse, css: { 'pull-right':params.collapseToLeft }"
+    >
+      <img
+        class="collapsedIcon imgVerticalAlignment"
+        src="/imgarrowlefticon.svg"
+        alt="Collapse"
+        data-bind="css: { expanded:!isCollapsed(), iconMirror:params.collapseToLeft }"
+      />
+    </span>
+    <span
+      class="expandedTitle"
+      data-bind="text: params.expandedTitle, css:{ iconSpacer:!params.collapseToLeft }"
+    ></span>
+  </div>
+
+  <div class="collapsibleNav nav" data-bind="visible:isCollapsed">
+    <ul class="nav">
+      <li class="collapsedBtn collapseExpandButton">
+        <span class="collapsedIconContainer" data-bind="click: toggleCollapse">
+          <img
+            class="collapsedIcon"
+            src="/imgarrowlefticon.svg"
+            data-bind="css: { expanded:!isCollapsed(), iconMirror:params.collapseToLeft }"
+            alt="Expand"
+          />
+        </span>
+        <span class="rotatedInner" data-bind="click: toggleCollapse">
+          <span data-bind="text: params.collapsedTitle"></span>
+        </span>
+      </li>
+    </ul>
+  </div>
+
+  <div class="panelContent" data-bind="visible:!isCollapsed()">
+    <!-- ko with:$parent -->
+    <!-- ko template: { nodes: $componentTemplateNodes } -->
+    <!-- /ko -->
+    <!-- /ko -->
+  </div>
+</div>

src/Explorer/Controls/CommandButton/CommandButton.less

@@ -0,0 +1,200 @@
+@import "../../../../less/Common/Constants";
+
+@ButtonIconSize: 18px;
+
+.commandBar {
+    padding-left: @DefaultSpace;
+    border-bottom: @ButtonBorderWidth solid @BaseMedium;
+    display: flex;
+    overflow: hidden;
+    height: @topcommandbarheight;
+
+    .staticCommands {
+        list-style: none;
+        margin: 0px;
+        padding: 0px;
+        display: flex;
+        flex: 0 0 auto;
+    }
+
+    .overflowCommands {
+        display:flex;
+        flex: 1 0 auto;
+
+        .visibleCommands {
+            display: inline-flex;
+            list-style: none;
+            margin: 0px;
+            padding: 0px;
+        }
+
+        .partialSplitterContainer {
+            padding: @SmallSpace @DefaultSpace @SmallSpace @SmallSpace;
+            .flex-display();
+        }
+    }
+
+    .commandExpand {
+        border: none;
+        padding: 0px;
+        direction: rtl;
+
+        &:hover {
+            .hover();
+            cursor: pointer;
+            & > .commandDropdownContainer {
+                display: block !important; // TODO: Remove after reusing KO mouseover and mouseout event handlers
+            }
+        }
+
+        &:focus {
+            .focus();
+        }
+
+        .commandDropdownLauncher {
+            direction: ltr;
+            padding-top: @SmallSpace;
+
+            .commandIcon {
+                vertical-align: text-top;
+            }
+
+            .commandBarEllipses {
+                font-weight: bold;
+                font-size: 20px;
+            }
+        }
+    }
+
+    .hiddenCommandsContainer > .commandDropdownLauncher {
+        padding: 0px @DefaultSpace;
+    }
+
+    .commandDropdownContainer {
+        display: none;
+        z-index: 1000;
+        direction: ltr;
+        position: absolute;
+        width: fit-content;
+        padding: 0px;
+        background-color: @BaseLight;
+        box-shadow: 1px 2px 6px @BaseMediumHigh, -2px 2px 6px @BaseMediumHigh;
+
+        .commandDropdown {
+            display: flex;
+            flex-direction: column;
+            padding: 0px;
+            margin: 0px;
+        }
+    }
+
+    .feedbackButton {
+        margin-right: @LargeSpace;
+        white-space: nowrap;
+    }
+}
+
+command-button,
+.commandButtonReact {
+    display: inline-flex;
+    .commandButtonComponent {
+        width: 100%;
+        color: @BaseHigh;
+        background-color: transparent;
+        text-decoration: none;
+        border: @ButtonBorderWidth solid transparent;
+        .flex-display();
+
+        &:hover:not(.commandDisabled) {
+            cursor: pointer;
+            .hover();
+        }
+
+        &:active:not(.commandDisabled) {
+            border: @ButtonBorderWidth dashed @AccentMedium;
+            .active();
+        }
+
+        &:focus:not(.commandDisabled) {
+            border: @ButtonBorderWidth dashed @AccentMedium;
+        }
+
+        .commandContent {
+            padding: @DefaultSpace @DefaultSpace @DefaultSpace;
+            flex: 0 0 auto;
+
+            .commandIcon {
+                margin: 0 @SmallSpace 0 0;
+                vertical-align: text-top;
+                width: @ButtonIconSize;
+                height: @ButtonIconSize;
+            }
+
+            .commandLabel {
+                padding: 0px;
+            }
+        }
+
+        .commandContent .hasHiddenItems {
+            padding-right: @SmallSpace;
+        }
+    }
+
+    .commandButtonComponent.commandDisabled {
+        color: @BaseMediumHigh;
+        opacity: 0.5;
+    }
+
+    .commandExpand {
+        padding-top: @SmallSpace;
+        padding-bottom: @SmallSpace;
+        &:hover {
+            .hover();
+            & > .commandDropdownContainer {
+                display: block !important; // TODO: Remove after reusing KO mouseover and mouseout event handlers
+            }
+        }
+
+        &:focus {
+            .focus();
+        }
+
+        .commandDropdownLauncher {
+            cursor: pointer;
+            display: inline-flex;
+
+            .commandButtonComponent {
+                padding: 0px;
+            }
+        }
+
+        .expandDropdown {
+            padding: @SmallSpace;
+
+            img {
+                vertical-align: top;
+            }
+        }
+
+        .partialSplitter {
+            margin: @SmallSpace 0px 6px;
+        }
+    }
+
+    .commandButtonComponent[tabindex]:focus {
+        outline: none;
+    }
+
+    .selectedButton {
+        background-color: @AccentLow;
+        outline: none
+    }
+}
+
+.partialSplitter {
+    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
+}
+
+.commandDropdown .commandButtonComponent {
+    padding-left: 0px;
+}

src/Explorer/Controls/CommandButton/CommandButton.test.ts

@@ -0,0 +1,139 @@
+import * as ko from "knockout";
+import { CommandButtonComponent, CommandButtonOptions } from "./CommandButton";
+
+const mockLabel = "Some Label";
+const id = "Some id";
+
+function buildComponent(buttonOptions: any) {
+  document.body.innerHTML = CommandButtonComponent.template as any;
+  const vm = new CommandButtonComponent.viewModel(buttonOptions);
+  ko.applyBindings(vm);
+}
+
+describe("Command Button Component", () => {
+  function buildButtonOptions(
+    onClick: () => void,
+    id?: string,
+    label?: string,
+    disabled?: ko.Observable<boolean>,
+    visible?: ko.Observable<boolean>,
+    tooltipText?: string
+  ): { buttonProps: CommandButtonOptions } {
+    return {
+      buttonProps: {
+        iconSrc: "images/AddCollection.svg",
+        id: id,
+        commandButtonLabel: label || mockLabel,
+        disabled: disabled,
+        visible: visible,
+        tooltipText: tooltipText,
+        hasPopup: false,
+        onCommandClick: onClick
+      }
+    };
+  }
+
+  function buildSplitterButtonOptions(
+    onClick: () => void,
+    id?: string,
+    label?: string,
+    disabled?: ko.Observable<boolean>,
+    visible?: ko.Observable<boolean>,
+    tooltipText?: string
+  ): { buttonProps: CommandButtonOptions } {
+    const child: CommandButtonOptions = {
+      iconSrc: "images/settings_15x15.svg",
+      id: id,
+      commandButtonLabel: label || mockLabel,
+      disabled: disabled,
+      visible: visible,
+      tooltipText: tooltipText,
+      hasPopup: false,
+      onCommandClick: onClick
+    };
+
+    return {
+      buttonProps: {
+        iconSrc: "images/AddCollection.svg",
+        id: id,
+        commandButtonLabel: label || mockLabel,
+        disabled: disabled,
+        visible: visible,
+        tooltipText: tooltipText,
+        hasPopup: false,
+        onCommandClick: onClick,
+        children: [child]
+      }
+    };
+  }
+
+  afterEach(() => {
+    ko.cleanNode(document);
+    document.body.innerHTML = "";
+  });
+
+  describe("Rendering", () => {
+    it("should display button label", () => {
+      const buttonOptions = buildButtonOptions(() => {
+        /** do nothing **/
+      }, mockLabel);
+      buildComponent(buttonOptions);
+      expect(document.getElementsByClassName("commandButtonComponent").item(0).textContent).toContain(mockLabel);
+    });
+
+    it("should display button icon", () => {
+      const buttonOptions = buildButtonOptions(() => {
+        /** do nothing **/
+      });
+      buildComponent(buttonOptions);
+      expect(
+        document
+          .getElementsByTagName("img")
+          .item(0)
+          .getAttribute("src")
+      ).toBeDefined();
+    });
+  });
+
+  describe("Behavior", () => {
+    let clickSpy: jasmine.Spy;
+
+    beforeEach(() => {
+      clickSpy = jasmine.createSpy("Command button click spy");
+    });
+
+    it("should trigger the click handler when the command button is clicked", () => {
+      const buttonOptions = buildButtonOptions(() => clickSpy());
+      buildComponent(buttonOptions);
+      document
+        .getElementsByClassName("commandButtonComponent")
+        .item(0)
+        .dispatchEvent(new Event("click"));
+      expect(clickSpy).toHaveBeenCalled();
+    });
+
+    it("should not trigger the click handler when command button is disabled", () => {
+      const buttonOptions = buildButtonOptions(() => clickSpy(), id, mockLabel, ko.observable(true));
+      buildComponent(buttonOptions);
+      document
+        .getElementsByClassName("commandButtonComponent")
+        .item(0)
+        .dispatchEvent(new Event("click"));
+      expect(clickSpy).not.toHaveBeenCalled();
+    });
+
+    it("should not have a dropdown if it has no child", () => {
+      const buttonOptions = buildButtonOptions(() => clickSpy(), id, mockLabel, ko.observable(true));
+      buildComponent(buttonOptions);
+      const dropdownSize = document.getElementsByClassName("commandExpand").length;
+      expect(dropdownSize).toBe(0);
+    });
+
+    it("should have a dropdown if it has a child", () => {
+      const buttonOptions = buildSplitterButtonOptions(() => clickSpy(), id, mockLabel, ko.observable(true));
+      buildComponent(buttonOptions);
+      const dropdownSize = document.getElementsByClassName("commandExpand").length;
+      expect(dropdownSize).toBe(1);
+    });
+  });
+});

src/Explorer/Controls/CommandButton/CommandButton.ts

@@ -0,0 +1,191 @@
+/**
+ * How to use this component:
+ *
+ * In your html markup, use:
+ * <command-button params="{
+ *                             iconSrc: '/icon/example/src/',
+ *                             onCommandClick: () => { doSomething },
+ *                             commandButtonLabel: 'Some Label'
+ *                             disabled: true/false
+ *                         }">
+ * </command-button>
+ *
+ */
+
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+import { KeyCodes } from "../../../Common/Constants";
+
+import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import template from "./command-button.html";
+
+/**
+ * Options for this component
+ */
+export interface CommandButtonOptions {
+  /**
+   * image source for the button icon
+   */
+  iconSrc: string;
+
+  /**
+   * Id for the button icon
+   */
+  id: string;
+
+  /**
+   * Click handler for command button click
+   */
+  onCommandClick: () => void;
+
+  /**
+   * Label for the button
+   */
+  commandButtonLabel: string | ko.Observable<string>;
+
+  /**
+   * True if this button opens a tab or pane, false otherwise.
+   */
+  hasPopup: boolean;
+
+  /**
+   * Enabled/disabled state of command button
+   */
+  disabled?: ko.Subscribable<boolean>;
+
+  /**
+   * Visibility/Invisibility of the button
+   */
+  visible?: ko.Subscribable<boolean>;
+
+  /**
+   * Whether or not the button should have the 'selectedButton' styling
+   */
+  isSelected?: ko.Observable<boolean>;
+
+  /**
+   * Text to displayed in the tooltip on hover
+   */
+  tooltipText?: string | ko.Observable<string>;
+
+  /**
+   * Callback triggered when the template is bound to the component
+   */
+  onTemplateReady?: () => void;
+
+  /**
+   * tabindex for the command button
+   */
+  tabIndex?: ko.Observable<number>;
+
+  /**
+   * Childrens command buttons to hide in the dropdown
+   */
+  children?: CommandButtonOptions[];
+}
+
+export class CommandButtonViewModel extends WaitsForTemplateViewModel implements ViewModels.CommandButton {
+  public commandClickCallback: () => void;
+  public commandButtonId: string;
+  public disabled: ko.Subscribable<boolean>;
+  public visible: ko.Subscribable<boolean>;
+  public isSelected: ko.Observable<boolean>;
+  public iconSrc: string;
+  public commandButtonLabel: ko.Observable<string>;
+  public tooltipText: ko.Observable<string>;
+  public tabIndex: ko.Observable<number>;
+  public isTemplateReady: ko.Observable<boolean>;
+  public hasPopup: boolean;
+  public children: ko.ObservableArray<CommandButtonOptions>;
+
+  public constructor(options: { buttonProps: CommandButtonOptions }) {
+    super();
+    const props = options.buttonProps;
+    const commandButtonLabel = props.commandButtonLabel;
+    const tooltipText = props.tooltipText;
+    this.commandButtonLabel =
+      typeof commandButtonLabel === "string" ? ko.observable<string>(commandButtonLabel) : commandButtonLabel;
+    this.commandButtonId = props.id;
+    this.disabled = props.disabled || ko.observable(false);
+    this.visible = props.visible || ko.observable(true);
+    this.isSelected = props.isSelected || ko.observable(false);
+    this.iconSrc = props.iconSrc;
+    this.tabIndex = props.tabIndex || ko.observable(0);
+    this.hasPopup = props.hasPopup;
+    this.children = ko.observableArray(props.children);
+
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady && props.onTemplateReady) {
+        props.onTemplateReady();
+      }
+    });
+
+    if (tooltipText && typeof tooltipText === "string") {
+      this.tooltipText = ko.observable<string>(tooltipText);
+    } else if (tooltipText && typeof tooltipText === "function") {
+      this.tooltipText = tooltipText;
+    } else {
+      this.tooltipText = this.commandButtonLabel;
+    }
+
+    this.commandClickCallback = () => {
+      if (this.disabled()) {
+        return;
+      }
+
+      const el = document.querySelector(".commandDropdownContainer") as HTMLElement;
+      if (el) {
+        el.style.display = "none";
+      }
+      props.onCommandClick();
+      TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
+        commandButtonClicked: this.commandButtonLabel
+      });
+    };
+  }
+
+  public onKeyPress(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === KeyCodes.Space || event.keyCode === KeyCodes.Enter) {
+      this.commandClickCallback && this.commandClickCallback();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  public onLauncherKeyDown(source: any, event: KeyboardEvent): boolean {
+    // TODO: Convert JQuery code into Knockout
+    if (event.keyCode === KeyCodes.DownArrow) {
+      $(event.target)
+        .parent()
+        .siblings()
+        .children(".commandExpand")
+        .children(".commandDropdownContainer")
+        .hide();
+      $(event.target)
+        .children(".commandDropdownContainer")
+        .show()
+        .focus();
+      event.stopPropagation();
+      return false;
+    }
+    if (event.keyCode === KeyCodes.UpArrow) {
+      $(event.target)
+        .children(".commandDropdownContainer")
+        .hide();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+}
+
+/**
+ * Helper class for ko component registration
+ */
+export const CommandButtonComponent = {
+  viewModel: CommandButtonViewModel,
+  template
+};

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -0,0 +1,280 @@
+import { StringUtils } from "../../../Utils/StringUtils";
+import { KeyCodes } from "../../../Common/Constants";
+import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
+
+/**
+ * React component for Command button component.
+ */
+
+import * as React from "react";
+import { ArcadiaMenuPickerProps } from "../Arcadia/ArcadiaMenuPicker";
+
+/**
+ * Options for this component
+ */
+export interface CommandButtonComponentProps {
+  /**
+   * image source for the button icon
+   */
+  iconSrc: string;
+
+  /**
+   * image alt for accessibility
+   */
+  iconAlt: string;
+
+  /**
+   * Click handler for command button click
+   */
+  onCommandClick: (e: React.SyntheticEvent) => void;
+
+  /**
+   * Label for the button
+   */
+  commandButtonLabel: string;
+
+  /**
+   * True if this button opens a tab or pane, false otherwise.
+   */
+  hasPopup: boolean;
+
+  /**
+   * Enabled/disabled state of command button
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether or not the button should have the 'selectedButton' styling
+   */
+  isSelected?: boolean;
+
+  /**
+   * Text to displayed in the tooltip on hover
+   */
+  tooltipText?: string;
+
+  /**
+   * tabindex for the command button
+   */
+  tabIndex?: number;
+
+  /**
+   * Childrens command buttons to hide in the dropdown
+   */
+  children?: CommandButtonComponentProps[];
+
+  /**
+   * Optional id
+   */
+  id?: string;
+
+  /**
+   * Optional class name
+   */
+  className?: string;
+
+  /**
+   * If true, display as dropdown
+   */
+  isDropdown?: boolean;
+
+  /**
+   * Placeholder if dropdown
+   */
+  dropdownPlaceholder?: string;
+
+  /**
+   * Dropdown selection
+   */
+  dropdownSelectedKey?: string;
+
+  /**
+   * This is the key of the dropdown item
+   * The text is commandLabel
+   */
+  dropdownItemKey?: string;
+
+  /**
+   * Possible width
+   */
+  dropdownWidth?: number;
+
+  /**
+   * Vertical bar to divide buttons
+   */
+  isDivider?: boolean;
+  /**
+   * Aria-label for the button
+   */
+  ariaLabel: string;
+  //TODO: generalize customized command bar
+  /**
+   * If set to true, will render arcadia picker
+   */
+  isArcadiaPicker?: boolean;
+  /**
+   * props to render arcadia picker
+   */
+  arcadiaProps?: ArcadiaMenuPickerProps;
+}
+
+export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {
+  private dropdownElt: HTMLElement;
+  private expandButtonElt: HTMLElement;
+
+  public componentDidUpdate(): void {
+    if (!this.dropdownElt || !this.expandButtonElt) {
+      return;
+    }
+
+    const dropdownElt = $(this.dropdownElt).offset({ left: $(this.expandButtonElt).offset().left });
+  }
+
+  private onKeyPress(event: React.KeyboardEvent): boolean {
+    if (event.keyCode === KeyCodes.Space || event.keyCode === KeyCodes.Enter) {
+      this.commandClickCallback && this.commandClickCallback(event);
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  private onLauncherKeyDown(event: React.KeyboardEvent<HTMLDivElement>): boolean {
+    if (event.keyCode === KeyCodes.DownArrow) {
+      $(this.dropdownElt).hide();
+      $(this.dropdownElt)
+        .show()
+        .focus();
+      event.stopPropagation();
+      return false;
+    }
+    if (event.keyCode === KeyCodes.UpArrow) {
+      $(this.dropdownElt).hide();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  private getCommandButtonId(): string {
+    if (this.props.id) {
+      return this.props.id;
+    } else {
+      return `commandButton-${StringUtils.stripSpacesFromString(this.props.commandButtonLabel)}`;
+    }
+  }
+
+  public static renderButton(options: CommandButtonComponentProps, key?: string): JSX.Element {
+    return <CommandButtonComponent key={key} {...options} />;
+  }
+
+  private commandClickCallback(e: React.SyntheticEvent): void {
+    if (this.props.disabled) {
+      return;
+    }
+
+    // TODO Query component's parent, not document
+    const el = document.querySelector(".commandDropdownContainer") as HTMLElement;
+    if (el) {
+      el.style.display = "none";
+    }
+    this.props.onCommandClick(e);
+    TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
+      commandButtonClicked: this.props.commandButtonLabel
+    });
+  }
+
+  private renderChildren(): JSX.Element {
+    if (!this.props.children || this.props.children.length < 1) {
+      return <React.Fragment />;
+    }
+
+    return (
+      <div
+        className="commandExpand"
+        tabIndex={0}
+        ref={(ref: HTMLElement) => {
+          this.expandButtonElt = ref;
+        }}
+        onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => this.onLauncherKeyDown(e)}
+      >
+        <div className="commandDropdownLauncher">
+          <span className="partialSplitter" />
+          <span className="expandDropdown">
+            <img src={CollapseChevronDownIcon} />
+          </span>
+        </div>
+        <div
+          className="commandDropdownContainer"
+          ref={(ref: HTMLElement) => {
+            this.dropdownElt = ref;
+          }}
+        >
+          <div className="commandDropdown">
+            {this.props.children.map(
+              (c: CommandButtonComponentProps, index: number): JSX.Element => {
+                return CommandButtonComponent.renderButton(c, `${index}`);
+              }
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  public static renderLabel(
+    props: CommandButtonComponentProps,
+    key?: string,
+    refct?: (input: HTMLElement) => void
+  ): JSX.Element {
+    if (!props.commandButtonLabel) {
+      return <React.Fragment />;
+    }
+
+    return (
+      <span className="commandLabel" key={key} ref={refct}>
+        {props.commandButtonLabel}
+      </span>
+    );
+  }
+
+  public render(): JSX.Element {
+    let mainClassName = "commandButtonComponent";
+    if (this.props.disabled) {
+      mainClassName += " commandDisabled";
+    }
+    if (this.props.isSelected) {
+      mainClassName += " selectedButton";
+    }
+
+    let contentClassName = "commandContent";
+    if (this.props.children && this.props.children.length > 0) {
+      contentClassName += " hasHiddenItems";
+    }
+
+    return (
+      <div className="commandButtonReact">
+        <span
+          className={mainClassName}
+          role="menuitem"
+          tabIndex={this.props.tabIndex}
+          onKeyPress={(e: React.KeyboardEvent<HTMLSpanElement>) => this.onKeyPress(e)}
+          title={this.props.tooltipText}
+          id={this.getCommandButtonId()}
+          aria-disabled={this.props.disabled}
+          aria-haspopup={this.props.hasPopup}
+          aria-label={this.props.ariaLabel}
+          onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.commandClickCallback(e)}
+        >
+          <div className={contentClassName}>
+            <img className="commandIcon" src={this.props.iconSrc} alt={this.props.iconAlt} />
+            {CommandButtonComponent.renderLabel(this.props)}
+          </div>
+        </span>
+        {this.props.children && this.renderChildren()}
+      </div>
+    );
+  }
+}

src/Explorer/Controls/CommandButton/command-button.html

@@ -0,0 +1,40 @@
+<span
+  class="commandButtonComponent"
+  role="menuitem"
+  tabindex="0"
+  data-bind="setTemplateReady: true,
+    css: {
+        commandDisabled: disabled,
+        selectedButton: isSelected
+    },
+    event: {
+        keypress: onKeyPress
+    },
+    attr: {
+        title: tooltipText,
+        id: commandButtonId,
+        tabindex: tabIndex ,
+        'aria-disabled': disabled,
+        'aria-haspopup': hasPopup
+    },
+    click: commandClickCallback,
+    visible: visible"
+>
+  <div class="commandContent" data-bind="css: { hasHiddenItems: children().length > 0 }">
+    <img class="commandIcon" data-bind="attr: {src: iconSrc, alt: commandButtonLabel}" />
+    <span class="commandLabel" data-bind="text: commandButtonLabel"></span>
+  </div>
+</span>
+<!-- ko if: children().length > 0 -->
+<div class="commandExpand" tabindex="0" data-bind="visible: visible, event: { keydown: onLauncherKeyDown }">
+  <div class="commandDropdownLauncher">
+    <span class="partialSplitter"></span>
+    <span class="expandDropdown"> <img src="/QueryBuilder/CollapseChevronDown_16x.png" /> </span>
+  </div>
+  <div class="commandDropdownContainer">
+    <div class="commandDropdown" data-bind="foreach: children">
+      <command-button params="{buttonProps: $data}"></command-button>
+    </div>
+  </div>
+</div>
+<!-- /ko -->

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Dialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
+import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
+import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+import { Link } from "office-ui-fabric-react/lib/Link";
+
+export interface TextFieldProps extends ITextFieldProps {
+  label: string;
+  multiline: boolean;
+  autoAdjustHeight: boolean;
+  rows: number;
+  onChange: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
+  defaultValue?: string;
+}
+
+export interface LinkProps {
+  linkText: string;
+  linkUrl: string;
+}
+
+export interface DialogProps {
+  title: string;
+  subText: string;
+  isModal: boolean;
+  visible: boolean;
+  textFieldProps?: TextFieldProps;
+  linkProps?: LinkProps;
+  primaryButtonText: string;
+  secondaryButtonText: string;
+  onPrimaryButtonClick: () => void;
+  onSecondaryButtonClick: () => void;
+  primaryButtonDisabled?: boolean;
+  type?: DialogType;
+}
+
+const DIALOG_MIN_WIDTH = "400px";
+const DIALOG_MAX_WIDTH = "600px";
+const DIALOG_TITLE_FONT_SIZE = "17px";
+const DIALOG_TITLE_FONT_WEIGHT = 400;
+const DIALOG_SUBTEXT_FONT_SIZE = "15px";
+
+export class DialogComponent extends React.Component<DialogProps, {}> {
+  constructor(props: DialogProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const dialogProps: IDialogProps = {
+      hidden: !this.props.visible,
+      dialogContentProps: {
+        type: this.props.type || DialogType.normal,
+        title: this.props.title,
+        subText: this.props.subText,
+        styles: {
+          title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
+          subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE }
+        }
+      },
+      modalProps: { isBlocking: this.props.isModal },
+      minWidth: DIALOG_MIN_WIDTH,
+      maxWidth: DIALOG_MAX_WIDTH
+    };
+    const textFieldProps: ITextFieldProps = this.props.textFieldProps;
+    const linkProps: LinkProps = this.props.linkProps;
+    const primaryButtonProps: IButtonProps = {
+      text: this.props.primaryButtonText,
+      disabled: this.props.primaryButtonDisabled || false,
+      onClick: this.props.onPrimaryButtonClick
+    };
+    const secondaryButtonProps: IButtonProps =
+      this.props.secondaryButtonText && this.props.onSecondaryButtonClick
+        ? {
+            text: this.props.secondaryButtonText,
+            onClick: this.props.onSecondaryButtonClick
+          }
+        : undefined;
+
+    return (
+      <Dialog {...dialogProps}>
+        {textFieldProps && <TextField {...textFieldProps} />}
+        {linkProps && (
+          <Link href={linkProps.linkUrl} target="_blank">
+            {linkProps.linkText}
+          </Link>
+        )}
+        <DialogFooter>
+          <PrimaryButton {...primaryButtonProps} />
+          {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
+        </DialogFooter>
+      </Dialog>
+    );
+  }
+}

src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx

@@ -0,0 +1,16 @@
+/**
+ * This adapter is responsible to render the Dialog React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as React from "react";
+import { DialogComponent, DialogProps } from "./DialogComponent";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+
+export class DialogComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<DialogProps>;
+
+  public renderComponent(): JSX.Element {
+    return <DialogComponent {...this.parameters()} />;
+  }
+}

src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts

@@ -0,0 +1,160 @@
+import * as ViewModels from "../../../Contracts/ViewModels";
+import template from "./diff-editor-component.html";
+import * as monaco from "monaco-editor";
+
+/**
+ * Helper class for ko component registration
+ */
+export class DiffEditorComponent {
+  constructor() {
+    return {
+      viewModel: DiffEditorViewModel,
+      template
+    };
+  }
+}
+
+/**
+ * Parameters for this component
+ */
+export interface DiffEditorParams {
+  originalContent: ViewModels.Editable<string>; // Sets the editable content
+  modifiedContent: ViewModels.Editable<string>; // Sets the content to compare against
+  ariaLabel: string; // Sets what will be read to the user to define the control
+  editorLanguage: string; // Sets the editor language
+  isReadOnly?: boolean;
+  updatedContent?: ViewModels.Editable<string>; // Gets updated when user edits
+  selectedContent?: ViewModels.Editable<string>; // Gets updated when user selects content from the editor
+  lineNumbers?: monaco.editor.IEditorOptions["lineNumbers"];
+  theme?: string; // Monaco editor theme
+  renderSideBySide?: boolean; // Optionally make differences render side by side. Default true.
+}
+
+/**
+ * Diff Editor:
+ *  A ko wrapper for the Monaco editor in Diff mode
+ *
+ * How to use in your markup:
+ * <diff-editor params="{ originalContent:myJsonString, modifiedContent:jsonWithChanges, ariaLabel: myDescriptiveAriaLabel }"></json-editor>
+ *
+ * In writable mode, if you want to get changes to the originalContent pass updatedContent and subscribe to it.
+ * originalContent and updateContent are different to prevent circular updates.
+ */
+export class DiffEditorViewModel {
+  protected editorContainer: HTMLElement;
+  protected params: DiffEditorParams;
+  private static instanceCount = 0; // Generate unique id to get different monaco editor
+  private editor: monaco.editor.IStandaloneDiffEditor;
+  private instanceNumber: number;
+  private resizer: EventListenerOrEventListenerObject;
+  private observer: MutationObserver;
+  private offsetWidth: number;
+  private offsetHeight: number;
+  private selectionListener: monaco.IDisposable;
+
+  public constructor(params: DiffEditorParams) {
+    this.instanceNumber = DiffEditorViewModel.instanceCount++;
+    this.params = params;
+
+    this.params.originalContent.subscribe((newValue: string) => {
+      if (!!this.editor) {
+        this.editor.getModel().original.setValue(newValue);
+      } else if (!!this.params.modifiedContent) {
+        this.createDiffEditor(newValue, this.params.modifiedContent(), this.configureEditor.bind(this));
+      }
+    });
+
+    this.params.modifiedContent.subscribe((newValue: string) => {
+      if (!!this.editor) {
+        this.editor.getModel().modified.setValue(newValue);
+      } else if (!!this.params.originalContent) {
+        this.createDiffEditor(this.params.originalContent(), newValue, this.configureEditor.bind(this));
+      }
+    });
+
+    const onObserve: MutationCallback = (mutations: MutationRecord[], observer: MutationObserver): void => {
+      if (
+        this.offsetWidth !== this.editorContainer.offsetWidth ||
+        this.offsetHeight !== this.editorContainer.offsetHeight
+      ) {
+        this.editor.layout();
+        this.offsetWidth = this.editorContainer.offsetWidth;
+        this.offsetHeight = this.editorContainer.offsetHeight;
+      }
+    };
+    this.observer = new MutationObserver(onObserve);
+  }
+
+  protected getEditorId(): string {
+    return `jsondiffeditor${this.instanceNumber}`;
+  }
+
+  /**
+   * Create the monaco editor on diff mode and attach to DOM
+   */
+  protected createDiffEditor(
+    originalContent: string,
+    modifiedContent: string,
+    createCallback: (e: monaco.editor.IStandaloneDiffEditor) => void
+  ) {
+    this.editorContainer = document.getElementById(this.getEditorId());
+    this.editorContainer.innerHTML = "";
+    const options: monaco.editor.IDiffEditorConstructionOptions = {
+      lineNumbers: this.params.lineNumbers || "off",
+      fontSize: 12,
+      ariaLabel: this.params.ariaLabel,
+      theme: this.params.theme
+    };
+
+    if (this.params.renderSideBySide !== undefined) {
+      options.renderSideBySide = this.params.renderSideBySide;
+    }
+
+    const language = this.params.editorLanguage || "json";
+
+    const originalModel = monaco.editor.createModel(originalContent, language);
+    const modifiedModel = monaco.editor.createModel(modifiedContent, language);
+    const diffEditor: monaco.editor.IStandaloneDiffEditor = monaco.editor.createDiffEditor(
+      this.editorContainer,
+      options
+    );
+    diffEditor.setModel({
+      original: originalModel,
+      modified: modifiedModel
+    });
+
+    createCallback(diffEditor);
+  }
+
+  protected configureEditor(editor: monaco.editor.IStandaloneDiffEditor) {
+    this.editor = editor;
+    const modifiedEditorModel = this.editor.getModel().modified;
+    if (!this.params.isReadOnly && this.params.updatedContent) {
+      modifiedEditorModel.onDidChangeContent((e: monaco.editor.IModelContentChangedEvent) => {
+        const modifiedEditorModel = this.editor.getModel().modified;
+        this.params.updatedContent(modifiedEditorModel.getValue());
+      });
+    }
+
+    this.resizer = () => {
+      editor.layout();
+    };
+    window.addEventListener("resize", this.resizer);
+
+    this.offsetHeight = this.editorContainer.offsetHeight;
+    this.offsetWidth = this.editorContainer.offsetWidth;
+
+    this.observer.observe(document.body, {
+      attributes: true,
+      subtree: true,
+      childList: true
+    });
+    this.editor.focus();
+  }
+
+  private dispose() {
+    window.removeEventListener("resize", this.resizer);
+    this.selectionListener && this.selectionListener.dispose();
+    this.observer.disconnect();
+  }
+}

src/Explorer/Controls/DiffEditor/diff-editor-component.html

@@ -0,0 +1 @@
+<div class="jsonEditor" data-bind="attr:{ id:getEditorId() }"></div>

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.test.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { shallow, mount } from "enzyme";
+import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
+import { Tenant } from "../../../Contracts/DataModels";
+
+const createBlankProps = (): DefaultDirectoryDropdownProps => {
+  return {
+    defaultDirectoryId: "",
+    directories: [],
+    onDefaultDirectoryChange: jest.fn()
+  };
+};
+
+const createBlankDirectory = (): Tenant => {
+  return {
+    countryCode: "",
+    displayName: "",
+    domains: [],
+    id: "",
+    tenantId: ""
+  };
+};
+
+describe("test render", () => {
+  it("renders with no directories", () => {
+    const props = createBlankProps();
+
+    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders with directories but no default", () => {
+    const props = createBlankProps();
+    const tenant1 = createBlankDirectory();
+    tenant1.displayName = "Microsoft";
+    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
+    const tenant2 = createBlankDirectory();
+    tenant1.displayName = "Macrohard";
+    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
+    props.directories = [tenant1, tenant2];
+
+    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders with directories and default", () => {
+    const props = createBlankProps();
+    const tenant1 = createBlankDirectory();
+    tenant1.displayName = "Microsoft";
+    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
+    const tenant2 = createBlankDirectory();
+    tenant1.displayName = "Macrohard";
+    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
+    props.directories = [tenant1, tenant2];
+
+    props.defaultDirectoryId = "asdfghjklzxcvbnm9876543210";
+
+    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders with directories and last visit default", () => {
+    const props = createBlankProps();
+    const tenant1 = createBlankDirectory();
+    tenant1.displayName = "Microsoft";
+    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
+    const tenant2 = createBlankDirectory();
+    tenant1.displayName = "Macrohard";
+    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
+    props.directories = [tenant1, tenant2];
+
+    props.defaultDirectoryId = "lastVisited";
+
+    const wrapper = shallow(<DefaultDirectoryDropdownComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("test function", () => {
+  it("on default directory change", () => {
+    const props = createBlankProps();
+    const tenant1 = createBlankDirectory();
+    tenant1.displayName = "Microsoft";
+    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
+    const tenant2 = createBlankDirectory();
+    tenant1.displayName = "Macrohard";
+    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
+    props.directories = [tenant1, tenant2];
+    props.defaultDirectoryId = "lastVisited";
+
+    const wrapper = mount(<DefaultDirectoryDropdownComponent {...props} />);
+
+    wrapper.find("div.defaultDirectoryDropdown").simulate("click");
+    expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
+    wrapper
+      .find("button.ms-Dropdown-item")
+      .at(1)
+      .simulate("click");
+    expect(props.onDefaultDirectoryChange).toBeCalled();
+    expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
+
+    wrapper.find("div.defaultDirectoryDropdown").simulate("click");
+    expect(wrapper.exists("div.ms-Callout-main")).toBe(true);
+    wrapper
+      .find("button.ms-Dropdown-item")
+      .at(0)
+      .simulate("click");
+    expect(props.onDefaultDirectoryChange).toBeCalled();
+    expect(props.onDefaultDirectoryChange).toHaveBeenCalled();
+  });
+});

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx

@@ -0,0 +1,70 @@
+/**
+ * React component for Switch Directory
+ */
+
+import * as React from "react";
+import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
+import { Tenant } from "../../../Contracts/DataModels";
+
+export interface DefaultDirectoryDropdownProps {
+  directories: Array<Tenant>;
+  defaultDirectoryId: string;
+  onDefaultDirectoryChange: (newDirectory: Tenant) => void;
+}
+
+export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDirectoryDropdownProps> {
+  public static readonly lastVisitedKey: string = "lastVisited";
+
+  public render(): JSX.Element {
+    const lastVisitedOption: IDropdownOption = {
+      key: DefaultDirectoryDropdownComponent.lastVisitedKey,
+      text: "Sign in to your last visited directory"
+    };
+    const directoryOptions: Array<IDropdownOption> = this.props.directories.map(
+      (dirc): IDropdownOption => {
+        return {
+          key: dirc.tenantId,
+          text: `${dirc.displayName}(${dirc.tenantId})`
+        };
+      }
+    );
+    const dropDownOptions: Array<IDropdownOption> = [lastVisitedOption, ...directoryOptions];
+    const dropDownProps: IDropdownProps = {
+      label: "Set your default directory",
+      options: dropDownOptions,
+      defaultSelectedKey: this.props.defaultDirectoryId ? this.props.defaultDirectoryId : lastVisitedOption.key,
+      onChange: this._onDropdownChange,
+      className: "defaultDirectoryDropdown"
+    };
+
+    return <Dropdown {...dropDownProps} />;
+  }
+
+  private _onDropdownChange = (e: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number): void => {
+    if (!option || !option.key) {
+      return;
+    }
+
+    if (option.key === this.props.defaultDirectoryId) {
+      return;
+    }
+
+    if (option.key === DefaultDirectoryDropdownComponent.lastVisitedKey) {
+      this.props.onDefaultDirectoryChange({
+        tenantId: option.key,
+        countryCode: undefined,
+        displayName: undefined,
+        domains: [],
+        id: undefined
+      });
+      return;
+    }
+
+    const selectedDirectory = this.props.directories.find(d => d.tenantId === option.key);
+    if (!selectedDirectory) {
+      return;
+    }
+
+    this.props.onDefaultDirectoryChange(selectedDirectory);
+  };
+}

src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx

@@ -0,0 +1,36 @@
+import * as ko from "knockout";
+import * as React from "react";
+import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
+import { DefaultDirectoryDropdownComponent, DefaultDirectoryDropdownProps } from "./DefaultDirectoryDropdownComponent";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+
+export class DirectoryComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor(
+    private _dropdownProps: ko.Observable<DefaultDirectoryDropdownProps>,
+    private _listProps: ko.Observable<DirectoryListProps>
+  ) {
+    this._dropdownProps.subscribe(() => this.forceRender());
+    this._listProps.subscribe(() => this.forceRender());
+    this.parameters = ko.observable<number>(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    return (
+      <div>
+        <div className="directoryDropdownContainer">
+          <DefaultDirectoryDropdownComponent {...this._dropdownProps()} />
+        </div>
+        <div className="directoryDivider" />
+        <div className="directoryListContainer">
+          <DirectoryListComponent {...this._listProps()} />
+        </div>
+      </div>
+    );
+  }
+
+  public forceRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { shallow, mount } from "enzyme";
+import { DirectoryListComponent, DirectoryListProps } from "./DirectoryListComponent";
+import { Tenant } from "../../../Contracts/DataModels";
+
+const createBlankProps = (): DirectoryListProps => {
+  return {
+    selectedDirectoryId: undefined,
+    directories: [],
+    onNewDirectorySelected: jest.fn()
+  };
+};
+
+const createBlankDirectory = (): Tenant => {
+  return {
+    countryCode: undefined,
+    displayName: undefined,
+    domains: [],
+    id: undefined,
+    tenantId: undefined
+  };
+};
+
+describe("test render", () => {
+  it("renders with no directories", () => {
+    const props = createBlankProps();
+
+    const wrapper = shallow(<DirectoryListComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders with directories and selected", () => {
+    const props = createBlankProps();
+    const tenant1 = createBlankDirectory();
+    tenant1.displayName = "Microsoft";
+    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
+    const tenant2 = createBlankDirectory();
+    tenant1.displayName = "Macrohard";
+    tenant1.tenantId = "asdfghjklzxcvbnm9876543210";
+    props.directories = [tenant1, tenant2];
+
+    props.selectedDirectoryId = "asdfghjklzxcvbnm9876543210";
+
+    const wrapper = shallow(<DirectoryListComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders with filters", () => {
+    const props = createBlankProps();
+    const tenant1 = createBlankDirectory();
+    tenant1.displayName = "Microsoft";
+    tenant1.tenantId = "1234567890";
+    const tenant2 = createBlankDirectory();
+    tenant1.displayName = "Macrohard";
+    tenant1.tenantId = "9876543210";
+    props.directories = [tenant1, tenant2];
+    props.selectedDirectoryId = "9876543210";
+
+    const wrapper = mount(<DirectoryListComponent {...props} />);
+    wrapper.find("input.ms-TextField-field").simulate("change", { target: { value: "Macro" } });
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("test function", () => {
+  it("on new directory selected", () => {
+    const props = createBlankProps();
+    const tenant1 = createBlankDirectory();
+    tenant1.displayName = "Microsoft";
+    tenant1.tenantId = "asdfghjklzxcvbnm1234567890";
+    props.directories = [tenant1];
+
+    const wrapper = mount(<DirectoryListComponent {...props} />);
+    wrapper.find("button.directoryListButton").simulate("click");
+    expect(props.onNewDirectorySelected).toBeCalled();
+    expect(props.onNewDirectorySelected).toHaveBeenCalled();
+  });
+});

src/Explorer/Controls/Directory/DirectoryListComponent.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+
+import { DefaultButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
+import { List } from "office-ui-fabric-react/lib/List";
+import { ScrollablePane } from "office-ui-fabric-react/lib/ScrollablePane";
+import { Sticky, StickyPositionType } from "office-ui-fabric-react/lib/Sticky";
+import { TextField, ITextFieldProps } from "office-ui-fabric-react/lib/TextField";
+import { Tenant } from "../../../Contracts/DataModels";
+
+export interface DirectoryListProps {
+  directories: Array<Tenant>;
+  selectedDirectoryId: string;
+  onNewDirectorySelected: (newDirectory: Tenant) => void;
+}
+
+export interface DirectoryListComponentState {
+  filterText: string;
+}
+
+// onRenderCell is not called when selectedDirectoryId changed, so add a selected state to force render
+interface ListTenant extends Tenant {
+  selected?: boolean;
+}
+
+export class DirectoryListComponent extends React.Component<DirectoryListProps, DirectoryListComponentState> {
+  constructor(props: DirectoryListProps) {
+    super(props);
+
+    this.state = {
+      filterText: ""
+    };
+  }
+
+  public render(): JSX.Element {
+    const { directories: originalItems, selectedDirectoryId } = this.props;
+    const { filterText } = this.state;
+    const filteredItems =
+      originalItems && originalItems.length && filterText
+        ? originalItems.filter(
+            directory =>
+              directory.displayName &&
+              directory.displayName.toLowerCase().indexOf(filterText && filterText.toLowerCase()) >= 0
+          )
+        : originalItems;
+    const filteredItemsSelected = filteredItems.map(t => {
+      let tenant: ListTenant = t;
+      tenant.selected = t.tenantId === selectedDirectoryId;
+      return tenant;
+    });
+
+    const textFieldProps: ITextFieldProps = {
+      className: "directoryListFilterTextBox",
+      placeholder: "Filter by directory name",
+      onBeforeChange: this._onFilterChanged,
+      ariaLabel: "Directory filter text box"
+    };
+
+    // TODO: add magnify glass to search bar with onRenderSuffix
+    return (
+      <ScrollablePane data-is-scrollable="true">
+        <Sticky stickyPosition={StickyPositionType.Header}>
+          <TextField {...textFieldProps} />
+        </Sticky>
+        <List items={filteredItemsSelected} onRenderCell={this._onRenderCell} />
+      </ScrollablePane>
+    );
+  }
+
+  private _onFilterChanged = (text: string): void => {
+    this.setState({
+      filterText: text
+    });
+  };
+
+  private _onRenderCell = (directory: ListTenant): JSX.Element => {
+    const buttonProps: IButtonProps = {
+      disabled: directory.selected || false,
+      className: "directoryListButton",
+      onClick: this._onNewDirectoryClick,
+      styles: {
+        root: {
+          backgroundColor: "transparent",
+          height: "auto",
+          borderBottom: "1px solid #ccc",
+          padding: "1px 0",
+          width: "100%"
+        },
+        rootDisabled: {
+          backgroundColor: "#f1f1f8"
+        },
+        rootHovered: {
+          backgroundColor: "rgba(85,179,255,.1)"
+        },
+        flexContainer: {
+          height: "auto",
+          justifyContent: "flex-start"
+        }
+      }
+    };
+
+    return (
+      <DefaultButton {...buttonProps}>
+        <div className="directoryListItem" data-is-focusable={true}>
+          <div className="directoryListItemName">{directory.displayName}</div>
+          <div className="directoryListItemId">{directory.tenantId}</div>
+        </div>
+      </DefaultButton>
+    );
+  };
+
+  private _onNewDirectoryClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
+    if (!e || !e.currentTarget) {
+      return;
+    }
+    const buttonElement = e.currentTarget;
+    const selectedDirectoryId = buttonElement.getElementsByClassName("directoryListItemId")[0].textContent;
+    const selectedDirectory = this.props.directories.find(d => d.tenantId === selectedDirectoryId);
+
+    this.props.onNewDirectorySelected(selectedDirectory);
+  };
+}

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

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test render renders with directories and default 1`] = `
+<StyledWithResponsiveMode
+  className="defaultDirectoryDropdown"
+  defaultSelectedKey="asdfghjklzxcvbnm9876543210"
+  label="Set your default directory"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "key": "lastVisited",
+        "text": "Sign in to your last visited directory",
+      },
+      Object {
+        "key": "asdfghjklzxcvbnm9876543210",
+        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
+      },
+      Object {
+        "key": "",
+        "text": "()",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`test render renders with directories and last visit default 1`] = `
+<StyledWithResponsiveMode
+  className="defaultDirectoryDropdown"
+  defaultSelectedKey="lastVisited"
+  label="Set your default directory"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "key": "lastVisited",
+        "text": "Sign in to your last visited directory",
+      },
+      Object {
+        "key": "asdfghjklzxcvbnm9876543210",
+        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
+      },
+      Object {
+        "key": "",
+        "text": "()",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`test render renders with directories but no default 1`] = `
+<StyledWithResponsiveMode
+  className="defaultDirectoryDropdown"
+  defaultSelectedKey="lastVisited"
+  label="Set your default directory"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "key": "lastVisited",
+        "text": "Sign in to your last visited directory",
+      },
+      Object {
+        "key": "asdfghjklzxcvbnm9876543210",
+        "text": "Macrohard(asdfghjklzxcvbnm9876543210)",
+      },
+      Object {
+        "key": "",
+        "text": "()",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`test render renders with no directories 1`] = `
+<StyledWithResponsiveMode
+  className="defaultDirectoryDropdown"
+  defaultSelectedKey="lastVisited"
+  label="Set your default directory"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "key": "lastVisited",
+        "text": "Sign in to your last visited directory",
+      },
+    ]
+  }
+/>
+`;

src/Explorer/Controls/DynamicList/DynamicList.test.ts

@@ -0,0 +1,64 @@
+import * as ko from "knockout";
+import { DynamicListComponent, DynamicListParams, DynamicListItem } from "./DynamicListComponent";
+
+const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
+
+function buildComponent(buttonOptions: any) {
+  document.body.innerHTML = DynamicListComponent.template as any;
+  const vm = new DynamicListComponent.viewModel(buttonOptions);
+  ko.applyBindings(vm);
+}
+
+describe("Dynamic List Component", () => {
+  const mockPlaceHolder = "Write here";
+  const mockButton = "Add something";
+  const mockValue = "/someText";
+  const mockAriaLabel = "Add ariaLabel";
+  const items: ko.ObservableArray<DynamicListItem> = ko.observableArray<DynamicListItem>();
+
+  function buildListOptions(
+    items: ko.ObservableArray<DynamicListItem>,
+    placeholder?: string,
+    mockButton?: string
+  ): DynamicListParams {
+    return {
+      placeholder: placeholder,
+      listItems: items,
+      buttonText: mockButton,
+      ariaLabel: mockAriaLabel
+    };
+  }
+
+  afterEach(() => {
+    ko.cleanNode(document);
+  });
+
+  describe("Rendering", () => {
+    it("should display button text", () => {
+      const params = buildListOptions(items, mockPlaceHolder, mockButton);
+      buildComponent(params);
+      expect($(".dynamicListItemAdd").textContent).toContain(mockButton);
+    });
+  });
+
+  describe("Behavior", () => {
+    it("should add items to the list", () => {
+      const params = buildListOptions(items, mockPlaceHolder, mockButton);
+      buildComponent(params);
+      $(".dynamicListItemAdd").click();
+      expect(items().length).toBe(1);
+      const input = document.getElementsByClassName("dynamicListItem").item(0).children[0];
+      input.setAttribute("value", mockValue);
+      input.dispatchEvent(new Event("change"));
+      input.dispatchEvent(new Event("blur"));
+      expect(items()[0].value()).toBe(mockValue);
+    });
+
+    it("should remove items from the list", () => {
+      const params = buildListOptions(items, mockPlaceHolder);
+      buildComponent(params);
+      $(".dynamicListItemDelete").click();
+      expect(items().length).toBe(0);
+    });
+  });
+});

src/Explorer/Controls/DynamicList/DynamicListComponent.less

@@ -0,0 +1,59 @@
+@import "../../../../less/Common/Constants";
+
+.dynamicList {
+    width: 100%;
+
+    .dynamicListContainer {
+        .dynamicListItem {
+            justify-content: space-around;
+            margin-bottom: @MediumSpace;
+
+            input {
+                width: @newCollectionPaneInputWidth;
+                margin: auto;
+                font-size: @mediumFontSize;
+                padding: @SmallSpace @DefaultSpace;
+                color: @BaseDark;
+            }
+
+            .dynamicListItemDelete {
+                padding: @SmallSpace @SmallSpace @DefaultSpace;
+                margin-left: @SmallSpace;
+
+                &:hover {
+                    .hover();
+                }
+
+                &:active {
+                    .active();
+                }
+
+                img {
+                    .dataExplorerIcons();
+                }
+            }
+        }
+    }
+
+    .dynamicListItemNew {
+        margin-top: @LargeSpace;
+
+        .dynamicListItemAdd {
+            padding: @DefaultSpace;
+            cursor: pointer;
+
+            &:hover {
+                .hover();
+            }
+
+            &:active {
+                .active();
+            }
+
+            img {
+                .dataExplorerIcons();
+                margin: 0px @SmallSpace @SmallSpace 0px; 
+            }
+        }
+    }
+}

src/Explorer/Controls/DynamicList/DynamicListComponent.ts

@@ -0,0 +1,116 @@
+/**
+ * Dynamic list:
+ *
+ * Creates a list of dynamic inputs that can be populated and deleted.
+ *
+ * How to use in your markup:
+ * <dynamic-list params="{ listItems: anObservableArrayOfDynamicListItem, placeholder: 'Text to display in placeholder',  ariaLabel: 'Text for aria-label', buttonText: 'Add item' }">
+ * </dynamic-list>
+ *
+ */
+
+import * as ko from "knockout";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+import { KeyCodes } from "../../../Common/Constants";
+import template from "./dynamic-list.html";
+
+/**
+ * Parameters for this component
+ */
+export interface DynamicListParams {
+  /**
+   * Observable list of items to update
+   */
+  listItems: ko.ObservableArray<DynamicListItem>;
+
+  /**
+   * Placeholder text to use on inputs
+   */
+  placeholder?: string;
+
+  /**
+   * Text to use as aria-label
+   */
+  ariaLabel: string;
+
+  /**
+   * Text for the button to add items
+   */
+  buttonText?: string;
+
+  /**
+   * Callback triggered when the template is bound to the component (for testing purposes)
+   */
+  onTemplateReady?: () => void;
+}
+
+/**
+ * Item in the dynamic list
+ */
+export interface DynamicListItem {
+  value: ko.Observable<string>;
+}
+
+export class DynamicListViewModel extends WaitsForTemplateViewModel {
+  public placeholder: string;
+  public ariaLabel: string;
+  public buttonText: string;
+  public newItem: ko.Observable<string>;
+  public isTemplateReady: ko.Observable<boolean>;
+  public listItems: ko.ObservableArray<DynamicListItem>;
+
+  public constructor(options: DynamicListParams) {
+    super();
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady && options.onTemplateReady) {
+        options.onTemplateReady();
+      }
+    });
+
+    const params: DynamicListParams = options;
+    const paramsPlaceholder: string = params.placeholder;
+    const paramsButtonText: string = params.buttonText;
+    this.placeholder = paramsPlaceholder || "Write a value";
+    this.ariaLabel = "Unique keys";
+    this.buttonText = paramsButtonText || "Add item";
+    this.listItems = params.listItems || ko.observableArray<DynamicListItem>();
+    this.newItem = ko.observable("");
+  }
+
+  public removeItem = (data: any, event: MouseEvent | KeyboardEvent): void => {
+    const context = ko.contextFor(event.target as Node);
+    this.listItems.splice(context.$index(), 1);
+    document.getElementById("addUniqueKeyBtn").focus();
+  };
+
+  public onRemoveItemKeyPress = (data: any, event: KeyboardEvent, source: any): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.removeItem(data, event);
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  public addItem(): void {
+    this.listItems.push({ value: ko.observable("") });
+    document.getElementById("uniqueKeyItems").focus();
+  }
+
+  public onAddItemKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.addItem();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+}
+
+/**
+ * Helper class for ko component registration
+ */
+export const DynamicListComponent = {
+  viewModel: DynamicListViewModel,
+  template
+};

src/Explorer/Controls/DynamicList/dynamic-list.html

@@ -0,0 +1,34 @@
+<div class="dynamicList" data-bind="setTemplateReady: true">
+  <div class="dynamicListContainer" data-bind="foreach: listItems">
+    <div class="dynamicListItem">
+      <input
+        id="uniqueKeyItems"
+        type="text"
+        autocomplete="off"
+        data-bind="value: value, attr: {placeholder: $parent.placeholder, 'aria-label': $parent.ariaLabel}"
+      />
+      <span
+        class="dynamicListItemDelete"
+        title="Remove item"
+        role="button"
+        aria-label="Remove item"
+        tabindex="0"
+        data-bind="click: $parent.removeItem, event: { keydown: $parent.onRemoveItemKeyPress }"
+      >
+        <img src="/delete.svg" alt="Remove item" />
+      </span>
+    </div>
+  </div>
+  <div class="dynamicListItemNew">
+    <span
+      class="dynamicListItemAdd"
+      id="addUniqueKeyBtn"
+      role="button"
+      aria-label="Add unique key"
+      tabindex="0"
+      data-bind="click: addItem, event: { keydown: onAddItemKeyPress }"
+    >
+      <img src="/Add-property.svg" data-bind="attr: {alt: buttonText}" /> <span data-bind="text: buttonText"></span>
+    </span>
+  </div>
+</div>

src/Explorer/Controls/Editor/EditorComponent.ts

@@ -0,0 +1,63 @@
+import { JsonEditorParams, JsonEditorViewModel } from "../JsonEditor/JsonEditorComponent";
+import template from "./editor-component.html";
+import * as monaco from "monaco-editor";
+import { SqlCompletionItemProvider, ErrorMarkProvider } from "@azure/cosmos-language-service";
+
+/**
+ * Helper class for ko component registration
+ */
+export class EditorComponent {
+  constructor() {
+    return {
+      viewModel: EditorViewModel,
+      template
+    };
+  }
+}
+
+/**
+ * Parameters for this component
+ */
+export interface EditorParams extends JsonEditorParams {
+  contentType: string;
+}
+
+/**
+ * This is a generic editor component that builds on top of the pre-existing JsonEditorComponent.
+ */
+// TODO: Ideally, JsonEditorViewModel should extend EditorViewModel and not the other way around
+class EditorViewModel extends JsonEditorViewModel {
+  public params: EditorParams;
+  private static providerRegistered: string[] = [];
+
+  public constructor(params: EditorParams) {
+    super(params);
+    this.params = params;
+    super.createEditor.bind(this);
+
+    /**
+     * setTimeout is needed as creating the edtior manipulates the dom directly and expects
+     * Knockout to have completed all of the initial bindings for the component
+     */
+    this.params.content() != null &&
+      setTimeout(() => {
+        this.createEditor(this.params.content(), this.configureEditor.bind(this));
+      });
+  }
+
+  protected getEditorLanguage(): string {
+    return this.params.contentType;
+  }
+
+  protected registerCompletionItemProvider() {
+    let sqlCompletionItemProvider = new SqlCompletionItemProvider();
+    if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
+      monaco.languages.registerCompletionItemProvider("sql", sqlCompletionItemProvider);
+      EditorViewModel.providerRegistered.push("sql");
+    }
+  }
+
+  protected getErrorMarkers(input: string): Q.Promise<monaco.editor.IMarkerData[]> {
+    return ErrorMarkProvider.getErrorMark(input);
+  }
+}