Bump i18next-http-backend from 1.0.23 to 1.2.1

Bumps [i18next-http-backend](https://github.com/i18next/i18next-http-backend) from 1.0.23 to 1.2.1.
- [Release notes](https://github.com/i18next/i18next-http-backend/releases)
- [Commits](https://github.com/i18next/i18next-http-backend/compare/v1.0.23...v1.2.1)

Signed-off-by: dependabot[bot] <support@github.com>

.eslintignore

@@ -97,6 +97,7 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
+src/Explorer/Notebook/FileSystemUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -125,12 +126,15 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
+src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
 src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
 src/Explorer/Panes/SaveQueryPane.ts
+src/Explorer/Panes/SettingsPane.test.ts
+src/Explorer/Panes/SettingsPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
@@ -143,6 +147,8 @@ src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
+src/Explorer/Panes/UploadFilePane.ts
+src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -249,8 +255,11 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
+src/Utils/DatabaseAccountUtils.test.ts
+src/Utils/DatabaseAccountUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
+src/Utils/QueryUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts

package.json

@@ -43,7 +43,6 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
-    "@uifabric/react-hooks": "7.14.0",
     "@uifabric/styling": "7.13.7",
     "applicationinsights": "1.8.0",
     "bootstrap": "3.4.1",
@@ -65,7 +64,7 @@
     "html2canvas": "1.0.0-rc.5",
     "i18next": "19.8.4",
     "i18next-browser-languagedetector": "6.0.1",
-    "i18next-http-backend": "1.0.23",
+    "i18next-http-backend": "1.2.1",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
@@ -152,6 +151,7 @@
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
     "html-webpack-plugin": "3.2.0",
+    "inline-css": "2.2.5",
     "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
     "jest-puppeteer": "4.4.0",

src/Common/QueriesClient.ts

@@ -6,7 +6,7 @@ import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../Utils/QueryUtils";
+import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";

src/Common/Tooltip/index.tsx

@@ -1,24 +0,0 @@
-import { useId } from "@uifabric/react-hooks";
-import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
-import * as React from "react";
-import InfoBubble from "../../../images/info-bubble.svg";
-
-const calloutProps = { gapSpace: 0 };
-const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
-
-export interface TooltipProps {
-  children: string;
-}
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
-  const tooltipId = useId("tooltip");
-
-  return children ? (
-    <span>
-      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <img className="infoImg" src={InfoBubble} alt="More information" />
-      </TooltipHost>
-    </span>
-  ) : (
-    <></>
-  );
-};

src/Common/Upload/index.tsx

@@ -1,75 +0,0 @@
-import { Image, Stack, TextField } from "office-ui-fabric-react";
-import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
-import FolderIcon from "../../../images/folder_16x16.svg";
-import * as Constants from "../../Common/Constants";
-import { Tooltip } from "../Tooltip";
-
-interface UploadProps {
-  label: string;
-  accept?: string;
-  tooltip?: string;
-  multiple?: boolean;
-  tabIndex?: number;
-  onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const Upload: FunctionComponent<UploadProps> = ({
-  label,
-  accept,
-  tooltip,
-  multiple,
-  tabIndex,
-  ...props
-}: UploadProps) => {
-  const [selectedFilesTitle, setSelectedFilesTitle] = useState<string[]>([]);
-
-  const fileRef = useRef<HTMLInputElement>();
-
-  const onImportLinkKeyPress = (event: KeyboardEvent<HTMLAnchorElement>): void => {
-    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
-      onImportLinkClick();
-    }
-  };
-
-  const onImportLinkClick = (): void => {
-    fileRef?.current?.click();
-  };
-
-  const onUpload = (event: ChangeEvent<HTMLInputElement>): void => {
-    const { files } = event.target;
-
-    const newFileList = [];
-    for (let i = 0; i < files.length; i++) {
-      newFileList.push(files.item(i).name);
-    }
-    if (newFileList) {
-      setSelectedFilesTitle(newFileList);
-      props.onUpload(event);
-    }
-  };
-  const title = label + " to upload";
-  return (
-    <div>
-      <span className="renewUploadItemsHeader">{label}</span>
-      <Tooltip>{tooltip}</Tooltip>
-      <Stack horizontal>
-        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
-        <input
-          type="file"
-          id="importFileInput"
-          style={{ display: "none" }}
-          ref={fileRef}
-          accept={accept}
-          tabIndex={tabIndex}
-          multiple={multiple}
-          title="Upload Icon"
-          onChange={onUpload}
-          role="button"
-        />
-        <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
-          <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
-        </a>
-      </Stack>
-    </div>
-  );
-};

src/Contracts/ViewModels.ts

@@ -88,6 +88,7 @@ export interface Database extends TreeNode {
   loadCollections(): Promise<void>;
   findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
+  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
   getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;

src/Explorer/ComponentRegisterer.test.ts

@@ -77,6 +77,10 @@ describe("Component Registerer", () => {
     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);
   });
@@ -93,6 +97,10 @@ describe("Component Registerer", () => {
     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);
   });

src/Explorer/ComponentRegisterer.ts

@@ -1,30 +1,31 @@
 import * as ko from "knockout";
+import * as PaneComponents from "./Panes/PaneComponents";
 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 { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
-import * as PaneComponents from "./Panes/PaneComponents";
-import ConflictsTab from "./Tabs/ConflictsTab";
-import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
+import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
+
 import DocumentsTab from "./Tabs/DocumentsTab";
-import GalleryTab from "./Tabs/GalleryTab";
-import GraphTab from "./Tabs/GraphTab";
-import MongoShellTab from "./Tabs/MongoShellTab";
-import NotebookTabV2 from "./Tabs/NotebookV2Tab";
-import NotebookViewerTab from "./Tabs/NotebookViewerTab";
-import QueryTab from "./Tabs/QueryTab";
-import QueryTablesTab from "./Tabs/QueryTablesTab";
-import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
 import StoredProcedureTab from "./Tabs/StoredProcedureTab";
-import TabsManagerTemplate from "./Tabs/TabsManager.html";
-import TerminalTab from "./Tabs/TerminalTab";
 import TriggerTab from "./Tabs/TriggerTab";
 import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
+import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
+import QueryTab from "./Tabs/QueryTab";
+import QueryTablesTab from "./Tabs/QueryTablesTab";
+import GraphTab from "./Tabs/GraphTab";
+import MongoShellTab from "./Tabs/MongoShellTab";
+import ConflictsTab from "./Tabs/ConflictsTab";
+import NotebookTabV2 from "./Tabs/NotebookV2Tab";
+import TerminalTab from "./Tabs/TerminalTab";
+import GalleryTab from "./Tabs/GalleryTab";
+import NotebookViewerTab from "./Tabs/NotebookViewerTab";
+import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
+import TabsManagerTemplate from "./Tabs/TabsManager.html";
 
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
@@ -64,7 +65,10 @@ 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());
@@ -72,9 +76,13 @@ ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEnt
 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("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("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -1,22 +1,23 @@
+import * as ko from "knockout";
+import * as ViewModels from "../Contracts/ViewModels";
+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 AddTriggerIcon from "../../images/AddTrigger.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
 import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
 import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.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 HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
-import * as ViewModels from "../Contracts/ViewModels";
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
-import { userContext } from "../UserContext";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
 import Explorer from "./Explorer";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { userContext } from "../UserContext";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -42,7 +43,7 @@ export class ResourceTreeContextMenuButtonFactory {
     if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
       items.push({
         iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.openDeleteDatabaseConfirmationPane(),
+        onClick: () => container.deleteDatabaseConfirmationPane.open(),
         label: container.deleteDatabaseText(),
         styleClass: "deleteDatabaseMenuItem",
       });

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

@@ -350,11 +350,11 @@ exports[`test render renders with filters 1`] = `
       }
     >
       <div
-        className="ms-ScrollablePane root-72"
+        className="ms-ScrollablePane root-40"
         data-is-scrollable="true"
       >
         <div
-          className="stickyAbove-74"
+          className="stickyAbove-42"
           style={
             Object {
               "height": 0,
@@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
           }
         />
         <div
-          className="ms-ScrollablePane--contentContainer contentContainer-73"
+          className="ms-ScrollablePane--contentContainer contentContainer-41"
           data-is-scrollable={true}
         >
           <Sticky
@@ -691,18 +691,18 @@ exports[`test render renders with filters 1`] = `
                       validateOnLoad={true}
                     >
                       <div
-                        className="ms-TextField directoryListFilterTextBox root-78"
+                        className="ms-TextField directoryListFilterTextBox root-46"
                       >
                         <div
                           className="ms-TextField-wrapper"
                         >
                           <div
-                            className="ms-TextField-fieldGroup fieldGroup-79"
+                            className="ms-TextField-fieldGroup fieldGroup-47"
                           >
                             <input
                               aria-invalid={false}
                               aria-label="Directory filter text box"
-                              className="ms-TextField-field field-80"
+                              className="ms-TextField-field field-48"
                               id="TextField0"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -1900,7 +1900,7 @@ exports[`test render renders with filters 1`] = `
                         >
                           <button
                             aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-89"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
                             data-is-focusable={false}
                             disabled={true}
                             onClick={[Function]}
@@ -1912,7 +1912,7 @@ exports[`test render renders with filters 1`] = `
                             type="button"
                           >
                             <span
-                              className="ms-Button-flexContainer flexContainer-90"
+                              className="ms-Button-flexContainer flexContainer-58"
                               data-automationid="splitbuttonprimary"
                             >
                               <div
@@ -1943,7 +1943,7 @@ exports[`test render renders with filters 1`] = `
           </List>
         </div>
         <div
-          className="stickyBelow-75"
+          className="stickyBelow-43"
           style={
             Object {
               "bottom": "0px",
@@ -1954,7 +1954,7 @@ exports[`test render renders with filters 1`] = `
           }
         >
           <div
-            className="stickyBelowItems-76"
+            className="stickyBelowItems-44"
           />
         </div>
       </div>

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

@@ -18,7 +18,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 
 export interface GalleryCardComponentProps {

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -1,19 +1,17 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import * as DataModels from "../../../Contracts/DataModels";
+import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import Explorer from "../../Explorer";
 import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
-import { isDirty, TtlType } from "./SettingsUtils";
 import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import ko from "knockout";
+import { TtlType, isDirty } from "./SettingsUtils";
+import Explorer from "../../Explorer";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -31,6 +29,8 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     analyticalStorageTtl: undefined,
   } as MongoDBCollectionResource),
 }));
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -134,6 +134,7 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
+      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,

src/Explorer/Controls/Settings/SettingsUtils.test.tsx

@@ -1,23 +1,23 @@
-import ko from "knockout";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
+import { collection } from "./TestUtils";
 import {
   getMongoIndexType,
-  getMongoIndexTypeText,
   getMongoNotification,
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
-  isIndexTransforming,
   MongoIndexTypes,
   MongoNotificationType,
-  MongoWildcardPlaceHolder,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
+  MongoWildcardPlaceHolder,
+  getMongoIndexTypeText,
   SingleFieldText,
   WildcardText,
+  isIndexTransforming,
 } from "./SettingsUtils";
-import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import ko from "knockout";
 
 describe("SettingsUtils", () => {
   it("hasDatabaseSharedThroughput", () => {
@@ -42,6 +42,7 @@ describe("SettingsUtils", () => {
         loadCollections: undefined,
         findCollectionWithId: undefined,
         openAddCollection: undefined,
+        onDeleteDatabaseContextMenuClick: undefined,
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -1,7 +1,7 @@
-import { shallow } from "enzyme";
 import React from "react";
-import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
+import { shallow } from "enzyme";
 import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
+import { NumberUiType, SmartUiInput, DescriptionType } from "../../../SelfServe/SelfServeTypes";
 
 describe("SmartUiComponent", () => {
   const exampleData: SmartUiDescriptor = {
@@ -97,9 +97,9 @@ describe("SmartUiComponent", () => {
             dataFieldName: "database",
             type: "object",
             choices: [
-              { labelTKey: "Database 1", key: "db1" },
-              { labelTKey: "Database 2", key: "db2" },
-              { labelTKey: "Database 3", key: "db3" },
+              { label: "Database 1", key: "db1" },
+              { label: "Database 2", key: "db2" },
+              { label: "Database 3", key: "db3" },
             ],
             defaultKey: "db2",
           },

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -331,10 +331,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
           placeholder={this.props.getTranslation(placeholderTKey)}
           disabled={disabled}
-          // Removed dropdownWidth="auto" as dropdown accept only number
+          dropdownWidth="auto"
           options={choices.map((c) => ({
             key: c.key,
-            text: this.props.getTranslation(c.labelTKey),
+            text: this.props.getTranslation(c.label),
           }))}
           styles={{
             root: { width: 400 },

src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap

@@ -285,6 +285,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             <StyledWithResponsiveMode
               aria-labelledby="database-label"
               disabled={true}
+              dropdownWidth="auto"
               id="database-dropdown-input"
               onChange={[Function]}
               options={
@@ -606,6 +607,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             </StyledLabelBase>
             <StyledWithResponsiveMode
               aria-labelledby="database-label"
+              dropdownWidth="auto"
               id="database-dropdown-input"
               onChange={[Function]}
               options={

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -2,17 +2,17 @@ jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
 jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
-import Q from "q";
-import { createDocument } from "../../Common/dataAccess/createDocument";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
+import Q from "q";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import Explorer from "../Explorer";
+import { updateUserContext } from "../../UserContext";
 
 describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
-    explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
+    explorerStub.nonSystemDatabases = ko.computed(() => [database]);
     explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
     explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
     explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => false);

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -1,9 +1,9 @@
-import * as ko from "knockout";
-import * as sinon from "sinon";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import Explorer from "../Explorer";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { DataSamplesUtil } from "./DataSamplesUtil";
+import * as sinon from "sinon";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as ko from "knockout";
+import Explorer from "../Explorer";
+import { Database, Collection } from "../../Contracts/ViewModels";
 
 describe("DataSampleUtils", () => {
   const sampleCollectionId = "sampleCollectionId";
@@ -16,7 +16,7 @@ describe("DataSampleUtils", () => {
       collections: ko.observableArray<Collection>([collection]),
     } as Database;
     const explorer = {} as Explorer;
-    explorer.databases = ko.observableArray<Database>([database]);
+    explorer.nonSystemDatabases = ko.computed(() => [database]);
     explorer.showOkModalDialog = () => {};
     const dataSamplesUtil = new DataSamplesUtil(explorer);
 

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,8 +1,8 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import Explorer from "../Explorer";
 
 export class DataSamplesUtil {
   private static readonly DialogTitle = "Create Sample Container";
@@ -17,7 +17,7 @@ export class DataSamplesUtil {
 
     const databaseName = generator.getDatabaseId();
     const containerName = generator.getCollectionId();
-    if (this.hasContainer(databaseName, containerName, this.container.databases())) {
+    if (this.hasContainer(databaseName, containerName, this.container.nonSystemDatabases())) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
       this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
       NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);

src/Explorer/Explorer.test.tsx

@@ -1,43 +0,0 @@
-jest.mock("./../Common/dataAccess/deleteDatabase");
-jest.mock("./../Shared/Telemetry/TelemetryProcessor");
-import * as ko from "knockout";
-import { deleteDatabase } from "./../Common/dataAccess/deleteDatabase";
-import * as ViewModels from "./../Contracts/ViewModels";
-import Explorer from "./Explorer";
-
-describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
-  let explorer: Explorer;
-  beforeAll(() => {
-    (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-  });
-
-  beforeEach(() => {
-    explorer = new Explorer();
-  });
-
-  it("should be true if only 1 database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastDatabase()).toBe(true);
-  });
-
-  it("should be false if only 2 databases", () => {
-    const database = {} as ViewModels.Database;
-    const database2 = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
-    expect(explorer.isLastDatabase()).toBe(false);
-  });
-
-  it("should be false if not last empty database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(false);
-  });
-
-  it("should be true if last non empty database", () => {
-    const database = {} as ViewModels.Database;
-    database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(true);
-  });
-});

src/Explorer/Explorer.tsx

@@ -44,7 +44,7 @@ import { DialogProps, TextFieldProps } from "./Controls/Dialog";
 import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import * as FileSystemUtil from "./Notebook/FileSystemUtil";
+import { FileSystemUtil } from "./Notebook/FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
@@ -55,8 +55,8 @@ import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
-import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
-import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
+import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
+import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
@@ -70,6 +70,7 @@ import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
 import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
+import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
@@ -179,6 +180,7 @@ export default class Explorer {
 
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
+  public nonSystemDatabases: ko.Computed<ViewModels.Database[]>;
   public selectedDatabaseId: ko.Computed<string>;
   public selectedCollectionId: ko.Computed<string>;
   public isLeftPaneExpanded: ko.Observable<boolean>;
@@ -203,6 +205,7 @@ export default class Explorer {
   public addDatabasePane: AddDatabasePane;
   public addCollectionPane: AddCollectionPane;
   public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
+  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
   public graphStylingPane: GraphStylingPane;
   public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
@@ -210,9 +213,14 @@ export default class Explorer {
   public querySelectPane: QuerySelectPane;
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
+  public settingsPane: SettingsPane;
+  public executeSprocParamsPane: ExecuteSprocParamsPane;
+  public uploadItemsPane: UploadItemsPane;
+  public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
   public loadQueryPane: LoadQueryPane;
   public saveQueryPane: ContextualPaneBase;
   public browseQueriesPane: BrowseQueriesPane;
+  public uploadFilePane: UploadFilePane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
   public gitHubReposPane: ContextualPaneBase;
@@ -249,6 +257,7 @@ export default class Explorer {
   public closeDialog: ExplorerParams["closeDialog"];
 
   private _panes: ContextualPaneBase[] = [];
+  private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = (database) => false;
   private _isInitializingNotebooks: boolean;
   private notebookBasePath: ko.Observable<string>;
   private _arcadiaManager: ArcadiaResourceManager;
@@ -519,6 +528,17 @@ export default class Explorer {
         configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
     );
     this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
+    this.defaultExperience.subscribe((defaultExperience: string) => {
+      if (
+        defaultExperience &&
+        defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase()
+      ) {
+        this._isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
+          return database.id() === "system";
+        };
+      }
+    });
+
     this.selectedDatabaseId = ko.computed<string>(() => {
       const selectedNode = this.selectedNode();
       if (!selectedNode) {
@@ -540,6 +560,10 @@ export default class Explorer {
       }
     });
 
+    this.nonSystemDatabases = ko.computed(() => {
+      return this.databases().filter((database: ViewModels.Database) => !this._isSystemDatabasePredicate(database));
+    });
+
     this.addDatabasePane = new AddDatabasePane({
       id: "adddatabasepane",
       visible: ko.observable<boolean>(false),
@@ -562,6 +586,13 @@ export default class Explorer {
       container: this,
     });
 
+    this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
+      id: "deletedatabaseconfirmationpane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
     this.graphStylingPane = new GraphStylingPane({
       id: "graphstylingpane",
       visible: ko.observable<boolean>(false),
@@ -611,6 +642,29 @@ export default class Explorer {
       container: this,
     });
 
+    this.settingsPane = new SettingsPane({
+      id: "settingspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.executeSprocParamsPane = new ExecuteSprocParamsPane({
+      id: "executesprocparamspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.uploadItemsPane = new UploadItemsPane({
+      id: "uploaditemspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
       visible: ko.observable<boolean>(false),
@@ -632,6 +686,13 @@ export default class Explorer {
       container: this,
     });
 
+    this.uploadFilePane = new UploadFilePane({
+      id: "uploadfilepane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
     this.stringInputPane = new StringInputPane({
       id: "stringinputpane",
       visible: ko.observable<boolean>(false),
@@ -652,6 +713,7 @@ export default class Explorer {
       this.addDatabasePane,
       this.addCollectionPane,
       this.deleteCollectionConfirmationPane,
+      this.deleteDatabaseConfirmationPane,
       this.graphStylingPane,
       this.addTableEntityPane,
       this.editTableEntityPane,
@@ -659,9 +721,13 @@ export default class Explorer {
       this.querySelectPane,
       this.newVertexPane,
       this.cassandraAddCollectionPane,
+      this.settingsPane,
+      this.executeSprocParamsPane,
+      this.uploadItemsPane,
       this.loadQueryPane,
       this.saveQueryPane,
       this.browseQueriesPane,
+      this.uploadFilePane,
       this.stringInputPane,
       this.setupNotebooksPane,
     ];
@@ -757,6 +823,8 @@ export default class Explorer {
         this.editTableEntityPane.title("Edit Table Row");
         this.deleteCollectionConfirmationPane.title("Delete Table");
         this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+        this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
+        this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
         this.tableDataClient = new CassandraAPIDataClient();
         break;
     }
@@ -1279,12 +1347,7 @@ export default class Explorer {
   }
 
   public isLastNonEmptyDatabase(): boolean {
-    if (
-      this.isLastDatabase() &&
-      this.databases()[0] &&
-      this.databases()[0].collections &&
-      this.databases()[0].collections().length > 0
-    ) {
+    if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
       return true;
     }
     return false;
@@ -2077,6 +2140,38 @@ export default class Explorer {
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
   }
 
+  public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
+
+    this.uploadFilePane.openWithOptions({
+      paneTitle: "Upload file to notebook server",
+      selectFileInputLabel: "Select file to upload",
+      errorMessage: "Could not upload file",
+      inProgressMessage: "Uploading file to notebook server",
+      successMessage: "Successfully uploaded file to notebook server",
+      onSubmit: async (file: File): Promise<NotebookContentItem> => {
+        const readFileAsText = (inputFile: File): Promise<string> => {
+          const reader = new FileReader();
+          return new Promise((resolve, reject) => {
+            reader.onerror = () => {
+              reader.abort();
+              reject(`Problem parsing file: ${inputFile}`);
+            };
+            reader.onload = () => {
+              resolve(reader.result as string);
+            };
+            reader.readAsText(inputFile);
+          });
+        };
+
+        const fileContent = await readFileAsText(file);
+        return this.uploadFile(file.name, fileContent, parent);
+      },
+      extensions: undefined,
+      submitButtonLabel: "Upload",
+    });
+  }
+
   public refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to refresh notebook list, but notebook is not enabled";
@@ -2385,33 +2480,6 @@ export default class Explorer {
         );
   }
 
-  public openDeleteDatabaseConfirmationPane(): void {
-    this.openSidePanel(
-      "Delete Database",
-      <DeleteDatabaseConfirmationPanel
-        explorer={this}
-        openNotificationConsole={this.expandConsole}
-        closePanel={this.closeSidePanel}
-        selectedDatabase={this.findSelectedDatabase()}
-      />
-    );
-  }
-
-  public openUploadItemsPanePane(): void {
-    this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openSettingPane(): void {
-    this.openSidePanel("Settings", <SettingsPane explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openExecuteSprocParamsPanel(): void {
-    this.openSidePanel(
-      "Input parameters",
-      <ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
-    );
-  }
-
   public async openAddCollectionPanel(): Promise<void> {
     await this.loadDatabaseOffers();
     this.openSidePanel(
@@ -2423,15 +2491,4 @@ export default class Explorer {
       />
     );
   }
-  public openUploadFilePanel(parent?: NotebookContentItem): void {
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
-    this.openSidePanel(
-      "Upload File",
-      <UploadFilePane
-        explorer={this}
-        closePanel={this.closeSidePanel}
-        uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)}
-      />
-    );
-  }
 }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -164,7 +164,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     const settingsPaneButton: CommandButtonComponentProps = {
       iconSrc: SettingsIcon,
       iconAlt: label,
-      onCommandClick: () => container.openSettingPane(),
+      onCommandClick: () => container.settingsPane.open(),
       commandButtonLabel: undefined,
       ariaLabel: label,
       tooltipText: label,
@@ -407,7 +407,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
   return {
     iconSrc: NewNotebookIcon,
     iconAlt: label,
-    onCommandClick: () => container.openUploadFilePanel(),
+    onCommandClick: () => container.onUploadToNotebookServerClicked(),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,

src/Explorer/Notebook/FileSystemUtil.ts

@@ -1,33 +1,37 @@
-/**
- * file list returns path starting with ./blah
- * rename returns simply blah.
- * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
- * ./ inside the path.
- * TODO: this should go away when not using jupyter for file operations and use normalized paths.
- * @param path1
- * @param path2
- */
-export function isPathEqual(path1: string, path2: string): boolean {
-  const normalize = (path: string): string => {
-    const dotSlash = "./";
-    if (path.indexOf(dotSlash) === 0) {
-      path = path.substring(dotSlash.length);
-    }
-    return path;
-  };
+// Utilities for file system
 
-  return normalize(path1) === normalize(path2);
-}
+export class FileSystemUtil {
+  /**
+   * file list returns path starting with ./blah
+   * rename returns simply blah.
+   * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
+   * ./ inside the path.
+   * TODO: this should go away when not using jupyter for file operations and use normalized paths.
+   * @param path1
+   * @param path2
+   */
+  public static isPathEqual(path1: string, path2: string): boolean {
+    const normalize = (path: string): string => {
+      const dotSlash = "./";
+      if (path.indexOf(dotSlash) === 0) {
+        path = path.substring(dotSlash.length);
+      }
+      return path;
+    };
 
-/**
- * Remove extension
- * @param path
- * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
- */
-export function stripExtension(path: string, extension: string): string {
-  const splitted = path.split(".");
-  if (splitted[splitted.length - 1] === extension) {
-    splitted.pop();
+    return normalize(path1) === normalize(path2);
+  }
+
+  /**
+   * Remove extension
+   * @param path
+   * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
+   */
+  public static stripExtension(path: string, extension: string): string {
+    const splitted = path.split(".");
+    if (splitted[splitted.length - 1] === extension) {
+      splitted.pop();
+    }
+    return splitted.join(".");
   }
-  return splitted.join(".");
 }

src/Explorer/Notebook/NotebookClientV2.ts

@@ -1,14 +1,16 @@
 // Manages all the redux logic for the notebook nteract code
 // TODO: Merge with NotebookClient?
+import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
+import * as Constants from "../../Common/Constants";
+import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
+
 // Vendor modules
 import {
   actions,
   AppState,
-  ContentRecord, createHostRef,
+  createHostRef,
   createKernelspecsRef,
-  HostRecord,
-  HostRef,
-  IContentProvider, KernelspecsRef, makeAppRecord,
+  makeAppRecord,
   makeCommsRecord,
   makeContentsRecord,
   makeEditorsRecord,
@@ -16,22 +18,24 @@ import {
   makeHostsRecord,
   makeJupyterHostRecord,
   makeStateRecord,
-  makeTransformsRecord
+  makeTransformsRecord,
+  ContentRecord,
+  HostRecord,
+  HostRef,
+  KernelspecsRef,
+  IContentProvider,
 } from "@nteract/core";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
-import { Notification } from "react-notification-system";
-import { AnyAction, Dispatch, Middleware, MiddlewareAPI, Store } from "redux";
-import * as Constants from "../../Common/Constants";
-import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
+
 import configureStore from "./NotebookComponent/store";
-import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
-import IFrameHTML from "./NotebookRenderer/outputs/IFrameHTML";
-import IFrameJavaScript from "./NotebookRenderer/outputs/IFrameJavaScript";
+
+import { Notification } from "react-notification-system";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };
 
@@ -164,8 +168,8 @@ export class NotebookClientV2 {
               "application/vnd.vega.v5+json": NullTransform,
               "application/vdom.v1+json": TransformVDOM,
               "application/json": Media.Json,
-              "application/javascript": IFrameJavaScript,
-              "text/html": IFrameHTML,
+              "application/javascript": Media.JavaScript,
+              "text/html": Media.HTML,
               "text/markdown": Media.Markdown,
               "text/latex": Media.LaTeX,
               "image/svg+xml": Media.SVG,

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -44,7 +44,7 @@ import { CdbAppState } from "./types";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import * as TextFile from "./contents/file/text-file";
 import { NotebookUtil } from "../NotebookUtil";
-import * as FileSystemUtil from "../FileSystemUtil";
+import { FileSystemUtil } from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";
 

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,12 +1,13 @@
-import { stringifyNotebook } from "@nteract/commutable";
-import { FileType, IContent, IContentProvider, IEmptyContent, ServerConfig } from "@nteract/core";
-import { AjaxResponse } from "rxjs/ajax";
 import * as DataModels from "../../Contracts/DataModels";
-import * as StringUtils from "../../Utils/StringUtils";
-import * as FileSystemUtil from "./FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
+import * as StringUtils from "../../Utils/StringUtils";
+import { FileSystemUtil } from "./FileSystemUtil";
 import { NotebookUtil } from "./NotebookUtil";
 
+import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } from "@nteract/core";
+import { AjaxResponse } from "rxjs/ajax";
+import { stringifyNotebook } from "@nteract/commutable";
+
 export class NotebookContentClient {
   constructor(
     private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,

src/Explorer/Notebook/NotebookRenderer/outputs/IFrameHTML.tsx

@@ -1,63 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-
-interface Props {
-  /**
-   * The HTML string that will be rendered.
-   */
-  data: string;
-  /**
-   * The media type associated with the HTML
-   * string. This defaults to text/html.
-   */
-  mediaType: "text/html";
-}
-
-const StyledIFrame = styled.iframe`
-  width: 100%;
-  border-style: unset;
-`;
-
-export class IFrameHTML extends React.PureComponent<Props> {
-  static defaultProps = {
-    data: "",
-    mediaType: "text/html"
-  };
-
-  frame?: HTMLIFrameElement;
-
-  appendChildDOM(): void {
-    if (!this.frame) {
-      return;
-    }
-
-    this.frame.contentDocument.open();
-    this.frame.contentDocument.write(this.props.data);
-    this.frame.contentDocument.close();
-  }
-
-  componentDidMount(): void {
-    this.appendChildDOM();
-  }
-
-  componentDidUpdate(): void {
-    this.appendChildDOM();
-  }
-
-  render() {
-    return (
-      <StyledIFrame
-        ref={frame => this.frame = frame}
-        allow="accelerometer; autoplay; camera; gyroscope; magnetometer; microphone; xr-spatial-tracking"
-        sandbox="allow-downloads allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox"
-        onLoad={() => this.onFrameLoaded()} />
-    );
-  }
-
-  onFrameLoaded() {
-    this.frame.height = (this.frame.contentDocument.body.scrollHeight + 4) + "px";
-    this.frame.contentDocument.body.style.margin = "0px";
-  }
-}
-
-export default IFrameHTML;

src/Explorer/Notebook/NotebookRenderer/outputs/IFrameJavaScript.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import IFrameHTML from "./IFrameHTML";
-
-interface Props {
-  /**
-   * The JavaScript code that we would like to execute.
-   */
-  data: string;
-  /**
-   * The media type associated with our component.
-   */
-  mediaType: "text/javascript";
-}
-
-export class IFrameJavaScript extends React.PureComponent<Props> {
-  static defaultProps = {
-    data: "",
-    mediaType: "application/javascript"
-  };
-
-  render() {
-    return (
-      <IFrameHTML data={`<script>${this.props.data}</script>`} />
-    );
-  }
-}
-
-export default IFrameJavaScript;

src/Explorer/OpenActions.ts

@@ -1,7 +1,7 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
 
-import { ActionContracts } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
+import { ActionContracts } from "../Contracts/ExplorerContracts";
 import Explorer from "./Explorer";
 
 export function handleOpenAction(
@@ -145,7 +145,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
   ) {
     explorer.closeAllPanes();
-    explorer.openSettingPane();
+    explorer.settingsPane.open();
   }
 }
 

src/Explorer/Panes/CassandraAddCollectionPane.html

@@ -114,7 +114,7 @@
               aria-label="Keyspace id"
             />
 
-            <datalist id="keyspacesList" data-bind="foreach: container.databases">
+            <datalist id="keyspacesList" data-bind="foreach: container.nonSystemDatabases">
               <option data-bind="value: $data.id"></option>
             </datalist>
 

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -261,8 +261,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         });
         this.keyspaceIds(cachedKeyspaceIdsList);
       };
-      this.container.databases.subscribe((newDatabases: ViewModels.Database[]) => updateKeyspaceIds(newDatabases));
-      updateKeyspaceIds(this.container.databases());
+      this.container.nonSystemDatabases.subscribe((newDatabases: ViewModels.Database[]) =>
+        updateKeyspaceIds(newDatabases)
+      );
+      updateKeyspaceIds(this.container.nonSystemDatabases());
     }
 
     this.autoPilotUsageCost = ko.pureComputed<string>(() => {

src/Explorer/Panes/DeleteDatabaseConfirmationPane.html

@@ -0,0 +1,109 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+            click: cancel,
+            clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="deletedatabaseconfirmationpane">
+    <!-- Delete Databaes Confirmation form - Start -->
+    <div class="contextual-pane-in">
+      <form
+        class="paneContentContainer"
+        data-bind="
+                    submit: submit"
+      >
+        <!-- Delete Database Confirmation header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                            click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Delete Database Confirmation header - End -->
+
+        <div class="warningErrorContainer" data-bind="visible: !formErrors()">
+          <div class="warningErrorContent">
+            <span><img class="paneWarningIcon" src="/warning.svg" alt="Warning" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              Warning! The action you are about to take cannot be undone. Continuing will permanently delete this
+              resource and all of its children resources.
+            </span>
+          </div>
+        </div>
+
+        <!-- Delete Database Confirmation errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="
+                        visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a class="errorLink" role="link" data-bind="click: showErrorDetails">More details</a>
+            </span>
+          </div>
+        </div>
+        <!-- Delete Database Confirmation errors - End -->
+
+        <!-- Delete Database Confirmation inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <span class="mandatoryStar">*</span> <span data-bind="text: databaseIdConfirmationText"></span>
+            <p>
+              <input
+                type="text"
+                name="databaseIdConfirmation"
+                data-test="confirmDatabaseId"
+                required
+                class="collid"
+                data-bind="value: databaseIdConfirmation, hasFocus: firstFieldHasFocus"
+                aria-label="Confirm by typing the database id"
+              />
+            </p>
+          </div>
+          <div data-bind="visible: recordDeleteFeedback">
+            <div>Help us improve Azure Cosmos DB!</div>
+            <div>What is the reason why you are deleting this database?</div>
+            <p>
+              <textarea
+                type="text"
+                data-test="databaseDeleteFeedback"
+                name="databaseDeleteFeedback"
+                rows="3"
+                cols="53"
+                maxlength="512"
+                class="collid"
+                data-bind="value: databaseDeleteFeedback"
+                aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
+              >
+              </textarea>
+            </p>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut">
+            <input type="submit" data-test="deleteDatabase" value="OK" class="btncreatecoll1" />
+          </div>
+        </div>
+        <!-- Delete Database Confirmation inputs - End -->
+      </form>
+    </div>
+    <!-- Delete Database Confirmation form - Start -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>

src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts

@@ -0,0 +1,127 @@
+jest.mock("../../Common/dataAccess/deleteDatabase");
+jest.mock("../../Shared/Telemetry/TelemetryProcessor");
+import * as ko from "knockout";
+import Q from "q";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
+import DeleteDatabaseConfirmationPane from "./DeleteDatabaseConfirmationPane";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+import Explorer from "../Explorer";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { TreeNode } from "../../Contracts/ViewModels";
+import { TabsManager } from "../Tabs/TabsManager";
+import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
+
+describe("Delete Database Confirmation Pane", () => {
+  describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
+    let explorer: Explorer;
+
+    beforeAll(() => {
+      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
+    });
+
+    beforeEach(() => {
+      explorer = new Explorer();
+    });
+
+    it("should be true if only 1 database", () => {
+      let database = {} as ViewModels.Database;
+      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+      expect(explorer.isLastDatabase()).toBe(true);
+    });
+
+    it("should be false if only 2 databases", () => {
+      let database = {} as ViewModels.Database;
+      let database2 = {} as ViewModels.Database;
+      explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
+      expect(explorer.isLastDatabase()).toBe(false);
+    });
+
+    it("should be false if not last empty database", () => {
+      let database = {} as ViewModels.Database;
+      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+      expect(explorer.isLastNonEmptyDatabase()).toBe(false);
+    });
+
+    it("should be true if last non empty database", () => {
+      let database = {} as ViewModels.Database;
+      database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
+      explorer.databases = ko.observableArray<ViewModels.Database>([database]);
+      expect(explorer.isLastNonEmptyDatabase()).toBe(true);
+    });
+  });
+
+  describe("shouldRecordFeedback()", () => {
+    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
+      let fakeExplorer = {} as Explorer;
+
+      let pane = new DeleteDatabaseConfirmationPane({
+        id: "deletedatabaseconfirmationpane",
+        visible: ko.observable<boolean>(false),
+        container: fakeExplorer as any,
+      });
+
+      fakeExplorer.isLastNonEmptyDatabase = () => true;
+      pane.container = fakeExplorer as any;
+      expect(pane.shouldRecordFeedback()).toBe(true);
+
+      fakeExplorer.isLastDatabase = () => true;
+      fakeExplorer.isSelectedDatabaseShared = () => true;
+      pane.container = fakeExplorer as any;
+      expect(pane.shouldRecordFeedback()).toBe(true);
+
+      fakeExplorer.isLastNonEmptyDatabase = () => false;
+      fakeExplorer.isLastDatabase = () => true;
+      fakeExplorer.isSelectedDatabaseShared = () => false;
+      pane.container = fakeExplorer as any;
+      expect(pane.shouldRecordFeedback()).toBe(false);
+    });
+  });
+
+  describe("submit()", () => {
+    it("on submit() it should log feedback if last non empty database or is last database that has shared throughput", () => {
+      let selectedDatabaseId = "testDB";
+      let fakeExplorer = {} as Explorer;
+      fakeExplorer.findSelectedDatabase = () => {
+        return {
+          id: ko.observable<string>(selectedDatabaseId),
+          rid: "test",
+          collections: ko.observableArray<ViewModels.Collection>(),
+        } as ViewModels.Database;
+      };
+      fakeExplorer.refreshAllDatabases = () => Q.resolve();
+      fakeExplorer.selectedDatabaseId = ko.computed<string>(() => selectedDatabaseId);
+      fakeExplorer.isSelectedDatabaseShared = () => false;
+      const SubscriptionId = "testId";
+      const AccountName = "testAccount";
+      fakeExplorer.databaseAccount = ko.observable<DataModels.DatabaseAccount>({
+        id: SubscriptionId,
+        name: AccountName,
+      } as DataModels.DatabaseAccount);
+      fakeExplorer.defaultExperience = ko.observable<string>("DocumentDB");
+      fakeExplorer.isPreferredApiCassandra = ko.computed(() => {
+        return false;
+      });
+      fakeExplorer.selectedNode = ko.observable<TreeNode>();
+      fakeExplorer.tabsManager = new TabsManager();
+      fakeExplorer.isLastNonEmptyDatabase = () => true;
+
+      let pane = new DeleteDatabaseConfirmationPane({
+        id: "deletedatabaseconfirmationpane",
+        visible: ko.observable<boolean>(false),
+        container: fakeExplorer as any,
+      });
+      pane.databaseIdConfirmation = ko.observable<string>(selectedDatabaseId);
+      const Feedback = "my feedback";
+      pane.databaseDeleteFeedback(Feedback);
+
+      return pane.submit().then(() => {
+        let deleteFeedback = new DeleteFeedback(SubscriptionId, AccountName, DataModels.ApiKind.SQL, Feedback);
+        expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
+          message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
+        });
+      });
+    });
+  });
+});

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

@@ -0,0 +1,143 @@
+import * as ko from "knockout";
+import Q from "q";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { CassandraAPIDataClient } from "../Tables/TableDataClient";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
+import DeleteFeedback from "../../Common/DeleteFeedback";
+
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
+import { ARMError } from "../../Utils/arm/request";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+
+export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
+  public databaseIdConfirmationText: ko.Observable<string>;
+  public databaseIdConfirmation: ko.Observable<string>;
+  public databaseDeleteFeedback: ko.Observable<string>;
+  public recordDeleteFeedback: ko.Observable<boolean>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.databaseIdConfirmationText = ko.observable<string>("Confirm by typing the database id");
+    this.databaseIdConfirmation = ko.observable<string>();
+    this.databaseDeleteFeedback = ko.observable<string>();
+    this.recordDeleteFeedback = ko.observable<boolean>(false);
+    this.title("Delete Database");
+    this.resetData();
+  }
+
+  public submit(): Q.Promise<any> {
+    if (!this._isValid()) {
+      const selectedDatabase: ViewModels.Database = this.container.findSelectedDatabase();
+      this.formErrors("Input database name does not match the selected database");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Error while deleting collection ${selectedDatabase && selectedDatabase.id()}: ${this.formErrors()}`
+      );
+      return Q.resolve();
+    }
+
+    this.formErrors("");
+    this.isExecuting(true);
+    const selectedDatabase = this.container.findSelectedDatabase();
+    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
+      databaseId: selectedDatabase.id(),
+      dataExplorerArea: Constants.Areas.ContextualPane,
+      paneTitle: this.title(),
+    });
+    return Q(
+      deleteDatabase(selectedDatabase.id()).then(
+        () => {
+          this.isExecuting(false);
+          this.close();
+          this.container.refreshAllDatabases();
+          this.container.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
+          this.container.selectedNode(null);
+          selectedDatabase
+            .collections()
+            .forEach((collection: ViewModels.Collection) =>
+              this.container.tabsManager.closeTabsByComparator(
+                (tab) =>
+                  tab.node?.id() === collection.id() &&
+                  (tab.node as ViewModels.Collection).databaseId === collection.databaseId
+              )
+            );
+          this.resetData();
+          TelemetryProcessor.traceSuccess(
+            Action.DeleteDatabase,
+            {
+              databaseId: selectedDatabase.id(),
+              dataExplorerArea: Constants.Areas.ContextualPane,
+              paneTitle: this.title(),
+            },
+            startKey
+          );
+
+          if (this.shouldRecordFeedback()) {
+            let deleteFeedback = new DeleteFeedback(
+              this.container.databaseAccount().id,
+              this.container.databaseAccount().name,
+              DefaultExperienceUtility.getApiKindFromDefaultExperience(this.container.defaultExperience()),
+              this.databaseDeleteFeedback()
+            );
+
+            TelemetryProcessor.trace(Action.DeleteDatabase, ActionModifiers.Mark, {
+              message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
+            });
+
+            this.databaseDeleteFeedback("");
+          }
+        },
+        (error: any) => {
+          this.isExecuting(false);
+          const errorMessage = getErrorMessage(error);
+          this.formErrors(errorMessage);
+          this.formErrorsDetails(errorMessage);
+          TelemetryProcessor.traceFailure(
+            Action.DeleteDatabase,
+            {
+              databaseId: selectedDatabase.id(),
+              dataExplorerArea: Constants.Areas.ContextualPane,
+              paneTitle: this.title(),
+              error: errorMessage,
+              errorStack: getErrorStack(error),
+            },
+            startKey
+          );
+        }
+      )
+    );
+  }
+
+  public resetData() {
+    this.databaseIdConfirmation("");
+    super.resetData();
+  }
+
+  public async open() {
+    await this.container.loadSelectedDatabaseOffer();
+    this.recordDeleteFeedback(this.shouldRecordFeedback());
+    super.open();
+  }
+
+  public shouldRecordFeedback(): boolean {
+    return (
+      this.container.isLastNonEmptyDatabase() ||
+      (this.container.isLastDatabase() && this.container.isSelectedDatabaseShared())
+    );
+  }
+
+  private _isValid(): boolean {
+    const selectedDatabase = this.container.findSelectedDatabase();
+    if (!selectedDatabase) {
+      return false;
+    }
+
+    return this.databaseIdConfirmation() === selectedDatabase.id();
+  }
+}

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx

@@ -1,139 +0,0 @@
-jest.mock("../../Common/dataAccess/deleteDatabase");
-jest.mock("../../Shared/Telemetry/TelemetryProcessor");
-import { mount, ReactWrapper, shallow } from "enzyme";
-import * as ko from "knockout";
-import React from "react";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-import { ApiKind, DatabaseAccount } from "../../Contracts/DataModels";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
-import { DeleteDatabaseConfirmationPanel } from "./DeleteDatabaseConfirmationPanel";
-
-describe("Delete Database Confirmation Pane", () => {
-  describe("shouldRecordFeedback()", () => {
-    it("should return true if last non empty database or is last database that has shared throughput, else false", () => {
-      const fakeExplorer = new Explorer();
-      fakeExplorer.refreshAllDatabases = () => undefined;
-      fakeExplorer.isLastCollection = () => true;
-      fakeExplorer.isSelectedDatabaseShared = () => false;
-
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      database.id = ko.observable<string>("testDatabse");
-
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        openNotificationConsole: (): void => undefined,
-        selectedDatabase: database,
-      };
-
-      const wrapper = shallow(<DeleteDatabaseConfirmationPanel {...props} />);
-      props.explorer.isLastNonEmptyDatabase = () => true;
-      wrapper.setProps(props);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(true);
-
-      props.explorer.isLastNonEmptyDatabase = () => false;
-      props.explorer.isLastDatabase = () => false;
-      wrapper.setProps(props);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
-
-      props.explorer.isLastNonEmptyDatabase = () => false;
-      props.explorer.isLastDatabase = () => true;
-      props.explorer.isSelectedDatabaseShared = () => false;
-      wrapper.setProps(props);
-      expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
-    });
-  });
-
-  describe("submit()", () => {
-    const selectedDatabaseId = "testDatabse";
-    const fakeExplorer = new Explorer();
-    fakeExplorer.refreshAllDatabases = () => undefined;
-    fakeExplorer.isLastCollection = () => true;
-    fakeExplorer.isSelectedDatabaseShared = () => false;
-
-    let wrapper: ReactWrapper;
-    beforeAll(() => {
-      updateUserContext({
-        databaseAccount: {
-          name: "testDatabaseAccountName",
-          properties: {
-            cassandraEndpoint: "testEndpoint",
-          },
-          id: "testDatabaseAccountId",
-        } as DatabaseAccount,
-        defaultExperience: DefaultAccountExperienceType.DocumentDB,
-      });
-      (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-      (TelemetryProcessor.trace as jest.Mock).mockReturnValue(undefined);
-    });
-
-    beforeEach(() => {
-      const database = {} as Database;
-      database.collections = ko.observableArray<Collection>([{} as Collection]);
-      database.id = ko.observable<string>(selectedDatabaseId);
-
-      const props = {
-        explorer: fakeExplorer,
-        closePanel: (): void => undefined,
-        openNotificationConsole: (): void => undefined,
-        selectedDatabase: database,
-      };
-
-      wrapper = mount(<DeleteDatabaseConfirmationPanel {...props} />);
-      props.explorer.isLastNonEmptyDatabase = () => true;
-      wrapper.setProps(props);
-    });
-
-    it("Should call delete database", () => {
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
-
-      wrapper
-        .find("#confirmDatabaseId")
-        .hostNodes()
-        .simulate("change", { target: { value: selectedDatabaseId } });
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
-      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
-      wrapper.unmount();
-    });
-
-    it("should record feedback", async () => {
-      expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
-      wrapper
-        .find("#confirmDatabaseId")
-        .hostNodes()
-        .simulate("change", { target: { value: selectedDatabaseId } });
-
-      expect(wrapper.exists("#deleteDatabaseFeedbackInput")).toBe(true);
-      const feedbackText = "Test delete Database feedback text";
-      wrapper
-        .find("#deleteDatabaseFeedbackInput")
-        .hostNodes()
-        .simulate("change", { target: { value: feedbackText } });
-
-      expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
-      expect(deleteDatabase).toHaveBeenCalledWith(selectedDatabaseId);
-
-      const deleteFeedback = new DeleteFeedback(
-        "testDatabaseAccountId",
-        "testDatabaseAccountName",
-        ApiKind.SQL,
-        feedbackText
-      );
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      expect(TelemetryProcessor.trace).toHaveBeenCalledWith(Action.DeleteDatabase, ActionModifiers.Mark, {
-        message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-      });
-      wrapper.unmount();
-    });
-  });
-});

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -1,168 +0,0 @@
-import { useBoolean } from "@uifabric/react-hooks";
-import { Text, TextField } from "office-ui-fabric-react";
-import React, { FunctionComponent, useState } from "react";
-import { Areas } from "../../Common/Constants";
-import { deleteDatabase } from "../../Common/dataAccess/deleteDatabase";
-import DeleteFeedback from "../../Common/DeleteFeedback";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
-import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
-
-interface DeleteDatabaseConfirmationPanelProps {
-  explorer: Explorer;
-  closePanel: () => void;
-  openNotificationConsole: () => void;
-  selectedDatabase: Database;
-}
-
-export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = (
-  props: DeleteDatabaseConfirmationPanelProps
-): JSX.Element => {
-  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
-
-  const [formError, setFormError] = useState<string>("");
-  const [databaseInput, setDatabaseInput] = useState<string>("");
-  const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
-
-  const getPanelErrorProps = (): PanelInfoErrorProps => {
-    if (formError) {
-      return {
-        messageType: "error",
-        message: formError,
-        showErrorDetails: true,
-        openNotificationConsole: props.openNotificationConsole,
-      };
-    }
-
-    return {
-      messageType: "warning",
-      showErrorDetails: false,
-      message:
-        "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
-    };
-  };
-
-  const submit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
-    const { selectedDatabase, explorer } = props;
-    event.preventDefault();
-    if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
-      setFormError("Input database name does not match the selected database");
-      logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
-      return;
-    }
-    setFormError("");
-    setLoadingTrue();
-
-    const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
-      databaseId: selectedDatabase.id(),
-      dataExplorerArea: Areas.ContextualPane,
-      paneTitle: "Delete Database",
-    });
-
-    try {
-      await deleteDatabase(selectedDatabase.id());
-      props.closePanel();
-      explorer.refreshAllDatabases();
-      explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
-      explorer.selectedNode(undefined);
-      selectedDatabase
-        .collections()
-        .forEach((collection: Collection) =>
-          explorer.tabsManager.closeTabsByComparator(
-            (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
-          )
-        );
-      TelemetryProcessor.traceSuccess(
-        Action.DeleteDatabase,
-        {
-          databaseId: selectedDatabase.id(),
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: "Delete Database",
-        },
-        startKey
-      );
-
-      if (shouldRecordFeedback()) {
-        const deleteFeedback = new DeleteFeedback(
-          userContext?.databaseAccount.id,
-          userContext?.databaseAccount.name,
-          DefaultExperienceUtility.getApiKindFromDefaultExperience(userContext.defaultExperience),
-          databaseFeedbackInput
-        );
-
-        TelemetryProcessor.trace(Action.DeleteDatabase, ActionModifiers.Mark, {
-          message: JSON.stringify(deleteFeedback, Object.getOwnPropertyNames(deleteFeedback)),
-        });
-      }
-    } catch (error) {
-      setLoadingFalse();
-      setFormError(error);
-      const errorMessage = getErrorMessage(error);
-      TelemetryProcessor.traceFailure(
-        Action.DeleteDatabase,
-        {
-          databaseId: selectedDatabase.id(),
-          dataExplorerArea: Areas.ContextualPane,
-          paneTitle: "Delete Database",
-          error: errorMessage,
-          errorStack: getErrorStack(error),
-        },
-        startKey
-      );
-    }
-  };
-
-  const shouldRecordFeedback = (): boolean => {
-    const { explorer } = props;
-    return explorer.isLastNonEmptyDatabase() || (explorer.isLastDatabase() && explorer.isSelectedDatabaseShared());
-  };
-
-  return (
-    <form className="panelFormWrapper" onSubmit={submit}>
-      <PanelInfoErrorComponent {...getPanelErrorProps()} />
-      <div className="panelMainContent">
-        <div className="confirmDeleteInput">
-          <span className="mandatoryStar">* </span>
-          <Text variant="small">Confirm by typing the database id</Text>
-          <TextField
-            id="confirmDatabaseId"
-            autoFocus
-            styles={{ fieldGroup: { width: 300 } }}
-            onChange={(event, newInput?: string) => {
-              setDatabaseInput(newInput);
-            }}
-          />
-        </div>
-        {shouldRecordFeedback() && (
-          <div className="deleteDatabaseFeedback">
-            <Text variant="small" block>
-              Help us improve Azure Cosmos DB!
-            </Text>
-            <Text variant="small" block>
-              What is the reason why you are deleting this database?
-            </Text>
-            <TextField
-              id="deleteDatabaseFeedbackInput"
-              styles={{ fieldGroup: { width: 300 } }}
-              multiline
-              rows={3}
-              onChange={(event, newInput?: string) => {
-                setDatabaseFeedbackInput(newInput);
-              }}
-            />
-          </div>
-        )}
-      </div>
-      <PanelFooterComponent buttonLabel="OK" />
-      {isLoading && <PanelLoadingScreen />}
-    </form>
-  );
-};

src/Explorer/Panes/ExecuteSprocParamsPane.html

@@ -0,0 +1,175 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+                    click: cancel,
+                    clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="executesprocparamspane">
+    <!-- Input params form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: execute">
+        <!-- Input params header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                                    click: cancel, event: { keypress: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Input params header - End -->
+
+        <!-- Input params errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a
+                class="errorLink"
+                role="link"
+                data-bind="
+                            visible: formErrorsDetails() && formErrorsDetails() !== '',
+                            click: showErrorDetails"
+                >More details</a
+              >
+            </span>
+          </div>
+        </div>
+        <!-- Input params errors - End -->
+
+        <!-- Script for each param clause to be used for executing a stored procedure -->
+        <script type="text/html" id="param-template">
+          <tr>
+            <td class="paramTemplateRow">
+              <select class="dataTypeSelector" data-bind="value: type, attr: { 'aria-label': type }">
+                <option value="custom">Custom</option>
+                <option value="string">String</option>
+              </select>
+            </td>
+            <td class="paramTemplateRow">
+              <input class="valueTextBox" aria-label="Param" data-bind="textInput: value" />
+              <span
+                class="spEntityAddCancel"
+                data-bind="click: $parent.deleteParam.bind($parent, $index()), event: { keypress: $parent.onDeleteParamKeyPress.bind($parent, $index()) }"
+                role="button"
+                tabindex="0"
+              >
+                <img src="/Entity_cancel.svg" alt="Delete param" />
+              </span>
+              <span
+                class="spEntityAddCancel"
+                data-bind="click: $parent.addNewParamAtIndex.bind($parent, $index()), event: { keypress: $parent.onAddNewParamAtIndexKeyPress.bind($parent, $index()) }"
+                role="button"
+                tabindex="0"
+              >
+                <img src="/Add-property.svg" alt="Add param" />
+              </span>
+            </td>
+          </tr>
+        </script>
+
+        <!-- Input params input - Start -->
+        <div class="paneMainContent">
+          <div>
+            <!-- Partition key input - Start -->
+            <div class="partitionKeyContainer" data-bind="visible: collectionHasPartitionKey">
+              <div class="inputHeader">Partition key value</div>
+              <div class="scrollBox">
+                <table class="paramsClauseTable">
+                  <thead>
+                    <tr>
+                      <th>Type</th>
+                      <th>Value</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="paramTemplateRow">
+                        <select
+                          class="dataTypeSelector"
+                          data-bind="value: partitionKeyType, attr: { 'aria-label': partitionKeyType }"
+                        >
+                          <option value="custom">Custom</option>
+                          <option value="string">String</option>
+                        </select>
+                      </td>
+                      <td class="paramTemplateRow">
+                        <input
+                          class="partitionKeyValue"
+                          id="partitionKeyValue"
+                          role="textbox"
+                          tabindex="0"
+                          aria-label="Partition key value"
+                          data-bind="textInput: partitionKeyValue"
+                          autofocus
+                        />
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <!-- Partition key input - End -->
+
+            <!-- Input params table - Start -->
+            <div class="paramsTable">
+              <div class="enterInputParams">Enter input parameters (if any)</div>
+              <div class="scrollBox" id="executeSprocParamsScroll">
+                <table class="paramsClauseTable">
+                  <thead>
+                    <tr>
+                      <th class="paramTableTypeHead">Type</th>
+                      <th>Param</th>
+                    </tr>
+                  </thead>
+                  <tbody data-bind="template: { name: 'param-template', foreach: params }"></tbody>
+                </table>
+              </div>
+              <div
+                id="addNewParamLink"
+                class="addNewParam"
+                data-bind="click: addNewParam, event: { keypress: onAddNewParamKeyPress }, attr:{ title: addNewParamLabel }"
+                role="button"
+                tabindex="0"
+              >
+                <span>
+                  <img src="/Add-property.svg" alt="Add new param" />
+                  <span class="addNewParamLabel" data-bind="text: addNewParamLabel" />
+                </span>
+              </div>
+            </div>
+            <!-- Input params table - End -->
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut">
+            <input
+              type="submit"
+              value="Execute"
+              class="btncreatecoll1"
+              data-bind="{ css: { btnDisabled: !executeButtonEnabled() }}"
+            />
+          </div>
+        </div>
+        <!-- Input param input - End -->
+      </form>
+    </div>
+    <!-- Input params form - End -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>

src/Explorer/Panes/ExecuteSprocParamsPane.ts

@@ -0,0 +1,172 @@
+import * as ko from "knockout";
+import * as _ from "underscore";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import StoredProcedure from "../Tree/StoredProcedure";
+
+export interface ExecuteSprocParam {
+  type: ko.Observable<string>;
+  value: ko.Observable<string>;
+}
+
+type UnwrappedExecuteSprocParam = {
+  type: string;
+  value: any;
+};
+
+export class ExecuteSprocParamsPane extends ContextualPaneBase {
+  public params: ko.ObservableArray<ExecuteSprocParam>;
+  public partitionKeyType: ko.Observable<string>;
+  public partitionKeyValue: ko.Observable<string>;
+  public collectionHasPartitionKey: ko.Observable<boolean>;
+  public addNewParamLabel: string = "Add New Param";
+  public executeButtonEnabled: ko.Computed<boolean>;
+
+  private _selectedSproc: StoredProcedure;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.title("Input parameters");
+    this.partitionKeyType = ko.observable<string>("custom");
+    this.partitionKeyValue = ko.observable<string>();
+    this.executeButtonEnabled = ko.computed<boolean>(() => this.validPartitionKeyValue());
+    this.params = ko.observableArray<ExecuteSprocParam>([
+      { type: ko.observable<string>("string"), value: ko.observable<string>() },
+    ]);
+    this.collectionHasPartitionKey = ko.observable<boolean>();
+    this.resetData();
+  }
+
+  public open() {
+    super.open();
+    const currentSelectedSproc = this.container && this.container.findSelectedStoredProcedure();
+    if (!!currentSelectedSproc && !!this._selectedSproc && this._selectedSproc.rid !== currentSelectedSproc.rid) {
+      this.params([]);
+      this.partitionKeyValue("");
+    }
+    this._selectedSproc = currentSelectedSproc;
+    this.collectionHasPartitionKey((this.container && !!this.container.findSelectedCollection().partitionKey) || false);
+    const focusElement = document.getElementById("partitionKeyValue");
+    focusElement && focusElement.focus();
+  }
+
+  public execute = () => {
+    this.formErrors("");
+    const partitionKeyValue: string = (() => {
+      if (!this.collectionHasPartitionKey()) {
+        return undefined;
+      }
+
+      const type: string = this.partitionKeyType();
+      let value: string = this.partitionKeyValue();
+
+      if (type === "custom") {
+        if (value === "undefined" || value === undefined) {
+          return undefined;
+        }
+
+        if (value === "null" || value === null) {
+          return null;
+        }
+
+        try {
+          value = JSON.parse(value);
+        } catch (e) {
+          this.formErrors(`Invalid param specified: ${value}`);
+          this.formErrorsDetails(`Invalid param specified: ${value} is not a valid literal value`);
+        }
+      }
+
+      return value;
+    })();
+    const unwrappedParams: UnwrappedExecuteSprocParam[] = ko.toJS(this.params());
+    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = !this.params()
+      ? undefined
+      : _.map(unwrappedParams, (unwrappedParam: UnwrappedExecuteSprocParam) => {
+          let paramValue: string = unwrappedParam.value;
+
+          if (unwrappedParam.type === "custom" && (paramValue === "undefined" || paramValue === "")) {
+            paramValue = undefined;
+          } else if (unwrappedParam.type === "custom") {
+            try {
+              paramValue = JSON.parse(paramValue);
+            } catch (e) {
+              this.formErrors(`Invalid param specified: ${paramValue}`);
+              this.formErrorsDetails(`Invalid param specified: ${paramValue} is not a valid literal value`);
+            }
+          }
+
+          unwrappedParam.value = paramValue;
+          return unwrappedParam;
+        });
+
+    if (this.formErrors()) {
+      return;
+    }
+
+    const sprocParams = wrappedSprocParams && _.pluck(wrappedSprocParams, "value");
+    this._selectedSproc.execute(sprocParams, partitionKeyValue);
+    this.close();
+  };
+
+  private validPartitionKeyValue = (): boolean => {
+    return !this.collectionHasPartitionKey || (this.partitionKeyValue() != null && this.partitionKeyValue().length > 0);
+  };
+
+  public addNewParam = (): void => {
+    this.params.push({ type: ko.observable<string>("string"), value: ko.observable<string>() });
+    this._maintainFocusOnAddNewParamLink();
+  };
+
+  public onAddNewParamKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.addNewParam();
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  };
+
+  public addNewParamAtIndex = (index: number): void => {
+    this.params.splice(index, 0, { type: ko.observable<string>("string"), value: ko.observable<string>() });
+  };
+
+  public onAddNewParamAtIndexKeyPress = (index: number, source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.addNewParamAtIndex(index);
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public deleteParam = (indexToRemove: number): void => {
+    const params = _.reject(this.params(), (param: ExecuteSprocParam, index: number) => {
+      return index === indexToRemove;
+    });
+    this.params(params);
+  };
+
+  public onDeleteParamKeyPress = (indexToRemove: number, source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Space || event.keyCode === Constants.KeyCodes.Enter) {
+      this.deleteParam(indexToRemove);
+      event.stopPropagation();
+      return false;
+    }
+
+    return true;
+  };
+
+  public close(): void {
+    super.close();
+    this.formErrors("");
+    this.formErrorsDetails("");
+  }
+
+  private _maintainFocusOnAddNewParamLink(): void {
+    const addNewParamLink = document.getElementById("addNewParamLink");
+    addNewParamLink.scrollIntoView();
+  }
+}

src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx

@@ -1,91 +0,0 @@
-import {
-  Dropdown,
-  IDropdownOption,
-  IDropdownStyles,
-  IImageProps,
-  Image,
-  Label,
-  Stack,
-  TextField,
-} from "office-ui-fabric-react";
-import React, { FunctionComponent } from "react";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
-import EntityCancelIcon from "../../../../images/Entity_cancel.svg";
-
-const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
-const options = [
-  { key: "string", text: "String" },
-  { key: "custom", text: "Custom" },
-];
-
-export interface InputParameterProps {
-  dropdownLabel?: string;
-  inputParameterTitle?: string;
-  inputLabel?: string;
-  isAddRemoveVisible: boolean;
-  onDeleteParamKeyPress?: () => void;
-  onAddNewParamKeyPress?: () => void;
-  onParamValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onParamKeyChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
-  paramValue: string;
-  selectedKey: string | number;
-}
-
-export const InputParameter: FunctionComponent<InputParameterProps> = ({
-  dropdownLabel,
-  inputParameterTitle,
-  inputLabel,
-  isAddRemoveVisible,
-  paramValue,
-  selectedKey,
-  onDeleteParamKeyPress,
-  onAddNewParamKeyPress,
-  onParamValueChange,
-  onParamKeyChange,
-}: InputParameterProps): JSX.Element => {
-  const imageProps: IImageProps = {
-    width: 20,
-    height: 30,
-    className: dropdownLabel ? "addRemoveIconLabel" : "addRemoveIcon",
-  };
-
-  return (
-    <>
-      {inputParameterTitle && <Label>{inputParameterTitle}</Label>}
-      <Stack horizontal>
-        <Dropdown
-          label={dropdownLabel && dropdownLabel}
-          selectedKey={selectedKey}
-          onChange={onParamKeyChange}
-          options={options}
-          styles={dropdownStyles}
-        />
-        <TextField
-          label={inputLabel && inputLabel}
-          id="confirmCollectionId"
-          autoFocus
-          value={paramValue}
-          onChange={onParamValueChange}
-        />
-        {isAddRemoveVisible && (
-          <>
-            <Image
-              {...imageProps}
-              src={EntityCancelIcon}
-              alt="Delete param"
-              id="deleteparam"
-              onClick={onDeleteParamKeyPress}
-            />
-            <Image
-              {...imageProps}
-              src={AddPropertyIcon}
-              alt="Add param"
-              id="addparam"
-              onClick={onAddNewParamKeyPress}
-            />
-          </>
-        )}
-      </Stack>
-    </>
-  );
-};

src/Explorer/Panes/ExecuteSprocParamsPanel/index.test.tsx

@@ -1,34 +0,0 @@
-import { mount } from "enzyme";
-import React from "react";
-import Explorer from "../../Explorer";
-import { ExecuteSprocParamsPanel } from "./index";
-
-describe("Excute Sproc Param Pane", () => {
-  const fakeExplorer = {} as Explorer;
-  const props = {
-    explorer: fakeExplorer,
-    closePanel: (): void => undefined,
-  };
-
-  it("should render Default properly", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("initially display 2 input field, 1 partition and 1 parameter", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    expect(wrapper.find("input[type='text']")).toHaveLength(2);
-  });
-
-  it("add a new parameter field", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    wrapper.find("#addparam").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(3);
-  });
-
-  it("remove a parameter field", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
-    wrapper.find("#deleteparam").last().simulate("click");
-    expect(wrapper.find("input[type='text']")).toHaveLength(1);
-  });
-});

src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx

@@ -1,163 +0,0 @@
-import { useBoolean } from "@uifabric/react-hooks";
-import { IDropdownOption, IImageProps, Image, Stack, Text } from "office-ui-fabric-react";
-import React, { FunctionComponent, useState } from "react";
-import AddPropertyIcon from "../../../../images/Add-property.svg";
-import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-import { InputParameter } from "./InputParameter";
-
-interface ExecuteSprocParamsPaneProps {
-  explorer: Explorer;
-  closePanel: () => void;
-}
-
-const imageProps: IImageProps = {
-  width: 20,
-  height: 30,
-};
-
-interface UnwrappedExecuteSprocParam {
-  key: string;
-  text: string;
-}
-
-export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPaneProps> = ({
-  explorer,
-  closePanel,
-}: ExecuteSprocParamsPaneProps): JSX.Element => {
-  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
-  const [paramKeyValues, setParamKeyValues] = useState<UnwrappedExecuteSprocParam[]>([{ key: "string", text: "" }]);
-  const [partitionValue, setPartitionValue] = useState<string>("");
-  const [selectedKey, setSelectedKey] = React.useState<IDropdownOption>({ key: "string", text: "" });
-  const [formError, setFormError] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
-
-  const onPartitionKeyChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
-    setSelectedKey(item);
-  };
-
-  const genericPaneProps: GenericRightPaneProps = {
-    container: explorer,
-    formError: formError,
-    formErrorDetail: formErrorsDetails,
-    id: "executesprocparamspane",
-    isExecuting: isLoading,
-    title: "Input parameters",
-    submitButtonText: "Execute",
-    onClose: () => closePanel(),
-    onSubmit: () => submit(),
-  };
-
-  const validateUnwrappedParams = (): boolean => {
-    const unwrappedParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
-    for (let i = 0; i < unwrappedParams.length; i++) {
-      const { key: paramType, text: paramValue } = unwrappedParams[i];
-      if (paramType === "custom" && (paramValue === "" || paramValue === undefined)) {
-        return false;
-      }
-    }
-    return true;
-  };
-
-  const setInvalidParamError = (invalidParam: string): void => {
-    setFormError(`Invalid param specified: ${invalidParam}`);
-    setFormErrorsDetails(`Invalid param specified: ${invalidParam} is not a valid literal value`);
-  };
-
-  const submit = (): void => {
-    const wrappedSprocParams: UnwrappedExecuteSprocParam[] = paramKeyValues;
-    const { key: partitionKey } = selectedKey;
-    if (partitionKey === "custom" && (partitionValue === "" || partitionValue === undefined)) {
-      setInvalidParamError(partitionValue);
-      return;
-    }
-    if (!validateUnwrappedParams()) {
-      setInvalidParamError("");
-      return;
-    }
-    setLoadingTrue();
-    const sprocParams = wrappedSprocParams && wrappedSprocParams.map((sprocParam) => sprocParam.text);
-    const currentSelectedSproc = explorer.findSelectedStoredProcedure();
-    currentSelectedSproc.execute(sprocParams, partitionValue);
-    setLoadingFalse();
-    closePanel();
-  };
-
-  const deleteParamAtIndex = (indexToRemove: number): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue.splice(indexToRemove, 1);
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const addNewParamAtIndex = (indexToAdd: number): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue.splice(indexToAdd, 0, { key: "string", text: "" });
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const paramValueChange = (value: string, indexOfInput: number): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue[indexOfInput].text = value;
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const paramKeyChange = (
-    _event: React.FormEvent<HTMLDivElement>,
-    selectedParam: IDropdownOption,
-    indexOfParam: number
-  ): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue[indexOfParam].key = selectedParam.key.toString();
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  const addNewParamAtLastIndex = (): void => {
-    const cloneParamKeyValue = [...paramKeyValues];
-    cloneParamKeyValue.splice(cloneParamKeyValue.length, 0, { key: "string", text: "" });
-    setParamKeyValues(cloneParamKeyValue);
-  };
-
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="panelFormWrapper">
-        <div className="panelMainContent">
-          <InputParameter
-            dropdownLabel="Key"
-            inputParameterTitle="Partition key value"
-            inputLabel="Value"
-            isAddRemoveVisible={false}
-            onParamValueChange={(_event, newInput?: string) => {
-              setPartitionValue(newInput);
-            }}
-            onParamKeyChange={onPartitionKeyChange}
-            paramValue={partitionValue}
-            selectedKey={selectedKey.key}
-          />
-          {paramKeyValues.map((paramKeyValue, index) => (
-            <InputParameter
-              key={paramKeyValue && paramKeyValue.text + index}
-              dropdownLabel={!index && "Key"}
-              inputParameterTitle={!index && "Enter input parameters (if any)"}
-              inputLabel={!index && "Param"}
-              isAddRemoveVisible={true}
-              onDeleteParamKeyPress={() => deleteParamAtIndex(index)}
-              onAddNewParamKeyPress={() => addNewParamAtIndex(index + 1)}
-              onParamValueChange={(event, newInput?: string) => {
-                paramValueChange(newInput, index);
-              }}
-              onParamKeyChange={(event: React.FormEvent<HTMLDivElement>, selectedParam: IDropdownOption) => {
-                paramKeyChange(event, selectedParam, index);
-              }}
-              paramValue={paramKeyValue && paramKeyValue.text}
-              selectedKey={paramKeyValue && paramKeyValue.key}
-            />
-          ))}
-          <Stack horizontal onClick={addNewParamAtLastIndex}>
-            <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
-            <Text className="addNewParamStyle">Add New Param</Text>
-          </Stack>
-        </div>
-      </div>
-    </GenericRightPaneComponent>
-  );
-};

src/Explorer/Panes/GenericRightPaneComponent.tsx

@@ -1,9 +1,9 @@
-import { Subscription } from "knockout";
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
 import * as React from "react";
+import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { KeyCodes } from "../../Common/Constants";
+import { Subscription } from "knockout";
 import ErrorRedIcon from "../../../images/error_red.svg";
 import LoadingIndicatorIcon from "../../../images/LoadingIndicator_3Squares.gif";
-import { KeyCodes } from "../../Common/Constants";
 import Explorer from "../Explorer";
 
 export interface GenericRightPaneProps {

src/Explorer/Panes/PaneComponents.ts

@@ -1,19 +1,24 @@
-import AddCollectionPaneTemplate from "./AddCollectionPane.html";
 import AddDatabasePaneTemplate from "./AddDatabasePane.html";
-import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
-import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
+import AddCollectionPaneTemplate from "./AddCollectionPane.html";
 import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
-import GitHubReposPaneTemplate from "./GitHubReposPane.html";
+import DeleteDatabaseConfirmationPaneTemplate from "./DeleteDatabaseConfirmationPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
+import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
+import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
+import TableColumnOptionsPaneTemplate from "./Tables/TableColumnOptionsPane.html";
+import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
+import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
+import SettingsPaneTemplate from "./SettingsPane.html";
+import ExecuteSprocParamsPaneTemplate from "./ExecuteSprocParamsPane.html";
+import UploadItemsPaneTemplate from "./UploadItemsPane.html";
 import LoadQueryPaneTemplate from "./LoadQueryPane.html";
 import SaveQueryPaneTemplate from "./SaveQueryPane.html";
-import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
+import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
+import UploadFilePaneTemplate from "./UploadFilePane.html";
 import StringInputPaneTemplate from "./StringInputPane.html";
-import TableAddEntityPaneTemplate from "./Tables/TableAddEntityPane.html";
-import TableColumnOptionsPaneTemplate from "./Tables/TableColumnOptionsPane.html";
-import TableEditEntityPaneTemplate from "./Tables/TableEditEntityPane.html";
-import TableQuerySelectPaneTemplate from "./Tables/TableQuerySelectPane.html";
+import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.html";
+import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 
 export class PaneComponent {
   constructor(data: any) {
@@ -48,6 +53,15 @@ export class DeleteCollectionConfirmationPaneComponent {
   }
 }
 
+export class DeleteDatabaseConfirmationPaneComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: DeleteDatabaseConfirmationPaneTemplate,
+    };
+  }
+}
+
 export class GraphNewVertexPaneComponent {
   constructor() {
     return {
@@ -111,6 +125,33 @@ export class CassandraAddCollectionPaneComponent {
   }
 }
 
+export class SettingsPaneComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: SettingsPaneTemplate,
+    };
+  }
+}
+
+export class ExecuteSprocParamsComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: ExecuteSprocParamsPaneTemplate,
+    };
+  }
+}
+
+export class UploadItemsPaneComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: UploadItemsPaneTemplate,
+    };
+  }
+}
+
 export class LoadQueryPaneComponent {
   constructor() {
     return {
@@ -138,6 +179,15 @@ export class BrowseQueriesPaneComponent {
   }
 }
 
+export class UploadFilePaneComponent {
+  constructor() {
+    return {
+      viewModel: PaneComponent,
+      template: UploadFilePaneTemplate,
+    };
+  }
+}
+
 export class StringInputPaneComponent {
   constructor() {
     return {

src/Explorer/Panes/PanelComponent.less

@@ -110,34 +110,7 @@
 .deleteCollectionFeedback {
   margin-top: 12px;
 }
-.addRemoveIcon {
-  margin-left: 4px !important;
-}
-.addRemoveIconLabel {
-  margin-top: 28px;
-  margin-left: 4px !important;
-}
-.addNewParamStyle {
-  margin-top: 5px;
-  margin-left: 5px !important;
-  cursor: pointer;
-}
 
 .panelGroupSpacing > * {
   margin-bottom: @SmallSpace;
 }
-.panelAddIconLabel {
-  font-size: 20px;
-  width: 20px;
-  margin: 30px 0 0 10px;
-  cursor: default;
-}
-.panelAddIcon {
-  font-size: 20px;
-  width: 20px;
-  margin: 30px 0 0 10px;
-  cursor: default;
-}
-.removeIcon {
-  color: @InfoIconColor;
-}

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -14,7 +14,7 @@ import { handleError, getErrorMessage, getErrorStack } from "../../Common/ErrorH
 import { GalleryTab } from "../Controls/NotebookGallery/GalleryViewerComponent";
 import { traceFailure, traceStart, traceSuccess } from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as FileSystemUtil from "../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../Notebook/FileSystemUtil";
 
 export class PublishNotebookPaneAdapter implements ReactAdapter {
   parameters: ko.Observable<number>;

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

@@ -1,7 +1,7 @@
 import { ITextFieldProps, Stack, Text, TextField, Dropdown, IDropdownProps } from "office-ui-fabric-react";
 import * as React from "react";
 import { GalleryCardComponent } from "../Controls/NotebookGallery/Cards/GalleryCardComponent";
-import * as FileSystemUtil from "../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../Notebook/FileSystemUtil";
 import "./PublishNotebookPaneComponent.less";
 import Html2Canvas from "html2canvas";
 import { ImmutableNotebook } from "@nteract/commutable/src";

src/Explorer/Panes/SettingsPane.html

@@ -0,0 +1,268 @@
+<!-- TODO: Move Pane to REACT -->
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+                click: cancel,
+                clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="settingspane">
+    <!-- Settings Confirmation form - Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Settings Confirmation header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                                click: cancel, event: { keydown: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Settings Confirmation header - End -->
+
+        <!-- Settings Confirmation errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a
+                class="errorLink"
+                role="link"
+                data-bind="
+                            visible: formErrorsDetails() && formErrorsDetails() !== '',
+                            click: showErrorDetails"
+                >More details</a
+              >
+            </span>
+          </div>
+        </div>
+        <!-- Settings Confirmation errors - End -->
+
+        <!-- Settings Confirmation inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <div class="settingsSection" data-bind="visible: shouldShowQueryPageOptions">
+              <div class="settingsSectionPart pageOptionsPart">
+                <div class="settingsSectionLabel">
+                  Page options
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as
+                      many query results per page.
+                    </span>
+                  </span>
+                </div>
+                <div class="tabs" role="radiogroup" aria-label="Page options">
+                  <!-- Fixed option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="customItemPerPage"
+                      name="pageOption"
+                      value="custom"
+                      data-bind="checked: pageOption"
+                    />
+                    <label
+                      for="customItemPerPage"
+                      id="custom-selection"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" attr:{ 
+                                            'aria-checked': pageOption() === 'custom' ? 'true' : 'false' },
+                                            event: { keydown: onCustomPageOptionsKeyDown 
+                                        }"
+                      >Custom</label
+                    >
+                  </div>
+                  <!-- Fixed option button - End -->
+
+                  <!-- Unlimited option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="unlimitedItemPerPage"
+                      name="pageOption"
+                      value="unlimited"
+                      data-bind="checked: pageOption"
+                    />
+                    <label
+                      for="unlimitedItemPerPage"
+                      id="unlimited-selection"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" attr:{ 
+                                            'aria-checked': pageOption() === 'unlimited' ? 'true' : 'false' },
+                                            event: { keydown: onUnlimitedPageOptionKeyDown 
+                                        }"
+                      >Unlimited</label
+                    >
+                  </div>
+                  <!-- Unlimited option button - End -->
+                </div>
+              </div>
+              <div class="tabs settingsSectionPart">
+                <div class="tabcontent" data-bind="visible: isCustomPageOptionSelected()">
+                  <div class="settingsSectionLabel">
+                    Query results per page
+                    <span class="infoTooltip" role="tooltip" tabindex="0">
+                      <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                      <span class="tooltiptext pageOptionTooltipWidth">
+                        Enter the number of query results that should be shown per page.
+                      </span>
+                    </span>
+                  </div>
+                  <input
+                    type="number"
+                    required
+                    min="1"
+                    step="1"
+                    class="textfontclr collid"
+                    aria-label="Custom query items per page"
+                    data-bind="textInput: customItemPerPage, enable: isCustomPageOptionSelected()"
+                  />
+                </div>
+              </div>
+            </div>
+            <div class="settingsSection" data-bind="visible: shouldShowCrossPartitionOption">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">
+                  Enable cross-partition query
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Send more than one request while executing a query. More than one request is necessary if the
+                      query is not scoped to single partition key value.
+                    </span>
+                  </span>
+                </div>
+                <input
+                  type="checkbox"
+                  tabindex="0"
+                  aria-label="Enable cross partition query"
+                  data-bind="checked: crossPartitionQueryEnabled"
+                />
+              </div>
+            </div>
+            <div class="settingsSection" data-bind="visible: shouldShowParallelismOption">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">
+                  Max degree of parallelism
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Gets or sets the number of concurrent operations run client side during parallel query execution.
+                      A positive property value limits the number of concurrent operations to the set value. If it is
+                      set to less than 0, the system automatically decides the number of concurrent operations to run.
+                    </span>
+                  </span>
+                </div>
+                <input
+                  type="number"
+                  required
+                  min="-1"
+                  step="1"
+                  class="textfontclr collid"
+                  role="textbox"
+                  tabindex="0"
+                  id="max-degree"
+                  aria-label="Max degree of parallelism"
+                  data-bind="value: maxDegreeOfParallelism"
+                  autofocus
+                />
+              </div>
+            </div>
+            <div class="settingsSection" data-bind="visible: shouldShowGraphAutoVizOption">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">
+                  Display Gremlin query results as:&nbsp;
+                  <span class="infoTooltip" role="tooltip" tabindex="0">
+                    <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                    <span class="tooltiptext pageOptionTooltipWidth">
+                      Select Graph to automatically visualize the query results as a Graph or JSON to display the
+                      results as JSON.
+                    </span>
+                  </span>
+                </div>
+                <div class="tabs" role="radiogroup" aria-label="Graph Auto-visualization">
+                  <!-- Fixed option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="graphAutoVizOn"
+                      name="graphAutoVizOption"
+                      value="false"
+                      data-bind="checked: graphAutoVizDisabled"
+                    />
+                    <label
+                      for="graphAutoVizOn"
+                      id="graph-display"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" 
+                                            attr: { 'aria-checked': graphAutoVizDisabled() === 'false' ? 'true' : 'false' }, 
+                                            event: { keypress: onGraphDisplayResultsKeyDown 
+                                        }"
+                      >Graph</label
+                    >
+                  </div>
+                  <!-- Fixed option button - End -->
+
+                  <!-- Unlimited option button - Start -->
+                  <div class="tab">
+                    <input
+                      type="radio"
+                      id="graphAutoVizOff"
+                      name="graphAutoVizOption"
+                      value="true"
+                      data-bind="checked: graphAutoVizDisabled"
+                    />
+                    <label
+                      for="graphAutoVizOff"
+                      tabindex="0"
+                      role="radio"
+                      data-bind=" 
+                                            attr: { 'aria-checked': graphAutoVizDisabled() === 'true' ? 'true' : 'false' },
+                                            event: { keypress: onJsonDisplayResultsKeyDown 
+                                        }"
+                      >JSON</label
+                    >
+                  </div>
+                  <!-- Unlimited option button - End -->
+                </div>
+              </div>
+            </div>
+            <div class="settingsSection">
+              <div class="settingsSectionPart">
+                <div class="settingsSectionLabel">Explorer Version</div>
+
+                <div data-bind="text: explorerVersion"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut"><input type="submit" value="Apply" class="btncreatecoll1" /></div>
+        </div>
+        <!-- Settings Confirmation inputs - End -->
+      </form>
+    </div>
+    <!-- Settings Confirmation form  - Start -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>

src/Explorer/Panes/SettingsPane.test.ts

@@ -0,0 +1,38 @@
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import Explorer from "../Explorer";
+
+describe("Settings Pane", () => {
+  describe("shouldShowQueryPageOptions()", () => {
+    let explorer: Explorer;
+
+    beforeEach(() => {
+      explorer = new Explorer();
+    });
+
+    it("should be true for SQL API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.DocumentDB.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(true);
+    });
+
+    it("should be false for Cassandra API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.Cassandra.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+
+    it("should be false for Tables API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.Table.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+
+    it("should be false for Graph API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.Graph.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+
+    it("should be false for Mongo API", () => {
+      explorer.defaultExperience(Constants.DefaultAccountExperience.MongoDB.toLowerCase());
+      expect(explorer.settingsPane.shouldShowQueryPageOptions()).toBe(false);
+    });
+  });
+});

src/Explorer/Panes/SettingsPane.ts

@@ -0,0 +1,185 @@
+import * as Constants from "../../Common/Constants";
+import * as ko from "knockout";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as StringUtility from "../../Shared/StringUtility";
+import { configContext } from "../../ConfigContext";
+
+export class SettingsPane extends ContextualPaneBase {
+  public pageOption: ko.Observable<string>;
+  public customItemPerPage: ko.Observable<number>;
+  public crossPartitionQueryEnabled: ko.Observable<boolean>;
+  public maxDegreeOfParallelism: ko.Observable<number>;
+  public explorerVersion: string;
+  public shouldShowQueryPageOptions: ko.Computed<boolean>;
+  public shouldShowGraphAutoVizOption: ko.Computed<boolean>;
+
+  private graphAutoVizDisabled: ko.Observable<string>;
+  private shouldShowCrossPartitionOption: ko.Computed<boolean>;
+  private shouldShowParallelismOption: ko.Computed<boolean>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.title("Settings");
+    this.resetData();
+
+    this.pageOption = ko.observable<string>();
+    this.customItemPerPage = ko.observable<number>();
+
+    const crossPartitionQueryEnabledState: boolean = LocalStorageUtility.hasItem(
+      StorageKey.IsCrossPartitionQueryEnabled
+    )
+      ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
+      : true;
+    this.crossPartitionQueryEnabled = ko.observable<boolean>(crossPartitionQueryEnabledState);
+
+    const maxDegreeOfParallelismState: number = LocalStorageUtility.hasItem(StorageKey.MaxDegreeOfParellism)
+      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
+      : Constants.Queries.DefaultMaxDegreeOfParallelism;
+    this.maxDegreeOfParallelism = ko.observable<number>(maxDegreeOfParallelismState);
+
+    const isGraphAutoVizDisabled: boolean = LocalStorageUtility.hasItem(StorageKey.IsGraphAutoVizDisabled)
+      ? LocalStorageUtility.getEntryBoolean(StorageKey.IsGraphAutoVizDisabled)
+      : false;
+    this.graphAutoVizDisabled = ko.observable<string>(`${isGraphAutoVizDisabled}`);
+
+    this.explorerVersion = configContext.gitSha;
+    this.shouldShowQueryPageOptions = ko.computed<boolean>(() => this.container.isPreferredApiDocumentDB());
+    this.shouldShowCrossPartitionOption = ko.computed<boolean>(() => !this.container.isPreferredApiGraph());
+    this.shouldShowParallelismOption = ko.computed<boolean>(() => !this.container.isPreferredApiGraph());
+    this.shouldShowGraphAutoVizOption = ko.computed<boolean>(() => this.container.isPreferredApiGraph());
+  }
+
+  public open() {
+    this._loadSettings();
+    super.open();
+    const pageOptionsFocus = document.getElementById("custom-selection");
+    const displayQueryFocus = document.getElementById("graph-display");
+    const maxDegreeFocus = document.getElementById("max-degree");
+    if (this.container.isPreferredApiGraph()) {
+      displayQueryFocus && displayQueryFocus.focus();
+    } else if (this.container.isPreferredApiTable()) {
+      maxDegreeFocus && maxDegreeFocus.focus();
+    }
+    pageOptionsFocus && pageOptionsFocus.focus();
+  }
+
+  public submit() {
+    this.formErrors("");
+    this.isExecuting(true);
+
+    LocalStorageUtility.setEntryNumber(
+      StorageKey.ActualItemPerPage,
+      this.isCustomPageOptionSelected() ? this.customItemPerPage() : Constants.Queries.unlimitedItemsPerPage
+    );
+    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, this.customItemPerPage());
+    LocalStorageUtility.setEntryString(
+      StorageKey.IsCrossPartitionQueryEnabled,
+      this.crossPartitionQueryEnabled().toString()
+    );
+    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, this.maxDegreeOfParallelism());
+
+    if (this.shouldShowGraphAutoVizOption()) {
+      LocalStorageUtility.setEntryBoolean(
+        StorageKey.IsGraphAutoVizDisabled,
+        StringUtility.toBoolean(this.graphAutoVizDisabled())
+      );
+    }
+
+    this.isExecuting(false);
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`
+    );
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `${this.crossPartitionQueryEnabled() ? "Enabled" : "Disabled"} cross-partition query feed option`
+    );
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `Updated the max degree of parallelism query feed option to ${LocalStorageUtility.getEntryNumber(
+        StorageKey.MaxDegreeOfParellism
+      )}`
+    );
+
+    if (this.shouldShowGraphAutoVizOption()) {
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Info,
+        `Graph result will be displayed as ${
+          LocalStorageUtility.getEntryBoolean(StorageKey.IsGraphAutoVizDisabled) ? "JSON" : "Graph"
+        }`
+      );
+    }
+
+    NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.Info,
+      `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`
+    );
+
+    this.close();
+  }
+
+  public isCustomPageOptionSelected = (): boolean => {
+    return this.pageOption() === Constants.Queries.CustomPageOption;
+  };
+
+  public isUnlimitedPageOptionSelected = (): boolean => {
+    return this.pageOption() === Constants.Queries.UnlimitedPageOption;
+  };
+
+  public onUnlimitedPageOptionKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.pageOption(Constants.Queries.UnlimitedPageOption);
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  public onCustomPageOptionsKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.pageOption(Constants.Queries.CustomPageOption);
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  public onJsonDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.graphAutoVizDisabled("true");
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  public onGraphDisplayResultsKeyDown(source: any, event: KeyboardEvent): boolean {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.graphAutoVizDisabled("false");
+      event.stopPropagation();
+      return false;
+    }
+    return true;
+  }
+
+  private _loadSettings() {
+    this.isExecuting(true);
+    try {
+      this.pageOption(
+        LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) == Constants.Queries.unlimitedItemsPerPage
+          ? Constants.Queries.UnlimitedPageOption
+          : Constants.Queries.CustomPageOption
+      );
+      this.customItemPerPage(LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage));
+    } catch (exception) {
+      this.formErrors("Unable to load your settings");
+      this.formErrorsDetails(exception);
+    } finally {
+      this.isExecuting(false);
+    }
+  }
+}

src/Explorer/Panes/SettingsPane/index.test.tsx

@@ -1,28 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { SettingsPane } from ".";
-import { DatabaseAccount } from "../../../Contracts/DataModels";
-import { updateUserContext } from "../../../UserContext";
-import Explorer from "../../Explorer";
-const props = {
-  explorer: new Explorer(),
-  closePanel: (): void => undefined,
-};
-describe("Settings Pane", () => {
-  it("should render Default properly", () => {
-    const wrapper = shallow(<SettingsPane {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("should render Gremlin properly", () => {
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableGremlin" }],
-        },
-      } as DatabaseAccount,
-    });
-    const wrapper = shallow(<SettingsPane {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

src/Explorer/Panes/SettingsPane/index.tsx

@@ -1,253 +0,0 @@
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "office-ui-fabric-react";
-import React, { FunctionComponent, MouseEvent, useState } from "react";
-import * as Constants from "../../../Common/Constants";
-import { Tooltip } from "../../../Common/Tooltip";
-import { configContext } from "../../../ConfigContext";
-import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
-import * as StringUtility from "../../../Shared/StringUtility";
-import { userContext } from "../../../UserContext";
-import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-
-export interface SettingsPaneProps {
-  explorer: Explorer;
-  closePanel: () => void;
-}
-
-export const SettingsPane: FunctionComponent<SettingsPaneProps> = ({
-  explorer: container,
-  closePanel,
-}: SettingsPaneProps) => {
-  const [formErrors, setFormErrors] = useState<string>("");
-  const [isExecuting, setIsExecuting] = useState<boolean>(false);
-  const [pageOption, setPageOption] = useState<string>(
-    LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage) === Constants.Queries.unlimitedItemsPerPage
-      ? Constants.Queries.UnlimitedPageOption
-      : Constants.Queries.CustomPageOption
-  );
-  const [customItemPerPage, setCustomItemPerPage] = useState<number>(
-    LocalStorageUtility.getEntryNumber(StorageKey.CustomItemPerPage) || 0
-  );
-  const [crossPartitionQueryEnabled, setCrossPartitionQueryEnabled] = useState<boolean>(
-    LocalStorageUtility.hasItem(StorageKey.IsCrossPartitionQueryEnabled)
-      ? LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true"
-      : true
-  );
-  const [graphAutoVizDisabled, setGraphAutoVizDisabled] = useState<string>(
-    LocalStorageUtility.hasItem(StorageKey.IsGraphAutoVizDisabled)
-      ? LocalStorageUtility.getEntryString(StorageKey.IsGraphAutoVizDisabled)
-      : "false"
-  );
-  const [maxDegreeOfParallelism, setMaxDegreeOfParallelism] = useState<number>(
-    LocalStorageUtility.hasItem(StorageKey.MaxDegreeOfParellism)
-      ? LocalStorageUtility.getEntryNumber(StorageKey.MaxDegreeOfParellism)
-      : Constants.Queries.DefaultMaxDegreeOfParallelism
-  );
-  const explorerVersion = configContext.gitSha;
-  const shouldShowQueryPageOptions = userContext.apiType === "SQL";
-  const shouldShowGraphAutoVizOption = userContext.apiType === "Gremlin";
-  const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
-  const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
-
-  const handlerOnSubmit = (e: MouseEvent<HTMLButtonElement>) => {
-    setFormErrors("");
-    setIsExecuting(true);
-
-    LocalStorageUtility.setEntryNumber(
-      StorageKey.ActualItemPerPage,
-      isCustomPageOptionSelected() ? customItemPerPage : Constants.Queries.unlimitedItemsPerPage
-    );
-    LocalStorageUtility.setEntryNumber(StorageKey.CustomItemPerPage, customItemPerPage);
-    LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, crossPartitionQueryEnabled.toString());
-    LocalStorageUtility.setEntryNumber(StorageKey.MaxDegreeOfParellism, maxDegreeOfParallelism);
-
-    if (shouldShowGraphAutoVizOption) {
-      LocalStorageUtility.setEntryBoolean(
-        StorageKey.IsGraphAutoVizDisabled,
-        StringUtility.toBoolean(graphAutoVizDisabled)
-      );
-    }
-
-    setIsExecuting(false);
-    logConsoleInfo(
-      `Updated items per page setting to ${LocalStorageUtility.getEntryNumber(StorageKey.ActualItemPerPage)}`
-    );
-    logConsoleInfo(`${crossPartitionQueryEnabled ? "Enabled" : "Disabled"} cross-partition query feed option`);
-    logConsoleInfo(
-      `Updated the max degree of parallelism query feed option to ${LocalStorageUtility.getEntryNumber(
-        StorageKey.MaxDegreeOfParellism
-      )}`
-    );
-
-    if (shouldShowGraphAutoVizOption) {
-      logConsoleInfo(
-        `Graph result will be displayed as ${
-          LocalStorageUtility.getEntryBoolean(StorageKey.IsGraphAutoVizDisabled) ? "JSON" : "Graph"
-        }`
-      );
-    }
-
-    logConsoleInfo(
-      `Updated query setting to ${LocalStorageUtility.getEntryString(StorageKey.SetPartitionKeyUndefined)}`
-    );
-    closePanel();
-    e.preventDefault();
-  };
-
-  const isCustomPageOptionSelected = () => {
-    return pageOption === Constants.Queries.CustomPageOption;
-  };
-
-  const handleOnGremlinChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
-    setGraphAutoVizDisabled(option.key);
-  };
-
-  const genericPaneProps: GenericRightPaneProps = {
-    container,
-    formError: formErrors,
-    formErrorDetail: "",
-    id: "settingspane",
-    isExecuting,
-    title: "Setting",
-    submitButtonText: "Apply",
-    onClose: () => closePanel(),
-    onSubmit: () => handlerOnSubmit(undefined),
-  };
-  const pageOptionList: IChoiceGroupOption[] = [
-    { key: Constants.Queries.CustomPageOption, text: "Custom" },
-    { key: Constants.Queries.UnlimitedPageOption, text: "Unlimited" },
-  ];
-
-  const graphAutoOptionList: IChoiceGroupOption[] = [
-    { key: "false", text: "Graph" },
-    { key: "true", text: "JSON" },
-  ];
-
-  const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
-    setPageOption(option.key);
-  };
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="paneMainContent">
-        {shouldShowQueryPageOptions && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart pageOptionsPart">
-              <div className="settingsSectionLabel">
-                Page options
-                <Tooltip>
-                  Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
-                  query results per page.
-                </Tooltip>
-              </div>
-              <ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
-            </div>
-            <div className="tabs settingsSectionPart">
-              {isCustomPageOptionSelected() && (
-                <div className="tabcontent">
-                  <div className="settingsSectionLabel">
-                    Query results per page
-                    <Tooltip>Enter the number of query results that should be shown per page.</Tooltip>
-                  </div>
-
-                  <SpinButton
-                    ariaLabel="Custom query items per page"
-                    value={"" + customItemPerPage}
-                    onIncrement={(newValue) => {
-                      setCustomItemPerPage(parseInt(newValue) + 1 || customItemPerPage);
-                    }}
-                    onDecrement={(newValue) => setCustomItemPerPage(parseInt(newValue) - 1 || customItemPerPage)}
-                    onValidate={(newValue) => setCustomItemPerPage(parseInt(newValue) || customItemPerPage)}
-                    min={1}
-                    step={1}
-                    className="textfontclr"
-                    incrementButtonAriaLabel="Increase value by 1"
-                    decrementButtonAriaLabel="Decrease value by 1"
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-        {shouldShowCrossPartitionOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Enable cross-partition query
-                <Tooltip>
-                  Send more than one request while executing a query. More than one request is necessary if the query is
-                  not scoped to single partition key value.
-                </Tooltip>
-              </div>
-
-              <Checkbox
-                styles={{
-                  label: { padding: 0 },
-                }}
-                className="padding"
-                tabIndex={0}
-                ariaLabel="Enable cross partition query"
-                checked={crossPartitionQueryEnabled}
-                onChange={() => setCrossPartitionQueryEnabled(!crossPartitionQueryEnabled)}
-              />
-            </div>
-          </div>
-        )}
-        {shouldShowParallelismOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Max degree of parallelism
-                <Tooltip>
-                  Gets or sets the number of concurrent operations run client side during parallel query execution. A
-                  positive property value limits the number of concurrent operations to the set value. If it is set to
-                  less than 0, the system automatically decides the number of concurrent operations to run.
-                </Tooltip>
-              </div>
-
-              <SpinButton
-                min={-1}
-                step={1}
-                className="textfontclr"
-                role="textbox"
-                tabIndex={0}
-                id="max-degree"
-                value={"" + maxDegreeOfParallelism}
-                onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)}
-                onDecrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) - 1 || maxDegreeOfParallelism)}
-                onValidate={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) || maxDegreeOfParallelism)}
-                ariaLabel="Max degree of parallelism"
-              />
-            </div>
-          </div>
-        )}
-        {shouldShowGraphAutoVizOption && (
-          <div className="settingsSection">
-            <div className="settingsSectionPart">
-              <div className="settingsSectionLabel">
-                Display Gremlin query results as:&nbsp;
-                <Tooltip>
-                  Select Graph to automatically visualize the query results as a Graph or JSON to display the results as
-                  JSON.
-                </Tooltip>
-              </div>
-
-              <ChoiceGroup
-                selectedKey={graphAutoVizDisabled}
-                options={graphAutoOptionList}
-                onChange={handleOnGremlinChange}
-                aria-label="Graph Auto-visualization"
-              />
-            </div>
-          </div>
-        )}
-        <div className="settingsSection">
-          <div className="settingsSectionPart">
-            <div className="settingsSectionLabel">Explorer Version</div>
-            <div>{explorerVersion}</div>
-          </div>
-        </div>
-      </div>
-    </GenericRightPaneComponent>
-  );
-};

src/Explorer/Panes/UploadFilePane.html

@@ -0,0 +1,83 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div class="contextual-pane-out" data-bind="click: cancel, clickBubble: false"></div>
+  <div class="contextual-pane" id="uploadFilePane">
+    <!-- Upload File form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Upload File header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: cancel">
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Upload File header - End -->
+
+        <!-- Upload File errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a
+                class="errorLink"
+                role="link"
+                data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails"
+                >More details</a
+              >
+            </span>
+          </div>
+        </div>
+        <!-- Upload File errors - End -->
+
+        <!-- Upload File inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <div class="renewUploadItemsHeader" data-bind="text: selectFileInputLabel"></div>
+            <input class="importFilesTitle" type="text" disabled data-bind="value: selectedFilesTitle" />
+            <input
+              type="file"
+              id="importFileInput"
+              style="display: none"
+              data-bind="event: { change: updateSelectedFiles }, attr: { accept: extensions }"
+            />
+            <a
+              href="#"
+              id="fileImportLinkNotebook"
+              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
+            >
+              <img
+                id="importFileButton"
+                class="fileImportImg"
+                src="/folder_16x16.svg"
+                alt="upload files"
+                title="Upload files"
+              />
+            </a>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut">
+            <input
+              id="uploadFileButton"
+              type="submit"
+              data-bind="attr: { value: submitButtonLabel }"
+              class="btncreatecoll1"
+            />
+          </div>
+        </div>
+        <!-- Upload File inputs - End -->
+      </form>
+    </div>
+    <!-- Upload File form  - Start -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>

src/Explorer/Panes/UploadFilePane.ts

@@ -0,0 +1,137 @@
+import * as ko from "knockout";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+
+export interface UploadFilePaneOpenOptions {
+  paneTitle: string;
+  selectFileInputLabel: string;
+  errorMessage: string; // Could not upload notebook
+  inProgressMessage: string; // Uploading notebook
+  successMessage: string; // Successfully uploaded notebook
+  onSubmit: (file: File) => Promise<any>;
+  extensions?: string; // input accept field. E.g: .ipynb
+  submitButtonLabel?: string;
+}
+
+export class UploadFilePane extends ContextualPaneBase {
+  public selectedFilesTitle: ko.Observable<string>;
+  public files: ko.Observable<FileList>;
+  private openOptions: UploadFilePaneOpenOptions;
+  private submitButtonLabel: ko.Observable<string>;
+  private selectFileInputLabel: ko.Observable<string>;
+  private extensions: ko.Observable<string>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this.resetData();
+    this.selectFileInputLabel = ko.observable("");
+    this.selectedFilesTitle = ko.observable<string>("");
+    this.extensions = ko.observable(null);
+    this.submitButtonLabel = ko.observable("Load");
+    this.files = ko.observable<FileList>();
+    this.files.subscribe((newFiles: FileList) => this.updateSelectedFilesTitle(newFiles));
+  }
+
+  public submit() {
+    this.formErrors("");
+    this.formErrorsDetails("");
+    if (!this.files() || this.files().length === 0) {
+      this.formErrors("No file specified");
+      this.formErrorsDetails("No file specified. Please input a file.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `${this.openOptions.errorMessage} -- No file specified. Please input a file.`
+      );
+      return;
+    }
+
+    const file: File = this.files().item(0);
+    const id: string = NotificationConsoleUtils.logConsoleMessage(
+      ConsoleDataType.InProgress,
+      `${this.openOptions.inProgressMessage}: ${file.name}`
+    );
+    this.isExecuting(true);
+    this.openOptions
+      .onSubmit(this.files().item(0))
+      .then(
+        () => {
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Info,
+            `${this.openOptions.successMessage} ${file.name}`
+          );
+          this.close();
+        },
+        (error: any) => {
+          this.formErrors(this.openOptions.errorMessage);
+          this.formErrorsDetails(`${this.openOptions.errorMessage}: ${error}`);
+          NotificationConsoleUtils.logConsoleMessage(
+            ConsoleDataType.Error,
+            `${this.openOptions.errorMessage} ${file.name}: ${error}`
+          );
+        }
+      )
+      .finally(() => {
+        this.isExecuting(false);
+        NotificationConsoleUtils.clearInProgressMessageWithId(id);
+      });
+  }
+
+  public updateSelectedFiles(element: any, event: any): void {
+    this.files(event.target.files);
+  }
+
+  public close() {
+    super.close();
+    this.resetData();
+    this.files(undefined);
+    this.resetFileInput();
+  }
+
+  public openWithOptions(options: UploadFilePaneOpenOptions): void {
+    this.openOptions = options;
+    this.title(this.openOptions.paneTitle);
+    if (this.openOptions.submitButtonLabel) {
+      this.submitButtonLabel(this.openOptions.submitButtonLabel);
+    }
+    this.selectFileInputLabel(this.openOptions.selectFileInputLabel);
+    if (this.openOptions.extensions) {
+      this.extensions(this.openOptions.extensions);
+    }
+    super.open();
+  }
+
+  public onImportLinkClick(source: any, event: MouseEvent): boolean {
+    document.getElementById("importFileInput").click();
+    return false;
+  }
+
+  public onImportLinkKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.onImportLinkClick(source, null);
+      return false;
+    }
+    return true;
+  };
+
+  private updateSelectedFilesTitle(fileList: FileList) {
+    this.selectedFilesTitle("");
+
+    if (!fileList || fileList.length === 0) {
+      return;
+    }
+
+    for (let i = 0; i < fileList.length; i++) {
+      const originalTitle = this.selectedFilesTitle();
+      this.selectedFilesTitle(originalTitle + `"${fileList.item(i).name}"`);
+    }
+  }
+
+  private resetFileInput(): void {
+    const inputElement = $("#importFileInput");
+    inputElement.wrap("<form>").closest("form").get(0).reset();
+    inputElement.unwrap();
+  }
+}

src/Explorer/Panes/UploadFilePane/index.tsx

@@ -1,111 +0,0 @@
-import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { Upload } from "../../../Common/Upload";
-import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
-import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-
-export interface UploadFilePanelProps {
-  explorer: Explorer;
-  closePanel: () => void;
-  uploadFile: (name: string, content: string) => Promise<NotebookContentItem>;
-}
-
-export const UploadFilePane: FunctionComponent<UploadFilePanelProps> = ({
-  explorer: container,
-  closePanel,
-  uploadFile,
-}: UploadFilePanelProps) => {
-  const title = "Upload file to notebook server";
-  const submitButtonLabel = "Upload";
-  const selectFileInputLabel = "Select file to upload";
-  const extensions: string = undefined; //ex. ".ipynb"
-  const errorMessage = "Could not upload file";
-  const inProgressMessage = "Uploading file to notebook server";
-  const successMessage = "Successfully uploaded file to notebook server";
-
-  const [files, setFiles] = useState<FileList>();
-  const [formErrors, setFormErrors] = useState<string>("");
-  const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");
-  const [isExecuting, setIsExecuting] = useState<boolean>(false);
-
-  const submit = () => {
-    setFormErrors("");
-    setFormErrorsDetails("");
-    if (!files || files.length === 0) {
-      setFormErrors("No file specified");
-      setFormErrorsDetails("No file specified. Please input a file.");
-      logConsoleError(`${errorMessage} -- No file specified. Please input a file.`);
-      return;
-    }
-
-    const file: File = files.item(0);
-    // const id: string = logConsoleProgress(
-    //   `${inProgressMessage}: ${file.name}`
-    // );
-
-    logConsoleProgress(`${inProgressMessage}: ${file.name}`);
-
-    setIsExecuting(true);
-
-    onSubmit(files.item(0))
-      .then(
-        () => {
-          logConsoleInfo(`${successMessage} ${file.name}`);
-          closePanel();
-        },
-        (error: string) => {
-          setFormErrors(errorMessage);
-          setFormErrorsDetails(`${errorMessage}: ${error}`);
-          logConsoleError(`${errorMessage} ${file.name}: ${error}`);
-        }
-      )
-      .finally(() => {
-        setIsExecuting(false);
-        // clearInProgressMessageWithId(id);
-      });
-  };
-
-  const updateSelectedFiles = (event: ChangeEvent<HTMLInputElement>): void => {
-    setFiles(event.target.files);
-  };
-
-  const onSubmit = async (file: File): Promise<NotebookContentItem> => {
-    const readFileAsText = (inputFile: File): Promise<string> => {
-      const reader = new FileReader();
-      return new Promise((resolve, reject) => {
-        reader.onerror = () => {
-          reader.abort();
-          reject(`Problem parsing file: ${inputFile}`);
-        };
-        reader.onload = () => {
-          resolve(reader.result as string);
-        };
-        reader.readAsText(inputFile);
-      });
-    };
-
-    const fileContent = await readFileAsText(file);
-    return uploadFile(file.name, fileContent);
-  };
-
-  const genericPaneProps: GenericRightPaneProps = {
-    container: container,
-    formError: formErrors,
-    formErrorDetail: formErrorsDetails,
-    id: "uploadFilePane",
-    isExecuting: isExecuting,
-    title,
-    submitButtonText: submitButtonLabel,
-    onClose: closePanel,
-    onSubmit: submit,
-  };
-
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="paneMainContent">
-        <Upload label={selectFileInputLabel} accept={extensions} onUpload={updateSelectedFiles} />
-      </div>
-    </GenericRightPaneComponent>
-  );
-};

src/Explorer/Panes/UploadItemsPane.html

@@ -0,0 +1,130 @@
+<div data-bind="visible: visible, event: { keydown: onPaneKeyDown }">
+  <div
+    class="contextual-pane-out"
+    data-bind="
+                click: cancel,
+                clickBubble: false"
+  ></div>
+  <div class="contextual-pane" id="uploaditemspane">
+    <!-- Upload items form  -- Start -->
+    <div class="contextual-pane-in">
+      <form class="paneContentContainer" data-bind="submit: submit">
+        <!-- Upload items header - Start -->
+        <div class="firstdivbg headerline">
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
+          <div
+            class="closeImg"
+            role="button"
+            aria-label="Close pane"
+            tabindex="0"
+            data-bind="
+                                click: cancel, event: { keydown: onCloseKeyPress }"
+          >
+            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
+          </div>
+        </div>
+        <!-- Upload items header - End -->
+
+        <!-- Upload items errors - Start -->
+        <div
+          class="warningErrorContainer"
+          aria-live="assertive"
+          data-bind="visible: formErrors() && formErrors() !== ''"
+        >
+          <div class="warningErrorContent">
+            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
+            <span class="warningErrorDetailsLinkContainer">
+              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
+              <a
+                class="errorLink"
+                role="link"
+                data-bind="
+                            visible: formErrorsDetails() && formErrorsDetails() !== '',
+                            click: showErrorDetails"
+                >More details</a
+              >
+            </span>
+          </div>
+        </div>
+        <!-- Upload items errors - End -->
+
+        <!-- Upload item inputs - Start -->
+        <div class="paneMainContent">
+          <div>
+            <div class="renewUploadItemsHeader">
+              <span> Select JSON Files </span>
+              <span class="infoTooltip" role="tooltip" tabindex="0">
+                <img class="infoImg" src="/info-bubble.svg" alt="More information" />
+                <span class="tooltiptext infoTooltipWidth"
+                  >Select one or more JSON files to upload. Each file can contain a single JSON document or an array of
+                  JSON documents. The combined size of all files in an individual upload operation must be less than 2
+                  MB. You can perform multiple upload operations for larger data sets.</span
+                >
+              </span>
+            </div>
+            <input
+              class="importFilesTitle"
+              type="text"
+              disabled
+              data-bind="value: selectedFilesTitle"
+              aria-label="Select JSON Files"
+            />
+            <input
+              type="file"
+              id="importDocsInput"
+              title="Upload Icon"
+              multiple
+              accept="application/json"
+              role="button"
+              tabindex="0"
+              style="display: none"
+              data-bind="event: { change: updateSelectedFiles }"
+            />
+            <a
+              href="#"
+              id="fileImportLink"
+              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
+              autofocus
+            >
+              <img
+                class="fileImportImg"
+                src="/folder_16x16.svg"
+                alt="Select JSON files to upload"
+                title="Select JSON files to upload"
+              />
+            </a>
+          </div>
+          <div class="fileUploadSummaryContainer" data-bind="visible: uploadFileDataVisible">
+            <b>File upload status</b>
+            <table class="fileUploadSummary">
+              <thead>
+                <tr class="fileUploadSummaryHeader fileUploadSummaryTuple">
+                  <th>FILE NAME</th>
+                  <th>STATUS</th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- ko foreach: uploadFileData -->
+                <tr class="fileUploadSummaryTuple">
+                  <td data-bind="text: $data.fileName"></td>
+                  <td data-bind="text: $parent.fileUploadSummaryText($data.numSucceeded, $data.numFailed)"></td>
+                </tr>
+                <!-- /ko -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="paneFooter">
+          <div class="leftpanel-okbut"><input type="submit" value="Upload" class="btncreatecoll1" /></div>
+        </div>
+        <!-- Upload item inputs - End -->
+      </form>
+    </div>
+    <!-- Upload items form  - Start -->
+    <!-- Loader - Start -->
+    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
+      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
+    </div>
+    <!-- Loader - End -->
+  </div>
+</div>

src/Explorer/Panes/UploadItemsPane.ts

@@ -0,0 +1,143 @@
+import * as ko from "knockout";
+import * as Constants from "../../Common/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ContextualPaneBase } from "./ContextualPaneBase";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { UploadDetailsRecord, UploadDetails } from "../../workers/upload/definitions";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+
+const UPLOAD_FILE_SIZE_LIMIT = 2097152;
+
+export class UploadItemsPane extends ContextualPaneBase {
+  public selectedFilesTitle: ko.Observable<string>;
+  public files: ko.Observable<FileList>;
+  public uploadFileDataVisible: ko.Computed<boolean>;
+  public uploadFileData: ko.ObservableArray<UploadDetailsRecord>;
+
+  constructor(options: ViewModels.PaneOptions) {
+    super(options);
+    this._initTitle();
+    this.resetData();
+
+    this.selectedFilesTitle = ko.observable<string>("");
+    this.uploadFileData = ko.observableArray<UploadDetailsRecord>();
+    this.uploadFileDataVisible = ko.computed<boolean>(
+      () => !!this.uploadFileData() && this.uploadFileData().length > 0
+    );
+    this.files = ko.observable<FileList>();
+    this.files.subscribe((newFiles: FileList) => this._updateSelectedFilesTitle(newFiles));
+  }
+
+  public submit() {
+    this.formErrors("");
+    if (!this.files() || this.files().length === 0) {
+      this.formErrors("No files specified");
+      this.formErrorsDetails("No files were specified. Please input at least one file.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not upload items -- No files were specified. Please input at least one file."
+      );
+      return;
+    } else if (this._totalFileSizeForFileList(this.files()) > UPLOAD_FILE_SIZE_LIMIT) {
+      this.formErrors("Upload file size limit exceeded");
+      this.formErrorsDetails("Total file upload size exceeds the 2 MB file size limit.");
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not upload items -- Total file upload size exceeds the 2 MB file size limit."
+      );
+      return;
+    }
+
+    const selectedCollection: ViewModels.Collection = this.container.findSelectedCollection();
+    this.isExecuting(true);
+    selectedCollection &&
+      selectedCollection
+        .uploadFiles(this.files())
+        .then(
+          (uploadDetails: UploadDetails) => {
+            this.uploadFileData(uploadDetails.data);
+            this.files(undefined);
+            this._resetFileInput();
+          },
+          (error: any) => {
+            const errorMessage = getErrorMessage(error);
+            this.formErrors(errorMessage);
+            this.formErrorsDetails(errorMessage);
+          }
+        )
+        .finally(() => {
+          this.isExecuting(false);
+        });
+  }
+
+  public updateSelectedFiles(element: any, event: any): void {
+    this.files(event.target.files);
+  }
+
+  public close() {
+    super.close();
+    this.resetData();
+    this.files(undefined);
+    this.uploadFileData([]);
+    this._resetFileInput();
+  }
+
+  public onImportLinkClick(source: any, event: MouseEvent): boolean {
+    document.getElementById("importDocsInput").click();
+    return false;
+  }
+
+  public onImportLinkKeyPress = (source: any, event: KeyboardEvent): boolean => {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      this.onImportLinkClick(source, null);
+      return false;
+    }
+    return true;
+  };
+
+  public fileUploadSummaryText = (numSucceeded: number, numFailed: number): string => {
+    return `${numSucceeded} items created, ${numFailed} errors`;
+  };
+
+  private _totalFileSizeForFileList(fileList: FileList): number {
+    let totalFileSize: number = 0;
+    if (!fileList) {
+      return totalFileSize;
+    }
+    for (let i = 0; i < fileList.length; i++) {
+      totalFileSize = totalFileSize + fileList.item(i).size;
+    }
+
+    return totalFileSize;
+  }
+
+  private _updateSelectedFilesTitle(fileList: FileList) {
+    this.selectedFilesTitle("");
+
+    if (!fileList || fileList.length === 0) {
+      return;
+    }
+
+    for (let i = 0; i < fileList.length; i++) {
+      const originalTitle = this.selectedFilesTitle();
+      this.selectedFilesTitle(originalTitle + `"${fileList.item(i).name}"`);
+    }
+  }
+
+  private _initTitle(): void {
+    if (this.container.isPreferredApiCassandra() || this.container.isPreferredApiTable()) {
+      this.title("Upload Tables");
+    } else if (this.container.isPreferredApiGraph()) {
+      this.title("Upload Graph");
+    } else {
+      this.title("Upload Items");
+    }
+  }
+
+  private _resetFileInput(): void {
+    const inputElement = $("#importDocsInput");
+    inputElement.wrap("<form>").closest("form").get(0).reset();
+    inputElement.unwrap();
+  }
+}

src/Explorer/Panes/UploadItemsPane/__snapshots__/index.test.tsx.snap

@@ -1,995 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Upload Items Pane should render Default properly 1`] = `
-<GenericRightPaneComponent
-  container={
-    Explorer {
-      "_closeModalDialog": [Function],
-      "_closeSynapseLinkModalDialog": [Function],
-      "_isAfecFeatureRegistered": [Function],
-      "_isInitializingNotebooks": false,
-      "_panes": Array [
-        AddDatabasePane {
-          "autoPilotUsageCost": [Function],
-          "canConfigureThroughput": [Function],
-          "canExceedMaximumValue": [Function],
-          "canRequestSupport": [Function],
-          "container": [Circular],
-          "costsVisible": [Function],
-          "databaseCreateNewShared": [Function],
-          "databaseId": [Function],
-          "databaseIdLabel": [Function],
-          "databaseIdPlaceHolder": [Function],
-          "databaseIdTooltipText": [Function],
-          "databaseLevelThroughputTooltipText": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "freeTierExceedThroughputTooltip": [Function],
-          "id": "adddatabasepane",
-          "isAutoPilotSelected": [Function],
-          "isExecuting": [Function],
-          "isFreeTierAccount": [Function],
-          "isTemplateReady": [Function],
-          "maxAutoPilotThroughputSet": [Function],
-          "maxThroughputRU": [Function],
-          "maxThroughputRUText": [Function],
-          "minThroughputRU": [Function],
-          "onMoreDetailsKeyPress": [Function],
-          "requestUnitsUsageCost": [Function],
-          "ruToolTipText": [Function],
-          "showUpsellMessage": [Function],
-          "throughput": [Function],
-          "throughputRangeText": [Function],
-          "throughputSpendAck": [Function],
-          "throughputSpendAckText": [Function],
-          "throughputSpendAckVisible": [Function],
-          "title": [Function],
-          "upsellAnchorText": [Function],
-          "upsellAnchorUrl": [Function],
-          "upsellMessage": [Function],
-          "upsellMessageAriaLabel": [Function],
-          "visible": [Function],
-        },
-        AddCollectionPane {
-          "_isSynapseLinkEnabled": [Function],
-          "autoPilotThroughput": [Function],
-          "autoPilotUsageCost": [Function],
-          "canConfigureThroughput": [Function],
-          "canExceedMaximumValue": [Function],
-          "canRequestSupport": [Function],
-          "collectionId": [Function],
-          "collectionIdTitle": [Function],
-          "collectionWithThroughputInShared": [Function],
-          "collectionWithThroughputInSharedTitle": [Function],
-          "container": [Circular],
-          "costsVisible": [Function],
-          "databaseCreateNew": [Function],
-          "databaseCreateNewShared": [Function],
-          "databaseHasSharedOffer": [Function],
-          "databaseId": [Function],
-          "databaseIds": [Function],
-          "dedicatedRequestUnitsUsageCost": [Function],
-          "displayCollectionThroughput": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "formWarnings": [Function],
-          "freeTierExceedThroughputTooltip": [Function],
-          "id": "addcollectionpane",
-          "isAnalyticalStorageOn": [Function],
-          "isAutoPilotSelected": [Function],
-          "isExecuting": [Function],
-          "isFixedStorageSelected": [Function],
-          "isFreeTierAccount": [Function],
-          "isNonTableApi": [Function],
-          "isPreferredApiTable": [Function],
-          "isSharedAutoPilotSelected": [Function],
-          "isSynapseLinkSupported": [Function],
-          "isSynapseLinkUpdating": [Function],
-          "isTemplateReady": [Function],
-          "isTryCosmosDBSubscription": [Function],
-          "isUnlimitedStorageSelected": [Function],
-          "largePartitionKey": [Function],
-          "lowerCasePartitionKeyName": [Function],
-          "maxCollectionsReached": [Function],
-          "maxCollectionsReachedMessage": [Function],
-          "maxThroughputRU": [Function],
-          "minThroughputRU": [Function],
-          "onMoreDetailsKeyPress": [Function],
-          "partitionKey": [Function],
-          "partitionKeyName": [Function],
-          "partitionKeyPattern": [Function],
-          "partitionKeyPlaceholder": [Function],
-          "partitionKeyTitle": [Function],
-          "partitionKeyVisible": [Function],
-          "requestUnitsUsageCost": [Function],
-          "ruToolTipText": [Function],
-          "sharedAutoPilotThroughput": [Function],
-          "sharedThroughputRangeText": [Function],
-          "shouldCreateMongoWildcardIndex": [Function],
-          "shouldUseDatabaseThroughput": [Function],
-          "showAnalyticalStore": [Function],
-          "showEnableSynapseLink": [Function],
-          "showIndexingOptionsForSharedThroughput": [Function],
-          "showUpsellMessage": [Function],
-          "storage": [Function],
-          "throughputDatabase": [Function],
-          "throughputMultiPartition": [Function],
-          "throughputRangeText": [Function],
-          "throughputSinglePartition": [Function],
-          "throughputSpendAck": [Function],
-          "throughputSpendAckText": [Function],
-          "throughputSpendAckVisible": [Function],
-          "title": [Function],
-          "ttl90DaysEnabled": [Function],
-          "uniqueKeys": [Function],
-          "uniqueKeysPlaceholder": [Function],
-          "uniqueKeysVisible": [Function],
-          "upsellAnchorText": [Function],
-          "upsellAnchorUrl": [Function],
-          "upsellMessage": [Function],
-          "upsellMessageAriaLabel": [Function],
-          "useIndexingForSharedThroughput": [Function],
-          "visible": [Function],
-        },
-        DeleteCollectionConfirmationPane {
-          "collectionIdConfirmation": [Function],
-          "collectionIdConfirmationText": [Function],
-          "container": [Circular],
-          "containerDeleteFeedback": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "deletecollectionconfirmationpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "recordDeleteFeedback": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        GraphStylingPane {
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "graphConfigUIData": Object {
-            "nodeCaptionChoice": [Function],
-            "nodeColorKeyChoice": [Function],
-            "nodeIconChoice": [Function],
-            "nodeIconSet": [Function],
-            "nodeProperties": [Function],
-            "nodePropertiesWithNone": [Function],
-            "showNeighborType": [Function],
-          },
-          "id": "graphstylingpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        AddTableEntityPane {
-          "addButtonLabel": "Add Property",
-          "attributeNameLabel": "Property Name",
-          "attributeValueLabel": "Value",
-          "canAdd": [Function],
-          "canApply": [Function],
-          "container": [Circular],
-          "dataTypeLabel": "Type",
-          "displayedAttributes": [Function],
-          "editAttribute": [Function],
-          "editButtonLabel": "Edit",
-          "editingProperty": [Function],
-          "edmTypes": [Function],
-          "enterRequiredValueLabel": "Enter identifier value.",
-          "enterValueLabel": "Enter value to keep property.",
-          "finishEditingAttribute": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "addtableentitypane",
-          "insertAttribute": [Function],
-          "isEditing": [Function],
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onAddPropertyKeyDown": [Function],
-          "onBackButtonKeyDown": [Function],
-          "onDeletePropertyKeyDown": [Function],
-          "onEditPropertyKeyDown": [Function],
-          "onKeyUp": [Function],
-          "removeAttribute": [Function],
-          "removeButtonLabel": "Remove",
-          "scrollId": [Function],
-          "submitButtonText": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        EditTableEntityPane {
-          "addButtonLabel": "Add Property",
-          "attributeNameLabel": "Property Name",
-          "attributeValueLabel": "Value",
-          "canAdd": [Function],
-          "canApply": [Function],
-          "container": [Circular],
-          "dataTypeLabel": "Type",
-          "displayedAttributes": [Function],
-          "editAttribute": [Function],
-          "editButtonLabel": "Edit",
-          "editingProperty": [Function],
-          "edmTypes": [Function],
-          "finishEditingAttribute": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "edittableentitypane",
-          "insertAttribute": [Function],
-          "isEditing": [Function],
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onAddPropertyKeyDown": [Function],
-          "onBackButtonKeyDown": [Function],
-          "onDeletePropertyKeyDown": [Function],
-          "onEditPropertyKeyDown": [Function],
-          "onKeyUp": [Function],
-          "removeAttribute": [Function],
-          "removeButtonLabel": "Remove",
-          "scrollId": [Function],
-          "submitButtonText": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        TableColumnOptionsPane {
-          "allSelected": [Function],
-          "anyColumnSelected": [Function],
-          "availableColumnsLabel": "Available Columns",
-          "canMoveDown": [Function],
-          "canMoveUp": [Function],
-          "canSelectAll": [Function],
-          "columnOptions": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "handleClick": [Function],
-          "id": "tablecolumnoptionspane",
-          "instructionLabel": "Choose the columns and the order in which you want to display them in the table.",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "moveDownLabel": "Move Down",
-          "moveUpLabel": "Move Up",
-          "noColumnSelectedWarning": "At least one column should be selected.",
-          "selectedColumnOption": null,
-          "title": [Function],
-          "titleLabel": "Column Options",
-          "visible": [Function],
-        },
-        QuerySelectPane {
-          "allSelected": [Function],
-          "anyColumnSelected": [Function],
-          "availableColumnsTableQueryLabel": "Available Columns",
-          "canSelectAll": [Function],
-          "columnOptions": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "handleClick": [Function],
-          "id": "queryselectpane",
-          "instructionLabel": "Select the columns that you want to query.",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "noColumnSelectedWarning": "At least one column should be selected.",
-          "selectedColumnOption": null,
-          "title": [Function],
-          "titleLabel": "Select Columns",
-          "visible": [Function],
-        },
-        NewVertexPane {
-          "buildString": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "newvertexpane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onMoreDetailsKeyPress": [Function],
-          "onSubmitCreateCallback": null,
-          "partitionKeyProperty": [Function],
-          "tempVertexData": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        CassandraAddCollectionPane {
-          "autoPilotUsageCost": [Function],
-          "canConfigureThroughput": [Function],
-          "canExceedMaximumValue": [Function],
-          "canRequestSupport": [Function],
-          "container": [Circular],
-          "costsVisible": [Function],
-          "createTableQuery": [Function],
-          "dedicateTableThroughput": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "cassandraaddcollectionpane",
-          "isAutoPilotSelected": [Function],
-          "isExecuting": [Function],
-          "isFreeTierAccount": [Function],
-          "isSharedAutoPilotSelected": [Function],
-          "isTemplateReady": [Function],
-          "keyspaceCreateNew": [Function],
-          "keyspaceHasSharedOffer": [Function],
-          "keyspaceId": [Function],
-          "keyspaceIds": [Function],
-          "keyspaceOffers": HashMap {
-            "container": Object {},
-          },
-          "keyspaceThroughput": [Function],
-          "maxThroughputRU": [Function],
-          "minThroughputRU": [Function],
-          "requestUnitsUsageCostDedicated": [Function],
-          "requestUnitsUsageCostShared": [Function],
-          "ruToolTipText": [Function],
-          "selectedAutoPilotThroughput": [Function],
-          "sharedAutoPilotThroughput": [Function],
-          "sharedThroughputRangeText": [Function],
-          "sharedThroughputSpendAck": [Function],
-          "sharedThroughputSpendAckText": [Function],
-          "sharedThroughputSpendAckVisible": [Function],
-          "tableId": [Function],
-          "throughput": [Function],
-          "throughputRangeText": [Function],
-          "throughputSpendAck": [Function],
-          "throughputSpendAckText": [Function],
-          "throughputSpendAckVisible": [Function],
-          "title": [Function],
-          "userTableQuery": [Function],
-          "visible": [Function],
-        },
-        LoadQueryPane {
-          "container": [Circular],
-          "files": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "loadquerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onImportLinkKeyPress": [Function],
-          "selectedFilesTitle": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        SaveQueryPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "savequerypane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "queryName": [Function],
-          "setupQueries": [Function],
-          "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-          "submit": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        BrowseQueriesPane {
-          "canSaveQueries": [Function],
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "browsequeriespane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "loadSavedQuery": [Function],
-          "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-            "container": [Circular],
-            "parameters": [Function],
-          },
-          "setupQueries": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        StringInputPane {
-          "container": [Circular],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "stringinputpane",
-          "inputLabel": [Function],
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "stringInput": [Function],
-          "submitButtonLabel": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-        SetupNotebooksPane {
-          "container": [Circular],
-          "description": [Function],
-          "firstFieldHasFocus": [Function],
-          "formErrors": [Function],
-          "formErrorsDetails": [Function],
-          "id": "setupnotebookspane",
-          "isExecuting": [Function],
-          "isTemplateReady": [Function],
-          "onCompleteSetupClick": [Function],
-          "onCompleteSetupKeyPress": [Function],
-          "title": [Function],
-          "visible": [Function],
-        },
-      ],
-      "_refreshSparkEnabledStateForAccount": [Function],
-      "_resetNotebookWorkspace": [Function],
-      "addCollectionPane": AddCollectionPane {
-        "_isSynapseLinkEnabled": [Function],
-        "autoPilotThroughput": [Function],
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "collectionId": [Function],
-        "collectionIdTitle": [Function],
-        "collectionWithThroughputInShared": [Function],
-        "collectionWithThroughputInSharedTitle": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "databaseCreateNew": [Function],
-        "databaseCreateNewShared": [Function],
-        "databaseHasSharedOffer": [Function],
-        "databaseId": [Function],
-        "databaseIds": [Function],
-        "dedicatedRequestUnitsUsageCost": [Function],
-        "displayCollectionThroughput": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "formWarnings": [Function],
-        "freeTierExceedThroughputTooltip": [Function],
-        "id": "addcollectionpane",
-        "isAnalyticalStorageOn": [Function],
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFixedStorageSelected": [Function],
-        "isFreeTierAccount": [Function],
-        "isNonTableApi": [Function],
-        "isPreferredApiTable": [Function],
-        "isSharedAutoPilotSelected": [Function],
-        "isSynapseLinkSupported": [Function],
-        "isSynapseLinkUpdating": [Function],
-        "isTemplateReady": [Function],
-        "isTryCosmosDBSubscription": [Function],
-        "isUnlimitedStorageSelected": [Function],
-        "largePartitionKey": [Function],
-        "lowerCasePartitionKeyName": [Function],
-        "maxCollectionsReached": [Function],
-        "maxCollectionsReachedMessage": [Function],
-        "maxThroughputRU": [Function],
-        "minThroughputRU": [Function],
-        "onMoreDetailsKeyPress": [Function],
-        "partitionKey": [Function],
-        "partitionKeyName": [Function],
-        "partitionKeyPattern": [Function],
-        "partitionKeyPlaceholder": [Function],
-        "partitionKeyTitle": [Function],
-        "partitionKeyVisible": [Function],
-        "requestUnitsUsageCost": [Function],
-        "ruToolTipText": [Function],
-        "sharedAutoPilotThroughput": [Function],
-        "sharedThroughputRangeText": [Function],
-        "shouldCreateMongoWildcardIndex": [Function],
-        "shouldUseDatabaseThroughput": [Function],
-        "showAnalyticalStore": [Function],
-        "showEnableSynapseLink": [Function],
-        "showIndexingOptionsForSharedThroughput": [Function],
-        "showUpsellMessage": [Function],
-        "storage": [Function],
-        "throughputDatabase": [Function],
-        "throughputMultiPartition": [Function],
-        "throughputRangeText": [Function],
-        "throughputSinglePartition": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "ttl90DaysEnabled": [Function],
-        "uniqueKeys": [Function],
-        "uniqueKeysPlaceholder": [Function],
-        "uniqueKeysVisible": [Function],
-        "upsellAnchorText": [Function],
-        "upsellAnchorUrl": [Function],
-        "upsellMessage": [Function],
-        "upsellMessageAriaLabel": [Function],
-        "useIndexingForSharedThroughput": [Function],
-        "visible": [Function],
-      },
-      "addCollectionText": [Function],
-      "addDatabasePane": AddDatabasePane {
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "databaseCreateNewShared": [Function],
-        "databaseId": [Function],
-        "databaseIdLabel": [Function],
-        "databaseIdPlaceHolder": [Function],
-        "databaseIdTooltipText": [Function],
-        "databaseLevelThroughputTooltipText": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "freeTierExceedThroughputTooltip": [Function],
-        "id": "adddatabasepane",
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFreeTierAccount": [Function],
-        "isTemplateReady": [Function],
-        "maxAutoPilotThroughputSet": [Function],
-        "maxThroughputRU": [Function],
-        "maxThroughputRUText": [Function],
-        "minThroughputRU": [Function],
-        "onMoreDetailsKeyPress": [Function],
-        "requestUnitsUsageCost": [Function],
-        "ruToolTipText": [Function],
-        "showUpsellMessage": [Function],
-        "throughput": [Function],
-        "throughputRangeText": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "upsellAnchorText": [Function],
-        "upsellAnchorUrl": [Function],
-        "upsellMessage": [Function],
-        "upsellMessageAriaLabel": [Function],
-        "visible": [Function],
-      },
-      "addDatabaseText": [Function],
-      "addTableEntityPane": AddTableEntityPane {
-        "addButtonLabel": "Add Property",
-        "attributeNameLabel": "Property Name",
-        "attributeValueLabel": "Value",
-        "canAdd": [Function],
-        "canApply": [Function],
-        "container": [Circular],
-        "dataTypeLabel": "Type",
-        "displayedAttributes": [Function],
-        "editAttribute": [Function],
-        "editButtonLabel": "Edit",
-        "editingProperty": [Function],
-        "edmTypes": [Function],
-        "enterRequiredValueLabel": "Enter identifier value.",
-        "enterValueLabel": "Enter value to keep property.",
-        "finishEditingAttribute": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "addtableentitypane",
-        "insertAttribute": [Function],
-        "isEditing": [Function],
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onAddPropertyKeyDown": [Function],
-        "onBackButtonKeyDown": [Function],
-        "onDeletePropertyKeyDown": [Function],
-        "onEditPropertyKeyDown": [Function],
-        "onKeyUp": [Function],
-        "removeAttribute": [Function],
-        "removeButtonLabel": "Remove",
-        "scrollId": [Function],
-        "submitButtonText": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "arcadiaToken": [Function],
-      "browseQueriesPane": BrowseQueriesPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "browsequeriespane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "loadSavedQuery": [Function],
-        "queriesGridComponentAdapter": QueriesGridComponentAdapter {
-          "container": [Circular],
-          "parameters": [Function],
-        },
-        "setupQueries": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "canExceedMaximumValue": [Function],
-      "canSaveQueries": [Function],
-      "cassandraAddCollectionPane": CassandraAddCollectionPane {
-        "autoPilotUsageCost": [Function],
-        "canConfigureThroughput": [Function],
-        "canExceedMaximumValue": [Function],
-        "canRequestSupport": [Function],
-        "container": [Circular],
-        "costsVisible": [Function],
-        "createTableQuery": [Function],
-        "dedicateTableThroughput": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "cassandraaddcollectionpane",
-        "isAutoPilotSelected": [Function],
-        "isExecuting": [Function],
-        "isFreeTierAccount": [Function],
-        "isSharedAutoPilotSelected": [Function],
-        "isTemplateReady": [Function],
-        "keyspaceCreateNew": [Function],
-        "keyspaceHasSharedOffer": [Function],
-        "keyspaceId": [Function],
-        "keyspaceIds": [Function],
-        "keyspaceOffers": HashMap {
-          "container": Object {},
-        },
-        "keyspaceThroughput": [Function],
-        "maxThroughputRU": [Function],
-        "minThroughputRU": [Function],
-        "requestUnitsUsageCostDedicated": [Function],
-        "requestUnitsUsageCostShared": [Function],
-        "ruToolTipText": [Function],
-        "selectedAutoPilotThroughput": [Function],
-        "sharedAutoPilotThroughput": [Function],
-        "sharedThroughputRangeText": [Function],
-        "sharedThroughputSpendAck": [Function],
-        "sharedThroughputSpendAckText": [Function],
-        "sharedThroughputSpendAckVisible": [Function],
-        "tableId": [Function],
-        "throughput": [Function],
-        "throughputRangeText": [Function],
-        "throughputSpendAck": [Function],
-        "throughputSpendAckText": [Function],
-        "throughputSpendAckVisible": [Function],
-        "title": [Function],
-        "userTableQuery": [Function],
-        "visible": [Function],
-      },
-      "clickHostedAccountSwitch": [Function],
-      "clickHostedDirectorySwitch": [Function],
-      "closeDialog": undefined,
-      "closeSidePanel": undefined,
-      "collapsedResourceTreeWidth": 36,
-      "collectionCreationDefaults": Object {
-        "storage": "100",
-        "throughput": Object {
-          "fixed": 400,
-          "shared": 400,
-          "unlimited": 400,
-          "unlimitedmax": 1000000,
-          "unlimitedmin": 400,
-        },
-      },
-      "collectionTitle": [Function],
-      "collectionTreeNodeAltText": [Function],
-      "commandBarComponentAdapter": CommandBarComponentAdapter {
-        "container": [Circular],
-        "isNotebookTabActive": [Function],
-        "parameters": [Function],
-        "tabsButtons": Array [],
-      },
-      "databaseAccount": [Function],
-      "databases": [Function],
-      "defaultExperience": [Function],
-      "deleteCollectionConfirmationPane": DeleteCollectionConfirmationPane {
-        "collectionIdConfirmation": [Function],
-        "collectionIdConfirmationText": [Function],
-        "container": [Circular],
-        "containerDeleteFeedback": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "deletecollectionconfirmationpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "recordDeleteFeedback": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "deleteCollectionText": [Function],
-      "deleteDatabaseText": [Function],
-      "editTableEntityPane": EditTableEntityPane {
-        "addButtonLabel": "Add Property",
-        "attributeNameLabel": "Property Name",
-        "attributeValueLabel": "Value",
-        "canAdd": [Function],
-        "canApply": [Function],
-        "container": [Circular],
-        "dataTypeLabel": "Type",
-        "displayedAttributes": [Function],
-        "editAttribute": [Function],
-        "editButtonLabel": "Edit",
-        "editingProperty": [Function],
-        "edmTypes": [Function],
-        "finishEditingAttribute": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "edittableentitypane",
-        "insertAttribute": [Function],
-        "isEditing": [Function],
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onAddPropertyKeyDown": [Function],
-        "onBackButtonKeyDown": [Function],
-        "onDeletePropertyKeyDown": [Function],
-        "onEditPropertyKeyDown": [Function],
-        "onKeyUp": [Function],
-        "removeAttribute": [Function],
-        "removeButtonLabel": "Remove",
-        "scrollId": [Function],
-        "submitButtonText": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "flight": [Function],
-      "graphStylingPane": GraphStylingPane {
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "graphConfigUIData": Object {
-          "nodeCaptionChoice": [Function],
-          "nodeColorKeyChoice": [Function],
-          "nodeIconChoice": [Function],
-          "nodeIconSet": [Function],
-          "nodeProperties": [Function],
-          "nodePropertiesWithNone": [Function],
-          "showNeighborType": [Function],
-        },
-        "id": "graphstylingpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "hasStorageAnalyticsAfecFeature": [Function],
-      "hasWriteAccess": [Function],
-      "isAccountReady": [Function],
-      "isAutoscaleDefaultEnabled": [Function],
-      "isCopyNotebookPaneEnabled": [Function],
-      "isEnableMongoCapabilityPresent": [Function],
-      "isFixedCollectionWithSharedThroughputSupported": [Function],
-      "isGitHubPaneEnabled": [Function],
-      "isHostedDataExplorerEnabled": [Function],
-      "isLeftPaneExpanded": [Function],
-      "isMongoIndexingEnabled": [Function],
-      "isNotebookEnabled": [Function],
-      "isNotebooksEnabledForAccount": [Function],
-      "isPreferredApiCassandra": [Function],
-      "isPreferredApiDocumentDB": [Function],
-      "isPreferredApiGraph": [Function],
-      "isPreferredApiMongoDB": [Function],
-      "isPreferredApiTable": [Function],
-      "isPublishNotebookPaneEnabled": [Function],
-      "isResourceTokenCollectionNodeSelected": [Function],
-      "isRightPanelV2Enabled": [Function],
-      "isSchemaEnabled": [Function],
-      "isServerlessEnabled": [Function],
-      "isSparkEnabled": [Function],
-      "isSparkEnabledForAccount": [Function],
-      "isSynapseLinkUpdating": [Function],
-      "isTabsContentExpanded": [Function],
-      "loadQueryPane": LoadQueryPane {
-        "container": [Circular],
-        "files": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "loadquerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onImportLinkKeyPress": [Function],
-        "selectedFilesTitle": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "memoryUsageInfo": [Function],
-      "newVertexPane": NewVertexPane {
-        "buildString": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "newvertexpane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onMoreDetailsKeyPress": [Function],
-        "onSubmitCreateCallback": null,
-        "partitionKeyProperty": [Function],
-        "tempVertexData": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "notebookBasePath": [Function],
-      "notebookServerInfo": [Function],
-      "onRefreshDatabasesKeyPress": [Function],
-      "onRefreshResourcesClick": [Function],
-      "onSwitchToConnectionString": [Function],
-      "openDialog": undefined,
-      "openSidePanel": undefined,
-      "provideFeedbackEmail": [Function],
-      "queriesClient": QueriesClient {
-        "container": [Circular],
-      },
-      "querySelectPane": QuerySelectPane {
-        "allSelected": [Function],
-        "anyColumnSelected": [Function],
-        "availableColumnsTableQueryLabel": "Available Columns",
-        "canSelectAll": [Function],
-        "columnOptions": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "handleClick": [Function],
-        "id": "queryselectpane",
-        "instructionLabel": "Select the columns that you want to query.",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "noColumnSelectedWarning": "At least one column should be selected.",
-        "selectedColumnOption": null,
-        "title": [Function],
-        "titleLabel": "Select Columns",
-        "visible": [Function],
-      },
-      "refreshDatabaseAccount": [Function],
-      "refreshNotebookList": [Function],
-      "refreshTreeTitle": [Function],
-      "resourceTokenCollection": [Function],
-      "resourceTokenCollectionId": [Function],
-      "resourceTokenDatabaseId": [Function],
-      "resourceTokenPartitionKey": [Function],
-      "resourceTree": ResourceTreeAdapter {
-        "container": [Circular],
-        "copyNotebook": [Function],
-        "databaseCollectionIdMap": ArrayHashMap {
-          "store": HashMap {
-            "container": Object {},
-          },
-        },
-        "koSubsCollectionIdMap": ArrayHashMap {
-          "store": HashMap {
-            "container": Object {},
-          },
-        },
-        "koSubsDatabaseIdMap": ArrayHashMap {
-          "store": HashMap {
-            "container": Object {},
-          },
-        },
-        "parameters": [Function],
-      },
-      "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-        "container": [Circular],
-        "parameters": [Function],
-      },
-      "saveQueryPane": SaveQueryPane {
-        "canSaveQueries": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "savequerypane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "queryName": [Function],
-        "setupQueries": [Function],
-        "setupSaveQueriesText": "For compliance reasons, we save queries in a container in your Azure Cosmos account, in a separate database called “___Cosmos”. To proceed, we need to create a container in your account, estimated additional cost is $0.77 daily.",
-        "submit": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "selectedDatabaseId": [Function],
-      "selectedNode": [Function],
-      "setInProgressConsoleDataIdToBeDeleted": undefined,
-      "setIsNotificationConsoleExpanded": undefined,
-      "setNotificationConsoleData": undefined,
-      "setupNotebooksPane": SetupNotebooksPane {
-        "container": [Circular],
-        "description": [Function],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "setupnotebookspane",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "onCompleteSetupClick": [Function],
-        "onCompleteSetupKeyPress": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "signInAad": [Function],
-      "sparkClusterConnectionInfo": [Function],
-      "splitter": Splitter {
-        "bounds": Object {
-          "max": 400,
-          "min": 240,
-        },
-        "direction": "vertical",
-        "isCollapsed": [Function],
-        "leftSideId": "resourcetree",
-        "onResizeStart": [Function],
-        "onResizeStop": [Function],
-        "splitterId": "h_splitter1",
-      },
-      "stringInputPane": StringInputPane {
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "id": "stringinputpane",
-        "inputLabel": [Function],
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "stringInput": [Function],
-        "submitButtonLabel": [Function],
-        "title": [Function],
-        "visible": [Function],
-      },
-      "subscriptionType": [Function],
-      "tableColumnOptionsPane": TableColumnOptionsPane {
-        "allSelected": [Function],
-        "anyColumnSelected": [Function],
-        "availableColumnsLabel": "Available Columns",
-        "canMoveDown": [Function],
-        "canMoveUp": [Function],
-        "canSelectAll": [Function],
-        "columnOptions": [Function],
-        "container": [Circular],
-        "firstFieldHasFocus": [Function],
-        "formErrors": [Function],
-        "formErrorsDetails": [Function],
-        "handleClick": [Function],
-        "id": "tablecolumnoptionspane",
-        "instructionLabel": "Choose the columns and the order in which you want to display them in the table.",
-        "isExecuting": [Function],
-        "isTemplateReady": [Function],
-        "moveDownLabel": "Move Down",
-        "moveUpLabel": "Move Up",
-        "noColumnSelectedWarning": "At least one column should be selected.",
-        "selectedColumnOption": null,
-        "title": [Function],
-        "titleLabel": "Column Options",
-        "visible": [Function],
-      },
-      "tabsManager": TabsManager {
-        "activeTab": [Function],
-        "openedTabs": [Function],
-      },
-      "toggleLeftPaneExpandedKeyPress": [Function],
-    }
-  }
-  formError=""
-  formErrorDetail=""
-  id="uploaditemspane"
-  onClose={[Function]}
-  onSubmit={[Function]}
-  submitButtonText="Upload"
-  title="Upload Items"
->
-  <div
-    className="paneMainContent"
-  >
-    <Upload
-      accept="application/json"
-      label="Select JSON Files"
-      multiple={true}
-      onUpload={[Function]}
-      tabIndex={0}
-      tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
-    />
-  </div>
-</GenericRightPaneComponent>
-`;

src/Explorer/Panes/UploadItemsPane/index.test.tsx

@@ -1,14 +0,0 @@
-import { shallow } from "enzyme";
-import React from "react";
-import { UploadItemsPane } from ".";
-import Explorer from "../../Explorer";
-const props = {
-  explorer: new Explorer(),
-  closePanel: (): void => undefined,
-};
-describe("Upload Items Pane", () => {
-  it("should render Default properly", () => {
-    const wrapper = shallow(<UploadItemsPane {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-});

src/Explorer/Panes/UploadItemsPane/index.tsx

@@ -1,160 +0,0 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from "office-ui-fabric-react";
-import React, { ChangeEvent, FunctionComponent, useState } from "react";
-import { Upload } from "../../../Common/Upload";
-import { userContext } from "../../../UserContext";
-import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
-import { UploadDetails, UploadDetailsRecord } from "../../../workers/upload/definitions";
-import Explorer from "../../Explorer";
-import { getErrorMessage } from "../../Tables/Utilities";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
-
-const UPLOAD_FILE_SIZE_LIMIT_KB = 2097152;
-
-export interface UploadItemsPaneProps {
-  explorer: Explorer;
-  closePanel: () => void;
-}
-
-interface IUploadFileData {
-  numSucceeded: number;
-  numFailed: number;
-  fileName: string;
-}
-
-const getTitle = (): string => {
-  if (userContext.apiType === "Cassandra" || userContext.apiType === "Tables") {
-    return "Upload Tables";
-  } else if (userContext.apiType === "Gremlin") {
-    return "Upload Graph";
-  } else {
-    return "Upload Items";
-  }
-};
-
-export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({
-  explorer,
-  closePanel,
-}: UploadItemsPaneProps) => {
-  const [files, setFiles] = useState<FileList>();
-  const [uploadFileData, setUploadFileData] = useState<UploadDetailsRecord[]>([]);
-  const [formError, setFormError] = useState<string>("");
-  const [formErrorDetail, setFormErrorDetail] = useState<string>("");
-  const [isExecuting, setIsExecuting] = useState<boolean>();
-
-  const onSubmit = () => {
-    setFormError("");
-    if (!files || files.length === 0) {
-      setFormError("No files specified");
-      setFormErrorDetail("No files were specified. Please input at least one file.");
-      logConsoleError("Could not upload items -- No files were specified. Please input at least one file.");
-    } else if (_totalFileSizeForFileList(files) > UPLOAD_FILE_SIZE_LIMIT_KB) {
-      setFormError("Upload file size limit exceeded");
-      setFormErrorDetail("Total file upload size exceeds the 2 MB file size limit.");
-      logConsoleError("Could not upload items -- Total file upload size exceeds the 2 MB file size limit.");
-    }
-
-    const selectedCollection = explorer.findSelectedCollection();
-
-    setIsExecuting(true);
-
-    selectedCollection
-      ?.uploadFiles(files)
-      .then(
-        (uploadDetails: UploadDetails) => {
-          setUploadFileData(uploadDetails.data);
-          setFiles(undefined);
-        },
-        (error: Error) => {
-          const errorMessage = getErrorMessage(error);
-          setFormError(errorMessage);
-          setFormErrorDetail(errorMessage);
-        }
-      )
-      .finally(() => {
-        setIsExecuting(false);
-      });
-  };
-
-  const updateSelectedFiles = (event: ChangeEvent<HTMLInputElement>): void => {
-    setFiles(event.target.files);
-  };
-
-  const _totalFileSizeForFileList = (fileList: FileList): number => {
-    let totalFileSize = 0;
-    for (let i = 0; i < fileList?.length; i++) {
-      totalFileSize += fileList.item(i).size;
-    }
-    return totalFileSize;
-  };
-
-  const genericPaneProps: GenericRightPaneProps = {
-    container: explorer,
-    formError,
-    formErrorDetail,
-    id: "uploaditemspane",
-    isExecuting: isExecuting,
-    title: getTitle(),
-    submitButtonText: "Upload",
-    onClose: closePanel,
-    onSubmit,
-  };
-  const columns: IColumn[] = [
-    {
-      key: "fileName",
-      name: "FILE NAME",
-      fieldName: "fileName",
-      minWidth: 140,
-      maxWidth: 140,
-    },
-    {
-      key: "status",
-      name: "STATUS",
-      fieldName: "numSucceeded",
-      minWidth: 140,
-      maxWidth: 140,
-      isRowHeader: true,
-      isResizable: true,
-      data: "string",
-      isPadded: true,
-    },
-  ];
-
-  const _renderItemColumn = (item: IUploadFileData, index: number, column: IColumn) => {
-    switch (column.key) {
-      case "status":
-        return <span>{item.numSucceeded + " items created, " + item.numFailed + " errors"}</span>;
-      default:
-        return <span>{item.fileName}</span>;
-    }
-  };
-
-  return (
-    <GenericRightPaneComponent {...genericPaneProps}>
-      <div className="paneMainContent">
-        <Upload
-          label="Select JSON Files"
-          onUpload={updateSelectedFiles}
-          accept="application/json"
-          multiple
-          tabIndex={0}
-          tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON
-              documents. The combined size of all files in an individual upload operation must be less than 2 MB. You
-              can perform multiple upload operations for larger data sets."
-        />
-        {uploadFileData?.length > 0 && (
-          <div className="fileUploadSummaryContainer">
-            <b>File upload status</b>
-            <DetailsList
-              items={uploadFileData}
-              columns={columns}
-              onRenderItemColumn={_renderItemColumn}
-              selectionMode={SelectionMode.none}
-              layoutMode={DetailsListLayoutMode.justified}
-              isHeaderVisible={true}
-            />
-          </div>
-        )}
-      </div>
-    </GenericRightPaneComponent>
-  );
-};

src/Explorer/Panes/UploadItemsPaneAdapter.tsx

@@ -0,0 +1,161 @@
+import * as ko from "knockout";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as React from "react";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRightPaneComponent";
+import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import { UploadDetailsRecord, UploadDetails } from "../../workers/upload/definitions";
+import { UploadItemsPaneComponent, UploadItemsPaneProps } from "./UploadItemsPaneComponent";
+import Explorer from "../Explorer";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+
+const UPLOAD_FILE_SIZE_LIMIT = 2097152;
+
+export class UploadItemsPaneAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+  private isOpened: boolean;
+  private isExecuting: boolean;
+  private formError: string;
+  private formErrorDetail: string;
+  private selectedFiles: FileList;
+  private selectedFilesTitle: string;
+  private uploadFileData: UploadDetailsRecord[];
+
+  public constructor(private container: Explorer) {
+    this.parameters = ko.observable(Date.now());
+    this.reset();
+    this.triggerRender();
+  }
+
+  public renderComponent(): JSX.Element {
+    if (!this.isOpened) {
+      return undefined;
+    }
+
+    const genericPaneProps: GenericRightPaneProps = {
+      container: this.container,
+      formError: this.formError,
+      formErrorDetail: this.formErrorDetail,
+      id: "uploaditemspane",
+      isExecuting: this.isExecuting,
+      title: "Upload Items",
+      submitButtonText: "Upload",
+      onClose: () => this.close(),
+      onSubmit: () => this.submit(),
+    };
+
+    const uploadItemsPaneProps: UploadItemsPaneProps = {
+      selectedFilesTitle: this.selectedFilesTitle,
+      updateSelectedFiles: this.updateSelectedFiles,
+      uploadFileData: this.uploadFileData,
+    };
+
+    return (
+      <GenericRightPaneComponent {...genericPaneProps}>
+        <UploadItemsPaneComponent {...uploadItemsPaneProps} />
+      </GenericRightPaneComponent>
+    );
+  }
+
+  public triggerRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+
+  public open(): void {
+    this.isOpened = true;
+    this.triggerRender();
+  }
+
+  public close(): void {
+    this.reset();
+    this.triggerRender();
+  }
+
+  public submit(): void {
+    this.formError = "";
+    if (!this.selectedFiles || this.selectedFiles.length === 0) {
+      this.formError = "No files specified";
+      this.formErrorDetail = "No files were specified. Please input at least one file.";
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not upload items -- No files were specified. Please input at least one file."
+      );
+      this.triggerRender();
+      return;
+    } else if (this._totalFileSizeForFileList() > UPLOAD_FILE_SIZE_LIMIT) {
+      this.formError = "Upload file size limit exceeded";
+      this.formErrorDetail = "Total file upload size exceeds the 2 MB file size limit.";
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        "Could not upload items -- Total file upload size exceeds the 2 MB file size limit."
+      );
+      this.triggerRender();
+      return;
+    }
+
+    const selectedCollection: ViewModels.Collection = this.container.findSelectedCollection();
+    this.isExecuting = true;
+    this.triggerRender();
+    selectedCollection &&
+      selectedCollection
+        .uploadFiles(this.selectedFiles)
+        .then(
+          (uploadDetails: UploadDetails) => {
+            this.uploadFileData = uploadDetails.data;
+            this.selectedFiles = undefined;
+            this.selectedFilesTitle = "";
+          },
+          (error) => {
+            const errorMessage = getErrorMessage(error);
+            this.formError = errorMessage;
+            this.formErrorDetail = errorMessage;
+          }
+        )
+        .finally(() => {
+          this.triggerRender();
+          this.isExecuting = false;
+        });
+  }
+
+  private updateSelectedFiles = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    this.selectedFiles = event.target.files;
+    this._updateSelectedFilesTitle();
+    this.triggerRender();
+  };
+
+  private _updateSelectedFilesTitle = (): void => {
+    this.selectedFilesTitle = "";
+
+    if (!this.selectedFiles || this.selectedFiles.length === 0) {
+      return;
+    }
+
+    for (let i = 0; i < this.selectedFiles.length; i++) {
+      this.selectedFilesTitle += `"${this.selectedFiles.item(i).name}"`;
+    }
+  };
+
+  private _totalFileSizeForFileList(): number {
+    let totalFileSize = 0;
+    if (!this.selectedFiles) {
+      return totalFileSize;
+    }
+
+    for (let i = 0; i < this.selectedFiles.length; i++) {
+      totalFileSize += this.selectedFiles.item(i).size;
+    }
+
+    return totalFileSize;
+  }
+
+  private reset = (): void => {
+    this.isOpened = false;
+    this.isExecuting = false;
+    this.formError = "";
+    this.formErrorDetail = "";
+    this.selectedFiles = undefined;
+    this.selectedFilesTitle = "";
+    this.uploadFileData = [];
+  };
+}

src/Explorer/Panes/UploadItemsPaneComponent.tsx

@@ -0,0 +1,97 @@
+import * as Constants from "../../Common/Constants";
+import * as React from "react";
+import { IconButton } from "office-ui-fabric-react/lib/Button";
+import { UploadDetailsRecord } from "../../workers/upload/definitions";
+import InfoBubbleIcon from "../../../images/info-bubble.svg";
+
+export interface UploadItemsPaneProps {
+  selectedFilesTitle: string;
+  updateSelectedFiles: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  uploadFileData: UploadDetailsRecord[];
+}
+
+export class UploadItemsPaneComponent extends React.Component<UploadItemsPaneProps> {
+  public render(): JSX.Element {
+    return (
+      <div className="panelContent">
+        <div className="paneMainContent">
+          <div className="renewUploadItemsHeader">
+            <span> Select JSON Files </span>
+            <span className="infoTooltip" role="tooltip" tabIndex={0}>
+              <img className="infoImg" src={InfoBubbleIcon} alt="More information" />
+              <span className="tooltiptext infoTooltipWidth">
+                Select one or more JSON files to upload. Each file can contain a single JSON document or an array of
+                JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB.
+                You can perform multiple upload operations for larger data sets.
+              </span>
+            </span>
+          </div>
+          <input
+            className="importFilesTitle"
+            type="text"
+            disabled
+            value={this.props.selectedFilesTitle}
+            aria-label="Select JSON Files"
+          />
+          <input
+            type="file"
+            id="importDocsInput"
+            title="Upload Icon"
+            multiple
+            accept="application/json"
+            role="button"
+            tabIndex={0}
+            style={{ display: "none" }}
+            onChange={this.props.updateSelectedFiles}
+          />
+          <IconButton
+            iconProps={{ iconName: "FolderHorizontal" }}
+            className="fileImportButton"
+            alt="Select JSON files to upload"
+            title="Select JSON files to upload"
+            onClick={this.onImportButtonClick}
+            onKeyPress={this.onImportButtonKeyPress}
+          />
+          <div className="fileUploadSummaryContainer" hidden={this.props.uploadFileData.length === 0}>
+            <b>File upload status</b>
+            <table className="fileUploadSummary">
+              <thead>
+                <tr className="fileUploadSummaryHeader fileUploadSummaryTuple">
+                  <th>FILE NAME</th>
+                  <th>STATUS</th>
+                </tr>
+              </thead>
+              <tbody>
+                {this.props.uploadFileData.map(
+                  (data: UploadDetailsRecord): JSX.Element => {
+                    return (
+                      <tr className="fileUploadSummaryTuple" key={data.fileName}>
+                        <td>{data.fileName}</td>
+                        <td>{this.fileUploadSummaryText(data.numSucceeded, data.numFailed)}</td>
+                      </tr>
+                    );
+                  }
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  private fileUploadSummaryText = (numSucceeded: number, numFailed: number): string => {
+    return `${numSucceeded} items created, ${numFailed} errors`;
+  };
+
+  private onImportButtonClick = (): void => {
+    document.getElementById("importDocsInput").click();
+  };
+
+  private onImportButtonKeyPress = (event: React.KeyboardEvent<HTMLButtonElement>): void => {
+    if (event.charCode === Constants.KeyCodes.Enter || event.charCode === Constants.KeyCodes.Space) {
+      this.onImportButtonClick();
+      event.stopPropagation();
+    }
+  };
+}

src/Explorer/Panes/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
         verticalAlign="start"
       >
         <div
-          className="ms-Stack panelInfoErrorContainer css-204"
+          className="ms-Stack panelInfoErrorContainer css-140"
         >
           <StyledIconBase
             className="panelWarningIcon"
@@ -317,7 +317,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <i
                 aria-hidden={true}
-                className="panelWarningIcon root-206"
+                className="panelWarningIcon root-142"
                 data-icon-name="WarningSolid"
               >
                 
@@ -333,7 +333,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="panelWarningErrorMessage css-207"
+                className="panelWarningErrorMessage css-143"
               >
                 Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                  
@@ -358,7 +358,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-207"
+            className="css-143"
           >
             Confirm by typing the collection id
           </span>
@@ -659,18 +659,18 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField root-209"
+              className="ms-TextField root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-210"
+                  className="ms-TextField-fieldGroup fieldGroup-146"
                 >
                   <input
                     aria-invalid={false}
                     autoFocus={true}
-                    className="ms-TextField-field field-211"
+                    className="ms-TextField-field field-147"
                     id="confirmCollectionId"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -693,7 +693,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-220"
+            className="css-156"
           >
             Help us improve Azure Cosmos DB!
           </span>
@@ -703,7 +703,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
           variant="small"
         >
           <span
-            className="css-220"
+            className="css-156"
           >
             What is the reason why you are deleting this container?
           </span>
@@ -1006,17 +1006,17 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             validateOnLoad={true}
           >
             <div
-              className="ms-TextField ms-TextField--multiline root-209"
+              className="ms-TextField ms-TextField--multiline root-145"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-221"
+                  className="ms-TextField-fieldGroup fieldGroup-157"
                 >
                   <textarea
                     aria-invalid={false}
-                    className="ms-TextField-field field-222"
+                    className="ms-TextField-field field-158"
                     id="deleteCollectionFeedbackInput"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -2708,7 +2708,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   variantClassName="ms-Button--primary"
                 >
                   <button
-                    className="ms-Button ms-Button--primary root-224"
+                    className="ms-Button ms-Button--primary root-160"
                     data-is-focusable={true}
                     id="sidePanelOkButton"
                     onClick={[Function]}
@@ -2720,14 +2720,14 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     type="submit"
                   >
                     <span
-                      className="ms-Button-flexContainer flexContainer-225"
+                      className="ms-Button-flexContainer flexContainer-161"
                       data-automationid="splitbuttonprimary"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-226"
+                        className="ms-Button-textContainer textContainer-162"
                       >
                         <span
-                          className="ms-Button-label label-228"
+                          className="ms-Button-label label-164"
                           id="id__6"
                           key="id__6"
                         >

src/Explorer/Tabs/DocumentsTab.ts

@@ -1,35 +1,43 @@
-import { extractPartitionKey, ItemDefinition, PartitionKeyDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as ko from "knockout";
 import Q from "q";
-import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
-import DiscardIcon from "../../../images/discard.svg";
-import NewDocumentIcon from "../../../images/NewDocument.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import UploadIcon from "../../../images/Upload_16x16.svg";
 import * as Constants from "../../Common/Constants";
-import { DocumentsGridMetrics, KeyCodes } from "../../Common/Constants";
-import { createDocument } from "../../Common/dataAccess/createDocument";
-import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
-import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
-import { readDocument } from "../../Common/dataAccess/readDocument";
-import { updateDocument } from "../../Common/dataAccess/updateDocument";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../../Utils/QueryUtils";
-import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import Explorer from "../Explorer";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
+import { KeyCodes } from "../../Common/Constants";
 import DocumentId from "../Tree/DocumentId";
-import template from "./DocumentsTab.html";
+import editable from "../../Common/EditableUtility";
+import * as HeadersUtility from "../../Common/HeadersUtility";
 import TabsBase from "./TabsBase";
+import { DocumentsGridMetrics } from "../../Common/Constants";
+import { QueryUtils } from "../../Utils/QueryUtils";
+import { Splitter, SplitterBounds, SplitterDirection } from "../../Common/Splitter";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import NewDocumentIcon from "../../../images/NewDocument.svg";
+import SaveIcon from "../../../images/save-cosmos.svg";
+import DiscardIcon from "../../../images/discard.svg";
+import DeleteDocumentIcon from "../../../images/DeleteDocument.svg";
+import UploadIcon from "../../../images/Upload_16x16.svg";
+import {
+  extractPartitionKey,
+  PartitionKeyDefinition,
+  QueryIterator,
+  ItemDefinition,
+  Resource,
+  Item,
+} from "@azure/cosmos";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import Explorer from "../Explorer";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
+import { readDocument } from "../../Common/dataAccess/readDocument";
+import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
+import { updateDocument } from "../../Common/dataAccess/updateDocument";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import template from "./DocumentsTab.html";
 
 export default class DocumentsTab extends TabsBase {
   public static readonly component = { name: "documents-tab", template };
@@ -914,7 +922,12 @@ export default class DocumentsTab extends TabsBase {
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-        selectedCollection && container.openUploadItemsPanePane();
+        const focusElement = document.getElementById("itemImportLink");
+        const uploadItemsPane = container.isRightPanelV2Enabled()
+          ? container.uploadItemsPaneAdapter
+          : container.uploadItemsPane;
+        selectedCollection && uploadItemsPane.open();
+        focusElement && focusElement.focus();
       },
       commandButtonLabel: label,
       ariaLabel: label,

src/Explorer/Tabs/MongoQueryTab.html

@@ -0,0 +1,120 @@
+<div
+  class="tab-pane"
+  data-bind="
+                            attr:{
+                                id: tabId
+                            }"
+  role="tabpanel"
+>
+  <!-- Query Tab Command Bar - Start -->
+  <div class="contentdiv">
+    <div class="tabCommandButton">
+      <!-- Execute Query - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                                            click: onExecuteQueryClick,
+                                            visible: executeQueryButton.visible() && executeQueryButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/ExecuteQuery.svg" />Run
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                                            visible: executeQueryButton.visible() && !executeQueryButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/ExecuteQuery-disabled.svg" />Run
+      </span>
+      <!-- Execute Query - End -->
+    </div>
+  </div>
+  <!-- Query Tab Command Bar - End -->
+
+  <div
+    class="queryEditor"
+    data-bind="
+                                    attr: {
+                                        id: queryEditorId
+                                    },
+                                    css: {
+                                        mongoQueryEditor:$root.isPreferredApiMongoDB()
+                                    }"
+  ></div>
+  <div
+    style="margin-left: 50px; margin-top: -75px"
+    data-bind="
+                                visible: $root.isPreferredApiMongoDB() && sqlQueryEditorContent().length == 0"
+  >
+    Start by writing a Mongo query, for example: <strong>{'id':'foo'}</strong> or <strong>{ }</strong> to get all the
+    documents.
+  </div>
+  <!-- Query Errors Tab - Start-->
+  <div class="active queryErrorsHeaderContainer" data-bind="visible: errors().length > 0">
+    <span
+      class="queryErrors"
+      data-toggle="tab"
+      data-bind="
+                                    attr: {
+                                        href: '#queryerrors' + tabId
+                                    }"
+      >Errors</span
+    >
+  </div>
+  <!-- Query Errors Tab - End -->
+
+  <!-- Query Results & Errors Content Container - Start-->
+  <div class="queryResultErrorContentContainer">
+    <!-- Query Results Content - Start-->
+    <div
+      class="tab-pane active"
+      data-bind="
+                                    id: {
+                                        href: 'queryresults' + tabId
+                                    },
+                                    visible: allResultsMetadata().length > 0 && !errors().length > 0"
+    >
+      <div class="queryResultsValue">
+        <span class="queryResults"> Results: </span> <span data-bind="text: showingDocumentsDisplayText"></span>
+        <span class="queryResultDivider"> | </span> <span> Request Charge: </span>
+        <span data-bind="text: requestChargeDisplayText"></span> <span class="queryResultDivider"> | </span>
+        <span class="queryResultNextEnable" data-bind="visible: fetchNextPageButton.enabled">
+          <a
+            data-bind="
+                        click: onFetchNextPageClick"
+          >
+            <span>Next</span> <img class="queryResultnextImg" src="/Query-Editor-Next.svg" />
+          </a>
+        </span>
+        <span class="queryResultNextDisable" data-bind="visible: !fetchNextPageButton.enabled()">
+          <span>Next</span> <img class="queryResultnextImg" src="/Query-Editor-Next-Disabled.svg" />
+        </span>
+      </div>
+      <div
+        style="height: 600px"
+        data-bind="
+                                            attr: {
+                                                id: resultsEditorId
+                                            }"
+      ></div>
+    </div>
+    <!-- Query Results Content - Start-->
+
+    <!-- Query Errors Content - Start-->
+    <div
+      class="tab-pane active"
+      data-bind="
+                                    id: {
+                                        href: 'queryerrors' + tabId
+                                    },
+                                    visible: errors().length > 0"
+    >
+      <!-- ko foreach: errors -->
+      <div style="margin-left: 17px; font-size: 12px">
+        <span data-bind="text: $data.code"></span> : <span data-bind="text: $data.message"></span>
+      </div>
+      <!-- /ko -->
+    </div>
+    <!-- Query Errors Content - End-->
+  </div>
+  <!-- Results & Errors Content Container - Endt-->
+</div>

src/Explorer/Tabs/MongoQueryTab.ts

@@ -5,8 +5,10 @@ import QueryTab from "./QueryTab";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { queryIterator } from "../../Common/MongoProxyClient";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
+import template from "./MongoQueryTab.html";
 
 export default class MongoQueryTab extends QueryTab {
+  public static readonly component = { name: "mongo-query-tab", template };
   public collection: ViewModels.Collection;
 
   constructor(options: ViewModels.QueryTabOptions) {

src/Explorer/Tabs/QueryTab.ts

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

src/Explorer/Tabs/StoredProcedureTab.ts

@@ -7,13 +7,13 @@ import * as Constants from "../../Common/Constants";
 import { createStoredProcedure } from "../../Common/dataAccess/createStoredProcedure";
 import { updateStoredProcedure } from "../../Common/dataAccess/updateStoredProcedure";
 import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import StoredProcedure from "../Tree/StoredProcedure";
 import ScriptTabBase from "./ScriptTabBase";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import template from "./StoredProcedureTab.html";
 
 enum ToggleState {
@@ -208,7 +208,7 @@ export default class StoredProcedureTab extends ScriptTabBase {
       iconSrc: ExecuteQueryIcon,
       iconAlt: label,
       onCommandClick: () => {
-        this.collection && this.collection.container.openExecuteSprocParamsPanel();
+        this.collection && this.collection.container.executeSprocParamsPane.open();
       },
       commandButtonLabel: label,
       ariaLabel: label,

src/Explorer/Tree/Database.ts

@@ -142,6 +142,10 @@ export default class Database implements ViewModels.Database {
     );
   }
 
+  public onDeleteDatabaseContextMenuClick(source: ViewModels.Database, event: MouseEvent | KeyboardEvent) {
+    this.container.deleteDatabaseConfirmationPane.open();
+  }
+
   public selectDatabase() {
     this.container.selectedNode(this);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {

src/Explorer/Tree/ResourceTreeAdapter.test.ts

@@ -1,8 +1,8 @@
-import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
 import Explorer from "../Explorer";
-import TabsBase from "../Tabs/TabsBase";
+import * as ko from "knockout";
 import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
+import * as ViewModels from "../../Contracts/ViewModels";
+import TabsBase from "../Tabs/TabsBase";
 
 describe("ResourceTreeAdapter", () => {
   const mockContainer = (): Explorer =>
@@ -18,7 +18,7 @@ describe("ResourceTreeAdapter", () => {
         } as TabsBase),
       },
       isNotebookEnabled: ko.observable<boolean>(true),
-      databases: ko.observable<ViewModels.Database[]>([]),
+      nonSystemDatabases: ko.observable<ViewModels.Database[]>([]),
     } as unknown) as Explorer);
 
   // TODO isDataNodeSelected needs a better design and refactor, but for now, we protect some of the code paths

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -1,38 +1,39 @@
 import * as ko from "knockout";
-import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "office-ui-fabric-react";
 import * as React from "react";
-import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
-import DeleteIcon from "../../../images/delete.svg";
-import GalleryIcon from "../../../images/GalleryIcon.svg";
-import FileIcon from "../../../images/notebook/file-cosmos.svg";
-import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
-import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import PublishIcon from "../../../images/notebook/publish_content.svg";
-import RefreshIcon from "../../../images/refresh-cosmos.svg";
-import CollectionIcon from "../../../images/tree-collection.svg";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { ArrayHashMap } from "../../Common/ArrayHashMap";
-import { Areas } from "../../Common/Constants";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { IPinnedRepo } from "../../Juno/JunoClient";
-import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
-import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import { ResourceTreeContextMenuButtonFactory } from "../ContextMenuButtonFactory";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
-import Explorer from "../Explorer";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import { TreeComponent, TreeNode, TreeNodeMenuItem, TreeNodeComponent } from "../Controls/TreeComponent/TreeComponent";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
+import { ResourceTreeContextMenuButtonFactory } from "../ContextMenuButtonFactory";
+import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
+import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
+import CollectionIcon from "../../../images/tree-collection.svg";
+import DeleteIcon from "../../../images/delete.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import RefreshIcon from "../../../images/refresh-cosmos.svg";
+import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
+import FileIcon from "../../../images/notebook/file-cosmos.svg";
+import PublishIcon from "../../../images/notebook/publish_content.svg";
+import { ArrayHashMap } from "../../Common/ArrayHashMap";
 import { NotebookUtil } from "../Notebook/NotebookUtil";
-import TabsBase from "../Tabs/TabsBase";
+import _ from "underscore";
+import { IPinnedRepo } from "../../Juno/JunoClient";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
+import { Areas } from "../../Common/Constants";
+import * as GitHubUtils from "../../Utils/GitHubUtils";
+import GalleryIcon from "../../../images/GalleryIcon.svg";
+import { Callout, Text, Link, DirectionalHint, Stack, ICalloutProps, ILinkProps } from "office-ui-fabric-react";
+import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
+import Explorer from "../Explorer";
+import UserDefinedFunction from "./UserDefinedFunction";
 import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
-import UserDefinedFunction from "./UserDefinedFunction";
+import TabsBase from "../Tabs/TabsBase";
+import { userContext } from "../../UserContext";
+import * as DataModels from "../../Contracts/DataModels";
 
 export class ResourceTreeAdapter implements ReactAdapter {
   public static readonly MyNotebooksTitle = "My Notebooks";
@@ -63,7 +64,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
     this.koSubsCollectionIdMap = new ArrayHashMap();
     this.databaseCollectionIdMap = new ArrayHashMap();
 
-    this.container.databases.subscribe((databases: ViewModels.Database[]) => {
+    this.container.nonSystemDatabases.subscribe((databases: ViewModels.Database[]) => {
       // Clean up old databases
       this.cleanupDatabasesKoSubs();
 
@@ -71,7 +72,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       this.triggerRender();
     });
 
-    this.container.databases().forEach((database: ViewModels.Database) => this.watchDatabase(database));
+    this.container.nonSystemDatabases().forEach((database: ViewModels.Database) => this.watchDatabase(database));
     this.triggerRender();
   }
 
@@ -189,7 +190,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
   }
 
   private buildDataTree(): TreeNode {
-    const databaseTreeNodes: TreeNode[] = this.container.databases().map((database: ViewModels.Database) => {
+    const databaseTreeNodes: TreeNode[] = this.container.nonSystemDatabases().map((database: ViewModels.Database) => {
       const databaseNode: TreeNode = {
         label: database.id(),
         iconSrc: CosmosDBIcon,
@@ -765,7 +766,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       {
         label: "Upload File",
         iconSrc: NewNotebookIcon,
-        onClick: () => this.container.openUploadFilePanel(item),
+        onClick: () => this.container.onUploadToNotebookServerClicked(item),
       },
     ];
 

src/Localization/en/Common.json

@@ -1,5 +0,0 @@
-{
-    "Save": "Save",
-    "Discard": "Discard",
-    "Refresh": "Refesh"
-}

src/Localization/en/SelfServeExample.json

@@ -1,31 +0,0 @@
-{
-    "NorthCentralUS": "North Central US",
-    "WestUS": "West US",
-    "EastUS2": "East US 2",
-    "Current Region": "Current Region",
-    "RegionDropdownInfo": "More regions can be added in the future.",
-    "RegionsAndAccountNameValidationError": "Regions and account name should not be empty.",
-    "DbThroughputValidationError": "Please update throughput for database.",
-    "DescriptionLabel": "Description",
-    "DescriptionText": "This class sets collection and database throughput.",
-    "DecriptionLinkText": "Click here for more information",
-    "Regions": "Regions",
-    "RegionsPlaceholder": "Select a region",
-    "Enable Logging": "Enable Logging",
-    "Enable": "Enable",
-    "Disable": "Disable",
-    "Account Name": "Account Name",
-    "AccountNamePlaceHolder": "Enter the account name",
-    "Collection Throughput": "Collection Throughput",
-    "Enable DB level throughput": "Enable Database Level Throughput",
-    "Database Throughput": "Database Throughput",
-    "UpdateInProgressMessage": "Data is being updated",
-    "UpdateCompletedMessageTitle": "Update succeeded",
-    "UpdateCompletedMessageText": "Data update completed.",
-    "SubmissionMessageSuccessTitle": "Update started",
-    "SubmissionMessageForNewRegionText": "Data update started. Region changed.",
-    "SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
-    "SubmissionMessageErrorTitle": "Data update failed",
-    "SubmissionMessageErrorText": "Data update failed because of errors.",
-    "OnSaveFailureMessage": "Data save operation not currently permitted."
-}

src/Localization/en/SqlX.json

@@ -1,52 +0,0 @@
-{
-    "DedicatedGatewayDescription": "Provision a dedicated gateway cluster for your Azure Cosmos DB account. A dedicated gateway is compute that is a front-end to data in your Azure Cosmos DB account. Your dedicated gateway automatically includes the integrated cache, which can improve read performance.",
-    "DedicatedGateway": "Dedicated Gateway",
-    "Enable": "Enable",
-    "Disable": "Disable",
-    "LearnAboutDedicatedGateway": "Learn more about dedicated gateway.",
-    "DeprovisioningDetailsText": "Learn more about deprovisioning the dedicated gateway.",
-    "DedicatedGatewayPricing": "Learn more about dedicated gateway pricing.",
-    "SKUs": "SKUs",
-    "SKUsPlaceHolder": "Select SKUs",
-    "NumberOfInstances": "Number of instances",
-    "CosmosD4s": "Cosmos.D4s (General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory)",
-    "CosmosD8s": "Cosmos.D8s (General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory)",
-    "CosmosD16s": "Cosmos.D16s (General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory)",
-    "CosmosD32s": "Cosmos.D32s (General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory)",
-    "CreateMessage": "Dedicated gateway resource is being created.",
-    "CreateInitializeTitle": "Provisioning resource",
-    "CreateInitializeMessage": "Dedicated gateway resource will be provisioned.",
-    "CreateSuccessTitle": "Resource provisioned",
-    "CreateSuccesseMessage": "Dedicated gateway resource provisioned.",
-    "CreateFailureTitle": "Failed to provision resource",
-    "CreateFailureMessage": "Dedicated gateway resource provisioning failed.",
-    "UpdateMessage": "Dedicated gateway resource is being updated.",
-    "UpdateInitializeTitle": "Updating resource",
-    "UpdateInitializeMessage": "Dedicated gateway resource will be updated.",
-    "UpdateSuccessTitle": "Resource updated",
-    "UpdateSuccesseMessage": "Dedicated gateway resource updated.",
-    "UpdateFailureTitle": "Failed to update resource",
-    "UpdateFailureMessage": "Dedicated gateway resource updation failed.",
-    "DeleteMessage": "Dedicated gateway resource is being deleted.",
-    "DeleteInitializeTitle": "Deleting resource",
-    "DeleteInitializeMessage": "Dedicated gateway resource will be deleted.",
-    "DeleteSuccessTitle": "Resource deleted",
-    "DeleteSuccesseMessage": "Dedicated gateway resource deleted.",
-    "DeleteFailureTitle": "Failed to delete resource",
-    "DeleteFailureMessage": "Dedicated gateway resource deletion failed.",
-    "CannotSave": "Cannot save the changes to the Dedicated gateway resource at the moment.",
-    "DedicatedGatewayEndpoint": "Dedicated gatewayEndpoint",
-    "NoValue": "",
-    "SKUDetails": "SKU Details:",
-    "CosmosD4Details": "General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory",
-    "CosmosD8Details": "General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory",
-    "CosmosD16Details": "General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory",
-    "CosmosD32Details": "General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory",
-    "Cost": "Cost",
-    "CostText": "Hourly cost of the dedicated gateway resource depends on the SKU selection, number of instances per region, and number of regions.",
-    "ConnectionString": "Connection String",
-    "ConnectionStringText": "To use the dedicated gateway, use the connection string shown in ",
-    "KeysBlade": "the keys blade",
-    "WarningBannerOnUpdate": "Adding or modifying dedicated gateway instances may affect your bill.",
-    "WarningBannerOnDelete": "After deprovisioning the dedicated gateway, you must update any applications using the old dedicated gateway connection string."
-}

src/Localization/en/translations.json

@@ -0,0 +1,92 @@
+{
+    "translations": {
+        "Common": {
+            "Save": "Save",
+            "Discard": "Discard",
+            "Refresh": "Refesh"
+        },
+        "SelfServeExample": {
+            "North Central US": "North Central US",
+            "West US": "West US",
+            "East US 2": "East US 2",
+            "Current Region": "Current Region",
+            "RegionDropdownInfo": "More regions can be added in the future.",
+            "RegionsAndAccountNameValidationError": "Regions and account name should not be empty.",
+            "DbThroughputValidationError": "Please update throughput for database.",
+            "DescriptionLabel": "Description",
+            "DescriptionText": "This class sets collection and database throughput.",
+            "DecriptionLinkText": "Click here for more information",
+            "Regions": "Regions",
+            "RegionsPlaceholder": "Select a region",
+            "Enable Logging": "Enable Logging",
+            "Enable": "Enable",
+            "Disable": "Disable",
+            "Account Name": "Account Name",
+            "AccountNamePlaceHolder": "Enter the account name",
+            "Collection Throughput": "Collection Throughput",
+            "Enable DB level throughput": "Enable Database Level Throughput",
+            "Database Throughput": "Database Throughput",
+            "UpdateInProgressMessage": "Data is being updated",
+            "UpdateCompletedMessageTitle": "Update succeeded",
+            "UpdateCompletedMessageText": "Data update completed.",
+            "SubmissionMessageSuccessTitle": "Update started",
+            "SubmissionMessageForNewRegionText": "Data update started. Region changed.",
+            "SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
+            "SubmissionMessageErrorTitle": "Data update failed",
+            "SubmissionMessageErrorText": "Data update failed because of errors.",
+            "OnSaveFailureMessage": "Data save operation not currently permitted."
+        },
+        "SqlX": {
+            "DedicatedGatewayDescription": "Provision a dedicated gateway cluster for your Azure Cosmos DB account. A dedicated gateway is compute that is a front-end to data in your Azure Cosmos DB account. Your dedicated gateway automatically includes the integrated cache, which can improve read performance. ",
+            "DedicatedGateway": "Dedicated Gateway",
+            "Enable": "Enable",
+            "Disable": "Disable",
+            "LearnAboutDedicatedGateway": "Learn more about dedicated gateway.",
+            "DeprovisioningDetailsText": "Learn more about deprovisioning the dedicated gateway.",
+            "DedicatedGatewayPricing": "Learn more about dedicated gateway pricing",
+            "SKUs": "SKUs",
+            "SKUsPlaceHolder": "Select SKUs",
+            "NumberOfInstances": "Number of instances",
+            "CosmosD4s": "Cosmos.D4s (General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory)",
+            "CosmosD8s": "Cosmos.D8s (General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory)",
+            "CosmosD16s": "Cosmos.D16s (General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory)",
+            "CosmosD32s": "Cosmos.D32s (General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory)",
+            "CreateMessage": "Dedicated gateway resource is being created.",
+            "CreateInitializeTitle": "Provisioning resource",
+            "CreateInitializeMessage": "Dedicated gateway resource will be provisioned.",
+            "CreateSuccessTitle": "Resource provisioned",
+            "CreateSuccesseMessage": "Dedicated gateway resource provisioned.",
+            "CreateFailureTitle": "Failed to provision resource",
+            "CreateFailureMessage": "Dedicated gateway resource provisioning failed.",
+            "UpdateMessage": "Dedicated gateway resource is being updated.",
+            "UpdateInitializeTitle": "Updating resource",
+            "UpdateInitializeMessage": "Dedicated gateway resource will be updated.",
+            "UpdateSuccessTitle": "Resource updated",
+            "UpdateSuccesseMessage": "Dedicated gateway resource updated.",
+            "UpdateFailureTitle": "Failed to update resource",
+            "UpdateFailureMessage": "Dedicated gateway resource updation failed.",
+            "DeleteMessage": "Dedicated gateway resource is being deleted.",
+            "DeleteInitializeTitle": "Deleting resource",
+            "DeleteInitializeMessage": "Dedicated gateway resource will be deleted.",
+            "DeleteSuccessTitle": "Resource deleted",
+            "DeleteSuccesseMessage": "Dedicated gateway resource deleted.",
+            "DeleteFailureTitle": "Failed to delete resource",
+            "DeleteFailureMessage": "Dedicated gateway resource deletion failed.",
+            "CannotSave": "Cannot save the changes to the Dedicated gateway resource at the moment",
+            "DedicatedGatewayEndpoint": "Dedicated gatewayEndpoint",
+            "NoValue": "",
+            "SKUDetails": "SKU Details: ",
+            "CosmosD4Details": "General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory",
+            "CosmosD8Details": "General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory",
+            "CosmosD16Details": "General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory",
+            "CosmosD32Details": "General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory",
+            "Cost": "Cost",
+            "CostText": "Hourly cost of the dedicated gateway resource depends on the SKU selection, number of instances per region, and number of regions.",
+            "ConnectionString": "Connection String",
+            "ConnectionStringText": "To use the dedicated gateway, use the connection string shown in ",
+            "KeysBlade": "the keys blade",
+            "WarningBannerOnUpdate": "Adding or modifying dedicated gateway instances may affect your bill.",
+            "WarningBannerOnDelete": "After deprovisioning the dedicated gateway, you must update any applications using the old dedicated gateway connection string."
+        }
+    }
+}

src/Main.tsx

@@ -229,9 +229,11 @@ const App: React.FunctionComponent = () => {
         closePanel={closeSidePanel}
         isConsoleExpanded={isNotificationConsoleExpanded}
       />
+      <div data-bind="react:uploadItemsPaneAdapter" />
       <div data-bind='component: { name: "add-database-pane", params: {data: addDatabasePane} }' />
       <div data-bind='component: { name: "add-collection-pane", params: { data: addCollectionPane} }' />
       <div data-bind='component: { name: "delete-collection-confirmation-pane", params: { data: deleteCollectionConfirmationPane} }' />
+      <div data-bind='component: { name: "delete-database-confirmation-pane", params: { data: deleteDatabaseConfirmationPane} }' />
       <div data-bind='component: { name: "graph-new-vertex-pane", params: { data: newVertexPane} }' />
       <div data-bind='component: { name: "graph-styling-pane", params: { data: graphStylingPane} }' />
       <div data-bind='component: { name: "table-add-entity-pane", params: { data: addTableEntityPane} }' />
@@ -239,9 +241,13 @@ const App: React.FunctionComponent = () => {
       <div data-bind='component: { name: "table-column-options-pane", params: { data: tableColumnOptionsPane} }' />
       <div data-bind='component: { name: "table-query-select-pane", params: { data: querySelectPane} }' />
       <div data-bind='component: { name: "cassandra-add-collection-pane", params: { data: cassandraAddCollectionPane} }' />
+      <div data-bind='component: { name: "settings-pane", params: { data: settingsPane} }' />
+      <div data-bind='component: { name: "upload-items-pane", params: { data: uploadItemsPane} }' />
       <div data-bind='component: { name: "load-query-pane", params: { data: loadQueryPane} }' />
+      <div data-bind='component: { name: "execute-sproc-params-pane", params: { data: executeSprocParamsPane} }' />
       <div data-bind='component: { name: "save-query-pane", params: { data: saveQueryPane} }' />
       <div data-bind='component: { name: "browse-queries-pane", params: { data: browseQueriesPane} }' />
+      <div data-bind='component: { name: "upload-file-pane", params: { data: uploadFilePane} }' />
       <div data-bind='component: { name: "string-input-pane", params: { data: stringInputPane} }' />
       <div data-bind='component: { name: "setup-notebooks-pane", params: { data: setupNotebooksPane} }' />
       <KOCommentIfStart if="isGitHubPaneEnabled" />

src/NotebookViewer/NotebookViewer.tsx

@@ -10,7 +10,7 @@ import {
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import * as GalleryUtils from "../Utils/GalleryUtils";
 import { GalleryHeaderComponent } from "../Explorer/Controls/Header/GalleryHeaderComponent";
-import * as FileSystemUtil from "../Explorer/Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../Explorer/Notebook/FileSystemUtil";
 import { GalleryTab } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 
 const onInit = async () => {

src/Platform/Hosted/extractFeatures.ts

@@ -23,18 +23,11 @@ export type Features = {
   readonly ttl90Days: boolean;
 };
 
-export function extractFeatures(given = new URLSearchParams()): Features {
+export function extractFeatures(params?: URLSearchParams): Features {
+  params = params || new URLSearchParams(window.location.search);
   const downcased = new URLSearchParams();
-  const set = (value: string, key: string) => downcased.set(key.toLowerCase(), value);
-  const get = (key: string) => downcased.get("feature." + key) ?? undefined;
-
-  try {
-    new URLSearchParams(window.parent.location.search).forEach(set);
-  } catch {
-    //
-  } finally {
-    given.forEach(set);
-  }
+  params.forEach((value, key) => downcased.append(key.toLocaleLowerCase(), value));
+  const get = (key: string) => downcased.get("feature." + key.toLocaleLowerCase()) ?? undefined;
 
   return {
     canExceedMaximumValue: "true" === get("canexceedmaximumvalue"),

src/SelfServe/Example/SelfServeExample.tsx

@@ -23,9 +23,9 @@ import {
 } from "./SelfServeExample.rp";
 
 const regionDropdownItems: ChoiceItem[] = [
-  { labelTKey: "NorthCentralUS", key: Regions.NorthCentralUS },
-  { labelTKey: "WestUS", key: Regions.WestUS },
-  { labelTKey: "EastUS2", key: Regions.EastUS2 },
+  { label: "North Central US", key: Regions.NorthCentralUS },
+  { label: "West US", key: Regions.WestUS },
+  { label: "East US 2", key: Regions.EastUS2 },
 ];
 
 const regionDropdownInfo: Info = {

src/SelfServe/SelfServe.tsx

@@ -2,12 +2,10 @@ import { Spinner, SpinnerSize } from "office-ui-fabric-react";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import { withTranslation } from "react-i18next";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
 import { sendReadyMessage } from "../Common/MessageHandler";
 import { configContext, updateConfigContext } from "../ConfigContext";
 import { SelfServeFrameInputs } from "../Contracts/ViewModels";
-import i18n from "../i18n";
 import { updateUserContext } from "../UserContext";
 import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
 import "./SelfServe.less";
@@ -16,35 +14,14 @@ import { SelfServeDescriptor } from "./SelfServeTypes";
 import { SelfServeType } from "./SelfServeUtils";
 initializeIcons();
 
-const loadTranslationFile = async (className: string): Promise<void> => {
-  const language = i18n.languages[0];
-  const fileName = `${className}.json`;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let translations: any;
-  try {
-    translations = await import(`../Localization/${language}/${fileName}`);
-  } catch (e) {
-    translations = await import(`../Localization/en/${fileName}`);
-  }
-  i18n.addResourceBundle(language, className, translations.default, true);
-};
-
-const loadTranslations = async (className: string): Promise<void> => {
-  await loadTranslationFile("Common");
-  await loadTranslationFile(className);
-};
-
 const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
   switch (selfServeType) {
     case SelfServeType.example: {
       const SelfServeExample = await import(/* webpackChunkName: "SelfServeExample" */ "./Example/SelfServeExample");
-      await loadTranslations(SelfServeExample.default.name);
       return new SelfServeExample.default().toSelfServeDescriptor();
     }
     case SelfServeType.sqlx: {
       const SqlX = await import(/* webpackChunkName: "SqlX" */ "./SqlX/SqlX");
-      await loadTranslations(SqlX.default.name);
       return new SqlX.default().toSelfServeDescriptor();
     }
     default:
@@ -56,8 +33,7 @@ const renderComponent = (selfServeDescriptor: SelfServeDescriptor): JSX.Element
   if (!selfServeDescriptor) {
     return <h1>Invalid self serve type!</h1>;
   }
-  const SelfServeComponentTranslated = withTranslation()(SelfServeComponent);
-  return <SelfServeComponentTranslated descriptor={selfServeDescriptor} />;
+  return <SelfServeComponent descriptor={selfServeDescriptor} />;
 };
 
 const renderSpinner = (): JSX.Element => {

src/SelfServe/SelfServeComponent.test.tsx

@@ -1,5 +1,5 @@
-import { shallow } from "enzyme";
 import React from "react";
+import { shallow } from "enzyme";
 import { SelfServeComponent, SelfServeComponentState } from "./SelfServeComponent";
 import { NumberUiType, OnSaveResult, SelfServeDescriptor, SmartUiInput } from "./SelfServeTypes";
 
@@ -87,9 +87,9 @@ describe("SelfServeComponent", () => {
             dataFieldName: "database",
             type: "object",
             choices: [
-              { labelTKey: "Database 1", key: "db1" },
-              { labelTKey: "Database 2", key: "db2" },
-              { labelTKey: "Database 3", key: "db3" },
+              { label: "Database 1", key: "db1" },
+              { label: "Database 2", key: "db2" },
+              { label: "Database 3", key: "db3" },
             ],
             defaultKey: "db2",
           },
@@ -106,9 +106,7 @@ describe("SelfServeComponent", () => {
   };
 
   it("should render and honor save, discard, refresh actions", async () => {
-    const wrapper = shallow(
-      <SelfServeComponent descriptor={exampleData} t={undefined} i18n={undefined} tReady={undefined} />
-    );
+    const wrapper = shallow(<SelfServeComponent descriptor={exampleData} />);
     await new Promise((resolve) => setTimeout(resolve, 0));
     expect(wrapper).toMatchSnapshot();
 
@@ -160,9 +158,7 @@ describe("SelfServeComponent", () => {
   });
 
   it("getResolvedValue", async () => {
-    const wrapper = shallow(
-      <SelfServeComponent descriptor={exampleData} t={undefined} i18n={undefined} tReady={undefined} />
-    );
+    const wrapper = shallow(<SelfServeComponent descriptor={exampleData} />);
     await new Promise((resolve) => setTimeout(resolve, 0));
     const selfServeComponent = wrapper.instance() as SelfServeComponent;
 
@@ -183,9 +179,7 @@ describe("SelfServeComponent", () => {
 
   it("message bar and spinner snapshots", async () => {
     const newDescriptor = { ...exampleData, onRefresh: onRefreshIsUpdatingMock };
-    let wrapper = shallow(
-      <SelfServeComponent descriptor={newDescriptor} t={undefined} i18n={undefined} tReady={undefined} />
-    );
+    let wrapper = shallow(<SelfServeComponent descriptor={newDescriptor} />);
     await new Promise((resolve) => setTimeout(resolve, 0));
     let selfServeComponent = wrapper.instance() as SelfServeComponent;
     selfServeComponent.onSaveButtonClick();
@@ -193,9 +187,7 @@ describe("SelfServeComponent", () => {
     expect(wrapper).toMatchSnapshot();
 
     newDescriptor.onRefresh = onRefreshMock;
-    wrapper = shallow(
-      <SelfServeComponent descriptor={newDescriptor} t={undefined} i18n={undefined} tReady={undefined} />
-    );
+    wrapper = shallow(<SelfServeComponent descriptor={newDescriptor} />);
     await new Promise((resolve) => setTimeout(resolve, 0));
     selfServeComponent = wrapper.instance() as SelfServeComponent;
     selfServeComponent.onSaveButtonClick();

src/SelfServe/SelfServeComponent.tsx

@@ -8,15 +8,15 @@ import {
   Spinner,
   SpinnerSize,
   Stack,
-  Text,
 } from "office-ui-fabric-react";
 import promiseRetry, { AbortError } from "p-retry";
 import React from "react";
-import { WithTranslation } from "react-i18next";
+import { Translation } from "react-i18next";
 import * as _ from "underscore";
 import { sendMessage } from "../Common/MessageHandler";
 import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
 import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import "../i18n";
 import { commandBarItemStyles, commandBarStyles, containerStackTokens, separatorStyles } from "./SelfServeStyles";
 import {
   AnyDisplay,
@@ -57,7 +57,7 @@ interface PortalNotificationContent {
   };
 }
 
-export interface SelfServeComponentProps extends WithTranslation {
+export interface SelfServeComponentProps {
   descriptor: SelfServeDescriptor;
 }
 
@@ -108,9 +108,6 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
       this.retryIntervalInMs = SelfServeComponent.defaultRetryIntervalInMs;
     }
     this.retryOptions = { forever: true, maxTimeout: this.retryIntervalInMs, minTimeout: this.retryIntervalInMs };
-
-    // translation function passed to SelfServeComponent
-    this.translationFunction = this.props.t;
   }
 
   private onError = (hasErrors: boolean): void => {
@@ -394,8 +391,8 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
     return this.getTranslation(key, "Common");
   };
 
-  private getTranslation = (messageKey: string, namespace = `${this.smartUiGeneratorClassName}`): string => {
-    const translationKey = `${namespace}:${messageKey}`;
+  private getTranslation = (messageKey: string, prefix = `${this.smartUiGeneratorClassName}`): string => {
+    const translationKey = `${prefix}.${messageKey}`;
     const translation = this.translationFunction ? this.translationFunction(translationKey) : messageKey;
     if (translation === translationKey) {
       return messageKey;
@@ -444,45 +441,53 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
 
   public render(): JSX.Element {
     if (this.state.compileErrorMessage) {
-      return (
-        <MessageBar messageBarType={MessageBarType.error}>
-          <Text>{this.state.compileErrorMessage}</Text>
-        </MessageBar>
-      );
+      return <MessageBar messageBarType={MessageBarType.error}>{this.state.compileErrorMessage}</MessageBar>;
     }
     return (
-      <div style={{ overflowX: "auto" }}>
-        <Stack tokens={containerStackTokens}>
-          <Stack.Item>
-            <CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
-            <Separator styles={separatorStyles} />
-          </Stack.Item>
-          {this.state.isInitializing ? (
-            <Spinner size={SpinnerSize.large} />
-          ) : (
-            <>
-              {this.state.notification && (
-                <MessageBar
-                  messageBarType={this.state.notification.type}
-                  onDismiss={
-                    this.state.notification.isCancellable ? () => this.setState({ notification: undefined }) : undefined
-                  }
-                >
-                  <Text>{this.state.notification.message}</Text>
-                </MessageBar>
-              )}
-              <SmartUiComponent
-                disabled={this.state.refreshResult?.isUpdateInProgress || this.state.isSaving}
-                descriptor={this.state.root as SmartUiDescriptor}
-                currentValues={this.state.currentValues}
-                onInputChange={this.onInputChange}
-                onError={this.onError}
-                getTranslation={this.getTranslation}
-              />
-            </>
-          )}
-        </Stack>
-      </div>
+      <Translation>
+        {(translate) => {
+          if (!this.translationFunction) {
+            this.translationFunction = translate;
+          }
+
+          return (
+            <div style={{ overflowX: "auto" }}>
+              <Stack tokens={containerStackTokens}>
+                <Stack.Item>
+                  <CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
+                  <Separator styles={separatorStyles} />
+                </Stack.Item>
+                {this.state.isInitializing ? (
+                  <Spinner size={SpinnerSize.large} />
+                ) : (
+                  <>
+                    {this.state.notification && (
+                      <MessageBar
+                        messageBarType={this.state.notification.type}
+                        onDismiss={
+                          this.state.notification.isCancellable
+                            ? () => this.setState({ notification: undefined })
+                            : undefined
+                        }
+                      >
+                        {this.state.notification.message}
+                      </MessageBar>
+                    )}
+                    <SmartUiComponent
+                      disabled={this.state.refreshResult?.isUpdateInProgress || this.state.isSaving}
+                      descriptor={this.state.root as SmartUiDescriptor}
+                      currentValues={this.state.currentValues}
+                      onInputChange={this.onInputChange}
+                      onError={this.onError}
+                      getTranslation={this.getTranslation}
+                    />
+                  </>
+                )}
+              </Stack>
+            </div>
+          );
+        }}
+      </Translation>
     );
   }
 }

src/SelfServe/SelfServeTelemetryProcessor.ts

@@ -1,69 +0,0 @@
-import { sendMessage } from "../Common/MessageHandler";
-import { configContext } from "../ConfigContext";
-import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
-import { appInsights } from "../Shared/appInsights";
-import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
-import { userContext } from "../UserContext";
-import { SelfServeTelemetryMessage } from "./SelfServeTypes";
-
-const action = Action.SelfServe;
-
-export const trace = (data: SelfServeTelemetryMessage): void => {
-  sendSelfServeTelemetryMessage(ActionModifiers.Mark, data);
-  appInsights.trackEvent({ name: Action[action] }, decorateData(data, ActionModifiers.Mark));
-};
-
-export const traceStart = (data: SelfServeTelemetryMessage): number => {
-  const timestamp: number = Date.now();
-  sendSelfServeTelemetryMessage(ActionModifiers.Start, data);
-  appInsights.startTrackEvent(Action[action]);
-  return timestamp;
-};
-
-export const traceSuccess = (data: SelfServeTelemetryMessage, timestamp?: number): void => {
-  sendSelfServeTelemetryMessage(ActionModifiers.Success, data, timestamp || Date.now());
-  appInsights.stopTrackEvent(Action[action], decorateData(data, ActionModifiers.Success));
-};
-
-export const traceFailure = (data: SelfServeTelemetryMessage, timestamp?: number): void => {
-  sendSelfServeTelemetryMessage(ActionModifiers.Failed, data, timestamp || Date.now());
-  appInsights.stopTrackEvent(Action[action], decorateData(data, ActionModifiers.Failed));
-};
-
-export const traceCancel = (data: SelfServeTelemetryMessage, timestamp?: number): void => {
-  sendSelfServeTelemetryMessage(ActionModifiers.Cancel, data, timestamp || Date.now());
-  appInsights.stopTrackEvent(Action[action], decorateData(data, ActionModifiers.Cancel));
-};
-
-const sendSelfServeTelemetryMessage = (
-  actionModifier: string,
-  data: SelfServeTelemetryMessage,
-  timeStamp?: number
-): void => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const dataToSend: any = {
-    type: SelfServeMessageTypes.TelemetryInfo,
-    data: {
-      action: Action[action],
-      actionModifier: actionModifier,
-      data: JSON.stringify(decorateData(data)),
-    },
-  };
-  if (timeStamp) {
-    dataToSend.data.timeStamp = timeStamp;
-  }
-  sendMessage(dataToSend);
-};
-
-const decorateData = (data: SelfServeTelemetryMessage, actionModifier?: string) => {
-  return {
-    databaseAccountName: userContext.databaseAccount?.name,
-    defaultExperience: userContext.defaultExperience,
-    authType: userContext.authType,
-    subscriptionId: userContext.subscriptionId,
-    platform: configContext.platform,
-    env: process.env.NODE_ENV,
-    actionModifier,
-    ...data,
-  } as { [key: string]: string };
-};

src/SelfServe/SelfServeTypes.ts

@@ -98,7 +98,7 @@ export enum NumberUiType {
   Slider = "Slider",
 }
 
-export type ChoiceItem = { labelTKey: string; key: string };
+export type ChoiceItem = { label: string; key: string };
 
 export type InputType = number | string | boolean | ChoiceItem | Description;
 
@@ -157,9 +157,3 @@ export interface RefreshResult {
 export interface RefreshParams {
   retryIntervalInMs: number;
 }
-
-export interface SelfServeTelemetryMessage {
-  selfServeClassName: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  data?: any;
-}

src/SelfServe/SelfServeUtils.test.tsx

@@ -131,9 +131,9 @@ describe("SelfServeUtils", () => {
           type: "object",
           labelTKey: "Regions",
           choices: [
-            { labelTKey: "South West US", key: "SWUS" },
-            { labelTKey: "North Central US", key: "NCUS" },
-            { labelTKey: "East US 2", key: "EUS2" },
+            { label: "South West US", key: "SWUS" },
+            { label: "North Central US", key: "NCUS" },
+            { label: "East US 2", key: "EUS2" },
           ],
         },
       ],
@@ -238,9 +238,9 @@ describe("SelfServeUtils", () => {
               type: "object",
               labelTKey: "Regions",
               choices: [
-                { labelTKey: "South West US", key: "SWUS" },
-                { labelTKey: "North Central US", key: "NCUS" },
-                { labelTKey: "East US 2", key: "EUS2" },
+                { label: "South West US", key: "SWUS" },
+                { label: "North Central US", key: "NCUS" },
+                { label: "East US 2", key: "EUS2" },
               ],
             },
             children: [] as Node[],

src/SelfServe/SelfServeUtils.tsx

@@ -195,5 +195,5 @@ export const generateBladeLink = (blade: BladeType): string => {
   const subscriptionId = userContext.subscriptionId;
   const resourceGroupName = userContext.resourceGroup;
   const databaseAccountName = userContext.databaseAccount.name;
-  return `${document.referrer}#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
+  return `https://portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
 };

src/SelfServe/SqlX/SqlX.tsx

@@ -1,5 +1,4 @@
 import { IsDisplayable, OnChange, RefreshOptions, Values } from "../Decorators";
-import { trace } from "../SelfServeTelemetryProcessor";
 import {
   ChoiceItem,
   Description,
@@ -148,10 +147,10 @@ const onEnableDedicatedGatewayChange = (
 };
 
 const skuDropDownItems: ChoiceItem[] = [
-  { labelTKey: "CosmosD4s", key: CosmosD4s },
-  { labelTKey: "CosmosD8s", key: CosmosD8s },
-  { labelTKey: "CosmosD16s", key: CosmosD16s },
-  { labelTKey: "CosmosD32s", key: CosmosD32s },
+  { label: "CosmosD4s", key: CosmosD4s },
+  { label: "CosmosD8s", key: CosmosD8s },
+  { label: "CosmosD16s", key: CosmosD16s },
+  { label: "CosmosD32s", key: CosmosD32s },
 ];
 
 const getSkus = async (): Promise<ChoiceItem[]> => {
@@ -177,8 +176,6 @@ export default class SqlX extends SelfServeBaseClass {
     currentValues: Map<string, SmartUiInput>,
     baselineValues: Map<string, SmartUiInput>
   ): Promise<OnSaveResult> => {
-    trace({ selfServeClassName: "SqlX" });
-
     const dedicatedGatewayCurrentlyEnabled = currentValues.get("enableDedicatedGateway")?.value as boolean;
     const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
 

src/Shared/Telemetry/TelemetryConstants.ts

@@ -114,7 +114,6 @@ export enum Action {
   NotebooksGalleryPublicGalleryCount,
   NotebooksGalleryFavoritesCount,
   NotebooksGalleryPublishedCount,
-  SelfServe,
 }
 
 export const ActionModifiers = {

src/Shared/Telemetry/TelemetryProcessor.ts

@@ -1,11 +1,58 @@
-import { sendMessage } from "../../Common/MessageHandler";
-import { configContext } from "../../ConfigContext";
+import { Action, ActionModifiers } from "./TelemetryConstants";
+import { sendMessage } from "../../Common/MessageHandler";
 import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { userContext } from "../../UserContext";
 import { appInsights } from "../appInsights";
-import { Action, ActionModifiers } from "./TelemetryConstants";
+import { configContext } from "../../ConfigContext";
+import { userContext } from "../../UserContext";
 
-type TelemetryData = { [key: string]: unknown };
+// TODO: Remove this. It is perfectly find to pass any data to telemtry methods.
+// This was added only to maintain stability while removing dependencies on explorer.databaseAccount and explorer.defaultExperience
+type allowedKeys =
+  | "notebookId"
+  | "collectionId"
+  | "collectionName"
+  | "error"
+  | "isSample"
+  | "downloadCount"
+  | "baseUrl"
+  | "source"
+  | "description"
+  | "dataExplorerArea"
+  | "databaseName"
+  | "downloadCount"
+  | "favoriteCount"
+  | "abuseCategory"
+  | "errorStack"
+  | "tabTitle"
+  | "tabId"
+  | "conflictResourceType"
+  | "conflictOperationType"
+  | "conflictResourceId"
+  | "message"
+  | "files"
+  | "notebooks"
+  | "directories"
+  | "tabName"
+  | "databaseId"
+  | "queryName"
+  | "isPublishPending"
+  | "label"
+  | "scopesSelected"
+  | "title"
+  | "level"
+  | "changedSelectedValueTo"
+  | "area"
+  | "area"
+  | "paneTitle"
+  | "notebookUrl"
+  | "isNotebookEnabled"
+  | "commandButtonClicked"
+  | "count"
+  | "publishedCount"
+  | "underReviewCount"
+  | "removedCount";
+
+type TelemetryData = { [key in allowedKeys]?: unknown };
 
 export function trace(action: Action, actionModifier: string = ActionModifiers.Mark, data: TelemetryData = {}): void {
   sendMessage({

src/Utils/QueryUtils.test.ts

@@ -2,7 +2,7 @@ import * as DataModels from "../Contracts/DataModels";
 import * as Q from "q";
 import * as sinon from "sinon";
 import * as ViewModels from "../Contracts/ViewModels";
-import * as QueryUtils from "./QueryUtils";
+import { QueryUtils } from "./QueryUtils";
 
 describe("Query Utils", () => {
   function generatePartitionKeyForPath(path: string): DataModels.PartitionKey {

src/Utils/QueryUtils.ts

@@ -1,114 +1,118 @@
+import Q from "q";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 
-export function buildDocumentsQuery(
-  filter: string,
-  partitionKeyProperty: string,
-  partitionKey: DataModels.PartitionKey
-): string {
-  let query = partitionKeyProperty
-    ? `select c.id, c._self, c._rid, c._ts, ${buildDocumentsQueryPartitionProjections(
-        "c",
-        partitionKey
-      )} as _partitionKeyValue from c`
-    : `select c.id, c._self, c._rid, c._ts from c`;
+export class QueryUtils {
+  public static buildDocumentsQuery(
+    filter: string,
+    partitionKeyProperty: string,
+    partitionKey: DataModels.PartitionKey
+  ): string {
+    let query: string = partitionKeyProperty
+      ? `select c.id, c._self, c._rid, c._ts, ${QueryUtils.buildDocumentsQueryPartitionProjections(
+          "c",
+          partitionKey
+        )} as _partitionKeyValue from c`
+      : `select c.id, c._self, c._rid, c._ts from c`;
 
-  if (filter) {
-    query += " " + filter;
+    if (filter) {
+      query += " " + filter;
+    }
+
+    return query;
   }
 
-  return query;
-}
+  public static buildDocumentsQueryPartitionProjections(
+    collectionAlias: string,
+    partitionKey: DataModels.PartitionKey
+  ): string {
+    if (!partitionKey) {
+      return "";
+    }
 
-export function buildDocumentsQueryPartitionProjections(
-  collectionAlias: string,
-  partitionKey?: DataModels.PartitionKey
-): string {
-  if (!partitionKey) {
-    return "";
+    // e.g., path /order/id will be projected as c["order"]["id"],
+    // to escape any property names that match a keyword
+    let projections = [];
+    for (let index in partitionKey.paths) {
+      // TODO: Handle "/" in partition key definitions
+      const projectedProperties: string[] = partitionKey.paths[index].split("/").slice(1);
+      let projectedProperty: string = "";
+
+      projectedProperties.forEach((property: string) => {
+        const projection = property.trim();
+        if (projection.length > 0 && projection.charAt(0) != "'" && projection.charAt(0) != '"') {
+          projectedProperty = projectedProperty + `["${projection}"]`;
+        } else if (projection.length > 0 && projection.charAt(0) == "'") {
+          // trim single quotes and escape double quotes
+          const projectionSlice = projection.slice(1, projection.length - 1);
+          projectedProperty =
+            projectedProperty + `["${projectionSlice.replace(/\\"/g, '"').replace(/"/g, '\\\\\\"')}"]`;
+        } else {
+          projectedProperty = projectedProperty + `[${projection}]`;
+        }
+      });
+
+      projections.push(`${collectionAlias}${projectedProperty}`);
+    }
+
+    return projections.join(",");
   }
 
-  // e.g., path /order/id will be projected as c["order"]["id"],
-  // to escape any property names that match a keyword
-  const projections = [];
-  for (const index in partitionKey.paths) {
-    // TODO: Handle "/" in partition key definitions
-    const projectedProperties: string[] = partitionKey.paths[index].split("/").slice(1);
-    let projectedProperty = "";
-
-    projectedProperties.forEach((property: string) => {
-      const projection = property.trim();
-      if (projection.length > 0 && projection.charAt(0) !== "'" && projection.charAt(0) !== '"') {
-        projectedProperty += `["${projection}"]`;
-      } else if (projection.length > 0 && projection.charAt(0) === "'") {
-        // trim single quotes and escape double quotes
-        const projectionSlice = projection.slice(1, projection.length - 1);
-        projectedProperty += `["${projectionSlice.replace(/\\"/g, '"').replace(/"/g, '\\\\\\"')}"]`;
-      } else {
-        projectedProperty += `[${projection}]`;
+  public static async queryPagesUntilContentPresent(
+    firstItemIndex: number,
+    queryItems: (itemIndex: number) => Promise<ViewModels.QueryResults>
+  ): Promise<ViewModels.QueryResults> {
+    let roundTrips: number = 0;
+    let netRequestCharge: number = 0;
+    const doRequest = async (itemIndex: number): Promise<ViewModels.QueryResults> => {
+      const results: ViewModels.QueryResults = await queryItems(itemIndex);
+      roundTrips = roundTrips + 1;
+      results.roundTrips = roundTrips;
+      results.requestCharge = Number(results.requestCharge) + netRequestCharge;
+      netRequestCharge = Number(results.requestCharge);
+      const resultsMetadata: ViewModels.QueryResultsMetadata = {
+        hasMoreResults: results.hasMoreResults,
+        itemCount: results.itemCount,
+        firstItemIndex: results.firstItemIndex,
+        lastItemIndex: results.lastItemIndex,
+      };
+      if (resultsMetadata.itemCount === 0 && resultsMetadata.hasMoreResults) {
+        return await doRequest(resultsMetadata.lastItemIndex);
       }
-    });
+      return results;
+    };
 
-    projections.push(`${collectionAlias}${projectedProperty}`);
+    return await doRequest(firstItemIndex);
   }
 
-  return projections.join(",");
-}
-
-export const queryPagesUntilContentPresent = async (
-  firstItemIndex: number,
-  queryItems: (itemIndex: number) => Promise<ViewModels.QueryResults>
-): Promise<ViewModels.QueryResults> => {
-  let roundTrips = 0;
-  let netRequestCharge = 0;
-  const doRequest = async (itemIndex: number): Promise<ViewModels.QueryResults> => {
-    const results = await queryItems(itemIndex);
-    roundTrips = roundTrips + 1;
-    results.roundTrips = roundTrips;
-    results.requestCharge = Number(results.requestCharge) + netRequestCharge;
-    netRequestCharge = Number(results.requestCharge);
-    const resultsMetadata = {
-      hasMoreResults: results.hasMoreResults,
-      itemCount: results.itemCount,
-      firstItemIndex: results.firstItemIndex,
-      lastItemIndex: results.lastItemIndex,
+  public static async queryAllPages(
+    queryItems: (itemIndex: number) => Promise<ViewModels.QueryResults>
+  ): Promise<ViewModels.QueryResults> {
+    const queryResults: ViewModels.QueryResults = {
+      documents: [],
+      activityId: undefined,
+      hasMoreResults: false,
+      itemCount: 0,
+      firstItemIndex: 0,
+      lastItemIndex: 0,
+      requestCharge: 0,
+      roundTrips: 0,
+    };
+    const doRequest = async (itemIndex: number): Promise<ViewModels.QueryResults> => {
+      const results: ViewModels.QueryResults = await queryItems(itemIndex);
+      const { requestCharge, hasMoreResults, itemCount, lastItemIndex, documents } = results;
+      queryResults.roundTrips = queryResults.roundTrips + 1;
+      queryResults.requestCharge = Number(queryResults.requestCharge) + Number(requestCharge);
+      queryResults.hasMoreResults = hasMoreResults;
+      queryResults.itemCount = queryResults.itemCount + itemCount;
+      queryResults.lastItemIndex = lastItemIndex;
+      queryResults.documents = queryResults.documents.concat(documents);
+      if (queryResults.hasMoreResults) {
+        return doRequest(queryResults.lastItemIndex + 1);
+      }
+      return queryResults;
     };
-    if (resultsMetadata.itemCount === 0 && resultsMetadata.hasMoreResults) {
-      return await doRequest(resultsMetadata.lastItemIndex);
-    }
-    return results;
-  };
 
-  return await doRequest(firstItemIndex);
-};
-
-export const queryAllPages = async (
-  queryItems: (itemIndex: number) => Promise<ViewModels.QueryResults>
-): Promise<ViewModels.QueryResults> => {
-  const queryResults: ViewModels.QueryResults = {
-    documents: [],
-    activityId: undefined,
-    hasMoreResults: false,
-    itemCount: 0,
-    firstItemIndex: 0,
-    lastItemIndex: 0,
-    requestCharge: 0,
-    roundTrips: 0,
-  };
-  const doRequest = async (itemIndex: number): Promise<ViewModels.QueryResults> => {
-    const results = await queryItems(itemIndex);
-    const { requestCharge, hasMoreResults, itemCount, lastItemIndex, documents } = results;
-    queryResults.roundTrips = queryResults.roundTrips + 1;
-    queryResults.requestCharge = Number(queryResults.requestCharge) + Number(requestCharge);
-    queryResults.hasMoreResults = hasMoreResults;
-    queryResults.itemCount = queryResults.itemCount + itemCount;
-    queryResults.lastItemIndex = lastItemIndex;
-    queryResults.documents = queryResults.documents.concat(documents);
-    if (queryResults.hasMoreResults) {
-      return doRequest(queryResults.lastItemIndex + 1);
-    }
-    return queryResults;
-  };
-
-  return doRequest(0);
-};
+    return doRequest(0);
+  }
+}

src/hooks/useKnockoutExplorer.ts

@@ -260,7 +260,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
           explorer.configure(inputs);
           resolve(explorer);
           if (openAction) {
-            handleOpenAction(openAction, explorer.databases(), explorer);
+            handleOpenAction(openAction, explorer.nonSystemDatabases(), explorer);
           }
         }
       },

src/i18n.ts

@@ -1,14 +1,22 @@
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
+import XHR from "i18next-http-backend";
+import EnglishTranslations from "./Localization/en/translations.json";
 
 i18n
+  .use(XHR)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
+    resources: {
+      en: EnglishTranslations,
+    },
     fallbackLng: "en",
     detection: { order: ["navigator", "cookie", "localStorage", "sessionStorage", "querystring", "htmlTag"] },
     debug: process.env.NODE_ENV === "development",
+    ns: ["translations"],
+    defaultNS: "translations",
     keySeparator: ".",
     interpolation: {
       formatSeparator: ",",
@@ -21,5 +29,3 @@ i18n
       useSuspense: false,
     },
   });
-
-export default i18n;

src/userContext.test.ts

@@ -1,60 +0,0 @@
-import { DatabaseAccount } from "./Contracts/DataModels";
-import { updateUserContext, userContext } from "./UserContext";
-
-describe("shouldShowQueryPageOptions()", () => {
-  it("should be SQL for Default API", () => {
-    updateUserContext({});
-    expect(userContext.apiType).toBe("SQL");
-  });
-
-  it("should be Cassandra for EnableCassandra API", () => {
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableCassandra" }],
-        },
-      } as DatabaseAccount,
-    });
-    expect(userContext.apiType).toBe("Cassandra");
-  });
-
-  it("should be Gremlin for EnableGremlin API", () => {
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableGremlin" }],
-        },
-      } as DatabaseAccount,
-    });
-    expect(userContext.apiType).toBe("Gremlin");
-  });
-
-  it("should be Tables for EnableTable API", () => {
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableTable" }],
-        },
-      } as DatabaseAccount,
-    });
-    expect(userContext.apiType).toBe("Tables");
-  });
-
-  it("should be Mongo for MongoDB API", () => {
-    updateUserContext({
-      databaseAccount: {
-        kind: "MongoDB",
-      } as DatabaseAccount,
-    });
-    expect(userContext.apiType).toBe("Mongo");
-  });
-
-  it("should be Mongo for Parse API", () => {
-    updateUserContext({
-      databaseAccount: {
-        kind: "Parse",
-      } as DatabaseAccount,
-    });
-    expect(userContext.apiType).toBe("Mongo");
-  });
-});