Initial Move from Azure DevOps to GitHub

src/Explorer/ComponentRegisterer.test.ts

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

src/Explorer/ComponentRegisterer.ts

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

src/Explorer/ContextMenuButtonFactory.ts

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

src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx

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

src/Explorer/Controls/Accordion/AccordionComponent.less

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

src/Explorer/Controls/Accordion/AccordionComponent.tsx

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

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

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

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx

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

src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx

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

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

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

src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx

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

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx

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

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less

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

src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts

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

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

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

src/Explorer/Controls/CommandButton/CommandButton.less

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

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

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

src/Explorer/Controls/CommandButton/CommandButton.ts

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

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

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

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

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

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

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

src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx

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

src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts

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

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

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

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

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

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx

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

src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx

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

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

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

src/Explorer/Controls/Directory/DirectoryListComponent.tsx

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

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

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

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

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

src/Explorer/Controls/DynamicList/DynamicListComponent.less

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

src/Explorer/Controls/DynamicList/DynamicListComponent.ts

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

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

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

src/Explorer/Controls/Editor/EditorComponent.ts

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

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import * as monaco from "monaco-editor";
+
+export interface EditorReactProps {
+  language: string;
+  content: string;
+  isReadOnly: boolean;
+  ariaLabel: string; // Sets what will be read to the user to define the control
+  onContentSelected?: (selectedContent: string) => void; // Called when text is selected
+  onContentChanged?: (newContent: string) => void; // Called when text is changed
+  lineNumbers?: monaco.editor.IEditorOptions["lineNumbers"];
+  theme?: string; // Monaco editor theme
+}
+
+export class EditorReact extends React.Component<EditorReactProps> {
+  private rootNode: HTMLElement;
+  private editor: monaco.editor.IStandaloneCodeEditor;
+  private selectionListener: monaco.IDisposable;
+
+  public constructor(props: EditorReactProps) {
+    super(props);
+  }
+
+  public componentDidMount(): void {
+    this.createEditor(this.configureEditor.bind(this));
+  }
+
+  public shouldComponentUpdate(): boolean {
+    // Prevents component re-rendering
+    return false;
+  }
+
+  public componentWillUnmount(): void {
+    this.selectionListener && this.selectionListener.dispose();
+  }
+
+  public render(): JSX.Element {
+    return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
+  }
+
+  protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
+    this.editor = editor;
+    const queryEditorModel = this.editor.getModel();
+    if (!this.props.isReadOnly && this.props.onContentChanged) {
+      queryEditorModel.onDidChangeContent((e: monaco.editor.IModelContentChangedEvent) => {
+        const queryEditorModel = this.editor.getModel();
+        this.props.onContentChanged(queryEditorModel.getValue());
+      });
+    }
+
+    if (this.props.onContentSelected) {
+      this.selectionListener = this.editor.onDidChangeCursorSelection(
+        (event: monaco.editor.ICursorSelectionChangedEvent) => {
+          const selectedContent: string = this.editor.getModel().getValueInRange(event.selection);
+          this.props.onContentSelected(selectedContent);
+        }
+      );
+    }
+  }
+
+  /**
+   * Create the monaco editor and attach to DOM
+   */
+  private createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
+    const options: monaco.editor.IEditorConstructionOptions = {
+      value: this.props.content,
+      language: this.props.language,
+      readOnly: this.props.isReadOnly,
+      lineNumbers: this.props.lineNumbers || "off",
+      fontSize: 12,
+      ariaLabel: this.props.ariaLabel,
+      theme: this.props.theme,
+      automaticLayout: true
+    };
+
+    this.rootNode.innerHTML = "";
+    createCallback(monaco.editor.create(this.rootNode, options));
+  }
+
+  private setRef(element: HTMLElement): void {
+    this.rootNode = element;
+  }
+}

src/Explorer/Controls/Editor/editor-component.html

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

src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less

@@ -0,0 +1,57 @@
+@import "../../../../less/Common/Constants";
+
+@ErrorDisplayImageHeight: 14px;
+
+.warningErrorContainer {
+    padding: 24px 34px 0px 34px;
+
+    .warningErrorContent {
+        background-color: @BaseLow;
+        padding: @DefaultSpace;
+        display: inline-flex;
+    
+        Img {
+            width: @WarningErrorIconSize;
+            height: @WarningErrorIconSize;
+            margin-left: @SmallSpace;
+        }
+    
+        .warningErrorDetailsLinkContainer {
+            padding-left: @MediumSpace;
+            margin: auto 0px auto 0px;
+    
+            .formErrors {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: @FormErrorWidth;
+                padding-top: 2px;
+                color: @BaseHigh;
+                display: block;
+            }
+    
+            .errorLink {
+                cursor: pointer;
+            }
+        }
+
+        .paneErrorIcon {
+            margin-top: 2px;
+        }
+
+        .paneWarningIcon {
+            margin-top: @DefaultSpace;
+        }
+
+        .settingErrorMsg {
+            padding-top: @DefaultSpace;
+        }
+    }
+}
+
+.scaleWarningContainer {
+    padding: 24px 20px 0px 20px;
+
+    .warningErrorContent {
+        width: 100%;
+    }
+}

src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts

@@ -0,0 +1,30 @@
+import template from "./error-display-component.html";
+
+/**
+ * Helper class for ko component registration
+ * This component displays an error as designed in:
+ * https://microsoft.sharepoint.com/teams/DPX/Modern/DocDB/_layouts/15/WopiFrame.aspx?sourcedoc={66864d4a-f925-4cbe-9eb4-79f8d191a115}&action=edit&wd=target%28DocumentDB%20emulator%2Eone%7CE617D0A7-F77C-4968-B75A-1451049F4FEA%2FError%20notification%7CAA1E4BC9-4D72-472C-B40C-2437FA217226%2F%29
+ * TODO: support "More details"
+ */
+export class ErrorDisplayComponent {
+  constructor() {
+    return {
+      viewModel: ErrorDisplayViewModel,
+      template
+    };
+  }
+}
+
+/**
+ * Parameters for this component
+ */
+interface ErrorDisplayParams {
+  errorMsg: ko.Observable<string>; // Primary message
+}
+
+class ErrorDisplayViewModel {
+  private params: ErrorDisplayParams;
+  public constructor(params: ErrorDisplayParams) {
+    this.params = params;
+  }
+}

src/Explorer/Controls/ErrorDisplayComponent/error-display-component.html

@@ -0,0 +1,6 @@
+<div class="warningErrorContainer" data-bind="visible: !!params.errorMsg()">
+  <div class="warningErrorContent">
+    <span><img src="/error_red.svg" alt="Error"/></span>
+    <span class="settingErrorMsg warningErrorDetailsLinkContainer" data-bind="text: params.errorMsg()"></span>
+  </div>
+</div>

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -0,0 +1,132 @@
+import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "office-ui-fabric-react";
+import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as Constants from "../../../Common/Constants";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { Areas } from "../../../Common/Constants";
+import { RepoListItem } from "./GitHubReposComponent";
+import { ChildrenMargin } from "./GitHubStyleConstants";
+import { GitHubUtils } from "../../../Utils/GitHubUtils";
+import { IGitHubRepo } from "../../../GitHub/GitHubClient";
+import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
+export interface AddRepoComponentProps {
+  container: ViewModels.Explorer;
+  getRepo: (owner: string, repo: string) => Promise<IGitHubRepo>;
+  pinRepo: (item: RepoListItem) => void;
+}
+
+interface AddRepoComponentState {
+  textFieldValue: string;
+  textFieldErrorMessage: string;
+}
+
+export class AddRepoComponent extends React.Component<AddRepoComponentProps, AddRepoComponentState> {
+  private static readonly DescriptionText =
+    "Don't see what you're looking for? Add your repo/branch, or any public repo (read-access only) by entering the URL: ";
+  private static readonly ButtonText = "Add";
+  private static readonly TextFieldPlaceholder = "https://github.com/owner/repo/tree/branch";
+  private static readonly TextFieldErrorMessage = "Invalid url";
+  private static readonly DefaultBranchName = "master";
+
+  constructor(props: AddRepoComponentProps) {
+    super(props);
+
+    this.state = {
+      textFieldValue: "",
+      textFieldErrorMessage: undefined
+    };
+  }
+
+  public render(): JSX.Element {
+    const textFieldProps: ITextFieldProps = {
+      placeholder: AddRepoComponent.TextFieldPlaceholder,
+      autoFocus: true,
+      value: this.state.textFieldValue,
+      errorMessage: this.state.textFieldErrorMessage,
+      onChange: this.onTextFieldChange
+    };
+
+    const buttonProps: IButtonProps = {
+      text: AddRepoComponent.ButtonText,
+      ariaLabel: AddRepoComponent.ButtonText,
+      onClick: this.onAddRepoButtonClick
+    };
+
+    return (
+      <>
+        <p style={{ marginBottom: ChildrenMargin }}>{AddRepoComponent.DescriptionText}</p>
+        <TextField {...textFieldProps} />
+        <DefaultButton style={{ marginTop: ChildrenMargin }} {...buttonProps} />
+      </>
+    );
+  }
+
+  private onTextFieldChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    this.setState({
+      textFieldValue: newValue || "",
+      textFieldErrorMessage: undefined
+    });
+  };
+
+  private onAddRepoButtonClick = async (): Promise<void> => {
+    const startKey: number = TelemetryProcessor.traceStart(Action.NotebooksGitHubManualRepoAdd, {
+      databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+      defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
+      dataExplorerArea: Constants.Areas.Notebook
+    });
+    let enteredUrl = this.state.textFieldValue;
+    if (enteredUrl.indexOf("/tree/") === -1) {
+      enteredUrl = `${enteredUrl}/tree/${AddRepoComponent.DefaultBranchName}`;
+    }
+
+    const gitHubInfo = GitHubUtils.fromGitHubUri(enteredUrl);
+    if (gitHubInfo) {
+      this.setState({
+        textFieldValue: "",
+        textFieldErrorMessage: undefined
+      });
+
+      const repo = await this.props.getRepo(gitHubInfo.owner, gitHubInfo.repo);
+      if (repo) {
+        const item: RepoListItem = {
+          key: GitHubUtils.toRepoFullName(repo.owner.login, repo.name),
+          repo,
+          branches: [
+            {
+              name: gitHubInfo.branch
+            }
+          ]
+        };
+
+        TelemetryProcessor.traceSuccess(
+          Action.NotebooksGitHubManualRepoAdd,
+          {
+            databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+            defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
+            dataExplorerArea: Constants.Areas.Notebook
+          },
+          startKey
+        );
+        return this.props.pinRepo(item);
+      }
+    }
+
+    this.setState({
+      textFieldErrorMessage: AddRepoComponent.TextFieldErrorMessage
+    });
+    TelemetryProcessor.traceFailure(
+      Action.NotebooksGitHubManualRepoAdd,
+      {
+        databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+        defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
+        dataExplorerArea: Constants.Areas.Notebook,
+        error: AddRepoComponent.TextFieldErrorMessage
+      },
+      startKey
+    );
+  };
+}

src/Explorer/Controls/GitHub/AuthorizeAccessComponent.tsx

@@ -0,0 +1,91 @@
+import {
+  ChoiceGroup,
+  IButtonProps,
+  IChoiceGroupProps,
+  PrimaryButton,
+  IChoiceGroupOption
+} from "office-ui-fabric-react";
+import * as React from "react";
+import { ChildrenMargin } from "./GitHubStyleConstants";
+
+export interface AuthorizeAccessComponentProps {
+  scope: string;
+  authorizeAccess: (scope: string) => void;
+}
+
+export interface AuthorizeAccessComponentState {
+  scope: string;
+}
+
+export class AuthorizeAccessComponent extends React.Component<
+  AuthorizeAccessComponentProps,
+  AuthorizeAccessComponentState
+> {
+  // Scopes supported by GitHub OAuth. We're only interested in ones which allow us access to repos.
+  // https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/
+  public static readonly Scopes = {
+    Public: {
+      key: "public_repo",
+      text: "Public repos only"
+    },
+    PublicAndPrivate: {
+      key: "repo",
+      text: "Public and private repos"
+    }
+  };
+
+  private static readonly DescriptionPara1 =
+    "Connect your notebooks workspace to GitHub. You'll be able to view, edit, and run notebooks stored in your GitHub repositories in Data Explorer.";
+  private static readonly DescriptionPara2 =
+    "Complete setup by authorizing Azure Cosmos DB to access the repositories in your GitHub account: ";
+  private static readonly AuthorizeButtonText = "Authorize access";
+
+  private onChoiceGroupChange = (event: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void =>
+    this.setState({
+      scope: option.key
+    });
+
+  private onButtonClick = (): void => this.props.authorizeAccess(this.state.scope);
+
+  constructor(props: AuthorizeAccessComponentProps) {
+    super(props);
+
+    this.state = {
+      scope: this.props.scope
+    };
+  }
+
+  public render(): JSX.Element {
+    const choiceGroupProps: IChoiceGroupProps = {
+      options: [
+        {
+          key: AuthorizeAccessComponent.Scopes.Public.key,
+          text: AuthorizeAccessComponent.Scopes.Public.text,
+          ariaLabel: AuthorizeAccessComponent.Scopes.Public.text
+        },
+        {
+          key: AuthorizeAccessComponent.Scopes.PublicAndPrivate.key,
+          text: AuthorizeAccessComponent.Scopes.PublicAndPrivate.text,
+          ariaLabel: AuthorizeAccessComponent.Scopes.PublicAndPrivate.text
+        }
+      ],
+      selectedKey: this.state.scope,
+      onChange: this.onChoiceGroupChange
+    };
+
+    const buttonProps: IButtonProps = {
+      text: AuthorizeAccessComponent.AuthorizeButtonText,
+      ariaLabel: AuthorizeAccessComponent.AuthorizeButtonText,
+      onClick: this.onButtonClick
+    };
+
+    return (
+      <>
+        <p>{AuthorizeAccessComponent.DescriptionPara1}</p>
+        <p style={{ marginTop: ChildrenMargin }}>{AuthorizeAccessComponent.DescriptionPara2}</p>
+        <ChoiceGroup style={{ marginTop: ChildrenMargin }} {...choiceGroupProps} />
+        <PrimaryButton style={{ marginTop: ChildrenMargin }} {...buttonProps} />
+      </>
+    );
+  }
+}

src/Explorer/Controls/GitHub/GitHubReposComponent.tsx

@@ -0,0 +1,82 @@
+import { DefaultButton, IButtonProps, Link, PrimaryButton } from "office-ui-fabric-react";
+import * as React from "react";
+import { IGitHubBranch, IGitHubRepo } from "../../../GitHub/GitHubClient";
+import { AddRepoComponent, AddRepoComponentProps } from "./AddRepoComponent";
+import { AuthorizeAccessComponent, AuthorizeAccessComponentProps } from "./AuthorizeAccessComponent";
+import { ChildrenMargin, ButtonsFooterStyle, ContentFooterStyle } from "./GitHubStyleConstants";
+import { ReposListComponent, ReposListComponentProps } from "./ReposListComponent";
+
+export interface GitHubReposComponentProps {
+  showAuthorizeAccess: boolean;
+  authorizeAccessProps: AuthorizeAccessComponentProps;
+  reposListProps: ReposListComponentProps;
+  addRepoProps: AddRepoComponentProps;
+  resetConnection: () => void;
+  onOkClick: () => void;
+  onCancelClick: () => void;
+}
+
+export interface RepoListItem {
+  key: string;
+  repo: IGitHubRepo;
+  branches: IGitHubBranch[];
+}
+
+export class GitHubReposComponent extends React.Component<GitHubReposComponentProps> {
+  public static readonly ConnectToGitHubTitle = "Connect to GitHub";
+  public static readonly ManageGitHubRepoTitle = "Manage GitHub settings";
+  private static readonly ManageGitHubRepoDescription =
+    "Select your GitHub repos and branch(es) to pin to your notebooks workspace.";
+  private static readonly ManageGitHubRepoResetConnection = "View or change your GitHub authorization settings.";
+  private static readonly OKButtonText = "OK";
+  private static readonly CancelButtonText = "Cancel";
+
+  public render(): JSX.Element {
+    const header: JSX.Element = (
+      <p>
+        {this.props.showAuthorizeAccess
+          ? GitHubReposComponent.ConnectToGitHubTitle
+          : GitHubReposComponent.ManageGitHubRepoTitle}
+      </p>
+    );
+
+    const content: JSX.Element = this.props.showAuthorizeAccess ? (
+      <AuthorizeAccessComponent {...this.props.authorizeAccessProps} />
+    ) : (
+      <>
+        <p>{GitHubReposComponent.ManageGitHubRepoDescription}</p>
+        <ReposListComponent {...this.props.reposListProps} />
+      </>
+    );
+
+    const okProps: IButtonProps = {
+      text: GitHubReposComponent.OKButtonText,
+      ariaLabel: GitHubReposComponent.OKButtonText,
+      onClick: this.props.onOkClick
+    };
+
+    const cancelProps: IButtonProps = {
+      text: GitHubReposComponent.CancelButtonText,
+      ariaLabel: GitHubReposComponent.CancelButtonText,
+      onClick: this.props.onCancelClick
+    };
+
+    return (
+      <>
+        <div className={"firstdivbg headerline"}>{header}</div>
+        <div className={"paneMainContent"}>{content}</div>
+        {!this.props.showAuthorizeAccess && (
+          <>
+            <div className={"paneFooter"} style={ContentFooterStyle}>
+              <AddRepoComponent {...this.props.addRepoProps} />
+            </div>
+            <div className={"paneFooter"} style={ButtonsFooterStyle}>
+              <PrimaryButton {...okProps} />
+              <DefaultButton style={{ marginLeft: ChildrenMargin }} {...cancelProps} />
+            </div>
+          </>
+        )}
+      </>
+    );
+  }
+}

src/Explorer/Controls/GitHub/GitHubReposComponentAdapter.tsx

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

src/Explorer/Controls/GitHub/GitHubStyleConstants.ts

@@ -0,0 +1,58 @@
+import {
+  IStyleFunctionOrObject,
+  ICheckboxStyleProps,
+  ICheckboxStyles,
+  IDropdownStyles,
+  IDropdownStyleProps
+} from "office-ui-fabric-react";
+
+export const ButtonsFooterStyle: React.CSSProperties = {
+  padding: 14,
+  height: "auto"
+};
+
+export const ContentFooterStyle: React.CSSProperties = {
+  padding: "10px 24px 10px 24px",
+  height: "auto"
+};
+
+export const ChildrenMargin = 10;
+export const FontSize = 12;
+
+export const ReposListCheckboxStyles: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles> = {
+  label: {
+    margin: 0,
+    padding: "2 0 2 0"
+  },
+  text: {
+    fontSize: FontSize
+  }
+};
+
+export const BranchesDropdownCheckboxStyles: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles> = {
+  label: {
+    margin: 0,
+    padding: 0,
+    fontSize: FontSize
+  },
+  root: {
+    padding: 0
+  },
+  text: {
+    fontSize: FontSize
+  }
+};
+
+export const BranchesDropdownStyles: IStyleFunctionOrObject<IDropdownStyleProps, IDropdownStyles> = {
+  title: {
+    fontSize: FontSize
+  }
+};
+
+export const BranchesDropdownOptionContainerStyle: React.CSSProperties = {
+  padding: 8
+};
+
+export const ReposListRepoColumnMinWidth = 192;
+export const ReposListBranchesColumnWidth = 116;
+export const BranchesDropdownWidth = 200;

src/Explorer/Controls/GitHub/ReposListComponent.tsx

@@ -0,0 +1,301 @@
+import {
+  Checkbox,
+  DetailsList,
+  DetailsRow,
+  Dropdown,
+  ICheckboxProps,
+  IDetailsFooterProps,
+  IDetailsListProps,
+  IDetailsRowBaseProps,
+  IDropdown,
+  IDropdownOption,
+  IDropdownProps,
+  ILinkProps,
+  ISelectableDroppableTextProps,
+  Link,
+  ResponsiveMode,
+  SelectionMode,
+  Text
+} from "office-ui-fabric-react";
+import * as React from "react";
+import { IGitHubBranch } from "../../../GitHub/GitHubClient";
+import { GitHubUtils } from "../../../Utils/GitHubUtils";
+import { RepoListItem } from "./GitHubReposComponent";
+import {
+  BranchesDropdownCheckboxStyles,
+  BranchesDropdownOptionContainerStyle,
+  ReposListCheckboxStyles,
+  ReposListRepoColumnMinWidth,
+  ReposListBranchesColumnWidth,
+  BranchesDropdownWidth,
+  BranchesDropdownStyles
+} from "./GitHubStyleConstants";
+
+export interface ReposListComponentProps {
+  branchesProps: Record<string, BranchesProps>; // key'd by repo key
+  pinnedReposProps: PinnedReposProps;
+  unpinnedReposProps: UnpinnedReposProps;
+  pinRepo: (repo: RepoListItem) => void;
+  unpinRepo: (repo: RepoListItem) => void;
+}
+
+export interface BranchesProps {
+  branches: IGitHubBranch[];
+  hasMore: boolean;
+  isLoading: boolean;
+  loadMore: () => void;
+}
+
+export interface PinnedReposProps {
+  repos: RepoListItem[];
+}
+
+export interface UnpinnedReposProps {
+  repos: RepoListItem[];
+  hasMore: boolean;
+  isLoading: boolean;
+  loadMore: () => void;
+}
+
+export class ReposListComponent extends React.Component<ReposListComponentProps> {
+  private static readonly PinnedReposColumnName = "Pinned repos";
+  private static readonly UnpinnedReposColumnName = "Unpinned repos";
+  private static readonly BranchesColumnName = "Branches";
+  private static readonly LoadingText = "Loading...";
+  private static readonly LoadMoreText = "Load more";
+  private static readonly DefaultBranchName = "master";
+  private static readonly FooterIndex = -1;
+
+  public render(): JSX.Element {
+    const pinnedReposListProps: IDetailsListProps = {
+      styles: {
+        contentWrapper: {
+          height: this.props.pinnedReposProps.repos.length ? undefined : 0
+        }
+      },
+      items: this.props.pinnedReposProps.repos,
+      getKey: ReposListComponent.getKey,
+      selectionMode: SelectionMode.none,
+      compact: true,
+      columns: [
+        {
+          key: ReposListComponent.PinnedReposColumnName,
+          name: ReposListComponent.PinnedReposColumnName,
+          ariaLabel: ReposListComponent.PinnedReposColumnName,
+          minWidth: ReposListRepoColumnMinWidth,
+          onRender: this.onRenderPinnedReposColumnItem
+        },
+        {
+          key: ReposListComponent.BranchesColumnName,
+          name: ReposListComponent.BranchesColumnName,
+          ariaLabel: ReposListComponent.BranchesColumnName,
+          minWidth: ReposListBranchesColumnWidth,
+          maxWidth: ReposListBranchesColumnWidth,
+          onRender: this.onRenderPinnedReposBranchesColumnItem
+        }
+      ],
+      onRenderDetailsFooter: this.props.pinnedReposProps.repos.length ? undefined : this.onRenderReposFooter
+    };
+
+    const unpinnedReposListProps: IDetailsListProps = {
+      items: this.props.unpinnedReposProps.repos,
+      getKey: ReposListComponent.getKey,
+      selectionMode: SelectionMode.none,
+      compact: true,
+      columns: [
+        {
+          key: ReposListComponent.UnpinnedReposColumnName,
+          name: ReposListComponent.UnpinnedReposColumnName,
+          ariaLabel: ReposListComponent.UnpinnedReposColumnName,
+          minWidth: ReposListRepoColumnMinWidth,
+          onRender: this.onRenderUnpinnedReposColumnItem
+        },
+        {
+          key: ReposListComponent.BranchesColumnName,
+          name: ReposListComponent.BranchesColumnName,
+          ariaLabel: ReposListComponent.BranchesColumnName,
+          minWidth: ReposListBranchesColumnWidth,
+          maxWidth: ReposListBranchesColumnWidth,
+          onRender: this.onRenderUnpinnedReposBranchesColumnItem
+        }
+      ],
+      onRenderDetailsFooter:
+        this.props.unpinnedReposProps.isLoading || this.props.unpinnedReposProps.hasMore
+          ? this.onRenderReposFooter
+          : undefined
+    };
+
+    return (
+      <>
+        <DetailsList {...pinnedReposListProps} />
+        <DetailsList {...unpinnedReposListProps} />
+      </>
+    );
+  }
+
+  private onRenderPinnedReposColumnItem = (item: RepoListItem, index: number): JSX.Element => {
+    if (index === ReposListComponent.FooterIndex) {
+      return <Text>None</Text>;
+    }
+
+    const checkboxProps: ICheckboxProps = {
+      ...ReposListComponent.getCheckboxPropsForLabel(GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)),
+      styles: ReposListCheckboxStyles,
+      defaultChecked: true,
+      onChange: () => this.props.unpinRepo(item)
+    };
+
+    return <Checkbox {...checkboxProps} />;
+  };
+
+  private onRenderPinnedReposBranchesColumnItem = (item: RepoListItem, index: number): JSX.Element => {
+    if (index === ReposListComponent.FooterIndex) {
+      return <></>;
+    }
+
+    const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)];
+    const options: IDropdownOption[] = branchesProps.branches.map(branch => ({
+      key: branch.name,
+      text: branch.name,
+      data: item,
+      disabled: item.branches.length === 1 && branch.name === item.branches[0].name,
+      selected: item.branches.findIndex(element => element.name === branch.name) !== -1
+    }));
+
+    if (branchesProps.hasMore || branchesProps.isLoading) {
+      const text = branchesProps.isLoading ? ReposListComponent.LoadingText : ReposListComponent.LoadMoreText;
+      options.push({
+        key: text,
+        text,
+        data: item,
+        index: ReposListComponent.FooterIndex
+      });
+    }
+
+    const dropdownProps: IDropdownProps = {
+      styles: BranchesDropdownStyles,
+      dropdownWidth: BranchesDropdownWidth,
+      responsiveMode: ResponsiveMode.large,
+      options,
+      onRenderList: this.onRenderBranchesDropdownList
+    };
+
+    if (item.branches.length === 1) {
+      dropdownProps.placeholder = item.branches[0].name;
+    } else if (item.branches.length > 1) {
+      dropdownProps.placeholder = `${item.branches.length} branches`;
+    }
+
+    return <Dropdown {...dropdownProps} />;
+  };
+
+  private onRenderUnpinnedReposBranchesColumnItem = (item: RepoListItem, index: number): JSX.Element => {
+    if (index === ReposListComponent.FooterIndex) {
+      return <></>;
+    }
+
+    const dropdownProps: IDropdownProps = {
+      styles: BranchesDropdownStyles,
+      options: [],
+      placeholder: ReposListComponent.DefaultBranchName,
+      disabled: true
+    };
+
+    return <Dropdown {...dropdownProps} />;
+  };
+
+  private onRenderBranchesDropdownList = (props: ISelectableDroppableTextProps<IDropdown, IDropdown>): JSX.Element => {
+    const renderedList: JSX.Element[] = [];
+    props.options.forEach((option: IDropdownOption) => {
+      const item = (
+        <div key={option.key} style={BranchesDropdownOptionContainerStyle}>
+          {this.onRenderPinnedReposBranchesDropdownOption(option)}
+        </div>
+      );
+      renderedList.push(item);
+    });
+
+    return <>{renderedList}</>;
+  };
+
+  private onRenderPinnedReposBranchesDropdownOption(option: IDropdownOption): JSX.Element {
+    const item: RepoListItem = option.data;
+    const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)];
+
+    if (option.index === ReposListComponent.FooterIndex) {
+      const linkProps: ILinkProps = {
+        disabled: branchesProps.isLoading,
+        onClick: branchesProps.loadMore
+      };
+
+      return <Link {...linkProps}>{option.text}</Link>;
+    }
+
+    const checkboxProps: ICheckboxProps = {
+      ...ReposListComponent.getCheckboxPropsForLabel(option.text),
+      styles: BranchesDropdownCheckboxStyles,
+      defaultChecked: option.selected,
+      disabled: option.disabled,
+      onChange: (event, checked) => {
+        const repoListItem = { ...item };
+        const branch: IGitHubBranch = { name: option.text };
+        repoListItem.branches = repoListItem.branches.filter(element => element.name !== branch.name);
+        if (checked) {
+          repoListItem.branches.push(branch);
+        }
+
+        this.props.pinRepo(repoListItem);
+      }
+    };
+
+    return <Checkbox {...checkboxProps} />;
+  }
+
+  private onRenderUnpinnedReposColumnItem = (item: RepoListItem, index: number): JSX.Element => {
+    if (index === ReposListComponent.FooterIndex) {
+      const linkProps: ILinkProps = {
+        disabled: this.props.unpinnedReposProps.isLoading,
+        onClick: this.props.unpinnedReposProps.loadMore
+      };
+
+      const linkText = this.props.unpinnedReposProps.isLoading
+        ? ReposListComponent.LoadingText
+        : ReposListComponent.LoadMoreText;
+      return <Link {...linkProps}>{linkText}</Link>;
+    }
+
+    const checkboxProps: ICheckboxProps = {
+      ...ReposListComponent.getCheckboxPropsForLabel(GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)),
+      styles: ReposListCheckboxStyles,
+      onChange: () => {
+        const repoListItem = { ...item };
+        repoListItem.branches = [{ name: ReposListComponent.DefaultBranchName }];
+        this.props.pinRepo(repoListItem);
+      }
+    };
+
+    return <Checkbox {...checkboxProps} />;
+  };
+
+  private onRenderReposFooter = (detailsFooterProps: IDetailsFooterProps): JSX.Element => {
+    const props: IDetailsRowBaseProps = {
+      ...detailsFooterProps,
+      item: {},
+      itemIndex: ReposListComponent.FooterIndex
+    };
+
+    return <DetailsRow {...props} />;
+  };
+
+  private static getCheckboxPropsForLabel(label: string): ICheckboxProps {
+    return {
+      label,
+      title: label,
+      ariaLabel: label
+    };
+  }
+
+  private static getKey(item: RepoListItem): string {
+    return item.key;
+  }
+}

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

@@ -0,0 +1,7 @@
+/* Override width to not make it fullscreen */
+
+.input-typeahead-container {
+    vertical-align: middle;
+    display: inline-block;
+    width: 100%;
+}

src/Explorer/Controls/InputTypeahead/InputTypeahead.ts

@@ -0,0 +1,189 @@
+/**
+ * How to use this component:
+ *
+ * In your html markup, use:
+ * <input-typeahead params="{
+                                    choices:choices,
+                                    selection:selection,
+                                    inputValue:inputValue,
+                                    placeholder:'Enter source',
+                                    typeaheadOverrideOptions:typeaheadOverrideOptions
+                                }"></input-typeahead>
+ * The parameters are documented below.
+ *
+ * Notes:
+ * - dynamic:true by default, this allows choices to change after initialization.
+ *   To turn it off, use:
+ *   typeaheadOverrideOptions: { dynamic:false }
+ *
+ */
+
+import "jquery-typeahead";
+import template from "./input-typeahead.html";
+
+/**
+ * Helper class for ko component registration
+ */
+export class InputTypeaheadComponent {
+  constructor() {
+    return {
+      viewModel: InputTypeaheadViewModel,
+      template
+    };
+  }
+}
+
+export interface Item {
+  caption: string;
+  value: any;
+}
+
+/**
+ * Parameters for this component
+ */
+interface InputTypeaheadParams {
+  /**
+   * List of choices available in the dropdown.
+   */
+  choices: ko.ObservableArray<Item>;
+
+  /**
+   * Gets updated when user clicks on the choice in the dropdown
+   */
+  selection?: ko.Observable<Item>;
+
+  /**
+   * The current string value of <input>
+   */
+  inputValue?: ko.Observable<string>;
+
+  /**
+   * Define what text you want as the input placeholder
+   */
+  placeholder: string;
+
+  /**
+   * Override default jquery-typeahead options
+   * WARNING: do not override input, source or callback to avoid breaking the components behavior.
+   */
+  typeaheadOverrideOptions?: any;
+
+  /**
+   * This function gets called when pressing ENTER on the input box
+   */
+  submitFct?: (inputValue: string, selection: Item) => void;
+
+  /**
+   * Typehead comes with a Search button that we normally remove.
+   * If you want to use it, turn this on
+   */
+  showSearchButton?: boolean;
+}
+
+interface OnClickItem {
+  matchedKey: string;
+  value: any;
+  caption: string;
+  group: string;
+}
+
+interface Cache {
+  inputValue: string;
+  selection: Item;
+}
+
+class InputTypeaheadViewModel {
+  private static instanceCount = 0; // Generate unique id for each component's typeahead instance
+  private instanceNumber: number;
+  private params: InputTypeaheadParams;
+
+  private cache: Cache;
+  private inputValue: string;
+  private selection: Item;
+
+  public constructor(params: InputTypeaheadParams) {
+    this.instanceNumber = InputTypeaheadViewModel.instanceCount++;
+    this.params = params;
+
+    this.params.choices.subscribe(this.initializeTypeahead.bind(this));
+
+    this.cache = {
+      inputValue: null,
+      selection: null
+    };
+  }
+
+  /**
+   * Must execute once ko is rendered, so that it can find the input element by id
+   */
+  private initializeTypeahead() {
+    let params = this.params;
+    let cache = this.cache;
+    let options: any = {
+      input: `#${this.getComponentId()}`, //'.input-typeahead',
+      order: "asc",
+      minLength: 0,
+      searchOnFocus: true,
+      source: {
+        display: "caption",
+        data: () => {
+          return this.params.choices();
+        }
+      },
+      callback: {
+        onClick: (node: any, a: any, item: OnClickItem, event: any) => {
+          cache.selection = item;
+
+          if (params.selection) {
+            params.selection(item);
+          }
+        },
+        onResult(node: any, query: any, result: any, resultCount: any, resultCountPerGroup: any) {
+          cache.inputValue = query;
+          if (params.inputValue) {
+            params.inputValue(query);
+          }
+        }
+      },
+      template: (query: string, item: any) => {
+        // Don't display id if caption *IS* the id
+        return item.caption === item.value
+          ? "<span>{{caption}}</span>"
+          : "<span><div>{{caption}}</div><div><small>{{value}}</small></div></span>";
+      },
+      dynamic: true
+    };
+
+    // Override options
+    if (params.typeaheadOverrideOptions) {
+      for (let p in params.typeaheadOverrideOptions) {
+        options[p] = params.typeaheadOverrideOptions[p];
+      }
+    }
+
+    $.typeahead(options);
+  }
+
+  /**
+   * Get this component id
+   * @return unique id per instance
+   */
+  private getComponentId(): string {
+    return `input-typeahead${this.instanceNumber}`;
+  }
+
+  /**
+   * Executed once ko is done rendering bindings
+   * Use ko's "template: afterRender" callback to do that without actually using any template.
+   * Another way is to call it within setTimeout() in constructor.
+   */
+  private afterRender(): void {
+    this.initializeTypeahead();
+  }
+
+  private submit(): void {
+    if (this.params.submitFct) {
+      this.params.submitFct(this.cache.inputValue, this.cache.selection);
+    }
+  }
+}

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -0,0 +1,228 @@
+/**
+ *
+ * Notes:
+ * - dynamic:true by default, this allows choices to change after initialization.
+ *   To turn it off, use:
+ *   typeaheadOverrideOptions: { dynamic:false }
+ *
+ */
+import * as React from "react";
+import { KeyCodes } from "../../../Common/Constants";
+
+export interface Item {
+  caption: string;
+  value: any;
+}
+
+/**
+ * Parameters for this component
+ */
+interface InputTypeaheadComponentProps {
+  /**
+   * List of choices available in the dropdown.
+   */
+  choices: Item[];
+
+  /**
+   * Gets updated when user clicks on the choice in the dropdown
+   */
+  onSelected?: (selected: Item) => void;
+  // selection?: ko.Observable<Item>;
+
+  /**
+   * The current string value of <input>
+   */
+  onNewValue?: (newValue: string) => void;
+  // inputValue?:ko.Observable<string>;
+
+  /**
+   * Initial value of the input
+   */
+  defaultValue?: string;
+
+  /**
+   * Define what text you want as the input placeholder
+   */
+  placeholder: string;
+
+  /**
+   * Override default jquery-typeahead options
+   * WARNING: do not override input, source or callback to avoid breaking the components behavior.
+   */
+  typeaheadOverrideOptions?: any;
+
+  /**
+   * This function gets called when pressing ENTER on the input box
+   */
+  submitFct?: (inputValue: string, selection: Item) => void;
+
+  /**
+   * Typehead comes with a Search button that we normally remove.
+   * If you want to use it, turn this on
+   */
+  showSearchButton?: boolean;
+
+  /**
+   * true: show (X) button that clears the text inside the textbox when typing
+   */
+  showCancelButton?: boolean;
+}
+
+interface OnClickItem {
+  matchedKey: string;
+  value: any;
+  caption: string;
+  group: string;
+}
+
+interface Cache {
+  inputValue: string;
+  selection: Item;
+}
+
+interface InputTypeaheadComponentState {}
+
+export class InputTypeaheadComponent extends React.Component<
+  InputTypeaheadComponentProps,
+  InputTypeaheadComponentState
+> {
+  private inputElt: HTMLElement;
+  private containerElt: HTMLElement;
+
+  private cache: Cache;
+  private inputValue: string;
+  private selection: Item;
+
+  public constructor(props: InputTypeaheadComponentProps) {
+    super(props);
+    this.cache = {
+      inputValue: null,
+      selection: null
+    };
+  }
+
+  /**
+   * Props have changed
+   * @param prevProps
+   * @param prevState
+   * @param snapshot
+   */
+  public componentDidUpdate(
+    prevProps: InputTypeaheadComponentProps,
+    prevState: InputTypeaheadComponentState,
+    snapshot: any
+  ): void {
+    if (prevProps.defaultValue !== this.props.defaultValue) {
+      $(this.inputElt).val(this.props.defaultValue);
+      this.initializeTypeahead();
+    }
+  }
+
+  /**
+   * Executed once react is done building the DOM for this component
+   */
+  public componentDidMount(): void {
+    this.initializeTypeahead();
+  }
+
+  public render(): JSX.Element {
+    return (
+      <span className="input-typeahead-container">
+        <div
+          className="input-typehead"
+          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onKeyDown(event)}
+        >
+          <div className="typeahead__container" ref={input => (this.containerElt = input)}>
+            <div className="typeahead__field">
+              <span className="typeahead__query">
+                <input
+                  name="q"
+                  type="search"
+                  autoComplete="off"
+                  aria-label="Input query"
+                  ref={input => (this.inputElt = input)}
+                  defaultValue={this.props.defaultValue}
+                />
+              </span>
+              {this.props.showSearchButton && (
+                <span className="typeahead__button">
+                  <button type="submit">
+                    <span className="typeahead__search-icon" />
+                  </button>
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </span>
+    );
+  }
+
+  private onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+    if (event.keyCode === KeyCodes.Enter) {
+      if (this.props.submitFct) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.props.submitFct(this.cache.inputValue, this.cache.selection);
+        $(this.containerElt)
+          .children(".typeahead__result")
+          .hide();
+      }
+    }
+  }
+
+  /**
+   * Must execute once ko is rendered, so that it can find the input element by id
+   */
+  private initializeTypeahead(): void {
+    const props = this.props;
+    let cache = this.cache;
+    let options: any = {
+      input: this.inputElt,
+      order: "asc",
+      minLength: 0,
+      searchOnFocus: true,
+      source: {
+        display: "caption",
+        data: () => {
+          return props.choices;
+        }
+      },
+      callback: {
+        onClick: (node: any, a: any, item: OnClickItem, event: any) => {
+          cache.selection = item;
+
+          if (props.onSelected) {
+            props.onSelected(item);
+          }
+        },
+        onResult(node: any, query: any, result: any, resultCount: any, resultCountPerGroup: any) {
+          cache.inputValue = query;
+          if (props.onNewValue) {
+            props.onNewValue(query);
+          }
+        }
+      },
+      template: (query: string, item: any) => {
+        // Don't display id if caption *IS* the id
+        return item.caption === item.value
+          ? "<span>{{caption}}</span>"
+          : "<span><div>{{caption}}</div><div><small>{{value}}</small></div></span>";
+      },
+      dynamic: true
+    };
+
+    // Override options
+    if (props.typeaheadOverrideOptions) {
+      for (const p in props.typeaheadOverrideOptions) {
+        options[p] = props.typeaheadOverrideOptions[p];
+      }
+    }
+
+    if (props.hasOwnProperty("showCancelButton")) {
+      options.cancelButton = props.showCancelButton;
+    }
+
+    $(this.inputElt).typeahead(options);
+  }
+}

src/Explorer/Controls/InputTypeahead/input-typeahead.html

@@ -0,0 +1,19 @@
+<span class="input-typeahead-container">
+  <form class="input-typehead" data-bind="submit:submit">
+    <div class="typeahead__container">
+      <div class="typeahead__field">
+        <span class="typeahead__query">
+          <input
+            name="q"
+            type="search"
+            autocomplete="off"
+            data-bind="attr: { placeholder: params.placeholder, id:getComponentId() }, value:params.inputValue, template: { afterRender:afterRender() }"
+          />
+        </span>
+        <span class="typeahead__button" data-bind="visible:params.showSearchButton">
+          <button type="submit"><span class="typeahead__search-icon"></span></button>
+        </span>
+      </div>
+    </div>
+  </form>
+</span>

src/Explorer/Controls/JsonEditor/JsonEditorComponent.less

@@ -0,0 +1,8 @@
+@import "../../../../less/Common/Constants";
+
+.jsonEditor {
+    border: @ButtonBorderWidth solid #ddd;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

@@ -0,0 +1,171 @@
+import Q from "q";
+import * as monaco from "monaco-editor";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+import template from "./json-editor-component.html";
+
+/**
+ * Helper class for ko component registration
+ */
+export class JsonEditorComponent {
+  constructor() {
+    return {
+      viewModel: JsonEditorViewModel,
+      template
+    };
+  }
+}
+
+/**
+ * Parameters for this component
+ */
+export interface JsonEditorParams {
+  content: ViewModels.Editable<string>; // Sets the initial content of the editor
+  isReadOnly: boolean;
+  ariaLabel: string; // Sets what will be read to the user to define the control
+  updatedContent?: ViewModels.Editable<string>; // Gets updated when user edits
+  selectedContent?: ViewModels.Editable<string>; // Gets updated when user selects content from the editor
+  lineNumbers?: monaco.editor.IEditorOptions["lineNumbers"];
+  theme?: string; // Monaco editor theme
+}
+
+/**
+ * JSON Editor:
+ *  A ko wrapper for the Monaco editor
+ *
+ * How to use in your markup:
+ * <json-editor params="{ isReadOnly:true, content:myJsonString, ariaLabel: myDescriptiveAriaLabel }"></json-editor>
+ *
+ * In writable mode, if you want to get changes to the content pass updatedContent and subscribe to it.
+ * content and updateContent are different to prevent circular updates.
+ */
+export class JsonEditorViewModel extends WaitsForTemplateViewModel {
+  protected editorContainer: HTMLElement;
+  protected params: JsonEditorParams;
+  private static instanceCount = 0; // Generate unique id to get different monaco editor
+  private editor: monaco.editor.IStandaloneCodeEditor;
+  private instanceNumber: number;
+  private resizer: EventListenerOrEventListenerObject;
+  private observer: MutationObserver;
+  private offsetWidth: number;
+  private offsetHeight: number;
+  private selectionListener: monaco.IDisposable;
+  private latestContentVersionId: number;
+
+  public constructor(params: JsonEditorParams) {
+    super();
+
+    this.instanceNumber = JsonEditorViewModel.instanceCount++;
+    this.params = params;
+
+    this.params.content.subscribe((newValue: string) => {
+      if (!!this.editor) {
+        this.editor.getModel().setValue(newValue);
+      } else {
+        this.createEditor(newValue, this.configureEditor.bind(this));
+      }
+    });
+
+    const onObserve: MutationCallback = (mutations: MutationRecord[], observer: MutationObserver): void => {
+      if (
+        this.offsetWidth !== this.editorContainer.offsetWidth ||
+        this.offsetHeight !== this.editorContainer.offsetHeight
+      ) {
+        this.editor.layout();
+        this.offsetWidth = this.editorContainer.offsetWidth;
+        this.offsetHeight = this.editorContainer.offsetHeight;
+      }
+    };
+    this.observer = new MutationObserver(onObserve);
+  }
+
+  protected getEditorId(): string {
+    return `jsoneditor${this.instanceNumber}`;
+  }
+
+  /**
+   * Create the monaco editor and attach to DOM
+   */
+  protected createEditor(content: string, createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
+    this.registerCompletionItemProvider();
+    this.editorContainer = document.getElementById(this.getEditorId());
+    const options: monaco.editor.IEditorConstructionOptions = {
+      value: content,
+      language: this.getEditorLanguage(),
+      readOnly: this.params.isReadOnly,
+      lineNumbers: this.params.lineNumbers || "off",
+      fontSize: 12,
+      ariaLabel: this.params.ariaLabel,
+      theme: this.params.theme
+    };
+
+    this.editorContainer.innerHTML = "";
+    createCallback(monaco.editor.create(this.editorContainer, options));
+  }
+
+  // Interface. Will be implemented in children editor view model such as EditorViewModel.
+  protected registerCompletionItemProvider() {}
+
+  // Interface. Will be implemented in children editor view model such as EditorViewModel.
+  protected getErrorMarkers(input: string): Q.Promise<monaco.editor.IMarkerData[]> {
+    return Q.Promise(() => {});
+  }
+
+  protected getEditorLanguage(): string {
+    return "json";
+  }
+
+  protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
+    this.editor = editor;
+    const queryEditorModel = this.editor.getModel();
+    if (!this.params.isReadOnly && this.params.updatedContent) {
+      queryEditorModel.onDidChangeContent((e: monaco.editor.IModelContentChangedEvent) => {
+        const queryEditorModel = this.editor.getModel();
+        this.params.updatedContent(queryEditorModel.getValue());
+      });
+    }
+
+    if (this.params.selectedContent) {
+      this.selectionListener = this.editor.onDidChangeCursorSelection(
+        (event: monaco.editor.ICursorSelectionChangedEvent) => {
+          const selectedContent: string = this.editor.getModel().getValueInRange(event.selection);
+          this.params.selectedContent(selectedContent);
+        }
+      );
+    }
+
+    this.resizer = () => {
+      editor.layout();
+    };
+    window.addEventListener("resize", this.resizer);
+
+    this.offsetHeight = this.editorContainer.offsetHeight;
+    this.offsetWidth = this.editorContainer.offsetWidth;
+
+    this.observer.observe(document.body, {
+      attributes: true,
+      subtree: true,
+      childList: true
+    });
+
+    this.editor.getModel().onDidChangeContent(async (e: monaco.editor.IModelContentChangedEvent) => {
+      if (!(<any>e).isFlush) {
+        return;
+      }
+
+      this.latestContentVersionId = e.versionId;
+      let input = (<any>e).changes[0].text;
+      let marks = await this.getErrorMarkers(input);
+      if (e.versionId === this.latestContentVersionId) {
+        monaco.editor.setModelMarkers(this.editor.getModel(), "ErrorMarkerOwner", marks);
+      }
+    });
+    this.editor.focus();
+  }
+
+  private dispose() {
+    window.removeEventListener("resize", this.resizer);
+    this.selectionListener && this.selectionListener.dispose();
+    this.observer.disconnect();
+  }
+}

src/Explorer/Controls/JsonEditor/json-editor-component.html

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

src/Explorer/Controls/LibraryManagement/ClusterLibraryGrid.tsx

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

src/Explorer/Controls/LibraryManagement/ClusterLibraryGridAdapter.tsx

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

src/Explorer/Controls/LibraryManagement/LibraryManage.tsx

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

src/Explorer/Controls/LibraryManagement/LibraryManageComponentAdapter.tsx

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

src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts

@@ -0,0 +1,80 @@
+/**
+ * Message handler to communicate with NotebookApp iframe
+ */
+import Q from "q";
+import * as _ from "underscore";
+
+import { HashMap } from "../../../Common/HashMap";
+import { CachedDataPromise } from "../../../Common/MessageHandler";
+import * as Constants from "../../../Common/Constants";
+import {
+  MessageTypes,
+  FromNotebookMessage,
+  FromNotebookResponseMessage,
+  FromDataExplorerMessage
+} from "../../../Terminal/NotebookAppContracts";
+
+export class NotebookAppMessageHandler {
+  private requestMap: HashMap<CachedDataPromise<any>>;
+
+  constructor(private targetIFrameWindow: Window) {
+    this.requestMap = new HashMap();
+  }
+
+  public handleCachedDataMessage(message: FromNotebookMessage): void {
+    const messageContent = message && (message.message as FromNotebookResponseMessage);
+    if (
+      message == null ||
+      messageContent == null ||
+      messageContent.id == null ||
+      !this.requestMap.has(messageContent.id)
+    ) {
+      return;
+    }
+
+    const cachedDataPromise = this.requestMap.get(messageContent.id);
+    if (messageContent.error != null) {
+      cachedDataPromise.deferred.reject(messageContent.error);
+    } else {
+      cachedDataPromise.deferred.resolve(messageContent.data);
+    }
+    this.runGarbageCollector();
+  }
+
+  public sendCachedDataMessage<TResponseDataModel>(
+    messageType: MessageTypes,
+    params?: any
+  ): Q.Promise<TResponseDataModel> {
+    let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
+      deferred: Q.defer<TResponseDataModel>(),
+      startTime: new Date(),
+      id: _.uniqueId()
+    };
+    this.requestMap.set(cachedDataPromise.id, cachedDataPromise);
+    this.sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
+
+    //TODO: Use telemetry to measure optimal time to resolve/reject promises
+    return cachedDataPromise.deferred.promise.timeout(
+      Constants.ClientDefaults.requestTimeoutMs,
+      "Timed out while waiting for response from portal"
+    );
+  }
+
+  public sendMessage(data: FromDataExplorerMessage): void {
+    if (!this.targetIFrameWindow) {
+      console.error("targetIFrame not defined. This is not expected");
+      return;
+    }
+
+    this.targetIFrameWindow.postMessage(data, window.location.href || window.document.referrer);
+  }
+
+  protected runGarbageCollector() {
+    this.requestMap.keys().forEach((key: string) => {
+      const promise: Q.Promise<any> = this.requestMap.get(key).deferred.promise;
+      if (promise.isFulfilled() || promise.isRejected()) {
+        this.requestMap.delete(key);
+      }
+    });
+  }
+}

src/Explorer/Controls/Notebook/NotebookTerminalComponent.less

@@ -0,0 +1,13 @@
+@import "../../../../less/Common/Constants";
+
+.notebookTerminalContainer {
+  padding: @DefaultSpace;
+  height: 100%;
+  width: 100%;
+
+  iframe {
+    border: none;
+    height: 100%;
+    width: 100%;
+  }
+}

src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx

@@ -0,0 +1,158 @@
+import * as DataModels from "../../../Contracts/DataModels";
+import { NotebookTerminalComponent } from "./NotebookTerminalComponent";
+
+const createTestDatabaseAccount = (): DataModels.DatabaseAccount => {
+  return {
+    id: "testId",
+    kind: "testKind",
+    location: "testLocation",
+    name: "testName",
+    properties: {
+      cassandraEndpoint: null,
+      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
+      gremlinEndpoint: null,
+      tableEndpoint: null
+    },
+    tags: "testTags",
+    type: "testType"
+  };
+};
+
+const createTestMongo32DatabaseAccount = (): DataModels.DatabaseAccount => {
+  return {
+    id: "testId",
+    kind: "testKind",
+    location: "testLocation",
+    name: "testName",
+    properties: {
+      cassandraEndpoint: null,
+      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
+      gremlinEndpoint: null,
+      tableEndpoint: null
+    },
+    tags: "testTags",
+    type: "testType"
+  };
+};
+
+const createTestMongo36DatabaseAccount = (): DataModels.DatabaseAccount => {
+  return {
+    id: "testId",
+    kind: "testKind",
+    location: "testLocation",
+    name: "testName",
+    properties: {
+      cassandraEndpoint: null,
+      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
+      gremlinEndpoint: null,
+      tableEndpoint: null,
+      mongoEndpoint: "https://testMongoEndpoint.azure.com/"
+    },
+    tags: "testTags",
+    type: "testType"
+  };
+};
+
+const createTestCassandraDatabaseAccount = (): DataModels.DatabaseAccount => {
+  return {
+    id: "testId",
+    kind: "testKind",
+    location: "testLocation",
+    name: "testName",
+    properties: {
+      cassandraEndpoint: "https://testCassandraEndpoint.azure.com/",
+      documentEndpoint: null,
+      gremlinEndpoint: null,
+      tableEndpoint: null
+    },
+    tags: "testTags",
+    type: "testType"
+  };
+};
+
+const createTerminal = (): NotebookTerminalComponent => {
+  return new NotebookTerminalComponent({
+    notebookServerInfo: {
+      authToken: "testAuthToken",
+      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/"
+    },
+    databaseAccount: createTestDatabaseAccount()
+  });
+};
+
+const createMongo32Terminal = (): NotebookTerminalComponent => {
+  return new NotebookTerminalComponent({
+    notebookServerInfo: {
+      authToken: "testAuthToken",
+      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo"
+    },
+    databaseAccount: createTestMongo32DatabaseAccount()
+  });
+};
+
+const createMongo36Terminal = (): NotebookTerminalComponent => {
+  return new NotebookTerminalComponent({
+    notebookServerInfo: {
+      authToken: "testAuthToken",
+      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo"
+    },
+    databaseAccount: createTestMongo36DatabaseAccount()
+  });
+};
+
+const createCassandraTerminal = (): NotebookTerminalComponent => {
+  return new NotebookTerminalComponent({
+    notebookServerInfo: {
+      authToken: "testAuthToken",
+      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/cassandra"
+    },
+    databaseAccount: createTestCassandraDatabaseAccount()
+  });
+};
+
+describe("NotebookTerminalComponent", () => {
+  it("getTerminalParams: Test for terminal", () => {
+    const terminal: NotebookTerminalComponent = createTerminal();
+    const params: Map<string, string> = terminal.getTerminalParams();
+
+    expect(params).toEqual(
+      new Map<string, string>([["terminal", "true"]])
+    );
+  });
+
+  it("getTerminalParams: Test for Mongo 3.2 terminal", () => {
+    const terminal: NotebookTerminalComponent = createMongo32Terminal();
+    const params: Map<string, string> = terminal.getTerminalParams();
+
+    expect(params).toEqual(
+      new Map<string, string>([
+        ["terminal", "true"],
+        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.documentEndpoint).host]
+      ])
+    );
+  });
+
+  it("getTerminalParams: Test for Mongo 3.6 terminal", () => {
+    const terminal: NotebookTerminalComponent = createMongo36Terminal();
+    const params: Map<string, string> = terminal.getTerminalParams();
+
+    expect(params).toEqual(
+      new Map<string, string>([
+        ["terminal", "true"],
+        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.mongoEndpoint).host]
+      ])
+    );
+  });
+
+  it("getTerminalParams: Test for Cassandra terminal", () => {
+    const terminal: NotebookTerminalComponent = createCassandraTerminal();
+    const params: Map<string, string> = terminal.getTerminalParams();
+
+    expect(params).toEqual(
+      new Map<string, string>([
+        ["terminal", "true"],
+        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.cassandraEndpoint).host]
+      ])
+    );
+  });
+});

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -0,0 +1,90 @@
+/**
+ * Wrapper around Notebook server terminal
+ */
+
+import * as React from "react";
+import * as DataModels from "../../../Contracts/DataModels";
+import { Logger } from "../../../Common/Logger";
+import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import { StringUtils } from "../../../Utils/StringUtils";
+
+export interface NotebookTerminalComponentProps {
+  notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
+  databaseAccount: DataModels.DatabaseAccount;
+}
+
+export class NotebookTerminalComponent extends React.Component<NotebookTerminalComponentProps> {
+  constructor(props: NotebookTerminalComponentProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div className="notebookTerminalContainer">
+        <iframe
+          title="Terminal to Notebook Server"
+          src={NotebookTerminalComponent.createNotebookAppSrc(this.props.notebookServerInfo, this.getTerminalParams())}
+        />
+      </div>
+    );
+  }
+
+  public getTerminalParams(): Map<string, string> {
+    let params: Map<string, string> = new Map<string, string>();
+    params.set("terminal", "true");
+
+    const terminalEndpoint: string = this.tryGetTerminalEndpoint();
+    if (terminalEndpoint) {
+      params.set("terminalEndpoint", terminalEndpoint);
+    }
+
+    return params;
+  }
+
+  public tryGetTerminalEndpoint(): string | null {
+    let terminalEndpoint: string | null;
+
+    const notebookServerEndpoint: string = this.props.notebookServerInfo.notebookServerEndpoint;
+    if (StringUtils.endsWith(notebookServerEndpoint, "mongo")) {
+      let mongoShellEndpoint: string = this.props.databaseAccount.properties.mongoEndpoint;
+      if (!mongoShellEndpoint) {
+        // mongoEndpoint is only available for Mongo 3.6 and higher.
+        // Fallback to documentEndpoint otherwise.
+        mongoShellEndpoint = this.props.databaseAccount.properties.documentEndpoint;
+      }
+      terminalEndpoint = mongoShellEndpoint;
+    } else if (StringUtils.endsWith(notebookServerEndpoint, "cassandra")) {
+      terminalEndpoint = this.props.databaseAccount.properties.cassandraEndpoint;
+    }
+
+    if (terminalEndpoint) {
+      return new URL(terminalEndpoint).host;
+    }
+    return null;
+  }
+
+  public static createNotebookAppSrc(
+    serverInfo: DataModels.NotebookWorkspaceConnectionInfo,
+    params: Map<string, string>
+  ): string {
+    if (!serverInfo.notebookServerEndpoint) {
+      const error = "Notebook server endpoint not defined. Terminal will fail to connect to jupyter server.";
+      Logger.logError(error, "NotebookTerminalComponent/createNotebookAppSrc");
+      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, error);
+      return "";
+    }
+
+    params.set("server", serverInfo.notebookServerEndpoint);
+    if (serverInfo.authToken && serverInfo.authToken.length > 0) {
+      params.set("token", serverInfo.authToken);
+    }
+
+    let result: string = "terminal.html?";
+    for (let key of params.keys()) {
+      result += `${key}=${encodeURIComponent(params.get(key))}&`;
+    }
+
+    return result;
+  }
+}

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -0,0 +1,131 @@
+/**
+ * Wrapper around Notebook metadata
+ */
+
+import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { NotebookMetadata } from "../../../Contracts/DataModels";
+import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import { Icon, Persona, Text } from "office-ui-fabric-react";
+import CSS from "csstype";
+import {
+  siteTextStyles,
+  subtleIconStyles,
+  iconStyles,
+  mainHelpfulTextStyles,
+  subtleHelpfulTextStyles,
+  helpfulTextStyles
+} from "../../../GalleryViewer/Cards/CardStyleConstants";
+
+initializeIcons();
+
+interface NotebookMetadataComponentProps {
+  notebookName: string;
+  container: ViewModels.Explorer;
+  notebookMetadata: NotebookMetadata;
+  notebookContent: any;
+}
+
+export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
+  private inlineBlockStyle: CSS.Properties = {
+    display: "inline-block"
+  };
+
+  private marginTopStyle: CSS.Properties = {
+    marginTop: "5px"
+  };
+
+  private onDownloadClick: (newNotebookName: string) => void = (newNotebookName: string) => {
+    this.props.container.importAndOpenFromGallery(
+      this.props.notebookName,
+      newNotebookName,
+      JSON.stringify(this.props.notebookContent)
+    );
+  };
+
+  public render(): JSX.Element {
+    const promptForNotebookName = () => {
+      return new Promise<string>((resolve, reject) => {
+        var newNotebookName = this.props.notebookName;
+        this.props.container.showOkCancelTextFieldModalDialog(
+          "Save notebook as",
+          undefined,
+          "Ok",
+          () => resolve(newNotebookName),
+          "Cancel",
+          () => reject(new Error("New notebook name dialog canceled")),
+          {
+            label: "New notebook name:",
+            autoAdjustHeight: true,
+            multiline: true,
+            rows: 3,
+            defaultValue: this.props.notebookName,
+            onChange: (_, newValue: string) => {
+              newNotebookName = newValue;
+            }
+          }
+        );
+      });
+    };
+
+    return (
+      <div className="notebookViewerMetadataContainer">
+        <h3 style={this.inlineBlockStyle}>{this.props.notebookName}</h3>
+
+        {this.props.notebookMetadata && (
+          <div style={this.inlineBlockStyle}>
+            <Icon iconName="Heart" styles={iconStyles} />
+            <Text variant="medium" styles={mainHelpfulTextStyles}>
+              {this.props.notebookMetadata.likes} likes
+            </Text>
+          </div>
+        )}
+
+        {this.props.container && (
+          <button
+            aria-label="downloadButton"
+            className="downloadButton"
+            onClick={async () => {
+              promptForNotebookName().then(this.onDownloadClick);
+            }}
+          >
+            Download Notebook
+          </button>
+        )}
+
+        {this.props.notebookMetadata && (
+          <>
+            <div>
+              <Persona
+                style={this.inlineBlockStyle}
+                text={this.props.notebookMetadata.author}
+                secondaryText={this.props.notebookMetadata.date}
+              />
+            </div>
+            <div>
+              <div style={this.marginTopStyle}>
+                <Icon iconName="RedEye" styles={subtleIconStyles} />
+                <Text variant="small" styles={subtleHelpfulTextStyles}>
+                  {this.props.notebookMetadata.views}
+                </Text>
+                <Icon iconName="Download" styles={subtleIconStyles} />
+                <Text variant="small" styles={subtleHelpfulTextStyles}>
+                  {this.props.notebookMetadata.downloads}
+                </Text>
+              </div>
+              <Text variant="small" styles={siteTextStyles}>
+                {this.props.notebookMetadata.tags.join(", ")}
+              </Text>
+            </div>
+            <div>
+              <Text variant="small" styles={helpfulTextStyles}>
+                <b>Description:</b>
+                <p>{this.props.notebookMetadata.description}</p>
+              </Text>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+}

src/Explorer/Controls/NotebookViewer/NotebookViewer.less

@@ -0,0 +1,11 @@
+@import "../../../../less/Common/Constants";
+
+.notebookComponentContainer {
+    height: 100vh;
+    width: 100vw;
+    margin: 0px;
+    overflow-x: hidden;
+    font-family: @DataExplorerFont;
+    padding: 20px;
+}
+

src/Explorer/Controls/NotebookViewer/NotebookViewer.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import * as ReactDOM from "react-dom";
+import "bootstrap/dist/css/bootstrap.css";
+import { NotebookMetadata } from "../../../Contracts/DataModels";
+import { NotebookViewerComponent } from "./NotebookViewerComponent";
+import { SessionStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
+
+const getNotebookUrl = (): string => {
+  const regex: RegExp = new RegExp("[?&]notebookurl=([^&#]*)|&|#|$");
+  const results: RegExpExecArray | null = regex.exec(window.location.href);
+  if (!results || !results[1]) {
+    return "";
+  }
+
+  return decodeURIComponent(results[1]);
+};
+
+const onInit = async () => {
+  var notebookMetadata: NotebookMetadata;
+  const notebookMetadataString = SessionStorageUtility.getEntryString(StorageKey.NotebookMetadata);
+  const notebookName = SessionStorageUtility.getEntryString(StorageKey.NotebookName);
+
+  if (notebookMetadataString == "null" || notebookMetadataString != null) {
+    notebookMetadata = (await JSON.parse(notebookMetadataString)) as NotebookMetadata;
+    SessionStorageUtility.removeEntry(StorageKey.NotebookMetadata);
+    SessionStorageUtility.removeEntry(StorageKey.NotebookName);
+  }
+
+  const notebookViewerComponent = (
+    <NotebookViewerComponent
+      notebookMetadata={notebookMetadata}
+      notebookName={notebookName}
+      notebookUrl={getNotebookUrl()}
+      container={null}
+    />
+  );
+  ReactDOM.render(notebookViewerComponent, document.getElementById("notebookContent"));
+};
+
+// Entry point
+window.addEventListener("load", onInit);

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less

@@ -0,0 +1,26 @@
+@import "../../../../less/Common/Constants";
+
+.notebookViewerContainer {
+  padding: @DefaultSpace;
+  height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+}
+
+.downloadButton {
+    background-color: #0078D4;
+    color: @BaseLight;
+    cursor: pointer;
+    padding: 5px;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: @mediumFontSize;
+    border-radius: 5px;
+    display: "inline-block";
+    margin: 10px;
+}
+  
+.active, .downloadButton:hover {
+  color: @BaseMedium;
+}

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -0,0 +1,88 @@
+/**
+ * Wrapper around Notebook Viewer Read only content
+ */
+
+import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
+import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
+import { createContentRef } from "@nteract/core";
+import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
+import { contents } from "rx-jupyter";
+import { NotebookMetadata } from "../../../Contracts/DataModels";
+import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
+import "./NotebookViewerComponent.less";
+
+export interface NotebookViewerComponentProps {
+  notebookName: string;
+  notebookUrl: string;
+  container: ViewModels.Explorer;
+  notebookMetadata: NotebookMetadata;
+}
+
+interface NotebookViewerComponentState {
+  element: JSX.Element;
+  content: any;
+}
+
+export class NotebookViewerComponent extends React.Component<
+  NotebookViewerComponentProps,
+  NotebookViewerComponentState
+> {
+  private clientManager: NotebookClientV2;
+  private notebookComponentBootstrapper: NotebookComponentBootstrapper;
+
+  constructor(props: NotebookViewerComponentProps) {
+    super(props);
+
+    this.clientManager = new NotebookClientV2({
+      connectionInfo: { authToken: undefined, notebookServerEndpoint: undefined },
+      databaseAccountName: undefined,
+      defaultExperience: "NotebookViewer",
+      isReadOnly: true,
+      cellEditorType: "codemirror",
+      autoSaveInterval: 365 * 24 * 3600 * 1000, // There is no way to turn off auto-save, set to 1 year
+      contentProvider: contents.JupyterContentProvider // NotebookViewer only knows how to talk to Jupyter contents API
+    });
+
+    this.notebookComponentBootstrapper = new NotebookComponentBootstrapper({
+      notebookClient: this.clientManager,
+      contentRef: createContentRef()
+    });
+
+    this.state = { element: undefined, content: undefined };
+  }
+
+  private async getJsonNotebookContent(): Promise<any> {
+    const response: Response = await fetch(this.props.notebookUrl);
+    if (response.ok) {
+      return await response.json();
+    } else {
+      return undefined;
+    }
+  }
+
+  componentDidMount() {
+    this.getJsonNotebookContent().then((jsonContent: any) => {
+      this.notebookComponentBootstrapper.setContent("json", jsonContent);
+      const notebookReadonlyComponent = this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer);
+      this.setState({ element: notebookReadonlyComponent, content: jsonContent });
+    });
+  }
+
+  public render(): JSX.Element {
+    return this.state != null ? (
+      <div className="notebookViewerContainer">
+        <NotebookMetadataComponent
+          notebookMetadata={this.props.notebookMetadata}
+          notebookName={this.props.notebookName}
+          container={this.props.container}
+          notebookContent={this.state.content}
+        />
+        {this.state.element}
+      </div>
+    ) : (
+      <></>
+    );
+  }
+}

src/Explorer/Controls/NotebookViewer/notebookViewer.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+
+    <title>Notebook Viewer</title>
+  </head>
+
+  <body>
+    <div class="notebookComponentContainer" id="notebookContent"></div>
+  </body>
+</html>

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -0,0 +1,288 @@
+import * as _ from "underscore";
+import * as React from "react";
+import * as Constants from "../../../Common/Constants";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import {
+  DetailsList,
+  DetailsListLayoutMode,
+  IDetailsListProps,
+  IDetailsRowProps,
+  DetailsRow
+} from "office-ui-fabric-react/lib/DetailsList";
+import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
+import { IconButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
+import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
+import { IContextualMenuProps, ContextualMenu } from "office-ui-fabric-react/lib/ContextualMenu";
+import {
+  IObjectWithKey,
+  ISelectionZoneProps,
+  Selection,
+  SelectionMode,
+  SelectionZone
+} from "office-ui-fabric-react/lib/utilities/selection/index";
+import { StyleConstants } from "../../../Common/Constants";
+import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField";
+import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
+import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
+
+export interface QueriesGridComponentProps {
+  queriesClient: ViewModels.QueriesClient;
+  onQuerySelect: (query: DataModels.Query) => void;
+  containerVisible: boolean;
+  saveQueryEnabled: boolean;
+}
+
+export interface QueriesGridComponentState {
+  queries: Query[];
+  filteredResults: Query[];
+}
+
+interface Query extends DataModels.Query, IObjectWithKey {
+  key: string;
+}
+
+export class QueriesGridComponent extends React.Component<QueriesGridComponentProps, QueriesGridComponentState> {
+  private selection: Selection;
+  private queryFilter: ITextField;
+
+  constructor(props: QueriesGridComponentProps) {
+    super(props);
+    this.state = {
+      queries: [],
+      filteredResults: []
+    };
+    this.selection = new Selection();
+    this.selection.setItems(this.state.filteredResults);
+  }
+
+  public componentDidUpdate(prevProps: QueriesGridComponentProps, prevState: QueriesGridComponentState): void {
+    this.selection.setItems(
+      this.state.filteredResults,
+      !_.isEqual(prevState.filteredResults, this.state.filteredResults)
+    );
+    this.queryFilter && this.queryFilter.focus();
+    const querySetupCompleted: boolean = !prevProps.saveQueryEnabled && this.props.saveQueryEnabled;
+    const noQueryFiltersApplied: boolean = !this.queryFilter || !this.queryFilter.value;
+    if (!this.props.containerVisible || !this.props.saveQueryEnabled) {
+      return;
+    } else if (noQueryFiltersApplied && (!prevProps.containerVisible || querySetupCompleted)) {
+      // refresh only when pane is opened or query setup was recently completed
+      this.fetchSavedQueries();
+    }
+  }
+
+  public render(): JSX.Element {
+    if (this.state.queries.length === 0) {
+      return this.renderBannerComponent();
+    }
+    return this.renderQueryGridComponent();
+  }
+
+  private renderQueryGridComponent(): JSX.Element {
+    const searchFilterProps: ITextFieldProps = {
+      placeholder: "Search for Queries",
+      ariaLabel: "Query filter input",
+      onChange: this.onFilterInputChange,
+      componentRef: (queryInput: ITextField) => (this.queryFilter = queryInput),
+      styles: {
+        root: { paddingBottom: "12px" },
+        field: { fontSize: `${StyleConstants.mediumFontSize}px` }
+      }
+    };
+    const selectionContainerProps: ISelectionZoneProps = {
+      selection: this.selection,
+      selectionMode: SelectionMode.single,
+      onItemInvoked: (item: Query) => this.props.onQuerySelect(item)
+    };
+    const detailsListProps: IDetailsListProps = {
+      items: this.state.filteredResults,
+      columns: this.getColumns(),
+      isHeaderVisible: false,
+      setKey: "queryName",
+      layoutMode: DetailsListLayoutMode.fixedColumns,
+      selection: this.selection,
+      selectionMode: SelectionMode.none,
+      compact: true,
+      onRenderRow: this.onRenderRow,
+      styles: {
+        root: { width: "100%" }
+      }
+    };
+
+    return (
+      <FocusZone style={{ width: "100%" }}>
+        <TextField {...searchFilterProps} />
+        <SelectionZone {...selectionContainerProps}>
+          <DetailsList {...detailsListProps} />
+        </SelectionZone>
+      </FocusZone>
+    );
+  }
+
+  private renderBannerComponent(): JSX.Element {
+    const bannerProps: React.ImgHTMLAttributes<HTMLImageElement> = {
+      src: SaveQueryBannerIcon,
+      alt: "Save query helper banner",
+      style: {
+        height: "150px",
+        width: "310px",
+        marginTop: "20px",
+        border: `1px solid ${StyleConstants.BaseMedium}`
+      }
+    };
+    return (
+      <div>
+        <div>
+          You have not saved any queries yet. <br /> <br />
+          To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
+          Query and follow the prompt in order to save the query.
+        </div>
+        <img {...bannerProps} />
+      </div>
+    );
+  }
+
+  private onFilterInputChange = (event: React.FormEvent<HTMLInputElement>, query: string): void => {
+    if (query) {
+      const filteredQueries: Query[] = this.state.queries.filter(
+        (savedQuery: Query) =>
+          savedQuery.queryName.indexOf(query) > -1 || savedQuery.queryName.toLowerCase().indexOf(query) > -1
+      );
+      this.setState({
+        filteredResults: filteredQueries
+      });
+    } else {
+      // no filter
+      this.setState({
+        filteredResults: this.state.queries
+      });
+    }
+  };
+
+  private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
+    props.styles = {
+      root: { width: "100%" },
+      fields: {
+        width: "100%",
+        justifyContent: "space-between"
+      },
+      cell: {
+        margin: "auto 0"
+      }
+    };
+    return <DetailsRow data-selection-invoke={true} {...props} />;
+  };
+
+  private getColumns(): IColumn[] {
+    return [
+      {
+        key: "Name",
+        name: "Name",
+        fieldName: "queryName",
+        minWidth: 260
+      },
+      {
+        key: "Action",
+        name: "Action",
+        fieldName: null,
+        minWidth: 70,
+        onRender: (query: Query, index: number, column: IColumn) => {
+          const buttonProps: IButtonProps = {
+            iconProps: {
+              iconName: "More",
+              title: "More",
+              ariaLabel: "More actions button"
+            },
+            menuIconProps: {
+              styles: { root: { display: "none" } }
+            },
+            menuProps: {
+              isBeakVisible: true,
+              items: [
+                {
+                  key: "Open",
+                  text: "Open query",
+                  onClick: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, menuItem: any) => {
+                    this.props.onQuerySelect(query);
+                  }
+                },
+                {
+                  key: "Delete",
+                  text: "Delete query",
+                  onClick: async (
+                    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+                    menuItem: any
+                  ) => {
+                    if (window.confirm("Are you sure you want to delete this query?")) {
+                      const container: ViewModels.Explorer = window.dataExplorer;
+                      const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
+                        databaseAccountName: container && container.databaseAccount().name,
+                        defaultExperience: container && container.defaultExperience(),
+                        dataExplorerArea: Constants.Areas.ContextualPane,
+                        paneTitle: container && container.browseQueriesPane.title()
+                      });
+                      try {
+                        await this.props.queriesClient.deleteQuery(query);
+                        TelemetryProcessor.traceSuccess(
+                          Action.DeleteSavedQuery,
+                          {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
+                            dataExplorerArea: Constants.Areas.ContextualPane,
+                            paneTitle: container && container.browseQueriesPane.title()
+                          },
+                          startKey
+                        );
+                      } catch (error) {
+                        TelemetryProcessor.traceFailure(
+                          Action.DeleteSavedQuery,
+                          {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
+                            dataExplorerArea: Constants.Areas.ContextualPane,
+                            paneTitle: container && container.browseQueriesPane.title()
+                          },
+                          startKey
+                        );
+                      }
+                      await this.fetchSavedQueries(); // get latest state
+                    }
+                  }
+                }
+              ]
+            },
+            menuAs: (menuProps: IContextualMenuProps): JSX.Element => {
+              return <ContextualMenu {...menuProps} />;
+            }
+          };
+          return <IconButton {...buttonProps} />;
+        }
+      }
+    ];
+  }
+
+  private async fetchSavedQueries(): Promise<void> {
+    let queries: Query[];
+    try {
+      queries = (await this.props.queriesClient.getQueries()) as Query[];
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+    queries = queries.map((query: Query) => {
+      query.key = query.queryName;
+      return query;
+    });
+
+    // we do a deep equality check before setting the state to avoid infinite re-renders
+    if (!_.isEqual(queries, this.state.queries)) {
+      this.setState({
+        filteredResults: queries,
+        queries: queries
+      });
+    }
+  }
+}

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

@@ -0,0 +1,32 @@
+/**
+ * This adapter is responsible to render the QueriesGrid React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+
+export class QueriesGridComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor(private container: ViewModels.Explorer) {
+    this.parameters = ko.observable<number>(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    const props: QueriesGridComponentProps = {
+      queriesClient: this.container.queriesClient,
+      onQuerySelect: this.container.browseQueriesPane.loadSavedQuery,
+      containerVisible: this.container.browseQueriesPane.visible(),
+      saveQueryEnabled: this.container.canSaveQueries()
+    };
+    return <QueriesGridComponent {...props} />;
+  }
+
+  public forceRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}

src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx

@@ -0,0 +1,45 @@
+/**
+ * Generic abstract React component that senses its dimensions.
+ * It updates its state and re-renders if dimensions change.
+ */
+
+import * as React from "react";
+import * as ResizeSensor from "css-element-queries/src/ResizeSensor";
+
+export abstract class ResizeSensorComponent<P, S> extends React.Component<P, S> {
+  private isSensing: boolean = false;
+  private resizeSensor: any;
+
+  public constructor(props: P) {
+    super(props);
+  }
+
+  protected abstract onDimensionsChanged(width: number, height: number): void;
+  protected abstract getSensorTarget(): HTMLElement;
+
+  public componentDidUpdate(): void {
+    if (this.isSensing) {
+      return;
+    }
+
+    const bar = this.getSensorTarget();
+    if (bar.clientWidth > 0 || bar.clientHeight > 0) {
+      const oldPosition = bar.style.position;
+      // TODO Find a better way to use constructor
+      this.resizeSensor = new (ResizeSensor as any)(bar, () => {
+        this.onDimensionsChanged(bar.clientWidth, bar.clientHeight);
+      });
+      this.isSensing = true;
+
+      // ResizeSensor.js sets position to 'relative' which makes the dropdown menu appear clipped.
+      // Undoing doesn't seem to affect resize sensing functionality.
+      bar.style.position = oldPosition;
+    }
+  }
+
+  public componentWillUnmount(): void {
+    if (!!this.resizeSensor) {
+      this.resizeSensor.detach();
+    }
+  }
+}

src/Explorer/Controls/Spark/ClusterSettingsComponent.less

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

src/Explorer/Controls/Spark/ClusterSettingsComponent.tsx

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

src/Explorer/Controls/Spark/ClusterSettingsComponentAdapter.tsx

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

src/Explorer/Controls/Tabs/TabComponent.less

@@ -0,0 +1,27 @@
+@import "../../../../less/Common/Constants";
+
+.tabSwitch {
+  margin-left: @LargeSpace;
+  margin-bottom: 20px;
+
+  .tab {
+      margin-right: @MediumSpace;
+  }
+
+  .toggleSwitch {
+      .toggleSwitch();
+  }
+
+  .selectedToggle {
+      .selectedToggle();
+  }
+
+  .unselectedToggle {
+      .unselectedToggle();
+  }
+}
+
+.tabComponentContent {
+    height: calc(100% - 20px);
+    .flex-display();
+}

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+
+export interface TabContent {
+  render: () => JSX.Element;
+  className?: string;
+}
+
+export interface Tab {
+  title: string;
+  content: TabContent;
+  isVisible: () => boolean;
+}
+
+interface TabComponentProps {
+  tabs: Tab[];
+  currentTabIndex: number;
+  onTabIndexChange: (newIndex: number) => void;
+  hideHeader: boolean;
+}
+
+/**
+ * We assume there's at least one tab
+ */
+export class TabComponent extends React.Component<TabComponentProps> {
+  public constructor(props: TabComponentProps) {
+    super(props);
+
+    if (this.props.tabs.length < 1) {
+      const msg = "TabComponent must have at least one tab";
+      console.error(msg);
+      throw new Error(msg);
+    }
+  }
+
+  private setActiveTab(index: number): void {
+    this.setState({ activeTabIndex: index });
+    this.props.onTabIndexChange(index);
+  }
+
+  private renderTabTitles(): JSX.Element[] {
+    return this.props.tabs.map((tab: Tab, index: number) => {
+      if (!tab.isVisible()) {
+        return <React.Fragment key={index} />;
+      }
+
+      let className = "toggleSwitch";
+      if (index === this.props.currentTabIndex) {
+        className += " selectedToggle";
+      } else {
+        className += " unselectedToggle";
+      }
+
+      return (
+        <div className="tab" key={index}>
+          <AccessibleElement
+            as="span"
+            className={className}
+            role="presentation"
+            onActivated={e => this.setActiveTab(index)}
+            aria-label={`Select tab: ${tab.title}`}
+          >
+            {tab.title}
+          </AccessibleElement>
+        </div>
+      );
+    });
+  }
+
+  public render(): JSX.Element {
+    const currentTabContent = this.props.tabs[this.props.currentTabIndex].content;
+    let className = "tabComponentContent";
+    if (currentTabContent.className) {
+      className += ` ${currentTabContent.className}`;
+    }
+
+    return (
+      <React.Fragment>
+        {!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
+        <div className={className}>{currentTabContent.render()}</div>
+      </React.Fragment>
+    );
+  }
+}

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.ts

@@ -0,0 +1,222 @@
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import editable from "../../../Common/EditableUtility";
+import { ThroughputInputComponent, ThroughputInputParams, ThroughputInputViewModel } from "./ThroughputInputComponent";
+
+const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
+
+describe.skip("Throughput Input Component", () => {
+  let component: any;
+  let vm: ThroughputInputViewModel;
+  const testId: string = "ThroughputValue";
+  const value: ViewModels.Editable<number> = editable.observable(500);
+  const minimum: ko.Observable<number> = ko.observable(400);
+  const maximum: ko.Observable<number> = ko.observable(2000);
+
+  function buildListOptions(
+    value: ViewModels.Editable<number>,
+    minimum: ko.Observable<number>,
+    maxium: ko.Observable<number>,
+    canExceedMaximumValue?: boolean
+  ): ThroughputInputParams {
+    return {
+      testId,
+      value,
+      minimum,
+      maximum,
+      canExceedMaximumValue: ko.computed<boolean>(() => Boolean(canExceedMaximumValue)),
+      costsVisible: ko.observable(false),
+      isFixed: false,
+      label: ko.observable("Label"),
+      requestUnitsUsageCost: ko.observable("requestUnitsUsageCost"),
+      showAsMandatory: false,
+      autoPilotTiersList: null,
+      autoPilotUsageCost: null,
+      isAutoPilotSelected: null,
+      selectedAutoPilotTier: null,
+      throughputAutoPilotRadioId: null,
+      throughputProvisionedRadioId: null,
+      throughputModeRadioName: null
+    };
+  }
+
+  function simulateKeyPressSpace(target: HTMLElement): Promise<boolean> {
+    const event = new KeyboardEvent("keydown", {
+      key: "space"
+    });
+
+    const result = target.dispatchEvent(event);
+
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(result);
+      }, 1000);
+    });
+  }
+
+  beforeEach(() => {
+    component = ThroughputInputComponent;
+    document.body.innerHTML = component.template as any;
+  });
+
+  afterEach(async () => {
+    await ko.cleanNode(document);
+  });
+
+  describe("Rendering", () => {
+    it("should display value text", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      expect(($("input") as HTMLInputElement).value).toContain(value().toString());
+    });
+  });
+
+  describe("Behavior", () => {
+    it("should decrease value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(450);
+      $(".testhook-decreaseThroughput").click();
+      expect(value()).toBe(400);
+      $(".testhook-decreaseThroughput").click();
+      expect(value()).toBe(400);
+    });
+
+    it("should increase value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(1950);
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(2000);
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(2000);
+    });
+
+    it("should respect lower bound limits", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(minimum());
+      $(".testhook-decreaseThroughput").click();
+      expect(value()).toBe(minimum());
+    });
+
+    it("should respect upper bound limits", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      value(maximum());
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(maximum());
+    });
+
+    it("should allow throughput to exceed upper bound limit when canExceedMaximumValue is set", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      value(maximum());
+      $(".test-increaseThroughput").click();
+      expect(value()).toBe(maximum() + 100);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it.skip("should decrease value with keypress", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      const target = $(".testhook-decreaseThroughput");
+
+      value(500);
+      expect(value()).toBe(500);
+
+      const result = await simulateKeyPressSpace(target);
+      expect(value()).toBe(400);
+    });
+
+    it.skip("should increase value with keypress", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum));
+      await ko.applyBindings(vm);
+      const target = $(".test-increaseThroughput");
+
+      value(400);
+      expect(value()).toBe(400);
+
+      const result = await simulateKeyPressSpace(target);
+      //    expect(value()).toBe(500);
+    });
+
+    it("should set the decreaseButtonAriaLabel using the default step value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 100");
+    });
+
+    it("should set the increaseButtonAriaLabel using the default step value", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 100");
+    });
+
+    it("should set the increaseButtonAriaLabel using the params step value", async () => {
+      const options = buildListOptions(value, minimum, maximum, true);
+      options.step = 10;
+      vm = new component.viewModel(options);
+      await ko.applyBindings(vm);
+      expect(vm.increaseButtonAriaLabel).toBe("Increase throughput by 10");
+    });
+
+    it("should set the decreaseButtonAriaLabel using the params step value", async () => {
+      const options = buildListOptions(value, minimum, maximum, true);
+      options.step = 10;
+      vm = new component.viewModel(options);
+      await ko.applyBindings(vm);
+      expect(vm.decreaseButtonAriaLabel).toBe("Decrease throughput by 10");
+    });
+
+    it("should set the decreaseButtonAriaLabel using the params step value", async () => {
+      const options = buildListOptions(value, minimum, maximum, true);
+      options.step = 10;
+      vm = new component.viewModel(options);
+      await ko.applyBindings(vm);
+    });
+
+    it("should have aria-label attribute on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const ariaLabel = $(".test-increaseThroughput").attributes.getNamedItem("aria-label").value;
+      expect(ariaLabel).toBe("Increase throughput by 100");
+    });
+
+    it("should have aria-label attribute on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const ariaLabel = $(".testhook-decreaseThroughput").attributes.getNamedItem("aria-label").value;
+      expect(ariaLabel).toBe("Decrease throughput by 100");
+    });
+
+    it("should have role on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".test-increaseThroughput").attributes.getNamedItem("role").value;
+      expect(role).toBe("button");
+    });
+
+    it("should have role on decrease button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("role").value;
+      expect(role).toBe("button");
+    });
+
+    it("should have tabindex 0 on increase button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
+      expect(role).toBe("0");
+    });
+
+    it("should have tabindex 0 on decrease button", async () => {
+      vm = new component.viewModel(buildListOptions(value, minimum, maximum, true));
+      await ko.applyBindings(vm);
+      const role = $(".testhook-decreaseThroughput").attributes.getNamedItem("tabindex").value;
+      expect(role).toBe("0");
+    });
+  });
+});

src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.html

@@ -0,0 +1,145 @@
+<div>
+  <div>
+    <p class="pkPadding">
+      <!-- ko if: showAsMandatory -->
+      <span class="mandatoryStar">*</span>
+      <!-- /ko -->
+
+      <span class="addCollectionLabel" data-bind="text: label"></span>
+
+      <!-- ko if: infoBubbleText -->
+      <span class="infoTooltip" role="tooltip" tabindex="0">
+        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
+        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
+      </span>
+      <!-- /ko -->
+    </p>
+  </div>
+
+  <!-- ko if: !isFixed -->
+  <div data-bind="visible: showAutoPilot" class="throughputModeContainer">
+    <input
+      class="throughputModeRadio"
+      aria-label="Autopilot mode"
+      data-test="throughput-autoPilot"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+      checked: isAutoPilotSelected,
+      checkedValue: true,
+      attr: {
+        id: throughputAutoPilotRadioId,
+        name: throughputModeRadioName,
+        'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
+      }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="
+      attr: {
+        for: throughputAutoPilotRadioId
+      }"
+      >Autopilot (preview)
+    </span>
+
+    <input
+      class="throughputModeRadio nonFirstRadio"
+      aria-label="Provisioned Throughput mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+      checked: isAutoPilotSelected,
+      checkedValue: false,
+      attr: {
+        id:  throughputProvisionedRadioId,
+        name: throughputModeRadioName,
+        'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
+      }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="
+      attr: {
+        for: throughputProvisionedRadioId
+      }"
+      >Manual
+    </span>
+  </div>
+  <!-- /ko -->
+
+  <div data-bind="visible: isAutoPilotSelected">
+    <select
+      name="autoPilotTiers"
+      class="collid select-font-size"
+      aria-label="Autopilot Max RU/s"
+      data-bind="
+          options: autoPilotTiersList,
+          optionsText: 'text',
+          optionsValue: 'value',
+          value: selectedAutoPilotTier,
+          optionsCaption: 'Choose Max RU/s'"
+    >
+    </select>
+    <p>
+      <span
+        data-bind="
+        html: autoPilotUsageCost,
+        visible: selectedAutoPilotTier"
+      >
+      </span>
+    </p>
+  </div>
+
+  <div data-bind="visible: !isAutoPilotSelected()">
+    <div data-bind="setTemplateReady: true">
+      <p class="addContainerThroughputInput">
+        <input
+          type="number"
+          required
+          data-bind="
+          textInput: value,
+          css: {
+              dirty: value.editableIsDirty
+          },
+          enable: isEnabled,
+          attr:{
+              'data-test': testId,
+              'class': cssClass,
+              step: step,
+              min: minimum,
+              max: canExceedMaximumValue() ? null : maximum,
+              'aria-label': ariaLabel
+          }"
+        />
+      </p>
+    </div>
+
+    <p data-bind="visible: costsVisible">
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+        attr: {
+          title: spendAckText,
+          id: spendAckId
+        },
+        checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+
+    <!-- ko if: isFixed -->
+    <p>
+      Choose unlimited storage capacity for more than 10,000 RU/s.
+    </p>
+    <!-- /ko -->
+  </div>
+</div>

src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts

@@ -0,0 +1,261 @@
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { KeyCodes } from "../../../Common/Constants";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+import ThroughputInputComponentTemplate from "./ThroughputInputComponent.html";
+
+/**
+ * Throughput Input:
+ *
+ * Creates a set of controls to input, sanitize and increase/decrease throughput
+ *
+ * How to use in your markup:
+ * <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
+ * </throughput-input>
+ *
+ */
+
+/**
+ * Parameters for this component
+ */
+export interface ThroughputInputParams {
+  /**
+   * Callback triggered when the template is bound to the component (for testing purposes)
+   */
+  onTemplateReady?: () => void;
+
+  /**
+   * Observable to bind the Throughput value to
+   */
+  value: ViewModels.Editable<number>;
+
+  /**
+   * Text to use as id for testing
+   */
+  testId: string;
+
+  /**
+   * Text to use as aria-label
+   */
+  ariaLabel?: ko.Observable<string>;
+
+  /**
+   * Minimum value in the range
+   */
+  minimum: ko.Observable<number>;
+
+  /**
+   * Maximum value in the range
+   */
+  maximum: ko.Observable<number>;
+
+  /**
+   * Step value for increase/decrease
+   */
+  step?: number;
+
+  /**
+   * Observable to bind the Throughput enabled status
+   */
+  isEnabled?: ko.Observable<boolean>;
+
+  /**
+   * Should show pricing controls
+   */
+  costsVisible: ko.Observable<boolean>;
+
+  /**
+   * RU price
+   */
+  requestUnitsUsageCost: ko.Subscribable<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
+
+  /**
+   * State of the spending acknowledge checkbox
+   */
+  spendAckChecked?: ko.Observable<boolean>;
+
+  /**
+   * id of the spending acknowledge checkbox
+   */
+  spendAckId?: ko.Observable<string>;
+
+  /**
+   * spending acknowledge text
+   */
+  spendAckText?: ko.Observable<string>;
+
+  /**
+   * Show spending acknowledge controls
+   */
+  spendAckVisible?: ko.Observable<boolean>;
+
+  /**
+   * Display * to the left of the label
+   */
+  showAsMandatory: boolean;
+
+  /**
+   * If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
+   */
+  isFixed: boolean;
+
+  /**
+   * Label of the provisioned throughut control
+   */
+  label: ko.Observable<string>;
+
+  /**
+   * Text of the info bubble for provisioned throughut control
+   */
+  infoBubbleText?: ko.Observable<string>;
+
+  /**
+   * Computed value that decides if value can exceed maximum allowable value
+   */
+  canExceedMaximumValue?: ko.Computed<boolean>;
+
+  /**
+   * CSS classes to apply on input element
+   */
+  cssClass?: string;
+
+  isAutoPilotSelected: ko.Observable<boolean>;
+  throughputAutoPilotRadioId: string;
+  throughputProvisionedRadioId: string;
+  throughputModeRadioName: string;
+  autoPilotTiersList: ko.ObservableArray<ViewModels.DropdownOption<DataModels.AutopilotTier>>;
+  selectedAutoPilotTier: ko.Observable<DataModels.AutopilotTier>;
+  autoPilotUsageCost: ko.Computed<string>;
+  showAutoPilot?: ko.Observable<boolean>;
+}
+
+export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
+  public ariaLabel: ko.Observable<string>;
+  public canExceedMaximumValue: ko.Computed<boolean>;
+  public step: number;
+  public testId: string;
+  public value: ViewModels.Editable<number>;
+  public minimum: ko.Observable<number>;
+  public maximum: ko.Observable<number>;
+  public isEnabled: ko.Observable<boolean>;
+  public cssClass: string;
+  public decreaseButtonAriaLabel: string;
+  public increaseButtonAriaLabel: string;
+  public costsVisible: ko.Observable<boolean>;
+  public requestUnitsUsageCost: ko.Subscribable<string>;
+  public spendAckChecked: ko.Observable<boolean>;
+  public spendAckId: ko.Observable<string>;
+  public spendAckText: ko.Observable<string>;
+  public spendAckVisible: ko.Observable<boolean>;
+  public showAsMandatory: boolean;
+  public infoBubbleText: string | ko.Observable<string>;
+  public label: ko.Observable<string>;
+  public isFixed: boolean;
+  public showAutoPilot: ko.Observable<boolean>;
+  public isAutoPilotSelected: ko.Observable<boolean>;
+  public throughputAutoPilotRadioId: string;
+  public throughputProvisionedRadioId: string;
+  public throughputModeRadioName: string;
+  public autoPilotTiersList: ko.ObservableArray<ViewModels.DropdownOption<DataModels.AutopilotTier>>;
+  public selectedAutoPilotTier: ko.Observable<DataModels.AutopilotTier>;
+  public autoPilotUsageCost: ko.Computed<string>;
+
+  public constructor(options: ThroughputInputParams) {
+    super();
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady && options.onTemplateReady) {
+        options.onTemplateReady();
+      }
+    });
+
+    const params: ThroughputInputParams = options;
+    this.testId = params.testId || "ThroughputValue";
+    this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
+    this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
+    this.step = params.step || ThroughputInputViewModel._defaultStep;
+    this.isEnabled = params.isEnabled || ko.observable(true);
+    this.cssClass = params.cssClass || "textfontclr collid";
+    this.minimum = params.minimum;
+    this.maximum = params.maximum;
+    this.value = params.value;
+    this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step.toString();
+    this.increaseButtonAriaLabel = "Increase throughput by " + this.step.toString();
+    this.costsVisible = options.costsVisible;
+    this.requestUnitsUsageCost = options.requestUnitsUsageCost;
+    this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
+    this.spendAckId = options.spendAckId || ko.observable<string>();
+    this.spendAckText = options.spendAckText || ko.observable<string>();
+    this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
+    this.showAsMandatory = !!options.showAsMandatory;
+    this.isFixed = !!options.isFixed;
+    this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
+    this.label = options.label || ko.observable<string>();
+    this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
+    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
+    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
+    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
+    this.throughputModeRadioName = options.throughputModeRadioName;
+    this.autoPilotTiersList = options.autoPilotTiersList;
+    this.selectedAutoPilotTier = options.selectedAutoPilotTier;
+    this.autoPilotUsageCost = options.autoPilotUsageCost;
+  }
+
+  public decreaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput > this.minimum()) {
+      offerThroughput -= this.step;
+      if (offerThroughput < this.minimum()) {
+        offerThroughput = this.minimum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public increaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
+      offerThroughput += this.step;
+      if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
+        offerThroughput = this.maximum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.increaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.decreaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  private _getSanitizedValue(): number {
+    const throughput = this.value();
+    return isNaN(throughput) ? 0 : Number(throughput);
+  }
+
+  private static _defaultStep: number = 100;
+}
+
+export const ThroughputInputComponent = {
+  viewModel: ThroughputInputViewModel,
+  template: ThroughputInputComponentTemplate
+};

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -0,0 +1,279 @@
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import * as ko from "knockout";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import ThroughputInputComponentAutoscaleV3 from "./ThroughputInputComponentAutoscaleV3.html";
+import { KeyCodes } from "../../../Common/Constants";
+import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
+
+/**
+ * Throughput Input:
+ *
+ * Creates a set of controls to input, sanitize and increase/decrease throughput
+ *
+ * How to use in your markup:
+ * <throughput-input params="{ value: anObservableToHoldTheValue, minimum: anObservableWithMinimum, maximum: anObservableWithMaximum }">
+ * </throughput-input>
+ *
+ */
+
+/**
+ * Parameters for this component
+ */
+export interface ThroughputInputParams {
+  /**
+   * Callback triggered when the template is bound to the component (for testing purposes)
+   */
+  onTemplateReady?: () => void;
+
+  /**
+   * Observable to bind the Throughput value to
+   */
+  value: ViewModels.Editable<number>;
+
+  /**
+   * Text to use as id for testing
+   */
+  testId: string;
+
+  /**
+   * Text to use as aria-label
+   */
+  ariaLabel?: ko.Observable<string>;
+
+  /**
+   * Minimum value in the range
+   */
+  minimum: ko.Observable<number>;
+
+  /**
+   * Maximum value in the range
+   */
+  maximum: ko.Observable<number>;
+
+  /**
+   * Step value for increase/decrease
+   */
+  step?: number;
+
+  /**
+   * Observable to bind the Throughput enabled status
+   */
+  isEnabled?: ko.Observable<boolean>;
+
+  /**
+   * Should show pricing controls
+   */
+  costsVisible: ko.Observable<boolean>;
+
+  /**
+   * RU price
+   */
+  requestUnitsUsageCost: ko.Computed<string>; // Our code assigns to ko.Computed, but unit test assigns to ko.Observable
+
+  /**
+   * State of the spending acknowledge checkbox
+   */
+  spendAckChecked?: ko.Observable<boolean>;
+
+  /**
+   * id of the spending acknowledge checkbox
+   */
+  spendAckId?: ko.Observable<string>;
+
+  /**
+   * spending acknowledge text
+   */
+  spendAckText?: ko.Observable<string>;
+
+  /**
+   * Show spending acknowledge controls
+   */
+  spendAckVisible?: ko.Observable<boolean>;
+
+  /**
+   * Display * to the left of the label
+   */
+  showAsMandatory: boolean;
+
+  /**
+   * If true, it will display a text to prompt users to use unlimited collections to go beyond max for fixed
+   */
+  isFixed: boolean;
+
+  /**
+   * Label of the provisioned throughut control
+   */
+  label: ko.Observable<string>;
+
+  /**
+   * Text of the info bubble for provisioned throughut control
+   */
+  infoBubbleText?: ko.Observable<string>;
+
+  /**
+   * Computed value that decides if value can exceed maximum allowable value
+   */
+  canExceedMaximumValue?: ko.Computed<boolean>;
+
+  /**
+   * CSS classes to apply on input element
+   */
+  cssClass?: string;
+
+  isAutoPilotSelected: ko.Observable<boolean>;
+  throughputAutoPilotRadioId: string;
+  throughputProvisionedRadioId: string;
+  throughputModeRadioName: string;
+  maxAutoPilotThroughputSet: ViewModels.Editable<number>;
+  autoPilotUsageCost: ko.Computed<string>;
+  showAutoPilot?: ko.Observable<boolean>;
+  overrideWithAutoPilotSettings: ko.Observable<boolean>;
+  overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
+}
+
+export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
+  public ariaLabel: ko.Observable<string>;
+  public canExceedMaximumValue: ko.Computed<boolean>;
+  public step: ko.Computed<number>;
+  public testId: string;
+  public value: ViewModels.Editable<number>;
+  public minimum: ko.Observable<number>;
+  public maximum: ko.Observable<number>;
+  public isEnabled: ko.Observable<boolean>;
+  public cssClass: string;
+  public decreaseButtonAriaLabel: string;
+  public increaseButtonAriaLabel: string;
+  public costsVisible: ko.Observable<boolean>;
+  public requestUnitsUsageCost: ko.Computed<string>;
+  public spendAckChecked: ko.Observable<boolean>;
+  public spendAckId: ko.Observable<string>;
+  public spendAckText: ko.Observable<string>;
+  public spendAckVisible: ko.Observable<boolean>;
+  public showAsMandatory: boolean;
+  public infoBubbleText: string | ko.Observable<string>;
+  public label: ko.Observable<string>;
+  public isFixed: boolean;
+  public showAutoPilot: ko.Observable<boolean>;
+  public isAutoPilotSelected: ko.Observable<boolean>;
+  public throughputAutoPilotRadioId: string;
+  public throughputProvisionedRadioId: string;
+  public throughputModeRadioName: string;
+  public maxAutoPilotThroughputSet: ko.Observable<number>;
+  public autoPilotUsageCost: ko.Computed<string>;
+  public minAutoPilotThroughput: ko.Observable<number>;
+  public overrideWithAutoPilotSettings: ko.Observable<boolean>;
+  public overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
+
+  public constructor(options: ThroughputInputParams) {
+    super();
+    super.onTemplateReady((isTemplateReady: boolean) => {
+      if (isTemplateReady && options.onTemplateReady) {
+        options.onTemplateReady();
+      }
+    });
+
+    const params: ThroughputInputParams = options;
+    this.testId = params.testId || "ThroughputValue";
+    this.ariaLabel = ko.observable((params.ariaLabel && params.ariaLabel()) || "");
+    this.canExceedMaximumValue = params.canExceedMaximumValue || ko.computed(() => false);
+    this.isEnabled = params.isEnabled || ko.observable(true);
+    this.cssClass = params.cssClass || "textfontclr collid migration";
+    this.minimum = params.minimum;
+    this.maximum = params.maximum;
+    this.value = params.value;
+    this.costsVisible = options.costsVisible;
+    this.requestUnitsUsageCost = options.requestUnitsUsageCost;
+    this.spendAckChecked = options.spendAckChecked || ko.observable<boolean>(false);
+    this.spendAckId = options.spendAckId || ko.observable<string>();
+    this.spendAckText = options.spendAckText || ko.observable<string>();
+    this.spendAckVisible = options.spendAckVisible || ko.observable<boolean>(false);
+    this.showAsMandatory = !!options.showAsMandatory;
+    this.isFixed = !!options.isFixed;
+    this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
+    this.label = options.label || ko.observable<string>();
+    this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
+    this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
+    this.throughputAutoPilotRadioId = options.throughputAutoPilotRadioId;
+    this.throughputProvisionedRadioId = options.throughputProvisionedRadioId;
+    this.throughputModeRadioName = options.throughputModeRadioName;
+    this.overrideWithAutoPilotSettings = options.overrideWithAutoPilotSettings || ko.observable<boolean>(false);
+    this.overrideWithProvisionedThroughputSettings =
+      options.overrideWithProvisionedThroughputSettings || ko.observable<boolean>(false);
+
+    this.maxAutoPilotThroughputSet =
+      options.maxAutoPilotThroughputSet || ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
+    this.autoPilotUsageCost = options.autoPilotUsageCost;
+    this.minAutoPilotThroughput = ko.observable<number>(AutoPilotUtils.minAutoPilotThroughput);
+
+    this.step = ko.pureComputed(() => {
+      if (this.isAutoPilotSelected()) {
+        return AutoPilotUtils.autoPilotIncrementStep;
+      }
+      return params.step || ThroughputInputViewModel._defaultStep;
+    });
+    this.decreaseButtonAriaLabel = "Decrease throughput by " + this.step().toString();
+    this.increaseButtonAriaLabel = "Increase throughput by " + this.step().toString();
+  }
+
+  public decreaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput > this.minimum()) {
+      offerThroughput -= this.step();
+      if (offerThroughput < this.minimum()) {
+        offerThroughput = this.minimum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public increaseThroughput() {
+    let offerThroughput: number = this._getSanitizedValue();
+
+    if (offerThroughput < this.maximum() || this.canExceedMaximumValue()) {
+      offerThroughput += this.step();
+      if (offerThroughput > this.maximum() && !this.canExceedMaximumValue()) {
+        offerThroughput = this.maximum();
+      }
+
+      this.value(offerThroughput);
+    }
+  }
+
+  public onIncreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.increaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public onDecreaseKeyDown = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+      this.decreaseThroughput();
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  private _getSanitizedValue(): number {
+    let throughput = this.value();
+
+    if (this.isAutoPilotSelected()) {
+      throughput = this.maxAutoPilotThroughputSet();
+    }
+    return isNaN(throughput) ? 0 : Number(throughput);
+  }
+
+  private static _defaultStep: number = 100;
+}
+
+export const ThroughputInputComponentAutoPilotV3 = {
+  viewModel: ThroughputInputViewModel,
+  template: ThroughputInputComponentAutoscaleV3
+};

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -0,0 +1,164 @@
+<div>
+  <div>
+    <p class="pkPadding">
+      <!-- ko if: showAsMandatory -->
+      <span class="mandatoryStar">*</span>
+      <!-- /ko -->
+
+      <span data-bind="text: label"></span>
+
+      <!-- ko if: infoBubbleText -->
+      <span class="infoTooltip" role="tooltip" tabindex="0">
+        <img class="infoImg" src="../../../../images/info-bubble.svg" alt="More information" />
+        <span data-bind="text: infoBubbleText" class="tooltiptext throughputRuInfo"></span>
+      </span>
+      <!-- /ko -->
+    </p>
+  </div>
+
+  <!-- ko if: !isFixed -->
+  <div data-bind="visible: showAutoPilot" class="throughputModeContainer">
+    <input
+      class="throughputModeRadio"
+      aria-label="Autopilot mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+          checked: isAutoPilotSelected,
+          checkedValue: true,
+          attr: {
+            id: throughputAutoPilotRadioId,
+            name: throughputModeRadioName,
+            'aria-checked': isAutoPilotSelected() ? 'true' : 'false'
+          }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="
+          attr: {
+            for: throughputAutoPilotRadioId
+          }"
+      >Autoscale
+    </span>
+
+    <input
+      class="throughputModeRadio nonFirstRadio"
+      aria-label="Provisioned Throughput mode"
+      type="radio"
+      role="radio"
+      tabindex="0"
+      data-bind="
+          checked: isAutoPilotSelected,
+          checkedValue: false,
+          attr: {
+            id:  throughputProvisionedRadioId,
+            name: throughputModeRadioName,
+            'aria-checked': !isAutoPilotSelected() ? 'true' : 'false'
+          }"
+    />
+    <span
+      class="throughputModeSpace"
+      data-bind="attr: {
+          for: throughputProvisionedRadioId
+        }"
+      >Manual
+    </span>
+  </div>
+  <!-- /ko -->
+
+  <div data-bind="visible: isAutoPilotSelected">
+    <p>
+      <span
+        >Provision maximum RU/s required by this resource. Estimate your required RU/s with
+        <a target="_blank" href="https://cosmos.azure.com/capacitycalculator/">capacity calculator</a>.</span
+      >
+    </p>
+    <p>
+      <span>Max RU/s</span>
+    </p>
+    <input
+      type="number"
+      data-bind="textInput: overrideWithProvisionedThroughputSettings() ? '' : maxAutoPilotThroughputSet, attr:{disabled: overrideWithProvisionedThroughputSettings(), step: step, 'class':'migration collid select-font-size', min: minAutoPilotThroughput, css: {
+          dirty: maxAutoPilotThroughputSet.editableIsDirty
+      }}"
+    />
+    <p data-bind="visible: overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()">
+      <span
+        data-bind="
+              html: autoPilotUsageCost"
+      ></span>
+    </p>
+    <p
+      data-bind="visible: costsVisible && overrideWithProvisionedThroughputSettings && !overrideWithProvisionedThroughputSettings()"
+    >
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+            attr: {
+              title: spendAckText,
+              id: spendAckId
+            },
+            checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+  </div>
+
+  <div data-bind="visible: !isAutoPilotSelected()">
+    <div data-bind="setTemplateReady: true">
+      <p class="addContainerThroughputInput">
+        <input
+          type="number"
+          required
+          data-bind="
+            textInput: overrideWithAutoPilotSettings() ? maxAutoPilotThroughputSet : value,
+            css: {
+                dirty: value.editableIsDirty
+            },
+            enable: isEnabled,
+            attr:{
+                'data-test': testId,
+                'class': cssClass,
+                step: step,
+                min: minimum,
+                max: canExceedMaximumValue() ? null : maximum,
+                'aria-label': ariaLabel,
+                disabled: overrideWithAutoPilotSettings()
+            }"
+        />
+      </p>
+    </div>
+
+    <p data-bind="visible: costsVisible">
+      <span data-bind="html: requestUnitsUsageCost"></span>
+    </p>
+
+    <!-- ko if: spendAckVisible -->
+    <p class="pkPadding">
+      <input
+        type="checkbox"
+        aria-label="acknowledge spend throughput"
+        data-bind="
+        attr: {
+          title: spendAckText,
+          id: spendAckId
+        },
+        checked: spendAckChecked"
+      />
+      <span data-bind="text: spendAckText, attr: { for: spendAckId }"></span>
+    </p>
+    <!-- /ko -->
+
+    <!-- ko if: isFixed -->
+    <p>Choose unlimited storage capacity for more than 10,000 RU/s.</p>
+    <!-- /ko -->
+  </div>
+</div>

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/Controls/TreeComponent/TreeComponent.test.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { TreeComponent, TreeNode, TreeNodeComponent } from "./TreeComponent";
+
+const buildChildren = (): TreeNode[] => {
+  const grandChild11: TreeNode = {
+    label: "ZgrandChild11"
+  };
+  const grandChild12: TreeNode = {
+    label: "AgrandChild12"
+  };
+  const child1: TreeNode = {
+    label: "Bchild1",
+    children: [grandChild11, grandChild12]
+  };
+
+  const child2: TreeNode = {
+    label: "2child2"
+  };
+
+  return [child1, child2];
+};
+
+const buildChildren2 = (): TreeNode[] => {
+  const grandChild11: TreeNode = {
+    label: "ZgrandChild11"
+  };
+  const grandChild12: TreeNode = {
+    label: "AgrandChild12"
+  };
+
+  const child1: TreeNode = {
+    label: "aChild"
+  };
+
+  const child2: TreeNode = {
+    label: "bchild",
+    children: [grandChild11, grandChild12]
+  };
+
+  const child3: TreeNode = {
+    label: "cchild"
+  };
+
+  const child4: TreeNode = {
+    label: "dchild",
+    children: [grandChild11, grandChild12]
+  };
+
+  return [child1, child2, child3, child4];
+};
+
+describe("TreeComponent", () => {
+  it("renders a simple tree", () => {
+    const root = {
+      label: "root",
+      children: buildChildren()
+    };
+
+    const props = {
+      rootNode: root,
+      className: "tree"
+    };
+
+    const wrapper = shallow(<TreeComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("TreeNodeComponent", () => {
+  it("renders a simple node (sorted children, expanded)", () => {
+    const node: TreeNode = {
+      label: "label",
+      id: "id",
+      children: buildChildren(),
+      contextMenu: [
+        {
+          label: "menuLabel",
+          onClick: undefined,
+          iconSrc: undefined,
+          isDisabled: true
+        }
+      ],
+      iconSrc: undefined,
+      isExpanded: true,
+      className: "nodeClassname",
+      isAlphaSorted: true,
+      data: undefined,
+      timestamp: 10,
+      isSelected: undefined,
+      onClick: undefined,
+      onExpanded: undefined,
+      onCollapsed: undefined
+    };
+
+    const props = {
+      node,
+      generation: 12,
+      paddingLeft: 23
+    };
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders unsorted children by default", () => {
+    const node: TreeNode = {
+      label: "label",
+      children: buildChildren(),
+      isExpanded: true
+    };
+    const props = {
+      node,
+      generation: 2,
+      paddingLeft: 9
+    };
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("does not render children by default", () => {
+    const node: TreeNode = {
+      label: "label",
+      children: buildChildren(),
+      isAlphaSorted: false
+    };
+    const props = {
+      node,
+      generation: 2,
+      paddingLeft: 9
+    };
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders sorted children, expanded, leaves and parents separated", () => {
+    const node: TreeNode = {
+      label: "label",
+      id: "id",
+      children: buildChildren2(),
+      contextMenu: [],
+      iconSrc: undefined,
+      isExpanded: true,
+      className: "nodeClassname",
+      isAlphaSorted: true,
+      isLeavesParentsSeparate: true,
+      data: undefined,
+      timestamp: 10,
+      isSelected: undefined,
+      onClick: undefined,
+      onExpanded: undefined,
+      onCollapsed: undefined
+    };
+
+    const props = {
+      node,
+      generation: 12,
+      paddingLeft: 23
+    };
+    const wrapper = shallow(<TreeNodeComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -0,0 +1,323 @@
+/**
+ * Tree component:
+ * - collapsible
+ * - icons prefix
+ * - context menu
+ */
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as Constants from "../../../Common/Constants";
+import AnimateHeight from "react-animate-height";
+import { IconButton } from "office-ui-fabric-react/lib/Button";
+import {
+  DirectionalHint,
+  IContextualMenuItemProps,
+  IContextualMenuProps
+} from "office-ui-fabric-react/lib/ContextualMenu";
+
+import TriangleDownIcon from "../../../../images/Triangle-down.svg";
+import TriangleRightIcon from "../../../../images/Triangle-right.svg";
+
+export interface TreeNodeMenuItem {
+  label: string;
+  onClick: () => void;
+  iconSrc?: string;
+  isDisabled?: boolean;
+}
+
+export interface TreeNode {
+  label: string;
+  id?: string;
+  children?: TreeNode[];
+  contextMenu?: TreeNodeMenuItem[];
+  iconSrc?: string;
+  isExpanded?: boolean;
+  className?: string;
+  isAlphaSorted?: boolean;
+  data?: any; // Piece of data corresponding to this node
+  timestamp?: number;
+  isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
+  isSelected?: () => boolean;
+  onClick?: (isExpanded: boolean) => void; // Only if a leaf, other click will expand/collapse
+  onExpanded?: () => void;
+  onCollapsed?: () => void;
+  onContextMenuOpen?: () => void;
+}
+
+export interface TreeComponentProps {
+  rootNode: TreeNode;
+  style?: any;
+  className?: string;
+}
+
+export class TreeComponent extends React.Component<TreeComponentProps> {
+  public render(): JSX.Element {
+    return (
+      <div style={this.props.style} className={`treeComponent ${this.props.className}`}>
+        <TreeNodeComponent paddingLeft={0} node={this.props.rootNode} generation={0} />
+      </div>
+    );
+  }
+}
+
+/* Tree node is a react component */
+interface TreeNodeComponentProps {
+  node: TreeNode;
+  generation: number;
+  paddingLeft: number;
+}
+
+interface TreeNodeComponentState {
+  isExpanded: boolean;
+  isMenuShowing: boolean;
+}
+export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, TreeNodeComponentState> {
+  private static readonly paddingPerGenerationPx = 16;
+  private static readonly iconOffset = 22;
+  private static readonly transitionDurationMS = 200;
+  private static readonly callbackDelayMS = 100; // avoid calling at the same time as transition to make it smoother
+  private contextMenuRef = React.createRef<HTMLDivElement>();
+  private isExpanded: boolean;
+
+  constructor(props: TreeNodeComponentProps) {
+    super(props);
+    this.isExpanded = props.node.isExpanded;
+    this.state = {
+      isExpanded: props.node.isExpanded,
+      isMenuShowing: false
+    };
+  }
+
+  componentDidUpdate(prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
+    // Only call when expand has actually changed
+    if (this.state.isExpanded !== prevState.isExpanded) {
+      if (this.state.isExpanded) {
+        this.props.node.onExpanded && setTimeout(this.props.node.onExpanded, TreeNodeComponent.callbackDelayMS);
+      } else {
+        this.props.node.onCollapsed && setTimeout(this.props.node.onCollapsed, TreeNodeComponent.callbackDelayMS);
+      }
+    }
+    if (this.props.node.isExpanded !== this.isExpanded) {
+      this.isExpanded = this.props.node.isExpanded;
+      this.setState({
+        isExpanded: this.props.node.isExpanded
+      });
+    }
+  }
+
+  public render(): JSX.Element {
+    return this.renderNode(this.props.node, this.props.generation);
+  }
+
+  private static getSortedChildren(treeNode: TreeNode): TreeNode[] {
+    if (!treeNode || !treeNode.children) {
+      return undefined;
+    }
+
+    const compareFct = (a: TreeNode, b: TreeNode) => a.label.localeCompare(b.label);
+
+    let unsortedChildren;
+    if (treeNode.isLeavesParentsSeparate) {
+      // Separate parents and leave
+      const parents: TreeNode[] = treeNode.children.filter(node => node.children);
+      const leaves: TreeNode[] = treeNode.children.filter(node => !node.children);
+
+      if (treeNode.isAlphaSorted) {
+        parents.sort(compareFct);
+        leaves.sort(compareFct);
+      }
+
+      unsortedChildren = parents.concat(leaves);
+    } else {
+      unsortedChildren = treeNode.isAlphaSorted ? treeNode.children.sort(compareFct) : treeNode.children;
+    }
+
+    return unsortedChildren;
+  }
+
+  private static isNodeHeaderBlank(node: TreeNode): boolean {
+    return (node.label === undefined || node.label === null) && !node.contextMenu;
+  }
+
+  private renderNode(node: TreeNode, generation: number): JSX.Element {
+    let paddingLeft = generation * TreeNodeComponent.paddingPerGenerationPx;
+    let additionalOffsetPx = 15;
+
+    if (node.children) {
+      const childrenWithSubChildren = node.children.filter((child: TreeNode) => !!child.children);
+      if (childrenWithSubChildren.length > 0) {
+        additionalOffsetPx = TreeNodeComponent.iconOffset;
+      }
+    }
+
+    // Don't show as selected if any of the children is selected
+    const showSelected =
+      this.props.node.isSelected &&
+      this.props.node.isSelected() &&
+      !TreeNodeComponent.isAnyDescendantSelected(this.props.node);
+
+    const headerStyle: React.CSSProperties = { paddingLeft: this.props.paddingLeft };
+    if (TreeNodeComponent.isNodeHeaderBlank(node)) {
+      headerStyle.height = 0;
+      headerStyle.padding = 0;
+    }
+
+    return (
+      <div
+        className={`${this.props.node.className || ""} main${generation} nodeItem ${showSelected ? "selected" : ""}`}
+        onClick={(event: React.MouseEvent<HTMLDivElement>) => this.onNodeClick(event, node)}
+        onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => this.onNodeKeyPress(event, node)}
+      >
+        <div
+          className={`treeNodeHeader ${this.state.isMenuShowing ? "showingMenu" : ""}`}
+          style={headerStyle}
+          tabIndex={node.children ? -1 : 0}
+          data-test={node.label}
+        >
+          {this.renderCollapseExpandIcon(node)}
+          {node.iconSrc && <img className="nodeIcon" src={node.iconSrc} alt="" />}
+          {node.label && (
+            <span className="nodeLabel" title={node.label}>
+              {node.label}
+            </span>
+          )}
+          {node.contextMenu && this.renderContextMenuButton(node)}
+        </div>
+        {node.children && (
+          <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
+            <div className="nodeChildren" data-test={node.label}>
+              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
+                <TreeNodeComponent
+                  key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
+                  node={childNode}
+                  generation={generation + 1}
+                  paddingLeft={paddingLeft + (!childNode.children && !childNode.iconSrc ? additionalOffsetPx : 0)}
+                />
+              ))}
+            </div>
+          </AnimateHeight>
+        )}
+      </div>
+    );
+  }
+
+  /**
+   * Recursive: is the node or any descendant selected
+   * @param node
+   */
+  private static isAnyDescendantSelected(node: TreeNode): boolean {
+    return (
+      node.children &&
+      node.children.reduce(
+        (previous: boolean, child: TreeNode) =>
+          previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
+        false
+      )
+    );
+  }
+
+  private static createClickEvent(): MouseEvent {
+    return new MouseEvent("click", { bubbles: true, view: window, cancelable: true });
+  }
+
+  private onRightClick = (): void => {
+    this.contextMenuRef.current.firstChild.dispatchEvent(TreeNodeComponent.createClickEvent());
+  };
+
+  private renderContextMenuButton(node: TreeNode): JSX.Element {
+    const menuItemLabel = "More";
+    return (
+      <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
+        <IconButton
+          name="More"
+          className="treeMenuEllipsis"
+          ariaLabel={menuItemLabel}
+          menuIconProps={{
+            iconName: menuItemLabel,
+            styles: { root: { fontSize: "18px", fontWeight: "bold" } }
+          }}
+          menuProps={{
+            coverTarget: true,
+            isBeakVisible: false,
+            directionalHint: DirectionalHint.topAutoEdge,
+            onMenuOpened: (contextualMenu?: IContextualMenuProps) => {
+              this.setState({ isMenuShowing: true });
+              node.onContextMenuOpen && node.onContextMenuOpen();
+            },
+            onMenuDismissed: (contextualMenu?: IContextualMenuProps) => this.setState({ isMenuShowing: false }),
+            contextualMenuItemAs: (props: IContextualMenuItemProps) => (
+              <div
+                data-test={`treeComponentMenuItemContainer`}
+                className="treeComponentMenuItemContainer"
+                onContextMenu={e => e.target.dispatchEvent(TreeNodeComponent.createClickEvent())}
+              >
+                {props.item.onRenderIcon()}
+                <span className="treeComponentMenuItemLabel">{props.item.text}</span>
+              </div>
+            ),
+            items: node.contextMenu.map((menuItem: TreeNodeMenuItem) => ({
+              key: menuItem.label,
+              text: menuItem.label,
+              disabled: menuItem.isDisabled,
+              onClick: menuItem.onClick,
+              onRenderIcon: (props: any) => <img src={menuItem.iconSrc} alt="" />
+            }))
+          }}
+        />
+      </div>
+    );
+  }
+
+  private renderCollapseExpandIcon(node: TreeNode): JSX.Element {
+    if (!node.children || !node.label) {
+      return <></>;
+    }
+
+    return (
+      <img
+        className="expandCollapseIcon"
+        src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
+        alt={this.state.isExpanded ? "Branch is expanded" : "Branch is collapsed"}
+        onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) => this.onCollapseExpandIconKeyPress(event, node)}
+        tabIndex={0}
+        role="button"
+      />
+    );
+  }
+
+  private onNodeClick = (event: React.MouseEvent<HTMLDivElement>, node: TreeNode): void => {
+    event.stopPropagation();
+    if (node.children) {
+      const isExpanded = !this.state.isExpanded;
+      // Prevent collapsing if node header is blank
+      if (!(TreeNodeComponent.isNodeHeaderBlank(node) && !isExpanded)) {
+        this.setState({ isExpanded });
+      }
+    }
+
+    this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
+  };
+
+  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
+    if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
+      event.stopPropagation();
+      this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
+    }
+  };
+
+  private onCollapseExpandIconKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
+    if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
+      event.stopPropagation();
+      if (node.children) {
+        this.setState({ isExpanded: !this.state.isExpanded });
+      }
+    }
+  };
+
+  private onMoreButtonKeyPress = (event: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
+      event.stopPropagation();
+    }
+  };
+}

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -0,0 +1,497 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TreeComponent renders a simple tree 1`] = `
+<div
+  className="treeComponent tree"
+>
+  <TreeNodeComponent
+    generation={0}
+    node={
+      Object {
+        "children": Array [
+          Object {
+            "children": Array [
+              Object {
+                "label": "ZgrandChild11",
+              },
+              Object {
+                "label": "AgrandChild12",
+              },
+            ],
+            "label": "Bchild1",
+          },
+          Object {
+            "label": "2child2",
+          },
+        ],
+        "label": "root",
+      }
+    }
+    paddingLeft={0}
+  />
+</div>
+`;
+
+exports[`TreeNodeComponent does not render children by default 1`] = `
+<div
+  className=" main2 nodeItem "
+  onClick={[Function]}
+  onKeyPress={[Function]}
+>
+  <div
+    className="treeNodeHeader "
+    data-test="label"
+    style={
+      Object {
+        "paddingLeft": 9,
+      }
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="Branch is collapsed"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
+    >
+      label
+    </span>
+  </div>
+  <AnimateHeight
+    animateOpacity={false}
+    animationStateClasses={
+      Object {
+        "animating": "rah-animating",
+        "animatingDown": "rah-animating--down",
+        "animatingToHeightAuto": "rah-animating--to-height-auto",
+        "animatingToHeightSpecific": "rah-animating--to-height-specific",
+        "animatingToHeightZero": "rah-animating--to-height-zero",
+        "animatingUp": "rah-animating--up",
+        "static": "rah-static",
+        "staticHeightAuto": "rah-static--height-auto",
+        "staticHeightSpecific": "rah-static--height-specific",
+        "staticHeightZero": "rah-static--height-zero",
+      }
+    }
+    applyInlineTransitions={true}
+    delay={0}
+    duration={200}
+    easing="ease"
+    height={0}
+    style={Object {}}
+  >
+    <div
+      className="nodeChildren"
+      data-test="label"
+    >
+      <TreeNodeComponent
+        generation={3}
+        key="Bchild1-3-undefined"
+        node={
+          Object {
+            "children": Array [
+              Object {
+                "label": "ZgrandChild11",
+              },
+              Object {
+                "label": "AgrandChild12",
+              },
+            ],
+            "label": "Bchild1",
+          }
+        }
+        paddingLeft={32}
+      />
+      <TreeNodeComponent
+        generation={3}
+        key="2child2-3-undefined"
+        node={
+          Object {
+            "label": "2child2",
+          }
+        }
+        paddingLeft={54}
+      />
+    </div>
+  </AnimateHeight>
+</div>
+`;
+
+exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
+<div
+  className="nodeClassname main12 nodeItem "
+  onClick={[Function]}
+  onKeyPress={[Function]}
+>
+  <div
+    className="treeNodeHeader "
+    data-test="label"
+    style={
+      Object {
+        "paddingLeft": 23,
+      }
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="Branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
+    >
+      label
+    </span>
+    <div
+      onContextMenu={[Function]}
+      onKeyPress={[Function]}
+    >
+      <CustomizedIconButton
+        ariaLabel="More"
+        className="treeMenuEllipsis"
+        menuIconProps={
+          Object {
+            "iconName": "More",
+            "styles": Object {
+              "root": Object {
+                "fontSize": "18px",
+                "fontWeight": "bold",
+              },
+            },
+          }
+        }
+        menuProps={
+          Object {
+            "contextualMenuItemAs": [Function],
+            "coverTarget": true,
+            "directionalHint": 3,
+            "isBeakVisible": false,
+            "items": Array [
+              Object {
+                "disabled": true,
+                "key": "menuLabel",
+                "onClick": undefined,
+                "onRenderIcon": [Function],
+                "text": "menuLabel",
+              },
+            ],
+            "onMenuDismissed": [Function],
+            "onMenuOpened": [Function],
+          }
+        }
+        name="More"
+      />
+    </div>
+  </div>
+  <AnimateHeight
+    animateOpacity={false}
+    animationStateClasses={
+      Object {
+        "animating": "rah-animating",
+        "animatingDown": "rah-animating--down",
+        "animatingToHeightAuto": "rah-animating--to-height-auto",
+        "animatingToHeightSpecific": "rah-animating--to-height-specific",
+        "animatingToHeightZero": "rah-animating--to-height-zero",
+        "animatingUp": "rah-animating--up",
+        "static": "rah-static",
+        "staticHeightAuto": "rah-static--height-auto",
+        "staticHeightSpecific": "rah-static--height-specific",
+        "staticHeightZero": "rah-static--height-zero",
+      }
+    }
+    applyInlineTransitions={true}
+    delay={0}
+    duration={200}
+    easing="ease"
+    height="auto"
+    style={Object {}}
+  >
+    <div
+      className="nodeChildren"
+      data-test="label"
+    >
+      <TreeNodeComponent
+        generation={13}
+        key="2child2-13-undefined"
+        node={
+          Object {
+            "label": "2child2",
+          }
+        }
+        paddingLeft={214}
+      />
+      <TreeNodeComponent
+        generation={13}
+        key="Bchild1-13-undefined"
+        node={
+          Object {
+            "children": Array [
+              Object {
+                "label": "ZgrandChild11",
+              },
+              Object {
+                "label": "AgrandChild12",
+              },
+            ],
+            "label": "Bchild1",
+          }
+        }
+        paddingLeft={192}
+      />
+    </div>
+  </AnimateHeight>
+</div>
+`;
+
+exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
+<div
+  className="nodeClassname main12 nodeItem "
+  onClick={[Function]}
+  onKeyPress={[Function]}
+>
+  <div
+    className="treeNodeHeader "
+    data-test="label"
+    style={
+      Object {
+        "paddingLeft": 23,
+      }
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="Branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
+    >
+      label
+    </span>
+    <div
+      onContextMenu={[Function]}
+      onKeyPress={[Function]}
+    >
+      <CustomizedIconButton
+        ariaLabel="More"
+        className="treeMenuEllipsis"
+        menuIconProps={
+          Object {
+            "iconName": "More",
+            "styles": Object {
+              "root": Object {
+                "fontSize": "18px",
+                "fontWeight": "bold",
+              },
+            },
+          }
+        }
+        menuProps={
+          Object {
+            "contextualMenuItemAs": [Function],
+            "coverTarget": true,
+            "directionalHint": 3,
+            "isBeakVisible": false,
+            "items": Array [],
+            "onMenuDismissed": [Function],
+            "onMenuOpened": [Function],
+          }
+        }
+        name="More"
+      />
+    </div>
+  </div>
+  <AnimateHeight
+    animateOpacity={false}
+    animationStateClasses={
+      Object {
+        "animating": "rah-animating",
+        "animatingDown": "rah-animating--down",
+        "animatingToHeightAuto": "rah-animating--to-height-auto",
+        "animatingToHeightSpecific": "rah-animating--to-height-specific",
+        "animatingToHeightZero": "rah-animating--to-height-zero",
+        "animatingUp": "rah-animating--up",
+        "static": "rah-static",
+        "staticHeightAuto": "rah-static--height-auto",
+        "staticHeightSpecific": "rah-static--height-specific",
+        "staticHeightZero": "rah-static--height-zero",
+      }
+    }
+    applyInlineTransitions={true}
+    delay={0}
+    duration={200}
+    easing="ease"
+    height="auto"
+    style={Object {}}
+  >
+    <div
+      className="nodeChildren"
+      data-test="label"
+    >
+      <TreeNodeComponent
+        generation={13}
+        key="bchild-13-undefined"
+        node={
+          Object {
+            "children": Array [
+              Object {
+                "label": "ZgrandChild11",
+              },
+              Object {
+                "label": "AgrandChild12",
+              },
+            ],
+            "label": "bchild",
+          }
+        }
+        paddingLeft={192}
+      />
+      <TreeNodeComponent
+        generation={13}
+        key="dchild-13-undefined"
+        node={
+          Object {
+            "children": Array [
+              Object {
+                "label": "ZgrandChild11",
+              },
+              Object {
+                "label": "AgrandChild12",
+              },
+            ],
+            "label": "dchild",
+          }
+        }
+        paddingLeft={192}
+      />
+      <TreeNodeComponent
+        generation={13}
+        key="aChild-13-undefined"
+        node={
+          Object {
+            "label": "aChild",
+          }
+        }
+        paddingLeft={214}
+      />
+      <TreeNodeComponent
+        generation={13}
+        key="cchild-13-undefined"
+        node={
+          Object {
+            "label": "cchild",
+          }
+        }
+        paddingLeft={214}
+      />
+    </div>
+  </AnimateHeight>
+</div>
+`;
+
+exports[`TreeNodeComponent renders unsorted children by default 1`] = `
+<div
+  className=" main2 nodeItem "
+  onClick={[Function]}
+  onKeyPress={[Function]}
+>
+  <div
+    className="treeNodeHeader "
+    data-test="label"
+    style={
+      Object {
+        "paddingLeft": 9,
+      }
+    }
+    tabIndex={-1}
+  >
+    <img
+      alt="Branch is expanded"
+      className="expandCollapseIcon"
+      onKeyPress={[Function]}
+      role="button"
+      src=""
+      tabIndex={0}
+    />
+    <span
+      className="nodeLabel"
+      title="label"
+    >
+      label
+    </span>
+  </div>
+  <AnimateHeight
+    animateOpacity={false}
+    animationStateClasses={
+      Object {
+        "animating": "rah-animating",
+        "animatingDown": "rah-animating--down",
+        "animatingToHeightAuto": "rah-animating--to-height-auto",
+        "animatingToHeightSpecific": "rah-animating--to-height-specific",
+        "animatingToHeightZero": "rah-animating--to-height-zero",
+        "animatingUp": "rah-animating--up",
+        "static": "rah-static",
+        "staticHeightAuto": "rah-static--height-auto",
+        "staticHeightSpecific": "rah-static--height-specific",
+        "staticHeightZero": "rah-static--height-zero",
+      }
+    }
+    applyInlineTransitions={true}
+    delay={0}
+    duration={200}
+    easing="ease"
+    height="auto"
+    style={Object {}}
+  >
+    <div
+      className="nodeChildren"
+      data-test="label"
+    >
+      <TreeNodeComponent
+        generation={3}
+        key="Bchild1-3-undefined"
+        node={
+          Object {
+            "children": Array [
+              Object {
+                "label": "ZgrandChild11",
+              },
+              Object {
+                "label": "AgrandChild12",
+              },
+            ],
+            "label": "Bchild1",
+          }
+        }
+        paddingLeft={32}
+      />
+      <TreeNodeComponent
+        generation={3}
+        key="2child2-3-undefined"
+        node={
+          Object {
+            "label": "2child2",
+          }
+        }
+        paddingLeft={54}
+      />
+    </div>
+  </AnimateHeight>
+</div>
+`;

src/Explorer/Controls/TreeComponent/treeComponent.less

@@ -0,0 +1,80 @@
+@import "../../../../less/Common/Constants";
+
+.treeComponent {
+  .nodeItem {
+    &:focus {
+      outline: 1px dashed @AccentMedium;
+    }
+
+    .treeNodeHeader {
+      padding: @SmallSpace 2px;
+      cursor: pointer;
+      display: flex;
+
+      &:hover {
+        background-color: @AccentLight;
+
+        .treeMenuEllipsis {
+          opacity: 1;
+        }
+      }
+
+      &.showingMenu {
+        background-color: #EEE;
+      }
+
+      .treeMenuEllipsis {
+        max-height: 17px;
+        padding-right: 6px;
+        position: relative;
+        left: 0px;
+        float: right;
+        padding-left: 6px;
+        opacity: 0;
+        &:focus {
+          opacity: 1;
+        }
+      }
+
+      .nodeIcon {
+        width: 16px;
+        height: 16px;
+        vertical-align: text-top;
+        margin-right: @SmallSpace;
+      }
+
+      .expandCollapseIcon {
+        width: 10px;
+        height: 10px;
+        vertical-align: middle;
+        margin: 2px @DefaultSpace 2px @SmallSpace;
+      }
+
+      .nodeLabel {
+        line-height: 18px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        flex-grow: 1;
+      }
+    }
+
+    .selected {
+      & > .treeNodeHeader {
+        background-color: @AccentExtra;
+      }
+    }
+  }
+}
+
+.treeComponentMenuItemContainer {
+  font-size: @mediumFontSize;
+
+  .treeComponentMenuItemLabel {
+    margin-left: @SmallSpace;
+  }
+
+  img {
+    vertical-align: text-bottom;
+  }
+}

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -0,0 +1,156 @@
+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 { CollectionStub, DatabaseStub, ExplorerStub } from "../OpenActionsStubs";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import { CosmosClient } from "../../Common/CosmosClient";
+import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
+
+describe("ContainerSampleGenerator", () => {
+  const createExplorerStub = (database: ViewModels.Database): ExplorerStub => {
+    const explorerStub = new ExplorerStub();
+    explorerStub.nonSystemDatabases = ko.computed(() => [database]);
+    explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
+    explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
+    explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => false);
+    explorerStub.isPreferredApiTable = ko.computed<boolean>(() => false);
+    explorerStub.isPreferredApiCassandra = ko.computed<boolean>(() => false);
+    explorerStub.canExceedMaximumValue = ko.computed<boolean>(() => false);
+    explorerStub.hasAutoPilotV2FeatureFlag = ko.computed<boolean>(() => true);
+    explorerStub.findDatabaseWithId = () => database;
+    explorerStub.refreshAllDatabases = () => Q.resolve();
+    return explorerStub;
+  };
+
+  it("should insert documents for sql API account", async () => {
+    const sampleCollectionId = "SampleCollection";
+    const sampleDatabaseId = "SampleDB";
+
+    const sampleData = {
+      databaseId: sampleDatabaseId,
+      offerThroughput: 400,
+      databaseLevelThroughput: false,
+      collectionId: sampleCollectionId,
+      rupmEnabled: false,
+      data: [
+        {
+          firstname: "Eva",
+          age: 44
+        },
+        {
+          firstname: "Véronique",
+          age: 50
+        },
+        {
+          firstname: "亜妃子",
+          age: 5
+        },
+        {
+          firstname: "John",
+          age: 23
+        }
+      ]
+    };
+    const collection = new CollectionStub({ id: ko.observable(sampleCollectionId) });
+    const database = new DatabaseStub({
+      id: ko.observable(sampleDatabaseId),
+      collections: ko.observableArray([collection])
+    });
+    database.findCollectionWithId = () => collection;
+
+    const explorerStub = createExplorerStub(database);
+    explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => true);
+
+    const fakeDocumentClientUtility = sinon.createStubInstance(DocumentClientUtilityBase);
+    fakeDocumentClientUtility.getOrCreateDatabaseAndCollection.returns(Q.resolve(collection));
+    fakeDocumentClientUtility.createDocument.returns(Q.resolve());
+
+    explorerStub.documentClientUtility = fakeDocumentClientUtility;
+
+    const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
+    generator.setData(sampleData);
+
+    await generator.createSampleContainerAsync();
+
+    expect(fakeDocumentClientUtility.createDocument.called).toBe(true);
+  });
+
+  it("should send gremlin queries for Graph API account", async () => {
+    sinon.stub(GremlinClient.prototype, "initialize").callsFake(() => {});
+    const executeStub = sinon.stub(GremlinClient.prototype, "execute").returns(Q.resolve());
+
+    sinon.stub(CosmosClient, "databaseAccount").returns({
+      properties: {}
+    });
+
+    const sampleCollectionId = "SampleCollection";
+    const sampleDatabaseId = "SampleDB";
+
+    const sampleData = {
+      databaseId: sampleDatabaseId,
+      offerThroughput: 400,
+      databaseLevelThroughput: false,
+      collectionId: sampleCollectionId,
+      rupmEnabled: false,
+      data: [
+        "g.addV('person').property(id, '1').property('_partitionKey','pk').property('name', 'Eva').property('age', 44)"
+      ]
+    };
+    const collection = new CollectionStub({ id: ko.observable(sampleCollectionId) });
+    const database = new DatabaseStub({
+      id: ko.observable(sampleDatabaseId),
+      collections: ko.observableArray([collection])
+    });
+    database.findCollectionWithId = () => collection;
+    collection.databaseId = database.id();
+
+    const explorerStub = createExplorerStub(database);
+    explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => true);
+
+    const fakeDocumentClientUtility = sinon.createStubInstance(DocumentClientUtilityBase);
+    fakeDocumentClientUtility.getOrCreateDatabaseAndCollection.returns(Q.resolve(collection));
+    fakeDocumentClientUtility.createDocument.returns(Q.resolve());
+
+    explorerStub.documentClientUtility = fakeDocumentClientUtility;
+
+    const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
+    generator.setData(sampleData);
+
+    await generator.createSampleContainerAsync();
+
+    expect(fakeDocumentClientUtility.createDocument.called).toBe(false);
+    expect(executeStub.called).toBe(true);
+  });
+
+  it("should not create any sample for Mongo API account", async () => {
+    const experience = "not supported api";
+    const explorerStub = createExplorerStub(undefined);
+    explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => true);
+    explorerStub.defaultExperience = ko.observable<string>(experience);
+
+    // Rejects with error that contains experience
+    await expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
+  });
+
+  it("should not create any sample for Table API account", async () => {
+    const experience = "not supported api";
+    const explorerStub = createExplorerStub(undefined);
+    explorerStub.isPreferredApiTable = ko.computed<boolean>(() => true);
+    explorerStub.defaultExperience = ko.observable<string>(experience);
+
+    // Rejects with error that contains experience
+    await expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
+  });
+
+  it("should not create any sample for Cassandra API account", async () => {
+    const experience = "not supported api";
+    const explorerStub = createExplorerStub(undefined);
+    explorerStub.isPreferredApiCassandra = ko.computed<boolean>(() => true);
+    explorerStub.defaultExperience = ko.observable<string>(experience);
+
+    // Rejects with error that contains experience
+    await expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
+  });
+});

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -0,0 +1,120 @@
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import GraphTab from ".././Tabs/GraphTab";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { CosmosClient } from "../../Common/CosmosClient";
+import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
+import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
+
+interface SampleDataFile extends DataModels.CreateDatabaseAndCollectionRequest {
+  data: any[];
+}
+
+export class ContainerSampleGenerator {
+  private sampleDataFile: SampleDataFile;
+
+  private constructor(private container: ViewModels.Explorer) {}
+
+  /**
+   * Factory function to load the json data file
+   */
+  public static async createSampleGeneratorAsync(container: ViewModels.Explorer): Promise<ContainerSampleGenerator> {
+    const generator = new ContainerSampleGenerator(container);
+    let dataFileContent: any;
+    if (container.isPreferredApiGraph()) {
+      dataFileContent = await import(
+        /* webpackChunkName: "gremlinSampleJsonData" */ "../../../sampleData/gremlinSampleData.json"
+      );
+    } else if (container.isPreferredApiDocumentDB()) {
+      dataFileContent = await import(
+        /* webpackChunkName: "sqlSampleJsonData" */ "../../../sampleData/sqlSampleData.json"
+      );
+    } else {
+      return Promise.reject(`Sample generation not supported for this API ${container.defaultExperience()}`);
+    }
+
+    generator.setData(dataFileContent);
+    return generator;
+  }
+
+  public async createSampleContainerAsync(): Promise<void> {
+    const collection = await this.createContainerAsync();
+    this.populateContainerAsync(collection);
+  }
+
+  public getDatabaseId(): string {
+    return this.sampleDataFile.databaseId;
+  }
+
+  public getCollectionId(): string {
+    return this.sampleDataFile.collectionId;
+  }
+
+  private async createContainerAsync(): Promise<ViewModels.Collection> {
+    const createRequest: DataModels.CreateDatabaseAndCollectionRequest = {
+      ...this.sampleDataFile
+    };
+
+    const options: any = {};
+    if (this.container.isPreferredApiMongoDB()) {
+      options.initialHeaders = options.initialHeaders || {};
+      options.initialHeaders[Constants.HttpHeaders.supportSpatialLegacyCoordinates] = true;
+      options.initialHeaders[Constants.HttpHeaders.usePolygonsSmallerThanAHemisphere] = true;
+    }
+
+    await this.container.documentClientUtility.getOrCreateDatabaseAndCollection(createRequest, options);
+    await this.container.refreshAllDatabases();
+    const database = this.container.findDatabaseWithId(this.sampleDataFile.databaseId);
+    if (!database) {
+      return undefined;
+    }
+    return database.findCollectionWithId(this.sampleDataFile.collectionId);
+  }
+
+  private async populateContainerAsync(collection: ViewModels.Collection): Promise<void> {
+    if (!collection) {
+      throw new Error("No container to populate");
+    }
+    const promises: Q.Promise<any>[] = [];
+
+    if (this.container.isPreferredApiGraph()) {
+      // For Gremlin, all queries are executed sequentially, because some queries might be dependent on other queries
+      // (e.g. adding edge requires vertices to be present)
+      const queries: string[] = this.sampleDataFile.data;
+      if (!queries || queries.length < 1) {
+        return;
+      }
+      const account = CosmosClient.databaseAccount();
+      const databaseId = collection.databaseId;
+      const gremlinClient = new GremlinClient();
+      gremlinClient.initialize({
+        endpoint: `wss://${GraphTab.getGremlinEndpoint(account)}`,
+        databaseId: databaseId,
+        collectionId: collection.id(),
+        masterKey: CosmosClient.masterKey() || "",
+        maxResultSize: 100
+      });
+
+      await queries
+        .map(query => () => gremlinClient.execute(query))
+        .reduce((previous, current) => previous.then(current), Promise.resolve());
+    } else {
+      // For SQL all queries are executed at the same time
+      this.sampleDataFile.data.forEach(doc => {
+        const subPromise = this.container.documentClientUtility.createDocument(collection, doc);
+        subPromise.catch(reason => NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, reason));
+        promises.push(subPromise);
+      });
+      await Promise.all(promises);
+    }
+  }
+
+  /**
+   * public for unit testing
+   * @param data
+   */
+  public setData(data: SampleDataFile) {
+    this.sampleDataFile = data;
+  }
+}