Tweaks

.eslintignore

@@ -298,9 +298,11 @@ src/Utils/DatabaseAccountUtils.ts
 src/Utils/JunoUtils.ts
 src/Utils/MessageValidation.ts
 src/Utils/NotebookConfigurationUtils.ts
+src/Utils/NotificationConsoleUtils.ts
 src/Utils/OfferUtils.test.ts
 src/Utils/OfferUtils.ts
 src/Utils/PricingUtils.test.ts
+src/Utils/PricingUtils.ts
 src/Utils/QueryUtils.test.ts
 src/Utils/QueryUtils.ts
 src/Utils/StringUtils.test.ts

.eslintrc.js

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

.github/CODEOWNERS

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

.github/workflows/ci.yml

@@ -1,13 +1,9 @@
 name: CI
 on:
   push:
-    branches:
+    branches: [master]
-      - master
-      - hotfix/*
-      - release/*
   pull_request:
-    branches:
+    branches: [master]
-      - master
 jobs:
   compile:
     runs-on: ubuntu-latest
@@ -56,7 +52,6 @@ jobs:
       - run: npm run test
   build:
     runs-on: ubuntu-latest
-    needs: [lint, format, compile, unittest]
     name: "Build"
     steps:
       - uses: actions/checkout@v2
@@ -80,7 +75,6 @@ jobs:
           path: dist/
   endtoendemulator:
     name: "End To End Tests | Emulator | SQL"
-    needs: [lint, format, compile, unittest]
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
@@ -107,7 +101,6 @@ jobs:
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
   endtoendsql:
     name: "End To End Tests | SQL"
-    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -136,7 +129,6 @@ jobs:
           CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
   endtoendmongo:
     name: "End To End Tests | Mongo"
-    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -165,7 +157,6 @@ jobs:
           CYPRESS_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
   accessibility:
     name: "Accessibility | Hosted"
-    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -188,7 +179,7 @@ jobs:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
   nuget:
     name: Publish Nuget
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
+    if: github.ref == 'refs/heads/master'
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:
@@ -212,7 +203,7 @@ jobs:
           path: "*.nupkg"
   nugetmpac:
     name: Publish Nuget MPAC
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
+    if: github.ref == 'refs/heads/master'
     needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendsql, endtoendmongo]
     runs-on: ubuntu-latest
     env:

jest.config.js

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

package-lock.json

@@ -7720,11 +7720,6 @@
         "@types/react": "*"
       }
     },
-    "@types/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
-    },
     "@types/shallowequal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/shallowequal/-/shallowequal-1.1.1.tgz",
@@ -9571,11 +9566,6 @@
       "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
       "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
     },
-    "base64-arraybuffer": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.2.0.tgz",
-      "integrity": "sha512-7emyCsu1/xiBXgQZrscw/8KPRT44I4Yq9Pe6EGs3aPRTsWuggML1/1DTuZUuIaJPIm1FTDUVXl4x/yW8s0kQDQ=="
-    },
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
@@ -10939,14 +10929,6 @@
       "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.1.1.tgz",
       "integrity": "sha512-/PX6Bkk77ShgbOx/mpawHdEvS3PGgy1mmMktcztDPndWdMJxcorcQiivrs+nEljqtBpvNEhAmQky9tQR6FSm8Q=="
     },
-    "css-line-break": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-1.1.1.tgz",
-      "integrity": "sha512-1feNVaM4Fyzdj4mKPIQNL2n70MmuYzAXZ1aytlROFX1JsOo070OsugwGjj7nl6jnDJWHDM8zRZswkmeYVWZJQA==",
-      "requires": {
-        "base64-arraybuffer": "^0.2.0"
-      }
-    },
     "css-loader": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.0.tgz",
@@ -12817,12 +12799,6 @@
       "integrity": "sha1-EjaoEjkTkKGHetQAfCbnRTQclR8=",
       "dev": true
     },
-    "eslint-plugin-prefer-arrow": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prefer-arrow/-/eslint-plugin-prefer-arrow-1.2.2.tgz",
-      "integrity": "sha512-C8YMhL+r8RMeMdYAw/rQtE6xNdMulj+zGWud/qIGnlmomiPRaLDGLMeskZ3alN6uMBojmooRimtdrXebLN4svQ==",
-      "dev": true
-    },
     "eslint-plugin-react": {
       "version": "7.20.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.20.0.tgz",
@@ -15636,14 +15612,6 @@
         }
       }
     },
-    "html2canvas": {
-      "version": "1.0.0-rc.5",
-      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.0.0-rc.5.tgz",
-      "integrity": "sha512-DtNqPxJNXPoTajs+lVQzGS1SULRI4GQaROeU5R41xH8acffHukxRh/NBVcTBsfCkJSkLq91rih5TpbEwUP9yWA==",
-      "requires": {
-        "css-line-break": "1.1.1"
-      }
-    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@@ -22291,11 +22259,11 @@
       "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo="
     },
     "p-retry": {
-      "version": "4.2.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz",
-      "integrity": "sha512-jPH38/MRh263KKcq0wBNOGFJbm+U6784RilTmHjB/HM9kH9V8WlCpVUcdOmip9cjXOh6MxZ5yk1z2SjDUJfWmA==",
+      "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==",
+      "dev": true,
       "requires": {
-        "@types/retry": "^0.12.0",
         "retry": "^0.12.0"
       }
     },
@@ -24073,7 +24041,8 @@
     "retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs="
+      "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
+      "dev": true
     },
     "reusify": {
       "version": "1.0.4",
@@ -27476,15 +27445,6 @@
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
-        "p-retry": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz",
-          "integrity": "sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==",
-          "dev": true,
-          "requires": {
-            "retry": "^0.12.0"
-          }
-        },
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",

package.json

@@ -56,7 +56,6 @@
     "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
     "hasher": "1.2.0",
-    "html2canvas": "1.0.0-rc.5",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
@@ -67,7 +66,6 @@
     "monaco-editor": "0.15.6",
     "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.121.10",
-    "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "promise-polyfill": "8.1.0",
     "promise.prototype.finally": "3.1.0",
@@ -135,7 +133,6 @@
     "eslint": "7.3.1",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
-    "eslint-plugin-prefer-arrow": "1.2.2",
     "eslint-plugin-react": "7.20.0",
     "expose-loader": "0.7.5",
     "file-loader": "2.0.0",

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/Common/Constants.ts

@@ -101,7 +101,6 @@ export class CapabilityNames {
   public static readonly EnableNotebooks: string = "EnableNotebooks";
   public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
   public static readonly EnableMongo: string = "EnableMongo";
-  public static readonly EnableServerless: string = "EnableServerless";
 }
 
 export class Features {

src/Common/CosmosClient.ts

@@ -2,7 +2,7 @@ import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { HttpHeaders, EmulatorMasterKey } from "./Constants";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import { config, Platform } from "../Config";
 

src/Common/ErrorParserUtility.ts

@@ -1,69 +1,67 @@
-import * as DataModels from "../Contracts/DataModels";
+import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
+import * as ViewModels from "../Contracts/ViewModels";
-
+
-export function replaceKnownError(err: string): string {
+export function replaceKnownError(err: string): string {
-  if (
+  if (
-    window.dataExplorer.subscriptionType() === ViewModels.SubscriptionType.Internal &&
+    window.dataExplorer.subscriptionType() === ViewModels.SubscriptionType.Internal &&
-    err.indexOf("SharedOffer is Disabled for your account") >= 0
+    err.indexOf("SharedOffer is Disabled for your account") >= 0
-  ) {
+  ) {
-    return "Database throughput is not supported for internal subscriptions.";
+    return "Database throughput is not supported for internal subscriptions.";
-  } else if (err.indexOf("Partition key paths must contain only valid") >= 0) {
+  }
-    return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
+
-  }
+  return err;
-
+}
-  return err;
+
-}
+export function parse(err: any): DataModels.ErrorDataModel[] {
-
+  try {
-export function parse(err: any): DataModels.ErrorDataModel[] {
+    return _parse(err);
-  try {
+  } catch (e) {
-    return _parse(err);
+    return [<DataModels.ErrorDataModel>{ message: JSON.stringify(err) }];
-  } catch (e) {
+  }
-    return [<DataModels.ErrorDataModel>{ message: JSON.stringify(err) }];
+}
-  }
+
-}
+function _parse(err: any): DataModels.ErrorDataModel[] {
-
+  var normalizedErrors: DataModels.ErrorDataModel[] = [];
-function _parse(err: any): DataModels.ErrorDataModel[] {
+  if (err.message && !err.code) {
-  var normalizedErrors: DataModels.ErrorDataModel[] = [];
+    normalizedErrors.push(err);
-  if (err.message && !err.code) {
+  } else {
-    normalizedErrors.push(err);
+    const innerErrors: any[] = _getInnerErrors(err.message);
-  } else {
+    normalizedErrors = innerErrors.map(innerError =>
-    const innerErrors: any[] = _getInnerErrors(err.message);
+      typeof innerError === "string" ? { message: innerError } : innerError
-    normalizedErrors = innerErrors.map(innerError =>
+    );
-      typeof innerError === "string" ? { message: innerError } : innerError
+  }
-    );
+
-  }
+  return normalizedErrors;
-
+}
-  return normalizedErrors;
+
-}
+function _getInnerErrors(message: string): any[] {
-
+  /*
-function _getInnerErrors(message: string): any[] {
+            The backend error message has an inner-message which is a stringified object. 
-  /*
+
-            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:
-            For SQL errors, the "errors" property is an array of SqlErrorDataModel.
+                "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"
-            Example:
+            For non-SQL errors the "Errors" propery is an array of string.
-                "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"
+            Example:
-            For non-SQL errors the "Errors" propery is an array of string.
+                "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"
-            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;
-
+
-  let innerMessage: any = null;
+  const singleLineMessage = message.replace(/[\r\n]|\r|\n/g, "");
-
+  try {
-  const singleLineMessage = message.replace(/[\r\n]|\r|\n/g, "");
+    // Multi-Partition error flavor
-  try {
+    const regExp = /^(.*)ActivityId: (.*)/g;
-    // Multi-Partition error flavor
+    const regString = regExp.exec(singleLineMessage);
-    const regExp = /^(.*)ActivityId: (.*)/g;
+    const innerMessageString = regString[1];
-    const regString = regExp.exec(singleLineMessage);
+    innerMessage = JSON.parse(innerMessageString);
-    const innerMessageString = regString[1];
+  } catch (e) {
-    innerMessage = JSON.parse(innerMessageString);
+    // Single-partition error flavor
-  } catch (e) {
+    const regExp = /^Message: (.*)ActivityId: (.*), Request URI: (.*)/g;
-    // Single-partition error flavor
+    const regString = regExp.exec(singleLineMessage);
-    const regExp = /^Message: (.*)ActivityId: (.*), Request URI: (.*)/g;
+    const innerMessageString = regString[1];
-    const regString = regExp.exec(singleLineMessage);
+    innerMessage = JSON.parse(innerMessageString);
-    const innerMessageString = regString[1];
+  }
-    innerMessage = JSON.parse(innerMessageString);
+
-  }
+  return innerMessage.errors ? innerMessage.errors : innerMessage.Errors;
-
+}
-  return innerMessage.errors ? innerMessage.errors : innerMessage.Errors;
-}

src/Common/Logger.test.ts

@@ -1,26 +1,46 @@
-jest.mock("./MessageHandler");
 import { LogEntryLevel } from "../Contracts/Diagnostics";
 import * as Logger from "./Logger";
+import { MessageHandler } from "./MessageHandler";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { sendMessage } from "./MessageHandler";
 
 describe("Logger", () => {
+  let sendMessageSpy: jasmine.Spy;
+
   beforeEach(() => {
-    jest.resetAllMocks();
+    sendMessageSpy = spyOn(MessageHandler, "sendMessage");
+  });
+
+  afterEach(() => {
+    sendMessageSpy = null;
   });
 
   it("should log info messages", () => {
     Logger.logInfo("Test info", "DocDB");
-    expect(sendMessage).toBeCalled();
+    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");
-    expect(sendMessage).toBeCalled();
+    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");
-    expect(sendMessage).toBeCalled();
+    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

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

src/Common/MessageHandler.test.ts

@@ -1,29 +1,65 @@
 import Q from "q";
-import * as MessageHandler from "./MessageHandler";
+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", () => {
-  it("should handle cached message", async () => {
+  beforeEach(() => {
-    let mockPromise = {
+    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: "{}" } };
-    MessageHandler.RequestMap[mockPromise.id] = mockPromise;
+
-    MessageHandler.handleCachedDataMessage(mockMessage);
+    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", async () => {
+  it("should delete fulfilled promises on running the garbage collector", () => {
-    let message = {
+    let mockPromise: CachedDataPromise<any> = {
       id: "123",
       startTime: new Date(),
       deferred: Q.defer<any>()
     };
 
-    MessageHandler.handleCachedDataMessage(message);
+    MockMessageHandler.addToMap(mockPromise.id, mockPromise);
-    MessageHandler.runGarbageCollector();
+    mockPromise.deferred.reject("some error");
-    expect(MessageHandler.RequestMap["123"]).toBeUndefined();
+    MockMessageHandler.runGarbageCollector();
+    expect(MockMessageHandler.mapContainsKey(mockPromise.id)).toBe(false);
   });
 });

src/Common/MessageHandler.ts

@@ -9,65 +9,77 @@ export interface CachedDataPromise<T> {
   id: string;
 }
 
-export const RequestMap: Record<string, CachedDataPromise<any>> = {};
+/**
+ * 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 function handleCachedDataMessage(message: any): void {
+export class MessageHandler {
-  const messageContent = message && message.message;
+  protected static RequestMap: Map = {};
-  if (message == null || messageContent == null || messageContent.id == null || !RequestMap[messageContent.id]) {
+
-    return;
+  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();
   }
 
-  const cachedDataPromise = RequestMap[messageContent.id];
+  public static sendCachedDataMessage<TResponseDataModel>(
-  if (messageContent.error != null) {
+    messageType: MessageTypes,
-    cachedDataPromise.deferred.reject(messageContent.error);
+    params: Object[],
-  } else {
+    timeoutInMs?: number
-    cachedDataPromise.deferred.resolve(JSON.parse(messageContent.data));
+  ): Q.Promise<TResponseDataModel> {
-  }
+    let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
-  runGarbageCollector();
+      deferred: Q.defer<TResponseDataModel>(),
-}
+      startTime: new Date(),
+      id: _.uniqueId()
+    };
+    MessageHandler.RequestMap[cachedDataPromise.id] = cachedDataPromise;
+    MessageHandler.sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
 
-export function sendCachedDataMessage<TResponseDataModel>(
+    //TODO: Use telemetry to measure optimal time to resolve/reject promises
-  messageType: MessageTypes,
+    return cachedDataPromise.deferred.promise.timeout(
-  params: Object[],
+      timeoutInMs || Constants.ClientDefaults.requestTimeoutMs,
-  timeoutInMs?: number
+      "Timed out while waiting for response from portal"
-): Q.Promise<TResponseDataModel> {
-  let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
-    deferred: Q.defer<TResponseDataModel>(),
-    startTime: new Date(),
-    id: _.uniqueId()
-  };
-  RequestMap[cachedDataPromise.id] = cachedDataPromise;
-  sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
-
-  //TODO: Use telemetry to measure optimal time to resolve/reject promises
-  return cachedDataPromise.deferred.promise.timeout(
-    timeoutInMs || Constants.ClientDefaults.requestTimeoutMs,
-    "Timed out while waiting for response from portal"
-  );
-}
-
-export function sendMessage(data: any): void {
-  if (canSendMessage()) {
-    window.parent.postMessage(
-      {
-        signature: "pcIframe",
-        data: data
-      },
-      window.document.referrer
     );
   }
-}
 
-export function canSendMessage(): boolean {
+  public static sendMessage(data: any): void {
-  return window.parent !== window;
+    if (MessageHandler.canSendMessage()) {
-}
+      window.parent.postMessage(
-
+        {
-// TODO: This is exported just for testing. It should not be.
+          signature: "pcIframe",
-export function runGarbageCollector() {
+          data: data
-  Object.keys(RequestMap).forEach((key: string) => {
+        },
-    const promise: Q.Promise<any> = RequestMap[key].deferred.promise;
+        window.document.referrer
-    if (promise.isFulfilled() || promise.isRejected()) {
+      );
-      delete RequestMap[key];
     }
-  });
+  }
+
+  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

@@ -7,12 +7,10 @@ import {
   updateDocument
 } from "./MongoProxyClient";
 import { AuthType } from "../AuthType";
-import { Collection } from "../Contracts/ViewModels";
+import { Collection, DatabaseAccount, DocumentId } from "../Contracts/ViewModels";
 import { config } from "../Config";
 import { CosmosClient } from "./CosmosClient";
 import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
-import DocumentId from "../Explorer/Tree/DocumentId";
-import { DatabaseAccount } from "../Contracts/DataModels";
 jest.mock("../ResourceProvider/ResourceProviderClient.ts");
 
 const databaseId = "testDB";
@@ -173,7 +171,7 @@ describe("MongoProxyClient", () => {
     });
 
     it("builds the correct URL", () => {
-      updateDocument(databaseId, collection, documentId, "{}");
+      updateDocument(databaseId, collection, documentId, {});
       expect(window.fetch).toHaveBeenCalledWith(
         "https://main.documentdb.ext.azure.com/api/mongo/explorer?db=testDB&coll=testCollection&resourceUrl=bardb%2FtestDB%2Fdb%2FtestCollection%2Fdocs%2FtestId&rid=testId&rtype=docs&sid=&rg=&dba=foo&pk=pk",
         expect.any(Object)
@@ -182,7 +180,7 @@ describe("MongoProxyClient", () => {
 
     it("builds the correct proxy URL in development", () => {
       config.MONGO_BACKEND_ENDPOINT = "https://localhost:1234";
-      updateDocument(databaseId, collection, documentId, "{}");
+      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)

src/Common/MongoProxyClient.ts

@@ -1,6 +1,7 @@
 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";
@@ -11,12 +12,11 @@ import { config } from "../Config";
 import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
 import { CosmosClient } from "./CosmosClient";
-import { sendMessage } from "./MessageHandler";
+import { MessageHandler } from "./MessageHandler";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
 import { ResourceProviderClient } from "../ResourceProvider/ResourceProviderClient";
 import { MinimalQueryIterator } from "./IteratorUtilities";
-import DocumentId from "../Explorer/Tree/DocumentId";
 
 const defaultHeaders = {
   [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
@@ -123,7 +123,7 @@ export function queryDocuments(
 export function readDocument(
   databaseId: string,
   collection: Collection,
-  documentId: DocumentId
+  documentId: ViewModels.DocumentId
 ): Promise<DataModels.DocumentId> {
   const databaseAccount = CosmosClient.databaseAccount();
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -205,8 +205,8 @@ export function createDocument(
 export function updateDocument(
   databaseId: string,
   collection: Collection,
-  documentId: DocumentId,
+  documentId: ViewModels.DocumentId,
-  documentContent: string
+  documentContent: unknown
 ): Promise<DataModels.DocumentId> {
   const databaseAccount = CosmosClient.databaseAccount();
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
@@ -230,7 +230,7 @@ export function updateDocument(
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "PUT",
-      body: documentContent,
+      body: JSON.stringify(documentContent),
       headers: {
         ...defaultHeaders,
         ...authHeaders(),
@@ -246,7 +246,11 @@ export function updateDocument(
     });
 }
 
-export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
+export function deleteDocument(
+  databaseId: string,
+  collection: Collection,
+  documentId: ViewModels.DocumentId
+): Promise<void> {
   const databaseAccount = CosmosClient.databaseAccount();
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
@@ -381,7 +385,7 @@ export function createMongoCollectionWithARM(
   return _createMongoCollectionWithARM(armEndpoint, params, additionalOptions);
 }
 
-export function getEndpoint(databaseAccount: DataModels.DatabaseAccount): string {
+export function getEndpoint(databaseAccount: ViewModels.DatabaseAccount): string {
   const serverId = window.dataExplorer.serverId();
   const extensionEndpoint = window.dataExplorer.extensionEndpoint();
   let url = config.MONGO_BACKEND_ENDPOINT
@@ -404,7 +408,7 @@ async function errorHandling(response: Response, action: string, params: unknown
     `Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`
   );
   if (response.status === HttpStatusCodes.Forbidden) {
-    sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
+    MessageHandler.sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
     return;
   }
   throw new Error(errorMessage);

src/Common/NotificationsClientBase.ts

@@ -6,7 +6,7 @@ import * as ViewModels from "../Contracts/ViewModels";
 import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { CosmosClient } from "./CosmosClient";
 
-export class NotificationsClientBase {
+export class NotificationsClientBase implements ViewModels.NotificationsClient {
   private _extensionEndpoint: string;
   private _notificationsApiSuffix: string;
 
@@ -16,7 +16,7 @@ export class NotificationsClientBase {
 
   public fetchNotifications(): Q.Promise<DataModels.Notification[]> {
     const deferred: Q.Deferred<DataModels.Notification[]> = Q.defer<DataModels.Notification[]>();
-    const databaseAccount = CosmosClient.databaseAccount();
+    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}`;

src/Common/QueriesClient.ts

@@ -8,19 +8,11 @@ import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/Notificat
 import { CosmosClient } from "./CosmosClient";
 import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as Logger from "./Logger";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
 import { QueryUtils } from "../Utils/QueryUtils";
 import Explorer from "../Explorer/Explorer";
-import {
-  getOrCreateDatabaseAndCollection,
-  createDocument,
-  queryDocuments,
-  queryDocumentsPage,
-  deleteDocument
-} from "./DocumentClientUtilityBase";
-import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 
-export class QueriesClient {
+export class QueriesClient implements ViewModels.QueriesClient {
   private static readonly PartitionKey: DataModels.PartitionKey = {
     paths: [`/${SavedQueries.PartitionKeyProperty}`],
     kind: BackendDefaults.partitionKeyKind,
@@ -41,13 +33,14 @@ export class QueriesClient {
       ConsoleDataType.InProgress,
       "Setting up account for saving queries"
     );
-    return getOrCreateDatabaseAndCollection({
+    return this.container.documentClientUtility
-      collectionId: SavedQueries.CollectionName,
+      .getOrCreateDatabaseAndCollection({
-      databaseId: SavedQueries.DatabaseName,
+        collectionId: SavedQueries.CollectionName,
-      partitionKey: QueriesClient.PartitionKey,
+        databaseId: SavedQueries.DatabaseName,
-      offerThroughput: SavedQueries.OfferThroughput,
+        partitionKey: QueriesClient.PartitionKey,
-      databaseLevelThroughput: undefined
+        offerThroughput: SavedQueries.OfferThroughput,
-    })
+        databaseLevelThroughput: undefined
+      })
       .then(
         (collection: DataModels.Collection) => {
           NotificationConsoleUtils.logConsoleMessage(
@@ -96,7 +89,8 @@ export class QueriesClient {
       `Saving query ${query.queryName}`
     );
     query.id = query.queryName;
-    return createDocument(queriesCollection, query)
+    return this.container.documentClientUtility
+      .createDocument(queriesCollection, query)
       .then(
         (savedQuery: DataModels.Query) => {
           NotificationConsoleUtils.logConsoleMessage(
@@ -137,11 +131,17 @@ export class QueriesClient {
 
     const options: any = { enableCrossPartitionQuery: true };
     const id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Fetching saved queries");
-    return queryDocuments(SavedQueries.DatabaseName, SavedQueries.CollectionName, this.fetchQueriesQuery(), options)
+    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> =>
-            queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex, options);
+            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) => {
@@ -217,16 +217,17 @@ export class QueriesClient {
       `Deleting query ${query.queryName}`
     );
     query.id = query.queryName;
-    const documentId = new DocumentId(
+    const documentId: ViewModels.DocumentId = new DocumentId(
       {
         partitionKey: QueriesClient.PartitionKey,
         partitionKeyProperty: "id"
-      } as DocumentsTab,
+      } as ViewModels.DocumentsTab,
       query,
       query.queryName
     ); // TODO: Remove DocumentId's dependency on DocumentsTab
     const options: any = { partitionKey: query.resourceId };
-    return deleteDocument(queriesCollection, documentId)
+    return this.container.documentClientUtility
+      .deleteDocument(queriesCollection, documentId)
       .then(
         () => {
           NotificationConsoleUtils.logConsoleMessage(
@@ -249,7 +250,7 @@ export class QueriesClient {
   }
 
   public getResourceId(): string {
-    const databaseAccount = CosmosClient.databaseAccount();
+    const databaseAccount: ViewModels.DatabaseAccount = CosmosClient.databaseAccount();
     const databaseAccountName: string = (databaseAccount && databaseAccount.name) || "";
     const subscriptionId: string = CosmosClient.subscriptionId() || "";
     const resourceGroup: string = CosmosClient.resourceGroup() || "";

src/Common/dataAccess/deleteCollection.test.ts

@@ -1,16 +0,0 @@
-jest.mock("../../Utils/arm/request");
-jest.mock("../MessageHandler");
-import { deleteCollection } from "./deleteCollection";
-import { armRequest } from "../../Utils/arm/request";
-import { AuthType } from "../../AuthType";
-import { sendCachedDataMessage } from "../MessageHandler";
-
-describe("deleteCollection", () => {
-  it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
-    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
-    await deleteCollection("database", "collection");
-    expect(armRequest).toHaveBeenCalled();
-  });
-  // TODO: Test non-AAD case
-});

src/Common/dataAccess/deleteCollection.ts

@@ -1,31 +0,0 @@
-import { CosmosClient } from "../CosmosClient";
-import { refreshCachedResources } from "../DataAccessUtilityBase";
-import { logConsoleProgress, logConsoleInfo, logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import { AuthType } from "../../AuthType";
-import { deleteSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-
-export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
-  const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
-  try {
-    if (window.authType === AuthType.AAD) {
-      await deleteSqlContainer(
-        CosmosClient.subscriptionId(),
-        CosmosClient.resourceGroup(),
-        CosmosClient.databaseAccount().name,
-        databaseId,
-        collectionId
-      );
-    } else {
-      await CosmosClient.client()
-        .database(databaseId)
-        .container(collectionId)
-        .delete();
-    }
-  } catch (error) {
-    logConsoleError(`Error while deleting container ${collectionId}:\n ${JSON.stringify(error)}`);
-    throw error;
-  }
-  logConsoleInfo(`Successfully deleted container ${collectionId}`);
-  clearMessage();
-  await refreshCachedResources();
-}

src/Common/dataAccess/deleteDatabase.test.ts

@@ -1,16 +0,0 @@
-jest.mock("../../Utils/arm/request");
-jest.mock("../MessageHandler");
-import { deleteDatabase } from "./deleteDatabase";
-import { armRequest } from "../../Utils/arm/request";
-import { AuthType } from "../../AuthType";
-import { sendCachedDataMessage } from "../MessageHandler";
-
-describe("deleteDatabase", () => {
-  it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
-    (sendCachedDataMessage as jest.Mock).mockResolvedValue(undefined);
-    await deleteDatabase("database");
-    expect(armRequest).toHaveBeenCalled();
-  });
-  // TODO: Test non-AAD case
-});

src/Common/dataAccess/deleteDatabase.ts

@@ -1,34 +0,0 @@
-import { CosmosClient } from "../CosmosClient";
-import { refreshCachedResources } from "../DataAccessUtilityBase";
-import { logConsoleProgress, logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import { deleteSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { AuthType } from "../../AuthType";
-import { logError } from "../Logger";
-import { sendNotificationForError } from "./sendNotificationForError";
-
-export async function deleteDatabase(databaseId: string): Promise<void> {
-  const clearMessage = logConsoleProgress(`Deleting database ${databaseId}`);
-
-  try {
-    if (window.authType === AuthType.AAD) {
-      await deleteSqlDatabase(
-        CosmosClient.subscriptionId(),
-        CosmosClient.resourceGroup(),
-        CosmosClient.databaseAccount().name,
-        databaseId
-      );
-    } else {
-      await CosmosClient.client()
-        .database(databaseId)
-        .delete();
-    }
-  } catch (error) {
-    logConsoleError(`Error while deleting database ${databaseId}:\n ${JSON.stringify(error)}`);
-    logError(JSON.stringify(error), "DeleteDatabase", error.code);
-    sendNotificationForError(error);
-    throw error;
-  }
-  logConsoleInfo(`Successfully deleted database ${databaseId}`);
-  clearMessage();
-  await refreshCachedResources();
-}

src/Common/dataAccess/sendNotificationForError.ts

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

src/Contracts/ViewModels.ts

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

src/Controls/Heatmap/Heatmap.ts

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

src/Explorer/ComponentRegisterer.ts

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

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

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

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

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -17,7 +17,7 @@ import * as React from "react";
 import * as Logger from "../../../Common/Logger";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComponent";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -10,7 +10,7 @@ import * as Logger from "../../../Common/Logger";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { IGalleryItem, JunoClient } from "../../../Juno/JunoClient";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
@@ -19,7 +19,6 @@ import { DialogComponent, DialogProps } from "../DialogReactComponent/DialogComp
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 import Explorer from "../../Explorer";
-import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 
 export interface NotebookViewerComponentProps {
   container?: Explorer;
@@ -89,13 +88,13 @@ export class NotebookViewerComponent extends React.Component<
       this.notebookComponentBootstrapper.setContent("json", notebook);
       this.setState({ content: notebook, showProgressBar: false });
 
-      if (this.props.galleryItem && !SessionStorageUtility.getEntry(this.props.galleryItem.id)) {
+      if (this.props.galleryItem) {
         const response = await this.props.junoClient.increaseNotebookViews(this.props.galleryItem.id);
         if (!response.data) {
           throw new Error(`Received HTTP ${response.status} while increasing notebook views`);
         }
+
         this.setState({ galleryItem: response.data });
-        SessionStorageUtility.setEntry(this.props.galleryItem?.id, "true");
       }
     } catch (error) {
       this.setState({ showProgressBar: false });

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -27,10 +27,9 @@ import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/l
 import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
 import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
-import { QueriesClient } from "../../../Common/QueriesClient";
 
 export interface QueriesGridComponentProps {
-  queriesClient: QueriesClient;
+  queriesClient: ViewModels.QueriesClient;
   onQuerySelect: (query: DataModels.Query) => void;
   containerVisible: boolean;
   saveQueryEnabled: boolean;

src/Explorer/Controls/Toolbar/IToolbarAction.ts

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

src/Explorer/Controls/Toolbar/IToolbarDisplayable.ts

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

src/Explorer/Controls/Toolbar/IToolbarDropDown.ts

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

src/Explorer/Controls/Toolbar/IToolbarItem.ts

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

src/Explorer/Controls/Toolbar/IToolbarSeperator.ts

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

src/Explorer/Controls/Toolbar/IToolbarToggle.ts

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

src/Explorer/Controls/Toolbar/KeyCodes.ts

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

src/Explorer/Controls/Toolbar/Toolbar.ts

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

src/Explorer/Controls/Toolbar/ToolbarAction.ts

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

src/Explorer/Controls/Toolbar/ToolbarDropDown.ts

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

src/Explorer/Controls/Toolbar/ToolbarToggle.ts

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

src/Explorer/Controls/Toolbar/Utilities.ts

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

src/Explorer/Controls/Toolbar/toolbar.html

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

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -1,11 +1,10 @@
-jest.mock("../../Common/DocumentClientUtilityBase");
 import * as ko from "knockout";
 import * as sinon from "sinon";
 import * as ViewModels from "../../Contracts/ViewModels";
+import DocumentClientUtilityBase from "../../Common/DocumentClientUtilityBase";
 import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { CosmosClient } from "../../Common/CosmosClient";
-import * as DocumentClientUtility from "../../Common/DocumentClientUtilityBase";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
 import Explorer from "../Explorer";
 
@@ -63,12 +62,19 @@ describe("ContainerSampleGenerator", () => {
 
     const explorerStub = createExplorerStub(database);
     explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => true);
+
+    const fakeDocumentClientUtility = sinon.createStubInstance(DocumentClientUtilityBase);
+    fakeDocumentClientUtility.getOrCreateDatabaseAndCollection.returns(Q.resolve(collection));
+    fakeDocumentClientUtility.createDocument.returns(Q.resolve());
+
+    explorerStub.documentClientUtility = fakeDocumentClientUtility;
+
     const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
     generator.setData(sampleData);
 
     await generator.createSampleContainerAsync();
 
-    expect(DocumentClientUtility.createDocument).toHaveBeenCalled();
+    expect(fakeDocumentClientUtility.createDocument.called).toBe(true);
   });
 
   it("should send gremlin queries for Graph API account", async () => {
@@ -103,12 +109,18 @@ describe("ContainerSampleGenerator", () => {
     const explorerStub = createExplorerStub(database);
     explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => true);
 
+    const fakeDocumentClientUtility = sinon.createStubInstance(DocumentClientUtilityBase);
+    fakeDocumentClientUtility.getOrCreateDatabaseAndCollection.returns(Q.resolve(collection));
+    fakeDocumentClientUtility.createDocument.returns(Q.resolve());
+
+    explorerStub.documentClientUtility = fakeDocumentClientUtility;
+
     const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
     generator.setData(sampleData);
 
     await generator.createSampleContainerAsync();
 
-    expect(DocumentClientUtility.createDocument).toHaveBeenCalled();
+    expect(fakeDocumentClientUtility.createDocument.called).toBe(false);
     expect(executeStub.called).toBe(true);
   });
 

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -5,9 +5,8 @@ import GraphTab from ".././Tabs/GraphTab";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { CosmosClient } from "../../Common/CosmosClient";
 import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { createDocument, getOrCreateDatabaseAndCollection } from "../../Common/DocumentClientUtilityBase";
 
 interface SampleDataFile extends DataModels.CreateDatabaseAndCollectionRequest {
   data: any[];
@@ -65,7 +64,7 @@ export class ContainerSampleGenerator {
       options.initialHeaders[Constants.HttpHeaders.usePolygonsSmallerThanAHemisphere] = true;
     }
 
-    await getOrCreateDatabaseAndCollection(createRequest, options);
+    await this.container.documentClientUtility.getOrCreateDatabaseAndCollection(createRequest, options);
     await this.container.refreshAllDatabases();
     const database = this.container.findDatabaseWithId(this.sampleDataFile.databaseId);
     if (!database) {
@@ -104,7 +103,7 @@ export class ContainerSampleGenerator {
     } else {
       // For SQL all queries are executed at the same time
       this.sampleDataFile.data.forEach(doc => {
-        const subPromise = createDocument(collection, doc);
+        const subPromise = this.container.documentClientUtility.createDocument(collection, doc);
         subPromise.catch(reason => NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, reason));
         promises.push(subPromise);
       });

src/Explorer/DataSamples/DataSamplesUtil.ts

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

src/Explorer/Explorer.ts

@@ -15,13 +15,13 @@ import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import Database from "./Tree/Database";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import { readDatabases, readCollection, readOffers, refreshCachedResources } from "../Common/DocumentClientUtilityBase";
+import DocumentClientUtilityBase from "../Common/DocumentClientUtilityBase";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
 import EnvironmentUtility from "../Common/EnvironmentUtility";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import hasher from "hasher";
 import NewVertexPane from "./Panes/NewVertexPane";
-import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
+import NotebookV2Tab from "./Tabs/NotebookV2Tab";
 import Q from "q";
 import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
 import TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
@@ -33,6 +33,7 @@ import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
+import { CassandraApi } from "../Api/Apis";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { config } from "../Config";
@@ -51,12 +52,12 @@ import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
 import { IGalleryItem } from "../Juno/JunoClient";
 import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import * as Logger from "../Common/Logger";
-import { sendMessage, sendCachedDataMessage, handleCachedDataMessage } from "../Common/MessageHandler";
+import { MessageHandler } from "../Common/MessageHandler";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import { NotificationConsoleComponentAdapter } from "./Menus/NotificationConsole/NotificationConsoleComponentAdapter";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../Utils/NotificationConsoleUtils";
 import { PlatformType } from "../PlatformType";
 import { QueriesClient } from "../Common/QueriesClient";
 import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
@@ -81,10 +82,6 @@ import { toRawContentUri, fromContentUri } from "../Utils/GitHubUtils";
 import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import { NotificationsClientBase } from "../Common/NotificationsClientBase";
-import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
-import TabsBase from "./Tabs/TabsBase";
-import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -95,15 +92,6 @@ enum ShareAccessToggleState {
   Read
 }
 
-interface ExplorerOptions {
-  notificationsClient: NotificationsClientBase;
-  isEmulator: boolean;
-}
-interface AdHocAccessData {
-  readWriteUrl: string;
-  readUrl: string;
-}
-
 export default class Explorer {
   public flight: ko.Observable<string> = ko.observable<string>(
     SharedConstants.CollectionCreation.DefaultAddCollectionDefaultFlight
@@ -119,7 +107,7 @@ export default class Explorer {
   public hasWriteAccess: ko.Observable<boolean>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
-  public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
+  public databaseAccount: ko.Observable<ViewModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
   public subscriptionType: ko.Observable<ViewModels.SubscriptionType>;
   public quotaId: ko.Observable<string>;
@@ -130,7 +118,6 @@ export default class Explorer {
   public isPreferredApiGraph: ko.Computed<boolean>;
   public isPreferredApiTable: ko.Computed<boolean>;
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
-  public isServerlessEnabled: ko.Computed<boolean>;
   public isEmulator: boolean;
   public isAccountReady: ko.Observable<boolean>;
   public canSaveQueries: ko.Computed<boolean>;
@@ -139,8 +126,9 @@ export default class Explorer {
   public extensionEndpoint: ko.Observable<string>;
   public armEndpoint: ko.Observable<string>;
   public isTryCosmosDBSubscription: ko.Observable<boolean>;
-  public notificationsClient: NotificationsClientBase;
+  public documentClientUtility: DocumentClientUtilityBase;
-  public queriesClient: QueriesClient;
+  public notificationsClient: ViewModels.NotificationsClient;
+  public queriesClient: ViewModels.QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
   public parentFrameDataExplorerVersion: ko.Observable<string> = ko.observable<string>("");
@@ -151,7 +139,7 @@ export default class Explorer {
   public isNotificationConsoleExpanded: ko.Observable<boolean>;
 
   // Panes
-  public contextPanes: ContextualPaneBase[];
+  public contextPanes: ViewModels.ContextualPane[];
 
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
@@ -196,12 +184,12 @@ export default class Explorer {
   public uploadItemsPane: UploadItemsPane;
   public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
   public loadQueryPane: LoadQueryPane;
-  public saveQueryPane: ContextualPaneBase;
+  public saveQueryPane: ViewModels.ContextualPane;
   public browseQueriesPane: BrowseQueriesPane;
   public uploadFilePane: UploadFilePane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
-  public gitHubReposPane: ContextualPaneBase;
+  public gitHubReposPane: ViewModels.ContextualPane;
   public publishNotebookPaneAdapter: ReactAdapter;
 
   // features
@@ -214,7 +202,7 @@ export default class Explorer {
   public hasAutoPilotV2FeatureFlag: ko.Computed<boolean>;
 
   public shouldShowShareDialogContents: ko.Observable<boolean>;
-  public shareAccessData: ko.Observable<AdHocAccessData>;
+  public shareAccessData: ko.Observable<ViewModels.AdHocAccessData>;
   public renewExplorerShareAccess: (explorer: Explorer, token: string) => Q.Promise<void>;
   public renewTokenError: ko.Observable<string>;
   public tokenForRenewal: ko.Observable<string>;
@@ -240,7 +228,7 @@ export default class Explorer {
   public memoryUsageInfo: ko.Observable<DataModels.MemoryUsageInfo>;
   public notebookManager?: any; // This is dynamically loaded
 
-  private _panes: ContextualPaneBase[] = [];
+  private _panes: ViewModels.ContextualPane[] = [];
   private _importExplorerConfigComplete: boolean = false;
   private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = database => false;
   private _isInitializingNotebooks: boolean;
@@ -263,7 +251,7 @@ export default class Explorer {
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
-  constructor(options: ExplorerOptions) {
+  constructor(options: ViewModels.ExplorerOptions) {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree
     });
@@ -276,7 +264,7 @@ export default class Explorer {
     this.deleteDatabaseText = ko.observable<string>("Delete Database");
     this.refreshTreeTitle = ko.observable<string>("Refresh collections");
 
-    this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
+    this.databaseAccount = ko.observable<ViewModels.DatabaseAccount>();
     this.subscriptionType = ko.observable<ViewModels.SubscriptionType>(
       SharedConstants.CollectionCreation.DefaultSubscriptionType
     );
@@ -369,6 +357,7 @@ export default class Explorer {
       }
     });
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
+    this.documentClientUtility = options.documentClientUtility;
     this.notificationsClient = options.notificationsClient;
     this.isEmulator = options.isEmulator;
 
@@ -385,7 +374,7 @@ export default class Explorer {
     this.resourceTokenPartitionKey = ko.observable<string>();
     this.isAuthWithResourceToken = ko.observable<boolean>(false);
 
-    this.shareAccessData = ko.observable<AdHocAccessData>({
+    this.shareAccessData = ko.observable<ViewModels.AdHocAccessData>({
       readWriteUrl: undefined,
       readUrl: undefined
     });
@@ -470,7 +459,7 @@ export default class Explorer {
     });
     this.notificationConsoleData = ko.observableArray<ConsoleData>([]);
     this.defaultExperience = ko.observable<string>();
-    this.databaseAccount.subscribe(databaseAccount => {
+    this.databaseAccount.subscribe((databaseAccount: ViewModels.DatabaseAccount) => {
       this.defaultExperience(DefaultExperienceUtility.getDefaultExperienceFromDatabaseAccount(databaseAccount));
     });
 
@@ -520,14 +509,6 @@ export default class Explorer {
       return false;
     });
 
-    this.isServerlessEnabled = ko.computed(
-      () =>
-        this.databaseAccount &&
-        this.databaseAccount()?.properties?.capabilities?.find(
-          item => item.name === Constants.CapabilityNames.EnableServerless
-        ) !== undefined
-    );
-
     this.isPreferredApiMongoDB = ko.computed(() => {
       const defaultExperience = (this.defaultExperience && this.defaultExperience()) || "";
       if (defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.MongoDB.toLowerCase()) {
@@ -563,9 +544,8 @@ export default class Explorer {
         defaultExperience &&
         defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase()
       ) {
-        this._isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
+        const api = new CassandraApi();
-          return database.id() === "system";
+        this._isSystemDatabasePredicate = api.isSystemDatabasePredicate;
-        };
       }
     });
 
@@ -595,6 +575,7 @@ export default class Explorer {
     });
 
     this.addDatabasePane = new AddDatabasePane({
+      documentClientUtility: this.documentClientUtility,
       id: "adddatabasepane",
       visible: ko.observable<boolean>(false),
 
@@ -603,6 +584,7 @@ export default class Explorer {
 
     this.addCollectionPane = new AddCollectionPane({
       isPreferredApiTable: ko.computed(() => this.isPreferredApiTable()),
+      documentClientUtility: this.documentClientUtility,
       id: "addcollectionpane",
       visible: ko.observable<boolean>(false),
 
@@ -610,6 +592,7 @@ export default class Explorer {
     });
 
     this.deleteCollectionConfirmationPane = new DeleteCollectionConfirmationPane({
+      documentClientUtility: this.documentClientUtility,
       id: "deletecollectionconfirmationpane",
       visible: ko.observable<boolean>(false),
 
@@ -617,6 +600,7 @@ export default class Explorer {
     });
 
     this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
+      documentClientUtility: this.documentClientUtility,
       id: "deletedatabaseconfirmationpane",
       visible: ko.observable<boolean>(false),
 
@@ -624,6 +608,7 @@ export default class Explorer {
     });
 
     this.graphStylingPane = new GraphStylingPane({
+      documentClientUtility: this.documentClientUtility,
       id: "graphstylingpane",
       visible: ko.observable<boolean>(false),
 
@@ -631,6 +616,7 @@ export default class Explorer {
     });
 
     this.addTableEntityPane = new AddTableEntityPane({
+      documentClientUtility: this.documentClientUtility,
       id: "addtableentitypane",
       visible: ko.observable<boolean>(false),
 
@@ -638,6 +624,7 @@ export default class Explorer {
     });
 
     this.editTableEntityPane = new EditTableEntityPane({
+      documentClientUtility: this.documentClientUtility,
       id: "edittableentitypane",
       visible: ko.observable<boolean>(false),
 
@@ -645,6 +632,7 @@ export default class Explorer {
     });
 
     this.tableColumnOptionsPane = new TableColumnOptionsPane({
+      documentClientUtility: this.documentClientUtility,
       id: "tablecolumnoptionspane",
       visible: ko.observable<boolean>(false),
 
@@ -652,6 +640,7 @@ export default class Explorer {
     });
 
     this.querySelectPane = new QuerySelectPane({
+      documentClientUtility: this.documentClientUtility,
       id: "queryselectpane",
       visible: ko.observable<boolean>(false),
 
@@ -659,6 +648,7 @@ export default class Explorer {
     });
 
     this.newVertexPane = new NewVertexPane({
+      documentClientUtility: this.documentClientUtility,
       id: "newvertexpane",
       visible: ko.observable<boolean>(false),
 
@@ -666,6 +656,7 @@ export default class Explorer {
     });
 
     this.cassandraAddCollectionPane = new CassandraAddCollectionPane({
+      documentClientUtility: this.documentClientUtility,
       id: "cassandraaddcollectionpane",
       visible: ko.observable<boolean>(false),
 
@@ -673,6 +664,7 @@ export default class Explorer {
     });
 
     this.settingsPane = new SettingsPane({
+      documentClientUtility: this.documentClientUtility,
       id: "settingspane",
       visible: ko.observable<boolean>(false),
 
@@ -680,6 +672,7 @@ export default class Explorer {
     });
 
     this.executeSprocParamsPane = new ExecuteSprocParamsPane({
+      documentClientUtility: this.documentClientUtility,
       id: "executesprocparamspane",
       visible: ko.observable<boolean>(false),
 
@@ -687,6 +680,7 @@ export default class Explorer {
     });
 
     this.renewAdHocAccessPane = new RenewAdHocAccessPane({
+      documentClientUtility: this.documentClientUtility,
       id: "renewadhocaccesspane",
       visible: ko.observable<boolean>(false),
 
@@ -694,6 +688,7 @@ export default class Explorer {
     });
 
     this.uploadItemsPane = new UploadItemsPane({
+      documentClientUtility: this.documentClientUtility,
       id: "uploaditemspane",
       visible: ko.observable<boolean>(false),
 
@@ -703,6 +698,7 @@ export default class Explorer {
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
+      documentClientUtility: this.documentClientUtility,
       id: "loadquerypane",
       visible: ko.observable<boolean>(false),
 
@@ -710,6 +706,7 @@ export default class Explorer {
     });
 
     this.saveQueryPane = new SaveQueryPane({
+      documentClientUtility: this.documentClientUtility,
       id: "savequerypane",
       visible: ko.observable<boolean>(false),
 
@@ -717,6 +714,7 @@ export default class Explorer {
     });
 
     this.browseQueriesPane = new BrowseQueriesPane({
+      documentClientUtility: this.documentClientUtility,
       id: "browsequeriespane",
       visible: ko.observable<boolean>(false),
 
@@ -724,6 +722,7 @@ export default class Explorer {
     });
 
     this.uploadFilePane = new UploadFilePane({
+      documentClientUtility: this.documentClientUtility,
       id: "uploadfilepane",
       visible: ko.observable<boolean>(false),
 
@@ -731,6 +730,7 @@ export default class Explorer {
     });
 
     this.stringInputPane = new StringInputPane({
+      documentClientUtility: this.documentClientUtility,
       id: "stringinputpane",
       visible: ko.observable<boolean>(false),
 
@@ -738,6 +738,7 @@ export default class Explorer {
     });
 
     this.setupNotebooksPane = new SetupNotebooksPane({
+      documentClientUtility: this.documentClientUtility,
       id: "setupnotebookspane",
       visible: ko.observable<boolean>(false),
 
@@ -770,6 +771,7 @@ export default class Explorer {
       this.setupNotebooksPane
     ];
     this.addDatabaseText.subscribe((addDatabaseText: string) => this.addDatabasePane.title(addDatabaseText));
+    this.rebindDocumentClientUtility.bind(this);
     this.isTabsContentExpanded = ko.observable(false);
 
     document.addEventListener(
@@ -851,7 +853,7 @@ export default class Explorer {
           this.editTableEntityPane.title("Edit Table Entity");
           this.deleteCollectionConfirmationPane.title("Delete Table");
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-          this.tableDataClient = new TablesAPIDataClient();
+          this.tableDataClient = new TablesAPIDataClient(this.documentClientUtility);
           break;
         case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
           this.addCollectionText("New Table");
@@ -870,7 +872,7 @@ export default class Explorer {
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
           this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
           this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
-          this.tableDataClient = new CassandraAPIDataClient();
+          this.tableDataClient = new CassandraAPIDataClient(this.documentClientUtility);
           break;
       }
     });
@@ -1016,7 +1018,7 @@ export default class Explorer {
         );
 
         try {
-          const databaseAccount: DataModels.DatabaseAccount = await resourceProviderClient.patchAsync(
+          const databaseAccount: ViewModels.DatabaseAccount = await resourceProviderClient.patchAsync(
             this.databaseAccount().id,
             "2019-12-12",
             {
@@ -1055,6 +1057,13 @@ export default class Explorer {
     // TODO: return result
   }
 
+  public rebindDocumentClientUtility(documentClientUtility: DocumentClientUtilityBase): void {
+    this.documentClientUtility = documentClientUtility;
+    this._panes.forEach((pane: ViewModels.ContextualPane) => {
+      pane.documentClientUtility = documentClientUtility;
+    });
+  }
+
   public copyUrlLink(src: any, event: MouseEvent): void {
     const urlLinkInput: HTMLInputElement = document.getElementById("shareUrlLink") as HTMLInputElement;
     urlLinkInput && urlLinkInput.select();
@@ -1373,7 +1382,7 @@ export default class Explorer {
     }
 
     const deferred: Q.Deferred<void> = Q.defer();
-    readCollection(databaseId, collectionId).then((collection: DataModels.Collection) => {
+    this.documentClientUtility.readCollection(databaseId, collectionId).then((collection: DataModels.Collection) => {
       this.resourceTokenCollection(new ResourceTokenCollection(this, databaseId, collection));
       this.selectedNode(this.resourceTokenCollection());
       deferred.resolve();
@@ -1397,97 +1406,87 @@ export default class Explorer {
         dataExplorerArea: Constants.Areas.ResourceTree
       });
     }
-
     // TODO: Refactor
     const deferred: Q.Deferred<any> = Q.defer();
+    const offerPromise: Q.Promise<DataModels.Offer[]> = this.documentClientUtility.readOffers();
+    this._setLoadingStatusText("Fetching offers...");
 
-    const refreshDatabases = (offers?: DataModels.Offer[]) => {
+    offerPromise.then(
-      this._setLoadingStatusText("Fetching databases...");
+      (offers: DataModels.Offer[]) => {
-      readDatabases(null /*options*/).then(
+        this._setLoadingStatusText("Successfully fetched offers.");
-        (databases: DataModels.Database[]) => {
+        this._setLoadingStatusText("Fetching databases...");
-          this._setLoadingStatusText("Successfully fetched databases.");
+        this.documentClientUtility.readDatabases(null /*options*/).then(
-          TelemetryProcessor.traceSuccess(
+          (databases: DataModels.Database[]) => {
-            Action.LoadDatabases,
+            this._setLoadingStatusText("Successfully fetched databases.");
-            {
+            TelemetryProcessor.traceSuccess(
-              databaseAccountName: this.databaseAccount().name,
+              Action.LoadDatabases,
-              defaultExperience: this.defaultExperience(),
+              {
-              dataExplorerArea: Constants.Areas.ResourceTree
+                databaseAccountName: this.databaseAccount().name,
-            },
+                defaultExperience: this.defaultExperience(),
-            startKey
+                dataExplorerArea: Constants.Areas.ResourceTree
-          );
-          const currentlySelectedNode: ViewModels.TreeNode = this.selectedNode();
-          const deltaDatabases = this.getDeltaDatabases(databases, offers);
-          this.addDatabasesToList(deltaDatabases.toAdd);
-          this.deleteDatabasesFromList(deltaDatabases.toDelete);
-          this.selectedNode(currentlySelectedNode);
-          this._setLoadingStatusText("Fetching containers...");
-          this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
-            .then(
-              () => {
-                this._setLoadingStatusText("Successfully fetched containers.");
-                deferred.resolve();
               },
-              reason => {
+              startKey
-                this._setLoadingStatusText("Failed to fetch containers.");
+            );
-                deferred.reject(reason);
+            const currentlySelectedNode: ViewModels.TreeNode = this.selectedNode();
-              }
+            const deltaDatabases = this.getDeltaDatabases(databases, offers);
-            )
+            this.addDatabasesToList(deltaDatabases.toAdd);
-            .finally(() => this.isRefreshingExplorer(false));
+            this.deleteDatabasesFromList(deltaDatabases.toDelete);
-        },
+            this.selectedNode(currentlySelectedNode);
-        error => {
+            this._setLoadingStatusText("Fetching containers...");
-          this._setLoadingStatusText("Failed to fetch databases.");
+            this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
-          this.isRefreshingExplorer(false);
+              .then(
-          deferred.reject(error);
+                () => {
-          TelemetryProcessor.traceFailure(
+                  this._setLoadingStatusText("Successfully fetched containers.");
-            Action.LoadDatabases,
+                  deferred.resolve();
-            {
+                },
-              databaseAccountName: this.databaseAccount().name,
+                reason => {
-              defaultExperience: this.defaultExperience(),
+                  this._setLoadingStatusText("Failed to fetch containers.");
-              dataExplorerArea: Constants.Areas.ResourceTree,
+                  deferred.reject(reason);
-              error: JSON.stringify(error)
+                }
-            },
+              )
-            startKey
+              .finally(() => this.isRefreshingExplorer(false));
-          );
+          },
-          NotificationConsoleUtils.logConsoleMessage(
+          error => {
-            ConsoleDataType.Error,
+            this._setLoadingStatusText("Failed to fetch databases.");
-            `Error while refreshing databases: ${JSON.stringify(error)}`
+            this.isRefreshingExplorer(false);
-          );
+            deferred.reject(error);
-        }
+            TelemetryProcessor.traceFailure(
-      );
+              Action.LoadDatabases,
-    };
+              {
-
+                databaseAccountName: this.databaseAccount().name,
-    if (this.isServerlessEnabled()) {
+                defaultExperience: this.defaultExperience(),
-      // Serverless accounts don't support offers call
+                dataExplorerArea: Constants.Areas.ResourceTree,
-      refreshDatabases();
+                error: JSON.stringify(error)
-    } else {
+              },
-      const offerPromise: Q.Promise<DataModels.Offer[]> = readOffers();
+              startKey
-      this._setLoadingStatusText("Fetching offers...");
+            );
-      offerPromise.then(
+            NotificationConsoleUtils.logConsoleMessage(
-        (offers: DataModels.Offer[]) => {
+              ConsoleDataType.Error,
-          this._setLoadingStatusText("Successfully fetched offers.");
+              `Error while refreshing databases: ${JSON.stringify(error)}`
-          refreshDatabases(offers);
+            );
-        },
+          }
-        error => {
+        );
-          this._setLoadingStatusText("Failed to fetch offers.");
+      },
-          this.isRefreshingExplorer(false);
+      error => {
-          deferred.reject(error);
+        this._setLoadingStatusText("Failed to fetch offers.");
-          TelemetryProcessor.traceFailure(
+        this.isRefreshingExplorer(false);
-            Action.LoadDatabases,
+        deferred.reject(error);
-            {
+        TelemetryProcessor.traceFailure(
-              databaseAccountName: this.databaseAccount().name,
+          Action.LoadDatabases,
-              defaultExperience: this.defaultExperience(),
+          {
-              dataExplorerArea: Constants.Areas.ResourceTree,
+            databaseAccountName: this.databaseAccount().name,
-              error: JSON.stringify(error)
+            defaultExperience: this.defaultExperience(),
-            },
+            dataExplorerArea: Constants.Areas.ResourceTree,
-            startKey
+            error: JSON.stringify(error)
-          );
+          },
-          NotificationConsoleUtils.logConsoleMessage(
+          startKey
-            ConsoleDataType.Error,
+        );
-            `Error while refreshing databases: ${JSON.stringify(error)}`
+        NotificationConsoleUtils.logConsoleMessage(
-          );
+          ConsoleDataType.Error,
-        }
+          `Error while refreshing databases: ${JSON.stringify(error)}`
-      );
+        );
-    }
+      }
+    );
 
     return deferred.promise.then(
       () => {
@@ -1536,7 +1535,7 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.ResourceTree
     });
     this.isRefreshingExplorer(true);
-    refreshCachedResources().then(
+    this.documentClientUtility.refreshCachedResources().then(
       () => {
         TelemetryProcessor.traceSuccess(
           Action.LoadDatabases,
@@ -1589,7 +1588,7 @@ export default class Explorer {
 
   public async getArcadiaToken(): Promise<string> {
     return new Promise<string>((resolve: (token: string) => void, reject: (error: any) => void) => {
-      sendCachedDataMessage<string>(MessageTypes.GetArcadiaToken, undefined /** params **/).then(
+      MessageHandler.sendCachedDataMessage<string>(MessageTypes.GetArcadiaToken, undefined /** params **/).then(
         (token: string) => {
           resolve(token);
         },
@@ -1627,11 +1626,11 @@ export default class Explorer {
   }
 
   public async createWorkspace(): Promise<string> {
-    return sendCachedDataMessage(MessageTypes.CreateWorkspace, undefined /** params **/);
+    return MessageHandler.sendCachedDataMessage(MessageTypes.CreateWorkspace, undefined /** params **/);
   }
 
   public async createSparkPool(workspaceId: string): Promise<string> {
-    return sendCachedDataMessage(MessageTypes.CreateSparkPool, [workspaceId]);
+    return MessageHandler.sendCachedDataMessage(MessageTypes.CreateSparkPool, [workspaceId]);
   }
 
   public async initNotebooks(databaseAccount: DataModels.DatabaseAccount): Promise<void> {
@@ -1827,7 +1826,7 @@ export default class Explorer {
         }
       }
       if (message.actionType === ActionContracts.ActionType.TransmitCachedData) {
-        handleCachedDataMessage(message);
+        MessageHandler.handleCachedDataMessage(message);
         return;
       }
       if (message.type) {
@@ -1964,7 +1963,7 @@ export default class Explorer {
     return _.find(selectedCollection.storedProcedures(), (storedProcedure: StoredProcedure) => {
       const openedSprocTab = this.tabsManager.getTabs(
         ViewModels.CollectionTabKind.StoredProcedures,
-        tab => tab.node && tab.node.rid === storedProcedure.rid
+        (tab: ViewModels.Tab) => tab.node && tab.node.rid === storedProcedure.rid
       );
       return (
         storedProcedure.rid === this.selectedNode().rid ||
@@ -1978,7 +1977,7 @@ export default class Explorer {
     return _.find(selectedCollection.userDefinedFunctions(), (userDefinedFunction: UserDefinedFunction) => {
       const openedUdfTab = this.tabsManager.getTabs(
         ViewModels.CollectionTabKind.UserDefinedFunctions,
-        tab => tab.node && tab.node.rid === userDefinedFunction.rid
+        (tab: ViewModels.Tab) => tab.node && tab.node.rid === userDefinedFunction.rid
       );
       return (
         userDefinedFunction.rid === this.selectedNode().rid ||
@@ -1992,7 +1991,7 @@ export default class Explorer {
     return _.find(selectedCollection.triggers(), (trigger: Trigger) => {
       const openedTriggerTab = this.tabsManager.getTabs(
         ViewModels.CollectionTabKind.Triggers,
-        tab => tab.node && tab.node.rid === trigger.rid
+        (tab: ViewModels.Tab) => tab.node && tab.node.rid === trigger.rid
       );
       return (
         trigger.rid === this.selectedNode().rid ||
@@ -2002,7 +2001,7 @@ export default class Explorer {
   }
 
   public closeAllPanes(): void {
-    this._panes.forEach((pane: ContextualPaneBase) => pane.close());
+    this._panes.forEach((pane: ViewModels.ContextualPane) => pane.close());
   }
 
   public getPlatformType(): PlatformType {
@@ -2017,13 +2016,13 @@ export default class Explorer {
     );
   }
 
-  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
+  public onUpdateTabsButtons(buttons: ViewModels.NavbarButtonConfig[]): void {
     this.commandBarComponentAdapter.onUpdateTabsButtons(buttons);
   }
 
   public signInAad = () => {
     TelemetryProcessor.trace(Action.SignInAad, undefined, { area: "Explorer" });
-    sendMessage({
+    MessageHandler.sendMessage({
       type: MessageTypes.AadSignIn
     });
   };
@@ -2034,21 +2033,21 @@ export default class Explorer {
   };
 
   public clickHostedAccountSwitch = () => {
-    sendMessage({
+    MessageHandler.sendMessage({
       type: MessageTypes.UpdateAccountSwitch,
       click: true
     });
   };
 
   public clickHostedDirectorySwitch = () => {
-    sendMessage({
+    MessageHandler.sendMessage({
       type: MessageTypes.UpdateDirectoryControl,
       click: true
     });
   };
 
   public refreshDatabaseAccount = () => {
-    sendMessage({
+    MessageHandler.sendMessage({
       type: MessageTypes.RefreshDatabaseAccount
     });
   };
@@ -2077,7 +2076,9 @@ export default class Explorer {
           if (isNewDatabase) {
             database.expandDatabase();
           }
-          this.tabsManager.refreshActiveTab(tab => tab.collection && tab.collection.getDatabase().rid === database.rid);
+          this.tabsManager.refreshActiveTab(
+            (tab: ViewModels.Tab) => tab.collection && tab.collection.getDatabase().rid === database.rid
+          );
         })
       );
     });
@@ -2180,7 +2181,7 @@ export default class Explorer {
     }
 
     const urlPrefixWithKeyParam: string = `${config.hostedExplorerURL}?key=`;
-    const currentActiveTab = this.tabsManager.activeTab();
+    const currentActiveTab: ViewModels.Tab = this.tabsManager.activeTab();
 
     return `${urlPrefixWithKeyParam}${token}#/${(currentActiveTab && currentActiveTab.hashLocation()) || ""}`;
   }
@@ -2346,9 +2347,9 @@ export default class Explorer {
     return Promise.resolve(false);
   }
 
-  public publishNotebook(name: string, content: string | unknown, parentDomElement: HTMLElement): void {
+  public publishNotebook(name: string, content: string): void {
     if (this.notebookManager) {
-      this.notebookManager.openPublishNotebookPane(name, content, parentDomElement);
+      this.notebookManager.openPublishNotebookPane(name, content);
       this.publishNotebookPaneAdapter = this.notebookManager.publishNotebookPaneAdapter;
       this.isPublishNotebookPaneEnabled(true);
     }
@@ -2443,23 +2444,25 @@ export default class Explorer {
       throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
     }
 
-    const notebookTabs = this.tabsManager.getTabs(
+    const notebookTabs: NotebookV2Tab[] = this.tabsManager.getTabs(
       ViewModels.CollectionTabKind.NotebookV2,
-      tab =>
+      (tab: ViewModels.Tab) =>
         (tab as NotebookV2Tab).notebookPath &&
         FileSystemUtil.isPathEqual((tab as NotebookV2Tab).notebookPath(), notebookContentItem.path)
     ) as NotebookV2Tab[];
-    let notebookTab = notebookTabs && notebookTabs[0];
+    let notebookTab: NotebookV2Tab = notebookTabs && notebookTabs[0];
 
     if (notebookTab) {
       this.tabsManager.activateTab(notebookTab);
     } else {
-      const options: NotebookTabOptions = {
+      const options: ViewModels.NotebookTabOptions = {
         account: CosmosClient.databaseAccount(),
         tabKind: ViewModels.CollectionTabKind.NotebookV2,
         node: null,
         title: notebookContentItem.name,
         tabPath: notebookContentItem.path,
+        documentClientUtility: null,
+
         collection: null,
         selfLink: null,
         masterKey: CosmosClient.masterKey() || "",
@@ -2518,7 +2521,7 @@ export default class Explorer {
         onSubmit: (input: string) => this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input)
       })
       .then(newNotebookFile => {
-        const notebookTabs = this.tabsManager.getTabs(
+        const notebookTabs: ViewModels.Tab[] = this.tabsManager.getTabs(
           ViewModels.CollectionTabKind.NotebookV2,
           (tab: NotebookV2Tab) => tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), originalPath)
         );
@@ -2606,11 +2609,7 @@ export default class Explorer {
 
   private async _refreshNotebooksEnabledStateForAccount(): Promise<void> {
     const authType = window.authType as AuthType;
-    if (
+    if (authType === AuthType.EncryptedToken || authType === AuthType.ResourceToken) {
-      authType === AuthType.EncryptedToken ||
-      authType === AuthType.ResourceToken ||
-      authType === AuthType.MasterKey
-    ) {
       this.isNotebooksEnabledForAccount(false);
       return;
     }
@@ -2892,7 +2891,7 @@ export default class Explorer {
 
     const terminalTabs: TerminalTab[] = this.tabsManager.getTabs(
       ViewModels.CollectionTabKind.Terminal,
-      tab => tab.hashLocation() == hashLocation
+      (tab: ViewModels.Tab) => tab.hashLocation() == hashLocation
     ) as TerminalTab[];
     let terminalTab: TerminalTab = terminalTabs && terminalTabs[0];
 
@@ -2905,6 +2904,8 @@ export default class Explorer {
         node: null,
         title: title,
         tabPath: title,
+        documentClientUtility: null,
+
         collection: null,
         selfLink: null,
         hashLocation: hashLocation,
@@ -2926,7 +2927,7 @@ export default class Explorer {
 
     const galleryTabs = this.tabsManager.getTabs(
       ViewModels.CollectionTabKind.Gallery,
-      tab => tab.hashLocation() == hashLocation
+      (tab: ViewModels.Tab) => tab.hashLocation() == hashLocation
     );
     let galleryTab = galleryTabs && galleryTabs[0];
 
@@ -2972,14 +2973,17 @@ export default class Explorer {
 
     const notebookViewerTabModule = this.notebookViewerTab;
 
-    let isNotebookViewerOpen = (tab: TabsBase) => {
+    let isNotebookViewerOpen = (tab: ViewModels.Tab) => {
       const notebookViewerTab = tab as typeof notebookViewerTabModule.default;
       return notebookViewerTab.notebookUrl === notebookUrl;
     };
 
-    const notebookViewerTabs = this.tabsManager.getTabs(ViewModels.CollectionTabKind.NotebookV2, tab => {
+    const notebookViewerTabs = this.tabsManager.getTabs(
-      return tab.hashLocation() == hashLocation && isNotebookViewerOpen(tab);
+      ViewModels.CollectionTabKind.NotebookV2,
-    });
+      (tab: ViewModels.Tab) => {
+        return tab.hashLocation() == hashLocation && isNotebookViewerOpen(tab);
+      }
+    );
     let notebookViewerTab = notebookViewerTabs && notebookViewerTabs[0];
 
     if (notebookViewerTab) {

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

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

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

@@ -1,4 +1,3 @@
-jest.mock("../../../Common/DocumentClientUtilityBase");
 import React from "react";
 import * as sinon from "sinon";
 import { mount, ReactWrapper } from "enzyme";
@@ -8,11 +7,11 @@ import { GraphExplorer, GraphExplorerProps, GraphAccessor, GraphHighlightedNodeD
 import * as D3ForceGraph from "./D3ForceGraph";
 import { GraphData } from "./GraphData";
 import { TabComponent } from "../../Controls/Tabs/TabComponent";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as StorageUtility from "../../../Shared/StorageUtility";
 import GraphTab from "../../Tabs/GraphTab";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import { queryDocuments, queryDocumentsPage } from "../../../Common/DocumentClientUtilityBase";
 
 describe("Check whether query result is vertex array", () => {
   it("should reject null as vertex array", () => {
@@ -135,7 +134,7 @@ describe("GraphExplorer", () => {
   const COLLECTION_SELF_LINK = "collectionSelfLink";
   const gremlinRU = 789.12;
 
-  const createMockProps = (): GraphExplorerProps => {
+  const createMockProps = (documentClientUtility?: any): GraphExplorerProps => {
     const graphConfig = GraphTab.createGraphConfig();
     const graphConfigUi = GraphTab.createGraphConfigUiData(graphConfig);
 
@@ -150,6 +149,7 @@ describe("GraphExplorer", () => {
       onIsValidQueryChange: (isValidQuery: boolean): void => {},
 
       collectionPartitionKeyProperty: "collectionPartitionKeyProperty",
+      documentClientUtility: documentClientUtility,
       collectionRid: COLLECTION_RID,
       collectionSelfLink: COLLECTION_SELF_LINK,
       graphBackendEndpoint: "graphBackendEndpoint",
@@ -188,6 +188,7 @@ describe("GraphExplorer", () => {
     let wrapper: ReactWrapper;
 
     let connectStub: sinon.SinonSpy;
+    let queryDocStub: sinon.SinonSpy;
     let submitToBackendSpy: sinon.SinonSpy;
     let renderResultAsJsonStub: sinon.SinonSpy;
     let onMiddlePaneInitializedStub: sinon.SinonSpy;
@@ -214,6 +215,46 @@ describe("GraphExplorer", () => {
       [query: string]: AjaxResponse;
     }
 
+    const createDocumentClientUtilityMock = (docDBResponse: AjaxResponse) => {
+      const mock = {
+        queryDocuments: () => {},
+        queryDocumentsPage: (
+          rid: string,
+          iterator: any,
+          firstItemIndex: number,
+          options: any
+        ): Q.Promise<ViewModels.QueryResults> => {
+          const qresult = {
+            hasMoreResults: false,
+            firstItemIndex: firstItemIndex,
+            lastItemIndex: 0,
+            itemCount: 0,
+            documents: docDBResponse.response,
+            activityId: "",
+            headers: [] as any[],
+            requestCharge: gVRU
+          };
+
+          return Q.resolve(qresult);
+        }
+      };
+
+      const fakeIterator: any = {
+        nextItem: (callback: (error: any, document: DataModels.DocumentId) => void): void => {},
+        hasMoreResults: () => false,
+        executeNext: (callback: (error: any, documents: DataModels.DocumentId[], headers: any) => void): void => {}
+      };
+
+      queryDocStub = sinon.stub(mock, "queryDocuments").callsFake(
+        (container: ViewModels.DocumentRequestContainer, query: string, options: any): Q.Promise<any> => {
+          (fakeIterator as any)._query = query;
+          return Q.resolve(fakeIterator);
+        }
+      );
+
+      return mock;
+    };
+
     const setupMocks = (
       graphExplorer: GraphExplorer,
       backendResponses: BackendResponses,
@@ -292,29 +333,7 @@ describe("GraphExplorer", () => {
       done: any,
       ignoreD3Update: boolean
     ): GraphExplorer => {
-      (queryDocuments as jest.Mock).mockImplementation((container: any, query: string, options: any) => {
+      const props: GraphExplorerProps = createMockProps(createDocumentClientUtilityMock(docDBResponse));
-        return Q.resolve({
-          _query: query,
-          nextItem: (callback: (error: any, document: DataModels.DocumentId) => void): void => {},
-          hasMoreResults: () => false,
-          executeNext: (callback: (error: any, documents: DataModels.DocumentId[], headers: any) => void): void => {}
-        });
-      });
-      (queryDocumentsPage as jest.Mock).mockImplementation(
-        (rid: string, iterator: any, firstItemIndex: number, options: any) => {
-          return Q.resolve({
-            hasMoreResults: false,
-            firstItemIndex: firstItemIndex,
-            lastItemIndex: 0,
-            itemCount: 0,
-            documents: docDBResponse.response,
-            activityId: "",
-            headers: [] as any[],
-            requestCharge: gVRU
-          });
-        }
-      );
-      const props: GraphExplorerProps = createMockProps();
       wrapper = mount(<GraphExplorer {...props} />);
       graphExplorerInstance = wrapper.instance() as GraphExplorer;
       setupMocks(graphExplorerInstance, backendResponses, done, ignoreD3Update);
@@ -322,7 +341,7 @@ describe("GraphExplorer", () => {
     };
 
     const cleanUpStubsWrapper = () => {
-      jest.resetAllMocks();
+      queryDocStub.restore();
       connectStub.restore();
       submitToBackendSpy.restore();
       renderResultAsJsonStub.restore();
@@ -359,11 +378,22 @@ describe("GraphExplorer", () => {
         expect((graphExplorerInstance.submitToBackend as sinon.SinonSpy).calledWith("g.V()")).toBe(false);
       });
 
+      it("should submit g.V() as docdb query with proper query", () => {
+        expect(
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[2]
+        ).toBe(DOCDB_G_DOT_V_QUERY);
+      });
+
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+        expect(
-          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[0]
-          enableCrossPartitionQuery: true
+        ).toEqual("databaseId");
-        });
+        expect(
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[1]
+        ).toEqual("collectionId");
+        expect(
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[3]
+        ).toEqual({ maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE, enableCrossPartitionQuery: true });
       });
 
       it("should call backend thrice (user query, fetch outE, then fetch inE)", () => {
@@ -396,11 +426,22 @@ describe("GraphExplorer", () => {
         expect((graphExplorerInstance.submitToBackend as sinon.SinonSpy).calledWith("g.V()")).toBe(false);
       });
 
+      it("should submit g.V() as docdb query with proper query", () => {
+        expect(
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[2]
+        ).toBe(DOCDB_G_DOT_V_QUERY);
+      });
+
       it("should submit g.V() as docdb query with proper parameters", () => {
-        expect(queryDocuments).toBeCalledWith("databaseId", "collectionId", DOCDB_G_DOT_V_QUERY, {
+        expect(
-          maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE,
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[0]
-          enableCrossPartitionQuery: true
+        ).toEqual("databaseId");
-        });
+        expect(
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[1]
+        ).toEqual("collectionId");
+        expect(
+          (graphExplorerInstance.props.documentClientUtility.queryDocuments as sinon.SinonSpy).getCall(0).args[3]
+        ).toEqual({ maxItemCount: GraphExplorer.ROOT_LIST_PAGE_SIZE, enableCrossPartitionQuery: true });
       });
 
       it("should call backend thrice (user query, fetch outE, then fetch inE)", () => {

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

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

src/Explorer/Graph/GraphExplorerComponent/GraphExplorerAdapter.tsx

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

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

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

src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts

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

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

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

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

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

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts

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

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

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

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

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

src/Explorer/Menus/NavBar/ControlBarComponent.tsx

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

src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx

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

src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx

@@ -8,7 +8,6 @@ import { actions, createContentRef, createKernelRef, selectors } from "@nteract/
 import VirtualCommandBarComponent from "./VirtualCommandBarComponent";
 import { NotebookContentItem } from "../NotebookContentItem";
 import { NotebookComponentBootstrapper } from "./NotebookComponentBootstrapper";
-import { CdbAppState } from "./types";
 
 export interface NotebookComponentAdapterOptions {
   contentItem: NotebookContentItem;
@@ -19,7 +18,6 @@ export interface NotebookComponentAdapterOptions {
 
 export class NotebookComponentAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
   private onUpdateKernelInfo: () => void;
-  public getNotebookParentElement: () => HTMLElement;
   public parameters: any;
 
   constructor(options: NotebookComponentAdapterOptions) {
@@ -46,11 +44,6 @@ export class NotebookComponentAdapter extends NotebookComponentBootstrapper impl
         })
       );
     }
-
-    this.getNotebookParentElement = () => {
-      const cdbAppState = this.getStore().getState() as CdbAppState;
-      return cdbAppState.cdb.currentNotebookParentElements.get(this.contentRef);
-    };
   }
 
   protected renderExtraComponent = (): JSX.Element => {

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -17,7 +17,7 @@ import {
 } from "@nteract/core";
 import * as Immutable from "immutable";
 import { Provider } from "react-redux";
-import { CellType, CellId, ImmutableNotebook } from "@nteract/commutable";
+import { CellType, CellId, toJS } from "@nteract/commutable";
 import { Store, AnyAction } from "redux";
 
 import "./NotebookComponent.less";
@@ -71,14 +71,14 @@ export class NotebookComponentBootstrapper {
     );
   }
 
-  public getContent(): { name: string; content: string | ImmutableNotebook } {
+  public getContent(): { name: string; content: string } {
     const record = this.getStore()
       .getState()
       .core.entities.contents.byRef.get(this.contentRef);
-    let content: string | ImmutableNotebook;
+    let content: string;
     switch (record.model.type) {
       case "notebook":
-        content = record.model.notebook;
+        content = JSON.stringify(toJS(record.model.notebook));
         break;
       case "file":
         content = record.model.text;

src/Explorer/Notebook/NotebookComponent/actions.ts

@@ -84,22 +84,3 @@ export const traceNotebookTelemetry = (payload: {
     payload
   };
 };
-
-export const UPDATE_NOTEBOOK_PARENT_DOM_ELTS = "UPDATE_NOTEBOOK_PARENT_DOM_ELTS";
-export interface UpdateNotebookParentDomEltAction {
-  type: "UPDATE_NOTEBOOK_PARENT_DOM_ELTS";
-  payload: {
-    contentRef: ContentRef;
-    parentElt: HTMLElement;
-  };
-}
-
-export const UpdateNotebookParentDomElt = (payload: {
-  contentRef: ContentRef;
-  parentElt: HTMLElement;
-}): UpdateNotebookParentDomEltAction => {
-  return {
-    type: UPDATE_NOTEBOOK_PARENT_DOM_ELTS,
-    payload
-  };
-};

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -34,7 +34,7 @@ import { sessions, kernels } from "rx-jupyter";
 import { RecordOf } from "immutable";
 
 import * as Constants from "../../../Common/Constants";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as CdbActions from "./actions";
 import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";

src/Explorer/Notebook/NotebookComponent/reducers.ts

@@ -82,19 +82,6 @@ export const cdbReducer = (state: CdbRecord, action: Action) => {
       });
       return state;
     }
-
-    case cdbActions.UPDATE_NOTEBOOK_PARENT_DOM_ELTS: {
-      const typedAction = action as cdbActions.UpdateNotebookParentDomEltAction;
-      var parentEltsMap = state.get("currentNotebookParentElements");
-      const contentRef = typedAction.payload.contentRef;
-      const parentElt = typedAction.payload.parentElt;
-      if (parentElt) {
-        parentEltsMap.set(contentRef, parentElt);
-      } else {
-        parentEltsMap.delete(contentRef);
-      }
-      return state.set("currentNotebookParentElements", parentEltsMap);
-    }
   }
   return state;
 };

src/Explorer/Notebook/NotebookComponent/types.ts

@@ -1,5 +1,5 @@
 import * as Immutable from "immutable";
-import { AppState, ContentRef } from "@nteract/core";
+import { AppState } from "@nteract/core";
 
 import { Notebook } from "../../../Common/Constants";
 import { CellId } from "@nteract/commutable";
@@ -9,7 +9,6 @@ export interface CdbRecordProps {
   defaultExperience: string | undefined;
   kernelRestartDelayMs: number;
   hoveredCellId: CellId | undefined;
-  currentNotebookParentElements: Map<ContentRef, HTMLElement>;
 }
 
 export type CdbRecord = Immutable.RecordOf<CdbRecordProps>;
@@ -22,6 +21,5 @@ export const makeCdbRecord = Immutable.Record<CdbRecordProps>({
   databaseAccountName: undefined,
   defaultExperience: undefined,
   kernelRestartDelayMs: Notebook.kernelRestartInitialDelayMs,
-  hoveredCellId: undefined,
+  hoveredCellId: undefined
-  currentNotebookParentElements: new Map<ContentRef, HTMLElement>()
 });

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -2,12 +2,13 @@
  * Notebook container related stuff
  */
 import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
 import * as Constants from "../../Common/Constants";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import * as Logger from "../../Common/Logger";
 
-export class NotebookContainerClient {
+export class NotebookContainerClient implements ViewModels.INotebookContainerClient {
   private reconnectingNotificationId: string;
   private isResettingWorkspace: boolean;
 

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,4 +1,5 @@
 import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
 import { StringUtils } from "../../Utils/StringUtils";
 import { FileSystemUtil } from "./FileSystemUtil";
@@ -8,7 +9,7 @@ import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } fro
 import { AjaxResponse } from "rxjs/ajax";
 import { stringifyNotebook } from "@nteract/commutable";
 
-export class NotebookContentClient {
+export class NotebookContentClient implements ViewModels.INotebookContentClient {
   constructor(
     private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,
     private notebookBasePath: ko.Observable<string>,

src/Explorer/Notebook/NotebookManager.ts

@@ -3,6 +3,7 @@
  */
 
 import { JunoClient } from "../../Juno/JunoClient";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
 import { GitHubClient } from "../../GitHub/GitHubClient";
 import * as Logger from "../../Common/Logger";
@@ -22,9 +23,7 @@ import { DialogProps } from "../Controls/DialogReactComponent/DialogComponent";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
 import { getFullName } from "../../Utils/UserUtils";
-import { ImmutableNotebook } from "@nteract/commutable";
 import Explorer from "../Explorer";
-import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
 
 export interface NotebookManagerOptions {
   container: Explorer;
@@ -40,14 +39,14 @@ export default class NotebookManager {
   public junoClient: JunoClient;
 
   public notebookContentProvider: IContentProvider;
-  public notebookClient: NotebookContainerClient;
+  public notebookClient: ViewModels.INotebookContainerClient;
-  public notebookContentClient: NotebookContentClient;
+  public notebookContentClient: ViewModels.INotebookContentClient;
 
   private gitHubContentProvider: GitHubContentProvider;
   public gitHubOAuthService: GitHubOAuthService;
   private gitHubClient: GitHubClient;
 
-  public gitHubReposPane: ContextualPaneBase;
+  public gitHubReposPane: ViewModels.ContextualPane;
   public publishNotebookPaneAdapter: PublishNotebookPaneAdapter;
 
   public initialize(params: NotebookManagerOptions): void {
@@ -57,6 +56,7 @@ export default class NotebookManager {
     this.gitHubOAuthService = new GitHubOAuthService(this.junoClient);
     this.gitHubClient = new GitHubClient(this.onGitHubClientError);
     this.gitHubReposPane = new GitHubReposPane({
+      documentClientUtility: this.params.container.documentClientUtility,
       id: "gitHubReposPane",
       visible: ko.observable<boolean>(false),
       container: this.params.container,
@@ -108,12 +108,8 @@ export default class NotebookManager {
     this.junoClient.getPinnedRepos(this.gitHubOAuthService.getTokenObservable()()?.scope);
   }
 
-  public openPublishNotebookPane(
+  public openPublishNotebookPane(name: string, content: string): void {
-    name: string,
+    this.publishNotebookPaneAdapter.open(name, getFullName(), content);
-    content: string | ImmutableNotebook,
-    parentDomElement: HTMLElement
-  ): void {
-    this.publishNotebookPaneAdapter.open(name, getFullName(), content, parentDomElement);
   }
 
   // Octokit's error handler uses any

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -49,7 +49,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
                   editor: {
                     codemirror: (props: PassedEditorProps) =>
                       this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
-                  }
+                  },
+                  prompt: ({ id, contentRef }) => <></>
                 }}
               </CodeCell>
             ),

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -30,18 +30,11 @@ import { CellType } from "@nteract/commutable/src";
 import "./NotebookRenderer.less";
 import HoverableCell from "./decorators/HoverableCell";
 import CellLabeler from "./decorators/CellLabeler";
-import * as cdbActions from "../NotebookComponent/actions";
 
-export interface NotebookRendererBaseProps {
+export interface NotebookRendererProps {
   contentRef: any;
 }
 
-interface NotebookRendererDispatchProps {
-  updateNotebookParentDomElt: (contentRef: ContentRef, parentElt: HTMLElement) => void;
-}
-
-type NotebookRendererProps = NotebookRendererBaseProps & NotebookRendererDispatchProps;
-
 interface PassedEditorProps {
   id: string;
   contentRef: ContentRef;
@@ -75,8 +68,6 @@ const decorate = (id: string, contentRef: ContentRef, cell_type: CellType, child
 };
 
 class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
-  private notebookRendererRef = React.createRef<HTMLDivElement>();
-
   constructor(props: NotebookRendererProps) {
     super(props);
 
@@ -87,22 +78,13 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
 
   componentDidMount() {
     loadTransform(this.props as any);
-    this.props.updateNotebookParentDomElt(this.props.contentRef, this.notebookRendererRef.current);
-  }
-
-  componentDidUpdate() {
-    this.props.updateNotebookParentDomElt(this.props.contentRef, this.notebookRendererRef.current);
-  }
-
-  componentWillUnmount() {
-    this.props.updateNotebookParentDomElt(this.props.contentRef, undefined);
   }
 
   render(): JSX.Element {
     return (
       <>
         <div className="NotebookRendererContainer">
-          <div className="NotebookRenderer" ref={this.notebookRendererRef}>
+          <div className="NotebookRenderer">
             <DndProvider backend={HTML5Backend}>
               <KeyboardShortcuts contentRef={this.props.contentRef}>
                 <Cells contentRef={this.props.contentRef}>
@@ -164,7 +146,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
   }
 }
 
-const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: NotebookRendererBaseProps) => {
+const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: NotebookRendererProps) => {
   const mapDispatchToProps = (dispatch: Dispatch) => {
     return {
       addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
@@ -174,14 +156,6 @@ const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: Noteboo
             component: transform
           })
         );
-      },
-      updateNotebookParentDomElt: (contentRef: ContentRef, parentElt: HTMLElement) => {
-        return dispatch(
-          cdbActions.UpdateNotebookParentDomElt({
-            contentRef,
-            parentElt
-          })
-        );
       }
     };
   };

src/Explorer/Notebook/NotebookUtil.test.ts

@@ -1,15 +1,5 @@
 import { NotebookUtil } from "./NotebookUtil";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
-import {
-  ImmutableNotebook,
-  MediaBundle,
-  CodeCellParams,
-  MarkdownCellParams,
-  makeCodeCell,
-  makeMarkdownCell,
-  makeNotebookRecord
-} from "@nteract/commutable";
-import { List, Map } from "immutable";
 
 const fileName = "file";
 const notebookName = "file.ipynb";
@@ -17,57 +7,6 @@ const filePath = `folder/${fileName}`;
 const notebookPath = `folder/${notebookName}`;
 const gitHubFileUri = GitHubUtils.toContentUri("owner", "repo", "branch", filePath);
 const gitHubNotebookUri = GitHubUtils.toContentUri("owner", "repo", "branch", notebookPath);
-const notebookRecord = makeNotebookRecord({
-  cellOrder: List.of("0", "1", "2", "3"),
-  cellMap: Map({
-    "0": makeMarkdownCell({
-      cell_type: "markdown",
-      source: "abc",
-      metadata: undefined
-    } as MarkdownCellParams),
-    "1": makeCodeCell({
-      cell_type: "code",
-      execution_count: undefined,
-      metadata: undefined,
-      source: "print(5)",
-      outputs: List.of({
-        name: "stdout",
-        output_type: "stream",
-        text: "5"
-      })
-    } as CodeCellParams),
-    "2": makeCodeCell({
-      cell_type: "code",
-      execution_count: undefined,
-      metadata: undefined,
-      source: 'display(HTML("<h1>Sample html</h1>"))',
-      outputs: List.of({
-        data: Object.freeze({
-          data: {
-            "text/html": "<h1>Sample output</h1>",
-            "text/plain": "<IPython.core.display.HTML object>"
-          }
-        } as MediaBundle),
-        output_type: "display_data",
-        metadata: undefined
-      })
-    } as CodeCellParams),
-    "3": makeCodeCell({
-      cell_type: "code",
-      execution_count: undefined,
-      metadata: undefined,
-      source: 'print("hello world")',
-      outputs: List.of({
-        name: "stdout",
-        output_type: "stream",
-        text: "hello world"
-      })
-    } as CodeCellParams)
-  }),
-  nbformat_minor: 2,
-  nbformat: 2,
-  metadata: undefined
-});
 
 describe("NotebookUtil", () => {
   describe("isNotebookFile", () => {
@@ -107,11 +46,4 @@ describe("NotebookUtil", () => {
       );
     });
   });
-
-  describe("findFirstCodeCellWithDisplay", () => {
-    it("works for Notebook file", () => {
-      const notebookObject = notebookRecord as ImmutableNotebook;
-      expect(NotebookUtil.findFirstCodeCellWithDisplay(notebookObject)).toEqual(1);
-    });
-  });
 });

src/Explorer/Notebook/NotebookUtil.ts

@@ -1,5 +1,5 @@
 import path from "path";
-import { ImmutableNotebook, ImmutableCodeCell, ImmutableOutput } from "@nteract/commutable";
+import { ImmutableNotebook } from "@nteract/commutable";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
 import { StringUtils } from "../../Utils/StringUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
@@ -100,30 +100,4 @@ export class NotebookUtil {
     const basePath = path.split(contentName).shift();
     return `${basePath}${newName}`;
   }
-
-  public static findFirstCodeCellWithDisplay(notebookObject: ImmutableNotebook): number {
-    let codeCellCount = -1;
-    for (let i = 0; i < notebookObject.cellOrder.size; i++) {
-      const cellId = notebookObject.cellOrder.get(i);
-      if (cellId) {
-        const cell = notebookObject.cellMap.get(cellId);
-        if (cell && cell.cell_type === "code") {
-          codeCellCount++;
-          const codeCell = cell as ImmutableCodeCell;
-          if (codeCell.outputs) {
-            const displayOutput = codeCell.outputs.find((output: ImmutableOutput) => {
-              if (output.output_type === "display_data" || output.output_type === "execute_result") {
-                return true;
-              }
-              return false;
-            });
-            if (displayOutput) {
-              return codeCellCount;
-            }
-          }
-        }
-      }
-    }
-    throw new Error("Output does not exist for any of the cells.");
-  }
 }

src/Explorer/Panes/AddCollectionPane.html

@@ -56,7 +56,7 @@
   <!-- Add collection errors - End -->
 
   <!-- upsell message - start -->
-  <div class="infoBoxContainer" aria-live="assertive" data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()">
+  <div class="infoBoxContainer" aria-live="assertive" data-bind="visible: formErrors && !formErrors()">
       <div class="infoBoxContent">
           <span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo"></span>
           <span class="infoBoxDetails">
@@ -112,9 +112,7 @@
           <datalist id="databasesList" data-bind="foreach: databaseIds" data-bind="visible: databaseCreateNew">
               <option data-bind="value: $data">
           </datalist>
-
           <!-- Database provisioned throughput - Start -->
-          <!-- ko if: canConfigureThroughput -->
           <div class="databaseProvision" aria-label="New database provision support"
               data-bind="visible: databaseCreateNew">
               <input tabindex="0" type="checkbox" data-test="addCollectionPane-databaseSharedThroughput"
@@ -189,7 +187,6 @@
               </throughput-input>
           </div>
           <!-- /ko -->
-          <!-- /ko -->
           <!-- Database provisioned throughput - End -->
       </div>
 
@@ -417,10 +414,7 @@
                           more</a></p>
               </div>
               <!-- large parition key - end -->
-
+              <!-- Provision collection throughput checkox - start -->
-              <!-- Provision collection throughput - start -->
-              <!-- ko if: canConfigureThroughput -->
-              <!-- Provision collection throughput checkbox - start -->
               <div class="pkPadding" data-bind="visible: databaseHasSharedOffer() && !databaseCreateNew()">
                   <input type="checkbox" id="collectionSharedThroughput"
                       data-bind="checked: collectionWithThroughputInShared, attr: {title:collectionWithThroughputInSharedTitle}" />
@@ -440,8 +434,7 @@
                           level.</span>
                   </span>
               </div>
-              <!-- Provision collection throughput checkbox - end -->
+              <!-- Provision collection throughput checkox - end -->
-
               <!-- Provision collection throughput spinner - start -->
               <!-- ko if: hasAutoPilotV2FeatureFlag && !hasAutoPilotV2FeatureFlag() -->
               <div data-bind="visible: displayCollectionThroughput" data-test="addCollection-displayCollectionThroughput">
@@ -474,7 +467,6 @@
                   </throughput-input-autopilot-v3>
               </div>
               <!-- /ko -->
-
               <!-- ko if: hasAutoPilotV2FeatureFlag && hasAutoPilotV2FeatureFlag() -->
               <div data-bind="visible: displayCollectionThroughput" data-test="addCollection-displayCollectionThroughput">
                   <!-- 3 -->
@@ -507,10 +499,8 @@
                   </throughput-input>
               </div>
               <!-- /ko -->
-              <!-- Provision collection throughput spinner - end -->
-              <!-- /ko -->
-              <!-- Provision collection throughput - end -->
 
+              <!-- Provision collection throughput spinner - end -->
               <!-- Enable analytical storage - start -->
               <div class="enableAnalyticalStorage pkPadding" aria-label="Enable Analytical Store"
                   data-bind="visible: isSynapseLinkSupported">

src/Explorer/Panes/AddCollectionPane.test.ts

@@ -1,13 +1,14 @@
 import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
 import AddCollectionPane from "./AddCollectionPane";
 import Explorer from "../Explorer";
 import ko from "knockout";
-import { AutopilotTier, DatabaseAccount } from "../../Contracts/DataModels";
+import { AutopilotTier } from "../../Contracts/DataModels";
 
 describe("Add Collection Pane", () => {
   describe("isValid()", () => {
     let explorer: Explorer;
-    const mockDatabaseAccount: DatabaseAccount = {
+    const mockDatabaseAccount: ViewModels.DatabaseAccount = {
       id: "mock",
       kind: "DocumentDB",
       location: "",
@@ -23,7 +24,7 @@ describe("Add Collection Pane", () => {
       tags: []
     };
 
-    const mockFreeTierDatabaseAccount: DatabaseAccount = {
+    const mockFreeTierDatabaseAccount: ViewModels.DatabaseAccount = {
       id: "mock",
       kind: "DocumentDB",
       location: "",
@@ -40,7 +41,7 @@ describe("Add Collection Pane", () => {
     };
 
     beforeEach(() => {
-      explorer = new Explorer({ notificationsClient: null, isEmulator: false });
+      explorer = new Explorer({ documentClientUtility: null, notificationsClient: null, isEmulator: false });
       explorer.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
     });
 

src/Explorer/Panes/AddCollectionPane.ts

@@ -20,13 +20,6 @@ import { createMongoCollectionWithARM, createMongoCollectionWithProxy } from "..
 import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
 import { HashMap } from "../../Common/HashMap";
 import { PlatformType } from "../../PlatformType";
-import { refreshCachedResources, getOrCreateDatabaseAndCollection } from "../../Common/DocumentClientUtilityBase";
-
-export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
-  isPreferredApiTable: ko.Computed<boolean>;
-  databaseId?: string;
-  databaseSelfLink?: string;
-}
 
 export default class AddCollectionPane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
@@ -100,19 +93,15 @@ export default class AddCollectionPane extends ContextualPaneBase {
   public canExceedMaximumValue: ko.PureComputed<boolean>;
   public hasAutoPilotV2FeatureFlag: ko.PureComputed<boolean>;
   public ruToolTipText: ko.Computed<string>;
-  public canConfigureThroughput: ko.PureComputed<boolean>;
-  public showUpsellMessage: ko.PureComputed<boolean>;
 
   private _databaseOffers: HashMap<DataModels.Offer>;
   private _isSynapseLinkEnabled: ko.Computed<boolean>;
 
-  constructor(options: AddCollectionPaneOptions) {
+  constructor(options: ViewModels.AddCollectionPaneOptions) {
     super(options);
     this._databaseOffers = new HashMap<DataModels.Offer>();
     this.hasAutoPilotV2FeatureFlag = ko.pureComputed(() => this.container.hasAutoPilotV2FeatureFlag());
     this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText(this.hasAutoPilotV2FeatureFlag()));
-    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
-    this.showUpsellMessage = ko.pureComputed(() => !this.container.isServerlessEnabled());
     this.formWarnings = ko.observable<string>();
     this.collectionId = ko.observable<string>();
     this.databaseId = ko.observable<string>();
@@ -602,11 +591,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
       if (config.platform === Platform.Emulator) {
         return false;
       }
-
-      if (this.container.isServerlessEnabled()) {
-        return false;
-      }
-
       if (this.container.isPreferredApiDocumentDB()) {
         return true;
       }
@@ -625,7 +609,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this._isSynapseLinkEnabled = ko.computed(() => {
       const databaseAccount =
         (this.container && this.container.databaseAccount && this.container.databaseAccount()) ||
-        ({} as DataModels.DatabaseAccount);
+        ({} as ViewModels.DatabaseAccount);
       const properties = databaseAccount.properties || ({} as DataModels.DatabaseAccountExtendedProperties);
 
       // TODO: remove check for capability once all accounts have been migrated
@@ -739,19 +723,10 @@ export default class AddCollectionPane extends ContextualPaneBase {
   }
 
   private _computeOfferThroughput(): number {
-    if (!this.canConfigureThroughput()) {
+    if (this.databaseCreateNewShared()) {
-      return undefined;
+      return this.isSharedAutoPilotSelected() ? undefined : this._getThroughput();
     }
-
+    return this.isAutoPilotSelected() ? undefined : this._getThroughput();
-    if (this.isAutoPilotSelected()) {
-      return undefined;
-    }
-
-    if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
-      return undefined;
-    }
-
-    return this._getThroughput();
   }
 
   public submit() {
@@ -948,7 +923,8 @@ export default class AddCollectionPane extends ContextualPaneBase {
           )
         );
     } else {
-      createCollectionFunc = () => getOrCreateDatabaseAndCollection(createRequest, options);
+      createCollectionFunc = () =>
+        this.container.documentClientUtility.getOrCreateDatabaseAndCollection(createRequest, options);
     }
 
     createCollectionFunc().then(
@@ -984,7 +960,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
         };
         TelemetryProcessor.traceSuccess(Action.CreateCollection, addCollectionPaneSuccessMessage, startKey);
         this.resetData();
-        return refreshCachedResources().then(() => {
+        return this.container.documentClientUtility.refreshCachedResources().then(() => {
           this.container.refreshAllDatabases();
         });
       },
@@ -1272,7 +1248,10 @@ export default class AddCollectionPane extends ContextualPaneBase {
       : SharedConstants.CollectionCreation.NumberOfPartitionsInUnlimitedCollection;
   }
 
-  private _convertShardKeyToPartitionKey(shardKey: string): string {
+  private _convertShardKeyToPartitionKey(
+    shardKey: string,
+    configurationOverrides: ViewModels.ConfigurationOverrides
+  ): string {
     if (!shardKey) {
       return shardKey;
     }
@@ -1334,7 +1313,10 @@ export default class AddCollectionPane extends ContextualPaneBase {
     };
     if (this.container.isPreferredApiMongoDB()) {
       transform = (value: string) => {
-        return this._convertShardKeyToPartitionKey(value);
+        return this._convertShardKeyToPartitionKey(
+          value,
+          this.container.databaseAccount().properties.configurationOverrides
+        );
       };
     }
 

src/Explorer/Panes/AddDatabasePane.html

@@ -48,7 +48,7 @@
   <!-- Add database errors - End -->
 
   <!-- upsell message - start -->
-  <div class="infoBoxContainer" aria-live="assertive" data-bind="visible: showUpsellMessage && showUpsellMessage() && formErrors && !formErrors()">
+  <div class="infoBoxContainer" aria-live="assertive" data-bind="visible: formErrors && !formErrors()">
       <div class="infoBoxContent">
           <span><img class="infoBoxIcon" src="/info_color.svg" alt="Promo"></span>
           <span class="infoBoxDetails">
@@ -76,9 +76,6 @@
               title="May not end with space nor contain characters '\' '/' '#' '?'" placeholder="Type a new database id"
               size="40" class="collid" data-bind="textInput: databaseId, hasFocus: firstFieldHasFocus"
               aria-label="Database id" autofocus>
-
-          <!-- Database provisioned throughput - Start -->
-          <!-- ko if: canConfigureThroughput -->
           <div class="databaseProvision" aria-label="New database provision support">
               <input tabindex="0" type="checkbox" id="addDatabasePane-databaseSharedThroughput"
                   title="Provision shared throughput" data-bind="checked: databaseCreateNewShared" />
@@ -159,7 +156,6 @@
                       support</a> for more than <span data-bind="text: maxThroughputRUText"></span> RU/s.</p>
           </div>
           <!-- /ko -->
-          <!-- /ko -->
           <!-- Database provisioned throughput - End -->
       </div>
   </div>

src/Explorer/Panes/AddDatabasePane.test.ts

@@ -2,12 +2,11 @@ import * as Constants from "../../Common/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
 import Explorer from "../Explorer";
 import AddDatabasePane from "./AddDatabasePane";
-import { DatabaseAccount } from "../../Contracts/DataModels";
 
 describe("Add Database Pane", () => {
   describe("getSharedThroughputDefault()", () => {
     let explorer: Explorer;
-    const mockDatabaseAccount: DatabaseAccount = {
+    const mockDatabaseAccount: ViewModels.DatabaseAccount = {
       id: "mock",
       kind: "DocumentDB",
       location: "",
@@ -23,7 +22,7 @@ describe("Add Database Pane", () => {
       tags: []
     };
 
-    const mockFreeTierDatabaseAccount: DatabaseAccount = {
+    const mockFreeTierDatabaseAccount: ViewModels.DatabaseAccount = {
       id: "mock",
       kind: "DocumentDB",
       location: "",
@@ -41,6 +40,7 @@ describe("Add Database Pane", () => {
 
     beforeEach(() => {
       explorer = new Explorer({
+        documentClientUtility: null,
         notificationsClient: null,
         isEmulator: false
       });

src/Explorer/Panes/AddDatabasePane.ts

@@ -16,7 +16,6 @@ import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { CosmosClient } from "../../Common/CosmosClient";
 import { PlatformType } from "../../PlatformType";
-import { refreshCachedOffers, refreshCachedResources, createDatabase } from "../../Common/DocumentClientUtilityBase";
 
 export default class AddDatabasePane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
@@ -50,8 +49,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
   public hasAutoPilotV2FeatureFlag: ko.PureComputed<boolean>;
   public ruToolTipText: ko.Computed<string>;
   public isFreeTierAccount: ko.Computed<boolean>;
-  public canConfigureThroughput: ko.PureComputed<boolean>;
-  public showUpsellMessage: ko.PureComputed<boolean>;
 
   constructor(options: ViewModels.PaneOptions) {
     super(options);
@@ -59,8 +56,6 @@ export default class AddDatabasePane extends ContextualPaneBase {
     this.databaseId = ko.observable<string>();
     this.hasAutoPilotV2FeatureFlag = ko.pureComputed(() => this.container.hasAutoPilotV2FeatureFlag());
     this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText(this.hasAutoPilotV2FeatureFlag()));
-    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
-    this.showUpsellMessage = ko.pureComputed(() => !this.container.isServerlessEnabled());
 
     this.canExceedMaximumValue = ko.pureComputed(() => this.container.canExceedMaximumValue());
 
@@ -335,7 +330,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
   ) {
     AddDbUtilities.createSqlDatabase(this.container.armEndpoint(), createDatabaseParameters, autoPilotSettings).then(
       () => {
-        Promise.all([refreshCachedOffers(), refreshCachedResources()]).then(() => {
+        Promise.all([
+          this.container.documentClientUtility.refreshCachedOffers(),
+          this.container.documentClientUtility.refreshCachedResources()
+        ]).then(() => {
           this._onCreateDatabaseSuccess(createDatabaseParameters.offerThroughput, startKey);
         });
       }
@@ -352,7 +350,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
       createDatabaseParameters,
       autoPilotSettings
     ).then(() => {
-      Promise.all([refreshCachedOffers(), refreshCachedResources()]).then(() => {
+      Promise.all([
+        this.container.documentClientUtility.refreshCachedOffers(),
+        this.container.documentClientUtility.refreshCachedResources()
+      ]).then(() => {
         this._onCreateDatabaseSuccess(createDatabaseParameters.offerThroughput, startKey);
       });
     });
@@ -368,7 +369,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
       createDatabaseParameters,
       autoPilotSettings
     ).then(() => {
-      Promise.all([refreshCachedOffers(), refreshCachedResources()]).then(() => {
+      Promise.all([
+        this.container.documentClientUtility.refreshCachedOffers(),
+        this.container.documentClientUtility.refreshCachedResources()
+      ]).then(() => {
         this._onCreateDatabaseSuccess(createDatabaseParameters.offerThroughput, startKey);
       });
     });
@@ -405,7 +409,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
       autoPilot,
       hasAutoPilotV2FeatureFlag: this.hasAutoPilotV2FeatureFlag()
     };
-    createDatabase(createRequest).then(
+    this.container.documentClientUtility.createDatabase(createRequest).then(
       (database: DataModels.Database) => {
         this._onCreateDatabaseSuccess(offerThroughput, telemetryStartKey);
       },
@@ -456,7 +460,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
     startKey: number
   ): void {
     AddDbUtilities.createCassandraKeyspace(armEndpoint, createKeyspaceParameters, autoPilotSettings).then(() => {
-      Promise.all([refreshCachedOffers(), refreshCachedResources()]).then(() => {
+      Promise.all([
+        this.container.documentClientUtility.refreshCachedOffers(),
+        this.container.documentClientUtility.refreshCachedResources()
+      ]).then(() => {
         this._onCreateDatabaseSuccess(createKeyspaceParameters.offerThroughput, startKey);
       });
     });
@@ -515,15 +522,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
   }
 
   private _computeOfferThroughput(): number {
-    if (!this.canConfigureThroughput()) {
+    return this.isAutoPilotSelected() ? undefined : this._getThroughput();
-      return undefined;
-    }
-
-    if (this.isAutoPilotSelected()) {
-      return undefined;
-    }
-
-    return this._getThroughput();
   }
 
   private _isValid(): boolean {

src/Explorer/Panes/BrowseQueriesPane.ts

@@ -6,7 +6,6 @@ import { ContextualPaneBase } from "./ContextualPaneBase";
 import * as Logger from "../../Common/Logger";
 import { QueriesGridComponentAdapter } from "../Controls/QueriesGridReactComponent/QueriesGridComponentAdapter";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import QueryTab from "../Tabs/QueryTab";
 
 export class BrowseQueriesPane extends ContextualPaneBase {
   public queriesGridComponentAdapter: QueriesGridComponentAdapter;
@@ -88,7 +87,7 @@ export class BrowseQueriesPane extends ContextualPaneBase {
     } else {
       selectedCollection.onNewQueryClick(selectedCollection, null);
     }
-    const queryTab = this.container.tabsManager.activeTab() as QueryTab;
+    const queryTab: ViewModels.QueryTab = this.container.tabsManager.activeTab() as ViewModels.QueryTab;
     queryTab.tabTitle(savedQuery.queryName);
     queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
     queryTab.initialEditorContent(savedQuery.query);

src/Explorer/Panes/CassandraAddCollectionPane.html

@@ -118,8 +118,6 @@
               <option data-bind="value: $data.id"> </option>
             </datalist>
 
-            <!-- Database provisioned throughput - Start -->
-            <!-- ko if: canConfigureThroughput -->
             <div
               class="databaseProvision"
               aria-label="New database provision support"
@@ -204,8 +202,6 @@
               </throughput-input>
             </div>
             <!-- /ko -->
-            <!-- /ko -->
-            <!-- Database provisioned throughput - End -->
           </div>
           <div class="seconddivpadding">
             <p>
@@ -235,9 +231,6 @@
               style="height:125px; width: calc(100% - 80px); resize: vertical;"
             ></textarea>
           </div>
-
-          <!-- Provision table throughput - start -->
-          <!-- ko if: canConfigureThroughput -->
           <div class="seconddivpadding" data-bind="visible: keyspaceHasSharedOffer() && !keyspaceCreateNew()">
             <input
               type="checkbox"
@@ -322,8 +315,6 @@
             </throughput-input>
           </div>
           <!-- /ko -->
-          <!-- /ko -->
-          <!-- Provision table throughput - end -->
         </div>
         <div class="paneFooter">
           <div class="leftpanel-okbut">

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -51,7 +51,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
   public hasAutoPilotV2FeatureFlag: ko.PureComputed<boolean>;
   public isFreeTierAccount: ko.Computed<boolean>;
   public ruToolTipText: ko.Computed<string>;
-  public canConfigureThroughput: ko.PureComputed<boolean>;
 
   private keyspaceOffers: HashMap<DataModels.Offer>;
 
@@ -62,7 +61,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
     this.keyspaceCreateNew = ko.observable<boolean>(true);
     this.hasAutoPilotV2FeatureFlag = ko.pureComputed(() => this.container.hasAutoPilotV2FeatureFlag());
     this.ruToolTipText = ko.pureComputed(() => PricingUtils.getRuToolTipText(this.hasAutoPilotV2FeatureFlag()));
-    this.canConfigureThroughput = ko.pureComputed(() => !this.container.isServerlessEnabled());
     this.keyspaceOffers = new HashMap<DataModels.Offer>();
     this.keyspaceIds = ko.observableArray<string>();
     this.keyspaceHasSharedOffer = ko.observable<boolean>(false);
@@ -367,7 +365,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
     const createTableQueryPrefix: string = `${this.createTableQuery()}${this.tableId().trim()} ${this.userTableQuery()}`;
     let createTableQuery: string;
 
-    if (this.canConfigureThroughput() && (this.dedicateTableThroughput() || !this.keyspaceHasSharedOffer())) {
+    if (this.dedicateTableThroughput() || !this.keyspaceHasSharedOffer()) {
       if (this.isAutoPilotSelected() && this.selectedAutoPilotThroughput()) {
         createTableQuery = `${createTableQueryPrefix} WITH ${autoPilotCommand}=${this.selectedAutoPilotThroughput()};`;
       } else {

src/Explorer/Panes/ContextualPaneBase.ts

@@ -5,10 +5,11 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import { KeyCodes } from "../../Common/Constants";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import DocumentClientUtilityBase from "../../Common/DocumentClientUtilityBase";
 import Explorer from "../Explorer";
 
 // TODO: Use specific actions for logging telemetry data
-export abstract class ContextualPaneBase extends WaitsForTemplateViewModel {
+export abstract class ContextualPaneBase extends WaitsForTemplateViewModel implements ViewModels.ContextualPane {
   public id: string;
   public container: Explorer;
   public firstFieldHasFocus: ko.Observable<boolean>;
@@ -16,12 +17,14 @@ export abstract class ContextualPaneBase extends WaitsForTemplateViewModel {
   public formErrors: ko.Observable<string>;
   public title: ko.Observable<string>;
   public visible: ko.Observable<boolean>;
+  public documentClientUtility: DocumentClientUtilityBase;
   public isExecuting: ko.Observable<boolean>;
 
   constructor(options: ViewModels.PaneOptions) {
     super();
     this.id = options.id;
     this.container = options.container;
+    this.documentClientUtility = options.documentClientUtility;
     this.visible = options.visible || ko.observable(false);
     this.firstFieldHasFocus = ko.observable<boolean>(false);
     this.formErrors = ko.observable<string>();

src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts

@@ -1,4 +1,3 @@
-jest.mock("../../Common/dataAccess/deleteCollection");
 import * as ko from "knockout";
 import * as sinon from "sinon";
 import Q from "q";
@@ -7,17 +6,17 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import DeleteCollectionConfirmationPane from "./DeleteCollectionConfirmationPane";
 import DeleteFeedback from "../../Common/DeleteFeedback";
+import DocumentClientUtilityBase from "../../Common/DocumentClientUtilityBase";
 import Explorer from "../Explorer";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { TreeNode } from "../../Contracts/ViewModels";
-import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
 
 describe("Delete Collection Confirmation Pane", () => {
   describe("Explorer.isLastCollection()", () => {
     let explorer: Explorer;
 
     beforeEach(() => {
-      explorer = new Explorer({ notificationsClient: null, isEmulator: false });
+      explorer = new Explorer({ documentClientUtility: null, notificationsClient: null, isEmulator: false });
     });
 
     it("should be true if 1 database and 1 collection", () => {
@@ -56,11 +55,15 @@ describe("Delete Collection Confirmation Pane", () => {
 
   describe("shouldRecordFeedback()", () => {
     it("should return true if last collection and database does not have shared throughput else false", () => {
-      let fakeExplorer = new Explorer({ notificationsClient: null, isEmulator: false });
+      let fakeDocumentClientUtility = sinon.createStubInstance<DocumentClientUtilityBase>(
+        DocumentClientUtilityBase as any
+      );
+      let fakeExplorer = new Explorer({ documentClientUtility: null, notificationsClient: null, isEmulator: false });
       fakeExplorer.isNotificationConsoleExpanded = ko.observable<boolean>(false);
       fakeExplorer.refreshAllDatabases = () => Q.resolve();
 
       let pane = new DeleteCollectionConfirmationPane({
+        documentClientUtility: fakeDocumentClientUtility as any,
         id: "deletecollectionconfirmationpane",
         visible: ko.observable<boolean>(false),
         container: fakeExplorer
@@ -84,7 +87,6 @@ describe("Delete Collection Confirmation Pane", () => {
     let telemetryProcessorSpy: sinon.SinonSpy;
 
     beforeEach(() => {
-      (deleteCollection as jest.Mock).mockResolvedValue(undefined);
       telemetryProcessorSpy = sinon.spy(TelemetryProcessor, "trace");
     });
 
@@ -94,6 +96,8 @@ describe("Delete Collection Confirmation Pane", () => {
 
     it("it should log feedback if last collection and database is not shared", () => {
       let selectedCollectionId = "testCol";
+      let fakeDocumentClientUtility = {} as DocumentClientUtilityBase;
+      fakeDocumentClientUtility.deleteCollection = () => Q(null);
       let fakeExplorer = {} as Explorer;
       fakeExplorer.findSelectedCollection = () => {
         return {
@@ -106,22 +110,24 @@ describe("Delete Collection Confirmation Pane", () => {
       fakeExplorer.isSelectedDatabaseShared = () => false;
       const SubscriptionId = "testId";
       const AccountName = "testAccount";
-      fakeExplorer.databaseAccount = ko.observable<DataModels.DatabaseAccount>({
+      fakeExplorer.databaseAccount = ko.observable<ViewModels.DatabaseAccount>({
         id: SubscriptionId,
         name: AccountName
-      } as DataModels.DatabaseAccount);
+      } as ViewModels.DatabaseAccount);
 
       fakeExplorer.defaultExperience = ko.observable<string>("DocumentDB");
       fakeExplorer.isPreferredApiCassandra = ko.computed(() => {
         return false;
       });
 
+      fakeExplorer.documentClientUtility = fakeDocumentClientUtility;
       fakeExplorer.selectedNode = ko.observable<TreeNode>();
       fakeExplorer.isLastCollection = () => true;
       fakeExplorer.isSelectedDatabaseShared = () => false;
       fakeExplorer.refreshAllDatabases = () => Q.resolve();
 
       let pane = new DeleteCollectionConfirmationPane({
+        documentClientUtility: fakeDocumentClientUtility as any,
         id: "deletecollectionconfirmationpane",
         visible: ko.observable<boolean>(false),
         container: fakeExplorer as any

src/Explorer/Panes/DeleteCollectionConfirmationPane.ts

@@ -9,9 +9,8 @@ import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsol
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
 import DeleteFeedback from "../../Common/DeleteFeedback";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
 
 export default class DeleteCollectionConfirmationPane extends ContextualPaneBase {
   public collectionIdConfirmationText: ko.Observable<string>;
@@ -29,7 +28,7 @@ export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
     this.resetData();
   }
 
-  public submit(): Promise<any> {
+  public submit(): Q.Promise<any> {
     if (!this._isValid()) {
       const selectedCollection: ViewModels.Collection = this.container.findSelectedCollection();
       this.formErrors("Input collection name does not match the selected collection");
@@ -37,7 +36,7 @@ export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
         ConsoleDataType.Error,
         `Error while deleting collection ${selectedCollection && selectedCollection.id()}: ${this.formErrors()}`
       );
-      return Promise.resolve();
+      return Q.resolve();
     }
 
     this.formErrors("");
@@ -50,23 +49,25 @@ export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
       dataExplorerArea: Constants.Areas.ContextualPane,
       paneTitle: this.title()
     });
-    let promise: Promise<any>;
+    let promise: Q.Promise<any>;
     if (this.container.isPreferredApiCassandra()) {
-      promise = ((<CassandraAPIDataClient>this.container.tableDataClient).deleteTableOrKeyspace(
+      promise = (<CassandraAPIDataClient>this.container.tableDataClient).deleteTableOrKeyspace(
         this.container.databaseAccount().properties.cassandraEndpoint,
         this.container.databaseAccount().id,
         `DROP TABLE ${selectedCollection.databaseId}.${selectedCollection.id()};`,
         this.container
-      ) as unknown) as Promise<any>;
+      );
     } else {
-      promise = deleteCollection(selectedCollection.databaseId, selectedCollection.id());
+      promise = this.container.documentClientUtility.deleteCollection(selectedCollection);
     }
     return promise.then(
       () => {
         this.isExecuting(false);
         this.close();
         this.container.selectedNode(selectedCollection.database);
-        this.container.tabsManager?.closeTabsByComparator(tab => tab.node && tab.node.rid === selectedCollection.rid);
+        this.container.tabsManager?.closeTabsByComparator(
+          (tab: ViewModels.Tab) => tab.node && tab.node.rid === selectedCollection.rid
+        );
         this.container.refreshAllDatabases();
         this.resetData();
         TelemetryProcessor.traceSuccess(

src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts

@@ -1,28 +1,23 @@
-jest.mock("../../Common/dataAccess/deleteDatabase");
-jest.mock("../../Shared/Telemetry/TelemetryProcessor");
 import * as ko from "knockout";
+import * as sinon from "sinon";
 import Q from "q";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import DeleteDatabaseConfirmationPane from "./DeleteDatabaseConfirmationPane";
 import DeleteFeedback from "../../Common/DeleteFeedback";
+import DocumentClientUtilityBase from "../../Common/DocumentClientUtilityBase";
 import Explorer from "../Explorer";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { TreeNode } from "../../Contracts/ViewModels";
 import { TabsManager } from "../Tabs/TabsManager";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
 
 describe("Delete Database Confirmation Pane", () => {
   describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
     let explorer: Explorer;
 
-    beforeAll(() => {
-      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-    });
-
     beforeEach(() => {
-      explorer = new Explorer({ notificationsClient: null, isEmulator: false });
+      explorer = new Explorer({ documentClientUtility: null, notificationsClient: null, isEmulator: false });
     });
 
     it("should be true if only 1 database", () => {
@@ -54,10 +49,12 @@ describe("Delete Database Confirmation Pane", () => {
 
   describe("shouldRecordFeedback()", () => {
     it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
+      let fakeDocumentClientUtility = {} as DocumentClientUtilityBase;
       let fakeExplorer = {} as Explorer;
       fakeExplorer.isNotificationConsoleExpanded = ko.observable<boolean>(false);
 
       let pane = new DeleteDatabaseConfirmationPane({
+        documentClientUtility: fakeDocumentClientUtility as any,
         id: "deletedatabaseconfirmationpane",
         visible: ko.observable<boolean>(false),
         container: fakeExplorer as any
@@ -81,8 +78,20 @@ describe("Delete Database Confirmation Pane", () => {
   });
 
   describe("submit()", () => {
+    let telemetryProcessorSpy: sinon.SinonSpy;
+
+    beforeEach(() => {
+      telemetryProcessorSpy = sinon.spy(TelemetryProcessor, "trace");
+    });
+
+    afterEach(() => {
+      telemetryProcessorSpy.restore();
+    });
+
     it("on submit() it should log feedback if last non empty database or is last database that has shared throughput", () => {
       let selectedDatabaseId = "testDB";
+      let fakeDocumentClientUtility = {} as DocumentClientUtilityBase;
+      fakeDocumentClientUtility.deleteDatabase = () => Q.resolve(null);
       let fakeExplorer = {} as Explorer;
       fakeExplorer.findSelectedDatabase = () => {
         return {
@@ -97,19 +106,21 @@ describe("Delete Database Confirmation Pane", () => {
       fakeExplorer.isSelectedDatabaseShared = () => false;
       const SubscriptionId = "testId";
       const AccountName = "testAccount";
-      fakeExplorer.databaseAccount = ko.observable<DataModels.DatabaseAccount>({
+      fakeExplorer.databaseAccount = ko.observable<ViewModels.DatabaseAccount>({
         id: SubscriptionId,
         name: AccountName
-      } as DataModels.DatabaseAccount);
+      } as ViewModels.DatabaseAccount);
       fakeExplorer.defaultExperience = ko.observable<string>("DocumentDB");
       fakeExplorer.isPreferredApiCassandra = ko.computed(() => {
         return false;
       });
+      fakeExplorer.documentClientUtility = fakeDocumentClientUtility;
       fakeExplorer.selectedNode = ko.observable<TreeNode>();
       fakeExplorer.tabsManager = new TabsManager();
       fakeExplorer.isLastNonEmptyDatabase = () => true;
 
       let pane = new DeleteDatabaseConfirmationPane({
+        documentClientUtility: fakeDocumentClientUtility as any,
         id: "deletedatabaseconfirmationpane",
         visible: ko.observable<boolean>(false),
         container: fakeExplorer as any
@@ -119,12 +130,15 @@ describe("Delete Database Confirmation Pane", () => {
       pane.databaseDeleteFeedback(Feedback);
 
       return pane.submit().then(() => {
+        expect(telemetryProcessorSpy.called).toBe(true);
         let deleteFeedback = new DeleteFeedback(SubscriptionId, AccountName, DataModels.ApiKind.SQL, Feedback);
-        expect(TelemetryProcessor.trace).toHaveBeenCalledWith(
+        expect(
-          Action.DeleteDatabase,
+          telemetryProcessorSpy.calledWith(
-          ActionModifiers.Mark,
+            Action.DeleteDatabase,
-          JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback))
+            ActionModifiers.Mark,
-        );
+            JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback))
+          )
+        ).toBe(true);
       });
     });
   });

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

@@ -10,9 +10,8 @@ import { ContextualPaneBase } from "./ContextualPaneBase";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
 import DeleteFeedback from "../../Common/DeleteFeedback";
 
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
 
 export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
   public databaseIdConfirmationText: ko.Observable<string>;
@@ -51,7 +50,6 @@ export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
       dataExplorerArea: Constants.Areas.ContextualPane,
       paneTitle: this.title()
     });
-    // TODO: Should not be a Q promise anymore, but the Cassandra code requires it
     let promise: Q.Promise<any>;
     if (this.container.isPreferredApiCassandra()) {
       promise = (<CassandraAPIDataClient>this.container.tableDataClient).deleteTableOrKeyspace(
@@ -61,19 +59,23 @@ export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
         this.container
       );
     } else {
-      promise = Q(deleteDatabase(selectedDatabase.id()));
+      promise = this.container.documentClientUtility.deleteDatabase(selectedDatabase);
     }
     return promise.then(
       () => {
         this.isExecuting(false);
         this.close();
         this.container.refreshAllDatabases();
-        this.container.tabsManager.closeTabsByComparator(tab => tab.node && tab.node.rid === selectedDatabase.rid);
+        this.container.tabsManager.closeTabsByComparator(
+          (tab: ViewModels.Tab) => tab.node && tab.node.rid === selectedDatabase.rid
+        );
         this.container.selectedNode(null);
         selectedDatabase
           .collections()
           .forEach((collection: ViewModels.Collection) =>
-            this.container.tabsManager.closeTabsByComparator(tab => tab.node && tab.node.rid === collection.rid)
+            this.container.tabsManager.closeTabsByComparator(
+              (tab: ViewModels.Tab) => tab.node && tab.node.rid === collection.rid
+            )
           );
         this.resetData();
         TelemetryProcessor.traceSuccess(

src/Explorer/Panes/GitHubReposPane.ts

@@ -8,7 +8,7 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { JunoUtils } from "../../Utils/JunoUtils";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import { AuthorizeAccessComponent } from "../Controls/GitHub/AuthorizeAccessComponent";
 import { GitHubReposComponent, GitHubReposComponentProps, RepoListItem } from "../Controls/GitHub/GitHubReposComponent";
 import { GitHubReposComponentAdapter } from "../Controls/GitHub/GitHubReposComponentAdapter";
@@ -16,11 +16,6 @@ import { BranchesProps, PinnedReposProps, UnpinnedReposProps } from "../Controls
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 
-interface GitHubReposPaneOptions extends ViewModels.PaneOptions {
-  gitHubClient: GitHubClient;
-  junoClient: JunoClient;
-}
-
 export class GitHubReposPane extends ContextualPaneBase {
   private static readonly PageSize = 30;
 
@@ -38,7 +33,7 @@ export class GitHubReposPane extends ContextualPaneBase {
   private allGitHubReposLastPageInfo?: IGitHubPageInfo;
   private pinnedReposUpdated: boolean;
 
-  constructor(options: GitHubReposPaneOptions) {
+  constructor(options: ViewModels.GitHubReposPaneOptions) {
     super(options);
 
     this.gitHubClient = options.gitHubClient;

src/Explorer/Panes/LoadQueryPane.ts

@@ -5,8 +5,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as Logger from "../../Common/Logger";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
-import QueryTab from "../Tabs/QueryTab";
 
 export class LoadQueryPane extends ContextualPaneBase {
   public selectedFilesTitle: ko.Observable<string>;
@@ -112,7 +111,7 @@ export class LoadQueryPane extends ContextualPaneBase {
     const reader = new FileReader();
     reader.onload = (evt: any): void => {
       const fileData: string = evt.target.result;
-      const queryTab = this.container.tabsManager.activeTab() as QueryTab;
+      const queryTab: ViewModels.QueryTab = this.container.tabsManager.activeTab() as ViewModels.QueryTab;
       queryTab.initialEditorContent(fileData);
       queryTab.sqlQueryEditorContent(fileData);
       deferred.resolve();

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -1,178 +1,156 @@
-import ko from "knockout";
+import ko from "knockout";
-import * as React from "react";
+import * as React from "react";
-import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import * as Logger from "../../Common/Logger";
+import * as Logger from "../../Common/Logger";
-import Explorer from "../Explorer";
+import { JunoClient } from "../../Juno/JunoClient";
-import { JunoClient } from "../../Juno/JunoClient";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
+import Explorer from "../Explorer";
-import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
+import { PublishNotebookPaneComponent, PublishNotebookPaneProps } from "./PublishNotebookPaneComponent";
-import { ImmutableNotebook } from "@nteract/commutable/src";
+
-import { toJS } from "@nteract/commutable";
+export class PublishNotebookPaneAdapter implements ReactAdapter {
-
+  parameters: ko.Observable<number>;
-export class PublishNotebookPaneAdapter implements ReactAdapter {
+  private isOpened: boolean;
-  parameters: ko.Observable<number>;
+  private isExecuting: boolean;
-  private isOpened: boolean;
+  private formError: string;
-  private isExecuting: boolean;
+  private formErrorDetail: string;
-  private formError: string;
+
-  private formErrorDetail: string;
+  private name: string;
-
+  private author: string;
-  private name: string;
+  private content: string;
-  private author: string;
+  private description: string;
-  private content: string;
+  private tags: string;
-  private description: string;
+  private imageSrc: string;
-  private tags: string;
+
-  private imageSrc: string;
+  constructor(private container: Explorer, private junoClient: JunoClient) {
-  private notebookObject: ImmutableNotebook;
+    this.parameters = ko.observable(Date.now());
-  private parentDomElement: HTMLElement;
+    this.reset();
-
+    this.triggerRender();
-  constructor(private container: Explorer, private junoClient: JunoClient) {
+  }
-    this.parameters = ko.observable(Date.now());
+
-    this.reset();
+  public renderComponent(): JSX.Element {
-    this.triggerRender();
+    if (!this.isOpened) {
-  }
+      return undefined;
-
+    }
-  public renderComponent(): JSX.Element {
+
-    if (!this.isOpened) {
+    const props: GenericRightPaneProps = {
-      return undefined;
+      container: this.container,
-    }
+      content: this.createContent(),
-
+      formError: this.formError,
-    const props: GenericRightPaneProps = {
+      formErrorDetail: this.formErrorDetail,
-      container: this.container,
+      id: "publishnotebookpane",
-      content: this.createContent(),
+      isExecuting: this.isExecuting,
-      formError: this.formError,
+      title: "Publish to gallery",
-      formErrorDetail: this.formErrorDetail,
+      submitButtonText: "Publish",
-      id: "publishnotebookpane",
+      onClose: () => this.close(),
-      isExecuting: this.isExecuting,
+      onSubmit: () => this.submit()
-      title: "Publish to gallery",
+    };
-      submitButtonText: "Publish",
+
-      onClose: () => this.close(),
+    return <GenericRightPaneComponent {...props} />;
-      onSubmit: () => this.submit()
+  }
-    };
+
-
+  public triggerRender(): void {
-    return <GenericRightPaneComponent {...props} />;
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
+  }
-
+
-  public triggerRender(): void {
+  public open(name: string, author: string, content: string): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
+    this.name = name;
-  }
+    this.author = author;
-
+    this.content = content;
-  public open(
+
-    name: string,
+    this.isOpened = true;
-    author: string,
+    this.triggerRender();
-    notebookContent: string | ImmutableNotebook,
+  }
-    parentDomElement: HTMLElement
+
-  ): void {
+  public close(): void {
-    this.name = name;
+    this.reset();
-    this.author = author;
+    this.triggerRender();
-    if (typeof notebookContent === "string") {
+  }
-      this.content = notebookContent as string;
+
-    } else {
+  public async submit(): Promise<void> {
-      this.content = JSON.stringify(toJS(notebookContent as ImmutableNotebook));
+    const notificationId = NotificationConsoleUtils.logConsoleMessage(
-      this.notebookObject = notebookContent;
+      ConsoleDataType.InProgress,
-    }
+      `Publishing ${this.name} to gallery`
-    this.parentDomElement = parentDomElement;
+    );
-
+    this.isExecuting = true;
-    this.isOpened = true;
+    this.triggerRender();
-    this.triggerRender();
+
-  }
+    try {
-
+      if (!this.name || !this.description || !this.author) {
-  public close(): void {
+        throw new Error("Name, description, and author are required");
-    this.reset();
+      }
-    this.triggerRender();
+
-  }
+      const response = await this.junoClient.publishNotebook(
-
+        this.name,
-  public async submit(): Promise<void> {
+        this.description,
-    const notificationId = NotificationConsoleUtils.logConsoleMessage(
+        this.tags?.split(","),
-      ConsoleDataType.InProgress,
+        this.author,
-      `Publishing ${this.name} to gallery`
+        this.imageSrc,
-    );
+        this.content
-    this.isExecuting = true;
+      );
-    this.triggerRender();
+      if (!response.data) {
-
+        throw new Error(`Received HTTP ${response.status} when publishing ${name} to gallery`);
-    try {
+      }
-      if (!this.name || !this.description || !this.author) {
+
-        throw new Error("Name, description, and author are required");
+      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, `Published ${name} to gallery`);
-      }
+    } catch (error) {
-
+      this.formError = `Failed to publish ${this.name} to gallery`;
-      const response = await this.junoClient.publishNotebook(
+      this.formErrorDetail = `${error}`;
-        this.name,
+
-        this.description,
+      const message = `${this.formError}: ${this.formErrorDetail}`;
-        this.tags?.split(","),
+      Logger.logError(message, "PublishNotebookPaneAdapter/submit");
-        this.author,
+      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
-        this.imageSrc,
+      return;
-        this.content
+    } finally {
-      );
+      NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
-      if (!response.data) {
+      this.isExecuting = false;
-        throw new Error(`Received HTTP ${response.status} when publishing ${name} to gallery`);
+      this.triggerRender();
-      }
+    }
-
+
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, `Published ${name} to gallery`);
+    this.close();
-    } catch (error) {
+  }
-      this.formError = `Failed to publish ${this.name} to gallery`;
+
-      this.formErrorDetail = `${error}`;
+  private createFormErrorForLargeImageSelection = (formError: string, formErrorDetail: string, area: string): void => {
-
+    this.formError = formError;
-      const message = `${this.formError}: ${this.formErrorDetail}`;
+    this.formErrorDetail = formErrorDetail;
-      Logger.logError(message, "PublishNotebookPaneAdapter/submit");
+
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
+    const message = `${this.formError}: ${this.formErrorDetail}`;
-      return;
+    Logger.logError(message, area);
-    } finally {
+    NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
-      NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
+    this.triggerRender();
-      this.isExecuting = false;
+  };
-      this.triggerRender();
+
-    }
+  private clearFormError = (): void => {
-
+    this.formError = undefined;
-    this.close();
+    this.formErrorDetail = undefined;
-  }
+    this.triggerRender();
-
+  };
-  private createFormErrorForLargeImageSelection = (formError: string, formErrorDetail: string, area: string): void => {
+
-    this.formError = formError;
+  private createContent = (): JSX.Element => {
-    this.formErrorDetail = formErrorDetail;
+    const publishNotebookPaneProps: PublishNotebookPaneProps = {
-
+      notebookName: this.name,
-    const message = `${this.formError}: ${this.formErrorDetail}`;
+      notebookDescription: "",
-    Logger.logError(message, area);
+      notebookTags: "",
-    NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, message);
+      notebookAuthor: this.author,
-    this.triggerRender();
+      notebookCreatedDate: new Date().toISOString(),
-  };
+      onChangeDescription: (newValue: string) => (this.description = newValue),
-
+      onChangeTags: (newValue: string) => (this.tags = newValue),
-  private clearFormError = (): void => {
+      onChangeImageSrc: (newValue: string) => (this.imageSrc = newValue),
-    this.formError = undefined;
+      onError: this.createFormErrorForLargeImageSelection,
-    this.formErrorDetail = undefined;
+      clearFormError: this.clearFormError
-    this.triggerRender();
+    };
-  };
+
-
+    return <PublishNotebookPaneComponent {...publishNotebookPaneProps} />;
-  private createContent = (): JSX.Element => {
+  };
-    const publishNotebookPaneProps: PublishNotebookPaneProps = {
+
-      notebookName: this.name,
+  private reset = (): void => {
-      notebookDescription: "",
+    this.isOpened = false;
-      notebookTags: "",
+    this.isExecuting = false;
-      notebookAuthor: this.author,
+    this.formError = undefined;
-      notebookCreatedDate: new Date().toISOString(),
+    this.formErrorDetail = undefined;
-      notebookObject: this.notebookObject,
+    this.name = undefined;
-      notebookParentDomElement: this.parentDomElement,
+    this.author = undefined;
-      onChangeDescription: (newValue: string) => (this.description = newValue),
+    this.content = undefined;
-      onChangeTags: (newValue: string) => (this.tags = newValue),
+  };
-      onChangeImageSrc: (newValue: string) => (this.imageSrc = newValue),
+}
-      onError: this.createFormErrorForLargeImageSelection,
-      clearFormError: this.clearFormError
-    };
-
-    return <PublishNotebookPaneComponent {...publishNotebookPaneProps} />;
-  };
-
-  private reset = (): void => {
-    this.isOpened = false;
-    this.isExecuting = false;
-    this.formError = undefined;
-    this.formErrorDetail = undefined;
-    this.name = undefined;
-    this.author = undefined;
-    this.content = undefined;
-    this.description = undefined;
-    this.tags = undefined;
-    this.imageSrc = undefined;
-    this.notebookObject = undefined;
-    this.parentDomElement = undefined;
-  };
-}

src/Explorer/Panes/PublishNotebookPaneComponent.test.tsx

@@ -10,8 +10,6 @@ describe("PublishNotebookPaneComponent", () => {
       notebookTags: "tag1, tag2",
       notebookAuthor: "CosmosDB",
       notebookCreatedDate: "2020-07-17T00:00:00Z",
-      notebookObject: undefined,
-      notebookParentDomElement: undefined,
       onChangeDescription: undefined,
       onChangeTags: undefined,
       onChangeImageSrc: undefined,

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

@@ -3,9 +3,6 @@ import * as React from "react";
 import { GalleryCardComponent } from "../Controls/NotebookGallery/Cards/GalleryCardComponent";
 import { FileSystemUtil } from "../Notebook/FileSystemUtil";
 import "./PublishNotebookPaneComponent.less";
-import Html2Canvas from "html2canvas";
-import { ImmutableNotebook } from "@nteract/commutable/src";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
 
 export interface PublishNotebookPaneProps {
   notebookName: string;
@@ -13,8 +10,6 @@ export interface PublishNotebookPaneProps {
   notebookTags: string;
   notebookAuthor: string;
   notebookCreatedDate: string;
-  notebookObject: ImmutableNotebook;
-  notebookParentDomElement: HTMLElement;
   onChangeDescription: (newValue: string) => void;
   onChangeTags: (newValue: string) => void;
   onChangeImageSrc: (newValue: string) => void;
@@ -29,15 +24,9 @@ interface PublishNotebookPaneState {
   imageSrc: string;
 }
 
-enum ImageTypes {
-  Url = "URL",
-  CustomImage = "Custom Image",
-  TakeScreenshot = "Take Screenshot",
-  UseFirstDisplayOutput = "Use First Display Output"
-}
-
 export class PublishNotebookPaneComponent extends React.Component<PublishNotebookPaneProps, PublishNotebookPaneState> {
   private static readonly maxImageSizeInMib = 1.5;
+  private static readonly ImageTypes = ["URL", "Custom Image"];
   private descriptionPara1: string;
   private descriptionPara2: string;
   private descriptionProps: ITextFieldProps;
@@ -45,13 +34,12 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
   private thumbnailUrlProps: ITextFieldProps;
   private thumbnailSelectorProps: IDropdownProps;
   private imageToBase64: (file: File, updateImageSrc: (result: string) => void) => void;
-  private takeScreenshot: (target: HTMLElement, onError: (error: Error) => void) => void;
 
   constructor(props: PublishNotebookPaneProps) {
     super(props);
 
     this.state = {
-      type: ImageTypes.Url,
+      type: PublishNotebookPaneComponent.ImageTypes[0],
       notebookDescription: "",
       notebookTags: "",
       imageSrc: undefined
@@ -60,12 +48,12 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
     this.imageToBase64 = (file: File, updateImageSrc: (result: string) => void) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
-      reader.onload = () => {
+      reader.onload = function() {
         updateImageSrc(reader.result.toString());
       };
 
       const onError = this.props.onError;
-      reader.onerror = error => {
+      reader.onerror = function(error) {
         const formError = `Failed to convert ${file.name} to base64 format`;
         const formErrorDetail = `${error}`;
         const area = "PublishNotebookPaneComponent/selectImageFile";
@@ -73,38 +61,6 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
       };
     };
 
-    this.takeScreenshot = (target: HTMLElement, onError: (error: Error) => void): void => {
-      const updateImageSrcWithScreenshot = (canvasUrl: string): void => {
-        this.props.onChangeImageSrc(canvasUrl);
-        this.setState({ imageSrc: canvasUrl });
-      };
-
-      target.scrollIntoView();
-      Html2Canvas(target, {
-        useCORS: true,
-        allowTaint: true,
-        scale: 1,
-        logging: true
-      })
-        .then(canvas => {
-          //redraw canvas to fit Card Cover Image dimensions
-          const originalImageData = canvas.toDataURL();
-          const requiredHeight =
-            parseInt(canvas.style.width.split("px")[0]) * GalleryCardComponent.cardHeightToWidthRatio;
-          canvas.height = requiredHeight;
-          const context = canvas.getContext("2d");
-          const image = new Image();
-          image.src = originalImageData;
-          image.onload = () => {
-            context.drawImage(image, 0, 0);
-            updateImageSrcWithScreenshot(canvas.toDataURL());
-          };
-        })
-        .catch(error => {
-          onError(error);
-        });
-    };
-
     this.descriptionPara1 =
       "This notebook has your data. Please make sure you delete any sensitive data/output before publishing.";
 
@@ -122,45 +78,12 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
       }
     };
 
-    const screenshotErrorHandler = (error: Error) => {
-      const formError = "Failed to take screen shot";
-      const formErrorDetail = `${error}`;
-      const area = "PublishNotebookPaneComponent/takeScreenshot";
-      this.props.onError(formError, formErrorDetail, area);
-    };
-
-    const firstOutputErrorHandler = (error: Error) => {
-      const formError = "Failed to capture first output";
-      const formErrorDetail = `${error}`;
-      const area = "PublishNotebookPaneComponent/UseFirstOutput";
-      this.props.onError(formError, formErrorDetail, area);
-    };
-
     this.thumbnailSelectorProps = {
       label: "Cover image",
-      defaultSelectedKey: ImageTypes.Url,
+      defaultSelectedKey: PublishNotebookPaneComponent.ImageTypes[0],
       ariaLabel: "Cover image",
-      options: [
+      options: PublishNotebookPaneComponent.ImageTypes.map((value: string) => ({ text: value, key: value })),
-        ImageTypes.Url,
+      onChange: (event, options) => {
-        ImageTypes.CustomImage,
-        ImageTypes.TakeScreenshot,
-        ImageTypes.UseFirstDisplayOutput
-      ].map((value: string) => ({ text: value, key: value })),
-      onChange: async (event, options) => {
-        this.props.clearFormError();
-        if (options.text === ImageTypes.TakeScreenshot) {
-          try {
-            await this.takeScreenshot(this.props.notebookParentDomElement, screenshotErrorHandler);
-          } catch (error) {
-            screenshotErrorHandler(error);
-          }
-        } else if (options.text === ImageTypes.UseFirstDisplayOutput) {
-          try {
-            await this.takeScreenshot(this.findFirstOutput(), firstOutputErrorHandler);
-          } catch (error) {
-            firstOutputErrorHandler(error);
-          }
-        }
         this.setState({ type: options.text });
       }
     };
@@ -188,51 +111,6 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
     };
   }
 
-  private renderThumbnailSelectors(type: string) {
-    switch (type) {
-      case ImageTypes.Url:
-        return <TextField {...this.thumbnailUrlProps} />;
-      case ImageTypes.CustomImage:
-        return (
-          <input
-            id="selectImageFile"
-            type="file"
-            accept="image/*"
-            onChange={event => {
-              const file = event.target.files[0];
-              if (file.size / 1024 ** 2 > PublishNotebookPaneComponent.maxImageSizeInMib) {
-                event.target.value = "";
-                const formError = `Failed to upload ${file.name}`;
-                const formErrorDetail = `Image is larger than ${PublishNotebookPaneComponent.maxImageSizeInMib} MiB. Please Choose a different image.`;
-                const area = "PublishNotebookPaneComponent/selectImageFile";
-
-                this.props.onError(formError, formErrorDetail, area);
-                this.props.onChangeImageSrc(undefined);
-                this.setState({ imageSrc: undefined });
-                return;
-              } else {
-                this.props.clearFormError();
-              }
-              this.imageToBase64(file, (result: string) => {
-                this.props.onChangeImageSrc(result);
-                this.setState({ imageSrc: result });
-              });
-            }}
-          />
-        );
-      default:
-        return <></>;
-    }
-  }
-
-  private findFirstOutput(): HTMLElement {
-    const indexOfFirstCodeCellWithDisplay = NotebookUtil.findFirstCodeCellWithDisplay(this.props.notebookObject);
-    const cellOutputDomElements = this.props.notebookParentDomElement.querySelectorAll<HTMLElement>(
-      ".nteract-cell-outputs"
-    );
-    return cellOutputDomElements[indexOfFirstCodeCellWithDisplay];
-  }
-
   public render(): JSX.Element {
     return (
       <div className="publishNotebookPanelContent">
@@ -257,8 +135,39 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
             <Dropdown {...this.thumbnailSelectorProps} />
           </Stack.Item>
 
-          <Stack.Item>{this.renderThumbnailSelectors(this.state.type)}</Stack.Item>
+          {this.state.type === PublishNotebookPaneComponent.ImageTypes[0] ? (
+            <Stack.Item>
+              <TextField {...this.thumbnailUrlProps} />
+            </Stack.Item>
+          ) : (
+            <Stack.Item>
+              <input
+                id="selectImageFile"
+                type="file"
+                accept="image/*"
+                onChange={event => {
+                  const file = event.target.files[0];
+                  if (file.size / 1024 ** 2 > PublishNotebookPaneComponent.maxImageSizeInMib) {
+                    event.target.value = "";
+                    const formError = `Failed to upload ${file.name}`;
+                    const formErrorDetail = `Image is larger than ${PublishNotebookPaneComponent.maxImageSizeInMib} MiB. Please Choose a different image.`;
+                    const area = "PublishNotebookPaneComponent/selectImageFile";
 
+                    this.props.onError(formError, formErrorDetail, area);
+                    this.props.onChangeImageSrc(undefined);
+                    this.setState({ imageSrc: undefined });
+                    return;
+                  } else {
+                    this.props.clearFormError();
+                  }
+                  this.imageToBase64(file, (result: string) => {
+                    this.props.onChangeImageSrc(result);
+                    this.setState({ imageSrc: result });
+                  });
+                }}
+              />
+            </Stack.Item>
+          )}
           <Stack.Item>
             <Text>Preview</Text>
           </Stack.Item>

src/Explorer/Panes/RenewAdHocAccessPane.ts

@@ -6,7 +6,7 @@ import { ConnectionStringParser } from "../../Platform/Hosted/Helpers/Connection
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 
 export class RenewAdHocAccessPane extends ContextualPaneBase {
   public accessKey: ko.Observable<string>;

src/Explorer/Panes/SaveQueryPane.ts

@@ -5,9 +5,8 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import QueryTab from "../Tabs/QueryTab";
 
 export class SaveQueryPane extends ContextualPaneBase {
   public queryName: ko.Observable<string>;
@@ -35,7 +34,8 @@ export class SaveQueryPane extends ContextualPaneBase {
     }
 
     const queryName: string = this.queryName();
-    const queryTab = this.container && (this.container.tabsManager.activeTab() as QueryTab);
+    const queryTab: ViewModels.QueryTab =
+      this.container && (this.container.tabsManager.activeTab() as ViewModels.QueryTab);
     const query: string = queryTab && queryTab.sqlQueryEditorContent();
     if (!queryName || queryName.length === 0) {
       this.formErrors("No query name specified");

src/Explorer/Panes/SettingsPane.test.ts

@@ -7,7 +7,7 @@ describe("Settings Pane", () => {
     let explorer: Explorer;
 
     beforeEach(() => {
-      explorer = new Explorer({ notificationsClient: null, isEmulator: false });
+      explorer = new Explorer({ documentClientUtility: null, notificationsClient: null, isEmulator: false });
     });
 
     it("should be true for SQL API", () => {

src/Explorer/Panes/SettingsPane.ts

@@ -4,7 +4,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import { StringUtility } from "../../Shared/StringUtility";
 import { config } from "../../Config";