api call with string autoPilotMaxThroughput

.eslintignore

@@ -97,7 +97,6 @@ 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
@@ -124,15 +123,12 @@ 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
@@ -145,8 +141,6 @@ 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

package.json

@@ -43,6 +43,7 @@
     "@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",

src/Common/Upload/index.tsx

@@ -0,0 +1,75 @@
+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/DataModels.ts

@@ -138,7 +138,7 @@ export interface Database extends Resource {
   collections?: Collection[];
 }
 
-export interface DocumentId extends Resource {}
+export interface DocumentId extends Resource { }
 
 export interface ConflictId extends Resource {
   resourceId?: string;
@@ -273,7 +273,7 @@ export interface AutoPilotOfferSettings {
 }
 
 export interface CreateDatabaseParams {
-  autoPilotMaxThroughput?: number;
+  autoPilotMaxThroughput?: number | string;
   databaseId: string;
   databaseLevelThroughput?: boolean;
   offerThroughput?: number;

src/Contracts/ViewModels.ts

@@ -88,7 +88,6 @@ 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,10 +77,6 @@ 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);
   });
@@ -97,10 +93,6 @@ 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

@@ -63,10 +63,7 @@ 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());
@@ -74,13 +71,9 @@ 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,23 +1,22 @@
-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 AddUdfIcon from "../../images/AddUdf.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.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 Explorer from "./Explorer";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import { userContext } from "../UserContext";
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -43,7 +42,7 @@ export class ResourceTreeContextMenuButtonFactory {
     if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
       items.push({
         iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.deleteDatabaseConfirmationPane.open(),
+        onClick: () => container.openDeleteDatabaseConfirmationPane(),
         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-40"
+        className="ms-ScrollablePane root-72"
         data-is-scrollable="true"
       >
         <div
-          className="stickyAbove-42"
+          className="stickyAbove-74"
           style={
             Object {
               "height": 0,
@@ -365,7 +365,7 @@ exports[`test render renders with filters 1`] = `
           }
         />
         <div
-          className="ms-ScrollablePane--contentContainer contentContainer-41"
+          className="ms-ScrollablePane--contentContainer contentContainer-73"
           data-is-scrollable={true}
         >
           <Sticky
@@ -691,18 +691,18 @@ exports[`test render renders with filters 1`] = `
                       validateOnLoad={true}
                     >
                       <div
-                        className="ms-TextField directoryListFilterTextBox root-46"
+                        className="ms-TextField directoryListFilterTextBox root-78"
                       >
                         <div
                           className="ms-TextField-wrapper"
                         >
                           <div
-                            className="ms-TextField-fieldGroup fieldGroup-47"
+                            className="ms-TextField-fieldGroup fieldGroup-79"
                           >
                             <input
                               aria-invalid={false}
                               aria-label="Directory filter text box"
-                              className="ms-TextField-field field-48"
+                              className="ms-TextField-field field-80"
                               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-57"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-89"
                             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-58"
+                              className="ms-Button-flexContainer flexContainer-90"
                               data-automationid="splitbuttonprimary"
                             >
                               <div
@@ -1943,7 +1943,7 @@ exports[`test render renders with filters 1`] = `
           </List>
         </div>
         <div
-          className="stickyBelow-43"
+          className="stickyBelow-75"
           style={
             Object {
               "bottom": "0px",
@@ -1954,7 +1954,7 @@ exports[`test render renders with filters 1`] = `
           }
         >
           <div
-            className="stickyBelowItems-44"
+            className="stickyBelowItems-76"
           />
         </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 { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
+import * as 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 { FileSystemUtil } from "../../Notebook/FileSystemUtil";
+import * as 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,17 +1,19 @@
 import { shallow } from "enzyme";
-import React from "react";
-import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { collection } from "./TestUtils";
-import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty } from "./SettingsUtils";
+import React from "react";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import * as DataModels from "../../../Contracts/DataModels";
+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";
 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,
@@ -29,8 +31,6 @@ 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,7 +134,6 @@ 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 { collection } from "./TestUtils";
+import ko from "knockout";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import {
   getMongoIndexType,
+  getMongoIndexTypeText,
   getMongoNotification,
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
+  isIndexTransforming,
   MongoIndexTypes,
   MongoNotificationType,
+  MongoWildcardPlaceHolder,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  MongoWildcardPlaceHolder,
-  getMongoIndexTypeText,
   SingleFieldText,
   WildcardText,
-  isIndexTransforming,
 } from "./SettingsUtils";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import ko from "knockout";
+import { collection } from "./TestUtils";
 
 describe("SettingsUtils", () => {
   it("hasDatabaseSharedThroughput", () => {
@@ -42,7 +42,6 @@ describe("SettingsUtils", () => {
         loadCollections: undefined,
         findCollectionWithId: undefined,
         openAddCollection: undefined,
-        onDeleteDatabaseContextMenuClick: undefined,
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -331,7 +331,7 @@ 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}
-          dropdownWidth="auto"
+          // Removed dropdownWidth="auto" as dropdown accept only number
           options={choices.map((c) => ({
             key: c.key,
             text: this.props.getTranslation(c.labelTKey),

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

@@ -285,7 +285,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             <StyledWithResponsiveMode
               aria-labelledby="database-label"
               disabled={true}
-              dropdownWidth="auto"
               id="database-dropdown-input"
               onChange={[Function]}
               options={
@@ -607,7 +606,6 @@ 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/Explorer.test.tsx

@@ -0,0 +1,43 @@
+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 { FileSystemUtil } from "./Notebook/FileSystemUtil";
+import * as 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 DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
+import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
+import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
 import GraphStylingPane from "./Panes/GraphStylingPane";
 import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
@@ -70,7 +70,6 @@ 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";
@@ -203,7 +202,6 @@ export default class Explorer {
   // Contextual panes
   public addCollectionPane: AddCollectionPane;
   public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
-  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
   public graphStylingPane: GraphStylingPane;
   public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
@@ -211,14 +209,9 @@ 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;
@@ -561,13 +554,6 @@ 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),
@@ -617,29 +603,6 @@ 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),
@@ -661,13 +624,6 @@ 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),
@@ -687,7 +643,6 @@ export default class Explorer {
     this._panes = [
       this.addCollectionPane,
       this.deleteCollectionConfirmationPane,
-      this.deleteDatabaseConfirmationPane,
       this.graphStylingPane,
       this.addTableEntityPane,
       this.editTableEntityPane,
@@ -695,13 +650,9 @@ 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,
     ];
@@ -797,8 +748,6 @@ 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;
     }
@@ -1321,7 +1270,12 @@ export default class Explorer {
   }
 
   public isLastNonEmptyDatabase(): boolean {
-    if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
+    if (
+      this.isLastDatabase() &&
+      this.databases()[0] &&
+      this.databases()[0].collections &&
+      this.databases()[0].collections().length > 0
+    ) {
       return true;
     }
     return false;
@@ -2114,38 +2068,6 @@ 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";
@@ -2454,6 +2376,33 @@ 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(
@@ -2471,4 +2420,15 @@ export default class Explorer {
       <AddDatabasePane explorer={this} openNotificationConsole={this.expandConsole} closePanel={this.closeSidePanel} />
     );
   }
+  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.settingsPane.open(),
+      onCommandClick: () => container.openSettingPane(),
       commandButtonLabel: undefined,
       ariaLabel: label,
       tooltipText: label,
@@ -407,7 +407,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
   return {
     iconSrc: NewNotebookIcon,
     iconAlt: label,
-    onCommandClick: () => container.onUploadToNotebookServerClicked(),
+    onCommandClick: () => container.openUploadFilePanel(),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,

src/Explorer/Notebook/FileSystemUtil.ts

@@ -1,7 +1,4 @@
-// Utilities for file system
-
-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 ..
@@ -10,7 +7,7 @@ export class FileSystemUtil {
  * @param path1
  * @param path2
  */
-  public static isPathEqual(path1: string, path2: string): boolean {
+export function isPathEqual(path1: string, path2: string): boolean {
   const normalize = (path: string): string => {
     const dotSlash = "./";
     if (path.indexOf(dotSlash) === 0) {
@@ -20,18 +17,17 @@ export class FileSystemUtil {
   };
 
   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 {
+export function stripExtension(path: string, extension: string): string {
   const splitted = path.split(".");
   if (splitted[splitted.length - 1] === extension) {
     splitted.pop();
   }
   return splitted.join(".");
-  }
 }

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 { FileSystemUtil } from "../FileSystemUtil";
+import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";
 

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,12 +1,11 @@
-import * as DataModels from "../../Contracts/DataModels";
-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";
+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 { NotebookUtil } from "./NotebookUtil";
 
 export class NotebookContentClient {
   constructor(

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 * as ViewModels from "../Contracts/ViewModels";
 import { ActionContracts } from "../Contracts/ExplorerContracts";
+import * as ViewModels from "../Contracts/ViewModels";
 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.settingsPane.open();
+    explorer.openSettingPane();
   }
 }
 

src/Explorer/Panes/AddDatabasePane/index.tsx

@@ -180,7 +180,7 @@ export const AddDatabasePane: FunctionComponent<AddDatabasePaneProps> = ({
     };
 
     if (isAutoPilotSelected) {
-      createDatabaseParams.autoPilotMaxThroughput = maxAutoPilotThroughputSet;
+      createDatabaseParams.autoPilotMaxThroughput = "" + maxAutoPilotThroughputSet;
     } else {
       createDatabaseParams.offerThroughput = addDatabasePaneStartMessage.offerThroughput;
     }

src/Explorer/Panes/DeleteDatabaseConfirmationPane.html

@@ -1,109 +0,0 @@
-<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

@@ -1,127 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,168 @@
+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

@@ -1,175 +0,0 @@
-<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

@@ -1,172 +0,0 @@
-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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,163 @@
+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 * as React from "react";
-import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
-import { KeyCodes } from "../../Common/Constants";
 import { Subscription } from "knockout";
+import { IconButton, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import * as React from "react";
 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

@@ -2,22 +2,17 @@ import AddCollectionPaneTemplate from "./AddCollectionPane.html";
 import BrowseQueriesPaneTemplate from "./BrowseQueriesPane.html";
 import CassandraAddCollectionPaneTemplate from "./CassandraAddCollectionPane.html";
 import DeleteCollectionConfirmationPaneTemplate from "./DeleteCollectionConfirmationPane.html";
-import DeleteDatabaseConfirmationPaneTemplate from "./DeleteDatabaseConfirmationPane.html";
-import ExecuteSprocParamsPaneTemplate from "./ExecuteSprocParamsPane.html";
 import GitHubReposPaneTemplate from "./GitHubReposPane.html";
 import GraphNewVertexPaneTemplate from "./GraphNewVertexPane.html";
 import GraphStylingPaneTemplate from "./GraphStylingPane.html";
 import LoadQueryPaneTemplate from "./LoadQueryPane.html";
 import SaveQueryPaneTemplate from "./SaveQueryPane.html";
-import SettingsPaneTemplate from "./SettingsPane.html";
 import SetupNotebooksPaneTemplate from "./SetupNotebooksPane.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 UploadFilePaneTemplate from "./UploadFilePane.html";
-import UploadItemsPaneTemplate from "./UploadItemsPane.html";
 
 export class PaneComponent {
   constructor(data: any) {
@@ -43,15 +38,6 @@ export class DeleteCollectionConfirmationPaneComponent {
   }
 }
 
-export class DeleteDatabaseConfirmationPaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: DeleteDatabaseConfirmationPaneTemplate,
-    };
-  }
-}
-
 export class GraphNewVertexPaneComponent {
   constructor() {
     return {
@@ -115,33 +101,6 @@ 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 {
@@ -169,15 +128,6 @@ export class BrowseQueriesPaneComponent {
   }
 }
 
-export class UploadFilePaneComponent {
-  constructor() {
-    return {
-      viewModel: PaneComponent,
-      template: UploadFilePaneTemplate,
-    };
-  }
-}
-
 export class StringInputPaneComponent {
   constructor() {
     return {

src/Explorer/Panes/PanelComponent.less

@@ -110,7 +110,34 @@
 .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 { FileSystemUtil } from "../Notebook/FileSystemUtil";
+import * as 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 { FileSystemUtil } from "../Notebook/FileSystemUtil";
+import * as FileSystemUtil from "../Notebook/FileSystemUtil";
 import "./PublishNotebookPaneComponent.less";
 import Html2Canvas from "html2canvas";
 import { ImmutableNotebook } from "@nteract/commutable/src";

src/Explorer/Panes/SettingsPane.html

@@ -1,268 +0,0 @@
-<!-- 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

@@ -1,38 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,253 @@
+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

@@ -1,83 +0,0 @@
-<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

@@ -1,137 +0,0 @@
-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

@@ -0,0 +1,111 @@
+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

@@ -1,130 +0,0 @@
-<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

@@ -1,143 +0,0 @@
-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

@@ -0,0 +1,995 @@
+// 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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,160 @@
+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

@@ -1,161 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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-140"
+          className="ms-Stack panelInfoErrorContainer css-204"
         >
           <StyledIconBase
             className="panelWarningIcon"
@@ -317,7 +317,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             >
               <i
                 aria-hidden={true}
-                className="panelWarningIcon root-142"
+                className="panelWarningIcon root-206"
                 data-icon-name="WarningSolid"
               >
                 
@@ -333,7 +333,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               variant="small"
             >
               <span
-                className="panelWarningErrorMessage css-143"
+                className="panelWarningErrorMessage css-207"
               >
                 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-143"
+            className="css-207"
           >
             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-145"
+              className="ms-TextField root-209"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-146"
+                  className="ms-TextField-fieldGroup fieldGroup-210"
                 >
                   <input
                     aria-invalid={false}
                     autoFocus={true}
-                    className="ms-TextField-field field-147"
+                    className="ms-TextField-field field-211"
                     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-156"
+            className="css-220"
           >
             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-156"
+            className="css-220"
           >
             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-145"
+              className="ms-TextField ms-TextField--multiline root-209"
             >
               <div
                 className="ms-TextField-wrapper"
               >
                 <div
-                  className="ms-TextField-fieldGroup fieldGroup-157"
+                  className="ms-TextField-fieldGroup fieldGroup-221"
                 >
                   <textarea
                     aria-invalid={false}
-                    className="ms-TextField-field field-158"
+                    className="ms-TextField-field field-222"
                     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-160"
+                    className="ms-Button ms-Button--primary root-224"
                     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-161"
+                      className="ms-Button-flexContainer flexContainer-225"
                       data-automationid="splitbuttonprimary"
                     >
                       <span
-                        className="ms-Button-textContainer textContainer-162"
+                        className="ms-Button-textContainer textContainer-226"
                       >
                         <span
-                          className="ms-Button-label label-164"
+                          className="ms-Button-label label-228"
                           id="id__6"
                           key="id__6"
                         >

src/Explorer/Tabs/DocumentsTab.ts

@@ -1,43 +1,35 @@
+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 { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
-import { KeyCodes } from "../../Common/Constants";
-import DocumentId from "../Tree/DocumentId";
-import editable from "../../Common/EditableUtility";
-import * as HeadersUtility from "../../Common/HeadersUtility";
-import TabsBase from "./TabsBase";
-import { DocumentsGridMetrics } from "../../Common/Constants";
-import * as 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 * as QueryUtils from "../../Utils/QueryUtils";
 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 Explorer from "../Explorer";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { AccessibleVerticalList } from "../Tree/AccessibleVerticalList";
+import DocumentId from "../Tree/DocumentId";
 import template from "./DocumentsTab.html";
+import TabsBase from "./TabsBase";
 
 export default class DocumentsTab extends TabsBase {
   public static readonly component = { name: "documents-tab", template };
@@ -922,12 +914,7 @@ export default class DocumentsTab extends TabsBase {
       iconAlt: label,
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-        const focusElement = document.getElementById("itemImportLink");
-        const uploadItemsPane = container.isRightPanelV2Enabled()
-          ? container.uploadItemsPaneAdapter
-          : container.uploadItemsPane;
-        selectedCollection && uploadItemsPane.open();
-        focusElement && focusElement.focus();
+        selectedCollection && container.openUploadItemsPanePane();
       },
       commandButtonLabel: label,
       ariaLabel: label,

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.executeSprocParamsPane.open();
+        this.collection && this.collection.container.openExecuteSprocParamsPanel();
       },
       commandButtonLabel: label,
       ariaLabel: label,

src/Explorer/Tree/Database.ts

@@ -142,10 +142,6 @@ 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.tsx

@@ -765,7 +765,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       {
         label: "Upload File",
         iconSrc: NewNotebookIcon,
-        onClick: () => this.container.onUploadToNotebookServerClicked(item),
+        onClick: () => this.container.openUploadFilePanel(item),
       },
     ];
 

src/Main.tsx

@@ -229,10 +229,8 @@ const App: React.FunctionComponent = () => {
         closePanel={closeSidePanel}
         isConsoleExpanded={isNotificationConsoleExpanded}
       />
-      <div data-bind="react:uploadItemsPaneAdapter" />
       <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} }' />
@@ -240,13 +238,9 @@ 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 { FileSystemUtil } from "../Explorer/Notebook/FileSystemUtil";
+import * as FileSystemUtil from "../Explorer/Notebook/FileSystemUtil";
 import { GalleryTab } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 
 const onInit = async () => {

src/userContext.test.ts

@@ -0,0 +1,60 @@
+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");
+  });
+});

test/cassandra/container.spec.ts

@@ -107,12 +107,12 @@ describe("Collection Add and Delete Cassandra spec", () => {
       await dbElements[0].click();
 
       // confirm delete database
-      await frame.waitForSelector('input[data-test="confirmDatabaseId"]', { visible: true });
+      await frame.waitForSelector('input[id="confirmDatabaseId"]', { visible: true });
       await frame.waitFor(RENDER_DELAY);
-      await frame.type('input[data-test="confirmDatabaseId"]', keyspaceId.trim());
+      await frame.type('input[id="confirmDatabaseId"]', keyspaceId.trim());
 
       // click delete
-      await frame.click('input[data-test="deleteDatabase"]');
+      await frame.click('button[id="sidePanelOkButton"]');
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
       await frame.waitFor(LOADING_STATE_DELAY);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });

test/mongo/container.spec.ts

@@ -123,12 +123,12 @@ describe("Collection Add and Delete Mongo spec", () => {
       await frame.click('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');
 
       // confirm delete database
-      await frame.waitForSelector('input[data-test="confirmDatabaseId"]', { visible: true });
+      await frame.waitForSelector('input[id="confirmDatabaseId"]', { visible: true });
       await frame.waitFor(RENDER_DELAY);
-      await frame.type('input[data-test="confirmDatabaseId"]', selectedDbId);
+      await frame.type('input[id="confirmDatabaseId"]', selectedDbId);
 
       // click delete
-      await frame.click('input[data-test="deleteDatabase"]');
+      await frame.click('button[id="sidePanelOkButton"]');
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
       await frame.waitFor(LOADING_STATE_DELAY);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });

test/sql/container.spec.ts

@@ -120,12 +120,12 @@ describe("Collection Add and Delete SQL spec", () => {
       await frame.click('span[class="treeComponentMenuItemLabel deleteDatabaseMenuItemLabel"]');
 
       // confirm delete database
-      await frame.waitForSelector('input[data-test="confirmDatabaseId"]', { visible: true });
+      await frame.waitForSelector('input[id="confirmDatabaseId"]', { visible: true });
       await frame.waitFor(RENDER_DELAY);
-      await frame.type('input[data-test="confirmDatabaseId"]', selectedDbId);
+      await frame.type('input[id="confirmDatabaseId"]', selectedDbId);
 
       // click delete
-      await frame.click('input[data-test="deleteDatabase"]');
+      await frame.click('button[id="sidePanelOkButton"]');
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
       await frame.waitFor(LOADING_STATE_DELAY);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });